網(wǎng)頁(yè)設(shè)計(jì)與制作課件第6章

案例說(shuō)明本案例首先對(duì)Div、HTML5結(jié)構(gòu)元素、float和clear屬性、浮動(dòng)布局的原理、常用浮動(dòng)布局方法、清除浮動(dòng)對(duì)布局的不良影響，及浮動(dòng)布局應(yīng)用技巧進(jìn)行簡(jiǎn)單介紹，然后制作新聞列表頁(yè)面的整體布局，包括構(gòu)建HTML結(jié)構(gòu)和設(shè)置CSS樣式。案例一構(gòu)建企業(yè)網(wǎng)站新聞列表網(wǎng)頁(yè)整體布局

——浮動(dòng)布局相關(guān)知識(shí)Div是一個(gè)HTML標(biāo)簽，全稱為Division，意為“區(qū)分”，多數(shù)情況下用作文本、圖像或其他頁(yè)面元素的容器，是CSS布局的基本構(gòu)造塊。一、Div基礎(chǔ)將插入點(diǎn)置于文檔中要顯示Div標(biāo)簽的位置，在“插入”面板的“HTML”類別中單擊“Div”按鈕，打開(kāi)“插入Div”對(duì)話框，如左圖所示。插入：用于選擇插入Div標(biāo)簽的位置。Class：顯示應(yīng)用于當(dāng)前標(biāo)簽的類樣式。ID：可讓用戶更改用于標(biāo)識(shí)Div標(biāo)簽的名稱。新建CSS規(guī)則：?jiǎn)螕艨纱蜷_(kāi)“新建CSS規(guī)則”對(duì)話框。在“插入Div”對(duì)話框中單擊“確定”按鈕，可以在文檔中插入Div，Div標(biāo)簽以一個(gè)框的形式出現(xiàn)在文檔中，并帶有占位符文本。當(dāng)將光標(biāo)移到Div標(biāo)簽框的邊緣上時(shí)，Dreamweaver會(huì)高亮顯示該框，如下圖所示。三、網(wǎng)頁(yè)的本質(zhì)在“插入Div”對(duì)話框中單擊“新建CSS規(guī)則”按鈕，打開(kāi)“新建CSS規(guī)則”對(duì)話框，如左圖所示。選擇器類型：用于設(shè)置選擇器類型，并將其運(yùn)用到特定部分。選擇器名稱：用于選擇或輸入選擇器名稱。規(guī)則定義：用于設(shè)置新建CSS樣式在網(wǎng)頁(yè)中的存在方式。三、網(wǎng)頁(yè)的本質(zhì)在為新樣式選擇了某種類型和名稱之后，單擊“確定”按鈕將打開(kāi)“div的CSS規(guī)則定義”對(duì)話框，如左圖所示。“div的CSS規(guī)則定義”對(duì)話框中包括9種樣式類別，類型、背景、區(qū)塊、方框、邊框、列表、定位、擴(kuò)展和過(guò)渡。所有的設(shè)置參數(shù)和CSS設(shè)計(jì)器中的屬性完全相同。可以在該對(duì)話框中快捷方便地設(shè)置樣式屬性。在“設(shè)計(jì)”視圖中工作時(shí)，可以使CSS布局塊可視化。CSS布局塊是一個(gè)HTML頁(yè)面元素，可以將它定位在頁(yè)面上的任意位置。Div標(biāo)簽就是一個(gè)標(biāo)準(zhǔn)的CSS布局塊。二、HTML5結(jié)構(gòu)元素Header標(biāo)簽，從語(yǔ)義上看為文檔的頁(yè)眉。它是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用于放置整個(gè)頁(yè)面或頁(yè)面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題，一個(gè)網(wǎng)頁(yè)內(nèi)并沒(méi)有限制Header標(biāo)簽的個(gè)數(shù)。1．Header<header><h1>我是大頭</h1></header><article><header><h1>我是脖子</h1></header><p>我是身體</p></article>2．Navigationnav標(biāo)簽，從語(yǔ)義上看為導(dǎo)航，通常作為頁(yè)面導(dǎo)航的鏈接組，側(cè)邊欄導(dǎo)航。<nav><ul><li><ahref="">菜單1</a></li><li><ahref="">菜單2</a></li><li><ahref="">菜單3</a></li></ul></nav>Main標(biāo)簽規(guī)定文檔的主要內(nèi)容。Main標(biāo)簽中的內(nèi)容對(duì)于文檔來(lái)說(shuō)應(yīng)當(dāng)是唯一的。它不應(yīng)包含在文檔中重復(fù)出現(xiàn)的內(nèi)容，如側(cè)欄、導(dǎo)航欄、版權(quán)信息、站點(diǎn)標(biāo)志或搜索表單中。3．MainAside標(biāo)簽，從語(yǔ)義上看為在旁邊、側(cè)邊，在article標(biāo)簽中使用時(shí)，作為主要內(nèi)容的附屬信息部分，如有關(guān)的參考資料、名詞解釋等。在article標(biāo)簽外使用時(shí)，作為頁(yè)面或者站點(diǎn)全局的附屬信息部分，如側(cè)邊欄、博客的友情鏈接部分、廣告區(qū)域等。4．AsideArticle標(biāo)簽，從語(yǔ)義上看為文檔、頁(yè)面，通常是一篇文章、一個(gè)頁(yè)面、一個(gè)獨(dú)立完整的內(nèi)容模塊；一般會(huì)帶個(gè)標(biāo)題，并放在header標(biāo)簽中，article元素可以互相嵌套。5．Article<article><header><h1>是我標(biāo)簽</h1></header><p>我是段落</p><article><div>我的內(nèi)容</div></article></article>三、網(wǎng)頁(yè)的本質(zhì)Section標(biāo)簽，從語(yǔ)義上看為部分，用于頁(yè)面內(nèi)容的獨(dú)立分塊，往往是文章的一段，通常由內(nèi)容和標(biāo)題組成，沒(méi)有標(biāo)題的內(nèi)容不推薦使用section。6．SectionFooter標(biāo)簽，從語(yǔ)義上看為文檔的腳注，或者一個(gè)內(nèi)容區(qū)塊的腳注。通常內(nèi)容為聯(lián)系信息、相關(guān)閱讀、版權(quán)信息等。7．Footer三、float和clear屬性float屬性用于定義元素浮動(dòng)的方向。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周?chē)?，不過(guò)在CSS中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是行內(nèi)元素還是塊元素。float屬性的值及其意義如下表所示。1．float屬性值描

