网页设计创建和编辑网.ppt

《网页设计创建和编辑网.ppt》由会员分享，可在线阅读，更多相关《网页设计创建和编辑网.ppt（31页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、江西师范大学网页设计课程组网页设计江西师范大学网页设计课程组3.13.1 创建一个新文档创建一个新文档3.23.2 文字处理文字处理3.3 3.3 图像处理图像处理3.4 3.4 超级链接超级链接3.5 3.5 使用多媒体对象使用多媒体对象第3 章 创建和编辑网页文档 江西师范大学网页设计课程组3.1.1 3.1.1 创建新的空白文档 创建新的空白文档 在 在Dreamweaver 8.0 Dreamweaver 8.0 中可以创建新的空白文档、创建以 中可以创建新的空白文档、创建以模板为基础的文档以及打开并编辑已经存在的文档。模板为基础的文档以及打开并编辑已经存在的文档。三种方法：三种方法：

2、1 1、从启动界面中的 从启动界面中的“创建新项目 创建新项目”组合框中选择合 组合框中选择合适的文件类型，即可直接进入文档窗口进行编辑。适的文件类型，即可直接进入文档窗口进行编辑。2 2、也可选择主菜单中的、也可选择主菜单中的“文件 文件”“新建 新建”命令，系 命令，系统弹出新建文档对话框。统弹出新建文档对话框。3 3、按下、按下Ctrl+N Ctrl+N 快捷键，系统弹出新建文档对话框。快捷键，系统弹出新建文档对话框。3.1 3.1 创建一个新文档创建一个新文档江西师范大学网页设计课程组3.1.2 3.1.2 打开现有文档 打开现有文档 在 在Dreamweaver Dreamweave

3、r 8.0 8.0 中可以打开现有的 中可以打开现有的Web Web 页或基 页或基于文本的文档，即使这些文档不是用 于文本的文档，即使这些文档不是用Dreamweaver Dreamweaver 8.0 8.0 创 创建的也可以将其打开，然后利用 建的也可以将其打开，然后利用Dreamweaver Dreamweaver 8.0 8.0 在 在“设 设计 计”视图或 视图或“代码 代码”视图中编辑该文档。视图中编辑该文档。打开现有的文档有以下几种方法：打开现有的文档有以下几种方法：1.1.在 在“文档 文档”窗口中打开选择的文档 窗口中打开选择的文档 2.2.导入 导入Word Word 文

4、档 文档 3.3.在资源管理器中打开文档 在资源管理器中打开文档3.1 3.1 创建一个新文档创建一个新文档江西师范大学网页设计课程组3.1.3 3.1.3 设置页面属性 设置页面属性 页面属性是指网页的一般属性信息，例如，网页标题、页面属性是指网页的一般属性信息，例如，网页标题、网页背景颜色、背景图像、超链接颜色、跟踪图像等。网页背景颜色、背景图像、超链接颜色、跟踪图像等。1.1.设置网页标题及编码 设置网页标题及编码2.2.设置网页其他属性 设置网页其他属性(1)(1)外观 外观(2)(2)链接 链接(3)(3)跟踪图像 跟踪图像3.1 3.1 创建一个新文档创建一个新文档江西师范大学网页

5、设计课程组 文字处理主要包括：输入文字、设置文字大小、设置字体、文字处理主要包括：输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐方式等。设置文本颜色、设置文本对齐方式等。3.2.1 3.2.1 输入文字 输入文字 1 1 输入文字：输入文字：打开 打开Dreamweaver 8.0 Dreamweaver 8.0 之后，然后在需要插入文本的位 之后，然后在需要插入文本的位置单击鼠标左键定位插入点，然后输入文字。如果需要开始 置单击鼠标左键定位插入点，然后输入文字。如果需要开始新的一段，按 新的一段，按 键即可，对应的 键即可，对应的HTML HTML 标签是 标签是；如果想换行显

