站的设计与制作，由小组合作完成。
整个过程需要小组合作――分工――合作的步骤完成整个网站页面的搭建。
情感目标：
锻炼学生的沟通与合作能力，培养学生综合所学知识与技术解决问题的能力。
重点 重点：搭建同一个 XHMTL 页面结构，编写不同的页面效果 CSS 代码。
难点 难点：如何搭建小组三人都能够共同使用的 XHMTL 页面结构。
与 JavaScript 技术的实践课程。
课程
通过本课程的学习，学生将掌握相关 Web 产品的界面设计，制作标准优化的
目标 代码，增加交互动态功能，改善用户体验等 Web 前端综合开发技术，培养学生基
于 Web 工程的程序设计开发思想，使学生初步具备 Web 前端开发一线工程师应
有的知识、能力与基本职业素养。同时为学生进一步学习 Web 数据库应用程序开
网站页面的搭建
课时
32
学习目标：
（1） 观察效果图及切片情况，画出网页结构图，由小组合作完成；
章节
（2） 熟练搭建 XHTML 页面结构，由小组合作完成； （3） 编写不同效果图的符合 web 标准的 CSS 代码，并完成 IE8 及 FireFox
教学 目标
浏览器下的兼容性测试，由小组成员分工单独完成； （4） 熟练应用 JavaScript 进行 CSS 代码的调用，整合三张页面完成整个网
呢？下面以 LOGO 一块内容剖析如何利用同一 XHTML 结构来调用不同 CSS 文件显示不同 的页面效果。 （1）logo 一块内容的 XHTML 结构学生都相当熟悉了，同以前实验的一部分，事先准 备好。
教 学 过 程 安 （2）选择效果图 1 和 3 以下部分效果为例进行两种 CSS 代码的编写，呈现不同的网支架：情境型支架（10 分钟）
(1)总结以前实验中常见页面结构，规范符合 web 标准的代码；（以图像的形式展示）
(2)
#container
教
#banner
学
#content
过
#left
程
#main #logo
#right
img
#box #text
安
#c
排
#footer
p #ver
第三届教学设计大赛教学设计竞赛文档
教师 姓名 出生 年月 主讲 课程
XXX 198105 Web 编程基础综合实践
职称
联系电话 Email
课程性质
讲师 专业基础
《Web 编程基础综合实践》是信息管理与信息系统专业的一门专业必修课程，
32 学时，它是在上一学期《Web 编程基础》课程基础上综合应用 XHTML、CSS
穿插提问：两列标准布局的 web 标准代码是什么?为本次实验的搭建垫定基础。 (2)预览已经事先做好的网站效果，明确本次实验内容；（以交互的方式演示） 先看 XHTML 结构，再看 CSS 效果，最后通过刷新演示三种效果图。如下图所示:
3
第二步：进入支架：问题型支架（15 分钟） 创设以上情境，引出以下问题：如何通过一个 XHTML 结构调用三种不同的 CSS 样式
效果。
排
（3）使用以下 JavaScript 代码，通过 F5 刷新按钮调用以上两种不同的 CSS 代码，页 面就会随着刷新按钮切换样式呈现不同的网页效果。
<script language="javascript"> var number = new Date().getSeconds() % 3 + 1; //随机数，从 1 到 3
学情
学生已经学习了 XHTML、CSS 等技术知识的相关理论学生，并完成了常见简
分析 单页面布局的设计制作和一个较完整的小型企业网站的设计，但是对于知识的综
合应用不是很熟悉，欠灵活。学生对于综合实验有一定的畏难情绪，不愿意投入
时间课前预习实验内容。
2
以“网站页面的搭建”4 节课的章节内容为例详细介绍教学过程安排： 1、课前准备（至少提前一星期准备好）：
发打好基础。
采用支架式教学(Scaffolding Instruction)，它是建构主义的一种教学模式。它
是一种以学生为中心，利用情境、协作、会话等学习环境要素充分发挥学生的主
动性、积极性和首创精神，最终达到使学生有效地实现对当前所学知识的意义建
构目的的教学方法。
要求教师事先要把复杂的学习任务加以分解，以便于把学习者的理解逐步引
(1) 实验的微视频，通过网络课程平台提前上传； (2) 学生分组，学生只有通过提前预习实验内容才能确定自己完成哪一张效
果图，分组完成后提前一星期汇总到课代表处上交； (3) 实验素材及相关 PPT，通过网络课程平台提前上传； (4) 课堂演示的相关内容，如页面结构，DIV 结构及相关演示页面的源码。
作品答辩、论坛上传、投 票、企业认可
课程 教学 内容 设计
社会任务选题 阅读需求分析 前台美工设计 前台页面编码 CSS 页面效果 网站页面测试 撰写设计报告
分组合作 实践任务
效果评价
《WEB 编程基础综合课程 设计》支架式教学内容
实验情景
独立探索 完成任务
网络课程 资源协作
操作视频，文档资源，PPT， 实践项目，使用手册
4
//随机选择 CSS 外部文件 document.write('<link href="0' + number.toString() + '/0' + number.toString() + '.css" rel="stylesheet" type="text/css">'); </script>
向深入。意思就是对较复杂的问题通过建立“支架式”概念框架，使得学习者自
己能沿着“支架”逐步攀升，从而完成对复杂概念意义建构的一种教学策略。
课程 教学 方式 方法
支架式教学模式包括以下五个教学环节的设计，搭建支架，进入情境，独立 探索，协作学习及效果评价。
1
根据教学方式方法的变化，重新组织设计了教学内容，并按支架式教学模式 的五个过程对教学内容进行了调整与规划，整门课程的内容框架如下图所示：
学习支持手册 项目开发团队
Web 项目开发 过程
项目需求分析 项目开发规范
搭建支架 构建内容
CSS 兼容性
项目需求分析 项目开发规范
交互性设计
资讯门户网站 的设计
页面设计 兼容性设计 交互设计
jQuery 技术 Ajax 技术
具体教学设计方案
章节 名称
用一次课（或一个单元）为例，展示课堂具体的教学设计实施方案