专题十二网页课件的制作.docx

1、专题十二网页课件的制作专题十二 网页课件的制作（FrontPage）一、训练目标本专题主要内容是使用Microsoft Office 软件包中的FrontPage 工具软件，制作网页课件。学习者通过训练应掌握制作网页课件的基本技能技巧，具体应达到以下训练目标：1. 学会创建站点。2. 掌握在FrontPage中编辑网页。3. 掌握网页导航设计。4. 学会网站的发布。二、基本原理FrontPage 是微软公司开发的网站制作工具，它集网页制作、网站管理、网站发布等多项功能于一体，是目前最为流行的网页制作与站点管理工具之一。作为微软办公系列软件Office 的一个重要组件，FrontPage 可以与

2、其他Office组件实现无缝连接地配合工作。它易学易用，其界面与Word相似，这对于已熟悉Word的用户来说，掌握起来更容易。FrontPage由于良好的易用性，被认为是优秀的网页初学者的工具。FrontPage 支持“所见即所得”的操作方式。用户无需学习HTML、Java、JavaScript、CGI、VB等建立网站的相关语言，也可以设计出包括文字、图像、声音等多种元素的精彩的网页。另外，FrontPage中还预制了多种主题(Themes)，便于设计者创立页面风格一致的站点。Frontpage中还吸收了Internet和Web的最新技术，比如支持框架、动态HTML、 ActiveX和Java

3、插件、 动态数据库连接技术，所以这款软件既适合初学者，也适合高级网页制作人员。三、软件环境Microsoft Office 2003FrontPage2003其它相关工具软件素材：图片四、训练内容在本专题训练中，共分六个任务，制作两个网页课件，通过具体任务逐步将网页课件丰富和完善，在此过程中完成对基本制作环节的练习。 任务一 使用模板创建网站操作步骤：1. 启动FrontPage 2003。点击计算机桌面左下角“开始”“程序”“ Microsoft Office”“Microsoft Office FrontPage 2003”；或双击桌面FrontPage 2003快捷图标。2. 认识操作界

4、面。启动FrontPage 2003，其操作界面如图121所示。FrontPage 2003的工作窗口主要由标题栏、菜单栏、工具栏、工作区、视图切换按钮、任务窗格以及状态栏组成。图121 FrontPage 初始界面标题栏位于FrontPage 2003工作窗口的最上面，用于显示正在编辑的文件名称，如图121中为“new_page_1.htm”，它是默认状态下的名称。菜单栏位于标题栏的下方，包含了与文档的创建和编辑相关的命令和选项，图121中的菜单栏中列出了11种类别的菜单项。工具栏以按钮的形式提供与菜单栏相同的网页编辑管理功能。FrontPage提供了14种工具栏，可选择“视图”菜单下的“工

5、具栏”级联菜单中的命令来显示或隐藏工具栏。默认情况下，窗口显示“常用”和“格式”工具栏。工作区是用户进行网页编辑或站点管理的区域，也是窗口中最重要的区域。视图切换按钮包括“设计”、“拆分”、“代码”、和“预览”等4种显示方式按钮。在不同的视图方式下，用户可以在其中进行不同的工作。任务窗格是一个可在其中执行很多常用任务的区域。FrontPage中提供了“新建”、“主题”、“剪贴板”和“搜索”等各种任务窗格。状态栏位于窗口的最底部，用于显示用户当前操作的提示信息以及当前网页的下载时间等。3. 网站视图模式。FrontPage 2003中提供了6种网站视图模式，分别是“文件夹”、“远程网站”、“报表

6、”、“导航”、“超链接”、“任务”等视图模式，如图122所示。“文件夹”视图的功能是通过创建内部文件夹，对诸多网页进行归类，这样做可以使站点组织结构清晰，网页制作方便。“远程网站”视图用于管理站点和站点内的文件的发布。“报表”视图主要用于查看站点的各种情况，如文件内容、更新链接、文件列表及变化情况等。利用“导航”视图可以清晰地看到当前站点的主页和其他网页的链接关系，也可设置站点的导航结构或添加、删除网页。“超链接”视图用于管理站点中各个网页的超链接。“任务”视图主要用于创建和管理任务。图122 网站视图模式4. 网页视图模式。FrontPage 2003中提供了4种网页视图模式，分别是“设计”

