破洛洛首页

破洛洛论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
楼主: zybx520

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

  [复制链接]

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-6-28 00:39:36 | 显示全部楼层
还好了,这周六公司要搞两周年毕业嘉年华,会忙一些,但我会尽量每天把自己该干的干了,谢谢大家的支持
回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-6-28 00:46:34 | 显示全部楼层
等忙完了这一周,还会给大家写一些ASP和PHP的教程,希望大家好好学习,天天向上,嘿嘿。
回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-6-28 17:49:01 | 显示全部楼层
表格的标题与表头
HTML语言中,可以通过标记<CAPTION>为表格添加标题
语法:<CAPTION>…..</CAPTION>
可以通过表格标题的ALIGN属性和VALIGN属性,设置标题在水平方向和垂直方向相对于表格的对齐方式。
1,  表格标题的水平对齐属性ALIGN
默认情况下,表格的标题水平是居中的,可以能过设置ALIGN来改变标题水平对齐的方式
语法:<CAPTIONALIGN="LEFT">…..</CAPTION>
<CAPTION ALIGN="CENTER">…..</CAPTION>
<CAPTION ALIGN="RIGHT">…..</CAPTION>
LEFT:居左对齐,
CENTER:居中对齐
RIGHT:居右对齐
2,  表格标题的垂直对齐属性<VALIGN>
通过属性VALIGN,可以设定标题放在表格的上方或者下方,默认情况下,表格的标题是放在上方的。
语法:<CAPTIONVALIGN="TOP">……</CAPTION>
<CAPTION VALIGN="BOTTOM">……</CAPTION>
TOP:在表格上方
BOTTOM:在表格下方
表格的表头<TH>
表头是指表格的第一行,通过标记<TH>实现文字居中对齐并且加粗显示。
语法:<TABLE>
<TR>
<TH>…….</TH>
………
</TR>
<TR>
<TD>…….</TD>
………
</TR>
………..
</TABLE>
行标记属性<TR>
行标记<TR>的属性用于设定表格中某一行的属性。行标记<TR>属性如下图所示:
行标记.jpg
1,  行的水平对齐属性<ALIGN>
语法:<TRALIGN="LEFT">
<TR ALIGN="CENTER">
<TR ALIGN="RIGHT">
LEFT:居左对齐,
CENTER:居中对齐
RIGHT:居右对齐
2,  行的垂直对齐属性<VALIGN>
语法:<TRVALIGN="TOP">
<TR VALIGN="MIDDLE">
<TR VALIGN="BOTTOM">
LEFT:居上对齐,
CENTER:居中对齐
RIGHT:居下对齐
3,  行的背景颜色属性BGCOLOR
语法:<TRBGCOLOR=COLOR_VALUE>
COLOR_VALUE:使用颜色的英文名称或者十六进制值表示。
4,  行的边框色属性BORDERCOLOR
设置属性BORDERCOLOR可以改变行的边框颜色
语法:<TRBORDERCOLOR=COLOR_VALUE>
COLOR_VALUE:使用颜色的英文名称或者十六进制值表示。
5,  行的亮边框色属性BORDERCOLORLIGHT
语法:<TRBORDERCOLORLIGHT=COLOR_VALUE>
COLOR_VALUE:使用颜色的英文名称或者十六进制值表示。
6,  行的暗边框色属性BORDERCOLORDARK
语法:<TRBORDERCOLORDARK=COLOR_VALUE>
COLOR_VALUE:使用颜色的英文名称或者十六进制值表示。
回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-6-29 18:08:06 | 显示全部楼层

单元格标记<TD>属性

本帖最后由 zybx520 于 2012-6-29 18:09 编辑

