精選優質文檔-----傾情為你奉上

精選優質文檔-----傾情為你奉上

專心---專注---專業

專心---專注---專業

精選優質文檔-----傾情為你奉上

專心---專注---專業

湖南涉外經濟學院

課程設計報告

課程名稱：網頁設計

報告題目：“舌尖上的中國”網頁設計報告

學生姓名：***

所在學院：信息科學與工程學院

專業班級：電商本2015**班

學生學號：**

指導教師：***

2016年6月24日

課程設計任務書

報告題目

“********”設計報告

完成時間

2016.

6.24

學生姓名

***

專業班級

電子商務本***

指導教師

***

職稱

***

總體設計要求和技術要點

圍繞本課程的教育目標，根據課程的教學大綱和教材內容，結合網站在生產、科研、管理、教學以及日常生活等各個領域的應用都可作為課程設計的內容。例如可以選擇制作求職網、個人網站、公司網站、娛樂性網站、旅游網站、花卉市場、團購網站等類型網站；原則上設計題目自己設定，但需要通過指導老師認可。設計的具體內容和要求包括：

1、使用HTML5編輯網頁的框架和主體內容,采用DIV嵌套布局頁面；

2、使用CSS3代碼來設計網頁的風格，統一整個網頁的視覺效果；

3、使用JAVASCRIPT來增加網頁互動效果；

4、站點設計合理、管理有序、無多余文件和文件夾，首頁用index.htm命名，且在站點根目錄下；

5、站點至少要有兩層結構，總頁面數不得少于10頁；

6、網頁要有頭部、導航、主體、版權說明；

7、選擇合適軟件自己設計包含動畫的網站logo；

8、用PHOTOSHOP或者FIREWORKS設計首頁效果圖，根據效果圖進行頁面設計；

9、網站與網頁風格應該協調一致，網站結構應層次分明，內容重點突出，頁面設計要符合追求色彩的搭配、布局和合理性，以及要有一定的創意；

10、各個頁面之間的鏈接要合理有效，路徑要正確（相對路徑）；

11、代碼結構清晰，無垃圾代碼；

12、申請域名，發布網站。

工作內容及時間進度安排

1、確定網站主題、搜集資料

2、確定站點目錄結構圖、布局方案

3、設計首頁效果圖，并根據效果圖用DREAMWEAVER設計頁面

4、設計其余頁面

5、動畫設計，美化頁面

6、增加網頁特效

7、網站整體調試并修改完善

8、申請域名，發布網站

9、撰寫報告

10、答辯，提交報告

課程設計成果

1．與設計內容對應的網站

2．課程設計報告

摘要

《舌尖上的中國》是中國中央電視臺播出的美食類紀錄片，主要內容為中國各地美食生態。通過中華美食的多個側面，來展現食物給中國人生活帶來的儀式、倫理等方面的文化；見識中國特色食材以及構成中國美食特有氣質的一系列元素；了解中華飲食文化的精致和源遠流長。該片的重要主題是“變”，向觀眾展示傳統農耕的中國，同時也告訴觀眾很多中國傳統正在改變。這不僅僅是在拍攝美食，更是在拍攝承載中國人精神的食物。本網站介紹了中國各地美食，網頁是根據《舌尖上的中國》這檔節目中的七個主題來設計的。分別為：自然地饋贈、主食的故事、轉化的靈感、時間的味道、廚房的秘密、五味的調和、我們的田野。本站的建立使用了Fireworks、Flash和Dreamweaver網頁制作工具。采用HTML語言、CSS樣式、Javascript腳本語言編寫網頁，最終使靜態頁面也有豐富多彩的視覺效果；另外又使用了網頁特效，賦予了其他頁面動態之美，動靜結合，主題突出，吸引瀏覽者的目光。

關鍵詞：中國；美食；文化

內容包括：1.為什么要設計該網站？

2.本網站包含什么內容？采用了什么技術實現

3.建立本網站可以達到什么效果？

目錄

TOC\o"1-2"\h\z\u

一、作品簡介

本作品其主要內容是關于中國各色美食的講解。中國文化博大精深，當然其中也包含飲食文化。本網站通過中華美食的多個側面，來展現食物給中國人生活帶來的儀式、倫理等方面的文化。以美食作為窗口，讓海內外觀眾領略中華飲食之美。進而感知中國的文化傳統和社會變遷。不僅這樣，還展示了普通中國人的人生百味，展示的是人和食物之間的故事，透過美食來看社會。我個人愛好看美食節目，了解各類美食。想通過本網站向社會展示中國各地特色美食，更加了解中國那博大精深的美食文化。

二、設計方案

1.軟硬件環境

1）硬件環境：

CPU型號：Inter酷睿i3

CPU主頻：1.8GHz

內存容量：2GB

硬盤容量：500GB

顯卡芯片：AMDRadeonHD7450M+InterGMAHD4000

2）軟件環境：

操作系統：預裝Windows8

應用軟件：Dreamweaver、Fireworks、PS、Flash

2.色彩方案

有實驗證明，色彩美麗、造型別致的食物往往能更好的增進食欲。色彩是人的視覺最敏感的東西。本網站所有網頁主要以暖色調的顏色為主。主要以白色和淡粉色搭配，色彩明亮，不昏暗，當造型別致的美食有了明亮的色彩點綴，不經意間又為美食加了一份色彩。當我挑選的美食圖片顏色不夠完美時，我就在頁面的其他部分做一下稍微的調整，不會讓整個頁面看起來過于暗沉。

3.目錄結構圖

本網站主要包括七個主題以及三個次要部分。每個主題都各有自己的特色，一般來說，都是圖片配文字。有介紹美食的、有介紹美食做法的，個個不一。如圖1，就是本網頁的目錄結構圖。

