《8bo[中学教育]FrontPage 2003 教学案例.ppt》由会员分享，可在线阅读，更多相关《8bo[中学教育]FrontPage 2003 教学案例.ppt（65页珍藏版）》请在三一文库上搜索。
1、FrontPage 2003 教学案例,景宁职业高中 严家寿,第六章 FrontPage2003,实例6-1 熟悉FrontPage2003的操作界面 实例6-2 利用FrontPage2003创建一个网页 实例6-3 查看、编辑源文件以及预览网页 实例6-4 利用FrontPage在网页中插入图像 实例6-5 建立和编辑超链接 实例6-6 利用FrontPage在网页中插入表格 实例6-7 插入表单 实例6-8 创建站点 思考与练习,第六章 FrontPage2003,FrontPage是常用的制作网页和网站的工具软件，FrontPage2003是FrontPage的最新版本，它集显示、编辑
2、网页HTML源代码，插入文本、图片、声音、动画、表单、超链结和使用数据库和脚本语言，管理和发布站点的工具为一体，可以在同一界面中完成设计、制作、发布、管理站点的工作。本章我们将主要通过9个案例来介绍FrontPage2003的常用功能。,实例6-1 熟悉FrontPage2003的操作界面,一、本例要求, 熟悉FrontPage2003的菜单栏、 工具栏、视图栏和主编辑区。,二、操作步骤,在windows中，使用开始菜单“程序”-“Microsoft FrontPage2003”，启动FrontPage2003。则会看到FrontPage2003的操作界面，如图6-1所示。,图6-1操作界面,
3、图6-2显示了FrontPage2003的菜单栏，浏览各个菜单包括的菜单项。,图6-2菜单项,图6-3显示了FrontPage2003常用工具栏中的各种按钮。如，等。,图6-3各种按钮,图6-4显示了FrontPage2003格式工具栏中的各种工具。,图6-4各种工具,观察主编辑区，注意编辑区的左下方有四个选项卡，如图6-5所示，可以用于选择网页的显示方式。,图6-5网页的显示方式,6. 观察在FrontPage主界面右边有一“任务窗格”窗口，其中包括“开始工作”，“帮助”等多个任务窗格。可以方便快捷地来编辑网页。如图6-6所示。,图6-6任务窗格,三、本案例知识点,FrontPage2003
4、包括“文件”、“编辑”、“试图”、“查看”、“插入”、“格式”、“工具”、“表格”、“框架”、“窗口”、“帮助”共10个菜单，它们为用户提供了网页编辑和管理网站的各种功能： 文件：包括新建、打开、关闭、保存和预览网页和站点等功能。 编辑：与Office系列相同具有撤销、剪切复制、粘贴、删除和查找等功能。 视图：控制网页各种视图之间的切换以及工具栏和任务窗格的显示。 查看：包括选择视图栏中的各种视图方式以及显示各种工具栏按钮的功能。 插入：既可以插入换行符、水平线、表单、图片和超链接等网页元素，也可 以插入各种Office组件和对象 格式：可以设置字体、边框、网页样式和背景图片。 工具：包括设置
5、FrontPage工具栏、选项以及网页选项和加载宏等功能。 表格：主要包括在网页中插入表格以及设置表格、单元格属性。 框架：主要包括对框架的删除和拆分以及设置框架属性等功能 窗口：在各个网页窗口之间切换。 帮助：包括FrontPage2003的帮助文档。,FrontPage2003的工具栏与Word等Office系列大致相同主要包括新建、打开、保存、打印、预览、剪切、复制、粘贴等常用工具按钮。 主编辑区左下方的四个选项卡用于在“设计”/“拆分”/“代码”/“预览”四种视图之间互相切换。 设计：可以查看编辑状态下的网页。 拆分：把编辑窗口分为两部分上面显示代码，下面显示编辑 状态下的网页。 代码
6、：可以查看HTML源代码。 预览：可以提前预览网页在发布后的情况。,实例6-2 利用FrontPage2003创建一个网页,一、本例要求, 掌握利用FrontPage2003创建、 保存、打开网页的步骤和方法。,二、操作步骤,使用菜单“文件”“新建”，在弹出的“新建”任务窗格中选择“空白网页”。任务窗格消失，这时就创建了一个空白网页。 在编辑区输入一段文字：“Hello,world.”。如图6-7所示,图6-7输入文字,使用菜单“文件”“，如图6-8所示。,图6-8“保存”对话框,选择网页文件保存的位置，然后单击“更改标题”按钮，在弹出的“设置网页标题”对话框中输入新的网页标题文字“案例6-2
7、”，如图6-9所示。单击“确定”按钮。,图6-9“设置网页标题”对话框,在“另存为”对话框中，输入新的文件名（新建的文件默认名为“index”）example6-2。 选择保存类型，一般为“网页”。 单击“保存”按钮，即可完成文件保存。,三、本案例知识点,若要在FrontPage中打开已存在的网页文件,则使用菜单“文件”“打开”，弹出如图6-10所示 在“打开文建”对话框中确定要打开网页文件，单击“打开”按钮或双击网页文件名即可。 新建空白网页时也可以使用工具栏中的按钮。,打开、保存网页时可以分别使用工具栏中的按钮和按钮。,图6-10“打开文件”对话框,实例6-3 查看、编辑源文件以及预览网页
8、,一、本例要求 掌握在FrontPage中查看、编辑源文件以及预览网页的方法,二、操作步骤,单击菜单“文件”“打开”命令，打开在案例6-2中创建的网页example6-2。 单击编辑窗口左下方的“代码。如图6-11所示。,图6-11查看文件源代码,将源文件第十一行改为： Welcome to LanZhou! 单击“设计”，“拆分”选项卡，观察网页主体部分文字及代码的变化。 单击“预览”选项卡，可以预览网页发布后的大致情况。 单击菜单“文件”“另存为”,更改网页标题为“案例6-3”，保存文件名为example6-3。,三、本案例知识点,在查看网页的代码窗口时，可以看到不同的源代码用不同的颜色显
9、示，HTML的标记符用紫色显示，属性名用红色显示，属性值用蓝色显示正文标题和文字用黑色显示。 在查看网页的代码时，可以直接对HTML源代码进行编辑和修改。 单击“预览”选项卡后看到的网页是网页发布后的大致情况，但不一定是网页在浏览器中浏览时的真实情形。 如果要在指定浏览器中预览所编辑的网页。 其步骤如下： 1） 保存所编辑的网页。,2）使用菜单“文件”“在浏览器中预览”，在弹出的如图6-12所示的二级菜单中，选择浏览器以及分辨率等参数，即可打开相应浏览器预览网页。在此二级菜单中，选择“编辑浏览器列表”，在如图6-13所示的中可以根据需要添加、修改、删除浏览器，这样就可以利用不同的浏览器查看网页
10、在不同的用户浏览器中的显示效果。,图6-12二级菜单,注意：如果文件未保存，此时如果预览网页，将出现一个文件为保存的提示对话框，提醒保存当前网页。如图6-14所示。,图6-13编辑浏览器列表,图6-14提醒保存当前网页,实例6-4 利用FrontPage在网页中插入图像,一、本例要求, 掌握在网页中插入图像的方法和步骤。 掌握编辑网页中图片的方法和步骤。 掌握改变图片属性的方法和步骤。,二、操作步骤,运行FrontPage，新建一个空白网页。 使用菜单“插入”“图片”“来自文件”，从打开的“图片”对话框（如图6-15所示）中选择图像文件cup1.jpg。,图6-15“图片”对话框,单击“确定”
11、按钮，则在网页中插入了选定的图片。如图6-16所示。,图6-16网页中插入了选定的图片,选中插入的图片，单击鼠标右健，选择“编辑图片”命令，出现“图像属性”对话框，如图6-17所示。,图6-17“图像属性”对话框,在“外观”选项卡中，选择对齐方式为“右对齐”，设定“编框粗细”为1。选中“指定大小”，设定宽度为“200”像素，选中“保持纵横比”。如图3-18所示。,图6-18设定图像属性,单击“确定”按钮，结果如图6-19所示。,图6-19结果图,7. 单击取文件名为example6-4，更改标题为“案例6-4”，单击“确定”按钮。 8. 在弹出的如图6-20所示的“保存嵌入式文件”对话框中，单
12、击“确定”按钮。,图6-20“保存嵌入式文件”对话框,三、本案例知识点,图片除了增加网页的装饰效果外，也可作为网页的导航按钮。 从本地文件系统中添加图片，图片可以为GIF、JPEG、BMP等文件格式。 保存网页时，FrontPage会提示将图片保存到您的站点中。若图片不是GIF或JPEG 格式，使用256色或更少颜色的图片会自动地转换成GIF，而所有其他的图片会转换成JPEG格式。,利用FrontPage不仅可以插入来自文件的图片，也可以插入Office剪贴画库中的剪贴画。插入时步骤与插入文件图片的步骤基本相同只需在上述步骤中，将2中的“插入”“图片”“来自文件”改为“插入”“图片”“剪贴画”
13、即可。 选中插入的图片，单击菜单“视图”“工具栏”“图片”，在屏幕下方会弹出“图片”工具栏。工具栏如图6-21所示，利用这些工具可以对已插入网页中的图片进行编辑。,图6-21“图片”工具栏,图片”工具栏中提供了更改图片亮度、颜色对比度、转换为黑白图片、裁剪图片、试图片中的颜色变成透明、在图片上放置文本、设置图片的对齐方式和间距，创建图片的缩略等工具。 在“图片属性”对话框中，有“外观”、“常规”和“视频”3个选项卡，在“外观”选项卡中可以进行图像的布局和大小参数的设置。见本案例中的图6-17。,在“常规”选项卡中，可以选择图片源、确定图片的类型、设置图片在低分辨率下的替代表示以及图片超链接等内
14、容，如图6-22所示。,图6-22“常规”选项卡,在“视频”选项卡中，可以选择视频源和设置播放视频的参数，如循环次数等。如图6-23所示。,图6-23“视频”选项卡,实例6-5 建立和编辑超链接,一、本例要求 掌握建立文本超链接的方法和步骤。 掌握建立图像超链接的方法和步骤。 掌握建立邮件超链接的方法和步骤。,二、操作步骤,运行FrontPage，在“设计”视图模式下，输入文本“兰州石化职业技术学院”。 选中刚才输入的文本，然后右击鼠标弹出一个快捷键菜单，在快捷菜单中选择“超链接”菜单项（也可以单击常用工具栏的超级链接按钮），可打开如图6-24所示的“创建超链接”对话框。,图6-24“超链接”
15、菜单项,在“插入超链接”对话框中的URL栏中输入链接的目标地址http:/，然后单击“确定”按钮。 参照案例6-4的方法和步骤，在刚才的网页中插入图像cup.jpg。设置边框粗细为“1”，图片宽度为“200”像素，选中“保持纵横比”，其他图片属性不变。 选中插入的图像，单击工具按钮。 在“插入超链接”对话框中，定位网页文件example6-4.htm，单击“确定”按钮。 保存网页文件为“example6-5.htm”，标题为“案例6-5”，单击“文件”“在浏览器中预览”Microsoft Internet Explorer 6.0。查看链接的实际效果。,三、本案例知识点,超链接是从一个网页指向
16、另一个目的端的链接，比如说指向另一个网页或者相同网页上的不同位置。这个目的端通常是另一个网页，但它也可以是一幅图片一个电子邮件地址、一个文件（如多媒体文件或者 Microsoft Office文档）或者一个程序。超链接可以是文本或者图片。 在案例网页中我们给出了的两个超链接分别为文本和图片。它们的目的端都是一个网页。如果要是将目的端指向文件一个本地文件，需在“插入超链接”对话框中，单击浏览文件按钮，在弹出的如图6-25“链接到文件”对话框中，选择一个本地文件作为超链接的目标文件。,图6-25“链接到文件”对话框,实例6-6 利用FrontPage在网页中插入表格,一、本例要求 掌握在网页中插入
17、表格的方法和步骤。,如果要将目的端指向一个电子邮件地址，单击电子邮件链接图标在弹出的如图6-26“插入超链接”对话框中，输入一个E-mail地址，单击“确定”按钮后，在“编辑超链接”对话框URL栏中会出现“mailto：E-mail地址”。这样就把输入的E-mail地址作为超链接的目标。,图6-26设置电子邮件,二、操作步骤,运行FrontPage，新建一空白网页。 在“设计”视图模式下，输入文本“课程表”，选中所输文本，在“格式工具栏”中设置“文字格式”为“标题1”，字体为“华文新魏”，字号为“7（36磅）”对齐方式为“居中”，编辑后的格式工具栏如图6-27所示。,图6-27“格式工具栏”,
18、单击菜单“表格”“插入”“表格”，将出现一个“插入表格”对话框，在该对话框中，设置表格的行数和列数都为“6”，其他选项均选默认，如图6-28所示，单击“确定”按钮。,图6-28“插入表格”对话框,选中表格的第1行，单击鼠标.右键，弹出快捷菜单。在快捷菜单中选择“单元格属性”命令，出现“单元格属性”对话框。 在“单元格属性”对话框中，选中“标.题单元格”和“指定高度”复选框，设置高度为“40”像素，如图6-29所示，然后单击“确定”按钮。,图6-29“单元格属性”对话框,如步骤4、5所示方法，将表格第1列.设置为表格单元格。并选中“指.定宽度”，设定宽度为20，并选中“百分比”按钮。如图6-30
19、所示，然后单击“确定”按钮。,图6-30设定宽度和百分比参数,分别选中第2，3，4，5，6列，单击鼠标右键，在快捷菜单中选择“单元格属性”命令，在“单元格属性”对话框中选择单元格的水平对齐方为“水平居中”。并选中“指.定宽度”复选框，指定宽度为“16”，并选中“百分比”按钮，如图6-31所示。单击“确定”按钮。,图6-31 设置其它列参数,在表格的各单元格中分别输入课程表对应的内容。保存文件名为“example6-6”，标题为“案例6-6”。单击预览按钮，结果如图6-32所示。,图6-32案例6-6效果图,三、本案例知识点 在网页中插入表格可以使用菜单命令,也可以使用“常用工具栏”中的插入表格
20、按钮和“表格”工具栏中的“手绘表格”命令。 表格的各种属性的设置方法如下： 1） 打开包含表格的网页， 2） 选中表格或在表格的任何区域， 3） 点击右键， 4） 弹出快捷菜单， 5） 单击“表格属性”， 6） 弹出如图6-33的“表格属性”对框 7） 属性设置：,布局工具：当表格用于网页布局时，可以选择“使用布局工具”。一般情况下，选择“自动启用基于表格内容的布局工具。 大小属性：指定表格的宽度和大小。 布局参数：设置表格的宽度、高度、对齐方式和单元格衬局和间距。 背景属性：设置背景色和背景图像。 边框参数：设置边框的大小和颜色。 设置属性：若选中“设为新表格的默认值”，可把上述表格设置参数
21、作为表格设置的默认参数。,图6-33“表格属性”对话框,实例6-7 插入表单,一、本例要求 掌握在网页中插入表单的方法。 二、操作步骤,运行FrontPage，新建一空白网页。使用菜单“插入”“表单”，并将光标移动到表单开始处。 根据案例6-6所示方法和步骤，在表单中插入一个54的表格。并将表格第1行的4个单元格合并为一个单元格，输入“学生登记表”，第2、3、4行的第3列合并，输入“简历”，第2、3、4行的第4列合并，第5行的第2、3、4列合并，输入“体育 音乐 美术 上网 游戏”。分别在2、3、4、5行的第1列输入“姓名”、“性别”、“专业”、“爱好”。结果如图6-34所示,图6-34 插入
22、表格,将光标移到第2行第2列，然后单击菜单“插入”“表单”“单行文本框”。 将光标移到第3行第2列，然后单击菜单“插入”“表单”“选项按钮”。然后在单元按钮右边输入文本“男”。在第一个单元按钮右边按上述方法再插入一个单选按钮，并输入文本“女”。 将光标移到第2行第4列，然后单击菜单“插入”“表单”“文本区”。,将光标移到第4行第2列，然后单击菜单“插入”“表单”“下拉框”。然后选中刚插入的下拉框，右击鼠标弹出一个快捷菜单，在菜单项中选择“表单域属性”，弹出如图6-35所示的“下拉框属性”对话框，单击“添加”按钮，弹出如图6-36所示的“添加选项”对话框，依次添加“计算机应用”、“电子商务”、“
23、机械设计”和“石油加工与工艺”四个专业名.称，可生成如图6-37所示的下拉式菜单。,图6-35 “下拉框属性”对话框,图6-37生成的下拉式菜单,图6-36“添加选项”对话框,8.将光标移到第5行第2列文本“体育”前，单击菜单“插入”“表单”“复选框”。然后依次在“音乐”、“美术”、“上网”、“游戏”前插入复选框。 9.双击“重填”按钮，弹出如图6-38所示的“按钮属性”对话框，将“值/标签”改为“重填”。,图6-39“按钮属性”对话框,保存文件名为“example6-7htm”，标题为“”，预览网页,结果如图6-40 所示。,图6-40案例6-7效果图,三、本案例知识点,在FrontPage
24、中可插入表单元素有文本框、文本区、复选框、选项按钮、分组框、下拉框、高级按钮、图片和标签等。当插入某一个表单元素时便生成一个表单域。在网页中为表单元素设置标g)签的步骤如下： (1)在网页中加入一表单域 (2)在表单中输入要作为标签的文本。 (3)在文本后插入表单元素。将作为的文本和表单元素选中，单击菜单“插入”“表单”“标签”。,实例6-8 创建站点,一、本例要求 掌握FrontPage中创建站点的方法和步骤。 二、操作步骤,在“常规”选项卡中选择“个人站点”，单击“确定”按钮。则创建了名为Myweb的站点。如图6-42所示。 单击导航视图按钮，则可以看到整个站点的导航结构。如图6-43所示
25、。,图6-41“网站模板”对话框,在对话框的“指.定新站点的位置”列表框中，输入新站点的路径G:Myweb。 使用菜单“文件”“新建”，在“新建任务窗格”中选择“由一个网页组成的网站”，出现如图6-41所示的。,图6-42 Myweb的站点目录,在“常规”选项卡中选择“个人站点”单击“确定”按钮。则创建了名为Myweb的站点。如图6-42所示。,三、本案例知识点,这里所指的站点指的是本地站点，即是本地机上的一个专门用来存放网站文件的文件夹，需要一个名字和一个根目录，以后所有站点的文件都将存放在这个根目录下。当人们访问某个站点时，一般默认访问的是该站点上的index.htm文件，也就是主页，创建
26、一个站点就是在本地计算机的指定位置上建立一系列目录和文件。而Internet上的站点或网页是在本地编辑好后发布到指定服务器上的结果。,在FrontPage中可以利用模板和向导创建站点。所谓“模板”，就是以一个预先设计好的网页或Web站点作为基本框架，用户在创建一个基本框架后，就可以在其中插入自己的内容了。在上面的案例中，我们就是利用“个人站点”这个模板，创建了一个站点。 所谓“向导”，就是一种固定的操作过程导向程序。在导向程序中分为若干个步骤，在每个步骤中都有一个提供给用户的选项，用户按照程序规定的步骤一步步执行下去，便可以创建一个站点。由于篇幅所限，我们不再对利用向导制作站点的步骤做详细的介绍。,思考与练习,如何在FrontPage中实现文本的修饰？ 如何设置悬停按钮？ 试制作一个带滚动文本框、下拉菜单、单选按钮、 图片的表单。 试使用FrontPage制作并调试一个班机网页,