Dreamweaver8中文版实用教程ppt课件(完整版)

1、Dreamweaver 8中文版实用教程第1章认识Dreamweaver 8 本章内容 了解Dreamweaver及其基本特点 了解Dreamweaver 8的新功能 Dreamweaver 8概述 Dreamweaver 8的新功能本章内容 2005年8月, 美国 Macromedia公司推出了Dreamweaver 8 Dreamweaver是目前主流的网页设计工具，不仅具有强大的 页面设计功能，而且具有完善的站点管理能力，使用Dreamweaver设计网页将是一个便捷、高效的工作流程 Dreamweaver 8结合了Dreamweaver 的可视化排版功能，融合了Dreamweaver

2、UltraDev的动态数据库页面开发功能和HomeSite的强大的代码编辑支持 Dreamweaver 8概述 1.1 Dreamweaver 8概述 缩放工具和辅助线 利用XML数据进行可视化创作 新的“CSS样式”面板 CSS布局的可视化 代码折叠 编码工具栏 后台文件传输 “插入Flash视频”命令 Dreamweaver 8的新功能 1.2 Dreamweaver 8的新功能 功 能：放大并检查图像，使用复杂的嵌 套表格布局缩小可预览页面的显示方式 缩放工具缩放工具功能：测量页面布局，将页面布局和页面模型加以比较，精度可达像素级别可视化反馈有助于准确地测量距离，并且支持智能靠齐 辅助线

3、辅 助 线利用XML数据进行可视化创作 功能：快速利用XML将源集成到工作中，并揭开XML到HTML转换的神秘面纱；使用简单的拖放工作流程，可将基于XML的数据（如RSS源）集成到Web页中；使用改善的XML和XSLT代码提示功能，可跳转到“代码”视图来自定义转换 。利用XML数据进行可视化创作XML文件的基本结构：03/01/2004Displaying XML Data with Macromedia DreamweaverCharles Brown04/08/2004Understanding XMLJohn Thompson 每一个父标签都包含三个子标签：、和。但每个标签也是标签的子标

4、签，后者在架构中的级别比前者高一级。只要相应地将标签嵌套在其他标签中，并为每个开始标签指定一个对应的结束标签，就可以随意命名XML标签并安排它们的结构。功能创新：全部CSS功能已合并到一个面板集合中，并已得到增强，可以更加轻松、更有效率地使用CSS样式；使用新的界面可以更方便地看到应用于具体元素的样式层叠，从而能够轻松地确定在何处定义了属性；属性网格允许进行快速编辑。新的“CSS样式”面板 新的“CSS样式”面板使用“CSS样式”面板可以跟踪影响当前所选页面元素（“正在”模式）的CSS规则和属性，或影响整个文档的规则和属性（“全部”模式）；使用“CSS样式”面板顶部的切换按钮可以在两种模式之间

5、切换；使用“CSS样式”面板还可以在“全部”和“正在”模式下修改CSS属性 “全部”模式下的“CSS样式”面板 “正在”模式下的“CSS样式”面板CSS布局的可视化应用可视化助理来描画CSS布局边框或为CSS布局加上颜色；应用可视化助理可揭示出复杂的嵌套方案，并改善所选内容 “可视化助理”菜单 代码折叠 通过隐藏和展开代码块，重点显示想要查看的代码 代码折叠 编码工具栏新的“编码”工具栏在“代码”视图一侧的沟槽栏中提供了用于常见编码功能的按钮 编码工具栏 要了解每个按钮的功能，请将鼠标指针定位于按钮上直至出现工具提示 编码工具栏默认情况下编码工具栏中将显示以下按钮：打开的文档：列出已打开的文档

6、。选择一个文档后，它将显示在“文档”窗口中。折叠整个标签：折叠位于一组开始和结束标签之间的内容。折叠所选：折叠所选代码。扩展全部：可还原所有折叠的代码。选择父标签：可选择放置了插入点的那一行的内容及其两侧的开始和结束标签。平衡大括弧：选择放置插入点的那一行的内容及其两侧的圆括号、大括弧或方括号。显示行号：可以在每个代码行的行首隐藏或显示号码。高亮显示无效代码：将以黄色高亮显示无效的代码。应用注释：可以在所选代码两侧添加注释标签或打开新的注释标签。删除注释：除所选代码的注释标签。环绕标签：在所选代码两侧添加选自“快速标签编辑器”的标签。最近的代码片断：可以从“代码片断”面板中插入最近使用过的代码

7、片断。缩进代码：将选定内容向左移动。后台文件传输 可以在获取或上传文件期间执行其他与服务器无关的活动。背景文件传输对于Dreamweaver所支持的所有传输协议都适用：FTP、 SFTP、LAN、WebDAV、Microsoft Visual SourceSafe和RDS。在文件传输期间无法执行的与服务器相关的活动包括：上传/获取/存回/取出文件。撤消取出。 创建数据库连接。绑定动态数据。 预览动态数据。 插入 Web 服务。 删除远端文件或文件夹。 在测试服务器上的浏览器中预览。将文件保存到远程服务器。 从远程服务器插入图像。 从远程服务器打开文件。 在保存时自动上传文件。 将文件拖动到远端

8、站点。 剪切、复制或粘贴远端站点上的文件。刷新“远程”视图。 “插入Flash视频”命令 轻松地在Web页中插入Flash视频内容，无需使用Flash创作工具；插入Flash视频组件后，在浏览器中查看该组件时，将显示用户选择的 Flash视频内容以及一组播放控件 插入Flash视频 第2章Dreamweaver 8基本操作 了解Dreamweaver 8的工作环境及基本特点 掌握站点的建立方法 掌握页面创建的简单方法教学目的 Dreamweaver 8的编辑环境 建立站点 创建简单的页面 预览页面 本章内容 编辑视窗 功能菜单 文档工具栏 属性设置 插入面板 辅助工具 Dreamweaver

