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

項目八

Div+CSS布局任務1

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

Div+CSS概述任務引入小明已經(jīng)掌握了用表格布局網(wǎng)頁的方法，但是表格布局有一個缺點，就是頁面打開速度會比較慢，經(jīng)過深入學習，小明了解到可以利用div+css布局，不僅可以簡化代碼，還可以加快顯示速度，那么什么是div+css布局呢？知識準備在使用Dreamweaver學習網(wǎng)頁制作時，初學者總是習慣先考慮網(wǎng)頁外觀的呈現(xiàn)樣式，比如圖片、字體、顏色等所有表現(xiàn)在頁面上的內(nèi)容，然后用Photoshop或者Fireworks繪制出來并切割成小圖。最后通過編輯HTML或使用Dreamweaver的可視化編輯方法，將所有設計放置在表格或框架中組織成網(wǎng)頁。隨著移動和網(wǎng)絡技術的發(fā)展，網(wǎng)頁不僅呈現(xiàn)在電腦屏幕上供瀏覽，越來越多的用戶會選擇在PDA、移動電話或屏幕閱讀機上查看網(wǎng)頁，使用上述方法精心設計的頁面在這些媒體上可能就不能顯示了。本節(jié)將從傳統(tǒng)的表格布局（table）跨入到div+css布局。div+css，簡單地說，就是使用塊級元素（或稱為層）放置頁面內(nèi)容，然后使用CSS規(guī)則指定層的位置、大小和呈現(xiàn)方式。使用Div+CSS制作網(wǎng)頁，最重要的是擯棄傳統(tǒng)的表格布局觀念，在考慮頁面的整體表現(xiàn)效果之前，應當先考慮內(nèi)容的語義，分析每塊內(nèi)容的目的，并根據(jù)這些目的建立相應的HTML結(jié)構(gòu)，然后再針對語義、結(jié)構(gòu)添加CSS。例如圖所示的頁面：仔細分析圖所示的頁面結(jié)構(gòu)，可以得到如下幾部分：站點logo導航菜單主頁面內(nèi)容頁腳任務2CSS盒模型任務引入小明已經(jīng)了解了div+css布局的基本概念，但是如何創(chuàng)建規(guī)則來排版網(wǎng)頁，這就需要用到CSS盒模型，它是Web標準布局的核心所在，那么什么是CSS盒模型，常用的盒模型屬性有哪些呢？知識準備早在1996年推出CSS1的時候，W3C組織就建議把所有網(wǎng)頁上的對象都放在一個“盒”中，通過創(chuàng)建規(guī)則控制“盒”的屬性。CSS盒模型是Web標準布局的核心所在，在詳細介紹Div+CSS布局之前，讀者很有必要先了解CSS盒模型的概念和組成。一、CSS盒模型簡介所謂CSS盒模型，是指通過由CSS定義的大小不一的盒子和盒子嵌套排版網(wǎng)頁。采用這種編排方式的網(wǎng)頁代碼簡潔，表現(xiàn)和內(nèi)容分離，后期維護方便，能兼容更多的瀏覽器。CSS盒模型的示意圖如圖所示。二、常用的盒模型屬性盒模型主要定義四個區(qū)域：內(nèi)容（content）、填充（padding）、邊框（border）和邊距（margin）。此外，還可以指定盒模型的定位（position）和浮動（float）等屬性1．內(nèi)容內(nèi)容區(qū)域可以放置任何網(wǎng)頁元素，本小節(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四個屬性，分別表示盒模型四個方向的內(nèi)邊距。屬性值是數(shù)值，單位可以是長度、百分比或auto。3．邊框（border）border屬性用于描述盒模型的邊框。Border屬性包括border-width、border-color和border-style，這些屬性下面又有分支4．邊距（Margin）Margin屬性分為margin-top、margin-right、margin-bottom、margin-left四個屬性，分別表示盒模型四個方向的外邊距。屬性值是數(shù)值單位，可以是長度、百分比或auto，margin甚至可以設為負值，實現(xiàn)容器與容器之間的重疊顯示5．布局（Layout）使用以上四類屬性可以指定CSS布局塊的顯示外觀。在進行頁面布局時，還需要一些屬性對布局塊進行定位，指定布局塊在頁面中的呈現(xiàn)方式。（1）position屬性（2）float和clear屬性（3）overflow屬性（4）z-index屬性任務3CSS層疊順序任務引入了解了盒模型之后，小明就可以根據(jù)網(wǎng)頁的需要來創(chuàng)建不同的CSS樣式，但是CSS樣式有很多種，CSS樣式?jīng)Q定了網(wǎng)頁的最終外觀，那么具體有哪些樣式呢？知識準備“層疊”是指瀏覽器最終為網(wǎng)頁上的特定元素顯示樣式的方式。三種不同的源決定了網(wǎng)頁在瀏覽器中顯示的樣式：由頁面設計者創(chuàng)建的樣式表、自定義樣式和瀏覽器的默認樣式。網(wǎng)頁的最終外觀是由所有這三種源的規(guī)則共同作用（或者“層疊”）的結(jié)果，最后以最佳方式呈現(xiàn)網(wǎng)頁。實際上，所有在選擇器中嵌套的選擇器都會繼承外層選擇器指定的屬性值，除非另外更改。一、外部樣式外部樣式是把CSS單獨寫到一個CSS文件中，然后在源代碼中以link方式鏈接。例如：<linkhref="layout.css"rel="stylesheet"type="text/css"/>外部樣式不但本頁可以調(diào)用，其他頁面也可以調(diào)用，在web標準設計中，使用外部樣式，可以不修改頁面，只修改樣式文件，從而改變頁面的樣式。二、內(nèi)部樣式內(nèi)部樣式寫在源代碼的head標簽內(nèi)，以<style>和</style>結(jié)尾。這種樣式在頁面內(nèi)定義，僅在定義的頁面中有效。例如：<styletype="text/css">body{ background-image:url(../images/bg.jpg); background-repeat:no-repeat;}</style>三、行內(nèi)樣式行內(nèi)樣式在標簽內(nèi)以style標記，只針對標簽內(nèi)的元素有效。例如：<pstyle="font-size:18px;">點擊這里！</p>由于這種樣式嵌在HTML結(jié)構(gòu)中，沒有與內(nèi)容分離，不便于后期的維護與更新，所以不建議使用。四、導入樣式導入樣式通過使用@importurl標記附加外部樣式表例如：<styletype="text/css">@importurl("../css/newcss.css");</style>任務4CSS布局塊任務引入接下來小明就可以利用Div+CSS制作網(wǎng)頁，首先就是要創(chuàng)建布局塊，在Dreamweaver中div標簽常用于定義網(wǎng)頁內(nèi)容中的邏輯區(qū)域，那么如何創(chuàng)建和編輯div標簽，如何可視化布局塊呢？知識準備CSS布局與傳統(tǒng)表格（table）布局最大的區(qū)別在于：傳統(tǒng)表格布局采用表格定位，通過表格的間距或者用無色透明的GIF圖像控制布局版塊的間距；用CSS布局則主要用塊（例如div）定位，通過指定塊的margin、padding、border等屬性控制版塊的間距，使用ID選擇器定義塊的樣式。下面是幾個在Dreamweaver中被視為CSS布局塊的元素的示例：div標簽指定了絕對或相對位置的圖像指定了display:block樣式的a標簽指定了絕對或相對位置的段落一、創(chuàng)建div標簽本節(jié)將介紹Web標準中常用的一種CSS布局塊——div標簽的創(chuàng)建方法。div標簽常用于定義網(wǎng)頁內(nèi)容中的邏輯區(qū)域，通常被稱為“塊”。在Dreamweaver2021中創(chuàng)建div標簽的操作步驟如下：（1）在“文檔”窗口的“設計”視圖中，將插入點放置在要顯示div標簽的位置。（2）執(zhí)行下列操作之一，彈出如圖所示的“插入Div”對話框：（3）在“插入Div”對話框中指定插入位置、要應用的類以及div標簽的ID。（4）單擊“插入Div”對話框中的“確定”按鈕關閉對話框，即可插入一個div標簽?！安迦隓iv”對話框

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

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

取消顯示CSS布局外框

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

浮動效果

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