..涉外經(jīng)濟(jì)學(xué)院課程設(shè)計(jì)報告課程名稱：網(wǎng)頁設(shè)計(jì)報告題目："舌尖上的中國〞網(wǎng)頁設(shè)計(jì)報告學(xué)生：***所在學(xué)院：信息科學(xué)與工程學(xué)院專業(yè)班級：電商本2015**班學(xué)生學(xué)號：**指導(dǎo)教師：***2016年6月24日..課程設(shè)計(jì)任務(wù)書報告題目"********〞設(shè)計(jì)報告完成時間2016.6.24學(xué)生***專業(yè)班級電子商務(wù)本***指導(dǎo)教師***職稱***總體設(shè)計(jì)要求和技術(shù)要點(diǎn)圍繞本課程的教育目標(biāo)，根據(jù)課程的教學(xué)大綱和教材容，結(jié)合在生產(chǎn)、科研、管理、教學(xué)以及日常生活等各個領(lǐng)域的應(yīng)用都可作為課程設(shè)計(jì)的容。例如可以選擇制作求職網(wǎng)、個人、公司、娛樂性、旅游、花卉市場、團(tuán)購等類型；原那么上設(shè)計(jì)題目自己設(shè)定，但需要通過指導(dǎo)教師認(rèn)可。設(shè)計(jì)的具體容和要求包括：1、使用HTML5編輯網(wǎng)頁的框架和主體容,采用DIV嵌套布局頁面；2、使用CSS3代碼來設(shè)計(jì)網(wǎng)頁的風(fēng)格，統(tǒng)一整個網(wǎng)頁的視覺效果；3、使用JAVASCRIPT來增加網(wǎng)頁互動效果；4、站點(diǎn)設(shè)計(jì)合理、管理有序、無多余文件和文件夾，首頁用index.htm命名，且在站點(diǎn)根目錄下；5、站點(diǎn)至少要有兩層構(gòu)造，總頁面數(shù)不得少于10頁；6、網(wǎng)頁要有頭部、導(dǎo)航、主體、說明；7、選擇適宜軟件自己設(shè)計(jì)包含動畫的logo；8、用PHOTOSHOP或者FIREWORKS設(shè)計(jì)首頁效果圖，根據(jù)效果圖進(jìn)展頁面設(shè)計(jì)；9、與網(wǎng)頁風(fēng)格應(yīng)該協(xié)調(diào)一致，構(gòu)造應(yīng)層次清楚，容重點(diǎn)突出，頁面設(shè)計(jì)要符合追求色彩的搭配、布局和合理性，以及要有一定的創(chuàng)意；10、各個頁面之間的要合理有效，路徑要正確〔相對路徑〕；11、代碼構(gòu)造清晰，無垃圾代碼；12、申請域名，發(fā)布。工作容及時間進(jìn)度安排1、確定主題、搜集資料2、確定站點(diǎn)目錄構(gòu)造圖、布局方案3、設(shè)計(jì)首頁效果圖，并根據(jù)效果圖用DREAMWEAVER設(shè)計(jì)頁面4、設(shè)計(jì)其余頁面5、動畫設(shè)計(jì)，美化頁面6、增加網(wǎng)頁特效7、整體調(diào)試并修改完善8、申請域名，發(fā)布9、撰寫報告10、辯論，提交報告課程設(shè)計(jì)成果1．與設(shè)計(jì)容對應(yīng)的2．課程設(shè)計(jì)報告摘要"舌尖上的中國"是中國中央電視臺播出的美食類紀(jì)錄片，主要容為中國各地美食生態(tài)。通過中華美食的多個側(cè)面，來展現(xiàn)食物給中國人生活帶來的儀式、倫理等方面的文化；見識中國特色食材以及構(gòu)成中國美食特有氣質(zhì)的一系列元素；了解中華飲食文化的精致和源遠(yuǎn)流長。該片的重要主題是"變〞，向觀眾展示傳統(tǒng)農(nóng)耕的中國，同時也告訴觀眾很多中國傳統(tǒng)正在改變。這不僅僅是在拍攝美食，更是在拍攝承載中國人精神的食物。本介紹了中國各地美食，網(wǎng)頁是根據(jù)"舌尖上的中國"這檔節(jié)目中的七個主題來設(shè)計(jì)的。分別為：自然地饋贈、主食的故事、轉(zhuǎn)化的靈感、時間的味道、廚房的秘密、五味的調(diào)和、我們的田野。本站的建立使用了Fireworks、Flash和Dreamweaver網(wǎng)頁制作工具。采用HTML語言、CSS樣式、Javascript腳本語言編寫網(wǎng)頁，最終使靜態(tài)頁面也有豐富多彩的視覺效果；另外又使用了網(wǎng)頁特效，賦予了其他頁面動態(tài)之美，動靜結(jié)合，主題突出，吸引瀏覽者的目光。關(guān)鍵詞：中國；美食；文化容包括：1.為什么要設(shè)計(jì)該？2.本包含什么容？采用了什么技術(shù)實(shí)現(xiàn)3.建立本可以到達(dá)什么效果？..目錄TOC\o"1-2"\h\z\u一、作品簡介1二、設(shè)計(jì)方案11.軟硬件環(huán)境12.色彩方案13.目錄構(gòu)造圖1三、實(shí)現(xiàn)過程21.創(chuàng)立本地站點(diǎn)22.首頁33."自然的饋贈〞頁面54."主食的故事〞頁面65."**〞頁面66.申請域名，發(fā)布8四、結(jié)論與心得8五、參考文獻(xiàn)8附錄1..一、作品簡介本作品其主要容是關(guān)于中國各色美食的講解。中國文化博大精深，當(dāng)然其中也包含飲食文化。本通過中華美食的多個側(cè)面，來展現(xiàn)食物給中國人生活帶來的儀式、倫理等方面的文化。以美食作為窗口，讓海外觀眾領(lǐng)略中華飲食之美。進(jìn)而感知中國的文化傳統(tǒng)和社會變遷。不僅這樣，還展示了普通中國人的人生百味，展示的是人和食物之間的故事，透過美食來看社會。我個人愛好看美食節(jié)目，了解各類美食。想通過本向社會展示中國各地特色美食，更加了解中國那博大精深的美食文化。二、設(shè)計(jì)方案1.軟硬件環(huán)境1〕硬件環(huán)境：CPU型號：Inter酷睿i3CPU主頻：1.8GHz存容量：2GB硬盤容量：500GB顯卡芯片：AMDRadeonHD7450M+InterGMAHD40002〕軟件環(huán)境：操作系統(tǒng)：預(yù)裝Windows8應(yīng)用軟件：Dreamweaver、Fireworks、PS、Flash2.色彩方案有實(shí)驗(yàn)證明，色彩美麗、造型別致的食物往往能更好的增進(jìn)食欲。色彩是人的視覺最敏感的東西。本所有網(wǎng)頁主要以暖色調(diào)的顏色為主。主要以白色和淡粉色搭配，色彩明亮，不昏暗，當(dāng)造型別致的美食有了明亮的色彩點(diǎn)綴，不經(jīng)意間又為美食加了一份色彩。當(dāng)我挑選的美食圖片顏色不夠完美時，我就在頁面的其他局部做一下稍微的調(diào)整，不會讓整個頁面看起來過于暗沉。3.目錄構(gòu)造圖本主要包括七個主題以及三個次要局部。每個主題都各有自己的特色，一般來說，都是圖片配文字。有介紹美食的、有介紹美食做法的，個個不一。如圖1，就是本網(wǎng)頁的目錄構(gòu)造圖。圖2.1目錄構(gòu)造圖三、實(shí)現(xiàn)過程1.創(chuàng)立本地站點(diǎn)具體操作步驟如下：1〕翻開Dreamweaver，在上面的選擇菜單中選擇"站點(diǎn)〞,在選擇新建站點(diǎn)；2〕給新站點(diǎn)命名，另外選擇本地站點(diǎn)的文件夾，如圖3.1：圖3.1目錄構(gòu)造圖在站點(diǎn)文件夾中新建"css〞文件夾、"js〞文件夾、"images〞文件夾，分別保存css樣式文件、javascript特效文件和圖片文件，而所有的網(wǎng)頁直接保存在站點(diǎn)下，其中首頁名為index.html。在此過程中特別要注意的是：所有文件的路徑和文件名中不能出現(xiàn)中文字符，否那么相關(guān)容不能正常顯示。2.首頁1)首頁效果圖首頁效果圖如圖3.2所示，分為四局部，分別是頭部、主體、和版本說明，其中頭部有flash設(shè)計(jì)的logo；主體局部分為導(dǎo)航和網(wǎng)頁容，其中導(dǎo)航菜單表達(dá)了整個的欄目構(gòu)造，包括：自然的饋贈、主食的故事、轉(zhuǎn)化的靈感、時間的味道、廚房的秘密、五位的調(diào)和、我們的田野，本就是圍繞這幾個模塊展開的；版本說明介紹了設(shè)計(jì)者的個人信息。圖3.2首頁效果圖2)首頁構(gòu)造框圖首頁構(gòu)造框圖如圖3-3所示，是通過盒子與盒子的嵌套關(guān)系實(shí)現(xiàn)的。圖3.3首頁構(gòu)造框圖div代碼如下：<divid="container"><divid="header"><divid="logo">logo</div><divid="right">圖片</div></div><divid="nav">導(dǎo)航</div><divid="content"><divid="menu"><divid="menu_top">圖片</div><divid="menu_cd">菜單</div></div><divid="main">主體</div></div><divid="footer">說明</div></div>其具體css樣式請查看附錄1。3)logo的設(shè)計(jì)圖3.4logoLogo使用Flash進(jìn)展設(shè)計(jì)成gif動畫效果，制作步驟如下:·把所需要的三圖片導(dǎo)入到庫，并轉(zhuǎn)換成元件，把元件大小改為和logo盒子大小一致?！ぐ褕鼍耙哺臑楹蚻ogo盒子大小一致的大小?！さ谝粠训谝粋€元件拉到場景里，定位；設(shè)第二十幀為關(guān)鍵幀，把第二個元件拖到場景里，定位；設(shè)第三十幀為關(guān)鍵幀，把第三個元件拖到場景里，定位，中間設(shè)為傳統(tǒng)補(bǔ)間，導(dǎo)出gif動畫。在網(wǎng)頁中，我采用"插入|圖片〞的方式，將gif動畫圖片插入在指定的位置。注意：如果插入的是.swf文件，那么在網(wǎng)頁中<embedsrc=></embed>實(shí)現(xiàn)。4〕輪換圖設(shè)計(jì)步驟1.將"js〞文件夾復(fù)制到站點(diǎn)下，在html的head標(biāo)簽引入相關(guān)文件…步驟2.創(chuàng)立html構(gòu)造，并填充你的容…………3."自然的饋贈〞頁面圖3.5"自然的饋贈〞頁面界面如上所示，采用的是和首頁一樣的模板，Header、Nav以及Footer局部都是一樣的樣式，只是網(wǎng)頁中間的Content局部不一樣，在本頁中，我將六美食的圖片以三行兩列顯示，圖片下方用灰色字體說明美食的名稱，圖片和文字均建立了超，單擊任意圖片，可以進(jìn)入相應(yīng)美食的介紹頁面。在設(shè)計(jì)時，我遇到的問題是，每圖片都有邊框，后來我在css文件中寫上：img{border:0px;}就去掉了圖片的邊框，使頁面更美觀。4."主食的故事〞頁面仿照"自然的饋贈〞頁面，容包括：界面、文字描述界面容和特效、遇到的問題、如何解決的、本網(wǎng)頁的特色。5."**〞頁面…………遇到的問題寫法：1〕定位：我做網(wǎng)頁的遇到的最大問題就是定位的問題。例如我網(wǎng)頁中的主食的故事所遇到的問題如圖3-9；圖3.9修改前問題圖修改后的效果圖如圖3.10圖3.10修改后效果圖我是通過修改代碼實(shí)現(xiàn)的。首先固定整個盒子的寬，把第一個盒子〔side-box〕設(shè)定為左浮動，另外，把第二個盒子〔side-box1〕附加一個樣式，讓第二個盒子在服從第一個盒子的樣式之后，還多服從一個從右浮動的樣式。Css代碼如下：#side-box{float：left；}#side-box1{float：right；}2〕側(cè)邊欄的不對稱問題。之前全班一起做綜合案例時，我那時的側(cè)邊欄沒出問題，這次自己做網(wǎng)頁時，側(cè)邊欄出現(xiàn)了幾次問題。每次檢查出來就是css樣式不對，當(dāng)自己做網(wǎng)頁習(xí)慣自己敲代碼時，認(rèn)真的檢查css樣式代碼是成功的關(guān)鍵。另外，每一個盒子之間的距離需要用fireworks準(zhǔn)確的量出來，不能憑感覺。如下列圖，圖3.11修改后效果圖圖3.12修改后效果圖3〕我的首頁是用的一個對圖片有切片效果的特效，經(jīng)過上面的圖片時，隱藏在下面的圖片會顯現(xiàn)出來。在首頁的下面，有一個查詢按鈕，我以為給按鈕設(shè)超的方式和給圖片設(shè)超的方式一樣，事實(shí)不是這樣的。要設(shè)置成這樣的：<inputtype="submit"value="查詢"onClick="window.location.href='index.html'"class="chaxun"/>4〕每當(dāng)我網(wǎng)頁的盒子嵌套關(guān)系越來越多時，伴隨的不是網(wǎng)頁快成功的自豪感，而是越來越多的的問題。例如最簡單的，本來設(shè)計(jì)的效果是說明放在網(wǎng)頁末尾的，但是由于中間的div盒子嵌套關(guān)系不對，就出現(xiàn)了footer盒子往上跑的問題。之后我就應(yīng)用源格式檢查，少了兩個div完畢標(biāo)記。如圖3.13：圖3.13盒子錯位圖6.申請域名，發(fā)布……………………四、結(jié)論與心得1.總結(jié)本特色網(wǎng)頁分七個主題來介紹。層次明了，構(gòu)造清晰，首頁里垂直排列的菜單就給人以舒暢的感覺。………2.個人總結(jié)…………………..在本次課程設(shè)計(jì)的整個過程中，……五、參考文獻(xiàn)[1]席金菊,何碧英編著.網(wǎng)頁設(shè)計(jì)與制作[M].:科學(xué),2015[2]………...附錄附錄1#container{width:890px;margin-top:0;margin-right:auto;margin-bottom:0;margin-left:auto;}#header{height:273px;padding-bottom:0px;}#header#logo{background-color:#CCC;float:left;height:273px;width:273px;}#header#right{height:273px;}#nav{background-color:#DEE6B3;height:35px;width:890px;}#navulli{font-size:16px;color:#B57F46;float:right;list-style-type:none;margin-top:5px;position:relative;}#content{height:525px;width:890px;}#content#menu{float:left;height:525px;width:185px;background-image:url(../images/menubg.jpg);background-repeat:repeat-y;}#content#menu#menu_cdulli{font-size:20px;list-style-type:none;height:27px;padding-left:20px;padding-top:20px;width:145px;padding-right:20px;margin-left:-42px;text-align:center;position:relative;float:right;background-image:url(../images/menu.gif);background-repeat:no-repeat;}#content#menu#menu_cdullia{font-size:18px;color:#d90000;text-decoration:none;display:block;font-weight:bold;}#content#menu#menu_cdulliul{display:none;position:absolute;margin-left:90px;margin-top:-45px;}#content#menu#menu_cdulliulli{margin-left:34px;border:1pxsolid#CFF;background-color:#DEE6B3;}#content#menu#menu_cdullia:hover{color:#0FF;}#content#main{height:525px;width:705px;float:right;}.box_con{float:right;height:275px;width:705px;}.box_condldt{float:left;padding:1px;border:1pxsolid#d8d8d8;}.box_condldd{float:right;width:188px;color:#ba8c68;line-height:1.5;}#content#main#main_top{background-color:#339;height:275px;}#content#menu#menu_cdulli:hoverul{display:block;}#footer{text-align:center;}#footerdldt{height:28px;line-height:28px;background:#DEE6B3;color:#fff;}#footerdldta{font-weight:bold;color:#B57F46;}#footerdldd{padding:8px0;color:#666;line-height:2;}注意：css采用行格式顯示附錄2Css代碼:body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}ul,ol,li{list-style:none;}input,button{margin:0;font-size:12px;vertical-align:middle;}body{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#333;margin:0auto;}table{border-collapse:collapse;border-spacing:0;}a{color:#333;text-decoration:none;}a:hover{text-decoration:none;}.box01{width:1000px;margin:50pxauto;position:relative;}.box01li{float:left;width:180px