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

教案课时分配表章序课程内容课时备注1网站建设概述22HTML与HTML5143CSS与CSS3164JavaScript基础125JQuery常用函数46开发者商务网站建设10合计58*课题第大鼠血站建设概述课时2课时(90min)教学目标知识技能目标：(I)理解网站与网页的相关概念(2)熟悉网站建设技术方向(3)理解网站建设流程,以及本教材所涉及技术在其中的位置(4)了解网站建设行业的优势与前景素质目标：(1)熟悉网站建设知识，激发学生的互联网意识，培养学生的互联网思维，提升学生的互联网知识水平(2)了解网站建设行业的优势与前景，为学生的职业规划提供参考教学重难点教学重点：网站与网页的相关知识教学难点：网站建设技术方向教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务T考勤(2min)T新课预热(5min)T问题导入(5min)T专授娴(28min)T头脑风暴(5min)第2节课：课堂活动(5min)T传授新知(25min)一课堂讨论(IOmin)T课堂小结(3min)一作业布置(2min)教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解网站、网页的组成元素，网站、网页的相关概念，以及现在制作网页的工具有哪些。【学生】完成课前任务通过课前任务，使学生了解所学课程的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况新课预热(5min)【教师】自我介绍，与学生简单互动，介绍课程内容、考核标准等【学生】聆听、互动【教师】讲一些涉及Web前端的应用领域，解释学习该课程的作用近年来，在网络基础设施及5G终端加速普及、互联网技术日趋成熟等利好因素的推动下,网络在人们的生活中发挥着越来越重要的作用,越来越多的企业开始重视企业网站建设。一个设计精良的企业网站不仅能够提升企业形象，还可以宣传企业热门服务，拓展企业业务通过老师自我介绍，与学生相互熟悉，并让学生了解这门课的大致要求问题导入（5min）【教师】提出以下问题网页是什么?与它相关的概念有哪些？它由哪些元素组成?【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知1.1 认识网站与网页1.1.1 网站、网页和首页1.网站【教师】讲解网站的概念，并说明根据不同的角度，网站的不同类别网站website是指在因特网上根据一定的规则使用HTML（hypertextmarkuplanguage,超文本标记语言）等制作的用于展示特定内容的网页集合。简单地说，网站是一种沟通工具，人们可以通过网站发布自己想要公开的资讯，或者利用网站提供相关的网络服务。此外，人们还可以通过浏览器访问网站，获取自己需要的资讯，或者享受网络服务。从不同的角度出发，网站可分为不同的类别。（1）根据所用编程语言的不同，网站可分为ASP网站、PHP网站、JSP网站、ASP.NET网站等。（2）根据用途的不同，网站可分为门户网站（综合网站）、行业网站、娱乐网站、多功能网站（网络商城）等.（3）根据持有者的不同，网站可分为个人网站、商业网站、政府网站、教育网站等。通过教师讲解、课堂互动、知识拓展等方式，使学生了解网站与网页的(28min)（4）根据商业目的的不同，网站可分为营利型网站（行业网站、论坛等）、非营利型网相关概念，以及网站（企业网站、政府网站、教育网站等）。【学生】聆听、记录、理解2.网页站建设技术方向，为后边的学习打好基础【教师】讲解网页的概念网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由多个网页组成的，至于要多少网页组合在一起才能称作网站，并没有特殊的规定，完全根据网站需求决定，即使只有T网页也能称为网站.但是，如果某网站没有制作任1可网页，任何人都无法访问该网站。实际上，网页是一个HTML文件（文件扩展名为himl或.him）,它可以存放在世界上某个角落的某一台计算机中，是万维网中的一"页"。网页经由网址来识别与存取，即当用户在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到用户的计算机，然后再通过浏览器解释网页文件的内容，接着展示到用户的眼前。也就是说，一个网页只有通过浏览器打开才能以设计者想要的方式展现在【课堂互动】十【教师】打开几个网页，组织学生观察网页的布局，并挑选两个学生说说网页的构成要素十【学生】聆听、观察、回答【教师】PPT展示图片"网页构成"（详见教材），讲解网页的内容一个网页由网页标题和网页内容构成，网页内容可以包含文本、图像、超链接、表单、导航栏等。【学生】聆听、记录、理解【各抒己见】+【教师】提问简述网站与网页的区别与联系。十【学生】思考、讨论、回答3.首页【教师】讲解首页的概念和默认名称网站首页是指H开网站时显示的第一个页面，又叫主页。【课堂互动】十【教师】提问网站首页的作用是什么？十【学生】聆听、思考、回答每个网站都有一个首页，它是一个网站的入口网页，可以引导互联网用户浏览网站其他页面的内容。首页默认的文件名称一般为index或default,如index.html.default.hu11kindex.aspxindex.aspx等。【学生】聆听、记录、理解1 .1.2其他相关概念2 .Internet、IP地址和域名【教师】讲解InterneiIP地址和域名Internet中文称为因特网，是集现代计算机技术和通信技术于一体，基于TCP/IP协议将全世界不同国家、不同地区、不同部门和不同类型的计算机、国家骨干网、广域网、局域网通过网络互联设备连接而成的、全球最大的开放式计算机网络。因特网上连接了不计其数的服务器和客户机,每一个主机在因特网上都有一个唯一的地址，我们称这个地址为IP地址（Intemetprotocoladdress）IP地址由4个小于256的数字组成，数字之间用点间隔。例如，"61.135.150.126"就是一个IP地址。由于IP地址在使用过程中难于记忆和书写，人们又开发了一种与IP地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。【学生】聆听、记录、理解【高手点拨】在创建好网站后需要申请域名，并将网站上传到服务器上，这样其他人才能通过互联网访问网站。3 .VVVVVV.HTTP、URL和浏览器【教师】讲解WWW、HTTP.URL和浏览器的概念WWVV是worldwideweb的缩写，中文称为"万维网"，也可简称为Web.3W等，它是互联网上的一个资料空间，在这个空间中，任何一个资源都由"统一资源定位符"（uniformresourcelocator,URL）标识,并利用超文本传输协议（hypertexttransferprotocol,HTTP）传送给使用者。【课堂互动】中【教师】提问当用户想访问WWW（Worldwideweb的缩写）上的一个网页或其他资源时，应该怎么做？【学生】思考、讨论、回答当你想访问万维网上的一个网页或其他资源时，通常需要先在浏览器地址栏中输入该网页的URL,或者通过超链接方式发送访问该网页的请求。Web服务器在收到请求后，会将相关信息发送到您的电脑。由于网页文件都是由HTML（超文本标记语言）代码或其他代码组成的，因此还需要由浏览器解释为文本、图像和超链接等可视化的网页信息。URL:统一资源定位符，也称为网址，这是世界通用的负责给万维网上的资源（如网页）定位的系统。一个完整的URL由通信协议名称、域名或IP地址、资源在服务器中的路径和文件名4部分组成。HTTP:超文本传送协议，它负责规定浏览器和服务器怎样互相交流。HTML：超文本标记语言，它使用标签来定义网页结构。浏览器：是Web服务的客户端浏览程序.（详见教材）【学生】聆听、记录、理解1.2网站建设技术方向【教师】讲解Ul设计方向、Web前端开发方向、后台程序开发方向【多媒体】组织学生扫码播放”网站建设技术方向”视频（详见教材），让学生对这部分内容有一个大致地了解1.2.1 UI设计方向UI即USerinterfaCe（用户界面）的简称.Ul设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的Ul设计不仅是让界面变得有个性有品位，还要让程序的操作变得舒适、简单、自由，并充分体现软件的定位和特点。随着UI设计行业在全球软件业内兴起，国内外众多大型企业（如百度、腾讯、Yahoo、中国移动、Nokia,联想、网易、微软、盛大、淘宝等）均已成立专业的Ul设计部门，但专业人才稀缺，人才资源争夺激烈，就业市场供不应求。对Ul设计感兴趣的同学可以从事这方面的工作，发挥自己的灵感，彰显自己的个性，设计出有创意、有个性的网站。1.2.2 Web前端开发方向Web前端开发是指利用HTML、CSS、JavaScript等将UI设计师设计出的用户界面以静态网页的形式展现，并实现交互效果。【教师】PPt展示图片“静态页面效果”（详见教材），辅助并讲解静态网页的概念【高手点拨】静态网页是标准的HTML文件，它的文件扩展名是,hlml或hlm,可以包含文本、图像、声音、动画、客户端脚本和ACtiVeX控件及JAVA/灌序等。静态网页是网站建设的基础，早期的网站一般都是由静态网页组成的。我们知道，网站是由一个个网页组成的，每个网页又有多种多样的元素，这些元素主要依靠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.一“"!三r"HIe=1.2.3后台程序开发方向后台程序开发即“服务器端"开发，主要涉及软件系统"后台"的东西，包括用于托管网站和App数据的服务器、各种程序开发语言(如ASP、JSKPHP等)等。简单地说，那些用户在屏幕上看不到但又用来为前端网页提供支持的东西就是后台。后台程序开发语言中ASP(activeserverpages)即动态服务器页面，由MiCroSOfl公司开发，可用来创建动态交互式网页。JSP(javaserverpages)即Java服务器页面，有点类似于ASP语言，在传统的HTML页面文件中插入Java程序段和JSP标记，就成了JSP文件，其后缀名为jsp°JSP开发的Web应用是跨平台的，可以运行在Linux或其他操作系统下。PHP(hypertextpreprocessor)即超文本预处理器，是在服务器端执行的脚本语言。使用它可以生成动态页面内容，也可以创建、打开、读取、写入、关闭服务器上的文件，还可以添加、删除、修改数据库中的数据等。PHP不仅简单易学，还为专业的程序员提供了许多先进的功能.【学生】聆听、记录、理解头脑风暴(5min)【教师】把学生分队伍，6个同学一队，提出头脑风暴主题每个队讨论：1.队伍名字；2.队伍口号；3.想出一个属于自己队伍的网站主题，并说说其创意。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课课堂活动(5min)【教师】让每个队伍推选一个人，介绍自己的队名，队伍口号，网站的主题【学生】上台发言、讨论通过联系上节课的活动，串联两节课，让学生上台发言，锻炼学生的表达能力传授新知(25min)1.3网站建设流程【教师】讲解网站建设流程网站建设流程整体而言可以分成三大部分，分别是网站规划设计、网站制作和网站发布维护。【教师】PPt展示图片“网站建设流程“(详见教材)，辅助并讲解网站建设各个环节(1)用户需求调酸分析。【课堂互动】中【教师】提问网站建设人员在进行网站建设之前，应了解用户哪些方面的需求？中【学生】思考、讨论、回答首先，网站建设人员需要与用户进行充分的交流与沟通，明确用户建设网站的目的和具体要求，然矍哽集呵擘理呵户提供的各种资料，认真分析并充分理解用户的意图。如果通过教师讲解、课堂互动等方式，让学生熟悉网站建设流程，了解网站建设行业的优势与前景，为学生的职业规划提供参考有需要，还可以请用户提供他们所喜欢的网站实例，网站建设人员可以在此基础上结合网站技术特点，提出网站设计方案，并与用户反复商讨，从而设计出用户认可的方案。(2)确定服务器解决方案。一个网站至少应该有一台用于运行应用程序的服务器。在网站的实际建设过程中，服务器的问题通常采用自备主机、租用虚拟主机、主机托管等方案解决。用户可以根据自身的实际情况决定采用哪种方案。(3)网站规划设计。网站规划主要包括网站的类型选择、主题设计、风格设计、内容设计、版面布局设计及网站策划书的撰写等。【课堂互动】十【教师】提问网站规划在整个网站建设中起什么作用？十【学生】思考、讨论、回答网站规划对网站建设起到计划和指导作用，对网站的内容和维护起到定位作用。这一环节的好坏，不仅直接影响网站的整体效果，而且是网站发布后能否成功运行的主要因素。(4)界面设计。网站规划方案最终要通过网页展现出来,制作网页是将网站规划付诸实施的主要任务。【课堂互动】【教师】提问进行界面设计时需要注意些什么？十【学生】思考、讨论、回答在制作网页前要考虑网站的风格和功能，要根据所建网站的特点做充分准备，不仅要使网站的基本格调符合用户的要求，还要使网站的功能茜足用户的使用需求.网站的界面设计将直接影响到浏览者的兴趣，因此，设计者必须在网站的外观、栏目、内容和功能上多下功夫，设计出新颖、美观的网页界面。(5)网页制作。网页制作可以分为结构层制作、样式层制作和行为层制作.结构层制作就是使用HTML代码搭建网页的主体结构，如文字、图像、超链接等，可以直接编写代码来实现。结构层制作好之后，就可以使用CSS(层叠样式表)及JavaScript(动态脚本语言)制作网页的样式层及行为层，完成网页的外观样式与交互行为。(6)后台程序开发。后台程序开发常使用ASP、JSP、PHP等语言处理网站后台数据库的事务，同时负责数据库与前台页面之间的连接。(7)网站测试与发布。在将网站上传到服务器前，需要对其进行测试及优化。测试包括兼容性测试、超链接测试等；优化是尽可能减小网页文件的体积及日后发生错误的概率。完成测试和优化后，就可以将网站发布到所申请的空间服务器上。网站上传后，可继续通过浏览器进行实地测试。(8)网站推广。网站上传后，需要进行宣传和推广，以提高网站的访问量及知名度。【课堂互动】-H教师】提问常用的网站推广方法有哪些？十【学生】思考、讨论、回答推广网站的方法有很多，如搜索引擎推广、群发电子邮件、借助同类网站留言、加入友情链接、传统媒体宣传等。（9）维护更新。建设好网站后，还需要经常对其进行维护和更新，才能吸引更多的用户。【学生】聆听、记录、理解14行业优势与前景1.4.1 网站建设行业优势分析【教师】讲解网站建设业务的分类，并对行业优势进行分析一般情况下，网站建设业务可分为行业（专业）网站建设、企业网站建设和个人网站建设等。伴随着不同业务需求的增多，社会对网站建设人才的需求也急剧增加。【课堂互动】十【教师】提问你认为网站建设行业具有哪些优势？【学生】思考、讨论、回答目前，国内互联网行业拥有大量的职位缺口，其中Web前端开发是需求增长最快、最热门的岗位，其岗位需求甚至超过了JaVa开发岗位。此外，目前微信小程序的对外开放，更是加大了市场对于Web前端开发岗位的需求量。由此可见，学习Wcb前端开发技术对于学生而言是个相当不错的选择。网站建设行业除了人才需求量大这个优势外，还具有待遇丰厚、入门门槛低等优势。这几年随着前端技术的快速发展，市场上前端人才的缺口不断增大，前端的薪资水平也水涨船高，很多人被前端的高薪吸引了过来。【教师】PPt展示图片"北京web前端工资水平图”“太原web前端工资水平图”（详见教材）另外，Web前端开发的入门门槛其实很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先简单后困难。所以，对于从事网站建设工作的人来说，前端开发是个不错的切入点。也正因如此，前端开发领域有很多自学成"才”的高手。【学生】聆听、记录、理解1.4.2 网站建设行业前景【教师】讲解网站建设行业前景【课堂互动】【教师】提问你觉得网站建设行业的前景如何？十【学生】思考、讨论、回答从技术层面来看，目前国内建站公司（即网站建设公司）有精湛水平的是少之又少。在未来，随着网站市场竞争的加剧，网站要求会越来越高,设计人员、程序人员及相关人员等技术水平都仍有进一步提升的空间,只有不断提升自己的业务水平,才能满足于市场的需求。一从当下的社会环境来看，中国是全球网民数量最多的国家，也是最大的电不言息产品生产基地，互联网的出现快速改变了国内人民的生活方式，以及人们对这个社会的认知。从当下的市场空间来看，随着建站技术、建站要求的不断提高，未建设自己网站的部分企业和已经建设过网站的企业，分别通过建站或改版来重新设计自己的网站，以求在未来能满足市场需求及用户喜好，让自己的网站盈利。这一娓会一直持续下去，不会终结。总的来说，网站建设行业经过多年的沉淀和积累，涉及多平台跨越式建设，以及HTML、CSSJavaScriptjava、IayoUt、viewport、eclipse等应用型技术工具。同时网站建设技术也已趋于完善，未来前景是十分乐观的。因此，在互联网一片光明的大环境下，网站建设作为互联网最基础的一项环节，势必紧跟互联网热潮一路向前，蓬勃发展。【学生】聆听、记录、理解课堂讨论(10min)【教师】组织学生分组，围绕以下问题开展讨论(1)网站与网页的基本概念。(2)网站建设技术分为哪些方向？本教材主要涉及哪些技术？(3)网站建设流程包括哪些环节？本教材所涉及的技术可以完成其中的哪写环节？【学生】讨论、回答通过课堂讨论使学生巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了网站与网页的相关概念、网站建设技术方向、网站建设流程等网站建设的基础内容，希望通过本节课的讲解，大家可以对网站和网站建设有个初步的认识，并为后面的学习做好准备。【学生】总结回顾知识点总结知识点，巩固学生对网站建设基础知识的认识作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业根据课上制定的主题创建队伍的项目，介绍项目主题并形成文档,上传至APP【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本次课是该课程的第一节课，通过第一节课的介绍，学生对这门课程有了基础的印象，了解了该课程的教学内容，以及本课程的定位和作用，提高了学生对本课程的学习兴趣。此外，还对网页的模块以及UI、Web前端开发的工具、流程进行了介绍，学生对本课程的学习兴致都很高，取得了不错的教学效果。