第二章DreamweaverCS5快速入门资料.ppt

范例效果 Dreameaver CS5快速入门 课程代码： 课程介绍 目的：通过学习掌握Dreamveaver CS5快速入门。 内容:本章通过介绍Dreamweaver的特点及操作界面入手，让初学者对Dreamweaver有个了解。 重点： Dreamweaver CS5简介。 难点：实用的Dreamweaver CS5操作界面。 Dreamweaver CS5简介 实用的Dreamweaver CS5操作界面 使用可视化助理布局 了解Dreameaver CS5  了解操作界面 “属性”面板 “插入”栏 “标准”工具栏 面板的应用 实用的Dreamweaver CS5操作界面 Dreamweaver是美国Adobe公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，能够使网页和数据库关联起来，支持最新的HTML和CSS，用于对Web站点、Web页面和Web应用程序进行设计、编码和开发，Dreamweaver CS5包含一个崭新、简洁、高效的界面，且性能也得到了改进，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 Dreamweaver CS5简介 了解操作界面 运行Dreamweaver CS5软件,会进入一个欢迎窗口，其中分为三栏，左边“打开最近的项目”栏为近期打开的HTML文件记录，单击标题下方可以快速打开HTML文件；中间“新建”栏表示我们建立的文件类型；右边为“主要功能”栏。 系统创建一个默认文件名为Untitled-1.html的普通空白网页，同时也显示出都CS5的操作界面。 菜单栏：菜单中包括用于查看当前文档或对当前文档进行操作的各种命令。 文档工具栏: 包含一些按钮，它们提供各种“文档”窗口视图的选项、各种查看选项和一些常用操作。 代码编辑器：用于专门输入代码并对代码进行编辑。 文档窗口: 显示您当前创建和编辑的文档。 属性面板: 用于查看和更改所选对象或文本的各种属性。每个对象具有不同的属性。在“编码器”工作区布局中，“属性”检查器默认是不展开的。 面板组:帮助您监控和修改工作。例如，“插入”面板、“CSS样式”面板和“文件”面板。若要展开某个面板，请双击其选项卡。用于管理文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是位于远程服务器上。“文件”面板还使您可以访问本地磁盘上的全部文件，非常类似于 Windows 资源管理器 (Windows) 或 Finder (Macintosh)。 “属性”检查器使您可以检查和编辑当前选定页面元素的最常用属性。“属性”检查器中的内容根据选定的元素会有所不同。 “属性”检查器使您可以检查和编辑当前选定页面元素的最常用属性。属性检查器中的内容根据选定的元素会有所不同。 “属性”面板 “插入”面板包含用于创建和插入对象的按钮。这些按钮按几个类别进行组织，您可以通过从“类别”弹出菜单中选择所需类别来进行切换。当前文档包含服务器代码时，还会显示其他类别。 某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。 “插入”栏 工具栏包括了控制文档窗口视图的按钮和一些比较常用的弹出菜单，用户可以通过代码、拆分和设计3个按钮使工作区在不同的视图模式之间进行切换。 显示代码视图和设计视图 ：将“文档”窗口拆分为“代码”视图和“设计”视图。当选择了这种组合视图时，“视图选项”菜单中的“顶部的设计视图”选项变为可用。 实时代码视图： 显示浏览器用于执行该页面的实际代码。显示不可编辑的、交互式的、基于浏览器的文档视图。 检查浏览器兼容性：用于检查您的 CSS 是否对于各种浏览器均兼容。 在浏览器中预览/调试：允许您在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。 可视化助理：使您可以使用各种可视化助理来设计页面。 刷新设计视图：在“代码”视图中对文档进行更改后刷新文档的“设计”视图。在执行某些操作之后，您在“代码”视图中所做的更改才会自动显示在“设计”视图中。刷新过程也会更新依赖于 DOM的代码功能，如选择代码块的开始标签或结束标签的能力。 文档标题： 允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。 文件管理：显示“文件管理”弹出菜单。 “标准”工具栏 使用“文件”面板可查看和管理 Dreamweaver 站点中的文件。 在“文件”面板中查看站点、文件或文件夹时，您可以更改查看区域的大小，