版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
-1-项目二制作“数码资讯网”首页——使用HTML制作简单网页教学设计中职信息技术（信息科技）网页设计与制作（第2版）高教版教学设计课题课型新授课√□章/单元复习课□专题复习课□习题/试卷讲评课□学科实践活动课□其他□课程基本信息1.课程名称：网页设计与制作（第2版）高教版
2.教学年级和班级：高一年级（1）班
3.授课时间：2023年10月15日第3节课
4.教学时数：1课时（45分钟）核心素养目标二、核心素养目标通过HTML制作首页实践，培养信息意识，感知网页信息组织逻辑；运用计算思维，分析页面结构并合理使用HTML标签；提升数字化学习与创新，通过代码编写实现简单网页创意；树立信息社会责任，规范使用资源与内容，养成负责任的信息创作习惯。教学难点与重点三、教学难点与重点1.教学重点，①HTML文档基本结构（html、head、body标签）的规范书写与各部分作用理解；②常用HTML标签（标题h1-h6、段落p、无序列表ul/ol、有序列表li、超链接a、图片img）的功能、属性及正确使用方法；③“数码资讯网”首页中页面标题、导航栏、资讯列表、页脚等模块的HTML标签实现。2.教学难点，①结构化标签（如header、nav、main、footer、section）的语义化选择与应用，理解标签在页面结构中的作用；②图片路径（相对路径与绝对路径）的准确设置及img标签src、alt属性的规范使用；③超链接a标签href属性指向本地页面与外部链接的区别及正确设置；④CSS基础样式（文本颜色color、字体font-family、大小font-size、对齐text-align）与HTML标签的结合应用，实现简单页面美化。教学资源准备四、教学资源准备1.教材：中职信息技术（信息科技）《网页设计与制作》（第2版）高教版，确保每位学生人手一册。2.辅助材料：准备课本中HTML标签示例图、数码资讯网首页效果图、基础代码编写操作步骤视频。3.实验器材：学生用计算机安装记事本、VSCode等文本编辑器，确保浏览器（Chrome、Edge）正常运行，网络通畅。4.教室布置：设置分组讨论区（4-6人/组），配备实验操作台，每人一台电脑，教师机配备多媒体教学设备。教学过程**（一）情境导入，激发兴趣（5分钟）**
同学们，打开教材第35页，观察"数码资讯网"首页效果图。请大家思考：这个网页包含哪些核心模块？（停顿）对，有网站标题、导航栏、资讯列表、页脚等。如果让你用代码实现，需要哪些HTML标签？今天我们就通过制作这个首页，学习HTML网页的基本结构和常用标签。请大家在电脑上打开VSCode，跟着我的步骤一起操作。
**（二）新知探究，突破重点（15分钟）**
1.**理解HTML文档结构**
请看教材第36页代码示例，HTML文档必须包含哪三个标签？（引导学生回答）没错，是`<html>`、`<head>`、`<body>`。`<head>`里放元数据，如`<title>`定义页面标题；`<body>`是可见内容。现在请大家在VSCode中输入基础框架：
```html
<!DOCTYPEhtml>
<html>
<head>
<title>数码资讯网</title>
</head>
<body>
<!--内容写在这里-->
</body>
</html>
```
保存为`index.html`，用浏览器打开，检查标题是否正确显示。
2.**应用语义化标签构建模块**
回到首页效果图，导航栏适合用哪个标签？（学生回答`<nav>`）资讯列表用`<main>`和`<section>`，页脚用`<footer>`。请大家在`<body>`中添加：
```html
<header>
<h1>数码资讯网</h1>
</header>
<nav>
<ahref="#">首页</a>
<ahref="#">科技</a>
<ahref="#">数码</a>
</nav>
<main>
<section>
<h2>最新资讯</h2>
<p>欢迎访问数码资讯网！</p>
</section>
</main>
<footer>
<p>版权所有©2023</p>
</footer>
```
观察浏览器效果，对比课本图3-2，验证结构是否一致。
3.**掌握标签属性与路径设置**
在`<header>`中添加logo图片：`<imgsrc="images/logo.png"alt="数码资讯网logo">`。注意：图片需放在`images`文件夹下，这是相对路径。如果图片无法显示，检查路径是否正确。现在请尝试将`<nav>`中的链接改为外部链接：`<ahref="">科技</a>`，点击测试是否跳转。
**（三）实践操作，巩固难点（15分钟）**
1.**分组任务：完成首页框架**
各小组按教材第38页要求，完成以下任务：
-在`<main>`中添加资讯列表（使用`<ul>`和`<li>`）
-为每个资讯项添加超链接（`<a>`标签）
-设置页脚日期（使用`<footer>`）
教师巡视指导，重点帮助解决路径错误和标签嵌套问题。
2.**难点突破：CSS基础样式应用**
在`<head>`中添加内联样式：
```css
<style>
body{font-family:Arial;}
h1{color:#0066cc;}
nava{margin-right:20px;}
</style>
```
观察文字颜色和间距变化，理解CSS如何美化页面。
**（四）展示评价，互学互鉴（7分钟）**
1.**小组代表展示**
每组派一人展示首页代码和浏览器效果，重点说明：
-使用的语义化标签
-图片路径的设置方法
-实现的样式效果
2.**师生互评**
教师点评共性问题（如`<img>`的`alt`属性缺失），学生采用"1+1"评价法（1个优点+1个建议）。例如："导航栏结构清晰，建议增加`<ul>`包裹链接使代码更规范。"
**（五）总结拓展，深化认知（3分钟）**
请同学们总结：制作网页的关键步骤是什么？（学生回答）对，先规划结构，再用标签实现，最后添加样式。下节课我们将学习CSS美化页面，请大家预习教材第40-42页，思考如何设置背景色和布局。课后完成教材第39页"实践与探索"任务，尝试为首页添加更多资讯内容。知识点梳理1.HTML文档基本结构
①DOCTYPE声明：`<!DOCTYPEhtml>`，声明文档类型为HTML5，必须位于文档第一行。
②html标签：根元素，包含整个网页内容，`<htmllang="zh-CN">`指定语言为中文。
③head标签：存放元数据，包括`<title>`（页面标题）、`<meta>`（字符编码`<metacharset="UTF-8">`）、`<link>`（外部资源）、`<style>`（内联样式）。
④body标签：可见内容容器，所有显示在页面的元素均放置在此。
2.常用HTML标签及属性
①文本标签：`<h1>`至`<h6>`（标题，重要性递减）、`<p>`（段落）、`<span>`（行内容器）。
②列表标签：`<ul>`（无序列表，需配合`<li>`）、`<ol>`（有序列表，type属性控制编号样式）。
③链接标签：`<ahref="URL">文本</a>`，href指定目标地址，target属性控制打开方式（`_self`当前窗口、`_blank`新窗口）。
④图片标签：`<imgsrc="路径"alt="描述">`，src为图片路径，alt为替代文本（图片无法显示时显示）。
3.语义化HTML5标签
①`<header>`：页面或区块头部，通常包含logo、导航等。
②`<nav>`：导航链接区域，如网站主导航栏。
③`<main>`：主要内容区域，一个页面仅使用一次。
④`<section>`：文档独立章节，可配合`<h1>`至`<h6>`标题。
⑤`<article>`：独立内容块，如新闻条目、博客文章。
⑥`<footer>`：页面或区块底部，包含版权信息、联系方式等。
4.路径类型与设置
①相对路径：相对于当前文件的位置，如`images/logo.png`（同级目录）、`../index.html`（上级目录）。
②绝对路径：完整URL地址，如`/images/logo.png`或`/images/logo.png`（网站根目录）。
③图片路径规范：确保图片文件与HTML文件位置关系正确，避免路径错误导致图片无法显示。
5.表单基础标签
①`<form>`：表单容器，action属性指定提交地址，method属性控制提交方式（get/post）。
②输入标签：`<inputtype="text">`（文本框）、`<inputtype="password">`（密码框）、`<inputtype="submit">`（提交按钮）。
③标签与输入关联：`<labelfor="id">文本</label>`与`<inputid="id">`关联，提升可访问性。
6.CSS基础样式应用
①内联样式：直接在HTML标签中使用style属性，如`<h1style="color:red;">`。
②内部样式：在`<head>`中使用`<style>`标签定义，如`<style>body{font-family:Arial;}</style>`。
③常用样式属性：
-文本：`color`（颜色）、`font-size`（字体大小）、`text-align`（对齐方式）。
-背景：`background-color`（背景色）、`background-image`（背景图片）。
-盒模型：`margin`（外边距）、`padding`（内边距）、`border`（边框）。
7.代码规范与调试
①缩进与格式：使用Tab键缩进，标签嵌套层次清晰。
②注释：`<!--注释内容-->`，用于解释代码逻辑。
③常见错误排查：标签未闭合（如`<p>`缺少`</p>`）、属性值未加引号、路径错误。
8."数码资讯网"首页实现要点
①模块划分：使用语义化标签对应页面结构（header、nav、main、footer）。
②导航栏实现：`<nav>`内嵌套`<ul>`和`<li>`，每个`<li>`包含一个`<a>`链接。
③资讯列表：`<main>`内使用`<section>`包裹每条资讯，包含`<h2>`标题和`<p>`摘要。
④页脚信息：`<footer>`内放置版权声明和联系方式，使用`<p>`标签分段。
9.浏览器兼容性注意事项
①标签兼容：HTML5语义化标签在IE9以下需通过`document.createElement`声明。
②样式重置：添加`*{margin:0;padding:0;}`消除浏览器默认间距差异。
③调试工具：使用浏览器开发者工具（F12）检查元素、修改样式、定位错误。
10.扩展知识点
①表格标签：`<table>`、`<tr>`（行）、`<td>`（单元格）、`<th>`（表头单元格）。
②音视频标签：`<videosrc="URL"controls></video>`、`<audiosrc="URL"controls></audio>`。
③响应式设计基础：使用`<metaname="viewport"content="width=device-width,initial-scale=1.0">`适配移动设备。作业布置与反馈七、作业布置与反馈1.作业布置，①基础任务：完成教材第39页"实践与探索"任务，使用HTML标签制作"我的班级介绍"网页，包含标题、导航栏、班级简介、成员列表（使用ul/ol）、页脚等模块，至少使用5种不同标签；②拓展任务：在基础任务上添加CSS样式，设置标题颜色为蓝色、段落字体大小为16px，并添加一张班级合影图片（使用img标签，注意路径设置）。2.作业反馈，①批改方式：采用在线平台（如学习通）提交，教师逐一批改，标注错误位置并给出修改建议；②反馈重点：针对HTML结构完整性、语义化标签使用规范性、图片路径准确性、CSS样式应用效果进行点评；③改进建议：对常见问题（如标签未闭合、路径错误、样式未生效）提供具体解决方案，如建议使用浏览器开发者工具调试代码，强调代码缩进和注释的重要性。典型例题讲解八、典型例题讲解1.例题：编写完整的HTML文档结构，包含DOCTYPE声明、html标签（lang="zh-CN"）、head标签（包含title"数码资讯网"和charset="UTF-8"）、body标签（内含h1"欢迎访问"）。答案：<!DOCTYPEhtml><htmllang="zh-CN"><he
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 数字化转型下WT公司成本领先战略的实施与创新研究
- 数字化转型下H大学图书馆知识管理体系的构建与优化
- 2025 奇妙的静电吸附实验作文课件
- 数字化赋能：雅澳英语培训服务管理信息系统的构建与实践
- 数字化赋能：政府采购电子化交易平台的设计、实现与实践探索
- 露天矿山管理人员安全生产试题及答案
- 银行从业资格个人贷款(初级)测试题备考试题附带答案
- 数字化浪潮下：受众主体与媒介的双向重塑与共生
- 数字化浪潮下浙江师范大学教师生态能力剖析与提升策略
- 数字化浪潮下工程机械租赁信息化平台的构建与革新
- 智能制造科普介绍
- 网络信息安全维护合同协议（2025年防火墙升级）
- 直播中控培训课件
- 人工智能在小学数学知识图谱构建与学生个性化学习中的应用教学研究课题报告
- 《应急预案编制与演练》全套教学课件
- 中医足少阳胆经
- 《AQ 2085-2025石油天然气开采重大事故隐患判定准则》专题研究报告
- 诊所医疗废物污水污物粪便处理方案
- 第3课《错了就要改》（名师课件）
- 2025新疆农业大学第二批招聘事业编制工作人员（10人）（公共基础知识）综合能力测试题带答案解析
- 2025应急管理部国家自然灾害防治研究院劳务派遣合同制技术人员招聘（公共基础知识）综合能力测试题附答案解析
评论
0/150
提交评论