網頁美工必備的知識：網頁設計命名規(guī)范

《網頁美工必備的知識：網頁設計命名規(guī)范》由會員分享，可在線閱讀，更多相關《網頁美工必備的知識：網頁設計命名規(guī)范（7頁珍藏版）》請在裝配圖網上搜索。

1、網頁美工必備的知識：網頁設計命名規(guī)范 網頁美工必備的知識：網頁設計命名規(guī)范 　　下面分析下下面的那張結構圖。 　　一.網站設計及基本框架結構: 　　1. Container(整體) 　　"container" 就是將頁面中的所有元素包在一起的部分，這部分還可以命名為: "wrapper", "wrap", "page". 　　2. Header(頭部) 　　"header"; 是網站頁面的頭部區(qū)域，一般來講，它包含網站的`logo和一些其他元素。這部分還可以命名為:"page-header"; (或 pageHeader).

2、 　　3. Navbar(導航) 　　"navbar"等同于橫向的導航欄，是最典型的網頁元素。這部分還可以命名為:"nav";, "navigation";, "nav-wrapper";. 　　4. Menu(菜單) 　　"Menu";區(qū)域包含一般的鏈接和菜單，這部分還可以命名為: "subNav ", "links"，"sidebar-main";. 　　5. Main(內容) 　　"Main";是網站的主要區(qū)域，如果是博客的話它將包含的日志。這部分還可以命名為: "content", "main-content"; (或"mai

3、nContent";)。 　　6. Sidebar(側邊鏈接) 　　"Sidebar"; 部分可以包含網站的次要內容，比如最近更新內容列表、關于網站的介紹或廣告元素等…這部分還可以命名為: "subNav ", "side-panel", "secondary-content". 　　7. Footer(頁腳) 　　"Footer";包含網站的一些附加信息，這部分還可以命名為: "copyright". 　　二.需要注意的幾點: 　　1.盡量用"有意義的命名"來給元素命名達到語義化。不要使用表面形式的命名. 　

4、　如:red/left/big等。 　　2.組合命名規(guī)則: 　　[元素類型]-[元素作用/內容] 　　如:搜索按鈕: btn-search 　　登錄表單:form-login 　　新聞列表:list-news 　　3.涉及到交互行為的元素命名: 　　凡涉及交互行為的元素通常會有正常(link)、懸停(hover)、點擊(click)和已瀏覽(visited)等不同樣式，命名可參考以下規(guī)則: 　　鼠標懸停:：hover 點擊：click 已瀏覽：visited 　　如:搜索按鈕: btn-search、bt

5、n-search-hover、btn-search-visited 　　三.Photoshop圖層結構規(guī)范: 　　Photoshop圖層命名遵循樹形結構，凡某元素組成的圖層大于3層，即可形成組，所有圖層盡量避免使用默認命名(圖層+編號)。 　　第一級圖層結構如下圖: 　　第二級結構圖例(醫(yī)院網站): 　　第三級結構圖例及效果圖對比(醫(yī)院新聞欄目)： 　　效果圖 　　圖層命名結構 　　四.常用命名匯總: 　　頁頭:header 　　登錄條:loginbar

6、 　　標志:logo 　　側欄:sidebar 　　廣告條:banner 　　導航:nav 　　子導航:subNav 　　菜單:menu 　　子菜單:subMenu 　　下拉菜單:dropMenu 　　工具條: toolbar 　　表單:form 　　欄目:column 　　箭頭:arrow 　　搜索:search 　　搜索按鈕:btn-search 　　滾動條:scroll 　　內容:content 　　標簽頁:tab 　　文章列表:list 　　提示信息:msg 　　小技巧:tips 　　欄目標題:title 　　鏈接:links 　　頁腳:footer 　　服務:service 　　熱點:hot 　　新聞:news 　　下載:download 　　注冊:regsiter 　　狀態(tài):status 　　按鈕:btn 　　投票:vote 　　合作伙伴:partner 　　版權:copyright 　　網站地圖: sitemap