6、示一段内容，可以按 如果想换行显示一段内容，可以按 组合键，组合键，对应的 对应的HTML HTML 标签是 标签是；如果输入的文字超出一行的范围，；如果输入的文字超出一行的范围，输入的文本将自动换行。输入的文本将自动换行。3.2 3.2 文字处理文字处理江西师范大学网页设计课程组2 2 输入连续空格 输入连续空格 在 在Dreamweaver 8.0 Dreamweaver 8.0 中一般只能输入一个空格，若要 中一般只能输入一个空格，若要输入连续的空格时，可以采用下面几种方法中的一种：输入连续的空格时，可以采用下面几种方法中的一种：执行菜单命令 执行菜单命令“编辑 编辑/首选参数 首选参数

7、”，打开，打开“首选参数 首选参数”对话框后，选定 对话框后，选定“分类 分类”栏中的 栏中的“常规 常规”选项，然后在右边 选项，然后在右边编辑选项中勾选 编辑选项中勾选“允许多个连续的空格 允许多个连续的空格”复选框即可 复选框即可。将光标定位到需要输入多个空格的位置，切换到代码视 将光标定位到需要输入多个空格的位置，切换到代码视图即 图即HTML HTML 源文档中连续输入多个 源文档中连续输入多个“ ”“ ”，或者单击插，或者单击插入工具栏文本分类中的 入工具栏文本分类中的“字符 字符”对象，弹出下拉菜单，选择 对象，弹出下拉菜单，选择“不换行空格 不换行空格”选项

8、即可。选项即可。切换到中文输入法，设置为全角输入状态，然后在欲连 切换到中文输入法，设置为全角输入状态，然后在欲连续输入空格的位置按空格键。续输入空格的位置按空格键。3 3 输入特殊字符 输入特殊字符3.2 3.2 文字处理文字处理-输入文字输入文字江西师范大学网页设计课程组3.2.2 3.2.2 编辑文字 编辑文字1 1 设置文字标题与段落 设置文字标题与段落 设置文字段落与标题的方法基本相同，方法如下：设置文字段落与标题的方法基本相同，方法如下：(1)(1)将光标定位到应用段落样式或文本样式的文本中，或 将光标定位到应用段落样式或文本样式的文本中，或直接选取文本。直接选取文本。(2)(2)

9、单击属性面板中的格式选择框，在弹出的下拉列表中 单击属性面板中的格式选择框，在弹出的下拉列表中选择 选择“段落 段落”或 或“标题 标题”。切换到代码视图，我们就会发现，字符属性面板的 切换到代码视图，我们就会发现，字符属性面板的“格 格式 式”列表框中的 列表框中的“段落 段落”、“标题 标题1”1”、“标题 标题2”2”、“标题 标题3”3”、“标题 标题4”4”、“标题 标题5”5”、“标题 标题6”6”和 和“预先格式化的 预先格式化的”等选项，等选项，分别对应 分别对应HTML HTML 语言中的 语言中的、和 和 标记。标记。3.2 3.2 文字处理文字处理江西师范大学网页设计课程

10、组2 2 设置文字字体及大小 设置文字字体及大小(1)(1)设置字体 设置字体(2)(2)设置字号 设置字号3 3 设置文本颜色 设置文本颜色4 4 设置方本对齐方式 设置方本对齐方式 3.2 3.2 文字处理文字处理-编辑文字编辑文字江西师范大学网页设计课程组3.2.3 3.2.3 插入水平线 插入水平线 水平线对于组织信息很有用。在页面上，可以使用一条 水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。或多条水平线以可视方式分隔文本和对象。1 1、插入水平线、插入水平线 将光标移到要插入水平线的位置，执行菜单 将光标移到要插入水平线的位置，执行菜单“插入

