tceic.com
学霸学习网 这下你爽了
当前位置:首页 >> 其它课程 >>

FrontPage网页制作教案(18课时)

FrontPage 网页制作教案(18 课时)

第一节

网页制作基础知识

教学目标:1、了解网站、网页、主页和 HTML 的基本概念 2、了解常见的网页制作工具 3、掌握 Frontpage 的启动和退出 教学手段:教师讲解与学生演示相结合 教学过程: 一.讲课: 一、网页及其组成 通过浏览器在 WWW 上所看到的每一幅画面都是一个网页(Web Page) 。 网页是全球广域网上的基本文档,用 HTML 语言编写。网页中所的元素主要有文字、图 片、声音、动画、影像以及链接等,通过这些元素的有机组合,就形成了包含各种信息的网 页。其中,文字是网页中最常用的元素;图片可以给人以生动直观的视觉印象,适当运用图 片,可以美化网页;链接的设计,可以使我们进行选择性的浏览;随着动态 HTML 技术的发 展,人们在网页中加入声音、动画等多媒体信息,使网页更加丰富多彩。 二、常用的网页制作工具 最初,人们利用 HTML 语言在文本编辑器中制作网页。 HTML 语言是超文本标记语言 (Hypertext Markup Language)的缩写,用来描述网页的结构,但不能直观的描述网页在 浏览器中的效果。因此,只有熟练掌握 HTML 语言的专业人员才能用它制作网页。后来出现 了一些网页制作工具(如 CDIDA 软件) ,降低了对 HTML 语言的要求,但是要实现某些功能, 还必须输入相应的 HTML 代码。FrontPage 系列软件的问世,才将人们从 HTML 代码中解放出 来。用 FrontPage 软件制作网页就象在文字处理软件中编排多媒体文档一样,具有“所见即 所得”的特性,而真正描述网页结构的 HTML 代码,则由 FrontPage 在幕后自动生成。这样, 大家都可以方便地制作自己的网页。 目前, 使用较多的网页制作软件有: FrontPage、 Flash、 Dreamweaver 等。 三、FrontPage2000 的启动和退出 1. 启动 方法: 单击 “开始” 按钮, 拖动鼠标指针依次指向 “程序 (P) ” “Microsoft FrontPage” , 并单击,即可启动 FrontPage2000。 2. FrontPage2000 的视图方式 在 FrontPage 2000 视图栏中,有页面、文件夹、报表、导航、超链接、任务等六种视

图方式,在网页制作和网站管理中,分别代表六种不同的工作模式。 (1)页面:用来编辑网页。 (2)文件夹:用于管理站点中的文件和文件夹。 (3)报表:用来了解整个网站的状况,报告站点中文件和超链接的状态。 (4)导航:用于帮助设计网站结构图,网页会依据结构图的形式自动产生链接。 (5)超链接:显示来自和指向站点中每一个网页的所有超级链接。 (6)任务:列出站点中要完成的任务。 根据需要, 单击视图栏中的按钮, 来切换不同的视图方式。 如图 5-2 中, 在页面视图下, 可以直接进行网页的编辑和制作。 3. FrontPage2000 的退出 单击“关闭”按钮即可。

练习: 1. 什么叫网页? 2. 一般情况下,网页由哪几种元素组成? 3. FrontPage 2000 有几种视图方式?每种视图方式各有什么功能?

第二节

网页的建立

教学目标:使学生掌握网页建立的方法和网站建立的方法 教学难点:网站的建立 教学手段:多媒体演示 教学过程: 讲课 一、网站的建立 1.启动 FrontPage 2000,依次单击“文件(F) ”菜单中的“新建(N) ” “站点(W) ” 命令,弹出“新建”对话框,如图所示。

2 .单击“空站点” ,然后指定新站点的位置,系统默认的位置类似于“ C : \My Documents\my Webs\myweb1” ,也可以自己指定网站所在的文件夹,最后单击“确定”按钮

