《计算机网络基础与Internet应用》电子教案第8章.ppt

《《计算机网络基础与Internet应用》电子教案第8章.ppt》由会员分享，可在线阅读，更多相关《《计算机网络基础与Internet应用》电子教案第8章.ppt（116页珍藏版）》请在三一办公上搜索。

1、第8章 网页建立与维护,学习要点：如何建立个人网站 HTML语言基本知识 JavaScript脚本语言,第8章 网页建立与维护,8.1 网页的建立,8.2 网页的制作语言,8.3 网页脚本语言JavaScript,退出,8.1 网页的建立,8.1.1 什么是网页,8.1.2 免费网页空间的申请,返 回,8.1.3 上传个人网页,8.1.4 网站的宣传,制做一个网站有以下主要步骤,4、登记搜索引擎。为自己所做的网站进行宣传，让广大的Internet网络用户能够知道你的存在，否则你所做的网站就毫无意义，因为别人无法知道你的网页。,1、首先在Internet网上申请网站的主页空间和域名。在很多门户网

2、站都提供免费的服务，但代价是要在你的主页上留有该网站的广告。如果你是为一个企业做的网站，最好不要用这种免费的空间，因为它必竟不能保障你所做的网站的安全。,2、然后在自己的计算机上设计出网页。可以利用一些网页的制作工具。如：网页编辑软件FontPage 2000；图片处理软件，如PhotoShop；动画的制作软件，如Flash等等。,3、通过FTP（文件传输）软件，将网页、有关的图片文件、动画文件以及相关其它文件传到网上。,8.1.1 什么是网页,网页的学名称作HTML文件，是一种可以在WWW网上传输，并被浏览器认识和翻译成页面显示出来的文件。WWW是“World Wide Web”的缩写；HT

3、ML的意思则是“Hypertext Markup Language”，中文翻译为“超文本标注语言”。“超文本”就是指页面内可以包含图片、链接、甚至音乐、程序等非文字的元素。一般，一个网站是由很多的Web网页组成，其中有一个比较特殊的Web网页，它是当Internet网络用户访问这个网站时所显示的第一个Web网页，称作主页（Homepage 或Home Page）。,要想设计出好的网站，就要对网站有很好的规划。,（1）所制作的网站内容要有自己的特点。这里所说的特点指的是网站的内容要有新意，否则所制作的站点将会淹没在茫茫的Internet大海里。（2）所制作的网站一定要便于维护和更新。因为如果网站

4、发布到网上，Internet网络用户第一次浏览觉得还有新鲜感，过了一段时间再次访问此网站，而网站毫无变化，此网站就会因此而失去吸引力。（3）在Web页面上的颜色搭配，美术效果等等一定要合理。有些初学者所制做的网页采用深色背景和浅色文字，但由于网速的原因，在深色的背景还没有调入时，浅色的文字往往非常难以辩认。,在Web网页的设计过程中有许许多多的技巧。下面简单介绍几点：,（1）在制做的每一个Web网页上都应加上一个“返回主页”的超级链接，这样能使Web网页构成一个环路。（2）在制作Web网页时，一个Web网页最好不要过长。如果某一个Web网页内容很多，最好把它们分成多个，这样做的好处是不致于使W

5、eb网页由于网络速度的问题，而影响用户的浏览。（3）在Web网页上适当地使用一些动画，增加网页的动感和趣味。（4）在主页上还应加上一个计数器，以便能够了解目前已经有多少人访问过网站。（5）在网站中还应有联系方式。如电话、通讯地址或E-mail地址以及联系人等等，这样可建立与浏览者联系和交流的桥梁。（6）如果在Web网页中有比较大的图像，要想办法进行处理，加快网页显示的速度。否则即使制做的Web网页很好看，用户也没有耐心等待整个图片下载完毕。,在Web网页中不能制作、复制和传播下列信息：,煽动抗拒、破坏宪法和法律、行政法规实施的；煽动颠覆国家政权，推翻社会主义制度的；煽动分裂国家、破坏国家统一的

