Web前端开发案例教程（HTML5 CSS3） 教案任务2搭建简单学院网站1.docx

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

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

2、文档的基本格式包括哪些 标记？每个标记的作用是什么？通过学习通 平台拓展阅 读使学生了 解HTML5标 准规范的制 定，激发同无标题文档学们科技报 国的雄心， 增强使命担 当意识。II.重难点内容讲授：一、HTML文本标记（40分钟）1 .标题标记（实现example02. html）2 .段落标记（实现example03. html）3 .水平线标记（实现example04. html）单标记4 .换行标记 重点强调单标记（实现example05. html）5 .字体样式标记（实现example06. html）6 .特殊字符（实现example07. html）（教师多媒体演示、学生一起

3、操作，实现教学做一体化）二、【任务实现】学院简介页面制作（15分钟）效果图如下：e - c O 127A0.1:8S48/chapteO2/ejiampkO7.html Q O :未来信息学院筒介为拿凌仅W为甘所见办方K. 以人为才. 续M 产帙金.利我会.的力 竽，*.U色口水学W发校.为目标.立了升我自条式,窗4,胫工了包丽,人1MU等由tl水.学履 2n邑杜合色肪广泛旄.TttMUtflMUtW皿土人才蛀办应田岐.32-段烧界孝心旭笺或0反咬,修小同住事收IB笺火加咬.MSVBtt 电尸人42sdlar *1111妤外也人力培ur 0”野外鬣给“ 玄*-o: *e心产*v砌 ireo微胃

4、苑道 -食工作（，除弓. 由松新力索*IM竽篇代码如下： g ）未来僖学田 3未来信忠学院是人民1S内批常设立.败H8MI*的公办省管界高等学校学校案Q.以做符友为宗旨以仅或就ik为安向的办学，,3TIU人方K 耽双、产假合.穷社会F办学理念.以没有特色高水平E联厂为目悚,文了开8fseMft, lURTttMM ffii.形成了便纤的人坏ML学校的建水平、R9M.办学M色0将社会各界的广厅簿定./p八学校是牧日部M席的“闰京示显住以忤吸业技术学院口fttififi位部从土人才培养定卢院校3“对口雳通分网培养率八招生成U 校.示范mlB生试点口校：量息产业星技髭人才博训LfSttUR另外包人才

5、B*1MlM1MWM 生培训中。荣在全国flJ息产业系统先迸体US职业败口先送体-论鼻工作优秀*tt等蜂号p三、练习：制作自己的个人介绍页面。（20分钟）教师巡视，答疑III.课堂小结： （5分钟）本次课介绍了 HTML文本标记及利用HTML文本标记创建简单的学院 简介页面。课后作业：1 .课后实训2通过编写 HTML5 代 码，让学生 了解代码书 写要遵循规 范，小错误 可能会导致 页面崩溃， 要养成严谨 细致的工匠 精神。2 .超星学习通平台作业本学期所学课程0x +0 X- - C 1 27X)j0.1:884a/chdpump. Q !n:防 TranjUce信息技术基础Web前端基础

6、Python语言程序设计大学英语,本学期所学课程信息技术基础 WebBISUK 巡 Python港内程序设计 大学英语列表是一种 有秩序的信 息表现形 式，在我们 今天高度发 达的文明社 会中，讲文 明，懂礼貌, 识大局，懂 规矩，遵守 社会公共秩 序。对“有序列表”的概念、基本语法格式及常用属性值进行讲解, 列举网页中常见的例子进行说明，进行代码演示。并本学期所学课程信息技术基础Web前端基础Python语言程序设计大学英语0衰x C 127Aai:8Ma/chapterO2/ampL.Q ：统、TrMHUt.本学期所学课程2. Web前比基础3. Pythoc法程序没计4. 大学英语第3、

7、4学时（HTML列表标记）课前发布任务：观看学习通平台相关学习视频。做课前测试题。1 .学生讨论：（10分钟）问题：为什么要学习各种列表标记？各种列表标记之间又有什么区 别？II.讲授重难点内容：一、无序列表（10分钟）对“无序列表”的概念、基本语法格式及常用属性值进行讲解，并 列举网页中常见的例子进行说明，进行代码演示。（学生同步操作，教师巡视，答疑）强调：定义“无序列表”时需要注意的问题。二、有序列表（10分钟）（学生同步操作，教师巡视，答疑）强调：定义“有序列表”时需要注意的问题。三、列表的嵌套应用（15分钟）打开浏览器，输入淘宝网址，对“列表嵌套”在网页中的常见效果 进行展示，进行讲解

8、。代码演示嵌套应用。今天的课程表上午深厚信息技术基培Web前端基础 下午课程 Python语言程序设计 大学英 强调：定义“列表嵌套”时需要注意的问题（学生一起操作，教师巡视，答疑）四、【任务实现】学院新闻页面制作（35分钟）【实现步骤】1、新建网页打开HBuilder创建项目,在项目名称上右击,选择“新建” | “html 文件”，在“新建html文件”对话框中输入文件名称：news.html,单 击“创建”按钮，创建文件。2、分析页面效果，该页面主要由标题和列表文字组成。标题文字 使用,列表文字使用,编写源码如下。3、保存文件Ctrl+S4、浏览网页 Ctrl+R学院新间h2lixa hr

9、ef-newsl.html- target,二blank,学校联合发起成立软件行业产教联33（202104e9）/A学校四个推进”担起党史学习教育热潮（2021。4.08） href-# target- blank学校召开2921 年度体育工作会议（2。21-04-62 ）我校举行啜记历史缅怀先烈“清明节祭扫先烈活动（2021-g-ei）ali中国工业互联网研究院来我校交流访问（2。21-。3-3。）/学校召开党务干部业翳培训会议（2e21-03-3e）a1i我校举行课程思政示范课建设专题讲座板权所有©未来fg息学院返回ax/p,C 127.0A1:8848/chptefO2/exa

10、mpL.会 g ：?:成用 Trandjte今天的课程表上午课程o信息技术“础。Web前院枇下午第程8551+同步练习：使用列表标记列出你的家乡特产。引导学生热 爱家乡、增 加文化自信III.课堂小结： （10分钟）掌握有序列表、无序列表、列表嵌套以及自定义列表标记的使用， 最常用的是无序列表和无序列表嵌套。课后作业：超星学习通平台作业。预习：HTML超链接标签、图像标签第5、6学时（创建超链接、锚点链接）课前发布任务：观看学习通平台相关学习视频。做课前测试题。I .导入新课：（10分钟）创建超链接的学习中，你遇到了哪些问题？如何解决的？II .重难点内容讲授：一、超链接标签（45分钟）1、超

11、链接标签的语法格式：热点文字（操作演示讲解超链接标签的各个属性，学生同步练习）2、超链接的几种形式：页面间的超链接：该链接指向当前页面以外的其他页面，单击该链 接将完成页面之间的跳转。实例讲解（学生同步操作，教师巡视，答疑）锚点链接：该链接指向页面内的某一个地方，单击该链接可以完成 页面内的跳转。（师生互动：列举网页浏览需求，引入特殊链接一锚点链接，用户能够 快速定位到目标内容）锚点链接创建步骤：第一步：定义锚点；第二步：创建指向锚点的链接。（针对“锚点链接”的作用及创建步骤进行讲解，代码演示说明）（学生一起操作，教师巡视，答疑）对“创建超链接”与“锚点链接”进行对比分析，并总结其注意事项。

12、空链接：单击该链接时不进行任何跳转。热点文字二、练习：完成专业介绍页面。（30分钟）劝。童2 - Kei911SOO*A.2c02刑缪WW =.神0/月才才.RU#*W wMKtAl*MarMEA.7.5a .于/厅 ewMAHv. mgt.祥雳 ttMMter MnwrEf，如grt?t-9A1.zr?oi3和 殍除1，*匕必 dm zsa$i$a$ nA；9SM 丈 Wd7Bf?nTfHttL.Z了3WmWE31*Matg-jtaraFS匕*) aiMW5/uw um ua SRS1WW/JMW 1N*WBe?XlrWtMMHM MMMUSfi2X3.gJUO*. ffSIUt /力。一切

