靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作 課件 第8章 Div+CSS布局

項(xiàng)目八

Div+CSS布局任務(wù)1

Div+CSS概述任務(wù)2CSS盒模型任務(wù)3CSS層疊順序任務(wù)4CSS布局塊任務(wù)5常用CSS布局版式任務(wù)1

Div+CSS概述任務(wù)引入小明已經(jīng)掌握了用表格布局網(wǎng)頁(yè)的方法，但是表格布局有一個(gè)缺點(diǎn)，就是頁(yè)面打開速度會(huì)比較慢，經(jīng)過深入學(xué)習(xí)，小明了解到可以利用div+css布局，不僅可以簡(jiǎn)化代碼，還可以加快顯示速度，那么什么是div+css布局呢？知識(shí)準(zhǔn)備在使用Dreamweaver學(xué)習(xí)網(wǎng)頁(yè)制作時(shí)，初學(xué)者總是習(xí)慣先考慮網(wǎng)頁(yè)外觀的呈現(xiàn)樣式，比如圖片、字體、顏色等所有表現(xiàn)在頁(yè)面上的內(nèi)容，然后用Photoshop或者Fireworks繪制出來(lái)并切割成小圖。最后通過編輯HTML或使用Dreamweaver的可視化編輯方法，將所有設(shè)計(jì)放置在表格或框架中組織成網(wǎng)頁(yè)。隨著移動(dòng)和網(wǎng)絡(luò)技術(shù)的發(fā)展，網(wǎng)頁(yè)不僅呈現(xiàn)在電腦屏幕上供瀏覽，越來(lái)越多的用戶會(huì)選擇在PDA、移動(dòng)電話或屏幕閱讀機(jī)上查看網(wǎng)頁(yè)，使用上述方法精心設(shè)計(jì)的頁(yè)面在這些媒體上可能就不能顯示了。本節(jié)將從傳統(tǒng)的表格布局（table）跨入到div+css布局。div+css，簡(jiǎn)單地說，就是使用塊級(jí)元素（或稱為層）放置頁(yè)面內(nèi)容，然后使用CSS規(guī)則指定層的位置、大小和呈現(xiàn)方式。使用Div+CSS制作網(wǎng)頁(yè)，最重要的是擯棄傳統(tǒng)的表格布局觀念，在考慮頁(yè)面的整體表現(xiàn)效果之前，應(yīng)當(dāng)先考慮內(nèi)容的語(yǔ)義，分析每塊內(nèi)容的目的，并根據(jù)這些目的建立相應(yīng)的HTML結(jié)構(gòu)，然后再針對(duì)語(yǔ)義、結(jié)構(gòu)添加CSS。例如圖所示的頁(yè)面：仔細(xì)分析圖所示的頁(yè)面結(jié)構(gòu)，可以得到如下幾部分：站點(diǎn)logo導(dǎo)航菜單主頁(yè)面內(nèi)容頁(yè)腳任務(wù)2CSS盒模型任務(wù)引入小明已經(jīng)了解了div+css布局的基本概念，但是如何創(chuàng)建規(guī)則來(lái)排版網(wǎng)頁(yè)，這就需要用到CSS盒模型，它是Web標(biāo)準(zhǔn)布局的核心所在，那么什么是CSS盒模型，常用的盒模型屬性有哪些呢？知識(shí)準(zhǔn)備早在1996年推出CSS1的時(shí)候，W3C組織就建議把所有網(wǎng)頁(yè)上的對(duì)象都放在一個(gè)“盒”中，通過創(chuàng)建規(guī)則控制“盒”的屬性。CSS盒模型是Web標(biāo)準(zhǔn)布局的核心所在，在詳細(xì)介紹Div+CSS布局之前，讀者很有必要先了解CSS盒模型的概念和組成。一、CSS盒模型簡(jiǎn)介所謂CSS盒模型，是指通過由CSS定義的大小不一的盒子和盒子嵌套排版網(wǎng)頁(yè)。采用這種編排方式的網(wǎng)頁(yè)代碼簡(jiǎn)潔，表現(xiàn)和內(nèi)容分離，后期維護(hù)方便，能兼容更多的瀏覽器。CSS盒模型的示意圖如圖所示。二、常用的盒模型屬性盒模型主要定義四個(gè)區(qū)域：內(nèi)容（content）、填充（padding）、邊框（border）和邊距（margin）。此外，還可以指定盒模型的定位（position）和浮動(dòng)（float）等屬性1．內(nèi)容內(nèi)容區(qū)域可以放置任何網(wǎng)頁(yè)元素，本小節(jié)介紹常用的文本和背景屬性。（1）font-family屬性

