Web前端开发案例教程（HTML5 CSS3）（微课版）（第2版） 教案任务1创建第一个HTML5网页；任务2搭建简单学院网站.docx

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

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

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

3、前 端开发工程 师。对“创建超链接”与“锚点链接”进行对比分析，并总结其注意事项。空链接：单击该链接时不进行任何跳转。热点文字/a二、练习：完成专业介绍页面。（30分钟）.- O X - C 127QQ.1 施皿即 OZamplellMml2 0 IF!应用 frAMUrteIt用可一廿软d枝;r专4/ 一叶丁寸应用一U计口机应用技术专业计n机应用技术专业号点at设专业.但同我校最大的专业之一.现百在校生isoO余人.王专业从2002年开始？a a. jRifr-tieK.K2uieM. st力于为区域及分发重第名养人才,现遇办公8思化 rh.欢伸tn程 及测试.网珞运填音连等获x,为社会输送

4、著索医技于技能人才.培器目标本与WS%干计-WS网校域忸关行*, HWebASJfa, X件0计与开发.计售机系烧搐沪.11与t沪 多物力.从吻公自动化处理、网站开发IA软r弊程及也对塔台8管理等工作,具有蹄1切RJ创业HI 0M技柢20高次投虎曳人才.勺亚特色3专业为计班应用技术历军土Z生修备专二，耳迂领土日生徐璇皆况撵优遂卜.实现有毛骨年从学校叁军入伍 的ST快201S环开*.与东大学”台开网-3*r +本布事武业.序用2.5*0.51.S*05*的人才培善HI 式.络合了现有稣技术技毙盘人才培养横式女科工程立石弄模式第商7度论知烹的教螂实践应用?51!区痉 &培界字管理喂比推行懒.学.依

5、T化的恢竽方法.实3日化效”埋.以今促于、凌*促4、以富 2W.探天皮能编养水平:泛野力缭, 族学运珀丰名昭I安专也建设.攸丽成军丰豆近年N.本号上敦秫王 片缪与省级.杭tflMJE项目近20度.出版效4*0+*,次表论文3c净传 在欠改保改.便桎鹭设方面取得一定的HI.课堂小结：（5分钟）本次课介绍了超链接的语法格式、形式、利用超链接实现页面间、 页面内的跳转。课后作业：超星学习通平台作业第7、8学时（图像标签及学院首页、新闻详情页制作）课前发布任务：观看学习通平台相关学习视频。做课前测试题。I .导入新课：（10分钟）学习图像标记的过程中，你遇到了哪些问题？让学生讨论怎么解 决？II .重

6、难点讲授：一、图像标签（20分钟）.语法格式：img src=图像路径alt=替换文本 title=提示文本 width=图 像宽度 height图像高度对“图像标记”及其属性进行讲解，代码演示说明。（学生一起操作，教师巡视，答疑）.绝对路径和相对路径通过文件夹的层级关系对“路径”进行讲解。：展示PPT对“绝对路径”进行讲解，并举例说明。：展示PPT对“相对路径”进行讲解，并通过“图像文件和html文件”的不同位置进行演示。（学生提问，教师答疑）图像标签应用（15分钟）蒂姆伯纳斯李一互联网之父用蒂姆伯 纳斯.李的 故事激发学 习兴趣，引 导学生立大 志，实现人 生价值。友情幽接.T琮亘河版权所

7、巨未来信息旃学院僵介 学电闻 专抄介郎 要牛at砌d眄斯李（Tim Berners-Lee）龄土（195坪出生于英国）是万缰网的发明者，互联网之父.英国功黜0 （OM） .大奥帝国育佐JT拿（OBE）狭将包,英国豆家学会会员，英国皇家工田帅学会会员，美国国家工程院 外籍后土. 198舜3月他正式提出万维网的设想.1990年12月25日，研日内瓦的俄州粒子物理交治室里开发出了也 界上网帖M览篇.他是关注万缗网友黑的W3c的创始人,并技现也冉多国发子的各个氽*.傩杰出的皮就， 是把免费万曲网的啕想常广到全世界，让万缪网匕技获得迅速的发屉，潦激S变了人类的生活面费.蒂姆伯纳斯李一互联网之父蒂姆伯纳斯