13、in.课堂小结：（5分钟）本次课介绍了超链接的语法格式、形式、利用超链接实现页面问、 页面内的跳转。课后作业：超星学习通平台作业第7、8学时图像标签、绝对路径课前发布任务：观看学习通平台相关学习视频。做课前测试题。I .讨论：（10分钟）在学习图像标记的过程中，你遇到了哪些问题？同学们讨论解决方 法。II .重难点讲授：一、图像标签（20分钟）.语法格式：img src二图像路径 alt=替换文本 title二提示文本 width=图 像宽度 height图像高度对“图像标记”及其属性进行讲解，代码演示说明。（学生一起操作，教师巡视，答疑）.绝对路径和相对路径通过文件夹的层级关系对“路径”进行

14、讲解。：展示PPT对“绝对路径”进行讲解，并举例说明。：展示PPT对“相对路径”进行讲解，并通过“图像文件和html文件”的不同位置进行演示。（学生提问，教师答疑）二、图像标签应用（15分钟）蒂姆伯纳斯李一互联网之父用蒂姆.伯 纳斯.李的 故事激发学 习兴趣，引 导学生立大 志，实现人 生价值。om nw 夫（ou as nawy*Mmcbtihw*w. ixwMeasii力ikmmmcii eni/ratnn79 。上0*比 1 万*KKworm人 解hwok*wo，. “*：t恁。1 S9UI?3（Mm9BrH8W SCAMfRlM4gLM MffXTAM%LSM.落妲伯纳斯李一互联网之父

15、 hl帚姆伯纳斯李（Tim Berners-Lee）爵士（1955年出生于英国）是万维网的发明者，互联网之父，英国功绩初登（0M）获得者，大英帝国官佐勋章（OBE）获得者，英国皇家学会会员，英国皇家工程师学会会员, 美国国家工程院外籍院士。1989年3月他正式提出万维网的设想，199。年12月25日， 他在日内瓦的欧洲粒子物理实脸室里开发出了世界上第一个网页浏览器。他是关注万维网发展的W3C的创始人，弁荻得世界多国授予的各个荣誉。他最杰出的成就，是把免费万维网的构想推广到全世界，让万维网科技获得迅速的发展，深深改变了人类的生活面貌。学生同步练习。三、练习：制作一个图文并茂的个人介绍页面并展示（

16、40分钟）教师巡视答疑IIL课堂小结：（5分钟）本次课学习了 HTML5图像标记和路径的使用，重点掌握相对路径的 表示方法。课后作业：1 .课后实训22 .学习通平台作业第910学时(任务实现：创建简单学校网站) 按照课本2. 3任务实现步骤，创建简单学校网站。一、创建项目(1)打开HBuilderX工具，选择“文件” I “新建”选项,再选择“项即选项,在“新 建项目”对话框中输入项目名称school,位置选择一个合适的位置，选择模板“空 项目、单击“创建”按钮。(2)右击项目名称school,选择“新建T目录”选项，创建目录images,用于存 放图像文件，把本任务提供的素材中的图像复制到

17、该目录中。二、创建网站各页面I Dx 4-；* as学生独立完 成，遇到问 题时先小组 讨论，锻炼 解决问题的 能力。欢iff黎到未来信息学院D RLX 6 - C 1 Z7.QA1 AM/iMRJiaWTK. -M以方澧曾力，ST R!分力. 一4ifA SH2f0 &，懦以来不&-力86. OTRIIXW7MWMI食, 乂7点好的人校耽辜 ttTEA3W.炊X*蟒巾T 0tMM土人力岂黑分维培鼻，不无niiwtsR* BatMti#hmattiour *3*做人工法m努外增3IBW Bid雷/幺awHT . Z 金aKXe.R，M*ff蜜，事假。乜*(V 声工aT1K -tsi&t: mcttvuuflatti 04 ) TgrHITnUMML.t- - -1 L：. .-V - - ；：； ：4 ：- auBMftsniMMaKijftjfli课后作业：学习通平台作业第1112学时(实训：创建个人介绍网站)创意设计：创建一个个人网站项目，对自己进行全面介绍，要求如下。(1)包含一个主页和三个子页，主页和子页可以相互链接。(2)在主页中创建友情链接，链接到自己喜欢的两个网站。(3)至少有一个页面包含无序列表。(4)至少有一个页面包含锚点链接。(5)在每个页面中合理使用文字、图像等。课后作业：学习通平台作业