Web程序设计精品教学课件：chapter-06.pptVIP

Web程序设计——前端和后端开发 第 章 6 第6章 建立和使用列表 6.1 超链接概述 6.2 超链接的路径 6.3 超链接的建立 6.4 设置图像映射 6.5 小实例——超链接的使用 6.6 习题 6.1 超链接概述 链接在网页制作中是一个必不可少的部分，在浏览网页时，单击一张图片或者一段文字就可以弹出一个新的网页，这些功能都是通过超链接来实现的，在HTML文件中，超链接的建立是很简单的，但是掌握超链接的原理对网页的制作是至关重要的。在学习超链接之前，需要先了解一下“URL”，所谓URL（Uniform Resource Locator）指统一资源定位符，通常包括三个部分：协议代码、主机地址、具体的文件名。 6.2 超链接的路径 6.2.1 设置绝对路径 6.2.2 设置相对路径 6.2.3 设置要路径 6.2.1 设置绝对路径 绝对路径指文件的完整路径，包括文件传输的协议http、ftp等，一般用于网站的外部链接，例如： 60 6.2.2 设置相对路径 表6-1 相对路径使用方法 6.2.3 设置根路径 根路径的设置也适合内部链接的建立，一般情况下不使用根路径。根路径的使用很简单，以“/”开头，后面紧跟文件路径，例如：/download/index.html 6.3 超链接的建立 6.3.1 插入内部链接 6.3.2 插入外部链接 6.3.1 插入内部链接 基本语法 a href＝”URL”链接内容/a 6.3.1 插入内部链接 语法说明 在HTML文件中，需要使用内部超链接时，插入成对的标记将href属性的URL值设置为相对路径。 6.3.1 插入内部链接 实例代码 6.3.1 插入内部链接 网页效果 6.3.2 插入外部链接 基本语法 a href＝”URL”链接内容/a 6.3.2 插入外部链接 语法说明 在HTML文件中，需要使用外部超链接时，插入成对的标记并将href属性的URL值设置为绝对路径。 6.3.2 插入外部链接 实例代码 6.3.2 插入外部链接 网页效果 6.4 设置图像映射 基本语法 img src=”URL” usemap=””/img map name＝”” area shape=”” cords=” , , , ” href＝”URL” /map 6.4 设置图像映射 语法说明 ? img标记表示插入图像文件，src表示插入图像的路径； ? map标记表示插入图像映射； ? area标记表示图像映射区域； ? rhape属性表示映射区域形状： ? “rect”表示矩形区域； ? “circle”表示椭圆形区域； ? “poly”表示多边形区域； ? cords表示感应区域的坐标。 6.4 设置图像映射 实例代码 6.4 设置图像映射 网页效果 6.5 小实例——超链接的使用 实例代码 6.5 小实例——超链接的使用 接上页 6.5 小实例——超链接的使用 网页效果 6.5 小实例——超链接的使用 接上页 Web程序设计——前端和后端开发 第 章 6