项目4--网页处理-课件

计算机应用基础 项目项目4 网页处理网页处理 7/30/20241南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页回顾及作业点评回顾及作业点评 上次任务是利用所掌握的数据处理上次任务是利用所掌握的数据处理知识，制作学生会考成绩汇总表知识，制作学生会考成绩汇总表点评学生提交的作业点评学生提交的作业7/30/20247/30/20242 2南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页任务的引入任务的引入大大家家平平时时见见到到网网上上丰丰富富多多彩彩的的网网页页是是否否心心动动过过，我我可可以以做做吗吗？本本项项目目就可以完成大家的心愿。就可以完成大家的心愿。7/30/20247/30/20243 3南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页本单元任务本单元任务u引导训练引导训练创建个人网站创建个人网站任务任务1 1：创建个人网站站点：创建个人网站站点任务任务2 2：创建个人网站页面：创建个人网站页面u回顾训练回顾训练班级网站的制作班级网站的制作 u拓展训练拓展训练大学生生活网站的制作大学生生活网站的制作u实训练习实训练习公司网站的制作公司网站的制作7/30/20247/30/20244 4南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页能力目标能力目标 通过通过Microsoft FrontPage 2019Microsoft FrontPage 2019的学的学习，能够根据需求进行个人站点和个人网习，能够根据需求进行个人站点和个人网页网页的设计、制作、发布及管理。页网页的设计、制作、发布及管理。7/30/20247/30/20245 5南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页知识目标知识目标 1 1、掌握、掌握Microsoft FrontPage 2019Microsoft FrontPage 2019基本操作；基本操作；2 2、掌握、掌握FrontPage 2019FrontPage 2019中表格操作、文本编辑、中表格操作、文本编辑、图像操作；图像操作；3 3、掌握文本、图像、热点超链接，书签超链接；、掌握文本、图像、热点超链接，书签超链接；4 4、掌握框架网页的操作；、掌握框架网页的操作；5 5、掌握表单及设置表单属性、掌握表单及设置表单属性。7/30/20247/30/20246 6南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 Microsoft Microsoft FrontPage FrontPage 20192019是是微微软软公公司司推推出出的的一一款款网网页页设设计计、制制作作、发发布布、管管理理的的软软件件。由由于于其其集集成成了了编编辑辑、代代码码、预预览览和和所所见见即即所所得得特特性性，既既具具备备良良好好的的表表格格控控制制能能力力，又又能能与与Microsoft Microsoft OfficeOffice各各软软件件实实现现无无缝缝连连接接，被被认认为为是是网网页页初初学学者者的的优优秀应用工具之一。秀应用工具之一。7/30/20247/30/20247 7南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页引导训练引导训练4.14.1创建个人网创建个人网站站点站站点7/30/20247/30/20248 8南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页任务描述任务描述 个人网站是展示自己的一个很好的平台，个人网站是展示自己的一个很好的平台，内容包括个人基本情况、求学经历、工作实践内容包括个人基本情况、求学经历、工作实践经历、所获奖励、简介等。本任务主要利用经历、所获奖励、简介等。本任务主要利用FrontPage 2019实现个人网站的建立与页面内实现个人网站的建立与页面内容的编辑管理。容的编辑管理。本任务通过对个人网站站点的建立、首页本任务通过对个人网站站点的建立、首页内容的编辑，了解内容的编辑，了解FrontPage 2019的启动与退的启动与退出，熟悉出，熟悉FrontPage 2019的操作界面，掌握新的操作界面，掌握新建站点、表格操作、文本编辑、图像操作等。建站点、表格操作、文本编辑、图像操作等。7/30/20247/30/20249 9南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页技术要点技术要点1、FrontPage 2019的的操作；操作；2、FrontPage 2019站站点的建立；点的建立；3、文字与图像的编辑处、文字与图像的编辑处理理4、组件的使用、组件的使用5、框架网页、框架网页6、页面保存、页面保存7/30/20247/30/20241010南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页分别按以下两种方法启动分别按以下两种方法启动FrontPage 1）从）从“开始开始”菜单启动。菜单启动。单击单击“开始开始|程序程序|Microsoft Office/FrontPage 2019”命令。命令。2）利用桌面快捷图标启动。）利用桌面快捷图标启动。在桌面上创建在桌面上创建FrontPage 2019快捷图标，快捷图标，双击此快捷图标即可。双击此快捷图标即可。操作演示操作演示1、启动、启动FrontPage 7/30/20247/30/20241111南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 打开打开FrontPageFrontPage时选右侧栏的时选右侧栏的“新建新建网站网站”。也可在。也可在“常用常用”工具栏中工具栏中“新建新建普通网页普通网页”按钮的下拉菜单中选择按钮的下拉菜单中选择“站点站点”。如图。如图4-14-1所示：所示：2、新建、新建站点站点 操作演示操作演示7/30/20247/30/20241212南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 图图4-1 新建一个网页的网站新建一个网页的网站操作演示操作演示2、新建、新建站点站点7/30/20247/30/20241313南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页示例：在示例：在D盘新建盘新建“个人网站个人网站”站点。站点。1）打开）打开D盘，新建盘，新建“个人网站个人网站”文件夹。文件夹。2）回到）回到FrontPage 2019的操作界面，单击的操作界面，单击“文文件件|新建新建”菜单命令，在窗口的右方弹出菜单命令，在窗口的右方弹出“新建新建”任务窗格。任务窗格。3）在）在“新建新建”任务窗格中的任务窗格中的“新建网站新建网站”选项内选项内选择选择“由一个网页组成的网站由一个网页组成的网站”，弹出，弹出“网站模网站模板板”对话框，如图对话框，如图4-2所示。所示。操作演示操作演示2、新建、新建站点站点7/30/20247/30/20241414南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 图图4-2 网站模板网站模板 2、新建、新建站点站点操作演示操作演示7/30/20247/30/20241515南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页4）在）在“常规常规”选项卡中选项选项卡中选项“只有一个网页的网只有一个网页的网站站”，在，在“指定新网站的位置指定新网站的位置”文本框中输入网文本框中输入网站的地址：站的地址：“D:个人网站个人网站web”。5）单击）单击“确定确定”按钮，新建站点如图按钮，新建站点如图4-3所示。所示。2、新建、新建站点站点操作演示操作演示7/30/20247/30/20241616南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 图图4-3新建站点新建站点 2、新建、新建站点站点操作演示操作演示7/30/20247/30/20241717南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页在在新新建建站站点点文文件件夹夹列列表表中中，有有系系统统自自动动建建立立的的“_private”和和“images”两两个个文文件件夹夹。“images”文文件件夹夹中中可可以存放用户编辑站点时用到的图片以存放用户编辑站点时用到的图片“_private”文文件件夹夹对对于于浏浏览览者者来来说说是是隐隐藏藏的的，用用户户可可以以把把一一些些不不想想让让浏浏览览者者看看到到的的网网页页文文件件放放在在这这个个文文件件夹夹里里。另另外外，“index.htm”是是用用户户在在新新建建只只包包含含一一个个网网页页的的站站点点时时，frontPage2019自动为用户创建的站点主页。自动为用户创建的站点主页。7/30/20247/30/20241818南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页打开网页的方法：打开网页的方法：1）单击）单击“文件文件|打开打开”菜单命令，弹出菜单命令，弹出“打开文件打开文件”对话框，对话框，index.htm,单击单击“打开打开”按钮。按钮。2）文件夹视图下，双击）文件夹视图下，双击index.htm3）文件夹视图下，右击）文件夹视图下，右击index.htm，在快捷菜，在快捷菜单中选择单中选择“打开打开”命令。命令。3、打开、打开网页网页 操作演示操作演示7/30/20247/30/20241919南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页1）网页标题的设置）网页标题的设置 FrontPage中，网页标题不同于页面的标中，网页标题不同于页面的标题，网页标题不在页面内显示，在标题栏显示。题，网页标题不在页面内显示，在标题栏显示。设置网页标题是在网页属性中，如图设置网页标题是在网页属性中，如图4-4所示，所示，其中其中“个人介绍个人介绍”就是网页的标题。就是网页的标题。4、页面、页面编辑和编辑和处理处理 操作演示操作演示7/30/20247/30/20242020南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 图图4-4 网页属性网页属性 操作演示操作演示7/30/20247/30/20242121南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页2）表格操作）表格操作示例：在主页面插入一个五行一列的表格，具示例：在主页面插入一个五行一列的表格，具体要求：体要求：（1）插入表格）插入表格（2）设置表格属性）设置表格属性（3）设置单元格属性）设置单元格属性（4）嵌套一个）嵌套一个1行行2列的表格列的表格（5）嵌套一个）嵌套一个2行行9列的表格列的表格（6）合并单元格）合并单元格（7）单元格背景设置）单元格背景设置 操作演示操作演示4、页面、页面编辑和编辑和处理处理 7/30/20247/30/20242222南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页（1）插）插入表格入表格 插入表格有插入表格有3种方法可供选择：种方法可供选择：l单击单击“常用常用”工具栏中的工具栏中的“插入表格插入表格”按钮，在打开的表按钮，在打开的表格示意框中拖动鼠标选择格示意框中拖动鼠标选择5行行1列的表格。列的表格。l单击单击“表格表格|插入插入|表格表格”菜单命令，弹出菜单命令，弹出“插入表格插入表格”的的对话框，在对话框，在“大小大小”选区中选选区中选5行行1列列l单击单击“表格表格|绘制表格绘制表格”菜单命令，打开菜单命令，打开“表格表格”工具栏；工具栏；单击单击“绘制表格绘制表格”的按钮，当光标变为笔的形状时，绘的按钮，当光标变为笔的形状时，绘制制5行行1列的表格。列的表格。操作演示操作演示7/30/20247/30/20242323南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页（2）设）设置表格置表格属性属性 要求：指定宽度为要求：指定宽度为100%，边框粗细为，边框粗细为0，其他项为默，其他项为默认值。认值。方法如下：方法如下：l光标定位在表格中任意位置；光标定位在表格中任意位置；l单击鼠标右键，在快捷菜单中选择单击鼠标右键，在快捷菜单中选择“表格属性表格属性”命令，命令，弹出弹出“表格属性表格属性”的对话框；指定宽度选择的对话框；指定宽度选择“百分比百分比”，文本框内输入文本框内输入100；边框粗细选择为；边框粗细选择为0；单击；单击“确定确定”按按钮即可。钮即可。操作演示操作演示7/30/20247/30/20242424南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页（3）设）设置单元置单元格属性格属性 要求：第二行单元格背景设置为要求：第二行单元格背景设置为“紫红色紫红色”；第三行单元格背景设置为第三行单元格背景设置为“银白色银白色”。方法如下：方法如下：l选中第二行单元格；选中第二行单元格；l单击鼠标右键，在快捷菜单中选择单击鼠标右键，在快捷菜单中选择“单元格属单元格属性性”命令，在命令，在“背景背景”“颜色颜色”选框内选择选框内选择“紫红色紫红色”；l同样方法设置第三行单元格背景。同样方法设置第三行单元格背景。操作演示操作演示7/30/20247/30/20242525南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页（4）嵌）嵌套一个套一个1行行2列的列的表格表格 要求：在第一行嵌套一个要求：在第一行嵌套一个1行行2列的表格，表格属性设列的表格，表格属性设置为：指定宽度置为：指定宽度60%，指定高度，指定高度100%，边框粗细为，边框粗细为0。方法如下：方法如下：l光标定位第光标定位第1行；行；l单击单击“表格表格|插入插入|表格表格”菜单命令，弹出菜单命令，弹出“插入表格插入表格”对对话框；话框；l在在“大小大小”选区中选择选区中选择1行行2列；指定宽度选择列；指定宽度选择“百分比百分比”，文本框内输入，文本框内输入60；指定高度选择；指定高度选择“百分比百分比”，文本框，文本框内输入内输入100；边框粗细选择；边框粗细选择0；l单击单击“确定确定”按钮即可。按钮即可。操作演示操作演示7/30/20247/30/20242626南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页（5）嵌）嵌套一个套一个2行行9列的列的表格表格 要求要求：在第：在第4行嵌套一个行嵌套一个2行行9列的表格，设置表格属列的表格，设置表格属性为：指定宽度性为：指定宽度100%，指定高度，指定高度100%，边框粗细为，边框粗细为0。（方法参照第（方法参照第（4）步）步）要求要求：合并单元格：分别合并：合并单元格：分别合并2行行9列表格中的列表格中的2、4、6、8列的单元格。列的单元格。操作如下：操作如下：选中选中2行行9列表格中的第列表格中的第2列单元格，选择以下三种方法列单元格，选择以下三种方法之一进行操作：之一进行操作：l单击右键，在快捷菜单中选择单击右键，在快捷菜单中选择“合并单元格合并单元格”命令。命令。l选择选择“表格表格|合并单元格合并单元格”菜单命令。菜单命令。l单击单击“表格表格”工具栏中的工具栏中的“合并单元格合并单元格”按钮。按钮。操作演示操作演示7/30/20247/30/20242727南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页对对齐齐方方式式：在在系系统统默默认认的的情情况况下下，表表格格在在网网页页上上是是左左对对齐齐的的，通通过过设设置置“对对齐齐方方式式”改改变变这这种种对齐方式。对齐方式。浮浮动动：在在默默认认情情况况下下表表格格周周围围是是不不能能排排列列文文字字的的，为为了了让让文文本本与与表表格格融融为为一一体体，可可以以使使用用表表格的浮动对齐。格的浮动对齐。7/30/20247/30/20242828南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页3）设置单元格属性）设置单元格属性 表格的单元格可以放置文字、图片、以及表格表格的单元格可以放置文字、图片、以及表格（表格嵌套）等内容。通过设置单元格的格式，可以（表格嵌套）等内容。通过设置单元格的格式，可以使表格中的某些单元格的对齐方式、边框、背景色等使表格中的某些单元格的对齐方式、边框、背景色等属性与表格中的其他单元格属性不同。属性与表格中的其他单元格属性不同。选中需要编辑的表格，选择选中需要编辑的表格，选择“表格表格”菜单中的菜单中的“单元单元格格”命令，出现命令，出现“单元格属性单元格属性”对话框，如图对话框，如图4-5所示。所示。根据需要进行相应的修改即可。根据需要进行相应的修改即可。4、页面、页面编辑和编辑和处理处理 操作演示操作演示7/30/20247/30/20242929南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 图图4-5设置单元格属性设置单元格属性 操作演示操作演示4、页面、页面编辑和编辑和处理处理 7/30/20247/30/20243030南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页表格中文本的对齐方式一般通过设置表格中文本的对齐方式一般通过设置“单元格属性单元格属性”中中的对齐方式来实现。鼠标定位在需要设置文本格式的的对齐方式来实现。鼠标定位在需要设置文本格式的单元格中，单击鼠标右键，在快捷菜单中选择单元格中，单击鼠标右键，在快捷菜单中选择“单元格单元格属性属性”，在对话框，在对话框“布局布局”一栏中，选择合适的一栏中，选择合适的“水平对水平对齐方式齐方式”与与“垂直对齐方式垂直对齐方式”段落分段按段落分段按“Enter”键，换行而不另起段落则需插入换键，换行而不另起段落则需插入换行符，或按行符，或按“Shift+Enter”组合键实现。组合键实现。7/30/20247/30/20243131南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页4）文本编辑）文本编辑输入文本内容，设置文本格式。输入文本内容，设置文本格式。在相应的单元格中输入文本内容，并按文本框在相应的单元格中输入文本内容，并按文本框中的要求对文本进行字体和段落格式设置。在中的要求对文本进行字体和段落格式设置。在FrontPage 中，文本编辑的操作方法与中，文本编辑的操作方法与Word基基本相同。本相同。如图如图4-6所示：所示：4、页面、页面编辑和编辑和处理处理 操作演示操作演示7/30/20247/30/20243232南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 图图4-6主页表格主页表格 操作演示操作演示7/30/20247/30/20243333南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页5 5）水平线的设置。）水平线的设置。插入：插入：单击单击“插入插入|水平线水平线”菜单命令，菜单命令，在两行文本之间出现一条系统默认的水平线；在两行文本之间出现一条系统默认的水平线；属性设置：属性设置：选中水平线，单击鼠标右键，选中水平线，单击鼠标右键，在快捷才当中选择在快捷才当中选择“水平线属性水平线属性”命令；或命令；或者双击水平线，弹出者双击水平线，弹出“水平线属性水平线属性”对话框。对话框。如图如图4-74-7所示。所示。操作演示操作演示4、页面、页面编辑和编辑和处理处理 7/30/20247/30/20243434南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 图图4-7“水平线属性水平线属性”对话框对话框 操作演示操作演示7/30/20247/30/20243535南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页5）网页的超链接）网页的超链接 超链接是指站点内不同网页之间或超链接是指站点内不同网页之间或者站点与站点之间的链接关系。链接的者站点与站点之间的链接关系。链接的目标可以是页面、图像、电子邮件地址目标可以是页面、图像、电子邮件地址和音频文件等。和音频文件等。“插入超链接插入超链接”对话框，如图对话框，如图4-8所示：所示：操作演示操作演示4、页面、页面编辑和编辑和处理处理 7/30/20247/30/20243636南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 图图4-8创建文本超链接创建文本超链接 操作演示操作演示7/30/20247/30/20243737南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 当当浏浏览览者者访访问问一一个个网网页页的的时时候候，会会面面对对三三种种不不同同的的超超链链接接：第第一一种种是是未未访访问问的的链链接接；第第二二种种是是当当前前正正在在的的链链接接；第第三三种种是是已已经经访访问问过过的的链链接接。可可以以在在网网页页属属性性中中为为这这三三种种不不同同的的超超链接文字设置不同的颜色。链接文字设置不同的颜色。相关操作如图相关操作如图4-9所示。所示。7/30/20247/30/20243838南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 图图4-9设置超链接的颜色设置超链接的颜色 操作演示操作演示7/30/20247/30/20243939南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页1）使用字幕）使用字幕 在菜单在菜单【插入】【插入】中选择中选择【web组件组件】命令，在弹出的窗口中单击命令，在弹出的窗口中单击“动态效动态效果果”“字幕字幕”选项，字幕属性如图选项，字幕属性如图4-11 所示。所示。5、动态、动态效果的效果的使用使用 操作演示操作演示7/30/20247/30/20244040南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 图图4-11创建字幕创建字幕 操作演示操作演示7/30/20247/30/20244141南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 对对字字幕幕的的文文字字（字字符符串串）外外观观进进行行设设置置和和对对普普通通文文字字（字字符符串串）的的设设置置是是一一样样的的。只只不不过过字字幕幕文文字字（字字符符串串）是是一个整体罢了。一个整体罢了。7/30/20247/30/20244242南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页2）站点计数器）站点计数器 在菜单在菜单【插入】【插入】中选择中选择【web组件组件】命令，在弹出的窗口中单击命令，在弹出的窗口中单击计数器计数器”选项，字幕属性如图选项，字幕属性如图4-13 所示。所示。5、动态、动态效果的效果的使用使用 操作演示操作演示7/30/20247/30/20244343南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 图图4-13 插入计数器插入计数器 操作演示操作演示7/30/20247/30/20244444南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 只只有有将将站站点点内内容容发发布布到到Web服服务务器器，并并设设置置了了网网站站的的FrontPage服服务务器器扩扩展展后后，计数器才能正常显示。计数器才能正常显示。7/30/20247/30/20244545南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 图图4-15 组件效果组件效果 操作演示操作演示7/30/20247/30/20244646南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页3）网页过渡效果）网页过渡效果 在菜单在菜单【格式】【格式】中选择中选择【网页过渡【网页过渡】命令，根据需要选择合适的过渡效果，命令，根据需要选择合适的过渡效果，如图如图4-16 所示。所示。5、动态、动态效果的效果的使用使用 操作演示操作演示7/30/20247/30/20244747南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 图图4-16 网页过渡网页过渡 操作演示操作演示7/30/20247/30/20244848南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页3）网页过渡效果）网页过渡效果示例：示例：以设置触发效果的事件为例，以设置触发效果的事件为例，进入和退进入和退出站点事件分别在浏览者通过设置效果的网页进出站点事件分别在浏览者通过设置效果的网页进入和退出用户站点时发生。入和退出用户站点时发生。操作如下操作如下：在图：在图4-16中选择中选择“进入网页进入网页”事件，选事件，选择择“盒状收缩盒状收缩”效果效果，再选择，再选择“离开网页离开网页”事件，选事件，选择择“原型放射原型放射”效果，效果，单击单击“确定确定”按钮。选择按钮。选择【文件】菜单文件】菜单中的选择中的选择【在浏览器中预览】【在浏览器中预览】命令，命令，单击单击“确定确定”按钮，即可看到设置效果。按钮，即可看到设置效果。5、动态、动态效果的效果的使用使用 操作演示操作演示7/30/20247/30/20244949南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页1）框架保存）框架保存 在菜单在菜单【文件】【文件】中选择中选择【另存为】【另存为】按钮，按钮，在对话框中整个框架示意图的边框为蓝色。在对话框中整个框架示意图的边框为蓝色。2）关闭网页）关闭网页 单击网页窗口右上角的单击网页窗口右上角的“关闭关闭”按钮，即可按钮，即可关闭网页。关闭网页。3）退出）退出 单击应用程序窗口右上角的单击应用程序窗口右上角的“关闭关闭”按钮，按钮，即可退出。即可退出。6、保存、保存、关闭与关闭与退出退出 操作演示操作演示7/30/20247/30/20245050南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页1）打开）打开FrontPage。单击单击“开始开始”“程序程序”“Microsoft Office”“Microsoft Office FrontPage 2019”2）认识）认识FrontPage窗口。如图窗口。如图4-20所示：所示：1、FrontPage 2019启启动与界面动与界面 知识拓展知识拓展7/30/20247/30/20245151南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页标题栏标题栏菜单栏菜单栏常用工具常用工具栏栏格式工具格式工具栏栏状态栏状态栏视图栏视图栏编辑窗口编辑窗口图图4-20 FrontPage窗口窗口7/30/20247/30/20245252南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页2）站点的打开、关闭与删除）站点的打开、关闭与删除打开站点打开站点u单击单击“文件文件|打开网站打开网站”菜单命令，在弹出的菜单命令，在弹出的“打开网站打开网站”对话框中选择要打开的网站，单对话框中选择要打开的网站，单击击“打开打开”按钮即可打开站点。按钮即可打开站点。u单击单击“常用常用”工具栏上的打开按钮工具栏上的打开按钮“”，在弹出的在弹出的“打开打开”对话框中选择要打开的网站，对话框中选择要打开的网站，单击单击“打开打开”按钮即可打开站点。按钮即可打开站点。知识拓展知识拓展7/30/20247/30/20245353南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页2）站点的打开、关闭与删除）站点的打开、关闭与删除关闭站点。关闭站点。单击单击“文件文件|关闭网站关闭网站”菜单命令即可关闭当前站点。菜单命令即可关闭当前站点。删除站点删除站点u在在“文件夹列表文件夹列表”中选中要删除的站点，单击中选中要删除的站点，单击“编辑编辑|删除删除”菜单，在弹出的菜单，在弹出的“确认删除确认删除”对话框中按需要对话框中按需要选择，单击选择，单击“确定确定”按钮即可。按钮即可。u在在“文件夹列表文件夹列表”中选中要删除的站点，中选中要删除的站点，单击鼠标单击鼠标右键右键，选择快捷菜单中的，选择快捷菜单中的“删除删除”命令，在弹出的命令，在弹出的“确确认删除认删除”对话框中按需要选择，单击对话框中按需要选择，单击“确定确定”按钮即可。按钮即可。知识拓展知识拓展7/30/20247/30/20245454南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页3）认识）认识FrontPage的视图方式的视图方式编辑模式切换按钮编辑模式切换按钮 FrontPage 2019具备具备“设计设计”、“拆分拆分”、“代代码码”、“预览预览”四种编辑模式，如图四种编辑模式，如图4-21所示。所示。FrontPage2019的视图的视图 FrontPage 共有共有7种视图种视图:网页视图网页视图，文文件夹视图件夹视图，远程网站视图远程网站视图，报表视图报表视图，导航视导航视图图，超链接视图超链接视图，任务视图任务视图，如图，如图4-22所示。所示。知识拓展知识拓展7/30/20247/30/20245555南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页图图4-21 四种模式四种模式编辑模式编辑模式7/30/20247/30/20245656南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页图图4-22 七种视图七种视图视图模式视图模式7/30/20247/30/20245757南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页网页视图：人们最常用的视图，在这里进行网网页视图：人们最常用的视图，在这里进行网页编辑页编辑 文件夹视图：对站点中的文件夹进行各种操作文件夹视图：对站点中的文件夹进行各种操作远程网站视图：帮助用户将整个网站和单独的远程网站视图：帮助用户将整个网站和单独的文件、文件夹发布到任何位置。文件、文件夹发布到任何位置。报表视图：通过报表视图：通过“报表报表”视图，可以在运行报视图，可以在运行报表查询后分析网站内容表查询后分析网站内容 知识拓展知识拓展7/30/20247/30/20245858南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页导航视图：该视图提供了网页的分层视图，通导航视图：该视图提供了网页的分层视图，通过此视图，可以调整网页在网站中的位置过此视图，可以调整网页在网站中的位置超链接视图：超链接视图：“超链接超链接”视图可以将网站中超视图可以将网站中超链接的状态显示在一个列表中链接的状态显示在一个列表中 任务视图：任务视图：“任务任务”视图用以站内制作工作的视图用以站内制作工作的进展状况的备忘进展状况的备忘 知识拓展知识拓展7/30/20247/30/20245959南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页4）在网站中添加和删除网页）在网站中添加和删除网页 添加网页添加网页u选择选择“文件文件”-“打开站点打开站点”，打开已有的网，打开已有的网页文件夹。页文件夹。u选择选择“文件文件”-“新建新建”命令，出现命令，出现“新建网新建网页页”对话框，选中对话框，选中“其他网页模式其他网页模式”，如图，如图4-23所示所示。知识拓展知识拓展7/30/20247/30/20246060南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页图图4-23 新建网页新建网页7/30/20247/30/20246161南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页删除网页删除网页u打开已有站点的网页文件夹。打开已有站点的网页文件夹。u单击视图工具栏的单击视图工具栏的“文件夹视图文件夹视图”按钮，按钮，显示文件夹列表，选中要删除的网页，按显示文件夹列表，选中要删除的网页，按需要删除相应网页。需要删除相应网页。知识拓展知识拓展7/30/20247/30/20246262南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页5）文本格式的设置）文本格式的设置6）段落格式的设置）段落格式的设置 7）项目符号和编号列表的设置）项目符号和编号列表的设置 8）表格的操作）表格的操作 以上操作方法均与以上操作方法均与Word相同的。相同的。知识拓展知识拓展7/30/20247/30/20246363南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页9）插入与编辑图像、对象）插入与编辑图像、对象 网页制作时常用网页制作时常用GIF和和JPEG这两种这两种图像格式的文件。图像格式的文件。GIF格式的图像显示的格式的图像显示的颜色数目较少，仅支持颜色数目较少，仅支持256色，具有较高色，具有较高的下载速度且具有动态的效果。的下载速度且具有动态的效果。JPEG格格式主要用于显示需要有逼真图形效果的图式主要用于显示需要有逼真图形效果的图像。像。知识拓展知识拓展7/30/20247/30/20246464南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页网页图像背景的设置网页图像背景的设置“格式格式”-“背景背景”，打开，打开“网页属性网页属性”对话框，在对话框，在“格式格式”项目中选中项目中选中“背景背景图片图片”，为网页选择一幅图片作为背景，为网页选择一幅图片作为背景。知识拓展知识拓展7/30/20247/30/20246565南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页插入图片对象插入图片对象 插入的图片对象可以是插入的图片对象可以是图片文件和剪贴画。图片文件和剪贴画。插入图片后，可以对图片属性进行设置。插入图片后，可以对图片属性进行设置。方法：方法：选中插入的图片，选择选中插入的图片，选择“格式格式”菜单中的菜单中的“属性属性”命令，根据出现的对话框进行相应的操命令，根据出现的对话框进行相应的操作。作。知识拓展知识拓展7/30/20247/30/20246666南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页插入视频图像插入视频图像插入的视频文件有插入的视频文件有3种格式种格式：AVI视频文件；视频文件；MPEG视频文件：以视频文件：以.mpg为扩展名。为扩展名。Quick Time视频文件：以视频文件：以.mov为扩展名。为扩展名。知识拓展知识拓展7/30/20247/30/20246767南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页插入音频文件插入音频文件网页中常用的音频文件格式：网页中常用的音频文件格式：.WAV、.MIDI、.RMI、.RA和和.AU等。等。知识拓展知识拓展7/30/20247/30/20246868南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页插入特殊对象插入特殊对象 u插入符号插入符号 将光标移动到插入点，选择将光标移动到插入点，选择“插入插入”-“符符号号”菜单，弹出菜单，弹出“符号符号”对话框对话框 u插入水平线插入水平线把光标移动到插入水平线的位置，选择把光标移动到插入水平线的位置，选择“插入插入”-“水平线水平线”菜单。菜单。知识拓展知识拓展7/30/20247/30/20246969南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页插入特殊对象插入特殊对象 u插入时间标记插入时间标记 在页面末尾输入：在页面末尾输入：“更新时间更新时间”，选择，选择“插插入入”-“日期与时间日期与时间”命令，在命令，在“日期时间日期时间属性属性”对话框中选择对话框中选择“该网页上次编辑日该网页上次编辑日期期”。u插入注释插入注释选择选择“插入插入”-“注释注释”命令。命令。知识拓展知识拓展7/30/20247/30/20247070南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页10）其他常用）其他常用Web组件组件悬停按钮悬停按钮横幅广告管理器横幅广告管理器 链接栏链接栏以上操作均选择以上操作均选择“插入插入”-“Web组建组建”命令。命令。交互式按钮交互式按钮选择选择“插入插入”-“交互式按钮交互式按钮”命令。命令。知识拓展知识拓展7/30/20247/30/20247171南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 单单击击插插入入的的悬悬停停按按钮钮，拖拖动动它它周周围围的的小小黑黑点我们就改变了它的大小。点我们就改变了它的大小。设设置置横横幅幅广广告告的的宽宽度度和和高高度度值值因因该该要要与与要要添添加加的的图图片片大大小小一一致致。如如果果设设置置值值比比图图片片小小，图图片片会会被被截截掉掉一一部部分分；如如果果设设置置值值大大，图图片片周周围会以灰色填充。围会以灰色填充。7/30/20247/30/20247272南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页11）其他超链接）其他超链接书签超链接书签超链接 添加书签：添加书签：选中要插入书签的文字，选择选中要插入书签的文字，选择“插入插入”-“书签书签”命令，书签名称就是选择的文本名称。命令，书签名称就是选择的文本名称。建立到书签的链接建立到书签的链接 知识拓展知识拓展7/30/20247/30/20247373南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页11）其他超链接）其他超链接框架网页超链接框架网页超链接 图像超链接图像超链接电子邮件超链接电子邮件超链接知识拓展知识拓展7/30/20247/30/20247474南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页引导训练引导训练4.24.2制作个人网制作个人网站页面站页面7/30/20247/30/20247575南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页任务描述任务描述 网站的首页制作出来以后，要创建和编辑网站的首页制作出来以后，要创建和编辑各个分页，且各网页间要实现跳转。各个分页，且各网页间要实现跳转。本任务通过个人网站中网页的新建与编辑，本任务通过个人网站中网页的新建与编辑，学习学习FrontPage 2019中新建网页、表单、超级中新建网页、表单、超级链接和框架网页的操作。链接和框架网页的操作。7/30/20247/30/20247676南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页技术要点技术要点1、新建网页、新建网页2、插入表单及设置表单、插入表单及设置表单属性属性3、框架网页的操作、框架网页的操作4、文本、图像处理、文本、图像处理5、热点超链接，书签超、热点超链接，书签超链接链接。7/30/20247/30/20247777南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页示例：示例：新建一个以新建一个以“inform.htm”命名的空白网页命名的空白网页有有3种创建方式：种创建方式：在文件夹视图下创建。在文件夹视图下创建。单击单击“常用常用”工具栏的新建按钮右边的下拉列表框，选择工具栏的新建按钮右边的下拉列表框，选择“空白网页空白网页”命令，创建一个空白网页，重命名为命令，创建一个空白网页，重命名为“inform.htm”。单击单击“文件文件|新建新建”菜单命令，选择菜单命令，选择“空白网页空白网页”，创建一个，创建一个空白网页，重命名为空白网页，重命名为“inform.htm”。操作演示操作演示1、空白、空白网页的网页的新建及新建及编辑编辑 7/30/20247/30/20247878南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页示例：编辑示例：编辑“inform.htm”“inform.htm”网页网页插入表格、文本插入表格、文本设置网页的背景，网页背景图片为设置网页的背景，网页背景图片为back.gif，设置为水印设置为水印电子邮件超链接，电子邮件超链接，链接的电子邮件地址为链接的电子邮件地址为webmaster126网页效果网页效果：文本格式设置为：文本格式设置为“宋体宋体”、“14磅磅”、“左对齐左对齐”、颜色为、颜色为“Hex=CC,99,00”操作演示操作演示7/30/20247/30/20247979南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 示例：按照上述方法新建示例：按照上述方法新建introduction.htm、study.htm、aword.htm、practise.htm4个空白个空白网页。按要求进行相应的编辑。网页。按要求进行相应的编辑。操作演示操作演示7/30/20247/30/20248080南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页1）新建框架网页）新建框架网页FrontPage 2019提供了提供了10个框架网页向导。操作步个框架网页向导。操作步骤如下：骤如下：打开打开【文件文件】-【新建新建】菜单项，在子菜单中菜单项，在子菜单中选择选择【网页网页】菜单项，出现新建对话框。菜单项，出现新建对话框。在对话框中单击在对话框中单击【框架网页框架网页】选项卡选项卡按需求选择相应的框架网页。按需求选择相应的框架网页。操作演示操作演示2、框架、框架网页的新网页的新建、属性建、属性设置、编设置、编辑与保存辑与保存 7/30/20247/30/20248181南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页1）新建框架网页）新建框架网页“新建网页新建网页”：在当前框架网页中输入文字、在当前框架网页中输入文字、图片等内容图片等内容“设置初始网页设置初始网页”：为所在的框架超链接到为所在的框架超链接到指定的网页上去指定的网页上去 操作演示操作演示 7/30/20247/30/20248282南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页2）框架网页的属性设置）框架网页的属性设置框架有很多属性，如框架的名称、宽度、高度、框架有很多属性，如框架的名称、宽度、高度、边距、滚动条、可调整性、间距等。边距、滚动条、可调整性、间距等。设置框架属性设置框架属性：选择要设置属性的框架，单击选择要设置属性的框架，单击【框架框架】菜单，再单击菜单，再单击【框架属性框架属性】菜单项，出菜单项，出现对话框。可以在此对话框中修改框架的属性。现对话框。可以在此对话框中修改框架的属性。框架网页的属性框架网页的属性：在在【框架属性框架属性】对话框中，对话框中，单击单击【框架网页框架网页】按钮，会出现按钮，会出现“网页属性网页属性”对话对话框。框。操作演示操作演示7/30/20247/30/20248383南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页3）框架网页的编辑）框架网页的编辑示例：示例：“设置初始网页设置初始网页”和和“新建网页新建网页”的编辑的编辑单击单击“新建网页新建网页”按钮，在显示的空白网页按钮，在显示的空白网页中进行编辑。中进行编辑。在在“header”框架中，框架中，“设置初始网页设置初始网页”为为“top.htm”网页；网页；在在“main”框架中，框架中，“设置初始网页设置初始网页”为为“inform.htm”网页。网页。操作演示操作演示7/30/20247/30/20248484南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页4）保存网页）保存网页单击单击“文件文件”-“另存为另存为”菜单命菜单命令；令；单击单击“更改标题更改标题”按钮，在弹出的按钮，在弹出的“输入文字输入文字”对话框中输入网页标题对话框中输入网页标题“个个人介绍人介绍”；在；在“文件名文件名”框中重命名框框中重命名框架文件为架文件为“index.htmindex.htm”；单击单击“保存保存”按钮。按钮。操作演示操作演示7/30/20247/30/20248585南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页 保保存存框框架架网网页页时时，在在“另另存存为为”对对话话框框中中，右右侧侧框框架架网网页页的的预预览览图图高高亮亮显显示示的的框架，表示正在保存框架网页。框架，表示正在保存框架网页。7/30/20247/30/20248686南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页1）设置框架网页内部的超链接）设置框架网页内部的超链接 要求：要求：当鼠标左键点击超链接对象时，网页中某一框架中当鼠标左键点击超链接对象时，网页中某一框架中的内容也会随之改变。的内容也会随之改变。示例：示例：当单击文本当单击文本“学习经历学习经历”时，下方框架中显示网页时，下方框架中显示网页“study.htm”。操作方法：操作方法：选中选中“学习经历学习经历”，单击鼠标右键，选择，单击鼠标右键，选择“超超链接链接”-“插入超链接插入超链接”-“原有文件或网页原有文件或网页”-“当前文件当前文件夹夹”-选中选中“study.htm”；单击对话框右侧单击对话框右侧“目标框架目标框架”按钮，按钮，“目标框架目标框架”-“当前当前框架框架”-“下方框架下方框架”-“目标设置目标设置”-“main”-“确定确定”-“确定确定”。操作演示操作演示3、插入、插入超链接超链接 7/30/20247/30/20248787南京化工职业技术学院信息系南京化工职业技术学院信息系上一页上一页下一页下一页结束结束首页首页2）创建到电子邮箱的超链接）创建到电子邮箱的超链接 要求：要求：在主页中或其他网页中，可以创建与网站在主页中或其他网页中，可以创建与网站电子邮箱的超链接。电子邮箱的超链接。示例：示例：在主页下框架在主页下框架“与我联系与我联系”文本能文本能“超链接超链接”到到aster126”，邮箱地址；，邮箱地址；操作方法：操作方法：选中选中“与我联系与我联系”-单击鼠标右键单击鼠标右键-选择选择“超链接超链接”