web设计基础报告-个人网页设计和实现.doc

1郑州轻工业学院课程设计任务书题目个人网站的设计与实现主要内容：利用所学内容，设计个人网站基本要求：本系统制作一个个人网站，要求个人网站主题设计思想明确、思路清晰、颜色选择恰当、布局合理；多媒体（图像、音乐、滚动字幕）运用适当；Flash、框架运用合适；适当使用样式页（CSS）等。主要参考资料等：《Web设计基础》李开荣高等教育出版社2008《网站规划与网页设计》张兵义电子工业出版社2008《Web编程技术》历小军机械工业出版社2009完成期限：一周指导教师签名：课程负责人签名：2010年5月日目录TOC\o"1-2"\h\z\uHYPERLINK\l"_Toc248241832"一、引言PAGEREF_Toc248241832\h1HYPERLINK\l"_Toc248241833"1.1课题的背景PAGEREF_Toc248241833\h1HYPERLINK\l"_Toc248241834"1.2可行性研究PAGEREF_Toc248241834\h1HYPERLINK\l"_Toc248241835"二、需求分析PAGEREF_Toc248241835\h1HYPERLINK\l"_Toc248241836"2.1系统概述：PAGEREF_Toc248241836\h1HYPERLINK\l"_Toc248241838"2.2功能要求：1HYPERLINK\l"_Toc248241839"三、总体设计PAGEREF_Toc248241839\h2HYPERLINK\l"_Toc248241840"3.1功能设计3HYPERLINK\l"_Toc248241841"3.2界面设计4HYPERLINK\l"_Toc248241844"四．详细设计与实现PAGEREF_Toc248241844\h5HYPERLINK\l"_Toc248241850"六、结语24个人网页设计和实现引言课题的背景经过本学期对web设计基础这门课程的学习，对web的设计以及相关代码的使用有了深入的了解，在学期末制作主题为个人主页的网页，对其设计并实现。可行性研究经过考虑对制作工具的筛选，决定用Dreamweaver做个人网页，Photoshop为辅助工具，设计和制作图片、页面及图标等。本网站是以静态网页为基础，以Dreamweaver为制作软件、以Photoshop为设计软件而成的。通过这个学期对网页制作代码相关的学习以及之前对这些软件的了解，制作出相对简单的个人网页，展示自己相关的一些东西；本网站内容充实，在主页的设计上运用了模板，框架等。分页面上运用了导航条。插入了动态图片以及视频等给网增加了美观度，在首页的设计上本着简单易懂的原则，用户只要点击链接就能看到自己想看到的连接内容。网站的首页设置了背景音乐，使访问者在浏览的同时还能欣赏到悠扬的旋律。需求分析系统概述一个具有个性的个人网站，是让别人对你进行了解，与别人沟通的更好途径，本文研究的是这次个人网站的设计与实现。能让人通过本网站可以清晰地了解到我的一些信息。运用WindowsXP+Dreamweaver8+PS的网站设计制作环境，设计出神秘、活力的暗色与绚丽特效的网页特色。功能要求实现链接、滚动字幕或图片、插入音频、视频等插件的功能；总体设计运用Dreamweaver的框架功能；围绕关于我自己的一些相关信息进行分类，实现分类的链接进行制作；并且要注重网页的一体化，美感，还有色彩的搭配，音乐的选取等；3.1功能设计：利用框架（选取了左右下的框架结构）设置基本模样。左边框架作为导航栏，下边的部分作为滚动图片栏；右上方一大部分作为各个子网页的浏览区；在导航栏插入了音乐，以便放入的音乐不会随着链接的进入而消失，增添了网页的趣味性；导航栏包括共：我的档案，我的日志，我的班级，我的宠物，视频欣赏五项，分别链接到各个子页面；在导航区的最下方还设置有返回欢迎页面的链接；并且设置导航区的背景、颜色、插入动态图片等。3.2界面设计：本网页页面风格为暗色系，以黑色为主色其他色系进行搭配进行制作。index_myweb：主模块（右上层模块）添加制作的动态欢迎图片：欢迎来到小小寒的主页（动态）；左侧导航栏目分布了各个子页面的链接，点击即可进入各个子页面；右下方的模块放置我的图片，并且运动代码实现滚动功能；由导航栏分别可以进入以下子页面：我的档案：主要介绍了我的一些基本情况，爱好及性格特征等等；我的日志：选了一篇自己喜欢的写过的文章供大家阅读；我的宠物：展示了我的宠物小狗贝贝的一些东西，我养狗的一些感受等；我的班级：介绍了我的班级的基本情况；视频欣赏：摘选了一个搞笑flash给大家娱乐；以上五个分页面风格