《web前端技术》(赵敏)003-0教案 第1课 web 前端开发基础

PAGE3PAGE3PAGE4PAGE4《Web前端技术》教案课时分配表章序课程内容课时备注1Web前端开发基础22HTML5基础23文本、图像、多媒体和列表44超链接、表格和表单45CSS3基础46CSS3的常用属性67CSS3布局48CSS3高级应用49JavaScript基础610函数、对象和数组611DOM和BOM412事件613jQuery基础614创建WJ自制女装品牌店网站6合计64文旌课堂APP

课题第1课Web前端开发基础课时2课时（90min）教学目标知识技能目标：（1）了解网站与网页（2）初步了解Web前端技术（3）熟悉Web前端开发工具素质目标：（1）加强对互联网信息时代的了解（2）培养专业技能，夯实基础（3）培养代码规范意识，提升实践动手能力教学重难点教学重点：网页的相关知识教学难点：HTML5，CSS，JavaScript基本概念教学方法问答法、讨论法、讲授法、情境模拟法、实践练习法、演示法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→→传授新知（20min）→头脑风暴（8min）第2节课：→传授新知（25min）→实战演练（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解网页的组成元素，以及了解网页的相关概念，现在制作网页的工具有哪些【学生】完成课前任务通过课前任务，使学生提前预习知识点，了解网页的组成元素考勤（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况新课预热（10min）【教师】自我介绍，与学生简单互动，介绍课程内容、考核标准等【学生】聆听、互动【教师】讲一些涉及Web前端的应用领域，解释学习该课程的作用近年来，在网络基础设施及5G终端加速普及、互联网技术日趋成熟等利好因素的推动下，网络在人们的生活中发挥着越来越重要的作用，越来越多的企业开始重视企业网站建设。一个设计精良的企业网站不仅能够提升企业形象，还可以宣传企业热门服务，拓展企业业务等。本课程将会讲解HTML5、CSS3、JavaScript语言，怎么设计一个网站，为未来大家迈入职场做出准备。【学生】聆听、记录、理解通过老师自我介绍，与学生相互熟悉，并让学生了解这门课的大致要求问题导入（5min）【教师】提出以下问题：网页是什么？与它相关的概念有哪些？它由哪些元素组成？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（20min）1.1网站开发基础知识1.1.1网页、网站与主页1．网页【教师】讲解网页的概念网页是人们上网时在浏览器中打开的一个个画面，是网站的基本信息单位。实际上，网页是一个文件，它可以存放在世界上某个角落的某台计算机中。【学生】聆听、记录、理解【教师】打开几个网页，查看网页的布局，并挑选两个学生，分别扮演游览者和设计者，鼠标指向网页的不同部分，让“游览者“和“设计者”分别说说这些元素是什么。在不断的展现和讨论中，介绍不同组成部分的名称从浏览者的角度出发，网页中主要包含文本、图像、多媒体、列表、超链接等元素。从设计者的角度出发，网页中的元素按功能可分为Logo、导航栏、Banner、主体内容和页脚等不同的模块。【学生】扮演、回答、聆听【教师】PPT展示图片“网页功能模块”（详见教材），讲解网页每个功能模块的概念Logo：指网站的标志，通常采用企业的Logo，是网页的重要组成部分。……（详见教材）【学生】聆听、记录、理解【课堂拓展】网页可以分为静态网页和动态网页。静态网页完全采用HTML语言编写，其文件扩展名一般为.htm或.html。动态网页一般使用HTML+ASP、HTML+PHP或HTML+JSP等实现，对应的文件扩展名一般为.asp、.php或.jsp等。无论是动态网页还是静态网页，都可以显示文本、图像和动画等内容，但只有动态网页可以实现与服务器的交互。2．网站【教师】讲解网站的概念，并说明根据不同的角度，网站的类别网站是一组相关网页的集合，是通过Internet向全世界发布信息的载体。人们可以通过网站发布自己想要公开的资讯，或者利用网站提供相关的网络服务。同时，人们也可以通过浏览器访问网站，获取自己需要的资讯，或者享受网络服务。从不同的角度出发，网站可分为不同的类别。………（详见教材）【学生】聆听、记录、理解3．主页【教师】讲解主页的概念和主页的默认名称主页是指打开某个网站时显示的第一个页面，又称首页。每个网站都有一个主页，它是网站的入口网页，可以引导互联网用户浏览网站的其他页面。主页文件的默认名称一般为index或default，如index.html、default.html、index.asp、index.aspx等。【学生】聆听、记录、理解1.1.2Internet、IP地址和域名【教师】讲解Internet、IP地址和域名1．InternetInternet中文称为因特网，是集现代计算机技术和通信技术于一体，基于TCP/IP协议，将全世界不同国家、不同地区、不同部门和不同类型的计算机、国家骨干网、广域网、局域网通过网络互联设备连接而成的、全球最大的开放式计算机网络。2．IP地址Internet上连接了不计其数的服务器和客户机，每个主机在Internet上都有唯一的地址，我们称这个地址为IP地址（Internetprotocoladdress）。IP地址由4个小于256的数字组成，数字之间用点间隔，如“26”。3．域名由于IP地址在使用过程中难于记忆和书写，人们又开发了一种与IP地址对应的字符表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我们只需要在浏览器地址栏中输入搜狐网站的域名“”，然后按Enter键就可以访问搜狐网站了。【学生】聆听、记录、理解【课堂拓展】在创建好网站后需要申请域名，并将网站上传到服务器上，这样其他人才能通过互联网访问网站。✈【教师】提问当用户想访问WWW（worldwideweb的缩写）上的一个网页或其他资源时，应该怎么做？✈【学生】思考讨论，回答问题1.1.3WWW、URL和HTTP【教师】PPT展示图片“游览器显示网页的过程”（详见教材），辅助并讲解www、URL、HTTP的概念当用户想访问WWW（worldwideweb的缩写）上的一个网页或其他资源时，通常需要先在浏览器的地址栏中输入该网页的网址………（详见教材）WWW：中文称为万维网，也可简称为Web、3W等，是Internet最受用户欢迎的信息服务类型。WWW集中了全球的信息资源，………（详见教材）URL：统一资源定位符，也称为网址，是世界通用的负责给WWW上的资源（如网页）定位的系统。………（详见教材）HTTP：超文本传输协议，负责规定浏览器和服务器怎样互相交流。……（详见教材）【学生】聆听、记录、理解通过教师的讲解，使学生了解与网页有关的名词概念以及网页组成，为后边的讲解打好基础头脑风暴（8min）【教师】把学生分队伍，6个同学一队，提出头脑风暴主题每个队讨论：1.队伍名字；2.队伍口号；3.想出一个属于自己队伍的网站主题，并说说其创意【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课课堂活动（5min）【教师】让每个队伍推选一个人，介绍自己的队名，队伍口号，网站的主题【学生】上台发言、讨论通过联系上节课的活动，串联两节课，让学生上台发言，锻炼学生的表达能力传授新知（25min）1.2Web前端技术概述【教师】讲解HTML5、CSS3和JavaScript的概念，ppt展示图片“仅使用HTML制作的网页”、“加入CSS样式的网页”、“加入JavaScript的网页”（详见教材）演示不同的效果1.2.1HTML5HTML，全称hypertextmarkuplanguage，中文解释为超文本标记语言，是制作网页的标记语言。它主要用于定义网页结构，决定网页上显示的内容，解决“网页上有什么”的问题，是网页制作的基础。………（详见教材）1.2.2CSS3CSS，全称cascadingstylesheets，中文解释为层叠样式表。它主要用于定义网页中元素的样式，包括各元素的颜色、大小、位置和布局等。再单击“开始”选项卡中的“粘贴”按钮，粘贴刚刚复制的文本。……（详见教材）1.2.3JavaScriptJavaScript，简称JS，是由Netscape公司开发的基于对象和事件驱动的脚本语言。它可以及时响应浏览者的操作，控制页面的行为表现，实现用户与网页之间的动态交互，提高用户体验感。……（详见教材）【学生】聆听、记录、理解1.3Web前端开发工具1.3.1编辑器【教师】讲解Web前端开发用到的编辑器有哪些，逐个进行介绍1．HBuilderHBuilder是一款由DCloud推出的国产前端开发工具，是1+X证书制度试点培训用书（Web前端开发）中的专用编辑器。……（详见教材）2．AdobeDreamweaverAdobeDreamweaver（简称DW）是一款集网页制作和网站管理于一身的所见即所得的网页代码编辑器。……（详见教材）3．SublimeTextSublimeText（简称Sublime）是文本编辑器，同时也是先进的、轻量级的网页编辑器，能够编辑网页中涉及的各种类型的文件，……（详见教材）4．VisualStudioCodeVisualStudioCode（简称VSCode）是一款由微软开发，同时支持Windows、MacOS、Linux等操作系统且开源的代码编辑器。……（详见教材）5．WebStormWebStorm是由JetBrains软件公司开发的商业付费版Web开发工具，同时支持Windows、MacOS、Linux等操作系统。……（详见教材）聆听、记录、理解1.3.2浏览器【教师】提出问题你们现在用的游览器是什么？能不能说说它有什么好处？【学生】讨论，回答问题【教师】PPT展示表格“常见的游览器介绍”，介绍常见的游览器浏览器在Web前端开发中用于运行和测试网页文件，也是用户访问互联网上各种网页的必备工具。目前市面上有多种多样的浏览器，……（详见教材）聆听、记录、理解通过教师的讲解，使学生了解Web前端开发的编辑器和游览器，打好网页开发基础实战演练（10min）【教师】安排学生扫描微课二维码观看视频“创建“金企鹅教育”项目”(详见教材），要求学生制作“金企鹅教育”项目，有疑问者可进行讨论和询问老师步骤1打开HBuilderX，选择主界面中的“新建项目”选项，……（详见教材）步骤2弹出“新建项目”对话框，根据项目需要选择项目类型，如“普通项目”；输入项目名称“JinqieProject”；……（详见教材）步骤3“金企鹅教育”项目创建成功，“JinqieProject”文件夹显示在HBuilderX主界面的左侧栏，……（详见教材）制作“金企鹅教育”项目、观看微课、讨论通过实操练习创建“金企鹅教育”项目，使学生巩固所学知识，锻炼动手操作能力课堂小结（3min）【教师】简要总结本节课的要点本节课主要介绍了Web前端开发基础知识。通过本节课的学习，学生应重点掌握以下内容（1）网页是人们上网时在浏览器中打开的一个个画面，是网站的基本信息单位。网站是一组相关网页的集合，是通过Internet向全世界发布信息的载体。主页是打开某个网站时显示的第一个页面，又称首页。（2）HTML5、CSS3和JavaScript是Web前端开发的核心技术。（3）Web前端开发要用到编辑器和浏览器。【学生】总结回顾知识点总结知识点，巩固学生对