7 第六节 Dreamweaver基础.pptVIP

第六章 Dreamweaver基础 2010-10-12 一、Dreamweaver概述 作用：① 网页制作；② 网站管理 网页编辑器 帮助网页制作者完成HTML编写，制作所需网页的计算机软件工具 所见即所得：不需要通过浏览器而直接在制作时就能预览网页，实时了解自己的工作进度和工作成果。 优点：直观、方便、易学 缺点：对复杂情况灵活性较差、细节修改困难 非所见即所得： 优点：避免上述缺点 缺点：工作效率低 Dreamweaver是对两者的结合，提供两者工作模式，可快速方便切换 Dreamweaver网页制作特点： 可视化与代码编辑同步 多种文本展示技术：HTML标记、HTML样式、CSS样式 多种布局技术：表格、布局表格、层、框架 特殊效果的网页制作技术：行为 可利用模板快速建立网页 支持多种软件生成的文件方便插入网页；并支持Dreamweaver环境下直接打开Fireworks和Flash编辑修改相应元素 网页颜色设计：检色吸管工具 网站管理功能 利用管理器建立、复制、编辑修改网站 网站地图快速设计、更新和重组网页，管理网页间的链接关系，改变网页文件的位置和名称时自动更新链接 上传和下载网站的文件，公布更新站点内容 3、Dreamweaver的工作界面 软件：Dreamweaver 8 micromedia 公司：Dreamweaver MX 2004 Adobe公司收购后：dreamweaver CS 3、4、5 首次启动界面：设置工作区布局 ② 开始页 ③ 创建新文档 插入栏：方便在网页中插入各种对象，如表格、超链接、图像等等 文档工具栏：包含一些菜单；设计、拆分及代码视图之间的切换 文档窗口：显示当前创建和编辑的文档 状态栏：提供与正在创建的文档有关的其他信息 属性面板：用于查看和更改所选对象或文本的各种属性 控制面板组：根据需要选择其中的某一控制面板，可拖动到窗口的其他位置。 二、Dreamweaver编辑HTML代码 基本输入功能 标记、属性提示 视图选项： 代码行号 自动换行 标记无效代码 标准工具栏 编码工具栏 快速标签编辑器 在设计模式下快速编写和修改HTML标记，“Ctrl+T”组合键启动 三种状态： 插入模式的快速标签编辑器 不选定任何对象，插入一定标记 编辑标签 选中完整对象，编辑相应标签 环绕标签 设计视图：选中对象，在对象外添加成对的完整标签 代码视图：选中代码，在代码外添加成对新标签 3、优化代码 “命令”?”清理XHTML” 存储内容以便快速重复使用。 内容包括：HTML、JavaScript、CFML、ASP、JSP等代码 插入代码片断：“窗口”?代码片断?插入 创建代码片断：代码片断?新建代码片断 三、创建和管理站点 站点：是一种组织所有与web有关的文档的方法 远程站点与本地站点 建立网站的通常做法： 复制本地文件夹（本地站点） 远程文件夹（远程站点） 站点规划 文件结构规划（见第四章，网站设计） 远程站点与本地站点结构相同 定义本地站点：建立文件结构 管理远程站点： 上传站点、自动跟踪和维护链接、管理文件和更新站点 四、页面总体设置 新建页面：“文件” ?“新建” ?“基本页” ?HTML 首部信息设置——必要的描述信息 1.1 设置标题：文档工具栏 1.2 设置首部信息 插入?HTML ?文件头标签插入栏?HTML ?文件头 Meta信息 设置关键字——帮助搜索引擎寻找网页半角逗号隔开多个关键字 页面说明——帮助搜索引擎寻找网页 设置基础网页 ——网站中所有网页地址均相对于首页，称为基础网页 1.3 查看首部信息 查看?文件头内容 页面属性设置——body控制页面的背景颜色、背景图片、文字颜色、链接效果等。 修改?页面属性?外观、链接、标题、标题\编码、跟踪图像 五、页面基本编辑 “设计”视图 5.1 文本编辑 5.2 图片编辑 5.3 多媒体编辑 5.4 超链接 5.5 表格与层的应用 5.6 行为 5.7 框架 5.1 文本编辑 5.1.1 文本编辑方式 在文档窗口页面适当位置中直接输入、粘贴 从外部导入：文件?导入? Excel 、Word 5.1.2 其他文本元素输入 空格： 插入栏?文本?空格 输入法?全角模式 回车 回车：段落空行 Shift+回车：回车不空行 特殊字符： 插入栏?文本?空格 水平线 菜单“插入”?HTML ?水平线 日期 菜单“插入”?日期 （当前日期，不会动态更新） 5.1.3 设置文