授课教师：姬广永 QQ: TEL: 学习交流网站:

Presentation on theme: "授课教师：姬广永 QQ: TEL: 学习交流网站:"— Presentation transcript:

1 授课教师：姬广永 QQ:41588872 TEL:13589841020 学习交流网站:http://xin126.cn
第二章 超文本标记语言HTML （三） 授课教师：姬广永 QQ: TEL: 学习交流网站:

2 4.超级链接—普通超级链接1 超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的WWW的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。

3 4.超级链接—普通超级链接2 超级链接是用<a>定义的
在<a>下，有元素属性href,href的属性值为一个URL地址 如：<a href=“ 如：<a href=“02.htm">普通超级链接</a> 例：01.htm

4 4.超级链接—普通超级链接3 在图像上建立超链接： 例：01.htm
<a href=" "> <img src=“logo.jpg"/></a> 例：01.htm

5 4.超级链接—E-mail超级链接 超级链接可以指向E-mail地址
如：<a 例：01.htm

6 4.超级链接—新开链接窗口 在新的(浏览器)窗口 打开链接页面
<a href=“ ” target=“_blank”> 这个会在新的窗口中打开 </a> 没有加target属性的，默认：target= "_self" 例：01.htm

7 4.超级链接—去除下划线 去掉超级连接的下划线：style=“text-decoration: none” 例：01.htm

8 4.超级链接——其他超级链接 WWW应用仅仅是Internet应用的一种,Internet还有其他很多应用，如：Ftp等。实际上mailto也属于非WWW应用。我们可以创建指向Ftp的超级链接; 指向其他Internet应用的超级链接不是我们掌握的重点。

9 4.超级链接——锚点(书签) 1 设置锚点： 先将光标移至预建立锚点的位 置，输入<a name=”锚点名称”> 链接锚点：
链接至本网页的锚点。 格式为：<a href=”#锚点名称”>链接的文字</a> 例：02.htm

10 4.超级链接——锚点(书签) 2 链接锚点： 链接至其他网页的的锚点。格式为：
<a href=”url#锚点名称”>预链接的文字</a> 如： <a href=“02.htm#bb”>指向02.htm的锚点bb的超级链接</a> 例：03.htm

11 HTML对图片的控制-1 图象映射 (建立超链接地图)： 是指一个图片上的不 同位置被指定了不同的超级链接。 点击图片的不同位置会打开不同的
图象映射 (建立超链接地图)： 是指一个图片上的不 同位置被指定了不同的超级链接。 点击图片的不同位置会打开不同的 超级链接目标。 例：04.htm

12 HTML对图片的控制-2 图象映射（只要求理解标记含义） 图象映射由<map>定义。
<map>在定义图象映射时，可以定义三种形状的映射： circle(圆形)、rect(矩形)、poly(多边形) <map>有一个基本属性是name。Name给图象映射命名，这个命名将会被<img>元素用usemap属性引用。

13 04.htm <img src="youxi.JPG" border="0" usemap="#Map">
<map name="Map"> <area shape="poly" coords="130,72,228,65,311,101,298,196,210,228,157,170" href="feisheng.htm" target="_blank"> <area shape="circle" coords="503,158,128" href="jineng.htm" target="_blank"> <area shape="rect" coords="697,248,911,414" href="shengbing.htm" target="_blank"> </map>

14 一月 二月 三月 1200 1000 1500 表格（用<Table>来表示，表格可以有背景颜色、背景图片）
表头（用<TH>来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗） 表格边框 一月 二月 三月 1200 1000 1500 单元格（用<TD>来表示，每个单元格可以有背景颜色和背景图片） 每一行可以用<TR>来表示，单元格放在行中，每行可以有很多的单元格。

15 表格(TABLE)标记--1 <table> 元素：定义一个表格。每一个表格只有一对<table>和</table>，一张页面中可以有多个表格。 <tr>元素：定义表格的行，一个表格可以有多行，所以<tr>对于一个表格来说不是唯一的。 <td>元素：定义表格的一个单元格。每行可以有不同数量的单元格，在<td>和</td>之间是单元格的具体内容。 需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。

16 表格(TABLE)标记--2 表格的基本结构 <table>定义表格 <tr>定义表行
<th>定义表头</th> </tr> <tr> <td>…</td>定义单元格 </table>

17 表格(TABLE)标记--3 表格的属性 –1 width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。
height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。 border属性：表格边线粗细 例05.htm

