Dreamweaver中网页元素的插入与运用

《Dreamweaver中网页元素的插入与运用》由会员分享，可在线阅读，更多相关《Dreamweaver中网页元素的插入与运用（30页珍藏版）》请在金锄头文库上搜索。

1、Dreamweaver中网页元素的插 入与运用主讲：梁敦毫教学目标了解各种网页元素的特点、重要性及使用场景；掌握DW在插 入网页元素时涉及到相关概念，如图像占位符、鼠标经过的 图像、Flash按钮、Flash文本、FlashPaper、Flash视频、锚 点链接、E -mail链接、空链接、脚本链接、图像热点链接、 绝对/相对路径和URL等；会用DW插入和编辑文本、插入和编 辑图像、插入和编辑各种Flahs元素（包括：Flash、Flash按 钮、Flash文本、FlashPaper文档和Flash视频）、插入声音 和视频、插入和编辑各种超链接（包括：普通链接、锚点链 接、E -mail链接、

2、空链接、脚本链接和图像热点链接）。本节重点u 在网页中插入和编辑文本u 在网页中插入和编辑图像u 在网页中插入和编辑各种Flash 元素（难点）u 在网页中插入音频和视频u 在网页中插入和编辑各种超链接（难点）u 相对路径和绝对路径（难点）u 图像热点链接（ 难点）1 文本 1.1 认识【文本】工具栏文本是网页中最常见、运用最广泛的元素之一,是网 页内容的 核心部分。在网页中添加文本与在Word等文字处 理软件中添加文本一样方便 ， 可以直接输入文本,也可从 其他文档中复制文本，还可以插入水平线和特殊字符等。使用【文本】工具栏、可以快速插入各种类型的文本 。 单击插入栏上的【文本】选项卡，打开

3、【文本】插入栏。粗体斜体加强强调块引用段落 已编排格式标题项目列表列表项 定义术语 缩写编号列表 定义列表 定义说明 首字母缩写词字符1.2 插入文本 （1）直接输入文本在DW的【设计】视图中，将 光标移至要插入文本的位置，然 后直接即可。可用Enter键来分 段，用Shift+Enter键强制换行。 （ 2）复制和粘贴文本 （ 3）导入文本 选择【文件】|【导入】可将 Word和Excel的内容直接导入到 网页中。1 文本输入文本效果界面（1）特殊字符 在【文本】工具 栏中，点击【字 符】按钮旁边的1 文本 1.3 插入特殊字符、水平线和日期（2）水平线 ：在菜单栏中，选择【插入记 录】HT

4、ML|【水平线】命令即可插入，选中 该水平线，可在【属性】面板设置它。下拉箭头进行插 入。 （3）日期 ：在插入栏的【常用】选项卡中， 即可打开日期对话框进点击【日期】按钮 行插入。1.4 编辑文本（1）应用标准文本格式DW定义了3类标准文本格式：段落（）、标题（h1- h6）和预格式化文本（）。可将光标定位在段落内 或选择段落的全部或部分文本（最小单位是段落），然后 使用【属性】面板的【格式】下拉框应用标准文本格式。1 文本（2）设置文本字体选择要设置字体的文本内容， 然后使用【 属性】面板的【字 体】下拉框选择即可。选择即可。（3）设置字体大小 （4）设置文本颜色择即可。（5）设置文本对齐

5、方式 使用【属性】面板 使用【属性】面板的 使用【 属性】面板的按 的【大小】下拉框 【文本颜色】按钮选 钮：即可。从左 到右分别为：1）左对齐2）居中对齐3）居中对齐4）两端对齐1 文本 1.4 编辑文本下面3个操作都需：先选择要操作的文本内容。2 图像 2.1 插入图像图像是网页上最常用的元素之一，在网页中适当地插 入图像可以可以大大增强网页的视觉效果。点击选择要插入的图像设置图像的替换文体2 图像2.2 设置图像的属性 选中图像后，在【属性】面板即可进行设置。（1）【图像】文本框：可以省略，设置的值会给的id和name属性；（2）【宽】和【高】：设置图像的宽度和高度；（3）【替换】：设置

