网页制作软件FrontPage2003解读.ppt

1,网页制作软件FrontPage 2003,2,网页制作软件FrontPage 2003,1 FrontPage 2003概述 2 网页基本元素编辑 3 网页布局 4 表单应用 5 网站发布及管理,3,1 FrontPage 2003概述,7.1.1 功能特点 7.1.2 窗口界面 7.1.3 基本操作,4,1.1 功能特点,FrontPage让初学者无需掌握HTML语言或具备编程基础知识便能够编写出界面优美、功能完善的网站下面简单介绍一下FrontPage的特点 “所见即所得”的网页编辑环境，也就是说，用户在网页编辑窗口中看到的效果就是浏览器中显示的效果 易学易用的操作界面，像其它Office套件一样，在FrontPage中集成了大量的网页模板和网站向导，让用户很方便快捷地制作出优美的网页 功能强大的新版本FrontPage融合了网页管理、网页编辑、网页发布和网站维护等多种功能，利用FrontPage制作的网页支持最新的网页标准，比如DHTML、XML、CSS2等等5,1.2 窗口界面,FrontPage 2003主界面主要由菜单栏、工具栏、视图栏、状态栏、主编辑窗口和任务窗格等6大部分组成。

6,1．“网页”视图,,选择【视图】【网页】命令，打开网页视图 网页视图是FrontPage中最常用的工作界面，网页的创建、编辑、预览等基本操作都是在此视图中进行的网页视图窗口底部有4个标签：“设计”、“拆分”、“代码”和“预览”，它们分别控制着网页的4种显示模式在设计模式下，能够以“所见即所得”的方式编辑网页；在代码模式下，可以查看或编辑网页的HTML的源代码；在预览模式下，可以预览网页的效果；在拆分模式下，能够同时编辑网页和查看或编辑网页的HTML的源代码7,1．“网页”视图,,8,2．“文件夹”视图,,单击 “视图”栏中的“文件夹”图标或选择【视图】【文件夹】命令，打开文件夹视图 在文件夹视图下，网站显示为一组文件和文件夹在此视图下可以对网站中的文件夹和各种文件进行管理9,3．“报表”视图,,单击“视图”栏中的“报表”图标或选择【视图】【报表】命令，打开报表视图 通过报表视图，可以在运行报表查询后分析网站内容10,4．“导航”视图,,单击“视图”栏中的“导航”图标或选择【视图】【导航】命令，打开导航视图 导航视图用于管理网站中各网页的层次关系结构图可以通过鼠标将结构图中的网页拖到新位置来改变链接结构。

11,5．“超链接”视图,,单击“视图”栏中“超链接”图标或选择【视图】【超链接】命令 超链接视图用于管理网站中网页的超链接12,6．“任务”视图,,单击“视图”栏中的“任务”图标或选择【视图】【任务】命令，可打开任务视图 任务视图可以实现网站任务的管理网站的任务是指网站管理人员维护网站的任务，包括网页的更新和网站的检查等13,7．“远程网站”视图,,可以使用“远程网站”视图发布整个网站，或有选择地发布个别文件还可以在两个或多个位置之间同步文件，即确保包含相同内容的网站都包含最新的更改14,7.1.3基本操作,1．网站的规划 2．网站的基本操作 3．网页的基本操作,15,1．网站的规划,,首先要明确建立网站的目的 其次要明确网站的浏览者群 最后要考虑到如何能够便于网站的日常维护16,2．网站的基本操作,,1) 创建网站 创建一个Web网站有两种方法第一种方法是利用FrontPage的Web网站模板和向导，这种方法操作简单、速度快，比较适合建立大、中型的Web网站第二种方法是逐个地创建网页文件，然后创建它们之间的链接关系，这种方法适合于网页数量不多的小型网站 使用FrontPage模板创建网站的步骤： 启动FrontPage应用程序； 选择【文件】【新建…】命令，打开“新建”任务窗格； 选择网站模板，在“新建网站”栏选择“由一个网页组成的网站…”，打开“网站模板”对话框，在“指定新网站的位置”文本框中输入新网站的位置及名称，然后单击“确定”按钮。

