2025-2026学年网上电脑教学楼设计

-2026学年网上电脑教学楼设计讲授人课时序号课题内容教学时间设计意图一、设计意图结合课本网页设计章节，以项目式学习驱动学生规划网上电脑教学楼结构，运用HTML/CSS实现页面布局与样式，巩固网页制作基础技能。通过模拟教学场景设计，培养信息规划能力、用户体验意识和团队协作精神，将课本知识与实际应用结合，提升解决复杂问题的综合素养。核心素养目标二、核心素养目标通过网上电脑教学楼设计项目，培养学生信息意识，能分析教学场景需求，合理规划网站内容结构；提升计算思维，运用HTML/CSS实现页面逻辑布局与样式设计；强化数字化学习与创新，通过实践掌握网页制作技能，提升数字化表达与协作能力；树立信息社会责任，关注网站无障碍设计与信息安全，符合教育类网站规范，体现技术服务教育的价值。教学难点与重点1.教学重点：掌握HTML语义化标签构建网站结构，如用<section>划分教学楼各功能区（教室、实验室、办公区），用<nav>实现导航层级；运用CSSFlex布局实现页面响应式模块，例如将课程信息卡片的弹性排列适配不同屏幕尺寸，确保符合课本中网页布局的核心知识点。

2.教学难点：理解CSS媒体查询实现多设备适配，例如针对平板（768px）和手机（375px）调整导航栏折叠逻辑，学生易混淆断点设置；表单交互功能整合，如搜索框需联动JS实现课程关键词实时筛选，课本虽涉及基础表单，但动态数据绑定是学生薄弱环节，需重点突破。教学资源软硬件资源：学生用计算机（安装VSCode、Chrome浏览器）、多媒体教学设备、机房局域网环境

课程平台：学校在线学习管理系统（作业提交、小组讨论模块）

信息化资源：课本配套网页设计案例库、HTML/CSS代码模板、无障碍设计指南

教学手段：项目驱动教学法、小组协作探究、实时代码演示工具教学过程（一）情境导入，明确任务（5分钟）

同学们，今天我们要完成一个真实项目——为学校设计2025-2026学年网上电脑教学楼网页。请大家打开课本第52页，看看“校园网站设计”案例中的结构图，想想如果我们要展示教学楼的功能区（比如教室、实验室、办公区），应该用哪些HTML标签来划分呢？对，课本里提到<section>是用来划分独立区域的，<nav>是导航栏。现在请你们以小组为单位，讨论一下：如果用户想快速找到“计算机基础课教室”，你们的网页导航应该怎么设计？给大家3分钟时间，稍后请小组代表发言。

（二）新知探究，突破重点（20分钟）

1.HTML语义化标签应用

我注意到刚才第三小组提到用<div>划分功能区，但课本第55页强调，语义化标签能让网页结构更清晰，方便搜索引擎识别。比如，教学楼的主功能区应该用<sectionclass="teaching-areas">，每个教室用<articleclass="classroom">，并添加data-room属性存储教室编号，这样后台程序就能快速调取数据。现在请大家打开VSCode，跟着我一起写代码：先创建<header>放学校logo和搜索框，然后用<nav>写主导航“首页”“教室介绍”“实验室预约”，最后用<section>划分三个功能区，每个区用<h2>做标题。

2.CSSFlex布局实战

同学们，课本第60页的“弹性盒子布局”案例中，课程信息卡片是用Flex实现自适应的。现在我们要设计“实验室预约”页面，每个实验室卡片需要显示名称、设备、可预约时间，这三个元素如何排列？对，用display:flex;justify-content:space-between;就能让它们均匀分布。但要注意，当屏幕变小时，比如手机端，卡片可能会重叠，这时课本第63页提到flex-wrap:wrap;，让小屏幕时自动换行。现在请大家调整代码，把实验室卡片的宽度设为30%，然后测试一下：当浏览器窗口缩小到768px以下时，卡片是否会变成两列？

（三）难点突破，合作探究（15分钟）

1.媒体查询多设备适配

刚才有同学问我，为什么在手机上看导航栏会变形？这就是我们今天的难点——媒体查询。课本第66页说，媒体查询能根据屏幕尺寸应用不同样式。比如，当屏幕宽度小于768px时，我们要把导航栏从横向变成纵向，代码应该是@media(max-width:768px){nav{flex-direction:column;}}。现在请大家检查自己的代码，在768px和375px两个断点下调整导航栏样式，并测试：用Chrome开发者工具切换手机模式，看看导航栏是否正常显示？

2.表单交互功能整合

实验室预约需要表单，课本第70页的“表单验证”案例中，我们学习了用required属性必填。但用户提交预约后，如何实时显示“预约成功”呢？这就需要结合JS。比如，当表单提交时，用preventDefault()阻止默认提交，然后显示一个<divclass="success-message">。现在请大家尝试：在预约表单下方添加一个隐藏的提示框，当用户点击“提交”后，让它显示“预约成功，请等待审核”。

（四）小组任务，实践应用（30分钟）

现在请大家以4人一组，完成“网上电脑教学楼”的子页面设计：一组负责“教室介绍”，用<section>划分不同教室，每个教室用<article>显示编号、容量、课程安排；二组负责“实验室预约”，用Flex布局实验室卡片，并实现表单提交提示；三组负责“教师办公”，用<nav>制作二级导航（办公电话、答疑时间）。要求：每个页面必须使用语义化标签，响应式布局适配平板和手机，15分钟后展示成果。

（五）展示评价，总结提升（10分钟）

第一组同学展示“教室介绍”页面，他们用<sectionclass="floor-1">划分一楼教室，每个教室用<article>并添加data-floor属性，很好，符合课本语义化要求。但要注意，课本第58页提到，图片应该用<figure>和<figcaption>标签，所以教室照片要加上这两个标签。第二组的“实验室预约”页面，表单提交后能显示提示，但媒体查询没做好——当屏幕小于375px时，卡片宽度应调整为100%，大家记得修改一下。今天我们重点掌握了HTML语义化和Flex布局，课后请大家完善自己的页面，并测试不同设备的显示效果。学生学习效果教学评价与反馈1.课堂表现：学生积极参与HTML语义化标签讨论，能准确使用<section>、<nav>等标签划分功能区，对课本第52页的结构图理解到位，但部分学生对CSSFlex布局的justify-content属性应用不熟练。

2.小组讨论成果展示：三组“教师办公”页面二级导航清晰，符合课本第55页的导航层级设计；二组实验室预约表单提交提示功能实现正确，但媒体查询断点设置未完全覆盖课本第66页的375px要求。

3.随堂测试：85%学生能独立编写响应式布局代码，但70%在媒体查询语法上出现错误，需加强课本第63页flex-wrap与断点结合的练习。

4.作业完成情况：90%提交的网页包含至少3个功能区，但图片未用<figure>标签包裹，未落实课本第58页的无障碍设计要求。

5.教师评价与反馈：整体项目驱动教学有效，学生对课本核心知识掌握较扎实，需重点突破动态交互功能整合，课后增加JS与CSS联动案例训练。板书设计①HTML语义化标签：核心标签<section>（功能区划分）、<nav>（导航栏）、<article>（独立内容块），作用为结构清晰、便于搜索引擎识别，对应课本第52-55页网站结构设计规范。

②CSSFlex布局：关键属性display:flex;（弹性容器）、justify-content:space-between;（空间分布）、flex-wrap: