網(wǎng)頁(yè)布局與美化基礎(chǔ)全書(shū)教案完整版電子教案整本書(shū)教案最全單元教學(xué)設(shè)計(jì)

1、XHTML+CSS 網(wǎng)頁(yè)布局與美化案例教程教學(xué)單元1體驗(yàn)網(wǎng)頁(yè)的布局與美化PAGE 66PAGE 67教學(xué)單元1體驗(yàn)網(wǎng)頁(yè)的布局與美化【教學(xué)要點(diǎn)】（1）熟練創(chuàng)建本地站點(diǎn)（2）熟悉Web標(biāo)準(zhǔn)的設(shè)計(jì)規(guī)則（3）熟悉CSS的選擇符及屬性設(shè)置（4）熟悉CSS屬性值的縮寫(xiě)（5）熟悉Dreamweaver CS3中CSS的屬性設(shè)置（6）體驗(yàn)Dreamweaver CS3對(duì)CSS的支持（7）體驗(yàn)網(wǎng)頁(yè)中結(jié)構(gòu)與表現(xiàn)的分離（8）體驗(yàn)XHTML+CSS布局網(wǎng)頁(yè)（9）了解CSS的盒模型【1.1前導(dǎo)訓(xùn)練】【任務(wù)1-1-1】創(chuàng)建本地站點(diǎn)1在本地硬盤(pán)中創(chuàng)建文件夾2啟動(dòng)Dreamweaver CS33創(chuàng)建名稱為“01體驗(yàn)XHTML

2、+CSS布局與美化網(wǎng)頁(yè)”的本地站點(diǎn)（1）啟動(dòng)建立站點(diǎn)向?qū)В?）定義站點(diǎn)名稱（3）選擇是否使用服務(wù)器技術(shù)（4）確定使用文件的方式，設(shè)置文件存儲(chǔ)位置（5）設(shè)置如何連接到遠(yuǎn)程服務(wù)器（6）查看站點(diǎn)信息【任務(wù)1-1-2】建立網(wǎng)頁(yè)0101.html1新建網(wǎng)頁(yè)文檔（1）創(chuàng)建文件夾（2）設(shè)置Dreamweaver CS3“新建文檔”的初始參數(shù)（3）新建一個(gè)網(wǎng)頁(yè)文檔（4）保存該網(wǎng)頁(yè)（5）分析空白網(wǎng)頁(yè)的XHTML文檔結(jié)構(gòu)由Dreamweaver CS3生成的空白網(wǎng)頁(yè)的XHTML代碼如圖1-15所示。圖1-15由Dreamweaver CS3生成的空白網(wǎng)頁(yè)的XHTML代碼2準(zhǔn)備樣式文件3在網(wǎng)頁(yè)插入div標(biāo)簽在網(wǎng)頁(yè)0

3、101.html代碼區(qū)域的與之間插入多個(gè)div標(biāo)簽，插入多個(gè)div標(biāo)簽后的XHTML代碼如表1-3所示。4在網(wǎng)頁(yè)中插入圖像和輸入文字在網(wǎng)頁(yè)0101.htm中插入圖像，輸入相應(yīng)的文字，且設(shè)置必要的超鏈接。完整的XHTML代碼如表1-4所示。5保存網(wǎng)頁(yè)6瀏覽網(wǎng)頁(yè)效果【任務(wù)1-1-3】準(zhǔn)備網(wǎng)頁(yè)0102.html且瀏覽其效果（1）在Dreamweaver CS3工作界面【文件】面板中的文件夾“0101前導(dǎo)訓(xùn)練”中建立子文件夾“任務(wù)1-2”，然后在文件夾“任務(wù)1-2”中建立子文件夾“css”和“images”。（2）將樣式文件main0102.css拷貝到“css”文件夾中，將所需要的圖像文件拷貝到“i

4、mages”文件夾中。（3）將網(wǎng)頁(yè)文檔0102.html拷貝到“任務(wù)1-2”文件夾中。（4）打開(kāi)網(wǎng)頁(yè)文檔0102.html。（5）按快捷鍵F12瀏覽網(wǎng)頁(yè)0102.html，其瀏覽效果如圖1-17所示?！救蝿?wù)1-1-4】準(zhǔn)備網(wǎng)頁(yè)0103.html且瀏覽其效果（1）在Dreamweaver CS3工作界面【文件】面板中的文件夾“0101前導(dǎo)訓(xùn)練”中建立子文件夾“任務(wù)1-3”，然后在文件夾“任務(wù)1-3”中建立子文件夾“css”和“images”。（2）將樣式文件0101common.css、main0103.css、top0103.css和bottom0103.css拷貝到“css”文件夾中，將所需

5、要的圖像文件拷貝到“images”文件夾中。（3）將網(wǎng)頁(yè)文檔0103.html拷貝到“任務(wù)1-3”文件夾中。（4）打開(kāi)網(wǎng)頁(yè)文檔0103.html。（5）按快捷鍵F12瀏覽網(wǎng)頁(yè)0103.html，其瀏覽效果如圖1-18所示?！救蝿?wù)1-1-5】準(zhǔn)備網(wǎng)頁(yè)0104.html且瀏覽其效果（1）在Dreamweaver CS3工作界面【文件】面板中的文件夾“0101前導(dǎo)訓(xùn)練”中建立子文件夾“任務(wù)1-4”，然后在文件夾“任務(wù)1-4”中建立子文件夾“css”和“images”。（2）將樣式文件0101common.css和main0104.css拷貝到“css”文件夾中，將所需要的圖像文件拷貝到“images

6、”文件夾中。（3）將網(wǎng)頁(yè)文檔0104.html拷貝到“任務(wù)1-4”文件夾中。（4）打開(kāi)網(wǎng)頁(yè)文檔0104.html。（5）按快捷鍵F12瀏覽網(wǎng)頁(yè)0104.html，其瀏覽效果如圖1-19所示?！?.2操作實(shí)戰(zhàn)】【任務(wù)1-2-1】體驗(yàn)網(wǎng)頁(yè)中結(jié)構(gòu)與表現(xiàn)的分離網(wǎng)頁(yè)主要由三個(gè)部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior），對(duì)應(yīng)Web標(biāo)準(zhǔn)也分為三個(gè)方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對(duì)象模型（例如W3C DOM）、ECMAScript等。網(wǎng)頁(yè)index0101.html中內(nèi)容、結(jié)構(gòu)、表現(xiàn)和行為綜合作用

7、的XHTML代碼如圖1-20所示。所有網(wǎng)頁(yè)都是由“內(nèi)容、結(jié)構(gòu)、表現(xiàn)和行為”這四個(gè)方面組成的，其中內(nèi)容是基礎(chǔ)，然后是結(jié)構(gòu)和表現(xiàn)，最后再加點(diǎn)“行為”。內(nèi)容是瀏覽者所關(guān)注的信息，設(shè)計(jì)者使用XHTML標(biāo)簽控制網(wǎng)頁(yè)的結(jié)構(gòu)，使用CSS代碼控制網(wǎng)頁(yè)的表現(xiàn)，使用JavaScript代碼及其他方式控制網(wǎng)頁(yè)的行為，三者綜合作用保證網(wǎng)頁(yè)美觀、實(shí)用。【任務(wù)1-2-2】體驗(yàn)符合Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)規(guī)則觀察、分析圖1-20所示的網(wǎng)頁(yè)index0101.html的XHTML代碼，我們可以歸納出多條符合Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)規(guī)則，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)一定遵循這些設(shè)計(jì)規(guī)則，從而達(dá)到事半功倍之效果。（1）在網(wǎng)頁(yè)文檔的head之前正確聲明D

