破洛洛首页

破洛洛论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
楼主: zybx520

[基础] 网页设计之基础篇-HTML(更新完结)

  [复制链接]

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-7-5 20:20:28 | 显示全部楼层

框架的使用

本帖最后由 zybx520 于 2012-7-5 20:39 编辑

框架的基本结构
框架的作用是把浏览器窗口划分成若干个区域,每个区域内可以显示不同的页面,并且各个页面之间不会受到任何影响,为框架内每个页面取不同的名字,作为彼此互动的依据,所以框架技术普遍应用于页面导航。
框架的基本结构如下:
<HTML>
<HEAD>
<TITLE>框架网页的基本结构</TITLE>
</HEAD>
<FRAMESET>
<FRAME>
<FRAME>
<FRAME>
…….
</FRAMESTE>
</HTML>
<FRAMESET>:框架集标记,用做框架的声明。<FRAMESET>为框架开始标记,对应的</FRAMESET>为框架的结束标记。在框架网页中,将<FRAMESET>标记置于头部标记之后,以取代<BODY>的位置。
<FRAME>:框架标记,定义框架内容。在框架页面中有几个框架,就设置几个<FRAME>标记,它包含于<FRAMESET></FRAMESET>之间。
示例:将浏览器窗口分为四个框架,
<FRAMESET>
<FRAME>
<FRAME>
<FRAME>
<FRAME>
</FRAMESTE>
框架集标记<FRAMESET>
框架集标记<FRAMESET>定义了框架的开始和结束,它还定义一组框架的结构,包括框架的数量,尺寸,载入网页的名称等。其具体属性如下图:
表1.27.jpg
1,  左右分割窗口属性COLS
在水平方向,将浏览器分割成多个窗口。
语法:<FRAMESETCOLS="value,value,……….">
<FRAME>
<FRAME>
……..
</FRAMESET>
VALUE:定义水平方向上每个框架的宽度值,单位是像素或者百分比的形式表示。
2,  水平分割窗口属性ROWS
在垂直方向将浏览器分割成多个窗口。
语法:<FRAMESETROWS="value,value,……….">
<FRAME>
<FRAME>
……..
</FRAMESET>
VALUE:定义垂直方向上每个框架的宽度值,单位是像素或者百分比的形式表示。
3,  框架集边框宽度属性FRAMESPACING
设定框架集的边框宽度
语法:<FRAMESETFRAMESPACING="VALUE">
VALUE:框架集的边框宽度值,单位为像素。
4,  框架集边框颜色属性BORDERCOLOR
语法:<FRAMESETBORDERCOLOR="color_value">
Color_value:框架集的边框颜色值,使用颜色的英文名称或者十六进制值表示。
5,  框架集边框属性FRAMEBORDER
设定是否显示框架集边框
语法:<FRAMESETFRAMEBORDER="value">
Value:值为yes代表显示框架集边框,值为no代表隐藏框架集边框。
下面我们做一个简单的示例:
  1. <font color="#000000"><html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>框架集的声明</title>
  5. </head>
  6. <frameset rows="20%,80%" frameborder="yes" framespacing="2" bordercolor="#6699FF">
  7.   <frame src="topframe.htm">
  8.   <frameset cols="20%,80%">
  9.     <frame src="leftframe.htm">
  10.     <frame src="mainframe.htm">
  11.   </frameset>
  12. </frameset><noframes></noframes>
  13. </html>
  14. </font>
复制代码
框架标记<FRAME>
每个框架最终都要有一个显示的页面,通过装载该页面就可以显示网页的内容了。通过<FRAME>标记来定义每个框架的内容。FRAME属性如下图:
表1.28.jpg

