网页课程设计报告例子

湖南涉外经济学院

课程设计报告

课程名称：网页设计

报告题目：“舌尖上的中国”网页设计报告学生姓名： *** 所在学院：信息科学与工程学院

专业班级：电商本2015**班

学生学号： * * 指导教师： ***

2016年6 月24 日

课程设计任务书

摘要

《舌尖上的中国》是中国中央电视台播出的美食类纪录片，主要内容为中国各地美食生态。通过中华美食的多个侧面，来展现食物给中国人生活带来的仪式、伦理等方面的文化；见识中国特色食材以及构成中国美食特有气质的一系列元素；了解中华饮食文化的精致和源远流长。该片的重要主题是“变”，向观众展示传统农耕的中国，同时也告诉观众很多中国传统正在改变。这不仅仅是在拍摄美食，更是在拍摄承载中国人精神的食物。本网站介绍了中国各地美食，网页是根据《舌尖上的中国》这档节目中的七个主题来设计的。分别为：自然地馈赠、主食的故事、转化的灵感、时间的味道、厨房的秘密、五味的调和、我们的田野。本站的建立使用了Fireworks、Flash和Dreamweaver网页制作工具。采用HTML 语言、CSS样式、Javascript脚本语言编写网页，最终使静态页面也有丰富多彩的视觉效果；另外又使用了网页特效，赋予了其他页面动态之美，动静结合，主题突出，吸引浏览者的目光。

关键词：中国；美食；文化

内容包括：1.为什么要设计该网站？

2.本网站包含什么内容？采用了什么技术实现

3.建立本网站可以达到什么效果？

目录

一、作品简介 (1)

二、设计方案 (1)

1. 软硬件环境 (1)

2. 色彩方案 (1)

3. 目录结构图 (1)

三、实现过程 (2)

1. 创建本地站点 (2)

2. 首页 (3)

3. “自然的馈赠”页面 (5)

4. “主食的故事”页面 (6)

5. “**”页面 (6)

6. 申请域名，发布网站 (8)

四、结论与心得 (8)

五、参考文献 (8)

附录 (1)

一、作品简介

本作品其主要内容是关于中国各色美食的讲解。中国文化博大精深，当然其中也包含饮食文化。本网站通过中华美食的多个侧面，来展现食物给中国人生活带来的仪式、伦理等方面的文化。以美食作为窗口，让海内外观众领略中华饮食之美。进而感知中国的文化传统和社会变迁。不仅这样，还展示了普通中国人的人生百味，展示的是人和食物之间的故事，透过美食来看社会。我个人爱好看美食节目，了解各类美食。想通过本网站向社会展示中国各地特色美食，更加了解中国那博大精深的美食文化。

二、设计方案

1. 软硬件环境

1）硬件环境：

CPU型号：Inter酷睿i3

CPU主频：1.8GHz

内存容量：2GB

硬盘容量：500GB

显卡芯片：AMD Radeon HD 7450M+Inter GMA HD 4000

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代码如下：

logo

图片

导航

图片

菜单

主体

版权说明

其具体css样式请查看附录1。

3)logo的设计

图3.4 logo