18 表格(TABLE)标记--4 <th> 表头（标题单元格）标记 <th>表头</th>
说明：<th>与<td>同样是标识一个单元格，不同的是<th>所标识的单元格中的文字是以粗体、居中显示，通常用于把表格的第一行或第一列作为其他单元格内容的标题 。 5. <caption> 表格标题标记 说明： <caption>标记必须内嵌于<table>标记内使用。

19 表格(TABLE)标记--2 表格的属性 –1 4、bgcolor属性：指定表格或某一个单元格的背景颜色。
5、background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。 例：05.htm

20 表格(TABLE)标记--3 表格的属性 –2 6、bordercolor属性：指定表格或某一个单元格的边框颜色。
7、Bordercolorlight属性：亮边框的颜色 8、Bordercolordark属性：暗边框的颜色 例：05.htm

21 表格(TABLE)标记--3 表格的属性 –2 9、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。
例：06.htm

22 表格(TABLE)标记--3 表格的属性 –2 10、cellspacing属性：单元格间距。 例：06.htm
11、cellpadding属性：单元格边距。

23 表格(TABLE)标记--4 单元格属性 1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括： top：顶端对齐； middle：居中对齐； bottom：底端对齐; Baseline：相对于基线对齐; 例：07.htm

24 表格(TABLE)标记--5 单元格属性 2、Colspan：属性值表示当前单元格跨越几列 例：08.htm
3、Rowspan：属性值表示当前单元格跨越几行

25 表格(TABLE)标记--6 行属性 1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包
top：顶端对齐； middle：居中对齐； bottom：底端对齐。 Baseline：相对于基线对齐。 例：09.htm

26 表格(TABLE)标记--7 行属性 2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的水平对齐方式:left center right 例：09.htm

27 表格进阶 表格的嵌套 在<td> </td>之间插入表格，实现表格嵌套 例：10.htm
表格的作用一般只是控制文本和图像的显示，而不显示表格的边框 例：11.htm

28 综合案例-1 例：2-3-1.html

29 综合案例-2 表格的综合使用 例： index.asp

30 HTML 基础 III 3.1多媒体标记 <bgsound> 播放声音
<embed> 播放视频、音频、flash动画等 <img> 当<img>标记设置了dynsrc属性时，也可以用于播放视频 （了解）。

31 （1） <bgsound> 标记：嵌入背景音乐
基本格式： <bgsound src="sound-name“ autostart=true loop=n> <bgsound src=#> 音乐文件的 URL <bgsound loop=#> 循环数 <bgsound autostart=true/false 是否自动播放 例：13.htm 示例利用框架标记和背景音乐标记创建音乐不间断跳转

32 （3） <embed> 标记 例：14.htm 基本格式：使用<embed> 标记之前，需要安装插件才可以
<embed src="multimedia-name" autostart=true loop=n hidden="no" starttime="分:秒" volume="0-100" width="num-w" 和 hight="num-h" align="pos"> hidden:是否隐藏控制画面; Starttime =“分:秒” ，设定多媒体播放的时间 00：30表示从30秒处开始播放。 Volume:数值0—100，用来控制音量大小。 说明： <embed>标记用来插入各种多媒体，可以是 midi、wav、swf、au 等格式文件。 例：14.htm

33 例：15.htm（只对IE有效^） （2） <img> 标记 基本格式：
<img src="url.gif" dynsrc=“007.avi" loop="num" loopdelay="num-ms" start="fileopen, mouseover"> dynsrc :指明视频文件路 Loopdelay：指明视频延时播放的毫秒数 Start=fileopen:打开页面时播放，mouseover:当鼠标移动到视频播放区域开始播放。 例：15.htm（只对IE有效^）

34 （4） 插入flash 标记 基本格式： <object classid="clsid:D27CDB6E-AE6D-11cf-96B " codebase=" width="570" height="214"> <param name="movie" value="jgy.swf" /> <param name="quality" value="high" /> <embed src="jgy.swf" quality="high" pluginspage=" type="application/x-shockwave-flash" width="570" height="214"></embed> </object>

35 <object><param>标记胜于IE或其他支持ActiveX控件的浏览器。
<object classid="clsid:D27CDB6E-AE6D-11cf-96B " codebase=" width="570" height="214"> <param name="movie" value="jgy.swf" /> <param name="quality" value="high" /> <object><param>标记胜于IE或其他支持ActiveX控件的浏览器。

36 <embed src="jgy.swf" quality="high" pluginspage=" type="application/x-shockwave-flash" width="570" height="214"></embed> </object> <embed>标记用于Netscape Navigator或其他支持netscape插件的浏览器

37 END