《表格框架与表单》PPT课件

表格、框架与表单,第四章,目标,表格的使用表格的格式框架的使用框架的格式,预习检查,请叙述表格是由哪两部分组成？创建一个表格必须需要哪些标签？,本章任务,制作“宝贝分类”页面制作“公告栏”页面,会使用表格的基本结构实现简单表格会使用表格相关标签实现跨行、跨列的复杂表格会使用表格相关设置进行美化修饰,讲解目标,为什么使用表格,表格应用场合论坛门户网站购物网站,论坛中应用表格,门户网站应用表格,购物网站应用表格,表格的基本结构,行,列,单元格,在HTML文档中，广泛使用表格来存放网页上的文本和图像,表格的基本语法,单元格内容,border用来设置表格边框尺寸大小,如何创建表格,移动联通铁通IBM惠普华硕,查看源代码,什么是跨行跨列的表格,跨3列,跨3行,下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列?,跨多列的表格,学生成绩表英语数学语文959889,COLSPAN=“n”属性表示跨多少列？,查看源代码,跨多行的表格,早上菜谱食物鸡蛋饮料牛奶甜点开心粉,rowspan=“n”属性表示跨多少行？,查看源代码,手机充值、IP卡办公设备、文具各种卡的总汇铅笔彩笔打印刻录,如何创建跨行跨列的表格,查看源代码,小结1,编写如下图所示效果对应的html代码,第一行第一个格子跨了2行,此格子跨了3列,练习答案,练习代码,什么是表格的美化修饰,根据理解,下面表格应该从哪些方面进行美化修饰？,如何设置表格的尺寸和边框,品牌商城笔记本电脑办公设备、文具、耗材惠普华硕打印机刻录盘,width用来设置表格的宽度height用来设置表格的高度,border用来设置表格边框尺寸大小,bordercolor用来设置表格边框颜色,查看源代码,如何设置背景,笔记本电脑办公设备、文具、耗材,background属性用来设置表格的背景图片,bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝，下图就是RGB颜色对照表。,查看源代码,如何设置对其方式,笔记本电脑办公设备、文具、耗材惠普华硕打印机刻录盘,align属性用来设置表格、行、列的对齐方式,查看源代码,为什么要使用填充属性,单元格里的内容太靠近边线，怎么办？,未填充的效果，字与单元格边框之间的距离靠得太近,什么是填充属性和间距属性,border(边框的厚度),cellpadding(单元格填充),cellspacing(单元格间距),如何使用填充、间距属性,border(边框的厚度),cellpadding(单元格填充),cellspacing(单元格间距),查看源代码,如何设置表格的填充属性,笔记本电脑办公设备、文具、耗材.,cellspacing属性用来设置表格内框宽度cellpadding属性用来设置表格内填充距离,查看源代码,填充之后的效果,小结2,表格的高度、宽度、背景图像、边框和填充属性,行的背景色,单元格居中对齐,练习答案,练习代码,编写如下图所示效果对应的HTML代码,如何实现图文内容的布局，达到如左图所示页面的效果？分析上图所示页面，应该用什么进行布局？,什么是表格布局,使用表格进行布局,用表格对网页的内容进行整体控制,如何使用表格进行布局,使用表格布局下图，需要几行几列？,需要7行2列,如何使用表格进行布局,超值变形金钢2.5折!人们为啥对电视吼叫,查看源代码,编写如下图所示效果对应的html代码,小结3,跨2行，并放了一副图片,此单元格放了一副图片,此单元格跨了3列,练习答案,练习代码,总结,创建表格最少需要那三个标签？简述表格的基本结构。跨行跨列的表格，主要在什么情况下使用？给你一个表格，你会从哪些方面进行美化？,框架,广告栏顶部框架(top.htm),导航栏左侧框架(left.htm),详细内容页面右侧框架(main.htm),框架的边框,框架集页面(FrameSet.htm),框架使用场合,页面的一个固定部分显示徽标或静态信息,在另一个固定部分显示导航部分详细内容,在此处显示详细内容，页面中此部分是变化的。,框架的基本结构,框架页面的基本语法,边框尺寸大小,将窗口分割成左中右3个部分,可选,将窗口分割成上下2个部分,可选,第一个窗口要显示的网页,框架的基本结构,rows_cols框架,将窗口分割成上中下3部分,窗口边框的宽度,如果要在浏览器中创建左中右三个窗口,该如何实现？,查看源代码,每个窗口对应一个页面，以及一个框架集页面，总共需要几个HTML页面文件？,如何创建多个复杂的窗口,要实现如下图所示的窗口，该如何制作？,1、分成上下两个窗口2、把下面的窗口分成左右两个窗口,top窗口,left窗口,right窗口,如何创建多个复杂的窗口,创建多个复杂的窗口实现步骤如下：1、创建一个HTML页面“top.html”2、创建一个HTML页面“left.html”3、创建一个HTML页面“right.html”,top.html效果图,left.html效果图,right.html效果,如何创建多个复杂的窗口,4、新建多框架HTML页面“Frame_Sets.html”,.,查看源代码,设置无框架边框,不显示滚动条,禁止调整框架大小,框架名称，便于超文本链接锚标签target属性所引用,如何设置窗口链接的显示位置,如果在同一个页面中，要实现在一个框架窗口中的超链接页面出现在另一个框架窗口中，如何实现？,演示示例2：不同框架之间超链接效果,使用target目标窗口属性,如何设置窗口链接的显示位置,target目标窗口属性name“显示的窗口名”,target属性指定了所链接的文件出现在名称为“窗口名”的框架窗口里。,target属性指定了所链接的文件出现在名称为“rightframe”的框架窗口里,演示示例3：使用target=“窗口名”,查看源代码,如何设置窗口链接的显示位置,target目标窗口属性四个特殊的窗口显示在新窗口显示在本窗口显示在父窗口显示在整个浏览器窗口,新启一个窗口打开文件“right.html”,演示示例4：使用四个特殊的窗口,小结2,top.html,left.html,right1.html或right2.html,frame_sets.html,练习答案,练习代码,编写如下图所示效果对应的html代码,表单主要内容,建立表单,输入标记,选择标记,多行文本框,综合案例,建立表单,表单是网站管理者与浏览者之间沟通的桥梁表单由描述表单元素的HTML代码和客户端的脚本构成。由成对标签来定义。其语法格式如下：,表单属性,标签有三个基本的属性：name属性定义表单的名称。表单提交后，Web服务器的表单处理程序根据该属性的值识别各表单。method属性定义表单信息提交的方法，可取get和post两个值。当参数为get时表示从服务器获取信息，提交信息通过URL传递，总长度不能超过8192个字符；当参数为post时表示向服务器发送信息，提交信息的长度没有限制。默认情况下为get方式提交。action属性用来指出表单提交的地址。,输入标记-,定义页面上表单中的几种常见组件语法格式：属性说明：name=“组件标识名”type=“组件类型”maxlength=“用户输入的最大字符数”size=“文本框的可显示的字符数”value=“文本框初始文本”,输入标记-,单行文本框,语法格式示例：标签的type属性的值为“text”时，表示该输入项标识了一个单行文本框。,单行文本框,单行文本框示例：,单行文本框,单行文本框示例代码：,输入用户姓名请输入你的姓名：,密码输入框,标签的type属性的值为password时，表示该输入项为密码输入框，输入的内容以*表示（屏蔽输入内容）。其语法格式为：密码框示例：,密码输入框,密码框示例代码：,输入用户姓名和密码用户名：密码：,按钮,普通按钮button常用来配合JavaScript脚本处理表单提交按钮submit单击它时可以实现表单内容的提交（传送给给服务器）重置按钮reset单击重置按钮时，浏览器可以清除表单中的输入信息而恢复到默认的表单内容设定。,按钮,按钮示例,按钮,按钮种类示例注册用户：密码：注：界面上单击按钮后的动作效果会在后续章节及后续课程中讲述。,单选框,单选框（单选按钮）的类型名是radio。当type=radio时，表示输入项是一个单选框。在一组单选框中，存在互斥关系，用户只能选择一项作为输入信息。其语法格式为：name：单选框标识名。名字相同的几个单选框为一组（互斥）。checked：表示此项被默认选中（它没有属性值，起选中标志作用）。同一组中最多只能有一个单选框可以指定checked属性。value：表示选中该单选框后传送到服务器端的值。,复选框,当type=checkbox时，表示输入项是一个复选框。复选框通常有两种状态，选中或未选中。语法：checked表示此项被默认选中value表示选中该复选框后传送到服务器端的值。,单选框与复选框例,单选框、复选框示例：图例为页面初始状态每一个复选框都是一个独立的操作单位，它的选取与其他复选框状态无关；单选框要以组出现，一组中同时只能选中一个。,单选按钮组,单选框与复选框,示例代码：,选择请选择你喜欢的水果：苹果桔子芒果苹果桔子芒果,文件输入框,当type=file时，表示该输入项是一个文件输入框，用户可以在文件输入框的内部填写自己硬盘中的文件路径，然后通过表单上传。语法格式如下：文件输入框示例：单击文件输入框提供的“浏览”按钮，便可弹出“选择文件”对话框，指定上传的文件,文件输入框,文件输入框示例代码：,插入文件框请上传您的照片：,选择标记,在表单中，通过和标签就可以在浏览器中出现一个下拉式的菜单或带有滚动条的列表菜单。其语法格式如下：选项值选项值说明：size属性表示显示的菜单项数目。multiple属性表示列表中的项目允许多选（否则只能单选）select标记中的每一个option标记代表一个菜单项,选择标记,