Dreamweaver網(wǎng)頁制作基礎(chǔ)教程項目九CSS+Div美化網(wǎng)頁

任務(wù)一網(wǎng)頁中的文本任務(wù)描述CSS+Div技術(shù)是目前比較流行的網(wǎng)站布局技術(shù)，為保證網(wǎng)站中各頁面的風(fēng)格統(tǒng)一，一般外部CSS樣式表的引用使用的更多一些。要求網(wǎng)站管理員為網(wǎng)站中的表格類應(yīng)用建立統(tǒng)一的樣式表，以方便其他網(wǎng)頁中的同類表格的調(diào)用。以“下載專區(qū)”網(wǎng)頁為例用CSS+Div技術(shù)進(jìn)行設(shè)計，效果如圖9.2.1所示。圖9.2.1任務(wù)準(zhǔn)備（1）建立站點。（2）將xzzq.html及素材導(dǎo)入站點。位于“項目9/任務(wù)二/xzzq”文件夾中的原始xzzq.html網(wǎng)頁如圖9.2.2所示。圖9.2.2網(wǎng)頁素材文件任務(wù)實施圖9.2.3插入Div標(biāo)簽步驟1：光標(biāo)停留在“欄目導(dǎo)航”右側(cè)空白處，選擇菜單“插入記錄”→“布局對象”→“Div標(biāo)簽”選項，打開“插入Div標(biāo)簽”對話框。在“類”和“ID”下拉列表框中輸入Div的名稱“main”，如圖9.2.3所示。步驟2：單擊【新建css樣式】按鈕，打開“新建CSS規(guī)則”對話框。定義名為“xz.css”的CSS樣式。設(shè)置邊框：“上”、“左”、“右”均為實線，寬度為1像素，顏色為“#8BBFD5”（藍(lán)色），如圖9.2.4至圖9.2.6所示。圖9.2.4“新建CSS規(guī)劃”對話框圖9.2.5設(shè)置mail的CSS樣式圖9.2.6設(shè)計視圖1步驟3：光標(biāo)停留在“Div標(biāo)簽”中，刪除標(biāo)簽中的文字，插入一個3行1列、寬度為800像素的無邊距表格，表格的對齊方式為“居中”，如圖9.2.7所示。圖9.2.7插入表格步驟4：將光標(biāo)定位在表格第一行內(nèi)，單擊“插入記錄”→“布局對象”→“Div標(biāo)簽”選項，將“類”和“ID”都命名為“top”，如圖9.2.8所示。圖9.2.8設(shè)置單元格ID和類步驟5：新建樣式表并保存為xz.css，為Div標(biāo)簽“top”定義一個CSS樣式。要求設(shè)置如下：背景圖片為xxjj_c4.jpg；字體為宋體，顏色為“#006600”，10磅且加粗；行高為34像素。具體設(shè)置如圖9.2.9至圖9.2.11所示。圖9.2.9設(shè)置topCSS樣式圖9.2.10設(shè)置背景屬性圖9.2.11設(shè)計視圖2步驟6：將“此處顯示class"top"id"top"的內(nèi)容”改為“您的位置：本站首頁→下載中心”，如圖9.2.12所示。圖9.2.12更改單元格內(nèi)容步驟7：在表格第二行再插入一個Div標(biāo)簽，“類”和“ID”都為“table”。在xz.css中為Div標(biāo)簽定義一個類，新建CSS樣式表bgn.css，如圖9.2.13和圖9.2.14所示。圖9.2.13設(shè)置bgn的CSS類型屬性圖9.2.14設(shè)置bgn的CSS邊框?qū)傩圆襟E8：在ID中插入12行4列的表格，設(shè)置寬度參數(shù)為80%，根據(jù)上級單元格實際大小，在表格兩邊各留出10%的空白，如圖9.2.15所示。圖9.2.15插入表格步驟9：選中該表格，在“屬性”面板中選擇“樣式”下拉按鈕，應(yīng)用bgn.css樣式。步驟10：重新設(shè)置表格第一行的屬性，背景顏色為“#637312”，文件字體為宋體，大小為12磅，顏色為白色。步驟11：在表格第三行再插入一個Div標(biāo)簽，“類”和“ID”都要為“bottom”。在xz.css中為Div標(biāo)簽定義一個類，如圖9.2.16所示。圖9.2.16設(shè)置bottom的CSS樣式步驟12：最終效果如圖9.2.17所示。圖9.2.17設(shè)計視圖最終效果知識拓展1．CSS+Div簡介CSS是網(wǎng)頁制作過程中經(jīng)常用到的技術(shù)，在網(wǎng)頁中采用CSS可以更輕松、有效地對頁面的整體布局、顏色、字體、鏈接、背景，以及同一頁面的不同部分，或不同頁面的外觀和格式等效果，實現(xiàn)更加精確的控制。APDiv是網(wǎng)頁內(nèi)容的一個容器，在APDiv中可以旋轉(zhuǎn)文本、圖像或其他任何可在文件中插入的內(nèi)容。由于APDiv可以放置在網(wǎng)頁中的任何位置，因而能有效地控制網(wǎng)頁中的對象。CSS是網(wǎng)頁制作過程中經(jīng)常用到的技術(shù)，在網(wǎng)頁中采用CSS可以更輕松、有效地對頁面的整體布局、顏色、字體、鏈接、背景，以及同一頁面的不同部分，或不同頁面的外觀和格式等效果，實現(xiàn)更加精確的控制。APDiv是網(wǎng)頁內(nèi)容的一個容器，在APDiv中可以旋轉(zhuǎn)文本、圖像或其他任何可在文件中插入的內(nèi)容。由于APDiv可以放置在網(wǎng)頁中的任何位置，因而能有效地控制網(wǎng)頁中的對象。CSS+Div是現(xiàn)在最流行的一種網(wǎng)頁布局格式。以前網(wǎng)頁設(shè)計制作人員常用布局表格來進(jìn)行布局，而現(xiàn)在一些較流行的網(wǎng)頁設(shè)計全部采用CSS+Div來排版布局。用Div盒模型結(jié)構(gòu)將各部分內(nèi)容劃分到不同的區(qū)塊，然后用CSS來定義盒模型的位置、大小、邊框、內(nèi)外邊距、排列方式等。簡單地說，Div用于搭建網(wǎng)站結(jié)構(gòu)（框架），CSS用來創(chuàng)建網(wǎng)站表現(xiàn)（樣式/美化）。CSS+Div的優(yōu)點是可以使HTML代碼更整齊，更容易被人理解，而且在瀏覽時速度也會比傳統(tǒng)的布局方式快，最重要的是它的可控性要比表格布局強(qiáng)得多。2．Div層CSS樣式類別和屬性CSS控制區(qū)域：Div的屬性可以通過CSS規(guī)則直接控制。其優(yōu)點在于，同一個CSS可以多次使用。定義文本繞圖：制作文本繞圖效果可以通過設(shè)置區(qū)域的浮動方向和區(qū)域自身的填充邊距來實現(xiàn)。實現(xiàn)文本分欄：如果不能直接利用CSS實現(xiàn)分欄的效果，則可以定義兩個不同的Div區(qū)域，然后分別輸入文字，完成分欄邊界。Padd

