哎，心累！

開始

本次本著自己養活自己的原則，接了三個學姐的畢業設計，都是是把她們的設計圖編寫成網頁。實際都是一些布局規整，頁面簡介的網頁。雖然一份網頁有15頁，但其實以正常速度大約兩天就可以寫完。所以毫無顧慮，接了三份，時間比較趕，差不多都三天之類要（不是同時接的）。

過程

第一個學姐的設計是關於美食方面的網頁，十五張網頁大概只有五種樣式。一共是三個人做，但第一次經驗不足，在分配任務時非常隨意，沒有按照網頁樣式來分配，本來裏面有八張樣式一樣的網頁，硬是我們三人一人兩三張給做完了（header和footer是一個人早就做好的）。第一份畢業設計做完得還算快，五天完事了（沒有一直做，因為有課也有其他事）。在合代碼時我們只是檢查了部分兼容性和動態效果實現，發現沒問題直接發給那個學姐，結果得到的反饋是有大！！問·！！題！！，其實當時我也是懵逼的，雖然不是非常仔細的完成的網頁，但大問題應該不至於吧，所以約了學姐見面談。結果學姐一見面直接就跟我們講網頁與設計圖嚴重不符，變形嚴重，布局偏差大，不能接受。拿出設計圖和我們寫的網頁一比對真的有問題，所以只能抱歉的幫學姐修改網頁。就從這裏開始，讓我意識到寫網頁需要註意很多很多東西。

一，修改代碼真的是麻煩，不說別人的代碼，自己的也看著累。

長篇的代碼一行行怎得讓人眼花繚亂，那麽多的英文字母更是讓人認不清誰是誰。所以在修改的時候，代碼工具，切圖工具以及瀏覽器調試工具一起上，能用瀏覽器調試工具調試是最好的，明了快速。遇上重新測像素的也還好，就怕自己的代碼哪一塊只要稍稍加了1px，都會讓整個布局崩塌。所以自己的代碼一定要註釋清楚，樣式命名直觀（盡量給每一塊代碼或樣式一個特殊的開頭），重復樣式寫在一塊，盡量減少代碼行數。每張網頁復用的header和footer用js引用過來，這樣如果遇到修改，修改一次就夠了。最後當然是別人的代碼啦，看不懂就算了，盡量不在別人代碼上做修改，而是讓他本人來修改，這樣來得比較快速高效。

二，做好網頁自適應

這是這次寫網頁遇到的最大的問題。網頁變形！這個變形倒不是指網頁放大或縮小之後得布局文字混亂，只是每個div塊高變矮8了或者變高了，緊接著頁面上的圖片就跟著變形了。這點讓那些做UI的學姐簡直無法接受，我們當時也一直沒註意到這問題，而且也確實有網頁出現了瀏覽器縮放後布局混亂（這就是沒有做好自適應布局了啦，應該是用像素定位而且沒有采用三欄布局），後來仔細一想，問題是設計圖問題，因為學姐給的設計圖是寬為1024的圖，高固定，而我們在寫代碼時習慣將圖片的高設置定值（ps測出來的值），寬設置為所在容器的100%。所以出現了在1366或者其他分辨率電腦上圖片被壓縮的情況。這個問題不是通過改變電腦分辨率來解決，而是如何在代碼中能夠解決才對。當然我只知道有彈性圖片，這個問題我還不知道怎麽解決啦。然後就是在寫網頁是盡量用居中div來包含其他div，這樣網頁的自適應也會比較好。

三，認真對待每張網頁，做到盡量一比一還原設計圖。

關於寫畢業設計網頁代碼寫後感