網(wǎng)站設(shè)計(jì)說(shuō)明書

PAGEPAGE2DIV+CSS網(wǎng)站建設(shè)—-精致膳食養(yǎng)身網(wǎng)-—畢業(yè)設(shè)計(jì)說(shuō)明書系部：學(xué)生姓名:專業(yè)班級(jí)：學(xué)號(hào)：指導(dǎo)教師：2012年10月15日

目錄TOC\o”1-2"\h\z\uHYPERLINK\l”_Toc339883767”摘要： 3HYPERLINK\l”_Toc339883768”一、引言 4（一）開發(fā)目的 4（三）開發(fā)工具 4二、網(wǎng)站內(nèi)容規(guī)劃 4(一)網(wǎng)站主題 4（二）網(wǎng)站內(nèi)容 5三、網(wǎng)站設(shè)計(jì) 5HYPERLINK\l”_Toc339883776"(一）網(wǎng)站形象設(shè)計(jì) 5四、網(wǎng)站具體制作 7HYPERLINK\l”_Toc339883779"（一）DIV結(jié)構(gòu)圖 7（二）具體模塊制作 11HYPERLINK\l”_Toc339883781”(三）特效制作 17（一）網(wǎng)站鏈接測(cè)試 20（二）頁(yè)面檢查 20HYPERLINK\l”_Toc339883785”(三）代碼檢查 20HYPERLINK\l”_Toc339883786”（四)站點(diǎn)文件夾精簡(jiǎn) 20_Toc339883788"致謝 22參考文獻(xiàn) 22附錄 23

摘要：本論文主要講述了關(guān)于精致膳食養(yǎng)身網(wǎng)的全部?jī)?nèi)容，包括網(wǎng)站的具體內(nèi)容，設(shè)計(jì)思想，制作過(guò)程等等。隨著人們生活水平的提高,越來(lái)越多的人開始關(guān)注自己的身體健康,開始關(guān)注養(yǎng)生。精致膳食養(yǎng)身網(wǎng)囊括各種養(yǎng)身知識(shí),滿足大眾對(duì)于健康養(yǎng)身的需求。網(wǎng)站采用DIV+CSS方式構(gòu)建完成，大大縮減頁(yè)面代碼,更好的控制頁(yè)面布局，結(jié)構(gòu)簡(jiǎn)明,讓人一目了然.網(wǎng)站采用了清新自然的綠色為主色調(diào)，顏色明快柔和，界面美觀簡(jiǎn)潔。清新的綠色讓瀏覽者產(chǎn)生視覺上的放松.本網(wǎng)站文本簡(jiǎn)明、通俗易懂，整體結(jié)構(gòu)清晰、統(tǒng)一。網(wǎng)站資源豐富、層次清楚、內(nèi)容嚴(yán)謹(jǐn)。網(wǎng)站導(dǎo)航清晰，布局簡(jiǎn)單卻不單調(diào)，下面就通過(guò)這篇說(shuō)明書為大家簡(jiǎn)要的介紹網(wǎng)站的結(jié)構(gòu)、內(nèi)容、設(shè)計(jì)思路、色彩使用方案等內(nèi)容。關(guān)鍵詞：DIV+CSS；HTML；膳食養(yǎng)身

