新媒體網(wǎng)頁設計與制作DreamweaverCS6基礎、案例、技巧實用教程第11章課件

1、第11章 綜合實訓家具聯(lián)盟網(wǎng)站本章學習要點： 1視圖的切換 2網(wǎng)頁的布局 3制作網(wǎng)頁主體 4CSS層疊樣式表的應用第11章 綜合實訓家具聯(lián)盟網(wǎng)站本章學習要點：11.1 實例目標 本例通過綜合運用所學知識，以家具聯(lián)盟網(wǎng)站為例制作一個綜合性網(wǎng)站，使用戶通過實踐鞏固所學知識，掌握網(wǎng)站的開發(fā)流程，并能結合PhotoShop、Flash等技術，熟練地使用Dreamweaver CS6進行網(wǎng)站的設計和開發(fā)。11.1 實例目標 本例通過綜合運用所學知識11.2 制作思路 本例包含了本教材大部分的知識點，通過綜合運用這些知識，制作一個家具聯(lián)盟網(wǎng)站。網(wǎng)站使用DIV+CSS對頁面進行布局，通過CSS對頁面內(nèi)容進行

2、修飾和美化，從而制作出一個主題鮮明、布局合理、色彩豐富、效果美觀的網(wǎng)站，如圖所示。11.2 制作思路 本11.2 制作思路11.2 制作思路 11.3 制作過程11.3.1 創(chuàng)建站點及網(wǎng)頁文件1新建站點。啟動Dreamweaver CS6，選擇【站點】/【新建站點】命令，在打開對話框的【站點名稱】中輸入“Furniture Union”，在【本地站點文件夾】文本框中設置文件的根目錄，單擊【保存】按鈕，如圖所示。 11.3 制作過程11.3.1 創(chuàng)建站點及網(wǎng)頁文件2新建網(wǎng)頁文件。選擇【文件】/【新建】命令，在打開的【新建文檔】對話框中，選擇【空白頁】，【頁面類型】選擇【HTML】，單擊【創(chuàng)建】按

3、鈕，如圖所示。 11.3 制作過程2新建網(wǎng)頁文件。選擇【文件】/【新建】命令，在打開的【新建3保存網(wǎng)頁文件。單擊【文件】/【保存】命令，在打開的【另存為】對話框中，將文件保存到“Furniture Union”站點根文件夾下，設置文件名稱為“index.html”。 11.3 制作過程3保存網(wǎng)頁文件。單擊【文件】/【保存】命令，在打開的【另存4新建文件夾。選擇【文件】/【窗口】命令，打開【文件】面板，右鍵單擊站點名稱，在彈出的快捷菜單中選擇【新建文件夾】，在站點根文件夾下生成一個名為“untitled”的空白文件夾，修改文件夾名稱為“CSS”。 11.3 制作過程4新建文件夾。選擇【文件】/【

4、窗口】命令，打開【文件】面板5創(chuàng)建樣式表文件。選擇【文件】/【新建】命令，在打開的【新建文檔】對話框中，選擇【空白頁】，【頁面類型】選擇【CSS】，單擊【創(chuàng)建】按鈕。 11.3 制作過程5創(chuàng)建樣式表文件。選擇【文件】/【新建】命令，在打開的【新6保存樣式表文件。單擊【文件】/【保存】命令，在打開的【另存為】對話框中，將文件存儲到“Furniture Union”站點根文件夾下名為“CSS”的文件夾下，設置文件名稱為“format.css”。 11.3 制作過程6保存樣式表文件。單擊【文件】/【保存】命令，在打開的【另7附加樣式表。打開“index.html”文件，選擇【窗口】/【CSS】命令，

5、在【CSS樣式】面板中單擊“附加樣式表”按鈕，在彈出的【鏈接外部樣式表】對話框中設置【文件/URL】為“CSS/format.css”，【添加為】選擇“鏈接”，單擊【確定】按鈕，如圖所示。 11.3 制作過程7附加樣式表。打開“index.html”文件，選擇【窗口本例的網(wǎng)頁總體布局如圖所示。 11.3.2 使用DIV+CSS布局網(wǎng)頁結構本例的網(wǎng)頁總體布局如圖所示。 11.3.2 使用DIV+C1 插入DIV。（1）插入網(wǎng)頁容器DIV。首先將鼠標光標置于目標位置，選擇【插入】/【布局對象】/【DIV標簽】命令，插入一個名為“box”的DIV。 11.3.2 使用DIV+CSS布局網(wǎng)頁結構1 插

