網頁設計命名規範

標籤：src   服務   partner   設計者   strong   logs   意義   ane   廣告條   

一.網站設計及基本架構結構:

網頁設計命名規範
1.   Container
“container“ 就是將頁面中的所有元素包在一起的部分，這部分還可以命名為: “wrapper“, “wrap“, “page“.
2.   Header
“header” 是網站頁面的頭部地區，一般來講，它包含網站的logo和一些其他元素。這部分還可以命名為:“page-header” (或 pageHeader).
3.   Navbar
“navbar“等同於橫向的導覽列，是最典型的網頁元素。這部分還可以命名為:“nav”, “navigation”, “nav-wrapper”.
4.   Menu
“Menu”地區包含一般的連結和菜單，這部分還可以命名為: “subNav “, “links“，“sidebar-main”.
5.   Main
“Main”是網站的主要區域，如果是部落格的話它將包含的日誌。這部分還可以命名為: “content“, “main-content” (或“mainContent”)。
6.   Sidebar
“Sidebar” 部分可以包含網站的次要內容，比如最新動向內容列表、關於網站的介紹或廣告元素等…這部分還可以命名為: “subNav “, “side-panel“, “secondary-content“.
7.   Footer

“Footer”包含網站的一些附加資訊，這部分還可以命名為: “copyright“.

 

二.需要注意的幾點:
1.盡量考慮為元素命名其本身的作用或”用意”，達到語義化。不要使用表面形式的命名.
如:red/left/big等。
2.組合命名規則:
[元素類型]-[元素作用/內容]
如:搜尋按鈕: btn-search
登入表單:form-login
新聞列表:list-news
3.涉及到互動行為的元素命名:
凡涉及互動行為的元素通常會有正常、懸停、點擊和已瀏覽等不同樣式，命名可參考以下規則:
滑鼠移至上方:：hover   點擊：click   已瀏覽：visited

如:搜尋按鈕: btn-search、btn-search-hover、btn-search-visited

 

三.Photoshop圖層結構規範:
Photoshop圖層命名遵循樹形結構，凡某元素組成的圖層大於3層，即可形成組，所有圖層盡量避免使用預設命名(圖層+編號)。
圖層命名結構
 
四．常用命名匯總:
網站：site
首頁：homepage
當前位置：currentPath
二級頁面/子頁面：subpage
布局：layout
搜尋：search
網頁頭部：head/header
登入條:loginbar
標誌:logo
側欄：side/sidebar
廣告條:banner
導航:nav
主 導 航：mainNav
頂 導 航：topNav
子導航:subNav
當前位置導航：crumb
菜單:menu
子功能表:subMenu
菜單內容：menuContent
子功能表內容：subMenuContent
下拉：drop
下拉式功能表:dropMenu
工具條：tool/toolbar
表單:form
欄目:column
箭頭：arr/arrow
搜尋:search
搜尋按鈕:btn-search
捲軸:scroll
主題/外觀：theme
頁面主體：main
頁面中部：mainBody
內容:content
標籤頁:tab
文章列表:list
標籤內容：tagContent
當前標籤：tagCurrent/currentTag
提示資訊:msg
轉角/圓角：cor/corner
特別的：spec
資源：source
加入：joinus
小技巧:tips
欄目標題:title
連結:links
頁尾:footer
服務:service
指南：guild
熱點:hot
新聞:news
下載:download
註冊:regsiter
狀態:status
按鈕:btn
注 釋：note
投票:vote
夥伴:partner
友情連結：friendlink
關於我們：aboutus
提交:submit
搜尋方塊：searchbox
文字框:textbox
網頁底部：foot/footer
著作權:copyright
網站地圖: sitemap
列 定 義：column_1of3 (三列中的第一列)
column_2of3 (三列中的第二列)
column_3of3 (三列中的第三列)