1,  框架文件的路径属性SRC
语法:<FRAMESRC="file_name">
File_name:指明框架文件的文件名或者其他超链接的网址。
2,  框架边框显示属性FRAMEBORDER
用来设置是否显示框架边框,框架边框的显示情况继承框架集边框属性的设定。
语法:<FRAMESRC="file_name" FRAMEBORDER="value">
Value:值为YES代表显示框架边框,值为NO则隐藏框架边框。
3,  框架滚动条显示属性SRCOLLING
语法:<FRAMESRC="file_name" SCROLLING="value">
Value的值有三个。
YES:显示滚动条
NO:不显示滚动条
AUTO:根据窗口内容决定是否显示滚动条。
4,  框架边缘的宽度和高度属性MARGINWIDTHMARGINHEIGHT
设置这两个属性值可以调整框架页面内容与边框的距离
语法:<FRAMESRC="file_name" MARGINWIDTH="value" MARGINHEIGHT="value">
MARGINWIDTH:设定框架左右边缘与边框的宽度。
MARGINHEIGHT:设定框架上下边缘与边框的高度
5,  框架尺寸调整属性NORESIZE
利用此属性可以控制框架的尺寸是否可以调整
语法:<FRAMESRC="file_name" NORESIZE>
NORESIZE:禁止改变框架的尺寸。
注意:还有一个不支持框架标记<NOFRAMES>
某些版本的浏览器是不支付框架结构的,如果遇到这种情况,就可以使用<NOFRAMES></NOFRAMES>标记再声明一对文件主体标记<BODY></BODY>,代表在无法接受框架结构时,唯一显示的页面。
下面我们做一个简单的定义框架内容的示例,代码如下:
  1. <font size="3"><html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>定义框架内容</title>
  5. </head>
  6. <frameset cols="20%,80%" framespacing="1" bordercolor="#FF6600">
  7.   <frame src="leftframe.htm" name="leftFrame" scrolling="NO" noresize>
  8.   <frameset rows="20%,80%" framespacing="1">
  9.     <frame src="topframe.htm" name="topFrame" scrolling="NO" noresize>
  10.     <frame src="mainframe.htm" name="mainFrame" marginheight="50" marginwidth="50" scrolling="yes" noresize>
  11.   </frameset>
  12. </frameset>
  13. <noframes>
  14. <body>
  15. <h2>这部分是不支持框架结构的浏览器才看得到的</h2>
  16. </body>
  17. </noframes>
  18. </html>
  19. </font>
复制代码
浮动框架标记<IFRAME>
浮动框架标记<IFRAME>是一种特殊的框架结构,它是在浏览的窗口中嵌套另外的网页文件。
语法:<IFRAME>……….</IFRAME>
其属性值如下图:
表1.29.jpg
1,  浮动框架的文件路径属性SRC
语法:<IFRAMESRC="file_name">
File_name:指明浮动框架文件的文件名或者其他超链接的网址。

2,  浮动框架的名称属性NAME
语法:<IFRAMESRC="file_name" NAME="frame_name">
Frame_name:定义浮动框架的名称。

3,  浮动框架的对齐属性ALIGN
语法:<IFRAMESRC="file_name" ALIGN="LEFT/CENTER/RIGHT">
LEFT:居左对齐
CENTER:居中对齐
RIGHT:居右对齐

4,  浮动框架的宽度和高度属性WIDTHHEIGHT
语法:<IFRAMESRC="file_name" WIDTH="VALUE" HEIGHT="VALUE">
WIDTH:浮动框架的宽度
HEIGHT:浮动框架的高度

5,  浮动框架的滚动条显示属性SCROLLING
语法:<IFRAMESRC="file_name" SCROLLING="VALUE">
VALUE的取值有3
YES:显示滚动条
NO:不显示滚动条
AUTO:根据窗口的内容决定是否显示滚动条

6,  浮动框架的边框属性FRAMEBORDER
语法:<IFRAMESRC="file_name" FRAMEBORDER="VALUE">
VALUE值为yes代表显示框架边框,值为no代表隐藏框架边框

7,  浮动框架的边缘宽度和高度属性MARGINWIDTHMARGINHEIGHT
语法:<IFRAME SRC="file_name" MARGINWIDTH="VALUE" MARGINHEIGHT="VALUE">
MARGINWIDTH:设定浮动框架左右边缘与边框的宽度
MARGINHEIGHT:设定浮动框架上下边缘与边框的高度

下面我们个浮动框架的示例:在文件index.htm中声明,定义浮动框架,浏览器显示的内容写在文件index01.htm中,index.htm代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>浮动框架页面</title>
  5. </head>
  6. <iframe src="index01.htm" name="iframe" width="500" height="300" scrolling="yes" align="center" marginheight="50" marginwidth="50">
  7. </iframe>
  8. </html>
复制代码
index01.htm代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>浮动框架页面</title>
  5. </head>
  6. <body>
  7. <h2 align="center">浮动框架页面</h2>
  8. <p style="text-indent:18px ">浮动框架 <IFRAME> 是一种特殊的框架结构,它是在浏览的窗口中嵌套另外的网页文件。</p>
  9. </body>
  10. </html>
复制代码
框架与超链接
框架的作用是在不同的框架中显示不同的页面。框架的名称与超链接的TARGET属性配合使用可以定义显示的页面。TARGET属性聚会的含义如下图所示:
表1.30.jpg
下面我们通过一些示例来介绍框架和浮动框架与超链接的配合使用。
框架与超链接
框架的一个主要用途是做页面导航,方便用户查阅网页,了解网站结构,在框架中建立超链接,把框架的名称赋值给超链接的TARGET属性,则页面将在相应名称的框架中显示。
我们做一个顶部框架和嵌套超链接的右侧框架,框架集文件名为index.htm,顶部框架文件名为topframe.htm,左侧框架文件名为leftframe.htm,主框架文件名为mainframe.htm,在左侧框架定义超链接,链接的页面显示在主框架中,运行效果如下图:
图1.5.jpg
框架集文件index.htm代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>框架与超链接的应用</title>
  5. </head>
  6. <frameset rows="50,*" cols="*" framespacing="1">
  7.   <frame src="topframe.htm" name="topFrame" scrolling="NO" noresize>
  8.   <frameset rows="*" cols="180,*" framespacing="1">
  9.     <frame src="leftframe.htm" name="leftFrame" scrolling="NO" noresize>
  10.     <frame src="mainframe.htm" name="mainFrame" marginheight="30" marginwidth="20">
  11.   </frameset>
  12. </frameset>
  13. <noframes><body>
  14. </body></noframes>
  15. </html>
复制代码
左框架文件leftframe.htm,建立文字超链接,链接页面显示在主框架mainframe.htm中,代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>框架与超链接的应用</title>
  5. <style type="text/css">
  6. <!--
  7. a:link {
  8.         color: #0000FF;
  9. }
  10. a:visited {
  11.         color: #FF6600;
  12. }
  13. -->
  14. </style></head>
  15. <body>
  16. <h2 align="center">框架的使用</h2>

  17. <ol type="i">
  18. <!--在左侧框架定义超链接,链接的页面显示在主框架中-->
  19.   <li><a href="file01.htm" target="mainFrame">框架的基本结构</a>
  20.   <li><a href="file02.htm" target="mainFrame">框架集标记 <FRAMESET></a>
  21.   <li><a href="file03.htm" target="mainFrame">框架标记 <FRAME></a>
  22.   <li><a href="file04.htm" target="mainFrame">浮动框架标记 <IFRAME></a>
  23. </ol>
  24. </body>
  25. </html>
复制代码
其它页面的代码就不一一在这里显示了,如果有需要学习的朋友可以下载下面的压缩包。
框架与超链接.rar (3.34 KB, 下载次数: 3)
回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-7-8 09:24:58 | 显示全部楼层

图片标记<IMG>

在纯文本的HTML页面中加入图片,给原来单调乏味的页面添加生气。HTML语言中利用<IMG>标记插入图片。
图片标记<IMG>及其属性
在网站上,网页设计者都使用了大量精心设计的图片文件,图片有很多格式,如JPEG,GIF,BMP,TIF,PIC等。目前在吉常用的是JPEGGIF格式的图片。
HTML文件中,使用<IMG>标记插入图片,这个标记没有终止标记。当浏览器读到<IMG>标记时,就会显示它所代表的图片。IMG的属性如下图:
表1.31.jpg

1,  图像的URL地址属性SRC
SRC属性指出图像的URL地址,可以是绝对地址或者相对地址。
语法:<IMGSRC="file_name">
File_name:插入图像的路径
2,  图像的宽度和高度属性WIDTHHEIGHT
语法:<IMGSRC="file_name" WIDTH="value" HEIGHT="value">
WIDTH:设定图像的宽度,单位为像素
HTIGHT:设定图像的高度,单位为像素
3,  图像的水平间距和垂直间距属性HSPACEVSPACE
语法:<IMGSRC="file_name" HSPACE="value" VSPACE="value">
HSPACE:设定图像在水平方向和文字的距离,单位为像素
VSPACE:设定图像在垂直方向和文字的距离,单位为像素
4,  图像的边框属性BORDER
默认的图像是没有边框的,通过属性BORDER可以为图像设定边框。
语法:<IMGSRC="file_name" BORDER="value">
Value:边框线的宽度,单位为像素。
5,  图像的描述文字属性ALT
设定属性ALT,在浏览器中当鼠标放在图像上时,会出现所设置的描述文字,当浏览器不支付显示图像文件时,所设置的描述文字将代替图像显示。
语法:<IMGSRC="file_name" ALT="描述文字">
6,  显示低分辨率图像属性LOWSRC
考虑到有些用户温网速度慢的情况,可以在网页中插入低分辨率的图像,低分辨率的图像画质较差,但战胜空间小,传送文件较快,可以应用在网络拥塞的线路上。
语法:<IMGLOWSRC="file_name">
File_name:插入图像的路径
示例:在页面中插入图片,运行效果如下:
图1.7.jpg