7、视图、“拆分”视图、“代码”视图、“预览”视图。“设计”视图是打开网页首先进入的视图，用户可以编辑、修改网页。“拆分”视图将工作区分为上下两部分，上半部分是代码区，下半部分是设计区。“代码”视图可以让用户以代码的方式编辑网页，“预览”视图可以让用户预览网页效果。单击视窗切换按钮实现网页视图各模式之间的切换。5. 执行“文件”“新建”命令（图123），打开“新建”任务窗格，如图124所示。 图123 “新建”命令 图124 “新建”任务窗格6. 在出现的任务窗格中的“新建网站”区域内若没有所需要的模板样式，可以单击“其他网站模板”，打开“网站模板”对话框，如图125所示。图125 “网站模板”对

8、话框7. 选择模板。在“网站模板”中单击所需要的网站模板，本例选择“只有一个网页的网站”。注意：FrontPage提供了多种网页模板，能快速地创建具有各种布局和功能的网页。网页模板是事先设计的网页，可包含网页设置、格式设置和网页元素。8. 创建网站。在“指定新网站的位置”文本框中输入Web网站的路径如“C:My Web Sitesnewsite”，此时创建的网站就存在于C盘的My Web Sites文件夹中，文件名为“newsite”，单击“确定”按钮，打开创建的网站的窗口（图126）。在“文件夹列表”窗口中，双击index.htm，将在FrontPage默认的设计视图中打开创建的网站主页的雏

9、形，如图127所示。图126 创建的网站目录 注意：每个网站都有一个主页，默认名称为“index.htm”。图127 网站主页 任务二 插入文本和图像操作步骤：1. 输入文本。在“index.htm”网页中输入“李白诗歌集”，页面效果如图128所示。图128 输入文本后的页面效果 3. 格式化网页中的文本。按住鼠标左键拖动选择“李白诗歌集”文本，执行“格式”“字体”命令。在字体对话框中设置字体参数（图129），“字体”为隶书、“字型”为粗体、“字号”为18磅、“颜色”为蓝色。单击工具栏中的图标，设置文本的突出显示的颜色为黄色。文本的最终效果如图1210所示。图129 “字体”对话框 图1210

10、 设置文本的效果图 4. 设置文本段落样式。选中“李白诗歌集”文本，执行“格式”“段落”命令（图1211）。在段落对话框中设置参数如图1212所示。单击“确定”按钮，关闭对话框。按段落要求设置后的效果如图1213所示。 图1211 “段落”命令 图1212 “段落”对话框图1213 设置段落的效果图 5. 插入水平线。回车换行，将光标定位在“李白诗歌集”文本的下一行，执行“插入”“水平线”命令（图1214），在网页中插入了一个水平线，页面效果如图12-15所示。图1214 “水平线”命令 图1215 插入水平线 选中水平线，单击鼠标右键，在弹出的快捷菜单中选择“水平线属性”命令，在对话框中将“

11、宽度”设置为100，“高度”设置为3，“颜色”为蓝色，页面效果如图1216所示。图1216 设置水平线的效果图 注意：水平线用来分隔网页中的不同内容。在标题和主题内容之间使用水平线可以使标题一目了然，同时主题部分的内容也独立成为一体。6. 导入文本。回车换行，将光标定位水平线的下一行，执行“插入”“文件”命令（图1217），弹出的“选择文件”对话框（图1218），在文件类型中选择“Word 972003 文档 （*.doc）”文档格式，选择“李白简介.doc”文档，单击“打开”按钮，FrontPage 2003会自动将Word文档转换为HTML格式，转换后的效果如图1219所示。 图1217

12、“文件”命令 图1218 “选择文件“对话框” 图1219 导入文本后的效果图 6. 设置文本段落样式。选中刚才导入的文本，执行“格式”“段落”命令，在段落对话框中设置参数如图1220所示。单击“确定”按钮，关闭对话框。按段落要求设置后的页面效果如图1221所示。图1220 ”段落“对话框 图1221 设置段落后的效果图 8. 插入图片。先将图片文件拷贝到站点下的“images”文件夹中，然后将光标定位在“李白简介”文本的第一段段后，执行“插入”“图片”“来自文件”命令（图1222），在弹出的对话框中选择“lb.jpg”图像文件，把图片插入到网页中。插入图片后的效果如图1223所示。图1222

13、 “来自文件”命令 图1223 插入图像后的效果图 注意：设计网站时，利用不同的文件夹，将不同的网页内容分门别类地保存。例如将图片统一保存在文件夹“images”中，下次再使用图片时，就直接从“images”文件夹中读取。9. 设置图片属性。用鼠标左键双击图片，弹出“图片属性”对话框，设置参数，参数设置如图1224所示，“环绕样式”设为“右”环绕，“边框粗细”设为“2”，“水平间距”设为“20”，“垂直间距”设为“20”，图文混排效果如图1225所示。图1224 “图片属性”对话框 图1225 图文混排效果 9保存网页文件。在网页名称上单击鼠标右键，在弹出的快捷菜单上选择“保存”命令（图12-