9、8的编辑环境 2.1 Dreamweaver 8的编辑环境 编辑视窗 打开和 收缩面板单击右键 面版名称修改功能菜单 按键组合功能菜单文档工具栏 1. 文档工具栏 显示代码视图显示代码视图和设计视图显示设计视图服务器调试 文档标题没有游览器/检查错误 验证标记文件管理在浏览器中预览/调试刷新设计视图视图选项可视化助理属性设置 2. 属性设置 文本属性面板 图像属性面板 表格属性面板 布局结构视图 选择命令“查看”“表格模式”“布局模式”，切换到布局结构视图 属性设置表单属性面板 层属性面板 框架属性面板 Flash影片属性面板 插入面板 插入面板单击所要插入元素类型的图标即可插入 辅助工具 “

10、查看”“网格”“显示网格” 颜色：设置网格线的颜色间隔：设置网格线的间隔 显示：设置网格线显示方式“查看”“网格”“靠齐到网格” “查看”“网格”“网格设置” 1. 网络 辅助工具“查看”“标尺”“显示” 选择标尺的单位 改变原点位置 还原原点 2. 标尺 建立本地站点 定义本地站点属性 建立站点2.2 建立站点建立本地站点“站点”“新建站点” 定义本地站点属性“站点”“站点文件” “站点”“管理站点” 可设置：站点名称本地根文件夹 自动刷新本地文件列表 HTTP 地址 缓存 使用“新建文档”对话框 在本地站点中新建页面 创建简单的页面 2.3 创建简单的页面 使用“新建文档”对话框文件”“新

11、建” 选择创建文件类型 设置新建文档默认属性 新建页面 在本地站点中新建页面 “文件”“新建文件” 修改名称创建简单的页面 2.4 预览页面 “文件”“在浏览器中预览”“IExplore”命令“文件”“在浏览器中预览”“编辑浏览器列表” 添加浏览器 修改浏览器属性 删除浏览器第3章文本和图像 掌握插入与修改文本的方法 了解CSS样式 掌握Dreamweaver与Fireworks联合作业的方法教学目的 插入文本 设置文本属性 创建列表项 CSS样式 拼写检查 图像编排 Dreamweaver和Fireworks联合作业 文本和图像应用本章内容插入普通文本 直接在Dreamweaver文档窗口中

12、键入文本，亦 可拷贝粘贴现有的文本。插入其他文本 插入文本3.1 插入文本 插入其他文本1. 插入特殊字符其它字符插入其他文本2. 插入水平线 设置水平线的对齐方式 插入其他文本3. 插入时间选中页面中编辑插入的时间 插入其他文本4. 输入空格输入连续空格 按下Ctrl+Shift+空格键同样可以插入非间断空格 插入其他文本5. 插入换行符使用快捷键Shift+Enter也可以插入换行符 插入其他文本6. 插入Flash文本属性参数改变完成文本编辑设置文本字体 设置文本大小 设置文本颜色 设置文本段落和标题 设置文本缩进和对齐方式 设置文本样式 设置文本属性 3.2 设置文本属性 设置文本字体

13、 1. 编辑字体列表添加新列表向添加或移除字体类型设置文本文本设置文本大小 选择文本 设置文本颜色 单击属性面板上的“色盘” 系统色盘 选择其他的色盘 设置文本段落和标题 “文本”“段落格式” 设置文本缩进和对齐方式 1设置文本缩进“文本”“缩进” “文本”“凸出” 设置文本缩进和对齐方式2. 设置对齐方式光标放在段落文本中 左对齐 居中对齐 右对齐 两端对齐 设置文本样式 选择要设置样式的文本 创建简单列表项 创建多级列表项 设置项目列表符号 创建列表项 3.3 创建列表项 创建简单列表项选择要创建列表项的文本 “文本”“列表” 项目列表”、“编号列表”或“定义列表” 属性面板 创建项目符号

14、列表 创建编号列表 创建多级列表项 选择要设置为列表项的文本 单击属性面板上的按钮 增加文本缩进量，创建次级项目列表 设置项目列表符号“文本”“列表”“属性” 编号列表 CSS定义 CSS样式的分类及应用方式 使用“CSS样式”面板 新建CSS样式 设置“CSS 规则定义”对话框参数 自定义CSS样式 链接外部CSS样式 编辑CSS样式 复制CSS样式 导出CSS样式 CSS样式转化为HTML标签 CSS样式 3.4 CSS样式 CSS定义 CSS即Cascading Style Sheets（重叠样式表），是用来控制一个或多个文档显示属性的集合。CSS样式位于页面的标签中，可以定义页面中HT

15、ML标签的属性。使用CSS样式能够定义一些单独使用HTML样式不能定义的属性。除了控制文本的传统属性之外，使用CSS样式也可以控制一些特殊的属 性，例如鼠标特效。CSS样式的分类及应用方式1 CSS样式的分类 自定义CSS样式 HTML标签样式 CSS选择器样式 2 CSS样式的应用方式 局部套用 内联式 外联式 使用“CSS样式”面板 选择命令“窗口”“CSS样式”or单击属性面板中的CSS按钮or使用快捷键Shift+F11 附加样式表 新建CSS规则 编辑样式 删除CSS样式 新建CSS样式 “新建CSS规则”按钮 设置“CSS 规则定义”对话框参数 1. 定义CSS样式的类型属性2.

