网页设计表格、表单及框架_第1页
网页设计表格、表单及框架_第2页
网页设计表格、表单及框架_第3页
网页设计表格、表单及框架_第4页
网页设计表格、表单及框架_第5页
已阅读5页，还剩32页未读， 继续免费阅读

下载本文档

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

文档简介

第3章表格、表单及框架

3.1

表格3.2

表单3.3

框架3.1表格

3.1.1表格的基本结构

用表格显示信息条理清楚，使浏览者一目了然。表格在网页中还有协助布局的作用，可以把文字、图像、声音甚至视频，或者另一个表格，组织到表格的不同行列中，以制作整齐、清晰的页面。HTML具有强大的建立、显示表格的功能。

HTML的表格由行和列组成，每一行的一个列就是一个单元格，如右图所示：

创建HTML表格需要使用下列标签：(1)<table>、</table>——表格标签对，用于定义一个表格；(2)<tr>、</tr>——行标签对，用于定义一个行，只能嵌套在表格标签对中(3)<td>、</td>——单元格标签对，用于定义一个单元格，只能嵌套在行标签对中。<td>、</td>中放单元格内容，即要显示的数据。3.1.1表格的基本结构

【例3-1】创建一个简单表格，放一组学生信息。

<html><head><title>简单表格示例</title></head><body><table><!--定义一个表-->

<tr><!--定义一行表格(第1行)--><td>学号</td><!--第1行的第1列--><td>姓名</td><td>性别</td><!--第1行的第3列--></tr><tr><!--定义第2行--><td>08003301</td><td>王明</td><td>男</td></tr><tr><!--定义第3行--><td>08003302</td><td>张鸿</td><td>女</td></tr> </table><!--表格结束--></body></html>

常见的表格上面往往有个标题，第一行(表头)也常常用突出的字体(如黑体、粗体等)等来显示，以突显其内容。这些在HTML表格中可以利用表格下面两个标签来实现：<caption></caption>——标题标签对，用于定义一个表格标题，它只能放在<table>标签对中，并在<tr>之前。<caption>的align、valign属性用于设置标题的对齐方式，取值同<td>，默认在表的上方中间。<th></th>——要突出某个单元格内容，只要将希望突显内容的单元格标签对<td>、</td>改用表头单元格标签对<th>、</th>即可，甚至只需要将<td>改为<th>就可以了。3.1.2表格的常用属性

<table>的常用属性

2.行、单元格的常用属性

【例3-2】<table>属性设置示例<body>

<!--表格1-->

<tableborder=10width=90%cellspacing=10><caption>学生表</caption>

<!--定义表格标题-->

<tr><th>学号</th>

<!--表头单元格-->

<th>姓名</td>

<!--表头单元格-->

<th>性别</td>

<!--表头单元格-->

</tr><tr><td>08003301</td><td>王明</td><td>男</td></tr><tr><td>08003302</td><td>张鸿</td><td>女</td></tr> </table>

<!--表格1结束--><p>

<!--表格2-->

<tableborder=1width=300cellpadding=10><tr><td>学号</td>

<!--普通单元格-->

<th>姓名</th>

<!--表头单元格-->

<td>性别</td></tr><tr><td>08003301</td><td>王明</td><td>男</td></tr><tr><td>08003302</td><td>张鸿</td><td>女</td></tr> </table>

<!--表格2结束--></body>【例3-3】设置行及单元格的对齐方式示例<body><tableborder><captionvalign=top>行、单元格的对齐方式</caption><tr><th></th><th>表头行单元2</th><th>表头行单元3</th><th>表头行单元4</th></tr><tralign=right>

<!--第1行水平右对齐-->

<th>第1行<br>水平右对齐</th><td>水平<br>右对齐</td><td>水平右对齐</td><tdalign=center>水平中对齐</td></tr><tr>

<!--第2行水平左对齐-->

