认识Dreamweaver教学设计中职专业课-网页设计与制作-计算机类-电子与信息大类_第1页
认识Dreamweaver教学设计中职专业课-网页设计与制作-计算机类-电子与信息大类_第2页
认识Dreamweaver教学设计中职专业课-网页设计与制作-计算机类-电子与信息大类_第3页
认识Dreamweaver教学设计中职专业课-网页设计与制作-计算机类-电子与信息大类_第4页
认识Dreamweaver教学设计中职专业课-网页设计与制作-计算机类-电子与信息大类_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

认识Dreamweaver教学设计中职专业课-网页设计与制作-计算机类-电子与信息大类课题Xx课型XxXx修改日期2025年教具XxXx教学内容一、教学内容本节课选自中职《网页设计与制作》教材“项目一初识Dreamweaver”章节，主要内容包括：DreamweaverCS6界面组成（菜单栏、插入栏、文档窗口、属性检查器）；本地站点创建与管理（新建站点、设置本地根目录）；HTML基础认知（HTML文档结构、常用标签如<html>、<head>、<body>、<title>）；简单页面编辑（文本输入与格式化、图片插入与属性调整）。核心素养目标分析二、核心素养目标分析本节课聚焦信息意识、数字技能与职业素养培养。学生通过Dreamweaver界面操作，形成对网页设计工具的认知；在站点创建与页面编辑中，提升数字工具应用能力；通过HTML基础学习，培养计算思维与规范操作意识；结合简单页面制作，强化信息表达与数字内容创作能力，为后续网页设计项目奠定职业素养基础。学情分析三、学情分析本节课授课对象为中职一年级计算机类专业学生，刚接触网页设计课程，对Dreamweaver工具零基础。知识层面：具备计算机基础操作能力，但对HTML标签、网页结构概念模糊，缺乏系统认知。能力层面：动手操作能力两极分化，部分学生能快速跟随演示，部分需反复指导；逻辑思维较弱，站点创建时易混淆本地根目录设置。素质层面：职业素养初步培养，但规范操作意识不足，如属性检查器使用易忽略细节。行为习惯：偏好实践操作，对理论讲解兴趣低，易出现“听不懂就放弃”情况；依赖教师步骤演示，自主探索能力待提升。对课程学习影响：需通过案例驱动激发兴趣，分解界面操作步骤，强化HTML标签记忆方法，结合站点管理培养逻辑思维，引导学生主动参与实践。教学方法与手段教学方法：1.任务驱动法，将界面认知、站点创建分解为可操作任务，引导学生逐步掌握；2.演示法，结合分屏演示关键步骤，强化操作规范性；3.讨论法，针对HTML标签应用错误案例展开小组分析，培养纠错能力。

教学手段：1.多媒体课件动态展示界面布局与操作流程；2.教学软件预置模板，降低HTML标签记忆难度；3.云平台实时提交操作成果，便于即时反馈与评价。教学流程：1.导入新课（5分钟）

展示学生熟悉的网页案例（如学校官网首页、电商商品页），提问：“这些网页是如何制作的？如果想自己设计一个简单网页，需要什么工具？”引导学生思考网页制作工具，引出本节课主题——Dreamweaver。结合教材“项目一初识Dreamweaver”开篇案例，说明Dreamweaver是专业网页设计工具，通过对比记事本编写HTML代码的低效与Dreamweaver可视化操作的优势，激发学生学习兴趣，明确本节课学习目标：掌握Dreamweaver界面组成、学会创建本地站点、了解HTML基础并完成简单页面编辑。

2.新课讲授（25分钟）

（1）DreamweaverCS6界面认知（8分钟）

结合教材“1.1Dreamweaver工作区”内容，分步讲解界面组成：①菜单栏（包含文件、编辑、插入等10个主菜单，举例“文件→新建”可创建HTML页面）；②插入栏（常用、布局、表单等类别，演示“常用→图像”插入图片）；③文档窗口（代码、设计、拆分三种视图模式，切换至设计视图展示空白页面）；④属性检查器（选中文字时显示“格式”“字体”等属性，选中图片时显示“源文件”“宽高”等）。强调各区域功能，举例说明：插入图片时需在属性检查器调整“替换文本”提升可访问性，呼应教材“网页设计规范”要求。

