使用表格进行页面布局
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
GUANG HE XIAN SAN JIA JI ZHONG XUE
单元格之间互相干扰问题
以上实例为什么要使用4个表格来布局呢？可不可以只用 1个表格来布局？
表格单元格之间互相干扰会引起表格变形。
解决办法： 1.是表格尽量相互独立，可以按照需要依上而下建立多个表格。 2.是如果需要的表格比较复杂，可以采取表格嵌套（表中表）。这 样，可以少一些单元格之间相互干扰情况，而使单元格之间相对 独立。
课堂总结
插入表格的一般步骤
表格→插入→表格→规格（大小）
排列表格的一般步骤
选中→右键→表格属性 单元格属性
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
拓展训练：
各小组根据本组选择的网站主题，自主设 计制作网站主页，插入表格，并完成主页的布 局。
广河县三甲集中学
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
知识回顾
• 例子：在frontpage中建立一个如下图所示的表格 （方法与word相同）：
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
课堂任务：同步模仿----虎门销烟启思录
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
授课人：妥建国
2019年11月19日
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
学习目标：
1.理解表格在主页排版中的作用。 2.掌握在网页中用表格进行排版的方法。 3.学会设置表格的属性。
用表格布局有什么优缺点：
优点：可以对文字和图片等元素进行精确的定位，并能在 不同分辨率下保持一致的位置不会改变，而且表格可以嵌套表 格，可以放置网页上的任何元素，什么功能都能实现。
缺点：就是不能自由的移动它的位置。
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
页面工整，文本、图片摆放 对称，具有一定的规律。
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
表格在页面布局中的作用
表格是网页排版不可缺少的一部分，它可以 对文字和图片进行精确的定位，通过设置 表格的宽度、高度等属性，把不同的网页 元素分别固定在不同的单元格之中，以达 到页面的平衡，几乎所有的网页都应用到 表格定位技术。
插入的图片。
注意：表格背景图片与对象的区别！
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
表格布局
表格1（1×1）
表格3（3×3）
表格2（1×8） 表格4（1×1）
广河县三甲集中学
单元格设置背景图片
单击
图4-37 单元格属性
单击
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
任务2：
在表格中插入图片、输入文字等。
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
充实网页内容：
• 插入相应的文字、图片和动画。 • 当插入图片的大小超过单元格大小时，单元格会自动调整以适应
表格布局
表格1（1×1）
表格3（3×3）
图4-13
表格2（1×8） 表格4（1×1）
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
设置表格属性
设为“居中” 设为“0”
设置背景颜色
设为“760”
图 414 表 格 属 性
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
课堂的时间是有限的，大家的创意是无限的， 希望大家课下继续搜集素材，制作主题网站，为我 们小组增光添彩。
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
任务一：
能完成本节的例题表格的制作。
拓展任务：
自行设计表格网页布局。
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
实例分析
浏览P108页图4-12“虎门销烟启思录”网页版面表格 布局，分析表格结构 。
这张网页是用几行几列的表格布局的？
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
2
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
引入新课
同学们欣赏2张素材相同布局不同的网页。
问题： 1：这两个网页有什么不同？
2：你认为哪个更好一些？为什么？
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
页面凌乱，图文混杂，摆放杂 乱。
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
表格属性以及单元格属性的设置
调整图片大小、位置，设置单元格与表格属性： 1、表格属性的调整去除网格线、设置表格背景色等 2、使用不同的颜色区分各版块单元格属性的调整
鼠标右键快捷菜单。
广河县三甲源自文库中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
GUANG HE XIAN SAN JIA JI ZHONG XUE
作品展示
创意： 页面具有设计创意，整体风格创意， 色彩搭配鲜明，内容布局合理。
主题鲜明： 内容健康、充实且积极向上； 内容具有观赏性、艺术性、可读性。
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
单元格之间互相干扰问题
以上实例为什么要使用4个表格来布局呢？可不可以只用 1个表格来布局？
表格单元格之间互相干扰会引起表格变形。
解决办法： 1.是表格尽量相互独立，可以按照需要依上而下建立多个表格。 2.是如果需要的表格比较复杂，可以采取表格嵌套（表中表）。这 样，可以少一些单元格之间相互干扰情况，而使单元格之间相对 独立。
课堂总结
插入表格的一般步骤
表格→插入→表格→规格（大小）
排列表格的一般步骤
选中→右键→表格属性 单元格属性
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
拓展训练：
各小组根据本组选择的网站主题，自主设 计制作网站主页，插入表格，并完成主页的布 局。
广河县三甲集中学
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
知识回顾
• 例子：在frontpage中建立一个如下图所示的表格 （方法与word相同）：
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
课堂任务：同步模仿----虎门销烟启思录
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
授课人：妥建国
2019年11月19日
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
学习目标：
1.理解表格在主页排版中的作用。 2.掌握在网页中用表格进行排版的方法。 3.学会设置表格的属性。
用表格布局有什么优缺点：
优点：可以对文字和图片等元素进行精确的定位，并能在 不同分辨率下保持一致的位置不会改变，而且表格可以嵌套表 格，可以放置网页上的任何元素，什么功能都能实现。
缺点：就是不能自由的移动它的位置。
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
页面工整，文本、图片摆放 对称，具有一定的规律。
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
表格在页面布局中的作用
表格是网页排版不可缺少的一部分，它可以 对文字和图片进行精确的定位，通过设置 表格的宽度、高度等属性，把不同的网页 元素分别固定在不同的单元格之中，以达 到页面的平衡，几乎所有的网页都应用到 表格定位技术。
插入的图片。
注意：表格背景图片与对象的区别！
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
表格布局
表格1（1×1）
表格3（3×3）
表格2（1×8） 表格4（1×1）
广河县三甲集中学
单元格设置背景图片
单击
图4-37 单元格属性
单击
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
任务2：
在表格中插入图片、输入文字等。
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
充实网页内容：
• 插入相应的文字、图片和动画。 • 当插入图片的大小超过单元格大小时，单元格会自动调整以适应
表格布局
表格1（1×1）
表格3（3×3）
图4-13
表格2（1×8） 表格4（1×1）
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
设置表格属性
设为“居中” 设为“0”
设置背景颜色
设为“760”
图 414 表 格 属 性
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
课堂的时间是有限的，大家的创意是无限的， 希望大家课下继续搜集素材，制作主题网站，为我 们小组增光添彩。
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
任务一：
能完成本节的例题表格的制作。
拓展任务：
自行设计表格网页布局。
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
实例分析
浏览P108页图4-12“虎门销烟启思录”网页版面表格 布局，分析表格结构 。
这张网页是用几行几列的表格布局的？
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
2
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
引入新课
同学们欣赏2张素材相同布局不同的网页。
问题： 1：这两个网页有什么不同？
2：你认为哪个更好一些？为什么？
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
页面凌乱，图文混杂，摆放杂 乱。
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
表格属性以及单元格属性的设置
调整图片大小、位置，设置单元格与表格属性： 1、表格属性的调整去除网格线、设置表格背景色等 2、使用不同的颜色区分各版块单元格属性的调整
鼠标右键快捷菜单。
广河县三甲源自文库中学
GUANG HE XIAN SAN JIA JI ZHONG XUE
GUANG HE XIAN SAN JIA JI ZHONG XUE
作品展示
创意： 页面具有设计创意，整体风格创意， 色彩搭配鲜明，内容布局合理。
主题鲜明： 内容健康、充实且积极向上； 内容具有观赏性、艺术性、可读性。
广河县三甲集中学
GUANG HE XIAN SAN JIA JI ZHONG XUE