<thalign=left>第2行<br>水平左对齐</TH><td>水平<br>左对齐</td><td>水平左对齐</td><tdalign=rightwidth=150>水平右对齐</td></tr><trheight=80>

<!--第3行水平左对齐-->

<th>第3行<br>高80</th><tdvalign=bottom>垂直底对齐</td><tdvalign=top>垂直<br>顶对齐</td><tdvalign=middle>垂直中对齐</td></tr></table></body>3.1.3合并单元格

日常使用的表格中，常有些格子需要跨多行或多列，例如下面的学生表。

实际上，跨多列的格子就是将一行的多个格子合并到一起，也就是该格子占多列。类似地，跨多行的格子就是将一列的多个格子合并到一起，也即该格子占多行。于是，在HTML中，就是使用指定单元格占多行或多列来创建跨多行或多列的单元格，即合并单元格。

<th>、<td>标签都有指定单元格占的行数或列数的属性：colspn属性

——设置单元格占的列数，默认值是1。例：<tdcolspan=3>…</td>，指定单元格占3列。

rowspan属性

——设置单元格占的行数，默认值是1。例：<tdrowspan=2>…</td>，指定单元格占2行。【例3-4】创建前面所示的学生表表格

<body><tablebordercellspacing=0><captionvalign=top>学生表</caption><tr><thcolspan=3>基本信息</th><thcolspan=2>成绩</th></tr><tr><th>班级</th><th>学号</th><th>姓名</th><th>课程</th><th>分数</th></tr><tralign=center><tdrowspan=2>计算机<br>一班</td><td>08003301</td><td>王明</td><tdrowspan=2>计算机基础</td><td>92</td></tr><tralign=center><td>08003302</td><td>张鸿</td><td>85</td></tr><tralign=center><tdrowspan=2>网络<br>一班</td><td>08003331</td><td>李晓娟</td><tdrowspan=2>网络编程</td><td>73</td></tr><tralign=center><td>08003332</td><td>刘刚</td><td>90</td></tr></table></body>3.1.4利用表格布局网页示例使用表格设计网页格局，布局比较规则、容易，也使网页看上去更加整齐。表格布局中，不同的对象放在各自的单元格中，可以对它们进行不同的处理，而不用担心不同对象之间的影响。

【例3-5】利用表格布局创建如图所示网页1.根据网页中元素设计表格网页中有以下6个元素：①网页标题“网页编程学习网站”；②带学位帽人图片，文件是“a1.gif”；③装饰条图片，文件是“a2.gif”；④竹子图片，文件是“a3.gif”；⑤文字“如今…”；⑥文字超链接“点击进入”(为简化,并不真链接)。

根据6个元素的布局，划分出网格如图3-8所示。虽然网页中只有6个元素，但有些元素需要占多个单元格，总共需要4行。根据6个元素的布局，划分出网格如右图所示。再根据各个元素所占位置，合并相关格子得到

6

个元素的单元格，如右图。由上面分析可知，表格结构应该如下：<table><tr><th></th><th></th></tr><!--第1行有2个元素--><tr><th></th></tr><!--第2行有1个元素,占整行--><tr><td></td><th></th></tr><!--第3行第1单元格占2行--><tr><th></th></tr><!--第4行只剩1个元素--></table>2.设置表格属性

根据各元素的特点和网页的整体布局，可基本定出表格的属性。设置属性后的表格结构如下：<tablewidth=100%height=100%><tr><thcolspan=2></th><thwidth=40height=40></th></tr><tr><thcolspan=3></th></tr><tr><tdrowspan=2width=25%></td><thcolspan=2></th></tr><tr><thcolspan=2></th></tr></table>

3.表格填充具体代码

