第二章DreamweaverCS5快速入门

1、Dreameaver CS5快速入门快速入门课程代码：课程代码：课程介绍课程介绍v目的：通过学习掌握目的：通过学习掌握Dreamveaver CS5Dreamveaver CS5快速快速入门入门。v内容内容: :本章通过介绍本章通过介绍DreamweaverDreamweaver的特点及操作界面的特点及操作界面入手，让初学者对入手，让初学者对DreamweaverDreamweaver有个了解。有个了解。v 重点重点： Dreamweaver CS5Dreamweaver CS5简介简介。v难点：实用的难点：实用的Dreamweaver CS5Dreamweaver CS5操作界面操作界面。D

2、reamweaver CS5Dreamweaver CS5简介简介实用的实用的Dreamweaver CS5Dreamweaver CS5操作操作界面界面使用可视化助理布局使用可视化助理布局 了解了解Dreameaver CS5 Dreameaver CS5 了解操作界面了解操作界面“属性属性”面板面板“插入插入”栏栏“标准标准”工具栏工具栏 面板的应用面板的应用实用的实用的Dreamweaver CS5Dreamweaver CS5操作界面操作界面 DreamweaverDreamweaver是美国是美国AdobeAdobe公司开发的集网公司开发的集网页制作和管理网站于一身的所见即所得网页编

3、页制作和管理网站于一身的所见即所得网页编辑器，能够使网页和数据库关联起来，支持最辑器，能够使网页和数据库关联起来，支持最新的新的HTMLHTML和和CSSCSS，用于对，用于对WebWeb站点、站点、WebWeb页页面和面和WebWeb应用程序进行设计、编码和开发，应用程序进行设计、编码和开发，Dreamweaver CS5Dreamweaver CS5包含一个崭新、简洁、高包含一个崭新、简洁、高效的界面，且性能也得到了改进，它是第一套效的界面，且性能也得到了改进，它是第一套针对专业针对专业网页设计网页设计师特别发展的视觉化网页开师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平

4、发工具，利用它可以轻而易举地制作出跨越平台限制和跨越台限制和跨越浏览器浏览器限制的充满动感的网页。限制的充满动感的网页。Dreamweaver CS5Dreamweaver CS5简介简介了解操作界面了解操作界面运行运行Dreamweaver CS5Dreamweaver CS5软件软件, ,会进入一个欢迎窗口，其中分为三栏，左边会进入一个欢迎窗口，其中分为三栏，左边“打开最打开最近的项目近的项目”栏为近期打开的栏为近期打开的HTMLHTML文件记录，单击标题下方可以快速打开文件记录，单击标题下方可以快速打开HTMLHTML文件；文件；中间中间“新建新建”栏表示我们建立的文件类型；右边为栏表示

5、我们建立的文件类型；右边为“主要功能主要功能”栏。栏。系统创建一个默认文件名为系统创建一个默认文件名为Untitled-1.htmlUntitled-1.html的普通空白网页，同时也显示出都的普通空白网页，同时也显示出都CS5CS5的操作界面。的操作界面。菜单栏：菜单中包括用于查看当前文档或对当前文档进行操作的各种命令。菜单栏：菜单中包括用于查看当前文档或对当前文档进行操作的各种命令。文档工具栏文档工具栏: : 包含一些按钮，它们提供各种包含一些按钮，它们提供各种“文档文档”窗口视图的选项、各种查看选项窗口视图的选项、各种查看选项和一些常用操作。和一些常用操作。代码编辑器：用于专门输入代码并

6、对代码进行编辑。代码编辑器：用于专门输入代码并对代码进行编辑。文档窗口文档窗口: : 显示您当前创建和编辑的文档。显示您当前创建和编辑的文档。属性面板属性面板: : 用于查看和更改所选对象或文本的各种属性。每个对象具有不同的属性。用于查看和更改所选对象或文本的各种属性。每个对象具有不同的属性。在在“编码器编码器”工作区布局中，工作区布局中，“属性属性”检查器默认是不展开的。检查器默认是不展开的。面板组面板组: :帮助您监控和修改工作。例如，帮助您监控和修改工作。例如，“插入插入”面板、面板、“CSSCSS样式样式”面板和面板和“文件文件”面板。若要展开某个面板，请双击其选项卡。用于管理文件和文

