《網(wǎng)頁制作技術(shù)》綜合設(shè)計實踐報告(共15頁)

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

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

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

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

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

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

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

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

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

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

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