第4讲 超链接、多媒体及表格,4.1 多媒体标记 4.2 框架结构 4.3 超链接标记 4.4 表格标记,学习目标,掌握各种常用多媒体标记的使用 理解框架的作用 掌握框架标记的使用 理解不支持框架标记的应用 掌握浮动框架的使用 掌握使用框架作为超链接目标的设置 掌握创建表格以及格式化表格 掌握使用嵌套表格布局网页 掌握各种超链接的设置,4.1 多媒体标记,为增强网页的功能以及动感，现在的网页一般都会加入诸如声音、动画、视频等多媒体内容。 常用多媒体标记：,1) 滚动文字设置,基本语法 滚动文字 语法说明：处在和之间的文字将以一定的速度从右向左移动，当将滚动文字换成图片时，将获得图片的滚动效果。 marquee常用属性:,1) 滚动文字设置,默认情况下，滚动文字从右向左滚动示例： 使用标记的direction属性可以修改滚动字幕的滚动方向。文字从下往上循环滚动示例： 默认情况下，滚动字幕循环地以一个方向向另外一个方向的滚动，使用标记的behavior属性可以修改滚动字幕的滚动方式。文字从右往左循环往反交替滚动示例： 字幕的滚动速度通过一个常量来表示，常量值越大，速度越快。在每次滚动结束后可以延迟一定的时间进行下一次滚动。滚动速度和滚动延迟特性可以分别通过属性scorllamount和scorlldelay进行设置示例：,1) 滚动文字设置,默认情况下，字幕将在一个与浏览器窗口等宽的白色背景颜色的区域中进行滚动，该区域的高度跟滚动方式有关。如果上下之间的滚动，默认高度是200个像素；如果左右滚动，高度则大致是滚动对象的方向。通过marquee标记的属性width和height可以改变滚动区域的大小，修改滚动区域的背景颜色使用bgcolor属性。设置字幕滚动区域与背景颜色示例： 默认情况下，字幕滚动区域与周围对象的间距为0，使用marquee标记的hspace和vspace属性可以分别设置滚动区域与周围对象的水平间距和垂直间距。示例：,滚动文字标记示例,2) 嵌入多媒体内容,在网页中可以使用标记嵌入MP3、电影等多媒体内容 基本语法 embed标记常用属性：,3) 设置背景音乐,访问者访问页面时自动播放背景音乐 基本语法 bgsound标记常用属性：,多媒体标记综合示例,框架的作用，就是把浏览器窗口划分成若干个区域，每个区域可以分别显示不同的网页。 注意：使用框架结构时，HTML文档中不能出现标记对，此时需要由代替,4.2 框架结构,框架集标记：主要是定义浏览器窗口的分割方式、各分割窗口（框架）的大小以及格式化框架边框 框架标记：定义各分割窗口中显示的内容，并能对各分割窗口进行格式化,1） 框架结构组成标记,2）框架集标记,表5-1 常用属性,框架分割窗口方式,左右（水平）分割 上下（垂直）分割 嵌套分割：浏览器窗口既存在左右分割，又存在上下分割,左右分割,基本语法 . 语法解释 cols属性决定了窗口的分割方式为左右分割；“value”定义各个框架的大小，单位可以是像素，也可以是百分比；value的个数决定了标记的个数，即窗口的个数,左右分割示例,上下分割,基本语法 . 语法解释 rows属性决定了窗口的分割方式为上下分割；“value”定义各个框架的大小，单位可以是像素，也可以是百分比；value的个数决定了标记的个数，即窗口的个数,上下分割示例,嵌套分割,基本语法 . ,嵌套分割示例,对框架边框的格式化,标记对框架边框的格式化通过设置”frameborder”、”framespacing”和”bordercolor”等属性来实现,3) 框架标记,基本语法 . 语法解释 src属性用于设置在框架窗口中显示的内容来自的文件；name属性用于标记框架名称，以便于其他对象对它的引用，如作为链接的一个目标窗口,标记基本设置示例,框架综合示例,4)不支持框架标记,一些早期版本的浏览器不支持框架。制作人员无法改变这一现象，所能做的只是显示该浏览器不支持框架技术，有些内容无法看到。这一任务可由标记来完成，当浏览器不能加载框架集文件时，会检索到标记，并显示标记中的内容,基本语法 . ,放在标记对之间的部分就是在不支持框架的浏览器中显示的内容,5) 浮动框架,浮动框架是一种特殊的框架页面，其作为HTML文档的一部分，就象图像一样出现在HTML文档中。浮动框架允许将一个HTML文档插入到另一个HTML文档内部的某个区域。 基本语法 常用属性:,浮动框架示例,框架的一个重要目的是在不同的框架中显示不同的页面，通过链接目标窗口的设置可以很容易实现这一目的 具体实现方法：将框架的框架名属性值作为超链接的target的属性值,6)框架与链接,普通框架与链接示例,浮动框架与链接示例,浏览者通过单击文本或图片对象，可以从一个页面跳到另一个页面，或从页面的一个位置跳到另一个位置，实现这样的功能的对象称之为超链接 创建超链接的条件：必须同时存在两个端点。一个是源端点；另一个是目标端点 源端点：指网页中的提供链接单击的对象， 如链接文本或链接图像 目标端点：指链接跳过去的页面或位置， 如某网页、书签等,4.2 超链接标记,1）超链接标记及常用属性,使用标记创建超链接的基本语法如下：,基本语法 源端点 语法说明： 源端点可以是文本，也可以是图片。用户在点击源端点后，页面将跳转到目标端点所指页面。,点击超链接文本后页面跳转到目标端点页面, 创建超链接 我的第一个超链接 ,创建超链接,超链接目标端点页面,1）超链接标记及常用属性,链接目标窗口示例,链接目标窗口示例,2）链接路径设置,绝对路径: 指文件的完整路径 文件相对路径：指相对于当前文件的路径 文件相对路径有以下几种：,根据超链接的目标端点来分，超链接可分为： 内部链接 外部链接 书签链接 脚本链接 文件下载链接 根据超链接的源端点来分，超链接可分为： 文本链接 图像链接 图像映射,3）超链接类型,内部链接,内部链接是指在同一个网站内部，不同网页之间的链接关系 基本语法 链接文字/图片 语法解释 通过“href”属性指定目标端点； “file_name”为要链接文件的路径，一般使用相对路径；提供给鼠标单击的内容，即源端点，既可以使用“文字”，也可以使用“图片”,外部链接,外部链接是指跳转到当前网站外部，和其他网站中的页面或其他元素之间的链接关系。 基本语法 链接文字/图片 语法解释 通过“href”属性指定目标端点； “URL”为要链接文件的路径，一般情况下，该路径需要使用绝对路径；提供给鼠标单击的内容，即源端点，既可以使用“文字”，也可以使用“图片”,链接文字,内部和外部超链接示例,书签链接,书签链接：指目标端点为网页中的某个设置了称为书签标记的位置的链接 创建书签链接步骤： 创建书签 为书签制作链接,建立书签,基本语法 文字/图片 语法解释 文字/图片中的“”表示文字或图片可有可无，书签将在光标处建立一个名为“name”属性值所规定的书签。,建立书签链接,基本语法 链接到同一页面中的书签： 链接文字 链接到其他页面中的书签: 链接文字 语法解释 “书签名”是已定义的书签名，“file_name”是要跳转到的页面路径。 书签链接示例,文件下载链接,要创建文件下载，只要在链接地址处输入文件路径即可，当用户单击链接后，浏览器会自动判断文件类型，以做出不同情况的处理，如直接打开，或弹出下载对话框供下载 可用于下载的文件类型有.doc、.Rar、.cab、.zip、.exe等,基本语法 链接文字 文件下载示例,文本链接,文本链接是指源端点为文本文字的超链接 基本语法 链接文字,图像链接,图像链接是指源端点为图像文件的超链接 基本语法 语法解释 “filename_link”为要跳转到的文件路径，“filename_img”为图像文件路径，默认情况下，图像链接会显示蓝色边框线，如果不想显示边框，应设置border=0,图像链接示例,4.3 表格标记,使用表格标记，可在网页中创建表格。表格在网页中除了作为一个显示对象以外，还有一个重要的作用就是用于排版页面内容 构成表格的主要标记,基本语法 ()() ()() , 表格基本结构 第1行中的第1个单元数据 第1行中的第2个单元数据 第2行中的第1个单元数据 第2行中的第2个单元数据 ,表格基本结构示例,表格标记示例,1) 标记,标记常用属性,默认情况下创建的表格没有边框，使用表格的border属性可以设置边框的粗细，还可以通过bordercolor属性设置边框颜色 基本语法 语法说明： 边框宽度值是一个数值，单位为像素，数值越大，边框越粗，当值为0时不显示边框。 设置表格的边框示例 10-2,设置表格的边框,设置表格的宽度和高度,默认情况下，创建的表格的宽度和高度将根据单元格中的内容自动调整。 基本语法 语法说明： 表格的宽度和高度既可以是像素值，也可以是百分比。 设置表格宽度和高度示例10-3,设置表格的对齐方式,默认情况下，创建的表格在窗口中居左对齐，使用align属性可以修改表格的对齐方式。 基本语法 语法说明： 对齐的方式有3种，left,center,right 设置表格的对齐方式示例10-4,设置表格的背景颜色,默认情况下，创建的表格的背景颜色是白色，可以通过bgcolor属性修改背景颜色为其他颜色。 基本语法 语法说明： 背景颜色既可以使用英文颜色单词表示，也可以使用十六进制的颜色值 。 设置表格的背景颜色示例10-5,设置表格的背景图片,为了使表格显得更形象生动，我们可以对表格设置背景图片。 基本语法 语法说明： 背景图片路径可以使用相对路径和绝对路径。 设置表格的背景图片示例10-6,设置表格的边距,表格的边距指单元格内容与单元格边框之间的间距。 基本语法 语法说明： 边距值的单位是像素，值越大，单元格内容和边框的间距越大。 设置表格的边距示例10-7,设置表格的间距,表格的间距指单元格与单元格之间的间距。 基本语法 语法说明： 间距值的单位是像素，值越大，单元格之间的间距越大。 设置表格的边距示例10-8,table标记属性示例,2) 标记,标记常用属性：,tr标记属性示例,3) 、标记,、标记常用属性：,使用创建表头示例10-11 设置单元格对齐方式示例10-12 设置单元格的背景颜色和边框颜色示例10-13 设置单元格的背景图片示例10-14 设置单元格的高度和宽度示例10-15 单元格的跨行和跨列设置示例10-16 示例10-17,td、th标记属性示例,td、th标记属性示例,创建表格时，为了概括表格内容或提供有关表格内容的一些有关信息，常常会设置表格的标题。 基本语法 表格标题 语法说明： 之间的内容就是表格的标题。align默认取center，valign默认取top,4)caption标记,4)caption标记,caption标记用于设置表格题注 概括表格的内容 提供关于表格内容的一些信息 常用属性,设置表格的边距示例10-9,在网页排版中，通常需要通过表格的嵌套来完成 表格的嵌套是指在一个表格的单元格中插入另一个表格,5）嵌套表格,表格嵌套设置示例,在网页排版中使用嵌套表格的原因： 一是利于简化表格制作：网页的排版有时会很复杂，在外部需要有一个表格控制总体布局，如果这时一些内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格制作带来困难 二是提高浏览器响应速度：浏览器在解析网页的时候，是将整个表格的结构下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，表格下载耗时相对长，浏览者要等很长时间才能看到网页的内容,小 结,创建超链接必须具备的条件是同时存在源端点和目标端点 在创始超链接时经常涉及的路径有两种：绝对路径、文件相对路径 通常外部链接需要使用绝对路径，内部链接一般使用文件相对路径 超链接必设的一个属性是href 通过target属性，