高中信息技术选修课程之网站实现单元教学设计_第1页
高中信息技术选修课程之网站实现单元教学设计_第2页
高中信息技术选修课程之网站实现单元教学设计_第3页
高中信息技术选修课程之网站实现单元教学设计_第4页
高中信息技术选修课程之网站实现单元教学设计_第5页
已阅读5页，还剩7页未读， 继续免费阅读

付费下载

下载本文档

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

文档简介

高中信息技术选修课程之网站实现单元教学设计一、教学设计的整体构想本课定位为高中信息技术选修模块中“网络技术应用”方向的核心实践课，对应教科版选修3第四章第三节“网站实现”的内容。经过前几课时的学习，学生已经完成了网站主题确立、栏目规划、素材收集与页面布局设计等一系列前期工作，手中握着一份相对完整的网站规划书和设计草图。本课的任务，就是把纸面上的规划变成可以在浏览器中打开、可以点击跳转、可以真实运转的网站。这是一个从“想”到“做”、从“图纸”到“建筑”的关键跨越。从学情来看，高二年级学生经过必修模块的锤炼，具备基本的信息加工能力和软件操作经验，多数学生能熟练使用一种所见即所得的网页编辑工具，部分学生在课外接触过HTML代码，甚至有个别学生尝试过用博客平台或建站工具搭建过个人主页。但普遍存在三个短板：一是对网站文件结构缺乏工程化认识，建好的站点文件散乱、链接路径混乱，换一个文件夹就“全线崩溃”；二是只会“点按钮”做页面，对网页背后的HTML标记语言一知半解，遇到工具无法直接实现的效果便束手无策；三是缺乏团队协作开发的经验，小组分工流于形式，最后往往变成一个人包办。基于这样的判断，本课的教学立意不是单纯教会学生操作某个软件，而是以“网站实现”为载体，帮助学生建立起三个层次的认知：第一层次是技术操作层，掌握用HTML与网页编辑工具相结合的方法实现页面；第二层次是工程规范层，理解站点目录规划、文件命名规则、相对路径等保证网站可迁移、可维护的内在逻辑；第三层次是协作文化层，体会有规划、有分工、有标准的团队开发方式。三个层次层层递进，共同服务于“把网站真正做出来、做对、做好”这一核心目标。二、教学目标的确立知识与技能方面，学生能够依据前期制定的网站规划书，在本地磁盘上建立结构清晰的站点目录；能够综合运用表格布局与框架组织页面结构，完成首页与不少于两个二级页面的制作；能够在页面中正确插入文字、图像、水平线、背景等元素，并对页面进行基本的美化修饰；能够创建页内链接、站内页面间链接与外部链接三类超链接，保证全站导航畅通；能够读懂并简单修改HTML源代码中的常用标记，实现编辑工具不易直接完成的效果。过程与方法方面，学生经历“搭建站点—制作页面—建立链接—测试调试—发布检查”的完整网站实现流程，体会工程化开发中“规划先行、规范护航、测试兜底”的工作方法；通过对照工具界面与源代码的“双视图”观察，建立可视化操作与HTML标记之间的对应关系，逐步具备透过现象看本质的技术理解力。情感态度与价值观方面，学生在小组协作开发中体验分工与合力的关系，养成遵守共同约定、尊重同伴劳动成果的职业素养；在反复的调试排错中磨炼耐心与细致，体会“差一点就全错”的技术工作的严谨性；通过本组成果从图纸变为现实的完整经历，获得真实而深刻的创造成就感，增强对信息技术学科价值的认同。三、教学重点与难点分析教学重点是网站实现的整体流程与超链接体系的建立。流程清楚，学生才能有条不紊地推进工作；链接畅通，网站才真正成为“网”而不是一堆孤立页面的堆砌。教学难点集中在两处。其一是相对路径的理解与运用。学生在图形界面下建立的链接，背后是指向文件的地址，一旦站点文件夹位置改变，绝对路径全部失效，这是历届学生最容易“踩坑”的地方。其二是表格布局中嵌套关系的处理。用不可见的表格线把页面划分成规整的区域，需要学生具备一定的空间规划能力和耐心，单元格的拆分合并、嵌套表格的层级关系，常常让初学者顾此失彼。突破策略上，对相对路径采用“先制造故障、再解剖原因”的方式，让学生亲手把一个建好的站点文件夹从D盘移到桌面，亲眼看到图片全丢、链接全断的惨状，再回到HTML源代码中找出那些写死的盘符路径，亲手改成相对路径并重新测试。故障是最好的老师，一次真切的失败胜过十次口头叮嘱。对表格布局则采用“图纸还原法”，先把教师提供的成品页面截图交给小组，要求用铅笔在图上画出隐藏的表格线，看清布局骨架之后再动手实现，变盲目试误为有依据的建构。四、课前准备与教学环境硬件环境为配备投影与广播教学系统的计算机网络教室，每名学生一台可上网的计算机，组建三至四人小组。软件方面，学生机安装Dreamweaver或同类网页编辑工具、常用浏览器、图像处理软件与解压缩工具。教师提前在教学平台上发布三个资源包：一是各小组上节课完成的网站规划书电子稿；二是统一整理的素材库，包含经过尺寸预处理的图片、图标与背景素材，避免学生把课堂时间消耗在找图修图上；三是“半成品站点”——一个故意留有若干断链、路径错误和布局错位问题的示例网站，用于课中的排错训练环节。教师还需在机房内搭建一个简易的本地Web服务环境或共享发布目录，使学生完成的站点能够真正“发布”出来供全班访问，让成果的真实性得到保障。五、教学过程（一）情境唤醒：从图纸到楼宇的追问（约6分钟）上课伊始，教师在大屏幕上先后展示两件东西：上一份学生作品——一份排版精美的网站规划书，以及一个与之对应的、真实运转的优秀学生网站。点击导航，页面流畅切换，图片渐次呈现。教师只问一个问题：“规划书谁都会写，图画得也很漂亮，可中间的这一步——把它变成真的网站——靠什么？”学生七嘴八舌，有的说靠软件，有的说靠代码。教师顺势板书课题“网站实现”，并亮明本课的总任务：每个小组要把自己组的规划书变成一个可以在全班机器上访问的真实网站，下课前全班互访打分。任务真实、时限明确、有观众有评价，学生的投入度从这一刻被点燃。随后教师用两分钟明确评价维度：结构完整（栏目与规划书一致）、导航畅通（所有链接可达）、版面规范（布局整齐、色彩协调）、内容充实（图文并茂、无错别字）、团队协作（分工记录完整）。评价前置，让学生在动手之前就知道“好网站”长什么样。（二）知识奠基：读懂网页的“基因”（约10分钟）教师用一个极简案例带领学生认识HTML。先用记事本写下一个只含几行标记的文件，保存为后缀为html的文件，双击用浏览器打开。学生看到标记与显示效果的对应：<html>包裹全部内容，<head>存放网页的头部信息，<title>里的文字出现在浏览器标题栏，<body>里的内容才是页面上看得见的部分，<p>分段、<h1>到<h6>是六级标题、<img>引入图片、<a>配合href属性制造链接。教师特别强调标签的三个规律。一是成对出现，有开始就有结束，就像括号一样必须闭合；二是可以嵌套，但不能交叉，层层包裹井然有序；三是属性写在开始标签里，属性名与属性值用等号连接，值用引号括起。讲完之后请两名学生上台“玩找茬”：教师给出一段故意写错的代码，有的标签忘了闭合，有的引号只写了一半，让全班一起把错误揪出来。这一步用时不多，却为后面读懂源代码、诊断故障埋下关键的伏笔。接着教师打开Dreamweaver，把刚才那个简单页面载入，切换到“代码与拆分”视图，让学生直观看到：可视化编辑区里拖入一张图片，代码区立刻自动生成对应的<img>标记；修改代码里的标题文字，设计视图同步变化。学生由此明白一个深刻的道理：所见即所得的工具并没有取消代码，它只是替我们写代码。会用工具是合格的技工，懂代码才有可能成为工程师。为控制难度，本课对代码的要求定位为“能读懂、会小改”，不要求手写完整页面。（三）工程启蒙：先建“工地”再盖楼（约7分钟）教师演示在D盘建立站点根文件夹，命名只用小写英文字母与数字，例如“class5site”。这一步要特别提醒：文件名与文件夹名坚决不用汉字和空格，因为部分服务器与浏览器对中文路径支持不佳，这是无数初学者栽过跟头的细节。在根文件夹内规划子目录：images存放图片，css存放样式（本课只作介绍），pages存放二级页面。教师引导学生体会这种组织方式背后的工程思想：分门别类、各得其所，网站日后无论是扩充内容还是整体迁移，都有章可循。规模再大的门户网站，本质上也是这样一个层级分明的文件结构。随后进入本课第一个难点的攻坚。教师在站点内建一个页面，插入images文件夹中的一张图片，保存后用浏览器打开，一切正常。接着当着全班的面，把整个站点文件夹剪切到桌面，再刷新浏览器——图片变成一个刺眼的红叉。教室里响起一片惊讶声。教师不急不缓地打开这段代码，地址栏里赫然写着以D盘盘符开头的绝对路径。教师请学生思考：当你的网站交给老师、打包给同学、上传到服务器时，对方的电脑里哪来的你的D盘？于是引出相对路径的概念：地址不指向磁盘的绝对位置，而描述“从自己所在的文件出发，怎么找到目标文件”。同一文件夹直接写文件名，下一级用斜杠向下，上一级用两个点加斜杠返回。学生当场把代码里的绝对路径改成相对路径，再次移动站点文件夹测试，图片纹丝不动。这个先摔跟头再学走路的过程，让“相对路径”四个字在学生心里扎下了根。（四）任务驱动：小组协同实现网站（约35分钟）这是本课的主体环节。各小组依据自己的规划书领取任务单，任务分解为四个递进的子任务，每组内部协商分工，记录员填写分工表，一人统筹首页，其余成员各负责一至两个栏目页面。子任务一：搭建站点骨架。全组在组长的机器上建立标准站点目录，或按规定结构分布到各成员的机器上，约定统一的文件命名规则：首页一律命名为index，栏目页用栏目拼音命名，图片按“栏目缩写加序号”命名。教师巡视时重点检查命名规范与目录结构，发现用“新建文件夹”“未命名1”这类随意命名的，立即叫停纠正。规范的种子必须在这一刻种下。子任务二：制作首页。首页是网站的门面，也是表格布局的主战场。各组先用铅笔把自己设计的首页布局图上的表格线画出来，标清每个单元格里放什么内容，再在编辑工具中插入相应行列的表格，将表格边框粗细设为零使其不可见，通过合并与拆分单元格形成标题区、导航区、正文区与版权区。需要精细定位的部分允许使用嵌套表格。教师预设了两类常见困难：一是单元格对不齐，解决思路是检查行高列宽与合并关系的冲突；二是在单元格中插入的表格撑破了外框，解决思路是把宽度设为百分比而非固定像素，让布局具有一定弹性。教师不代劳，只点拨思路，把试误的空间留给学生。子任务三：丰富页面内容与修饰。各页按规划填入文字与图片，设置背景颜色或背景图片，调整文字的字号、颜色与对齐方式，用水平线分隔内容区块。教师在此环节渗透两条美学原则：一屏之内的主色不超过三种，花里胡哨不等于好看；同一网站各页面的版式、配色、导航位置保持一致，一致性是专业感的来源。这两条原则直指学生作品最常见的“辣眼睛”问题。子任务四：建立全站链接网络。这是点石成金的一步。各组在首页导航区为每个栏目建立指向相应页面的站内链接，在每个二级页面上建立“返回首页”的链接，并在合适位置链接一到两个与主题相关的外部优质网站作为拓展资源，外部链接要求设置为在新窗口打开。教师提醒每建一个链接就立即在预览中点击测试，做到“建一个、验一个”，而不是等全部做完再回头排查。整个制作过程中，教师的位置在行间而非讲台。巡视时带着三个问题观察各组：分工是否真正落实，遇到障碍是互助还是单干，命名与路径规范是否被遵守。对于普遍性问题，如多个小组同时出现图片链接失效，教师随时按下广播键进行两分钟集体会诊；对于个别问题则以小组内低声指导为主。机房角落里贴着老师事先准备的“求助阶梯”：先查任务单，再问同伴，再读帮助文档，最后举手问老师——培养的是学生解决问题的秩序感。（五）联调排错：让网站经受考验（约12分钟）离课结束还有一刻钟时，教师发布“质检令”：各组把分散的页面汇总拷贝到组长机器的站点目录中，进行整站联调。汇总的过程本身就是一次大考——文件名冲突、路径错乱、导航在别的机器上失效等问题集中爆发，各组在焦头烂额中深刻体会到前面所有规范要求的分量。教师此时回归“教练”角色，引导学生用系统的方法排查：链接失效先查路径写法，图片不显示先查文件是否拷贝齐全、扩展名是否正确，页面错位先查表格行列设置。对进度较快、提前完成的小组，教师发放那个埋有若干错误的“半成品网站”压缩包，开展“火眼金睛”擂台赛：看哪组找出的故障多、修复得快。这个弹性设计保证了不同层次学生在同一时段都有事可做、有事能挑战。随后各组把调试通过的站点拷入班级共享发布目录。教师打开任意两三个小组的站点，在教师机上点击访问，全班目光聚焦大屏幕，看别人的网站如何运转，也悄悄和自己的作品暗暗较劲。（六）展示互评与总结提升（约8分钟）按照课始公布的五个维度，全班开展“一分钟快闪互访”：每个学生浏览器里轮开三个其他小组的站点，在教学平台的评价表中勾选评分并留下一句“最欣赏的地方”和一条“改进建议”。教师随机请两名学生口头点评，要求言之有物，既说优点也说依据。教师做总结陈词，把本课的技术动作重新归入工程框架：今天大家完整走通了一条路——依规划建站点、按规范做页面、用链接织成网、靠测试保质量。工具会更新换代，今天学的软件也许几年后就被淘汰，但“规划先行、规范护航、测试兜底”的工程思想不会过时，这才是本课真正要带走的财富。教师同时展示一个用纯代码手工编写的简洁页面，告诉学生：工具替我们写字，但我们应当认识字。有兴趣的同学课后可以尝试脱离可视化工具，用记事本敲出自己的第一个纯代码页面，下节课我们将在此基础上探讨如何让网站样式更优雅、如何把它发布到真正的互联网上。（七）作业与延伸作业分两层。基础层：完善本组网站，根据互评意见至少落实两条修改，下节课前提交最终版本与小组分工记录。拓展层（选做）：阅读HTML入门资料，用记事本手写一个自我介绍页面，要求至少用到标题、段落、图片、超链接四类标记，体会“认识字”的感觉。六、板书设计主板书以流程为轴心自上而下排列：搭建站点（目录规范、命名规范）→制作页面（表格布局、内容修饰）→建立链接（站内、外部、页内）→测试发布（路径检查、整站联调）。副板书随时生成，记录巡视中发现的典型错误与学生贡献的妙招，让黑板成为全班经验的沉淀场。居中留出一行大字：路径用相对

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

温馨提示

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

最新文档

评论

0/150

提交评论