Dreamweaver-CS6網(wǎng)頁設計案例教程-第2版-教學課件-ppt--模塊7使用DIV-CSS布局并美

1、 十二五職業(yè)教育國家規(guī)劃教材 網(wǎng)頁設計案例教程模塊七任務一認識CSS的基礎概念任務二如何用CSS布局任務三縱向導航菜單及二級彈出菜單模塊七使用div+CSS布局并美化網(wǎng)頁模塊介紹： DIV+CSS的標準叫法應是XHTML+CSS，是一種網(wǎng)頁布局方法，通過它可以實現(xiàn)網(wǎng)頁頁面內容與表現(xiàn)相分離，即CSS在網(wǎng)頁制作開始時，可以先設定一些常用標簽，如顏色、字體大小、框線粗細等，從而不用反復寫入同樣的標簽。 本模塊通過對DIV+CSS的基本概念的學習，結合實例的講解，來掌握其使用方法。模塊七使用div+CSS布局并美化網(wǎng)頁任務一 認識CSS的基礎概念模塊介紹： CSS是層疊樣式表，用于定義HTML元素的顯

2、示形式。 由divCSS布局的且結構良好的網(wǎng)頁可以通過CSS定義成任何外觀，在任何網(wǎng)絡設備上以任何外觀形式表現(xiàn)出來，而且用divCSS布局構建的網(wǎng)頁能夠簡化代碼，加快顯示速度。 所以學好divCSS，首先要摒棄傳統(tǒng)意義的表格(Table)布局方式，采用層(DIV)布局，并且使用層疊樣式表(CSS)來實現(xiàn)網(wǎng)頁頁面的外觀。從而使網(wǎng)站瀏覽者有更好的體驗。模塊七使用div+CSS布局并美化網(wǎng)頁子任務1 了解CSS樣式加載CSS樣式有以下四種： 外部樣式：把CSS單獨寫到一個CSS文件內，然后 在源代碼中以link方式鏈接。 內部樣式：以開頭，結尾，寫在源代碼的head標簽內。 h1 color:#00

3、0;模塊七使用div+CSS布局并美化網(wǎng)頁 行內樣式：是在標簽內以style標記的，且只針對于標簽內的元素，因其沒有和內容相分離，所以不建議使用。 導入樣式：是以import url標記所鏈接的外部樣式表，它一般常用在另一個樣式表內部。模塊七使用div+CSS布局并美化網(wǎng)頁子任務2 了解CSS優(yōu)先級 CSS優(yōu)先級：是指CSS樣式在瀏覽器中被解析的優(yōu)先順序。 id優(yōu)先級高于class 后面的樣式覆蓋前面的樣式 指定的樣式高于繼承的樣式 行內樣式高于內部樣式或外部樣式模塊七使用div+CSS布局并美化網(wǎng)頁子任務3 了解CSS盒模式模塊七使用div+CSS布局并美化網(wǎng)頁任務二 如何用CSS布局模塊介

4、紹： 使用CSS進行布局時，要忘掉行和列（運用表格時的一種重要的觀念）。但是，可以把一個標簽當成一個表格單元。而標簽就是把所需內容定位在網(wǎng)頁區(qū)域上的一個邏輯位置。此外，CSS設計經常把一個div嵌套在另一個div里面，就像把表格嵌套在表格里面而獲得特定的效果一樣。模塊七使用div+CSS布局并美化網(wǎng)頁子任務1 如何布置單限定寬度的網(wǎng)頁 1.插入DIV標簽步驟 執(zhí)行【文件】【新建】命令，新建網(wǎng)頁文件。步驟 選擇菜單欄【插入】【布局對象】【DIV標簽】命令，如圖7-1所示。圖7-1模塊七使用div+CSS布局并美化網(wǎng)頁 步驟 在打開的對話框中，在ID項中給div建一個名，叫TEST7-1（可根據(jù)需

