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

1、網(wǎng)頁設(shè)計(jì)與制作 學(xué)習(xí)內(nèi)容CSS概述Dreamweaver CS5創(chuàng)建和管理CSS規(guī)則使用CSS布局網(wǎng)頁網(wǎng)頁設(shè)計(jì)與制作 學(xué)習(xí)任務(wù)： 5.1任務(wù)一：布局首頁Logo、Banner 5.2任務(wù)二：布局首頁中主體內(nèi)容 通過學(xué)習(xí)任務(wù)完成對(duì)某網(wǎng)站的首頁及二級(jí)頁面的布局。網(wǎng)頁設(shè)計(jì)與制作5.1 任務(wù)一：布局首頁Logo、Banner 5.1.1 知識(shí)要點(diǎn)知識(shí)要點(diǎn)1CSS概述CSS（Cascading Style sheets）層疊樣式層疊樣式表表，提供了靈活的選擇器和豐富的屬性讓網(wǎng)頁呈現(xiàn)出靈活多樣的表現(xiàn)形式。網(wǎng)頁設(shè)計(jì)與制作（1）定義CSS CSS代碼是和HTML代碼截然不同，定義CSS通常有三種方式： 外部樣

2、式外部樣式 嵌入樣式嵌入樣式 內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式 網(wǎng)頁設(shè)計(jì)與制作 （2）選擇器 外部樣式和嵌入樣式定式中都有選擇器（selector），選擇器是指定義樣式所起作用的范圍，通常有以下幾種： ID選擇器 標(biāo)簽選擇器 類選擇器 復(fù)合選擇器網(wǎng)頁設(shè)計(jì)與制作（3）CSS屬性定義樣式在具體定義時(shí)也是通過“屬性:屬性值”的方式，每個(gè)屬性之間使用“;”分隔。（4）使用CSS根據(jù)CSS定義方式的不同，CSS的使用方式也有所不同。網(wǎng)頁設(shè)計(jì)與制作2Dreamweaver創(chuàng)建和管理CSS規(guī)則 在Dreamweaver中對(duì)于CSS代碼提供了可視化的管理方式，自動(dòng)的生成代碼。即使用CSS管理的核心是“CSS樣樣式面板式面板”

3、，如右圖所示。啟動(dòng)啟動(dòng)方式方式是在“菜單欄”中選擇“窗口”|“CSS樣式”（Shift+F11）。網(wǎng)頁設(shè)計(jì)與制作（1）創(chuàng)建CSS樣式 步驟1：在“CSS樣式”面板中點(diǎn)擊“新建CSS規(guī)則”按鈕 ，打開“新建CSS規(guī)則”對(duì)話框，設(shè)置選擇器類型名稱等，點(diǎn)擊“確定”。 步驟2：如果我們?cè)O(shè)置類選擇器 ，則繼續(xù)進(jìn)行相應(yīng)的CSS樣式的規(guī)則定義。網(wǎng)頁設(shè)計(jì)與制作（2）插入Div標(biāo)簽 Div標(biāo)簽是頁面定位的容器，通常網(wǎng)頁元素放置在Div中，然后設(shè)置Div樣式達(dá)到網(wǎng)頁布局的目的，當(dāng)然并不是所以的CSS布局都是用Div。標(biāo)題標(biāo)簽、列表等也是很常用的布局元素。 插入Div標(biāo)簽的具體過程：步驟1：在文檔中定位插入點(diǎn)，在“

4、菜單欄”中選擇“插入”|“布局對(duì)象”|“Div標(biāo)簽”，打開“插入Div標(biāo)簽”對(duì)話框步驟2：設(shè)定Div標(biāo)簽的參數(shù)，單擊“確定”按鈕。 網(wǎng)頁設(shè)計(jì)與制作（3）使用CSS樣式為選定的標(biāo)簽創(chuàng)建樣式類選擇器的使用（4）管理CSS樣式編輯樣式刪除樣式附加樣式網(wǎng)頁設(shè)計(jì)與制作3盒模式 “盒模式”是Div+CSS布局的基礎(chǔ)，頁面在布局中將內(nèi)容劃分為不同的模塊，每個(gè)模塊基本輪廓都可以是一個(gè)矩形框，CSS的“盒模式”是指使用CSS對(duì)于矩形框（Div或者其他標(biāo)簽）進(jìn)行樣式定義后的盒子。網(wǎng)頁設(shè)計(jì)與制作 “盒模式”的構(gòu)成構(gòu)成：內(nèi)容、Padding（填充） 、Border（邊框） 、Margin（邊界） 。如下圖所示：網(wǎng)頁設(shè)

