网页的简单制作

《网页的简单制作》由会员分享，可在线阅读，更多相关《网页的简单制作（98页珍藏版）》请在金锄头文库上搜索。

1、第8章 网页制作,学习要点： HTML语言基本知识 JavaScript脚本语言,第8章 网页建立与维护,8.1 网页的建立,8.2 网页的制作语言,8.3 网页脚本语言JavaScript,退出,8.1.1 HTML 语言的结构,8.1.3 超文本链接指针,8.1.2 构成网页的基本元素,8.1.4在HTML文件中使用图像,8.1.6 表单的应用,8.1.5 框架结构的使用,8.1.7 HTML中的表格,8.1 网页的制作语言,返 回,HTML（超文本标记语言）是一种描述文档结构的标注语言，它使用一些约定的标记对WWW上的各种信息进行标注。当用户浏览WWW上的信息时，浏览器会自动解释这些标记

2、的含义，并按照一定的格式在屏幕上显示这些被标记的文件。HTML的优点是其跨平台性。即任何可以运行浏览器的计算机都能阅读并显示HTML文件，不管其操作系统是什么，并且显示结果相同。 HTML文件是标准的ASCII文件，且其后缀名为htm或html的文件。HTML文件看起来象是加入了许多被称为链接签（tag）的特殊字符串的普通文本文件。从结构上讲，HTML文件由元素（element）组成，组成HTML文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”， 即它有起始标记和结尾标记。元素的起始标记叫做起始链接签（start tag），元素结束标记叫做结尾链接签（end

3、tag），在起始链接签和结尾链接签中间的部分是元素体。 每一个元素都有名称和可选择的属性，元素的名称和属性都在起始链接签内标明。,8.1.1 HTML 语言的结构,下面来看一个HTML文件，它在浏览器中显示的结果如图8-15所示。, 武汉工业学院 这是一HTML的测试文件 ,标记用来给网页命名，网页的名称写在与标记之间，显示在浏览器的标题栏中。例如，在图8-15中所示的浏览器页面中，其标题栏所显示的“武汉工业学院”是在HTML文件中的由武汉工业学院所定义的。,8.1 2 构成网页的基本元素,1标记,到标题元素有6种，用于表示文章中的各种题目。字体大小到顺序减小。下面这个例子中分别使用了到的标题

4、。其HTML文件如下所示，在浏览器中的显示效果如图8-16所示。,2标记,源文件,3预格式化文本标记,源文件,HTML的输出是基于窗口的，因而HTML文件在输出时都是要重新排版的，即把文本上任何额外的的字符（如空格、制表符和回车符）都忽略，若确实不需要重新排版的内容，可以用通知浏览器。在图8-17和图8-18中显示了有无预格式化文本标记的对比。,4和标记,源文件,用于强制换行。 表示一个段落的开始。一般可不用。,5 标记,这几个标记都是用来修饰所包含文档的。标记使文本加粗；标记使文本倾斜；标记给文本加下划线；标记给文本加删除线；标记使文本字体加重。下面给出一个HTML源文件，其显示结果如图8-

5、19所示。,6标记,用来修改字体和颜色。其中COLOR属性指定文字颜色，颜色的表示可以用6位十六进制代码，如；SIZE属性指定相对尺寸。 另外， 如果用户想要设置网页的背景色和文字颜色，可以将标记扩充为： 其中各个元素的说明如表8-1所示，表8-2列出了一些常用颜色的RGB值。,超文本链接指针是HTML最吸引人的优点之一，可以这样说，如果没有超文本链接指针，就没有万维网。使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力，这更加符合人类的踊跃思维方式。超文本链接指针是指把并不连续的两段文字或两个文件联系起来。,8.1.3 超文本链接指针,1 统一资源定位器URL,统一资源定位器

