第10课 绘制页面布局课件

第二单元
网站设计与制作初步
第10课 绘制网页布局
班级：八年级 138班 授课教师：段老师
一、课堂内容分析
1.网页大小
新建一个网页后，要先设置页面大小。 新建一个网页后，要先设置页面大小。页面大小的设定 要依据大众流行使用的显示分辨率。 要依据大众流行使用的显示分辨率。
2.布局工具
通常选择使用表格来定位文字或图片，从而实现页面的 通常选择使用表格来定位文字或图片， 布局设计。 布局设计。 在Frontpage 2003中，提供了表格、布局表格和单元 中 提供了表格、 格工具，这两种种工具既有相似，也有不同， 格工具，这两种种工具既有相似，也有不同，我们可以在 实际的使用中体会。 实际的使用中体会。 建议先选择使用布局表格和单元格，绘制出页面布局。 建议先选择使用布局表格和单元格，绘制出页面布局。 在绘制的过程中，可以放心大胆的操作， 在绘制的过程中，可以放心大胆的操作，因为表格和单元 格可以根据需要随时调整。 格可以根据需要随时调整。
二、具体操作方法
• 1、打开站点 、 • ⑴执行“文件”→“打开站点”命令，打 执行“文件” “打开站点”命令， 开已建立好的网站。 开已建立好的网站。 • 注意：因为我们上节课建立的以“端午节” 注意：因为我们上节课建立的以“端午节” 命名的空白网页已经不在了， 命名的空白网页已经不在了，所以我们需 要再次新建一个站点。 要再次新建一个站点。 • ⑵双击文件列表中的主页文件名 打开主页。 “index.htm”,打开主页。 打开主页 • 2、设置网页大小 、 • 建议使用分辩率 建议使用分辩率800×600。 × 。
布局表格的 长、宽 值，以像素为单位。
可以通过控制点 调整单元格大小
可以通过控修改 具体的数据来设 置单元格的大小
⑷保存文件 执行“文件” “保存”命令， 执行“文件”→“保存”命令，保存网页文件ຫໍສະໝຸດ 三、跟据布局结构图完成页面布局
导 航 栏 标题栏 导航栏 文字内容 作者信息
四、技能练习
新建一个名“端午”的站点
设置网页大小 图例
单机此处
3、绘制页页面布局 ⑴执行“视图”→“标尺和网格命 令”，显示标尺和网格。 ⑵打开“布局表格和单元格”任务窗 格。
标尺和网格 插入表格和 单元格工具
⑶绘制布局表格和单元格 选择“绘制布局表格”工具，在页面上托运拖动出合适大小的表格。 ①选择“绘制布局表格”工具，在页面上托运拖动出合适大小的表格。 选择“绘制单元格”工具，在表格内按照设计的布局结构， ②选择“绘制单元格”工具，在表格内按照设计的布局结构，绘制出相应的 单元格。 单元格。 的方法完成页面布局的绘制。 ③同②的方法完成页面布局的绘制。