網(wǎng)頁(yè)制作技術(shù)綜合設(shè)計(jì)實(shí)踐報(bào)告

1、網(wǎng)站制作技術(shù)綜合設(shè)計(jì)報(bào)告主 題湘菜之家 學(xué)生姓名學(xué)生學(xué)號(hào)專業(yè)班級(jí)學(xué) 院指導(dǎo)教師2015年 12 月 12 日1 網(wǎng)站設(shè)計(jì)需求1. 網(wǎng)站宣傳主題本網(wǎng)站的主題為湘菜，名為“湘菜之家”，目的在于向讀者簡(jiǎn)單介紹湘菜相關(guān)的常識(shí)以及簡(jiǎn)單而經(jīng)典的幾道湘菜菜式，也便于對(duì)中華飲食文化及湖湘文化感興趣的讀者更好地了解湘菜和湖湘文化，更好地從湘菜的熱辣口感中感受到湖南人民由于長(zhǎng)期以來(lái)生長(zhǎng)在這片土地上產(chǎn)生的熱情堅(jiān)強(qiáng)、奔放“霸蠻”的可愛(ài)性格。同時(shí)，我本人作為作為土生土長(zhǎng)的湖南人，對(duì)于家鄉(xiāng)的湘菜文化一直很感興趣，選擇這個(gè)主題也是我表達(dá)對(duì)家鄉(xiāng)的熱愛(ài)的一種方式，希望能有更多的人了解湘菜，了解湖南。2.網(wǎng)站欄目及組成 湘菜之家

2、 湘 湘 經(jīng) 菜 菜 典 簡(jiǎn) 名 菜 介 師 肴 譚 歐 王 許 組 剁 永 金 魚(yú) 百 子 毛 添 陽(yáng) 墨 菊 庵 椒 州 魚(yú) 香 鳥(niǎo) 龍 家 三 爛 泉 云 魚(yú) 魚(yú) 血 戲 豆 朝 脫 紅 陽(yáng) 翅 翅 鴨 蓮 腐 鳳 袍 燒 肉 圖1.網(wǎng)站目錄結(jié)構(gòu)網(wǎng)站的目錄結(jié)構(gòu)如圖1所示。本網(wǎng)站一共十六頁(yè)，由“湘菜簡(jiǎn)介”、“湘菜名師”、“經(jīng)典菜肴”三個(gè)主要欄目構(gòu)成。“湘菜簡(jiǎn)介”欄目由“湘菜簡(jiǎn)介”這一個(gè)頁(yè)面來(lái)展示；“經(jīng)典菜肴”欄目由“湘菜名師”、“剁椒魚(yú)頭”、“子龍脫袍”、“毛家紅燒肉”、“永州血鴨”、“百鳥(niǎo)朝鳳”、“組庵魚(yú)翅”、“金魚(yú)戲蓮”、“魚(yú)香豆腐”等九個(gè)頁(yè)面組成；“湘菜名師”欄目由“湘菜名師”“許菊

3、云”、“王墨泉”、“歐陽(yáng)爛陽(yáng)”、“譚添三”等五個(gè)頁(yè)面組成?！跋娌撕?jiǎn)介”欄目用一個(gè)頁(yè)面簡(jiǎn)要介紹湘菜發(fā)展歷史、菜系特點(diǎn)、地區(qū)特色、口味特色等方面；“湘菜名師”欄目簡(jiǎn)要介紹了許菊云等四位湘菜名師，以視頻介紹的方式為主，對(duì)歐陽(yáng)爛陽(yáng)和王墨泉大師的介紹則采用視頻和文字結(jié)合的方式；“經(jīng)典菜肴”欄目簡(jiǎn)要介紹了組庵魚(yú)翅等八道經(jīng)典湘菜的來(lái)由故事、食材準(zhǔn)備、制作方法等方面。三網(wǎng)站功能該網(wǎng)站將實(shí)現(xiàn)以下功能：1.首頁(yè)展示：網(wǎng)站logo、導(dǎo)航條實(shí)現(xiàn)超鏈接、網(wǎng)站名稱字幕滾動(dòng)、相關(guān)圖片的運(yùn)動(dòng)、插入音頻文件辣妹子；2.“湘菜簡(jiǎn)介”頁(yè)面展示：以簡(jiǎn)要文字介紹湘菜、錨記鏈接實(shí)現(xiàn)頁(yè)面內(nèi)容的快速跳轉(zhuǎn)、以CSS樣式來(lái)設(shè)置背景圖案、插入音頻

