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

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

《web设计基础报告个人网页设计和实现.docx》由会员分享，可在线阅读，更多相关《web设计基础报告个人网页设计和实现.docx（25页珍藏版）》请在冰豆网上搜索。

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

郑州轻工业学院

课程设计任务书

题目个人网站的设计与实现

主要内容：

利用所学内容，设计个人网站

基本要求：

本系统制作一个个人网站，要求个人网站主题设计思想明确、思路清晰、颜色选择恰当、布局合理；多媒体（图像、音乐、滚动字幕）运用适当；Flash、框架运用合适；适当使用样式页（CSS）等。

主要参考资料等：

《Web设计基础》李开荣高等教育出版社2008

《网站规划与网页设计》张兵义电子工业出版社2008

《Web编程技术》历小军机械工业出版社2009

完成期限：

一周

指导教师签名：

课程负责人签名：

2010年5月日

目录

一、引言1

1.1课题的背景1

1.2可行性研究1

二、需求分析1

2.1系统概述：

1

2.2功能要求：

1

三、总体设计2

3.1功能设计3

3.2界面设计4

四．详细设计与实现5

六、结语24

个人网页设计和实现

一、引言

1.1课题的背景

经过本学期对web设计基础这门课程的学习，对web的设计以及相关代码的使用有了深入的了解，在学期末制作主题为个人主页的网页，对其设计并实现。

1.2可行性研究

经过考虑对制作工具的筛选，决定用Dreamweaver做个人网页，Photoshop为辅助工具，设计和制作图片、页面及图标等。

本网站是以静态网页为基础，以Dreamweaver为制作软件、以Photoshop为设计软件而成的。

通过这个学期对网页制作代码相关的学习以及之前对这些软件的了解，制作出相对简单的个人网页，展示自己相关的一些东西；

本网站内容充实，在主页的设计上运用了模板，框架等。

分页面上运用了导航条。

插入了动态图片以及视频等给网增加了美观度，在首页的设计上本着简单易懂的原则，用户只要点击链接就能看到自己想看到的连接内容。

网站的首页设置了背景音乐，使访问者在浏览的同时还能欣赏到悠扬的旋律。

二、需求分析

2.1系统概述

一个具有个性的个人网站，是让别人对你进行了解，与别人沟通的更好途径，本文研究的是这次个人网站的设计与实现。

能让人通过本网站可以清晰地了解到我的一些信息。

运用WindowsXP+Dreamweaver8+PS的网站设计制作环境，设计出神秘、活力的暗色与绚丽特效的网页特色。

2.2功能要求

实现链接、滚动字幕或图片、插入音频、视频等插件的功能；

三、总体设计

运用Dreamweaver的框架功能；围绕关于我自己的一些相关信息进行分类，实现分类的链接进行制作；并且要注重网页的一体化，美感，还有色彩的搭配，音乐的选取等；

3.1功能设计：

利用框架（选取了左右下的框架结构）设置基本模样。

左边框架作为导航栏，下边的部分作为滚动图片栏；右上方一大部分作为各个子网页的浏览区；在导航栏插入了音乐，以便放入的音乐不会随着链接的进入而消失，增添了网页的趣味性；

导航栏包括共：

我的档案，我的日志，我的班级，我的宠物，视频欣赏五项，分别链接到各个子页面；在导航区的最下方还设置有返回欢迎页面的链接；并且设置导航区的背景、颜色、插入动态图片等。

3.2界面设计：

本网页页面风格为暗色系，以黑色为主色其他色系进行搭配进行制作。

index_myweb：

主模块（右上层模块）添加制作的动态欢迎图片：

欢迎来到小小寒的主页（动态）；左侧导航栏目分布了各个子页面的链接，点击即可进入各个子页面；右下方的模块放置我的图片，并且运动代码实现滚动功能；

由导航栏分别可以进入以下子页面：

我的档案：

主要介绍了我的一些基本情况，爱好及性格特征等等；

我的日志：

选了一篇自己喜欢的写过的文章供大家阅读；

我的宠物：

展示了我的宠物小狗贝贝的一些东西，我养狗的一些感受等；

我的班级：

介绍了我的班级的基本情况；

视频欣赏：

摘选了一个搞笑flash给大家娱乐；

以上五个分页面风格与整体保持一致，庄重而不失色彩；

四、详细设计与实现

1、创建网页页面：

（1）新建站点：

如图建立新站点，设置好各个选项，一般静态网页不用连接到网络，设置不用做太多修改，只需要设定好名称及文件夹位置即可。

（2）新建网页：

如图，选择创建新项目的HTML，或者选择模板建立；创建好六个页面，分别保存名称为：

index，我的档案，我的日志，我的班级，我的宠物，视频欣赏；

2、打开页面，选择布局模式，使用左右下模板，保存主页面标题为index.html,标题改为“我的主页”；试运行，保存两个框架；

在左层模块添加插件音乐，并缩小插件；（如图1）

设置导航栏，为每个分类的文字添加链接，将文字添加链接到“我的档案”等各个子分页，并且分页链接目标选择mainframe（如图2）：

图1：

图2：

在mainframe中插入自己在Photoshop中制作的动态欢迎图片，添加到layer1中可以调试位置；

在下方框架中插入各种照片，运动滚动效果的代码实现其功能；

为了美化在各个模块中背景插入了相框，条纹等动态闪动图片；让视觉效果更震撼；

图一页面代码如下：

--

body{

background-color:

#000000;

background-image:

url（image/20089147504764561.gif）;

}

body,td,th{

color:

#FF0000;

}

.STYLE1{

font-size:

24px;

font-family:

"幼圆";

}

#Layer1{

position:

absolute;

width:

148px;

height:

633px;

z-index:

1;

left:

1px;

top:

20px;

}

.STYLE2{font-size:

24px;font-family:

"幼圆";color:

#FF0000;}

#Layer2{

position:

absolute;

width:

35px;

height:

18px;

z-index:

1;

left:

62px;

top:

510px;

}

a:

link{

text-decoration:

none;

color:

#66FFFF;

}

a:

visited{

text-decoration:

none;

color:

#F4F4F4;

}

a:

hover{

text-decoration:

none;

color:

#F4F4F4;

}

a:

active{

text-decoration:

none;

color:

#66FFFF;

}

-->