Part医学网站的建立与FRONTPAGE的使用课件.ppt

《Part医学网站的建立与FRONTPAGE的使用课件.ppt》由会员分享，可在线阅读，更多相关《Part医学网站的建立与FRONTPAGE的使用课件.ppt（99页珍藏版）》请在三一办公上搜索。

1、Part 3 医学网站的建立与FRONTPAGE2002的使用,计算机医学实用技术生物医学工程研究所 张玉华,1,FRONTPAGE2002,Part 3 医学网站的建立与FRONTPAGE2002的使,Chapter 13 FrontPage2002基础知识,13.1 必备的Internet知识概述13.2 FrontPage2002功能简介13.3 FrontPage2002界面13.4 基本的文件操作13.5 基本的站点操作,2,FRONTPAGE2002,Chapter 13 FrontPage2002基础知识13,13.1 必备的Internet知识概述,Internet的各种服务W

2、WW：world wide webE-mailFTP:文件传输协议（File Transfer Protocol）,下载文件，在Internet的两台主机之间传递文件。 Telnet：远程登录(Remote Logon),3,FRONTPAGE2002,13.1 必备的Internet知识概述Internet的各,万维网(WWW)和Web页 为Internet核心，由一个个互联互通的网站所组成的信息的海洋。网站的灵魂就是网页（Web页）。Web页面：是包含了超文本标记的一种文本文件，它和其他普通文档的不同之处在于该文本文件还包含了与许多图形文件和其他Web页面间相互链接的URL标记和其他格式化

3、信息。可以综合许多种元素，如图片、文本、视频等。Web页面必须通过Web浏览器来解释执行。Microsoft Internet ExplorerNetscape navigator。,4,FRONTPAGE2002,万维网(WWW)和Web页 4FRONTPAGE2002,Web页面的工作原理：WWW是Client/Server（客户/服务器）体系结构客户端（Client）即访问者计算机上的web浏览器向web服务器发出请求信息Web服务器接收客户端的请求，并调用服务器端的处理程序将客户端的请求处理后发送回客户端浏览器（ Web服务器通过向浏览器传递HTML代码来响应浏览器发出的请求）浏览器将

4、返回的信息解释后将结果显示在屏幕上HTML（超文本标识语言）是一种标识语言，它告诉浏览器每个页面元素的排列位置与风格。,5,FRONTPAGE2002,Web页面的工作原理：WWW是Client/Server（客,13.2 FRONTPAGE2002 功能简介,FrontPage 2002 是OFFICE XP家族成员之一，为创建和管理极具专业水准的Web站点提供了妥善的解决方案，无需编程即可拥有极具专业水准的Web站点。FrontPage能够解释和生成web页面的HTML代码，利用FrontPage，网页制作人员不需要学习、书写HTML源代码即可快速并轻松地设计出各种专业网站，同时能够对整个

5、站点的内容和结构进行高效的管理。既适用于缺少HTML知识的入门者，也同样适用于有经验的网页制作专业技术人员，建设专业品质Internet和Intranet网站的最佳工具。,6,FRONTPAGE2002,13.2 FRONTPAGE2002 功能简介FrontP,FrontPage2002的特点： 简单易用 与 Word相似的界面，所见即所得地创作。工具增强站点管理 可在短时间内配置和更改所有文件，所有的站点管理工具、文件、设置等都可轻松访问、轻松管理。数据库集成 轻松实现浏览和发送信息到数据库。丰富的主题 轻松自定义站点样式，并可控制站点网页颜色、字体、图像、项目符号等属性。交互性内容 轻松

6、在网页内插入图片、音乐和视频。内置对动画技术的支持，如DHTML，轻松创建简单动画。HTML源代码编辑 FrontPage允许直接进行HTML代码编辑。,7,FRONTPAGE2002,FrontPage2002的特点： 7FRONTPAGE20,13.3 FRONTPAGE2002 界面,启动FrontPage 2002 ：“开始”菜单中的“程序Microsoft FrontPage”界面：标题栏、菜单栏、工具栏、状态栏“视图”工具栏：在窗口的左侧文件夹列表：视图栏右边，显示当前打开站点的文件夹结构。 “视图文件夹列表”编辑窗口：中间，用来进行网页的编辑和网站的管理，根据所选视图模式的不同，

7、包含的具体内容也不相同。任务窗格：最右面，可快速地执行一些常用的命令，分为“新建网页或站点” 、“剪贴板”（24次）、“搜索”三部分，“视图任务窗格”,8,FRONTPAGE2002,13.3 FRONTPAGE2002 界面启动FrontPa,图13-1 FrontPage 2002的操作界面,9,FRONTPAGE2002,图13-1 FrontPage 2002的操作界面9FRON,视图，6种视图帮助完成站点创作、发布与管理的全部任务网页视图：创建和编辑网页，编辑框中显示当前页，编辑框顶部显示网页文件名，编辑框顶部的选项卡在多个打开的文件间进行切换“普通”标签下：所见即所得地编辑网页，“