程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>插入图片</title>
  5. </head>
  6. <body leftmargin="30px">
  7. <h3>插入图片文件</h3>
  8. <p style="width:400; height:300; font-size:14px;">
  9. <img src="shuicai.jpg" width="240" height="180" align="left">在纯文本的 HTML 页面中加入图片,给原来单调乏味的页面添加生气。 HTML 语言中利用 <IMG> 标记插入图片。这一小节讲解图片标记 <IMG> 及其属性、使用 <IMG> 标记插入 AVI 文件、图像和文字的排列、使用图像做超链接、创建图像映射。在网站上,网页设计者都使用了大量精心设计的图片文件。图片有多种格式,如JPEG,GIF,BMP,TIF,PIC等。目前在网页设计中常用的是JPEG和GIF格式的图片。</p>
  10. </body>
  11. </html>
复制代码
使用<IMG>标记插入AVI文件
AVIAudio Video Interleave)是一种音频视频交叉记录的数字视频文件格式,使用<IMG>标记,可以在网页中插入AVI文件。
1,  视频文件的URL地址属性DYNSRC
语法:<IMGDYNSRC=“file_name”>
File_name:插入图像路径
例如插入AVI文件01-01.avi,代码如下:
<IMG DYNSRC="01-01.avi" ALIGN="left"HSPACE=25 VSPACE=25>

2,  
视频文件循环播放次数属性LOOP
语法:<IMGDYNSRC="file_name" LOOP="value">
Value:取值为数值,也可以取值为infinite,即无限次播放。
例如将设定AVI文件循环播放5次,代码如下:
<IMG DYNSRC="01-01.avi" LOOP=5 ALIGN="left" HSPACE=25 VSPACE=25>
3,  视频文件播放方式属性START
通过属性START设定视频文件的播放方式。
语法:<IMGDYNSRC="file_name" START=value>
Value:有两种取值,取值为fileopen,表示在网页打开时即播放,取值为mouserover,表示当鼠标滑动到视频文件上之后才播放
例如要设定当网页打开时即播放AVI文件,代码如下:
<IMGDYNSRC="01-01.avi" START=fileopen LOOP=5 LOOPDELAY=5 ALIGN="left" HSPACE=25VSPACE=25>

回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-7-11 19:15:41 | 显示全部楼层
图像和文字的排列
图像和相信文字之间的排列可以通过<IMG>标记的ALIGN属性来设定。
语法:<IMGSRC="file_name" ALIGN="value">
ALIGN属性值如下图所示:
表1.32.jpg

下面做个图像和文字排列的示例,运行效果如下:
图1.8.jpg

代码如下:
  1. <font size="3"><html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>图像和文字的排列</title>
  5. </head>
  6. <body leftmargin="30px">
  7. <h3 align="center" style="width:400; ">图像和文字的排列</h3>

  8. <!--文字的中间线与图像的中间对齐-->
  9. <p style="width:400; height:80;font-size:14px;">
  10. <img src="shuicai.jpg" width="120" height="70" align="middle">
  11. (居中对齐)图像和相邻文字之间的排列可以通过 <IMG> 标记的 ALIGN 属性来设定。</p>
  12. <hr width="400" align="left">

  13. <!--图像在文字的右侧-->
  14. <p style="width:400; height:80; font-size:14px ">
  15. <img src="shuicai.jpg" width="120" height="70" align="right">
  16. (居右对齐)图像和相邻文字之间的排列可以通过 <IMG> 标记的 ALIGN 属性来设定。</p>
  17. <hr width="400" align="left">

  18. <!--文字的中间线与图像的顶部对齐-->
  19. <p style="width:400; height:80;font-size:14px  ">
  20. <img src="shuicai.jpg" width="120" height="70" align="top">
  21. (文字中间线与图像顶部对齐)图像和相邻文字之间的排列可以通过 <IMG> 标记的 ALIGN 属性来设定。</p>
  22. </body>
  23. </html>
  24. </font>
复制代码
图像超链接

在网页中,可以指定一个图像作为超链接,与使用文本作为超链接并没有太大的不同,当单击图像时,会跳转到链接的页面。
1,  使用图像作超链接
使用超链接标记<A>和图片标记<IMG>指定图像作为超链接。
语法:<A HREF="URL"><IMGSRC="file_name"></A>
例如:将图像01.gif链接到破洛洛论坛,代码如下:
<AHREF="http://bbs.poluoluo.com" TARGET="_blank"><img src="01.gif" width="300"height="150"></A>

2,  使用图像作超链接的注意点
为了让页面视觉效果更佳,可以指定图像作为超链接来设计页面头部的导航栏;也可以作为导航按钮,单击导航按钮使用户方便地在页面中向前或者向后查看跳转页面,但是也不能大篇幅的使用图像超链接,因为当浏览网站的速度较慢时,会使图像的载入和下载速度受到影响,还需要注意图像的选择,尽量使用与超链接有联系的图像来做为超链接,使之一目了然。