4、文件鄉(xiāng)里妹子進(jìn)城來(lái)；3.“湘菜名師”頁(yè)面展示：用超鏈接實(shí)現(xiàn)該界面與各子頁(yè)間的鏈接，讀者可根據(jù)自己的興趣選擇進(jìn)入不同的子頁(yè)了解對(duì)應(yīng)的湘菜大師。以GIF動(dòng)圖的形式展示動(dòng)畫(huà)，以圖層來(lái)實(shí)現(xiàn)頁(yè)面布局；4.“湘菜名師”頁(yè)面各子頁(yè)：插入三段視頻，以視頻或者視頻文字相結(jié)合的方式來(lái)介紹湖南有名的湘菜大師；5.“經(jīng)典菜肴”頁(yè)面展示：以超鏈接的方式實(shí)現(xiàn)該頁(yè)與其各子頁(yè)的聯(lián)系，讀者可根據(jù)自己的興趣選擇進(jìn)入不同的子頁(yè)了解相關(guān)菜式的信息；6.“經(jīng)典菜肴”頁(yè)面各子頁(yè)：圖片展示各色菜肴，文字介紹對(duì)應(yīng)菜肴的來(lái)源故事背景、食材準(zhǔn)備、制作方法、制作過(guò)程小貼士等內(nèi)容。4 網(wǎng)站內(nèi)容1. 版面布局 本網(wǎng)站幾乎所有頁(yè)面都采用了表格布局，并插

5、入一些圖層。部分頁(yè)面（王墨泉.html、湘菜名師.html)采用圖層布局。2. 網(wǎng)頁(yè)素材獲取方式本網(wǎng)站圖片均來(lái)自網(wǎng)絡(luò)資源，大部分圖片是我用PS軟件處理過(guò)的（其中“墨竹圖”、“1”采用濾鏡處理過(guò)，logo是自己用PS軟件制作的，“湘菜名師背景”用PS添加了文字）。本網(wǎng)站中的視頻文件及音頻文件均來(lái)自網(wǎng)絡(luò)資源，采用插入媒體的方式將它們插入到網(wǎng)頁(yè)中。對(duì)于音頻文件，我還使用背景顏色為白色的圖層將頁(yè)面顯示出的插件覆蓋。使界面看起來(lái)更加干凈利落。3.導(dǎo)航方法本網(wǎng)站首頁(yè)制作了一個(gè)導(dǎo)航條，通過(guò)文本鏈接實(shí)現(xiàn)首頁(yè)與相對(duì)應(yīng)子頁(yè)的鏈接（如圖2所示）。在“湘菜簡(jiǎn)介”頁(yè)面中采用了錨記鏈接實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，用戶可以通過(guò)點(diǎn)擊相應(yīng)的

