高职《网页设计与制作》课程教学设计与实现
高职《网页设计与制作》课程教学设计与实现
作者：王聪
来源：《中国科技纵横》2012年第08期
摘要：《网站设计与制作》是一门实践性很强的职业技能课程，对于高职高专学生教学过程中怎样把本门课程要学习的知识和技能与本课程相对应的岗位知识和技能要求相对应，并在课程教学过程中使学生熟悉岗位工作过程是课程教学设计的重点。
该文对基于工作过程培养模式，强调知识的实用性，突出网站设计制作、网站推广和网络编辑等行业岗位实用能力培养，以岗位能力选择相关知识点、技能点，形成理论与实践、知识与技能相统一的课程模式进行了探索。
关键词：网页设计与制作基于工作过程教学设计
《网页设计与制作》是高职高专计算机类专业的职业技能课程，根据课程所对应的职业岗位网站设计制作、网站推广和网络编辑等岗位所需的职业能力要求，分析出课程能力目标为网站的规划、网页效果图的设计与制作、网站的设计、网页动画的设计、网页脚本代码等专业能力和方法能力，以及培养学生的团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质和能力。
1、设计思路
本课程的设计秉着“以职业岗位工作过程为主线”、“以职业能力培养为课程核心”、“以实际项目为导向”等先进的教学理念。
使用基于工作过程培养模式，强调知识的实用性。
突出网站设计制作、网站推广和网络编辑等行业岗位实用能力培养，以岗位能力选择相关知识点、技能点，形成理论与实践、知识与技能相统一的课程模式。
在课程内容组织和实施中突破传统学科教材的“三段式”课程设置模式和知识传授过程，将知识点的讲授贯穿于一个完整的综合性网站的设计与制作，通过情景、过程、类比、模拟等教学模式提高学生的知识、技能等综合能力。
2、课程任务及目标
通过课程的学习培养学生网站设计制作、网站推广和网络编辑等方面的岗位职业能力，使学生具备计算机及其它相关专业课学习和应用中所必需的网页制作与网站设计的基本知识和基本技能，形成解决实际应用问题的方法能力，养成良好的职业道德，为后续课程综合实训和顶
岗实习与毕业设计等课程打下坚实的基础。
并注意渗透思想教育，逐步培养学生的辩证思维，加强学生的职业道德观念。
3、课程内容设计
课程教学内容设计根据课程所对应的职业岗位所需的知识和技能选取出来作为课程教学内容，课程教学内容具体参照表1所示
4、课程实施
4.1 课程教学模式
本课程针对高职教育特点，采用基于工作过程（工作任务驱动）的教学模式。
第一次授课时就告诉学生课程要开发的网站、要求，涵盖的知识点，以此为基础展开教学，注重培养学生发现问题、分析问题、解决问题的能力以及创新思维与技术综合应用能力。
具体教学模式如下：
(1)课程教学采用一体化分组教学。
教学地点为计算机实训室；
(2)教师在课前展示本学期要作为教学案例的综合性网站项目，并要求学生按照自己的兴趣和爱好分组开发不同内容的综合性网站项目。
然后对综合性网站项目进行前期的需求分析，确定网站项目开发规模，所需的人力物力，学生自主组成学习小组，制定网站项目开发进度表，以此充分调动学生的创新思维，培养创新能力。
(3)网站项目设计与实施：学生按照网站项目开发进度表完成网站开发。
整个过程中，教师真实案例演示为辅，学生自主设计为主，教师的作用仅为答疑、过程监控以及对共性问题进行总结与归纳。
在此过程中，学生的分析问题、解决问题的能力将得到有效的锻炼，使学生对课程体系有一个更加全面的认识。
(4)网站项目验收：教师对学生完成的网站项目进行验收与评价，学生需提交网站项目开发报告并答辩，学生和老师提问，按照评分标准给出成绩。
对于优秀作品，进行展示与点评。
4.2 教学方法与教学手段
本课程采用的主要教学方法有以下几种：
(1)项目教学法：课程教学通过精选企业案例、分解任务，有机地将相关知识点融合到课程中，让学生对网页设计与制作有一个直观和更加感性的认识。
(2)“教”、“学”、“做”三位一体教学法。
(3)直观教学法：通过动画演示、电子教案、电子课件、投影、录像、图片等现代教育技术展开理论教学，将复杂的原理用简单的、感性的方法展现出来，并选取与学生实际生活密切相关的项目实例进行讲解，有效地使难以理解的概念简单化、形象化，充分激起了学生的学习兴趣和主动性。
5、课程考核
课程考试成绩分两大部分：网站开发过程化考核成绩和期末网站展示考核。
(1)网站开发过程化考核；网站开发过程化的任务考核从实施过程、实施结果、态度、创新性和团队合作精神五个方面考核，其中实施过程、实施结果、态度、创新性根据每个任务的完成情况，由自我评价和教师评价相结合的方式进行。
团队合作精神的考核由同小组的其他成员进行。
(2)期末考试的作品考核；期末考试的作品考核方式为课程答辩，成绩为网站展示成绩和教师提问成绩总和。
参考文献
[1]王秀丽.网页设计与制作[M］.北京:清华大学出版社,2006．
[2]蒋秀玲,邹淑英,陈文东．“任务驱动”教学法在Dreamweaver 教学中的运用[J].通化师范学院学报,2009,30(10):88－89．
[3]殷兆燕,崔毓娟．《网页设计与制作》课程教学改革探索与实践[J].常州信息职业技术学院学报,2009，8(4):64－66．
[4]陈义文．《网页设计》项目化教学的实践与思考[J].安顺学院学报，2009，11(4):94－96．
[5]谢晓能．“层次化”任务驱动教学模式提升高职学生网页制作能力的实践[J].南京广播电视大学学报,2009(3):65－67．
[6]王晓红,周立．《网页设计与制作》课程教学改革[J].北京联合大学学报:自然科学
版,2006,20(4):90－92．。
高职网页设计与制作课程教学设计实践与研究
高职网页设计与制作课程教学设计实践与研究网页设计与制作作为高等职业教育数字媒体应用技术专业的一门专业课程，其课程教学设计一直是教学研究的重点。
近几年随着互联网的发展，各种手机端APP的迅速发展以及学生对手机的日益依赖对课程教学提出新的挑战，更是课程发展的新机遇。
标签：网页设计与制作；课程教学一、网页设计与制作课程教学实践（一）課程教学现状传统教学模式下，上课之初，学生们信心满满、热情高涨，几周之后，不少学生跟不上教学进度，没有了学习主动性和积极性，自己放弃听课了，根本就不听，听也听不懂，教师讲什么都与他无关，教学效果也就可想而知了。
（二）课程教学实践1.课程教学内容改革，引入“全站式”实训项目经过大量的调研，与石家庄易龙信息传媒有限公司、慧源文化传播中心等企业专家进行研讨后选取了公司的六个真实项目作为教学内容，这些项目涵盖了网页设计与制作的所有知识点，它们是：慧源文化传播中心的科干院网站、合众宽网、易龙信息传媒有限公司的博宏公司、展华公司、博尔乐早教网、精品课网站是省级精品课程网站。
根据网站设计工作过程来组织教学内容，其中网站策划书的制作和站点的规划和管理对应项目一科干院和项目二合众宽网。
网页布局对应项目三博宏公司网站；添加网页元素和页面美化对应项目四展华公司项目，交互式页面制作和特效页面制作对应项目五博尔乐早教网。
项目六是综合实训项目，是省级精品课程。
在充分考虑学生的认知水平和认知能力的基础上，遵循学生职业能力培养的基本规律，以真实工作任务及其工作过程为依据整合、序化教学内容，按照由简单到复杂、由局部到整体、由易到难循序渐进的原则组织教学内容，科学设计学习性工作任务，教、学、做结合，理论与实践一体化。
与这些教学项目并行的是“全站贯穿”实训项目，实训项目来自企业真实项目，或威客任务，或学生自主选择网站主题。
项目二学习结束，完成实训项目的策划书制作，项目三学习结束，完成实训项目的网页布局，项目四学习结束，完成实训项目的添加网页元素和页面美化，项目五学习结束，完成实训项目的行为特效页面及表单页面制作，最后课程结束，学生完成一个完整的网站。
（完整版）《网页设计与制作》课程教案
（完整版）《网页设计与制作》课程教案《网页设计与制作》课程教案一、课程定位本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面，为就业做好准备。
本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks 的使用方法，并能够使用这3款软件制作出美观实用的网页。
二、课程总目标掌握网页制作的基本方法和技能，掌握网站建设的流程，能够运用所学知识建设常用的网页和网站，同时能够美化网页，设计人性化、艺术化的网站静态页面部分。
（一）知识目标：1.熟悉网页制作的基本元素；2.掌握Dreamweaver CS6软件的基本操作方法；3.掌握在网页中插入文字、图片、声音、flash等的方法；4.掌握常见的网页布局方法，学会使用CSS美化网页；5.掌握在网页中使用表单和制作网页特效的方法；6.掌握简单图形图像的处理，能够制作符合网页主题的图片和简单动画并巧妙地和网页中内容搭配起来。
7.掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静态页面部分。
（二）职业能力培养目标1. 能够根据网站开发需求，去寻找网页设计和网站开发所需要的文字、图片、动画、声音、视频等素材并作美化处理；2．能够制作出符合主题色彩的网页，网页要求美化、被绝大多数浏览者接受和喜爱；3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态页面。
（三）素质目标1.具有勤奋学习的态度，严谨求实、创新的学习精神；2.具有良好的心理素质和职业道德素质；3.具有高度责任心和良好的团队合作精神；4.具有运用理论知识发现问题、分析问题并解决问题的能力，同时能够不断学习，不断创新，让自己的设计越来越完善，有止于至善的精神。
（四）职业技能证书考核要求：可以根据自身情况考取“全国计算机信息高新技术资格证”，“网页设计制作员”，“网页设计师”等职业技能证书。
浅谈高职院校《网页设计与制作》教学
生 留下 很 好 的印象 ， 那么 之 后 的授课 过程 往往 就会 很 困难 了， 学生 大 多不会 服从 老 师的授课 。 针对 网页 制作 实践 性 对高职院校《 网页设计》 课程的教学方法做了一些探讨。 比较 强 的课 程 特 点 ， 我们 可 以这样 安 排课 程 进 程 ： 一 节 第 １ 高职 院校 学 生特点 分析 课 ， 了吸 引学 生 的眼 球 ， 先按 类别 找一 些 比较 好 的 网 为 首 高 等职 业 教育 是培 养 适应生 产 、 设、 建 管理 、 务 第一 服 页让 学 生 欣 赏 ，比如 让 学 生 分别 欣赏 一 些 优 秀 的个 人 网 线 需 要 的高等 技术应 用性 专 门人 才。高等职 业 教育 区别于 页 、 业 网页 、 ｌ ｈ网 页 、 外 网页 、 国 的一 些 网页 等 企 Ｆｓ ａ 国 韩 普 通 高等教 育 ， 是一种 职业 教育 。 育部 明确提 出了“ 教 以就 等。 在欣 赏这 些 网页 的过 程 中可 以给 学生 介绍 每种 网页 的 业 为导 向” 的思 路 ， 就 要求 高 等职 业 教 育 的毕 业 生 必 需 这 特 点和 结 构 ， 重要 的是 告 诉 学生 如 果 好好 学 习 ， 我们 也 可 有较 强 的实 际动 手 能力 。所 以 ， 职 院校 的学 生在 学 习课 高 以做 出 这种 效 果 的 网页 ， 当然 ， 网页 当中我 们 可 以赋 予 在 程 上面 ， 应该 特 别 注 重 实践 环 节 的学 习 ， 养他 们 很 好 的 培 自己的 想法 ， 己的创 意 ， 以完 全赋 予 网 页我 们 自己 的 自 可 动手 能力 。 区 别于普 通 高等 学校 的学 生 ， 高职 的学 生 一般 灵魂。这样 ， 学生 学 习这 门课 的积极 性就 会提 到很 高 ， 因为 来 说 具 有学 习的主 动性 和 自觉性 不强 的特 点 ， 另外 学 习和 他 们都 希 望可 以做 出具 有 自己风格 的网页 ， 种情 况下 学 这 掌 握知 识 的能 力 也往往 有 别于 普通 高等 学校 的学生 ， 果 生 就特 别 期 待 能够做 出点 东 西来 ， 如 这时 ， 师 就 可 以 先让 教 老 师 只是 一味 的讲 授一 些理 论 知识 ， 然后 让 学生 自己完成 学生做 一 个简 单 的 网页 ，让 他们 感 受一 下做 网页 的快 乐。 课 堂 上 的操作 作 业 ，学生 是很 少会 按 时按质 量 完成 的 ， 这 这 就 要求 教 师在 备 课 的 时候 提前 准 备 一个 比较 容 易做 出 样 ， 生就 制作 不 出高质 量 的网页 。 以 ， 对高职 学生 的 效 果而又 有 意思 的 网页 ，教 师操作 之后 让 学生 自己完成 ， 学 所 针 特 点 ， 师 必须 采 取讲 练 结 合 的教 学模 式 ， 时督 促 学 生 学 生大 多都 可 以很 好 的完成 这个作 品。 么这第 一 节课就 教 随 那 练 习所 学 内容 。 好是 采 取边 讲边 练 的教学 模 式 ， 最 这样 ， 学 非常 的成功 了， 生都会 带着 极大 的期待 去上 这 门课 。 学 生学 起来 比较 容 易一点 ， 才会 很好 的掌握 所 学知识 。 ３２ 实例 讲 解 中 蕴含 知 识 点 在 安排 课 程 内容 上 ， ． 不 ２ 根据教 学 需要安 排教 学 内容 能一 个知 识 点 ， 个 工具 一 个 工具 单 独 的讲 解 ， 一 而是 要 把 ２ １根 据 需 要安排 课 程 顺序 网页 制作 是 一 门综合 性 它们放 在 实例 当中去 ， 实例 成 为知识 讲 解 的切入 点 。我 ． 让 比较 强 的课 程 ， 制 作 网页 的 过程 当 中 ， 往 还 用 到其 他 们 可 以这样 安 排 课程 内容 ， 个讲 课 过 程 ， 易 到 难安 排 在 往 整 从 课程 的知识 。 高职 计 算机专 业 的学生 在学 习网页制作 课程 几个 完整 的 网页 ，在 完成 网页 的过程 中教会 学生 知识 点 ， 之 前 ， 好 先 安排 学 习一 些其 他相 关 的课 程 ， 最 比如 图 片 处 比如 ： 一 个 网页 完成 一 个 “ — Ｓ ＯＰ 购物 网站 的制 作 。 第 Ｅ Ｈ ” 理 课 程 （ ｈ ｔｓ ｏ 、 画制作 课程 （ ｌｓ ） 色 彩搭 配 课 网 站首 页采 用 Ｔ字形框 架结构 ， Ｐ ｏｏ ｈ ｐ）动 Ｆ ｈ、 ａ 网页 的 Ｈ ａ ｅ ｄ采用 传 统 的 程 等。有 了这 些知识 的储 备 ， 在做 网站 的过 程 中 ， 可 以很 Ｌ ｇ 就 ０ ０加 Ｂ ｎ ｅ 样 式 ， ａｎｒ 下面 安排 一 横 幅 广告 条 ， 网页 的 把 容易 的制 作 出适 合 自己网站风 格 的素材 ， 得 整个 网页 看 Ｈ ａ 使 ｅ ｄ与 网页主 要框 架 内容 分隔开 ，为 了增 强 网页 的活 泼 起来 更加协 调 。 性 ， 幅 的广 告 条可 以用 学 生 之前 学过 的 Ｆ ｓ 横 ｌ ｈ知 识制作 ａ ２２ 根 据 需要 安排 授 课 方式 由于 网页 制作 是 ～ 门实 与 网站 内容相 关 的 Ｆ ｓ ． ｌ ｈ动 画 。下 面 就 是 网站 的主 要 内 ａ 践 性 非常 强 的课 程 ， 求学 生在 学 习的过 程 中有 大量 的练 容 ， 页 的最 下 面 是 网页 的 Ｆ ｏ。 因为是 第 一个 网站 ， 要 网 ｏｔ 学 习。 以 ， 课应 该都 放在机 房 实验 室 ， 所 授 这样 教 师就可 以很 生 刚接 触 到 这 些 内容 ，教 师 要首 先把 做 好 的网 站 给 学生 容 易 的控 制学 生 的学 习练 习情 况。 这样 ， 师在 讲授 了一 看 ， 教 然后 以 引导 的 方式 告诉 学 生这样 的网站 是 怎么规 划 出 定 的知 识 后 ， 就可 以让 学生 同步 的对教 师 刚刚在 课 堂上讲 来 的 ， 为什么 这么规 划 ， 怎样做 出这样 的效 果来 。 学生 明 在 过 的知 识 进行相 关 的练 习。通 过 这种 方式 ， 学生 可 以及 时 白了这 些 以后 ，教 师就 带领 学 生一 起 完 成 这个 网站 的制 的练 习教 师所 讲 的 内容 ， 对一 些没 有 听 明 白做 不 出来 效 果 作 ， 网站 制作 的过 程 中教会 学生 知识 点。 通过 第一 个 网 在 的知 识 点 ， 师还 可 以随 时 为学 生做 出解 答 ， 过 课 堂 上 站 的制作 ， 生 已经 掌握 了制作 网站 的基 本 知识 ， 下 来 教 通 学 接 教 与学 的互 动 ，学生 基本 可 以掌 握课 堂上 所讲 的 知识 ， 并 教 师就 可 以安排 难 一点 的 网站给 学生做 了。这 时 ， 师不 教 要 给 出 网站具体 的内容 和框 架结 构 ， 而是要 充 分发 挥学 生 且 完成 相 关 的操作 。 然后 ， 了巩 固学 生 对课 堂知 识 的掌 为 握 程 度 ， 师可 以布 置课 后作 业 ， 教 通过 课 上课 下 的加 强 练 学 习的主观 能动性 。教 师 只要告 诉学 生所 做 网站 的标 题 、 要 求和 大致要 达到 的效 果就 可 以 了 ， 然后 就 这个 网站 的制 习， 生基 本都 可 以很 好 的掌握所 学知 识。 学
网页设计与制作教学设计
网页设计与制作教学设计一、教学背景分析网页设计与制作是一门非常重要的课程，随着互联网的普及和发展，网页设计与制作的需求也变得越来越大。
许多学生对于网页设计与制作非常感兴趣，希望通过这门课程学习到相关的知识和技能，以便将来在工作中应用。
同时，随着移动互联网时代的到来，网页设计与制作也需要不断更新和改进，培养学生对于新技术的学习和应用能力也成为教学的重点。
二、教学目标1. 培养学生对网页设计与制作的兴趣和热情，增强学生对于网络技术与应用的认识和理解；2. 使学生掌握网页设计与制作的基本原理和技能，能够运用HTML、CSS等技术工具设计制作简单的网页；3. 帮助学生加强对于用户体验和界面设计的理解，提高网页设计的专业水平；4. 培养学生的团队合作意识和沟通能力，能够与他人合作完成网页设计与制作的项目。
三、教学内容1. 网页设计与制作的概述2. HTML基础知识3. CSS基础知识4. JavaScript基础知识5. 网页设计的原则与流程6. 用户体验设计与界面设计7. 网页制作实践案例四、教学方法1. 理论与实践相结合的教学方法。
在教授理论知识的同时，设置相应的实践环节，让学生通过实际操作来巩固所学的知识。
2. 项目驱动的教学方法。
通过实际的网页设计与制作项目，培养学生的实际动手能力和团队合作意识，让学生在项目中不断实践和提高。
3. 讨论式教学方法。
通过课堂讨论、案例分析等形式，激发学生的学习兴趣，促进学生的思维和能力发展。
五、教学手段1. 多媒体教学手段。
利用投影仪、电脑等多媒体设备，向学生展示相关的网页设计与制作案例、教学视频等资料。
2. 虚拟实验平台。
借助虚拟实验平台，让学生在没有实际服务器环境的情况下，进行网页设计与制作的实践操作。
3. 在线资源。
提供丰富的在线学习资源，包括教学视频、学习文档、案例分析等，帮助学生更好地学习与理解相关知识。
六、教学评价1. 通过课堂作业、实验报告等形式，对学生进行日常表现的评价。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法：讲解网页设计的概念和原则实践法：学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章：HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法：讲解HTML和CSS的基本概念和语法实践法：学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章：网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法：讲解网页布局和排版的基本原则和方法实践法：学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章：网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法：讲解网页动画和交互的基本概念和原理实践法：学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章：网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法：讲解网页优化和推广的基本概念和方法实践法：学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章：网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具（如Photoshop、Fireworks等）多媒体元素在网页中的应用（如音频、视频等）图像和多媒体的HTML和CSS标记6.3 教学方法讲授法：讲解网页图像处理的基本概念和工具实践法：学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章：网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言（如JavaScript、jQuery等）常用的网页编程技术和框架（如Bootstrap、React等）编程实践和项目案例7.3 教学方法讲授法：讲解网页编程的基本概念和语言实践法：学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章：移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具（如Responsive Design、Adobe Edge Mobile等）移动网页设计的实践和案例分析8.3 教学方法讲授法：讲解移动网页设计的基本概念和原则实践法：学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章：网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具（如Git、Project Management Software等）项目案例分析和实战演练9.3 教学方法讲授法：讲解网页项目实战的基本流程和方法实践法：学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章：网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向（如VR/AR、等）前沿技术和创新思维的方法（如Blockchn、Design Thinking等）创新项目和案例分析10.3 教学方法讲授法：讲解网页设计与制作的未来趋势和发展方向实践法：学生进行创新项目和思维训练10.4 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。
《网页设计与制作》课程教案
《网页设计与制作》课程教案一、教学目标1. 了解网页设计与制作的基本概念和流程。
2. 掌握HTML、CSS和JavaScript的基本语法和应用。
3. 能够独立设计并制作一个简单的网页。
二、教学内容1. 网页设计与制作的基本概念和流程。
讲解网页设计与制作的基本概念，如网页、网页设计、网页制作等。
介绍网页设计与制作的流程，包括需求分析、页面布局、页面设计、编码实现等。
2. HTML的基本语法和应用。
讲解HTML的基本语法，如标签、属性、注释等。
通过实例演示HTML在网页中的应用，如、段落、图片、等。
3. CSS的基本语法和应用。
讲解CSS的基本语法，如选择器、属性、注释等。
通过实例演示CSS在网页中的应用，如字体样式、颜色、布局等。
4. JavaScript的基本语法和应用。
讲解JavaScript的基本语法，如变量、运算符、注释等。
通过实例演示JavaScript 在网页中的应用，如动态修改内容、响应用户事件等。
5. 设计并制作一个简单的网页。
根据所学知识，设计并制作一个简单的网页，包括页面布局、页面设计、编码实现等。
三、教学方法1. 讲授法：讲解基本概念、语法和应用。
2. 演示法：通过实例演示HTML、CSS和JavaScript在网页中的应用。
3. 实践法：学生动手实践，设计并制作一个简单的网页。
四、教学环境1. 教室环境：多媒体教学设备、网络连接。
2. 软件环境：文本编辑器、浏览器、网页设计软件。
五、教学评价1. 课堂参与度：学生参与课堂讨论、提问和回答问题的情况。
2. 课后作业：学生完成课后作业的情况，包括网页设计作品的质量和完成时间。
3. 期末考试：考查学生对网页设计与制作的基本概念、语法和应用的掌握情况。
六、教学资源1. 教材：《网页设计与制作教程》2. 辅助材料：PPT课件、实例代码、教学视频3. 网络资源：在线教程、相关论坛、网页设计素材库七、教学安排1. 课时：共计32课时，每课时45分钟2. 课程安排：第1-4课时：网页设计与制作的基本概念和流程第5-8课时：HTML的基本语法和应用第9-12课时：CSS的基本语法和应用第13-16课时：JavaScript的基本语法和应用第17-20课时：设计并制作一个简单的网页3. 课后作业：每课时布置相应的课后作业，巩固所学内容八、教学策略1. 针对不同学生的学习基础，调整教学进度和难度，确保学生能够跟上课程节奏。
高职高专艺术设计专业 网页制作教学计划
高职高专艺术设计类网页设计与制作教学计划为了更好的完成本学期教学工作，根据1031班和1131班的专业教学实际情况和课程需求，网页设计课计划讲授软件三款，分别是：Flash、Fireworks 、Dreamweaver，及脚本语言：HTML、CSS样式、JavaScript应用，在课时时间紧，教学任务重的情况下，为保证完成教学计划实现教学目标，特制定网页设计与制作课程教学计划如下：一、课程的性质和教学目标（一）、课程的性质：网页制作是一门实践性非常强的计算机应用技术课程,学生要通过大量的上机操作实践才能基本掌握。
针对1031班和1131班的学生专业指向性，其主要任务是掌握网页制作基本技术，因此本课程计划安排以软件Flash、Fireworks 、Dreamweaver、html的认识了解、css样式的制定、JavaScript 应用，网页色彩配色方案等内容的学习，设计制作出不同行业领域需求的静态网页。
（二）、课程教学目标1、知识教学目标通过本课程的学习使学生能够了解几款软件的基本概念、基本知识、基本理论，了解应用软件进行设计与编辑，并对目前网站制作技术的发展趋势有所掌握，除应不断更新知识和改进教学方法外，还要通过激发学生对本课程的学习兴趣，增强他们的学习积极性，以赏识教育为主，增强学生的学习自信心，从而达到提高教学效果的目的。
2、技能培养目标通过教学，使学生利用掌握的几款软件与操作程序，做到有机结合设计制作出精美的网页设计作品3、职业素质目标注重培养学生的逻辑思维能力；具有严谨的学习态度、创新意识和创新精神、科学的求学精神；并应具有团队合作精神。
二、教学方法1、讲授、演示、实践；2、教学与实践同步，即时反馈课堂信息；3、加强技能训练；4、强化实例操作训练。
三：教学重点。
（1）掌握软件Fireworks在网页平面应用的特点和基本应用（2）掌握软件Flash在网页应用的特点和基本应用（3）掌握软件Dreamweaver在网页应用的特点和基本应用（4）掌握软件HTML在网页应用的特点和基本应用（5）掌握软件CSS样式在网页应用的特点和基本应用（6）网页色彩配色方案的特点和基本应用（7）讲解网页优化常识和应用，掌握平面效率化处理（8）掌握切片的类型、HTML的输出方式及切片优化方式（9）JavaScript应用四：教学难点（1）软件之间的综合应用（2）矢量绘画和高级技巧。
微课比赛(网页设计与制作-教学设计)
《网页设计与制作》课程单元教学设计---《项目: 缥缈世界和小魔术》一、教案首页本次课标题任务10 利用图层、时间轴和行为三结合综合实现动态效果网页设计与制作所属学科理科专业计算机应用课程网页设计与制作授课班级11计算机应用适用对象计算机专业高职生上课时间15-20分钟上课地点理实一体化教室教学目的要求学生通过本次课的学习和训练，能熟悉图层、时间轴和行为三者结合实现动态效果网页的设计与制作，让网页从设计到制作更灵动。
教学目标能力目标知识目标素质目标1．能使用“图层”加载动态效果网中的对象2．能通过使用“时间轴”实现动态效果3．能灵活应用“行为”实现动态效果的控制1．动态效果网页制作“三元素”2．图层、时间轴和行为三者在实现动态效果网页的具体常规作用3．动态效果网页设计与制作三元素的使用规律或步骤1．培养学生理论联系实际的品质2．培养学生敏锐的洞察力和分析力4．培养学生举一反三设计与动手并重的素质任务与案例任务1：飘渺世界（任意飘动的对象能停能动；背景和文字颜色单击改变），此为目标任务任务2：小魔术，此为补充实例（分析+演示+总结）重点难点及解决方法重点：图层和时间轴用来实现动态效果难点：灵活应用行为实现控制动态效果解决方法：引导学生根据任务要求，在温故知新的前提下，让学生有意识挖掘理论知识点，通过补充案例的分析和现场演示，并整理要点规律，再而回到引导任务加以分析实现，完成目标任务的同时夯实了理论知识点的掌握，为将来的举一反三奠定了坚实的理论和操作基础。
学习环境选择与学习资源设计1. 学习环境选择（1）多媒体教室（2）普通教师（3）计算机实验机房（4）专业实训室2. 学习资源设计（1）多媒体课件（2）网页素材及补充实例资源库形式方法手段目标导入+实例展示、讲解+教师提问+案例分析与实现+学生代表分析、教师点评、讲解并总结参考资料1、《dreamwear mx网页设计与制作》2、《dreamwear 8网页设计与实训教程》3、网上资料二、教学设计序号步骤名称教学内容教师活动学生活动时间分配(分)工具与材料课内/课外1告知（教学内容、目的）告知：本次课的教学内容：动态效果制作篇教学目的：要求学生通过本次课的学习和训练，能熟悉图层、时间轴和行为三者结合实现动态效果网页的设计与制作，让网页从设计到制作更灵动。
《网页设计与制作》课程教案
《网页设计与制作》课程教案第一章：网页设计与制作概述1.1 课程介绍网页设计与制作的基本概念网页设计与制作的目的与意义网页设计与制作的应用领域1.2 网页设计原则网页设计的基本原则用户体验设计原则响应式网页设计原则1.3 网页制作工具与技术网页设计软件的选择与使用HTML与CSS的基本语法与使用方法JavaScript的基础知识与应用第二章：网页布局与排版2.1 网页布局的基本概念网页布局的定义与作用常见的网页布局方式布局元素的分类与使用2.2 排版的原则与方法排版的基本原则文本的格式化与排版图片与多媒体元素的排版2.3 响应式网页布局与排版响应式网页布局的概念与意义媒体查询的使用方法布局与排版在不同设备上的应用第三章：网页色彩与字体3.1 色彩的基本概念与应用色彩的视觉效应与心理作用色彩的搭配原则与技巧色彩在网页设计中的应用案例3.2 字体的选择与使用字体的分类与特点字体的搭配原则与技巧字体在网页设计中的应用案例3.3 网页色彩与字体的综合应用色彩与字体的协调与平衡字体大小与行距的设置与调整色彩与字体的个性化应用与创新第四章：网页图片与多媒体元素4.1 网页图片的选择与处理图片的格式与特点图片的选择标准与技巧图片的处理与优化方法4.2 多媒体元素的应用音频与视频元素的应用动画与GIF图片的应用交互式多媒体元素的应用4.3 网页图片与多媒体元素的优化图片与多媒体元素的加载优化图片与多媒体元素的响应式应用图片与多媒体元素的视觉效果与用户体验第五章：网页交互与动画5.1 网页交互的基本概念与原理交互的定义与作用交互的实现方式与技术交互的设计原则与技巧5.2 JavaScript基础与应用JavaScript的基本语法与功能事件处理与DOM操作JavaScript库与框架的选择与使用5.3 网页动画的实现与优化CSS动画的制作方法与技巧JavaScript动画的制作方法与技巧动画的加载优化与性能考虑第六章：HTML与CSS高级应用6.1 表单设计与验证表单的基本结构与属性表单元素的使用与布局表单验证的实现方法6.2 网页组件设计与实现导航栏与面包屑的制作折叠面板与标签页的制作轮播图与幻灯片的设计与实现6.3 网页动画与过渡效果CSS过渡与动画的实现JavaScript动画的实现方法动画的性能优化与调试第七章：前端框架与库7.1 前端框架的基本概念前端框架的作用与优势常见的前端框架介绍框架的选择与使用7.2 Bootstrap框架的应用Bootstrap的基本结构与组件栅格系统与布局设计Bootstrap表单与样式定制7.3 React与Vue框架的选择与应用React框架的基本概念与使用方法Vue框架的基本概念与使用方法框架项目结构与组件化开发第八章：网页兼容性与优化8.1 网页兼容性基本概念浏览器兼容性的原因与挑战兼容性测试的方法与工具兼容性解决方案与最佳实践8.2 网页性能优化网页加载速度的影响因素图片与多媒体元素的优化代码压缩与合并技巧8.3 搜索引擎优化（SEO）SEO的基本概念与原则关键词研究与内容优化代码优化与站点结构调整第九章：网页安全与维护9.1 网页安全基本概念网页安全的威胁与挑战跨站脚本攻击（XSS）的预防跨站请求伪造（CSRF）的预防9.2 数据备份与恢复数据备份的重要性与方法数据库备份与文件备份恢复策略与流程9.3 网站维护与更新网站维护的内容与流程网站更新的方法与技巧网站监控与性能调优第十章：项目实践与案例分析10.1 项目实践流程项目需求分析与规划设计阶段与实现阶段项目测试与上线流程10.2 项目案例分析案例一：个人博客网站设计与制作案例二：电子商务网站设计与制作案例三：响应式企业官网设计与制作项目过程中的问题与解决方法网页设计与制作的趋势与展望重点和难点解析1. 第一章：网页设计与制作概述难点解析：网页设计原则的理解与应用、网页制作工具与技术的熟练运用2. 第二章：网页布局与排版难点解析：响应式网页布局与排版的设计与实现3. 第三章：网页色彩与字体难点解析：色彩与字体的协调与平衡、字体大小与行距的设置与调整4. 第四章：网页图片与多媒体元素难点解析：网页图片与多媒体元素的优化方法、响应式应用5. 第五章：网页交互与动画难点解析：JavaScript事件的处理与DOM操作、动画的实现与优化6. 第六章：HTML与CSS高级应用难点解析：表单验证的实现方法、网页组件的布局与样式设计7. 第七章：前端框架与库难点解析：框架的选择与使用、React与Vue框架的选择与应用8. 第八章：网页兼容性与优化难点解析：兼容性解决方案与最佳实践、网页性能优化的实施方法9. 第九章：网页安全与维护难点解析：预防跨站脚本攻击（XSS）与跨站请求伪造（CSRF）的策略、网站维护与更新的方法10. 第十章：项目实践与案例分析难点解析：项目需求的分析与规划、项目测试与上线流程的控制本教案《网页设计与制作》涵盖了网页设计与制作的基本概念、技术应用、项目实践等各个方面。
大学网页设计与制作教案
课程名称：网页设计与制作授课教师： [教师姓名]授课班级： [班级名称]授课时间： [具体时间]课时安排： 2课时教学目标：1. 知识目标：- 了解网页设计的基本概念、原则和流程。
- 掌握HTML、CSS和JavaScript的基本语法和常用标签。
- 熟悉网页布局技术，如Flexbox和Grid。
- 学习使用常用的网页设计工具，如Dreamweaver、HBuilder等。
2. 能力目标：- 能够独立设计和制作简单的网页。
- 能够运用所学知识解决实际网页设计问题。
- 培养团队协作能力和创新思维。
3. 素质目标：- 培养学生对网页设计的兴趣和审美能力。
- 增强学生的动手实践能力和解决问题的能力。
- 培养学生的创新意识和终身学习的能力。
教学内容：第一课时1. 导入：- 通过展示一些优秀的网页设计作品，激发学生的学习兴趣。
- 简要介绍网页设计的发展历程和现状。
2. 网页设计的基本概念：- 介绍网页设计的定义、原则和流程。
- 讲解网页设计的基本要素，如色彩、字体、布局等。
3. HTML基础：- 介绍HTML的基本语法和常用标签。
- 讲解HTML文档结构、头部信息、段落、链接、图片等标签的使用。
4. CSS基础：- 介绍CSS的基本语法和常用属性。
- 讲解CSS选择器、字体、颜色、布局等属性的使用。
第二课时1. JavaScript基础：- 介绍JavaScript的基本语法和常用语句。
- 讲解JavaScript的变量、数据类型、运算符、函数等概念。
2. 网页布局技术：- 介绍Flexbox和Grid布局技术。
- 讲解如何使用这些技术实现响应式网页设计。
3. 网页设计工具：- 介绍Dreamweaver、HBuilder等网页设计工具。
- 讲解如何使用这些工具进行网页设计和开发。
4. 实践练习：- 学生分组，根据所学知识设计一个简单的网页。
- 教师进行指导和点评。
教学方法：- 讲授法：讲解网页设计的基本概念、原则和流程。