模块二网页排版技术 单元3：多媒体元素的应用 一、简单个人网页分析 ◆◆Cfile://C/tes对2de城= 欢迎光临我的个人网站 血我组【联还方式1动通置|的历 自我介烟： ·姓省：强 ·工作地连，西川临广光市 联系方式： 2② 1.00213T671212 2 地，西川广元市 动通秋菊： 图2-3-】简单个人网页效果图 问题1：该网页和上节课的网页有什么不同？ ·上次课示例网页只有文字 ·本节课示例中网页不仅有文字还有图像和动画等多媒体元素的应 用。 问题2：网页中图像运用的格式是说明
模块二 网页排版技术 单元 3：多媒体元素的应用 一、简单个人网页分析 图 2-3-1 简单个人网页效果图 问题 1：该网页和上节课的网页有什么不同？ • 上次课示例网页只有文字 • 本节课示例中网页不仅有文字还有图像和动画等多媒体元素的应 用。 问题 2：网页中图像运用的格式是说明
问题3：网页中图像的嵌入方式是什么？是把图像变成代码怅套在网 页中呢？还是做一个图像链接，从而保证网页能把对应位置的图像显示 出来？如果是后者，网页中图像的路径应该如何确定。 问题4：这些元素是如何应用到网页中的呢？ 二、网页中图像的应用 l.Dreamweaver中图像的应用 网页中最引人入胜的莫过于那丰富多彩的图像了。成功的站点 中不能没有均丽的图像，否则便使测览者觉得索然无味。 在示例网页中插入了我的照片，其操作步骤如下： (1)光标定位在“一、自我介绍文字上方，点击常用插入栏中 的“图象"按钮，如图如下： Dw 0年 资计号， 文件月高端日查看M面入0停数M格O)命令(9站点9 空口M标我 Untitled-1html x web0203 6G. Ctrl+E ADtc列t率理缩 代码折分■设计 图像0 Ctrl+Alt+I 标题：无利 图像对客(G句 ◆8个地址：1 1l习国 率体M南 表格 Ctrl+Alt+T 表格对象A 站 布周对象的 表单门 超级性接（列 0““444“*““444“ 电子想件鞋培0 小4444“4“4444“4“44 布名墙记0 Ctrl+AR+A 名： 清构 Arm
问题 3：网页中图像的嵌入方式是什么？是把图像变成代码嵌套在网 页中呢？还是做一个图像链接，从而保证网页能把对应位置的图像显示 出来？如果是后者，网页中图像的路径应该如何确定。 问题 4：这些元素是如何应用到网页中的呢？ 二、网页中图像的应用 1.Dreamweaver 中图像的应用 网页中最引人入胜的莫过于那丰富多彩的图像了。成功的站点 中不能没有绚丽的图像，否则便使测览者觉得索然无味。 在示例网页中插入了我的照片，其操作步骤如下： （1）光标定位在“一、自我介绍”文字上方，点击常用插入栏中 的“图象(I)”按钮，如图如下：
图2-3-2 (2)在弹出的对话框中选择“我的照片”，如图23-3所示。 图中】区域选择显示了插入的图像名称及即网页中常用图像的 格式。 网页中图像基本格式： 图像在网页中具有画龙点睛的作用，它能装饰网页，表达个人 的情调和风格。但在网页上加入的图片越多，浏览的速度就会受到影响 导致用户失去耐心面离开页而。网页中使用的图像可以是GF、PEG、 BMP、TIFF、PNG等格式的图像文件，其中使用最广泛主要是GF和 JPEG两种格式. GIF格式是由Compuserve公司提出的与设备无关的图像存储标 准，也是Wb上使用最早、应用最广泛的图像格式，GF是通过减少组 成图像每个象素的储存位数和LZH压缩存储技术来减少图像文件的大 小。DIF格式最多只能是256色的图像。GF具有图像文件短小、下载 速度快、低颜色数下GF比JPEG装载的更快、可用许多具有同样大小 的图像文件组成动画，在GF图像中可指定透明区域，使图像具有非同 一般的显示效果。 JPEG格式是在目前Internet中最受欢迎的图像格式，JPEG可 支持多达16M颜色，它能展现十分丰富生动的图像，还能压缩。但压
图 2-3-2 （2）在弹出的对话框中选择“我的照片”，如图 2-3-3 所示。 图中 1 区域选择显示了插入的图像名称及即网页中常用图像的 格式。 网页中图像基本格式： 图像在网页中具有画龙点睛的作用，它能装饰网页，表达个人 的情调和风格。但在网页上加入的图片越多，浏览的速度就会受到影响 导致用户失去耐心而离开页面。网页中使用的图像可以是 GIF、JPEG、 BMP、TIFF、PNG 等格式的图像文件，其中使用最广泛主要是 GIF 和 JPEG 两种格式。 GIF 格式是由 Compuserve 公司提出的与设备无关的图像存储标 准，也是 Web 上使用最早、应用最广泛的图像格式，GIF 是通过减少组 成图像每个象素的储存位数和 LZH 压缩存储技术来减少图像文件的大 小。DIF 格式最多只能是 256 色的图像。GIF 具有图像文件短小、下载 速度快、低颜色数下 GIF 比 JPEG 装载的更快、可用许多具有同样大小 的图像文件组成动画，在 GIF 图像中可指定透明区域，使图像具有非同 一般的显示效果。 JPEG 格式是在目前 Internet 中最受欢迎的图像格式，JPEG 可 支持多达 16M 颜色，它能展现十分丰富生动的图像，还能压缩。但压
缩方式是以损失图像质量为代价，压缩比越高图像质量损失越大，图像 文件也就越小。流行的Windows支持的位图BMP格式的图像一般情况 下，同一图像的BMP格式的大小是PEG格式的5至10倍。而GF格 式最多只能是256色，因此载入256色以上图像的PEG格式成了Intemet 中最受欢迎的图像格式。 当网页中需要载入一个较大的GF或PEG图像文件时，装载 速度会很慢。为改善网页的视觉效果，可在载入时设置为隔行扫描，隔 行扫描在显示图像开始看起来非常模糊，接着细节逐渐添加上去直到图 像完全显示出米。 图像的2区域显示了图像相对于当前文档的路径，即相对路 径 网页中路径的路径的概念： 平时使用计算机时，要找到需要的文件，就必须知道文件的位置， 而表示文件的位置的方式就是路径。例如：“DWcb/Pic2008.gi”就表示 在D盘Wb文件夹内有一个名称Pic2008.gif的图片，而 DWcb/Pic2008.gi"就是该图片的路径。 经常有学生对我说自己的网页中有许多图片不能正常显示，自己 的超级链接无法打开，总结其原因绝大部分都是因为使用了错误路径所 致。网页中的图像、动画等素材都有自己固定的存放位置，网页中的链
缩方式是以损失图像质量为代价，压缩比越高图像质量损失越大，图像 文件也就越小。流行的 Windows 支持的位图 BMP 格式的图像一般情况 下，同一图像的 BMP 格式的大小是 JPEG 格式的 5 至 10 倍。而 GIF 格 式最多只能是256色，因此载入256色以上图像的JPEG格式成了Internet 中最受欢迎的图像格式。 当网页中需要载入一个较大的 GIF 或 JPEG 图像文件时，装载 速度会很慢。为改善网页的视觉效果，可在载入时设置为隔行扫描。隔 行扫描在显示图像开始看起来非常模糊，接着细节逐渐添加上去直到图 像完全显示出来。 图像的 2 区域显示了图像相对于当前文档的路径， 即相对路 径。 网页中路径的路径的概念： 平时使用计算机时，要找到需要的文件，就必须知道文件的位置， 而表示文件的位置的方式就是路径。例如：“D:/Web/Pic2008.gif”就表示 在 D 盘 Web 文件夹内有一个名称 Pic2008.gif 的图片，而 “D:/Web/Pic2008.gif”就是该图片的路径。 经常有学生对我说自己的网页中有许多图片不能正常显示，自己 的超级链接无法打开，总结其原因绝大部分都是因为使用了错误路径所 致。网页中的图像、动画等素材都有自己固定的存放位置，网页中的链
接资源也都有它自己的存放位置，网页只是通过路径使用HTML语言 来调用它们，然后把它们显示在网页中。 网页中的路径可分为相对路径和绝对路径，初学网页设计的学生 往往对它们认识不够，在应该使用相对路径的地方使用了绝对路径，从 而导致浏览器无法在指定的位置打开指定的文件，导致显示不正常或无 法打开超链接等错误。 那么，什么是相对路径，什么是绝对路径呢？为什么有时候使用 了绝对路径有时就不能显示相应的内容呢？让我们一起来认识一下它 们吧 比如： D盘的Web目录img子目录下有一个pic2008 fuwa.jp%图像，那 么它的路径就是D:\Weblimg pic.20O8 fuwa.jpg,其实这种完整地描述文 件位置的路径就是绝对路径。 如网页D盘下web文件夹中有一个“index.htm”,该文件中有一张 图片pic2008 fuwa.jpg,则它们的绝对路径分别是： D:\Weblindex htm D:\Weblimglpic2008fuwa.jpg 如果在链接图片时使用了绝对路径D:\Weblimg pic2OO8fuwa.jpg: 那么在本地电脑中将一切正常，因为在D:\Web\img下的确存在 pic2008 fuwa.jpg这个图片。但我们将该网页上传到网站服务器上后，就
接资源也都有它自己的存放位置，网页只是通过路径使用 HTML 语言 来调用它们，然后把它们显示在网页中。 网页中的路径可分为相对路径和绝对路径，初学网页设计的学生 往往对它们认识不够，在应该使用相对路径的地方使用了绝对路径，从 而导致浏览器无法在指定的位置打开指定的文件，导致显示不正常或无 法打开超链接等错误。 那么，什么是相对路径，什么是绝对路径呢？为什么有时候使用 了绝对路径有时就不能显示相应的内容呢？让我们一起来认识一下它 们吧。 比如： D 盘的 Web 目录 img 子目录下有一个 pic2008fuwa.jpg 图像，那 么它的路径就是 D:\Web\img\pic2008fuwa.jpg，其实这种完整地描述文 件位置的路径就是绝对路径。 如网页 D 盘下 web 文件夹中有一个“index.htm”,该文件中有一张 图片 pic2008fuwa.jpg，则它们的绝对路径分别是: D:\Web\index.htm D:\Web\img\pic2008fuwa.jpg 如果在链接图片时使用了绝对路径 D:\Web\img\pic2008fuwa.jpg， 那么在本地电脑中将一切正常，因为在 D:\Web\img\下的确存在 pic2008fuwa.jpg 这个图片。但我们将该网页上传到网站服务器上后，就
不会正常了，因为服务器给你划分的存放空间可能在C盘其他目录中， 也可能在D盘其他目录中，总之不会那么巧的就是D:Wb。 那么图片路径应该如何设置呢？这里就必须使用相对路径了， 所谓相对路径，顾名思义就是自己相对与目标位置。在上例中 index.htm中连接的pic2O08 fuwa.jpg就可以使用img pic.2O08 iwa.jpg米 定位文件，这样不论将这些文件放到哪里，只要它们的相对关系没有变， 就不会出错。具体的链接方式是这样的：“img pic.2008 fuwa.jpg”。 如果在"D:\Weblimg"有一个文件picMore.htm”,在该文件中做 一个链接，打开D:\Weblindex.htm”,此时正确的相对路径写法为 “index.htm”,其中使用“”米表示上一级目录，“L"表示上上级的目 录，以此类推
不会正常了，因为服务器给你划分的存放空间可能在 C 盘其他目录中， 也可能在 D 盘其他目录中，总之不会那么巧的就是 D:\Web\。 那么图片路径应该如何设置呢?这里就必须使用相对路径了。 所谓相对路径，顾名思义就是自己相对与目标位置。在上例中 index.htm 中连接的 pic2008fuwa.jpg 就可以使用 img\pic2008fuwa.jpg 来 定位文件，这样不论将这些文件放到哪里，只要它们的相对关系没有变， 就不会出错。具体的链接方式是这样的:“img\pic2008fuwa.jpg”。 如果在“D:\Web\img\”有一个文件“picMore.htm”，在该文件中做 一个链接，打开“D:\Web\index.htm”，此时正确的相对路径写法为 “..\index.htm”,其中使用“..\”来表示上一级目录，“..\..\”表示上上级的目 录，以此类推
国还墨像源文件 选得文件名自：海安件楼 姑卤日景 ○静据适 站5和不务器 直找达团：业3：的 ·G净已屈- 图缘情员 020307.G5 020308.G1F 020309g1 546 m 020310.Gw 1144007JP0 indexipg 文件名) 114067.JG 110ex155221g 文件大型)：图参安许，*e年净e书种：卡甲 L 台14：//P/共章W理/4的一4/作+003/114 相干： 站5甲日条可 在站点定义申更西推愧王 话辉度件不在监减根日果下· Z指览图能 图2-3-3 (3)点击图2-33中的确定按钮，在弹出的对话框中输入替换 文本即可把图像插入到网页中，效果如图2-3-4所示
图 2-3-3 （3）点击图 2-3-3 中的确定按钮，在弹出的对话框中输入替换 文本即可把 图像插入到网页中，效果如图 2-3-4 所示
代阔特知属透置认及C样售天安恒 ◆90金地线：W见2日 包 欢迎光临我的个人网站 自我介超王式1动通置共的简历 身白我介短：●-® ·姓名，强 性：男 ·工作地项：国川省广元市 山联系方式： 1.0021316712312 图2-3-4 (4)选中图像，在下面属性面板中设置图像属性，方法如图 2-35,到此图像的插入完全结束。 l seme'tng 挂由我介妇： 。工作罐城：5满广元市 是少 4 取系方式 系 2-- 图2-35
图 2-3-4 （4）选中图像，在下面属性面板中设置图像属性，方法如图 2-3-5，到此图像的插入完全结束。 图 2-3-5
2图像标记分析 (1)点击状态选项卡，把网页切换的拆分（混合）视图模式。 选中设计视图中的我的照片”，观察对应代码视图中的HTML标签。如 图2-3-6所示。 ,欢迎光临我的个人网站 鱼进回桂4有通重西 难我分每 ▣工地制广元雨 系方式 1Q3#51中 4星室日 1:应了无为 4的基1 温收满 一器世9■一图象的属性面版。八写设置春种图像西指 口口包中 43u44 图2-3-6 (2)代码视图中对应的HTML标记为： (3)图片标记的基本语法结构如下：, 其中图像标记的属性及其取值范围如下表： 性 属性名称 取值范国 对 齐 align topmiddlelcenter|bottomlleftright 方
2.图像标记分析 （1）点击状态选项卡，把网页切换的拆分（混合）视图模式。 选中设计视图中的“我的照片”，观察对应代码视图中的 HTML 标签。如 图 2-3-6 所示。 图 2-3-6 （2）代码视图中对应的 HTML 标记为： （3）图片标记的基本语法结构如下：，其中图像标记的属性及其取值范围如下表： 属 性 属性名称 取值范围 对 齐 方 align top|middle|center|bottom|left|right
式 名 name 合法字符串 称 指 src 向 u,图片所在地址 图 片 title 标 文本，佩标放上的文字 愿 文 本 alt 文本，当图片不显示时显示的替代文字 边 border 框 高 height width 左 右 边 hspace 框 上 下 边 vspace n 框 三、网页中其他多媒体元素的应用 l.Dreamweaver中Flash动画的插入 (1)光标定位在网页需要添加f1ash动画的位置。 (2)点击常用工具栏的fash动画插入按钮。如图2-37所示
式 名 称 name 合法字符串 指 向 src url，图片所在地址 图 片 标 题 title 文本，鼠标放上的文字 文 本 alt 文本，当图片不显示时显示的替代文字 边 框 border n 高 height n 宽 width n 左 右 边 框 hspace n 上 下 边 框 vspace n … … … 三、网页中其他多媒体元素的应用 1.Dreamweaver 中 Flash 动画的插入 （1）光标定位在网页需要添加 flash 动画的位置。 （2）点击常用工具栏的 flash 动画插入按钮。如图 2-3-7 所示