實(shí)戰(zhàn)Dreamweaver CC 網(wǎng)頁(yè)制作教程 第4版 課件 第7章 DIV+CSS布局網(wǎng)頁(yè)

學(xué)習(xí)目標(biāo)掌握Div的概念與插入Div的方法。掌握塊級(jí)元素與行內(nèi)元素的概念與區(qū)別。能夠?qū)崿F(xiàn)Div之間的嵌套。掌握盒模型的概念及組成。掌握Div的幾種定位方式。掌握DIV+CSS布局網(wǎng)頁(yè)的思路。熟練計(jì)算各Div的參數(shù)。能夠根據(jù)需要合理創(chuàng)建CSS規(guī)則。能夠熟練使用DIV+CSS布局網(wǎng)頁(yè)。7.1

Div元素的介紹與應(yīng)用7.2使用DIV+CSS布局網(wǎng)頁(yè)本章內(nèi)容7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

最終效果如圖所示。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（1）規(guī)劃站點(diǎn)新建文件夾“QingxinXiaozhu”，將素材文件夾“QingxinXiaozhu”中“images”和“others”文件夾拷貝到“QingxinXiaozhu”文件夾中。（2）定義站點(diǎn)在DreamweaverCC2015中，單擊菜單“站點(diǎn)”→“新建站點(diǎn)”命令，通過(guò)“站點(diǎn)設(shè)置對(duì)象”對(duì)話框定義站點(diǎn)，站點(diǎn)名稱為“清新小筑”，本地站點(diǎn)文件夾設(shè)置為QingxinXiaozhu文件夾。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（3）制作Banner部分1）新建網(wǎng)頁(yè)“index.html”，保存到站點(diǎn)文件夾下，打開網(wǎng)頁(yè)“index.html”，將網(wǎng)頁(yè)的標(biāo)題改為“菊花的澆水學(xué)問(wèn)”，切換到代碼視圖，將第一行代碼<!doctypehtml>改為<!doctypehtmlpublic>7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（3）制作Banner部分2）打開“CSS設(shè)計(jì)器”面板，在“源”窗格中點(diǎn)擊圖標(biāo)，選擇“創(chuàng)建新的CSS文件”，打開“創(chuàng)建新的CSS文件”對(duì)話框，點(diǎn)擊“瀏覽”按鈕，輸入文件名“cssfile”，選擇“others”文件夾，點(diǎn)擊“確定”，將文件保存，“添加為”選擇“鏈接”，點(diǎn)擊“確定”，“源”窗格如圖所示。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（3）制作Banner部分3）創(chuàng)建一個(gè)*標(biāo)簽選擇器規(guī)則。在“選擇器”窗格中添加選擇器“*”，并選中，如圖7-3所示。將“屬性”窗格切換到布局屬性，設(shè)置“margin”的值為0px，“padding”的值為0px。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（3）制作Banner部分4）將“屬性”窗格切換到邊框?qū)傩?，設(shè)置“border”的值為0px。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（3）制作Banner部分5）創(chuàng)建*標(biāo)簽選擇器規(guī)則的目的是將所有網(wǎng)頁(yè)元素的邊界（margin）、填充（padding）、邊框（border）設(shè)置為0px，方便以后的操作，*為配符，表示任意一個(gè)或多個(gè)字符，此時(shí)可以看到光標(biāo)緊貼網(wǎng)頁(yè)的上邊框和左邊框。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（3）制作Banner部分6）打開“插入”面板，點(diǎn)擊圖標(biāo)，打開“插入Div”對(duì)話框，在“插入”項(xiàng)中選擇“在插入點(diǎn)”，在ID中輸入“Box”。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（3）制作Banner部分7）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，如圖所示?？梢钥吹健斑x擇器類型”自動(dòng)選擇“ID”，“選擇器名稱”自動(dòng)設(shè)置為“#Box”，“規(guī)則定義”選擇“cssfile.css”。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（3）制作Banner部分8）點(diǎn)擊“確定”按鈕，打開“#Box的CSS規(guī)則定義”對(duì)話框。在“分類”中選擇“方框”項(xiàng)，設(shè)置“Width”為760px，設(shè)置“Height”為606px，取消“Margin”中的“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Top”為0、“Right”為auto，“Bottom”為0，“Left”為auto。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（3）制作Banner部分9）點(diǎn)擊“確定”按鈕，返回“插入Div”對(duì)話框，再次點(diǎn)擊“確定”按鈕，在頁(yè)面中插入ID為“Box”的Div，且Div居中顯示。10）將ID為“Box”的Div中默認(rèn)的文字刪除，將光標(biāo)定位在Div中，點(diǎn)擊“插入”面板中的“Div標(biāo)簽”，打開“插入Div”對(duì)話框，在“插入”項(xiàng)中選擇“在插入點(diǎn)”，在ID中輸入“Banner”。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（3）制作Banner部分11）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，“選擇器類型”選擇“ID”，“選擇器名稱”設(shè)置為“#Banner”，“規(guī)則定義”選擇“cssfile.css”，點(diǎn)擊“確定”按鈕，打開“#Banner的CSS規(guī)則定義”對(duì)話框。12）在“分類”中選擇“方框”項(xiàng)，設(shè)置“Width”為760px、“Height”為117px，兩次點(diǎn)擊“確定”按鈕，ID為“Banner”的Div在網(wǎng)頁(yè)中如圖所示。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（3）制作Banner部分13）將ID為“Banner”的Div中默認(rèn)的文字刪除，在其中插入圖像“banner.jpg”。（4）制作文章標(biāo)題部分1）點(diǎn)擊圖標(biāo)，打開“插入Div”對(duì)話框，在“插入”項(xiàng)中選擇在“在標(biāo)簽后”、“<divid=’Banner’>”，在“ID”中輸入“Title”。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（4）制作文章標(biāo)題部分2）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，保持默認(rèn)設(shè)置，點(diǎn)擊“確定”按鈕，打開“#Title的CSS規(guī)則定義”對(duì)話框。3）在“分類”中選擇“方框”項(xiàng)，設(shè)置“Width”為760px、“Height”為45px，在“分類”中選擇“背景”項(xiàng)，設(shè)置“Background-color”為“#e6f9c9”。4）在“分類”中選擇“類型”項(xiàng)，設(shè)置“Font-family”為“宋體”、“Font-size”為16px、“Line-height”為45px、“Font-weight”為“bold”、“Color”為“#2B7806”。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（4）制作文章標(biāo)題部分5）在“分類”中選擇“區(qū)塊”項(xiàng)，設(shè)置“Text-align”為“center”，兩次點(diǎn)擊“確定”按鈕。將默認(rèn)的文本刪除，輸入文字“菊花的澆水學(xué)問(wèn)”，文章標(biāo)題部分在網(wǎng)頁(yè)中的效果如圖所示。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（5）制作文章內(nèi)容部分1）點(diǎn)擊圖標(biāo)，打開“插入Div”對(duì)話框，在“插入”項(xiàng)中選擇在“在標(biāo)簽后”、“<divid=’Title’>”，在“ID”中輸入“Content”。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（5）制作文章內(nèi)容部分2）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，保持默認(rèn)設(shè)置，點(diǎn)擊“確定”按鈕，打開“#Content的CSS規(guī)則定義”對(duì)話框。3）在“分類”中選擇“方框”項(xiàng)，設(shè)置“Width”為720px、“Height”為390px，取消“Padding”中的“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Left”為20px、“Right”為20px。4）在“分類”中選擇“背景”項(xiàng)，設(shè)置“Background-color”為“#e6f9c9”。5）在“分類”中選擇“類型”項(xiàng)，設(shè)置“Font-family”為“宋體”、“Font-size”為13px、“Line-height”為25px、“Color”為“#2B7806”,兩次點(diǎn)擊“確定”按鈕。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（5）制作文章內(nèi)容部分6）將默認(rèn)的文本刪除，輸入文字素材中文章內(nèi)容，文章內(nèi)容部分在網(wǎng)頁(yè)中的效果如圖所示。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（6）制作版權(quán)部分2）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，保持默認(rèn)設(shè)置，點(diǎn)擊“確定”按鈕，打開“#Bottom的CSS規(guī)則定義”對(duì)話框。3）在“分類”中選擇“方框”項(xiàng)，設(shè)置“Width”為760px、“Height”為54px。4）在“分類”中選擇“背景”項(xiàng)，設(shè)置“Background-image”為“bottom.jpg”。5）在“分類”中選擇“類型”項(xiàng)，設(shè)置“Font-family”為“宋體”、“Font-size”為13px、“Line-height”為54px、“Color”為“#FFFFFF”。7.1

