電子商務(wù)網(wǎng)站建設(shè)-的課件

第4章CSS樣式本課要點具體要求本課導(dǎo)讀上機練習(xí)本課要點創(chuàng)建CSS樣式應(yīng)用外部樣式表文件使用DIV+CSS布局頁面

具體要求掌握CSS樣式的創(chuàng)建與應(yīng)用熟悉CSS規(guī)則定義中各分類的作用掌握外部樣式表文件的創(chuàng)建掌握附加并應(yīng)用外部樣式表文件的方法了解WEB標準的本質(zhì)，掌握頁面中的內(nèi)容、結(jié)構(gòu)和表現(xiàn)的概念掌握DIV+CSS頁面布局的基本方法本課導(dǎo)讀在網(wǎng)頁設(shè)計中為了操作簡便，常用CSS樣式來控制文本、邊框、背景和列表等對象的樣式，創(chuàng)建的樣式可以反復(fù)調(diào)用。應(yīng)用的CSS樣式可以嵌入在當前文檔的頭部標簽中，也可導(dǎo)出為外部樣式表文件以應(yīng)用到其他文檔中。本課導(dǎo)讀在DIV+CSS布局中，div承載的是內(nèi)容，而css承載的是樣式。內(nèi)容和樣式的分離對于所見即所得的傳統(tǒng)TABLE編輯方式確實是一個很大的沖擊，尤其是設(shè)計人員很難接受設(shè)計一個他們不能立即看到的樣式。不過隨著學(xué)習(xí)，會發(fā)現(xiàn)div+css的好處實在是太明顯了。4.1創(chuàng)建CSS樣式

CSS指層疊樣式表，它是CascadingStyleSheets的縮寫。在制作網(wǎng)頁時，需要讓整個網(wǎng)站的風(fēng)格統(tǒng)一，如果手動設(shè)置每個元素將會非常麻煩，用CSS樣式就能快速完成網(wǎng)頁元素格式的統(tǒng)一，有利于提高工作效率。4.1創(chuàng)建CSS樣式4.1.1知識講解4.1.2典型案例——在簡介頁中應(yīng)用CSS樣式4.1.1知識講解

本節(jié)將介紹【CSS樣式】面板、CSS樣式的創(chuàng)建及應(yīng)用方法。4.1.1知識講解1.認識【CSS樣式】面板2.創(chuàng)建CSS樣式3.應(yīng)用CSS樣式1.認識【CSS樣式】面板選擇【窗口】→【CSS樣式】命令或按【Shift+F11】組合鍵），打開【CSS樣式】面板，如右圖所示。2.創(chuàng)建CSS樣式創(chuàng)建CSS樣式的具體操作如下：（1）在【CSS樣式】面板中單擊按鈕，在打開的【新建CSS規(guī)則】對話框中進行相應(yīng)的設(shè)置，如下圖所示。2.創(chuàng)建CSS樣式2.創(chuàng)建CSS樣式類（可用于任何標簽）自定義樣式，注意類名稱必須以句點開頭，可以包含任何字母和數(shù)字組合。如果沒有輸入開頭的句點，Dreamweaver

將自動輸入句點。標簽（重新定義特定標簽的外觀）重定義HTML標記的功能是改變HTML的原有功能。2.創(chuàng)建CSS樣式高級（ID、偽類選擇器等）為具體某個標簽組合或所有包含特定Id屬性的標簽定義格式設(shè)置。提供的選擇器包括a:active、a:hover、a:link

和a:visited四種。2.創(chuàng)建CSS樣式（2）在【新建CSS規(guī)則】對話框中設(shè)置完成后，單擊【確定】按鈕，打開CSS規(guī)則定義對話框?；蛘哌x中【新建樣式表文件】單選按鈕，保存樣式表文件，打開CSS規(guī)則定義對話框，如下圖所示。2.創(chuàng)建CSS樣式2.創(chuàng)建CSS樣式（3）在CSS規(guī)則定義對話框的【分類】列表框中選擇要定義的分類，右側(cè)將顯示對應(yīng)的參數(shù)項，進行設(shè)置。（4）設(shè)置完成后，單擊【確定】按鈕，定義的樣式顯示在【CSS樣式】面板中。如果要修改樣式，可以單擊【CSS樣式】面板底部的按鈕，打開CSS規(guī)則定義對話框，也可單擊或按鈕，在【屬性】列表框中添加或修改樣式的屬性。3.應(yīng)用CSS樣式CSS樣式的應(yīng)用比較簡單，在窗口中選中要應(yīng)用CSS樣式的對象，在對應(yīng)的【屬性】面板的【樣式】或【類】下拉列表中選擇需要的樣式名稱即可。4.1.2

