网页教案设计

网页教案设计（共8篇）

篇1：网页教案设计

课程：

课时：

教学对象：教师：

公 开 课 教 案

课题：

时间：

地点：多媒体教室五

教学目标：

 严格把握信息产业部关于“网页设计师”职业技能鉴定大纲，使学生能够最大程度满足企业对网页设计人员的需求，掌握网页设计软件的高级应用。

 掌握CSS的基本语法与功能。

 熟悉“CSS样式”面板与“相关CSS” 面板的使用。 学会创建、插入样式表。 学会套用CSS样式。教学对象分析：

由于讲授对象为高职院校大专生，所讲内容以实际操作为主，注重训练学生动手能力，所以本课程以案例教学的方式讲解。教学重点：

CSS样式的创建、编辑、导出及应用 教学难点：

应用类样式，设置CSS样式属性 教学方法和教具准备：

在带有大屏幕投影仪和计算机相连接的多媒体教室，采用教师讲解与学生实践相结合的授课方式。教学过程：

一、导入课题

复习上一章表单知识，简要回顾前面几章的学习：设置文本和网页属性、使用图像、插入表格等，但是仅仅利用以上所学知识做出来的网页比较枯燥，页面并不完美。在网络上形形色色的网站中，怎么才能让自己的页面独树一帜？

1、CSS样式功能：能够使你的页面保持统一的风格，它可以调整文字间距、行间距、删除链接下划线、固定背景图像、制作特殊的边框、改变鼠标指针形状等，并能够简化网站的制作过程。

2、拿css样式做出来的页面效果和没有使用css样式的页面做比较，演示css样式的特效

二、新课讲解

1、CSS概述

⑴ 什么是CSS？

CSS（Cascading Style sheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。CSS定义了控制元素外观的样式属性。

⑵ CSS由来

CSS样式由全球广域网协会制定，分别是CSS1、CSS2

2、实例讲解

实例

1、利用css样式“类型”选项改变文本属性

分析：Dreamweaver的文本控制功能不足，无论是字体大小，排列方式，还是行间距，等等，它所提供的选择并不多，为了让我们的网页更加美观，更加规范，有必要使用CSS。

步骤：

1.单击“CSS面板”右下角“新建CSS样式”按钮，弹出“新建CSS样式”对话框。设置完毕后点击“确定”按钮。2.在对话框 “类型”选项中，“字体”下拉列表框中选择“华文新魏”，“大小”选择“18”，“颜色”中选择“#003300”，加粗，单击“确定”按钮。3.在文档窗口中选择文字，从“样式”下拉列表框中选择该样式即可。

小结：本例中用到css样式列表中的“类型”属性。它可以帮助我们轻松地实现对文本格式的各种设置。

扩展：

1.引入外部样式表

2.利用“区块”选项组设置字母间距、縮进等属性

实例

2、作出单张图像的背景

分析：默认状态下在“页面属性”中选择图像，则在网页文档的整体背景上重复出现，在css中可以使背景图像在指定位置上只显示一次。

步骤： 1.单击按钮，选择“新建”

2.在“背景图像”中选择合适的背景图像，在“重复”列表中选择“不重复”，在“水平位置”中选择“右对齐”，在“垂直位置”中选择“居中”，在“附件”中选择“固定”，单击“确定”按钮。

3.选中标签，在属性栏的“样式”中选择该样式。

小结：本例中用到css样式列表中的“背景”属性。它可以帮助我们随意设置背景图像。

实例

3、利用css样式给表格设置特殊边框，用图像作列表、改变鼠标指针。

分析：利用css样式为表格设置不同颜色、样式的边框，用漂亮的图标作列表也可将鼠标指针改成动画。

步骤：如实例2，但使用不同的新建及应用方式。

扩展：为标签加双线边框、利用“定位”列表项将表格像“层”一样任意移动。

实例

4、特效文字

说明：在photoshop等图像制作软件中经常会听到滤镜的概念，滤镜能作出很多神奇的特效，然而在dreamweaver mx2004中我们可以利用样式表设定各种滤镜效果。

实例

5、图像特效

说明：利用“滤镜”项为图像设置不同样式。

思考题：改变网页超级链接样式

作业：

p204页，课后习题

上机练习：

1.对已经编辑的文档使用新的文本样式（包括超级链接时样式改变）2.将单张图像作背景并且不滚动、水平:右对齐，垂直:底部 3.改变鼠标指针样式 4.光晕字

5.对图像使用滤镜功能

三、教学后记

篇2：网页教案设计

框

架

教学目标：

1．了解使用框架的优缺点；

2．掌握框架网页在创建、选择、设置、存储方面的特点； 3．掌握框架和框架集的创建； 4．掌握框架结构网页的制作； 5．掌握嵌入式框架的使用； 教学重点：

1．框架结构网页的制作； 2．框架与框架集的创建； 教学难点：

嵌入式框架 教学时间

4课时（2节理论课，2节实验课）教学过程

§5.1 创建框架网页

一、框架和框架集

1．框架的概念

框架是浏览器窗口中的一个区域，用于显示独立的HTML文档。两个或两个以上的框架组合成一个见面。框架经常用于导航，一个框架显示包含导航栏目的文档，另一个框架显示含有内容的文档。

2．框架集的概念

在网页上定义的一个区域就是单个框架，而框架集则记录了同一个网页中多个框架的布局、超链接和属性信息。利用框架可以把浏览器窗口划分为若干个区域，每个区域可以添加任意网页元素，也可分别显示不同的网页。

注意：

框架集也是HTML文件，但它本身并不包含要显示的HTML内容，它只是向浏览器提供应如何显示一组框架及在这些框架中应显示哪些文档。

3．框架与框架集的关系

框架集与框架之间的关系其实就是包含与被包含的关系，框架集相当于一个容器，框架则是放在容器中的东西，框架集记录了框架的位置，以及框架中包含的网页的链接地址。

二、创建框架

Dreamweaver中给出了框架的预定格式，一般采用预定格式即可创建框架页。

七、设置框架集属性

选取框架集后，其【属性】面板如下图所示。

（1）边框：是否在浏览器中显示边框。（2）边框宽度：设置边框的宽度。（3）边框颜色：设置边框颜色。

（4）列：用于设置框架的列宽，默认单位为像素。

§5.2嵌入式框架

一、嵌入式框架

通过在HTML代码窗口中插入 各项含义如下：

 border=0表示边框为0；

 marginwidth=0 marginheight=0 表示嵌入式框架的宽和高的边距均为0；  src=”images/main.html”表示框架中调用的网页文件是main.html；  frameborder=no 表示框架没有边框；

 width=580 height=400表示框架的宽度为580像素，高度为400像素。本章小结

本章介绍了另外一个布局网页的方式-----框架，讲述了它的创建，编辑及属性设置，框架与框架集的关系。同时讲解了嵌入式框架的应用及代码的含义。本章作业

