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

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