一、设计背景及主题
（一）设计背景
在经济发展日新月异的今天，人们的生活水平有了显著的提高，但仍有部分人生活在水生火热中，这就使得越来越多的人伸出援助之手，用自己的爱心拂去他们心头的阴霾。而作为当代大学生的我们，更应该承担起时代责任，在公益活动中，实现个人对社会的价值，有利于我们积极承担社会责任，为我们树立正确的人生观，价值观起到了关键作用。
所谓青年智则国智，青年强则国强，青年热爱公益则国家风行公益。中国的未来靠青年一代，青年的整个精神状态决定着整个国家和民族的未来，青年的广大代表是当今的大学生，大学生中最活跃的是学生社团。所以说重视高校社团公益的发展，才能推动高校公益事业的发展和繁荣，也才能推动整个社会的和谐发展！
因此，我以“爱心公益”为主题设计该网页，希望能为我国的公益事业尽自己的绵薄之力。

（二）设计主题
在该次网页设计中，我选择以“爱心公益”为网站主题，并通过公益项目、公益图集以及公益新闻来增强网站的丰富性和广泛性从而使人们关注到“爱心公益”的活动当中，而志愿者报名这一部分则是为部分志愿者提供做公益事业的平台，使得我国公益事业愈发强大。
下面我对该网站各个部分做如下简述：
◎公益项目主要是对有关公益的各个项目的介绍和宣传，加深用户对于各类公益项目的了解。
◎公益图集主要是人们在做公益的过程中所拍的照片对用户进行一个共享，使得用户更加直观的了解公益事业，感受到来自公益事业的热情。
◎公益新闻主要是对时实公益新闻的一个转播，满足用户对于当即时段的公益报道的信息需求，激发用用户对于公益事业的热情。
◎志愿者报名主要是为有志愿公益意愿的用户提供机会，收集	并统计志愿者的信息。

二、设计思路及技术说明
（一）设计思路
1、确定网站名称
根据“爱心公益”的主题，我选择以“公益小站”为网站主标题，以“让爱不停歇”为网站副标题，较为符合爱心公益的网站主题，增强用户的归属感，能够引发用户的浏览兴趣。

2、构析网站结构及风格
网站链接结构：星状链接结构，类似服务器的链接结构，每个页面之间都建立有链接，便于用户浏览各个页面。
网站风格：主要特点为简约大气，便于用户操作，因此选择将导航栏置于最顶端，各个页面均以导航栏和页面图片为首，然后对各个部分的内容作出详细介绍。
网站标准色调：考虑到该网站的主题及受众群体，我选择以红色作为该网站的主色调，体现网站热情有爱情的主题氛围。
网站栏目：网站栏目主要设计为五大部分，分别首页、公益项目、公益图集、公益新闻、志愿者报名。

3、搜集网站资料
通过百度来搜索有关“爱心公益”的新闻、项目和图片为网站的建立做准备。

4、确立网站目录结构
网站文件以“爱心公益小站”为文件夹名，按文件类型设置css、img、js三个目录存放不同类型的网页文件。

（二）技术说明
硬件环境：Windows 10操作系统
软件需求：VScode
网页图片来源：https://www.pexels.com/videos/

三、制作及开发过程
（一）导航栏
        <div class="logo">爱心公益小站</div>
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="xiangmu.html">公益项目</a></li>
            <li><a href="xinwen.html">公益新闻</a></li>
            <li><a href="tuji.html">公益图集</a></li>
            <li><a href="baoming.html">志愿者报名</a></li>
        </ul>
    </div>


