DreamweaverCS6 HTML CSS DIV JavaScript網(wǎng)站開發(fā)網(wǎng)頁(yè)布局方式表格與DIVCSS

第四章網(wǎng)頁(yè)布局方式---表格與DIV+CSS課程案例一:電影介紹網(wǎng)頁(yè)4.1本章有兩個(gè)課程案例,第一個(gè)是通過(guò)學(xué)習(xí)表格地布局方式,完成電影介紹地網(wǎng)頁(yè),根據(jù)百度百科提供電影《阿凡達(dá)》地網(wǎng)頁(yè)資料,模仿百度百科地網(wǎng)頁(yè)效果,完成介紹《阿凡達(dá)》電影地網(wǎng)頁(yè)。準(zhǔn)備知識(shí):網(wǎng)頁(yè)地布局方式-表格4.2表格4.2.1課堂練習(xí):下載圖片地表格4.2.2單元格地合并與拆分4.2.3課堂練習(xí):推薦模塊制作4.2.4課堂練習(xí):菜單模塊4.2.6增加或刪除行或列4.2.5表格4.2.11網(wǎng)頁(yè)布局方式介紹在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程,為了將網(wǎng)頁(yè)元素按照一定地順序與位置進(jìn)行排列,所以要對(duì)網(wǎng)頁(yè)進(jìn)行布局,所謂地布局,即是在有限地版面空間里,將構(gòu)成頁(yè)面地元素（文字,圖片等）根據(jù)特定內(nèi)容地需要進(jìn)行組合排列,并達(dá)到一定地視覺效果。常用地網(wǎng)頁(yè)布局方式是采用表格與DIV+CSS兩種方式。表格就是早期廣泛流行地網(wǎng)頁(yè)布局方式,使用方便,操作簡(jiǎn)單,但是多個(gè)表格地嵌套,會(huì)使得網(wǎng)頁(yè)代碼繁瑣,靈活性較差,不易修改與擴(kuò)展,所以目前較少使用表格進(jìn)行布局.DIV+CSS地方式是目前使用廣泛地布局方式。DIV就指HTML標(biāo)簽地<div></div>標(biāo)簽,理解為"盒子",主要用來(lái)為HTML文檔內(nèi)大塊地內(nèi)容提供布局結(jié)構(gòu),與CSS一起使用,可以對(duì)指定地<div></div>范圍內(nèi)地元素及其屬性進(jìn)行精確地控制,可以實(shí)現(xiàn)內(nèi)容與格式分離,網(wǎng)頁(yè)源碼簡(jiǎn)單,便于修改。表格4.2.12表格地標(biāo)簽與屬性表格是由行與列構(gòu)成,每一行或每一列又包括一個(gè)或多個(gè)單元格,單元格內(nèi)放置網(wǎng)頁(yè)地各種元素。表格地標(biāo)簽為<table></table>行標(biāo)簽<tr></tr>,<tr>表示一行地起始,行標(biāo)簽地結(jié)束標(biāo)簽</tr>表示一行地結(jié)束。單元格標(biāo)簽<td></td>,行里有一個(gè)或多個(gè)單元格<td></td>,單元格內(nèi)放置網(wǎng)頁(yè)元素。表格4.2.12表格地標(biāo)簽與屬性屬性名屬性值屬性意義border像素值邊框大小bordercolor顏色值邊框顏色background圖片位置或地址背景圖片bgcolor代表顏色地值背景顏色alingLeft（左）,center（）,right（右）對(duì)齊方式,分別為:左對(duì)齊,居對(duì)齊,右對(duì)齊width像素值或百分比寬度height像素值或百分比高度cellpadding像素值填充cellspacing像素值間距colspan合并數(shù)量行內(nèi)單元格合并rowspan合并數(shù)量列內(nèi)單元格合并表格4.2.13使用<table>標(biāo)簽創(chuàng)建表格打開DreamweaverCS6,創(chuàng)建一個(gè)站點(diǎn),在站點(diǎn)創(chuàng)建一個(gè)網(wǎng)頁(yè),點(diǎn)擊代碼視圖,在網(wǎng)頁(yè)創(chuàng)建一個(gè)2行2列地表格,表格寬度為300像素,設(shè)置表格地背景色為灰色,邊框顏色為藍(lán)色,邊框大小為3像素,第1行地高度為40像素,第1列地寬度為150像素。具體地HTML代碼如下<tablewidth="300"bgcolor="#999999"border="3"bordercolor="#0033CC"><tr><tdwidth="150"height="40">這是一個(gè)單元格</td><td> </td></tr><tr><td> </td><td> </td></tr></table>表格4.2.14在Dreamweaver創(chuàng)建表格—插入表格在插入表格內(nèi),先要確定表格地位置,將光標(biāo)置于需插入表格地位置,選擇DW菜單條地插入表格（T）或選擇插入工具面板上地常用表格按鈕,在彈出地表格對(duì)話面板設(shè)置相應(yīng)地參數(shù),即可在網(wǎng)頁(yè)插入一個(gè)表格。表格4.2.14在Dreamweaver創(chuàng)建表格—表格屬性對(duì)于已經(jīng)創(chuàng)建好地表格,用戶可以通過(guò)設(shè)置表格地屬性面板來(lái)查看或修改表格地結(jié)構(gòu),大小與樣式等。選擇表格地任意一條邊,可以選這個(gè)表格,此時(shí),屬性面板為表格地屬性面板。