即可。 [例] 在“我的文档”中“My webs”文件夹下建立一个名为“huanbao”的网站。 操作步骤: (1)启动 FrontPage 2000。 (2)依次单击“文件(F) ”菜单中的“新建(N) ” “站点(W) ”命令,在弹出的“新建” 对话框中单击 “空站点” , 在 “指定新站点的位置” 下方的文本框中输入 “C: \My Documents\my Webs\huanbao” ,最后单击“确定”按钮。 FrontPage 2000 将自动在指定位置建立一个站点,首先建立 “C:\My Documents\My webs\huanbao”文件夹,然后在此文件夹下,再建立一组文件夹,其中可见文件夹包括: _private 和 Images(存放图形文件) ,其余文件夹被隐藏起来 二、网页的制作 因为 FrontPage2000 默认的视图方式是“网页” ,可以直接进行网页的编辑工作。网页 编辑窗口的左下角有普通、HTML、预览三个标签,单击“普通”标签,可以直观地进行网页 的编排;单击“HTML”标签,可以直接编辑 HTML 代码,或者输入 FrontPage2000 所不支持 的 HTML 新代码,以实现动态网页的最新效果;单击“预览”标签,可以观看网页在浏览器 中的情形。虽然 FrontPage2000 具有“所见即所得”的功能, 在 “huanbao”网站中建 立第一个网页取名为 welcome.htm。 操作步骤: 1. 文字编辑 2. 插入图片 插入图片可使网页丰富多彩。在网页中可以使用的图片类型有多种,但最常用的是 GIF 和 JPG 格式的图片,因为这两种图片的文件长度较小,有利于提高网页的浏览速度。所以, 插入其他格式的图片后,在页面存储时,系统会自动将图片格式转换成 GIF 或 JPG 格式。 3. 插入动画 在网页制作中,经常使用一些小动画,使页面生动活泼,这些小动画文件用专门的工具 制作,也以 GIF 作为文件的扩展名。 操作步骤: (1)依次单击“插入(I) ” 菜单中的“图片(P) ” 、 “来自文件(F)?”命令,打 开“图片”对话框,单击“浏览”按钮,打开“图片”对话框,单击“浏览”按钮, 从“选 择文件”对话框中选择所需图片“diqiu1.gif” ,单击“确定”按钮,插入动画。 (2)拖动动画到标题下方适当位置即可。 4. 插入水平线 水平线是贯穿网页宽度的细灰条, 用来分隔文本成加着重符。 插入水平线可以帮助我们 将各类相关信息组合到一起,但同一个页面中水平线不宜过多。 调整水平线的宽度、高度、对齐方式以及颜色,就可以改变它的外观。 5. 设置背景 (1)单击“格式(O) ”菜单中的“背景(K)?”命令,出现“页面属性”对话框,且 “背景”标签已被打开。 (2)单击“浏览(B)?”按钮,在“选择文件”对话框中浏览文件夹内容,从中搜索 到所需背景图案后,单击“确定”按钮,关闭“选择文件”对话框,再单击“确定”按钮, 关闭“页面属性”对话框,背景图案即可插入页面。 页面制作完成,可以单击“预览”标签,观察一下效果。

三、网页的保存 单击“文件(F) ”菜单中的“保存文件(S) ”命令,弹出“另存为”对话框. 在“文件名(N) ”列表框中输入“welcome”后,单击“保存(S) ”按钮。如果要保存 的页面含有图片、动画、声音等元素,FrontPage 还会继续询问是否保存这些嵌入的文件, 如图 5-11 所示。 此时最好将这些文件保存起来, 以保持它们在网页中的位置, 否则, 当网站发生迁移时, 可能因找不到这些图片、动画等文件而无法显示。另外,最好将它们保存到 Images 文件夹 中,使网站保持清洁,便于管理和维护。 练习: 1. 在设计网页过程中,定义字体时要注意哪些问题? 2. 为什么在网页中通常都使用 GIF 或 JPG 格式的图片文件? 设置网页的背景时,可不可以使用较大的图片?有什么缺点?

