用frontpage制作网页课件教程

《用frontpage制作网页课件教程》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

用FrontPage制作网页课件【教学目标】了解用FrontPage制作课件的优势与不足，学会用FrontPage制作网页型课件。【重点难点】重点是如何在FrontPage插入多媒体素材，难点是课件交互性的实现和网页源代码的应用。【教学策略】教师实例演示，学生上机操作，教师辅导和点评。【媒体选择】主要采用FrontPage示范课件和实际操作讲解相结合，并辅以文字教材、网上学习资源和教学光盘。【教学内容】现在越来越多的课件是用网页制作工具来制作，并结合数据库、ASP等技术来加强课件的交互性。网页形式的课件可以集成丰富的多媒体信息，具有交互性强、制作简易、体积小、便于在网络上发布、传播和更新等优点，适合于个别化学习、课堂教学和网络教学。网页课件的开发工具软件有很多，包括：•语言编程如HTML、DHTML、ASP、JSP、PHP、JAVA、JavaScript、VBScritp、VRML等。•所见即所得的可视化编辑工具，如FrontPage、Dreamweaver、Flash、Authorware、PowerPoint、CourseBuilder等。对于一般都有繁重教学任务在身的学科教师来说，没有太多的精力去学习复杂的编程语言。可视化网页编辑工具由于源代码自动生成，使教师可以有更多的精力关注内容的表达和教学设计。用FrontPage编制的网页课件有较易操作的界面（与上网浏览网页完全相同），一门课程或一堂课的脉络结构（知识结构）可以在主页上用菜单（树形菜单或弹出菜单）或导航条的形式清楚地表明，可以列出教学目的、内容、重点难点、引言、概念性质、例题、练习、小结、作业等等，甚至操作注意事项。FrontPage被公认为最好的入门级的网页编辑工具。一、FrontPage基本操作1.启动FrontPage：双击桌面上的FrontPage快捷方式图标；开始→程序→MicrosoftFrontPage；右击一个扩展名为htm或html网页文件，选“编辑”。2.打开或隐藏视图栏、文件夹列表和网页文档a.点“视图→视图栏”打开或隐藏视图栏。点“视图→文件夹列表”打开或隐藏文件夹列表。b.右击扩展名为htm或html网页文件（如index.htm），选“编辑”，系统默认用FrontPage打开网页。 c.点“文件→打开”或点常用工具栏中的“打开”按钮，从本地磁盘或网络驱动器中打开网页文档，从任意Web网站打开网页，打开最近打开过的网页文档。3.在FrontPage编辑器中预览网页a.点普通视图按钮，观察刚才打开的index.htm网页。b.点HTML视图按钮，观察index.htm网页。c.点预览视图按钮，观察index.htm网页。4.FrontPage视图方式：网页视图，文件夹视图，报表视图，导航视图，超级链接接视图，任务视图。5.保存网页：点“文件→保存（另存为）”或点常用工具栏中的“保存”按钮，将新建的网页或从万维网上打开的网页保存到本地磁盘，把自己喜欢的网页作为模板保存。6.关闭网页：点“文件→关闭”或文档窗口中的“X”按钮，关闭当前网页。二、设计网页课件的框架结构三、在网页中插入表格、图像、背景、剪贴画、声音、视频和动画等多媒体对象1.插入表格插入到网页上的文本、图片、音频、视频、动画等元素，往往看起来显得不够整齐，为了使网页更美观，我们利用表格来控制复杂的网页布局，即用表格来定位网页元素。(1)点“表格→插入→表格”，输入行数、列数（如3列5行），插入一个规则表格，设置表格的属性。(2)用“表格”工具栏上的按钮或“表格”菜单上的“插入行或列”命令来增加表格的行或列。(3)用“表格”工具栏上的按钮删除一个单元或多个单元，删除一行、多行或一列、多列，删除整个表格，表格删除后立即按“常用工具栏”中的“撤消”按钮或按“Ctrl+Z”恢复表格；选择单元格或单元格中的内容用鼠标把选择的内容拖到新位置进行移动；按住CTRL键，再用鼠标把选择的内容拖到新位置进行复制。(4)选中需要拆分的单元，单击“表格”工具栏上的按钮或使用“表格”工具栏上的“笔”拆分单元格；选中需要合并的单元，单击“表格”工具栏上的按钮或单击“表格”工具栏上的(擦除)按钮合并单元格。经过处理，3列5行的表格变成1列4行。2.插入图像和背景图象 将鼠标定位到要插入图片的位置（如某个单元格内），单击“常用工具栏”上的“插入图片”按钮，从已建站点的图片文件夹中选择合适的图片，点击“确定”。也可以在“图片”对话框中点击“插入一个计算机中的图片”按钮，FrontPage编辑器将打开“选择文件”对话框，从本地磁盘中指定一个图像文件。右击网页空白处，选“网页属性”快捷命令，单击“网页属性”对话框的“背景”选项卡，先选中“背景图片”复选框，选择合适的图像作为背景图插入网页，点击“确定”按钮。3.插入剪贴画点“插入”→“图片”→“剪贴画”命令，选择一幅剪贴画，单击“插入”按钮，或直接双击剪贴画。4.插入声音或视频剪辑选择“插入”→“高级”→“插件”命令，打开“插件属性”对话框，单击“浏览”按钮，打开“选择插件数据源”对话框，从站点文件夹或本地计算机上指定要播放的声音或视频文件。调整网页中插件图标到合适的尺寸。5.修改图像属性右击网页中的图像，选“图片属性”命令，在“常规”选项方式下指定图像的格式（例如jpg和质量75）；在“文本”框内简单地描述图像；单击“外观”选项卡，指定图像无边框即边框线宽度为0，指定图像与相邻的文字或图像之间的水平间隔和纵向间隔，要改变图像的大小，首先选中“大小”框内的“指定大小”复选框，然后分别指定图像的宽度和高度。熟悉“图片”工具栏：创建自动缩略图；调整图像的黑白对比度和亮度；给图像加上斜面边界；把彩色图像变成黑白图像；把图像翻转；修正图像；裁剪图像；淡化图像；把图像恢复原样；在GIF格式的图像上写文字；使GIF图像透明等。6.插入水平线美化网页网页水平线用于把网页分隔成几个部分。新建或打开网页文档，把插入点移到要插入水平线的地方，单击“插入”菜单上的“水平线”命令。要把水平线插入在下一行，就把插入点定在行尾。在水平线上单击鼠标右键，在弹出的菜单中选择“水平线属性”命令，也可直接双击该水平线，设置水平线的宽度、水平线的对齐方式和水平线的颜色。四、在课件网页中使用书签和超级链接接1.书签的作用书签用于在长网页内部快速跳转和定位。2.创建书签网页从Web 网页上复制一篇比较长的文本，粘贴（选择性粘贴：无格式文本）到新建网页中。选择要标记的位置，单击“插入”菜单中的“书签”命令。FrontPage编辑器将显示“书签”对话框。在“书签”框中键入书签名称（最好用西文命名），书签名称应具有较好的描述性，然后单击“添加”按钮。可看到标签小旗出现在期望定位的位置上。用同样的方法创建其它书签。在网页顶端创建系列提纲（目录）文本，选中其中一个，右击文本，选“超链接”，在“链接到”栏中点“本文档中的位置”，在书签列表中选中合适的书签，确定。用同样的方法给其它的提纲（目录）文本建立超链接。保存网页，在IE中预览。3.超级链接使用超级链接，不仅可使站内的网页成为一个有机整体，还可使不同的站点之间建立联系。例如，在制作“网上学习资源”网页时，需要给所列出的大量的网上学习资源的标题文字设置超链接，以便访问者通过点击网页上的标题文字打开相对应的学习资源。首先选中标题目文字，然后单击标准工具栏上的“超级链接”按钮，在弹出的“创建超链接”对话框中指定超级链接所对应的网页，或在URL文本框中填入网页的地址即可。4．创建图像热点作为超级链接接新建或打开包含有复杂图片（如地图或大型仪器图片）的网页。练习创建图像热点作为超级链接接。例如，在世界地图片上的“国家地区”区域处创建一个热点，指定它跳转到“按国家地区查询”的主页上。方法是：首先单击图像，编辑器将显示“图片”工具栏，选择“图片”工具栏上的“图片”按钮，把光标移到图像上，光标将变成笔状，按住鼠标左键在图像上画出热点。释放鼠标后，FrontPage编辑器自动打开“创建超级链接”对话框，在此指定该热点要跳转的目标网页或网址。制作好后在IE浏览器中预览。5.改变超级链接的外观选择某文字超级链接，单击“格式”菜单上的“背景”命令，打开“网页属性”对话框的“背景”选项。把该超级链接的颜色改为另一种更醒目的颜色，预览一下，看超级链接文字是否发生变化。试着用不同的颜色表示未访问过的超级链接(Hyperlink)、访问过的超级链接(VisitedHyperlink)和将要访问的超级链接(ActiveHyperlink)。看看改变超级链接的外观的效果。6.编辑超级链接属性右击超级链接，选“超级链接属性”，FrontPage编辑器将打开，在URL框内键入新的网页文件名或网址。观察改变后的效果。7.取消超级链接右击超级链接，选“取消超级链接”命令。五、插入活动元素-让课件网页活起来1.制作悬停按钮 定位插入点，单击“插入”/“组件”/“悬停按钮”，打开“悬停按钮”对话框。把动态按钮默认标签“按钮文本”，改成所需的按钮文字，单击“字体”按钮，在打开的“字体”（字体）对话框里设置您所需标签的字体。要为动态按钮创建超级链接，可直接在“链接到”框内键入要跳转的URL，也可单击“浏览”按钮，从当前打开的网站、WWW、本地磁盘中指定跳转目标。可重新指定按钮的前景颜色，不过如果按钮显示的是图像，前景颜色无效。当用户把鼠标移到动态按钮上时，按钮的颜色将自动发生变化，这是动态按钮最大的特色，至于颜色是怎样变化的，可通过“效果”和“效果颜色”框设定。还可改变按钮的宽度和高度（以像素为单位）。动态按钮还有一些高级用法，单击“自定义”按钮，在“自定义”对话框可设置播放声音或音乐和在动态按钮上显示图像等。2.制作横幅广告定位插入点后，单击“插入”/“组件”/“横幅广告管理器”命令，打开“横幅广告管理器”对话框。单击“添加”按钮从图片目录下分别获取图片序列（例如01.gif~04.gif），设置宽度、高度、渐变效果、显示每幅图片时间。要为横幅广告创建一个超级链接，只需在“链接”框内键入跳转目标的URL，或者单击“浏览”按钮定位跳转目标。3.制作字幕定位插入点后，单击“插入”/“组件”/“字幕”命令，打开“字幕属性”对话框。在“文本”框内键入要显示的字幕内容，设定文字游动“方向”、“速度”、“表现方式”、“文本对齐方式”等选项。在“表现方式”框内，可指定字幕游动的方式，默认是“滚动条”，如果选“幻灯片”，表示当第一个字符而不是最后一个字符触及左边界时就停止游动，如果选“交替”，表示像钟摆那样在左右边界内摆来摆去。可任意设置字幕的宽度和高度，字幕的宽度和高度既可以按像素的绝对值给出，也可以按Web浏览器窗口的百分比给出。默认情况下，字幕周而复始，不停地游动，周而复始。您可让字幕只游动若干次，方法是，不选中“连续”复选框，然后在“次数”框内选择要游动的次数。此外，还可给整个字幕加上“背景颜色”。4、插入Flash动画方法一：“插入”→“Web组件…”→“高级控件”→“插件”（1）将鼠标定位到要插入Flash动画的位置，单击菜单命令“插入”→“Web组件…”，在“插入Web组件”对话框中“组件类型”列表框中选“高级控件”，再在右边点选“插件”，单击“完成”按钮。（2）单击“插件属性”对话框中的“浏览”按钮，打开“选择插件数据源”对话框，选择要插入的swf课件，单击“打开”按钮。（3）返回“插件属性”对话框，设置合适的“高度”、“宽度”等项，单击“确定”按钮。双击插入到网页中的插件，或右击，选“插件属性”，均可打开“插件属性”对话框，进行修改。方法二：“插入”→“Web组件…”→“高级控件”→“ActiveX控件”（1）用插件的方法播放.swf课件，操作简单、实用，但如果要对.swf 课件进行更多的控制，应在“插入Web组件”对话框中点选“ActiveX控件”，单击“下一步”，打开“插入ActiveX控件”对话框，在控件列表框中查看是否有“ShockwaveFlashObject”，如果有，点选它，单击“完成”按钮。如果没有，则点击“自定义”按钮，打开“自定义ActiveX控件列表”对话框，勾选“ShockwaveFlashObject”控件，单击“确定”按钮，返回“插入Web组件”对话框，点选新增加的“ShockwaveFlashObject”，单击“完成”按钮。（2）这时网页中会出现一块白色矩形区域。用鼠标双击它，在弹出的“ActiveX控件属性”窗口中有三个选项卡，选“Flash属性”，设置好各选项。图中各选项的含义是：•影片URL：输入或粘贴要插入的Flash动画的链接地址；•品质：默认为“High”（高质量播放），推荐选择“Best”（最优播放）；•比例：推荐选择“ShowAll”（完全显示）；•播放：务必勾选；•循环：是否勾选该项取决于Flash动画的内容，通常要勾选该项；•显示菜单：通常勾选该项；•窗口模式：默认为Window，通常无须更改；•其它选项如“嵌入影片”、“设计字体”、“排列”、“背景颜色”通常按默认设置即可。六、在课件中巧用框架1．创建框架网页使用“文件”菜单上的“新建”，在“新建”对话框上单击“框架”选项，选择“横幅和目录”模板，单击“确定”按钮。2．把制作好的三个独立网页，指定到左框架、右框架和上框架单击上面框架网页的“设置初始网页”按钮，弹出“创建超级链接”对话框，在站点目录中选中上网页（top.htm），“确定”。按同法把左网页（left_frame.htm）和右网页（right_frame.htm）分别指定到左框架和右框架上。3．框架的基本操作单击一个框架内的任意地方，该框架就被选中，成为当前活动的框架。该框架中的网页也就成为当前活动的网页。把光标移到框架与框架之间的分隔线上，等光标改变形状后单击，可以选择所有的框架。4．改变框架的尺寸 把光标移到框架的边框上，等光标改变形状后拖动边框，直到框架拖拉成最适合各网页框架大小。5．修改框架的属性选择某框架，在框架上单击鼠标右键，在弹出的菜单中选择“框架属性”命令，在“选项”框内，选中“可在浏览器中调整大小”复选框，指定“显示滚动条”为“从不显示”。单击“框架网页…”按钮，在“网页属性”对话框，选中“显示边框”复选框。单击“确定”按钮2次，完成设置。6．保存框架网页点常用工具栏上的“保存”按钮，将弹出保存框架网页的对话框（共4个）。注意框架网页的命名要与框架一一对应起来，即top.htm对应上框架，左网页left_frame.htm对应左框架，右网页right_frame.htm对应右框架，index.htm对应整个框架。七、网页课件制作实例1.创建站点（1）在本地硬盘（如D盘）建一个文件夹,用英文或汉语拼音命名,如myweb,打开它。（2）启动MicrosoftFrontPage。（3）点“文件→新建→站点”,选择“空站点”图标，再在“指定新站点的位置”栏中输入新建的站点文件夹（D:myweb），或通过单击“浏览”按钮来指定。点“确定”后片刻，编辑区出现一个空站点。2.建立框架网页（1）点“文件→新建网页”，选框架网页”选项卡,双击“横幅和目录”。编辑区被划分为上框架、左框架和右框架3个区域。（2）点上框架区中的“新建网页”按钮,切换到上框架网页编辑状态,点“插入→组件→字幕”,在“字幕文字”栏中输入网页课件的标题,选“交替”表现方式和“连续”选项,确定。根据需要插入图片、gif动画或Flash动画。（3）点左框架区中的“新建网页”按钮,切换到左框架网页编辑状态,输入表示课件目录的文本，如“情境导入”、“新课”、“课堂练习”、“知识扩展”、“课堂小结”、“网上学习资源”、“课外探究”等（或插入相应的图片）。（4）点右框架区中的“新建网页”按钮,切换到右框架网页编辑状态,输入前言文本，插入与课件主题相关的图片或动画。该页相当于课件的封面、前言或首页。（5）点常用工具栏上的“保存”按钮，将弹出保存框架网页的对话框（共4个）。注意框架网页的命 名要与框架一一对应起来，即top.htm对应上框架网页，left_frame.htm对应左框架网页，right_frame.htm对应右框架网页，index.htm对应整个框架。3.建立内容网页右击“文件夹”窗格空白处,选“新建网页”,命名为“daoru.htm”。双击它，在右边的编辑区制作完成“导入”网页。点常用工具栏上的“保存”按钮。用同样的方法创建“新课”网页xinke.htm、“课堂练习”网页ktlx.htm、“知识扩展”网页zskz.htm、“课堂小结”网页ktxj.htm、“网上学习资源”网页wsxxzy.htm、“课外探究”网页kwtj.htm。4.制作超链接双击“文件夹”窗格中的index.htm（主页）,在左框架网页目录区选中表示“情境导入”的文本或图片，右击它，选“超链接”，在弹出的“插入超链接”对话框中选中daoru.htm,确认目标框架的默认值为main，点“确定”。用同样的方法将“新课”与xinke.htm、“课堂练习”与ktlx.htm、“知识扩展”与zskz.htm、“课堂小结”与ktxj.htm、“网上学习资源”与wsxxzy.htm、“课外探究”与kwtj.htm建立超链接关系。点“预览”按钮，点左框架网页目录区的超链接，看它所对应的网页是否在右框架区正确地显示。5．完善课堂练习网页双击“文件夹”列表中的ktlx.htm，在右框架区输入练习题（例如一道有A、B、C、D四个选项的多项选择题）。右击“文件夹”窗格空白处,选“新建网页”,命名为“right.htm”，该评价网页存放回答正确的反馈信息。双击它，点“插入→图片→来自文件”,点“从计算机上选择一个图片文件”按钮,选中合适的gif动画文件,确定。弹出“保存嵌入式图片”对话框，点“改变文件夹”,选“images”文件夹(默认存放站点图片的文件夹)，点“确定”。在插入的gif动画右侧输入表示鼓励、赞赏的文本（如“您真行！”、“您真聪明！”）。点“保存”按钮。用同样的方法制作“wrong.htm”，该评价网页存放回答错误的反馈信息。回到课堂练习网页,依次将A、B、C、D四个选项链接到评价网页,目标框架设为“新建窗口”，即在新窗口中打开评价网页。保存后预览。