畢業(yè)論文(基于div+css的Tasty美食網(wǎng)站的界面設計)

②信息盡可能齊全，滿足不同用戶需求。3.2創(chuàng)作過程利用Photoshop制作出網(wǎng)頁效果圖，再參考另外的一些美食網(wǎng)站，如中華美食網(wǎng)、美食天下等網(wǎng)站定下框架布局，考慮美食網(wǎng)站的logo設計。網(wǎng)上搜集素材并下載，圖片素材分類取名統(tǒng)一保存在images文件夾下，下載搜集圖片如圖3.1所示。圖3.1圖片搜集截圖有關介紹美食網(wǎng)站的文字素材復制并保存在meishi.txt中，文字資料如圖3.2所示。圖3.2文字資料截圖創(chuàng)建頁面，做好首頁及子頁的命名，為樣式、腳本分類創(chuàng)建文件夾。結(jié)合photoshop軟件制作效果圖，利用photoshop軟件實現(xiàn)某些元素的裁剪及取材。3.2.1美食網(wǎng)站類主題與版面的分析在美食網(wǎng)站整體版面布局中，需要更多運用css樣式、HTML代碼和div+css布局使網(wǎng)站清爽簡潔。需要達到的要求：（1）色彩輕快，版面清爽，搭配合理由于是美食類網(wǎng)站，所以版面不宜生硬死板，不宜過于花哨繚亂，但也要注意整體格局。采用明亮清晰色彩、板塊布局工整。主題風格偏向清爽整潔，網(wǎng)頁主要以黑色為背景，灰色為輔。文字顏色以白色為主。采用12像素的正文宋體。（2）版面合理，頁面鏈接無誤。為避免布局過于混亂，各個div之間的位置間距要控制得當，代碼的正確應用，HTML與css的簡潔書寫，使之有更豐富的動畫效果，此外也要保證頁面間的鏈接完整。3.2.2美食網(wǎng)站效果圖的設計與制作美食網(wǎng)站效果圖由網(wǎng)上模板下載所得，在photoshop軟件中打開，首頁模板效果如圖3.3所示。圖3.3首頁效果圖banner部分不做修整，導航部分主要是后面在dreamweaver中修改文字，只把內(nèi)容信息的右邊部分全部改為圖片模式，如圖3.4所示。圖3.4首頁效果圖子頁整體布局繼承首頁布局，只在內(nèi)容信息部分異于首頁。子頁模版效果圖如圖3.5所示。圖3.5子頁效果圖子頁布局不做修改。3.2.3界面元素的制作過程界面元素的制作包括網(wǎng)站中用到的所有圖片，如導航圖、logo圖等。把所有圖片依次使用photoshop進行修整、取材。背景需要透明的圖片保存為*.png格式，其他圖片勻保存為*.jpg。由于本網(wǎng)站導航欄除了幾個數(shù)字圖片外沒再放其他圖片，所以只需在dreamweaver中布局后加入文字即可。3.2.4首頁界面的制作過程首先建立站點，站點下新建images、css、js、data四個文件夾，文字搜集的素材歸于meishi.txt中，圖片素材的搜集與自己設計處理過的圖片都統(tǒng)一放在images文件夾內(nèi)。另外控制樣式的style和slimbox兩個文件放入css文件夾內(nèi)，init、jquery.localscroll-min、jquery.min、jquery.scrollTo-min和slimbox2五個js文件放入js文件夾內(nèi)，數(shù)據(jù)庫文件放入data文件夾中。創(chuàng)建首頁，初建header、main_wrapper、footer上中下三大版塊，其中在header中再插入site_title，輸入網(wǎng)站標題，如圖3.6所示。圖3.6site_title效果圖中間區(qū)塊分為左右兩個版塊，依次命名為home_boxleft、home_boxright。左邊為導航區(qū)塊，右邊為網(wǎng)站展示圖區(qū)塊。導航區(qū)塊利用div+css平均布局為四塊，每塊中都使用a鏈接加入相應圖片，輸入導航文字，導航文字大小設置為h2，顏色為白色并給導航文字設置鏈接，去下劃線，點擊導航文字進入相應界面；右邊部分利用div+css平均分為六個區(qū)塊，每個區(qū)塊都使用a鏈接加入展示圖，點擊任何一張展示圖都可進行放大顯示。首頁界面中內(nèi)容信息部分的效果如圖3.7所示。圖3.7首頁內(nèi)容效果圖導航區(qū)塊中的效果為鼠標移到導航上時，當前鼠標所在的導航項目欄的背景色加深，移開后又恢復。導航區(qū)塊的代碼如下：<divclass="home_boxleft"><divclass="row1boxbox1"><divclass="box_with_padding"><h2><ahref="#about">About</a></h2>Foodisnotjustasimpletasteexperience,butalsoaspiritofenjoyment.</div></div><divclass="row1box2"><divclass="box_with_padding"><h2><ahref="#services">ChineseFood</a></h2>TheChinesedietetiquettevariesaccordingtothenatureandpurposeofthefeast.</div></div><divclass="row1box3"><divclass="box_with_padding"><h2><ahref="#testimonial">WesternFood</a></h2>Western-stylefoodisreferredtoasthewesternstylefood,nutritionasthecore.</div></div><divclass="row1box4"><divclass="box_with_padding"><h2><ahref="#contact">Contact</a></h2>Anyopinionsorsuggestions,pleasecontactus.</div></div></div>導航區(qū)塊具體效果圖如圖3.8所示。圖3.8導航效果圖首頁界面內(nèi)容信息部分展示圖代碼如下：<divclass="row2"id="home_gallery"><ahref="images/gallery/01-l.jpg"rel="lightbox[home_gallery]"class="left"><imgsrc="images/gallery/01.jpg"alt="image1"/></a><ahref="images/gallery/02-l.jpg"rel="lightbox[home_gallery]"class="left"><imgsrc="images/gallery/02.jpg"alt="image2"/></a><ahref="images/gallery/03-l.jpg"rel="lightbox[home_gallery]"class="left"><imgsrc="images/gallery/03.jpg"alt="image3"/></a><ahref="images/gallery/04-l.jpg"rel="lightbox[home_gallery]"class="left"><imgsrc="images/gallery/04.jpg"alt="image4"/></a><ahref="images/gallery/05-l.jpg"rel="lightbox[home_gallery]"class="left"><imgsrc="images/gallery/05.jpg"alt="image5"/></a><ahref="images/gallery/06-l.jpg"rel="lightbox[home_gallery]"class="left"><imgsrc="images/gallery/06.jpg"alt="image6"/></a><ahref="images/gallery/07-l.jpg"rel="lightbox[home_gallery]"class="left"><imgsrc="images/gallery/07.jpg"alt="image6"/></a><ahref="images/gallery/08-l.jpg"rel="lightbox[home_gallery]"class="left"><imgsrc="images/gallery/08.jpg"alt="image6"/></a></div>首頁界面展示圖放大后，點擊“PREV”或圖片的左半部分可返回上一張展示圖的放大界面，點擊“NEXT”或圖片的右半部分可進入下一張展示圖的放大界面，八張展示圖可循環(huán)顯示，點擊圖片右下角的“”或圖片外的黑色部分可關閉圖片放大展示，返回首頁界面。首頁界面展示圖放大后的效果圖如圖3.9所示。圖3.9首頁展示圖放大效果圖3.2.5簡介界面的制作過程此界面除了header與footer部分沿襲首頁，中間的main_wrapper部分主要由兩部分構成。首先是此界面的標題部分，使用簡單文字書寫，字體大小為h1，顏色為白色；然后是此界面的內(nèi)容信息，內(nèi)容信息利用div+css分為兩個部分，兩個部分的布局是一樣的，都是由圖片和解說文字兩部分組成。圖片使用類img_border{background:#525252;padding:4px;border:1pxsolid#282828}和類img_fl{float:left;margin:3px15px5px0}進行設置，用a鏈接載入圖片。點擊簡介界面中的home圖片可返回首頁界面，點擊“Previous”可退回到首頁界面，點擊“Next”可進入中式美食界面。簡介界面的效果圖如圖3.10所示。圖3.10簡介界面3.2.6中式美食界面的制作過程中式美食界面沿用了簡介界面的布局，標題文字大小為h1，顏色為白色。不同點是在中式美食界面中，內(nèi)容信息中的左邊部分去掉了圖片，加入了超級鏈接。使用a鏈接介紹中式美食八大菜系。圖片使用類img_border{background:#525252;padding:4px;border:1pxsolid#282828}和類img_nom{display:block;margin-bottom:15px}進行設置，用a鏈接載入圖片。點擊中式美食界面中的home圖片可返回首頁界面，點擊“Previous”可返回簡介界面，點擊“Next”可進入相冊界面。中式美食界面的效果圖如圖3.11所示。圖3.11中式美食界面3.2.7相冊界面的制作過程此界面除了header與footer部分沿襲首頁，中間的main_wrapper部分主要由兩部分構成。首先是此界面的標題部分，使用簡單文字書寫，字體大小為h1，顏色為白色；第二部分利用div+css平均劃分，各區(qū)塊都使用a鏈接載入圖片。圖片使用類section{position:relative;float:left;width:800px;height:480px;margin-right:20px;background:#3c3b3b;}進行設置。點擊任何一張圖片可對圖片進行放大展示，查看圖片全貌。把圖片放大展示后，點擊圖片中的“PREV”或圖片的左半部分可返回上一張圖片，點擊圖片中的“NEXT”或圖片的右半部分可進入下一張圖片，點擊圖片右下角的“”或圖片外的黑色部分可關閉圖片放大展示，返回相冊界面。點擊相冊界面中的home圖片可返回首頁界面，點擊“Previous”可返回到中式美食界面，點擊“Next”可進入西式美食界面。相冊界面的效果圖如圖3.12所示。圖3.12相冊界面相冊界面圖片放大后的效果圖如圖3.13、圖3.14所示。圖3.13圖片放大展示圖3.14圖片放大展示3.2.8西式美食界面的制作過程西式美食界面沿用了中式美食界面的布局，標題文字大小為h1，顏色為白色。使用a鏈接介紹西式美食不同類別的菜式。圖片使用類img_border{background:#525252;padding:4px;border:1pxsolid#282828}和類img_nom{display:block;margin-bottom:15px}進行設置，用a鏈接載入圖片。點擊西式美食界面中的home圖片可返回首頁界面，點擊“Previous”可返回到相冊界面，點擊“Next”可進入聯(lián)系我們界面。西式美食界面的效果圖如圖3.15所示。圖3.15西式美食界面3.2.9聯(lián)系我們界面的制作過程聯(lián)系我們界面也是沿用了中式美食界面的布局，標題文字大小為h1，子標題文字大小為h3，顏色均為白色。內(nèi)容信息部分分為兩塊，命名為halfleft和halfright。halfleft部分直接使用文字述字我們的聯(lián)系方式及地址，此部分中還有可進入到留言板界面的鏈接，點擊藍色字樣“here”便可進入到留言板界面中；halfright部分只放了地圖，點擊地圖可進入百度地圖界面進行查看搜索。地圖圖片使用類img_border{background:#525252;padding:4px;border:1pxsolid#282828}和類img_nom{display:block;margin-bottom:15px}進行設置，用a鏈接載入圖片。點擊聯(lián)系我們界面中的home圖片可返回首頁界面，點擊“Previous”可返回到西式美食界面，點擊“Next”可進入到首頁界面。地圖部分的代碼如下：<divclass="img_nomimg_border"><ahref='/geocoder?address=浙江經(jīng)貿(mào)職業(yè)技術學院&output=html'target='_blank'><imgstyle="margin:1px"width="320"height="250"src="/staticimage?width=320&height=250¢er=120.388937,30.323013&zoom=16￠er=浙江經(jīng)貿(mào)職業(yè)技術學院"/></a></div>聯(lián)系我們界面的效果圖如圖3.16所示。圖3.16聯(lián)系我們界面點擊地圖進入百度地圖搜索查詢界面。百度地圖界面如圖3.17所示。圖3.17百度地圖界面3.3制作中遇到的問題和解決方法（1）圖片的保存。此問題出現(xiàn)在網(wǎng)站導航區(qū)塊中的圖片制作方面，在photoshop中做完圖片，直接保存為jpg格式，出來的圖片背景是白色的，而需要的圖片背景是透明的，后來百度發(fā)現(xiàn)，保存的需要是png格式，出來的圖片背景才會是透明的。（2）div浮動。在相冊界面中排版問題困擾了很久，自己想要的效果是四張圖片并排排列，但是寫完代碼后圖片總是或斜或豎，后來經(jīng)過反復多次調(diào)整代碼發(fā)現(xiàn)：把四張圖片分為兩個部分，再在各個部分中再分為兩個子部分，每個部分中的左邊部分設置float：left，右邊部分設置float：right即可實現(xiàn)。（3）腳本的邏輯書寫。最難的就是腳本的書寫，有些比較難以理解，而且最容易出差錯。有些在頁面打開時就要加載，需要在body里輸代碼。（4）網(wǎng)站色彩搭配。本人最不擅長的就是色彩搭配，剛開始想得很完美，但做出來的效果圖總是怪怪的，多次失敗后，索性就減少色彩的使用，最終網(wǎng)站以黑色為主，灰色為輔，文字顏色都為白色。整體效果圖出來后，總體感覺清晰明了、簡單大氣。（5）路徑的設置。剛開始根本沒注意到路徑的設置，做完網(wǎng)頁后在瀏覽時發(fā)現(xiàn)有些內(nèi)容總是不對，這才發(fā)現(xiàn)那些內(nèi)容設置成了絕對路徑。4網(wǎng)站的測試編碼完成后，就要對源程序進行測試。軟件測試的目的在于爭取在第一時間發(fā)現(xiàn)程序中的錯誤，以便于及時糾錯，增加軟件可靠性。它在整個系統(tǒng)設計實施過程中占有相當?shù)姆至俊y試是軟件開發(fā)時期的最后一個階段，也是軟件質(zhì)量保證中至關重要的一個環(huán)節(jié)。測試的目的是為了盡可能的發(fā)現(xiàn)程序中存在的錯誤，其任務就是消除網(wǎng)站故障，保證程序的可靠運行，最終把一個高質(zhì)量的網(wǎng)站系統(tǒng)交給用戶使用。一般來說在每個模塊完成之后就要對它作必要的測試，這種測試被稱為單元測試，模塊的測試者也就是編寫者。編碼和單元測試屬于網(wǎng)站生命周期的同一階段。這個階段結(jié)束之后，對網(wǎng)站系統(tǒng)還應該進行各種綜合測試，這是網(wǎng)站生命周期的另一個獨立的階段，由專門的測試人員承擔。在網(wǎng)頁中的測試階段主要是對網(wǎng)站進行瀏覽器兼容性測試。在網(wǎng)頁測試的階段我分別安裝了IE8、火狐、搜狗、等瀏覽器，并且進行了逐個測試。在多次實踐中或多或少都遇到了不可調(diào)節(jié)的DIV浮動問題，但是最后還是在老師的指導和書籍查閱后，嵌入表格完成了頁面設計，使頁面在各個瀏覽器中顯示正常。

結(jié)論2014年2月，我開始了我的畢業(yè)論文工作，時至今日，論文基本完成。從最初的茫然，到慢慢的進入狀態(tài)，再到對思路逐漸的清晰，整個寫作過程難以用語言來表達。歷經(jīng)了幾個月的奮戰(zhàn)，緊張而又充實的畢業(yè)設計終于落下了帷幕。回想這段日子的經(jīng)歷和感受，我感慨萬千，在這次畢業(yè)設計的過程中，我擁有了無數(shù)難忘的回憶和收獲。3月初，在與指導老師的交流討論，對美食網(wǎng)站界面設計進一步規(guī)劃，我便立刻著手資料的收集工作中，當時面對浩瀚的書海真是有些茫然，不知如何下手。在指導老師細心的給我列了提綱，我在圖書館搜集資料，還在網(wǎng)上查找各類相關資料，將這些寶貴的資料全部記在筆記本上，盡量使我的資料完整、精確、數(shù)量多，這有利于論文的撰寫。然后我將收集到的資料仔細整理分類，及時拿給指導老師進行溝通。4月初，資料已經(jīng)查找完畢了，我開始著手畢業(yè)設計及論文的寫作。開發(fā)過程中，遇到了困難，通過查閱資料得到了部分解答。最遺憾的是還是不能獨立完成數(shù)據(jù)庫設計方面的技術。在寫作過程中遇到困難我就及時和指導老師聯(lián)系，并和同學互相交流。在大家的幫助下，困難一個一個解決掉，論文也慢慢成型。4月底，論文的文字敘述已經(jīng)完成。5月開始進行美食網(wǎng)站界面設計。為了制作出自己滿意的網(wǎng)站，我仔細學習了關于網(wǎng)頁的配色、DIV+CSS的使用等知識。在設計網(wǎng)頁界面的初期，由于沒有設計經(jīng)驗，覺得無從下手，空有很多設計思想，卻不知道應該選哪個，通過查閱資料，逐漸確立系統(tǒng)方案。當我終于完成了所有打字、繪圖、排版、校對的任務后整個人都很累，但同時看著電腦熒屏上的畢業(yè)設計稿件我的心里是甜的，我覺得這一切都值了。這次畢業(yè)論文的制作過程是我的一次再學習，再提高的過程。在論文中我充分地運用了大學期間所學到的知識。通過這段時間的畢業(yè)設計，學到了、了解到了很多東西，不僅把以前所學的很多知識充分利用上了，還初步了解了HTML強大的數(shù)據(jù)庫開發(fā)能力，對HTML的