8、HTML”标签下：直接查看、编辑及修订HTML代码“预览”标签下：用FrontPage仿真浏览器环境预览当前网页的实际效果文件夹视图报表视图导航视图超链接视图任务视图：用来指定、分配与协调工作，并藉以掌控不同网页目前的进度。,10,FRONTPAGE2002,视图，6种视图帮助完成站点创作、发布与管理的全部任务10FR,图13-2 “HTML”标签下的网页视图,11,FRONTPAGE2002,图13-2 “HTML”标签下的网页视图11FRONTPAG,13.4 基本的文件操作,13.4.1 新建网页单击工具栏上的按钮，FrontPage将自动创建一个空白页，第一个空白页的文件名自动设为ne

9、w_page_1.htm。利用网页模板来创建新网页模板是FrontPage预设的若干个内置的页面，它已经按照一定的格式设置好，用户可根据实际需要利用现成的模板快速建立自己所需要的网页，大大提高开发效率。“任务窗格”“网页模板”，打开“网页模板”对话框“常规”：共提供了27个常规类型的网页模板“框架网页”“样式表”,12,FRONTPAGE2002,13.4 基本的文件操作13.4.1 新建网页12FRONT,13.4.2 打开文件 打开一个已有的文件文件位于当前已打开站点上：在任一视图下，双击该文件图标或文件名就可以打开该文件。文件位于另一个站点或是本地计算机的文件夹：单击“文件打开”或“常用

10、”工具栏上的“打开”按钮，在弹出的“打开文件”对话框中查找需要打开的文件。 打开最近使用过的文件单击“文件最近使用的文件”从弹出菜单中选择想要的文件。 打开其他类型的文件 如超文本模板、超文本样式表、RTF格式、文本文件、Word文件、Excel文件等，并自动将原有的文件转成类似于HTML格式的文件，然后可以像通常一样修改和编辑这些文件。 当在Web中打开一个文件时，FrontPage总是使用与这些文件相关联的编辑器来打开它。可以单击“工具选项”，在弹出的对话框中选“配置编辑器”选项卡来改变默认的设置。,13,FRONTPAGE2002,13.4.2 打开文件13FRONTPAGE2002,1

11、3.4.3 保存文件 保存已打开的文件时，选择“文件保存”或单击工具栏上的保存按钮。 保存新建的文件时，选择“文件保存”或单击工具栏上的保存按钮，在打开的“另存为”对话框中进行设置。保存类型，网页标题， “更改标题”按钮 当在页面中插入图像、音频或视频等多媒体文件时，按 “保存”按钮后，出现“保存嵌入式文件”对话框，询问是否保存该多媒体文件，可以选择重命名或改变保存的文件夹，以及设置保存操作选项，在一般情况下，你需要保存这些图像或其他多媒体文件。,14,FRONTPAGE2002,13.4.3 保存文件14FRONTPAGE2002,13.5 基本站点操作,所谓站点，就是一些网页和程序的集合。

12、各个网页之间通过超链接联系在一起，所有的网页和文件保存在一个文件夹中，通过站点把这些文件和网页统一起来。所以说，建立一个新站点，事实上就是建立一个单独的文件夹，然后在这个文件夹中建立各个网页文件，并且把它们链接在一起。站点中会自动建立两个固定的文件夹：_private文件夹：存储隐含的文件。该文件夹下的文件对于站点访问者来说是不可见的。images文件夹：存储图象文件，保持web站点的整洁。,15,FRONTPAGE2002,13.5 基本站点操作所谓站点，就是一些网页和程序的集合。各,13.5.1 新建站点 选择“文件新建网页或站点”，从任务窗格中选择“Web站点模板”，或用新建普通网页按钮

13、弹出“Web站点模板”对话框。在“站点”选项卡中，共提供了10种站点模板。它们都根据各自的用途提供了完整的站点结构和巧妙的页面组织。使用这些模板，用户可以十分方便地建立一个专业站点的完整框架，大大减轻了用户的工作量。常用的站点模板：空白站点；只创建相应的Web文件夹，不包含任何web页和资源。只有一个网页的站点；该模板将创建一个有一空白网页的新站点。导入站点向导：创建一个站点，并将本地计算机目录或远程系统中的文档 添加到这个新建的站点中。公司展示站点：用来为公司或企业创建一个专业的Internet展示。客户支持站点：创建一个提供客户支持服务的站点，通过该站点提供公司简介、产品信息、软件下载，还

