网页设计与制作（Dreamweaver CC）（第4版）教案全套 张加青 任务1-16 网站体验-搜索最喜爱的专业书 -匠心筑梦-发布与维护网站

PAGE\#000MERGEFORMAT001PAGE78计算机应用基础教学参考书（Windows7+Office2010）（第2版）书模块1网页设计基础任务1网站体验—搜索最喜爱的专业书教案1．教学整体设计教学单元名称网页设计基础课时1学时所属章节任务1网站体验—搜索最喜爱的专业书任务描述通过“网站体验—搜索最喜爱的专业书”任务，学会使用浏览器访问网站、在网站内搜索专业图书并收藏网页；理解网页、网站、主页的基本概念，区分静态网页与动态网页；了解网页配色原则与网页设计常用软件，建立对网页设计与制作课程的整体认知，激发专业学习兴趣。任务分析在本任务中，需要完成以下操作：1.使用Edge浏览器访问华信教育资源网（/）；2.在网站内搜索专业图书，进入图书详情页，查看配套素材与教学资源；3.使用浏览器收藏网页，并对收藏进行整理；4.理解网页、网站、主页的基本概念，区分静态网页与动态网页；5.了解网页配色基本原则与网页设计常用软件。教学重点：网页、网站、主页概念；静态网页与动态网页区分；浏览器访问网页、收藏网页实操。教学难点：静态网页与动态网页的本质区别；网页配色搭配原则理解。教学目标知识目标1.理解网页、网站、主页的概念及相互关系；2.掌握静态网页与动态网页的区别，能正确判断网页类型；3.了解网页色彩的分类与配色基本原则；4.认识网页设计常用开发软件与美化工具的用途分工。能力目标1.能够熟练使用浏览器访问网站，正确区分地址栏与搜索框；2.能够在网站内搜索专业图书，进入详情页查看配套资源；3.能够使用浏览器收藏网页，并对收藏进行整理；4.能够依据配色原则初步评价网页的色彩搭配效果。素养目标1.培养规范使用浏览器、善用网络教育资源的信息素养；2.建立网页审美意识，感受网页配色传递的情感与文化；3.激发对网页设计与制作课程的学习兴趣，树立学好专业技能的信心。考核方式过程考核：知识学习与技能掌握情况（30%）小组协作搜索信息、积极参与讨论与分享任务成果（40%）终结考核：教师评价+小组互评+学生自评（30%）教学环境机房计算机配置如下：软件环境—MicrosoftWindows10、Edge浏览器、WPS办公软件、多媒体课件；网络环境——机房可访问互联网；素材资源——华信教育资源网（/）。

2．教学实施过程教学环节教学内容教师活动学生活动教学策略课程思政导入任务1.情境引入：从日常上网浏览网页的场景切入，抛出问题：我们浏览的页面是什么？什么是网站？2.演示体验：教师使用浏览器打开一个网站，引导学生观察网页的组成与跳转；3.明确本节课任务：任务1网站体验——搜索最喜爱的专业书，学会访问网站、搜索图书、收藏网页，认识网页与网站。1.提出问题，启发思考，展示本节课学习任务；2.演示访问华信教育资源网，激发学生学习兴趣；3.明确本节课技能重点：网站访问、图书搜索、网页收藏。1.思考并回答问题，明确本节课学习内容；2.观察教师演示，了解本任务在整门课程学习中的作用。情境导入法、问题驱动法引导学生认识网络是获取知识、提升专业技能的重要渠道，善用优质教育资源，树立自主学习、终身学习的意识。知识讲授与操作演示任务一：网站体验——访问华信教育资源网1.双击Edge浏览器图标，打开浏览器主页；2.地址栏输入网址：/，回车访问华信教育资源网；3.认识浏览器界面：地址栏、搜索框、收藏按钮。任务二：搜索最喜爱的专业书1.在网站搜索框输入“Python程序设计与案例教程”，点击搜索；2.点击图书图片，进入详情页，查看图书简介、可下载素材、教学指南；3.点击收藏按钮，把网页加入收藏夹。1.完整演示网站访问、图书搜索、网页收藏全套操作；2.重点讲解地址栏与搜索框的区别：地址栏输入网址直接访问，搜索框输入关键词检索；3.巡回指导，纠正地址栏与搜索框混淆等常见错误。1.跟随教师同步上机实操，完成网站访问、图书搜索、资源查看、网页收藏；2.观察图书详情页的组成，体验浏览网页的一般过程。演示法、讲解法、任务驱动法通过搜索专业图书，引导学生感受图书与网络资源背后的专业积累，培养尊重知识、热爱专业的品质。任务三：网页与网站基本概念1.网页：又称HTML文档，经互联网传输、由浏览器解析显示的文件；2.网站：相关网页的集合，拥有独立域名，展示信息、提供交互服务；3.主页：输入域名打开的首个网页，是网站内容的索引，依靠超链接跳转；4.网页分类：静态网页内容固定，后缀.html/.htm；动态网页由ASP/PHP/JSP开发，可交互、内容动态变化。任务四：网站配色方案1.色彩分类：无彩色（黑、白、灰），有彩色（红、黄、蓝等）；2.配色原则：①善用单色、对比色、邻近色、同类色；②结合网站类型选择色彩、传递情感；③色彩匹配网站内容与文化氛围；④页面颜色尽量控制在3种以内，避免杂乱。任务五：网站设计常用软件1.开发软件：文本编辑器、Dreamweaver、VSCode、HBuilderX；2.美化工具：AdobePhotoshop、AdobeAnimate。1.讲解理论知识点，对比静态、动态网页，抛出小思考：静态网页不等于页面没有动画；2.结合实例讲解配色要点，强调网页配色的实际作用；3.分别介绍各类软件用途，说明当下主流开发工具。1.听讲、记笔记，理解概念，区分静态、动态两类网页；2.理解网页配色要求，建立网页审美认知；3.认识各类工具，了解工具分工。讲解法、对比教学法、实例分析法优秀的网页设计既要技术过硬，也要审美在线，引导学生追求技术与艺术并重，培养精益求精的工匠精神。练习技能1.实操练习：独立访问华信教育资源网，搜索一本自己最喜爱的专业书，进入详情页查看资源并收藏网页；2.整理收藏夹，对收藏的网页进行重命名、分类；3.小组互助排查：网址输入错误、地址栏与搜索框混淆、收藏不成功等问题；4.拓展练习：访问其他图书网站，对比不同网站的页面风格与配色。1.布置课堂实操任务，明确完成标准；2.机房巡回指导，重点处理共性错误：网址输入错误、混淆地址栏与搜索框、收藏操作不规范；3.收集高频错误，集中演示纠错。1.独立上机完成网站访问、图书搜索与网页收藏；2.遇到网页打不开等问题，自主检查网址输入；3.小组互助练习，交流搜索与收藏技巧。任务驱动法、异质分组合作学习法网络信息检索需要去伪存真，引导学生甄选优质学习资源，培养严谨求实的信息素养。展示作品1.作业提交规范：提交收藏网页的截图或收藏夹页面，命名格式：姓名_任务1_网站体验；2.评价维度：能正确访问华信教育资源网；能搜索到专业图书并进入详情页；完成网页收藏；能说出网页、网站、主页的区别；能判断静态、动态网页；3.学生自查作品，修正网址输入、收藏操作等错误，提交电子教室作业区；4.拓展练习：浏览华信教育资源网其他栏目，了解教材配套资源。1.明确提交格式、质量评价标准；2.检查学生搜索与收藏操作的规范性；3.挑选典型作品用于课堂点评。1.对照评价标准自查搜索与收藏结果；2.规范命名，完成作业提交。实践教学法、自我评价法强化规范提交、有始有终的作业习惯，养成按标准做事的职业素养。评价总结1.课堂作品点评，梳理本节课高频错误：①网址输入错误导致无法访问；②地址栏与搜索框混淆；③网页收藏操作不规范；④混淆静态网页与动态网页。2.知识点回顾：网页、网站、主页概念；静态、动态网页区别；网页配色原则；网页设计常用软件。1.点评典型学生作品，梳理实操共性错误；2.提问引导学生回顾本节课核心概念；3.布置课后作业。1.对照点评反思自己操作中存在的不足；2.巩固网页基本概念，查漏补缺。作品点评法、归纳总结法网站体验是学习网页制作的第一步，打好认知基础才能学好后续设计与制作，培养学生重视基础学习的意识。课后任务课后作业：1.实操作业：访问华信教育资源网，搜索一本感兴趣的专业书籍，打开详情页并收藏网页；2.简答题：①什么是网页？什么是网站？②简述静态网页和动态网页的区别。布置课后作业，说明作业要求。记录作业，课后独立完成。自主探究法引导学生课后善用网络教育资源拓展学习，养成自主学习的习惯。模块2HTML代码任务2体验HTML文档——网页基础教案1．教学整体设计教学单元名称HTML代码课时2学时所属章节任务2体验HTML文档——网页基础任务描述通过“体验HTML文档——网页基础”任务，认识HTML5文档基本结构，区分单标签与双标签，掌握标签属性书写规则；学会使用记事本编写简单HTML网页并保存运行，使用Dreamweaver2021切换代码视图与设计视图编写包含图片、超链接、表格、留言表单的网页；理解网页本质是由HTML代码构成的文档，建立“代码即网页”的工程认知。任务分析在本任务中，需要完成以下操作：1.使用记事本编写“社会主义核心价值观”滚动文字网页（web.html），注意保存类型与.html后缀名；2.使用Dreamweaver2021打开网页文件，切换代码视图与设计视图，修改代码添加二级标题、图片、超链接并F12预览；3.使用Dreamweaver制作留言表单网页（web3.html），运用表格与表单标签实现姓名、联系方式、留言文本域、提交按钮；4.理解HTML5文档基本结构，区分单标签与双标签，掌握标签属性书写规则；5.认识常用HTML标签（标题、段落、图片、超链接、表格、表单等）。教学重点：HTML5文档基本结构；标签属性书写规则；记事本与Dreamweaver编写HTML网页实操；常用基础标签使用。教学难点：区分单标签与双标签；表格标签与表单标签的组合使用；代码保存格式、半角符号规范。教学目标知识目标1.掌握HTML5文档基本结构（doctype、html、head、body）及各区域作用；2.区分单标签与双标签，熟悉标签属性书写规则；3.认识常用HTML标签（标题、段落、图片、超链接、表格、表单、列表等）的功能。能力目标1.能够使用记事本编写简单HTML网页，正确设置保存类型与.html后缀名并运行；2.能够使用Dreamweaver2021切换代码视图与设计视图，编写包含图片、超链接、表格、留言表单的网页；3.能够规范书写HTML标签与属性，排查全角符号、路径错误等常见问题。素养目标1.养成规范书写代码、严谨使用半角符号的职业习惯，树立代码质量意识；2.体会“代码即网页”的工程思想，感受从代码到页面的创造乐趣；3.通过社会主义核心价值观滚动文字网页等案例，增强文化自信与价值认同。考核方式过程考核：知识学习与技能掌握情况（30%）课堂实操编写网页、积极参与调试与互评（40%）终结考核：教师评价+小组互评+学生自评（30%）教学环境机房计算机配置如下：软件环境—MicrosoftWindows10、Dreamweaver2021、记事本、Edge浏览器、WPS办公软件、多媒体课件；网络环境——机房可访问互联网；素材资源——教学示例文件web.html、web2.html、web3.html。

2．教学实施过程教学环节教学内容教师活动学生活动教学策略课程思政导入任务1.回顾旧知：复习上节课网页、网站概念，明确“网页本质是由HTML代码构成的文档”；2.问题驱动：提出问题——网页是如何通过代码实现的？引发好奇；3.任务引出：明确本节课任务——任务2体验HTML文档——网页基础，认识HTML结构、标签，动手编写网页。1.复习网页、网站概念，建立新旧知识联系；2.抛出核心问题，展示本节课学习任务与目标；3.强调本节课技能重点：HTML结构、标签、编写网页。1.回顾旧知识，明确网页与代码的关系；2.思考“代码如何变成网页”，产生学习期待；3.明确本节课学习目标与任务。情境导入法、问题驱动法引导学生认识网页背后是严谨的代码逻辑，体会“万丈高楼平地起”，夯实基础、重视规范，树立严谨求实的工匠精神。知识讲授与操作演示任务一：记事本编写HTML网页1.打开记事本，输入HTML代码，制作“社会主义核心价值观”滚动文字网页（web.html）；2.文件保存：文件名web.html，保存类型选择“所有文件”，编码UTF-8；3.双击web.html，浏览器打开预览滚动文字效果。任务二：Dreamweaver修改网页代码1.启动Dreamweaver2021，打开web2.html，切换至代码视图查看HTML5结构；2.修改代码，添加二级标题、图片（img）、超链接（a）；3.切换设计视图，按F12保存并预览（注意图片路径）。任务三：制作留言表单网页1.Dreamweaver打开web3.html，切换代码视图；2.在<body>内添加表格（table/tr/td）与表单（form/input/textarea）代码，实现留言页面：姓名输入框、联系方式输入框、文本留言域、提交按钮；3.保存文件，F12浏览网页布局效果。1.完整演示记事本编写、保存、预览网页全过程，着重强调保存类型、.html后缀名与半角符号；2.演示DW代码视图与设计视图切换，讲解img图片标签、a超链接标签用法，提醒图片路径问题；3.讲解table/tr/td、form/input/textarea等表单标签含义与控件作用；4.巡回指导，纠正标签写错、全角符号、路径错误等常见错误。1.跟随实操，输入HTML代码，完成保存与浏览器预览，观察marquee滚动效果；2.上机操作DW，切换视图、修改代码、F12预览网页效果；3.复制编写表格表单代码，完成留言页面并预览布局。演示法、讲解法、任务驱动法通过编写“社会主义核心价值观”滚动文字网页，将价值引领融入代码实践；强调半角符号、后缀名等细节，培养精益求精、一丝不苟的工匠精神。任务四：HTML5文档基础结构HTML5标准结构：<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title></head><body></body></html>说明：doctype声明文档类型；head头部存放网页配置（标题、字符集等）；body存放页面显示内容。任务五：标签分类与属性规则1.标签分类：双标签（开始+结束，如<h1></h1>）；单标签（仅开始，如<img/>、<br>）；2.属性规则：①属性写在开始标签内；②标签推荐小写；③多属性空格隔开；④属性无先后顺序；⑤内容可换行；⑥全部使用半角字符，禁止全角符号。任务六：常用HTML标签1.头部：<title>标题、<meta>元信息、<link>；2.页面基础：<body>、<p>段落、<br>换行、<hr>水平线；3.多媒体链接：<img>图片、<a>超链接；4.标题：<h1>~<h6>，数字越小级别越高；5.列表、表格<table><tr>行<td>单元格；6.表单：<form><input><textarea><select>；7.其他：<marquee>滚动、<audio>音频、<video>视频。1.板书讲解HTML5各部分作用，区分head与body区域；2.举例对比单、双标签，重点强调半角符号，指出学生常见错误；3.逐个讲解常用标签功能，结合前面任务案例对照说明。1.理解文档整体结构，做好笔记；2.区分单双标签，熟记属性书写规范；3.认识各类标签功能，结合任务理解标签实际效果。讲解法、对比教学法、实例分析法标准结构与规范属性是网页的“语法”，正如社会运行需要规则；引导学生树立规则意识，理解“无规矩不成方圆”，在代码规范中涵养法治精神。练习技能1.实操练习：使用记事本编写HTML网页，设置网页标题，添加h2标题、一段段落文字、一张图片、一个超链接，保存为.html并浏览器预览；2.对照任务要求自查：文档结构是否完整、标签是否闭合、是否使用半角符号；3.小组互助排查：标签写错、全角符号、图片路径错误、后缀名错误等问题；4.拓展练习：尝试用Dreamweaver代码视图编写同一网页，对比两种方式。1.布置课堂实操任务，明确完成标准（结构完整、标签规范、能正常预览）；2.巡回指导，重点处理共性错误：全角符号、标签未闭合、路径错误；3.收集高频错误，集中演示纠错。1.独立上机完成HTML网页编写与预览；2.遇到报错自主检查标签与符号；3.小组互助，交流编写与调试技巧。任务驱动法、异质分组合作学习法代码调试需要耐心与细致，引导学生正视错误、在排查中培养抗挫折能力与严谨求实的科学态度。展示作品1.作品提交规范：提交web.html、web2.html、web3.html等网页文件或预览截图，命名格式：姓名_任务2_HTML基础；2.评价维度：HTML5结构正确完整；标签使用规范（单双标签、半角符号）；网页能正常预览；表单布局合理；3.学生自查作品，修正结构、标签、符号等错误，提交电子教室作业区；4.拓展：浏览他人作品，对比不同标签组合产生的页面效果。1.明确提交格式与质量评价标准；2.检查学生代码结构、标签规范与预览情况；3.挑选典型作品用于课堂点评。1.对照评价标准自查网页结构与标签；2.规范命名，完成作业提交。实践教学法、自我评价法规范提交、有始有终，养成按标准交付成果的职业素养与责任意识。评价总结1.课堂作品点评，梳理本节课高频错误：①保存类型与后缀名错误；②全角符号；③标签未闭合或写错；④图片路径错误；2.知识点回顾：HTML5文档结构；单/双标签；标签属性规则；常用HTML标签；记事本与Dreamweaver两种编写方式。1.点评典型学生作品，梳理实操共性错误；2.提问引导学生回顾核心概念与标签；3.布置课后作业。1.对照点评反思操作不足；2.巩固HTML结构与标签知识，查漏补缺。作品点评法、归纳总结法从“能运行”到“写规范”，引导学生追求代码质量而非仅完成任务，培养标准意识与持续改进的职业精神。课后任务课后作业：1.实操作业：使用记事本编写HTML网页，设置网页标题，添加h2标题、一段段落文字、一张图片、一个超链接，保存并预览；2.简答题：①简述HTML5文档的基本结构；②标签属性书写有哪些规则？布置课后作业，说明作业要求。记录作业，课后独立完成。自主探究法引导学生课后善用网络资源巩固HTML知识，养成自主探究、持续学习的习惯。模块3Dreamweaver初级应用任务3匠心筑梦——创建与管理本地站点教案1．教学整体设计教学单元名称Dreamweaver初级应用课时2学时所属章节任务3匠心筑梦——创建与管理本地站点任务描述通过“匠心筑梦——创建与管理本地站点”任务，认识DreamweaverCC工作界面；完成本地站点“匠心筑梦”的创建与配置；掌握站点内文件夹、网页文档新建、保存、移动、删除等基础文件管理；学会页面属性设置、网页浏览器预览，掌握站点的导入、导出备份操作，建立网站项目规范化管理意识。任务分析在本任务中，需要完成以下操作：1.认识DreamweaverCC完整工作界面，区分设计、代码、拆分、实时视图；2.创建本地站点“匠心筑梦”，指定D:\jxzm作为站点根目录；3.在文件面板新建images等资源子文件夹，分类管理素材；4.新建HTML5空白网页index.html，掌握网页保存、F12浏览器预览；5.设置页面属性：外观（CSS）、标题/编码，修改页面背景、页边距、网页标题；6.掌握站点文件移动、删除；掌握站点导出（*.ste）备份操作，理解ste文件仅保存站点配置。教学目标知识目标1.熟悉DreamweaverCC工作界面各面板功能，理解四种文档视图的适用场景；2.理解本地站点、站点根目录概念，明白站点对网页路径管理的意义；3.认识页面属性对话框各个分类，理解UTF‑8网页编码的作用；4.了解站点导出.ste文件作用，区分站点配置文件与网页素材文件。能力目标1.能够新建、配置本地站点，熟练使用“文件”面板管理站点内文件夹与网页；2.会新建HTML5网页，完成网页保存、F12浏览器预览；3.能够设置页面外观、页边距、网页标题、编码等页面属性；4.掌握站点导出备份操作，会对站点内文件进行复制、移动、删除操作。素养目标1.树立网页项目规范化管理习惯，素材分类建文件夹，文件命名尽量使用英文；2.培养严谨细致的工匠精神，养成随时保存网页、备份站点的职业习惯；3.理解规范的站点管理是网站开发的第一步，建立岗位工程化思维。考核方式过程考核：知识学习与技能掌握情况（30%）小组协作搜索信息、积极参与讨论与分享任务成果（40%）终结考核：终结考核：教师评价+小组互评+学生自评（30%）教学环境机房计算机配置如下：软件环境—MicrosoftWindows10、DreamweaverCC2021、PhotoshopCC、WPS办公软件；素材资源——任务3对应素材资源包。

