《环保》课程设计

目录

1、设计主题 (1)

2、设计思路 (1)

3、设计过程概要 (1)

4、详细设计方案 (1)

4.1构思 (2)

4.2页面制作 (4)

4.3按照上述方法分别作出其他的页面 (10)

4.4检查每个页面的浏览效果 (11)

5、总结与体会 (11)

网站《环保》

一、设计主题

《环保》

二、设计思路

人类在经过漫长的奋斗历程后,在改造自然和发展社会经济方面取得了辉煌的业绩,与此同时,生态破坏与环境污染,对人类的生存和发展已构成了现实威胁。保护和改善生态环境,实现人类社会的持续发展,是全人类紧迫而艰巨的任务。因此,环境保护与实现可持续发展,是重要的任务。保护环境是实现可持续发展的前提,也只有实现了可持续发展,生态环境才能真正得到有效的保护,保护生态环境,确保人与自然的和谐,是经济能够得到进一步发展的前提,也是人类文明得以延续的保证。

三、设计过程概要

1、设计主题（环境保护）。

2、确定界面的框架、内容及色彩搭配（以绿色为主色调）。

3、准备所需要的素材（包括图片与文字、相关的代码）。

4、在PS中设计页面，进行切片。

5、在桌面新建一个文件夹“环保”，在该文件夹内新建文件夹“images”和“css”。

6、准备好切片并将其放入文件夹“images”内。

7、打开Adobe Dreamweaver CS4这个软件，新建一个名为“index.html”的html静态页面和一个名为“style.css”的层叠样式表在桌面文件夹“环保”内的“css”内，开始按照原来设计的页面来编辑此页面。

8、按照以上方法依次做出“about.html”、“blog.html”、“donate.html”、“gallery.html”、“programs.html”。

四、详细设计过程

4.1构思

1．第一步就是构思，构思好了，需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，如图4.11所示

图4.1

2.根据构思图来规划一下页面的布局，图片大致分为以下几个部分：

(1)顶部部分，其中又包括了LOGO、菜单和一些图片；

(2)内容部分又可分为侧边栏、主体内容；

(3)底部，包括一些版权信息。

3.根据上图，画一个实际的页面布局图，说明一下层的嵌套关系

DIV结构如下：

│body {} /*这是一个HTML元素，具体我就不说明了*/

└#Container {} /*页面层容器*/

├#Header {} /*页面头部*/

├#PageBody {} /*页面主体*/

│├#Sidebar {} /*侧边栏*/

│└#MainBody {} /*主体内容*/

└#Footer {} /*页面底部*/

4.2页面布局与规划已经完成，接下来开始书写HTML代码和CSS

1.启动Adobe Dreamweaver CS3

2.创建站点

（1）单击“Dreamweaver站点...”,出现“未命名站定1的站点定义为”对话框；

（2）如果对话框显示的是“高级”选项卡，则单击“基本”，出现“站点定义向导”的第一个界面，要求您为站点输入一个名称。在文本框中，输入一名称“健康的生活方式”，单击“下一步”，出现下一个界面，询问您是否

要使用服务器技术，选择“否，我不想使用服务器技术”选项；

(3)单击“下一步”，出现下一个界面，询问“在开发过程中，您要如何使

用您的文件”，选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项，在下面输入将文件存储在计算机上得位置，单击“下一步”，询问“是否要启用存回和取出文件以确保您和您的同事无法同时编辑同一个文件”，单击“否，不启用存回和取出。”

(4)单击“下一步”；

(5)单击“完成”，可在“文件”面板中看到所设置的站点；

3.为了制作方便，先打开资源管理器，把要使用的图片放到站点新建的images文件夹内；

4．进入页面编辑设计视图状态，给页面头部分加入一个背景图片，通过代码对首页顶部进行设置，代码如下：

.header {

background:url(../images/bg-header.jpg) repeat-x;

height:125px;

}

.header div {

margin:0 auto;

overflow:hidden;

padding:0 10px;

position:relative;

width:940px;

}

.header div a#logo {

float:left;

left:8px;

