AutoCAD2022中文版項目實訓教程STYLEREFbt1a項目十二STYLEREFbt1b時尚資訊網站設計綜合實例項目十二時尚資訊網站設計綜合實例思政目標培養讀者的審美情趣、樂觀的生活態度，樹立文化自覺和文化自信。具有感受美、表現美、鑒賞美及創造美的能力技能目標學會綜合運用網頁制作的大部分技能學會制作模板和庫文件學會制作網站主頁和其他頁面項目導讀本章將詳細介紹在Dreamweaver2021中制作“時尚資訊網站”的具體方法。本章運用到了網頁制作的大部分技術，包括模板技術、庫項目、運用表格技術進行頁面排版，以及利用jQueryUI窗口部件jQueryAccordion制作可以上下自由滑動的菜單面板。任務1網站概述任務引入領導交給小明一個任務，要求為某公司設計時尚資訊網站，在制作網站之前，通過與客戶溝通，小明也對網站的要求有了一個大致都的了解，那么該網站主要包括哪些信息，需要準備哪些素材呢？知識準備一、網站介紹時尚資訊網站綜合實例是介紹一些時尚信息的網站，例如美容、服飾、搭配、美食等，整張頁面主要使用表格進行布局。由于是信息發布類的網站，因此本例有多個頁面，但本例內容主要集中在介紹模板制作方面，然后在模板的基礎上制作主頁及“施華洛世奇新品流行速遞”頁面。實例最終效果如圖12-1所示。圖12-1實例主頁鼠標停留在左側的滑動面板上時，面板名稱顯示為桔黃色；單擊面板，即可上下自由滑開面板，顯示所選面板的內容；將鼠標移到鏈接文本上，文本放大，并顯示為桔紅色，如圖12-2所示。單擊菜單面板“流行速遞”中的“施華洛世奇新品”，可以跳轉到相應的頁面，如圖12-3左圖所示。單擊頁面底部的“下一頁”文本按鈕，可以切換到當前文章內容的下一頁，如圖12-3右圖所示。單擊頁面底部左側的圖片，可以返回到頁面頂部。圖12-2實例效果圖12-3實例效果二、準備工作在開始制作本例之前，先介紹一下制作本網站所需的準備工作。（1）在硬盤上新建一個fashion文件夾，在fashion目錄下創建一個images子目錄。（2）在圖片編輯軟件（如Fireworks）中制作所需的圖片，如圖12-4至12-6所示。把這些圖片保存到fashion/images目錄下，其他需要用到的圖片也拷貝到本目錄。圖12-4logo圖12-5欄目標題圖12-6頁面底部背景和導航圖像（3）啟動Dreamweaver2021，執行“站點”/“新建站點”菜單命令，新建一個靜態的本地站點fashion，指向fashion目錄。至此，準備工作完畢，可以開始制作網站頁面了。任務2制作模板任務引入前期的準備工作已經做好，接下來小明開始準備設計網站，該網站包括網頁，這些網頁用到了一些相同的頁面元素和排版方式，為了避免繁瑣的重復工作，提高工作效率，小明需要首先制作一個模板，那么制作這個模板要怎樣設計基本布局，按怎樣的順序去進行設計呢？知識準備由于本網站中的頁面要用到相同的頁面元素和排版方式，因此可以使用模板以避免重復地在每個頁面輸入或修改相同的部分。在網站改版的時候，只要改變模板，就能自動更改所有基于這個模板的網頁。一、設計基本布局（1）新建一個HTML文件，在屬性面板上的“文檔標題”文本框中輸入“時尚資訊”。（2）創建樣式表。1）打開“CSS設計器”面板，單擊“添加CSS源”按鈕，在彈出的下拉列表中選擇“創建新的CSS文件”命令，彈出的“創建新的CSS文件”對話框，如圖12-7所示，單擊"瀏覽"按鈕,在彈出的對話框中選擇文件夾,輸入文件名稱style.css，保存在站點根目錄下。圖12-7“創建新的CSS文件”對話框2）打開style.css，輸入如下代碼：body,td,th{ font-size:12px; color:#666;}a:link{ color:#666; text-decoration:none;}a:visited{ text-decoration:none; color:#600;}a:hover,a:active{ text-decoration:none; color:#F30;}也可以使用Dreamweaver以可視化方式生成以上代碼，然后剪切到style.css中（不要<styletype="text/css">和</style>）：執行“文件”/“頁面屬性”命令，在彈出的“頁面屬性”對話框中設置頁面字體的大小為12像素，文本顏色為#666；切換到“鏈接”分類，設置“鏈接顏色”為#666，“已訪問鏈接”顏色為#600，“變換圖像鏈接”和“活動鏈接”均為#F30，“下劃線樣式”為“始終無下劃線”。然后依次單擊“應用”按鈕和“確定”按鈕。（3）創建基本布局。1）將光標置于文檔中，單擊“HTML”插入面板上的“表格”按鈕，在彈出的“表格”對話框中設置行數為3，列數為1，表格寬度為750像素，邊框粗細為0，間距和邊距均為0。單擊“確定”按鈕關閉對話框。然后在屬性面板上的“對齊”下拉列表中選擇“居中對齊”。2）將光標定位在第一行的單元格中，單擊屬性面板上的“拆分單元格”按鈕，將單元格拆分為3列。3）選中第一行第二列的單元格，單擊屬性面板上的“拆分單元格”按鈕，將單元格拆分為兩行。此時的頁面效果如圖12-8所示。圖12-8表格效果（4）制作頂欄。1）選中第一行第一列的單元格，在屬性面板上設置單元格內容的水平對齊方式為“居中對齊”，垂直對齊方式為“頂端”。然后單擊“HTML”插入面板上的“圖像”圖標按鈕，在打開的“選擇文件”對話框中選擇圖像page_r1_c1.gif。2）選中第一行第二列拆分后的第一行單元格，在屬性面板上的“水平”下拉列表中選擇“居中對齊”，在“垂直”下拉列表中選擇“居中”，寬為281，高為93。接下來的步驟設置單元格的背景圖像。3）在“CSS設計器”面板的“源”窗格中選擇style.css，然后單擊“添加選擇器”按鈕，輸入選擇器名稱.top_bg1。在“背景”屬性列表中單擊“背景圖像”右側的“瀏覽”按鈕，在彈出的對話框中選擇背景圖像page_r1_c3.gif，背景位置為left、bottom，不平鋪。將光標定位在單元格中，在CSS屬性面板上的“目標規則”下拉列表中選擇.top_bg1。4）選中第一行第二列拆分后的第二行單元格，將單元格內容的水平對齊方式設置為“居中對齊”，垂直對齊方式為“居中”，高91。按照步驟（3）的方法設置背景圖像page_r2_c3.gif，背景位置為left、top，不平鋪。然后在屬性面板上的“目標規則”下拉列表中選擇.top_bg2。5）按照步驟3）同樣的方法設置第一行第三列單元格的背景圖像page_r1_c4.gif，背景位置為left、top，不平鋪。單元格內容的水平、垂直對齊方式均為“居中”。此時的頁面效果如圖12-9所示。圖12-9頁面效果6）將光標定位在第一行第二列拆分后的第一行單元格中，單擊“HTML”插入面板上的“圖像”圖標按鈕，在彈出的“選擇文件”對話框中選擇圖像fashion2.gif。同樣的方法，在第二行的單元格中插入圖像fashion.gif。此時的頁面效果如圖12-10所示。圖12-10插入logo7）將光標定位在第一行第三列的單元格中，單擊“HTML”插入面板上的“圖像”圖標按鈕，插入一幅鞋的圖像shoes.gif。此時的頁面效果如圖12-11所示。圖12-11插入圖片的效果8）將光標放置在第二行單元格中，設置單元格內容水平對齊方式為“居中對齊”，垂直對齊方式為“頂端”。單擊“HTML”插入面板上的“表格”圖標按鈕，插入一個2行2列的表格，表格寬度為100%，無邊框。9）在屬性面板上將表格第一列的寬度設置為160像素，然后在第一行的第一列單元格中插入圖像page_r3_c1.gif。10）選中嵌套表格第一行第二列的單元格，在“水平”下拉列表中選擇“右對齊”選項，并創建CSS規則.top_bg4，定義背景圖像為page_r3_c2.gif，不平鋪。然后單擊“HTML”插入面板上的“圖像”圖標按鈕，插入一幅圖像。此時的頁面效果如圖12-12所示。圖12-12頁面效果二、制作導航菜單本節使用jQueryAccordion構件制作導航菜單面板，單擊面板名稱，可以上下自由滑開選擇的內容，而整個窗口不會發生變化。操作步驟如下：（1）拆分單元格。選中嵌套表格的第二行第一列單元格，單擊鼠標右鍵，從彈出的快捷菜單中選擇“折分單元格”命令，將單元格拆分為兩行。在屬性面板上設置單元格內容的水平對齊方式為“左對齊”，垂直對齊方式為“頂端”。（2）插入折疊構件。1）保存文檔為index.html，將光標定位在拆分后的第一行單元格中，單擊“插入”面板右上角的選項按鈕，在彈出的下拉菜單中選擇“jQueryUI”，切換到“jQueryUI”插入面板。然后單擊該面板上的“折疊式”圖標按鈕，插入一個jQuery折疊式構件。如圖12-13所示。圖12-13插入的jQueryAccording構件此時，在文檔窗口頂部可以看到自動添加的相關文件，如圖12-13所示。2）保存文檔，彈出如圖12-14所示的“復制相關文件”對話框。該對話框中列示了該頁面正常工作所需要的支持文件，單擊“確定”按鈕，將這些支持文件復制到本地站點根目錄下。打開站點根目錄，可以看到一個名為jQueryAssets的文件夾。圖12-14“復制相關文件”對話框（3）設置折疊式構件的屬性。單擊折疊式構件頂部的藍色標簽，在屬性面板上的“面板”列表中選擇“部分3”，單擊“添加面板”按鈕兩次，添加兩個面板。然后設置觸發事件為mouseover，動畫效果為linear，持續時間為200毫秒，面板標題的圖標為ui-icon-circle-arrow-e，活動面板的標題圖標為ui-icon-circle-arrow-s，如圖12-15所示。圖12-15jQuery折疊式的屬性面板（4）修改面板名稱。在“設計”視圖中，將面板“部分1”的頁簽修改為“流行速遞”。按照同樣的方法，將其他4個面板的頁簽分別修改為“時尚飾品”“霓彩服飾”“靚顏美食”和“彩妝課堂”。此時的頁面效果如圖12-16所示。圖12-16jQueryAccording效果（5）修改標題文本的顏色。在文檔窗口頂部單擊打開CSS文件jquery.ui.theme.min.css，找到類.ui-state-default，將文本顏色修改為#666，以與頁面文本顏色統一，如圖12-17所示。圖12-17修改規則定義在jquery.ui.theme.min.css文件中，可以根據需要修改According構件的初始外觀，如背景、文本顏色等。如果覺得這里的規則代碼不便于查看，可以打開“CSS設計器”面板，在“源”窗格中選擇類所在的CSS文件，然后在“選擇器”窗格中選擇需要的選擇器，即可以可視化方式查看規則，如圖12-18所示。圖12-18在“CSS設計器”面板中查看規則（6）修改標題文本的呈現方式。按上一步同樣的方法修改組合選擇器.ui-state-activea,.ui-state-activea:link,.ui-state-activea:visited，修改后的代碼如下：.ui-state-activea,.ui-state-activea:link,.ui-state-activea:visited{ color:#F60; text-decoration:none; font-weight:bold;}此時的頁面效果如圖12-19所示。圖12-19頁面效果（7）設置面板的背景顏色。按上一步同樣的方法修改選擇器.ui-widget-content，指定面板內容的背景顏色，相關代碼如下：.ui-widget-content{border:1pxsolid#aaa;background:#ccf;color:#222;}此時的頁面預覽效果如圖12-20所示。圖12-20設置面板內容背景的效果（8）設置面板內容的填充邊距。在jquery.ui.accordion.min.css文件中修改選擇器.ui-accordion-content的規則定義，指定內容的填充邊距，修改后的類定義如下：.ui-accordion-content{padding:1em30px;border-top:0;overflow:auto;zoom:1;}修改后的頁面效果如圖12-21所示。圖12-21修改內容左、右填充之后的效果（9）添加菜單項。單擊選中jQuery折疊式構件頂部的藍色標簽，在屬性面板的“面板”區域選中“流行速遞”，并在“設計”視圖中刪除該面板中的占位文本“內容1”，然后創建文本項目列表。此時的頁面效果如圖12-22所示。圖12-22項目列表（10）設置項目列表的樣式。打開樣式表文件style.css，添加如下規則：body,td,th,ul,li{ font-size:12px; color:#666; margin:0; padding:0; border:0;}li{ line-height:30px; list-style-type:none; border-bottom:1pxdashed#666;}此時的頁面效果如圖12-23所示。圖12-23定義列表效果（11）設置鼠標劃過時鏈接文本的顏色。打開樣式表文件jquery.ui.accordion.min.css，添加如下規則：.ui-accordion-contenta:hover{color:#F30;}此時，頁面在瀏覽器中的預覽效果如圖12-24所示。圖12-24設置鏈接樣式（12）使用同樣的方法，在其他四個面板中插入文本，并制作成項目列表。（13）設置單元格屬性。將光標定位在jQuery折疊式構件下方的單元格中，在屬性面板上的“水平”下拉列表中選擇“居中對齊”，在“垂直”下拉列表中選擇“底部”。（14）插入圖像鏈接。單擊“HTML”插入面板上的“圖像”圖標按鈕，在彈出的“選擇文件”對話框中選中圖像pic1.gif。然后在“鏈接”文本框中輸入#，即單擊該圖片時返回頁面頂端。三、插入模板元素（1）設置頁腳的背景圖像。1）選中最后一行單元格，在屬性面板上的“水平”下拉列表中選擇“居中對齊”，設置高度為100。2）創建CSS規則.footbg為單元格設置背景圖像page_r5_c1.gif，不平鋪；圖像位置水平居中，垂直居中；高100px，文本居中，行距120%。然后在屬性面板上的“目標規則”下拉列表中選擇.footbg，此時的頁面效果如圖12-25所示。（2）插入可編輯區域。1）選中jQuery折疊式構件右側的單元格，在屬性面板上設置單元格內容的水平對齊方式為“左對齊”，垂直對齊方式為“頂端”。2）執行“插入”/“模板”/“可編輯區域”菜單命令，此時Dreamweaver將彈出一個對話框，提示該操作將把頁面轉換為模板。單擊“確定”按鈕關閉對話框。圖12-25設置頁腳背景3）在彈出的“新建可編輯區域”對話框中鍵入可編輯區域的名稱content，并單擊“確定”按鈕關閉對話框。即可將選中的單元格轉換為可編輯區域，如圖12-26所示。圖12-26插入的可編輯區域（3）保存文件。執行“文件”/“另存為模板”命令，彈出“另存模板”對話框。在“描述”文本框中輸入“頁面的基本布局”；在“另存為”文本框中鍵入模板的名稱layout，然后單擊“保存”按鈕關閉對話框。至此，頁面的基本布局模板制作完成。接下來制作文章詳細內容頁面的模板。四、制作嵌套模板（1）插入布局表格。將光標定位在可編輯區域中，刪除可編輯區域中的占位文本，然后單擊“HTML”插入面板上的“表格”圖標按鈕，在彈出的“表格”對話框中設置表格行數為3，列數為1，表格寬度為590像素，無邊框。單擊“確定”按鈕關閉對話框。（2）設置表格的背景圖像。選中表格，在屬性面板中設置“邊距”為10，“間距”為0；新建CSS規則.content_bg為表格設置背景圖像，背景平鋪。然后選中表格，在屬性面板上的“類”下拉列表中選擇.content_bg，此時的頁面效果如圖12-27所示。圖12-27設置表格背景的效果（3）設置標題文本的樣式。將光標定位在第一行的單元格中，在屬性面板上的“水平”下拉列表中選擇“居中對齊”，輸入文章的標題。在style.css中定義CSS規則h2，“字體大小”為“x-large”，加粗。然后選中文本，在屬性面板上的“格式”下拉列表中選擇“標題2”。（4）插入分隔線。將光標定位在標題的右側，按Shift+Enter鍵插入一個換行符。然后單擊“HTML”插入面板上的“圖像”圖標按鈕，插入一條水平分割線。效果如圖12-28所示。圖12-28頁面效果（5）插入翻頁導航文本。將光標定位在第三行單元格中，在屬性面板上的“水平”下拉列表中選擇“居中對齊”，然后輸入“上一頁”；插入多個空格之后，輸入“下一頁”。此時的頁面效果如圖12-29所示。圖12-29頁面效果（6）執行“文件”/“另存為模板”命令，將模板另存為名為article.dwt的模板。。任務3制作庫文件任務引入制作好了模板文件，然后版權聲明部分也是每個網頁需要用到的內容，為此小明需要將版權聲明部分保存為庫項目，那么要如何制作版權聲明文件，如何將庫項目插入到不同的網頁呢？知識準備在Dreamweaver中，庫項目是可以重復使用的項目之一，庫的用途與模板類似，都可將同一內容重復用于不同的網頁。本例的庫文件具體制作步驟如下。（1）新建文件。執行“文件”/“新建”命令，新建一個空白的HTML網頁。切換到“代碼”視圖，刪除<metacharset="utf-8">以外的所有代碼。（2）保存庫文件。執行“文件”/“保存”菜單命令，彈出“另存為”對話框。在“文件名”文本框中輸入文件名copyright.lbi，在“保存類型”下拉列表中選擇“LibraryFiles（*.lbi）。然后單擊“保存”按鈕關閉對話框。（3）插入布局表格。切換到“設計”視圖，執行“插入”/“表格”命令，插入一個一行一列的表格，寬度為750像素，邊框為0。選中表格，在屬性面板上設置對齊方式為“居中對齊”。（4）插入頁腳內容。1）將光標置于單元格中，設置水平和垂直對齊方式均為“居中”，輸入文本Copyright和一個空格，然后將光標定位在空格右側，切換到“HTML”面板。2）單擊“HTML”插入面板上的“其他字符”圖標按鈕，在彈出的下拉菜單中選擇“版權”符號?。3）輸入文本“2012-2017vivi版權所有”之后，按Shift+Enter鍵插入一個換行符，然后輸入其他文本和郵箱地址。（5）添加郵件鏈接。選中郵箱地址，在屬性面板的“鏈接”文本框中輸入mailto:vivi@123.com，此時的頁面效果如圖12-30所示。圖12-30庫項目內容（6）插入庫項目。1）執行“窗口”/“資源”菜單命令打開“資源”面板。單擊“資源”面板左側的“庫”圖標按鈕切換到庫管理面板。2）分別打開前兩節制作的模板layout.dwt和article.dwt，將光標定位在最后一行單元格中，在屬性面板上設置單元格內容的水平對齊方式為“居中對齊”，垂直對齊方式也為“居中”對齊。3）在“庫”面板中選中庫文件copyright.lbi，然后單擊“庫”面板底部的“插入”按鈕；或直接將庫項目拖動到單元格中，即可將庫項目插入到頁面中。此時的頁面效果如圖12-31所示。圖12-31在頁面中插入庫項目任務4制作網站主頁任務引入制作好模板文件和庫項目之后，接下來小明開始在制作網站主頁部分，那么主頁要如何進行布局，如何插入欄目圖像和文字，如何添加熱點區域呢？知識準備制作好頁面布局的模板之后，接下來就可以基于模板layout.dwt輕松制作網站主頁了。本網站實例的制作步驟如下：（1）新建文件。1）執行“窗口”/“資源”菜單命令，調出“資源”面板。單擊“資源”面板左側的“模板”圖標按鈕切換到“模板”面板。2）在模板列表中右擊layout.dwt，在彈出的快捷菜單中選擇“從模板新建”命令，生成一個普通的HTML文件，如圖12-32所示。圖12-32基于模板生成的文件如果在“模板”列表中看不到已創建的模板，可以單擊“模板”面板底部的“刷新站點列表”按鈕。（2）插入布局表格。將光標定位在可編輯區域content內，刪除可編輯區域內的占位文本，然后單擊“HTML”插入面板上的“表格”圖標按鈕，插入一個4行2列、寬度為590像素、無邊框的表格。（3）插入欄目圖像。1）選中第一行和第三行的單元格，在屬性面板上的“水平”下拉列表中選擇“居中對齊”，在“垂直”下拉列表中選擇“頂端”。2）將光標置于第一行第一列的單元格中，單擊“HTML”插入面板上的“圖像”圖標按鈕，然后在彈出的“選擇文件”對話框中選擇已制作的欄目圖片。3）按照上一步同樣的方法，在第一行第二列的單元格和第三行的單元格中分別插入欄目圖片。此時的頁面效果如圖12-33所示。圖12-33插入欄目標題圖片（4）拆分內容布局表格。1）選中第二行第一列的單元格，然后單擊屬性面板上的“拆分單元格”按鈕，將單元格拆分為2列。2）選中拆分后的右側單元格，然后單擊屬性面板上的“拆分單元格”按鈕，將單元格拆分為8行。3）按照前兩步的方法，將第二行第二列的單元格和第四行的單元格進行拆分。拆分后的單元格效果如圖12-34所示。圖12-34拆分后的單元格（5）插入圖文。1）將光標定位在第二行第一列的單元格中，在屬性面板上設置單元格內容的水平對齊方式為“居中對齊”，垂直對齊方式也為“居中”對齊。2）單擊“HTML”插入面板上的“圖像”按鈕，在彈出的“選擇文件”對話框中選中相應的圖像。然后按照同樣的方法，在其他單元格中插入圖像，頁面效果如圖12-35所示。圖12-35插入圖片效果3）選中圖片右側的8行單元格，在屬性面板上的“水平”下拉列表中選擇“左對齊”選項，單元格高度為20。然后在單元格中輸入文本，并為文本添加超級鏈接。由于已在“頁面屬性”對話框中設置了普通文本和鏈接文本的顏色、大小，因此輸入文本后的頁面如圖12-36所示。圖12-36插入文本（6）添加熱點區域。1）選中欄目標題圖片，單擊屬性面板上的“矩形熱點工具”按鈕，然后在圖像的“>>more”文本上按下鼠標左鍵拖出一個矩形框，將文本包圍。2）在屬性面板上的“鏈接”文本框中輸入#，在“替換”文本框中輸入“時尚飾品”。該步驟的作用是單擊“>>more”熱點區域后返回頁面頂端。如果網站的文章比較多，可以依照該頁面制作一個文章列表，然后將熱點區域的鏈接目標指向文章列表所在的頁。3）按照上面兩步的方法，為其他欄目圖片添加熱點區域，并指定鏈接目標和替換文本。完成后的頁面效果如圖12-37所示。圖12-37添加熱點區域至此，網站主頁制作完畢，整個頁面的效果如圖12-38所示。圖12-38完成的頁面效果。任務5制作其他頁面任務引入制作好了網站主頁之后，客戶在訪問網站時，只需要點擊主頁上的圖形或文字，就能馬上跳轉到自己想了解的產品頁面，為此小明還需要制作其他的頁面，其他頁面的制作過程與主頁基本相似，小明要如何制作呢？知識準備本網站實例中將出現大量顯示文章詳細內容的頁面，這些頁面風格類似。下面使用嵌套模板article.dwt制作這些頁面。步驟如下：（1）新建文件。在模板列表中右擊模板article.dw