8、李（Tim Berners-Lee）爵士（1955年出生于英国）是万维网的发明者，互联网之父， 英国功绩勋章（OM）获得者，大英帝国官佐勋章（OBE）获得者，英国皇家学会会员，英国皇家工程师学会会员, 美国国家工程院外籍院士。1989年3月他正式提出万维网的设想，1990年12月25日， 他在日内瓦的欧洲粒子物理实险室里开发出了世界上第一个网页浏览器。他是关注万维网发展的W3c的创始人，并获得世界多国授予的各个荣誉。他最杰出的成就，是把免费万维网的构想推广到全世界，让万维网科技获得迅速的发展，深深改变了人类的生活面貌。学生同步练习。三、【任务实现】学院首页制作 （20分钟） C 127A0.1

9、:8848/chapte02/school/index.html欢迎来到未来信息学院分析页面效果，该页面主要由标题和列表文字组成。标题文字使用 ,列表文字使用ul，编写代码如下。欢迎来到未来信息学院 h 2 a 标6=5.近.115.”）学院简介a 什学院新闻a专业介绍招生就业p友情链接:百度  a href=#学院官网版权所有©未来信息学院（教师与学生同步操作，实现教学做一体化）四、练习：实现新闻详情页面。（20分钟）D出广“ x C O 1274）.0.18843/cMpu02/KhocVniwi1.htnM， I学校H合发起成立软件行业产效联58IMA2O2

10、1XM 020;Jl.nMWWI 13次4月9日,力舒9里总口大生一隼打了电R&jUJ欠大&内企。丸状大虫怦产2公津方不动口口“ O.以件行受产轨二府S3F. $?W$ICZ -合2?KH晶吸金Q55M. 取旧11理” 依.HI.课堂小结：（5分钟）本任务学习了 HTML5常用标记，要熟知每个标记的使用场合及常用 属性，会使用这些标记搭建网页结构。课后作业：1 .课后实训22 .学习通平台作业IV.新课内容：（20分钟）一、任务描述启动HBilderX,创建一个空项目，项目名称为：chapterOl,在该项 目中新建一个html文件，文件名称为：exampleOl. html,在网页上显 示：

11、“这是我的第一个网页哦。”。网页浏览效果如图-1所示。O 127.0.0.1:8848/chapterO1/exampleOLhtml Q ：应a Translate这是我的第一个网页哦。图1-1第一个网页浏览效果二、认识Web前端开发Web前端开发：主要包括HTML、CSS和JavaScript等技术。介绍万维网 的发明者， 蒂姆伯纳 斯李，互联 网之父，改 变了人类的 生活。引导 学生立大 志，科技报 国，实现人 生价值。Web后端开发：通过编写程序代码与后台服务器交互，来动态更新网站 的内容。包括PHP、JSP和ASP. NET等技术。三、相关概念1、IP地址和域名2、URL：统一资源定

12、位符3、HTTP与HTTPS：超文本传输协议，提供一种发布和接收HTML页面的 方法。4网站、网页与主页：主页通常用index. htm或index, html表示。5、HTML:超文本标记语言，在网页空白位置单击鼠标右键，选择“查看 源文件”命令即可查看网页源代码。（学生动手操作，任意打开一个网页，查看网页源代码）6. Web标准：为了使网页在使用不同浏览器浏览时显示相同的效果，在 开发应用程序时，浏览器开发商和Web开发商都必须共同遵守W3C与其 他标准化组织共同制定的一系列Web标准。Web标准包括结构标准（HTML ）、表现标准（CSS）和行为标准 （JavaScript）。第2学时（

13、创建第一个HTML5页面）课前发布任务：观看学习通平台相关学习视频。做课前测试题。I.新课内容：（35分钟）料建项目界便空白文件打开目录HBilderX 是 由 Dcloud 即数字天堂 （北京）网 络技术有限 公司推出的 一款支持 HTML5 的 Web开发编 辑器，是一 款优秀的国 产免费软 件，在前端 开发、移动 开发方面提 供了丰富的 功能和贴心 的用户体 验。一、HTML5 概述 ： HTML5主要优势： ：良好的移植性 更直观的结构内容和样式分离新的表单元素更方便地嵌入音频和视频 矢量图绘制。二、常用的浏览器三大浏览器：IE浏览器（美国微软公司）、火狐FireFox （开源基金组

14、织mozilla研发的产品是一家美国公司）、谷歌Chrome （推荐使用，美 国公司）。我国的浏览器：百度浏览器、360浏览器、UC浏览器、QQ浏览器三、常用的网页编辑软件HBilderX:本课程使用该软件。Visual Studio CodeAdobe DremweaverSublime Text四、任务实现：创建第一个网页。XKhn M(E)MG) MR) S(7(U) H(V)工JUD K)(Y)HBuMw X 2 9 33 0v WM主姮切检快建方京切换入口教程杼4 列QNon* None 1.创建项目执行菜单栏的“文件” I “新建”命令，选择“项目”，出现新建项目对 话框，输入项目

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