制作“自我简介” 制作“自我简介” 一、 教学目标 1、 让学生熟悉 FrontPage 2000 的界面。2、 学会制作网页标题。3、 学会在网页中插 入美丽的图片。4、 学会在 FrontPage 2000 中使用表格。 二、 重、难点使用表格 三、 教学方法演示法、讲授法、实践操作法、比较讨论法 四、 教学类型新授课 五、 教学过程 [导入]前面大家了解因特网的神奇世界,畅游了丰富多彩的网站,欣赏了精美华丽的网 页。看到这么多漂亮的网页,同学们是否也想自己在网上建立一个自己的“家园”?现在我 们将学习如何利用 FrontPage 2000 在因特网上安一个自己的“家” 。 在因特网上安“家”的一般步骤大致可分为网站规划、网页制作和上传发布三个阶段。 本章创建的整个网站主要由“自我简介” 、 “成长之路” 、 “兴趣特长”和“网上交流”等网页 构成。 [讲授]创建网上家园,首先应将自己的有关情况展示出来,让来访者对自己有一个大概 的了解。这里,先来看一个同学制作好的“自我简介”网页。 这个网页包含有图片、表格和相关文字等,下面学着制作这个网页。每个网页都有一个 标题,让来访者一目了然。在“自我简介”网页中用“自我简介”几个文字来作为这个网页 的标题。 [演示]1、 单击屏幕左下角的 “开始” 按钮, 在 “开始” 菜单中选择 “程序” → “Microsoft FrontPage”菜单命令,进入 FrontPage 窗口。 2、在网页编辑工作区输入文字“自我简介” ,单击“格式”工具栏上“居中”按钮, 将文字居中。 3、 选中文字 “自我简介” , 通过 “格式” 工具栏的 “字体” 下拉列表, 选择 “楷体_GB2312” 。 4、在“格式”工具栏选择“字号”为“24 磅” , “颜色”为“粉红色” 5、单击“常用”工具栏上的“保存”按钮,弹出 “另存为”对话框。 6、在“文件名”中输入文件名“简介”后,单击“保存”按钮,保存网页。

[实践操作] 1、 使用“格式”→“字体”菜单命令也可以方便地设置字体。启动 FrontPage, 在编辑工作区中输入文字“兴趣爱好” ,使用菜单命令改变字体。 2、 单击“HTML”标签,观察编辑工作区的变化。 [提醒]在网页设计中, 对于非 Windows 自带的字体尽量少用, 以免造成别人浏览此网页 时无法显示这种字体,影响网页整体效果。 [讲授] 1、 FrontPage 启动后,会自动打开一个新的空白网页窗口。FrontPage 窗口与前面 所学的 Word 窗口类似,由标题栏、菜单栏、工具栏、编辑区和状态栏组成。 2、 网页文件实际上是一个按 HTML 语言规则编写的文本文件。我们看到的网页 是浏览器对 HTML 文件进行逐条解释,再显示出来的结果。 HTML 是英文 Hyper Text Markup Language 的缩写,意为“超文本标记语言” 。这种语 言用“<>”来标记网页中对象的格式和有关参数。网页中除了文字保存在 HTML 文件 中外,其他对象(如声音、图象、动画等)在 HTML 文件中只是保存了相应的标识和 有关参数,真正是内容还在这些对象的文件中。因此,这些对象的文件如果被删除或改 变了位置,就不能在浏览器中正确显示出来。 [讨论]如果在两个文字之间增加了一个空格后,间距又显得太大,此时应怎样调整才能 得到合适的间距呢? [实践操作]启动 FrontPage,分别建立主题为“兴趣特长”和“成长之路”的两个网页, 并保存为 xingqu.htm 和 chengzhang.htm [讲述]你在因特网上漫游时,精彩生动的图片会使人流连忘返。在自己的网页上添加美 丽的图片,一定也会增加吸引力。 [演示]1、 打开网页 jianjie.htm,选择“插入”→“换行符”菜单命令,弹出 “换行符 属性”对话框,选择“普通换行符” ,单击“确定”按钮,将光标下移一行。 3、 单击“常用”工具栏上的“插入文件中的图片”按钮,弹出 “图片”对话框。 4、 单击“剪贴画”按钮,弹出“剪贴画库”窗口,在“比喻”类别中找到剪贴画 图片,将此图片插入到网页中。 5、 调整图片的大小,并居中放置。 插入图片[讲授] 1、 使用回车键换行时,行距较大,而采用普通换行符来换行,行距为 0。 2、 FrontPage 中可以插入的图片文件格式很多,如 GIF、JPEG、PNG 和 BMP 等。其 中 BMP 格式的图片是未经过压缩的,文件较大,一般很少使用;而 GIF、JPEG、PNG 格式的图片都是压缩过的,文件较小,便于在网页中浏览和下载,所以经常使用。 [实践操作] 1、 在已建立的网页“成长之路”中,选择“插入”→“图片”菜单命令,加入合适的 图片,并调整图片的位置和大小。 2、 在已建立的“兴趣特长”网页中,使用“常用”工具栏上的“插入文件中的图片” 按钮,加入合适的图片,并调整图片的位置和大小。 3、 选择“格式”→“背景”菜单命令在网页中加入背景图片 以图片为背景的网页[讲解]在 FrontPage 中使用表格,可以整齐地排列文本,有效 地组织数据,使整个网页看起来简洁清晰。我们下面来使用表格制作出自我情况介绍。 网页中的“自我简历表” [演示] 1、 单击“常用”工具栏上的“插入表格”按钮,制作出一个 6 行 2 列的表格。