7、件夹，无论它们是面板。若要展开某个面板，请双击其选项卡。用于管理文件和文件夹，无论它们是 Dreamweaver Dreamweaver 站点的一部分还是位于远程服务器上。站点的一部分还是位于远程服务器上。“文件文件”面板还使您可以访问面板还使您可以访问本地磁盘上的全部文件，非常类似于本地磁盘上的全部文件，非常类似于 Windows Windows 资源管理器资源管理器 (Windows) (Windows) 或或 Finder Finder (Macintosh)(Macintosh)。 “属性属性”检查器使您可以检查和编辑当前检查器使您可以检查和编辑当前选定页面元素的最常用属性。选定页面元

8、素的最常用属性。“属性属性”检检查器中的内容根据选定的元素会有所不同查器中的内容根据选定的元素会有所不同。 “属性属性”检查器使您可以检查和编辑当前检查器使您可以检查和编辑当前选定页面元素的最常用属性。属性检查器选定页面元素的最常用属性。属性检查器中的内容根据选定的元素会有所不同。中的内容根据选定的元素会有所不同。“属性属性”面板面板 “插入插入”面板包含用于创建和插入对象的按钮。这些按面板包含用于创建和插入对象的按钮。这些按钮按几个类别进行组织，您可以通过从钮按几个类别进行组织，您可以通过从“类别类别”弹出菜弹出菜单中选择所需类别来进行切换。当前文档包含服务器代单中选择所需类别来进行切换。当

9、前文档包含服务器代码时，还会显示其他类别。码时，还会显示其他类别。 某些类别具有带弹出菜单的按钮。从弹出菜单中选择一某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为按钮的默认操作。例如，如果个选项时，该选项将成为按钮的默认操作。例如，如果从从“图像图像”按钮的弹出菜单中选择按钮的弹出菜单中选择“图像占位符图像占位符”，下，下次单击次单击“图像图像”按钮时，按钮时，Dreamweaver Dreamweaver 会插入一个图会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。钮的默认操作都会改变。

10、“插入插入”栏栏工具栏包括了控制文档窗口视图的按钮和一些比较常用的弹出菜单，用户可以通工具栏包括了控制文档窗口视图的按钮和一些比较常用的弹出菜单，用户可以通过代码、拆分和设计过代码、拆分和设计3 3个按钮使工作区在不同的视图模式之间进行切换。个按钮使工作区在不同的视图模式之间进行切换。显示代码视图和设计视图显示代码视图和设计视图 ：将：将“文档文档”窗口拆分为窗口拆分为“代码代码”视图和视图和“设计设计”视图视图。当选择了这种组合视图时，。当选择了这种组合视图时，“视图选项视图选项”菜单中的菜单中的“顶部的设计视图顶部的设计视图”选项变选项变为可用。为可用。 实时代码视图：实时代码视图： 显示

11、浏览器用于执行该页面的实际代码。显示不可编辑的、交互显示浏览器用于执行该页面的实际代码。显示不可编辑的、交互式的、基于浏览器的文档视图。式的、基于浏览器的文档视图。检查浏览器兼容性：用于检查您的检查浏览器兼容性：用于检查您的 CSS CSS 是否对于各种浏览器均兼容。是否对于各种浏览器均兼容。在浏览器中预览在浏览器中预览/ /调试：允许您在浏览器中预览或调试文档。从弹出菜单中选择调试：允许您在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。一个浏览器。可视化助理：使您可以使用各种可视化助理来设计页面。可视化助理：使您可以使用各种可视化助理来设计页面。刷新设计视图：在刷新设计视图：在“代码代

12、码”视图中对文档进行更改后刷新文档的视图中对文档进行更改后刷新文档的“设计设计”视图。视图。在执行某些操作之后，您在在执行某些操作之后，您在“代码代码”视图中所做的更改才会自动显示在视图中所做的更改才会自动显示在“设计设计”视图中。刷新过程也会更新依赖于视图中。刷新过程也会更新依赖于 DOMDOM的代码功能，如选择代码块的开始标签的代码功能，如选择代码块的开始标签或结束标签的能力。或结束标签的能力。文档标题：文档标题： 允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。档已经有了

