[互联网]Frontpage网页制作.ppt

《[互联网]Frontpage网页制作.ppt》由会员分享，可在线阅读，更多相关《[互联网]Frontpage网页制作.ppt（67页珍藏版）》请在三一文库上搜索。

1、2019/1/29,1,三、网页制作,3.1 网页是什么？ 3.2 HTML语言 3.3 可视化网页制作工具 3.4 Office 2003与网页制作,2019/1/29,2,主要内容：,本章介绍了什么是网页？介绍了HTML语言、可视化网页制作方法。介绍了FrontPage 2003的基本使用方法。,2019/1/29,3,学习目标：,1认识网页 2初步掌握HTML语言 3理解可视化网页制作的观念 4掌握FrontPage 2003网页制作工具的基本使用方法。,2019/1/29,4,3.1 什么是网页？,3.1 什么是网页？,3.1.1 WWW浏览 3.1.2 网页是文本文件 3.1.3 网

2、站与网页,2019/1/29,5,3.1.1 WWW浏览,3.1.1 WWW浏览,WWW浏览是一种基于Internet的Web体系结构的服务项目。Web是World Wide Web的缩写。通常把它翻译为叫“万维网”。 通过Web人们可以方便地浏览Internet主机上的大量的链接资源。如果你使用过Internet，相信你一定进行过WWW浏览。 在用户端要享受WWW服务需要有两个条件：一是将自己的计算机连入Internet；二是自己的计算机上需要安装一个WWW浏览器程序（比如：在Windows XP操作系统上安装一个IE浏览器程序）。,本节待续,2019/1/29,6,WWW浏览实例,3.1.

3、1 WWW浏览,地址栏,工作区,超级链接,本节待续,2019/1/29,7,什么是 URL ？,3.1.1 WWW浏览,URL是Uniform Resource Locator的缩写。通常把它翻译为“统一资源定位器”。顾名思义，URL是用来定位资源的。那么，它是用来定位什么资源呢？答案是：网页信息资源。如果想要直接浏览一个网页，首先就应该知道这个网页在什么地方（也就是说在哪台主机上的哪一个文件夹中）。怎么表示这个信息呢？用URL。,本节待续,2019/1/29,8,URL 的格式,3.1.1 WWW浏览,一个完整的URL如下： 协议名称:/主机的IP地址|主机的域名/路径/文件标识,本节待续,

4、2019/1/29,9,在地址栏输入：http:/ WWW浏览,URL,本节待续,2019/1/29,10,在地址栏输入： http:/ WWW浏览,本节待续,2019/1/29,11,3.1.1 WWW浏览,输入URL时要特别注意的地方,1协议名和主机域名（或IP地址）之间应该是“/”。不 是一个“/” 2主机域名（或IP地址）和路径之间、路径和文件标示 之间应该是“/”。不是“/”。 3文件标示必须指明文件的文件名和扩展名。不只是文 件名。 4所有字符必须是ASCII码字符。不能用汉字的标点代 替英文的标点。,后续3.1.2节,2019/1/29,12,3.1.2 网页是文本文件,3.1.

5、2 网页是文本文件,从浏览器窗口中看到的网页是一个个包含有丰富多媒体信息的文档。那么网页里边的代码究竟是什么的呢？其实网页这种类型的文件里边包含的是文本信息，通常称这种文件为“文本文件”。 其实网页就是文本文件。,本节待续,2019/1/29,13,3.1.2 网页是文本文件,在浏览器中看到的网页,本节待续,2019/1/29,14,3.1.2 网页是文本文件,网页的源代码,本节待续,2019/1/29,15,3.1.2 网页是文本文件,文本编辑器的作用,是不是可以直接用“记事本”这种文本文件编辑工具来创建、编辑网页呢？回答是肯定的。 不仅是“记事本”程序，“写字版”程序、“WPS”程序、“W