16、er软件创建项目及简单的网页。作业1：.课本实训1作业2：使用学习通平台的教学视频自学任务2中的HTML5常用文本标记教案名称任务2搭建简单学院网站计划学时12学时学习目标掌握HTML5的基本结构熟悉常用的HTML文本标记、列表标记、超链接标记、图像标记 会熟练使用HTML标记创建简单网页素质目标在编写代码中养成精益求精的工匠精神 通过案例融入价值观塑造教学重点IITML5文档基本结构HTML文本标记、列表标记、超链接标记、图像标记教学难点使用HTML标记创建简单网页教学模式任务驱动教学法线上+线下混合教学模式教学活动及主要环节思政元素 切入点第1、2学时（HTML文本标记）课前发布任务：观看

17、学习通平台相关学习视频。做课前测试题。I.学生讨论：（10分钟）使用HBuilder新建HTML5默认文档时.，HTML5文档的基本格式包括哪些 标记？每个标记的作用是什么？headit无标题文档/titleII.重难点内容讲授：一、HTML文本标记（40分钟）1 .标题标记（实现example02. html）2 .段落标记（实现example03. html）通过学习通 平台拓展阅 读使学生了 解HTML5标 准规范的制 订，激发同 学们科技报 国的雄心， 增强使命担 当意识。3 .水平线标记（实现example04. html）单标记4 .换行标记 重点强调单标记（实现example05

18、. html）5 .字体样式标记（实现example06, html）6 .特殊字符（实现example07. html）（教师多媒体演示、学生一起操作，实现教学做一体化）二、【任务实现】学院简介页面制作（15分钟）效果图如下：D特殊字符x +- C O 127.0.0.1:8848/chapter02/example07.html0 3 ：未来信息学院简介未耒信息学院是省人民政府批准设立、教育部备忘的公办省IB苦通高等学校，学校重持“以服务发孱 为宗旨，以促迸就业为导向的办学方针,图S 以人为本、德技双M产敦愚合、服务社会-的办 学理念，以.建设有特色高水平高院校”为目标，建立了开放创新强校

19、模式，家内了优质的披育资 深，形成了良好的育人环UL学校的管理水平、教学质量.办学特色再到社会各界的广泛肯定.学校星教音部批准的国家示范性软件职业技术学院-首枇建设中位，部队士官人才培养定点院 校，-3+2”对口更通分段培养本科招生试点院校，省示范性高职单独招生试点院校；是国家首 能电子他#产业闯雌人才培训星断省幽努外包人才培训基地 箪R劳努外派培训艇 地”雀信息安全培训冲心；荣获全国信息产业系统先迸集体.省职业教育先进支体.”蹙育 工作优秀易校等梆号.版权所有未来信息学院代码如下:通过编写 HTML5 代 码，让学生 了解代码书 写要遵循规 范，小错误 可能会导致 页面崩溃， 要养成严谨 细

20、致的工匠 精神。未来信息学院简介未来信息学院是省人民政府批准设立、教胃部仔案的公办省属AHM等学校，学校案持“以IR务发展为宗旨，以促进就业为导向”的办学方针 ,建循“以人为本、德技双、产放时合.屐务社会附办学理念，以“建设有特色高水平g院校”为目标，翅立了开放创新我校模式，累枳了优旗的育 资源，形成了艮好的育人环境.学校的管理水平、教学质、办学特色得到社会各界的广泛肯定.p学校是教部批准的“国家示电性软件职业技术学院*6批黛设单位，部队士官人才培养定点院校，”2“对口贯通分段培养本科招生试点校，省示范性高职单独招生试点院校；是国京首批隹子信息产业高技能人才培训基地FR务外包人才培训撷绊省级劳

21、务外派培训基地*“省信息金 全培训中心二荣获”全国信息产业系统先进集体”“省职业效目先进集体“德育工作优秀高校”等称号三、练习：制作自己的个人介绍页面。（20分钟）教师巡视，答疑III.课堂小结：（5分钟）本次课介绍了 HTML文本标记及利用HTML文本标记创建简单的学院 简介页面。课后作业：1 .课后实训2.超星学习通平台作业无阚表X +C 127.0.0.1:8848“hapter02/exampL. Q ：洋,演 4 Translate本学期所学课程信息技术基础 Web前端基础 Python语言程序设计 大学英语0有麻俅X + C 127.0.0.1:8848/chaptert)2/ex

