综合练习——俏江南网站之三——如何从一个网页得到网站的其他页面

综合练习——俏江南网站之三——如何从一个网页得到网站的其他页面  

我们已经制作了一个网页的基本框架，下面的工作，我们将分为两部分来做。

1.用动态页结合数据库生成页面中的新闻列表部分。

2.以已经完成的页面为基础快速得到其余页面。

下面我们首先来谈第二个部分，如何动态生成里面的新闻列表，将在下一篇中谈到。

 

首先来看我们做好的页面

 

 

 

红色文字和方框标注出来的部分是各个页面相同的（除了首页），蓝色部分标出来的是每个页面独立的部分。为了加快页面设计速度，降低网站管理成本。我们需要把公共的部分拿出来单独创建文件，然后再把文件用include的方式放回去。这样，未来每个页面中，相同的部分都指向同一个文件，需要修改公共内容时，不需要一个个修改，只需要把指向的那个公共文件修改掉就可以了。

下面我们来看详细的步骤
1、从源文件中创建公共部分

（1）首先来看源代码

   我们需要导出成单独文件的部分包括，logo和menu（头部），mind（理念部分），导航（含电话号码和地址部分），footer，right_edge(右边的红灯笼)。

  公共部分（content）

这些部分，有的是一个div，有的是两个div ，有的级别较高，有的级别较低。大家制作的时候要加以注意。

（2）导出头部（logo和menu）

切换到代码视图，找到类似如下字样（各个同学的可能不尽相同）。

        

         

       

        
         

            首页
            关于俏江南
            菜品介绍
            餐厅导航
            人才招聘
            新闻中心
          

         

         

将之拷贝，在dw下新建一个静态页，切换到代码视图，如图所示

将之全部删除，把上一步的logo和menu的代码粘贴进来。如图所示

将这个页面另存为head.html。切换到设计视图，可以看到，其实这个里面只有内容，没有样式。

(3)用相同的方法分离出mind

      
         
          

    正是江南好风景

          花开时节又逢君

         

      

同样新建一个静态页，进入代码视图，将里面所有的文字删除，把上面这段mind的代码粘贴进来，另存为mind.html.
(4)分类导航部分

 
      

          

新闻中心

          

            
• 公司新闻

            
• 公关活动

            
• 优惠信息

            
• 企业内刊

            
• 公益事业

            

          

      

         
         

              公司地址

        北京东城区

        国贸大厦18楼1820号

         Tel：010-1234567