Frontpage网页制作（课堂PPT)

1、办公自动化简明教程办公自动化简明教程5/28/20221三、网页制作三、网页制作 3.1 网页是什么？网页是什么？ 3.2 HTML语言语言 3.3 可视化网页制作工具可视化网页制作工具 3.4 Office 2003与网页制作与网页制作办公自动化简明教程办公自动化简明教程5/28/20222主要内容：主要内容： 本章介绍了什么是网页？介绍了本章介绍了什么是网页？介绍了HTMLHTML语言、可视语言、可视化网页制作方法。介绍了化网页制作方法。介绍了FrontPage 2003FrontPage 2003的基本使的基本使用方法。用方法。办公自动化简明教程办公自动化简明教程5/28/20223学习

2、目标：学习目标：1认识网页认识网页2初步掌握初步掌握HTML语言语言3理解可视化网页制作的观念理解可视化网页制作的观念4掌握掌握FrontPage 2003网页制作工具的基本使用方法。网页制作工具的基本使用方法。 办公自动化简明教程办公自动化简明教程5/28/202243.1 什么是网页？什么是网页？3.1 什么是网页？什么是网页？3.1.1 WWW浏览浏览 3.1.2 网页是文本文件网页是文本文件 3.1.3 网站与网页网站与网页 办公自动化简明教程办公自动化简明教程5/28/202253.1.1 WWW浏览浏览3.1.1 WWW浏览浏览 WWW浏览是一种基于浏览是一种基于Internet的

3、的Web体系结构的服务体系结构的服务项目。项目。Web是是World Wide Web的缩写。通常把它翻译为的缩写。通常把它翻译为叫叫“万维网万维网”。 通过通过Web人们可以方便地浏览人们可以方便地浏览Internet主机上的大量的主机上的大量的链接资源。如果你使用过链接资源。如果你使用过Internet，相信你一定进行过，相信你一定进行过WWW浏览。浏览。 在用户端要享受在用户端要享受WWW服务需要有两个条件：一是将服务需要有两个条件：一是将自己的计算机连入自己的计算机连入Internet；二是自己的计算机上需要安；二是自己的计算机上需要安装一个装一个WWW浏览器程序（比如：在浏览器程序（

4、比如：在Windows XP操作系操作系统上安装一个统上安装一个IE浏览器程序）。浏览器程序）。办公自动化简明教程办公自动化简明教程5/28/20226WWW浏览实例浏览实例3.1.1 WWW浏览浏览地址栏工作区超级链接办公自动化简明教程办公自动化简明教程5/28/20227什么是什么是 URL ？3.1.1 WWW浏览浏览 URL是是Uniform Resource Locator的缩写。通常把的缩写。通常把它翻译为它翻译为“统一资源定位器统一资源定位器”。顾名思义，。顾名思义，URL是是用来定位资源的。那么，它是用来定位什么资源呢？用来定位资源的。那么，它是用来定位什么资源呢？答案是：网页

5、信息资源。如果想要直接浏览一个网答案是：网页信息资源。如果想要直接浏览一个网页，首先就应该知道这个网页在什么地方（也就是页，首先就应该知道这个网页在什么地方（也就是说在哪台主机上的哪一个文件夹中）。怎么表示这说在哪台主机上的哪一个文件夹中）。怎么表示这个信息呢？用个信息呢？用URL。办公自动化简明教程办公自动化简明教程5/28/20228URL 的格式的格式3.1.1 WWW浏览浏览 一个完整的一个完整的URLURL如下：如下：协议名称协议名称:/:/主机的主机的IPIP地址地址| |主机的域名主机的域名/ /路径路径/ /文件标识文件标识办公自动化简明教程办公自动化简明教程5/28/2022

6、9在地址栏输入：在地址栏输入：http:/ WWW浏览浏览URL办公自动化简明教程办公自动化简明教程5/28/202210在地址栏输入：在地址栏输入： http:/ WWW浏览浏览办公自动化简明教程办公自动化简明教程5/28/2022113.1.1 WWW浏览浏览输入输入URL时要特别注意的地方时要特别注意的地方 1协议名和主机域名（或协议名和主机域名（或IP地址）之间应该是地址）之间应该是“/”。不。不 是一个是一个“/”2主机域名（或主机域名（或IP地址）和路径之间、路径和文件标示地址）和路径之间、路径和文件标示 之间应该是之间应该是“/”。不是。不是“/”。3文件标示必须指明文件的文件名

