第2章 Dreamweaver CS3概述.pptVIP

Dreamweaver CS3中文版应用教程 第2章 Dreamweaver CS3概述 重点内容： Dreamweaver CS3新增的实用新功能 Dreamweaver的工作流程 Dreamweaver CS3的工作界面 自定义工作界面 一、 Dreamweaver 简介 Dreamweaver是一款可视化的网页制作工具，具有所见即所得的特性，无须编写代码即可完成网页的制作，简单易用，非常适合初学者使用。同时，Dreamweaver也支持代码设计，为高级程序人员提供了代码编辑环境，方便程序人员应用HTML或其他代码进行网页开发，主要包括HTML、CSS、JavaScript、CFML、ASP和JSP等语言的代码编辑工具和参考资源。设计者可以使用Roundtrip HTML技术，无须重新格式化即可直接导入使用记事本等程序手写的HTML文档，然后在Dreamweaver中根据实际需要重新格式化代码。 二、 Dreamweaver CS3新增功能 Ajax的Spry框架 Spry构件 Spry效果 与Photoshop CS3的集成 浏览器兼容性检查 直接访问Adobe CSS Advisor CSS布局 管理CSS Adobe Device Central与Dreamweaver的集成 与Adobe Bridge CS3相协作 三、 Dreamweaver CS3的工作界面 1.工作区布局 设计器布局：可用可视化网页编辑工具来设计和制作网页，用户所添加到文档中的所有内容就是以后访问者在网页中实际看到的内容。 三、 Dreamweaver CS3的工作界面 1.工作区布局 编码器布局：在文档窗口中默认显示“代码”视图。 二、 Dreamweaver CS3的工作界面 1.工作区布局 双重屏幕：需要两台显示器，一台为主显示器，一台为辅助显示器。在双重屏幕工作区布局中，所有面板都放置在辅助显示器上，而只将文档窗口和属性检查器保留在主显示器上，这样可以使用户最大限度地利用屏幕面积。 三、 Dreamweaver CS3的工作界面 2.工作区元素 三、 Dreamweaver CS3的工作界面 3.文档窗口的使用 切换视图：选择“查看”｜“代码”命令或在文档工具栏中单击“代码”按钮，可切换到代码视图；选择“查看”｜“设计”命令或在文档工具栏中单击“设计”按钮可切换到设计视图；选择“查看”｜“代码和设计”命令或在文档工具栏中单击“拆分”，可切换到代码和设计视图。此外，还可通过按Ctrl＋`（反引号）组合键在代码视图和设计视图之间切换。如果当前是在代码和设计视图中，则按此快捷键会将活动光标从一个视图窗格切换到另一个视图窗格中。 三、 Dreamweaver CS3的工作界面 3.文档窗口的使用 调整文档窗口的大小：拖动文档窗口右下角的控制柄可任意调整文档大小；在状态栏上单击“窗口大小”按钮，从弹出的菜单中可选择一种预定义尺寸作为文档窗口的大小；选择菜单底部的“编辑大小”命令，打开“首选参数”对话框，在“窗口大小”列表框中单击相近尺寸参数行的宽度值或高度值，使其进入编辑状态，可输入一个任意大小的新值。 四、 自定义工作环境 1.选择工作区布局 切换到设计器工作区布局：选择“窗口”|“工作区布局”|“设计器”命令。 切换到编码器工作区布局：选择“窗口”|“工作区布局”|“编码器”命令。 切换到双重屏幕工作区布局：选择“窗口”|“工作区布局”|“双重屏幕”命令。 四、 自定义工作环境 2.显示/隐藏面板和工具栏 显示/隐藏面板组：单击文档窗口右侧边框中央的黑三角按钮。 折叠/展开面板组：单击面板组名称左侧的黑三角按钮。 显示/隐藏当前所有处于打开状态下的面板：选择“窗口”|“隐藏面板”命令，或按F4键。 显示/隐藏某个面板：从“窗口”菜单中选择要显示/隐藏的面板名称。 显示/隐藏工具栏：从“查看”|“工具栏”菜单中选择要显示/隐藏的工具栏名称，或者右击工具栏，从弹出的快捷菜单中选择相应的工具栏名称。 四、 自定义工作环境 3.自定义工具栏 在插入工具栏的空白位置处右击，从弹出的快捷菜单中选择“自定义收藏夹”命令，打开“自定义收藏夹对象”对话框。从“可用对象”列表框中选择需要经常使用的命令，然后单击“添加”按钮 ，将其添加到“收藏夹对象”列表框中，再单击“确定”按钮即可定制自己的工具栏。 四、 自定义工作环境 4.自由组合面板 组合面板：显示要进行组合的面板和要将该面板组合至的目标面板，然后右击要组合的面板标签，从弹出的快捷菜单中选择“将××（面板名称）组合至”子菜单中的目标面板名称，成为一个新的面板组。 将某个特定的面板独立为一个单独的浮动面板：右击要独立的面板标签，从弹出