第5章情景5-布局公司首頁(yè)和二級(jí)頁(yè)面

第五章情景5

布局公司首頁(yè)和二級(jí)頁(yè)面

學(xué)習(xí)內(nèi)容CSS概述DreamweaverCS5創(chuàng)建和管理CSS規(guī)則使用CSS布局網(wǎng)頁(yè)

學(xué)習(xí)任務(wù)：

5.1任務(wù)一：布局首頁(yè)Logo、Banner

5.2任務(wù)二：布局首頁(yè)中主體內(nèi)容通過(guò)學(xué)習(xí)任務(wù)完成對(duì)某網(wǎng)站的首頁(yè)及二級(jí)頁(yè)面的布局。5.1任務(wù)一：布局首頁(yè)Logo、Banner5.1.1知識(shí)要點(diǎn)1．CSS概述CSS（CascadingStylesheets）層疊樣式表，提供了靈活的選擇器和豐富的屬性讓網(wǎng)頁(yè)呈現(xiàn)出靈活多樣的表現(xiàn)形式。（1）定義CSSCSS代碼是和HTML代碼截然不同，定義CSS通常有三種方式：外部樣式嵌入樣式內(nèi)聯(lián)樣式

（2）選擇器外部樣式和嵌入樣式定式中都有選擇器（selector），選擇器是指定義樣式所起作用的范圍，通常有以下幾種：

ID選擇器標(biāo)簽選擇器類選擇器復(fù)合選擇器（3）CSS屬性定義樣式在具體定義時(shí)也是通過(guò)“屬性:屬性值”的方式，每個(gè)屬性之間使用“;”分隔。（4）使用CSS根據(jù)CSS定義方式的不同，CSS的使用方式也有所不同。2．Dreamweaver創(chuàng)建和管理CSS規(guī)則

在Dreamweaver中對(duì)于CSS代碼提供了可視化的管理方式，自動(dòng)的生成代碼。即使用CSS管理的核心是“CSS樣式面板”，如右圖所示。啟動(dòng)方式是在“菜單欄”中選擇“窗口”|“CSS樣式”（Shift+F11）。

（1）創(chuàng)建CSS樣式

步驟1：在“CSS樣式”面板中點(diǎn)擊“新建CSS規(guī)則”按鈕，打開(kāi)“新建CSS規(guī)則”對(duì)話框，設(shè)置選擇器類型名稱等，點(diǎn)擊“確定”。步驟2：如果我們?cè)O(shè)置類選擇器，則繼續(xù)進(jìn)行相應(yīng)的CSS樣式的規(guī)則定義。（2）插入Div標(biāo)簽

Div標(biāo)簽是頁(yè)面定位的容器，通常網(wǎng)頁(yè)元素放置在Div中，然后設(shè)置Div樣式達(dá)到網(wǎng)頁(yè)布局的目的，當(dāng)然并不是所以的CSS布局都是用Div。標(biāo)題標(biāo)簽、列表等也是很常用的布局元素。插入Div標(biāo)簽的具體過(guò)程：步驟1：在文檔中定位插入點(diǎn)，在“菜單欄”中選擇“插入”|“布局對(duì)象”|“Div標(biāo)簽”，打開(kāi)“插入Div標(biāo)簽”對(duì)話框步驟2：設(shè)定Div標(biāo)簽的參數(shù)，單擊“確定”按鈕。（3）使用CSS樣式為選定的標(biāo)簽創(chuàng)建樣式類選擇器的使用（4）管理CSS樣式編輯樣式刪除樣式附加樣式3．盒模式“盒模式”是Div+CSS布局的基礎(chǔ)，頁(yè)面在布局中將內(nèi)容劃分為不同的模塊，每個(gè)模塊基本輪廓都可以是一個(gè)矩形框，CSS的“盒模式”是指使用CSS對(duì)于矩形框（Div或者其他標(biāo)簽）進(jìn)行樣式定義后的盒子?！昂心Ｊ健钡臉?gòu)成：內(nèi)容、Padding（填充）、Border（邊框）、Margin（邊界）。如下圖所示：5.1.2工作任務(wù)和設(shè)計(jì)效果