8、OCTYPE（2）正確定義語(yǔ)言編碼（3）所有的標(biāo)簽及屬性名稱都使用小寫(xiě)字母，屬性值可以使用大寫(xiě)字母（4）為所有的圖片設(shè)置alt屬性（5）所有的屬性值必須添加引號(hào)（6）不允許簡(jiǎn)寫(xiě)屬性（7）所有標(biāo)簽都必須閉合（8）所有的標(biāo)簽都必須合理嵌套（9）使用id屬性代替name屬性【任務(wù)1-2-3】體驗(yàn)Dreamweaver CS3對(duì)CSS的支持Dreamweaver CS3在CSS方面提供了更強(qiáng)的支持，能夠快捷定義和應(yīng)用CSS樣式。1Dreamweaver CS3中的CSS樣式面板Dreamweaver CS3中CSS樣式面板提供了兩種基本顯示模式：全部模式和正在模式。在【CSS樣式】面板中，單擊面板頂部

9、的【全部】按鈕，CSS面板將顯示應(yīng)用到當(dāng)前文檔的所有CSS規(guī)則，如圖1-21所示，不管這些規(guī)則是在外部樣式表中，還是在自身文檔中。在【新建CSS規(guī)則】對(duì)話框中的“選擇器類型”單選按鈕組中包括3個(gè)單選按鈕：類、標(biāo)簽和高級(jí)。2Dreamweaver CS3屬性面板的CSS樣式列表Dreamweaver CS3中，當(dāng)前網(wǎng)頁(yè)文檔中所應(yīng)用的CSS樣式會(huì)自動(dòng)出現(xiàn)在【屬性】面板的“CSS樣式”下拉列表中，如圖1-27所示。3Dreamweaver CS3中【CSS樣式】菜單Dreamweaver CS3中，【文本】菜單中有一個(gè)【CSS樣式】級(jí)聯(lián)菜單，該菜單包括當(dāng)前網(wǎng)頁(yè)文檔中所應(yīng)用的CSS樣式列表和【新建】、

10、【附加樣式表】等命令，如圖1-28所示。4Dreamweaver CS3中CSS布局的可視化助理Dreamweaver CS3中，應(yīng)用CSS樣式進(jìn)行布局設(shè)計(jì)時(shí)，可以使用CSS可視化助理來(lái)描畫(huà)CSS布局邊框或?yàn)镃SS布局加上顏色。單擊菜單【查看】【可視化助理】，可以顯示可視化助理級(jí)聯(lián)菜單，如圖1-29所示。Dreamweaver CS3提供了多個(gè)可視化助理，主要有CSS布局背景、CSS布局框模型、CSS布局外框和AP元素輪廓線四種。【任務(wù)1-2-4】體驗(yàn)CSS的盒模型1CSS的盒模型結(jié)構(gòu)所謂盒模型，就是把每個(gè)XHTML元素看作一個(gè)裝了東西的盒子，盒子里面的內(nèi)容到盒子的邊框這間的距離即為填充（pa

11、dding），盒子本身有邊框（border），盒子邊框外和其他盒子之間還有邊界（margin），CSS代碼所定義的寬度（width）和高度（height）是指填充以內(nèi)的內(nèi)容區(qū)域的寬度和高度，增加邊界、邊框和填充不會(huì)影響內(nèi)容區(qū)域的寬度和高度，但是會(huì)增加盒模型的總尺寸。CSS盒模型包括六個(gè)基本屬性，其中width和height屬性定義內(nèi)容區(qū)域的寬度和高度，在內(nèi)容區(qū)域的外面包裹了三層“外衣”：padding、border和margin，盒內(nèi)使用background屬性設(shè)置padding區(qū)域和內(nèi)容區(qū)域的背景。2CSS盒模型尺寸的計(jì)算從圖1-35可以看出box02區(qū)塊的實(shí)際寬度=40px+10px+30

12、px+400px+30px+10px+40px=560px，雖然該區(qū)塊的實(shí)際寬度為560px，但是由于內(nèi)容寬度只有400px，所以該區(qū)塊中所插入的圖像的寬度只能為400px。同樣從圖1-35可以看出box02區(qū)塊的實(shí)際高度=60px+10px+50px+70px+50px+10px+60px=310px，雖然該區(qū)塊的實(shí)際高度為310px，但于由于內(nèi)容高度只有70px，所以該區(qū)塊中所插入的圖像的高度只能為70px。前面通過(guò)對(duì)示例的分析，我們可以得出盒模型的計(jì)算公式：一個(gè)區(qū)塊的實(shí)際寬度=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界=margin-left+border-left+pad

13、ding-left+width+margin-right+border-right+padding-right一個(gè)區(qū)塊的實(shí)際高度=上邊界+上邊框+上填充+內(nèi)容高度+下邊界+下邊框+下填充= margin-top+border-top+padding-top+height+margin-bottom+border-bottom+padding-bottom3盒模型的邊界盒模型的邊界是網(wǎng)頁(yè)布局中一個(gè)重要屬性，合理地設(shè)置邊界可以使網(wǎng)頁(yè)布局疏密有致，整體上看起來(lái)優(yōu)美得體。設(shè)置邊界可以使用margin屬性，也可以margin-top、margin-right、margin-bottom、margin-l

14、eft屬性獨(dú)立設(shè)置上、右、下、左邊界的大小。4盒模型的邊框盒模型的邊框也是網(wǎng)頁(yè)布局的一個(gè)重要屬性，網(wǎng)頁(yè)中許多修飾性線條都是由邊框來(lái)實(shí)現(xiàn)的。（1）每個(gè)元素都包含四個(gè)方向上的邊框：border-top、border-right、border-bottom、border-left，可以單獨(dú)定義它們的屬性，也可以使用border屬性統(tǒng)一定義邊框效果。默認(rèn)狀態(tài)下，邊框的寬度為medium（中型），這是一個(gè)相對(duì)寬度，通常為23像素。邊框樣式的默認(rèn)值是none，即隱藏了邊框，不受任何指定的border-width值影響。邊框的默認(rèn)顏色為前景色，即元素中包含文本的顏色。（2）可以獨(dú)立定義邊框的樣式：borde

15、r-top-style（頂邊框樣式）、border-right-style（右邊框樣式）、border-bottom-style（底邊框樣式）、border-left-style（左邊框樣式），也可以使用border-style（邊框樣式）屬性統(tǒng)一定義邊框的樣式。（3）可以獨(dú)立定義邊框的寬度：border-top-width（頂邊框?qū)挾龋?、border-right-width（右邊框?qū)挾龋order-bottom-width（底邊框?qū)挾龋?、border-left-width（左邊框?qū)挾龋?，也可以使用border-width（邊框?qū)挾龋傩越y(tǒng)一定義邊框的寬度。（4）可以獨(dú)立定義邊框的顏色：b

16、order-top-color（頂邊框顏色）、border-right-color（右邊框顏色）、border-bottom-color（底邊框顏色）、border-left-color（左邊框顏色），也可以使用border-color（邊框顏色）屬性統(tǒng)一定義邊框的顏色。（5）內(nèi)聯(lián)元素也可以定義邊框，但是內(nèi)聯(lián)元素的上下邊框高度不會(huì)影響行高，而且不受段落和行高的約束，內(nèi)聯(lián)元素的左右邊框?qū)挾葧?huì)擠占左右相鄰文本的位置，而不會(huì)壓住左右兩側(cè)文本。5盒模型的填充盒模型的填充位于元素邊框和內(nèi)容之間，類似于Word文檔中的頁(yè)邊距。設(shè)置填充可以使用padding屬性，也可以使用padding-top、paddi