7、和扩展名。不只是文文件标示必须指明文件的文件名和扩展名。不只是文 件名。件名。4所有字符必须是所有字符必须是ASCII码字符。不能用汉字的标点代码字符。不能用汉字的标点代 替英文的标点。替英文的标点。办公自动化简明教程办公自动化简明教程5/28/2022123.1.2 网页是文本文件网页是文本文件 3.1.2 网页是文本文件网页是文本文件 从浏览器窗口中看到的网页是一个个包含有丰富从浏览器窗口中看到的网页是一个个包含有丰富多媒体信息的文档。那么网页里边的代码究竟是什么多媒体信息的文档。那么网页里边的代码究竟是什么的呢？其实网页这种类型的文件里边包含的是文本信的呢？其实网页这种类型的文件里边包含

8、的是文本信息，通常称这种文件为息，通常称这种文件为“文本文件文本文件”。 其实网页就是文本文件。其实网页就是文本文件。 办公自动化简明教程办公自动化简明教程5/28/2022133.1.2 网页是文本文件网页是文本文件 在浏览器中看到的网页在浏览器中看到的网页办公自动化简明教程办公自动化简明教程5/28/2022143.1.2 网页是文本文件网页是文本文件 网页的源代码网页的源代码办公自动化简明教程办公自动化简明教程5/28/2022153.1.2 网页是文本文件网页是文本文件 文本编辑器的作用文本编辑器的作用 是不是可以直接用是不是可以直接用“记事本记事本”这种文本文件编辑这种文本文件编辑工

9、具来创建、编辑网页呢？回答是肯定的。工具来创建、编辑网页呢？回答是肯定的。 不仅是不仅是“记事本记事本”程序，程序，“写字版写字版”程序、程序、“WPS”程序、程序、“Word”程序等等，都可以作为编写程序等等，都可以作为编写网页文件的工具，只要在保存文件时使用网页文件的工具，只要在保存文件时使用“纯文本纯文本”文件类型（扩展名使用：文件类型（扩展名使用：htm、html、asp等）即可。等）即可。办公自动化简明教程办公自动化简明教程5/28/2022163.1.3 网页和网站网页和网站 3.1.3 网页和网站网页和网站 一个网页包含的信息毕竟是有限的。再说如果将一个网页包含的信息毕竟是有限的

10、。再说如果将大量的信息放在一个网页上就好比将若干本书的内容大量的信息放在一个网页上就好比将若干本书的内容全部印在一页很大的纸上一样，这种情况是难以想象全部印在一页很大的纸上一样，这种情况是难以想象的。的。 网页也是一样，全世界的信息提供者（商家、机网页也是一样，全世界的信息提供者（商家、机构、部门、单位、组织、乃至个人等等）必须要将要构、部门、单位、组织、乃至个人等等）必须要将要提供的信息分门别类，保存在许许多多的网页中。提供的信息分门别类，保存在许许多多的网页中。 办公自动化简明教程办公自动化简明教程5/28/2022173.1.3 网页和网站网页和网站 将这些网页组织起来，并建立一些类似于

11、图书馆将这些网页组织起来，并建立一些类似于图书馆的图书、资料查询目录的专门的网页。建立主要用于的图书、资料查询目录的专门的网页。建立主要用于查询的目录网页和主要用于显示信息的信息网页之间查询的目录网页和主要用于显示信息的信息网页之间的超级链接。提供一个在的超级链接。提供一个在InternetInternet上可以被正常使用的上可以被正常使用的域名。规定一个首先就要让浏览者看到的网页（主域名。规定一个首先就要让浏览者看到的网页（主页）。如果是这样的话，上述的信息提供者提供这些页）。如果是这样的话，上述的信息提供者提供这些信息、功能、服务加起来就可以被认为是一个信息、功能、服务加起来就可以被认为是

