资源简介

教案名称 任务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分钟） 任务描述启动HBilderX，创建一个空项目，项目名称为：chapter01,在该项目中新建一个html文件，文件名称为：example01.html，在网页上显示：“这是我的第一个网页哦。”。网页浏览效果如图1-1所示。图1-1 第一个网页浏览效果二、认识Web前端开发Web前端开发：主要包括HTML、CSS和JavaScript等技术。Web后端开发：通过编写程序代码与后台服务器交互，来动态更新网站的内容。包括PHP、JSP和等技术。三、相关概念 1、IP地址和域名2、URL：统一资源定位符3、HTTP与HTTPS：超文本传输协议 ( http: / / baike. / view / 468465.htm" \t "_blank )，提供一种发布和接收HTML ( http: / / baike. / view / 692.htm" \t "_blank )页面的方法。 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 CodeAdobe DremweaverSublime Text四、任务实现：创建第一个网页 1．创建项目执行菜单栏的“文件”|“新建”命令，选择“项目”，出现新建项目对话框，输入项目名称，选择模板类型为“空项目”，单击“创建”按钮。2．新建文件在左侧视图中，右击项目名称，执行“新建”命令，选择“html文件”，出现“新建html文件”对话框，输入文件名，单击“创建”按钮。在网页文件代码的之间，输入HTML文档的标题，这里输入：“第一个html5网页”然后在与标记之间写入

hello world！

3．保存文件 Ctrl+S4．浏览网页 Ctrl+R（学生一起操作，实现教学做一体化，加强学生对知识难点的理解。）II.课堂小结： （10分钟）重点理解IP地址、域名、URL、HTTP、HTTPS、HTML、Web标准等概念，会使用HBuilder软件创建项目及简单的网页。作业1： 课本实训1作业2：使用学台的教学视频自学任务2中的HTML5常用文本标记 随着互联网的飞速发展，各种智能终端的普及，前端开发越来越受到重视，人才需求量巨大。激发学生学好该门课，成为未来的优秀Web前端开发工程师。介绍万维网的发明者，蒂姆·伯纳斯·李，互联网之父，改变了人类的生活。引导学生立大志，科技报国，实现人生价值。HBilderX是由Dcloud即数字天堂（北京）网络技术有限公司推出的一款支持HTML5的Web开发编辑器，是一款优秀的国产免费软件，在前端开发、移动开发方面提供了丰富的功能和贴心的用户体验。

展开更多......

收起↑