職責
網站前端開發，即網頁架構師。主要職責是與互動設計師、視覺設計師配合，根據效果圖來規劃頁面布局，合理部署頁面代碼層次，挖掘用戶體驗效果。用HTML、CSS、JS等布局網頁內容、製作靜態頁面，這些頁面要兼容各主流瀏覽器，並配合程式完成靜態頁面與後台程式的整合工作。另外，要對網站做一些相應的更新、維護及最佳化。整個網站開發的流程大致如右圖。前端開發(圖片黃色標誌區域)在整個過程中占據著不可替代的地位，其它幾個環節主要給予相關的配合。操作規範
符合WEB開發標準，從用戶角度出發，代碼要求簡潔明了、井然有序，儘可能減小伺服器的負載，提高對頁面的解析速度。實現頁面代碼與樣式分離，兼容主流瀏覽器。1、檔案規範
1)html，css，js，images檔案均歸檔至<系統開發規範>約定的目錄中;
2)html檔案命名：英文命名，後綴.htm，同時將對應界面稿放於同目錄中，若界面稿命名為中文，請重命名與html檔案同名，以方便後端添加功能時查找對應頁面;
3)css檔案命名：英文命名，後綴.css，共用base.css，首頁index.css，其他頁面依實際模組需求命名;
4)Js檔案命名：英文命名，後綴.js，共用common.js，其他依實際模組需求命名。
2、靜態頁面基本規範
1)靜態頁面的命名一般根據項目的需要來定，如index.html/default.html/help.html等，便於識別即可;
2)代碼書寫要簡潔，按標準的寫法來。首行要縮進，層次要清晰，但於查看與更新;
3)根據項目原始碼來選擇頁面的編碼，一般為UTF-8，有特殊需要的可視情況而定;
4)CSS儘量合併寫到一個樣式表中，能用背景呈現的圖片要儘量寫到樣式表中。頁面採用外鏈形式調用。放到頁面頂部標籤內部即可;
5)JS代碼也要儘量的合併，把內容整合到一個檔案中，非特殊情況下將其外鏈放到頁面底部結束之前即可;
6)整個頁面中儘量少使用CSS的內嵌樣式，不利於載入;
7)布局時候要考慮到DIV層的嵌套，不要太多;
8)合理運用注釋代碼，但於後期的查找與維護;
3、XHTML基本規範
1)、清除某些特定標籤內外邊距，如div/ul/ol/p;
2)靈活運用class與id。id是唯一的並是父級的，class是可以重複的並是子級的，所以id僅使用在大的模組上，class可用在重複使用率高及子級中;id原則上都是由Q分發框架檔案時命名的，為JavaScript預留鉤子的除外;
3)充分利用html自身屬性及樣式繼承原理減少代碼量。書寫代碼前，考慮並提高樣式重複使用率;
4)樣式表中中文字型名，請務必轉碼成unicode碼，以避免編碼錯誤時亂碼;
5)背景圖片請儘可能使用sprite技術，減小http請求，考慮到多人協作開發，sprite按模組製作;
6)杜絕使用兼容ie8;
7)用png圖片做圖片時，要求圖片格式為png-8格式，若png-8實在影響圖片質量或其中有半透明效果，請為ie6單獨定義背景：
8)css屬性書寫順序，建議遵循：布局定位屬性–>自身屬性–>文本屬性–>其他屬性。此條可根據自身習慣書寫，但儘量保證同類屬性寫在一起。
9)為JavaScript預留鉤子的命名，請以js_起始，比如：js_hide,js_show;
10)協作開發及分工：Q會根據各個模組，同時根據頁面相似程式，事先寫好大體框架檔案，分配給前端人員實現內部結構&表現&行為;共用css檔案base.css由Q書寫，協作開發過程中，每個頁面請務必都要引入，此檔案包含reset及頭部底部樣式，此檔案不可隨意修改;
4、圖片基本規範
1)所有頁面元素類圖片均放入images資料夾，測試用圖片放於images/demoimg資料夾;
2)圖片格式僅限於gif||png||jpg;註：一般情況下除非透明效果GIF格式的圖片儘量少用，色彩顯示及壓縮這塊效果不是很好;
3)在保證視覺效果的情況下選擇最小的圖片格式與圖片質量，以減少載入時間;運用csssprite技術集中小的背景圖或圖示,減小頁面http請求,但注意,請務必在對應的spritepsd源圖中劃參考線,並保存至images目錄下。
5、代碼注釋規範
1)HTML注釋：注釋格式,‘–‘只能在注釋的始末位置,不可置入注釋文字區域;
2)css注釋：注釋格式/*這兒是注釋*/;
3)JavaScript注釋，單行注釋使用’//這兒是單行注釋’，多行注釋使用/*這兒有多行注釋*/;
6、開發測試工具的使用規範
兼容測試：前期開發僅測試FireFox&IE6&IE7&IE8，後期最佳化時加入Opera&Chrome&Safari;(IETester、FireBug是不錯的測試工具)
兼容代碼建議測試順序：FireFox–>IE7–>IE8–>IE6–>Opera–>Chrome–>Safari;
7、其他規範
1)開發過程中嚴格按分工完成頁面，以提高css復用率，避免重複開發;
2)減小沉冗代碼，書寫所有人都可以看的懂的代碼。簡潔易懂是一種美德，為用戶著想，為伺服器著想。