16、定义CSS样式的背景属性色盘设置“CSS 规则定义”对话框参数3. 定义CSS样式的区块属性4. 定义CSS样式的方框属性设置“CSS 规则定义”对话框参数5. 定义CSS样式的边框属性6. 定义CSS样式的列表属性 设置“CSS 规则定义”对话框参数7. 定义CSS样式的定位属性8. 定义CSS样式的扩展属性自定义CSS样式1. 应用自定义CSS样式选择文档中将应用CSS样式的文本 单击文本属性面板 2. 删除已应用的自定义CSS样式选择应用了自定义CSS样式的文本将文本属性面板切换到CSS模式，在“样式”下拉菜单中选择“无”链接外部CSS样式 单击“CSS样式”面板底部工具栏的“附加样式表

17、”按钮 在页面代码中生成标签 在页面代码中生成标签 Internet Explorer和NetscapeNavigator都支持链接方式，而Netscape Navigator不支持导入方式 编辑CSS样式 双击选定的CSS样式名称。单击“CSS样式”面板底部工具栏上的“编辑样式表”按钮右击要编辑的CSS样式，在弹出的快捷菜单中选择“编辑”命令。复制CSS样式 选择要复制的CSS样式 右击，在弹出的快捷菜单中选择“复制”命令 导出CSS样式 打开包含CSS样式的页面 “文件”“导出” “CSS样式” “导出样式为CSS文件” 选择保存位置保存CSS样式转化为HTML标签 只有将CSS样式转换为

18、HTML标签，才可以在这些浏览器中正确显示页面 打开含有CSS样式的页面 “文件”“转换” 拼写检查 3.5 拼写检查 默认的字典是“英国（美国）” “编辑”“首选参数” 选择拼写检查字典 “文本”“检查拼写”图像编排 3.6 图像编排 插入图像 设置图像属性 插入图像1. 插入页面图像选择命令“插入”“图像”。or单击插入面板常用分类下的图像按钮or将插入面板上的图像按钮 直接拖到文档窗口中 选择需插入的图像插入图像2. 插入背景图像“修改”“页面属性” “背景图像” 设置图像属性 1 改变图像的大小法一：选中图像用鼠标拖动法二：设置图像属性2 设置图像的对齐方式属性面板上的按钮左对齐 居中

19、对齐 右对齐 Or “文本”“对齐” 设置图像属性3 设置图像和文本的位置关系默认的图像位置关系 调整后的图像位置 设置图像属性4 设置图像的其他属性输入图像名称 图像的超链接 指定低分辨率图像 设置图像说明文字 调用Fireworks编辑图像 更改导出图像的优化设置、动画设置以及大小和区域 修剪图像的大小 调整图像的清晰度 对已调整大小的图像进行重新取样 调整图像的亮度和对比度 Dreamweaver和Fireworks联合作业 3.7 Dreamweaver和Fireworks联合作业 设置外部图像编辑器 编辑和优化页面中图像 导出Fireworks文件 插入Fireworks文件 设置外

20、部图像编辑器“编辑”“首选参数” 将Fireworks设置为默认的编辑器 编辑和优化页面中图像 1 编辑图像点击调用Fireworks 8 回到Dreamweaver文档窗口 在Fireworks中编辑图像 编辑和优化页面中图像2 优化图像“命令”“在Fireworks中优化图像” “查找源” 导出图像的优化设置 导出图像的尺寸和区域 导出图像的动画效果 完成更新导出Fireworks文件 “文件”“导出” 调节HTML文件的详细参数 插入Fireworks文件 1 插入Fireworks图像“插入”“图像” or点击2 插入Fireworks HTML“插入”“图片对象” 选择Firewor

21、ks HTML命令 插入Fireworks文件3 更新Fireworks HTML在Fireworks中导出经过编辑的Fireworks HTML文件后 “文件”“更新HTML”“定位HTML文件” 使用Fireworks更新Dreamweaver文档中的HTML和JavaScript，并导出与HTML关联的图像，并把图像存放在指定的文件夹中 文本和图像应用3.8 文本和图像应用 制作Web相册 创建翻滚图像 创建导航条 创建图像映射 改变鼠标形状 改变超链接样式 应用滤镜 导入Word文件 制作Web相册将需要的图片保存在一个文件夹中，“命令”“创建网站相册” 创建翻滚图像插入点放在页面中要

22、插入翻滚图像的位置 单击 or “插入”“图像对象”“鼠标经过图像” 指定单击图像后跳转到的文件 附加在翻滚图像上的动作 按下F12键预览页面 创建导航条 “插入”“图像对象”“导航条” 新增或删除导航条元件 指定导航条初始显示的图像 调整列表中导航条元件的顺序 导航条附加的导航条行为 调整导航条图像属性 创建图像映射 图像映射就是在一张完整的图像上划出多个热点，给每个热点定义一个超链接 “插入”“图像”or点击 选择图像，单击图像属性面板右下角的按钮 来选择图像 在图像中划出矩形热点 在图像中划出圆形热点 在图像中划出多边形热点 调整热点的大小和位置 设置打开链接页面的窗口 输入与图像热点相