5、計(jì)與制作5.1.2 工作任務(wù)和設(shè)計(jì)效果 某單位的首頁效果圖已經(jīng)繪制完成，如圖5-1-26所示，網(wǎng)頁所需素材已經(jīng)被提取出來，當(dāng)前任務(wù)是根據(jù)效果圖和所提供的素材在Dreamweaver CS5使用Div+CSS技術(shù)布局首頁中的Logo和Banner。 網(wǎng)頁設(shè)計(jì)與制作logoBanner 圖5-1-26網(wǎng)頁設(shè)計(jì)與制作具體工作任務(wù)流程：初始化CSS樣式設(shè)置頁面參數(shù)布局頁眉插入Logo插入標(biāo)題布局Banner網(wǎng)頁設(shè)計(jì)與制作5.2 任務(wù)二：布局首頁中導(dǎo)航條和主體內(nèi)容5.2.1 知識(shí)要點(diǎn)知識(shí)要點(diǎn)1項(xiàng)目列表和編號(hào)列表的樣式設(shè)置 項(xiàng)目列表和編號(hào)列表用在網(wǎng)頁中布局有規(guī)律的多項(xiàng)內(nèi)容時(shí)經(jīng)常使用，例如：新聞列表、商品列

6、表、導(dǎo)航條等 。網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目列表和編號(hào)列表的代碼 ：網(wǎng)頁設(shè)計(jì)與制作（1）列表和列表項(xiàng)的“盒模式”設(shè)置列表和列表項(xiàng)的CSS規(guī)則定義需要在Dreamweaver狀態(tài)欄中選擇、或標(biāo)簽實(shí)現(xiàn)。通常會(huì)使用標(biāo)簽選擇器定義列表或者列表項(xiàng)的CSS規(guī)則。（2）去除列表項(xiàng)符號(hào)給列表的新建CSS規(guī)則，在“l(fā)i的CSS規(guī)則定義”對(duì)話框中選擇“列表”類別，設(shè)置“List-style-type”的值為“none”，然后單擊“應(yīng)用”按鈕。網(wǎng)頁設(shè)計(jì)與制作（3）設(shè)置列表項(xiàng)圖像符號(hào)列表項(xiàng)前默認(rèn)的符號(hào)很多，但在布局網(wǎng)頁時(shí)這些符號(hào)并不很合適，需要圖像作為列表符號(hào)。（4）列表項(xiàng)的內(nèi)聯(lián)內(nèi)聯(lián)（inline）是指讓網(wǎng)頁元素行布局，HTM

7、L很多的元素是塊級(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)。 網(wǎng)頁設(shè)計(jì)與制作2定義列表的樣式設(shè)置 定義列表的代碼如圖5-2-9所示，對(duì)于定義列表樣式定義是給和進(jìn)行設(shè)置。圖5-2-9 定義列表代碼網(wǎng)頁設(shè)計(jì)與制作3超級(jí)鏈接的樣式設(shè)置 超級(jí)鏈接的樣式是通過重寫“a”標(biāo)簽樣式和四個(gè)偽類選擇器進(jìn)行控制。通常偽類選擇器是配合其他選擇器組成復(fù)合選擇器使用 。網(wǎng)頁設(shè)計(jì)與制作 4浮動(dòng)和清除（1）浮動(dòng)（float）：定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)“盒子”，而不論它本身是何種元素。（2）清除（clear）：定義了元素的哪邊上不允許出現(xiàn)浮動(dòng)元素。 網(wǎng)頁設(shè)計(jì)與制作 5濾鏡 濾鏡是給標(biāo)簽定義的規(guī)則類似Photoshop軟件給圖像增加的濾鏡效果。在定義時(shí)是通過“CSS規(guī)則定義”對(duì)話框中的“擴(kuò)展”類別的“filter”屬性設(shè)置。 網(wǎng)頁設(shè)計(jì)與制作5.2.2 工作任務(wù)和設(shè)計(jì)效果本任務(wù)繼續(xù)上一節(jié)的工作任務(wù)，完整首頁的整體布局，在這一節(jié)中要完成布局首頁的導(dǎo)航條、主體內(nèi)容和頁腳，如下所示。導(dǎo)航條、主體內(nèi)容和頁腳網(wǎng)頁設(shè)計(jì)與制