6、文字將頁(yè)面跳轉(zhuǎn)到相應(yīng)的區(qū)域，繼而閱讀相對(duì)應(yīng)的內(nèi)容。例如點(diǎn)擊“發(fā)展歷史”，頁(yè)面就會(huì)自動(dòng)跳轉(zhuǎn)到對(duì)應(yīng)的標(biāo)題“發(fā)展歷史”處，然后用戶就能閱讀湘菜發(fā)展歷史相關(guān)的內(nèi)容并通過(guò)點(diǎn)擊這段文字末尾的“返回頂部”返回到頂部。（如圖3所示）。其他頁(yè)面均采取文本鏈接的方式與相關(guān)頁(yè)面實(shí)現(xiàn)鏈接，如“經(jīng)典菜肴”頁(yè)面與其子頁(yè)“組庵魚(yú)翅”，點(diǎn)擊“經(jīng)典菜肴”頁(yè)面中的“組庵魚(yú)翅”，則對(duì)應(yīng)的子頁(yè)“組庵魚(yú)翅被打開(kāi)。點(diǎn)擊“組庵魚(yú)翅”頁(yè)面底部的“返回經(jīng)典菜肴”便可以返回“經(jīng)典菜肴”頁(yè)面。（如圖4及圖5所示）。 圖2 網(wǎng)站首頁(yè)中有導(dǎo)航條 圖3 “湘菜簡(jiǎn)介”頁(yè)面中的錨記鏈接 圖4 “經(jīng)典菜肴”界面 圖5 “組庵魚(yú)翅”界面底部插入了超鏈接4. 各

7、網(wǎng)頁(yè)內(nèi)容具體內(nèi)容見(jiàn)“網(wǎng)站功能”部分。5. 色彩選擇及搭配 本網(wǎng)站以紅色及白色作為主要色調(diào)，突出傳統(tǒng)文化的特色。在圖片搭配上基本上使用中國(guó)元素或者傳統(tǒng)菜肴圖片，并且多數(shù)界面配有火焰紋的圖案（如圖6所示），體現(xiàn)出了傳統(tǒng)文化的莊重大方。除此之外，網(wǎng)站使用少量廚師的動(dòng)圖或者靜態(tài)圖片進(jìn)行配圖。 圖6 火焰紋6. 各網(wǎng)頁(yè)之間的鏈接關(guān)系 湘 菜 之 家 湘（ 湘 菜內(nèi) 菜 經(jīng) 簡(jiǎn)部 名 典 介錨 師 菜 記 肴 鏈接） 譚 王 歐 許 組 剁 毛 百 金 永 魚(yú) 子 添 墨 陽(yáng) 菊 庵 椒 家 鳥(niǎo) 魚(yú) 州 香 龍 三 泉 爛 云 魚(yú) 魚(yú) 紅 朝 戲 血 豆 脫 陽(yáng) 翅 頭 燒 鳳 蓮 鴨 腐 袍 肉 圖7

8、各網(wǎng)頁(yè)之間的鏈接關(guān)系 本站各網(wǎng)頁(yè)之間的鏈接方式如圖7所示，圖中箭頭均為雙向箭頭，而“湘菜簡(jiǎn)介”頁(yè)面內(nèi)部除了對(duì)首頁(yè)“湘菜之家”的文字鏈接還采用錨記鏈接對(duì)“湘菜簡(jiǎn)介”頁(yè)面自身進(jìn)行跳轉(zhuǎn)。7. 動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)運(yùn)用在這個(gè)網(wǎng)站中，我使用了4個(gè)JavaScript腳本。其中三個(gè)是用于實(shí)現(xiàn)圖片的運(yùn)動(dòng)，剩下一個(gè)用于字幕滾動(dòng)。這四個(gè)腳本都位于首頁(yè)。實(shí)現(xiàn)圖片運(yùn)動(dòng)的一段代碼如下，其他兩個(gè)與之類似：imgdisplay:block; var t=setInterval(myfunc,1000) var vd=document.getElementById(apDiv7) function myfunc() var obj

9、=vd.firstChild vd.removeChild(obj) vd.appendChild(obj) vd.onmouseover=function()clearInterval(t) vd.onmouseout=function()t=setInterval(myfunc,1000) 當(dāng)鼠標(biāo)停留在圖片上時(shí)，clearInterval函數(shù)清除時(shí)間間隔，圖片不移動(dòng)；鼠標(biāo)移開(kāi)時(shí)，setInterval函數(shù)重新設(shè)置時(shí)間間隔。實(shí)現(xiàn)字幕滾動(dòng)的代碼如下：湘菜之家以上代碼控制“湘菜之家”四個(gè)字的水平運(yùn)動(dòng)，當(dāng)鼠標(biāo)停留在字幕上時(shí)停止，當(dāng)鼠標(biāo)移開(kāi)時(shí)運(yùn)行。如圖8所示： 圖8 字幕滾動(dòng) 5 遇到的問(wèn)題及解決辦