6、ord”程序等等，都可以作为编写网页文件的工具，只要在保存文件时使用“纯文本”文件类型（扩展名使用：htm、html、asp等）即可。,后续3.1.3节,2019/1/29,16,3.1.3 网页和网站,3.1.3 网页和网站,一个网页包含的信息毕竟是有限的。再说如果将大量的信息放在一个网页上就好比将若干本书的内容全部印在一页很大的纸上一样，这种情况是难以想象的。 网页也是一样，全世界的信息提供者（商家、机构、部门、单位、组织、乃至个人等等）必须要将要提供的信息分门别类，保存在许许多多的网页中。,本节待续,2019/1/29,17,3.1.3 网页和网站,将这些网页组织起来，并建立一些类似于图

7、书馆的图书、资料查询目录的专门的网页。建立主要用于查询的目录网页和主要用于显示信息的信息网页之间的超级链接。提供一个在Internet上可以被正常使用的域名。规定一个首先就要让浏览者看到的网页（主页）。如果是这样的话，上述的信息提供者提供这些信息、功能、服务加起来就可以被认为是一个“网站”。,后续3.2节,2019/1/29,18,3.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表单,2019/1/29,19,3.2.1 HTML语言的基本语法规则,3.2.1

8、 HTML语言的基本语法规则,用HTML语言编写的文档，其基本结构如下： 标题栏的标题 主体部分内容 ,本节待续,2019/1/29,20,HTML文档整体由和标记包含。文档分头部和主题两部分。和标记之间的是文档的头部；和标记之间的是文档的主体部分。和标记之间的文本在网页被浏览时将显示在浏览器窗口的标题栏。 头部的代码主要用来为网页的浏览，以及网页中程序代码的执行提供准备。主体部分主要被用来在浏览器窗口的工作区显示网页的内容。 HTML语言忽略“空格”字符，忽略大小写，标记的功能可以叠加。,3.2.1 HTML语言的基本语法规则,本节待续,2019/1/29,21,HTML语言是一种描述性语言

9、。HTML语言主要由一些标记构成。HTML语言标记的书写规则如下。 ,3.2.1 HTML语言的基本语法规则,以空格隔开,后续3.2.2节,2019/1/29,22,3.2.2 HTML的常用标记和属性,3.2.2 HTML的常用标记和属性,1、标记 和标记共同构成文档的首尾标记。 和标记构成文档的头部部分。 和标记规定网页在被浏览时浏览器窗口的标题栏中应显示出的内容。 和标记定义了网页在被浏览时浏览器窗口的工作区中应显示出的内容。,本节待续,2019/1/29,23,3.2.2 HTML的常用标记和属性,实例（源代码）, 这是网页的标题 这是网页的主体部分信息 ,本节待续,2019/1/29

10、,24,3.2.2 HTML的常用标记和属性,实例（浏览结果）,本节待续,2019/1/29,25,3.2.2 HTML的常用标记和属性,2. 标记常用的属性如下：,background：网页背景图案 bgcolor：网页背景色彩 text：网页中一般文本的色彩 link：没访问过的超文本色彩 vlink：访问过的超文本色彩 alink：访问中的超文本色彩,本节待续,2019/1/29,26,3.2.2 HTML的常用标记和属性,实例（源代码）, body标记的属性 绿底蓝字 ,本节待续,2019/1/29,27,3.2.2 HTML的常用标记和属性,实例（浏览结果）,本节待续,2019/1/

11、29,28,3.2.2 HTML的常用标记和属性,3. 标记,标记（n为：1、2、3、4、5、6其中之一）规定在网页的主体部分形式显眼的标题文本。 和成对出现， 和表示最大号标题，和次之，和表示最小号标题。,本节待续,2019/1/29,29,3.2.2 HTML的常用标记和属性,实例（源代码）,hn标记的效果 这是1号标题 这是2号标题 这是3号标题 这是4号标题 这是5号标题 这是6号标题 ,本节待续,2019/1/29,30,3.2.2 HTML的常用标记和属性,实例（浏览结果）,本节待续,2019/1/29,31,3.2.2 HTML的常用标记和属性,4. 和标记,标记规定在网页中显示

12、有序列表。 标记规定在网页中显示无序列表。 和标记通常与标记配合使用。,本节待续,2019/1/29,32,3.2.2 HTML的常用标记和属性,实例（源代码）, 有序和无序列表 有序列表第1项 有序列表第2项 有序列表第3项,有序列表第4项 有序列表第1项 有序列表第2项 有序列表第3项 有序列表第4项 ,本节待续,2019/1/29,33,3.2.2 HTML的常用标记和属性,实例（浏览结果）,本节待续,2019/1/29,34,3.2.2 HTML的常用标记和属性,5. 标记,在HTML语言中，标记被用来说明文本显示的各种特征（大小、字体、色彩等）。 标记的常用的属性如下： size：文

13、字的大小 color：文本的色彩 face：文本字体,本节待续,2019/1/29,35,3.2.2 HTML的常用标记和属性,实例（源代码）, 文本的样式 7号隶书字体 灰色的2号字 ,本节待续,2019/1/29,36,3.2.2 HTML的常用标记和属性,实例（浏览结果）,本节待续,2019/1/29,37,3.2.2 HTML的常用标记和属性,3. 、标记,标记规定文本加粗显示 标记规定文本加下划线显示 标记规定文本倾斜显示,本节待续,2019/1/29,38,3.2.2 HTML的常用标记和属性,实例（源代码）,文本的样式 7号隶书字体 灰色的2号字 ,本节待续,2019/1/29,

14、39,3.2.2 HTML的常用标记和属性,实例（浏览结果）,本节待续,2019/1/29,40,3.2.2 HTML的常用标记和属性,7. 标记,标记可以使网页在被浏览是产生一条水平线。 标记不是成对出现的，一个标记产生一条水平线。,本节待续,2019/1/29,41,3.2.2 HTML的常用标记和属性,实例（源代码）, 水平线 计算机应用 计算机基础知识数据表示 操作系统办公自动化计算机网络 ,本节待续,2019/1/29,42,3.2.2 HTML的常用标记和属性,实例（浏览结果）,后续3.2.3节,2019/1/29,43,3.2.3 表格,3.2.3 表格,HTML语言的和标记可以

15、在网页上构造表格。 和标记构造表格的一行。 和标记构造表格的一行上的一个单元格。,本节待续,2019/1/29,44,实例（源代码）, 一般的表格 学院专业设置情况 专业层次 学生人数 教师人数 计算机科学与技术 博士 100036, 信息管理及系统 硕士800 30 电子商务 硕士1600 20 ,3.2.3 表格,本节待续,2019/1/29,45,实例（浏览结果）,3.2.3 表格,后续3.2.4节,2019/1/29,46,3.2.4 图片,3.2.4 图片,HTML语言的标记可以在网页中指定显示一幅图像。 图像的大小由“width”和“heigth”属性决定。 图像的来源由“src”

16、属性决定。 图像在页面中的对齐方式由“align”属性决定。,本节待续,2019/1/29,47,实例（源代码）, 网页中显示图像 一幅关于树的照片 ,3.2.4 图片,本节待续,2019/1/29,48,实例（浏览结果）,3.2.4 图片,后续3.2.5节,2019/1/29,49,3.2.5 超级链接,3.2.5 超级链接,HTML语言的和标记可以在网页中建立超级链接。 URL由“href ”属性决定。,本节待续,2019/1/29,50,实例（源代码）, 网页中的超级链接 我经常浏览的网页 西南财经大学主页 中央电视台 华东师范 大学计算机科学与技术系学生活动 ,3.2.5 超级链接,本

17、节待续,2019/1/29,51,实例（浏览结果）,3.2.5 超级链接,后续3.2.6节,2019/1/29,52,3.2.6 表单,3.2.6 表单,HTML语言的和标记可以在网页中创建表单。 标记常用属性如下： Action属性：规定传递数据后，服务器向客户端传送的 网页。 Method属性：规定传递数据的方式。Post方式适合传 送大量数据，get方式适合传送少量数据。 Name属性：规定表单的名称。,本节待续,2019/1/29,53,表单中的表单元素由标记创建，表单元素的类型由标记的“type”属性决定。“type”属性的常见及取值如下。 text：表单元素是普通文本框。 pass