14、26），保存修改过的文件。图1226 “保存”命令 10输入文本。在李白简介文本下方继续输入文本内容，页面效果如图1227所示。图1227 输入文本后的效果 11插入图片库的横排版式。将光标定位在“李白图册”文本的下一行，执行“插入”“Web组件”命令（图1228），弹出的“插入Web组件”对话框（图1229），在组件类型中选择“图片库”，在“选择图片库选项”中选择“横排版式”，再单击“完成”按钮。 图1228 “Web组件”命令 图1229 “插入Web组件”对话框在“图片库属性”面板中单击“添加”按钮下“图片来自文件”，在打开的面板中选择“pic1pic4”4张图片打开（图1230）。图1

15、230 “图片库属性”对话框 单击“布局”选项卡，在“选择一种布局”中选择“水平版布局”，再在“每行的图片数”中选择“4” （图1231），然后单击“确定”按钮。在网页中图片的“水平版布局”排列效果如图1232所示。图1231 “图片库属性”对话框 图1232 插入图片库后的效果图 注意：图片库是FrontPage新增的Web组件，它的出现使FrontPage的功能更加强大和完善。图片库适用于那些具有大量图片介绍或展览的网页，例如一个公司、学校、风景区、图片展等。“横排版式“即在页面上水平编排一组图片。自动创建图像的缩略图。分多行显示缩略图，说明文字将置于每幅图像的下面。12保存文件，单击视窗

16、切换按钮中的“预览”按钮，预览网页效果。 任务三 创建网页操作步骤： 1. 新建网页。打开上一个任务创建的站点，执行“文件”“新建”命令，打开“新建”任务窗格，在出现的任务窗格中的“新建网页”区域内单击“空白网页”，新建一个空白网页。2. 导入文本。执行“插入”“文件”命令，弹出的“选择文件”对话框，在文件类型中选择“Word 972003 文档 （*.doc）”文档格式，选择“望庐山瀑布.doc”文档，单击“打开”按钮，FrontPage 2003自动将Word文档转换为HTML格式，转换后的效果如图1233所示。图1233 新建网页3. 设置文本段落样式。选中刚才导入的文本，执行“格式”“

17、段落”命令，在段落对话框中设置参数如图1234所示。单击“确定”按钮，关闭对话框。按段落要求设置后的效果如图1235所示。图1234 “段落”对话框图1235 设置段落后的效果图 4. 添加背景颜色。执行“格式”“背景”命令（图1236），在网页属性对话框中设置“背景颜色”为浅黄色（图1237）。设置后的网页效果如图1238所示。 图1236 “背景”命令 图1237 “网页属性”对话框图1238 设置背景后的效果图注意：网页中的背景设计是相当重要的，尤其是对于个人主页来说，好的背景不但能影响访问者对网页内容的接受程度，还能影响访问者对整个网站的印象。在FrontPage中，可以使用颜色和图片

18、为网页创建更美观的背景。FrontPage不但可以设置背景颜色和背景图像，也可为网页设置背景音乐。执行“格式”“背景”命令，打开网页属性对话框，选择“常规”选项面板，选择文件来作为网页的背景音乐。5. 保存网页文件。在网页名称上单击右键，在弹出的快捷菜单上选择“保存”命令，在弹出的对话框中（图1239），设置“文件名”为s1.htm，单击“保存”按钮保存网页文件。图1239 “另存为”对话框 5. 6. 采用相同的办法创建s2.htm和s3.htm网页，两个网页的内容分别是赠汪伦、将进酒两首诗的内容，网页效果如图1240和图1241所示。图1240 s2页面效果 图1241 s3页面效果 任务

19、四 创建超级链接1. 单击工作区上方的“index.htm”文件名，切换到index.htm网页。选定“ 望庐山瀑布 ”文本，执行“插入”“超链接”命令（图1242），弹出“插入超链接”对话框（图1243），在该对话框中间的文件列表框中自动显示当前站点的文件列表，选择“s1.htm”文件。 图1242 “超链接”命令 图1243 “插入超链接”对话框 单击“目标框架”按钮，弹出“目标框架”对话框（图1244），将“公用的目标区”设为“新建窗口”，按“确定”按钮，关闭对话框。图1244 “目标框架”对话框 注意：超链接是从一个网页指向另一个目的端的链接，比如说指向另一个网页或者相同网页上的不同位