圖2.1目錄結構圖

三、實現過程

1.創建本地站點

具體操作步驟如下：

1）打開Dreamweaver，在上面的選擇菜單中選擇“站點”,在選擇新建站點；

2）給新站點命名，另外選擇本地站點的文件夾，如圖3.1：

圖3.1目錄結構圖

在站點文件夾中新建“css”文件夾、“js”文件夾、“images”文件夾，分別保存css樣式文件、javascript特效文件和圖片文件，而所有的網頁直接保存在站點下，其中首頁名為index.html。

在此過程中特別要注意的是：所有文件的路徑和文件名中不能出現中文字符，否則相關內容不能正常顯示。

2.首頁

1)首頁效果圖

首頁效果圖如圖3.2所示，分為四部分，分別是頭部、主體、和版本說明，其中頭部有flash設計的網站logo；主體部分分為導航和網頁內容，其中導航菜單體現了整個網站的欄目結構，包括：自然的饋贈、主食的故事、轉化的靈感、時間的味道、廚房的秘密、五位的調和、我們的田野，本網站就是圍繞這幾個模塊展開的；版本說明介紹了設計者的個人信息。

圖3.2首頁效果圖

2)首頁結構框圖

首頁結構框圖如圖3-3所示，是通過盒子與盒子的嵌套關系實現的。

圖3.3首頁結構框圖

div代碼如下：

<divid="container">

<divid="header">

<divid="logo">logo</div>

<divid="right">圖片</div></div>

<divid="nav">導航</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的設計

圖3.4logo

Logo使用Flash進行設計成gif動畫效果，制作步驟如下:

·把所需要的三張圖片導入到庫，并轉換成元件，把元件大小改為和logo盒子大小一致。

·把場景也改為和logo盒子大小一致的大小。

·第一幀把第一個元件拉到場景里，定位；設第二十幀為關鍵幀，把第二個元件拖到場景里，定位；設第三十幀為關鍵幀，把第三個元件拖到場景里，定位，中間設為傳統補間，導出gif動畫。

在網頁中，我采用“插入|圖片”的方式，將gif動畫圖片插入在指定的位置。

注意：如果插入的是.swf文件，則在網頁中<embedsrc=></embed>實現。

4）輪換圖設計

步驟1.將“js”文件夾復制到站點下，在html的head標簽內引入相關文件

…

步驟2.創建html結構，并填充你的內容

……………

……………

3.“自然的饋贈”頁面

圖3.5“自然的饋贈”頁面

界面如上所示，采用的是和首頁相同的模板，Header、Nav以及Footer部分都是一樣的樣式，只是網頁中間的Content部分不一樣，在本頁中，我將六張美食的圖片以三行兩列顯示，圖片下方用灰色字體表明美食的名稱，圖片和文字均建立了超鏈接，單擊任意圖片，可以進入相應美食的介紹頁面。

在設計時，我遇到的問題是，每張圖片都有邊框，后來我在css文件中寫上：

img{border:0px;}

就去掉了圖片的邊框，使頁面更美觀。

4.“主食的故事”頁面

仿照“自然的饋贈”頁面，內容包括：界面、文字描述界面內容和特效、遇到的問題、如何解決的、本網頁的特色。

..................

5.“**”頁面

…………

遇到的問題寫法：

1）定位：我做網頁的遇到的最大問題就是定位的問題。例如我網頁中的主食的故事所遇到的問題如圖3-9；

圖3.9修改前問題圖

修改后的效果圖如圖3.10

圖3.10修改后效果圖

我是通過修改代碼實現的。首先固定整個盒子的寬，把第一個盒子（side-box）設定為左浮動，另外，把第二個盒子（side-box1）附加一個樣式，讓第二個盒子在服從第一個盒子的樣式之后，還多服從一個從右浮動的樣式。Css代碼如下：#side-box{float：left；}#side-box1{float：right；}

2）側邊欄的不對稱問題。之前全班一起做綜合案例時，我那時的側邊欄沒出問題，這次自己做網頁時，側邊欄出現了幾次問題。每次檢查出來就是css樣式不對，當自己做網頁習慣自己敲代碼時，認真的檢查css樣式代碼是成功的關鍵。另外，每一個盒子之間的距離需要用fireworks準確的量出來，不能憑感覺。如下圖，

圖3.11修改后效果圖圖3.12修改后效果圖

3）我的首頁是用的一個對圖片有切片效果的特效，經過上面的圖片時，隱藏在下面的圖片會顯現出來。在首頁的下面，有一個查詢按鈕，我以為給按鈕設超鏈接的方式和給圖片設超鏈接的方式一樣，事實不是這樣的。要設置成這樣的：

<inputtype="submit"value="查詢"onClick="window.location.href='index.html'"class="chaxun"/>

4）每當我網頁的盒子嵌套關系越來越多時，伴隨的不是網頁快成功的自豪感，而是越來越多的的問題。例如最簡單的，本來設計的效果是版權說明放在網頁末尾的，但是由于中間的div盒子嵌套關系不對，就出現了footer盒子往上跑的問題。之后我就應用源格式檢查，少了兩個div結束標記。如圖3.13：

圖3.13盒子錯位圖

6.申請域名，發布網站

…………

…………

四、結論與心得

1.總結本網站特色

網頁分七個主題來介紹。層次明了，結構清晰，首頁里垂直排列的菜單就給人以舒暢的感覺。…………

……………

2.個人總結

…………………..

在本次課程設計的整個過程中，…………...................

…………

五、參考文獻

[1]席金菊,何碧英編著.網頁設計與制作[M].北京:科學出版社,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采用行格式顯示

附錄2

Css代碼:

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;text-align: