人人范文网 教案模板

应用模板创建网页教案(精选多篇)

发布时间:2020-04-18 13:56:58 来源:教案模板 收藏本文 下载本文 手机版

推荐第1篇:网页制作综合应用教案

网页制作综合应用教案

【教学分析】

学生的信息技术水平和能力的参差不齐,这是一个不争的事实。在如何组织信息技术课堂教学上各有各的方法,但怎样才能发挥那些水平较高、能力较强的同学的作用,调动不同层次学生的学习信息技术的兴趣一直是我们探索的问题。

本节课力图探讨信息技术课堂教学如何在网络环境中实现分层教学;努力探讨如何实现使现有的不同层次水平的学生在信息技术课堂教学中都有所为、有所得;同时还试图在学生的自主学习、协作学习与课堂教学评价等方面作出一些有益的探索。 【教学目标】

1、知识与能力:

①熟练掌握并合理运用网页制作知识与技巧; ②逐步培养学生分类整理信息资源的能力; ③逐步培养学生分析、处理、应用信息的能力。

2、过程与方法:

①导入新课阶段,采用问题引导的方式,让学生整体了解本节课的任务。

②初步制作阶段,采用自主学习的方式,要求学生主动思考问题,并试着自己动手去解决。

③交流学习阶段,采用协作学习的方式,提供给学生一个交流的平台,引导学生在组内交流学习问题、制作心得等。更进一步地把自己的作品修饰的更漂亮一些。 ④作品评价阶段,采用小组间互相评价作品(提供评价标准),教师汇总评价结果,及时反馈评价信息,点评作品。

3、情感态度价值观:

①逐步培养学生的独立自主学习的方式; ②逐步培养学生协作学习的方式; ③逐步培养学生团队合作的精神; ④逐步培养学生欣赏、评价优秀作品。 【教学重点】

1、超链接的设置。超链接是网页的灵魂,教学中任务多处要求学生制作超链接,强化这一知识点。

2、表格的制作与修饰。表格是用来组织网页信息中最常用的方式之一,教学任务一再要求用表格进行主页布局,并要对表格进行一定的修饰,从而使整个网页条理分明。

3、主页的布局和修饰。学生水平、层次、综合能力在这一点上可以体现出来,在教学任务和评价中也作出了相应的要求。 【教学难点】

主页的合理布局和修饰。要求学生在完成主页的基本制作基本上,要注重对主页的美化,让我们的主页更吸引人。 【教学策略】

1、设计并采用交互式网络教学平台;

2、对学生进行分组并分配相应的任务(主页设计与制作),采用任务驱动式教学方法;

3、学生首先独立自主地解决力所能及的问题(主页中资源的使用、超链接的设置、表格的制作等),采用自主学习策略;

4、学生间相互交流学习心得,利用交流平台相互帮助解决网页制作中遇到的问题,采用协作学习策略;

5、对教学的结果进行评价,组间互评、教师点评,采用作品评价的方法。【教学课时】 一课时 【教学资源】

交互式网络教学平台,教学网页,任务素材,FTP学生用户的建立及相关参数配置。 【教学准备】

教师活动 学生活动 设计理念

课前准备

1、准备教学过程所使用的资源。

(1) 为了使教学更具有吸引力,确定了本次制作活动的主题为“科技时尚”,并选择了下面几个子主题: A、UFO专题 B、国际空间站 C、恐龙世界 D、通古斯之迷 E、火星探测 F、三星堆之迷 G、科普生活

(2)要求学生从Internet下载给定主题的相关内容(网页、图片等等)。

(3)教师整理学生所下载、收集的资料,为每一个子主题制作相应的教学资料包。

2、为学生准备FTP用户,并设置相应的权限。

3、通过网络教学平台完成以下内容: (1)确定上课的班级。

(2)检查机房的设备,根据情况及时调整学生的座位,并在教学平台中及时修改调整学生信息。

(3)根据学生的学习情况以及任务的完成情况来确定层次,并把程度较好的学生设定为组长,其他学生分成不同的制作小组。

(4)根据学生对制作主题的选择情况,对全班的学生进行分组,在教学平台自动分组的基础上,并适当进行调整。

1、根据教师的要求,从网上搜索资料(文字、图片、声音、视频等),并把相关资料下载下来。

2、整理所需要的素材,并按要求把它传送到指定的位置。

3、学生根据教师的安排和指导,进入网络教学平台。

4、从教师提供的几个不同学习主题中选择自己感兴趣的主题。

5、等待教师分组。

教育学上对备课有这样一个观点: 备课实际上一是备学生,二是备教材。

对于信息技术课还应加上备教学环境(机房)。

教师应充分熟悉机房环境,更要充分利用网络机房这一教学环境来营造教学情境,从而使学生更能投入到教学中去。

各组的活动主题相同,但小组内各成员的所完成的主题各不相同,他们共同构成小组的大主题。这样横向在评价上可以实现可比性;纵向可以增强组员之间团结协作,共同构建、完善小组的大主题。

【任务设计】(某一学生的任务) 请认真仔细阅读以下内容:

1、首先,我们郑重提醒你:你正在参与一项集体活动,请记住你是“科技时尚”组的一名成员,你的活动结果将直接影响甚至决定你所在团队的最后成绩,所以提醒你要打起十二分精神来认真完成所接到的任务。以下是你的团队成员名单: 组长:季 洁

张 婧 戚 涛 孙 欣 孙 兴 刘 沁 李沁怡

2、请下载实践操作中所要用到的资料包,然后把它解压到D:\。

3、启动FrontPage,打开站点“D:\恐龙世界”,新建一个网页,然后把它保存起来,名称为:Index.htm 注意保存网页时的名称一定要为此文件名,你的任务就是在这个网页中设计制作完成。

4、在设计你的主页和网站时,请注意以下几点提示:

A、要求你创建的名为“Index.htm”网页,它是一个网站的主页,此网页相当重要,可以说它是别人观察你的任务完成情况的入口。此网页的内容完全由你自己的设计完成,如果你还不太清楚主页的制作要求和规则,请查阅“主页设计”。

B、本节课所制作的主页不建议你使用框架网页来组织网页,建议你请使用表格来组织网页信息。 C、主页上所设置的超链接一定要正确、准确;主页所链接的下一级网页一定要能够返回到主页。

D、主页设计一定要遵循简洁,色彩鲜明,文字、图像、动画等信息源安排的要合理,要动静结合,表格请进行必要的修饰。

5、请在主页的适当位置添加一个“科技时尚首页”超链接,超链接地址:../06/index.htm

6、所有的网页制作完成后,请先打开”D:\恐龙世界”文件夹,检查Index.htm的制作效果,以及所有的链接是否正确。

7、检查正确后,把该站点发布到“ftp://192.168.201.101”,在弹出的对话框中,用户名为01,无密码。

8、请单击你的作品,再次检查你所制作的网页的内容是否正确、完整。特别是图片、声音、视频以及超链接。

【教学过程】

教学活动 学生活动 设计理念 问题引导

1、通过网络教学平台,进入问题分析阶段。

2、先简单介绍本节课的学习方式和学习内容,学习过程中注意些什么问题,让学生初步了解: (1)我们的任务是什么? (2)我们该怎样去完成任务?

(3)任务将以什么样的形式表现出来? (4)任务的最终表格形式是什么?

3、指出组长与成员之间的任务有所不同,更强调组长的职责。

(1)组长的任务是制作主题“科技时尚”的主页,该主页应能够准确地链接到每个组员所制作的主页(教学平台提供了这些链接地址,但这些链接只有当所有的相应内容发布到网上之后方可检查其准确性),布局要合理,内容应充实,具有一定的吸引力。

(2)组员的任务是制作相应子主题的主页,该主页的布局一定要合理,内容应充实,链接要准确,特别是链接到组长主页的设置(教学平台提供了链接的地址,但该链接的设置只有发布到网上之后方可检查其准确性)。

(3)组长要帮助、检查组员所制作的主页是否合理、正确,特别是超链接设置是否正确。

1、首先认真阅读教学平台所展示的“实践操作要求”,并找出: (1)我在哪一制作小组?我的组长是谁? (2)我的制作主题是什么? (3)我的主页有哪些具体要求?

2、然后思考老师所提出的问题,对于这些问题用什么方法来解决?还有哪些地方没有听懂的、看懂的?及时提出来进行交流、讨论。

3、组长检查本组成员是否完成素材的下载?是否打开了相应的站点?帮助有困难的同学,并及时向老师汇报本组的情况。首先让学生了解本节课的主要任务是什么?该怎样去完成任务?设计和制作时应注意哪些问题?任务最终将以什么样的形式展现出来?

通过这些问题的思考学生可以从整体把握本节课的内容,这样在学习、操作过程中能做到胸中有数,有的放矢。

自主学习

1、通过网络教学平台进入自主学习阶段。

2、引导学生如何进行自主学习。

3、培养学生养成自己动手解决问题的学习习惯,使用多种方法来引导学生努力去做到这点。

鼓励学生自已去寻找解决问题的方法,在这一段时间内尽量不要随意提问。提示学生可以借助以下方式来寻求解决问题的方法:

(1)教学平台所提供的“相关帮助”; (2)自带课本中的相关章节; (3)FrontPage自带的帮助系统。

4、引导学生遇到问题先想想自己是否能够解决? 是不是应该先去完成自己可以完成的部分?

是不是应该先把这些问题记录下来,等一会可以在小组内进行交流? 引导学生养成一个良好的学习习惯。

5、强调在制作主页时要充分利用表格来规化自己的主页,并要对表格进行必要的修饰。

6、教师边巡视边把一些好设计、好想法介绍给大家听,并适当对那些程度较差的学生加以指导。

7、提醒并纠正学生在操作过程共同出现和遇到的问题。

1、学生首先查检所打开的站点中有哪些资源?

2、学生对资源进行分类整理,从而思考哪些将显示在自己的主页上?

3、思考如何设计才能制作出一个美观、得体的主页。

4、根据自己的设想,动手来制作自己的主页。

5、在制作的过程中如果遇到一些不太熟悉的知识或方法,先可以通过以下几种方式来查阅相关的帮助: (1)教学平台上所提供的一些帮助; (2)自带课本中的相关章节; (3)FrontPage自带的帮助系统。

如果通过上述方式尚不能解决则可以记录下所遇到的问题,等待下一步在组内进行交流。

6、初步设计制作完成自己主页。信息技术教育是以培养学生的信息能力,提高学生的信息素养为目标的教育。在整个教学过程中着重培养学生“信息技术的灵活运用能力”,培养学生以信息技术的方法手段,解决实际问题的能力。

当然首先我们还得让学生自己先思考、自己先动手、自己来解决所遇到的问题,这样可以达到逐步培养学生的自主学习能力。

协作学习

1、通过网络教学平台启动组内交流平台。

2、指导学生组内成员进行交流帮助。

3、引导学生进行使用正确交流的方式。

4、提醒学生及时完成自己的的主页制作。

5、提醒学生注意保存自己所修改的网页内容。

6、要求组长下位帮助、检查组员的主页制作情况(特别检查超链接设置的是否正确,主页是否有表格,表格是否进行了修饰)。

1、使用组内交流平台,提出自己的问题,并尽自己所能解答组员所提出的问题。

2、根据交流所得到的信息,及时调整和修饰完善自己主页。

3、组长此时应担负起指导帮助的责任,及时帮助组内成员完成主页的制作和修饰。

4、及时保存自己的制作内容。

5、及时把制作完成站点发布到指定的位置。

6、检查自己所制作内容是否正确(超链接)。学生的基本“信息素养”应包括“协作意识和信息的交流能力”。

学生通过这一交流平台,相互之间提供帮助,并记录问题以及问题的解决方法、方案、技巧等。并根据所得到的信息修改、完善自己的主页设计。

作品评价

1、通过网络教学平台启动作品评价平台。

2、指导学生进行作品评价。(1)介绍评价的方法。

(2)介绍、分析评价项目以及相应的评价标准。

3、及时收集并统计出学生的评价结果。

4、向全班学生公布各小组作品的评价结果,并对部分作品进行点评。(1)通过网络教学平台的统计结果,选择点评对象。 (2)对网页的制作效果对照评价标准进行分析、评价。

(3)指出作品中的优缺点,提醒学生在今后的设计、制作过程中应该注意相应的问题。

1、打开作品评价窗口。

2、认真阅读评价项目的内容。

3、分别对各小组的作品进行观察浏览,并参照评价项目和评价标准,对小组作品按项目进行评价。

4、检查评价的结果,确认评价的信息没有错误。

5、提交评价结果。

6、观察教师对作品评价综合统计结果,聆听教师对一些作品的点评,思考本小组作品的得失,同时还思考自己在制作主页时还需要注意哪些问题。学生的制作结果(作品)总是希望能够得到某种程度的认可。 学生之间的互评,一方面是对作品进行评价,更重要的是评价者在评价作品的过程中学习一些经验,吸取作品中的优点,摒弃其中的缺点。从而达到“取其精华,去其糟粕”的效果,提升知识综合应用的水平,逐步培养欣赏作品、评析作品的能力。

课堂小结 本节课是网页制作综合实践应用,要求学生根据所提供的素材,自主设计并制作一个主页,只是强调了要充分利用表格来规化网页,强调网页中的灵魂——超链接的制作。这样一来任务的灵活性较强,难度较大。这样的任务与平时学习训练的任务有较大的差别,要求同学们在今后的学习过程中应多注意知识灵活运用,加强实践操作。培养学生的创作和创新意识、自主学习和协作学习的意识。同时在教学过程中及时对学生所制作的作品进行评价,更强调学生之间的互评,教师点评。

【教学流程图】

【教学反思】

信息技术课堂教学方式一直是信息技术教师和一些教育专家探讨的一个主题,但目前多数教师在常规的课堂教学中还是采用教师边讲解学生边操作任务的教学方式。

作为一名信息技术教师,我平时也在思考这个问题,在总结近三年来的网络教学方式的基础上。我设计并制作了这一网络教学平台,其教学功能主要有:

1、控制教学环节。在信息技术课堂中教学过程很难控制,这是一个共识。如何有效地控制教学环节,本网络教学平台设置了几个关键教学环节(任务分析、自主学习、协作学习、作品评价),这样从整体上可以实现教学环节的控制;

2、提供组内成员交流学习的平台。学生在独立完成任务的同时,组内成员可以通过交流平台相互帮助指导;

3、作品评价。以小组为单位,学生可以根据提供的评价项目及评价标准进行评价其它组的作品。同时及时统计评价结果,最后展示并评点作品。

本课的主题是“信息技术在网络环境下实施分层教学的研讨”,这里包含两部分内容:一是网络教学环境,即是上面所说的网络教学平台;二是分层教学,分层教学也是我们信息技术课一直所倡导一种教学方式。由于学生的信息技术水平的参差不齐,在以往的教学过程中很多学生在很短的时间内就可以完成课内任务,而有些同学却每节课都不能完成任务。经过两年的教学思考,虽然我们在任务设计上进行了一些修改(分为基础任务和提高任务),为学生提供了选择和拓展的机会,但由于任务的过于具体化,学生的自我发展的空间受到了限制。本课中分层教学的设想要求学生完成共同的任务(主页的设计),但任务的描述不再非常具体化,只是作了一些规定(课本中的相关知识点,如超链接、表格等),更多的是要求学生发挥自己的想象力及创造力来设计完成任务。这样不同层次的学生可以设计不同水平的主页,从而达到分层的要求。

