环境保护网站设计

《环境保护》网站设计

一．前言

20 世纪以来，科技进步和社会生产力的提高，使人类得以创造出前所未有的物质财富。但与此同时，人口剧增、资源过度消耗、环境污染。生态破坏、国家或地区之间贫富差距扩大等全球性问题也日益突出，严重阻碍了人类社会的长远发展和生活质量的提高，甚至对人类未来的生存和发展构成了威胁。特别是这几年地球生态环境被破坏很大，造成了很多的水土流失，动物灭种，自然灾害频繁发生，从那年的干旱开始这几年出现了洪水、雪灾、地震差不多每年都会出现一次重大的自然灾害。这就是人类破坏了自然的后果，做这个网站就是为了提倡大家关爱自然，尊重生命，保护自然环境，维护生态平衡，毕竟我们只有一个地球。二．总体设计

做网站前我浏览了国家环保局的网站与各种关于环境保护的网站，最后我、确定我的网站主要实现让人们可以从我的网站了解环保法规、了解环保知识、宣传环保广告等功能，确定了网站要实现的功能后，就是着手画网站草图了，浏览与参考了很多网站后终于成功画出网站的草图，并根据草图最终完成网站制作。网站逻辑图如下

三．详细设计

1.草图的设计，浏览了各大环保网站后,我已在心中确定了我的环保网站的大体布局,并成功的建立网站草图.

2.布局的规划，第一步新建“HTML”在新建的空白网页的”工具栏”选项卡中选中”布局”由于在网页中”层”不好固定位置,所以我选用表格布局,进入布局模式选用”绘制布局单元格”在空白网页中根据先前设计的个人网站草图绘出网页的框架. 根据个人网站显示的需要更改表格布局的属性值, 最后成功完成了网站主页的布局设计,并根据需要调整好页面的布局表格属性值.

网站的布局

3. 网页背景的设计

a.打开Adobe Photoshop CS2根据网页页面的要求建立相应大小的空白图片,然后在新建的图片上进行处理.

b.使用各工具对网页背景的大体颜色进行喷绘,为使网站的背景颜色不会太过死板生硬,将各工具的”硬度”调整为0.

c.使用Adobe Photoshop CS2中的钢笔路径工具裁取网页背景所需要的装饰图片

1.打开需要抠图的图片在Adobe Photoshop CS2的工具栏上选中”钢笔”工具并将其改为”路径描点”模式.

2.使用钢笔工具描出需要抠取图片,描点完成后同时按住键盘

上”ctrl”+”enter”完成路径的合并,将图选中.

3.切换到刚刚新建的网站背景图,将刚刚抠取的图片粘贴进去.

4.重复抠图步骤剪取背景所需的各种装饰图.对网站背景进行美化.

最后运用了Adobe Photoshop CS2将所有网页页面的背景模板都按照草图要求美化。完成了整个网站各页面的背景模板的美化设计.

我设计的网页背景图

4.网页模板的建立，由于网站有很多网页是用的同一种风格，所以建立网页模板可以节省很多时间与精力，模板是做好一个网页的母版后，选择“文件“里的”另存为模板“，如果计算机以前没有建立站点，存模板时会提示建立站点，站点的文件夹要设为网页保存的文件夹，最后成功的建立了模板并运用模板建立了多个子网页。

网站的模板

5.广告页面flash的设计，1．打开Flash，在开始页上选择“从模板创建”中的“幻灯片演示文稿”，在弹出的对话框中选择一模板，如“科技幻灯片演示文稿”，然后“确定”即可。如果没有开始页，不要紧，可以单击菜单“文件”中的“新建”，也可出现该对话框。2．打开后如下图所示，在Flash中的幻灯片和PowerPoint结构略有不同，它是一个倒挂的树形结构。树根只有一个，在幻灯片演示中一直存在，一般用来做背景；同级之间是兄弟关系，默认情况是“替换”，也就是说第二张幻灯片如果与第一张幻灯片同在一级，当第二张幻灯片出现时，第一张幻灯片消失；还有上下级关系，与上级之间默认情况是“叠加”关系，也就是说，如果第二张幻灯片是第一张幻灯片的下级，当第二张幻灯片出现时，它是加在第一张幻灯片上面的。3．当然，模板给的幻灯片个数可能与所需幻灯片不一样，也可以自己添加幻灯片或删除它。在需要添加或删除的幻灯片上单击鼠标右键，如下图，可以很方便地添加或添除它。当选择“插入屏幕”时，插入的幻灯片与所选幻灯片同级并在所选幻灯片的下方；当选择“插入嵌套屏幕”时，插入的幻灯片与所选幻灯片是下级关系。好了，只要将每张幻灯片变成自己的内容，然后选择“文件->存盘”，再选择“文件->发布”，就会在保存文件的位置发现一个同名的swf文件，这就是制作出的幻灯片文件了。

四．心得体会

做完这个网站,让我真正的认识到一个成功的网站，先期的准备工作是很重要的，好的开始等于成功的一半。选择这个环保网站的建设的样式后，就要为目标而努力了。熟练掌握网页设计和图形处理的技巧是必须的，但经验是在实战中获得的，我们虽然刚开始学也不必因此而畏惧退缩，多多练习才会有提高。网站建设最重要的莫过于两个问题：设计和内容，素材的准备.

1、设计的要求：

第一、导航清晰，布局合理，层次分明，页面的链接层次不要太深，尽量让人第一眼看清网站的大体.

第二、保持统一的风格，有助于加深访问者对的网站的印象。要实现风格的统一，不一定要把每个栏目做得一模一样，举个例子来说，可以尝试让导航条样式统一，各个栏目采用不同的色彩搭配，在保持风格统一的同时为网站增加一些变化.

第三、色彩和谐、重点突出：在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美观的页面.

第四、界面清爽：要吸引访问者长时间的停留在的网站，千万不能让用户第一眼就感觉压抑。大量的文字内容要使用舒服的背景色，前景文字和背景之间要对比鲜明，这样访问者浏览时眼睛才不致疲劳。

第五、坚持原创：刚开始学做主页时，适当模仿别人的优秀设计是可取的，但模

仿绝不等同于抄袭，一定要把握好其中的尺度。设计是这样，内容的选取也是如此，多一些原创的内容，的主页才会带有更多的个性色彩；

第六、动态效果不宜太多：适当的动态效果可以起到画龙点睛的作用，过多的动态效果会让人眼花缭乱而抓不住主题。

2、技术运用中要注意的一些事项：

第一、明确技术是为设计服务的，不要沉迷于技术的运用，坚决摒弃那些华而不实的特效；

第二、先为站点定义好统一的外部CSS，内部页面都调用这个CSS，这样不但可以让的网页在浏览器改变设置时不变形，还有助于保持整个站点的风格统一，并且方便修改；

第三、不要打开过多的新窗口，每个链接都会打开不同的新窗口尤其让人反感；

第四、图象的制作要兼顾大小和美观，图片和文字的混排、图片的合理压缩可以让页面美观而且文件小巧。即使是个性十足的设计站点，浪费太多的时间在页面下载上也会令人生厌；

3.加深了网站设计的技术熟悉

这次对网站的设计让我对各种网站设计的技术和网站设计中应注意的问题以及网站设计中所运用的工具更加的了解与熟练.