网页制作教案

时间：2019-05-12 23:44:32下载本文作者：会员上传
简介：写写帮文库小编为你整理了多篇相关的《网页制作教案》，但愿对你工作学习有帮助，当然你在写写帮文库还可以找到更多《网页制作教案》。

第一篇：网页制作教案

网页制作与设计教案

第一讲 网页设计概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 网页中所使用的技术............................................................................................................4 1.4 制作网页的基本方法............................................................................................................4 第二讲 HTML的基本标志与格式标志.......................................................................................4 2.1 HTML文档的基本结构.........................................................................................................5 第三讲 HTML的文本、图片与超级链接标志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入图片................................................................................................................................8 2.4 建立超级链接........................................................................................................................8 第四讲 HTML表格、表单与框架标志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表单的应用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五讲 HTML标志综合运用案例.............................................................................................11 第六讲 DREAMWEAVER中简单WEB站点建立与管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七讲 DREAMWEAVER中静态网页设计.............................................................................13 3.2 在页面中加入文字和图像..................................................................................................14 3.3 超级链接的运用..................................................................................................................14 3.4.表格的应用.........................................................................................................................14 3.5.在网页中创建表单.............................................................................................................15 第八讲 DREAMWEAVER中动态网页设计.............................................................................15 第九讲 DREAMWEAVER综合性网页设计案例.....................................................................16 第十讲 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT语言简介.............................................................................................................17 第十一讲 VBSCRIPT的基本元素与输入输出.........................................................................18 4.2.基本数据类型.......................................................................................................................18 4.2.表达式和运算符.................................................................................................................19 第十二讲 VBSCRIPT的条件语句、循环语句和过程.............................................................20 4.3 VBSCRIPT基本语句.............................................................................................................20

第一讲 网页设计概述

【教学内容】

讲解网页设计的相关术语及网站制作的基本流程。【教学目的】

使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学重点】

网页设计中的若干术语。【教学难点】

理解网页设计中的若干术语。【教学方式】

讲授式、讨论式、案例分析式。【教学参考】

1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。

2、《Internet 网页工场》Wittime工作室 重庆出版社。

3、《WEB网站设计》Joel Sklar著 高等教育出版社。

4、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】

1.1 WWW和URL 1.1.1 Web的起源

Web是World Wide Web的简称，一般也称之为WWW或3W 1.1.2 Web的特点和结构

Web最大的特点是使用了超文本（Hypertext）WWW采用C/S（客户机/服务器）工作模式

在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议 1.1.3 URL URL的完整格式

协议://主机名或IP地址：端口号/路径名/文件名

1.2 IE5的使用

Web浏览器是浏览Internet资源的客户端软件

在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic等

1.2.1 IE5的界面 1.2.2 IE5的使用

列表标志的使用。【教学方式】

讨论式、案例分析式、练习式。【教学参考】

1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。

2、《WEB网站设计》Joel Sklar著 高等教育出版社。

3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】

2.1 HTML文档的基本结构

2.1.1 HTML语法

1、双标记

语法：

<标记>内容

2、单标记 语法：<标记> 最常用的单标记是

3、标记属性 语法

<标记

属性1 属性2 属性3 … > 例子

4、注释语句 格式

例子

2.1.2 HTML文档的基本结构 【课后小结】

通过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用 列表,有序列表,无序列表标志及属性。

第三讲 HTML的文本、图片与超级链接标志

【教学内容】

讲解HTML标准中的文本、图片与超级链接标志 【教学目的】

* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。

< EM>......，强调文字，通常用斜体。

< STRONG>......，特别强调的文字，通常用黑体。

......，以等宽体显示西文字符。

......，使文字大小相对于前面的文字增大一级。

......，使文字大小相对于前面的文字减小一级。......，使文字成为前一个字符的上标。......，使文字成为前一个字符的下标。......，使文字显示为闪烁效果。2.2.6

文本修饰 2.2.7

预格式化文本 使用预格式化标记

不再忽略在此之间的空格、制表符与回车符等元素 2.2.8 转义字符与特殊字符

一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格 2.2.9 文本强制换行和不换行 文本强制换行


不换行 2.2.10 插入水平线 使用

标记

属性：Width，Size，Align，Noshade，color 2.2.11 使用列表

1、无序列表

  • 列表条目1
  • 列表条目2......

2、有序列表

  1. 列表条目1
  2. 列表条目2......

3、定义列表

列表条目1
条目1的说明
列表条目2
条目2的说明 ……

...... 2.4.4 图像地图 【课后小结】

本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性，熟练运用这些标志是制作多媒体网页的基础。超级链接标志中，书签链接是一类特殊的链接方式，理解和使用书签链接学习HTML中超级链接标志的难点。

第四讲 HTML表格、表单与框架标志

【教学内容】

讲解HTML中制作表格、表单与框架的标志。【教学目的】

使学生掌握简单表格、表单与框架的制作。【教学重点】

* 表格中单元格的合并以及表格嵌套和叠加操作。* 框架的嵌套使用。* 表单元素标志与属性。【教学难点】