（二）Index页面主要代码
        <div id="oldman" class="tabcontent">
            <h1>空巢老人</h1>
            <p>以人为本，善待老人。</p>
          </div>
          
          <div id="children" class="tabcontent">
            <h1>留守儿童</h1>
            <p>心系校园,情系留守儿童</p> 
          </div>
          
          <div id="poor" class="tabcontent"> 
            <h1>扶贫助贫</h1>
            <p>精准识别贫困人口,脱贫攻坚致富幸福。</p>
          </div>
          <button id="defaultOpen" class="tablink" οnclick="openPicture(event,'oldman')" >空巢老人</button>
          <button class="tablink" οnclick="openPicture(event,'children')">留守儿童</button>
          <button class="tablink" οnclick="openPicture(event,'poor')">扶贫助贫</button>
          <script>
               document.getElementById("defaultOpen").click();
          </script>
    </div>
    <br>
    <br>
    <div class="main"><!--中间内容-->
        <div class="aboutus"><!--关于我们-->
            <img src="https://images.pexels.com/photos/1098795/pexels-photo-1098795.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">
            <p>
                公益是个人或组织自愿通过做好事、行善举而提供给社会公众的公共产品。在这里，做好事、行善举是对个人或组织行为的价值判断；
                行动的结果是向非特定的社会成员提供公益产品。
            </p>
            <p>
                公益活动是现代社会条件下的产物，是公民参与精神的表征。公益活动要生产出有利于提升公共安全、有利于增加社会福利的公共产品。
                在组织公益活动时，要遵循公德、符合公意，努力形成参与者多赢共益的良好氛围。因而，公益活动至少应包含公民、公共、公德、公
                意和共益等五个要素。
            </p>
        </div>
        <div class="gonggao"><!--活动公告-->
            <div class="title"><img src="images/laba.png">活动公告</div>
            <ul>
                <li><a href="#">免费午餐计划，帮助孩子们免于饥饿</a></li>
                <li><a href="#">免费午餐计划，帮助孩子们免于饥饿</a></li>
                <li><a href="#">免费午餐计划，帮助孩子们免于饥饿</a></li>
                <li><a href="#">免费午餐计划，帮助孩子们免于饥饿</a></li>
                <li><a href="#">免费午餐计划，帮助孩子们免于饥饿</a></li>
                <li><a href="#">免费午餐计划，帮助孩子们免于饥饿</a></li>
                <li><a href="#">免费午餐计划，帮助孩子们免于饥饿</a></li>
            </ul>
        </div>  
        <div class="jinxing"><!--公益进行中-->
            <div class="title"><span>公益进行中</span><a href="xiangmu.html">查看更多+</a></div>
            <ul>
                <li>
                    <img src="images/jinxing1.jpg">
                    <p class="p1">让空巢老人“老有所依”</p>
                    <p class="p2">
                        近年来，随着大量农村青壮年劳动力外出务工，农村中出现了规模庞大的空巢老人群体，
                        本应安享晚年的他们是否真的“老有所养、老有所乐”？
                    </p>
                    <a href="xiangqing1.html">查看详情</a>
                </li>
                <li>
                    <img src="images/jinxing2.jpg">
                    <p class="p1">关爱贫困留守儿童</p>
                    <p class="p2">
                        在中国有这样一个弱势群体。他们的父母为了生计远走他乡离开年幼的孩子，外出打工，
                        用勤劳获取家庭收入，为经济发展和社会稳定作…
                    </p>
                    <a href="xiangqing1.html">查看详情</a>
                </li>
                <li>
                    <img src="images/jinxing3.jpg">
                    <p class="p1">乡村支教美丽中国</p>
                    <p class="p2">
                        我们说教育改变命运，但对于乡村的孩子，谁在引导他们的人生？有这么一群年轻人，他们相信，
                        这些孩子跟你我没什么不同，推一把，他们的…
                    </p>
                    <a href="xiangqing1.html">查看详情</a>
                </li>
                <li>
                    <img src="images/jinxing4.jpg">
                    <p class="p1">为阅读插上爱的翅膀</p>
                    <p class="p2">
                        “开学我最期待的事，就是拆开新书闻里面的味道”——这也是众多乡村儿童的心声，他们渴望通过书籍
                        看到广阔的世界。让远方的小伙伴…
                    </p>
                    <a href="xiangqing1.html">查看详情</a>
                </li>               
            </ul>
        </div>      
</div>



（三）网站底部
      <p>@Copyright 2020  <br>Design by Zhao Pengru</p>
      
  </div>


