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

上传人：f*** IP属地：广东上传时间：2023-06-13 格式：PPTX 页数：74 大小：1.24MB 积分：30 举报 版权申诉

已阅读5页，还剩69页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

超链接、多媒体及表格标记学习目标掌握各种常用多媒体标记的使用理解框架的作用掌握框架标记的使用理解不支持框架标记的应用掌握浮动框架的使用掌握使用框架作为超链接目标的设置掌握创建表格以及格式化表格掌握各种超链接的设置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、电影等多媒体内容基本语法

<bgsoundsrc=“file_url”>bgsound标记常用属性：属性属性值描述srcURL背景音乐文件路径loopn|infinite取具体的某个数值以循环播放一定的次数后停止播放，或取值为infinite时循环不断的播放，默认情况下，只播放一次

多媒体标记综合示例4)嵌入flash动画

嵌入Flash动画示例5）嵌入JavaAppletapplet是用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-1<frameset>常用属性框架分割窗口方式左右（水平）分割上下（垂直）分割嵌套分割：浏览器窗口既存在左右分割，又存在上下分割

左右分割基本语法

<framesetcols=“value,value,……”><frame><frame>

…….</frameset>语法解释

cols属性决定了窗口的分割方式为左右分割；“value”定义各个框架的大小，单位可以是像素，也可以是百分比；value的个数决定了<frame>标记的个数，即窗口的个数<framesetcols="20%,*"><frame><frame></frameset>左右分割示例上下分割基本语法

<framesetrows=“value,value,……”><frame><frame>

…….</frameset>语法解释

rows属性决定了窗口的分割方式为上下分割；“value”定义各个框架的大小，单位可以是像素，也可以是百分比；value的个数决定了<frame>标记的个数，即窗口的个数<framesetrows="20%,*"><frame><frame></frameset>上下分割示例嵌套分割基本语法

<framesetcols|rows=“value,value,……”><frame>

<framesetrows|cols=“value,value,…”><frame><frame>

……</frameset><frame>

…….</frameset><framesetcols="20%,55%,*">

<framesetrows="100,*"><frame><frame></frameset><frame><frame></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”></frameset><frame>标记基本设置示例frame属性属性值描述srcURL设置在框架中显示的文件的路径name…设置Frame名称，以便于其它对象对它的引用frameBorder0/no不显示边框1/yes显示边框，默认为1scrollingyes显示滚动条no不显示滚动条auto根据页面的长度自动判断是否显示滚动条，默认自动noresize设置框架能否改变大小marginwidthn以像素为单位，设置框架边框与页面内容的左右页边距marginheightn以像素为单位，设置框架边框与页面内容的上下页边距bordercolor…以RGB颜色值或颜色英文名设置框架边框颜色<frame>常用属性框架综合示例4)不支持框架标记<noframes>一些早期版本的浏览器不支持框架。制作人员无法改变这一现象，所能做的只是显示该浏览器不支持框架技术，有些内容无法看到。这一任务可由<noframes>标记来完成，当浏览器不能加载框架集文件时，会检索到<noframes>标记，并显示标记中的内容

基本语法

…….

……</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浮动框架边框与页内容左右间距，与普通框架同浮动框架示例框架的一个重要目的是在不同的框架中显示不同的页面，通过链接目标窗口的设置可以很容易实现这一目的具体实现方法：将框架的框架名属性值作为超链接的target的属性值6)框架与链接<framesetcols="20%,*"><framesrc="frame_menu.html"name="left"><framesrc="p.htm"name="right"></frameset>frame_menu.html超链接代码如下:<body><p><ahref="p.htm"target="right">Photoshop</a></p><p><ahref="f.htm"target="right">Freehand</a></p><p><ahref="i.htm"target="right">Illustrator</a></p><p><ahref="c.htm"target="right">CorelDraw</a></p></body>普通框架与链接示例浮动框架与链接示例浏览者通过单击文本或图片对象，可以从一个页面跳到另一个页面，或从页面的一个位置跳到另一个位置，实现这样的功能的对象称之为超链接创建超链接的条件：必须同时存在两个端点。一个是源端点；另一个是目标端点源端点：指网页中的提供链接单击的对象，如链接文本或链接图像目标端点：指链接跳过去的页面或位置，如某网页、书签等4.2超链接标记1）超链接标记及常用属性属性描述href指定链接路径（必设属性）name定义书签名称target指定打开链接目标文件的窗口title设置链接提示文字创建超链接使用的标记为<a>超链接标记常用属性：target属性值描述_blank在新窗口中打开链接文档_self在同一个帧或窗口中打开链接文档（默认属性）_parent在上一级窗口中打开，一般在框架页中经常使用_top在浏览器的整个窗口中打开，忽略任何框架框架窗口名在指定的框架窗口中打开链接文档