17、ng-right、padding-bottom、padding-left屬性獨(dú)立設(shè)置上、右、下、左填充的大小。6元素間距的計(jì)算（1）元素間水平間距的計(jì)算當(dāng)兩個(gè)或多個(gè)元素并列分布時(shí)，元素內(nèi)容之間的水平間距由邊界、邊框和填充多個(gè)因素共同控制。頁(yè)面設(shè)計(jì)視圖的顯示外觀如圖1-39所示，左、右兩個(gè)元素內(nèi)容之間的實(shí)際間距=左邊元素的右邊界+左邊元素的右邊框+左邊元素的右填充+右邊元素的左邊界+右邊元素的左邊框+右邊元素的左填充=20px +20px +5px +20px +20px +5px =90px。實(shí)際間距圖1-39左、右元素之間水平間距的計(jì)算（2）元素間垂直間距的計(jì)算計(jì)算上、下兩個(gè)元素之間的垂直間

18、距要比計(jì)算左、右元素之間的水平間距要復(fù)雜一些，計(jì)算方式也不同。當(dāng)元素浮動(dòng)時(shí)，相鄰元素的邊界不會(huì)出現(xiàn)重疊現(xiàn)象，此時(shí)需要將上下邊界、上下邊框和上下填充全部計(jì)算進(jìn)去。關(guān)于盒模型小結(jié)如下： （1）margin、padding、border三個(gè)屬性都是可選的，并不是每個(gè)元素都必須全部設(shè)置，如果我們不設(shè)置這些屬性，其默認(rèn)值為0，邊框的默認(rèn)樣式（border-style）為不顯示（none）。我們可以單獨(dú)定義一邊或統(tǒng)一定義四邊的屬性值。如果需要，每一邊的可見(jiàn)邊框可以定義為不同的寬度。我們也可以設(shè)置網(wǎng)頁(yè)元素的margin和padding為0清除其預(yù)定義樣式。（2）margin屬性可以定義為負(fù)值，padding

19、屬性和border屬性不能定義為負(fù)值。（3）margin總是透明的，padding也是透明的，但padding受背景影響，如果元素設(shè)置了背景顏色和圖像，padding區(qū)域可以顯示背景色或背景圖像。border不透明，盒模型背景可以深入到padding和border區(qū)域，但有的瀏覽器不支持border區(qū)域背景顯示。（4）對(duì)于非浮動(dòng)的塊狀元素，縱向相鄰元素的下邊界和上邊界會(huì)發(fā)生重疊，例如，有上、下兩個(gè)非浮動(dòng)的塊狀元素，上邊元素的下邊界為10px，下邊元素的上邊界為5px，則兩個(gè)元素之間的間距實(shí)際為10px，即兩個(gè)邊界值中較大的，而不是兩個(gè)邊界之和。浮動(dòng)塊狀元素的邊界不會(huì)被壓縮，如果浮動(dòng)塊狀元素沒(méi)有

20、聲明寬度，則壓縮到其內(nèi)容區(qū)域的最小寬度。在水平方向，兩個(gè)塊狀元素之間的邊界不會(huì)重疊。（5）內(nèi)聯(lián)元素的上下邊界不會(huì)影響行高，行高只能由line-height、font-size和vertical-align屬性改變。7嵌套div尺寸的計(jì)算在網(wǎng)頁(yè)布局中經(jīng)常使用div嵌套結(jié)構(gòu)，即一個(gè)元素中包含另一個(gè)元素，從結(jié)構(gòu)上講屬于嵌套或包含關(guān)系，外邊的元素稱為父元素，里面的元素稱為子元素。嵌套div內(nèi)容部分尺寸的計(jì)算受div邊界、邊框和填充寬度的影響，子元素的邊界、邊框和填充都被包含在父元素的內(nèi)容框里面?！救蝿?wù)1-2-5】體驗(yàn)CSS的選擇符及屬性設(shè)置打開(kāi)網(wǎng)頁(yè)0103.html，觀察、分析該網(wǎng)頁(yè)的XHTML代碼和

21、CSS代碼，認(rèn)識(shí)XHTML的元素類型、CSS的樣式規(guī)則、CSS的選擇符、CSS的屬性定義及屬性值的單位。1CSS樣式規(guī)則CSS由一些樣式規(guī)則組成，瀏覽器將這些規(guī)則應(yīng)用到相應(yīng)的元素中。每個(gè)CSS樣式（或者稱為規(guī)則）都由兩個(gè)部分組成：選擇符（selector）和聲明（declaration）。聲明又由“屬性”（property）和“值”（value）組成?；靖袷饺缦拢哼x擇符 屬性 ：值 ;例如：.main width: 960px ;2CSS的選擇符（1）標(biāo)簽選擇符標(biāo)簽選擇符也稱為類型選擇符，XHTML中的所有標(biāo)簽都可以作為標(biāo)簽選擇符?！拘陆–SS規(guī)則】對(duì)話框中的“標(biāo)簽”下拉列表中的選項(xiàng)正是XH

22、TML的標(biāo)簽，如圖1-44所示?？梢詫HTML的標(biāo)簽選擇符重新定義，重新定義這些標(biāo)簽的屬性和值。（2）id選擇符id選擇符可以將網(wǎng)頁(yè)文檔中同一個(gè)元素定義成不同的樣式，定義id選擇符時(shí)，要在id選擇符名稱前面加上一個(gè)半角的“#”符號(hào)。id可以理解為一個(gè)標(biāo)識(shí)，在網(wǎng)頁(yè)中每個(gè)id名稱只能使用一次，一個(gè)id選擇符只能對(duì)應(yīng)于網(wǎng)頁(yè)文檔中一個(gè)具體的元素對(duì)象，id屬性只能定義頁(yè)面中某個(gè)惟一的元素對(duì)象。（3）類選擇符類選擇符可以把XHTM文檔中具有相同樣式的不同元素合并為一類，在同一個(gè)網(wǎng)頁(yè)文檔中可以為不同類型的元素定義相同的類名，這樣大大節(jié)省了CSS代碼的編寫(xiě)，增強(qiáng)了代碼的可讀性。定義類選擇符時(shí)，在類選擇符名稱

23、前面加上一個(gè)半角“.”符號(hào)，在網(wǎng)頁(yè)代碼中使用類選擇符的形式是“class=類選擇符名稱”。（4）通用選擇符通用選擇符是一種特殊的選擇符，它用符號(hào)“*”表示，是一個(gè)非常實(shí)用，也容易被忽略的選擇符。通用選擇符可以定義所有網(wǎng)頁(yè)元素的樣式，例如：* /*定義網(wǎng)頁(yè)文檔中所有字體大小為12px*/ font-size:12px;（5）偽類與偽元素選擇符偽類可以看作是一種特殊的類選擇符，是能被支持CSS的瀏覽器自動(dòng)所識(shí)別的特殊選擇符。之所以成為“偽”類，是因?yàn)樗鼈兯付ǖ膶?duì)象在網(wǎng)頁(yè)文檔中并不存在，它們指定的是元素的某種狀態(tài)。定義偽類選擇符的形式如下所示：選擇符名稱 : 偽類名稱 屬性 : 值 （6）分組選擇