（2）font-style屬性（3）font-size屬性

（4）font屬性（5）color屬性

（6）background-color屬性（7）background-image屬性

（8）background-repeat屬性（9）background屬性

（10）line-height屬性2．填充（Padding）Padding屬性用于描述盒模型的內(nèi)容與邊框之間的距離，分為padding-top、padding-right、padding-bottom和padding-left四個(gè)屬性，分別表示盒模型四個(gè)方向的內(nèi)邊距。屬性值是數(shù)值，單位可以是長(zhǎng)度、百分比或auto。3．邊框（border）border屬性用于描述盒模型的邊框。Border屬性包括border-width、border-color和border-style，這些屬性下面又有分支4．邊距（Margin）Margin屬性分為margin-top、margin-right、margin-bottom、margin-left四個(gè)屬性，分別表示盒模型四個(gè)方向的外邊距。屬性值是數(shù)值單位，可以是長(zhǎng)度、百分比或auto，margin甚至可以設(shè)為負(fù)值，實(shí)現(xiàn)容器與容器之間的重疊顯示5．布局（Layout）使用以上四類屬性可以指定CSS布局塊的顯示外觀。在進(jìn)行頁(yè)面布局時(shí)，還需要一些屬性對(duì)布局塊進(jìn)行定位，指定布局塊在頁(yè)面中的呈現(xiàn)方式。（1）position屬性（2）float和clear屬性（3）overflow屬性（4）z-index屬性任務(wù)3CSS層疊順序任務(wù)引入了解了盒模型之后，小明就可以根據(jù)網(wǎng)頁(yè)的需要來(lái)創(chuàng)建不同的CSS樣式，但是CSS樣式有很多種，CSS樣式?jīng)Q定了網(wǎng)頁(yè)的最終外觀，那么具體有哪些樣式呢？知識(shí)準(zhǔn)備“層疊”是指瀏覽器最終為網(wǎng)頁(yè)上的特定元素顯示樣式的方式。三種不同的源決定了網(wǎng)頁(yè)在瀏覽器中顯示的樣式：由頁(yè)面設(shè)計(jì)者創(chuàng)建的樣式表、自定義樣式和瀏覽器的默認(rèn)樣式。網(wǎng)頁(yè)的最終外觀是由所有這三種源的規(guī)則共同作用（或者“層疊”）的結(jié)果，最后以最佳方式呈現(xiàn)網(wǎng)頁(yè)。實(shí)際上，所有在選擇器中嵌套的選擇器都會(huì)繼承外層選擇器指定的屬性值，除非另外更改。一、外部樣式外部樣式是把CSS單獨(dú)寫到一個(gè)CSS文件中，然后在源代碼中以link方式鏈接。例如：<linkhref="layout.css"rel="stylesheet"type="text/css"/>外部樣式不但本頁(yè)可以調(diào)用，其他頁(yè)面也可以調(diào)用，在web標(biāo)準(zhǔn)設(shè)計(jì)中，使用外部樣式，可以不修改頁(yè)面，只修改樣式文件，從而改變頁(yè)面的樣式。二、內(nèi)部樣式內(nèi)部樣式寫在源代碼的head標(biāo)簽內(nèi)，以<style>和</style>結(jié)尾。這種樣式在頁(yè)面內(nèi)定義，僅在定義的頁(yè)面中有效。例如：<styletype="text/css">body{ background-image:url(../images/bg.jpg); background-repeat:no-repeat;}</style>三、行內(nèi)樣式行內(nèi)樣式在標(biāo)簽內(nèi)以style標(biāo)記，只針對(duì)標(biāo)簽內(nèi)的元素有效。例如：<pstyle="font-size:18px;">點(diǎn)擊這里！</p>由于這種樣式嵌在HTML結(jié)構(gòu)中，沒有與內(nèi)容分離，不便于后期的維護(hù)與更新，所以不建議使用。四、導(dǎo)入樣式導(dǎo)入樣式通過使用@importurl標(biāo)記附加外部樣式表例如：<styletype="text/css">@importurl("../css/newcss.css");</style>任務(wù)4CSS布局塊任務(wù)引入接下來(lái)小明就可以利用Div+CSS制作網(wǎng)頁(yè)，首先就是要?jiǎng)?chuàng)建布局塊，在Dreamweaver中div標(biāo)簽常用于定義網(wǎng)頁(yè)內(nèi)容中的邏輯區(qū)域，那么如何創(chuàng)建和編輯div標(biāo)簽，如何可視化布局塊呢？知識(shí)準(zhǔn)備CSS布局與傳統(tǒng)表格（table）布局最大的區(qū)別在于：傳統(tǒng)表格布局采用表格定位，通過表格的間距或者用無(wú)色透明的GIF圖像控制布局版塊的間距；用CSS布局則主要用塊（例如div）定位，通過指定塊的margin、padding、border等屬性控制版塊的間距，使用ID選擇器定義塊的樣式。下面是幾個(gè)在Dreamweaver中被視為CSS布局塊的元素的示例：div標(biāo)簽指定了絕對(duì)或相對(duì)位置的圖像指定了display:block樣式的a標(biāo)簽指定了絕對(duì)或相對(duì)位置的段落一、創(chuàng)建div標(biāo)簽本節(jié)將介紹Web標(biāo)準(zhǔn)中常用的一種CSS布局塊——div標(biāo)簽的創(chuàng)建方法。div標(biāo)簽常用于定義網(wǎng)頁(yè)內(nèi)容中的邏輯區(qū)域，通常被稱為“塊”。在Dreamweaver2021中創(chuàng)建div標(biāo)簽的操作步驟如下：（1）在“文檔”窗口的“設(shè)計(jì)”視圖中，將插入點(diǎn)放置在要顯示div標(biāo)簽的位置。（2）執(zhí)行下列操作之一，彈出如圖所示的“插入Div”對(duì)話框：（3）在“插入Div”對(duì)話框中指定插入位置、要應(yīng)用的類以及div標(biāo)簽的ID。（4）單擊“插入Div”對(duì)話框中的“確定”按鈕關(guān)閉對(duì)話框，即可插入一個(gè)div標(biāo)簽?！安迦隓iv”對(duì)話框