13、一个标题，则该标题将显示在该区域中。文件管理：显示文件管理：显示“文件管理文件管理”弹出菜单。弹出菜单。“标准标准”工具栏工具栏使用使用“文件文件”面板可查看和管理面板可查看和管理 Dreamweaver Dreamweaver 站点中的文件。站点中的文件。在在“文件文件”面板中查看站点、文件或文件夹时，您可以更改查看区域的面板中查看站点、文件或文件夹时，您可以更改查看区域的大小，还可以展开或折叠大小，还可以展开或折叠“文件文件”面板。当折叠面板。当折叠“文件文件”面板时，它以面板时，它以文件列表的形式显示本地站点、远程站点、测试服务器或文件列表的形式显示本地站点、远程站点、测试服务器或 SV

14、N SVN 库的内库的内容。在展开时，它会显示本地站点和远程站点、测试服务器或容。在展开时，它会显示本地站点和远程站点、测试服务器或 SVN SVN 库库中的其中一个。中的其中一个。在在“当前当前”模式下，模式下，“CSS CSS 样式样式”面板将显示三个面板：面板将显示三个面板：“所选内容的所选内容的摘要摘要”窗格，其中显示文档中当前所选内容的窗格，其中显示文档中当前所选内容的 CSS CSS 属性；属性；“规则规则”窗窗格，其中显示所选属性的位置，以及格，其中显示所选属性的位置，以及“属性属性”窗格，它允许您编辑定义窗格，它允许您编辑定义所选内容的规则的所选内容的规则的 CSS CSS 属

15、性。属性。在在“全部全部”模式下，模式下，“CSS CSS 样式样式”面板显示两个窗格：面板显示两个窗格：“所有规则所有规则”窗窗格（顶部）和格（顶部）和“属性属性”窗格（底部）。窗格（底部）。“所有规则所有规则”窗格显示当前文档窗格显示当前文档中定义的规则以及附加到当前文档的样式表中定义的所有规则的列表。中定义的规则以及附加到当前文档的样式表中定义的所有规则的列表。使用使用“属性属性”窗格可以编辑窗格可以编辑“所有规则所有规则”窗格中任何所选规则的窗格中任何所选规则的 CSS CSS 属性。属性。“面板面板”的应用的应用设置标尺：标尺有助于测量、组织和规划布局。标尺可以显示在页面的左边设置标

16、尺：标尺有助于测量、组织和规划布局。标尺可以显示在页面的左边框和上边框中，以像素、英寸或厘米为单位来标记。框和上边框中，以像素、英寸或厘米为单位来标记。如果在标尺的显示和隐藏状态之间切换，可选择如果在标尺的显示和隐藏状态之间切换，可选择“查看查看/ /标尺标尺/ /显示显示”。如果更改原点，可将标尺原点图标如果更改原点，可将标尺原点图标 拖到页面上的任意位置。拖到页面上的任意位置。如果将原点重设到它的默认位置，可选择如果将原点重设到它的默认位置，可选择“查看查看/ /标尺标尺/ /重设原点重设原点”。如果要更改度量单位，请选择如果要更改度量单位，请选择“查看查看/ /标尺标尺”，然后选择，然后

17、选择“像素像素”、“英寸英寸”或或“厘米厘米”。设置布局辅助线：辅助线是从标尺拖动到文档上的线条。它们有助于更加准设置布局辅助线：辅助线是从标尺拖动到文档上的线条。它们有助于更加准确地放置和对齐对象。还可以使用辅助线来测量页面元素的大小，或者模拟确地放置和对齐对象。还可以使用辅助线来测量页面元素的大小，或者模拟 Web Web 浏览器的重叠部分。浏览器的重叠部分。为了跟辅助线对齐元素，该应用程序还允许将元素靠齐到辅助线，以及将辅为了跟辅助线对齐元素，该应用程序还允许将元素靠齐到辅助线，以及将辅助线靠齐到元素。（只有在将元素绝对定位的情况下，才可使用靠齐功能）助线靠齐到元素。（只有在将元素绝对定

