- 相關(guān)推薦
網(wǎng)頁(yè)美工必備的知識：網(wǎng)頁(yè)設計命名規范
下面分析下下面的那張結構圖。
一.網(wǎng)站設計及基本框架結構:
1. Container(整體)
“container“ 就是將頁(yè)面中的所有元素包在一起的部分，這部分還可以命名為: “wrapper“, “wrap“, “page“.
2. Header(頭部)
“header” 是網(wǎng)站頁(yè)面的頭部區域，一般來(lái)講，它包含網(wǎng)站的logo和一些其他元素。這部分還可以命名為:“page-header” (或 pageHeader).
3. Navbar(導航)
“navbar“等同于橫向的導航欄，是最典型的網(wǎng)頁(yè)元素。這部分還可以命名為:“nav”, “navigation”, “nav-wrapper”.
4. Menu(菜單)
“Menu”區域包含一般的鏈接和菜單，這部分還可以命名為: “subNav “, “links“，“sidebar-main”.
5. Main(內容)
“Main”是網(wǎng)站的主要區域，如果是博客的話(huà)它將包含的日志。這部分還可以命名為: “content“, “main-content” (或“mainContent”)。
6. Sidebar(側邊鏈接)
“Sidebar” 部分可以包含網(wǎng)站的次要內容，比如最近更新內容列表、關(guān)于網(wǎng)站的介紹或廣告元素等…這部分還可以命名為: “subNav “, “side-panel“, “secondary-content“.
7. Footer(頁(yè)腳)
“Footer”包含網(wǎng)站的一些附加信息，這部分還可以命名為: “copyright“.
二.需要注意的幾點(diǎn):
1.盡量用"有意義的命名"來(lái)給元素命名達到語(yǔ)義化。不要使用表面形式的命名.
如:red/left/big等。
2.組合命名規則:
[元素類(lèi)型]-[元素作用/內容]
如:搜索按鈕: btn-search
登錄表單:form-login
新聞列表:list-news
3.涉及到交互行為的元素命名:
凡涉及交互行為的元素通常會(huì )有正常(link)、懸停(hover)、點(diǎn)擊(click)和已瀏覽(visited)等不同樣式，命名可參考以下規則:
鼠標懸停:：hover 點(diǎn)擊：click 已瀏覽：visited
如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited
三.Photoshop圖層結構規范:
Photoshop圖層命名遵循樹(shù)形結構，凡某元素組成的圖層大于3層，即可形成組，所有圖層盡量避免使用默認命名(圖層+編號)。
第一級圖層結構如下圖:
第二級結構圖例(醫院網(wǎng)站):
第三級結構圖例及效果圖對比(醫院新聞欄目)：
效果圖
圖層命名結構
四.常用命名匯總:
頁(yè)頭:header
登錄條:loginbar
標志:logo
側欄:sidebar
廣告條:banner
導航:nav
子導航:subNav
菜單:menu
子菜單:subMenu
下拉菜單:dropMenu
工具條: toolbar
表單:form
欄目:column
箭頭:arrow
搜索:search
搜索按鈕:btn-search
滾動(dòng)條:scroll
內容:content
標簽頁(yè):tab
文章列表:list
提示信息:msg
小技巧:tips
欄目標題:title
鏈接:links
頁(yè)腳:footer
服務(wù):service
熱點(diǎn):hot
新聞:news
下載:download
注冊:regsiter
狀態(tài):status
按鈕:btn
投票:vote
合作伙伴:partner
版權:copyright
網(wǎng)站地圖: sitemap
【網(wǎng)頁(yè)美工的知識：網(wǎng)頁(yè)設計命名規范】相關(guān)文章：
網(wǎng)頁(yè)美工設計技巧03-12
網(wǎng)頁(yè)美工設計的簡(jiǎn)介03-18
網(wǎng)頁(yè)美工切圖設計03-19
網(wǎng)頁(yè)美工切圖設計的要點(diǎn)03-28