嵌入javaapplet示例

链接目标窗口示例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邮件参数启动邮件发送系统设置语法

内部和外部超链接示例书签链接书签链接：指目标端点为网页中的某个设置了称为书签标记的位置的链接创建书签链接步骤：创建书签为书签制作链接

①建立书签基本语法

name=“书签名”>[文字/图片]</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>文件下载示例<body><p><ahref="mark_using.doc">doc</a></p><p><ahref="data2.cab">cab</a></p><p><ahref="task.exe">exe</a></p><body>文本链接文本链接是指源端点为文本文字的超链接基本语法

<ahref=“file_name”>链接文字</a>图像链接图像链接是指源端点为图像文件的超链接基本语法

<ahref=“filename_link”><imgsrc=“filename_img”

…></a>语法解释

“filename_link”为要跳转到的文件路径，“filename_img”为图像文件路径，默认情况下，图像链接会显示蓝色边框线，如果不想显示边框，应设置border=0图像链接示例<body><ahref="dreamweaver.htm"target="_blank"><imgsrc="images/cover.gif"border="0"></a></body>图像映射图像热区：一幅图像被切分成不同的区域，每一个区域可以链接到不同的地址，这些区域称为图像的热区。图像映射：指源端点为图像热区的超链接基本语法<imgsrc=“filename_img”

usemap=#map_name>

<mapname=map_name><areashape=“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.3表格标记使用表格标记，可在网页中创建表格。表格在网页中除了作为一个显示对象以外，还有一个重要的作用就是用于排版页面内容构成表格的主要标记标记描述<table>在HTML文档中声明一个表格<tr>在表格中创建一行<td>在一行中创建一个单元格，单元格内容居左对齐<th>在一行中创建一个标题单元格，单元格内容加粗且默认居中对齐<caption>为表格创建题注基本语法

<table>

<tr><td>(<th>)…<td>(</th>)

……</tr><tr><td>(<th>)…<td>(</th>)

……

</tr>

……

</table>表格标记示例1)<table>标记<table>标记常用属性属性描述border设置表格边框宽度，单位为像素（默认不显示边框），设置border=0将取消边框width设置表格宽度，单位为像素或浏览器窗口的百分比height设置表格高度，单位为像素或浏览器窗口的百分比bordercolor、bordercolordark、bordercolorlight设置表格边框颜色/亮边框颜色（左上边框颜色）/暗边框颜色（右下边框颜色）bgcolor设置表格的背景颜色background设置表格的背景图像cellspacing设置相邻单元格之间的间距cellpadding设置单元格边框与内容的间距align设置表格的水平对齐方式（默认左对齐）

table标记属性示例2)<tr>标记<tr>标记常用属性：属性描述align设置行中各单元格内容的水平对齐方式（默认左对齐）valign行中各单元格内容内容的垂直对齐方式（默认居中对齐bgcolor设置行的背景颜色background设置行的背景图像bordercolor设置行的边框颜色bordercolorlight设置行的亮边框颜色（右下边框颜色）bordercolordark设置行的暗边框颜色（左下边框颜色）

tr标记属性示例3)<td>、<th>标记<td>、<th>标记常用属性：属性描述align设置单元格内容的水平对齐方式（td的默认左对齐，th的默认居中对齐）valign设置单元格内容的垂直对齐（默认居中对齐）bgcolor设置单元格的背景颜色background设置单元格的背景图像bordercolor设置单元格的边框颜色bordercolorlight设置单元格的亮边框颜色（右下边框颜色）bordercolor

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

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

文档简介

温馨提示

最新文档

评论

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

文档简介

温馨提示

最新文档

评论

相关文档