表格框架与表单.ppt

《表格框架与表单.ppt》由会员分享，可在线阅读，更多相关《表格框架与表单.ppt（64页珍藏版）》请在三一办公上搜索。

1、表格、框架与表单,第四章,目标,表格的使用表格的格式框架的使用框架的格式,预习检查,请叙述表格是由哪两部分组成？创建一个表格必须需要哪些标签？,本章任务,制作“宝贝分类”页面制作“公告栏”页面,会使用表格的基本结构实现简单表格会使用表格相关标签实现跨行、跨列的复杂表格会使用表格相关设置进行美化修饰,讲解目标,为什么使用表格,表格应用场合论坛门户网站购物网站,论坛中应用表格,门户网站应用表格,购物网站应用表格,表格的基本结构,行,列,单元格,在 HTML 文档中，广泛使用表格来存放网页上的文本和图像,表格的基本语法,单元格内容,border用来设置表格边框尺寸大小,如何创建表格,移动 联通 铁通

2、 IBM 惠普 华硕,查看源代码,什么是跨行跨列的表格,跨3列,跨3行,下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列?,跨多列的表格,学生成绩表 英语 数学 语文 95 98 89,COLSPAN=“n”属性表示跨多少列？,查看源代码,跨多行的表格,早上菜谱 食物 鸡蛋 饮料 牛奶 甜点 开心粉,rowspan=“n”属性表示跨多少行？,查看源代码,手机充值、IP卡 办公设备、文具 各种卡的总汇 铅笔 彩笔 打印 刻录,如何创建跨行跨列的表格,查看源代码,小结1,编写如下图所示效果对应的html代码,第一行第一个格子跨了2行,此格子跨了3列,练习答案,练习代码,什么是表格的美化修饰,根

3、据理解,下面表格应该从哪些方面进行美化修饰？,如何设置表格的尺寸和边框,品牌商城 笔记本电脑 办公设备、文具、耗材 惠普 华硕 打印机 刻录盘,width用来设置表格的宽度height用来设置表格的高度,border用来设置表格边框尺寸大小,bordercolor用来设置表格边框颜色,查看源代码,如何设置背景,笔记本电脑 办公设备、文具、耗材,background属性用来设置表格的背景图片,bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝，下图就是RGB颜色对照表。,查看源代码,如何设置对其方式,笔记本电脑 办公设备、文具、耗材

4、惠普 华硕 打印机 刻录盘,align属性用来设置表格、行、列的对齐方式,查看源代码,为什么要使用填充属性,单元格里的内容太靠近边线，怎么办？,未填充的效果，字与单元格边框之间的距离靠得太近,什么是填充属性和间距属性,border(边框的厚度),cellpadding(单元格填充),cellspacing(单元格间距),如何使用填充、间距属性,border(边框的厚度),cellpadding(单元格填充),cellspacing(单元格间距),查看源代码,如何设置表格的填充属性,笔记本电脑 办公设备、文具、耗材.,cellspacing属性用来设置表格内框宽度 cellpadding属性用来

5、设置表格内填充距离,查看源代码,填充之后的效果,小结2,表格的高度、宽度、背景图像、边框和填充属性,行的背景色,单元格居中对齐,练习答案,练习代码,编写如下图所示效果对应的HTML代码,如何实现图文内容的布局，达到如左图所示页面的效果？分析上图所示页面，应该用什么进行布局？,什么是表格布局,使用表格进行布局,用表格对网页的内容进行整体控制,如何使用表格进行布局,使用表格布局下图，需要几行几列？,需要7行2列,如何使用表格进行布局,超值变形金钢2.5折!人们为啥对电视吼叫,查看源代码,编写如下图所示效果对应的html代码,小结3,跨2行，并放了一副图片,此单元格放了一副图片,此单元格跨了3列,练

6、习答案,练习代码,总结,创建表格最少需要那三个标签？简述表格的基本结构。跨行跨列的表格，主要在什么情况下使用？给你一个表格，你会从哪些方面进行美化？,框架,广告栏顶部框架(top.htm),导航栏左侧框架(left.htm),详细内容页面右侧框架(main.htm),框架的边框,框架集页面(FrameSet.htm),框架使用场合,页面的一个固定部分显示徽标或静态信息,在另一个固定部分显示导航部分详细内容,在此处显示详细内容，页面中此部分是变化的。,框架的基本结构,框架页面的基本语法,边框尺寸大小,将窗口分割成左中右3个部分,可选,将窗口分割成上下2个部分,可选,第一个窗口要显示的网页,框架的

7、基本结构,rows_cols框架,将窗口分割成上中下3部分,窗口边框的宽度,如果要在浏览器中创建左中右三个窗口,该如何实现？,查看源代码,每个窗口对应一个页面，以及一个框架集页面，总共需要几个HTML页面文件？,如何创建多个复杂的窗口,要实现如下图所示的窗口，该如何制作？,1、分成上下两个窗口2、把下面的窗口分成 左右两个窗口,top窗口,left窗口,right窗口,如何创建多个复杂的窗口,创建多个复杂的窗口实现步骤如下：1、创建一个HTML页面“top.html”2、创建一个HTML页面“left.html”3、创建一个HTML页面“right.html”,top.html效果图,left

