利用表格进行页面布局.ppt

利用表格进行页面布局.ppt

《利用表格进行页面布局.ppt》由会员分享，可在线阅读，更多相关《利用表格进行页面布局.ppt（25页珍藏版）》请在冰豆网上搜索。

第四章网站的开发,使用表格进行页面布局,2011年2月,新课引入,1、欣赏2张素材相同布局不同的网页。

问题：

1：

这两个网页有什么不同？

2：

你认为哪个更好一些？

为什么？

网页1：

页面工整，文本、图片摆放对称，具有一定的规律；,网页2：

页面凌乱，图文混杂，摆放杂乱。

表格在页面布局中的作用,表格是网页排版不可缺少的一部分，它可以对文字和图片进行精确的定位，通过设置表格的宽度、高度等属性，把不同的网页元素分别固定在不同的单元格之中，以达到页面的平衡，几乎所有的网页都应用到表格定位技术。

知识回顾-它山之石，可以攻玉。

例子：

在frontpage中建立一个如下图所示表格（方法与word相同）：

课堂任务：

同步模仿-虎门销烟启思录,能完成本节的例题表格的制作。

任务1：

拓展：

自行设计表格网页布局。

实例分析,1、展示“虎门销烟启思录”网站主页，分析表格结构。

这张网页是用几行几列的表格布局的？

表格布局,充实网页内容：

插入相应的文字、图片和动画。

当插入图片的大小超过单元格大小时，单元格会自动调整以适应插入的图片。

表格背景图片与对象的区别！

注意：

任务2：

在表格中插入图片、输入文字等。

表格布局,为什么要用四个表格呢？

单元格之间互相干扰问题,以上实例为什么要使用4个表格来布局呢？

可不可以只用1个表格来布局？

表格单元格之间互相干扰会引起表格变形。

解决这个问题的办法：

一、是表格尽量相互独立，可以按照需要依上而下建立多个表格。

二、是如果需要的表格比较复杂，可以采取表格嵌套（表中表）。

这样，可以少一些单元格之间相互干扰情况，而使单元格之间相对独立。

表格属性以及单元格属性的设置,调整图片大小、位置，设置单元格与表格属性。

1、表格属性的调整去除网格线、设置表格背景色等2、使用不同的颜色区分各版块单元格属性的调整鼠标右键快捷菜单。

设置表格属性,图4-36表格属性,表格属性说明：

对齐方式：

用于设置表格显示位置单元格衬距:

用于设置单元格内容和单元格边界之间的像素数单元格间距：

用于设置相邻的表格单元格之间的象素数指定宽度：

用于设置表格的宽度指定高度：

用于设置表格的高度边框：

粗细：

用于设置表格边框的宽度，单位为像素颜色：

用于设置边框的颜色背景：

用于设置表格的背景,单元格设置背景图片,图4-37单元格属性,单击,单击,任务3：

表格属性以及单元格属性的设置。

编辑网页图文素材,任务4：

利用所学知识，模仿以下主页建立自己的网站主页：

各小组根据本组主题网站主题，自主设计制作网站主页，插入表格，并完成主页的布局。

拓展训练：

作品展示,评一评！

课堂总结,表格插入表格,选中右键表格属性单元格属性,用表格最大的优点就是它可以对文字和图片等元素进行精确的定位，并能在不同分辨率下保持一致的位置不会改变，而且表格可以嵌套表格，可以放置网页上的任何元素，什么功能都能实现。

而它的缺点就是不能自由的移动它的位置。

用表格布局有什么优缺点：

课堂的时间是有限的，大家的创意是无限的，希望大家课下继续搜集素材，制作主题网站，为我们小组增光添彩。

Thankyou!

2011年2月,