第二章DreamweaverCS5快速入门资料

DreameaverCS5快速入门课程代码：课程介绍目的：通过学习掌握DreamveaverCS5快速入门。内容:本章通过介绍Dreamweaver的特点及操作界面入手，让初学者对Dreamweaver有个了解。重点：DreamweaverCS5简介。难点：实用的DreamweaverCS5操作界面。DreamweaverCS5简介实用的DreamweaverCS5操作界面使用可视化助理布局了解DreameaverCS5了解操作界面“属性”面板“插入”栏“标准”工具栏面板的应用实用的DreamweaverCS5操作界面•Dreamweaver是美国Adobe公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，能够使网页和数据库关联起来，支持最新的HTML和CSS，用于对Web站点、Web页面和Web应用程序进行设计、编码和开发，DreamweaverCS5包含一个崭新、简洁、高效的界面，且性能也得到了改进，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。DreamweaverCS5简介了解操作界面•运行DreamweaverCS5软件,会进入一个欢迎窗口，其中分为三栏，左边“打开最近的项目”栏为近期打开的HTML文件记录，单击标题下方可以快速打开HTML文件；中间“新建”栏表示我们建立的文件类型；右边为“主要功能”栏。•系统创建一个默认文件名为Untitled-1.html的普通空白网页，同时也显示出都CS5的操作界面。•菜单栏：菜单中包括用于查看当前文档或对当前文档进行操作的各种命令。•文档工具栏:包含一些按钮，它们提供各种“文档”窗口视图的选项、各种查看选项和一些常用操作。•代码编辑器：用于专门输入代码并对代码进行编辑。•文档窗口:显示您当前创建和编辑的文档。•属性面板:用于查看和更改所选对象或文本的各种属性。每个对象具有不同的属性。在“编码器”工作区布局中，“属性”检查器默认是不展开的。•面板组:帮助您监控和修改工作。例如，“插入”面板、“CSS样式”面板和“文件”面板。若要展开某个面板，请双击其选项卡。用于管理文件和文件夹，无论它们是Dreamweaver站点的一部分还是位于远程服务器上。“文件”面板还使您可以访问本地磁盘上的全部文件，非常类似于Windows资源管理器(Windows)或Finder(Macintosh)。•“属性”检查器使您可以检查和编辑当前选定页面元素的最常用属性。“属性”检查器中的内容根据选定的元素会有所不同。•“属性”检查器使您可以检查和编辑当前选定页面元素的最常用属性。属性检查器中的内容根据选定的元素会有所不同。“属性”面板•“插入”面板包含用于创建和插入对象的按钮。这些按钮按几个类别进行组织，您可以通过从“类别”弹出菜单中选择所需类别来进行切换。当前文档包含服务器代码时，还会显示其他类别。•某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。“插入”栏•工具栏包括了控制文档窗口视图的按钮和一些比较常用的弹出菜单，用户可以通过代码、拆分和设计3个按钮使工作区在不同的视图模式之间进行切换。•显示代码视图和设计视图：将“文档”窗口拆分为“代码”视图和“设计”视图。当选择了这种组合视图时，“视图选项”菜单中的“顶部的设计视图”选项变为可用。•实时代码视图：显示浏览器用于执行该页面的实际代码。显示不可编辑的、交互式的、基于浏览器的文档视图。•检查浏览器兼容性：用于检查您的CSS是否对于各种浏览器均兼容。•在浏览器中预览/调试：允许您在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。•可视化助理：使您可以使用各种可视化助理来设计页面。•刷新设计视图：在“代码”视图中对文档进行更改后刷新文档的“设计”视图。在执行某些操作之后，您在“代码”视图中所做的更改才会自动显示在“设计”视图中。刷新过程也会更新依赖于DOM的代码功能，如选择代码块的开始标签或结束标签的能力。•文档标题：允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。•文件管理：显示“文件管理”弹出菜单。“标准”工具栏•使用“文件”面板可查看和管理Dreamweaver站点中的文件。•在“文件”面板中查看站点、文件或文件夹时，您可以更改查看区域的大小，还可以展开或折叠“文件”面板。当折叠“文件”面板时，它以文件列表的形式显示本地站点、远程站点、测试服务器或SVN库的内容。在展开时，它会显示本地站点和远程站点、测试服务器或SVN库中的其中一个。•在“当前”模式下，“CSS样式”面板将显示三个面板：“所选内容的摘要”窗格，其中显示文档中当前所选内容的CSS属性；“规则”窗格，其中显示所选属性的位置，以及“属性”窗格，它允许您编辑定义所选内容的规则的CSS属性。•在“全部”模式下，“CSS样式”面板显示两个窗格：“所有规则”窗格（顶部）和“属性”窗格（底部）。“所有规则”窗格显示当前文档中定义的规则以及附加到当前文档的样式表中定义的所有规则的列表。使用“属性”窗格可以编辑“所有规则”窗格中任何所选规则的CSS属性。“面板”的应用•设置标尺：标尺有助于测量、组织和规划布局。标尺可以显示在页面的左边框和上边框中，以像素、英寸或厘米为单位来标记。•如果在标尺的显示和隐藏状态之间切换，可选择“查看/标尺/显示”。•如果更改原点，可将标尺原点图标拖到页面上的任意位置。•如果将原点重设到它的默认位置，可选择“查看/标尺/重设原点”。•如果要更改度量单位，请选择“查看/标尺”，然后选择“像素”、“英寸”或“厘米”。•设置布局辅助线：辅助线是从标尺拖动到文档上的线条。它们有助于更加准确地放置和对齐对象。还可以使用辅助线来测量页面元素的大小，或者模拟Web浏览器的重叠部分。•为了跟辅助线对齐元素，该应用程序还允许将元素靠齐到辅助线，以及将辅助线靠齐到元素。（只有在将元素绝对定位的情况下，才可使用靠齐功能）。还可以锁定辅助线，以防止其他用户不小心移动它们。使用可视化助理布局•辅助线是从标尺拖动到文档上的线条，它们有助于更加准确地放置和对齐对象。还可以使用辅助线来测量页面元素的大小，或者模拟Web浏览器的重叠部分。•为了跟辅助线对齐元素，该应用程序还允许将元素靠齐到辅助线，以及将辅助线靠齐到元素。只有在将元素绝对定位的情况下，才可使用靠齐功能，还可以锁定辅助线，以防止其他用户不小心移动它们。设置布局辅助线•将辅助线添加到Dreamweaver模板之后，模板的所有实例都会继承辅助线。不过，模板实例中的辅助线被视为可编辑区域，因此用户可以修改它们。当模板实例被主模板更新时，模板实例中经过修改的辅助线总会恢复到它们的原始位置。•还可以向模板实例中添加自己的辅助线。当模板实例被主模板更新时，不会覆盖以这种方式添加的辅助线。将辅助线用于模板•网格在“文档”窗口中显示一系列的水平线和垂直线。它对于精确地放置对象很有用。可以让经过绝对定位的页元素在移动时自动靠齐网格，还可以通过指定网格设置更改网格或控制靠齐行为。无论网格是否可见，都可以使用靠齐。•执行“查看”“网格设置”“网格设置”菜单命令，弹出对话框，设置完成后，单击“确定”应用更改。•网格设置对话框参数设置如下：•颜色：指定网格线的颜色。请单击色样表并从颜色选择器中选择一种颜色，或者在文本框中键入一个十六进制数。•靠齐到网格：使页面元素靠齐到网格线。•间距：控制网格线的间距。输入一个数字并从菜单中选择“像素”、“英寸”或“厘米”。•显示网格：指定网格线是显示为线条还是显示为点，使网格在“设计”视图中可见。使用布局网格本章小结网站建设者应该撑握一种功能齐全的网页设计软件，Dreamweaver可以说是明智的选择，其灵活的活动界面、强大的开发环境和可扩展是同类其他软件不可比拟的。思考与练习一、选择题1、常用面板中的“图像”按钮，在哪个区域中可以找到：（）A、插入面板B、属性面板C、面板组D、菜单栏2、Dreamweaver的操作界面都有哪些：（）A、菜单栏B、文档工具栏C、属性面板D、文档窗口思考与练习3.下列哪些不属于“表单”面板：（）A、文本字段B、复选框C、图像域D、动态数据4、数据面板都包括哪些菜单：（）A、显示区域B、重复区域C、插入记录D、用户身份验证5、哪些不属于“文本”面板：（）A、粗体B、段落C、项目列表D、记录集思考与练习二、简答题1．DreamweaverCS5的界面分为哪几个重要部分？2.DreamweaverCS5的面板都包括哪些？