靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)制作 教案 第12章 時(shí)尚資訊網(wǎng)站設(shè)計(jì)綜合實(shí)例

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