本课从课堂教学效果来看非常好:网络教学平台发挥了其应有的功能;学生完成任务的投入程度大大高于以前;听课教师对本网络教学平台和教学方式也给予了很高的评价和期望。

作为一次研讨课无疑是成功的,但要想其成为大家所期盼的常规的教学方式还有许多值得探讨与改进的地方:

1、网络教学平台的通用性。这是一个从设想、设计、制作都需要花大力气去解决的问题。

2、任务的设计。任务的设计一是要考虑学生的水平,二是要仔细研究教材。并非所有的内容都能按此种教学方式进行设计。如何能更好地实现分层教学也是值更深一步研究的问题。

3、学生互助方式的改进。从课堂教学来看,网络教学平台中的组内交流平台按我的观点完全可以去掉或修改成“答疑区”,以便于课后对教学设计进行反思及学生学习状态、过程的把握。

4、评价方式的改进。本节课的评价只有作品评价,虽然也有教师的点评,但还是缺乏评价方式的多样性;同时也只有学生之间的评价(且仅以组为单位),缺乏评价主体的多样性。应在评价方面多思考,如可以在教学过程中设置一些相关知识点的标准化题目,以便评价学生个体的对知识点的掌握程度。

当然只以个人的观点和想法不足以能引起信息技术课堂教学方式的变革,仅试图通过本人在教学上的一些做法能起到抛砖引玉作用,以期激起广大同仁的共同努力探索,为信息技术教学的发展提供更广阔的空间。

参考书目:

何润伟

《信息技术》第一册

中国和平出版社 杨威等

《信息技术教学导论》

电子工业出版社 朱慕菊

《走进新课程》

北京师范大学出版社

网址:http://www.daodoc.com/

网址:http://www.daodoc.com/

推荐第2篇:《应用表格布局网页结构》教案

《应用表格布局网页结构》教案

一、教学目标

1、知识与技能:

(1)了解表格网页的作用;

(2)掌握网页中表格的制作方法,表格属性的属性设置方法; (3)能根据网页设计内容,正确布局表格的结构; (4)尝试根据内容需要设计表格布局网页页面。

2、过程与方法:

(1)利用对比,加深学生对表格布局网页的认识;

(2)通过用表格结构设计网页,使学生进一步理解表格的作用、功能及网页设计方法; (3)通过自主探究,使学生掌握软件的使用规则,培养学生自主学习的能力。

3、情感态度与价值观:

(1)通过实践创作的过程,形成主动学习和利用信息技术、参与信息作品创作的态度; (2)培养学生注重吸取成功的经验,提高本身的信息素养。

二、教学重点

1、表格的制作及设置方法;

2、根据实际情况设计并应用表格布局网页。

三、教学难点

1、应用表格布局网页页面的意识;

2、合理制作表格,实现页面布局。

四、教学方法

教师讲解、演示、与学生任务驱动、合作学习相结合。

五、教学过程 教学过程

教师活动

学生活动

课前准备

将“学习素材”文件夹发送到学生机桌面;

打开并预习本课内容。

一、对比,引入新课

1、明确表格在网页制作时的作用:页面规划

(1)展示两个页面(1.htm和2.htm)并进行比较: 提问:①这2个网页,你喜欢哪个?为什么? ②网页中的文字、图像对象如何插入?

③在Frontpage中打开2张网页,观察有什么不一样。

总结:这些线就是表格线,在做网页时,可以利用表格布局网页结构。 (2)引出本课内容:探索用表格来布局网页的页面。 (3)明确本课的任务:使用表格制作网页。

学生小组交流、讨论,对比加深印象,感受表格布局网页的作用 发现表格可以布局页面 明确本课内容

二、小组合作,体会用表格布局网页

2、模仿用表格布局网页页面结构 (1)引导学生回忆Word中学过的表格内容,提示学生表格操作跟Word中具有很大的相通之处;

提问:还记得哪些表格的编辑方法?

(2)展示效果页,引导学生分析页面的结构,探索需要制作表格的结构; (3)讲解演示表格的制作及调整; (4)布置学生完成任务一:“心憩空间”网页

(5)展示成功学生的作品,引出表格属性的设置;

如:行列的插入、删除、单元格的合并、拆分、调整大小等。

根据网页内容来规划所需表格结构,了解网页中表格制作及设置的方法。 学生小组合作,完成网页“chushi.htm”

三、小组合作,尝试用表格布局网页

3、小组交流并独立制作表格布局网页

(1)刚才我们一起体会用表格布局网页的网面结构:先分析确定所需表格的结构,然后根据实际制作设置表格布局网页页面结构。接下来我们就来尝试用表格布局我们的网页了;引入用表格布局“多彩的生物”网页;

(2)引导学生分析确定网页的表格结构;

(3)布置学生完成任务二:制作“多彩的生物”网页;可以根据自己的设计对网页进行适当的调整;

掌握根据网页确定所需表格的结构 能根据网页规划表格

小组合作讨论,根据学案提供的参考表格确定“多彩的生物”网页的表格结构,再独立完成图片、文字的插入。

四、作品展示交流与课堂总结

1、展示成功学生的作品并点评;

2、总结本课内容:为了制作的网页内容工整、美观,所以我们选择使用表格布局。本课我们尝试并使用了表格来规划布局网页,尝试设计个人网站的首页,自主设计版面,灵活使用表格进行网页制作。

掌握表格布局网页的常见技巧,加强表格布局网页的意识。

推荐第3篇:07创建超链接和网页教案

案例名称

创建超链接和网页模板

一、教材内容分析

本课主要有三个教学内容:制作“超链接”,设置超链接颜色和设置超链接热区。学生对超链接的内容是比较陌生的,所以首先让学生明确超链接的概念。学生明确超链接后教师再讲如何创建超链接的创建。字超链接是最普通的一种超链接形式,教师在讲解这个操作时重点要说明的是要确定超链接的目标。超链接的目标有多种,如网页、图片、音乐、视频等,本课要求学生掌握链接到网页就可以了。图片超链接和文字超链接建立的方法是一样的。超链接热区的建立重点是自选图形的使用。本课重点是超链接的建立,学好本课为后面的网页、网站的设计打下基础。

二、教学目标(知识,技能,情感态度、价值观)

知识与技能:1. 建立文字超链接、图片超链接、电子邮件的超链接; 2. 学会设置超链接颜色和设置超链接热区。

过程与方法:1.通过创建网页超链接的操作,使学生了解网页中创建超链接的基本方法,消除对网页链接的神秘感;

2.通过教师讲解、演示,学生观察、动手操作、理解记忆等学习方法,使学生学会正确建立和修改文字及图片超链接的操作。

情感态度与价值观:1.完成文字和图片超链接的创建,使学生感受成功的喜悦和快乐。 2.培养学生勤于思考和自己动手探索新知识的良好学习品质。

三、学习者特征分析

1.该班级学生基础知识比较扎实,思维活跃,学习兴趣浓厚,课堂参与积极、主动。 2.该班级学生能熟练掌握电脑的基本操作,能够在网络环境下顺利的开展自主和合作探究活动。

3.该班级学生对超链接这部分内容还不熟悉,对于超链接及超链接热区的创建的实际操作能力有待提升。

四、教学策略选择与设计

直观演示与自主学习相结合,合作练习与教师的讲授相结合

五、教学环境及资源准备

多媒体教室、自制教学课件

六、教学过程

教学过程

教师活动

学生活动

设计意图及资源准备

质疑导入

首先,老师演示自己制作的网站,用超链接预览所有的网页,让学生仔细观察。然后,让学生按照老师的方法,演示自己的作品,看能不能进行,为什么? 对,有“手”形的地方,就是“超级链接”。

学习自主练习

学生踊跃发言,说老师的网页上有“手”的形状

教师制作完成《介绍我自己》网站(含有超级链接)。 学生:已制作完成,共4张网页。

拉进学生与知识点的距离,让学生对超链接产生神秘感。

引入网页制作中

合作探究

(超链接的建立及超链接颜色的设置)

一、超链接的建立 提问:“这些超链接(文字、图片)是怎么制作的?” 教师巡视

指出操作要点:建立文字超链接时需要选中制作超链接的文本! 提问:超链接制作的方法? 提问:超链接的对象是什么呢?

二、设置超链接颜色

让同学们观察建立文字超链接后文字有什么变化?我们能够修改超链接的颜色吗?

按照书本上的图示,讨论、探究超链接制作的方法。 学生尝试制作超链接

小组发言并演示超链接的建立方法

学生回答超链接的对象可以是网页、文件、网址、电子邮件等 学生通过观察后回答并按照书上尝试改变超链接文字的颜色 小组成员间合作练习掌握超链接文字的颜色的的设置方法

培养学生的自学能力、他人交流合作的能力、语言表达能力 让学生动手制作、体验超链接,提高学生的动手操作能力。 培养学生与他人交流合作能力

演示讲解

三、设置超链接热区

课件演示(设置超链接热区后)“米老鼠” 单击“米老鼠”的头链接到“第一个网页”,单击“米老鼠”的手链接到“第二个网页”,单击“米老鼠”的脚链接到“第三个网页”。 教师提问:这是怎么制作出来的?

教师讲解演示:通过借助自选图形来建立热区。

指出操作要点:先建立自选图形,并设置自选图形的超链接,再设置自选图形为透明。 鼓励学生尝试实践

学生观察教师的操作,掌握操作的方法后自己实践操作

加强学生对超链接的理解。消除对超链接的神秘感。

展示与评价

组织学生将自己的优秀制作向全班同学进行展示,并以组为单位评价作品。

各小组推荐优秀作品进行展示并自评,其他小组对作品进行评价

通过作品展示与评价能够相互取长补短

课后拓展 同学们,今天我们学习了网页间的超链接的制作方法,那么,能不能链接到其他格式的文件,如doc,exe等?

课后学生合作或独立完成。

拓展、作业。

教学流程图

七、教学评价设计

1、在学习的过程中你遇到了哪些困难,你是怎样解决的?

2、对于熟练的学生,探究:如何制作“电子邮件”的超链接?

3、你能为熟练设置文字和图片的超链接吗?

八、帮助和总结

学习了各种超链接的使用方法,同学生都做的非常好。通过本节课的学习你应该能使自己的网页更加充实和美妙。

推荐第4篇:创建网页初二信息技术教案[材料]

初一 信息技术 2008-2009学年度第二学期教案

创建网页

一、课型:新授课

二、教学目标:

1.知识与技能:了解网页模板的作用。

能根据需要选择合适的模板快速创建网页。

会对网页的内容进行编辑。

2.过程与方法: 通过创设情景,激发学生的学习兴趣。通过制作一个简单我网页,掌握网页制作的一般过程。

3.情感态度价值观:

体验网页模板在制作网页时的快捷

体验使用网页进行信息交流的乐趣

三、教学重、难点:

重点是用时FrontPage2000 自带的模板创建网页,并对网页进行编辑;难点是网页中图片的插入与编辑。。

四、教学方法:

网络广播、小组讨论、合作探究

五、教具:

网络广播系统、计算机

六、教学过程:

1、导入:

打开学校网站:http://211.86.91.234 浏览一下,找到与自己班级相关的活动照片。

2、新授:

(1)打开FrontPage2000,使用模板快速创建网页;

①执行“文件”→“新建” →“网页”;

②选择合适的网页模板,点击确定;

(2)网页中文字的编辑

与word中文字的编辑类似

(3)网页中图片的编辑

① “插入” →“图片” →“来自文件”

② 在图片上点右键,可以对图片格式进行设置。

(4)预览并保存网页

注意:网页在保存的时候一般要用“见名思意”的名字,以备以后编辑的时候使用。

3、巩固练习:

利用桌面的文件夹“素材文件”

(1)制作一个有关于奥运会报道的网页

(2)要求图片、文字、标题要搭配合理,在说明问题的同时要具有美感。

5、小结:

八、教学后记及反思:

推荐第5篇:网页教案

三、DW安装应用

在学网页创建中,有一款非常重要的软件叫DW软件,它件全称:Dreamweaver,被称为网页三剑客之一. DW软件学习内容: 1.DW软件下载安装

2.创建HTML文档和CSS样式表并将二者关联起来 3.DW软件的应用 A.HTML文档的创建 1.打开DW软件

2.如果想创建一个HTML文档,只要点击“新建”下面的HTML,这个就完成了一个HTML文档的创建。

3.在当前页面点击“代码”,就可以看到我们新建一个HTML文档的时候,包括“声明”、“标签”、“根元素”还有标签及里面的和

推荐第6篇:网页设计与应用毕业论文

目 录

第一章 前言„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„2 1.1 课题来源 „„„„„„„„„„„„„„„„„„„„„„„„„„„„ 2 1.2 网站开发项目需求分析„„„„„„„„„„„„„„„„„„„„„„„ 2 1.3 软件„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„ 3 1.4 软件运行环境第二章 网站制作„„„„„„„„„„„„„„„„„„„„3 第二章网络制作„„„„„„„„„„„„„„„„„„„„„„„„„„„„3 2.1做网页的步骤 „„„„„„„„„„„„„„„„„„„„„„„„„„„ 3 2.2 做网页的要素„„„„„„„„„„„„„„„„„„„„„„„„„„„„4 2.2.1网页的整体布局设计„„„„„„„„„„„„„„„„„„„„„„„„4 2.2.2 网页设计中色彩的运用„„„„„„„„„„„„„„„„„„„„„„„4 2.2.3 网页形式与内容相统一 „„„„„„„„„„„„„„„„„„„„„„ 4 2.3 系统各模块功能实现„„„„„„„„„„„„„„„„„„„„„„„„„4 2.3.1 系统登录模块 „„„„„„„„„„„„„„„„„„„„„„„„„„4 2.3.2 车辆展示模块 „„„„„„„„„„„„„„„„„„„„„„„„„„ 5 2.3.3 账号管理模块„„„„„„„„„„„„„„„„„„„„„„„„„„„5 第三章 网站的设计„„„„„„„„„„„„„„„„„„„„„„„„„„„ 5 3.1 主页的要求„„„„„„„„„„„„„„„„„„„„„„„„„„„„„5 3.2 子页的要求„„„„„„„„„„„„„„„„„„„„„„„„„„„„„5 3.3 网页设计技巧„„„„„„„„„„„„„„„„„„„„„„„„„„„„5 3.3.1 框架的使用„„„„„„„„„„„„„„„„„„„„„„„„„„„„5 3.3.2 CSS 样式的使用„„„„„„„„„„„„„„„„„„„„„„„„„„6 第四章 网站的应用„„„„„„„„„„„„„„„„„„„„„„„„„„„ 6 4.1 网页分为静态网页和动态网页„„„„„„„„„„„„„„„„„„„„„6 4.2 我的认识„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„6 结束语 „„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„ 7 参考文献„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„7

—1—

网页设计与应用

摘 要 :汽车网站是一个结合了汽车销售等多功能浏览的汽车网站,我所使用的软件是

Macromedia 公 司 推 出 的 一 款 用 于 网 页 设 计 的 软 件 — —

dreamweaver8。在网页的制作与链接中,我学到了很多,然后补充一些比较热门的技巧。网站具有快捷。无距离更新的特性,同时提供进入日常业务处理平台的“入口”,具有较强的实用价值。这样的网站被广大消费者普遍使用,随着现在网络的普及和高效性的不断提高,它的展示作用和实用性已经使它的应用地位越来越高,越来越广泛。本文对网站设计作了介绍,进行了需求分析、模块划分、框架和 CSS 的介绍。 由于制作经验不足,作品和论文中存在问题之处,请老师指导完善。

关键词: 超链接,外观,性能,框架,CSS 目 录

第一章 前言

1、1 课题来源

随着二十一世纪新兴科技的飞速发展,如今的电子信息产业正在经受着一个巨大的挑战,同时也面临着一个重大的机遇。就目前的科技发展水平而言,电子信息产业的发展已经不能够满足社会化大生产的要求,因此,各个国家集中人力、财力加大对信息技术产业的投入,以适应目前需要。可喜的是在这几十年的发展中我们有了互联网。互联网加大了我们了解世界的眼界,缩紧了人与人之间的距离,这就更容易的使我们走上信息化的道路。 以往,人们出行都以自行车居多,后来公交事业发展壮大,人们便乘坐公交汽车,现如今,随着人们生活水平的提高,越来越多的家庭已经拥有或者想拥有自己的私家车。 正是因为人们的这些需求,越来越多的汽车网站出现在网络上,使人们可以随时了解自己想知道的汽车方面的新闻,真正的做到足不出户,便知天下事。把汽车销售与网络连接起来,是今后汽车销售发展的必然方向之一。

1.2 网站开发项目需求分析

一个网站项目的确立是建立在各种各样的需求上面的,这种需求往往来自于客户的实际需求或者是出于公司自身发展的需要,其中客户的实际需求也就是说这种交易性质的需求占了绝大部分。面对对网站开发拥有不同知识层面的客户,项目的负责人对用户需求的理解程度,在很大程度上决定了此类网站开发项目的成败。因此如何更好地的了解、分析、明确用户需求,并且能够准确、清晰以文档的形式表达给参与项目开发的每个成员,保证开发过程按照满足用户需求为目的正确项目开发方向进行,是每个网站开发项目管理者需要面对的问题。据专家预计,2009 年我国汽车需求量将超过 850 万辆。所以,做好汽车 —2—

网站就是为了使广大的消费者提供及时和有效的信息,为其选择适合自己的产品提供良好的参考。

1.3 使用软件

dreamwraver 软 件 由 美 国 著 名 的 网 站 应 用 开 发 工 具 生 产 厂 商 AdobeMacromedia 于 2005 年 6 月推出并正式投入市场以来,已经发展得相当成熟⑴。关于dreamwraver 的技术介绍的相关书籍与网络信息相当丰富。 通过大学中软件开发环境课程的学习,对 dreamwraver 有了比较深刻的认识,并比较轻松的掌握了dreamwraver 的操作。因此,软件技术可以完成任务的要求。

1.4 软件运行环境

Dreamweaver 是一款简体中文软件,可以在 Win2003/WinXP 中安全运行⑵

第二章 网站制作

2.1 制做网页的步骤

在做网页之前,我确定了做网页的五个步骤。

一、确定网站主题 :网站主题就是要建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。

二、搜集材料 :明确了网站的主题以后,你就要围绕主题开始搜集材料了。材料既可以从图书、报纸、光盘、多媒体上得来,也可以从互联网上搜集,然后把搜集的材料去粗取精,去伪存真,作为自己制作网页的素材。

三、规划网站 :一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。也只有如此制作出来的网页才能有个性、有特色,具有吸引力。

四、选择合适的制作工具 :尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。

五、制作网页 :材料有了,工具也选好了,下面就需要按照规划一步步地把自己的想法变成现实了,这是一个复杂而细致的过程,一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小,就是说在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。所谓先简单后复杂,就是先设计出简单的内容,然后再设计复杂的内容,以便出

①知新文化.HTML 完全手册与速查辞典[M].北京:科学出版社,第49页,2007.② 杨选辉,网页设计与制作教程[M].北京:清华大学出版社,第321页,2009. —3—

现问题时好修改。在制作网页时要多灵活运用模板,这样可以大大提高制作效率。 此外,整体设计完成后我们还要将网页上传测试,使其和其他版本浏览器能够兼容,再者对网站推广宣传,及时的维护更新。

2.2 制作网页的要素

2.2.1 网页的整体布局设计

网页设计作为一种视觉语言,要讲究编排和布局,虽然主页的设计不等同于平面设计,但它们有许多相近之处,应充分加以利用和借鉴。⑴版式设计通过文字图形的空间组合,表达出和谐与美。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处,才能使整个网页生辉。多页面站点页面的编排设计要求把页面之间的有机联系反映出来,特别要处理好页面之间和页面内的秩序与内容的关系。尤其是我们在利用网页效果体现在线营销的意图时,更要注意为了达到最佳的视觉表现效果,而讲究整体布局的合理性,比如一家生产型的企业,它所提供产品的名称、类别、型号、价格、功能介绍应怎样编排才能使浏览者有一个流畅的视觉体验,从而方便他对产品的了解,促成最后的购买。

2.2.2 网页设计中色彩的运用

色彩是艺术表现的要素之一,在网页设计中,根据和谐、均衡和重点突出的原则,将不同的色彩进行组合、搭配来构成美丽的页面。⑵根据色彩对人们心理的影响,合理地加以运用,按照色彩的记忆性原则,一般暖色较冷色的记忆性更强一些。色彩还具有联想与象征的特质,如红色象征血、太阳;蓝色象征大海、天空和水面等。所以如果我们在对一家出售冷食的商店进行虚拟店面的页面设计时,应使用淡雅而沉静的颜色,使人心理上感觉凉爽一些,增强人们的购买心理,使得在线营销得到很好的实践效果。另要注意的是网页的颜色应用虽没有限制,但不能毫无节制地运用多种颜色,一般情况下,先根据总体风格的要求定出一至二种主色调,在已经有了完备的 CIS(企业形象识别系统)的企业进行网页设计时,更应该按照其中的 VI 进行色彩运用。在色彩的运用过程中,还应注意的一个问题是:由于国家和种族、宗教和信仰的不同,以及生活的地理位置、文化修养的差异等,不同的人群对色彩的喜恶程度有着很大的差异。如:儿童喜欢对比强烈、个性鲜明的纯颜色;生活在草原上的人喜欢红色;生活在闹市中的人喜欢淡雅的颜色;生活在“沙漠”中的人喜欢绿色。⑶在设计中要考虑众多因素。

2.2.3 网页形式与内容相统一

要将丰富的意义和多样的形式组织成统一的页面结构,形式语言必须符合页面的内容,体现内容的丰富含义。⑷运用对比与调和、对称与平衡、节奏与韵律以及留白等手段,通过空间、文字、图形之间的相互关系建立整体的均衡状态,产生和谐的美感。如对称原则在

①王诚君,刘振华,郭竑晖,《高中山.Dreamweaver 8 网页设计应用教程[M]》.北京:清华大学出版社,第332页,2007.②李光明,曹蕾,余辉.《中文Dreamweaver 8 网页设计与实训教程[M]》.北京:冶金工业出版社,第13页,2006.③周德华,许铭霖.《新编网页设计教程[M]》.北京:冶金工业出版社,第159页,2006. —4—

页面设计中,它的均衡有时会使页面显得呆板,但如果加入一些富有动感的文字、图案, 或采用夸张的手法来表现内容往往会达到比较好的效果。点、线、面作为视觉语言中的基本元素,要使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。网页设计中点、线、面的运用并不是孤立的,很多时候都需要将它们结合起来,表达完美的设计意境。

2.3 系统各模块功能实现

2.3.1 系统登录模块

1、该功能模块可以记录客户的邮箱地址,交易时还可以向客户发送交易信息,到帐确认等等。

2、登陆后系统会调出客户的记录,按照交易量的不同客户享受的折扣也不同,系统主界面

2.3.2 车辆展示模块⑴

1、该功能模块主要实现对车辆的展示。

2、该功能模块图片、文字介绍,360 度 flash 对各种车辆的展示。

2.3.3 账号管理模块⑵

1、挂失业务在正常工作中肯定会遇到挂失的业务,确定挂失后,数据库会将该账号挂起,等待客户做进一步操作。

2、冻结业务,客户对账号有冻结的权利,在客户没有输入解冻密码之前,任何人都无法动用帐上的资金。

3、流水查询客户可以查询曾经交易过的记录。

4、客户可以自行对其账号密码进行修改,网站管理人员也可以添加或删除账号。

第三章 网站的设计

3.1 主页的要求

对于销售业务系统要求运行的工作环境稳定,易于操作,界面美观大方,对 于前台展示界面要求系统便于维护,安全可靠,对于广大客户所要执行的操作 简单易懂,远程访问速度较快,界面友好美观,有基本的错误提醒功能,远程 操作数据库正确,要求和客户有一定的互动性,在主页上直观的就可以查看浏 览者所想要了解的东西。

3.2 子页的要求

后面的工作就是子页的选择与链接,子页应该丰富多彩,内容充实,浏览 性强,比如说,想要销售一辆汽车,应该有它的全部资料,包括外观、内饰、性能指标、出产地、价

① 赵铭建,赵慧,乔孟丽,康梅娟.《网页设计与制作[M].》东营:中国石油大学出版社,第66页,2007.②赵祖荫,王云翔,胡耀芳.《网页设计与制作教程[M]》.北京:清华大学出版社,第187页,2008. —5—

格等诸多方面,鉴于以上方面,我开始了子页的选择 与链接。 3.3 网页设计技巧

一张完美的主页设计需要积累丰富的知识以及掌握大量的技巧。在这里从框架 和 CSS 样式的运用两方面来介绍网页设计的技巧。⑴

3.3.1 框架的使用

FRAME(框架)是 Web 上经常会看到的页面结构。框架的最常见用途就是导航⑵。 一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框 架。 使用框架具有以下优点:访问者的浏览器不需要为每个页面重新加载与导航相 关的图形;每个框架都具有自己的滚动条如果内容太大,在窗口中显示不下, 因此访问者可以独立滚动这些框架。例如,当框架中的内容页面较长时,如果 导航条位于不同的框架中,那么向下滚动到页面底部的访问者就不需要再滚动 回顶部来使用导航条。 使用框架具有以下缺点:可能难以实现不同框架中各元素的精确图形对齐;对 导航进行测试可能很耗时间。 许多专业 Web 设计人员不喜欢使用框架,并且许多浏览 Web 的人也不喜欢框 架。在大多数情况下,这种反感是因为遇到了那些使用框架效果不佳或不必要 地使用框架的站点例如,每当访问者单击导航按钮时就重新加载导航框架内 容的框架集。如果框架使用得法例如,在允许其他框架的内容发生更改的同 时,使一个框架中的导航控件保持静态,则这些框架对于某些站点可能非常 有用。

3.3.2 CSS 样式的使用

CSS 层叠 样 式 表 是 一 种 制 作 网 页 的 新 技 术 它 的 全 称 是 级 联 样 式 表 即Cascading StyleSheets 的缩写,又称之为风格样式表单。⑶CSS 是在网页制作过程中普遍用到的技术。采用了 CSS 技术控制的网页,设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。

第四章 网页的应用

4.1 网页分为静态网页和动态网页。

4.1.1 优点:

静态网页:1.静态网页的内容相对稳定,因此容易被搜索引擎检索; 动态网页:

1.动态网页以数据库技术为基础,可以大大减少降低网站维护的工作量;

2.采用动态网页技术的网站可以实现更多的功能,如用户注册、用户登录、在线调查、用户管理、顶订单管理等等

①]陈季.《 Flash 基础与实例教程[M]》.北京:北京希望电子出版社,第88页,2005.②丁海祥.《计算机平面设计实训[M].》 北京:高等教育出版社,第54页,2005.③曹雁青,杨聪.《 Photoshop 经典作品赏析[M].》北京:北京海洋智慧图书有限公司,第35页,2002. —6—

4.1.2 缺点: 静态网页:

1.静态网页没有数据库的支持,在网站能制作和维护方面工作量较大,因此 当网站信息量很大时完全依靠静态网页制作方式比较困难; 2.静态网页的交互性交叉,在功能方面有较大的限制。动态网页:1.动态网页中的“?”对搜索引擎检索存在一定的问题,搜索引擎一般不可 能从一个网站的数据库中访问全部网页,或者处于技术方面的考虑,搜索 蜘蛛不去抓取网址中“?”后面的内容,因此采用动态网页的网站在进行 搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。

4.2 我的认识

网页应用很广泛,当我们打开 IE 浏览器的时候,出现在屏幕上的就是一个网页,随着社会的进步,生活节奏地加快,各行各业都开始使用互联网来宣传自己的产品,或者进行其他的活动。网站设计离不开网页,网页像书中的章页,由这些页面构成了整个网站。不管是大企业还是小公司,都有自己的网站,当然网站是离不开网页的。网页中的信息可以给我们带来很多帮助,可以用来学习或者做一些活动的参考。通过对这门课程的学习会收获很多。

结束语

在系统的需求分析过程中,由于不熟悉,产生了很大的困难,通过与指导老师的探讨与沟通,我渐渐地对系统有了一个大体的认识。虽然说在系统需求分析过程中花费了很多时间,但是我认为这是必要的也是必须的。 这次毕业设计中我了解到了很多的知识,这对我今后的学习和生活都将会有很大的帮助。我明白了对于一个完整性的软件设计流程的主要性,在整个网站设计过程中前期需求分析,可行性分析是非常重要的环节,可以说是软件设计的核心,在过去我一直认为详细设计编码才是最重要的,因为再好的需求,编码不成功,软件就无法正常运行。 锻炼了自己发现问题,解决问题的能力。开发过程中遇到一些需求的变化,通过修改设计思路,避免在后期产生更大的错误。再详细设计的每一步都有可能出错,所以会进行非常多的调试工作,只要发现问题就调试解决,这样不仅增强了信心,也很好的锻炼了自己遇到问题不急不躁,耐心解决的能力。

参 考 文 献

〈1〉《信息技术》江苏科学技术出版社 .〈2〉《网页制作》人民邮电出版社.〈3〉 《dreamweaver8 参考手册》2008 年版.,

〈4〉柯林森、刘志忠,CSS 基础教程,人民邮电出版社,2007.9.〈5〉苏昱,样式表中文手册,帮助文档。 〈6〉韩国锋、ASP 柯华坤, 网站开发典型模块与实例精讲, 电子工业出版社,2006.8.

—7—

推荐第7篇:网页教案2

注意:做为一个优秀的网站工作者及维护者应该有很强的逻辑思维能力(即所有的文件都放在什么位置自己心里要有谱,管理维护起来能够得心应手),不能让打开你网站的用户感到“乱的一塌糊涂”。

第一章:站点的管理及文本的应用

(15节,含上机操作课)

一、站点的操作

1、新建站点(a):

新建一个网站,所有资源手动放置在站点所对应的文件夹(或者子文件夹)下面。

2、新建站点(b):

