《网站前端技术》教案第1课网站建设概述.docx

《《网站前端技术》教案第1课网站建设概述.docx》由会员分享，可在线阅读，更多相关《《网站前端技术》教案第1课网站建设概述.docx（14页珍藏版）》请在优知文库上搜索。

1、教案课时分配表章序课程内容课时备注1网站建设概述22HTML与HTML5143CSS与CSS3164JavaScript基础125JQuery常用函数46开发者商务网站建设10合计58*课题第大鼠血站建设概述课时2课时(90min)教学目标知识技能目标：(I)理解网站与网页的相关概念(2)熟悉网站建设技术方向(3)理解网站建设流程,以及本教材所涉及技术在其中的位置(4)了解网站建设行业的优势与前景素质目标：(1)熟悉网站建设知识，激发学生的互联网意识，培养学生的互联网思维，提升学生的互联网知识水平(2)了解网站建设行业的优势与前景，为学生的职业规划提供参考教学重难点教学重点：网站与网页的相关知

2、识教学难点：网站建设技术方向教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务T考勤(2min)T新课预热(5min)T问题导入(5min)T专授娴(28min)T头脑风暴(5min)第2节课：课堂活动(5min)T传授新知(25min)一课堂讨论(IOmin)T课堂小结(3min)一作业布置(2min)教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解网站、网页的组成元素，网站、网页的相关概念，以及现在制作网页的工具有哪些。【

3、学生】完成课前任务通过课前任务，使学生了解所学课程的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况新课预热(5min)【教师】自我介绍，与学生简单互动，介绍课程内容、考核标准等【学生】聆听、互动【教师】讲一些涉及Web前端的应用领域，解释学习该课程的作用近年来，在网络基础设施及5G终端加速普及、互联网技术日趋成熟等利好因素的推动下,网络在人们的生活中发挥着越来越重要的作用,越来越多的企业开始重视企业网站建设。一个设计精良的企业网站不仅能够提升企业形象，还可以宣传企业热门服务，拓展企业业务通过老师自我介绍，与

4、学生相互熟悉，并让学生了解这门课的大致要求问题导入（5min）【教师】提出以下问题网页是什么?与它相关的概念有哪些？它由哪些元素组成?【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知1.1 认识网站与网页1.1.1 网站、网页和首页1.网站【教师】讲解网站的概念，并说明根据不同的角度，网站的不同类别网站website是指在因特网上根据一定的规则使用HTML（hypertextmarkuplanguage,超文本标记语言）等制作的用于展示特定内容的网页集合。简单地说，网站是一种沟通工具，人们可以通过网站发布自己想要公开的资

5、讯，或者利用网站提供相关的网络服务。此外，人们还可以通过浏览器访问网站，获取自己需要的资讯，或者享受网络服务。从不同的角度出发，网站可分为不同的类别。（1）根据所用编程语言的不同，网站可分为ASP网站、PHP网站、JSP网站、ASP.NET网站等。（2）根据用途的不同，网站可分为门户网站（综合网站）、行业网站、娱乐网站、多功能网站（网络商城）等.（3）根据持有者的不同，网站可分为个人网站、商业网站、政府网站、教育网站等。通过教师讲解、课堂互动、知识拓展等方式，使学生了解网站与网页的(28min)（4）根据商业目的的不同，网站可分为营利型网站（行业网站、论坛等）、非营利型网相关概念，以及网站（企

6、业网站、政府网站、教育网站等）。【学生】聆听、记录、理解2.网页站建设技术方向，为后边的学习打好基础【教师】讲解网页的概念网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由多个网页组成的，至于要多少网页组合在一起才能称作网站，并没有特殊的规定，完全根据网站需求决定，即使只有T网页也能称为网站.但是，如果某网站没有制作任1可网页，任何人都无法访问该网站。实际上，网页是一个HTML文件（文件扩展名为himl或.him）,它可以存放在世界上某个角落的某一台计算机中，是万维网中的一页。网页经由网址来识别与存取，即当用户在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传

7、送到用户的计算机，然后再通过浏览器解释网页文件的内容，接着展示到用户的眼前。也就是说，一个网页只有通过浏览器打开才能以设计者想要的方式展现在【课堂互动】十【教师】打开几个网页，组织学生观察网页的布局，并挑选两个学生说说网页的构成要素十【学生】聆听、观察、回答【教师】PPT展示图片网页构成（详见教材），讲解网页的内容一个网页由网页标题和网页内容构成，网页内容可以包含文本、图像、超链接、表单、导航栏等。【学生】聆听、记录、理解【各抒己见】+【教师】提问简述网站与网页的区别与联系。十【学生】思考、讨论、回答3.首页【教师】讲解首页的概念和默认名称网站首页是指H开网站时显示的第一个页面，又叫主页。【课

8、堂互动】十【教师】提问网站首页的作用是什么？十【学生】聆听、思考、回答每个网站都有一个首页，它是一个网站的入口网页，可以引导互联网用户浏览网站其他页面的内容。首页默认的文件名称一般为index或default,如index.html.default.hu11kindex.aspxindex.aspx等。【学生】聆听、记录、理解1 .1.2其他相关概念2 .Internet、IP地址和域名【教师】讲解InterneiIP地址和域名Internet中文称为因特网，是集现代计算机技术和通信技术于一体，基于TCP/IP协议将全世界不同国家、不同地区、不同部门和不同类型的计算机、国家骨干网、广域网、局域