篇3：网页教案设计

智能网页信息过滤系统的过滤方法是基于内容的过滤,过滤对象是面向中文文本网页,过滤目的为主题探测。系统运行在局域网网关上可以监听流入局域网内的网页信息,发现并过滤网络管理员指定的主题信息。如企业、学校、网吧对内部局域网进行不良信息的管理时,通过该系统可以对暴力、色情、反动等信息进行屏蔽。图1示例了该系统运行在网关上的一个典型应用,它也可以运行在非网关的主机上,过滤本机用户指定的任何主题的网页信息。该系统过滤的主题在系统使用前由用户指定生成,使用中也可以根据需要重新生成新的过滤主题;它给用户提供了个性化的服务方案。在实验中我们选取了精油类知识作为过滤主题。对过滤出来的文档,提供了反馈机制,并将最终确定的群体导入模板训练库,通过遗传算法跟踪并学习用户的意图,以生成更精确的用户模板。

按照信息处理的流程,过滤系统在各阶段应处理的事务有:1)信息获取阶段:网络信息过滤是基于数据包捕获基础之上的。信息获取需要捕获网络中的HTTP封包,并将数据包根据IP协议、TCP协议和HTTP协议解析为用来处理的文本格式。2)信息表示阶段:处理从信息获取阶段得到的文本,抽取能代表该文档特征的关键字并计算权值。由于中文文档没有明显的分隔符存在,所以在特征提取前还要进行分词处理。AIFS信息表示采用的是向量空间模型。3)匹配阶段:得到的未知文档的文本表示与已知的用户模板(知识模式)相匹配,用向量空间模型的相似度来计算未知文档与实际需求的相关性,在达到一定的阈值后,将未知文档进行标识。4)信息归类阶段:通过系统标识和用户对标识结果的反馈,将文档输入到相应的文档集合中,方便重建用户模板。5)知识模式:也就是用户模板的建立与更新。系统建立了学习进化机制,根据用户的反馈,将用户模板进行遗传算法学习,以提高系统的自适应能力。

2 智能网页信息过滤系统设计

信息过滤系统的性能主要体现在过滤的正确率,过滤系统不可靠的主要原因在于用户模板的精确性问题。而知识和信息的快速变化以及用户需求的不稳定性,决定了用户模板需要不断更新。智能网页信息过滤系统在设计中充分考虑了系统的进化需求,运行中会不断优化用户模板,以提高过滤的准确率。该系统的总体设计图如图2所示。

首先建立基本的“词典数据库”和“用户模板”。词典数据库包括分词数据库和停用词数据库。停用词一般选取在所有文档中出现的频率都很高,但对文档内容主题的贡献却很小的词。初始用户模板的建立是人工选择可以代表该类别的若干文档,通过训练生成此类别文档的向量空间表达式。然后测试一批相关和不相关的文档,以确定可以与类别相匹配的相似度的阈值。系统的各个模块的工作情况如下:

1)网络包解析:捕获局域网中的以太网帧,过滤出包含HTTP文本信息的TCP数据包,同时将与“URL数据库”中链接地址相同的页面屏蔽过滤。屏蔽是通过建立套接字截获该数据包,并封包转发,使终端用户界面显示“此信息已截获”字样。该模块还负责提取的HTTP数据包进行消息解析,进行网页重组,将完整的网页传递给“网页文本解析”模块。

2)网页文本解析:将网页转换成纯文本格式,并标记特定标签中的文本,存储到“文本数据库”。

3)文本表示:参考“用户模板”中的关键词集合,采用网页文本表示改进算法,进行分词处理,并进行权值计算。将文档表示成向量空间模型。

4)文本匹配:“文本表示”中得到的向量表达式与“用户模板”中的向量表达式进行相似度计算,找出有一定匹配关系的文档(需要过滤的页面),并标记系统的评定结果。

5)文本过滤:提交用户的过滤请求,传递系统的评定结果。

6)模板管理:完成模板进化功能。依据用户定制的用户模板的学习机制,将来源于“URL数据库”中的一定数量的页面加入训练集,采用遗传算法进行自学习和归纳更新,进化“用户模板”,以保证系统的过滤性能。

7)词库管理:完成字典进化功能。用户接口提供管理界面,可以通过预览某文档的分词结果,查看词典数据库和停用词数据库中合理与不合理的词语,使“词典数据库”最优化,分词结果会更准确。

8)URL管理:完成系统评比结果的用户反馈,得到最终结果。用户接口提供界面查看浏览已有系统评定的页面,给出人工评定,记录到“URL数据库”。另外,针对网络信息变化快、稳定性差、网页生存期短的特点,将“URL数据库”的数据设定时限,从录入数据库时间算起,超出该时限的数据将自动从数据库中清除。

“文本数据库”存储了所有被截获的网页的文本数据和相关属性,“URL数据库”记录了被评定为需要过滤页面的URL链接地址和相关属性。

3 关键技术

按照智能网页信息过滤系统的总体设计,在具体实现时我们将整个系统分为三大块:网络数据处理、文本数据处理和自适应处理。

网络数据处理部分:采用了Windows平台下的网络数据包捕获库WinPcap,将网卡设置为混杂模式进行网络数据的捕获;网络数据分析是网络数据处理的另一个关键技术,在分析过程中涉及到网络协议格式有以太网数据帧、IP协议、TCP协议和HTTP消息;另外HTML页面重组也是网络数据中非常重要的技术。

文本数据处理部分涉及了二个重要技术。一是中文分词技术:对于中文分词的处理,AIFS采用了结合词典数据库的一些中文分词算法,先用正向最大匹配法和逆向最大匹配法进行分词,比较分词结果,若有不同则通过最大概率法进行结果选择。二是文本表示技术:首先,参照用户模板对文档进行特征项的抽取,本文提出了网页文本表示的一种改进算法,通过该算法提取网页特征项。此方法准确快速,可以确保网页过滤的实时性。然后计算关键词的权值,用向量空间模型将文档表示。最后进行匹配,计算用户模板向量和文档向量之间的夹角,确定相似度。该相似度与某一阈值比较,以此判定文档的归属。初始用户模板的建立也是文本表示中一个关键技术,过滤系统是将训练文档进行分词处理,然后进行词频统计,采用向量空间模型来表示初始用户模板。

自适应处理部分是通过用户反馈与机器学习来实现的。智能网页信息过滤系统设计了人机交互界面进行各种信息反馈,如分词的预览,关键词的预览,敏感数据(即首次由系统判定为过滤的页面)的预览等,并提供了用户维护词典数据库、停用词数据库和敏感数据等的交互界面。任何一个过滤系统要解决的核心问题都是准确性和智能化的提高,过滤系统也不例外。过滤系统利用遗传算法的进化机制完成用户模板对用户兴趣的跟踪和学习。随着用户模板的精确,用户的反馈量也将不断减少,系统智能化越来越高,自适应功能就越来越强。