6、；煽动民族仇恨、民族歧视，破坏民族团结的；捏造或者歪曲事实，散布谣言，扰乱社会秩序的；宣扬封建迷信、淫秽、色情、赌博、暴力、凶杀、恐怖，教唆犯罪的；公然侮辱他人或者捏造事实诽谤他人的；损害国家机关信誉的；其他违反宪法和法律、行政法规的。,8.1.2 免费网页空间的申请,（1）首先要估计一下自己所制作的网站大致要多少存贮空间，然后到相应的站点去申请。（2）所选择的网站附带的免费服务越多越好，最好能提供计数器、留言板、电子信箱等等。（3）所申请的网站最好支持ASP（动态服务网页）或PHP，并且还可以外挂数据库，这样就可以按照自己的要求，亲自设计有一定特殊要求的反馈表单。（4）访问速度越快越好。要了

7、解一下ISP与Internet的连接带宽（连接带宽越宽越好），因为这会影响到今后用户访问网站的速度。（5）一定要选择能用FTP方式上传网页文件的站点，以便于今后的维护。（6）稳定程度。最好选择那些信誉度高的免费服务站点。否则自己辛辛苦苦制作的网站，未获任何事先通知，一夜之间就被清理得干干净净。,1选择免费网页空间的原则,2如何查找提供免费个人网页的站点,可以利用搜索引擎来查找提供免费个人网页的站点。例如，在浏览器的地址栏中输入http:/，然后按照“计算机互连网免费资源免费主页空间”的顺序依次单击，就出现如图8-2所示的用搜狐查找到的提供免费网页空间的站点。,3申请免费网页空间,下面以在263

8、热线申请一个免费网页空间为例来具体说明如何在Internet网上进行申请。263能提供20M免费网页空间，申请过程的步骤如下：,（1）领取用户名（如图8-3所示，即注册成为263的会员）对于用户来说，一个好记的用户名是非常重要的，假设取的用户名为：XXX8001。然后单击图8-3上的“完成”按钮，出现输入用户信息画面（如图8-4所示）。填入所要求的用户信息并单击“提交”按钮。,（2）申请站点,在注册了用户名以后，并不能立刻得到263topcool提供的免费空间，还要再次对263topcool的空间进行申请。如图8-5所示，在“您的会员名”后的文本框中输入上面申请的用户名“XXX8001”，并在

9、密码栏中输入密码。然后单击“申请站点”按钮，出现如图8-6所示画面。,国有国法，家有家规，在网络世界里也不例外。在图8-6所示的画面中，263topcool向用户说明它的规则，并提问是否接受。如果不接受，就不能在该网站申请到免费的网页空间。单击“我接受”按钮，出现图8-7所示的画面。此步骤是让用户为自己所要做的网页建立一个标题、简要的说明和网页属于什么类别。,8.1.3 上传个人网页,上传个人网页就是把在本地计算机做好的网页传到已申请网页空间的服务器上，这样即使网页的主人不开机，其它人也能看到此网页。用于上传的软件很多，这里以CuteFTP为例来说明。CuteFTP软件在很多提供软件下载的网站

10、都可以得到，它是一个功能丰富、性能稳定的FTP软件，它有很多实用的功能，例如：目录比较、目录上传和下载、宏、远程文件编辑、IE风格的工具条、URL解析等，此外它还有上传队列、断点续传、整个目录覆盖和删除。假设用户已经在本地计算机上成功地安装了CuteFTP，那么就可以开始一步一步地学习使用它了。,（1）启动CuteFTP，首先出现的是如图8-8所示的“FTP Site Manager”（FTP站点管理器）窗口，点击对话框右下角的“Exit”（如下图）关掉此窗口,（2）出现CuteFTP窗口（如图8-9所示）。点击CuteFTP窗口左上方的“Quick Connect”按钮，出现快速连接对话框。

11、,（3）新弹出的快速连接对话框如图8-10所示，在“Host Address”一栏（即主机地址）填入263topcool指定的主机地址格式“用户名”，即“XXX”，在“User ID”一栏填入申请的用户名“XXX8001”。需要特别注意的是，为了保证网页安全，不要在“Password”一栏填入密码（否则会被其它人看到）。都填好以后单击“OK”按钮；,（4）单击“确定”按钮，接下来会看到一个要求输入密码的窗口，在这个窗口内输入用户密码；,（5）如能成功登录到服务器，将出现图8-11的窗口，其中左半边的窗口是所用计算机本地的文件列表，右半边的窗口是服务器上用户目录下的文件列表，可以通过把文件或者目

