第3章ppt.ppt
《第3章ppt.ppt》由会员分享,可在线阅读,更多相关《第3章ppt.ppt(38页珍藏版)》请在三一文库上搜索。
1、网页设计,第3章 表格、表单及框架,3.1 表格 3.2 表单 3.3 框架,3.1 表格,3.1.1 表格的基本结构,用表格显示信息条理清楚,使浏览者一目了然。表格在网页中还有协助布局的作用,可以把文字、图像、声音甚至视频,或者另一个表格,组织到表格的不同行列中,以制作整齐、清晰的页面。 HTML具有强大的建立、显示表格的功能。 HTML的表格由行和列组成, 每一行的一个列就是一个单元 格,如右图所示:,创建HTML表格需要使用下列标签: (1) 、 表格标签对,用于定义一个表格; (2) 、 行标签对,用于定义一个行,只能嵌套在表格标签对中 (3) 、 单元格标签对,用于定义一个单元格,只
2、能嵌套在 行标签对中。、中放单元格内容,即要显示的数据。,3.1.1 表格的基本结构,【例3-1】创建一个简单表格,放一组学生信息。,简单表格示例 学号 姓名 性别 08003301王明男 08003302张鸿女 ,常见的表格上面往往有个标题,第一行(表头)也常常用突出的字体(如黑体、粗体等)等来显示,以突显其内容。这些在HTML表格中可以利用表格下面两个标签来实现: 标题标签对,用于定义一个表格标题,它只能放在标签对中,并在之前。的align、valign属性用于设置标题的对齐方式,取值同,默认在表的上方中间。 要突出某个单元格内容,只要将希望突显内容的单元格标签对、改用表头单元格标签对、即
3、可,甚至只需要将改为就可以了。,3.1.2 表格的常用属性,的常用属性,2. 行、单元格的常用属性,【例3-2】属性设置示例, 学生表 学号 姓名 性别 08003301王明男 08003302张鸿女 学号 姓名 性别 08003301王明男 08003302张鸿女 ,【例3-3】设置行及单元格的对齐方式示例, 行、单元格的对齐方式 表头行单元2 表头行单元3 表头行单元4 第1行水平右对齐 水平右对齐 水平右对齐 水平中对齐 第2行水平左对齐 水平左对齐 水平左对齐 水平右对齐 第3行高80 垂直底对齐 垂直顶对齐 垂直中对齐 ,3.1.3 合并单元格,日常使用的表格中,常有些格子需要跨多行
4、或多列,例如下面的学生表。,实际上,跨多列的格子就是将一行的多个格子合并到一起,也就是该格子占多列。类似地,跨多行的格子就是将一列的多个格子合并到一起,也即该格子占多行。于是,在HTML中,就是使用指定单元格占多行或多列来创建跨多行或多列的单元格,即合并单元格。 、 标签都有指定单元格占的行数或列数的属性: colspn属性 设置单元格占的列数,默认值是1。 例:,指定单元格占3列。 rowspan属性 设置单元格占的行数,默认值是1。 例:,指定单元格占2行。,【例3-4】创建前面所示的学生表表格, 学生表 基本信息 成绩 班级 学号 姓名 课程 分数 计算机 一班 08003301 王明
5、计算机基础 92 08003302 张鸿 85 网络一班 08003331 李晓娟 网络编程 73 08003332 刘刚 90 ,3.1.4 利用表格布局网页示例,使用表格设计网页格局,布局比较规则、容易,也使网页看上去更加整齐。表格布局中,不同的对象放在各自的单元格中,可以对它们进行不同的处理,而不用担心不同对象之间的影响。,【例3-5】利用表格布局创建如图所示网页,1.根据网页中元素设计表格 网页中有以下6个元素: 网页标题“网页编程学习网站”; 带学位帽人图片,文件是“a1.gif”; 装饰条图片,文件是“a2.gif”; 竹子图片,文件是“a3.gif”; 文字“如今”; 文字超链接
6、“点击进入” (为简化,并不真链接)。 根据6个元素的布局,划分出网格如图3-8所示。虽然网页中只有6个元素,但有些元素需要占多个单元格,总共需要4行。,根据6个元素的布局,划分出网格如右图所示。,再根据各个元素所占位置,合并相关格子得到 6 个元素的单元格,如右图。,由上面分析可知,表格结构应该如下:,2.设置表格属性 根据各元素的特点和网页的整体布局,可基本定出表格的属性。 设置属性后的表格结构如下:,3.表格填充具体代码 最后,填入各单元格的具体内容,根据需要修正属性并 完善代码。Cha3-5.htm文档最后内容如下:, 网页编程学习网站    如今,公司、企业和
7、个人都在建 设自己的Web站点,编写自己的Web网页。HTML正是创建网页的 基础语言。 点击进入 ,3.1.5 习题,1. 设计一个表格网页如下图所示,表格宽度占窗口100%,表头行背景色为橙色(orange)。,2. 使用表格布局给自己设计一个主页,结构如下图所示,表格宽、高占窗口100%。表格的第2行是个装饰条图片,表格的第3行是三个超链接(不必真链接)。,3.2 表单,3.2.1 表单的基本结构,在网页中,除了要向浏览者显示信息外,还常常需要接受浏览者输入的信息,例如需要用户注册时,就要收集用户的姓名、地址、电话号码等信息。表格是用于显示信息的,而表单正是用来接受用户输入信息的。 一个
8、表单要放在表单标签对、之间,中间放置表单输入控件元素或其他内容。表单的一般格式如下:, 表单输入控件元素或其他内容 ,表单控件元素是用于接受输入的控件,如文本框、提交按钮等。 属性说明: method 设置传送表单数据的方式。取值为get(默认方式)或post。 action 设置处理表单数据的处理程序。 post和get是两种不同的传送表单数据的方式。get方法把表单数据附加到浏览器地址栏地址的后面(信息被显示,不安全)向服务器传送,其长度不能超过2K字节。post方法把表单数据邮寄,在浏览器地址栏不会显示,其长度不受限制。,3.2.1 表单的基本结构,【例3-6】一个简单的表单示例(Cha
9、3-6.htm)。, 登录 用户名: 密码: ,3.2.2 表单输入控件元素,cha3-6.htm文档中有三行代码都是“”格式,这就是用于接受输入的输入标签,而在显示后的页面中看到的是文本框、按钮等不同式样的控件,所以称之为“控件”元素。 表单常用的输入控件元素大部分由输入标签实现,由的“type”属性具体确定是哪一种控件,所以该属性是必须有的。 标签必须放在标签对中,其常用属性见下表。 的常用属性,3.2.3 单行文本框、密码框、按钮,文本框、密码框、按钮的相关属性,【例3-7】单行文本框、密码框和按钮示例(Cha3-7.htm): 在Cha3-6.htm文档中加入重置按钮、普通按钮和处理表
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ppt
链接地址:https://www.31doc.com/p-2602133.html