创建图像映射
图像不但可以建立超链接,还可以实现图像映射。图像映射是指一幅图像可以建立多个超链接,即在图像上定义多个区域,每个区域链接到不同的地址,这样的区域称为热区(也称为热点,Hot Spot
图像映射有两种,服务器端映射,(Server-side Image Map)和客户端映射(Client-side Image Map)。目前使用最多的是客户端映射,因为客户端映射使得图像上对应区域的传票以及链接的URL地址都在浏览器端诗篇,省去和服务器之间互传坐标和URL的时间。
HTML文件中,使用标记<MAP>可以创建图像映射
语法:<IMG SRC="file_name" USEMAP="#MapName">
<mapname="mapname">
<AREASHAPE="value" COORDS="坐标" HREF="URL" ALT="描述文字">
<AREA SHAPE="value" COORDS="坐标" HREF="URL" ALT="描述文字">
……………
</MAP>
<IMG>标记中设置属性USEMAP,确定创建图像映射,标记<MAP>属性如下图:
表1.33.jpg

在标记<MAP>中,根据属性SHAPE的取值不同,相应坐标的设定也不同
1,  设定属性SHAPE的属性值为rect
属性SHAPE取值为rect,表示矩形区域,属性COORDS的坐标形式为“X1Y1X2Y2”。其中X1Y1代表矩形左上角的X坐标和Y坐标,X2Y2代表矩形右下角的X坐标和Y坐标
2,  设定属性SHAPE的值为circle
属性SHAPE取值为circle,表示圆形区域,属性COORDS的坐标形式为“XYr”其中XY为圆心坐标,r为圆的半径。
3,  设定属性SHAPE的值为poly
取值为poly,表示多边形区域,属性COORDS的坐标形式为“X1Y1X2Y2…………..XnYn”。其中,XnYn代表构成多边形每一点的坐标值,n的取值为123………多边形有几边就有几对XY坐标。

下面我们做个在
Dreamweaver MX2004编辑器中创建图像映射的示例。
1,  Dreamweaver MX2004编辑器中,选中所要编辑的图像,在属性窗口中,有3种形状热点工具,分别是矩形,圆形和多边形热点工具。
2,  选择一种热点工具,在图像上按住鼠标左键拖动,确定所选区域。
3,  设置区域属性,在链接文本框中输入所要链接书签的名称,在替代文本框中输入区域链接的描述文字。
4,  重复23步骤,在图像上定义不同区域的链接。
所制作的结果如下图:
图1.9.jpg
代码如下:
  1. <html>
  2. <head>
  3. <title>创建图像映射</title>
  4. <style type="text/css">
  5. a:visited {color: #0000FF;}
  6. </style></head>
  7. <body>
  8. <p align="left" style="margin-left:30px ">
  9. <!--在标记<IMG>中使用属性usemap,确定使用图像映射-->
  10. <img src="shuicai.jpg" width="415" height="320" border="0" usemap="#Map"></p>
  11. <p style="font-size:14px ">导航栏:[<a href="#1">插入AVI文件</a>] [<a href="#2">图像和文字的排列</a>] [<a href="#3">图像超链接</a>] [<a href="#4">创建图像映射</a>]</p>
  12. <p align="center">
  13.   <!--制作图像映射-->
  14.   <map name="Map">
  15.     <area shape="circle" coords="328,71,59" href="#1" alt="插入AVI文件">
  16.     <area shape="poly" coords="47,155,127,12,172,114,169,158,155,160" href="#2" alt="图像和文字的排列">
  17.     <area shape="rect" coords="85,200,297,289" href="#3" alt="图像超链接">
  18.     <area shape="circle" coords="249,143,18" href="#4" alt="创建图像映射">
  19.     <area shape="poly" coords="83,86" href="#">
  20.   </map>
  21. </p>
  22. <ul type="square">
  23.   <li><h3><a name="1">使用 <IMG> 标记插入 AVI 文件</a></h3> <!--书签链接#1-->
  24. </ul>
  25. <p style="width:100px; margin-left:50px">AVI ( Audio Video Interleave )是一种音频视像交插记录的数字视频文件格式。使用 <IMG> 标记,可以在网页中插入 AVI 文件。AVI ( Audio Video Interleave )是一种音频视像交插记录的数字视频文件格式。使用 <IMG> 标记,可以在网页中插入 AVI 文件。</p>
  26. <ul type="square">
  27.   <li><h3><a name="2">图像和文字的排列</a></h3><!--书签链接#2-->   
  28. </ul>
  29. <p style="width:100px; margin-left:50px">图像和相邻文字之间的排列可以通过 <IMG> 标记的 ALIGN 属性来设定。</p>
  30. <ul type="square">
  31.   <li><h3><a name="3">图像超链接</a></h3><!--书签链接#3-->
  32. </ul>
  33. <p style="width:100px; margin-left:50px">在网页中,可以指定一个图像做为超链接。与使用文本做为超链接并没有太大不同,当单击图像时,会跳转到链接的页面。在网页中,可以指定一个图像做为超链接。与使用文本做为超链接并没有太大不同,当单击图像时,会跳转到链接的页面。</p>   
  34. <ul type="square">
  35.   <li><h3><a name="4">创建图像映射</a></h3><!--书签链接#4-->
  36. </ul>
  37. <p style="width:100px; margin-left:50px">图像不但可以建立超链接,还可以实现图像映射。图像映射是指一幅图像可以建立多个超链接,即在图像上定义多个区域,每个区域链接到不同的地址,这样的区域称为热区(也称为热点, Hot Spot )。

  38. 图像映射有两种:服务器端映射( Server-side Image Map )和客户端映射( Client-side Image Map )。目前使用最多的是客户端映射,因为客户端映射使得图像上对应区域的坐标以及链接的 URL 地址都在浏览器端读入,省去和服务器之间互传坐标和 URL 的时间。</p>
  39. </body>
  40. </html>
复制代码

评分

参与人数 1威望 +5 贡献 +5 收起 理由
xiaoc + 5 + 5 赞一个!

查看全部评分

回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-7-12 16:50:10 | 显示全部楼层
插入多媒体文件标记<EMBED>
HTML文件中可以直接嵌入多媒体文件。多媒体是指利用计算机技术,把多种媒体综合在一起,使之建立起逻辑上的联系,并能对其进行各种处理的一种方法。多媒体主要包括文字,声音,图像和动画等各种形式。在HTML文件中使用标记<EMBED>嵌入多媒体文件。
语法:<EMBEDSRC="file_url" WIDTH="VALUE" HEIGHT="VALUE" HIDDEN="hidden_value" AUTOSTART="auto_value"LOOP="loop_value"></EMBED>
标记<EMBED>属性如下图所示:
表1.34.jpg
使用<EMBED>标记可以嵌入MPGMP3AVIFLASH动画等,下面我们做个嵌入AVI示例,其他格式文件语法相同。
代码运行效果如下:
图1.12.jpg

代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>播放AVI视频文件</title>
  5. </head>
  6. <body leftmargin="40">
  7. <h3>播放AVI视频文件</h3>
  8. <embed src="01-01.avi" width="300" height="260" hidden="no" autostart="true"></embed>
  9. </body>
  10. </html>
复制代码

评分

参与人数 1威望 +2 贡献 +2 收起 理由
xiaoc + 2 + 2 赞一个!

查看全部评分

回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-7-13 14:53:22 | 显示全部楼层

嵌入Java Applet

本帖最后由 zybx520 于 2012-7-13 14:55 编辑


Java语言可以编写两种类型的程序,应用程序(Application)和小应用程序(Applet)。应用程序是可以独立运行的程序,而小应用程序不能独立运行,它需要嵌入到HTML文件中,遵循一套编写,并且在支持Java的浏览器上运行,JavaApplet可以实现图形控制,字体和颜色控制,动画和声音的插入,人机交互以及网络交流等功能。
当用户访问嵌有JavaApplet的网页时,Applet被下载到用户的计算机上执行,Java Applet程序需要编译才能运行,所以计算机需要安装Sun公司的JDKJava Development KitJava开发工具包)进行编译。
HTML文件中,使用标记<APPLET>….</APPLET>嵌入Java Applet
语法:<APPLETCODE=file_name" WIDTH="value" HEIGHT="value">
<PARAM NAME="param_name"VALUE="param_value">
……..
</APPLET>
APPLE标记属性如下图所示:
表1.35.jpg

例如在HTML页面中嵌入Java Applet程序yanhua.class,实现烟花效果,代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>嵌入Java Applet</title>
  5. </head>
  6. <body>
  7. <applet code="yanhua.class" width="300" height="400">
  8. <param name="image" value="aa.jpg">
  9. </applet>
  10. </body>
  11. </html>
复制代码



评分

参与人数 1威望 +1 破洛币 +10 贡献 +1 收起 理由
xiaoc + 1 + 10 + 1 赞一个!

查看全部评分

回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-7-14 11:11:20 | 显示全部楼层

滚动效果标记<MARQUEE>

本帖最后由 zybx520 于 2012-7-14 11:13 编辑

HTML页面中,可以实现文字或者图片的滚动效果,比如可以使一段文字或图片从浏览器的左边进入,横穿屏幕,再从浏览器的右边退出。在静的页面中使用动的效果,可以突出页面中想要强调的内容。在HTML语言中,使用标记<MARQUEE>实现滚动效果。
语法:<MARQUEE>滚动内容</MARQUEE>
标记<MARQUEE>属性内容如下图所示:
表1.36.jpg

1,  滚动对齐属性ALIGN
语法:<MARQUEEALIGN="VALUE">滚动内容</MARQUEE>
ALIGN:滚动内容对齐方式,值为topmiddlebottom,分别代表向上,居中,向下对齐。
2,  滚动的方向属性DIRECTION
语法:<MARQUEEDIRECTION="VALUE">滚动内容</MARQUEE>
DIRECTION的属性值有四种,
up由下向上滚动,
down由上向下滚动,
left由右向左滚动,
right由左向右滚动。
3,  滚动方式属性BEHAVIOR
语法:<MARQUEEBEHAVIOR="VALUE">滚动内容</MARQUEE>
BEHAVIOR属性有三个取值,
Scroll:循环滚动
Slide:一次滚动
Alternate:交替滚动
4,  滚动次数属性LOOP
语法:<MARQUEELOOP="VALUE">滚动内容</MARQUEE>
VALUE:滚动的次数,取值为-1或者infinite表示无限次滚动。
5,  滚动速度属性SCROLLAMOUNT
语法:<MARQUEESCROLLAMOUNT="VALUE">滚动内容</MARQUEE>
属性SCROLLAMOUNT是设置滚动的水平距离,设置的值越大,速度越快,滚动内容看起来就像是在跳动一样,VALUE的取值为像素。
6,  滚动延迟属性SCROLLDELAY
语法:<MARQUEESCROLLDELAY="VALUE">滚动内容</MARQUEE>
属性SCROLLDELAY是设置滚动时间的延迟,设置的值越大,滚动的速度越慢,VALUE代表需要延迟的时间。
7,  滚动区域的宽度和高度属性WIDTHHEIGHT
语法:<MARQUEEWIDTH="VALUE" HEIGHT="VALUE">滚动内容</MARQUEE>
WIDTH:滚动区域宽度,单位为像素或者百分比形式表示
HEIGHT:滚动区域的高度,单位为像素或者百分比形式表示
8,  滚动背景颜色属性BGCOLOR
语法:<MARQUEEBGCOLOR="COLOR_VALUE">滚动内容</MARQUEE>
COLOR_VALUE:使用颜色的英文名称或者十六进制值表示
9,  滚动的水平间距和垂直间距属性HSPACEVSPACE
语法:<MARQUEEHSPACE="VALUE" VSPACE="VALUE">滚动内容</MARQUEE>
HSPACE:水平间距,单位为像素
VSPACE:垂直间距,单位为像素
滚动的基本属性介绍到这里差不多完了,下面我们做个文字和图像滚动的示例。运行效果如下图:
图1.15.jpg
代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>滚动效果标记<MARQUEE></title>
  5. </head>
  6. <body>
  7. <!--  文字循环向右滚动 -->
  8. <marquee width="300" height="40" bgcolor="#FF9900" hspace="5" vspace="15"  direction="right" behavior="scroll" scrollamount="5" scrolldelay="0">
  9. <font color="#0099FF" style="font-weight:bold ">文字以循环方式向右滚动-破洛洛欢迎你</font><img src="shuicai.jpg" width="29" height="22"></marquee>
  10. <p>

  11. <!--  文字交替向左滚动  -->
  12. <marquee width="300" height="40" bgcolor="#0000FF" hspace="60" direction="left" behavior="alternate" scrollamount="5" scrolldelay="0">
  13. <font color="#FFFFFF" style="font-weight:bold "><img src="shuicai.jpg" width="29" height="22">文字以交替方式向左滚动-破洛洛欢迎你</font></marquee><p>

  14. <!--  文字向左滚动  -->
  15. <marquee width="300" height="40" bgcolor="#FF0000"hspace="5"  direction="left" behavior="slide" scrollamount="5" scrolldelay="0" loop="3">
  16. <font color="#FFFFFF" style="font-weight:bold "><img src="shuicai.jpg" width="29" height="22">文字向左滚动-破洛洛欢迎你</font></marquee>
  17. </body>
  18. </html>
复制代码

回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-7-15 10:35:30 | 显示全部楼层

背景音乐标记<BGSOUND>

在浏览网页时,常常会听到悦耳的音乐,这就是在网页中使用了背景音乐的效果。以前我们可以使用<EMBED>嵌入音乐文件,但<EMBED>不能实现音乐文件无限次循环播放。在HTML语言中支持真正背景音乐的标记<BGSOUND>,它并不会显示出来,通过它可以嵌入多种格式的音乐文件,常用的是MIDI文件,MIDI接口技术的作用是使电子乐器与电子乐器,电子乐器与计算机之间能过一种通用的通信协议进行通信,MIDI技术使得乐器与算机之间的通信数据量很低,便于在互联网传输数据。
语法:<BGSOUNDSRC="file_name" LOOP="loop_value">
SRC:背景音乐的路径
LOOP:播放的循环次数,取值为-1或者infinite表示无限次循环。
这里有一点需要提到,使用<BGSOUND>嵌入背景音乐的网页,在网页最小化的时候,音乐停止播放。
例如在网页中嵌入MID格式的背景音乐,代码哪下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>背景音乐标记<BGSOUND></title>
  5. </head>
  6. <body>
  7. 播放背景音乐......
  8. <bgsound src="01-01.mid" loop="-1">
  9. </body>
  10. </html>
复制代码
HTML的基础到这里基本完毕了,下面我们介绍两个典型应用。

应用图片标记<IMG>制作动态按钮
HTML页面中可以使用图片标记<IMG>制作动态按钮,即当鼠标放在图片上时,图片会自动更换,鼠标离开之后,图片又会恢复成原来的样子。
HTML页面中嵌入<IMG>标记,分别设置属性onmouseover,属性onmouseout,使鼠标悬停时显示的图片为“01-02.jpg”,鼠标离开时显示的图片为“01-01.jpg
代码如下:
  1. <font size="3"><html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>应用图片标记<IMG>制作动态按钮</title>
  5. </head>
  6. <body>
  7. <h3 align="center">实现动态按钮效果</h3>
  8. <p align="center">
  9. <img src="01-01.jpg" name="anniu" onmouseover="anniu.src='01-02.jpg'" onmouseout="anniu.src='01-01.jpg'" alt="应用图片标记<IMG>制作动态按钮">
  10. </p>
  11. </body>
  12. </html>
  13. </font>
复制代码
运行效果图就不上传了,大家可以自己找两张小图片试试。

制作浮动表格
浮动表格是指文字围绕表格显示的一种模式,运行结果如下图所示。
图1.18.jpg
在标记<TABLE>中设置ALIGN属性值为“left”,使表格居左对齐,这样文字就会显示在表格的右侧,如果末设置ALIGN属性,文件将显示在表格下方
代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>制作浮动表格</title>
  5. <style type="text/css">
  6. <!--
  7. body,td,th {font-size: 14px;}
  8. -->
  9. </style>
  10. </head>
  11. <body>
  12. <table width="405" height="180" border="10" align="left" cellpadding="0" cellspacing="2">
  13. <caption><B>周工作计划</B></caption>
  14.   <tr>
  15.     <td colspan="2" rowspan="2"></td>
  16.     <td colspan="3" align="center">计划</td>
  17.   </tr>
  18.   <tr>
  19.     <td align="center">星期一</td>
  20.     <td align="center">星期二</td>
  21.     <td align="center">星期三</td>
  22.   </tr>
  23.   <tr>
  24.     <td rowspan="2" align="center">时
  25. 间</td>
  26.     <td align="center">上
  27. 午</td>
  28.     <td>计划1</td>
  29.     <td>计划2</td>
  30.     <td>计划3</td>
  31.   </tr>
  32.   <tr>
  33.     <td align="center">下
  34. 午</td>
  35.     <td>计划4</td>
  36.     <td>计划5</td>
  37.     <td>计划6</td>
  38.   </tr>
  39. </table>
  40. <p>制作浮动表格,使文字显示在表格的周围.

  41. 左侧是一个周工作计划清单,可以记录人员的工作项目清晰工作流程以及工作任务.每天应填写此清单,做为每日工作总结.</p>
  42. </body>
  43. </html>
复制代码

HTML基础知识更新到这里基本完毕了,接下来的一段时间,会给大家讲讲CSS样式表。

评分

参与人数 1威望 +5 破洛币 +50 贡献 +5 收起 理由
xiaoc + 5 + 50 + 5 很给力!

查看全部评分

回复 支持 反对

使用道具 举报

900

主题

5786

帖子

14万

积分

管理员

Rank: 9Rank: 9Rank: 9

活跃会员优秀版主一等奖三等奖特别贡献金会员帮助达人优秀男会员优秀版主才华横溢

发表于 2012-7-15 16:32:44 | 显示全部楼层
终于完了呀,辛苦了~~~
回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-7-15 17:55:03 | 显示全部楼层
xiaoc 发表于 2012-7-15 16:32
终于完了呀,辛苦了~~~

知道辛苦了也不多给点奖励真是的。发个百八十万金币来花花
回复 支持 反对

使用道具 举报

1199

主题

1万

帖子

3万

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人活跃会员热心会员灌水之王优秀版主论坛元老优秀女会员优秀版主特别贡献

发表于 2012-7-15 21:25:58 | 显示全部楼层
好长啊....
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|破洛洛 ( 黔ICP备14000367号  |版权声明

GMT+8, 2018-11-16 20:04 , Processed in 0.262174 second(s), 28 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表