（2）本地站点创建与管理（9分钟）

聚焦教材“1.2创建本地站点”重点，讲解站点创建步骤：①执行“站点→新建站点”；②填写站点名称（如“我的第一个网页”）；③设置本地根目录（强调需选择空文件夹，避免与系统文件混淆，举例错误操作：将根目录设为桌面“新建文件夹”，导致后续文件管理混乱）；④完成创建后，在文件面板中演示新建HTML文件（index.html）、创建images文件夹存放图片，并上传一张示例图片至images文件夹。强调“本地站点是网页文件管理的基础”，解决学生“文件散乱、图片无法显示”的常见问题，突破“本地根目录设置”这一难点。

（3）HTML基础与简单页面编辑（8分钟）

结合教材“1.3HTML基础入门”，讲解HTML文档结构（<!DOCTYPEhtml>、<html>、<head>、<body>），举例说明：<title>标签定义页面标题（如“欢迎来到我的网页”），<body>标签包含页面可见内容。在Dreamweaver设计视图中演示：①输入标题文字“个人简介”，通过属性检查器设置为“标题1”（对应<h1>标签）；②输入段落文字“我是XX学校学生”，设置为“段落”（对应<p>标签）；③插入images文件夹中的图片，在属性检查器中设置“宽”为300px、“对齐方式”为“左对齐”。强调“HTML是网页的骨架”，可视化操作本质是生成HTML代码，为后续代码编写学习铺垫，突破“HTML标签与可视化操作对应关系”这一难点。

3.实践活动（10分钟）

（1）任务一：Dreamweaver界面熟悉（3分钟）

要求学生打开DreamweaverCS6，对照教材图1-3，指出菜单栏、插入栏、文档窗口、属性检查器的位置，并完成：①在插入栏“常用”类别中点击“表格”按钮（无需插入表格，仅熟悉操作）；②切换文档窗口至“代码”视图，观察自动生成的<!DOCTYPEhtml>声明，记录在笔记本上。教师巡视指导，重点关注学生对“属性检查器”动态变化的观察。

（2）任务二：本地站点创建与文件管理（4分钟）

要求学生创建本地站点，命名为“班级网页”，本地根目录设置为D盘下的“classweb”文件夹（提前提醒学生D盘创建该文件夹）；在站点中新建HTML文件“about.html”，创建“images”文件夹并上传一张个人生活照（教师提供示例图片包）。强调“所有网页文件和素材必须存放在站点根目录或其子文件夹中”，解决学生“图片路径错误导致无法显示”问题，巩固“站点管理”重点。

（3）任务三：简单HTML页面编辑（3分钟）

在“about.html”页面中完成：①输入标题“我的班级”，设置为“标题2”；②输入段落文字“我们班有30名同学，团结友爱，积极向上”，设置为“楷体、14px”；③插入images文件夹中的个人生活照，设置“宽”为200px、“边框”为1。完成后保存文件，教师通过教师机端展示2-3份学生作品，点评操作规范性问题（如图片路径未选对站点内文件）。

4.学生小组讨论（5分钟）

将学生分为4人小组，围绕以下3个案例展开讨论，每组推选代表发言：

（1）案例1：小明创建站点时，将本地根目录直接设为D盘，结果插入图片后页面显示“×”，原因是什么？如何解决？（引导学生分析“根目录未包含图片文件，路径错误”，应将图片存入站点根目录或子文件夹）

（2）案例2：小红在代码视图中删除了</body>标签，切换到设计视图后页面布局混乱，说明HTML标签的什么特性？（强调“标签成对出现、闭合的重要性”，呼应教材“HTML语法规范”）

（3）案例3：小李想将标题文字颜色改为红色，在属性检查器中找不到“颜色”选项，可能是什么原因？（提示“需先选中文字，属性检查器才会显示文本相关属性”，培养学生细致观察习惯）

5.总结回顾（2分钟）