17,,2）关闭网站 选择【文件】【关闭网站】命令 关闭网站即关闭网站及该网站下的所有网页 3）打开网站 选择【文件】【打开网站】命令，“打开网站”对话框 选择网站名称，然后单击“打开”按钮2．网站的基本操作,18,3．网页的基本操作,,1）新建网页 在FrontPage 2003中可以直接创建一个空白网页，也可以利用网页模板和网页向导来创建 在某网站中创建新网页，在此网站的文件夹视图和导航视图方式下单击视图窗口右上角的“新建网页”按钮 创建不属于某网站的新网页，在任何视图方式下，选择【文件】【新建…】命令，打开“新建”任务窗格，可在新建任务窗格中，选择一种合适的模板新建网页；或者单击常用工具栏上的“新建”按钮 19,,2）打开网页 打开当前网站中的网页，在任何视图中双击该网页图标或文件名即可打开网页 打开其它网站中的网页，选择【文件】【打开】命令，在“打开文件”对话框中选择具体网页文件打开 3）保存网页 保存当前网站中的网页，单击工具栏中的保存按钮，或【文件】【保存】命令即可如果网页中有图片，则会弹出“保存嵌入式文件”对话框，提示保存图片文件 保存不属于当前网站中的网页，则需要指定保存路径。

4）关闭网页 选择【文件】【关闭】命令这种方式关闭的仅是当前网页，要注意与关闭网站的区别3．网页的基本操作,20,2 网页基本元素编辑,7.2.1 文本编辑 7.2.2 图像编辑 7.2.3 超链接创建 7.2.4 Web组件,21,2.1文本编辑,1．文本添加 2．设置段落和文本格式 3．插入水平线 4．设置网页属性,22,1．文本添加,,在网页中添加文本与在Word中添加文本的操作基本相同此外，在网页中输入文本时，如果已经达到网页边界，则文本会自动回滚到下一行继续输入，这种换行方式并不会产生新行或是一个新段落，随着网页边界的变化或是编辑窗口的调整，FrontPage 2003会自动调整这个回滚位置 按下+键将产生新行，即换行，新行与上一行之间没有回滚关系 按下键产生一个新段落23,2．设置段落和文本格式,,可以使用格式工具栏（如图7.2.1所示）或“字体”和“段落”对话框对文本和段落的格式进行设置其操作方法跟Word基本相同24,3．插入水平线,,为了修饰页面，明显区分开标题与正文，可选择【插入】【水平线】命令在当前光标点插入一条水平线双击水平线或选择【格式】【属性】命令弹出“水平线属性”对话框，可对水平线的高度、宽度、颜色和对齐方式进行设置。

25,4．设置网页属性,,网页属性是一个网页整体的属性，记录关于网页的非页面部分的相关信息适当的设置可以达到增加网页美观和缩减网页文件大小的效果 方法一：右击页面，从弹出的快捷菜单中选择“网页属性”命令 方法二：选择【格式】【背景】命令； 方法三：选择【文件】【属性】命令；,,,,,,26,2.2图像编辑,1．插入图像 2．编辑图像 3．设置图片属性,27,1．插入图像,,插入一幅关于“背景”的剪贴画的操作步骤： 将插入点定位在需要插入图片的位置； 选择【插入】【图片】【剪贴画】命令，打开“剪贴画”任务窗格，如图所示； 在任务窗格中，用户可在“搜索文字”文本框中输入剪贴画的关键字“背景”； 单击“搜索”按钮开始搜索，在任务窗格下方列表框中列出了搜索到的剪贴画； 单击剪贴画右侧的下三角按钮，弹出剪贴画的快捷菜单，单击“插入”命令即可28,,插入来自文件的图片的操作步骤： 将插入点定位在需要插入图片的位置； 将插入点定位在需要插入图片的位置； 选择【插入】【图片】【来自文件】命令，或单击“常用”工具栏中“插入图片”按钮； 打开“图片”对话框，选择所需文件，单击“插入”按钮1．插入图像,29,2．编辑图像,,在网页中插入图像后，还可对图像进行编辑。