网站已事先做好,新建一个站点是为了维护网站的方便,即修改网页内容的方便。

3、删除站点:站点所对应的主文件夹及里面的资源依然存在。

4、编辑站点:若改变站点所对应的路径,则文件夹里面的资源将丢失。

二、为什么要引入“站点”的概念

1、管理维护的方便

2、解决文件调用时绝对路径(站点根目录)和相对路径(文档)的问题

3、一般情况下,站点与网站的主文件夹是一一对应的,不能出现冗余的情况。

三、建立站点时应注意

1、站点名称、网站对应的主文件夹及主文件夹下所对应的所有资源的名称一律不能用汉字命名

2、本地根文件夹书写时避免发生以下错误: 1) D;\\toyato2) D:/toyato3) D://toyato 4) D: oyato (不要留有空格) 5) D: \\toyato

3、能够正确区分站点名称与本地根文件夹(网站所对应的主文件夹)的异同

4、切忌将所有的资源全部放在根文件夹下,合理利用子文件夹

5、文件夹的层次不要太深,一般合理就行

四、文本字体的输入及属性的设置

1、文本的输入

2、空格的输入

3、标点符号的输入

4、如何将文本类型设置为特殊字体(操作系统中默认没有的字体)

五、将文本设置为动态文本

1、将文本放置在和之间

2、中参数的设置及输入方法

3、中参数的意义 1)behavior:滚动方式

Alternate:左右或者上下交替滚动 Scroll:循环滚动

Slide:滚动一次到达边界后静止

2)bgcolor:滚动区域的背景颜色3)height、width:滚动区域高度及宽度 4)direction:文本的滚动方向

up :向上滚动 down:向下滚动 left:向左滚动 right:向右滚动

5 )onClick(单击)、onDblClick(双击)、

onMouseOut(鼠标移开)、onMouseOver(鼠标经过)时文本的运动状态

例如:onMouseOut=\"this.stop()\" onMouseOver=\"this.start()\" 说明:

this.stop():当前的对象停止运动 this.start():当前的对象开始运动

6)scrollamount:设定活动字幕的滚动速度,单位为像素 7)scrolldelay:设定活动字幕两次之间的延迟时间,单位为毫秒,值大了会有一步一停的效果。

8)loop:循环滚动的次数 若值为-1,无限循环

注意:N(n>=o),循环n次后停止滚动,若n为小数,则自动取整,为去掉小数点后的整数

上 机 实 验

一、实验题目:

1、熟悉站点的常规操作

2、文本的输入及属性设置

二、实验要求:

1、建立一个站点,并将所有文件放在站点对应的文件夹下

2、建立一个网页,向其中输入文本

3、对文本的属性进行设置

4、将文本设置为滚动文本,当鼠标经过文本时停止滚动,鼠标移开文本时开始滚动。

三、实验步骤(请写出在对文本进行相关设置后,“代码视图”中关于文字修饰的相应代码)

推荐第8篇:网页教案1

网页制作---序言(理论课:1节)

一、常用网页制作工具

1、FontPage2000(Office办公软件)

2、Dreamweaver MX 2004

二、美化网页的工具

1、Flash动画(动画制作工具)

2、PhotoShop(图像处理工具)

3、Premiere(非线性视频处理工具,音乐和视频剪辑工具)

三、网页类型

1、静态网页

2、动态网页

四、常用概念

1、网页、网站

2、站点、文件夹

3、客户端、服务器端

五、Dreamweaver MX 2004启动

1、桌面

2、开始按钮

3、我的电脑

六、Dreamweaver MX 2004工作界面

1、标题栏

2、菜单栏

3、常用快捷钮

4、视图类型

5、编辑区

6、面板组

七、建立站点的方法

注意:

1、自己建立网站所用到的文件(网页、图片、声音、动画、视频等)必须放在站点所对应的文件夹下

2、站点与文件夹的名字可相同,也可不同

3、网页的测试方法

实 验

实验题目:

1、熟悉Dreamweaver MX 2004的工作界面

2、建立站点(包含网页、图像、动画及文件夹)

推荐第9篇:网页教案3

第二章:一简单的网页(5节,含上操作课)

一、表格的处理

1、表格的宽度

原则:在任何一台电脑上不应出现水平滚动条(垂直滚动条则允许),760。

2、表格的对齐方式:隐含表格的对齐方式应设为:居中对齐

3、表格边框的粗细:隐含表格(边框的值为0)

4、表格相应单元格“自动扩张”的解决

二、水平线的设置

1、利用标签

Align:对齐方式Center:居中Right: 右对齐left: 左对齐 color:水平线的颜色width:水平线的宽度(即线有多长)

size:水平线的厚度(即线有多粗)noshade:是否有阴影

2、利用Photoshop制作水平线

单的水平线(垂直线)混色水平线(垂直线)

三、文字的输入及编辑

1、空格的输入

2、换行

1) 硬换行: Enter(前后两个段落) 2) 软换行:Shift+ Enter(前后为一个段落)

四、图片与文字混排

1、加载图片

2、文字输入项目符号和编号

3、图片和文字的排列方式

五、波浪线的制作

六、加载日期(不会自动更新,仅是最近保存网页的系统日期)

七、给文字增加滚动条

1、层的应用

2、层与表格的混合应用 注意: 1)先加载表格

2)向表格中插入层,调整层的大小(也就是文本要显示的区域) 3)将层的溢出属性设置为:Auto Position:relative( 相对定位) Left:0px Top:0px

八、利用Photoshop处理图片

1、抓取图片

2、裁切图片

3、在图片上添加文字

4、保存图片

九、设置页面属性

一、实验题目:

制作一个简单的网页

二、实验目的:

熟悉水平线的制作方法、体会表格在网页布局中的作用,当多个元素被加载在页面中时如何排版。

三、实验要求:

1、利用层将文本区域增加滚动条

2、设置水平线

3、对图片和文字进行排版

4、增加系统日期

三、实验步骤(请写出在网页中对文本区域设置滚动条时的操作步骤)

推荐第10篇:网页元素教案

第1章网页设计基础 教学要求

熟练掌握网页设计软件和网页图形制作软件。

掌握Internet、WWW、TCP/IP、域名系统、URL、静态网页与动态网页等与网站相关的基本概念。

了解网站建设过程中的几种常用语言,包括HTML、JavaScript和VBScript脚本语言、Java语言、ASP、ASP.NET、PHP等。 教学重点

掌握Internet、WWW、TCP/IP、域名系统、URL、静态网页与动态网页等与网站相关的基本概念。 教学难点

常用网页制作软件的使用。 课时安排

本章安排4课时。其中,理论讲授2课时,上机实验2课时 教学大纲

一、网页与网站概述 1.Internet 2.WWW 3.网页与网站 4.网页的基本元素

二、常用网页制作软件及辅助设计软件 1.网页制作软件 2.网页辅助设计软件

三、常用网站程序设计语言

四、使用Dreamweaver制作简单的网页 1.Dreamweaver工作界面

2.使用Dreamweaver构建本地站点 3.简单网页制作 主要概念 1.Internet 2.万维网(WWW) 3.文件传输(FTP) 4.电子邮件(E-mail) 5.远程登录(Telnet) 6.调制解调器 7.浏览器 8.TCP/IP 9.IP地址 10.域名

11.超文本传输协议(HTTP) 12.统一资源定位符(URL) 13.静态网页 14.动态网页 15.主页 16.HTML 17.FrontPage 18.Dreamweaver 19.Fireworks 20.Flash 21.Photoshop 22.JavaScript 23.VBScript 24.脚本语言 25.Java 26.ASP 27.ASP.NET 28.PHP 29.JSP 实验

实验一制作一个名为MySite的个人网页 1.熟悉建立本地站点的一般步骤; 2.掌握常用网页制作软件的使用方法; 第2章 HTML网页元素 教学要求

熟练掌握:HTML的基本标签,内容包括元素和标签的概念、标签、头部标签、标题标签、元信息标签、HTML主体标签的使用;文本元素,包括标题标签、引文标签、署名标签、特殊字符、注释标签、文字标签、文字修饰标签、段落标签、预编排标签、居中对齐标签等的使用;超链接,包括路径的概念、内部链接、外部链接、锚点链接、电子邮件链接的使用方法;图片元素,包括图片标签使用,以及标签的alt属性、height、width属性、align属性的设置,和设置图片为超链接的方法;多媒体对象,包括标签、标签、标签的使用。 教学重点

HTML基本标签、文本元素、超链接、图片元素。 教学难点

超链接、图片元素。 课时安排

本章安排20课时。其中,理论讲授10课时,上机实验10课时。 教学大纲

一、HTML的基本标签 1.头部标签 2.标题标签 3.元信息标签 4.HTML主体标签

二、文本元素 1.文字内容 2.文字修饰标签 3.段落排布

三、超链接

1.超链接的建立 2.内部链接 3.外部链接 4.锚点链接 5.电子邮件链接

四、图片元素

1.网页中图片的格式 2.图片的添加与设置 3.图片超链接

五、多媒体对象 1.插入多媒体文件 2.滚动文字 主要概念

1.元素和标签 2.HTML基本标签 3.头部标签 4.标题标签 5.元信息标签 6.HTML主体标签 7.标签

8.引文标签 9.署名标签 10.特殊字符 11.注释标签 12.标签 13.文字修饰标签 14.段落标签

15.、和标签 16.预编排标签

17.居中对齐标签 18.超链接 19.路径的概念 20.内部链接 21.外部链接 22.锚点链接 23.电子邮件链接 24.标签

25.标签的alt属性

26.标签中的height和width属性 27.标签的align属性 28.图片超链接 29.标签 30.标签 31.标签 实验

实验一 HTML的基本标签(2学时) 1.掌握HTML的基本标签。 2.练习制作简单网页。 实验二文本元素(2学时)

1.掌握控制文本元素的标签使用方法。2.练习制作含有文本元素的网页。 实验三超链接应用(2学时)

1.掌握在网页中插入超链接的方法。2.练习在网页中插入超链接。 实验四图片元素(2学时)

1.掌握在网页中插入图片元素的方法。2.练习在网页中插入图片并设置图片属性。 实验五图片元素(2学时)

1.熟悉在网页中插入多媒体对象的方法。2.练习在网页中插入多媒体对象。 第3章 HTML网页布局 教学要求

熟练掌握:表格,包括表格的结构、设置表格边框、大小、背景颜色、背景图像、标题、行的高度、行的对齐方式、单元格宽度、单元格内容的对齐方式、设置单元格的背景颜色、设置单元格的背景图像、合并单元格、利用表格进行网页布局;框架,包括框架的基本概念、框架结构、窗口框架的分割方式、窗口名称、框架边框的显示状态、指定在框架中显示的网页、控制框架滚动条属性、设置框架的边距、设置框架中的超链接、利用框架进行网页布局;水平线和列表,包括无序列表、有序列表、嵌套列表和自定义列表。

掌握:使用表格布局网页、使用框架布局网页、水平线标签和列表的使用。

了解:设置表格分隔线显示状态、表格边框的颜色、表格的位置、表格边框与内容的间距、行的内边框颜色、行的背景颜色、单元格的边框颜色、设置框架边框的宽度、设置框架边框的颜色、浮动框架等。 教学重点

使用表格布局网页、表格行和单元格的属性设置、使用框架布局网页、框架集和框架的属性设置。 教学难点

使用表格布局网页、使用框架布局网页。 课时安排

本章安排12课时。其中,理论讲授6课时,上机实验6课时。 教学大纲

一、表格

1.表格的基本概念和结构 2.表格的基本属性 3.表格的行属性 4.表格的单元格属性 5.利用表格进行网页布局

二、框架

1.框架的基本概念 2.设置框架集的属性 3.设置框架的属性 4.浮动框架

5.设置框架中的超链接 6.利用框架进行网页布局

三、水平线和列表 1.水平线 2.列表 主要概念 1.表格

2.表格的结构 3.设置表格边框

4.设置分隔线显示状态 5.设置表格边框的颜色 6.设置表格的大小 7.设置表格的背景颜色 8.设置表格背景图像 9.设置表格的位置

10.设置表格边框与内容的间距 11.设置表格的标题 12.设置行的高度 13.设置行的对齐方式 14.设置行的内边框颜色 15.设置行的背景颜色 16.和 17.设置单元格宽度

18.设置单元格内容的对齐方式 19.设置单元格的边框颜色 20.设置单元格的背景颜色 21.设置单元格的背景图像 22.合并单元格

23.利用表格进行网页布局 24.框架的基本概念 25.框架结构

26.窗口框架的分割方式 27.左右分割 28.上下分割 29.嵌套分割

30.设置框架边框的宽度 31.设置框架边框的颜色 32.设置框架边框的显示状态 33.指定在框架中显示的网页 34.定义子窗口名称 35.控制框架滚动条属性

36.设置是否允许调整框架的大小 37.设置框架的边距 38.浮动框架

39.设置框架中的超链接 40.利用框架进行网页布局 41.水平线 42.列表 43.无序列表 44.有序列表 45.嵌套列表 46.自定义列表 实验

实验一表格的应用(2学时) 1.掌握表格的使用方法。 2.练习用表格对网页布局。 实验二框架的应用(2学时) 1.掌握框架的使用方法。 2.练习制作框架网页。

实验三水平线和列表(2学时)

1.掌握在网页中插入水平线和列表的方法。2.练习在网页中插入水平线和列表。 第4章 HTML中的表单 教学要求

熟练掌握文本框、下拉列表框、密码域、图像域、单选按钮、复选框、隐藏域等常用表单控件的使用方法,能够使用这些表单控件制作表单实例。 掌握表单的结构和标签的用法。 教学重点

文本框、下拉列表框、密码域、图像域、单选按钮、复选框、隐藏域等常用表单控件的使用方法。 教学难点

使用表单控件制作表单实例。 课时安排

本章安排6课时。其中,理论讲授4课时,上机实验2课时 教学大纲

一、表单概述 1.表单的结构 2.标签

二、表单控件 1.文本域控件 2.按钮控件

3.单选按钮和复选框控件 4.列表控件 5.隐藏域 6.图像域控件 7.文本域

三、表单综合应用实例 主要概念 1.表单

2.标签 3.单行文本框 4.多行文本框 5.密码域 6.普通按钮 7.提交按钮 8.重置按钮 9.单选按钮 10.复选框 11.下拉列表框 12.列表框 13.隐藏域 14.图像域 15.文件域 实验

实验一表单控件操作练习

1.熟悉表单在html中的结构; 2.掌握常用表单控件的使用; 3.掌握表单实例制作方法。 第5章 CSS基础应用 教学要求

理解CSS的概念以及与HTML标签元素的关系,了解网站中应用CSS的意义;熟练掌握CSS基本语法格式、CSS基本样式的定义以及如何在网页中引入CSS。 教学重点

CSS的概念以及与HTML标签元素的关系,如何在网页中引入CSS。 教学难点

CSS基本语法格式和在网页中引入CSS的几种方法的区别。 课时安排

本章安排5课时。其中,理论讲授3课时,上机实验2课时 教学大纲

一、CSS简介 1.CSS语法 2.层叠性 3.注释

4.在网页中插入CSS

二、设置文本字体 1.字体系列 2.字体大小 3.字体加粗 4.设置斜体 5.字体变形