20、置。这个目的端通常是另一个网页，但它也可以是一幅图片、一个电子邮件地址、一个文件（如多媒体文件或者Microsoft Office文档）或者一个程序。超链接可以是文本或者图片。根据超链接在网页中表现形式的不同，可以分为文本超链接和图像超链接两种类型。文本超链接：通常以带下划线的字符或字符串的形式出现。图像超链接：在网页中表现为一幅图片。既能够指向单一的链接目标，也可以根据图像区域的不同，指向多个链接目标。除了表现形式的不同，文本超链接和图像超链接的功能完全相同。2. 使用相同的方法分别为“赠汪伦”、“将进酒”两段文本创建超级链接，链接的网页为“s2.htm”和“s3.htm”网页文件。创建链接

21、后的index网页页面效果如图1245所示。单击“Ctrl+Click”即可打开链接的目标页面“s1.htm”。图1245 创建超链接后的效果图 3. 设置超链接颜色。在网页中单击鼠标右键，弹出快捷菜单（图1246），选择“网页属性”命令，弹出“网页属性”对话框，选择“格式”选项卡（图1247），选择三种颜色来表示超链接的不同状态。图1246 “网页属性”快捷菜单命令 图1247 “网页属性”对话框 注意：可以选择在Web浏览器中显示超链接的颜色，选择三种颜色，来表示超链接的不同状态：“超链接”表示未被选中的超链接；“当前超链接”表示当前被选中的超链接；“已访问过的超链接”表示已经被浏览过的超

22、链接。4. 插入友情链接图片。将光标定位4张李白图片的下一行，执行“插入”“图片”“来自文件”命令，在弹出的对话框中选择“link.jpg”图像文件，把图片插入到网页中。插入图片后的效果如图1248所示。图1248 图片插入效果 5. 创建图像超链接。在“友情链接”图片上右击鼠标，弹出下拉菜单选择“超链接”命令或者单击工具栏图标（图1249），在“插入超链接”面板的“地址”文本框中（图1250），输入“”网址，单击“确定”按钮，关闭对话框。图1249 “超链接”命令 图1250 “插入超链接” 对话框切换“预览”视图或按快捷键“F12”在浏览器中预览，在友情链接图片上单击鼠标左键，打开链接的“

23、中国太白网”页面。链接后的网页如图1251所示。图1251 链接后的页面效果 注意：链接不仅能链接到本站的页面上，而且可以连接到internet站点中的网站，此时链接目标中的URL应该是绝对的URL。例如：http：/等。创建连接到internet站点的超连接的任务同样在“插入超链接”对话框中进行。6. 插入电子邮件链接图片。将光标定位在“友情链接”图片下一行，执行“插入”“图片”“来自文件”命令，在弹出的对话框中选择“email.gif”图像文件，把图片插入到网页中。插入图片后的效果如图1252所示。图1252 插入图片后的效果图 7. 创建电子邮件链接。选择“电子邮件链接图片”，执行“插入

24、”“超链接”命令，单击“插入超链接”面板的“电子邮件地址”按钮（图1253），在对话框中输入电子邮件地址“mailto:newsite”，输入主题内容为“欢迎光临本网页！”，单击“确定”按钮，关闭对话框。插入电子邮件链接的页面效果如图1254所示。图1253 “插入超链接”对话框 图1254 创建超链接后效果图 注意：电子邮件地址作为超链接的链接目标与其他链接目标不同。当用户在浏览器中单击指向电子邮件地址的超链接时，将会打开默认管理器的新邮件窗口，其中会提示用户输入信息并将该信息传送到指定Email地址。任务五 使用框架和表格布局网页操作步骤：1创建空白网站。执行“文件”“新建”命令，打开“新

25、建”任务窗格，在出现的任务窗格中单击“其他网站模板”，打开“网站模板”对话框（图1255），在“网站模板”中单击“空白网站”，在“指定新网站的位置”文本框中输入Web网站的路径如“C:My Web Sitesframesite”，单击“确定”按钮，打开创建的网站的窗口。图1255 “网页模板”对话框 2利用模板创建框架网页。执行“文件”“新建”命令，打开“新建”任务窗格，在出现的任务窗格中的“新建网页”区域内单击“其他网页模板”，弹出“网页模板”对话框，单击“框架网页”选项卡（图1256），单击选择“横幅和目录”模板，然后单击“确定”按钮，在工作区中就看到“横幅和目录”模板网页，如图1257所

26、示。图1256 “网页模板”对话框 图1257 “横幅和目录”模板网页 注意：在网页设计时，为了使网页版面美观，具有良好的视觉效果，需要对页面进行网页布局，设置网页导航效果。在FrontPage中，网页导航是通过框架模板来实现的，该功能用来将浏览器视窗分成不同的框架，每一个框架可以显示不同的网页。框架网页是一种特殊的HTML网页，可用来将浏览器视窗分成不同的区域，此区域成为框架，每一个框架可以显示不同的网页。框架网页不包括可见内容，它只用来记载其他网页显示什么和如何显示。当单击框架中显示的网页上的超链接时，超链接指向的网页显示在另一个框架中，成为目标框架。框架最常用的用途就是导航。一组框架通常

27、包括一个含有导航条的框架和另一个要显示主要内容的页面的框架。使用框架有以下优点：一是访问者的浏览器不需要为每个页面重新加载与导航相关的图形。二是每个框架都具有自己的滚动条，因此访问者可以独立滚动这些框架。例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么访问者向下滚动到页面底部时就不需要再滚动回顶部来使用导航条。 使用框架具有以下缺点：一是可能难以实现不同框架中各元素的精确图形对齐。二是对导航进行测试可能耗费较多时间。此外，各个带有框架的页面的URL不显示在浏览器中，因此访问者可能难以将特定页面设为书签（除非您提供了服务器代码，使访问者可以加载特定页面的带框架版本。）创建框架网页

28、有两种方法：一种是直接使用HTML编辑；另一种是用FrontPage的模板来集成框架网页。利用模板能够快速地创建各种结构的框架网页，FrontPage提供了许多优秀的特性使用户可以方便地编辑框架网页。3制作顶部框架网页。单击顶部框架的“新建网页”按钮，输入页面标题为“FrontPage网页动态特效”，并将其设置为艺术字，艺术字的字体为宋体，字号为36，页面效果如图1258所示。图1258 顶部框架网页 4修改顶部框架属性。选中顶部框架，执行“框架”“框架属性”命令（图1259），弹出“框架属性”对话框（图1260），将“框架高度”设为150，修改后的页面效果如图1261所示。 图1259 “框

29、架属性”菜单命令 图1260 “框架属性”对话框图1261 左部框架网页 注意：创建网页框架后，可以对其属性进行设置。例如，调整框架的尺寸、设置边距、指定框架中是否存在滚动条、调整框架之间的间距以及指定是否允许访问者调整框架大小等。5插入水平线。在艺术字的下一行插入一个水平线，设置“高度”为3，“颜色”为蓝色，页面效果如图1262所示。图1262 修改后的框架网页 6制作左部框架网页。单击左部框架的“新建网页”按钮，输入页面导航项目“制作悬停按钮”和“制作横幅广告管理”两段文本，修改字体“大小”为3（12磅），页面效果如图1263所示。图1263 修改后的网页文件 7修改左部框架属性。选中顶部

30、框架，执行“框架”“框架属性”命令，弹出“框架属性”对话框，将“框架宽度”设为250。修改后的页面效果如图1264所示。图1264 修改后的网页效果 8设置左部框架文本对齐方式。选中左部框架中的两段导航文本，执行“格式”“段落”命令，在“段落”对话框中，设置“对齐方式”为居中，“行距大小”为双倍行距。页面效果如图1265所示。图1265 框架网页 9制作右部框架网页，用表格布局页面。单击右部框架的“新建网页”按钮，执行“表格”“插入”“表格”命令，在“插入表格”对话框中设置为2行1列，“对齐方式”为居中，修改宽度为70% ，边框颜色为绿色（图1266），单击“确定”按钮。图1266 “表格属性”对话框 在表格的第一行输入“制作悬停按钮”，并将此段文本水平居中对齐。在表格的第二行导入文件，选中导入文本，执行“格式”“段落”命令，在“段落”对话框中，设置“对齐”为左对齐，“首行缩进”为36px，“行距大小”为双倍行距。页面效果如图1267所示。图1267 表格效果图 注意：在网页设计时，可使用表格来组织页面信息或控制页面布局。表格是用来在HTML页面上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成，每行又由一个或多个单元格组成。在实际应用时，不显示边界的表格显示出强大的规划页面的功能，可视页面上的各元素组织得更加合理有序。10设置单元格