师生共同梳理本节课重点：①Dreamweaver界面四大区域及功能；②本地站点创建步骤（命名→设置根目录→管理文件）；③HTML文档基本结构及简单页面编辑（标题、段落、图片）。重申难点：本地根目录设置（确保所有文件在站点内）、HTML标签规范性（闭合、属性完整）。最后提问：“下节课我们将学习如何在页面中添加超链接，大家想想，超链接标签<a>应该放在哪个HTML结构中？”引导学生预习教材“1.4添加超链接”内容，为后续学习埋下伏笔。教学资源拓展：六、教学资源拓展

1.拓展资源：

（1）工具类资源：AdobeDreamweaver2023版本新增功能（CSSGrid布局工具、实时预览模式），替代工具如VSCode配合LiveServer插件实现本地预览，兼容教材中HTML标签编写需求。

（2）案例类资源：教材“项目一”案例的进阶版本，如学校官网首页的完整HTML结构解析（包含header、nav、main、footer语义化标签），电商商品页的表格布局与图片轮播效果实现，关联教材“简单页面编辑”知识点。

（3）知识类资源：HTML基础标签扩展（表格<table>、表单<form>、<input>系列标签），网页设计规范补充（色彩搭配原则、字体排版标准），呼应教材“HTML基础入门”与“网页设计规范”章节。

（4）资源类资源：教材配套素材包（含案例图片、HTML模板），无版权图片素材库（如Pexels免费图片），响应式网页模板（适配手机与电脑屏幕），强化“本地站点管理”与“图片插入”实践。

2.拓展建议：

（1）学习方法建议：分阶段练习，先模仿教材案例完成“个人简介页”，再修改内容为“班级介绍页”，用笔记本记录操作步骤（如“插入图片后需检查属性检查器中的‘源文件’路径是否正确”）；针对HTML标签记忆困难，制作标签卡片（正面标签名，背面功能与示例），每日背诵5个常用标签。

（2）技能提升建议：同步查看Dreamweaver“代码视图”与“设计视图”，对比可视化操作生成的HTML代码（如输入标题自动生成<h1>标签），理解工具本质；尝试用记事本编写简单HTML代码，再导入Dreamweaver验证，强化“HTML是网页骨架”的认知。

（3）实践项目建议：从“静态页面”到“动态效果”，逐步完成“个人作品集”项目（包含首页、关于我、作品展示三个页面），每页应用不同HTML标签（首页用<nav>制作导航栏，作品页用<table>布局图片矩阵）；定期用浏览器“开发者工具”检查页面兼容性问题，培养测试意识。

（4）职业素养建议：建立规范的文件管理习惯，站点文件夹按“images（图片）、css（样式表）、js（脚本）”分类存放，避免教材中“图片路径错误”问题；参与班级网页设计比赛，用Dreamweaver制作主题页面（如“我的校园”），提升信息表达与数字内容创作能力。Xx典型例题讲解：1.题目：在Dreamweaver中，选中图片后，属性检查器显示哪些关键属性？

答案：源文件（设置图片路径）、宽高（调整尺寸）、替换文本（提升可访问性）、边框（添加边框线）。

2.题目：创建本地站点时，若将本地根目录设为桌面“新建文件夹”，插入图片后页面显示“×”，原因是什么？

答案：图片未存入站点根目录或子文件夹，导致路径错误；应将图片移至站点文件夹内。

3.题目：在代码视图中，删除`</body>`标签后切换设计视图，页面布局异常，说明HTML标签的什么特性？

答案：HTML标签需成对出现且正确闭合，`</body>`缺失导致后续内容无法被正确解析。

4.题目：在属性检查器中找不到文字颜色选项，可能是什么原因？

答案：未选中文字；必须先选中文字，属性检查器才显示文本相关属性。

5.题目：用HTML表格布局班级信息（姓名、性别、年龄），写出核心代码结构。

答案：

```html

<tableborder="1">

<tr>

<th>姓名</th><th>性别</th><th>年龄</th>

</tr>

<tr>

<td>张三</td><td>男</td><td>18</td>

</tr>

</table>

```Xx课堂：1.课堂评价：通过提问检查学生对Dreamweaver界面组成的掌握情况，如“属性检查器在选中图片和文字时分别显示哪些属性”，观察学生站点创建操作中本地根目录设置是否规范，测试HTML文档结构填写（如补充缺失的

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论