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