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