Dreamweaver教程教案.ppt

Dreamweaver入门 一 文档的创建与编辑二 插入图像对象三 使用表格布局网页四 框架和框架集五 层六 CSS格式 一 文档的创建与编辑 Dreamweaver为处理各种Web设计和开发文档提供了灵活的环境 除了HTML文档以外 还可以创建和打开各种基于文本的文档 如CFML ASP JavaScript和CSS Dreamweaver还支持源代码文件 如VisualBasic NET C 和Java Dreamweaver为创建文档提供了若干选项 可以创建以下文档 新的空白文档或模板基于Dreamweaver附带的某预定义页面布局的文档基于某现有模板的文档文档的创建包括创建空白文档和打开现有文档 文档的编辑包括文档页面属性的设置 插入换行标签 文字属性的设置 段落属性的设置 列表的使用及文档的保存等 Dreamweaver启动首页中各栏的作用 最近打开的文档列表 点击项目名或点击 打开 按钮打开已有文档 创建新文档或站点 链接到DreamweaverExchange网站 1 创建一个空白文档要创建一个空白文档 可以按照如下方法进行操作 选择 文件 新建 菜单命令 弹出新建文档界面 如下图所示 选择相应的文档类别 单击 创建 按钮 2 打开现有文档打开现有文档 可以按如下方法进行 方法一 选择 文件 打开 菜单命令 弹出 打开 对话框 如下图 在该对话框内选中要打开的文档 单击 打开 按钮即可 方法二 在Windows的 资源管理器 或者 我的电脑 中选中要打开的文档的图标 单击右键 然后从快捷菜单中选择 使用Dreamweaver编辑 选项 3 文件页面属性设置新的文档建好后 先对文档的属性进行设置 包括指定页面的默认字体和字体大小 背景颜色 边距 链接样式等 也可以修改现有页面的属性 操作 打开 修改 菜单 页面属性 项 或在文档窗口右击 从快捷菜单中选择 页面属性 选项 或点击页面空白处 在下面的 属性 面板中点击 页面属性 按钮 均可打开下图所示的对话框 页面属性分类说明 外观 设定页面默认布局选项 其中包括 1 页面字体 指定在Web页的默认字体 DW将使用指定字体 宋体 除非已为某一文本元素专门指定另一种字体 2 大小 指定在Web页的默认字体大小 DW将使用指定的字体大小 13号 中 除非已为某一文本元素专门指定了另一种字体大小 3 文本颜色 指定显示字体的默认颜色 黑色 4 背景着色 指定文档的背景颜色 5 背景图像 指定文档的背景图像 6 重复 如果背景图像没有填满整个窗口 DW8对图像的处理有四种 重复 即平铺 默认 不重复 横向重复 单行 和纵向重复 单列 链接 设定与链接有关的文本属性 其中包括 1 链接字体 指定链接文本使用的默认字体 2 大小 指定链接文本使用的默认的字体大小 3 链接颜色 指定链接文本的颜色 4 变换图像链接 指定当鼠标指向链接文本时的颜色 5 已访问链接 指定访问过的链接的颜色 6 活动链接 指定当鼠标在链接上单击时文本的颜色 7 下划线样式 指定应用于链接的下划线样式 标题 设定文档页中的标题使用的字体 字号和颜色 1 标题字体 指定Web页中标题的字体 DW默认使用页面的字体 2 标题 标题1至标题6指定最多六种标题标签使用的字体大小和颜色 4 设置文字属性文字是文档的基础和灵魂 任何一个文档都离不开文字 在DW8中 可以对文字的格式 字体 字号 颜色以及对齐格式等属性进行设置 选中 窗口 属性 菜单项 在下方显示如下图所示的 属性 面板 在其中进行相关设置 5 段落属性良好的段落格式可以使文档清晰易读 便于理解 一般来说 每在文档窗口中输入文字 然后按下回车键 即可将之定义为一个段落 有时候也可以手工将文档窗口中的文字行定义为段落 方法如下 1 将插入点放置在要定义为段落的文字行中 2 选择 文本 段落格式 段落 项 这时插入点所在的文字行就被定义为一个段落 3 如果希望取消对段落的指定 可以选择 无 项 使用属性面板同样可以定义段落 如下图所示 段落对齐方式 指定段落 6 文档的保存文档的保存有多种方法 目的不同 保存的方法也不相同 保存文档 1 选择 文件 保存 项 或按 Ctrl S 组合键 2 如果文档尚未保存过 则会出现 另存为 对话框 选择路径并输入文件名 单击 保存 按钮 即可存储文档 3 如果文档已经保存过 则会直接在原处存储文档 另存文档如果希望将文档以另外的名称保存 可以按如下方法操作 1 选择 文件 另存为 项 2 出现 另存为 对话框 选择路径并输入文件名 单击 保存 按钮 即可将文档以另外的名称保存 存储所有文档在实际创作过程中 可能同时打开多个窗口 编辑了多个DW文档 如希望保存所有文档 可按如下方法操作 1 在任意一个DW窗口中 选择 文件 保存全部 项 即可将所有打开的DW窗口中正在编辑的文档保存 2 如某些窗口中的文档尚未保存过 则会出现 另存为 对话框 提示输入路径和文件名称 输入相应信息 单击 保存 按钮 即可将之保存 二 插入图像对象在常用工具栏中 单击 图像 图标 或选择 插入 菜单 图像 命令 出现如下图所示的 选择图像源文件 对话框 当我们将图像插入DW8文档时 DW会自动在HTML源代码中生成相应代码 打开代码视图可以发现标记被添加 如下图所示 1 插入鼠标经过图像鼠标经过图像是Web页效果中的一种 即当鼠标经过一个图像时 它会显示另一幅图像 而当鼠标从图像上移走的时候 图像又恢复为原状 这种轮换图像实际上是由两幅图像组成的 即初始图像 页面首次装载时显示的图像 和替换图像 当鼠标指向时显示的图像 插入鼠标经过图像前先将图片复制到与当前网页相同的目录 再在文档中确定光标位置 点击常用工具栏中的 鼠标经过图像 图标 或选择 插入 菜单 图像对象 鼠标经过图像 命令 会出现下面的对话框 图像名称 图像名称 或不输入让DW自动生成 Image1 原始图像 鼠标经过前显示的图像的路径和名称 点击 浏览 按钮可以选择文件 鼠标经过图像 鼠标经过时显示的图像的路径和名称 预载鼠标经过图像 如希望鼠标经过图像预先载入浏览器的缓存中 以便用户将鼠标指针滑过图像时不发生延迟的快速显示 将该复选框打勾 替换文本 运行时鼠标指向图像时显示的文本 按下时 前往的URL 点击图像时要链接到的网址或文件 设置结束后单击 确定 按钮 注 鼠标经过图像中的两个图像应大小相等 否则DW自动调整第二幅图像的大小与第一幅图像匹配 2 设置图像属性图像属性检查器用于显示或修改图像的属性 在设计视图中选择一幅图像 属性检查器显示出常用的图像属性 如下图所示 文件名称 当用户首次插入一个图像时 图像属性检查器中在缩略图和文件大小旁边的文本框是空白的 用户应在这个框中为图像填入一个用于JavaScript和其他应用程序可以引用该图像的名称 宽 和 高 以像素为单位指定图像的宽度和高度 当您在页中插入图像时 Dreamweaver自动用图像的原始尺寸更新这些域 源文件 指定图像的源文件 链接 指定图像的超链接 将指向文件图标拖到文件面板中的某个文件 或单击文件夹图标浏览站点上的文档 或手动键入URL 3 调整图像大小使用Dreamweaver8调整图像大小时 有些操作会更改磁盘上的源图像文件 因此 您可能需要备份图像文件 以在需要时可以回复到原始图像 在设计视图中选定图像 图像四周会出现控制点 我们也可以单击标签选择器中的图像标签 选定该图像 如下图所示 拖动右边的手柄 调整图像的宽度 拖动底边的手柄 调整图像的高度 拖动右下角的手柄 可同时调整元素的宽度和高度 如果按住Shift键拖动右下角的手柄 可保持元素的宽高比不变 如下图所示 当你调整元素大小后 属性检查器的宽和高域中将显示图像新的宽度和高度 并且在其旁边会出现一个重设大小按钮 如果在调整大小后不满意 可单击重设大小按钮恢复图像大小 对齐方式图像与文本一样 可以向左 向右 居中对齐 除了水平的对齐外 还可以9种方式进行垂直对齐 还可以将图片转变为浮动的图像类型 允许文本围绕等 1 水平对齐当改变一行的水平对齐方式后 整个段落以及段落中的任何内置图像也会随着移动 在DW8中水平对齐图像同对齐文本的方法一样 使用属性检查器中的对齐按钮 这些按钮包括左对齐 居中对齐和右对齐 但不包括文本中的两端对齐按钮 左对齐如下左图 右对齐如下右图所示 2 垂直对齐可以把文本放置在图像旁边 在同一行对齐文本和图像 图像属性检查器对齐下拉列表中包含了很多种指定如何排列文本和图像的选项 从中选择任一选项 如下图所示 DW8会将用户的选择写入标签里的align属性中 默认值 通常指定基线对齐 在标签中不包含对齐属性 根据站点访问者的浏览器的不同 默认值也会有所不同 基线 围绕文本的基线与选定图像的底部对齐 顶端 图像顶端与当前行中最高项 图像或文本 的顶端对齐 居中 图像中部与当前行的基线对齐 底部 围绕文本的底部与选定图像的底部对齐 文本上方 图像顶端与文本行中最高字符的顶端对齐 绝对居中 图像中部与当前行中文本的中部对齐 绝对底部 图像底部与文本行底部对齐 包括字母下部 如y g 左对齐 所选图像放置在左边 文本在图像的右侧换行 右对齐 图像放置在右边 文本在对象的左侧换行 选择一种样式后 就可以看到对齐的效果了 文本上方 如下图左 绝对居中 如下图右 4 使用图像地图利用文字和图像作为超级链接的触发点 是网页上创建链接的主要方式 DW8可以使用图像地图来创建超级链接 图像地图是指已被分为多个热点的图像 当单击某个热点时 会执行相应命令 就像平时使用的地图一样 我们可以把它划分为若干个区域 每个区域对应于不同的URL DW8直接支持客户端图像地图 一旦在网页中插入了一个图像 它就能成为一个图像地图 选择一幅图像 打开属性检查器 图像地图工具如下图所示 创建图像地图使用图像属性检查器 可以以图像方式创建图像地图 创建图像地图的工具和绘图程序中的工具相似 在选择了图像之后 可以单击一个工具来描绘矩形 椭圆形或多边形 操作步骤 1 选择图像 2 在图像属性检查器的 地图 文本框中输入图像地图名称 DW8会在 地图 文本框内显示占位名称 如果在同一文档中使用多个影像地图 务必给每个地图起一个唯一的名称 3 定义影像地图区域 选择合适的绘图工具 矩形 圆形或者多边形 来绘制热点 选择多边形工具时 在选定图像上 每个角点单击一次 定义一个不规则形状的热区 单击箭头工具 结束多边形热区定义 如下图所示 4 点击某个热区 DW8会在屏幕上显示热点属性检查器 链接 文本框中会自动添加一个空链接 如下图所示 5 在 链接 文本框中键入此图像地图的URL 或者单击文件夹图标或选择指向图标选择URL文件 如需要 在目标下拉列表中选择链接目标的打开方式 6 在 替换 文本框中 可以输入提示文本在鼠标移动到这个区域时显示 使用属性检查器中的绘图工具绘制图像地图既直观又容易使用 绘制后在代码视图中会自动生成相应的HTML代码 三 使用表格布局网页 重点知识创建和管理表格属性面板对表格属性的设置表格数据的导入方法预置表格设计格式化表格布局视图在网页布局中的应用 3 1创建表格 插入表格 快速插入法 设置行数 列数 宽度 边框粗细等 查看和设置表格属性 如表格线的颜色 整个表格或某些单元格的北京图像 颜色等 增减行与列 增加一行或一列 增加多行或多列 改变行列的大小合并和拆分行列 3 2选择表格对象 选中表格的元素有以下几种可能 选中整个表格选中一行或列 按住Ctrl键 可选择不连续的行或列 选中相邻或不相邻的多个行或列 单击行或列的第一个单元格 然后按住Shift键并单击行或列的最后一个单元格 选中一个单元格选中相邻或不相邻的多个单元格 单击区域内第一个单元格 按住Shift键并单击区域内的最后一个单元格 就可以选中这两个单元格为左上和右下顶角的长方形区域内的所有单元格 3 3使用表格对页面进行布局 表格布局的操作和基本模式以下为几种常见模式 重点知识框架的定义框架集的定义创建框架集设置框架集的的属性用框架集创建页面 四 框架和框架集 4 1认识框架和框架集 行和列 框架集与表格很像 也是由列和行组成的 列和行的属性是用逗号隔开的数值列表 数值的数目表示列或行的数目 但数值本身确定了列或行的大小 设置框架大小 列宽度和行高度可以设置为以像素为单位的绝对尺寸 或者用整个屏幕的百分比来表示 HTML框架也支持一个指定与其它列或行相对大小的属性 4 2框架的基本操作 创建框架和框架集 在Dreamweaver中 执行下列操作之一就可以创建框架集 使用 文件 新建 命令创建一个新的空框架集 然后为框架添加内容 从一个现有文档开始并使用拖放方式围绕该文档拖拽框架 从一个现有文档开始并使用菜单命令或者 插入 栏 为该文档应用几种常用框架集布局之一 创建预定义框架集 DreamweaverCS3包含了用于最常用框架集配置的框架对象 在 插入 栏中的 布局 类别中可以找到框架菜单 通过该菜单能够使用框架对象 选择框架和框架集拆分框架 使用菜单拆分现有框架 使用鼠标拆分框架 删除一个框架 击框架边框并拖动它到封装框架 或父框架 的边框中即可 调整框架大小 设置框架集和框架属性 Dreamweaver中建立的框架集都具有边框 并且在浏览器中查看时这些边框都是不可见的 很多情况下需要将其边框显示出来 并且需要改变其颜色和宽度 此时 需要在框架 属性 面板中进行处理 5 1创建层 创建层有以下几种方法 插入层 把光标置于想插入层的位置 然后从菜单栏中选择 插入记录 层 命令 拖放层 将层图标从 插入 面板中拖放到 文档 窗口 在 插入 面板中的 布局 栏中单击按钮 在 文档 窗口中拖动鼠标即可绘制出一个图层 五 层 5 2层的基本操作 当处理页面布局时 可以对层进行选择 移动 大小调整和对齐等操作 这些操作都是在 AP元素 面板中完成的 选定层 如果同时选择了多层 可以进行对齐层的操作 使它们的宽度和高度相同调整层大小 可以同时调整多个层的代销以使它们具有相同的宽度和高度 调整一个层的大小同时调整多个层的大小对齐层 对齐层的边缘 将层靠齐到网格 5 3层与表格 层和表格都可以用来在页面中定位其他对象 Dreamweaver为用户提供了转换层为表格和转换表格为层的功能 同时还支持层的溢出排版 将层转换为表格 在浏览器大小有所变化或显示器的分辨率变化时 层的位置都有所变动 这些都不是预期的效果 此时就需要将层与表格进行必要的转换 将层转换为表格 表格与层的相互转换只适合于布局排版比较简单的页面 移动层 图层的移动有以下几种操作方法 如果是通过拖定控制柄来移动层 那么可以拖动最后一个选定的层 黑色突出显示 的控制柄 如果希望一次移动一个像素 可以使用方向键进行移动 按住Shift键的同时按方向键可以更快地移动层 可以在 属性 面板中直接定位到想要的位置上 在 属性 面板中的 左 和 上 连个文本框中输入自己想要的值 六 认识CSS CSS层叠样式