《网页设计与制作课程教学整体设计》

1、网页设计与制作网页设计与制作 课程整体教学设计课程整体教学设计 设计教师： 设计单位：计算机系 设计时间：2014 年 8 月 25 日 目录目录 一、管理信息一、管理信息.1 二、基本信息二、基本信息.1 三、教学对象分析三、教学对象分析.1 四、课程设计指导思想四、课程设计指导思想.2 五、课程设计五、课程设计.2 1课程目标设计.2 1.1能力目标.2 2教学内容设计.3 3、能力训练项目设计.4 4、教学进度表.6 3、能力训练项目设计表.12 4、教学进度表.14 5、第一次课设计梗概.16 网页设计与制作 课程整体教学设计课程整体教学设计 一、管理信息一、管理信息 课程名称：网页设

2、计与制作 课程代码: 制 定 者： 制定时间：2014 年 8 月 25 日 所在部门：计算机系软件教研室 批 准 人: 二、基本信息二、基本信息 学 分： 学 时：56 教学对象：高等职业技术学院计算机软件、计信管专业及电子商务专业 课程类型：专业核心课 先修课程：计算机信息技术、图形图像制作 后续课程：动态网页设计、管理信息系统开发 三、教学对象分析三、教学对象分析 网页设计与制作是高职高专院校计算机专业和其他相关专业学生应该掌握的重要技能之一。由于高职类 学生学业基础差， 学习自觉性低， 厌学情绪大。所以针对这些情况，我们以“就业能力培养为导向” “、 以学生为中心” 、 “以职业能力培

3、养为课程核心”为教学指导思想，重视职业技能的训练，重视实践环节锻炼， 改变“满堂灌”的状况，贯穿“精讲多练”的原则，充分调动学生学习积极性，提高学生的动手能力和创新 意识。这样符合我院计算机课程建设的培养对社会需要的现代信息技术人才，培养跨学科、综合型的“通才” 目标。 在整个教学实施过程中，教师是教练，学生才是真正的主角；教师示范，学生练习，示练结合，以练为主。 教师与学生的观念都应转变，教师应注重培养学生的学习能力而不是系统的知识，通过提高学生的学习兴趣、 学习主动性，使学生变被动学习为主动学习，使学生的内在素质转为系统的职业能力。 四、四、课程设计指导思想课程设计指导思想 网页制作一门知

4、识性、技能性、应用性相结合的课程。构建以教师为主导，以学生为主体的教学模式。 以完成网页制作任务为主线，在教学过程中，实行任务驱动、案例教学、理论实践一体化的教学方法，将课 堂教学与学生个别化自主学习相结合，突出应用实用的特点，最终达到活学活用的目的，体现了做中学，做 中会的理念。根据学生的认知特点，采用递进与并列相结合的结构来展现教学内容，通过情景模拟、案例分 析、协作开发等活动项目来组织教学，倡导学生在项目活动中掌握岗位技能和知识。并同时培养学生的实际 能力与才干，团队协作精神，职业道德综合素质和能力。 五、课程设计五、课程设计 1 1课程目标设计课程目标设计 1.1 能力目标能力目标 通

5、过本课程的学习，要求学生具备如下具体能力目标： 1、网站整体设计规划能力； 2、网页页面创意、设计、制作能力； 3、应用相应软件实现网页页面能力； 4、简单脚本编程能力； 5、简单数据库开发能力； 6、熟练开发常规静态网站； 1.2 知识目标知识目标 本课程以真实的工作流程的编制为载体，以项目带动内容，使学生针对具体工作流程任务全面掌握： 1、使学生从习惯思维中解脱出来，引导启发学生的创造性思维能力； 2、着重训练学生对项目的分析、观察、理解能力和认知能力； 3、网站的规划、制作、发布、管理； 4、网页编程基础 html 相关知识； 5、网页布局、颜色搭配； 6、在网页中插入文字、图像、Fla