23、关的文字 保存页面，按下F12键 改变鼠标形状 创建基本页面，“CSS样式”面板上右击，选择“新建”命令 打开“CSS 规则定义”对话框 从“光标”下拉菜单中选择鼠标方案 改变超链接样式 “CSS样式”面板上右击“新建”“新建CSS规则” 没有下划线的超链接 改变超链接样式为超链接创建动态效果 “CSS样式”面板上右击“新建”“新建CSS规则” 应用滤镜 1 CSS滤镜Alpha：设置透明度。其参数格式是Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)Opacity：透明程度

24、，范围为0100；FinishOpacity：渐变透明效果结束时的透明程度；Style：渐变透明的样式；StartX和StartY：设置渐变透明效果的开始位置；FinishX和FinishY：设置渐变透明效果的结束位置BlendTrans：设置淡入淡出效果。其参数格式是：BlendTrans(Duration=?)Duration表示淡入或淡出的时间应用滤镜Blur：设置3D效果。其参数格式是Blur(Add=?, Direction=?,Strength=?) Add：输入布尔值设置是否显示3D效果；Direction：设置阴影的方向，每45一个方向；Strength：设置阴影的宽度，值越大

25、阴影宽度越大。Chroma：设置透明色。其参数格式是：Chroma(Color=?)Color是要设置为透明的颜色。 DropShadow：设置文本或图像的阴影效果，应用在文本上时，效果更明显。其参数格式是DropShadow(Color=?,OffX=?,offY=?,Positive=?)。Color：设置阴影的颜色，在这里输入颜色的十六进制代码；OffX和OffY：在这里输入整数，设置X方向和Y方向上的阴影偏移量；Positive：布尔值，只有true（或非0）和false（或0）两个值。应用滤镜FlipH：将元素水平反转。FlipV：将元素垂直反转。Glow：设置发光效果，其参数格式是

26、：Glow(Color=?, Strength=?)Color：选择光的颜色。Strength：输入1255之间的整数，设置光的强度。Gray：将图像设置为黑白效果。Invert：将图像设置为底片效果。Light：设置物体的投影。Mask：设置透明遮罩，其参数格式是：Mask(Color=?)，Color表示设置底色，让对象遮住底色的部分透明。 RevealTrans：设置页面切换时的过渡效果。其参数格式是：RevealTrans(Duration=?, Transition=?)Duration：过渡时间，以秒为单位；Transition：过渡方式，设置为023。应用滤镜Shadow：设置阴

27、影效果，其参数格式是：Shadow(Color=?, Direction=?)Color：设置阴影的颜色；Direction：投影的方向。每45为一个方向，0表示垂直向上。Wave：设置波纹效果。其参数格式是：Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)Add：输入布尔值设置是否显示原对象。Freq：设置波纹个数。LightStrength：输入0100的数值，设置波纹效果的光照强度。Phase：输入0100的百分数值，设置波浪的相角。Strength：设置波纹起伏的幅度。Xray：设置X光效果。应用滤镜2 使用DropSh

28、adow滤镜（Blur滤镜类似 ）在页面中插入表格或层，并在表格或层中插入文本或图像 “CSS样式”面板上右击“新建”“新建CSS规则” 导入Word文件 3 使用Blur滤镜单击Word 2003工具栏中的按钮 插入艺术字并保存 导入Word文件Dreamweaver中，“文件”“导入”“Word文档” “导入Word文档” “清理Word生成的HTML”对话框第4章表格和表单教学目的 了解Dreamweaver 8中表格的基本特点 掌握表格与表单的基本操作 掌握使用表格与表单创建网页的方法本章内容 插入表格 单元格操作 表格操作 表格数据操作 使用表格规划页面布局 插入表单 表格和表单应用

29、插入表格4.1 插入表格 插入表格 改变表格属性 修改表格插入表格插入表格改变表格属性1表格元素2改变单元格的大小改变表格属性拖动格线改变单元格的大小3调整单元格间距 选择表格，在窗口下面出现表格属性面板，在单元格间距中输入新的数值，调整单元格之间的距离。 4设置表格的对齐方式 在页面中插入的表格，其默认位置是居左，可以通过表格属性面板更改表格的位置。首先选取表格，在窗口下方出现表格属性面板，在对齐选项列表内选择“左对齐”、“居中对齐”、“右对齐”即可。 改变表格属性5使用表格属性面板改变表格属性选择表格表格属性面板修改表格1增加行和列 调整行数和列数 选取表格，在表格属性面板中重新设置行数和

30、列数。如果重新输入的数值大于原来的数值，则增加行或列；如果重新输入的数值小于原来的数值，则删除行或列。 增加行数减少行数修改表格 使用命令插入一行修改表格插入数行 使用命令修改表格光标移到最后一行或最后一个单元格上，按下Tab键2删除行和列修改表格要删除整行或整列，选择整个行或列后，按下Delete键即可。 删除行或列前必须选定整个行或列，如果没有选定整个行或列，则只能删除单元格中的数据，而删除不了行或列。 单元格操作4.2 单元格操作 选择单元格 合并和拆分单元格 使用单元格属性面板选择单元格1选择一个单元格单击一个单元格选中2选择多个单元格选择单元格按住Ctrl键同时选择多个不连续的单元格

31、用Shift键选择多个连续的单元格选择单元格3选择整行（列）选择单元格4选择多行（列）按住Ctrl键同时选择多个不连续的行用Shift键选择多个连续的行合并和拆分单元格1合并单元格合并和拆分单元格2拆分单元格合并和拆分单元格3使用单元格属性面板合并所选单元格拆分所选单元格为行或列表格操作4.3 表格操作 在表格中插入内容 设置表格 设置单元格 清除多余列宽和行高在表格中插入内容设置表格1设置表格背景图像拖住指向本地文件设置表格2设置表格背景色设置表格3设置表格外框颜色设置单元格1设置单元格的背景图像拖住指向本地文件设置单元格2设置单元格的背景色设置单元格3设置单元格边框颜色清除多余列宽和行高1