6.设置字体的多个属性

三、设置文本样式 1.文本段落缩进 2.文本对齐方式 3.文本字间距 4.文本修饰效果 5.行间距

四、设置颜色和背景 1.颜色 2.背景颜色 3.背景图像

五、设置边框 1.边框样式 2.边框宽度 3.边框颜色 主要概念 1.CSS 2.属性、选择符和属性值

3.链接的外部样式表、内部样式表、嵌入样式表和导入的样式表 4.层叠性

5.文本样式、文本修饰 实验

实验 CSS基础应用

1.掌握CSS基本语法结构;

2.掌握如何在网页中引入样式表;

3.熟悉对文本字体和文本样式进行设置的若干属性。 第6章 CSS高级应用 教学要求

熟练掌握CSS中列表的控制、CSS的定位和CSS特效滤镜等高级应用的使用方法,从而对使用CSS实现丰富的网页效果有深入的认识和体会,真正理解CSS引入对网页设计与制作带来的深刻变化。 教学重点

CSS定位和CSS滤镜的使用 教学难点

CSS的定位方式和定位位置 课时安排

本章安排4课时。其中,理论讲授2课时,上机实验2课时 教学大纲

一、列表 1.列表样式 2.列表图像 3.列表位置

二、定位 1.定位方式 2.定位位置 3.叠放次序

三、滤镜 1.Alpha 2.Blur 3.Chroma 4.Shadow和DropShadow 5.FlipH和FlipV 6.Glow属性 主要概念

CSS定位方式、叠放次序和CSS滤镜 实验

实验

CSS高级应用

1.掌握利用CSS控制列表的样式;

2.掌握利用CSS控制网页元素的定位位置和叠放次序; 3.熟悉利用CSS实现不同网页元素的多种滤镜效果。。 第7章 JavaScript基础知识 教学要求

熟练掌握JavaScript语言中变量的定义、命名规则和使用方法,表达式和运算符,选择语句、循环语句、转向语句等流程控制语句;掌握函数的概念、函数的创建以及如何去调用函数。 教学重点

变量的定义、命名规则和使用方法,表达式和运算符,选择语句、循环语句、转向语句等流程控制语句 教学难点

函数的概念、函数的创建以及如何去调用函数 课时安排

本章安排5课时。其中,理论讲授3课时,上机实验2课时 教学大纲

一、JavaScript概述 1.JavaScript主要特点

2. JavaScript运行和编译环境 3. JavaScript代码格式

二、JavaScript语言基础 1.数据类型及转换方法 2.常量和变量 3.运算符和表达式

三、JavaScript控制语句 1.选择语句 2.循环语句 3.转向语句

四、JavaScript函数 1.函数的定义与函数的调用 2.数据类型函数 3.内置函数 主要概念

JavaScript、常量、变量、运算符、表达式、函数、语句 实验

实验 JavaScript语言基础

1.掌握JavaScript语言的运行和编译环境用法; 2.掌握JavaScript变量、运算符、表达式的用法; 3.掌握JavaScript语句的用法和函数的用法。 第8章 JavaScript的事件和对象 教学要求

掌握对象的基本概念,熟练掌握对象的属性的访问和使用对象的方法;掌握事件的使用方法。 教学重点

对象的属性的访问和使用方法,事件的使用方法。 教学难点

对象的属性的访问和使用方法,事件的使用方法。 课时安排

本章安排4课时。其中,理论讲授2课时,上机实验2课时 教学大纲

一、事件

1.事件与处理器 2.事件捆绑 3.鼠标事件 4.键盘事件 5.浏览器事件

二、JavaScript对象 1.对象的概念 2.内置对象 3.表单对象 主要概念

对象、对象属性、事件、事件捆绑 实验

实验

JavaScript对象和事件的使用 1.掌握JavaScript对象的使用方法; 2.掌握JavaScript事件的使用方法; 第9章网站制作综合实例 教学要求

熟练掌握:主页设计的方法、步骤,能够使用Fireworks、Dreamweaver软件进行主页设计,掌握CSS样式的应用方法以及网页中添加Javascript特效的方法。 掌握:网站测试与发布的方法。 了解:网站规划的方法。 教学重点

网站主页设计的方法、步骤,使用Fireworks、Dreamweaver软件进行主页设计, CSS样式的应用方法以及网页中添加Javascript特效的方法。 教学难点

Fireworks对图片切片以及Dreamweaver制作主页方法。 课时安排

本章安排6课时。其中,理论讲授4课时,上机实验2课时 教学大纲

一、网站规划 1.网站目标 2.内容组织 3.链接结构 4.网站风格 5.版面布局

二、主页设计

1.制作主页图片稿

2.利用Fireworks对图片切片 3.利用Dreamweaver制作主页 4.插入图片

三、编辑子页面

四、设置超链接

五、CSS样式的应用

六、添加JavaScript特效

七、网站检查与发布 1.测试检查 2.网站发布 实验

实验一制作个人主页

1.熟悉主页的制作过程;

2.掌握常用网页制作软件的使用方法; 3.了解网页发布过程。

第11篇:网页制作教案

第一节 制作简单的网页

(一)教学对象分析

学生在学习本内容前,已经学习了利用Word制作简单的网页,并且初步掌握了制作网页的一般流程及基本操作,具有进一步学习的能力。

(二)教学目标

1、了解Frontpage的界面组成及基本功能。

2、掌握在Frontpage中编辑文字、插入图像的方法。

3、掌握在Frontpage中设置电子邮件超链接的方法。

4、培养学生在获取信息的能力,使学生学会利用计算机和网络搜集与准备网页素材。

5、培养学生的知识迁移能力。

(三)教学重点

利用Frontpage制作简单的网页

(四)教学方法和手段

教学方法:以学生自学为主,教师辅导为辅。 教学手段:多媒体网络教学。

(五)教学过程

1、创设情境,导入新课:

展示几幅优秀的网页作品,激发学生学习专业网页制作软件的愿望。Frontpager 功能主要体现在:

1、网页编辑功能。

2、网站管理功能。

一、启动Frontpage i.ii.启动Frontpage Frontpage窗口组成

二、用Frontpage制作网页

1、输入文字

2、设置字体、字号

3、插入剪贴画

4、创建电子邮件超链接

三、保存网页

四、预览网页 反馈操作情况情况

第二节 插入表格

(一)教学目标

了解Frontpage中使用表格的作用。 掌握在Frontpage中插入表格的方法。 能熟练在表格中输入文字、插入图片。

(二)教学重点

在Frontpage 中利用表格组织网页结构。

(三)教学过程

导入新课,表格是网页中经常使用的一种形式,表格里不仅可以存放文字、图像等数据,还可以作为组织网页内容的框架,使网页整齐、美观。

新课讲授:

1、插入空表格

2、在表格中插入图片

3、设置图片属性

4、输入文字

5、设置表格属性

6、插入表格标题

7、保存网页、预览网页 本课总结

第三节 创建表单

(一)教学目标 了解表单的功能。

掌握在Frontpage中创建表单的方法。 掌握在Frontpage中插入表单域的方法。

(二)教学重点 表单网页的结果处理。

(三)教学过程

复习

1、如何制作图文并茂的网页?

2、表格在网页中的主要作用?

3、在网页中插入表格有几种方法? 导入新课、创设情境

展示几幅含有表单域的网页作品,例如调查表、申请表、提问:表单与表格的异同点? 讲授新课

一、利用表单网页向导创建表单

1、建立表单

2、修改表单

3、处理表单结果

4、利用表单确认模板制作表单确认页面

二、制作网页背景 反馈操作情况 本课总结

课后任务:利用菜单栏中的命令在网页中插入表单域。

第四节 利用框架制作首页

(一)教学目标 了解框架的功能

掌握在Frontpage中使用框架的方法。 掌握在Frontpage中建立超链接的方法。

(二)教学重点 利用框架制作首页

(三)教学过程

复习:

1、如何制作表单页?

2、表单的主要作用?

导入新课、创设情境:展示模范的网页作品,激发学生学习的兴趣。 讲授新课:

一、利用框架制作首页

1、新建框架网页

2、设置 右框中的初始网页

3、保存网页

4、建立左框中的网页

二、建立超链接

二、制作网页背景 保存网页、游览网页 反馈操作情况 本课总结

课后任务:练习其他几种超链接方式。宛善网页。

第五节 站点管理

(一)教学目标 了解站点的基本知识。

掌握利用Frontpage建立站点的方法。 掌握向站点中导入网页的方法。

(二)教学重点 导入超链接

(三)教学过程 复习:

导入新课、创设情境:Frontpage不仅具有强大的网页编辑功能,而且具有强大的管理站点的功能。 讲授新课:

一、建立站点

二、导入网页

三、导入超链接 本课总结

第六节 发布站点

(一)教学目标 了解发布站点的一般流程

(二)教学重点

把站点发布到因特网上是本节的重点。

(三)教学过程 复习:

导入新课、创设情境:展示因特网上的优秀个人网站。 讲授新课:

一、把站点发布到本机

二、测试网站的表单功能

三、把网站发布到因特网上(介绍) 本课总结

第12篇:网页制作教案

网页制作与设计教案

第一讲 网页设计概述 ....................................................................................................................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

第一讲 网页设计概述

【教学内容】

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

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

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

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

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

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的使用

- 3

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

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

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标准中的文本、图片与超级链接标志 【教学目的】

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

- 5

......,强调文字,通常用斜体。

......,特别强调的文字,通常用黑体。

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

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

......,使文字大小相对于前面的文字减小一级。 ......,使文字成为前一个字符的上标。 ......,使文字成为前一个字符的下标。 ......,使文字显示为闪烁效果。 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 列表条目2 ......

3、定义列表 列表条目1 条目1的说明 列表条目2 条目2的说明 ……

- 7

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

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

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

【教学内容】

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

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

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

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

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

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

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

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

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

2.5 插入表格

2.5.1 在网页中插入表格

表格的基本构成元素:表头,单元格,列,行 第一行第一列 第一行第二列 第二行第一列 第二行第二列

- 9

FrameSpacing=\"2“

BorderColor=\"#008000“ >

2.7.3 子窗口属性设置

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

(3)目录和标题,分为左上、左下、右三部分

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

很抱歉,馈下使用的浏览器不支援框架功能,请转用新的浏览器。

第13篇:《网页制作》教案

《信息技术》第三册

新课程标准教案

制作第一个网页(网页诞生了)

[教学目的]

1.通过浏览几个精彩网页,激发学生制作网页的学习兴趣。

2.熟练掌握启动Frontpage 2000,熟悉Frontpage2000文件菜单和常用工具的

使用方法,新建“只有一个网页的站点”的操作步骤,从中认识Frontpage2000的主界面,理解创建网站的意义.

3.网页的基本步骤,了解创建网页的过程学会在网页中输入文字、编辑文字、插入图片的方法,培养学生搜集、处理信息的能力。

4.作网页,培养学生学习制作网页的兴趣

[教学重点]

创建网站的过程,制作、编辑网页的基本方法。Frontpage2000的窗口组成,

[教学难点]

保存网页文件的方法,创建网站的意义

[教法设计]

演示、练习、讲授、启发引导、任务驱动

[导入新课]

在因特网上,我们可以用IE浏览器获取万维网中各种有价值的信息。同时看到许多

组织机构甚至个人都在万维网上拥有自己的网页。

让学生打开“网上邻居”的“网页”文件夹,浏览从网上下载的几个精彩网页。

你们有没有想过自己制作一个网页呢?把自己想要表述的内容,

自己喜欢的作文、图片通过网页展示给同学或更多的朋友观看、欣赏、浏览。

[讲授新课]

制作第一个网页

网页制作不是一件简单的事情,而是按一定的顺序一步步进行的。请同学们回忆制作网页前应作哪些准备工作?

现在开始创建网页.我们选用功能强大,操作简单的工具Frontpage 2000来制作。

一.启动Frontpage 2000

进入到Frontpage 2000界面后,比比看,这个软件与以前学过的Word 2000与Excel2000有什么相同与不同之处呢? (展示两软件界面的图片)

相同之处是:窗口相似,都有常见的标题栏、菜单栏和工具栏。不同的是:多了一个如教材的图2—2—2所示:1.编辑模式标签卡2.视图框。

二.建立只有一个网页的站点

为什么不新建一个网页,而要新建一个站点呢?

新建FrontPage 2000中“个人站点”来启发引导.

一般来讲,网页文件总是存放在特定的站点中便于管理。因此,第一次制作网页之前需建立一个存放网页文件的专用站点。

教材P76试试看

对于初学者,通常选用“只有一个网页的站点”,今后根据需要可以向网站中添加新的网页。

看书P76页图2-2-6,仔细观察文件夹列表中唯一的一个网页名称是什么?(它是什么文件?)

index.htm被命名为主页,即进入网站时看到的第一个网页。

三.在主页面编辑模式下插入文字,插入图片。

我们知道文字,图片,动画是网页组成的基本元素。

教案设计:陡埠中学

彭荣兵

《信息技术》第三册

新课程标准教案

今天我们就在空白的主页中加入文字和图片,制作一个简单的网页。

打开主页文件,在右边主页页面编辑窗,中完成如下任务:

1.将准备好的介绍班集体的文字(主题和正文)插入(复制,粘贴)到页面中。

2.从计算机E盘里找到存储的“集体照”图片插入到网页中。

复习WORD中学过的文字编辑、排版,插入图片的方法。

问题:

学生插入图片后将其移动到合适的位置及调整图片大小.

1.老师引导,讲解;2.学生演示;3.学生相互讨论。

四.预览网页

编辑工作完成后就能观看制作的效果了.可以保存之后在IB浏览器中观看,也可以直接通过预览模式标签卡预览、浏览.请同学们参考教材的图示切换“预览”标签卡,预览制作的网页。

评选出网页制作的“速度奖”、“设计奖”、“美观奖”。

五、保存制作的网页

网页制作完成,需要将它保存下来.请同学们按照教材P78页上的操作步骤将网页文件分别存放在images和_private文件夹中。

今天用网页制作工具Frontpage 2000创建了一个只有一个网页的站点,在主页中加入了文字和图片,制作了一个简单的网页.这只是网页制作的第一步,精彩的网页还要不断地加工、美化和修饰,例如:配上美丽的背景,加上好看的花边和配上动听的音乐,使之变得更完美。

本着以学生为主体的原则,我在本课的教学中设计先让学生浏览网上下载的精彩网页,借以激发他们学习制作网页的兴趣,然后从启动Frontpage 2000开始,直至网页制作完成,老师只是一步步的启发引导,起着主导的作用,大部分时间都是学生自己动手动脑操作,整堂课课堂气氛活跃,收到了较好的教学效果。

教案设计:陡埠中学

彭荣兵

第14篇:《表单网页》教案

《表单网页》教案

【教学目标】

1.知识与技能

⑴了解表单网页的概念和作用; ⑵掌握表单网页的制作方法。 2.过程与方法

通过阅读课本、观看演示回忆、感受表单网页的作用;在递进的操作任务中掌握表单网页制作和美化的方法。 3.情感态度与价值观

体验表单网页在网站中的重要作用,激发他们对信息技术的求知欲,形成积极主动地学习和使用信息技术、参与信息活动的态度。

【重点难点】

