第一篇:《框架网页》教案
《框架网页》教案
八年级信息技术备课组
组长签名
授课人
教学目的:学习框架网页的制作方法,掌握框架网页的构成。教学重点:框架网页的制作, 框架网页的属性。教学时间: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主体”)。 相同框架:在左边框单击某个超链接时,其链接网页也将显示在左边框。 整页:单击某个超链接时,只显示所链接的网页,原来框架不再显示。 新建窗口:单击某超链接时,所链接的网页将显示在新打开的浏览器中。 父框架:单击某个超链接时,将返回上一级的框架。六)、上机操作
练习设计框架网页
”图片(或文字)。
”超链接工具按钮,出现【编辑超链接】对话框。这时在对话框的文件列表中
”按钮,出现一个对话框。
在对话框中,单击框架示意图中不同的区域,也可以单击右边列表框的选项,在对话框的“目
课堂小结
板书设计 :
教学反思
第周八年级信息技术教案
第二篇:框架网页制作教案分析
框架网页的制作
教学目标:
1.知识与技能:
(1)理解框架的概念及基本用途。
(2)掌握框架网页的新建、制作、编辑与保存,了解框架的拆分方法。
(3)初步掌握将框架结构与表格布局结合使用来制作网页。
2.过程与方法:
(1)通过对表格网页的分析,体验新知识(框架结构网页)的优点,从而促进更好的学习新知识。
(2)通过理解框架的概念与组成,学会分析框架网站的结构。(3)通过动手操作来深入了解框架的使用方法及用途,提高在网页制作方面的知识水平,培养自主学习的能力。3.情感态度与价值观:
(1)通过以“人与动物”为主题的框架结构网页的制作活动,开拓知识面,激发学习兴趣与热情,体会框架网页在展现主题内容中的作用。(2)能够将表格与框架结构网页结合使用,在创作中体验乐趣。
(3)形成积极主动的学习和使用多媒体技术的习惯,通过参与信息活动,参与社会实践,树立团队意识,形成积极合作的态度。
教学要点:
1.重点:
(1)框架的概念、用途。(2)创建、编辑与保存框架网页的方法,框架的嵌套使用。2.难点:(1)框架的拆分。(2)制作框架网页。
教学对象分析:
本节内容是针对高一学生,而初上高中的他们对一切新知识都很好奇,同时存在着一定的懵懂,因此在教授他们本节课知识之前,要事先充分激发他们对本节课内容的兴趣,因此课前老师先展示一组利用表格制作的框架网页,要求学生仔细观察,找出它们的一个共同特点,并提问如何快捷地制作这种网页?从而引出本节课内容,并且在讲授内容的过程中,要耐心的进行演示教学,不能一味的口述使学生感到一片茫然。
教材分析:
从在本教材中所处的位置来看,《运用框架结构制作网页》是在创建新站点,制作简单网页、运用表格制作网页和动态网页之后。通过前面的学习,学生可以建立有多张网页的个人站点,在对网页的设计中会运用表格给网页布局,为了使网页增添动感,还会通过增加滚动字幕、动态按钮以及动画插件等方法,令网页更加具有活力。但是除了表格布局外,还有一种常见的布局形式,应用也相当广泛,学生在浏览一些著名网站时就能遇到,通过本节课《运用框架结构制作网页》学习,可以为学生解惑,帮助学生理解框架结构制作网页的应用。从教材的难易度分析,这部分知识点学生从来没有接触过,在前面学习其它的应用软件时也没有类似的地方,故而有一定难度,教学目标不能定的过高。
第三篇:第五课 统一风格——制作框架网页
统一风格——制作框架网页
教学目标: 1.掌握表格的拆分与合并。
2.学会创建框架、制作框架网页和保存框架网页。
3.能制作鼠标经过图像的动态效果。4.学会制作超级链接和电子邮件链接。
5.掌握目标设置在网页制作过程中的作用和方法。
教学重点:创建框架和制作框架网页。
教学用具:多媒体网络教室。教学方法:讲解、学生练习。时间安排:2节课 教学过程:
一、课程导入
一个网站常常划分成多个区域,对于每个区域来说,其色彩搭配、网站风格、网站标题、网站导航都是统一的。为了能做到这种统一,我们每个网页中相同的内容固定在一个区域。我们通过创建框架制作框架网页,可以轻松实现网页结构划分和布局。看一个使用了框架的网页范例,师大资源网(http://source.xjnu.edu.cn)。使大家对框架有一个初步的了解和感性认识。
二、新课讲授 1.新建站点
(1)将“安全自护我能行”站点文件夹safe传到学生机。(2)新建站点。
2.创建框架和框架集
制作框架网页的前提是创建框架,并根据网页布局设计框架的样式,然后再具体设计制作网页的内容。(1)规划“框架”文件夹。(2)新建框架集
步骤1:执行“文件”——》“新建”命令,打开“新建文档”对话框,在 “类别”中选择 “框架集”。
步骤2:单击“创建”按钮,在弹出对话框中单击“确定”,框架创建完成。(3)保存框架集
步骤1:执行“文件”——》“保存全部”命令,保存到frame文件夹中。步骤2:重命名框架集文件和每个框架文件。(4)设置框架和框架属性
框架的属性包括框架名称、源文件、边距、尺寸、滚动条等;框架集的属性包括框架面积、框架边界颜色、距离等。
步骤1:执行“窗口”——》“框架”命令,打开框架面板。
步骤2:单击“框架”面板中的框架边缘部分,选中框架集,在 “属性”面板中设置框架集的属性。
步骤3:单击“框架”面板中的topFrame框架和mainFrame框架,在“属性”面板中设置所选框架的属性。(5)制作框架网页 ①制作上框架网页
步骤1:打开网页top.html,设置背景颜色#EAFF8A,上边距为0像素。步骤2:插入一个2行5列的表格并调整行列的高宽。。。步骤3:在导航表格中,设置鼠标经过图像。步骤4:为图片添加超链接,设置打开方式(目标)。②制作下框架网页
步骤1:打开网页main.html,设置背景颜色#EAFF8A,上边距为0像素。步骤2:插入一个5行9列的表格并调整行列的高宽。。。步骤3:合并相关单元格。
步骤4:插入图片,并为图片添加超链接。步骤5:添加邮件链接。
三、学生练习
学生小组合作完成书上的练习任务,并将任务上交到教师机。
四、作品评价
对于较快完成任务并且完成任务较好的同学进行表扬鼓励。
五、本课小结
1.创建框架,实现网页风格的统一,保存框架时,需要保存框架集文件和含有框架的所有文件。
2.利用鼠标经过图像,可以制作网页导航动态按钮。3.超级链接是实现网页互联的关键,设置网页的打开方式,可以调整链接网页的显示位置。
第四篇:下载网页教案
下载网页教案
一、学习目标:
(1)学会下载网页的方法。
(2)学会移动文件(文件夹)的方法。
(3)以教师演示讲授、引导启发和学生讨论尝试、自主学习相结合的方式,学会在因特网上下载有用的网页。
(4)通过导入展示的精美网页激发学生学习下载网页的兴趣,并进一步提高学生使用信息技术的能力。
(5)在保存图片的自主探究中,培养学生发现问题并自我解决问题的能力,提升学生的自学能力。
二、教学重点、难点:
1、学会下载网页和移动文件(文件夹)的方法。
2、保存网页后应该有两个文件,复制操作和移动操作的区别。
三、教学过程:
(一)导入
师:同学们,我们先一起来欣赏一些网页吧!这些网页好看吗?同学们一定非常想保留下来吧?好!今天我们就来学习下载网页!(出示课题)
(二)新授
1、下载网页
师:如果我们作为小小老师,向别人介绍中国儿童资源网的时候,能把完整的网页也呈现给大家,那同学们就更容易理解了。回忆一下我们前面学习的下载图片和下载文字的方法,那么能不能把网页完整的下载下来,即使在断开网络时也能看到完整的网页呢?
师停顿,生沉思片刻
生回答上台演示
一生:首先全部选定
一生准备按住鼠标左键全部拖动 有学生插嘴:按Ctrl+A 一生用自己方法选定后,又尝试了Ctrl+A,非常成功,然后复制,打开Word文档,粘贴。
师:非常棒!XX学生用了我们前面下载文字的方法复制了网页中所有的内容,真会学以致用但是,我们小朋友仔细观察一下,用这种方法,有没有把网页中所有内容完整保存下来。
生讨论回答,找出不同之处。师:那么怎么办呢? 二生:把它添加到收藏夹
师:我们一起回忆一下,在哪儿用过“添加到收藏夹”
生回答
师小结:添加到收藏夹是帮助我们快速访问网站的方法,不是把网页下载到我们计算机里。
三生:文件——另存为
师强调保存类型
师让学生掌声鼓励操作正确的三生。
我们来看看保存好的网页,和前面下载文字的文件有什么不同吗?出现了两个文件,一个是网页文件,一个是同名文件夹。这个文件夹里有些什么文件?(学生可以点击文件夹浏览)
如果这个文件夹不见了,或者网页文件放到了其他文件夹里,又会怎样?(如果有学生发生这样的问题也可以由学生提出)自己尝试一下,然后和小组同学交流或者翻看书本,把你的交流结果告诉大家。
讨论保存网页的要领。
好,下面同学们自己来试一试,查找我们江阴一个景点的网页,然后把网页保存到“我的文档”里。
师生解决操作中遇到的问题。
2、移动文件和文件夹。(打开网页文件夹,用缩略图方式显示图片)这是刚才下载的网页中的图片,很漂亮,老师很喜欢,想把它放入自己的文件夹里,可以怎么办呢?(复制文件)(前面有复制文件(文件夹)的基础)
师让学生独立完成移动文件(文件夹)的操作 四人一小组讨论移动的方法 组内汇报演示
学生的汇报实在精彩,方法多种多样
1、按右键剪切——粘贴
粘贴的方法(1)直接在文件夹上按右键粘贴
(2)打开文件夹后粘贴
2、直接拖动
3、在菜单栏上选择“移动到文件夹”
两人合作探究选定多个文件的方法,教师提示两个功能键Ctrl,Shift 学生汇报
1、不连续的选定Ctrl
2、连续的选定Shift
3、用鼠标框住 误操作带来的意外发现
生:按住Ctrl健选定多个文件,不小心进行了“拖动”操作,复制了多个文件。
师总结: shift:按住shift键,把鼠标指针指向最后一个要选定的文件,然后单击,就可以选定首尾两个文件之间的所有文件。被选中的文件都是以蓝底白字显示。(广播演示)ctrl:选定不连续的文件
学会这几种选定文件的方法,有再多的文件要选定我们都不怕了。下面请同学们将下载的网页文件夹里的图片移动到你的文件夹里。
小结:我们可以用复制或移动的方法把文件放入其他的文件夹里,也可以同样的操作把文件夹复制或移动到其他的文件夹里。
3、比较。
刚才我们用了两种方法把文件放进自己的文件夹里,那到底复制文件和移动文件两种操作有什么不同呢?(学生归纳总结)
三、总结。
通过今天的学习,你有了哪些收获呢?希望同学们在以后的操作中,灵活运用我们今天学到的知识!
第五篇:网页教案
三、DW安装应用
在学网页创建中,有一款非常重要的软件叫DW软件,它件全称:Dreamweaver,被称为网页三剑客之一. DW软件学习内容: 1.DW软件下载安装
2.创建HTML文档和CSS样式表并将二者关联起来 3.DW软件的应用 A.HTML文档的创建 1.打开DW软件
2.如果想创建一个HTML文档,只要点击“新建”下面的HTML,这个就完成了一个HTML文档的创建。
3.在当前页面点击“代码”,就可以看到我们新建一个HTML文档的时候,包括“声明”、“标签”、“根元素”还有
标签及里面的