大学计算机基础 第9章

第 九 章网 页 制 作 大学IT目 录上一页下一页结 束第九章 网页制作9.1 HTML简介 9.2 FrontPage 2003概述 9.3 网页制作 9.4 网页布局 9.5 创建表单页面 9.6 网页的发布 Date2大学IT目 录上一页下一页结 束9.1 HTML简介HTML即Hypertext Markup Language的缩写。 它使用一些约定的标记（Tag）对文本进行标注，定义 网页的数据格式，描述Web页中的信息，控制文本的显示。我们把用HTML语言编写的文件称为HTML文件 。它通常被存储在Web服务器上，客户端通过浏览器向 Web服务器发出请求，服务器响应请求并将HTML文件发送给浏览器，然后由浏览器对文件中的标记作出相应 的解释，以页面的形式呈现在用户屏幕上。因此，我们 又把HTML文档称为网页 (Web Page)。Date3大学IT目 录上一页下一页结 束9.1 HTML简介HTML语言是一种标记语言，简单易学。用 HTML语言编写的网页实际上是一种文本文件， 它以.htm或.html为扩展名，我们可以使用任何 文本处理软件（例如：记事本）编写。9.1.1 HTML语言概述9.1.2 HTML语言的基本语法返 回Date4大学IT目 录上一页下一页结 束9.1.1 HTML语言概述 HTML语言是由世界性的标准化组织W3C（World Wide Web Consortium）制定的，通过浏览http:/www.w3.org可以了解到HTML标准的最新动态。下面介绍HTML文件的基本构成和HTML文件的层次结构。 Date5大学IT目 录上一页下一页结 束1. HTML文件的基本构成Internet中的每一个HTML文件都包括文本 内容和HTML标记两部分。其中，HTML标记负 责控制文本显示的外观和版式，并为浏览器指定 各种链接的图像、声音和其他对象的位置。多数 HTML标记的书写格式如下： 文本内容标记名写在“”内。多数HTML标记同时 具有起始和结束标记，并且成对出现，但也有些 HTML标记没有结束标记。另外，HTML标记不 区分大小写。HTML文件的基本构成Date6大学IT目 录上一页下一页结 束某些HTML标记还具有一些属性，这些属性指定对象的特性，如背景颜色、文本字体及大小 、对齐方式等。属性一般放在“起始标记”中，格式如下：文本内容 其中标记名和属性之间用空格分隔。如果标记有多种属性，属性之间也要用空格分隔。 HTML文件的基本构成Date7大学IT目 录上一页下一页结 束2. HTML网页的结构现在我们先看一个简单的HTML文件，从中体会用 HTML语言编写网页时的层次结构。【例9-1】用HTML语言编写一个简单的网页。我的第一个Web页欢迎进入HTML世界！ 这里我们首先介绍HTML语言的基 本知识和语法。然后，讲授如何使用HTML语 言编写您的Web页面。Date8大学IT目 录上一页下一页结 束HTML语言概述将上述代码用文本编辑器编辑并保存为一 个扩展名为.htm的文件，双击该文件图标，在浏 览器中看到如下图所示的结果。图9-1Date9大学IT目 录上一页下一页结 束从上例可以看出，一般HTML文件都是以 开头，以结束。其文件结构由以 下两部分组成： 1）头部（Head）HTML文件的头部由和标 记定义。通常情况下，文件的标题、语言字符 集信息等都放在头部信息中。最常用到的标记 是，它用于定义网页文件的标题 ，当该网页文件被打开后，网页文件的标题将 出现在浏览器的标题栏中。Date10大学IT目 录上一页下一页结 束文件结构2）正文主体（Body）正文主体是HTML文件的核心内容，由和 标记定义。标记具有一些常用的属性 ，格式如下：其中，bgcolor为背景颜色，color为文本颜色。n 为六位十六进制数。如果网页使用背景图像，格式如下：HTML对格式的要求并不严格，当HTML文件被 浏览器扫描时，所有包含在文件中的空格、回车等均 被忽略。因此你可以将一行写成两行或多行，在浏览 器中结果是相同的。 返 回Date11大学IT目 录上一页下一页结 束9.1.2 HTML语言的基本语法1. 文本布局1）段落标记 标记指定文档中一个独立的段 落。通过设置align属性，控制段落的对齐方式， 其值可以是left、center、right、justify，分别表 示左对齐、居中、右对齐和两端对齐，默认值为 左对齐。 使用格式如下： 2）换行标记 标记可以强制文本换行。该标记只 有起始标记。 3）水平线标记 水平线标记用于在网页中插入一条 水平线。Date12大学IT目 录上一页下一页结 束2. 文字格式HTML语言中用于文字格式化的标记有：1）标题标记 格式为： 标题文字内容 其中n说明大小级别，取值范围为1到6的数字 。把标题分为 6级，即h1h6，其中h1文字最大， h6文字最小。Date13大学IT目 录上一页下一页结 束2）字体标记字体标记用来对文字格式进行设置，主要 具有以下属性：（1）size属性：用来控制文字的大小，格 式如下： 其中n的取值范围为17的数字，默认值为 3。标记和标记都可以控制文字的 大小。一般情况下，文章的标题最好由标记控 制，而其余的文字由标记控制。相比较而言， 对字体的控制更加灵活。（2）color属性：用来控制文字的颜色，格 式如下：其中n是一个十六进制的六位数。 （3）face属性：用来指明文字使用的字体， 格式如下： 其中字体名的选择由Windows操作系统安装的字体决 定。如：宋体、楷体_GB2312、Times New Roman、 Arial等。文字格式Date14大学IT目 录上一页下一页结 束3）字形标记字形标记用于设置文字的粗体、斜体、下 划线、上标、下标等。标记格式字形结果粗体斜体下划线上标下标文字格式Date15大学IT目 录上一页下一页结 束3. 插入图片标记将图片插入网页中，用于设置图片的大小 以及相邻文字的排列方式。该标记具有以下属性： （1）src属性：指明图片文件所在的位置。格式如下：其中URL指图片文件存放的位置。 （2）alt属性：图片的文字说明，当鼠标指针指向图片 时，该图片的说明性文字弹出。格式如下：（3）width和height属性：设置图片显示区域的宽度和 高度。格式如下：其中width和height属性的取值n1和n2，可以是像素数 或百分比。Date16大学IT目 录上一页下一页结 束（4）border属性：设置图片文件的边框。 格式如下：其中n为像素数。（5）align属性：设置图片相对于文本的位 置关系。格式为：对齐方式可以是：top（顶端对齐）、 middle（相对垂直居中）、bottom（相对底边 对齐）、left（左对齐）、right（右对齐）、 texttop（文本上方）等。插入图片Date17大学IT目 录上一页下一页结 束4. 插入超链接在HTML语言中，和标记用于设置网 页中的超链接，href属性指明被超链接的文件地址 。格式如下：超链接文本用于表示超链接的文本一般显示为蓝色并且 加下划线。在浏览器中，当鼠标指针指向该文本时 ，箭头变为手形，并在浏览器的状态栏中显示该超 链接的地址。若使用图片做超链接，可使用如下格式完成 ：Date18大学IT目 录上一页下一页结 束5. 使用表格在网页中插入一个表格，需要用到一组 HTML标记。定义表格的有关标记如下： 定义表格区域。 定义表格标题。 定义表格头。 定义表格行。 定义表格单元格。返 回Date19大学IT目 录上一页下一页结 束常用的标记属性中，border属性用于 设置表格边框的宽度；width、height属 性用于设置表格或单元格的宽度、高度 ；cellspacing和cellpadding属性分别用于 设置单元格之间的间隙和单元格内部空 白；align属性用于设置表格或单元格的 对齐方式；bgcolor和background属性分 别用于设置表格的背景颜色和背景图像。表格属性Date20大学IT目 录上一页下一页结 束9.2 FrontPage 2003概述虽然使用一般的文本编辑器就可以编写 HTML文档，但是使用专门的HTML编辑器或 Web创作工具往往更加方便。具有“所见即所得” 功能的Web页面创作工具可以使Web创作人员直 接面对Web页面进行编辑修改，并且能立即看到 Web页面的显示效果。FrontPage 2003是微软公司开发的网页制作 和网站管理工具，它是Microsoft Office 2003的组 件之一，与Office的其他组件高度融合，界面友 好，功能强大，易学易用，是目前使用较为广泛 的网页制作、网站管理工具之一。Date21大学IT目 录上一页下一页结 束9.2 FrontPage 2003概述9.2.1 FrontPage 2003的主要功能 9.2.2 FrontPage 2003的启动与退出 9.2.3 网页与网站 9.2.4 FrontPage 2003的网页视图模式 9.2.5 FrontPage 2003中的视图返 回Date22大学IT目 录上一页下一页结 束9.2.1 FrontPage 2003的主要功能FrontPage 2003的主要功能是制作网页和管理站点。使用FrontPage 2003可以创建新的网页，也可以打开并修改已经存在的网页。FrontPage 2003提供了多种编辑网页的方式，不但可以直接修改HTML，而且可以采用“所见即所得”的方式编辑网页，还可以使用菜单命令插入各种网页元素，使用对话框修改其属性，十分灵活。返 回Date23大学IT目 录上一页下一页结 束在FrontPage 2003中，可以很容易地插入文本、图片、表格、组件等元素；可以使用主题和样式表、共享边框、框架等管理网页的外观；还可以使用表单等元素设计出交互式网页。FrontPage 2003提供了强大的站点管理功能。一组相关网页和有关文件组成一个站点，站 点也是FrontPage 2003对网站进行管理的基本单位。在FrontPage 2003中可以轻松实现设计、管理、分析、发布和维护站点等工作。FrontPage 2003的主要功能Date24大学IT目 录上一页下一页结 束9.2.3 网页与网站网页是全球广域网上的基本文档，用HTML书写，通常以.htm或.html为扩展名。网页可以独立存在，但常常作为网站的一部分。网站是一组相关网页和有关文件的组合，一般有一个特殊的网页作为浏览的起始点，称为主页（ Homepage），用来引导用户访问其他网页。网站通常位于Web服务器上，客户机通过网络向Web服务器发送请求，Web服务器响应客户机的请求，并使用HTTP协议将网页和有关文件通过网络传送回客户机，客户机端使用网页浏览器就能看到网页的内容了。Date25大学IT目 录上一页下一页结 束网页与网站在FrontPage 2003中，可以建立和编辑独立的网页，也可以设计和管理站点。在站点中可以包含大量网 页和各种文件，甚至可以包含子站点，而且只有在使 用站点时，FrontPage 2003的许多特性才有效。通常，在FrontPage 2003中建立的站点需要发布到 Internet中的Web服务器上，成为真正意义上的网站， Internet上的用户才能访问。有时，可以在同一台计算机上 安装Web服务器端软件，从而将站点发布到本机进行测试。用FrontPage 2003也可以建立基于本地硬盘的站点，这种站点以本机文件夹的形式存在，不需要发布到服务器，这 时