6、入DIV。 11.3.2 使用DIV+CSS布局網(wǎng)（2）插入其他DIV。將鼠標光標置于“box”內(nèi)部，分別插入名字分別為“l(fā)ogo”、“titl”、“aboutus”、“menu”、“searc”、“picBox”、“show”(包含嵌套DIV“l(fā)ist”和“ifr”，“l(fā)ist”中包含嵌套DIV“m1”、“m2”和“m3”)、“center”、“news”、“scroll”、“l(fā)ink”和“bot”的DIV，如圖所示。 11.3.2 使用DIV+CSS布局網(wǎng)頁結構（2）插入其他DIV。將鼠標光標置于“box”內(nèi)部，分別插入 11.3.2 使用DIV+CSS布局網(wǎng)頁結構 11.3.2 使用DI

7、V+CSS布局網(wǎng)頁結構2創(chuàng)建DIV布局（1）新建ID為“box”的CSS規(guī)則。選中ID為“box”的DIV，選擇【窗口】/【CSS樣式】命令，打開【CSS樣式】面板，單擊【CSS樣式】面板底部的按鈕，創(chuàng)建名為“#box”的ID CSS規(guī)則，在【規(guī)則定義】下拉列表框中 選擇“CSS/format.css”，單擊【確定】 按鈕，屬性設置如圖所示。 11.3.2 使用DIV+CSS布局網(wǎng)頁結構2創(chuàng)建DIV布局 11.3.2 使用DIV+CSS布局網(wǎng)（2）新建ID為“l(fā)ogo”的CSS規(guī)則。選中ID為“l(fā)ogo”的DIV，創(chuàng)建名為“#logo”的ID CSS規(guī)則，創(chuàng)建方法如步驟（1），以下均相同。屬性

8、設置如圖所示。 11.3.2 使用DIV+CSS布局網(wǎng)頁結構（2）新建ID為“l(fā)ogo”的CSS規(guī)則。選中ID為“l(fā)og（3）新建“titl”ID樣式。選中ID為“titl”的DIV，創(chuàng)建名為“#titl”的ID CSS規(guī)則，屬性設置如圖所示。 11.3.2 使用DIV+CSS布局網(wǎng)頁結構（3）新建“titl”ID樣式。選中ID為“titl”的DI (4) 新建ID為“aboutus”的CSS規(guī)則。選中ID為“aboutus”的DIV，單擊【CSS樣式】面板底部的按鈕，創(chuàng)建名為“#aboutus”的ID CSS規(guī)則，屬性設置如圖所示。 11.3.2 使用DIV+CSS布局網(wǎng)頁結構 (4) 新建

9、ID為“aboutus”的CSS規(guī)則。選中ID（5）新建ID為“menu”的CSS規(guī)則。選中ID為“menu”的DIV，創(chuàng)建名為“#menu”的ID CSS規(guī)則，屬性設置如圖所示。 11.3.2 使用DIV+CSS布局網(wǎng)頁結構（5）新建ID為“menu”的CSS規(guī)則。選中ID為“men（7）新建ID為“picBox”的CSS規(guī)則。選中ID為“picBox”的DIV，創(chuàng)建名為“#picBox”的ID CSS規(guī)則，屬性設置如圖所示。 11.3.2 使用DIV+CSS布局網(wǎng)頁結構（7）新建ID為“picBox”的CSS規(guī)則。選中ID為“p（8）新建ID為“l(fā)ine”的CSS規(guī)則。選中ID為“l(fā)ine

