商务网页第5课.pptVIP

3.3 图像设置方法 网页中，文本是直接存放在（写进）网页源文件中的，图像、多媒体等文档则不能直接存放在网页源文件中，需要以独立文件行形式存储，通过标签来引用。 3.3.1 图像文件的存储管理 网站通常有很多图像文件，需要对这些图像文件进行有效的管理。一是起好文件名称。文件名称应当有助于理解图片内容，言简意赅。二是规划好图像文件存储目录。图像文件应当独立保存在一个目录下，与网站文件整体存储目录结构保持一致。 优点： 一是利于模块化设计。每个模块的功能相对独立，其关联的文件也能集中存放在一起，可以独立进行模块化设计制作。 二是利于团队协作。大型网站往往需要一个团队共同制作，这种模块化、结构化的目录体系使得团队沟通协调更高效、模块组合、集成更高效。 三是利于后期运维。模块化、结构化的文件存储目录，利于后期网站运维，提高运维效率。 3.3.2 图像引用 在网页中引用图像，很多时候都是指在网页中嵌入图像，在生成网页时直接将图像嵌入在网页中，作为该网页的组成部分一同显示。也有其他使用图像的场景（如在新窗口打开图像、下载图像等），本节所说的引用图像，都是指嵌入图像。 嵌入图像必须知道图像的存储路径，必须保证引用图像文件的路径是正确的，否则会造成图像引用失败无法正常显示。 在HTML中，引用文件（包括图像文件）的路径包括绝对路径和相对路径两种方式。 绝对路径是指文件存储在计算机存储目录下的绝对位置，也就是直接到达目标的位置，通常是从盘符开始的路径； 相对路径是指从当前位置到达目标文件的路径，是相对于当前位置而言的。 例如：图像文件“logo.jpg”存储在D盘中school路径下的wuliu子路径下，则其绝对路径为“D:/school/wuliu/logo.jpg”。 如果当前路径为“D:/school”，则引用“logo.jpg”的相对路径为“wuliu/logo.jpg”； 如果当前路径为“D:”，则引用“logo.jpg”的相对路径为：“school/wuliu/logo.jpg”； 如果当前路径为“D:/school/wuliu”，则引用“logo.jpg”的相对路径为：“logo.jpg”。 引用文件通常都使用相对路径，利于模块化设计和源文件迁移（例如：更换开发机器、发布网站等都会引起源文件的位置迁移）。引用本网站之外的文件，才需要考虑绝对路径方式。 在HTML中引用文件时，使用“/”符号表示路径，有的系统和语言使用“\”表示路径。 1．相对路径引用 在HTML中，当前目录用“./”表示。如果省略路径，也指当前路径，与使用“./”效果相同；上级路径用“../”表示，再上级路径用“../../”表示，以此类推；下级路径用“./路径名/图像实例文件名”表示，再下级路径同样也要写清楚路径名称，如“./下一级路径名称/下二级路径名称/图像实例文件名称”，以此类推。 如何判断当前路径？以当前网页源文件所在路径位置为当前路径。 （1）引用当前目录下的文件，引用方法为 img src=图像实例文件名 / 或 img src=./图像实例文件名 / 其中，“./”表示当前路径。如果未指明“./”也表示从当前路径开始。 html head title当前路径/title /head body h1 align= center图像引用示例/h1 font color=black face=宋体 size=5 这是云之雷企业Logo /font br img src=sdlogo.png/ img src=./sdlogo.png/ /body /html （2）引用下级目录下的图像文件，需要直接标明下级目录，引用方法为 img src=images/图像实例文件名 / 或 img src=./images/图像实例文件名 / 其中，“images”是下级目录的名称，在实际引用图像时应当根据实际的目录名称来写。 html head title下级路径/title /head body h1 align= center 图像引用示例 /h1 img src=book/book1.jpg/ img src=./book/book3.jpg/ /body /html （3）引用上级目录下的图像文件，引用方法为 img src=../图像实例文件名 / 其中，“../”表示上级路径，“../../”表示上两级路径，以此类推。 html head title上级路径/