網頁美工必備的知識:網頁設計命名規範
下面分析下下面的那張結構圖。
一.網站設計及基本框架結構:
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.涉及到互動行為的元素命名:
凡涉及互動行為的元素通常會有正常(link)、懸停(hover)、點選(click)和已瀏覽(visited)等不同樣式,命名可參考以下規則:
滑鼠懸停::hover 點選:click 已瀏覽:visited
如:搜尋按鈕: btn-search、btn-search-hover、btn-search-visited
三oshop圖層結構規範:
Photoshop圖層命名遵循樹形結構,凡某元素組成的圖層大於3層,即可形成組,所有圖層儘量避免使用預設命名(圖層+編號)。
第一級圖層結構如下圖:
第二級結構圖例(醫院網站):
第三級結構圖例及效果圖對比(醫院新聞欄目):
效果圖
圖層命名結構
四.常用命名彙總:
頁頭:header
登入條:loginbar
標誌: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
狀態:status
按鈕:btn
投票:vote
合作伙伴:partner
版權:copyright
網站地圖: sitemap
-
網頁美工設計要注意的細節
細節決定成敗,可用於每一件事,每一個工作,對於細緻的網頁美工來說更是需要注意了,下面是小編為大家美工新手們介紹幾種需要注意的細節。1、網頁美工設計精確到1個畫素如果你是一個成功的頁面設計者,你至少會在做出頁面前已經把整個頁面構思好了;如果你很寬容地對待...
-
網頁美工設計的注意事項
網頁美工是精通美學,photoshop(PS),FLASH,dreamwaver(DW)等一網站製作軟體的網路人員,且必須具有良好的創意和一定程度的審美觀。下面給大家介紹下網頁美工設計的注意事項有哪些,希望可以幫到您哦!1、精確到1個畫素如果你是一個成功的頁面設計者,你至少會在做出頁面前已...
-
如何讓網頁美工設計更具有與視覺效果
網頁設計也是一樣,一個網站就像和其他傳統的藝術創作一樣遵循同樣的規律,最終達到視覺的藝術效果。那麼如何讓網頁美工設計更具有與視覺效果呢,下面我們一起來看看吧。如何讓網頁美工設計更具有與視覺效果一、引導使用者網站對使用者的引導,就像暗中一隻無形的手,會指引...
-
網頁美工切圖設計要點盤點
圖是指將設計稿切成便於製作成頁面的圖片,並完成html+css佈局的靜態頁面。以下是小編整理的網頁美工切圖設計要點盤點,歡迎參考閱讀!在網頁美工切圖設計之前,我們先基於ps進行新建檔案設定,在設定的時候需要注意以下幾點:1.一定要做好網頁寬度的設定設計,一般網頁寬...