14、新世纪版 网页制作(教案)

资源下载
  1. 二一教育资源

14、新世纪版 网页制作(教案)

资源简介

网页制作(教案)
教学目标:
1. 理解什么是HTML,了解HTML的基本概念和作用;
2. 能够编写基本的HTML代码,了解HTML的标签和属性;
3. 能够使用Microsoft Word编写简单的网页;
4. 能够使用Microsoft Word制作QQ客服网页。
重点:
1. 理解HTML的基本概念和作用;
2. 掌握HTML的标签和属性;
3. 掌握使用Microsoft Word编写网页的基本方法;
4. 掌握使用Microsoft Word制作QQ客服网页的基本方法。
难点:
1. 熟练掌握HTML的标签和属性的使用;
2. 掌握Microsoft Word编写网页的基本方法;
3. 掌握Microsoft Word制作QQ客服网页的基本方法。
教学准备:
1. 一台计算机及投影仪;
2. Microsoft Word软件;
3. 笔记本和纸张。
教学过程:
一、引入知识 (5分钟)
通过提问的方式,引导学生思考和讨论,了解他们对HTML的理解和认识,以及对网页制作的初步认识。
教师:在今天的课程中,我们将学习如何制作网页。首先,我想问一下,你们对HTML有什么了解?
学生:HTML是用于创建网页的标准标记语言,可以用来定义网页的结构和内容。
教师:对HTML的理解是正确的。那么,我们接下来就来了解一下什么是HTML。
二、什么是HTML (10分钟)
1、讲师向学生解释HTML是用于创建网页的标准标记语言,全称为超文本标记语言。
2、对此进行示范,向学生展示一个HTML文件的结构,并解释其包含的基本元素和属性。
教师:HTML,全称为超文本标记语言,是一种用于创建网页的标准标记语言。它由一系列标签组成,这些标签用于定义网页的结构和内容。下面是一个简单的HTML文件的结构示例:



我的网页


欢迎来到我的网页


这是一个段落。




