《表格和表单》PPT课件

1,表格和表单,2,用HTML代码创建表格创建表单使用框架,目标,3,表格,行,列,列标题,在HTML文档中，广泛使用表格来存放网页上的文本和图像,单元格,4,使用表格姓名性别分数RobertM80.,创建表格,代表表格的开始，border=2表示边框尺寸为2,表示行，这是表格的第一行，有三列数据，代表列,表格的第二行，有三列数据,表格的第三行，也有三列数据,5,学员档案信息姓名性别分数RobertM80.,表格的标题,表示表格标题IEOnly,表示行或列标题，粗体显示,表格的第二行，有三列数据,表格的第三行，有三列数据,6,学员档案信息姓名性别分数RobertM80.,表格在页面中的对齐/布局,整个表格居中,姓名列默认左对齐,性别列居中,分数列右对齐,7,表格内文字的对齐/布局,#=left,center,right例子：FoodDrinkSweetABC,8,表格内文字的对齐/布局,#=top,middle,bottom,baselineFoodDrinkSweetOtherABCD,9,合并单元格(跨列),创建表格第一学期第二学期数学科学英语数学科学英语989580958788.,COLSPAN=“n”属性表示跨多少列,10,合并单元格(跨行),创建表格螺母螺栓锤子第一季度一月250010001240二月300025004000.,ROWSPAN=“n”属性表示跨多少行,11,代码阅读,我的表格12345,12,课堂练习:请编写HTML代码,13,学员档案信息姓名性别分数RobertM80MaryF18,表格的背景色和尺寸设置,表格的尺寸：表示一个长为200像素，宽为100像素的表格。表示一个宽为窗口的20%，高为窗口的10%的表格。表格的背景色行的背景色列的背景色,14,表格边框色彩的亮度控制,IEOnly例子：FoodDrinkSweetABC,15,表格中的空单元格,row1,cell1row1,cell2row2,cell1,16,表格中的空单元格,为了避免这个，可以在空单元格里加入不可分空格来占位，这样边框能正常显示。row1,cell1row1,cell2row2,cell1,17,表格的边框,Thistablehasnoborders:100200300Andthistablehasnoborders:100200300,18,Cellpadding属性,cellpadding属性在表格内容和边框之间留出更多空白Withcellpadding:FirstRowSecondRow,19,Cellspacing属性,cellspacing属性来增加单元格间距Withcellspacing:FirstRowSecondRow,20,应用Cellpadding和Cellspacing,下面是一个结合cellpadding、cellspacing和bgcolor的例子第一行第一列第一行第二列第一行第三列第二行第一列第二行第二列第二行第三列,21,表格的frame属性,IEOnlyframe属性来控制表格周围的边框Frame例子,22,表单,表单是一个能够包含表单元素的区域。表单元素是能够让用户在表单中输入信息的元素（比如文本框，密码框，下拉菜单，单选框，复选框等等）。表单是用元素内定义的。,23,METHOD=“post或get”,表单,ACTION,METHOD,指定提交后由服务器上哪个处理程序处理,指定向服务器提交的方法:一般为post或get方法,post方法比较安全,ACTION=“URL”,24,表单输入元素-1,文本框、按钮、单选按钮、复选框等都是输入元素。,25,表单属性,26,BUTTON（按钮）,27,TEXT（文本框）,身份证号,在多数浏览器中，文本框的宽度默认是20个字符,密码：,请填写您的工作经历,28,单选按钮和复选框,性别：男性女性,你喜欢以下哪些明星：酒井法子郑秀文周杰伦,29,HTML输入元素-5,2004年欧锦赛预测“最佳球员”RonaldoBeckhamZidane预测大赛亚军巴西法国阿根廷预测谁将成为2004年欧锦赛冠军？,30,下拉菜单,谁是2002年世界杯冠军？西班牙法国巴西德国,列表选项,31,下拉菜单,香蕉苹果桔子桃子,32,下拉菜单,注意，是用Ctrl键配合鼠标实现多选。香蕉苹果桔子桃子,33,隐藏表单的元素,例子：Hereisahiddenelement.,34,图片按钮,通常用以取代Submit及Reset两个按键，因为由程式产生的按键并不漂亮，这Image参数便允许采用自已制作的按键。例如：type=Image输入方式为I=submit所要代表的按键，可以是submit,reset,或其它。align=BOTTOM可选值：top,middle,bottom,left,right,texttop,baseline,absmiddle。src=new017.gif按键图片来源，若此图片文件不与该html文件在同一目录下，请加上相对或绝对路径。,35,练习,36,例子,Thisformsendsane-mailtoW3Schools.Name:Mail:Comment:yourcomment,37,框架,广告栏顶部框架(top.htm),商品详细介绍右侧框架(main.htm),商品导航左侧框架(left.htm),38,为何使用框架,在另一个固定部分显示导航部分,在页面的一个固定部分显示徽标或静态信息,在此处显示主要内容。站点中只有此部分是变化的。,39,框架,.不允许各窗口改变大小缺省设置是允许各窗口改变大小的。纵向排列多个窗口：横向排列多个窗口：,40,框架,纵横排列多个窗口：,41,框架,各窗口间相互操作(F