用FrontPage2000制作网页.ppt

单击此处编辑母版标题样式,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第,8,章 用,FrontPage2000,制作网页,8.1 FrontPage,基本操作,8.2,使用,FrontPage,创建网站,8.3,页面布局及修饰,8.4,在,FrontPage,中使用,CSS,8.5,网页制作实例,8.1 FrontPage,基本操作,8.1.1,FrontPage,的界面,8.1.1.1 FrontPage 2000,主窗口,启动,FrontPage 2000,之后，其主窗口如图,8-1,所示。,图,8-1 FrontPage2000,主窗口,8.1.2,文件操作,8.12.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,）在如图,813,所示的“新建”对话框中，包含,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,中使用,CSS,8.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创建样式表文件,创建样式表文件的步骤如下：,（,1,）选择“文件”菜单中的“新建”项，然后选择“网页”命令，打开“新建”对话框。,（,2,）选择“样式表”选项卡，如图,8-45,所示。,图,8-45 “,新建”对话框的“样式表”选项卡,（,3,）在样式表模板列表中选择一种需要的模板。,（,4,）单击“确定”按钮，则在,Frontpage,2000,窗口中显示出了新建的样式表文件。例如，选择了“商业区”模板创建的样式表文件如图,8-46,所示。,图,8-46,样式表文件,8.4.2.2,修改样式表文件中的样式,创建了样式表之后，可以在其中定义样式，也可以修改原有的样式，方法如下：,（,1,）打开样式表文件（在“打开文件”对话框的“文件类型”列表中选择“超文本样式表”选项）。,（,2,）选择“格式”菜单中的“样式”命令，则弹出如图,8-47,所示的“样式”对话框，在左边的“样式”列表中列出了样式表中的预定义样式。,（,3,）使用前面介绍的方法新建样式，或者修改已有的样式。,图,8-47,修改样式表样式,8.4.2.3,链接样式表,样式表文件必须链接到网页上才可以使用，步骤如下：,（,1,）在“网页”视图中打开需要链接样式表的网页或站点，或者在“文件夹”视图中选中多个要链接样式表的网页（按住,【Ctrl】,键并先后单击多个文件可选中多个不连续的文件，按住,【Shift】,键并先后单击两个文件可以选中两个文件之间的所有文件）。,（,2,）选择“格式”菜单中的“样式表链接”命令，则弹出如图,8-48,所示的“链接样式表”对话框。,图,8-48 “,链接样式表”对话框,（,3,）如果需要为站点中的所有网页链接样式表，则应选中“所有网页”单选项，如果只需为选中的网页链接样式表，则应选中“所选的网页”单选项。,（,4,）单击“添加”按钮，则弹出“选择超链接”对话框。在该对话框中找到需要链接的样式表之后，单击“确定”按钮，则返回“链接样式表”对话框，所选样式表出现在“,URL”,列表中。,（,5,）单击“确定”按钮，则选中的网页或站点中的所有网页将与选定的样式表链接。,8.5,网页制作实例,