10、”的DIV，創(chuàng)建名為“#line”的ID CSS規(guī)則，屬性設置如圖所示。 11.3.2 使用DIV+CSS布局網(wǎng)頁結構（8）新建ID為“l(fā)ine”的CSS規(guī)則。選中ID為“l(fā)in(9)新建ID為“show”的CSS規(guī)則。選中ID為“show”的DIV，創(chuàng)建名為“#show”的ID CSS規(guī)則，屬性設置如圖所示。 11.3.2 使用DIV+CSS布局網(wǎng)頁結構(9)新建ID為“show”的CSS規(guī)則。選中ID為“sho(10) 新建ID為“l(fā)ist”的CSS規(guī)則。選中ID為“l(fā)ist”的DIV，創(chuàng)建名為“#list”的ID CSS規(guī)則，屬性設置如圖所示。 11.3.2 使用DIV+CSS布局網(wǎng)頁結

11、構(10) 新建ID為“l(fā)ist”的CSS規(guī)則。選中ID為“l(fā)(11)新建“m1”、“m2”和“m3”CSS規(guī)則。設置三個DIV的屬性值如圖所示。 11.3.2 使用DIV+CSS布局網(wǎng)頁結構(11)新建“m1”、“m2”和“m3”CSS規(guī)則。設置三個 (12)新建ID為“ifr”的CSS規(guī)則。選中ID為“ifr”的DIV，創(chuàng)建名為“#ifr”的ID CSS規(guī)則。屬性設置如圖所示。 11.3.2 使用DIV+CSS布局網(wǎng)頁結構 (12)新建ID為“ifr”的CSS規(guī)則。選中ID為“if（13）分別創(chuàng)建ID為“center”、“news”和“scroll”的CSS規(guī)則。選中名為“center”的

12、DIV，創(chuàng)建名為“#center”的ID CSS規(guī)則。屬性設置如圖所示。 設置“news”和“scroll”【方框】的【width】屬性值分別為“400px”和“300px”，其他屬性與“center”DIV相同。 11.3.2 使用DIV+CSS布局網(wǎng)頁結構（13）分別創(chuàng)建ID為“center”、“news”和“sc（14）新建ID為“l(fā)ink”的CSS規(guī)則。選中名為“l(fā)ink”的DIV，單擊【CSS樣式】面板底部的按鈕，創(chuàng)建名為“#link”的 CSS規(guī)則。屬性設置如圖所示。 11.3.2 使用DIV+CSS布局網(wǎng)頁結構（14）新建ID為“l(fā)ink”的CSS規(guī)則。選中名為“l(fā)in（15）新

13、建ID為“bot”的CSS規(guī)則。選中名為“bot”的DIV，單擊【CSS樣式】面板底部的按鈕，創(chuàng)建名為“#bot”的CSS規(guī)則。屬性設置如圖所示。 11.3.2 使用DIV+CSS布局網(wǎng)頁結構（15）新建ID為“bot”的CSS規(guī)則。選中名為“bot”1定義網(wǎng)頁整體樣式。將鼠標光標置于文檔窗口的空白處或單擊標簽選擇器上的“body”標簽，選擇【窗口】/【CSS樣式】命令，打開【CSS樣式】面板，創(chuàng)建“body”標簽的CSS規(guī)則，屬性設置如圖所示。11.3.3 定義CSS規(guī)則1定義網(wǎng)頁整體樣式。將鼠標光標置于文檔窗口的空白處或單擊標2定義鏈接樣式。新建“a”標簽的CSS規(guī)則。屬性設置如圖所示。3

14、定義圖像邊框樣式。新建“img”標簽的CSS規(guī)則，設置“img”標簽【邊框】的【W(wǎng)idth】屬性值增均為“0”。11.3.3 定義CSS規(guī)則2定義鏈接樣式。新建“a”標簽的CSS規(guī)則。屬性設置如圖所11.3.4 制作頭部內(nèi)容 1插入LOGO圖標。將鼠標光標置于ID為“l(fā)ogo”的DIV中，選擇【插入】/【圖像】命令，在彈出的【選擇圖像源文件】對話框中選擇images文件夾下的“l(fā)ogo.png”。2插入站點標語圖像。將鼠標光標置于ID為“titl”的DIV中，插入名為“biaoyu.png”的圖像。11.3.4 制作頭部內(nèi)容 1插入LOGO圖標。將鼠標光標3設置聯(lián)系信息。將鼠標光標置于ID為“

