第10章网页制作与 FrontPage2000 学习内容: FrontPage2000概述 FrontPage2000基本操作 网页制作 超链接的使用 学习重点与难点: 网页制作技术,网页的编辑,超级链接的使用。 学习目的: 应用 FrontPage2000提供的技术制作与编辑具有动画效果的图文并 茂网页。 因特网的核心: World Wide Web(WWW)万维网,是由一个一个互 连互通的网站所组成的信息海洋,这些网站的灵魂就是网页
1 第10章 网页制作与FrontPage 2000 学习内容： FrontPage 2000概述 FrontPage 2000基本操作 网页制作 超链接的使用 学习重点与难点： 网页制作技术，网页的编辑，超级链接的使用。 学习目的： 应用FrontPage 2000提供的技术制作与编辑具有动画效果的图文并 茂网页。 因特网的核心：World Wide Web（WWW）万维网，是由一个一个互 连互通的网站所组成的信息海洋，这些网站的灵魂就是网页
10.1 FrontPage2000概述 1. FrontPage2000是一个编辑工具。编辑 INternet上以 HTML格式保存的所有文件(称为网页),并可以利用 Image Composer和 Microsoft gif animator编辑处理图 像和动画,此外还可以在网页中插入各种插件,包 括:Java, ActiveX, JavaScript,产生各种特殊效果 2. FrontPage2000是一个管理站点工具。可以利用不同 的方式查看各个网页之间的关系,调整站点的组织 结构,使整个站点的条理清晰。 3. FrontPage2000是一个 Internet出版工具,利用它提 供的网络发布工具,可以轻松完成站点的发布上传 过程
2 10.1 FrontPage 2000概述 1. FrontPage2000是一个编辑工具。编辑Internet上以 HTML格式保存的所有文件(称为网页)，并可以利用 Image Composer和Microsoft GIF Animator编辑处理图 像和动画，此外还可以在网页中插入各种插件，包 括：Java，ActiveX，JavaScript，产生各种特殊效果。 2. FrontPage2000是一个管理站点工具。可以利用不同 的方式查看各个网页之间的关系，调整站点的组织 结构，使整个站点的条理清晰。 3. FrontPage 2000还是一个Internet出版工具，利用它提 供的网络发布工具，可以轻松完成站点的发布上传 过程
网页与站点 网页也就是我们在浏览器上看到的画面,而一般进入 站点后所看到的第一个页面通称为 Homepage,也称为 主页。主页通常用来作为一个站点中的目录或索引, 就像是一份报纸的头版,会把最热门、最重要的消息 写在上面,然后再注明“详见第X版”,让读者能快速 找到自己感兴趣的新闻。而在WWW中,主页的“详 见第X版”通常就是一个链接,浏览者只要在链接上单 击,就可以连到另外一个网页,观看更详细的内容 站点就是一群相关网页的集合,也就是说,设计者制 作了几个网页,并且经过组织规划,让网页彼此相连, 然后让 iNternet的人都能看到,这样的完整结构就称为 “站点
3 • 网页与站点 网页也就是我们在浏览器上看到的画面，而一般进入 站点后所看到的第一个页面通称为Homepage，也称为 主页。主页通常用来作为一个站点中的目录或索引， 就像是一份报纸的头版，会把最热门、最重要的消息 写在上面，然后再注明“详见第X版”，让读者能快速 找到自己感兴趣的新闻。而在WWW中，主页的“详 见第X版”通常就是一个链接，浏览者只要在链接上单 击，就可以连到另外一个网页，观看更详细的内容。 站点就是一群相关网页的集合，也就是说，设计者制 作了几个网页，并且经过组织规划，让网页彼此相连， 然后让Internet的人都能看到，这样的完整结构就称为 “站点
网页的组成元素 报纸、杂志其版面都是由两种元素构成的,即“文字”与“图 形”。WWW上的网页,在编辑时也是基于同样的版面设计原 理,但网页设计比平面设计复杂得多,因为通过浏览器展现出 来的网页,有声音、图像、动画等多媒体项目,作为网页的基 本元素仍然是文字、图形和超级链接。 文字——文字是网页中传递信息最快、占用存储空间最小 优势最强大量使用的信息传输载体。(通过字型、字号、 颜色的不断变化来吸引浏览者) 图形图形能给人更直观的视觉印象。WWW上的图形格 式一般为JPG、GI图形。这两种图形的压缩比较高且具有 跨平台的特性,即适应任何操作系统,但GIF图形只适应 256色的图片。 超链接—超链接是一种标记,一点即得。不论文字或图 形都可添加超链接标记。跳至各主题页面的链接;与其他 站点的链接;链接到网页设计者的 E-mail 表单(用来与访问者交互的页面元素集合,包括按钮、下拉菜单 等元素,供访问者输入需要进行交互的信息。)、框架(将浏览 器的可视部分分成若干个不同的区域,每个区域对应不同的页 面)、表格(可用于输出分类信息,也可用于页面信息定位)、 动态元素(GI动画、横幅广告、网站计数器)等
4 • 网页的组成元素 报纸、杂志其版面都是由两种元素构成的，即“文字”与“图 形”。WWW上的网页，在编辑时也是基于同样的版面设计原 理，但网页设计比平面设计复杂得多，因为通过浏览器展现出 来的网页，有声音、图像、动画等多媒体项目，作为网页的基 本元素仍然是文字、图形和超级链接。 ➢ 文字——文字是网页中传递信息最快、占用存储空间最小 优势最强大量使用的信息传输载体。（通过字型、字号、 颜色的不断变化来吸引浏览者） ➢ 图形——图形能给人更直观的视觉印象。WWW上的图形格 式一般为JPG、GIF图形。这两种图形的压缩比较高且具有 跨平台的特性，即适应任何操作系统，但GIF图形只适应 256色的图片。 ➢ 超链接——超链接是一种标记，一点即得。不论文字或图 形都可添加超链接标记。跳至各主题页面的链接；与其他 站点的链接；链接到网页设计者的E-mail。 ➢ 表单（用来与访问者交互的页面元素集合，包括按钮、下拉菜单 等元素，供访问者输入需要进行交互的信息。）、框架（将浏览 器的可视部分分成若干个不同的区域，每个区域对应不同的页 面）、表格（可用于输出分类信息，也可用于页面信息定位）、 动态元素（GIF动画、横幅广告、网站计数器）等
FrontPage2000功能简介 网页制作—操作界面简易,类似其他Oice应用软件 的使用。所见即所得,即制作者无须了解HTML语言 格式,只要使用工具栏或功能表,系统会自动把页面 文件编译为HTML文件。可以切换不同的视图方式直 接编辑HTML文本以及预览网页效果。对于初学者, 可直接使用系统提供的摸板、向导及主题。 建立和管理站点——直接在屏幕上建立组织结构图, 并且自动在页面中加入链接导航栏
5 • FrontPage2000功能简介 网页制作——操作界面简易，类似其他Office应用软件 的使用。所见即所得，即制作者无须了解HTML语言 格式，只要使用工具栏或功能表，系统会自动把页面 文件编译为HTML文件。可以切换不同的视图方式直 接编辑HTML文本以及预览网页效果。对于初学者， 可直接使用系统提供的摸板、向导及主题。 建立和管理站点——直接在屏幕上建立组织结构图， 并且自动在页面中加入链接导航栏
FrontPage2000中的视图操作(6种) 网页视图—网页的创建、编辑、预览等操作均在此视图中进行。 该视图窗口底部有三个标签:普通、 HTML和预览,它们分别控 制网页以普通方式、HIML方式进行编辑或是预览网页的效果。 四■ crosoft FrontPage-C:\ ocuments\ly Tebs\aywebl01 口K 文件①)编辑￠)查看)插入〔)格式@)工具①)表格)框架)窗口)帮助Q 回亟钞曲品多4,口他②「四 标题1 认字体) 普通 B U 视图 文件夹列表 「 firstweb/inde,hm 日C: AMy Documents \My冒ebsm firstweb 名人演说 由□ image: lindex.htm 葛底斯堡潼说(阿布拉罕·林肯) 我有一个梦(马下,路德·金) m 在马克思墓前的讲话(弗里德里希·恩格 斯) 报表 导航 超链接 普遁人ML预览/1 】区传输方式:28.8,时间:0秒「「数字
6 • FrontPage2000中的视图操作（6种） • 网页视图—网页的创建、编辑、预览等操作均在此视图中进行。 该视图窗口底部有三个标签：普通、HTML和预览，它们分别控 制网页以普通方式、HTML方式进行编辑或是预览网页的效果
文件夹视图—站点显示为一组文件和文件夹。“文件夹”视图 对于站点的作用与 Windows资源管理器对存储在硬盘上的文件的 作用和操作基本相同。在文件夹中的操作自动的修改相应的链接。 报表视图——可以方便了解当前站点的文件内容、更新链接情况 组件、修改所有文件列表及变化情况等信息。需要了解站点详细 情况时,使用报表视图 导航视图—可方便地观察站点的链接结构,这个结构很像一个 单位或组织的结构图。其中主页位于顶部,其他的网页归入下面 各层中。在该视图中可以很直观地浏览网站内网页之间的链接关 系,同时也可以通过鼠标将结构图中的网页拖到新位置来改变链 接结构 超链接视图—将当前站点显示为链接文件的一个网络,它们表 示了站点中各个网页之间的相互链接关系。超链接视图就像一个 地图,表明站点中的超链接路径 任务视图——主要用来创建和管理任务。在视图中列出了当前站 点中的“任务”,即当前站点中尚未完成的项目
7 • 文件夹视图——站点显示为一组文件和文件夹。“文件夹”视图 对于站点的作用与Windows资源管理器对存储在硬盘上的文件的 作用和操作基本相同。在文件夹中的操作自动的修改相应的链接。 • 报表视图——可以方便了解当前站点的文件内容、更新链接情况 组件、修改所有文件列表及变化情况等信息。需要了解站点详细 情况时，使用报表视图。 • 导航视图——可方便地观察站点的链接结构，这个结构很像一个 单位或组织的结构图。其中主页位于顶部，其他的网页归入下面 各层中。在该视图中可以很直观地浏览网站内网页之间的链接关 系，同时也可以通过鼠标将结构图中的网页拖到新位置来改变链 接结构。 • 超链接视图——将当前站点显示为链接文件的一个网络，它们表 示了站点中各个网页之间的相互链接关系。超链接视图就像一个 地图，表明站点中的超链接路径。 • 任务视图——主要用来创建和管理任务。在视图中列出了当前站 点中的“任务”，即当前站点中尚未完成的项目
FrontPage2000基本操作 建立新站点—开始-程序-文件-新建-站点-选定只有一个 冈页的站点-指定新站点的位置,如图所示: 按照系统的默认设置建立起来的站点如教材P21所示。 新建 站点 只有一个网页的站点 小导入站点向导 网]个人站点 选项 公司展示向导 指定新站点的位置 ]客户支持站点 htts:/10.43.9646 空站点 N讨论站点向导 厂添加到当前站点① 项目站点 需要安全的链接sLc 说明 创建只有一个单独的空白网页的新 角定 取消
8 • FrontPage2000基本操作 建立新站点——开始-程序-文件-新建-站点-选定只有一个 网页的站点-指定新站点的位置，如图所示： 按照系统的默认设置建立起来的站点如教材P211所示
创建网页—开始程序-文件-新建-网页-在新建对话框 中进行选择。如下图所示: 新建 常规框架网页|样式表 P 普通网页表单网页向导常见问题带有标题的宽 选项 厂仅添加站点任务 厂在当前的框架中打开( 说明 创建一个有两栏正文的网页。 带有交错边栏带有两个 带有两个边栏带有目录和边 的一栏正文的一栏 的一栏正文栏的两栏正文 预览 带有目录和边带有目录和边两栏交错正文热发 这里是主有题 栏的两列 目录 目霸该 艺的确认表单三栏正文 确定」取消」
9 • 创建网页——开始-程序-文件-新建-网页-在新建对话框 中进行选择。如下图所示：
导入网页操作: 从“文件”菜单中选择“导入”命令,进入“导入 对话框。在该对话框中有三个按钮可供选择,即导入 单个网页;导入文件夹中的所有网页;导入站点。如 下囪所示 ≥入 文件 URL 添加文件 添加文件夹① 「来自站点 修改M 删除 关闭c 10
10 • 导入网页操作： 从“文件”菜单中选择“导入”命令，进入“导入” 对话框。在该对话框中有三个按钮可供选择，即导入 单个网页；导入文件夹中的所有网页；导入站点。如 下图所示：