辽师大版信息五下第2课《进入frontpage世界》课件

三、网页制作 3.1 网页是什么？ 3.2 HTML语言 3.3 可视化网页制作工具 3.4 Office 2003与网页制作 1 主要内容： 本章介绍了什么是网页？介绍了HTML语言、可视 化网页制作方法。介绍了FrontPage 2003的基本使 用方法。 2 学习目标： 1认识网页 2初步掌握HTML语言 3理解可视化网页制作的观念 4掌握FrontPage 2003网页制作工具的基本使用方法。 3 3.1 什么是网页？ 3.1 什么是网页？ 3.1.1 WWW浏览 3.1.2 网页是文本文件 3.1.3 网站与网页 4 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浏览器程序）。 本节待续 5 WWW浏览实例 3.1.1 WWW浏览 地址栏 工作区 超级链接 本节待续 6 什么是 URL ？ 3.1.1 WWW浏览 URL是Uniform Resource Locator的缩写。通常把 它翻译为“统一资源定位器”。顾名思义，URL是用 来定位资源的。那么，它是用来定位什么资源呢？ 答案是：网页信息资源。如果想要直接浏览一个网 页，首先就应该知道这个网页在什么地方（也就是 说在哪台主机上的哪一个文件夹中）。怎么表示这 个信息呢？用URL。 本节待续 7 URL 的格式 3.1.1 WWW浏览 一个完整的URL如下： 协议名称:/主机的IP地址|主机的域名/路径/文件标识 本节待续 8 在地址栏输入：/ 3.1.1 WWW浏览 URL 本节待续 9 在地址栏输入： /article/39/42/45/2009/2009091511885.html 3.1.1 WWW浏览 本节待续 10 3.1.1 WWW浏览 输入URL时要特别注意的地方 1协议名和主机域名（或IP地址）之间应该是“/”。不 是一个“/” 2主机域名（或IP地址）和路径之间、路径和文件标示 之间应该是“/”。不是“/”。 3文件标示必须指明文件的文件名和扩展名。不只是文 件名。 4所有字符必须是ASCII码字符。不能用汉字的标点代 替英文的标点。 后续3.1.2节 11 3.1.2 网页是文本文件 3.1.2 网页是文本文件 从浏览器窗口中看到的网页是一个个包含有丰富 多媒体信息的文档。那么网页里边的代码究竟是什么 的呢？其实网页这种类型的文件里边包含的是文本信 息，通常称这种文件为“文本文件”。 其实网页就是文本文件。 本节待续 12 3.1.2 网页是文本文件 在浏览器中看到的网页 本节待续 13 3.1.2 网页是文本文件 网页的源代码 本节待续 14 3.1.2 网页是文本文件 文本编辑器的作用 是不是可以直接用“记事本”这种文本文件编辑工 具来创建、编辑网页呢？回答是肯定的。 不仅是“记事本”程序，“写字版”程序、“WPS” 程序、“Word”程序等等，都可以作为编写网页文件 的工具，只要在保存文件时使用“纯文本”文件类型（ 扩展名使用：htm、html、asp等）即可。 后续3.1.3节 15 3.1.3 网页和网站 3.1.3 网页和网站 一个网页包含的信息毕竟是有限的。再说如果将 大量的信息放在一个网页上就好比将若干本书的内容 全部印在一页很大的纸上一样，这种情况是难以想象 的。 网页也是一样，全世界的信息提供者（商家、机 构、部门、单位、组织、乃至个人等等）必须要将要 提供的信息分门别类，保存在许许多多的网页中。 本节待续 16 3.1.3 网页和网站 将这些网页组织起来，并建立一些类似于图书馆 的图书、资料查询目录的专门的网页。建立主要用于 查询的目录网页和主要用于显示信息的信息网页之间 的超级链接。提供一个在Internet上可以被正常使用的 域名。规定一个首先就要让浏览者看到的网页（主页 ）。如果是这样的话，上述的信息提供者提供这些信 息、功能、服务加起来就可以被认为是一个“网站” 。 后续3.2节 17 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表单 18 3.2.1 HTML语言的基本语法规则 3.2.1 HTML语言的基本语法规则 用HTML语言编写的文档，其基本结构如下： 标题栏的标题 主体部分内容 本节待续 19 HTML文档整体由和标记包含。 文档分头部和主题两部分。和标记之 间的是文档的头部；和标记之间的是 文档的主体部分。和标记之间的文本在 网页被浏览时将显示在浏览器窗口的标题栏。 头部的代码主要用来为网页的浏览，以及网页中 程序代码的执行提供准备。主体部分主要被用来在浏 览器窗口的工作区显示网页的内容。 HTML语言忽略“空格”字符，忽略大小写，标记 的功能可以叠加。 3.2.1 HTML语言的基本语法规则 本节待续 20 HTML语言是一种描述性语言。HTML语言主要由 一些标记构成。HTML语言标记的书写规则如下。 3.2.1 HTML语言的基本语法规则 以空格隔开 后续3.2.2节 21 3.2.2 HTML的常用标记和属性 3.2.2 HTML的常用标记和属性 1、标记 和标记共同构成文档的首尾标记。 和标记构成文档的头部部分。 和标记规定网页在被浏览时浏览器窗口的标题栏 中应显示出的内容。 和标记定义了网页在被浏览时浏览器窗口的工 作区中应显示出的内容。 本节待续 22 3.2.2 HTML的常用标记和属性 实例（源代码） 这是网页的标题 这是网页的主体部分信息 本节待续 23 3.2.2 HTML的常用标记和属性 实例（浏览结果） 本节待续 24 3.2.2 HTML的常用标记和属性 2. 标记常用的属性如下： background：网页背景图案 bgcolor：网页背景色彩 text：网页中一般文本的色彩 link：没访问过的超文本色彩 vlink：访问过的超文本色彩 alink：访问中的超文本色彩 本节待续 25 3.2.2 HTML的常用标记和属性 实例（源代码） body标记的属性 绿底蓝字 本节待续 26 3.2.2 HTML的常用标记和属性 实例（浏览结果） 本节待续 27 3.2.2 HTML的常用标记和属性 3. 标记 标记（n为：1、2、3、4、5、6其中之一） 规定在网页的主体部分形式显眼的标题文本。 和成对出现， 和表示最大号标题，和次 之，和表示最小号标题。 本节待续 28 3.2.2 HTML的常用标记和属性 实例（源代码） hn标记的效果 这是1号标题 这是2号标题 这是3号标题 这是4号标题 这是5号标题 这是6号标题 本节待续 29 3.2.2 HTML的常用标记和属性 实例（浏览结果） 本节待续 30 3.2.2 HTML的常用标记和属性 4. 和标记 标记规定在网页中显示有序列表。 标记规定在网页中显示无序列表。 和标记通常与标记配合使用。 本节待续 31 3.2.2 HTML的常用标记和属性 实例（源代码） 有序和无序列表 有序列表第1项 有序列表第2项 有序列表第3项 有序列表第4项 有序列表第1项 有序列表第2项 有序列表第3项 有序列表第4项 本节待续 32 3.2.2 HTML的常用标记和属性 实例（浏览结果） 本节待续 33 3.2.2 HTML的常用标记和属性 5. 标记 在HTML语言中，标记被用来说明文本显示的各种特征 （大小、字体、色彩等）。 标记的常用的属性如下： size：文字的大小 color：文本的色彩 face：文本字体 本节待续 34 3.2.2 HTML的常用标记和属性 实例（源代码） 文本的样式 7号隶书字体 灰色的2号字 本节待续 35 3.2.2 HTML的常用标记和属性 实例（浏览结果） 本节待续 36 3.2.2 HTML的常用标记和属性 3. 、标记 标记规定文本加粗显示 标记规定文本加下划线显示 标记规定文本倾斜显示 本节待续 37 3.2.2 HTML的常用标记和属性 实例（源代码） 文本的样式 7号隶书字体 灰色的2号字 本节待续 38 3.2.2 HTML的常用标记和属性 实例（浏览结果） 本节待续 39 3.2.2 HTML的常用标记和属性 7. 标记 标记可以使网页在被浏览是产生一条水平线。 标记不是成对出现的，一个标记产生一条水平线。 本节待续 40 3.2.2 HTML的常用标记和属性 实例（源代码） 水平线 计算机应用 计算机基础知识数据表示 操作系统办公自动化计算机网络 本节待续 41 3.2.2 HTML的常用标记和属性 实例（浏览结果） 后续3.2.3节 42 3.2.3 表格 3.2.3 表格 HTML语言的和标记可以在网页上构造表格。 和标记构造表格的一行。 和标记构造表格的一行上的一个单元格。 本节待续 43 实例（源代码） 一般的表格 学院专业设置情况 专业层次 学生人数 教师人数 计算机科学与技术 博士 100036 信息管理及系统统 硕硕士800 30 电电子商务务 硕硕士1600 20 3.2.3 表格 本节待续 44 实例（浏览结果） 3.2.3 表格 后续3.2.4节 45 3.2.4 图片 3.2.4 图片 HTML语言的标记可以在网页中指定显示一幅图像。 图像的大小由“width”和“heigth”属性决定。 图像的来源由“src”属性决定。 图像在页面中的对齐方式由“align”属性决定。 本节待续 46 实例（源代码） 网页中显示图像 一幅关于树的照片 3.2.4 图片 本节待续 47 实例（浏览结果） 3.2.4 图片 后续3.2.5节 48 3.2.5 超级链接 3.2.5 超级链接 HTML语言的和标记可以在网页中建立超级链接。 URL由“href ”属性决定。 本节待续 49 实例（源代码） 网页中的超级链接 我经常浏览的网页 西南财经大学主页 中央电视台 华东师范 大学计算机科学与技术系学生活动 3.2.5 超级链接 本节待续 50 实例（浏览结果） 3.2.5 超级链接 后续3.2.6节 51 3.2.6 表单 3.2.6 表单 HTML语言的和标记可以在网页中创建表单 。 标记常用属性如下： Action属性：规定传递数据后，服务器向客户端传送的 网页。 Method属性：规定传递数据的方式。Post方式适合传 送大量数据，get方式适合传送少量数据。 Name属性：规定表单的名称。 本节待续 52 表单中的表单元素由标记创建，表单元素的类型由 标记的“type”属性决定。“type”属性的常见及取值如下。 text：表单元素是普通文本框。 password：表单元素是密码文本框。 checkbox：表单元素是多选项。 redio：表单元素是单选项。 submit：表单元素是提交按钮。 reset：表单元素是重置按钮。 3.2.6 表单 本节待续 53 实例（源代码） 一个用登录的界面 一个用登录的界面 请输入您的大名： 请输入登录密码： 3.2.6 表单 本节待续 54 实例（浏览结果） 3.2.6 表单 后续3.3节 55 3.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 网站与网页 56 3.3.1 FrontPage 2003基本功能 3.3.1 FrontPage 基本功能 1可视化网页制作功能 2网站建设功能 3网站的发布和维护 后续3.3.2节 57 3.3.2 FrontPage 2003应用程序窗 口 3.3.2 FrontPage 应用程序窗口 后续3.3.3节 58 3.3.3 网页中文字效果编排 3.3.3 网页中文字效果编排 制作静态网页实际上是一个技术问题，而在制作网页之前 ，应该有一个设计网页的工作要做。设计网页是一个艺术创作 过程，这不是这门课主要要解决的问题。本章只涉及怎么制作 网页的技术问题。 使用可视化的网页制作工具FrontPage 制作网页时，用户 的基本操作和使用Word 进行DOC文档的图、文、表混排操作 非常类似。因此，如果有Word 、Excel 应用基础的用户使用 FrontPage 制作网页在操作方面应该不会有太大的问题。 后续3.3.4节 59 3.3.4 网页中插入图像 3.3.4 网页中插入图像 1获得素材 2插入图像 3设置图像的属性 后续3.3.5节 60 3.3.5 网页中表格的处理 3.3.5 网页中表格的处理 1规划表格 2插入表格 3设置表格的属性 后续3.3.6节 61 3.3.6 建立超级链接 3.3.6 建立超级链接 1. 选定需要附着超级链接信息的对象（文字、图像 、动画均可）。 2. 单击右键展开快捷菜单 3. 执行“超链接”命令 4. 在系统给出的“创建超链接”对话框中设置超级链 接信息即可。 后续3.3.7节 62 3.3.7 网页中的表单 3.3.7 网页中的表单 1. 插入表单 2. 插入表单域 3. 插入文本 4.