第2部分 网站开发实战篇
第4章 Adobe Dreamweaver CS5
Adobe公司出品的Dreamweaver，一直是深受网页设计人员喜爱的工具。虽然在网页制作工具上并没有什么标准软件，但是Dreamweaver就是事实上的标准。Dreamweaver从最初的1.0到8.0，一直是网页制作领域的首选软件。随着Adobe Dreamweaver CS5的发布，设计人员和开发人员能够更加自信地构建基于标准的网站。
Dreamweaver从对基于CSS设计的领先支持到手工编码功能，为专业人员提供了一个集成、高效的环境。开发人员可以使用Dreamweaver及所选择的服务器技术来创建功能强大的Internet应用程序，从而满足用户连接到数据库、Web服务和旧式系统的需求。
本章主要介绍Dreamweaver CS5的相关知识，涉及的知识点如下。
◆ Dreamweaver CS5的安装：介绍如何在Windows上安装Dreamweaver CS5。
◆ Dreamweaver CS5界面：介绍Dreamweaver CS5的菜单、工具栏及其他的界面元素。
◆ 使用Dreamweaver CS5制作页面：利用Dreamweaver CS5来制作一个简单的页面。
◆ Dreamweaver CS5的使用技巧：介绍Dreamweaver CS5的快捷键及首选参数。
4.1 安装Adobe Dreamweaver CS5
Dreamweaver主要应用于Windows平台，除此之外，还有针对Mac OS的版本。本书以Windows平台为例，来说明如何安装Dreamweaver CS5。在安装Dreamweaver CS5之前，需要获得Dreamweaver CS5的安装文件，可以通过购买光盘或者从网络上下载获得。下面介绍Dreamweaver CS5的安装方法。
step 1 如果是从网络上下载的安装文件，一般都需要解压。解压之后的文件夹或者安装光盘的内容如图4-1所示。
图4-1 Dreamweaver CS5的安装包内容
step 2 双击其中的Set-up.exe文件就可以开始安装Dreamweaver CS5，如图4-2所示。
图4-2 Dreamweaver CS5安装界面
step 3 一般而言，可以不用对其安装方式进行特殊的设置，采用默认设置即可。按照安装界面的提示，一步一步地执行安装，直至最后安装完成。
4.2 Dreamweaver CS5工作区概述
Dreamweaver有着非常友好的操作界面，发展到CS5版之后，其界面更加实用。Dreamweaver CS5提供了一个将全部工作区元素置于一个窗口中的集成布局，如图4-3所示。Dreamweaver CS5的工作区由应用程序栏、工具栏、文档窗口、属性检查器、标签选择器、面板等元素构成。下面分别对这些界面元素进行介绍。
图4-3 Dreamweaver CS5的工作区
4.2.1 文档工具栏
文档工具栏包含一些按钮，这些按钮提供各种文档窗口视图，如“设计”视图和“代码”视图的选项、各种查看选项和一些常用操作，如在浏览器中预览。文档工具栏如图4-4所示。
图4-4 Dreamweaver CS5的文档工具栏
在文档工具栏中，从左到右依次是代码、拆分、设计、实时代码、检查浏览器兼容性、实时视图、检查、在浏览器中预览/调试、可视化助理、刷新设计视图、标题及文件管理工具。各个工具的功能介绍如下。
◆ 代码：选择代码视图之后，文档窗口切换到编辑HTML、JavaScript、服务器语言代码（如PHP或SP以及任何其他类型代码）的手工编码环境。
◆ 拆分：选择拆分视图之后，文档窗口会被拆分成两部分，分别显示代码视图和设计视图。在Dreamweaver CS5中文档窗口默认是垂直的，可以通过“查看”菜单里面的“垂直拆分”命令来变成水平拆分。
◆ 设计：选择设计视图之后，文档窗口切换到可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，用户可以采用所见即所得的方式来进行设计和开发。
◆ 实时代码：实时代码视图仅当在实时视图中查看文档时可用。实时代码视图显示浏览器用于执行该页面的实际代码，当用户在实时视图中与该页面进行交互时，它可以动态变化。实时代码视图中的代码不可编辑。
◆ 实时视图：与设计视图类似，实时视图更逼真地显示文档在浏览器中的表示形式，并使用户能够像在浏览器中那样与文档交互。实时视图不可编辑。不过，设计人员可以在代码视图中进行编辑，然后刷新实时视图来查看所做的更改。
◆ 检查浏览器兼容性：该工具用于检查当前网页中的CSS代码是否对各种浏览器均兼容。
◆ 检查：该工具打开或者关闭CSS检查模式。检查模式与实时视图一起使用有助于快速识别HTML元素及其关联的CSS样式。打开检查模式后，将鼠标悬停在页面上的元素上方，即可在CSS样式窗口查看任何块级元素的CSS盒模型属性。
◆ 在浏览器中预览/调试：允许用户在浏览器中预览或调试文档。单击该按钮之后，会出现一个浏览器的列表，可以从中选择一个浏览器进行预览。如果直接按快捷键F12，则会调用默认的浏览器预览。
◆ 可视化助理：使用户可以使用各种可视化助理来设计页面，如CSS布局框模型等。
◆ 刷新设计视图：在代码视图中对文档进行更改后，单击该按钮可以刷新文档的设计视图。
◆ 标题：用来设置当前文档的标题，即当前HTML文档的title属性。当新建一个HTML文档的时候，默认值为“无标题文档”。
◆ 文件管理：显示文件管理弹出菜单。这是一个非常实用的功能，主要包括当前文档的上传、获取、设计备注及在网站中定位当前文档等功能。
文档工具栏主要是针对当前文档的一些操作，用于切换不同的视图。在Dreamweaver中设计网页经常用到的就是代码视图、设计视图及代码/设计拆分视图。当用户在任何一个视图中对当前文档修改或者选择其中的元素之后，其他视图都可以即时反映出来。
4.2.2 标准工具栏
默认情况下，标准工具栏并不显示。要显示它，可以选择菜单栏中的“查看”→“ 工具栏”→“标准工具栏”命令。
使用标准工具栏中的按钮可以执行“文件”和“编辑”菜单中的常见操作，主要包括新建、打开、在Bridge中浏览、保存、全部保存、打印代码、剪切、复制、粘贴、撤销和重做，如图4-5所示。
图4-5 标准工具栏
4.2.3 样式呈现工具栏
样式呈现工具栏在默认情况下，也是隐藏的。若要显示该工具栏，可以选择菜单栏中的“查看”→“ 工具栏”→“样式呈现”命令。
如果在HTML文档中使用了依赖于媒体的样式表，使用该工具栏能够查看当前HTML文档在不同媒体类型中的呈现方式。它还包含一个允许用户启用或禁用CSS样式的按钮，如图4-6所示。
图4-6 样式呈现工具栏
注意
只有在HTML文档使用了依赖于某种媒体的样式表时，此工具栏才有用。
默认情况下，Dreamweaver会显示屏幕媒体类型的设计。此外还可以查看其他媒体类型的呈现。
◆ 呈现屏幕媒体类型：显示当前HTML文档在计算机屏幕上的显示方式。
◆ 呈现打印媒体类型：显示当前HTML文档在打印纸张上的显示方式。
◆ 呈现手持型媒体类型：显示当前HTML文档在手持设备上的显示方式。
◆ 呈现投影媒体类型：显示当前HTML文档在投影设备上的显示方式。
◆ 呈现TTY媒体类型：显示当前HTML文档在电传打字机上的显示方式。
◆ 呈现TV媒体类型：显示当前HTML文档在电视屏幕上的显示方式。
◆ 切换CSS样式的显示：用于启用或禁用CSS样式。此按钮可独立于其他媒体按钮之外工作。
◆ 设计时样式表：可用于指定设计时样式表。
4.2.4 浏览器导航工具栏
浏览器导航工具栏只有在实时视图中才可见，并显示当前文档的地址。从Dreamweaver CS5起，实时视图的作用类似于常规的浏览器，因此即使在地址栏里面输入本地站点以外的站点，Dreamweaver也将在文档窗口中加载该页面。浏览器导航工具栏如图4-7所示。
图4-7 浏览器导航工具栏
4.2.5 编码工具栏
编码工具栏包含可用于执行多种标准编码操作的按钮，例如折叠和展开所选代码、高亮显示无效代码、应用和删除注释、缩进代码、插入最近使用过的代码片段等。在代码视图中，编码工具栏垂直显示在文档窗口的左侧，如图4-8所示。
图4-8 编码工具栏
4.2.6 状态栏
状态栏位于文档窗口的底部，显示当前文档的有关信息，如图4-9所示。
图4-9 状态栏
在状态栏里面，包含标签选择器、选取工具、手形工具、缩放工具、设置缩放比例、窗口大小弹出菜单、文档大小和下载时间及编码指示器。
◆标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。如果单击<body>标签可以选择当前文档的整个正文。若要在标签选择器中设置某个标签的class或ID属性，可以右击该标签，然后从上下文菜单中选择一个类或ID。
◆ 选取工具启用和禁用手形工具。
◆ 手形工具用于在文档窗口中单击并拖动文档。
◆ 缩放工具和设置缩放比例弹出菜单使用户可以为当前文档设置缩放比例。
◆ 窗口大小弹出菜单用于将文档窗口的大小调整到预定义或自定义的尺寸。该工具在代码视图中不可以使用。
◆ 文档大小和下载时间显示页面的预计文档大小和预计下载时间。其中包括所有相关文件，如图像和其他媒体文件。
◆ 编码指示器显示当前文档的文本编码。
4.2.7 属性检查器
属性检查器使用户可以检查和编辑当前选定页面元素的最常用属性。属性检查器中的内容根据选定的元素会有所不同。图4-10中显示的是在设计视图中选中一个input标签之后的状态。里面包括字符宽度、最多字符、表单域的类型及CSS类。
图4-10 属性检查器
4.2.8 插入面板
插入面板包含用于创建和插入对象的按钮。这些按钮按几个类别进行组织，用户可以通过从类别弹出菜单中选择所需类别来进行切换。当前文档包含服务器代码时，还会显示其他类别，例如ASP等。插入面板如图4-11所示。
图4-11 插入面板
图4-11中的插入面板包含以下类别。
◆ 常用类别：用于创建和插入最常用的对象，例如图像和表格。
◆ 布局类别：用于插入表格、表格元素、div标签、框架和Spry构件。用户还可以选择表格的两种视图，即标准（默认）表格和扩展表格。
◆ 表单类别：包含一些按钮，用于创建表单和插入表单元素（包括Spry验证构件）。
◆ 数据类别：使用户可以插入Spry数据对象和其他动态元素，例如记录集、重复区域及插入记录表单和更新记录表单。
◆ Spry类别：包含一些用于构建Spry页面的按钮，包括Spry数据对象和构件。
◆ InContext Editing类别：包含供生成InContext编辑页面的按钮，包括用于可编辑区域、重复区域和管理CSS类的按钮。
◆ 文本类别：用于插入各种文本格式和列表格式的标签，如b、em、p、h1和ul。
◆ 收藏夹类别：用于将“插入”面板中最常用的按钮分组和组织在一起。
◆ 服务器代码类别：仅适用于使用特定服务器语言的页面，这些服务器语言包括ASP、CFML Basic、CFML Flow、CFMLAdvanced和PHP。这些类别中的每一个都提供了服务器代码对象，用户可以将这些对象插入“代码”视图中。
为了便于使用，用户可以将“插入”面板从其默认停靠位置拖出并放置在“文档”窗口顶部的水平位置。这样做后，它会从面板更改为工具栏。
4.2.9 文件面板
使用文件面板可查看和管理Dreamweaver站点中的文件，如图4-12所示。
图4-12 文件面板
4.2.10 CSS样式面板
使用CSS样式面板可以查看和编辑影响当前所选页面元素的CSS规则和属性，或影响整个文档的规则和属性。使用CSS样式面板顶部的切换按钮可以在两种模式之间切换，如图4-13所示。
图4-13 CSS样式面板
4.2.11 操作实例：插入一个下拉菜单
下拉菜单几乎是每个Windows窗口的必需元素。在网页设计中，为了在比较小的空间里面把网站里面的重要栏目都列出来，经常也会用到下拉菜单。
Dreamweaver集成了Spry。Spry是Adobe公司推出的轻量级的AJAX框架。利用这个框架可以为HTML文档增加一些Web 2.0的元素，增强网页的交互性。Spry还包含多个组件，本例将使用其中的Spry菜单栏。
step 1 在Dreamweaver CS5中，选择“文件”→“新建”命令。在弹出的“新建文档”对话框中选择“空白页”选项，在“页面类型”列表中选择“HTML”选项，在“布局”列表中选择“无”选项。单击“创建”按钮，创建一个新的HTML文档。
step 2 选择“文件”→“保存”命令，在弹出的“另存为”对话框里设置文件名为Menu.html，单击“保存”按钮。
step 3 在插入面板中，切换到“Spry”选项卡。单击其中的“Spry菜单栏”按钮，出现“Spry菜单栏”对话框，如图4-14所示。在此，用户可以选择是水平菜单还是垂直菜单。这里，选择“水平”单选按钮，单击“确定”按钮。
图4-14 Spry菜单栏
step 4 Dreamweaver会自动产生一些菜单项，如图4-15所示。单击标准工具栏上面的“保存”按钮，保存刚才所做的操作。
图4-15 Spry菜单栏
step 5 在文件面板中，单击“在浏览器中预览/调试”按钮，选择“预览在IExplore”命令或者按F12快捷键，在IE中预览当前文档，如图4-16所示。
图4-16 在IE中预览当前文档
step 6 单击设计视图中的Spry菜单栏，然后在文档窗口下面的标签选择器里面选中刚刚创建的菜单栏，在属性检查器里面会显示出该菜单栏的属性，如图4-17所示。
图4-17 Spry菜单栏的属性
从图中可以看出，Dreamweaver已经为新创建的菜单栏指定了一个id，值为MenuBar1。在属性检查器的中间有3个列表，分别对应Spry菜单栏的一级菜单、二级菜单和三级菜单。属性检查器的右边有4个文本框，分别对应于当前菜单项的文本、当前菜单项的链接、当前菜单项中a标签的title属性及target属性。用户可以为当前菜单项添加、删除以及修改其文本及其链接。
step 7 在属性检查器的最左边的列表中，单击“项目1”选项，在右边的第一个文本框里面把“项目1”修改为“文件”，按回车键。此时，在最左边的列表中，“项目1 ”也同时变成了“文件”，如图4-18所示。
图4-18 修改菜单项
step 8 在保持最左边的列表中“文件”选项被选中的情况下，单击中间列表框中的第一项。此时，最右边的文本框里面显示了中间列表框中第一项的属性。按照同样的方法，把该项的文本修改为“新建”。
step 9 重复上面的操作。最终效果是把顶级菜单项依次修改为“文件”、“编辑”、“视图”和“帮助”。“文件”对应的第二级菜单依次为“新建”、“打开”和“退出”；“编辑”对应的二级菜单依次为“复制”、“剪贴”和“粘贴”；“视图”对应的二级菜单依次为“放大”和“缩小”；“帮助”对应的二级菜单为“关于”。
按F12快捷键，在IE中预览最终效果，如图4-19所示。
图4-19 Spry菜单
在文档窗口中，切换到代码视图，可以看到，Dreamweaver已经自动生成了很多代码。菜单的代码如下：
01 <!—网页菜单开始 -->
02 <ul id="MenuBar1" class="MenuBarHorizontal">
03 <!—“文件”菜单项-->
04 <li><a class="MenuBarItemSubmenu" href="#">文件</a>
05 <ul>
06 <li><a href="#">新建</a> </li>
07 <li><a href="#">打开</a></li>
08 <li><a href="#">退出</a></li>
09 </ul>
10 </li>
11 <!—“编辑”菜单项-->
12 <li><a href="#" class="MenuBarItemSubmenu">编辑</a>
13 <ul>
14 <li><a href="#">复制</a></li>
15 <li><a href="#">剪贴</a></li>
16 <li><a href="#">粘贴</a></li>
17 </ul>
18 </li>
19 <!—“视图”菜单项-->
20 <li><a class="MenuBarItemSubmenu" href="#">视图</a>
21 <ul>
22 <li><a href="#">放大</a> </li>
23 <li><a href="#">缩小</a></li>
24 </ul>
25 </li>
26 <!—“帮助”菜单项-->
27 <li><a href="#" class="MenuBarItemSubmenu">帮助</a>
28 <ul>
29 <li><a href="#">关于</a></li>
30 </ul>
31 </li>
32 </ul>
33 <!—网页菜单代码结束-->
34 <script type="text/javascript">
35 var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); //创建菜单
36 </script>
从以上代码可以看出，实际上，整个菜单是一个ul标签，每一个菜单的菜单项也是一个ul标签，只不过使用了JavaScript脚本和CSS使得ul标签的显示效果像一个菜单而已。
4.2.12 操作实例：插入选项卡式面板
通过Dreamweaver可以在HTML文档里面生成类似于Windows应用程序的选项卡式面板，方法如下。
step 1 在Dreamweaver CS5中，选择“文件”→“新建”命令，新建一个HTML文档，并把该文档保存为tab.html。
step 2 在插入面板中，切换到“Spry”选项卡。单击其中的“Spry选项卡式面板”选项，在当前文档中插入一个选项卡式面板，如图4-20所示。
图4-20 插入Spry选项卡式面板
step 3 在设计视图中，把鼠标移到新插入的面板上。当面板左上角出现绿色“Spry选项卡式面板”的时候，单击绿色部分，选中整个面板。在属性检查器里面可以看到该面板的属性，如图4-21所示。
图4-21 Spry选项卡式面板属性
step 4 在设计视图中，单击“标签1”，把“标签1”修改为“我的文章”。按照同样的方法，把“标签2”修改为“我的照片”。修改完成后如图4-22所示。
图4-22 修改选项卡的标题
step 5 在设计视图中单击“内容1”所在的灰色区域，把“内容1”修改为自己想要的文字。单击面板左上的绿色部分，选中整个面板，在属性检查器里面，找到中间的“面板”列表，单击其中的“我的照片”选项。此时在设计视图里面，就切换到“我的照片”面板的内容了。
单击“内容2”所在的灰色区域，把“内容2”删掉。选择“插入”→“图像”命令，在出现的“选择图像源文件”对话框里面，选择一个图像文件，单击“确定”按钮，把图像插入到当前文档中，如图4-33所示。
图4-23 在“我的照片”面板中插入图像
step 6 单击标准工具栏上面的“保存”按钮，保存以上修改。按F12快捷键，在IE中预览效果，如图4-24所示。其中（a）为“我的文章”面板，（b）为“我的照片”面板。单击面板的名称，可以在这两个面板之间切换。
图4-24(a) 选项卡式面板
图4-24(b) 选项卡式面板
在代码视图中查看本文档的代码，可以得知实际上整个选项卡面板是一个div标签，里面的面板是ul标签。代码如下：
01 <!—选项卡面板开始-->
02 <div id="TabbedPanels1" class="TabbedPanels">
03 <!—选项卡面板项列表-->
04 <ul class="TabbedPanelsTabGroup">
05 <li class="TabbedPanelsTab" tabindex="0">我的文章</li>
06 <li class="TabbedPanelsTab" tabindex="0">我的照片</li>
07 </ul>
08 <!—选项卡面板内容-->
09 <div class="TabbedPanelsContentGroup">
10 <!—第一选项卡内容-->
11 <div class="TabbedPanelsContent">一、SQL Server 2000中的复制 Microsoft SQL
Server 2000的复制是在数据库之间对数据和数据库对象进行复制和分发并进行同步以确保其一致性的一
组技术。 使用复制可以将数据分发到不同位置，通过局域网、使用拨号连接、通过 Internet 分发给远程
或移动用户。复制还能够使用户提高应用程序性能，根据数据的使用方式物理分隔数据（例如，将联机事务
处理 (OLTP) 和决策支持系统分开），或者跨越多个服务器分布数据库处理。</div>
12 <!—第二个选项卡内容-->
13 <div class="TabbedPanelsContent"><img src="u=2957999833,3930081715&
fm=0&gp=0.jpg" width="118" height="140" /></div>
14 </div>
15 </div>
16 <!—选项卡面板结束-->
17 <script type="text/javascript">
18 var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
19 </script>
4.3 使用Dreamweaver CS5制作博客首页
目前，博客（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-25 插入div标签
通过步骤4和步骤5把整个文档大致分成4部分内容，分别放置头部、广告、主要内容和底部内容。
step 6 在属性检查器里面，单击“CSS”按钮，切换到CSS规则定义面板，在“目标规则”列表里面选择“<新CSS规则>”选项。单击“编辑规则”按钮，弹出“新建CSS规则”对话框。在“选择器类型”列表框里面选择“标签<重新定义HTML元素>”选项。在“选择器名称”文本框里面输入“body”，如图4-26所示。最后单击“确定”按钮。
图4-26 新建CSS规则对话框
step 7 在弹出的“body的CSS规则定义”对话框里面，在左边的“分类”选择“方框”选项。在“方框”属性面板里面，把“Padding”的“Top”设置为0，同时选中“全部相同”复选框。把“Margin”的“Top”也设置为0，同时选中“全部相同”复选框，如图4-27所示。设置完毕之后，单击“确定”按钮。
图4-27 设置body标签的CSS规则
step 8 在属性检查器里面的“目标规则”列表里面选择“<新CSS规则>”选项，单击“编辑规则”按钮，弹出“新建CSS规则”对话框，如图4-28所示。在“选择器类型”下拉菜单里面选择“ID（仅应用于一个HTML元素）”选项，在“选择器名称”文件框里面输入“header”，单击“确定”按钮。
图4-28 新建CSS规则对话框
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所示。单击“确定”按钮，关闭对话框。
图4-29 #header的CSS规则定义对话框
为ID为header的标签定义好CSS规则后，在设计视图中，可以看到头部的div标签的宽度和高度都发生了变化，并且水平居中。
step 10 重复步骤8～步骤9的操作，为ID为ad的div标签创建以下CSS规则：
01 width: 900px;
02 height:160px;
03 margin-top: 0px;
04 margin-right: auto;
05 margin-left: auto;
06 background:url(images/IMG_1496.jpg);
其中最后一行是为div设置背景图片。设置完毕之后，ID为ad的div的宽度变成900px，并且水平居中，还显示出了背景图片。
step 2 为ID为content的div标签设置CSS规则如下：
01 width: 900px;
02 margin-top: 0px;
03 margin-right: auto;
04 margin-left: auto;
设置完毕后，单击“确定”按钮，关闭对话框。
此时，在设计视图中，可以看到中间的ID为content的div标签的宽度发生了变化，并且与上面的ID为header的div之间有了一定的距离，水平居中。
step 12 为ID为footer的div标签，创建以下CSS规则：
01 width: 900px;
02 margin-top: 30px;
03 margin-right: auto;
04 margin-left: auto;
05 padding-top:10px;
06 text-align:center;
07 border-top:solid 1px #999;
08 clear: both;
09 top:10px;
10 position:relative;
11 font-size:12px;
此时在设计视图中ID为footer的div标签变成了水平居中，并且显示出一条横线。
step 13 在ID为header的div标签内部插入两个div标签，ID分别为logo和banner。为ID为logo的div标签创建以下CSS规则：
01 width:70px;
02 height:68px;
03 float:left;
为ID为banner的div标签创建以下CSS规则：
01 width:828px;
02 height:68px;
03 float:left;
04 font-size:20px;
step 14 在ID为content的div标签内部插入两个div标签，ID分别为leftcolumn和main。为ID为leftcolumn的div标签创建CSS规则如下：
01 float:left;
02 margin-top:5px;
为ID为main的div标签创建以下CSS规则：
01 width:696px;
02 float:right;
03 border:dashed 1px #CCC;
04 margin-top:5px;
step 15 在ID为leftcolumn的div标签内插入两个div标签，ID分别为columntitle和columncontent。为前者创建CSS规则如下：
01 text-align: center;
02 margin: 0px;
03 padding: 0px;
04 width: 200px;
05 border-top-width: 1px;
06 border-right-width: 1px;
07 border-bottom-width: 1px;
08 border-left-width: 1px;
09 border-top-style: dashed;
10 border-right-style: dashed;
11 border-bottom-style: dashed;
12 border-left-style: dashed;
为后者创建CSS规则如下：
01 text-align: left;
02 margin: 0px;
03 padding: 0px;
04 width: 200px;
05 border-top-width: 1px;
06 border-right-width: 1px;
07 border-bottom-width: 1px;
08 border-left-width: 1px;
09 border-top-style: dashed;
10 border-right-style: dashed;
11 border-bottom-style: dashed;
12 border-left-style: dashed;
step 16 删除ID为columncontent的div标签的内容，使用插入工具栏插入一个ul标签，命名其ID为categories，输入一些项目，然后为其创建CSS规则如下：
01 margin:0px;
02 padding-top:10px;
03 padding-left:20px;
step 17 在ID为main的div标签里面插入一个div标签，为其创建一个名称为blogitem的CSS类，规则如下：
01 border-bottom-width: 1px;
02 border-bottom-color: #999;
03 border-bottom-style: dashed;
04 margin-bottom:12px;
为ID为banner的div标签添加CSS规则如下：
01 width:828px;
02 height:68px;
03 float:left;
04 font-size:20px;
step 18 使用插入工具栏在ID为logo的div标签内部插入一个logo图片。在ID为banner的div标签内部输入博客的名称或者制作一个横幅图片放在里面。修改ID为footer的div标签的内容。在文档工具栏里面修改当前文档的标题为“春晓的博客”。
到此，已经制作好了一个比较美观的HTML文档了。在IE中预览效果如图4-30所示。
图4-30 博客首页
在本例中，是使用div标签结合CSS来实现布局的，而没有采用传统的表格布局。原因在于HTML中的表格主要是用来展示数据的，而不是用来实现布局的。大量嵌套的表格集中在HTML文档中，会使得代码非常复杂，难以理解，此外HTML文档兼容性较差。
采用div标签来实现布局，则代码简洁，CSS和HTML部分分离，看起来更有层次感，修改起来更方便。对于搜索引擎，更具有亲和力。如果读者对于本例中的CSS代码不太熟悉，可以参考本书后面的章节。
4.4 Dreamweaver CS5的使用技巧
熟练使用Dreamweaver可以加快开发速度，提高网页的质量。因此，开发者应该在使用Dreamweaver的过程中，不断积累技巧。
4.4.1 Dreamweaver中常用的快捷方式
为了便于开发人员操作，Dreamweaver设置了大量的快捷键。熟练掌握其中常用的快捷键，可以节省很多时间。表4-1列出最常使用的一些快捷键。
表4-1 Dreamweaver CS5的常用快捷键
4.4.2 Dreamweaver的首选参数
Dreamweaver CS5的首选参数可以对Dreamweaver的功能进行配置，以符合开发者自己的习惯。首选参数可以控制Dreamweaver用户界面的常规外观和行为，还包括与特定功能相关的选项，如层、样式表、显示HTML和JavaScript代码、外部编辑器和在浏览器中预览等。
要打开“首选参数”对话框，可以选择“编辑”→“首选参数”命令，也可以使用快捷键Ctrl+U。其界面如图4-31所示。
图4-31 Dreamweaver CS 5首选参数对话框
在“首选参数”对话框的左侧一共有19个分类。
◆ 常规：首选参数用来控制Dreamweaver的常规外观。
◆ AP：元素首选参数可以对AP元素的显示方式及外观进行设置。
◆ CSS样式：首选参数控制Dreamweaver编写定义CSS样式的代码的方式。CSS样式可以以速记形式来编写，有些人觉得这种形式使用起来更容易。但某些较旧版本的浏览器不能正确解释速记。
◆ 不可见元素：首选参数可以指定当选择“查看”→“可视化助理”→“不可见元素”命令时可见的元素种类。
◆ 代码提示：首选参数可以使用户在“代码”视图或快速标签编辑器中键入代码时迅速插入标签名称、属性和值。
◆ “代码改写：首选参数用来控制当打开文档时，Dreamweaver是否会根据用户指定的代码改写首选参数来修正（或改写）某种技术上非法的代码。
◆ 代码格式：首选参数用来指定Dreamweaver如何设置代码格式。
◆ 代码颜色：首选参数指定常规类别的标签和代码元素的颜色，例如与表单相关的标签或JavaScript标识符的颜色。
◆ 在浏览器中预览：首选参数定义主浏览器和候选浏览器及它们的设置。
◆ 复制/粘贴：首选参数用来设置当用户从其他应用程序粘贴文本到设计视图时，是否保留原来的格式。
◆ 字体：首选参数用来设置各种语言所对应的均衡字体、固定字体及代码的字体。
◆ 文件比较：首选参数用来设置文件比较的第三方程序。
◆ 文件类型/编辑器：首选参数允许用户为每种文件类型指定编辑器。
◆ 新建文档：首选参数用来指定用户新建文档时默认的文档类型、扩展名及默认的编码等。
◆ 标记色彩：首选参数使用户可以自定义Dreamweaver用以标识模板区域、库项目、第三方标签、布局元素和代码的颜色。
◆ 状态栏：首选参数用来设置状态栏的各种显示信息。
◆ 站点：首选参数用于为文件面板设置相关参数。
◆ 辅助功能：首选参数用来控制在插入哪些对象时显示辅助功能属性。
◆ 验证程序：首选参数用来设置与代码验证有关的参数，如当文档没有明确指定DOCTYPE时，应该参照哪种标准来验证。
4.5 常见问题
4.5.1 Dreamweaver CS5的新功能
在Dreamweaver CS5中，增加和增强了许多激动人心的功能，主要包括以下方面。
◆ Adobe BrowserLab：Dreamweaver CS5集成了Adobe BrowserLab，该服务为跨浏览器兼容性测试提供了快速准确的解决方案。通过BrowserLab，开发人员可以使用多种查看和比较工具来预览Web页和本地内容。
◆ Business Catalyst集成：Adobe Business Catalyst是一个承载应用程序，它将传统的桌面工具替换为一个中央平台，供Web设计人员使用。该应用程序与Dreamweaver配合使用，允许用户构建任何内容，包括数据驱动的基本Web站点，以及功能强大的在线商店。
◆ CSS禁用/启用：CSS禁用/启用功能允许用户直接从CSS样式面板禁用和重新启用CSS属性。禁用CSS属性只会取消指定属性的注释，而不会实际删除该属性。
◆ CSS检查：CSS检查模式允许用户以可视化方式详细显示CSS框模型属性，包括填充、边框和边距，无须读取代码，也不需要独立的第三方实用程序。
◆ CSS起始布局：Dreamweaver CS5包含更新和简化的CSS起始布局。CS4布局中复杂的子代选择器已被删除，并替换为简化和易于理解的类。
◆ 动态相关文件：允许用户搜索所有必要的外部文件和脚本，以组合基于PHP的内容管理系统（CMS）页面，以及在“相关文件”工具栏中显示其文件名。默认情况下，Dreamweaver支持Wordpress、DrupaI和Joomla! CMS框架的文件发现。
◆ 实时视图导航：实时视图导航将激活实时视图中的链接，允许用户与服务器端应用程序和动态数据交互。该功能还允许用户输入URL以检查通过实时Web服务器处理的页面。如果这些页面存在于某个本地定义的站点中还可以编辑所浏览到的页面。
◆ PHP自定义类代码提示：PHP自定义类代码提示显示PHP函数、对象和常量的正确语法，有助于用户键入更准确的代码。代码提示还可以使用用户自定义函数和类，以及第三方框架，如Zend框架。
◆ 简化的站点设置：“站点设置”对话框使设置本地Dreamweaver站点更简单。“远程服务器”类别允许在一个视图中指定远程服务器和测试服务器。
◆ 站点特定的代码提示：允许用户在使用第三方PHP库和CMS框架时自定义编码环境。可以将博客的主题文件及其他自定义PHP文件和目录包含或排除作为代码提示的源。
◆ Subversion支持增强功能：Dreamweaver CS5扩展了对Subversion的支持，使开发人员可以在本地移动、复制和删除文件，然后将更改与远程SVN存储库同步。
4.5.2 什么是网页三剑客
网页三剑客名称最初来自于Macromedia公司开发的3个用于网页制作的软件，分别为Dreamweaver、Flash和Fireworks。其中Dreamweaver主要是用来制作网页及HTML编码的；Flash则是用来制作动画的，它是目前网页动画的标准；Fireworks是用来进行矢量图像制作和图像处理的。
这些软件的功能非常强大，并且只要使用这3个软件完全可以胜任网页制作和网站建设的所有任务，所以被称为网页三剑客。目前，Macromedia公司被Adobe公司收购，所以这3个软件也由Adobe公司继续开发和维护。
4.6 小结
本章介绍了网页制作的权威工具Adobe Dreamweaver CS5的安装方法、工作区的构成、某些工具的使用方法等内容。并通过一个具体例子来演示如何使用Dreamweaver来制作网页。本章是Dreamweaver的入门知识。在随后的一章里面，本书会介绍Dreamweaver的网站管理功能。