常用工具软件实用教程电子教案 第3章 网页设计工具Dreamweaver.PPTVIP

第3章 网页设计工具Dreamweaver ■ 3.1 Macromedia Dreamweaver 4的工作环境 ■ 3.2 文档的基本操作 3.1 Macromedia Dreamweaver 4的工作环境 3.1.1 启动Dreamweaver 4 3.1.2 认识Dreamweaver 4的窗口结构 3.1.3 控制浮动面板 3.1.1 启动Dreamweaver 4 启动Dreamweaver 4有两种常用方法： （1）打开“开始”菜单，选择“程序”，选择“Macromedia Dreamweaver 4”，再选择“Dreamweaver 4”命令即可启动Dreamweaver 4。 （2）在Windows的窗口或资源管理器中直接启动Dreamweaver 4并载入要编辑的HTML文档，首先选中要编辑的HTML文件图标，单击鼠标右键，选择“Edit with Dreamweaver”命令，即可启动Dreamweaver 4，并载入要编辑的HTML文档。启动后如图3-1所示。 3.1.2 认识Dreamweaver 4的窗口结构 Dreamweaver应用程序操作环境包括： 1．工具条 2．文档窗口 3．启动栏 4．对象面板 5．属性面板 6．可停靠浮动面板 7．标题栏 8．菜单栏 9．状态行 3.1.3 控制浮动面板 1．使用启动面板 单击启动面板上的“CSS Styles”（CSS样式）按钮，即会将可停靠浮动面板上的CSS Styles选项卡激活到顶端。 2．使用对象面板 3．使用属性面板 4．浮动面板的移动和重设大小 通过拖动浮动面板的标题栏，就可以将浮动面板在桌面上移动，浮动面板的位置并不局限于Dreamweaver的文档窗口内，实际上，它可以移动到Windows桌面上的任何位置。 除了启动面板和属性面板，其他大多数的浮动面板，包括对象面板和可停靠浮动面板，其大小都可以任意调整，通过拖动浮动面板的边框，就可以改变其大小。 5．停靠浮动面板 6．状态行 在Dreamweaver 4文档窗口的状态行上一些功能设置（如图3-10~3-14所示）： §标记选择器 §窗口大小弹出菜单 §窗口大小弹出菜单 § 文档大小和下载速度 §微型启动栏 §设置状态条属性 §标尺和网格 §设置中文环境 §查找帮助信息 3.2 文档的基本操作 3.2.1 文档的创建和存储 3.2.2 理解空白文档的初始代码 3.2.3 添加文本和插入对象 3.2.4 使用历史面板 3.2.5 编辑网页的头部内容 3.2.1 文档的创建和存储 1．创建空白文档 打开“文件”菜单，选择“新建”命令。 2．打开现有文档 在Windows的资源管理器打开文档的图标，选择“用Dreamweaver编辑”命令；在Dreamweaver已经启动的情况下，打开“文件”菜单，选择“打开”命令；打开“文件”菜单，选择“导入”，再选择“导入 Word HTML”命令来打开该文档。 3．基于模板创建文档 选择需要使用的模板，单击“选择”按钮，即可基于模板创建新文档。 4．存储文档 保存文档的方法与一般Windows应用程序差别不大，这里无需多言。 5．关闭文档 打开“文件”菜单，选择“关闭”命令。 3.2.2 理解空白文档的初始代码 1．html和/html：是HTML文档的开始和结束标记，HTML文档中所有的内容都应该在这两个标记之间，一个HTML文档总是以html开始，以/html结束的。 2．head和/head：位于文档的头部，用于包含当前文档的有关信息。 3．title和/title ：位于HTML文档的头部，也即位于head和/head标记之间。 4．body和/body：用于定义HTML文档的正文部分，通常它在/head标记之后，而在/html标记之前。 3.2.3 添加文本和插入对象 1．添加文本 可以直接在文档窗口中键入文本。 2．插入对象 打开“插入”菜单，选择要插入对象的菜单项命令或显示对象面板，找到要插入对象对应的按钮。单击（拖动按钮）即可在插入点所在位置插入对象。 3．插入日期 4．插入特殊字符 5．插入水平线 插入和编辑水平线 理解水平线标记hr 6．在文档窗口中选择元素 不可见元素 定制不可见元素的显示 显示不可见元素 显示头部元素 7．设置文档的页面属性 打开“修改”菜单，选择“页面属性” 3.2.4 使