购买

¥ 20.0

加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 82网页设计-表格、表单及框架_图文

82网页设计-表格、表单及框架_图文.ppt

82网页设计-表格、表单及框架_图文

精品课件库
2019-06-15 0人阅读 举报 0 0 暂无简介

简介:本文档为《82网页设计-表格、表单及框架_图文ppt》,可适用于综合领域

第*页第章表格、表单及框架表格表单框架第*页表格表格的基本结构用表格显示信息条理清楚使浏览者一目了然。表格在网页中还有协助布局的作用可以把文字、图像、声音甚至视频或者另一个表格组织到表格的不同行列中以制作整齐、清晰的页面。HTML具有强大的建立、显示表格的功能。HTML的表格由行和列组成每一行的一个列就是一个单元格如右图所示:创建HTML表格需要使用下列标签:()<table>、<table>表格标签对用于定义一个表格()<tr>、<tr>行标签对用于定义一个行只能嵌套在表格标签对中()<td>、<td>单元格标签对用于定义一个单元格只能嵌套在行标签对中。<td>、<td>中放单元格内容即要显示的数据。第*页表格的基本结构【例】创建一个简单表格放一组学生信息。<html><head><title>简单表格示例<title><head><body><table><!定义一个表><tr><!定义一行表格(第行)><td>学号<td><!第行的第列><td>姓名<td><td>性别<td><!第行的第列><tr><tr><!定义第行><td><td><td>王明<td><td>男<td><tr><tr><!定义第行><td><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>就可以了。第*页表格的常用属性<table>的常用属性行、单元格的常用属性属性用途属性值border设置边框的宽度像素值默认值为bordercolor设置边框的颜色颜色值默认值为黑色bgcolor设置背景颜色颜色值默认值为白色background设置背景图片同页面背景图片设置width设置表格的宽度像素值或占窗口的百分比height设置表格的高度像素值或占窗口的百分比cellspacing设置表格中格子间的空隙像素值cellpadding设置表格的格子中内容与边框间的空隙像素值align设置表格在网页中的位置(左,中,右)left、center、right属性用途属性值width设置行或单元格的宽度像素值或百分比height设置行或单元格的高度像素值或百分比bgcolor设置行或单元格背景颜色颜色值默认值为白色align单元格中内容的水平对齐方式left(默认)、center、rightvalign单元格中内容的垂直对齐方式top、middle(默认)、bottombordercolor设置单元格边框的颜色颜色值默认值为黑色background设置单元格背景图片同页面背景图片设置第*页【例】<table>属性设置示例<body><!表格><tableborder=width=cellspacing=><caption>学生表<caption><!定义表格标题><tr><th>学号<th><!表头单元格><th>姓名<td><!表头单元格><th>性别<td><!表头单元格><tr><tr><td><td><td>王明<td><td>男<td><tr><tr><td><td><td>张鸿<td><td>女<td><tr><table><!表格结束><p><!表格><tableborder=width=cellpadding=><tr><td>学号<td><!普通单元格><th>姓名<th><!表头单元格><td>性别<td><tr><tr><td><td><td>王明<td><td>男<td><tr><tr><td><td><td>张鸿<td><td>女<td><tr><table><!表格结束><body>第*页【例】设置行及单元格的对齐方式示例<body><tableborder><captionvalign=top>行、单元格的对齐方式<caption><tr><th><th><th>表头行单元<th><th>表头行单元<th><th>表头行单元<th><tr><tralign=right><!第行水平右对齐><th>第行<br>水平右对齐<th><td>水平<br>右对齐<td><td>水平右对齐<td><tdalign=center>水平中对齐<td><tr><tr><!第行水平左对齐><thalign=left>第行<br>水平左对齐<TH><td>水平<br>左对齐<td><td>水平左对齐<td><tdalign=rightwidth=>水平右对齐<td><tr><trheight=><!第行水平左对齐><th>第行<br>高<th><tdvalign=bottom>垂直底对齐<td><tdvalign=top>垂直<br>顶对齐<td><tdvalign=middle>垂直中对齐<td><tr><table><body>第*页合并单元格日常使用的表格中常有些格子需要跨多行或多列例如下面的学生表。实际上跨多列的格子就是将一行的多个格子合并到一起也就是该格子占多列。类似地跨多行的格子就是将一列的多个格子合并到一起也即该格子占多行。于是在HTML中就是使用指定单元格占多行或多列来创建跨多行或多列的单元格即合并单元格。<th>、<td>标签都有指定单元格占的行数或列数的属性:colspn属性设置单元格占的列数默认值是。例:<tdcolspan=>…<td>指定单元格占列。rowspan属性设置单元格占的行数默认值是。例:<tdrowspan=>…<td>指定单元格占行。第*页【例】创建前面所示的学生表表格<body><tablebordercellspacing=><captionvalign=top>学生表<caption><tr><thcolspan=>基本信息<th><thcolspan=>成绩<th><tr><tr><th>班级<th><th>学号<th><th>姓名<th><th>课程<th><th>分数<th><tr><tralign=center><tdrowspan=>计算机<br>一班<td><td><td><td>王明<td><tdrowspan=>计算机基础<td><td><td><tr><tralign=center><td><td><td>张鸿<td><td><td><tr><tralign=center><tdrowspan=>网络<br>一班<td><td><td><td>李晓娟<td><tdrowspan=>网络编程<td><td><td><tr><tralign=center><td><td><td>刘刚<td><td><td><tr><table><body>第*页利用表格布局网页示例使用表格设计网页格局布局比较规则、容易也使网页看上去更加整齐。表格布局中不同的对象放在各自的单元格中可以对它们进行不同的处理而不用担心不同对象之间的影响。【例】利用表格布局创建如图所示网页根据网页中元素设计表格网页中有以下个元素:①网页标题“网页编程学习网站”②带学位帽人图片文件是“agif”③装饰条图片文件是“agif”④竹子图片文件是“agif”⑤文字“如今…”⑥文字超链接“点击进入”(为简化,并不真链接)。根据个元素的布局划分出网格如图所示。虽然网页中只有个元素但有些元素需要占多个单元格总共需要行。第*页根据个元素的布局划分出网格如右图所示。再根据各个元素所占位置合并相关格子得到个元素的单元格如右图。由上面分析可知表格结构应该如下:<table><tr><th><th><th><th><tr><!第行有个元素><tr><th><th><tr><!第行有个元素,占整行><tr><td><td><th><th><tr><!第行第单元格占行><tr><th><th><tr><!第行只剩个元素><table>第*页设置表格属性根据各元素的特点和网页的整体布局可基本定出表格的属性。设置属性后的表格结构如下:<tablewidth=height=><tr><thcolspan=><th><thwidth=height=><th><tr><tr><thcolspan=><th><tr><tr><tdrowspan=width=><td><thcolspan=><th><tr><tr><thcolspan=><th><tr><table>表格填充具体代码最后填入各单元格的具体内容根据需要修正属性并完善代码。Chahtm文档最后内容如下:<body><tablecellspacing=width=height=><tr><thcolspan=><fontface="隶书"size=color=green><i>网页编程学习网站<i><font><th><thbackground=agifwidth=height=><th><tr><tr><thcolspan=background=agifheight=><th><tr><tr><tdrowspan=background=agifwidth=><td><thcolspan=>nbspnbspnbsp如今公司、企业和个人都在建设自己的Web站点编写自己的Web网页。HTML正是创建网页的基础语言。<th><tr><tr><thcolspan=><ahref="">点击进入<a><th><tr><table><body>第*页习题设计一个表格网页如下图所示表格宽度占窗口表头行背景色为橙色(orange)。使用表格布局给自己设计一个主页结构如下图所示表格宽、高占窗口。表格的第行是个装饰条图片表格的第行是三个超链接(不必真链接)。第*页表单表单的基本结构在网页中除了要向浏览者显示信息外还常常需要接受浏览者输入的信息例如需要用户注册时就要收集用户的姓名、地址、电话号码等信息。表格是用于显示信息的而表单正是用来接受用户输入信息的。一个表单要放在表单标签对<form>、<form>之间中间放置表单输入控件元素或其他内容。表单的一般格式如下:<formmethod=“方法”action=“处理表单的程序”>表单输入控件元素或其他内容<form>表单控件元素是用于接受输入的控件如文本框、提交按钮等。属性说明:method设置传送表单数据的方式。取值为get(默认方式)或post。action设置处理表单数据的处理程序。post和get是两种不同的传送表单数据的方式。get方法把表单数据附加到浏览器地址栏地址的后面(信息被显示不安全)向服务器传送其长度不能超过K字节。post方法把表单数据邮寄在浏览器地址栏不会显示其长度不受限制。第*页表单的基本结构【例】一个简单的表单示例(Chahtm)。<body><form><halign="center">登录<p>用户名:<inputtype="Text"><p><!单行文本框><p>密码:<inputtype="Password"><p><!密码框><p><inputtype="Submit"value="确定"><!提交按钮><form><body>第*页表单输入控件元素<input>chahtm文档中有三行代码都是“<input…>”格式这就是用于接受输入的输入标签而在显示后的页面中看到的是文本框、按钮等不同式样的控件所以称之为“控件”元素。表单常用的输入控件元素大部分由输入标签<input>实现由<input>的“type”属性具体确定是哪一种控件所以该属性是必须有的。<input>标签必须放在<form>标签对中其常用属性见下表。<input>的常用属性属性作用属性取值type指定表单输入控件类型text(默认值单行文本框)password(密码框)submit(提交按钮)reset(重置按钮)button(普通按钮)checkbox(复选框)radio(单选钮)file(文件选择框)name给控件指定一个的名字value指定控件的初值或显示的名称size指定控件的宽度像素数或字符数maxlength指定可输入的最大字符数默认无限制第*页单行文本框、密码框、按钮文本框、密码框、按钮的相关属性控件功能<input>有关属性意义text(单行文本框)输入一行文字value指定文本框的初值size设置文本框宽度(字符数)maxlength指定可输入的最大字符数password(密码框)输入密码,字符以””显示按钮submit(提交按钮)此按钮被单击时表单数据就提交给action属性指定的程序处理value指定按钮上的文字reset(重置按钮)此按钮被单击时表单内数据都被复原button(普通按钮)此按钮被单击时将调用onclick指定的函数value指定按钮上的文字onclick指定单击按钮后要调用的函数第*页【例】单行文本框、密码框和按钮示例(Chahtm):在Chahtm文档中加入重置按钮、普通按钮和处理表单数据的处理程序。<body><halign="center">登录<formmethod="post"action="chaformActionhtm"><p>用户名:<inputtype="Text"><p><!单行文本框><p>密码:<inputtype="Password"><p><!密码框><p><inputtype="Reset"value="重填"><!重置按钮><p><inputtype="Submit"value="确定"><!提交按钮><inputtype="Button"value="取消"><!普通按钮><form><body>右图是页面显示后输入了用户名“wang”和密码“”后的情形:第*页“chaformActionhtm”代码:<html><head><title>简单表单<title><head><body><h>登录成功!<h><body><html>表单处理网页chaformActionhtm实际对表单数据没有做实质性的处理它仅仅显示一个提示信息。如果单击前面网页中的“确定”,表单数据就提交给action属性的值“chaformActionhtm”处理,即打开一个新的网页,打开的网页如右图所示。第*页单选钮、复选框、文件选择框复选框、单选钮、文件选择框的相关属性控件功能<input>有关属性意义radio(单选钮)选择项目。一组选项中只能选择一个value指定控件的初值checked(不需赋值)指定初始状态被选中checkbox(复选框)选择项目file(文件选择框)提供浏览和选择本地资源的功能value指定文本框的初值size设置文本框宽度(字符数)maxlength指定可输入的最大字符数第*页【例】复选框、单选钮、文件选择框示例(Chahtm)。<body><h>###网页作品交流<h><formmethod="post">姓名:<inputtype="TEXT"name="xm"><BR>性别:<inputtype="RADIO"name="xb"checked>男<!单选钮><inputtype="RADIO"name="xb">女<br><!单选钮>制作经验:<inputtype="CHECKBOX"checkedname="c">个人网页<inputtype="CHECKBOX"name="c">娱乐网页<!复选框><p>作品名称:<inputtype="TEXT"name="mc"><br>提交作品:<inputtype="file"name="zp"><form><body>文档说明:单选钮中name属性值相同表示它们是同一组它们之中只能选择一项。复选框中name属性值必须互不相同。第*页多行文本框多行文本框(如下图)用于接受大量的文字。多行文本框不是用<input>标签创建其标签对是<textarea>、<textarea>同样必须放在<form>标签对中。<textarea>的常用属性:name设置多行文本框的名字rows文本框的行数(高度)cols文本框的列数(宽度)readonly是否是只读取值为“true”时只能读为“false”时可以编辑。用户输入行数超过rows时会出现垂直滚动条任何一行字符个数超过cols时会出现水平滚动条。第*页【例】多行文本框示例(Chahtm)。<body><formmethod="post"><halign="center">留言簿<!多行文本框><textareaname="LiuYyanBan"rows=""cols="">在这里留言!<textarea><inputtype="Submit"value="提交"><inputtype="Reset"value="清空"><form><body>输入一些文字:第*页列表(菜单)这里的列表指的是表单中的列表也称为菜单它主要是方便用户快速、正确地选择一些选项。列表也不是用<input>标签创建而是由列表标签对<select><select>创建并且一样地要放在<form>标签对中。<select>的常用属性:name设置列表的名字size设置列表的高度(可显示的行数)。值为时是下拉列表(也称为下拉菜单)值大于时是列表框列表中的列表项超过高度则出现垂直滚动条。创建列表还需要一个列表项标签<option>、<option>用来创建列表中的列表项它主要的属性是selected(不需赋值)指定初始状态被选中。第*页【例】列表示例(Chahtm)。<body><formmethod="post">选择课程:<selectsize=><option>计算机基础<option><optionselected>网页编程<option><option>Java语言<option><select>选择上课时间:<selectsize=><option>周六<option><optionselected>周日<option><select><form><body>第*页习题用来创建表单的标签是()。a.<input>b<form>c<table>d<option>回答下列问题:表格与表单在功能上主要不同之处是什么?<input>的“type”属性可以没有吗?复选框和单选钮之间主要不同之点是什么?文件选择框的功能?菜单和单选钮有什么类似之处?。使用表单设计如右边所示页面:使用表单中的列表、多行文本框等标签设计如下网页。要求页面布局不随窗口大小改变而变动。第*页框架框架的基本结构框架就是把浏览器窗口划分为多个子窗口每个子窗口显示一个页面从而实现在一个网页中同时显示多个页面的效果。下面的页面同时显示了三个网页。第*页框架的基本结构框架与表格类似也是以行和列的形式分割页面称之为水平分割(横向分割、行)和垂直分割(纵向分割、列)。但是框架和表格不同其根本区别是:框架网页中的每一块里面包含的又是一个网页。框架也可以嵌套即在一个框架内还可以分割成若干个框架。框架由框架集标签对<frameset>、<frameset>实现这时网页的主体<body>被<frameset>标签代替。注意包含<frameset>的网页就不能有body部分否则将使框架完全被浏览器忽略看到的只是body部分包含的内容。<frameset>的基本结构如下:<html><head><head><frameset><!框架集开始><framesrc=“url地址”><!frame是框架标签(子窗口标签)><!–它定义一个框架(子窗口)><framesrc="url地址">……<frameset><!框架集结束><html>第*页<frameset>标签最重要的属性是rows和cols用于分割页面还有一些设置边框外观的属性。<frameset>的属性分割框架时可加入符号“*”灵活使用非常方便。例:<framesetrows=“,”>将窗口分割为上下俩子窗口上子窗口象素点高下子窗口象素点高<framesetcols=“,,*”>将窗口分割为左、中、右仨子窗口,左和中为和象素点宽剩余归右<framesetrows=“,,*”>将窗口分割为上、中、下部分,上和中占和剩余归下子窗口<framesetrows=“*,*”>将窗口等分为上、下两个子窗口<framesetcols=“*,*,*”>将窗口等分为左、中、右三个子窗口<framesetcols=“*,*,*”>将窗口等分为左、中、右仨子窗口第个占窗体宽的第个占第个占分割窗口时如果计算不准确值加起来不是它们会被按比例缩小或放大成。属性用途属性值rows指定水平分割页面像素或百分比cols指定垂直分割页面像素或百分比frameborder指定是否显示边框不显示显示framespacing设置框架间的空隙大小像素border设置边框粗细像素默认bordercolor设置边框颜色颜色值noresize设定框架大小不可调节不需要属性值第*页框架标签<frame>用于定义子窗口要显示的内容是一个单标签。<frame>的属性属性描述src网页的URL即超链接name框架名字可被<a>中target属性引用以指定网页显示在本窗口内marginwidth上下边界宽度像素marginheight左右边界宽度像素scrolling窗口可否滚动yes可以(默认)no不可以frameborder是否有边框yes有no无auto由浏览器自动设置(默认)noresize设定窗口大小不可变不需属性值第*页简单框架示例【例】(Chahtm)设计一个框架网页其中包含左右两个子窗口分别放置Chahtm和Chahtm两个网页左子窗口占。<html><head><title>简单框架示例<title><head><framesetcols=",*"><framesrc="Chahtm"><framesrc="Chahtm"><frameset><html>第*页框架嵌套示例【例】(Chahtm)设计框架网页使显示结果如下图。分析:页面首先被分割为上下两部分下面部分又被分割为左右两部分。因此该页面需要使用框架嵌套方法才能实现即下面部分还是放一个框架集而此框架集再分割为左右两部分就可以了。<html><head><title>框架嵌套示例<title><head><framesetrows=",*"><framesrc="第章chahtm"scrolling="no"><framesetcols="*,*"><framesrc="http:wwwcom"><framesrc="http:wwwsohucom"><frameset><frameset><html>第*页子窗口间互操作【例】利用框架技术设计如下图左所示页面。其中的“欢迎进入网页世界”子窗口是可变显示区当单击左栏中的章标题后该区显示对应章的内容。(如单击“第章表格、表单及框架”后的界面如下图右)。(Chahtm)许多网页利用框架把窗口划分成固定显示区和可变显示区固定的内容显示在一个框架中如顶标题、目录、标志、导航栏和版权声明等。单击固定显示区的链接可以更新可变显示区的内容这就是子窗口间的互操作。子窗口间互操作就是设置链接的显示位置在本网页内的某个子窗口中利用<frame>的name属性和<a>的target属性实现。分析:页面的框架结构与例的类似可套用例的结构得到Chahtm由于有三个子窗口所以需要设计对应的三个网页:Chatophtm、Chalefthtm、Charighthtm。由于目录中有三章标题因而还必须有三个对应的页面它们是类似的。为简化后面只给出第三章的文档ChaChahtm上面窗口的界面实际就是例中的一部分简化例即可得。第*页子窗口间互操作<!文档Chahtm><html><head><title>框架及其链接<title><head><framesetrows=",*"><framesrc="chatophtm"name="top"scrolling="no"><framesetcols=",*"><framesrc="chalefthtm"name="left"><framesrc="charighthtm"name="right"><frameset><frameset><html><!文档Chatophtm><html><body><tablecellspacing=width=height=><tr><thcolspan=><fontface="隶书"size=color=green><i>网页编程学习网站<i><font><th><thbackground=agifwidth=height=><th><tr><table><body><html>第*页子窗口间互操作<!文档Chalefthtm><html><body><halign=center>目##录<h><ahref="ChaChahtm"target="right">第章HTML基础<a><br><ahref="ChaChahtm"target="right">第章列表、图像、超链接<a><br><ahref="ChaChahtm"target="right">第章表格、表单及框架<a><body><html><!文档Charighthtm><html><body><halign=center>欢迎进入网页世界<h><body><html>第*页子窗口间互操作<!文档ChaChahtm><html><body><halign=center>第章表格、表单及框架<h><pre>表格用表格显示信息条理清楚使浏览网页的人一目了然。HTML具有强大的建立、显示表格的功能。另外表格在网页中还有协助布局的作用可以把文字、图像、声音甚至视频或者另一个表格组织到表格的不同行列中制作清晰、整齐的页面。<pre><body><html>第*页习题<frameset>的属性“cols”是将页面分割成多()。a.行b.列c块d格下面的语句()是设置一个大小不变的子窗口。a.<framesetcols=”,”>b<framesrc="ahtm"scrolling>c<framesetrows=”,*”noresize>d<framesrc="ahtm"noresize>设计一个框架网页页面如下图所示。第*页太古神王http:wwwcom橷毪焑**

VIP尊享8折文档

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

文档小程序码

使用微信“扫一扫”扫码寻找文档

1

打开微信

2

扫描小程序码

3

发布寻找信息

4

等待寻找结果

我知道了
评分:

/38

82网页设计-表格、表单及框架_图文

¥20.0

会员价¥16.0

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利