教师:在这个例子中,我们可以看到``标签是整个HTML文档的根标签,``标签用于定义文档的头部信息,``标签用于定义文档的主体内容。其他标签如``和`<h1>`教师:非常好,那么接下来我们就来学习如何编写HTML代码。<br/>三、编写HTML代码 (15分钟)<br/>1、讲师逐步向学生展示并讲解HTML中的常用标签和属性,并示范其使用方法。<br/>2、通过学生手动编写HTML代码的练习,加深对HTML标签和属性的理解和掌握。<br/>教师:现在让我们来学习如何编写HTML代码。HTML的基本主要是由标签和属性组成。标签用于定义文档的结构,而属性可以给标签提供附加的信息。下面是一些常用的HTML标签和属性:<br/>`<h1>`到`<h6>`:用于定义标题,数字越小,标题级别越高。<br/>`<p>`:用于定义段落。<br/>`<a>`:用于定义超链接,属性`href`用于指定链接的地址。<br/>`<img>`:用于插入图片,属性`src`用于指定图片的地址。<br/>`<div>`:用于定义文档中的一个区块,可以用来排列和组织内容。<br/>`<span>`:用于给文档中的某个部分添加样式。<br/>`<table>`:用于定义表格,包括行和列。<br/>`<form>`:用于定义表单。<br/>`<input>`:用于定义输入字段,如文本框、复选框等。<br/>现在,让我们尝试编写一段简单的HTML代码。请大家使用纸张和笔,跟随我的示范一起练习编写HTML代码。<br/>(教师向学生展示一个简单的HTML代码示例,并鼓励学生自己编写并理解每个标签和属性的作用)<br/>四、用Word编写网页 (15分钟)<br/>介绍如何使用Microsoft Word编写简单的网页。<br/>示范在Microsoft Word中创建一个网页,并教授如何插入文本、图片、链接等元素。<br/>引导学生按照示例尝试创建自己的网页。<br/>教师:现在我们来学习如何使用Microsoft Word来编写网页。Microsoft Word是一款功能强大、易于使用的文字处理软件,我们可以利用它来创建简单的网页。请大家打开Microsoft Word软件,跟随我的演示进行操作。<br/>(教师向学生展示在Microsoft Word中如何创建网页,如插入文本、图片、链接等元素,并鼓励学生尝试自己创建网页)<br/>通过以上步骤,学生将基本掌握在Microsoft Word中编写网页的方法。<br/>五、用Word制作QQ客服网页<br/>继续使用Microsoft Word,教授如何制作QQ客服网页。<br/>示范在Microsoft Word中创建一个模拟QQ客服网页,并教授如何设计页面布局、添加QQ客服代码等。<br/>引导学生根据示例,制作自己的QQ客服网页。<br/>教师:接下来,我们将学习如何使用Microsoft Word制作QQ客服网页。QQ客服网页通常用于网站的客服支持,方便用户与客服人员进行即时交流。请大家继续跟随我的示范。<br/>(教师向学生展示如何使用Microsoft Word制作QQ客服网页的步骤,如设计页面布局、添加QQ客服代码等,并鼓励学生尝试制作自己的QQ客服网页)<br/>通过以上步骤,学生将掌握在Microsoft Word中制作QQ客服网页的方法。<br/>课堂练习<br/>学生根据教师的指导,完成基于Microsoft Word的网页制作练习。<br/>学生可以选择练习编写简单的HTML代码,或者使用Microsoft Word制作一个网页或QQ客服网页。<br/>总结和反思<br/>教师与学生一起总结所学内容,确保学生对HTML的基本概念、标签和属性的使用、Microsoft Word网页制作方法等有一定的掌握。<br/>反思本节课的教学效果,并鼓励学生提出问题和疑惑,以便进一步完善教学内容。</p> <p class="introAll">展开更多......</p> <p class="introAllHide">收起↑ </p> </div> </form> <div class="entry-content clearfix"> <p class="asset-tit"> <img src="/images/asset.png" style="width: 20px;height: 20px;vertical-align: text-bottom;margin-right: 5px;">资源预览 </p> <div class="asset-preview"> <img src="https://preview.21cnjy.com/f2/2024/03/1e/1e860761cf67c17509e35ca8aa6405ac.png" style="max-width:800px;"> </div> </div> <div class="entry-footer"> <div class="entry-bar"> <div class="entry-bar-inner clearfix text-center"> </div> </div> <div class="entry-copyright"> <p>缩略图、资源来源于二一教育资源库</p> </div> </div> </div> </article> </div> <aside class="sidebar"> <div class="widget widget_views"> <h3 class="widget-title">相关资源</h3> <ul> <li><a href="https://doc.21cnjy.com/p-17777626.html" title="14、新世纪版 网页制作(教案)">14、新世纪版 网页制作(教案)</a></li> <li><a href="https://doc.21cnjy.com/p-17129768.html" title="第7课 网页制作(课件)-七年级信息技术上册(新世纪版2018)(共16张PPT)">第7课 网页制作(课件)-七年级信息技术上册(新世纪版2018)(共16张PPT)</a></li> <li><a href="https://doc.21cnjy.com/p-14181203.html" title="3.7网页制作同步练习新世纪版(2018)信息技术七年级上册(Word版,含答案)">3.7网页制作同步练习新世纪版(2018)信息技术七年级上册(Word版,含答案)</a></li> <li><a href="https://doc.21cnjy.com/p-4752736.html" title="第七课 网页制作 教案">第七课 网页制作 教案</a></li> <li><a href="https://doc.21cnjy.com/p-4133018.html" title="第七课 网页制作 课件+教案">第七课 网页制作 课件+教案</a></li> <li><a href="https://doc.21cnjy.com/p-4133016.html" title="第七课 网页制作——网页的美化 课件">第七课 网页制作——网页的美化 课件</a></li> <li><a href="https://doc.21cnjy.com/p-3946720.html" title="第七课 网页设计 课件">第七课 网页设计 课件</a></li> </ul> </div> </aside> </div> </div> </main> <script src="//static.21cnjy.com/js/underscore-1.8.3.min.js"></script> <script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swanInvoke.js"></script> <script> function jumpbaiduboxapp(el){ if (navigator.userAgent.toLowerCase().indexOf('baiduboxapp/') >-1){ window.swanInvoke({ appKey: 'LYaggHHMnhIO7GgfWsVcMKQKoRjCXLqq', path: 'pages/zydown/zydown', query: { id: el.attributes['ownattr'].nodeValue } }); return false; }else{ return true; } }; ;(function(){ var ua = navigator.userAgent.toLowerCase() var isWXWork = ua.match(/wxwork/i) == 'wxwork'; var isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == 'micromessenger'; var isMobile = isDesktop = false; if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) { isMobile = true; } else { isDesktop = true; } var isAndroid = ua.indexOf('android') > -1 || ua.indexOf('Adr') > -1; var isOS = ua.indexOf('iPhone') > -1 || ua.indexOf('iPad') > -1 || ua.indexOf('Mac') > -1; if (isWeixin) { } if (isAndroid) { } // 标题固定fixed var $fixedTit = $('#J_FixedShowDetailTit'); var fixed_tit = function () { var titIsShow = $(window).scrollTop() > 179; if (titIsShow) { $fixedTit.animate({ top: 0 }, 300); } else { $fixedTit.animate({ top: '-200px' }, 300); } }; $(window).on('scroll', _.debounce(fixed_tit, 50)); fixed_tit(); // 简介固定高度 var $height= $('.assets-intro').height(); if($height == 480) $('.introAll').show(); // 收缩 function toMore(el){ var flag = el == '.introAll' ? 1 : 0; var overflow = flag ? "auto" : "hidden"; var maxHeight = flag ? "inherit" : "480px" ; var className = flag ? ".introAllHide" : ".introAll"; $(el).on('click',function(){ $('.assets-intro').css({ "overflow":overflow, "maxHeight": maxHeight }); $(el).hide(); $(className).show(); }); } toMore('.introAll'); toMore('.introAllHide'); })(); </script> <!--footer开始--> <!-- 底部 --> <footer class="footer"> <div class="container"> <div class="clearfix"> <div class="footer-col footer-col-logo"> <!-- <mip-img src="/just/images/logo-footer.png" width="60" height="60"></mip-img> --> </div> <div class="footer-col footer-col-copy "> <ul class="footer-nav hidden-xs "> <li><a href="https://www.21cnjy.com/help/">帮助中心</a> </li> <li><a href="https://www.21cnjy.com/about/about_contact-us.php">联系我们</a> </li> <li><a href="https://www.21cnjy.com/about/about_opinion.php">意见反馈</a> </li> </ul> <div class="copyright "> 2023 版权所有© 二一教育 <a href="https://beian.miit.gov.cn" target="_blank " rel="nofollow noopener noreferrer">粤ICP备11039084</a> </div> </div> <div class="footer-col footer-col-sns "> <div class="footer-sns "> <ul class="footer-nav hidden-xs "> <li>友情链接:</li> <li> <a href="https://yj.21cnjy.com/" title="阅卷软件系统">阅卷系统</a> <a href="https://edu.21cnjy.com/" title="美文范文">优秀范文</a> <a href="https://paike.21cnjy.com/" title="新高考走班">走班排课</a> <a href="https://tiku.zujuan.com/" title="组卷网题库">组卷题库</a> <a href="https://www.chujuan.cn/" title="组题出卷网">出卷网</a> </li> </ul> </div> </div> </div> </div> </footer> <mip-fixed type="gototop"><mip-gototop></mip-gototop></mip-fixed> <mip-stats-baidu token="0280ecaa2722243b1de4829d59602c72"></mip-stats-baidu> <script src="https://c.mipcdn.com/static/v2/mip.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-stats-baidu/mip-stats-baidu.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-gototop/mip-gototop.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-history/mip-history.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-fixed/mip-fixed.js"></script> <script src="https://c.mipcdn.com/extensions/platform/v1/mip-cambrian/mip-cambrian.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-share/mip-share.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-form/mip-form.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-sidebar/mip-sidebar.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-vd-tabs/mip-vd-tabs.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-lightbox/mip-lightbox.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-ad/mip-ad.js"></script> <script src="/assets/26c9d710/jquery.js"></script> <script src="/assets/a0893c15/yii.js"></script> <script src="/assets/a0893c15/yii.activeForm.js"></script> <script type="text/javascript">jQuery(document).ready(function () { jQuery('#w0').yiiActiveForm([], []); jQuery('#w1').yiiActiveForm([], []); });</script> </body> </html>