TP02列表、表格、框架

列表、表格与框架第二章2/40回顾与作业点评如果一个网页中的文字出现乱码可能是什么原因造成的？在网页中打开超链接页面在目标窗口中打开的常用两种方式是什么？找出下面代码的错误之处提问<h1>北京是中国的<p>首都<p>香山的<strong>红叶</strong>在秋季非常漂亮</p>

</h1></p>3/40本章任务制作树形菜单制作模拟考试试卷制作易趣商品列表制作淘宝店铺列表页面制作新浪微博页面引用Google主页使用<iframe>实现页面重用4/40本章目标会使用有序列表实现数据展示会使用无序列表实现数据展示会使用定义列表实现数据展示会使用表格实现数据展示会使用<iframe>进行页面设计5/40列表什么是列表列表的分类无序列表有序列表定义列表有序列表无序列表定义列表6/40列表的应用5-1无序列表<ul><li>桔子</li><li>香蕉</li><li>苹果</li></ul>声明无序列表声明列表项演示示例1：无序列表6/407/40列表的应用5-2无序列表的类型type取值演示示例2：无序列表的类型取值说明disc项目符号显示为实体圆心,默认值square项目符号显示为实体方心circle项目符号显示为空心圆8/40列表的应用5-2有序列表演示示例3：有序列表<ol><li>桔子</li><li>香蕉</li><li>苹果</li></ol>声明列表项声明有序列表9/40列表的应用5-4有序列表的类型type取值演示示例4：有序列表的类型取值说明1使用数字作为项目符号A/a使用大写/小写字母作为项目符号I/i使用大写/小写罗马数字作为项目符号10/40列表的应用5-5定义列表演示示例5：定义列表<dl><dt>所属学院</dt><dd>计算机应用</dd><dt>所属专业</dt><dd>计算机软件工程</dd></dl>声明定义列表声明列表项定义列表项内容11/40小结列表对比类型说明项目符号无序列表以<ul>标签来实现以<li>标签表示列表项通过type属性设置项目符号disc（默认）、square和circle有序列表以<ol>标签来实现以<li>标签表示列表项通过type属性设置项目顺序1(数字，默认)、A（大写字母）、a（小写字母）、I（大写罗马数字）和i（小写罗马数字）定义类表以<dl>标签是实现以<dt>标签定义列表项以<dd>标签定义内容无项目符号和显示顺序预格式文本<PRE>标签

如何实现如下图所示的页面中的文字效果？使用<PRE>标签可以实现如何使用预格式文本<PRE>标签<PRE><IMGsrc="images/QQ.JPG"width="159"height="133"align="LEFT">

腾讯-QQ币/QQ幻想-30元卡

一口价：26.45元

运费：卖家承担运费

剩余时间：5天

宝贝类型：全新

卖主声明：货到付款，可试用10天！

</PRE>HTML中代码格式与浏览器中显示效果一样14/40学员操作——制作树形菜单需求说明模拟我的电脑中的磁盘文件管理，显示磁盘与文件夹之间的关系完成时间：10分钟练习15/40学员操作——制作模拟考试试卷需求说明模拟考试试卷的选择题的题型格式，使用有序列表完成模拟试卷完成时间：10分钟练习16/40学员操作——制作易趣商品列表需求说明使用定义列表制作易趣商品列表页面完成时间：10分钟练习17/40共性问题集中讲解常见问题及解决办法代码规范问题共性问题集中讲解为什么使用表格表格应用场合论坛门户网站购物网站论坛中应用表格门户网站应用表格购物网站应用表格表格的基本结构行列单元格在HTML文档中，广泛使用表格来存放网页上的文本和图像表格的基本语法<TABLEborder="1"><TR><TD>

单元格内容

</TD> ……</TR>……</TABLE><TABLE>...</TABLE

>定义表格<TD>…</TD>

定义列

<TR>…</TR>

定义行

border用来设置表格边框尺寸大小如何创建表格<TABLEborder="2"><TR><TD>移动</TD>

<TD>联通</TD>

<TD>铁通</TD>

</TR>

<TR>

<TD>IBM</TD>

<TD>惠普</TD>

<TD>华硕</TD>

</TR></TABLE>查看源代码什么是跨行跨列的表格跨3列跨3行下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列?跨多列的表格<TABLEborder="2"><TR><TDcolspan="3">学生成绩表</TD>

</TR>

<TR>

<TD>英语</TD>

<TD>数学</TD>

<TD>语文</TD>

</TR>

<TR>

<TD>95</TD>

<TD>98</TD>

<TD>89</TD>

</TR></TABLE>COLSPAN=“n”属性表示跨多少列？查看源代码跨多行的表格<TABLEborder="1"><TR><TDrowspan=“3”>早上菜谱</TD>

<TD>食物</TD>

<TD>鸡蛋</TD>

</TR>

<TR>

<TD>饮料</TD>

<TD>牛奶</TD>

</TR>

<TR>

<TD>甜点</TD>

<TD>开心粉</TD>

</TR></TABLE>rowspan=“n”属性表示跨多少行？查看源代码<TABLEborder="1"><TR><TD>手机充值、IP卡</TD>