32、清除多余列宽选择目标单元格清除多余列宽和行高2清除多余行高选择目标单元格表格数据操作4.4 表格数据操作 表格数据排序 导入（导出）数据 套用表格样式表格数据排序“命令” “排序表格” 导入（导出）数据1导入数据打开Excel 数据表导入（导出）数据“文件” “导入” “表格式数据” 2导出数据导入（导出）数据“文件” “导出” “表格” 套用表格样式1直接套用表格样式“命令” “格式化表格” 套用表格样式2修改并套用表格格式“命令” “格式化表格” 修改表格格式使用表格规划页面布局4.5 使用表格规划页面布局 打开版面设计视图 规划页面布局打开版面设计视图“查看”“表格模式”“布局模式”命令

33、 单击插入面板布局下的布局模式按钮进入版面设计视图 规划页面布局1通过单元格规划页面布局调整单元格大小规划页面布局2通过表格规划页面布局规划页面布局规划页面布局插入表单4.6 插入表单 表单对象 插入表单域 插入文本域 插入文件域 插入单选按钮和复选框 插入按钮插入表单 插入列表和下拉菜单 插入其他表单对象表单对象插入表单域1在页面中插入表单域插入表单域2表单域属性设置单击表单域外区域单击标签栏中的标签 插入文本域1在页面中插入文本域插入文本域2设置文本域属性插入文本域，打开文本域属性面板 单行文本域属性面板 多行文本域属性面板 插入文件域1在页面中插入文件域插入文件域2设置文件域属性选择插入

34、页面的文件域，打开文件域属性面板 插入单选按钮和复选框单选按钮只能是惟一的选择，而复选框一次可以选择多项 。1插入单个单选按钮插入单选按钮和复选框在单选按钮后输入标签2插入一组单选按钮插入单选按钮和复选框调整单选按钮顺序3插入复选框插入单选按钮和复选框插入复选框4设置单选按钮和复选框属性插入单选按钮和复选框选择插入页面中的单选按钮和复选框，打开对应的属性面板 单选属性面板 复选框属性面板 插入按钮 在Web页面中经常可以看到按钮，使用按钮可以提交数据、重新设置表单域，或者触发动作。 1在页面中插入按钮插入按钮插入按钮2设置按钮属性插入按钮，打开按钮属性面板 1在页面中插入列表或下拉菜单插入列表

35、和下拉菜单插入列表或下拉菜单2设置列表或下拉菜单属性插入列表和下拉菜单插入其他表单对象表格和表单应用4.7 表格和表单应用 表格应用实例 制作交互式表单表格应用实例1创建表格将光标置于文档中要插入表格的地方，选择命令“插入”“表格” 表格应用实例合并单元格作为标题行 录入数据 表格应用实例2使用CSS样式修饰表格右击“CSS样式”面板，选择“新建”命令表格应用实例表格应用实例3套用表格格式选择表格，然后选择命令“命令”“格式化表格” 表格应用实例4对表格数据进行排序选择“命令” “排序表格” 制作交互式表单将光标放在页面中要插入表单的地方，插入一个表单标签 单击插入面板上的表格按钮，在表单中插

36、入表格，在这些单元格内插入表单元素制作交互式表单设置文本框属性设置密码框属性制作交互式表单制作交互式表单制作交互式表单第5章超链接和框架 了解超链接与框架的基本特点 掌握超链接的创建与管理方法 掌握框架的基本操作 掌握使用框架创建网页的方法 创建超链接概述 在页面中创建超链接 超链接管理 认识框架 创建框架 框架的基本操作本章内容 框架和框架集的使用 使用链接控制框架内容 为不能显示框架的浏览器定义内容本章内容 超链接的基础 超链接的路径 超链接概述5.1 超链接概述 超链接的基础 超链接是通过寻址方式找到目的地址的； 将超链接开始位置的端点称作源端点，将目标位置的端点称作目标端点，而超链接就

37、是实现从源端点到目标端点的跳转。 源目标使用文本的超链接称为超文本链接 超链接的路径绝对路径在链接中使用了完整的URL地址，例如绝对路径包含了页面的完整路径，不用考虑页面的位置。可以在任何一个页面、任何一个站点上设置该路径，其最终结果都指向这个地址。 相对路径在本地站点中使用相对路径是很好的选择，如果要链接的源端点和目标端点在同一个目录之下，只需要在链接的路径中输入目标端点文件名称即可。如果要链接的源端点和目标端点不在同一个目录之下，使用相对路径时，只需将目录的相对关系表达出来即可。 基于根目录的路径 基于根目录的路径是从当前站点的根目录开始，与链接源端点的位置无关。这比相对路径麻烦，但是比绝

38、对路径方便。在经常移动的文档中建立链接，基于根目录的路径是最佳选择。 创建文件链接 创建锚链接 创建邮件链接 创建图像超链接 创建图像映射超链接 创建其他的链接 在页面中创建超链接5.2 在页面中创建超链接 创建文件链接 1 创建链接选择要作为链接的文字或图像 属性面板上的链接域中输入目标端的URLor单击文本框后面的文件夹图标，打开“选择文件”对话框 选择链接路径形式 单击属性面板上的“目标”，选择显示该链接的窗口 创建文件链接2 使用属性面板上的指向文件图标利用指向文件图标 源端点和目标端点文件都在同一个编辑窗口中 目标端文件不在编辑窗口内，而是在本地站点文件夹内，则先打开站点面板，然后将

