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

②信息盡可能齊全，滿足不同用戶需求。4.2網(wǎng)站的總體設(shè)計(jì)借助由代碼語(yǔ)言編程所實(shí)現(xiàn)的各種交互式效果，增加了網(wǎng)頁(yè)界面的生動(dòng)性和復(fù)雜性。一般來(lái)說(shuō)，網(wǎng)頁(yè)的界面主要由下面幾個(gè)因素構(gòu)成：=1\*GB3①文字：文字元素是信息傳達(dá)的主體部分。網(wǎng)頁(yè)中的文字主要包括標(biāo)題、信息、文字鏈接幾種主要形式。標(biāo)題和傳統(tǒng)媒體中信息傳達(dá)的基本作用相同，是內(nèi)容的簡(jiǎn)概說(shuō)明一般比較醒目、優(yōu)先編排。文字作為占據(jù)頁(yè)面重要比率的元素，同時(shí)又是信息重要載體，它的字體、大小、顏色和排布對(duì)頁(yè)面整體設(shè)計(jì)影響極大。我所使用的文字是宋體12號(hào)，因?yàn)檫@樣看得比較清楚，使整個(gè)頁(yè)面整潔，網(wǎng)頁(yè)中都普遍的使用，所以在此我選擇12號(hào)宋體作為網(wǎng)頁(yè)的主體文字樣式。=2\*GB3②圖形：圖形在網(wǎng)頁(yè)界面中具有重要作用。合理的運(yùn)用圖形，可以生動(dòng)直觀、形象地表現(xiàn)設(shè)計(jì)主題。網(wǎng)頁(yè)中常用的圖形格式包括jpg和gif，這兩種格式壓縮比高，得到了規(guī)范瀏覽器的支持，下載速度快，具有跨平臺(tái)的特性，不需要瀏覽器安裝插件即可直接閱覽。圖形元素包括標(biāo)題、背景、主圖、鏈接圖標(biāo)四種。本文所使用的圖片主要是自己收集的比較精美。網(wǎng)站圖片素材如圖4.1所示。圖4.1圖片素材=3\*GB3③頁(yè)面版式：版式是網(wǎng)頁(yè)界面設(shè)計(jì)的重要組成部分，它將文字、圖形等視覺(jué)元素進(jìn)行組合配置，使頁(yè)面整體視覺(jué)效果美觀和諧，簡(jiǎn)單大方，便于閱讀，實(shí)現(xiàn)信息傳達(dá)的最佳效果。頁(yè)面版式如圖4.2-4.3所示。圖4.2頁(yè)面版式圖4.3頁(yè)面版式=4\*GB3④色彩：彩色網(wǎng)頁(yè)比單色網(wǎng)頁(yè)更具吸引力；色彩本身具有象征作用。4.3整體風(fēng)格設(shè)計(jì)4.3.1頁(yè)面屬性設(shè)計(jì)頁(yè)面中的整體格式和布局都在stley.css中，其中body設(shè)計(jì)如下:body{ margin:0; padding:0; color:#e2e2e2; font-size:12px; line-height:1.6em; font-family:"LucidaSansUnicode","LucidaGrande",sans-serif; background-color:#313030; background-image:url(../images/templatemo_body.jpg); background-position:centertop; background-repeat:no-repeat}頁(yè)面的字體為：宋體、大小為12像素，字體顏色#e2e2e2。背景顏色我采用#313030，#313030這種背景色它與其他任何顏色的搭配都比較合適，不顯花哨，簡(jiǎn)潔大方。背景圖片用url設(shè)置，背景圖像的起始位置為頁(yè)面頂部中間，效果是重復(fù)背景圖。4.3.2色彩搭配打開(kāi)一個(gè)網(wǎng)站，給用戶留下第一印象的既不是網(wǎng)站豐富的內(nèi)容，也不是網(wǎng)站合理的版面布局，而是網(wǎng)站的色彩。色彩對(duì)人的視覺(jué)效果非常明顯，一個(gè)網(wǎng)站設(shè)計(jì)成功與否，在某種程度上取決于設(shè)計(jì)者對(duì)色彩的運(yùn)用和搭配。因?yàn)榫W(wǎng)頁(yè)設(shè)計(jì)屬于一種平面效果設(shè)計(jì)，在排除立體圖形、動(dòng)畫(huà)效果之外，在平面圖上，色彩的沖擊力是最強(qiáng)的，它很容易給用戶留下深刻的印象。因此，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，必須要高度重視色彩的搭配。本網(wǎng)站的主打色為黑色。黑色是一種很大器的顏色，幾乎能與所有的顏色相輔相成。采用這種色彩搭配給游客留下深刻的印象。4.3.3鏈接效果對(duì)于一個(gè)頁(yè)面不僅要設(shè)計(jì)其字體和其他風(fēng)格，還要有鏈接效果，使頁(yè)面更加的生動(dòng)，style.css中的鏈接效果如下：a,a:link,a:visited{color:#FFFFFF;font-weight:normal;text-decoration:none}#site_titlea{font-size:28px;color:#fff;font-weight:700}pa,pa:link,pa:visited{color:#00CCFF;font-weight:normal;text-decoration:none}pa:hover{color:#CC66FF;text-decoration:none;}citea,citea:link,citea:visited{font-size:12px;text-decoration:none;font-style:normal}#gallerylia{ display:block;}#galleryliaimg{}頁(yè)面的鏈接效果設(shè)置：未訪問(wèn)的鏈接樣式和已經(jīng)訪問(wèn)過(guò)的鏈接樣式字體顏色為#FFFFFF，字體的粗細(xì)為中等，文字修飾為無(wú)；當(dāng)鼠標(biāo)放到鏈接上的時(shí)候，樣式字體顏色顏色為#CC66FF，文字修飾為無(wú)。網(wǎng)頁(yè)header部分的效果設(shè)置：字體大小為28像素，顏色為#FFFFFF字體的粗細(xì)為中等。頁(yè)面中的文字鏈接效果設(shè)置：未訪問(wèn)的鏈接樣式和已經(jīng)訪問(wèn)過(guò)的鏈接樣式字體顏色為#00CCFF，字體的粗細(xì)為中等，文字修飾為無(wú)；當(dāng)鼠標(biāo)放到鏈接上的時(shí)候，樣式字體顏色顏色為#CC66FF，文字修飾為無(wú)。引用鏈接的字號(hào)為12像素，文字修飾為無(wú)，字體樣式為默認(rèn)值。圖片展示界面用的是display控件，表示的是顯示模式。bolck表示此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。4.3.4導(dǎo)航設(shè)計(jì)網(wǎng)站的導(dǎo)航欄目可以讓用戶對(duì)網(wǎng)站的內(nèi)容及信息一目了然。導(dǎo)航分為：首頁(yè)、簡(jiǎn)介、中式美食、西式美食、聯(lián)系我們。網(wǎng)站采用DIV布局，加上a鏈接制作而成。相關(guān)代碼如下：<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>4.3.5細(xì)節(jié)設(shè)計(jì)9PX凹陷細(xì)線和有陰影的背景圖片的組合設(shè)計(jì)給網(wǎng)頁(yè)帶來(lái)了分成次的美觀、圖片的選擇給人醒目、大方的感覺(jué)、按鈕的設(shè)計(jì)給顧客賞心悅目的感覺(jué)。4.4首頁(yè)設(shè)計(jì)4.4.1DIV分布和概述由于個(gè)人網(wǎng)站給人的形象應(yīng)該是專(zhuān)業(yè)、大方，所以主頁(yè)的設(shè)計(jì)和布局我采用大方簡(jiǎn)單又不失活潑的原則。首頁(yè)整體用1個(gè)大的DIV里面包含兩個(gè)小的（上下個(gè)一個(gè)）DIV。DIV設(shè)置效果為：總體都設(shè)置了寬度，居中格式，背景顏色及背景圖片，其他還有內(nèi)邊距，高等。所有頁(yè)面分為logo信息、內(nèi)容信息、版權(quán)信息三個(gè)部分。內(nèi)容界面是一個(gè)網(wǎng)站走向成功道路上必不可少的因素。網(wǎng)站的內(nèi)容代表著一個(gè)好網(wǎng)站的素質(zhì)和形象，所以應(yīng)該表現(xiàn)的大氣、端莊而且精細(xì)。還更要表現(xiàn)出一個(gè)網(wǎng)站應(yīng)該有的朝氣和活力。因此我首先選中色彩搭配比較大方，整體布局比較清晰簡(jiǎn)潔的內(nèi)容模式。在首頁(yè)的版面，先是用Photoshop對(duì)網(wǎng)站模板進(jìn)行切片，然后用DIV+CSS進(jìn)行排版。首先自然映入顏面的是logo設(shè)計(jì)，我用最簡(jiǎn)單的文字和線條展示logo；網(wǎng)站首頁(yè)內(nèi)容分兩部分，左邊是網(wǎng)站導(dǎo)航部分，每個(gè)標(biāo)題下面都有一句話介紹本標(biāo)題；右邊放了圖片，美食圖片吸引瀏覽者的眼球；網(wǎng)站底部信息也只用了簡(jiǎn)單的文字展示，界面效果如圖4.4所示。圖4.4頁(yè)面效果根據(jù)因?yàn)闉g覽者在閱讀時(shí)候經(jīng)常采用從上到下，從左到右的習(xí)慣，主體內(nèi)容中，我將“導(dǎo)航”放一邊，“l(fā)ogo”放在了上面的位置加以簡(jiǎn)短的宣傳文字完美搭配這樣能更好地吸引瀏覽者的眼球。底部不僅能夠展示網(wǎng)站的各種優(yōu)點(diǎn)，而且突出顯示出網(wǎng)站整體結(jié)尾的完美。導(dǎo)航效果如圖4.5所示。圖4.5導(dǎo)航效果4.4.2搜索關(guān)鍵字與描述為了有利于搜索引擎的收錄，在首頁(yè)專(zhuān)門(mén)設(shè)置了mate信息，設(shè)置相關(guān)關(guān)鍵字和描述。相關(guān)代碼如下：<metaname="keywords"content="techlayer,freetemplate,onepagelayout"/><metaname="description"content="TechLayerisfreeonetemplatelayoutbyusingcolorfulnavigationsanddarkgraybackground."/>4.5其他界面設(shè)計(jì)其他界面設(shè)計(jì)整體風(fēng)格跟主頁(yè)布局風(fēng)格一致，就只是內(nèi)容布局格式不一樣，更加直觀、簡(jiǎn)潔明了，在任何其他界面中點(diǎn)擊home圖片都可回到首頁(yè)界面。4.5.1簡(jiǎn)介界面的設(shè)計(jì)制作過(guò)程在簡(jiǎn)介界面中，點(diǎn)擊“Previous”可退回到首頁(yè)界面，點(diǎn)擊“Next”可進(jìn)入到中式美食界面。利用DIV+CSS把簡(jiǎn)介界面中的內(nèi)容信息部分分為左右兩個(gè)部分，命名為halfleft和halfright，每個(gè)部分中都采用了圖片加文字對(duì)本網(wǎng)站的信息進(jìn)行介紹。圖片是先從網(wǎng)上找來(lái)，再用Photoshop對(duì)圖片進(jìn)行修改處理，然后用a鏈接形式放入界面中。點(diǎn)擊圖片可進(jìn)行相冊(cè)界面。簡(jiǎn)介界面如圖4.6所示。圖4.6簡(jiǎn)介界面4.5.2中式美食界面的設(shè)計(jì)制作過(guò)程在中式美食界面中，點(diǎn)擊“Previous”可退回到簡(jiǎn)介界面，點(diǎn)擊“Next”可進(jìn)入到相冊(cè)界面。利用DIV+CSS把中式美食界面中的內(nèi)容信息部分分為左右兩個(gè)部分，命名為halfleft和halfright。halfleft部分直接使用文字對(duì)中式美食進(jìn)行描述，此部分中還有中式美食八大菜系的分類(lèi)鏈接，點(diǎn)擊“浙菜系”、“粵菜系”、“川菜系”、“湘菜系”、“閩菜系”、“魯菜系”、“蘇菜系”、“徽菜系”等字樣即出現(xiàn)相關(guān)菜系中各種菜的制作方法；halfright部分采用了圖片加文字對(duì)中式美食及中餐文化進(jìn)行介紹。圖片是先從網(wǎng)上找來(lái)，再用Photoshop對(duì)圖片進(jìn)行修改處理，然后用a鏈接形式放入界面中。點(diǎn)擊圖片可進(jìn)行相冊(cè)界面。中式美食界面如圖4.7所示。圖4.7中式美食界面4.5.3相冊(cè)界面的設(shè)計(jì)制作過(guò)程在相冊(cè)界面中，點(diǎn)擊“Previous”可退回到中式美食界面，點(diǎn)擊“Next”可進(jìn)入到西式美食界面。利用DIV+CSS把相冊(cè)界面中的內(nèi)容信息部分分為多個(gè)大小相同的部分，每個(gè)部分中用a鏈接形式放入圖片。圖片是先從網(wǎng)上找來(lái)，再用Photoshop對(duì)圖片進(jìn)行修改處理，然后放入界面中。相冊(cè)界面如圖4.8所示。圖4.8相冊(cè)界面點(diǎn)擊任何一張圖片可對(duì)圖片進(jìn)行放大展示，查看圖片全貌。把圖片放大展示后，點(diǎn)擊圖片中的“PREV”或圖片的左半部分可返回上一張圖片，點(diǎn)擊圖片中的“NEXT”或圖片的右半部分可進(jìn)入下一張圖片，點(diǎn)擊圖片右下角的“”或圖片外的黑色部分可關(guān)閉圖片放大展示，返回相冊(cè)界面。圖片放大展示效果如圖4.9-4.10所示。圖4.9圖片放大展示圖4.10圖片放大展示4.5.4西式美食界面的設(shè)計(jì)制作過(guò)程在西式美食界面中，點(diǎn)擊“Previous”可退回到相冊(cè)界面，點(diǎn)擊“Next”可進(jìn)入到聯(lián)系我們界面。利用DIV+CSS把西式美食界面中的內(nèi)容信息部分分為左右兩個(gè)部分，命名為halfleft和halfright。halfleft部分直接使用文字對(duì)中式美食進(jìn)行描述，此部分中還有對(duì)西式美食的分類(lèi)的鏈接，點(diǎn)擊“開(kāi)胃頭盤(pán)”、“營(yíng)養(yǎng)主菜”、“方便輕食”、“各類(lèi)茶飲”、“其他”等字樣即出現(xiàn)相關(guān)分類(lèi)中各種菜的制作方法；halfright部分采用了圖片加文字對(duì)西式美食及西餐文化進(jìn)行介紹。圖片是先從網(wǎng)上找來(lái)，再用Photoshop對(duì)圖片進(jìn)行修改處理，然后用a鏈接形式放入界面中。點(diǎn)擊圖片可進(jìn)行相冊(cè)界面。西式美食界面如圖4.11所示。圖4.11西式美食界面4.5.5聯(lián)系我們界面的設(shè)計(jì)制作過(guò)程在聯(lián)系我們界面中，點(diǎn)擊“Previous”可退回到西式美食界面，點(diǎn)擊“Next”可返回到首頁(yè)界面。利用DIV+CSS把聯(lián)系我們界面中的內(nèi)容信息部分分為左右兩個(gè)部分，命名為halfleft和halfright。halfleft部分直接使用文字述字我們的聯(lián)系方式及地址；halfright部分只放了地圖，點(diǎn)擊地圖可進(jìn)入百度地圖界面進(jìn)行查看搜索。下面是地圖部分的代碼：<divclass="img_nomimg_border"><ahref='/geocoder?address=浙江經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院&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è)技術(shù)學(xué)院"/></a></div>聯(lián)系我們界面如圖4.12所示。圖4.12聯(lián)系我們界面百度地圖界面如圖4.13所示。圖4.13百度地圖界面結(jié)論時(shí)至今日，論文基本完成。從最初的茫然，到慢慢的進(jìn)入狀態(tài)，再到對(duì)思路逐漸的清晰，整個(gè)寫(xiě)作過(guò)程難以用語(yǔ)言來(lái)表達(dá)。歷經(jīng)了幾個(gè)月的奮戰(zhàn)，緊張而又充實(shí)的畢業(yè)設(shè)計(jì)終于落下了帷幕?；叵脒@段日子的經(jīng)歷和感受，我感慨萬(wàn)千，在這次畢業(yè)設(shè)計(jì)的過(guò)程中，我擁有了無(wú)數(shù)難忘的回憶和收獲。在與指導(dǎo)老師的交流討論，對(duì)美食網(wǎng)站界面設(shè)計(jì)進(jìn)一步規(guī)劃，我便立刻著手資料的收集工作中，當(dāng)時(shí)面對(duì)浩瀚的書(shū)海真是有些茫然，不知如何下手。在指導(dǎo)老師細(xì)心的給我列了提綱，我在圖書(shū)館搜集資料，還在網(wǎng)上查找各類(lèi)相關(guān)資料，將這些寶貴的資料全部記在筆記本上，盡量使我的資料完整、精確、數(shù)量多，這有利于論文的撰寫(xiě)。然后我將收集到的資料仔細(xì)整理分類(lèi)，及時(shí)拿給指導(dǎo)老師進(jìn)行溝通。資料查找完畢后，我開(kāi)始著手畢業(yè)設(shè)計(jì)及論文的寫(xiě)作。開(kāi)發(fā)過(guò)程中，遇到了困難，通過(guò)查閱資料得到了部分解答。在寫(xiě)作過(guò)程中遇到困難我就及時(shí)和指導(dǎo)老師聯(lián)系，并和同學(xué)互相交流。在大家的幫助下，困難一個(gè)一個(gè)解決掉，論文也慢慢成型。論文的文字?jǐn)⑹鲆呀?jīng)完成。開(kāi)始進(jìn)行美食網(wǎng)站界面設(shè)計(jì)。為了制作出自己滿意的網(wǎng)站，我仔細(xì)學(xué)習(xí)了關(guān)于網(wǎng)頁(yè)的配色、DIV+CSS的使用等知識(shí)。在設(shè)計(jì)網(wǎng)頁(yè)界面的初期，由于沒(méi)有設(shè)計(jì)經(jīng)驗(yàn)，覺(jué)得無(wú)從下手，空有很多設(shè)計(jì)思想，卻不知道應(yīng)該選哪個(gè)，通過(guò)查閱資料，逐漸確立系統(tǒng)方案。當(dāng)我終于完成了所有打字、繪圖、排版、校對(duì)的任務(wù)后整個(gè)人都很累，但同時(shí)看著電腦熒屏上的畢業(yè)設(shè)計(jì)稿件我的心里是甜的，我覺(jué)得這一切都值了。這次畢業(yè)論文的制作過(guò)程是我的一次再學(xué)習(xí)，再提高的過(guò)程。在論文中我充分地運(yùn)用了大學(xué)期間所學(xué)到的知識(shí)。通過(guò)這段時(shí)間的畢業(yè)設(shè)計(jì)，學(xué)到了、了解到了很多東西，不僅把以前所學(xué)的很多知識(shí)充分利用上了，還初步了解了HTML強(qiáng)大的數(shù)據(jù)庫(kù)開(kāi)發(fā)能力，對(duì)HTML的語(yǔ)言進(jìn)一步的了解，我體會(huì)到了網(wǎng)站開(kāi)發(fā)不僅是編程，它需要方方面面的考慮，同時(shí)也必須具備比較全面的知識(shí)。我在設(shè)計(jì)過(guò)程中遇到了許多困難，最大的問(wèn)題就在DIV浮動(dòng)上，但是在指導(dǎo)老師和同學(xué)的幫助下，再加上大量書(shū)籍的查閱，最終