<TDcolspan="2">办公设备、文具</TD>

</TR>

<TR>

<TDrowspan="2">各种卡的总汇</TD>

<TD>铅笔</TD>

<TD>彩笔</TD>

</TR>

<TR>

<TD>打印</TD>

<TD>刻录</TD>

</TR></TABLE>如何创建跨行跨列的表格查看源代码小结1编写如下图所示效果对应的html代码第一行第一个格子跨了2行此格子跨了3列什么是表格的美化修饰背景图片背景色表格的高度表格的宽度文字对齐方式根据理解,下面表格应该从哪些方面进行美化修饰？如何设置表格的尺寸和边框<TABLEwidth=“400”height=“200”border=“15”bordercolor="red"><TR><TDcolspan="4">品牌商城</TD></TR><TR><TDcolspan="2">笔记本电脑</TD><TDcolspan="2">办公设备、文具、耗材</TD></TR><TR><TD>惠普</TD><TD>华硕</TD><TD>打印机</TD><TD>刻录盘</TD></TR></TABLE>width用来设置表格的宽度height用来设置表格的高度border用来设置表格边框尺寸大小bordercolor用来设置表格边框颜色查看源代码如何设置背景<TABLEbackground=“images/type_back.jpg”width=“360"height="120"border="2"><TR><TDcolspan="6"> </TD></TR><TRbgcolor="#EBEFFF"><TDcolspan="3">笔记本电脑</TD><TDcolspan=“3”bgcolor="yellow">办公设备、文具、耗材</TD></TR>……</TABLE>background属性用来设置表格的背景图片bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝，下图就是RGB颜色对照表。查看源代码如何设置对其方式<TABLEwidth="350"height="100"border="2"background="images/type_back.jpg"><TR><TDcolspan="4"> </TD></TR><TRbgcolor="#EBEFFF"><TDcolspan="2"align="center">笔记本电脑</TD><TDcolspan="2"align="center">办公设备、文具、耗材</TD></TR><TRbgcolor="#EBEFFF"><TD>惠普</TD><TD>华硕</TD><TD>打印机</TD><TD>刻录盘</TD></TR></TABLE>align属性用来设置表格、行、列的对齐方式查看源代码为什么要使用填充属性单元格里的内容太靠近边线，怎么办？未填充的效果，字与单元格边框之间的距离靠得太近什么是填充属性和间距属性border(边框的厚度)内容内容内容内容cellpadding(单元格填充)cellspacing(单元格间距)如何使用填充、间距属性border(边框的厚度)cellpadding(单元格填充)cellspacing(单元格间距)查看源代码<TABLEborder="20"cellpadding="30"cellspacing="40"bordercolor="red">……</TABLE>如何设置表格的填充属性<TABLEcellspacing=“5”cellpadding=“10”border=“1"background="images/type_back.jpg"><TR><TDcolspan="6"> </TD></TR>

<TRbgcolor="#EBEFFF"><TDcolspan="3"align="center">笔记本电脑</TD><TDcolspan="3"align="center">办公设备、文具、耗材</TD></TR>….</TABLE>cellspacing属性用来设置表格内框宽度cellpadding属性用来设置表格内填充距离查看源代码填充之后的效果小结2编写如下图所示效果对应的HTML代码表格的高度、宽度、背景图像、边框和填充属性行的背景色单元格居中对齐练习答案练习代码如何实现图文内容的布局，达到如左图所示页面的效果？分析上图所示页面，应该用什么进行布局？

什么是表格布局使用表格进行布局用表格对网页的内容进行整体控制如何使用表格进行布局使用表格布局下图，需要几行几列？需要7行2列小结1、ul(ol)-li：常用于分类导航或菜单等2、dl-dt-dd：常用于图文混编的场合3、table-tr-td：常用于图文布局或显示数据4、form-table-tr-td：常用于布局表单请说出实际开发常用的4种块状结构是什么？39/40框架为什么使用框架常用框架技术<frameset>框架<iframe>内联框架重用网站顶部重用网站底部左侧导航目录单击左侧导航，改变右侧内容，顶部和底部不需要再次加载40/40<frameset>框架5-1<framesetcols="25%,50%,*"rows="50%,*"border="5"><framesrc="the_first.html"><framesrc="the_second.html">……</frameset>语法表示横向分割表示纵向分割表示引用页面的地址41/40<frameset>框架5-2纵向分割窗口使用

“rows”属性演示示例10：纵向分割41/4042/40<frameset>框架5-3横向分割窗口使用

“cols”属性演示示例11：横向分割42/4043/40<frameset>框架5-4横向和纵向同时分割窗口上下分割左右分割44/40<frameset>框架5-5窗口间的关联<framesrc="subframe/right.html"name="rightframe"/><ahref="right.html"target="rightFrame">……</a>在框架窗口中打开链接框架窗口名称演示示例13：窗口间的连接位置44/4045/40<iframe>内联框架2-1<iframesrc="path"name="mainFrame"frameborder="x"scrolling="yes/no"width="x"height="y"></iframe>语法引用页面地址