计算机幻灯片第9章

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