24、符分組選擇符并不是一種選擇符的類型，而是一種選擇符的使用方法。當(dāng)多個(gè)選擇符定義了相同的樣式時(shí)，我們可以將選擇符以半角逗號(hào)“,”分隔的方式合并為一組，這樣能夠簡(jiǎn)化代碼，例如：h1,h2,h3,p /*定義標(biāo)題h1,h2,h3和段落的行高都為字體大小的1.6倍*/ line-height: 1.6em;（7）包含選擇符包含選擇符是最有用的一類選擇符，它能夠簡(jiǎn)化代碼，實(shí)現(xiàn)更大范圍的樣式控制。包含選擇符中前后兩個(gè)對(duì)象之間以空格隔開(kāi)。例如在結(jié)構(gòu)中，包含選擇符div p可以定義標(biāo)簽p的樣式，表1-16中的“.leadmenu li”和“.leadmenu li a”就是屬性包含選擇符。（8）標(biāo)簽指定選擇符

25、有時(shí)候我們希望控制某種元素在一定范圍內(nèi)對(duì)象的樣式，這時(shí)可以把元素與類選擇符或id選擇符結(jié)合起來(lái)使用。例如，對(duì)于以下幾行XHTML代碼，div區(qū)塊中包含了兩個(gè)子元素h2和p，我們?nèi)绾尉_控制“正文”位置的樣式呢？很顯然，直接使用news類選擇符不合適，而直接使用p標(biāo)簽選擇符或者使用p news包含選擇符也不是很理想，會(huì)影響到其他元素的樣式，此時(shí)最好的方法就是使用標(biāo)簽指定選擇符p.news定義CSS屬性。 標(biāo)題 正文（9）子對(duì)象選擇符子對(duì)象選擇符與標(biāo)簽指定選擇符一樣都是限定性選擇符，即在一定元素范圍內(nèi)定義符合限制條件的元素樣式。標(biāo)簽指定選擇符是用類或id屬性作為限制條件，來(lái)定義某種元素中符合條件的

26、元素樣式，而子對(duì)象選擇符是用包含子對(duì)象作為限制條件，來(lái)定義父對(duì)象所包含的部分子元素樣式。（10）相鄰選擇符對(duì)于以下這段XHTML代碼，如果要單獨(dú)控制正文2位置的p元素，我們可以單獨(dú)定義一個(gè)類或id屬性，但是這不是我們所希望的。 標(biāo)題 正文1 正文2這里我們可以使用相鄰選擇符控制其樣式，CSS代碼如下所示：m_left+p font-size: 14px; 【任務(wù)1-2-6】體驗(yàn)CSS屬性值的縮寫(xiě)對(duì)于CSS樣式定義比較熟練的設(shè)計(jì)者，可以對(duì)CSS樣式定義進(jìn)行整理和縮寫(xiě)，使CSS代碼簡(jiǎn)潔、可讀性強(qiáng)。CSS屬性值的縮寫(xiě)是指將多個(gè)CSS屬性定義合并到一行中的編寫(xiě)方式，這種編寫(xiě)方式能夠精簡(jiǎn)CSS代碼，更加

27、便于閱讀。1font字體樣式的縮寫(xiě)字體樣式縮寫(xiě)包含字體樣式、變體、粗細(xì)、大小、行高和字體等屬性，使用格式如下：font: font-style（樣式） font-variant（變體） font-weight（粗細(xì)） font-size（大?。?line-height（行高） font-family（字體）2color顏色樣式的縮寫(xiě)對(duì)于用十六進(jìn)制數(shù)值表示的顏色，CSS也提供了縮寫(xiě)模式。十六進(jìn)制顏色表示法使用2位十六進(jìn)制數(shù)值表示1種顏色，一個(gè)十六進(jìn)制的顏色值分為三組十六進(jìn)制的數(shù)值，傳統(tǒng)寫(xiě)法一般為#ABCDEF，CSS的顏色縮寫(xiě)必須符合一定的需求，當(dāng)A與B數(shù)字相同，C與D數(shù)字相同，E與F數(shù)字相同，

28、可以使用顏色縮寫(xiě)，如#cc00ff可以縮寫(xiě)為#c0f。除此之外則不能使用縮寫(xiě)模式，例如#ccdeff則不能縮寫(xiě)。3background背景樣式的縮寫(xiě)背景樣式可以使用復(fù)合屬性定義替代多個(gè)單項(xiàng)屬性定義，其格式如下：background : background-color（背景顏色） background-image（背景圖像） background-repeat（重復(fù)） background-attachment（附件） background-position（位置） 4padding填充樣式的縮寫(xiě)padding填充屬性只有大小，包括上、右、下、左四個(gè)屬性值，通常的寫(xiě)法如下：.b_right p

29、adding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 10px;在CSS樣式定義中，可以采用以下的縮寫(xiě)格式（順時(shí)針?lè)较颍簆adding: padding-top（上填充） padding-right（右填充） padding-bottom（下填充） padding-left（左填充）默認(rèn)情況下，padding填充屬性值提供四個(gè)參數(shù)值，按順序分別為上、右、下、左。例如：.b_right padding: 0px 0px 10px 10px 如果元素的上填充和下填充是相同的值，左填充和右填充是相同的值，可

30、以使用兩個(gè)參數(shù)進(jìn)行定義，分別表示上下填充和左右填充，可以縮寫(xiě)為：#div1 padding: 10px 20px ; 如果元素的左、右填充是相同的值，上、下填充的值不相同，可以使用三個(gè)參數(shù)進(jìn)行定義，分別表示上填充、左右填充和下填充，可以縮寫(xiě)為：#div2 padding: 10px 15px 20px ; 如果元素的上、右、下、左填充的值都相同，則只需要使用一個(gè)參數(shù)進(jìn)行定義，可以縮寫(xiě)為：#div3 padding: 10px ; 5margin邊界樣式的縮寫(xiě)margin邊界的屬性值縮寫(xiě)與padding填充類似。margin邊界屬性只有大小，包括上、右、下、左四個(gè)屬性值，通常的寫(xiě)法如下：.b_r

31、ight margin-top: 5px; margin-right: 5px; margin-bottom: 10px; margin-left: 10px;在CSS樣式定義中，可以采用以下的縮寫(xiě)格式：margin: margin-top（上邊界） margin-right（右邊界） margin-bottom（下邊界） margin-left（左邊界）默認(rèn)情況下，margin邊界屬性值提供四個(gè)參數(shù)值，按照上、右、下、左（順時(shí)針?lè)较颍┑捻樞騺?lái)定義，中間使用空格來(lái)分隔。例如：.b_right margin : 5px 5px 10px 10px 如果元素的上邊界和下邊界是相同的值，左邊界和右邊

32、界是相同的值，可以使用兩個(gè)參數(shù)進(jìn)行定義，分別表示上下邊界和左右邊界，可以縮寫(xiě)為：#div1 margin: 10px 20px ; 如果元素的左、右邊界是相同的值，上、下邊界的值不相同，可以使用三個(gè)參數(shù)進(jìn)行定義，分別表示上邊界、左右邊界和下邊界，可以縮寫(xiě)為：#div2 margin: 10px 15px 20px ; 如果元素的上、右、下、左邊界的值都相同，則只需要使用一個(gè)參數(shù)進(jìn)行定義，可以縮寫(xiě)為：#div3 margin: 10px ; 與padding填充一樣，如果元素的上、下邊界的值相同，但是左、右邊界的值卻不同，則不能采用縮寫(xiě)形式，必須使用四個(gè)參數(shù)定義元素的邊界。6border邊框樣式

