DIVCSS布局經(jīng)典.ppt

1、DIV+CSS布局基礎(chǔ)經(jīng)典,講師:趙海海,課程大綱,傳統(tǒng)布局與CSS布局,XHTML與CSS基礎(chǔ),CSS網(wǎng)頁布局與定位,實例：三欄居中式布局,1.1.1 傳統(tǒng)Table布局,傳統(tǒng)Table布局方式只是利用了HTML的table元素所具有的零邊框特性 因此，Table布局的核心是： 設(shè)計一個能滿足版式要求的表格結(jié)構(gòu)，將內(nèi)容裝入每個單元格中，間距及空格使用透明gif圖片實現(xiàn)，最終的結(jié)構(gòu)是一個復(fù)雜的表格（有時候會出現(xiàn)多次嵌套），顯然，這樣不利于設(shè)計和修改。,1.1.2 傳統(tǒng)Table布局示意圖,1.1.3 Table布局的缺點,設(shè)計復(fù)雜，改版時工作量巨大 表現(xiàn)代碼與內(nèi)容混合，可讀性差 不利于數(shù)據(jù)調(diào)用

2、分析 網(wǎng)頁文件量大，瀏覽器解析速度慢如蝸牛,2.2.0 Web標(biāo)準(zhǔn)的構(gòu)成（選）,表現(xiàn)：用于對已經(jīng)被結(jié)構(gòu)化的信息進行顯示上的修飾，包括版式顏色大小等. 主要技術(shù)就是CSS,目前版本2.0,行為：是指對整個文檔內(nèi)部的一個模型進行定義及交互行為的編寫 主要技術(shù)有：DOM(文檔對象模型)、ECMAScript(JavaScript腳本語言),結(jié)構(gòu)：用來對網(wǎng)頁中的信息進行整理與分類， 常用的技術(shù)有：HTML、XHTML、XML,1.2.1 Web標(biāo)準(zhǔn)布局,基于Web標(biāo)準(zhǔn)的網(wǎng)站設(shè)計的核心目的： 如何使網(wǎng)頁的表現(xiàn)與內(nèi)容分離！ 這樣做的好處： 高效率的開發(fā)與簡單維護 信息跨平臺的可用性 降低服務(wù)器成本；加快網(wǎng)

3、頁解析速度 更良好的用戶體驗 那么，CSS2.0從真正意義實現(xiàn)了設(shè)計代碼與內(nèi)容分離,1.2.2 DIV+CSS布局示意圖,真正的表現(xiàn)與內(nèi)容完全分離，代碼可讀性強，樣式可重復(fù)應(yīng)用,1.2.3 CSS布局代碼示例, 測試頁 頭部 主體 尾部 ,Xhtml文檔,* font-family: Arial, Helvetica, sans-serif, 宋體; font-size: 12px; margin: 0px; text-align:center; #container width: 810px; margin:auto; background:#CCCCCC; #header height:

4、100px; width: 800px; padding:5px; background-color: #6699FF; #content height: 400px; width: 800px; padding:5px; background-color#FF9900; #footer width: 800px; height: 50px; padding:5px; background-color: #6699FF; ,Style1.css,最終布局效果,2.1.1 向Web標(biāo)準(zhǔn)過度 / XHTML 基礎(chǔ),為什么要使用XHTML? XHTML是在HTML4.0基礎(chǔ)上，用XML規(guī)則擴展得到的

5、，建立XHTML的目的就是為了實現(xiàn)HTML向XML的過度。 HTML:更多的被用于網(wǎng)頁設(shè)計和表現(xiàn) XHTML:它的初衷就不是為了表現(xiàn)，而是對網(wǎng)頁內(nèi) 容進行結(jié)構(gòu)設(shè)計，嚴(yán)格的說它是面向文檔 結(jié)構(gòu)的語言，更符合未來的發(fā)展要求！,2.1.2 選擇合適的DTD,一個標(biāo)準(zhǔn)的XHTML文檔，必須以Doctype標(biāo)簽作為開始，doctype用于定義文檔類型。 對于XHTML而言，可以選擇三種不同的XHTML文檔類型，請看下面代碼：, 無標(biāo)題文檔 ,Transitional類型：過度類型。瀏覽器對XHTML的解析將為寬松（建議使用） Strict類型：嚴(yán)格類型。文檔中不允許使用任何表現(xiàn)樣式的標(biāo)識和屬性 Fram

