web设计基础报告-个人网页设计和实现
郑州轻工业学院课 程 设 计 任 务 书题目 个人网站的设计与实现 院系 XXX XXX XXX X
郑州轻工业学院
课 程 设 计 任 务 书
题目 个人网站的设计与实现 院系 XXX XXX XXX X 专业班级 XXX XXX XXX X 学号 XXX XXX XXX X 姓名 XXX
主要内容：
利用所学内容，设计个人网站
基本要求：
本系统制作一个个人网站，要求个人网站主题设计思想明确、思路清晰、颜色选择恰当、布局合理；多媒体（图像、音乐、滚动字幕）运用适当；Flash 、框架运用合适；适当使用样式页（CSS ）等。
主要参考资料等：
《Web 设计基础》 李开荣 高等教育出版社 2008
《网站规划与网页设计》张兵义 电子工业出版社 2008
《Web 编程技术》历小军 机械工业出版社 2009
完 成 期 限： 一周
指导教师签名：
课程负责人签名：
2010年 5 月 日
1
,目录
一、引言 . .......................................................................... 错误！未定义书签。
1.1课题的背景 . ........................................................ 错误！未定义书签。
1.2可行性研究 . ........................................................ 错误！未定义书签。
二、需求分析 . .................................................................. 错误！未定义书签。
2.1系统概述： . ........................................................ 错误！未定义书签。
2.2功能要求： . .......................................................................................... 1
三、总体设计 . .................................................................. 错误！未定义书签。
3.1功能设计 . .............................................................................................. 3
3.2界面设计 . .............................................................................................. 4
四．详细设计与实现 . ...................................................... 错误！未定义书签。
六、结语 . .......................................................................................................... 24
1
,个人网页设计和实现
一、 引言
1.1 课题的背景 经过本学期对web 设计基础这门课程的学习，对web 的设计以及相关代码的使用有了深入的了解，在学期末制作主题为个人主页的网页，对其设计并实现。
1.2 可行性研究 经过考虑对制作工具的筛选，决定用Dreamweaver 做个人网页，Photoshop 为辅助工具，设计和制作图片、页面及图标等。
本网站是以静态网页为基础，以Dreamweaver 为制作软件、以Photoshop 为设计软件而成的。通过这个学期对网页制作代码相关的学习以及之前对这些软件的了解，制作出相对简单的个人网页，展示自己相关的一些东西； 本网站内容充实， 在主页的设计上运用了模板，框架等。分页面上运用了导航条。插入了动态图片以及视频等给网增加了美观度，在首页的设计上本着简单易懂的原则，用户只要点击链接就能看到自己想看到的连接内容。网站的首页设置了背景音乐，使访问者在浏览的同时还能欣赏到悠扬的旋律。
二、 需求分析
2.1 系统概述
一个具有个性的个人网站，是让别人对你进行了解，与别人沟通的更好途径，本文研究的是这次个人网站的设计与实现。能让人通过本网站可以清晰地了解到我的一些信息。
运用Windows XP Dreamweaver8 PS 的网站设计制作环境，设计出神秘、活力的暗色与绚丽特效的网页特色。
2.2 功能要求
实现链接、滚动字幕或图片、插入音频、视频等插件的功能；
三、 总体设计
运用Dreamweaver 的框架功能；围绕关于我自己的一些相关信息进行分类，实现分类的链接进行制作；并且要注重网页的一体化，美感，还有色彩的搭配，音乐的选取等；
1
,3.1 功能设计： 利用框架（选取了左右下的框架结构）设置基本模样。左边框架作为导航栏，下边的部分作为滚动图片栏；右上方一大部分作为各个子网页的浏览区；在导航栏插入了音乐，以便放入的音乐不会随着链接的进入而消失，增添了网页的趣味性；
导航栏包括共：我的档案，我的日志，我的班级，我的宠物，视频欣赏五项，分别链接到各个子页面；在导航区的最下方还设置有返回欢迎页面的链接；并且设置导航区的背景、颜色、插入动态图片等。
3.2 界面设计：
本网页页面风格为暗色系，以黑色为主色其他色系进行搭配进行制作。 index_my web：主模块（右上层模块）添加制作的动态欢迎图片：欢迎来到小小寒的主页（动态）；左侧导航栏目分布了各个子页面的链接，点击即可进入各个子页面；右下方的模块放置我的图片，并且运动代码实现滚动功能；
由导航栏分别可以进入以下子页面：
我的档案：主要介绍了我的一些基本情况，爱好及性格特征等等； 我的日志：选了一篇自己喜欢的写过的文章供大家阅读；
我的宠物：展示了我的宠物小狗贝贝的一些东西，我养狗的一些感受等； 我的班级：介绍了我的班级的基本情况；
视频欣赏：摘选了一个搞笑flash 给大家娱乐；
以上五个分页面风格与整体保持一致，庄重而不失色彩；
四、 详细设计与实现
1、创建网页页面：
（1）新建站点：
1
,
如图建立新站点，设置好各个选项，一般静态网页不用连接到网络，设置不用做太多修改，只需要设定好名称及文件夹位置即可。
（2）新建网页：
如图，选择创建新项目的HTML ，或者选择模板建立；创建好六个页面，分别保存名称为：index ，我的档案，我的日志，我的班级，我的宠物，视频欣赏；
2、打开页面，选择布局模式，使用左右下模板，保存主页面标题为index.html, 标题改为“我的主页”；试运行，保存两个框架；
在左层模块添加插件音乐，并缩小插件；（如图1）
设置导航栏，为每个分类的文字添加链接，将文字添加链接到“我的档案”等各个子分页，并且分页链接目标选择mainframe （如图2）：
图1：
1
,
图2：
在mainframe 中插入自己在Photoshop 中制作的动态欢迎图片，添加到layer1中可以调试位置；
在下方框架中插入各种照片，运动滚动效果的代码实现其功能；
为了美化在各个模块中背景插入了相框，条纹等动态闪动图片；让视觉效果更震撼； 图一页面代码如下：
1 text-decoration: none; color: #F4F4F4; text-decoration: none; color: #66FFFF;
,
┭ 返回主页
1 position:absolute; width:1097px; height:115px; z-index:2; left: 12px; top: 57px; position:absolute; width:200px; height:115px; z-index:1; left: 73px; top: 36px;