TP02 列表、表格、框架

1、列表、表格与框架第二章2/40回顾与作业点评回顾与作业点评如果一个网页中的文字出现乱码可能是什么原因造成的？在网页中打开超链接页面在目标窗口中打开的常用两种方式是什么？找出下面代码的错误之处提问提问北京是中国的北京是中国的首都首都香山的香山的红叶红叶在秋季非常漂亮在秋季非常漂亮 3/40本章任务本章任务制作树形菜单制作模拟考试试卷制作易趣商品列表制作淘宝店铺列表页面制作新浪微博页面引用Google主页使用实现页面重用4/40本章目标本章目标会使用有序列表实现数据展示会使用无序列表实现数据展示会使用定义列表实现数据展示会使用表格实现数据展示会使用进行页面设计5/40列表列表什么是列表列表的分类无

2、序列表有序列表定义列表有序列表有序列表无序列表无序列表定义列表定义列表6/40列表的应用列表的应用5-1无序列表 桔子桔子 香蕉香蕉 苹果苹果声明无序列表声明无序列表声明列表项声明列表项演示示例演示示例1：无序列表：无序列表7/40列表的应用列表的应用5-2无序列表的类型type取值演示示例演示示例2：无序列表的类型：无序列表的类型取值说明disc项目符号显示为实体圆心,默认值square项目符号显示为实体方心circle项目符号显示为空心圆8/40列表的应用列表的应用5-2有序列表演示示例演示示例3：有序列表：有序列表 桔子桔子 香蕉香蕉 苹果苹果声明列表项声明列表项声明有序列表声明有序列表

3、9/40列表的应用列表的应用5-4有序列表的类型type取值演示示例演示示例4：有序列表的类型：有序列表的类型取值说明1使用数字作为项目符号A/a使用大写/小写字母作为项目符号I/i使用大写/小写罗马数字作为项目符号10/40列表的应用列表的应用5-5定义列表演示示例演示示例5：定义列表：定义列表 所属学院所属学院 计算机应用计算机应用 所属专业所属专业 计算机软件工程计算机软件工程声明定义列表声明定义列表声明列表项声明列表项定义列表项内容定义列表项内容11/40小结小结列表对比类型说明项目符号无序列表以标签来实现以标签表示列表项通过type属性设置项目符号disc（默认）、square和ci

4、rcle有序列表以标签来实现以标签表示列表项通过type属性设置项目顺序1(数字，默认)、A（大写字母）、a（小写字母）、I（大写罗马数字）和i（小写罗马数字）定义类表以标签是实现以标签定义列表项以标签定义内容无项目符号和显示顺序预格式文本标签 如何实现如下图所示的页面中的文字效果？使用使用 标签可以实现标签可以实现如何使用预格式文本标签 腾讯腾讯-QQ币币/QQ幻想幻想-30元卡元卡 一一 口口 价：价：26.45元元 运费：卖家承担运费运费：卖家承担运费 剩余时间：剩余时间：5天天 宝贝类型：宝贝类型： 全新全新 卖主声明：货到付款，可试用卖主声明：货到付款，可试用10天！天！HTML中代

5、码格式与浏中代码格式与浏览器中显示效果一样览器中显示效果一样14/40学员操作学员操作制作树形菜单制作树形菜单需求说明模拟我的电脑中的磁盘文件管理，显示磁盘与文件夹之间的关系完成时间：完成时间：10分钟分钟练习练习15/40学员操作学员操作制作模拟考试试卷制作模拟考试试卷需求说明模拟考试试卷的选择题的题型格式，使用有序列表完成模拟试卷完成时间：完成时间：10分钟分钟练习练习16/40学员操作学员操作制作易趣商品列表制作易趣商品列表需求说明使用定义列表制作易趣商品列表页面完成时间：完成时间：10分钟分钟练习练习17/40共性问题集中讲解共性问题集中讲解常见问题及解决办法代码规范问题共性问题集中讲

6、解共性问题集中讲解为什么使用表格为什么使用表格n 表格应用场合 论坛 门户网站 购物网站论坛中应用论坛中应用表格表格门户网站应门户网站应用表格用表格购物网站购物网站应用表格应用表格表格的基本结构表格的基本结构行行列列单元格单元格在在 HTML 文档中，广泛使用文档中，广泛使用表格表格来存放网页上的文本和图像来存放网页上的文本和图像表格的基本语法 单元格内容单元格内容 .定义表格定义表格 定义列定义列 定义行定义行 border用来设置表用来设置表格边框尺寸大小格边框尺寸大小如何创建表格如何创建表格 移动移动 联通联通 铁通铁通 IBM 惠普惠普 华硕华硕 查看源代码查看源代码什么是跨行跨列的表

7、格什么是跨行跨列的表格跨跨3列列跨跨3行行下图中的表格哪里用了跨行？哪里用了跨列？下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列跨了几行几列? ?跨多列的表格 学生成绩表学生成绩表 英语英语 数学数学 语文语文 95 98 89 COLSPAN=“n” 属性表示跨多少列？属性表示跨多少列？查看源代码查看源代码跨多行的表格 早上菜谱早上菜谱 食物食物 鸡蛋鸡蛋 饮料饮料 牛奶牛奶 甜点甜点 开心粉开心粉 rowspan =“n” 属性表示跨多少行？属性表示跨多少行？查看源代码查看源代码 手机充值、手机充值、IP卡卡 办公设备、文具办公设备、文具 各种卡的总汇各种卡的总汇 铅笔铅笔 彩笔彩笔