2．教学实施过程教学环节教学内容教师活动学生活动教学策略课程思政导入任务1.情境引入：完整网站由大量网页、图片、音视频素材组成，如果文件随意存放，会出现图片不显示、链接失效等故障。2.演示对比：不建站点直接编辑网页vs使用本地站点管理网页的效果差异。3.明确本节课任务：创建“匠心筑梦”本地站点，熟悉DW软件界面，学会站点与网页基础管理操作。1.展示文件乱存放导致图片无法加载的故障案例，说明站点的重要价值；2.解读“匠心筑梦”项目背景；3.明确本节课技能重点：站点创建、文件面板操作、页面属性、站点备份。1.观察故障案例现象，思考网页文件管理的重要性；2.明确学习任务，了解本任务是整个后续网页制作项目的基础。情境导入法、案例演示法搭建站点如同工匠开工前整理工具库房，分类规整材料，才能保障后续生产有序开展，培养规范化、标准化工作意识。知识讲授与操作演示任务一：认识DreamweaverCC工作界面1.启动DW，认识菜单栏、文档工具栏、文件面板、属性面板、插入面板；2.演示设计、代码、拆分、实时视图四种视图；简单介绍标尺、辅助线、网格。任务二：创建“匠心筑梦”本地站点1.D盘新建jxzm文件夹，复制renwu3全部素材到此目录；2.【站点】→【新建站点】，站点名称：匠心筑梦，本地站点文件夹选择D:\jxzm，保存；观察文件面板出现站点目录。任务三：站点内文件与文件夹管理1.文件面板右键新建images子文件夹，把图片素材移入images；2.【文件】→【新建】，新建HTML5网页index.html，保存到站点根目录；3.演示文件移动、删除操作，提醒移动文件弹出更新链接对话框的处理方式。任务四：设置页面属性与网页预览1.打开jingji.html，打开页面属性；设置外观（CSS）背景颜色、上下左右页边距为0；设置标题/编码，网页标题“德技并修”；2.按F12浏览器预览网页效果。任务五：导出站点备份1.【站点】→【管理站点】，选中匠心筑梦，导出站点，保存匠心筑梦.ste；重点强调：ste文件只保存站点配置，不包含网页图片素材，作业提交要上交完整站点文件夹，不是仅提交ste文件。1.分步完整演示软件界面、站点创建全套操作；2.重点演示页面属性设置，讲解UTF8编码防止中文乱码；3.着重辨析易错点：导出ste文件≠全部网站素材；网页、图片必须放在站点根目录内部；文件名尽量不用中文。4.演示F12预览操作，强调不能只看DW设计视图效果。1.跟随教师操作，熟悉各个面板位置；2.观察文件面板目录变化；3.切换代码/设计视图，观察页面属性修改对应的HTML、CSS代码变化；4.理解ste备份文件的作用与局限。演示法、讲解法、对比教学法网站开发前期的基础设置如同工匠打地基，基础规范做好，后面制作才会少出故障，培养学生重视基础、严谨务实的工匠精神。练习技能1.实操练习：在D盘建立jxzm文件夹，复制任务素材，在DW中创建“匠心筑梦”本地站点；新建images文件夹并归类图片素材。2.独立实操：新建index.html网页；打开jingji.html，完成页面外观、页边距、网页标题、编码设置；F12预览页面。3.完成站点导出备份，生成匠心筑梦.ste；练习文件移动、删除操作。4.小组互助排查故障：站点路径选错、素材不在站点内、网页中文乱码等问题。1.布置课堂实操任务，明确完成标准；2.机房巡回指导，重点处理共性错误：站点文件夹选错、网页没有保存到站点内、使用中文文件名、混淆ste配置文件和站点源码；3.收集高频错误，集中演示纠错。1.独立上机完成站点创建与网页基础操作；2.出现网页乱码、素材不显示，对照教材自主排查路径、编码设置；3.小组互助调试，多次F12预览验证页面。任务驱动法、异质分组合作学习法站点创建操作步骤多，需要细心逐项核对参数，遇到报错耐心排查，培养学生不怕繁琐、严谨细致的职业品质。展示作品1.作业提交规范：提交完整站点文件夹，命名格式：姓名_任务3_创建管理本地站点2.评价维度：站点创建成功；images素材文件夹建立，图片归类存放；index.html网页保存在站点根目录；页面属性设置正确，浏览器预览无中文乱码；完成站点导出备份；文件命名规范。3.学生自查作品，修正路径、编码等错误，提交电子教室作业区；4.拓展练习：尝试新建text子文件夹。1.明确提交格式、质量评价标准，再次强调：不要只提交ste导出文件；2.检查学生站点目录结构规范性；3.挑选典型作品用于课堂点评。1.对照评价标准自查站点与网页；2.规范命名，完成作业提交。实践教学法、自我评价法强化网页开发岗位规范意识，项目素材分类归档，养成做事有始有终的岗位职业素养。评价总结1.课堂作品点评，梳理本节课高频错误：①站点根目录文件夹选择错误；②图片素材没有放入站点内部文件夹；③网页编码不是UTF8出现中文乱码；④误以为导出ste文件就是全部网站文件；⑤网页保存路径不在站点内。2.知识点回顾：DW四种视图；本地站点概念；文件面板管理；页面属性设置；F12预览；站点导出备份。1.点评典型学生作品，梳理实操共性错误；2.提问引导学生回顾本节课核心技能；3.布置课后拓展任务。1.对照点评反思自己作品存在不足；2.巩固站点创建、网页基础操作相关技能。作品点评法、归纳总结法本任务是后续全部网页制作的基础，规范做好站点管理，才能完成后续匠心筑梦整套网站项目。课后任务课后拓展：在电脑另外磁盘位置，练习导入.ste站点配置文件，对比观察导入之后站点文件面板的变化，体会站点备份的作用。布置课后拓展任务，说明任务要求。记录任务，课后独立完成练习。自主探究法引导学生建立项目备份意识，养成软件开发岗位备份项目的良好习惯。模块3Dreamweaver初级应用任务4匠心筑梦——文本的设置教案1．教学整体设计教学单元名称Dreamweaver初级应用课时2学时所属章节任务4匠心筑梦——文本的设置任务描述通过“匠心筑梦——文本的设置”任务，学会并掌握文本对象的插入、编辑及文本格式设置，规范处理文本内容，以实现准确、快捷传递信息的目标。任务分析在本任务中，需要完成以下操作：1.掌握普通文本、空格、特殊符号及日期的多种输入方法；2.掌握文本分段、强制换行，理解<p>段落标签、<br>换行标签用法；3.掌握Dreamweaver属性面板CSS类别设置文本格式，理解行内样式的应用逻辑；4.学会段落标题、内缩区块、有序/无序列表的段落格式设置；5.掌握水平线插入操作，理解<hr>标签属性设置；6.完成web1.html（淬技逐光）、web2.html（出彩人生）两个页面完整制作、保存与预览。教学目标知识目标1.了解网页文本元素作用，掌握网页空格、特殊字符、日期的输入方式；2.理解段落标签<p>、换行标签<br>功能，区分段落换行与强制换行；3.认识属性面板CSS类别与HTML类别，理解行内CSS样式生成原理；4.掌握标题、列表、水平线对应的HTML标签基础属性。能力目标1.能够将外部Word素材复制粘贴到网页，正确处理网页连续空格，完成段落首行缩进；2.会使用属性面板完成字体、字号、颜色、对齐等文本CSS格式设置；3.能够完成标题、无序列表、水平线的插入与属性修改；4.独立完成“淬技逐光”“出彩人生”两个网页制作、保存、浏览器预览。素养目标1.养成网页文本排版规范意识，注重网页信息可读性，培养严谨细致的网页制作习惯；2.结合“淬技逐光、出彩人生”案例，感悟工匠精神、技能成才理念；3.遇到标签、排版错误主动排查，养成自主调试、小组互助协作的职业素养。考核方式过程考核：知识学习与技能掌握情况（30%）小组协作搜索信息、积极参与讨论与分享任务成果（40%）终结考核：教师、小组、自我总结评价（30%）教学环境机房计算机配置如下：软件环境—MicrosoftWindows10、DreamweaverCC2021、PhotoshopCC、WPS办公软件；素材资源——renwu4任务素材包（web1文本素材.docx、web2文本素材.docx），沿用任务3已经建好的“筑梦青春”本地站点。

