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）水平线 ：在菜单栏中，选择【插入记 录】HTML
4、|【水平线】命令即可插入，选中 该水平线，可在【属性】面板设置它。,下拉箭头进行插 入。（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 插入图像占位符如果在制作网页的过程中图像还没有制作完成，可以先插入图像占位符代
7、替。,点击,HTML代码 ：img name=“ src=“ width=“100“,height=“30“ alt=“图像的,替换文本“ style=“background- color: #FF0000“ /效果图,结论 图像占位符的本质：一个没有src属性、设置背景属性的元素。,提示：双击图像占位 符，就会弹出选择图 像对话框，将制作好 的图像插入到占位符,的位置上。设置图像占位符的属性,2 图像 2.4 鼠标经过的图像是指当鼠标经过图像时，原始图像会变成另一张图像，它由原始图像和鼠标经过的图像两张图构成，鼠标经过的图像最好和原始图像一样大，否则系统会自动将鼠标经过的图像调整到原始图像的
8、大小 。,点击,设置对话框,a href =“http:/“,onmouseout=“MM_swapImgRestore()“ onmouseover=“MM_swapImage(Image2 ,logo.jpg, 1)“ ,生成的HTML,图像名称：不能为空， 随便起一个，生成的JS 代码需要使用。它会将鼠标经过的图像 提前下载到浏览器，以 加快显示速度。,结 论：鼠标经过的图像,本质就是对原始图像加 上链接，并施加JS特效 而形成的特殊效果。,3 多媒体,选择已经制作好的Flash动画,3.1 插Flash动画（1）插入Flash动画点击（2）设置Flash动画的属性选中Flash动画后，
9、在【属性】面板即可进行设置。,3 多媒体3.2 插入Flash按钮 （1）插入Flash按钮点击,设置要制作的 Flash按钮的 属性,提示：Flash按钮也是一个Flash动画，其实本操作 是通过DW 定做一个Flash按钮动画，然后将此动画再插入到网页中，此功能可以为不会使用Flash,制作工具的人的提供便利。效果图说明：【另存为】是设置制作的Flash按钮的存放路径，整个路径不能有中文 。（2）设置Flash按钮的属性选中Flash按钮后，在【属性】面板即可进行设置。,3 多媒体3.3插入Flash文本 （1）插入Flash文本,点击效果图说明【另存为】是设置制作的Flash按钮的存放路
10、径，整个路径不能有中文 ；【颜色】：设置文本的颜色；【转滚颜色】：设置鼠标停留在文本上的颜色 ；【显示字体】：勾上则在【文本】输入框中显示相应的字体。（2）设置Flash文本的属性选中Flash文本后，在【属性】面板即可进行设置，设置界面与Flash按钮相同，这里省略。,设置要制作的,Flash文本的属性,提示 ：Flash文本也是一个Flash动画，而 且一些参数可以 传入进去，不是 绑定到Flash中。,（2）设置FlashPaper的属性（与Flash相同，略）,3 多媒体 3.4 插入FlashPaperFlashPaper是Adobe推出的一种浏览其它文档（包括PDF、OFFICE等
11、）的特殊的Flash，它可以对文档进行自由的缩放、打印和翻页等操作，对文档的传播非常有好处。百度文库、豆丁网等都是通过FlashPaper来分享文档的。,点击,（1） 插入FlashPaper文档插入之前，我们需要先制作好FlashPaper文档。 利用PlashPaper制作工具即可完成。,效果图,选择FlashPaper,3.5 插入Flash视频,3 多媒体,过去的Flash视频:视频文件和Flash捆绑成一个文件；如今的 Flash视频：视频文件和Flash（用于视频控制界面和控制，即： 容器分离；可应用到Flash中视频，主要分为两类：FLV视频 和流媒体视频（如RMVB）。,（1）
12、FLV是FLASH VIDEO的简称，是随着Flash的推出发展而来 的视频格式，文件后缀名为.flv。由于它形成的文件极小、加载速 度极快，使得网络观看视频文件成为可能，它的出现有效解决了 视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络 上很好的使用等缺点。目前很多线视频网站均采用此视频格式： 如新浪播客、六间房、56、优酷、土豆、酷6等。,（2）RMVB的前身为RM格式，它们是Real Networks公司所制 定的音频视频压缩规范，文件后缀名为.rmvb或.rm。借助rmtp 协议，RMVB已经形成了一种高效的流媒体技术，实现了在低速 率网络上进行影像数据实时传送和播放
13、。目前有第一放映室等 网站采用此种视频和Flash结合。,3 多媒体,插入FLV视频的效果（注,意：需要通过网址来访问 才可见效果，直接预览看,不到效果。） 3.6 插入Flash视频点击插入FlV视频插入流媒体视频，需要有流媒体服务器，如Flash Media Server等,3.7 插入音频/视频,3 多媒体,网页上播放的音乐或影片等媒体文件，并不是依靠浏览器本身 播放的，而是依靠浏览者电脑所安装的播放程序，所以浏览者 电脑必须事先安装有相应的播放程序才能正常浏览带有音乐或 影片的网页。插入音频和视频的方法一样，具体如下：,提示：插入的音频和视频界面都是默认的3232的大小，我们 可以选中
14、该音频或视频，在【属性】面板进行设置。,点击,选择要插入的,音频或视频,3.8 插入网页背景音乐,3 多媒体,由于目前背景音乐在HTML中还未能形成一个标准，所以DW中 并没有提供插入背景音乐的按钮。但是，我们可以在【代码】 视图中使用标签进行手工添加，但只适用于IE。插 入的背景音乐不会在文档中显示任何标记，只有在浏览器浏览 网页时才会播放背景音乐。标签的常用属性如下：,src：设定背景音乐文件的路径，可以是相对或绝对路径； balance: 设定左右声道音量的平衡值(-10000+10000)， 一般设为0；,volume:设定音量大小（-100000），0为最大声； delay: 播放多
15、次时，设定循环播放间的延时时间，单位为毫 秒；,loop：设定循环播放的次数，loop为2表示循环播放两次， 1表示无限次循环播放。,4 超链接 4.1 超链接的简介,超链接的链接对象大多数都是URL （链接路径），但也有例外（如空 链接、E-mail链接、脚本链接）,超链接是网页中重要组成部分，利用它不仅可以链接到其他网页，还可以链接到其他图像文件、多媒体文件及下载程序，也可以利用它在网页内部进行链接或是发送E-mail等。在Dreamweaver中，可以将文档中的任何文字及任意位置的图片设置为超链接。超链接分类：按照链接路径的不同，网页中超链接一般分为:内部链接，锚点链接和外部链接。按照使
16、用对象的不同，网页中的链接又可以分为：文本超链接，图像链接，E-mail链接，文件链接，空链接，脚本链接等。在网页中，最常用的链接对象是链接路径。链接路径分为绝对 路径和相对路径。绝对路径是一个完整的路径地址，如： http:/ ；相对路径是指该文件 相对于某一参照物的路径地址，在网页中，我们使用表示上一 级目录，如/index.html 是个相对路径。,相对路径的用法,要链接的文件与当前文档处于同一个文件夹中，只需输入文件名。 要链接的文件位于当前文档所在文件夹的子文件夹中，提供子文件夹名，然后是一正斜线（/）和文件名。 要链接的文件位于当前文档所在文件夹的父文件夹中，文件名前加/（其中“”
17、表示“文件夹分层结构中的上一级文件夹”）,4 超链接4.2 创建普通超链接,点击,绝对路径,效果图,相对路径选择相对于Untitled 1.html这个网页,创建文本链接,4.2 创建普通超链接,4 超链接,目标属性（target）的四个值：（1）_blank：在新窗口打开链接；,（2）_self：在原窗口打开链接；（默认值）,（3 ）_top:在整个窗口中打开链接，在有框架的页面中才有,效果，否则效果和_self看到的一样；,（4）_parent：在父框架中打开链接，如果含有该链接的框,架不是嵌套的，则效果_top。,说明：图像超链接本质就是将的元素内容由文本替换为图 像而已，我们可以直接选
18、中图像后，在【属性】面板中对【链 接】和【目标】两栏进行设置就可以为图像设置超链接了。,4 超链接4.3 创建锚点链接（书签链接）它用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅 让我们能指向文档，还能指向页面里的特定段落，让链接对象 更加精准、细粒度化，便于浏览者查看网页内容。第一步：在需要链接到的位置处创建命名锚点,点击,设置锚点名字,代码,第二步：链接到的刚创建的命名锚点创建一个普通的超链接，将【链接】文本框的值设置为：#+刚才创建的锚点名称（#to_logo）就可以了。,4 超链接 4.4 创建E-mail链接/空链接/脚本链接（1）E-mail链接：是指链接对象是一个E-mail
19、地址的链接,点击,代码,设置Email链接的属性,a,href=“mailto:“我的邮箱（2）空链接：是指链接对象是一个#的链接。有的时候，链接对象还未确定，又想让元素显示为链接时，可以使用它。当点击空链接时，某些浏览器可能会跳到页面的顶部。（2）脚本链接：是指链接对象是一段JavaScript脚本或一 个JavaScript函数名的链接。使用这种链接，我们可以调用一 段JS脚本，以实现某些特殊效果。,点击链接后 的弹出窗口,4.5 创建图像热点链接,4 超链接,如果只想给图像的某些区域添加链接，点击不同的区域可以打 开不同的链接，这样的链接就叫做图像热点链接，图像的带链 接的区域就称为热点
20、。选中要创建图像热点链接的图像，在【 属性】面板的如下区域进行设置：,创建图像热点链接的工具,以上四个按钮从左到右，分别为如下工具：选择工具 ：可以对热点区域进行选择和调整； 矩形工具按钮 :绘制一个矩形的热点区域；圆形工具按钮 :绘制一个圆形的热点区域；,多边形工具按钮 :绘制一个不规则多边形的热点区域。,4 超链接,距形 热点,圆形 热点,多边形热点,用选择工具选中相应的热点区 域后，即可在【属性】面板设 置它的链接地址等信息,4.6 创建图像热点链接,上图的HTML代码：,标签为图像定义热点区域 ； 定义热点区域的坐标及链接,图像左上角 的坐标是（0,0）,4 超链接4.6 创建图像热点
21、链接 关于coords属性的说明：标签的 coords 属性定义了热点区域的坐标。坐标的数 字及其含义取决于shape属性中决定的区域形状。 圆形：shape=“circle“，coords=“x,y,z“,这里的x和y定义了圆心的位置，z 是以像素为单位的圆形半径。,矩形：shape=“rect“，coords=“x1,y1,x2,y2“ 第一对坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶 点坐标。 多边形：shape=“polygon “，coords=“x1,y1, x2,y2, x3,y3,.“ 每一对“x,y”坐标都定义了多边形的一个顶点。多边形会自动,封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。,注意：如果某个area标签中的坐标和其他区域发生了重叠，会 优先采用最先出现的area标签。浏览器会忽略超过图像边界范 围之外的坐标。,练一练,1.拟定一个主题（比如庆祝三八妇女节、个人简介等）制件一个图文混排的网页。 2.利用本章学习的知识，制作一个电子相册主页，要求有循环播放的背景音乐并且制作Flash按钮组成导航菜单。（第一次作业，完成时间一个星期）,