“新建CSS規(guī)則”對(duì)話框創(chuàng)建div標(biāo)簽二、編輯div標(biāo)簽插入div標(biāo)簽之后，就可以在“CSS設(shè)計(jì)器”面板中查看和編輯應(yīng)用于div標(biāo)簽的規(guī)則，或在標(biāo)簽中添加內(nèi)容了。操作步驟如下：（1）選中div標(biāo)簽。執(zhí)行以下操作之一選擇div標(biāo)簽：（2）在div標(biāo)簽中添加內(nèi)容。（3）打開“CSS設(shè)計(jì)器”面板查看或定義規(guī)則。。（4）根據(jù)需要編輯CSS規(guī)則。在div標(biāo)簽中添加內(nèi)容

CSS布局塊效果三、可視化CSS布局塊Dreamweaver提供了多個(gè)可視化助理，用于查看CSS布局塊。默認(rèn)情況下，Dreamweaver2021在“設(shè)計(jì)”視圖中顯示div標(biāo)簽的外框，且當(dāng)鼠標(biāo)指針移到div標(biāo)簽外框上時(shí)高亮顯示，如圖所示。如果不希望在頁(yè)面上顯示CSS布局塊外框，可以執(zhí)行“查看”/“設(shè)計(jì)視圖選項(xiàng)”/“可視化助理”/“CSS布局外框”菜單命令取消顯示，如圖所示。下面簡(jiǎn)要介紹一下如圖所示的CSS布局塊可視化助理列表的含義。div標(biāo)簽的外框