2．教学实施过程教学环节教学内容教师活动学生活动教学策略课程思政导入任务展示本任务成品效果：web1.html“淬技逐光”、web2.html“出彩人生”页面预览；2.明确本节课任务：在已有“筑梦青春”站点基础上完成两个案例网页，掌握网页文本各类编辑排版操作。1.展示成品网页效果图，对比排版混乱与排版规范网页的阅读体验；2.解读案例“淬技逐光、出彩人生”技能成才主题；3.明确本节课实操任务与学习重点。1.观察成品网页效果，感受规范文本排版对信息传递的作用；2.明确学习任务，思考网页文本和Word文档排版的区别。知识讲授与操作演示任务一：网页文本基础输入与处理1.打开“筑梦青春”站点，新建text、other子文件夹；新建web1.html，设置页面背景颜色#EDFAE9、网页标题“淬技逐光”；2.Word文档素材复制粘贴，讲解选择性粘贴；3.网页多种空格输入方法；4.区分段落换行与强制换行；5.特殊符号、版权符号、日期插入操作。任务二：使用属性面板设置文本CSS格式1.管理字体堆栈，添加黑体；设置标题字体、字号、颜色、居中对齐，认识自动生成的行内样式；2.插入水平线<hr>，讲解属性面板设置与代码视图修改颜色、宽度属性；任务三：制作web2.html出彩人生页面1.新建web2.html；2.设置标题格式；3.文本转为无序列表，修改列表type属性；4.插入并设置水平线；保存，F12预览网页。1.分步完整演示案例web1操作流程，重点演示网页空格输入，强调Word与网页换行的差异；2.演示属性面板CSS类别设置文本格式，切换代码视图展示自动生成行内样式；3.演示无序列表、水平线操作，说明部分属性需要切换代码视图修改；4.演示web2案例关键步骤，巡视，提示易错点。认真观看教师演示，记录关键操作要点；2.跟随演示完成文件夹、web1网页创建；3.观察代码视图，理解操作对应的HTML标签与CSS行内样式。演示法、讲解法、对比教学法网页排版如同技能打磨，细节决定呈现效果，培养学生严谨细致、精益求精的工匠精神，重视每一处文本、标签细节。练习技能1.实操练习：完成web1.html“淬技逐光”全部制作；重点练习空格、段落换行、文本CSS格式设置、水平线；2.独立完成web2.html“出彩人生”页面制作，练习无序列表设置；3.小组互助：遇到排版错乱、空格无效、标签错误，组内互助排查；4.保存文件，使用F12浏览器预览页面效果。1.布置课堂实操任务，明确完成标准；2.机房巡回指导，重点关注：连续空格无效、换行混淆、字体未添加堆栈、水平线颜色看不到等高频问题；3.收集共性错误，集中统一纠错演示。1.独立上机实操完成两个网页案例；2.遇到问题先自主对照教材排查，再求助同伴、教师；3.反复预览浏览器效果，修正排版问题。任务驱动法异质分组合作学习法在调试网页错误过程中培养学生攻坚克难、不怕反复修改的职业品质，小组互助培育团队协作意识。展示作品1.作业提交规范：提交完整站点文件夹，命名格式“姓名_任务4_文本设置”；2.评价维度：站点文件夹结构规范；文本排版效果；标签使用正确性；网页预览效果；3.学生自查作品，修正错误，提交电子教室作业区；4.学有余力学生拓展练习：尝试有序列表、插入日期功能。1.明确作品提交格式、质量评价标准；2.巡视检查学生站点文件规范性；3.挑选典型作品用于课堂点评。1.对照评价标准自查网页，修正排版、文件保存问题；2.规范命名，完成作业提交。实践教学法、自我评价法强调网页开发行业文件规范，培养学生规范提交成果、做事有始有终的岗位职业素养。评价总结1.课堂作品点评，展示优秀作品，梳理共性错误：①直接敲多个空格无效；②混淆Enter段落换行和Shift+Enter强制换行；③水平线颜色设计视图看不到，需要浏览器预览；2.知识回顾：空格、<p>、<br>标签；属性面板CSS行内样式；无序列表；<hr>水平线标签；3.总结网页文本排版和Word排版的核心区别。1.点评典型学生作品，梳理本节课高频易错点；2.提问引导学生回顾核心标签、关键操作；3.总结知识点，布置课后拓展任务。1.对照点评反思自己作品存在的不足；2.回顾本节课HTML标签与操作要点，巩固知识。作品点评法、归纳总结法网页文字不仅传递信息，也传递价值，我们用网页讲述技能成才故事，增强学生专业认同感。课后任务课后拓展：选取一段“技能成才”主题文字素材，新建网页，自主完成文本排版，综合运用段落、标题、列表、水平线，下次课课堂展示。布置课后拓展任务，明确任务要求。记录任务，课后独立完成网页制作。自主探究法引导学生用网页讲好技能成才故事，将课堂所学技术服务于思想表达。模块3Dreamweaver初级应用任务5匠心筑梦——设计多媒体网页教案1．教学整体设计教学单元名称Dreamweaver初级应用课时2学时所属章节任务5匠心筑梦——设计多媒体网页任务描述通过“匠心筑梦——设计多媒体网页”任务，完成index.html首页与web3.html“青春向远”页面制作；在网页中合理融入图像、鼠标经过图像、HTML5音频、HTML5视频等多媒体素材，借助多媒体元素传递匠心筑梦、技能成才主题内涵，提升网页视觉与视听综合展示效果。任务分析本任务核心实操：掌握网页图像插入方法，熟练设置图像替换文本、标题、尺寸等属性；2.掌握鼠标经过图像的创建方法，理解悬停交互实现原理；3.掌握HTML5音频插入，配置音频源、播放器控件等属性；4.掌握HTML5视频插入，设置视频尺寸、海报封面等参数；5.完成index.html首页、web3.html“青春向远”页面制作、保存与浏览器预览，理解网页多媒体素材存放站点规范。教学目标知识目标1.认识GIF、JPEG、PNG三种网页常用图像格式及适用场景；2.理解图像alt替换文本、title标题属性的作用；掌握鼠标经过图像交互原理；3.了解HTML5 Audio音频、HTML5 Video视频常用属性，认识网页多媒体文件格式；4.明确多媒体素材必须存放在站点内部文件夹的行业规范。能力目标1.能够正确插入网页图像，完成图像尺寸、替换文本、标题属性设置；2.独立制作鼠标经过悬停变换图像效果；3.会插入HTML5音频并配置播放器相关参数；4.能够插入HTML5视频，设置视频宽高与海报封面；5.完成index.html、web3.html两个多媒体网页完整制作、保存、F12预览调试。素养目标1.树立网页素材规范化管理意识，素材分类存放images、audio、video文件夹；2.结合匠心筑梦案例，体会多媒体网页讲好技能成才故事，培养审美设计意识；3.遇到图片、音视频无法加载故障，主动排查路径错误，养成严谨调试的职业习惯。考核方式过程考核：知识学习与技能掌握情况（30%）小组协作搜索信息、积极参与讨论与分享任务成果（40%）终结考核：终结考核：教师评价+小组互评+学生自评（30%）教学环境机房计算机配置如下：软件环境—MicrosoftWindows10、DreamweaverCC2021、PhotoshopCC、WPS办公软件；素材资源——renwu4任务素材包（web1文本素材.docx、web2文本素材.docx），沿用任务3已经建好的“筑梦青春”本地站点。