12、录从左边窗口拖动到右边窗口的方式上传你的主页；,在上传网页文件时注意以下几个方面的问题：（1）设计的网站包含的所有文件全部要上传（包括图片文件等）。（2）网页文件在进行超级链接时一定要使用相对路径。（3）务必将个人网页的主页文件名设为ISP所指定的文件名，通常为index.htm或default.htm，具体是哪一个请仔细查阅ISP的站点说明，ISP将以其作为默认主页。另外需要特别强调的是在给网页、图片和动画文件起名时，最好全部用英文名字，否则如果用中文名，当把它发布到网上后，可能出现用户找不到该文件的错误。,在对网页进行更新和维护时，其操作步骤与上传网页的操作基本上完全相同，不同之处就是维护

13、或更新网页时，只须上传那些修改过的网页文件，那些没有变化的网页文件则无须重传。也可以删除那些不再需要的网页文件，以便节约存贮空间。此外，应该在规定的期限内上传或更新网页，否则有的ISP会收回网页的帐号。还应该将新建的整个网页在自己的硬盘上做一个备份，以免在发生意外时可以重新上传。,8.1.4 网站的宣传,在Internet网络世界里，网站很多，如果不做自我宣传的话，恐怕辛苦制作的个人网站最终仍是无人知晓。究竟如何宣传自己的网站，才能提高访问率，下面介绍一种方法。一般在存放网页的服务商的网站上，会通过它的网站进行宣传，但这毕竟力量有限。所以最好的自荐方法就是在网上的一些搜索引擎上登记，几乎所有的

14、搜索引擎都允许访问者加入链接，如yahoo!、搜狐、新浪等。另外要在自己主页中多加上一些方便搜索引擎查找的“关键字”。下面以搜狐为例介绍如何将自己的主页加入到搜索引擎。,（1）在搜狐主页（如图8-12所示）的右上角单击“网站登记”链接，进入网页登记页面。在三个选项中选择第二项“建议登录”。,（3）在图8-14所示页面内填写网站名称、网站地址、网站简介以及用户E-mail地址等信息，完成后滚动到网页底部，单击“提交”按钮。,（2）如图8-13所示，按照搜狐的“分级目录”选择符合自己主页主题的目录，逐级深入，最终进入8-14所示的资料填写页面。,（4）如果所填表格符合要求，则提交的申请会被受理，否

15、则需要重新填写表格。而且如果受理成功的话会发回一封E-mail。,8.2.1 HTML 语言的结构,8.2.3 超文本链接指针,8.2.2 构成网页的基本元素,在HTML文件中使用图像,8.2.6 表单的应用,8.2.5 框架结构的使用,8.2.7 HTML中的表格,8.2 网页的制作语言,返 回,HTML（超文本标记语言）是一种描述文档结构的标注语言，它使用一些约定的标记对WWW上的各种信息进行标注。当用户浏览WWW上的信息时，浏览器会自动解释这些标记的含义，并按照一定的格式在屏幕上显示这些被标记的文件。HTML的优点是其跨平台性。即任何可以运行浏览器的计算机都能阅读并显示HTML文件，不管

16、其操作系统是什么，并且显示结果相同。HTML文件是标准的ASCII文件，且其后缀名为htm或html的文件。HTML文件看起来象是加入了许多被称为链接签（tag）的特殊字符串的普通文本文件。从结构上讲，HTML文件由元素（element）组成，组成HTML文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”，即它有起始标记和结尾标记。元素的起始标记叫做起始链接签（start tag），元素结束标记叫做结尾链接签（end tag），在起始链接签和结尾链接签中间的部分是元素体。每一个元素都有名称和可选择的属性，元素的名称和属性都在起始链接签内标明。,8.2.1 HTM

17、L 语言的结构,下面来看一个HTML文件，它在浏览器中显示的结果如图8-15所示。,武汉工业学院 这是一HTML的测试文件,标记用来给网页命名，网页的名称写在与标记之间，显示在浏览器的标题栏中。例如，在图8-15中所示的浏览器页面中，其标题栏所显示的“武汉工业学院”是在HTML文件中的由武汉工业学院所定义的。,8.2 2 构成网页的基本元素,1标记,到标题元素有6种，用于表示文章中的各种题目。字体大小到顺序减小。下面这个例子中分别使用了到的标题。其HTML文件如下所示，在浏览器中的显示效果如图8-16所示。,2标记,源文件,3预格式化文本标记,源文件,HTML的输出是基于窗口的，因而HTML文