Div元素的介紹與應(yīng)用7.1.1“菊花的澆水學(xué)問(wèn)”網(wǎng)頁(yè)

（6）制作版權(quán)部分6）在“分類”中選擇“區(qū)塊”項(xiàng)，設(shè)置“Text-align”為“center”，兩次點(diǎn)擊“確定”按鈕。將默認(rèn)的文本刪除，輸入版權(quán)文字“版權(quán)所有：中國(guó)花卉設(shè)計(jì)有限公司電話：010-827272833”，在開頭插入版權(quán)符號(hào)。版權(quán)部分在網(wǎng)頁(yè)中的效果如圖所示。7.1.2新知解析

1．什么是Div

Div是網(wǎng)頁(yè)中的一個(gè)元素，。Div常用作容器，用于放置文本、圖像、段落等網(wǎng)頁(yè)元素，然后通過(guò)CSS規(guī)則對(duì)Div即<div></div>標(biāo)簽的位置等屬性進(jìn)行精確控制，實(shí)現(xiàn)網(wǎng)頁(yè)元素的排版。

2．塊級(jí)元素與行內(nèi)元素在HTML文檔中，根據(jù)文檔類型定義（DTD）將元素分為兩種類型：塊級(jí)元素和行級(jí)元素。

1）塊級(jí)元素塊級(jí)元素默認(rèn)占一行高度，在一行內(nèi)添加一個(gè)塊級(jí)元素后，無(wú)法再添加其他元素（float浮動(dòng)后除外），第二個(gè)塊級(jí)元素會(huì)在頁(yè)面中自動(dòng)換行顯示，塊級(jí)元素可嵌套塊級(jí)元素或行內(nèi)元素。7.1

Div元素的介紹與應(yīng)用

2）行內(nèi)元素行內(nèi)元素也叫內(nèi)聯(lián)元素、內(nèi)嵌元素，一行內(nèi)可以排列多個(gè)行內(nèi)元素，直到本行排滿自動(dòng)換行，其高度由元素的內(nèi)容決定，height屬性不起作用。常見(jiàn)行內(nèi)元素<a></a>、<span></span>標(biāo)簽。

3．Div+CSS布局網(wǎng)頁(yè)的優(yōu)勢(shì)

1）形式與內(nèi)容相分離

2）代碼簡(jiǎn)潔，提高頁(yè)面瀏覽速度

3）易于維護(hù)和改版7.1

Div元素的介紹與應(yīng)用7.1.2新知解析

4．Div的屬性與插入Div（1）Div的屬性如果要使用Div，只需要在代碼中插入<div></div>標(biāo)簽，在使用時(shí)與其他標(biāo)簽一樣，可以加入其它屬性，如id、class等，例如：

<divid=”id名稱”>網(wǎng)頁(yè)元素</div>

<divclass=”class名稱”>網(wǎng)頁(yè)元素</div>其中，id屬性可以為當(dāng)前Div指定一個(gè)id名稱，然后在CSS規(guī)則中定義該id名稱的ID選擇器規(guī)則來(lái)控制Div；7.1

Div元素的介紹與應(yīng)用7.1.2新知解析（2）插入Div在DreamweaverCC2015中可以非常方便地插入Div，在此，以插入一個(gè)ID為“d3”的Div為例進(jìn)行介紹，假如網(wǎng)頁(yè)中已經(jīng)存在ID為“d1”的Div和ID為“d2”的Div，且ID為“d2”的Div嵌套在ID為“d1”的Div中，代碼和CSS規(guī)則如下所示。7.1

Div元素的介紹與應(yīng)用<divid="d1">d1<divid="d2">d2</div></div>#d1{ width:500px; height:150px;}#d2{ width:400px; height:50px;}7.1.2新知解析操作如下：

1）點(diǎn)擊插入標(biāo)簽，打開“插入Div”對(duì)話框，可以通過(guò)ID選擇器規(guī)則來(lái)設(shè)置顯示的位置、樣式等，在“插入”中暫時(shí)選擇“在標(biāo)簽后”、“<divid=’d2’>”，在ID中輸入“d3”，即緊挨著<d2></d2>標(biāo)簽的后面插入<d3></d3>7.1

Div元素的介紹與應(yīng)用7.1.2新知解析7.1

Div元素的介紹與應(yīng)用2）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，如圖所示。可以看到“選擇器類型”自動(dòng)選擇“ID”，“選擇器名稱”自動(dòng)設(shè)置為“#d3”，“規(guī)則定義”選擇“僅限該文檔”。7.1.2新知解析

3）點(diǎn)擊“確定”按鈕，打開“#d3的CSS規(guī)則定義”對(duì)話框。在“類別”中選擇“方框”項(xiàng)，設(shè)置“Width”為300px、“Height”為30px，兩次點(diǎn)擊“確定”按鈕。窗口中插入一個(gè)id為“d3”的Div。7.1

Div元素的介紹與應(yīng)用

<divid="d1">d1

<divid="d2">d2</div>

<divid="d3">此處顯示id"d3"的內(nèi)容</div>

</div>7.1.2新知解析注意：“插入”中的設(shè)置決定插入Div的位置。具體如下：①選擇“在標(biāo)簽前”，再選擇某一標(biāo)簽，會(huì)在該標(biāo)簽的前面緊挨著插入Div標(biāo)簽。②“插入”選擇“在標(biāo)簽開始之后”，再選擇某一標(biāo)簽，會(huì)在該標(biāo)簽開始后位置，即開始標(biāo)簽的后面緊挨著插入Div標(biāo)簽。③“插入”選擇“在標(biāo)簽結(jié)束之前”，再選擇某一標(biāo)簽，會(huì)在該標(biāo)簽結(jié)束前的位置，即結(jié)束標(biāo)簽的前面緊挨著插入Div標(biāo)簽。④“插入”選擇“在插入點(diǎn)”，此時(shí)后面的文本框無(wú)法選擇，表示在光標(biāo)定位的位置插入Div標(biāo)簽。7.1

Div元素的介紹與應(yīng)用7.1.2新知解析