33、的縮寫(xiě)邊框border對(duì)象本身是一個(gè)非常復(fù)雜的對(duì)象，border屬性包括樣式（type）、大?。╯ize）和顏色（color）三個(gè)方面的屬性，還分為上、右、下、左四個(gè)方向，border對(duì)象提供的縮寫(xiě)形式也較多，不僅可以對(duì)整個(gè)border對(duì)象進(jìn)行縮寫(xiě)，也可以單獨(dú)對(duì)某一邊進(jìn)行縮寫(xiě)。（1）整個(gè)邊框（border）屬性值的縮寫(xiě)對(duì)于整個(gè)border對(duì)象而言，使用的縮寫(xiě)格式如下所示，三個(gè)屬性值的先后順序可以改變。border : border-width（邊框?qū)挾龋?border-style（邊框樣式） color（邊框顏色）（2）邊框（border）四條邊屬性值的縮寫(xiě)邊框（border）對(duì)象的四條邊的屬

34、性值都可以單獨(dú)應(yīng)用縮寫(xiě)形式，格式如下：border-top : border-width（上邊框?qū)挾龋?border-style（上邊框樣式） color（上邊框顏色）border-right :border-width（右邊框?qū)挾龋?border-style（右邊框樣式） color（右邊框顏色）border-bottom : border-width（下邊框?qū)挾龋?border-style（下邊框樣式） color（下邊框顏色）border-left : border-width（左邊框?qū)挾龋?border-style（左邊框樣式） color（左邊框顏色）（3）邊框（border）的樣式

35、、寬度和顏色的縮寫(xiě)如果上、右、下、左邊框的樣式、寬度或者顏色完全相同，也可以采用縮寫(xiě)形式，格式如下：border-style : style（邊框樣式）border-width: width（邊框?qū)挾龋゜order-color: color（邊框顏色）7列表樣式縮寫(xiě)列表屬性可以使用復(fù)合屬性定義替代多個(gè)單個(gè)屬性定義，其縮寫(xiě)格式如下：list-style : list-style-type（類型） list-style-position（位置） list-style-image（項(xiàng)目符號(hào)圖像）?！救蝿?wù)1-2-7】體驗(yàn)Dreamweaver CS3中CSS的屬性設(shè)置利用Dreamweaver CS3

36、的【CSS規(guī)則定義】對(duì)話框可以很方便地定義、修改CSS樣式，【CSS規(guī)則定義】對(duì)話框?qū)SS屬性分為八類：類型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展，每一類中都多個(gè)相應(yīng)的屬性進(jìn)行設(shè)置，但是有些CSS的屬性無(wú)法通過(guò)【CSS規(guī)則定義】對(duì)話框進(jìn)行設(shè)置，例如min-width就不能使用【CSS規(guī)則定義】對(duì)話框進(jìn)行設(shè)置，必須手工輸入CSS代碼設(shè)置該屬性。1類型【類型】主要對(duì)文字屬性進(jìn)行定義，包括字體、文字大小、行高、顏色等。2背景靈活使用背景，可以使頁(yè)面美觀且顯示速度快，后面各章制作的網(wǎng)頁(yè)，裝飾性圖片都是通過(guò)設(shè)置背景圖像實(shí)現(xiàn)的。3區(qū)塊【區(qū)塊】中經(jīng)常使用的屬性是文本對(duì)齊、文字首行縮進(jìn)和顯示（displ

37、ay）。4方框【方框】包括寬度、高度、浮動(dòng)、填充和邊界等屬性的設(shè)置。5邊框【邊框】主要定義邊框的樣式、寬度和顏色，如圖1-49所示。6列表【列表】只定義列表標(biāo)簽的屬性，對(duì)于非列表標(biāo)簽不起作用。7定位【定位】是實(shí)現(xiàn)網(wǎng)頁(yè)布局的重要手段之一，主要包括定位類型、定位尺寸、剪輯等屬性的設(shè)置。8擴(kuò)展【擴(kuò)展】主要包括分頁(yè)、視覺(jué)效果等屬性的設(shè)置。【任務(wù)1-2-8】體驗(yàn)XHTML+CSS布局網(wǎng)頁(yè)觀察、分析網(wǎng)頁(yè)0103.html和0104.html的布局方式，體驗(yàn)XHTML+CSS布局網(wǎng)頁(yè)的方法。1分析網(wǎng)頁(yè)0103.html的布局（1）分析網(wǎng)頁(yè)整體的上、中、下布局結(jié)構(gòu)（2）分析網(wǎng)頁(yè)局部的左、中、右布局結(jié)構(gòu)2分析網(wǎng)

38、頁(yè)0104.html的布局（1）分析網(wǎng)頁(yè)整體的左、右布局結(jié)構(gòu)（2）分析網(wǎng)頁(yè)局部的左、右布局結(jié)構(gòu)【1.3拓展實(shí)踐】【任務(wù)1-3-1】分析網(wǎng)頁(yè)index0102.html【任務(wù)描述】（1）仔細(xì)閱讀網(wǎng)頁(yè)index0102.html的XHTML代碼和對(duì)應(yīng)的外部樣式文件的CSS代碼， 分析該網(wǎng)頁(yè)的結(jié)構(gòu)與表現(xiàn)相分離的特性。 分析XHTML代碼是否符合Web標(biāo)準(zhǔn)的設(shè)計(jì)規(guī)則。（2）分析網(wǎng)頁(yè)index0102.html的布局結(jié)構(gòu)及盒模型。（3）利用Dreamweaver CS3的【CSS規(guī)則定義】對(duì)話框分析外部樣式文件中各選擇符屬性設(shè)置的含義及功能。（4）利用本章所學(xué)習(xí)的CSS屬性值的縮寫(xiě)規(guī)則，對(duì)外部樣式文件中

39、的屬性設(shè)置值進(jìn)行精簡(jiǎn)與合并?！拘Ч故尽烤W(wǎng)頁(yè)index0102.html瀏覽效果如圖1-57所示。圖1-57網(wǎng)頁(yè)index0102.html的瀏覽效果教學(xué)單元2文本與列表的美化【教學(xué)要點(diǎn)】（1）學(xué)會(huì)新建與保存網(wǎng)頁(yè)文檔（2）學(xué)會(huì)利用【新建文檔】對(duì)話框中創(chuàng)建CSS文件（3）學(xué)會(huì)利用【新建 CSS 規(guī)則】對(duì)話框定義樣式（4）學(xué)會(huì)利用【CSS 規(guī)則定義】對(duì)話框設(shè)置樣式屬性（5）學(xué)會(huì)創(chuàng)建代碼片斷和插入代碼片斷（6）熟練利用CSS樣式屬性設(shè)置網(wǎng)頁(yè)文本的字體屬性（7）熟練利用CSS樣式實(shí)現(xiàn)文字排版和段落排版（8）熟練利用CSS樣式實(shí)現(xiàn)列表樣式【2.1前導(dǎo)訓(xùn)練】【準(zhǔn)備工作】（1）在本地硬盤(pán)中創(chuàng)建文件夾（2）啟

40、動(dòng)Dreamweaver CS3（3）創(chuàng)建名稱為“02文本與列表的美化”的本地站點(diǎn)【任務(wù)2-1-1】創(chuàng)建網(wǎng)頁(yè)0201.html【任務(wù)描述】（1）創(chuàng)建樣式文件main0201.css，在該樣式文件中定義標(biāo)簽body、h3和div的屬性。（2）在樣式文件main0201.css中定義類選擇符main1的屬性。（3）創(chuàng)建網(wǎng)頁(yè)文檔0201.html，且鏈接外部樣式文件main0201.css。（4）在網(wǎng)頁(yè)0201.html中輸入文字、插入圖像。網(wǎng)頁(yè)0201.html的瀏覽效果如圖2-1所示。圖2-1網(wǎng)頁(yè)0201.html的瀏覽效果【頁(yè)面設(shè)計(jì)】675px10px10px5px5px.main1網(wǎng)頁(yè)020

