《网页设计与制作综合实验毕业设计说明书.pdf》由会员分享，可在线阅读，更多相关《网页设计与制作综合实验毕业设计说明书.pdf（13页珍藏版）》请在金锄头文库上搜索。
1、1网页设计与制作设计说明书姓名：赵伟学号：20070570106班级：机电工程学院 07 金属本指导教师：刘艳完成日期：2010/6/262目录摘要.3第一章 绪论.31.1 开发背景.31.1 环境时空网站开发价值.3第二章 开发与设计.42.1 开发技术.42.2 总体设计.52.3 详细设计.7总结.12参考文献.123摘要摘要随着人类生活的发展，提倡绿色生活，低碳经济。我们越发感到环境给我们带来的压力和责任。为了更好的加入到环保的的大军，环境时空网基于网页制作软件，给大家做出简单明了的环保网页，介绍环保的历史发展，生活中环保的小知识，以及和我们息息相关的生活-衣食住行中的环保知识，环保
2、的法律政策。希望通过本网站的宣传，提升我们每个人的环保理念，做一个环保的好公民。同时，在第二章的内容中，简单的介绍软件 Dreamweaver CS3 的操作和代码含义，软件 Photoshop 的简单操作和 javascript 语言和 CSS 的应用，目的在于了解简单静态网页的制作和排版。最后总结出此次制作网页全过程的心得体会，为以后的网页制作积累经验。第一章第一章 绪论绪论1.11.1 开发背景开发背景自从本世纪 20 年代以后，世界性环境污染威胁着人类的安全。同时人们逐渐认识到，威胁人类生存的不仅仅是局部地区，而是更大的范围甚至是全球环境污染。环境是人类生产和生活中与之发生联系的自然因
3、素的总和， 人类的活动必然对这些因素造成或多或少的影响。 我国在 2001 年加入世界贸易组织，发达国家会要求我们执行与之同样的高环境标准。因此，WTO 的一些绿色条款，就要求国内企业提高环境保护意识，加大环境保护方面的投入，建立环境管理体系，持续改善环境行为，以提高产品的国际竞争力。从经济观角度，可持续发展主张在保护地球上自然系统的基础上经济持续增长；从自然观角度，可持续发展主张人与自然和谐发展。1.21.2 环境时空网站开发价值环境时空网站开发价值加强环境保护是落实科学发展观的重要举措，是全面建设小康社会的内在要求，是坚持执政为民、提高执政能力的实际行动，是构建社会主义和谐社会的有力保障。
4、加强环境保护，有利于促进经济结构调整和增长方式转变，实现更快更好地发展；有利于带动环保和相关产业发展，培育新的经济增长点和增加就业；有利于提高全社会的环境意识和道德素质，促进社会主义精神文明建设；有利于保障人民群众身体健康，提高生活质量和延长人均寿命；有利于维护中华民族的长远利益，为子孙后代留下良好的生存和发展空间。因此，必须用科学发展观统领环境保护工作，痛下决心解决环境问题。4环境时空网站的主旨在唤起人类爱护地球、保护家园的意识，促进资源开发与环境保护的协调发展。其目的是向社会公众普及地学知识，加强全社会对地学的认识和有效利用，提高公众对资源国情的认识，实现人与自然和谐发展。第二章第二章 开
5、发与设计开发与设计2.12.1 开发技术开发技术(1)DreamweaveDreamweaver r 是美国 MACROMEDIA 公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。html 文档示例：htmlhead5title标题title/headbody插入图片 img src=”图形文件名”定义表格 table./table有序号的清单 ol li项目 1 li项目 2 li项目 3 /ol无序号的清单 ul li项目 1 li项目 2 li项目
6、 3 /ul定义式清单 dl dt项目 1 dd项目 1 说明 dt项目 2 dd项目 2说明 dt项目 3 dd项目 3 说明/dl.文件内容./body/html(2)(2)常用常用网页存在的网页存在的两种两种种种 CSSCSS 方式方式链入外部样式表链入外部样式表链入外部样式表 (Linking to a Style Sheet)先建立外部样式表文件（.css） ，然后使用 HTML 的 link 对象。示例如下：title of article定义内部样式块对象定义内部样式块对象定义内部样式块对象 (Embedding a Style Block)你 可 以 在 你 的 HTML 文
7、档 的 和 标 记 之 间 插 入 一 个.块对象。示例如下：6(3)(3)JavaScriptJavaScript Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言， 主要目的是为了解决服务器端语言，比如 Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证， 由于网络速度相当缓慢， 只有 28.8kbps， 验证步骤浪费的时间太多。于是 Netscape 的浏览器 Navigator 加入了 Javascript，提供了数据验证的基本功能。jQuery 是继 pro
8、totype 之后又一个优秀的 Javascrpt 框架。其宗旨是WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有 21k) ，这是其它的 js 库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTMLdocuments、events、实现动画效果，并且方便地为网站提供 AJAX 交互。jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许
9、多成熟的插件可供选择。jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆 js 来调用命令了，只需定义 id 即可。(4)PhotoshopPhotoshop 是 Adobe 公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。72.22.2 总体设计总体设计设计以盒模型为主，表格为辅，采用 css 的链接式和嵌入式配合。网页主体颜色采用绿色，突出环保的主题。总体布局如下图：2.32.3 详细设计详细设计具体共制作六张网页
10、，index,index1 insex2,index3，index-a,index-b以首页 index 为例子(1).Header 部分在盒模型中用表格制作，代码如下：8 用户名： 密 码： 设为首页
11、; 效果如下图：左侧一个我们生活的小地球，被绿色和海洋环绕，突出我们网站的名字环境时空，右侧的表单注册，让更多的环保使者加入我们的队伍，一起为环境行动起来。(2).首页 index 导航菜单在盒模型中利用无序列表制作，并加入一幅动画，动画主题为我们生活中的衣食住行。截取部分代码如下：9 首页环保知识 政策法律 环保动态 环保组织环保活动 论坛 效果如下图：其中以绿色为背景，突出环保。CSS 样式代码：#left-nav a:link,a:visitedcolor:#000000;text-decoration:none;#left-nav a:hovercolor:#0000FF;#
12、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:visitedcolor:#000000;text-decoration:none;#nav-main li a:hovercolor:#0000ff;10(3).
13、首页和子网页的 conteent 部分为环保知识的内容和一些图片链接。在这本分index3 网页中还应用了 javascript 产生 tab 菜单的动画效果。代码如下：$(function()$(.tab_box div:gt(0).hide();$(.tab_menu li).hover(function()$(this).addClass(selected).siblings().removeClass(selected);var li_index=$(.tab_menu li).index(this);$(.tab_box div).eq(li_index).show().siblin
14、gs().hide();)(4).首页 content 最下面部分和 header 部分类似,盒模型中加入表格。代码如下：友情链接北京环保局上海环保局天津环保局重庆环保局广东环保局福建环保局湖北环保局山西环保局河北环保局江苏环保局浙江环保局安徽环保局山东环保局江西环保局广西环保局云南环保局贵州环保局河南环保局湖北环保局湖南环保局青海环保局西藏环保局11黑龙江环保局辽宁环保局长春环保局内蒙古环保局海南环保局效果如下图：此模块的友情链接目的是让我们更好的了解全国每个省份的环保工作，支持政府，献言献策。总结总结1制作好的网页，一定要用好 photoshop,flash 辅助软件。2了解制作的背景知识
15、，确定制作的主题和目的对于能否成功的做出一张好的网页是非常重要的。3.做网页，就是一个搜集素材，组织整理的过程。是先分后总的过程，不是先总后分的过程。开始的时候没有弄明白，以“先总后分”的思路指导自己去制作，走了很多的弯路，浪费了许多的时间和精力。后来自己明白了一个真理：没有素材，拿什么去组织网页？4.做 flash 动画，不一定非要用 flash 软件去制作，swishMax 也可以完成同样的设计任务。而且用后者，可以大量节约时间。5.制作网页/网站，是一个熟能生巧，巧能生精的过程。6.不要套用模板。套用别的网站上的模板，对很多东西都说不清楚，动手制作能力为零。现在很多网站上也有类似的 ps
16、 模板可以下载，也有很多 ps 制作的漂亮按钮，但12对实际工作来讲意义不是很大，掌握 ps 基本的创作方法才是正道。很多细节性的东西理解了，掌握了，重新更换的时候，心理也比较有底气，才能做到游刃有余。参考文献1邵丽萍 张后扬 王英网页编程技术清华大学出版社2007 年2淮永建 韩静华 蔡东娜网页设计与制作教程人民邮电出版社 2009 年信息工程学院网页设计与制作实践环节考核报告单2009-2010 学年度第二学期期末排课编号：（2009-2010-2） -2010205-00112-1批阅日期：年月日姓名班级学号评分标准及得分评分标准满分得分主题自拟，主题鲜明、突出，内容健康，积极向上。能针对实际，有一定的实用性和创新性。30综合运用本学期所学知识制作静态页面。符合WEB2.0 标准。 页面总数不小于 5 个，网页总大小不超过 5M。20网页布局合理、 美观、 层次分明， 色彩搭配恰当。20文件命名规范，清晰。10设计说明书条理清楚，论述充分，文字通顺，符合技术用语要求，符号统一，编号齐全，排版科学工整。设计图纸完备、清洁、正确。20考核成绩折合成绩任课教师签名
