1、实验十四 FrontPage 2002网页制作,一、实验目的二、实验要点三、实验内容四、上机练习,一、实验目的,(1) 熟悉FrontPage 2002的启动与关闭。(2) 掌握个人站点的创建方法。(3) 熟悉网页制作的基本运用。(4) 掌握表单的使用。,二、实验要点,1. 创建站点2. 网页制作常用操作3. 插入图像4. 使用表格5. 使用框架6. 使用HTML语言,创建站点,依次单击“文件”|“新建”|“网页或站点”命令,在工作区的右侧会显示一个标题为“新建网页或站点”的任务窗格,任务窗格中会显示用户所能进行的操作。通过单击任务窗格中的命令,可以新建一个网页或站点。单击任务窗格中的某一个模
2、板命令,屏幕弹出有关该站点模板的对话框。用户可根据需要选择一种类型的站点模板。当选择不同的模板时,对话框右侧的说明部分会有关于所选模板的介绍。选择好了之后,单击“确定”按钮,系统将生成这个站点所要求的文件并进入网页编辑状态。,网页制作常用操作,(1) 新建网页 (2) 复制、删除和重命名网页 (3). 编辑网页,新建网页,单击“新建网页或站点”任务窗格中的“网页模板”命令,屏幕弹出“网页模板”对话框。用户选择一种网页的模板。单击“网页模板”对话框中“常规”选项卡下的任何一个模板,在右侧都会显示说明和预览(如果有预览的话)。其中的“普通网页”模板是一个完全空白的网页,使用常用工具栏上的“新建网页
3、”命令就是新建这样一个普通网页。用户可根据需要选择一个合适的模板。同样,在文件夹视图和导航视图下也可以用同样的方法新建网页,方法就是在工作区空白的地方单击鼠标右键,选择弹出菜单中的“新建网页”命令就可以建立新“普通网页”了。,复制、删除和重命名网页,删除网页的方法是,在文件夹视图或文件夹列表中右键单击要删除的文件,在弹出的菜单中选择删除网页命令。复制和重命名操作与删除操作类似,只需在文件夹视图或文件夹列表中用右键单击要操作的文件,在弹出的菜单中选择相应的命令即可,编辑网页, 添加文本 设置文本格式 预览网页 设置网页属性 保存网页, 添加文本,必须在网页视图下才能为网页添加文本。与在Word
4、2002中的操作类似,用户只在需要输入文本的地方单击鼠标的左键,设置好插入点,就可以从键盘上将文本输入。如果要插入“换行符”、“水平线”和“符号”,只需要单击“插入”菜单,从中选择相应命令。当然,用户同样能用中文输入法的软键盘功能将一些特殊的符号输入到文件中。, 设置文本格式,FrontPage 2002中选择文本的技巧和在Word 2002中选择文本的技巧是一样的。选择“格式”菜单下的“字体”命令,就会弹出“字体”对话框,用户需要在这个对话框中做出一些选择,以便将所选的文本修改成合适的外观。这里的操作与在Word 2002中完全一样,就不多赘述了。对段落的格式进行设置也是在“格式”菜单中进行
5、。此外,还可以为文字设置动态HTML效果。单击“格式”菜单中的“动态HTML效果”命令,工作区中将显示DHTML效果工具栏。有“单击鼠标”、“双击鼠标”、“鼠标悬停”、“网页加载”四种事件可供选择,选定之后再在应用下拉框中选择一种效果,不同事件对应的可选效果是不同的。, 预览网页,在网页的制作过程中随时都可以预览。有两种预览的方法: 在“文件”菜单中有“用浏览器预览”命令,使用这个命令后屏幕会把安装在本地的浏览器列一个表,允许用户选择其中的一个浏览器来预览网页。 单击工作区左下角的预览标签,即可预览正在制作的网页。因为在不同的浏览器中显示的效果可能是不同的,而将来访问者有可能使用任何的浏览器来
6、访问网站,所以制作时使用不同的浏览器预览是很必要的。, 设置网页属性, 在网页中空白的地方单击鼠标右键,选择“网页属性”命令,可弹出“网页属性”对话框。 设置网页的标题。 设置网页背景,以免在不同的浏览器中显示效果差异过大。还有其他选项,如可以为网页添加背景图片或水印,还可以修改超链接的属性,设置已访问和未访问的超链接的颜色等, 保存网页,网页制作好了之后,选择“文件”菜单下的“保存”命令,可将文件保存起来。如果网页是第一次保存,屏幕会弹出标题为“另存为”的对话框,提示用户保存的路径和文 件名。,插入图像,在FrontPage 2002中插入图像的方法和在Word 2002中一样,使用“插入”
7、菜单下的“图片”菜单中的“来自文件”命令,可以打开“图片”对话框,利用这个对话框可以很方便地将图片文件插入到网页中,使用表格,由于用表格组织文本、图像、空白区域的功能方便强大,使得网页的作者能通过使用表格轻易地让页面变得整齐、美观和生动。依次选择“表格”|“插入”|“表格”命令,屏幕上会弹出“插入表格”对话框,这里的对话框和Word 2002中的非常相似,填写好表格的行数和列数之后,单击“确定”后完成插入表格。在FrontPage 2002中编辑表格也和Word 2002中的操作非常类似,在此不再赘述。,5. 使用框架,框架能把浏览器窗口分成几个部分,每个部分都能显示一个独立的网页,这样在一个
8、浏览器窗口中同时可以观看多个页面。各个框架之间还可以设置超链接,用来动态更新浏览器中的部分内容。 创建框架 编辑框架 设置框架属性 保存框架,创建框架, 单击“新建网页或站点”窗格中的“网页模板”命令,屏幕会弹出“网页模板”对话框。 切换到“框架网页”选项卡。从列出的多种框架模板中选中某个模板图标,单击“确定”按钮。 在单击“确定”之后,进入编辑状态。 编辑完成之后保存即可。,编辑框架, 删除框架:使用鼠标单击要删除的框架,然后选择“框架”菜单下的“删除框架”命令,即可将所选框架删除。此操作仅会删除框架,并不能删除与其对应的框架源文件。 拆分框架:使用鼠标单击希望拆分的框架,然后选择“框架”菜
9、单下的“拆分框架”命令,屏幕将提示要将所选框架拆分为行还是拆分为列,根据用户的意愿,按照提示完成选择后单击“确定”。,设置框架属性,单击“框架”菜单下的“框架属性”命令或在框架内单击鼠标右键,选择“框架属性”命令,屏幕将会弹出“框架属性”对话框,在这里可以为每个框架设置属性。, 保存框架,用户需要分别保存每个框架文件,并要保存框架集本身。第一次保存时无论使用“文件”菜单中的“保存”命令还是“另存为”命令都会弹出“另存为”对话框。,使用HTML语言,HTML(Hypertext Markup Language)称为超文本标记语言。这种语言使用一些专用的标记,用纯文本的形式描述网页中的特征。有浏览
10、器解释和翻译,就像一种计算机语言一样。HTML的标记很多是成对出现的,以便对夹在中间的内容进行描述与控制。单击FrontPage 2002工作区中的HTML标签,会进入一个类似文本编辑器的界面。在这里用户可以使用HTML语言编辑文本。有关HTML语言中标记的用法,读者可参阅教材第8章有关“使用HTML语言”小节。,三、实验内容-1,制作如图14-1所示的网页文件: 打开FrontPage 2002应用程序。 单击“视图”|“任务窗格”命令,打开“新建网页或站点”任务窗格。 在“新建网页或站点”任务窗格中选择“网页模板”命令,弹出“网页模板”对话框。 选择“带有两个边栏的一栏正文”模板,如图14
11、-2所示,单击“确定”。 此时编辑屏幕显示出选定模板样式,向其中输入相关文本,如:在“这里是您的标题”中输入“企鹅也是鸟吗?”;在“图片说明”上方插入有关企鹅的图片;在“指向其他链接”中输入要指向的其他链接文本。,三、实验内容-2, 单击工作区左下角的“预览”标签,切换到“预览”视图下查看网页效果。 设置效果:设置字体颜色:执行“格式”|“字体”命令,打开“字体”对话框,从中选择一种颜色。设置表格底色:执行“表格”|“表格属性”|“表格”命令,打开“表格属性”对话框,在这里面为表格设置背景色。设置标题的DHTML效果:选中标题,选择“格式”|“动态HTML效果”,弹出“DHTML效果”对话框,在此分别选择“鼠标悬停”、“格式”,然后分别“选择边框”和“选择字体”。当切换到“预览”方式下看效果,鼠标悬停后,标题和正文都变成用户设置好的效果。,图14-1 制作好的网页,图14-2 “带有两个边栏的一栏正文”模板,四、上机练习,利用个人站点模板,创建一个以RAK为主题的站点,并创建如下的“index.htm”的网页。,