PDF《第3章》

第3章图片学习目标 本章主要是理解网络图片的概念、 掌握如何在 HTML中插入图片、 设置图片的绝对路 径和相对路径等基本知识, 熟悉图文混合排版的方法.

核心要点 两种常用的路径. 网络图片的基本格式. 插入图片的标签<

i m g >

. 图文混排.

3 .

1 文件路径HTML超文本标签语言能够利用 UR L, 将不同格式、 不同属性、 不同位置的各种网络 资源, 用统一的方式互相链接起来.常见的文件路径有两种:一种是绝对路径, 另一种是相 对路径, 下面分别来介绍. 3. 1.

1 绝对路径 绝对路径是指带域名文件的完整路径.一个完整的绝对路径包括以下几个部分: ? 一个传输协议( 如HT T P协议) ;

? 网络域名或者服务器I P地址;

? 网站结构的目录树;

? 文件名( 文本、 图片、 音频和视频等) . 这些部分就构成了一个完整的绝对路径, 例如: h t t p : / / www. n e u s o f t . e d u . c n / n e w s /

2 0

1 1 /

0 8

0 1 / a r t i c l e _

3 4

3 9. h t m l . 3. 1.

2 相对路径 相对路径这个概念, 在网页制作中经常遇到, 例如超链接、 图片、 背景音乐、 C S S文件、 J S 文件和数据库等, 都要用到相对路径. 什么是相对路径? 相对路径就是指由这个文件所在的位置引起的跟其他文件( 或文件 夹) 的路径关系, 也就是自己相对于目标的位置. 网页设计与制作实例教程( 第2版)

3 0 【 实例3 -

1 】 【 实例描述】 目前在本地硬盘有这样的一个文件结构, 具体介绍和展示如图3 - 1所示. 图3 -

1 示例的文件结构 一个网页3 - 1. h t m l :需要浏览的网页. 一幅图片h e a r t . j p g :心的图片. 一个文件夹i m a g e :里面有一幅花的图片f . j p g . 图3 - 2是在页面中插入两幅图片后的显示效果, 注意区分两种路径的不同. 图3 -

2 在网页中插入图片 【 实例分析】 在文本编辑器中输入如下代码. h t m l h e a d t i t l e 相对路径 / t i t l e / h e a d b o d y i m gs r c = h e a r t . j p g / 这是心的图片 i m gs r c = i m a g e / f . j p g / 这是那幅花的图片 / b o d y / h t m l 【 实例说明】 通过代码发现, 两张图片的路径不相同: (

1 )对于心的图片h e a r t . j p g , 直接写名字即可, 因为这张图片和网页文件3 - 1. h t m l放 在一起, 同处一个文件夹内. (

2 )对于花的图片f . j p g , 则需要先写文件夹的名字i m a g e , 然后再写图片名称.因为相

3 1 第3章图片对于网页3 - 1. h t m l来说, 需要先进入i m a g e文件夹, 然后才能看见花的图片.路径真实地 反映了两个文件的存储位置. 总结归纳起来, 对于各种相对路径主要有三种情况. (

1 )当前目录: s r c = * *. j p g 如果源文件和引用文件在同一个目录里, 直接写引用文件名即可, * *代表图片的名称. (

2 )下级目录: s r c = * */* *. j p g 引用下级目录中的文件, 直接写下级目录文件的路径即可, 其中* *代表具体的文件名 或者目录名. (

3 )当前目录上一层: s r c = . . /* *. j p g . . / 表示源文件所在目录的上一级目录, . . /. . /表示源文件当前目录的上上级目录, 以 此类推. 【 知识拓展】 现实中的网页都是先在本地计算机制作完成, 然后上传到 W e b服务器.而本地计算机 和服务器的目录结构是不一样的, 如果使用绝对路径, 浏览器就会找不到被引用的文件, 而 使用相对路径就不会出现这种问题. 在做网页的过程中使用到任何资源, 都要先复制到网页专用的文件夹中, 然后使用相对 路径进行链接, 路径中不能出现包含驱动器盘符的地址( 如 D: \我的文件 ) , 也不能出现 中文. 图3 -