述left元素向左浮動(dòng)right元素向右浮動(dòng)none默認(rèn)值。元素不浮動(dòng)，會(huì)顯示在文檔中默認(rèn)的位置inherit規(guī)定應(yīng)該從父元素繼承float屬性的值。IE不支持該屬性float屬性的值及其意義知識(shí)庫(kù)替換元素是指其在瀏覽器中顯示的內(nèi)容并非由HTML文檔內(nèi)容直接表示，如<img>就是一個(gè)替換元素，它本身沒(méi)有具體內(nèi)容，而是由src屬性指定一個(gè)圖像替換。三、網(wǎng)頁(yè)的本質(zhì)clear是一個(gè)與float相反的屬性，它定義了在元素的哪邊不允許出現(xiàn)浮動(dòng)元素。假設(shè)聲明為左邊清除，會(huì)使元素的上外邊框邊界剛好在左邊上浮動(dòng)元素的下外邊距邊界之下。clear屬性的值及其意義如下表所示。2．clear屬性屬性值描

述left在左側(cè)不允許浮動(dòng)元素right在右側(cè)不允許浮動(dòng)元素both在左右兩側(cè)均不允許浮動(dòng)元素none默認(rèn)值。允許浮動(dòng)元素出現(xiàn)在兩側(cè)inherit規(guī)定應(yīng)該從父元素繼承clear屬性的值。IE不支持該屬性clear屬性的值及其意義四、浮動(dòng)布局的原理請(qǐng)看下圖，當(dāng)把框1向右浮動(dòng)時(shí)，它脫離標(biāo)準(zhǔn)流并向右移動(dòng)，直到它的右邊緣碰到包含框的右邊緣。再請(qǐng)看下圖（a）所示，當(dāng)框1向左浮動(dòng)時(shí)，它脫離標(biāo)準(zhǔn)流并向左移動(dòng)，直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱跇?biāo)準(zhǔn)流中，所以不占據(jù)空間，實(shí)際上覆蓋住了框2，使框2從視圖中消失。如果把所有三個(gè)框都向左浮動(dòng)，那么框1向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框，如下圖（b）所示。（b）（a）如果包含框太窄，無(wú)法容納水平排列的3個(gè)浮動(dòng)元素，那么其他浮動(dòng)塊向下移動(dòng)，直到有足夠的空間，如下圖（a）所示。如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其他浮動(dòng)元素“卡住”，如下圖（b）所示。（b）（a）知識(shí)庫(kù)設(shè)置了浮動(dòng)屬性的元素遵循如下規(guī)則：（1）浮動(dòng)元素的邊距不會(huì)產(chǎn)生重疊。（2）只有元素中的內(nèi)容會(huì)受到浮動(dòng)元素的影響。也就是說(shuō)背景、邊距、邊框、填充等盒子模型相關(guān)屬性不受影響。（3）浮動(dòng)元素均被視為塊級(jí)元素，元素的實(shí)際寬度和高度由邊距、邊框、填充、寬度和高度屬性決定。五、常用的浮動(dòng)布局方法在網(wǎng)頁(yè)中插入兩個(gè)id名分別為left和right的<div>標(biāo)簽，HTML代碼如下，默認(rèn)效果如下圖所示。后面將以該代碼為例，講解常用的浮動(dòng)布局方法。<body><divid="left">第1個(gè)div元素</div><divid="right">第2個(gè)div元素</div></body>在網(wǎng)頁(yè)的<style>標(biāo)簽對(duì)中加入以下樣式，效果如下圖所示。方法一：兩個(gè)元素都左浮動(dòng)或都右浮動(dòng)<style>#left,#right{float:left;}</style>將網(wǎng)頁(yè)的css樣式設(shè)置為右浮動(dòng)，效果如下圖所示。<style>#left,#right{float:right;}</style>將網(wǎng)頁(yè)的css樣式設(shè)置為一個(gè)左浮動(dòng)，一個(gè)右浮動(dòng)，效果如下圖所示。方法二：第一個(gè)左浮動(dòng)，第二個(gè)右浮動(dòng)<style>#left{float:left;}#right{float:right;}</style>方法三：第一個(gè)左浮動(dòng)，第二個(gè)設(shè)置左邊距（此時(shí)左邊的<div>需要設(shè)置寬度）<style>#left{width:100px;float:left;}#right{margin-left:100px;}</style>方法四：第一個(gè)右浮動(dòng)，第二個(gè)設(shè)置右邊距<style>#left{width:100px;float:right;}#right{margin-right:100px;}</style>六、清除浮動(dòng)對(duì)布局的不良影響設(shè)置浮動(dòng)后必須清除浮動(dòng)效果對(duì)后面元素的影響。例如，在前面并列顯示的兩個(gè)<div>元素后加入一個(gè)段落。<body><divid="left">第1個(gè)div元素</div><divid="right">第2個(gè)div元素</div><p>這是一個(gè)段落</p></body>將網(wǎng)頁(yè)css樣式設(shè)置如下：<style>#left,#right{float:left;}</style><style>#left,#right{float:left;}p{clear:left;} /*這里也可以設(shè)置為both，消除左右浮動(dòng)的影響*/</style>當(dāng)兩個(gè)<div>都同時(shí)向左浮動(dòng)后，會(huì)發(fā)現(xiàn)段落<p>自動(dòng)跑到同一行中，如下圖所示。為使段落<p>不受浮動(dòng)元素的影響，需要給<p>標(biāo)簽加上clear屬性，效果如下圖所示。提示在網(wǎng)頁(yè)布局過(guò)程中通常使用空<div>放在浮動(dòng)元素的后面，利用為空<div>設(shè)置clear屬性來(lái)解決浮動(dòng)元素對(duì)其他正常標(biāo)準(zhǔn)流的影響。七、浮動(dòng)布局應(yīng)用技巧浮動(dòng)框旁邊的行框會(huì)被縮短，從而給浮動(dòng)框留出空間，使行框圍繞浮動(dòng)框。因此，創(chuàng)建浮動(dòng)框可以使文本圍繞圖像，如下圖所示。要阻止行框圍繞浮動(dòng)框，需要對(duì)該行框應(yīng)用clear屬性，如下圖（a）所示。此外，還可在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動(dòng)框下面，如下圖（b）所示。假設(shè)希望一個(gè)圖像浮動(dòng)到文本塊的左邊，并且希望這幅圖像和文本包含在另一個(gè)具有背景顏色和邊框的元素中，則可以編寫(xiě)代碼。（b）（a）這種情況下就出現(xiàn)一個(gè)問(wèn)題。因?yàn)楦?dòng)元素脫離了標(biāo)準(zhǔn)流，所以包圍圖像和文本的<div>容器不占據(jù)空間，如下圖（a）所示；如何讓浮動(dòng)元素所在的<div>容器在視覺(jué)上也包圍浮動(dòng)元素呢？需要在該元素中的某個(gè)地方應(yīng)用clear屬性。但由于沒(méi)有現(xiàn)有的元素可以應(yīng)用清理，所以只能添加一個(gè)空<div>并清理它的浮動(dòng)。效果如下圖（b）所示。還有一個(gè)辦法，就是對(duì)容器<div>進(jìn)行浮動(dòng)。這樣會(huì)得到希望的效果，但是下一個(gè)元素會(huì)受到該浮動(dòng)元素的影響。（b）（a）案例實(shí)施一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)在了解了浮動(dòng)布局的相關(guān)知識(shí)后，接下來(lái)通過(guò)為企業(yè)網(wǎng)站新聞列表網(wǎng)頁(yè)構(gòu)建整體布局（包括構(gòu)建HTML結(jié)構(gòu)和設(shè)置CSS樣式），來(lái)進(jìn)一步學(xué)習(xí)浮動(dòng)布局在實(shí)際網(wǎng)頁(yè)制作中的應(yīng)用。該頁(yè)面可分為3部分：頭部header、主體content和尾部footer。其中主體content又可分為2大部分：新聞中心（左）leftlist和新聞列表（右）rightlist，如下圖所示。案例實(shí)施在“文件”面板中打開(kāi)“ydjt”站點(diǎn)，在站點(diǎn)中新建網(wǎng)頁(yè)文檔“xwlist_1x.html”。一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)步驟01打開(kāi)“xwlist_1x.html”文檔，為其設(shè)置文檔頭信息和頁(yè)面屬性，如右圖所示。步驟02根據(jù)前面的分析，從整體上把該頁(yè)面分成3大部分，導(dǎo)航、banner部分為網(wǎng)頁(yè)的頭部（header），新聞中心（#leftlist）和新聞列表（#rightlist）部分為正文（#content），最后一行版權(quán)為尾部（footer）。一、構(gòu)建HTML結(jié)構(gòu)案例實(shí)施將插入點(diǎn)置于文檔窗口中，單擊“插入”面板“HTML”類別中的“Header”按鈕，打開(kāi)“插入Header”對(duì)話框，單擊“確定”按鈕插入Header，如下圖所示。一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)步驟03案例實(shí)施將插入點(diǎn)置于前面插入的Header標(biāo)簽下方，單擊“插入”面板“HTML”類別中的“Div”按鈕，打開(kāi)“插入Div”對(duì)話框，在“ID”編輯框中輸入“content”，然后單擊“確定”按鈕插入Div，如下圖所示。步驟04案例實(shí)施將插入點(diǎn)置于ID為“content”的Div中，單擊“插入”面板“HTML”類別中的“Div”按鈕，打開(kāi)“插入Div”對(duì)話框，在“ID”編輯框中輸入“l(fā)eftlist”，然后單擊“確定”按鈕插入Div，如下圖所示。步驟05案例實(shí)施將ID為“content”的Div中的文字刪除，然后將插入點(diǎn)置于其中“ID”為“l(fā)eftlist”的Div下方，單擊“插入”面板“HTML”類別中的“Div”按鈕，打開(kāi)“插入Div”對(duì)話框，在“ID”編輯框中輸入“rightlist”，然后單擊“確定”按鈕插入Div，如下圖所示。一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)步驟06一、構(gòu)建HTML結(jié)構(gòu)提示插入標(biāo)簽時(shí)一定要注意插入位置。當(dāng)在現(xiàn)有的某個(gè)標(biāo)簽對(duì)內(nèi)插入時(shí)，原標(biāo)簽和新插入的標(biāo)簽是嵌套（父子）關(guān)系；當(dāng)在標(biāo)簽對(duì)外插入時(shí)，原標(biāo)簽和新插入的標(biāo)簽是平行關(guān)系?？稍诖a界面或設(shè)計(jì)界面中定位插入點(diǎn)以確定插入位置。在插入某些標(biāo)簽時(shí)，還可在彈出的對(duì)話框中選擇插入位置。案例實(shí)施插入尾部的<footer>標(biāo)簽。參照前面的方法，將插入點(diǎn)置于id為content的<div>標(biāo)簽后面，單擊“插入”面板“HTML”類別中的“Footer”按鈕，打開(kāi)“插入Footer”對(duì)話框，單擊“確定”按鈕插入<footer>，如下圖所示。步驟07案例實(shí)施在<footer>標(biāo)簽對(duì)中輸入版權(quán)信息。首先將<footer>標(biāo)簽對(duì)中的默認(rèn)文本“此處為新footer標(biāo)簽的內(nèi)容”刪除，然后輸入版權(quán)信息文本，可在設(shè)計(jì)界面中輸入，也可在代碼界面中輸入，效果如下圖所示。步驟08案例實(shí)施在“CSS設(shè)計(jì)器”“源”窗格中單擊“添加CSS源”按鈕，在其下拉列表中選擇“附加現(xiàn)有的CSS文件”，如左圖所示。一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)步驟01彈出“使用現(xiàn)有的CSS文件”對(duì)話框，單擊“瀏覽”按鈕在打開(kāi)的“選擇樣式表文件”對(duì)話框中選擇項(xiàng)目五創(chuàng)建的樣式文件“s1.css”，單擊“確定”按鈕回到“使用現(xiàn)有的CSS文件”對(duì)話框，在“添加為”列表區(qū)選擇“鏈接”，然后單擊“確定”按鈕，如右圖所示。步驟02二、設(shè)置CSS樣式案例實(shí)施此時(shí)可以看到文檔內(nèi)容自動(dòng)應(yīng)用了鏈接樣式表“s1.css”中相應(yīng)的樣式，如下圖所示。一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)步驟03一、構(gòu)建HTML結(jié)構(gòu)案例實(shí)施設(shè)置“新聞中心（leftlist）”樣式。在“CSS設(shè)計(jì)器”“源”窗格中選擇鏈接的樣式表“s1.css”，在“選擇器”窗格中新建嵌套選擇器“#content#leftlist”，在“屬性”窗格“布局”類別中設(shè)置“width”為210px，“float”為左浮動(dòng)，如左圖所示。一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)步驟04一、構(gòu)建HTML結(jié)構(gòu)設(shè)置“新聞列表（rightlist）”樣式。在“CSS設(shè)計(jì)器”的“選擇器”窗格中新建嵌套選擇器“#content#rightlist”，設(shè)置“width”為890px，“float”為左浮動(dòng)，“margin-left”為20px，如右圖所示。步驟05提示此處將右邊盒子的寬度設(shè)為890px，這個(gè)寬度是怎么確定的呢？頁(yè)面寬度（1200px）減content的左右內(nèi)邊距（各40px，共計(jì)80px），再減去左邊盒子的大?。?10px）及兩個(gè)盒子的間距（20px），即1200px－80px－210px－20px＝890px。案例實(shí)施在“此處顯示id”rightlist“的內(nèi)容”文字后面單擊并按回車(chē)鍵，然后保存文檔并在瀏覽器中預(yù)覽，可以看到網(wǎng)頁(yè)的效果如下圖所示，這是因?yàn)椤靶侣劻斜怼辈糠值淖蟾?dòng)樣式對(duì)后面標(biāo)準(zhǔn)流中的元素產(chǎn)生了影響。步驟06在HTML中ID為rightlist的<div>后面插入一個(gè)class名為clear的空<div>，然后為其設(shè)置clear屬性，從而清除浮動(dòng)的影響。步驟07案例說(shuō)明本案例主要完成新聞列表網(wǎng)頁(yè)頁(yè)頭部分的HTML結(jié)構(gòu)構(gòu)建和CSS樣式設(shè)置。由于該網(wǎng)頁(yè)與項(xiàng)目五制作的新聞顯示網(wǎng)頁(yè)頁(yè)頭部分結(jié)構(gòu)差不多，只是多了一個(gè)“搜索欄目”，所以此處只需要構(gòu)建HTML結(jié)構(gòu)，并為“搜索欄目”設(shè)置CSS樣式即可。案例二制作企業(yè)網(wǎng)站新聞列表網(wǎng)頁(yè)的頁(yè)頭部分案例實(shí)施下面開(kāi)始制作新聞列表網(wǎng)頁(yè)的頁(yè)頭，效果如下圖所示。整個(gè)頁(yè)頭主要包括5大部分：Logo、導(dǎo)航菜單menu、banner圖像、頁(yè)面路徑lujing和搜索欄目search。為便于理解，此處將案例分為2大部分，先構(gòu)建HTML結(jié)構(gòu)，然后利用CSS設(shè)置網(wǎng)頁(yè)樣式。其中CSS代碼單獨(dú)放在案例一中鏈接的文件名為s1.css的CSS文件中。在完成本案例的過(guò)程中，要注意盒子模型（塊元素和行內(nèi)元素）的計(jì)算方式。一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)一、構(gòu)建HTML結(jié)構(gòu)案例實(shí)施分析新聞列表頁(yè)面頁(yè)頭的整體布局。根據(jù)效果圖，可以把前3行的內(nèi)容看作是頭部里面的內(nèi)容，分別是：最頂部的logo圖像和導(dǎo)航菜單、Banner圖像、頁(yè)面路徑和搜索欄目，所以網(wǎng)頁(yè)頭部的結(jié)構(gòu)可以表示為下圖所示。步驟01一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)一、構(gòu)建HTML結(jié)構(gòu)案例實(shí)施一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)繼續(xù)在前面的文檔“xwlist_1x.html”中操作。在案例一中插入的<header></header>標(biāo)簽對(duì)中插入logo圖像“l(fā)ogo.gif”，并將原來(lái)的文字“此處為新header標(biāo)簽的內(nèi)容”刪除。此外，為了可以使用CSS對(duì)該圖像進(jìn)行控制，在“代碼”視圖中img標(biāo)簽中輸入代碼class=“l(fā)eft”，如下圖所示。步驟02案例實(shí)施添加網(wǎng)站導(dǎo)航菜單內(nèi)容。在步驟2插入的圖像后面插入一個(gè)id名為menu的<nav>標(biāo)簽，然后在該標(biāo)簽中輸入文本，并為這些文本分別設(shè)置空鏈接，可以看到這些內(nèi)容自動(dòng)應(yīng)用了“s1.css”中設(shè)置的樣式，效果如下圖所示。一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)步驟03案例實(shí)施添加頁(yè)面banner內(nèi)容。對(duì)于banner圖像，可以采用插入圖像或使用CSS設(shè)置背景圖像的方式進(jìn)行設(shè)計(jì)。此處使用插入圖像方式，直接在步驟3插入的id名為menu的<nav>標(biāo)簽對(duì)后面插入圖像“01.jpg”即可，如下圖所示。一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)步驟04案例實(shí)施添加頁(yè)面路徑內(nèi)容。首先在步驟4插入的圖像后面插入一個(gè)id為lujing的<div>標(biāo)簽對(duì)，然后在該盒子中輸入相關(guān)文字和符號(hào)，并為路徑中的文字設(shè)置超鏈接，如下圖所示。一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)步驟05案例實(shí)施添加“站內(nèi)搜索”內(nèi)容。在步驟5插入的<div>標(biāo)簽中插入一個(gè)id為search的<div>標(biāo)簽對(duì)（注意是在文字前面插入），如下圖所示。一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)步驟06提示此處的搜索<div>也可以放在頁(yè)面路徑<div>的外面，與其形成平行關(guān)系，但這樣需要對(duì)搜索<div>設(shè)置與頁(yè)面路徑<section>相同的背景圖像。根據(jù)采用的布局方式的不同，搜索<div>的放置位置也不一樣。此處打算使用向右浮動(dòng)的方式到達(dá)頁(yè)面路徑所在行的最右邊，因此放在此位置。案例實(shí)施插入搜索表單。由于表單通常用于和服務(wù)器端進(jìn)行交互，因此此處需要插入表單元素。將id名為search的<div>中的默認(rèn)文本刪除，并在其中插入一個(gè)表單標(biāo)簽<form>（id為form1），然后在<form>標(biāo)簽中依次輸入文本“站內(nèi)搜素：”，插入一個(gè)“文本字段”和一個(gè)“圖像按鈕”表單元素，并設(shè)置相應(yīng)屬性，如下圖所示。一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)步驟07提示通過(guò)選擇“插入”>“表單”子菜單中的各項(xiàng)可以插入表單和表單元素。圖像按鈕的插入方法與圖像類似，選擇菜單項(xiàng)后，在打開(kāi)的“選擇圖像源文件”對(duì)話框中選擇圖像即可。案例實(shí)施首先去掉表單和表單對(duì)象的默認(rèn)樣式。在插入<form>對(duì)象后，會(huì)發(fā)現(xiàn)搜索search盒子變大了，這是因?yàn)?lt;form>自帶默認(rèn)的邊界和填充，需要將這些默認(rèn)屬性去掉。打開(kāi)CSS樣式文件“s1.css”，在前面設(shè)置的h3，h4和p選擇器中加上input和form。一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)步驟01設(shè)置搜索欄目整體向右對(duì)齊，此處采用右浮動(dòng)方式。在“CSS設(shè)計(jì)器”中新建選擇器“#search”，設(shè)置其padding-right、float、color、font-weight、font-size和line-height屬性值分別為20px、right、#C31103、bold、14px和30px，如右圖所示。步驟02一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)二、設(shè)置CSS樣式案例實(shí)施保存文檔并在瀏覽器中預(yù)覽，此時(shí)的效果如下圖所示。可以看出搜索欄目中的圖像按鈕要高于前面的文本框和文字。一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)步驟03案例實(shí)施使圖像按鈕與文本框?qū)R。此處需要注意的是，設(shè)置圖像按鈕上下對(duì)齊時(shí)一般使用margin-bottom加負(fù)值，在“CSS設(shè)計(jì)器”中新建選擇器“#imageField”，設(shè)置其margin-bottom值為－7px，此時(shí)可以看到圖像按鈕與文本框?qū)R了，如下圖所示。一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)步驟04案例說(shuō)明本案例將通過(guò)制作右圖所示的企業(yè)網(wǎng)站新聞列表頁(yè)面中的新聞中心欄目，來(lái)繼續(xù)學(xué)習(xí)使用浮動(dòng)方式和其他方式進(jìn)行網(wǎng)頁(yè)布局的方法。案例三制作企業(yè)網(wǎng)站新聞列表網(wǎng)頁(yè)的新聞中心欄目案例實(shí)施一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)根據(jù)分析，可以看出左側(cè)新聞中心欄目（leftlist）內(nèi)容由兩部分構(gòu)成，分別是：新聞標(biāo)題和正文列表（ul，li），結(jié)構(gòu)如下圖所示。步驟01一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)一、構(gòu)建HTML結(jié)構(gòu)案例實(shí)施一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)在案例一插入的id為leftlist的<div>中插入id為listTitle的<div>，作為標(biāo)題的容器，并將其中的文本“此處顯示id”leftlist“的內(nèi)容”刪除，如下圖所示。步驟02案例實(shí)施一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)設(shè)置文字列表。將插入點(diǎn)置于步驟2插入的<div>后面，單擊“插入”面板“HTML”類別中的“項(xiàng)目列表”按鈕，然后輸入文本“集團(tuán)要聞”，之后按回車(chē)鍵輸入“經(jīng)營(yíng)動(dòng)態(tài)”，按照同樣的方法依次輸入下方的其他列表文本，如下圖所示。步驟03案例實(shí)施一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)為列表文字添加超鏈接。選中項(xiàng)目文字“集團(tuán)要聞”，在“屬性”面板“鏈接”編輯框中輸入“#”符號(hào)，為文字設(shè)置空鏈接，之后按照同樣的方法為下方的列表文字分別設(shè)置空鏈接，如下圖所示。步驟04將id為listTitle的div中的默認(rèn)文字“此處顯示id”listTitle“的內(nèi)容”刪除，重新輸入“新聞中心”，完成HTML結(jié)構(gòu)的構(gòu)建。步驟05案例實(shí)施一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)給新聞標(biāo)題listTitle盒子設(shè)置背景和文字樣式。在“CSS選擇器”中新建選擇器“#listTitle”，在“屬性”窗格中分別設(shè)置其height、padding-left、color、font-weight、font-size、line-height和background屬性，如右圖所示。步驟01一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)二、設(shè)置CSS樣式左側(cè)新聞中心的背景圖像由三部分構(gòu)成：listhead.gif、listmiddle.gif和listfoot.gif。在設(shè)計(jì)樣式時(shí)可以將listhead.gif作為新聞標(biāo)題的背景，listmiddle.gif作為ul的背景，listfoot.gif作為最外層的leftlist盒子的背景。案例實(shí)施一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)為新聞中心的列表菜單設(shè)置樣式。由于<ul>和<li>都自帶默認(rèn)的項(xiàng)目列表符號(hào)，以及邊界margin或填充padding屬性，因此通常在制作時(shí)需要將他們的默認(rèn)樣式統(tǒng)一去掉?？梢栽谇懊嬉呀?jīng)存在的選擇器中添加相應(yīng)標(biāo)簽，代碼如右圖所示。步驟02提示利用height:48px;屬性設(shè)置的高度與背景圖像listhead.gif的高度一致。利用line-height:40px;屬性設(shè)置的行高不能超過(guò)背景圖像的高度。

