《網頁制作技術》綜合設計實踐報告(共15頁)

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

2、菜，了解湖南。2.網站欄目及組成 湘菜之家 湘 湘 經 菜 菜 典 簡 名 菜 介 師 肴 譚 歐 王 許 組 剁 永 金 魚 百 子 毛 添 陽 墨 菊 庵 椒 州 魚 香 鳥 龍 家 三 爛 泉 云 魚 魚 血 戲 豆 朝 脫 紅 陽 翅 翅 鴨 蓮 腐 鳳 袍 燒 肉 圖1.網站目錄結構網站的目錄結構如圖1所示。本網站一共十六頁，由“湘菜簡介”、“湘菜名師”、“經典菜肴”三個主要欄目構成?！跋娌撕喗椤睓谀坑伞跋娌撕喗椤边@一個頁面來展示；“經典菜肴”欄目由“湘菜名師”、“剁椒魚頭”、“子龍脫袍”、“毛家紅燒肉”、“永州血鴨”、“百鳥朝鳳”、“組庵魚翅”、“金魚戲蓮”、“魚香豆腐”等九個頁面

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

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

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

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

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

8、翅 頭 燒 鳳 蓮 鴨 腐 袍 肉 圖7 各網頁之間的鏈接關系 本站各網頁之間的鏈接方式如圖7所示，圖中箭頭均為雙向箭頭，而“湘菜簡介”頁面內部除了對首頁“湘菜之家”的文字鏈接還采用錨記鏈接對“湘菜簡介”頁面自身進行跳轉。7. 動態(tài)網頁技術運用在這個網站中，我使用了4個JavaScript腳本。其中三個是用于實現圖片的運動，剩下一個用于字幕滾動。這四個腳本都位于首頁。實現圖片運動的一段代碼如下，其他兩個與之類似：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) 當鼠標停留在圖片上時，clearInterval函數清除時間間隔，圖片不移動；鼠標移開時，setInterval函數重新設置時間間隔。實現字幕滾動的代碼如下：湘菜之家以上代碼控制“湘菜之家”四個字的水平運動，當鼠標停留在字幕上時停止，當鼠標移開時運行。如圖8所示

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

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