5、要命名）。2.新建CSS規(guī)則步驟 選擇要建CSS規(guī)則的DIV步驟 在“CSS樣式”面板上，單擊 “新建CSS規(guī)則”按鈕，如圖7-2所示。圖7-2模塊七使用div+CSS布局并美化網(wǎng)頁 單擊后出現(xiàn)“新建CSS規(guī)則”面板，如圖7-3所示。圖7-3模塊七使用div+CSS布局并美化網(wǎng)頁 步驟3 單擊確定按鈕，出現(xiàn)“#test7-1的CSS規(guī)則定義”面板。在“#test7-1的CSS規(guī)則定義”面板中選擇“分類”列表中“方框”選項，并設定寬為300、高為200。再在“分類”列表中選擇“背景”，設定背景顏色為#F90（該值可任選），單擊“確定”按鈕。步驟4 執(zhí)行【文件】【保存】命令，保存文件。單擊“預覽”

6、按鈕，查看在瀏覽器中的顯示效果，這就是一列限定寬度。模塊七使用div+CSS布局并美化網(wǎng)頁 1.兩列自適應寬度的網(wǎng)頁步驟 執(zhí)行【文件】【新建】命令，新建網(wǎng)頁文件。步驟 插入一個DIV標簽，ID項命名left-div。再插入一個DIV標簽，ID項命名right-main。插入DIV標簽后，在設計視圖中顯示如圖7-4所示。圖7-4子任務 如何布置多列寬度的網(wǎng)頁模塊七使用div+CSS布局并美化網(wǎng)頁 步驟3 選擇“l(fā)eft-div”，單擊“新建CSS規(guī)則” 。在“新建CSS規(guī)則”窗口中， 單擊“確定”按鈕后，在出現(xiàn)的“# left-div的CSS規(guī)則定義”窗口中選擇“方框”，鍵入寬（Width）值為

7、150px，高（Height）值為300px，浮動（float）為左對齊。上述數(shù)值改變后，在設計視圖中顯示如圖7-5所示。圖7-5模塊七使用div+CSS布局并美化網(wǎng)頁 步驟4 選擇“right-main”，單擊“新建CSS規(guī)則”。在“新建CSS規(guī)則”窗口中，單擊“確定”按鈕后，在出現(xiàn)的“# right-main的CSS規(guī)則定義”窗口中選擇“方框”，鍵入寬（Width）值為70%，高（Height）值為300px，外邊距（Margin）里左（Left）值為150px，此步驟同步驟3。上述數(shù)值改變后，在設計視圖中顯示如圖7-6所示。圖7-6模塊七使用div+CSS布局并美化網(wǎng)頁 步驟5 為了便于

8、查看， 還可以設置背景色。選擇“l(fā)eft-div”，在“屬性”面板中選擇“編輯規(guī)則”，如圖7-7所示。在出現(xiàn)的“# left-div的CSS規(guī)則定義”窗口中選擇“背景”，在背景色（Background-color）中選擇任意顏色，這里鍵入#F60。圖7-7模塊七使用div+CSS布局并美化網(wǎng)頁 同上，在“# right-main的CSS規(guī)則定義”中修改背景顏色為#FC6。執(zhí)行【文件】【保存】命令，保存文件。最后在瀏覽器中預覽如圖7-8所示。圖7-8模塊七使用div+CSS布局并美化網(wǎng)頁 2.兩列固定寬度的網(wǎng)頁通過對兩列自適應寬度網(wǎng)頁的設置方法的學習，可以清楚的明白如何設置兩列固定寬度的網(wǎng)頁，只

9、需要對#right-main的寬度進行調整，由百分比改為固定值。圖7-9模塊七使用div+CSS布局并美化網(wǎng)頁 3.兩列固定寬度且居中的網(wǎng)頁設置兩列固定寬度居中，則是在兩列固定寬度的基礎上，給這兩個固定寬度的DIV加一個父DIV。圖7-9步驟 在源代碼里選中這兩個固定寬度的DIV的代碼后，點擊“插入DIV標簽”圖標，如圖7-9所示，填寫ID為parent后，點擊“確定”按鈕。模塊七使用div+CSS布局并美化網(wǎng)頁 步驟2 設置#parent的樣式，通過對塊結構的理解，可知#parent 的寬度是#left-div的寬度150px和#right-main寬度300px之和，這樣就可以設置#par

