《网页课程设计报告例子》由会员分享，可在线阅读，更多相关《网页课程设计报告例子（17页珍藏版）》请在金锄头文库上搜索。
1、湖南涉外经济学院课程设计报告课程名称： 网页设计 报告题目：“舌尖上的中国”网页设计报告学生姓名： * 所在学院： 信息科学与工程学院 专业班级： 电商本2015*班 学生学号： * * 指导教师： * 2016年 6 月 24 日课程设计任务书报告题目“*”设计报告完成时间2016.6.24学生姓名*专业班级电子商务本*指导教 师*职称*总体设计要求和技术要点围绕本课程的教育目标，根据课程的教学大纲和教材内容，结合网站在生产、科研、管理、教学以及日常生活等各个领域的应用都可作为课程设计的内容。例如可以选择制作求职网、个人网站、公司网站、娱乐性网站、旅游网站、花卉市场、团购网站等类型网站；原则
2、上设计题目自己设定，但需要通过指导老师认可。设计的具体内容和要求包括：1、使用HTML5编辑网页的框架和主体内容,采用DIV嵌套布局页面；2、使用CSS3代码来设计网页的风格，统一整个网页的视觉效果；3、使用JAVASCRIPT来增加网页互动效果；4、站点设计合理、管理有序、无多余文件和文件夹，首页用index.htm命名，且在站点根目录下；5、站点至少要有两层结构，总页面数不得少于10页； 6、网页要有头部、导航、主体、版权说明；7、选择合适软件自己设计包含动画的网站logo；8、用PHOTOSHOP或者FIREWORKS设计首页效果图，根据效果图进行页面设计；9、网站与网页风格应该协调一致
3、，网站结构应层次分明，内容重点突出，页面设计要符合追求色彩的搭配、布局和合理性，以及要有一定的创意；10、各个页面之间的链接要合理有效，路径要正确（相对路径）；11、代码结构清晰，无垃圾代码；12、申请域名，发布网站。工作内容及时间进度安排1、确定网站主题、搜集资料2、确定站点目录结构图、布局方案3、设计首页效果图，并根据效果图用DREAMWEAVER设计页面4、设计其余页面5、动画设计，美化页面6、增加网页特效7、网站整体调试并修改完善8、申请域名，发布网站9、撰写报告10、答辩，提交报告课程设计成果1与设计内容对应的网站2课程设计报告摘 要舌尖上的中国是中国中央电视台播出的美食类纪录片，主
4、要内容为中国各地美食生态。通过中华美食的多个侧面，来展现食物给中国人生活带来的仪式、伦理等方面的文化；见识中国特色食材以及构成中国美食特有气质的一系列元素；了解中华饮食文化的精致和源远流长。该片的重要主题是“变”，向观众展示传统农耕的中国，同时也告诉观众很多中国传统正在改变。这不仅仅是在拍摄美食，更是在拍摄承载中国人精神的食物。本网站介绍了中国各地美食，网页是根据舌尖上的中国这档节目中的七个主题来设计的。分别为：自然地馈赠、主食的故事、转化的灵感、时间的味道、厨房的秘密、五味的调和、我们的田野。本站的建立使用了Fireworks、Flash和Dreamweaver网页制作工具。采用HTML语言
5、、CSS样式、Javascript脚本语言编写网页，最终使静态页面也有丰富多彩的视觉效果；另外又使用了网页特效，赋予了其他页面动态之美，动静结合，主题突出，吸引浏览者的目光。关键词： 中国；美食；文化内容包括：1.为什么要设计该网站？ 2.本网站包含什么内容？采用了什么技术实现 3.建立本网站可以达到什么效果？ 目 录一、作品简介1二、设计方案11. 软硬件环境12. 色彩方案13. 目录结构图1三、 实现过程21. 创建本地站点22. 首页33. “自然的馈赠”页面54. “主食的故事”页面65. “*”页面66. 申请域名，发布网站8四、结论与心得8五、参考文献8附录1一、作品简介本作品其
6、主要内容是关于中国各色美食的讲解。中国文化博大精深，当然其中也包含饮食文化。本网站通过中华美食的多个侧面，来展现食物给中国人生活带来的仪式、伦理等方面的文化。以美食作为窗口，让海内外观众领略中华饮食之美。进而感知中国的文化传统和社会变迁。不仅这样，还展示了普通中国人的人生百味，展示的是人和食物之间的故事，透过美食来看社会。我个人爱好看美食节目，了解各类美食。想通过本网站向社会展示中国各地特色美食，更加了解中国那博大精深的美食文化。二、设计方案1. 软硬件环境1）硬件环境：CPU型号：Inter酷睿i3CPU主频：1.8GHz内存容量：2GB硬盘容量：500GB显卡芯片：AMD Radeon H
7、D 7450M+Inter GMA HD 40002）软件环境：操作系统：预装Windows8 应用软件：Dreamweaver、Fireworks、PS、Flash2. 色彩方案有实验证明，色彩美丽、造型别致的食物往往能更好的增进食欲。色彩是人的视觉最敏感的东西。本网站所有网页主要以暖色调的颜色为主。主要以白色和淡粉色搭配，色彩明亮，不昏暗，当造型别致的美食有了明亮的色彩点缀，不经意间又为美食加了一份色彩。当我挑选的美食图片颜色不够完美时，我就在页面的其他部分做一下稍微的调整，不会让整个页面看起来过于暗沉。3. 目录结构图本网站主要包括七个主题以及三个次要部分。每个主题都各有自己的特色，一般
8、来说，都是图片配文字。有介绍美食的、有介绍美食做法的，个个不一。如图1，就是本网页的目录结构图。图2.1 目录结构图三、 实现过程1. 创建本地站点具体操作步骤如下： 1）打开Dreamweaver，在上面的选择菜单中选择“站点”,在选择新建站点；2）给新站点命名，另外选择本地站点的文件夹，如图3.1： 图3.1 目录结构图在站点文件夹中新建“css”文件夹、“js”文件夹、“images”文件夹，分别保存css样式文件、javascript特效文件和图片文件，而所有的网页直接保存在站点下，其中首页名为index.html。在此过程中特别要注意的是：所有文件的路径和文件名中不能出现中文字符，否
9、则相关内容不能正常显示。2. 首页1)首页效果图首页效果图如图3.2所示，分为四部分，分别是头部、主体、和版本说明，其中头部有flash设计的网站logo；主体部分分为导航和网页内容，其中导航菜单体现了整个网站的栏目结构，包括：自然的馈赠、主食的故事、转化的灵感、时间的味道、厨房的秘密、五位的调和、我们的田野，本网站就是围绕这几个模块展开的；版本说明介绍了设计者的个人信息。图3.2 首页效果图2) 首页结构框图首页结构框图如图3-3所示，是通过盒子与盒子的嵌套关系实现的。图3.3 首页结构框图div代码如下： logo 图片 导航 图片 菜单 主体 版权说明其具体css样式请查看附录1。3)l
10、ogo的设计图3.4 logoLogo使用Flash进行设计成gif动画效果，制作步骤如下: 把所需要的三张图片导入到库，并转换成元件，把元件大小改为和logo盒子大小一致。 把场景也改为和logo盒子大小一致的大小。 第一帧把第一个元件拉到场景里，定位；设第二十帧为关键帧，把第二个元件拖到场景里，定位；设第三十帧为关键帧，把第三个元件拖到场景里，定位，中间设为传统补间，导出gif动画。在网页中，我采用“插入|图片”的方式，将gif动画图片插入在指定的位置。注意：如果插入的是.swf文件，则在网页中实现。4）轮换图设计步骤1. 将“js”文件夹复制到站点下，在html的head标签内引入相关文
11、件步骤2. 创建html结构，并填充你的内容3. “自然的馈赠”页面 图3.5 “自然的馈赠”页面界面如上所示，采用的是和首页相同的模板，Header、Nav以及Footer部分都是一样的样式，只是网页中间的Content部分不一样，在本页中，我将六张美食的图片以三行两列显示，图片下方用灰色字体表明美食的名称，图片和文字均建立了超链接，单击任意图片，可以进入相应美食的介绍页面。在设计时，我遇到的问题是，每张图片都有边框，后来我在css文件中写上：img border:0px;就去掉了图片的边框，使页面更美观。 4. “主食的故事”页面仿照“自然的馈赠”页面，内容包括：界面、文字描述界面内容和特
12、效、遇到的问题、如何解决的、本网页的特色。.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）我的首页是用的一个对图片有切片效果的特效，经过上面的图片时，隐藏在下面的图片会显现出来。在首页的下面，有一个查询按钮，我以为给按钮设超链接的方式和给图片设超链接的方式一样，事实不是这样的。要设置成这样的：4）每当我网页的盒子嵌套关系越来越多时，伴随的不是网页快成
