Web前端开发案例教程（HTML5 CSS3） 教案任务2搭建简单学院网站.docx
-
资源ID：72707380
资源大小：88.22KB
全文页数：8页
- 资源格式： DOCX
下载积分：15金币
快捷下载
会员登录下载
微信登录下载
三方登录下载：
微信扫一扫登录
|
友情提示
2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。
3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。
4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。
5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。
|
Web前端开发案例教程（HTML5 CSS3） 教案任务2搭建简单学院网站.docx
教案名称任务2搭建简单学院网站计划学时12学时学习目标掌握11TML5的基本结构熟悉常用的HTML文本标记、列表标记、超链接标记、图像标记 会熟练使用HTML标记创建简单网页素质目标在编写代码中养成精益求精的工匠精神 通过案例融入价值观塑造教学重点HTML5文档基本结构HTML文本标记、列表标记、超链接标记、图像标记教学难点使用HTML标记创建简单网页教学模式任务驱动教学法线上+线下混合教学模式教学活动及主要环节思政元素 切入点第1、2学时（HTML文本标记）课前发布任务：观看学习通平台相关学习视频。做课前测试题。I.学生讨论：（10分钟）使用HBuilder新建11TML5默认文档时，HTML5文档的基本格式包括哪些 标记？每个标记的作用是什么？通过学习通 平台拓展阅 读使学生了 解HTML5标 准规范的制 订，激发同<!doctype html><html><head><meta charset=nutf-8n> 无标题文档</title</head><body></body></html>学们科技报 国的雄心， 增强使命担 当意识。II .重难点内容讲授：一、HTML文本标记（40分钟）1 .标题标记（实现example02. html）2 .段落标记（实现example03. h 1ml）3 .水平线标记（实现example。7!, html ）单标记4 .换行标记重点强调单标记（实现example05. html ）5 .字体样式标记（实现examp e06. hlml）6 .特殊字符（实现example07. html）（教师多媒体演示、学生一起操作，实现教学做一体化）二、【任务实现】学院简介页面制作 （15分钟）效果图如下：e -> C 0 127A0.1:8848/chapte<02/eMampl«07.html Q O （ ：未来信息学院筒介为拿uusw为A所 见分万r. as 以人为". 一州m 产俄a.的外 竽US,以为目标.立了升放ji.胫立了包丽,人g 学丽ti水.学履 2n邑杜合色肪广泛旄.YttMUtfiMUieq皿土人才培淤应包R校.1*r "曾分段培界孝心皿据（?反校,修而Miw收侬ut<?反咬.Mava tt 电fw尸人力启dtiar势分0人力绘U«r 古力努升鬣蛤UUI«玄*-o: *e心产*v砌« ireo微胃苑«道« -食工作（，«除弓.唐松瑜力©索集<M学篇代码如下：<body><h2>4UKAMMH></h2><p>未来信忠学院是人区政府批酒设立.败USMI叁的公办寄闻界高等学校 学校案Q,以务友舄为宗旨，以仅讲就业为与向办学， .M-IUA%*, «双、产欣金、IM社会F）办学理念,以*色加用gRtJT目帧 mZTJfttMHKtMK. BWTttMM 9».彩战了良好的人环城.学校的理水平.R9M.办学物色用将社会各界的广才簿注./p>«p>学校任教育部准”国旅示显住以住职业技术学院”首他皿土豆人才培养定点院BL-3“对口雷通分网培养基八福生在 校.示范mWB生试点X板：WWE子僖息产业息技曜人才培训“kts地务外包人才1tMlHM 全培训中。荣在”全国俗息产业系统先ifi体IJS职业收口先送体1论工作优秀高校等蜂号p»</body>三、练习：制作自己的个人介绍页面。（20分钟）教师巡视，答疑IH.课堂小结： （5分钟）本次课介绍了 HTML文本标记及利用HTML文本标记创建简单的学院 简介页面。课后作业：1 .课后实训2通过编写 HTML5 代 码，让学生 了解代码书 写要遵循规 范，小错误 可能会导致 页面崩溃， 要养成严谨 细致的工匠 精神。2 .超星学习通平台作业<body><h2>本学期所学课程</h2>0x +0 X<hr>«- -> C © 1 27X)j0.1:884a/chdp<M02/e>ump<. Q !<ul>n:防 TranjUce<li>信息技术基础</li><li>Web前端基础</li><li>Python语言程序设计</li><li>大学英语</li></ul></body>,本学期所学课程信息技术基础 WebBISUK 巡 Python港内程序设计 大学英语列表是一种 有秩序的信 息表现形 式，在我们 今天高度发 达的文明社 会中，讲文 明，懂礼貌, 识大局，懂 规矩，遵守 社会公共秩 序。对“有序列表”的概念、基本语法格式及常用属性值进行讲解, 列举网页中常见的例子进行说明，进行代码演示。并<body><h2>本学期所学课程</h2<hr><li>信息技术基础</li><li>Web前端基础</li><li>Python语言程序设计</li><li>大学英语</li></ol></body>0衰x <-> C ® 127Aai:8Ma/chapterO2/«ampL.Q ：统"、TrMHUt.本学期所学课程2. Web前比基础3. Pythoc法程序没计4. 大学英语第3、4学时（HTML列表标记）课前发布任务：观看学习通平台相关学习视频。做课前测试题。I .学生讨论：（10分钟）问题：为什么要学习各种列表标记？各种列表标记之间又有什么区 别？II .讲授重难点内容：一、无序列表（10分钟）对“无序列表”的概念、基本语法格式及常用属性值进行讲解，并 列举网页中常见的例子进行说明，进行代码演示。（学生同步操作，教师巡视，答疑）强调：定义“无序列表”时需要注意的问题。二、有序列表（10分钟）（学生同步操作，教师巡视，答疑）强调：定义“有序列表”时需要注意的问题。三、列表的嵌套应用（15分钟）打开浏览器，输入淘宝网址，对“列表嵌套”在网页中的常见效果 进行展示，进行讲解。代码演示嵌套应用。<body><h2>今天的课程表<Zh2><hr><ul><li>上午深厚<ul><li>信息技术基培</M><li>Web前端基础</1i></ul> </li> <1£>下午课程 <ol> <li>Python语言程序设计</l，> <li>大学英 </ol> </li> </ul> </body>强调：定义“列表嵌套”时需要注意的问题（学生一起操作，教师巡视，答疑）四、【任务实现】学院新闻页面制作 （35分钟）【实现步骤】1、新建网页打开HBuikicr创建项目，在项目名称上右击，选择“新建 文件”，在“新建html文件”对话框中输入文件名称：news.html,单 击“创建”按钮，创建文件。2、分析页面效果，该页面主要由标题和列表文字组成。标题文字 使用<h2>,列表文字使用<ul>,编写源码如下。3、保存文件Ctrl+S4、浏览网页Ctrl+R<body><h2>学院新间h2><hr><ul><lixa href-newsl.html- target,二blank",学校联合发起成立软件行业产教联33（202104e9）</A</li><li><« href-#" target”_blank”>学校"四个推进”担起党史学习教育热潮（2021。4.08）<%></11><li><« href-#" target- blank"学校召开2921 年度体育工作会议（2。21-04-62 ）</ax/li><lixa href-#" target_blank”>我校举行啜记历史缅怀先烈“清明节祭扫先烈活动（2021-g-ei）a>li><li><a href"-#" target"_blank”>中国工业互联网研究院来我校交流访问（2。21-。3-3。）</"</】1><li><a href-#" target"_blank”>学校召开党务干部业翳培训会议（2e21-03-3e）a>1i><li><a href-#- target”_blank”>我校举行课程思政示范课建设专题讲座</ul><hr ><p>板权所有©未来fg息学院</p><pxa href”index.html”>返回ax/p></bcxiy>,C 127.0A1:8848/ch«ptefO2/exampL.会 g ：?:成用 » Trandjte今天的课程表上午课程o信息技术“础。Web前院枇下午第程同步练习：使用列表标记列出你的家乡特产。引导学生热 爱家乡、增 加文化自信III .课堂小结：（10分钟）掌握有序列表、无序列表、列表嵌套以及自定义列表标记的使用， 最常用的是无序列表和无序列表嵌套。课后作业：超星学习通平台作业。预习：HTML超链接标签、图像标签第5、6学时（创建超链接、锚点链接）课前发布任务：观看学习通平台相关学习视频。做课前测试题。I .导入新课：（10分钟）创建超链接的学习中，你遇到了哪些问题？如何解决的？II .重难点内容讲授：一、超链接标签（45分钟）1、超链接标签的语法格式：<a href="目标地址 target="目标窗口 title="提示文字”>热点文字</a>（操作演示讲解超链接标签的各个属性，学生同步练习）2、超链接的儿种形式：页面间的超链接：该链接指向当前页面以外的其他页面，单击该链 接将完成页面之间的跳转。实例讲解（学生同步操作，教师巡视，答疑）锚点链接：该链接指向页面内的某一个地方，单击该链接可以完成 页面内的跳转。（师生互动：列举网页浏览需求，引入特殊链接一锚点链接，用户能够 快速定位到目标内容）锚点链接创建步骤：第一步：定义锚点；第二步：创建指向锚点的链接。（针对“锚点链接”的作用及创建步骤进行讲解，代码演示说明）（学生一起操作，教师巡视，答疑）对“创建超链接”与“锚点链接”进行对比分析，并总结其注意事项。 空链接：单击该链接时不进行任何跳转。<a href=#>热点文字</a>二、练习：完成专业介绍页面。（30分钟）C 9O 0科 S 一WT劝>。童2 - K«ei911S00*A.2c02"刑，6缪WW =.神0/月才才.RU#*W ««w»MKtAl*MarM'EA.7.5a .于/厅 ewMAHv. mgt.祥雳 ttMMter MnwrEf，如grt?t-9A1.z<*MtBMNmnes±W9«Hiv玄人抵»>r?oi3和 殍除1，*匕必 dm zsa$i$a$ nA；9SM C WATW«WftTfHtfiL*.irrMQfliXt1ElV»4Watg-jiaKnttFs匕*) « 的MW5/.uwn» um« ub«® SRS«1»WW/JMW ®1N*W»Be»?Xlr«W£tMMHM MMMUSfi2<X3.gJUO*. ffSIUt "«/力。一切in,课堂小结：（5分钟）本次课介绍了超链接的语法格式、形式、利用超链接实现页面问、 页面内的跳转。课后作业：超星学习通平台作业第7、8学时（图像标签及学院首页、新闻详情页制作）课前发布任务：观看学习通平台相关学习视频。做课前测试题。I .导入新课：（10分钟）学习图像标记的过程中，你遇到了哪些问题？让学生讨论怎么解 决？II .重难点讲授：一、图像标签（20分钟）.语法格式：<img src二图像路径 alt二”替换文本 title=”提示文本 width="图 像宽度 height/图像高度）对“图像标记”及其属性进行讲解，代码演示说明。（学生一起操作，教师巡视，答疑）.绝对路径和相对路径通过文件夹的层级关系对“路径”进行讲解。展示PPT对“绝对路径”进行讲解，并举例说明。：展示PPT对“相对路径”进行讲解，并通过“图像文件和html文件” 的不同位置进行演示。（学生提问，教师答疑）二、 图像标签应用（15分钟）C O UTAA1含蒂姆伯纳斯李一互联网之父git啦'9airazx jww具 fMM (OK) H KflWWM.MBFTW箸«*t ixwMenss力ixcrniz月mi. 0nM柒*7立 hub-今kiiw. ci比切FtfwxmttA.gtsi万*MM9广”±tf为»ffXTA«msm.用蒂姆.伯 纳斯.李的 故事激发学 习兴趣，引 导学生立大 志，实现人 生价值。C 0 1"0alM4&次迎来到未来伯JB学乐<body><hl>蒂姆伯纳斯李一互联网之父 hl><hr><img src=-images/li.png- alt="蒂姆伯纳斯李” width=M300M><p>蒂姆伯纳斯李（Tim Berners-Lee）酹士（1955年出生于英国）是万维网的发明者，互联网之父，英国功绩初登（0M）获得者，大英帝国官佐勋章（OBE）获得者，英国里家学会会员，英国皇家工程师学会会员, 美国国家工程院外籍院士。1989年3月他正式提出万维网的设想，199。年12月25日，他在日内瓦的欧洲粒子物理实脸室里开发出了世界上第一个网页浏览器。他是关注万维网发展的W3C的创始人，并获得世界多国授予的各个荣誉。他最杰出的成就，是把免费万维网的构想推广到全世界，让万维网科技获得迅速的发展，深深改变了人类的生活面貌。</p></body>学生同步练习。三、【任务实现】学院首页制作 （20分钟）分析页面效果，该页面主要由标题和列表文字组成。标题文字使用<h2>,列表文字使用<ul>,编写代码如下。<body>«h2）欢理来到未来但电学院h2><hr ><P>3 "1"”111厂>学院能介<“<a href*"news.htBl">?EUlfilM</a><br>< hr、招生 8UE）</p><pxing src«*iHages/scbooll.jpg" width«"400" "t。"学沆区tSSS.«P）友情15接<林""1"6：«.1>，山.（8”百度/&2“;424；“ hz，F”>学院m网/><hr ><p>版权所有&cd>y;未来（g包学院</p></body>（教师与学生同步操作，实现教学做一体化）四、练习：实现新闻详情页面。（20分钟）学如 含MMizvwb他产raIII.课堂小结：（5分钟）本任务学习了 HTML5常用标记，要熟知每个标记的使用场合及常用 属性，会使用这些标记搭建网页结构。课后作业：1 .课后实训22 .学习通平台作业