10、ent居中了，主要設置外邊距（Margin）的左（left）、右（Right）為自動（auto）。步驟3 執(zhí)行【文件】【保存】命令，保存文件圖7-9模塊七使用div+CSS布局并美化網(wǎng)頁 4.塊級元素(div)與內聯(lián)元素(span)塊級元素：顧名思義就是一個方塊，類似于段落，默認情況下是占據(jù)一行出現(xiàn)。諸如段落、標題.、列表, 、表格、表單、DIV和BODY等元素。 內聯(lián)元素：又名行內元素，只能放在行內，類似于單詞，不會造成前后換行，起輔助作用。如: 表單元素、超級鏈接、圖像、 等。模塊七使用div+CSS布局并美化網(wǎng)頁 塊級元素的最顯著特點就是：每個塊級元素都是從新的一行開始顯示，而且它后面的

11、其他元素也需另起一行進行顯示，因為塊級元素已經占據(jù)了這一整行，其他元素沒有足夠的空間顯示。 CSS的作用，是使塊級元素不會順序地以每次另起一行的方式一直往下排。而是可以把塊級元素擺放到用戶想要的任意位置上。模塊七使用div+CSS布局并美化網(wǎng)頁 5.浮動(float)屬性在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素，都要指明一定的寬度，否則它會盡可能地窄。此外當浮動的空間小于浮動元素的寬度時，它會下移，直到擁有足夠空間。模塊七使用div+CSS布局并美化網(wǎng)頁 6.設置三列自適應寬度的網(wǎng)頁三列自適應寬度，較為常用的結構是左列和右列固定，中間列根據(jù)瀏覽器寬度自適

12、應。步驟 執(zhí)行【文件】【新建】命令，新建網(wǎng)頁文件。步驟 分別插入三個DIV標簽，ID項命名A、B、C。步驟 分別對三個塊級元素進行新建CSS規(guī)則，對#A、#B進行寬高100px的設定，#A的背景顏色為#96C，#B的背景顏色為#C9C，另處，#A的浮動為左對齊，#B的浮動為右對齊。模塊七使用div+CSS布局并美化網(wǎng)頁 步驟4 對塊C新建CSS規(guī)則，選擇“分類”中的“方框” ，設定左邊距、右邊距分別為100px，高為100 px。再對背景色進行設置，這里背景顏色設為#F96。 如圖7-10所示。步驟5 執(zhí)行【文件】【保存】命令，在瀏覽器中的顯示如圖7-10所示。圖7-10模塊七使用div+CS

13、S布局并美化網(wǎng)頁 步驟6 因為默認的body是有外邊距的，所以要設置body的外邊距為0。才能達到塊無限接近瀏覽器的邊框。點擊CSS面板上的新建按鈕，然后在新建面板中選擇：標簽（重新定義HTML元素），然后選擇body，如圖7-11所示。圖7-11模塊七使用div+CSS布局并美化網(wǎng)頁 設置body的邊界為0即可，如圖7-12所示。圖7-12模塊七使用div+CSS布局并美化網(wǎng)頁任務三 縱向導航菜單及二級彈出菜單模塊介紹： 縱向導航菜單又稱為縱向列表，如常用的郵箱的左側。二級菜單即指當鼠標放到一級菜單上后，會彈出相應的二級菜單，移去鼠標后自動消失。模塊七使用div+CSS布局并美化網(wǎng)頁 1.創(chuàng)

14、建簡單的一級縱向菜單步驟 執(zhí)行【文件】【新建】命令，新建網(wǎng)頁文件。步驟 插入一個ID為“菜單”的DIV。然后在設計視圖中選中文字，如圖7-13所示。子任務1 設置縱向導航菜單圖7-13模塊七使用div+CSS布局并美化網(wǎng)頁 選擇菜單欄【格式】【列表】【項目列表】命令，如圖7-14所示。圖7-14步驟3 執(zhí)行【文件】【保存】命令，保存文件。標簽的默認樣式為每一行前面有一個點，且四周有空隙。模塊七使用div+CSS布局并美化網(wǎng)頁 步驟4 為了改變這種單一的標簽樣式，需要另創(chuàng)建樣式表把標簽的默認樣式給清除掉，選擇項目列表，點擊“新建CSS規(guī)則”，如圖7-15所示。圖7-15模塊七使用div+CSS布

