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

郑州轻工业学院课 程 设 计 任 务 书题目 个人网站的设计与实现 主要内容： 利用所学内容，设计个人网站基本要求： 本系统制作一个个人网站，要求个人网站主题设计思想明确、思路清晰、颜色选择恰当、布局合理；多媒体（图像、音乐、滚动字幕）运用适当；Flash、框架运用合适；适当使用样式页（CSS）等。主要参考资料等：Web设计基础 李开荣 高等教育出版社 2008网站规划与网页设计张兵义 电子工业出版社 2008Web编程技术历小军 机械工业出版社 2009完 成 期 限： 一周 指导教师签名： 课程负责人签名： 2010年 5 月 日目录一、引言11.1课题的背景11.2可行性研究1二、需求分析12.1系统概述：12.2功能要求：1三、总体设计23.1功能设计33.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  我的档案 我的日志 我的班级 我的宠物 视频欣赏      返回主页无标题文档 无标题文档  我的档案 我的日志 我的班级 我的宠物 视频欣赏      返回主页小小寒的主页 var speed=8/速度数值越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值demo2left.innerHTML=demo1left.innerHTMLfunction Marquee()if(demo2left.offsetWidth-demoleft.scrollLeft=0)/其实demo.scrollLeft是有 最大值的，和demo0.width,引用的图片的width有关系。demo过了一半（每半内容一样的），重新开始循环demoleft.scrollLeft-=demo1left.offsetWidthelsedemoleft.scrollLeft+/不断的增加，相当于父容器的滚动条不断是缩小；但由于OVERFLOW: hidden; （滚动条不可见）var MyMarleft=setInterval(Marquee,speed)demoleft.onmouseover=function() clearInterval(MyMarleft)demoleft.onmouseout=function() MyMarleft=setInterval(Marquee,speed)3、在Photoshop中设计自己的子页面效果： (1) 找到自己喜爱的图片最为背景，定义图片添加到填充背景图案中；(2) 新建文件我的导航，填充背景，加入导航字，设置字体，椭圆边框；(3) 找到自己的一张照片抠出需要的部分粘贴在我的导航中，各个字体设置好，页面调整到最佳，使用切片工具把需要添加链接的部分切好；保存为网页模式；以我的档案为例如图：代码：无标题文档      其他各个子页面效果如下：我的日志：代码：无标题文档我的班级：代码：无标题文档我的宠物：代码：无标题文档视频欣赏：代码：无标题文档无标题文档 五、 结语通过本次网页的制作过程，我学习到了很多实用的东西，也充分了解了Dreamweaver这个软件的强大，对学习了一个学期的课程也有了更深入的解，由于有了多媒体和网页设计课程作基础，因此在制作网页的过程中诸如制作首页，页面链接等步骤进行的还是比较顺利的，经过最近每天晚上的辛苦努力，终于完成了我的主页的制作。在这段时间里，一方面，我尝试着将课本上所学的知识运用到制作中，另一方面，我又时刻在网上学习自己需要的知识，学习到了很多有用的东西，在这过程中，我对网页的设计上有了更深的体会，对于这一领域，学到的知识多了，反而发现自己所了解的少了。遗憾的是，自己不会做动态网页，否则我相信会更成功，庆幸的是，整个设计过程都很顺利，错误也修改成功了不少，也可以安慰一下自己了。最终看到了自己亲手做出来的网站，心里有了收获般的欣喜，这让我从心底里感谢这次实践的机会，感谢老师给了我们一次自己动手的机会，在设计的过程中，同学们互相讨论，这也增强了同学之间的交流。虽然网页设计完成了，但欠缺之处尚存，希望可以得到老师的指点，使设计更加完善。目 录第一章 项目摘要31.1项目基本情况31.2建设目标31.3建设内容及规模41.4产品及去向41.5效益分析4第二章 项目建设的可行性和必要性52.1建设的必要性52.2建设的可行性52.3编制依据62.4编制原则9第三章 项目建设的基础条件93.1建设单位的基本情况93.2项目的原料供应情况103.3地址选择分析10第四章 产品114.1沼气114.2 沼气产量确定124.3有机肥134.4产品去向13第五章 沼气工程工艺设计145.1工艺参数145.2处理工艺选择145.3工艺流程的组成155.4厌氧处理工艺选择与比较155.5沼气存储和净化工艺165.6工艺流程185.7沼气输配设施195.8沼气计量设施19第六章 总体设计196.1站内总体设计196.2站外配套设计19第七章 土建设计207.1建筑设计207.2结构设计20第八章 电气设计218.1设计依据218.2设计规范228.3 设计说明228.4控制与保护228.5防雷与接地228.6配电系统238.7防雷与接地238.8 防爆设计238.9供电负荷23第九章 安全、节能及消防249.1安全生产249.2防火消防249.3节能25第十章 主要构（建）筑物、设备的设计参数2510.2 厌氧消化系统工艺参数设计2710.3 沼气净化系统工艺参数设计2810.4 沼气储存系统2810.5 沼肥储存系统2910.6配套设施区29第十一章 投资概算和资金筹措3011.1编制说明3011.2总投资估算表3111.3投资概算3311.4资金筹措33第十二章 项目实施进度和投招标3412.1进度安排3412.2招（投）标依据3412.3招（投）标范围3412.4招（投）方式35第十三章 项目组织与管理3513.1管理3513.2劳动定员和组织培训37第十四章 环境保护和安全生产3714.1污染源和污染物3714.2污染治理方案3814.3安全生产39第十五章 产品市场分析与预测4115.1沼气4115.2沼气发电4115.3沼液和沼渣4315.4（生态）农产品。43第十六章 社会、生态及经济效益分析4316.1社会效益4316.2生态效益4416.3经济效益44第十七章 结论46第十八章 附件471