6、sh 动画、背景音乐等元素并按要求设置属性的方法； 7、规划网站的内容结构、目录结构、链接结构的方法； 8、CSS 样式； 9、表单网页制作方法 1.3 素质目标素质目标 培养德、智、体、美、勤等全面发展的，有较好人文素质、诚实品质、富有责任心和创新能力的高级应 用性专门人才。素质目标可具体概括为： 1、 培养团队合作精神 2、 培养学生收集、处理信息，准备、加工素材的能力 3、 训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书 籍、素材光盘等方式收集所需的文字资料、图像资料、Flash 动画和网页特效等 4、 灌输诚实敬业理念 5、 提升沟通协调能力 6

7、、 鼓励开拓创新精神 7、 培养自我学习能力 8、培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素 质 2 2教学内容设计教学内容设计 序号模块（或项目）名称学时 1项目一、网页赏析4 2项目二、创建和管理公司站点4 3项目三、规划首页页面布局4 4项目四、创建首页网页链接4 5项目五、创建的多媒体效果网页4 6项目六、创建表单网页8 7项目七、创建框架网页8 8项目八、在网页中应用 CSS 样式应用4 9项目九、在网页中应用层和行为创建动态效果8 10项目十、网站的测试与发布4 11综合测试4 合计56 3 3、能力训练项目设计、能力训练项目设计 本课程

8、采用了项目教学法组织教学，在整个教学活动中，学生通过对完成项目所需知识点 的学习、掌握，通过课堂活动、小组讨论、分析等完成项目驱动的各项任务，最终以任务的完 成情况作为期末考核的主要依据。 编 号 能力训练 项目名称 拟实现的 能力目标 相关支撑知识 训练方式 手段及步骤 项目成果 1 初识不同类 型网页 1认识网页与网站 2认识网页的基本元 素 3认识网页的基本布 局结构 4网站的需求分析 网站基本概念； 网页布局结构； 网页术语 通过上网查看不同类型 网站认识浏览器窗口， 网页基本元素对网页制 作的常用软件有初步的 了解 每人提交一份对 网站、网页的基 本认识 经过优选，各小 组推荐一份较

9、为 合理的,全班共 同交流 2 创建和管理 站点 1熟悉 DR 的工 作界面会设置本地 站点 2会搜索素材并 分类整理 3会规划整体网 站结构 4会创建与管理 站点 DR CS5 的工作界 面； 创建站点； 存储素材文件夹 命名规则； 网站目录规范； 引入项目任务，用互动 方式让学生思考如何进 行指定主题网站的创建。 最后对能力目标进行分 解训练，达到巩固所学 内容的教学目的； 根据资料，各小 组提交一份最佳 网页 3规划首页页 面布局 (1) 会使用 dreamweaver 软件建立 表格、调整表格 (2) 会插入图片及进 行属性设置 (3) 会录入文字及排 版 (4)会进行图文混排 文本编

10、辑； 文本格式化； 特殊字符、水平 线; 日期的插入; 表格设置的知识; 图文混排知识; 引入项目任务，用互动 方式让学生思考站点的 创建，设置网页中文本 格式，图像属性、图像 格式,深化项目，以实践 训练提高技术应用能力。 形成指定形式的 网页 2-3 张 4 创建首页网 页链接 1会应用表格布 局网站中的网页， 使网站更规范 2会在网页中实 表格布局网页； Flash 动画的插入； 文字滚动效果； 引入项目任务，用互动 方式让学生思考站点的 创建，设置网页中文本 格式，图像属性、图像 完善网站中功能 现滚动文字效果 3会设置网页的 头文件，会帮助网 页实现特殊功能 文件夹的建立； 超链接的

11、简单使 用； 格式,深化项目，以实践 训练提高技术应用能力。 5 创建多媒体 效果网页 (1)会在网页指定 位置插入 Flash 动画， flas 电子文档等 (2)会在网页中插 入音乐 制作在线音 乐网站果 (3)会在网页指定 位置插入视频 了解 Flash 文件 类型; 了解音频文件格 式; 在网页中插入 Shockwave 影片 方法; 引入项目任务，用互动 方式让学生思考站点的 创建，设置网页中实现 多媒体效果，深化项目， 以实践训练提高技术应 用能力。 每人制作出自定 的网站，实现多 媒体效果 6 创建表单网 页 会创建功能齐全的 表单网页 表单域； 表单控件； Spry 验证； 引