15、局并美化網(wǎng)頁 在彈出的窗體中再單擊“確定”按鈕，在出現(xiàn)的“#菜單 ul的CSS規(guī)則”窗體選擇“分類”中的“列表”，選列表風格樣式（list-style-type）為無，如圖7-16所示。再選擇“方框”，把填充（padding）的top和邊框（margin）的top都鍵入0值。圖7-16模塊七使用div+CSS布局并美化網(wǎng)頁 在彈出的窗體中再單擊“確定”按鈕，在出現(xiàn)的“#菜單 ul的CSS規(guī)則”窗體選擇“分類”中的“列表”，選列表風格樣式（list-style-type）為無，如圖7-16所示。再選擇“方框”，把填充（padding）的top和邊框（margin）的top都鍵入0值。圖7-16模

16、塊七使用div+CSS布局并美化網(wǎng)頁 步驟5 執(zhí)行【文件】【保存】命令，保存文件。在瀏覽器中的顯示如圖7-17所示。圖7-17模塊七使用div+CSS布局并美化網(wǎng)頁 2.美化完善一級縱向菜單步驟 為了能夠整體修改列表中的文字顯示情況，需要對body新建CSS規(guī)則，點擊“新建CSS規(guī)則”按鈕，在“選擇器類型”中選擇“標簽（重新定義HTML元素）”，“選擇器名稱”中則鍵入body，如圖7-18所示。圖7-18模塊七使用div+CSS布局并美化網(wǎng)頁 步驟 對body中的文字樣式進行修改，如圖7-19所示，在字體系列（font-family）中選擇 “Verdana, Geneva, sans-ser

17、if”，字號選擇18px，字體加粗，字的顏色為#0e6964，行高鍵入24px。圖7-19模塊七使用div+CSS布局并美化網(wǎng)頁 步驟3 為“#菜單”建立CSS規(guī)則。在“分類”列表中選擇“邊框”，設定為上下有邊，樣式（Style）為實心，寬度（width）為3px，顏色（color）為#83C691，如圖7-20所示。設置“#菜單”的寬度為100px，如圖7-21所示。這樣縱向菜單的邊框就有了。圖7-20圖7-21模塊七使用div+CSS布局并美化網(wǎng)頁 步驟4 框選一個li，單擊“新建CSS規(guī)則”，單擊確定。分別選擇“分類”列表中的選項，在“背景”欄中選擇背景色#CAF1F8。在“方框”中輸入

18、li的高度為35px，填充的左右為8px，上下為0px。在“類型”中設定行高為35px。在“邊框”中選擇下邊框，創(chuàng)建一個下邊沿。模塊七使用div+CSS布局并美化網(wǎng)頁 步驟5 通過上述設置，一個簡單的縱向導航菜單就創(chuàng)建完成了。接下來我們?yōu)檫@個導航菜單創(chuàng)建鏈接。選擇要添加鏈接的文字，如“各大新聞”，然后在其屬性頁面鏈接上輸入要鏈接的頁面網(wǎng)址，這里輸入個#，表示為虛擬鏈接，不指向任何頁面。如圖7-22。圖7-22模塊七使用div+CSS布局并美化網(wǎng)頁 步驟6 創(chuàng)建一個交互方式，當鼠標劃過有鏈接的文字時，文字顯示黑色。這時需要用到:hover這個偽類。首先定義一個新標簽，選擇“新建CSS規(guī)則”，在“

19、選擇器類型”中選擇“標簽（重新定義HTML標簽）”，在“選擇器名稱”中輸入a，單擊“確定”后，在出現(xiàn)的“a的CSS規(guī)則定義”窗體的“類型”一欄中，在“Text-decoration”中選無下劃線，顏色為原來的顏色#0E6964，如圖7-23所示，單擊“確定”后，菜單沒有變化。圖7-23模塊七使用div+CSS布局并美化網(wǎng)頁 步驟7 當鼠標劃過有鏈接的文字時，文字顯示黑色。首先定義一個新標簽，選擇“新建CSS規(guī)則”，在“選擇器類型”中選擇“復合內容（基于選擇的內容）”，在“選擇器名稱”中選擇a:hover，單擊“確定”后， “確定”后。 在出現(xiàn)的“a:hover的CSS規(guī)則定義”窗體的“類型”一