6、eset類型：框架頁類型。網(wǎng)頁使用框架結(jié)構(gòu)時，聲明此類型,2.1.3 DreamweaverCS3中DTD,（DTD文檔類型）選擇畫面,2.1.4 XHTML 語法規(guī)范,屬性名稱必須小寫 屬性值必須使用雙引號 不允許使用標(biāo)簽簡寫 使用id替代name 必須使用結(jié)束標(biāo)簽 注意：選擇合適的標(biāo)簽（區(qū)別與table布局的習(xí)慣.） 布局用：； 文本用：， 圖片用： 列表用： 數(shù)據(jù)用： 其他的：form，input，select,各司其職,2.2.1 CSS語法基礎(chǔ),何為CSS（Cascading Style Sheet）？ CSS中文譯為層疊樣式表。是用于控制網(wǎng)頁樣式并允許 將樣式信息與網(wǎng)頁內(nèi)容分離的一

7、種標(biāo)記性語言。 即:告訴瀏覽器，這段樣式將應(yīng)用到哪個對象.,CSS語法結(jié)構(gòu): 選擇符 屬性1:值1； 屬性2:值2 舉例：body font-size:12px; text-align:center; 參數(shù)說明： 屬性和屬性值之間用冒號(:)隔開，定義多個屬性時， 屬性之間用分號(;)隔開,CSS選擇器,2.2.2 CSS選擇器（符）,標(biāo)簽選擇器： 指以網(wǎng)頁中已有的標(biāo)簽名作為名稱的選擇器，幾乎所有的html標(biāo)簽均可用作該類選擇器（如：body p h1 等等.）,類別選擇器： 屬用戶自定義名稱的選擇器，可以在XHTML標(biāo)簽中用class=“”為相應(yīng)標(biāo)簽指派樣式?？衫斫鉃橐活悺?特點：在文檔中允

8、許被重復(fù)使用,Id 選擇器： 屬用戶自定義名稱選擇器，基于DOM文檔對象模型原理出現(xiàn)的選擇器，可以在XHTML標(biāo)簽中用id=“”為相應(yīng)標(biāo)簽指派樣式，可理解為一個標(biāo)識 特點：在網(wǎng)頁中，每個id名稱只能使用一次,2.2.3 選擇器的聲明, body,td,th,#header,.onecolor:blue;font-size:12px; ,集體聲明:并列關(guān)系, P h1color:blue;font-size:14px; ,嵌套聲明:從屬關(guān)系, P H1,#header ulcolor:blue;font-size:12px; ,混合聲明:并列及從屬關(guān)系,2.2.4 如何應(yīng)用CSS到網(wǎng)頁中,行內(nèi)樣

9、式表 內(nèi)部（內(nèi)嵌）樣式表 外部（鏈接）樣式表 導(dǎo)入式樣式表,CSS編碼可以多種方式靈活地應(yīng)用到我們所設(shè)計XHTML頁面之中，選擇方式可根據(jù)我們對設(shè)計的不同表現(xiàn)手段來制定，一般按CSS代碼位置分為：,2.2.5 實例代碼:CSS按位置的分類, 測試頁 頭部 主體 尾部 ,在之間加入 import url(css/style2.css); 稱為：導(dǎo)入式樣式表,2.2.5 樣式優(yōu)先權(quán)問題,2.6 CSS開發(fā)環(huán)境與調(diào)試環(huán)境,3.1 被遺忘的主角 DIV,3.2 CSS盒子模型,3.3 文檔流及浮動概念,3.4 浮動定位與絕對定位,4.0 一個簡單的CSS布局實例,網(wǎng)頁制作流程： 效果圖切圖布局（DIV

10、+CSS、table 嵌入動態(tài)程序或模板標(biāo)簽測試發(fā)布,學(xué)習(xí)要點及,傳統(tǒng)布局于CSS布局的區(qū)別,CSS（Cascading Style Sheet），中文譯為層疊樣式表。是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。 【本章學(xué)習(xí)目的】 本章通過多個CSS樣式的應(yīng)用實例，重點介紹了CSS樣式表功能、定義CSS規(guī)則的方法，應(yīng)用內(nèi)嵌式樣式表和鏈接外部樣式表的方法等，通過本章的學(xué)習(xí)，讀者應(yīng)了解CSS樣式表的用途，掌握創(chuàng)建和應(yīng)用CSS樣式表的方法，學(xué)會用CSS樣式表進行網(wǎng)頁的美化和網(wǎng)頁布局。,5.1 利用CSS 樣式表的網(wǎng)頁實例,CSS樣式表是由一系列樣式選擇器和CSS屬性組成，它支持

11、字體屬性、顏色和背景屬性、文本屬性、邊框?qū)傩?、列表屬性以及精確定位網(wǎng)頁元素屬性等，增強了網(wǎng)頁的格式化功能。 使用CSS樣式表的另一個優(yōu)點是可以利用同一個樣式表對整個站點的具有相同性質(zhì)的網(wǎng)頁元素進行格式修飾，當(dāng)需要更改樣式設(shè)置時，只要在這個樣式表中修改，而不用對每個頁面逐個進行修改，簡化了格式化網(wǎng)頁的工作。,5.1 利用CSS 樣式表的網(wǎng)頁實例,【例5.5】利用CSS樣式還可以代替表格進行網(wǎng)頁布局，這是目前較為流行頁面排版方式，如圖所示。 該實例主要采用了div標(biāo)簽css樣式，涉及到的知識點有以下幾點： 分析構(gòu)架：畫出構(gòu)架圖； 模塊拆分：分別定義Div的CSS樣式； 在網(wǎng)頁中插入Div標(biāo)簽，在D