15、aboutus”的DIV中，輸入“聯(lián)系我們”、“關注我們”、“關于我們”三個段落文本；設置超級鏈接分別為“mailto:”、“guanzhu.html”和“guanyuwm.html”。11.3.4 制作頭部內(nèi)容 3設置聯(lián)系信息。將鼠標光標置于ID為“aboutus”的D4插入菜單。將鼠標光標置于ID為“menu”的DIV中，選擇【插入】/【Spry】/【Spry菜單欄】命令，在彈出的【Spry菜單欄】對話框中選擇【水平】選項，編輯菜單項如圖所示。 11.3.4 制作頭部內(nèi)容 4插入菜單。將鼠標光標置于ID為“menu”的DIV中，選5編輯菜單樣式。（1）設置菜單欄文本字體大小。選擇【窗口】/

16、【CSS樣式】命令，在【CSS樣式】面板中展開 “SpryMenuBarHorizontal.css”樣式，雙擊ul.MenuBarHorizontal，在彈出的對話框中設置【類型】中的【Font-size】為“14px”。11.3.4 制作頭部內(nèi)容 5編輯菜單樣式。11.3.4 制作頭部內(nèi)容 （2）設置菜單欄寬度及文本對齊方式。在【CSS樣式】面板中欄雙擊“ul.MenuBarHorizontal li”樣式，在彈出的對話框中設置【方框】中的【W(wǎng)idth】屬性值為“150px”；設置【區(qū)塊】中的【Text-align】屬性值為“center”。11.3.4 制作頭部內(nèi)容 （2）設置菜單欄寬度

17、及文本對齊方式。在【CSS樣式】面板中欄（3）設置鏈接樣式。在【CSS樣式】面板中選擇“ul.MenuBarHoriaontal a:hover，ul.MenuBarHorizontal a:focus”，設置【Color 】屬性值為“#FFF”， 【background-color】屬性值為“#F00”。選擇“ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible”，設置 【back

18、ground-color】屬性值為“#F00”。 11.3.4 制作頭部內(nèi)容 （3）設置鏈接樣式。在【CSS樣式】面板中選擇“ul.Men（4）設置“首頁”文本樣式。將鼠標光標置于“首頁”菜單項中，在【屬性】檢查器中設置ID為“l(fā)1”，新建“#box #menu #MenuBar1 li #l1”ID CSS規(guī)則，設置【背景】的【background-color】屬性值為“#F00”。11.3.4 制作頭部內(nèi)容 （4）設置“首頁”文本樣式。將鼠標光標置于“首頁”菜單項中， 6插入搜索表單。將鼠標光標置于ID為“search”的DIV中，選擇【插入】/【表單】/【表單】命令，在指定位置插入一個表

19、單，將鼠標光標置于表單中，插入一個【ID】為“ss”的單行文本域和屬性【值】為“搜索”的提交按鈕。7插入輪顯廣告。打開站點根文件夾下的“翻滾圖像代碼.txt”，依據(jù)提示將相應代碼復制到網(wǎng)頁指定位置。11.3.4 制作頭部內(nèi)容 6插入搜索表單。將鼠標光標置于ID為“search”的D11.3.5 制作網(wǎng)頁主體1插入鼠標經(jīng)過圖像。將鼠標光標置于ID為“m1”的DIV中， 選擇【插入】/【圖像對象】/【鼠標經(jīng)過圖像】命令，在彈出的【插入鼠標經(jīng)過圖像】對話框中選擇原始圖像為“images/fanzhuantuxiang/gm.png”，鼠標經(jīng)過圖像為“images/fanzhuantuxiang/gm

20、1.png”，按下時前往的URL選擇“images/guangming/guangm.png”。11.3.5 制作網(wǎng)頁主體1插入鼠標經(jīng)過圖像。將鼠標光標置用同樣的方法在ID為“m2”的DIV中，插入原始圖像為“images/fanzhuantuxiang/zy.png”鼠標經(jīng)過圖像為“images/fanzhuantuxiang/zy1.png”按下時前往的URL為“images/zuoyou/zuoyou.jpg”的鼠標經(jīng)過圖像。在ID為“m3”的DIV中，插入原始圖像為“images/fanzhuantuxiang/sy.png”鼠標經(jīng)過圖像為“images/fanzhuantuxiang