11、 插入”“HTML”“HTML”“水平线 水平线”命令或者在 命令或者在“插入 插入”栏中，选择 栏中，选择“HTML”“HTML”，然后单击，然后单击“水平线 水平线”按钮，插入一条默认宽度和 按钮，插入一条默认宽度和粗细的水平线。粗细的水平线。2 2、修改水平线、修改水平线 选定插入的水平线，打开属性面板，设置水平线的高度、选定插入的水平线，打开属性面板，设置水平线的高度、宽度、对齐方式以及是否有阴影等属性 宽度、对齐方式以及是否有阴影等属性 3 3、设置水平线的颜色、设置水平线的颜色 选中水平线，然后单击属性面板中的快速标签编辑器按 选中水平线，然后单击属性面板中的快速标签编辑器按钮，打

12、开编辑标签窗口，键入代码，如将水平线设为红色，钮，打开编辑标签窗口，键入代码，如将水平线设为红色，键入代码：键入代码：color=“red”color=“red”。3.2 3.2 文字处理文字处理江西师范大学网页设计课程组3.2.4 3.2.4 插入更新日期 插入更新日期 Dreamweaver Dreamweaver 提供了一个方便的日期对象，该对象使 提供了一个方便的日期对象，该对象使用户可以以喜欢的格式插入当前日期，还可以选择在每次保 用户可以以喜欢的格式插入当前日期，还可以选择在每次保存文件时都自动更新该日期。存文件时都自动更新该日期。1.1.插入日期、星期和时间 插入日期、星期和时间

13、 2.2.插入更新日期 插入更新日期 3.3.修改日期 修改日期 要修改网页中已插入的日期，有两种方法：要修改网页中已插入的日期，有两种方法：(1)(1)若没有勾选 若没有勾选“储存时自动更新 储存时自动更新”，则直接手动修，则直接手动修改日期。改日期。(2)(2)若勾选了 若勾选了“储存时自动更新 储存时自动更新”，则选中日期后在，则选中日期后在属性面板中单击 属性面板中单击 按钮，同样弹出 按钮，同样弹出“插入日期 插入日期”对话框，在其 对话框，在其中编辑修改日期格式。中编辑修改日期格式。3.2 3.2 文字处理文字处理江西师范大学网页设计课程组3.3.1 3.3.1 插入图像 插入图像

14、在 在Dreamweaver Dreamweaver 中插入图像的基本方法是：中插入图像的基本方法是：1 1 将光标置于要插入图像的位置，在插入工具栏的 将光标置于要插入图像的位置，在插入工具栏的“常用 常用”类中单击 类中单击“图像 图像”按钮或选择 按钮或选择“插入 插入”菜单中的 菜单中的“图像 图像”命令，打 命令，打开 开“选择图像源文件 选择图像源文件”对话框。对话框。2 2 在对话框中显示有图像文件名、文件类型和图像源的路径 在对话框中显示有图像文件名、文件类型和图像源的路径URL(URL(每个网页都有一个唯一的地址，称作统一资源定位器即 每个网页都有一个唯一的地址，称作统一资源

15、定位器即URL)URL)。我们选取存放在站点中的图像文件，然后单击 我们选取存放在站点中的图像文件，然后单击【确定 确定】按钮将显示 按钮将显示“图像标签辅助功能属性 图像标签辅助功能属性”对话框，在 对话框，在“替代文本 替代文本”和 和“详细描述 详细描述”文本框中输入内容，单击 文本框中输入内容，单击“确定 确定”按钮，即可将图片插入到指定 按钮，即可将图片插入到指定区域。区域。3 3 如果所选择的图像文件不在用户设定的当前站点，则将打 如果所选择的图像文件不在用户设定的当前站点，则将打开 开“Macromedia Dreamweaver”“Macromedia Dreamweaver”

