体验DIV+CSS(3)：用 DIV + CSS 布局网站
2008-02-27 21:43
323 查看
用 DIV + CSS 布局网站
开发环境
以Windows XP系统，IIS或Apache服务器为例。你也可以在其他环境下开发。
编辑工具
Dreamweaver，这里我说的编辑工具，不是自动生成代码的工具。所以将Dreamweaver调整到代码模式(Code)下。
相关手册
前面教程中已经提及过很多次了，在这里可以方便我们自行举一反三。
测试浏览器
IE6.0以及Firefox2.0，1024*768以及更高分辨率。记得，我们写的代码越标准、越严格，兼容性就会越好。当然了，部分特例除外，这些特例在以后的学习中会遇到并讲解。
其它
一杯白开水，或一杯绿茶。对于长期工作在电脑前的人来说，绿茶有太多功效。
不过更多的时候我们是这样的，先胸有成竹地插入一个大表格……
设计制作流程，目前没有见过相关地硬性规定，这里我给大家一个合理的建议：
在Photoshop做出效果图，以象素为单位，精确的标出每个版块的布局位置。如果没有条件使用Photoshop，也可以在稿纸上绘制出。
在Dreamweaver中对照效果图，将一个页面中的每个版块的框架绘制出（在编辑模式下用DIV+CSS代码绘制）。
细化每个版块，填充相关内容。
在实际工作中我们可能还会需要若干其它的步骤。原则是我们尽量不要急于下手，好的准备可以有效地提高以后的效率。
点击打开这个页面截图，打开图片
我们可以把上面的这个图作为我们设计好地效果图。按照前面提及的开发流程，我们因该可以绘制出如下框架。（不同版块部分用不同颜色标出）。
第一步：绘制横向部分： 打开完成后的效果
页面源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图库__汉路轮滑时尚网</title>
<link href="01.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pub_top"></div>
<!--include the logo & the search form-->
<div id="visual"></div>
<div id="topbar"></div>
<div id="top_plat"></div>
<div id="plat2"></div>
<div id="btnav"></div>
<div id="copyright"></div>
</body>
</html>
CSS：(01.css)
body {
font-size:12px;
font-family: "宋体", Arial, Helvetica, sans-serif;
color:#FFF;
background-color:#000;
margin:5px 0 0 4px;
}
/*include Login & address*/
#pub_top {
height:25px;
width:996px;
overflow:hidden;
background-color:#999;
}
#visual {
width:996px;
height:100px;
background-color:#C30;
overflow:hidden;
}
#topbar {
width:996px;
height:25px;
background-color:#666;
}
#top_plat {
width:996px;
height:280px;
background-color:#F6F6F6;
}
#plat2 {
width:996px;
height:600px;
background-color:#CCC;
}
#btnav {
width:996px;
height:25px;
background-color:#666;
border-bottom:1px solid #FFF;
}
#copyright {
width:996px;
height:80px;
background-color:#CCC;
}
在这个页面中我们共用到了以下几个标签元素：
<!DOCTYPE> <html> <head> <meta> <title> <link> <body> <div> <!--...-->
虽然这些标签中的部分所在的位置是可变的，但是我们还是应该严格的按照例子的顺序编写，利用Dreamweaver 新建一个页面时，这些工作会自动帮我们做好。
至于每个标签的详细用法，大家可以翻阅相关文档。需要提出的是注释标签“<!--...-->”，因为注释中的部分是不被显示的，我们以前可能有这样的习惯： <!----------注释内容---------->，输入了过多的“-”这在新的标准中是不被允许的。
在源代码中我们可以看出，每个版块都由一对DIV组成，利用id对应相关的CSS样式表进行描述，也可以用标签的class属性。前面的教程中已经提及过它们的区别。 在id(class)的命名上能够兼顾直观，尽量能从名字上看出它的用途或者功能。
再来看一下CSS样式表。首先是定义了body标签，注意，body前没有“.”。这是一种全局定义的方式，定义了结构文档中的body标签。同理，我们也可以用这种方式定义结构文档中所有的div或者其他标签元素。 例如，因为图片加上链接后，图片会默认显示它的边框。我们可以做个全局定义：img {border:0;}，这样文档中所有图片默认会是没有边框的。那么文档中如果有部分图片需要边框呢？ 没有关系，我们可以对某个图片单独写样式表重定义。例如：
.photo {
border:1px solid #666;
}
<img src="test.jpg" class="photo" />
在W3C标准中，有这样的规定，定义了背景后必须定义文本颜色。为的是防止出现背景色和文本颜色一样的情况。这个标准是否有完全遵循的必要性，我们可以细细讨论。我个人是看情况决定的，但不是看心情。
这些CSS属性我们完全可以从字面上理解它们的含义，但在写法上会有一些技巧：
颜色定义，十六进制码“1，2”、“3，4”、“5，6”相同时，可以省写为3位，“#”不能省略。
margin等涉及四个方向的标签的简写，当四边值相同时，可以写成："margin:10px;"，当值不一样时，可以四个方向分别定义“margin-top:1px; margin-right:2px; margin-bottom:3px; margin-left:4px;”。 也可以简写成：“margin:1px 2px 3px 4px;”，方向顺序为“以上为起点的顺时针”。也可以单独定义某个方向，而其他方向时默认值，例如：“border-left:1px solid #333;”
从以上的这一步中，我们可以看出，每个版块就好比一个盒子模型。我们可以分别定义它的各种需要的属性。例如它的宽度，高度，背景色等。
第二步：绘制纵向部分：
与横向相比，纵向的定义上会需要多点属性参数，因为盒子模型默认是上下排列的。那么怎么才能让它左右排列呢。这里将引进一个新的属性：float。
以上面的例子中id为“top_plat”的版块为例，分为左右两个版块。 打开完成后的效果
我们在以上代码的基础上添加修改了如下代码：
网页结构源代码：
<div id="top_plat">
<div id="tpleft"></div>
<div id="tpright"></div>
</div>
CSS：
/**/
#tpleft {
width:660px;
height:280px;
float:left;
background-color:#FFCC00;
}
#tpright {
width:330px;
height:280px;
float:right;
background-color:#FFCC00;
}
#plat2 {
clear:both;
width:996px;
height:600px;
background-color:#CCC;
}
由代码可以看出，我们分别对“tpleft”和“tpright”版块使用了“float:left;”和“float:right;”属性。让它们在“top_plat”分别靠左靠右以达到左右排列的目的。 事实上我们也可以对两个版块同时使用“left”值，而它们间的间隙可以使用margin参数。修改后的CSS代码如下。
/**/
#tpleft {
width:660px;
height:280px;
float:left;
background-color:#FFCC00;
}
#tpright {
width:330px;
height:280px;
float:left;
margin-left:6px;
background-color:#FFCC00;
}
#plat2 {
clear:both;
width:996px;
height:600px;
background-color:#CCC;
}
在以上CSS代码中我们发现，在#plat2中。多了一个属性：“clear:both;”。它的功能可以从手册里得出，用以清除前面定义的样式，使得之前对其他标签的样式定义不至于影响当前元素。 在这里主要是清除float对当前版块的影响。
本例子中，使用的是两个版块左右排列，两个以上的版块也是同样的原理，但是如果子版块横向的宽度和超过父版块的宽度时，会自动换到下一样再依次排列。这就要求我们在设计时候计算精确。
经过以上两步绘制，我们已经基本完成了一个页面的整体布局安排。如果还有更深层次的布局定位，可以用同样的方法达到目的。
留个习题：
利用无序列表标签“<ul> <li >” 制作一个横向排列的菜单。效果如下：
首页 文章 相册 留言
一、学习准备
我们应该有准备地做任何事情，这是一个好的习惯。开发环境
以Windows XP系统，IIS或Apache服务器为例。你也可以在其他环境下开发。
编辑工具
Dreamweaver，这里我说的编辑工具，不是自动生成代码的工具。所以将Dreamweaver调整到代码模式(Code)下。
相关手册
前面教程中已经提及过很多次了，在这里可以方便我们自行举一反三。
测试浏览器
IE6.0以及Firefox2.0，1024*768以及更高分辨率。记得，我们写的代码越标准、越严格，兼容性就会越好。当然了，部分特例除外，这些特例在以后的学习中会遇到并讲解。
其它
一杯白开水，或一杯绿茶。对于长期工作在电脑前的人来说，绿茶有太多功效。
二、网站页面的开发流程
在刚刚学习制作网页的时候，我们经常会被这样告知，在Photoshop里设计，然后做切片。所以最终结果是部分网站，全部是图片组成，包括所有的文本信息。不过更多的时候我们是这样的，先胸有成竹地插入一个大表格……
设计制作流程，目前没有见过相关地硬性规定，这里我给大家一个合理的建议：
在Photoshop做出效果图，以象素为单位，精确的标出每个版块的布局位置。如果没有条件使用Photoshop，也可以在稿纸上绘制出。
在Dreamweaver中对照效果图，将一个页面中的每个版块的框架绘制出（在编辑模式下用DIV+CSS代码绘制）。
细化每个版块，填充相关内容。
在实际工作中我们可能还会需要若干其它的步骤。原则是我们尽量不要急于下手，好的准备可以有效地提高以后的效率。
三、用DIV+CSS 绘制网页框架
以“http://www.hanroll.com/gallery”这个页面为例。点击打开这个页面截图，打开图片
我们可以把上面的这个图作为我们设计好地效果图。按照前面提及的开发流程，我们因该可以绘制出如下框架。（不同版块部分用不同颜色标出）。
第一步：绘制横向部分： 打开完成后的效果
页面源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图库__汉路轮滑时尚网</title>
<link href="01.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pub_top"></div>
<!--include the logo & the search form-->
<div id="visual"></div>
<div id="topbar"></div>
<div id="top_plat"></div>
<div id="plat2"></div>
<div id="btnav"></div>
<div id="copyright"></div>
</body>
</html>
CSS：(01.css)
body {
font-size:12px;
font-family: "宋体", Arial, Helvetica, sans-serif;
color:#FFF;
background-color:#000;
margin:5px 0 0 4px;
}
/*include Login & address*/
#pub_top {
height:25px;
width:996px;
overflow:hidden;
background-color:#999;
}
#visual {
width:996px;
height:100px;
background-color:#C30;
overflow:hidden;
}
#topbar {
width:996px;
height:25px;
background-color:#666;
}
#top_plat {
width:996px;
height:280px;
background-color:#F6F6F6;
}
#plat2 {
width:996px;
height:600px;
background-color:#CCC;
}
#btnav {
width:996px;
height:25px;
background-color:#666;
border-bottom:1px solid #FFF;
}
#copyright {
width:996px;
height:80px;
background-color:#CCC;
}
在这个页面中我们共用到了以下几个标签元素：
<!DOCTYPE> <html> <head> <meta> <title> <link> <body> <div> <!--...-->
虽然这些标签中的部分所在的位置是可变的，但是我们还是应该严格的按照例子的顺序编写，利用Dreamweaver 新建一个页面时，这些工作会自动帮我们做好。
至于每个标签的详细用法，大家可以翻阅相关文档。需要提出的是注释标签“<!--...-->”，因为注释中的部分是不被显示的，我们以前可能有这样的习惯： <!----------注释内容---------->，输入了过多的“-”这在新的标准中是不被允许的。
在源代码中我们可以看出，每个版块都由一对DIV组成，利用id对应相关的CSS样式表进行描述，也可以用标签的class属性。前面的教程中已经提及过它们的区别。 在id(class)的命名上能够兼顾直观，尽量能从名字上看出它的用途或者功能。
再来看一下CSS样式表。首先是定义了body标签，注意，body前没有“.”。这是一种全局定义的方式，定义了结构文档中的body标签。同理，我们也可以用这种方式定义结构文档中所有的div或者其他标签元素。 例如，因为图片加上链接后，图片会默认显示它的边框。我们可以做个全局定义：img {border:0;}，这样文档中所有图片默认会是没有边框的。那么文档中如果有部分图片需要边框呢？ 没有关系，我们可以对某个图片单独写样式表重定义。例如：
.photo {
border:1px solid #666;
}
<img src="test.jpg" class="photo" />
在W3C标准中，有这样的规定，定义了背景后必须定义文本颜色。为的是防止出现背景色和文本颜色一样的情况。这个标准是否有完全遵循的必要性，我们可以细细讨论。我个人是看情况决定的，但不是看心情。
这些CSS属性我们完全可以从字面上理解它们的含义，但在写法上会有一些技巧：
颜色定义，十六进制码“1，2”、“3，4”、“5，6”相同时，可以省写为3位，“#”不能省略。
margin等涉及四个方向的标签的简写，当四边值相同时，可以写成："margin:10px;"，当值不一样时，可以四个方向分别定义“margin-top:1px; margin-right:2px; margin-bottom:3px; margin-left:4px;”。 也可以简写成：“margin:1px 2px 3px 4px;”，方向顺序为“以上为起点的顺时针”。也可以单独定义某个方向，而其他方向时默认值，例如：“border-left:1px solid #333;”
从以上的这一步中，我们可以看出，每个版块就好比一个盒子模型。我们可以分别定义它的各种需要的属性。例如它的宽度，高度，背景色等。
第二步：绘制纵向部分：
与横向相比，纵向的定义上会需要多点属性参数，因为盒子模型默认是上下排列的。那么怎么才能让它左右排列呢。这里将引进一个新的属性：float。
以上面的例子中id为“top_plat”的版块为例，分为左右两个版块。 打开完成后的效果
我们在以上代码的基础上添加修改了如下代码：
网页结构源代码：
<div id="top_plat">
<div id="tpleft"></div>
<div id="tpright"></div>
</div>
CSS：
/**/
#tpleft {
width:660px;
height:280px;
float:left;
background-color:#FFCC00;
}
#tpright {
width:330px;
height:280px;
float:right;
background-color:#FFCC00;
}
#plat2 {
clear:both;
width:996px;
height:600px;
background-color:#CCC;
}
由代码可以看出，我们分别对“tpleft”和“tpright”版块使用了“float:left;”和“float:right;”属性。让它们在“top_plat”分别靠左靠右以达到左右排列的目的。 事实上我们也可以对两个版块同时使用“left”值，而它们间的间隙可以使用margin参数。修改后的CSS代码如下。
/**/
#tpleft {
width:660px;
height:280px;
float:left;
background-color:#FFCC00;
}
#tpright {
width:330px;
height:280px;
float:left;
margin-left:6px;
background-color:#FFCC00;
}
#plat2 {
clear:both;
width:996px;
height:600px;
background-color:#CCC;
}
在以上CSS代码中我们发现，在#plat2中。多了一个属性：“clear:both;”。它的功能可以从手册里得出，用以清除前面定义的样式，使得之前对其他标签的样式定义不至于影响当前元素。 在这里主要是清除float对当前版块的影响。
本例子中，使用的是两个版块左右排列，两个以上的版块也是同样的原理，但是如果子版块横向的宽度和超过父版块的宽度时，会自动换到下一样再依次排列。这就要求我们在设计时候计算精确。
经过以上两步绘制，我们已经基本完成了一个页面的整体布局安排。如果还有更深层次的布局定位，可以用同样的方法达到目的。
四、细化网页元素
如何用DIV+CSS模式制作导航菜单、制作精美的链接效果等。此刻，你完全可以充分发挥自己的想象去完成这些细节。以后的实战案例中会单独讨论。五、总结
通过这篇教程的学习，我们已经切实领会到如何用DIV+CSS去布局一个站点，以及它和用表格定位布局的不同。希望各位可以举一反三，多做几个练习。更多的属性，可以到相关文档中查询。留个习题：
利用无序列表标签“<ul> <li >” 制作一个横向排列的菜单。效果如下：
首页 文章 相册 留言
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- DIV+CSS布局的网站对网站SEO的影响分析
- 使用Div+CSS布局设计网站的优点
- DIV+CSS布局网站对SEO的好处?
- CSS网站布局div高度自适应--解决
- DIV+CSS网页布局及网站设计常犯错误
- DIV+CSS架构网站的7种版面布局形式
- Div+CSS网页布局对网站搜索引擎优化的影响
- .net网站开发（一）：3.Div+Css布局
- DIV+CSS布局网站
- 比较详细的DIV+CSS布局网页对网站SEO的影响
- 新手学DIV+CSS商业网站布局从入门到精通(实战案例版) 朱印宏 pdf扫描版
- 收藏网站制作常用经典css.div.布局.设计实例打包下载(下方有其他链接)
- 网站DIV+css弹性+固宽布局案例
- <div+css页面布局课堂笔记>9---页面布局网站首页设计实例__1
- 一个简单的网站布局（div+CSS）
- 收藏网站制作常用经典css.div.布局.设计实例打包下载1
- [div+css]网站布局实例二
- DIV+CSS网站布局最重要的几个东西
- 使用DIV+CSS布局网站的优点和缺陷分析
- DIV+CSS汇总网页布局及网站设计常犯错误来源