14、可以提供一个用于客户支持的讨论组，该站点尤其适用于软件公司作为软件产品的技术支持站点。个人站点：快速创建一个个人站点，包含兴趣爱好、照片和喜好。讨论站点向导；创建一个带有线索、目录和全文搜索能力的讨论组， 该讨论组可以让访问者留下信息或回答信息，并以有关的线索组织信息,16,FRONTPAGE2002,13.5.1 新建站点16FRONTPAGE2002,选择了相应的向导或模板后，在“指定新站点的位置”下拉列表中指定新站点所在的文件夹，可手工输入也可以单击“浏览”按钮进行选择。指定了新站点的位置后，还可以指定是否要将新站点作为子站点添加到当前已打开的Web站点，如果选择了web服务器作为新站点

15、的位置，那么还可选择是否需要“安全的链接(SSL)”来保护你的站点安全。单击“确定”按钮，系统就会自动建立起相应的文件和文件夹，下面就可以双击文件进行编辑和修改网页了。,17,FRONTPAGE2002,选择了相应的向导或模板后，在“指定新站点的位置”下拉列表中指,13.5.2 打开站点单击“文件打开站点”或按工具栏上的“打开”按钮边上的下拉标志，从下拉菜单中选“打开站点”，在弹出的 “打开站点”对话框中找到需要打开的站点后按“打开”按钮即可。如想在每次启动FrontPage时自动打开上次打开的站点，可以从 “选项”对话框的“常规”选项卡中选择“在启动FrontPage时，自动打开上次打开的站

16、点”。,18,FRONTPAGE2002,13.5.2 打开站点18FRONTPAGE2002,第14章 网页编辑的基础知识,14.1 设置文本格式 14.2 创建超链接14.3 图像处理 14.4 插入水平线14.5 应用表格,19,FRONTPAGE2002,第14章 网页编辑的基础知识 14.1 设置文本格式 19F,14.1 设置文本格式,14.1.1文字格式和段落格式 文字格式 包括：字体、字形、字号、字体颜色、字符间距和应用一些特殊效果等。格式工具栏上相应的工具按钮“格式字体” ，“字体”对话框 段落格式 包括：段落对齐、段落缩进、行间距、段落间距等。格式工具栏上相应的工具按钮“格

17、式段落” ，“段落”对话框,20,FRONTPAGE2002,14.1 设置文本格式 14.1.1文字格式和段落格式20F,14.1.2 使用文本样式内置了多种文本样式，利用它可以快速地设置文本的格式，包括：标题、地址、目录列表、编号列表、菜单列表、项目符号列表、默认字符样式。应用样式 “格式”工具栏“样式”选择框下拉按钮,21,FRONTPAGE2002,14.1.2 使用文本样式21FRONTPAGE2002,修改样式 “格式样式” ，“样式”对话框新建样式 “样式”对话框中单击“新建”按钮 可在“格式”栏“样式”下拉列表中应用新建样式。,22,FRONTPAGE2002,修改样式 22F

18、RONTPAGE2002,14.1.3 使用列表格式在网页设计过程中内容按条目来说明每一条前加一圆点、方块、圆圈、图片或其他符号，叫做项目符号。按先后顺序来说明问题，在每一条前加数字序号，叫编号。编号和项目符号统称列表，利用列表来设计网页可使页面排版美观，内容清晰。项目符号与编号混合使用，称为多级列表。,23,FRONTPAGE2002,14.1.3 使用列表格式23FRONTPAGE2002,利用格式工具栏上的“编号”和“项目符号”按钮可以快速地在网页中添加列表格式。 选择不同的项目符号和数字格式 “格式项目符号和编号”， “列表属性”对话框“编号”选项卡“无格式项目列表”选项卡“图片项目符

19、号”选项卡,24,FRONTPAGE2002,利用格式工具栏上的“编号”和“项目符号”按钮可以快速地在网页,14.1.4 插入注释文字便于编辑维护页面。插入方法：“插入注释”，“插入注释”对话框注释文字只在编辑状态显示，在浏览器中浏览网页时不显示。,25,FRONTPAGE2002,14.1.4 插入注释文字25FRONTPAGE2002,14.2 创建超链接,超链接是从一个网页指向另一个目的端的链接，通过超链接很方便地从一个页面（或网站）漫游到另一个页面（或网站）。超链接包括两部分：链接的载体（指包含超链接的文字或图像），根据链接载体的不同，超链接分为图像超链接和文字超链接。链接的目的地址（

