《网页制作》项目式教学案
第17课 制作网页展活动(教学设计)—2024-2025学年人教版(2024)信息科技七年级全一册
第17课 制作网页展活动（教学设计）—2024-2025学年人教版（2024）信息科技七年级全一册
一、教材分析 本节课处于学生学习网页知识的实践应用关键阶段，承接前面了解网页结构、代码以及初步探秘网页构建原理等内容，重点聚焦于让学生通过制作网页展示活动这一项目，将所学知识技能进行整合运用。教材以活动策划为线索，引导学生经历从确定主题、规划页面布局，到运用 HTML、CSS 和 JavaScript 编写代码实现网页功能，再到后期优化完善的完整流程，旨在培养学生的项目管理能力、技术应用能力以及创新实践精神，让学生切实体会网页制作在信息传播与展示方面的强大作用，贴合七年级学生渴望动手创造、展示自我的心理需求。 二、学情分析 七年级学生经过前期课程学习，已对网页的基本元素、HTML 基础语法、CSS 美化样式有了一定认识，具备初步的代码阅读和编写能力，但在面对一个完整的网页制作项目时，仍存在诸多挑战。例如，缺乏系统的项目规划思维，难以将脑海中的创意清晰转化为具体的网页布局和功能设计；在代码编写过程中，容易出现语法错误，且对于不同代码段之间的协同工作原理理解不够深入；对于如何优化网页性能、提升用户体验，还缺少有效的方法和意识。然而，此阶段学生好奇心强、学习积极性高，只要给予适当引导和支持，就能在实践中逐步成长。 三、教学目标 知识与技能目标 能够依据活动需求，独立确定网页主题，撰写详细的网页策划方案，包括页面布局草图、内容板块规划、目标受众分析等。 熟练运用 HTML 标签构建复杂网页结构，如多栏式布局、嵌套表格、导航菜单等，准确设置标签属性，确保页面逻辑清晰、层次分明。 灵活运用 CSS 样式对网页进行精细化美化，掌握 CSS 布局模型（如浮动、定位）应用，实现元素精准定位与排列，能根据主题风格调配色彩、字体、背景等样式，打造独具特色的视觉效果。 理解 JavaScript 在网页交互中的核心作用，掌握基本的 JavaScript 事件驱动编程，如按钮点击触发函数、表单提交验证等，能为网页添加实用且有趣的交互功能，提升用户参与度。 学会使用网页开发工具（如 Visual Studio Code）进行代码编写、调试与管理，掌握基本的代码错误排查技巧，如语法错误提示、逻辑错误分析，确保网页正常运行。 过程与方法目标 通过小组合作制定网页策划方案，培养团队协作、沟通交流与问题协商解决能力，学会倾听他人意见，整合团队智慧。 在网页制作过程中，以任务驱动方式逐步推进，培养学生的自主学习、自我管理与任务分解执行能力，如将网页制作分为结构搭建、样式美化、交互添加等子任务，有序完成。 借助代码调试与优化环节，锻炼学生的观察能力、分析能力与应变能力，能够从网页运行效果反向推导代码问题，迅速采取补救措施。 组织学生展示并互评网页作品，培养学生的审美鉴赏、批判性思维与语言表达能力，在对比中发现差距，学习他人长处，改进自身作品。 情感态度与价值观目标 体验网页制作带来的成就感，激发对网页开发技术的深入探索欲望，培养勇于创新、敢于实践的精神品质。 树立正确的项目意识，认识到一个成功的网页作品需要精心策划、严谨实施、反复打磨，培养耐心、细心与责任心。 强化知识产权保护观念，在使用图片、文字等素材时确保来源合法，尊重他人创作成果，遵守网络道德规范。 四、教学重难点 教学重点 运用项目式学习方法，引导学生系统地制定网页策划方案，重点讲解如何从活动主题出发，设计合理的页面布局、规划内容呈现顺序，确保方案具有可行性与前瞻性。 详细演示 HTML 复杂结构构建技巧，结合实例讲解多栏布局的实现方式（如使用 div 标签结合 CSS 布局属性）、导航菜单的制作方法（利用无序列表与超链接标签），让学生能够快速搭建起稳固的网页框架。 现场展示 CSS 精细化美化过程，通过修改 CSS 属性值，演示如何运用色彩搭配原理打造网页主色调、利用字体样式突出标题与正文区别、借助布局属性优化元素间距，使网页呈现出专业美观的视觉效果。 手把手教授 JavaScript 基本交互编程，以按钮点击触发弹窗、表单提交验证为例，讲解事件处理函数的编写、变量的运用以及与 HTML 元素的关联，让学生切实掌握为网页增添交互活力的方法。 教学难点 帮助学生建立起代码模块化思维，理解如何将 HTML、CSS 和 JavaScript 代码合理组织，使其相互配合、协同工作，避免代码混乱、功能冲突，提升网页开发效率与可维护性。 引导学生站在用户体验角度优化网页，组织研讨活动分析网页加载速度、交互便捷性、视觉舒适度等因素对用户的影响，培养学生主动优化网页性能的意识与能力，如采用图片压缩、代码精简等技术手段。 针对学生在创意设计方面的不足，设计灵感激发环节，如赏析优秀网页作品、开展创意头脑风暴，助力学生突破思维定式，在网页主题、布局、交互等方面融入独特创意，展现个性魅力。 五、教学方法 讲授法、演示法、小组合作法、项目驱动法、案例分析法 六、教学准备 多媒体教室、联网计算机、网页开发工具（如 Visual Studio Code）、教学课件、优秀网页作品案例集、网页制作项目任务卡、常见网页素材资源包（图片、图标、字体等） 七、教学过程 情境导入 展示学校近期即将举办的各类活动海报或宣传视频，如运动会、科技节、文化艺术节等，提问学生：“如果让你们来负责为这些活动制作线上宣传网页，你们会怎么做呢？” 引导学生思考线上宣传网页的优势，如传播范围广、信息更新便捷等，激发学生的兴趣与参与热情，引出本节课主题 —— 制作网页展活动。 知识新授 项目策划指导：利用 PPT 展示网页策划的关键步骤，包括确定主题（结合活动特点与目标受众喜好）、绘制页面布局草图（简单示意各板块位置与大小）、规划内容板块（如活动介绍、日程安排、报名方式等）、分析目标受众需求（考虑不同人群关注重点差异）。以科技节网页为例，详细讲解如何一步步制定完整策划方案，让学生初步掌握策划方法。 HTML 结构搭建：打开网页开发工具，新建 HTML 文件，演示如何运用 div、span、ul、li、a 等标签构建多栏式布局、导航菜单等常见网页结构。讲解标签嵌套规则，如在 div 标签内嵌套 p 标签用于放置段落内容，展示如何通过设置标签属性（如 id、class）方便后续 CSS 样式应用，让学生动手跟随操作，初步搭建网页基本框架。 CSS 美化实战：在已有 HTML 结构基础上，打开 CSS 文件，演示如何运用 CSS 选择器（标签选择器、类选择器、ID 选择器）选中 HTML 元素，并通过修改属性值（如 font-size、color、background-color、margin、padding 等）美化网页。讲解 CSS 布局属性（如 float、position）应用，实现元素精确排列，如让图片与文字环绕排列，展示不同色彩搭配方案对网页风格塑造，让学生实时观察网页变化，掌握 CSS 美化技巧。 JavaScript 交互添加：展示一个带有 JavaScript 交互的网页示例，如点击按钮弹出活动详情对话框，打开代码文件讲解 JavaScript 事件驱动编程原理。以按钮点击事件为例，演示如何定义事件处理函数，运用变量存储数据，如记录点击次数，讲解如何将 JavaScript 代码与 HTML 元素关联（通过 onclick 等事件属性），让学生了解 JavaScript 为网页带来动态交互的神奇效果，尝试添加简单交互功能。 小组合作实践 将学生分成小组，每组 4 - 5 人，发放网页制作项目任务卡，要求小组选择一个学校活动主题，依据所学知识制作宣传网页： 共同制定详细网页策划方案，绘制布局草图，明确分工，如成员 A 负责 HTML 结构搭建，成员 B 负责 CSS 美化，成员 C 负责 JavaScript 交互添加，成员 D 负责素材收集整理。 按照策划方案，逐步推进网页制作，定期小组内交流，解决遇到的代码问题、设计分歧等，教师巡视各小组，及时提供技术指导与创意建议。 在网页基本功能实现后，进行整体优化，包括检查代码语法错误、测试交互功能稳定性、优化网页加载速度，确保网页质量。 作品展示与互评 各小组推选一名代表，通过教室投屏展示小组制作的网页作品，介绍网页主题、策划思路、运用的技术亮点以及遇到的困难与解决方法。 其他小组进行互评，从网页主题契合度、布局合理性、美观程度、交互功能实用性等方面进行评价，提出优点与改进建议，教师总结点评，评选出优秀作品，给予表扬与奖励。 拓展提升 展示几个业界前沿的活动宣传网页案例，剖析其运用的高级技术，如 HTML5 动画效果、CSS3 3D 变换、大数据驱动的个性化推荐等，拓宽学生视野。 引导学生思考如何将这些先进技术逐步融入自己未来的网页制作中，鼓励课后自主学习相关知识，探索更多创意可能。 课堂总结 与学生一起回顾本节课制作网页的全过程，包括项目策划、HTML 结构搭建、CSS 美化、JavaScript 交互添加以及作品展示互评等环节，以思维导图形式呈现知识与技能要点。 八、教学反思 在教学过程中，要充分考虑学生项目实践中的困难，提前预判并
网页设计与制作项目教程(项目一 -任务01)
知识链接:网页元素 二．网页的组成元素
1. 标题
2. 网 页眉
4. 主体内容
知识链接:网页元素
5. 页脚
6. 功能区
知识链接:网页元素
7. 导航区
知识链接:网页元素
8. 广告区
广告区
知识链接:网页布局 三.网页布局结构
知识链接:基本概念
3．网页与主页
网页是由HTML（超级文本标识语言）或者其他语言编写的，通过 Web浏览器（如IE）编译后供用户获取信息的页面，也称为Web页，其 中可包含文字、图像、声音、动画和超链接等各种网页元素。网页是 WWW的基本信息单位，每个网页以独立文件形式存放，其扩展名 有.htm、.html、.asp、.jsp等。 主页是网站中的一个特殊网页，它是进入网站的第一个页面，其中 包含指向其他网页的超链接。主页是网站的“门面”，其作用远比其他 网页更重要，设计时必须精心考虑。主页的名称一般是固定的，通常为 index.html或 index.asp等。
通过讲解辅导与作业练习，要使学生能熟练掌握网站建设的 流程及网页制作的内容，培养对优秀网站和网页的鉴赏能力。
• 素质目标：
1. 具有勤奋学习的态度，严谨求实、创新的工作作风； 2. 具有良好的心理素质和职业道德素质；
3. 具有高度责任心和良好的团队合作精神；
4. 具有一定的科学思维方式和判断分析问题的能力； 5. 具有较强的网页设计创意思维、艺术设计素质。
布局分析
图1.3 hao123网站的布局结构
1.分析hao123网站
Hao123网站为导航型网站，主要内容由导航网址组成， 除此之外，页面上还有网站站标（logo）、网站广告 (banner)、邮箱登录入口及搜索框、网站备案号等。 如图1.4所示。
网页一节课程设计
网页一节课程设计一、教学目标本节课的教学目标是让学生掌握网页的基本概念、结构和制作方法。
具体包括以下三个方面的目标：1.知识目标：–了解网页的定义、发展历程和基本组成；–掌握HTML、CSS和JavaScript三种基本技术；–理解网页设计的原理和原则。
2.技能目标：–能够使用HTML编写简单的网页结构；–运用CSS设置网页的样式和布局；–利用JavaScript为网页添加交互功能。
3.情感态度价值观目标：–培养学生对网页设计和制作的兴趣，提高创新意识；–培养学生团队协作精神和自主学习能力；–引导学生关注网页技术的发展，拓宽视野。
二、教学内容本节课的教学内容主要包括以下三个方面：1.网页的基本概念：介绍网页的定义、发展历程和基本组成，使学生对网页有一个整体的认识。
2.网页制作技术：讲解HTML、CSS和JavaScript三种基本技术，引导学生掌握网页制作的核心技术。
3.网页设计原理：介绍网页设计的原理和原则，培养学生具备良好的网页设计能力。
三、教学方法为了实现本节课的教学目标，采用以下几种教学方法：1.讲授法：讲解网页的基本概念、制作技术和设计原理，使学生掌握相关知识。
2.案例分析法：分析经典网页案例，让学生了解实际应用，提高设计能力。
3.实验法：让学生动手实践，编写和设计网页，培养实际操作能力。
4.小组讨论法：分组进行讨论，促进学生之间的交流与合作，培养团队精神。
四、教学资源为了支持本节课的教学内容和教学方法，准备以下教学资源：1.教材：选用权威、实用的网页制作教材，为学生提供理论支持。
2.参考书：提供丰富的参考资料，拓展学生的知识面。
3.多媒体资料：制作精美的PPT，生动展示网页制作过程和设计效果。
4.实验设备：准备计算机、网络和相关的软件工具，确保学生能够顺利进行实践操作。
五、教学评估本节课的教学评估将采用多元化的评价方式，以全面、客观地评价学生的学习成果。
评估内容包括：1.平时表现：评价学生在课堂上的参与程度、提问回答和小组讨论的表现，占总评的30%。
网页设计与制作课程设计
网页设计与制作课程设计一、课程目标知识目标：1. 让学生掌握网页设计的基本概念，包括网页结构、布局、色彩搭配等；2. 使学生了解并熟悉HTML、CSS等网页编程语言；3. 让学生掌握网页制作的基本工具和软件，如Dreamweaver、Photoshop 等；4. 引导学生了解互联网发展趋势，提高对网页设计行业标准及规范的认识。
技能目标：1. 培养学生运用HTML、CSS进行网页编写的能力，能独立完成静态网页的制作；2. 培养学生运用网页设计工具和软件进行创意设计的能力，提高网页视觉效果；3. 培养学生团队协作能力，能在团队项目中发挥个人特长，共同完成复杂网页设计任务。
情感态度价值观目标：1. 激发学生对网页设计的兴趣和热情，培养创新精神和审美观念；2. 培养学生严谨细致的工作态度，注重细节，追求卓越；3. 引导学生关注互联网产业发展，树立正确的职业观念，为未来职业生涯奠定基础。
课程性质：本课程为实践性较强的学科，注重理论知识与实践操作的相结合。
学生特点：本课程针对初中年级学生，学生具备一定的计算机操作基础，好奇心强，喜欢探索新事物。
教学要求：结合学生特点，采用案例教学、任务驱动等方法，注重培养学生的实际操作能力。
在教学过程中，将课程目标分解为具体的学习成果，以便进行有效的教学设计和评估。
二、教学内容1. 网页设计基础知识：包括网页的基本结构、布局原则、色彩搭配技巧等，对应教材第一章内容。
- 网页的基本结构及其作用- 常见的网页布局类型及特点- 网页色彩搭配原则及视觉效果2. 网页编程语言HTML、CSS：学习HTML、CSS基本语法及其应用，对应教材第二章内容。
- HTML标签及其使用方法- CSS选择器、属性及其应用- 网页样式表编写及优化3. 网页制作工具与软件：学习Dreamweaver、Photoshop等软件的基本操作，对应教材第三章内容。
- Dreamweaver的基本操作与使用技巧- Photoshop在网页设计中的应用- 网页图片处理与优化4. 网页设计与制作实践：通过实际案例，培养学生动手能力，对应教材第四章内容。
项目式教学法在《网页设计与制作》课程中的应用
项 目式 教 学 法 在 《 页 设 计 与 制 作 》 程 中 的 应 用 网 课
廖 佩 铮
（ 阳 中 等 职业 学校 ， 苏 丹 阳 丹 江 ２２０ ） １３ ０
摘 要 ： 着 电 子 商务 的 发展 ． 过 网络 展 示 形 象 、 销 随 通 推 产 品 已经 成 为 常 态 。因此 ． 计 和 制 作 网 页也 日益 成 为 当前社 设 会 必 备 的 专 业技 能 。根 据 发 展 需 要 ， 我校 适 时 开 设 了《 页设 网 计 和 制 作 》 程 。 为使 学 生 能 快速 熟 练 掌握 这 门技 能 ． 校 积 课 我 极 尝 试 项 目教 学 法 ， 行 “ 作 室 ” 式 项 目教 学 法 ． 课 堂教 推 工 模 使 学与 社 会 实践 有 机 对 接 ．较 好 地 促 进 了 学 生 网 页设 计 制 作 能
的 产 品 为 目的 的 任务 在 《 页 设 计 与制 作 》 程 中 ， 主 要 把 一 个 理 制 定 工 作 计 划 和 工 作 安 排 ２项 目任 务 的 分 解 ． 为将 项 目实 施 到 位 ， 充 分 发 挥 每 个 学 生 的 特 长 ， 过 讨 并 通 论 ， 立 项 目小 组 ， 工 作 室 ” 式 需 要 设 计 一 个 总 的项 目经 理 成 “ 模 团 队 ， 责 整 个 项 目的 策 划 、 划 、 工 、 调 工 作 ， 后 再 设 负 规 美 协 然 立 小 的项 目组 ， 立 分 项 目经 理 负 责 制 ． 项 目经 理 考 虑 每 一 设 让 个 学生 各 自的特 点 ， 行 项 目层 次 分项 和 角 色 任 务 的 分 配 ， 进 让 每 一位 学生 溶 人 项 目设 计 的 全 过 程 ．根 据 客 户 和 市场 对设 计 项 目的要 求 。教 师 以 合 作 者 的 形 式 与 每 一 位 项 目经理 共 同 对 各 项 任 务作 如下 的分 配 （） １ 网站 的 策 划 ， 责 整 体 网 站 的构 架 ， 构 ， 责 网 站 的 负 结 负 发 布 ， 请 域 名 等 工 作 ， 集 网 站 的文 字 、 片 材 料 ， 等 ， 申 收 图 等 需 要 和客 户进 行 沟 通 。适 合 组 织 协 调 、 通 能 力 强 的 学 生 ， 般 沟 一 都 由项 目经 理 兼 职 。 （ ） 站 的 美 工 ， 责 网 站 首 页 的版 面 设 计 。 还要 负 责 二 ２网 负 级 、 级 页 面 版 面 的设 计 和 规 划 ， 三 由美 术 功 底 比较 强 、 面 设 平 计 软件 学 得 相 对 比较 好 的学 生 胜 任 （） ３ 网站 的 动 画 制 作 ， 责 网站 的 动 画 和 广 告 条 的 制 作 。 负 由Ｆａｈ Ｐ ｏｏｈ ｐ ｌｓ 、ｈｔｓｏ 等软 件 学 得 相 对 比较 好 的学 生 胜 任 。 （） ４ 网站 数 据 库 的制 作 ， 责 网站 的数 据 库 的 制作 。 动 态 负 网 站 的制 作 离 不 开 网 站 数 据 库 的 制 作 ， 由数 据 库 软件 学 得 较 好 的 同学 胜 任 ， 熟 悉 数 据 库 与 网 页结 合 的技 术 。 其 （ ） 站 的 制 作 ， 责 网 站 的 制 作 、 成 。 由Ｃ Ｓ Ｈｔ ｌ ５网 负 完 Ｓ、 ｍ 、 Ｊｖｓｒ ｔＤ ｅｍ ｅｖｒ ａａｃｉ 、 ｒａ ｗ ａ ｅ等语 言 学 得较 好 的 学生 胜 任 。 ｐ 通 过 实施 的过程 ，学生 可 以把 所 学知 识 点 串联 起 来 ． 并 运 用 到 具 体 的项 目实 施 中 。这 样 就 能 很 好 地 将 理 论 和 实 践 结 合 起 来 ， 学 生 体 验 到 成 功 的 快 乐 ， 验 到 团 结 合 作 让 体 的 快 乐 。在 实 施 阶 段 ． 师 主 要 营 造 学 习 氛 围 、 设 学 习 情 教 创 境 ， 织 和 引 导 教 学 过 程 。 当 学 生 在 完 成 任 务 过 程 中 碰 到 组 困 难 时 ， 予 具 体 的 帮 助 ． 师 更 多 的 是 学 生 学 习 的 组 织 给 教 者与 引导者 。
网页设计与制作课程整体教学设计
六、教学效果
校内督导评价
潍坊职业学院教学督导室主任周希华教授： 信息工程学院的《网页设计与制作》课程是一门实践
课程设计理念与思路
一是以真实的项目为载体重构和序化 教学内容，而不是按照传统的原理、 实验、实训的内容进行教学；
二是在课程教学过程中开放性地引入 企业工作流程、行业标准和企业主流 技术；
三是将网页制作相关职业岗位的典型 工作过程作为组织教学内容的基础；
四是以启发学生主观能动性和培养学 生的自主学习能力作为课程教学的着 力点。
二、教学内容—教学内容的组织与安排
基于工作过程设计教学内容 结合网页设计与制作的基本特点和学生的学习认知规律 ，打破原有的知识体系结构，按工作过程重组、序化教学 内容。根据专业培养目标和课程培养目标，课程组联合企 业专家对不同的岗位工作任务进行细化、归纳，设计了7个 学习情境，每个学习情境按照工作过程，又分成若干个工 作任务，将所有知识点融入工作任务的讲解中，从简单到 复杂、从入门到深化进行科学安排，循序渐进的实现教学 目标，课程内容与项目开发内容一致，理论与实践一体化 ，实现学习和工作的深度融合。
作品展示个人自评、小组点评、教师 点评、用户点评。
学 结 合
三、教学方法与手段—教学模式设计与创新
教学方法设计
项目 教学法
任务驱 动教学
法
案例 教学法
教学 方法
案例 教学法
案例 教学法
启发 教学法
三、教学方法与手段—教学手段
第13课《制作框架网页》教案
在本次《制作框架网页》的教学中，我发现学生们对于框架网页的概念和实际操作表现出很大的兴趣。他们很乐意探索如何将一个网页分割成多个部分，并且为每个部分加载不同的内容。这一点让我感到很欣慰，因为兴趣是学习最好的老师。
课堂上，我尝试通过实际案例和互动讨论的方式，让学生们更好地理解框架网页的优缺点以及在实际生活中的应用。从学生的反馈来看，这种方法是比较有效的，他们能够更快地掌握<frameset>和<frame>标签的使用，并且能够提出一些关于框架网页设计的创意。
二、核心素养目标
本节课旨在培养学生以下核心素养：
1.信息意识：通过学习制作框架网页，使学生能够主动探索网络信息，增强信息检索、筛选和整合能力；
2.计算思维：培养学生运用HTML语言构建网页框架，解决问题，提高逻辑思维和程序设计能力；
3.创新思维：鼓励学生在制作框架网页过程中，发挥创意，设计独特页面布局，提升创新意识和能力；
第13课《制作框架网页》教案
一、教学内容
第13课《制作框架网页》教案，教学内容源自教材《信息技术》六年级下册第五章第三节。本节课主要内容包括：
1.理解框架网页的概念及作用；
2.学习使用HTML标签创建框架集和框架；
3.掌握在框架中加载不同网页内容的方法；
4.了解框架网页的优缺点及适用场景；
5.实践操作：制作一个简单的框架网页，包含左右两个框架，分别显示不同内容。
-框架网页优缺点：通过对比分析，让学生明确框架网页在提高页面加载速度和便于维护的优点，以及不便于搜索引擎抓取等缺点。
2.教学难点
-理解框架集与框架之间的关系，并能灵活运用；
-掌握如何在框架中实现页面跳转和内容更新；
-解决框架网页在不同浏览器上的兼容性问题；
网页设计与制作教学大纲
《网页制作及设计》教学大纲学时：72 学时课程类别：专业必修课适用专业：软件技术一、课程的性质及任务课程的性质：本课程是一门专业基础课，要求学生掌握HTML、css和dreamweaver制作网页的知识和技术，同时为后续课程的学习奠定基础。
课程的任务：通过本课程的学习，使学生了解网站开发的流程，掌握HTML和CSS技术实现网页的构建和美化，并用dreamweaver CS5工具实现网页的制作。
前导课程：计算机应用基础后续课程：Javascript、 Java Web组件编程等二、教学基本要求本课程以《计算机应用基础》课程为基础，通过本课程的学习，应使学生掌握网页制作的基本方法，掌握HTML、CSS等网页基础编程知识，并使用主流工具Dreamweaver CS5进行网页制作。
三、教学条件多媒体教室，安装Adobe Dreamweaver CS5的一体化实训室四、教学内容及学时安排（一）优秀网页赏析教学时数：4教学目标：1.理解网站相关的概念。
2.了解网页的基本组成元素3.理解网站的主题定位，风格和网站布局。
4.制作第一个简单的静态网页教学重点难点：1. 理解网站的定位和风格2、学习模仿网页的色彩搭配2. 分析网站的布局3. 能模仿制作一个简单网页。
教学方法：案例演示、理论讲解教学案例：海尔集团网站（企业类）、携程旅游网（旅游类）、中国大众体育网（体育类）、新东方教育（教育类）、往届优秀毕业设计答辩系统、一个简单的静态网页理论教学内容：1. 不同行业网站赏析2. 网页及网站的概念和术语。
3. 网页组成元素。
4. 网站的策划及设计原则。
5. 网站的开发流程6. 应用HTML、CSS制作第一个简单静态网页实践教学内容：1.第一个静态网页实验目的：锻炼学生学会使用记事本编辑静态网页，使学生熟悉HTML标记语言和认识HTML语言的结构；提升学生学习兴趣和自信。
实验要求：要求学生会使用HTML搭建网页架构；在合适位置插入CSS代码并体会使用HTML制作网页的方法。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
word格式文档长汀职业中专学校教案科目：《电商网页制作》计算机组：张开秀班级：15电商3、4班项目一初始dreamweaver8和建立站点项目二 制作网站首页任务描述：上一个项目中，创建了“幽幽我心的个人网站”。
本项目将在这个站点中进行首页内容的制作，学习如何在网页中添加文本和图像，使用CSS 设置文本、图像和页面的样式。
任务完成后效果如图所示：本项具体的教学过程共分为以下五个方面的任务：任务一 添加首页文本（4课时）任务二编辑文本样式（4课时）任务三添加图像（4课时）任务四创建与应用CSS美化网页（4课时）任务五使用代码制作图文网页（4课时）任务一添加首页文本一、提出任务1．任务目标完成首页文本内容。
2. 解决的问题通过完成本任务学习修改网页标题，在网页中添加文本，分段换行和段内换行，输入连续空格，保存和预览网页等知识。
3. 本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：使用站点管理功能创建站点，在文件面板中创建和打开首页文件。
二、教学目标1. 知识目标⑴掌握修改网页标题。
⑵掌握输入网页文本内容的方法。
⑶掌握网页编辑中三种不同换行方式的区别。
⑷了解在文档窗口中输入连续空格的几种方法。
⑸熟悉保存和预览网页的方法。
2. 能力目标掌握添加和编辑网页文本的基本操作，能够根据具体需求添加网页文本内容；通过参加科学探究活动，具有初步添加和编辑网页文本的能力，并加深对网页文本重要性的理解。
3. 情感目标通过分组完成任务，提高自主学习和协作学习的能力，培养团队精神。
三、教学分析与准备1. 教学重点⑴修改网页标题。
⑵输入网页文本内容的方法。
⑶在文档中对文本分段换行和段内换行，输入连续空格。
2．教学难点⑴网页编辑中三种不同换行方式的区别。
⑵在文档窗口中输入连续空格的几种方法。
3. 教学方法任务驱动学习和协作学习、探究学习相结合。
4. 课时安排4课时。
5. 教学环境多媒体网络教室。
四、教学过程（组织课堂、复习知识、教师引领完成任务占1学时；举一反任务二编辑文本样式一、提出任务1．任务目标完成首页文本样式设置，添加水平分隔线与列表。
2. 解决的问题本任务通过设置首页文本样式，学习文本样式设置与应用，修改文本样式，添加水平分隔线与列表知识。
3. 本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：输入文本内容的方法，段内换行与划分段落方法，输入连续空格的方法。
二、教学目标1. 知识目标⑴掌握文本样式设置与应用。
⑵掌握修改文本样式。
⑶掌握重命名文本样式。
⑷掌握添加水平分隔线与列表。
2. 能力目标能够根据具体需求进行文本各种属性及样式的编辑与设置，并提高学生自主学习、协作学习和知识迁移的能力。
3. 情感目标通过教师引导学生主动参与学习，使学生学会使用探求性学习方法获取新知识，激发学习本课程的兴趣，增强学好本课程的信心。
三、教学分析与准备1. 教学重点⑴文本样式的设置、应用及修改。
⑵添加水平分隔线与列表。
2．教学难点文本样式的设置、应用及修改。
3. 教学方法任务驱动学习、协作学习和探究学习相结合4. 课时安排4课时。
5. 教学环境多媒体网络教室四、教学过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学任务三添加图像一、提出任务1．任务目标为首页添加图像内容。
2. 解决的问题本任务通过为首页添加图像内容，学习在网页中插入图像和编辑图像的方法。
3. 本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：在网页中输入文本内容。
二、教学目标1. 知识目标⑴掌握使用插入栏插入图像。
⑵掌握使用菜单栏插入图像。
⑶掌握使用Ctrl+Alt+I组合键插入图像。
⑷掌握使用文件面板插入图像。
⑸掌握编辑图像的方法。
2. 能力目标能够根据具体情况在指定位置灵活高效地插入图像并进行必要的编辑。
3. 情感目标通过教师引导学生主动参与学习，使学生学会使用探求性学习方法获取新知识，激发学习本课程的兴趣，增强学好本课程的信心。
三、教学分析与准备1. 教学重点⑴插入图像的各种方法。
⑵图像的编辑操作。
2．教学难点图像编辑的方法。
3. 教学方法任务驱动学习、协作学习和探究学习相结合。
4. 课时安排4课时。
5. 教学环境多媒体网络教室四、教学过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学选择“插入”栏“常用”类别中的任务四创建与应用CSS美化网页一、提出任务1．任务目标使用CSS美化网页。
2．解决的问题本任务通过为对首页进行美化，学习应用CSS样式。
3．本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：在网页中输入文本内容、插入图像及水平线。
二、教学目标1. 知识目标⑴了解CSS样式的作用与特点。
⑵掌握使用CSS设置文本样式。
⑶掌握使用CSS设置背景样式。
⑷掌握使用CSS设置列表样式。
⑸掌握使用CSS设置水平线样式。
2. 能力目标能够使用CSS样式面板进行样式的设置，区分使用“类”样式与“标签”样式。
通过帮助或搜索引擎等查询学习过程中出现的的概念和定义，掌握获得相关信息的方法。
3. 情感目标正确看待自己，合理评价他人。
三、教学分析与准备1. 教学重点⑴ CSS样式的设置。
⑵“类”样式与“标签”样式的区别。
2．教学难点“类”样式与“标签”样式的区别。
3. 教学方法提出任务并带领学生进行分析，通过分析形成解决问题的思路，通过提醒化解解决问题过程中遇到的问题，通过举一反三拓展对知识点的认识与理解。
4. 课时安排4课时。
5. 教学环境多媒体网络教室。
四、教学过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学时。
）任务五使用代码制作图文网页一、提出任务1．任务目标使用HTML代码制作一个图文网页“唐诗赏析”。
2. 解决的问题通过完成本任务，学习使用HTML代码为网页添加图像、文本等元素并设置其属性。
3. 本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：在设计视图中为网页添加文本、图像等元素并设置属性。
二、教学目标1. 知识目标⑴掌握使用HTML代码在网页中插入文本。
⑵掌握使用HTML代码在网页中插入列表。
⑶掌握使用HTML代码在网页中插入图像。
⑷掌握使用HTML代码在网页中插入水平线。
⑸掌握使用HTML代码在网页中创建CSS样式。
⑹掌握使用HTML代码设置文本等元素的属性。
2. 能力目标能够使用HTML代码制作图文网页，并学会使用HTML代码设置图像、文本、水平线的属性。
3. 情感目标培养学生勤于探索、主动学习的意识，树立将来成为网页制作专业技术人员的信心。
三、教学分析与准备1. 教学重点⑴使用HTML代码插入文本、图像和水平线。
⑵使用HTML代码设置网页元素属性。
2．教学难点使用HTML代码设置网页元素属性。
3. 教学方法任务引领学习、自主学习、协作学习和探究学习相结合，通过几种教学方法的运用，不仅让学生掌握相关知识，同时提高学生的学习能力。
4. 课时安排4课时。
5. 教学环境多媒体网络教室。
四、教学过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学项目三制作“作品展示”网页本项目通过“创建表格”、“编辑表格”、“添加表格内容”和“建立超级链接”四个任务，完成“幽幽我心的个人网站”中的“作品展示”网页的制作，学习如何使用表格来进行网页的布局。
任务完成后效果如图所示：本项具体的教学过程共分为以下五个方面的任务：任务一创建表格（4课时）任务二编辑表格（4课时）任务三添加表格内容（4课时）任务四建立超级链接（6课时）任务五使用代码制作表格网页（6课时）任务一创建表格一、提出任务1．任务目标完成“作品展示”网页中表格的创建。
2．解决的问题通过在“作品展示”网页中创建表格理解表格布局页面的重要性，学习网页的布局分析，掌握创建表格的几种方法。
3．本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：在页面添加文本，设置文本格式，插入图像，设置图像格式。
二、教学目标1. 知识目标⑴理解表格在网页设计中的作用。
⑵掌握利用表格布局页面。
⑶掌握创建表格的基本方法。
⑷掌握创建嵌套表格。
⑸掌握在网页中利用表格进行排版。
2. 能力目标掌握表的创建和编辑，能够根据具体需求灵活应用表格，并能利用表格进行页面布局和排版。
3. 情感目标⑴通过参与作品评价，提高学生的审美能力与鉴别能力。
⑵鼓励学生根据任务需求进行科学合理的设计，提高学生分析问题与解决问题能力。
三、教学分析与准备1. 教学重点⑴理解表格在网页设计中的作用。
⑵分析页面的表格布局。
⑶创建表格的基本方法。
2．教学难点⑴分析页面的表格布局。
⑵创建嵌套表格。
3. 教学方法任务驱动学习、协作学习、探究拓展学习与举一反三相结合。
4. 课时安排4课时。
5. 教学环境多媒体网络教室。
四、学习过程（组织课堂、复习知识、教师引领完成任务占2学时，举一反三占2学时。
）图JYFS3-1图JYFS3-23．制作一个以环保为主题的网页，首先利用已学知识设计栏目和目录结构，创建表格布局网页。
任务二编辑表格一、提出任务1．任务目标编辑已创建成的表格。
2. 解决的问题通过对本单元任务一创建的表格进行编辑，学习更改表格边框或背景颜色，添加、删除行或列，调整行高、列宽及表格大小，拆分或合并单元格。
3. 本任务所涉及原有知识要点完成本任务需要掌握以前学过的利用表格布局页面，创建表格等知识点。
二、教学目标1. 知识目标⑴掌握选择单元格。
⑵掌握选择表格。
⑶掌握设置单元格属性。
⑷掌握设置表格属性。
⑸掌握表格的基本操作：如合并、拆分单元格，添加、删除行或列，调整行高、列宽。
2. 能力目标掌握表格编辑，能够根据具体需求灵活应用表格。
3. 情感目标培养学生用比较分析方法分析问题、解决问题的能力，并使学生具有自主学习能力。
三、教学分析与准备1. 教学重点⑴选择单元格、选择表格。
⑵设置单元格和表格的属性。
⑶表格的基本操作。
2．教学难点单元格和表格属性的区分3. 教学方法任务驱动学习、协作学习、探究拓展学习与举一反三相结合4. 课时安排4课时5. 教学环境多媒体网络教室四、学习过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学图JYFS3-4创建网页“practice3-6.html”，插入一个图JYFS3-6继续创建上一任务作业中以环保为主题的网页，对表格进行相应编辑。
暂不添加表格中的内容。
任务三添加表格内容一、提出任务1．任务目标在“作品展示”网页中添加表格内容。
2. 解决的问题通过在“作品展示”网页的表格中添加内容，学习在表格中添加内容并设置格式。
3. 本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：表格的创建和编辑。
二、教学目标1. 知识目标⑴掌握在单元格中插入图片。
⑵掌握在单元格中设置图片格式。
⑶掌握在单元格中插入文字。