表单网页的制作方法。

【课时安排】 1课时

【教学准备】

网络教室、多媒体教学软件。 【教学过程】

一、新课引入(5分钟)

大家有QQ号或者E-mail邮箱吗? 在申请QQ和E-mail时,我们要输入一些个人信息?这类采集用户信息的网页都被称为表单网单。(阅读课本P119)

展示一个简单的园艺网站来介绍家乡的盆景艺术,如皋是全国有名的盆景园艺之乡,每天有许多人通过网络了解如皋的盆景艺术,怎样才能知道他们对我们网站的意见或建议呢? (设计一个留言板网页来采集他们的意见。)

二、过程

(一)认识表单网页(8分钟)

表单网页是一种结构化的网页,是网站中提供浏览者发表个人意见、提供反馈信息的互动交流的页面。

:用于接收用户输入的单行文本信息,如姓名、地址等。 滚动文本框:可以输入多行信息的文本框,如意见、建议等。

单选按钮:提供两个或多个互斥选项,用户只能选中其中的一项。如:性别。 :提供一个或一组选项,用户可选择其中的一个或多个选项。 下拉菜单:允许用户从下拉菜单列表中选择其中一项。

按钮:FrontPage 2000中的按钮表单域有三种类型,即“普通”、“提交”和“重置”。“提交”用于表单提交;“重置”用于清除表单所填内容,回到初始状态;“普通”用于执行其它客户的操作。

(二)制作表单网页(15分钟)

表单网页制作方法步骤:依次单击“插入” →“表单”,弹出下级菜单。 实践:制作一个“留言”功能的表单网页。

活动1 建立表单(根据提供的效果样张,完善表单网页) 提示:

①在“姓名”后插入一个“单行文本框”; ②在“性别”后的各选项前分别插入“单选按钮”;

③在“您的兴趣爱好”后的各个选项前分别插入“复选框”,可以复制; ④在“您的职业”,后插入一个“下拉菜单”。添加“工程师”和“公务员”和“其他”等菜单内容(单击“添加”按钮,添加“工程师”菜单项,重复操作);

⑤在“您对我们的建议或要求”后插入“滚动文本框”,调整其至合适大小; ⑥修改默认的按钮名称(双击按钮);

(三)表单网页的美化(5分钟)

活动2 在最后一行表格中插入一个名为“yy.swf”的Flash动画? 提示:单击“插入”菜单中的“高级”“插件”。

思考:插入一幅GIF动画图片(.gif)和一个FLASH动画(.swf)有何不同? 活动3 为当前的表单网页添加一个名为“song.mid”的背景音乐。 提示:在网页中的任意位置右击鼠标,选择“网页属性”命令(或单击“文件”菜单,选择“属性”命令),在“常规”选项卡中操作?

保存编辑的表单网页并利用平台提交。 作品展示:(5分钟) 小结:PPT(3分钟)

二、【检测与评价】(4分钟)

1.通常可以使用( )来收集访问者的意见,统计调查访问信息。 A.表格 B.框架 C.表单 D.单元格

2.利用表单制作留言板时,若要采集访问者的性别,可以选用的表单字段有( )。

A.复选框 B.单选按钮 C.下拉菜单 D.单行文本框

3.利用表单中的字段,我们可以设计功能强大的交互式在线考试试卷。以下( )字段可以用来采集不定项选择题的答案。

A.单行文本框 B.单选按钮 C.复选框 D.下拉菜单 4.插入FLASH动画时,使用“插入”菜单下的( )命令。 A.图片 B.组件 C.表单 D.高级→插件 5.若要为当前网页设置背景音乐或背景图片,应下面的( )属性中进行设置。

A.图片属性 B.网页属性 C.表格属性 D.单元格属性

【课后延伸】

表单网页提交的数据提交到哪儿去了呢?请同学们课后阅读课本P120的相关内容,也可以利用因特网搜索去解开这个奥秘,在学习本册第七章第三节时,我们会为大家解开这个奥秘。

第15篇:计算机网页教案

五年级上册计算机教案(一课时) 学习目标:

1、了解Frontpage2003的主要作用,了解网页的初步知识,对网页制作页面工具的作用具有初步了解;

2、学会将搜集的图片文本素材存放相关文件夹,并了解设计网页的基本理念,学会做网页制作规划图;

3、学会根据规划创建网站,能够根据规划设计简单首页并进行保存。

德育目标:

通过学习网页制作理解网络设计工作者的辛苦劳动,在设计规划时学生可以了解到做事前需要提前准备的重要性。

新课讲授:

1、导入:多媒体展示部分设计新颖的网页页面,点击超级链接转换不同页面带起学生的兴趣,提问学生对网页的个人了解,之后引入网页制作的概念,进入主题。

2、新授:

(1)多媒体展示网页制作的相关知识,并由学生讨论设计网页需要哪些内容。总结并补充学生回答,引导学生打开Frontpage2003,介绍网页制作页面相关工具,并由学生自主操作试验它们的作用;

(2)展示多媒体,使学生了解需要准备各类素材并存入相应文件夹。由学生搜集并存入个人设置文件夹内,通过自己构思的设计形式绘制网页设计规划图,并由学生分享他们的规划;

(3)讲解如何创建一个网站,指导学生创建网站,并个人保存相应路径。之后引导学生设计自我规划的特色首页,进行简单自我设计后保存页面,师生共同评价部分首页设计。

3、总结作业: 总结本课知识点,提问学生本课主要内容检查目标达成情况。布置学生准备其他页面资料,并在其他渠道了解网页设计方面知识。

反思总结:

第16篇:《框架网页》教案

《框架网页》教案

八年级信息技术备课组

组长签名

授课人

教学目的:学习框架网页的制作方法,掌握框架网页的构成。 教学重点:框架网页的制作, 框架网页的属性。 教学时间:2课时 教学步骤: 一)、框架页的基本组成

框架页是一种特殊格式的网页,主要由边框、网页、滚动条组成。在框架页中,每个框架都有一个网页相连接。当打开框架页时,则同时载入每个框架所相连的网页文件。

在框架页中显示的是三个独立的网页组成的(实际下载了四个网页,还包括框架页本身这个网页)。主体框一般用来显示正文内容的。 二)、创建框架页

FrontPage 2000提供了10个框架网页向导帮助我们创建框架页。其操作步骤如下: (1)打开【文件】菜单,选择【新建】菜单项,在子菜单中选择【网页】菜单项,出现新建对话框。

(2)在对话框中单击【框架网页】选项卡。

(3)在选项卡中选择【目录】,此时在【预览】栏中会显示被选中的框架结构图,并在上方显示说明情况。

(4)单击【确定】按钮后,出现框架结构图。

(5)新创建的框架结构共有2个网页窗口,其中一个在左边,另一个在右边。这时单击【新建网页】按钮后,我们可以在当前框架网页中输入文字、图片等内容了。(如果这时单击【设置初始网页】按钮后,将弹出一个“创建超链接”的对话框,可以为所在的框架超链接到指定的网页上去。)

(6)框架的保存:单击“

”工具按钮,出现【另存为】对话框。

 保存左边框的网页文件。在对话框右面的框架示意图中,单击左边框后为蓝色,表示左边框中的网页正准备保存。在“URL”中输入文件名“in1”,单击【确定】按钮后,此时左边框的网页文件被保存起来。

 保存右边框的网页文件。紧接着,在对话框的框架示意图中,右边框显示为蓝色。在“URL”中输入文件名“in2”,单击【确定】按钮后,右边框的网页文件也被保存起来。  保存框架本身网页。在对话框中整个框架示意图的边框为蓝色,在“URL”中输入文件名“index.htm”,单击【确定】按钮后,此时保存的是整个框架页文件。 三)、框架及框架页的属性

1、设置框架的属性

框架有很多属性,例如框架的名称、宽度、高度、边距、滚动条、可调整性、间距等。以框架页为例说明,其具体操作方法如下:

单击要设置属性的框架,然后单击【框架】菜单,再单击【框架属性】菜单项,出现对话框。可以在此对话框中修改框架的属性了。

2、框架页的属性

以上是设置每个框架的属性,而修改整个框架页的属性,其具体操作如下: 在【框架属性】对话框中,单击【框架网页】按钮,会出现“网页属性”对话框。

第周八年级信息技术教案 在这个对话框中的“框架”选项卡中只有两项:

 “框架间距”:指框架之间的边框的宽度,默认值为2。

如果框架不要显示出边框时,可单击“显示边框”前面的单选框,取消“√”。 四)、框架页的编辑

在框架页中,当要拆分某一框架时,单击框架→拆分框架→选择并确定。当要删除某一框架时,单击框架→删除框架→选择并确定。 五)、框架页的超链接

在框架页中,当单击左边的超链接时,在右边框中显示该超链接网页的内容。下面我们将以框架页为例,说明怎样实现框架网页之间的超链接。其操作步骤如下:

(1)在左边的框架中选择要设置超链接的“ (2)单击“选择“jbxx.htm”。

(3)在对话框右下角“目标框架”栏,单击“标设置”栏中就相应显示所选定的区域名称。其中:

 网页默认值(main):超链接的网页将显示在右边框(即“main主体”)。  相同框架:在左边框单击某个超链接时,其链接网页也将显示在左边框。  整页:单击某个超链接时,只显示所链接的网页,原来框架不再显示。  新建窗口:单击某超链接时,所链接的网页将显示在新打开的浏览器中。  父框架:单击某个超链接时,将返回上一级的框架。 六)、上机操作

练习设计框架网页

”图片(或文字)。

”超链接工具按钮,出现【编辑超链接】对话框。这时在对话框的文件列表中

”按钮,出现一个对话框。

在对话框中,单击框架示意图中不同的区域,也可以单击右边列表框的选项,在对话框的“目

课堂小结

板书设计 :

教学反思

周八年级信息技术教案

第17篇:网页制作教案

HTML第一节课

1.本课程主要目标

使用DIV+CSS布局网页

使用CSS美化网页

制作精美的商业网站 2.整体课程内容

3.本课程授课目标

3.1了解HTML整体课程 3.2 会使用HTML标签

3.3 了解并会使用 CSS 层叠样式表 3.4 div+CSS 做网页 3.5完成一个完整的网页 4.本章目标

会使用HTML的基本结构创建网页 使用文本相关标签排版文本信息 使用图像相关标签实现图文并茂的页面 会使用超链接相关标签实现页面间的跳转 5.本章重点

本阶段的重点是让学员熟悉HTML的基本结构、HTML中的一些基本标记以及标记的属性,以及HTML中的链接。 6.本章难点

HTML基本标记及其属性 7.授课思路

以提问和演示的方式 边讲边演示

7.课程知识点讲解 7.1什么是HTML

超文本标记语言,是英文Hyper Text Markup Language的缩写 什么是超文本

就是指页面内可以包含图形、动画、声音、表格、链接等非文字元素。

什么是标记

就是我们要学的标签 也就是说标记语言是由一套标签组成的

HTML发展史

7.2HTML基本结构

7.3用记事本创建网页的步骤

答:

1、打开记事本

2、输入HTML代码

3、保存为*.html文件,注意格式问题

4、打开网页预览效果 8.标签

8.1 标题标签

H1 H2 H3 H4 H5 H6 由大到小 标题内容

讲课思路:先演示h1的效果,在边演示边讲解h1-h6的变化,以及他们都是加粗字体

提问:有没有h7,然后演示, 结果:和正常字体一样

8.2段落标签

p 格式

段落内容

讲课思路:先演示两段。

提问 : 与正常见到的段落有什么不同

答;首行没有缩进,没有换行 可以先用空格代替 缩进学完样式后就会使用 接下来讲换行标签

8.3换行标签

代表换行

第一个但标签 书写方式 与双标签的区别 个数 及 /的位置

讲完换行标签后与段落标签对比,告诉他们根据空隙的大小区别什么是段落(间隙大)、什么是换行(间隙小)

8.4水平线标签

水平线标签

第二个单标签 是一条水平线

先演示 然后告诉他们可以改颜色---引出属性

解释什么是属性 就是用来修饰标签的 属于标签的性质 要写在标签里 书写写法 属性名=\"具体值\" 并演示给他们

8.5 加粗、斜体标签

加粗的字 斜体的字

挑选部分字体演示

8.6 特殊符号

效果:不会显示在页面上 作用:1网页的作者 2注释部分代码 试用于找错的时候

空格   >>

首先敲一个空格 提问:是否有效果 再敲多个空格 提问;是否有效果 展示并引出空格特殊符号 \" ©

先敲一个

问他们是否会显示在页面 然后再说出替代的 特殊符号

最后提问 有没有注意过版权符号 提示他们网站的最下面版权部分 最后演示写法

8.7 图片标签 思路---------标签与标签的属性----可以回顾 已经学习的标签 与 a标签的区别 双标签 单标签 标签属性

\"替换图片显示的文字\"

图像首先说明是单标签 然后介绍第一个属性 src 路径介绍:相对路径 上一级 ../ 上上级 ../../ 下一级 同级名/ 绝对路径

file:///C:/Users/Administrator/Desktop/Chapter01/demo.html 第二个属性:alt 演示图片不显示的情况 第三个属性:title 书写并将鼠标放到图片,查看效果

第四个属性:width 单独设置宽度时的效果 高度成比例缩放

第五个属性:height 单独设置高度时的效果 宽度成比例缩放

如果想要具体的大小 则要同时设置宽和高

8.8 链接标签

先写一对 标签 然后再在里面写上href属性 告诉他们与图片的src属性相似,都是地址路径 再告诉他们href=\"\" 里面可以是别的网页 也可以是网址、邮箱地址 没有具体的可以写#表示空连接

演示相关链接 其中要注意,告诉他们没有在标签中间写内容 网页是不会显示任何内容的并演示

target=\"在哪里打开新链接(_self:本身窗口 _blank:新窗口打开链接)”>文字 图片

讲解target 属性:是跳转位置,是本页面还是新的页面 并演示给他们

锚链接

结合之前的超链接 锚点就是大船停泊时抛出的锚,只有锚固定了,船舶才能停住 同理

只有设置锚点了超链接才能找到指定位置

锚点的写法 也是先写 只不过这次的属性是 name=\"\" 就是给你的锚点起个名字

而且这时超链接的href=\"\" 里面要写成#+你起的名字 最后演示效果

第18篇:《网页制作》教案

《网页制作》教案

潘有寅

一、说教材:

(一)教材分析:现在网络快速发展,广大的学生接触,使用INTERNET的机会也大大增加,学生在使用网络 获取信息时,更多的是通过浏览网页这一方式,我认为上好这节课是非常必要的,这对学生进一步认识、使用INTERNET更有益处,同时通过网页制作这一过程也利于学生对计算机常用素材的类型有更深入的了解,在一定程度上也起着培养学生运用综合知识能力作用,所以我认为这节课是非常值得我们去研究上好的 ,考虑这节课的内容及教法、学法的需要,我把这节分为两课时,第一时:在引导下学生学,练 DREAMWEAVER制作网页的基本方法;第二课:让学生自己构思创意一个与自身相关的内容丰富的,页面美观的网页。

(二)教学目标:根据对教材的分析及学生实际情况,制定如下的教学目标:

(1)知识目标:

1、有关建设第一个网页的理念思想构成。