20、单击超链接后所显示的内容），它可以是一个网页，也可是另一个网站或电子邮件地址。,26,FRONTPAGE2002,14.2 创建超链接超链接是从一个网页指向另一个目的端的链接,14.2.1建立超链接选中要建立超链接的文字或图像单击常用工具栏中的“插入超链接”按钮或单击“插入超链接”菜单命令，打开“编辑超链接”对话框链接到站点内的其他网页 对话框左面“链接到”框中的“原有文件或Web页”按钮；单击“屏幕提示”按钮，定义鼠标指向超链接时显示的提示文字。链接到其他网站 “原有文件或web页”按钮， 在“地址”框中直接输入网址；在“浏览过的页”列表中选择一个网址；单击“浏览web页”按钮浏览需要链接到

21、的网站。链接到新网页 单击“新建文档”按钮。 链接到电子邮件 单击“电子邮件地址”按钮。,27,FRONTPAGE2002,14.2.1建立超链接27FRONTPAGE2002,14.2.2 创建图像热点链接图像热点链接就是在一个图像之上建立多个不同的链接，每一个链接分别对应一圆形、矩形或多边形的区域，每一个区域就叫做一个“热点”。当鼠标移到该热区域内单击鼠标时，就可以直接跳转到该链接所指的网页中。建立图像热点链接的操作：选定图像，单击“图片”工具栏右边的长方形热点、圆形热点或多边形热点按钮，在图像上拖曳鼠标画出相应的形状;松开鼠标打开“插入超链接”对话框，创建一个超链接。重复以上操作，在一个

22、图像上建立起多个热点链接。如图13-1所示的研究所主页由图片组成，在图片上创建了两个矩形的热点，分别覆盖了显示“中文版”和“英文版”文字的区域，并把这两个热点分别链接到站点内的中文版主页（chinese/index1.htm）和英文版主页（english/index1.htm）。 图14-16 突出显示的两个热点图14-15 在网页上创建的两个热点热点形状重叠在图像上不易时，点击图片工具栏上的“突出显示热点”按钮，将图像内容隐藏起来，只显示热点形状。,28,FRONTPAGE2002,14.2.2 创建图像热点链接28FRONTPAGE2002,14.2.3 建立指向书签的超链接书签是网页中被

23、标记的位置，可作为同一页面或其他页面中的超链接的目标。书签的一个常见用法是将一个内容较长的网页的各个标题定义为书签，然后在网页开头创建目录，目录中的项目是分别指向不同书签的超链接。单击目录中的项目可快速定位到相应内容所在的位置，方便访问者浏览网页。,29,FRONTPAGE2002,14.2.3 建立指向书签的超链接29FRONTPAGE20,建立指向书签的超链接 的方法：单击“插入书签”菜单命令，打开“书签”对话框，在“书签名”文本框中给书签起个名字单击“确定”按钮，目的地前方出现表示此处为一书签的符号回到网页开头，选取欲作为书签超链接的文字或图片设置超链接，在 “插入超级链接”对话框中单击

24、右边的“书签”按钮，在打开的 “在文档中选择位置”对话框中选择目的书签名称，按“确定”完成。,30,FRONTPAGE2002,建立指向书签的超链接 的方法：30FRONTPAGE2002,14.3 图像处理,14.3.1 网页中使用的图像格式网页中广泛使用的图像格式有GIF和JPEG，两种图像格式之间有差别，但它们存储的图像信息都是经过压缩处理的，体积都较小，适于在网上传输。GIF（图像交换格式），缺点是最多只能用 256 种不同的颜色来显示数据。用于保存和压缩基于文字的图像、线条和剪贴画等，这些图像类型不需要百万色，很容易存成非常小的 GIF 文件。用来做动画，因其可以保存多个图像。JPE

25、G - 由联合摄影专家组（Joint Photographic Experts Group）开发， 24 位图像格式（真彩色，支持 16 百万色）。是在 Internet 上展现实景图像的标准格式，可将大型图像压缩得非常小，同时能够保留图像的整体质量。最大缺点是图像压缩的越多，信息就丢失的越多。将文件保存为 JPEG 时，在压缩率与质量之间求得一个平衡至关重要。FrontPage所支持的图像格式还包括： BMP、EPS、MAC、MSP、PCD、PCX、RAS、TIFF、WMF和WPG等。使用这些图像格式时FrontPage把它们自动转成GIF（ 256种颜色以内的图像）或JPEG格式（ 256

