CSS+Div布局（課堂PPT）

1、1網(wǎng)頁設(shè)計與制作Dreamweaver CC 標(biāo)準(zhǔn)教程21. 盒子模型2. 布局技術(shù)3. “上中下”布局4. “左中右”布局3盒子模型是CSS樣式布局的重要概念。網(wǎng)頁中元素都占據(jù)一定的空間，除了元素內(nèi)容之外還包括元素周圍的空間，一般地把元素和它周圍空間所形成的矩形區(qū)域稱為盒子（box）。從布局的角度看，網(wǎng)頁是由很多盒子組成，根據(jù)需要將諸多盒子在網(wǎng)頁中進(jìn)行排列和分布，就形成了網(wǎng)頁布局。48.1.1 盒子結(jié)構(gòu)8.1.2 盒子屬性5盒子模型通過定義模型結(jié)構(gòu)，描述網(wǎng)頁元素的顯示方式和元素之間的相互關(guān)系，確定網(wǎng)頁元素在網(wǎng)頁布局中的空間和位置。6盒子模型的結(jié)構(gòu)由四個部分組成：content（內(nèi)容）、pad

2、ding（內(nèi)邊距或填充）、border（邊框）和margin（外邊距），如圖8-1所示。7在CSS樣式中，將盒子模型的內(nèi)邊距、邊框和外邊距，按top、bottom、left、right的四個方向，分別進(jìn)行定義和設(shè)置，描述盒子屬性。8例如，在網(wǎng)頁中創(chuàng)建一個標(biāo)簽，ID標(biāo)識為Div1，并在其中插入一個圖像，代碼如下：#apDiv1 position:absolute; width:300px; height:181px; padding-top: 15px; padding-right: 18px;padding-bottom: 15px;padding-left: 18px;border: 30p

3、x solid #333;910在CSS+Div布局中，標(biāo)簽是盒子模型的主要載體，具有分割網(wǎng)頁的功能。CSS樣式中的position屬性和float屬性決定這些標(biāo)簽的相互關(guān)系和分布排列的位置。118.2.1 標(biāo)簽8.2.2 position定位屬性8.2.3 浮動方式12一個塊狀容器類標(biāo)簽，即在和之間可以容納各種HTML元素，同時也構(gòu)成一個獨立的矩形區(qū)域。無論在頁面中使用多少個標(biāo)簽，標(biāo)簽之間僅存在并列關(guān)系和內(nèi)嵌關(guān)系。1314使用div#box1 height: 120px;width: 200px; background-color: #C93;margin: 10px;padding: 10

4、px;#box2 height: 60px;width: 100px;background-color: #F63; margin: 10px;padding: 10px;#box3 height: 100px;width: 300px;background-color: #6CF;box1 box2box315position（定位）屬性包括了四種屬性值：static，relative，absolute和fixed.Static靜態(tài)定位為默認(rèn)值，網(wǎng)頁元素遵循HTML的標(biāo)準(zhǔn)定位規(guī)則，即網(wǎng)頁各種元素按照“前后相繼”的順序進(jìn)行排列和分布。Relative相對定位，網(wǎng)頁元素也遵循HTML的標(biāo)準(zhǔn)定位規(guī)

5、則，但需要為網(wǎng)頁元素相對于原始的標(biāo)準(zhǔn)位置設(shè)置一定的偏移距離。CSS+Div的布局方式采用了標(biāo)準(zhǔn)定位規(guī)則的布局方式，這也是系統(tǒng)的默認(rèn)方式。16absolute絕對定位方式，網(wǎng)頁元素不再遵循HTML的標(biāo)準(zhǔn)定位規(guī)則，脫離了“前后相繼”的定位關(guān)系，以該元素的上級元素為基準(zhǔn)設(shè)置偏移量進(jìn)行定位。Fixed固定定位與絕對定位類似，也脫離了“前后相繼”的定位規(guī)則，但元素的定位是以瀏覽器窗口為基準(zhǔn)進(jìn)行。17float屬性包含三個屬性值：Left控制網(wǎng)頁元素向左浮動，Right控制網(wǎng)頁元素向浮右動，None沒有浮動。clear屬性包括三個屬性值：left清除向左浮動，right清除向浮右動，none沒有清除。cl

