靜態網頁設計制作 教案 第8章 Div+CSS布局_第1頁
靜態網頁設計制作 教案 第8章 Div+CSS布局_第2頁
靜態網頁設計制作 教案 第8章 Div+CSS布局_第3頁
靜態網頁設計制作 教案 第8章 Div+CSS布局_第4頁
靜態網頁設計制作 教案 第8章 Div+CSS布局_第5頁
已閱讀5頁，還剩23頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

STYLEREFbt1a項目八STYLEREFbt1bDiv+CSS布局項目八Div+CSS布局思政目標具體問題具體分析，根據實際需要制定精準的方案。培養積極探索、迎難而上，培養堅持不懈的科學精神技能目標了解CSS盒模型的屬性了解CSS的四種樣式的區別學會創建和編輯div標簽以及設置CSS布局塊的可視化學會創建常用的CSS布局版式項目導讀div+css，簡單地說，就是使用塊級元素放置頁面內容，然后使用CSS規則指定布局塊的位置、大小和呈現方式。一個使用div+css布局且結構良好的HTML頁面，可以在任何網絡設備上以任何外觀呈現，而且用div+css布局構建的網頁可以簡化代碼，加快顯示速度。任務1Div+CSS概述任務引入小明已經掌握了用表格布局網頁的方法，但是表格布局有一個缺點，就是頁面打開速度會比較慢，經過深入學習，小明了解到可以利用div+css布局，不僅可以簡化代碼，還可以加快顯示速度，那么什么是div+css布局呢？知識準備在使用Dreamweaver學習網頁制作時，初學者總是習慣先考慮網頁外觀的呈現樣式，比如圖片、字體、顏色等所有表現在頁面上的內容，然后用Photoshop或者Fireworks繪制出來并切割成小圖。最后通過編輯HTML或使用Dreamweaver的可視化編輯方法，將所有設計放置在表格或框架中組織成網頁。隨著移動和網絡技術的發展，網頁不僅呈現在電腦屏幕上供瀏覽，越來越多的用戶會選擇在PDA、移動電話或屏幕閱讀機上查看網頁，使用上述方法精心設計的頁面在這些媒體上可能就不能顯示了。本節將從傳統的表格布局（table）跨入到div+css布局。一個使用div+css布局且結構良好的HTML頁面可以通過CSS以任何外觀表現出來，在任何網絡設備上（包括手機、PDA和計算機）上以任何外觀呈現，而且用div+css布局構建的網頁可以簡化代碼，加快顯示速度。div+css，簡單地說，就是使用塊級元素（或稱為層）放置頁面內容，然后使用CSS規則指定層的位置、大小和呈現方式。使用Div+CSS制作網頁，最重要的是擯棄傳統的表格布局觀念，在考慮頁面的整體表現效果之前，應當先考慮內容的語義，分析每塊內容的目的，并根據這些目的建立相應的HTML結構，然后再針對語義、結構添加CSS。例如圖8-1所示的頁面：圖8-1頁面示例仔細分析圖8-1所示的頁面結構，可以得到如下幾部分：站點logo導航菜單主頁面內容頁腳接下來，可以采用塊元素定義這些結構：結構化HTML之后，就可以定義CSS樣式進行布局了。CSS是一種對文本進行格式化操作的高級技術，從一個較高的級別上對文本進行控制。使用CSS設置頁面格式時，內容與表現形式是相互分離的。頁面內容位于自身的HTML文件中，而定義代碼表現形式的CSS規則位于外部樣式表或HTML文檔的另一部分（通常為<head>部分）。使用CSS可以非常靈活地控制頁面的外觀，從精確的布局定位到特定的字體和樣式等，而且可以在文檔中實現格式的自動更新。通過ID選擇器可以精確定義每一個頁面元素的外觀表現，包括顏色、字體、鏈接、邊框、背景以及對齊屬性，等等。例如，如下的規則定義了ID為header的Div的寬、高、邊距、下邊框樣式和框陰影的模糊半徑。任務2CSS盒模型任務引入小明已經了解了div+css布局的基本概念，但是如何創建規則來排版網頁，這就需要用到CSS盒模型，它是Web標準布局的核心所在，那么什么是CSS盒模型，常用的盒模型屬性有哪些呢？知識準備早在1996年推出CSS1的時候，W3C組織就建議把所有網頁上的對象都放在一個“盒”中，通過創建規則控制“盒”的屬性。CSS盒模型是Web標準布局的核心所在，在詳細介紹Div+CSS布局之前，讀者很有必要先了解CSS盒模型的概念和組成。一、CSS盒模型簡介圖8-2CSS盒模型示意圖所謂CSS盒模型，是指通過由CSS定義的大小不一的盒子和盒子嵌套排版網頁。采用這種編排方式的網頁代碼簡潔，表現和內容分離，后期維護方便，能兼容更多的瀏覽器。CSS盒模型的示意圖如圖8-2所示。圖8-2CSS盒模型示意圖從上圖可以看出，整個盒模型在頁面中所占的寬度=左邊距+左邊框+左填充+內容寬度+右填充+右邊框+右邊距；高度=上邊距+上邊框+上填充+內容高度+下填充+下邊框+下邊距。提示在CSS樣式中，width（height）屬性定義的寬度（高度）僅指內容部分的寬度（高度），而不是盒模型的寬度（高度）。初學者在學習Div+CSS布局方式時，常會誤認為只能使用div標簽進行布局，從而導致div標簽的濫用。事實上，“盒子”可以是div標簽、標題、段落等任何塊級元素。二、常用的盒模型屬性盒模型主要定義四個區域：內容（content）、填充（padding）、邊框（border）和邊距（margin）。此外，還可以指定盒模型的定位（position）和浮動（float）等屬性，創建靈活多變的排版效果，下面分別進行簡要介紹。1．內容內容區域可以放置任何網頁元素，本小節介紹常用的文本和背景屬性。（1）font-family屬性font-family用于指定網頁中文本的字體集合。取值可以是多個字體，字體之間用逗號分隔。使用示例：body,td,th{font-family:Georgia,TimesNewRoman,Times,serif;}（2）font-style屬性font-style屬性用于設置字體風格，取值可以是：normal（普通）、italic（斜體）或oblique（傾斜）。使用示例：p{font-style:normal;}h1{font-style:italic;}（3）font-size屬性font-size屬性用于設置字體顯示的大小。這里的字體大小可以是絕對大小（xx-small、x-small、small、medium、large、x-large、xx-large）相對大小（larger、smaller）、絕對長度（使用的單位為pt-像素和in-英寸）或百分比，默認值為medium。使用示例：h1{font-size:x-large;}o{font-size:18pt;}li{font-size:90%;}stong{font-size:larger;}（4）font屬性font屬性用作不同字體屬性的略寫，可以同時定義字體的多種屬性，各屬性之間以空格間隔。使用示例：p{font:italicbold16pt華文宋體;}（5）color屬性color顏色屬性允許網頁制作者指定一個元素的顏色。使用示例：h1{color:black;}h3{color:#ff0000;}（6）background-color屬性background-color背景顏色屬性設定一個元素的背景顏色，取值可以是顏色代碼或transparent（透明）。使用示例：body{background-color:white;}h1{background-color:#000080;}為了避免與用戶的樣式表之間的沖突，在指定背景顏色的同時，通常還指定背景圖像。而大多數情況下，background-image:none都是合適的。網頁制作者也可以使用略寫的背景屬性，通常會比背景顏色屬性獲得更好的支持。（7）background-image屬性background-image背景圖像屬性設置一個元素的背景圖像。使用示例：body{background-image:url(/images/bg.gif);}考慮那些不加載圖像的瀏覽者，定義背景圖像時，應同時定義一個類似的背景顏色。（8）background-repeat屬性background-repeat屬性用來描述背景圖片的重復排列方式，取值可以是repeat（沿X軸和Y軸兩個方向重復顯示圖片）、repeat-x（沿X軸方向重復圖片）和repeat-y（沿Y軸方向重復圖片）。使用示例：body{background-image:url(pendant.gif);background-repeat:repeat-y;}（9）background屬性background背景屬性用作不同背景屬性的略寫，可以同時定義背景的多種屬性，各屬性之間以空格間隔。使用示例：p{background:url(/images/bg.gif)yellow;}（10）line-height屬性line-height行高屬性可以接受一個控制文本基線之間的間隔的值。取值可以是normal、數字、長度和百分比。當值為數字時，行高由元素字體大小的量與該數字相乘所得。百分比的值相對于元素字體的大小而定。不允許使用負值。使用示例：p{line-height:120%;}2．填充（Padding）Padding屬性用于描述盒模型的內容與邊框之間的距離，分為padding-top、padding-right、padding-bottom和padding-left四個屬性，分別表示盒模型四個方向的內邊距。屬性值是數值，單位可以是長度、百分比或auto。使用示例：#container{padding-left:20px;}#side{padding-right:6px;}#footer{padding-top:10%;}如果同時指定盒模型四個方向的內邊距，可以使用簡寫方法，就是直接用padding屬性，四個值之間用空格隔開，順序是：上、右、下、左，例如：body{padding:5px10px5px5px;}上面的代碼等同于：body{padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:5px;}根據需要，padding屬性的值也可以不足四個。這種情況下也可以使用簡寫方式，例如：#side{padding:2px;}/*所有的內邊距都設為2px*/#side{padding:1px5px;}/*上、下內邊距為1px，左、右內邊距為5px*/#side{padding:0px2px3px;}/*上內邊距為0，左、右內邊距為2px，下內邊距為3px*/3．邊框（border）border屬性用于描述盒模型的邊框。Border屬性包括border-width、border-color和border-style，這些屬性下面又有分支，下面分別進行簡要介紹。border-width屬性用于設置邊框寬度，又分為：border-top-width、border-right-width、border-bottom-width、border-left-width和border-width屬性，值用長度（thin/medium/thick）或長度單位表示。與margin屬性類似，border-width為簡寫方式，順序為上、右、下、左，值之間用空格隔開。使用示例：img{ border-width:0px;}border-style屬性用于設置對象邊框的樣式，屬性值為CSS規定的關鍵字，平常看不到border是因為其默認值為none。屬性值的名稱和代表意義簡要介紹如下：none：無邊框。dotted：邊框為點線。dashed：邊框為長短線。solid：邊框為實線。double：邊框為雙線。groove、ridge、inset和outset：顯示不同效果的3D邊框（根據color屬性）。border-color屬性用于顯示邊框顏色，分為border-top-color、border-right-color、border-bottom-color、border-right-color和border-color屬性。屬性值為顏色，可以用十六進制表示，也可用RGB()表示，border-color為快捷方式，順序為上、右、下、左，值之間用空格隔開。使用示例：img{border-color:#EC7B37;}如果要同時設置邊框的以上三種屬性，可以使用簡寫方式border，屬性值之間用空格隔開，順序為“邊框寬度邊框樣式邊框顏色”，例如：#layout{border:2pxsolid#EC7B37;}還可以用border-top、border-right、border-bottom、border-left分別作為上、右、下、左邊框的快捷方式，屬性值順序與border屬性相同。4．邊距（Margin）Margin屬性分為margin-top、margin-right、margin-bottom、margin-left四個屬性，分別表示盒模型四個方向的外邊距。屬性值是數值單位，可以是長度、百分比或auto，margin甚至可以設為負值，實現容器與容器之間的重疊顯示，使用示例：#side{margin-top:6px;}h1{margin-right:12.3%;}Margin還有一個簡寫方法，就是直接用margin屬性，四個值之間用空格隔開，順序是“上右下左”，例如：body{margin:5px10px2px10px;}上面的代碼等同于：body{margin-top:5px;margin-right:10px;margin-bottom:2px;margin-left:10px;}同樣，margin屬性的值也可以不足四個，例如：#side{margin:2px}/*所有的邊距都設為2px*/#side{margin:1px5px}/*上下邊距為1px，左右邊距為5px*/#side{margin:0px2px3px}/*上邊距為0，左右邊距為2px，下邊距為3px*/5．布局（Layout）使用以上四類屬性可以指定CSS布局塊的顯示外觀。在進行頁面布局時，還需要一些屬性對布局塊進行定位，指定布局塊在頁面中的呈現方式。（1）position屬性position屬性用于指定元素的位置類型，各個屬性值的含義如下：absolute：屏幕上的絕對位置。位置將依據瀏覽器左上角開始計算。絕對定位使元素可以覆蓋頁面上的其他元素，并可以通過z-index來控制它的層級次序。relative：屏幕上的相對位置。相對定位時，移動元素會導致它覆蓋其他元素。相對定位和絕對定位需要配合top、right、bottom、left來定位具體位置。此外，這四個屬性同時只能使用相鄰的兩個，不能使用top又使用bottom，或同時使用right和left。使用示例：#menu{position:absolute;left:100px;top:0px;}#menuulli{position:relative;right:100px;bottom:0px;}（2）float和clear屬性在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。設置元素浮動后應指明一個寬度，否則它會盡可能地窄；當可供浮動的空間小于浮動元素時，它會跑到下一行，直到擁有足夠放下它的空間。float屬性有三個值left、right、none，用于指定元素飄浮在其他元素的左方或右方，或不浮動。使用示例：#side{height:300px;width:120px;float:left;}相反地，使用clear屬性將禁止元素飄浮。其屬性值有：left、right、both、none，初始值為none。使用示例：clearfloat{clear:both;font-size:1px;line-height:0px;}（3）overflow屬性在規定元素的寬度和高度時，如果元素的寬度或高度不足以顯示全部內容，就要用到overflow屬性。Overflow的屬性值含義如下：visible：增大寬度或高度，以顯示所有內容。hidden：隱藏超出范圍的內容。scroll：在元素的右邊顯示一個滾動條。auto：當內容超出元素寬度或高度時，顯示滾動條，讓高度自適應。使用示例：.nav_main{height:36px;overflow:hidden;}（4）z-index屬性在CSS中允許元素重疊顯示，這樣就有一個顯示順序的問題，z-index屬性用于描述元素的前后位置。z-index使用整數表示元素的前后位置，數值越大，就會顯示在相對越靠前的位置，適用于使用position屬性的元素。z-index初始值為auto，可以使用負數。使用示例：#div1{position:absolute;left:121px;top:441px;width:86px;height:24px; z-index:2;}。。任務3CSS層疊順序任務引入了解了盒模型之后，小明就可以根據網頁的需要來創建不同的CSS樣式，但是CSS樣式有很多種，CSS樣式決定了網頁的最終外觀，那么具體有哪些樣式呢？知識準備“層疊”是指瀏覽器最終為網頁上的特定元素顯示樣式的方式。三種不同的源決定了網頁在瀏覽器中顯示的樣式：由頁面設計者創建的樣式表、自定義樣式和瀏覽器的默認樣式。網頁的最終外觀是由所有這三種源的規則共同作用（或者“層疊”）的結果，最后以最佳方式呈現網頁。實際上，所有在選擇器中嵌套的選擇器都會繼承外層選擇器指定的屬性值，除非另外更改。例如，一個body定義了的顏色值會應用到段落的文本中。有些情況是內部選擇器不繼承周圍選擇器的值，但理論上這些都是特殊的。例如，段落不會繼承文檔body的上邊界值。在介紹CSS層疊順序之前，先簡要介紹一下在網頁中添加CSS樣式常用的四種方式：一、外部樣式外部樣式是把CSS單獨寫到一個CSS文件中，然后在源代碼中以link方式鏈接。例如：<linkhref="layout.css"rel="stylesheet"type="text/css"/>外部樣式不但本頁可以調用，其他頁面也可以調用，在web標準設計中，使用外部樣式，可以不修改頁面，只修改樣式文件，從而改變頁面的樣式。二、內部樣式內部樣式寫在源代碼的head標簽內，以<style>和</style>結尾。這種樣式在頁面內定義，僅在定義的頁面中有效。例如：<styletype="text/css">body{ background-image:url(../images/bg.jpg); background-repeat:no-repeat;}</style>三、行內樣式行內樣式在標簽內以style標記，只針對標簽內的元素有效。例如：<pstyle="font-size:18px;">點擊這里！</p>由于這種樣式嵌在HTML結構中，沒有與內容分離，不便于后期的維護與更新，所以不建議使用。四、導入樣式導入樣式通過使用@importurl標記附加外部樣式表，例如：<styletype="text/css">@importurl("../css/newcss.css");</style>導入樣式一般用在另一個樣式表內部。例如，newcss.css為主頁所用樣式，全局樣式定義在global.css文件中，在newcss.css中添加@importurl("/css/global.css")可以導入全局樣式，從而使代碼達到很好的重用性。如果在頁面中為同一元素定義了多種CSS樣式，按以下規則層疊樣式：ID選擇器定義的規則優先級高于類選擇器定義的規則例如，在類.fontstyle中定義了頁面中的文本顏色為黑色，又使用ID選擇器#content定義了DIV容器中的文本顯示為綠色，則容器中的文本最終顯示為綠色。指定的樣式優先級高于繼承的樣式后面定義的樣式覆蓋前面已定義的樣式行內樣式高于內部或外部樣式。任務4CSS布局塊任務引入接下來小明就可以利用Div+CSS制作網頁，首先就是要創建布局塊，在Dreamweaver中div標簽常用于定義網頁內容中的邏輯區域，那么如何創建和編輯div標簽，如何可視化布局塊呢？知識準備CSS布局與傳統表格（table）布局最大的區別在于：傳統表格布局采用表格定位，通過表格的間距或者用無色透明的GIF圖像控制布局版塊的間距；用CSS布局則主要用塊（例如div）定位，通過指定塊的margin、padding、border等屬性控制版塊的間距，使用ID選擇器定義塊的樣式。CSS布局塊是一個HTML頁面元素，可以將它定位在頁面上的任意位置。更具體地說，CSS布局塊是不帶display:inline的div標簽，或者是包括display:block、position:absolute或position:relative等CSS聲明的任何其他頁面元素。下面是幾個在Dreamweaver中被視為CSS布局塊的元素的示例：div標簽指定了絕對或相對位置的圖像指定了display:block樣式的a標簽指定了絕對或相對位置的段落提示出于可視化呈現的目的，CSS布局塊不包含內聯元素（也就是代碼位于一行文本中的元素）或段落之類的簡單塊元素。一、創建div標簽本節將介紹Web標準中常用的一種CSS布局塊——div標簽的創建方法。div標簽常用于定義網頁內容中的邏輯區域，通常被稱為“塊”。使用div標簽可以將內容塊居中，創建列效果以及創建不同的顏色區域等。可以通過插入div標簽，并應用CSS定位樣式創建頁面布局。在Dreamweaver2021中創建div標簽的操作步驟如下：（1）在“文檔”窗口的“設計”視圖中，將插入點放置在要顯示div標簽的位置。（2）執行下列操作之一，彈出如圖8-3所示的“插入Div”對話框：執行“插入”/“Div”菜單命令。執行“插入”/“HTML”/“Div”菜單命令。在“HTML”插入面板中，單擊“Div”按鈕。（3）在“插入Div”對話框中指定插入位置、要應用的類以及div標簽的ID。插入：用于選擇div標簽的位置。如果選擇“在標簽開始之后”或“在標簽結束之前”，則還要選擇一個已有的標簽名稱。類：指定要應用于div標簽的類樣式。如果附加了樣式表，則該樣式表中定義的所有類都將顯示在“類”下拉列表中。ID：指定用于標識div標簽的唯一名稱。如果附加了樣式表，則該樣式表中定義的所有ID（除當前文檔中已有的塊的ID）都將出現在列表中。新建CSS規則：單擊該按鈕打開如圖8-4所示的“新建CSS規則”對話框。圖8-3“插入Div”對話框圖8-4“新建CSS規則”對話框（4）單擊“插入Div”對話框中的“確定”按鈕關閉對話框，即可插入一個div標簽。在“設計”視圖中，div標簽默認以虛線框的形式出現，并顯示占位文本，如圖8-5（a）所示。將指針移到虛線框的邊緣上時，虛線框高亮顯示，如圖8-5（b）所示。（a）（b）圖8-5創建div標簽二、編輯div標簽插入div標簽之后，就可以在“CSS設計器”面板中查看和編輯應用于div標簽的規則，或在標簽中添加內容了。操作步驟如下：（1）選中div標簽。執行以下操作之一選擇div標簽：單擊div標簽的邊框在div標簽內單擊，然后按兩次Ctrl+A（Windows）或Command+A（Macintosh）在div標簽內單擊，然后在狀態欄上單擊div標簽ID（2）在div標簽中添加內容。選中div標簽中的占位文本，然后鍵入內容，或按Delete鍵刪除占位文本，然后以在頁面中添加內容的方式添加內容，如圖8-6所示。（3）打開“CSS設計器”面板查看或定義規則。執行“窗口”/“CSS設計器”命令打開“CSS設計器”面板，當前div標簽已應用的規則顯示在“選擇器”窗格中。如果沒有為當前選中的div標簽定義CSS規則，則顯示為空。（4）根據需要編輯CSS規則。例如，要定義如圖8-6所示的div標簽寬450px，高150px，邊框為1px深灰色實線，且在頁面上水平居中，可以定義如下的規則：#content{width:450px;height:150px;border:1pxsolid#666666;margin-right:auto;margin-left:auto;}效果如圖8-7所示。圖8-6在div標簽中添加內容圖8-7CSS布局塊效果三、可視化CSS布局塊Dreamweaver提供了多個可視化助理，用于查看CSS布局塊。例如，在設計時可以為CSS布局塊啟用外框、背景和框模型。將鼠標指針移動到布局塊上時，可以顯示選定CSS布局塊屬性的工具提示。默認情況下，Dreamweaver2021在“設計”視圖中顯示div標簽的外框，且當鼠標指針移到div標簽外框上時高亮顯示，如圖8-8所示。如果不希望在頁面上顯示CSS布局塊外框，可以執行“查看”/“設計視圖選項”/“可視化助理”/“CSS布局外框”菜單命令取消顯示，如圖8-9所示。圖8-8div標簽的外框圖8-9取消顯示CSS布局外框下面簡要介紹一下如圖8-9所示的CSS布局塊可視化助理列表的含義。CSS布局背景：顯示各個CSS布局塊的臨時指定背景顏色，并隱藏通常出現在頁面上的其他所有背景顏色或圖像，如圖8-10所示。圖8-10顯示CSS布局背景注意每次啟用可視化助理查看CSS布局塊背景時，Dreamweaver使用一個算法自動為每個CSS布局塊分配一種不同的背景顏色，幫助用戶區分不同的CSS布局塊。用戶無法自行指定布局背景顏色。CSS布局框模型：顯示所選CSS布局塊的框模型（即填充和邊距）。如圖8-11所示，設置了如圖8-10所示的ID為head的布局塊上下左右填充10px，上下邊距為10px，左右邊距為5px的效果。CSS布局外框：顯示頁面上所有CSS布局塊的外框。取消顯示CSS布局外框后的效果如圖8-12所示。圖8-11顯示CSS布局框模型圖8-12取消顯示CSS布局外框如果要更改div標簽的高亮顏色或禁用高亮顯示功能，可以打開“首選項”對話框進行設置，步驟如下：（1）執行“編輯”/“首選項”命令，打開“首選項”對話框。（2）在左側的“分類”列表中選擇“標記色彩”。（3）單擊“鼠標滑過”顏色拾取框，并使用顏色選擇器來選擇一種高亮顏色（或在文本框中輸入高亮顏色的十六進制值），如圖8-13所示。圖8-13設置高亮顏色若要啟用或禁用高亮顯示功能，則選中或取消選中“鼠標滑過”的“顯示”復選框。提示這些選項會影響指針滑過時，Dreamweaver高亮顯示的所有對象，例如表格。任務5常用CSS布局版式任務引入小明已經基本掌握了CSS布局塊的創建，以及利用CSS規則定位布局塊，其實在網頁制作中有一些常見的CSS布局版式，掌握了這幾種布局，在今后制作網頁的時候就可以信手拈來，具體要怎么創建呢？知識準備前面幾節介紹了CSS布局塊的創建，以及利用CSS規則定位布局塊的方法。本節將介紹網頁制作中常見的幾種CSS布局版式。本節將綜合前幾節的知識點，希望通過本節的學習，讀者能從原來的表格布局跨入到web標準布局，會使用web標準制作出常見的頁面。一、一列布局一列布局常用于顯示正文或文章內容的頁面，示意圖如圖8-14所示。圖8-14一列布局示意圖（1）新建一個HTML頁面，并在頁面中插入一個div標簽，命名為head。（2）打開“CSS設計器”面板，單擊“添加CSS源”按鈕，在彈出的下拉列表中選擇“在頁面中定義”命令。然后單擊“添加選擇器”按鈕，輸入選擇器名稱#head。（3）切換到“屬性”面板的“布局”類別，設置寬度為500px，高度為60px，下邊距為8px；為便于觀察效果，切換到“背景”類別，設置背景顏色為#ADDD17。切換到“代碼”視圖，可以看到如下所示的代碼：<styletype="text/css">#head{ width:500px; height:60px; background-color:#ADDD17; margin-bottom:8px; margin-right:auto; margin-left:auto; }</style>（4）按照以上三步的方法，插入兩個div標簽content和foot，然后定義CSS規則#content和#foot，分別用于設置div標簽content和foot的外觀。代碼如下：#content{ width:500px; height:200px; background-color:#FFB5B5; margin-bottom:8px; margin-right:auto; margin-left:auto;}#foot{ width:500px; height:40px; background-color:#31DBAE; margin-right:auto; margin-left:auto;}此時預覽頁面，可以看到如圖8-15所示的效果。細心的讀者可能會發現，div標簽與頁面的左、上顯示有邊距，即使指定div標簽的左、上邊距為0，仍顯示有空白。事實上，這是body標簽的默認邊距。圖8-15一列固定寬度布局效果（5）打開CSS設計器，添加選擇器body，設置邊距為0，代碼如下：body{ margin:0px;}此時預覽頁面，可以看到div標簽head與頁面頂端沒有空白了。如圖8-14所示。如果希望頁面內容的顯示寬度隨著瀏覽器的寬度改變而改變，可以使用自適應寬度的div標簽。使用過表格布局的用戶應該會想到使用寬度的百分比。例如以下代碼：<styletype="text/css">#head{ width:80%; height:60px; background-color:#ADDD17; margin:0pxauto8px;}</style>提示如果不設置盒模型的寬度，它默認是相對于瀏覽器顯示的，即自適應寬度。例如：#content{ height:200px; background-color:#FFB5B5;}二、兩列布局本小節以常見的左列固定、右列寬度自適應為例，介紹兩列布局的創建方法。（1）按照上一節的方法，在頁面中插入兩個div標簽，分別命名為#nav和#content。<divid="nav">此處顯示id"nav"的內容</div><divid="content">此處顯示id"content"的內容</div>由于div為塊狀元素，默認情況下占據一行的空間，因此插入的兩個布局塊上下排列。要想讓下面的div移到右側，就需要借助css的浮動屬性float來實現。（2）打開“CSS設計器”面板，單擊“添加CSS源”按鈕，在彈出的下拉列表中選擇“在頁面中定義”命令。然后單擊“添加選擇器”按鈕，輸入選擇器名稱#nav。（3）切換到“屬性”面板的“布局”類別，設置寬度為120px，高度為200px；為便于觀察效果，切換到“背景”類別，設置背景顏色為#FFCCFF。切換到“代碼”視圖，可以看到如下所示的代碼：<styletype="text/css">#nav{ width:120px; height:200px; background-color:#FFCCFF; float:left;}</style>此時的布局效果如圖8-16所示。可以看到第二個div標簽已移到右側。（4）在CSS設計器中創建規則#content，定義div標簽content的外觀。代碼如下：#content{ height:200px; width:240px; background-color:#99FFFF;}此時預覽頁面，效果如圖8-17所示。布局塊content的實際顯示寬度只有120px，而不是指定的240px，這是因為絕對定位元素的位置依據瀏覽器左上角開始計算，布局塊content的一部分與nav重疊。接下來設置邊距定位布局塊。圖8-16浮動效果圖8-17頁面效果（5）打開CSS設計器，設置布局塊content的左邊距為120px，代碼如下：#content{ height:200px; width:240px; background-color:#99FFFF; margin-left:120px;}此時的頁面效果如圖8-18所示。圖8-18頁面效果通常頁面內容都居中顯示，接下來的步驟使兩列布局居中。在上一節介紹了一列居中的方法，可以使用同樣的方法將兩列放置在一列中，使布局居中。（6）切換到“代碼”視圖，選中兩個div的代碼，然后執行“插入”/“div”菜單命令，在彈出的對話框中指定div標簽為main，即可將兩個div標簽放入一個父標簽中。（7）定義規則#main，指定布局塊寬度為360px，左、右邊距為auto，最終代碼如下所示：<head><metacharset="utf-8"><title>無標題文檔</title><styletype="text/css">#nav{ width:120px; height:200px; background-color:#FFCCFF; float:left;}#content{ height:200px; width:240px; background-color:#99FFFF; margin-left:120px;}#main{ margin:0pxauto; width:360px;}</style></head><body><divid="main"><divid="nav">此處顯示id"nav"的內容</div><divid="content">此處顯示id"content"的內容</div></div></body>三、三列布局常用的三列布局結構是左列和右列固定，中間列固定寬度，或根據瀏覽器寬度自適應。創建步驟如下：（1）在頁面中插入三個div標簽，分別命名為#left、#content和#right。<divid="left">此處顯示id"left"的內容</div><divid="right">此處顯示id"right"的內容</div><divid="content">此處顯示id"content"的內容</div>（2）打開“CSS設計器”面板，單擊“添加CSS源”按鈕，在彈出的下拉列表中選擇“在頁面中定義”命令。然后單擊“添加選擇器”按鈕，輸入選擇器名稱#left。切換到“屬性”面板的“布局”類別，設置寬度為120px，高度為400px，向左浮動；為便于觀察效果，切換到“背景”類別，設置背景顏色為#99FF99。（3）按上一步同樣的方法定義CSS規則#right，寬度為200px，高度為400px，向右浮動，背景顏色為#99FF99。（4）從上一節的例子可以看出，要讓中間的布局塊按指定寬度顯示，應設置左、右邊距。按上一步同樣的方法定義CSS規則#content，高度為400px，背景顏色為#99FFFF，左邊距125px，右邊距205px。切換到“代碼”視圖，可以看到如下所示的代碼：<styletype="text/css">#left{ background:#99FF99; height:400px; width:120px; float:left;}#right{ background:#99FF99;圖8-19頁面顯示效果 圖8-19頁面顯示效果 width:200px; float:right;}#content{ background:#99FFFF; height:400px; margin:0205px0125px; }</style></head><body><divid="left">此處顯示id"left"的內容</div><divid="right">此處顯示id"right"的內容</div><divid="content">此處顯示id"content"的內容</div></body>預覽頁面效果，如圖8-19所示。綜合案例Div標簽應用實例Div標簽在網頁布局中占有十分重要的地位，不僅可以精確定位網頁元素，還可以配合表單和動作制作出許多經典的特效。下面將用一個簡單實例演示div標簽的簡單特效。本例的最終效果如圖8-20所示，當鼠標指針移動到右側的縮略圖上時，左側的圖像被隱藏，顯示另一幅圖像，如圖8-21所示；鼠標指針離開縮略圖時，再次顯示原來的圖像。圖8-20實例效果1圖8-21實例效果2（1）啟動Dreamweaver2021，新建一個文檔，設置背景圖像，字體為“方正粗倩簡體”，顏色為#000，大小為100px，標題為“流金歲月”并保存。（2）單擊“插入”/“HTML”面板中的“Div”圖標，在彈出的“插入Div”對話框中指定ID為pic1。刪除Div標簽中的占位文本，插入一幅圖像。圖8-22頁面效果（3）打開“CSS設計器”面板，單擊“添加CSS源”按鈕，在彈出的下拉列表中選擇“在頁面中定義”；單擊“添加選擇器”按鈕，輸入選擇器名稱#pic1；在“布局”屬性列表中設置width:408px，height:398px；切換到“文本”屬性列表，設置text-align:center，此時的頁面效果如圖8-22所示。圖8-22頁面效果（4）單擊“插入”/“HTML”面板中的“Div”圖標，在彈出的“插入Div”對話框中指定ID為liu。刪除Div標簽中的占位文本，輸入文字“流”。（5）打開“CSS設計器”面板，在“CSS源”列表中選擇<style>；單擊“添加選擇器”按鈕，輸入選擇器名稱#liu，然后在“布局”屬性列表中設置width:120px，height:115px，padding-top:10px；切換到“文本”屬性列表，設置text-align:center；切換到“背景”屬性列表，設置background-color:#F60。本步使用CSS設計器可視化定義CSS規則，如果熟悉CSS代碼規范，建議直接在“代碼”視圖中編寫代碼以提高效率。（6）按照上面兩步的方法再插入三個div標簽，ID分別為jin、sui、yue。刪除占位文本后，分別輸入文本“金”“歲”和“月”。（7）打開“CSS設計器”面板，單擊“添加選擇器”按鈕，添加三個選擇器#jin、#sui和#yue，并分別定義規則，代碼如下：#jin{ width:120px; height:115px; padding-top:10px; text-align:center;圖8-23頁面效果 background-color:#9966FF;圖8-23頁面效果}#sui{ width:120px; height:115px; padding-top:10px; text-align:center; background-color:#999900;}#yue{ width:120px; height:115px; padding-top:10px;text-align:center; background-color:#99CCFF;}此時的頁面效果如圖8-23所示。（8）上面的代碼有些冗余，添加一個組選擇器#liu,#jin,#sui,#yue定義div標簽的寬、高、文本對齊方式和上填充，修改后的代碼如下：<styletype="text/css">body{ background-image:url(../images/bg2.jpg); color:#000000; font-family:"方正粗倩簡體"; font-size:100px;}#liu,#jin,#sui,#yue{ width:120px; height:115px; text-align:center; padding-top:10px;}#liu{ background-color:#FF6600;}#jin{ background-color:#9966FF;}#sui{ background-color:#999900;}#yue{ background-color:#99CCFF;}</style>接下來使用position屬性對布局塊進行定位。（9）打開“CSS設計器”面板，修改選擇器#sui的規則。切換到“布局”屬性列表，設置position:absolute，left:450px，top:160px.。同樣的方法，修改選擇器#liu、#jin、#yue的規則定義。修改后的代碼如下：<styletype="text/css">body{ background-image:url(../images/bg2.jpg); color:#000000; font-family:"方正粗倩簡體"; font-size:100px;}#pic1{ width:408px; height:398px; text-align:center;}#liu,#jin,#sui,#yue{ width:120px; height:115px; text-align:center; padding-top:10px; position:absolute;}#liu{ background-color:#FF6600; left:660px; top:160px;}#jin{ background-color:#9966FF; left:550px;圖8-24頁面效果 top:255px;圖8-24頁面效果}#sui{ background-color:#999900; left:450px; top:160px;}#yue{ background-color:#99CCFF; left:550px; top:55px;}</style>此時的頁面效果如圖8-24所示。圖8-25頁面效果（10）單擊“插入”/“HTML”面板中的“Div”圖標，在彈出的“插入Div”對話框中指定ID為slt。刪除Div標簽中的占位文本，插入一幅圖像。然后添加選擇器#slt定位圖像。代碼如下：圖8-25頁面效果#slt{ width:92px; height:92px;position:absolute; left:570px; top:180px;}此時的頁面效果如圖8-25所示。（11）打開“CSS設計器”面板，修改選擇器#pic1的visibility屬性為hidden，隱藏div布局塊pic1。此時，在“設計”視圖中仍可看到布局塊pic1，切換到“實時視圖”中可以看到布局塊pic1已隱藏。（12）為便于在“設計”視圖中編輯并查看頁面效果，可以在“代碼”視圖中將布局塊pic1相關的代碼進行注釋。如下所示：<!--<divid="pic1"><imgsrc="../images/p1.jpg"width="407"height="397"alt="tu1"/></div>-->（13）切換到“代碼”視圖，在布局塊pic1相關代碼下添加一行如下代碼，即可在頁面中插入一個div布局塊pic2，并插入圖像：<!--<divid="pic1"><imgsrc=

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論