26、种颜色以上的图像） 。,31,FRONTPAGE2002,14.3 图像处理14.3.1 网页中使用的图像格式31FR,14.3.2 插入图像插入当前站点中的图像将光标移到插入图像的位置单击“插入图片来自文件”菜单命令或常用工具栏中的“插入文件中的图片”按钮，打开“图片”对话框，系统将自动打开当前站点，选择所需的图像文件。如果选取的图像不在当前站点中保存时，程序将提醒图像文件的保存路径。插入剪贴画单击“插入图片剪贴画”命令，出现“插入剪贴画”任务窗格。在“搜索文字”中输入要搜索的剪贴画名称，选择合适的“搜索范围”和“结果类型”，单击“搜索”按钮，显示出要查找的图片，单击图片，就可插入到当前网页

27、中。直接单击下方的“剪辑管理器”打开剪辑库浏览器，从中浏览并选择所需的剪贴画图片。,32,FRONTPAGE2002,14.3.2 插入图像32FRONTPAGE2002,14.3.3 编辑图像调整图像大小和位置：单击选中图像，在图像周围出现控制点，用鼠标按住任一控制点拖动，改变图像的大小。单击选中图像，拖动图像到新的位置释放鼠标，可将图像移动到新的位置。右键单击图像，在弹出菜单中选择“图片属性”命令，打开“图片属性”对话框。处理图片：在已经创建的图片上单击左键，出现“图片”浮动工具栏，所有图标按钮都可对图像进行操作处理。绘图工具：利用绘图工具，方便绘制简单图形“视图工具栏绘图”菜单命令，打开

28、绘图工具栏,33,FRONTPAGE2002,14.3.3 编辑图像33FRONTPAGE2002,14.3.4 设置图像背景将一些精美的图片作为网页的背景以美化页面。用图像作为网页背景的操作是：单击“格式背景”菜单命令，打开“网页属性”对话框，选背景图片”选项，单击“浏览”按钮，选择所需的背景图像。如想用任意颜色作为网页的背景色，需单击“背景”右边的下拉按钮，选择所需的颜色。14.3.5 建立图片库帮助建立一个包含众多图片的网页。单击“插入图片新建图片库”菜单命令，打开“图片库属性”对话框；单击“图片”选项卡的“添加”按钮，选择“图片来自文件”选项并选中要添加到网页中的图片，“上移”和“下移

29、”按钮可调节图片出现的顺序。在“布局”选项卡中可选择图片的布局样式。浏览时单击图片缩略图就可显示图片库中的图像 。,34,FRONTPAGE2002,14.3.4 设置图像背景34FRONTPAGE2002,14.4 插入水平线,建立页面层次通过不同级别的标题通过用列表方式通过插入水平线插入水平线方法“插入水平线”，在页面的当前位置插入一条水平线。默认情况下，水平线的宽度与浏览器中页面宽度相同，更改水平线的属性双击水平线打开“水平线属性”对话框。,35,FRONTPAGE2002,14.4 插入水平线建立页面层次35FRONTPAGE200,14.5 应用表格,表格是网页制作中用处非常广泛的一

30、种页面元素使网页内容排列整齐进行排版网页表格分为行和列，每个方格为一个单元格。表格和单元格由四个边框组成，左边和上边的边框称为亮边框，右边和下边的边框称为暗边框。,36,FRONTPAGE2002,14.5 应用表格 表格是网页制作中用处非常广泛的一种页面元,14.5.1 创建表格使用常用工具栏中的“插入表格”工具按钮使用“表格插入表格”菜单命令，出现“插入表格”对话框。手工绘制表格：程序自动生成规则的表格，手工绘制更复杂的表格，“表格绘制表格” ，表格工具栏，鼠标变成铅笔的形状，在编辑窗口中拖动鼠标绘制表格表格工具栏上还有擦除、插入行、插入列、删除单元格、合并单元格、拆分单元格等功能按钮。,

31、37,FRONTPAGE2002,14.5.1 创建表格37FRONTPAGE2002,14.5.2 编辑表格插入表格、行、列或单元格将光标移到某一单元格中，单击“表格插入”，在子菜单中选择相应的命令选项。如选择“标题”命令，就会在表格的上方出现插入点，即标题行，可输入表格的标题。合并、拆分单元格选中要合并的多个单元格，单击“表格合并单元格”菜单命令。将光标移到要拆分的单元格中或选中要拆分的几个单元格，单击“表格拆分单元格”菜单命令，出现“拆分单元格”对话框，选择要拆分的样式和行数即可。平均分布行或列将表格行或列平均分配大小，用手工调整麻烦，不精确，选中需要平均分配大小的行或列，然后单击“表格