典型案例——在簡介頁中應(yīng)用CSS樣式案例目標本案例將為“fa.html”頁面中的文本和鏈接創(chuàng)建并應(yīng)用CSS樣式，主要練習(xí)自定義CSS樣式和樣式的使用，完成的效果如右圖所示。4.1.2

典型案例——在簡介頁中應(yīng)用CSS樣式操作思路：（1）打開“素材\fa.html”。（2）分別新建“.tt1”、“.tt2”、“.dot”、“a:link”、“a:hover”和“a:visited”樣式。（3）應(yīng)用“.tt1”“.tt2”和“.dot”樣式。4.1.2

典型案例——在簡介頁中應(yīng)用CSS樣式案例小結(jié)本案例介紹了如何在“jie.html”文檔中應(yīng)用CSS樣式，主要介紹了自定義CSS樣式的方法和鏈接狀態(tài)樣式的設(shè)置等。從本例可以看出，定義樣式時，用戶必須明確對象所需定義的參數(shù)項，才能準確地對其進行設(shè)置。

4.2使用外部樣式表文件外部樣式表文件是將文檔中將要用到的CSS樣式定義在一個單獨的文件中，并存儲在站點中，以便該站點中各頁面的調(diào)用。4.2使用外部樣式表文件4.2.1知識講解4.2.2典型案例——為產(chǎn)品頁應(yīng)用外部樣式4.2.1知識講解

本節(jié)主要介紹外部樣式表文件的創(chuàng)建及應(yīng)用外部樣式表文件中樣式的方法。4.2.1知識講解1.創(chuàng)建外部樣式表文件2.附加并應(yīng)用外部樣式表文件1.創(chuàng)建外部樣式表文件

外部樣式表文件有兩種創(chuàng)建方法：一是直接新建外部樣式表文件，另一種是將當前文件中的樣式導(dǎo)出為外部樣式表文件。新建外部樣式表文件的具體操作如下：（1）在【CSS樣式】面板中單擊按鈕，在打開的【新建CSS規(guī)則】對話框中選中【定義在】欄的【新建樣式表文件】單選按鈕。1.創(chuàng)建外部樣式表文件（2）單擊【確定】按鈕，打開【保存樣式表文件為】對話框，在【文件名】文本框中輸入新建的樣式表文件名稱。（3）單擊【保存】按鈕，在打開的【.tt的CSS規(guī)則定義】對話框中按上一節(jié)介紹的樣式定義方法進行定義，單擊【確定】按鈕，保存于“mycss.css”樣式表文件中的“.tt”樣式就顯示在【CSS樣式】面板中了。

1.創(chuàng)建外部樣式表文件（4）要在樣式表文件中增加樣式，在【新建CSS規(guī)則】對話框中，在【定義在】欄的下拉列表中選擇【mycss】選項，并按新建樣式的方法，建立其他樣式。1.創(chuàng)建外部樣式表文件

如果要將嵌套在其他文件中的CSS樣式，創(chuàng)建為外部樣式表文件，可以通過移動CSS規(guī)則的方法創(chuàng)建，具體操作如下：（1）在【CSS樣式】面板中右鍵單擊要導(dǎo)出的樣式的名稱，選擇【移動CSS規(guī)則】命令。（2）打開【移至外部樣式表】對話框，選中【新樣式表】單選按鈕，單擊【確定】按鈕完成樣式的移動。2.附加并應(yīng)用外部樣式表文件可將外部樣式表文件附加到當前網(wǎng)頁中，具體操作如下：（1）打開要附加外部樣式表文件的網(wǎng)頁文檔。（2）選擇【文本】→【CSS樣式】→【附加樣式表】命令，打開【鏈接外部樣式表】對話框。2.附加并應(yīng)用外部樣式表文件（3）設(shè)置完成后，單擊【確定】按鈕，完成外部樣式表文件的附加操作。4.2.2

典型案例——為產(chǎn)品頁應(yīng)用外部樣式案例目標本案例將對網(wǎng)頁中的元素應(yīng)用外部樣式，主要介紹將當前文件中的樣式導(dǎo)出為外部樣式和附加并應(yīng)用外部樣式的方法，完成后的效果如右圖所示。4.2.2

典型案例——為產(chǎn)品頁應(yīng)用外部樣式操作思路：（1）導(dǎo)出“fa.html”文件中的CSS樣式，并保存為“fa.css”。（2）在“cp.html”文件中導(dǎo)入“fa.css”。（3）分別在“cp.html”文件的各元素中應(yīng)用“fa.css”中的對應(yīng)樣式。

4.2.2

典型案例——為產(chǎn)品頁應(yīng)用外部樣式案例小結(jié)

