关于雾霾网站设计

目录

 

1.关于雾霾网站功能描述

       1.1.关于雾霾网站需求分析

       1.2.基本功能

       1.3.上述五个模块的内容：

       1.4.系统流程分析

2.关于雾霾网站设计

3.关于雾霾网站实现

      3.1.CSS层叠样式表的源代码如下：

      3.2.各个页面完成情况，如下图所示：

4. 关于雾霾网站测试发布

     4.1.网站的测试

    4.2.网站的发布

5.站点维护

6.总结与体会

 

 

 

 

 

 

 

 

1.关于雾霾网站功能描述

1.1.关于雾霾网站需求分析

近年来随着科技的不断发展，我们也越来越关注身边环境的变化。自然与人类是相互依存的关系，由于科技发展的越来越快，对自然的索取也越来越多，过度的索取，必然会受到环境的惩罚，近年来越来越多的地区出现了雾霾天气，尤其是华北和中东部地区的城市。这就是自然环境无法承受人类过度开发和利用所带来的环境崩溃。雾霾，顾名思义是雾和霾。但是雾和霾的区别很大。空气中的灰尘、硫酸、硝酸等颗粒物组成的气溶胶系统造成视觉障碍的叫霾。

霾就是灰霾(烟霞)。空气中的灰尘、硫酸、硝酸、有机碳氢化合物等粒子也能使大气混浊。将目标物的水平能见度在1000~10000米的这种现象称为轻雾或霭(Mist)。形成雾时大气湿度应该是饱和的(如有大量凝结核存在时，相对湿度不一定达到100%就可能出现饱和)。由于液态水或冰晶组成的雾散射的光与波长关系不大，因而雾看起来呈乳白色或青白色和灰色。

雾霾天气是一种大气污染状态，雾霾是对大气中各种悬浮颗粒物含量超标的笼统表述，尤其是PM2.5(空气动力学当量直径小于等于2.5微米的颗粒物)被认为是造成雾霾天气的"元凶"。随着空气质量的恶化，阴霾天气现象出现增多，危害加重。中国不少地区把阴霾天气现象并入雾一起作为灾害性天气预警预报。统称为"雾霾天气"。

为了更好的治理环境，城市环境的优化和保持，不仅需要城市管理者科学制定规划纲要，对经济产业和重点进行有效控制，同时也需要我们每一个人从我做起，自觉爱护环境。因此做出关于雾霾的网站，让人们更好的了解雾霾。

1.2.基本功能

关于雾霾网站分别为首页、基本含义、组成成分、预防措施和具体危害这五个功能模块。

图1.2 网站的五个功能模块

 

1.3.上述五个模块的内容：

网站首页：介绍了雾霾天气以及示例城市（西安）的近五年雾霾数据；

基本含义：描述了雾和霾的区别；

组成成分：简述了雾霾的成分；

预防措施：讲解了在雾霾天气外出时的自我保护的方法；

具体危害：雾霾对我们的危害。

1.4.系统流程分析

当人们进入网站后，即可看见首页的雾霾天气的简介，即可知道这是一个关于雾霾的网站，想要了解更多与雾霾相关的内容，点击其他模块即可看到 。

 

2.关于雾霾网站设计

网站主要页面栏目名称

 

                          图2.1 本地目录和文件

页面名称	说明	对应需求设计页面
index.html	网站主页面	首页
a.html	雾霾的基本含义的页面	基本含义
b.html	雾霾的组成成分的页面	组成成分
c.html	雾霾天气出行时的预防措施的页面	预防措施
d.html	雾霾的具体危害的页面	具体危害
css	修饰网页	定义每个页面的外部样式
img	网站各个页面中所用到的图片	图片

 

3.关于雾霾网站实现

网页整体以棕色和灰色为主色调，网页设计由HTML超文本标记语言、CSS层叠样式表构成。其中HTML主要做整个网页的基本架构，CSS用于为网页文档中的元素添加各类样式，给网页添加色彩。

3.1.CSS层叠样式表的源代码如下：

/*
/
*/
body {
	margin: 0;
	padding:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.5em;
	color: #666666;
	background: #595248;
}