2．教学实施过程教学环节教学内容教师活动学生活动教学策略课程思政导入任务1.展示成品网页index.html、web3.html预览效果，对比纯文本网页和多媒体网页浏览体验；2.明确本节课任务：在筑梦青春站点完成首页与青春向远页面，学习图像、鼠标经过图像、HTML5音视频多媒体操作。1.展示任务成品案例，对比纯文本网页与多媒体网页效果差异；2.解读案例“匠心筑梦”主题，多媒体展示技能人才风采；3.明确本节课实操重点与学习目标。1.观察多媒体网页效果，感受图像、音视频对网页表达的作用；2.思考网页使用多媒体素材需要注意哪些问题。情境导入法、案例演示法借助图像、音视频展示技能工匠风采，引导学生感受工匠精神，树立技能成才理想。知识讲授与操作演示任务一：图像插入与属性设置（编辑index.html首页）1.打开“筑梦青春”站点index.html，插入9行1列表格，设置表格宽度1200px、居中；2.插入banner.png横幅图片，设置图像宽高、替换文本、标题；讲解alt替换文本、title标题作用；3.插入嵌套1行5列表格制作导航栏；任务二：鼠标经过图像与音频插入1.拆分单元格，插入鼠标经过图像，设置原始图像、鼠标经过图像、预载选项；理解悬停交互效果；2.插入HTML5 Audio音频，指定音频源zyya.mp3；粘贴文本素材，设置无序列表；任务三：滚动图像、水平线、版权符号完成首页1.插入多张展示图像；插入水平线、版权特殊符号；保存index.html；任务四：制作web3.html青春向远视频页面1.在other文件夹新建web3.html；输入标题文本居中对齐；2.插入HTML5 Video视频，设置源qcxy.mp4，配置宽高1000px×600px，设置海报jx7.png；保存网页，F12预览。重点强调：图片、音视频素材必须放在站点内images、audio、video文件夹，外部素材要复制入站点，否则浏览器无法加载。1.分步完整演示index.html首页制作，重点演示图像属性面板各项参数；2.演示鼠标经过图像操作，F12预览悬停交互效果；3.演示HTML5音频、视频插入，讲解源、海报、控件关键参数；4.强调高频易错点：素材路径错误、图片音视频不在站点文件夹造成不显示；5.巡视课堂，提示操作要点。1.认真观看教师演示，记录关键操作；2.跟随教师步骤完成表格、横幅图像、导航栏制作；3.观察预览效果，理解鼠标经过图像、HTML5音视频的页面呈现效果。演示法、讲解法、对比教学法网页多媒体素材如同工匠手中素材，合理选材、规范存放、精细设置，才能呈现优秀作品，培养学生精益求精的设计意识。练习技能1.实操练习：完成index.html首页全部制作；重点练习插入图像、设置替换文本与标题；制作鼠标经过图像；插入HTML5音频；2.独立完成web3.html“青春向远”页面，练习HTML5视频插入，设置视频尺寸、海报封面；3.小组互助：排查图片不显示、音视频无法播放、鼠标经过图像无变换效果等故障；4.保存全部文件，F12浏览器预览两个网页效果。1.布置课堂实操任务，明确完成标准；2.机房巡回指导，重点解决共性问题：素材未复制进站点、路径错误、忘记设置替换文本；3.收集课堂高频错误，集中演示纠错。1.独立上机实操完成两个网页案例；2.出现素材不显示时，对照教材自主排查文件夹路径；3.小组互助解决操作故障，反复预览调试页面。任务驱动法、异质分组合作学习法网页调试会反复遇到各类故障，培养学生不怕出错、耐心排查问题的职业品质；小组互助增强协作意识。展示作品1.作业提交规范：提交完整站点文件夹，命名格式：姓名_任务5_多媒体网页；2.评价维度：站点素材文件夹分类规范；图像属性设置完整；鼠标经过图像悬停效果正常；音频、视频可正常播放；网页预览无报错；3.学生自查作品，修正素材路径错误，提交电子教室作业区；4.拓展练习：尝试给图像添加简单热点链接。1.明确提交格式、质量评价标准；2.检查学生站点素材文件管理规范性；3.挑选典型作品用于课堂点评。1.对照评价标准自查网页，修正页面各类问题；2.规范命名，完成作业提交。实践教学法、自我评价法强化网页开发岗位文件管理规范，素材分类归档，培养做事严谨、有始有终的职业素养。评价总结1.课堂作品点评，梳理本节课高频错误：①图片音视频素材不在站点文件夹，网页无法加载；②忘记设置图像替换alt文本；③鼠标经过图像两张图片路径设置错误；④视频未设置海报封面；2.知识点回顾：网页图像格式；图像alt、title属性；鼠标经过图像交互；HTML5音频、视频插入要点；站点多媒体素材存放规范。1.点评典型学生作品，梳理实操共性错误；2.提问引导学生回顾本节课核心技能；3.布置课后拓展任务。1.对照点评反思自己作品存在不足；2.巩固图像、音视频多媒体网页制作技能。作品点评法、归纳总结法用好图像、音视频多媒体，讲好技能成才故事，提升学生专业认同感与网页设计审美意识。课后任务课后拓展：选取“匠心技能”主题，新建网页，自主完成：插入图像、设置替换文本；添加一段音频素材；综合运用本节课多媒体知识点制作简单多媒体网页，下次课展示交流。布置课后拓展任务，说明任务要求。记录任务，课后独立完成网页制作。自主探究法引导学生运用多媒体网页技术表达工匠精神主题，做到技术服务内容表达。模块3Dreamweaver初级应用任务6匠心筑梦——创建网页链接教案1．教学整体设计教学单元名称Dreamweaver初级应用课时2学时所属章节任务6匠心筑梦——创建网页链接任务描述通过“匠心筑梦——创建网页链接”任务，为站点内多个网页建立完整导航跳转体系；掌握站内链接、锚点链接、图像热点链接、外部链接、邮件链接的创建与属性设置，区分相对路径与绝对路径，完成index.html首页导航、页面内锚点跳转、图像热点、外部网站跳转、邮件联系链接制作，实现“筑梦青春”站点各页面互相访问。任务分析1.本任务核心实操：1.理解网页超链接作用，分清相对路径、绝对路径的使用场景；2.创建站内页面链接，实现index、web1、web2、web3页面之间互相跳转；3.掌握页面内部锚点链接制作，实现返回页面顶端跳转；4.学会图像热点链接，在一张图片上绘制多个热点区域设置不同链接；5.掌握外部网站链接、电子邮件链接的创建；6.设置链接目标（_self、_blank），保存全部网页，F12完整测试全部跳转效果。教学目标知识目标1.理解超链接作用，掌握相对路径、绝对路径概念以及适用场景；2.认识链接目标_self、_blank打开方式的区别；3.掌握站内链接、锚点链接、图像热点、外部链接、邮件链接的原理；4.了解a标签基础结构，理解href属性含义。能力目标1.能够使用属性面板为文本、图像添加站内网页跳转链接；2.会设置锚点标记，制作页面内部锚点跳转链接；3.熟练使用矩形/圆形/多边形热点工具，制作图像热点链接；4.独立完成外部网址链接、电子邮件链接创建，合理设置链接打开目标；5.完成整个站点导航链接体系搭建，保存文件，完整测试全部链接跳转效果。素养目标1.树立站点路径规范意识，养成优先使用相对路径的网页开发习惯；2.链接调试过程中仔细排查路径写错、锚点命名错误等问题，培养严谨细致工匠精神；3.结合匠心筑梦站点案例，体会网站完整导航架构对于信息访问的重要意义。考核方式过程考核：知识学习与技能掌握情况（30%）小组协作搜索信息、积极参与讨论与分享任务成果（40%）终结考核：终结考核：教师评价+小组互评+学生自评（30%）教学环境机房计算机配置如下：软件环境—MicrosoftWindows10、DreamweaverCC2021、PhotoshopCC、WPS办公软件；素材资源——沿用前期已经建好的“筑梦青春”完整站点（index.html、web1.html、web2.html、web3.html）。