4 结束语

过对智能网页过滤系统的研究和开发工作,基本实现了一个能承载小中规模局域网负载的网页信息过滤系统,更深层的是建立了一个信息过滤模型,总结了信息过滤研究的一般方法,为后续的工作铺开了大道。

参考文献

[1]张惠文.网络信息检索技术的智能化趋势[J].情报理论与实践,2001,1(6):447-450.

[2]刘斌,卢增祥等.Bookmark--智能化网络信息服务系统[J].高技术通讯,1999(6):38-24.

篇4：网页教案设计

关键词：网页制作；教学设计

中图分类号：TP393.09

随着网络的日益发达，网页技术得到不断普及，在社会各个领域中都充分体现了网页制作技术的重要性，学校方面也开始不断重视这一方面人才的培养。但是，中、高等职业院校的毕业生所学知识往往与就业单位要求不相符，很大方面的一个原因是传统的网页制作课程教学难以满足现阶段的发展形势。因此，笔者将根据这一课程的教材特点和学生的特点，浅谈如何设计“网页制作”的教学。

1 教材分析与教学对象分析

1.1 分析教材。《Dreamweaver MX2004中文版网页制作基础》是我校选用的教材，其最大特点在于采用“任务驱动，案例教学”的形式，这就充分考虑到了实际运用和实际需要，用趣味十足的实际案例来讲解网页制作方面的知识技能和应用技巧，这样不仅使方便教师教学，而且使学生学起来很实用。在学习“网页制作”知识之前，学生已经初步掌握了网络相关知识、数据库设计与应用、Office办公软件的应用、计算机硬件组装与维护、FLASH二维动画设计等内容。因而，在学生已具备了收集、编辑文本、图像信息的能力的情况下，我们的教学重点应该放在网页信息表达方面，例如网页版面的美化、文字内容表达等。不仅要加强学生的信息意识，还要提高学生的信息处理能力；教材第四章的内容中以“我的个人主页”为案例设计，这给了学生充分的想象空间，满足学生喜欢展现自我的个性需求，又有效发挥他们的主动性和创造性。另外，对网页版面设计效果的评价促使学生更好的了解编排原则、布局种类、色彩搭配等，有助于提高他们的审美能力和艺术修养内容。

1.2 分析教学对象。本课程的教学对象是中等专业学生，根据学生的性格特点，他们对操作性较强课程的学习积极性明显高于纯理论的学习。而在现代社会，《网页制作》这门课程与每个人的生活都是息息相关的，加之其网页界面融合文本、图片、音乐、视频等为一体，极大的调动了学生的学习兴趣，继而激发学生了解网页实现原理和方法的欲望；教师在实际教学过程中要时刻注意引导学生利用已有知识更好的学习网页制作，与此同时也巩固了旧知识，一举两得；教师应当适时地监控学生的协作学习情况，鼓励分组合作交流，并实时总结心得、体会，引导学生“自主、合作、探究”学习。

2 《网页制作》课程教学设计的思路

从以往《网页制作》课程的教学情况来看，在学习这门课程之后，学生虽掌握了基本理论知识，但实际运用能力较差，很少能制作出优秀的作品，主要表现在两个方面：网页色彩的使用和网页内容的定位。因此，教师在设计教学时，需要借助一个载体——一个实际的项目，并将整个项目分解成若干小项目，再把每一个小项目分别作为一个学习任务，用这样的方法贯穿于整个教学过程。完成了一个小项目，也就相应的掌握了一个知识点。便这样完成学生运用三个软件进行网页制作的学习。

课程设计要有助于提高学生的技能水平。运用“项目导向”与“任务驱动”的教学模式，创新教学方法，继而帮助学生有效掌握网页版面设计技术。具体阐述如下：注重培养学生自学能力和专业技能。在掌握网页制作理论知识的同时，也要注重学生社会能力的培养。在学习网页制作的过程中，主要学习一些网站开发知识，可以让学生以自主学习或是合作学习的形式进行，若是结合实际来学习会达到更佳效果更好；将网页制作作为一项整体的教学任务，对于教学内容、教学方法和考核内容，做好任务分配工作，结合多样的教学方法建立与之相应的考核体系，这样必然达到最佳的学习效果；教学设计要结合社会需求，作为理论与操作相结合的学科，网页制作在设计课程时，可以模拟真实的项目，如此可以进一步提升学生的技能，任务驱动教学模式的实行，能更好的调动学生的学习积极性和求知热情。

3 教学目标的设定

3.1 知识目标。这一目标主要为：掌握Dreamweaver的工作环境，以及菜单、工具栏的使用方法；掌握新建网站的方法、网页的编辑技术和文档的保存方法；掌握操作表格、单元格、框架、层的辅助定位工具的方法；掌握插入和编辑网页超链接的技术；掌握插入和编辑文本、图片、动画、视频的方法和设置格式的方法；掌握利用Fireworks设计处理文字的方法；掌握利用Fireworks制作网页中所需的线条及边框；掌握用工具绘制图形的方法；掌握基本动画和引导动画的制作。

3.2 技能目标。这一目标主要为：能通过模仿网页来制作实际网页；能在网页中熟练地插入文字、图片、动画等；能通过使用简单的表格编排出结构清晰、内容整齐的网页内容；能恰当地选择适当的网页背景图案和背景音乐；能插入简单的表单，使网页具有初步的动态功能。

3.3 情感目标。这一目标主要为：培养学生的敬业精神、团队协作精神；培养学生的社会责任感和工作效率观念；培养学生的审美情趣和审美能力；通过课堂中出现的网页，渗透爱党爱校教育；在合作学习过程中培养乐于助人、团结协作的精神。

4 教学重点、难点的设定

教学重点是帮助学生掌握网页布局、表格的制作和编辑方法、表格的嵌套和属性的设置，以及熟悉网页的各种元素。教学难点在于培养学生分析网页布局和色彩搭配的能力。

5 设计教学过程

5.1 引例以导入新课。（1）推荐给学生优秀网站做范例。1）清华大学网页布局——“国字型”并分析其网页元素；2）万州一家企业网页布局——“三字型”并简析其网页元素；3）重庆市机关党建网页和环球厨卫网页布局———“T字型”并简析其网页元素。（2）组织学生讨论网页的内容和风格，分析网页框架和布局。

5.2 课程主要内容的学习。（1）以广播的方式展示范例网站的网页，逐步引导学生分析网页的布局并尽可能详尽（“国”字型），在分别分析网页元素——文本、图像、表格等。（2）分小组布置活动任务，并分别指定小组长，教师实时观察进程，并对学生制作过程中遇到的问题适时给予帮助。（3）组织小组之间进行网页制作互评；（4）设计网页版面设计评估表。

