文档介绍：.
.
涉外经济学院
课程设计报告
课程名称：网页设计
报告题目："舌尖上的中国〞网页设计报告
学生： ***
所在学院：信息科学与工程学院
专业班级：电商本2015**班
学生学号：**
指导教师：*** deon HD 7450M+Inter GMA HD 4000
2〕软件环境：
操作系统：预装Windows8
应用软件：Dreamweaver、Fireworks、PS、Flash
有实验证明，色彩美丽、造型别致的食物往往能更好的增进食欲。色彩是人的视觉最敏感的东西。本所有网页主要以暖色调的颜色为主。主要以白色和淡粉色搭配，色彩明亮，不昏暗，当造型别致的美食有了明亮的色彩点缀，不经意间又为美食加了一份色彩。当我挑选的美食图片颜色不够完美时，我就在页面的其他局部做一下稍微的调整，不会让整个页面看起来过于暗沉。
本主要包括七个主题以及三个次要局部。每个主题都各有自己的特色，一般来说，都是图片配文字。有介绍美食的、有介绍美食做法的，个个不一。如图1，就是本网页的目录构造图。
目录构造图
三、 实现过程
具体操作步骤如下：
1〕翻开Dreamweaver，在上面的选择菜单中选择"站点〞,在选择新建站点；
.
.
2〕给新站点命名，另外选择本地站点的文件夹，：
目录构造图
在站点文件夹中新建"css〞文件夹、"js〞文件夹、"images〞文件夹，分别保存css样式文件、javascript特效文件和图片文件，而所有的网页直接保存在站点下，。
在此过程中特别要注意的是：所有文件的路径和文件名中不能出现中文字符，否那么相关容不能正常显示。
1)首页效果图
，分为四局部，分别是头部、主体、和版本说明，其中头部有flash设计的logo；主体局部分为导航和网页容，其中导航菜单表达了整个的栏目构造，包括：自然的馈赠、主食的故事、转化的灵感、时间的味道、厨房的秘密、五位的调和、我们的田野，本就是围绕这几个模块展开的；版本说明介绍了设计者的个人信息。
首页效果图
2) 首页构造框图
首页构造框图如图3-3所示，是通过盒子与盒子的嵌套关系实现的。
首页构造框图
div代码如下：
<div id="container">
<div id="header">
<div id="logo">logo</div>
<div id="right">图片</div></div>
<div id="nav">导航</div>
<div id="content">
<div id="menu">
<div id="menu_top">图片</div>
<div id="menu_cd">菜单</div></div>
<div id="main">主体</div></div>
<div id="footer">说明</div></div>
其具体css样式请查看附录1。
3)logo的设计
logo
Logo使用Flash进展设计成gif动画效果，制作步骤如下:
· 把所需要的三图片导入到库，并转换成元件，把元件大小改为和logo盒子大小一致。
.
.
· 把场景也改为和logo盒子大小一致的大小。
· 第一帧把第一个元件拉到场景里，定位；设第二十帧为关键帧，把第二个元件拖到场景里，定位；设第三十帧为关键帧，把第三个元件拖到场景里，定位，中间设为传统补间，导出gif动画。
在网页中，我采用"插入|图片〞的方式，将gif动画图片插入在指定的位置。
注意：，那么在网页中<embed src=></embed>实现。
4〕轮换图设计
步骤1. 将"js〞文件夹复制到站点下，在html的head标签引入相关文件
…………………
步骤2. 创立html构造，并填充你的容
……………
……………
3."自然的馈赠〞页面
"自然的馈赠〞页面
界面如上所示，采用的是和首页一样的模板，Header、Nav以及Footer局部都是一样的样式，只是网页中间的Content局部不一样，在本页中，我将六美食的图片以三行两列显示，图片下方用灰色字体说明美食的名称，图片和文字均建立了超，单击任意图片，可以进入相应美食的介绍页面。
在设计时，我遇到的问题是，每图片都有边框，后来我在css文件中写上：
img{ border:0px;}
就去掉了图片的边框，使页面