网页设计基础3.pptVIP

第三讲 添加图片元素 复习-找错误 单行型标签vs.区块型标签 小游戏－猜猜它是谁？ 插入图片的标签 图片的路径 1、绝对路径 图片的路径 2、相对路径 网页中的插入图片要求使用相对路径 虽然使用相对路径能插入电脑上任意图片，但将图片散落在各个文件夹内不便于相对路径的书写 所以，图片一般存放在固定的位置 站点的组织 标签 img的扩展属性 Length －控制图片的高度 width－控制图片的宽度 锚点链接 制作锚点 a name=“锚点名”… …/a 制作链接 a href=“#锚点名” /… … /a 课后作业 一、把以下标签抄写在作业本上，解释其含义（功能）： 1,img src=“” length=“” width=“” / 2,a name=“ ” … … /a 3, a href=“# ” … … /a 课后作业 二、分别写出以下三中情况下,在index.html中插入图片flower.jpg的写法(提示:使用相对路径) 上机作业 见课程网站 html head title销售排行/titel body h2江村经济/h3 img href=“book.jpg” p解放前长江中下游流域农民生活状况的调查报告，br王小波推荐为q国内最好看的书。/p /q ul li调查区域 li家 li亲属关系的扩展 li生活/em ol /body /head 单行型标签 区块型标签 每对标签内的文字不会独立地成为一个段落，而是“随波逐流”般地跟随在之前的文本后面显示。 每对标签内的文字可以独立地成为一个自然段落，在网页上占有一个区块。 例如: q 例如: blockquote 描述 名称 单行型or 区块型 标示一号标题 h1 两个页面间的链接 a 强调文本内容 em 标示一个无序的列表 ul 分行 br 列表内的单个项目 li 标示图片 img 段落内的引用 q 整段的引用 blockquote 测试一下! 单行型 单行型 单行型 单行型 区块型 区块型 区块型 区块型 区块型 属性值(图片的路径) 空格 图片在计算机上存放的位置 img src=“file:///H|/网页设计与制作/example/garden/baihe.jpg” / H:\网页设计与制作\example\garden\baihe.jpg 使用绝对路径的方式可以插入电脑上任意图片 图片相对与被引用页面的位置 img src=“baihe.jpg” / E.g. 想在 index.html 中插入图片 baihe.jpg 使用相对路径的方式也可以插入电脑上任意图片吗？ 1、图片与被引用页面位于同一目录 相对路径＝图片名 img src=“baihe.jpg” / 2、图片位于被引用页面的下级目录 img src=“pic/baihe.jpg” / Index.html yueji.jpg baihe.jpg pic 相对路径＝ 去往图片目录＋图片名 3、图片位于被引用页面的上级目录 相对路径＝ 回到图片同级目录＋图片名 img src=“../baihe.jpg” / intro.html Index.html baihe.jpg myweb yueji.jpg ../ 表示回到上一级目录 Index.html yueji.jpg baihe.jpg pic flower overall.jpg pets puppy.jpg kitty.jpg 站点结构如图： index.html 中插入图片 kitty.jpg 请用相对路径的方法写出该img 标签 img src=“pic/pets/kitty.jpg ” / 站点结构如图： index.html 中插入图片 yueji.jpg 请用相对路径的方法写出该img 标签 intro.html Index.html baihe.jpg study yueji.jpg myweb notes garden img img src=“../../img/yueji.jpg” / 使用相对路径的方式也可以插入电脑上任意图片吗？ 文件夹 myweb index.html 文件夹 image 文件夹 thumbnail 图片存放在与 index.html 同级的文件夹 image 里 网站的所有内容（网页，图片，样式表，代码）均存放在站点文件夹my web内 图片缩略图存放在与 index.html 同级的文件夹 thumbnail 里 img src=“pic/baihe.jpg” length=“200px” width=“200px” / 200px 400px 超链接 锚点链接 实现网页与网页之间的链接关系 实现一个网页内部对象与对象的链接关系 例 Index.ht