18、件在输出时都是要重新排版的，即把文本上任何额外的的字符（如空格、制表符和回车符）都忽略，若确实不需要重新排版的内容，可以用通知浏览器。在图8-17和图8-18中显示了有无预格式化文本标记的对比。,4和标记,源文件,用于强制换行。表示一个段落的开始。一般可不用。,5 标记,这几个标记都是用来修饰所包含文档的。标记使文本加粗；标记使文本倾斜；标记给文本加下划线；标记给文本加删除线；标记使文本字体加重。下面给出一个HTML源文件，其显示结果如图8-19所示。,6标记,用来修改字体和颜色。其中COLOR属性指定文字颜色，颜色的表示可以用6位十六进制代码，如；SIZE属性指定相对尺寸。另外，如果用户想要

19、设置网页的背景色和文字颜色，可以将标记扩充为：其中各个元素的说明如表8-1所示，表8-2列出了一些常用颜色的RGB值。,超文本链接指针是HTML最吸引人的优点之一，可以这样说，如果没有超文本链接指针，就没有万维网。使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力，这更加符合人类的踊跃思维方式。超文本链接指针是指把并不连续的两段文字或两个文件联系起来。,8.2.3 超文本链接指针,1 统一资源定位器URL,统一资源定位器（Uniform Resource Locator）是文件名的扩展。在单机系统中，如果要找一个文件，需要知道该文件所在的路径和文件名；在互连网上同样找一个文件，

20、除了要知道以上内容之外，显然还需要知道该文件存放在哪个网络的哪台主机中才行。与单机系统不一样的是，在单机系统中所有的文件都由统一的操作系统来管理，因而不必给出访问该文件的方法；而在互连网上，每个网络，每台主机的操作系统都不一样，因此必须指定访问该文件的方法。一个URL包括了以上所有的信息。它的构成为：protocol:/machine.name:portdirectoryfilename,2 建立一个链接,（1）链接到其它站点 在HTML文件中用链接指针指向一个目标。其基本格式为：zzz 其中zzz可以是文字或图片并显示在网页中，当用户单击它时，浏览器就会显示由href属性中的统一资源定位器（

21、URL）所指向的目标，实际上这个ZZZ在HTML文件中充当指针的角色，它一般显示为蓝色。href中的h表示超文本，而ref表示“访问”或“引用”的意思。例如：武汉工业学院 用户用鼠标单击“武汉工业学院”，即可看到武汉工业学院的主页内容。在这个例子中，充当指针的是“武汉工业学院”。,（2）同一个文件中的链接 超链可以指向自己的计算机中的某一个文件这种链接方式叫做本地链接。前面曾提到过一个超文本链接指针包括两个部分，一个指向目标的链接指针，另一个是被指向的目标。标识一个目标的方法为：.NAME属性将放置该标记的地方标记为“KKK”，KKK是一个全文唯一的标记串，和之间的内容可有可无。这样，就把放置

22、标记的地方做了一个叫做“KKK”的标记（如果对Microsoft Word很熟悉的话，这就相当于在Word中的定义“书签”）。做好标记后，可以用下列方法来指向它。转向下一处 这时就可以点击“转向下一处”这段文字，浏览器就从标记名为KKK的部分开始显示此HTML文件的内容了。,8.2.4 在HTML文件中使用图像,1在HTML文件中显示图像,在浏览器上显示的图像必须有特定的格式，目前使用的浏览器通常支持GIF和JPEG格式的图像。在HTML网页中加图像是通过标记实现的，它有几个较为重要的属性。其中：SRC属性：指明图形的URL地址；HEIGHT属性：决定图形的高度；WIDTH属性：决定图形的宽度

23、；BORDER属性：决定边框线的宽度，0-表示无边框；ALT属性：指明图像显示的备用文本；,源文件,2在HTML文件中利用图像建立链接,如果在链接标记和的中间放置一个标记，这个图像将会成为一个可击点，产生一个链接。例如：当用户单击这个图像后，浏览器就会显示“default.asp”这个文件的内容了。,8.2.5 框架结构的使用,框架能够将页面分成数个独立变化的窗口，每个窗口可以显示不同的Web页面，并可以不断更换显示的对象。使用框架结构，可以使屏幕的信息量增大，使Web网页更加吸引读者。有关框架内容的HTML语法为：其中.中的内容显示在不支持分框的浏览器窗口中，因而这里指向一个普通版本的HTM

