第4讲超链接、多媒体及表格标记

第4讲超链接、多媒体及表格•4.1多媒体标记•4.2框架结构•4.3超链接标记•4.4表格标记学习目标•掌握各种常用多媒体标记的使用•理解框架的作用•掌握框架标记的使用•理解不支持框架标记的应用•掌握浮动框架的使用•掌握使用框架作为超链接目标的设置•掌握创建表格以及格式化表格•掌握使用嵌套表格布局网页•掌握各种超链接的设置4.1多媒体标记•为增强网页的功能以及动感，现在的网页一般都会加入诸如声音、动画、视频等多媒体内容。•常用多媒体标记：类型描述marquee设置文字在页面中的滚动效果embed在页面中嵌入MP3、视频等多媒体内容applet在页面中插入javaapplet小程序bgsound设置页面的背景音乐object在页面中嵌入Flash动画1)滚动文字设置•基本语法marquee滚动文字/marquee语法说明：处在marquee和/marquee之间的文字将以一定的速度从右向左移动，当将滚动文字换成图片时，将获得图片的滚动效果。•marquee常用属性:属性属性值描述directionup设置文字向上滚动down设置文字向下滚动left设置文字向左滚动(默认方向）right设置文字向右滚动behaviorscroll设置文字循环往复滚动（默认状态）slide设置文字只进行一次滚动alternate设置文字交替进行滚动scrollamount某个数值n设置文字滚动速度，值越大越快scrolldelay某个数值n设置文字在每一次滚动后，延迟一段时间后再进行下一次滚动，单位为毫秒，值越小越快loop某个数值n设置文字滚动的循环次数,取值为-1表示循环不断width,height某个数值n设置文字滚动的区域bgcolor某种颜色设置文字滚动区域的背景颜色1)滚动文字设置•默认情况下，滚动文字从右向左滚动示例：•使用marquee标记的direction属性可以修改滚动字幕的滚动方向。文字从下往上循环滚动示例：•默认情况下，滚动字幕循环地以一个方向向另外一个方向的滚动，使用marquee标记的behavior属性可以修改滚动字幕的滚动方式。文字从右往左循环往反交替滚动示例：•字幕的滚动速度通过一个常量来表示，常量值越大，速度越快。在每次滚动结束后可以延迟一定的时间进行下一次滚动。滚动速度和滚动延迟特性可以分别通过属性scorllamount和scorlldelay进行设置示例：1)滚动文字设置•默认情况下，字幕将在一个与浏览器窗口等宽的白色背景颜色的区域中进行滚动，该区域的高度跟滚动方式有关。如果上下之间的滚动，默认高度是200个像素；如果左右滚动，高度则大致是滚动对象的方向。通过marquee标记的属性width和height可以改变滚动区域的大小，修改滚动区域的背景颜色使用bgcolor属性。设置字幕滚动区域与背景颜色示例：•默认情况下，字幕滚动区域与周围对象的间距为0，使用marquee标记的hspace和vspace属性可以分别设置滚动区域与周围对象的水平间距和垂直间距。示例：滚动文字标记示例2)嵌入多媒体内容•在网页中可以使用embed标记嵌入MP3、电影等多媒体内容•基本语法embedsrc=“file_url”/embed•embed标记常用属性：属性属性值描述alignleft|right|center|absbottom|absmiddle|baseline|bottom|texttop|top设置嵌入式对象在文档中相对周围内容的位置height某个数值n以像素为单位定义嵌入式对象的高度width某个数值n以像素为单位定义嵌入式对象的宽度srcURL指定嵌入式对象的文件路径autostarttrue|false设置嵌入式对象何时打开（即是网页被打开时打开还是在播放按钮被点击后才打开looptrue|false设置嵌入式对象的播放是否循环不断name…标识对象，以便于其他对象对它的引用param定义附加参数hidden设置嵌入对象的控制框的可视性3)设置背景音乐•访问者访问页面时自动播放背景音乐•基本语法bgsoundsrc=“file_url”•bgsound标记常用属性：属性属性值描述srcURL背景音乐文件路径loopn|infinite取具体的某个数值以循环播放一定的次数后停止播放，或取值为infinite时循环不断的播放，默认情况下，只播放一次多媒体标记综合示例•在网页中嵌入flash动画，通常会使用object标记，因为该标记允许开发者为插入到页面中的对象指定数据和参数•基本语法：objectclassid=clsid_value“codebase=“urlwidth=“valueheight=“valueparamname=movievalue=“file_nameparamname=qualityvalue=highembedsrc=“file_namequality=highpluginspage==application/x-shockwave-flashwidth=“valueheight=“value/embed/object4)嵌入flash动画嵌入Flash动画示例5）嵌入JavaApplet•applet是用Java开发的一种小程序，不能独立运行，必须嵌入到HTML文件，并通过支持java的浏览器运行。•在网页中嵌入的是applet的类文件•嵌入javaapplet时，必须指定显示applet的区域大小•基本语法appletcode=“XXX.class”width=“…”height=“…”/applet•语法解释XXX.class表示所嵌入的applet类文件，width、height属性用于设置applet文件显示区域•框架的作用，就是把浏览器窗口划分成若干个区域，每个区域可以分别显示不同的网页。•注意：使用框架结构时，HTML文档中不能出现body标记对，此时body需要由frameset代替4.2框架结构•框架集标记frameset：主要是定义浏览器窗口的分割方式、各分割窗口（框架）的大小以及格式化框架边框•框架标记frame：定义各分割窗口中显示的内容，并能对各分割窗口进行格式化1）框架结构组成标记2）框架集标记frameset属性属性值描述bordercolor…以RGB颜色值或颜色英文名设置所有框架边框颜色frameborder0/no所有框架都不显示边框1/yes所有框架都显示边框，默认为1framespacingn设置框架之间的间距rowsn1,n2…使窗口按行的方式分割(上下分割)colsn1,n2…使窗口按列的方式分割(左右分割)表5-1frameset常用属性框架分割窗口方式–左右（水平）分割–上下（垂直）分割–嵌套分割：浏览器窗口既存在左右分割，又存在上下分割左右分割•基本语法framesetcols=“value,value,……”frameframe……./frameset•语法解释cols属性决定了窗口的分割方式为左右分割；“value”定义各个框架的大小，单位可以是像素，也可以是百分比；value的个数决定了frame标记的个数，即窗口的个数framesetcols=20%,*frameframe/frameset左右分割示例上下分割•基本语法framesetrows=“value,value,……”frameframe……./frameset•语法解释rows属性决定了窗口的分割方式为上下分割；“value”定义各个框架的大小，单位可以是像素，也可以是百分比；value的个数决定了frame标记的个数，即窗口的个数framesetrows=20%,*frameframe/frameset上下分割示例嵌套分割•基本语法framesetcols|rows=“value,value,……”frameframesetrows|cols=“value,value,…”frameframe……/framesetframe……./framesetframesetcols=20%,55%,*framesetrows=100,*frameframe/framesetframeframe/frameset嵌套分割示例frameset对框架边框的格式化•frameset标记对框架边框的格式化通过设置”frameborder”、”framespacing”和”bordercolor”等属性来实现3)框架标记frame•基本语法framesetcols=“value,value,……”framesrc=“url”name=“frame_name”framesrc=“url”name=“frame_name”……./frameset•语法解释src属性用于设置在框架窗口中显示的内容来自的文件；name属性用于标记框架名称，以便于其他对象对它的引用，如作为链接的一个目标窗口framesetcols=20%,*framesrc=“frame_menu.html”name=“left”framesrc=“p.htm”name=“right”/framesetframe标记基本设置示例frame属性属性值描述srcURL设置在框架中显示的文件的路径name…设置Frame名称，以便于其它对象对它的引用frameBorder0/no不显示边框1/yes显示边框，默认为1scrollingyes显示滚动条no不显示滚动条auto根据页面的长度自动判断是否显示滚动条，默认自动noresize设置框架能否改变大小marginwidthn以像素为单位，设置框架边框与页面内容的左右页边距marginheightn以像素为单位，设置框架边框与页面内容的上下页边距bordercolor…以RGB颜色值或颜色英文名设置框架边框颜色•frame常用属性框架综合示例4)不支持框架标记noframes•一些早期版本的浏览器不支持框架。制作人员无法改变这一现象，所能做的只是显示该浏览器不支持框架技术，有些内容无法看到。这一任务可由noframes标记来完成，当浏览器不能加载框架集文件时，会检索到noframes标记，并显示标记中的内容•基本语法framesetframeframe…….noframesbody……/body/noframes/frameset放在noframes标记对之间的部分就是在不支持框架的浏览器中显示的内容5)浮动框架iframe•浮动框架是一种特殊的框架页面，其作为HTML文档的一部分，就象图像一样出现在HTML文档中。浮动框架允许将一个HTML文档插入到另一个HTML文档内部的某个区域。•基本语法iframesrc=“file_URL”height=“value”width=“value”name=“iframe_name”align=“left|center|right”•常用属性:属性属性值描述srcURL设置浮动框架中显示页面源文件的路径widthn设置浮动框的宽度heightn设置浮动框的高度name…设置浮动框的名称，以便于其他对象引用它align…设置浮动框相对于浏览器窗口的对齐方式frameborder…设置浮动框架边框显示状态，与普通框架同scrolling…设置浮动框架滚动条显示属性，与普通框架同noresize设置浮动框架尺寸调整属性，与普通框架同bordercolor…设置浮动框架边框颜色，与普通框架同marginheightn浮动框架边框与页内容上下间距，与普通框架同marginwidthn浮动框架边