网页课程设计报告例子

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