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

郑州轻工业学院
课 程 设 计 任 务 书
题目 个人网站的设计与实现

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

基本要求：
本系统制作一个个人网站，要求个人网站主题设计思想明确、思路清晰、颜色选择恰当、布局合理；多媒体（图像、音乐、滚动字幕）运用适当；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 系统概述
一个具有个性的个人网站，是让别人对你进行了解，与别人沟通的更好途径，本文研究的是这次个人网站的设计与实现。能让人通过本网站可以清晰地了解到我的一些信息。
运用Windows XP + Dreamweaver8 +PS 的网站设计制作环境，设计出神秘、活力的暗色与绚丽特效的网页特色。
2.2 功能要求
实现链接、滚动字幕或图片、插入音频、视频等插件的功能；
三、 总体设计
运用Dreamweaver的框架功能；围绕关于我自己的一些相关信息进行分类，实现分类的链接进行制作；并且要注重网页的一体化，美感，还有色彩的搭配，音乐的选取等；
3.1 功能设计：
利用框架（选取了左右下的框架结构）设置基本模样。左边框架作为导航栏，下边的部分作为滚动图片栏；右上方一大部分作为各个子网页的浏览区；在导航栏插入了音乐，以便放入的音乐不会随着链接的进入而消失，增添了网页的趣味性；
导航栏包括共：我的档案，我的日志，我的班级，我的宠物，视频欣赏五项，分别链接到各个子页面；在导航区的最下方还设置有返回欢迎页面的链接；并且设置导航区的背景、颜色、插入动态图片等。
3.2 界面设计：
本网页页面风格为暗色系，以黑色为主色其他色系进行搭配进行制作。
index_my web：主模块（右上层模块）添加制作的动态欢迎图片：欢迎来到小小寒的主页（动态）；左侧导航栏目分布了各个子页面的链接，点击即可进入各个子页面；右下方的模块放置我的图片，并且运动代码实现滚动功能；
由导航栏分别可以进入以下子页面：
我的档案：主要介绍了我的一些基本情况，爱好及性格特征等等；
我的日志：选了一篇自己喜欢的写过的文章供大家阅读；
我的宠物：展示了我的宠物小狗贝贝的一些东西，我养狗的一些感受等；
我的班级：介绍了我的班级的基本情况；
视频欣赏：摘选了一个搞笑flash给大家娱乐；
以上五个分页面风格与整体保持一致，庄重而不失色彩；
四、 详细设计与实现
1、创建网页页面：
（1）新建站点：

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

如图，选择创建新项目的HTML，或者选择模板建立；创建好六个页面，分别保存名称为：index，我的档案，我的日志，我的班级，我的宠物，视频欣赏；
2、打开页面，选择布局模式，使用左右下模板，保存主页面标题为index.html,标题改为“我的主页”；试运行，保存两个框架；
在左层模块添加插件音乐，并缩小插件；（如图1）
设置导航栏，为每个分类的文字添加链接，将文字添加链接到“我的档案”等各个子分页，并且分页链接目标选择mainframe（如图2）：
图1：

图2：

在mainframe中插入自己在Photoshop中制作的动态欢迎图片，添加到layer1中可以调试位置；
在下方框架中插入各种照片，运动滚动效果的代码实现其功能；
为了美化在各个模块中背景插入了相框，条纹等动态闪动图片；让视觉效果更震撼；
图一页面代码如下：

my web

<!--
body {
back</p><p style='padding:5px 0px;'>9、ground-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;</p><p style='padding:5px 0px;'>10、 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;
colo</p><p style='padding:5px 0px;'>11、r: #F4F4F4;
}
a:active {
text-decoration: none;
color: #66FFFF;
}
-->

tyle type="text/css">

s="STYLE1">我的班级"mainFrame">视频欣赏0 cellPadding=2 border=0>

代码：

无标题文档

<!--
body {
background-image: url(image/18282611.jpg);
background-color: #000000;
background-repeat: no-repeat;}
.STYLE1 {
color: #FF0000;
font-size: 24px;
}
#Layer1 {
position:absolute;
width:187px;
height:4</p><p style='height:0px;padding:0;overflow:hidden'>32、42px;
z-index:1;
left: 659px;
top: 527px;
}
.STYLE2 {color: #FF0000}
-->

ve-flash" play="false">
知识，学习到了很多有用的东西，在这过程中，我对网页的设计上有了更深的体会，对于这一领域，学到的知识多了，反而发现自己所了解的少了。遗憾的是，自己不会做动态网页，否则我相信会更成功，庆幸的是，整个设计过程都很顺利，错误也修改成功了不少，也可以安慰一下自己了。最终看到了自己亲手做出来的网站，心里有了收获般的欣喜，这让我从心底里感谢这次实践的机会，感谢老师给了我们一次自己动手的机会，在设计的过程中，同学们互相讨论，这也增强了同学之间的交流。
虽然网页设计完成了，但欠缺之处尚存，希望可以得到老师的指点，使设计更加完善。目 录
第一章 项目摘要 3
1.1项目基本情况 3
1.2建设目标 3
1.3建设内容及规模 4
1.4产品及去向 4
1.5效益分析 4
第二章 项目建设的可行性和必要性 5
2.1建设的必要性 5
2.2建设的可行性 5
2.3编制依据 6
2.4编制原则 9
第三章 项目建设的基础条件 9
3.1建设单位的基本情况 9
3.2项目的原料供应情况 10
3.3地址选择分析 10
第四章 产品 11
4.1沼气 11
4.2 沼气产量确定 12
4.3有机肥 13
4.4产品去向 13
第五章 沼气工程工艺设计 14
5.1工艺参数 14
5.2处理工艺选择 14
5.3工艺流程的组成 15
5.4厌氧处理工艺选择与比较 15
5.5沼气存储和净化工艺 16
5.6工艺流程 18
5.7沼气输配设施 19
5.8沼气计量设施 19
第六章 总体设计 19
6.1站内总体设计 19
6.2站外配套设计 19
第七章 土建设计 20
7.1建筑设计 20
7.2结构设计 20
第八章 电气设计 21
8.1设计依据 21
8.2设计规范 22
8.3 设计说明 22
8.4控制与保护 22
8.5防雷与接地 22
8.6配电系统 23
8.7防雷与接地 23
8.8 防爆设计 23
8.9供电负荷 23
第九章 安全、节能及消防 24
9.1安全生产 24
9.2防火消防 24
9.3节能 25
第十章 主要构（建）筑物、设备的设计参数 25
10.2 厌氧消化系统工艺参数设计 27
10.3 沼气净化系统工艺参数设计 28
10.4 沼气储存系统 28
10.5 沼肥储存系统 29
10.6配套设施区 29
第十一章 投资概算和资金筹措 30
11.1编制说明 30
11.2总投资估算表 31
11.3投资概算 33
11.4资金筹措 33
第十二章 项目实施进度和投招标 34
12.1进度安排 34
12.2招（投）标依据 34
12.3招（投）标范围 34
12.4招（投）方式 35
第十三章 项目组织与管理 35
13.1管理 35
13.2劳动定员和组织培训 37
第十四章 环境保护和安全生产 37
14.1污染源和污染物 37
14.2污染治理方案 38
14.3安全生产 39
第十五章 产品市场分析与预测 41
15.1沼气 41
15.2沼气发电 41
15.3沼液和沼渣 43
15.4（生态）农产品。 43
第十六章 社会、生态及经济效益分析 43
16.1社会效益 43
16.2生态效益 44
16.3经济效益 44
第十七章 结论 46
第十八章 附件 47

1