5.3 课堂小结。在这个教学过程中，利用现代多媒体中的实例网页，教师准备好备好教学素材和课件，围绕网页制作实例，来促使学生掌握网页的布局，表格的制作与编辑方法，并熟悉网页的各种元素。通过课堂上的实践操作环节，很好的培训了学生的技能，教会学生举一反三、融会贯通，大大提高了学生的综合运用能力。同时提高了学生的专业技能水平，让学生真正地学会学以致用，教师也顺利完成教学目标，取得良好的教学效果。

6 设计考核方式

网页制作作为一个整体项目，可以从以下几方面进行评价：页面结构设计、网页中动画的制作、网页中导航的制作、子页面的制作、网页中图像的制作、网页中的链接和整体效果。主网页和二级网页在整体布局上要风格统一，布局合理、美观，文件命名正确，文件夹组织标准有序，符合社会标准；按要求制作网页导航、编辑网页元素，导航要求清晰、有一定动画效果。考核评分时，教师不仅应当结合学生的平时操作情况，还应考虑作品展示时其他同学的评价，综合评价给出一个分数。

7 结束语

网络技术发展不断更新，作为实践性很强的科目，“网页制作”对学生的动手能力要求越来越高，同时还需要学校和教师积极主动地关注社会需求，及时掌握技术发展趋势和网页制作发展动向，鼓励学生在不断储备知识的同时，不断提高自己的实践操作能力，使更多的网页制作人才得以涌现。

参考文献：

[1]曾广雄.中文Dreamweaver网页制作实例教程[M].北京：研究出版社，2008：206.

[2]周奇.新编网页设计与制作教程[M].北京：研究出版社，2008：185.

[3]贾勤.网页设计三合一能力教程[M].北京：中国铁道出版社，2006：54.

篇5：《网站建设与网页设计》教案

教案

学期：2014-2015-1 班级：2012软件工程

2012计算机科学与技术

课时：44学时 教师：李念

第1讲 HTML基础

1.1 教学目的和要求

1.了解HTML的发展历史和HTML5的特性；

2.掌握HTML的文档结构、代码规范和网页文件的创建过程； 3.掌握搭建支持HTML5浏览器环境的方法。

1.2 教学重点和难点

1.HTML5的新特点； 2.HTML5的新元素；

1.3 教学方法及手段

实例教学，讲授与演示结合。

1.4 教学内容

1.4.1 HTML简介

HTML是HyperText Markup Language（超文本置标语言）的缩写，是一种为普通文件中某些字句加上标签的语言，其目的在于运用标签（tag）对文件达到预期的效果。

HTML5的特性及元素：

(1)实现Web应用程序：绘画的Canvas元素，该元素就像在浏览器中嵌入一块画布，程序可以在画布上绘画；更好的用户交互操作，包括拖放、内容可编辑等；扩展的HTMLDOM API（Application Programming Interface，应用程序编程接口）。

(2)更好地呈现内容：基于Web表现的需要，HTML5引入了更好地呈现内容的元素；用于视频、音频播放的video元素和audio元素；用于文档结构的article、footer、header、nav、section等元素。

1.4.2 HTML编写规范

HTML文档由标签和被标签的内容组成。标签能产生所需要的各种效果。其功能类似于一

个排版软件，将网页的内容排成理想的效果。其格式为：

<标签> 受标签影响的内容 每个标签都有一系列的属性。标签通过属性来制作出各种效果，格式为： <标签

属性1=“属性值1” 属性2=“属性值2” „> 受标签影响的内容 。不推荐使用的标签：在HTML中，某些标签不推荐使用，例如，、、、、、、、、、等标签。

代码的缩进：在编写HTML代码时要注意使用代码缩进来提高程序的结构性和层次性。

1.4.3 网页文件的创建过程

用记事本创建网页 用DW软件创建网页

1.4.4 搭建支持HTML5的浏览器环境

目前，Microsoft的IE系列（仅有IE9及其以上版本）浏览器，以及Opera Software的Opera与Google的Chrome浏览器。

1.4.5 小结

本次课主要讲述了网页设计的步骤和要点以及HTML5的新特征。

第2讲 HTML标签

2.1 教学目的和要求

1.掌握基本的文字与段落标签的使用；

2.掌握超链接、图像、表格和列表标签的使用方法和基本属性； 3.能够进行基本的网页排版。

2.2 教学重点和难点

1.各类标签的使用方法和属性设置； 2.嵌套列表的使用。

2.3 教学方法及手段

实例教学，讲授与演示结合。

2.4 教学内容

2.4.1 文字与段落排版

注释标签 强制换行标签
段落标签

篇6：应用表格布局网页教案设计与反思

一、教学目标：

1、知识与技能：

（1）、了解表格在网页设计中的作用。

（2）、掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中正确插入文字和图片。

（3）、能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。

2、过程与方法：

（1）、利用对比学习，培养学生知识迁移的能力。

（2）、通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多样性，培养学生的发散思维能力。

（3）、通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。

3、情感态度与价值观：

（1）、通过对比学习使学生体验软件学习的一般方法及规律，提高学生自主学习的能力。

（2）、通过运用表格布局网页对象活动，进一步掌握各种不同对象属性的设置方法和规律，体验创造的快乐。

（3）、通过“动物——人类的朋友”网站的设计与制作，激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。

二、教学重点难点：

1、教学重点：

（1）、了解表格在网页设计中的重要作用。

（2）、掌握插入、编辑表格的方法及表格的属性设置。（3）、掌握单元格的修饰与属性的设置。

2、教学难点：

（1）、表格的嵌套在网页设计中的应用。

三、教学过程：

1、创设情境、导入新课

（1）、展示两个页面并进行比较：一个使用表格布局，但表格边框隐藏（看不出表格痕迹），其页面工整，文本、图片摆放对称，具有一定的规律；另一个页面凌乱，图文混杂，摆放杂乱。

（2）、提问：你喜欢那个页面的布局？学生回答。

（3）、提出问题：有什么方法可以达到第一个页面的效果。观察第三个页面，内容与第一个页面相同，显现页面中表格的边框。

（4）、学生讨论、交流，回顾Word中学习过的表格，领悟表格在FrontPage中的作用。

设计意图：通过对比学习，培养学生知识迁移的能力。

2、任务驱动、自主学习

（1）、展示一些由表格布局的网页，引导学生分析其表格结构，自然过渡到分析教材中的例子，得出表格的布局。

（2）出示任务一：规划网页表格的布局。分层完成该任务，基础相对薄弱的学生仅要求读懂教材中的网页表格布局，知道规则，根据表格的行数与列数，调整至最终样式；基础扎实、操作能力较强的学生可以跳出教材，自行设计表格网页布局，并将自己的表格设计绘制在教材上。

设计意图：分层教学，学生可以根据自己的实际情况选择任务难度，并动手分析和进行创意设计，培养学生的模仿以及创新能力。

（3）、出示任务二：新建一个页面，用表格布局该网页，并在该网页中放入相应内容。FrontPage中表格的插入于编辑与Word中的表格操作类似，教师着重引导学生进行知识迁移。

