计算机基础及应用教程（第2版） 第8章 FrontPage 2003的使用.ppt

1、第8章 FrontPage 2003的使用,第8章 FrontPage 2003的使用,8.1 FrontPage的窗口组成 8.2 设计简单网页和站点 8.3 修饰和布局网页 8.4 使用表单 习题8,8.1 FrontPage的窗口组成,8.2 设计简单网页和站点,8.2.1 新建网页或站点 8.2.2 编辑网页 8.2.3 保存和打开网页 8.2.4 使用模板 8.2.5 设置并修改站点主题 8.2.6 在网页中使用超链接,8.2.1 新建网页或站点,1. 新建空白网页 单击常用工具栏上的“新建普通网页”按钮；或者在“文件”菜单中选择“新建”，弹出“新建”任务窗格，“新建”任务窗格中，单

2、击“新建网页”栏中的选项。这时将按缺省模板生成空白网页。,2. 根据模板新建网页 1) 在“新建”任务窗格中的“新建网页”下，单击“其他网页模板”。 2) 在打开的“网页模版”对话框中，选择所要的网页模板，例如“普通网页” ，单击“确定”按钮。 3) 选择“new_page_2.htm”文件，单击“设计”按钮以转换至设计状态。 4) 在空白的网页上通过键盘输入一段文字，并按所需位置排列好。 每次按Enter键，产生一个换段符，行尾显示；如果每次换行时同时按Shift+Enter键，则产生一个换行符，行尾显示。如果要显示这些控制符号，则单击常用工具栏中的“全部显示”按钮，显示出编辑区的换行标记。

3、,8.2.2 编辑网页,1. 编辑文本 1) 单击常用工具栏上的新建按钮后的箭头，从下拉列表中选“网站”；或者单击“文件”菜单中的“新建”项，在“新建”任务窗格中，单击“新建网站”下的“其他网站模板”。 2) 在“网站模板”对话框中选择一个站点模板（如“个人网站”）。在“指定新网站的位置”框中输入保存网站的文件夹，单击“确定”，这时将创建一个网站。 3) 在“文件夹列表”中，双击选择一个要编辑的网页（如index.htm），这时将打开相应的网页。 4) 在网页上键入所需的文字。注意，输入文本时，文件应处于“设计”视图中。,2. 设置字体 对字符属性的设置与在Word中一样，首先选定要设置格式的

4、文本，用工具栏上的按钮或者打开“字体”对话框来设置字体、字号、字体颜色、效果等字体属性。,3. 字符间距的设置 1) 选择要设置格式的文本。 2) 单击鼠标右键，在快捷菜单上单击“字体”，弹出“字体”对话框。 3) 选择“字符间距”选项卡。 4) 在“间距”栏中可以选择“加宽”或“紧缩”来改变文本间距。在“间距大小”栏中可以以像素为单位改变字符的间距。 5) 单击“确定”。,4. 段落间距的设置 1) 选择要设置的一个或多个段落。 2) 单击鼠标右键，在快捷菜单上单击“段落”，弹出“段落”对话框。 3) 在“缩近和间距”选项卡中，若要设置段落上下的间距，在“段前”、“段后”栏中以“像素”为单位

5、输入值。在“行距大小”栏中设置文本行之间的垂直间距。“单字间距”可以设置字间距。 4) 单击“确定”。,5. 设置文本对齐方式 在“设计”视图模式中，选择要设置对齐方式的文本。在工具栏中单击按钮，对文本的对齐方式进行设置。按钮的功能依次为左对齐、居中、右对齐和两端对齐。,8.2.3 保存和打开网页,1. 保存网页或网站 用户可以保存正在进行编辑的网页，无论它是新建网页还是以前保存过的网页。还可以同时保存打开的所有网页，并可以为网页定义不同的名字或路径。利用“文件”菜单中的“保存”、“另存为”、“全部保存”命令可完成相应操作。 单击“文件”菜单中的“关闭网站”可保存并关闭打开的网站。,2. 打开

6、网页或网站 1) 单击“文件”菜单下的“打开”命令，或者单击工具栏上的“打开”按钮，弹出“打开文件”对话框。 2) 在“查找范围”中，通过下拉箭头浏览本地计算机上的任意一个站点，默认是当前站点。 3) 在“文件类型”后的文本框中选择“网页”。 4) 在站点文件列表中选择要打开的.htm文件。 5) 单击“打开”按钮，即可打开指定的网页。,8.2.4 使用模板,1. 站点模板 1) 在“新建”任务窗格中，单击“其他网站模板”，弹出“网站模板”对话框。 2) 选择要使用的模板，并设置站点的位置。这里以“个人网站”为例，单击“确定”。 3) 单击“视图”菜单中的“导航”项，在工作区中可以看到“个人站

7、点”的导航图。 4) 在“视图”菜单上，单击“报表”项下的“网站摘要”，可以看到该站点的文件总数、图片数、链接的文件数等信息。 5) 在“视图”菜单上，单击“文件夹”在“文件夹列表”中可以看到“个人网站”内的所有文件。双击某一文件可以在“网页”视图中打开并编辑该网页。,2. 网页模板 1) 在“新建”任务窗格中，单击“其他网页模板”，打开“网页模板”对话框。 2) 单击要使用的模板选项卡，再单击某一模板（如“常规”选项卡中的“图片库”模板），在“预览”中会显示该模板的缩略图。 3) 单击“确定”。这时将自动切换到网页编辑区，并新建一个文件。 4) 将自己准备的文字与图片替换模板中已有的文字与图

8、片，然后保存该网页。,8.2.5 设置并修改站点主题,1. 将主题应用到当前网页 1) 在“设计”视图中，打开要应用主题的网页。 2) 在“格式”菜单上，单击“主题”，打开“主题”任务窗格。 3) 在“选择主题”下拉列表中选择要应用的主题。 4) 单击主题旁边的下拉箭头，从菜单中选择“应用于所选网页”。在编辑窗口可看到主题的效果。,2. 将主题应用到所选网页 1) 在“文件夹列表”中选择要应用主题的网页。若要选择多个网页，按下Ctrl键并单击要选择的网页。 2) 在“格式”菜单上，单击“主题”，打开“主题”任务窗格。 3) 在“选择主题”下拉列表中选择要应用的主题。 4) 单击主题旁边的下拉箭

9、头，从菜单中选择“应用于所选网页”。,3. 将主题应用到整个Web站点 如果需将主题应用到整个站点，可在“主题”任务窗格中，选择主题菜单中的“应用为默认主题”，这时，FrontPage 2003将显示一个警告，表明用户正在设置该站点的默认主题。,4. 修改主题 1) 在“网页”视图中，打开要修改主题的网页。 2) 在“格式”菜单上，单击“主题”，打开“主题”任务窗格。 3) 在“主题”任务窗格中，单击某一主题菜单中的“自定义”，打开“自定义主题”对话框。 4) 在“自定义主题”对话框中，单击“颜色”按钮，在弹出的对话框中选择“配色方案”选项卡，选择一种方案。在“颜色盘”选项卡上选择一种颜色，右

10、面的视图会自动生成相应的预览视图。选择不同的亮度与主题颜色将得到不同的效果。,5) 单击“自定义”选项卡，在“项目”下拉列表中，选择要单独修改的主题元素，然后在右面的“颜色”下拉列表中选择需要的颜色。 6) 单击“确定”按钮返回到“自定义主题”对话框。 7) 在“自定义主题”对话框中单击“确定”按钮，这时将弹出一个提示框提示是否要对所做的修改保存，单击“确定”按钮。 8) 在“保存主题”对话框中，为新主题命名。 9) 单击“确定”按钮完成修改。,8.2.6 在网页中使用超链接,1. 插入超链接 1) 在“设计”状态，选中要添加超链接的文本或图形。 2) 单击鼠标右键，在弹出的快捷菜单中单击“超

11、链接”，打开“插入超链接”对话框。如果要修改已有超连接，则从快捷菜单中单击“超连接属性”。 3) 在左侧“链接到”内选择“原有文件或网页”。 4) 在对话框中间选择所要的网页或文件。也可以单击“浏览Web”按钮，从万维网上寻找。 5) 单击“确定”完成操作。,2. 向超链接添加字体效果 1) 在“网页”视图模式中，在网页上单击鼠标右键，在快捷菜单中选择“网页属性”选项，弹出“网页属性”对话框，选择“高级”选项卡。 2) 选中“启用超链接翻转效果”复选框，单击“翻转样式”，打开“字体”对话框，为网页设置翻转属性，其中包括对字体和字符间距的设置。 3) 完成设置后，在浏览器中把鼠标悬停在超链接上，

12、超链接将按照设定的样式效果进行变化。,3. 设置超链接的颜色 1) 在“网页属性”对话框中，单击“格式”选项卡。 2) 在“超链接”、“已访问的超链接”和“当前超链接”栏中，选择要使用的颜色。 3) 单击“确定”完成操作。 设置超链接时应注意，网页使用了“主题”后就不能使用此项功能，但可以通过更改主题元素来更改超链接的颜色。,8.3 修饰和布局网页,8.3.1 设置背景 8.3.2 插入图片 8.3.3 设计字幕 8.3.4 使用导航栏 8.3.5 使用表格 8.3.6 使用框架,8.3.1 设置背景,1. 设置Web页的背景颜色 1) 在“网页”视图中，用鼠标右键单击网页，再单击快捷菜单上“

13、网页属性”。 2) 在“网页属性”对话框中，单击“格式”选项卡。 3) 在“颜色”下面的“背景”框中，单击右边的下拉箭头，弹出“调色板”窗口，直接选择一种背景色。或者，单击“其他颜色”，打开“其他颜色”对话框进行选择。 4) 单击“确定”完成操作。,2. 使用图片作为网页的背景 1) 在“网页属性”对话框中，单击“格式”选项卡。 2) 选中“背景图片”复选框，选中“使其成为水印”复选框使背景图片成为水印。 3) 单击“浏览”按钮，打开“选择背景图片”对话框。可以直接键入图片名称单击“打开”按钮或是单击“浏览Web”按钮，在Web浏览器中寻找需要的图片，同时按Alt+Tab切换回FrontPag

14、e，访问过的网页的位置将会显示在“文件名”栏中，单击“打开”按钮。 4) 返回“格式”选项卡后，单击“确定”按钮，网页上已添加了图像背景。,8.3.2 插入图片,1. 添加来自文件的图形 1) 在“网页”视图下，指定所要添加图形的位置。 2) 在“插入”菜单上，指向“图片”，再单击“来自文件”，打开“图片”对话框。 3) 从本地文件系统或Web站点浏览找到所需的图片。 4) 单击“插入”。,2. 添加来自万维网上的图形 1) 在“网页”视图中，指定所要添加图形的位置。 2) 在“插入”菜单上，指向“图片”，再单击“来自文件”。 3) 单击“搜索Web”按钮指向有图形的网页。 4) 用鼠标右键单

15、击图形，再单击快捷菜单上的“复制”，重新切换回FrontPage，再次用鼠标右键单击，并从快捷菜单上选择“粘贴”，把图形添加到网页中。,3. 添加剪辑管理器的粘贴图 1) 在“网页”视图下，指定所要添加图形的位置。 2) 在“插入”菜单上，指向“图片”，再单击“剪贴画”。 3) 在其中可以对所需图片进行搜索，单击所要插入的图片。,8.3.3 设计字幕,1. 插入字幕组件 1) 选择需要插入字幕的位置。 2) 单击“插入”菜单中的“Web组件”命令，打开“插入Web组件”对话框。 3) 在“组件类型”中选择“动态效果”，在“选择一种效果”窗格中单击“字幕”。 4) 单击“完成”按钮后设置字幕的属

16、性。,2. 设置表现方式和属性 1) 文本：键入要显示的字幕文本（没有长度限制）。 2) 方向：选择“左”或“右”来指定字幕文本的移动方向。 3) 速度：指定字幕文本移动的速度。延迟是指字幕开始移动之前的延迟时间（以毫秒为单位）；数量指字幕文本移动的增量值（以像素为单位）。 4) 表现方式：“滚动条”是文本像证券行情自动记录收报机一样滚过屏幕；“幻灯片”指文本滑入视野；“交替”是文本在滚动和滑动之间交替。 5) 大小：选中“宽度”或“高度”复选框，键入宽度或高度，再选择是以像素为单位还是以浏览器窗口的百分比为单位给出宽度或高度。 6) 重复：指定字幕中的文本效果重复的次数。若要连续重复字幕，选

17、中该复选框。若要以固定的次数重复显示字幕，先清除该复选框，再键入字幕重复的次数。 7) 背景色：指定要在字幕滚动文本后显示的颜色。,8.3.4 使用导航栏,1. 导航结构 1) 在“文件夹列表”框中，单击作为主页的网页（如index.htm）。 2) 在“导航”视图中更改作为主页图标的名称（如Home Page、主页）。 3) 主页建立完成后，就要为主页添加下级网页，方法是：从“文件夹列表”框中拖动网页文件名到右面的“导航”视图中的相应位置。,2. 共享边框 1) 在“网页”视图中，单击“格式”菜单中的“共享边框”命令，将打开“共享边框”对话框。 2) 如果要向站点中的所有网页都添加共享边框，

18、选中“所有网页”单选项；如果只是向当前网页添加边框，则选中“当前网页”单选项。 3) 确定要共享的区域，如选中“上”、“下”、“左”或“右”复选框。 4) 单击“确定”按钮。,3. 为网页添加导航栏 1) 进入“网页”视图的“设计”方式，在index.htm中单击共享边框线的左侧。 2) 单击“插入”菜单中的“导航”命令。 3) 在打开的“插入Web组件”对话框中，选择“链接栏”，并选择“基于导航结构的链接栏”，单击“下一步”按钮。 4) 选择某一样式后，单击“下一步”。 5) 选择某一方向，单击“完成”按钮，弹出“链接栏属性”对话框。 6) 选中“子层”单选项，单击“确定”按钮，返回网页页面

19、。 7) 在“文件夹列表框”中双击网页名，打开该网页。 8) 右键单击该网页共享边框，从快捷菜单中选择“链接栏属性”命令，在“链接栏属性”对话框中选中“同一层”单选项。 9) 单击“确定”后，就在站点中建立了导航栏。,4. 删除导航栏 单击导航栏以选中导航栏，按Delete键删除导航栏。注意，系统会自动删除与它同级的网页中的导航栏。,8.3.5 使用表格,1. 插入表格 1) 在网页中选择插入点，并将插入点放在要插入表格的位置。 2) 在“表格”菜单上，指向“插入”，再单击“表格”，打开“插入表格”对话框。 3) 在“插入表格”对话框中设置表格的属性，在“行数”框中，键入想要的行数。在“列数”

20、框中，键入想要的列数。 4) 选择表格的布局方式，在“对齐方式”框中，选择表格在网页上的位置。有左对齐、右对齐和居中，默认为左对齐。选中“指定宽度”复选框，然后选取计算单位为“百分比”，在文本框中输入“100”表示表格占网页宽度的全部。 5) 选择“确定”按钮，在网页中将得到所需的表格。 6) 根据需要，在表格中填入内容。,2. 手工绘制表格 单击“表格”菜单上的“绘制表格”命令，打开“表格”工具栏。利用“表格”工具栏上的命令按钮进行表格绘制。 例如，选择“布局表格”按钮，这时鼠标指针变为。然后在网页上用鼠标从左上角向右下角拖动，以绘制表格的外边框。,3. 打开“表格属性” 1) 在“网页”视

21、图的“设计”状态，用鼠标右键单击已插入的表格。 2) 单击快捷菜单上的“表格属性”。 3) 在“表格属性”对话框中，可以设置表格的布局、表格的边框和表格的背景等属性。,8.3.6 使用框架,1. 创建框架 1) 新建一个站点，在工具栏中选择“新建”按钮，单击该按钮右面的下拉箭头，在弹出的菜单中选择“网站”命令。 2) 在弹出的“网站模板”对话框中，选择“空白网站”，然后选择“确定”按钮。 3) 单击“视图”菜单中的“网页”，切换到“网页”视图中。 4) 单击“文件”菜单上的“新建”，打开“新建网页或站点”任务窗格。 4) 在“新建”任务窗格中，在“新建网页”下选择“其他网页模板”，打开“网页模

22、板”对话框。 5) 在“网页模板”对话框中，单击“框架网页”选项卡，在该选项卡中列出了所有的框架模板，选择某一框架模板（如“目录”），这时在窗口右边的“说明”栏中列出相应框架结构的使用说明。,6) 单击“确定”按钮。这时将自动在编辑区生成一个框架，在该框架中显示出了刚才选择创建的框架模板的具体结构。 7) 创建的框架中只是原始结构，并没有建立对应的网页。这时有两种方法初始化框架网页：一是在每个框架中创建一个新的网页，另外一种方法是在框架中选择已经建立的网页。这里选择“新建网页”。 8) 在空白网页中，输入内容。,2. 设置框架属性 在框架网页中的任何位置单击鼠标右键，再单击快捷菜单中的“框架属性”。这里注意要明确所选择的框架网页，选中的框架网页的框架出现一个蓝色边框。打开“框架属性”对话框。 在“框架属性”中可以设置框架名称、显示或隐藏框架周围的边框、设置框架间距、调整框架边距、显示或隐藏框架滚动条等框架属性。,8.4 使用表单,8.4.1 创建表单 8.4.2 添加表单域及设置属性,8.4.1 创建表单,1. 插入表单 1) 在“插入”菜单上，单击“表单”子菜单中的“表单”命令。 2) 在“插入”菜单上，指向“表单”，选择要添加到表单中的域。,2. 使用向导创建表单 在“新建”任务窗格中，单击“