取消顯示CSS布局外框

顯示CSS布局背景顯示CSS布局框模型取消顯示CSS布局外框如果要更改div標(biāo)簽的高亮顏色或禁用高亮顯示功能，可以打開“首選項(xiàng)”對(duì)話框進(jìn)行設(shè)置，步驟如下：（1）執(zhí)行“編輯”/“首選項(xiàng)”命令，打開“首選項(xiàng)”對(duì)話框。（2）在左側(cè)的“分類”列表中選擇“標(biāo)記色彩”。（3）單擊“鼠標(biāo)滑過”顏色拾取框，并使用顏色選擇器來(lái)選擇一種高亮顏色（或在文本框中輸入高亮顏色的十六進(jìn)制值），如圖所示。若要啟用或禁用高亮顯示功能，則選中或取消選中“鼠標(biāo)滑過”的“顯示”復(fù)選框。設(shè)置高亮顏色任務(wù)5常用CSS布局版式任務(wù)引入小明已經(jīng)基本掌握了CSS布局塊的創(chuàng)建，以及利用CSS規(guī)則定位布局塊，其實(shí)在網(wǎng)頁(yè)制作中有一些常見的CSS布局版式，掌握了這幾種布局，在今后制作網(wǎng)頁(yè)的時(shí)候就可以信手拈來(lái)，具體要怎么創(chuàng)建呢？知識(shí)準(zhǔn)備前面幾節(jié)介紹了CSS布局塊的創(chuàng)建，以及利用CSS規(guī)則定位布局塊的方法。本節(jié)將介紹網(wǎng)頁(yè)制作中常見的幾種CSS布局版式。本節(jié)將綜合前幾節(jié)的知識(shí)點(diǎn)，希望通過本節(jié)的學(xué)習(xí)，讀者能從原來(lái)的表格布局跨入到web標(biāo)準(zhǔn)布局，會(huì)使用web標(biāo)準(zhǔn)制作出常見的頁(yè)面。一、一列布局一列布局常用于顯示正文或文章內(nèi)容的頁(yè)面，示意圖如圖所示。（1）新建一個(gè)HTML頁(yè)面，并在頁(yè)面中插入一個(gè)div標(biāo)簽，命名為head。（2）打開“CSS設(shè)計(jì)器”面板，單擊“添加CSS源”按鈕，在彈出的下拉列表中選擇“在頁(yè)面中定義”命令。然后單擊“添加選擇器”按鈕，輸入選擇器名稱#head。（3）切換到“屬性”面板的“布局”類別，設(shè)置寬度為500px，高度為60px，下邊距為8px；為便于觀察效果，切換到“背景”類別，設(shè)置背景顏色為#ADDD17。（4）按照以上三步的方法，插入兩個(gè)div標(biāo)簽content和foot，然后定義CSS規(guī)則#content和#foot，分別用于設(shè)置div標(biāo)簽content和foot的外觀。（5）打開CSS設(shè)計(jì)器，添加選擇器body，設(shè)置邊距為0一列固定寬度布局效果二、兩列布局本小節(jié)以常見的左列固定、右列寬度自適應(yīng)為例，介紹兩列布局的創(chuàng)建方法。（1）按照上一節(jié)的方法，在頁(yè)面中插入兩個(gè)div標(biāo)簽，分別命名為#nav和#content。（2）打開“CSS設(shè)計(jì)器”面板，單擊“添加CSS源”按鈕，在彈出的下拉列表中選擇“在頁(yè)面中定義”命令。然后單擊“添加選擇器”按鈕，輸入選擇器名稱#nav。（3）切換到“屬性”面板的“布局”類別，設(shè)置寬度為120px，高度為200px；為便于觀察效果，切換到“背景”類別，設(shè)置背景顏色為#FFCCFF。（4）在CSS設(shè)計(jì)器中創(chuàng)建規(guī)則#content，定義div標(biāo)簽content的外觀。（5）打開CSS設(shè)計(jì)器，設(shè)置布局塊content的左邊距為120px（6）切換到“代碼”視圖，選中兩個(gè)div的代碼，然后執(zhí)行“插入”/“div”菜單命令，在彈出的對(duì)話框中指定div標(biāo)簽為main，即可將兩個(gè)div標(biāo)簽放入一個(gè)父標(biāo)簽中。（7）定義規(guī)則#main，指定布局塊寬度為360px，左、右邊距為auto