12、一个“网网站站”。 办公自动化简明教程办公自动化简明教程5/28/2022183.2 HTML语言语言3.2 HTML语言语言 3.2.1 HTML语言的基本语法规则语言的基本语法规则 3.2.2 HTML的常用标记和属性的常用标记和属性 3.2.3表格表格3.2.4图片图片 3.2.5超级链接超级链接 3.2.6表单表单 办公自动化简明教程办公自动化简明教程5/28/2022193.2.1 HTML语言的基本语法规则语言的基本语法规则3.2.1 HTML语言的基本语法规则语言的基本语法规则用用HTML语言编写的文档，其基本结构如下：语言编写的文档，其基本结构如下： 标题栏的标题标题栏的标题

13、主体部分内容主体部分内容 办公自动化简明教程办公自动化简明教程5/28/202220 HTML文档整体由文档整体由和和标记包含。标记包含。文档分头部和主题两部分。文档分头部和主题两部分。和和标记之标记之间的是文档的头部；间的是文档的头部；和和标记之间的是标记之间的是文档的主体部分。文档的主体部分。和和标记之间的文本在标记之间的文本在网页被浏览时将显示在浏览器窗口的标题栏。网页被浏览时将显示在浏览器窗口的标题栏。 头部的代码主要用来为网页的浏览，以及网页中头部的代码主要用来为网页的浏览，以及网页中程序代码的执行提供准备。主体部分主要被用来在浏程序代码的执行提供准备。主体部分主要被用来在浏览器窗口

14、的工作区显示网页的内容。览器窗口的工作区显示网页的内容。 HTML语言忽略语言忽略“空格空格”字符，忽略大小写，标字符，忽略大小写，标记的功能可以叠加。记的功能可以叠加。3.2.1 HTML语言的基本语法规则语言的基本语法规则办公自动化简明教程办公自动化简明教程5/28/202221 HTML语言是一种描述性语言。语言是一种描述性语言。HTML语言主要由语言主要由一些标记构成。一些标记构成。HTML语言标记的书写规则如下。语言标记的书写规则如下。 3.2.1 HTML语言的基本语法规则语言的基本语法规则以空格隔开办公自动化简明教程办公自动化简明教程5/28/2022223.2.2 HTML的常

15、用标记和属性的常用标记和属性 3.2.2 HTML的常用标记和属性的常用标记和属性 1、标记标记 和和标记共同构成文档的首尾标记。标记共同构成文档的首尾标记。 和和标记构成文档的头部部分。标记构成文档的头部部分。 和和标记规定网页在被浏览时浏览器窗口的标题栏标记规定网页在被浏览时浏览器窗口的标题栏中应显示出的内容。中应显示出的内容。 和和标记定义了网页在被浏览时浏览器窗口的工标记定义了网页在被浏览时浏览器窗口的工作区中应显示出的内容。作区中应显示出的内容。办公自动化简明教程办公自动化简明教程5/28/2022233.2.2 HTML的常用标记和属性的常用标记和属性实例（源代码）实例（源代码）

16、这是网页的标题这是网页的标题 这是网页的主体部分信息这是网页的主体部分信息 办公自动化简明教程办公自动化简明教程5/28/2022243.2.2 HTML的常用标记和属性的常用标记和属性实例（浏览结果）实例（浏览结果）办公自动化简明教程办公自动化简明教程5/28/2022253.2.2 HTML的常用标记和属性的常用标记和属性 2. 标记常用的属性如下：标记常用的属性如下： background：网页背景图案：网页背景图案bgcolor：网页背景色彩：网页背景色彩text：网页中一般文本的色彩：网页中一般文本的色彩link：没访问过的超文本色彩：没访问过的超文本色彩vlink：访问过的超文本色

17、彩：访问过的超文本色彩alink：访问中的超文本色彩：访问中的超文本色彩办公自动化简明教程办公自动化简明教程5/28/2022263.2.2 HTML的常用标记和属性的常用标记和属性实例（源代码）实例（源代码） body标记的属性标记的属性 绿底蓝字绿底蓝字 办公自动化简明教程办公自动化简明教程5/28/2022273.2.2 HTML的常用标记和属性的常用标记和属性实例（浏览结果）实例（浏览结果）办公自动化简明教程办公自动化简明教程5/28/2022283.2.2 HTML的常用标记和属性的常用标记和属性 3. 标记标记 标记（标记（n为：为：1、2、3、4、5、6其中之一）其中之一）规定在

