人机交互界面的设计第七章 表格表单页面.pptVIP

人机交互界面设计 第七章 表格、表单页面 目录 01 表格的应用 02 表单的应用 Social Media Lorem ipsum dolor sit amet, consectetur adipiscing. Code Lorem ipsum dolor sit amet, consectetur adipiscing. Photography Lorem ipsum dolor sit amet, consectetur adipiscing. Copywriting Lorem ipsum dolor sit amet, consectetur adipiscing. Films Lorem ipsum dolor sit amet, consectetur adipiscing. 目前网络中的网页通常采用DIV来进行布局，基本不再使用表格来布局网页。虽然表格不再用来布局网页，但是网页中某些特殊的应用，用表格比用DIV更方便、简洁。如网页中的数据统计表，使用表格可以更清晰地排列数据。在网页的实际制作过程中，表单网页如注册登录页面则更多的采用表格布局，因为表格对表单的位置控制更强大、灵活。能够熟练地使用表格，对于制作网页来说犹如如虎添翼。 01 表格的应用 创建表格 1、表格标签 表格由三个基本元素组成：table元素、tr元素、td元素。 2、表格的基本结构 表格在网页中的结构表现与自然结构是相同的，具有行和列。 3、表格的属性 （1）table标签的宽width、高height和边框border属性 （2）table标签的边框颜色属性bordercolor （3）table标签的间距cellspacing和边距cellpadding属性 （4）td标签的水平对齐方式align和垂直对齐方式valign属性 （5）表格的背景属性 单元格的合并及拆分 1、单元格的合并 合并单元格是将表格中相邻的多个单元格合并成一个单元格，有横向上的合并和纵向上的合并。 （1）横向合并单元格 用属性colspan来进行设置 （2）纵向合并单元格 用属性rowspan来进行设置 2、单元格的拆分 单元格的拆分，其实质是将其他相关的单元格进行的合并操作。如：我们将一行中的一个单元格拆分成两行的两个单元格，而这一行中其他的所有单元格，都纵向上合并了两个单元格，分别增加了rowspan=”2”的属性，并且表格会增加一行即多了一对tr标签，tr标签中只有一对td标签。 表格的嵌套 表格可以用来布局网页，但是网页的栏目板块有时候是不规则展现的。因此，要用标准的表格去布局不规则的网页栏目时，会采用一定的表格嵌套来完成。 表格的嵌套就是在建立的表格中的某一个单元格当中，再创建一个表格出来。 表格的嵌套常用在网页的布局中。 02 表单的应用 建立HTML表单 网页中的表单用form/form标签进行创建。表单标签是双标签，用一对标签分别定义表单的开始位置和结束位置，在标签对之间创建表单控件。在表单的开始标签form中，可以设置表单的基本属性，包括表单的名称name属性，处理表单数据的目标程序action属性以及传送数据的方法method属性等。表单form标签相当于是表单的容器，里面除了包含表单控件外，还可以包含其它的文本元素，如段落、列表等。 表单标签中常用的属性： （1）name属性：用来设置表单的名称。 （2）action属性：用于设定表单数据处理程序URL的地址。 例如：http://localhost/test.asp。 （3）method属性：用来定义数据传递到服务器的方式。有4种方式，即它的属性值有4种值 创建表单控件 用户与表单交互是通过表单的控件进行的。表单控件通过name属性进行标识，通过value属性值获取输入数据。表单的提交是通过表单的提交按钮完成的。 表单控件中，input元素可以定义表单中的大部分的控件，控件的类型由type属性值决定，不同的值对应不同类型的表单控件. type属性值 控件的类型说明 text（默认） 表示单行输入文本框 password 表示密码框，输入的数据用星号显示 radio 表示单选框 checkbox 表示复选框 file 表示文件域，由一个单行文本框和一个“浏览”按钮组成 submit 表示提交按钮，将表单数据发送到服务器 reset 表示重置按钮，将重置表单中的数据，以便重新输入 button 表示普通按钮，应用value的属性值定义按钮上的文字显示 image 表示一个图像按钮 hidden 表示隐藏文本框 H