作为只能拷贝别人代码的萌新，要感谢程序员朋友的不嫌弃，百忙之中帮我弄官网。谢谢各位大佬！谢谢各位大佬！谢谢各位大佬！
本篇文章是来记录设计同学第一次写网站的经验总结，让我们的设计一起进步。
大体工作分为三部曲：设计、写页面、部署
一、设计总结
作为设计同学，在做画网站的时候，对页面的交互动效，显示内容都在尽情发挥我的个人想象，导致后期页面呈现内容过少，只有设计角度考虑，缺乏从产品角度去思考。
二、前端技术总结
我们的网站做了手机和电脑不同的两端。
目前手机端还存在部分浏览器右边菜单栏下拉不展示下拉导航的bug
1.工作历程：
写电脑端之前，程序员已经搭好了框架，用的是VUE。这对我来说太困难，所以我花了一天时间去理解代码。后来在官网部分我只是改改样式，上传图片，加一些链接。
手机端官网我是用html去写的。去jQuery网站找到了滑动代码，因为主体内容我用图片代替的，所以省了很多事，下拉的菜单栏是看别人的代码，运用一下的，不细说了，怕班门弄斧。
2.工作总结：
1）设计在与前端交付设计稿的时候要说清楚页面布局，在不同分辨率下的样式变化。
本次设计因为我没有和搭框架的程序员及时沟通，所以布局一开始有问题，后面他改布局就很困难（因为没时间帮我改），所以我就通过限定最小/大宽度去补救一下；
2）弄清楚前端在写页面时的边距规则。
打个比方，html是一个大房子，div就是一个个小房间，css就是给小房间打扮的好看。
所以当前端写页面时，就会先用div弄出一个个小房间。
前端会先把网页上方划分一个大房间（绿色），如图：网页头部-1
在大房间里嵌套小房间（蓝色），如图：网页头部-2
网页头部-1
网页头部-2
那小房间的位置就是相对于大房间的，我们在做设计的时候，也要将设计稿划分模块，方便前端实现。当我们觉得哪个网站做的好，也可以用查看代码的方式去分析别人网站的布局。
3）字重
前端在写字体的时候，不像设计软件有light/regular的选择，所以当字重有要求时要和前端说对应的font-weight,
可以参考表格：
字重
三、部署到服务器
部署工作是后端大佬教的，其实我也没有弄懂原理，只知道按照教的去做。所以也没有啥好总结的。
我的代码再本地，没有上传到GitHub。大体步骤就是先打包文件，在终端上传打包的文件；链接服务器；替换文件；检查一下是否最新的文件；大功告成。
了解一些页面布局的知识，可以让设计交付工作更丝滑。大家一起共同进步
网友评论