5．Div的嵌套為了使用DIV+CSS實(shí)現(xiàn)更為復(fù)雜的網(wǎng)頁(yè)布局排版，Div可以進(jìn)行多層嵌套，例如設(shè)置一個(gè)垂直布局的網(wǎng)頁(yè)，代碼如下。

<divid="top">頭部（top）</div>

<divid="main">

<divid="sider">側(cè)面（sider）</div>

<divid="container">主體內(nèi)容（container）</div>

</div>

<divid="bottom">底部（bottom）</div>7.1

Div元素的介紹與應(yīng)用7.1.2新知解析

ID為“sider”和“container”的Div嵌套在ID為“main”的Div中。布局效果如圖所示。在網(wǎng)頁(yè)中無(wú)論多么復(fù)雜的布局，都可以通過(guò)Div之間的并列、嵌套來(lái)實(shí)現(xiàn)。7.1

Div元素的介紹與應(yīng)用7.1.2新知解析

6．CSS中的元素定位方式在CSS中元素有三種定位方式：普通流、定位（position）和浮動(dòng)（float）。（1）普通流除非專門指定，否則所有元素都在普通流中定位，也就是說(shuō)，普通流中元素的位置由元素在(X)HTML中的位置決定。此時(shí)，塊級(jí)元素從上到下一個(gè)接一個(gè)地排列，注意一行只能排一個(gè)，元素之間的垂直距離是由元素的垂直邊界計(jì)算出來(lái)。行內(nèi)元素在一行中水平排列，一行可以排列多個(gè)，可以使用水平填充、邊框和邊界調(diào)整它們的間距。但是，垂直填充、邊框和邊界不影響行內(nèi)元素的高度。7.1

Div元素的介紹與應(yīng)用7.1.2新知解析（2）定位（position）定位（position）有靜態(tài)定位、相對(duì)定位、絕對(duì)定位和固定定位四種，可以在“CSS規(guī)則定義”對(duì)話框中和“屬性”窗格中設(shè)置，如圖所示。7.1

Div元素的介紹與應(yīng)用7.1.2新知解析

1）靜態(tài)定位“Position”為static，元素作為文檔流的一部分，即塊級(jí)元素從上到下依次排列，元素之間的垂直距離由上、下的margin值決定。行內(nèi)元素在一行中水平排列?？梢允褂盟教畛洹⑦吙蚝瓦吔缯{(diào)整它們的間距。但是，垂直填充、邊框和邊界不影響行內(nèi)元素的高度。7.1

Div元素的介紹與應(yīng)用7.1.2新知解析

2）相對(duì)定位

Position的值為“relative”，元素被看作普通流的一部分，它將出現(xiàn)在它所在的位置上，如果設(shè)置了top和left的值，元素的位置相對(duì)于它在普通流中的位置進(jìn)行移動(dòng)。使用相對(duì)定位的元素不管它是否進(jìn)行移動(dòng)，元素仍要占據(jù)它原來(lái)的位置。移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他的元素。如圖所示。如果將top設(shè)置為20px，那么元素將在原位置頂部下方20px的地方。如果left設(shè)置為30px，那么會(huì)在元素左邊30p地方，也就是將元素向右移動(dòng)，代碼如下所示。7.1

Div元素的介紹與應(yīng)用7.1.2新知解析

#box_relative{

position:relative;

left:30px;

top:20px;

}注意：使用相對(duì)定位的元素不管它是否進(jìn)行移動(dòng)，元素仍要占據(jù)它原來(lái)的位置。移動(dòng)元素可能會(huì)導(dǎo)致它覆蓋其他的元素。7.1

Div元素的介紹與應(yīng)用7.1.2新知解析

3）絕對(duì)定位

Position的值為“absolute”，絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，就像漂浮在網(wǎng)頁(yè)上一樣，所以它可能覆蓋頁(yè)面上的其他元素，可以通過(guò)Z-index屬性可以設(shè)置元素的堆放次序。其用于定位的top和left的值相對(duì)于已經(jīng)定位的父元素，如果沒(méi)有已經(jīng)定位的父元素，那么它的位置就相對(duì)于整個(gè)網(wǎng)頁(yè)，即<body>。如圖所示，元素2沒(méi)有父元素，因此定位的top和left的值是相對(duì)于<body>而言的，代碼如下所示。7.1

Div元素的介紹與應(yīng)用

#box_absolute{

position:absolute;

left:30px;

top:20px;}7.1.2新知解析

4）固定定位

Position的值為“fixed”，其用于定位的top和left的值永遠(yuǎn)相對(duì)于瀏覽器窗口，而無(wú)論其有無(wú)父元素。當(dāng)瀏覽器的內(nèi)容（有滾動(dòng)條的情況）向上移動(dòng)時(shí)，采用這種定位的DIV不移動(dòng)，其余的特點(diǎn)類似于絕對(duì)定位。7.1

Div元素的介紹與應(yīng)用7.1.2新知解析（3）浮動(dòng)浮動(dòng)使用float屬性設(shè)置，其值可以為left、right和none。可以在“CSS規(guī)則定義”對(duì)話元素中和“屬性”窗格中設(shè)置，如圖所示，浮動(dòng)的元素可以左右移動(dòng)，直到它的外邊元素邊緣碰到包含元素或另一個(gè)浮動(dòng)元素的邊緣，浮動(dòng)的元素脫離普通流。7.1

Div元素的介紹與應(yīng)用7.1.2新知解析如果浮動(dòng)元素的包含元素太窄，無(wú)法容納水平排列的浮動(dòng)元素，那么其他浮動(dòng)元素向下移動(dòng)，直到有足夠多的空間。如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能會(huì)被其他浮動(dòng)元素卡住。例如下圖所示，當(dāng)把元素1向右浮動(dòng)時(shí)，它脫離文檔流并且向右移動(dòng)，直到它的右邊緣碰到包含元素的右邊緣。7.1

Div元素的介紹與應(yīng)用7.1.2新知解析例如下圖7-38所示，當(dāng)元素1向左浮動(dòng)時(shí)，它脫離文檔流并且向左移動(dòng)，直到它的左邊緣碰到包含元素的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了元素2，使元素2從視圖中消失。如果把三個(gè)元素都向左移動(dòng)，那么元素1向左浮動(dòng)直到碰到包含元素，另外兩個(gè)元素向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)元素。7.1

Div元素的介紹與應(yīng)用7.1.2新知解析如下圖7-39所示，如果包含元素太窄，無(wú)法容納水平排列的三個(gè)浮動(dòng)元素，那么有的浮動(dòng)元素會(huì)向下移動(dòng)，直到有足夠的空間。如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”。7.1

Div元素的介紹與應(yīng)用7.1.2新知解析

7．盒模型（1）盒模型的組成一個(gè)盒模型是由邊界（margin，也稱外邊距）、內(nèi)容（content）、填充（padding，也稱內(nèi)邊距）和邊框（border）四個(gè)部分組成，如圖所示。7.1

Div元素的介紹與應(yīng)用7.1.2新知解析（2）盒模型的寬度和高度在CSS規(guī)則中width屬性值指的是盒模型內(nèi)容的寬度；height屬性值指的是盒模型內(nèi)容的高度。在網(wǎng)頁(yè)中，盒模型的實(shí)際占居的寬度為由左邊界+左邊框+左填充+內(nèi)容+右填充+右邊框+右邊界，占居的實(shí)際高度為由上邊界+上邊框+上填充+內(nèi)容+下填充+下邊框+下邊界。7.1

