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

項(xiàng)目十二

時(shí)尚資訊網(wǎng)站設(shè)計(jì)綜合實(shí)例任務(wù)1

網(wǎng)站概述任務(wù)2制作模板任務(wù)3制作庫(kù)文件任務(wù)4制作網(wǎng)站主頁(yè)任務(wù)5制作其他頁(yè)面任務(wù)1網(wǎng)站概述任務(wù)引入領(lǐng)導(dǎo)交給小明一個(gè)任務(wù)，要求為某公司設(shè)計(jì)時(shí)尚資訊網(wǎng)站，在制作網(wǎng)站之前，通過與客戶溝通，小明也對(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í)例最終效果如圖所示。實(shí)例主頁(yè)實(shí)例效果

實(shí)例效果二、準(zhǔn)備工作在開始制作本例之前，先介紹一下制作本網(wǎng)站所需的準(zhǔn)備工作。（1）在硬盤上新建一個(gè)fashion文件夾，在fashion目錄下創(chuàng)建一個(gè)images子目錄。（2）在圖片編輯軟件（如Fireworks）中制作所需的圖片，如圖所示。（3）啟動(dòng)Dreamweaver2021，執(zhí)行“站點(diǎn)”/“新建站點(diǎn)”菜單命令，新建一個(gè)靜態(tài)的本地站點(diǎn)fashion，指向fashion目錄。logo欄目標(biāo)題

頁(yè)面底部背景和導(dǎo)航圖像任務(wù)2制作模板任務(wù)引入前期的準(zhǔn)備工作已經(jīng)做好，接下來小明開始準(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)建樣式表。“創(chuàng)建新的CSS文件”對(duì)話框（3）創(chuàng)建基本布局。（4）制作頂欄。二、制作導(dǎo)航菜單本節(jié)使用jQueryAccordion構(gòu)件制作導(dǎo)航菜單面板，單擊面板名稱，可以上下自由滑開選擇的內(nèi)容，而整個(gè)窗口不會(huì)發(fā)生變化。操作步驟如下：（1）拆分單元格。（2）插入折疊構(gòu)件。表格效果頁(yè)面效果插入logo插入圖片的效果頁(yè)面效果

插入的jQueryAccording構(gòu)件“復(fù)制相關(guān)文件”對(duì)話框（3）設(shè)置折疊式構(gòu)件的屬性。（4）修改面板名稱。（5）修改標(biāo)題文本的顏色。（6）修改標(biāo)題文本的呈現(xiàn)方式。（7）設(shè)置面板的背景顏色。（8）設(shè)置面板內(nèi)容的填充邊距。（9）添加菜單項(xiàng)。（10）設(shè)置項(xiàng)目列表的樣式。jQuery折疊式的屬性面板jQueryAccording效果修改規(guī)則定義在“CSS設(shè)計(jì)器”面板中查看規(guī)則（11）設(shè)置鼠標(biāo)劃過時(shí)鏈接文本的顏色。（12）使用同樣的方法，在其他四個(gè)面板中插入文本，并制作成項(xiàng)目列表。（13）設(shè)置單元格屬性。（14）插入圖像鏈接。

頁(yè)面效果設(shè)置面板內(nèi)容背景的效果修改內(nèi)容左、右填充之后的效果項(xiàng)目列表定義列表效果設(shè)置鏈接樣式三、插入模板元素（1）設(shè)置頁(yè)腳的背景圖像。（2）插入可編輯區(qū)域。（3）保存文件。設(shè)置頁(yè)腳背景插入的可編輯區(qū)域四、制作嵌套模板（1）插入布局表格。（2）設(shè)置表格的背景圖像。（3）設(shè)置標(biāo)題文本的樣式。（4）插入分隔線。（5）插入翻頁(yè)導(dǎo)航文本。（6）執(zhí)行“文件”/“另存為模板”命令，將模板另存為名為article.dwt的模板。設(shè)置表格背景的效果頁(yè)面效果頁(yè)面效果任務(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）新建文件。（2）保存庫(kù)文件。（3）插入布局表格。（4）插入頁(yè)腳內(nèi)容（5）添加郵件鏈接。（6）插入庫(kù)項(xiàng)目。任務(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）新建文件。（2）保存庫(kù)文件。（3）插入布局表格。（4）插入頁(yè)腳內(nèi)容（5）添加郵件鏈接。

庫(kù)項(xiàng)目?jī)?nèi)容