2、 在第一行第二列中,单击鼠标右键,在弹出的快捷菜单中,选择“拆分单元格”命 令,弹出 “拆分单元格”对话框。 3、 选取“拆分为列”选项,在“列数”框中输入 3,单击“确定”按钮,将此单元格 分为三列。 4、输入表格中相应的文字。 5、 按住 Ctrl 键,单击表格的第一列和第三列,选中此两列,在“格式”工具栏上设 置“字体”为“黑体” , “字号”为“4(14)磅” , “字型”为“粗体” 。 6、 选中第二列和第四列,设置“字体”为“楷体” , “字号”为“4(14)磅” 。 7、 选中表格的 所有行,单击“格式”工具栏上的“居中”按钮,将文字居中。 8、 选中第二行、第四行、和第六行,单击“格式”工具栏上的“突出显示颜色”按钮, 选择突出显示颜色为“浅绿色” 。 9、 选中整个表格,单击鼠标右键,在弹出的快捷菜单中选择“表格属性”菜单命令, 弹出 “表格属性”对话框。 10、选择边框颜色为“粉红色” ,单击“确定”按钮,制作出 “自我简历表” 。 [试一试]删除表格的某一行、某一列或整个表格。 [小技巧] 1、 选中表格的多行、多列或多个单元格时要按住 Ctrl 键不放,再选取所需的行、 列或单元格。 2、 选中整个表格的方法:在表格的最左或最右边双击鼠标左键,当所有单 元格反色显示时表示该表格被选中。 [学生阅读并实践] 表格的编辑方法 用表格来安排版面 [实践操作] 1 、 在自己所建的 xingqu.htm 网页中使用表格展示自己的兴趣爱好。在 chengzhang.htm 网页中加入能反映自己成长过程的图片。 2、 建立一个 2 行 6 列的表格,在表格中插入图片和表格。 3、 将本节中所制作的主题文字、图片和表格进行混排。 [总结] 本小节我们学习了制作几个简单的文字网页,进一步熟悉了文字的设置。 学会在网页中插入图片, 并能利用插入的表格更方便地实现图文混排的设计, 使网页 看起来简洁利落。同学们对表格的使用需要进一步加强练习。


推荐相关:

FrontPage网页制作教案(18课时).doc

FrontPage网页制作教案(18课时) - FrontPage 网页制作教案(18 课时) 网页制作教案 教案( 课时) 学期教学计划 一、教材简析 本学期使用的计算机教材是江苏科学技术...

《网页制作FrontPage》教案.doc

网页制作FrontPage教案 - 《网页制作 FrontPage教案 教师:张爱平 word 文档 可自由复制编辑 第 1、2 课时 网页设计概述 【教学内容】 讲解网页设计的相...

frontpage网页制作教案.doc

frontpage网页制作教案 - Frontpage 网页制作导学案 青州一中

FrontPage制作简单网页(高二公开课教案).doc