2．教学实施过程教学环节教学内容教师活动学生活动教学策略课程思政导入任务1.回顾：目前站点已经完成多个独立网页，但页面之间无法互相跳转；超链接就是网页之间的桥梁。2.演示成品站点效果：点击导航文字可以在各个页面来回切换，点击返回顶端跳转到页面头部。3.明确本节课任务：为“筑梦青春”站点搭建全套超链接，包含站内跳转、锚点、热点、外部链接、邮件链接。1.演示无链接与完整链接两套网页对比，讲解超链接对于网站的意义；2.解读“匠心筑梦”站点导航功能需求；3.明确本节课技能重点：各类链接、相对路径、链接打开目标。1.观察完整网站跳转效果，思考链接失效常见原因；2.明确学习任务，区分不同类型链接的用途。情境导入法、案例演示法网站导航如同现实中的交通路网，规划清晰合理，访问才顺畅，培养学生系统规划、严谨规范的工程思维。知识讲授与操作演示任务一：站内页面超链接制作（首页导航）1.打开站点index.html，选中导航栏文本：首页、淬技逐光、出彩人生、青春向远、联系我们；2.属性面板设置链接，选择对应网页文件，目标设置_self；讲解相对路径，站点内部网页优先使用相对路径。任务二：锚点链接制作（返回顶端）1.在页面顶部插入锚点命名top；2.选中页面底部“返回顶端”文本，设置链接为#top，实现页面内部跳转。任务三：图像热点链接制作1.选中页面图片，使用矩形、多边形热点工具绘制热点区域；2.分别给热点设置跳转链接、替换文本；预览测试热点点击效果。任务四：外部链接与电子邮件链接1.选中文字，输入完整网址，制作外部网站链接，目标设置_blank新窗口打开；2.插入电子邮件链接，填写接收邮箱地址。任务五：其他网页补全导航1.依次打开web1、web2、web3，复制导航栏，补全站内跳转链接；重点强调易错点：路径写错、锚点#符号遗漏、热点选区位置偏差；全部保存，F12逐个点击测试每一处链接。1.分步演示站内链接、锚点、热点、外部、邮件链接完整操作；2.对比讲解相对路径、绝对路径，区分_self与_blank打开方式；3.演示热点工具使用，提醒热点不能超出图片范围；4.演示链接排错方法，提示：链接做完必须F12浏览器测试，不能只在设计视图看。1.跟随教师演示记录操作要点；2.切换代码视图观察a标签、href、name锚点代码；3.观察浏览器中各类链接实际跳转效果。演示法、讲解法、对比教学法制作链接如同工匠装配零部件，每一处路径、每一个符号都不能出错，细节决定整体网站能否正常使用，培养精益求精的做事态度。练习技能1.作业提交规范：提交完整站点文件夹，命名格式：姓名_任务6_网页链接创建2.评价维度：站内各页面导航互相跳转正常；锚点返回顶端功能有效；图像热点链接可点击；外部链接新窗口打开；邮件链接可以唤起邮件窗口；无链接报错；全部文件保存完整。3.学生自查：逐个点击测试每一处链接，修正路径、锚点错误，提交电子教室作业区；4.拓展练习：尝试在web3页面新增一处锚点链接。1.明确提交格式与质量评价标准；2.检查学生站点路径规范性；3.挑选典型作品课堂点评。1.对照评价标准逐项测试链接，修正页面问题；2.规范命名完成作业提交。实践教学法、自我评价法强化网站开发岗位规范，所有功能完成后必须做完整测试，养成做事有始有终的岗位素养。展示作品1.作业提交规范：提交完整站点文件夹，命名格式：姓名_任务6_网页链接创建2.评价维度：站内各页面导航互相跳转正常；锚点返回顶端功能有效；图像热点链接可点击；外部链接新窗口打开；邮件链接可以唤起邮件窗口；无链接报错；全部文件保存完整。3.学生自查：逐个点击测试每一处链接，修正路径、锚点错误，提交电子教室作业区；4.拓展练习：尝试在web3页面新增一处锚点链接。1.明确提交格式与质量评价标准；2.检查学生站点路径规范性；3.挑选典型作品课堂点评。1.对照评价标准逐项测试链接，修正页面问题；2.规范命名完成作业提交。实践教学法、自我评价法强化网站开发岗位规范，所有功能完成后必须做完整测试，养成做事有始有终的岗位素养。评价总结1.课堂作品点评，梳理本节课高频错误：①站内链接文件路径写错；②锚点链接遗漏#符号；③外部链接没有完整网址；④忘记设置链接目标，新窗口打开不符合预期；⑤只在DW设计视图看效果，没有F12浏览器实测。2.知识点回顾：相对路径与绝对路径；5种链接（站内、锚点、图像热点、外部、邮件）；链接目标_self、_blank。1.点评典型学生作品，梳理实操共性错误；2.提问引导学生回顾本节课核心技能；3.布置课后拓展任务。1.对照点评反思自己作品不足；2.巩固各类超链接创建与调试技能。作品点评法、归纳总结法超链接把零散网页组织成完整网站，用技术搭建“匠心筑梦”主题站点，增强学生专业认同感。课后任务课后拓展：在站点任选一个网页，自主新增锚点、外部网站链接、邮件链接，完成功能测试，下节课展示交流。布置课后拓展任务，明确任务要求。记录任务，课后独立完成网页制作。自主探究法引导学生运用链接技术完善匠心主题网站，做到技术服务内容表达。模块3Dreamweaver初级应用任务7匠心筑梦——使用CSS样式美化页面教案1．教学整体设计教学单元名称Dreamweaver初级应用课时2学时所属章节任务7匠心筑梦——使用CSS样式美化页面任务描述通过“匠心筑梦——使用CSS样式美化页面”任务，掌握DreamweaverCSS设计器面板操作；区分行内样式、内嵌样式、外部样式表三种CSS实现方式；熟练运用标签、类、ID、伪类等选择器，完成index.html首页、web1.html页面美化，实现站点多页面共享外部CSS样式表，达成网页内容与表现分离的开发效果。任务分析本任务核心实操：1.掌握CSS设计器面板的打开方式，认识源、选择器、属性三大核心子面板；2.新建css文件夹，创建外部样式表style.css文件；3.掌握标签选择器、类选择器、ID选择器、伪类选择器创建与属性设置；4.完成水平线、超链接、导航单元格、列表、文本、图像样式设置；掌握transition过渡动画属性配置；5.将外部样式表附加到web1.html，实现多页面共用一套CSS样式，保存文件并浏览器预览美化效果；6.理解三种CSS样式的区别与优先级规则。教学目标知识目标1.理解行内样式、内嵌样式、外部样式表三种CSS样式的概念、作用范围与优先级；2.掌握标签、类、ID、伪类选择器命名规则与使用场景；3.认识CSS设计器面板各组成部分，了解布局、文本、边框、背景常用CSS属性；4.理解外部样式表实现多页面样式复用的原理。能力目标能够使用快捷键Shift+F11打开CSS设计器，创建外部CSS样式文件；2.会创建标签、类、ID、伪类选择器，设置字体、颜色、边距、过渡等样式属性；3.能够为页面元素应用类选择器；掌握给其他网页附加外部CSS样式表的操作；4.独立完成index.html、web1.html页面CSS美化，保存全部文件，F12预览调试页面效果。素养目标建立“内容与样式分离”的网页开发规范意识，养成外部样式表的开发习惯；2.体会标准化、模块化代码思想，如同工匠标准化工艺流程，培养严谨的编程思维；3.调试样式报错时耐心排查选择器、属性书写错误，养成自主排错的职业素养。考核方式过程考核：知识学习与技能掌握情况（30%）小组协作搜索信息、积极参与讨论与分享任务成果（40%）终结考核：终结考核：教师评价+小组互评+学生自评（30%）教学环境机房计算机配置如下：软件环境—MicrosoftWindows10、DreamweaverCC2021、PhotoshopCC、WPS办公软件；素材资源——沿用前期“筑梦青春”站点已有全部网页素材。

2．教学实施过程教学环节教学内容教师活动学生活动教学策略课程思政导入任务1.回顾：前面任务使用属性面板生成行内样式，样式只能作用单个元素，多页面无法复用；2.对比展示美化前、美化后index.html网页效果，感受CSS对页面的美化作用；3.明确本节课任务：使用CSS设计器创建外部样式表，完成首页、web1.html美化，实现多页面样式复用。1.展示未美化与CSS美化完成的网页对比效果；2.讲解行内样式的弊端，引出外部CSS样式表优势；3.解读任务目标：掌握CSS设计器，实现网页内容与样式分离。1.观察网页美化前后差异，思考如何实现多页面统一样式；2.了解本节课技能重点：外部样式表、各类选择器。情境导入法、案例演示法网页美化如同工匠打磨工件，统一标准、模块化处理，才能产出精致规范作品，培养标准化开发意识。知识讲授与操作演示任务一：创建外部CSS样式表文件1.打开“筑梦青春”站点，新建css文件夹；2.快捷键Shift+F11打开CSS设计器；添加CSS源，创建新CSS文件，保存为css/style.css，选择【链接】方式。任务二：各类选择器创建与属性设置（编辑index.html）1.标签选择器hr：设置宽度、颜色，美化水平线；2.链接伪类选择器a:link、a:visited、a:hover、a:active，设置链接不同状态颜色、取消下划线；3.类伪类选择器.l1:hover，设置导航单元格背景色、transition过渡效果；4.复合后代选择器ulli，设置列表行高、列表符号、下虚线边框；5.类选择器.t1，设置字体、居中对齐，应用到页面单元格；6.ID选择器#Image7，设置图像外边距margin属性；7.保存全部文件，F12预览index.html美化效果。任务三：多页面复用外部样式表web1.html1.打开other/web1.html，CSS设计器附加现有的CSS文件style.css；2.为页面指定元素应用类选择器.t1；保存、预览页面。重点强调：类选择器需要手动给元素应用；标签、ID、伪类选择器自动匹配生效；外部样式表修改，所有链接该CSS的页面同步更新样式。1.分步演示创建外部样式表完整操作，讲解CSS设计器“源、选择器、属性”面板功能；2.分别演示标签、类、ID、伪类选择器创建，区分自动生效与手动应用类样式；3.演示附加外部样式表实现多页面样式复用；4.梳理高频易错：选择器符号写错、类选择器忘记给元素应用、忘记保存css文件，样式不生效。1.跟随教师演示，记录CSS设计器关键操作；2.观察代码视图，对比行内样式、外部样式代码区别；3.预览网页，观察各类选择器带来的页面变化。演示法、讲解法、对比教学法CSS模块化开发，就像工匠制定统一工艺标准，一次定义多处复用，提升工作效率，培养学生规范化工程思维。练习技能1.实操练习：新建css文件夹，创建style.css外部样式表；依次完成hr、链接伪类、.l1:hover、ulli、.t1、#Image7全部选择器与属性设置；完成index.html美化；2.独立操作：给web1.html附加style.css样式表，应用类选择器，完成页面美化；3.小组互助排查故障：样式不生效、过渡效果不显示、类样式没有作用到元素；4.全部保存，F12分别预览index.html、web1.html两个页面效果。1.布置课堂实操任务，明确完成标准；2.机房巡回指导，重点排查共性问题：没有保存css文件、类选择器忘记应用元素、选择器符号错误；3.收集典型错误，集中演示纠错。1.独立上机实操完成两个网页CSS美化；2.遇到样式失效，自主对照教材排查选择器、属性设置；3.小组互助调试页面效果。任务驱动法、异质分组合作学习法样式调试经常遇到效果不显示，培养学生耐心排查、反复验证的工匠精神；小组互助提升协作能力。展示作品1.作业提交规范：提交完整站点文件夹，命名格式：姓名_任务7_CSS美化页面；2.评价维度：css文件夹及style.css文件存在；各类选择器设置完整；导航hover变色过渡效果正常；列表、水平线、文本样式生效；web1.html成功复用外部样式；网页预览无报错；3.学生自查作品，修正样式失效问题，提交电子教室作业区；4.拓展练习：尝试新增一个类选择器，自定义页面背景颜色。1.明确提交格式、质量评价标准；2.检查学生css文件管理规范性；3.挑选典型作品用于课堂点评。1.对照评价标准自查网页，修正页面各类样式问题；2.规范命名，完成作业提交。实践教学法、自我评价法强化网页开发工程规范，样式文件独立归档，培养岗位上严谨、有始有终的职业素养。评价总结1.课堂作品点评，梳理本节课高频错误：①忘记保存style.css文件，样式不生效；②类选择器定义完成，但没有选中元素应用类；③伪类选择器冒号符号书写错误；2.知识点回顾：三种CSS样式特点；标签/类/ID/伪类选择器；CSS设计器面板；外部样式表实现多页面复用。补充简要说明CSS优先级：行内＞ID＞类＞标签＞浏览器默认样式。1.点评典型学生作品，梳理实操共性错误；2.提问引导学生回顾CSS核心技能；3.布置课后拓展任务。1.对照点评反思自己作品存在不足；2.巩固CSS选择器与外部样式表相关技能。作品点评法、归纳总结法CSS实现内容与样式分离，是现代网页开发重要思想，鼓励学生运用CSS打造美观的“匠心筑梦”主题网页。课后任务课后拓展：在现有站点中新建简单网页，附加style.css外部样式，自主新增1组类选择器，设置文字、背景样式，实现页面美化，下次课进行展示交流。布置课后拓展任务，说明任务要求。记录任务，课后独立完成网页制作。自主探究法引导学生把CSS美化技能运用于技能成才主题网页创作，做到技术服务内容表达。模块4页面布局任务8奋扬青春——表格布局页面1．教学设计方案教学单元名称奋扬青春——表格布局页面课时4学时所属章节任务8奋扬青春——表格布局页面任务描述通过布局“奋扬青春”网页，学会使用表格布局页面的方法和技巧。任务分析1.掌握表格的创建方法和表格、单元格的属性设置2.掌握嵌套表格的创建方法和属性的设置。3.学会使用表格布局页面的方法和技巧。教学目标知识目标1.掌握表格的创建与表格、单元格属性设置2.理解嵌套表格的作用与创建方法3.了解表格在页面布局中的定位考核方式过程考核：表格布局与属性设置（50%）；终结考核：页面布局合理性（50%）能力目标1.能用表格进行页面整体布局2.能设置表格边框、间距、对齐等属性3.能创建嵌套表格组织复杂内容素养目标1.培养页面结构清晰、层次分明的布局意识2.养成表格属性规范设置的习惯思政目标1.通过表格布局体会"规整有序"的工程美学2.在结构组织中培养严谨踏实的职业态度教学环境多媒体机房，Windows10，Dreamweaver20212．教学设计实施教学环节教学内容教师活动学生活动教学方法策略课程思政任务提出通过布局“奋扬青春”网页，学会使用表格布局页面的方法和技巧。任务分解：1.掌握表格的创建方法和表格、单元格的属性设置；2.掌握嵌套表格的创建方法和属性的设置。3.学会使用表格布局页面的方法和技巧。1.展示任务成品效果图；2.讲解单元格的属性设置和使用技巧；3.提出本任务具体分解；4.简要预告本课知识框架1.欣赏表格布局作品，感受表格布局的视觉效果；2.明确学习目标与工作任务，思考学习表格布局需注意的要点；4.记录关键步骤操作。情境导入法、任务驱动法奋扬青春案例；思政：规整之美知识讲授与操作演示1.新建站点“奋扬青春”。新建网页文件index.html，按需求设置“页面属性”。2.按需求插入表格，并设置属性值。3.选中整个表格，设置为“居中对齐”。4.为表格第1个单元格插入图像，并设置属性。5.为第2列单元格插入嵌套表格，并设置属性。6.光标定位到嵌套表格的第2行单元格，选择输入法“软键盘”中的“特殊字符”项。7.将光标定位到表格的后面或下一行，选择“插入→表格”命令，设置表格属性。8.将光标定位到第二个表格，在“代码”视图中为表格添加背景图像。9.在第二个表格的嵌套表格中的第2列到第8列，分别输入文本“部门简介，规章制度，教育管理，资助工作，咨询服务，心理服务和宿舍管理”；创建CSS样式表ys01，定义ys01样式表的字体为黑体、大小为16px、颜色为白色、加粗、居中显示。10.继续插入1行3列表格，并设置属性。11.分别设置第三个表格的第1-3列属性值。并讲解表格扩展模式和标准模式。12.为第3个表格部分单元格插入图片。13.为第3个表格部分单元格设置背景图像。14.为第3个表格部分单元格添加文字。15.为“学生动态”和“下载专区”文字设置空链接，创建滑动文字变色效果。16.在第3个表格下方，插入1行1列表格，并设置属性。讲解新建表格、设置属性、嵌套表格及设置属性，结合CSS样式表美化表格。重点：定位元素选择1.观看演示2.重点操作重复操作3.记录表格布局要点讲授法、示范演示法表格图解；思政：严谨学生练习与讨论学生用表格搭建"奋扬青春"页面框架，设置边框间距，练习嵌套表格。布置练习，巡视指导合并单元格、嵌套层级问题。上机建表布局，互助解决结构异常。任务驱动法、合作学习法素材包renwu8；思政：互助完成工作任务提交表格布局页面，要求结构清晰、属性规范。明确提交标准，组织提交，关注布局合理性。完成布局，自查结构，规范提交。实践法、标准化评价提交标准；思政：责任总结评价点评布局结构，回顾表格属性与嵌套，强调语义化表格使用。点评作品，归纳表格布局要点。观看点评，巩固表格知识。作品点评法、归纳总结法点评量表；思政：工程美学课后任务用表格为自己的个人网站设计首页整体布局框架。布置拓展任务，明确方向。独立完成表格布局框架。自主探究法拓展任务单；思政：有序表达

模块4页面布局任务9架构梦想——CSS+Div布局页面1．教学设计方案教学单元名称架构梦想——CSS+Div布局页面课时4学时所属章节模块4页面布局任务9架构梦想——CSS+Div布局页面任务描述通过布局“架构梦想”网页，学会使用CSS+Div布局和美化网页。任务分析1.学会Div的创建和属性设置2.学会使用CSS+Div布局和美化网页。教学目标知识目标1.理解Div元素与CSS盒模型（内容/内边距/边框/外边距）2.掌握CSS+Div布局的基本思路3.了解定位（相对/绝对）与浮动的应用考核方式过程考核：Div创建与CSS布局（50%）；终结考核：页面布局与美化效果（50%）能力目标1.能创建Div并应用CSS进行布局2.能用CSS美化Div容器3.能实现较复杂的页面分栏布局素养目标1.建立"结构与表现分离"的现代布局思想2.培养模块化、可维护的代码习惯思政目标1.通过Div模块化体会系统分解、各司其职的协作理念2.在布局优化中培养追求卓越的工匠精神教学环境多媒体机房，Windows10，Dreamweaver20212．教学设计实施教学环节教学内容教师活动学生活动教学方法课程思政任务提出展示"架构梦想"CSS+Div布局网页，提出用Div重构页面布局的任务。展示Div布局效果，对比表格布局，明确任务。观察Div布局，明确学习目标。情境导入法、对比教学法架构梦想案例；思政：模块思维知识讲授与操作演示任务一：设计和理解页面布局图和各Div（块）的关系，如所示。任务二：1.将素材中的renwu9文件夹复制到D盘根目录。新建站点“架构梦想”，站点文件夹为D:\renwu9。打开站点根目录新建空白文档index.htm，修改标题为“CSS+Div布局网页”,打开“页面属性”对话框，在“外观（css）”分类选项卡中设置背景颜色为#CCC,“左、右、上、下”边距均为0px。2.创建嵌套Div。打开index.html，“插入→Div”,在DOM面板中输入Div的名字“#container”；光标定位在“#container”层中，再次选择“插入→Div”，选择“嵌套”，如图4-42，插入嵌套Div,在DOM面板中输入名称“#banner”；同样的方法创建“#content”、“#footer”嵌套Div，DOM面板如图4-43所示。3.定义container层的样式。在CSS设计器中，创建#container样式，并设置属性。4.在banner层中插入图片并编辑CSS样式。光标定位在ban