第9章 FrontPage 2003制作网页
使用FrontPage_2003制作网页
（2）代码视图。该视图提供用户查看、编写和编辑 HTML标识的功能。
（3）拆分视图。该视图上半部分提供代码视图，下半 部分提供设计视图，可以使用户能够直观地看到编写的代码 在网页中的效果。
（4）预览视图。在该视图中用户可以在发布网页前提 前预览网页中的内容，以便于修改其中的某些细节部分。
第二节 站点的基本操作
（5）超链接视图。该视图将网站中所有的内部和外 部超链接的状态显示在一个列表中，并用图标表示超链接 已通过验证或已中断。选择“视图”→“超链接”命令， 即可切换到该视图。
（6）任务视图。该视图以列表的形式显示网站中的 所有已完成或尚未完成的任务，并在各个列标题下提供有 关各项任务的当前信息。选择“视图”→“任务”命令， 即可切换到该视图。
第八章 使用FrontPage 2003制作网页
第一节 FrontPage 2003概述 第二节 站点的基本操作 第三节 制作和美化网页 第四节 框架网页 第五节 表单和组件的使用 第六节 发布站点 第七节 应用实例——论坛首页 习题八
第一节 FrontPage 2003概述
现代社会是一个网络社会，人们在日常生活中离不开网络， 网络的诞生与发展，极大地方便了人们的信息交流和资源共享， 推动着信息社会的飞速前进。
（3）自定义站点。如果用户已对该软件非常熟悉，也 可以自定义创建站点，具体操作如下：
1）选择“文件”→“新建”命令，弹出“新建”任务 窗格。
2）在该任务窗格中的“新建网站”选项区中选择“由 一个网页组成的网站”选项，弹出“网站模板”对话框。
3）在该对话框中选择“空白网站”选项，并在右侧的 网站位置下拉列表框中输入网站的位置后，单击“确定” 按钮，即可创建一个只包含两个空白文件夹private和 image的站点，用户可自行创建主页及其他网页文件。
最详细的FrontPage2003PPT课件
课前回顾
网站与网页
2020/11/3
计算机文化基础
2
2
3
4
5
6
7
8
❖HTML网页的结构
❖ 现在我们先看一个简单的HTML文件，从中 体会用HTML语言编写网页时的层次结构。
❖ 【例9-1】用HTML语言编写一个简单的网页。
▪<html>
▪<head>
在图片上右键单击，在快捷菜单中选择“图 片属性”，在图片属性对话框中可以设置图片属 性。如图8-9插入图片对话框 。
24
图8-9 插入图片对话框
25
四、层操作 1．插入层 方法是：“插入”菜单“层”命令。然后鼠标在1行2
列上拖动即可。 2．选择层 可以单击层的选择手柄、单击层边界等方法，选择多
层时候可以使用shift键来配合使用。 3．调整层大小 选中层，然后在属性面板中输入宽度和高度值。或直
14
在FrontPage2003 的主窗口下，单击菜单 栏上的“文件”，在弹 出的下拉菜单中选中 “新建”，在窗口的右 边出现“新建”面板， 在新建项中选择“其他 网站模板”。在“站点” 列表框中，选中“只有 一个网页的网站”图标， 并在右边“指定新网站 的位置”框中，输入新 站点的名称。如图84“网站模板”对话框 。
16
网页属性设置
网页的属性包括网页的背景颜色、 图片、网页的标题和网页的页边距等。 选择菜单“文件”→“属性” 命令或在 页面空白处右键单击选择“页面属性” 命令则可以在弹出的对话框中进行设置， 网页的标题、背景音乐、背景、背景图 片、网页边距等
17
图8-5 网页属性对话框
小学六年级信息技术上册FrontPage2003制作网页课件
从本地文件系统中添加图片，图片可以为GIF、JPEG、 BMP等文件格式。
保存网页时，FrontPage会提示将图片保存到您的站 点中。若图片不是GIF或JPEG 格式，使用256色或更少 颜色的图片会自动地转换成GIF，而所有其他的图片会 转换成JPEG格式。
图6-23“视频”选项卡
FrontPage 2003 制作网页
实例6-5 建立和编辑超链接
一、本例要求
★ 掌握建立文本超链接的方法和步骤。 ★ 掌握建立图像超链接的方法和步骤。 ★ 掌握建立邮件超链接的方法和步骤。
FrontPage 2003 制作网页
二、操作步骤
运行FrontPage，在“设计”视图模式下，输入文本“兰州石化职业技 术学院”。
FrontPage 2003 制作网页
实例2 利用FrontPage2003创建一个网页 一、本例要求
★ 掌握利用FrontPage2003创建、 保存、打开网页的步骤和方法。
FrontPage 2003 制作网页
二、操作步骤
使用菜单“文件”→“新建”，在弹出的“新建”任务窗格中选择 “空白网页”。任务窗格消失，这时就创建了一个空白网页。 在编辑区输入一段自我介绍的文字：“你好，我是李明，我家住在广西 梧州……”如图6-5所示，对文字做简单的修饰。
FrontPage 2003 制作网页
7. 单击取文件名为example6-4，更改标题为“案例6-4”，单 击“确定”按钮。 8. 在弹出的如图6-20所示的“保存嵌入式文件”对话框中， 单击“确定”按钮。
图6-20“保存嵌入式文件”对话 框
FrontPage 2003 制作网页
三、本案例知识点
制作FrontPage2003动态网页
第十课时制作动态网页【课题】第十课制作动态网页【教学目标】1、知识目标：掌握制作动态网页的方法和技能2、能力目标：掌握制作动态网页的方法和技能3、情感态度和价值观：提高学生学习信息技术知识的兴趣和增强学生对信息技术知识的热爱及其献身精神。
【重点】掌握制作动态网页的方法和技能【难点】掌握制作动态网页的方法和技能【方法】计算机教室上机操作课【课时】1课时【教学过程】一、插入交互式按钮光标定位——插入——Web组件——（Web组件对话框）——组件类型——选择一种效果——动态效果——交互式按钮——。
二、插入滚动字幕光标定位——插入——Web组件——（Web组件对话框）——组件类型——选择一种效果——字幕——。
三、插入计数器光标定位——插入——Web组件——（Web组件对话框）——组件类型——计数器——。
四、插入搜索表单光标定位——插入——Web组件——（Web组件对话框）——组件类型——“Web搜索”选项——完成——搜索表单属性——搜索表单——。
五、设置动态HTML效果选中网页元素——视图——工具栏——HTML效果——在“在”下拉列表中选择“单击”选项——应用——。
【板书设计】一、插入交互式按钮光标定位——插入——Web组件——（Web组件对话框）——组件类型——选择一种效果——动态效果——交互式按钮——。
二、插入滚动字幕光标定位——插入——Web组件——（Web组件对话框）——组件类型——选择一种效果——字幕——。
三、插入计数器光标定位——插入——Web组件——（Web组件对话框）——组件类型——计数器——。
四、插入搜索表单光标定位——插入——Web组件——（Web组件对话框）——组件类型——“Web搜索”选项——完成——搜索表单属性——搜索表单——。
五、设置动态HTML效果选中网页元素——视图——工具栏——HTML效果——在“在”下拉列表中选择“单击”选项——应用——。
【课后总结】【作业布置】。
Frontpage 2003网页解答
Frontpage 2003网页制作解答A．四、网页编辑操作（5×6分=30分）启动FrontPage，打开主页index.htm，按下列要求设计，并以：7位学号-姓名.htm为名保存在D盘以你的学号命名的文件夹中1、设置网页标题为：湖州旅游网，在第一行左端插入图片bar81.jpg、中部输入红色文字“欢迎您到湖州来”，并调整二者的大小、相对位置至近似样张。
2、以表格方法来布局下半部网页内容，使图文混排的相对位置近似样张，隐去表格线。
3、在表格左上角建立具有灰色底纹的文本，并建立两个超链接，其中，“文化一讲义下载”，链接到test1.txt；“文化二讲义下载”，链接到test2.txt，目标框架均为“新建窗口”。
4、表格左中部插入图片tp86.jpg，然后分别对三个粉红区域建立热点，其中：“首页“与index.htm链接、“注册”与xjh.jpg相链接，目标框架均为“新建窗口”；“联系我”链接邮件地址为：abc@。
5、表格中部和底部的文本均取之于文件test1.txt中部分内容，表格右上角插入剪贴画“湖泊”中的图片，在剪贴画的左上角输入蓝色文字“湖州”，字体、大小自定。
注意：由于显示器分辨率或窗口大小的不同，网页中文字的位置可能与样张略有差异，图文混排效果与样张大致相同。
答：1.启动FrontPage，打开主页index.htm，在其空白处点击右键在出现的快捷菜单中选择网页属性设置网页标题为：湖州旅游网，按要求插入图片、输入红色文字，调整大小至近似样张；2. 插入9行3列的表格并隐去表格线，按样张所示合并第2、第3列；3. 设置第1列，1、2、3行单元格背景色为灰色底纹键入如样张所示的文字，分别按要求建立超级链接后合并1、2、3单元格；4. 在表格第1列中部插入图片tp86.jpg，选中图片点击右键打开图片工具栏，选择相应的热点链接工具对三个粉红区域建立热点链接；5. 在样张所示的位置插入/文件/test1.txt，剪贴相关内容并调整如样张所示；在表格右上方插入剪贴画“湖泊”，打开图片工具栏选定文本工具，在左上角插入蓝色文字“湖州”；切换到预览与样张比较，菜单：文件/另存，以：7位学号-姓名.htm为名保存在D盘以你的学号命名的文件夹中。
网页制作FrontPage_2003(75)
2．选择链接的目标
• 链接的目标包括原有文件或网页、本文档中的位置（书签）、 新建文档、电子邮件等。根据跳转目的地的不同，网页中链 接可分为4种类型。 • 1）原有文件或网页直接跳转到已经存在的某一网页或文件。 • 如果是本网站内的网页，可用光标在“插入超链接”对话框 列表文件中选择。 • 如果是本机上其它网站中的网页，则选择“插入超链接” 对话框中的按钮，或从“查找范围”中选择相应的网站，再 选择所需网页。 • 如果是Internet上其它网站的某一网页，可单击按钮打开浏 览器找到该页面后，该页面的网址会自动出现在“地址”栏； 也可以直接在地址栏文本框中输入该网页的地址。
13
7.1.3基本操作
• 1．网站的规划 • 2．网站的基本操作 • 3．网页的基本操作
14
1．网站的规划
• 首先要明确建立网站的目的。 • 其次要明确网站的浏览者群。 • 最后要考虑到如何能够便于网站的日常维护。
15
2．网站的基本操作
• 1) 创建网站 • 创建一个Web网站有两种方法。第一种方法是利用FrontPage 的Web网站模板和向导，这种方法操作简单、速度快，比较适 合建立大、中型的Web网站。第二种方法是逐个地创建网页文 件，然后创建它们之间的链接关系，这种方法适合于网页数 量不多的小型网站。 • 使用FrontPage模板创建网站的步骤： • 启动FrontPage应用程序； • 选择【文件】【新建…】命令，打开“新建”任务窗格； • 选择网站模板，在“新建网站”栏选择“由一个网页组成的 网站…”，打开“网站模板”对话框，在“指定新网站的位置” 文本框中输入新网站的位置及名称，然后单击“确定”按钮。
6
1．“网页”视图
7
2．“文件夹”视图
FrontPage_2003网页设计技术
一、网页视图 网页视图为网页的设计提供了一个工作 场所，可以在这个环境下对网页进行设计 和修改。 二、文件夹视图 打开一个网页后，系统默认是以文件夹 视图来显示的，文件夹视图与Windows中 的资源管理器相似，它能够显示当前的 Web中的内容是如何组织的。
三、报表视图 报表视图相当于属性检查，它能给出当 前网站的有关属性。灵活应用报表视图能 够使用户方便地了解网页的属性，便于把 握和修改网页。 四、导航视图 导航视图清楚地显示了Web的结构，用 户可以从中了解到网站中各部分之间的逻 辑关系，它反映了网站的整个脉络。
6 图形运用
一、添加图形 打开“插入”菜单的“图片”子菜单， 执行 “来自文件”命令，选择图象文件的名称。 二、编辑图形 包括设置图象的特殊效果、剪切图象、 添加文本。
1．添加文本 图片工具栏的“文本按钮”就是用来在 图象内添加文本信息的。 2．图象的特殊效果 ⑴ 旋转90度；⑵ 图象翻转；⑶ 修正对 比度；⑷ 调整亮度；⑸ 黑白处理；⑹ 图 象弱化；⑺ 突出效果；⑻ 采样与还原；⑼ 调整图象大小；⑽ 设置对齐方式；⑾ 使用 折叠文本；⑿ 设置间隔距离；⒀ 设置透明 背景
⒊ 选择动态类型的效果 设置动态类型的效果，也就是动态类型 的属性。 ⑴ 飞行方式 ⑵ 格式效果 在选择完事件类型、动态类型和动态类 型的效果后，就完成了一个动态效果的设 置。可以点击“DHTML效果”对话框右下 方 的效果显示图标，观察所设置的动态效果。
10 使用表单
创建表单的方式有三种：表单模板、表 单向导和自定义表单。 一、使用表单模板 二、使用表单向导 使用表单模板只能创建最简单的几种表 单，而用表单向导，就可以随心所欲地创 建表单。
⑴ 网页加载 网页加载是打开网页的操作，可以选择 某种动态效果，在网页加载时生效。 ⑵ 单击和双击 发生这种事件时，可以使用“飞到”或 “格式”两种动态效果。 ⑶ 鼠标移动 鼠标移动时间是指在浏览器窗口或预览 窗口中，鼠标经过效果文本或图片的操作。
网页制作 Front page2003操作步骤
网页制作Front page2003操作1、打开Front page试题我的电脑→C盘→ITCXAM文件夹→Front page 试题2、添加新网页文件→新建→网页…→新建网页对话框→常规选项中选择一种类型（一般为“普通网页”）→确定3、编辑文字（同Word操作）4、插入图片光标定位→插入→图片→来自文件…→图片对话框→“从计算机上选择一个文件”按钮→“选择文件”对话框→查找范围（C:/ITEXAM）选中图片→确定5、插入表格光标定位→表格→插入→表格…→插入表格对话框→选择：行数、列数等→确定6、设置表格的背景：光标定位在表格内→右键单击→表格属性…→表格属性对话框→分别选择：①布局、②边框、③背景（颜色或者使用背景图片）→应用→确定7、设置网页背景（背景音乐、背景图片、背景色）光标定位在网页中→右键单击→网页属性…→网页属性对话框→①常规项：背景音乐→浏览…→背景音乐对话框→“从计算机上选择一个文件”按钮→“选择文件”对话框→查找范围：C:/ITEXAM→选中音乐→确定→确定②背景项：a：背景图片：→√背景图片→浏览→“选择背景图片”对话框→“从计算机上选择一个文件”按钮→“选择文件”对话框→查找范围：C:/ITEXAM→选中图片→确定→确定b：背景颜色：背景色、文本色的选择→确定8、插入水平线、修改水平线属性光标定位→插入→水平线→右键单击水平线→水平线属性…→水平线属性对话框→大小、高度、对齐方式→颜色的选择（注意单位的选择）→确定9、插入滚动字幕插入→组件→字幕…→字幕属性对话框→设置：文本、方向、速度、表现方式、文本对齐方式大小、重复、背景颜色→确定10、添加视频、声音插入→图片→视频…→视频对话框→“从计算机上选择一个文件”按钮→选择文件对话框→查找范围：C:/ITEXAM→选中文件→确定11、添加超链接选中要超链接的对像→右键单击→超链接…→创建超链接对话框→①超链接到文件：→“制作一个指向您计算机上文件的超链接”按钮→选择文件对话框→查找范围C:/ITEXAM→选中文件→确定②超链接到邮箱：→“制作发送电子邮箱的超链接”按钮→“创建电子邮件超链接”对话框→输入电子邮件地址→确定→确定12、保存文件→保存文件。
《Frontpage2003网页设计与制作》教案
《Frontpage2003网页设计与制作》教案2009141119 郭飞一、教学目标1. 知识与技能目标：(1) 了解网页制作过程，初步学会如何分割网页版面；(2) 掌握对网页中素材的简单处理方法，如插入图片、艺术字、文本框；对图片进行超链接设置。
2. 能力目标：(1) 学习一种逆向思维方式，对版面进行设计能力，并充分利用背景图片、背景音乐及字幕的设置；(2) 通过对演示的网页的分析与小组合作锻炼学生交流与表达，增强学生的分析能力、动手实践能力；(3) 学会将素材有效地组织在一起，以表达综合信息的能力。
3. 情感、态度、价值观：鼓励学生大胆构思，学生交流过程中学会尊敬他人，客观评价他人观点，同时认识到网页所展示的内容要积极向上。
二、教学重、难点教学重点：1.利用Frontpage2003对设计的网页进行插入文本（包括艺术字、文本框的运用）；2.插入图片以及图片的超链接制作。
教学难点：1.利用网页分割设计原理，结合自己的主题，规划网页的版面；2.插入表格并对表格进行设置；3.设置背景图片、背景音乐、字幕。
三、教学步骤1.插入艺术字、文本框：“插入”——>“图片”——>“艺术字”“插入”——>“文本框”2.插入图片并设置超链接：“插入”——>“图片”——>“来自文件”——>“完成”——>选中——>单击鼠标右键“超链接”3.设置背景图片、背景音乐及字幕：网页的任意位置单击鼠标右键——>“网页属性”——>“背景音乐浏览”——>“确定”网页的任意位置单击鼠标右键——>“网页属性”——>“格式”——>“背景图片”——>“浏览”——>“确定”“插入”——>“Web组件”——>“字幕”4.设置表格属性及单元格属性：选中——>单击右键“表格属性/单元格属性”——>“确定”四、教学过程基于对前面的网页制作页眉页脚设置掌握后，要进一步讲解对版面的分割、文字图片插入技术的知识点。
FRONTPAGE2003 教程(设计网站部分)
FRONTPAGE2003 教程（设计网站部分）FrontPage2003 教程轻松布局网页用FrontPage2003的“布局表格和单元格”功能布局网页时，需要通过两部分来完成。
首先通过“布局表格”功能来为网页布局创建一个框架，然后通过“布局单元格”功能为该框架填充包含有网页内容(包括文本、图像、Web部件和其他元素)的区域，也就是单元格。
下面我们就以设置一个单位网站首页为例来了解一下用布局表格给网页布局的过程。
一、创建布局表格1.创建布局表格打开一个空白网页，并切换到“设计”视图下，单击“表格”菜单中的“布局表格和单元格”命令，随后在右侧弹出一个任务窗口(图1)，在该任务窗口下面程序提供了多种表格布局模板，在此单击其中需要的模板即可将该模板添加到网页中。
2.绘制布局表格如果你对模板中提供的布局表格不太满意，还可以用手工绘制的方法创建一个布局表格。
创建时首先在“新建表格和单元格”项中单击“绘制布局表格”，随后将指针移到操作窗口最下。
3.设置表格属性插入表格后，还需对表格属性进行设置。
在“表格属性”项中设置该表格所需的属性。
提示:在设置表格时，如果要想覆盖网页的默认边距，并让布局表格跨到文档窗口的边缘，可以将表格中的各个边距的属性都设置为0。
在设计框架时经常需要调整某一行或列的属性，这时可以通过表格中列宽和行高的标签来完成。
在操作窗口中单击布局表格需要调整的边框，每一侧都会出现显示列宽和行高的标- 1 -签。
每个标签都包括一个下拉箭头，如更改行高度时，单击此下拉箭头弹出一个下拉菜单，选择“更改行高”命令，在弹出的“行属性”对话框中重新输入该行高度值即可。
FrontPage2003还提供了一个表格自动功能，它可以按照比例自动伸缩，调整表格的宽度和高度，使用时在边距标签下拉菜单中选择“自动伸缩”命令即可快速地对表格的尺寸进行调整，非常方便。
二、单元格的添加和设置1.添加单元格布局表格创建了网页框架后，还要向表格中添加单元格。