21、/sy1.png”按下時前往的URL為“images/shuangye/shuangye.jpg”的鼠標經(jīng)過圖像。11.3.5 制作網(wǎng)頁主體用同樣的方法在ID為“m2”的DIV中，11.3.5 制作網(wǎng)2設置改變屬性行為。選中第一幅鼠標經(jīng)過圖像，選擇【窗口】/【行為】命令，打開【行為】面板，單擊【行為】面板上的“+”按鈕，在彈出的快捷菜單中選擇【改變屬性】行為，設置屬性如圖所示。在【行為】面板中選擇事件為“onMouseOver”。11.3.5 制作網(wǎng)頁主體2設置改變屬性行為。選中第一幅鼠標經(jīng)過圖像，選擇【窗口】/ 用同樣的方法設置其他兩個鼠標經(jīng)過圖像的行為值為“url (images/zuoy

22、ou/zuoyou.jpg)”和“url(images/shuangye/shuangye.jpg)”11.3.5 制作網(wǎng)頁主體 用同樣的方法設置其他兩個鼠標經(jīng)過圖像的行為值3錄入文本信息并設置列表。在ID為“center”、“news”和“scroll”的DIV中，分別輸入文本信息，設置文本標題樣式為【標題三】，段落文本設置成項目列表，并設置項目列表的超級鏈接，如圖所示。11.3.5 制作網(wǎng)頁主體3錄入文本信息并設置列表。在ID為“center”、“ne4設置滾動字幕。將鼠標光標置于“精品欣賞”下的列表中，在設計窗口左下角的【標簽選擇器】中選擇“”標簽，選擇【插入】/【標簽】命令，在打開的【

23、標簽選擇器】中選擇【HTML標簽】下的“”標簽，如圖所示。 11.3.5 制作網(wǎng)頁主體4設置滾動字幕。將鼠標光標置于“精品欣賞”下的列表中，在設 單擊【插入】按鈕，系統(tǒng)自動進入【拆分】窗口，在左側(cè)的代碼窗口中顯示剛剛插入的“”標簽，設置“”標簽屬性如圖所示，單擊【關閉】按鈕，關閉【標簽選擇器】。11.3.5 制作網(wǎng)頁主體 單擊【插入】按鈕，系統(tǒng)自動進入【拆分】窗口， 在ID為“l(fā)ink”和“bot”的DIV中分別插入友情鏈接和版權信息文本，并設置友情鏈接的超級鏈接，如圖所示。11.3.6 制作頁腳內(nèi)容 在ID為“l(fā)ink”和“bot”的DIV中分1打開“index.html”，將文件另存為“T

24、emplates /moban.dwt”，創(chuàng)建模板文件。2打開“moban.dwt”文件，選中ID為“aboutus”的DIV，選擇【插入】/【模板對象】/【可編輯區(qū)域】命令，在打開的【新建可編輯區(qū)域】對話框中，設置【名稱】為“func”，如圖所示。11.4 制作網(wǎng)頁模板1打開“index.html”，將文件另存為“Templa3用同樣的方法，分別在ID為“show”、“center”、“news”和“scroll”的DIV中插入名稱為“main”、“l(fā)ist1”、“l(fā)ist2”、“l(fā)ist3”的可編輯區(qū)域，刪除可編輯區(qū)域內(nèi)容，如圖所示。11.4 制作網(wǎng)頁模板3用同樣的方法，分別在ID為“sh

25、ow”、“center”11.4 制作網(wǎng)頁模板11.4 制作網(wǎng)頁模板4應用模板。選擇【文件】/【新建】命令，新建一個空白HTML網(wǎng)頁，選擇【窗口】/【資源】命令，打開資源面板，單擊 按鈕，在右側(cè)列表中選擇名“moban”的文件，單擊面板底部的【應用】按鈕，設置【不一致的區(qū)域名稱】對話框，屬性如圖所示。將套用模板的網(wǎng)頁另存為“guangming.html”。 11.4 制作網(wǎng)頁模板4應用模板。選擇【文件】/【新建】命令，新建一個空白HTM5編輯網(wǎng)頁文件（1）編輯“func”區(qū)域。將鼠標光標置于名為“func”的可編輯區(qū)域內(nèi)，選擇【插入】/【圖像】命令，在打開的【選擇圖像源文件】對話框中，選擇本地