18、网页的主体部分形式显眼的标题文本。规定在网页的主体部分形式显眼的标题文本。 和和成对出现，成对出现， 和和表示最大号标题，表示最大号标题，和和次次之，之，和和表示最小号标题。表示最小号标题。办公自动化简明教程办公自动化简明教程5/28/2022293.2.2 HTML的常用标记和属性的常用标记和属性实例（源代码）实例（源代码）hn标记的效果标记的效果这是这是1号标题号标题这是这是2号标题号标题这是这是3号标题号标题这是这是4号标题号标题这是这是5号标题号标题这是这是6号标题号标题办公自动化简明教程办公自动化简明教程5/28/2022303.2.2 HTML的常用标记和属性的常用标记和属性实例（

19、浏览结果）实例（浏览结果）办公自动化简明教程办公自动化简明教程5/28/2022313.2.2 HTML的常用标记和属性的常用标记和属性 4. 和和标记标记 标记规定在网页中显示有序列表。标记规定在网页中显示有序列表。 标记规定在网页中显示无序列表。标记规定在网页中显示无序列表。 和和标记通常与标记通常与标记配合使用。标记配合使用。办公自动化简明教程办公自动化简明教程5/28/2022323.2.2 HTML的常用标记和属性的常用标记和属性实例（源代码）实例（源代码）有序和无序列表有序和无序列表有序列表第有序列表第1项项有序列表第有序列表第2项项有序列表第有序列表第3项项有序列表第有序列表第4

20、项项有序列表第有序列表第1项项有序列表第有序列表第2项项有序列表第有序列表第3项项有序列表第有序列表第4项项办公自动化简明教程办公自动化简明教程5/28/2022333.2.2 HTML的常用标记和属性的常用标记和属性实例（浏览结果）实例（浏览结果）办公自动化简明教程办公自动化简明教程5/28/2022343.2.2 HTML的常用标记和属性的常用标记和属性 5. 标记标记 在在HTML语言中，语言中，标记被用来说明文本显示的各种特征标记被用来说明文本显示的各种特征（大小、字体、色彩等）。（大小、字体、色彩等）。 标记的常用的属性如下：标记的常用的属性如下： size：文字的大小：文字的大小

21、color：文本的色彩：文本的色彩 face：文本字体：文本字体办公自动化简明教程办公自动化简明教程5/28/2022353.2.2 HTML的常用标记和属性的常用标记和属性实例（源代码）实例（源代码）文本的样式文本的样式7号隶书字体号隶书字体灰色的灰色的2号字号字办公自动化简明教程办公自动化简明教程5/28/2022363.2.2 HTML的常用标记和属性的常用标记和属性实例（浏览结果）实例（浏览结果）办公自动化简明教程办公自动化简明教程5/28/2022373.2.2 HTML的常用标记和属性的常用标记和属性 3. 、标记标记 标记规定文本加粗显示标记规定文本加粗显示 标记规定文本加下划线

22、显示标记规定文本加下划线显示 标记规定文本倾斜显示标记规定文本倾斜显示办公自动化简明教程办公自动化简明教程5/28/2022383.2.2 HTML的常用标记和属性的常用标记和属性实例（源代码）实例（源代码）文本的样式文本的样式7号隶书号隶书字字体体灰色的灰色的2号字号字办公自动化简明教程办公自动化简明教程5/28/2022393.2.2 HTML的常用标记和属性的常用标记和属性实例（浏览结果）实例（浏览结果）办公自动化简明教程办公自动化简明教程5/28/2022403.2.2 HTML的常用标记和属性的常用标记和属性 7. 标记标记 标记可以使网页在被浏览是产生一条水平线。标记可以使网页在被