（4）、学生操作，教师安排操作熟练的学生进行演示。设计意图：培养学生知识迁移的能力和动手能力。

（5）、出示任务三：在表格中插入图片、输入文字。任务四：表格属性以及单元格属性的设置。

（6）、学生根据自己的实际情况选择任务难度，可按教师的具体要求操作，也可根据自己的意图进行设计。设计意图：确保达到教学目标的同时，给学生一定的自主空间，鼓励他们去创新，而不应让学生一成不变地生硬模仿。

（7）、出示任务五（提高内容）：表格的嵌套。学生动手制作网页。设计意图：更好的发挥优秀学生创作思维动手能力。

3、课堂小结、后续活动

（1）、教师引导学生回忆本节课学习的内容：在FrontPage中插入表格、编辑表格以及表格嵌套的基本方法等。

（2）、教师展示优秀作品，表扬完成任务的学习，对未完成任务的学生，应鼓励他们利用课余时间继续完成。

篇7：网页教案设计

第一步是对站点进行规划 第二步是创建站点的基本结构 第三步即可开始具体的网页创作过程 最后一步是站点的发布

第一节 站点的规划与创建

【教学目的与要求】

一、规划站点

二、创建一个站点 【教学方法与手段】

多媒体教学：借助多媒体手段，进行课堂理论教学；

启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】： 基础知识：规划站点 重点知识：创建一个站点 2课时

【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】

一、规划站点

Web站点是一组具有共享属性（如相关主题、类似的设计或共同目的等）的链接文档。

本地站点：是本地硬盘中存放远程网站所有文档的地方（文件夹）。建立网站的通常做法是：在要地硬盘中建立一个文件夹用来存放网站的所有文件，往后就在该文件夹中创建和编辑文档。待网页设计和测试好之后，再把它们拷贝到网站上供浏览者浏览。

1、规划站点结构 注：规划站点的结构之前应先用笔绘出站点的结构图（如下图所示是一个典型的学校站点的结构图）

2、规划站点的浏览机制 一般可采用以下的方法：  创建返回主页的链接  显示网站专题目录  显示当前位置  搜索和索引

 反馈（将网页创作者或网站管理员公布在网页上，或创建一个E-MAIL超级链接，以使用户能快速地将信息反馈到网站中）

二、创建一个站点 步骤：

1、单击“文件”---“新建”---“站点”命令（或单击常用工具栏中“新建网页”按钮的下拉箭头，从打开的下拉菜单中选择“站点”命令）

2、选择一种站点模板或向导

3、单击“确定”按钮

三、站点的基本操作

1、打开站点：“文件”---“打开站点”

2、删除站点：

方法一：在Windows资源管理器中删除一个站点

方法二：在FrontPage中删除站点，在“文件夹”视图或“网页”视图的“文件夹列表”中，右击站点所对应的目录，在快捷菜单中单击“删除”命令

3、站点的设置

“工具”----“站点设置”，有“常规”、“参数”、“高级”、“语言”、“导航”、“数据库”六个选项卡 【课程小结】

【作业】

1．5 课后练习书本课后练习作业

第二节 利用表格进行网页布局

【教学目的与要求】

一、插入表格

二、单元格的基本操作 【教学方法与手段】

多媒体教学：借助多媒体手段，进行课堂理论教学；

启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：

基础知识： 插入表格 重点知识：单元格的基本操作 【教学组织过程】2课时 2课时

1．上讲回顾 2．教授新知 【授课内容】

一、插入表格

1、单击常用工具上的“插入表格”按钮

2、单击“表格”---“插入”---“表格”命令

3、使用表格工具栏（“查看”—“工具栏”---“表格”命令）

4、由文本转换（“表格”—“转换”—“文本到表格”）一般以段落为分行标记，以逗号或句号为分列标记。

二、单元格的基本操作

1、选择单元格（“表格”—“选定”—“单元格”）Ctrl：可选择不相邻的单元格 Shift：选择多个相邻的单元格

2、插入单元格（“表格”—“插入”—“单元格”）

3、合并单元格（“表格”—“合并单元格”或“表格工具栏”上的“合并单元格”按钮）

4、拆分单元格（“表格”—“拆分单元格”或“表格工具栏”上的“拆分单元格”按钮）

三、填充单元格

1、文本与图像填充（“插入”—“图片”）

2、对齐文本与图像（“表格”—“属性”—“单元格”，“水平对齐方式”、“垂直对齐方式”）

3、修改单元格背景（“表格”—“属性”—“单元格”，“背景”）

4、调整边框颜色（“表格”—“属性”—“单元格”，“边框”）

5、改变单元格尺寸（“表格”—“属性”—“单元格”，“指定宽度”、“指定高度”）

四、修改表格的行与列

1、选择行与列

2、插入行与列（“表格”—“插入”—“行或列”）

3、均分行与列（“表格工具栏”中的“平均分配行高”或“平均分配列宽”）

4、删除行与列（“表格工具栏”中的“删除单元格”按钮或“表格”—“删除单元格”命令）【课程小结】

【作业】

1．5 课后练习书本课后练习作业

第三节 利用框架设计网页布局

【教学目的与要求】

一、认识框架网页

二、创建框架网页

三、框架网页的保存和打开 【教学方法与手段】

多媒体教学：借助多媒体手段，进行课堂理论教学；

启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】： 基础知识：认识框架网页 重点知识：创建框架网页 【教学组织过程】2课时 2课时 1．上讲回顾 2．教授新知 【授课内容】

一、认识框架网页

1、框架的概念 框架网页是一种特殊的网页，它将自身分成几个区域，每个区域称作一个框架窗口（通常简称为框架）

框架具有以下特性：

每个框架都可以独立地显示一个网页，各个框架窗口之间可以设立超链接。每个框架窗口可以赋予一个名字，以便其他URL作为目标调用。

2、框架的使用场合（如邮箱、论坛）

通常用框架来显示在同一个站点中的多个超链接，这样可以不用浏览器中的“后退”按钮而方便的进行浏览。

框架也适用于类似在线书籍的应用，将目录显示在左边的框架中，单击目录，右边框架中显示相关的章节

二、创建框架网页

1、框架网页的创建

“文件”—“新建”—“网页”，选择“框架网页”选项卡

2、框架网页模板（10种）“设置初始网页” “新建网页”

三、框架网页的保存和打开

框架网页的保存包括框架网页自身的保存和框架窗口中网页的保存。

1、框架网页的保存

“文件”—“保存文件”或“框架”—“保存网页”

2、框架网页的打开 “框架”—“在新窗口中打开网页”

四、框架网页的属性

1、框架网页的属性 “文件”—“属性” “框架间距”、“显示边框”

2、框架的属性 “框架”—“框架属性”

五、调整框架布局

1、调整框架窗口的大小（用鼠标拖动或在“框架属性”对话框中调整）

2、框架的拆分