某單位的首頁(yè)效果圖已經(jīng)繪制完成，如圖5-1-26所示，網(wǎng)頁(yè)所需素材已經(jīng)被提取出來(lái)，當(dāng)前任務(wù)是根據(jù)效果圖和所提供的素材在DreamweaverCS5使用Div+CSS技術(shù)布局首頁(yè)中的Logo和Banner。logoBanner圖5-1-26具體工作任務(wù)流程：初始化CSS樣式設(shè)置頁(yè)面參數(shù)布局頁(yè)眉插入Logo插入標(biāo)題布局Banner5.2任務(wù)二：布局首頁(yè)中導(dǎo)航條和主體內(nèi)容5.2.1知識(shí)要點(diǎn)1．項(xiàng)目列表和編號(hào)列表的樣式設(shè)置項(xiàng)目列表和編號(hào)列表用在網(wǎng)頁(yè)中布局有規(guī)律的多項(xiàng)內(nèi)容時(shí)經(jīng)常使用，例如：新聞列表、商品列表、導(dǎo)航條等。項(xiàng)目列表和編號(hào)列表的代碼：（1）列表和列表項(xiàng)的“盒模式”設(shè)置列表和列表項(xiàng)的CSS規(guī)則定義需要在Dreamweaver狀態(tài)欄中選擇<ul>、<ol>或<li>標(biāo)簽實(shí)現(xiàn)。通常會(huì)使用標(biāo)簽選擇器定義列表或者列表項(xiàng)的CSS規(guī)則。（2）去除列表項(xiàng)符號(hào)給列表的<li>新建CSS規(guī)則，在“l(fā)i的CSS規(guī)則定義”對(duì)話框中選擇“列表”類別，設(shè)置“List-style-type”的值為“none”，然后單擊“應(yīng)用”按鈕。（3）設(shè)置列表項(xiàng)圖像符號(hào)列表項(xiàng)前默認(rèn)的符號(hào)很多，但在布局網(wǎng)頁(yè)時(shí)這些符號(hào)并不很合適，需要圖像作為列表符號(hào)。（4）列表項(xiàng)的內(nèi)聯(lián)內(nèi)聯(lián)（inline）是指讓網(wǎng)頁(yè)元素行布局，HTML很多的元素是塊級(jí)（block）布局，例如：Div、H1、P等，每一塊默認(rèn)占有一行。列表項(xiàng)“l(fā)i”默認(rèn)也屬于塊級(jí)元素，所以每個(gè)列表項(xiàng)占有一行，如果制作橫向?qū)Ш綏l需要列表項(xiàng)內(nèi)聯(lián)。2．定義列表的樣式設(shè)置

定義列表的代碼如圖5-2-9所示，對(duì)于定義列表樣式定義是給<dt>和<dd>進(jìn)行設(shè)置。

圖5-2-9定義列表代碼3．超級(jí)鏈接的樣式設(shè)置

超級(jí)鏈接的樣式是通過(guò)重寫(xiě)“a”標(biāo)簽樣式和四個(gè)偽類選擇器進(jìn)行控制。通常偽類選擇器是配合其他選擇器組成復(fù)合選擇器使用。4．浮動(dòng)和清除（1）浮動(dòng)（float）：定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過(guò)在CSS中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)“盒子”，而不論它本身是何種元素。（2）清除（clear）：定義了元素的哪邊上不允許出現(xiàn)浮動(dòng)元素。5．濾鏡

濾鏡是給標(biāo)簽定義的規(guī)則類似Photoshop軟件給圖像增加的濾鏡效果。在定義時(shí)是通過(guò)“CSS規(guī)則定義”對(duì)話框中的“擴(kuò)展”類別的“filter”屬性設(shè)置。5.2.2工作任務(wù)和設(shè)計(jì)效果本任務(wù)繼續(xù)上一節(jié)的工作任務(wù)，完整首頁(yè)的整體布局，在這一節(jié)中要完成布局首頁(yè)的導(dǎo)航條、主體內(nèi)容和頁(yè)腳，如下所示。導(dǎo)航條、主體內(nèi)容和頁(yè)腳工作任務(wù)的具體流程