华东理工大学动态网页设计第1章

第1章网页制作基础使用浏览器上网时，你看到的一幅幅精彩画面，一般都是由服务器发送给浏览器，并由浏览器解释的HTML文档。那么，HTML文档中有哪些内容，它们的格式是怎么样的，这是本章要向读者介绍的内容，它也是学习以后各章内容的基础。本章内容主要包括：Internet及Web的概念超文本标记语言常用的主页制作工具通过这一章的学习，要求读者：了解Internet及Web的概念；熟悉HTML文档格式和常用标签；了解常用的主页制作工具。1.1Internet信息服务1.1.1Internet简介Internet(因特网)是一个通过网络设备把世界各国的计算机相互连接在一起的计算机网络，在Internet上，人们可以利用任何两台支持TCP/IP网络协议的计算机进行通信。所谓协议是指计算机通信所使用的语言和规则。Internet还支持多种流行的程序，包括WorldWideWeb。WorldWideWeb(万维网)是在因特网上运行的全球性分布式信息系统，它是一个抽象的信息场所，在这个场所中，包含了几十乃至几百万台通过超文本传输协议（HTTP）提供信息服务的Web服务器，当用户使用浏览器向这些服务器发出请求时，服务器将把响应信息发送给浏览器，最后由浏览器解释并显示。你正在使用的计算机可能是一台Web服务器，也可能是一台安装有浏览器的普通计算机，这取决于这台计算机中安装了什么程序，以及这台计算机接入到Internet的接入方式，如果你的计算机不能让其它人访问，那么就不能成为真正的Web服务器。即使这样，你还是可以在计算机上安装一个称为个人Web服务器的程序来运行本教材中的所有实例。VBScript+ASP动态网页制作•2•FTP(FileTransferProtocol文件传输协议)，用于将文本、二进制文件和图形从一台计算机传输到另一台计算机，有了它，你可以将编写好的网页传送到能被其它用户访问的Web服务器上。HTTP(HyperTextTransmissionProtocol超文本传输协议)用于定义在Web浏览器和Web服务器之间如何传送数据。在服务器向客户机传送文档之前，客户机和服务器间需要建立TCP连接，之后才发送HTTP请求信息，服务器接收到请求之后就给Web浏览器回送一个HTTP响应信息，最后服务器断开TCP连接。HTTP协议主要用于定义信息的格式。1.1.2Web出版把一些文字、图片、声音等内容组织成一个或多个Web文档，放置在Web服务器上，供用户在能与该服务器相连的机器上访问，这一过程称为Web出版。Web出版的方式主要有两种，一种是建立一个独立的Web服务器，这需要较高的代价，另一种是在其它服务器上开辟一个空间，通过链接的形式来访问你的Web页。幸运的是，现在有许多站点（像网易、首都在线等）提供免费空间供大家建立网页。1.2超文本标记语言当用户阅读一般文本文件时，一旦遇到不是很清楚的内容，就需要另外打开其它文件，或翻转到本文件的其它位置查看，查看完成后可能已经忘记应该回到哪里继续阅读了，这样给阅读带来很大的不便。为此，我们很希望有一种方法能在需要时自动转到相关内容，并方便地返回。超文本就是为此而设计的。一般把通过在文本中插入链接把相关文本组织在一起而形成的文档称为超文本(hypertext)。通常超文本使用超文本标记语言来描述。超文本标记语言(HyperTextMakeupLanguage，简称HTML)是一种用来创作万维网页面的描述语言，它使用HTML标签来定义文档的格式、组成和链接关系，供浏览器解释执行。所谓HTML标签，由3部分组成：左尖括号“＜”，“标签名称”，和右尖括号“＞”。标签通常是成对出现的，分别称为“开始标签”和“结束标签”，结束标签的左尖括号后加一个斜杠符号“/”。在各种HTML标签中，常常还可以定义一些属性，这些属性用于指出文档元素的一些特性，如背景颜色、字体大小、对齐方式等，指定文档元素属性的附加信息一般放在相应的“开始标签”中。由于HTML文档是一种没有格式的文档，也称为ASCII文件。因此，HTML文档可以使用任何一种文本编辑器来编写，如记事本、写字板和WORD等。1.2.1第一个HTML文档让我们先来看一个例子。【例1-1】一个简单Web页第1章网页制作基础•3•HTMLHEADTITLE我的第一个WEB页/TITLE/HEADBODYBGCOLOR=WHITE正文内容写在这里....../BODY/HTML将上述代码用文本编辑器或其他专门的主页制作软件输入并保存为一个扩展名为htm或html的文件后，在文件夹窗口双击该文件图标，就可看到如图1-1所示的结果。图1-1一个简单的Web页从例出可以看出，一个HTML文档的一般结构如下：1.一般形式HTMLHEAD头部/HEADBODY主体部分/BODY/HTML2.说明：HTML…/HTML开始和结束标签HEAD…/HEAD头部信息，可以包含标题(TITLE)，媒体环境(META)等说明信息,客户端脚本也可放在这一部分。VBScript+ASP动态网页制作•4•BODY…/BODY网页主体部分。它也有一些属性，形式为：BODYBGCOLOR=#rrggbbtext=#rrggbblink=#rrggbbalink=#rrggbbvlink=#rrggbb其中：BGCOLOR背景颜色text非链接文字的颜色link链接文字的颜色alink正被点击的链接文字的颜色vlink已经点击(访问)过的链接文字的颜色如果要使用背景图像，语法为：BODYbackground=“图片文件名”在HTML文档中，不区分英文字母的大小写，对于标签中的属性值，一般可以不加引号，只有当属性值中包含空格或一些其它符号时，引号才是必须的。3.调试HTML代码总有一些时候会忘了输入某些代码或敲错某些代码，这时Web页可能会变得非常滑稽。通过反复的浏览，比较出现的效果与预想效果的不同点，从中发现存在的错误，这一过程称为调试。对于web页的调试没有多少技巧可言。但要强调的一点是，应该仔细地观察显示的结果或系统给出的错误信息，从中判断出可能错在哪里，再去检查文件的内容，而不是在没有看清出了什么错误前就急着查文件内容，这样往往很难快速找到错误的位置。常见的错误有标签名称书写错误、标签的属性书写错误、结束标签遗忘或书写错误等。如例1-1第3行中若结束位置的/title遗忘了或写成title，则其后的内容将显示在窗口的标题栏。只要仔细观察显示结果，不难发现其中的错误。1.2.2文字修饰与布局1.修饰方法(1)标题文字(Header)有时，希望将某些文字显示成像文章中的标题一样，这时，可使用H标签，形式如下：Hn作为标题的文字/Hn其中n为1到6的数字，根据n的大小不同，将显示出不同大小的黑体字。H1最大，H6最小。标题文字独立占一行，不受段落标记的影响。(2)文字大小(FONTSIZE)形式：FONTSIZE=n需显示成n号大小的文字/FONT其中：n=1,2,3…7。SIZE的默认大小为3，在此基础上，可以用-2，-1，0，+1，+2，+3或+4代替n。另外，可以用BASEFONTSIZE=n指出缺省字符大小，用BIG或SMALL来指出字符相对于周围字符的大小。(3)文字颜色(FONTCOLOR)第1章网页制作基础•5•形式：FONTCOLOR=#rrggbb需显示成指定颜色的文字/FONT其中：rrggbb为16进制值，表示组成颜色的RGB三原色的对比关系，对常用的颜色，可以使用名称来代替式中的“#rrggbb”，对应关系为：Black(000000),Olive(008080),Red(ff0000),Blue(0000FF),Maroon(800000),Navy(000080),Gray(808080),Lime(00ff00),Fuchsiz(ff00ff),White(ffffff),Green(008000),Purple(800080),Silver(C0C0C0),Yellow(ffff00),Aqua(00ffff)。(4)定义字体(FONTFACE)：形式：FONTFACE=“字体”需显示成指定字体的文字/FONT其中：字体为Arial、Times、Msseriers、宋体、楷体等。值得注意的是，在浏览器上是否能显示所设置的字体取决于浏览器所在的机器中是否安装了相应的字体。以上三种文字的修饰方法有一个共同点就是都使用相同的标签FONT把要修饰的文字括起来，再用该标签的SIZE属性设置文字大小，用COLOR属性设置文字的颜色，用FACE属性设置文字的字体。当需要同时设置文字大小和颜色时，应把它放在同一个标签中，例如，要用6号大小红色显示“动态网页”这几个字时，应使用如下形式：FONTSIZE=6COLOR=Red动态网页/FONT(5)标记文字：对于文字还有一些常用的修饰，即加粗、斜体和加下划线。对此，HTML中设计了独立的标签，使用形式如下：B需要加粗的文字/BI需要显示成斜体的文字/IU需要添加下划线的文字/U以上三个标签可重叠作用。如：B动态U网页/BI制作/I/U，将使“动态”两字加粗显示，“网页”两字加粗并加下划线，“制作”两字显示成斜体并加下划线。另外还有一些标签如：STRONG、EM、STRIKE和BLINK等，但这些标签不一定被所有浏览器所支持。【例1-2】文字的修饰HTMLHEADTITLE文字的修饰/TITLE/HEADBODYH1这是标题字体H1/H1H6这是标题字体H6/H6PFONTSIZE=5FACE=楷体这是大小为BIG5SMALL的楷体字/FONTP本教材讨论的是：B动态U网页/BI制作/I/UPFONTCOLOR=#ff0000这是红色的文字/FONT/BODYVBScript+ASP动态网页制作•6•/HTML本例中的代码，浏览时显示结果如图1-2所示。图1-2文字修饰2.文字布局(1)段落P段落是文档的基本单位，在HTML中可以使用P标签来指定文档中具有独立意义的段落，通过设置段落标签的某些属性可以控制段落的对齐方式。浏览器在显示时，一个段落的前后将留有较大的空隙，也可以说相当于有一个空行。(2)换行BR一个段落中可以包含多个行，可以使用BR标签来强制文字换行。一般情况行与行之间的间隔比段与段之间的间隔要小。注意：如果不使用段落标签指出从哪里开始新的一段或一行，那么显示时文本就会连成一整块，而不管你在文本中输入了多少个回车符。一般情况根据浏览器窗口的宽度，当一行太长时，会自动换行。(3)文字对齐可以以段落为单位设置文字的对齐方式，形式如下：PALIGN=对齐方式需要按照给定方式对齐的文字/P第1章网页制作基础•7•其中：对齐方式有left、center和right，分别表示左对齐、居中对齐和右对齐。默认为left表示左对齐。标题文字也有相应的属性，使用形式为：HnALIGN=对齐方式需要按照给定方式对齐的标题文字/H如果需要将文字或其它对象居中对齐，也可以使用center标签，形式如下：center要居中的文字或对象/center注意：标题不能作为段落的一部分，也不受段落标记的影响。(4)预格式化文本当需要按照输入时的格式来控制换行时，可以使用预格式化文本标签PRE，使用形式如下：PRE这里是多行文本/PRE注意：用这一标识符标识的文本不能随浏览器窗口的宽度大小而自动换行，这在低分辨率显示器上使用是很不方便的。1.2.3加入其它网页元素网页中除了一般的文字外，通常还有一些其它对象，如线条、图片、表格等。要在HTML中插入各种对象，通常需要指出