22、ampL. Q ：应用 舟 Translate本学期所学课程列表是一种 有秩序的信 息表现形 式，在我们 今天高度发 达的文明社 会中，讲文 明，懂礼貌, 识大局，懂 规矩，遵守 社会公共秩 序。1 .信息技术基础2 . Web前送基础3 . Python语言的即4 .大学英语第3、4学时（HTML列表标记）课前发布任务：观看学习通平台相关学习视频。做课前测试题。1 .学生讨论：（10分钟）问题：为什么要学习各种列表标记？各种列表标记之间又有什么区 别？H.讲授重难点内容：一、无序列表（10分钟）对“无序列表”的概念、基本语法格式及常用属性值进行讲解，并 列举网页中常见的例子进行说明，进行代码

23、演示。2本学期所学课程信息技术基础Web前端基础Python语言程序设计大学英语（学生同步操作，教师巡视，答疑）强调：定义“无序列表”时需要注意的问题。二、有序列表（10分钟）对“有序列表”的概念、基本语法格式及常用属性值进行讲解，并 列举网页中常见的例子进行说明，进行代码演示。h2）本学期所学课程信息技术基础Web前端基础Python语言程序设计大学英语（学生同步操作，教师巡视，答疑）强调：定义“有序列表”时需要注意的问题。三、列表的嵌套应用（15分钟）打开浏览器，输入淘宝网址，对“列表嵌套”在网页中的常见效果 进行展示，进行讲解。代码演示嵌套应用。今天的课程表上午课程信息技术基础Web前端

24、基础下午课程Python语言程序设计J C 127.0.0.1:8848/chapterO2/exampL. Q ：盟应用 5 Translate今天的课程表上午课程O信息技术基础O Web前端基础下午课程1 . Python语言言削2 .大学英语强调：定义“列表嵌套”时需要注意的问题(学生一起操作，教师巡视，答疑) 四、【任务实现】学院新闻页面制作 (35分钟)【实现步骤】1、新建网页打开HBuilder创建项目，在项目名称上右击，选择“新建” | “html 文件”，在“新建html文件”对话框中输入文件名称：news.html,单 击“创建”按钮，创建文件。2、分析页面效果，该页面主要由

25、标题和列表文字组成。标题文字 使用vh2,列表文字使用,编写源码如下。3、保存文件Ctrl+S4、浏览网页Ctrl+R学院新闻学校联合发起成立软件行业产教联盟(2021-04-09)lixa href=# targets二blank”)学校“四个推进”掀起党史学习教育热潮(2021-04-08)学校召开2021 年度体育工作会议(2021-04-02 )我校举行“铭记历史缅怀先烈”清明节祭扫先烈活动(2021-04-01 )中国工业互联网研究院来我校交流访问(2021-03-30)lixa href=# target=_b：Lank”)学校召开党务干部业务培训会议(2021-03-30)我校举

26、行课程思政示范课建设专题讲座(2021-03-30)版权所有&c opy;未来信息学院返回c.J八03初kX + C 127 A0.15500/neQ O ：学院新闻忡折乃 miB（2021046 Eg 西个IHT g毕加竽七百,2021年度加白工与仝MI2021 04 02 ） TH0HT 节无 0 mt不齐油QTO鸵丹铉鹏憎202194 01713三R每千机匕务修.，会H12021 03 30）- . . _ ；一 .二_j康姗有U和&聆后同步练习：使用列表标记列出你的家乡特产。引导学生热 爱家乡、增 加文化自信III.课堂小结： （10分钟）掌握有序列表、无序列表、列表嵌套以及自定义列表

27、标记的使用， 最常用的是无序列表和无序列表嵌套。课后作业：超星学习通平台作业。预习：HTML超链接标签、图像标签第5、6学时（创建超链接、锚点链接）课前发布任务：观看学习通平台相关学习视频。做课前测试题。I.导入新课：（10分钟）创建超链接的学习中，你遇到了哪些问题？如何解决的？H.重难点内容讲授：一、超链接标签（45分钟）1、超链接标签的语法格式：热点文字（操作演示讲解超链接标签的各个属性，学生同步练习）2、超链接的几种形式：页面间的超链接：该链接指向当前页面以外的其他页面，单击该链接将完成页面之间的跳转。实例讲解（学生同步操作，教师巡视，答疑）锚点链接：该链接指向页面内的某一个地方，单击该链接可以完成 页面内的跳转。（师生互动：列举网页浏览需求，引入特殊链接一锚点链接，用户能够 快速定位到目标内容）锚点链接创建步骤：第一步：定义锚点；第二步：创建指向锚点的链接。（针对“锚点链接”的作用及创建步骤进行讲解，代码演示说明）（学生一起操作，教师巡视，答疑）