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

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

《网页设计与制作综合实验毕业设计说明书.docx》由会员分享，可在线阅读，更多相关《网页设计与制作综合实验毕业设计说明书.docx（10页珍藏版）》请在冰豆网上搜索。

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

网页设计与制作设计说明书

姓名：

张强

学号：

班级：

07金本3

指导教师：

完成日期：

2010/10/19

目录

摘要3

第一章绪论3

1.1开发背景3

1.1环境时空网站开发价值3

第二章开发与设计4

2.1开发技术4

2.2总体设计5

2.3详细设计7

总结12

参考文献12

摘要

随着人类生活的发展，提倡绿色生活，低碳经济。

我们越发感到环境给我们带来的压力和责任。

为了更好的加入到环保的的大军，环境时空网基于网页制作软件，给大家做出简单明了的环保网页，介绍环保的历史发展，生活中环保的小知识，以及和我们息息相关的生活-----衣食住行中的环保知识，环保的法律政策。

希望通过本网站的宣传，提升我们每个人的环保理念，做一个环保的好公民。

同时，在第二章的内容中，简单的介绍软件DreamweaverCS3的操作和代码含义，软件Photoshop的简单操作和javascript语言和CSS的应用，目的在于了解简单静态网页的制作和排版。

最后总结出此次制作网页全过程的心得体会，为以后的网页制作积累经验。

第一章绪论

1.1开发背景

自从本世纪20年代以后，世界性环境污染威胁着人类的安全。

同时人们逐渐认识到，威胁人类生存的不仅仅是局部地区，而是更大的范围甚至是全球环境污染。

环境是人类生产和生活中与之发生联系的自然因素的总和，人类的活动必然对这些因素造成或多或少的影响。

我国在2001年加入世界贸易组织，发达国家会要求我们执行与之同样的高环境标准。

因此，WTO的一些绿色条款，就要求国内企业提高环境保护意识，加大环境保护方面的投入，建立环境管理体系，持续改善环境行为，以提高产品的国际竞争力。

从经济观角度，可持续发展主张在保护地球上自然系统的基础上经济持续增长；从自然观角度，可持续发展主张人与自然和谐发展。

1.2环境时空网站开发价值

加强环境保护是落实科学发展观的重要举措，是全面建设小康社会的内在要求，是坚持执政为民、提高执政能力的实际行动，是构建社会主义和谐社会的有力保障。

加强环境保护，有利于促进经济结构调整和增长方式转变，实现更快更好地发展；有利于带动环保和相关产业发展，培育新的经济增长点和增加就业；有利于提高全社会的环境意识和道德素质，促进社会主义精神文明建设；有利于保障人民群众身体健康，提高生活质量和延长人均寿命；有利于维护中华民族的长远利益，为子孙后代留下良好的生存和发展空间。

因此，必须用科学发展观统领环境保护工作，痛下决心解决环境问题。

环境时空网站的主旨在唤起人类爱护地球、保护家园的意识，促进资源开发与环境保护的协调发展。

其目的是向社会公众普及地学知识，加强全社会对地学的认识和有效利用，提高公众对资源国情的认识，实现人与自然和谐发展。

第二章开发与设计

2.1开发技术

（1）Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

html文档示例：

＜html＞

＜head＞

＜title＞标题＜title＞

＜/head＞

＜body＞

插入图片＜imgsrc=”图形文件名”＞

定义表格＜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＞

＜/html＞

（2）常用网页存在的两种种CSS方式

链入外部样式表

　　链入外部样式表（LinkingtoaStyleSheet）

　　先建立外部样式表文件（.css），然后使用HTML的link对象。

示例如下：

　　

定义内部样式块对象

　　定义内部样式块对象（EmbeddingaStyleBlock）

　　你可以在你的HTML文档的和标记之间插入一个块对象。

　　示例如下：

--

　　body{font:

10pt"Arial"}

　　h1{font:

15pt/17pt"Arial";font-weight:

bold;color:

maroon}

　　h2{font:

13pt/15pt"Arial";font-weight:

bold;color:

blue}

　　p{font:

10pt/12pt"Arial";color:

black}

　　-->

（3）JavaScriptJavascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。

于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。

jQuery是继prototype之后又一个优秀的Javascrīpt框架。

其宗旨是——WRITELESS,DOMORE,写更少的代码,做更多的事情。

它是轻量级的js库（压缩后只有21k），这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

（4）Photoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。

2.2总体设计

设计以盒模型为主，表格为辅，采用css的链接式和嵌入式配合。

网页主体颜色采用绿色，突出环保的主题。

总体布局如下图：

2.3详细设计

具体共制作六张网页，index,index1insex2,index3，index-a,index-b

以首页index为例子

（1）.Header部分在盒模型中用表格制作，代码如下：

            用户名：

  密码：

      设为首页          

效果如下图：

左侧一个我们生活的小地球，被绿色和海洋环绕，突出我们网站的名字环境时空，右侧的表单注册，让更多的环保使者加入我们的队伍，一起为环境行动起来。

（2）.首页index导航菜单

在盒模型中利用无序列表制作，并加入一幅动画，动画主题为我们生活中的衣食住行。

截取部分代码如下：