中国自考教育网.PPT

复习提问 1、如何创建一个留言板的表单页面？ 1)确定网页布局：插入表格；输入文档。 2）插入表单元素。 课程引导 前几节课我们学习了如何制作简单网页，其实在网页制作中经常要使用表格、层等来给网页中的有关文字或图形定位，以增加网页的视觉效果，本节课就利用层、表格等对网页进行排版，来美化界面。 知识目标 1.能够掌握表格、层以及属性设置； 2.能够利用表格、层来安排网页元素，灵活利用它们进行排版。 案例展示 任务分析 如何利用表格、层来美化网页？ 任务完成： 1）中国自考教育网——“自考课程”页面中表格的使用 2）中国自考教育网——“自考介绍”页面中层的使用 知识讲解（一） 一、网页版面布局概述 网页版面布局是指定网页内容在浏览器中的显示方式，例如徽标的位置、导航栏的显示、主要内容的排版等。经常用到的版面布局结构主要有以下几种： “T”结构布局；“口”型布局；“三”型布局；POP布局。 二、表格 表格是除文字、图片外重要的网页元素，例如课程表、进度表、企业名录等，作为网页元素，表格言简意赅，一目了然。它由一行或多行组成；每行又由一个或多个单元格组成。 表格由三个基本部件组成：行、列、单元格。具有宽度、高度、间距、边框等属性。 知识讲解（一） 三、在网页中插入表格和表格的属性设置 （1）插入表格： 方法一：单击插入栏常用类别中的“插入表格”按钮； 知识讲解（一） ； 知识讲解（一） ； 知识讲解（一） （3）编辑表格 1）增加行与列　 2）删除行或列　 3）格式化表格 选择“命令”｜“格式化表格” ,在预置格式下拉表中，选择所需的格式 . 4）排序表格 选择“命令”｜“排序表格 5）导入与导出表格数据 导入Excel文件 , “文件”｜“导入”｜“Excel文档” . 导入表格数据文件 , “文件”｜“导入”｜“导入表格数据”菜单 . （4）布局模式 1）、使用布局视图；2）、创建布局表格和布局单元格；3）添加内容。 操作示范（一） 4、使用表格——中国自考教育网 （1）打开course.htm，插入表格，制作自考课程安排表 （2）往表格里添加文字。 知识讲解与操作示范（二） 四、使用层排版 知识讲解与操作示范（二） 课堂模仿 按演示案例完成“中国自学教育网”网站中“自考课程”、“自考介绍”等网页的制作。 练习表格、层布局网页 疑难解析 为什么改变不了表格高度？ 归纳总结 如何利用表格、层进行网页排版？ 重点：1、 用表格布局网页 　　2.、用布局模式布局网页 3、用层布局网页 扩展性任务 * 复习提问 课程引导 案例展示 任务分析 知识目标 知识讲解与操作示范 课堂模仿 归纳总结 扩展性任务 疑难解析 * 表格与层 “ 中国自考教育网”网站 方法二：单击“插入”｜“表格”菜单； （2）表格与单元格属性设置  ⑴　表格名称：为表格取一个名称，便于脚本语言调用。 　　 ⑵　行、列：修改行与列数。 　　 ⑶　宽与高度：修改宽度，可设百分比或固定值。高度一般让其自动调节，当然编辑完毕也可固定。 　　 ⑷　边距、间距：内容与边线的间隔，单元格间的间距。 　　 ⑸　对齐：有四种对齐方式，默认、左对齐、居中对齐、右对齐。 　　 ⑹　边框：设置边框线的厚度，当值为0，无边框。 　　 ⑺　背景颜色、边框颜色：设置其颜色，可单击颜料盒选择。 　　 ⑻　背景图像：可选择一幅图像作为背景。 　　 ⑼　清除行高按钮：将自动清除行中多余的高度。 　　 ⑽　清除列宽按钮：将自动清除列中多余的宽度。 　　 ⑾　像素转百分比按钮与百分比转像素按钮：使表格的度量单位相互转换。  ⑴　水平对齐：有四个值　默认、左对齐、居中对齐、右对齐。 ⑵　垂直对齐：有五个值　默认、顶端、中间、底端、基线。 ⑶　宽度与高度：修改宽度与高度的值。若表格宽度单位为百分比，则宽度可随整个表格自动调节。 ⑷　不换行：当内容超过单元格宽度时，不会自动转到下一行，一直向右扩展，出现水平滚动条。 ⑸　标题：设为标题，该行文本自动变为粗体，一般只设表头一行。 ⑹　边框：设置边框的颜色，默认为无色，可单击颜料盒选择。 ⑺　背景颜色：设置其颜色，可单击颜料盒选择。 ⑻　背景：可选择一幅图像作为背景。  在网页中添加层 2）层的基本操作：调整层大小；移动层；对齐层；防止层重叠等。 3）创建嵌套层 4）层与表格的转换（表格转换为图层 ） 在转换为表格之前，确保层没有重叠。执行以下操作：选择“修改”＞“转换”＞“层到表格（表格到层）”。 示范二： 使用层布局——中国自考教育网（自学介绍页面制作） 1、打开introduction.htm,使用层布局； 2、输入文字。 “