单元格标记<TD>的属性用于设定表格中某一单元格的属性,标记<TD>属性如下图:
单元格标记.jpg
1,  单元格的宽度和高度属性WIDTH,HEIGHT
在默认的情况下,单元格的宽度和高度会根据内容自动的调整,也可以设置其属性值来控制宽度和高度。
语法:<TDWIDTH=VALUE HEIGHT=VALUE>
VALUE:单位为像素或者百分比
2,  单元格的水平对齐属性ALIGN
调整单元格的水平对齐方式
语法:<TDALIGN="LEFT">
<TD ALIGN="CENTER">
<TD ALIGN="RIGHT">
LEFT:居左对齐
CENTER:居中对齐
RIGHT:居右对齐
3,  单元格的垂直对齐属性VALIGN
语法:<TD VALIGN="TOP">
<TD VALIGN="MIDDLE">
<TD VALIGN="BOTTOM">
TOP:居上对齐
MIDDLE:居中对齐
BOTTOM:居下对齐
4,  单元格的背景色属性BGCOLOR
语法:<TDBGCOLOR=COLOR_VALUE>
COLOR_VALUE:使用颜色的英文名称或者是十六进制值表示
5,  单元格的背景图像属性BACKGROUND
语法:<TDBACKGROUND=FILE_NAME>
FILE_NAME:存放背景图片文件的完整路径或相对路径
6,  单元格的边框色属性BORDERCOLOR
语法:<TDBORDERCOLOR=COLOR_VALUE>
COLOR_VALUE:使用颜色的英文名称或者是十六进制值表示
7,  单元格的亮边框属性BORDERCOLORLIGHT
语法:<TDBORDERCOLORLIGHT=COLOR_VALUE>
COLOR_VALUE:使用颜色的英文名称或者是十六进制值表示
8,  单元格的暗边框属性BORDERCOLORDARK
语法:<TDBORDERCOLORDARK=COLOR_VALUE>
COLOR_VALUE:使用颜色的英文名称或者是十六进制值表示
9,  单元格的跨行属性ROWSPAN
设置单元格的跨行属性ROWSPAN可以实现某个单元格在水平方向上跨越多个单元格。
语法:<TDROWSPAN=VALUE>
VALUE:跨越多少个单元格,ROWSPAN的属性值就是多少
10,单元格的跨列属性COLSPAN
设置单元格的跨列属性COLSPAN可以实现某个单元格在垂直方向上跨越多个单元格
语法:<TDCOLSPAN=VALUE>
VALUE:跨越多少个单元格,COLSPAN的属性值就是多少
表格结构标记
为了在HTML源代码中区分表格结构,HTML语言规定了<THEAD><TBODY><TFOOT>三个标记,分别应用于表格的表首,表主体和表尾。
1,  表格的表首标记<THEAD>
语法:<THEADALIGH=VALUE BGCOLOR=COLOR_VALUE VALIGN=VALUE>
ALIGN:代表水平对齐,value值为left居左,center居中,right居右
BGCOLOR:表首行的背景颜色
VALIGN;代表垂直对齐,value值为top居上,middle居中,bottom居下
2,  表格的主体标记<TBODY>
语法:<TBODYALIGN=VALUE BGCOLOR=COLOR_VALUE VALIGN=VALUE>
ALIGN:代表水平对齐,value值为left居左,center居中,right居右
BGCOLOR:表主体的背景颜色
VALIGN;代表垂直对齐,value值为top居上,middle居中,bottom居下
3,  表格的表尾属性<TFOOT>
语法:<TFOOTALIGN=VALUE BGCOLOR=COLOR_VALUE VALIGN=VALUE>
ALIGN:代表水平对齐,value值为left居左,center居中,right居右
BGCOLOR:表尾行的背景颜色
VALIGN;代表垂直对齐,value值为top居上,middle居中,bottom居下
关于HTML表格制作基本就讲完了, 下面我们做一个示例,代码运行效果如下图:
表格制作示例.jpg
程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>制作表格</title>
  5. </head>
  6. <body topmargin="0">
  7. <!--表格宽度为80%,边框宽为2,居中对齐,单元格间距为10,边距20,背景颜色为#3399FF,亮边框色为#CC6600,内部边框样式为仅显示列边框-->
  8. <table width="80%"  border="2" align="center" cellpadding="10" cellspacing="6" bordercolor="#3399FF" bordercolorlight="#CC6600" rules="rows">
  9.   <caption align="center">表格的网页排版</caption>
  10.   <tr>
  11.     <th height="35" colspan="3" scope="col">表格的制作</th>
  12.   </tr>
  13.   <!--表主体标记<tbody>-->
  14.   <tbody>
  15.   <tr>
  16.     <td width="6%" rowspan="3" background="01-03.gif"></td>
  17.     <td width="42%" height="25" valign="middle" bgcolor="#D8E1F8"> 表格的标题与表头标记</td>
  18.     <td width="52%" height="25" valign="middle"><CAPTION>,<TH></td>
  19.   </tr>
  20.   <tr>
  21.     <td height="25" valign="middle" bgcolor="#D8E1F8"> 行标记与列标记</td>
  22.     <td height="25" valign="middle"><TR>,<TD></td>
  23.   </tr>
  24.   <tr>
  25.     <td height="25" valign="middle" bgcolor="#D8E1F8"> 表格结构标记 </td>
  26.     <td height="25" valign="middle"> <THEAD> , <TBODY> , <TFOOT> </td>
  27.   </tr>
  28.   </tbody>
  29.   <!--表尾标记<tfoot>-->
  30.   <tfoot>
  31.   <tr>
  32.     <td height="25" colspan="3">精美网页</td>
  33.   </tr>
  34.   </tfoot>
  35. </table>
  36. </body>
  37. </html>