Div元素的介紹與應(yīng)用7.1.2新知解析（3）邊界、邊框、填充、內(nèi)容

1）邊界邊界（margin）環(huán)繞在元素的四周，如果margin的值為0，則margin邊界與border邊框重合。邊界分為上（margin-top）、右（margin-right）、下（margin-bottom）和左（margin-left）四個(gè)部分，可以統(tǒng)一設(shè)置，也可以分別設(shè)置，也可以只設(shè)置其中的一部分。可以直接在“屬性”窗格中設(shè)置7.1

Div元素的介紹與應(yīng)用7.1.2新知解析統(tǒng)一設(shè)置產(chǎn)生的代碼如下所示。

margin:30px;分別設(shè)置產(chǎn)生的代碼如下所示。

margin-top:5px;

margin-right:10px;

margin-bottom:15px;

margin-left:20px;或margin:5px10px15px20px;7.1

Div元素的介紹與應(yīng)用7.1.2新知解析

2）填充填充（padding）位于元素四周的內(nèi)側(cè)，如果padding的值為0，則padding填充與border邊框重合。填充分為上（padding-top）、右（padding-right）、下（padding-bottom）、左（padding-left）四個(gè)部分，可以統(tǒng)一設(shè)置，也可以分別設(shè)置，也可以只設(shè)置其中的一部分。可以直接在“屬性”窗格中設(shè)置，也可以在“CSS規(guī)則定義”對(duì)話框中設(shè)置。7.1

Div元素的介紹與應(yīng)用7.1.2新知解析

3）邊框邊框（border）環(huán)繞在元素的四周，如果border的值為0，則border與padding重合。邊框分為上（border-top）、右（borderright）、下（border-bottom）、左（border-left）四個(gè)部分，可以統(tǒng)一設(shè)置，也可以分別設(shè)置，也可以只設(shè)置其中的一部分?？梢灾苯釉凇皩傩浴贝案裰性O(shè)置，也可以在“CSS規(guī)則定義”對(duì)話框中設(shè)置。7.1

Div元素的介紹與應(yīng)用7.1.2新知解析統(tǒng)一設(shè)置產(chǎn)生的代碼如下所示

border:1pxdotted#F50B0E;分別設(shè)置產(chǎn)生的代碼如下所示。

border-top:1pxdotted#F50B0E;

border-right:2pxsolid#F50B0E;

border-bottom:3pxgroove#F50B0E;

border-left:4pxdotted#F50B0E;7.1

Div元素的介紹與應(yīng)用