ing元素：利用填充邊界可以輕松地制作出文本框的邊界，使頁面效果更美觀。不規(guī)則文本繞圖：通過將圖片設(shè)置為文本背景，再利用多個Div區(qū)域控制范圍來實現(xiàn)。3．表格布局與CSS+Div布局的區(qū)別（1）表格布局方式：表格對于顯示表格式數(shù)據(jù)（如重復(fù)元素的行和列）很有用，且很容易在頁面上創(chuàng)建，但表格往往會生成大量難以閱讀和維護(hù)的代碼。（2）CSS+Div布局：基于CSS的布局通常使用Div標(biāo)簽。Div可以放置在頁面上的任意位置，并為它們指定屬性，如寬度、高度、邊框、背景顏色等。所包含的代碼數(shù)量要比具有相同特性的基于表格布局的代碼數(shù)量少得多，而且更簡單短小。任務(wù)總結(jié)CSS布局的基本構(gòu)造塊是Div標(biāo)簽，它是一個HTML標(biāo)簽，在大多數(shù)情況下用作文本、圖像、表格等其他頁面元素的容器。當(dāng)創(chuàng)建CSS布局時，將Div標(biāo)簽放在頁面中，并在標(biāo)簽中添加內(nèi)容，運用CSS樣式表，Div標(biāo)簽可以出現(xiàn)在網(wǎng)頁中的任意位置，有效地控制網(wǎng)頁中的對象，比表格布局靈活。課后習(xí)題1．CSS的全稱及中文譯名分別是（）。A．CadingStyleSheet和層疊樣式表 B．CascadingStyleSheet和層次樣式表C．CascadingStyleSheet和層疊樣式表 D．CadingStyleSheet和層次樣式表2．關(guān)于CSS的說法正確的是（）。A．CSS可以控制網(wǎng)頁背景圖片B．margin的屬性值可以是百分比C．整個body可以作為一個BOXD．對于中文可以使用word-spacing屬性對字間距進(jìn)行調(diào)整E．margin屬性不能同時設(shè)置四個邊的邊距3．CSS通過（）方法將樣式格式化應(yīng)用到用戶的頁面中。A．創(chuàng)建新的樣式單 B．內(nèi)部樣式單C．外部的、被鏈接的樣式單 D．被嵌入的樣式規(guī)則

4．CSS樣式可以定義（）網(wǎng)頁元素的外觀。A．文本 B．表格 C．圖像 D．表單5．在以下的HTML中，（）正確引用了外部樣式表的方法。A．<stylesrc="mystyle.css">B．<linkrel="stylesheet"type="text/css"href="mystyle.css">C．<stylesheet>mystyle.css</stylesheet>6．在HTML文件中，引用外部樣式表的正確位置是（