Web前端开发案例教程（HTML5+CSS3）（微课版）教学教案

上传人：唯*** IP属地：河北上传时间：2024-04-28 格式：PDF 页数：115 大小：13.65MB 积分：12 举报 版权申诉

已阅读5页，还剩110页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

教案名称任务1创建第一个HTML5网页计划学时2学时

了解Web前端开发技术及相关概念

熟悉常用的浏览器

知识目标

熟悉前端开发常用的工具软件

掌握使用HBilderX软件创建简单的网页

引导学生做好职业规划，在课程学习中树立职业理想。

素质目标

激发学生爱国热情、为科技强国而努力学习

URL、HTTP、HTML、网站、网页、主页等概念

教学重点

HBuilderX工具操作

教学难点使用HBuilderX创建HTML5网页

教学做一体化

教学模式

线上+线下混合教学

思政元素

教学活动及主要环节

切入点

第1学时

（认识Web前端开发、Web相关概念）

I.导入新课：（5分钟）随着互联网

1.有无制作过网页？的飞速发

2.以前学过网页课程吗？展，各种智

（学生回答，参与互动）

能终端的普

II.课程前导：（15分钟）

及，前端开

1.为什么学习这门课？

发越来越受

该门课程对应的职业岗位是WEB前端开发工程师。

2.这门课学什么内容？到重视，人

HTML5、CSS3、HTML5+CSS布局网页、制作小型静态网站。才需求量巨

3.怎么学习这门课？大。

多实践、多利用拓展资源进行学习、从模仿项目或案例中学习逐渐过渡激发学生学

到自己设计网站。

好该门课，

III.考试方法：（5分钟）

成为未来的

过程性考核+终结性考核

优秀Web前

过程性考核：出勤+课堂表现+作业+网站作品（60分）

终结性考核：期末网上题库抽题考试（40分）端开发工程

师。

一、HTML5概述

♦HTML5主要优势：

♦良好的移植性

♦更直观的结构

♦内容和样式分离

新的表单元素

更方便地嵌入音频和视频

♦矢量图绘制。

二、常用的浏览器

三大浏览器：IE浏览器（美国微软公司）、火狐FireFox（开源基金组

织mozilla研发的产品是一家美国公司）、谷歌Chrome（推荐使用，美

国公司）。

我国的浏览器：百度浏览器、360浏览器、UC浏览器、QQ浏览器

三、常用的网页编辑软件

HBilderX:本课程使用该软件。

HBilderX是

VisualStudioCode由Dcloud

AdobeDremweaver即数字天堂

SublimeText（北京）网

络技术有限

四、任务实现：创建第一个网页

公司推出的

■5twiMD■»!!KN05IWt<u)WB(V)IAT)MynHS1Ato>X2JJ□X

一*款支持

HTML5的

Web开发编

辑器，是一

款优秀的国

a，**aB0•

产免费软

1.创建项目件，在前端

执行菜单栏的“文件”1“新建”命令，选择“项目”，出现新建项目对开发、移动

话框，输入项目名称，选择模板类型为“空项目”，单击“创建”按钮。开发方面提

2.新建文件供了丰富的

在左侧视图中，右击项目名称，执行“新建”命令，选择"html文件”，功能和贴心

出现“新建html文件”对话框，输入文件名，单击“创建”按钮。的用户体

在网页文件代码的＜出怕＞与之间，输入HTML文档的标题，这里验。

输入：”第一个html5网页”然后在vbody＞与＜/body＞标记之间写入

<p>helloworld!</p>

3.保存文件Ctrl+S

4.浏览网页Ctrl+R

（学生一起操作，实现教学做一体化，加强学生对知识难点的理解。）

II.课堂小结：（10分钟）

重点理解IP地址、域名、URL,HTTP、HTTPS、HTML、Web标准等概念，

会使用HBuilder软件创建项目及简单的网页。

作业1：

课本实训1

作业2：

使用学习通平台的教学视频自学任务2中的HTML5常用文本标记

教案名称任务2搭建简单学院网站计划学时12学时

掌握HTML5的基本结构

学习目标熟悉常用的HTML文本标记、列表标记、超链接标记、图像标记

会熟练使用HTML标记创建简单网页

在编写代码中养成精益求精的工匠精神

素质目标

通过案例融入价值观塑造

HTML5文档基本结构

教学重点

HTML文本标记、列表标记、超链接标记、图像标记

教学难点使用HTML标记创建简单网页

任务驱动教学法

教学模式

线上+线下混合教学模式

思政元素

教学活动及主要环节

切入点

第1、2学时

（HTML文本标记）

课前发布任务：通过学习通

观看学习通平台相关学习视频。平台拓展阅

做课前测试题。读使学生了

I.学生讨论：（10分钟）解HTML5标

准规范的制

使用HBuilder新建HTML5默认文档时，HTML5文档的基本格式包括哪些

订，激发同

标记？每个标记的作用是什么？

<!doctypehtml>学们科技报

<html>国的雄心，

<head>

增强使命担

<metacharset="utf-8n>

无标题文档当意识。

</head>

<body>

</body>

</html>

II.重难点内容讲授：

一、HTML文本标记（40分钟）

L标题标记（实现example02.html）

2.段落标记（实现example03.html）

3.水平线标记（实现example04.html）单标记

4.换行标记重点强调单标记（实现example05.html）

5.字体样式标记（实现example。己html）

6.特殊字符（实现example07.html）

通过编写

（教师多媒体演示、学生一起操作，实现教学做一体化）

HTML5代

二、【任务实现】学院简介页面制作（15分钟）

码，让学生

效果图如下：_______________________________

了解代码书

D映的x+

未来信息学院简介

范，小错误

未13名学院8!古人期r高屹隹0立.饮育部名知依办省履售通离学学校，学校秉特“涸务发慎

力家园,以他遇款业为WT的办学方科道泌•以人为本.拈技双■.产&Ig.BSHS-的分

学理令,以设有特色总水▼高嘲力口标.盅立7开放瞬得设程式.京R7优庙的铁白窗

X,形成了出好的育人IMI.学铉的管理水平.畋学急■.办学特色而到社会各界的广泛雕.可能会导致

学柠月筑育部息施的.08型示范性软然BH业技本学院”nma&ww.E士官人才培养瞪点庆

校.3*2-对口费通分较培养本科招生试的校.省示范3职公校招生试的校,是因家白

枇•电亍值总产业星技旋人才培训墨tT穷外&人才培UllMUT•«««物外摩蛤训・页面崩溃，

®-'MIML安全培训用心•，萍&,全0M谡产虹建%ifiM体.•餐职亚校日先汨第<V-«R

工作优秀・»•哥蛛号.要养成严谨

版校所向©未来信室学院

细致的工匠

代码如下：精神。

<body>

<h2>未来信息物面介（/h2>

”>未来信总郛选■人民政府耽府设立.故甫那赫索的公办校.学校9U科以■傍&II为宗旨,以促迸就业为导向脸力学，针

.爱籍“人为本.■技双■.产权・含、IK务社会F办学理念.以“窿设有特色同K窣ERI丽为目标.it立

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

Web前端开发案例教程（HTML5+CSS3）（微课版）教学教案

文档简介

温馨提示

最新文档

评论

Web前端开发案例教程（HTML5+CSS3）（微课版）教学教案

文档简介

温馨提示

最新文档

评论

相关文档