第四章 表格与框架优秀课件.ppt

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