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

作者:Davidszhou   来源:SEO优化博客   时间:2015-04-20 23:17:30   点击:

    企业网站制作超简单教程第二篇:页面布局实战
紧接上一篇文章,在心中一惊有了一个首页的页面构思,下面我们就开始写代码:(首页的页面素材已经打包上传,文章底部下载附件)
    打开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:[email protected]</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加样式表了。

文件素材下载:

 

企业网站制作超简单教程第二篇:页面布局实战素材下载
文件类型: .zip 3067c8fddb853a709b270e432b063183.zip (851.39 KB)

      

 

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

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

七日热点
网站统计
文章总数:130
今天发布:0
软件资源数:18