教案设计
授课人
学号
指导老师
课题名称
了解Web
基本概念
授课对象
计算机专业大学二年级
时间安排
45分钟
教材分析
《网页设计与制作项目教程（HTML+CSS+JavaScript）》是2017年人民邮电出版社出版的图书，作者是黑马程序员。全书分为8个项目，结合7种不同类型的网页设计案例，重点讲述HTML、CSS和JavaScript的基础知识及应用。本节课讲授的内容位于第一章第一节，是之后课程的先导课程。
学情分析
大二的学生虽然是首次正式接受Web的相关概念，但是在大一的课程中学习过路由器技术、操作系统、计算机网络、Python编程和Java编程这些计算机专业方面的基础课程，具备了一定的计算机方面的基础知识；并且在平时使用电脑和手机设备的过程中与Web的接触颇多，只是还没有正式地、系统地、具体地去学习和分析Web的专业知识。
教学目标
知识目标
识记：网页的基本概念；网页相关的名词
理解：Web标准的背景、Web标准的构成
能力目标
能够利用Web标准搭建网页架构
情感、态度、与价值观目标
激发学生学习Web前端开发的兴趣；让学生具备积极思考问题的意识；让学生意识到学习Web前端开发的意义
教学重点
Web标准的构成
教学难点
静态网页和动态网页的概念和区别
Web标准的构成
教学方法
讲授法、理论与生活相结合；抽象概念形象化；引导与自主探究相结合；配合教学PPT和使用计算机演示实例辅助讲解
教学流程
课堂导入5分钟；讲课30分钟；学生问答5分钟；板书归纳和小结4分钟；布置作业1分钟

