下载文档原格式
《统一风格——制作框架网页》学历案（第一课时）一、学习主题本课学习主题为“统一风格——制作框架网页”，属于初中信息技术课程中的重要内容。
本课旨在让学生掌握网页制作的基本框架和统一风格的重要性，通过实践操作学会使用相关软件制作具有统一风格的简单框架网页。
二、学习目标1. 知识与技能：（1）了解网页的基本构成元素和框架设计的基本原则。
（2）掌握使用软件创建网页框架的基本操作。
（3）学会应用统一的风格设计网页，提升网页的视觉效果和用户体验。
2. 过程与方法：（1）通过观察和分析优秀网页案例，学习如何运用统一风格进行网页设计。
（2）通过实践操作，掌握网页框架的制作流程。
3. 情感态度与价值观：（1）培养学生对网页设计的兴趣和热爱，激发其创新意识和审美能力。
（2）让学生理解统一风格在网页设计中的重要性，并能在实际设计中运用。
三、评价任务1. 知识点评价：通过课堂小测验和课后作业，评价学生对网页基本构成元素和框架设计原则的理解程度。
2. 操作技能评价：通过学生制作的网页框架作品，评价其操作技能的掌握情况。
3. 创意与审美评价：通过学生对网页统一风格的应用，评价其创意和审美能力。
四、学习过程1. 导入新课：通过展示几个具有统一风格的优秀网页案例，引导学生了解网页设计的基本要求和美感，激发学生的学习兴趣。
2. 新课讲解：讲解网页的基本构成元素和框架设计的基本原则，让学生了解网页的构成和设计思路。
3. 实践操作：指导学生使用相关软件进行网页框架的制作，包括设置页面布局、添加元素、调整样式等操作。
4. 案例分析：分析几个具有统一风格的网页案例，让学生了解如何运用统一风格进行网页设计，并引导学生思考如何在自己的作品中应用。
5. 学生实践：学生自主设计并制作一个具有统一风格的简单框架网页，教师巡视指导，及时解答学生疑问。
6. 作品展示与评价：学生展示自己的作品，互相评价和学习，教师根据评价任务进行评价，并给出改进建议。
第一章习题1．HTML指的是（ A ）。
A超文本标记语言（Hyper Text Markup Language）B家庭工具标记语言（Home Tool Markup Language）C超链接和文本标记语言（Hyperlinks and Text Markup Language）2．web标准的制定者是（ B ）。
A 微软B万维网联盟（W3C）C网景公司（Netscape）3．用HTML标记语言编写一个简单的网页，网页最基本的结构是（ D ）。
A <html> <head>…</head> <frame>…</frame> </html>B <html> <title>…</title> <body>…</body> </html>C <html> <title>…</title> <frame>…</frame> </html>D <html> <head>…</head> <body>…</body> </html>4．从IE浏览器菜单中选择____查看 源文件______命令，可以在打开的记事本中查看到网页的源代码。
5．实现网页交互性的核心技术是_______ JavaScript _______________。
6．CSS的全称是________ Cascading Style Sheet __________ ______。
7．写出你了解的专业网页编辑制作工具_____Dreamweaver_，_ EditPlus ___________。
8．URL的全称是____Uniform Resource Locator _____________________________。
《事半功倍——制作网页模板》学历案（第一课时）一、学习主题本课学习主题为“事半功倍——制作网页模板”。
在信息技术课程中，网页制作是培养学生数字化技能和逻辑思维的重要环节。
本课时将重点学习如何高效地制作网页模板，包括网页布局、色彩搭配和素材应用等基础知识。
二、学习目标1. 了解网页模板的概念和作用，认识常见的网页布局方式。
2. 掌握使用HTML和CSS基础语法制作简单的网页模板。
3. 学会使用常见的设计软件进行网页素材的选取与编辑。
4. 培养创新思维，能结合实际需求设计出具有个性的网页模板。
5. 学会在团队合作中分工协作，共同完成一个网页模板的设计与制作。
三、评价任务1. 课堂表现评价：学生在课堂上的参与度、互动性以及实际操作能力。
2. 作品质量评价：学生制作的网页模板的布局、色彩搭配、素材应用及HTML、CSS代码的规范性。
3. 团队合作评价：学生在团队合作中展现的沟通能力、协作能力和贡献度。
四、学习过程1. 导入新课（5分钟）- 老师简要介绍网页模板的重要性和应用场景，激发学生的兴趣。
2. 基础知识讲解（15分钟）- 讲解网页模板的概念、作用及常见的网页布局方式。
- 介绍HTML和CSS基础语法，以及如何使用这些语言制作简单的网页模板。
3. 软件操作演示（10分钟）- 老师演示使用设计软件进行网页素材的选取与编辑，展示如何将设计转化为实际可用的网页模板。
4. 实践操作（20分钟）- 学生根据老师提供的素材或自行设计素材，使用HTML和CSS编写简单的网页模板。
- 学生之间可相互讨论、交流心得，老师在此过程中给予指导和帮助。
5. 分组合作（20分钟）- 学生分组，每组选择一个主题（如学校官网、社团活动等），共同设计并制作一个完整的网页模板。
- 每组成员需明确分工，如布局设计、色彩搭配、素材选取等，确保团队合作顺利进行。
6. 课堂总结（5分钟）- 老师总结本课学习的重点和难点，强调网页模板的重要性和实际应用价值。
二、实验过程（实验步骤、记录、数据、分析）代码为：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>清华大学</title><style type="text/css">* {margin: 0;padding: 0;border: none;}body {margin: 0 auto;width: 1000px;font-size: 12px;}.menu ul li {float: left;list-style: none; position: relative;}.menu ul li a {display: block; background-color: #900; background: #9FF; padding: 0 20px;text-decoration: none; line-height: 35px;}.menu ul li a:hover {background-color: #C0F; color: #000;}.menu ul li ul { visibility: hidden; width: 100px;position: absolute;left: 5px;top: 35px;}.menu ul li ul li {font-size: 12px;}.menu ul li ul li a { display: block;width: 120px;height: 35px;background: #3F0;}.menu ul li ul li a:hover {color: #000;background-color: #9F3;}.menu ul li:hover ul, .menu ul li a:hover ul { visibility: visible;}#id1{width:1000px;height:auto;float:left;}#id2 {float:left;}#id3 {width:200px; height:290px; font-size:30px; float:left;}#id4 {font-size:14px; }#id5 {width:250px; height:300px; font-size:24px; float:left;}#id6 {width:235px;font-size:17px; }#id7 {width:235px; font-size:17; float:left;}#id8{width:230px; height:300;font-size:17px; }#id9 {width:170px; height:300px; float:left;}#id10 {width:190px;height:300px;font-size:17px;float:left;}#id11 {width:1000px;height: auto;float:left;}</style></head><body><div id="id1"><img src="7.jpg" width="870" /></div> <div ><ul><li><a href="#">清华新闻</a></li> <li><a href="#">学校概况</a><ul><li><a href="#">校长致辞</a></li> <li><a href="#">学校沿革</a></li> <li><a href="#">历任领导</a></li> <li><a href="#">现任领导</a></li> <li><a href="#">组织机构</a></li> <li><a href="#">统计资料</a></li> </ul></li><li><a href="#">院系设置</a> </li> <li><a href="#">师资队伍</a><ul><li><a href="#">概况</a></li><li><a href="#">杰出人才</a></li> </ul></li><li><a href="#">教育教学</a><ul><li><a href="#">本科生教育</a></li><li><a href="#">研究生教育</a></li><li><a href="#">留学生教育</a></li><li><a href="#">继续教育</a></li></ul></li><li><a href="#">科学研究</a><ul><li><a href="#">科研项目</a></li><li><a href="#">科研机构</a></li><li><a href="#">科研合作</a></li><li><a href="#">科研成果和知识产权</a></li> <li><a href="#">学术交流</a></li></ul></li><li><a href="#">招生信息</a><ul><li><a href="#">本科生招生</a></li> <li><a href="#">研究生招生</a></li> <li><a href="#">留学生招生</a></li> </ul></li><li><a href="#">人才招聘</a><ul><li><a href="#">招聘计划</a></li> <li><a href="#">招聘信息</a></li> <li><a href="#">我要应聘</a></li> </ul></li><li><a href="#">图书馆</a> </li><li><a href="#">走进清华</a><ul><li><a href="#">校园生活</a></li><li><a href="#">校园风光</a></li><li><a href="#">实用信息</a></li></ul></li></ul></div><div id="id2"><img src="1.jpg" width="870" /></div><div id="id3"><td>清华新闻</td><div id="id4"><li><a href="#"> 【群众路线教育实践】马院领导班子召开会议对照检查材料</a> </li><td> </td><li><a href="#">973首席科学家林圣彩作客清华讲解代谢平衡</a></li><td> </td><li><a href="#">清华美院陈楠当选中华海外联谊会理事会理事</a></li><td> </td><li><a href="#">【群众路线教育实践】胡和平到核研院进行教育实践活动专题调研</a></li><td> </td><li><a href="#">"袁驷到经管学院进行24次教育工作讨论会调研</a></li></div></div><div id="id5"><img src="2.jpg" /><img src="3.jpg" /><div id="id6"><td><a href="#">"清华柴继杰研究组在《科学》发文揭...</a></td><ul> </ul><ul>柴继杰教授等在《科学》发文，首次报道植物模式识别受体FLS2及共受体BAK1与细菌模式分子鞭毛蛋白保守基序flg22三元复合物晶体结构，并通过结构分析和体内外生化实验揭示该复合物活化的分子机制。
第一章习题1．HTML指的是（ A ）。
A超文本标记语言（Hyper Text Markup Language）B家庭工具标记语言（Home Tool Markup Language）C超链接和文本标记语言（Hyperlinks and Text Markup Language）2．web标准的制定者是（ B ）。
A 微软B万维网联盟（W3C）C网景公司（Netscape）3．用HTML标记语言编写一个简单的网页，网页最基本的结构是（ D ）。
A <html> <head>…</head> <frame>…</frame> </html>B <html> <title>…</title> <body>…</body> </html>C <html> <title>…</title> <frame>…</frame> </html>D <html> <head>…</head> <body>…</body> </html>4．从IE浏览器菜单中选择____查看 源文件______命令，可以在打开的记事本中查看到网页的源代码。
5．实现网页交互性的核心技术是_______ JavaScript _______________。
6．CSS的全称是________ Cascading Style Sheet __________ ______。
7．写出你了解的专业网页编辑制作工具_____Dreamweaver_，_ EditPlus ___________。
8．URL的全称是____Uniform Resource Locator _____________________________。