本案例介紹了如何將文檔中的樣式導(dǎo)出為外部樣式，如何附加外部樣式表文件到當前文檔及如何應(yīng)用外部樣式等知識。鏈接樣式會在頭部標簽中生成<linkhref="fa.css"rel="stylesheet"type="text/css"/>語句，如果采用導(dǎo)入外部樣式的方式，則會生成@importurl("fa.css");及對應(yīng)的樣式設(shè)置。4.3DIV+CSS標準化網(wǎng)頁布局4.3.1知識講解4.3.2典型案例4.3.1知識講解Web標準DIV+CSS網(wǎng)頁布局常見的布局類型1.Web標準Web標準可以分為３個方面：結(jié)構(gòu)標準語言（主要包括XHTML和XML）、表現(xiàn)標準語言（主要包括CSS）和行為標準（主要包括對象模型、ECMAScript）等。Web標準最核心的概念就是結(jié)構(gòu)、表現(xiàn)和行為相分離。1.Web標準內(nèi)容內(nèi)容就是頁面實際要傳達的真正信息，包含數(shù)據(jù)、文檔或圖片等。不包含任何輔助信息，如導(dǎo)航菜單或裝飾性圖片等。下面一段文本是頁面要表現(xiàn)的信息。1.Web標準1.Web標準結(jié)構(gòu)雖然在上圖中已經(jīng)完全包括了頁面所有要傳達的信息，但是這些信息簡單地羅列在一起，難于閱讀，內(nèi)容的信息也不能很清晰地傳達給閱讀者。將上圖所示的頁面內(nèi)容進行整理，分成文章標題、作者、文章內(nèi)容、段落、段落標題、段落內(nèi)容、列表等各個部分。1.Web標準1.Web標準表現(xiàn)以上雖然從結(jié)構(gòu)上對頁面內(nèi)容進行了分區(qū)，但是頁面內(nèi)容的外觀并沒有改變。例如標題字體沒有變大，正文的顏色也沒有變化，沒有背景，沒有修飾等。要讓閱讀者能更好地閱讀頁面內(nèi)容，就需要設(shè)置內(nèi)容部分的字體樣式、對齊方式、背景修飾等，所有這些外觀的效果就成之為表現(xiàn)。1.Web標準1.Web標準2.DIV+CSS網(wǎng)頁布局什么是DIVDIV全稱division意為“區(qū)分”，使用方法跟使用其他tag的方法一樣。如果單獨使用DIV而不加任何CSS，那么它在網(wǎng)頁中的效果和使用<P></P>是一樣的。DIV本身就是容器性質(zhì)的，不但可以內(nèi)嵌table還可以內(nèi)嵌文本和其它的HTML代碼。2.DIV+CSS網(wǎng)頁布局DIV+CSS標準的優(yōu)點結(jié)構(gòu)化HTML，提高易用性結(jié)構(gòu)清晰，表現(xiàn)和內(nèi)容相分離。更好的控制頁面布局。結(jié)構(gòu)的重構(gòu)性強，縮短改版時間。大大縮減頁面代碼，提高頁面瀏覽速度，縮減帶寬成本結(jié)構(gòu)清晰，容易被搜索引擎搜索到2.DIV+CSS網(wǎng)頁布局DIV+CSS應(yīng)用這個應(yīng)用最經(jīng)典的例子就是各大blog程序了。都是采用div+css構(gòu)架。內(nèi)容和樣式的分離導(dǎo)致我們在重構(gòu)頁面布局或者更換皮膚的時候，只用針對每一個div元素重新定義其具體位置、樣式就行了。而在原來的table基礎(chǔ)上進行改版，幾乎必須改變所有的內(nèi)容注入渠道，實在是太過于麻煩。2.DIV+CSS網(wǎng)頁布局盒子模型每個HTML元素都可以看作一個裝了東西的盒子，盒子具有寬度（width）和高度（height），盒子里面的內(nèi)容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）。2.DIV+CSS網(wǎng)頁布局盒子模型2.DIV+CSS網(wǎng)頁布局盒子模型2.DIV+CSS網(wǎng)頁布局div的CSS樣式定義float:left;clear:left;width:600px;height:400px;padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;margin:5px;2.DIV+CSS網(wǎng)頁布局div的CSS樣式定義position:absolute;visibility:visible;z-index:5;overflow:scroll;clip:rect(1px2px3px4px);height:400px;width:600px;3.常見的布局類型單列結(jié)構(gòu)<body>#wrap單列結(jié)構(gòu)div定義

<divid="wrap"></div>單列結(jié)構(gòu)CSS定義#wrap{ height:600px; width:776px; padding:0px; margin-right:auto; margin-left:auto; border:1pxsolid#000000; background-color:#CCCCCC;}

3.常見的布局類型3.常見的布局類型左右結(jié)構(gòu)

<body>#wrap#left#right左右結(jié)構(gòu)div定義

<divid="wrap">

<divid="left"></div>

<divid="right"></div>

