网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第2版） 教案 案例1第一个HTML5网页_第1页
网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第2版） 教案 案例1第一个HTML5网页_第2页
网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第2版） 教案 案例1第一个HTML5网页_第3页
网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第2版） 教案 案例1第一个HTML5网页_第4页
网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第2版） 教案 案例1第一个HTML5网页_第5页
全文预览已结束

下载本文档

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

文档简介

模块一使用HTML5搭建网页本模块使用HTML5实现4个案例，在这些案例中重点介绍HTML5文档的基本结构、常用的文本标记、列表标记、超链接标记和图像标记等，帮助读者熟练运用HTML5标记构建HTML5页面。知识目标：掌握使用HbilderX网页编辑工具创建简单网页的步骤；了解IP地址、域名、URL、HTTP、HTTPS、HTML5、WEB标准等相关概念；掌握HTML5文档的基本结构;掌握常用的文本标记的语法格式及使用方法；掌握列表标记的语法格式及使用方法；掌握超链接标记的语法格式及使用方法；掌握图像标记的语法格式及使用方法。能力目标：能使用网页编辑软件编辑网页代码；会使用HTML5常用标记搭建网页结构。素质目标：养成编写HTML5代码的正确规范；培养认真细致、精益求精的工匠精神。教案1案例1第一个HTML5网页计划学时2学时知识目标了解网页设计相关概念熟悉常用的浏览器熟悉网页设计常用的工具软件掌握使用HBilderX软件创建简单的网页能力目标能理解并说出网页相关的概念会使用HBilderX软件创建简单的网页素质目标引导学生做好职业规划，在课程学习中树立职业理想。激发学生爱国热情、为科技强国而努力学习教学重点URL、HTTP、HTML、网站、网页、主页等概念HBuilderX工具操作教学难点使用HBuilderX创建HTML5网页教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（课程前导、案例实现）=1\*ROMANI.导入新课：（5分钟）1．有无制作过网页？谈谈你对网页的理解？2．以前学过网页设计课程吗？=2\*ROMANII.课程前导：（15分钟）1.为什么学习这门课？该门课程对应的职业岗位是网页设计师(也称为WEB前端开发工程师)。2.这门课学什么内容？HTML5语言、CSS3样式、HTML5+CSS3布局网页、JavaScript脚本语言、制作小型静态网站。3.如何学好这门课？线上自主学习+线下教师导学；多实践、多利用拓展资源进行学习、从模仿项目或案例中学习逐渐过渡到自己设计网站。=3\*ROMANIII.考试方法：（5分钟）过程性考核+终结性考核过程性考核：出勤+课堂表现+作业+网站作品（60分）终结性考核：期末网上题库抽题考试（40分）=4\*ROMANIV.新课内容：（20分钟）案例描述创建一个简单的HTML5网页，在该网页显示“志向和热爱是伟大行为的双翼。——歌德”，网页浏览效果如图1-1所示。图1-1第一个HTML5网页案例实现学生同步操作，做学教一体1．启动HBuilderX双界面。2．新建项目项目用来存储一个网站的所有文件，这些文件包括网页文件、图像及音视频文件、脚本文件、样式表文件等。从菜单栏中选择“文件”|“新建”｜“项目”命令。3．在项目中创建网页文件在左侧视图中右击项目名称，在弹出的快捷菜单中选择“新建”｜“html文件”命令。4．输入网页代码在网页文件代码的<title>与</title>之间输入网页的标题，在<body>与</body>之间添加网页的主体内容。5．保存文件在菜单栏中选择“文件”｜“保存”命令，或按“Ctrl+S”组合键，即可保存文件。6．浏览网页在HBuilderX中单击工具栏中的“浏览器运行”按钮，或按“Ctrl+R”组合键，使用谷歌浏览器浏览网页。第2学时（相关知识点）一、网页相关概念（20分钟）1．IP地址2．域名3．URL：统一资源定位符4．HTTP与HTTPS：HTTP:超文本传输协议(HyperTextTransferProtocol)，提供一种发布和接收HTML页面的方法。HTTPS：超文本传输安全协议（HyperTextTransferProtocolSecure，）可进行身份认证的加密传输协议，比HTTP更安全。5．网站、网页与主页：主页通常用index.htm或index.html表示。6．HTML与HTML5:HTML：超文本标记语言(HyperTextMarkupLanguage)。HTML5：是第5代超文本标记语言。7.Web标准：Web标准包括结构标准（HTML）、表现标准(CSS)和行为标准(JavaScript)。二、常用的网页编辑软件（10分钟）HBilderX:本课程使用该软件，国产软件，数字天堂公司产品。VisualStudioCode：简称VSCode，微软公司产品。AdobeDremweaver：拥有可视化编辑界面的编辑器，Adobe公司产品。三、常用的浏览器（10分钟）1．Edge浏览器Edge浏览器是微软公司推出的新一代浏览器，是IE的替代产品，对HTML5有很好的支持。2．火狐浏览器火狐浏览器是一个开源网页浏览器，由Mozilla基金会和开源开发者一起开发，对HTML5的支持度也很好。3．Chrome浏览器Chrome浏览器是由谷歌公司开发的开放源代码的浏览器，完全支持HTML5的功能。4．Safari浏览器和Opera浏览器Safari浏览器是苹果公司开发的浏览器，Opera浏览器是Opera软件公司开发的浏览器，这两款浏览器都对HTML5有很好的支持。提问：除了上面的浏览器，同学们还用过哪些浏览器？360浏览器、QQ浏览器……等。四=2\*ROMAN、小结（5分钟）重点理解IP地址、域名、URL、HTTP、HTTPS、HTML、Web标准等概念，会使用HBuilder软件创建项目及简单的网页。作业1：课本课后习题与实训作业2：扫码观看案例2中的微课，学习HTML5常用文本标记随着互联网的飞速发展，各种智能终端的普及，网页设计（Web前端开发）越来越受到重视，人才需求量巨大。激发学生学好该门课程，成为未来的优秀Web前端开发工程师。穿插介绍万维网的发明者，蒂姆·伯纳斯·李，互联网

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

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

最新文档

评论

0/150

提交评论