6、（Uniform Resource Locator）是文件名的扩展。在单机系统中，如果要找一个文件，需要知道该文件所在的路径和文件名；在互连网上同样找一个文件，除了要知道以上内容之外，显然还需要知道该文件存放在哪个网络的哪台主机中才行。与单机系统不一样的是，在单机系统中所有的文件都由统一的操作系统来管理，因而不必给出访问该文件的方法；而在互连网上，每个网络，每台主机的操作系统都不一样，因此必须指定访问该文件的方法。一个URL包括了以上所有的信息。它的构成为： protocol:/ machine.name:portdirectoryfilename,2 建立一个链接,（1）链接到其它站点 在H

7、TML文件中用链接指针指向一个目标。其基本格式为： zzz 其中zzz可以是文字或图片并显示在网页中，当用户单击它时，浏览器就会显示由href属性中的统一资源定位器（URL）所指向的目标，实际上这个ZZZ在HTML文件中充当指针的角色，它一般显示为蓝色。href中的h表示超文本，而ref表示“访问”或“引用”的意思。例如： 武汉工业学院 用户用鼠标单击“武汉工业学院”，即可看到武汉工业学院的主页内容。在这个例子中， 充当指针的是“武汉工业学院”。,（2）同一个文件中的链接 超链可以指向自己的计算机中的某一个文件这种链接方式叫做本地链接。前面曾提到过一个超文本链接指针包括两个部分，一个指向目标的

8、链接指针，另一个是被指向的目标。 标识一个目标的方法为： . NAME属性将放置该标记的地方标记为“KKK”，KKK是一个全文唯一的标记串，和 之间的内容可有可无。这样，就把放置标记的地方做了一个叫做“KKK”的标记（如果对Microsoft Word很熟悉的话，这就相当于在Word中的定义“书签”）。做好标记后，可以用下列方法来指向它。 转向下一处 这时就可以点击“转向下一处”这段文字，浏览器就从标记名为KKK的部分开始显示此HTML文件的内容了。,8.1.4 在HTML文件中使用图像,1在HTML文件中显示图像,在浏览器上显示的图像必须有特定的格式，目前使用的浏览器通常支持GIF和JPEG

9、格式的图像。在HTML网页中加图像是通过标记实现的，它有几个较为重要的属性。其中： SRC属性：指明图形的URL地址； HEIGHT属性：决定图形的高度； WIDTH属性：决定图形的宽度； BORDER属性：决定边框线的宽度， 0-表示无边框； ALT属性：指明图像显示的备用文本；,源文件,2在HTML文件中利用图像建立链接,如果在链接标记和的中间放置一个标记，这个图像将会成为一个可击点，产生一个链接。例如： 当用户单击这个图像后，浏览器就会显示“default.asp”这个文件的内容了。,8.1.5 框架结构的使用,框架能够将页面分成数个独立变化的窗口，每个窗口可以显示不同的Web页面，并可

10、以不断更换显示的对象。使用框架结构，可以使屏幕的信息量增大，使Web网页更加吸引读者。有关框架内容的HTML语法为： 其中.中的内容显示在不支持分框的浏览器窗口中，因而这里指向一个普通版本的HTML文件，以便使用不支持分框浏览器的用户阅读。 分框由指定，并且可以嵌套，分区中各部分显示的内容用指定。 需要说明的是，frame是一个新出现的元素，许多浏览器不支持它。分框可以将窗口横向分成几个部分，也可以纵向分成几个部分，还可以混合分框。,框架结构标记可以嵌套，用以实现大框架中的小框架。它主要有两个属性：ROWS和COLS，它们可以将浏览器页面分为N行M列，当然也可以各自独立使用。下面来看一个框架结

11、构的例子。如图8-21，其HTML源文件如下所示。, 武汉工业学院 ,标记有以下主要属性： SRC属性 指定框架单元的URL源，如第6行中指出的是当前主机当前目录下的“a.htm”文件。即在此框中显示“a.htm”的内容。 NAME属性 为该框架单元起个标识名，主要用来为将来改变框架内容提供入口。 SCROLLING属性 设置框架是否使用滚动务。有YES、NO和AUTO三个值，分别表示强制使用滚动条，禁止使用滚动条和自动判断使用滚动条。,8.1.6 表单的应用,HTML提供的表单是用来将用户数据从浏览器传递给Web服务器的。例如可以利用表单建立一个录入界面，也可以利用表单对数据库进行查询。在这