10、法在制作本網(wǎng)站的過(guò)程中我遇見(jiàn)一些問(wèn)題，主要有3個(gè)。以下就是在制作過(guò)程中遇見(jiàn)的問(wèn)題及解決的方法：1. 如何去除超鏈接的下劃線及改變其藍(lán)色字體的問(wèn)題 在制作過(guò)程中我發(fā)現(xiàn)我插入了超鏈接之后相應(yīng)的字體就會(huì)變成藍(lán)色，下方也會(huì)出現(xiàn)一條下劃線，當(dāng)時(shí)沒(méi)有辦法去除，但是又覺(jué)得影響頁(yè)面美觀。后來(lái)經(jīng)過(guò)認(rèn)真學(xué)習(xí)，我使用CSS樣式來(lái)解決這個(gè)問(wèn)題。如圖9所示，這個(gè)CSS樣式的運(yùn)用使得原本藍(lán)色的“返回首頁(yè)”字樣變?yōu)榱思t色，下劃線也被去除： 圖9 設(shè)置超鏈接的CSS樣式2. 如何使得背景圖像可以移動(dòng)的問(wèn)題 對(duì)于如何使背景圖像可以移動(dòng)的問(wèn)題我一樣采用CSS樣式來(lái)解決。例如，圖10中的祥云圖案可以隨著瀏覽器滾動(dòng)條的滾動(dòng)而滾動(dòng)，位

11、置被固定，不會(huì)因?yàn)闉g覽器滾動(dòng)條拖動(dòng)而變化。 圖10 背景圖案樣式設(shè)置及設(shè)置效果3. 如何改變頁(yè)面中部分文字的顏色及字體、大小的問(wèn)題 一開(kāi)始制作這個(gè)網(wǎng)站的時(shí)候我發(fā)現(xiàn)，如果我使用我想改變一些字樣的顏色、字體、大小的屬性，那么整個(gè)頁(yè)面中的字都會(huì)發(fā)生同樣的變化。后來(lái)，學(xué)習(xí)了一點(diǎn)HTML語(yǔ)言之后，我使用HTML語(yǔ)言對(duì)代碼進(jìn)行修改，達(dá)到了理想的效果。比如說(shuō)，我想將一個(gè)界面中的一段文字設(shè)置為4號(hào)字體、楷體的形式，我就在這段文字前后加入如下代碼：這樣就完成了文字的修改。六總結(jié) 本次網(wǎng)頁(yè)設(shè)計(jì)是我第一次制作網(wǎng)頁(yè)，也是第一次使用Dreamweave CS5制作網(wǎng)頁(yè)，這個(gè)網(wǎng)站一共16頁(yè)。在這個(gè)過(guò)程中，我收獲了很多，學(xué)習(xí)了一些有關(guān)于這款軟件的使用方法以及網(wǎng)頁(yè)制作的技術(shù)，例如用表格和層布局、使用CSS樣式、使用超鏈接、使用錨記鏈接、插入音頻視頻等。同時(shí)，我也初步接觸到了HTML語(yǔ)言和JavaScript腳本語(yǔ)言，感受到了編程語(yǔ)言的強(qiáng)大功能以及編程能力的重要性。我也用PS軟件處理了少量圖片，提高了使用PS軟件的水平。在制作的時(shí)候遇見(jiàn)很多的問(wèn)題，但是通過(guò)老師同學(xué)的幫助以及自己翻閱書(shū)籍查詢網(wǎng)絡(luò)資料大部分都得到了解決。當(dāng)然，這個(gè)網(wǎng)站是一個(gè)靜態(tài)網(wǎng)站，還很不完善，界面也不是十分美觀，在使用上也還有很多不變。但是我相信只要通過(guò)不斷地努力學(xué)習(xí)，在不久的將來(lái)我一定可以制作