商务网页设计与制作（第2版）课件 第4课 图像设置方法_第1页
商务网页设计与制作（第2版）课件 第4课 图像设置方法_第2页
商务网页设计与制作（第2版）课件 第4课 图像设置方法_第3页
商务网页设计与制作（第2版）课件 第4课 图像设置方法_第4页
商务网页设计与制作（第2版）课件 第4课 图像设置方法_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第3章 HTML网页制作技术3.4图像设置方法3.4.1图像文件的存储管理3.4.2图像引用3.4图像设置方法网页中，文本是直接存放在（写进）网页源文件中的，图像、多媒体等文档则不能直接存放在网页源文件中，需要以独立文件行形式存储，通过标签来引用。3.4.1图像文件的存储管理网站通常有很多图像文件，需要对这些图像文件进行有效的管理。一是起好文件名称。文件名称应当有助于理解图片内容，言简意赅。二是规划好图像文件存储目录。图像文件应当独立保存在一个目录下，与网站文件整体存储目录结构保持一致。优点：一是利于模块化设计。每个模块的功能相对独立，其关联的文件也能集中存放在一起，可以独立进行模块化设计制作。二是利于团队协作。大型网站往往需要一个团队共同制作，这种模块化、结构化的目录体系使得团队沟通协调更高效、模块组合、集成更高效。三是利于后期运维。模块化、结构化的文件存储目录，利于后期网站运维，提高运维效率。3.4.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中，当前目录用“./”表示。如果省略路径，也指当前路径，与使用“./”效果相同；上级路径用“../”表示，再上级路径用“../../”表示，以此类推；下级路径用“./路径名/图像实例文件名”表示，再下级路径同样也要写清楚路径名称，如“./下一级路径名称/下二级路径名称/图像实例文件名称”，以此类推。如何判断当前路径？以当前网页源文件所在路径位置为当前路径。<html><head><title>当前路径</title></head><body><h1align="center">图像引用示例</h1><fontcolor="black"face="宋体"size=5>

这是云之雷企业Logo</font><br><imgsrc="sdlogo.png"/><imgsrc="./sdlogo.png"/></body></html>（1）引用当前目录下的文件，引用方法为

<imgsrc="图像实例文件名"/>或<imgsrc="./图像实例文件名"/>其中，“./”表示当前路径。如果未指明“./”也表示从当前路径开始。<html><head><title>下级路径</title></head><body><h1align="center">

图像引用示例

</h1><imgsrc="book/book1.jpg"/><imgsrc="./book/book3.jpg"/></body></html>（2）引用下级目录下的图像文件，需要直接标明下级目录，引用方法为<imgsrc="images/图像实例文件名"/>或<imgsrc="./images/图像实例文件名"/>其中，“images”是下级目录的名称，在实际引用图像时应当根据实际的目录名称来写。<html><head><title>上级路径</title></head><body><h1align="center">图像引用示例</h1><imgsrc="../computer2.jpg"/></body></html>（3）引用上级目录下的图像文件，引用方法为<imgsrc="../图像实例文件名"/>其中，“../”表示上级路径，“../../”表示上两级路径，以此类推。（4）引用上两级目录下的子目录images中的文件，引用方法为<imgsrc="../../images/图像实例文件名"/>2．绝对路径引用引用绝对路径方式不提倡使用，除非是必须使用绝对路径的场景。引用绝对路径的方法为<imgsrc="绝对路径/图像实例文件名"/>其中，src的路径必须为完整的储存路径。假定banji.jpg文件存储在D:/school/class路径下，则引用该图像绝对路径的代码为<imgsrc="file://D:/school/class/banji.jpg"/>其中，“file://”为目标机器地址，本例中为本客户机的地址，故采用“file://”形式表示，如果为互联网地址，可以表示为“”“11”等。以上我们介绍了几种文件引用的方法，引用文件必须表达好文件路径和文件名称。为了简化书写表达，本教材中后面凡是提到“文件名”的，均指包括了引用该文件的路径和名称，即“引用路径+文件名”。课堂练习：在D盘上建立tree1\tree2\tree3路径，分别在tree1、tree2、tree3路径下存放pic1.jpg、pic2.jpg、pic3.jpg图像文件（图像可从互联网上获取，另存为相应的文件名即可）。1.编写网页源文件web1.html，保存在tree2路径下，采用相对路径引用的方式，分别引用pic1.jpg、pic2.jpg、pic3.jpg。2.编写网页源文

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论