《表格、框架、表单课件》由会员分享，可在线阅读，更多相关《表格、框架、表单课件（92页珍藏版）》请在金锄头文库上搜索。
1、页面布局和数据提交,本节课程目标,表格 使用表格的基本结构实现简单表格 使用表格相关标签实现跨行、跨列的复杂表格 使用表格相关设置进行美化修饰 框架 会使用框架结构实现多窗口展示页面 表单 使用表单的基本结构制作表单页面 使用各种表单元素实现注册页面 理解post和get两种提交方式的区别 Dreamweaver工具的使用,本节考核目标,使用表格进行布局 制作包含表单控件的网页 会使用框架结构实现多窗口展示页面 会使用表单的基本结构制作表单页面,布局标记-表格,会使用表格的基本结构实现简单表格 会使用表格相关标签实现跨行、跨列的复杂表格 会使用表格相关设置进行美化修饰,为什么使用表格,表格应用
2、场合 论坛 门户网站 购物网站,论坛中应用表格,门户网站应用表格,购物网站应用表格,HTML表格,行,列,表头/列标题,在HTML文档中使用表格来存放网页上的文本和图像,控制网页布局。,单元格,表格基本结构,边框,HTML表格,表格常用的属性,表格的基本语法, 单元格内容 ,border用来设置表格边框尺寸大小,如何创建表格, 移动 联通 铁通 IBM 惠普 华硕 ,查看源代码,什么是跨行跨列的表格,跨3列,跨3行,下图中的表格哪里用了跨行？哪里用了跨列？ 跨了几行几列?,跨多列的表格, 学生成绩表 英语 数学 语文 95 98 89 ,COLSPAN=“n” 属性表示跨多少列？,查看源代码,
3、跨多行的表格, 早上菜谱 食物 鸡蛋 饮料 牛奶 甜点 开心粉 ,rowspan =“n” 属性表示跨多少行？,查看源代码, 手机充值、IP卡 办公设备、文具 各种卡的总汇 铅笔 彩笔 打印 刻录 ,如何创建跨行跨列的表格,查看源代码,表 格 示 例,小结1,编写如下图所示效果对应的html代码,第一行第一个格子跨了2行,此格子跨了3列,练习答案,练习代码,什么是表格的美化修饰,根据理解,下面表格应该从哪些方面进行美化修饰？,如何设置表格的尺寸和边框, 品牌商城 笔记本电脑 办公设备、文具、耗材 惠普 华硕 打印机 刻录盘 ,width用来设置表格的宽度 height用来设置表格的高度,bor
4、der用来设置表格边框尺寸大小,bordercolor用来设置表格边框颜色,查看源代码,如何设置背景, 笔记本电脑 办公设备、文具、耗材 ,background属性用来设置表格的背景图片,bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝 ，下图就是RGB颜色对照表 。,查看源代码,如何设置对其方式, 笔记本电脑 办公设备、文具、耗材 惠普 华硕 打印机 刻录盘 ,align属性用来设置表格、行、列的对齐方式,查看源代码,为什么要使用填充属性,单元格里的内容太靠近边线，怎么办？,未填充的效果，字与单元格边框之间的距离靠得太近,什么是
5、填充属性和间距属性,border(边框的厚度),cellpadding (单元格填充),cellspacing (单元格间距),如何使用填充、间距属性,border(边框的厚度),cellpadding (单元格填充),cellspacing (单元格间距),查看源代码, ,如何设置表格的填充属性, 笔记本电脑 办公设备、文具、耗材 . ,cellspacing属性用来设置表格内框宽度 cellpadding属性用来设置表格内填充距离,查看源代码,填充之后的效果,小结2,表格的高度、宽度、背景图像、边框和填充属性,行的背景色,单元格居中对齐,练习答案,练习代码,编写如下图所示效果对应的HTML
6、代码,如何实现图文内容的布局，达到如左图所示页面的效果？ 分析上图所示页面，应该用什么进行布局？,什么是表格布局,使用表格进行布局,用表格对网页的内容进行整体控制,如何使用表格进行布局,使用表格布局下图，需要几行几列？,需要7行2列,如何使用表格进行布局, 超值变形金钢2.5折! 人们为啥对电视吼叫 ,查看源代码,编写如下图所示效果对应的html代码,小结3,跨2行，并放了一副图片,此单元格放了一副图片,此单元格跨了3列,练习答案,练习代码,框架,广告栏顶部框架(top.htm),导航栏左侧框架(left.htm),详细内容页面右侧框架 (main.htm),框架的边框,框架集页面(Frame
7、Set.htm),框架使用场合,页面的一个固定部分显示徽标或静态信息,在另一个固定部分显示导航部分详细内容,在此处显示详细内容， 页面中此部分是变化的。,HTML框架,Frameset 决定如何划分Frame。 cols属性表示按列分布Frame。 rows属性表示按行分布Frame。 Frame 用 这个Tag设定网页。 src属性值就是网页的路径和文件名。, ,框架的基本结构,框架页面的基本语法,边框尺寸大小,将窗口分割成左中右3个部分,可选,将窗口分割成上下2个部分,可选,第一个窗口要显示的网页,框架的基本结构, rows_cols框架 ,将窗口分割成上中下3部分,窗口边框的宽度,如果要
8、在浏览器中创建左中右三个窗口,该如何实现？,查看源代码,每个窗口对应一个页面，以及一个框架集页面，总共需要几个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、
9、新建多框架HTML页面“Frame_Sets.html”,. ,查看源代码,设置无框架边框,不显示滚动条,禁止调整框架大小,框架名称，便于超文本链接锚标签target属性所引用,如何设置窗口链接的显示位置,如果在同一个页面中，要实现在一个框架窗口中的超链接页面出现在另一个框架窗口中，如何实现？,演示示例2：不同框架之间超链接效果,使用target目标窗口属性,如何设置窗口链接的显示位置,target目标窗口属性 name“显示的窗口名” ,target属性指定了所链接的文件出现在名称为“窗口名”的框架窗口里。, ,target属性指定了所链接的文件出现在名称为“rightframe”的框架窗口
10、里,演示示例3：使用target=“窗口名”,查看源代码,如何设置窗口链接的显示位置,target目标窗口属性 四个特殊的窗口 显示在新窗口 显示在本窗口 显示在父窗口 显示在整个浏览器窗口, ,新启一个窗口打开文件 “right.html”,演示示例4：使用四个特殊的窗口,HTML框架示例,小结4,top.html,left.html,right1.html或right2.html,frame_sets.html,练习答案,练习代码,编写如下图所示效果对应的html代码,总结,创建表格最少需要那三个标签？ 简述表格的基本结构。 跨行跨列的表格，主要在什么情况下使用？ 给你一个表格，你会从哪些
11、方面进行美化？ 框架使用场合 如何创建多个复杂的窗口 如何设置窗口链接的显示位置 课后练习 在页面上显示一表格，熟练运用标签（表格限制：3横4列，第一例跨3行）,表单,会使用表单的基本结构制作表单页面 会使用各种表单元素实现注册页面 能理解post和get两种提交方式的区别,表单,表单的典型应用 注册用户 收集信息 反馈信息 为网站提供搜索工具,注册用户,收集信息,反馈信息,提供搜索工具,HTML表单,表单允许客户端的用户以标准格式向服务器提交数据。 表单的创建者为了收集所需数据，使用了各种控件设计表单如 INPUT 或 SELECT。 查看表单的用户只需填充数据并单击提交按钮即可向服务器发送
12、数据，服务器上的脚本会处理这些数据。, 输入你的姓名: 喜爱的冰淇淋口味: 巧克力 草莓 香草 ,表单包含的控件,单行文本输入框(TEXT),单选按钮(RADIO),复选框(CHECKBOX),下拉列表(SELECT),重置按钮(RESET),提交按钮(SUBMIT),多行文本框(TEXTAREA),密码框(PASSWORD),Form表单标记,表单常用的属性,Input标记,button checkbox file,hidden image password,radio reset submit,text,表单包含的控件,单行文本输入框(TEXT),单选按钮(RADIO),复选框(CHECK
13、BOX),下拉列表(SELECT),重置按钮(RESET),提交按钮(SUBMIT),多行文本框(TEXTAREA),密码框(PASSWORD),表单元素的统一格式, ,指定元素的类型，可为TEXT、RADIO、SUBMIT等,控件的名称,控件的初始值,控件的初始宽度,控件中输入的最多字符个数,控件是否被选中,Text文本框,文本框常用的属性,表单元素的逐一介绍,文本框基本语法 , 名字： ,查看源代码,单行文本输入框，字符宽度为20,文本区的宽度,输入元素的默认值,文本输入框,Button按钮,按钮常用的属性,表单元素的逐一介绍,按钮基本语法 ,按钮名称,按钮类型可为button、submi
14、t,按钮上的标签, ,查看源代码,单击按钮，控件的值被重置为value属性中指定的初始值,Checkbox复选框,复选框常用的属性,表单元素的逐一介绍,复选框基本语法 ,复选框,复选框名,复选框值, 聊天 ,查看源代码,设置此复选框被选中,RadioButton单选框,单选框常用的属性,表单元素的逐一介绍,单选按钮基本语法 ,初始值,单选按钮,默认选中, 性别： 男 ,查看源代码,设置此单选按钮被选中,Select下拉列表,下拉列表常用的属性,列表框基本语法, 说明： size确定列表中可同时看到的行数。 selected默认被选中的可选项。,表单元素的逐一介绍,查看源代码,出生日期： 日,设
15、置此输入框最多只能输入四个符号,设置“选择月份”选项默认被选中,表单元素的逐一介绍,密码框基本语法 ,密码区宽度,初始密码,密码框, 密码： ,查看源代码,密码框，22个字符宽度,表单元素的逐一介绍,按钮基本语法 ,按钮名称,按钮类型可为button、submit,按钮上的标签, ,查看源代码,单击按钮，控件的值被重置为value属性中指定的初始值,Hidden隐藏文本域,隐藏域常用的属性,Image图像域,图像域常用的属性,File文件上传,文件上传框常用的属性,文本框用输入控件input元素写在之间。 说明： ?：文本框的名字 ;*：text/password *：默认值;*：长度,基本结构，一组单选框每个单选框的name值一定要相同,复选框，type=checkbox表示使用复选框，checked表示被选择。,要成对出现。 rows是行，cols是宽度，放在之间,下拉列表select元素，在select中填写option，包含若干个option, 每个option有一个唯一的value值,表单标签中必须设置enctype =multipart/form-data来确保文件被正确编码, 表单的传送方式必