16、对话框。提示是否将图像文件复 对话框。提示是否将图像文件复制到根文件夹，单击【是】按钮，然后打开 制到根文件夹，单击【是】按钮，然后打开“复制文件为 复制文件为”对话框，对话框，定位到站点中用于存放图像文件的文件夹 定位到站点中用于存放图像文件的文件夹images images，最后单击【保，最后单击【保存】按钮即可。存】按钮即可。3.33.3图像处理图像处理江西师范大学网页设计课程组3.3.2 3.3.2 设置图像属性 设置图像属性 在网页中插入图像后可以对图像的各种相关属性进行设置，在网页中插入图像后可以对图像的各种相关属性进行设置，若要设置图像属性，请执行以下操作：若要设置图像属性，请执

17、行以下操作：1.1.图像名称及大小：使用缩略图下面的文本框设置名称，以 图像名称及大小：使用缩略图下面的文本框设置名称，以便在使用 便在使用 Dreamweaver Dreamweaver 行为 行为(如 如“交换图像 交换图像”)”)或脚本语言 或脚本语言(如 如 JavaScript JavaScript 或 或 VBScript)VBScript)时可以引用该图像。而缩略图右侧 时可以引用该图像。而缩略图右侧标明了所插入图像的大小。标明了所插入图像的大小。2.2.宽和高 宽和高:以像素为单位指定图像的宽度和高度。当您在页 以像素为单位指定图像的宽度和高度。当您在页中插入图像时，中插入图像

18、时，Dreamweaver Dreamweaver 自动用图像的原始尺寸更新这 自动用图像的原始尺寸更新这些文本框。在 些文本框。在“宽 宽”和 和“高 高”文本框中输入新值，实现图像大 文本框中输入新值，实现图像大小改变，但却与图像的实际宽度和高度不相符，若要恢复图像 小改变，但却与图像的实际宽度和高度不相符，若要恢复图像原始值，可单击 原始值，可单击“宽 宽”和 和“高 高”文本框右侧的 文本框右侧的“恢复图像到原 恢复图像到原始大小 始大小”按钮重设大小。按钮重设大小。3.33.3图像处理图像处理江西师范大学网页设计课程组 3.3.源文件：指定图像的源文件。单击文件夹图标以浏览到 源文件

19、：指定图像的源文件。单击文件夹图标以浏览到源文件，或者直接键入路径。源文件，或者直接键入路径。4.4.链接：指定图像的超级链接。将 链接：指定图像的超级链接。将“指向文件 指向文件”图标拖 图标拖到 到“站点 站点”面板中的某个文件，或单击文件夹图标浏览到站 面板中的某个文件，或单击文件夹图标浏览到站点上的某个文档，或手动键入 点上的某个文档，或手动键入URL URL。5.5.对齐 对齐:可以将图像与同一行中的文本、另一个图像、插 可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐。当图像与图像在网页中对齐时，可由属 件或其它元素对齐。当图像与图像在网页中对齐时，可由属性面板中的按钮、

20、来确定，当图像与文本、插件或其它元 性面板中的按钮、来确定，当图像与文本、插件或其它元素对齐时，可将图像视为一般字符，运用属性面板中的列表 素对齐时，可将图像视为一般字符，运用属性面板中的列表来确定。来确定。3.33.3图像处理图像处理-设置图像属性设置图像属性江西师范大学网页设计课程组 6.6.替代：指定只显示文本的浏览器或已设置为手动下载 替代：指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。在某些浏览器中，图像的浏览器中代替图像显示的替代文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。当鼠标指针滑过图像时也会显示该文本。7.7.地图名称和热点工具：

21、允许您标注和创建图像映射。地图名称和热点工具：允许您标注和创建图像映射。8.8.垂直边距和水平边距：沿图像的边缘添加边距 垂直边距和水平边距：沿图像的边缘添加边距(以像 以像素为单位 素为单位)。“垂直边距 垂直边距”沿图像的顶部和底部添加边距。沿图像的顶部和底部添加边距。“水平边距 水平边距”沿图像左侧和右侧添加边距。若图像和文字贴得 沿图像左侧和右侧添加边距。若图像和文字贴得太近，容易使人产生压迫感。因此，适当调整图像间边距可 太近，容易使人产生压迫感。因此，适当调整图像间边距可以使浏览者在浏览网页时更加舒适。以使浏览者在浏览网页时更加舒适。3.33.3图像处理图像处理-设置图像属性设置图

