实验十二Frontpage2000网页制作一

1、实验十二 Frontpage2000网页制作一一、实验目的：1. 掌握网页制作软件FrontPage的操作环境和工具。2. 掌握使用FrontPage建立基本网页和网站的过程。3. 掌握使用各种常用工具及菜单修饰编辑网页的操作方法。4. 掌握表格、动态效果、组件、超级链接、共享边框等的应用。二、实验准备：一）、整体规划网站建设的开始就应该有一个整体的战略目标，即确定站点的目标。站点的主题、定位、性质不同，设计的任务也不同。而我们的网页设计任务，就是作为设计者，把要表现的主题和要实现的功能得以实现。另外，还有网站结构的规划，网站主要包含了哪些栏目，不同的栏目应放在对应不同的目录中。二）、收集资源

2、确定好站点目标和结构之后，接下来要做的就是收集有关网站的资源，其中包括以下资源：1.文字资料：文字是网站的主题。无论是什么类型的网站，都离不开叙述性的文字;离开了文字即使图片再华丽，浏览者也不知所云。所以要制作一个成功的网站必须要提供足够的文字资料。2.图片资料：网站的一个重要要求就是图文并茂。如果单单有文字，浏览者看了不免觉得枯燥无味。文字的解说再加上一些相关的图片，让浏览者能够了解更多的信息，能增加浏览者的印象。3.音视频和动画资料：在网页上插入音视频及动画可以增添页面的音视觉和动感效果，更加能吸引浏览者。三）、页面布局具体的页面布局效果，包括了对文字、图片、音视频、动画等网页元素的具体布

3、置。三、实验内容及步骤：1.打开FrontPage2000，看到主界面如图12-1所示，执行【文件】【新建】【站点】，可根据个人的需要选择站点的类型，例如这里选择“个人站点”，并在左侧“选项指定新站点的位置”改变站点文件夹默认的保存位置，例如可改为“d:Myweb”（注意：盘符和路径符号不可省略），如图12-2所示，按确定按钮即初步生成一个具有五个网页的网站，如图12-3所示。视图工具栏菜单栏区图区工具栏区图区网页编辑窗体区图区图12-1 主界面指定站点的位置和名称图12-2新建站点图12-3 自动生成的网站2. 可将所有前期准备好的图片、音乐及视频文件等复制到“d:Mywebimages”目

4、录(即images文件夹)下。3、在“文件夹列表”中可通过双击来打开已创建的网页文件并对其进行编辑， 另外在“文件夹列表”中还可以进行添加、重命名、删除网页等操作。例如将名称为“myfav3.htm”的网页删除，如图12-4所示，即对该文件使用右键菜单“删除”命令。图12-4删除网页 又例如将文件名为“favorite.htm” 的网页重命名为“study.htm”：步骤是鼠标右键点击“favorite.htm”选择右键快捷菜单中的“重命名”后重新输入新文件名即可。4、分别点击和查看视图工具栏中的六种视图方式：网页视图、文件夹视图、报表视图、导航视图、超链接视图和任务视图，用不同的方式来查看和

5、管理当前网站。普通和预览模式5、下面以主页为例介绍一些常用的编辑操作（以下的编辑操作都是在“网页视图”中的“普通”模式下进行编辑的，而当要查看网页的即时效果时，选择“网页视图”中的“预览”模式，如图12-5所示），而对其他网页的编辑可参照这些操作进行自由创作。 图12-5 视图模式1）、在“网页视图”中双击文件夹列表中名称为“index.htm”的网页文件，打开主页（一般网站的主页文件名默认为“index.htm”）。主页是让访问者了解本站主旨的最佳场所，所以其中的内容应该全面而精简。首先更改导航栏属性，可为所有网页添加导航链接。操作步骤：在index.htm中右键点击导航栏中的“编辑此导航栏

6、的属性，以便在此处显示超链接”， 如图12-6所示。在弹出的快捷菜单中选择“导航栏属性”，并在该对话框中选择“主页下面的子页”。 图12-6修改导航栏属性2） 修改当前网页的标题：即显示在网页窗口中标题栏上的信息修改网页的标题给网页添加背景音乐通过【文件】【属性】命令打开设置对话框，如图12-7所示，在“标题”栏输入相应的信息，另外还可以设置当前网页的背景音乐。图12-7修改网页属性 3） 插入表格、文字、图片或其他元素可在网页中自由编辑和排版，例如删除掉不要的内容，输入相应的文字、插入准备好的图片等等。具体可做如下操作：a） 修改网页的框架：现主页是包含有上边框架和左边框架结构的网页，我们可

7、根据需要自由增删。操作步骤是：在“普通”模式下用右键单击网页任意位置，选择右键菜单中“共享边框”命令弹开下面的对话框。我们可对当前网页或是所有网页设置“上下左右”四个不同位置的边框，在这里只保留当前主页的“上边框”，去掉其他边框（如图12-8所示）。图12-8设置共享边框 b）表格的使用：删除主页中原有的不需要内容，为了方便排版使用表格来安排要插入的各对象，具体步骤可参考如下：l 先将光标定位在网页中，选择菜单【表格】【插入】【表格】，弹出如下对话框后创建一个5行4列，边框粗细为0的表格，见下图所示。图12-9插入表格l 按照自己事先设计好的站点及网页规划，将相应的内容填入到表格中，如图12-

8、10所示：注意：表格中各单元格的行高和列宽可根据“预览”视图模式中的显示效果自行调整，这里不作说明。图12-10网页内容一l 插入艺术字：若想插入美观的艺术字但在FrontPage2000中找不到艺术字工具时，可通过先在Word里制作好后再“复制粘贴”到FrontPage中的方法实现。例如先在Word中制作好内容为“最新更新”的艺术字后，再将其复制到表格中去（可先将表格中第3列的前4行进行【表格】【合并单元格】后再插入）见下图12-11所示：图12-11网页内容二l 插入图片：图片在网页中是很重要的组成元素，大家可根据需要插入各种图片。例如在这里我们使用【插入】【图片】【剪贴画】中的比喻、we

9、b框架、或是web符号类别中的图片，如图12-12所示。图12-12剪贴画一操作步骤：分别在表格的最后一行插入两张剪贴画（例如在比喻类别中选择需要的图片，如图12-13所示）；可在更新的各主题文字前插入web符号；在表格最后加上web框架中的线框作为分隔线。效果如图12-14所示： 图12-13剪贴画二注意： （1）当需要插入网上找到的图片时，应先将其保存到硬盘中(宜都保存到images文件夹中)然后再通过【插入】【图片】【来自文件】将其插入，而不要直接使用 “复制粘贴”图片资源。（2）插入图片的大小和位置可自行调整；在网页的最下方可加入常用的链接，版权，制作者，更新日期等信息。图12-14网

10、页内容三（3）若需要对图片或表格等对象需要进行随意移动时，可通过使用【格式】【定位】命令打开定位对话框进行设置：定位样式设为“绝对”，若还要设置所属层次可在下方的“Z顺序”中输入正数或负数值（正数值表示图片所在层次在文字上方几层，负数值则是位于文字层下方的几层）,如图12-15所示。 图12-15 设置对象的环绕样式和定位样式4）网页的保存： 在制作过程中，应该要记得及时保存以免丢失。需要保存当前网页时，通过【文件】【保存文件】菜单命令进行保存。若当前网页中有非网站目录中的嵌入式文件时，就将会弹出下面的“保存嵌入式文件”对话框要求对其进行保存，这时应该选择“改变文件夹”按钮将对象保存到相应的子

11、目录中。例如图片、音乐等应保存到“d:Mywebimages”目录下，如图12-16所示。 图12-16 保存网页5） 动态效果的设置：例如在网页中首行输入文字“今天是2008年3月1日，祝大家学习愉快！”，选中该行文字通过菜单【格式】【动态HTML效果】设置文字的动态效果（同样的，对图片也可以设置动态效果）。例如选择一种事件“鼠标悬停”，应用效果为“格式”（如图12-17所示），选择设置中打开“字体”对话框，可改变字体的颜色、大小等。图12-17 设置DHTML效果 注意：是在“预览”窗口中查看设置的动态效果哦！在“普通”窗口中是看不到动态效果的。你记住了吗？6） 组件的使用：l 滚动字幕：

12、可将光标定位在网页内容区的第二行，打开菜单【插入】【组件】【字幕】，在弹出对话框中的“文本”区输入相应的内容如“欢迎光临我的站点！”，或是最新的信息内容，或是新闻等等。其他设置可自行更改（如图12-18所示），页面效果如图12-19所示。图12-18设置滚动字幕动态HTML效果滚动字幕效果图12-19动态HTML与滚动字幕的效果图l 悬停按钮： 这里我们可以将常访问的链接制作成悬停按钮。例如先将网页下方的“我的学校”文字删除并将光标定位在此处，打开菜单【插入】【组件】【悬停按钮】，在对话框中的设置如图12-20所示，页面效果见图12-22。 注意：（1）在“预览”前需要先执行【文件】【保存文件

13、】命令才可在“预览”视图中看到显示效果。其大小的改变同图片一样拖动边框即可。（2）当需要制作多个悬停按钮时，可以用先复制若干个再逐个修改的方式。快速修改悬停按钮的方式是双击悬停按钮，打开属性对话框。图12-20 悬停按钮的设置l 横幅广告管理器：将鼠标定位在需插入的位置，例如在表格中最后一行的两幅剪贴画的中间插入。打开菜单【插入】【组件】【横幅广告管理器】，在对话框中的设置如图12-21所示。其中通过“添加”按钮来选择要显示的多幅图片，预览前同样需要先“保存文件”，效果如图12-22所示。图12-21设置横幅广告管理器图12-22悬停按钮与横幅广告管理器的效果图7）设置超级链接：文本和图片的超

14、链接设置方法都可以通过先选中其，再用右键快捷菜单选择“超链接”或是在主菜单中选择【插入】【超链接】命令打开如图12-23的对话框进行设置。操作步骤：将表格第一列中的各子网页主题名和第四列中的最新主题的标题设置超级链接：将“知识学习”链接到“study.htm”网页，将“休闲娱乐”链接到“interest.htm”，将“相册美图”链接到“photo.htm”；而更新主题可以是新网页也可以是网上资源的url地址：例如选中“计算机：合理设置虚拟内存”设置其链接为某个URL地址：/studyyard/lisnt.asp?id=6731，如图12-23所示。要链接到本网站中的网页方法是：选择该网页要链接到网络上的资源方法是：输入其url地址图12-23创建超级链接另外，对于图片还可以在“图片属性”中设置其超链接。通过图片的右键快捷菜单中选择“图片属性”或是选中图片使用菜单【格式】【