32、自动调整平均分布行”或“平均分布列”菜单命令即可。,38,FRONTPAGE2002,14.5.2 编辑表格38FRONTPAGE2002,自动套用表格样式内置了很多种表格样式，将光标移到表格内，单击“表格表格自动套用格式”菜单命令，出现“表格自动套用格式”对话框。表格转换表格转换成文本：选中表格后单击“表格转换表格转换成文本”文本转换成表格：选中要转换的文本，单击“表格转换文本转换成表格”，在打开的对话框中选择合适的文本分隔符。精细设置(大小、边框和背景等)选中整个表格或某一个单元格，单击“表格表格属性单元格（表格）属性”命令，打开“表格属性”或 “单元格属性”对话框。,39,FRONTPA

33、GE2002,自动套用表格样式39FRONTPAGE2002,14.5.3 利用表格进行网页布局通常网页的布局使用：表格框架使用表格构造网页的版面，可将页面中的各种内容放在不同的位置上。有经验的用户常会把表格作为主要的页面布局工具，这是因为表格几乎被所有的Web浏览器支持，从而可保证设计的网页能在浏览器中正确显示，表格的框架特性使用户可直接控制页面元素的位置，并使其按照所需要的方式显示。,40,FRONTPAGE2002,14.5.3 利用表格进行网页布局40FRONTPAGE20,使用表格规划网页布局时应遵循的原则是：在开始网页设计前，先画一草图，对网页中各元素的位置进行大致的布局，然后开始

34、设计；应从外到内开始工作，先创建外部最大的表格，然后根据需要合并单元格或在单元格中插入嵌套表格。,41,FRONTPAGE2002,使用表格规划网页布局时应遵循的原则是：41FRONTPAGE,表格边框设为0，使看不到边框。,图14-37 以表格形式布局的山东大学主页,42,FRONTPAGE2002,表格边框设为0，使看不到边框。图14-37 以表格形式布局的,第15章 网页制作高级技巧,15.1 应用框架实现网页布局设计15.2 应用表单制作交互式网页15.3 制作动态网页15.4 插入FrontPage组件15.5 在网页中加入多媒体15.6 应用FrontPage主题设定网站整体风格,

35、43,FRONTPAGE2002,第15章 网页制作高级技巧 15.1 应用框架实现网页布局,15.1 应用框架实现网页布局设计,框架网页:特殊的HTML网页，将浏览器窗口分成称为框架的不同区域，每个区域都可以显示不同的网页。常用于目录、文章或信息列表、或任何其他的网页上框架网页本身并不包含可见内容，它只用来指定要显示的其他网页及其显示方式。在一个框架中单击超链接会在另一个框架(目标框架)中显示相应网页。,44,FRONTPAGE2002,15.1 应用框架实现网页布局设计框架网页:44FRONTP,一个框架网页的创建过程比较复杂，需经过如下步骤： 选择框架模板 修改框架布局 设置框架包含的网

36、页 组织框架间的调用关系 保存框架网页 保存框架中显示的网页,45,FRONTPAGE2002,一个框架网页的创建过程比较复杂，需经过如下步骤：45FRON,一个框架网页的创建步骤1：,15.1.1 选择框架模板在 “网页模板”对话框中选择“框架网页”选项卡，在列表框中选择要使用的框架网页模板“说明”区域为该模板的描述， “预览”区域为框架网页布局的预览图。,46,FRONTPAGE2002,一个框架网页的创建步骤1： 15.1.1 选择框架模板46F,一个框架网页的创建步骤2：,15.1.2 修改框架布局调整框架大小手动调整，通过拖动框架的边框调整框架大小。通过修改框架属性来精确设定框架的大

37、小。选择“框架框架属性”菜单命令，出现“框架属性”对话框，在“框架大小”区域中，调整“列宽”和“高度”设置。拆分框架（内容保存在原始框架中，并创建一新框架）拖动框架边框来拆分框架：打开要修改的框架网页，同时按住Ctrl键，并拖动框架的任一边框，将一个框架平均拆分成两个分开的行或列。通过菜单拆分框架：“框架拆分框架”命令，出现“拆分框架”对话框中。删除框架选择要删除的框架，单击“框架删除框架”命令。,47,FRONTPAGE2002,一个框架网页的创建步骤2： 15.1.2 修改框架布局47F,一个框架网页的创建步骤3：,15.1.3 设置框架包含的网页框架网页是网页的集合，需设置每个框架对应的

38、网页内容。把现有网页分配到框架中：在其中某个框架中，单击“设置初始网页”按钮，出现“插入超链接”对话框对话框中设置链接的网页，单击“确定”按钮，该网页出现在框架内。如初始网页还没建立：单击“新建网页”按钮开始建立。改变框架中的初始网页：选择要改变初始网页的框架 “框架属性”对话框中的“初始网页”文本框中输入新网页的名称和位置，或者单击“浏览”按钮，从文件列表中选择。,48,FRONTPAGE2002,一个框架网页的创建步骤3： 15.1.3 设置框架包含的网页,一个框架网页的创建步骤4：,15.1.4 组织框架间的调用关系在使用框架时一定会遇到如何处理框架间的调用关系的问题，即点击一个框架中的