22、像属性江西师范大学网页设计课程组 9.9.目标：指定链接的页应当在其中载入的框架或窗口。目标：指定链接的页应当在其中载入的框架或窗口。(当图像没有链接到其它文件时，此选项不可用。当图像没有链接到其它文件时，此选项不可用。)当前框架 当前框架集中所有框架的名称都显示在 集中所有框架的名称都显示在“目标 目标”列表中。列表中。也可选用下列保留目标名：也可选用下列保留目标名：_blank:_blank:将链接的文件载入一个未命名的新浏览器窗口中。将链接的文件载入一个未命名的新浏览器窗口中。_parent:_parent:将链接的文件载入含有该链接的框架的父框架集 将链接的文件载入含有该链接的框架的父

23、框架集或父窗口中。如果包含链接的框架不是嵌套的，则链接文件 或父窗口中。如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。加载到整个浏览器窗口中。_self:_self:将链接的文件载入该链接所在的同一框架或窗口中。将链接的文件载入该链接所在的同一框架或窗口中。此为默认值。此为默认值。_top:_top:将链接的文件载入整个浏览器窗口中，因而会删除 将链接的文件载入整个浏览器窗口中，因而会删除所有框架。所有框架。3.33.3图像处理图像处理-设置图像属性设置图像属性江西师范大学网页设计课程组 10.10.低解析度源：指定在载入主图像之前应该载入的图像。低解析度源：指定在载入主图像

24、之前应该载入的图像。11.11.边框 边框:以像素为单位的图像边框的宽度。默认无边框。以像素为单位的图像边框的宽度。默认无边框。12.12.编辑：启动在 编辑：启动在“外部编辑器 外部编辑器”首选参数中指定的图像 首选参数中指定的图像编辑器并打开选定的图像。编辑器并打开选定的图像。13.13.优化：打开 优化：打开“优化 优化”对话框 对话框,使用 使用 Fireworks Fireworks 优化图 优化图像 像。14.14.裁剪：修剪图像大小，删除不需要的区域。裁剪：修剪图像大小，删除不需要的区域。15.15.重新取样：对已调整大小的图像重新取样，提高图片 重新取样：对已调整大小的图像重新

25、取样，提高图片在新的大小和形状下的品质。在新的大小和形状下的品质。16.16.亮度和对比度：调整图像的亮度和对比度设置。亮度和对比度：调整图像的亮度和对比度设置。17.17.锐化：调整图像的清晰度 锐化：调整图像的清晰度。3.33.3图像处理图像处理-设置图像属性设置图像属性江西师范大学网页设计课程组3.3.3 3.3.3 插入图像占位符 插入图像占位符 在 在Dreamweaver Dreamweaver 中插入图像占位符的基本操作：中插入图像占位符的基本操作：1.1.将光标置于要插入图像占位符的位置，在插入工具栏的 将光标置于要插入图像占位符的位置，在插入工具栏的“常用 常用”分类中选择

26、分类中选择“图像占位符 图像占位符”按钮或选择 按钮或选择“插入 插入”菜单中的 菜单中的“图像对 图像对象 象”中的 中的“图像占位符 图像占位符”命令，打开 命令，打开“图像占位符 图像占位符”对话框。对话框。2.2.在对话框中进行设置：在对话框中进行设置：(1)(1)在 在“名称 名称”文本框中，输入要作为图像占位符的标签文字显 文本框中，输入要作为图像占位符的标签文字显示的文本。名称可有可无，必须以字母开头，且只能包含字母和数字；示的文本。名称可有可无，必须以字母开头，且只能包含字母和数字；不允许使用空格和高位 不允许使用空格和高位 ASCII ASCII 字符。字符。(2)(2)在

