第4讲-Dreamweaver中网页元素的插入与运用.ppt

Dreamweaver中网页元素的插入与运用,主讲：梁敦毫,教学目标,了解各种网页元素的特点、重要性及使用场景；掌握DW在插入网页元素时涉及到相关概念，如图像占位符、鼠标经过的图像、Flash按钮、Flash文本、FlashPaper、Flash视频、锚点链接、E-mail链接、空链接、脚本链接、图像热点链接、绝对/相对路径和URL等；会用DW插入和编辑文本、插入和编辑图像、插入和编辑各种Flahs元素（包括：Flash、Flash按钮、Flash文本、FlashPaper文档和Flash视频）、插入声音和视频、插入和编辑各种超链接（包括：普通链接、锚点链接、E-mail链接、空链接、脚本链接和图像热点链接）。,本节重点,u在网页中插入和编辑文本u在网页中插入和编辑图像,u在网页中插入和编辑各种Flash元素（难点）u在网页中插入音频和视频,u在网页中插入和编辑各种超链接（难点）u相对路径和绝对路径（难点）u图像热点链接（难点）,1文本1.1认识【文本】工具栏文本是网页中最常见、运用最广泛的元素之一,是网页内容的核心部分。在网页中添加文本与在Word等文字处理软件中添加文本一样方便，可以直接输入文本,也可从其他文档中复制文本，还可以插入水平线和特殊字符等。使用【文本】工具栏、可以快速插入各种类型的文本。单击插入栏上的【文本】选项卡，打开【文本】插入栏。,粗体,斜体,加强,强调,块引用,段落已编排格式,标题,项目列表,列表项定义术语缩写,编号列表定义列表定义说明首字母缩写词,字符,1.2插入文本（1）直接输入文本在DW的【设计】视图中，将光标移至要插入文本的位置，然后直接即可。可用Enter键来分段，用Shift+Enter键强制换行。（2）复制和粘贴文本（3）导入文本选择【文件】|【导入】可将Word和Excel的内容直接导入到网页中。,1文本,输入文本效果界面,（1）特殊字符在【文本】工具栏中，点击【字符】按钮旁边的,1文本1.3插入特殊字符、水平线和日期,（2）水平线：在菜单栏中，选择【插入记录】HTML|【水平线】命令即可插入，选中该水平线，可在【属性】面板设置它。,下拉箭头进行插入。（3）日期：在插入栏的【常用】选项卡中，,即可打开日期对话框进,点击【日期】按钮行插入。,1.4编辑文本,（1）应用标准文本格式,DW定义了3类标准文本格式：段落（）、标题（h1-h6）和预格式化文本（）。可将光标定位在段落内或选择段落的全部或部分文本（最小单位是段落），然后使用【属性】面板的【格式】下拉框应用标准文本格式。,1文本,（2）设置文本字体,选择要设置字体的文本内容，然后使用【属性】面板的【字体】下拉框选择即可。,选择即可。,（3）设置字体大小（4）设置文本颜色,择即可。,（5）设置文本对齐方式,使用【属性】面板使用【属性】面板的使用【属性】面板的按,的【大小】下拉框【文本颜色】按钮选钮：,即可。从左,到右分别为：1）左对齐2）居中对齐3）居中对齐4）两端对齐,1文本1.4编辑文本下面3个操作都需：先选择要操作的文本内容。,2图像2.1插入图像图像是网页上最常用的元素之一，在网页中适当地插入图像可以可以大大增强网页的视觉效果。,点击,选择要插入的图像,设置图像的替换文体,2图像2.2设置图像的属性选中图像后，在【属性】面板即可进行设置。（1）【图像】文本框：可以省略，设置的值会给的id和name属性；（2）【宽】和【高】：设置图像的宽度和高度；（3）【替换】：设置图像的替换文本；（4）【类】：选择应用于图像的CSS样式；,（5）【链接】和【目标】：链接指给图像加的链接，目标是指链接的打开方式；,（6）【边框】：设置图像的边框粗细，以像素为单位；（7）【对齐】：是指图像相对于同一段落或同一行中其他元素的对齐方式；（8）【垂直边距】：设置是图像与上面、下面的文字之间的距离（像素），即vspace属性；（9）【水平边距】：设置是图像与左边、右边的文字之间的距离（像素），即hspace属性；（10【编辑】：可对图像进行简单的编辑和优化。,2图像2.3插入图像占位符如果在制作网页的过程中图像还没有制作完成，可以先插入图像占位符代替。,点击,HTML代码：效果图,结论图像占位符的本质：一个没有src属性、设置背景属性的元素。,提示：双击图像占位符，就会弹出选择图像对话框，将制作好的图像插入到占位符,的位置上。设置图像占位符的属性,2图像2.4鼠标经过的图像是指当鼠标经过图像时，原始图像会变成另一张图像，它由原始图像和鼠标经过的图像两张图构成，鼠标经过的图像最好和原始图像一样大，否则系统会自动将鼠标经过的图像调整到原始图像的大小。,点击,设置对话框,生成的HTML,图像名称：不能为空，随便起一个，生成的JS代码需要使用。它会将鼠标经过的图像提前下载到浏览器，以加快显示速度。,结论：鼠标经过的图像,本质就是对原始图像加上链接，并施加JS特效而形成的特殊效果。,3多媒体,选择已经制作好的Flash动画,3.1插Flash动画（1）插入Flash动画点击（2）设置Flash动画的属性选中Flash动画后，在【属性】面板即可进行设置。,3多媒体3.2插入Flash按钮（1）插入Flash按钮点击,设置要制作的Flash按钮的属性,提示：Flash按钮也是一个Flash动画，其实本操作是通过DW定做一个Flash按钮动画，然后将此动画再插入到网页中，此功能可以为不会使用Flash,制作工具的人的提供便利。效果图说明：【另存为】是设置制作的Flash按钮的存放路径，整个路径不能有中文。（2）设置Flash按钮的属性选中Flash按钮后，在【属性】面板即可进行设置。,3多媒体3.3插入Flash文本（1）插入Flash文本,点击效果图说明【另存为】是设置制作的Flash按钮的存放路径，整个路径不能有中文；【颜色】：设置文本的颜色；【转滚颜色】：设置鼠标停留在文本上的颜色；【显示字体】：勾上则在【文本】输入框中显示相应的字体。（2）设置Flash文本的属性选中Flash文本后，在【属性】面板即可进行设置，设置界面与Flash按钮相同，这里省略。,设置要制作的,Flash文本的属性,提示：Flash文本也是一个Flash动画，而且一些参数可以传入进去，不是绑定到Flash中。,（2）设置FlashPaper的属性（与Flash相同，略）,3多媒体3.4插入FlashPaperFlashPaper是Adobe推出的一种浏览其它文档（包括PDF、OFFICE等）的特殊的Flash，它可以对文档进行自由的缩放、打印和翻页等操作，对文档的传播非常有好处。百度文库、豆丁网等都是通过FlashPaper来分享文档的。,点击,（1）插入FlashPaper文档插入之前，我们需要先制作好FlashPaper文档。利用PlashPaper制作工具即可完成。,效果图,选择FlashPaper,3.5插入Flash视频,3多媒体,过去的Flash视频:视频文件和Flash捆绑成一个文件；如今的Flash视频：视频文件和Flash（用于视频控制界面和控制，即：容器分离；可应用到Flash中视频，主要分为两类：FLV视频和流媒体视频（如RMVB）。,（1）FLV是FLASHVIDEO的简称，是随着Flash的推出发展而来的视频格式，文件后缀名为.flv。由于它形成的文件极小、加载速度极快，使得网络观看视频文件成为可能，它的出现有效解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等缺点。目前很多线视频网站均采用此视频格式：如新浪播客、六间房、56、优酷、土豆、酷6等。,（2）RMVB的前身为RM格式，它们是RealNetworks公司所制定的音频视频压缩规范，文件后缀名为.rmvb或.rm。借助rmtp协议，RMVB已经形成了一种高效的流媒体技术，实现了在低速率网络上进行影像数据实时传送和播放。目前有第一放映室等网站采用此种视频和Flash结合。,3多媒体,插入FLV视频的效果（注,意：需要通过网址来访问才可见效果，直接预览看,不到效果。）3.6插入Flash视频点击插入FlV视频插入流媒体视频，需要有流媒体服务器，如FlashMediaServer等,3.7插入音频/视频,3多媒体,网页上播放的音乐或影片等媒体文件，并不是依靠浏览器本身播放的，而是依靠浏览者电脑所安装的播放程序，所以浏览者电脑必须事先安装有相应的播放程序才能正常浏览带有音乐或影片的网页。插入音频和视频的方法一样，具体如下：,提示：插入的音频和视频界面都是默认的3232的大小，我们可以选中该音频或视频，在【属性】面板进行设置。,点击,选择要插入的,音频或视频,3.8插入网页背景音乐,3多媒体,由于目前背景音乐在HTML中还未能形成一个标准，所以DW中并没有提供插入背景音乐的按钮。但是，我们可以在【代码】视图中使用标签进行手工添加，但只适用于IE。插入的背景音乐不会在文档中显示任何标记，只有在浏览器浏览网页时才会播放背景音乐。标签的常用属性如下：,src：设定背景音乐文件的路径，可以是相对或绝对路径；balance:设定左右声道音量的平衡值(-10000+10000)，一般设为0；,volume:设定音量大小（-100000），0为最大声；delay:播放多次时，设定循环播放间的延时时间，单位为毫秒；,loop：设定循环播放的次数，loop为2表示循环播放两次，1表示无限次循环播放。,4超链接4.1超链接的简介,超链接的链接对象大多数都是URL（链接路径），但也有例外（如空链接、E-mail链接、脚本链接）,超链接是网页中重要组成部分，利用它不仅可以链接到其他网页，还可以链接到其他图像文件、多媒体文件及下载程序，也可以利用它在网页内部进行链接或是发送E-mail等。在Dreamweaver中，可以将文档中的任何文字及任意位置的图片设置为超链接。超链接分类：按照链接路径的不同，网页中超链接一般分为:内部链接，锚点链接和外部链接。按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像链接，E-mail链接，文件链接，空链接，脚本链接等。在网页中，最常用的链接对象是链接路径。链接路径分为绝对路径和相对路径。绝对路径是一个完整的路径地址，如：,相对路径的用法,要链接的文件与当前文档处于同一个文件夹中，只需输入文件名。要链接的文件位于当前文档所在文件夹的子文件夹中，提供子文件夹名，然后是一正斜线（/）和文件名。要链接的文件位于当前文档所在文件夹的父文件夹中，文件名前加./（其中“.”表示“文件夹分层结构中的上一级文件夹”）,4超链接4.2创建普通超链接,点击,绝对路径,效果图,相对路径选择相对于Untitled1.html这个网页,创建文本链接,4.2创建普通超链接,4超链接,目标属性（target）的四个值：（1）_blank：在新窗口打开链接；,（2）_self：在原窗口打开链接；（默认值）,（3）_top:在整个窗口中打开链接，在有框架的页面中才有,效果，否则效果和_self看到的一样；,（4）_parent：在父框架中打开链接，如果含有该链接的框,架不是嵌套的，则效果_top。,说明：图像超链接本质就是将的元素内容由文本替换为图像而已，我们可以直接选中图像后，在【属性】面板中对【链接】和【目标】两栏进行设置就可以为图像设置超链接了。,4超链接4.3创建锚点链接（书签链接）它用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，让链接对象更加精准、细粒度化，便于浏览者查看网页内容。第一步：在需要链接到的位置处创建命名锚点,点击,设置锚点名字,代码,第二步：链接到的刚创建的命名锚点创建一个普通的超链接，将【链接】文本框的值设置为：#+刚才创建的锚点名称（#to_logo）就可以了。,4超链接4.4创建E-mail链接/空链接/脚本链接（1）E-mail链接：是指链接对象是一个E-mail地址的链接,点击,代码,设置Email链接的属性,我的邮箱（2）空链接：是指链接对象是一个#的链接。有的时候，链接对象还未确定，又想让元素显示为链接时，可以使用它。当点击空链接时，某些浏览器可能会跳到页面的顶部。（2）脚本链接：是指链接对象是一段JavaScript脚本或一个JavaScript函数名的链接。使用这种链接，我们可以调用一段JS脚本，以实现某些特殊效果。,点击链接后的弹出窗口,4.5创建图像热点链接,4超链接,如果只想给图像的某些区域添加链接，点击不同的区域可以打开不同的链接，这样的链接就叫做图像热点链接，图像的带链接的区域就称为热点。选中要创建图像热点链接的图像，在【属性】面板的如下区域进行设置：,创建图像热点链接的工具,以上四个按钮从左到右，分别为如下工具：选择工具：可以对热点区域进行选择和调整；矩形工具按钮:绘制一个矩形的热点区域；圆形工具按钮:绘制一个圆形的热点区域；,多边形工具按钮:绘制一个不规则多边形的热点区域。,4超链接