41、1.html設(shè)計(jì)視圖的外觀效果如圖2-2所示，整體區(qū)塊的類選擇符名稱是“main1”。圖2-2網(wǎng)頁(yè)0201.html設(shè)計(jì)視圖的外觀效果【實(shí)施過(guò)程】1操作準(zhǔn)備（1）創(chuàng)建文件夾（2）Dreamweaver CS3初始參數(shù)設(shè)置（3）新建一個(gè)網(wǎng)頁(yè)文檔（4）設(shè)置網(wǎng)頁(yè)標(biāo)題（5）保存該網(wǎng)頁(yè)2創(chuàng)建樣式文件3定義標(biāo)簽body的樣式屬性4定義標(biāo)簽h3的樣式屬性（1）顯示【CSS樣式】面板（2）打開(kāi)【新建 CSS 規(guī)則】對(duì)話框（3）選擇標(biāo)簽h3（4）設(shè)置標(biāo)簽h3的樣式屬性5定義標(biāo)簽div的樣式屬性（1）打開(kāi)【新建 CSS 規(guī)則】對(duì)話框（2）選擇標(biāo)簽div（3）設(shè)置標(biāo)簽div的樣式屬性6定義類選擇符main1（1）打

42、開(kāi)【新建 CSS 規(guī)則】對(duì)話框（2）定義樣式名稱（3）設(shè)置樣式main1的屬性（4）查看樣式的屬性設(shè)置7鏈接外部樣式文件main0201.css8查看鏈接外部樣式表的代碼9對(duì)網(wǎng)頁(yè)0201.html的頁(yè)面進(jìn)行布局10在網(wǎng)頁(yè)0201.html中輸入標(biāo)題和正文文字11在網(wǎng)頁(yè)0201.html中插入圖片【任務(wù)2-1-2】創(chuàng)建網(wǎng)頁(yè)0202.html【任務(wù)描述】（1）創(chuàng)建樣式文件main0202.css，在該樣式文件中定義標(biāo)簽ul、li以及其他類選擇符的樣式屬性。（2）創(chuàng)建網(wǎng)頁(yè)文檔0202.html，且鏈接外部樣式文件main0202.css。（3）在網(wǎng)頁(yè)0202.html中插入圖像和列表。網(wǎng)頁(yè)0202.

43、html的瀏覽效果如圖2-31所示。【頁(yè)面設(shè)計(jì)】網(wǎng)頁(yè)0202.html設(shè)計(jì)視圖的外觀效果如圖2-32所示，整體區(qū)塊的類選擇符名稱是“l(fā)eftbox”，寬度為“200px”，其中上半部分的類選擇符名稱是“navigate”，下半部分的類選擇符名稱是“box”。圖2-31網(wǎng)頁(yè)0202.html的瀏覽效果200px.navigate. box.leftbox圖2-32網(wǎng)頁(yè)0202.html設(shè)計(jì)視圖的外觀效果【實(shí)施過(guò)程】1操作準(zhǔn)備（1）創(chuàng)建文件夾（2）新建一個(gè)網(wǎng)頁(yè)文檔（3）設(shè)置網(wǎng)頁(yè)標(biāo)題（4）保存該網(wǎng)頁(yè)2新建樣式文件main0202.css和定義類選擇符leftbox（1）新建樣式（2）定義樣式名稱（3

44、）設(shè)置樣式屬性3定義類選擇符navigate4定義標(biāo)簽ul和li的樣式屬性5定義其他類選擇符屬性6鏈接外部樣式表文件main0202.css 切換到網(wǎng)頁(yè)文檔0202.html的【代碼視圖】，在標(biāo)簽“”的前面輸入一行鏈接外部樣式表的代碼，如下所示：7對(duì)網(wǎng)頁(yè)0202.html的頁(yè)面進(jìn)行布局將光標(biāo)移至網(wǎng)頁(yè)0202.html的設(shè)計(jì)視圖中，在Dreamweaver CS3主界面，單擊“插入”工具欄“布局”選項(xiàng)卡中單擊【插入 div 標(biāo)簽】按鈕，如圖2-40所示。彈出【插入Div標(biāo)簽】對(duì)話框，在該對(duì)話框中的“插入”下拉列表框中選擇“在插入點(diǎn)”選項(xiàng)，在“類”下拉列表框中選擇“l(fā)eftbox”選項(xiàng)，如圖2-4

45、1所示，然后單擊【確定】按鈕，關(guān)閉該對(duì)話框。8在網(wǎng)頁(yè)0202.html中插入圖像和列表在網(wǎng)頁(yè)0202.html名稱為“box_name”的兩個(gè)區(qū)塊中分別插入GIF圖像0201icon02.gif和0201navigate.gif。接下來(lái)分別在兩個(gè)區(qū)塊“box_list”中插入項(xiàng)目列表及其列表項(xiàng)，輸入相應(yīng)的文字?！救蝿?wù)2-1-3】創(chuàng)建網(wǎng)頁(yè)0203.html【任務(wù)描述】任務(wù)2-3為考核項(xiàng)目，請(qǐng)獨(dú)立完成以下操作任務(wù)：利用div區(qū)塊、ul項(xiàng)目列表和li列表項(xiàng)制作如圖2-42所示的導(dǎo)航欄。圖2-42導(dǎo)航欄的瀏覽效果【頁(yè)面設(shè)計(jì)】網(wǎng)頁(yè)0202.html的整體布局結(jié)構(gòu)如圖2-43所示，類選擇符名稱是“chan

46、nel”。#channel圖2-43網(wǎng)頁(yè)0202.html的整體布局結(jié)構(gòu)網(wǎng)頁(yè)0202.html的局部布局結(jié)構(gòu)如圖2-44所示，分為左、中、右三個(gè)區(qū)塊，其類選擇符名稱分別是“l(fā)eft”、“l(fā)ist”和“right”。#left#list#right圖2-44網(wǎng)頁(yè)0202.html的局部布局結(jié)構(gòu)【實(shí)施過(guò)程】1新建文件夾，準(zhǔn)備圖像文件2建立樣式文件，定義樣式3新建網(wǎng)頁(yè)文檔0203.html在子文件夾“任務(wù)2-3”中，通過(guò)【新建文檔】對(duì)話框或者直接使用【新建文件】快捷菜單創(chuàng)建一個(gè)名稱為“0203.html”的網(wǎng)頁(yè)文檔。4鏈接外部樣式表文件main0203.css 切換到網(wǎng)頁(yè)文檔0203.html的【代

47、碼視圖】，在標(biāo)簽“”的前面輸入一行鏈接外部樣式表的代碼，如下所示：5對(duì)網(wǎng)頁(yè)的頁(yè)面進(jìn)行布局切換到“代碼視圖”，在網(wǎng)頁(yè)0203.html代碼區(qū)域的與之間輸入表2-14所示的XHTML代碼。表2-14網(wǎng)頁(yè)0203.html布局結(jié)構(gòu)的XHTML代碼行號(hào)XHTML代碼 6在網(wǎng)頁(yè)中插入圖像和列表在網(wǎng)頁(yè)0203.html代碼區(qū)域的與之間插入項(xiàng)目列表及其列表項(xiàng)，然后插入圖像，輸入相應(yīng)的文字?！救蝿?wù)2-1-4】創(chuàng)建網(wǎng)頁(yè)0204.html【任務(wù)描述】任務(wù)2-3為考核項(xiàng)目，請(qǐng)獨(dú)立完成以下操作任務(wù)：利用div區(qū)塊制作如圖2-45所示網(wǎng)頁(yè)0204.html，圖像屬性利用圖像的【屬性】面板進(jìn)行設(shè)置。圖2-45網(wǎng)頁(yè)0204