20、欄中，在“Text-decoration”中選無下劃線，顏色為#000，如圖7-24所示，單擊“確定”。圖7-24模塊七使用div+CSS布局并美化網(wǎng)頁 步驟8 執(zhí)行【文件】【保存】命令，保存文件。當鼠標劃過有鏈接的文字時，文字顯示黑色,在瀏覽器中的顯示如圖7-25所示。圖7-25模塊七使用div+CSS布局并美化網(wǎng)頁 1.創(chuàng)建二級縱向菜單步驟1 為“各大新聞”創(chuàng)建二級菜單。在代碼區(qū)輸入如下代碼：各大新聞 國際新聞 國內新聞 體育新聞 子任務2 設置縱向二級菜單模塊七使用div+CSS布局并美化網(wǎng)頁 步驟2 修改#菜單 ul li，給其增加一個相對定位position:relative;屬性。

21、選擇規(guī)則中的#菜單 ul li，然后選擇“編輯樣式”按鈕，在出現(xiàn)的“#菜單 ul li 的CSS規(guī)則定義”中選擇“定位”，設定Position為relative（相對定位）。步驟3 為二級列表建立CSS規(guī)則。選擇“新建CSS規(guī)則”，在“選擇器類型”中選擇“復合內容（基于選擇的內容）”，在“選擇器名稱”中選擇#菜單 ul li ul，單擊“確定”后，在出現(xiàn)的“#菜單 ul li ul的CSS規(guī)則定義”窗體的“區(qū)塊”一欄中，在“Display”中選無，默認狀態(tài)下將隱藏。模塊七使用div+CSS布局并美化網(wǎng)頁 步驟4 為二級菜單畫框。在出現(xiàn)的“#菜單 ul li ul的CSS規(guī)則定義”窗體的“邊框”

22、一欄中，創(chuàng)建一個全框，邊寬為1px，顏色為#83c691的邊框，方框寬度為100px。步驟5 為二級菜單定位。在出現(xiàn)的“#菜單 ul li ul的CSS規(guī)則定義”窗體的“定位”一欄中，“Position”為絕對定位，“Placement”上為0px，左為100px，單擊“確定”。模塊七使用div+CSS布局并美化網(wǎng)頁 步驟6 設置當鼠標劃過后顯示下級菜單的樣式。選擇“新建CSS規(guī)則”按鈕，在“選擇器類型”中選擇“復合內容（基于選擇的內容）”，在“選擇器名稱”中輸入#菜單 ul li:hover ul。單擊“確定”后，在出現(xiàn)的“#菜單 ul li:hover ul的CSS規(guī)則定義”窗體的“區(qū)塊”

23、一欄中，在“Display”中選“block”塊顯示。再單擊“確定”。模塊七使用div+CSS布局并美化網(wǎng)頁 步驟6 設置當鼠標劃過后顯示下級菜單的樣式。選擇“新建CSS規(guī)則”按鈕，在“選擇器類型”中選擇“復合內容（基于選擇的內容）”，在“選擇器名稱”中輸入#菜單 ul li:hover ul。單擊“確定”后，在出現(xiàn)的“#菜單 ul li:hover ul的CSS規(guī)則定義”窗體的“區(qū)塊”一欄中，在“Display”中選“block”塊顯示。再單擊“確定”。模塊七使用div+CSS布局并美化網(wǎng)頁 步驟7 執(zhí)行【文件】【保存】命令，保存文件。在瀏覽器中的顯示如圖7-26所示。圖7-26模塊七使用d

24、iv+CSS布局并美化網(wǎng)頁 2.創(chuàng)建二級縱向菜單 定位的基本思想，是讓你定義元素框相對于其正常位置應該出現(xiàn)的位置，或相對于父元素及另一個元素乃至瀏覽器窗口本身的位置。 定位position包含relative（相對）和 absolute（絕對）等屬性。學材小結理論知識一、思考1簡述CSS的盒模型結構 _2. 怎樣設置不同寬度的網(wǎng)頁：_3. 如何設置網(wǎng)頁菜單？實訓任務實訓一 利用DIV+CSS布局網(wǎng)頁【實訓目的】掌握網(wǎng)頁布局的方法【實訓內容】學習了本章內容之后，我們就會很輕松的進行網(wǎng)頁的布局規(guī)劃?！緦嵱柌襟E】步驟1 規(guī)劃網(wǎng)站。主要由五個部分構成： Main Navigation 導航條，具有按鈕特效。Header 網(wǎng)站頭部圖標，包