分類命名：
id的命名:
(1)頁面結構
　　容器: container　　頁頭：header　　內容：content/container
　　頁面主體：main　　頁尾：footer　　導航：nav
　　側欄：sidebar　　欄目：column　　頁面外圍控制整體布局寬度：wrapper
　　左右中：left right center
(2)導航
　　導航：nav　　主導航：mainbav　　子導航：subnav
　　頂導航：topnav　　邊導航：sidebar　　左導航：leftsidebar
　　右導航：rightsidebar　　菜單：menu　　子功能表：submenu
　　標題: title　　摘要: summary
(3)功能
　　標誌：logo　　廣告：banner　　登陸：login　　登入條：loginbar
　　註冊：regsiter　　搜尋：search　　功能區：shop
　　標題：title　　加入：joinus 　狀態：status　　按鈕：btn
　　滾動：scroll　　標籤頁：tab　　文章列表：list　　提示資訊：msg
　　當前的: current　　小技巧：tips　　表徵圖: icon　　注釋：note
　　指南：guild　服務：service　　熱點：hot　　新聞：news
　　下載：download　　投票：vote　　夥伴：partner
　　友情連結：link　　著作權：copyright
 
class的命名:
(1)顏色:使用顏色的名稱或者16進位代碼,如
　　.red { color: red; }
　　.f60 { color: #f60; }
　　.ff8600 { color: #ff8600; }
(2)字型大小,直接使用’font+字型大小’作為名稱,如
　　.font12px { font-size: 12px; }
　　.font9pt {font-size: 9pt; }
(3)對齊樣式,使用對齊目標的英文名稱,如
　　.left { float:left; }
　　.bottom { float:bottom; }
(4)標題列樣式,使用’類別+功能’的方式命名,如
　　.barnews { }
　　.barproduct { }
注意事項:
　　1.一律小寫;
　　2.盡量用英文;
　　3.不加中杠和底線;
　　4.盡量不縮寫，除非一看就明白的單詞.
　　主要的 master.css　　模組 module.css　　基本共用 base.css
　　布局，版面 layout.css　　主題 themes.css　　專欄 columns.css
　　文字 font.css　　表單 forms.css　　補丁 mend.css　　列印 print.css
       統計:count


以上結構就可以組合使用，例如：左欄位標題lefttitle；底部導航footernav 　　規範不是說要所有人照一個樣子來命名css，我們可以根據自己的需要定製命名規則，只要記住命名的規則，就可以根據網站本身的特點來創造具有自己風格的命名方式。
一、目前網頁設計者用得較多的是基於軟體開中變數的命名方式的命名方法。如對於一組用於定義字型樣式的class，我們可以使用f即foot的頭字母為首碼進行命名，如：
f-blue:表示藍色字型樣式
f-blod:表示粗體字型樣式
對於網頁中如新聞頻道的一些新聞的現實樣式，可以用n作為首碼進行樣式設計，如：
n-title:新聞標題
n-list:新聞列表
 
 
五、CSS檔案及樣式命名
1、CSS檔案命名規範
全域樣式：global.css；
架構布局：layout.css；
字型樣式：font.css；
連結樣式：link.css；
列印樣式：print.css；
2、CSS樣式命名規範
本人建議：用字母、_號工、-號、數字組成，必須以字母開頭，不能為純數字。為了開發後樣式名管理方便，大家請用有意義的單詞或縮寫組合來命名，讓同事一看就明白這樣式大概是哪一塊的，這樣就節省了尋找樣式的時間，例如：
頭部樣式用header，頭部左邊，可以用header_left或header_l,還有如果是列結構的可以這樣——box _1of3 (三列中的第一列)，box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列)，其它的我就不一一舉例了，大家按以上規律去命名就好。
下面列出一些常用的命名單詞方便大家使用：（以後大家工作過程中慢慢把自己積累的單詞都共用出來，那大家的命就會更加統一了，就不會有一義多詞的情況了。）

網頁設計命名規範