12、用 javascript 脚 本实现表单的特 殊功能 情景导入，与学生互动， 要求学生仔细观察，共 同特点，引出问题，提 出问题，思考解决办法， 推出任务作用，实施解 决办法，探讨最终效果 使用框架实现网 络教学平台页面 间的浏览 7 创建框架网 页 (1)会使用 dreamweaver 创建 框架集及保存 (2) 会选择合适的 框架 (3)会修改框架集代 码 了解框架及框架 集; 框架结构的组成; 框架结构的优点; 引入项目任务，用互动 方式让学生分析表单网 页的制作思想，然后对 能力目标进行分解训练； 最后通过课堂活动达到 表单网页制作的效果。 根据教师所给资 料，每人给自己 的 网站制作

13、表 单网页 8 在“课外活 动”网页中 应用 CSS 样 式应用 (1)会使用 div+css； (2) 会对网页文档进行 基本的 CSS 样式设置 能加代码片段； (3)会添加页面区块； div+css 布局网页； 掌握 CSS 语法规 则; 了解 CSS 特性; 了解 CSS 类型; 掌握 CSS 创建方 法; 以案例导入任务，用互 动方式让学生分析 CSS 样式的制作思想，然后 对能力目标进行分解训 练；最后通过课堂活动 达到表单网页制作的效 果。 在网站中添加由 CSS 布局的网页， 建立一个外部样 式文件，并在网 页中应用此文件。 9在“动感首 页”中应用 层和行为创 建动态效果 (

14、1) 会利用层与行为 创建网页效 (2) 会创建交换图像 效果 (3) 会创建弹出提示 信息效果 (4) 会创建打开浏览 窗口网页效果 动态导航栏； 滚动图片； 状态栏滚动文字 首先，以案例导入任务， 然后引导训练学生创建 自己网站的主页。达到 巩固所学内容的教学目 的 每人给自己的 网站添加一个动 态效果网页 109“作品展示 平台”网站 的测试与发 布 (1) 会整合网站中的 网页 (2) 会测试网站 (3) 会发布网站 优化网页； 整合网页； 测试站点； 申请网页空间； 发布网站 首先，以案例导入然后 引导训练学生对自己的 网站进行维护 创建一个完整的 网站 4 4、教学进度表、教学进度

15、表 教学目标和主要内容 序号学时单元 标题 能力目标 训练项 目编号 知识目标其他内容考核 12 赏析不同类网 页 对网站、网页有一定 的认识，激发学生学 习网页制作的兴趣； 了解相关术语；认识 网站主题与色彩 11、网站规划； 2、栏目设计； 3、网页版面设计； 暂无上机 实训 22 创建进入网站页 面 1、认识 dr cs4 2、会创建 html 网页； 3、会保存网页 4、会软件的基本操作 5、会 Html 基础 2 1、DR CS4 的工作 界面； 2、新建文件； 3、保存文件； 4、浮动面板组； 5、html 基本标记 暂无上机 实训 34创建管理站点 (1)熟悉 DR 的工作 界面

16、会设置本地站点 5会搜索素材并分 类整理 6会规划整体网站 结构 7会创建与管理站 点 31、 站点的创建； 2、 网站目录规范； 存储素材文件夹命 名规则； 3、 网站目录规范； 4、 页面属性 暂无上机 实训 44 banner 图、导 航条的制作 1、会制作图文混排页 面； 2、会用表格简单布局 41、编辑网页文本； 2、网页文本的格式； 3、插入与文本相关 元素 4、插入表格并调整 大小 暂无上机 实训 54 制作“公司概 况”网页 1、会运用使用表格布 局网页 2、会灵活应用表格； 51、表格布局网页； 2、表格属性 3、单元格属性； 4、文件夹的建立； 暂无上机 实训 64 首页中

