高一信息技术教学设计：网页的鉴赏及其制作初步_第1页
高一信息技术教学设计：网页的鉴赏及其制作初步_第2页
高一信息技术教学设计：网页的鉴赏及其制作初步_第3页
高一信息技术教学设计：网页的鉴赏及其制作初步_第4页
高一信息技术教学设计：网页的鉴赏及其制作初步_第5页
已阅读5页，还剩11页未读， 继续免费阅读

下载本文档

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

文档简介

高一信息技术教学设计：网页的鉴赏及其制作初步一、教材分析本课选自教育科学出版社出版的《信息技术基础（必修）》第二章第四节内容，是学生在掌握信息获取、加工、表达等基本技能后，向信息发布与交流领域延伸的关键一环。前三节分别讲授了信息及其特征、信息技术发展沿革、计算机硬件软件体系结构，这些内容为学生理解网页作为信息载体的工作机理奠定了必要的知识储备。本节的核心任务在于引导学生建立对网页作品的审美判断能力，并初步掌握静态网页的设计与制作方法。教材编写遵循由感性到理性、由鉴赏到实践的认知规律。课文首先呈现若干典型网页案例，引导学生观察、评析，进而归纳出优秀网页在内容、结构、视觉、技术四个维度的共性特征；随后以一个完整的"班级主页"项目为载体，穿插讲解站点规划、页面布局、色彩搭配、超链接构建等操作要领。这种编排方式符合高一学生的认知特点，但存在两个不足：一是鉴赏部分偏重于外观描述，对网页背后的人文内涵与技术逻辑挖掘不够深入；二是制作部分的操作步骤以叙述性文字呈现，缺乏对学生认知负荷的差异化考量。在核心素养视域下，本节课承载着计算思维与信息社会责任的双重培育功能。学生通过解构网页结构，能够将一个复杂的视觉系统抽象为可分解、可重组的逻辑模块，这是计算思维中"抽象与建模"的典型体现。同时，在鉴赏环节中对优秀网站价值观导向的关注，对劣质网站信息陷阱的辨识，又直接关联着信息社会责任这一核心素养的落地。二、学情分析高一年级学生在信息技术课程标准所规定的前修内容中，已熟练掌握Windows操作系统的文件管理、浏览器的常规使用、搜索引擎的基本检索方法。绝大多数学生拥有较为丰富的互联网浏览经验，能够区分新闻类、社交类、教育类、视频类等常见网站类型，但对"为什么这样设计"缺乏反思性思考。在制作层面，多数学生在初中阶段接触过Word、PowerPoint等图文编辑工具，对文字格式设置、图片插入、文本框运用等操作有较好的迁移基础，但对HTML语言、网页专用编辑器（如Dreamweaver、FrontPage）的使用经验几乎为零。从学习心理来看，高一学生处于形式运算阶段，具备一定的抽象逻辑思维能力和审美判断能力。他们对个性化表达有强烈需求，渴望通过技术手段实现创意构想。但与此同时，也存在三个潜在的学习障碍：其一，将网页制作等同于Word排版，忽视HTML的标记语义与结构化特征；其二，习惯于线性思维，难以建立超链接所代表的非线性信息组织方式；其三，对色彩、字体、版式的选择多凭个人喜好，缺乏设计原则的指导。三、教学目标（一）知识与技能1.理解网页的基本构成要素，包括文字、图像、动画、超链接、表单等。2.掌握优秀网页的鉴赏方法，能够从主题表达、信息架构、视觉设计、技术实现四个维度进行系统评析。3.初步掌握HTML的基本标记语法，能够使用记事本或FrontPage编写包含标题、段落、图片、超链接的简单网页。4.了解网站规划的基本流程，掌握文件夹分类管理、首页命名规范等操作惯例。（二）过程与方法5.通过案例分析与小组讨论，发展观察、比较、归纳的认知策略。6.通过项目实践，掌握"规划设计—素材准备—编码实现—测试修改"的网页制作一般流程。7.通过同伴互评与作品展示，培养批判性思维与有效表达能力。（三）情感态度与价值观8.体验网页设计的创造乐趣，激发持续学习信息技术的内在动机。9.树立健康的网络审美观，自觉抵制低俗、暴力、虚假等不良信息。10.培养尊重知识产权的意识，养成规范使用网络资源的习惯。四、教学重点与难点教学重点：网页构成要素的辨识；优秀网页的四维评析方法；HTML基本标记的使用。教学难点：超链接的逻辑构建；HTML标记语义的理解；网页整体风格的协调统一。五、教学方法本课采用"案例导引—任务驱动—协作探究"三位一体的教学模式。具体而言，以"班级主页"项目为明线贯穿始终，以网页鉴赏方法论为暗线渗透于各个环节。教学方法的选择注重以下三个结合：讲授与示范相结合，确保抽象概念具象化；自主探究与小组协作相结合，兼顾个体差异与群体智慧；作品创作与多元评价相结合，促进学习成果的可视化与可迭代化。六、教学准备（一）硬件环境多媒体投影系统、互联网接入设备、学生机房（建议一人一机配置）。（二）软件资源Windows操作系统、FrontPage2003或DreamweaverCS5、IE或Chrome浏览器、ACDSee看图软件、Snagit截图工具。（三）素材准备教师提前收集五类典型网页截图（政府门户、商业品牌、教育文化、个人博客、电子政务），制作"班级主页"项目的素材包（含校徽图片、校园风光照片、班级活动文字介绍），准备HTML源码示例文档。七、教学过程（一）导入新课（8分钟）课堂伊始，教师在投影屏幕展示三组网页截图：第一组是清华大学官方网站首页，第二组是某明星个人微博页面，第三组是某商业购物网站促销页面。教师以提问的方式引导学生观察："这三类网页在内容选择、布局方式、色彩运用上各有什么特点？如果让你来设计一个网页介绍你的班级，你会如何入手？"在学生自由发言的基础上，教师顺势揭示课题的核心命题——网页不仅是信息的容器，更是设计者意图、审美与技术能力的综合呈现。本节课，我们将首先学会鉴赏网页，进而动手制作一个属于自己的网页。设计意图：从学生已有的网络浏览经验切入，降低陌生感；同时通过三类风格迥异的网页对比，激发学生的探究兴趣，为后续的鉴赏环节铺设认知冲突。（二）网页的鉴赏（18分钟）1.案例展示与初步感知（4分钟）教师依次展示六个具有代表性的网页案例，分别为：·案例一：人民网首页（综合门户类）·案例二：故宫博物院官网（文化教育类）·案例三：小米科技官网（商业品牌类）·案例四：豆瓣读书（社区类）·案例五：某中学班级主页（学生作品类）·案例六：某个人摄影博客（个人展示类）要求学生以四人小组为单位，用5分钟时间快速浏览这些网页，记录下每个网页给自己留下最深刻印象的三个特征。小组代表汇报时，教师在黑板上实时板书关键词，逐步归纳出网页鉴赏的四个基本维度。2.四维评析方法建构（10分钟）教师结合板书，引导学生系统梳理优秀网页的共性特征：第一，主题鲜明性。优秀的网页必定有清晰的内容定位，无论是传递知识、展示形象还是提供服务，主题的单一性与一致性是首要标准。以故宫博物院官网为例，其所有栏目均围绕文物典藏、历史研究、文化传播展开，绝无冗余信息的干扰。反观某些个人博客，主页堆砌日记、照片、游戏链接、购物广告，主题涣散，访问者难以形成稳定的心理预期。第二，信息架构合理性。网页不是信息的随机堆砌，而是有组织的信息系统。这要求设计者具备结构化思维——主次分明、层次清晰、导航便捷。教师可借助人民网首页的截图，剖析其"头条—要闻—地方—专题—便民"的栏目逻辑，解释"从左到右、从上到下"的视觉浏览习惯如何与信息的重要性梯度相对应。第三，视觉设计协调性。色彩、字体、图像、留白等视觉元素应服务于主题表达，而非喧宾夺主。讲解时可对比小米科技官网的简约工业风与豆瓣读书的文艺清新风，让学生体会不同色彩心理与字体性格对网站气质的塑造作用。同时强调"统一中求变化"的版面设计原则——主色调不超过三种，字体层级控制在两到三种，图片风格保持一致。第四，技术实现规范性。这一维度对初学者而言较为隐蔽，却决定了网页的可用性与可维护性。教师可现场操作，演示查看网页源代码、检测页面加载速度、测试不同分辨率下的显示效果，让学生直观感受技术细节对用户体验的影响。3.反面案例对照（4分钟）教师出示三个存在明显缺陷的网页：其一，首页充斥着闪烁的GIF动画和刺眼的对比色，造成视觉疲劳；其二，导航栏链接指向错误页面或已删除资源；其三，正文文字密密麻麻，缺乏分段与重点标注。学生分组讨论其问题所在，并尝试提出改进建议。设计意图：通过正面案例的归纳建立鉴赏标准，再以反面案例的辨析强化标准运用，形成"建构—辨析—内化"的认知闭环。小组协作机制有效降低了单纯讲授的认知负荷，提升了课堂参与度。（三）网页制作初步（18分钟）4.项目任务发布（2分钟）教师宣布本节课的实践任务：四人小组合作，制作一个包含班级介绍、校园风光、师生风采、联系方式四个栏目的静态班级主页。要求在25分钟内完成首页与至少一个二级页面的设计与制作，最终提交网页文件夹。5.知识讲授：HTML基本标记（10分钟）教师切换到记事本程序，逐行输入以下HTML代码，并在浏览器中实时预览：<html><head><title>高一（3）班主页</title></head><bodybgcolor="FFFFCC"><h1align="center">欢迎来到高一（3）班</h1><hrwidth="80%"color="0066CC"><p>本班现有学生48人，是一个团结奋进的集体。</p><p>本班班主任：王老师</p><p><ahref="photo.html">查看班级照片</a></p><p><imgsrc="school.jpg"width="300"height="200"></p></body></html>讲解过程中，教师需要重点强调以下几点：·HTML是超文本标记语言，其本质是通过成对的标签告诉浏览器"这是什么"以及"怎样显示"。与Word所见即所得的编辑方式不同，HTML需要先编写代码，再由浏览器解释执行。·<html>是根标签，所有其他标签都必须嵌套在它内部。·<head>标签内放置网页的元信息，<title>标签内的文字将显示在浏览器的标题栏或标签页上。·<body>标签是网页主体内容的容器，其属性bgcolor可设置背景颜色。·<h1>标签定义一级标题，align属性控制对齐方式，值center表示居中。·<hr>标签插入水平分隔线，width和color属性分别控制宽度与颜色。·<p>标签定义段落，浏览器会自动在段落前后添加空白。·<a>标签定义超链接，href属性指定链接目标地址，可以是另一个网页、电子邮件地址或锚点。·<img>标签插入图片，src属性指定图片路径，width和height属性控制显示尺寸。讲解完毕后，教师演示将上述代码保存为index.html，并在浏览器中打开查看效果的过程。学生同步操作，确认能够独立完成从代码编写到页面预览的完整流程。6.操作要领补充（6分钟）在学生初步掌握基本标记的基础上，教师补充以下操作规范：·文件夹结构：建立专门的文件夹存放网页文件，例如"班级主页"文件夹内包含images子文件夹存放图片资源、css子文件夹存放样式表（如有）、各HTML文件平级存放。这种结构便于后续维护与上传发布。·文件命名：首页必须命名为index.html或default.html；其他网页文件名使用英文或拼音，避免使用空格和特殊字符；图片文件名同样遵循简洁明了的原则。·路径引用：相对路径是网页内部的常用引用方式，例如<imgsrc="images/school.jpg">表示引用images子文件夹下的school.jpg图片。·编码保存：HTML文件建议使用UTF8编码，以避免中文乱码问题。设计意图：HTML标记语法对高一学生而言是全新的知识领域，采用"代码—预览"同步演示的方式，能够让学生即时看到代码与显示效果的对应关系，降低抽象语法的理解难度。操作规范的提前介入，有助于养成良好的职业习惯。（四）学生实践与教师指导（30分钟）学生以四人小组为单位开展项目实践。各小组需明确分工：一人负责整体规划与素材整理，一人负责代码编写，一人负责图片处理与配色，一人负责测试与修改。教师在巡视过程中，重点关注以下几类典型问题：7.代码编写类问题：标签未正确闭合、属性值缺少引号、路径引用错误。教师应在第一时间指导学生使用浏览器的"查看源代码"功能进行排查。8.设计美学类问题：图片尺寸过大导致页面变形、色彩搭配杂乱、字号过小影响阅读。教师应引导学生回溯鉴赏环节建立的四维标准，自主发现问题。9.协作流程类问题：分工不明导致部分工作无人承担、版本冲突造成内容丢失。教师应协助小组建立简单的工作协调机制。在实践过程中，教师预留最后5分钟，要求各小组将完成的网页文件夹复制到教师机的指定共享目录，准备进行作品展示。设计意图：项目化学习是本节课的核心环节，充足的实践时间是知识内化的必要保障。教师角色的转换——从讲授者到观察者、引导者、协助者——体现了"以学定教"的教学理念。（五）作品展示与多元评价（12分钟）教师从共享目录中随机抽取三到四个小组的作品，通过投影仪进行展示。每组作品由该组的"代言人"进行1分钟的设计思路介绍，随后由其他小组和教师共同进行点评。评价采用"三维度两主体"模式：·技术维度：代码是否规范、链接是否有效、显示是否正常。·艺术维度：主题是否突出、布局是否合理、视觉是否协调。·协作维度：分工是否明确、过程是否有序、成品是否完整。·评价主体：小组自评（10%）、小组互评（30%）、教师评价（60%）。教师在点评时应以肯定性评价为主，重点指出作品的亮点与特色，对于存在的共性问题集中讲解。例如，若多数小组出现导航混乱的问题，可现场演示如何通过文字列表与超链接的结合构建清晰的导航结构。设计意图：作品展示环节既是对学生学习成果的检验，也是知识再巩固的过程。多元评价主体的介入，有助于培养学生的批判性思维与客观表达能力。（六）课堂小结与作业布置（4分钟）教师引导学生回顾本节课的核心内容，以思维导图的形式在黑板上呈现知识结构：网页鉴赏四维度（主题鲜明性、信息架构合理性、视觉设计协调性、技术实现规范性）↓网页制作五步骤（规划设计—素材准备—编码实现—测试修改—发布分享）↓HTML基本标记（html、head、title、body、h1h6、p、hr、a、img）课后作业分两个层次：·基础作业：个人独立完成一个介绍自己兴趣爱好的单页网页，要求至少包含一段文字、一张图片、一个外部超链接。·拓展作业：尝试为班级主页增加一个"学习园地"栏目，包含若干学习资源链接，并在下节课进行展示交流。八、板书设计

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

温馨提示

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

最新文档

评论

0/150

提交评论