4.3 使用Dreamweaver CS6制作博客首页

目前，博客（Blog）是使用最为广泛的Web 2.0应用之一。用户可以在自己的博客上发表文章、建立相册等。由于Dreamweaver提供了所见即所得的设计视图，使得这样的网页设计不再复杂。

使用Dreamweaver来制作一个博客的首页非常方便，具体步骤如下。

step 1 选择“文件”→“新建”命令，在弹出的“新建文档”对话框中，选择“空白页”选项，在“页面类型”列表里面选择“HTML文档”选项，在“布局”列表选择“无”选项。单击“创建”按钮，新建一个空白的HTML文档。

step 2 单击标准工具栏上面的“保存”按钮，把当前文档保存为index.html。

step 3 在文档工具栏里面，把当前文档的标题修改为“春晓的博客”，保存刚才所做的修改。

step 4 在插入工具栏上，切换到“布局”选项卡，单击“插入Div标签”按钮。在弹出的“插入Div”标签对话框里面输入div标签的ID为header，单击“确定”按钮。

step 5 按照步骤4所示的方法，依次插入3个div标签，ID分别为ad、content和footer。完成后如图4-25所示。

通过步骤4和步骤5把整个文档大致分成4部分内容，分别放置头部、广告、主要内容和底部内容。

step 6 在属性检查器里面，单击“CSS”按钮，切换到CSS规则定义面板，在“目标规则”列表里面选择“<新 CSS 规则>”选项。单击“编辑规则”按钮，弹出“新建CSS规则”对话框。在“选择器类型”列表框里面选择“标签<重新定义HTML元素>”选项。在“选择器名称”文本框里面输入“body”“”，如图4-26所示。最后单击确定按钮。

step 7 在弹出的“body的CSS规则定义”对话框里面，在左边的“分类”选择“方框”选项。在“方框”属性面板里面，把“Padding”的“”Top设置为0，同时选中“全部相同”复选框。把“Margin”的“Top”也设置为0，同时选中“全部相同”复选框，如图4-27所示。设置完毕之后，单击“确定”按钮。

step 8 在属性检查器里面的“目标规则”列表里面选择“<新 CSS 规则>”选项，单击“编辑规则”按钮，弹出“新建CSS规则”对话框，如图4-28所示。在“选择器类型”下拉菜单里面选择“ID（仅应用于一个HTML元素）”选项，在“选择器名称”文件框里面输入“header”“”，单击确定按钮。

step 9 在弹出的“#header的”CSS规则定义对话框里面，单击左边的“分类”列表，选择“类型”选项，在右边的“类型”属性面板里面，“Font-weight”属性选择“”bold选项，“Line-height”属性输入69。再单击左边的“分类”列表中的“方框”选项。在右边的“方框”属性面板里面把“Width”属性设置为900，“”“”Height属性设置为69，Margin中的“Top”为“”“““”“”“”5，Right为auto，Left为auto，Bottom为10，如图4-29所示。单击“确定”按钮，关闭对话框。

为ID为header的标签定义好CSS规则后，在设计视图中，可以看到头部的div标签的宽度和高度都发生了变化，并且水平居中。

step 10 重复步骤8~步骤9的操作，为ID为ad的div标签创建以下CSS规则：

其中最后一行是为div设置背景图片。设置完毕之后，ID为ad的div的宽度变成900px，并且水平居中，还显示出了背景图片。

step 11 为ID为content的div标签设置CSS规则如下：

设置完毕后，单击“确定”按钮，关闭对话框。

此时，在设计视图中，可以看到中间的ID为content的div标签的宽度发生了变化，并且与上面的ID为header的div之间有了一定的距离，水平居中。

step 12 为ID为footer的div标签，创建以下CSS规则：

此时在设计视图中ID为footer的div标签变成了水平居中，并且显示出一条横线。

step 13 在ID为header的div标签内部插入两个div标签，ID分别为logo和banner。为ID为logo的div标签创建以下CSS规则：

为ID为banner的div标签创建以下CSS规则：

step 14 在ID为content的div标签内部插入两个div标签，ID分别为leftcolumn和main。为ID为leftcolumn的div标签创建CSS规则如下：

为ID为main的div标签创建以下CSS规则：

step 15 在ID为leftcolumn的div标签内插入两个div标签，ID分别为columntitle和columncontent。为前者创建CSS规则如下：

为后者创建CSS规则如下：

step 16 删除ID为columncontent的div标签的内容，使用插入工具栏插入一个ul标签，命名其ID为categories，输入一些项目，然后为其创建CSS规则如下：

step 17 在ID为main的div标签里面插入一个div标签，为其创建一个名称为blogitem的CSS类，规则如下：

为ID为banner的div标签添加CSS规则如下：

step 18 使用插入工具栏在ID为logo的div标签内部插入一个logo图片。在ID为banner的div标签内部输入博客的名称或者制作一个横幅图片放在里面。修改ID为footer的div标签的内容。在文档工具栏里面修改当前文档的标题为“春晓的博客”。

到此，已经制作好了一个比较美观的HTML文档了。在IE中预览效果如图4-30所示。

在本例中，是使用div标签结合CSS来实现布局的，而没有采用传统的表格布局。原因在于HTML中的表格主要是用来展示数据的，而不是用来实现布局的。大量嵌套的表格集中在HTML文档中，会使得代码非常复杂，难以理解，此外HTML文档兼容性较差。

采用div标签来实现布局，则代码简洁，CSS和HTML部分分离，看起来更有层次感，修改起来更方便。对于搜索引擎，更具有亲和力。如果读者对于本例中的CSS代码不太熟悉，可以参考本书后面的章节。 yxud3w7v+TF6sROOBnh1nzJa7KgqjQ3L/PwXaehERu7XbXxeM0XMZvFQlvLbFMn/