文件夾主要建立以下文件夾：
1、Images 存放一些網(wǎng)站常用的圖片；
2、Css 存放一些CSS文件；
3、Flash 存放一些Flash文件；
4、PSD 存放一些PSD源文件；
5、Temp 存放所有臨時(shí)圖片和其它文件；
6、copyright 版權(quán)信息（可選）
8、readme 說明文件
css統(tǒng)一命名
注：本CSS命名規(guī)則只適合物table制作模式下
1、 css文件統(tǒng)一放在css文件夾下；命名css.css
2、 主樣式定義：body、table、td、tr、a
3、 鏈接樣式定義：link_white（白色）；link_black （黑色）；link_blue （藍(lán)色） 等等；
說明：如有重復(fù)的后面加阿拉伯?dāng)?shù)字；如 link_red01 有下劃線的如：linkred
4、 文字樣式定義：font_red （紅色）；font_red_14 （紅色14號(hào)字）；font_red_14b （紅色14號(hào)加粗）
5、 邊框樣式定義：border_red_tblr （紅色四個(gè)邊）；border_red_blr（紅色底左右三邊）；border_red_lr（紅色左右兩個(gè)邊）；border_red_b （紅色底一個(gè)邊）等等；
6、 表單樣式定義：text_100 （文本字段寬為100）； textarea_200_red （文本區(qū)域?qū)挒?00有紅色邊框）；select_100 （列表寬為100）；button_150 （按鈕寬150）；
說明：表單用寬度定義，在命名中最長寫到：“text_100_red”
7、 線的樣式定義：line_X （橫線）；line_Y （豎線）；line_X_red （紅色橫線）；line_X_red2 （兩個(gè)像素的紅色橫線）；說明：在line中只定義虛線，實(shí)線在border中定義
8、 其它樣式定義：在這里主要定義一些個(gè)性化的樣式；
文件命名
head.asp 頭文件
foot.asp 底文件
index.asp 首頁文件
sort.html 分類嵌套文件
article_channel.asp 文章_頻道頁
article_list.asp 文章_列表頁
article_detail.asp 文章_顯示頁
注明：如果有多個(gè)文章頻道，則用article01， article02，article03等等
exhibit_channel.asp 展會(huì)信息_頻道頁
exhibit_list.asp 展會(huì)信息_列表頁
exhibit_detail.asp 展會(huì)信息_顯示頁
product_channel.asp 產(chǎn)品中心_頻道頁
product_list.asp 產(chǎn)品中心_列表頁
prodect_detail.asp 產(chǎn)品中心_顯示頁
corporation_channel.asp 會(huì)員_頻道頁
corporation_list.asp 會(huì)員_列表頁
corporation_detail.asp 會(huì)員_顯示頁
information_channel.asp 商機(jī)信息_頻道頁
information_list.asp 商機(jī)信息_列表頁
information_detail.asp 商機(jī)信息_顯示頁
job_channel.asp 招聘_頻道頁
job_list.asp 招聘_列表頁
job_detail.asp 招聘_顯示頁
hr_channel.asp 求職_頻道頁
hr_list.asp 求職_列表頁
hr_detail.asp 求職_顯示頁
job_hr_channel.asp 人才中心_頻道頁
job_hr_lisr.asp 人才中心_列表頁
job_hr_detail.asp 人才中心顯示頁
copyright.asp 版權(quán)頁
圖片命名
1、導(dǎo)航命名：menu
.gif 如：menubg .gif（導(dǎo)航的背景圖）
2、會(huì)員登錄：login
.gif 如：loginbg.gif （會(huì)員登陸的背景圖）
3、搜索命名：search
.gif 如：search_bg.gif （搜索的背景圖）
4、小 圖 標(biāo)：ico_數(shù)字.gif 如：ico_001.gif
5、線的命名：line_X_顏色.gif 如：line_X_red.gif（紅色橫向虛線）說明：line只命名虛線
line_Y_red.gif（紅色縱向虛線）
6、廣告命名：ad_數(shù)字.gif 如：ad001.gif
7、其它欄目的圖片：以欄目名的第一個(gè)字母
.gif
如：xwzx_bg.gif （新聞中心背景） cpzx_l.gif （產(chǎn)品中心的左邊圖）
8、產(chǎn)品與欄目熱點(diǎn)圖片： pic_數(shù)字.gif 如：pic_001.gif
說明：上、下、左、右 可以縮寫為T、B、L、R
CSS標(biāo)準(zhǔn)化設(shè)計(jì)命名
1、類class的命名規(guī)范示例
頭：header
內(nèi)容：content/container
尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
登錄條：loginbar
標(biāo)志：logo
廣告：banner
頁面主體：main
熱點(diǎn)：hot
新聞：news
下載：download
子導(dǎo)航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權(quán)：copyright
滾動(dòng)：scroll
內(nèi)容：content
標(biāo)簽頁：tab
文章列表：list
提示信息：msg
小技巧：tips
欄目標(biāo)題：title
加入：joinus
指南：guild
服務(wù)：service
注冊：regsiter
狀態(tài)：status
投票：vote
合作伙伴：partner
2、注釋的寫法
/?Footer?/
內(nèi)容區(qū)
/?End Footer?/
3、id的命名規(guī)范示例
?。?）頁面結(jié)構(gòu)
容器： container
頁頭：header
內(nèi)容：content/container
頁面主體：main
頁尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
（2）導(dǎo)航
導(dǎo)航：nav
主導(dǎo)航：mainbav
子導(dǎo)航：subnav
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar
右導(dǎo)航：rightsidebar
菜單：menu
子菜單：submenu
標(biāo)題： title
摘要： summary
?。?）功能
標(biāo)志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：regsiter
搜索：search
功能區(qū)：shop
標(biāo)題：title
加入：joinus
狀態(tài)：status
按鈕：btn
滾動(dòng)：scroll
標(biāo)簽頁：tab
文章列表：list
提示信息：msg
當(dāng)前的： current
小技巧：tips
圖標(biāo)： icon
注釋：note
指南：guild
服務(wù)：service
熱點(diǎn)：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權(quán)：copyright
4、類class的書寫規(guī)范示例
?。?）顏色：使用顏色的名稱或者16進(jìn)制代碼，如
.red { color： red； }
.f60 { color： #f60； }
.ff8600 { color： #ff8600； }
?。?）字體大小，直接使用"font+字體大小"作為名稱，如
.font12px { font-size： 12px； }
.font9pt {font-size： 9pt； }
?。?）對齊樣式，使用對齊目標(biāo)的英文名稱，如
.left { float：left； }
.bottom { float：bottom； }
?。?）標(biāo)題欄樣式，使用"類別+功能"的方式命名，如
.barnews { }
.barproduct { }
5、CSS文件命名示例
主要的 master.css
模塊 module.css
基本共用 base.css
布局，版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補(bǔ)丁 mend.css
打印 print.css
6、注意事項(xiàng)
（1）一律小寫；
（2）盡量用英文；
?。?）不加中杠和下劃線；
（4）盡量不縮寫，除非一看就明白的單詞
作者： 旋上的舞?
鏈接：https://www.imooc.com/article/5219
來源：慕課網(wǎng)
