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

第四章 网站的开发 新课引入 1、欣赏2张素材相同布局不同的网页。 网页1：页面工整，文本、图片摆放对称，具有一定的规律； 表格在页面布局中的作用 知识回顾它山之石，可以攻玉。 例子：在frontpage中建立一个如下图所示表格（方法与word相同）： 课堂任务：同步模仿虎门销烟启思录 能完成本节的例题表格的制作。 实例分析 表格布局 充实网页内容： 插入相应的文字、图片和动画。 当插入图片的大小超过单元格大小时，单元格会自动调整以适应插入的图片。 表格布局 单元格之间互相干扰问题 表格属性以及单元格属性的设置 设置表格属性 表格属性说明： [对齐方式]：用于设置表格显示位置 [单元格衬距]:用于设置单元格内容和单元格边界之间的像素数 [单元格间距]：用于设置相邻的表格单元格之间的象素数 [指定宽度]：用于设置表格的宽度 [指定高度]：用于设置表格的高度　　 [边框]：粗细：用于设置表格边框的宽度，单位为像素 颜色：用于设置边框的颜色 [背景]：用于设置表格的背景 单元格设置背景图片 编辑网页图文素材 [任务4：] 利用所学知识，模仿以下主页建立自己的网站主页： 作品展示 课堂总结 课堂的时间是有限的，大家的创意是无限的，希望大家课下继续搜集素材，制作主题网站，为我们小组增光添彩。 问题： 1：这两个网页有什么不同？ 2：你认为哪个更好一些？为什么？ 网页2：页面凌乱，图文混杂，摆放杂乱。 表格是网页排版不可缺少的一部分，它可以对文字和图片进行精确的定位，通过设置表格的宽度、高度等属性，把不同的网页元素分别固定在不同的单元格之中，以达到页面的平衡，几乎所有的网页都应用到表格定位技术。 [任务1]： 拓展： 自行设计表格网页布局。 1、展示“虎门销烟启思录”网站主页，分析表格结构 。 这张网页是用几行几列的表格布局的？ 表格1（1×1） 表格2（1×8） 表格3（3×3） 表格4（1×1） 表格背景图片与对象的区别！ 注意： [任务2]： 在表格中插入图片、输入文字等。 表格1（1×1） 表格2（1×8） 表格3（3×3） 表格4（1×1） 以上实例为什么要使用4个表格来布局呢？ 可不可以只用1个表格来布局？ 表格单元格之间互相干扰会引起表格变形。 解决这个问题的办法： 一、是表格尽量相互独立，可以按照需要依上而下建立多个表格。 二、是如果需要的表格比较复杂，可以采取表格嵌套（表中表）。这样，可以少一些单元格之间相互干扰情况，而使单元格之间相对独立。 调整图片大小、位置，设置单元格与表格属性。?? 　　1、表格属性的调整去除网格线、设置表格背景色等 　　2、使用不同的颜色区分各版块单元格属性的调整 　　 鼠标右键快捷菜单。 图4-36 表格属性 设为“0” 设为“0” 设为“760” 设置背景图片 图4-37 单元格属性 单击 单击 [任务3]： 表格属性以及单元格属性的设置。 各小组根据本组主题网站主题，自主设计制作网站主页，插入表格，并完成主页的布局。 拓展训练： 内容健康、充实且积极向上； 内容具有观赏性、艺术性、可读性。 主题鲜明 页面具有设计创意，整体风格创意， 色彩搭配鲜明，内容布局合理。 创意： 插入表格的一般步骤 修改表格的一般步骤 表格→插入→表格 选中→右键→表格属性 单元格属性 用表格最大的优点就是它可以对文字和图片等元素进行精确的定位，并能在不同分辨率下保持一致的位置不会改变，而且表格可以嵌套表格，可以放置网页上的任何元素，什么功能都能实现。 而它的缺点就是不能自由的移动它的位置。 用表格布局有什么优缺点：