作為只能拷貝別人代碼的萌新该溯，要感謝程序員朋友的不嫌棄，百忙之中幫我弄官網(wǎng)别惦。謝謝各位大佬狈茉！謝謝各位大佬！謝謝各位大佬掸掸！
本篇文章是來(lái)記錄設(shè)計(jì)同學(xué)第一次寫(xiě)網(wǎng)站的經(jīng)驗(yàn)總結(jié)氯庆，讓我們的設(shè)計(jì)一起進(jìn)步蹭秋。
大體工作分為三部曲：設(shè)計(jì)、寫(xiě)頁(yè)面堤撵、部署
一仁讨、設(shè)計(jì)總結(jié)
作為設(shè)計(jì)同學(xué)，在做畫(huà)網(wǎng)站的時(shí)候实昨，對(duì)頁(yè)面的交互動(dòng)效洞豁，顯示內(nèi)容都在盡情發(fā)揮我的個(gè)人想象，導(dǎo)致后期頁(yè)面呈現(xiàn)內(nèi)容過(guò)少荒给，只有設(shè)計(jì)角度考慮丈挟，缺乏從產(chǎn)品角度去思考。
二志电、前端技術(shù)總結(jié)
我們的網(wǎng)站做了手機(jī)和電腦不同的兩端曙咽。
手機(jī)端：http://m.dayuanai.com
目前手機(jī)端還存在部分瀏覽器右邊菜單欄下拉不展示下拉導(dǎo)航的bug
1.工作歷程：
寫(xiě)電腦端之前，程序員已經(jīng)搭好了框架挑辆，用的是VUE例朱。這對(duì)我來(lái)說(shuō)太困難，所以我花了一天時(shí)間去理解代碼鱼蝉。后來(lái)在官網(wǎng)部分我只是改改樣式洒嗤，上傳圖片，加一些鏈接蚀乔。
手機(jī)端官網(wǎng)我是用html去寫(xiě)的烁竭。去jQuery網(wǎng)站找到了滑動(dòng)代碼，因?yàn)橹黧w內(nèi)容我用圖片代替的吉挣，所以省了很多事派撕，下拉的菜單欄是看別人的代碼，運(yùn)用一下的睬魂，不細(xì)說(shuō)了终吼，怕班門(mén)弄斧。
2.工作總結(jié)：
1）設(shè)計(jì)在與前端交付設(shè)計(jì)稿的時(shí)候要說(shuō)清楚頁(yè)面布局氯哮，在不同分辨率下的樣式變化际跪。
本次設(shè)計(jì)因?yàn)槲覜](méi)有和搭框架的程序員及時(shí)溝通，所以布局一開(kāi)始有問(wèn)題喉钢，后面他改布局就很困難（因?yàn)闆](méi)時(shí)間幫我改）姆打，所以我就通過(guò)限定最小/大寬度去補(bǔ)救一下；
2）弄清楚前端在寫(xiě)頁(yè)面時(shí)的邊距規(guī)則肠虽。
打個(gè)比方幔戏，html是一個(gè)大房子，div就是一個(gè)個(gè)小房間税课，css就是給小房間打扮的好看闲延。
所以當(dāng)前端寫(xiě)頁(yè)面時(shí)痊剖，就會(huì)先用div弄出一個(gè)個(gè)小房間。
前端會(huì)先把網(wǎng)頁(yè)上方劃分一個(gè)大房間（綠色）垒玲，如圖：網(wǎng)頁(yè)頭部-1
在大房間里嵌套小房間（藍(lán)色）陆馁，如圖：網(wǎng)頁(yè)頭部-2
那小房間的位置就是相對(duì)于大房間的，我們?cè)谧鲈O(shè)計(jì)的時(shí)候合愈，也要將設(shè)計(jì)稿劃分模塊叮贩，方便前端實(shí)現(xiàn)。當(dāng)我們覺(jué)得哪個(gè)網(wǎng)站做的好佛析，也可以用查看代碼的方式去分析別人網(wǎng)站的布局妇汗。
3）字重
前端在寫(xiě)字體的時(shí)候，不像設(shè)計(jì)軟件有l(wèi)ight/regular的選擇说莫，所以當(dāng)字重有要求時(shí)要和前端說(shuō)對(duì)應(yīng)的font-weight,
可以參考表格：
三、部署到服務(wù)器
部署工作是后端大佬教的寞焙，其實(shí)我也沒(méi)有弄懂原理储狭，只知道按照教的去做。所以也沒(méi)有啥好總結(jié)的捣郊。
我的代碼再本地辽狈，沒(méi)有上傳到GitHub。大體步驟就是先打包文件呛牲，在終端上傳打包的文件刮萌；鏈接服務(wù)器；替換文件娘扩；檢查一下是否最新的文件着茸；大功告成。
了解一些頁(yè)面布局的知識(shí)琐旁，可以讓設(shè)計(jì)交付工作更絲滑涮阔。大家一起共同進(jìn)步