6、ear屬性與float屬性配合使用，清除各種浮動。18無浮動19#box1 height: 100px; width: 150px; background-color: #F90; #box2 height: 100px; width: 200px; background-color: #C30; #box3 height: 100px; width: 250px; background-color: #3FF; 20左右浮動21#box1 height: 100px; width: 150px; background-color: #F90; float: left; #box2 heigh

7、t: 100px; width: 200px; background-color: #C30; float: left; #box3 height: 100px; width: 250px; background-color: #3FF; float: right; 22全部左浮動23#box1 height: 100px; width: 150px; background-color: #F90; float: left; #box2 height: 100px; width: 200px; background-color: #C30; float: left; #box3 height:

8、 100px; width: 250px; background-color: #3FF; float: left; 24使用左清除25#box1 height: 100px; width: 150px; background-color: #F90; float: left; #box2 height: 100px; width: 200px; background-color: #C30; float: left; #box3 height: 100px; width: 250px; background-color: #3FF; float: left; clear: left; 26在

9、“上中下”布局中，標(biāo)簽按照前后相繼的順序排列，分割網(wǎng)頁空間，不需要使標(biāo)簽浮動，其大小和外觀由CSS樣式控制。278.3.1 課堂案例-網(wǎng)頁設(shè)計大賽8.3.2 在Dreamweaver中插入標(biāo)簽28案例學(xué)習(xí)目標(biāo)：學(xué)習(xí)“上中下”布局的方法。案例知識要點：在【插入】面板【HTML】選項卡中，使用【Div】按鈕 創(chuàng)建網(wǎng)頁布局結(jié)構(gòu)；在【CSS設(shè)計器】面板中，使用【添加選擇器】按鈕 創(chuàng)建標(biāo)簽的ID樣式，并采用缺省的【position】和【float】屬性，完成“上中下”的布局。素材所在位置：光盤/案例素材/ch08/課堂案例-網(wǎng)頁設(shè)計大賽。案例布局要求如圖8-9所示，案例效果如圖8-10所示。293031

10、在【插入Div標(biāo)簽】對話框中，各個選項含義如下：【ID】：可以在下拉框中直接輸入或選擇一個名稱，為標(biāo)簽設(shè)置網(wǎng)頁中的唯一標(biāo)識?！绢悺浚嚎梢栽谙吕蛑兄苯虞斎牖蜻x擇一個名稱，為標(biāo)簽設(shè)置一個類樣式，設(shè)置網(wǎng)頁布局和外觀?！拘陆–SS規(guī)則】：為標(biāo)簽新建一個ID樣式或類樣式?！静迦搿浚浩涓鞣N選項決定了標(biāo)簽之間是并列關(guān)系還是嵌入關(guān)系，其選項包括：32“在插入點”表示在插入點插入一個標(biāo)簽，嵌入已經(jīng)存在的標(biāo)簽中，如果插入點前有內(nèi)容，那么換行插入?！霸谶x定內(nèi)容旁換行”表示在該文字所在行插入一個標(biāo)簽，嵌入已經(jīng)存在的標(biāo)簽中，保留原內(nèi)容?！霸跇?biāo)簽之前”表示插入一個標(biāo)簽，與指定的標(biāo)簽形成并列關(guān)系?！霸跇?biāo)簽之后”表示插入一

11、個標(biāo)簽，與指定的標(biāo)簽形成并列關(guān)系。33“在開始標(biāo)簽之前”表示在標(biāo)簽之前，插入一個標(biāo)簽。“在開始標(biāo)簽之后”表示在標(biāo)簽之后，插入一個標(biāo)簽。34在“左中右”布局中，首先插入若干個標(biāo)簽，并按照前后相繼順序排列；然后，設(shè)置CSS樣式的【float】和【clear】屬性，使標(biāo)簽浮動，實現(xiàn)“左中右”的布局；最后，設(shè)置CSS樣式其他屬性控制標(biāo)簽的外觀。358.4.1 課堂案例-連鎖餐廳8.4.2 使用CSS樣式布局36案例學(xué)習(xí)目標(biāo)：學(xué)習(xí)“左中右”布局的方法。案例知識要點：在【插入】面板【HTML】選項卡中，使用【Div】按鈕 ，插入標(biāo)簽；在【插入Div】對話框中，使用【新建CSS規(guī)則】按鈕，創(chuàng)建標(biāo)簽的相關(guān)樣式