4）內(nèi)容是盒模型放置文本、圖像等元素的部分。7.1.2新知解析7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用最終效果如圖所示。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（1）規(guī)劃站點(diǎn)新建文件夾“Perfume”，將素材文件夾“Perfume”中“images”和“others”文件夾拷貝到“Perfume”文件夾中。（2）定義站點(diǎn)在DreamweaverCC2015中，單擊菜單“站點(diǎn)”→“新建站點(diǎn)”命令，通過(guò)“站點(diǎn)設(shè)置對(duì)象”對(duì)話框定義站點(diǎn)，站點(diǎn)名稱為“香水網(wǎng)”，本地站點(diǎn)文件夾設(shè)置為Perfume文件夾。（3）制作Banner部分1）新建網(wǎng)頁(yè)“index.html”，保存到站點(diǎn)文件夾下，打開網(wǎng)頁(yè)“index.html”，將網(wǎng)頁(yè)的標(biāo)題改為“香水使用指南”，切換到代碼視圖，將第一行代碼<!doctypehtml>改為<!doctypehtmlpublic>。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（3）制作Banner部分2）創(chuàng)建一個(gè)“*”標(biāo)簽選擇器規(guī)則。打開“CSS設(shè)計(jì)器”面板，在“源”窗格中點(diǎn)擊圖標(biāo)，選擇“創(chuàng)建新的CSS文件”，打開“創(chuàng)建新的CSS文件”對(duì)話框，點(diǎn)擊“瀏覽”按鈕，輸入文件名“cssfile”，選擇“others”文件夾，點(diǎn)擊“確定”，將文件保存，“添加為”選擇“鏈接”，點(diǎn)擊“確定”，“源”窗格如圖所示。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（3）制作Banner部分3）添加選擇器。在“選擇器”窗格中添加選擇器“*”，并選中，如圖7-48所示。將“屬性”窗格切換到布局屬性，設(shè)置“margin”的值為0px，“padding”的值為0px.7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（3）制作Banner部分4）將“屬性”窗格切換到邊框?qū)傩?，設(shè)置“border”的值為0px。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（3）制作Banner部分5）創(chuàng)建標(biāo)簽選擇器規(guī)則“*”的目的是將所有網(wǎng)頁(yè)元素的邊界（margin）、填充（padding）、邊框（border）設(shè)置為0px，方便以后的操作，此時(shí)可以看到光標(biāo)緊貼網(wǎng)頁(yè)的上邊框和左邊框。6）打開“插入”面板，點(diǎn)擊圖標(biāo)，打開“插入Div”對(duì)話框，在“插入”項(xiàng)中選擇“在插入點(diǎn)”，在ID中輸入“Box”。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（3）制作Banner部分7）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，如圖7-53所示?？梢钥吹健斑x擇器類型”選擇“ID”，“選擇器名稱”設(shè)置為“#Box”，“規(guī)則定義”需要選擇“cssfile.css”。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（3）制作Banner部分8）點(diǎn)擊“確定”按鈕，打開“#Box的CSS規(guī)則定義”對(duì)話框。在“分類”中選擇“方框”項(xiàng)，設(shè)置“Width”為800px，設(shè)置“Height”為717px，取消“Margin”中的“全部相同”的對(duì)勾，設(shè)置“Top”為0px、“Right”為auto，“Bottom”為0px，“Left”為auto。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（3）制作Banner部分9）在“分類”中選擇“背景”項(xiàng)，設(shè)置“Background-color”為“#DDDDDD”，點(diǎn)擊“確定”按鈕，返回“插入Div”對(duì)話框，再次點(diǎn)擊“確定”按鈕，在頁(yè)面中插入ID為“Box”的Div，且Div居中顯示。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（3）制作Banner部分10）將Div中默認(rèn)的文字刪除，將光標(biāo)定位在Div中，點(diǎn)擊“插入”面板中的“Div標(biāo)簽”，打開“插入Div”對(duì)話框，在“插入”項(xiàng)中選擇“在插入點(diǎn)”，在ID中輸入“Banner”。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（3）制作Banner部分11）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，“選擇器類型”選擇“ID”，“選擇器名稱”設(shè)置為“#Banner”，“規(guī)則定義”選擇“cssfile.css”，點(diǎn)擊“確定”按鈕，打開“#Banner的CSS規(guī)則定義”對(duì)話框。12）在“分類”中選擇“方框”項(xiàng)，設(shè)置“Width”為666px、“Height”為265px，取消“Margin”中的“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Top”為0px、“Right”為67px，“Bottom”為0px，“Left”為67px，兩次點(diǎn)擊“確定”按鈕，ID為“Banner”的Div在網(wǎng)頁(yè)中如圖所示。13）將Div中默認(rèn)的文字刪除，在其中插入圖像“04_03.jpg”。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（4）制作標(biāo)題部分1）點(diǎn)擊圖標(biāo)，打開“插入Div”對(duì)話框，在“插入”項(xiàng)中選擇在“在標(biāo)簽后”、“<divid=’Banner’>”，在“ID”中輸入“Main”。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（4）制作標(biāo)題部分2）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，“選擇器類型”選擇“ID”，“選擇器名稱”設(shè)置為“#Main”，“規(guī)則定義”選擇“cssfile.css”，點(diǎn)擊“確定”按鈕，打開“#Main的CSS規(guī)則定義”對(duì)話框。3）在“分類”中選擇“方框”項(xiàng)，設(shè)置“Width”為666px、“Height”為400px，取消“Margin”中的“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Top”為0px、“Right”為67px，“Bottom”為0px，“Left”為67px。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（4）制作標(biāo)題部分4）在“分類”中選擇“背景”項(xiàng)，設(shè)置“Background-color”為“#FFFFFF”，兩次點(diǎn)擊“確定”按鈕，ID為“Main”的Div在網(wǎng)頁(yè)中如圖所示。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（4）制作標(biāo)題部分5）將Div中默認(rèn)的文字刪除，插入Div，打開“插入Div”對(duì)話框，在“插入”項(xiàng)中選擇在“在標(biāo)簽開始后”、“<divid=’Main’>”，在“ID”中輸入“Title”。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（4）制作標(biāo)題部分6）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，保持默認(rèn)設(shè)置，點(diǎn)擊“確定”按鈕，打開“#Main的CSS規(guī)則定義”對(duì)話框。7）在“分類”中選擇“方框”項(xiàng)，設(shè)置“Width”為554px、“Height”為28px，取消“Margin”中的“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Left”為111px。8）在“分類”中選擇“邊框”項(xiàng)，在“Style”中取消“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Left”為“dashed”；取消“Width”中的“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Left”為1px；在“Color”中取消“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Left”為“#666666”。9）在“分類”中選擇“背景”項(xiàng)，設(shè)置“Background-color”為“#DDDDDD”，兩次點(diǎn)擊“確定”按鈕。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（4）制作標(biāo)題部分10）在“分類”中選擇“類型”項(xiàng)，設(shè)置“Font-family”為“宋體”、“Font-size”為16px、“Line-height”為28px、“Font-weight”為“bold”，兩次點(diǎn)擊“確定”按鈕，在Div中輸入文字“香水使用指南”，開頭空三個(gè)全角空格，在網(wǎng)頁(yè)中的效果如圖所示。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（5）制作正文部分1）點(diǎn)擊圖標(biāo)，打開“插入Div”對(duì)話框，在“插入”項(xiàng)中選擇在“在標(biāo)簽后”、“<divid=’Title’>”，在“ID”中輸入“Content”。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（5）制作正文部分2）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，保持默認(rèn)設(shè)置，點(diǎn)擊“確定”按鈕，打開“#Content的CSS規(guī)則定義”對(duì)話框。3）在“分類”中選擇“方框”項(xiàng)，設(shè)置“Width”為534px、“Height”為331px，取消“Padding”中的“全部相同”的復(fù)選框?qū)矗O(shè)置“Top”為30px、“Right”為10px，“Bottom”為10px，“Left”為10px。取消“Margin”中的“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Left”為111px。4）在“分類”中選擇“類型”項(xiàng)，設(shè)置“Font-family”為“宋體”、“Font-size”為13px、“Line-height”為21px、“Color”為“#666666”。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（5）制作正文部分5）在“分類”中選擇“邊框”項(xiàng)，在“Style”中取消“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Left”為“dashed”。取消“Width”中的“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Left”為1px，在“Color”中取消“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Left”為“#666666”，兩次點(diǎn)擊“確定”按鈕。將默認(rèn)的文本刪除，輸入文字素材中文章內(nèi)容部分，內(nèi)容部分在網(wǎng)頁(yè)中的效果如圖所示。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（6）制作版權(quán)部分1）點(diǎn)擊“插入”面板中的“Div標(biāo)簽”，打開“插入Div”對(duì)話框，在“插入”項(xiàng)中選擇在“在標(biāo)簽后”、“<divid=’Main’>”，在ID中輸入“Bottom-top”。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（6）制作版權(quán)部分2）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，設(shè)置保持默認(rèn)，點(diǎn)擊“確定”按鈕，打開“#Bottom-top的CSS規(guī)則定義”對(duì)話框。3）在“分類”中選擇“方框”項(xiàng)，設(shè)置“Width”為666px、“Height”為25px，取消“Margin”中“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Top”為0px、“Right”為67px，“Bottom”為0px，“Left”為67px。4）在“分類”中選擇“背景”項(xiàng)，設(shè)置“Background-color”為“#FF940A”，兩次點(diǎn)擊“確定”按鈕，將Div中默認(rèn)的文字刪除，ID為“Bottom-top”的Div在網(wǎng)頁(yè)中如圖所示。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（6）制作版權(quán)部分5）點(diǎn)擊“插入”面板中的“Div標(biāo)簽”，打開“插入Div”對(duì)話框，在“插入”項(xiàng)中選擇在“在標(biāo)簽后”、“<divid=’Bottom-top’>”，在ID中輸入“Bottom-bm”。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（6）制作版權(quán)部分6）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，設(shè)置保持默認(rèn)，點(diǎn)擊“確定”按鈕，打開“#Bottom-bm的CSS規(guī)則定義”對(duì)話框。7）在“分類”中選擇“方框”項(xiàng)，設(shè)置“Width”為666px、“Height”為25px，取消“Margin”中的“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Top”為0px、“Right”為67px，“Bottom”為0px，“Left”為67px。8）在“分類”中選擇“背景”項(xiàng)，設(shè)置“Background-color”為“#333333”。9）在“分類”中選擇“類型”項(xiàng)，設(shè)置“Font-family”為“宋體”、“Font-size”為13px、“Line-height”為25px、“Color”為“#EEEEEE”。7.1.3實(shí)戰(zhàn)演練：“香使用指南”網(wǎng)頁(yè)

7.1