39、指针拖向该文件 创建文件链接“查看”“可视化助理” “不可见元素”,在其前打勾 若目标端点是一个命名锚点，则将指针拖向该命名锚点将指针拖到目标端点后，松开鼠标，可以看到在属性面板上链接文本框内显示目标端点文件的URL，表示链接成功创建文件链接3 利用站点地图创建超链接“站点”“管理站点” “定义站点为本地站点 ”对话框中，定义该页为站点主页 文件面板“本地视图” “地图视图” 单击站点面板上的展开折叠按钮 单击并拖动 ，指向右侧站点内的目标文件 创建锚链接 1 创建命名锚光标置于页面中要创建命名锚的位置“插入”“命名锚记” or单击插入面板 更改命名锚的名称 创建锚链接2 链接命名锚选择要链接

40、到锚的文字或图像 在属性面板上的链接文本框中输入要链接锚的名称及前缀 如要链接的锚在当前页面中，则在锚名称前加上“#”符号 如要链接的锚位于别的页面中，则先要输入那个页面的URL，然后再输入“#”和锚名 创建邮件链接 1 创建文本的邮件超链接选定要创建邮件超链接的文字单击插入面板常用分类下的电子邮件链接按钮输入邮件地址创建邮件链接2 创建图像的邮件超链接选择该图像，在编辑视窗下面出现图像属性面板 属性面板链接文本框中输入“mailto：电子邮件地址” 创建图像超链接 选定要创建超链接的图像，出现图像属性面板 链接文本框中输入要链接文件的URLor单击文本框后面的浏览文件按钮 选择文件对话框中选

41、择要链接的文件 创建图像映射超链接 选择要创建图像映射的图像，出现图像属性面板，单击该面板右下角的小三角形 在图像上拖曳出热点 在出现的属性面板中定义该热点映射的URL地址 “目标” 中选择链接文件的显示方式“替换” 中输入链接时的提示性文字 创建其他的链接 1 创建脚本链接在页面中选定要设置链接的文本 保存页面 输入JavaScript函数或代码 创建其他的链接2 创建空链接在页面中选定要设置链接的文本或图像 测试链接 自动管理链接功能 打开链接页面 重新设置链接和删除链接 使用网站地图管理文件和链接 在页面中创建超链接5.3 超链接管理 测试链接 在浏览器中打开该页面，如果出现连接错误则出

42、现“该页无法显示”的提示 实现Dreamweaver 8链接检测功能的步骤 “文件”“检查页” “检查链接” 保存测试报告 自动管理链接功能 “编辑”“首选参数” 提示：当文件被重新命名或位置发生移动时，系统会提示你是否要更新链接。从不：当文件被重新命名或位置发生移动时，不更新链接。总是：当文件被重新命名或位置发生移动时，系统会自动更新链接 打开链接页面 在页面编辑视窗下选择当前页面中的链接文字或图像;选取命令“修改”“打开链接页面”，或者单击右键选择“打开链接页面”命令，如果能正确打开要链接的页面，则链接是正确的，否则，页面链接有错误，要及时采取措施对错误的链接进行更新或删除重新设置链接和删

43、除链接 1 重新设置链接选取要链接的文本或图像。选取命令“修改”“更改链接”，打开“选择文件”对话框，在其中选择要链接的文件，选择合适的文件后单击“确定”按钮即可 选取要删除链接的文本或图像;选取命令“修改”“移除链接”即可删除链接。 2 删除链接使用网站地图管理文件和链接 1 查看站点文件列表打开文件面板“文件” 单击展开/折叠按钮 选择文件图标后单击右键，在弹出的快捷菜单中选择相应的命令 站点面板的工具栏 扩展/折叠同步存回文件取出文件上传文件获取文件“站点地图”视图“站点文件”视图“测试服务器”视图刷新链接/断开当前的弹出式菜单使用网站地图管理文件和链接 在默认的情况下，如果远程站点空闲

44、时间超过30分钟，则Dreamweaver会自动断开和远程站点的连接。如要改变这个时间限制，选取命令“编辑”“首选参数” “首选参数”对话框分类中选择“站点”选项 要自动更新文件列表，选择“站点”“管理站点” 设置存回/取出选项 使用网站地图管理文件和链接2 利用网站地图查看站点中的文件“站点”“管理站点” “管理站点”对话框 输入首页文件的路径 “视图” “地图视图” 点击 调整地图显示比例 使用网站地图管理文件和链接3 使用站点地图管理超链接 在网站地图中删除链接 在网站地图中改变链接 在站点地图中更改文件名称，单击 认识框架 5.4 认识框架 框架能将不同的内容显示在同一个浏览器窗口中,

45、利用这一技术将页面分成不同的区域，分别在这些区域中显示不同的内容 框架集的主要作用是决定文档窗口中显示的文档数目、各个文档的大小、文档以何种方式载入框架集。 没有框架的框架集 添加了框架的框架集 插入预设的框架集 设计和插入框架集 创建框架 5.5 创建框架 插入预设的框架集“查看”“可视化助理” “框架边框” 直接点击选择也可选取命令“插入”“HTML”“框架”，在弹出的子菜单中选择适当的框架结构 设计和插入框架集 “修改”“框架页” “拆分左框架”、“拆分右框架”、“拆分上框架”或“拆分下框架” 也可在页面中拖动一个框架边框来垂直或水平切割页面，从框架的一个角部拖动边框可以将文档分割成四个

