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

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

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

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

最終效果如圖所示。7.1

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

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

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

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

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

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

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

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

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

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

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

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

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

（3）制作Banner部分6）打開“插入”面板，點擊圖標，打開“插入Div”對話框，在“插入”項中選擇“在插入點”，在ID中輸入“Box”。7.1

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

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

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

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

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

（3）制作Banner部分9）點擊“確定”按鈕，返回“插入Div”對話框，再次點擊“確定”按鈕，在頁面中插入ID為“Box”的Div，且Div居中顯示。10）將ID為“Box”的Div中默認的文字刪除，將光標定位在Div中，點擊“插入”面板中的“Div標簽”，打開“插入Div”對話框，在“插入”項中選擇“在插入點”，在ID中輸入“Banner”。7.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1．什么是Div

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

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

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

Div元素的介紹與應用

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

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

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

2）代碼簡潔，提高頁面瀏覽速度

3）易于維護和改版7.1

Div元素的介紹與應用7.1.2新知解析

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

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

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

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

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

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

Div元素的介紹與應用7.1.2新知解析7.1

Div元素的介紹與應用2）點擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框，如圖所示?？梢钥吹健斑x擇器類型”自動選擇“ID”，“選擇器名稱”自動設置為“#d3”，“規(guī)則定義”選擇“僅限該文檔”。7.1.2新知解析

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

Div元素的介紹與應用

<divid="d1">d1

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

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

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

Div元素的介紹與應用7.1.2新知解析

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

<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元素的介紹與應用7.1.2新知解析

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

Div元素的介紹與應用7.1.2新知解析

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

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

Div元素的介紹與應用7.1.2新知解析

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

Div元素的介紹與應用7.1.2新知解析

2）相對定位

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

Div元素的介紹與應用7.1.2新知解析

#box_relative{

position:relative;

left:30px;

top:20px;

}注意：使用相對定位的元素不管它是否進行移動，元素仍要占據(jù)它原來的位置。移動元素可能會導致它覆蓋其他的元素。7.1

Div元素的介紹與應用7.1.2新知解析

3）絕對定位

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

Div元素的介紹與應用

#box_absolute{

position:absolute;

left:30px;

top:20px;}7.1.2新知解析

4）固定定位

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

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

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

Div元素的介紹與應用7.1.2新知解析例如下圖7-38所示，當元素1向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含元素的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了元素2，使元素2從視圖中消失。如果把三個元素都向左移動，那么元素1向左浮動直到碰到包含元素，另外兩個元素向左浮動直到碰到前一個浮動元素。7.1

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

Div元素的介紹與應用7.1.2新知解析

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

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

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

1）邊界邊界（margin）環(huán)繞在元素的四周，如果margin的值為0，則margin邊界與border邊框重合。邊界分為上（margin-top）、右（margin-right）、下（margin-bottom）和左（margin-left）四個部分，可以統(tǒng)一設置，也可以分別設置，也可以只設置其中的一部分?？梢灾苯釉凇皩傩浴贝案裰性O置7.1

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

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

margin-top:5px;

margin-right:10px;

margin-bottom:15px;

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

Div元素的介紹與應用7.1.2新知解析

2）填充填充（padding）位于元素四周的內(nèi)側(cè)，如果padding的值為0，則padding填充與border邊框重合。填充分為上（padding-top）、右（padding-right）、下（padding-bottom）、左（padding-left）四個部分，可以統(tǒng)一設置，也可以分別設置，也可以只設置其中的一部分?？梢灾苯釉凇皩傩浴贝案裰性O置，也可以在“CSS規(guī)則定義”對話框中設置。7.1

Div元素的介紹與應用7.1.2新知解析

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

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

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

border-top:1pxdotted#F50B0E;

border-right:2pxsolid#F50B0E;

border-bottom:3pxgroove#F50B0E;

border-left:4pxdotted#F50B0E;7.1

Div元素的介紹與應用

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

7.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7.2.2新知解析

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

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

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

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

7.

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

7.

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

7.

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

7.

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

7.

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

7.

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

7.

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

7.

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

7.

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