最后，填入各单元格的具体内容，根据需要修正属性并完善代码。Cha3-5.htm文档最后内容如下：<body><tablecellspacing=3width=100%height=100%><tr><thcolspan=2><fontface="隶书"size=6color=green><i>网页编程学习网站</i></font></th><thbackground=a1.gifwidth=40height=40></th></tr><tr><thcolspan=3background=a2.gifheight=8></th></tr><tr><tdrowspan=2background=a3.gifwidth=25%></td><thcolspan=2>   如今，公司、企业和个人都在建设自己的Web站点，编写自己的Web网页。HTML正是创建网页的基础语言。</th></tr><tr><thcolspan=2><ahref="">点击进入</a></th></tr></table></body>3.1.5习题1.设计一个表格网页如下图所示，表格宽度占窗口100%，表头行背景色为橙色(orange)。2.使用表格布局给自己设计一个主页，结构如下图所示，表格宽、高占窗口100%。表格的第2行是个装饰条图片，表格的第3行是三个超链接(不必真链接)。3.2表单

3.2.1表单的基本结构

在网页中，除了要向浏览者显示信息外，还常常需要接受浏览者输入的信息，例如需要用户注册时，就要收集用户的姓名、地址、电话号码等信息。表格是用于显示信息的，而表单正是用来接受用户输入信息的。

一个表单要放在表单标签对<form>、</form>之间，中间放置表单输入控件元素或其他内容。表单的一般格式如下：<formmethod=“方法”action=“处理表单的程序”>表单输入控件元素或其他内容</form>表单控件元素是用于接受输入的控件，如文本框、提交按钮等。属性说明：

method——设置传送表单数据的方式。取值为get（默认方式）或post。

action——设置处理表单数据的处理程序。

post和get是两种不同的传送表单数据的方式。get方法把表单数据附加到浏览器地址栏地址的后面（信息被显示，不安全）向服务器传送，其长度不能超过2K字节。post方法把表单数据邮寄，在浏览器地址栏不会显示，其长度不受限制。3.2.1表单的基本结构

【例3-6】一个简单的表单示例(Cha3-6.htm)。<body><form><h3align="center">登录<p>用户名：<inputtype="Text"></p><!--单行文本框--><p>密码：<inputtype="Password"></p><!--密码框--><p><inputtype="Submit"value="确定"><!--提交按钮--></form></body>3.2.2表单输入控件元素<input>

cha3-6.htm文档中有三行代码都是“<input…>”格式，这就是用于接受输入的输入标签，而在显示后的页面中看到的是文本框、按钮等不同式样的控件，所以称之为“控件”元素。

表单常用的输入控件元素大部分由输入标签<input>实现，由<input>的“type”属性具体确定是哪一种控件，所以该属性是必须有的。<input>标签必须放在<form>标签对中，其常用属性见下表。<input>的常用属性3.2.3单行文本框、密码框、按钮

文本框、密码框、按钮的相关属性【例3-7】单行文本框、密码框和按钮示例(Cha3-7.htm)：在Cha3-6.htm文档中加入重置按钮、普通按钮和处理表单数据的处理程序。<body><h3align="center">登录

<formmethod="post"action="cha3-7-formAction.htm"><p>用户名：<inputtype="Text"></p><!--单行文本框--><p>密码：<inputtype="Password"></p><!--密码框-->

<p><inputtype="Reset"value="重填">

<!--重置按钮--><p><inputtype="Submit"value="确定"><!--提交按钮--><inputtype="Button"value="取消">

<!--普通按钮--></form></body>右图是页面显示后输入了用户名“wang”和密码“123456”后的情形：“cha3-7-formAction.htm”代码：<html><head><title>简单表单</title></head><body><h1>登录成功！</h1></body></html>表单处理网页cha3-7-formAction.htm实际对表单数据没有做实质性的处理，它仅仅显示一个提示信息。如果单击前面网页中的“确定”,表单数据就提交给action属性的值“cha3-7-formAction.htm”处理,即打开一个新的网页,打开的网页如右图所示。3.2.4单选钮、复选框、文件选择框

