企业网站制作超简单教程第二篇：页面布局实战

    企业网站制作超简单教程第二篇：页面布局实战
紧接上一篇文章，在心中一惊有了一个首页的页面构思，下面我们就开始写代码：（首页的页面素材已经打包上传，文章底部下载附件）
    打开Dreamweaver，新建站点，新建HTML页面，和新建一个样式表CSS文件，在html页面外部引用CSS文件:<link rel="stylesheet" type="text/css" href="index.css"/>,CSS的外部调用就不细说了，也可以直接在Dreamweaver本地文件直接把CSS文件拖入到head标签内部。
    好了下面开始从上往下写：
①

<div id="a"> <span><img src="logo.jpg" width="150" height="70" /></span> </div>

建立一个DIV他的选择符是"a"，里面插入了网站logo，span的作用是在"a"的盒子里面又建立一个放logo的区域。
②

<div id="b"> <ul> <li style="padding-left:50px;">螺丝-东螺</li> <li>公司简介</li> <li class="xl">产品中心 <ul id="xla"> <li>ISO7379塞打螺丝</li> <li>ISO7380半圆头内六角</li> <li>内六角扳手</li> <li>DIN7984薄头内六角</li> <li>DIN6912薄头内六角</li> <li>美制内六角螺丝</li> <li>DIN915机米（紧定）</li> <li>DIN916机米（紧定）</li> <li>DIN914机米（紧定）</li> <li>DIN913机米（紧定）</li> <li>DIN906喉塞</li> <li>内六角喉塞</li> <li>DIN908喉塞</li> </ul> </li> <li>公司新闻</li> <li>企业资质</li> <li>联系我们</li> </ul> </div>

   这里面有点复杂，但是我们划分一下就大概可以理解一共有两块：一个是<div></div>;另一块就是<ul><li></li></ul>。div前面我们介绍了，ul：HTML无序列表，以<ul>开头></ul>结尾，其内部元素以<li>开头</li>
结尾。
   至于中间在<li></li>中间又插入一个无序列表：详情可以点击：《纯CSS制作下拉导航菜单》
   注意这里用到第一个：float:left;
③ 

<div id="c"><img src="nv.jpg" width="980" height="300" /></div>

   这块和第一个插入logo相似，不在介绍。
④ 重点之处，遇到第二次使用：float：left；以解释说明：

<div id="d">  /*建立一个大盒子，准备在里面放左右两边两个子盒子*/ <div class="da">  /*大盒子“d”里面左边盒子定义“da” 给左侧的DIV向左浮动：float:left;*/ <dl>                   /*左边盒子“da” 放入第一个dl列表,与UL不同dl列表具体用法参见： HTML中dl列表讲解*/ <dt>内六角螺丝系列</dt>  /*dl列表，标题*/ <dd>ISO7379塞打螺丝</dd>  /*dl列表，列表内容，注意dd默认是缩进两个字的，看CSS给予的定义取消*/ <dd>ISO7380半圆头内六角</dd> <dd>内六角扳手</dd> <dd>DIN7984薄头内六角</dd> <dd>DIN6912薄头内六角</dd> <dd>美制内六角螺丝</dd> <dd>DIN915机米（紧定）</dd> <dd>DIN916机米（紧定）</dd> <dd>DIN914机米（紧定）</dd> <dd>DIN913机米（紧定）</dd> <dd>DIN906喉塞</dd> <dd>内六角喉塞</dd> <dd>DIN908喉塞</dd> </dl> <dl class="daa">   /*在dl列表定义第二个dl列表，用来表示联系方式*/ <dt>联系方式</dt> <dd>电话：0512-50135020</dd> <dd>E-mail：luosibuy@163.com</dd> <dd>QQ：123456789</dd> <dd>地址：昆山市邵泾路98号</dd> </dl> </div> <div class="db"> /*定义右边盒子，跟着左侧向左靠齐：使用float:left;里面构思放入两个小盒子一上一下，上面放公司简介，下面盒子放产品*/ <div class="dba"> /* 右边DIV 上部div盒子，放入公司简介以及公司一张展示图片*/   <img src="a.png" width="200" height="120" />    <p>东螺在线成立于2013年，是中国首家面向中小企业的紧固件在线销售商，隶属昆山东螺五金制品有限公司。东螺五金创建于2005年，2010年投资多家制造工厂，在昆山，宁波，海盐拥有小型制造工厂，是中国国内专业的行业紧固件制造商与分销商………………<p>   </div> <div class="dbb"> /* 定义div右侧的下部DIV盒子*/ <div class="dbba">  /* 产品中心 以及后面“更多”放入一个DIV盒子里面*/ <font>产品中心</font><span>更多</span> </div> <div class="dbbb">  /*产品列表放入一个DIV盒子里面，既然说了产品列表这里使用了ul无序列表如下：(这里再次使用float:left;)*/ <ul> <li>   <img src="a.png" width="150" height="120" /><p>内六角螺丝</p>   </li>   <li>   <img src="a.png" width="150" height="120" /><p>内六角螺丝</p>   </li>   <li>   <img src="a.png" width="150" height="120" /><p>内六角螺丝</p>   </li>   <li>   <img src="a.png" width="150" height="120" /><p>内六角螺丝</p>   </li>   <li>   <img src="a.png" width="150" height="120" /><p>内六角螺丝</p>   </li>   <li>   <img src="a.png" width="150" height="120" /><p>内六角螺丝</p>   </li>   <li>   <img src="a.png" width="150" height="120" /><p>内六角螺丝</p>   </li>   <li>   <img src="a.png" width="150" height="120" /><p>内六角螺丝</p>   </li>   <li>   <img src="a.png" width="150" height="120" /><p>内六角螺丝</p>   </li>   <li>   <img src="a.png" width="150" height="120" /><p>内六角螺丝</p>   </li> </ul> </div> </div> </div> </div>

⑤、

<div style="clear:both;"></div>/*clear:both;清除以上浮动，*/ <div id="e"> /*定义底部的盒子div*/ <p>该站点为昆山东螺五金制品有限公司国际站点，官网站点点击：螺丝东螺-我们的主要产品有：螺丝,螺母，螺栓，垫圈</p> /*这里做简单处理，放入公司版权信息，也可以放入有利于搜索引擎排名SEO优化的一句话次导航，像我这里一句话介绍公司带入关键词，给关键词加超链接指 向首页或者相关页面。*/ <p>昆山东螺五金制品有限公司旗下国际展示站点：①②③④⑤</p> </div>

    ok!到这里，页面布局的盒子我们已经定义代码规划好了，下一篇文章我们应该开始给DIV加样式表了。

文件素材下载：

 

      

 

TAGS:企业网站 , 制作建设 , 布局 , 教程

来自Davids zhou博客原创文章请尊重作者：http://www.zongk.com/zongk/39.html转载请标注此链接