48、.html的瀏覽效果【頁(yè)面設(shè)計(jì)】網(wǎng)頁(yè)0204.html的整體布局結(jié)構(gòu)如圖2-46所示，類選擇符名稱是“currentpath”。#currentpath圖2-46網(wǎng)頁(yè)0204.html的整體布局結(jié)構(gòu)網(wǎng)頁(yè)0204.html的局部布局結(jié)構(gòu)如圖2-47所示，分為左、右兩個(gè)區(qū)塊，其類選擇符名稱分別是“currentpath_icon”和“currentpath_text”。#currentpath_icon#currentpath_text圖2-47網(wǎng)頁(yè)0204.html的局部布局結(jié)構(gòu)【實(shí)施過(guò)程】1新建文件夾，準(zhǔn)備圖像文件2建立樣式文件，定義樣式3新建網(wǎng)頁(yè)文檔0204.html4鏈接外部樣式表文件ma

49、in0204.css 5對(duì)網(wǎng)頁(yè)的頁(yè)面進(jìn)行布局切換到“代碼視圖”，在網(wǎng)頁(yè)0204.html代碼區(qū)域的與之間輸入表2-17所示的XHTML代碼。表2-17網(wǎng)頁(yè)0204.html布局結(jié)構(gòu)的XHTML代碼行號(hào)XHTML代碼 6在網(wǎng)頁(yè)中插入圖像和列表在網(wǎng)頁(yè)0204.html代碼區(qū)域插入圖像，輸入相應(yīng)的文字。【2.2操作實(shí)戰(zhàn)】【任務(wù)2-2-1】創(chuàng)建網(wǎng)頁(yè)index0201.html【任務(wù)描述】以“桂林旅游”為主題，制作網(wǎng)頁(yè)index0201.html。（1）布局結(jié)構(gòu)該網(wǎng)頁(yè)整體上分為四個(gè)區(qū)塊，呈上下結(jié)構(gòu)，其中第三個(gè)區(qū)塊又分為左、右兩個(gè)部分。（2）網(wǎng)頁(yè)的主要元素文本、項(xiàng)目列表、圖像、導(dǎo)航欄等。（3）網(wǎng)頁(yè)色彩網(wǎng)頁(yè)

50、前景色主要采用#16a，背景色主要采用#fff。網(wǎng)頁(yè)index0201.html瀏覽效果如圖2-48所示。圖2-48網(wǎng)頁(yè)index0201.html的瀏覽效果【實(shí)施過(guò)程 SHAPE * MERGEFORMAT 】1新建文件夾，準(zhǔn)備網(wǎng)頁(yè)素材2建立樣式文件，定義樣式3新建代碼片斷新建代碼片斷的方法如下：（1）打開(kāi)【代碼片斷】面板（2）新建代碼片斷文件夾（3）創(chuàng)建代碼片斷4新建網(wǎng)頁(yè)文檔index0201.html5鏈接外部樣式表文件02main.css 6對(duì)網(wǎng)頁(yè)的頁(yè)面進(jìn)行布局打開(kāi)網(wǎng)頁(yè)文檔index0201.html，在“文檔”工具欄的“標(biāo)題”文本框輸入網(wǎng)頁(yè)標(biāo)題“桂林概況”。然后切換到“代碼視圖”，在

51、標(biāo)簽“”與“”之間輸入表2-21所示的網(wǎng)頁(yè)主體布局結(jié)構(gòu)的XHTML代碼。表2-21網(wǎng)頁(yè)0201.html主體布局結(jié)構(gòu)的XHTML代碼行號(hào)XHTML代碼 7在網(wǎng)頁(yè)中插入代碼片斷（1）插入“0203代碼片斷”（2）插入“0204代碼片斷”（3）插入“0202代碼片斷”（4）插入“0201代碼片斷”8對(duì)網(wǎng)頁(yè)進(jìn)行優(yōu)化完善對(duì)已插入的代碼片斷進(jìn)行優(yōu)化完善，對(duì)XHTML代碼進(jìn)行清理操作，然后在標(biāo)簽與之間輸入文字“蝴蝶工作室版權(quán)所有”。9保存網(wǎng)頁(yè)且瀏覽其效果單擊Dreamweaver CS3“標(biāo)準(zhǔn)”工具欄中的【全部保存】按鈕，保存網(wǎng)頁(yè)“index0201.html”。單擊“文檔”工具欄中【在瀏覽器中預(yù)覽/調(diào)試

52、】按鈕，在彈出的快捷菜單中單擊【預(yù)覽在IExplore】按鈕或者直接按快捷鍵F12，網(wǎng)頁(yè)的瀏覽效果如圖2-48所示?！?.3拓展實(shí)踐】【任務(wù)2-3-1】創(chuàng)建網(wǎng)頁(yè)index0202.html【任務(wù)描述】以“烏鎮(zhèn)旅游”為主題制作網(wǎng)頁(yè)index0202.html，該網(wǎng)頁(yè)分為上、中、下三個(gè)區(qū)塊，上部為烏鎮(zhèn)簡(jiǎn)介，中部為烏鎮(zhèn)美景，下部為烏鎮(zhèn)的旅游線路。其瀏覽效果如圖2-59所示。圖2-59網(wǎng)頁(yè)index0202.html的瀏覽效果教學(xué)單元3圖像與背景的應(yīng)用與美化【教學(xué)要點(diǎn)】（1）熟悉圖文混排布局（2）學(xué)會(huì)利用CSS樣式設(shè)置圖像樣式（3）學(xué)會(huì)靈活應(yīng)用圖像美化網(wǎng)頁(yè)（4）學(xué)會(huì)靈活應(yīng)用背景顏色和背景圖像美化網(wǎng)頁(yè)（

53、5）學(xué)會(huì)制作全圖排版網(wǎng)頁(yè)（6）了解利用CSS Sprites原理合成圖片的方法（7）了解利用背景圖像實(shí)現(xiàn)圓角布局的方法（8）了解利用CSS樣式控制圓角布局的方法（9）了解利用CSS樣式設(shè)置圖像陰影效果的方法【3.1前導(dǎo)訓(xùn)練】【準(zhǔn)備工作】（1）在本地硬盤(pán)中創(chuàng)建文件夾（2）啟動(dòng)Dreamweaver CS3（3）創(chuàng)建名稱為“03圖像與背景的應(yīng)用與美化”的本地站點(diǎn)【任務(wù)3-1-1】創(chuàng)建網(wǎng)頁(yè)0301.html【任務(wù)描述】（1）創(chuàng)建樣式文件0301common.css和main0301.css，在這些樣式文件中定義標(biāo)簽及選擇符的樣式屬性。（2）創(chuàng)建網(wǎng)頁(yè)文檔0301.html，且鏈接外部樣式文件0301c

54、ommon.css和main0301.css。（3）對(duì)網(wǎng)頁(yè)0301.html的頁(yè)面進(jìn)行布局設(shè)計(jì)，在網(wǎng)頁(yè)中插入圖像和輸入文字。網(wǎng)頁(yè)0301.html的瀏覽效果如圖3-1所示。圖3-1網(wǎng)頁(yè)0301.html的游覽效果【實(shí)施過(guò)程】1操作準(zhǔn)備（1）創(chuàng)建文件夾（2）Dreamweaver CS3初始參數(shù)設(shè)置2建立公共的樣式文件0301common.css，定義標(biāo)簽樣式屬性在文件夾“css”中建立樣式文件0301common.css，在該樣式文件中編寫(xiě)CSS樣式代碼，定義標(biāo)簽樣式屬性。3建立樣式文件main0301.css，定義樣式在文件夾“css”中建立樣式文件main0301.css，在該樣式文件中編