18、位的情况下，才可使用靠齐功能）。还可以锁定辅助线，以防止其他用户不小心移动它们。还可以锁定辅助线，以防止其他用户不小心移动它们。 使用可视化助理布局使用可视化助理布局 辅助线是从标尺拖动到文档上的线条，它们有助辅助线是从标尺拖动到文档上的线条，它们有助于更加准确地放置和对齐对象。还可以使用辅助于更加准确地放置和对齐对象。还可以使用辅助线来测量页面元素的大小，或者模拟线来测量页面元素的大小，或者模拟 Web Web 浏览浏览器的重叠部分。器的重叠部分。 为了跟辅助线对齐元素，该应用程序还允许将元为了跟辅助线对齐元素，该应用程序还允许将元素靠齐到辅助线，以及将辅助线靠齐到元素。只素靠齐到辅助线，以

19、及将辅助线靠齐到元素。只有在将元素绝对定位的情况下，才可使用靠齐功有在将元素绝对定位的情况下，才可使用靠齐功能，还可以锁定辅助线，以防止其他用户不小心能，还可以锁定辅助线，以防止其他用户不小心移动它们。移动它们。设置布局辅助线设置布局辅助线 将辅助线添加到将辅助线添加到 Dreamweaver Dreamweaver 模板之后，模板模板之后，模板的所有实例都会继承辅助线。不过，模板实例中的所有实例都会继承辅助线。不过，模板实例中的辅助线被视为可编辑区域，因此用户可以修改的辅助线被视为可编辑区域，因此用户可以修改它们。当模板实例被主模板更新时，模板实例中它们。当模板实例被主模板更新时，模板实例中

20、经过修改的辅助线总会恢复到它们的原始位置。经过修改的辅助线总会恢复到它们的原始位置。 还可以向模板实例中添加自己的辅助线。当模板还可以向模板实例中添加自己的辅助线。当模板实例被主模板更新时，不会覆盖以这种方式添加实例被主模板更新时，不会覆盖以这种方式添加的辅助线。的辅助线。 将辅助线用于模板将辅助线用于模板网格在网格在“文档文档”窗口中显示一系列的水平线和垂直线。它对于精窗口中显示一系列的水平线和垂直线。它对于精确地放置对象很有用。可以让经过绝对定位的页元素在移动时自确地放置对象很有用。可以让经过绝对定位的页元素在移动时自动靠齐网格，还可以通过指定网格设置更改网格或控制靠齐行为动靠齐网格，还可

21、以通过指定网格设置更改网格或控制靠齐行为。无论网格是否可见，都可以使用靠齐。无论网格是否可见，都可以使用靠齐。执行执行“查看查看”“网格设置网格设置”“网格设置网格设置”菜单命令，弹出对话菜单命令，弹出对话框，设置完成后，单击框，设置完成后，单击“确定确定”应用更改。应用更改。网格设置对话框参数设置如下：网格设置对话框参数设置如下：颜色：指定网格线的颜色。请单击色样表并从颜色选择器中选择颜色：指定网格线的颜色。请单击色样表并从颜色选择器中选择一种颜色，或者在文本框中键入一个十六进制数。一种颜色，或者在文本框中键入一个十六进制数。靠齐到网格：使页面元素靠齐到网格线。靠齐到网格：使页面元素靠齐到网格线。间距：控制网格线的间距。输入一个数字并从菜单中选择间距：控制网格线的间距。输入一个数字并从菜单中选择“像素像素”、“英寸英寸”或或“厘米厘米”。显示网格：指定网格线是显示为线条还是显示为点，使网格在显示网格：指定网格线是显示为线条还是显示为点，使网格在“设计设计”视图中可见。视图中可见。使用布局网格使用布局网格本章小结本章小结v网站建设者应该撑握一种功能齐网站建设者应该撑握一种功能齐全的网页设计软件，全的网页设计软件，DreamweaverDreamweaver