复制代码


回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-7-1 16:56:50 | 显示全部楼层

表单的建立

表单是客户端和服务端交互的重要手段,利用可以收集客户端提交的有关信息。例如,在一个电子商务网站中申请成为会员,用户需要填写网站提供的表单,其内容包括用户名,密码,联系方式等个人信息。
提交表单信息的处理过程:单击表单的提交按钮时,输入在表单中的信息会上传到服务器,然后由服务器上的相关应用程序进行处理,处理后或者将用户提交的信息储存在服务器商的数据库中,或者将一些信息返回给用户浏览器端。
表单的结构
表单是网页上的一个特定区域,这个区域是由<FORM></FORM>标记定义的,其他的表单对象,都要插入到表单之中,单击提交按钮时,提交的也是表单范围之内的内容。表单区域还携带表单的相关信息,例如处理表单的脚本程序的位置,提交表单的方法等。
表单的结构:<FORMNAME="FORM_NAME" METHOD="METHOD" ACTION="URL" ENCTYPE="VALUE" TARGET="TARGET_WIN">………..</FORM>
其标记属性如下图所示:
表单FORM属性.jpg
1,表单的NAME属性
通过定义表单的名称可以准确地控制表单及其内容。
语法:<FORMNAME="FORM_NAME">……….</FORM>
FORM_NAME:表单的名称。
2,表单的METHOD属性
通过METHOD属性,可以设定表单内容的提交方式。
语法:<FORM METHOD="METHOD">……..</FORM>
METHOD:取值有GETPOSTGET方法是将表单内容附加在URL地址后面,POST方法是将用户在表单中赶写的数据包含在表单的主体中,一起传送到服务器上的处理程序,在浏览器的地址栏不显示提交的信息。METHOD属性默认方法为GET方法。
3,表单的ACTION属性
ACTION属性中定义表单提交的地址,也就是相应的处理页面
语法:<FORMACTION="URL">………….</FORM>
URL:提交的绝对地址或者相对地址
4,表单的ENCTYPE属性
设置表单内容的编码方式,在无组件上传奇过程的定义中,就会使用MINE编码方式提交数据。
语法:<FORMENCTYPE="VALUE">……</FORM>
VALUE的取值有3
Text/plain:以纯文本的形式传送信息。
Application/x-www-Form-urlencoded:默认的编码形式。
Multipart/Form-date:使用MINE编码。
5,表单的TARGET属性
设置返回信息的显示方式
语法:<FORMTARGET="TARGET">……..</FORM>
TARGET的属性值如下图:
表单的TARGET属性.jpg

回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-7-4 20:29:11 | 显示全部楼层
本帖最后由 zybx520 于 2012-7-4 20:31 编辑