8、 打印打印 刻录刻录 如何创建跨行跨列的表格查看源代码查看源代码小结小结1 1编写如下图所示效果对应的编写如下图所示效果对应的html代码代码第一行第一个第一行第一个格子跨了格子跨了2行行此格子此格子跨了跨了3列列什么是表格的美化修饰什么是表格的美化修饰背景图片背景图片背景色背景色表格的高度表格的高度表格的宽度表格的宽度文字对文字对齐方式齐方式根据理解根据理解,下面表格应该从哪些方面进行美化修饰？下面表格应该从哪些方面进行美化修饰？如何设置表格的尺寸和边框 品牌商城品牌商城 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 widt

9、h用来设置表格的宽度用来设置表格的宽度height用来设置表格的高度用来设置表格的高度border用来设置表用来设置表格边框尺寸大小格边框尺寸大小bordercolor用来设用来设置表格边框颜色置表格边框颜色查看源代码查看源代码如何设置背景   笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 background属性用来设置表格的背景图片属性用来设置表格的背景图片bgcolor属性用来设置表格、行、列属性用来设置表格、行、列的背景色。的背景色。“#EBEFFF”是用是用RGB表示的一种颜色值，表示的一种颜色值，RGB指的是红指的是红绿蓝绿蓝 ，下图就是，下图就是RGB

10、颜色对照表颜色对照表 。查看源代码查看源代码如何设置对其方式   笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 align属性用来设置表属性用来设置表格、行、列的对齐方式格、行、列的对齐方式查看源代码查看源代码为什么要使用填充属性单元格里的内容太靠近边线，怎么办？单元格里的内容太靠近边线，怎么办？未填充的效果，字与单元格边未填充的效果，字与单元格边框之间的距离靠得太近框之间的距离靠得太近什么是填充属性和间距属性border(边框的厚度边框的厚度) 内容内容内容内容内容内容内容内容cellpadding(单元格填充单元格

11、填充)cellspacing(单元格间距单元格间距)如何使用填充、间距属性border(边框的厚度边框的厚度) cellpadding(单元格填充单元格填充)cellspacing(单元格间距单元格间距)查看源代码查看源代码如何设置表格的填充属性   笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 .cellspacing属性用来设属性用来设置表格内框宽度置表格内框宽度 cellpadding属性用来属性用来设置表格内填充距离设置表格内填充距离查看源代码查看源代码填充之后填充之后的效果的效果小结2编写如下图所示效果对应的编写如下图所示效果对应的HTML代码代码表格的高

12、度、宽表格的高度、宽度、背景图像、度、背景图像、边框和填充属性边框和填充属性行的背景色行的背景色单元格居单元格居中对齐中对齐练习答案练习答案练习代码练习代码如何实现图文内容的布局，达到如左图所示页面的效果？分析上图所示页面，应该用什么进行布局？ 什么是表格布局使用使用表格表格进行布局进行布局用表格对网页的内用表格对网页的内容进行整体控制容进行整体控制如何使用表格进行布局使用表格布局下图，需要几行几列？使用表格布局下图，需要几行几列？需要需要7行行2列列 小结1、ul(ol)-li ：常用于分类导航或菜单等：常用于分类导航或菜单等 2、dl-dt-dd ：常用于图文混编的场合：常用于图文混编的场

13、合 3、table-tr-td ：常用于图文布局或显示数据：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单：常用于布局表单 请说出实际开发常用的请说出实际开发常用的4种块状结构是什么？种块状结构是什么？39/40框架框架为什么使用框架常用框架技术框架内联框架重用网站顶部重用网站顶部重用网站底部重用网站底部左侧导航目录左侧导航目录单击左侧导航，改变右单击左侧导航，改变右侧内容，顶部和底部不侧内容，顶部和底部不需要再次加载需要再次加载40/40框架框架5-1 语法语法表示横向分割表示横向分割表示纵向分割表示纵向分割表示引用页面的地址表示引用页面的地址41/40框架框

14、架5-2纵向分割窗口使用 “rows” 属性演示示例演示示例10：纵向分割：纵向分割42/40框架框架5-3横向分割窗口使用 “cols” 属性演示示例演示示例11：横向分割：横向分割42/4043/40框架框架5-4横向和纵向同时分割窗口上下分割上下分割左右分割左右分割44/40框架框架5-5窗口间的关联在框架窗口中打开链接在框架窗口中打开链接框架窗口名称框架窗口名称演示示例演示示例13：窗口间的连接位置：窗口间的连接位置45/40内联框架内联框架2-1语法语法引用页面地址引用页面地址框架标识名框架标识名边框边框是否出现滚动条是否出现滚动条框架宽度框架宽度框架高度框架高度演示示例演示示例14： iframe框架框架46/40内联框架内联框架2-2在内联框架中打开页面演示示例演示示例15：iframe常用属性常用属性47/40学员操作学员操作引用引用Google主页主页需求说明引用Google主页。单击章节名称在下方显示章节内容完成时间：完成时间：10分钟分钟练习练习48/40学员操作学员操作公共模板复用及链接公共模板复用及链接需求说明在给出的登录和注册页中重用贵美页面顶部和底部。找到login.htm和register.htm页面中的代码行，增加相关属性完成时间：完成时间：5分钟分钟练习练习49/40共性问题集中讲解共性问题集中讲解常见问题及解决办法代