網(wǎng)頁(yè)設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程課件 第9章 Div+CSS網(wǎng)頁(yè)布局技術(shù)

第9章Div+CSS網(wǎng)頁(yè)布局技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程9.1.1

什么是Web標(biāo)準(zhǔn)Web標(biāo)準(zhǔn)即網(wǎng)頁(yè)標(biāo)準(zhǔn)，是指有關(guān)于全球資訊網(wǎng)各個(gè)方面的定義和說(shuō)明的正式標(biāo)準(zhǔn)以及技術(shù)規(guī)范。網(wǎng)頁(yè)主要由結(jié)構(gòu)、表現(xiàn)和行為三部分組成，對(duì)應(yīng)的標(biāo)準(zhǔn)也分三方面：1.結(jié)構(gòu)結(jié)構(gòu)用于對(duì)網(wǎng)頁(yè)中用到的信息進(jìn)行分類與整理。結(jié)構(gòu)標(biāo)準(zhǔn)語(yǔ)言主要包括XHTML和XML。2.表現(xiàn)表現(xiàn)用于對(duì)信息進(jìn)行版式、顏色和大小等形式進(jìn)行控制。表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言主要包括CSS。3.行為行為是指文檔內(nèi)部的模型定義及交互行為的編寫(xiě)，用于編寫(xiě)交互式的文檔。行為標(biāo)準(zhǔn)主要包括DOM和ECMAScript。9.1.2

Div概述Div全稱為DIVision，即劃分，用于在頁(yè)面中定義一個(gè)區(qū)域，使用CSS樣式控制Div元素的表現(xiàn)效果。Div可以將復(fù)雜的網(wǎng)頁(yè)內(nèi)容分割成獨(dú)立的區(qū)塊，一個(gè)Div可以放置一個(gè)圖片，也可以顯示一行文本。簡(jiǎn)單來(lái)講，Div就是容器，可以存放任何網(wǎng)頁(yè)顯示元素。Div具有以下3個(gè)優(yōu)點(diǎn)：(1)節(jié)省頁(yè)面代碼(2)加快網(wǎng)頁(yè)瀏覽速度(3)便于網(wǎng)站推廣9.1.3創(chuàng)建Div在使用Div布局網(wǎng)頁(yè)前需要現(xiàn)在網(wǎng)頁(yè)中創(chuàng)建Div區(qū)塊，在Dreamweaver中，用戶可以在“代碼”視圖中添加<div></div>標(biāo)簽創(chuàng)建Div，也可以通過(guò)執(zhí)行“插入”命令或通過(guò)“插入”面板插入Div。9.1.4實(shí)操案例：琳瑯首飾本案例將以琳瑯首飾網(wǎng)頁(yè)的制作為例，介紹Div和CSS的應(yīng)用。目錄Contents9.1

CSS與Div布局基礎(chǔ)9.2

CSS布局方法9.3

課堂實(shí)戰(zhàn)9.4

課后練習(xí)9.2.1盒子模型盒子模型時(shí)CSS樣式布局的重要概念，掌握盒子模型及其使用方法，才可以真正地控制頁(yè)面中的各種元素。盒子模型是指將頁(yè)面中的各個(gè)元素及其周?chē)目臻g看成一個(gè)盒子，該盒子占據(jù)著一定的頁(yè)面空間。用戶可以通過(guò)調(diào)整盒子的邊框和距離等參數(shù)，來(lái)調(diào)節(jié)盒子的位置。一個(gè)盒子模型由內(nèi)容（content）、邊框（border）、填充（padding）和空白邊（margin）這4個(gè)部分組成。9.2.2外邊距設(shè)置margin屬性可以設(shè)置外邊距，margin邊界環(huán)繞在該元素的content區(qū)域四周。若margin的值為0，則margin邊界與border邊界重合。margin屬性接受任何長(zhǎng)度單位，可以使用像素、毫米、厘米和em等，也可以設(shè)置為auto（自動(dòng)）。常見(jiàn)做法是為外邊距設(shè)置長(zhǎng)度值，允許使用負(fù)值。9.2.3外邊距合并外邊距合并是指當(dāng)兩個(gè)垂直外邊距相遇時(shí)，他們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。在實(shí)踐中對(duì)網(wǎng)頁(yè)進(jìn)行布局時(shí)，它會(huì)造成許多混淆。以下3種情況都有可能出現(xiàn)外邊距合并的現(xiàn)象：當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒(méi)有內(nèi)邊距或邊框把外邊距分隔開(kāi)），它們的上/或下外邊距也會(huì)發(fā)生合并。外邊距甚至可以與自身發(fā)生合并。假設(shè)有一個(gè)空元素，它有外邊距，但是沒(méi)有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們也會(huì)發(fā)生合并。9.2.4內(nèi)邊距設(shè)置CSS中的padding屬性控制元素的內(nèi)邊距。padding屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域，接受長(zhǎng)度值或百分比值，但不允許使用負(fù)值。若希望所有h1元素的各邊都有5像素的內(nèi)邊距，代碼描述如下：h1{padding:5px;}9.2.5實(shí)操案例：時(shí)刻餐廳本案例將練習(xí)制作時(shí)刻餐廳網(wǎng)頁(yè)，對(duì)Div和CSS的應(yīng)用進(jìn)行介紹。目錄Contents9.1

CSS與Div布局基礎(chǔ)9.2

CSS布局方法9.3

課堂實(shí)戰(zhàn)9.4

課后練習(xí)9.3課堂實(shí)戰(zhàn)飛揚(yáng)咖啡本案例將練習(xí)制作飛揚(yáng)咖啡網(wǎng)頁(yè)，對(duì)Div和CSS的創(chuàng)建與應(yīng)用進(jìn)行介紹。目錄Contents9.1

CSS與Div布局基礎(chǔ)9.2

CSS布局方法9.3

課堂實(shí)戰(zhàn)9.4

課后練習(xí)9.4課后練習(xí)1.湖江船業(yè)根據(jù)所學(xué)內(nèi)容制作湖江船業(yè)網(wǎng)頁(yè)。2.安居養(yǎng)老根據(jù)所學(xué)內(nèi)容