8、.html效果图,right.html效果,如何创建多个复杂的窗口,4、新建多框架HTML页面“Frame_Sets.html”,.,查看源代码,设置无框架边框,不显示滚动条,禁止调整框架大小,框架名称，便于超文本链接锚标签target属性所引用,如何设置窗口链接的显示位置,如果在同一个页面中，要实现在一个框架窗口中的超链接页面出现在另一个框架窗口中，如何实现？,演示示例2：不同框架之间超链接效果,使用target目标窗口属性,如何设置窗口链接的显示位置,target目标窗口属性name“显示的窗口名”,target属性指定了所链接的文件出现在名称为“窗口名”的框架窗口里。,target属性指

9、定了所链接的文件出现在名称为“rightframe”的框架窗口里,演示示例3：使用target=“窗口名”,查看源代码,如何设置窗口链接的显示位置,target目标窗口属性四个特殊的窗口 显示在新窗口 显示在本窗口 显示在父窗口 显示在整个浏览器窗口,新启一个窗口打开文件“right.html”,演示示例4：使用四个特殊的窗口,小结2,top.html,left.html,right1.html或right2.html,frame_sets.html,练习答案,练习代码,编写如下图所示效果对应的html代码,表单主要内容,建立表单,输入标记,选择标记,多行文本框,综合案例,建立表单,表单是网站

10、管理者与浏览者之间沟通的桥梁表单由描述表单元素的HTML代码和客户端的脚本构成。由成对标签来定义。其语法格式如下：,表单属性,标签有三个基本的属性：name属性 定义表单的名称。表单提交后，Web服务器的表单处理程序根据该属性的值识别各表单。method属性 定义表单信息提交的方法，可取get和post两个值。当参数为get时表示从服务器获取信息，提交信息通过URL传递，总长度不能超过8192个字符；当参数为post时表示向服务器发送信息，提交信息的长度没有限制。默认情况下为get方式提交。action属性 用来指出表单提交的地址。,输入标记-,定义页面上表单中的几种常见组件语法格式：属性说明

11、：name=“组件标识名”type=“组件类型”maxlength=“用户输入的最大字符数”size=“文本框的可显示的字符数”value=“文本框初始文本”,输入标记-,单行文本框,语法格式示例：标签的type属性的值为“text”时，表示该输入项标识了一个单行文本框。,单行文本框,单行文本框示例：,单行文本框,单行文本框示例代码：,输入用户姓名 请输入你的姓名：,密码输入框,标签的type属性的值为password时，表示该输入项为密码输入框，输入的内容以*表示（屏蔽输入内容）。其语法格式为：密码框示例：,密码输入框,密码框示例代码：,输入用户姓名和密码 用户名：密码：,按钮,普通按钮 b

12、utton 常用来配合JavaScript脚本处理表单提交按钮 submit单击它时可以实现表单内容的提交（传送给给服务器）重置按钮 reset单击重置按钮时，浏览器可以清除表单中的输入信息而恢复到默认的表单内容设定。,按钮,按钮示例,按钮,按钮种类示例注册用户：密码：注：界面上单击按钮后的动作效果会在后续章节及后续课程中讲述。,单选框,单选框（单选按钮）的类型名是radio。当 type=radio时，表示输入项是一个单选框。在一组单选框中，存在互斥关系，用户只能选择一项作为输入信息。其语法格式为：name：单选框标识名。名字相同的几个单选框为一组（互斥）。checked：表示此项被默认选中

13、（它没有属性值，起选中标志作用）。同一组中最多只能有一个单选框可以指定checked属性。value：表示选中该单选框后传送到服务器端的值。,复选框,当type=checkbox时，表示输入项是一个复选框。复选框通常有两种状态，选中或未选中。语法：checked表示此项被默认选中value表示选中该复选框后传送到服务器端的值。,单选框与复选框例,单选框、复选框示例：图例为页面初始状态每一个复选框都是一个独立的操作单位，它的选取与其他复选框状态无关；单选框要以组出现，一组中同时只能选中一个。,单选按钮组,单选框与复选框,示例代码：,选择请选择你喜欢的水果：苹果桔子芒果苹果桔子芒果,文件输入框,当

14、type=file时，表示该输入项是一个文件输入框，用户可以在文件输入框的内部填写自己硬盘中的文件路径，然后通过表单上传。语法格式如下：文件输入框示例：单击文件输入框提供的“浏览”按钮，便可弹出“选择文件”对话框，指定上传的文件,文件输入框,文件输入框示例代码：,插入文件框 请上传您的照片：,选择标记,在表单中，通过和标签就可以在浏览器中出现一个下拉式的菜单或带有滚动条的列表菜单。其语法格式如下：选项值 选项值说明：size属性表示显示的菜单项数目。multiple属性表示列表中的项目允许多选（否则只能单选）select标记中的每一个option标记代表一个菜单项,选择标记,选择标记示例：代码：选择你最喜欢的水果是：苹果 桔子 芒果 香蕉,多行文本框,标签用来制作多行文本框，这个标签是个成对标签。语法格式如下：属性说明：rows用来设定多行文本框一次能显示的行数cols 用来设定多行文本框一次能显示的列数value用来设定多行文本框的初始文本。,多行文本框,多行文本框示例：示例代码：请提宝贵意见 请提宝贵意见：,本章小结,表单的相关概念表单中标签的属性及其用法标签、标签、标签和标签的相关用法,让我们一起努力！,