Div元素的介紹與應(yīng)用（6）制作版權(quán)部分10）在“分類”中選擇“區(qū)塊”項(xiàng)，設(shè)置“Text-align”為“center”，兩次點(diǎn)擊“確定”按鈕，將Div中默認(rèn)的文字刪除，輸入文字“版權(quán)所有香水網(wǎng)站電話，在開頭插入版權(quán)符號(hào)。版權(quán)部分在網(wǎng)頁(yè)中如圖所示。7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)最終效果如圖所示。7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（1）規(guī)劃站點(diǎn)新建文件夾“JingDian”，將素材文件夾“JingDian”中的“images”和“others”文件夾拷貝到“JingDian”文件夾中。（2）定義站點(diǎn)在DreamweaverCC2015中，單擊菜單“站點(diǎn)”→“新建站點(diǎn)”命令，通過(guò)“站點(diǎn)設(shè)置對(duì)象”對(duì)話框定義站點(diǎn)，站點(diǎn)名稱為“經(jīng)典回顧”，本地站點(diǎn)文件夾設(shè)置為JingDian文件夾。7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（3）制作Banner部分1）新建網(wǎng)頁(yè)“index.html”，保存到站點(diǎn)文件夾下，打開網(wǎng)頁(yè)“index.html”，將網(wǎng)頁(yè)的標(biāo)題改為“經(jīng)典回顧”，切換到代碼視圖，將第一行代碼<!doctypehtml>改為<!doctypehtmlpublic>。2）打開“CSS設(shè)計(jì)器”面板，在“源”窗格中進(jìn)行操作，創(chuàng)建新的CSS文件，文件名為“cssfile”，將文件保存“others”文件夾，并以“鏈接”附加。7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（3）制作Banner部分3）創(chuàng)建*標(biāo)簽選擇器規(guī)則。在“選擇器”窗格中添加選擇器“*”，并選中，將“屬性”窗格切換到布局屬性，設(shè)置“margin”的值為0px，“padding”的值為0px。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（3）制作Banner部分4）將“屬性”窗格切換到邊框?qū)傩?，設(shè)置“border”的值為0px。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（3）制作Banner部分5）打開“插入”面板，點(diǎn)擊圖標(biāo)，打開“插入Div”對(duì)話框，在“插入”項(xiàng)中選擇“在插入點(diǎn)”，在ID中輸入“Box”。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（3）制作Banner部分6）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，“選擇器類型”選擇“ID”，“選擇器名稱”設(shè)置為“#Box”，“規(guī)則定義”選擇“cssfile.css”。7）點(diǎn)擊“確定”按鈕，打開“#Box的CSS規(guī)則定義”對(duì)話框。在“分類”中選擇“方框”項(xiàng)，設(shè)置“Width”為700px，設(shè)置“Height”為562px，取消“Margin”中的“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Top”為0px、“Right”為auto，“Bottom”為0px，“Left”為auto。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（3）制作Banner部分8）點(diǎn)擊“確定”按鈕，返回“插入Div”對(duì)話框，再次點(diǎn)擊“確定”按鈕，在頁(yè)面中插入ID為“Box”的Div，且Div居中顯示。9）將Div中默認(rèn)的文字刪除，點(diǎn)擊圖標(biāo)，打開“插入Div”對(duì)話框，在“插入”項(xiàng)中選擇“在標(biāo)簽開始后”、“<divid=’Box’>”，在ID中輸入“Top”。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（3）制作Banner部分10）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，默認(rèn)設(shè)置，點(diǎn)擊“確定”按鈕，打開“#Top的CSS規(guī)則定義”對(duì)話框。11）在“方框”中設(shè)置“Width”為700px、“Height”為117x。兩次點(diǎn)擊“確定”按鈕，插入Div。將默認(rèn)的文字刪除，光標(biāo)定位于ID為“Top”的Div，插入圖像“banner.jpg”Banner部分在網(wǎng)頁(yè)中的效果如圖所示。。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（4）制作導(dǎo)航部分1）點(diǎn)擊圖標(biāo)，打開“插入Div”對(duì)話框，在“插入”項(xiàng)中選擇“在標(biāo)簽結(jié)束之前”、“<divid=’Top’>”，在“ID”中輸入“Nav”。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“似是故人來(lái)--梅艷芳”網(wǎng)頁(yè)（4）制作導(dǎo)航部分2）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，默認(rèn)設(shè)置，點(diǎn)擊“確定”按鈕，打開“#Nav的CSS規(guī)則定義”對(duì)話框。3）在“方框”中設(shè)置“Width”為700px、“Height”為24x。在“分類”中選擇“背景”項(xiàng)，設(shè)置“Background-color”為“#555555”。在“分類”中選擇“區(qū)塊”項(xiàng)，設(shè)置“Text-align”為“center”，兩次點(diǎn)擊“確定”按鈕，插入Div。4）4）將默認(rèn)的文字刪除，切換到代碼視圖，將光標(biāo)定位在<divid=“Nav”></div>標(biāo)簽中間，點(diǎn)擊菜單“插入”→“項(xiàng)目列表”命令，插入列表，再點(diǎn)擊菜單“插入”→“列表項(xiàng)”命令，插入列表。將列表項(xiàng)標(biāo)簽<li></li>復(fù)制6次，并在每個(gè)<li></li>標(biāo)簽中輸入文字素材中的對(duì)應(yīng)導(dǎo)航文字。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（4）制作導(dǎo)航部分5）切換至設(shè)計(jì)視圖，在“選擇器”窗格中添加標(biāo)簽選擇器“ulli”，將“屬性”窗格切換至布局屬性，設(shè)置“Width”為75px、“Height”為24px，設(shè)置左邊界為20px，設(shè)置“float”為left，將“屬性”窗格切換至文本屬性，設(shè)置“l(fā)ine-height”為24px，設(shè)置“l(fā)ist-style-type”為none。6）為每一個(gè)導(dǎo)航項(xiàng)設(shè)置空超鏈接，在“選擇器”窗格中添加偽錨記選擇器“a.nav:link”，將“屬性”窗格切換至文本屬性，設(shè)置“font-family”為宋體、“font-size”為13px、“color”為#1E1E1、“font-weight”為“bold”、“text-decoration”為“none”。7）在“選擇器”窗格中添加偽錨記選擇器“a.nav:visited”，將“屬性”窗格切換至文本屬性，設(shè)置“font-family”為宋體、“font-size”為13px、“color”為#E1E1E1、“font-weight”為“bold”、“text-decoration”為“none”。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（4）制作導(dǎo)航部分8）在“選擇器”窗格中添加偽錨記選擇器“a.nav:hover”，將“屬性”窗格切換至文本屬性，設(shè)置“font-family”為宋體、“font-size”為13px、“color”為#FF0004、“font-weight”為“bold”、“text-decoration”為“none”。9）在“選擇器”窗格中添加偽錨記選擇器“a.nav:acitve”，將“屬性”窗格切換至文本屬性，設(shè)置“font-family”為宋體、“font-size”為13px、“color”為#FF0004、“font-weight”為“bold”、“text-decoration”為“underline”。10）將“屬性”面板切換至CSS屬性狀態(tài)，選擇“網(wǎng)站首頁(yè)”，在“目標(biāo)規(guī)則”中選擇“nav”，應(yīng)用CSS規(guī)則，同樣的方法為“篇章目錄”、“名家評(píng)價(jià)”、“后世影響”、“經(jīng)典篇章”、“成書過(guò)程”和“聯(lián)系我們”應(yīng)用“nav”CSS規(guī)則。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（5）制作網(wǎng)頁(yè)左側(cè)標(biāo)題部分1）插入一個(gè)Div，設(shè)置如圖所示，在“插入”項(xiàng)中選擇“在標(biāo)簽后”、“<divid=’Top’>”，在“ID”中輸入“Main”。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（5）制作網(wǎng)頁(yè)左側(cè)標(biāo)題部分2）為ID為“Main”的Div創(chuàng)建ID選擇器規(guī)則，并在“方框”中設(shè)置“Width”為700px、“Height”為400px。3）將默認(rèn)的文字刪除，插入一個(gè)Div，設(shè)置如圖7-78所示，在“插入”項(xiàng)中選擇“在標(biāo)簽開始后”、“<divid=’Main’>”，在“ID”中輸入“Main-left”。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“似是故人來(lái)--梅艷芳”網(wǎng)頁(yè)（5）制作網(wǎng)頁(yè)左側(cè)標(biāo)題部分4）為ID為“Main-left”的Div創(chuàng)建ID選擇器規(guī)則，并在“方框”中設(shè)置“Width”為500px、“Height”為400px、“Float”為left，在“分類”中選擇“背景”項(xiàng)，設(shè)置“Background-color”為“#d6d6d6”。5）將默認(rèn)的文字刪除，插入一個(gè)Div，設(shè)置如圖7-79所示，在“插入”項(xiàng)中選擇“在標(biāo)簽開始后”、“<divid=’Main-left’>”，在“ID”中輸入“Title”。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（5）制作網(wǎng)頁(yè)左側(cè)標(biāo)題部分6）為ID為“Title”的Div創(chuàng)建ID選擇器規(guī)則，并在“方框”中設(shè)置“Width”為499px、“Height”為45px，在“類型”中選擇“類型”項(xiàng)設(shè)置“font-family”為宋體、“font-size”為16px、“color”為#000000、“l(fā)ine-height”為45px、“font-weight”為bold。7）在“分類”中選擇“邊框”項(xiàng)，取消“Style”中“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Right”為“solid”。取消“Width”中的“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Right”為1px，取消“Color”中“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Right”為“#3E3D3D”。8）在“分類”中選擇“區(qū)塊”項(xiàng)，設(shè)置“Text-align”為“center”。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（5）制作網(wǎng)頁(yè)左側(cè)標(biāo)題部分9）將默認(rèn)的文字刪除，輸入文字素材中的標(biāo)題文字“論語(yǔ)（中國(guó)儒家經(jīng)典）”，左側(cè)標(biāo)題部分在網(wǎng)頁(yè)中的效果如圖所示。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（6）制作左側(cè)內(nèi)容部分1）插入一個(gè)Div，設(shè)置如圖所示，在“插入”項(xiàng)中選擇“在標(biāo)簽后”、“<divid=’Title’>”，在“ID”中輸入“Content”。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（6）制作左側(cè)內(nèi)容部分2）為ID為“Content”的Div創(chuàng)建ID選擇器規(guī)則，并在“方框”中設(shè)置“Width”為479px、“Height”為345px，取消“Padding”中的“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Right”為10px，“Bottom”為10px，“Left”為10px。3）在“類型”中選擇“類型”項(xiàng)設(shè)置“font-family”為宋體、“font-size”為13px、“color”為#000000、“l(fā)ine-height”為25px。4）在“分類”中選擇“邊框”項(xiàng)，取消“Style”中“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Right”為“solid”。取消“Width”中的“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Right”為1px，取消“Color”中“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Right”為“#3E3D3D”。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（6）制作左側(cè)內(nèi)容部分5）將默認(rèn)的文字刪除，輸入文字素材中的內(nèi)容文字，左側(cè)內(nèi)容部分在網(wǎng)頁(yè)中的效果如圖所示。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（7）制作右側(cè)“人物介紹”部分1）插入一個(gè)Div，設(shè)置如圖7-83所示，在“插入”項(xiàng)中選擇“在標(biāo)簽后”、“<divid=’Main-left’>”，在“ID”中輸入“Main-right”。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（7）制作右側(cè)“人物介紹”部分2）為ID為“Main-right”的Div創(chuàng)建ID選擇器規(guī)則，并在“方框”中設(shè)置“Width”為180px、“Height”為380px，勾選“Padding”中的“全部相同”復(fù)選框，設(shè)置“Top”為10px，設(shè)置“Float”為left。3）在“分類”中選擇“背景”項(xiàng)，設(shè)置“Background-color”為“#8C8080”。在“類型”中選擇“類型”項(xiàng)設(shè)置“font-family”為宋體、“font-size”為13px、“color”為#EEEEEE、“l(fā)ine-height”為25px。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（7）制作右側(cè)“人物介紹”部分4）將默認(rèn)的文字刪除，輸入文字素材中的人物介紹文字，選擇“人物介紹”，設(shè)置為粗體，右側(cè)人物介紹部分在網(wǎng)頁(yè)中的效果如圖所示。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（8）制作版權(quán)部分1）插入一個(gè)Div，設(shè)置如圖所示，在“插入”項(xiàng)中選擇“在標(biāo)簽后”、“<divid=’Main’>”，在“ID”中輸入“Bottom”。

