（二）设计网站版面布局
上一部分我们只是用DreamWeaver生成了一个只有形式的空白页面，我们这一节的任务就是要在这个空白的网页上规划出不同的区域。实现的主要方法是DIV+CSS。
DIV是HTML的一个块元素，用它可以把我们这个网页分成合理的几个大的部分。CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。用CSS布局主要用层"DIV"来实现，而DIV的样式通过"id选择器"来定义。
前面交待了最基本的东西，接下来我们通过实例一步步地讲解如何布局。
1．创建并调用CSS样式表
这一步有两种办法。第一种就是用DreamWeaver在index.htm打开的状态下，点击“文本”，选择“CSS样式”，点击“新建”，选择器留空，选择器类型选“高级”，定义在：“新建样式表文件”，点“确定”。在跳出的“保存样式表文件为”对话框里，把保存路径放在网站根目录下面（或者在下面建立一个新的文件夹），保存文件名为css.css(文件名可以随便，只要后缀名是css就行)，点“保存”就完成了。你会在D:\my-work\cnsohosolution\文件夹里看到生成了一个新的文件css.css。这时你转到代码模式下，就会发现在<head>与</head>标签之间，多了这么一行代码：<link href="css.css" rel="stylesheet" type="text/css" />。这就是样式表的外部调用了。我们就用它来控制网页的表现形式，而把网页的内容放在HTML里，这样就能实现网页内容与形式的分离了。
另一种方式就是直接在网站根目录下创建一个空白txt文档，然后重命名为css.css,再在html文件的<head>标签里用<link href="css.css" rel="stylesheet" type="text/css" />调用就可以了。条条大路通罗马，你喜欢咋搞就咋搞，呵呵。
2. 插入布局对象。在“设计”视图下，点击“插入”，选择“布局对象”，选择“DIV标签”，在跳出来的对话框的“ID”栏中，输入“container”，选择“插入：在插入点”，点击“确定”。你就会发现在空白页面里自动出现了一句话：“此处显示 id "container" 的内容”。这就是container的区块。如果这时你转到“代码”视图，你会发现在原来<body>与</body>之间，多了这样一行代码：<div id="container">此处显示 id "container" 的内容</div>。聪明的你现在一定知道了，原来插入一个新的布局对象用<div>标签就可以了。通过不同的id可以用CSS控制从而表现出不同的形式来。而如果把我想要展示的内容放在<div>和</div>之间，就可以正确地显示在浏览器中。是的，只要我们能够熟练应用这些代码，我们就可以抛开DreamWeaver、FrontPage之类的工具，直接编写网页代码了，呵呵。
上面我们创建了一个布局对象container，目的是把网站的所有内容都放在这个容器里。接下来我们用同样的方法，在container里再插入下面几个布局对象：header，pagebody, footer,分别用来展示网站的上中下三个部分。注意，这里应该选在插入“在结束标签之前”，而标签则要选择“<div id=”container”>”。
用同样的办法，我们在pagebody里面再次插入两个布局对象，mainbody和sidebar，用来把网页的中间主要部分分成两部分：主要内容部分和工具条。这样，我们的<body>和</body>之间就有了下面完整的布局代码：
| 以下为引用的内容： <div id="container">此处显示 id "container" 的内容 <div id="header">此处显示 id "header" 的内容</div> <div id="pagebody">此处显示 id "pagebody" 的内容 <div id="mainbody">此处显示 id "mainbody" 的内容</div> <div id="sidebar">此处显示 id "sidebar" 的内容</div> </div> <div id="footer">此处显示 id "footer" 的内容</div> </div> |
到目前为止，我们在“设计”视图里和浏览器里面看到的还是光秃秃的几行字：此处显示 id "xxx" 的内容。简直不是一般的难看，呵呵。别着急，我们前面说过符合web标准的网页是什么来着？还有人记得吗？那就是“网页内容和形式相分离”。我们把用CSS控制网页形式放在下一步说。
3．编辑CSS样式表。
只要你按照第一步地说明正确调用了CSS样式表，你就会在DreamWeaver的右上角看到CSS样式的情况。第一部的时候我们只是创建了一个空白的样式表，现在我们来编辑它，让它能够控制我们在第二步中创建的布局对象。
菜单栏->文本->CSS样式->管理样式->新建->在选择器里填入“#container”，选择“高级（ID、上下文选择器等）”，选择定义在css.css，然后点击“确定”。在接下来的对话框中就可以设定布局对象#container的属性了。相关属性非常多，主要包括“类型”、“背景”、“区块”、“方框”、“边框”等几大部分，最好是抽时间专门找一下CSS的初级教程看一下。
这里，我们先在分类中选择“背景”，点击“背景颜色”右面的带小三角的方框，然后选择最左侧白的靠上一格的灰色，你会发现右边的白色文本框里出现了“#CCCCCC”，这是颜色的表示方法。再转到“方框”分类里，在宽度里填入768像素，点确定，点完成，#container的CSS属性就设定好了，别忘了保存css.css文件。
此时，css.css的内容为：
| 以下为引用的内容： #container { background-color: #CCCCCC; width: 768px; margin: 0; } |
简单介绍一下：#container表示是<div id=”container”>的属性，各个属性放在大括号{}里；不同的属性用分号（;）隔开。冒号（:）前面是属性名称，冒号后面是属性的值。如width:768px;,表示ID container的宽度是768像素。其他经常用的属性，如外部边距（margin），内部边距（padding）等，虽然都很重要，但是这里不多说了，请自行参考CSS手册，Google上能搜索到很多相关材料。
按照同样的办法，我们设定其他的布局元素的CSS属性，完成后的CSS文件内容如下：
| 以下为引用的内容： #container { background-color: #CCCCCC; width: 768px; margin: 0;} #header { background-color: #CCFFFF; height: 90px; width: 768px; margin-bottom: 5px;} #pagebody { background-color: #66CC99; width: 768px; margin-bottom: 5px; clear: both;} #mainbody{ background-color: #CCCC00; float: left; height: 400px; width: 500px;} #sidebar{ background-color: #CCCC33; float: right; height: 400px; width: 260px;} #footer{ background-color: #CC99CC; height: 60px; width: 768px; margin:0; clear: both;} |
此时，浏览器里现实的效果就如下图所示：
为了让大家看清楚这个网页的布局，每一个布局对象我都设置了不同的颜色，但在实际设计过程中，还要了解一下网站的配色知识，根据自己的实际情况配置颜色或者用白色背景，这就不是本文讨论的重点了。
这里需要注意的是，为什么我们把网页的宽度限定在768像素呢？这是为了兼容绝大部分的显示器屏幕。在800x600的分辨率下，浏览器能够显示的有效像素大概是778像素，我们两边放了一些余量是为了不让画面显得拥挤。而在1024X768分辨率下显示效果也不错。不要以为现在的老外都在使用1024X768的显示分辨率哦。
【责任编辑 李营营】