26、站點“images”文件夾下的“funcimg.gif”圖像。11.4 制作網(wǎng)頁模板5編輯網(wǎng)頁文件11.4 制作網(wǎng)頁模板（2）編輯“mian”區(qū)域?qū)⑹髽斯鈽酥糜诿麨椤癿ain”的可編輯區(qū)域內(nèi)，插入一個2行4列的表格，設置【表格寬度】為“100%”，【邊框粗細】、【單元格邊距】、【單元格間距】均為“0”；在指定單元中，分別插入名為“guangm.png”、“chaji.jpg”、“shafa.jpg”和“shugui.jpg”的圖像，并輸入相應的文本，如圖所示；新建一個名為“.fonta”的基本類，將其保存至“format.css”中，設置為“#666”；分別選中單元格文本，右鍵單擊“.font

27、a”樣式，在彈出的快捷菜單中選擇“應用”。11.4 制作網(wǎng)頁模板（2）編輯“mian”區(qū)域11.4 制作網(wǎng)頁模板11.4 制作網(wǎng)頁模板11.4 制作網(wǎng)頁模板（3）編輯“l(fā)ist1”區(qū)域?qū)⑹髽斯鈽酥糜诿麨椤發(fā)ist1”的可編輯區(qū)域，插入一個4行2列的表格，設置【表格寬度】為“95%”，【邊框粗細】、【單元格邊距】、【單元格間距】均為“0”；將鼠標光標置于表格第一行的單元格中，設置單元格【高】為“6”，將鼠標光標置于表格第二行第一列，設置單元格【寬】為“5%”，【高】為“20”；11.4 制作網(wǎng)頁模板（3）編輯“l(fā)ist1”區(qū)域11.4 制作網(wǎng)頁模板（3）編輯“l(fā)ist1”區(qū)域選擇【插入】/【圖像

28、】命令，在打開的【選擇圖像源文件】對話框中，選擇本地站點images文件夾下的“guangming/fengexian.jpg”圖像；將鼠標光標置于表格第二行第二列，輸入“企業(yè)文化”文本，選中文本，在【屬性】檢查器的【HTML】選項卡中設置【格式】為“標題3”；11.4 制作網(wǎng)頁模板（3）編輯“l(fā)ist1”區(qū)域11.4 制作網(wǎng)頁模板（3）編輯“l(fā)ist1”區(qū)域新建“h3”標題標簽樣式，設置【Font-family】為“微軟雅黑”，【Font-size】為“16px”；選中表格第三行的兩個單元格，在【屬性】檢查器中單擊按鈕，將單元格合并后，進入代碼窗口，在鼠標光標所在的“”標簽中添加“bgcol

29、or=#FF0000 height=1”屬性，如圖所示；11.4 制作網(wǎng)頁模板（3）編輯“l(fā)ist1”區(qū)域11.4 制作網(wǎng)頁模板（3）編輯“l(fā)ist1”區(qū)域選中表格第四行的兩個單元格，在【屬性】檢查器中單擊按鈕，將單元格合并，并輸入文本；在【CSS面板】中雙擊“#center”樣式，設置【Font-family】為“微軟雅黑”，【Font-size】為“14px”。如圖所示。11.4 制作網(wǎng)頁模板（3）編輯“l(fā)ist1”區(qū)域11.4 制作網(wǎng)頁模板（4）編輯“l(fā)ist2”區(qū)域?qū)⑹髽斯鈽酥糜诿麨椤發(fā)ist2”的可編輯區(qū)域，插入一個4行3列的表格，設置【表格寬度】為“95%”，【邊框粗細】、【單元格邊距】、【單元格間距】均為“0”；將鼠標光標置于表格第一行的單元格中，設置單元格【高】為“6”，將鼠標光標置于表格第二行第一列，設置單元格【寬】為“12”，【高】為“20”；分別設置第二列、第三列單元格【寬】為“175”和“190”。11.