网页设计-表格、表单及框架.ppt

第3章表格 表单及框架 3 1表格3 2表单3 3框架 3 1表格 3 1 1表格的基本结构 用表格显示信息条理清楚 使浏览者一目了然 表格在网页中还有协助布局的作用 可以把文字 图像 声音甚至视频 或者另一个表格 组织到表格的不同行列中 以制作整齐 清晰的页面 HTML具有强大的建立 显示表格的功能 HTML的表格由行和列组成 每一行的一个列就是一个单元格 如右图所示 创建HTML表格需要使用下列标签 1 表格标签对 用于定义一个表格 2 行标签对 用于定义一个行 只能嵌套在表格标签对中 3 单元格标签对 用于定义一个单元格 只能嵌套在行标签对中 中放单元格内容 即要显示的数据 3 1 1表格的基本结构 例3 1 创建一个简单表格 放一组学生信息 简单表格示例学号姓名性别08003301王明男08003302张鸿女 常见的表格上面往往有个标题 第一行 表头 也常常用突出的字体 如黑体 粗体等 等来显示 以突显其内容 这些在HTML表格中可以利用表格下面两个标签来实现 标题标签对 用于定义一个表格标题 它只能放在标签对中 并在之前 的align valign属性用于设置标题的对齐方式 取值同 默认在表的上方中间 要突出某个单元格内容 只要将希望突显内容的单元格标签对 改用表头单元格标签对 即可 甚至只需要将改为就可以了 3 1 2表格的常用属性 的常用属性 2 行 单元格的常用属性 例3 2 属性设置示例 学生表学号姓名性别08003301王明男08003302张鸿女学号姓名性别08003301王明男08003302张鸿女 例3 3 设置行及单元格的对齐方式示例 行 单元格的对齐方式表头行单元2表头行单元3表头行单元4第1行水平右对齐水平右对齐水平右对齐水平中对齐第2行水平左对齐水平左对齐水平左对齐水平右对齐第3行高80垂直底对齐垂直顶对齐垂直中对齐 3 1 3合并单元格 日常使用的表格中 常有些格子需要跨多行或多列 例如下面的学生表 实际上 跨多列的格子就是将一行的多个格子合并到一起 也就是该格子占多列 类似地 跨多行的格子就是将一列的多个格子合并到一起 也即该格子占多行 于是 在HTML中 就是使用指定单元格占多行或多列来创建跨多行或多列的单元格 即合并单元格 标签都有指定单元格占的行数或列数的属性 colspn属性 设置单元格占的列数 默认值是1 例 指定单元格占3列 rowspan属性 设置单元格占的行数 默认值是1 例 指定单元格占2行 例3 4 创建前面所示的学生表表格 学生表基本信息成绩班级学号姓名课程分数计算机一班08003301王明计算机基础9208003302张鸿85网络一班08003331李晓娟网络编程7308003332刘刚90 3 1 4利用表格布局网页示例 使用表格设计网页格局 布局比较规则 容易 也使网页看上去更加整齐 表格布局中 不同的对象放在各自的单元格中 可以对它们进行不同的处理 而不用担心不同对象之间的影响 例3 5 利用表格布局创建如图所示网页 1 根据网页中元素设计表格网页中有以下6个元素 网页标题 网页编程学习网站 带学位帽人图片 文件是 a1 gif 装饰条图片 文件是 a2 gif 竹子图片 文件是 a3 gif 文字 如今 文字超链接 点击进入 为简化 并不真链接 根据6个元素的布局 划分出网格如图3 8所示 虽然网页中只有6个元素 但有些元素需要占多个单元格 总共需要4行 根据6个元素的布局 划分出网格如右图所示 再根据各个元素所占位置 合并相关格子得到6个元素的单元格 如右图 由上面分析可知 表格结构应该如下 2 设置表格属性根据各元素的特点和网页的整体布局 可基本定出表格的属性 设置属性后的表格结构如下 3 表格填充具体代码最后 填入各单元格的具体内容 根据需要修正属性并完善代码 Cha3 5 htm文档最后内容如下 网页编程学习网站 nbsp nbsp nbsp如今 公司 企业和个人都在建设自己的Web站点 编写自己的Web网页 HTML正是创建网页的基础语言 点击进入 3 1 5习题 1 设计一个表格网页如下图所示 表格宽度占窗口100 表头行背景色为橙色 orange 2 使用表格布局给自己设计一个主页 结构如下图所示 表格宽 高占窗口100 表格的第2行是个装饰条图片 表格的第3行是三个超链接 不必真链接 3 2表单 3 2 1表单的基本结构 在网页中 除了要向浏览者显示信息外 还常常需要接受浏览者输入的信息 例如需要用户注册时 就要收集用户的姓名 地址 电话号码等信息 表格是用于显示信息的 而表单正是用来接受用户输入信息的 一个表单要放在表单标签对 之间 中间放置表单输入控件元素或其他内容 表单的一般格式如下 表单输入控件元素或其他内容 表单控件元素是用于接受输入的控件 如文本框 提交按钮等 属性说明 method 设置传送表单数据的方式 取值为get 默认方式 或post action 设置处理表单数据的处理程序 post和get是两种不同的传送表单数据的方式 get方法把表单数据附加到浏览器地址栏地址的后面 信息被显示 不安全 向服务器传送 其长度不能超过2K字节 post方法把表单数据邮寄 在浏览器地址栏不会显示 其长度不受限制 3 2 1表单的基本结构 例3 6 一个简单的表单示例 Cha3 6 htm 登录用户名 密码 3 2 2表单输入控件元素 cha3 6 htm文档中有三行代码都是 格式 这就是用于接受输入的输入标签 而在显示后的页面中看到的是文本框 按钮等不同式样的控件 所以称之为 控件 元素 表单常用的输入控件元素大部分由输入标签实现 由的 type 属性具体确定是哪一种控件 所以该属性是必须有的 标签必须放在标签对中 其常用属性见下表 的常用属性 3 2 3单行文本框 密码框 按钮 文本框 密码框 按钮的相关属性 例3 7 单行文本框 密码框和按钮示例 Cha3 7 htm 在Cha3 6 htm文档中加入重置按钮 普通按钮和处理表单数据的处理程序 登录用户名 密码 右图是页面显示后输入了用户名 wang 和密码 123456 后的情形 cha3 7 formAction htm 代码 简单表单登录成功 表单处理网页cha3 7 formAction htm实际对表单数据没有做实质性的处理 它仅仅显示一个提示信息 如果单击前面网页中的 确定 表单数据就提交给action属性的值 cha3 7 formAction htm 处理 即打开一个新的网页 打开的网页如右图所示 3 2 4单选钮 复选框 文件选择框 复选框 单选钮 文件选择框的相关属性 例3 8 复选框 单选钮 文件选择框示例 Cha3 8 htm 160 160 160网页作品交流姓名 性别 男女制作经验 个人网页娱乐网页作品名称 提交作品 文档说明 单选钮中name属性值相同 表示它们是同一组 它们之中只能选择一项 复选框中name属性值必须互不相同 3 2 5多行文本框 多行文本框 如下图 用于接受大量的文字 多行文本框不是用标签创建 其标签对是 同样必须放在标签对中 的常用属性 name 设置多行文本框的名字 rows 文本框的行数 高度 cols 文本框的列数 宽度 readonly 是否是只读 取值为 true 时只能读 为 false 时可以编辑 用户输入行数超过rows时会出现垂直滚动条 任何一行字符个数超过cols时会出现水平滚动条 例3 9 多行文本框示例 Cha3 9 htm 留言簿在这里留言 输入一些文字 3 2 6列表 菜单 这里的列表指的是表单中的列表 也称为菜单 它主要是方便用户快速 正确地选择一些选项 列表也不是用标签创建 而是由列表标签对创建 并且一样地要放在标签对中 的常用属性 name 设置列表的名字 size 设置列表的高度 可显示的行数 值为1时是下拉列表 也称为下拉菜单 值大于1时是列表框 列表中的列表项超过高度则出现垂直滚动条 创建列表还需要一个列表项标签 用来创建列表中的列表项 它主要的属性是selected 不需赋值 指定初始状态被选中 例3 10 列表示例 Cha3 10 htm 选择课程 计算机基础网页编程Java语言选择上课时间 周六周日 3 2 7习题 1 用来创建表单的标签是 a b c d 2 回答下列问题 表格与表单在功能上主要不同之处是什么 的 type 属性可以没有吗 复选框和单选钮之间主要不同之点是什么 文件选择框的功能 菜单和单选钮有什么类似之处 3 使用表单设计如右边所示页面 4 使用表单中的列表 多行文本框等标签设计如下网页 要求页面布局不随窗口大小改变而变动 3 3框架 3 3 1框架的基本结构 框架就是把浏览器窗口划分为多个子窗口 每个子窗口显示一个页面 从而实现在一个网页中同时显示多个页面的效果 下面的页面同时显示了三个网页 3 3 1框架的基本结构 框架与表格类似 也是以行和列的形式分割页面 称之为水平分割 横向分割 行 和垂直分割 纵向分割 列 但是框架和表格不同 其根本区别是 框架网页中的每一块里面包含的又是一个网页 框架也可以嵌套 即在一个框架内还可以分割成若干个框架 框架由框架集标签对 实现 这时 网页的主体被标签代替 注意 包含的网页就不能有body部分 否则 将使框架完全被浏览器忽略 看到的只是body部分包含的内容 的基本结构如下 标签最重要的属性是rows和cols 用于分割页面 还有一些设置边框外观的属性 的属性 分割框架时可加入符号 灵活使用 非常方便 例 将窗口分割为上下俩子窗口 上子窗口200象素点高 下子窗口300象素点高 将窗口分割为左 中 右仨子窗口 左和中为100和200象素点宽 剩余归右 将窗口分割为上 中 下部分 上和中占30 和40 剩余归下子窗口 将窗口等分为上 下两个子窗口 将窗口等分为左 中 右三个子窗口 将窗口等分为左 中 右仨子窗口 第1个占窗体宽的1 6 第2个占2 6 第3个占3 6分割窗口时如果计算不准确 值加起来不是100 它们会被按比例缩小或放大成100 框架标签用于定义子窗口要显示的内容 是一个单标签 的属性 3 3 2简单框架示例 例3 11 Cha3 11 htm 设计一个框架网页 其中包含左右两个子窗口 分别放置Cha3 6 htm和Cha3 5 htm两个网页 左子窗口占40 简单框架示例 3 3 3框架嵌套示例 例3 12 Cha3 12 htm 设计框架网页 使显示结果如下图 分析 页面首先被分割为上下两部分 下面部分又被分割为左右两部分 因此 该页面需要使用框架嵌套方法才能实现 即下面部分还是放一个框架集 而此框架集再分割为左右两部分就可以了 框架嵌套示例 3 3 4子窗口间互操作 例3 13 利用框架技术 设计如下图左所示页面 其中的 欢迎进入网页世界 子窗口是可变显示区 当单击左栏中的章标题后 该区显示对应章的内容 如单击 第3章表格 表单及框架 后的界面如下图右 Cha3 13 htm 许多网页利用框架把窗口划分成固定显示区和可变显示区 固定的内容显示在一个框架中 如顶标题 目录 标志 导航栏和版权声明等 单击固定显示区的链接可以更新可变显示区的内容 这就是子窗口间的互操作 子窗口间互操作就是设置链接的显示位置在本网页内的某个子窗口中 利用的name属性和的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子窗口间互操作 框架及其链接 网页编程学习网站 3 3 4子窗口间互操作 目 160 160录第1章HTM