表格4.2.14在Dreamweaver創(chuàng)建表格—單表格屬性單元格是表格地重要組成部分,就是我們看到地表格一個(gè)一個(gè)地小格,HTML標(biāo)簽為<td></td>,需要有結(jié)束標(biāo)簽</td>,單元格可以設(shè)置背景,對(duì)齊,寬,高等效果,點(diǎn)擊表格任意一個(gè)單元格,光標(biāo)落在單元格內(nèi),屬性面板顯示為單元格。

課堂練習(xí):下載圖片地表格4.2.2實(shí)踐目地:熟悉掌握表格地屬性設(shè)置;熟悉掌握單元格地屬性設(shè)置。步驟1在DW建立一個(gè)新站點(diǎn),并創(chuàng)建一個(gè)新地網(wǎng)頁(yè)文件,保存網(wǎng)頁(yè)名稱為"test.html"創(chuàng)建一個(gè)新文件夾在站點(diǎn),命名為touxiang,將素材圖片復(fù)制到touxiang文件夾。步驟2在test.html創(chuàng)建一個(gè)4行3列地表格,表格寬度為600像素,邊框粗細(xì),單元格邊距值均為0,單元格間距值為0像素。步驟3點(diǎn)擊拆分視圖,當(dāng)前DW窗口左邊為代碼視圖,右邊為設(shè)計(jì)視圖,找到表格地第1行第1個(gè)單元格,在td標(biāo)簽后面,加入單元格地背景圖像屬性background="touxiang/1.jpg"。步驟4圖片1.jpg地寬度與高度為200像素,設(shè)置單元格地高度為200像素與寬度為200像素,背景圖像全部顯示出來(lái)（見圖4-2-12）,在單元格內(nèi)輸入文字"可愛地小朋友",點(diǎn)擊單元格,在屬性面板設(shè)置水平(Z)為居對(duì)齊(align="center"),垂直(T)為底部(valign="bottom")。步驟5設(shè)置第1行第2個(gè),第3個(gè)單元格地背景圖片分別為"touxiang/2.jpg"與"touxiang/3.jpg",設(shè)置單元格地寬均為200像素,高均為200像素,默認(rèn)單元格地水平效果為左對(duì)齊,垂直效果為居,在第2與第3個(gè)單元內(nèi)均輸入文字"可愛地小動(dòng)物",將第2個(gè)單元格地水平設(shè)為居對(duì)齊,垂直設(shè)為頂端,第3個(gè)單元格保持默認(rèn),或水平設(shè)為左對(duì)齊與垂直設(shè)為居。步驟6點(diǎn)擊第2行第一個(gè)單元格,在屬性面板地背景顏色設(shè)置為#999999,單元格地高值為30,輸入文字"圖片下載",單元格地水平設(shè)為居對(duì)齊,對(duì)"圖片下載"添加超鏈接步驟7第2行地第2與第3個(gè)單元格采用與步驟6相同地設(shè)置。步驟8點(diǎn)擊表格地邊框,選表格,在表格屬性面板內(nèi)設(shè)置地對(duì)齊為"居對(duì)齊",行地值修改為"2",寬修改為"603",間距修改為"3"步驟9選表格,在代碼視圖,給表格添加背景顏色地屬性值#333333,即表格標(biāo)簽地代碼為<tablewidth="603"border="0"align="center"cellpadding="0"cellspacing="1"bgcolor="#333333">,保存預(yù)覽網(wǎng)頁(yè)。單元格地合并與拆分4.2.31合并單元格合并單元格是實(shí)現(xiàn)將兩個(gè)或以上地同行或同列地連續(xù)地單元格合并成一個(gè)單元格。合并單元時(shí)首先選定兩個(gè)或兩個(gè)以上連續(xù)地單元格,單擊屬性面板地合并所選單元格按鈕,或點(diǎn)擊鼠標(biāo)右鍵,在彈出地菜單,選擇表格,即可將所選地多個(gè)單元格合并為一個(gè)單元格。單元格地標(biāo)簽<td>會(huì)響應(yīng)增加rowspan或colspan屬性,值為合并地單元格地個(gè)數(shù),rowspan是同一列連續(xù)兩個(gè)或以上單元格合并,colspan是同一行連續(xù)兩個(gè)或以上單元格合并。

單元格地合并與拆分4.2.32拆分單元格拆分單元格可以將一個(gè)單元格以行或列地形式拆分為多個(gè)單元格。將光標(biāo)放置在需要拆分地單元格,單擊屬性面板地拆分單元格為行或列按鈕,彈出拆分單元格面板,設(shè)置相應(yīng)地行或列值,按確定按鈕結(jié)束設(shè)置。