方法一：“框架”—“拆分框架”（按行或按列拆分）方法二：用鼠标拖动拆分（按Ctrl键）

3、框架的删除 “框架”—“删除框架”

六、目标框架

当在框架网页的某一个框架中定义超链接时，需要指定被链接的网页显示在哪一个框架中，即指定超链接的目标框架。

选择要设置超链接的文字或图像，“插入”—“超链接”，单击“目标框架”、“更改目标框架” 【课程小结】

【作业】

1．5 课后练习书本课后练习作业

第四节 使用导航栏

【教学目的与要求】

一、定义导航结构

二、认识导航栏属性

三、创建导航栏 【教学方法与手段】

多媒体教学：借助多媒体手段，进行课堂理论教学；

启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：

基础知识：定义导航结构 重点知识：认识导航栏属性 【教学组织过程】2课时2课时 1．上讲回顾 2．教授新知 【授课内容】

一、定义导航结构

在网页内添加导航栏之前，先建立该站点的导航结构 “视图”—“导航”按钮

二、认识导航栏属性 “插入”—“导航栏”按钮

“父层”：创建指向当前网页上一级网页的超链接，并将上一级网页的标题名称显示在导航栏内。

三、创建导航栏（要在浏览器中才可看到实际导航栏效果）

四、创建共享边框

用创建导航栏的方法只能在一个网页中创建导航栏，若需要导航栏出现在站点内多个网页的相同位置，则可将导航栏插入网页的共享边框内。

右击编辑窗口，单击“共享边框”命令 练习

二、利用框架设计一个企业网站的布局 要求有如下内容：关于我们、商品展示、在线订购、网上留言、联系我们、产品目录、友情链接等。【课程小结】

【作业】

1．5 课后练习书本课后练习作业

第五节 网页布局功能的应用

【教学目的与要求】

一、创建布局表格

二、绘制布局表格 【教学方法与手段】

多媒体教学：借助多媒体手段，进行课堂理论教学；

启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】： 基础知识：创建布局表格 重点知识：绘制布局表格 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】

一、创建布局表格

1、创建布局表格

打开一个空白网页，并切换到“设计”视图下，单击“表格”菜单中的“布局表格和单元格”命令，随后在右侧弹出一个任务窗口，在该任务窗口下面程序提供了多种表格布局模板，在此单击其中需要的模板即可将该模板添加到网页中。

2.绘制布局表格

如果你对模板中提供的布局表格不太满意，还可以用手工绘制的方法创建一个布局表格。创建时首先在“新建表格和单元格”项中单击“绘制布局表格”，随后将指针移到操作窗口最左端，然后拖动鼠标即可绘制表格。

3、设置表格属性 插入表格后，还需对表格属性进行设置。在“表格属性”项中设置该表格所需的属性。

提示：在设置表格时，如果要想覆盖网页的默认边距，并让布局表格跨到文档窗口的边缘，可以将表格中的各个边距的属性都设置为0。

在设计框架时经常需要调整某一行或列的属性，这时可以通过表格中列宽和行高的标签来完成。在操作窗口中单击布局表格需要调整的边框，每一侧都会出现显示列宽和行高的标签。每个标签都包括一个下拉箭头，如更改行高度时，单击此下拉箭头弹出一个下拉菜单，选择“更改行高”命令，在弹出的“行属性”对话框中重新输入该行高度值即可。

练习

三、使用布局功能设计学校网站

要求包括有以下内容：学校简介、校园新闻、教育教学、学生天地、校园论坛、教师之家等 【课程小结】

【作业】

1．5 课后练习书本课后练习作业

第六节 网页布局设计

【教学目的与要求】

一、文本的美化（“格式”—“字体”）

二、运用边框与阴影（“格式”—“边框与阴影”）

1、设置边框

2、设置阴影

【教学方法与手段】

多媒体教学：借助多媒体手段，进行课堂理论教学；

启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：

基础知识：文本的美化（“格式”—“字体”）

重点知识：运用边框与阴影（“格式”—“边框与阴影”）

1、设置边框

2、设置阴影

【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】

一、文本的美化（“格式”—“字体”）

1、输入文本

2、美化文本（设置文本字体、字号）注：字符的大小共有6级，其中默认级别是3。

3、设置文本效果

4、改变文本颜色

5、设置字符间距

二、运用边框与阴影（“格式”—“边框与阴影”）

1、设置边框

2、设置阴影

三、使用列表（“格式”—“项目符号和编号方式”）

1、添加项目列表。

项目列表也称为无序列表，它将在项目前添加标志符号。可以将图片作为新的项目标志。经常使用的项目符号有3种：实心黑点、空心圆圈和实心方块。

2、添加编号列表

在网页中的内容存在顺序关系时，可应用编号列表。

3、添加定义列表

定义列表就是在网页内定义词汇、术语的列表，具体的定义内容将以首行缩进的方式出现在列表的下一行。（格式工具栏的“样式”—“定义的术语”，输入要词汇、术语，按回车键）

4、设置嵌套列表

要建立组合列表，可以先生成第1级列表，然后再生成第2级列表，依此类推。

建立组合列表的具体操作步骤如下：（1）先生成第1级列表（2）将光标移动到拥有第2级列表的第1级列表项目的末尾，然后按回车键。将出现一个空的列表行。

（3）单击“格式工具栏”中的“增加缩进”图标。该行变为一个空白行，是没有列表编号或项目符号的。再单击一次“增加缩进”图标。（4）此时再按照建立列表的方法构造第2级列表。

（5）输入第2级列表。输入过程中每次接回车键就自动生成第2级列表项目。（6）第2级列表输入完毕后，将光标移到别的位置或者用鼠标在页面的空白处单击一下即可完成第2级列表的设置操作。

嵌套列表可以转变为可折叠大纲，这样在浏览器中浏览时，就可以展开或折叠大纲中的各个级次。生成可折叠大纲的具体操作步骤如下：（l）按生成复合列表的方法构造好这个复合列表所有的列表级次。

（2）选择“格式”菜单中的“项目符号和编号方式”命令，打开“项目符号和编号方式”对话框，或者在列表中单击右键，从弹出的菜单中选择“列表属性”命令。

（3）在打开的对话框中，选中“启用可折叠大纲”复选框。（4）单击“确定”按钮。

练习

四、设计一个介绍阳江风景及特产的网页

要求：设计一个网页介绍阳江的风景及特产，要用到折叠列表的方式来分别介绍阳东、阳西、阳春等的不同地区的风景名胜及特产。【课程小结】

【作业】

1．5 课后练习书本课后练习作业

第七节 网页装饰设计

【教学目的与要求】

一、添加图像

二、处理图像 【教学方法与手段】

多媒体教学：借助多媒体手段，进行课堂理论教学；

启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：

基础知识：添加图像 重点知识：

二、处理图像 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】

一、添加图像

在浏览器中，能处理的图片格式只有GIF、JPEG格式和PNG格式等少数几种图片。