一、引言（一）開發(fā)目的時(shí)代的不斷發(fā)展促進(jìn)了人們對(duì)養(yǎng)生知識(shí)的需求?，F(xiàn)如今，無(wú)論是在網(wǎng)上、報(bào)紙雜志上、或是在電視上，各種各樣的養(yǎng)身知識(shí)層出不窮，讓大家無(wú)從選擇.針對(duì)這個(gè)問(wèn)題，我選擇制作了精致膳食養(yǎng)生網(wǎng)。精致膳食養(yǎng)身網(wǎng)站融合了多種多樣的養(yǎng)生知識(shí)，能滿足大眾對(duì)養(yǎng)身的需求，便于人們健康養(yǎng)身。（二）開發(fā)技術(shù)1.DIV+CSSDIV+CSS大大縮減頁(yè)面代碼，能提高頁(yè)面瀏覽速度,縮減帶寬成本；結(jié)構(gòu)清晰，容易被搜索引擎搜索到；縮短改版時(shí)間.只要簡(jiǎn)單的修改幾個(gè)CSS文件就可以重新設(shè)計(jì)一個(gè)有成百上千頁(yè)面的站點(diǎn)；CSS非常容易編寫.你可以像寫html代碼一樣輕松地編寫CSS；還能夠更好的控制頁(yè)面布局。2.JavaScriptJavaScript是一種能讓你的網(wǎng)頁(yè)更加生動(dòng)活潑的程式語(yǔ)言，也是目前網(wǎng)頁(yè)中設(shè)計(jì)中最容易學(xué)又最方便的語(yǔ)言.我們可以利用JavaScript輕易的做出親切的歡迎訊息、漂亮的數(shù)字鐘、有廣告效果的跑馬燈及簡(jiǎn)易的選舉，還可以顯示瀏覽器停留的時(shí)間。讓這些特殊效果提高網(wǎng)頁(yè)的可觀性。（三）開發(fā)工具1.MacromediaDreamweaver8MacromediaDreamweaver8.0簡(jiǎn)體中文版是一個(gè)可視化的網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站管理工具，支持最新的Web技術(shù)，包含HTML檢查、HTML格式控制、HTML格式化選項(xiàng)、HomeSite/BBEdit捆綁、可視化網(wǎng)頁(yè)設(shè)計(jì)、圖像編輯、全局查找替換、全FTP功能、處理Flash和Shockwave等富媒體格式和動(dòng)態(tài)HTML、基于團(tuán)隊(duì)的Web創(chuàng)作。2.AdobePhotoshopCS2AdobePhotoshopCS2是電影、視頻和多媒體領(lǐng)域的專業(yè)人士,使用3D和動(dòng)畫的圖形和Web設(shè)計(jì)人員，以及工程和科學(xué)領(lǐng)域的專業(yè)人士的理想選擇。呈現(xiàn)3D圖像并將它合并到2D復(fù)合圖像中。輕松編輯視頻圖層上的動(dòng)畫圖形,讓時(shí)間停下來(lái)。以及使用測(cè)量、計(jì)數(shù)和可視化工具，探查您的圖像。二、網(wǎng)站內(nèi)容規(guī)劃（一)網(wǎng)站主題本網(wǎng)站的主題為精致膳食養(yǎng)身網(wǎng),囊括多種多樣養(yǎng)身知識(shí)，其主要目的是滿足大眾對(duì)養(yǎng)身知識(shí)的需求，增加大家的養(yǎng)身知識(shí)。（二）網(wǎng)站內(nèi)容1。網(wǎng)站整體結(jié)構(gòu)首頁(yè)首頁(yè)食材營(yíng)養(yǎng)四季飲食異域美食烹飪食譜水果、蔬菜、魚鮮春季夏季秋季意大利菜、法國(guó)菜、韓國(guó)菜烹飪技巧、菜譜、調(diào)味品詳細(xì)介紹詳細(xì)介紹詳細(xì)介紹詳細(xì)介紹圖1網(wǎng)站框架圖2.網(wǎng)站基本功能精致膳食養(yǎng)生網(wǎng)可以幫助人們了解更多的關(guān)于養(yǎng)生的知識(shí),具體包括首頁(yè)、食材營(yíng)養(yǎng)、四季美食、異域美食、烹飪食譜等功能.首頁(yè)有美食推薦、飲食誤區(qū)、烹飪食譜、食材營(yíng)養(yǎng)等網(wǎng)站的最新動(dòng)態(tài)信息。食材營(yíng)養(yǎng)頁(yè)面包含了各種關(guān)于食材的健康知識(shí)，四季美食頁(yè)面包含了春、夏、秋等季節(jié)應(yīng)該了解的養(yǎng)生美食，異域美食頁(yè)面則包含了各種外國(guó)菜肴的做法，烹飪食譜頁(yè)面包含了烹飪技巧、菜譜、調(diào)味品等內(nèi)容,以上頁(yè)面均可隨意點(diǎn)擊任意標(biāo)題進(jìn)入下一級(jí)頁(yè)面了解更詳細(xì)內(nèi)容。三、網(wǎng)站設(shè)計(jì)(一）網(wǎng)站形象設(shè)計(jì)1.網(wǎng)站色彩網(wǎng)站采用了清新自然的綠色為主色調(diào),顏色明快柔和，界面美觀簡(jiǎn)潔。清新的綠色讓瀏覽者產(chǎn)生視覺上的放松.同時(shí)給人以健康而有生機(jī)之感，網(wǎng)頁(yè)之中圖片色彩豐富，橙色等的色彩更能刺激人們的食欲，吸引大眾的目光。2.字體設(shè)計(jì)網(wǎng)站中正文文字均采用宋體12—14號(hào)字，大標(biāo)題則采用黑體，具體字體大小根據(jù)網(wǎng)站的美觀設(shè)計(jì)制定。3。logo設(shè)計(jì)(1）設(shè)計(jì)思想中國(guó)膳食博大精深，為在網(wǎng)站中體現(xiàn)這一點(diǎn),logo的主要字體我選用特殊字體-—漢書。以漢書體現(xiàn)標(biāo)題，顯得更有特色.（2）設(shè)計(jì)步驟將精致膳食養(yǎng)生四字以三角形狀堆放，在三角形的中間特別插入一株小草形狀的圖案作為裝飾，貼合主題。（如圖2)圖2logo4。導(dǎo)航設(shè)計(jì)（1）設(shè)計(jì)思想將導(dǎo)航放置于logo的右邊,五個(gè)導(dǎo)航并排安置，同時(shí)在導(dǎo)航上做了懸停效果，首頁(yè)上一直有懸停效果展示。(2）設(shè)計(jì)步驟五個(gè)導(dǎo)航并排安置，并除了首頁(yè)之外,都設(shè)置鼠標(biāo)懸停效果，如首頁(yè)的效果（圖3）及鼠標(biāo)懸停效果(圖4)。圖3導(dǎo)航圖4導(dǎo)航對(duì)比圖(二）網(wǎng)站頁(yè)面設(shè)計(jì)1.首頁(yè)設(shè)計(jì)首頁(yè)設(shè)計(jì)時(shí)，為體現(xiàn)網(wǎng)站優(yōu)化的思想，將首頁(yè)劃分為四個(gè)板塊,包括美食推薦、飲食誤區(qū)、烹飪食譜和食材營(yíng)養(yǎng)。每個(gè)版塊都可鏈接到其相對(duì)的子頁(yè),排版自然。美食推薦模塊中,運(yùn)用圖片轉(zhuǎn)換特效，增添動(dòng)態(tài)效果.（如圖5)圖5首頁(yè)2.子頁(yè)設(shè)計(jì)每個(gè)子頁(yè)左側(cè)及右側(cè)的內(nèi)容是各個(gè)模塊的快速鏈接，包括閱讀排行榜、飲食誤區(qū)、友情鏈接、食材營(yíng)養(yǎng)等等的內(nèi)容，可以在瀏覽這個(gè)頁(yè)面時(shí)，能快速鏈接到自己感興趣的頁(yè)面。為以后將網(wǎng)站建設(shè)成一個(gè)動(dòng)網(wǎng),在左上側(cè)安置閱讀排行榜這一欄,動(dòng)網(wǎng)建成之時(shí)，欄目能及時(shí)更新，以便向大眾推薦更好的知識(shí).中間是主要的養(yǎng)生內(nèi)容，根據(jù)模塊而改變。(如圖6、圖7)四、網(wǎng)站具體制作（一）DIV結(jié)構(gòu)圖1。首頁(yè)DIV結(jié)構(gòu)圖圖6子頁(yè)圖7二級(jí)子頁(yè)templatemo_headertemplatemo_headersite_titletemplatemo_menutemplatemo_content_wrappertemplatemo_contenttemplatmeo_sidebartemplatemo_footer圖8首頁(yè)DIV框架圖8為網(wǎng)站主頁(yè)的DIV結(jié)構(gòu)圖，每個(gè)框中文字是每個(gè)DIV框架的id，利用這個(gè)簡(jiǎn)單的布局可以體現(xiàn)網(wǎng)站大體的設(shè)計(jì)布局。（如圖8）2。子頁(yè)DIV結(jié)構(gòu)圖圖9為網(wǎng)站一級(jí)子頁(yè)的DIV結(jié)構(gòu)圖，圖中文字為每個(gè)DIV的id。

templatemo_content_wrappertemplatemo_content_wrapperKuang2Kuang3Kuang1圖9子頁(yè)DIV框架3.二級(jí)子頁(yè)DIV結(jié)構(gòu)圖圖10為網(wǎng)站二級(jí)子頁(yè)DIV結(jié)構(gòu)圖，圖中文字為每個(gè)DIV的id。templatemo_content_wrappertemplatemo_content_wrapperKuang2Kuang4圖10二級(jí)DIV框架

（二)具體模塊制作1.首頁(yè)中具體模塊制作圖11是首頁(yè)中的具體模塊，在此模塊中運(yùn)用CSS代碼給list加上背景圖片，使列表更加美觀,具體DIV布局及CSS代碼如下。（如圖11）圖11首頁(yè)模塊HTML代碼：<divclass="sidebar_section"〉〈h2>飲食誤區(qū)〈/h2>〈divclass="sidebar_section_content"〉〈ulclass="categories_list"〉〈li>〈ahref="yswq_1_1。html”〉不能和雞蛋一起吃的食物</a></li〉······<li><ahref="yswq_2_4.html">重新解讀“吃啥補(bǔ)啥"</a>〈/li>〈/ul> 〈divid="more”>〈ahref=”yswq。html”〉〈imgsrc=”images/templatemo_button副本.png"width=”50"height=”15”border="0”/〉〈/a></div〉</div></div>CSS代碼：＃templatmeo_sidebar.sidebar_section｛ margin—bottom：30px；｝#templatmeo_sidebar.sidebar_section_content{ margin：00035px；｝#templatmeo_sidebar。categories_list{ margin:0; padding：0; list-style:none；}#templatmeo_sidebar。categories_listli｛ padding:0; margin：0;｝.categories_listlia{ display:block； color：#201f1c; padding：5px05px20px; background-image:url（images/templatemo_list。png)； background—repeat：no-repeat； background-position：leftcenter；｝。categories_listlia:hover{ color：＃537c11； text—decoration：none;}#more｛ float:right； height:15px; width：80px； padding-left:30px；｝

2。子頁(yè)具體模塊制作圖12是子頁(yè)中的典型模塊，這個(gè)模塊中，運(yùn)用CSS代碼設(shè)置了下劃線，列表的格式以及圖片的位置等.具體DIV布局及CSS代碼如下（如圖12）圖12子頁(yè)模塊HTML代碼：<divid=”kuang3_1"〉烹飪技巧<divid=”kuang2_”〉更多>〉〈/div></div><divid=”kuang3_2"> 〈liclass=”list"〉<ahref="prsp_psjq1.html"〉如何煮玉米才能更香甜〈/a></li〉······· <liclass="list"〉<ahref="prsp_psjq6。html"〉別人輪蹲奧運(yùn)我們做意大利面〈/a>〈/li〉</div〉 <divid="kuang3_3"><imgsrc="images/27.jpg"width="146”height="97"/〉</div>CSS代碼：#kuang3_1｛ width:400px； text—align：left; vertical-align：middle； float:left; margin-top：0px; border—bottom—width:1px; border—bottom—style：solid; border—bottom-color：#999999； font—size：18px； font—weight：bold; color:＃333333； padding—left：10px； padding-top：20px； padding—bottom：3px;}＃kuang3_2{ font—size:14px; color：＃000000； float:left； width:260px; line—height:26px； margin-bottom:10px; margin—top:10px;｝＃kuang3_3{ height：94px; width:146px； float：left； margin-top：25px； margin—bottom：40px; margin—left：2px;｝#kuang2｛ float:left； width：290px； margin-right：10px; border:1pxsolid#8ECC11；。list{list-style-position:inside；}3.二級(jí)子頁(yè)具體模塊制作圖13為二級(jí)子頁(yè)中的典型模塊,具體DIV及CSS代碼如下.（如圖13）HTML代碼：<divid=”kuang4"〉〈divid="kuang4_4”〉〈ahref=”index.html">首頁(yè)</a>〉<ahref="prsp。html”>烹飪食譜</a〉〉<ahref="prsp_psjq1。html”〉正文</a〉〈/div〉〈divid="kuang4_1”> 〈h2〉如何煮玉米才能更香甜</h2〉〈/div〉 <divid="kuang4_5”>2010年9月21號(hào)精致膳食養(yǎng)生網(wǎng)〈/div〉<divid=”kuang4_2"〉<imgsrc=”images/88。jpg"width="300”height=”197"/〉</div><divid="kuang4_3"><p>正文略〈/p〉</div></div〉CSS代碼：＃kuang4{ float：left; width:580px； margin—left：20px； font-family：”黑體”;}#kuang4_1{ text—align:center； width:580px； font-family："黑體"； color：＃000000; vertical-align:middle; padding—top:10px; height：30px; margin—bottom：10px； margin-top：10px;}#kuang4_4｛ border—bottom—width：2px; border-bottom—style:solid; border—bottom—color：#999999； color:＃333333;｝#kuang4_2｛ float：left; width：300px; margin—right:140px; margin—left：140px； margin-top：10px；}＃kuang4_3｛ float：left; width：580px; margin-top：10px； line-height:24px； color:＃000000; text-indent:20px；}＃kuang4_4｛ float:left； width：580px;}＃kuang4_5｛ text-align:center; float：left; width：580px；}圖13二級(jí)子頁(yè)模塊（三）特效制作首頁(yè)中美食推薦部分安置了一個(gè)特效，來(lái)使首頁(yè)更具動(dòng)態(tài)效果,特效運(yùn)用了javascript語(yǔ)言，構(gòu)成圖片動(dòng)態(tài)切換及點(diǎn)擊切換的效果，能起到宣傳推廣以及吸引大眾眼球的作用。（如圖14）圖14特效圖片Javascript語(yǔ)言：<scripttype=”text/javascript”src=”tab.js”〉</script〉〈SCRIPTsrc="jquery。min。js"type=text/javascript〉</SCRIPT><SCRIPTtype=text/javascript〉var_c=_h=0；$（document).ready(function（）{＄（’＃playli’）.click（function（）｛vari=$（this)。attr('alt’)-1；clearInterval（_h)；_c=i;//play(）;change(i）；｝)$（”＃picimg"）.hover（function()｛clearInterval(_h）},function(）｛play（）｝)；play（)；｝）functionplay()｛_h=setInterval（”auto(）",8000）;｝functionchange（i)｛＄('#playli'）。css(’background-color','＃000000').eq(i).css(’background—color’，'#FF3000’)。blur（)；＄(”＃picimg").fadeOut（’slow’)。eq(i）。fadeIn（'slow’)；}functionauto(）{_c=_c>6?0：_c+1;change（_c）；}</SCRIPT><styletype=”text/css">。img_switch｛ WIDTH:400px; HEIGHT:300px； overflow:hidden； margin—top:0； margin-right:auto； margin—bottom：0; margin-left：auto；}。img_switch_content{ HEIGHT:300px; position：relative； width:400px； float：left；｝。img_switch_text｛width:262px;position:absolute;z—index:5;bottom：5px；left：12px；HEIGHT：15px；z-index：10000！important｝.number_nav{DISPLAY：inline；FLOAT:left;｝。number_navUL{font：12pxArial，Helvetica，sans-serif；padding:0px；MARGIN：0px；LIST-STYLE-TYPE：none；color:#fff;｝。number_navULLI{float:left;font-weight：bold；background:#000;float：left;margin-right：8px;width：23px;cursor:pointer；line-height：17px;height：17px;text—align：center；filter：alpha(opacity=75);-moz—opacity:0.75；opacity:0.75；｝#pic{OVERFLOW:hidden}</style>五、網(wǎng)站測(cè)試(一)網(wǎng)站鏈接測(cè)試網(wǎng)站完成之后，開始網(wǎng)站的鏈接測(cè)試.從首頁(yè)開始，測(cè)試每一個(gè)鏈接,確保沒(méi)有一個(gè)錯(cuò)誤鏈接,沒(méi)有一個(gè)空鏈接。（二)頁(yè)面檢查 檢查每一張頁(yè)面，在二級(jí)子頁(yè)中，為保證三次點(diǎn)擊能到達(dá)指定頁(yè)面，在文章上方加入頁(yè)面導(dǎo)航條，方便大眾瀏覽網(wǎng)頁(yè)。(如圖15）圖15二級(jí)頁(yè)面導(dǎo)航(三）代碼檢查 檢查每一張頁(yè)面的代碼，同時(shí)檢查外部樣式CSS代碼,刪去不需要的代碼,整合類似代碼，確保網(wǎng)站中沒(méi)有多余的代碼.給每一個(gè)圖片加上alt屬性，便于搜索引擎搜索到圖片文件。(四）站點(diǎn)文件夾精簡(jiǎn) 完成所有網(wǎng)站檢查后，開始文件夾的精簡(jiǎn),刪除沒(méi)有用到的文字圖片等內(nèi)容。使站點(diǎn)文件夾中不存在不必要的文件。六、總結(jié)經(jīng)過(guò)3個(gè)月的制作，我總算完成了畢業(yè)設(shè)計(jì)——精致膳食養(yǎng)身網(wǎng).當(dāng)初毅然決定選擇網(wǎng)站設(shè)計(jì)作為畢業(yè)設(shè)計(jì)，原因是因?yàn)榇笠粫r(shí)期我曾經(jīng)做過(guò)網(wǎng)站,初步了解了制作網(wǎng)站的大致流程。但在跟導(dǎo)師溝通過(guò)后，才發(fā)現(xiàn)原來(lái)這次的網(wǎng)站需要運(yùn)用DIV+CSS的開發(fā)技術(shù)，而不是我所熟悉的table布局,從那時(shí)就一直很擔(dān)心，從沒(méi)聽過(guò)DIV和CSS的我,能夠做出讓老師滿意的畢業(yè)設(shè)計(jì)嗎？暑假來(lái)臨，在放假之前我已經(jīng)同老師確定了精致膳食養(yǎng)身這一主題，但我并沒(méi)有立即開始搜集資料開始網(wǎng)站的制作,因?yàn)楫?dāng)時(shí),我甚至還沒(méi)搞清楚DIV是什么，CSS是什么!趁著放假，我去了書店，買回一本關(guān)于DIV+CSS網(wǎng)頁(yè)布局的書?？墒菃?wèn)題又來(lái)了，我不能明白書里的內(nèi)容到底是什么.雖然很想放棄，但是不行,只能繼續(xù)研究。在這期間,我不止看了買的書，也經(jīng)常在網(wǎng)上查看一些別人做的網(wǎng)站，當(dāng)然，也通過(guò)QQ向老師提問(wèn)并獲得了解答.功夫不負(fù)有心人，我總算能大概了解，如何運(yùn)用DIV+CSS布局一個(gè)完整的網(wǎng)站。終于,在完成了老師要求的開題報(bào)告后，我開始了網(wǎng)站資料的搜集.我在網(wǎng)絡(luò)上找到了一些很棒的關(guān)于養(yǎng)身的網(wǎng)站，那些網(wǎng)站的內(nèi)容都十分全面，給了我很好的借鑒機(jī)會(huì)，讓我補(bǔ)充了很多關(guān)于養(yǎng)身的知識(shí)。資料收集完畢,就要開始本次畢業(yè)設(shè)計(jì)的重頭戲了—-網(wǎng)站制作。首先,我先在Photoshop里設(shè)計(jì)出了我的網(wǎng)站首頁(yè)，在色彩方面，我選擇了清新自然的綠色為主色調(diào),顏色明快柔和，界面美觀簡(jiǎn)潔。清新的綠色也能讓瀏覽者產(chǎn)生視覺上的放松；漢書文字設(shè)計(jì)出的logo也成功的讓我的網(wǎng)頁(yè)別具一格；導(dǎo)航條加上我所中意的懸停效果，也能使導(dǎo)航具有動(dòng)態(tài)的效果。網(wǎng)站主要內(nèi)容的設(shè)計(jì)是讓我花了一些時(shí)間的，我希望能在首頁(yè)中凸顯我的網(wǎng)站內(nèi)容，因此，在首頁(yè)我放置了四個(gè)模塊,體現(xiàn)了每個(gè)子頁(yè)面最新更新的內(nèi)容,若以后我將網(wǎng)站設(shè)計(jì)為動(dòng)網(wǎng)，首頁(yè)的內(nèi)容也可及時(shí)更新。設(shè)計(jì)稿完成后,通過(guò)老師的指點(diǎn)修改后，我正式開始了網(wǎng)站的制作。這次我依然使用了MacromediaDreamweaver8這個(gè)軟件,在網(wǎng)頁(yè)制作上，這個(gè)軟件還是十分方便的。由于前一段時(shí)間的學(xué)習(xí)，制作網(wǎng)頁(yè)顯得不是那么的困難,很快，我便做好了網(wǎng)站的首頁(yè)，在IE8瀏覽器里的效果也沒(méi)有出現(xiàn)偏差。但我也不敢大意，以前老師說(shuō)過(guò),網(wǎng)站在不同的瀏覽器里的效果很有可能出現(xiàn)偏差,讓我們一定注意，因此我也下載了360等其他幾個(gè)瀏覽器,瀏覽之后的結(jié)果——出現(xiàn)偏差了！在ie6里首頁(yè)上的兩個(gè)圖片之間出現(xiàn)了問(wèn)題.剛遇到這一類型的問(wèn)題我也不知道怎么解決,只能向老師請(qǐng)教.經(jīng)過(guò)老師的指點(diǎn)，說(shuō)是要將圖片的CSS屬性設(shè)置為img｛display:block;}，加上這個(gè)屬性后再去瀏覽網(wǎng)頁(yè)，果然，問(wèn)題解決了。之后的子頁(yè)制作過(guò)程中,我依然遇到了許許多多的小問(wèn)題，但在網(wǎng)上搜尋答案及詢問(wèn)老師后,都能得到答案，終于在十月中旬完成了網(wǎng)站的設(shè)計(jì).制作了精致膳食養(yǎng)身網(wǎng)給了我很大的收獲，不僅學(xué)習(xí)了很多關(guān)于網(wǎng)頁(yè)的專業(yè)知識(shí)，也再次認(rèn)識(shí)到學(xué)習(xí)的重要性及團(tuán)結(jié)協(xié)作的重要性，因?yàn)樵诰W(wǎng)站制作過(guò)程中，不僅僅是老師，同學(xué)也給予了我很大的幫助。在此，鄭重感謝老師以及同學(xué)們。這次的網(wǎng)站制作，也將是我難忘的經(jīng)歷。

致謝在本次論文設(shè)計(jì)過(guò)程中，芮文艷老師對(duì)該畢業(yè)設(shè)計(jì)從選題,構(gòu)思到最后定稿的各個(gè)環(huán)節(jié)給予細(xì)心指引與教導(dǎo)，使我得以最終完成畢業(yè)論文設(shè)計(jì)。這三年中我還得到眾多老師及同學(xué)的關(guān)心支持和幫助.在此,謹(jǐn)向老師們和同學(xué)們致以衷心的感謝和崇高的敬意！最后，我要向百忙之中抽時(shí)間對(duì)本文進(jìn)行審閱，評(píng)議和參與本人論文答辯的各位老師表示感謝.參考文獻(xiàn)［1]楊選輝。網(wǎng)頁(yè)設(shè)計(jì)與制作教程[M］.北京清華大學(xué)出版社.2008。08[2］楊艷.網(wǎng)頁(yè)設(shè)計(jì)與制作.清華大學(xué)出版社。2011.07［3]趙苗苗。網(wǎng)頁(yè)設(shè)計(jì)與實(shí)戰(zhàn)技術(shù)清華大學(xué)出版社。2011.04[4]袁磊。網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)例教程.清華大學(xué)出版社.2008.10[5］田明.網(wǎng)頁(yè)設(shè)計(jì)與制作.人民郵電出版社。2009.08[6]張磊。網(wǎng)頁(yè)設(shè)計(jì)與制作:DreamweaverCS3.大連理工大學(xué)出版社,2010.11[7]魯波.Web站點(diǎn)架設(shè)與網(wǎng)頁(yè)設(shè)計(jì)。清華大學(xué)出版社。2010。09［8］姚奇富，陳偉網(wǎng)頁(yè)制作.高等教育出版社。2010.04［9]江文。基于工作過(guò)程的網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作。中南大學(xué)出版社。2011.08［10]梁芳。網(wǎng)頁(yè)設(shè)計(jì)與制作(第2版）。清華大學(xué)出版社.2011.07

附錄首頁(yè)完整代碼：〈html>〈head>〈metahttp-equiv=”Content—Type”content="text/html；charset=utf-8"/〉<title〉精致膳食養(yǎng)生網(wǎng)〈/title〉<metaname=”keywords"content=”GreenyTemplate，freewebsitetemplates,CSS，HTML”/>〈metaname="description”content=”GreenyTemplate-Downloadfreewebsitetemplatesfrom”/〉<linkhref="templatemo_style。css"rel="stylesheet"type=”text/css"/><scriptlanguage="javascript”type=”text/javascript”〉functionclearText（field){if（field。defaultValue==field。value）field.value='’;elseif(field。value==’’)field.value=field。defaultValue;}</script><styletype=”text/css">〈！-—。STYLE1｛color：#000000｝.STYLE2｛color:＃FFFFFF｝。STYLE4{ font-size：14; color:＃000000;｝——></style></head><scripttype="text/javascript"src="tab。js”〉</script><SCRIPTsrc=”jquery.min.js"type=text/javascript〉</SCRIPT〉〈SCRIPTtype=text/javascript>var_c=_h=0;＄（document).ready（function(){＄(’#playli’）。click(function（）｛vari=＄（this).attr(’alt’）—1；clearInterval(_h)；_c=i；//play（);change（i）;}）＄(”＃picimg").hover(function(）{clearInterval(_h）},function(）｛play（)}）;play（）;}）functionplay（）｛_h=setInterval（"auto（)”，8000)；}functionchange(i)｛＄('＃playli'）。css（’background—color’,'＃000000'）。eq（i）.css('background—color'，'＃FF3000'）。blur();＄（"#picimg").fadeOut（'slow’)。eq(i)。fadeIn(’slow')；｝functionauto（){_c=_c〉6?0:_c+1;change(_c);}〈/SCRIPT><styletype=”text/css”〉.img_switch{ WIDTH：400px; HEIGHT：300px; overflow:hidden； margin—top:0； margin—right:auto; margin-bottom:0; margin—left：auto；｝.img_switch_content{ HEIGHT：300px； position:relative； width：400px; float：left；}。img_switch_text｛width:262px;position：absolute；z—index：5；bottom：5px;left：12px;HEIGHT:15px;z-index:10000!important｝.number_nav｛DISPLAY：inline;FLOAT:left；}.number_navUL{font:12pxArial,Helvetica，sans-serif；padding：0px；MARGIN:0px;LIST-STYLE—TYPE：none;color:#fff；}.number_navULLI｛float：left;font-weight:bold;background：#000;float:left;margin—right：8px;width：23px；cursor：pointer;line—height:17px;height：17px；text-align：center;filter:alpha（opacity=75）；—moz—opacity：0。75;opacity:0。75；}#pic｛OVERFLOW：hidden｝〈/style〉〈body〉〈divid=”templatemo_header_wrapper"〉 〈divid="templatemo_header"> 〈divid=”site_title”〉〈h1〉 <imgsrc=”images/logo副本。png"alt="CSSTemplates”/> 〈/h1> 〈/div><divid=”templatemo_menu”><ul>〈li>〈ahref="index.html”class="current"〉首頁(yè)〈/a〉</li〉〈li〉〈ahref="scyy.html"target=”_parent"〉食材營(yíng)養(yǎng)〈/a></li>〈li〉〈ahref="sjys.html”target=”_parent">四季飲食</a>〈/li〉〈li>〈ahref=”yyms。html"target=”_parent”>異域美食〈/a〉</li>〈li〉〈ahref=”prsp.html”〉烹飪食譜〈/a>〈/li〉〈/ul> 〈/div〉<!——endoftemplatemo_menu--> <divclass="cleaner">〈/div>〈/div〉〈！—-endoftemplatemo_header--></div>〈！—-endoftemplatemo_header_wrapper-—〉〈divid=”templatemo_content_wrapper”〉 〈divid="templatemo_content”><divclass="content_section”〉<h2〉〈imgsrc="images/biaozhi.jpg">美食推薦〈/h2〉<DIVclass="img_switch_content"id="pic"〉〈imgsrc=”images/15.jpg”/>〈imgsrc="images/16.jpg”/><imgsrc=”images/17。jpg”/>〈imgsrc="images/18.jpg"/〉〈DIVclass=”img_switch_text">〈DIVclass="number_nav"〉〈ULid="play”><LIalt=”1”style=”background：＃f00；"〉1</LI>〈LIalt="2">2</LI〉<LIalt="3”>3</LI><LIalt="4”〉4</LI>〈/UL></DIV>〈/DIV〉〈/DIV> 〈divid="kuang5"〉 <divid="kuang5_1”><imgsrc=”images/lk1.jpg”width=”180"/〉</div> 〈divclass="product_boximg"〉〈imgsrc=”images/03.jpg"/〉</div〉〈/div〉 〈divid=”kuang5”> <divid="kuang5_1"〉〈imgsrc=”images/lk2.jpg"width="180”height=”20"/〉</div〉 〈divclass=”product_boximg”><imgsrc=”images/05。jpg"width="300”height=”227"/></div></div>〈divclass=”cleaner”>〈/div〉〈/div><divclass="content_section"〉〈h2><imgsrc="images/biaozhi.jpg”/>烹飪食譜〈/h2><divid="tu1”〉〈divid="tu1_1”> <imgsrc=”images/06。jpg”/〉 </div><divid=”tu1_2">〈imgsrc=”images/04。jpg"width="240"height="180"/〉</div〉</div〉〈p〉海蝦兩只,有鮮蝦當(dāng)然口感更好，凍蝦也沒(méi)關(guān)系,化凍后剝成蝦仁，開背,去掉蝦線，繼續(xù)用刀將它一剖為二。將蝦仁加淀粉和少許水，抓勻,再用清水沖凈，瀝水。</p>〈p>再在蝦仁內(nèi)加少許蛋清，淀粉，味極鮮醬油，姜汁，一點(diǎn)點(diǎn)番茄沙司抓勻。其余的蛋打成蛋液把隔夜的饅頭取小半只出來(lái)，去皮,用雙手對(duì)搓成細(xì)渣。鍋燒熱后入少量油，改小火,將蝦仁逐只反正面沾滿蛋液,再均勻滾一層饅頭渣，裹住蝦仁,放入鍋中煎或炸至兩面金黃，就可以出鍋了，再配上番茄沙司，很合小朋友的口味；</p〉〈p〉小貼士：如果是大人吃，可以在腌蝦仁的時(shí)候,加入適量的鹽，還可以根據(jù)自己口味選擇加酒或者其他醬料?！?p〉〈divid=”more"〉〈imgsrc="images/templatemo_button副本。png”width="50"height="15"/>〈/div></div></div><！—-endofcontent——>〈divid=”templatmeo_sidebar”〉 <divclass="sidebar_section”> <h2〉飲食誤區(qū)〈/h2〉 <divclass=”sidebar_section_content"〉〈ulclass="categories_list"〉<li〉<ahref="yswq_1_1。html”〉不能和雞蛋一起吃的食物〈/a〉</li><li><ahref="yswq_1_2。html”>好的生活習(xí)慣不包括吃宵夜</a〉〈/li><li〉〈ahref="yswq_1_3.html"〉在劇烈運(yùn)動(dòng)后最好別喝可樂(lè)</a〉〈/li〉<li〉<ahref=”yswq_1_4。html"〉空腹吃香蕉損害健康〈/a〉〈/li〉〈li><ahref=”yswq_1_5。html”〉兒童飲食的十大誤區(qū)〈/a></li>〈li>〈ahref=”yswq_1_6.html”>放棄五谷雜糧，貧血威脅健康〈/a></li〉〈li〉<ahref=”yswq_2_1。html”>吃水果避開8誤區(qū)，別想吃就吃〈/a></li〉<li〉<ahref=”yswq_2_2。html”〉揭穿健康飲食的6大謊言〈/a>〈/li〉<li〉〈ahref="yswq_2_3。html">腌菜致癌的4大誤解</a>〈/li〉