6、图像的替换文本；（4）【类】：选择应用于图像的CSS样式； （5）【链接】和【目标】：链接指给图像加的链接，目标是指链接的打开方式； （6）【边框】：设置图像的边框粗细，以像素为单位； （7）【对齐】：是指图像相对于同一段落或同一行中其他元素的对齐方式； （8）【垂直边距】：设置是图像与上面、下面的文字之间的距离（像素），即 vspace属性； （9）【水平边距】：设置是图像与左边、右边的文字之间的距离（像素），即 hspace属性； （10【编辑】：可对图像进行简单的编辑和优化。2 图像 2.3 插入图像占位符如果在制作网页的过程中图像还没有制作完成，可以 先插入图像占位符代替。点击HTML

7、代码 ：效果图结论 图像占位符的本质：一个没 有src属性、设置背景属性 的元素。提示：双击图像占位 符，就会弹出选择图 像对话框，将制作好 的图像插入到占位符 的位置上。设置图像占位符的属性2 图像 2.4 鼠标经过的图像是指当鼠标经过图像时，原始图像会变成另一张图像，它由原始图 像和鼠标经过的图像两张图构成，鼠标经过的图像最好和原始图像一 样大，否则系统会自动将鼠标经过的图像调整到原始图像的大小 。点击设置对话框生成的HTML图像名称：不能为空， 随便起一个，生成的JS 代码需要使用。它会将鼠标经过的图像 提前下载到浏览器，以 加快显示速度。结 论：鼠标经过的图像 本质就是对原始图像加 上

8、链接，并施加JS特效 而形成的特殊效果。3 多媒体选择已经制作好 的Flash动画 3.1 插Flash动画（1）插入Flash动画点击（2）设置Flash动画的属性选中Flash动画后，在【属性】面板即可进行设置。3 多媒体 3.2 插入Flash按钮 （1）插入Flash按钮点击设置要制作的 Flash按钮的 属性提示：Flash按钮 也是一个Flash动 画，其实本操作 是通过DW 定做一 个Flash按钮动 画，然后将此动 画再插入到网页 中，此功能可以 为不会使用Flash 制作工具的人的 提供便利。效果图说明：【另存为】是设置制作的Flash按钮的存放路径，整个路径不能有中文 。（

9、2）设置Flash按钮的属性 选中Flash按钮后，在【属性】面板即可进行设置。3 多媒体 3.3插入Flash文本 （1）插入Flash文本点击效果图说明【另存为】是设置制作的Flash按钮的存放路径，整个路径不能有中文 ；【颜色】：设置文本的颜色；【转滚颜色】：设置鼠标停留在文本上的颜色 ；【显示字体】：勾上则在【文本】输入框中显示相应的字体。 （2）设置Flash文本的属性 选中Flash文本后，在【属性】面板即可进行设置，设置界面与Flash 按钮相同，这里省略。设置要制作的 Flash文本的属性提示 ：Flash文 本也是一个 Flash动画，而 且一些参数可以 传入进去，不是 绑定

10、到Flash中。（2）设置FlashPaper的属性（与Flash相同，略）3 多媒体 3.4 插入FlashPaperFlashPaper是Adobe推出的一种浏览其它文档（包括PDF、 OFFICE等）的特殊的Flash，它可以对文档进行自由的缩放、 打印和翻页等操作，对文档的传播非常有好处。百度文库、豆 丁网等都是通过FlashPaper来分享文档的。点击（1） 插入FlashPaper文档插入之前，我们需要先制作好FlashPaper文档。 利用PlashPaper制作工具即可完成。效果图选择FlashPaper3.5 插入Flash视频3 多媒体过去的Flash视频:视频文件和Fla

11、sh捆绑成一个文件；如今的 Flash视频：视频文件和Flash（用于视频控制界面和控制，即： 容器分离；可应用到Flash中视频，主要分为两类：FLV视频 和流媒体视频（如RMVB）。 （1）FLV是FLASH VIDEO的简称，是随着Flash的推出发展而来 的视频格式，文件后缀名为.flv。由于它形成的文件极小、加载速 度极快，使得网络观看视频文件成为可能，它的出现有效解决了 视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络 上很好的使用等缺点。目前很多线视频网站均采用此视频格式： 如新浪播客、六间房、56、优酷、土豆、酷6等。 （2）RMVB的前身为RM格式，它们是Re

