网页设计与制作（第二版）第3章 Dreamweaver基本操作.ppt

第3章 Dreamweaver基本操作 本章内容提要： 中文Dreamweaver是比较流行的网页制作工具，本章主要介绍中文Dreamweaver8工作环境、站点的创建与管理、并制作一个简单的网页。本章主要内容如下： 中文Dreamweaver8工作环境 站点创建与管理 制作一个简单的网页 本章目标任务： 在掌握站点创建与管理基础上完成最简单的网页制作。 3.1 中文Dreamweaver8工作环境 中文Dreamweaver8提供可视化的网页开发环境,具有所见即所得的功能。它的工作窗口简洁明了，功能面板及工具栏中几乎集中了所有的重要功能，属性面板放在窗口底部外，其他面板多放在窗口的右边，可随时打开与关闭，并能折叠和展开，这样就克服了以往版本浮动面板位置较乱，有时会影响网页编辑的不足。 中文Dreamweaver8工作环境即中文Dreamweaver8应用程序窗口，该应用程序窗口由标题栏、菜单栏、文档工具栏、文档编辑窗口、浮动面板等组成，文档编辑窗口由文档标题栏、页面编辑区、状态栏等组成，浮动面板包括插入面板、属性面板、面板组等。中文Dreamweaver8工作环境图3-1所示： 3.1 中文Dreamweaver8工作环境 3.1 中文Dreamweaver8工作环境 1. 标题栏 标题栏上显示当前网页的页面标题及打开的文件名。若是对一个新网页进行编辑，则在对此网页命名之前自动将此文件命名为“Untitled-x”(x是按顺序产生的数字)。 2. 菜单栏 和其他应用软件基本相同，菜单栏中的每一项都有一个下拉式菜单，Dreamweaver中大部分操作都可以通过菜单项的下拉菜单来实现。 3.1 中文Dreamweaver8工作环境 3. 文档工具栏 文档工具栏包含可在代码视图、设计视图之间快速切换的按钮，并包含一些与选定视图有关的常用命令。选择【查看】→【工具栏】菜单命令，可以在窗口中显示或隐藏文档工具栏。 “代码”按钮：在文档中显示代码视图。在代码视图中，可以直接查看和编辑HTML源代码。 拆分”按钮：同时显示代码视图与设计视图。在代码视图显示在上方，设计视图显示在下方。要改变视图的上下顺序，可单击“视图选项”按钮，选择“在顶部查看设计视图”选项。 “设计”按钮：在文档中显示设计视图。设计视图是中文Dreamweaver8编辑过程中的默认方式，可以达到所见即所得的效果。 “标题”文本框：显示或编辑当前网页的标题。 “在浏览器中预览/调试”按钮：在浏览器中预览网页效果或检查错误。 “文件管理”按钮：查看文件的上传、下载的状态。 “刷新设计视图”按钮：刷新设计视图。 “视图选项”按钮：为不同的视图设置选项。 3.1 中文Dreamweaver8工作环境 4. 文档窗口 文档窗口包括文档标题栏、页面编辑区、状态栏 文档标题栏 可显示建立或打开的多个网页文档标题，单击标题标签可切换到相应网页的编辑状态。 页面编辑区 用于设置和编辑页面内的文本、图形和表格等。 状态栏 用于选择标记、设置窗口大小及调整文件的下载速度。 3.1 中文Dreamweaver8工作环境 5. 面板 中文Dreamweaver8提供了多种多样的、具备不同功能的面板，大量操作可通过面板方便地完成。 面板包括：属性面板、插入面板、站点文件管理器、资源面板、行为面板、CSS样式面板、代码检查器、框架面板、历史记录面板、层面板、库面板、参考面板、模板面板、时间轴面板等。 所有面板都可以由“窗口”菜单控制显示或隐藏。下面介绍一些常用面板。面板的具体操作方法，将在后面使用相应面板的实例中再进行介绍。 3.1 中文Dreamweaver8工作环境 插入面板 插入面板，也可称作插入工具栏。选择【窗口】→【插入】菜单命令或按快捷键【Ctrl】+【F2】可显示或隐藏插入面板。选择【查看】→【工具栏】菜单命令，可以在窗口中显示或隐藏插入工具栏。  插入面板是中文Dreamweaver8中最重要的面板之一，所包含的内容均为网页设计最常用的工具按钮。将鼠标放在某个工具按钮上，可显示该工具按钮的名称。插入面板集成了“插入”菜单中的选项，主要包括常用、布局、表单、文本、HTML、应用程序、FLASH元素等。有菜单和制表符两种显示方式。 在菜单显示方式中（如图3-1中的插入面板） ，可以通过下拉按钮选择不同工具类型，如常用、布局、表单、文本等，默认是常用工具类型，单击“常用”右边的下拉按钮，选择“显示为制表符”即可切换到制表符显示方式（如图3-2所示 ）。在制表符显示方式中直接按相应的类型标签，即可显示相应工具类型。单击制表符显示方式的插入面板右边的下拉按钮，在弹出的菜单中选择“显示为菜单”即可切换到菜单显示方式。 3.1 中文Dreamweaver8工作