1、GIF格式图片

GIF格式最多能支持256种颜色（8位颜色）。可以具有透明、动画等特殊效果。

2、JPEG格式文件

JPEG格式可以处理高达1670万种颜色（24位颜色），所以在需要显示细微的变化和使用大量的色彩处理照片时经常使用这种格式保存文件。

插入本地计算机上的图像（“插入”—“图片”—“来自文件”，“从计算机选择一个文件”）

插入WEB上的图像（“插入”—“图片”—“来自文件”，“从WEB浏览器来选择网页或文件”）

二、处理图像

1、剪裁图像（“图片”工具栏—“剪裁”按钮）

2、设置透明背景（“图片”工具栏—“设置透明色”按钮）

三、添加文本（“图片”工具栏—“文本”按钮）

四、保存图像

注：默认情况下，当前站点的图像文件保存在Images文件夹中

五、运用特殊效果

1、调整图片的亮度和对比度

2、图片的翻转与旋转

3、图片的冲蚀和黑白处理

4、凹凸效果

六、设置图片对齐方式（“图片属性”—“外观”—“布局”—“对齐方式”）

七、使用水平线

水平线是贯穿网页宽度的细灰条，用于分隔文本或加着重符。添加水平线后，可以修改其属性来更改宽度、高度、对齐方式和颜色。如果网页使用了主题，则会使用图形来代替水平线以匹配主题。

1、插入水平线

2、设置水平线属性

八、修改网页背景（“格式”—“背景”）

1、调整背景色彩

2、调整背景图案

九、创建交换图像（DW 2004）

1、插入交换图像（“插入”—“图像对象”—“鼠标经过图像”）“原始图像”、“鼠标经过图像”、“按下时，前往的URL”

2、预览交换图像：F12 【课程小结】a 【作业】

1．5 课后练习书本课后练习作业

第八节 创建超链接

【教学目的与要求】

一、与当前站点的链接

二、与空白网页的链接

三、与电子信箱的链接 【教学方法与手段】

多媒体教学：借助多媒体手段，进行课堂理论教学；

启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：

基础知识：创建热点 重点知识：与电子信箱的链接 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】

一、与当前站点的链接（“插入”—“ 超链接”，“搜索”当前站点的文件夹位置）

二、与空白网页的链接（“插入”—“ 超链接”，“创建一网页并链接到该网页”）

三、与电子信箱的链接（“插入”—“ 超链接”，“制作发送电子邮件的超链接”）

四、与Web的链接（“插入”—“超链接”，“使用WEB浏览器来选择网页或文件”，ALT+TAB，则网页地址自动添加到URL中）

五、修改链接颜色（“网页属性”—“背景”，“颜色”—“超链接”、“已访问的超链接”、“当前超链接”）

六、使用图像地图

1、创建热点

在图片中创建热点的具体操作步骤如下： 选中要建立热点的图片。图片被选中后，四周将出现8个控制方块，并且“图片工具栏”被激活。

在“图片工具栏”中，选择热点的形状的图标。可以选择长方形、圆形或多边形。

将鼠标移动到图片中。这时，鼠标指针变成一支笔的模样。

用鼠标左键单击图片中要建立热点的区域并拖动鼠标来绘制热点。尽量让热点和图片上的特征区域相配合

热点绘制完毕，图片中将出现该热点的边框。打开“插入超链接”对话框，建立到热点上的超链接的过程与建立到文本上的超链接的过程基本相同。

练习

五、设计一个介绍一年四季风景的网站 要求：

用到嵌套列表、框架、超链接、图像热点等技术。【课程小结】

【作业】

1．5 课后练习书本课后练习作业

第九节 表单设计

【教学目的与要求】

一、认识表单

二、生成表单

三、表单内容编辑 【教学方法与手段】

多媒体教学：借助多媒体手段，进行课堂理论教学；

启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：

基础知识：认识表单 重点知识： 表单内容编辑 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】

一、认识表单

表单的作用：表单就是浏览者可以在网页中填写信息的表格，其作用是接收浏览者填写的信息并将其提交给表单处理程序进行处理。

二、生成表单

1、表单的创建与表单字段的添加 “插入”—“表单”

2、表单向导

“文件”—“新建”—“网页”--“常规”——“表单网页向导”

三、表单内容编辑

1、单行文本框

2、滚动文本框

3、复选框

4、单选按钮

5、下拉菜单

6、按钮

7、图片

8、标签

9、隐藏的表单字段

四、验证性表单字段（“验证有效性按钮”）

五、表单处理程序

右击表单，选择“表单属性”命令，提供了保存表单数据的三种不同处理方式：

1、发送到文件（单击“选项”按钮”，进行设置）

2、发送到数据库

3、讨论表单处理程序

4、注册表单处理程序

5、自定义ISAPI、NSAPI、CGI或ASP脚本 练习六：制作表单

制作一个注册信息表单，要求包括下面的内容：会员帐号、您的姓名、您的性别、输入密码、密码确认、密码提示问题、密码提示答案、电子邮件、常用电话、收货地址、邮政编码、提交按钮、重填按钮 【课程小结】

【作业】

1．5 课后练习书本课后练习作业

第十节 层及应用（DW 2004）

【教学目的与要求】

一、层概述

二、创建层 【教学方法与手段】

多媒体教学：借助多媒体手段，进行课堂理论教学；

启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：

基础知识：层概述 重点知识：创建层 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】

一、层概述

层（Layer）是一种 HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。

二、创建层

方法一：“插入”—“布局对象”—“层”

方法二：“插入”工具栏—“布局”—“ 描绘层”，按住鼠标拖动 方法三：“插入”工具栏—“布局”，拖动“ 描绘层”按钮到文档窗口（按CTRL键，可绘制多层）

三、通过拖动周围的黑色调整柄控制层的大小

四、拖动层左上角的选择柄可以移动层的位置。

五、单击层标记可以选中一个层。（显示层标记的方法：“编辑”—“首选参数”—“分类”—“不可见元素”

六、显示层面板（“窗口”—“层”）

1、层的隐藏与显示

2、层数

3、层重叠

七、层和表格之间的转换（在转换为表格之前，请确保层没有重叠。）“修改”—“转换”—“层到表格”

若要将表格转换为层，请选择“修改”—“转换”—“表格到层” 【课程小结】

【作业】

1．5 课后练习书本课后练习作业、第十一节 行为

【教学目的与要求】

一、行为概述 【教学方法与手段】

多媒体教学：借助多媒体手段，进行课堂理论教学；

启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：

基础知识：行为概述 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】

一、行为概述

行为是一种利用简单直观的语句设置手段，为网页对象添加一些动态效果和简单的交互功能的技术。行为是事件和由该事件触发的动作的组合。

下面给出一些常见事件的一些解释

onClick 单击

onDbclick 双击

onKeypress按键

onMouseDown鼠标按下

