網(wǎng)頁設(shè)計(jì)師的工作指導(dǎo)書.doc

設(shè)計(jì)師作業(yè)指導(dǎo)書1、 目的：為了更好的滿足客戶對(duì)網(wǎng)站頁面的要求；2、 范圍：適應(yīng)于網(wǎng)頁設(shè)計(jì)師的網(wǎng)站前臺(tái)開發(fā)；3、 流程說明3.1客戶提出網(wǎng)站設(shè)計(jì)的要求；3.2網(wǎng)頁設(shè)計(jì)師根據(jù)客戶的要求，設(shè)計(jì)頁面效果圖；3.4項(xiàng)目負(fù)責(zé)人對(duì)設(shè)計(jì)的頁面進(jìn)行審核，如果符合要求交給客戶審核，如不符合要求，則返回給設(shè)計(jì)師重新設(shè)計(jì)；3.4 客戶對(duì)設(shè)計(jì)的頁面進(jìn)行審核，如果符合要求，須填寫版面確認(rèn)書，如不符合要求，則返回給設(shè)計(jì)師重新設(shè)計(jì)；3.5 設(shè)計(jì)師把客戶審核通過的效果圖轉(zhuǎn)換成HTML靜態(tài)頁面；3.6、網(wǎng)頁設(shè)計(jì)師與后臺(tái)程序員共同將完成的靜態(tài)頁面和后臺(tái)程序進(jìn)行整合。4、 PSD轉(zhuǎn)HTML編碼流程設(shè)計(jì)制作效果圖規(guī)范4.1、 尺寸為能兼容1024*768分辨率的顯示器，寬度不能超過1007像素，推薦使用950px，960px，980px。4.2、 顏色由于不同的顯示器之間存在色差，設(shè)計(jì)是必須只使用218種WEB安全色。、4.3、 漸變漸變?nèi)菀资箞D片文件體積迅速增大，避免過多過于復(fù)雜的漸變。4.4、 輸出在不明顯損壞圖片質(zhì)量時(shí)，要轉(zhuǎn)換為索引顏色模式，最大限度的縮小圖片體積。輸出使用PNG或GIF格式。4.5、 圖層相關(guān)的圖層放到一個(gè)組中，每個(gè)圖層和組都要有一個(gè)易于理解的名字。組可以嵌套。5、XHTML編碼規(guī)范5.1、 使用過度的（Transitional）XHTML1.0DTD編寫網(wǎng)頁。每個(gè)HTML頁面的基本結(jié)構(gòu)必須是：無標(biāo)2、 題文檔 內(nèi)容5.2、 CSS和JavaScript必須使用外部調(diào)用的方式。例如：5.3、 所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記。所有標(biāo)簽必須關(guān)閉。假如是單獨(dú)不成對(duì)的標(biāo)簽，在標(biāo)簽最后加一個(gè)/來關(guān)閉它。例如：或者所有標(biāo)簽的元素和屬性的名字都必須使用小寫。所有的標(biāo)簽和屬性都要用小寫。例如：要寫成onMouseOver=”要寫成onmouseover=”所有的XHTML標(biāo)記都必須合理嵌套。也就是說所有的標(biāo)簽必須對(duì)齊。例如不能出現(xiàn)而要是5.4、 所有的屬性必須用引號(hào)括起來。必須修改為：不要在注釋內(nèi)容中使“”，一定要使用可用“=”代替。“”只能發(fā)生在XHTML注釋的開頭和結(jié)束，例如：要改為使用語義標(biāo)簽。每個(gè)區(qū)塊的劃分必須有注釋。表現(xiàn)與結(jié)構(gòu)分離，30、 代碼中嚴(yán)格控制涉及任何的表現(xiàn)元素。如style、font、bgColor、border等。標(biāo)簽必須有alt屬性。6、 CSS編碼規(guī)范6.1、 總體規(guī)范6.1.1 CSS代碼要按照固定格式編寫，屬性之間不換行。屬性按照“顯示屬性”（display ?list-style? position? float? clear）“自身屬性”（width? ?height? ?margin? padding? border? ?background ）“文本屬性”（color font text-decoration text-align vertical-align white-space other text content）的順序來編寫。按照XHTML的層級(jí)來縮進(jìn)CSS的定義。加強(qiáng)代碼的結(jié)構(gòu)性。如：#nav #nav #sub_nav不同的塊之間要用空行或者注釋隔開。編寫的樣式要在主流瀏覽器中解析正常。（正常并不要求在每種瀏覽器都有中都有一摸一樣的樣式，但要求在每種瀏覽器里都比較美觀且相差不大。）6.2、 CSS樣式表各區(qū)塊用注釋說明 注釋的寫法: /* Footer */ 內(nèi)容區(qū) /* End Footer */6.3、 CSS選擇器的命名規(guī)范id和class命名采用該版塊的英文單詞或組合命名，要做到見名之意，單詞之間采用下劃線鏈接new_Release。注意不能采用“駝峰標(biāo)識(shí)”的寫法。6.4、顏色:使用顏色的名稱或者16進(jìn)制代碼,如.red color: red; .ff8600 color: #ff8600; 字體大小,直接使用font_字體大小作為名稱,如.font_12px font-size: 12px; .font_9pt font-size: 9pt; 對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱,如.left float:left; .bottom float:bottom; 標(biāo)題欄樣式,使用類別_功能的方式命名,如.bar_news .bar_product 頁面結(jié)構(gòu)容器 布局 頭部 尾部 側(cè)欄 #container #layout #head、#header #foot、#footer #sidebar 左邊欄 右邊欄 頁面主體 欄目 包裝/外套 #sidebar_left #sidebar_right #main #column #wrapper、wrap 內(nèi)容 #content導(dǎo)航導(dǎo)航 主導(dǎo)航 頂導(dǎo)航 左導(dǎo)航 右導(dǎo)航 #nav #main_nav #top_nav left_nav right_nav 其他左中右 上中下 按鈕 面包屑 滾動(dòng) left、center、right top、middle、bottom btn bread_crumb scroll 當(dāng)前： 圖標(biāo) 箭頭 首頁 二級(jí)頁面 current icon arrow home_page sub_page 狀態(tài) 常見問題 關(guān)鍵詞 status faq keyword7、 CSS文件命名規(guī)范7.1 基本的樣式表，每個(gè)文件都要引用的命名為： default.css。該文件用于定義整站的風(fēng)格，如站點(diǎn)的默認(rèn)字體大小，默認(rèn)鏈接樣式等。用于布局的樣式表命名為：layout.css。一般分為首頁布局，二級(jí)頁面布局，詳細(xì)頁面布局等幾個(gè)塊，塊與塊之間要用注釋隔開。頭部，底部，導(dǎo)航等單獨(dú)的頁面模塊要單獨(dú)的定義一個(gè)CSS文件。名稱和頁面名稱