12、al Networks公司所制 定的音频视频压缩规范，文件后缀名为.rmvb或.rm。借助rmtp 协议，RMVB已经形成了一种高效的流媒体技术，实现了在低速 率网络上进行影像数据实时传送和播放。目前有第一放映室等 网站采用此种视频和Flash结合。3 多媒体插入FLV视频的效果（注 意：需要通过网址来访问 才可见效果，直接预览看 不到效果。） 3.6 插入Flash视频点击插入FlV视频插入流媒体视频， 需要有流媒体服务 器，如Flash Media Server等3.7 插入音频/视频3 多媒体网页上播放的音乐或影片等媒体文件，并不是依靠浏览器本身 播放的，而是依靠浏览者电脑所安装的播放程

13、序，所以浏览者 电脑必须事先安装有相应的播放程序才能正常浏览带有音乐或 影片的网页。插入音频和视频的方法一样，具体如下：提示：插入的音频和视频界面都是默认的3232的大小，我们 可以选中该音频或视频，在【属性】面板进行设置。点击选择要插入的 音频或视频3.8 插入网页背景音乐3 多媒体由于目前背景音乐在HTML中还未能形成一个标准，所以DW中 并没有提供插入背景音乐的按钮。但是，我们可以在【代码】 视图中使用标签进行手工添加，但只适用于IE。插 入的背景音乐不会在文档中显示任何标记，只有在浏览器浏览 网页时才会播放背景音乐。标签的常用属性如下：src：设定背景音乐文件的路径，可以是相对或绝对路

14、径； balance: 设定左右声道音量的平衡值(-10000+10000)， 一般设为0； volume:设定音量大小（-100000），0为最大声； delay: 播放多次时，设定循环播放间的延时时间，单位为毫 秒； loop：设定循环播放的次数，loop为2表示循环播放两次， 1表示无限次循环播放。4 超链接 4.1 超链接的简介超链接的链接对象大多数都是URL （链接路径），但也有例外（如空 链接、E-mail链接、脚本链接）超链接是网页中重要组成部分，利用它不仅可以链接到其他 网页，还可以链接到其他图像文件、多媒体文件及下载程序， 也可以利用它在网页内部进行链接或是发送E-mail等

15、。在 Dreamweaver中，可以将文档中的任何文字及任意位置的图 片设置为超链接。 超链接分类：按照链接路径的不同，网页中超链接一般分为: 内部链接，锚点链接和外部链接。按照使用对象的不同，网页 中的链接又可以分为：文本超链接，图像链接，E-mail链接， 文件链接，空链接，脚本链接等。 在网页中，最常用的链接对象是链接路径。链接路径分为绝对 路径和相对路径。绝对路径是一个完整的路径地址，如： http:/ ；相对路径是指该文件 相对于某一参照物的路径地址，在网页中，我们使用.表示上一 级目录，如./index.html 是个相对路径。相对路径的用法要链接的文件与当前文档处于同一个文件夹中

16、，只需输入文件 名。 要链接的文件位于当前文档所在文件夹的子文件夹中，提供子 文件夹名，然后是一正斜线（/）和文件名。 要链接的文件位于当前文档所在文件夹的父文件夹中，文件名 前加./（其中“.”表示“文件夹分层结构中的上一级文件夹”）4 超链接4.2 创建普通超链接点击绝对路径效果图相对路径 选择相对于Untitled 1.html这个网页创建文本链接4.2 创建普通超链接4 超链接目标属性（target）的四个值：（1）_blank：在新窗口打开链接；（2）_self：在原窗口打开链接；（默认值）（3 ）_top:在整个窗口中打开链接，在有框架的页面中才有 效果，否则效果和_self看到的一样；（4）_parent：在父框架中打开链接，如果含有该链接的框 架不是嵌套的，则效果_top。说明：图像超链接本质就是将的元素内容由文本替换为图 像而已，我们可以直接选中图像后，在【属性】面板中对【链 接】和【目标】两栏进行设置就可以为图像设置超