18、word：表单元素是密码文本框。 checkbox：表单元素是多选项。 redio：表单元素是单选项。 submit：表单元素是提交按钮。 reset：表单元素是重置按钮。,3.2.6 表单,本节待续,2019/1/29,54,实例（源代码）, 一个用登录的界面 一个用登录的界面 请输入您的大名： 请输入登录密码： ,3.2.6 表单,本节待续,2019/1/29,55,实例（浏览结果）,3.2.6 表单,后续3.3节,2019/1/29,56,3.3可视化网页制作工具,3.3 可视化网页制作工具,3.3.1 FrontPage 基本功能 3.3.2 FrontPage 应用程序窗口 3.3.

19、3网页中文字效果编排网站与网页 3.3.4网页中插入图像网站与网页 3.3.5网页中表格的处理网站与网页 3.3.6 网站与网页 3.3.7 网站与网页,2019/1/29,57,3.3.1 FrontPage 2003基本功能,3.3.1 FrontPage 基本功能,1可视化网页制作功能 2网站建设功能 3网站的发布和维护,后续3.3.2节,2019/1/29,58,3.3.2 FrontPage 2003应用程序窗口,3.3.2 FrontPage 应用程序窗口,后续3.3.3节,2019/1/29,59,3.3.3 网页中文字效果编排,3.3.3 网页中文字效果编排,制作静态网页实际上

20、是一个技术问题，而在制作网页之前，应该有一个设计网页的工作要做。设计网页是一个艺术创作过程，这不是这门课主要要解决的问题。本章只涉及怎么制作网页的技术问题。 使用可视化的网页制作工具FrontPage 制作网页时，用户的基本操作和使用Word 进行DOC文档的图、文、表混排操作非常类似。因此，如果有Word 、Excel 应用基础的用户使用FrontPage 制作网页在操作方面应该不会有太大的问题。,后续3.3.4节,2019/1/29,60,3.3.4 网页中插入图像,3.3.4 网页中插入图像,1获得素材 2插入图像 3设置图像的属性,后续3.3.5节,2019/1/29,61,3.3.5

21、 网页中表格的处理,3.3.5 网页中表格的处理,1规划表格 2插入表格 3设置表格的属性,后续3.3.6节,2019/1/29,62,3.3.6 建立超级链接,3.3.6 建立超级链接,1. 选定需要附着超级链接信息的对象（文字、图像、动画均可）。 2. 单击右键展开快捷菜单 3. 执行“超链接”命令 4. 在系统给出的“创建超链接”对话框中设置超级链接信息即可。,后续3.3.7节,2019/1/29,63,3.3.7 网页中的表单,3.3.7 网页中的表单,1. 插入表单 2. 插入表单域 3. 插入文本 4. 设置表单和表单域的属性,后续3.4节,2019/1/29,64,3.4 Off

22、ice 2003与网页制作,3.4 Office 与网页制作,3.4.1 Word 制作网页 3.4.2 Excel 制作网页 3.4.3 PowerPoint 制作网页,2019/1/29,65,3.4.1 Word 2003制作网页,3.4.1 Word 制作网页,FrontPage 是Office 中一个专门制作网页的应用程序。除了FrontPage ，Office 中其它一些应用程序也有可视化制作网页功能。下面就让我们来看一下Word 制作网页的功能。 Word 制作网页的的一种方法是使用Word 编辑文档，最后将文档保存为Web文件格式即可。具体操作方法是，单击“文件”菜单|“另存为

23、Web页”选项。,后续3.4.2节,2019/1/29,66,3.4.2 Excel 2003制作网页,3.4.2 Excel 制作网页,Excel 是一个专门的表格数据处理程序。用它来编辑和处理表格数据，以及有多个表构成的工作文档非常方便。如果要制作一个网页，而这个网页要能够具有使用Excel 对它进行处理时的那种操作效果的话，使用Excel 是很方便的。,后续3.4.3节,2019/1/29,67,3.4.3 PowerPoint 2003制作网页,3.4.3 PowerPoint 制作网页,使用PowerPoint 制作好了演示文稿后，可以直接将演示文稿另存为网页。具体操作方法是，单击“文件”菜单|“另存为Web页”选项。,第6章结束,