输入域标记<INPUT>
输入域标记<INPUT>是表单中最常用的标记之一,常用的文本域,按钮,单选复选框等构成了一个完整的表单。
语法:<FORM>
<INPUT NAME="FILE_NAME" TYPE="TYPE_NAME">
</FORM>
NAME:输入域的名称
TYPE:输入域的类型
TYPE的属性值如下图:
1.22.jpg

1,  文字域TEXT
TEXT属性值用来设定在表单的文本域中,可以输入任何类型的文本,数字,字母等字符串,输入的内容以单选显示。
语法:<FORM>
<INPUTTYPE="text" NAME="field_name" MAXLENGTH="value" SIZE="value" VALUE="field_value">
</FORM>
文字域TEXT对应属性的含义如下图所示:
1.23.jpg

2,  密码域PASSWORD
在表单中还有一种文本域的形式为密码域,输入到文本域中的文字均以星号或者圆点显示。
语法:<FORM>
<INPUTTYPE="password" NAME="field_name" MAXLENGTH="value" SIZE="value">
</FORM>
密码域PASSWORD对应属性含义如下图:
1.24.jpg

3,  文件域FILE
文件域的外观是一个文本框加一个浏览按钮,用户即可直接将要上传给网站的文件路径赶写在文本框中,也可以单击浏览按钮,在用户的计算机中选择要上传的文件,然后通过表单上传到服务器,例如上传附件,office文档,图片等各种类型的文件,都要用到文件域。
语法:<FORM>
<INPUTtype="file" NAME="field_name">
</FORM>
4,  单选按钮RADIO
单选按钮在选项组中只允许选择一项
语法:<FORM>
<INPUTType="RADIO" NAME="field_name" Value="value">
</FORM>
示例:通过单选按钮选择性别,代码如下:
<FORM>
<inputtype="RADIO" NAME="SEX" Value="">
<input type="RADIO" NAME="SEX" Value="">
</FORM>
5,  复选按钮CHECKBOX
复选按钮能够进行项目的多项选择。浏览者填写表单时,有时需要选择多个项目,例如收集个人信息时,要求在个人爱好的选项中进行多项选择等。
语法:<FORM>
<INPUTType="checkbox" NAME="field_name" checked Value="value">
</FORM>
6,  提交按钮SUBMIT
单击提交按钮后,可以实现表单内容的提交
语法:<FORM>
<INPUTType="submit" NAME="field_name" Value="button_text">
</FORM>
VALUE:代表显示在按钮上面的文字。
7,  重置按钮RESET
单击重置按钮后,可以清除表单中的内容,恢复默认的表单内容设定。
语法:<FORM>
<INPUTType="reset" NAME="name" value="button_text">
</FORM>
8,  普通按钮BUTTON
按钮可以激发提交表单的动作,可以在用户需要修改表单的时候,将表单恢复到初始的状态,还可以依照程序的需要,发挥其他作用。普通按钮一般配合JavaScript脚本来进行表单的处理
语法:<FORM>
<INPUTType="button" NAME="field_name" value="button_text">
</FORM>
9,  隐藏域HIDDEN
隐藏域在页面中对于用户而言是不可见的,插入隐藏域的目的在于通过隐藏的方式收集或者发送信息。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到相关页面。
语法:<FORM>
<INPUTType="hidden" NAME="name" value="value">
</FORM>
10,图像域IMAGE
图像域指的是可以用在提交按钮位置上的图片,这幅图片具有按钮的功能。
语法:<FORM>
<INPUTType="image" NAME="name" SRC="image_url">
</FORM>
Image_url:图片存放的路径
文字域标记TEXTAREA
文字域标记TEXTAREA用来制作多行的文字域,可以在其中输入更多的文本。
语法:<FORM>
<TEXTAREANAME="NAME" ROWS="VALUE" COLS="VALUE" VALUE="VALUE"
……文本的内容
</TEXTAREA>
</FORM>
文字域标记属性如下图所示:
1.25.jpg
选择域标记SELECTOPTION
通过选择域标记SELECTOPTION可以建立一个列表或者菜单,菜单节省空间,正常状态下只能看到一个选项,单击按钮打开菜单后才能看到全部的选项。列表可以显示一定数量的选项,如果走出了这个数量,会自动出现滚动条,浏览者可以通过拖动滚动条来查看各选项。
语法:<FORM>
<SELECTNAME="name" SIZE="value" Multiple>
<optionvalue="value" Selected>选项1
<optionvalue="value">选项2
<option value="value">选项3
…………..
</select>
</FORM>
Multiple:表示以菜单方式显示数据,省略则以列表方式显示数据。
选择域标记属性如下图:
1.26.jpg
表单的应用差不多讲到这里就结束了,下面我们做一个简单的示例:运行效果如下图:
表单应用效果图.jpg
代码如下:
  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{font-size:14px}
  8. -->
  9. </style>
  10. </head>
  11. <body topmargin="0">
  12. <form enctype="multipart/form-data">
  13. <table width="550"  border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#3399FF">
  14.   <tr align="center" valign="middle" bgcolor="#FFFFFF">
  15.     <td height="30" colspan="4" bgcolor="#B7DAF9">个人简历</td>
  16.   </tr>
  17.   <tr bgcolor="#FFFFFF">
  18.     <td width="16%" height="30">真实姓名:</td>
  19.     <td height="30" colspan="3"><input name="name" type="text" id="name" maxlength="50"></td>
  20.   </tr>
  21.   <tr bgcolor="#FFFFFF">
  22.     <td height="30">年龄:</td>
  23.     <td width="36%" height="30"><input name="age" type="text" id="age" size="10" maxlength="10"></td>
  24.     <td width="9%" height="30">性别:      </td>
  25.     <td width="39%" height="30">
  26.         <input name="sex" type="radio" value="0" checked>男
  27.     <input type="radio" name="sex" value="1">女
  28. </td>
  29.   </tr>
  30.   <tr bgcolor="#FFFFFF">
  31.     <td height="30">毕业院校:</td>
  32.     <td height="30" colspan="3"><input name="school" type="text" id="school" maxlength="50"></td>
  33.   </tr>
  34.   <tr bgcolor="#FFFFFF">
  35.     <td height="30">所学专业:</td>
  36.     <td height="30" colspan="3"><select name="spe" id="spe">
  37.       <option value="0">选择专业</option>
  38.       <option value="1">计算机应用</option>
  39.       <option value="2">土木工程</option>
  40.       <option value="3">软件工程师</option>
  41.       <option value="4">注册会计师</option>
  42.     </select></td>
  43.   </tr>
  44.   <tr bgcolor="#FFFFFF">
  45.     <td height="30">联系方式:</td>
  46.     <td height="30" colspan="3"><input name="tel" type="text" id="tel"></td>
  47.   </tr>
  48.   <tr bgcolor="#FFFFFF">
  49.     <td height="30">照片上传:</td>
  50.     <td height="30" colspan="3"><input name="pic" type="file" id="pic"></td>
  51.   </tr>
  52.   <tr bgcolor="#FFFFFF">
  53.     <td height="30">爱 好:</td>
  54.     <td height="30" colspan="3">
  55.             <input name="favorite" type="checkbox" id="favorite" value="0"> 计算机        
  56.         <input name="favorite" type="checkbox" id="favorite" value="1">英语        
  57.         <input name="favorite" type="checkbox" id="favorite" value="2">体育      
  58.         <input name="favorite" type="checkbox" id="favorite" value="3">旅游
  59.     </td>
  60.   </tr>
  61.   <tr bgcolor="#FFFFFF">
  62.     <td height="30">工作简历:</td>
  63.     <td height="30" colspan="3"><textarea name="summery" cols="60" rows="8" id="summery"></textarea></td>
  64.   </tr>
  65.   <tr bgcolor="#FFFFFF">
  66.     <td height="30"> </td>
  67.     <td height="30" colspan="3"><input type="submit" name="Submit" value="提交">
  68.       <input type="reset" name="Submit2" value="重置"></td>
  69.   </tr>
  70. </table>
  71. </form>
  72. </body>
  73. </html>
复制代码

评分

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

查看全部评分

回复 支持 反对

使用道具 举报

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 赞一个!

查看全部评分

回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2019-3-22 08:15 , Processed in 0.265520 second(s), 29 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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