46、框架 选定框架和框架集 在框架中打开文档 保存框架和框架集 框架的基本操作 5.6 框架的基本操作 选定框架和框架集1 利用框架面板选定框架和框架集“窗口”“框架” 在框架面板中选定框架和框架集 单击选定框架和框架集2 在文档视窗中选定框架和框架集 如要选定一个框架，则需在按住Alt键的同时单击框架内的任意位置； 如要选定整个框架集，只要单击任何一个框架边框即可。 在文档窗口中选定框架和框架集 选定框架和框架集3 移动选项要移动选项到邻近的框架，按住Alt键的同时按下向左箭头或向左箭头；要移动选项到父框架集，按住Alt键的同时按下向上箭头；要移动选项到子框架，按住Alt键的同时按下向下箭头。

47、在框架中打开文档 将光标置于要插入文档的框架内 “文件”“在框架中” “选择HTML文件”对话框 选择要插入的文档，然后单击“确定”按钮 保存框架和框架集 1 保存框架打开“另存为”对话框准备以临时文件名来保存 2 保存框架集要保存框架集文件，选择“文件”“保存框架页”；要将框架集保存为一个新的文件，选择“文件”“框架集另存为”；要保存框架内文档，则单击框架，然后选择命令“文件”“保存框架” 或选 取命令“文件”“框架另存为”；要保存框架集内所有的文件，则选择命令“文件”“保存全部” 。 查看框架属性 设置框架属性 查看框架集属性 设置框架集属性 设置框架集标题 设定框架大小 设置框架和框架集

48、边框 改变框架的背景色 框架和框架集的属性设置 5.7 框架和框架集的属性设置 查看框架属性选取命令“窗口”“框架”，打开框架面板；按住Alt键的同时单击选择框架，或者在框架面板上选择框架，选择框架后在框架属性面板上查看框架的属性。 设置框架属性 输入框架的名称 确定框架的源文档 确定当框架内的内容显示不下的时候是否出现滚动条 用来控制当前框架边框，选项有“是”、“否”和“默认” 查看框架集属性 “窗口”“框架” 在文档视窗中单击两个框架之间的边框，或者在框架面板上选择框架集，选择框架集后在框架集属性面板上查看框架集的属性 设置框架集属性 1 选择框架集。在下列选项中对框架集进行相应的设置：边

49、框：在该下拉菜单中选择在浏览器中查看时是否显示框架边框。如果要显示，选择“是”。如果不想显示，选择“否”。如果需要用户的浏览器来确定是否显示边框，选择“默认”。边框宽度：输入一个数字来指定当前框架集的边框宽度。边框颜色：输入一个颜色的十六进制值或者使用颜色选择器为边框选择颜色。行列选定范围：设置框架大小，单击框内的标签，选取行或列，然后在“值”文本框中输入一个数字来设置所选行或列的尺寸。在“单位”下拉菜单中，设置值文本框内数字的尺寸单位，供选择的单位有像素、百分比和相对，默认的单位是像素。设置框架集标题 选取框架集“修改”“页面属性” 设定框架大小 单击框架边框来选取框架集。如果边框未显示就选

50、择命令“查看”“可视化助理” “框架边框”。在行列选定范围框内，单击要修改的行或列。要指定在浏览器窗口调整尺寸时分配给框架的空间，在“值”文本框中输入一个数字 像素：以绝对值的方式设置被选中的行或列的大小；百分比：指定当前框架占它的框架集的百分比；相对：指定当前框架配合其他框架按比例分配空间。 拖动框架边框改变框架大小 设置框架和框架集边框 1 设置框架边框 按住Alt键单击框架，或者在框架面板上单击框架；在框架属性面板上设置下列选项边框：控制当前框架的边框 边框颜色：设置所有与当前框架相邻框架的边框颜色2 设置框架集边框通过在文档视窗中单击框架边框或者在框架面板上单击框架边框选取框架集；在属

51、性面板上设置下列选项边框：控制当前框架集内的框架边框。 背景颜色：设置当前框架集内所有边框的颜色。 边框宽度：指定当前框架集的边框宽度。 改变框架的背景色 将光标放在框架内并选择命令“修改”“页面属性” 使用鼠标右击框架内，在弹出的快捷菜单中选择“页面属性” 使用链接控制框架内容 5.8 使用链接控制框架内容 要想在框架内使用链接，必须为链接设置一个目标。这个目标是指框架内链接要打开的内容。 选取文本或对象输入链接文件的名字or单击文件夹图标查找选取链接文件or单击并拖拽指向文件图标来选取链接文件 选择一个链接文档显示的场所_blank：在新的窗口中打开链接文档，保留当前窗口_parent：在

52、链接的父框架内显示链接文档_self：在当前框架打开链接文档，替换当前框架中的内容_top：在当前文档的最外边的框架集内打开链接文档，替换所有框架 为不能显示框架的浏览器定义内容 “修改”“框架页” “编辑无框架内容” 5.9 为不能显示框架的浏览器定义内容 在文档视窗输入要插入的内容“修改”“框架页”，在弹出的子菜单中选择命令编辑无框架内容 在NOFRAMES标签内输入HTML代码 第5章超链接和框架 第6章插入媒体 了解媒体的基本特点 掌握在网页中插入Flash等媒体的方法 掌握媒体控制的技巧教学目的 媒体概述 插入Flash对象 插入其他媒体对象 使用行为控制媒体 本章内容媒体概述6.1

