第04课 使用表格和表单.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,*,使用表格和表单,第四章,用,HTML,代码创建表格,创建表单,使用框架,目标,2,表格,行,列,列标题,在,HTML,文档中，广泛使用表格来存放网页上的文本和图像,单元格,表格标题,3,使用表格,姓名,性别,分数,Robert,M,80,.,创建表格,代表表格的开始，,border=2,表示边框尺寸为,2,表示行，这是表格的第一行，有三列数据，,代表列,表格的第,二行，有三列数据,表格的第,三行，也有三列数据,4,学员档案信息,姓名,性别,分数,Robert,M,80,.,表格的标题,表示表格标题,表示行或列标题，粗体显示表格的第,二行，有三列数据,表格的第,三行，有三列数据,5,学员档案信息,姓名,性别,分数,Robert,M,80,.,表格的对齐方式,整个表格居中,姓名列默认左对齐,性别列居中,分数列右对齐,6,合并单元格,(,跨列,),创建表格,第一学期,第二学期,数学,科学,英语,数学,科学,英语,98,95,80,95,87,88,.,COLSPAN,=“n”,属性表示跨多少列,7,合并单元格,(,跨行,),创建表格,螺母,螺栓,锤子,第一季度,一月,2500,1000,1240,二月,3000,2500,4000,.,ROWSPAN,=“n”,属性表示跨多少行,8,学员档案信息,姓名,性别,分数,Robert,M,80,Mary,F,18,表格的背景色和尺寸设置,表格的颜色设置：,表格的背景色,行的背景色,列的背景色,颜色值可以采用,RGB,（,red/green/blue,）红绿蓝十六进制值表示，如红色,#FF0000,或是一些预定义色彩名称：,red,，,blue,，,yellow,等。,表格的尺寸设置：,例如：,表示一个长为,200,像素，宽为,100,像素的表格。,表示一个宽为窗口的,20%,，高为窗口的,10%,的表格。,18,80,分数,F,M,性别,Mary,Robert,姓名,学员档案信息,9,表单输入元素,-7,课堂练习,:,请编写,HTML,代码,10,表单,11,METHOD=“post,或,get”,表单,ACTION,METHOD,指定提交后由服务器上哪个处理程序处理,指定向服务器提交的方法,:,一般为,post,或,get,方法,post,方法比较安全,ACTION=“URL”,12,表单输入元素,-1,Type,此属性指定元素的类型。,元素类型可以有多种选择,：,TEXT,、,PASSWORD,、,CHECKBOX,、,RADIO,、,SUBMIT,、,RESET,、,FILE,、,HIDDEN,和,BUTTON,。,默认选择为 TEXT。,Name,此属性指定控件的名称。例如，如果表单中有几个文本框，则可以用名称,TEXT1,、,TEXT2,或选择的任何名称来标识它们。,Name,属性的作用域是在,FORM,元素内。,Value,此属性是可选属性，它指定控件的初始值。但是，如果,TYPE,为,RADIO,，则必须指定一个值。,Size,此属性指定控件的初始宽度。,如果 TYPE 为 TEXT 或 PASSWORD，则控件的大小以字符为单位。对于其他输入类型，宽度以像素为单位。,Maxlength,此属性用于指定可在,TEXT,或,PASSWORD,元素中输入的最大字符数。,Checked,此属性是,Boolean,属性，指定按钮是否是打开的。当输入类型为,RADIO,或,CHECKBOX,时，使用此属性。,文本框、按钮、单选按钮、复选框等都是输入元素。,13,表单输入元素,-2,BUTTON,（按钮）,Type,属性：,submit,：,提交按钮,reset,：,重置按钮,button,：,普通按钮,14,表单输入元素,-3,身份证号,TEXT,（文本）,密 码：,请填写您的工作经历,15,表单输入元素,-4,性别：男性,女性,单选按钮和复选框,你喜欢以下哪些明星：,酒井法子,郑秀文,BonJovi,16,HTML,输入元素,-5,2004,年欧锦赛,预测“最佳球员”,Ronaldo,Beckham,Zidane,预测大赛亚军,巴西,法国,阿根廷,预测谁将成为,2004,年欧锦赛冠军？,阅读代码，请问网页中的显示结果？17,表单输入元素,-6,下拉菜单,谁是,2002,年世界杯冠军？,西班牙,法国,巴西,德国,列表选项,18,表单输入元素,-7,课堂练习,:,请编写,HTML,代码,19,框架,框架主要用于把浏览器窗口分为若干个区域，每个区域可以分别显示不同的网页。,通过构建站内网页之间的相互关系，使用框架技术可以实现页面之间的导航，方便浏览者浏览。,框架的基本结构是由,标记与,标记组成的。,标记不可以包含在,标记中，否则,标记将无法正常使用。,一个页面文档中不能同时使用,和,标记。,20,左右分割窗口,使用,cols,属性，可以在水平方向将浏览器分割成多个窗口。,设置宽度值方式有两种：一种是整数设置，单位为像素；另一种则是页面的百分比。,21,上下分割窗口,使用,rows,属性，可以在竖直方向将浏览器分割成多个窗口。,设置宽度值方式有两种：一种是整数设置，单位为像素；另一种则是页面的百分比。,22,设置框架的宽度和颜色,border,属性设置框架的边框宽度,Bordercolor,设置框架的边框颜色,23,设置框架边框的显示,frameboder,属性用于设置是否显示边框。,frameborder,属性：,no/0,隐藏边框,yes/1,显示边框,(,默认值,),24,设置框架内源文件的位置,此标记没有结束标记。,Src,属性用于设置框架内,HTML,文档的位置。,Name,属性用于指定框架的名称。为超链接时，可以通过此名称设置所链接页面的打开窗口。,25,设置框架的边距,设置框架窗口内显示的内容与上下、左右边框的距离。,高度、宽度值为整数，使用的单位为像素。,Noresize,属性禁止对框架窗口大小调整。,26,设置框架窗口的滚动条,Scrolling,属性用来设置框架内滚动条是否显示。,Scrolling,属性值：,Yes,显示滚动条，即使内容没有超出框架也会显示滚动条，此时滚动条没有作用。,No,不显示滚动条，即使内容超出框架，也不会显示滚动条。,Auto,根据框架中的内容自动判断是否显示滚动条。,27,内嵌框架,内嵌框架运用内置框架的概念在,标记中嵌入,标记。,标记可以创建一个内嵌框架，将其插入到网页的任意位置中。,内嵌框架的大小不能调整。,28,设置内嵌框架内容和名称,Src,属性可在内嵌框架内载入,HTML,文件。,Name,属性可以设置内嵌框架的名称。,29,设置内嵌框架的对齐属性,利用,align,属性可设置框架在页面中的对齐方式。,Align,属性,left,center,right,30,设置内嵌框架边框的显示,使用,frameborder,属性可以设置是否显示内嵌框架的边框。,frameborder,属性,0,隐藏边框,1,显示边框,(,默认值,),31,设置内嵌框架的高、宽度,height,属性可以设置内嵌框架的高度,width,属性可以设置内嵌框架的宽度,设置值的方式有两种：整数设置单位为像素；另一种是百分比。,32,设置内嵌框架的边距,在内嵌框架的窗口内设置显示内容与上下、左右边框的距离。,该数值的设置值为整数，单位为像素。,33,设置内嵌框架窗口的滚动条,使用,scrolling,属性可以设置内嵌框架的滚动条是否显示。,scrolling,属性值,Yes,显示滚动条，即使内容没有超出框架也会显示滚动条，此时滚动条没有作用。,No,不显示滚动条，即使内容超出框架，也不会显示滚动条。,Auto,根据框架中的内容自动判断是否显示滚动条。,34,总结,4-1,表格标题,数据,1,数据,2,.,数据,11,数据,22,跨行的单元格：,数据,11,跨列的单元格：,数据,22,表格的一般语法：,35,总结,4-2,文本框,密码框,文本域,单选按钮,男性,复选框,酒井法子,表单的一般语法：,36,总结,4-3,选项,1,选项,2,.,37,总结,4-4,框架,顶部窗口显示广告,top.htm,显示详细内容,main.htm,左侧窗口显示,导航链接,left.htm,38,