网页设计与制作综合实验毕业设计说明书.docx

1、网页设计与制作综合实验毕业设计说明书网页设计与制作设计说明书姓 名： 张强 学 号： 班 级： 07金本3 指导教师： 完成日期： 2010/10/19 目录摘要 3第一章 绪论 31.1开发背景 31.1 环境时空网站开发价值 3第二章 开发与设计 42.1 开发技术 42.2 总体设计 52.3 详细设计 7总结 12参考文献 12摘要随着人类生活的发展，提倡绿色生活，低碳经济。我们越发感到环境给我们带来的压力和责任。为了更好的加入到环保的的大军，环境时空网基于网页制作软件，给大家做出简单明了的环保网页，介绍环保的历史发展，生活中环保的小知识，以及和我们息息相关的生活-衣食住行中的环保知识

2、，环保的法律政策。希望通过本网站的宣传，提升我们每个人的环保理念，做一个环保的好公民。同时，在第二章的内容中，简单的介绍软件Dreamweaver CS3 的操作和代码含义，软件Photoshop的简单操作和javascript语言和CSS的应用，目的在于了解简单静态网页的制作和排版。最后总结出此次制作网页全过程的心得体会，为以后的网页制作积累经验。第一章 绪论1.1开发背景自从本世纪20年代以后，世界性环境污染威胁着人类的安全。同时人们逐渐认识到，威胁人类生存的不仅仅是局部地区，而是更大的范围甚至是全球环境污染。环境是人类生产和生活中与之发生联系的自然因素的总和，人类的活动必然对这些因素造成

3、或多或少的影响。 我国在2001年加入世界贸易组织，发达国家会要求我们执行与之同样的高环境标准。因此，WTO的一些绿色条款，就要求国内企业提高环境保护意识，加大环境保护方面的投入，建立环境管理体系，持续改善环境行为，以提高产品的国际竞争力。从经济观角度，可持续发展主张在保护地球上自然系统的基础上经济持续增长；从自然观角度，可持续发展主张人与自然和谐发展。 1.2 环境时空网站开发价值 加强环境保护是落实科学发展观的重要举措，是全面建设小康社会的内在要求，是坚持执政为民、提高执政能力的实际行动，是构建社会主义和谐社会的有力保障。加强环境保护，有利于促进经济结构调整和增长方式转变，实现更快更好地发

4、展；有利于带动环保和相关产业发展，培育新的经济增长点和增加就业；有利于提高全社会的环境意识和道德素质，促进社会主义精神文明建设；有利于保障人民群众身体健康，提高生活质量和延长人均寿命；有利于维护中华民族的长远利益，为子孙后代留下良好的生存和发展空间。因此，必须用科学发展观统领环境保护工作，痛下决心解决环境问题。环境时空网站的主旨在唤起人类爱护地球、保护家园的意识，促进资源开发与环境保护的协调发展。其目的是向社会公众普及地学知识，加强全社会对地学的认识和有效利用，提高公众对资源国情的认识，实现人与自然和谐发展。第二章 开发与设计2.1开发技术(1)Dreamweaver是美国MACROMEDIA

5、公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。html文档示例：htmlheadtitle标题title/headbody插入图片 img src=”图形文件名”定义表格 table./table有序号的清单 ol li项目1 li项目2 li项目3 /ol无序号的清单 ul li项目1 li项目2 li项目3 /ul定义式清单 dl dt项目1 dd项目1说明 dt项目2 dd项目2说明 dt项目3 dd项目3说明/dl.文件内容./body/htm

6、l(2)常用网页存在的两种种CSS方式链入外部样式表链入外部样式表 (Linking to a Style Sheet) 先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下： title of article 定义内部样式块对象定义内部样式块对象 (Embedding a Style Block) 你可以在你的HTML文档的和标记之间插入一个.块对象。 示例如下： (3)JavaScript Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl

7、，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。jQuery是继prototype之后又一个优秀的Javascrpt框架。其宗旨是WRITE LESS,DO MORE,写更少的代码,做更多的事情。 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）jQuery是一个

8、快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。 (4)Photoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱

9、。2.2总体设计设计以盒模型为主，表格为辅，采用css的链接式和嵌入式配合。网页主体颜色采用绿色，突出环保的主题。总体布局如下图：2.3详细设计具体共制作六张网页，index,index1 insex2,index3，index-a,index-b以首页index为例子(1).Header部分在盒模型中用表格制作，代码如下：                用户名：   密 码：         设