27、在“宽度 宽度”和 和“高度 高度”文本框中，以像素为单位键入数字以 文本框中，以像素为单位键入数字以设置图像大小。设置图像大小。(3)(3)为图像占位符选择一种颜色，可以使用颜色选择器或直接输 为图像占位符选择一种颜色，可以使用颜色选择器或直接输入颜色的十六进制值 入颜色的十六进制值(如 如#FF0000)#FF0000)或输入网页安全色名称 或输入网页安全色名称(如 如 red)red)。(4)(4)在 在“替代文本 替代文本”中，为使用只显示文本的浏览器的访问者输 中，为使用只显示文本的浏览器的访问者输入描述该图像的文本。入描述该图像的文本。3 3 单击 单击“确定 确定”。网页文档中即

28、会出现图像占位符。网页文档中即会出现图像占位符。3.33.3图像处理图像处理江西师范大学网页设计课程组 3.3.4 3.3.4 插入 插入“鼠标经过图像 鼠标经过图像”鼠标经过图像就是指当访问者移动鼠标使鼠标指针经过 鼠标经过图像就是指当访问者移动鼠标使鼠标指针经过图像时，图像变为另一幅图像；而鼠标指针离开时，图像又 图像时，图像变为另一幅图像；而鼠标指针离开时，图像又恢复为原始图像。这种效果通常用于导航条、图像互动等。恢复为原始图像。这种效果通常用于导航条、图像互动等。它由两幅图像组成，一是首次载入时显示的图像即原始图像，它由两幅图像组成，一是首次载入时显示的图像即原始图像，二是鼠标经过后翻

29、转的图像即鼠标经过图像。在创建鼠标经 二是鼠标经过后翻转的图像即鼠标经过图像。在创建鼠标经过图像时应使用相同大小的两幅图像；如果这两个图像大小 过图像时应使用相同大小的两幅图像；如果这两个图像大小不同，不同，Dreamweaver Dreamweaver 将自动调整第二个图像的大小以匹配 将自动调整第二个图像的大小以匹配第一个图像的属性。第一个图像的属性。3.33.3图像处理图像处理江西师范大学网页设计课程组 3.4.1 3.4.1 超级链接的概念 超级链接的概念 超级链接是指从一个网页指向一个目标的连接关系，即 超级链接是指从一个网页指向一个目标的连接关系，即在 在 Web Web 页面中插

30、入的指向其它文档的引用。目标可以是一 页面中插入的指向其它文档的引用。目标可以是一个另外的网页，也可以是一张图片、一个文件、一个程序等。个另外的网页，也可以是一张图片、一个文件、一个程序等。链接可以将任何类型的资源转换为链接，但最常用的链接类 链接可以将任何类型的资源转换为链接，但最常用的链接类型是文本链接。可以在站点创建过程的任何阶段创建超级链 型是文本链接。可以在站点创建过程的任何阶段创建超级链接。接。超级链接的外观多种多样，可以是导航按钮、文本、图 超级链接的外观多种多样，可以是导航按钮、文本、图片，无论是哪一种格式，只要用鼠标单击链接对象，即可跳 片，无论是哪一种格式，只要用鼠标单击链

31、接对象，即可跳转到指定的目标网页。当鼠标指向链接载体时，链接载体会 转到指定的目标网页。当鼠标指向链接载体时，链接载体会发生一些变化，如鼠标指向文字载体，文字的字体、字号、发生一些变化，如鼠标指向文字载体，文字的字体、字号、颜色等会发生改变，有的带有下画线。颜色等会发生改变，有的带有下画线。3.43.4超级链接超级链接江西师范大学网页设计课程组 1.1.超链接的分类 超链接的分类 根据 根据 超级链接目标文件 超级链接目标文件 的不同，可以分为 的不同，可以分为 页面超链接 页面超链接、锚点超链接 锚点超链接、电子邮件超链接 电子邮件超链接 等；根据 等；根据 超级链接单击对象 超级链接单击对

32、象 的 的不同，超级链接可分为 不同，超级链接可分为 文字超链接 文字超链接、图像超链接 图像超链接、图像映射 图像映射等。等。3.43.4超级链接超级链接-概念概念江西师范大学网页设计课程组2.2.路径 路径 创建超链接必须先了解链接与被链接载体的路径。在一 创建超链接必须先了解链接与被链接载体的路径。在一个网站中，路径通常有 个网站中，路径通常有3 3 种表示方式：种表示方式：绝对路径 绝对路径、根目录相对 根目录相对路径 路径 和 和 文档目录相对路径 文档目录相对路径。(1)(1)绝对路径。绝对路径。(2)(2)根目录相对路径。根目录相对路径。(3)(3)文档目录相对路径。文档目录相对

33、路径。3.43.4超级链接超级链接概念概念江西师范大学网页设计课程组创建超级链接 创建超级链接 Dreamweaver Dreamweaver 提供多种创建超链接的方法，可创建到 提供多种创建超链接的方法，可创建到文档、图像、多媒体文件或可下载软件的链接。可建立到文 文档、图像、多媒体文件或可下载软件的链接。可建立到文档内任意位置的任何文本或图像 档内任意位置的任何文本或图像(包括标题、列表、表、层或 包括标题、列表、表、层或框架中的文本或图像 框架中的文本或图像)的链接。的链接。1 1、创建到其它文档或文件的超级链接、创建到其它文档或文件的超级链接 2 2、创建到文档内的特定位置的超级链接、

34、创建到文档内的特定位置的超级链接 3 3、创建电子邮件链接、创建电子邮件链接3.43.4超级链接超级链接江西师范大学网页设计课程组 管理超级链接 管理超级链接 为避免站点中出现断链接，可以激活链接管理，使 为避免站点中出现断链接，可以激活链接管理，使 Dreamweaver Dreamweaver 在您作出更改后自动更新链接。也可以使用 在您作出更改后自动更新链接。也可以使用站点的可视化表示形式来修改链接，或者通过一次更改将所 站点的可视化表示形式来修改链接，或者通过一次更改将所有链接更新到一个特定的文件中。有链接更新到一个特定的文件中。自动更新链接 自动更新链接 在站点地图中修改链接 在站点

35、地图中修改链接 在整个站点范围内更改链接 在整个站点范围内更改链接3.43.4超级链接超级链接江西师范大学网页设计课程组3.4.4 3.4.4 图像映射 图像映射 图像映射就是指在一幅图像中定义若干个区域 图像映射就是指在一幅图像中定义若干个区域(这些区域 这些区域称为热点 称为热点)，每个区域中指定一个不同的超链接，当单击不同，每个区域中指定一个不同的超链接，当单击不同区域时可以跳转到相应的目标页面。区域时可以跳转到相应的目标页面。3.43.4超级链接超级链接江西师范大学网页设计课程组3.4.5 3.4.5 导航条 导航条 导航条由图像或图像组组成，这些图像的显示内容随用 导航条由图像或图像

36、组组成，这些图像的显示内容随用户操作而变化。导航条项目最多呈现四种图像状态：户操作而变化。导航条项目最多呈现四种图像状态：(1)(1)初始状态：用户尚未单击或尚未与此项目交互时所显 初始状态：用户尚未单击或尚未与此项目交互时所显示的图像。示的图像。(2)(2)滑过状态：指鼠标指针滑过初始图像时所显示的图像。滑过状态：指鼠标指针滑过初始图像时所显示的图像。(3)(3)按下状态：指项目被单击后所显示的图像。按下状态：指项目被单击后所显示的图像。(4)(4)按下时鼠标经过状态：指在项目被单击后，鼠标指针 按下时鼠标经过状态：指在项目被单击后，鼠标指针滑过 滑过“按下 按下”图像时，所显示的图像。图像

37、时，所显示的图像。1 1、创建导航条、创建导航条 2 2、测试与修改导航条、测试与修改导航条3.43.4超级链接超级链接江西师范大学网页设计课程组 Macromedia Dreamweaver 8 Macromedia Dreamweaver 8 可以快速便捷地向 可以快速便捷地向Web Web 站点添加多媒体对象，如 站点添加多媒体对象，如Flash Flash 和 和 Shockwave Shockwave 影片、影片、QuickTime QuickTime、AVI AVI、Java applet Java applet、Active X Active X 控件以及各种 控件以及各种格式的

38、音频文件，从而使制作出的网页有声有色。目前使用 格式的音频文件，从而使制作出的网页有声有色。目前使用的音频和视频文件格式包括：的音频和视频文件格式包括：(1)(1)音频：主要包含 音频：主要包含Wav Wav、Midi Midi、Mp3 Mp3、Aif Aif 和 和Ra Ra 等文 等文件格式。件格式。(2)(2)视频：主要有 视频：主要有Real Media Real Media、Windows Media Windows Media、QuickTime 3 QuickTime 3 种视频文件，其中 种视频文件，其中Real Media Real Media 和 和Windows Wind

39、ows Media Media 格式在国内使用最广。格式在国内使用最广。3.5 3.5 使用多媒体对象使用多媒体对象江西师范大学网页设计课程组插入和编辑多媒体对象 可以在 Dreamweaver 文档中插入Flash SWF 文件或对象、QuickTime 或Shockwave 影片、Java applet、ActiveX 控件或者其它音频或视频对象。在页面中插入媒体对象的基本操作如下：(1)将插入点放在“文档”窗口中希望插入该对象的位置。(2)在“插入”工具栏的“常用”类别中单击“媒体”按钮，再选择要插入的媒体对象按钮；或者从“插入”“媒体”菜单中选择适当的媒体对象，如插件，弹出“选择文件”

40、对话框，然后从中选择源文件，单击“确定”按钮。3.5 3.5 使用多媒体对象使用多媒体对象江西师范大学网页设计课程组添加视频（非 Flash）可以通过不同方式和使用不同格式将视频添加到 Web 页面。视频可被下载给用户，或者可以对视频进行流式处理以便在下载它的同时播放它。在页面中包含一个可供用户下载的简短的视频剪辑，可执行以下操作：1 将剪辑放入站点文件夹。这些剪辑通常采用 AVI 或 MPEG 文件格式。2 链接到剪辑，或将其嵌入到页面中。3.5 3.5 使用多媒体对象使用多媒体对象江西师范大学网页设计课程组向页面添加声音 可以向 Web 页添加声音。有多种不同类型的声音文件和格式，例如.w

41、av、.midi 和.mp3。在添加声音前，需要考虑以下一些因素：添加声音的目的、听众类型、文件大小、声音品质和不同浏览器中的差异。1 链接到音频文件 2.嵌入声音文件。3.5 3.5 使用多媒体对象使用多媒体对象江西师范大学网页设计课程组向页面添加声音嵌入音频文件的基本操作如下：(1)在“设计”视图中，将插入点放置在要嵌入文件的地方，然后在“插入”栏的“常用”类别中单击“媒体”按钮，然后选择“插件”图标或执行“插入”“媒体”“插件”菜单命令。(2)在属性检查器中，单击文件夹图标浏览音频文件，或者在“链接”文本框中键入文件的路径和名称，然后在文本框中输入宽度和高度或者通过在“文档”窗口中调整插件占位符的大小来确定音频控件在浏览器中显示的大小，如图3-47 所示在音频属性面板中设置音频链接及宽高值，图3-48 则为该插件在浏览器中显示情况，可以控制音量和声音文件在播放器中的是否播放等。3.5 3.5 使用多媒体对象使用多媒体对象