3 表格与表单.ppt

表单输入元素-6 下拉菜单 B谁是 2002 年世界杯冠军？/B SELECT NAME =“myselect OPTION SELECTED西班牙/OPTION OPTION法国/OPTION OPTION巴西/OPTION OPTION德国/OPTION /SELECT 列表选项 表单输入元素-7 课堂练习:请编写HTML代码 课堂重点 使用表格进行页面排版布局 表格相关的标签和属性 表单中的各种元素 有问有答 * 演示： TG4-Source文件夹中“无序列表“用例 * 演示： TG4-Source文件夹中“有序列表“用例，并演示改变type类型的效果。 * 演示制作上图中的表格：(参见TG2-Source文件夹中表格例子) 1）插入表格（告诉学员几行几列） 2）在单元格中键入文字 3）单元格内容的对齐 4）合并单元格（顺便告诉学员什么是跨行，跨列，为后续TABLE标签打基础） 5）修饰表格的背景色 6）修饰第一行单元格的背景色（第一行一般作为单元格的标题列） 7）浏览显示给学员看，遗憾的是表格没有居中 8）整个表格的居中 9)再次浏览给学员看 10）总结讲解相关理论 * 演示设置表格背景图片，参见TG2-Source文件夹的用例“表格背景”，也可从网上收集更好的背景图片。 * 强调表格的几个重要组成部分： 1）行 2）列 3）单元格 4）列标题（一般位于第一行或第一列，粗体显示），可选 5）表格标题，可选 * 1.先根据效果图：集体提问，表格是多少行多少列？ 回答：肯定是2行3列。 2.讲解代码：TABLE表示….TR表示…TD表示。 3.为了代码的可读性，象C语言写代码一样，为了显示层次关系， 建议学员写HTML代码时保持一定的缩进，如幻灯片的示例代码所示。 4.演示：TG5-Source文件夹中的“简单表格”用例。 * 讲解要点： 1）表格一般都需要标题，说明表格的内容主题。表格的标题由标签CAPTION设置 设置标题位于表格上方： 　　CAPTION align=top 表格标题 /CAPTION 设置标题位于表格下方： 　　CAPTION align=bottom表格标题/CAPTION 2）同理，表格的第一行或第一列，一般需要加粗突出显示，作为行或列的标题。 设置行或列的标题： TH行或列标题/TH 演示：TG5-Source文件夹中的“表格标题”用例。 * 讲解要点： 1）为了美观大方，表格中的数据一般需要设置对齐方式。 2）设置表格、行或列的对齐方式，修改align属性为right（右对齐），center（居中）或left（左对齐）就可以了，默认为“左对齐”。 本例效果：设置表格居中显示，姓名列“左对齐”，性别列居中，分数列“右对齐”。 演示：TG5-Source文件夹中的“表格对齐”用例。 * 讲解要点： 1）表格的颜色设置： 　　表格的背景色 TABLE bgcolor=颜色值 　　行的背景色　 TR bgcolor=颜色值 列的背景色 TH bgcolor=颜色值或 TD bgcolor=颜色值 颜色值可以采用 RGB（red/green/blue）红绿蓝十六进制值表示，如红色#FF0000, 或者是一些预定义色彩名称：red ，blue，yellow等。 2）表格的尺寸设置： TABLE width=n1 height=n2 其中，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。 例如： TABLE width=200 height=100表示一个长为200像素，宽为100像素的表格。 TABLE width=20% height=10%表示一个长为屏幕的20%，宽为屏幕的10%的表格。 * 课堂练习HTML代码: 1.抽选1位学员在白板上书写HTML代码,其他学员在练习本上练习. 2.巡视学员完成进度 3.集中评讲,给予学员鼓励 4.注意掌握时间. 参见：TG5-Source文件夹中的“表格课堂练习”用例。 * 提问学员: 买钻石送给女朋友的,到这里来.哈哈.引出框架网页. 演示：框架，参见：TG5-Source文件夹中的“框架” 用例。 讲解要点: 1)上方:顶部框架,一般用于广告 2)左侧框架,一般用于导航链接 3)右侧框架,一般用于显示详细内容 4)点击左侧链接时,一般在右侧框架显示对应的链接内容. 5)每个窗口都对应一张网页. 请问,采用框架结构有什么好处? 引导回答: 1）一个浏览器窗口分为多个独立的区域,内容组织有条理. 2）告诉学员，遗憾的是，不是所有的浏览器都支持框架，并且，如果浏览器窗口被划分为过多的子窗口，会影响网页的整体美观 ，网页设计者常常用表格布局来代替它