onMouseOut鼠标移出

onMouseOver鼠标移上

onMouseUp鼠标抬起。

实例：dreamweaver中网页折叠菜单的制作

第一步：先插入一个一行、两列的表格，方法：单击菜单上的“插入”，再选取“表格”，在“行”中输入1，在列中输入2，在单击“确定”。

把宽和高分别设为200px和30px 在两个单元格内分别输入 内容

第二步，在单元格内插入一个层。把宽和高分别设为100px和90px 第三步：在层中插入一个三行、一列的表格，方法同第一步。并把宽和高分别设为100px和90px,以填满这个层。在三个单元格中输入内容

在层的属性栏中将“可视”设为“隐藏”，这样在打开网页时便看不见这个层

在“行为目标”中选择一个合适的浏览器，一般是选择“IE 4.0”。然后单击左边的“+”按钮，来添加行为。在弹出的菜单中选择“显示或隐藏层”，在弹出的窗口中选择 “Layer1”，就是我们刚才添加的那个层了，再单击“显示”

接着单击“事件”下面右边的那个向下箭头按钮，在弹出菜单中选择“当鼠标移上”（OnMouseOver）。

再单击“+”按钮，选取“显示或隐藏层”，还是选取“Layer1”，不过这次我们点击的是“隐藏”（Hide）了，再确定。然后选择“事件”，单击“当鼠标移开”(OnMouseOut)。【课程小结】

【作业】

1．5 课后练习书本课后练习作业

第十二节 HTML语言基础

【教学目的与要求】

一、HTML语言概述

二、HTML文件基本架构 【教学方法与手段】

多媒体教学：借助多媒体手段，进行课堂理论教学；

启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：

基础知识： HTML语言概述 重点知识：HTML文件基本架构 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】

一、HTML语言概述

当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML(HyperText Markup Language)语言所构成。HTML(超文件标记语言)是一种建立网页文件的语言，透过标记式的指令(Tag)，将影像、声音、图片、文字等连结显示出来。

HTML标记是由 < 和 > 所括住的指令，主要分为 : 单标记指令、双标记指令(由 < 起始标记 >，< / 结束标记 >所构成)。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后(以.htm 或.html 为文件后缀保存)将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器(Server)上，对外发布信息。

二、HTML文件基本架构

文件开始 标头区开始 标题区 标头区结束

篇8：网页教案设计

1《网页制作》教材分析及教学对象分析

对于《网页制作》教材的选择, 选择《Dreamweaver MX2004中文版网页制作基础》教材, 该教材的最大优点在于采用任务驱动、案例教学的方式, 其中分考虑到了网页制作的实际运用和实际需要。通过实际案例的讲解, 不仅可以方便教师的讲解, 也有利于学生知识技能和应用技巧的培养。一般学生在学习网页制作课程之前都掌握了基本的网络知识, 也对Office办公软件、Photoshop图形图像处理及数据库设计有一定的了解。因此, 在学生具备一定的文本编辑及图像信息处理能力的情况下, 将网页制作的教学重点放在网页版面的美化和文字信息表达方面, 对网页版面设计效果进行有效评价, 使学生更好地了解网页版面编排的原则及色彩搭配等, 以保证网页制作教学活动的正常开展。然而, 对于网页制作的教学对象, 面向的是中等专业学生, 对于中等专业学生来说, 相比纯理论知识的学习, 其更擅长于操作实践性较强的课程。在信息技术不断发展的时代下, 网页制作是与生活息息相关的, 其界面融合了文本、音视频、动画及图片于一体, 可以有效激发学生的学习兴趣。通过在学生已掌握办公文字处理及图形图像处理的基础上, 引导学生将所学知识应用到网页制作中, 可以达到巩固知识的目的。

2《网页制作》之网页版面的教学设计

对于《网页制作》中网页版面的设计, 由于网页制作带有一定的综合性, 为了真实体现网站的设计理念, 在教学任务设计中, 首先必须将实际项目任务分解, 采用小组合作的方式, 每个小组4~6人, 在小组组长的指导下, 结合网站建设项目的特点, 将项目任务分解成不同的任务, 包括网站总体规划设计、网站环境配置、网页版面布局设计、文字及图形图像处理等, 让小组中的每个成员对相应的网页元素进行加工处理, 共同完成一个网页版面的设计, 这样学生就相应的掌握了一个知识点。为此, 对于网页制作的设计, 应包括以下步骤:

(1) 明确教学目标:进行"网页制作"设计之前, 首先必须足够了解Dreamweaver网页制作的配置环境以及文本编辑、动画视频设置、工具绘制图像的方法等, 只有掌握基本的操作, 网页制作项目的设计才能顺利;其次, 技能目标, 能通过模仿网页来完成实际网页项目任务的才做;能正确进行表格的编排及网页动态的设计;能选择合适的网页背景音乐和图案;最后, 情感目标:培养学生的审美情感和团队合作精神, 能培养学生的社会责任感。

(2) 教学内容重点、难点的设计:对于"网页制作"中教学难点的设计, 应是培养学生分析网页布局和色彩搭配的能力, 而难点是让学生掌握网页布局结构、简单表格的制作、表格的嵌入及熟悉网页的各种元素。

(3) 教学活动设计:以"某大学网页布局"为例以导入新课, 在教学之前, 需构建基本知识框架, 简述网页制作基本知识, 然后推荐优秀网站做范例, 充分了解网站的内容和颜色的选择。然而, 在课程内容设计上, 分析某大学网页布局和网页元素, 按照项目任务分组, 各小组按照要求进行网页制作, 让每个小组互评, 展示各组网页成果。在这个过程中, 教师需要以广播的方式向学生展示某大学网页信息, 引导学生了解网页的布局和网页元素, 如"国字型, 文本、图像、表格等";引导学生分组, 指定小组长;观察学生网页制作的进展情况, 对学生制作过程中的难题给予帮助。除此之外, 对于学生学习行为, 在教学过程中, 学生需要积极思考"国"字型网页布局的典型应用, 通过自身所学知识, 建立一个新网站;按项目任务分工, 进行文字编辑、图像处理及表格制作等;通过小组共同完成网页制作, 最后进行小组互评总结。

(4) 课堂总结:通过教学教程教材和课件的辅助, 围绕网页制作实例, 让学生掌握基本的网页布局、文字处理机表格制作等, 熟悉网页的各种元素, 使学生的网页操作实践能力得到一定的提升。

3 总结

总而言之, 加强"网页制作"的教学设计, 将教学重点内容放在网页版面制作及文字信息表达处理上, 使"网页制作"课程教学活动得以顺利开展。

参考文献

[1]肖潇.浅谈独立学院网页制作课程的教学设计与教学改革[J].科教文汇 (下旬刊) , 2011, 10:46-47.

[2]张莉.浅议技工院校《网页制作》课程的教学设计与实践[J].计算机光盘软件与应用, 2013, 18:218, 220.