24、L文件，以便使用不支持分框浏览器的用户阅读。分框由指定，并且可以嵌套，分区中各部分显示的内容用指定。需要说明的是，frame是一个新出现的元素，许多浏览器不支持它。分框可以将窗口横向分成几个部分，也可以纵向分成几个部分，还可以混合分框。,框架结构标记可以嵌套，用以实现大框架中的小框架。它主要有两个属性：ROWS和COLS，它们可以将浏览器页面分为N行M列，当然也可以各自独立使用。下面来看一个框架结构的例子。如图8-21，其HTML源文件如下所示。,武汉工业学院,标记有以下主要属性：SRC属性 指定框架单元的URL源，如第6行中指出的是当前主机当前目录下的“a.htm”文件。即在此框中显示“a.

25、htm”的内容。NAME属性 为该框架单元起个标识名，主要用来为将来改变框架内容提供入口。SCROLLING属性 设置框架是否使用滚动务。有YES、NO和AUTO三个值，分别表示强制使用滚动条，禁止使用滚动条和自动判断使用滚动条。,8.2.6 表单的应用,HTML提供的表单是用来将用户数据从浏览器传递给Web服务器的。例如可以利用表单建立一个录入界面，也可以利用表单对数据库进行查询。在这里需要声明的是，表单的操作是与服务器进行交互的操作，而服务器端的操作是通过服务器端的程序来实现的。实现在服务器端的操作有许多种方式，其中ASP（动态服务网页）的方式就是一种，它可以通过ADO方式与多种数据库相连

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

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

28、SP程序。该ASP程序又可以调用操作系统下的其他程序（例如数据库管理系统）完成读者的查询任务，当操作系统下的程序完成查询之后，便把查询结果传给ASP，通过ASP传给Web服务器。由此可以看出，ASP程序在用户与服务器之间进行交互查询时所起的重要作用。,1.什么是表单,表单就是为Internet网络用户在浏览器上建立一个交互接口，使Internet网络用户可以在这个接口上输入自己的信息，然后使用提交按钮，将Internet网络用户的输入信息传送给Web服务器。在HTML中，有一个专门的标记FORM提供表单的功能，由表单开始标记和表单结束标记组成，表单中可以设置文本框、按钮或下拉菜单，它们也是通过

29、标记完成。在表单的开始标记中带有两个属性：ACTION和METHOD。书写表单的HTML格式如下,2.表单的标记,FORM标记有以下主要属性：（1）ACTION属性是用来指出，当这个FORM提交后需要执行的驻留在Web服务器上的程序名（包括路径）是什么。一旦Internet网络用户提交输入信息后服务器便激活这个程序，完成某种任务。例如：当用户点击“提交”按钮以后，Web服务器上的“login.asp”将接收用户输入的信息，以登记用户信息。（2）METHOD属性是用来说明从客户端浏览器将Internet网络用户输入的信息传送给Web服务器时所使用的方式，它有两种方式：POST和GET。默认的方式

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

31、PASSWORD”表示在表单中为用户提供密码输入框=“RADIO”表示在表单中使用单选按钮=“CHECKBOX”表示在表单中使用多选按钮=“SUBMIT”表示在表单中使用提交按钮=“RESET”表示在表单中使用重置按钮,3HTML中的INPUT标记,用一个例子说明文字输入和密码输入的制作。,（1）文字输入和密码输入,这是个测试页 请输入您的真实姓名:您的主页的网址:密码:,（2）复选框（Checkbox）和 单选框（Radio Button）,这是个测试页 选择一种你喜爱的水果:香蕉 草莓 橘子 选择你所喜爱的运动:足球 篮球 排球,（3）按钮的制作,在上面几个例子中，都有两个按扭，一个是“发