a:link, a:visited { color: #8dc641; text-decoration: none; } 
a:active, a:hover { color: #8dc641; text-decoration: none }

h1 {
	height: 33px;
	font-size: 20px;
	font-weight: bold;
	color: #e6dc18;
	padding-left: 30px;
	padding-top: 30px;
	background: url(img/templatemo_h1.jpg) no-repeat;
}
h2 {
	padding-left: 30px;
	padding-top: 10px;
	font-size: 16px;
	font-weight: bold;
	color: #84a50f;
	background: url(img/templatemo_gray.jpg) no-repeat;
}

#templatemo_container {
	width: 775px;
	margin: auto;
}
#templatemo_header {
	height: 216px;
	background: url(img/templatemo_header.jpg) no-repeat;
}
.templatemo_menu{
	float: left;
	width: 775px;
	height: 35px;
	margin: 0px;
	padding: 0px;
}
.templatemo_menu ul {
	margin: 0px;
	padding-left: 25px;
	padding-top: 10px;
	list-style: none;
}
.templatemo_menu li{
	display: inline;
}
.templatemo_menu li a{
	float: left;
	padding: 8px 0px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #fff;
	width: 97px;
}
.templatemo_menu li a:hover{
	color: #3e3e3e;
}
#templatemo_site_title {
	float: right;
	margin-right: 30px;
	margin-top: 90px;
	width: 700px;
	color: #4e4a41;
	font-weight: bold;
	font-size: 22px;
	text-align: right;
}
#templatemo_slogan {
	float: right;
	width: 700px;
	margin: 10px;
	text-align: right;
	font-weight: bold;
	height: 20px;
}
#templatemo_content {
	float: left;
	width: 775px;
	background: url(img/templatemo_content_bg.jpg) repeat-x;
}
#templatemo_content_left{
	float: left;
	width: 520px;
}
#templatemo_content_right {
	float: right;
	width: 238px;
}
#templatemo_content p{
	padding-left: 30px;
	padding-right: 30px;
	text-align: justify;
}
#templatemo_content img {
	float: right;
}
#templatemo_content_bot {
	float: left;
	width: 775px;
	background: #f1eee6;
}
#templatemo_content_bot li{
	padding-left: 0px;
	padding-right: 30px;
	text-align: justify;
}
#templatemo_content_bot strong {
	color:#6ba122;
	text-decoration: underline;
}
#templatemo_content_bot p {
	padding-left: 30px;
	padding-right: 10px;
	text-align: justify;	
}
.templatemo_bottom_text_left {
	float: left;
	width: 490px;
}
.templatemo_bottom_text_right {
	float: right;
	padding-right: 20px;
	width: 250px;
}
#templatemo_footer {
	float: left;
	width: 775px;
	height: 30px;
	padding-top: 10px;
	background: #d8d0c5;
	font-weight: bold;
	text-align: center;
}

 

3.2.各个页面完成情况，如下图所示：

 

图3.1 首页展示图

 

 

图3.2  基本含义页面展示图

 图3.3 组成成分页面展示图

 图3.4 预防措施页面展示图

 图3.5 具体危害页面展示图

1. 关于雾霾网站测试发布

4.1.网站的测试

目前网络安全问题日益重要，特别是对由交互信息的网站及进行电子商务活动的网站尤其重要。网站制作好之后还需要检查是否存在错误链接、网页在不同浏览器之间的兼容性、网站的安全性以及网站在运行中整个系统是否运行正常。

4.2.网站的发布

4.2.1.域名申请

通过购买主机来获取空间，将会得到一个FTP主机的IP地址，登录账号和登录密码和访问空间的域名。

4.2.2.设置FTP站点空间

4.2.3.上传网页

上传完成后在浏览器地址栏中输入网站网址即可访问。

5.站点维护

网站内容的更新和维护，我们需要适时的更新网站的内容，不但要更新首页的内容也需要更新栏目的内容，让其保持在一个最新的状态并确保网站的安全性以及稳定性。

6.总结与体会

通过本次关于雾霾的网站设计，更好的了解了HTML文档是由HTML标签组成的描述性文本，HTML标签可以说明文字、图形、动画 、声音、连接等。HTML的结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需要的信息，而主体则包含所要说明的具体内容。CSS不仅可以静态的修饰网页，还可以配合各种脚本语言动态的对网页中的各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级的精确控制，并且支持几乎所有的字体、字号样式，拥有对网页的对象和模型样式进行编辑的能力。这次的网站设计将课本中学习到的理论知识运用到了实践中，更好的掌握了书本中的知识，让我收获颇丰。

附：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>关于雾霾</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="templatemo_container">
  <div id="templatemo_header">
    <div class="templatemo_menu">
      <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="a.html">基本含义</a></li>
        <li><a href="b.html">组成成分</a></li>
        <li><a href="c.html">预防措施</a></li>
        <li><a href="d.html">具体危害</a></li>
      </ul>
    </div>
    <div id="templatemo_site_title">近五年雾霾</div>
  </div>
  <div id="templatemo_content_bot">
    <h2>介绍</h2>
    <ul>
      <li>雾霾，是雾和霾的组合词。雾霾常见于城市。中国不少地区将雾并入霾一起作为灾害性天气现象进行预警预报，统称为"雾霾天气"。雾霾是特定气候条件与人类活动相互作用的结果。高密度人口的经济及社会活动必然会排放大量细颗粒物（PM 2.5），一旦排放超过大气循环能力和承载度，细颗粒物浓度将持续积聚，此时如果受静稳天气等影响，极易出现大范围的雾霾。
以西安为例：2019年的一波雾霾给了西安市民一记下马威，很多市民喊出“逃离西安”，去海岛躲避来势凶猛的污染天。

今天（1月22日），西安市铁腕治霾办公布2018年的相关数据：2018年，西安市优良天数188天，同比增加8天。重度及以上污染天数为29天，同比减少10天。2018年西安市收获21个优级天数，9月5日至10月11日，创下空气质量连续优良37天的最长记录。

自从2012年2月29日，《环境空气质量标准》将PM2.5监测纳入标准，西安市2013年1月1日正式实行后，如今已6年。西安的空气质量好转了吗?</li>
      <li><br />
      <img src="img/雾霾数据.jpeg" width="300" /></li>
    </ul>
    <p>----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
  </div>
  <div id="templatemo_footer">小杨&copy;<a href="#" target="_parent"></a></div>
</div>
</body>
</html>