</div>左右結(jié)構(gòu)CSS定義#wrap{ width:776px; padding:0px; margin-right:auto; margin-left:auto; border:1pxsolid#000000; background-color:#CCCCCC; height:600px;}3.常見的布局類型左右結(jié)構(gòu)CSS定義#left{ float:left; width:200px; height:600px; background-color:#0066FF;}#right{ float:right; width:550px; height:600px; background-color:#FFFFFF;}3.常見的布局類型3.常見的布局類型左中右結(jié)構(gòu)

<body>#wrap#left#right左中右結(jié)構(gòu)div定義<divid="wrap">

<divid="left"></div>

<divid="right"></div>

<divid="center"></div></div>#center左中右結(jié)構(gòu)CSS定義#left{ float:left; width:150px; height:600px; background-color:#0066FF; margin:0px; padding:0px;}#right{ float:right; width:150px; height:600px; background-color:#99CC00; margin:0px; padding:0px;}3.常見的布局類型#center{ width:auto; background-color:#FFFFFF; height:600px; padding:0px; margin-right:1px; margin-left:1px;}3.常見的布局類型3.常見的布局類型上下結(jié)構(gòu)

<body>#wrap#top#bottom上下結(jié)構(gòu)div定義<divid="wrap"><divid="top"></div>

<divid="bottom"></div></div>上下結(jié)構(gòu)CSS定義#top{ width:100%; height:200px; background-color:#99CC00; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:#000000;}#bottom{ width:100%; height:400px;

}3.常見的布局類型上中下結(jié)構(gòu)

<body>#wrap#top#center上中下結(jié)構(gòu)div定義<divid="wrap"><divid="top"></div>

<divid="center"></div

<divid="bottom"></div></div>#bottom3.常見的布局類型上中下結(jié)構(gòu)CSS定義#top{ width:100%; height:100px; background-color:#99CC00; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:#000000;}3.常見的布局類型#bottom{ width:100%; height:100px;}#center{ width:100%; background-color:#FFFFFF;}3.常見的布局類型3.常見的布局類型兩行兩列結(jié)構(gòu)

<body>#wrap#left#right#top#bottom3.常見的布局類型兩行三列結(jié)構(gòu)

<body>#wrap#left#center#top#bottom#right3.常見的布局類型混合結(jié)構(gòu)

<body>#wrap#left#top#bottom#right#center

#main1

#main#child1#child23.常見的布局類型4.3.2

典型案例——DIV+CSS布局實例案例目標

利用DIV+CSS進行網(wǎng)頁布局是目前較為流行頁面排版方式，完成后的效果如右圖所示。4.3.2典型案例——DIV+CSS布局實例操作思路：（1）分析構(gòu)架：畫出構(gòu)架圖。

4.3.2典型案例——DIV+CSS布局實例操作思路：（2）模塊拆分：在網(wǎng)頁中插入Div標簽，定義頁面屬性和定義特定Id屬性的DIV標簽的CSS樣式。

一個總的DIV標簽，它包含了4個DIV標簽。Container最大的容器，將所有內(nèi)容包含在內(nèi)。Width：800px。Header網(wǎng)站頭部圖標，包含了一幅廣告橫幅，Width：800px，Height110px。Leftnav

左側(cè)導(dǎo)航條，Width：200，浮動為左對齊。Content網(wǎng)站的主要內(nèi)容。Width:480px。Footer網(wǎng)站底欄，包含版權(quán)信息等。

4.3.2典型案例——DIV+CSS布局實例4.3.2典型案例——DIV+CSS布局實例操作思路：（3）插入網(wǎng)頁元素和調(diào)整頁面結(jié)構(gòu)，適當修改CSS樣式。

4.4CSS制作實用的菜單1.無需表格的菜單2.菜單的橫豎轉(zhuǎn)換3.Tab菜單

1.無需表格的菜單操作思路：插入Div標簽，id為

navigation。制作好背景顏色和項目列表，如下圖。1.無需表格的菜單操作思路：設(shè)置navigation樣式，如下所示：

#navigation{

width:200px;

}

#navigationul{

list-style-type:none;

/*不顯示項目符號*/

margin:0px;

padding:0px;}1.無需表格的菜單操作思路：為<li>標記添加下劃線，以分割各個超鏈接，并且對超鏈接<a>標記進行整體設(shè)置，如右圖。

#navigationli{

border-bottom:1pxsolid#ED9F9F;/*添加下劃線*/

}

1.無需表格的菜單操作思路：#navigationlia{

display:block;/*區(qū)塊顯示*/

padding:5px5px5px0.5em;

text-decoration:none;

border-left:12pxsolid#711515;/*左邊的粗紅邊*/

border-right:1pxsolid#711515;/*右側(cè)陰影*/

}1.無需表格的菜單操作思路：設(shè)置鏈接的樣式：

#navigationlia:link,#navigationlia:visited{

background-color:#c11136;

color:#FFFFF