bo中学教育FrontPage教学案例.pptx

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