動易系統(tǒng)CSS風(fēng)格樣式3D模型盒和定義規(guī)范
[NextPage綜述]
對于剛開始接觸網(wǎng)頁設(shè)計(jì)的朋友來說，對模板設(shè)計(jì)中的版式模板和風(fēng)格模板這二個概念相對有些難以理解些。版式模板可以通過象DW這樣的軟件來可視化制作，風(fēng)格模板如何和版式模板相結(jié)合則需要從思維上重新審視與理解。
這篇文章的部分內(nèi)容已在“動易起航”教室進(jìn)行了講解，您可以在“動易起航”入門系列培訓(xùn)課程表中下載“動易系統(tǒng)CSS風(fēng)格樣式3D模型盒”一課的錄像（點(diǎn)擊下載上課錄像視頻）。本文會對制作動易模板的朋友以一些啟示，對網(wǎng)頁設(shè)計(jì)中CSS定義以3D模型盒的方式進(jìn)行示例，希望能對您理解動易系統(tǒng)的模板設(shè)計(jì)原理有些啟示。
為了敘述方便，文章分成以下幾個部分進(jìn)行講解，您點(diǎn)擊本頁面左上方的分頁標(biāo)題可快速查找您想查看的章節(jié)內(nèi)容：
·CSS定義的劃分及命名規(guī)范
·CSS定義的模型示例
·CSS定義的運(yùn)用示例
·CSS定義的分類與注釋
·組件中存在但風(fēng)格中未定義的CSS
動易系統(tǒng)自4.×版本開始，版式模板與風(fēng)格模板開始緊密結(jié)合，并考慮到對今后一些基本界面定義修改的方便，對默認(rèn)的風(fēng)格進(jìn)行了運(yùn)用定義的預(yù)設(shè)。
系統(tǒng)提供默認(rèn)的風(fēng)格模板定義，可查閱網(wǎng)站后臺默認(rèn)的風(fēng)格設(shè)置的“風(fēng)格配色設(shè)置”。系統(tǒng)默認(rèn)提供的CSS樣式風(fēng)格定義，里面有詳細(xì)的定義注釋，注釋標(biāo)記為：/* ...... */。
在系統(tǒng)中，CSS樣式風(fēng)格定義是可以自己自由定義的，也說是說您可以自由添加N多個自定義的風(fēng)格，然后在各頻道的版式模板中調(diào)用即可。修改風(fēng)格設(shè)置必須具備一定網(wǎng)頁css樣式設(shè)計(jì)知識，建議您找些這方面的書看一下。在定義中不能使用單引號或雙引號，否則會容易造成程序錯誤。
現(xiàn)對一些定義進(jìn)行說明：
[NextPageCSS定義的劃分及命名規(guī)范]
一、CSS定義的劃分及命名規(guī)范
1、按位置命名
網(wǎng)站風(fēng)格整體通用的命名規(guī)則以網(wǎng)頁頂部、中部、底部三個大區(qū)塊位置及其內(nèi)部位置進(jìn)行劃分與命名，如：
|
·網(wǎng)頁頂部定義的樣式命名為：top_***； 在網(wǎng)頁中部定義中，按其位置劃分為左、中、右三個區(qū)塊： |
2、按使用范圍命名
在各區(qū)塊內(nèi)，則按其使用范圍進(jìn)行命名，如：
| 三大區(qū)塊整體定義： .top_tdbgall .center_tdbgall .bottom_tdbgall 備注：本定義一般用于控制頂部、中部、底部表格的寬度、背景色、兩側(cè)連線的定義樣式 |
網(wǎng)頁頂部（top）中的CSS定義：
| 網(wǎng)頁頂部通用定義： .top_tdbgall /* 頂部表格總背景顏色定義 */ { width: 760;background:#ffffff; } |
| 網(wǎng)頁頂部中的CSS定義： .top_top /* 頂部間隔表格定義 */ .top_Channel /* 頻道表格背景、文字顏色定義 */ .top_Announce /* 公告表格背景、文字顏色定義 */ .top_nav_menu /* 導(dǎo)航欄表格背景、文字顏色定義 */ .top_Path /* 您現(xiàn)在的位置表格背景、文字顏色定義 */ .top_UserLogin /* 頂部用戶登錄文字鏈接的CSS定義 */ |
網(wǎng)頁中部（center）的CSS定義：
|
網(wǎng)頁中部通用定義： |
| 網(wǎng)頁中部左欄的CSS定義： .left_tdbgall /* 左欄表格總背景顏色定義 */ .left_title /* 左欄標(biāo)題表格背景、文字顏色定義 */ .left_tdbg1 /* 左欄內(nèi)容表格背景、文字顏色定義 */ .left_tdbg2 /* 左欄底部表格背景、文字顏色定義 */ |
| 網(wǎng)頁中部右欄的CSS定義： .right_title /* 左欄標(biāo)題表格背景、文字顏色定義 */ …… |
/* --網(wǎng)頁中部中欄的CSS定義開始-- */
|
網(wǎng)頁中部中欄的CSS定義： |
| 文章顯示頁的CSS定義： .main_ArticleTitle /* 主標(biāo)題文字顏色定義 */ .main_ArticleSubheading /* 副標(biāo)題文字顏色定義 */ .main_title_760 /* 標(biāo)題導(dǎo)航表格背景、文字顏色定義(760) */ .main_tdbg_760 /* 內(nèi)容表格背景、文字顏色定義(760) */ .Article_tdbgall /* 責(zé)編等表格背景、文字顏色定義(760) */ |
| 留言頻道CSS定義： a.Guest /* 留言欄目標(biāo)題文字鏈接的CSS定義－－調(diào)用代碼為*** */ .Guest_title_760 /* 標(biāo)題導(dǎo)航表格背景、文字顏色定義(760) */ .Guest_tdbg_760 /* 內(nèi)容表格背景、文字顏色定義(760) */ .Guest_border /* 藍(lán)色表格邊框背景顏色定義(760) */ .Guest_title /* 標(biāo)題背景顏色定義(760) */ .Guest_tdbg /* 表格背景顏色定義(760) */ .Guest_tdbg_1px /* 留言顯示1px表格背景顏色定義 */ .Guest_border2 /* 回復(fù)表格虛線邊框背景顏色定義(760) */ .Guest_ReplyAdmin /* 管理員回復(fù)文字背景顏色定義(760) */ .Guest_ReplyUser /* 用戶回復(fù)文字背景顏色定義(760) */ |
| 商城的CSS定義： .Shop_border /* 藍(lán)色表格邊框背景顏色定義(760) */ .Shop_border3 /* 灰色表格邊框背景顏色定義(760) */ .Shop_title /* 標(biāo)題背景顏色定義(760) */ .Shop_tdbg /* 表格背景顏色定義(760) */ .Shop_tdbg2 /* 表格背景顏色定義2 */ .Shop_tdbg3 /* 表格背景顏色定義3 */ .Shop_tdbg4 /* 表格背景顏色定義4 */ |
| 供求信息div按鈕定義： #supply .supplybut .supplybutover |
| 固定排課表格表格的css定義： .date_border .date_title .date_tdbg .style2 .style3 |
網(wǎng)頁底部（bottom）的CSS定義：
| 網(wǎng)頁底部通用定義： .Bottom_tdbgall /* 底部表格總背景顏色定義 */ { width: 760;background:#ffffff; } |
| 網(wǎng)頁底部中的CSS定義： .Bottom_Adminlogo /* 管理信息表格背景、文字顏色定義 */ .Bottom_Copyright /* 版權(quán)信息表格背景、文字顏色定義 */ |
網(wǎng)站整體及有鏈接文字“A”的CSS定義
| 網(wǎng)站整體定義： BODY /* Body的CSS定義:對應(yīng)CSS中“BODY”，可定義內(nèi)容為網(wǎng)頁字體顏色、背景、瀏覽器邊框等 */ TD /* 單元格的CSS定義:對應(yīng)CSS中的“TD”，這里為總的表格定義，為一般表格的的單元格風(fēng)格設(shè)置，可定義內(nèi)容為背景、字體顏色、樣式等 */ Input /* 文本框的CSS定義:對應(yīng)CSS中的“INPUT”，這里為文本框的風(fēng)格設(shè)置，可定義內(nèi)容為背景、字體、顏色、邊框等 */ Button /* 按鈕的CSS定義:對應(yīng)CSS中的“BUTTON”，這里為按鈕的風(fēng)格設(shè)置，可定義內(nèi)容為背景、字體、顏色、邊框等 */ Select /* 下拉列表框的CSS定義:對應(yīng)CSS中的“SELECT”，這里為下拉列表框的風(fēng)格設(shè)置，可定義內(nèi)容為背景、字體、顏色、邊框等 */ |
|
有鏈接文字“A”的CSS定義： a.Guest /* 留言欄目標(biāo)題文字鏈接的CSS定義－－調(diào)用代碼為*** */ a.Channel_KeyLink /* 站內(nèi)鏈接文字顏色定義 */ |
頻道通用表格CSS定義
| 頻道通用表格CSS定義： .Channel_border /* 灰色表格邊框背景顏色定義(760) */ .Channel_title /* 標(biāo)題背景顏色定義(760) */ .Channel_tdbg /* 表格背景顏色定義(760) */ .Channel_pager /* 分頁表格背景顏色定義(760) */ |
| 評論顯示頁的CSS定義： .Comment_border /* 藍(lán)色表格邊框背景顏色定義(760) */ .Comment_title /* 標(biāo)題背景顏色定義(760) */ .Comment_tdbg1 /* 表格背景顏色定義(760) */ .Comment_tdbg2 /* 留言顯示1px表格背景顏色定義 */ |
| 簡短標(biāo)題文字的CSS定義： .S_headline1 /* [圖文]簡短標(biāo)題文字的CSS定義 */ .S_headline2 /* [組圖]簡短標(biāo)題文字的CSS定義 */ .S_headline3 /* [推薦]簡短標(biāo)題文字的CSS定義 */ .S_headline4 /* [注意]簡短標(biāo)題文字的CSS定義 */ |
| 評論顯示頁的CSS定義： .Guest_font /* 隱藏、用戶等特殊文字顏色定義 */ |
| 站內(nèi)鏈接文字顏色定義： a.Channel_KeyLink{text-decoration: underline;} a.Channel_KeyLink:link {color: blue;} a.Channel_KeyLink:visited {color: blue;} a.Channel_KeyLink:hover{color: #ff0000;} a.Channel_KeyLink:active {color: blue;} |
|
用戶控制css定義： /*用戶控制面板右*/ |
| 用戶登錄框定義： #userlogined #userctrl #usermessage .havemessage .havemessaged .spaceList /* 聚合空間列表定義 */ .spaceList_image .spaceList_intro #showspacelist_more |
| RSS連接框定義： #popitmenu #popitmenu A #popitmenu A:hover |
小結(jié)：從以上相關(guān)定義與命名中可以看出，定義名的規(guī)律一般中是以“（網(wǎng)頁頂部、中部、底部三個大區(qū)塊位置）”+“_”+“使用范圍（表格內(nèi)使用范圍、模塊名、運(yùn)用范圍等）”進(jìn)行命名。如果有更多類似的，如“main_title_575”則再次加上“定義使用范圍”的后綴名。
3、綜合命名
為方便設(shè)計(jì)師及用戶理解與修改相應(yīng)樣式，需綜合位置命名規(guī)則及功能命名規(guī)規(guī)，如“位置名_功能名_其它定義名”樣式，例如：網(wǎng)站首頁中欄內(nèi)容表定義為Main_right_tdbg_760i。
對于整個網(wǎng)站通用的定義，則采用通用定義，如BODY、TD、Input、Button、Select等，以統(tǒng)一這些通用元素的風(fēng)格樣式。
[NextPageCSS定義的模型示例]
二、CSS定義的模型示例
在頁面設(shè)計(jì)中，CSS的定位與套用中的盒模型影響其定位與樣式，以下以CSS盒模型的3D示意圖，以方便清楚調(diào)用時的層次、關(guān)系和相互影響，便于理解和記憶。
動易網(wǎng)頁設(shè)計(jì)CSS盒模型3D示意圖
以網(wǎng)頁中部左欄為例：
| 以下是“用戶排行”html代碼： ……
其中，在中部表格開始商用了“table class=center_tdbgall”，則“.center_tdbgall”可控制中部表格的背景與寬度，這里加上了“cellSpacing=0 cellPadding=0 width=760 align=center border=0”等定義，是為了方便在DW這些可視化網(wǎng)頁編輯軟件中進(jìn)行編輯而加的定義。如果對CSS非常熟悉，且有一定的空間能力，則此處可只寫成：
| |||||||||||||
| left_tdbg1 vAlign=top height=126>{$ShowTopUser(5)} |
| 以“.left_tdbg1”預(yù)置能控制中部左側(cè)表格內(nèi)，顯示中無鏈接文字、背景、寬度等樣式。 |
left_tdbg2>
| 以“.left_tdbg2”預(yù)置能控制中部左側(cè)表格底部背景、寬度等樣式，同時也可以控制與下一個表格的間距、高度等定義。 |
……
因此，要使得所定義的表格與CSS風(fēng)格樣式能適用于不同的設(shè)計(jì)需求，一般區(qū)域中需要四個以上的定義，才有可能通過修改樣式定義來實(shí)現(xiàn)頁面風(fēng)格設(shè)計(jì)需要，如考慮到白底黑字、黑底白字等不同的網(wǎng)頁風(fēng)格設(shè)計(jì)。
| 至少四個的CSS定義： .***_tdbgall /* 表格總背景顏色定義 */ .***_title /* 標(biāo)題表格背景、文字顏色定義 */ .***_tdbg1 /* 內(nèi)容表格背景、文字顏色定義 */ .***_tdbg2 /* 底部表格背景、文字顏色定義 */ …… |
另外對于本區(qū)域中還有有鏈接的文字，則需要進(jìn)一步考慮“a.***”的定義，或是在其表格外加div層單獨(dú)控制本區(qū)域中的有鏈接文字的樣式，這里不再細(xì)述。
[NextPageCSS定義的運(yùn)用示例]
二、CSS定義的運(yùn)用示例
以網(wǎng)頁的設(shè)計(jì)運(yùn)用實(shí)例說明CSS定義的運(yùn)用：
以上面的網(wǎng)頁為例進(jìn)行說明：
定義網(wǎng)頁整體背景顏色：
| 只需定義網(wǎng)頁的背景色 body { margin:0px; font-size: 9pt;background: #B77D00; background-position:center; text-decoration: none; scrollbar-face-color: #f6f6f6; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #cccccc; scrollbar-3dlight-color: #cccccc; scrollbar-arrow-color: #330000; scrollbar-track-color: #f6f6f6; scrollbar-darkshadow-color: #ffffff; } |
定義三大區(qū)塊：
| 注意以下對圖片CSS的定義內(nèi)容 頂部表格定義：寬度為100%全面延伸；背景顏色為深棕色，強(qiáng)制居左對齊 .top_tdbgall /* 頂部表格總背景顏色定義 */ { width: 100%;background:#694300; float: left; } 中部表格定義：寬度為993像素的固定尺寸；背景顏色為白色，強(qiáng)制居左對 .center_tdbgall /* 中部表格總背景顏色定義 */ { float: left;width: 993px;background:#ffffff; } 底部表格定義：寬度為993像素的固定尺寸；背景顏色不定義，以顯示底色 .bottom_tdbgall /* 底部表格總背景顏色定義 */ { width: 993px;float: left; } |
定義左側(cè)表格的效果：
| 左側(cè)背景定義：固定寬度為250像素，定義背景色為淺棕色，強(qiáng)制居中 .left_tdbgall /* 左欄表格總背景顏色定義 */ { width: 250px;background:#B77D00; float: center; } 左側(cè)表格標(biāo)題定義：固定寬度為250像素，定義背景圖片，高為32像素，文字居中對齊，文字強(qiáng)制不加粗，顏色定義為淺棕色。 ??！背景圖片定義時注意圖片位置居中、不自動重復(fù)排列。 .left_title /* 左欄標(biāo)題表格背景、文字顏色定義 */ { font-weight:normal; color: #D7AC4C; height: 32px; text-align: center; background-image: url(Skin/Gov_C/l_0.gif); background-position: center; background-repeat: no-repeat; width: 250px; } 左側(cè)表格內(nèi)容定義：縮進(jìn)15像素，以使得內(nèi)容離開背景圖片一定的距離。 ??！背景圖片定義時注意圖片位置居中、自動豎向重復(fù)排列。 .left_tdbg1 /* 左欄內(nèi)容表格背景、文字顏色定義 */ { padding: 15px; background-image: url(Skin/Gov_C/l_0_1.gif); background-position: center; background-repeat: repeat-y; } 左側(cè)表格間距定義：定義29高度，以使得上下表格有一定的間距。 ！背景圖片定義時注意圖片位置居中、不自動重復(fù)排列。 .left_tdbg2 /* 左欄底部表格背景、文字顏色定義 */ { height: 29px; background-image: url(Skin/Gov_C/l_0_2.gif); background-position: center; background-repeat: no-repeat; } |
定義中間內(nèi)容表格的整體樣式：
| 定義中間表格背景寬度與底色，左縮進(jìn)以使得內(nèi)容與白背景色有一定的間距： .main_tdbgall /* 中欄表格總背景顏色定義 */ { width: 710px;background:#ffffff; float: center; padding-left:5px; } |
CSS盒模型3D示意圖：
注意.left_title、left_tdbg1、left_tdbg2 三張圖片其大小及GOF透明處理，圖片不一定要與其表格一樣大小，因?yàn)镃SS中可以通過“background-repeat”控制圖片的重復(fù)和“background-position”圖片默認(rèn)位置。
頂部表格效果代碼：
下框式的白色通過Dbaib_1這個CSS樣式定義進(jìn)行控制：
|
網(wǎng)頁左側(cè)表格中調(diào)用的CSS定義：
與標(biāo)準(zhǔn)模板中的CSS調(diào)用一樣，實(shí)現(xiàn)最大限度的兼容：
為了兼容以前的模板代碼，防止過大工作量的改動。整體網(wǎng)頁寬度為993時要計(jì)算與測試其他版區(qū)定義的寬度。
為了方便其他設(shè)計(jì)者或用戶理解定義的CSS的作用、用途與范圍，默認(rèn)的CSS提供了簡要的注釋。設(shè)計(jì)師在新定義了特殊用途的CSS樣式后，也應(yīng)及時添加相應(yīng)的注釋，以方便他人理解與再次運(yùn)用。 1、注釋的標(biāo)準(zhǔn) 2、注釋的位置
如：
良好的注釋習(xí)慣能讓更多人讀懂你寫的內(nèi)容，同時也容易查找一規(guī)范。 附：CSS學(xué)習(xí)資源
[NextPage組件中存在但風(fēng)格中未定義的CSS] 在設(shè)計(jì)深底色（如黑色風(fēng)格）網(wǎng)站的頁面模板樣式時，對一些位置需要改變顏色和式樣時，尤其是有鏈接的文字需要作單獨(dú)的定義。而系統(tǒng)提供的默認(rèn)風(fēng)格里沒有寫入這個風(fēng)格，動易系統(tǒng)的模板功能在開發(fā)中考慮到不同風(fēng)格的模板設(shè)計(jì)需求，已經(jīng)給需要個性的位置預(yù)留了css定義，尤其對一些有鏈接的文字提供了固定的定義。CSS可應(yīng)用Anchor(錨，即超級鏈接標(biāo)記)中最根本的功能“超鏈接”來實(shí)現(xiàn)此需要。跟其它的tag一樣，Anchor的定義方法是：A:{css標(biāo)記} 它特殊之處在于，它有各種相關(guān)的屬性，比如link（有鏈接），visited(瀏覽過)，hover(鼠標(biāo)在其上)，active(激活)?？梢愿鶕?jù)不同需要而做出專門的定義以根據(jù)用戶不同的動作做出反應(yīng)，從而形成比較好的效果。 您也可以通過依次點(diǎn)擊IE菜單中“查看”菜單－>“源文件”的方法，查看這些預(yù)留css的定義名。請注意，這些鏈接樣式定義名不能更改，其運(yùn)用方式為：
當(dāng)然，對于一些系統(tǒng)并示預(yù)留的且需要設(shè)置個性化定義的有鏈接的文字的css定義，即使系統(tǒng)未預(yù)先定義，您也可以通過div的方式單獨(dú)對這些有鏈接的文字進(jìn)行控制。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ /* LinkPath “您的位置”有鏈接文字的樣式定義 */ /* AnnounceBody2 “公告”有鏈接文字的樣式定義 */ /* channel_keylink “站內(nèi)鏈接”有鏈接文字的樣式定義，用于文章內(nèi)容中顯示的站內(nèi)鏈接文字 */ /* LinkTopUser “用戶排行”有鏈接文字的樣式定義 */ /* LinkspaceList “聚合空間”有鏈接文字的樣式定義 */ /* 分隔線的樣式定義 */ |
用戶登錄
還沒有賬號？
立即注冊