53、 媒体概述 利用Dreamweaver 8的相关功能可以快速而方便地向Web页面中加入各种媒体对象，并且可以使用外置的编辑器编辑这些媒体对象，例如，Flash影片、Shockwave影片、Java小程序、QuickTime、MP3音乐文件等 插入Flash影片 插入Flash按钮插入Flash文本 使用Flash 8编辑Flash影片 插入Flash对象 6.2 插入Flash对象 插入Flash影片1 在页面中插入Flash影片“插入”“媒体”“Flash”or单击插入面板媒体分类或常用面板分类上的Flash按钮 or将Flash图标 拖到页面中的插入点 单击Flash属性面板上的 插入Fl

54、ash影片2 设置Flash影片属性单击选择插入页面中的Flash影片 指定影片的名称 指定影片文件的路径 调出Flash 8来编辑Flash影片 设定Flash影片和四周的距离大小 选择Flash影片的播放质量 插入Flash按钮1 在页面中插入Flash按钮“插入”“媒体”“Flash按钮”or单击插入面板媒体分类上的Flash按钮 or将Flash按钮 图标拖到页面中的插入点 输入要显示的文本 指定按钮链接的文件 指定打开Flash按钮所链接文件的窗口 输入Flash按钮的文件名称，将其保存为.swf文件 打开Macromedia Exchange站点并下载更多的按钮样式 插入Flash

55、按钮2 设置Flash按钮属性单击插入页面中的Flash按钮，出现Flash按钮属性面板 将选定的Flash按钮恢复到原来的大小 打开“插入Flash按钮”对话框 指定Flash按钮的名称 插入Flash文本 “插入”“媒体”“Flash文本”or单击插入面板媒体分类下的Flash文本按钮 使用Flash 8编辑Flash影片 1 将Flash 8设置为外部编辑器“编辑”“首选参数” .fla是Flash对象源文件格式 选择Flash 8程序 将选定的工具设置为首要编辑器 使用Flash 8编辑Flash影片2 编辑Flash影片“窗口”“属性” 单击属性面板上的“编辑”按钮or右击选定的对象

56、，在弹出的快捷菜单中选择“用Flash编辑”命令or按住Ctrl键，并双击要编辑的对象修改后的结果保存在Flash源文件中，导出.swf文件 插入Shockwave影片 插入ActiveX控件 插入Java小程序 插入插件 插入其他媒体对象 6.3 插入其他媒体对象 插入Shockwave影片 Shockwave也是网络上比较流行的压缩多媒体格式，这种格式的影片是用Macromedia Director创建的 1 在页面中插入Shockwave影片“插入”“媒体”“Shockwave”or单击插入面板媒体分类的 Shockwave图标按钮 “选择文件”对话框中选取影片文件 插入Shockwav

57、e影片2 设置Shockwave影片属性打开Shockwave影片属性面板 在文档窗口中播放Shockwave影片 在文档窗口中播放Shockwave影片 1 在页面中插入ActiveX控件选择“插入”“媒体”“ActiveX”命令or单击插入面板媒体分类上的ActiveX按钮or拖动ActiveX图标 到文档窗口中or插入后，在文档窗口中出现ActiveX控件图标 2 设置ActiveX控件属性设置ActiveX控件的浏览器标识 选择该复选框 指定包含有ActiveX控件的基址 输入ActiveX控件的编号参数 如果用户的浏览器不支持标签，则显示该图像 插入Java小程序 1 在页面中插入J

58、ava小程序 单击插入面板媒体分类上的Applet按钮 “选择文件”对话框中选择一个包含Java小程序的文件 页面中出现Java程序占位符 插入Java小程序2 设置Java小程序属性Applet属性面板 指定包含Java小程序代码的文件 指定包含选定Java小程序的URL 插入插件 1 在页面中插入Navigator插件单击插入面板媒体分类上的插件按钮 “选择文件”对话框中选取Navigator 插件文件 2 设置Navigator插件属性在该域中输入可以下载插件的URL 指定插件数据文件的来源 使用行为控制媒体6.4 使用行为控制媒体 使用行为可以控制页面中媒体元素的属性，例如，使用Dre

59、amweaver内置的控制 Shockwave或Flash行为控制影片的播放、停止、返回、跳转到某一帧等动作。 Dreamweaver中能够控制媒体的行为还有： 播放声音：控制页面中声音媒体的播放。 检查插件：检查用户是否安装了播放媒体所需的插件 第7章层和时间轴 了解层的基本特点 掌握层的插入与设置方法 了解时间轴的基本特点 掌握层与时间轴的应用技巧本章内容 插入层 设置层的属性 创建嵌套层 在层中插入内容 对齐层 层和表格的转换 应用时间轴 层和时间轴的应用 插入层7.1 插入层设置层的属性7.2 设置层的属性 选择层 使用层属性面板 改变层的大小 改变层的位置选择层1选择单个层在文档窗口

60、中选择单个层在层面板中选择单个层选择层2选择多个层在文档窗口中选择多个层在层面板中选择多个层使用层属性面板改变层的大小选择层后直接拖动控制柄 在层属性面板中精确设置层的大小 改变层的位置单击层边缘选择层，拖动层左上角突出的部分选择层后，每按一次方向键，层在相应的方向上移动一个像素 创建嵌套层7.3 创建嵌套层在页面中插入一个父级层 将插入点置于父级层内，在父级层内插入新的层 在层中插入内容7.4 在层中插入内容将插入点放置在层内 在层内插入图像，或者输入文本，也可以直接粘贴现成的文本 对齐层7.5 对齐层 使用对齐命令 显示标尺 显示网格使用对齐命令按住Shift键，选择页面中的层 选择命令“