用鼠标单击选取图像，在屏幕上就会出现“图片”工具栏利用“图片”工具栏可对图片进行旋转、剪裁、冲蚀，设置凹凸效果、透明背景色，调整亮度、对比度以及在图片中加入文字等选中图片后，拖动图片周围的控点可改变图片大小30,3．设置图片属性,,选定所需的图片，单击鼠标右键，从快捷菜单中选择“图片属性”命令，弹出“图片属性”对话框在对话框的“常规”和“外观”两个选项卡中进行设置，可以做出各种图文混排的页面效果31,7.2.3 超链接创建,1．选择链接的载体 2．选择链接的目标 3．指定目标窗口 4．验证超级链接 5．设置超链接的状态颜色 6．图像映射,32,,超链接是从一个网页指向另一个目的地的指针，这个目的地可以是另一个网页或同一个网页中的其他位置，也可以是一个电子邮件、一个Word文档或者是一个应用程序 创建超链接的步骤： 选择链接的载体； 选择链接的目标； 指定目标窗口7.2.3 超链接创建,33,1．选择链接的载体,,链接的载体是显示链接的页面元素将鼠标指针移到包含超链接的文字或图像上时，鼠标指针就会变成形状，当浏览者单击此文本串或图像，浏览器将打开相应地址的网页 选定链接的载体后，单击“常用”工具栏上“插入超链接”按钮，或选择【插入】【超级链】命令，打开“插入超链接”对话框。

34,2．选择链接的目标,,链接的目标包括原有文件或网页、本文档中的位置（书签）、新建文档、电子邮件等根据跳转目的地的不同，网页中链接可分为4种类型 1）原有文件或网页直接跳转到已经存在的某一网页或文件 如果是本网站内的网页，可用光标在“插入超链接”对话框列表文件中选择 如果是本机上其它网站中的网页，则选择“插入超链接”对话框中的按钮，或从“查找范围”中选择相应的网站，再选择所需网页 如果是Internet上其它网站的某一网页，可单击按钮打开浏览器找到该页面后，该页面的网址会自动出现在“地址”栏；也可以直接在地址栏文本框中输入该网页的地址35,,2）本文档中的位置是直接跳转到本网页中的某书签标志的位置要进行此链接操作，必须先用【插入】【书签】命令在网页中的某些位置插入书签； 在“插入超链接”对话框中单击“本文档中的位置”，然后选择该网页上的书签，将会在书签位置创建一超链接2．选择链接的目标,36,,3）新建文档可以将当前选中的链接的载体链接到一个新建的页面上单击“新建文档”按钮，在“新建文档名称”栏填写该网页的名称2．选择链接的目标,37,,4）单击“电子邮件地址”按钮，在“电子邮件地址”栏填写目标电子邮件地址，可创建一个到电子邮件的链接。

2．选择链接的目标,38,3．指定目标窗口,,链接的目标网页选定后，可以指定目标网页是在本窗口中显示还是在新打开的浏览器窗口中显示单击“插入超链接”对话框中“目标框架”按钮，打开“目标框架” 对话框，指定链接的目标网页的目标窗口，默认是在当前窗口中打开目标网页 “公用的目标区”列表框选项含义如下： 相同框架：链接的目标网页显示在包含该超链接的同一个框架内 整页：将框架展开为全窗口后显示链接的目标网页 新建窗口：另外打开一个浏览窗口显示链接的目标网页 父框架：如果是一页套一页的框架网页，选择父框架可以回到上一层框架显示链接的目标网页39,4．验证超级链接,,上面的三个步骤设置完成后，超链接的创建便完成了接下来有必要验证一下超链接是否正确，可用如下的方法来验证： 网页的设计视图中，把鼠标移到已经创建了超链接的载体上（文字、图像），鼠标变成手状，按下键，然后单击鼠标，便可验证链接目的地 在网页的预览视图中，用鼠标单击创建了链接的载体，便可验证链接目的地40,5．设置超链接的状态颜色,,在浏览器中浏览网页时，已经访问过的超链接、尚未访问过的超链接和正在访问的超链接应有不同的颜色显示，使浏览者一目了然。

设置超链接的状态颜色方法：选择【格式】【背景】命令，打开“网。