Web前端开发案例教程（HTML5 CSS3） 教案任务1创建第一个HTML5网页.docx

《Web前端开发案例教程（HTML5 CSS3） 教案任务1创建第一个HTML5网页.docx》由会员分享，可在线阅读，更多相关《Web前端开发案例教程（HTML5 CSS3） 教案任务1创建第一个HTML5网页.docx（4页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、教案名称任务1创建第一个HTML5网页计划学时2学时知识目标了解Web前端开发技术及相关概念熟悉常用的浏览器熟悉前端开发常用的工具软件掌握使用HBilderX软件创建简单的网页素质目标引导学生做好职业规划，在课程学习中树立职业理想。 激发学生爱国热情、为科技强国而努力学习教学重点URL、HTTP、HTML、网站、网页、主页等概念HBuilderX工具操作教学难点使用HBuilderX创建HTML5网页教学模式教学做一体化线上+线下混合教学教学活动及主要环节思政元素 切入点第1学时（认识Web前端开发、Web相关概念）1 .导入新课：（5分钟）2 .有无制作过网页？3 .以前学过网页课程吗？（学

2、生回答，参与互动）II.课程前导：（15分钟）1 .为什么学习这门课？该门课程对应的职业岗位是WEB前端开发工程师。2 .这门课学什么内容？HTML5、CSS3、HTML5+CSS布局网页、制作小型静态网站。3 .怎么学习这门课？多实践、多利用拓展资源进行学习、从模仿项目或案例中学习逐渐过渡 到自己设计网站。IH.考试方法：（5分钟）过程性考核+终结性考核过程性考核：出勤+课堂表现+作业+网站作品（60分）终结性考核：期末网上题库抽题考试（40分）随着互联网 的飞速发 展，各种智 能终端的普 及，前端开 发越来越受 到重视，人 才需求量巨 大。激发学生学 好该门课， 成为未来的 优秀Web前

3、端开发工程 师。IV.新课内容：（20分钟）一、任务描述启动HBilderX,创建一个空项目，项目名称为：chapterOl,在该项 目中新建一个html文件，文件名称为：exampleOl. html,在网页上显 示：“这是我的第一个网页哦。网页浏览效果如图17所示。0X + X一6 C 含 Q i图1-1第一个网页浏览效果二、认识Web前端开发介绍万维网 的发明者， 蒂姆伯纳 斯李，互联 网之父，改 变了人类的 生活。引导 学生立大 志，科技报 国，实现人 生价值。介绍万维网 的发明者， 蒂姆伯纳 斯李，互联 网之父，改 变了人类的 生活。引导 学生立大 志，科技报 国，实现人 生价值。W

4、eb前端开发:主要包括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标准：为了使网页在使用不同浏览

5、器浏览时显示相同的效果，在 开发应用程序时，浏览器开发商和Web开发商都必须共同遵守W3C与其 他标准化组织共同制定的一系列Web标准。Web标准包括结构标准（HTML）、表现标准（CSS）和行为标准 （JavaScript）。第2学时（创建第一个HTML5页面）课前发布任务：观看学习通平台相关学习视频。做课前测试题。I.新课内容：（35分钟）tstmADMHBilderX 是 由 Dcloud 即数字天堂 （北京）网 络技术有限 公司推出的 一款支持 HTML5 的 Web开发编 辑那，是一 款优秀的国 产免费软 件，在前端 开发、移动 开发方面提 供了丰富的 功能和贴心 的用户体 验。一、

6、HTML5 概述HTML5主要优势：*良好的移植性：更直观的结构内容和样式分离 新的表单元素更方便地嵌入音频和视频 矢量图绘制。二、常用的浏览器 三大浏览器：IE浏览器（美国微软公司）、火狐FireFox （开源基金组 织mozilla研发的产品是一家美国公司）、谷歌Chrome （推荐使用，美 国公司）。我国的浏览器：百度浏览器、360浏览器、UC浏览器、QQ浏览器三、常用的网页编辑软件HBilderX:本课程使用该软件。Visual Studio CodeAdobe DremweaverSublime Text四、任务实现：创建第一个网页务均目 nHB*1.创建项目执行菜单栏的“文件” I

7、 “新建”命令，选择“项目”，出现新建项目对 话框，输入项目名称，选择模板类型为“空项目”，单击“创建”按钮。 2.新建文件在左侧视图中，右击项目名称，执行“新建”命令，选择html文件”， 出现“新建html文件”对话框，输入文件名，单击“创建”按钮。在网页文件代码的title与/title之间，输入HTML文档的标题，这里 输入：“第一个htm15网页”然后在body与/body标记之间写入hello world! 3 .保存文件Ctrl+S4 .浏览网页Ctrl+R（学生一起操作，实现教学做一体化，加强学生对知识难点的理解。）口.课堂小结： （10分钟）重点理解IP地址、域名、URL、HTTP、HTTPS、HTML、Web标准等概念, 会使用HBuilder软件创建项目及简单的网页。作业1：课本实训1作业2：使用学习通平台的教学视频自学任务2中的HTML5常用文本标记