中学教育FrontPage教学案例

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