第四章 表格与框架.ppt

第四章表格与框架 授课老师 苏博 教学目标 能阐述表格的作用能对表格进行操作能区分表格和div的功能及选择合适的对象操作能制作常用的框架页面 教学重难点分析 重点对表格的操作对框架的应用难点表格的应用与div的区别 一 表格 表格的功能存放数据 就相当于一个二维表 与div的区别 Div用来进行大面积的网页布局 而表格用来存放数据 通常建立好表格后 就不能轻易地改动结构 也不灵活 表格的语法结构 table是表格的标记 表格是由行和列组成 tr代表行 td代表列 th代表标题 表格的常用属性区别border cellpadding cellspacing分别表示的含义 border 表格边框的粗细 具有一定的立体感cellspacing 划表格的线的粗细 cellpadding 单元格中的字与单元格边框的距离 HTML border cellspacing cellpadding 表格的拆分rowspan 数值 表示合并了多少行 比如数值为3 代表合并了3行 colspan 数值 表示合并了多少列 比如数值为3 代表合并了3列 背景颜色使用bgcolor属性设置单元格的背景颜色 bgcolor 是16进制的6位数 格式为rrggbb 分别表示红 绿 蓝三色的分量 或者是16种已经定义好的颜色名称 什么是16进制 二进制 0和1组成十进制 由0到9共10位数组成 十六进制 由0到9再加上A到F组成在颜色中 000000表示黑色 FFFFFF表示白色 什么是RGB 白光可以解析为红 橙 黄 绿 蓝 靛 紫 我们把其中的红 绿 蓝当作三基色 因为他们的混合可以产生其他的颜色 红色用red表示 绿用green表示 蓝用blue表示 所以就有RGB表示三基色 表格可以设置背景颜色和背景图片利用background color和background属性 表格文本的对齐 在水平方向上 文本的对齐用align 表示 可以为left 左对齐 right 右对齐 center 居中对齐 三者之一 在垂直方向上 文本的对齐用valign 表示 是top 顶端对齐 middle 文本中线与表格中线对齐 bottom 底端对齐 baseline 文本基线与表格中线对齐 四者之一 利用表格的拆分 背景 对齐 边框等属性制作课程表 表格与div布局的对比案例相册 html 表格的缺点 死板 不灵活 不易改动布局 样式设置单一 代码复杂 不够简洁 所以 表格一般不用来网页布局 而是在网页内部作为数据展示的工具 一旦做好后 不易修改 7 使用框架 基本结构 浏览器不支持框架 Frame 框架 可以将浏览器窗口分为多个区域 每个区域可以单独显示一个HTML文件 各个区域可以相关联地显示某一个内容 常用的方法是在一个框架中放置可供选择的链接目录 而将HTML文件显示在另一个框架中 在聊天室里也常采用这种方法 1 元素元素中包含了框架不能被显示时的替换内容 它在浏览器不支持框架或者框架被禁止时 提供替换内容 2 元素是一个框架容器 它将窗口分成长方形的子区域 即框架 在框架设置文档中 取代了的位置 紧接在之后 基本属性 rows 从上到下给出每行的高 3 元素元素定义了一个框架 每一个元素都必须包含在一个定义了该框架尺寸的元素中 主要属性 1 name框架名称2 src框架内容URL3 scrolling规定了行内框架是否需要滚动条参考 框架 index h