浮動(dòng)效果

頁(yè)面效果頁(yè)面效果三、三列布局常用的三列布局結(jié)構(gòu)是左列和右列固定，中間列固定寬度，或根據(jù)瀏覽器寬度自適應(yīng)。創(chuàng)建步驟如下：（1）在頁(yè)面中插入三個(gè)div標(biāo)簽，分別命名為#left、#content和#right。（2）打開“CSS設(shè)計(jì)器”面板，單擊“添加CSS源”按鈕，在彈出的下拉列表中選擇“在頁(yè)面中定義”命令。（3）按上一步同樣的方法定義CSS規(guī)則#right，寬度為200px，高度為400px，向右浮動(dòng)，背景顏色為#99FF99。（4）從上一節(jié)的例子可以看出，要讓中間的布局塊按指定寬度顯示，應(yīng)設(shè)置左、右邊距。按上一步同樣的方法定義CSS規(guī)則#content，高度為400px，背景顏色為#99FFFF，左邊距125px，右邊距205px。頁(yè)面顯示效果綜合案例Div標(biāo)簽應(yīng)用實(shí)例Div標(biāo)簽在網(wǎng)頁(yè)布局中占有十分重要的地位，不僅可以精確定位網(wǎng)頁(yè)元素，還可以配合表單和動(dòng)作制作出許多經(jīng)典的特效。下面將用一個(gè)簡(jiǎn)單實(shí)例演示div標(biāo)簽的簡(jiǎn)單特效。本例的最終效果如圖所示，當(dāng)鼠標(biāo)指針移動(dòng)到右側(cè)的縮略圖上時(shí)，左側(cè)的圖像被隱藏，顯示另一幅圖像，如圖所示；鼠標(biāo)指針離開縮略圖時(shí)，再次顯示原來(lái)的圖像。實(shí)例效果1實(shí)例效果2頁(yè)面效果頁(yè)面效果頁(yè)面效果頁(yè)面效果頁(yè)面效果移開鼠標(biāo)的效果圖鼠標(biāo)移到圖片上的效果圖項(xiàng)目總結(jié)項(xiàng)目實(shí)戰(zhàn)實(shí)戰(zhàn)一制作簡(jiǎn)易公告欄（1）執(zhí)行“文件”｜“新建”菜單命令，創(chuàng)建一個(gè)空白的HTML文件。（2）執(zhí)行“插入”｜“Div”命令，輸入ID為main，插入Div。（3）執(zhí)行“窗口”｜“CSS設(shè)計(jì)器”命令，打開“CSS設(shè)計(jì)器”面板，單擊“添加CSS源”按鈕，在彈出的下拉菜單中選擇“在頁(yè)面中定義”命令，單擊“添加選擇器”按鈕，在出現(xiàn)的空行中輸入#main。（4）在“布局”屬