23、浏览是产生一条水平线。 标记不是成对出现的，一个标记不是成对出现的，一个标记产生一条水平线。标记产生一条水平线。办公自动化简明教程办公自动化简明教程5/28/2022413.2.2 HTML的常用标记和属性的常用标记和属性实例（源代码）实例（源代码）水平线水平线计算机应用计算机应用计算机基础知识计算机基础知识数据表示数据表示操作系统操作系统办公自动化办公自动化计算机网络计算机网络办公自动化简明教程办公自动化简明教程5/28/2022423.2.2 HTML的常用标记和属性的常用标记和属性实例（浏览结果）实例（浏览结果）办公自动化简明教程办公自动化简明教程5/28/2022433.2.3 表格表

24、格3.2.3 表格表格 HTML语言的语言的和和标记可以在网页上构造表格。标记可以在网页上构造表格。 和和标记构造表格的一行。标记构造表格的一行。 和和标记构造表格的一行上的一个单元格。标记构造表格的一行上的一个单元格。办公自动化简明教程办公自动化简明教程5/28/202244实例（源代码）实例（源代码）一般的表格一般的表格学院专业设置情况学院专业设置情况专业专业层次层次学生人数学生人数教师人数教师人数计算机科学与技术计算机科学与技术博士博士100036信息管理及系统信息管理及系统硕士硕士80030电子商务电子商务硕士硕士1600203.2.3 表格表格办公自动化简明教程办公自动化简明教程5/

25、28/202245实例（浏览结果）实例（浏览结果）3.2.3 表格表格办公自动化简明教程办公自动化简明教程5/28/2022463.2.4 图片图片 3.2.4 图片图片 HTML语言的语言的标记可以在网页中指定显示一幅图像。标记可以在网页中指定显示一幅图像。 图像的大小由图像的大小由“width”和和“heigth”属性决定。属性决定。 图像的来源由图像的来源由“src”属性决定。属性决定。 图像在页面中的对齐方式由图像在页面中的对齐方式由“align”属性决定。属性决定。办公自动化简明教程办公自动化简明教程5/28/202247实例（源代码）实例（源代码）网页中显示图像网页中显示图像一幅关

26、于树的照片一幅关于树的照片3.2.4 图片图片 办公自动化简明教程办公自动化简明教程5/28/202248实例（浏览结果）实例（浏览结果）3.2.4 图片图片 办公自动化简明教程办公自动化简明教程5/28/2022493.2.5 超级链接超级链接 3.2.5 超级链接超级链接 HTML语言的语言的和和标记可以在网页中建立超级链接。标记可以在网页中建立超级链接。 URL由由“href ”属性决定。属性决定。办公自动化简明教程办公自动化简明教程5/28/202250实例（源代码）实例（源代码）网页中的超级链接网页中的超级链接我经常浏览的网页我经常浏览的网页西南财经大学主页西南财经大学主页中央电视台

27、中央电视台华东师范华东师范 大学计算机科学与技术系学生活动大学计算机科学与技术系学生活动3.2.5 超级链接超级链接 办公自动化简明教程办公自动化简明教程5/28/202251实例（浏览结果）实例（浏览结果）3.2.5 超级链接超级链接 办公自动化简明教程办公自动化简明教程5/28/2022523.2.6 表单表单 3.2.6 表单表单 HTML语言的语言的和和标记可以在网页中创建表单。标记可以在网页中创建表单。 标记常用属性如下：标记常用属性如下： Action属性：规定传递数据后，服务器向客户端传送的属性：规定传递数据后，服务器向客户端传送的 网页。网页。 Method属性：规定传递数据的

28、方式。属性：规定传递数据的方式。Post方式适合传方式适合传 送大量数据，送大量数据，get方式适合传送少量数据。方式适合传送少量数据。 Name属性：规定表单的名称。属性：规定表单的名称。办公自动化简明教程办公自动化简明教程5/28/202253 表单中的表单元素由表单中的表单元素由标记创建，表单元素的类型由标记创建，表单元素的类型由标记的标记的“type”属性决定。属性决定。“type”属性的常见及取值如下。属性的常见及取值如下。 text：表单元素是普通文本框。：表单元素是普通文本框。 password：表单元素是密码文本框。：表单元素是密码文本框。 checkbox：表单元素是多选项。

