目錄一、內(nèi)容簡介··············································1（一）背景與意義····················································1（二）資料收集和分析················································1（三）方案設(shè)計(jì)······················································1（四）方案的實(shí)施····················································1二、產(chǎn)品分析·············································2三、設(shè)計(jì)草圖·············································2四、設(shè)計(jì)效果圖············································2五、過程圖片··············································8六、作品圖片·············································11七、設(shè)計(jì)創(chuàng)意說明·········································13八、設(shè)計(jì)總結(jié)·············································13九、參考資料··············································14產(chǎn)品名稱西北美食網(wǎng)站一、內(nèi)容簡介（一）背景與意義西北的美食，我就有推薦啦！甘肅的飲食口味具有濃郁的高原特色和民族風(fēng)光，還有我們的蘭州清湯牛肉面、新疆大盤雞、新疆拌面、刀削面、藏包子等美食，還有肉夾饃、煎雞蛋、火腿飯奶酪雞蛋、牛筋面、雞米粥、面卷餅、雞蛋灌餅等，都是覺得美味的！蘭州地方史志家鄧明先生認(rèn)為，蘭州牛肉拉面的歷史本來一清二白。進(jìn)入20世紀(jì)90年代，隨著互聯(lián)網(wǎng)的逐步普及，以及商業(yè)目的。蘭州牛肉拉面的歷史被人為搞亂了。在蘭州拉面誕生之后200多年的歲月里，蘭州牛肉拉面以肉爛湯鮮、面質(zhì)精細(xì)而聞名，1999年被國家確定為中式三大快餐試點(diǎn)推廣品種之一，被譽(yù)為"中華第一面"。（二）資料收集和分析在我們的日常生活中，經(jīng)常會(huì)去訪問一些美食特色介紹方面的網(wǎng)站，去了解如各地不同特色菜譜、風(fēng)味美食樣式等等知識(shí)，有很好的參考借鑒價(jià)值。我的作品需要制作出具有自己獨(dú)特的風(fēng)格，需要從網(wǎng)絡(luò)上搜索相關(guān)資料，并且還通過參考馮濤、王海波主編的《網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程》（第二版）（大連理工大學(xué)出版社）和張?zhí)K中、呂威飛、尤勝編《網(wǎng)頁設(shè)計(jì)制作》（高等教育出版社）來完成制作編輯網(wǎng)站，撰寫網(wǎng)站網(wǎng)頁的文字材料。（三）方案設(shè)計(jì)本次畢業(yè)設(shè)計(jì)將制作西北美食網(wǎng)站，首先設(shè)計(jì)出網(wǎng)頁的主體效果，再運(yùn)用AdobeDreamweaverCS6軟件，動(dòng)用代碼、拆分、設(shè)計(jì)、實(shí)時(shí)視圖等多種方式來創(chuàng)作、編寫和修改網(wǎng)頁。每一張用于制作并編輯網(wǎng)站和移動(dòng)應(yīng)用程序的網(wǎng)頁設(shè)計(jì)軟件。（四）方案的實(shí)施用AdobeDreamweaverCS6軟件制作時(shí)，每張?jiān)O(shè)計(jì)制作并編輯網(wǎng)站效果圖中，包括首頁、特色菜、食材、風(fēng)味小吃上。包括的名稱、蘭州清湯牛肉面、新疆大盤雞出版社及一些圖片和背景。書脊上主要包括書的名稱內(nèi)容一些圖片和背景圖案。用AdobeDreamweaverCS6軟件播放時(shí)將作品的美食特色作為一個(gè)整體圖片一起進(jìn)行設(shè)計(jì)制作并編輯網(wǎng)站效果圖中展示。二、產(chǎn)品分析本畢業(yè)設(shè)計(jì)制作為目的。主要運(yùn)用的是AdobeDreamweaverCS6軟件依次制作出效果圖。最后用AdobeDreamweaverCS6制作并編輯網(wǎng)站將所有效果展示出來。用AdobeDreamweaverCS6制作并編輯網(wǎng)站制作的包括：我先設(shè)計(jì)西北美食節(jié)是因?yàn)槟艹栽S許多多的美食。也能品嘗各種新穎的美食。肯定能夠飽口福拉。制作過程中，需要運(yùn)用到AdobeDreamweaverCS6制作并編輯網(wǎng)站、網(wǎng)站設(shè)計(jì)代碼編輯效果等知識(shí)。用AdobeDreamweaver軟件播放時(shí)，需要添加代碼、拆分、設(shè)計(jì)、實(shí)時(shí)視圖效果瀏覽器的兼容網(wǎng)頁設(shè)計(jì)。三、設(shè)計(jì)草圖每本制作并編輯網(wǎng)站設(shè)計(jì)基本框架都相似，上面是主題西北美食，左側(cè)是特色美食、食材大全、風(fēng)味美食、專題專區(qū)、話題。中間是牛肉面、疆大盤雞。然后根據(jù)的不同內(nèi)容再加上相應(yīng)的圖案或文圖3.1編輯網(wǎng)站設(shè)計(jì)框架圖四、設(shè)計(jì)效果圖（一）“首頁”設(shè)計(jì)效果圖，如圖4.1所示圖4.1“首頁”效果圖（二）“特色菜譜”設(shè)計(jì)效果圖，如圖4.2所示圖4.2“特色菜譜”效果圖（三）“特色菜”設(shè)計(jì)效果圖，如圖4.3所示圖4.3“特色菜”效果圖（四）“食材”設(shè)計(jì)效果圖，如圖4.4所示圖4.4“食材”效果圖（五）“風(fēng)味小吃”設(shè)計(jì)效果圖，如圖4.5所示圖4.5“風(fēng)味小吃”效果圖（六）“專題”設(shè)計(jì)效果圖，如圖4.6所示圖4.6“專題”效果圖（七）“在線留言社區(qū)”設(shè)計(jì)效果圖，如圖4.7所示圖4.7“在線留言社區(qū)”效果圖（八）“話題”計(jì)效果圖，如圖4.8所示圖4.8“話題”效果圖（九）“注冊(cè)”設(shè)計(jì)效果圖，如圖4.9所示圖4.9“注冊(cè)”效果圖（十）“登錄”設(shè)計(jì)效果圖，如圖4.10所示圖4.10“登錄”效果圖（十一）“甘肅特色美食”設(shè)計(jì)代碼，如圖4.11所示圖4.11“甘肅特色美食”效果圖源代碼：<ahref="index.html">首頁</a><ahref="cp.html">特色菜</a><ahref="sc.html">食材</a><ahref="zx.html">風(fēng)味小吃</a><ahref="zt.html">專題</a><ahref="sq.html">社區(qū)</a><ahref="ht.html">話題</a><ahref="zhuce.html">注冊(cè)</a><ahref="login.html">登錄</a>（十二）“從飲食說健康”設(shè)計(jì)代碼，如圖4.12所示圖4.12“從飲食說健康”效果圖源代碼：<p>蘭州牛肉面</p><p>刀削面</p> </a></a> </li><li> <li></li><ahref="cplist01.html"><ahref="cplist02.html"><imgsrc="img/02.jpeg"/><imgsrc="img/03.png"/> <p>干拌面</p> <p>新疆小盤雞</p></a></a></li></li><li><li><ahref="cplist03.html"><ahref="cplist04.html"><imgsrc="img/11.jpg"/> <imgsrc="img/timg.jpg"/>（十三）“風(fēng)味小吃”設(shè)計(jì)代碼，如圖4.13所示圖4.13“風(fēng)味小吃”效果圖源代碼：<imgsrc="img/timg(1).jpg"/><p> </p></li><li><imgsrc="img/017.jpg"/><p>風(fēng)味小吃2</p></li><li><imgsrc="img/016.jpg"/><p>風(fēng)味小吃3</p></li></ul></div> <divclass="fxzp">五、過程圖片（一）啟動(dòng)Photoshop軟件，新建大小為401×143像素，分辨率為72像素/英寸，顏色模式為RGB，背景內(nèi)容為白色的圖像文件。如圖5.1所示。圖5.1新建文件（二）用鼠標(biāo)單擊工具箱中的移動(dòng)工具，在標(biāo)尺邊緣拖出多條輔助線，效果如圖5.2所示。（三）打開做好的素材圖片1和2，分別放到“圖層1”和“圖層2”中。改變“橡皮擦工具”的筆畫大小、不透明和筆畫硬度等，使用“橡皮擦工具”對(duì)素材進(jìn)行編輯處理。新建圖層“圖層3”，利用矩形選框工具在封面上繪制一個(gè)長方形，并填充為紅色，效果如圖5.2所示。。圖5.2底背景圖（四）關(guān)閉標(biāo)尺。新建圖層4，在制作中，繪制一個(gè)矩形，選擇“編輯”-“描邊”命令，在彈出的對(duì)話框中，設(shè)置寬度為1像素，顏色為淺灰色，效果如圖5.3所示。圖5.3西北美食中間矩形（五）選擇文字工具時(shí)，在封面上輸入“西北美食”（字體為毛筆行書，大小為36點(diǎn)），“設(shè)計(jì)”（字體為書法，大小為14點(diǎn)），“從手繪設(shè)計(jì)”（字體為書法，大小為5點(diǎn)）。制作美食面的步驟：（以制作“西北美食”為例）六、作品圖片本畢業(yè)設(shè)計(jì)總共制作了西北美食網(wǎng)站，每個(gè)都有自己的美食特色。全部制作完畢以后，以AdobeDreamweaverCS6軟件動(dòng)態(tài)展示出來（具體的展示網(wǎng)站設(shè)計(jì)代碼編輯效果見作品）。圖6.1作品展示七、設(shè)計(jì)創(chuàng)意說明設(shè)計(jì)軟件包括了AdobeDreamweaverCS6軟件和網(wǎng)頁設(shè)計(jì)軟件。用AdobeDreamweaverCS6軟件進(jìn)行美食的制作，用網(wǎng)頁設(shè)計(jì)代碼面效果圖進(jìn)行展示。在AdobeDreamweaverCS6軟件制作，運(yùn)用了軟件中大部分功能。每一個(gè)美食網(wǎng)頁設(shè)計(jì)軟件提供了一套直觀的可視界面，供您創(chuàng)建和編輯HTML網(wǎng)站和移動(dòng)應(yīng)用程序。使用專為跨平臺(tái)兼容性設(shè)計(jì)的自適應(yīng)網(wǎng)格版面創(chuàng)建適應(yīng)性版面。在發(fā)布前使用多屏幕預(yù)覽審閱設(shè)計(jì)。八、設(shè)計(jì)總結(jié)：歷經(jīng)了三個(gè)月的奮戰(zhàn)，我的畢業(yè)設(shè)計(jì)終于完成了。回想這段日子的經(jīng)歷和感受，讓我感慨萬千，在這次畢業(yè)設(shè)計(jì)的過程中，我努力和精心制作，學(xué)習(xí)了Photoshop.exe、flash、AdobeDreamweaverCS6等網(wǎng)頁軟件的應(yīng)用。通過這次設(shè)計(jì)使我明白了自己基本的知識(shí)還比較欠缺，要學(xué)習(xí)的東西還很多，終于使我對(duì)自己現(xiàn)在有了掌握。在以后