网页的简单制作.

第8章网页制作学习要点：•HTML语言基本知识•JavaScript脚本语言第8章网页建立与维护8.1网页的建立8.2网页的制作语言8.3网页脚本语言——JavaScript退出8.1.1HTML语言的结构8.1.3超文本链接指针8.1.2构成网页的基本元素8.1.4在HTML文件中使用图像8.1.6表单的应用8.1.5框架结构的使用8.1.7HTML中的表格8.1网页的制作语言返回HTML（超文本标记语言）是一种描述文档结构的标注语言，它使用一些约定的标记对上的各种信息进行标注。当用户浏览上的信息时，浏览器会自动解释这些标记的含义，并按照一定的格式在屏幕上显示这些被标记的文件。HTML的优点是其跨平台性。即任何可以运行浏览器的计算机都能阅读并显示HTML文件，不管其操作系统是什么，并且显示结果相同。HTML文件是标准的ASCII文件，且其后缀名为htm或html的文件。HTML文件看起来象是加入了许多被称为链接签（tag）的特殊字符串的普通文本文件。从结构上讲，HTML文件由元素（element）组成，组成HTML文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”，即它有起始标记和结尾标记。元素的起始标记叫做起始链接签（starttag），元素结束标记叫做结尾链接签（endtag），在起始链接签和结尾链接签中间的部分是元素体。每一个元素都有名称和可选择的属性，元素的名称和属性都在起始链接签内标明。8.1.1HTML语言的结构下面来看一个HTML文件，它在浏览器中显示的结果如图8-15所示。HTMLHEADTITLE武汉工业学院/TITLE/HEADBODYbgcolor=yellowP这是一HTML的测试文件/P/BODY/HTMLTITLE标记用来给网页命名，网页的名称写在TITLE与/TITLE标记之间，显示在浏览器的标题栏中。例如，在图8-15中所示的浏览器页面中，其标题栏所显示的“武汉工业学院”是在HTML文件中的由TITLE武汉工业学院/TITLE所定义的。8.12构成网页的基本元素1．TITLE标记H1…/H1到H6…/H6标题元素有6种，用于表示文章中的各种题目。字体大小H1到H6顺序减小。下面这个例子中分别使用了H1到H6的标题。其HTML文件如下所示，在浏览器中的显示效果如图8-16所示。2．Hn标记源文件3．预格式化文本标记pre源文件HTML的输出是基于窗口的，因而HTML文件在输出时都是要重新排版的，即把文本上任何额外的的字符（如空格、制表符和回车符）都忽略，若确实不需要重新排版的内容，可以用pre…／pre通知浏览器。在图8-17和图8-18中显示了有无预格式化文本标记pre的对比。4．BR和P标记源文件BR用于强制换行。P表示一个段落的开始。/P一般可不用。5．BIUSTRONGS标记这几个标记都是用来修饰所包含文档的。B标记使文本加粗；I标记使文本倾斜；U标记给文本加下划线；S标记给文本加删除线；STRONG标记使文本字体加重。下面给出一个HTML源文件，其显示结果如图8-19所示。6．FONT标记FONT…/FONT用来修改字体和颜色。其中COLOR属性指定文字颜色，颜色的表示可以用6位十六进制代码，如FONTCOLOR=#00FF00；SIZE属性指定相对尺寸。另外，如果用户想要设置网页的背景色和文字颜色，可以将BODY标记扩充为：BODYbgcolor=#text=#link=#alink=#vlink=#background=”imageURL”其中各个元素的说明如表8-1所示，表8-2列出了一些常用颜色的RGB值。标记说明Bgcolor设置网页背景颜色Text设置网页非可链接文字的颜色Link设置网页可链接文字的颜色Alink设置网页正被点击的可链接文字的颜色Vlink设置网页已经点击的可链接文字的颜色Background设置网页背景图案ImageURL设置网页背景图案的URL地址#代表颜色RGB值（格式为rrggbb）。它是用16进制的红-绿-蓝（red-green-blue，RGB）值来表示。各种常见的颜色的RGB值如表9-2所示。颜色RGB颜色RGB黑色（Black）000000橄榄色（Olive）808000红色（Red）FF0000深表色（Teal）008080绿色（Green）008000灰色（Gray）808080蓝色（Blue）0000FF深蓝色（Navy）000080白色（White）FFFFFF浅绿色（Lime）00FF00黄色（Yellow）FFFF00紫红色（Fuchsia）FF00FF银色（Silver）C0C0C0紫色（Purple）800080浅色（Aqua）00FFFF茶色（Maroon）800000超文本链接指针是HTML最吸引人的优点之一，可以这样说，如果没有超文本链接指针，就没有万维网。使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力，这更加符合人类的踊跃思维方式。超文本链接指针是指把并不连续的两段文字或两个文件联系起来。8.1.3超文本链接指针1．统一资源定位器URL统一资源定位器（UniformResourceLocator）是文件名的扩展。在单机系统中，如果要找一个文件，需要知道该文件所在的路径和文件名；在互连网上同样找一个文件，除了要知道以上内容之外，显然还需要知道该文件存放在哪个网络的哪台主机中才行。与单机系统不一样的是，在单机系统中所有的文件都由统一的操作系统来管理，因而不必给出访问该文件的方法；而在互连网上，每个网络，每台主机的操作系统都不一样，因此必须指定访问该文件的方法。一个URL包括了以上所有的信息。它的构成为：protocol://machine.name[:port]／directory／filename2．建立一个链接（1）链接到其它站点在HTML文件中用链接指针指向一个目标。其基本格式为：ahref=…zzz/a其中zzz可以是文字或图片并显示在网页中，当用户单击它时，浏览器就会显示由href属性中的统一资源定位器（URL）所指向的目标，实际上这个ZZZ在HTML文件中充当指针的角色，它一般显示为蓝色。href中的h表示超文本，而ref表示“访问”或“引用”的意思。例如：ahref=武汉工业学院/a用户用鼠标单击“武汉工业学院”，即可看到武汉工业学院的主页内容。在这个例子中，充当指针的是“武汉工业学院”。（2）同一个文件中的链接超链可以指向自己的计算机中的某一个文件这种链接方式叫做本地链接。前面曾提到过一个超文本链接指针包括两个部分，一个指向目标的链接指针，另一个是被指向的目标。标识一个目标的方法为：ANAME=KKK…….／ANAME属性将放置该标记的地方标记为“KKK”，KKK是一个全文唯一的标记串，A和/A之间的内容可有可无。这样，就把放置标记的地方做了一个叫做“KKK”的标记（如果对MicrosoftWord很熟悉的话，这就相当于在Word中的定义“书签”）。做好标记后，可以用下列方法来指向它。ahref=#KKK转向下一处/a这时就可以点击“转向下一处”这段文字，浏览器就从标记名为KKK的部分开始显示此HTML文件的内容了。8.1.4在HTML文件中使用图像1．在HTML文件中显示图像在浏览器上显示的图像必须有特定的格式，目前使用的浏览器通常支持GIF和JPEG格式的图像。在HTML网页中加图像是通过IMG标记实现的，它有几个较为重要的属性。其中：SRC属性：指明图形的URL地址；HEIGHT属性：决定图形的高度；WIDTH属性：决定图形的宽度；BORDER属性：决定边框线的宽度，0-表示无边框；ALT属性：指明图像显示的备用文本；源文件2．在HTML文件中利用图像建立链接如果在链接标记A和/A的中间放置一个IMG标记，这个图像将会成为一个可击点，产生一个链接。例如：AHREF=”default.asp”IMGSRC=”images/center1.gif”ALIGN=LEFT/A当用户单击这个图像后，浏览器就会显示“default.asp”这个文件的内容了。8.1.5框架结构的使用框架能够将页面分成数个独立变化的窗口，每个窗口可以显示不同的Web页面，并可以不断更换显示的对象。使用框架结构，可以使屏幕的信息量增大，使Web网页更加吸引读者。有关框架内容的HTML语法为：FRAMESETNOFRAMES…/NOFRAMESFRAMESRC=”URL”…/FRAMESET其中noframes.../noframes中的内容显示在不支持分框的浏览器窗口中，因而这里指向一个普通版本的HTML文件，以便使用不支持分框浏览器的用户阅读。分框由frameset指定，并且可以嵌套，分区中各部分显示的内容用frame指定。需要说明的是，frame是一个新出现的元素，许多浏览器不支持它。分框可以将窗口横向分成几个部分，也可以纵向分成几个部分，还可以混合分框。框架结构标记可以嵌套，用以实现大框架中的小框架。它主要有两个属性：ROWS和COLS，它们可以将浏览器页面分为N行M列，当然也可以各自独立使用。下面来看一个框架结构的例子。如图8-21，其HTML源文件如下所示。htmlheadtitle武汉工业学院/titleframesetcols=*,140framesetrows=*,80framesrc=a.htmname=f1framesrc=b.htmname=f2scrolling=no/framesetframesetrows=*,80framesrc=c.htmname=f3framesrc=d.htmname=f4/frameset/frameset/headframe标记有以下主要属性：SRC属性指定框架单元的URL源，如第6行中指出的是当前主机当前目录下的“a.htm”文件。即在此框中显示“a.htm”的内容。NAME属性为该框架单元起个标识名，主要用来为将来改变框架内容提供入口。SCROLLING属性设置框架是否使用滚动务。有YES、NO和AUTO三个值，分别表示强制使用滚动条，禁止使用滚动条和自动判断使用滚动条。8.1.6表单的应用HTML提供的表单是用来将用户数据从浏览器传递给Web服务器的。例如可以利用表单建立一个录入界面，也可以利用表单对数据库进行查询。在这里需要声明的是，表单的操作是与服务器进行交互的操作，而服务器端的操作是通过服务器端的程序来实现的。实现在服务器端的操作有许多种方式，其中ASP（动态服务网页）的方式就是一种，它可以通过ADO方式与多种数据库相连。ASP（ActiveServerPage）程序是在服务器端工作，并且通过服务器端的编译动态地送出HTML文件给客户端，它负责处理HTML文件与运行在服务器端的程序之间的数据交换。当用户输入他们的信息（这个信息可以是查询条件，也可以是传送给服务器的某些内容）并提交给服务器后，便激活了一个ASP程序。该ASP程序又可以调用操作系统下的其他程序（例如数据库管理系统）完成读者的查询任务，当操作系统下的程序完成查询之后，便把查询结果传给ASP，通过ASP传给Web服务器。由此可以看出，ASP程序在用户与服务器之间进行交互查询时所起的重要作用。1.什么是表单HTML提供的表单是用来将用户数据从浏览器传递给Web服务器的。例如可以利用表单建立一个录入界面，也可以利用表单对数据库进行查询。在这里需要声明的是，表单的操作是与服务器进行交互的操作，而服务器端的操作是通过服务器端的程序来实