任务1创建第一个HTML5网页电子教案 Web前端开发案例教程（HTML5+CSS3）中职 高三 工信版
2023-03-14
|
4页
|
215人阅读
|
2人下载
普通
内容正文：
教案名称
任务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分钟）
过程性考核+终结性考核
过程性考核：出勤+课堂表现+作业+网站作品（60分）
终结性考核：期末网上题库抽题考试（40分）
IV.新课内容：（20分钟）
1、 任务描述
启动HBilderX，创建一个空项目，项目名称为：chapter01,在该项目中新建一个html文件，文件名称为：example01.html，在网页上显示：“这是我的第一个网页哦。”。网页浏览效果如图1-1所示。
图1-1 第一个网页浏览效果
二、认识Web前端开发
Web前端开发：主要包括HTML、CSS和JavaScript等技术。
Web后端开发：通过编写程序代码与后台服务器交互，来动态更新网站的内容。包括PHP、JSP和ASP.NET等技术。
三、相关概念
1、IP地址和域名
2、URL：统一资源定位符
3、HTTP与HTTPS：超文本传输协议，提供一种发布和接收HTML页面的方法。
4、网站、网页与主页：主页通常用index.htm或index.html表示。
5、HTML:超文本标记语言，在网页空白位置单击鼠标右键，选择“查看源文件”命令即可查看网页源代码。
（学生动手操作，任意打开一个网页，查看网页源代码）
6.Web标准：为了使网页在使用不同浏览器浏览时显示相同的效果，在开发应用程序时，浏览器开发商和Web开发商都必须共同遵守W3C与其他标准化组织共同制定的一系列Web标准。
Web标准包括结构标准（HTML）、表现标准(CSS)和行为标准(JavaScript)。
第2学时
（创建第一个HTML5页面）
课前发布任务：
观看学习通平台相关学习视频。
做课前测试题。
I.新课内容：（35分钟）
一、 HTML5概述
· HTML5主要优势：
· 良好的移植性
· 更直观的结构
· 内容和样式分离
· 新的表单元素
· 更方便地嵌入音频和视频
· 矢量图绘制。
二、常用的浏览器
三大浏览器：IE浏览器（美国微软公司）、火狐FireFox（开源基金组织mozilla研发的产品是一家美国公司）、谷歌Chrome（推荐使用，美国公司）。
我国的浏览器：百度浏览器、360浏览器、UC浏览器、QQ浏览器
三、常用的网页编辑软件
HBilderX:本课程使用该软件。
Visual Studio Code
Adobe Dremweaver
Sublime Text
四、任务实现：创建第一个网页
1．创建项目
执行菜单栏的“文件”|“新建”命令，选择“项目”，出现新建项目对话框，输入项目名称，选择模板类型为“空项目”，单击“创建”按钮。
2．新建文件
在左侧视图中，右击项目名称，执行“新建”命令，选择“html文件”，出现“新建html文件”对话框，输入文件名，单击“创建”按钮。
在网页文件代码的<title>与</title>之间，输入HTML文档的标题，这里输入：“第一个html5网页”然后在<body>与</body>标记之间写入<p>hello world！</p>
3．保存文件 Ctrl+S
4．浏览网页 Ctrl+R
（学生一起操作，实现教学做一体化，加强学生对知识难点的理解。）
II.课堂小结： （10分钟）
重点理解IP地址、域名、URL、HTTP、HTTPS、HTML、Web标准等概念，会使用HBuilder软件创建项目及简单的网页。
作业1：
课本实训1
作业2：
使用学习通平台的教学视频自学任务2中的HTML5常用文本标记
随着互联网的飞速发展，各种智能终端的普及，前端
资源预览图
1
2
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。