时间
安排
教师行为
学生行为
设计意图
课后反思
导入：
教师：同学们，我是大家这学期Web前端开发这门课程的教师——肖欢，很荣幸能和大家一起学习这门课程的知识，今天我们要学习的是教材第一章第一小节的内容——了解Web基本概念。（此处插入PPT第1页）
教师：我们这节课有四个学习目标，第一个是需要了解什么网页的基本概念，第二个是熟悉网页相关的名词，第三个是理解Web标准的背景，最后一个学习目标是掌握Web标准的构成。（此处插入PPT第2页）
分组讨论：
教师：同学们，在对新课进行学习前，我们先来分组讨论以下问题：
Web中文译为“网页”，说到网页，其实大家并不陌生，大家平时上网时浏览新闻、查询信息、翻看图片等都是在浏览网页。（此处插入PPT第3页）
同学们：那么究竟什么是网页呢？现在我们用两分钟时间分组讨论，并由小组代表对以上问题发表见解。（此处插入PPT第4页）
学生：（两分钟后）网页就是我们用谷歌、IE这些浏览器看到的由图片、文字这些内容形成的。
教师：好，这位学生说得很有道理，网页是由图片、文字这些内容形成的，这是咱们在没学Web开发之前的理解，但是我们从今天开始要学习Web开发的知识了，那么在Web开发的专业概念中，网页是如何形成的呢？
我们刚刚有讲过说到网页对大家来说其实并不陌生，浏览新闻、查询信息、翻看图片等都是在浏览网页。下面我们以传智首页为例，来看一下网页是如何形成的呢？（此处插入PPT第5页）
学生分组讨论并由小组代表发表意见
引导同学们通过身边的事例进行思考，自然过渡到本节课课题
学生都能够积极参与到分组讨论中，也能够根据身边的实例积极发表看法
讲解：
认识网页：
我们来看一下这个传智播客的网页，看看网页是由哪些元素构成的呢？我们可以看到这个网页上面有图片、文字以及可以跳转到其它页面的超链接；然后我们点击鼠标右键，选择“查看网页源代码”，就查看传智首页的源代码，而我们刚刚看到的网页就是这些源代码经浏览器渲染之后呈现出来的结果，而在源代码中的这些符号是HTML标记，这些HTML标记就是用来描述网页中各种各样的元素的。（此处加入在电脑浏览器中演示；然后插入PPT第6页）
其实网页就是网站中用于承载信息的页面，主要由文字、图像和超链接等元素构成，除了这些元素，网页中还可以包含音频、视频以及flash等。（此处插入PPT第7页）
那么网页是如何形成的呢？（此处插入PPT第8页）
我们可以看到这个传智播客网页的源代码，其实程序员在进行开发时，在网页中写的内容就是这样（浏览器中显示的代码）的，有各种各样的特殊符号和文本，然而用户看到的网页则是像传智播客首页这样图文并茂的界面。这样的转化实际上是依赖于我们平常使用的各种浏览器。（此处加入在电脑浏览器中演示）
也就是说，程序员通过各种各样的特殊符号和文本编写好的内容，通过浏览器的解析渲染，然后给用户呈现出了图文并茂的界面。（此处插入PPT第9页）
大家知道吗，其实我们所说的网页也是有分类的，那么是怎么分类的呢？网页是分为静态网页和动态网页的。（此处插入PPT第10页）
下面我们一起来学习一下什么叫静态网页、什么又叫动态网页呢？
大家先看我这个PPT上这样一个页面，显示的内容有图片和一些文字，如果我们2000年9月10号看的时候是这样内容，而现在再看还是这样的内容，没有一点儿变化，这样的页面就是静态页面；
而动态页面则是这样的，如果我们2000年9月10号看的时候是一种内容，而前天、昨天和今天看到的又是不同的内容，例如图片和显示的文字都发生了变化，这样的页面就是动态页面。
那么静态页面和动态页面的区别到底是什么呢？静态页面是程序员在编写网页时就将内容写好的，这个内容是固定不变的，除非有一天程序员将源代码进行了更改，页面呈现出来的内容才会有所变化；而动态页面是程序员在编写页面使页面动态读取内容，比如获取当前访问页面时的时间，那么我们在不同时刻看到的页面内容都是不一样的。
而且静态页面和动态页面都具有各自的优点，静态页面的优点是访问速度快，而动态页面的优点是使用灵活，它们各有千秋、相辅相成，所以在实际开发中，静态页面和动态页面是共存的，根据实际需求选择使用静态页面或者是动态页面。
另外，我们平时所说的网站又是什么呢？我们再来看看传智播客首页，我们点击页面上的选项，例如“教研团队”、“免费教程”等，都会通过超链接跳转到相应内容的页面，而这样由超链接联系在一起的多个页面的集合就是我们所说的网站了。（此处加入在电脑浏览器中演示；并插入PPT第11页）
认真听讲，并根据身边的实例对专业内容进行理解
引入“网页”的概念；
并通过身边的实例讲解网页中的元素，帮助学生加深理解
学生能够根据浏览器中的演示和PPT中的展示理解专业内容，并积极给予反馈
讲解：
网页相关名词：
通过刚刚的学习，我们认识了什么是网页，那么说到网页，自然有很多与网页相关的名词，那么我们接下来就看看具体有哪些常用的相关名词以及这些名词各自是什么含义呢？（此处插入PPT第12页）
第一个与网页相关的名词自然是大家经常接触到的“Internet网络”，那么“Internet网络”具体是指什么呢？其实“Internet网络”就是通常所说的互联网，是由一些使用公用语言互相通信的计算机连接而成的网络。
第二个名词是“WWW”，这个“WWW”大家都很熟悉了，我们访问很多网站时，输入的地址都是由“www.”开头的，例如百度的网址是“www.baidu”，那么这个“WWW”具体是什么意思呢？其实“WWW”是英文World Wide Web的缩写，中文译为“万维网”，是Intertnet提供的一种网页浏览服务。
下一个名词是“URL”，这个“URL”又是什么意思呢？URL是英文Uniform Resource Locator的缩写，中文译为“统一资源定位符”，实际上呢，URL其实就是Web地址，俗称“网址”，例如百度的网址是“www.baidu”，也就是说百度的URL是“www.baidu”。
刚刚我们学习了“URL”这个名词，接下来我们学习一个与“URL”相关的名词，叫做“DNS”。为什么说“DNS”是与 “URL”相关的名词呢？其实 DNS是英文Domain Name System的缩写，中文译为“域名解析系统”，那么这个“域名解析系统”存在的意义是什么呢？大家之前学习过路由器技术都知道我们的设备地址的不是像“www.baidu”这样的，而是像“198.168.1.1”这样的一串由“.”分隔开的数字，那么这样的一串数字是怎么和类似于“www.baidu”这样的网址对应的呢？这就是“域名解析系统”所做的工作了。
除了刚刚我们讲到的四个名词外，还有一个大家常用的名词，叫做“HTTP”。大家都知道，我们输出网址例如“www.baidu”之后，浏览器中访问的实际上是“www.baidu”，其实“HTTP” 是英文Hypertext transfer protocol的缩写，中文译为超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。这类似于我们中文翻译成英文时，首先得有中文翻译成英文的规则，例如“我”对应英文中的“I”、“me”这样的规则，然后我们才能进行正常的翻译工作，而“HTTP”规定的通信的规则，我们浏览器和万维网之间才能进行正常的通信。
我们这门课程名称叫做“Web前端开发”，而接下来我们要学习的名词和我们的课程名称也是紧密相关的，这个名词叫做“Web”，那么“Web”是什么意思呢？Web通常指互联网的使用环境，但对于网站制作者、也就是程序员来说，它是一系列技术的复合总称，通常称之为网页。
最后一个相关的名词叫做“W3C”， “W3C”是英文World Wide Web Consortium的缩写，中文译为“万维网联盟”。万维网联盟是国际最著名的标准化组织，我们接下来要学习的“Web标准”就主要是由这个组织牵头制定的。
认真听讲，并在脑海中回顾生活中的示例加深对专业内容的理解
通过身边的实例讲解专业名词的含义，易于学生对专业名词进行理解
学生能够根据贴合自身的实例理解一些专业名词的含义，但是不贴合身边的实例不容易理解到含义，思考是否应该增加其它事例进行讲解？
讲解：
Web标准：
我们刚刚学习了什么是网页以及与网页相关名词的含义，接下来我们要学习的是本节课的重点知识——“Web标准”，我们需要掌握什么是Web标准，这个Web标准包含哪些内容呢？（此处插入PPT第13页）
首先我们需要了解的是Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。包含我们所熟悉的HTML、XHTML、CSS、JavaScript等等。（此处插入PPT第14页）
接下来在学习具体什么是Web标准之前，我们需要先知道为什么有Web标准的存在呢？我们都知道一种说法叫做“存在即合理”，而Web标准存在的原因则是由于不同的浏览器解析出来的效果可能不一致，开发者常常需要为多版本的开发而艰苦工作。例如，我们是程序员，现在需要制作一个网页，本来我们做好一份就完成了本次工作，然而技术经理说“这不行，每个浏览器的显示结果都是不一样的，你必须要再做适应其它所有浏览器的版本出来才能下班！”那这种时候，肯定是想罢工了对吧？目前我用过的浏览器就有十来种，我们把相同的工作做十次，显然是浪费时间且是无意义的，并且如果页面出现的问题，我们则需要对这十个版本分别进行修改，这样也不利于我们对网页的后期维护。然而现在有了“Web标准”，不管有多少种浏览器，我们都只需要开发一份网页就可以了，然后不同的浏览器都通过“Web标准”对网页内容进行解析，最后展示出一致的效果。（此处插入PPT第15页）
另外，“Web标准”既然存在了这么久，肯定是有它独特的优点的，那么 Web标准到底有哪些优点呢？（此处插入PPT第16页）
首先它的第一个优点是能够提高页面浏览速度，因为在同一个标准下，就少了一些解析交互的过程，所以页面的浏览速度自然就得到了提高；（此处插入PPT第17页）
它的第二个优点是使网站更易于维护，这就像我前面讲的那个例子，我们现在不需要写十种页面的版本来适应十种不同的浏览器了，维护网站将更容易一些；
第三个优点则是能够降低网站流量费用，这类似于前面这个例子，我们不需要配置多种版本的页面也适应多种浏览器，所以能够降低运营成本；
第四个优点是更容易被搜寻引擎搜索，这是因为不管用户使用什么浏览器和搜索引擎，页面都会根据相关度被搜寻到，而不会因为页面不适配某种浏览器而不被搜寻到；
第五个优点是内容能被更广泛的设备访问，这个优点存在的原因和上一个优点的原因一致；
而因为前面提到的这五个优点，所以它就具有了第六个优点，能够让Web的发展前景更广阔。
刚刚我们学习了为什么会有Web标准的存在以及Web标准具有哪些优点，接下来我们一起来学习一下“Web标准”具体包含哪些内容呢？
“Web标准”是由结构标准、表现标准和行为标准构成的。结构标准用于对网页元素进行整理和分类，主要包括两个部分：XML和XHTML；表现标准用于设置网页元素的版式、颜、大小等外观样式，主要指的是CSS；行为标准是指网页模型的定义及交互的编写，主要包括两个部分：DOM和ECMAScript。（此处插入PPT第18页）
刚刚我们学习了这么抽象的概念，好像也不是很容易理解这个“Web标准”到底是什么，接下来我们就用一个形象化的示例来理解“Web标准”三部分构成标准的具体含义。
如果把“Web标准”看做一栋房子，结构标准就相当于房子的框架，也就是我们需要先把房子的主体给搭建完成，这就类似我们在编写网页时先将页面该有哪些元素给排列好；（此处插入PPT第19页）
表现标准就相当于房子的装修，让房子看起来更美观，大家都知道我们的房子主题建好了之后，该搞装修了吧？我们得让我们的房子外观好看，让别人一看我们这个外观就有进去房子里面看看的冲动，这就类似于我们编写网页时，网页该有的元素排列好之后，我们需要给网页进行美化，让这个页面看起来图文并茂，让用户有继续看下去的想法；（此处插入PPT第20页）
而行为标准相当于房间内部的设备，让房子具有功能性，大家想想，如果一个房子外观很美好，就像皇宫一样，但是里面什么都没有，没有水、没有电、没有网络、没有沙发这些，那这样的房子你还想住吗？肯定是不想的，尤其是现在如果我们离开了网络，都感觉自己与世隔绝了，对吧？所以我们在编写网页时，不仅是要将网页写得好看，还需要给网页中添加实用的功能，就类似于要美貌与智慧并存。通过这三个标准，就能让我们写的网页不仅好看，还很实用，能给用户极好的用户体验。（此处插入PPT第21页）
认真听讲，并积极思考，理解专业知识
通过形象化的实例讲解抽象化的概念，加深学生对专业知识的理解
学生能够积极参与课堂学习中，并及时给予反馈，也能够根据身边的实例理解Web标准的构成和含义
提问：
接下来给大家两分钟时间，思考一下，结合生活中事例，说说自己对结构、表现、行为的理解？之后请一位学生来给大家分享一下他的想法。（此处插入PPT第22页）
（两分钟后）现在请学生来给大家分享一下想法，自愿跟大家分享的学生，不管说的对与错，平时成绩都加分。
学生举手，站起来回答：我觉得结构标准就是我们访问的网页中有标题、有图片、有视频；表现标准就是页面中的标题有颜、图片有大小形状；行为标准就是我们点击一个按钮会出现弹窗这样的。
（学生回答后）刚刚这位学生说得很对，一个网页中的标题、图片、视频这些元素的排列就是由结构标准定义的，标题的颜、图片的大小这些就是由表现标准定义的，而点击按钮会出现弹窗这些动作就是由行为标准定义的。
当然除了这个例子，我们还有一个更贴近于我们的例子。那就是我们自己——人，人的骨骼就相当于结构，衣服鞋子就相当于表现，行走、奔跑、跳跃就是行为。结构是使内容更清晰，更有逻辑性，大家想想，如果一个人的眼睛长在胳膊上，那是不是很奇怪呢？而表现是用于修饰内容的样式，就像人要穿好看的衣服，把自己打扮得漂漂亮亮、帅气十足的；行为是内容的交互及操作效果，就像咱们人可以握手、可以拥抱、可以说话交流等等。
思考问题并积极发表看法
让学生将身边的实例与理论知识联系起来，加深对专业知识的理解
学生能够积极参与课堂思考，并踊跃发表意见，但是举的例子容易受到课堂环境中当前接触的内容，扩展性不够强
小结：
阶段小结：
下面我们一起来回顾一下我们这节课学习了哪些内容。（此处插入PPT第23页；并在黑板上进行板书）
我们这节课主要学习了什么是网页、网页相关的名词及其含义，以及什么是Web标准、Web标准存在的原因、Web标准的优点和Web标准的构成，大家需要重点掌握的是Web标准的构成。
那么大家还记得Web标准包含的具体内容有哪些吗？Web标准包括结构标准、表现标准和行为标准，分别对应我们之后要学习的Html、CSS和Javascript三部分内容。
在脑海中回顾本节课学习的主要内容
通过小结归纳本节课学习的主要内容，加深学生的印象
学生能够认真跟着进行课堂小结，并积极给予反馈
作业
布置
布置作业：
大家课下要完成课后相应的习题，然后可以通过扫描教材后的二维码查看答案；并且预习教材下一节我们要进行学习的内容——【任务1-2】网页制作入门，也就是教材第6-9页中的内容。
今天的课就上到这里，现在下课，同学们，我们下节课再见！
认真听布置的作业，并在课下积极思考完成作业
通过课后作业巩固本节课学习的专业知识
学生会积极给予应答
板书设计

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。