12、iv中填充網(wǎng)頁內(nèi)容； 總體調(diào)整：色彩及內(nèi)容調(diào)整，適當(dāng)修改CSS樣式。,5.2 使用CSS樣式表,5.2.1 CSS樣式表概述 1、樣式表的使用 CSS樣式表的使用常用的方法有以下兩種： 頁面內(nèi)嵌法。將樣式表代碼直接寫在HTML標(biāo)簽的head區(qū)。 外部鏈接法。將樣式表寫在一個獨立的后綴名為CSS文件中，在需要應(yīng)用CSS樣式的網(wǎng)頁中鏈接該文件，在頁面和之間用以下代碼調(diào)用。,5.2 使用CSS樣式表,2、CSS樣式表語法選擇符 屬性1：值1；屬性2：值2 參數(shù)說明： 屬性和屬性值之間用冒號(:)隔開，定義多個屬性時，屬性之間用分號(;)隔開。,1. 創(chuàng)建CSS樣式 選擇“窗口”菜單“CSS樣式”命令

13、，打開“CSS樣式”面板，單擊右下角的“新建CSS規(guī)則”按鈕，或選擇“文本”菜單“CSS樣式”“新建”命令，彈出“新建CSS規(guī)則”對話框.,5.2.2 在Dreamweaver中定義CSS,5.2.2 在Dreamweaver中定義CSS,選擇器類型有以下三種： （1） 類 自定義 CSS 規(guī)則，它的特點是靈活多變，可以重復(fù)將樣式應(yīng)用于網(wǎng)頁元素。在應(yīng)用時，它會在HTML標(biāo)簽內(nèi)加入一個類（class）的定久來規(guī)定標(biāo)簽中的格式。比如將類的樣式mystyle定義于某個標(biāo)題，那么代碼為： 標(biāo)題1應(yīng)用自定義的樣式 （2） 標(biāo)簽 重新定義指定標(biāo)簽的外觀，例如：創(chuàng)建或更改 h1 標(biāo)簽的 CSS 樣式時，所有

14、用 h1 標(biāo)簽設(shè)置了格式的文本都會立即更新，實現(xiàn)了批量快速更改格式的特點。,5.2.2 在Dreamweaver中定義CSS,（3） 高級 在CSS 選擇器中，它的功能最為強大，可以定義超鏈接的特效，定義特定元素組合的格式設(shè)置（例如：body,table,td，用逗號隔開），定義嵌套的樣式（td img空格隔開），定義包含特定 id 屬性的標(biāo)簽的格式設(shè)置。,定義的位置有以下三種情況： 選擇“僅為該文檔”，此時CSS樣式的代碼會嵌套在網(wǎng)頁和標(biāo)簽中。 選擇“新建樣式表文件”，則彈出“保存樣式表文件為”對話框，如圖5.5所示，選擇樣式文件的存儲路徑和文件名，單擊“保存”按鈕，將CSS樣式代碼單獨存放

15、在一個CSS文件。 選擇“已有的某CSS文件”，將新建的CSS規(guī)則寫入已有的css文件中。 比如：選擇定義在“僅對該文檔”，單擊“確定”按鈕后，彈出“H1的CSS規(guī)則定義”對話框，如圖所示，在對話框中進行各項的格式設(shè)置，然后單擊“確定”按鈕。,2.編輯和刪除CSS樣式 創(chuàng)建CSS樣式后，如果要修改CSS樣式，在“CSS樣式”面板中，單擊“CSS樣式”面板右下角的“編輯”按鈕，進入“CSS規(guī)則定義”的對話框，可進行修改。 某個CSS樣式不再需要時，在“CSS樣式”面板中，首先選中某個樣式，單擊CSS樣式面板右下角的“刪除”按鈕。,5.3 CSS 樣式的應(yīng)用,【例5.6】應(yīng)用CSS樣式設(shè)計出圖文混