复选框、单选钮、文件选择框的相关属性【例3-8】复选框、单选钮、文件选择框示例(Cha3-8.htm)。<body><h2>   网页作品交流</h2>

<formmethod="post">姓名：<inputtype="TEXT"name="xm"><BR>性别：<inputtype="RADIO"name="xb"checked>男<!—单选钮--><inputtype="RADIO"name="xb">女<br><!—单选钮-->制作经验：<inputtype="CHECKBOX"checkedname="c1">个人网页

<inputtype="CHECKBOX"name="c2">娱乐网页<!--复选框--><p>作品名称：<inputtype="TEXT"name="mc"><br>提交作品：<inputtype="file"name="zp">

</form></body>文档说明:

单选钮中name属性值相同，表示它们是同一组，它们之中只能选择一项。复选框中name属性值必须互不相同。3.2.5多行文本框

多行文本框（如下图）用于接受大量的文字。

多行文本框不是用<input>标签创建，其标签对是<textarea>、</textarea>，同样必须放在<form>标签对中。

<textarea>的常用属性：name——设置多行文本框的名字；rows——文本框的行数（高度）；cols——文本框的列数（宽度）；readonly——是否是只读，取值为“true”时只能读，为“false”时可以编辑。

用户输入行数超过rows时会出现垂直滚动条；任何一行字符个数超过cols时会出现水平滚动条。【例3-9】多行文本框示例(Cha3-9.htm)。<body><formmethod="post">

<h2align="center">留言簿

<!--多行文本框-->

<textareaname="LiuYyanBan"rows="5"cols="40">在这里留言！</textarea>

<inputtype="Submit"value="提交"><inputtype="Reset"value="清空">

</form></body>输入一些文字：

3.2.6列表（菜单）

这里的列表指的是表单中的列表，也称为菜单，它主要是方便用户快速、正确地选择一些选项。列表也不是用<input>标签创建，而是由列表标签对<select></select>创建，并且一样地要放在<form>标签对中。<select>的常用属性：name——设置列表的名字；size——设置列表的高度(可显示的行数)。值为1时是下拉列表(也称为下拉菜单)；值大于1时是列表框，列表中的列表项超过高度则出现垂直滚动条。创建列表还需要一个列表项标签<option>、</option>，用来创建列表中的列表项，它主要的属性是selected（不需赋值），指定初始状态被选中。【例3-10】列表示例(Cha3-10.htm)。<body>

<formmethod="post">选择课程:<selectsize=1> <option>计算机基础</option> <optionselected>网页编程</option> <option>Java语言</option></select>选择上课时间:<selectsize=2> <option>周六</option> <optionselected>周日</option></select>

</form></body>3.2.7习题

1.用来创建表单的标签是（）。a．<input>b.<form>c.<table>d.<option>2.回答下列问题：表格与表单在功能上主要不同之处是什么？

<input>的“type”属性可以没有吗？复选框和单选钮之间主要不同之点是什么？文件选择框的功能？菜单和单选钮有什么类似之处？。3.使用表单设计如右边所示页面：4.使用表单中的列表、多行文本框等标签设计如下网页。要求页面布局不随窗口大小改变而变动。

3.3框架

3.3.1框架的基本结构

框架就是把浏览器窗口划分为多个子窗口，每个子窗口显示一个页面，从而实现在一个网页中同时显示多个页面的效果。下面的页面同时显示了三个网页。3.3.1框架的基本结构

框架与表格类似，也是以行和列的形式分割页面，称之为水平分割（横向分割、行）和垂直分割（纵向分割、列）。但是框架和表格不同，其根本区别是：框架网页中的每一块里面包含的又是一个网页。框架也可以嵌套，即在一个框架内还可以分割成若干个框架。

框架由框架集标签对<frameset>、</frameset>实现，这时，网页的主体<body>被<frameset>标签代替。注意，包含<frameset>的网页就不能有body部分，否则，将使框架完全被浏览器忽略，看到的只是body部分包含的内容。<frameset>的基本结构如下：

