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

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第4讲-Dreamweaver中网页元素的插入与运用,本节重点,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 插入,FlashPaper,FlashPaper是Adobe推出的一种,浏览其它文档,（包括PDF、,OFFICE等）的,特殊,的Flash，它可以对文档进行自由的,缩放,、,打印,和,翻页,等操作，对文档的传播非常有好处。,百度文库,、,豆,丁网,等都是通过FlashPaper来分享文档的。,点击,（1）,插入,FlashPaper文档,插入之前，我们需要先制作好FlashPaper文档。,利用,PlashPaper制作工具,即可完成。,效果图,选择,FlashPaper,3.5 插入,Flash视频,3,多媒体,过去,的Flash视频:视频文件和Flash捆绑成,一个文件,；,如今,的,Flash视频：视频文件和Flash（用于,视频控制,界面和控制，即：,容器,分离,；可,应用,到Flash中视频，主要分为两类：,FLV视频,和,流媒体视频,（如RMVB）。,（1）FLV是FLASH VIDEO的简称，是随着,Flash,的推出发展而来,的,视频格式,，文件后缀名为,.flv,。由于它形成的,文件极小,、,加载速,度极快,，使得,网络观看,视频文件成为,可能,，它的出现,有效解决,了,视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络,上很好的使用等缺点。目前很多线视频网站均采用此视频格式：,如新浪播客、六间房、56、优酷、土豆、酷6等。,（2）RMVB的前身为RM格式，它们是,Real Networks,公司所制,定的,音频视频压缩,规范，文件后缀名为.rmvb或.rm。借助rmtp,协议，RMVB已经形成了一种高效的,流媒体技术,，实现了在,低速,率网络,上进行影像数据,实时,传送和播放。目前有,第一放映室,等,网站采用此种视频和Flash结合。,3,多媒体,插入,FLV视频,的效,果（,注,意,：需要通过,网址,来访问,才可见效果，直接预览看,不到效果。）,3.6 插入,Flash视频,点击,插入,FlV,视频,插入,流媒体视频，,需要有,流媒体服务,器,，如,Flash,M,ediaServer,等,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 创建,普通超链接,点击,绝对路径,效果图,相对路径,选择,相对于,Untitle,d,1.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,超链接,距形,热点,圆形,热点,多边形热点,用,选择工具,选中,相应的,热点区,域,后，即可在【,属性,】面板设,置它的,链接地址,等信息,4.6 创建,图像热点,链接,上图的HTML代码：,标签为图像,定义热点区域,；,定义热点区域的,坐标及链接,图像左上角,的,坐标,是,（0,0）,4,超链接,4.6 创建,图像热点链接,关于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按钮组成导航菜单。（,第一次作业，完成时间一个星期,）,此课件下载可自行编辑修改，仅供参考！感谢您的支持，我们努力做得更好！谢谢,