29、：表单元素是多选项。 redio：表单元素是单选项。：表单元素是单选项。 submit：表单元素是提交按钮。：表单元素是提交按钮。 reset：表单元素是重置按钮。：表单元素是重置按钮。3.2.6 表单表单 办公自动化简明教程办公自动化简明教程5/28/202254实例（源代码）实例（源代码）一个用登录的界面一个用登录的界面一个用登录的界面一个用登录的界面请输入您的大名：请输入您的大名：请输入登录密码：请输入登录密码：3.2.6 表单表单 办公自动化简明教程办公自动化简明教程5/28/202255实例（浏览结果）实例（浏览结果）3.2.6 表单表单 办公自动化简明教程办公自动化简明教程5/28

30、/2022563.3可视化网页制作工具可视化网页制作工具3.3 可视化网页制作工具可视化网页制作工具 3.3.1 FrontPage 基本功能基本功能 3.3.2 FrontPage 应用程序窗口应用程序窗口3.3.3网页中文字效果编排网站与网页网页中文字效果编排网站与网页 3.3.4网页中插入图像网站与网页网页中插入图像网站与网页 3.3.5网页中表格的处理网站与网页网页中表格的处理网站与网页 3.3.6 网站与网页网站与网页 3.3.7 网站与网页网站与网页 办公自动化简明教程办公自动化简明教程5/28/2022573.3.1 FrontPage 2003基本功能基本功能 3.3.1 Fr

31、ontPage 基本功能基本功能 1可视化网页制作功能可视化网页制作功能 2网站建设功能网站建设功能 3网站的发布和维护网站的发布和维护办公自动化简明教程办公自动化简明教程5/28/2022583.3.2 FrontPage 2003应用程序窗口应用程序窗口 3.3.2 FrontPage 应用程序窗口应用程序窗口 办公自动化简明教程办公自动化简明教程5/28/2022593.3.3 网页中文字效果编排网页中文字效果编排 3.3.3 网页中文字效果编排网页中文字效果编排 制作静态网页实际上是一个技术问题，而在制作网页之前，制作静态网页实际上是一个技术问题，而在制作网页之前，应该有一个设计网页的

32、工作要做。设计网页是一个艺术创作过应该有一个设计网页的工作要做。设计网页是一个艺术创作过程，这不是这门课主要要解决的问题。本章只涉及怎么制作网程，这不是这门课主要要解决的问题。本章只涉及怎么制作网页的技术问题。页的技术问题。 使用可视化的网页制作工具使用可视化的网页制作工具FrontPage 制作网页时，用户制作网页时，用户的基本操作和使用的基本操作和使用Word 进行进行DOC文档的图、文、表混排操作文档的图、文、表混排操作非常类似。因此，如果有非常类似。因此，如果有Word 、Excel 应用基础的用户使用应用基础的用户使用FrontPage 制作网页在操作方面应该不会有太大的问题。制作网

33、页在操作方面应该不会有太大的问题。办公自动化简明教程办公自动化简明教程5/28/2022603.3.4 3.3.4 网页中插入图像网页中插入图像 3.3.4 网页中插入图像网页中插入图像 1获得素材获得素材 2插入图像插入图像 3设置图像的属性设置图像的属性办公自动化简明教程办公自动化简明教程5/28/2022613.3.5 3.3.5 网页中表格的处理网页中表格的处理 3.3.5 网页中表格的处理网页中表格的处理 1规划表格规划表格2插入表格插入表格3设置表格的属性设置表格的属性办公自动化简明教程办公自动化简明教程5/28/2022623.3.6 3.3.6 建立超级链接建立超级链接 3.3.6 建立超级链接建立超级链接1. 选定需要附着超级链接信息的对象（文字、图像、选定需要附着超级链接信息的对象（文字、图像、动画均可）。动画均可）。2. 单击右键展开快捷菜单单击右键展开快捷菜单3. 执行执行“超链接超链接”命令命令4. 在系统给出的在系统给出的“创建超链接创建超链接”对话框中设置超级对话框中设置超级链接信息即