16、排效果，如圖所示。 此實例所涉及到的知識點是CSS樣式的創(chuàng)建和應(yīng)用，主要包括以下幾個方面： 背景樣式、文本及列表樣式、方框與邊框樣式、動態(tài)鏈接樣式； 建立單獨的CSS文件，應(yīng)用于多個網(wǎng)頁。,5.3.1 樣式表的應(yīng)用實例1：背景樣式 的應(yīng)用,在【例5.6】中，上方桔黃色的橫條其實是重定義了body標(biāo)簽的網(wǎng)頁背景圖像，背景圖像橫向重復(fù)，網(wǎng)頁元素與頁邊距也進行了設(shè)置，其操作步驟如下： 步驟 單擊“窗口”菜單“CSS樣式”命令，打開“CSS樣式”面板，單擊右下角的“新建CSS規(guī)則”按鈕，彈出“CSS規(guī)則定義”的對話框，選擇“選擇器類型”為“標(biāo)簽”，在“標(biāo)簽”下拉列表中選擇body，定義在：選擇“僅為該

17、文檔”，單擊“確定”按鈕，彈出 “body的CSS規(guī)則定義”的對話框， 單擊“背景”選項卡，設(shè)置背景圖像為：images/bg.gif，單擊“重復(fù)”下拉列表，選擇“橫向重復(fù)”命令。 步驟2 設(shè)置頁邊距單擊“方框”選項卡，在邊界中分別設(shè)置上、下均為50像素，左右均為100像素。,5.3.2 樣式表的實例應(yīng)用2：文本及列表的應(yīng)用,在【例5.6】中，文本和列表都應(yīng)用了CSS樣式，分別設(shè)置字體、段落、列表的相關(guān)屬性。第一行文本是標(biāo)題1（標(biāo)簽為H1），第二行文本是標(biāo)題2（標(biāo)簽為H2），正文部分用了列表（標(biāo)簽為UL）。 1、字體的樣式設(shè)置 在“CSS規(guī)則定義”對話框的“類型”選項卡中設(shè)置。 2、文本段落的

18、樣式設(shè)置 在“CSS規(guī)則定義”對話框的“區(qū)塊”選項卡，設(shè)置。 3、列表的樣式設(shè)置 類型：設(shè)置項目符號或編號的外觀。 項目符號圖像：指定圖像替代項目符號的樣式，美化項目符號。 重定義項目列表（標(biāo)簽為UL)。,5.3.3 樣式表的實例應(yīng)3：方框和邊框 樣式的應(yīng)用,在【例5.6】中，插入一幅圖像，通過CSS樣式的應(yīng)用，實現(xiàn)了圖文混排的效果。該實例中主要設(shè)置了方框的浮動和邊界及填充的距離，實現(xiàn)了圖像與文本之間的環(huán)繞，還設(shè)置了邊框，添加了一個虛線邊框修飾圖像。這里首先定義了一個類的CSS規(guī)則，然后將此類應(yīng)用于某個圖像上。 圖像邊距的設(shè)置 圖像的邊框的設(shè)置,5.3.4 樣式表的實例應(yīng)用4：動態(tài)鏈接樣式,簡

19、單的CSS鏈接樣式可以在頁面屬性中的“鏈接”選項卡中設(shè)置，5.1節(jié)中已經(jīng)講過。 在【例5.6】中，建立較為復(fù)雜的CSS鏈接樣式，當(dāng)鼠標(biāo)經(jīng)過鏈接文字時，文字顏色會變色、字體樣式變粗、出現(xiàn)背景顏色、文字修飾有下劃線等。這里還講解兩個重要的知識點：如何建立CSS鏈接樣式和如何調(diào)用外部CSS樣式表。,1.建立鏈接CSS樣式 單擊“CSS樣式”面板中的“新建CSS規(guī)則”按鈕，選擇器類型：高級，單擊“選擇器”下拉列表，分別選擇a:llink（鏈接后效果）、a:visited（訪問后效果）、a:hover（鼠標(biāo)經(jīng)過效果），分別定義其樣式。,2. 調(diào)用CSS樣式文件 其它網(wǎng)頁要應(yīng)用剛才建立的CSS樣式文件，如

20、何調(diào)用呢？單擊“CSS樣式”面板中的“附加樣式表”按鈕，彈出“鏈接外部樣式表”的對話框，在“文件/URL”文本框中輸入外部CSS文件路徑和文件名，添加為選擇“鏈接”選項，將新建的樣式文件鏈接到此文件，如圖所示。,5.3.5 樣式的實例5：濾鏡效果的應(yīng)用,CSS濾鏡并不是瀏覽器的插件，也不符合CSS標(biāo)準(zhǔn)，而是微軟公司為增強瀏覽器功能而特意開發(fā)的并整合在IE瀏覽器中的一類功能集合。由于瀏覽器IE有著廣泛的使用范圍，因此CSS濾鏡也被廣大設(shè)計者所喜愛。 CSS濾鏡可以為樣式控制的對象指定特殊效果。 注意：CSS濾鏡只能作用于有區(qū)域限制的對象，如表格、單元格、圖片等，而不能直接作用于文字，所以把所需要增加特效