* 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。* 理解框架属性name、target的意义。

* 理解表单中相应元素对应标志及属性的含义。【教学方式】

案例分析式、项目教学 【教学参考】

1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。

2、《WEB网站设计》Joel Sklar著 高等教育出版社。

3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】

2.5 插入表格

2.5.1 在网页中插入表格

表格的基本构成元素：表头，单元格，列，行

FrameSpacing=“2“

BorderColor=”#008000“ >

2.7.3 子窗口属性设置

2.7.4 常见的框架窗口划分方法（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分

（3）目录和标题，分为左上、左下、右三部分

（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上、右下三部分 2.7.5 不支持框架的网页

</p><p><BODY> 很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。</p><h2><a name="2" >第二篇：《网页制作》教案范文</a></h2><p>《信息技术》第三册</p><p>新课程标准教案</p><p>制作第一个网页(网页诞生了)</p><p>[教学目的]</p><p>1．通过浏览几个精彩网页，激发学生制作网页的学习兴趣。</p><p>2．熟练掌握启动Frontpage 2000，熟悉Frontpage2000文件菜单和常用工具的使用方法，新建“只有一个网页的站点”的操作步骤，从中认识Frontpage2000的主界面，理解创建网站的意义．</p><p>3．网页的基本步骤，了解创建网页的过程学会在网页中输入文字、编辑文字、插入图片的方法，培养学生搜集、处理信息的能力。</p><p>4．作网页，培养学生学习制作网页的兴趣</p><p>[教学重点]</p><p>创建网站的过程，制作、编辑网页的基本方法。Frontpage2000的窗口组成，[教学难点]</p><p>保存网页文件的方法，创建网站的意义</p><p>[教法设计]</p><p>演示、练习、讲授、启发引导、任务驱动</p><p>[导入新课]</p><p><讲述>在因特网上，我们可以用IE浏览器获取万维网中各种有价值的信息。同时看到许多</p><p>组织机构甚至个人都在万维网上拥有自己的网页。</p><p>让学生打开“网上邻居”的“网页”文件夹，浏览从网上下载的几个精彩网页。</p><p><归纳> 你们有没有想过自己制作一个网页呢?把自己想要表述的内容，自己喜欢的作文、图片通过网页展示给同学或更多的朋友观看、欣赏、浏览。</p><p>[讲授新课]</p><p><布置任务> 制作第一个网页</p><p><提问> 网页制作不是一件简单的事情，而是按一定的顺序一步步进行的。请同学们回忆制作网页前应作哪些准备工作?</p><p><归纳> 现在开始创建网页．我们选用功能强大，操作简单的工具Frontpage 2000来制作。</p><p>一．启动Frontpage 2000</p><p><讨论> 进入到Frontpage 2000界面后，比比看，这个软件与以前学过的Word 2000与Excel2000有什么相同与不同之处呢?(展示两软件界面的图片)</p><p><归纳> 相同之处是：窗口相似，都有常见的标题栏、菜单栏和工具栏。不同的是：多了一个如教材的图2—2—2所示：1．编辑模式标签卡2．视图框。</p><p>二．建立只有一个网页的站点</p><p><思考> 为什么不新建一个网页，而要新建一个站点呢?</p><p><演示> 新建FrontPage 2000中“个人站点”来启发引导．</p><p><小结> 一般来讲，网页文件总是存放在特定的站点中便于管理。因此，第一次制作网页之前需建立一个存放网页文件的专用站点。</p><p><学生练习>教材P76试试看</p><p>对于初学者，通常选用“只有一个网页的站点”，今后根据需要可以向网站中添加新的网页。</p><p><提问> 看书P76页图2-2-6，仔细观察文件夹列表中唯一的一个网页名称是什么?(它是什么文件?)</p><p><归纳> index．htm被命名为主页，即进入网站时看到的第一个网页。</p><p>三．在主页面编辑模式下插入文字，插入图片。</p><p><讲授> 我们知道文字，图片，动画是网页组成的基本元素。</p><p>教案设计：陡埠中学</p><p>彭荣兵</p><p>《信息技术》第三册</p><p>新课程标准教案</p><p>今天我们就在空白的主页中加入文字和图片，制作一个简单的网页。</p><p><老师演示启动Frontpage 2000，新建“一个网页的站点”直至打开INDEK.HTM主页的整个步骤)</p><p><布置任务)</p><p>打开主页文件，在右边主页页面编辑窗，中完成如下任务：</p><p>1．将准备好的介绍班集体的文字(主题和正文)插入(复制，粘贴)到页面中。</p><p>2．从计算机E盘里找到存储的“集体照”图片插入到网页中。</p><p>复习WORD中学过的文字编辑、排版，插入图片的方法。</p><p><部分学生演示插入图片的方法，教师重复演示并加以补充></p><p><宣布比赛开始></p><p><学生操作，教师指导></p><p><对在操作的过程中遇到的共性问题给予指导></p><p>问题：</p><p>学生插入图片后将其移动到合适的位置及调整图片大小．</p><p><解决方法></p><p>1．老师引导，讲解；2．学生演示；3．学生相互讨论。</p><p>四．预览网页</p><p><讲授> 编辑工作完成后就能观看制作的效果了．可以保存之后在IB浏览器中观看，也可以直接通过预览模式标签卡预览、浏览．请同学们参考教材的图示切换“预览”标签卡，预览制作的网页。</p><p><展示几个学生的优秀作品，师生共同评价></p><p>评选出网页制作的“速度奖”、“设计奖”、“美观奖”。</p><p>五、保存制作的网页</p><p>网页制作完成，需要将它保存下来．请同学们按照教材P78页上的操作步骤将网页文件分别存放在images和_private文件夹中。</p><p><学生自行操作></p><p><归纳)在创建网站的同时系统自动地创建了images和_private文件夹。其中images文件夹用来保存网页中使用的图像文件，而private文件夹则保存一些参考文件和其他一些重要数据．鉴于此，希望同学们以后要学会分门别类地存放数据、资料和信息，养成整洁、条理的好习惯。</p><p><课堂总结> 今天用网页制作工具Frontpage 2000创建了一个只有一个网页的站点，在主页中加入了文字和图片，制作了一个简单的网页．这只是网页制作的第一步，精彩的网页还要不断地加工、美化和修饰，例如：配上美丽的背景，加上好看的花边和配上动听的音乐，使之变得更完美。</p><p><课后小记></p><p>本着以学生为主体的原则，我在本课的教学中设计先让学生浏览网上下载的精彩网页，借以激发他们学习制作网页的兴趣，然后从启动Frontpage 2000开始，直至网页制作完成，老师只是一步步的启发引导，起着主导的作用，大部分时间都是学生自己动手动脑操作，整堂课课堂气氛活跃，收到了较好的教学效果。</p><p>教案设计：陡埠中学</p><p>彭荣兵</p><h2><a name="3" >第三篇：《网页制作》教案</a></h2><p>《网页制作》教案</p><p>潘有寅</p><p>一、说教材：</p><p>(一)教材分析：现在网络快速发展，广大的学生接触，使用INTERNET的机会也大大增加，学生在使用网络 获取信息时，更多的是通过浏览网页这一方式，我认为上好这节课是非常必要的，这对学生进一步认识、使用INTERNET更有益处，同时通过网页制作这一过程也利于学生对计算机常用素材的类型有更深入的了解，在一定程度上也起着培养学生运用综合知识能力作用，所以我认为这节课是非常值得我们去研究上好的，考虑这节课的内容及教法、学法的需要，我把这节分为两课时，第一时：在引导下学生学，练 DREAMWEAVER制作网页的基本方法；第二课：让学生自己构思创意一个与自身相关的内容丰富的，页面美观的网页。</p><p>(二)教学目标：根据对教材的分析及学生实际情况，制定如下的教学目标：</p><p>(1)知识目标：</p><p>1、有关建设第一个网页的理念思想构成。</p><p>2、熟悉用DREAMWEAVER制作网页的基本方法</p><p>3、超级链接是网页实现互相链接的基本方法</p><p>(2)能力目标：</p><p>1、培养学生的自学能力</p><p>2、创意构思能力</p><p>3、能制作出具有多重链接、多种素材、内容丰富的网页。</p><p>(3)情感目标：</p><p>1、教育学生正确认识和理解信息技术相关文化，伦理和社会问题，负责地使用信息技术。</p><p>(三)教学的重、难点：</p><p>根据对教材的分析及网页制作过程中的 实际情况，我认为要出制作内容丰富的网页，关键是要知道为什么要做网页，明确你做网页的目标。从培养学生运用信息技术综合能力这点出发，我认为如何引导学生进行思考定位、以及通过网页的制作这过程使学生对互联网有更深入的了解和运用，应该做为本节的难点内容。</p><p>二、说教法：</p><p>我采用了主体式教学模式，首先我创设了一个学习情景，让学生在情景中积极地完成任务，在任务完成阶段，我是一名帮助者、引导者，教学时注意观察学生，及时总结共性问题，个性问题留给小组学生讨论，不断激发学生的学习兴趣，以达到最佳教学效果。教学方式上①我采用了“任务驱动”教学方式，强调“实践出真知”的科学思想，授课时出示明确的，可操作性强的教学任务②分层教学，分类指导即两分：考虑学生计算机水平的差异，我把学生分为A、B两层，不同层次学生完成的学习目标不同，不同层次的学生教师指导方法不同。A层学生只要求完成知识目标，及能力目标第一个，B层学生同时要求能力目标的2、3 项。</p><p>三、说学法：</p><p>以学生为中心，要求学生由知识的灌输对象转变为信息加工的主体，引导学生按以下两种方式来完成任务：①自学自练：通过学生自己在计算机进行操作从中获取对知识的正确理解，探求问题解决的方法；②协作学习：在实际操作中遇到的问题鼓励学生共同研究讨论、解决，使学生可以看到问题的不同侧面和不同的解决途径，开阔学生的思路，从而对知识产生新的理解。</p><p>四、说教学过程</p><p>教学环节</p><p>教师主导</p><p>学生主体</p><p>设计意图</p><p>导入新课：</p><p>同学们，互联网近年发展迅猛，大家都离不开网络了，那么同学们平时上网看的都是别人做的网页，如果自己也可以在网上看到自己制作网页，那中动手的满足感该有多好啊。这节的学习的目标就是网页的制作，准备共用两课时完成这部分内容，第一课时：自学自练DREAMWEAVER制作网页的基本方法；第二课时： 自己设计制作网页。学生回答，明确学习目标 通过展示教师制作的学校网页，激发学生的学习兴趣，同时给出学习目标，让学生明确学习任务，做到有的放矢。</p><p>讲授新课第一课时： 再具体操作之前，同学们应先了解有关网页的一些相关知识。</p><p>阅读内容、分析，总结激发学生主体参与意识，培养学生阅读归纳知识的能力 理念的构成，寻找可模仿的同龄人制作的网页。找出网页内在的逻辑关系及理念。先模仿再创造。观察，调动的兴趣，明确学习的途径，方法，坚定学习成功的信心。通过展示学生们制作的班级网页，进一步激发学生的学习兴趣，同时坚定学生的学习信心，告诉学生通过自己的自学自练就可实现学习目标，进而培养学生的自学习惯。</p><p>总结或补充</p><p>1、网页制作方法很多，我们要学习的只是其中的一种；</p><p>2、无论哪种方法制作的网页，生成文 件扩展名均为html或htm，即对应是html语言</p><p>3、当浏览网页时，看到的不是语言代码而是语言代码所描述 的形象。总结 理解、记忆在上课的最佳时间内，让学生了解有关网页的相关知识，这利于学生的记忆</p><p>教师指导(分类指导)共性问题做小结</p><p>自学、自练协作学习培养学生自学能力，阅读、分析、解决问题实际操作，使学生成为学习的主体，学习的主人 小结 1解决操作中的共性问题</p><p>2指出超级链接是实现多网页链接的的基本方法：</p><p>3、保存文件为htm或html格式并预览 学生总结并提出问题，理解超级链接，预览自己的练习作品</p><p>解决操作中的问题，为下步学习扫清障碍，将本节的重点问题突出，通过预览对网页设计有一个初步设想</p><p>展示第二课时目标：</p><p>设计一个网页，内容丰富，突出主题，展示个性</p><p>多种素材综合运用(可以自己准备素材)</p><p>明确下课时学习任务，主动思考</p><p>通过一下课时的目标展示，使学生可以有更多时间去构思、创意，促动学生主动的去思考、去学习，引导学生习惯于创新，展示独特创意。</p><p>第二课时</p><p>展示第二课时目标：</p><p>计一个网页，内容丰富，突出主题，展示个性</p><p>多种素材综合运用(可以使用自己的准备素材)</p><p>明确任务</p><p>明确目标、任务，理清设计思路</p><p>指导(分类)</p><p>设计自己的网页</p><p>培养学生实际操作能力，综合运用知识能力在这过程中学生将会将上节自学的内容及以上学习综合运用，这对培养学生综合能力是相当有好处的。</p><p>通过局域网展示网页</p><p>学生推荐、自荐、评论</p><p>激发学生向上进取的学习态度，也可以使学生横向学习</p><p>课堂小结及课后要求</p><p>小结：找优缺点</p><p>思考、总结</p><p>进步引导学生学习</p><p>课后思考</p><p>1、让你的网页互相网上也被全世界人所浏览，那你该怎样实现</p><p>2、用DREAMWEAVER制作的网页与我们平时所见的网页效果一样吗？</p><p>全班互动学习进一步拓展学生的学习思路，学习空间，加强自学、互学的能力</p><p>五、说板书设计：</p><p>考虑到信息技术学科教学的实际特点，所以在板书设计上我主要体现了以下三个特点。</p><p>突出简要内容</p><p>突出课时目标</p><p>设置“共性问题”、“总结解决”版面</p><p>板书设计 网页制作</p><p>第一课时：</p><p>网页文件说明</p><p>1、常见的网页制作工具</p><p>2、网页文件的扩展名为htm或html</p><p>3、浏览器所显示的不是语言代码而描述的形象</p><p>二、理念构成</p><p>1、目标：熟悉用dreamweaver制作网页的基本方法</p><p>2、分类指导</p><p>共性问题</p><p>总结解决 第二课时目标</p><p>设计网页，内容丰富，突出主题，展示个性多种素材综合运用(可以自己准备素材)第二课时：</p><p>一、目标：</p><p>1、设计网页，内容丰富，突出主题，展示个</p><p>2、种素材综合运用(可以使用自己准备的素材)</p><p>二、设计制作：</p><p>共性问题</p><p>总结解决</p><p>三、展示、讨论</p><p>四、课后思考</p><h2><a name="4" >第四篇：网页制作教案</a></h2><p>第一节 制作简单的网页</p><p>（一）教学对象分析</p><p>学生在学习本内容前，已经学习了利用Word制作简单的网页，并且初步掌握了制作网页的一般流程及基本操作，具有进一步学习的能力。</p><p>（二）教学目标</p><p>1、了解Frontpage的界面组成及基本功能。</p><p>2、掌握在Frontpage中编辑文字、插入图像的方法。</p><p>3、掌握在Frontpage中设置电子邮件超链接的方法。</p><p>4、培养学生在获取信息的能力，使学生学会利用计算机和网络搜集与准备网页素材。</p><p>5、培养学生的知识迁移能力。</p><p>（三）教学重点</p><p>利用Frontpage制作简单的网页</p><p>（四）教学方法和手段</p><p>教学方法：以学生自学为主，教师辅导为辅。教学手段：多媒体网络教学。</p><p>（五）教学过程</p><p>1、创设情境，导入新课：</p><p>展示几幅优秀的网页作品，激发学生学习专业网页制作软件的愿望。Frontpager 功能主要体现在：</p><p>1、网页编辑功能。</p><p>2、网站管理功能。</p><p>一、启动Frontpage i.ii.启动Frontpage Frontpage窗口组成</p><p>二、用Frontpage制作网页</p><p>1、输入文字</p><p>2、设置字体、字号</p><p>3、插入剪贴画</p><p>4、创建电子邮件超链接</p><p>三、保存网页</p><p>四、预览网页 反馈操作情况情况</p><p>第二节 插入表格</p><p>（一）教学目标</p><p>了解Frontpage中使用表格的作用。掌握在Frontpage中插入表格的方法。能熟练在表格中输入文字、插入图片。</p><p>（二）教学重点</p><p>在Frontpage 中利用表格组织网页结构。</p><p>（三）教学过程</p><p>导入新课，表格是网页中经常使用的一种形式，表格里不仅可以存放文字、图像等数据，还可以作为组织网页内容的框架，使网页整齐、美观。</p><p>新课讲授：</p><p>1、插入空表格</p><p>2、在表格中插入图片</p><p>3、设置图片属性</p><p>4、输入文字</p><p>5、设置表格属性</p><p>6、插入表格标题</p><p>7、保存网页、预览网页 本课总结</p><p>第三节 创建表单</p><p>（一）教学目标 了解表单的功能。</p><p>掌握在Frontpage中创建表单的方法。掌握在Frontpage中插入表单域的方法。</p><p>（二）教学重点 表单网页的结果处理。</p><p>（三）教学过程</p><p>复习</p><p>1、如何制作图文并茂的网页？</p><p>2、表格在网页中的主要作用？</p><p>3、在网页中插入表格有几种方法？ 导入新课、创设情境</p><p>展示几幅含有表单域的网页作品，例如调查表、申请表、提问：表单与表格的异同点？ 讲授新课</p><p>一、利用表单网页向导创建表单</p><p>1、建立表单</p><p>2、修改表单</p><p>3、处理表单结果</p><p>4、利用表单确认模板制作表单确认页面</p><p>二、制作网页背景 反馈操作情况 本课总结</p><p>课后任务：利用菜单栏中的命令在网页中插入表单域。</p><p>第四节 利用框架制作首页</p><p>（一）教学目标 了解框架的功能</p><p>掌握在Frontpage中使用框架的方法。掌握在Frontpage中建立超链接的方法。</p><p>（二）教学重点 利用框架制作首页</p><p>（三）教学过程</p><p>复习：</p><p>1、如何制作表单页？</p><p>2、表单的主要作用？</p><p>导入新课、创设情境：展示模范的网页作品，激发学生学习的兴趣。讲授新课：</p><p>一、利用框架制作首页</p><p>1、新建框架网页</p><p>2、设置 右框中的初始网页</p><p>3、保存网页</p><p>4、建立左框中的网页</p><p>二、建立超链接</p><p>二、制作网页背景 保存网页、游览网页 反馈操作情况 本课总结</p><p>课后任务：练习其他几种超链接方式。宛善网页。</p><p>第五节 站点管理</p><p>（一）教学目标 了解站点的基本知识。</p><p>掌握利用Frontpage建立站点的方法。掌握向站点中导入网页的方法。</p><p>（二）教学重点 导入超链接</p><p>（三）教学过程 复习：</p><p>导入新课、创设情境：Frontpage不仅具有强大的网页编辑功能，而且具有强大的管理站点的功能。讲授新课：</p><p>一、建立站点</p><p>二、导入网页</p><p>三、导入超链接 本课总结</p><p>第六节 发布站点</p><p>（一）教学目标 了解发布站点的一般流程</p><p>（二）教学重点</p><p>把站点发布到因特网上是本节的重点。</p><p>（三）教学过程 复习：</p><p>导入新课、创设情境：展示因特网上的优秀个人网站。讲授新课：</p><p>一、把站点发布到本机</p><p>二、测试网站的表单功能</p><p>三、把网站发布到因特网上（介绍）本课总结</p><h2><a name="5" >第五篇：网页制作教案</a></h2><p>HTML第一节课</p><p>1.本课程主要目标</p><p>使用DIV+CSS布局网页</p><p>使用CSS美化网页</p><p>制作精美的商业网站 2.整体课程内容</p><p>3.本课程授课目标</p><p>3.1了解HTML整体课程 3.2 会使用HTML标签</p><p>3.3 了解并会使用 CSS 层叠样式表 3.4 div+CSS 做网页 3.5完成一个完整的网页 4.本章目标</p><p>会使用HTML的基本结构创建网页 使用文本相关标签排版文本信息 使用图像相关标签实现图文并茂的页面 会使用超链接相关标签实现页面间的跳转 5.本章重点</p><p>本阶段的重点是让学员熟悉HTML的基本结构、HTML中的一些基本标记以及标记的属性，以及HTML中的链接。6.本章难点</p><p>HTML基本标记及其属性 7.授课思路</p><p>以提问和演示的方式 边讲边演示</p><p>7.课程知识点讲解 7.1什么是HTML</p><p>超文本标记语言，是英文Hyper Text Markup Language的缩写 什么是超文本</p><p>就是指页面内可以包含图形、动画、声音、表格、链接等非文字元素。</p><p>什么是标记</p><p>就是我们要学的标签 也就是说标记语言是由一套标签组成的</p><p>HTML发展史</p><p>7.2HTML基本结构</p><p>7.3用记事本创建网页的步骤</p><p>答：</p><p>1、打开记事本</p><p>2、输入HTML代码</p><p>3、保存为*.html文件，注意格式问题</p><p>4、打开网页预览效果 8.标签</p><p>8.1 标题标签</p><p>H1 H2 H3 H4 H5 H6 由大到小 <h1>标题内容 </h1></p><p>讲课思路：先演示h1的效果，在边演示边讲解h1-h6的变化，以及他们都是加粗字体</p><p>提问：有没有h7，然后演示，结果：和正常字体一样</p><p>8.2段落标签</p><p>p 格式 <p>段落内容</p><p>讲课思路：先演示两段。</p><p>提问 ： 与正常见到的段落有什么不同</p><p>答；首行没有缩进，没有换行 可以先用空格代替 缩进学完样式后就会使用 接下来讲换行标签</p><p>8.3换行标签</p><p><br/> 代表换行</p><p>第一个但标签 书写方式< /> 与双标签的区别 个数 及 /的位置</p><p>讲完换行标签后与段落标签对比，告诉他们根据空隙的大小区别什么是段落（间隙大）、什么是换行（间隙小）</p><p>8.4水平线标签</p><p><hr />水平线标签</p><p>第二个单标签 是一条水平线</p><p>先演示 然后告诉他们可以改颜色---引出属性</p><p>解释什么是属性 就是用来修饰标签的 属于标签的性质 要写在标签里 书写写法 属性名=“具体值” 并演示给他们</p><p>8.5 加粗、斜体标签</p><p>加粗的字 <em>斜体的字</em></p><p>挑选部分字体演示</p><p>8.6 特殊符号</p><p><!--注释--></p><p>效果：不会显示在页面上 作用：1网页的作者 2注释部分代码 试用于找错的时候</p><p>空格   > > < < “ @</p><p>首先敲一个空格 提问：是否有效果 再敲多个空格 提问；是否有效果 展示并引出空格特殊符号 ” ©</p><p>先敲一个<p>问他们是否会显示在页面 然后再说出替代的 < > 特殊符号</p><p>最后提问 有没有注意过版权符号 提示他们网站的最下面版权部分 最后演示写法</p><p>8.7 图片标签 思路---------标签与标签的属性----可以回顾 已经学习的标签 与 a标签的区别 双标签 单标签 标签属性</p><p><img src=“图片的路径” alt=“替换图片显示的文字” title=“鼠标悬停时显示的文字 图片的描述” width=“宽度” height=“高度” /></p><p>图像首先说明是单标签 然后介绍第一个属性 src 路径介绍：相对路径 上一级../ 上上级../../ 下一级 同级名/ 绝对路径</p><p>file:///C:/Users/Administrator/Desktop/Chapter01/demo.html 第二个属性：alt 演示图片不显示的情况 第三个属性：title 书写并将鼠标放到图片，查看效果</p><p>第四个属性：width 单独设置宽度时的效果 高度成比例缩放</p><p>第五个属性：height 单独设置高度时的效果 宽度成比例缩放</p><p>如果想要具体的大小 则要同时设置宽和高</p><p>8.8 链接标签</p><p><a href=“点击要链接到的地址（页面文件.html #锚点的名字 #空链接）”</p><p>先写一对<a></a> 标签 然后再在里面写上href属性 告诉他们与图片的src属性相似，都是地址路径 再告诉他们href=“" 里面可以是别的网页 也可以是网址、邮箱地址 没有具体的可以写#表示空连接</p><p>演示相关链接 其中要注意，告诉他们没有在<a></a>标签中间写内容 网页是不会显示任何内容的并演示</p><p>target=”在哪里打开新链接（_self:本身窗口 _blank:新窗口打开链接）”> 文字 图片</a></p><p>讲解target 属性：是跳转位置，是本页面还是新的页面 并演示给他们</p><p>锚链接</p><p><a name=“锚点名字（最好用英文字母来起名字）”></a></p><p>结合之前的超链接 锚点就是大船停泊时抛出的锚，只有锚固定了，船舶才能停住 同理</p><p>只有设置锚点了超链接才能找到指定位置</p><p>锚点的写法 也是先写<a></a> 只不过这次的属性是 name=“" 就是给你的锚点起个名字</p><p>而且这时超链接的href=”" 里面要写成#+你起的名字 最后演示效果</p> </div> </article> <a href="#" tpid="25" target="_self" class="download_card jhcdown" rel="nofollow"> <img class="download_card_pic" src="//static.xiexiebang.com/skin/default/images/icon_word.png" alt="下载网页制作教案word格式文档"> <div class="download_card_msg"> <div class="download_card_title" style="text-decoration:none;">下载网页制作教案.doc</div> <div class="download_card_tip">将本文档下载到自己电脑，方便修改和收藏，请勿使用迅雷等下载。</div> </div> <div class="download_card_btn"> <img src="//static.xiexiebang.com/skin/default/images/icon_download.png"> <div class="downlod_btn_right"> <div>点此处下载文档</div> <p>文档为doc格式</p> </div> </div> </a> <div class="post-tags mt20 mb30"><span>相关专题</span> <a href="/tag/wyzzjatw/" target="_blank">网页制作教案图文</a> <a href="/tag/wyzzjsja/" target="_blank">网页制作技术教案</a> <a href="/tag/wyzzjamf/" target="_blank">网页制作教案免费</a> </div> <div class="single-info mb40"><span class="hidden-xs ">网址：https://www.xiexiebang.com/a5/2019051223/c65e010ba8b44be3.html</span><br>声明：本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：645879355@qq.com 进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。 </div> <div class="single-xg mb40"> <div class="con-title"> <h3><a name="6"></a>相关范文推荐</h3> </div> <div class="sticky mb20"> <ul><h2 class="mb20"><a href="/a5/2019051223/a022a0f83c29056f.html" target="_blank">dreamweaver网页制作教案</a></h2><p>dreamweaver网页制作教案 （Dreamweaver MX） 一、Dreamweaver MX中文版建站初步 建立一个网站，首先要在本地机器上做好网站，再传到网上的虚拟空间上。现在免费的网页空间很少了，在......</p><h2 class="mb20"><a href="/a5/2019051223/c35ea2a4d6d422b5.html" target="_blank">网页制作教案10</a></h2><p>4.2 课堂任务1 首页版面的设计与制作 课程名称：网站的设计与制作 课时数：4 教学目标： 知识与技能：了解图层及图层样式相关概念。 过程与方法：掌握用PhotoShop进行简单的图片处理......</p><h2 class="mb20"><a href="/a5/2019051223/186e17ac96ff4b29.html" target="_blank">网页制作基础知识 教案</a></h2><p>网页制作基础知识 教案 教学目标： 了解网页的组成元素及常用的网页制作工具。了解网页制作的一些基础知识，如网站和网页的区别、网页的类型、网页的构成元素等，然后在了解的基......</p><h2 class="mb20"><a href="/a5/201905130/1b6264264bab3034.html" target="_blank">网页制作教案8.</a></h2><p>3.3 课堂任务 快速建站技术—模板的应用 课程名称:利用模板快速建站 课时数:4 教学目标: 知识与技能:了解模板的定义,模板的可编辑区域的定义。 过程与方法:掌握在网页中创......</p><h2 class="mb20"><a href="/a5/2019051223/cbe404a201a379dc.html" target="_blank">动态网页制作教案（精选合集）</a></h2><p>一、教学目标： 1、知识目标 （1）了解动态HTML，动态网页的概念 （2）能够实现简单的动态HTML效果，能够插入简单的javascript代码 （3）掌握动态网页的特性 2、能力目标 （1）培养学生的探究学习......</p><h2 class="mb20"><a href="/a5/201905130/a767a396b57e8517.html" target="_blank">《网页制作工具》参考教案</a></h2><p>《网页制作工具》参考教案 教学主题 网页制作工具（1）（Frontpage和Dreamweaver的使用） 教案设计赵志 教案编号适用年级 高二年级教学课时1课时 教材分析 概述：通过网页设计，了......</p><h2 class="mb20"><a href="/a15/201905151/725365d89e9b4be7.html" target="_blank">frontpage网页制作教案</a></h2><p>Frontpage网页制作导学案 青州一中刘志韩 文件——新建——网页 【学习目标】 1、包括网页制作基础知识 2、站点的规划和创建 3、网页文本和图片的处理、表格和框架的应用......</p><h2 class="mb20"><a href="/a15/201905156/edcb9596e2db0866.html" target="_blank">电脑网页制作教案</a></h2><p> 电脑网页制作教案 教员：王晓燕 课时：第一课时，一个半小时 教学目标: 1.知道如何启动和退出Dreamweaver8 2．掌握如何建立新站点，网页的打开和保存 3.掌握如何插入图像，动画，插件 4.......</p></ul> </div> </div> </div> </div> <div class="right-content-box wow fadeInRight delay300 right-content"> <script src="/e/member/login/loginjs.php"></script> <div class="sidebar"> <div id="sidebar" role="complementary"> <aside id="recent-posts-3" class="widget widget_recent_entries"> <h3 class="widget-title">猜你喜欢</h3> <ul class="new-list"><li><a href="/a15/201905155/96ec16df026d98f9.html" title="网页制作第二节教案" target="_blank">网页制作第二节教案</a></li><li><a href="/a15/201905155/5a4b49e8e978491d.html" title="12、 网页制作教案" target="_blank">12、 网页制作教案</a></li><li><a href="/a5/2019051223/0fbccdda4ddb16cd.html" title="《网页制作FrontPage》教案（最终5篇）" target="_blank">《网页制作FrontPage》教案（最终5篇）</a></li><li><a href="/a5/2019051223/05e7659d80514622.html" title="网页制作综合应用教案" target="_blank">网页制作综合应用教案</a></li><li><a href="/a5/2019051223/4de3b84ada00ee89.html" title="《网页制作》教学大纲简易教案" target="_blank">《网页制作》教学大纲简易教案</a></li><li><a href="/a5/2019051223/83d0d06c7300179a.html" title="Dreamweaver网页制作教案[推荐五篇]" target="_blank">Dreamweaver网页制作教案[推荐五篇]</a></li><li><a href="/a5/2019051223/9798051ffbf81b51.html" title="《网页制作》公共课简易教案" target="_blank">《网页制作》公共课简易教案</a></li><li><a href="/a5/2019051223/d1cb3432e47d0067.html" title="网页设计与制作教案" target="_blank">网页设计与制作教案</a></li><li><a href="/a15/201905156/9326cef6d8c0e588.html" title="框架网页制作教案分析" target="_blank">框架网页制作教案分析</a></li><li><a href="/a15/201905155/e0164fcbe5deed15.html" title="网页制作教案四课时" target="_blank">网页制作教案四课时</a></li></ul> </aside> </div> </div> </div> </div> </div> </section> <section id="footer" class="p30"> <div class="container"> <div class="footer-top clearfix"> <div class="copyr"> <div class="footer-menu clearfix mb10"> <ul class="footer-menu-con"> <li><a href="/a1/">1号文库</a></li><li><a href="/a2/">2号文库</a></li><li><a href="/a3/">3号文库</a></li><li><a href="/a4/">4号文库</a></li><li><a href="/a5/">5号文库</a></li><li><a href="/a6/">6号文库</a></li><li><a href="/a7/">7号文库</a></li><li><a href="/a8/">8号文库</a></li><li><a href="/a9/">9号文库</a></li><li><a href="/a10/">10号文库</a></li><li><a href="/a11/">11号文库</a></li><li><a href="/a12/">12号文库</a></li><li><a href="/a13/">13号文库</a></li><li><a href="/a14/">14号文库</a></li><li><a href="/a15/">15号文库</a></li> </ul> </div> <p>Copyright © 2018 <a href="/">写写帮文库</a> All Rights Reserved &nbsp;&nbsp;<a target="_blank" href="http://www.beian.miit.gov.cn" rel="nofollow"> 浙ICP备11058632号</a>&nbsp;&nbsp; <script type="text/javascript" src="//static.xiexiebang.com/skin/default/js/tj.js"></script></p> </div> </div> </div> </section> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/superfish.js'></script> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/jquery.slicknav.js'></script> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/xs.js'></script> <div class="right_bar hidden-xs "> <ul> <li class="rtbar_li1" style="left: 0px;"><a><img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon3.png"><span id="call_tel"></span></a></li> <li class="rtbar_li2"> <a href="javascript:void(0);"> <img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon4.png"> </a> <div class="rtbar_shwx" style="display: none;"> <img width="188" height="188" alt="微信二维码" src="//static.xiexiebang.com/skin/default/images/wechat.png"> </div> </li> <li class="rtbar_li3" style="left: 0px;"> <a href="tencent://message/?uin=2261362615&amp;Menu=yes"> <img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon2.png"> 点击咨询 </a> </li> <li class="rtbar_li5"><a href="#1">第一篇</a></li> <li class="rtbar_li6"><a href="#2">第二篇</a></li> <li class="rtbar_li7"><a href="#3">第三篇</a></li> <li class="rtbar_li8"><a href="#4">第四篇</a></li> <li class="rtbar_li9"><a href="#5">第五篇</a></li> <li class="rtbar_li10"><a href="#6">更 多</a></li> <li class="rtbar_li4 gotop"> <a href=""><img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon1.png"> </a></li> </ul> </div> </body> </html>

第一行第一列 第一行第二列
第二行第一列 第二行第二列