1.2 设计制作网页（教学课件）-信息科技第二册同步教学（河北大学版2023）

设计制作网页  Life isn't about waiting for the storm to pass. it's about learning to dance 1 2 3 任务驱动 依据规划的页面内容特点，为网站各主要页面进行网页布局设计 要求:在保持网站整体风格一致的基础上，各页面能够依据内容需要进行合理布局，有效提升页面的表达力和感染力。 4 任务分析 与网站主题相协调 体现以用户为中心 站内风格基本一致 便于阅读 页面协调 利用表格 5 学习目标 学会绘制表格 01 通过表格实现页面 布局 02 学会合并单元格 03 6 操作指南 设计页面布局 绘制表格实现 页面布局 保存文件 7 合作探究 请同学们以小组为单位，对比讨论以下两个网页的页面布局，分析有什么区别 8 横幅图片 导航栏 图片展示区 超链接 9 10 横 幅 图 片 超 链 接 导 航 栏 图 片 展 示 区 超 链 接 11 横 幅 图 片 导 航 栏 超 链 接 正 文 内 容 版 权 信 息 12 网页中的基本要素 网页主要信息 的布局方法 网页中包含的 基本信息 规划主要页面 的布局方式  Life isn't about waiting for the storm to pass. it's about learning to dance 13 任务分析 同学们以小组为单位，仿照上面两个布局分析示意图，绘制本组的网页布局示意图，并展示汇报 14 绘制表格实现页面布局 打开网站 通过表格进行页面布局 其他布局方式的页面布局 15 表格—插入—表格 参数设置 16 17 选择要合并的单元格 合并单元格后的效果 18 19 在单元格中插入表格 20 课堂练习 请同学们以小组为单位，通过插入表格的方式，绘制本组的页面布局，并展示汇报 21 课堂小结 学会绘制表格 01 通过表格实现页面 布局 02 学会合并单元格 03 22 课后作业 (1)在FrontPage中利用表格进行页面布局，与在Word中利用表格进行页面布局有什么异同? 23 课后作业 (2)新建一个名为“练习”的网站，如图所示进行页面布局。 标题图片1 标题图片2 图片 标题 导航栏 文字内容 作者信息 24 课后作业 (3)要想在浏览的状态中看不到表格线，该如何处理? (4)从浏览者角度出发，在用表格设计页面布局时要考虑哪些方面?可以尝试下载门户网站首页，用FrontPage打开，查看页面布局形式。 25 下节课见 2024 26 $$