17、的文字 连接与图片链 接 1、 会创建网页的内 部链接 2、 会熟练应用文字 连接 3、 会熟练应用图片 链接 71、文字连接； 2、图片链接； 3、图像热点链接； 暂无上机 实训 74 创建外部网站 的链接 1、 会熟练创建锚点 链接 2、 熟练创建邮件链 接 3、 理解绝对路径与 相对路径的概念 81、锚点链接 2、邮件链接 3、相对路径 4、绝对路径 暂无上机 实训 84创建多媒体效1、会在网页指定位91、Flash 文件类型暂无上机 果网页置插入 Flash 动画， flas 电子文档等 2、网页中插入音乐 制作在线音乐网站 3、够在网页指定位 置插入视频 2、了解音频文件 格式 3、

18、掌握在网页中 插入 Shockwave 影片方法 实训 94 制作注册网页 能使用各种表单元素 创建表单网页 121、表单域 2、文本域 3、文本区域 4、单选按钮 5、单选按钮组 6、复选框 暂无上机 实训 104 制作用户调查 表单 会创建功能齐全的表 单网页 131、列表域 2、菜单域 3、跳转菜单 4、按钮 5、图像域 6、验证表单有效 性 暂无上机 实训 114 制作设计欣赏 网页 1、能使用 dreamweaver 创建框 架集及保存 2、会修改框架集代 码 101、框架及框架集 2、框架结构的组 成 3、框架结构的优点 暂无上机 实训 124 “作品欣赏” 网页使用框架 实现页面

19、间浏 览 会实现各个框架之间 的链接 111、框架及框架集 2、框架结构的组 成 3、框架结构的优点 暂无上机 实训 134 给“课外活动 页面”添加基 本 CSS 样式 会创建 CSS 样式表141、CSS 创建方法 2、CSS 语法规则 暂无上机 实训 144 在“课外活动 页面”中综合 应用 CSS 1、css 样式的灵活应 用； 2、能加代码片段； 151、CSS 特性 2、CSS 类型 暂无上机 实训 154 制作教师风采 网页 1会利用层与行为创 建网页效果 2会创建交换图像效 果 161、 层和行为概念 2、 CSS+div 布局 网页 暂无上机 实训 164制作动感首页 1、会

20、创建弹出提示 信息效果 2、会创建打开浏览窗 口网页效 17事件与动作暂无上机 实训 174 网站的测试与 发布 1、会测试站点 2、掌握域名空间申 请方法 3、会发布站点 18掌握站点测试内容 掌握站点测试和发 布技巧 理解域名和空间概 念 暂无上机 实训 5 5、第一次课设计梗概、第一次课设计梗概 一、自我介绍 二、课程简介 三、学习本课程所要达到的目标： 1、能力目标； 2、知识目标； 3、素质目标； 四、情景设计 以熟知的对象引入课程：闪客“围脖“网站网页 五、主题引入 1、你在网上做过什么操作：上网的过程是如何的？引入网址、WEB 服务器、浏览器、HTTP 等概念 2、你在网上看到了

21、什么：网页上的元素有那些？引入文字、图像、超链接基本元素的概念 3、分别查看三种不同类型的网站的主页和二级页面。总结不同类型网站的网页的布局特点 六、分组讨论确定网页主题 七、对本课程的考核要求简要介绍 任务+实训 过程考核为主 六、考核方案设计六、考核方案设计 网页制作是一门考查课，课程考核采用理论考核和实践考核相结合方式进行，同时体现过程性考核 与终结性考核。最后按各理论考核占 30%，实践考核占 70的比例计入该课程成绩。考核中要特别注重实践 动手能力的考核。 过程性考核包括常规（学习态度、出勤、课堂提问、职业行为养成等） 、课堂作业（各能力训练分项目 或任务完成的情况、成果，以及书面作业） 、平时测试、课外作业等。 终结性考核包括课程综合