39、超链接后，目的页面将会出现在哪一个框架内，或是新打开一个浏览器窗口。在“编辑超链接”窗口的右侧单击“目标框架”按钮，出现的“目标框架”对话框，在这个对话框中，可以直接在“当前框架网页” 框中选择一个框架作为目的框架，也可以选择“公共目标区框”中的选项来确定目标页面的出现形式：网页默认值（main）：目标页面将出现在默认目的框架中，默认目的框架可以在框架的页面属性设置窗口中设置。如果不加以说明，系统将按照默认目的框架调用目标页面。相同框架：目标页面将出现在同一框架中，也就是覆盖调用页面。整页：目标页面将覆盖整个框架页面，独立地出现在浏览器窗口中。新建窗口：目标页面将出现在新打开的一个浏览器窗口中

40、，而在原来的浏览器窗口中不发生任何变化。,49,FRONTPAGE2002,一个框架网页的创建步骤4： 15.1.4 组织框架间的调用关,图15-6 “目标框架”对话框,50,FRONTPAGE2002,图15-6 “目标框架”对话框50FRONTPAGE2002,一个框架网页的创建步骤5：,15.1.5 保存框架网页若要保存包含内容的框架网页，执行下列操作：打开要保存的框架网页，单击“文件另存为”菜单命令在“另存为”对话框中会显示框架网页布局的缩略图，因为你正在保存框架网页，所以所有的区域都会用深蓝色的框突出显示，表明这是正在保存的内容。 在“文件名”框中，键入突出显示的框架网页的名称，选择

41、要保存网页的位置，单击“保存”按钮。,51,FRONTPAGE2002,一个框架网页的创建步骤5： 15.1.5 保存框架网页51F,一个框架网页的创建步骤6：,15.1.6 保存框架中显示的网页在框架网页中选择一个要保存的框架，再单击“框架另存为网页”；在“另存为”对话框中会显示框架网页布局的缩略图，深蓝色的框指明了突出显示框架中要保存的当前网页。键入文件名，选择保存位置后，单击“保存”按钮。若框架中所显示的网页已经保存过，可单击“框架保存网页”以原来的名字保存。,52,FRONTPAGE2002,一个框架网页的创建步骤6： 15.1.6 保存框架中显示的网,15.2 应用表单制作交互式网页

42、,普通网页只是让访问者去观看，少了访问者本身的参与。交互式网页通过表单来向服务器传送一些用户的交流信息，服务器通过数据库查询等方法进行处理，返回用户感兴趣的内容，从而建立了一种与用户的交流。论坛、留言板就是采用的这种形式，这将会更加吸引访问者。表单的作用就是搜集用户输入的信息，如收集客户的个人资料，并输入到数据库中，或设计一个订货单，让用户指定自己要购买的商品名称、型号和数量等。,53,FRONTPAGE2002,15.2 应用表单制作交互式网页普通网页只是让访问者去观看，,15.2 应用表单制作交互式网页15.2.1 表单域的类型,表单域指表单上用以收集信息的单个域。每一类型的域都有不同的操

43、作方式，因此用户必须根据站点访问者输入信息的方式选择表单域。一个表单中可以具有如下表单域：文本框：用于让访问者输入一行文字。选项按钮：也称为单选按钮，浏览者只能从一组选项中选择一个选项。文本区：收集多行的文本，例如注释。它可以滚动以容纳不同数量的文本。下拉框：为网页浏览者提供一个选择列表。它与使用一组选项按钮类似，但其所占用的表单空间较小。可以将下拉框设置为允许一个或多个选项。复选框：网页浏览者可以从一组选项中选择一个、多个或全部选项，也可一个都不选。,54,FRONTPAGE2002,15.2 应用表单制作交互式网页15.2.1 表单域的类型,按钮：使用按钮可以让网页浏览者在填好表单后提交该

44、表单、重置表单或运行自定义脚本。你也可以在表单中添加图片，用作提交按钮。填写表单之后，网页浏览者可以单击图片以提交该表单，然后表单上的数据，包括图片域名称，就会发送到表单处理程序。高级按钮：通过在表单中插入高级按钮，可以编写脚本，让表单完成所需的工作。高级按钮可自定义的程度很高，按钮上可以使用喜爱的字体、颜色甚至表格。分组框：希望将一组相关的控件或文本同网页或当前表单上的其他信息分开时，可以添加分组框。文件上载：可以给站点访问者提供向 Web 站点发送文件的机会。密码域：希望站点访问者输入密码后才能访问Web站点时，请在注册表单中添加密码域。密码域其实只是一个单行文本框。站点访问者在这个域中键