在頁(yè)面中插入庫(kù)項(xiàng)目任務(wù)4制作網(wǎng)站主頁(yè)任務(wù)引入制作好模板文件和庫(kù)項(xiàng)目之后，接下來小明開始在制作網(wǎng)站主頁(yè)部分，那么主頁(yè)要如何進(jìn)行布局，如何插入欄目圖像和文字，如何添加熱點(diǎn)區(qū)域呢？知識(shí)準(zhǔn)備制作好頁(yè)面布局的模板之后，接下來就可以基于模板layout.dwt輕松制作網(wǎng)站主頁(yè)了。本網(wǎng)站實(shí)例的制作步驟如下：（1）新建文件。（2）插入布局表格。（3）插入欄目圖像?；谀０迳傻奈募迦霗谀繕?biāo)題圖片（4）拆分內(nèi)容布局表格。（5）插入圖文。（6）添加熱點(diǎn)區(qū)域。拆分后的單元格插入圖片效果插入文本添加熱點(diǎn)區(qū)域

完成的頁(yè)面效果。任務(wù)5制作其他頁(yè)面任務(wù)引入制作好了網(wǎng)站主頁(yè)之后，客戶在訪問網(wǎng)站時(shí)，只需要點(diǎn)擊主頁(yè)上的圖形或文字，就能馬上跳轉(zhuǎn)到自己想了解的產(chǎn)品頁(yè)面，為此小明還需要制作其他的頁(yè)面，其他頁(yè)面的制作過程與主頁(yè)基本相似，小明要如何制作呢？知識(shí)準(zhǔn)備本網(wǎng)站實(shí)例中將出現(xiàn)大量顯示文章詳細(xì)內(nèi)容的頁(yè)面，這些頁(yè)面風(fēng)格類似。下面使用嵌套模板article.dwt制作這些頁(yè)面。步驟如下：（1）新建文件。（2）插入圖文。預(yù)覽頁(yè)面效果（3）執(zhí)行“文件”/“保存”命令，將當(dāng)前頁(yè)面保存為swarovski-1.html。（4）按照上面的步驟制作另一個(gè)頁(yè)面，例如swarovski-2.html。（5）添加導(dǎo)航鏈接。選中當(dāng)前文章第一頁(yè)中的“下一頁(yè)”文本，（6）按照以上步驟制作其他文章的頁(yè)面。（7）保存文檔，按F12鍵在瀏覽器中預(yù)覽頁(yè)面效果項(xiàng)目總結(jié)項(xiàng)目實(shí)戰(zhàn)實(shí)戰(zhàn)一制作旅游網(wǎng)站首頁(yè)旅游網(wǎng)站綜合實(shí)例是介紹全國(guó)各地著名旅游景點(diǎn)的網(wǎng)站。主要集中在介紹模板制作方面，然后在模板的基礎(chǔ)上制作首頁(yè)，鼠標(biāo)停留在導(dǎo)航欄上時(shí)彈出下拉菜單；將鼠標(biāo)指針移動(dòng)子菜單上時(shí)，對(duì)應(yīng)菜單項(xiàng)高亮顯示。（1）新建一個(gè)HTML模板文件，并保存模板文件為lvyou.dwt。（2）制作模板，依次制作導(dǎo)航條、左側(cè)邊欄、正文和右側(cè)邊欄以及庫(kù)項(xiàng)目保存模板文件，如圖所示。（3）選擇創(chuàng)建好的模板文件，制作首頁(yè)，如圖所示。模板文件

網(wǎng)站首頁(yè)實(shí)戰(zhàn)二制作兒童教育網(wǎng)站本例的最終效果如圖所示，將鼠標(biāo)指針移到導(dǎo)航菜單上時(shí)，菜單項(xiàng)顯示為桔紅色，且彈出下拉菜單。移到鏈接文本上，則文本顏色變?yōu)榻奂t色，且顯示下劃線。頁(yè)面底部的圖片向右滾動(dòng)，將鼠標(biāo)指針移到圖片上時(shí)，圖片停止?jié)L動(dòng)；