（三）公益项目页面主要代码
       <img src="https://images.pexels.com/photos/1362910/pexels-photo-1362910.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500">
   </div>
   <div class="main"><!--中间内容-->
       <div class="xiangmu"><!--公益项目-->
           <div class="title"><span>公益项目</span></div>
           <ul>
               <li>
                   <img src="images/jinxing1.jpg">
                   <p class="p1">让空巢老人“老有所依”</p>
                   <p class="p2">
                       近年来，随着大量农村青壮年劳动力外出务工，农村中出现了规模庞大的空巢老人群体，
                       本应安享晚年的他们是否真的“老有所养、老有所乐”？空巢老人问题不是一个简单的个
                       人问题，已经成为我国亟待破解的社会命题。早在1999国际老年人年，国际卫生组织就
                       提出了“积极老龄化”的观点，即通过倡导积极老龄化，最大限度地增加健康、参与和保
                       障的机会，以实现尽可能延长人类健康预期寿命，提高老年期生活质量的目标。
                   </p>
                   <a href="xiangqing1.html">查看详情</a>
               </li>
               <li>
                   <img src="images/jinxing2.jpg">
                   <p class="p1">关爱贫困留守儿童</p>
                   <p class="p2">
                       在中国有这样一个弱势群体。他们的父母为了生计远走他乡离开年幼的孩子，外出打工，
                       用勤劳获取家庭收入，为经济发展和社会稳定作出了贡献，但他们却留在了农村家里，与
                       父母相伴的时间微乎其微，包括内地城市，也有父母双双外出去繁华都市打工。这些本应
                       是父母掌上明珠的儿童集中起来便成了一个特殊的群体———留守儿童。
                   </p>
                   <a href="xiangqing1.html">查看详情</a>
               </li>
               <li>
                   <img src="images/jinxing3.jpg">
                   <p class="p1">乡村支教美丽中国</p>
                   <p class="p2">
                       我们说教育改变命运，但对于乡村的孩子，谁在引导他们的人生？有这么一群年轻人，他们相信，
                       这些孩子跟你我没什么不同，推一把，他们的梦也能实现，这些人正在农村教书，两年。我们相信：
                       所有中国孩子，无论出身，都应该享有同等的优质教育。我们需要您的支持，来共同实现这个愿景。
                   </p>
                   <a href="xiangqing1.html">查看详情</a>
               </li>
               <li>
                   <img src="images/jinxing4.jpg">
                   <p class="p1">为阅读插上爱的翅膀</p>
                   <p class="p2">
                       “开学我最期待的事，就是拆开新书闻里面的味道”——这也是众多乡村儿童的心声，他们渴望通过书籍
                       看到广阔的世界。让远方的小伙伴都有书可读。赠人书籍手有余香，让我们为阅读插上爱的翅膀，捐赠
                       图书给乡村儿童。
                   </p>
                   <a href="xiangqing1.html">查看详情</a>
               </li>
               <li>
                   <img src="images/jinxing5.jpg">
                   <p class="p1">让每个人都能喝上干净水</p>
                   <p class="p2">
                       近年来，全国各地水污染事件频发，再次敲响了生态环保的警钟，水是生命之源，没有老百姓的饮水安全，
                       何来民生幸福？有效提高饮用水水源保护区环境应急管理能力，保障群众饮水安全是一件大事。
                   </p>
                   <a href="xiangqing1.html">查看详情</a>
               </li>                   
           </ul>           
       </div>      
   </div>


（五）公益图集页面主要部分
     <img src="https://images.pexels.com/photos/1739855/pexels-photo-1739855.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500">
 </div>
 <div class="main"><!--中间内容-->
     <div class="tuji"><!--公益图集-->
         <div class="title"><span>公益图集</span></div>
         <ul>
             <li>
                 <img src="images/tuji1.jpg">
                 <p>慰问留守儿童送书包活动</p>
             </li>
             <li>
                 <img src="images/tuji2.jpg">
                 <p>志愿者们给空巢老人免费健康检查</p>
             </li>
             <li>
                 <img src="images/tuji3.jpg">
                 <p>“分享温暖，爱心传递”捐书活动</p>
             </li>
             <li>
                 <img src="images/tuji4.jpg">
                 <p>奉献青春乡村支教</p>
             </li>                   
         </ul>           
     </div>      
 </div>


