网页设计与制作项目式教程（HTML+CSS）电子教案 01.前端开发概念及技术.docx

网页设计与制作教案

授课教师

授课班级

授课日期

课题

前端开发概念及技术

计划学时

2

教学目标

知识目标

了解Web的起源及相关概念。

知道常见的前端开发技术。

能力目标

确定Web各种概念的关联。

确定前端开发技术和后端开发技术之间的联系与区别。

素质目标

通过了解Web的起源让学生感受到信息时代技术的快速进步，进而培养良好的学习习惯。

教学重点

Web标准三剑客：HTML、CSS、JavaScript的基本概念和语法。

HTML、CSS、JavaScript在网页制作中的作用。

教学难点

HTML、CSS、JavaScript的基本概念和语法。

后端开发技术的概念。

教学模式

及教学方法

线上+线下混合教学模式

讲授法、小组讨论法

教学活动及主要环节

素质培养

课前导学

1.在网上搜索前端开发的相关内容，了解什么是万维网。

2.下载几个喜欢的网页，至少3个。

3.完成课前测试题。

课中践学

【情景导入】

通过微课视频进行情景导入，引出本次课的学习任务。

【项目实施】

任务1.1：前端开发相关概念

一、知识储备

新知学习1：Web的起源

1.万维网（WorldWideWeb），简称Web，起源于1980年。

2.Internet由Web和其他服务所组成。除了Web，Internet还包含以下服务。

（1）E-mail：电子邮件。

（2）FTP：FileTransferProtocol，文件传输协议。

（3）Newsgroups：新闻组。

（4）其他服务：远程登录（Telnet）、论坛等。

新知学习2：Web的相关概念

1.网站（Website）是指在Internet上根据一定的规则，使用超文本标记语言（HypetextMarkupLanguage，HTML）等工具制作的、用于展示特定内容的相关网页的集合。

2.网页是网站中的一个页面，是构成网站的基本元素，是承载各种网站应用的平台。

3.Web是基于客户机/服务器方式的信息发现技术和超文本技术的综合。

4.URL（UniformResourceLocator），即统一资源定位符，包括协议、域名、端口、路径、携带的参数、哈希值等部分。

5.HTTP是HypertextTransferProtocol（超文本传输协议）的缩写，是一种应用层协议，基于标准的客户机/服务器模型。

6.Web浏览器，简称浏览器，是用来检索、展示以及传递Web信息资源的应用程序。

7.Web服务器一般指网站服务器。

二、知识拓展

Web的特点

1.丰富的多媒体表现特性

2.超链接和快速导航能力

3.平台独立特性

4.分布自治特性

5.动态交互特性

任务1.2前端开发技术

一、知识储备

新知学习1：“Web标准三剑客”

1．HTML

2．CSS

3．JavaScript

新知学习2：前端框架技术

1．jQuery框架

2．Vue框架

3．React框架

4．Angular框架

二、知识拓展

后端开发技术

1．PHP

2．ASP

3．JSP

4．ASPNET

前端开发学习的建议路线

HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ASP.NET(或PHP)

课后拓学

1.完成任务1.1的课后练习。

2.完成任务1.2的课后练习。

3.扫码观看任务1.3和1.4中的微课视频，预习新课。

让学生养成课前预习的学习习惯。

了解数字技术的发展过程和相关概念，增强信息意识。

学习前端开发技术，明确职业发展方向。

养成课后复习的良好学习习惯。