在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中常用的命名規(guī)則.doc

如果你是網(wǎng)頁(yè)設(shè)計(jì)師，如果你用的還是拼音命名，你真的落伍了內(nèi)容：content/container導(dǎo)航：nav側(cè)欄：sidebar 欄目：column標(biāo)志：logo頁(yè)面主體：main 廣告：banner熱點(diǎn)：hot新聞：news下載：download子導(dǎo)航：subnav菜單：menu搜索：search頁(yè)腳：footer滾動(dòng)：scroll版權(quán)：copyright友情鏈接：friendlink子菜單：submenu內(nèi)容：content標(biāo)簽頁(yè)：tab文章列表：list注冊(cè)：regsiter提示信息：msg小技巧：tips加入：joinus欄目標(biāo)題：title指南：guild服務(wù)：service狀態(tài)：status投票：vote尾：footer合作伙伴：partner登錄條：loginbar頁(yè)面外圍控制整體布局寬度：wrapper左右中：left right center (二)注釋的寫(xiě)法:/* Footer */內(nèi)容區(qū)/* End Footer */(三)id的命名:(1)頁(yè)面結(jié)構(gòu)容器: container 頁(yè)頭：header內(nèi)容：content/container頁(yè)面主體：main頁(yè)尾：footer導(dǎo)航：nav側(cè)欄：sidebar 欄目：column左右中：left right center頁(yè)面外圍控制整體布局寬度：wrapper(2)導(dǎo)航導(dǎo)航：nav主導(dǎo)航：mainbav子導(dǎo)航：subnav頂導(dǎo)航：topnav邊導(dǎo)航：sidebar左導(dǎo)航：leftsidebar右導(dǎo)航：rightsidebar菜單：menu 子菜單：submenu 標(biāo)題: title 摘要: summary(3)功能標(biāo)志：logo廣告：banner登陸：login登錄條：loginbar注冊(cè)：regsiter搜索：search功能區(qū)：shop標(biāo)題：title加入：joinus狀態(tài)：status按鈕：btn滾動(dòng)：scroll標(biāo)簽頁(yè)：tab文章列表：list提示信息：msg當(dāng)前的: current小技巧：tips圖標(biāo): icon注釋：note指南：guild服務(wù)：service熱點(diǎn)：hot新聞：news下載：download投票：vote合作伙伴：partner友情鏈接：link版權(quán)：copyright(四)class 的命名:(1)顏色:使用顏色的名稱或者16進(jìn)制代碼,如.red color: red; .f60 color: #f60; .ff8600 color: #ff8600; (2) 字體大小,直接使用font+字體大小作為名稱,如.font12px font-size: 12px; .font9pt font-size: 9pt; (3)對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱,如.left float:left; .bottom float:bottom; (4)標(biāo)題欄樣式,使用類別+功能的方式命名,如.barnews .barproduct 注意事項(xiàng):1.一律小寫(xiě);2.盡量用英文;3.不加中杠和下劃線;4.盡量不縮寫(xiě)，除非一看就明白的單詞.主要的 master.css 模塊 module.css基本共用 base.css主題 themes.css 專欄 columns.css打印 print.css文字 font.css 表單 forms.css補(bǔ)丁 mend.css布局，版面 layout.cssCSS命名規(guī)則頭：header內(nèi)容：content/containe尾：footer導(dǎo)航：nav側(cè)欄：sidebar欄目：column頁(yè)面外圍控制整體布局寬度：wrapper左右中：left right center登錄條：loginbar標(biāo)志：logo廣告：banner頁(yè)面主體：main熱點(diǎn)：hot新聞：news下載：download子導(dǎo)航：subnav菜單：menu子菜單：submenu搜索：search友情鏈接：friendlink頁(yè)腳：footer版權(quán)：copyright滾動(dòng)：scroll內(nèi)容：content標(biāo)簽頁(yè)：tab文章列表：list提示信息：msg小技巧：tips欄目標(biāo)題：title加入：joinus指南：guild服務(wù)：service注冊(cè)：regsiter狀態(tài)：status投票：vote合作伙伴：partnerXHTML文件中id的命名(1)頁(yè)面結(jié)構(gòu)容器: container頁(yè)頭：header內(nèi)容：content/container頁(yè)面主體：main頁(yè)尾：footer導(dǎo)航：nav側(cè)欄：sidebar欄目：column頁(yè)面外圍控制整體布局寬度：wrapper左右中：left right center(2)導(dǎo)航導(dǎo)航：nav主導(dǎo)航：mainbav子導(dǎo)航：subnav頂導(dǎo)航：topnav邊導(dǎo)航：sidebar左導(dǎo)航：leftsidebar右導(dǎo)航：rightsidebar菜單：menu子菜單：submenu標(biāo)題: title摘要: summary(3)功能標(biāo)志：logo廣告：banner登陸：login登錄條：loginbar注冊(cè)：regsiter搜索：search功能區(qū)：shop標(biāo)題：title加入：joinus狀態(tài)：status按鈕：btn滾動(dòng)：scroll標(biāo)簽頁(yè)：tab文章列表：list提示信息：msg當(dāng)前的: current小技巧：tips圖標(biāo): icon注釋：note指南：guild服務(wù)：service熱點(diǎn)：hot新聞：news下載：download投票：vote合作伙伴：partner友情鏈接：link版權(quán)：copyright做網(wǎng)頁(yè)時(shí)，常會(huì)因?yàn)椴粫?huì)命名和命名重復(fù)而造成好多不不必要的麻煩，正確的命名的確很重要，我這里也收集了一些命名規(guī)則，發(fā)上來(lái)大家共享下。1.CSS ID 的命名外套：wrap主導(dǎo)航：mainnav子導(dǎo)航：subnav頁(yè)腳：footet整個(gè)頁(yè)面：content頁(yè)眉：header頁(yè)腳：footer商標(biāo)：label標(biāo)題：title主導(dǎo)航：nav（mainnav/globalnav）頂導(dǎo)航：topnav邊導(dǎo)航：sidebar左導(dǎo)航：leftsidebar右導(dǎo)航：rightsidebar當(dāng)前位置：loc旗志：logo標(biāo)語(yǔ)：banner菜單內(nèi)容1： menu1 content菜單容量：menu container子菜單：submenu邊導(dǎo)航圖標(biāo)：sidebarIcon注釋：note面包屑：breadcrumb(即頁(yè)面所處位置導(dǎo)航提示）容器：container內(nèi)容：content搜索：search登陸：Login功能區(qū)：shop(如購(gòu)物車，收銀臺(tái))當(dāng)前的current網(wǎng)站公用相關(guān)Container div #container 容器Header or banner div #header 頁(yè)頭部分Main or global navigation div #main-nav 主導(dǎo)航Menu #menu 菜單Sub Menu #submenu 子菜單Left or right side columns #sidebar-a, #sidebar-b 左邊欄或右邊欄Main div #main 頁(yè)面主體Content div #content 內(nèi)容部分The main content area #content-main 主要內(nèi)容區(qū)域Footer div #footer 頁(yè)腳部分Tag #tag 標(biāo)簽Message #msg #message 提示信息Tips #tips 小技巧Vote #vote 投票Friend Link #friendlink 友情連接Title #title 標(biāo)題Summary #summary 摘要Sub-navigation list #sub-nav 二級(jí)導(dǎo)航Search input #search-input 搜索輸入框Search output #search-output 搜索輸出和搜索結(jié)果相似Search #search 搜索Search results #search-results 搜索結(jié)果Copyright information #copyright 版權(quán)信息brand #branding 商標(biāo)branding-logo #branding-logo LOGOSite information #siteinfo 網(wǎng)站信息Copyright information etc. #siteinfo-legal 法律聲明Designer or other credits #siteinfo-credits 信譽(yù)Join us #joinus 加入我們Partnership opportunities #partner 合作伙伴Services #service 服務(wù)Regsiter #regsiter 注冊(cè)Status #status 狀態(tài)電子貿(mào)易相關(guān)Products .products 產(chǎn)品Products prices .products-prices 產(chǎn)品價(jià)格Products description .products-description 產(chǎn)品描述Products review .products-review 產(chǎn)品評(píng)論Editors review .editor-review 編輯評(píng)論New release .news-release 最新產(chǎn)品Publisher .publisher 生產(chǎn)商Screen shot .screenshot 縮略圖FAQ .faqs 常見(jiàn)問(wèn)題Keyword .keyword 關(guān)鍵詞Blog .blog 博客Forum .forum 論壇2.另外在編輯樣式表時(shí)可用的注釋可這樣寫(xiě)：內(nèi)容區(qū)3.樣式文件命名主要的 master.css布局，版面 layout.css專欄 columns.css文字 font.css打印樣式 print.css主題 themes.css網(wǎng)頁(yè)切圖過(guò)程中div+css命名規(guī)則內(nèi)容：content/container 導(dǎo)航：nav側(cè)欄：sidebar 欄目：column 標(biāo)志：logo 頁(yè)面主體：main 廣告：banner熱點(diǎn)：hot新聞：news下載：download子導(dǎo)航：subnav菜單：menu搜索：search 頁(yè)腳：footer滾動(dòng)：scroll版權(quán)：copyright 友情鏈接：friendlink子菜單：submenu內(nèi)容：content標(biāo)簽頁(yè)：tab 文章列表：list注冊(cè)：regsiter 提示信息：msg 小技巧：tips加入：joinus 欄目標(biāo)題：title 指南：guild服務(wù)：service 狀態(tài)：status投票：vote尾：footer 合作伙伴：partner 登錄條：loginbar頁(yè)面外圍控制整體布局寬度：wrapper 左右中：left right center (二)注釋的寫(xiě)法:/* Footer */內(nèi)容區(qū)/* End Footer */(三)id的命名:(1)頁(yè)面結(jié)構(gòu)容器: container 頁(yè)頭：header內(nèi)容：content/container頁(yè)面主體：main頁(yè)尾：footer導(dǎo)航：nav側(cè)欄：sidebar 欄目：column左右中：left right center頁(yè)面外圍控制整體布局寬度：wrapper(2)導(dǎo)航導(dǎo)航：nav主導(dǎo)航：mainbav子導(dǎo)航：subnav頂導(dǎo)航：topnav邊導(dǎo)航：sidebar左導(dǎo)航：leftsidebar右導(dǎo)航：rightsidebar菜單：menu 子菜單：submenu 標(biāo)題: title 摘要: summary(3)功能標(biāo)志：logo廣告：banner登陸：login登錄條：loginbar注冊(cè)：regsiter搜索：search功能區(qū)：shop標(biāo)題：title加入：joinus狀態(tài)：status按鈕：btn滾動(dòng)：scroll標(biāo)簽頁(yè)：tab文章列表：list提示信息：msg當(dāng)前的: current小技巧：tips圖標(biāo): icon注釋：note指南：guild服務(wù)：service熱點(diǎn)：hot新聞：news下載：download投票：vote合作伙伴：partner友情鏈接：link版權(quán)：copyright(四)class 的命名:(1)顏色:使用顏色的名稱或者16進(jìn)制代碼,如.red color: red; .f60 color: #f60; .ff8600 color: #ff8600; (2)字體大小,直接使用font+字體大小作為名稱,如.font12px font-size: 12px; .font9pt font-size: 9pt; (3)對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱,如.left flo