45、入数据时，大部分的Web浏览器都会将密码显示为星号以保护这些机密信息。,55,FRONTPAGE2002,按钮：使用按钮可以让网页浏览者在填好表单后提交该表单、重置表,15.2 应用表单制作交互式网页15.2.2 创建表单(三种方法),图15-8 意见反馈表单示例,56,FRONTPAGE2002,15.2 应用表单制作交互式网页15.2.2 创建表单(三,15.2.2 创建表单(三种方法),方法1 ：自己创建表单单击“插入表单”菜单命令，此时在网页上将出现一个虚线框住的矩形区域，其中包含“提交”和“重置”按钮，然后就可以向其中添加表单域了。添加表单域操作方法是：单击“插入表单”菜单命令，然后

46、从子菜单中选择要添加到表单中的元素，这里我们需要添加一个用于选择职业的下拉框，5个用于对网站评价的选项按钮，一个用于输入建议的多行文本区，一个用于输入电子邮件地址的单行文本框，其他文字可按照一般文本进行输入、编辑。右击某表单域，在快捷菜单中选择“表单域属性”命令，可打开相应的表单域属性对话框进行设置。,57,FRONTPAGE2002,15.2.2 创建表单(三种方法)方法1 ：自己创建表单57,15.2.2 创建表单(三种方法),方法2：使用向导创建表单在“网页模板”对话框中的“常规”选项卡中选择“表单网页向导”，单击“确定”按钮后出现“表单网页向导”对话框。按照屏幕上的提示一步一步添加表单

47、中需要的问题，最后得到问题列表，单击“完成”就可以创建需要的表单。,58,FRONTPAGE2002,15.2.2 创建表单(三种方法)方法2：使用向导创建表单5,15.2.2 创建表单(三种方法),方法3：用表单模板来创建类似表单在“网页模板”对话框中的“常规”选项卡中选择“确认表单”、“意见反馈表单”、“用户注册”或“意见薄”等表单模板，这里选择“意见反馈表单”模板，单击“确定”按钮创建一个意见反馈表单。做相应的修改。,59,FRONTPAGE2002,15.2.2 创建表单(三种方法)方法3：用表单模板来创建类,15.2 应用表单制作交互式网页15.3.3 收集表单信息,表单的作用在于帮

48、助用户收集信息，当访问者填完表单信息，按“提交”按钮提交了表单结果后，FrontPage会予以保存，并提供了多种保存表单结果的方法，可保存到文件、电子邮件、数据库或其他指定的对象。另外，也可在用户成功发送表单或发送无效表单后向用户显示确认网页。可通过右击表单打开 “表单属性”对话框，进行设置，单击“选项”按钮可打开“保存表单结果”对话框进行进一步的设置。注意：若要测试表单的功能，必须首先将Web站点发布到运行有服务器扩展（FrontPage Server Extension）的Web服务器上。该Web站点一旦发布，即可单击“用浏览器预览”来测试该表单。,60,FRONTPAGE2002,15.

49、2 应用表单制作交互式网页15.3.3 收集表单信息,15.3 制作动态网页15.3.1 使用“动态HTML效果”制作页面元素的动态效果,DHTML，即Dynamic Hyper Text Markup Language（动态超文本标记语言）的出现改变了普通的HTML只能提供静态、单调的文字和超文本链接的局面，利用其提供的功能可以轻易地开发出五彩缤纷的动态网页。FrontPage提供了多种DHTML效果，使用者无须了解DHTML语法知识就可以轻松实现各种各样的动态网页。,61,FRONTPAGE2002,15.3 制作动态网页15.3.1 使用“动态HTML效果,15.3 制作动态网页15.3

50、.1 使用“动态HTML效果”制作页面元素的动态效果,在网页中实现动态HTML效果的方法：选中要实现动态HTML效果的页面元素，如页面中的文字、图片、表单中的按钮等单击“视图工具栏DHTML效果”或“格式动态HTML效果”菜单命令，出现DHTML效果工具栏单击最左边的下拉菜单，选择一种事件，其中有单击、鼠标悬停、双击、网页加载等事件在“应用”下拉菜单中选择一种应用效果最后在“效果”下拉菜单中为该应用选择一种动态效果。不同的事件包含的应用效果和动态效果是不同的，可以根据需要灵活选用。,62,FRONTPAGE2002,15.3 制作动态网页15.3.1 使用“动态HTML效果,15.3.2 网页