padding-left:20px;屬性表示給標(biāo)題與左邊界保留20px的間距，此處不能使用margin-left屬性。案例實(shí)施一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)為leftlist盒子里的<ul>設(shè)置背景和上下間距樣式。在“CSS設(shè)計(jì)器”中新建嵌套選擇器“#content#leftlistul”，設(shè)置其background和padding屬性，如左圖所示。步驟03為leftlist盒子里<ul>中的<li>添加虛線邊框、列表符號(hào)和左右間距樣式。在“CSS設(shè)計(jì)器”中新建嵌套選擇器“#leftlistulli”，設(shè)置其各項(xiàng)屬性，如右圖所示。步驟04案例實(shí)施一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)為leftlist盒子里<ul>中列表文本的超鏈接去除下劃線并設(shè)置文字顏色。在“CSS設(shè)計(jì)器”中新建嵌套選擇器“#leftlistullia”，設(shè)置其各項(xiàng)屬性，如左圖所示。步驟05為leftlist盒子添加背景。在“CSS設(shè)計(jì)器”中選擇前面在案例一中創(chuàng)建的“#content#leftlist”，并為其添加padding和背景屬性，如右圖所示。步驟06案例實(shí)施一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)此時(shí)便完成了新聞中心欄目的制作，保存文檔并在瀏覽器中預(yù)覽，效果如下圖所示。步驟07提示padding-bottom:22px;此處通過(guò)增加下方的內(nèi)邊距來(lái)增加<div>的高度，下邊距的高度應(yīng)大于或等于背景圖像listfoot.gif的高度22px。