32、送”按钮，另一个“重置”按钮。其实“发送”按钮真正的含义叫“提交”即当Internet网络用户用鼠标单击这个按钮后，用户输入的信息便提交给一个驻留在Web服务器上的程序，让服务器进行处理，其典型的格式：。提交按钮在FORM中是必不可少的，前几个例子只是说明INPUT语句中类型的使用，作为FORM语句并不完整，每个FORM中有且仅有一个提交按钮。当设置“提交”按钮标记时，如果缺省VALUE属性，则浏览器窗口中的按钮上出现“SUBMIT”的字样，这个字样也可以自己设定，改变按钮上的提示。例如：VALUE=“提交”。另一种在浏览器常用的按钮叫“重置”按钮，当Internet网络用户用鼠标单击这个按钮

33、后，网络用户输入的信息被清除，让网络用户重新输入信息。其典型的格式：，而且在这个标记设置中如果缺省VALUE属性，则浏览器窗口中的按钮上出现“RESET”的字样，这个字样也可以自己设定，来改变按钮上的提示，例如：VALUE=“重新输入”。,（4）HTML中的SELECT标记,在制做HTML文件时，使用标记可以在浏览器窗口中设置下拉式菜单或带有滚动条的菜单，Internet网络用户可以在菜单中选中一个或多个选项。,武汉工业学院 请从下面课程中选择几门选择课:网络技术 书法 音乐欣赏 现代文学 多媒体技术,8.2.7 HTML中的表格,下面看一个表格的例子,从这个例子可以看出一个表格有一个标题（C

34、aption），它表明表格的主要内容，并且一般位于表的上方；表格中由行和列分割成的单元叫做“表元”（Cell），它又分为表头（用TH标记来表示）和表数据（用TD标记来表示）；表格中分割表示的行列线称为“框线”（B order）。,一个表格的基本框架如下所示：,1表格的标记,（1）TABLE标记,一个表格至少一个TABLE标记，由它来决定一个表格的开始和结束，而且TABLE标记可以嵌套。TABLE标记有以下五种属性：BORDER属性，指定围绕表格的框的宽度（只能用像素）。CELLSPACING属性，指定框线的宽度CELLPADDING属性，用于设置表元内容与边框线之间的间距。ALIGN属性用来控

35、制表格本身在页面上的对齐方式。其取值可是LEFT（左对齐）、CENTER（居中对齐）、RIGHT（右对齐）。WIDTH属性，用来设置表格的宽度，可以以像素为单位，也可用占浏览器窗口的百分比来定义。,（2）CATION标记,CATION标记用来标注表格标题的。CATION标记必须紧接在TABLE开始标记之后放在第一个TR标记之前。通过该标记所定义的表格标题一般显示在表格的上方，而且其水平方向是居中对齐。另外，如需要对表格的标题突出显示，可以在CATION标记之间加入其它对字体进行加重显示的标记。如：表格标题强调.,（3）TR标记,定义表格的一行。TR标记中有两个属性，一个是ALIGN属性，用来设

36、置表行中的每个表元在水平方向的对齐方式，其取值可以是LEFT（左对齐）、CENTER（居中对齐）、RIGHT（右对齐）；另一个是VLIGN属性，用来设置表行中的每个表元在垂直方向的对齐方式，其取值可以是TOP（向上对齐）、CENTER（居中对齐）、BOTTOM（向下对齐）。例如，要使表行中各单元的内容水平方向右对齐、垂直方向居中对齐，可使用如下源代码：,（4）TH标记,TH标记用来表示一个表行中的各个单元。TH标记内几乎可以包含所有的HTML标记，甚至还可以嵌套表格。该标记与TR标记同样具有ALIGN和VALIGN属性，如果在TH标记和TR 标记中都设置了ALIGN和VALIGN属性，而且它们

37、所设置的属性值不相同，这时以TH标记所设置的属性值为准。另外，TH标记还有两个属性，一个是WIDTH属性，用来设置表元的宽度，另一个HEIGHT属性，用来设置表元的高度。这两个属性的取值单位都是像素。在同一行中将多个表元设置为不同高度，或者在同一列中将多个表元设置为不同宽度，都有可能导致不可预料的结果。,在这个实例中，通过制作一个登记表格来给大家来说明如何制作一个比较复杂的表格。在表格中经常会出现跨多行、多列的表元，这就要利用TD标记另外两个属性，即COLSPAN和ROWSPAN属性。例如 登记照 表示这个表项标题将横跨三个表项的位置；登记照 表示这个表项标题将纵跨三个表项的位置；另外每个表元

