资源预览内容
第1页 / 共30页
第2页 / 共30页
第3页 / 共30页
第4页 / 共30页
第5页 / 共30页
第6页 / 共30页
第7页 / 共30页
第8页 / 共30页
第9页 / 共30页
第10页 / 共30页
亲,该文档总共30页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
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制作工具即可完成。效果图选择FlashPaper3.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 Media Server等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链接, 文件链接,空链接,脚本链接等。 在网页中,最常用的链接对象是链接路径。链接路径分为绝对 路径和相对路径。绝对路径是一个完整的路径地址,如: http:/www.zcib.edu.cn/index.aspx ;相对路径是指该文件 相对于某一参照物的路径地址,在网页中,我们使用.表示上一 级目录,如./index.html 是个相对路径。相对路径的用法要链接的文件与当前文档处于同一个文件夹中,只需输入文件 名。 要链接的文件位于当前文档所在文件夹的子文件夹中,提供子 文件夹名,然后是一正斜线(/)和文件名。 要链接的文件位于当前文档所在文件夹的父文件夹中,文件名 前加./(其中“.”表示“文件夹分层结构中的上一级文件夹”)4 超链接4.2 创建普通超链接点击绝对路径效果图相对路径 选择相对于Untitled 1.html这个网页创建文本链接4.2 创建普通超链接4 超链接目标属性(target)的四个值:(1)_blank:在新窗口打开链接;(2)_self:在原窗口打开链接;(默认值)(3 )_top:在整个窗口中打开链接,在有框架的页面中才有 效果,否则效果和_self看到的一样;(4)_parent:在父框架中打开链接,如果含有该链接的框 架不是嵌套的,则效果_top。说明:图像超链接本质就是将的元素内容由文本替换为图 像而已,我们可以直接选中图像后,在【属性】面板中对【链 接】和【目标】两栏进行设置就可以为图像设置超
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号