3Dreamweaver新手上路.ppt

第三课 Dreamweaver新手上路 课前导读 基础知识 重点知识 提高知识 基础知识 Dreamweaver MX 2004的工作界面。 重点知识 Dreamweaver MX 2004的工具面板及属性面板的使用。 提高知识 Dreamweaver MX 2004中创建一般页面的方法。 课堂讲解 Dreamweaver MX 2004的界面介绍 Dreamweaver MX 2004中建立一般网页的方法 Dreamweaver MX 2004的界面介绍 Dreamweaver MX 2004界面介绍 菜单概述 Dreamweaver MX 2004界面介绍 Dreamweaver MX 2004是Dreamweaver MX的升级版，较前一版本在界面和功能上都有大幅度的改进，尤其是在扩展的编辑窗口方面有了很大的改变。下面就来认识它的工作界面，如图3-1所示。 Dreamweaver MX 2004的工作界面主要由上面标注的几部分组成，下面对主要的部分进行讲解。 插入栏 文档工具栏 编辑窗口 网页标签 扩展按钮 浮动面板组 属性面板的使用 标签选择器 插入栏 “插入栏”（如图3-2所示）包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段HTML代码，允许在插入它时设置不同的属性。例如，可以在“插入”栏中单击“表格”按钮 ，插入一个表格，也可以不使用“插入”栏而直接使用“插入”菜单插入对象。 在图3-2中若选择“显示为制表符”项，则“插入栏”中的所有项目将以标签的形式显示，如图3-3所示。 若要重新以菜单方式显示，可单击图3-3右侧的 按钮，在弹出的菜单中选择“显示为菜单”命令即可，如图3-4所示。 在如图3-4所示的上侧单击相应的选项卡，下侧就会显示相应的工具按钮，图3-5～图3-9分别为“布局”、“表单”、“文本”、“HTML”和“应用程序”选项卡显示的工具栏。 文档工具栏 该栏中放置了“文档”窗口视图（如设计视图、代码视图、设计和代码混合视图）按钮、标题设置框和文档管理（如在浏览器中预览网页）等按钮，如图3-10所示。 “文档”窗口视图各按钮的含义如下。 ：单击该按钮可以切换到“代码”视图中。“代码”视图是用于编写和编辑HTML、JavaScript、服务器语言代码（如Microsoft Active Server Page （ASP）或ColdFusion 标记语言）以及任何其他类型代码的手工编码环境。 ：单击该按钮可以切换到“代码”视图和“设计”视图中。在该窗口中可同时看到同一文档的“代码”视图和“设计”视图。 ：单击该按钮可以切换到“设计”视图中。“设计”视图用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。 ：在浏览器中预览/调试。单击该按钮后，在弹出的菜单中选择“预览在iexplore”命令后即可在IE浏览器中浏览或调试当前网页。 ：单击该按钮可以刷新当前网页。 编辑窗口 该窗口中显示当前创建和编辑的文档，这是进行网页设计的主要工作窗口。 网页标签 网页标签用于显示打开的网页名称，单击网页标签可在各网页间切换，如图3-11所示。 扩展按钮 扩展按钮有水平和纵向两种，单击编辑窗口右侧的水平扩展按钮 ，可以隐藏工作主界面右侧的浮动面板组，这样可以在水平方向扩大编辑窗口；单击编辑窗口下方的纵向扩展按钮 则可隐藏属性面板，同时在垂直方向扩大编辑窗口。 浮动面板组 浮动面板组是停靠在编辑窗口右侧的浮动面板的集合。单击某个浮动面板名称左侧的 图标即可展开一个面板。展开后图标变为 形状，再单击 图标则合拢面板，只显示浮动面板的名称。将鼠标光标移到浮动面板的 图标上，当鼠标指针变为 开头时，拖动该面板即可将浮动面板移到窗口中的任何位置。 浮动面板组中的许多面板项目是非常有用的，可以通过选择“窗口”菜单中的相应项目来显示或关闭相应的面板，如要显示“文件”面板组，可通过选择[窗口]?[文件]菜单命令来实现。另外，如果想关闭某一面板组，则可单击该面板组右上角的 按钮，在弹出的菜单中选择“关闭面板组”命令即可。 属性面板的使用 属性面板用于查看和更改所选对象的各种属性。选取的对象不同，其属性面板的参数设置项目也不同。如图3-12所示为“文本”属性面板，如图3-13所示为“图像”属性面板。单击