38、还可以设置其背景颜色。例如 登记照 还可以在表格中插入超级链接或在表格中插入图片，如果能对这个例子举一反三的话，那么仅需制作一个无框线的表格，就可以把各种数据按照自己所希望的形式在页面进行布置。,2表格使用实例,下面就给出一个具体的实例,表格综合实例 大奖赛登记表 报名号757性别女 姓名江小丽,推荐单位宇宙公司,下面就给出一个具体的实例,推荐单位 宇宙公司,8.3.1 JavaScript的基础知识,8.3.2 JavaScript语言,8.3.3 JavaScript中的函数,8.3.4 JavaScript的事件,8.3 网页脚本语言JavaScript,8.3.5 JavaScript

39、中的对象,返 回,8.3.1 JavaScript的基础知识,脚本语言是一种简单的描术性语言，它是针对HTML语言不能很好地解决动态交互这个缺点而引入的，它能对Web页面中的元素进行控制。一般来说，脚本语言是通过一个的标记嵌入到HTML文档中，并可以被浏览器解释执行，插入的脚本语言就如同子程序一样被HTML元素所调用，成为HTML的一部分。目前比较流行的脚本语言有网景公司（Netscope）的JavaScript和微软公司（Microsoft）的VBScript。JavaScript是基于Netscape浏览器的，类似于Java编程语言的脚本语言，并且是一种基于对象的、面向Internet或I

40、ntranet的编程语言，使用它可以开发关于Internet或Intranet客户端和服务器的应用程序，也可以方便地嵌入到计算机文件中。由于JavaScript是第一个在WWW上使用的脚本语言，因而它一度是最流行的Web站点脚本语言，用它可以方便地编排HTML网页，同时还可以控制动态HTML。VBScript是Microsoft公司在Visual Basic编程语言的基础上设计的，由于其在企业界广为流行，且与Microsoft公司的其它产品有着密切的联系，VBScript的使用范围越来越大，逐渐会成为一种主要的脚本语言。,1 什么是脚本语言,JavaScript语言起初并不叫此名称，它的早期是

41、Netscape的开发者们称之为“Mocha”的语言，开始在网上进行测试（由软件的多个用户在其实际的使用环境下进行的测试叫测试）时，名字改为“LiveScript”，Sun公司推出Java之后，Netscape引进了Sun的有关概念，在其发行Netscape 2.0测试版时才称其为“JavaScript”。它不仅支持Java的 Applet小程序，同时向Web页的制作者提供一种嵌入 HTML文档进行编程的、基于对象的Script（脚本）程序设计语言，采用的许多结构与Java相 似。支持JavaScript的Navigator 2.0的网络浏览器能够解释并执行嵌在HTML中的用JavaScrip

42、t语言书写的“程序”。JavaScript具有很多采用CGI/PERL编写的Script（脚本）的能力，其优点是可以引用主机资源，响应位于服务器Web页中相应语法元素要完成的功能，而又不与主机服务器进行交互会话。,2JavaScript 的产生与发展,JavaScript语言起初并不叫此名称，它的早期是Netscape的开发者们称之为“Mocha”的语言，开始在网上进行测试（由软件的多个用户在其实际的使用环境下进行的测试叫测试）时，名字改为“LiveScript”，Sun公司推出Java之后，Netscape引进了Sun的有关概念，在其发行Netscape 2.0测试版时才称其为“JavaSc

43、ript”。它不仅支持Java的 Applet小程序，同时向Web页的制作者提供一种嵌入 HTML文档进行编程的、基于对象的Script（脚本）程序设计语言，采用的许多结构与Java相 似。支持JavaScript的Navigator 2.0的网络浏览器能够解释并执行嵌在HTML中的用JavaScript语言书写的“程序”。JavaScript具有很多采用CGI/PERL编写的Script（脚本）的能力，其优点是可以引用主机资源，响应位于服务器Web页中相应语法元素要完成的功能，而又不与主机服务器进行交互会话。,2JavaScript 的产生与发展,JavaScript的编程工作复杂与否和HT

44、ML文档所提供的功能大小密切相关，下面用一个简单的例子来介绍它的编程特点。,3一 个 简 单 的 例 子,HTML HEADTITLEThis is a test/TITLE/HEAD BODY 你好 SCRIPT LANGUAGE=JavaScript document.write Hello，JavaScript!/SCRIPT/BODY/HTML,JavaScript源代码被嵌在一个HTML文档中，而且它可以出现在文档头部（HEAD节）和文档体部(BODY节)。SCRIPT标记的一般格式为：SCRIPT LANGUAGE=JavaScript!-JavaScript语 句 串-/SCRI

