用FrontPage2000制作网页.ppt

第8章用FrontPage2000制作网页,8.1FrontPage基本操作8.2使用FrontPage创建网站8.3页面布局及修饰8.4在FrontPage中使用CSS8.5网页制作实例,8.1FrontPage基本操作8.1.1FrontPage的界面8.1.1.1FrontPage2000主窗口启动FrontPage2000之后，其主窗口如图8-1所示。,图8-1FrontPage2000主窗口,8.1.2文件操作8.1.2.1创建网页当启动FrontPage2000时，系统会自动创建一个名为new_page1.htm的网页。如果以后需要新建网页，可以单击工具栏中的“新建网页”按钮或者按快捷键【Ctrl+N】。如果选择“文件”菜单中的“新建”，然后选择“网页”命令，那么可以打开如图8-3所示的“新建”对话框，可以在“常规”选项卡中选择一种默认的模板或向导创建网页。例如，可以选择“常见问题”模板创建出一个包含页面内链接的问答网页。,图8-3“新建”对话框,8.1.2.2打开网页8.1.2.3保存网页8.1.3设置网页属性网页属性是指网页标题、网页背景等基本选项，设置方法为：在网页编辑区域的空白处单击鼠标右键，然后选择“网页属性”命令，或者选择“文件”菜单中的“属性”命令，然后在“网页属性”对话框中进行设置，如图8-4所示。,图8-4“网页属性”对话框,8.1.4文字输入与格式设置8.1.4.1基本内容的输入8.1.4.2字体格式的设置1使用“格式”工具栏如果要设置网页中文本的字体格式，最简单的方式是使用“格式”工具栏，如图8-5所示。,图8-5“格式”工具栏,2使用“字体”对话框也可以使用“字体”对话框设置字体格式，步骤如下：（1）选中需要设置字体格式的文字。（2）选择“格式”菜单中的“字体”命令，然后在“字体”对话框中设置字体格式，如图8-6所示。,图8-6“字体”对话框,8.1.4.3段落格式的设置1使用“格式”工具栏2使用“段落”对话框使用“段落”对话框设置段落格式的步骤如下：（1）在需要设置格式的段落中单击鼠标右键，然后选择“段落”命令；或者将插入点定位到需要设置格式的段落，然后选择“格式”菜单中的“段落”命令。（2）在“段落”对话框中，设置相应的段落格式选项，如图8-7所示。,图8-7“段落”对话框,8.1.4.4列表格式的设置使用“格式”工具栏上的按钮可以方便地应用无格式项目列表和编号列表，步骤如下：（1）选中需要应用列表格式的多个段落。（2）单击“格式”工具栏中的“编号”按钮可以为选定段落应用编号（即创建有序列表）；单击“项目符号”按钮可以为选定段落应用项目符号（即创建无序列表）。（3）在设置了列表的段落中单击鼠标右键，然后选择“列表属性”命令，则可以在“列表属性”对话框的不同选项卡中设置列表的样式（例如设置不同的项目符号或编号样式），如图8-8所示。,图8-8“列表属性”对话框,8.1.5设置超链接8.1.5.1创建普通超链接如果要在网页中创建超链接，可以使用以下步骤：（1）在“网页”视图中，选中需要作为超链接的文本（也可以是图片）。（2）单击“常用”工具栏中的“超链接”按钮，则弹出“创建超链接”对话框，如图8-9所示。,图8-9“创建超链接”对话框,（3）如果在“创建超链接”对话框的列表中包含要作为超链接目标的文件，则直接单击即可；如果要创建一个新网页作为链接目标，则可以单击URL列表框右边四个按钮中的最右边一个按钮；如果要使用万维网中的任意一个有效地址作为超链接的目标，则可以单击最左边的一个按钮；如果要使用本地计算机上的任意一个磁盘文件作为超链接的目标，则可以单击左边第二个按钮；如果要使用电子邮件地址作为超链接的目标，则可以单击左边第三个按钮。当然，如果清楚超链接目标文件的URL，那么可以直接在“URL”框中输入。（4）如果要指定超链接的目标框架（例如，想在一个新窗口中打开超链接的目标文件），那么可以单击“更改目标框架”按钮，然后在“目标框架”对话框中设置，如图8-10所示。,图8-10“目标框架”对话框,当用户创建了超链接之后，可以在超链接上单击鼠标右键，然后选择“超链接属性”命令，以便更改超链接的目标。,8.1.5.2创建指向书签的超链接超链接除了可以跳转到其他网页或文件以外，还可以跳转到自身网页或其他网页的某个具体位置，方法是使用书签来创建超链接。如果要创建这样的超链接，首先应在目标网页中创建书签，步骤如下：（1）在“网页”视图中，将插入点定位到需要插入书签的位置，或者选中需要作为书签的文本。（2）选择“插入”菜单中的“书签”命令，则弹出如图8-11所示的“书签”对话框。,图8-11“书签”对话框,（3）在“书签名称”编辑框中输入书签的名称。（4）单击“确定”按钮。在网页中创建了书签后，如果用户创建指向该网页的超链接，则可以选择指向特定书签，以便跳转到该书签标记的位置。创建指向书签的超链接如图8-12所示：,图8-12创建指向书签的超链接,8.2使用FrontPage创建网站8.2.1站点基本操作8.2.1.1创建站点（1）选择“文件”菜单中的“新建”命令，然后选择“站点”命令。（2）在如图8-13所示的“新建”对话框中，包含5个站点模板和3个站点向导，选择其中之一。,（3）在“指定新站点的位置”列表框中选取新站点的位置或直接在该框中输入新站点的位置。（4）如果需要将新站点添加到当前打开的站点中，成为当前站点的子站点，则应选中“添加到当前站点”复选项。（5）单击“确定”按钮，则可以开始创建站点。如果基于模板，则可以立即创建出站点；如果基于向导，则弹出提示对话框指导用户的创建过程。,站点创建完毕之后，FrontPage主窗口中会自动显示出站点的文件夹列表，如图8-14所示（图中所示是只有一个网页的站点）。,图8-14站点文件夹列表,在该文件夹列表中，可以通过单击鼠标右键，然后选择相应的快捷菜单命令组织站点的文件结构。例如，可以在站点中新建文件夹，或者在特定文件夹中创建空白网页，然后双击新建的空白网页进行编辑。,8.2.1.2打开站点8.2.1.3关闭站点8.2.1.4删除站点删除站点的步骤如下：（1）打开要删除的站点。（2）在站点文件夹列表的站点根目录上单击鼠标右键，然后选择“删除”命令，弹出“确认删除”对话框，如图8-15所示。,图8-15“确认删除”对话框（3）在“确认删除”对话框中，如果要将站点转换为普通文件夹，则选中“只删除此站点中的Frontpage信息，保留所有其他文件和文件夹”单选项；如果确实要删除整个站点，则选中“删除整个站点”单选项。（4）单击“确定”按钮。,8.2.2创建个人站点在FrontPage2000中，提供了一个“个人站点”的模板，可供初学者创建个人站点之用。通过使用该模板，将可以自动创建出一个具有一致导航结构的简单的个人网站，如图8-16所示。,图8-16创建个人站点,如果要修改站点的整体结构或者新增网页，最好是单击“视图栏”中的“导航”按钮，切换到“导航”视图，这样就可以方便地对网站进行编辑和管理。例如，如果要新增加一个栏目，那么可以在“主页”上单击鼠标右键，然后选择“新建网页”命令，则可以在主页下新建一个网页（例如“个人简历”），如图8-17所示。,图8-17修改个人站点的整体结构,8.2.3创建公司站点8.2.3.1创建公司展示站点最常见的公司站点就是公司整体形象的展示站点，在FrontPage中可以直接用“公司展示向导”进行创建，步骤如下：（1）选择“文件”菜单中的“新建”命令，然后选择“站点”命令。（2）在“新建”对话框中，选择“公司展示向导”。（3）指定了适当的站点位置后，单击“确定”按钮，则显示出如图8-18所示的“公司站点建立向导”对话框。,图8-18“公司站点建立向导”对话框,（4）按照向导对话框中的提示进行操作。如果想让剩余的步骤采用默认设置，可以在创建站点的任意一步中，单击“完成”按钮完成整个站点的创建。站点创建结束后，可以在文件夹列表中双击需要编辑的网页进行编辑，如图8-19所示（当前打开了首页）。同样，进行网站结构编辑和每个网页的具体编辑时，可以用修改个人站点类似的方式。,图8-19公司展示站点,8.2.3.2创建客户服务站点使用“客户支持站点”模板，可以创建出专用于客户服务的网站，如图8-20所示。,图8-20客户支持站点,8.2.3.3创建项目管理站点使用“项目”模板，可以创建出专用于项目管理和支持的网站，如图8-21所示。,图8-21项目网站,8.3页面布局及修饰8.3.1插入图片8.3.1.1插入剪贴画8.3.1.2插入图片文件8.3.1.3修改插入的图片在网页中插入图片之后，可以对图片进行一些简单的处理，以便使所用的图片具有更好的表现效果。当单击网页中的图片时，FrontPage会自动显示如图8-23所示的“图片”工具栏，可以使用其中的按钮对图片进行处理。,图8-23“图片”工具栏,8.3.2创建DHTML效果用户可以对网页中的特定元素（如文本、段落或图片等）应用动态HTML，以便使网页元素具有一定的动感效果。动态HTML将这些元素与某个事件（如网页加载或单击鼠标）相联系，当事件发生时触发动态HTML效果。使用动态HTML效果的步骤如下：（1）选择“格式”菜单中的“动态HTML”命令，则弹出如图8-24所示的“DHTML效果”工具栏。,图8-24“DHTML效果”工具栏,（2）在网页中选择目标元素，例如文本、图片或段落。（3）在“DHTML效果”工具栏的“开启”列表框中选择一个导致动态效果发生的事件。（4）在“DHTML效果”工具栏的“应用”列表框中选择一种相应事件发生时页面元素应产生的动态效果。需要注意的是，对应于不同的“开启”方式，所能使用的动态效果是不同的。（5）在“DHTML效果”工具栏的“效果”列表框（左边第三个列表框）中选择一种对应于步骤（4）中所选效果的具体效果。,8.3.3使用表格8.3.3.1创建表格1使用“插入表格”按钮2使用“表格”菜单中的“插入/表格”命令3使用“手绘表格”功能8.3.3.2表格操作8.3.3.3表格属性的设置8.3.4使用框架8.3.4.1创建框架,创建框架网页的步骤如下：（1）选择“文件”菜单中的“新建”命令，然后选择“网页”命令，则打开“新建”对话框。（2）选择“框架网页”选项卡，如图8-29所示。,图8-29“新建”对话框的“框架网页”选项卡,（3）在列表中选择一种框架网页模板。（4）单击“确定”按钮，则创建出一个新的框架网页。例如，如果选中了“标题、页脚和目录”模板，则创建出的框架网页如图8-30所示。,图8-30框架网页,（5）在每个框架中都包含两个按钮：“设置初始网页”和“新建网页”，都是用于设置在框架中显示的初始网页。所谓初始网页是指当浏览者打开框架网页时显示在当前框架中第一个网页。如果要显示的初始网页已经存在，则可以单击“设置初始网页”按钮，然后在对话框中指定一个初始网页；如果要新建一个网页作为框架的初始网页，则可以单击“新建”按钮，则在相应框架中以“普通网页”模板创建出一个空白网页，可以在该网页中进行各种常规的编辑操作。（6）如果要保存框架网页，应单击“常用”工具栏中的“保存文件”按钮，则弹出如图8-31所示的“另存为”对话框。,（7）设置了保存选项后，单击“保存”按钮，则弹出下一个“另存为”对话框，要求保存下一个尚未保存的框架中的网页。如果尚未保存的框架中的网页不是新建的网页，则不会弹出“另存为”对话框，而是直接以原来的文件名保存。（8）保存了框架网页中所有尚未保存的网页后，将弹出一个“另存为”对话框要求保存框架网页。设置了保存选项之后，单击“保存”按钮，则可以将框架网页保存。,8.3.4.2设置框架属性设置框架属性的步骤如下：（1）在需要设置其属性的框架中单击鼠标右键。（2）在快捷菜单中选择“框架属性”命令，则弹出如图8-32所示的“框架属性”对话框。,图8-32“框架属性”对话框,（3）在“名称”编辑框中显示的是框架的名称，用于确定超链接的目标框架，通常采用系统默认值即可。（4）在“初始网页”编辑框中显示了当前框架的初始网页，可以直接输入其他网页的文件名或者单击“浏览”按钮在“编辑超链接”对话框中选择一个网页文件，以便更改框架的初始网页。（5）使用“框架大小”域中的“宽度”和“行高”选项指定框架的宽度和高度。,（6）使用“边距”域中的“宽度”和“高度”选项指定框架内的网页元素距框架左边框和上边框的距离。（7）使用“选项”域中的“可在浏览器中调整大小”复选项设置在浏览器中浏览该网页时是否可以调整该框架的大小。使用“选项”域中的“显示滚动条”列表框可以设置是否在框架中显示滚动条以及如何显示滚动条。（8）单击“框架网页”按钮，则弹出“网页属性”对话框的“框架”选项卡，如图8-33所示。在该选项卡中可以设置相邻框架之间的距离和是否显示边框。,（9）单击“确定”按钮，直到退出“框架属性”对话框。,图8-33“网页属性”对话框的“框架”选项卡,8.3.4.3设置超链接的目标框架对于框架结构的网页来说，超链接的目标框架是实现交互导航结构的关键。指定超链接目标框架的步骤如下：（1）在“创建超链接”或“编辑超链接”对话框的“可选”域中，单击“更改目标框架”按钮。（2）在“目标框架”对话框中，可以设置超链接的目标框架，如图8-34所示。在“当前框架网页”框中包含一个框架网页的结构示意图，单击其中的某个框架，则该框架将突出显示，并且该框架的名称自动显示在“目标设置”编辑框中，表示该网页将作为目标框架。,在“公用的目标区”列表中，列出了一些所有浏览器都支持的预定义的框架设置，选择其中之一，则相应的名称也会显示在“目标设置”编辑框中，表示将使用该设置。如果选中“设置为网页的默认值”复选框，则当前框架中网页的所有超链接在没有指定目标框架时都将采用此处设置的目标框架。（3）单击“确定”按钮。,图8-34“目标框架”对话框,8.3.5使用组件在FrontPage中，组件是指包含一定功能的模块或对象。它既可能是一个特殊对象（例如“计数器”），也可能是一个Java小应用程序（例如“悬停按钮”），还有可能只是一个HTML标记（例如“字幕”组件由MARQUEE标记符构成）。要插入组件，最简便的方法就是单击“常用”工具栏中的“插入组件”按钮，然后从列表中选择，如图8-35所示。,图8-35插入组件,8.3.6使用表单8.3.6.1创建表单1使用向导和模板FrontPage提供了一个“表单网页向导”，以便用户通过回答问题的方式快速创建符合自己要求的表单。另外，FrontPage还提供了多种生成表单的网页模板，使用户可以快速创建需要的表单，例如，使用“意见簿”模板可以创建出用于收集访问者意见的网页；使用“用户注册表单”模板可以创建出能够提供注册功能的注册表单网页。,使用向导或模板创建表单的步骤如下：（1）打开需要建立表单网页的站点。（2）选择“文件”菜单中的“新建”命令，然后选择“网页”命令，则打开“新建”对话框。（3）在“常规”选项卡中，选中“表单网页向导”或者是“意见簿”等模板。（4）单击“确定”按钮，如果选中“表单网页向导”，则弹出“表单网页向导”对话框，可以按照该对话框的提示继续进行创建操作；如果选中表单模板，则可以直接生成表单网页。例如，用“意见簿”模板创建出的表单网页如图8-36所示。,图8-36“意见簿”表单网页,2使用“表单”命令8.3.6.2设置表单控件属性无论以何种方式创建的表单，均可以对其中的表单控件进行属性设置，以便满足用户的实际需要。例如，可以设置文本框的宽度、复选框的初始状态等。设置表单控件属性的方法为：双击需要设置其属性的表单控件；或者在表单控件上单击鼠标右键，然后从快捷菜单中选择“表单控件属性”命令；或者在选中表单控件后按组合键【Alt+Enter】；这三种操作都将打开相应的表单控件属性对话框，可以在其中进行设置。,图8-37“文本框属性”对话框,例如，文本框的属性对话框如图8-37所示，可以在其中设置文本框的“名称”、“初始值”、“宽度”等属性。,8.3.6.3设置标签与热键8.3.6.4处理表单结果,8.4在FrontPage中使用CSS8.4.1使用内部样式8.4.1.1创建HTML标记符样式如果要更改HTML标记符的样式效果，可以使用以下步骤：（1）打开需要更改HTML标记符样式的网页。（2）选择“格式”菜单中的“样式”命令，打开如图8-41所示的“样式”对话框。,图8-41“样式”对话框,（3）在左边的“样式”列表中，选择需要更改其样式的HTML标记符，然后单击“修改”按钮，打开“修改样式”对话框，如图8-42所示。,图8-42“修改样式”对话框,（4）单击“格式”按钮，选择适当的命令修改HTML标记符的格式。例如，可以选择“字体”命令修改字体格式。（5）样式修改完毕之后，返回“样式”对话框，此时新建的样式出现在“样式”列表中，同时“列表”列表框中自动使用“用户定义的样式”选项。（6）单击“确定”按钮，退出“样式”对话框。,8.4.1.2创建通用类样式如果要创建通用类样式，可以使用以下步骤：（1）打开需要创建通用类样式的网页。（2）选择“格式”菜单中的“样式”命令，打开“样式”对话框。（3）单击“新建”按钮，则弹出如图8-43所示的“新样式”对话框。,图8-43“新样式”对话框,（4）在“名称（选择器）”编辑框中输入样式的名称。（5）单击“格式”按钮，设置样式的格式。（6）多次单击“确定”按钮，直到退出“样式”对话框。,8.4.1.3应用样式对于HTML标记符样式，修改之后系统会自动应用到网页中。对于通用类样式，则需要应用才能使样式生效，步骤如下：（1）选中需要应用样式的网页元素，或者将光标定位到需要应用样式的段落。（2）单击“样式”列表框，从列表中选择需要应用的样式，如图8-44所示。,图8-44应用样式,8.4.2使用外部样式8.4.2.1创建样式表文件创