9、网通过网络互联设备连接而成的、全球最大的开放式计算机网络。因特网上连接了不计其数的服务器和客户机,每一个主机在因特网上都有一个唯一的地址，我们称这个地址为IP地址（Intemetprotocoladdress）IP地址由4个小于256的数字组成，数字之间用点间隔。例如，61.135.150.126就是一个IP地址。由于IP地址在使用过程中难于记忆和书写，人们又开发了一种与IP地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。【学生】聆听、记录、理解【高手点拨】在创建好网站后需要申请域名，并将网站上传到服务器上，这样其他人才能通过互联网访问网站。3 .VVVV

10、VV.HTTP、URL和浏览器【教师】讲解WWW、HTTP.URL和浏览器的概念WWVV是worldwideweb的缩写，中文称为万维网，也可简称为Web.3W等，它是互联网上的一个资料空间，在这个空间中，任何一个资源都由统一资源定位符（uniformresourcelocator,URL）标识,并利用超文本传输协议（hypertexttransferprotocol,HTTP）传送给使用者。【课堂互动】中【教师】提问当用户想访问WWW（Worldwideweb的缩写）上的一个网页或其他资源时，应该怎么做？【学生】思考、讨论、回答当你想访问万维网上的一个网页或其他资源时，通常需要先在浏览器地址

11、栏中输入该网页的URL,或者通过超链接方式发送访问该网页的请求。Web服务器在收到请求后，会将相关信息发送到您的电脑。由于网页文件都是由HTML（超文本标记语言）代码或其他代码组成的，因此还需要由浏览器解释为文本、图像和超链接等可视化的网页信息。URL:统一资源定位符，也称为网址，这是世界通用的负责给万维网上的资源（如网页）定位的系统。一个完整的URL由通信协议名称、域名或IP地址、资源在服务器中的路径和文件名4部分组成。HTTP:超文本传送协议，它负责规定浏览器和服务器怎样互相交流。HTML：超文本标记语言，它使用标签来定义网页结构。浏览器：是Web服务的客户端浏览程序.（详见教材）【学生】

12、聆听、记录、理解1.2网站建设技术方向【教师】讲解Ul设计方向、Web前端开发方向、后台程序开发方向【多媒体】组织学生扫码播放”网站建设技术方向”视频（详见教材），让学生对这部分内容有一个大致地了解1.2.1 UI设计方向UI即USerinterfaCe（用户界面）的简称.Ul设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的Ul设计不仅是让界面变得有个性有品位，还要让程序的操作变得舒适、简单、自由，并充分体现软件的定位和特点。随着UI设计行业在全球软件业内兴起，国内外众多大型企业（如百度、腾讯、Yahoo、中国移动、Nokia,联想、网易、微软、盛大、淘宝等）均已成立专业的Ul设计

13、部门，但专业人才稀缺，人才资源争夺激烈，就业市场供不应求。对Ul设计感兴趣的同学可以从事这方面的工作，发挥自己的灵感，彰显自己的个性，设计出有创意、有个性的网站。1.2.2 Web前端开发方向Web前端开发是指利用HTML、CSS、JavaScript等将UI设计师设计出的用户界面以静态网页的形式展现，并实现交互效果。【教师】PPt展示图片“静态页面效果”（详见教材），辅助并讲解静态网页的概念【高手点拨】静态网页是标准的HTML文件，它的文件扩展名是,hlml或hlm,可以包含文本、图像、声音、动画、客户端脚本和ACtiVeX控件及JAVA/灌序等。静态网页是网站建设的基础，早期的网站一般都是

14、由静态网页组成的。我们知道，网站是由一个个网页组成的，每个网页又有多种多样的元素，这些元素主要依靠HTML标签定义，不同的HTML标签有不同的作用。目前，HTML已发展至HTML5版本。随着技术的发展，用户对网页布局的合理性、元素展现的美观性要求越来越高。只用HTML标签制作的网页已经不能满足人们的需求,于是引入了CSS技术控制标签的布局和样式。目前，CSS已发展至CSS3版本。随着网站功能越来越强大，网页的交互效果也越来越丰富，这主要依靠JaVaSCriPl技术实现。由于JavaScript技术在捕获HTML元素、实现循环、调用方法等方面的操作特别烦琐，因此市场上诞生了很多基于JavaScript的函数库，如电脑版的JQUery函数库、手机触摸版的TOUCh函数库等。【课堂互动】【教师】提问说一说HTMUCSS和JavaScript是网页设计中分别起到什么作用？【学生】思考、讨论、回答综上所述，人们形象地将网页核心技术描述为：HTML决定网页上有什么；CSS决定网页元素是什么样；JavaScript决定网页元素怎么动；JQuery简化JavaScript程序。也可以理解为：HTML决定网页结构；CSS决定网页元素样式；JaVaSCriPl决定网页互动效果。本教材重点介绍Web前端开发方向的相关技术。,-C.一“!三rHIe=1.2.3后台程