2、熟悉用DREAMWEAVER制作网页的基本方法

3、超级链接是网页实现互相链接的基本方法

(2)能力目标:

1、培养学生的自学能力

2、创意构思能力

3、能制作出具有多重链接、多种素材、内容丰富的网页。

(3)情感目标:

1、教育学生正确认识和理解信息技术相关文化,伦理和社会问题,负责地使用信息技术。

(三)教学的重、难点:

根据对教材的分析及网页制作过程中的 实际情况,我认为要出制作内容丰富的网页,关键是要知道为什么要做网页,明确你做网页的目标。从培养学生运用信息技术综合能力这点出发,我认为如何引导学生进行思考定位、以及通过网页的制作这过程使学生对互联网有更深入的了解和运用,应该做为本节的难点内容。

二、说教法:

我采用了主体式教学模式,首先我创设了一个学习情景,让学生在情景中积极地完成任务,在任务完成阶段,我是一名帮助者、引导者,教学时注意观察学生,及时总结共性问题,个性问题留给小组学生讨论,不断激发学生的学习兴趣,以达到最佳教学效果。教学方式上①我采用了“任务驱动”教学方式,强调“实践出真知”的科学思想,授课时出示明确的,可操作性强的教学任务②分层教学,分类指导即两分:考虑学生计算机水平的差异,我把学生分为A、B两层,不同层次学生完成的学习目标不同,不同层次的学生教师指导方法不同。A层学生只要求完成知识目标,及能力目标第一个,B层学生同时要求能力目标的

2、3 项。

三、说学法:

以学生为中心,要求学生由知识的灌输对象转变为信息加工的主体,引导学生按以下两种方式来完成任务:①自学自练:通过学生自己在计算机进行操作从中获取对知识的正确理解,探求问题解决的方法;②协作学习:在实际操作中遇到的问题鼓励学生共同研究讨论、解决,使学生可以看到问题的不同侧面和不同的解决途径,开阔学生的思路,从而对知识产生新的理解。

四、说教学过程

教学环节

教师主导

学生主体

设计意图

导入新课:

同学们,互联网近年发展迅猛,大家都离不开网络了,那么同学们平时上网看的都是别人做的网页,如果自己也可以在网上看到自己制作网页,那中动手的满足感该有多好啊。这节的学习的目标就是网页的制作,准备共用两课时完成这部分内容,第一课时:自学自练DREAMWEAVER制作网页的基本方法;第二课时: 自己设计制作网页。 学生回答,明确学习目标 通过展示教师制作的学校网页,激发学生的学习兴趣,同时给出学习目标,让学生明确学习任务,做到有的放矢。

讲授新课第一课时: 再具体操作之前,同学们应先了解有关网页的一些相关知识。

阅读内容、分析,总结激发学生主体参与意识,培养学生阅读归纳知识的能力 理念的构成, 寻找可模仿的同龄人制作的网页。找出网页内在的逻辑关系及理念。先模仿再创造。 观察,调动的兴趣,明确学习的途径,方法,坚定学习成功的信心。 通过展示学生们制作的班级网页,进一步激发学生的学习兴趣,同时坚定学生的学习信心,告诉学生通过自己的自学自练就可实现学习目标,进而培养学生的自学习惯。

总结或补充

1、网页制作方法很多,我们要学习的只是其中的一种;

2、无论哪种方法制作的网页,生成文 件扩展名均为html或htm,即对应是html语言

3、当浏览网页时,看到的不是语言代码而是语言代码所描述 的形象。总结 理解、记忆在上课的最佳时间内,让学生了解有关网页的相关知识,这利于学生的记忆

教师指导(分类指导)共性问题做小结

自学、自练协作学习培养学生自学能力,阅读、分析、解决问题实际操作,使学生成为学习的主体,学习的主人 小结 1解决操作中的共性问题

2指出超级链接是实现多网页链接的的基本方法:

3、保存文件为htm或html格式并预览 学生总结并提出问题,理解超级链接,预览自己的练习作品

解决操作中的问题,为下步学习扫清障碍,将本节的重点问题突出,通过预览对网页设计有一个初步设想

展示第二课时目标:

设计一个网页,内容丰富,突出主题,展示个性

多种素材综合运用(可以自己准备素材)

明确下课时学习任务,主动思考

通过一下课时的目标展示,使学生可以有更多时间去构思、创意,促动学生主动的去思考、去学习,引导学生习惯于创新,展示独特创意。

第二课时

展示第二课时目标:

计一个网页,内容丰富,突出主题,展示个性

多种素材综合运用(可以使用自己的准备素材)

明确任务

明确目标、任务,理清设计思路

指导(分类)

设计自己的网页

培养学生实际操作能力,综合运用知识能力在这过程中学生将会将上节自学的内容及以上学习综合运用,这对培养学生综合能力是相当有好处的。

通过局域网展示网页

学生推荐、自荐、评论

激发学生向上进取的学习态度,也可以使学生横向学习

课堂小结及课后要求

小结:找优缺点

思考、总结

进步引导学生学习

课后思考

1、让你的网页互相网上也被全世界人所浏览,那你该怎样实现

2、用DREAMWEAVER制作的网页与我们平时所见的网页效果一样吗?

全班互动学习进一步拓展学生的学习思路,学习空间,加强自学、互学的能力

五、说板书设计:

考虑到信息技术学科教学的实际特点,所以在板书设计上我主要体现了以下三个特点。

突出简要内容

突出课时目标

设置“共性问题”、“总结解决”版面

板书设计 网页制作

第一课时:

网页文件说明

1、常见的网页制作工具

2、网页文件的扩展名为htm或html

3、浏览器所显示的不是语言代码而描述的形象

二、理念构成

1、目标:熟悉用dreamweaver制作网页的基本方法

2、分类指导

共性问题

总结解决 第二课时目标

设计网页,内容丰富,突出主题,展示个性多种素材综合运用(可以自己准备素材) 第二课时:

一、目标:

1、设计网页,内容丰富,突出主题,展示个

2、种素材综合运用(可以使用自己准备的素材)

二、设计制作:

共性问题

总结解决

三、展示、讨论

四、课后思考

第19篇:网页设计教案

课程:

课时:

教学对象:教师:

公 开 课 教 案

课题:

时间:

地点:多媒体教室五

教学目标:

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

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

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

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

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

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

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

一、导入课题

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

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

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

二、新课讲解

1、CSS概述

⑴ 什么是CSS?

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

⑵ CSS由来

CSS样式由全球广域网协会制定,分别是CSS

1、CSS2

2、实例讲解

实例

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

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

步骤:

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

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

扩展:

1.引入外部样式表

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

实例

2、作出单张图像的背景

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

步骤: 1.单击按钮,选择“新建”

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

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

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

实例

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

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

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

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

实例

4、特效文字

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

实例

5、图像特效

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

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

作业:

p204页,课后习题

上机练习:

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

5.对图像使用滤镜功能

三、教学后记

第20篇:电子表格和网页教案

第一章 引言

教学目的: 1.总结上学期期末考试情况; 2.安排本学期的学习计划和任务。 教材分析及教学过程: 引言:大家好,新的学期开始了,我又看到各位同学生龙活虎的样子,心里非常开心。一个寒假我真得很想在座的每位同学,老觉得心里少了点什么。大家跟我相处有半年时间,应该了解我,会发现我这个人性格直爽,有可能平时我说的话或做的事伤过某些同学,但我希望大家能够理解我,当然这学期我也会积极努力地理解大家的。但总之你要记住一点,我对你做的一切都是为你好。你们可能不知道,当我看到有些同学不好好学习的时候,我心里比他还着急。

我的课提倡以自学、自我反思为主,大家应该感触很深。因为我是专门学这个专业的,我的感触就是我学到的很多知识上学的时候老师从来没讲过,都是自己在学习中思考发现的,反而效果比老师讲得好,因为是经过自己思考从而概括总结的。当然,我说这句话并不说明老师不重要,当你自己无法解决的时候可以去问老师。老师只是你学习中的领路人。

大家应该了解到从2005年开始中考改革了,除了考语、数、外、物理化学之外,其他所有科目采取区上统考,按等级划分,如果不及格还要补考。

下来,我说一下上学期期末考试的主要目的是锻炼大家的整体构思、实际动手能力,培养大家的创新意识。从你一开始收集资料就已经在锻炼自己的能力了,让我欣慰的是很多同学学会了自己上网获得考卷、到机房拷贝素材,在幻灯片的构思和颜色搭配上很多同学还是下了一定功夫的。我相信凡是认真做考卷的同学,回忆。 教材分析及教学过程: 己初一的水平,肯定会觉得比以前高了一个层次。当然也有个别同学做的不好甚至于没有交考卷的,我觉得主要是学习态度问题,希望上学期你认为哪做的不好的同学加以改正。尤其是上课务必带的课本、鞋套,体育委员负责全班同学在教室门口站队,课代表先检查同学们带课本和鞋套情况。如果哪一个班上课时超过10人不带课本和鞋套,那节课全班同学在教室上课。

本学期第二课堂学习习近平面设计,如果哪位同学美术或计算机比较好到课代表处报名。 最后我简单的说一下本学期的安排和计划。我们将学习Office家族中的两个常用软件,Excel(电子表格)和FrontPage(网页制作)。这两个软件是我们日常生活中使用频率非常多的应用软件,希望大家好好学习。本学期的期末考试采取当堂完成。我带了几位同学期末考试做得好的作品,大家共同学习一下。

第二章 Excel简介

教学目的: 1.使学生掌握单元格与区域的选择;

2.使学生掌握各种类型数据的录入方法和技巧;

教学要求:学生能够输入各种类型数据到工作表中。 教学重点: 各种类型数据的录入方法和技巧。

教学难点:在工作表中录入分数、班级等类型的数据。 教学方法:讲授法、演示与实践法、任务驱动法。 教学场所:在计算机房中完成教学。

第一课时 数据输入 导课: 同学们好,我们在日常生活中经常碰到各种各样的表格,你们常见的有哪些表格?我们可以用哪些软件完成表格的基本操作?对表格中的数据可以做哪些操作?那同学们想一想哪个软件处理数据更方便快捷、直观? 新课:

一、Excel的启动与退出(看书上第2页) 1.“开始”菜单→“程序” →“Microsoft Excel”; 2.点击“关闭”按钮,“文件”菜单→“退出”。

二、Excel的编辑窗口(看书上第3页,工作簿的组成)

三、单元格与区域的选择 1.选定一个单元格 ⑴ 用鼠标选定:

将鼠标指针指向待激活的单元格,单击左键,被激活的单元格方框将以粗黑线方框显示; ⑵ 用键盘选定:

直接按住键盘上的方向键将粗黑框移到指定的单元格。 ⑶ 单元格的命名:

列坐标+行坐标。例如:A1单元格等。 2.选定一个区域 ⑴ 选定一个连续区域

将鼠标指针指向待选定区域的第一格,按住左键不放,连续向左或向右对角线方向拖动,被选定的区域将高亮显示。 ⑵ 选定一个不连续区域

选定第一个单元格或区域后,按住“Ctrl”键不放再激活第

二、第三等单元格或区域。⑶ 选定一行或一列 直接用鼠标单击相应的行坐标或列坐标名称。 ⑷ 选定整个工作表

单击行列坐标交叉处的“全选”按钮。

四、录入表格数据

录入数据时,首先应分析一下表格中各栏数据的类型特征,因为不同类型的数据其录入方法有所不同。

分析题目:考号栏和成绩栏均为数值型数据,姓名栏、班级栏均为字符型数据。 1.序列数据自动填充法 ⑴ 先输入第一个考号,将鼠标指针指向选定区域右下角,按住“Ctrl”键和鼠标左键进行拖动。 ⑵ 输入前两个考号,然后选定这两个单元格,将鼠标指针指向选定区域右下角,用鼠标左键进行拖动。 2.班级栏的输入

选定单元格,输入’01。 3.录入分数

一般整数、小数可直接输入,而分数的输入有特殊规定,如:4/5,Excel解释为4月5号,再如:1/34,Excel解释为字符型数据。

注意:录入分数时,必须在分数前加上0和空格。

五、保存和关闭工作表 1.保存工作表

“文件”菜单→“保存”选项。 2.关闭工作表

“文件”菜单→“关闭”选型。

第二章 数据输入

1.同学们常见的表格:课程表、成绩表、体检表等 2.完成表格操作的软件有:Word、Excel等

3.对表格中的数据有哪些操作:编辑、计算、汇总、排序、筛选、打印。

一、Excel的启动与退出

二、Excel的编辑窗口

三、单元格与区域的选择 注意:单元格的命名:

列坐标+行坐标。例如:A1单元格等。

四、录入表格数据

1.序列数据自动填充法;2.班级栏的输入:选定单元格,输入’01; 3.录入分数时,必须在分数前加上0和空格。

五、保存和关闭工作表

第三章 表格数据处理(计算)

教学目的:使学生掌握公式法、函数法计算表格中的数据。 教学要求:

1.学生能够用公式法计算总分和平均分;

2.学生能够用Sum、Average函数计算表格中的数据。教学重点: 用sum、Average函数计算表格中的数据。 教学难点:用函数法计算数据时选择的数据范围。 教学方法:讲授法、启发法。

教学场所:在计算机房中完成教学。 教 材 分 析 及 教 学 过 程 第一课时 用公式法、函数法计算数据

导课:

每位同学知道完成一张表格,首先要建表,然后输入表格中的数据,以及编辑数据。除了这些,在日常生活中还要计算表格中大量、繁杂的数据,大家现在和我一块学习如何计算表格中的数据吧?

新课:

一、用公式计算

建立计算公式时,应遵循以下原则:

1.公式必须以“=”(等号)开头,后跟运算表达式;

2.Excel允许的运算表达式主要有算术类、文字类、引用类等。①算术类:符号有-(符号)、^(幂运算)、*和/(乘和除)、+和-(加和减); ②文字类:符号有&(连接); ③引用类:符号有:(冒号)、(逗号)、(空格); 例1:选定H2即总分单元格,在其中输入计算公式:=E2+F2+G2,然后按回车键,这时H2单元格中立即显示出总分:247。

由于每个人的总分计算方法一样,但是这样会很慢,为了提高工作效率,我们一般采用如下技巧。

3.技巧(自动计算总分) 首先计算一个人的总分,然后向下拖动鼠标。

二、用函数计算

为了减少公式法中敲入过多的符号,Excel提供了很多现成的函数,直接可以使用。 例2:选定I2单元格,单击“插入”菜单,选择“函数”选项,选择“Average”(平均),并单击确定。

在“Number1”栏中输入计算平均分的区域F2:G2,注意系统默认的包括总分H2这个单元格中的数据,应改变选择区域。

板书设计:

第一课时 用公式法、函数法计算数据

一、用公式计算

建立计算公式时,应遵循以下原则:

1.公式必须以“=”(等号)开头,后跟运算表达式;

2.Excel允许的运算表达式主要有算术类、文字类、引用类等。 a)算术类:符号有-(符号)、^(幂运算)、*和/(乘和除)、+和-(加和减); b)文字类:符号有&(连接); c)引用类:符号有:(冒号)、(逗号)、(空格); 3.技巧(自动计算总分) 首先计算一个人的总分,然后向下拖动鼠标。

