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

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

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

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

單元格地合并與拆分4.2.32拆分單元格拆分單元格可以將一個單元格以行或列地形式拆分為多個單元格。將光標放置在需要拆分地單元格,單擊屬性面板地拆分單元格為行或列按鈕,彈出拆分單元格面板,設置相應地行或列值,按確定按鈕結束設置。

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