首頁 »
2012/09/07

網頁設計命名規則參考

現在的網站是越來越多,競爭性也是越來越大.那麼如何在眾多網站中脫穎而出,讓自己的網站有更多的遊覽者,排名更高一些呢?有時,不少朋友都會忽略一個很簡單的網頁優化方法,那就是網頁命名。因為,賦予網頁包括關鍵字的檔案名,也能幫助搜尋引擎判斷一個網頁的主題是什麼。


現在的網站是越來越多,競爭性也是越來越大.那麼如何在眾多網站中脫穎而出,讓自己的網站有更多的遊覽者,排名更高一些呢?有時,不少朋友都會忽略一個很簡單的網頁優化方法,那就是網頁命名。因為,賦予網頁包括關鍵字的檔案名,也能幫助搜尋引擎判斷一個網頁的主題是什麼。

我就給大家舉個例子吧,比如,對於做 網頁設計 空間的網站,可以將一些網頁適當命名為網頁設計空間.html,某某網頁設計空間.html,web.html等,而不是為了方便管理隨意命名為 10000.html,100001.html等。其中網頁設計空間,網頁設計這四個字很少有人進行優化吧,我們就用它作為網頁命名(當然,網頁命名最好 用英文或者拼音,千萬不能用中文字命名網頁檔案),當有人搜尋網頁設計空間時我們網站的排名一定不錯,用 SEO關鍵字 來命名一個網頁,就更清楚的把自己的網站網頁設計告訴搜尋引擎,這個一個關於什麼內容的網頁設計,再加上之前網站進行的優化,搜尋引擎就更加清楚了你網站 的內容,但前提是你的網站必須針對一個主題,切不能自己做的是關於網頁設計的站,為了提高瀏覽量,就用熱門關鍵字做網頁設計命名,這是行不通的,你有必要 知道。

據此同理,可以將網頁中的圖片命名的更有意義,比如將一個網頁設計空間圖片命名為,最好看的網頁設計空間.html,Web.html等。需要注意的是:如果SEO關鍵字命名的時候含有連接符的時候,它是用橫線而不是底線來連接關鍵字,例如news-cont。

網頁設計檔命名要以最簡短的名稱提現清晰地含義。

檔案名儘量以英文單詞為主。單個單詞檔案名稱全部小寫。

如檔案名為兩個或兩個以上單詞組成,檔案名稱第二個單詞起的第一個字母要大寫:

例如:友情鏈結(單個):link   公司簡介(兩個):aboutUs 

所有命名如果利用數字編號來區分檔,第一個檔命名中的1必須忽略。

例如:aboutUs  aboutUs2   aboutUs3

命名單詞組合順序為 劃分檔專案或類型單詞+功能性單詞+用途類單詞或編號:

例如:productAdd   product為產品這個專案的名詞後面加上Add為這個頁面的功能為添加(增加)。如有多個添加產品的頁面就可以理由編號區分:

例如:productAdd   productAdd2   productAdd3


網頁設計資料夾命名:

1.網頁設計檔按照板塊,專案來進行檔夾劃分

例如前臺產品類檔則歸納在product檔夾內。如果每個專案頁面不多可以同存放在一個目錄下但是要確保以後增加量小管理維護方便,否則一律按照檔 夾進行劃分。後臺舉例:如賣方後臺的產品添加頁面則為:buyerManage/productAdd

2.每個板塊或專案的圖像檔要跟在該目錄內命名為:images

3.swf檔建立在該目錄下的images檔夾內的swf檔夾

4.所有css檔要統一放在根目錄下的style檔內,命名規則詳見css命名

5.js檔放在該網頁設計目錄下的js檔夾內


網頁設計命名:

在html代碼中的語義性標籤我們可以直接借鑒使用,但不可以單獨使用。

例如:註冊表單頁面我們不可以定義:form  正確的是 regForm


圖像命名:

圖像命名與檔命名雷同,區別在於圖像檔命名必須指定它用應用的版塊名或功能名稱。

例如:頁首banner不能直接命名banner 正確的命名為:headerBanner 公司簡介的banner就是aboutUsBanner:


標誌要有區分如大標誌:logoBg 小標誌:logoSm。

註冊用小標誌例如小箭頭,對號之類的可以這樣命名:regIco   regIco2

引導背景圖片:navBg

複雜舉例:一個網頁中有三個導航那麼我們可以按照數字編號來命名或位置類命名。

數字編號舉例:nav   nav2   nav3   背景圖片命名navBg   nav2Bg   nav3Bg

位置命名:navTop   navCenter   NavBottom   背景圖片命名:navTop Bg   navCenter Bg   NavBottomBg

如該圖片應用到多個頁面或位置可用通用名稱例如網頁背景可命名為:bodyBg


Css命名規則

Css檔案名稱要圍繞所應用的範圍。例如買方管理中心頭部css文件為sellerManageHeader.css。

注意:如果該css樣式只針對一個頁面應用時不允許建立css檔,一律寫在該檔的head標籤內即可。

Css樣式定義時儘量應用class定義,定義全部標籤要謹慎要考慮後期的可延展性。不能影響後期升級開發。

 


轉貼來源:雲端設計

 http://www.piece2ec.com.tw/news.asp?ID=1120


參考文獻:

1.戴軒廷、馬恆、張紹勳 (2004), 衡量 網路廣告 態度之指標建構, 台灣管理學刊, 4(1), 59-84.

2.李青蓉等編著.(1998).人機介面設計,台北縣:空大。

3.邱柏清.(2004).網頁介面愉悅行之研究,國立台灣科技大學設計研究所碩士論文。







 網站代管


網頁設計CSS基本命名←上一篇 │首頁│ 下一篇→2013年網頁設計趨勢
本文引用網址: