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键，则产生一个换行符，行尾显示。如果要显示这些控制符号，则单击常用工具栏中的“全部显示”按钮，显示出编辑区的换行标记。,8.2.2
3、 编辑网页,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. 打开网页或网站1) 单击“文件”菜单下的“打开”命
6、令，或者单击工具栏上的“打开”按钮，弹出“打开文件”对话框。2) 在“查找范围”中，通过下拉箭头浏览本地计算机上的任意一个站点，默认是当前站点。3) 在“文件类型”后的文本框中选择“网页”。4) 在站点文件列表中选择要打开的.htm文件。5) 单击“打开”按钮，即可打开指定的网页。,8.2.4 使用模板,1. 站点模板1) 在“新建”任务窗格中，单击“其他网站模板”，弹出“网站模板”对话框。2) 选择要使用的模板，并设置站点的位置。这里以“个人网站”为例，单击“确定”。3) 单击“视图”菜单中的“导航”项，在工作区中可以看到“个人站点”的导航图。4) 在“视图”菜单上，单击“报表”项下的“网站
7、摘要”，可以看到该站点的文件总数、图片数、链接的文件数等信息。5) 在“视图”菜单上，单击“文件夹”在“文件夹列表”中可以看到“个人网站”内的所有文件。双击某一文件可以在“网页”视图中打开并编辑该网页。,2. 网页模板1) 在“新建”任务窗格中，单击“其他网页模板”，打开“网页模板”对话框。2) 单击要使用的模板选项卡，再单击某一模板（如“常规”选项卡中的“图片库”模板），在“预览”中会显示该模板的缩略图。3) 单击“确定”。这时将自动切换到网页编辑区，并新建一个文件。4) 将自己准备的文字与图片替换模板中已有的文字与图片，然后保存该网页。,8.2.5 设置并修改站点主题,1. 将主题应用到当
8、前网页1) 在“设计”视图中，打开要应用主题的网页。2) 在“格式”菜单上，单击“主题”，打开“主题”任务窗格。3) 在“选择主题”下拉列表中选择要应用的主题。4) 单击主题旁边的下拉箭头，从菜单中选择“应用于所选网页”。在编辑窗口可看到主题的效果。,2. 将主题应用到所选网页1) 在“文件夹列表”中选择要应用主题的网页。若要选择多个网页，按下Ctrl键并单击要选择的网页。2) 在“格式”菜单上，单击“主题”，打开“主题”任务窗格。3) 在“选择主题”下拉列表中选择要应用的主题。4) 单击主题旁边的下拉箭头，从菜单中选择“应用于所选网页”。,3. 将主题应用到整个Web站点如果需将主题应用到整
9、个站点，可在“主题”任务窗格中，选择主题菜单中的“应用为默认主题”，这时，FrontPage 2003将显示一个警告，表明用户正在设置该站点的默认主题。,4. 修改主题1) 在“网页”视图中，打开要修改主题的网页。2) 在“格式”菜单上，单击“主题”，打开“主题”任务窗格。3) 在“主题”任务窗格中，单击某一主题菜单中的“自定义”，打开“自定义主题”对话框。4) 在“自定义主题”对话框中，单击“颜色”按钮，在弹出的对话框中选择“配色方案”选项卡，选择一种方案。在“颜色盘”选项卡上选择一种颜色，右面的视图会自动生成相应的预览视图。选择不同的亮度与主题颜色将得到不同的效果。,5) 单击“自定义”选
10、项卡，在“项目”下拉列表中，选择要单独修改的主题元素，然后在右面的“颜色”下拉列表中选择需要的颜色。6) 单击“确定”按钮返回到“自定义主题”对话框。7) 在“自定义主题”对话框中单击“确定”按钮，这时将弹出一个提示框提示是否要对所做的修改保存，单击“确定”按钮。8) 在“保存主题”对话框中，为新主题命名。9) 单击“确定”按钮完成修改。,8.2.6 在网页中使用超链接,1. 插入超链接1) 在“设计”状态，选中要添加超链接的文本或图形。2) 单击鼠标右键，在弹出的快捷菜单中单击“超链接”，打开“插入超链接”对话框。如果要修改已有超连接，则从快捷菜单中单击“超连接属性”。3) 在左侧“链接到”
11、内选择“原有文件或网页”。4) 在对话框中间选择所要的网页或文件。也可以单击“浏览Web”按钮，从万维网上寻找。5) 单击“确定”完成操作。,2. 向超链接添加字体效果1) 在“网页”视图模式中，在网页上单击鼠标右键，在快捷菜单中选择“网页属性”选项，弹出“网页属性”对话框，选择“高级”选项卡。2) 选中“启用超链接翻转效果”复选框，单击“翻转样式”，打开“字体”对话框，为网页设置翻转属性，其中包括对字体和字符间距的设置。3) 完成设置后，在浏览器中把鼠标悬停在超链接上，超链接将按照设定的样式效果进行变化。,3. 设置超链接的颜色1) 在“网页属性”对话框中，单击“格式”选项卡。2) 在“超链
12、接”、“已访问的超链接”和“当前超链接”栏中，选择要使用的颜色。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) 在“网页”视图中，用鼠标右键单击网页，再单击快捷菜单上“网页属性”。2) 在“网页属性”对话框中，单击“格式”选项卡。3) 在“颜色”下面的“背景”框中，单击右边的下拉箭头，弹出“调色板”窗
13、口，直接选择一种背景色。或者，单击“其他颜色”，打开“其他颜色”对话框进行选择。4) 单击“确定”完成操作。,2. 使用图片作为网页的背景1) 在“网页属性”对话框中，单击“格式”选项卡。2) 选中“背景图片”复选框，选中“使其成为水印”复选框使背景图片成为水印。3) 单击“浏览”按钮，打开“选择背景图片”对话框。可以直接键入图片名称单击“打开”按钮或是单击“浏览Web”按钮，在Web浏览器中寻找需要的图片，同时按Alt+Tab切换回FrontPage，访问过的网页的位置将会显示在“文件名”栏中，单击“打开”按钮。4) 返回“格式”选项卡后，单击“确定”按钮，网页上已添加了图像背景。,8.3.
14、2 插入图片,1. 添加来自文件的图形1) 在“网页”视图下，指定所要添加图形的位置。2) 在“插入”菜单上，指向“图片”，再单击“来自文件”，打开“图片”对话框。3) 从本地文件系统或Web站点浏览找到所需的图片。4) 单击“插入”。,2. 添加来自万维网上的图形1) 在“网页”视图中，指定所要添加图形的位置。2) 在“插入”菜单上，指向“图片”，再单击“来自文件”。3) 单击“搜索Web”按钮指向有图形的网页。4) 用鼠标右键单击图形，再单击快捷菜单上的“复制”，重新切换回FrontPage，再次用鼠标右键单击，并从快捷菜单上选择“粘贴”，把图形添加到网页中。,3. 添加剪辑管理器的粘贴图
15、1) 在“网页”视图下，指定所要添加图形的位置。2) 在“插入”菜单上，指向“图片”，再单击“剪贴画”。3) 在其中可以对所需图片进行搜索，单击所要插入的图片。,8.3.3 设计字幕,1. 插入字幕组件1) 选择需要插入字幕的位置。2) 单击“插入”菜单中的“Web组件”命令，打开“插入Web组件”对话框。3) 在“组件类型”中选择“动态效果”，在“选择一种效果”窗格中单击“字幕”。4) 单击“完成”按钮后设置字幕的属性。,2. 设置表现方式和属性1) 文本：键入要显示的字幕文本（没有长度限制）。2) 方向：选择“左”或“右”来指定字幕文本的移动方向。3) 速度：指定字幕文本移动的速度。延迟是
16、指字幕开始移动之前的延迟时间（以毫秒为单位）；数量指字幕文本移动的增量值（以像素为单位）。4) 表现方式：“滚动条”是文本像证券行情自动记录收报机一样滚过屏幕；“幻灯片”指文本滑入视野；“交替”是文本在滚动和滑动之间交替。5) 大小：选中“宽度”或“高度”复选框，键入宽度或高度，再选择是以像素为单位还是以浏览器窗口的百分比为单位给出宽度或高度。6) 重复：指定字幕中的文本效果重复的次数。若要连续重复字幕，选中该复选框。若要以固定的次数重复显示字幕，先清除该复选框，再键入字幕重复的次数。7) 背景色：指定要在字幕滚动文本后显示的颜色。,8.3.4 使用导航栏,1. 导航结构1) 在“文件夹列表”
17、框中，单击作为主页的网页（如index.htm）。2) 在“导航”视图中更改作为主页图标的名称（如Home Page、主页）。3) 主页建立完成后，就要为主页添加下级网页，方法是：从“文件夹列表”框中拖动网页文件名到右面的“导航”视图中的相应位置。,2. 共享边框1) 在“网页”视图中，单击“格式”菜单中的“共享边框”命令，将打开“共享边框”对话框。2) 如果要向站点中的所有网页都添加共享边框，选中“所有网页”单选项；如果只是向当前网页添加边框，则选中“当前网页”单选项。3) 确定要共享的区域，如选中“上”、“下”、“左”或“右”复选框。4) 单击“确定”按钮。,3. 为网页添加导航栏1) 进
18、入“网页”视图的“设计”方式，在index.htm中单击共享边框线的左侧。2) 单击“插入”菜单中的“导航”命令。3) 在打开的“插入Web组件”对话框中，选择“链接栏”，并选择“基于导航结构的链接栏”，单击“下一步”按钮。4) 选择某一样式后，单击“下一步”。5) 选择某一方向，单击“完成”按钮，弹出“链接栏属性”对话框。6) 选中“子层”单选项，单击“确定”按钮，返回网页页面。7) 在“文件夹列表框”中双击网页名，打开该网页。8) 右键单击该网页共享边框，从快捷菜单中选择“链接栏属性”命令，在“链接栏属性”对话框中选中“同一层”单选项。9) 单击“确定”后，就在站点中建立了导航栏。,4.
19、删除导航栏单击导航栏以选中导航栏，按Delete键删除导航栏。注意，系统会自动删除与它同级的网页中的导航栏。,8.3.5 使用表格,1. 插入表格1) 在网页中选择插入点，并将插入点放在要插入表格的位置。2) 在“表格”菜单上，指向“插入”，再单击“表格”，打开“插入表格”对话框。3) 在“插入表格”对话框中设置表格的属性，在“行数”框中，键入想要的行数。在“列数”框中，键入想要的列数。4) 选择表格的布局方式，在“对齐方式”框中，选择表格在网页上的位置。有左对齐、右对齐和居中，默认为左对齐。选中“指定宽度”复选框，然后选取计算单位为“百分比”，在文本框中输入“100”表示表格占网页宽度的全部
20、。5) 选择“确定”按钮，在网页中将得到所需的表格。6) 根据需要，在表格中填入内容。,2. 手工绘制表格单击“表格”菜单上的“绘制表格”命令，打开“表格”工具栏。利用“表格”工具栏上的命令按钮进行表格绘制。例如，选择“布局表格”按钮，这时鼠标指针变为。然后在网页上用鼠标从左上角向右下角拖动，以绘制表格的外边框。,3. 打开“表格属性”1) 在“网页”视图的“设计”状态，用鼠标右键单击已插入的表格。2) 单击快捷菜单上的“表格属性”。3) 在“表格属性”对话框中，可以设置表格的布局、表格的边框和表格的背景等属性。,8.3.6 使用框架,1. 创建框架1) 新建一个站点，在工具栏中选择“新建”按
21、钮，单击该按钮右面的下拉箭头，在弹出的菜单中选择“网站”命令。2) 在弹出的“网站模板”对话框中，选择“空白网站”，然后选择“确定”按钮。3) 单击“视图”菜单中的“网页”，切换到“网页”视图中。4) 单击“文件”菜单上的“新建”，打开“新建网页或站点”任务窗格。4) 在“新建”任务窗格中，在“新建网页”下选择“其他网页模板”，打开“网页模板”对话框。5) 在“网页模板”对话框中，单击“框架网页”选项卡，在该选项卡中列出了所有的框架模板，选择某一框架模板（如“目录”），这时在窗口右边的“说明”栏中列出相应框架结构的使用说明。,6) 单击“确定”按钮。这时将自动在编辑区生成一个框架，在该框架中显
22、示出了刚才选择创建的框架模板的具体结构。7) 创建的框架中只是原始结构，并没有建立对应的网页。这时有两种方法初始化框架网页：一是在每个框架中创建一个新的网页，另外一种方法是在框架中选择已经建立的网页。这里选择“新建网页”。8) 在空白网页中，输入内容。,2. 设置框架属性在框架网页中的任何位置单击鼠标右键，再单击快捷菜单中的“框架属性”。这里注意要明确所选择的框架网页，选中的框架网页的框架出现一个蓝色边框。打开“框架属性”对话框。在“框架属性”中可以设置框架名称、显示或隐藏框架周围的边框、设置框架间距、调整框架边距、显示或隐藏框架滚动条等框架属性。,8.4 使用表单,8.4.1 创建表单 8.
23、4.2 添加表单域及设置属性,8.4.1 创建表单,1. 插入表单1) 在“插入”菜单上，单击“表单”子菜单中的“表单”命令。2) 在“插入”菜单上，指向“表单”，选择要添加到表单中的域。,2. 使用向导创建表单在“新建”任务窗格中，单击“其他网页模板”打开“网页模板”对话框。在“常规”选项卡上，单击“表单网页向导”，再单击“确定”。按照“表单网页向导”的提示，完成表单的创建。,8.4.2 添加表单域及设置属性,1. 向表单添加文本框1) 单击表单中要放置文本框的位置。2) 在“插入”菜单上，指向“表单”，再单击“文本框”。3) 双击文本框，打开“文本框属性”对话框。4) 在“名称”框中，键入
24、标识文本框的名称。5) 如果希望站点访问者第一次打开表单时文本框中会出现文本，在“初始值”框中键入文本。6) 在“宽度”框内，键入以字符数为单位的文本框宽度。7) 在“密码”域中，单击“是”或“否”来决定此域是否包含密码，从而加密其中的内容。8) 单击“确定”按钮。,2. 向表单添加选项按钮1) 单击表单中要放置选项按钮的位置。2) 在“插入”菜单上，指向“表单”，再单击“选项按钮”。直接在表单上选项按钮的旁边键入选项按钮的标签。3) 双击选项按钮，打开“选项按钮属性”对话框。4) 在“组名称”框中，键入用于标识此选项按钮所属的组的名称。5) 在“值”框中，键入与此域关联的值。如果此选项按钮被选中，这个值就会与表单结果一起返回，并显示在确认网页上。6) 如果希望站点访问者首次打开表单时此选项按钮被默认选中，单击“初始状态”之下的“已选中”。7) 单击“确定”按钮。,习题8,8.1 什么是主页？主页和网页有何不同之处？主页在一个站点中的作用主要是什么？8.2 简述在FrontPage中创建站点的基本过程。8.3 简述将网页内容显示到浏览器窗口中的基本过程。8.4 认真观察Internet中制作精美、内容丰富的个人网站，结合自己的实际情况使用FrontPage创建一个个人站点（至少要包含5个网页）。,本章结束,