FrontPage制作简单网页(高二公开课教案) - FrontPage 制作简单网页 (高二信息技术公开课教学教案) [ 教学目的 ] 了解网站的基本结构、构建网站的步骤,掌握用 FrontP...

用FrontPage制作网页教学设计.doc

FrontPage制作网页教学设计 - 名师精编 优秀教案 制作关于国际旅游岛

FrontPage全套教案.doc

FrontPage全套教案 - Frontpage 网页制作知识准备 教学目标:

FrontPage网页制作教案(18课时).doc

FrontPage网页制作教案(18课时) - FrontPage 网页制作教案(18 课时) 第一节 网页制作基础知识 教学目标:1、了解网站、网页、主页和 HTML 的基本概念 2、了...

frontpage全套教案.doc

yaoyuan707贡献于2012-04-18 0.0分 (0人评价)暂无...三、 教学时间:2 课时 四、 教学步骤: 1、启动 ...我们将着重学习如何使用 FrontPage 2000 来制作网页了...

“用FrontPage制作网站”教学设计(教学设计三等奖).doc

“用FrontPage制作网站”教学设计(教学设计三等奖)_教学案例/设计_教学研究_教育...教学安排如下表:课时学习子任务教师活动学生活动访问推荐网 页明确任务评价网页...

用FrontPage制作网站教学设计.doc

FrontPage 制作网站”的教学设计信息技术是一门知识性、技能性和创新性相结合...教学安排如下表: 课时 学习子任务 教师活动 学生活动 1) 1、 访问推荐网页 ...

“用FrontPage制作网站”教学设计.doc

“用FrontPage制作网站”教学设计 - 名师精编 优秀教案 “用 FrontPage 制作网站”教学设计(三等奖) 贵州省都匀市新课程案例评比活动作者个人资料卡 设计者 陈苹 ...

frontpage教案.doc

第一节 教学内容:初步了解制作网页的工具 frontpage 教学目标:了解网页的基本概念...四、 总结本节课内容。 第四节 教学内容:插入图片和背景 教学目标:1、学会在...

网页制作教案.doc

网页制作教案 - 第1课 学习目标: 制作一个简单的网页 1、知识目标:了解网站规划方法;认识 Frontpage2003 的工作界面; 理解站点、网页、主页的概念。 2、技能目标...

FrontPage教案_图文.doc

一、单元教学目标 使用 FrontPage 制作简单的网页; 使用超链接实现网页信息的链接...学生使用网页模板来创建网页后,指导 学生按照网页制作的过程 ,完成本节课的学习...

《网页制作FrontPage》教案.doc

网页制作FrontPage教案 - 《网页制作 FrontPage教案 教师:张爱平 第 1、2 课时 网页设计概述 【教学内容】 讲解网页设计的相关术语及网站制作的基本流程。 ...

《Frontpage 2003网页制作》教学设计.doc

网页制作》 《Frontpage 2003 网页制作教学设计课型:新授课 课时:1 课时 一、教材分析《Frontpage 2003 网页制作》是八年级课本中的一节课,本节课是一节理 论...

Frontpage网页链接 教案.doc

Frontpage网页链接 教案 - 信息技术教案 执教: 课题 内容 课型 教学目标 神奇的超链接(2)---Frontpage 网页链接 九年义务教育小学课本 信息技术 小学六年级(...

《11 从简单的网页开始用FrontPage制作简单的网页教案....doc

《11 从简单的网页开始用FrontPage制作简单的网页教案》小学信息技术鄂教课标版六...《我的安全我关注制作网页》 是本教材六年级上册第七课, 是设计制作网页...

用FrontPage制作网站教学设计.doc

名师精编 优秀教案FrontPage 制作网站”的教学设计信息技术是一门知识性、...教学安排如下表: 课时 学习子任务 教师活动 学生活动 1) 1、 访问推荐网页 ...

fontpage网页制作教案.doc

fontpage网页制作教案 - FrontPage 网页制作教案 教学目标:1

网站首页 | 网站地图
All rights reserved Powered by 学霸学习网 www.tceic.com
copyright ©right 2010-2021。
文档资料库内容来自网络,如有侵犯请联系客服。zhit325@126.com