10、为首页                  效果如下图：左侧一个我们生活的小地球，被绿色和海洋环绕，突出我们网站的名字环境时空，右侧的表单注册，让更多的环保使者加入我们的队伍，一起为环境行动起来。(2).首页index导航菜单在盒模型中利用无序列表制作，并加入一幅动画，动画主题为我们生活中的衣食住行。截取部分代码如下： 首页 环保知识 政策法律 环保动态 环保组织 环保活动 论坛 效果如下图：其中以绿色为背景，突出环保。CSS样式代码：#left-nav a

11、:link,a:visitedcolor:#000000;text-decoration:none;#left-nav a:hovercolor:#0000FF;#mainnavtext-align:center；margin:0px;width:780px;height:30px;background:url(./img/003.jpg);float: left;#nav-main lipadding:5px;list-style:none;float:left;width:100px;text-align:center;#nav-main li a:link,#nav-main li a:

12、visitedcolor:#000000;text-decoration:none;#nav-main li a:hovercolor:#0000ff;(3).首页和子网页的conteent部分为环保知识的内容和一些图片链接。在这本分index3网页中还应用了javascript产生tab菜单的动画效果。代码如下： $(function()$(.tab_box div:gt(0).hide();$(.tab_menu li).hover(function()$(this).addClass(selected).siblings().removeClass(selected);var li_in

13、dex=$(.tab_menu li).index(this);$(.tab_box div).eq(li_index).show().siblings().hide();)(4).首页content最下面部分和header部分类似,盒模型中加入表格。代码如下：友情链接北京环保局上海环保局天津环保局重庆环保局广东环保局福建环保局湖北环保局山西环保局河北环保局江苏环保局浙江环保局安徽环保局山东环保局江西环保局广西环保局云南环保局贵州环保局河南环保局湖北环保局湖南环保局青海环保局西藏环保局黑龙江环保局辽宁环保局长春环保局内蒙古环保局海南环保局效果如下图：此模块的友情链接目的是让我们更好的了解全国每

14、个省份的环保工作，支持政府，献言献策。总结1制作好的网页，一定要用好photoshop,flash辅助软件。2了解制作的背景知识，确定制作的主题和目的对于能否成功的做出一张好的网页是非常重要的。3.做网页，就是一个搜集素材，组织整理的过程。是先分后总的过程，不是先总后分的过程。开始的时候没有弄明白，以“先总后分”的思路指导自己去制作，走了很多的弯路，浪费了许多的时间和精力。后来自己明白了一个真理：没有素材，拿什么去组织网页？4.做flash动画，不一定非要用flash软件去制作，swishMax 也可以完成同样的设计任务。而且用后者，可以大量节约时间。5.制作网页/网站，是一个熟能生巧，巧能生

15、精的过程。6.不要套用模板。套用别的网站上的模板，对很多东西都说不清楚，动手制作能力为零。现在很多网站上也有类似的ps模板可以下载，也有很多ps制作的漂亮按钮，但对实际工作来讲意义不是很大，掌握ps基本的创作方法才是正道。很多细节性的东西理解了，掌握了，重新更换的时候，心理也比较有底气，才能做到游刃有余。参考文献1邵丽萍 张后扬 王英 网页编程技术 清华大学出版社 2007年2淮永建 韩静华 蔡东娜 网页设计与制作教程 人民邮电出版社 2009年信息工程学院网页设计与制作实践环节考核报告单2009-2010学年度第二学期期末排课编号：（2009-2010-2）-2010205-00112-1 批阅日期： 年 月 日姓名班级学号评分标准及得分评分标准满分得分主题自拟，主题鲜明、突出，内容健康，积极向上。能针对实际，有一定的实用性和创新性。30综合运用本学期所学知识制作静态页面。符合WEB2.0标准。页面总数不小于5个，网页总大小不超过5M。20网页布局合理、美观、层次分明，色彩搭配恰当。20文件命名规范，清晰。10设计说明书条理清楚，论述充分，文字通顺，符合技术用语要求，符号统一，编号齐全，排版科学工整。设计图纸完备、清洁、正确。20考核成绩折合成绩任课教师签名