12、里需要声明的是，表单的操作是与服务器进行交互的操作，而服务器端的操作是通过服务器端的程序来实现的。实现在服务器端的操作有许多种方式，其中ASP（动态服务网页）的方式就是一种，它可以通过ADO方式与多种数据库相连。 ASP（Active Server Page）程序是在服务器端工作，并且通过服务器端的编译动态地送出HTML文件给客户端，它负责处理HTML文件与运行在服务器端的程序之间的数据交换。当用户输入他们的信息（这个信息可以是查询条件，也可以是传送给服务器的某些内容）并提交给服务器后，便激活了一个ASP程序。该ASP程序又可以调用操作系统下的其他程序（例如数据库管理系统）完成读者的查询任务，

13、当操作系统下的程序完成查询之后，便把查询结果传给ASP，通过ASP传给Web服务器。由此可以看出，ASP程序在用户与服务器之间进行交互查询时所起的重要作用。,1. 什么是表单,HTML提供的表单是用来将用户数据从浏览器传递给Web服务器的。例如可以利用表单建立一个录入界面，也可以利用表单对数据库进行查询。在这里需要声明的是，表单的操作是与服务器进行交互的操作，而服务器端的操作是通过服务器端的程序来实现的。实现在服务器端的操作有许多种方式，其中ASP（动态服务网页）的方式就是一种，它可以通过ADO方式与多种数据库相连。 ASP（Active Server Page）程序是在服务器端工作，并且通过

14、服务器端的编译动态地送出HTML文件给客户端，它负责处理HTML文件与运行在服务器端的程序之间的数据交换。当用户输入他们的信息（这个信息可以是查询条件，也可以是传送给服务器的某些内容）并提交给服务器后，便激活了一个ASP程序。该ASP程序又可以调用操作系统下的其他程序（例如数据库管理系统）完成读者的查询任务，当操作系统下的程序完成查询之后，便把查询结果传给ASP，通过ASP传给Web服务器。由此可以看出，ASP程序在用户与服务器之间进行交互查询时所起的重要作用。,1. 什么是表单,表单就是为Internet网络用户在浏览器上建立一个交互接口，使Internet网络用户可以在这个接口上输入自己的

15、信息，然后使用提交按钮，将Internet网络用户的输入信息传送给Web服务器。 在HTML中，有一个专门的标记FORM提供表单的功能，由表单开始标记和表单结束标记组成，表单中可以设置文本框、按钮或下拉菜单，它们也是通过标记完成。在表单的开始标记中带有两个属性：ACTION和METHOD。书写表单的HTML格式如下 ,2. 表单的标记,FORM标记有以下主要属性： （1）ACTION属性是用来指出，当这个FORM提交后需要执行的驻留在Web服务器上的程序名（包括路径）是什么。一旦Internet网络用户提交输入信息后服务器便激活这个程序，完成某种任务。例如： 当用户点击“提交”按钮以后，Web

16、服务器上的“login.asp”将接收用户输入的信息，以登记用户信息。 （2）METHOD属性是用来说明从客户端浏览器将Internet网络用户输入的信息传送给Web服务器时所使用的方式，它有两种方式：POST和GET。默认的方式是GET，这两者的区别是在使用POST时，表单中所有的变量及其值都按一定的规律放入报文中，而不是附加在ACTION所设定的URL之后。在使用GET时将FORM的输入信息作为字符串附加在ACTION所设定的URL的后面，中间用“？”隔开，即在客户端浏览器的地址栏中可以直接看见这些内容。,2. 表单的标记,HTML中的INPUT标记是表单中最常用的标记。我们在网页上所见到的文本框、按钮等等都由这个标记引出的。下面是INPUT标记的标准格式： 其中TYPE属性是用来说明提供给用户进行信息输入的类型是什么。例如是文本框、单选按钮或多选按钮。它的取值如下： TYPE = “TEXT” 表示在表单中使用单行文本框 = “PASSWORD” 表示在表单中为用户提供密码输入框