7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.1案例制作：“經(jīng)典回顧”網(wǎng)頁(yè)（8）制作版權(quán)部分2）為ID為“Bottom”的Div創(chuàng)建ID選擇器規(guī)則，并在“方框”中設(shè)置“Width”為700px、“Height”為45px，在“分類”中選擇“背景”項(xiàng)，設(shè)置“Background-image”為“Bottom.jpg”。3）在“類型”中選擇“類型”項(xiàng)設(shè)置“font-family”為宋體、“font-size”為13px、“color”為#DDDDDD、“l(fā)ine-height”為45px。在“分類”中選擇“區(qū)塊”項(xiàng)，設(shè)置“Text-align”為“center”。4）將默認(rèn)的文字刪除，輸入文字素材中的版權(quán)文字，在開頭部分插入版權(quán)符號(hào)。

7.2.2新知解析

1．DIV+CSS布局網(wǎng)頁(yè)的思路（1）網(wǎng)頁(yè)效果圖分析“回顧經(jīng)典”網(wǎng)頁(yè)是一個(gè)典型的“一列三行”的布局形式。因此將其分成三個(gè)部分：頁(yè)面頂部、主體部分（主要內(nèi)容、側(cè)邊欄）和頁(yè)面底部。7.2使用DIV+CSS布局網(wǎng)頁(yè)（2）網(wǎng)頁(yè)效果圖分析與布局規(guī)劃網(wǎng)頁(yè)效果圖通常是由網(wǎng)頁(yè)美工人員完成，“回顧經(jīng)典”網(wǎng)頁(yè)較為簡(jiǎn)單，在規(guī)則時(shí)需要考慮今后改版可能遇到的情況以及其它頁(yè)面的需要，盡量做到“代碼”重用，盡可能地增強(qiáng)靈活性與適應(yīng)性，將網(wǎng)頁(yè)劃分為三個(gè)區(qū)域，頁(yè)面頂部（Top）、主體部分（Main）和頁(yè)面底部（Bottom）。其中主體部分（Main）又分為主要內(nèi)容（Main-left）和側(cè)邊欄（Main-right），各部分的英文即Div相應(yīng)的ID。7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.2新知解析（2）切割及導(dǎo)出圖片經(jīng)過(guò)上面的分析規(guī)劃，對(duì)頁(yè)面的構(gòu)成已經(jīng)非常清晰了，接下來(lái)開始切割圖片，為頁(yè)面提供必要“原料”。因?yàn)椤盎仡櫧?jīng)典”網(wǎng)頁(yè)比較簡(jiǎn)單，只需要切出兩張圖Banner.jpg和Bottom.jpg做背景，其它帶顏色區(qū)域可以通過(guò)設(shè)置背景顏色來(lái)實(shí)現(xiàn)，如圖7-88所示。這一操作需要在Photoshop中完成。7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.2新知解析（3）網(wǎng)頁(yè)組織結(jié)構(gòu)為了使網(wǎng)頁(yè)在瀏覽器中居中顯示，需要?jiǎng)?chuàng)建一個(gè)較大的Div，ID為Box，ID為Box的Div由ID為Top、Main和Bottom三個(gè)Div組成，ID為Top的Div中嵌套了ID為Nav的Div，ID為Main的Div中嵌套了ID為Main-left和Main-right兩個(gè)Div，ID為Main-left的Div中嵌套了ID為Title和Content兩個(gè)Div。各個(gè)Div的嵌套關(guān)系與結(jié)構(gòu)如圖所示。7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.2新知解析7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.2新知解析（4）使用CSS規(guī)則設(shè)置Div與網(wǎng)頁(yè)元素組織網(wǎng)頁(yè)最后，在CSS樣式表文件中通過(guò)ID選擇器規(guī)則設(shè)置Div的寬度、高度、定位、邊界、填充、邊框等，再對(duì)網(wǎng)頁(yè)中的<ul>、<li>等網(wǎng)頁(yè)元素進(jìn)行設(shè)置。7.2使用DIV+CSS布局網(wǎng)頁(yè)7.2.2新知解析7.