background-position:bottom;設(shè)置背景圖像在塊的最下方顯示。案例說(shuō)明本案例將通過(guò)制作右圖所示企業(yè)網(wǎng)站新聞列表網(wǎng)頁(yè)中的集團(tuán)要聞欄目，來(lái)繼續(xù)學(xué)習(xí)使用浮動(dòng)方式和其他方式進(jìn)行網(wǎng)頁(yè)布局的方法。效果圖中的藍(lán)色字體為鼠標(biāo)移上去的效果。案例三制作企業(yè)網(wǎng)站新聞列表網(wǎng)頁(yè)的新聞中心欄目案例實(shí)施一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)下面開(kāi)始制作集團(tuán)要聞欄目，通過(guò)分析效果圖，可以將整個(gè)欄目分為4大部分：欄目標(biāo)題h2、新聞標(biāo)題、新聞時(shí)間和新聞翻頁(yè)，如下圖所示。制作過(guò)程中需要注意，采用浮動(dòng)方式進(jìn)行布局時(shí)，如何對(duì)HTML元素進(jìn)行合理的設(shè)置。案例實(shí)施一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)設(shè)置欄目標(biāo)題。此處的欄目標(biāo)題包括中文和英文兩部分，需要將英文部分放置在<span>標(biāo)簽對(duì)中，并設(shè)置其class名為fnt1，以便使用CSS單獨(dú)設(shè)置其樣式。將id為rightlist的Div中的默認(rèn)文字刪除，單擊“插入”面板“HTML”類別中的“標(biāo)題”下拉按鈕，在其下拉列表中選擇“H2”，并輸入標(biāo)題文字“集團(tuán)要聞GroupNews”，然后在代碼界面中為英文加上<span>標(biāo)簽和class屬性，如下圖所示。步驟01一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)一、構(gòu)建HTML結(jié)構(gòu)案例實(shí)施一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)設(shè)置新聞標(biāo)題與新聞時(shí)間。在步驟1設(shè)置好的標(biāo)題后面按回車(chē)鍵并單擊“插入”面板“HTML”類別中的“項(xiàng)目列表”按鈕，之后輸入日期和新聞標(biāo)題，并為其設(shè)置空鏈接，最后在代碼界面中為日期添加<span>標(biāo)簽和class屬性，如下圖所示。步驟02提示新聞標(biāo)題與新聞時(shí)間的布局結(jié)構(gòu)與前面搜索框的原理一致，關(guān)鍵在于是浮動(dòng)新聞標(biāo)題還是新聞時(shí)間。如果希望使新聞時(shí)間向右浮動(dòng)到列表的最右邊，那么新聞時(shí)間的HTML元素應(yīng)該在新聞標(biāo)題之前。此外，新聞時(shí)間與新聞標(biāo)題在同一行顯示，需要對(duì)新聞時(shí)間采用行內(nèi)標(biāo)簽<span>，并添加class名newsTime。案例實(shí)施一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)參照步驟2的操作，在第1條新聞后面單擊并按回車(chē)鍵，輸入第2條新聞（包括日期和新聞標(biāo)題內(nèi)容），并同樣地將日期括起來(lái)和設(shè)置class屬性；之后按照同樣的方法依次輸入其他新聞，如下圖所示。步驟03案例實(shí)施一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)知識(shí)庫(kù)此處新聞標(biāo)題和新聞時(shí)間的HTML結(jié)構(gòu)并不是唯一的，也可以將新聞時(shí)間放在新