二、用函数计算

使用“SUM”、“AVERAGE”等函数计算。

第四章 表格数据处理(排序、筛选)

教学目的: 使学生掌握表格数据排序、筛选数据。

教学要求:学生能够对表格中的数据进行排序、筛选。 教学重点: 排序中的主、次关键字的作用。 教学难点: 筛选中如何使用自定义。 教学方法:案例法、启发法。

教学场所:在计算机房中完成教学。 教 材 分 析 及 教 学 过 程

第一课时 排序、筛选数据

导课:

上节课我们学习了计算表格中的数据,发现函数法的效率更高一些。那么,我们计算完数据后,还要对数据进行排序(每学期的期中、期末考试排名),有时还需要筛选出需要的数据。

新课:

一、表格数据的排序

当要对表格中的数据整理顺序时,可以通过“数据”菜单中的“排序”选项或者使用工具栏上的自动排序来进行。 例1:选定范围(A1:I9),单击“数据”菜单中的“排序”选项,弹出“排序”对话框,在“主要关键字”下拉列表中选择“班级”选项,相应的排序方式选择为“升序”;在“次要关键字”下拉列表中选择“英语”选项,相应的排序方式选择为“降序”,在“选择排序 例1.讲实验一中的第5题。

区域”选择框中选中“有标题行”。

提问:日常生活中,我们经常会发现两位同学分数一样,到底把哪位同学排在前面。 回答:我们只能通过次关键字来决定哪位同学排在前面。

二、用自动法排序

如果排序时,只指定一个排序关键字,那么我们可以用常用工具栏上的升序、降序排序。

三、表格数据的筛选

数据的筛选将符合要求的数据集中显示在工作表中,而不符合要求的数据暂时隐藏起来。

例2:选择欲筛选的数据区内的任意一个单元格,然后选择“数据”菜单项“筛选”的级联菜单中的“自动筛选”选项,此时标题行中的每一个字段名旁都出现一个下拉列表按钮,选择“班级”栏目名的下拉列表框中“02”选项和“团员否”栏目中的下拉列表中的“是”选项,完成了筛选。如果要撤销筛选,只要取消“自动筛选”选项即可。 例3:有的时候下拉列表中没有我们直接可以找到的结果,此时采用“自定义”的方法。选择“班级”栏目名的下拉列表框中“01”选项,然后选择“英语”栏目中的“自定义”选项,屏幕上弹出“自定义自动筛选”对话框,在左上方的下拉列表中选择“大于或等于”,在右上方的下拉列表中选择“70”。

注意:从以上两题的筛选操作过程中可以看出,一般筛选可通过字段名旁的下拉列表中的条件直接筛选,而包含逻辑运算的筛选,则必须通过下拉列表中的“自定义”来建立筛选条件。

注意:个别同学把“各科均分”也排序了。什么原因造成的? 2.讲实验一中的第6题。 3.讲实验一中的第7题。 4.讲实验一中的第8题。

注意区别“大于”或“等于”70与“大于70或等于70”。

第五章 数据的输出与打印

教学目的:

1.使学生掌握表格的美化;

2.使学生掌握表格的页面设置、预览与打印。教学要求:

1.学生熟练掌握用格式工具栏或对话框美化表格;2.学生熟练掌握“页面设置”中常用选项的设置。 教学重点: 1.如何打印出有边框的表格。 教学难点: 1.如何操作才不浪费纸张和墨水。 教学方法:

1.案例法、讨论法。

教学场所:在计算机房中完成教学。 教 材 分 析 及 教 学 过 程

第一课时 数据的输出打印

导课:

前几节课我们学习了在Excel软件中计算、排序和筛选等操作,但是我们总希望将表格设计的尽量美观,使信息表达的清晰明白,给人一种赏心悦目的感觉。那么,该如何美化表格呢?下来,大家跟我一块开始学习吧! 新课:

一、用工具栏格式化

1.字体、字形和字号的改变; 2.对齐格式的设置;

重点提出“合并及居中”操作,因为很多学生不会合并单元格。 3.数字格式的设置; 4.加边框线。

二、用对话框完成工作的格式化

由于工具栏是一种简化的操作,不可能将所有的格式命令都放在工具栏上。因此,我们使用另一种方法设置单元格,用“格式”下的“单元格”命令。

三、页面设置

当我们把表格美化之后,最后的工作就是打印表格。请大家看黑板,今天我们打印表格总共需要三步。 例1:首先打开自己原先的文件,接着点击“文件”菜单中的“页面设置”选项,在“页面”标签中选择“纵向”,缩放比例调整为“100%”,纸张大小定为“A4”。

为了保证打印的表格在水平方向处于纸张的中间位置,在“页边距”中选择“水平居中”。

把页面装饰得更好看,需要设置“页眉/页角”。在“页眉”中输入“初二年级成绩表”,在“页角”左侧输入“日期”、居中处输入“制作人名称”、在右侧输入“页数”。 思考:当使用“打印预览”时发现打印的表格缺少什么?该如何设置?

发现表格没有边框,只要把“工作表”标签中的“网格线”选中即可,你现在试一试吧,看看结果。

四、打印预览

思考:我们经常发现打印出来的数据有错误,又要重新修改再打印,发现这样做既浪费了纸张,又浪费了墨水,有没有好的办法来解决浪费现象。

单击“文件”菜单中的“打印预览”,这样,就可以预览我们的文件了,一旦发现错误可以及时修改。

五、打印内容

1.点击“文件”菜单中的“打印”选项,在指定“打印范围”中可以“打印全部”或者“从第几页打印到第几页”。

2.教你一招:“打印预览”在常用工具栏上有一个快捷按钮,我们可以应用这个快捷按钮实现打印预览的目的。

思考:如果我们打印一张表格需要50份,并且让电脑自动按页码顺序整理好,该如何操作?

如果选择“逐份打印”,则按照份数由第一张打印至最后一张,如果不选择,则先打印完所有的第一页,再打印第二页。

第六章 创建自己的网站

教学目的:

1.使学生掌握网站的建立;2.使学生掌握网页背景的设置。 教学要求:

1.学生熟练掌握网页背景的设置。教学重点: 1.如何建立一个空白网站。 教学难点: 1.网页背景的设置。 教学方法:

1.案例法、讨论法。

教学场所:在计算机房中完成教学。 教 材 分 析 及 教 学 过 程

第一课时 创建自己的网站 导课:

随着Internet的发展,越来越多的人开始上网,有些人甚至有了自己的网站,还有很多人希望在网上拥有自己的一片天空。我想问大家,你们想不想制作一个属于自己的网站呢?那好,下来和我一块开始创建自己的网站吧。

新课:

首先在硬盘上建立一个文件夹。例如我想制作一个关于旅游方面的网站,那么,就给这个文件夹取名为tour。

一、建立自己的网站

首先启动FrontPage软件,在新建里选择“空白网站”,然后在“指定新站点位置”里选择刚才在硬盘上建立的tour文件夹。此时,一个空白网站建立好了,大家发现里面只有两个文件夹。再到硬盘上看tour文 教 材 分 析 及 教 学 过 程

二、新建主页

网站的第一页我们把它叫做主页,即Homepage。因此,我们制作的网站首先应该建立主页。在文件菜单中选择新建网页,系统默认的网页名叫做new_page_1.htm。 FrontPage可以让我们在三种不同模式下显示同一网页,一般用户在“普通”模式下编辑,懂得html代码的用户可以在“html”模式下编辑,很早以前用户用“记事本”来编辑网页,html叫做“超文本标记语言”。

三、设置网页背景和标题

在网页的空白处单击鼠标右键,选择“网页属性”,在“常规”标签里的标题中输入“旅游风光”,还可以给网页添加“背景音乐”。

此时的网页背景是白色,如果我们想用图片作为背景,要在“背景”标签里选择“背景图片”,通过浏览选择自己喜欢的图片。建议:作为背景的图片一定要颜色暗淡一些,并且颜色不要杂乱,这样才能保证网页的美观性。

要用颜色填充背景,在颜色背景中选择自己喜欢的, 选择的颜色也不要过于艳丽,我们一般看到的网站还是白色。

四、保存网页

当我们设置好网页的标题和背景之后,必须保存,此时电脑会把第一张网页的名字自动取名为index,这就是我们一个网站中主页的名字,必须是这个名字,我们不能更改,否则将来别人无法浏览网站。其它网页的名字可以随便,如果刚才用图片设置的背景,电脑也会弹出图片保存对话框,我们一般把图片保存到网站最先给的文件夹images里,这样做的好处在于便于管理。

五、浏览网页

当我们编辑好一个网页,可以有两种方法预览:一种方法直接使用“预览”模式,另一种使用浏览器预览。观察浏览器标题栏上显示的名字,我们会发现是我们设置网页的标题名“旅游风光”。

六、打开网页

我们可以把别人制作好的网页打开从而进行学习。今天,我们打开“新浪的主页”,看看设计者是如何完成版面布局的。我们发现版面布局全部使用的是表格完成的,然后在单元格里放入图片、文字等其他内容。

七、删除网站

选择网站的文件夹,按鼠标右键中的删除命令,最后选择删除整个网站。看看硬盘上的那个文件夹还在不在。

八、练习

下来大家练习新建网站和主页,更改主页的标题和背景,还可以在网页上添加表格,最后保存。

第七章 网页中的表格

教学目的:

1.使学生掌握如何在网页中添加表格;2.使学生掌握表格属性的设置。 教学要求:

1.学生熟练掌握表格属性的设置。教学重点: 1.设置表格的边框。 教学难点: 1.表格和单元格背景颜色的优先级。 教学方法:

1.案例法、讲授法。

教学场所:在计算机房中完成教学。 教 材 分 析 及 教 学 过 程

第一课时 网页中的表格 导课:

大家上节课学习了如何创建网站,并且我们看到了著名“新浪”网站设计者设计的新浪主页,版面布局用表格来完成的,因此,今天我们首先来学习与表格有关的知识。 新课:

请同学们回忆一下在Word中是如何添加表格的?

一、添加表格

在“表格”菜单中选择插入选项,输入相应的行数和列数,对齐方式选择“水平居中”。除了这种方法,我们还可以手工绘制表格。

二、调整表格宽度和单元格宽度

首先选中表格,单击鼠标右键,选择“表格属性”,

可以用“百分比”和“像素”来表示宽度,例如在数据框中输入50,表格的宽度占屏幕宽度的50%。还有种最简单的方法,像在Word中直接调整宽度和高度。

如果要设置单元格的宽度,只需选择“单元格属性”,在指定宽度中输入具体的值,和表格属性一样,但是最简单的方法还是直接调整单元格的高和宽。

三、设置表格和单元格的背景

我们首先改变表格属性中的背景,用一种颜色填充,然后我们在改变单元格的背景,你们发现谁的属性级别高呢?如果我们不想改变整个表格的属性,只须改变单元格的背景。

四、表格的边框

我们主要用表格来完成版面布局。因此为了不让用户在网上看到表格的边框,我们把它设置为0。

第八章 网页中的文字与图片

教学目的:

1.使学生掌握用格式工具栏改变文字的属性;2.使学生掌握图片属性的设置。 教学要求:

1.学生熟练掌握文字与图片属性的设置。教学重点: 1.文章自然段的划分。 教学难点: 1.如何用文本来代替图片。 教学方法:

1.案例法、讨论法。

教学场所:在计算机房中完成教学。 教 材 分 析 及 教 学 过 程

第一课时 网页中的文字与图片 导课:

我们首先复习一下以前学习的知识。请一位同学给大家用“空白站点”模板建立一个网站,然后看一个例子,大家思考它是如何制作的。首先看浏览器标题栏上的文字,请问在哪里可以完成设置。我们可以用什么完成版面布局,这张网页添加的是几行几列的表格,表格的边框是如何变成虚线的。当我们把骨架搭好以后,最后就可以在单元格里面添加文字与图片了。 新课:

一、添加文字

直接在光标闪烁处输入文字。

二、修饰文字

当我们把文字输入以后,更希望文字变得漂亮,我们用哪一个工具栏可以完成文字的美化。

教 材 分 析 及 教 学 过 程

三、自然段的划分

我们首先看这个例子。这篇文章有很多自然段,大家想想输入什么可以换行并另起一段,如果只想换行不想另起一段,那该如何做呢?看书上第33页小知识。

四、添加图片 在“插入”菜单中选择“图片”里面的“来自文件”选项。

五、修饰图片

调用“图片”工具栏或者单击鼠标右键选择“图片”属性。

六、用文本替代图片

单击鼠标右键选择“图片”属性中的“常规”标签,在“替代表示”中“文本”里输入文字,这些文字内容的含义主要用来说明或解释图片。最后用浏览器浏览制作效果。

第九章 创造更加舒适的环境

教学目的:

1.使学生掌握水平线的运用;

2.使学生掌握在网页中加入滚动字幕;3.使学生掌握时间戳的运用。 教学要求:

1.学生熟练掌握水平线和滚动字幕相关属性的设置。教学重点: 1.滚动字幕表现方式的区别。 教学难点: 1.表示水平线宽度的两种方法。 教学方法:

1.案例法、讨论法。

教学场所:在计算机房中完成教学。 教 材 分 析 及 教 学 过 程

第一课时 创造更加舒适的环境 导课:

我们上节课复习了建立网站的基本流程,但我们希望网站能够给浏览者提供更加舒适的环境。比方说我们为了防止别人侵权,在网站上添加版权信息;重要的话语想吸引浏览者的目光,可以使用滚动字幕;想要让浏览者了解网页内容的更新,可以使用时间戳。下面我们一块来欣赏几个例子。

新课:

一、添加水平线

我们一般都会在网页的最下方添加制作单位、版权信息等内容,可以使用水平线把这些和网页内容隔开。

单击“插入”菜单,选择“水平线”,编辑窗口中立即出现一条水平线。当我们想改变水平线的高度、宽度、对齐方式和颜色时,必须选中水平线,单击鼠标右键,选择“水平线属性”。

水平线的高度、对齐方式和颜色很容易理解,但是它的宽度相对来说不是很好理解,有两种表示方法:一种使用绝对值,单位为像素,比如可将水平线宽度设为500像素,当改变浏览器窗口大小时,水平线的宽度不会发生变化;另一种方法是使用相对值,单位是百分比,比如将水平线宽度设为50%,意思是水平线宽度始终占窗口的50%,随窗口大小的变化而变化。看书上第38页小知识。

二、添加滚动字幕 我们为了让更重要的信息吸引浏览者,可以使用滚动字幕。

单击 “插入”菜单,选择“Web组件”选项,选择“字幕”,出现“字幕属性”对话框;在文本里输入要显示的文字,滚动字幕的表现方式有三种,让学生看一下三种表现方式的区别。

三、时间戳

大家都知道制作网站要花大量的时间,而维护网站对于网站的生存期更重要。为了便于浏览者了解网页的更新,我们使用时间戳。 单击 “插入”菜单,选择“日期与时间”选项,我们选择第一项,“该网页上次编辑日期”,然后选择日期和时间格式。

应用模板创建网页教案
《应用模板创建网页教案.doc》
将本文的Word文档下载到电脑,方便编辑。
推荐度:
点击下载文档
相关专题
点击下载本文文档