2.3實(shí)戰(zhàn)演練：“玫瑰文化”網(wǎng)頁(yè)7.2使用DIV+CSS布局網(wǎng)頁(yè)最終效果如圖所示。7.

2.3實(shí)戰(zhàn)演練：“玫瑰文化”網(wǎng)頁(yè)7.2使用DIV+CSS布局網(wǎng)頁(yè)（1）規(guī)劃站點(diǎn)新建文件夾“MeiGui”，將素材文件夾“MeiGui”中的“images”和“others”文件夾拷貝到“MeiGui”文件夾中。（2）定義站點(diǎn)在DreamweaverCC2015中，單擊菜單“站點(diǎn)”→“新建站點(diǎn)”命令，通過(guò)“站點(diǎn)設(shè)置對(duì)象”對(duì)話框定義站點(diǎn)，站點(diǎn)名稱為“玫瑰文化”，本地站點(diǎn)文件夾設(shè)置為“MeiGui”文件夾。7.

2.3實(shí)戰(zhàn)演練：“玫瑰文化”網(wǎng)頁(yè)7.2使用DIV+CSS布局網(wǎng)頁(yè)（3）制作Banner部分1）新建網(wǎng)頁(yè)“index.html”，保存到站點(diǎn)文件夾下，打開網(wǎng)頁(yè)“index.html”，將網(wǎng)頁(yè)的標(biāo)題改為“玫瑰文化”，切換到代碼視圖，將第一行代碼<!doctypehtml>改為<!doctypehtmlpublic>。2）打開“CSS設(shè)計(jì)器”面板，在“源”窗格中進(jìn)行操作，創(chuàng)建新的CSS文件，文件名為“cssfile.css”，將文件保存“others”文件夾，并以“鏈接”附加

7.

2.3實(shí)戰(zhàn)演練：“玫瑰文化”網(wǎng)頁(yè)7.2使用DIV+CSS布局網(wǎng)頁(yè)（3）制作Banner部分3）創(chuàng)建*標(biāo)簽選擇器規(guī)則。在“選擇器”窗格中添加選擇器“*”，如圖7-94所示，并選中，將“屬性”窗格切換到布局屬性，設(shè)置“margin”的值為0px，“padding”的值為0px，將“屬性”窗格切換到邊框?qū)傩?，設(shè)置“border”的值為0px。4）打開“插入”面板，插入Div，在“插入”項(xiàng)中選擇“在插入點(diǎn)”，在ID中輸入“Box”。

7.

2.3實(shí)戰(zhàn)演練：“玫瑰文化”網(wǎng)頁(yè)7.2使用DIV+CSS布局網(wǎng)頁(yè)（3）制作Banner部分5）點(diǎn)擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，“選擇器類型”選擇“ID”，“選擇器名稱”設(shè)置為“#Box”，“規(guī)則定義”選擇“cssfile.css”。6）點(diǎn)擊“確定”按鈕，打開“#Box的CSS規(guī)則定義”對(duì)話框。在“分類”中選擇“方框”項(xiàng)，設(shè)置“Width”為1001px，設(shè)置“Height”為650px，取消“Margin”中的“全部相同”復(fù)選框的對(duì)勾，設(shè)置“Top”為0px、“Right”為auto，“Bottom”為0px，“Left”為auto。

7.

2.3實(shí)戰(zhàn)演練：“玫瑰文化”網(wǎng)頁(yè)7.2使用DIV+CSS布局網(wǎng)頁(yè)（3）制作Banner部分7）點(diǎn)擊“確定”按鈕，返回“插入Div”對(duì)話框，再次點(diǎn)擊“確定”按鈕，在頁(yè)面中插入ID為“Box”的Div，且Div居中顯示。8）將Div中默認(rèn)的文字刪除，將光標(biāo)定位在Div中，插入Div標(biāo)簽，設(shè)置如圖7-96所示，在“插入”項(xiàng)中選擇“在插入點(diǎn)”，在ID中輸入“Banner”。。

7.

2.3實(shí)戰(zhàn)演練：“玫瑰文化”網(wǎng)頁(yè)7.2使用DIV+CSS布局網(wǎng)頁(yè)（3）制作Banner部分9）為ID為“Banner”的Div創(chuàng)建ID選擇器規(guī)則，并在“方框”中設(shè)置“Width”為1001px、“Height”為132px。將默認(rèn)的文字刪除，光標(biāo)定位于ID為“Banner”的Div，插入圖像“banner.jpg”。

7.

2.3實(shí)戰(zhàn)演練：“玫瑰文化”網(wǎng)頁(yè)7.2使用DIV+CSS布局網(wǎng)頁(yè)（4）制作網(wǎng)頁(yè)左側(cè)部分1）插入一個(gè)Div，設(shè)置如圖7-98所示，在“插入”項(xiàng)中選擇“在標(biāo)簽后”、“<divid=’Banner’>”，在“ID”中輸入“Main”。

7.

2.3實(shí)戰(zhàn)演練：“玫瑰文化”網(wǎng)頁(yè)7.2使用DIV+CSS布局網(wǎng)頁(yè)（4）制作網(wǎng)頁(yè)左側(cè)部分2）為ID為“Main”的Div創(chuàng)建ID選擇器規(guī)則，并在“方框”中設(shè)置“Width”為1001px、“Height”為468px。3）將默認(rèn)的文字刪除，插入一個(gè)Div，設(shè)置如圖7-99所示，在“插入”項(xiàng)中選擇“在標(biāo)簽開始后”、“<divid=’Main’>”，在“ID”中輸入“Left-main”。

7.

2.3實(shí)戰(zhàn)演練：“玫瑰文化”網(wǎng)頁(yè)7.2使用DIV+CSS布局網(wǎng)頁(yè)（4）制作網(wǎng)頁(yè)左側(cè)部分4）為ID為“Left-main”的Div創(chuàng)建ID選擇器規(guī)則，并在“方框”中設(shè)置“Width”為164px、“Height”為468px、“Float”為left。5）將默認(rèn)的文字刪除，光標(biāo)定位于ID為“Left-main”的Div，插入圖像“l(fā)eft.jpg”，左側(cè)部分在網(wǎng)頁(yè)中的效果如圖所示。

7.

2.3實(shí)戰(zhàn)演練：“玫瑰文化”網(wǎng)頁(yè)7.2使用DIV+CSS布局網(wǎng)頁(yè)（5）制作當(dāng)前位置部分1）插入一個(gè)Div，設(shè)置如圖7-101所示，在“插入”項(xiàng)中選擇“在標(biāo)簽后”、“<divid=’Left-main’>”，在“ID”中輸入“Right-main”。

7.

2.3實(shí)戰(zhàn)演練：“玫瑰文化”網(wǎng)頁(yè)7.2使用DIV+CSS布局網(wǎng)頁(yè)（5）制作當(dāng)前位置