（六）公益新闻页面主要部分
      <img src="https://images.pexels.com/photos/1344275/pexels-photo-1344275.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500">
  </div>
  <div class="main"><!--中间内容-->
      <div class="xinwen"><!--公益新闻-->
          <div class="title"><span>公益新闻</span></div>
          <ul>
              <li>
                  <p><a href="xiangqing2.html">爱心捐书，点亮全城 | 让边远山区的孩子有书看 </a></p>
                  <span>2019-06-26</span>
                 
          </ul>           
      </div>      
  </div>


（七） 志愿者报名页面
      <div class="baoming"><!--志愿者报名-->
          <div class="title"><span>志愿者报名</span></div>
          <p>电话报名：010-12345678</p>
          <p>在线报名：</p>
          <div class="input-box">
              <span>姓名：</span>
              <input type="text"/>
          </div>
          <div class="input-box">
              <span>电话：</span>
              <input type="text"/>
          </div>
          <div class="input-box">
              <span>报名项目:</span>
              <input type="text"/>
          </div>
          <input type="button" value="报名" class="button"/>
      </div>      
</div>

（十）Css部分
*{margin:0;padding:0;}
ul,li{list-style:none;}
a{text-decoration:none;}
body{font-size:14px;}
/*导航*/
.nav{width:1000px;height:40px;line-height:40px;margin:auto;background:#dd3b30;}
.nav .logo{font-size:20px;font-weight:bold;color:#fff;float:left;margin-left:20px;}
.nav ul{float:right;}
.nav li{float:left;}
.nav li a{display:block;width:120px;height:40px;color:#fff;text-align:center;}
.nav li a:hover{background:#9b211f;}
/*banner*/
.banner{width:1000px;margin:auto;}
.banner img{height: 500px;width: 100%;}
/*首页中间内容*/
.main{width:1000px;overflow:hidden;margin:20px auto;}
.aboutus{width:700px;float:left;}
.aboutus img{width:280px;height:200px;float:left;margin-right:20px;}
.aboutus p{text-indent:28px;line-height:26px;}
.gonggao{width:280px;float:right;}
.gonggao .title{width:100%;height:30px;line-height:30px;background-color:#dd3b30;color:#fff;font-size:20px;}
.gonggao .title img{height:20px;float:left;margin:5px;}
.gonggao ul{width:260px;margin:auto;}
.gonggao li{height:26px;line-height:26px;background:url(../images/xin.jpg) no-repeat left center;text-indent:20px;overflow:hidden;}
.gonggao li a{color:#000;}
.gonggao li a:hover{color:#dd3b30;}
.jinxing{width:100%;clear:both;padding-top:10px;overflow:hidden;}
.jinxing .title{height:30px;line-height:30px;border-bottom:1px solid #dd3b30;font-size:20px;color:#dd3b30;}
.jinxing .title span{display:block;width:100px;height:30px;border-bottom:3px solid #dd3b30;text-align:center;float:left;}
.jinxing .title a{float:right;font-size:14px;color:#333;}
.jinxing .title a:hover{text-decoration:underline;}
.jinxing ul{padding-top:10px;}
.jinxing li{width:240px;margin:5px;float:left;background:#f2f2f2;}
.jinxing li img{width:240px;height:180px;}
.jinxing li p{width:230px;margin:auto;}
.jinxing li .p1{font-size:16px;height:30px;line-height:30px;font-weight:bold;overflow:hidden;}
.jinxing li .p2{line-height:20px;height:80px;overflow:hidden;}
.jinxing li a{display:block;width:100px;height:30px;line-height:30px;border-radius:15px;border:1px solid #dd3b30;margin:10px auto;text-align:center;color:#dd3b30;}
.jinxing li a:hover{background:#dd3b30;color:#fff;}
/*底部*/
.footer{ width:1000px;margin:auto;background:#dd3b30;padding-top:10px;padding-bottom:10px;}
.footer p{font-size:15px;line-height:30px;text-align:center;color:#fff;}
/*公益项目*/
.xiangmu .title{font-size:20px;color:#fff;text-align:center;}
.xiangmu .title span{display:block;width:200px;height:30px;line-height:30px;margin:auto;background:#dd3b30;}
.xiangmu li{width:100%;height:180px;background:#f2f2f2;margin-top:20px;}
.xiangmu li img{width:240px;height:180px;float:left;margin-right:20px;}
.xiangmu li p{width:720px;float:left;}
.xiangmu li .p1{font-size:16px;height:30px;line-height:30px;font-weight:bold;overflow:hidden;margin-top:10px;}
.xiangmu li .p2{line-height:24px;height:96px;overflow:hidden;}
.xiangmu li a{display:block;width:100px;height:30px;line-height:30px;border-radius:15px;border:1px solid #dd3b30;float:right;text-align:center;
    color:#dd3b30;margin-right:20px;}
.xiangmu li a:hover{background:#dd3b30;color:#fff;}
/*公益新闻*/
.xinwen .title{font-size:20px;color:#fff;text-align:center;}
.xinwen .title span{display:block;width:200px;height:30px;line-height:30px;margin:auto;background:#dd3b30;}
.xinwen li{width:100%;height:40px;line-height:40px;border-bottom:1px dashed #dd3b30;}
.xinwen li p{width:800px;float:left;overflow:hidden;}
.xinwen li a{color:#333;font-size:16px;font-weight:bold;}
.xinwen li a:hover{color:#dd3b30;}
.xinwen li span{float:right;}
/*公益图集*/
.tuji .title{font-size:20px;color:#fff;text-align:center;}
.tuji .title span{display:block;width:200px;height:30px;line-height:30px;margin:auto;background:#dd3b30;}
.tuji ul{margin-top:10px;}
.tuji li{width:480px;float:left;margin:10px;}
.tuji li img{display:block;width:480px;height:320px;}
.tuji li p{width:100%;height:30px;line-height:30px;background:#dd3b30;color:#fff;text-align:center;font-size:20px;}
/*报名*/
.baoming .title{font-size:20px;color:#fff;text-align:center;}
.baoming .title span{display:block;width:200px;height:30px;line-height:30px;margin:auto;background:#dd3b30;}
.baoming p{font-size:20px;line-height:30px;margin-bottom:20px;}
.baoming .input-box{height:30px;line-height:30px;font-size:20px;margin-bottom:20px;}
.baoming .input-box span{display:block;width:100px;float:left;}
.baoming .input-box input{display:block;width:300px;height:28px;border:1px solid #333;}
.baoming .button{display:block;width:100px;height:30px;border:none;background:#dd3b30;color:#fff;font-size:20px;margin-left:150px;cursor:pointer;}
/*详情*/
.xiangqing .weizhi{height:30px;line-height:30px;border-bottom:1px solid #dd3b30;color:#000;}
.xiangqing .weizhi a{color:#000;}
.xiangqing .weizhi a:hover{text-decoration:underline;}
.xiangqing .pic1{float:right;margin-left:20px;margin-top:20px;}
.xiangqing .pic2{float:left;width:300px;margin-right:20px;margin-top:20px;}
.xiangqing .pic3{display:block;margin:auto;}
.xiangqing h3{text-align:center;line-height:30px;margin-top:10px;}
.xiangqing p{line-height:2;text-indent:28px;}
.xiangqing .btn{display:block;width:100px;height:30px;line-height:30px;border-radius:15px;border:1px solid #dd3b30;text-align:center;
    color:#dd3b30;margin:20px auto;}
.xiangqing .btn:hover{background:#dd3b30;color:#fff;}

.tablink {
    background-color: #dd3b30;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 33.3333333%;
}

.tablink:hover {
    background-color: #777;
}
.welcome1{
    width:1000px;
    margin:auto;
}
/* Style the tab content */
.tabcontent {
    color: white;
    display: none;
    padding: 50px;
    text-align: center;
}
#oldman{
    height: 350px;
    background-image: url("https://images.pexels.com/photos/2884575/pexels-photo-2884575.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"); 
}
#children{
    height: 350px;
    background-image: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2531661478,1804846467&fm=26&gp=0.jpg");
}
#poor{
    height: 350px;
    background-image: url("https://images.pexels.com/photos/1125850/pexels-photo-1125850.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500");}```

四、遇到的问题及解决方案
*问题一：如何消除图片的边距，是图片贴边展示？

问题描述：当我需要顶部的banner横向充满整个屏幕以显示宽屏效果时，把这个banner的width设置为100%，我们发现边上会有一些边距，如图：


解决方法；

在CSS的body中设置两个属性：

margin:0px;

padding:0px;


问题二：如何使得div随着嵌入其中的浮动div一起变大？

问题描述：一个DIV中嵌入浮动的层div，如果里面这个浮动的div加入内容变高之后，他的父层也就是外面的div是不会随着里面的div变大而变大的

解决方法：

要在父层的div的CSS中加入两个属性：

overflow:hidden;

zoom:1;

问题三：.margin-top,margin-bottom不能正常显示时，怎么办？

**解决方法：

在子层的前后加上一个
height:0;
overflow:hidden;
}

问题四：如何使得div的子层居底部对齐？

解决方法：运用position定位
#box{
position:relative;
border:1px solidred;
width:600px;
hegiht:400px;
}
    div子层
#box .wrap{
position:absolute;
bottom:0;border:1px dashedblue;
width:200px;
height:100px
}

问题五：排列时边框重叠问题

解决办法：设置，margin-right：-1px; margin-bottom: -1px;padding-bottom: 1px;来解决下边框隐藏问题。

静态网页
静态页面后缀：htm、html、shtml、xml；
特点：

静态网页主要指的是网页中没有程序代码，只有HTML（即：超文本标记语言）。
静态网页的页面一旦做成，内容就基本上不会再改变了。但是，静态网页也包括一些能动的部分，这些主要是一些GIF动画等。
静态网页的打开，用户可以直接双击，并且不管任何人任何时间打开的页面的内容都是不变的。
静态网页的内容相对稳定，因此容易被搜索引擎检索，静态网页的交互性较差，在功能方面有较大的限制。
页面浏览速度迅速，过程无需连接数据库，开启页面速度快于动态页面。
减轻了服务器的负担，工作量减少，也就降低了数据库的成本。


动态网页
动态页面后缀：asp、jsp、php、perl、cgi；
特点：

当浏览器请求服务器的某个页面时，服务器根据当前时间、环境参数、数据库操作等动态的生成HTML页面，然后在发送给浏览器。
动态网页一般以数据库技术为基础，可以大大降低网站维护的工作量。
动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。

 

静态网页和动态网页的区别
1.更新和维护：

  静态网页内容一经发布到网站服务器上，无论是否有用户访问，这些网页内容都是保存在网站服务器上的。如果要修改网页的内容，就必须修改其源代码，然后重新上传到服务器上。静态网页没有数据库的支持，当网站信息量很大的时候网页的制作和维护都很困难；

动态网页可以根据不同的用户请求，时间或者环境的需求动态的生成不同的网页内容，并且动态网页一般以数据库技术为基础，可以大大降低网站维护的工作量。

2.交互性：

  静态网页由于很多内容都是固定的，在功能方面有很大的限制，所以交互性较差动态网页则可以实现更多的功能，如用户的登录、注册、查询等。

3.响应速度：

  静态网页内容相对固定，容易被搜索引擎检索，且不需要连接数据库，因此响应速度较快动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页，其中涉及到数据的连接访问和查询等一系列过程，所以响应速度相对较慢。

4.访问特点：

  静态网页的每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“?”，可以直接双击打开动态网页中的“?”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索之中不去抓取网址中“?”后面的内容，不能直接双击打开。

一个web应用由多个部分组成（静态web,动态web）: html, css, js, jsp, servlet

,java程序, 配置文件（Properties）

静态web

~  *.htm, *.html,这些都是网页的后缀，如果服务器上一直存在这些东西，我们可以直接进行读取，例如：



静态web存在的缺点

~Web页面无法动态更新，所有用户看到的都是同一个界面
	轮播图，点击特效：伪动态
  	JavaScript【实际开发中，应用最多】
	VBSvript

~ 它无法和数据库交互（数据无法持久化，用户无法交互）

动态web

页面会动态展示：web页面展示的效果因人而异



动态web的缺点

~假如服务器的动态web资源出现了错误，需要对后台程序进行重写，重新发布，可能需要停机维护。

动态web的优点

~Web页面无法动态更新，所有用户看到可以是不同的界面

~可以与数据库交互（数据持久化：注册，商品信息，用户信息。。。）

初步认识
“伪静态”顾名思义就是一种表面上看似是静态网页（以.html、.htm等结尾），不存在任何的数据交互，却其实是动态网页，存在数据交互的网站，具有这种特性的网页被称为“伪静态网页”。我们看到的伪静态网页其实是经过处理的，将动态网页的id等参数通过URL重写来隐藏，让查看者以为是静态网页。
在平时的测试过程中我们经常会看到这样一类奇特的地址：http://xxx.xxx.xx.xx:xxx/test.php/id/1.html   （原型一般为：http://xxx.xxx.xx.xx:xxx/test.php?id=1   ）。像这种类型的网址URL，往往是一种伪静态网页，遇到这种情况可以直接对".html"之前的参数加“'”进行判断是否存在注入！
实际案例
大家都熟悉动态网站的SQL注入了，网上有很多资源。下面看看一次伪静态网页的注入点查找——手工注入判断（和动态注入判断方法一样）：
1、正常页面显示，如图：

2、在网址加上" ' "，网页不正常显示，如下图：

3、在网址加上" and 1=1 “，网页正常显示，如图：

4、在网址加上” and 1=2 "，网页不正常显示，如图：

由此可知该网页为伪静态网页，存在SQL注入。
辨别方法
如果看到一个以.html或者.htm结尾的网页，此时可以通过呢在在地址输入框中输入：javascript:alert(document.lastModified)，来得到网页最后的修改时间，如果得到的时间和现在时间一致，此页面就是伪静态，反之是真静态；因为动态页面的最后修改时间总是当前时间，而静态页面的最后修改时间则是它生成的时间。


实际意义
什么时候网站需要采用伪静态功能呢？

考虑SEO（搜索引擎优化：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益），将动态网页通过服务器处理成静态页面，如www.xxx.com/jk/fd.php?=12这样的动态网页处理成www.xxx.com/jk-fd-12.html这样格式静态页面，常见的论坛帖子页面，都是经过伪静态处理成静态页面格式html页面。
考虑网站所用的程序语言不易被发现，经过重写来伪静态来将动态网页的程序后缀变为html的静态页面格式。

伪静态的利与弊
当然犹如一篇文章的作者所说的："如果流量稍大一些使用伪静态就出现CPU使用超负荷，我的同时在线300多人就挂了，而不使用伪静态的时候同时在线超500人都不挂，我的IIS数是1000。”
确实是这样的，由于伪静态是用正则判断而不是真实地址，分辨到底显示哪个页面的责任也由直接指定转由CPU来判断了，所以CPU占有量的上升，确实是伪静态最大的弊病。
我们应该选择伪静态还是真静态？
1、使用真静态和假静态对SEO来说没有什么区别；

2、使用真静态可能将导致硬盘损坏并将影响论坛性能；

3、使用伪静态将占用一定量的CPU占有率，大量使用将导致CPU超负荷；

4、最重要的一点，我们要静态是为了SEO。
所以：
1、使用真静态的方法可以直接排除了，因为无论怎么生成，对硬盘来说都是很伤的。

2、既然真伪静态的效果一样，我们就可以选择伪静态了。

3、但是伪静态大量使用会造成CPU超负荷。

4、所以我们只要不大量使用就可以了。

5、既然静态只是给SEO看的，我们只需要伪静态给SEO就行了，不需要给用户使用。

6、所以我们只要在专门提供给SEO爬的Archiver中使用伪静态就可以了。