2 表格和框架.pptVIP

练习——iframe实现页面复用 需求说明： 根据提供的素材实现 完成时间：10分钟 总结 框架的基本语法？ 如何实现2行2列的典型框架？ 如何实现窗口间管理？ 内嵌框架的语法？ * * * * * * * * * 在确定各单元格的宽高时，由于表格的严格约束特点，需要注意： （1）同列单元格宽度由该列宽度最大的单元格决定。如果没有则默认与该列第一行单元格宽度一致。在布局时必须注意内容过长撑开单元格的情况，合理设置好各列列宽。 （2） 同行单元格的高度类似，但是请注意换行带来的高度变化。 * 使用ol li有序列表，ul li无序列表和dl dt dd定义列表实现简单的商品购买页 * * * * * * * * * * * * 如何实现图文布局2-2 实现步骤 …… table border=1px tr td colspan=2img src=“… alt=公告栏 //td /tr tr td rowspan=4img src=“… alt=公告左侧图 //td td大学要求老师开网店/td /tr tr td安全锤网上大热销/td /tr …… /tr /table …… 整个是5行2列的表格,实际布局时border=“0”隐藏边框 公告栏：跨2列 图片：跨4行 操作演示6：图文布局 练习——贵美商品分类页 需求说明 根据提供的素材实现 完成时间：25分钟 使用表格实现图文布局 如何实现表单布局3-1 如何实现页面中登录表单的布局？ 问题：结构简单，但不美观 如何实现表单布局3-2 实际页面中的登录表单布局 实际应用，需要几行几列的表格布局？ 如何实现表单布局3-3 form method=post action=login_success.htm table tr tdimg src=images/title_login_2.png alt=alt //td td colspan=2nbsp;/td /tr tr td/td td会员名:/td td input name=“sname” …（可包含 … .）/td …代码同“会员名”… td colspan=2 input type=image … src=“… / /td /tr /table /form 整体布局：4行3列的表格 图片后的内容跨2列，内容用“空格”填充 图片按钮跨2列 操作演示7：贵美登录表单 小结2-1 使用表格进行布局对显示数据有什么要求？实现思路是什么？ 使用场合：数据显示要求较为规整，符合表格布局的特点 布局的实现思路： 需要几行几列的表格？ 哪些单元格有跨行或跨列？ 编写表格代码实现 小结2-2 注意： 1、同列单元格宽度由该列宽度最大的单元格决定 2、同行单元格宽度由该行高度最高的单元格决定 同列单元格宽度由该列宽度最大的单元格决定，要防止内容过长撑开单元格 同行单元格同理，注意换行带来的高度影响 如何用表格实现下图布局？ 嵌套布局2-1 对于复杂的页面，如使用表格则必须采用多层嵌套 嵌套布局2-2 嵌套表格布局的缺点： 代码量大 层次结构也相对复杂 不利于Goole等搜索引擎搜索查找数据 表格布局仅适用于： 规则的数据显示 表单页面 表格布局不适合不规则的复杂页面，这种场合需使用DIV+CSS布局（后续学习） 操作演示8：嵌套布局 练习——制作贵美注册页 需求说明 制作贵美注册页面 完成时间：25分钟 1、先考虑使用几行几列的表格 2、单元格的跨行或跨列情况 总结2-1 表格的基本语法是什么？ 表格的跨行、跨列属性分别是什么？ 介绍表格布局的使用场合 简述表格布局的实现思路 总结2-2 前3章知识梳理： HTML的基本结构？ W3C的基本规范？如何创建符合标准的HTML文档？ 常用的HTML块级标签有哪些 ？语法分别是什么？ 常用的HTML行级标签有哪些 ？语法分别是什么？ 表单的语法及执行原理？各类表单元素的语法？ 4种布局常用的块结构是什么？ 回顾与作业点评 表格的基本语法？如何创建跨行、跨列 ？ 表格布局的应用场合？对数据有什么要求？ 用表格布局表单的代码结构是？ 表格的嵌套布局有什么缺点？ 预习检查 什么是框架？框架的用途？ 框架分为哪两种？ 框架网页对应的文件是一个还是多