45、PT 为了使老版本的浏览器（即Navigator2.0版以前的浏览器）避开不识别的“JavaScript语句串”，用JavaScript编写的源代码可以用注解括起来，即使用HTML的注解标记!-，而Navigator2.x可以识别放在注解行中的JavaScript源代码。说明：SCRIPT标记可声明一个脚本程序，LANGUAGE属性声明该脚本是一个用JavaScript语言编写的脚本。在和之间的任何内容都视为脚本语句，会被浏览器解释执行。在JavaScript脚本中，用“/”作为行的注释标注。,8.3.2 JavaScript语言,在JavaScript中，数据类型是十分宽松的，程序员在声明变

46、量时可以不指定该变量的数据类型，JavaScript会自动地按照需要来分配适当的数据类型。这一点和JAVA或C+是截然不同的。JavaScript有以下几种基本的数据类型：,1JavaScript数据类型,（1）数字类型如:34，3.14表示为十进制数；034表示为八进制数，用十进行表示其值为28；0 x34表示为十六进制数，用十进行表示其值为52。（2）字符串类型如：Hello!；,（3）逻辑值类型其取值仅可能是“真”或“假”，用 True或False来表示。（4）空值当你定义一个变量后未赋初值时，则该变量为空值。例如：var ch1;/此时ch1就为空值，它不属于任何一种数据类型。,它的定

47、义要求与C语言相仿，例如以字母或下划线开始，变量不能是保留字（如int，var等），不能使用数字作为变量名的第一个字母等等。但它的定义方法与C语言有很大的差别。C语言的变量定义格式为：int a=1;float f1=3.14 而JavaScript的变量定义格式:Var 变量名；或者 Var 变量名=初始值；JavaScript 并不是在定义变量时来说明变量的数据类型，而是在给变量赋初始值时来确定该变量的数据类型；JavaScript对字母的大小写是敏感的。如Var my；Var My，JavaScript认为这是两个不同的变量。说明：在使用变量之前，最好对每个变量使用关键字VAR进行变量声

48、明，防止发生变量的有效区域冲突的问题。,2JavaScript 变量,JavaScript常量分为4类：整数、浮点数、布尔值和字符串。下面分别加以说明。,3JavaScript常量,（1）整数常量在JavaScript中，整数可以表示为：十进制数：即一般的十进制整数，它前面不可有前导0。例：75。八进制数：以0为前导，表示八进制数。例：075。16进制数：以0 x为前导，表示16进制数。例：0 x0F。（2）浮点数常量浮点数可以用一般的小数格式来表示，也可以使用科学计数法来表示。例如：7.54343，3.0e9,（3）布尔型常量布尔型常量只有两个值：True 和 False。（4）字符串常量字

49、符串常量是用单引号或双引号括起来的0个或多个字符组成。例如：“Test String”，”12345”,在JavaScript的语法规则中，每一条语句的最后必须使用一个分号，例如：document.write(“kkk”);/此语句的功能在浏览器中输出“kkk”字符串 在编写JavaScript程序时，一定要有一个良好的习惯，最好是一行写一条语句，如果使用复合语句块时，注意把复合语句块用大括号括起来，并且根据每一句作用范围的不同，应有一定的缩进。另外一个好的编程风格是要适当加一些注释。例如：,4JavaScript语句的结构,SCRIPT LANGUAGE=JavaScript var SUM

50、,P,i;SUM=0;/初始化累加和P=1;,FOR(i=1;i100;i+)SUM+=i;/求累加和 P*=i;/SCRIPT,JavaScript常量分为4类：整数、浮点数、布尔值和字符串。下面分别加以说明。,3JavaScript常量,（1）整数常量在JavaScript中，整数可以表示为：十进制数：即一般的十进制整数，它前面不可有前导0。例：75。八进制数：以0为前导，表示八进制数。例：075。16进制数：以0 x为前导，表示16进制数。例：0 x0F。（2）浮点数常量浮点数可以用一般的小数格式来表示，也可以使用科学计数法来表示。例如：7.54343，3.0e9,（3）布尔型常量布尔型