<html><head></head><frameset><!--框架集开始--><framesrc=“url地址1”><!--

frame是框架标签（子窗口标签）--><!–它定义一个框架（子窗口）-->

<framesrc="url地址2">……</frameset><!--框架集结束--></html>

<frameset>标签最重要的属性是rows和cols，用于分割页面，还有一些设置边框外观的属性。<frameset>的属性

分割框架时可加入符号“*”灵活使用，非常方便。例：<framesetrows=“200,300”>——将窗口分割为上下俩子窗口，上子窗口200象素点高，下子窗口300象素点高<framesetcols=“100,220,*”>——将窗口分割为左、中、右仨子窗口,左和中为100和200象素点宽，剩余归右<framesetrows=“30%,40%,*”>——将窗口分割为上、中、下部分,上和中占30%和40%，剩余归下子窗口<framesetrows=“*,*”>——将窗口等分为上、下两个子窗口<framesetcols=“*,*,*”>——将窗口等分为左、中、右三个子窗口<framesetcols=“*,2*,3*”>——将窗口等分为左、中、右仨子窗口，第1个占窗体宽的1/6，第2个占2/6，第3个占3/6分割窗口时如果计算不准确，值加起来不是100%，它们会被按比例缩小或放大成100%。

框架标签<frame>用于定义子窗口要显示的内容，是一个单标签。<frame>的属性

3.3.2简单框架示例

【例3-11】（Cha3-11.htm）设计一个框架网页，其中包含左右两个子窗口，分别放置Cha3-6.htm和Cha3-5.htm两个网页，左子窗口占40%。<html><head><title>简单框架示例</title></head><framesetcols="40%,*"><framesrc="Cha3-6.htm"><framesrc="Cha3-5.htm"></frameset><html>3.3.3框架嵌套示例

【例3-12】（Cha3-12.htm）设计框架网页，使显示结果如下图。分析：页面首先被分割为上下两部分，下面部分又被分割为左右两部分。因此，该页面需要使用框架嵌套方法才能实现，即下面部分还是放一个框架集，而此框架集再分割为左右两部分就可以了。<html><head><title>框架嵌套示例</title></head><framesetrows="35%,*"><framesrc="../第1章/cha1-1.htm"scrolling="no"><framesetcols="6*,4*"><framesrc=""><framesrc=""></frameset></frameset></html>3.3.4子窗口间互操作

【例3-13】利用框架技术，设计如下图左所示页面。其中的“欢迎进入网页世界”子窗口是可变显示区，当单击左栏中的章标题后，该区显示对应章的内容。（如单击“第3章表格、表单及框架”后的界面如下图右）。（Cha3-13.htm）许多网页利用框架把窗口划分成固定显示区和可变显示区，固定的内容显示在一个框架中，如顶标题、目录、标志、导航栏和版权声明等。单击固定显示区的链接可以更新可变显示区的内容，这就是子窗口间的互操作。子窗口间互操作就是设置链接的显示位置在本网页内的某个子窗口中，利用<frame>的name属性和<a>的target属性实现。

分析：页面的框架结构与例3-12的类似，可套用例3-12的结构得到Cha3-13.htm；由于有三个子窗口，所以需要设计对应的三个网页：Cha3-13top.htm、Cha3-13left.htm、

Cha3-13right.htm。由于目录中有三章标题，因而还必须有三个对应的页面，它们是类似的。为简化，后面只给出第三章的文档Cha3-13-Cha3.htm；上面窗口的界面实际就是例3-5中的一部分，简化例3-5即可得。3.3.4子窗口间互操作

<!--1.文档Cha3-13.htm--><html><head><title>框架及其链接</title></head><framesetrows="25%,*"

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

温馨提示

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

最新文档

评论

0/150

提交评论