Dreamweaver教程课件.ppt

网页设计与制作教程 中国水利水电出版社 《网页设计与制作》教材 配套电子教案 2007.6 * * 2.1 Dreamweaver 8.0界面介绍 2.2 Dreamweaver 8.0常用工具 2.3 Dreamweaver8.0的功能简介 2.4 使用Dreamweaver 8.0处理图片 2.5 在Dreamweaver 8.0中规划站点 2.6 本地站点的搭建与管理 2.7 实践技能训练 第二章 Dreamweaver 8.0入门 2.1.1 Dreamweaver 8.0界面介绍 在首次启动Dreamweaver8时会出现如图2-1的一个界面,这是一个“工作区设置”对话框，在对话框左侧是Dreamweaver8的设计视图，右侧是Dreamweave 8的代码视图。Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局。 2.1 Dreamweaver 8.0界面介绍 2.1.1 Dreamweaver 8.0界面介绍 Dreamweaver 8.0标准工作界面大致可以分为以下几个区域: ⒈标题栏: ⒉菜单栏： ⒊文档工具栏： ⒋ “插入”栏： ⒌文档窗口： ⒍属性栏： ⒎状态栏： ⒏浮动面板组： 2.1 Dreamweaver 8.0界面介绍 2. 2.1菜单栏工具 文件：用来管理文件。插入：用来插入各种元素. 修改：具有对页面元素修改的功能。 文本：用来对文本操作。命令：所有的附加命令项 站点：用来创建和管理站点 窗口：用来显示和隐藏控制面板以及切换文档窗口 帮助：联机帮助功能。 2.2 Dreamweaver 8.0常用工具 2.2.2文档工具栏 “文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。界面如图2-4所示。 2.2 Dreamweaver 8.0常用工具 2.2.3 “插入”栏 插入面板集成了所有可以在网页应用的对象包括“插入”菜单中的选项。有常用、布局、表单、文本、HTML、应用程序、Flash元素和收藏夹共8个二级菜单共167个按钮。插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以很容易的加入图像、声音、多媒体动画、表格。图层、框架、表单、Flash和ActiveX等网页元素。面板的界面如图2-5所示。 2.2 Dreamweaver 8.0常用工具 2.2.4文档窗口 　  　“文档”窗口显示当前文档。可以选择下列任一视图：“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver 8.0显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。“代码”视图是一个用于编写和编辑 HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。“代码和设计”视图使您可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。 2.2 Dreamweaver 8.0常用工具 2.2.5属性栏 属性面板并不是将所有的属性加载在面板上，而是根据我们选择的对象来动态显示对象的属性属性面板的状态完全是随当前在文档中选择的对象来确定的。例如，当前选择了一幅图像，那么属性面板上就出现该图像的相关属性；如果选择了表格，那么属性面板会相应的变化成表格的相关属性。属性面板的界面如图2-8所示。 2.2 Dreamweaver 8.0常用工具 2.2.6状态栏 “文档窗口”的底部的状态栏提供了与你正在创建的文档的有关其他信息。“文档”窗口底部的状态栏提供与你正创建的文档有关的其它信息。标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击 可以选择文档的整个正文。 2.2 Dreamweaver 8.0常用工具 1.将世界一流水平的“设计”和“代码”编辑器合二为一，在设计窗口中精简源代码，是用户能够按照工作的需要指定自己的用户界面。 2.跨浏览器有效检查当保存时，自动地检查当前文档跨浏览器的有效性（兼容性），可以指定测试浏览器，同时自动检测以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检测功能可以自动核对tags或CSS规则是否适应目前的主浏览器。 3.使用内置的图形编辑程序让开发更加节省时间。图像的剪切、缩放等一系列的辅助性的图象编辑功能可以使用内嵌的Macromedia Fireworks