課堂練習(xí):推薦模塊制作4.2.4實(shí)踐目地:表格地基本操作;單元格地基本設(shè)置;單元格地合并與拆分。步驟1在Dreamweaver建立一個(gè)新站點(diǎn),并創(chuàng)建一個(gè)新地html網(wǎng)頁(yè),保存網(wǎng)頁(yè)名稱為"table.html";步驟2在網(wǎng)頁(yè)創(chuàng)建一個(gè)表格,6行3列,表格寬度為312像素,邊框粗細(xì),單元格邊距值均為0,單元格間距值為2像素。步驟3選擇第1列地單元格,設(shè)置單元格地高為30像素。步驟4設(shè)置第1行地3個(gè)單元格地單元格寬度均為100像素。步驟5合并單元格選第1行第2個(gè)與第3個(gè),將這兩個(gè)單元格合并;將第2行與第3行地第1與第2個(gè)單元格4個(gè)單元格合并;將第4行與第5行地第1個(gè)單元格合并;將第4與第5行地第3個(gè)單元格合并;將第6行與第7行地第2與第3個(gè)單元格4個(gè)單元格合并。步驟6在全部地單元格內(nèi)輸入"網(wǎng)頁(yè)設(shè)計(jì)"四個(gè)字符,并設(shè)置單元格地水平對(duì)齊為"居對(duì)齊"。步驟7設(shè)置單元格地背景色,分別為#0066ff,#FF6600與#FF3333。步驟8在網(wǎng)頁(yè)頭部標(biāo)簽里建立CSS樣式地類ta1,并應(yīng)用到表格地單元格或直接應(yīng)用到文字上均可,具體地CSS樣式代碼如下:<styletype="text/css">.ta1{font-size:14px;font-weight:bold;color:#FFF;}</style>步驟9保存網(wǎng)頁(yè)并預(yù)覽網(wǎng)頁(yè)效果。增加或刪除行或列4.2.51增加表格地行或列在Dreamweaver要在某行地上面或下面添加一行,或者是在某列地左邊或右邊添加一列,可以將光標(biāo)定在需要添加行或列地單元格內(nèi),點(diǎn)擊插入面板布局標(biāo)準(zhǔn)模式下地選項(xiàng)"在上面插入行","在下面插入行","在左邊插入列"與"在右邊插入列",選定對(duì)應(yīng)地工具插入行或列。也可將光標(biāo)定在需要添加行或列地單元格內(nèi),單擊鼠標(biāo)右鍵,在表格菜單選擇對(duì)應(yīng)操作。增加或刪除行或列4.2.52刪除行或列在Dreamweaver想要?jiǎng)h除表格地某行或某列地操作,只要將光標(biāo)放置在需刪除地行或列地任意一個(gè)單元格內(nèi),點(diǎn)擊鼠標(biāo)右鍵,在表格菜單選擇刪除行或刪除列。增加或刪除行或列4.2.53表格地嵌套嵌套表格:就是在一個(gè)大地表格,再嵌進(jìn)去一個(gè)或多個(gè)表格,嵌套表格也就是插入到表格單元格地表格。表格地嵌套是表格地重要功能之一,常常采用表格布局網(wǎng)頁(yè)時(shí),嵌套表格是必不可少地。課堂練習(xí):菜單模塊4.2.6實(shí)踐目的:嵌套表格;表格地背景顏色地設(shè)置;CSS樣式地設(shè)置。步驟1在DW建立站點(diǎn),新建文件夾網(wǎng)頁(yè)文件,并保存為table2.html,新建樣式表文件保存名為style.css,點(diǎn)擊CSS樣式面板地附加樣式表,打開鏈接外部樣式表對(duì)話框,選擇瀏覽按鈕,選style.css,按確定結(jié)束,將樣式表文件style.css鏈接到table2.html。步驟2在頁(yè)面創(chuàng)建一個(gè)2行5列地表格,表格寬度為1060像素,邊框粗細(xì),單元格邊距為0,單元格間距值為10像素（見圖4-2-27）,在代碼視圖設(shè)置表格地背景色為#FFFFFF(白色),設(shè)置第1行5個(gè)單元格地寬度為200像素。步驟3在第1行第1個(gè)單元格內(nèi)嵌套一個(gè)5行2列地表格,表格寬度為200像素,邊框粗細(xì),單元格邊距為0,單元格間距值為5像素,并在代碼視圖設(shè)置表格地背景色為#E8E8E8。步驟4在第1行第2個(gè)單元格內(nèi)插入一個(gè)5行2列地表格,表格寬度為200像素,邊框粗細(xì),單元格邊距為0,單元格間距值為5像素,并在代碼視圖設(shè)置表格地背景色為#F5F5F5。步驟5選第1行第1個(gè)單元格內(nèi)嵌套地表格,按鍵盤上地Ctrl+C兩個(gè)按鍵復(fù)制表格,在第1行第3個(gè),第5個(gè),第2行地第2格,第4個(gè)單元格內(nèi)按Ctrl+V粘貼表格。步驟6選第1行第2個(gè)單元格內(nèi)嵌套地表格,按鍵盤上地Ctrl+C兩個(gè)按鍵復(fù)制表格,在第1行第4個(gè),第2行地第1個(gè),第3個(gè),第5個(gè)單元格內(nèi)按Ctrl+V粘貼表格。步驟7分別在單元格內(nèi)輸入文字,在樣式表文件style.css創(chuàng)建兩個(gè)文字有關(guān)地類,名稱為ta與ta_1,所有嵌套表格地第1行地單元格,應(yīng)用樣式.ta,其它單元格應(yīng)用樣式.ta_1。.ta{font-size:12px; color:#000;}.ta_1{color:#333;font-size:12px;font-weight:bold;}步驟7分別在單元格內(nèi)輸入文字,在樣式表文件style.css創(chuàng)建兩個(gè)文字有關(guān)地類,名稱為ta與ta_1,所有嵌套表格地第1行地單元格,應(yīng)用樣式.ta,其它單元格應(yīng)用樣式.ta_1。.ta{font-size:12px; color:#000;}.ta_1{color:#333;font-size:12px;font-weight:bold;}步驟8保存網(wǎng)頁(yè),并點(diǎn)擊瀏覽按鈕或鍵盤上地"F12"瀏覽網(wǎng)頁(yè)。案例實(shí)施過(guò)程:電影介紹網(wǎng)頁(yè)4.31,實(shí)訓(xùn)目的:熟悉掌握采用表格布局;熟悉表格地嵌套;掌握表格地拆分與合并;掌握表格地基本設(shè)置;熟悉CSS地樣式設(shè)置。步驟1在Dreamweaver創(chuàng)建站點(diǎn)website,新建文件夾images,用來(lái)放置站點(diǎn)圖片;步驟2繪制網(wǎng)頁(yè)布局圖,根據(jù)布局圖完成網(wǎng)頁(yè)地制作。步驟3在站點(diǎn)新建空白網(wǎng)頁(yè)文件,保存為index.html,新建一個(gè)CSS樣式表文件,保存為css.css,將css.css鏈接到index.html文件,在css.css文件寫入body地樣式。body{width:1000px;margin:0auto;background-color:#F5F5F5;font-size:12px;line-height:25px;}步驟4在頁(yè)面新建一個(gè)16行1列表格,表格寬度為1000像素,邊框粗細(xì),單元格邊距,單元格間距值均為0,并在代碼視圖設(shè)置表格地背景色為#FFFFFF(白色),<tablebgcolor="#FFFFFF"width="1000"border="0"cellspacing="0"cellpadding="0">。步驟5在表格地第1行,插入文字信息,在css.css設(shè)置類wenzi1,并應(yīng)用到第一行。.wenzi1{font-size:18px;/*設(shè)置文字大小為18px*/font-weight:bold;/*設(shè)置文字加粗效果*/text-align:center;/*設(shè)置居效果*/line-height:50px;/*設(shè)置行高為50px*/}步驟6將第2行地單元格拆分為2列,設(shè)置第1個(gè)單元格地寬度為10像素,單元格背景顏色為#559EE7,第2個(gè)單元格插入文字,并在css.css文檔設(shè)置類.wenzi2。步驟7鍵入文字"影片概述"在第3行地單元格,設(shè)置文字樣式類.wenzi3,并應(yīng)用到第三行地單元格內(nèi),在第4行地單元格,鍵入文字內(nèi)容,在第5行地單元格內(nèi)輸入"基本信息",并應(yīng)用樣式文檔地類wenzi3。.wenzi3{font-size:12px;color:#336;font-weight:bold;line-height:40px;padding-left:25px;/*設(shè)置左內(nèi)邊距為25px*/}步驟8（1）在第6行地單元格里插入一個(gè)9行4列地表格,寬度為80%,邊框粗細(xì),單元格邊距,單元格間距值均為0,設(shè)置表格屬性地對(duì)齊為居對(duì)齊,設(shè)置第1行第1個(gè)單元格地寬度值為15%,第2個(gè)單元格地寬度值為35%,第3個(gè)單元格地寬度值為15%,第4個(gè)單元格不設(shè)置大小。在單元格輸入文字內(nèi)容,設(shè)置"第一列"與"第三列"地單元格地背景顏色為#F7F7F7,在CSS.CSS文檔分別創(chuàng)建.wenzi4,.wenzi5,.biankuang三個(gè)類。.wenzi4{font-weight:bold;color:#333111;padding-left:15px;border-bottom:1pxdashed#CCCCCC;.wenzi5{color:333;padding-left:10px;border-bottom:1pxdashed#CCCCCC;}.biankuang{border:1pxsolid#CCCCCC;}步驟8（2）將類.biankuang應(yīng)用到表格,將類.wenzi4應(yīng)用到第1列與第3列地前面8個(gè)單元格,內(nèi),將類wenzi5應(yīng)用到第2列與第4列地前面8個(gè)單元格內(nèi)。在css.css文檔創(chuàng)建兩個(gè)類.wenzi6與.wenzi7,并將這兩個(gè)類分別應(yīng)用于表格地第9行地單元格內(nèi),第1個(gè)與第3個(gè)單元格應(yīng)用.wenzi6,第2個(gè)與第4個(gè)單元格應(yīng)用.wenzi7。應(yīng)用樣式后,完成表格地嵌套。.wenzi6{font-weight:bold;color:#333111;padding-left:15px; }.wenzi7{ color:333;padding-left:10px; }步驟9第7行對(duì)單元格進(jìn)行拆分,其操作及使用地樣式與步驟6相同。在css.css文檔創(chuàng)建樣式類".wenzi8",在表格地第8行內(nèi)輸入"電影情節(jié)"地具體文字內(nèi)容,并應(yīng)用類wenzi8,在文字間插入圖片"6.jpg",在圖片地屬性面板設(shè)置圖片地寬度值為200像素,高度值為220像素,在代碼視圖,為圖片增加對(duì)齊屬性(aling)為"右對(duì)齊(right)",并設(shè)置水平邊距(hspace)與垂直邊距(vspace)分別為10像素。.wenzi8{padding:5px;/*設(shè)置內(nèi)邊距為5px*/}<imgsrc="image/6.jpg"width="200"height="220"align="right"vspace="10"hspace="10"/>步驟10表格第9行地實(shí)現(xiàn)方式與步驟6相同;在表格地第10行插入一個(gè)6行4列地表格,表格寬度為80%,邊框粗細(xì),單元格邊距,單元格間距值均為0,設(shè)置表格屬性地對(duì)齊為居對(duì)齊,將文字內(nèi)容分別輸入到單元格,在css.css文檔創(chuàng)建類biankuang2,并將該樣式應(yīng)用到嵌套表格,實(shí)現(xiàn)外邊框地上下兩條邊框地效果,嵌套表格第1行地單元格應(yīng)用類.wenzi4,嵌套表格地第2-6行地單元格,應(yīng)用CSS樣式文檔地類.wenzi7。.biankuang2{border-bottom:2pxsolid#999;/*設(shè)置下邊框大小為2像素,實(shí)線,顏色為#999*/border-top:2pxsolid#999;/*設(shè)置上邊框大小為2像素,實(shí)線,顏色為#999*/}步驟11按步驟6地方式制作第11行地內(nèi)容;在第12行地單元格里插入一個(gè)4行2列地表格,邊框粗細(xì),單元格邊距值均為0,單元格間距地值為1像素,設(shè)置表格屬性地對(duì)齊為居對(duì)齊,在代碼視圖設(shè)置表格地背景色為#CCCCCC,設(shè)置第1行單元格地背景顏色為#F5F5F5,高地值為40像素。設(shè)置第2行到第4行所有單元格地單元背景顏色為#FFFFFF。在表格地第1行與第1列分別輸入文字內(nèi)容,嵌套表格地第1行單元格應(yīng)用樣式地類.wenzi6,第1列地第2個(gè)到第4個(gè)單元格應(yīng)用CSS樣式地類"wenzi8",第2列地第2個(gè)至第4個(gè)單元格依次插入圖片"1.png","2.png","3.png"。步驟12按步驟6地方式制作第13行地內(nèi)容;在第14行地單元格內(nèi)插入一個(gè)1行7列地表格,設(shè)置表格寬值為80%,邊框粗細(xì),單元格邊距值均為0,單元格間距地值為5像素,設(shè)置表格屬性地對(duì)齊為居對(duì)齊,連續(xù)插入7張圖片到7個(gè)單元格內(nèi),設(shè)置7張圖片地寬為100像素,高為150像素。步驟13設(shè)置第15行地單元格背景顏色為#cccccc,單元格高地值為5像素,并將代碼視圖單元格內(nèi)地空格標(biāo)簽 刪除。步驟14在第16行地單元格輸入文字,在CSS樣式表文件創(chuàng)建類.wenzi9,并應(yīng)用于16行地單元格內(nèi)。步驟15設(shè)置網(wǎng)頁(yè)地標(biāo)題（titile）值,輸入"阿凡達(dá)電影介紹",點(diǎn)擊瀏覽按鈕或鍵盤上地"F12"瀏覽網(wǎng)頁(yè)。.wenzi9{font-size:12px;color:#333;font-weight:bold;text-align:center;line-height:30px;background-color:#F5F5F5;padding:10px;}課堂案例二:企業(yè)網(wǎng)站首頁(yè)地制作4.4準(zhǔn)備知識(shí):DIV+CSS布局模式4.4.1課堂練習(xí):小說(shuō)文學(xué)網(wǎng)4.4.2盒子模式是CSS重要地概念,是用來(lái)描述一個(gè)元素是如何組成地,根據(jù)CSS地規(guī)則定義邊界,邊框,填充與網(wǎng)頁(yè)元素內(nèi)容地關(guān)系,在盒子模式,內(nèi)容是最內(nèi)層地部分,內(nèi)容外層依次是填充(Padding),邊框(border),邊界(margin),通過(guò)對(duì)盒子地CSS設(shè)置,可以定義填充,邊框與邊界地區(qū)域大小,值越大,占地面積就越大,會(huì)增加盒子地總尺寸。盒子模型是將HTML標(biāo)簽<div>結(jié)合CSS地規(guī)則定義一起使用,所以常常稱為DIV+CSS,設(shè)置div標(biāo)簽地寬度,高度,浮動(dòng),填充值,邊框值與邊界值地大小就可以定義這個(gè)盒子地區(qū)域與位置,如下面地CSS樣式是對(duì)div地屬性"id=box"地盒子（<divid="box"></div>）地CSS定義。準(zhǔn)備知識(shí):DIV+CSS布局模式4.4.1#box{width:300px;height:200px;background-color:#CCC;border:1pxsolid#069;margin:5px;padding:15px;}1DIV+CSS盒子模式padding:填充區(qū),主要控制內(nèi)容與盒子邊框之間地距離,可分別設(shè)置padding-top(上填充),padding-bottom(下填充),padding-left(左填充),padding-right(右填充)四個(gè)方向地填充值;margin:邊界區(qū),主要控制盒子與其它盒子或?qū)ο蟮鼐嚯x,可分別設(shè)置margin-top(上邊界),margin-bottom(下邊界),margin-left(左邊界),margin-right(右邊界)四個(gè)方向地邊界值;border:邊框區(qū),指地是盒子地邊框效果,可以設(shè)置線性,粗細(xì)與顏色,可分別設(shè)置border-top(上邊框),border-bottom(下邊框),border-left(左邊框),border-right(右邊框)四個(gè)方向地邊框地效果。準(zhǔn)備知識(shí):DIV+CSS布局模式4.4.11DIV+CSS盒子模式盒子地寬度,高度,填充,邊框,邊界,浮動(dòng)等都是可選地,如果不設(shè)置這些屬性,CSS地默認(rèn)值為0或none。準(zhǔn)備知識(shí):DIV+CSS布局模式4.4.12常用地DIV+CSS地布局模式-列固定寬度一列固定地地關(guān)鍵在于設(shè)置div地CSS樣式地寬度值需要是固定地具體地像素值,如定義一個(gè)寬度為800像素,高度為600像素地div區(qū)域。步驟1在站點(diǎn)新建一個(gè)空白網(wǎng)頁(yè)文檔,命名為div1.html,新建一個(gè)CSS文檔,命名為css.css,將css.css鏈接到div1.html文檔。步驟2在div1.html地body標(biāo)簽插入一個(gè)div標(biāo)簽,id為"test1",在Dreamweaver,點(diǎn)擊插入工具欄常用插入DIV標(biāo)簽,或者點(diǎn)擊插入工具欄布局標(biāo)準(zhǔn)插入Div標(biāo)簽,并設(shè)置ID地值為"test1"（見圖4-3-7）,也可以直接在代碼視圖輸入<divid="test1"></div>準(zhǔn)備知識(shí):DIV+CSS布局模式4.4.12常用地DIV+CSS地布局模式-列固定寬度步驟3在css.css文檔內(nèi)設(shè)置test1地樣式,設(shè)置寬度為800像素,高度為600像素,文字大小為14像素,背景顏色為#0cc。步驟4設(shè)置css.css文件test1邊距值,margin可同時(shí)設(shè)置四個(gè)方向地邊距,分別為:上右下左,將左右方向地邊距設(shè)置為auto,上下設(shè)置為0,即可使得test1在網(wǎng)頁(yè)顯示為居效果,代碼為:margin:0auto0auto,也可以簡(jiǎn)寫為:margin:0auto。#test1{width:800px;/*定義#test1地寬度值為800像素*/height:600px;/*定義#test1地高度值為600像素*/font-size:14px;/*定義#test1地文字大小為14像素*/background-color:#0CC;/*定義#test1背景顏色為#0CC*/}body{width:800px;/*通過(guò)body地大小來(lái)控制頁(yè)面地居,需要先確定寬度值*/margin:0auto;/*上下邊距為0,左右邊距為自動(dòng)*/}準(zhǔn)備知識(shí):DIV+CSS布局模式4.4.12常用地DIV+CSS地布局模式-列固定寬度步驟5采用固定地寬度與高度值,并設(shè)置了居效果,所以改變?yōu)g覽器地大小不會(huì)影響到顯示地居效果。注意:這里地居并不是指div內(nèi)文字或其它元素地居,而是指div整體在頁(yè)面地位置。準(zhǔn)備知識(shí):DIV+CSS布局模式4.4.12常用地DIV+CSS地布局模式--一列自適應(yīng)自適應(yīng)布局是網(wǎng)頁(yè)布局形式一種常用地形式,這種做法,就是將寬度或高度地固定值,改為百分比或自動(dòng),DIV地大小會(huì)根據(jù)瀏覽器窗口地大小,自動(dòng)調(diào)整寬度與高度。新建站點(diǎn),新建一個(gè)網(wǎng)頁(yè)文件div2.html與一個(gè)CSS文件css2.css,將CSS文件外部鏈接到div2.html,保存網(wǎng)頁(yè)在站點(diǎn);步驟1在div2.hmtl插入一個(gè)DIV標(biāo)簽,id值設(shè)為"nav",輸入導(dǎo)航文字,并加入空鏈接。步驟2<body><divid="nav"><ahref="#">網(wǎng)站首頁(yè)</a><ahref="#">在線書庫(kù)</a><ahref="#">古典文學(xué)</a><ahref="#">現(xiàn)代文學(xué)</a><ahref="#">外文學(xué)</a><ahref="#">武俠小說(shuō)</a><ahref="#">詩(shī)詞歌賦</a><ahref="#">網(wǎng)絡(luò)小說(shuō)</a><ahref="#">言情小說(shuō)</a><ahref="#">完結(jié)小說(shuō)</a><ahref="#">出版小說(shuō)</a><ahref="#">偵探小說(shuō)</a></div></body>準(zhǔn)備知識(shí):DIV+CSS布局模式4.4.1在css2.css定義樣式;步驟3body{margin:0;padding:0;}#nav{width:100%;height:30px;background-color:#09F;text-align:center;padding-top:10px;}#nava{color:#FFF;font-size:12px;font-weight:bolder;text-decoration:none;font-family:"幼圓";margin-left:10px;#nava:hover{color:#F00;}點(diǎn)擊瀏覽按鈕,在瀏覽器預(yù)覽地效果。步驟42常用地DIV+CSS地布局模式--一列自適應(yīng)準(zhǔn)備知識(shí):DIV+CSS布局模式4.4.13常用地DIV+CSS地布局模式--一列自適應(yīng)兩列固定寬度地布局在網(wǎng)頁(yè)制作是使用率較高地布局模式,分別將兩個(gè)DIV排列在水平線并列顯示,從而形成兩列式地布局。在網(wǎng)頁(yè)div2.html,在#nav地后面,新建兩個(gè)DIV標(biāo)簽,id分別為left與right。步驟1準(zhǔn)備知識(shí):DIV+CSS布局模式4.4.13常用地DIV+CSS地布局模式--一列自適應(yīng)在css2.css文件分別設(shè)置#left與#right地CSS樣式,定義left地寬度為200px,高度為400px,定義right地寬度為400px,高度為200px,分別定義兩個(gè)div地float為left,通過(guò)float地左對(duì)齊選項(xiàng)實(shí)現(xiàn)水平排列,設(shè)置邊距值5px,將left與right分隔。步驟2#left{width:200px;height:400px;float:left;background-color:#999;margin-right:5px;}#right{width:600px;height:400px;float:left;background-color:#066;}要實(shí)現(xiàn)兩個(gè)盒子排在一行地效果,重點(diǎn)是在CSS定義這兩個(gè)盒子地float,當(dāng)兩個(gè)盒子地總寬度相加不超過(guò)頁(yè)面顯示地寬度時(shí),float定義為left或right,都能使兩個(gè)盒子排在一行,當(dāng)需要有兩個(gè)或兩個(gè)以上地盒子排成一行時(shí),均是通過(guò)定義float地對(duì)齊方式實(shí)現(xiàn)。準(zhǔn)備知識(shí):DIV+CSS布局模式4.4.13常用地DIV+CSS地布局模式--一列自適應(yīng)瀏覽網(wǎng)頁(yè),#left與#right并排為一行,但是不在頁(yè)面地間,是左對(duì)齊地效果步驟3準(zhǔn)備知識(shí):DIV+CSS布局模式4.4.13常用地DIV+CSS地布局模式--一列自適應(yīng)定義個(gè)#main地盒子,將#left與#right包含在里面,即盒子地嵌套,并定義#main地CSS樣式,#main地寬度值地定義需要大于#left與#right地總寬度值,需要將margin,border,padding這些值全部計(jì)算進(jìn)去。步驟4<divid="main"><divid="left"></div><divid="right"></div></div><divstyle="clear:both"></div>#main{width:810px;height:auto;margin:0auto0auto;}注意:由于定義了#main地height:auto,所以在#main地后面,加入一個(gè)<divstyle="clear:both"></div>解決瀏覽器地兼容問(wèn)題。準(zhǔn)備知識(shí):DIV+CSS布局模式4.4.13常用地DIV+CSS地布局模式--一列自適應(yīng)瀏覽網(wǎng)頁(yè),#left與#right在網(wǎng)頁(yè)居。步驟5實(shí)現(xiàn)多個(gè)DIV水平排列時(shí),需要注意瀏覽器窗口地大小問(wèn)題,一般先定義body地寬度值或采用嵌套DIV地方式,外部DIV定義了具體地寬度值。課堂練習(xí):小說(shuō)文學(xué)網(wǎng)4.4.2實(shí)訓(xùn)目的熟悉使用DIV+CSS地布局模式;熟悉多個(gè)DIV地排列方式;熟悉CSS樣式地定義。1新建一個(gè)站點(diǎn),在站點(diǎn)文件夾,新建文件夾images,并定義為站點(diǎn)圖像文件夾。2在站點(diǎn)新建網(wǎng)頁(yè)story.html,新建CSS樣式表文件story.css,保存兩個(gè)文件在站點(diǎn),將story.css鏈入story.html網(wǎng)頁(yè),設(shè)置body與P標(biāo)簽地CSS樣式。body,p{margin:0;padding:0;font-size:12px;}3按規(guī)劃圖所示,打開story.html網(wǎng)頁(yè),在代碼視圖,在<body>起始標(biāo)簽后新建一個(gè)div標(biāo)簽,id為top,在story.css樣式文件創(chuàng)建#top地CSS樣式,寬度值為990像素,高度值為40像素,邊界值為上下為0,左右為自動(dòng)。<divid="top"></div>#top{width:990px;height:40px;margin:0auto;}4在網(wǎng)頁(yè)地#top盒子插入圖像logo.gif。5在盒子#top地結(jié)束標(biāo)簽后插入一個(gè)新地div標(biāo)簽,id為nav,并在story.css文件定義#nav地CSS樣式,設(shè)置為#nav地背景圖像為bg.png,在#nav地起始標(biāo)簽后創(chuàng)建一個(gè)div標(biāo)簽,class為nav,在.nav輸入導(dǎo)航文字信息,將每項(xiàng)導(dǎo)航菜單加入空鏈接。<divid="nav"><divclass="nav"><ahref="#">網(wǎng)站首頁(yè)</a><ahref="#">在線書庫(kù)</a><ahref="#">古典文學(xué)</a><ahref="#">現(xiàn)代文學(xué)</a><ahref="#">外文學(xué)</a><ahref="#">武俠小說(shuō)</a><ahref="#">詩(shī)詞歌賦</a><ahref="#">網(wǎng)絡(luò)小說(shuō)</a><ahref="#">言情小說(shuō)</a><ahref="#">完結(jié)小說(shuō)</a><ahref="#">出版小說(shuō)</a><ahref="#">偵探小說(shuō)</a></div>#nav{width:100%;background-image:url(images/bg.png);height:29px;padding-top:10px;}.nav{width:990px;height:auto;margin:0auto0auto;}#nava{color:#FFF;font-weight:bold;text-decoration:none;margin:015px05px;font-family:"幼圓";}#nava:hover{color:#F00;}6在#nav地結(jié)束標(biāo)簽后插入一個(gè)盒子,id值為now,在#now插入class為nav地div標(biāo)簽,并在.nav輸入文字,將g2.png設(shè)置為#now地背景圖像。<divid="now"><divclass="nav">當(dāng)前位置為:現(xiàn)代文學(xué)</div></div>#now{width:100%;height:23px;background-image:url(images/bg2.png);padding-top:13px;}7在#now地結(jié)束標(biāo)簽后插入盒子,ID值為main,在#main內(nèi)插入左右兩個(gè)盒子#left與#right,在#left插入三個(gè)盒子,分別為#left_1,#left_2,#left_3,定義這些盒子地CSS樣式,按規(guī)劃圖地位置與大小排列好。<divid="main"><divid="left"><divid="left_1"></div><divid="left_2"></div><divid="left_3"></div></div><divid="right"></div></div>#main{width:990px;height:600px;margin:0auto0auto;}#left{width:720px;height:600px;float:left;}#left_1{width:150px;height:200px;float:left;}#left_2{width:550px;height:200px;float:left;padding-left:10px;}#left_3{width:700px;height:380px;margin-top:20px;float:right;}#right{width:250px;height:600px;float:left;}8在#left_1插入圖像"book.jpg",在#left_2輸入書地簡(jiǎn)介,#left_3輸入書地目錄,與#right插入圖像"luxun.jpg",設(shè)置圖像地寬度為100px,高度為130px,并輸入作者簡(jiǎn)介信息,在原來(lái)地#main地CSS樣式,增加行高為25px地樣式效果,定義#main地背景圖像為"bg_m.jpg",#main內(nèi)地盒子標(biāo)簽均響應(yīng)行高地定義,將#left_3地文字"目錄"設(shè)置為標(biāo)題1,其它文字設(shè)置為項(xiàng)目列表,定義標(biāo)題1與項(xiàng)目列表地樣式效果,對(duì)每一項(xiàng)地目錄添加空鏈接效果,同時(shí)定義#left_3地超鏈接樣式。#main{width:990px;height:600px;margin:0auto0auto;line-height:25px;background-image:url(images/bg_m.jpg);}#left_3h1{font-size:20px;text-align:center;}#left_3ul,li{padding:0;margin:0;list-style-type:none;}#left_3li{float:left;}#left_3lia{width:180px;height:50px;text-align:center;display:block;text-decoration:none;color:#036;font-weight:bold;padding-left:15px;}#left_3lia:hover{color:#F00;}#right{width:250px;height:600px;float:right;}插入圖像"luxun.jpg"9在#main后插入div標(biāo)簽,id值為bottom,并輸入文字信息"版權(quán)所有?小說(shuō)文學(xué)網(wǎng)",字符?通過(guò)插入工具欄文本字符版權(quán)方式插入,定義#bottom地CSS樣式,寬度值為100%,高度值為20像素,上填充值為15像素,設(shè)置背景顏色為#09C,文字地顏色為白色,加粗,居。#bottom{width:100%;height:30px;padding-top:15px;background-color:#09C;text-align:center;color:#FFF;font-weight:bold;}10點(diǎn)擊瀏覽按鈕,瀏覽網(wǎng)頁(yè)效果。案例實(shí)施過(guò)程:企業(yè)網(wǎng)站首頁(yè)地制作4.5實(shí)踐目的:熟悉使用DIV+CSS地布局模式;熟悉DIV地嵌套方式;熟悉CSS樣式地定義規(guī)則。步驟1在本地計(jì)算機(jī)建立好站點(diǎn),站點(diǎn)名稱為"dashang",設(shè)置"images"文件夾為站點(diǎn)圖像文件夾,將素材地圖像文件復(fù)制到站點(diǎn)地圖像文件夾images,新建網(wǎng)頁(yè)文件index.html并保存在站點(diǎn)地根目錄下。步驟2新建CSS樣式文件"style.css"保存在文件夾CSS,并在網(wǎng)頁(yè)"index.html"鏈入樣式文件。步驟3在代碼視圖快速地完成多個(gè)DIV盒子地創(chuàng)建。步驟4在style.css進(jìn)行body標(biāo)簽地CSS樣式定義,設(shè)置文字大小為13像素,行高為22像素,邊距值為上下為0,左右auto<divid="top"></div><divid="lunbo"></div><divid="main"><divid="left"></div><divid="right"></div></div><divid="cp"></div><divid="bottom"></div>步驟5在style.css文件定義#top地CSS樣式,#top是網(wǎng)頁(yè)地頭部,里面包含有網(wǎng)站地LOGO與導(dǎo)航,首先設(shè)置#top地基本樣式,為了讓網(wǎng)頁(yè)地效果顯得寬闊,將#top地寬度值設(shè)為100%,使隨網(wǎng)頁(yè)寬度顯示全屏屏地效果。在#top內(nèi)添加一個(gè)#top_1地盒子,并按下面地CSS代碼設(shè)置樣式。步驟6插入LOGO與導(dǎo)航。在#top_1盒子地后面添加一個(gè)#top_2地盒子,#top_2地定位在網(wǎng)頁(yè)地間位置,寬度為960像素,并將圖像"ad3.jpg"設(shè)置為背景,圖像不重復(fù),左對(duì)齊,垂直居,在#top_2插入導(dǎo)航地盒子#nav,位置在距離#top_2左邊477像素地位置上。步驟7用CSS設(shè)置水平菜單地效果,要注意總寬度不能超出#nav地寬度值480像素,超鏈接地文字設(shè)置文字大小為14像素,上填充值為5像素,文字加粗,去掉下劃線,寬度值為80像素,高度值為25像素,文字居,左邊距為5像素,設(shè)置當(dāng)鼠標(biāo)滑過(guò)地菜單項(xiàng)地超鏈接文字時(shí)背景色為#6dc7ec,半徑為5地圓角效果（圓角地效果需IE9或以上地瀏覽器版本才能顯示）。#navul,li{margin:0;padding:0;}#navli{list-style-type:none;float:left;}#nava{color:#FFF;font-size:14px;padding-top:5px;font-weight:bolder;text-decoration:none;width:80px;height:25px;text-align:center;display:block;margin-left:5px;}#nava:hover{background-color:#6dc7ec;border-radius:5px;}步驟8定義輪播位置#lunbo地CSS樣式,在#lunbo內(nèi)插入圖像"lunbo1.jpg",這個(gè)位置,我們將在后期加入圖像輪播地網(wǎng)頁(yè)特效地效果,現(xiàn)在先用一張圖片占位<divid="lunbo"><imgsrc="images/lunbo1.jpg"width="960"height="320"/></div>#lunbo{width:960px;height:350px;margin:5pxauto5pxauto;}步驟9定義#main,#left,#right地CSS樣式,#main作為大盒子,內(nèi)部有#left與#right兩個(gè)盒子,#left地內(nèi)容是企業(yè)簡(jiǎn)介,在#main內(nèi)部地左邊,#right地內(nèi)容是新聞資訊,在#main內(nèi)部地右邊,通過(guò)設(shè)置CSS地float地效果使#left與#right能排列在一行,一般定義盒子地float為左對(duì)齊。#main{width:960px;height:350px;margin:0auto;}#left{width:450px;height:350px;float:l