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

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

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

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

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

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

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