12、，設(shè)置【position】、【float】和【clear】屬性，完成“左中右”的網(wǎng)頁布局。素材所在位置：光盤/案例素材/ch08/課堂案例-連鎖餐廳。案例布局要求如圖8-38所示，案例效果如圖8-39所示。3738391. 在Dreamweaver中標(biāo)簽的浮動設(shè)置2. 常用布局形式在CSS+Div布局中，將網(wǎng)頁版面分割成左側(cè)，中部和右側(cè)三個部分的形式。將網(wǎng)頁分割成左右兩個部分。404142438.5.1 練習(xí)案例-電子產(chǎn)品8.5.2 練習(xí)案例-裝修公司44案例練習(xí)目標(biāo)：練習(xí)“上中下”布局的方法。案例操作要點：1創(chuàng)建文件名稱為index.html的文檔，并將所有樣式存放在product樣式文檔中

13、。插入ID名稱為container的標(biāo)簽，寬度為1000px，并居中對齊。2在container的標(biāo)簽中，插入ID名稱為header，menu，banner，info和footer的5個標(biāo)簽，寬度均為1000px，高度分別為38px，34px，468px，165px和64px。3在menu的標(biāo)簽中，插入名稱為nav的標(biāo)簽，寬度450px，高度34px，左外邊距550px。454利用#menu樣式為menu的標(biāo)簽添加圖像背景。在#nav標(biāo)簽中，輸入文字“公司介紹 產(chǎn)品展示 客戶服務(wù) 人員招募 互動社區(qū)”，并設(shè)置#nav樣式，字體大小為16px，行高度為30px，顏色為#FFF。5設(shè)置#nav a

14、:link，#nav a:visited樣式屬性，顏色為#FFF，文字裝飾為無，設(shè)置#nav a:hover樣式屬性，文字裝飾為下劃線，完成導(dǎo)航條的制作。6在ID名稱為info的標(biāo)簽中，插入1*3表格，寬度為100%，將三個圖像分別插入到單元格中，設(shè)置#info樣式背景為黑色。素材所在位置：光盤/案例素材/ch08/練習(xí)案例-電子產(chǎn)品。案例布局要求如圖8-67所示，案例效果如圖8-68所示。464748案例練習(xí)目標(biāo)：練習(xí)“左中右”布局的方法。案例操作要點：1創(chuàng)建文件名稱為index.html的新文檔，并將所有樣式存放在decoration樣式文檔中。插入ID名稱為container的標(biāo)簽，寬度

15、為1000px，高度為860px，并居中對齊。2在container的標(biāo)簽中，插入ID名稱為menu，info1，info2，info3和footer的5個標(biāo)簽，寬度和高度分別為1000px和107px，160px和670px，320px和670px，310px和670px，1000px和83px。其中ID名稱為info1，info2，info3的標(biāo)簽為左浮動，ID名稱為footer的標(biāo)簽取消左浮動。493在footer標(biāo)簽中，插入兩個標(biāo)簽，其類樣式名稱為.f1和.f2，其寬度分別為580px和280px，并設(shè)置它們?yōu)樽蟾印?設(shè)置頁面屬性的背景為#CCC，邊距為為0，字體大小為12px，文字顏色為#999。設(shè)置#container樣式的背景為白色。5標(biāo)題樣式.text1，文本大小為30px，顏色為#451B08，左對齊；副標(biāo)題樣式.text2，文本大小為18px；職位標(biāo)題文本樣式.text3，文本大小14px，下部內(nèi)邊距5px，下