55、寫(xiě)CSS樣式代碼，定義所需要的樣式。4新建網(wǎng)頁(yè)文檔0301.html5鏈接外部樣式表文件main0301.css 6對(duì)網(wǎng)頁(yè)的頁(yè)面進(jìn)行布局7在網(wǎng)頁(yè)中插入圖像和輸入文字在網(wǎng)頁(yè)0301.html代碼區(qū)域插入圖像，輸入相應(yīng)的文字。8保存網(wǎng)頁(yè)9瀏覽網(wǎng)頁(yè)效果【任務(wù)3-1-2】創(chuàng)建網(wǎng)頁(yè)0302.html【任務(wù)描述】（1）創(chuàng)建樣式文件main0302.css，在該樣式文件中定義標(biāo)簽及選擇符的樣式屬性。（2）創(chuàng)建網(wǎng)頁(yè)文檔0302.html，且鏈接外部樣式文件main0302.css。（3）對(duì)網(wǎng)頁(yè)0302.html的頁(yè)面進(jìn)行布局設(shè)計(jì)，在網(wǎng)頁(yè)中插入圖像和輸入文字。網(wǎng)頁(yè)0302.html的瀏覽效果如圖3-5所示。圖3

56、-5網(wǎng)頁(yè)0302.html的瀏覽效果【實(shí)施過(guò)程】1新建文件夾，準(zhǔn)備圖像文件2建立樣式文件main0302.css，定義樣式3新建網(wǎng)頁(yè)文檔0302.html在子文件夾“任務(wù)3-2”中，通過(guò)【新建文檔】對(duì)話框或者直接使用【新建文件】快捷菜單創(chuàng)建一個(gè)名稱為“0302.html”的網(wǎng)頁(yè)文檔。打開(kāi)網(wǎng)頁(yè)文檔0302.html，在“文檔”工具欄的“標(biāo)題”文本框直接輸入網(wǎng)頁(yè)標(biāo)題“任務(wù)3-2”。4鏈接外部樣式表文件main0302.css 切換到網(wǎng)頁(yè)文檔0302.html的【代碼視圖】，在標(biāo)簽“”的前面輸入兩行鏈接外部樣式表的代碼，如下所示：5對(duì)網(wǎng)頁(yè)的頁(yè)面進(jìn)行布局切換到“代碼視圖”，在網(wǎng)頁(yè)0302.html代碼

57、區(qū)域的與之間輸入表3-7所示的XHTML代碼。表3-7網(wǎng)頁(yè)0302.html布局結(jié)構(gòu)的XHTML代碼行號(hào)XHTML代碼 6在網(wǎng)頁(yè)中插入圖像和輸入文字在網(wǎng)頁(yè)0302.html代碼區(qū)域分別輸入文字、插入圖像、插入項(xiàng)目列表及其列表項(xiàng)。7保存網(wǎng)頁(yè)8瀏覽網(wǎng)頁(yè)效果【任務(wù)3-1-3】創(chuàng)建網(wǎng)頁(yè)0303.html【任務(wù)描述】任務(wù)3-3為考核項(xiàng)目，請(qǐng)獨(dú)立完成以下操作任務(wù)：參考任務(wù)3-1所創(chuàng)建網(wǎng)頁(yè)的右側(cè)結(jié)構(gòu)以及任務(wù)3-2所創(chuàng)建的網(wǎng)頁(yè)，創(chuàng)建如圖3-8所示的網(wǎng)頁(yè)。圖3-8網(wǎng)頁(yè)0303.html的瀏覽效果【實(shí)施過(guò)程】1新建文件夾，準(zhǔn)備圖像文件2建立樣式文件main0303.css，定義樣式3新建網(wǎng)頁(yè)文檔0303.html

58、4鏈接外部樣式表文件main0303.css 5對(duì)網(wǎng)頁(yè)的頁(yè)面進(jìn)行布局切換到“代碼視圖”，在網(wǎng)頁(yè)0303.html代碼區(qū)域的與之間輸入表3-10所示的XHTML代碼。表3-10網(wǎng)頁(yè)0303.html布局結(jié)構(gòu)的XHTML代碼行號(hào)XHTML代碼 6在網(wǎng)頁(yè)中插入圖像和輸入文字在網(wǎng)頁(yè)0303.html代碼區(qū)域插入圖像，輸入相應(yīng)的文字。7保存網(wǎng)頁(yè)8瀏覽網(wǎng)頁(yè)效果【任務(wù)3-1-4】創(chuàng)建網(wǎng)頁(yè)0304.html【任務(wù)描述】任務(wù)3-4為考核項(xiàng)目，請(qǐng)獨(dú)立完成以下操作任務(wù)：創(chuàng)建如圖3-12所示的網(wǎng)頁(yè)0304.html。圖3-12網(wǎng)頁(yè)0304.html的瀏覽效果【實(shí)施過(guò)程】1新建文件夾，準(zhǔn)備圖像文件2建立樣式文件main

59、0304.css，定義樣式3新建網(wǎng)頁(yè)文檔0304.html4鏈接外部樣式表文件main0304.css 5對(duì)網(wǎng)頁(yè)的頁(yè)面進(jìn)行布局切換到“代碼視圖”，在網(wǎng)頁(yè)0304.html代碼區(qū)域的與之間輸入表3-13所示的XHTML代碼。表3-13網(wǎng)頁(yè)0304.html布局結(jié)構(gòu)的XHTML代碼行號(hào)XHTML代碼 6在網(wǎng)頁(yè)中插入圖像和輸入文字在網(wǎng)頁(yè)0304.html代碼區(qū)域插入項(xiàng)目列表及其列表項(xiàng)，然后插入圖像，輸入相應(yīng)的文字。7保存網(wǎng)頁(yè)8瀏覽網(wǎng)頁(yè)效果【3.2操作實(shí)戰(zhàn)】【任務(wù)3-2-1】創(chuàng)建網(wǎng)頁(yè)index0301.html【任務(wù)描述】以“雁蕩山旅游”為主題，制作網(wǎng)頁(yè)index0301.html。（1）布局結(jié)構(gòu)該網(wǎng)

60、頁(yè)整體上分為兩個(gè)區(qū)塊，呈上下結(jié)構(gòu)，而上、下兩個(gè)區(qū)塊又分為左、右兩個(gè)部分。（2）網(wǎng)頁(yè)的主要元素圖像、文本、項(xiàng)目列表、導(dǎo)航欄等。（3）網(wǎng)頁(yè)色彩網(wǎng)頁(yè)前景色采用#666、#5f9700、#f60、#020、#005e8a、#78ad3c、#f90、#0073aa等多種不同的顏色，背景色主要通過(guò)背景圖像控制。網(wǎng)頁(yè)index0301.html的瀏覽效果如圖3-15所示。圖3-15網(wǎng)頁(yè)index0301.html的瀏覽效果【實(shí)施過(guò)程】1新建文件夾，準(zhǔn)備網(wǎng)頁(yè)素材2建立樣式文件，定義樣式3新建代碼片斷由于網(wǎng)頁(yè)index0301.html的主體布局結(jié)構(gòu)（main01區(qū)塊、m02_left區(qū)塊的上下兩個(gè)部分和m02