应用表格布局网页

应用表格布局网页 教材分析 应 用表格布局网页 是苏科版初中信息技术第 10 章 主题网站设计 第二 节 制作网站 的内容 是在学生学习了创建站点和网页的基础上安排的新授 课 文字 图 片等对象的定位是网页设计中的难点 仅用 图片 工具中的 绝对定位 无法排列好网页的结构 所以运用表格布局网页的结构是一种非 常重要的方法 也是网页 设计中最主要的内容之一 是网页设计的重点 学情分析 本 节课的学习对象是初二年级的学生 该年龄段的学生已具备了一定的信息素 养 掌握了一些基本的信息技术知识和技能 Frontpage 中表格的制作方法与 Word 有很多相似之处 所以学生应该都是有表格制作基础的 但考虑时间间隔 比较长 知识的遗忘率比较高 需要教师能够帮助他们一起回顾 从而对比学 习 进行知识的迁移 教学目标 知识与技能 1 了解表格在网页布局中的作用 2 掌握网页中表格的插入方法 表格属性的设置方法以及单元格的修饰与编辑 方法 能够在单元格中正确插入文字和图片 3 能够根据网页设计内容 正确布局表格的结构 掌握表格嵌套的设计方法 过程与方法 1 通过分析优秀网站布局 帮助学生进一步了解布局的作用 2 利用对比学习 培养学生知识迁移的能力 3 通过自主探究 使学生掌握软件的使用规则 培养学生自主学习的能力 情感态度与价值观 通过运用对比学习使学生体验软件学习的一般方法及规律 提高学生自主学习的能力 通过运用表格布局网页对象活动 进一步掌握各种 不同对象属性的设置方法和规律 体验创造的快乐 教学重点与难点 教学重点 网页的布局类型分析 表格的制作方法及表格 单元格属性的设置 方法 教学难点 表格的嵌套在网页设计中的应用 教学方法与手段 对比学习 知识迁移 自主探究 课前准备 四种不同布局风格的网站链接 教师课件 学生学案 素材 教学过程 一 创设情况 引入新课 教师播放一段南京春天的园林美景的短片 师 现在正值阳春三月 看了这段南京比较有名的园林景点 玄武湖 莫愁湖 梅花山 的春天美景 你们有何想法 是不是也有一种想外出踏青的冲动 生 景色太美了 真想出去游玩放松一下 师 老师的愿望是和你们一样的 因为这些景点里不仅有美丽的花 草 树木 还有亭 台 楼 榭以及小桥流水等景物 展现出一种自然和人工共同创造的 生机盎然 和谐之美 它们不仅是大自然的杰作 更是我们中国人辛勤 汗水 与智慧的结晶 如果你是一位园林设计师 为了让这些花 草 树木以及亭 台 楼 榭等景点合 理搭配 你会事先做一个什么 工作呢 生 布局 师 对 布局是设计里非常重要的一步 它的好坏可以直接影响到这个园林的 风格 思想 文化 艺术性及各景点搭配的合理性 在我们生活中许多事情 小到制作网页 家庭装潢 大到城市规划 都要进行有形或无形地布局 在充 分考虑布局的合理性和情况下尽量兼顾文化性 艺术性 网页制作也是一样的 除了网页内容外 网页布局也能够传递网页的风格 思 想 文化 今天我们的任务首先是给网页布局 设计意图 从视频短片和园林布局的地位和重要性的分析入手 引出课题 通 过将园林布局与网页布局进行类比 引起学生对网页布局的重视 进而激发他 们的学习兴趣 同时 也引发学生对春天大自然的热爱及对园林设计者 劳动 者的尊敬之情 二 网页布局类型分析 师 讲到了网页布局 我们首先要了解一下网页都有哪些要素呢 我们就以我 校 新城中学 网站为例 教师打开新城中学网站 带领学生浏览网站首页并进行分析 师 有标题栏 导航栏 网页正文 有侧边栏以及版权信息栏 这些要素的不 同排列就形成了不同网页的布局结构 下面我们就来看几个网站的首页 看看 它们的布局属于什么类型 体现了什么样的思想或风格 教师依次打开 中央人民政府 中关村在线 戴尔 中 国 以及一个艺术网站 引导学生分析这四个网站的布局风 格 体现的设计思想 学生分组讨论后 举手回答 教师补充总结 师 在 中央人民政府 首页中 正文在网页的正中间 左右两侧各有一个侧边栏整齐地对称排列 显得很方正 给 艺术网站 人以严肃的感觉 同时主色调为 中国红 体现了中国特色 这种类型我们把它叫做 全包围型 特别适合做政府机构的网站 也可以为 一些门户网站的首页 中关村在线 首页只有左侧一个侧边样 布局没那么没那么严肃 却增添了 一些严谨的感觉 这种类型叫做 半包围型 一般比较适合做大型的门户网 站或个人网站 戴尔 中国 首页没有侧边样 网页正中间的大部分地方留给了戴尔做产品 展示 视觉冲击力特别强 主题鲜明 便于企业进行产品宣传 因而适合做企 业网站 这种类型我们把它叫做 上 中 下型 最后一个网站 它的主题图占了整个网页的大部分片幅 因而叫做 主题突出 型 由于它个性鲜明 且画面比较抽象 维美 显得个性比较张扬 适合做 艺术类型的网站 上中下型 全包围型 半包围型 主题突出型 师 我们在布局网页时是不是一定要按照这四种类型来布局呢 当然不是 我 们可以利 用我们自己的创意 把我们的网页布局设置得更加灵动 富有个性 因此 网 页的布局没有统一的规则 只要能让访问者感到 烘托主题 操作方便 美观 大方 就可以了 设计意图 通过实例分析 帮助学生了解网页布局的基本要素 知道四种常见 的布局类型 理解布局类型与网页风格 思想 文化之间的关系 同时使他们 懂得在进行网页布局设计时 还可以大胆创意 灵动设计 而不必拘泥于传统 的布局类型 为后面学生大胆布局自己的网页打下基础 三 制作表格 布局网页 师 网页布局方法很多 根据各人不同的喜好 布局也不同 通常的布局方法 有以下几种 表格布局 层叠样式表布局 框架布局 表格布局的优势在于它 能对不同对象 加以处理 而又不用担心不同对象之间的影响 缺点是 当你用 了过多表格时 页面下载速度受到影响 CSS 层叠样式表 能完全精确的定位文 本和图片 但对 于初学者来说显得有点复杂 框架结构的页面从布局上如同表 格布局一样 可以把不同对象放置到不同页面加以处理 但兼容性较差 今天 我们就来学习用表格来进 行布局 其余二种有兴趣的同学可以课后找资料自学 布置任务一 师 我们在学习 Word 时中曾经学过表格的制作 表格的制作包括 创建表格 表格的行 列的增加与删除 单元格的拆分与合并 Frontpage 中表格的制 作方法与 Word 中表格的制作方法类似 请你们根据学件 任务一 给出的旅游 网页效果图和任务提示 用表格来为我们的旅游网页进行布局 布局的类型可 以模 仿老师给出的布局图 也可以运用自己的智慧进行大胆创意 学生根据 任务一 的要求 在学件 图文讲解和屏幕录像 的帮助下进行自 主学习 模仿教师给出的布局图或是当堂进行创意设计 制作表格 教师在学生制作表格遇到困难时 请表格制作较顺利的学生上教师机 为大家 边示范边讲解他的表格制过过程与方法 教师继续对学生在制作表格时容易犯 错的问题进行当众讲解 并对学生创意布局进行讲评 设 计意图 通过教师对三种布局方法的介绍 让学生了解这三种布局方法的优 缺点 扩充他们的知识面 进而激发他们课后继续探索新知的求知欲 创建表 格是本节的 重点之一 但由于 Word 和 Frontpage 中表格的制作方法类似 学 生有一定的制作表格了 因而让学生参照学件 运用知识迁移的方法 进行自 主学习 可以提升他们的自主学习能力 对于基础较差或是对表格的制作已经 有些遗忘的学生 利用学生代表的讲解 可以帮助他们回顾旧知 增强自信 在教师当众的讲解 下 可以帮助他们顺利解决问题 为后面的学习扫清道路 对于学生创意表格的讲解 则可以使这些学生了解自己设计的表格运用到表格 布局上的优缺点 也可以给 其他同学以借鉴 四 创建嵌套表格 规范表格布局 师 下面我们是不是可以在表格中放入图片和文 字等内容了呢 对于简单且功能单一的网页是可以 的 但对于一个略微大型且具有一定功能的网站 就 不可以了 虽然我们提倡在页面中尽量减少表格数 量 但这并不意味着将一个表格分为若干个单元格就 能解决问题 例如右侧中的图片 用一个表格就很难解决布局问题 这时我们 就要用到表格的嵌套 表格的嵌套作用主要有 让内容的布局更加合理 方便 程序套用 布置任务二 学生根据学件 任务二 的提示 在学件 图文讲解和屏幕录像 的帮助下 对自己制作的表格进行修改 在单无格中增加嵌套表格 教师根据课堂实际情况进行辅导和集中讲解 设计意图 表格的嵌套是本节的难点 通过教师的实例分析及讲解 使学生理 解表格嵌套作用 从而能够更加规划地用表格进行网页的布局 五 添加网页元素 设置表格及单元格的属性 布置任务三 学生自主探究 将老师事先准备好的各种网页素材元素 图片 文字 添加 到表格中 保存后在 IE 中进行预览 生 老师 通过预览 我们发现制作的网页的表格边框线都裸露在外面 有什 么办法解决呢 师 办法当然有 我们可以通过设置表格及单元格的属性 对表格进行优化 学生继续在学件 图文讲解和屏幕录像 的帮助下 通过自主探究 小组合作 的形式 对表格及单元格的属性进行设置 优化表格 教师再次进行辅导 对学生在完成任务中出现的问题进行集体答疑 设 计意图 将网页中的素材元素 图片 文字 插入进表格对于学生并不难 因此采用让学生自学学习的方式独立完成 设置表格及单元格的属性是本节的 另一教 学重点 通过学生自己发现网页制作中的问题 框线裸露 不仅可以提 高他们发现问题的能力 而且可以进一步激发他们解决问题的兴趣 学生在学 件的帮助下进行 探究和合作学习 可以进一步培养他们的学习能力和合作学习 意识 六 课堂评价 共同提高 学生上传自己的作品 根据老师下发的课堂评价表 从 布局的完整性 布局 的合理性 布局的美观性 布局的创新性 素材的利用率 这几个方面进行自 评 每小组推选一个作品 大家一起进行共同评价 设计意图 通过评价 学生能够重新审视自己的网页 提高学生的鉴赏审美能 力 在与同伴作品对比互评中 可以对比查找不足 取长补短 找出自己网页 需要改进的地方 七 梳理知识 提升素养 教 师对本节课的知识重点和难点进行梳理 对教学过程中发现的问题再次进行 讲解 师 同学们 今天我们用所学的知识完成了一个介绍南京春天美景的网 页 为宣传和介绍我们南京做出了我们的贡献 但是 有时可能由于我们的一 些疏忽 我们的 创作却可能会受到别人的指责甚至是法律的制裁 例如我们引 用在网页中的图片 文字 音乐等资源 一定要注意版权问题 或是取得著作 权持有人的允许 或是在 引用是注明出处 来源 设计意图 教师帮助学生查漏补缺 总结本节课的知识点 同时 渗透对学生 信息素养和价值观的培养 引导学生自觉遵守信息社会中公认的行为规范和道 德准则 在信息活动中能够合理地引用他人观点或使用他人成果 教学反思 本 节课是网站制作的第三课时 知识点多且分散 本课能突破以往的满堂灌的 形式 在整个教学过程不仅对学生开展类比学习 帮助他们进行知识迁移 还 注重学生的 自主学习和探究学习 能时时引导学生去探索问题 解决问题 并 给能力强的学生以拓展的空间 从而能引发和维持学生学习的兴趣和动机 教 学过程看起来比较 多 但环环相扣 层层递进 教学