网页编排布局一般方法

　　一般来说，网页的构成主要分为三部分，即：头、中、尾，头和尾要写在独立的文件中；因为它们一方面是公共文件，许多前台页面都要引用；另一方面，它们的内容又都相同，把它们写在一个独立的文件，修改时只需修改一次，所有引用它们的页面都修改了，不然，每页都重写相同的内容，一方面占空间，另一方面修改起来十分麻烦，每个页面都要修改。头、中、尾既是网页三大构成也是网页的三大编排布局版块，其中以中部版块为主。

　　在网页设计过程中，头文件主要放置 logo、网站名称、网站导航菜单、宣传主题图片等，也可以放登录链接、联系方式、购物情况等信息。网页的主要部分——中部，用于放置主要内容，因页面不同而各异，例如：网站主页中部放一些突出网站主题的内容，诸如产品分类、产品图文列表、亮点产品介绍、与产品相关的知识资讯、公司简介、资质荣誉等。尾文件主要标明版权，编排地址、联系方式、服务条款、免责声明等。

　　目前，网页编排布局主要用 html5，即 div + css；div 代表 html 语言，主要用于布局网页；css 是层叠样式的缩写，用于修饰 html 元素的样式，目前已经发展到 3.0。网页编排布局大致结构如下：

<div class="page">
  <!--网页头部-->
  <div class="header">
    <div class="logo_line"><img src="logo 地址" alt="logo" /></div>
    <ul class="navigate_menu"><li>主页</li><li>产品中心</li></ul>
  </div>
  <!--网页主要内容-->
  <div class="content">
    <div class="content_one_line">
       <div class="product_class">
         <h3 class="product_class_title">产品分类标题</h3>
         <ul class="product_class_list"><li>产品分类列表</li></ul>
       </div>
       <div class="product_new">
         <h3 class="product_new_title">新产品标题</h3>
         <ul class="product_new_list">
            <li>
              <img src="产品地址" alt="产品名称" />
              <span><a href="产品地址" target="_blank">产品名称</a></span>
            </li>
         </ul>
       </div>
       <div class="news">
         <h3 class="news_title">新闻标题</h3>
         <ul class="news_list">
            <li><a href="新闻地址" target="_blank">新闻列表</a></li>
         </ul>
       </div>
    </div>
    <div class="product_list">
       <h3 class="product_list_title">产品列表标题</h3>
       <ul class="product_list_all">
         <li>
            <img src="产品地址" alt="产品名称" />
            <span><a href="产品地址" target="_blank">产品名称</a></span>
         </li>
       </ul>
    </div>
  </div>
  <!--网页尾部-->
  <div class="footer">
    <div class="coperight">版权信息</div>
    <div class="contact"><span>地址</span><span>电话</span><span>电子邮件</span></div>
  </div>
</div>

以上代码虽然只是网页的大概布局结构，但已揭示网页编排布局的基本方法，只要将它稍加扩展就可以制作成网站主页这样的页面，扩展方法按照上面的编排方法即可。