word版可編輯-網(wǎng)站設(shè)計(jì)說明書精心整理doc-展示頁
2025-07-24 12:35本頁面
【正文】 V+CSS網(wǎng)站建設(shè)——精致膳食養(yǎng)身網(wǎng)——畢業(yè)設(shè)計(jì)說明書系 部： 學(xué)生姓名： 專業(yè)班級(jí)： 學(xué) 號(hào)： 指導(dǎo)教師： 2012年10月15日 目錄摘要： 3一、引言 4（一）開發(fā)目的 4（二）開發(fā)技術(shù) 4（三）開發(fā)工具 4二、網(wǎng)站內(nèi)容規(guī)劃 4（一）網(wǎng)站主題 4（二）網(wǎng)站內(nèi)容 5三、網(wǎng)站設(shè)計(jì) 5（一）網(wǎng)站形象設(shè)計(jì) 5（二）網(wǎng)站頁面設(shè)計(jì) 6四、網(wǎng)站具體制作 7（一）DIV結(jié)構(gòu)圖 7（二）具體模塊制作 11（三）特效制作 17五、網(wǎng)站測試 20（一）網(wǎng)站鏈接測試 20（二）頁面檢查 20（三）代碼檢查 20（四）站點(diǎn)文件夾精簡 20六、總結(jié) 20致 謝 22參考文獻(xiàn) 22附錄 23 摘要：本論文主要講述了關(guān)于精致膳食養(yǎng)身網(wǎng)的全部內(nèi)容，包括網(wǎng)站的具體內(nèi)容，設(shè)計(jì)思想，制作過程等等。隨著人們生活水平的提高，越來越多的人開始關(guān)注自己的身體健康，開始關(guān)注養(yǎng)生。網(wǎng)站采用DIV+CSS方式構(gòu)建完成，大大縮減頁面代碼，更好的控制頁面布局，結(jié)構(gòu)簡明，讓人一目了然。清新的綠色讓瀏覽者產(chǎn)生視覺上的放松。網(wǎng)站資源豐富、層次清楚、內(nèi)容嚴(yán)謹(jǐn)。關(guān)鍵詞：DIV+CSS；HTML；膳食養(yǎng)身 一、引言（一）開發(fā)目的時(shí)代的不斷發(fā)展促進(jìn)了人們對(duì)養(yǎng)生知識(shí)的需求。針對(duì)這個(gè)問題，我選擇制作了精致膳食養(yǎng)生網(wǎng)。（二）開發(fā)技術(shù)1. DIV+CSSDIV+CSS大大縮減頁面代碼，能提高頁面瀏覽速度,縮減帶寬成本；結(jié)構(gòu)清晰，容易被搜索引擎搜索到；縮短改版時(shí)間。你可以像寫html代碼一樣輕松地編寫CSS；還能夠更好的控制頁面布局。我們可以利用JavaScript輕易的做出親切的歡迎訊息、漂亮的數(shù)字鐘、有廣告效果的跑馬燈及簡易的選舉，還可以顯示瀏覽器停留的時(shí)間。 （三）開發(fā)工具1. Macromedia Dreamweaver 8 Macromedia ，支持最新的Web技術(shù)，包含HTML檢查、 HTML格式控制、HTML格式化選項(xiàng)、HomeSite/BBEdit捆綁、可視化網(wǎng)頁設(shè)計(jì)、圖像編輯、全局查找替換、全FTP功能、處理Flash和 Shockwave等富媒體格式和動(dòng)態(tài)HTML、基于團(tuán)隊(duì)的Web創(chuàng)作。呈現(xiàn) 3D 圖像并將它合并到 2D 復(fù)合圖像中。以及使用測量、計(jì)數(shù)和可視化工具, 探查您的圖像。（二）網(wǎng)站內(nèi)容1. 網(wǎng)站整體結(jié)構(gòu)首頁食材營養(yǎng)四季飲食異域美食烹飪食譜水果、蔬菜、魚鮮春季夏季秋季意大利菜、法國菜、韓國菜烹飪技巧、菜譜、調(diào)味品詳細(xì)介紹詳細(xì)介紹詳細(xì)介紹詳細(xì)介紹圖1 網(wǎng)站框架圖精致膳食養(yǎng)生網(wǎng)可以幫助人們了解更多的關(guān)于養(yǎng)生的知識(shí)，具體包括首頁、食材營養(yǎng)、四季美食、異域美食、烹飪食譜等功能。食材營養(yǎng)頁面包含了各種關(guān)于食材的健康知識(shí)，四季美食頁面包含了春、夏、秋等季節(jié)應(yīng)該了解的養(yǎng)生美食，異域美食頁面則包含了各種外國菜肴的做法，烹飪食譜頁面包含了烹飪技巧、菜譜、調(diào)味品等內(nèi)容，以上頁面均可隨意點(diǎn)擊任意標(biāo)題進(jìn)入下一級(jí)頁面了解更詳細(xì)內(nèi)容。清新的綠色讓瀏覽者產(chǎn)生視覺上的放松。網(wǎng)站中正文文字均采用宋體12—14號(hào)字，大標(biāo)題則采用黑體，具體字體大小根據(jù)網(wǎng)站的美觀設(shè)計(jì)制定。以漢書體現(xiàn)標(biāo)題，顯得更有特色。（如圖2）圖2 logo（1）設(shè)計(jì)思想將導(dǎo)航放置于logo的右邊，五個(gè)導(dǎo)航并排安置，同時(shí)在導(dǎo)航上做了懸停效果，首頁上一直有懸停效果展示。圖3 導(dǎo)航圖4 導(dǎo)航對(duì)比圖（二）網(wǎng)站頁面設(shè)計(jì)首頁設(shè)計(jì)時(shí)，為體現(xiàn)網(wǎng)站優(yōu)化的思想，將首頁劃分為四個(gè)板塊，包括美食推薦、飲食誤區(qū)、烹飪食譜和食材營養(yǎng)。美食推薦模塊中，運(yùn)用圖片轉(zhuǎn)換特效，增添動(dòng)態(tài)效果。為以后將網(wǎng)站建設(shè)成一個(gè)動(dòng)網(wǎng)，在左上側(cè)安置閱讀排行榜這一欄，動(dòng)網(wǎng)建成之時(shí)，欄目能及時(shí)更新，以便向大眾推薦更好的知識(shí)。（如圖圖7）四、網(wǎng)站具體制作（一）DIV結(jié)構(gòu)圖圖6 子頁圖7 二級(jí)子頁templatemo_headersite_titletemplatemo_menutemplatemo_content_wrappertemplatemo_contenttemplatmeo_sidebartemplatemo_footer圖8 首頁DIV框架圖8為網(wǎng)站主頁的DIV結(jié)構(gòu)圖，每個(gè)框中文字是每個(gè)DIV框架的id，利用這個(gè)簡單的布局可以體現(xiàn)網(wǎng)站大體的設(shè)計(jì)布局。 templatemo_content_wrapperKuang2Kuang3Kuang1圖9 子頁DIV框架圖10為網(wǎng)站二級(jí)子頁DIV結(jié)構(gòu)圖，圖中文字為每個(gè)DIV的id。（如圖11）圖11 首頁模塊HTML代碼： div class=sidebar_section h2飲食誤區(qū)/h2 div class=sidebar_section_content ul class=categories_list lia href=不能和雞蛋一起吃的食物/a/li lia href=重新解讀“吃啥補(bǔ)啥”/a/li /ul div id=morea href=img src=images/ width=50 height=15 border=0 //a/div /div /divCSS代碼：templatmeo_sidebar .sidebar_section { marginbottom: 30px。}templatmeo_sidebar .categories_list { margin: 0。 liststyle: none。 margin: 0。 color: 201f1c。 backgroundimage: url(images/)。 backgroundposition: left center。 textdecoration: none。 height: 15px。 paddingleft: 30px。具體DIV布局及CSS代碼如下（如圖12）圖12 子頁模塊HTML代碼：div id=kuang3_1烹飪技巧div id=kuang2_更多 〉〉/div/divdiv id=kuang3_2 li class=lista href=如何煮玉米才能更香甜/a/li textalign: left。 float: left。 borderbottomwidth: 1px。 borderbottomcolor: 999999。 fontweight: bold。 paddingleft: 10px。 paddingbottom: 3px。 color: 000000。 width: 260px。 marginbottom: 10px。}kuang3_3 { height: 94px。 float: left。 marginbottom: 40px。}kuang2 { float: left。 marginright: 1
畢業(yè)設(shè)計(jì)相關(guān)推薦
鄂ICP備17016276號(hào)-1