網(wǎng)頁(yè)美工必備的知識(shí)：網(wǎng)頁(yè)設(shè)計(jì)命名規(guī)范

　　下面分析下下面的那張結(jié)構(gòu)圖。

　　一.網(wǎng)站設(shè)計(jì)及基本框架結(jié)構(gòu):

　　1. Container(整體)

　　“container“ 就是將頁(yè)面中的所有元素包在一起的部分，這部分還可以命名為: “wrapper“, “wrap“, “page“.

　　2. Header(頭部)

　　“header” 是網(wǎng)站頁(yè)面的頭部區(qū)域，一般來(lái)講，它包含網(wǎng)站的logo和一些其他元素。這部分還可以命名為:“page-header” (或 pageHeader).

　　3. Navbar(導(dǎo)航)

　　“navbar“等同于橫向的導(dǎo)航欄，是最典型的網(wǎng)頁(yè)元素。這部分還可以命名為:“nav”, “navigation”, “nav-wrapper”.

　　4. Menu(菜單)

　　“Menu”區(qū)域包含一般的鏈接和菜單，這部分還可以命名為: “subNav “, “links“，“sidebar-main”.

　　5. Main(內(nèi)容)

　　“Main”是網(wǎng)站的主要區(qū)域，如果是博客的話它將包含的日志。這部分還可以命名為: “content“, “main-content” (或“mainContent”)。

　　6. Sidebar(側(cè)邊鏈接)

　　“Sidebar” 部分可以包含網(wǎng)站的次要內(nèi)容，比如最近更新內(nèi)容列表、關(guān)于網(wǎng)站的介紹或廣告元素等…這部分還可以命名為: “subNav “, “side-panel“, “secondary-content“.

　　7. Footer(頁(yè)腳)

　　“Footer”包含網(wǎng)站的一些附加信息，這部分還可以命名為: “copyright“.

　　二.需要注意的幾點(diǎn):

　　1.盡量用"有意義的命名"來(lái)給元素命名達(dá)到語(yǔ)義化。不要使用表面形式的命名.

　　如:red/left/big等。

　　2.組合命名規(guī)則:

　　[元素類(lèi)型]-[元素作用/內(nèi)容]

　　如:搜索按鈕: btn-search

　　登錄表單:form-login

　　新聞列表:list-news

　　3.涉及到交互行為的元素命名:

　　凡涉及交互行為的元素通常會(huì)有正常(link)、懸停(hover)、點(diǎn)擊(click)和已瀏覽(visited)等不同樣式，命名可參考以下規(guī)則:

　　鼠標(biāo)懸停:：hover 點(diǎn)擊：click 已瀏覽：visited

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

　　三.Photoshop圖層結(jié)構(gòu)規(guī)范:

　　Photoshop圖層命名遵循樹(shù)形結(jié)構(gòu)，凡某元素組成的圖層大于3層，即可形成組，所有圖層盡量避免使用默認(rèn)命名(圖層+編號(hào))。

　　第一級(jí)圖層結(jié)構(gòu)如下圖:

　　第二級(jí)結(jié)構(gòu)圖例(醫(yī)院網(wǎng)站):

　　第三級(jí)結(jié)構(gòu)圖例及效果圖對(duì)比(醫(yī)院新聞欄目)：

　　效果圖

　　圖層命名結(jié)構(gòu)

　　四.常用命名匯總:

　　頁(yè)頭:header

　　登錄條:loginbar

　　標(biāo)志:logo

　　側(cè)欄:sidebar

　　廣告條:banner

　　導(dǎo)航:nav

　　子導(dǎo)航:subNav

　　菜單:menu

　　子菜單:subMenu

　　下拉菜單:dropMenu

　　工具條: toolbar

　　表單:form

　　欄目:column

　　箭頭:arrow

　　搜索:search

　　搜索按鈕:btn-search

　　滾動(dòng)條:scroll

　　內(nèi)容:content

　　標(biāo)簽頁(yè):tab

　　文章列表:list

　　提示信息:msg

　　小技巧:tips

　　欄目標(biāo)題:title

　　鏈接:links

　　頁(yè)腳:footer

　　服務(wù):service

　　熱點(diǎn):hot

　　新聞:news

　　下載:download

　　注冊(cè):regsiter

　　狀態(tài):status

　　按鈕:btn

　　投票:vote

　　合作伙伴:partner

　　版權(quán):copyright

　　網(wǎng)站地圖: sitemap

【網(wǎng)頁(yè)美工的知識(shí)：網(wǎng)頁(yè)設(shè)計(jì)命名規(guī)范】相關(guān)文章：

網(wǎng)頁(yè)美工設(shè)計(jì)簡(jiǎn)述07-16

網(wǎng)頁(yè)設(shè)計(jì)和美工的區(qū)別10-05

網(wǎng)頁(yè)美工設(shè)計(jì)配色特點(diǎn)05-27

如何學(xué)好網(wǎng)頁(yè)美工設(shè)計(jì)09-05

網(wǎng)頁(yè)美工切圖設(shè)計(jì)的要點(diǎn)08-27

網(wǎng)頁(yè)美工設(shè)計(jì)的三大細(xì)節(jié)07-30

怎么學(xué)好網(wǎng)頁(yè)美工設(shè)計(jì)課程07-26

如何學(xué)好網(wǎng)頁(yè)美工設(shè)計(jì)課程06-27

關(guān)于網(wǎng)頁(yè)美工設(shè)計(jì)的色彩搭配07-27

網(wǎng)頁(yè)美工學(xué)習(xí)設(shè)計(jì)經(jīng)驗(yàn)總結(jié)10-18