position:absolute;

top:44px;

}

.header div div {

float:right;

margin:0;

padding:0;

position:static;

width:475px;

}

.header div div > a {

display:block;

float:right;

margin:0 19px 0 0;

width:201px;

height:58px;

background:url(../images/interface.png) no-repeat 0 -67px; text-indent:-99999px;

}

.header div div > a:hover {

background:url(../images/interface.png) no-repeat 0 -126px; }

.header div div ul {

clear:both;

list-style:none;

margin:0;

overflow:hidden;

padding:21px 0 0;

}

.header div div ul li:first-child {

margin:0;

}

.header div div ul li {

float:left;

margin:0 0 0 30px;

}

.header div div ul li a:first-child {

color:#fff;

display:inline;

float:none;

font-family:rokkittbold;

font-size:16px;

letter-spacing:.025em;

line-height:24px;

margin:0;

text-decoration:none;

text-shadow:2px 3px 2px #000;

}

.header div div ul li a:hover, .header div div ul li.selected a { color:#fff600!important;

}效果如图4.4所示；

图4.4

5.对TOP部分进行分析并将DIV结构写入Header中代码如下：

alt="logo">

donate

• 首页
• 相关
• 活动
• 收集
• 联系
• 留言

效果如图4.5所示；

图4.5

6.对body部分的详细设置

As The Saying Goes..
You Don’t Know What You’ve Got
‘Till It’s Gone.

Plant A Tree.

Grow A Tree.

Save The Future.

src="images/help-out.jpg" alt="">

只有人人贡献一份力量，我们的家园才会变得更美丽，保护环境应该从我们身边的小事做起，从每一个人做起。让我们一起来保护我们这个美丽而脆弱的地球。

活动

• src="images/top-program1.jpg" alt="">

  植绿护绿

  没有森林和植被等绿色，便没有人类，没有地球上的绝大多数生命。多植一棵树、多种一片草、多养一盆花、多增加一些绿色，都是每个人应尽的义务。

• src="images/top-program2.jpg" alt="">

  节约资源

  我们只有一个地球，资源有限，生活在地球上的人却不断增长。节约用水、节约纸张，使用可再生的资源、分类回收废物，生

  活简朴等等，都是节约资源。

src="images/what-we-do.jpg" alt="">

绿，来自您的手。种植一棵树木，创造一片森林，只有人与自然协调发展，才能共同拥有美好的明天。用绿色植被把我们的地球覆盖起来。哪里有绿色，哪里就有生命。

最近留言公布

• src="images/blog-post1.jpg" alt="">

  留言标题一

  天然草原是我国生态环境稳定的重要保障。草原生态系统具有特殊的生态环境意义，对社会、经济、生态及人类社会的可持续发展具有极其重要的影响。

• src="images/blog-post2.jpg" alt="">

  留言标题二

  白色污染在各种公共场所到处都能看见，大量废弃的塑料制品，响了大自然的生态环境。只有提高人们的环保意识，才是解决“白色污染”最可行的办法。

效果如图4.6所示；

图4.6

7. 对footer部分的详细设置

• 首页

• 相关

• 活动

• 收集

• 联系

• 留言

© 2023 World Tree PreservationAll rights reserved

效果如图4.7所示；

图4.7

4.3按照上述方法分别作出其他的页面

1．在PS中设计出其他页面的主页面

2.利用Adobe Dreamweaver CS4软件做出其他的页面链接

4.4检查每个页面的浏览效果

1、不断地浏览这几个页面并检查相互之间的链接情况。

2、整理文件夹。如图5.8所示；

图5.8

五、课程设计收获和体会

在制作时，采用参照、临摹实例的方法来开始学习Dreamweaver的，这种方法的优点是感觉能够较快入门，缺点也是显而易见的，就是不利于对css整体结构的理解和掌握。制作过程中，也遇到了一些困难，发现需要学习的还很多，很多方面的知识还需要好好学习和钻研，同时也帮助我们把学过的知识又温习了一遍，将我们的基础扎牢固。同时，也呼吁每个人为保护我们美丽的家园