網頁設計命名規範

2022-09-17 12:18:11 字數 2196 閱讀 4040

網頁設計命名規範

一.**設計及基本框架結構:

網頁設計命名規範二.需要注意的幾點:

1.盡量考慮為元素命名其本身的作用或」用意」,達到語義化。不要使用表面形式的命名.

如:red/left/big等。

2.組合命名規則:

[元素型別]-[元素作用/內容]

如:搜尋按鈕: btn-search

登入表單:form-login

新聞列表:list-news

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

凡涉及互動行為的元素通常會有正常、懸停、點選和已瀏覽等不同樣式,命名可參考以下規則:

滑鼠懸停::hover   點選:click   已瀏覽:visited

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

三.photoshop圖層結構規範:

photoshop圖層命名遵循樹形結構,凡某元素組成的圖層大於3層,即可形成組,所有圖層盡量避免使用預設命名(圖層+編號)。

圖層命名結構

四.常用命名彙總:

(1)顏色:使用顏色的名稱或者16進製制**,如

.red

.f60

.ff8600

(2)字型大小,直接使用』font+字型大小』作為名稱,如

.font12px

.font9pt

(3)對齊樣式,使用對齊目標的英文名稱,如

.left

.bottom

(4)標題欄樣式,使用』類別+功能』的方式命名,如

.barnews

.barproduct

注意事項:

1.一律小寫;

2.盡量用英文;

3.不加中槓和下劃線;

4.盡量不縮寫,除非一看就明白的單詞.

主要的 master.css  模組 module.css  基本共用 base.css

布局,版面 layout.css  主題 themes.css  專欄 columns.css

文字 font.css  表單 forms.css  補丁 mend.css  列印 print.css

統計:count

以上結構就可以組合使用,例如:左列標題lefttitle;底部導航footern**   規範不是說要所有人照乙個樣子來命名css,我們可以根據自己的需要定製命名規則,只要記住命名的規則,就可以根據**本身的特點來創造具有自己風格的命名方式。

一、目前網頁設計者用得較多的是基於軟體開中變數的命名方式的命名方法。如對於一組用於定義字型樣式的class,我們可以使用f即foot的頭字母為字首進行命名,如:

f-blue:表示藍色字型樣式

f-blod:表示粗體字型樣式

對於網頁中如新聞頻道的一些新聞的現實樣式,可以用n作為字首進行樣式設計,如:

n-title:新聞標題

n-list:新聞列表

五、css檔案及樣式命名

1、css檔案命名規範

全域性樣式:global.css;

框架布局:layout.css;

字型樣式:font.css;

鏈結樣式:link.css;

列印樣式:print.css;

2、css樣式命名規範

本人建議:用字母、_號工、-號、數字組成,必須以字母開頭,不能為純數字。為了開發後樣式名管理方便,大家請用有意義的單詞或縮寫組合來命名,讓同事一看就明白這樣式大概是哪一塊的,這樣就節省了查詢樣式的時間,例如:

頭部樣式用header,頭部左邊,可以用header_left或header_l,還有如果是列結構的可以這樣——box _1of3 (三列中的第一列),box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列),其它的我就不一一舉例了,大家按以上規律去命名就好。

下面列出一些常用的命名單詞方便大家使用:(以後大家工作過程中慢慢把自己積累的單詞都共享出來,那大家的命就會更加統一了,就不會有一義多詞的情況了。)

網頁命名規範

命名規範 檔案命名的原則 以最少的字母達到最容易理解的意義。一般檔案及目錄命名規範 每乙個目錄中應該包含乙個預設的html 檔案,檔名統一用index.htm 檔名稱統一用小寫的英文本母 數字和下劃線的組合 多個同型別檔案使用英文本母加數字命名,字母和數字之間用 分隔。例如 news 01.htm。...

網頁檔案命名規範

資訊反饋 feedback 產品 product 所有單英文單詞檔名都必須為小寫,如檔名為兩個或兩個以上單詞組成,檔名稱第二個單詞起的第乙個字母要大寫 滑鼠感應效果命名規範為 名 on off 所有檔名字母間連線都為下劃線 例如 menu1 on.gifmenu1 off.gif 1.js的命名原則...

設計模式命名規範

工廠模式 designfactory 單例模式 designsingleton 建造者模式 designbuilder 原型模式 designprototype 介面卡模式 designadapter 裝飾模式 designdecorator 模式 designproxy 外觀模式 designfa...