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

第4讲超链接、多媒体及表格•4.1超链接标记•4.2多媒体标记•4.3表格标记学习目标•掌握各种超链接的设置•掌握各种常用多媒体标记的使用•掌握创建表格以及格式化表格•掌握使用嵌套表格布局网页•浏览者通过单击文本或图片对象，可以从一个页面跳到另一个页面，或从页面的一个位置跳到另一个位置，实现这样的功能的对象称之为超链接•创建超链接的条件：必须同时存在两个端点。一个是源端点；另一个是目标端点–源端点：指网页中的提供链接单击的对象，如链接文本或链接图像–目标端点：指链接跳过去的页面或位置，如某网页、书签等4.1超链接标记1）超链接标记及常用属性属性描述href指定链接路径（必设属性）name定义书签名称target指定打开链接目标文件的窗口title设置链接提示文字•创建超链接使用的标记为a•超链接标记常用属性：target属性值描述_blank在新窗口中打开链接文档_self在同一个帧或窗口中打开链接文档（默认属性）_parent在上一级窗口中打开，一般在框架页中经常使用_top在浏览器的整个窗口中打开，忽略任何框架框架窗口名在指定的框架窗口中打开链接文档链接目标窗口示例2）链接路径设置•绝对路径:指文件的完整路径•文件相对路径：指相对于当前文件的路径•文件相对路径有以下几种：①两文件在同一目录下②链接文件在当前文件的下一级目录③链接文件在当前文件的上一级目录相对链接路径设置：•同一目录，只需输入要链接文档的名称•下一级目录，需在链接文件名前添加“下一级目录名/”•上一级目录，需在链接文件名前添加“../”链接路径示例：•根据超链接的目标端点来分，超链接可分为：–内部链接–外部链接–书签链接–脚本链接–文件下载链接•根据超链接的源端点来分，超链接可分为：–文本链接–图像链接–图像映射3）超链接类型内部链接•内部链接是指在同一个网站内部，不同网页之间的链接关系•基本语法ahref=“file_name”链接文字/图片/a•语法解释通过“href”属性指定目标端点；“file_name”为要链接文件的路径，一般使用相对路径；提供给鼠标单击的内容，即源端点，既可以使用“文字”，也可以使用“图片”外部链接•外部链接是指跳转到当前网站外部，和其他网站中的页面或其他元素之间的链接关系。•基本语法ahref=“URL”链接文字/图片/a•语法解释通过“href”属性指定目标端点；“URL”为要链接文件的路径，一般情况下，该路径需要使用绝对路径；提供给鼠标单击的内容，即源端点，既可以使用“文字”，也可以使用“图片”ahref=“mailto:邮址1？Subject=content&cc=邮址2&bcc=邮址3”链接文字/a参数描述Subject电子邮件主题cc抄送收件人bcc暗送收件人表4-1邮件参数启动邮件发送系统设置语法内部和外部超链接示例书签链接•书签链接：指目标端点为网页中的某个设置了称为书签标记的位置的链接•创建书签链接步骤：•创建书签•为书签制作链接①建立书签•基本语法aname=“书签名”[文字/图片]/a•语法解释[文字/图片]中的“[]”表示文字或图片可有可无，书签将在光标处建立一个名为“name”属性值所规定的书签。书签名设置规范：1）书签名不支持中文，只能使用字母和数字2）书签名区分英文字母大小写3）书签名间不能含有空格，也不能含有特殊字符②建立书签链接•基本语法–链接到同一页面中的书签：ahref=“#书签名”链接文字/a–链接到其他页面中的书签:ahref=“file_name#书签名”链接文字/a•语法解释“书签名”是已定义的书签名，“file_name”是要跳转到的页面路径。•书签链接示例脚本链接•在链接语句中，可以通过脚本来实现HTML语言完成不了的功能。•基本语法ahref=“javascript:…”链接内容/a•语法解释在javascript:后面编写的就是具体的脚本文件下载链接•要创建文件下载，只要在链接地址处输入文件路径即可，当用户单击链接后，浏览器会自动判断文件类型，以做出不同情况的处理，如直接打开，或弹出下载对话框供下载•可用于下载的文件类型有.doc、.Rar、.cab、.zip、.exe等•基本语法ahref=“File_URL”链接文字/a•文件下载示例bodypahref=mark_using.docdoc/a/ppahref=data2.cabcab/a/ppahref=task.exeexe/a/pbody文本链接•文本链接是指源端点为文本文字的超链接•基本语法ahref=“file_name”链接文字/a图像链接•图像链接是指源端点为图像文件的超链接•基本语法ahref=“filename_link”imgsrc=“filename_img”…/a•语法解释“filename_link”为要跳转到的文件路径，“filename_img”为图像文件路径，默认情况下，图像链接会显示蓝色边框线，如果不想显示边框，应设置border=0图像链接示例bodyahref=dreamweaver.htmtarget=_blankimgsrc=images/cover.gifborder=0/a/body图像映射•图像热区：一幅图像被切分成不同的区域，每一个区域可以链接到不同的地址，这些区域称为图像的热区。•图像映射：指源端点为图像热区的超链接•基本语法imgsrc=“filename_img”usemap=#map_namemapname=map_nameareashape=“rect”coords=“x1,y1,x2,y2”href=“…”areashape=“circle”coords=“x,y,r”href=“…”areashape=“poly”coords=“x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,…”href=“…”/map激活映射•语法解释img标记中的usename属性主要用于激活映射之用；map标记用于创建热区，“shape”属性设置热区形状，如果为矩形热区，“coords”属性值x1,y1,x2,y2分别为矩形左上顶点和右下顶点的坐标；如果为圆形热区，“coords”属性值x,y,r分别为圆心坐标和半径长度；如果为多边形热区，“coords”属性值x1,y1,x2,y2,….分别为多边形各个顶点的坐标4.2多媒体标记•为增强网页的功能以及动感，现在的网页一般都会加入诸如声音、动画、视频等多媒体内容。示例•常用多媒体标记：类型描述marquee设置文字在页面中的滚动效果embed在页面中嵌入MP3、视频等多媒体内容applet在页面中插入javaapplet小程序bgsound设置页面的背景音乐object在页面中嵌入Flash动画1)滚动文字设置•基本语法marquee滚动文字/marquee•marquee常用属性:属性属性值描述directionup设置文字向上滚动down设置文字向下滚动left设置文字向左滚动(默认方向）right设置文字向右滚动behaviorscroll设置文字循环往复滚动（默认状态）slide设置文字只进行一次滚动alternate设置文字交替进行滚动scrollamount某个数值n设置文字滚动速度，值越大越快scrolldelay某个数值n设置文字在每一次滚动后，延迟一段时间后再进行下一次滚动，单位为毫秒，值越小越快loop某个数值n设置文字滚动的循环次数,取值为-1表示循环不断width,height某个数值n设置文字滚动的区域bgcolor某种颜色设置文字滚动区域的背景颜色滚动文字标记示例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文件显示区域嵌入javaapplet示例4.3表格标记•使用表格标记，可在网页中创建表格。表格在网页中除了作为一个显示对象以外，还有一个重要的作用就是用于排版页面内容•构成表格的主要标记标记描述table在HTML文档中声明一个表格tr在表格中创建一行td在一行中创建一个单元格，单元格内容居左对齐th在一行中创建一个标题单元格，单元格内容加粗且默认居中对齐caption为表格创建题注•基本语法tabletrtd(th)…td(/th)……/trtrtd(th)…td(/th)……/tr……/table表格标记示例1)table标记•table标记常用属性属性描述border设置表格边框宽度，单位为像素（默认不显示边框），设置border=0将取消边框width设置表格宽度，单位为像素或浏览器窗口的百分比height设置表格高度，单位为像素或浏览器窗口的百分比bordercolor、bordercolordark、bordercolorlight设置表格边框颜色/亮边框颜色（左上边框颜色）/暗边框颜色（右下边框颜色）bgcolor设置表格的背景颜色background设置表格的背景图像cellspacing设置相邻单元格之间的间距cellpa