网页设计与制作项目式教程（HTML+CSS）电子教案 02.前端开发工具及流程.docx

网页设计与制作教案

授课教师

授课班级

授课日期

课题

前端开发工具及流程

计划学时

2

教学目标

知识目标

了解前端开发的流程。

了解前端开发的常用工具。

熟悉常用的浏览器工具。

能力目标

会使用前端开发工具开发网页。

会使用浏览器工具浏览网页。

素质目标

了解前端开发的岗位需求，为自己制定合适的职业规划。

教学重点

前端开发流程

Hbulider的使用方法

教学难点

HTML文档的基本结构。

编写一个简单的网页。

教学模式

及教学方法

理实一体化、线上+线下混合教学模式

项目教学法、任务驱动法、讲授法。

教学活动及主要环节

素质培养

课前导学

1.观看学习平台相关微课视频。

2.让学生下载多个浏览器，至少3个。

3.完成课前测试题。

课中践学

【复习前课】

复习上一次课所学的关于前端开发的相关概念。

【知识储备】

任务1.3：前端开发工具

一、知识储备

新知学习1：常见的前端开发工具

1．HBuilderX

（1）编辑器——编辑文件的主要区域，可以在垂直和水平方向上并排打开任意数量的编辑器。

（2）项目管理器——包含诸如资源管理器之类的不同视图，可在处理项目时为您提供帮助。

（3）工具栏——显示了常用工具。

（4）状态栏——有关打开的项目和编辑的文件的信息。

（5）控制台——可以在编辑器区域下方显示不同的面板，以获取输出或调试信息，错误和警告或集成终端。面板也可以向右移动以获得更多垂直空间。

（6）迷你地图——显示在窗口右侧，提供了源代码的高级概述，这对于快速导航和理解代码很有用。

（7）预览窗口——显示了正在编辑的网页预览的结果。

2．EditPlus

3．AdobeDreamweaver

4．SublimeText

5．VisualStudioCode

新知学习2：浏览器工具

1．IE浏览器

2．Edge浏览器

3．Chrome浏览器

4．Firefox浏览器

5．Safari浏览器

6．Opera浏览器

二、知识拓展

Web工作原理

用户通过客户端浏览器访问Internet上的网站或者其他网络资源时，通常需要在客户端的浏览器的地址栏中输入需要访问的网站的URL，然后通过域名服务器进行全球域名解析，并根据解析结果决定访问指定IP地址（InternetPvotocoladdress）的网站或网页。

获取网站IP地址后，客户端浏览器向指定IP地址上的Web服务器发送一个HTTP请求；Web服务器响应客户端的请求，将用户所需要的HTML文本、图片和构成该网页的其他一切文件发送给用户。

任务1.4前端开发流程及HTML文档的基本结构

一、知识储备

新知学习1：前端开发流程

1．需求分析

2．原型设计

3．UI设计

4．页面编码

5．测试和调试

6．发布和维护

新知学习2：HTML文档的基本结构

一个HTML文档由4个部分组成，各部分介绍如下。

1．文档声明部分

2．html标签对

3．head标签对

4．body标签对

!DOCTYPEhtml

html

head

!--头部信息,如title标签定义的网页标题--

/head

body

!--主体信息,包含网页显示的内容--

/body

/html

三、操作实施

1．创建项目

2．创建HTML文档

3．输入页面代码

4．保存并预览网页

四、任务拓展

布置拓展任务：完成“静夜思”网页。（学生可在完成基本任务的前提下，完成拓展任务。）

【项目小结】

通过本项目的学习，主要了解了Web前端开发的主要技术、开发工具和开发流程，掌握了HTML文档的基本结构，会利用HBuilderX创建一个简单的网页。

【项目延伸】

请同学们在网上搜索学习了更多的前端开发的拓展知识，比如前端开发的编码规范等。

课后拓学

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

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

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

4.完成项目延伸任务，将结果文件上传至教学平台。

通过学习平台学习相关内容，让学生养成自主学习的习惯。

养成课前复习的好习惯。

学习国产软件的优点，增强民族自信。

了解各种浏览器的特点，树立正确的信息价值观

学习开发流程，明白前端开发需要团队共同完成，培养学生的合作意识。

通过规范编码习惯，培养学生精益求精的工匠精神，提升职业素养。

养成课后复习的好习惯。