徐州工程学院：网页制作与网站建设：席建中－网页制作与网站建设教案

徐州工程学院教案 《网页制作与网站建设》徐 州 工 程 学 院 教 案 纸 前 言 课程介绍： 随着Internet的不断普及，网络上的站点越来越多，内容也越来越丰富，由此带来的是网页设计与制作的工作量空前加大，涉及的技术也越来越复杂。在课程设计、毕业设计及将来走向工作单位，网页设计与制作应是一项非常实用的技术。目前人们已不满足于通过WWW浏览器在网上查询和浏览信息，开始试着设计自己的Web主页。特别是最近，在网上发布商品信息、介绍企业、用户调查、网上购物等需求越来越多，掌握Web主页的设计方法和技巧，成为人们渴望掌握的一种技能。许多高校已开设网页设计技术课程，有些企业也将网页设计技能作为招聘计算机人才的基本条件之一。本教材主要介绍使用HTML（源代码）设计Web主页的基本方法和技术。 目前，网页的开发工具和技术很多，本书作为高职高专教材，全面介绍网页设计的基本知识、基本方法和设计技巧，并介绍两种流行设计工具软件。教材分为6章。第1章介绍网页设计基础；第2章和第3章介绍HTML4.0的常用标记、基本主页及高级主页的设计方法和技巧；第4章介绍如何使用JavaScript设计交互、动态主页；第5章介绍Dreamweaver MX的基本知识、基本操作，以及使用Dreamweaver MX设计主页的方法和技巧；第6章介绍目前新版本的FrontPage2002的基本知识、基本操作，以及使用FrontPage2002设计主页的方法和技巧。每章都以实例介绍并配有上机练习题，使得同学们能做到边学边用，掌握设计方法，创建自己的主页。 本课程具有极强的实践性，除掌握必要的基本概念及语法规则外，重要的是实践。一定要自己动手设计与制作网页、编写程序、上机操作，这是学好本课程最为有效的途径。 教学要求： 1.教学——按照教学大纲和教学进度表的要求进行，总学时为34学时（上机16学时），4学时/周。各章节课时分配见教学大纲。教学形式有：课堂教学、上机实践、习题课和晚自习辅导答疑。教学效果：采用测评的方式。 2.上机——根据教学进度和相应的上课时间，由学院电教室统一安排。要求上机前做好相应的准备（预习、作业、实验内容），上机时完成布置的上机内容，不做与本课程无关的内容，上机完成后交实验报告。服从电教人员的管理。 3.习题课——根据教学进度并且在多数同学做了相应章节的习题，批改了部分作业后插入习题课。要求定时收交、批改作业。    徐 州 工 程 学 院 教 案 纸 4.辅导答疑——利用上机的时间进行辅导答疑。 5.成绩——以总成绩记入学科成绩，总成绩由平时成绩和考试成绩组成，平时成绩（含作业、上机实验、出勤情况）占30%，考试成绩占70%。 03电信班网页制作与网站建设课程表： 时 间 一 二 三 四 五  8：00~8：45       8：50~9：35       10：00~10：45  C805 上课     10：50~11：35       11：40~12：25       14：00~14：45    C805 上机   14：50~15：35       15：45~16：30       16：35~17：20       03电信班网页制作与网站建设上课时间，第11——19周，采用多媒体教室C805，教学一人一机，上课与上机地点相同，总学时34学时：18学时上课、16学时上机。    徐 州 工 程 学 院 教 案 纸 第1章 网页设计基础 [学习要点] 1. Internet概述 2. 网页设计基础 3. 网页开发工具 4．HTML基础 Internet概述 网页设计技术总体来说分成三个部分，一是界面设计，二是脚本语言，三是服务器端的动态编程技术。 界面设计一般通过一些工具软件来实现，例如FrontPage2000、DreamWare、Flash等等，这些技术都能进行网页设计，选择其中的任意一种都能制作出满意的网页。FrontPage2000是Office2000的一个组件，熟悉Microsoft Word、Excel、PowerPoint等软件的用户可以很快掌握FrontPage2000的特点和使用方法。没有网页制作经验的用户，通过学习FrontPage2000的有关知识后，也可以成为一个熟练的网页制作者和Web站点的管理者。 网页设计除了界面以外，还必须进行一些编程控制，控制既有客户端的，也有服务器端的，目前用的较多的网页编程语言有VBScript、JavaScript，这两种脚本语言都是比较容易掌握的，通过在网页中嵌入脚本程序，可以改变网页外观、响应用户操作，还能控制Web服务器。 服务器端的动态编程技术也有许多种，目前用的较多的有ASP、JSP、PHP、CGI等。CGI是较早采用的一种技术，它存在着两大缺陷。首先，对每一个请求，CGI要产生一个进程，同一时刻请求愈多，产生进程愈多，当服务器较忙时，既耗时又占服务器的RAM；其次，CGI采用的编程语言主要是Perl、C语言等，对页面开发人员来说要掌握和精通这些编程语言难度较大。而ASP除了能够提供CGI的所有功能外，还有以下独到的优点：ASP运行在Web服务器的同一个进程中，可以更快、更有效地处理客户请求；ASP通过ADO（ActiveX Database Objects）提供更方便、更简单的访问数据库的方法，非常利于开发基于数据库驱动的Web应用程序；ASP支持脚本语言VBScript、JavaScript等。 Internet的发展概况 Internet是当前世界上规模最大的计算机网络，利用Internet网可以    徐 州 工 程 学 院 教 案 纸 迅速地获得各种信息资源和Internet提供的各种服务。网络改变了人类的生活，“秀才不出门，能知天下事”已成为一个现实，通过1台电脑，1根电话线就可以接通世界各地。在Internet上目前最普遍的应用是信息的提供与浏览，而网络上的信息是以网站为单位的，网站又是由许多网页组成的。因此，网站的设计、网页的制作就需要越来越多的人参与，网站既可以是Internet上的，也可以是局域网上的，它们在网页设计上是没有区别的。本教程的任务就是阐述如何构建网站、如何制作网页以及如何在网页中进行编程。在进入实质性的内容之前，先了解一些网络的基本知识。 在短短的几十年中，Internet经历了一个飞速发展的过程。P1—2网络的时代从此来临。 Internet服务 Internet：也称“国际互联网”、“因特网”，它是目前世界上最大的网络，是由世界上的各种网络互联而成的。Internet的功能很强大，它提供的主要服务有：电子邮件（E-mail）、远程登录（Telnet）、文件传送（FTP）、万维网（WWW）、电子公告系统（Bulletin Board Service即BBS）、网上购物、网络教学等。其中，WWW是Internet上应用最广泛的一种服务，许多人都是通过WWW了解和使用Internet的。 WWW服务 WWW：（World Wide Web）译为万维网，简称Web，是Internet上最重要的资源。是一个基于超文本方式的信息查询工具。WWW由三部分组成：客户机（Client）、服务器（Server）和HTTP协议。所谓“服务器”，顾名思义，就是提供信息服务的计算机；“客户机”是索求信息的计算机。帮助用户查看HTML超文本的客户机软件称为WWW浏览器。目前常用的有Internet Explorer、Netscape等。浏览器主要有两个功能：向用户提供友好的使用界面以及将用户的请求传送给相应的WWW服务器进行处理，客户机向服务器发送一个请求，并从服务器上得到一个响应。客户机与服务器之间使用HTTP协议传送信息。服务器的基本信息单位称作网页（Web页），由HTML（超文本标记语言）写成。当WWW服务器接到来自某一客户机的请求后，就进行查询并将得到的数据送回客户机，再由浏览器将这些数据转换成相应的形式（如文字、图象、动画、声音等）显示给用户。 WWW的常用术语 （1）超文本传送协议HTTP（Hyper Text Transfer Protocol）。 HTTP是浏览器与WWW服务器之间相互通信的协议。当用户激活一个链接后，服务器使用HTTP协议送回约定好格式的文件，文件信息在客户机上通过浏览器显示相应信息。 （2）统一资源定位符URL（Uniform Resource Locator）。 URL的用途是用统一的方式指明Internet上的资源。它是标准的编址机    徐 州 工 程 学 院 教 案 纸 制，用来检索Internet上的文档。URL包括三部分：所使用的传送协议、服务器名称、该服务器上定位文档的全路径名。 （3）超文本标记语言HTML（Hyper Text Markup Language）。 HTML是一种专门的编程语言，即Web的描述语言，用于编制通过WWW显示的超文本文件。所谓超文本（Hyper Text）是可链接文本的其他段落或其他文件，通过单击热点可以查看与该热点相链接的段落或主页；所谓标记语言（Markup Language）是指用标记进行编辑作业的语言，通过标记标注普通文本，指定文本或其他对象（如图象、声音等）的表示格式，从而做成超文本文件。 （4）主页（Home Page）。 主页又称作起始页。它是Web站点的第一页，通常看作Web的入口点，它包含了同一站点上的其他页以及相关节点的链接。因此主页是一个进入WWW服务器入口的HTML文件。 （5）链接（Link）。 Link是Web页的元素或者是超文本文档中的元素。超文本的关键就是在其文档中含有与其他文档的链接。链接是指向其他信息资源的指针，通过该链接，可以在一个文档内部、文档之间、甚至服务器之间任意转换。超文本的链接提供了浏览Web的导航方法，用鼠标单击一个链接就会转到它们所指示的地方去。 其他服务 （1）电子邮件（E—mail） E—mail是WWW出现之前在Internet中应用得最广泛的服务。P2 （2）文件传输协议FTP FTP（File Transfer Protocol）是在Internet上传输文件最主要的应用层协议。P3 （3）远程登陆（Telnet） Telnet是最早的Internet协议。使用Telnet，用户就可以在本地登录到远程的另一台主机上，充当一个远程终端。Telnet可以把用户在本地的操作传送到远端主机，并把远端主机的处理结果返回本地。用户感觉好像就坐在远程的那台主机前一样。 （4）新闻组（News Group） 新闻组实际是各种内容分组的电子邮件的集合。P3 （5）Gopher Gopher是一种基于菜单的层次结构的服务，用于在Internet上查找分布式的信息资源。Gopher服务器以文本菜单方式提供各种主题信息，用户可以通过菜单向导一步步查找所需要的信息。由于Gopher是基于文本的，因此查找信息的速度非常快，但缺点是不能显示图像信息。    徐 州 工 程 学 院 教 案 纸 HTTP协议 协议（Protocol） 在计算机网络中，要保证交换数据的准确性，就必须遵守一些事前约定好的规则。这些规则明确规定了所交换数据的格式，以及有关的同步问题。这种为进行网络中数据交换而建立的规则、标准或约定称为协议。P3 HTTP协议 HTTP协议（HyperText Transfer Protocol，超文本传送协议）是用于将超文本从WWW服务器传输到本地浏览器的传送协议。从层次的角度看，HTTP是面向事物的应用层协议，是Web上能够可靠交换数据的重要基础。它可以使浏览器更加高效，减少网络传输。它不仅可以保证计算机能够正确、快速地传输超文本文档，还可以确定传输文档中的哪一部分，以及哪部分内容首先显示（如文本先于图形）等。这就是在浏览器中看到的网页地址都是以http://开头的原因。P4 1.2 网页设计基础 1．2．1 相关概念 网页 从用户的角度看，网络提供了巨大的、遍及全球的电子文档，这些文档的格式由超文本置标语言（HyperText Markup Language，HTML）定义，支持指向其他文档、图像、音频或视频文件的超链接，并可以通过浏览器浏览。这些存储在Web站点的文档称为网页，它是构成WWW的基本单位。人们上网，有一半以上的时间都是在与各种网页打交道。网页上可以显示文字、图片，也可以播放声音和动画，是目前Internet上最流行的信息发布方式。P4 主页 一个网站的起始网页称为主页（Homepage）。当你进入网站，连接到一个Web服务器上时，首先显示的那一页就是主页。 URL Web中用统一资源定位地址URL（Uniform Resource Locator）作为标识文档及其他资源的全球地址。URL好比Internet的门牌号码，它可以帮助用户在Internet的信息海洋中定位所需要的资料。P5—6 URL的一般形式为： 访问方式：//服务器地址/端口号/路径/文件名 P5 URL的访问方式、服务器地址、端口号、路径 （1）使用FTP的URL P5—6 （2）使用HTTP的URL （3）使用Gopher的URL    徐 州 工 程 学 院 教 案 纸 对于主页制作者和站点管理人员来说，每一个URL的正确与否都是非常重要的，它与整个站点的完整性和可阅读性密切相关。 1．2．2 HTML语言 网页WWW的基本文档，是用HTML编写的。HTML（Hyper Text Markup Language）即超文本置标语言，是一种用于网页制作的简单、通用的全置标记语言，它允许网上出版者建立文本与图片相结合的复杂页面。HTML并非一种编程语言，而是一些浏览器能够看懂的标记，它只能用来描述文档的结构，而不能描述实际的表现形式。当网页中包含正常文本和HTML标记时，浏览器便会“翻译”由这些HTML标记提供的网页结构、外观和内容等信息，从而将网页按设计者的要求显示出来。这样，网上的其他用户无论使用的是什么类型的计算机或浏览器，都能浏览到相同的页面，即网页。 所有的WWW文件都是由超文本标记语言HTML所创建的。在这种语言中，可以使用各种标记对文件进行处理。这些标记决定了网页的外观、结构和交互性等等，它们的共同之处就是都使用“< >”符号，例如段落标记<p>，图片标记<img>等。但应注意的是，仅当HTML文档以 .html或 .htm为后缀时，浏览器才对该HTML文档的各种标记进行解释，否则浏览器只能看见原来的文本文件。 在浏览器中，是看不到任何HTML标记的，但是在浏览器中所看到的网页效果却都是由这些标记生成的。大多数情况下，在创建站点时并不需要熟练掌握HTML，因为在FrontPage2000这样的软件中，对于HTML的处理是在幕后进行的，因而就掩盖了该语言的复杂性。 FrontPage2000的网页视图提供了3种显示方式：普通、HTML、预览。用户可以在“普通”方式下进行页面编辑，在“HTML”方式下查看HTML代码，在“预览”方式下查看网页的显示效果，当然也可以在HTML方式下进行代码编辑，编辑后的效果同样可以在“普通”方式下显示出来，不过这要求用户对HTML标记比较熟悉。 网页的设计有两种方式：用源代码设计和利用工具设计。HTML代码可以用最简单的文本编辑器（例如记事本）来编辑，不过现在还使用最原始的手工方法来编辑页面的开发人员几乎没有了，一般都使用各种HTML编辑器。HTML编辑器大大方便了开发工作，功能也发展到可以在“所见即所得”的环境下工作。 HTML作为一种网页编辑语言，具有格式化文本、建立超链接、创建列表、插入图像、以表格显示信息、加入多媒体、加入动画、交互式表单、计数器等作用，给Web带来了无限的艺术生机和活力。另外，它是最基本的网页制作方法，其他的专用网页编辑器，如FrontPage,Dreamweaver等都是以它为基础的。    徐 州 工 程 学 院 教 案 纸 1．2．3 浏览器 随着HTML不断增加新的功能，浏览器也必须跟得上其更新的步伐。浏览器（Browser）是用于显示和作用于网页的软件。常用的浏览器有Microsoft（微软）公司的Internet Explorer（IE）和Netscape（网景）公司的Netscape Navigator（现在包含在Netscape Communicator软件包中）。 Internet Explorer 5.0 目前，微软公司的Internet Explorer是最为常用的浏览器软件。利用它可以进行网上漫游，也可以做查询、文件传输等工作。下面以Internet Explorer 5.0（简称IE5）为例，简单介绍如何使用浏览器浏览WWW网页。 （1）启动和和退出IE5 （2）窗口介绍 （3）浏览WWW网页 Netscape Communicator P10—11 1994年4月，网景公司发布了它的浏览器软件Netscape Navigator（通常称为Netscape），使Internet用户可以方便地访问Internet。Netscape自推出后，很快地就以其强大的功能，友好方便的用户界面获得了广大用户的好评，成为当时风行一时的浏览器，其市场份额曾经一度达到70%以上。 同年10月，微软公司发布了它的浏览器软件Internet Explorer（IE），并于1997年10月，将IE与Windows操作系统捆绑出售，推出了我们习惯称之为Windows97操作系统的升级版本。籍此，微软公司使IE浏览器在浏览器市场中所占份额迅速扩大，并逐渐超过Netscape Navigator。 1998年6月25日，微软公司发布的新一代操作系统Windows98实现了与IE的完全融合。尽管在1998年11月24日，AOL（美国在线）公司并购网景公司，并于2000年11月推出了新版的Netscape软件Netscape6，但在此前的两年间，Netscape浏览器的升级一直落后于IE浏览器。微软公司借助于Windows操作系统挟带IE浏览器席卷全球，Netscape的市场份额则逐渐下降。1999年初，Netscape浏览器的市场份额从颠峰时期的70%以上，下降到32%。到2001年中期，Netscape的市场份额就下降到了13%；2002年8月26日，Netscape浏览器的市场份额只剩下3.4%，创下了历史最低记录。可以说，这个时候的Netscape已经几乎完全被IE浏览器打败了。虽然市场上还存在相当一部分的Netscape支持者，但Netscape已经难以挽回败局了，Netscape浏览器几乎见不到了。 1.3 网页开发工具 1．3．1 网页编辑环境 从硬件上来讲，任何一台计算机都可以编辑网页，但要看到网页编辑    徐 州 工 程 学 院 教 案 纸 的效果，就需要一个浏览器。因此，网页制作的硬件环境就是一台计算机和一个能够正常运行的浏览器。 目前，专用的网页编辑器主要分为如下三大类。P11—12 完全的所见即所得工具 纯粹的HTML代码编辑工具 混合型工具 2 文件转换 网页是存储在文件中的，因此文件操作是非常重要的。网页文件必须以 .html或 .htm为后缀名存盘才能被浏览器识别，但如果你已经用文本文件、Word文档或其他文本编辑器编辑好了网页的内容，可以使用转换工具很容易地将其转换成网页文件。 FrontPage提供了这种功能，它既能将没有特殊格式的纯文本文件转换成网页文件，也能将已编排好的Word文档转化成网页文件，只是在HTML语言中将无法保持Word的编排效果。 1．3．3 FrontPage 2002 FrontPage 2002是一个集创建、管理网站于一身的网页制作工具，支持所见即所得的编辑方式，使用户不用编程就可以创建和管理具有专业水准的Internet/Intranet网站。FrontPage 2002是目前世界上比较优秀的网页制作与开发工具之一，它是微软公司于2001年推出的用于创建Web站点的应用程序。FrontPage 2002是Office XP中的一个重要组件，它即继承了FrontPage 以前版本的功能，又采用了与Office XP其他组件一致的界面和操作方式。只要使用过Office软件，就可以轻松掌握FrontPage 2002的用法。 FrontPage 2002具有以下特点P12 FrontPage 2002还具有其他新特点，在第6章将做更详细的介绍。 FrontPage2000简介——FrontPage2000是Office 2000的组成部分，它是从Frontpage 98发展过来的，是微软公司推出的用于创建Web站点的工具软件，推出后得到了网页设计人员的广泛使用，它在改进、完善前期版本的基础上，又新增、扩展了许多功能，主要有以下几个方面： （1）HTML编辑功能。 1）100%保留HTML源代码。在FrontPage2000中可以放心地编辑已有的HTML和脚本（甚至包括ASP程序）。 2）Microsoft脚本编辑器。用内置的脚本编辑器可更加快速地编辑和调试脚本，包括JavaSceipt和VBScript。 （2）方便的数据库集成功能。 1）Access数据库连接。Frontpage可以方便地将Access数据库和Data Access Page溶入基于FrontPage的Web页，站点访问者由此可以查看数据    徐 州 工 程 学 院 教 案 纸 库中的记录或向数据库添加记录。 2）保存结果到数据库。这项特性使得数据库的创建和更新与创建表单一样简单，用户可以方便地创建一个新的Access数据库或者修改一个基于网页上表单数椐的已有数椐库。 （3）灵活的发布特性。 1）随处创建站点。现在用FrontPage创建Web站点已不再需要专门的站点服务器了，这一点对于广大的PC机用户来说，实在是一个福音，用户可以在本地硬盘中创建完整的Web站点，制作、测试完毕后再将这个站点发布到服务器上。 2）控制网页级发布。通过将特定网页设置为“不发布”或“只发布更改过的网页”就可以决定要将哪些网页上载到服武器。 3）随机发布。使用FrontPage内置的FTP可以很轻松地将站点发布到ISP（Intemet服务供应商），无论它是否安装了FruntPage服务器扩展。 1．3．4 Macromedia Dreamwerver Dreamwerver是美国Macromedia公司开发的集网页制作和管理网站于一体的所见即所得网页编辑器，是针对专业设计人员特别设计的可视化网页编辑和管理工具。利用它，可以轻而易举地制作出跨平台、跨浏览器的充满动感的网页。 Dreamweaver的特点 P13 1）—6） Dreamweaver MX的新功能 Dreamweaver MX包含多种多样的新功能。例如，为可视化设计人员提供的新型增强模板，以及多种新的编码功能。Dreamweaver现在仍就包括Dreamweaver UltraDev4的所有应用程序开发功能，并且提供了多种新功能，其中包括从Macromedia ColdFusion Studio派生的代码中心工作区，更完善的运行时代码，以及对最新Web应用程序技术的支持。P13—14 1．3．5 其他网页开发工具 Fireworks Fireworks是一个强大的网页图形设计工具，可以使用它来创建、编辑和制作网络动画，增加先进的互动性，在专业环境中优化图像。在Fireworks中，任何物体在任何时候都是可编辑的，而且可以设置自动处理，以满足更新和变化的要求。P14 Flash Flash是一个由Macromedia公司发布的专用于制作矢量图形和交互式动画的软件。目前，不论是商业网页还是个人网页，绝大多数都采用了Flash技术。Flash还被广泛应用于交互式软件开发、展示和教学等方面。在专业   徐 州 工 程 学 院 教 案 纸 多媒体制作软件Authorware和Director中，均可导入Flash动画，而且完全使用Flash制作的多媒体教学软件也已经出现。Flash在影视制作中也同样大有可为。 Flash的独特之处在于以下几个方面：P15—16 （1）文件数据量小 （2）所见即所得 （3）插件工作方式 （4）支持蒙板层操作 （5）支持事件响应和交互功能 （6）过渡动画变形效果 Dreamweaver，Fireworks和Flash分别用于Web制作，Web图形处理和矢量动画三个主要的网络创作领域。它们与其他Macromedia公司的产品，例如FreeHand，Director及其他常用的图形程序和HTML编辑器综合使用，可以提供一整套网络解决方案，从而轻松地设计出丰富多彩、充满动感的网页。 VBScript简介 VBScript是微软公司开发的一种脚本语言，它可以用来开发客户端和服务器脚本，VBScript依靠解释器来逐行解释执行。该语言的语法是Visual Basic的一个子集，因此很容易学习，而且对很多程序员来说都很熟悉。不过VBScript中的部分功能被故意省去了，例如，客户脚本不能读写用户计算机上的文件，这可以防止本地环境被破坏。 VBScript的产生和发展，是与WWW的兴起密切相关的。微软在Visual Basic的基础上，结合Web网页的特点，在它本公司的IE浏览器中推出了VBScript脚本语言。为了抢占市场，微软不仅免费提供IE浏览器和VBScript解释器，而且极力推行它的开放式标准，大胆公布解释器的源代码，同时又通过与ActiveX技术的结合来增强其功能。因此，VBScript得到了很大的发展。目前，VBScript客户端程序只有Intemet Explorer才能解释，而NetScape浏览器则不支持这种语言，VBScript服务器程序也只有互联网信息服务器才能解释。 JavaScript简介 JavaScript是建立在Java基础上的一种脚本语言 ，它的语法与Java十分相似，因此对于熟悉C++、Java等语言的开发者来说，JavaScript 就很容易掌握。JavaScript是Java语言与HTML脚本语言结合的一种折中方案。JavaScript一经推出便受到了广大使用者的青睐，主要是因为JavaScript有以下4大特点。 （1）简单易学。   徐 州 工 程 学 院 教 案 纸 JavaScript是在Java基础上建立的，对于大多数使用过Java与C++语言的开发者来说，它显得十分简单，即使对于那些没有使用Java与C++的使用者来说，因为JavaScript的语法、编程结构相对简单，它使用的是非严格的数据类型，在一定程度上简化了Java使用时繁琐的变量说明；同时JavaScript是事件驱动式的语言，程序执行过程直观易懂。 （2）具有动态性 JavaScript采用事件驱动式的程序执行机制，不但使得程序执行起来直观易懂，而且能出色地控制和响应程序过程中的动态事件。通过和HTML中Form对象、窗口对象、文档对象等的交互使用，可以响应客户端上的各种事件。 （3）与平台无关性。 JavaScript源代码是作为HTML文档页面的一部分被送至客户端流览器的，到了浏览器后完全由浏览器进行解释、分析、识别和执行。只要客户端安装了支持JavaScript的浏览器，就可以运行用JavaScript编写的程序，因此脱离了与客户端软、硬件平台的直接关系，具有与平台无关性。 （4）非完全的面向对象性 严格说来，JavaScript并不是一种真正的面向对象的语言，但它却使用了面向对象的思想和机制。例如，JavaScript的许多功能，就是通过脚本环境中对象的属性、方法与脚本互相作用来实现的。这些对象包括常见的窗口、文档、位置、历史以及Web页面中栽入的Applet等。 3． ASP简介 ASP（Active Server Page）是微软于1996年推出的Web应用程序开发技术。这一技术的兴起是ActiveX技术在服务器端应用的必然结果，同时它的出现也在Web开发领域引起了一场革命。 微软把ASP描述为“一个服务器的脚本环境，在这里可以生成和运行动态的、交互的、高性能的Web服务器应用程序”。所以，ASP既不是一种语言，也不是一种开发工具，而是一种技术框架，其主要功能是为生成动态的、交互的Web服务器应用程序提供一种强大的方式或技术。ASP属于ActiveX技术中的服务器端技术，因此与通常的在客户端实现的动态主页技术如Java Applet、Active Control、 VBScript、JavaScript等技术所不同，ASP的命令和脚本都在服务器中解释执行，送到浏览器的只是标准的HTML页面。因此开发者不必考虑浏览器的类型，也不必考虑浏览器是否支持ASP；而且，在浏览器端看不到ASP源程序，程序的安全性得到了保证，开发者的利益得到了保护。    徐 州 工 程 学 院 教 案 纸 1.4 HTML4.0基础 1．4．1 概述 HTML称为超文本置标语言。所谓超文本（Hyper Text），是一种含有链接的文件，通过单击热点可以转向与之相链接的段落或网页；所谓标记语言（Karkup Language），是指用标记进行编辑作业的语言。通过标记标注普通文本，指定文本或其他对象（如图像、声音等）的表示格式，从而制作成超文本文件。 从最开始的HTML1.0到现在的HTML4.0，HTML已经经历了多次的升级。现在的HTML5.0正在测试当中，同时DHTML（动态），VHTML（虚拟），SHTML等也在飞速发展。 HTML4.0是W3C于1997年12月公布的版本，与HTML3.2相比，在6个方面做了增强：P17 （1）国际化 （2）易用性 （3）表格 （4）复合功能 （5）风格单 （6）脚本（Script） 1．4．2 HTML标记 标记 标记是描述HTML文件结构的标识符。它规定了HTML文件的逻辑结构，并且控制主页的显示方式。 （1）标记的功能 HTML标记的功能是标记文件结构，设定文字、图像、表格、表单等在浏览器上的显示风格及位置，嵌入脚本，实现动态主页及多媒体主页等。 （2）标记的构成及属性 HTML文件都是以标记<HTML>开始、以标记</HTML>结束。<HTML>位于文件的开头，表明文件是一个.html文件；</HTML>位于文件的末尾，表示一个.html文件的结束。头部和主体含在开始标记<HTML>和结束标记</HTML>之间。 标记是由符号<┅>、</┅>及括在其中的命令字符串组成。标记有双标记和单标记之分。双标记包括开始标记和结束标记，必须成对出现。例如<HTML>和</HTML>是文件的开始标记和结束标记，<BODY>和</BODY>是主页内容的开始标记和结束标记。单标记只有开始标记而没有结束标记。例如标尺线标记<HR>就只有开始标记而没有结束标记。另外，有的标记例如<P>（分段标记）    徐 州 工 程 学 院 教 案 纸 可以写为双标记<P>、</P>，也可以写为单标记<P>。 综合来讲，HTML的标记有下列3种表示方法： <标记名>文本或超文本</标记名> <标记名 属性名1=”属性值1” 属性名2=”属性值2”┅>文本或超文本</标记名> <标记名> 其中，最后一种表示方法仅用于一些特殊的标记。例如，<BR>表示强制换行，它没有与之对应的</BR>。 （3）常用的HTML标记 下面列出了一些常用的HTML标记及简要的说明：P18—19 <HTML>┅</HTML> <HEAD>┅</HEAD> <BODY>┅</BODY> <TITLE>┅</TITLE> <A href=” ┅”>X</A> <IMG src=” ┅”> <BR> <P> <B>┅</B> <I>┅</I> <HR> <TABLE>┅</TABLE> <TR>┅</TR> <TD>┅</TD> <FONT>┅</FONT> HTML文件中的标记与浏览器显示内容的关系 举例P19图1-17 解释图1-17中页面内容:P19 用两种方法设计此页面。 用FrontPage2000介绍设计过程： 进入FrontPage2000设计环境(选择普通(文字<早发白帝城>大小、居中(插入水平线(插入图形(选择HTML(在插入图形处加入align=”left”(写入文字<朝辞白帝彩云间>居中(写入文字<千里江陵一日还>居中(写入文字<两岸猿声啼不住>居中(写入文字<轻舟已过万重山>居中(插入水平线。 源代码用记事本的设计过程： 程序(附件(记事本(写入程序( <html> <head>    徐 州 工 程 学 院 教 案 纸 <title>my first html document</title> </head> <body> <center> <h1 align="center">早发白帝城</h1> </center> <hr> <p align="center"> <img src="../图片/图1-51%20.gif" align="left"> 朝辞白帝彩云间<p align="center"> 千里江陵一日还<p align="center"> 两岸猿声啼不住<p align="center"> 轻舟已过万重山<p><hr> </body> </html> (将编辑好的程序以 .html扩展名存盘，存盘时起名、选路径、保存。 在主页上所建立的一切都依赖于HTML的标记及其属性。若想熟练地创建Web主页，必须了解HTML每个标记的功能。 1．4．3 HTML基础结构 HTML文件的结构 HTML文件是以<! DOCTYPE>版本声明开始，主要由头部<HEAD>和主体<BODY>两部分组成。头部用于文件命名及定义文件的相关说明；主体定义浏览器显示的页面内容。HTML文件的结构如下表：（P20） 版本信息 <! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN ?” http://www.w3.org/TR/REC-html4.0/strict.dtd>  文件开始 <HTML>  头部 <HEAD> <! –头部开始- > <TITLE>标题名</TITLE> <! –HTML文件标题- > …其他头部内容定义标记… </HEAD> <! –头部结束->  主体 <BODY> <! –主体开始- > …主页内容（文本、图象等）… <ADDRESS>主页作者的信息</ADDRESS> <! –斜体显示主页作者的信息- > </ BODY > <! –主体结束- >  文件结束 </HTML> <! –HTML文件内容结束- >      徐 州 工 程 学 院 教 案 纸 版本信息 迄今为止HTML以公布了多个版本，目前用的较多的是HTML4.0，HTML4.0规范有三种文件语法定义，见教材P21—22自阅。 （1）HTML 4.0 Strict DTD （2）HTML 4.0 Transitional DTD （3）HTML 4.0 Frameset DTD 文件头部 文件头部位于文件开始标记<HTML>之后，并由开始标记<HEAD>和结束标记</HEAD>定义。头部内容包括标题名、文本文件的地址、创作信息等文件信息说明并由专门标记定义，它们都不在浏览器窗口内显示。头部内使用的主要标记有： 1）<TITLE> <TITLE>标记用于定义标题名。标题名括在起始和结束标记之间，格式为： <TITLE>标题名</TITLE> 标题名显示在浏览器的标题栏中。例P27上机练习题1. <html> <head> <title>我的主页</title> <!--标题名--> </head> <body bgcolor=”red”> <!—设定背景色--> <h1>我的主页</h1> </body> </html> 2）<BASE>标记 <BASE>标记是一个单标记，用于设定为使用相对引用而定义的基点URL，用来定义其后所有链接的起点，使浏览器知道在何处找到其他文件。 3）<META>标记 <META>标记是一个单标记，用于指明HTML文件自身的某些信息，例如文件创作工具、文档的作者、关键内容、所用语言等信息。它为搜索引擎等程序使用。格式为： <META name=” “ content=” “>或<META http-equiv=” “ content=” “> 例 <meta>标记-定时转换 （原教材）浏览器显示图tu1-9后，过15秒即自动转为图tu1-10所示页面 <html><head> <title>meta 用法</title> <meta http-equiv="refresh" content="15;url=tu1-10.html"> ‘refresh—更新    徐 州 工 程 学 院 教 案 纸 <title>ch107</title> </head> <body bgcolor="#ffff00"> <a href="tu1-10.html">tu1-10.html</a> <center> <h1 align="center">早发白帝城</h1> </center> <hr> <p align="center"> <img src="../图片/图1-51%20.gif" align="left"> 朝辞白帝彩云间<p align="center"> 千里江陵一日还<p align="center"> 两岸猿声啼不住<p align="center"> 轻舟已过万重山<p><hr><p><p> <font size=5 color="red" align="center">15秒后将自动转换。</font> </body> </html> <! --tu1-10.html> <html> <head> <title>tu1-10</title> </head> <body bgcolor="#00ff00"><div align="center"> <marquee behavior="alternate" width=400 height=50 hspace=30 vspace=20 loop=10 scrollamount=20 scrolldelay=100 bgcolor=yellow> <h2>欢迎你使用Web实例！</h2> </marquee> </div> </body> </html> 4）<LINK>标记 <LINK>和</LINK>用于链接外部文件。 5）<ISINDEX> <ISINDEX>标记是一个单标记，它的作用是在浏览器上建立一个交互索引框，以便用户输入内容检索数据库。格式为：   徐 州 工 程 学 院 教 案 纸 <ISINDEX prompt=”搜索输入”> 文件主体 文件主体位于头部之后，以标记<BODY>开始，以标记</BODY>结束。文件主体定义了Web主页显示的内容、如文字、链接、图象、表格或其他对象。 在<BODY>和</BODY>之间可以包含<P>、</P>、<H1>、</H1>、<BR>、<HR>等众多标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。 与<BODY>相关的属性有： background 图象设置主页的背景 bgcolor 设置主页的背景色 text 设置主页文本的颜色 link 设置超文本链接尚未访问文本时的颜色，缺省设置为蓝色 vlink 设置超文本链接已经访问文本的颜色，通常为紫色 alink 设置超文本链接被选择瞬间文本的颜色 属性是用来修饰标记的，放在开始标记内，如颜色、对齐方式、高度和宽度等。常用属性如下：P22—23 （1）对齐属性 （2）范围属性 （3）色彩属性 注释 注释标记用符号“<!”和“-->”，中间为注释内容，注释可以插入文本的任何地方，在浏览器上不显示。 例1-5 一个较完整的HTML文件 浏览器显示如图tu1-11所示。 <! doctype html public "-//w3c//dtd html4.0//en" "http://www.w3.org/tr/rec-html40/strict.dtd"> <html> <head> <title>长江三峡</title> </head> <body> <center> <h2>早发白帝城</h2> <font color="red" size="3">李白</font> <hr> <img src="../图片/图1-51%20.gif" align="left" width="345" height="209"> 朝辞白帝彩云间<p> 千里江陵一日还<p> 两岸猿声啼不住<p>    徐 州 工 程 学 院 教 案 纸 轻舟已过万重山<p></center><hr> <address> <a href="../asd/lly/">李大力</a>, <a href="../people/asd/">江中石</a><br> $ date:1998/08/02 00:20:03 $ </address> </body> </html> 1．4．4 创建一个简单主页 试设计如图1—18所示的简单主页并向网上发送自己的作品。P23 创建网页 设计一个简单的网页，具体操作步骤如下：P23 1）启动Windows系统，单击[开始]([程序]([附件]([记事本]命令，打开[记事本]窗口。 2）在记事本中输入下列代码： <! doctype html public "-//w3c//dtd html4.0//en" "http://www.w3.org/tr/rec-html40/strict.dtd"> <html> <head> <title>HTML文件</title> </head> <body> <center> <h2>HTML和Web主页</h2> <hr color=”#ff0000”> <img src="../图片/图1-51%20.gif" align="left" width="345" height="200"> &nbsp;&nbsp;&nbsp;&nbsp;Internet是当前世界上规模最大的计算机网络。WWW（World Wide Web）意为环球咨询网，是一种可发布图象、声音、运动图像等图像多彩信息的网络，他可以实现从一个文件到另一个文件、或到另一目录下的文件、甚至到同一文件内的某一段落的自由搜索。读者可能已在WWW网上遨游过，浏览过许多网页。网页上丰富的信息、生动的页面、获得信息的快捷，使你留恋忘返，叹为观止。不由自主的产生自己编写主页、在网上冲浪的强烈愿望，将你的作品送向世界。HTML就是一种为建立Web页而开发的网络应用语言，它提供了建立Web页的机制，使你能很方便的将希望放在页面上的内容以简单标记指明展示的格式。 </center><hr>    徐 州 工 程 学 院 教 案 纸 <address> <a href="../asd/lly/">李大力</a>, <a href="../people/asd/">江中石</a><br> $ date:1998/08/02 00:20:03 $ </address> </body> </html> 3）单击[文件]菜单中的[另存为]项，打开[另存为对话框]，在[保存类型]下拉列表框中选择[所有文件]，文件名后缀为 .html。 主页预览 使用Internet Explorer可以预览所编辑的HTML文件在浏览器上的显示情况。 主页修改 在Internet Explorer浏览器中，可以方便地对网页进行修改。具体操作如下：P26 1）—5） 上网发布 将HTML上栽Internet需必备连接软件和协议。因此，需具备以下环境：P26 发布Web页有两种方法，即装入ISP上的Web目录中，或运行自己的服务器。将文件装入ISP是非常容易的，操作步骤如下：P26 制作和发布Web站点： Internet上的网页是以站点为单位进行管理的，一个站点包含了组成站点的所有HTML页面、图象、文档以及其他相关文件和文件夹。用户可以在FrontPage2000里对站点进行诸如创建、删除、打开、发布、设置属性等操作，也可以对站点中的文件和文件夹进行操作。因此，创建站点是制作个人网页的前提。为了简化站点的创建，FrontPage 2000提供了创建站点的模板和向导。模板为用户提供了创建站点的框架，利用模板创建的站点中将具有相互链接的一系列网页，用户可根据自己的需要，再用内容和设计来充实这些网页。利用模板创建站点的步骤如下：    徐 州 工 程 学 院 教 案 纸 进入FrontPage2000环境(单击“文件”菜单，选择“新建”(单击“站点…”，引出“新建”对话框如图(若选择“个人站点”模板(在对话框中指定新站点的位置如d:\创建\个人web（文件夹\站点名）(单击“确定”按纽。 站点建好后可以预览运行效果并进行修改、设计等。 把PC机配置成服务器 目前有两类服务器：适用于Windows NT的站点服务器软件Internet Information Server (IIS) 和适用于Windows98的站点服务器软件Personal Web Server（个人站点服务器），即PWS。 在完成了一个站点的设计后，最迫切的愿望是把站点发布出去，但由于条件的限制，不太可能把所有实验性的站点都发送到真正的服务器中，因此一个可行的办法是把个人用PC机配置成服务器，这样可以在个人机上实现站点的设计、测试及发布。将PC机变成Web服务器，必须安装Personal Web Server（个人站点服务器），即PWS，在Windows 98安装盘中附带有PWS文件夹，add/ons/setup.exe即可安装。 发布站点：站点制作完成后，可以发布到本机其它位置上、可以发布到服务器上、可以通过网络互连发布到其它服务器和计算机上。站点的发布从本质上讲就是文件的复制。若用FrontPage发布站点步骤如下： 在FrontPage2000环境下(打开站点(单击“文件”菜单，选择“发布站点”(单击引出“发布站点”对话框如图(在“指定发布站点的位置”处选择站点服务器的名称及路径(单击“发布”按纽(发布成功后单击完成按纽。 第1章计划学时为7学时（其中上机3学时），教学目的和要求： 通过本章的学习，应使学生了解网页设计技术的发展概况和作用，使用本教材的学习方法。掌握网页设计的相关概念，熟悉网页设计所使用的HTML语言、浏览器，了解网页设计所采用的开发工具等。通过实例掌握创建一个简单主页的方法。 通过本章的学习要求掌握以下几点： 1．了解主页和HTML标记语言的关系。HTML是一种标记语言，这种语言仅使用附加标记标注文本，指定文本或其他对象在主页上的表示格式。 2．了解HTML4.0版本的主要特点 3．了解HTML文件的编辑格式及各主要结构标记的意义和用法。 4．编写简单的主页并向网上发送自己的作品。 本章任务：试编写如图1-18所示的简单主页并向网上发送自己的作品。    徐 州 工 程 学 院 教 案 纸 教学重点：Internet的发展概况、网页设计的相关概念、网页开发工具、HTML4.0基础。 教学难点：创建一个简单主页并上网发布。 上机练习题 P27 1. 2. 3.    徐 州 工 程 学 院 教 案 纸 第2章 基本网页设计 [学习要点] 1. 文本网页的设计及布局 2. 设置页面属性 3. 主页加入图像 4. 在主页中使用列表 创建超文本链接 2.1 文本网页的设计和布局 本节介绍如何制作一个以文本为主体的主页的基本知识和方法，主页中文本的文字风格及布局。通过本节的学习要求掌握以下几点： 1．掌握<BODY>标记几个常用属性的使用格式，本章主要学会怎样给主页设定不同的颜色背景或图象背景。 2．学会在编写主页文本时标题的设置、文本文字的大小及颜色的设定方法和在主页上设置流动字幕的技巧，使得设计的主页生动活泼。 3．学会在编写主页文本时怎样使用不同的字体、短语风格及使用<Q>、<CITE>标记的短文引用和长文引用的方法。 4．掌握文本的布局技巧和方法。学会文本块在主页上的布局方法、预置文本的特殊格式。 本节任务：做一个如图2-1（tu2-1）所示的介绍人物的主页。文字部分使用不同的字体、颜色、短语风格及段落布局。在学完本节后，可以编写诸如新产品说明、商品广告、企业介绍、招聘启事等内容的主页。 Web主页主要由图形、表格、对象以及环绕它们的文本组成。主页中文本的文字风格及布局在主页设计中是非常重要的。例如，标题字的大小、颜色、是否居中及各级标题的配置；文本内容的字体、大小、及颜色的设定；文章分段及段落的风格、长文引用及短语引用的格式；页面的整体布局等，都是在主页设计中必须考虑的问题。（在FrontPage2000中文本的输入和修饰与Word很相似，注意利用菜单和工具栏）本节介绍如何作成一个以文本为主体的主页的基本知识和方法。 2．1．1 背景色和背景图像 设置网页的背景色 在主页中，使用标记<body>的属性bgcolor设定主页背景色。格式为：    徐 州 工 程 学 院 教 案 纸 <body bgcolor=”颜色值”> 颜色值可以是英文颜色名或16进制的颜色值，如P30 表2-1所示 例2-1 主页背景色 tu2-1 bgcolor="#00ff00" <html> <head> <title>文本</title> </head> <body> <h1 align="center">计算机系教授简介</h1> <hr size=4 color="#ff00ff"> <center> <marquee bgcolor="#00ff00" wind=80% behavior="alternate" loop=-1> <font size="6" color="#ff0000">欢迎到计算机系学习！</font> </marquee> </center> <img src="../图片/祝惠民.GIF" align="left" width="140" height="120" alt="照片" hspace="20" vspacre="20"> <p><spacer type="horizontal" size="10"> <font size="4" color="ff00ff">张光明教授</font><p> <BIG>张光明教授</BIG><FONT SIZE="2">,男，<B><I>1940年10月</I></B>诞生于<FONT COLOR="0000ff">河北省石家庄市</FONT>。<B><I>1955年</I></B>至<B><I>1961年</I></B>在石家庄市第一中学学习，<B><I>1961年9月</I></B>进入<FONT size=4 color="#0000ff"><EM>天津科技大学</EM></font>信息学院计算机科学与技术系计算机软件专业学习。大学毕业后就职于<font color="#008000"><em>天津计算机研究所</em></font>任技术员，两年后考入<font color="#ffa500"><em>南天大学</em></font>信息学院攻读硕士学位。<B><I>1970年</I></B>调入<font color="#a52a2a"><em>天津科技大学</em></font>信息学院任教，并从事计算机图形学及计算机辅助设计学科领域的研究。<B><I>1980年</I></B>由国家公派到美国<font color="#90ff15"><em>加利福尼亚大学</em></font>攻读博士学位，<B><I>1988年</I></B>回国。现任<font color="#ffa500"><em>天津科技大学</em></font>信息学院教授，IEEE会员，天津计算机学会常务理事、全国计算机基础教育研究会副理事长。<p> <pre><h3><b>学术研究方向</b></h3> 1.计算机图形学及计算机辅助设计 2.计算机网络及计算机通信<p> <h3><b>学术研究成果</b></h3>    徐 州 工 程 学 院 教 案 纸 1.完成国家攻关研究4项，其中两项获<a href="zhang3.html">科学技术进步奖</a>。 2.在国际学术刊物发表<a href="zhang1.html">论文9篇</a>；出版<a href="zhang2.html">著作</a>4部。 </pre> </body> </html> 设置网页的图像背景 使用标记<body>的background属性可以给主页设置背景图象。格式为：<body background=”图象”> 图象系指图象文件，可以是.GIF文件、JPEG文件或PNG文件。指定图象文件的地址有两种形式，即绝对路径方式和相对路径方式。（绝对路径必须写明URL。相对路径是指在调用同一计算机内的文件时，不需给出完整的URL。如果两个文件在同一目录内，则只需给出文件名即可；如果不在同一文件内，则需给出目录名/文件名。） 例2-2 图象背景 tu2-3 <body background="../图片/海边.JPG"> 2．1．2 标题 标题是一篇文章或一段文本的题目，是以某种方式被加强、被突出的词组或短语。在主页设计中，使用<Hn>标记设定标题的级别，格式为： <Hn>标题</Hn> n的值可取1-6的整数值，1时最大，取6时最小，缺省时为<H6>。 例2-3 标题 tu2-4 <html> <head> <title>标题</title> </head> <body bgcolor="#00ff00"> <h1 align="center">天津科技大学计算机系教授简介</h1> <hr size=4 color="#ff00ff"> <H1>张光明教授</H1><p> &nbsp;&nbsp;&nbsp;&nbsp;张光明教授,男，1940年10月诞生于河北省石家庄市。现任天津科技大学信息学院教授，IEEE会员，天津计算机学会常务理事、全国计算机基础教育研究会副理事长。 <h2>张光明教授研究方向</h2><p> <h2>张光明教授研究成果</h2><p> </body> </html>   徐 州 工 程 学 院 教 案 纸 其中“&nbsp;”为非换行空格符。 2．1．3 文字大小 1.<FONT>标记 使用<FONT>标记设定一段文章、一个语句、一个单词或多个单词的文字大小。格式为： <FONT size=数字>一段文章、一个语句、一个单词或多个单词</FONT> <FONT>标记中数字的取值范围为1-7，size取7时最大，1时最小。<FONT size=7>比<H1>稍大。 例2-4 文字大小 tu2-5 &nbsp;&nbsp;&nbsp;&nbsp;张光明教授,<font size="2">男，1940年10月诞生于河北省石家庄市</font>。1955年至1961年在石家庄市第一中学学习，1961年9月进入<font size="4">天津现科技大学</font>信息学院计算机科学与技术系计算机软件专业学习。1970年调入<font size="5">天津科技大学</font>信息学院任教，并从事计算机图形学及计算机辅助设计学科领域的研究。现任<font size="6">天津科技大学</font>信息学院教授，IEEE会员，天津计算机学会常务理事、全国计算机基础教育研究会副理事长。<p> 2.<BASEFONT> 使用<BASEFONT>标记可以相对指定文字大小。方法是，首先使用标记 <BASEFONT size=x> 指定基准大小，x值取1-7范围内的整数值。然后使用 <FONT size=±y>文本</FONT> 随时改变文字的大小。例如x=4时，y=+1相当与<FONT size=5>。注意，在一个文件中<BASEFONT size=x>只能使用一次（一个基准）。HTML4.0不推荐使用。 例2-5 相对指定文字大小 tu2-6 &nbsp;&nbsp;&nbsp;&nbsp;张光明教授,<basefont size="2">男，1940年10月诞生于河北省石家庄市</font>。1955年至1961年在石家庄市第一中学学习，1961年9月进入<font size=+2>天津科技大学</font>信息学院计算机科学与技术系计算机软件专业学习。1970年调入<font size=+3>天津科技大学</font>信息学院任教，并从事计算机图形学及计算机辅助设计学科领域的研究。1980年由国家公派到美国<font size="+4">加利福尼亚大学</font>攻读博士学位，1988年回国。现任<font size=+5>天津科技大学</font>信息学院教授，IEEE会员，天津计算机学会常务理事、全国计算机基础教育研究会副理事长。<p>    徐 州 工 程 学 院 教 案 纸 2．1．4 文本颜色 主页中文本颜色的设定有两种方法：一是在<BODY>标记中使用text属性设定整个主页文字的颜色，二是在<FONT>标记中使用color属性设定一段文章、一个语句、一个单词或多个单词甚至一个字的颜色。 1. 使用text属性 文字的颜色可由<BODY>标记中使用text属性来设定。格式为： <BODY text=”颜色”> 例2-6 文本的颜色 tu2-7 <body text="ff0000"> <h1 align="center">计算机系教授简介</h1> <hr size=4> <H3>张光明教授</H3><p> &nbsp; &nbsp;&nbsp;张光明教授,<basefont size="2">男，1940年10月诞生于河北省石家庄市</font>。1955年至1961年在石家庄市第一中学学习，1961年9月进入<font size=+2>天津科技大学</font>信息学院计算机科学与技术系计算机软件专业学习。大学毕业后就职于<font size=+1>天津计算机研究所</font>任技术员，两年后考入<font size=+5>南天大学</font>信息学院攻读硕士学位。1970年调入<font size=+3>天津科技大学</font>信息学院任教，并从事计算机图形学及计算机辅助设计学科领域的研究。现任<font size=+5>天津科技大学</font>信息学院教授，IEEE会员，天津计算机学会常务理事、全国计算机基础教育研究会副理事长。<p> </body> 2. 设定某一字或某一文字段颜色 在编辑文本的过程中，可以变化某一字或某一文字段颜色。格式为： <FONT color=”颜色”>字或文字段</FONT> 其中“颜色”使用表2-1中的值。例如： <FONT color=”#ffffff”>文字段颜色为白色。</FONT> 或 <FONT color=”RED”>文字段颜色为红色。</FONT> 例2-7 字段颜色 tu2-8 &nbsp;&nbsp;&nbsp;张光明教授,<font color="#008000" size=2>男，1940年10月诞生于河北省石家庄市</font>。1955年至1961年在石家庄市第一中学学习，1961年9月进入<font color="#0000ff" size=2>天津科技大学</font>信息学院计算机科学与技术系计算机软件专业学习。大学毕业后就职于<font size=1>天津计算机研究所</font>任技术员，两年后考入<font color="#ff00ff" size=3>南天大学</font>信息学院攻读硕士学位。1980年由国家公派到美国<font color="#dbdbf8" size="5">加利福尼亚大学</font>攻读博士学位，1988年回国。现任<font color="#ff00ff" size=4>天津科技大学</font>信息学院教授，IEEE会员，天津计算机学会常务理事、   徐 州 工 程 学 院 教 案 纸 全国计算机基础教育研究会副理事长。<p> 2．1．5 字幕 在主页上设置字幕可使得主页更加生动活泼，并有动态感觉。使用标记<MARQUEE>和</MARQUEE>可以实现字幕。格式为： <MARQUEE>文本</MARQUEE> <MARQUEE>标记的属性及其意义见教材P33—34 例2-8 字幕 tu2-9 <center> <marquee bgcolor="#00ff00" wind=80% behavior="alternate" loop=-1> <font size="6" color="#ff0000">欢迎到计算机系学习</font> </marquee> </center> 2．1．6 字体和短语 文本的字体 在主页设计中，可以使用字体标记设定主页中不同位置文本的字体。标记及格式的意义见教材P34页表2-2所示。 例2-9 字体设定 tu2-10 <body> <h1 align="center">计算机系教授简介</h1> <hr size=4 color="#ff00ff"> <b>张光明教授</b><p> &nbsp;&nbsp;&nbsp;&nbsp;<big>张光明教授,</big>男，<b><i>1940年10月</I></b>诞生于<font color="#ff00ff"><u>河北省石家庄市</u></font>。<b><i>1955年</i></b>至<b><i>1961年</i></b>在石家庄市第一中学学习，<b><i>1961年9月</i></b>进入<font color="#ff0000"><em>天津科技大学</em></font>信息学院计算机科学与技术系计算机软件专业学习。<b><i>1980年</i></b>由国家公派到美国<font color="#ffa500"><em>加利福尼亚大学</em></font>攻读博士学位，<b><i>1988年</i></b>回国。现任<font color="#0000ff"><em>天津科技大学</em></font>信息学院教授，IEEE会员，天津计算机学会常务理事、全国计算机基础教育研究会副理事长。<p> </body> 短语 短语设定标记用于标记文本短语的逻辑风格，各标记格式及意义见教材P35页表2-3所示。   徐 州 工 程 学 院 教 案 纸 例2-10 字体设定 tu2-11 <body> <h1 align="center">计算机系教授简介</h1> <hr size=4 color="#ff00ff"> <strong>张光明教授</strong><p> &nbsp;&nbsp;&nbsp;&nbsp;<big>张光明教授,</big>男，<strong>1940年10月</strong>诞生于<font color="#0000ff"><u>河北省石家庄市</u></font>。<strong>1955年至1961年</strong>在石家庄市第一中学学习，<strong>1961年9月</strong>进入<font color="#0000ff"><em>天津科技大学</em></font>信息学院计算机科学与技术系计算机软件专业学习。<strong>1980年</strong>由国家公派到美国<font color="#ff0000"><em>加利福尼亚大学</em></font>攻读博士学位，<strong>1988年</strong>回国。现任<font color="#ffa500"><em>天津科技大学</em></font>信息学院教授，IEEE会员，天津计算机学会常务理事、全国计算机基础教育研究会副理事长。<p> </body> 插入和删除 使用标记INS和DEL可实现插入和删除文本。格式分别为： <INS>插入文本</INS> <DEL>删除文本</DEL> 例2-11 INS和DEL tu2-12 <strong>张光明教授</strong><p> &nbsp;&nbsp;&nbsp;张先生治学严谨，教书育人。不断改进教学方法。他在一篇教学研究论文中写到：<cite>马克思说过</cite>：<q>在科学的大道上是没有平坦的道路可走的。只有在崎岖小路的攀登上不辞劳苦的人，才有希望到达光辉的顶点。</q><cite>只有严谨治学，加强能力训练，才能培养人才。</cite><p>&nbsp;&nbsp;&nbsp; &nbsp张先生在教学岗位上辛勤工作了<del>13</del><ins>35</ins>年，为国家培养了大批人才。 引用 在文章中常常引用一块文章、一个短语或一个短句，前者称为引用长文、后者称为引用短语。引用长文使用标记<BLOCKQUOTE></BLOCKQUOTE>，格式为： <BLOCKQUOTE>引用长文块</BLOCKQUOTE> 在标记<BLOCKQUOTE></BLOCKQUOTE>之间的文本是一个与上、下段文本无关的独立的文本块，显示时该文本块与上、下段文本之间各有一行空白行，并且左、右均缩进对齐。 引用一个短语或一个语句，被引用部分以强调的文字显示，称为引用短文。引用短文有两种方法：一是使用标记<CTTE>,格式为： <CTTE>单词或短句</CTTE>   徐 州 工 程 学 院 教 案 纸 中间的单词或短句用斜体显示。 <CTTE>标记也可以和<BLICKQUOTE>标记并用。格式为： <BLOCKQUOTE><CTTE>单词或短句</CTTE></BLOCKQUOTE> 二是使用<Q>标记引用短文，格式如下： <Q>引用短文</Q> 例2-12 引用 tu2-13 <strong>张光明教授</strong><p> &nbsp;&nbsp;&nbsp;&nbsp;张先生治学严谨，教书育人。不断改进教学方法。他在一篇教学研究论文中写到：<blockquote><cite>马克思说过</cite>：<q>在科学的大道上是没有平坦的道路可走的。只有在崎岖小路的攀登上不辞劳苦的人，才有希望到达光辉的顶点。</q><cite>只有严谨治学，加强能力训练，才能培养人才。</cite></blockquote> 2．1．7 行和段 文章的行间调整使用三个标记：即<BR>、<HR>和<P>标记。 强制改行 强制改行使用标记<BR>，位于文章一行的末尾，无结束标记。它强制文本换行。格式为： xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<BR> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<BR> xxxxxxxxxxxxxxxxxxxxxx<BR> 2. 段落 段落标记<P>用于分段，其位置在文章前段的末尾，并使前段与后段之间留一行空白。段落标记<P>可省掉结束标记。 例2-13 段落 tu2-14 <strong>张光明教授</strong><p> &nbsp;&nbsp;&nbsp;&nbsp;张先生治学严谨，教书育人。不断改进教学方法。<br>他在一篇教学研究论文中写到：<cite>马克思说过</cite>：<q>在科学的大道上是没有平坦的道路可走的。只有在崎岖小路的攀登上不辞劳苦的人，才有希望到达光辉的顶点。</q><cite>只有严谨治学，加强能力训练，才能培养人才。</cite><p>&nbsp;&nbsp;&nbsp; &nbsp张先生在教学岗位上辛勤工作了35年，为国家培养了大批人才。 3. 标尺线 标尺线标记<HR>是一个用于分段的标记。它在前后两个段落之间定义一条标尺线。在<HR>标记中使用属性width可以变化标尺线的长度。格式为： <HR width=x> 或 <HR width=x%> x为像素数，表示标尺线的长度。用%指定时，表示线长占屏幕宽度的百分数。   徐 州 工 程 学 院 教 案 纸 在设定长度的同时，使用属性size可设定标尺线的宽度。格式为： <HR width=x size=y> y为像素数，表示线的宽度。 标尺线的位置和着色。格式为： 见教材P38页 <HR align=”位置”> <HR color=”颜色”> 例2-14 标尺线 tu2-15 <h1 align="center">天津科技大学计算机系教授简介</h1> <hr size=4 color="#ff00ff"> <H3>张光明教授</H3><p> 4. 预置格式 在主页设计中，有时希望浏览器上照原样显示（原样输出）预先排好的一段文本，这时可使用HTML的预置文本功能。预置文本时使用<PRE>标记。 格式为： <PRE>段落格式</PRE> 例2-15 保持段落格式 tu2-16 <pre> <h3><b>学术研究方向</b></h3> 1.计算机图形学及计算机辅助设计 2.计算机网络及计算机通信 <h3><b>学术研究成果</b></h3> 1.完成国家攻关研究4项，其中两项获<a href="zhang3.html">科学技术进步奖</a>。 2.在国际学术刊物发表<a href="zhang1.html">论文9篇</a>；出版<a href="zhang2.html">著作</a>4部。 </pre> 2．1．8 布局 文本块（和图象）在主页上的布局通常有三种方式，对中、左对齐和右对齐，所使用的标记说明如下。 1．居中 在布局上使文本块（或图象）居中的标记及其格式如下： （1）使用<P>标记和align属性的center值。格式为： <P align=”center”>文本或图象</P> （2）使用<center>标记。格式为： < center>文本或图象</ center > （3）使用<Hn >标记和align属性的center值。格式为： <Hn align=”center”>文本或图象</Hn> （n=1，2，3，4，5，6）   徐 州 工 程 学 院 教 案 纸 2．右对齐 （1）使用<P>标记和align属性的right值。格式为： <P align=”right”>文本或图象</P> （2）使用<Hn >标记和align属性的right值。格式为： <Hn align=”right”>文本或图象</Hn> （n=1，2，3，4，5，6） 3．左对齐 （1）使用<P>标记和align属性的left值。格式为： <P align=”left”>文本或图象</P> （2）使用<Hn >标记和align属性的left值。格式为： <Hn align=”left”>文本或图象</Hn> （n=1，2，3，4，5，6） 例2-16 对齐 tu2-17 <body> <h1 align="center">天津科技大学计算机系教授简介</h1> <hr size=4 color="#ff00ff"> <div align="center"> <marquee bgcolor="#00ff00" wind=80% behavior="alternate" loop=-1> <font size="6" color="#ff0000">欢迎到计算机系学习</font> </marquee> </div> <p align="center"> <font size="4" color="#ff00ff">张光明教授,</font></p> 张光明教授,男，1940年10月诞生于河北省石家庄市。1955年至1961年在石家庄市第一中学学习，1961年9月进入天津科技大学信息学院计算机科学与技术系计算机软件专业学习。<p align="right">大学毕业后就职于天津计算机研究所任技术员，两年后考入南天大学信息学院攻读硕士学位。1970年调入天津科技大学信息学院任教，并从事计算机图形学及计算机辅助设计学科领域的研究。1980年由国家公派到美国加利福尼亚大学攻读博士学位，1988年回国。<P>现任天津科技大学信息学院教授，IEEE会员，天津计算机学会常务理事、全国计算机基础教育研究会副理事长。</p> </body> 4．<DIV>标记 当要在许多段落中设置对齐方式时，常使用<DIV>标记及align属性。格式为： <DIV align=”center”>文本或图象</DIV> 居中 <DIV align=”right”>文本或图象</DIV> 右对齐 <DIV align=”left”>文本或图象</DIV> 左对齐    徐 州 工 程 学 院 教 案 纸 2.2 主页中加入图像 通过本节的学习要求掌握以下几点： 1．了解Web主页制作中可以使用的图像文件的格式及简单的作成方法。Web主页可以使用的图像文件有GIF、JPEG和PNG等格式。 2．掌握将图像文件插入主页的IMG标记的用法及图像在主页页面上位置的设定、图像尺寸控制、图像替代说明、图像加框等方法。 3．掌握主页图、文合排时图像和文字的布局方法。 本节任务：制作一个如图2-10（tu3-1）所示的介绍本节内容的主页。参照这个主页的格式，可以制作类似的产品说明、商品广告、招生简章、旅游指南、企业介绍等主页。 文本和图象是网页设计中最基本也最重要的内容，一个设计者要将自己的设计意图充分表达清楚为大家公认，就要按规范的要求，合理的将自己的设计意图用图形、文字等表达清楚。常言到：“一幅图纸抵千言万语”。在设计有关产品说明、商业广告、招生简章、旅游指南、企业介绍等类型的主页时，在主页上插入一幅幅实景照片，再配以优美、流畅的文字说明，作成一个图文并茂、引人入胜的页面，会产生良好的效果。本节在说明如何制作主页用图象文件的基础上，介绍将图象插入主页的方法和图象、文本交互布局的技巧。 2．2．1 加入图像 1. 图象文件的格式 图片(制作(插入页面(浏览器显示。（制作：照片、图片扫描仪；光盘、上网下载；数码摄相等） 在网页中图像以图像文件的方式存在，最常用的图像文件是.GIF和.JPEG格式。（其他格式还有：BMP、EPS、MAC、MSP、PCD、PCX、RAS、TIFF、WMF和WPG等，可以将它们转换成.GIF和.JPEG格式，FrontPage将少于或等于256色的图像转换为.GIF格式，将多于256色的图像转换为.JPEG格式。） （1）GIF格式 GIF格式存储的图像文件是8位颜色（256）的数据。16位（32000色）或24位（约1670万色）的风景画或照片，则必须用图像软件或变换器变换成8位。 GIF格式的图像除了普通的图像外，还有透明GIF和动画GIF。透明GIF用特定的颜色实现透明化使与背景图像相吻合，图像就象镶嵌在背景上；动画GIF可以连续看到多幅GIF图像，体现动画效果。 （2）JPEG格式    徐 州 工 程 学 院 教 案 纸 JPEG格式的图像对应24位的彩色图像，适用于彩色照片等高品质的图像。JPEG格式的图像可以压缩后使用，压缩率可以从1/4到1/20。压缩率高时文件占用内存少，下载时间短，但恢复时图像质量下降。 2. 图像文件的制作 （1）GIF文件的制作 P41—45 利用Photoshop修饰图片制作.gif文件的步骤： 进入Photoshop环境(打开要修饰的图片(修饰图片(选择文件输出格式（GIF）(起名保存。 步骤：1）—2） （2）透明GIF文件的制作 步骤：1）—8） （3）交错GIF文件的制作 步骤：1）—8） （4）JPEG文件的制作 JPEG文件的制作步骤：1）—4） 3. 主页中加入图像 主页中加入图像使用标记<IMG>，格式为： <IMG src=”文件名.gif” alt=” “ longdesc=” “> 属性说明如下： src="图像文件名"：可以是绝对路径或相对路径，图像可以是.gif文件.jpeg文件或.png文件。 Alt="简单说明"：用于不能显示图像的浏览器或浏览器能显示图像但显示时间过长时，先显示图像的文本说明。 longdesc="xx.html"：指明关于图像的详细说明以补充alt属性的简单说明。 例如：将asd.gif输入在图像下引一条标尺线时，可写为： <body> <p> <img src=”asd.gif” alt=”ASD” longdesc=” asd.html”> <HR> </body> 例tu3-9 主页中加入图像 tu3-9 这幅图片<img src="../图片/Image15.gif" width="106" height="91" hspace="40">是本书的标签。 4. 图像的替代文本 使用属性alt设定图像的替代文本。用于浏览器不支持图像或浏览器虽支持图像但装载时间过长时，先显示图像的替代文本说明。格式为： <IMG src=”图像文件名.gif” alt=”替代文本“>   徐 州 工 程 学 院 教 案 纸 例如：<body> <img src=”***.gif” alt=”SANXIA” width=200 height=200> </body> 例tu3-10 替代文本 tu3-10 <body> <h1 align="center">图像的替代文本</h1> <HR size=4 color="#ff00ff"> &nbsp;&nbsp;&nbsp;&nbsp;使用属性alt设定图像的替代文本。用于浏览器不支持图像或浏览器虽支持图像但装载时间过长时，先显示图像的替代文本说明。格式为： <PRE> &lt;img src="图像文件名.gif" alt="替代文本"&gt; </PRE> <p> 这幅图片<img src="../图片/Image15.gif" width="106" height="91" hspace="40" alt="本书的标签">是本书的标签。<hr> </body> 5. 图像尺寸的设定 设定主页中图像的高和宽使用<IMG>的属性width和height，格式为： <img src="图像文件名.gif" width=x height=y> 其中x、y可取象素数，也可取百分数。例如： <img src="asd.gif" width=20 height=20> <img src="asd.gif" width=20% height=20%> 例如： <body> <img src="photo-52.gif" width=200 height=100> </body> 例tu3-11 图像的高和宽 tu3-11 <img src="../图片/Image15.gif" width="110" height="90"> <img src="../图片/Image15.gif" width="90" height="70"> <img src="../图片/Image15.gif" width="70" height="50"> 6. 图像加边 使用<IMG>标记的属性BORDER，可以给图像加边，格式为： <img src="图像文件名.gif" border=”边宽”> 边宽的单位是象素数。例如： <BODY> <P align=”center”> <IMG src=”3-14.gif” border=”50”>   徐 州 工 程 学 院 教 案 纸 </P></BODY> 例tu3-12 图像加边 tu3-12 <img src="../图片/Image15.gif" width="110" height="90" border=20> <img src="../图片/Image15.gif" width="90" height="70" border=10> <img src="../图片/Image15.gif" width="70" height="50" border=5> 2．2．2 图像布局 1. 图像在页面居中 使图像在页面居中有两种方法。一是使用标记<CENTER>，二是在标记<P>内使用ALIGN属性。格式为： <CENTER> <IMG src=”xxx.gif”> </CENTER> 或 <P align=center> <IMG src=”xxx.gif”> </P> 例tu3-13 图像位置 tu3-13 <CENTER><img src="../图片/Image15.gif" width="110" height="90" border=20> </CENTER> <HR> &nbsp;&nbsp;在标记&lt;P&gt;内使用ALIGN属性：<BR> <p ALIGN="CENTER"> <img src="../图片/Image15.gif" width="90" height="70" border=10></P> <p ALIGN="RIGHT"> <img src="../图片/Image15.gif" width="70" height="50" border=5> 2．空白 （1）使用标记<SPACER> 标记<SPACER>可以自由设置空白。但是标记<SPACER>不能单独使用，必须与属性TYPE和SIZE一起使用。格式为： <SPACER type=”x” size=y> 属性type的用法为： type=”vertical” 设定纵向空白 type=”horizontal” 设定横向空白   徐 州 工 程 学 院 教 案 纸 （2）设置图像和文本之间的空白 设置图像和文本之间的空白可以在标记<IMG>内使用属性hspace和vspace，格式为： <IMG src=”图像文件名.gif” hspace=”x” vspace=”y”> hspace=”x” 设定水平方向的空白 vspace=”y” 设定垂直方向的空白 x，y为像素数。 例tu3-14 设置图像和文本之间的空白 tu3-14 <HR size=4 color="#ff00ff"> &nbsp;&nbsp;&nbsp;&nbsp;使用标记&lt;spacer&gt;自由设定空白：<BR> <center> <img src="../图片/wanghaitao.jpg" width="120" height="80" alt="asd"> <SPACER type="horizontal" size=200> <img src="../图片/wanghaitao.jpg" width="120" height="80" alt="asd"></center> <HR> &nbsp;&nbsp;&nbsp;&nbsp;在标记&lt;IMG&gt;内使用hspace属性设定水平方向空白：<BR> <p> <img src="../图片/wanghaitao.jpg" width="120" height="80" border=10 hspace=50> <img src="../图片/wanghaitao.jpg" width="100" height="60" border=10 hspace=50> <img src="../图片/wanghaitao.jpg" width="80" height="40" border=5 hspace=50> <hr> <img src="../图片/wanghaitao.jpg" align="left" width="120" height="80" vspace=50> &nbsp;&nbsp;&nbsp;&nbsp;在标记&lt;IMG&gt;内使用vspace属性设定垂直方向空白，当设定align="left" width="120" height="80" vspace=50时文本从这里开始。 3．垂直对齐 图像和文本混排时，图像和文本在垂直方向的对齐使用align属性。格式为： 文本<IMG src=”图像文件名.gif” align=”位置参数”> 文本 align属性的位置参数可取为：    徐 州 工 程 学 院 教 案 纸 align=top 文本与图像的顶部对齐 align=middle 文本与图像的中央对齐 align=bottom 文本与图像的底部对齐 例tu3-15 文本与图像垂直方向对齐 tu3-15 <body> <h2 align="center">垂直对齐</h2> <HR size=4 color="#ff00ff"> &nbsp;&nbsp;&nbsp;&nbsp;文字与图像的 <img src="../图片/wanghaitao.jpg" align="top" width="120" height="80">顶部对齐 <HR> &nbsp;&nbsp;&nbsp;&nbsp;文字与图像的 <img src="../图片/wanghaitao.jpg" align="center" width="120" height="80">中央对齐<HR> &nbsp;&nbsp;&nbsp;&nbsp;文字与图像的 <img src="../图片/wanghaitao.jpg" width="120" height="80" border=10 hspace=50> <img src="../图片/wanghaitao.jpg" width="80" height="40" border=5 hspace=30>底部对齐。 </body> 2．2．3 图像和文字布局 1．图像与文本混排 可以任意地将图像夹在文字中进行文本和图像的混排，举例如下。 例tu3-16 图像和文本混排 tu3-16 <body> <h2 align="center">图像和文本组合</h2> <HR size=4 color="#ff00ff"> &nbsp;&nbsp;&nbsp;&nbsp;文字与图像组合的例子如下：<STRONG>将图像文件</STRONG>加入主页。 <P><img src="../图片/wanghaitao.jpg" align="top" width="80" height="40"><hr> <p>&nbsp;&nbsp;&nbsp;&nbsp;文字与图像组合的例子如下：</p> &nbsp;&nbsp;&nbsp;&nbsp;当align属性缺省时，主页中<img src="../图片/wanghaitao.jpg" width="80" height="40">文字与图像的底部对齐。<hr> <BR> &nbsp;&nbsp;&nbsp;&nbsp;文字与图像垂直方向的对齐使用align属    徐 州 工 程 学 院 教 案 纸 性并有三种方式： <UL> <LI>align="top"：文字与图像的顶部对齐。 <LI>align="middle"：文字与图像的中央对齐。 <LI>align="bottom"：文字与图像的底部对齐。 </UL><P> <p>&nbsp;&nbsp;&nbsp;&nbsp;文字分别与图像垂直方向的中央： <img src="../图片/wanghaitao.jpg" width="80" height="40" align="middle">底部： <img src="../图片/wanghaitao.jpg" width="80" height="40" align="bottom"><br>和顶部： <img src="../图片/wanghaitao.jpg" align="top" width="80" height="40"> 对齐例子。<STRONG>这种对齐仅限一行文本，</STRONG>当超出一行文本时，其他行文本将在图像的下部另起行显示。 </body> 2.文本环绕图像 在图像的左、右环绕文本使用align属性，格式为： <IMG src= “图像文件名.gif” align=”文本位置”>文本 其中位置参数可取为： align=”left” 图像居左，文本在图像右侧 align=”right” 图像居右，文本在图像左侧 例tu3-17 文本环绕图像 tu3-17 <body> <h2 align="center">图像和文本组合布局</h2> <HR size=4 color="#ff00ff"> <img src="../图片/图1-5.gif" align="left" width="200" height="120"> &nbsp;&nbsp;&nbsp;&nbsp;文字与图像组合的例子如下：<STRONG>将图像文件</STRONG>加入主页。 <P><img src="../图片/wanghaitao.jpg" align="top" width="80" height="40"><hr> <p>&nbsp;&nbsp;&nbsp;&nbsp;文字与图像组合的例子如下：</p> &nbsp;&nbsp;&nbsp;&nbsp;当align属性缺省时，主页中<img src="../图片/wanghaitao.jpg" width="80" height="40">文字与图像的底部对齐。<hr> <img src="../图片/Image15.gif" border=10 align="right" width="170" height="105">    徐 州 工 程 学 院 教 案 纸 &nbsp;&nbsp;&nbsp;&nbsp;文字与图像垂直方向的对齐使用align属性并有三种方式： <UL> <LI>align="top"：文字与图像的顶部对齐。 <LI>align="middle"：文字与图像的中央对齐。 <LI>align="bottom"：文字与图像的底部对齐。 </UL><P> <p>&nbsp;&nbsp;&nbsp;&nbsp;文字分别与图像垂直方向的中央： <img src="../图片/wanghaitao.jpg" width="80" height="40" align="middle">底部： <img src="../图片/wanghaitao.jpg" width="80" height="40" align="bottom"><br>和顶部： <img src="../图片/wanghaitao.jpg" align="top" width="80" height="40"> 对齐例子。<STRONG>这种对齐仅限一行文本，</STRONG>当超出一行文本时，其他行文本将在图像的下部另起行显示。 </body> 3.解除环绕文本 解除在图像的左、右环绕文本使用标记<BR clear>，格式为： <BR clear=”left”/”righ”/”all”> 参数意义： clear=”left” 解除在图像左放置的文本 clear=”right” 解除在图像右放置的文本 clear=”all” 解除在图像的左、右放置的文本 在插入标记<BR clea=” “>的下一行文本转入正常显示。 例tu3-18 解除文本环绕 tu3-18 <body> <h2 align="center">解除文本环绕图像</h2> <HR size=4 color="#ff00ff"> <img src="../图片/图1-5.gif" align="left" width="200" height="120"> &nbsp;&nbsp;&nbsp;&nbsp;文字与图像组合的例子如下：<STRONG>将图像文件</STRONG>加入主页。 <P><img src="../图片/wanghaitao.jpg" align="top" width="80" height="40"><hr> <p>&nbsp;&nbsp;&nbsp;&nbsp;文字与图像组合的例子如下：</p> &nbsp;&nbsp;&nbsp;&nbsp;当align属性缺省时，主页中<img src="../图片/wanghaitao.jpg" width="80" height="40">文字与图像的底部对齐。    徐 州 工 程 学 院 教 案 纸 <hr> <img src="../图片/Image15.gif" border=10 align="right" width="170" height="105"> &nbsp;&nbsp;&nbsp;&nbsp;文字与图像垂直方向的对齐使用align属性并有三种方式： <BR clear="all"><UL> <LI>align="top"：文字与图像的顶部对齐。 <LI>align="middle"：文字与图像的中央对齐。 <LI>align="bottom"：文字与图像的底部对齐。 </UL><P> <p>&nbsp;&nbsp;&nbsp;&nbsp;文字分别与图像垂直方向的中央： <img src="../图片/wanghaitao.jpg" width="80" height="40" align="middle">底部： <img src="../图片/wanghaitao.jpg" width="80" height="40" align="bottom"><br>和顶部： <img src="../图片/wanghaitao.jpg" align="top" width="80" height="40"> 对齐例子。<STRONG>这种对齐仅限一行文本，</STRONG>当超出一行文本时，其他行文本将在图像的下部另起行显示。 </body>    徐 州 工 程 学 院 教 案 纸 2.3 主页中使用列表 通过本节的学习要求掌握以下几点： 1．掌握列表的种类和格式 HTML4.0可实现下列几种形式的列表： （1）无序列表 使用标记<UL>和表项标记<LI>可实现无序列表。各表项单列一行，缩进排齐，表项前带加重记号。 （2）有序列表 使用标记<OL>和表项标记<LI>可实现有序列表。各表项单列一行，缩进排齐，表项前带顺序记号。 （3）菜单列表 使用标记<MENU>和表项标记<LI>可实现菜单列表。各表项单列一行，缩进排齐，表项前带加重记号。 （4）目录列表 使用标记<DIR>和表项标记<LI>可实现目录列表。各表项单列一行，缩进排齐，表项前带加重记号。 （5）定义项目列表 使用标记<DL>和标记<DD>、<DT>可实现定义项目列表。定义表项单列一行，说明表项缩进，表项前不带任何记号。 2．学会灵活运用列表 （1）无序列表和有序列表可以实现列表的嵌套，嵌套的列表逐层缩进，各层可设定不同的点符或顺序记号。 （2）几种列表形式可结合使用，制作生动的列表形式。 本节任务：建立一个如图2-23（tu4-1）所示的用列表形式表示一本书目录的主页。主页中包含无序列表、有序列表、定义列表及列表的嵌套结构。能够对会议议程、论文的写作提纲、课题研究的技术路线、朋友的通信录等等并列信息用列表的形式进行归纳表达。 列表：将信息用文字以某种方式排列出来。在日常生活中随时随地可以看到以列表形式展示的信息，如饭店的菜单、歌舞厅的歌单等。在主页中使用列表，可以清楚的看到定义顺序、信息排序及信息的相对重要性。并列的信息（数据）称为项。项前可以加符号或序号，也可以是各项并列而不加任何记号。带序号的称为有序列表，带加重符序号的称为无序列表，各项并列而不加任何记号的称为定义列表。上述三种列表形式的有机组合，可实现多样化的页面效果。    徐 州 工 程 学 院 教 案 纸 2．3．1 无序列表 1. 创建无序列表 HTML4.0提供了两类列表标记：一类是带加重符号或序号的枚举型列表标记；另一类是不带任何符号的定义型列表标记。枚举型列表标记有无序列表标记<UL>和有序列表标记<OL>及项目标记<LI>。 建立无序列表使用起始标记<UL>和结束标记</UL>，项目标记<LI>和它标记的项目括在其间，格式为： <UL> <LI>项目 <LI>项目 . . </UL> 项目标记<LI>是一个单标记，无结束标记。 例tu4-2 无序列表 tu4-2 <UL> <LI>WWW <LI>Browser <LI>HTML <LI>Home Page </UL> 无序列表具有以下特征： （1）项目部分和上下段文本之间各有一行空白。 （2）项目向右缩进并左对齐。 （3）各项前带加重记号。 2. 嵌套无序列表 一本书的目录，大多数是按章、节、条、款、项的格式逐层缩进展开的，使用无序列表的嵌套可以实现这种格式。无序列表嵌套的格式为： <UL> <LI>xxxx <UL> <LI>zzzz <UL> <LI>vvvvvvv <LI>bbbbbbb <LI>nnnnnnn </UL> <LI>ssssss    徐 州 工 程 学 院 教 案 纸 <UL> <LI>vvvvvvv <LI>bbbbbbb <LI>nnnnnnn </UL> </UL> <LI>xxxx <UL> <LI>zzzz <UL> <LI>vvvvvvv <LI>bbbbbbb <LI>nnnnnnn </UL> <LI>ssssss <UL> <LI>vvvvvvv <LI>bbbbbbb <LI>nnnnnnn </UL> </UL> <LI>…… </UL> 例tu4-3 无序列表的嵌套 tu4-3 <UL> <LI>HTML <UL> <LI>概述 <UL> <LI>Internet <LI>WWW主页 <LI>HTML标记语言 </UL> <LI>基础知识 <UL> <LI>Home Page的结构 <LI>文字大小 <LI>文字颜色    徐 州 工 程 学 院 教 案 纸 </UL> </UL> <LI>列表 <UL> <LI>概述 <UL> <LI>无序列表 <LI>顺序列表 <LI>定义列表 </UL> <LI>无序列表 <UL> <LI>无序列表的建立 <LI>无序列表的嵌套 <LI>无序列表的记号 </UL> </UL> </UL> 注意，在无序列表嵌套中，不同层间<UL>标记的加重记号依浏览器的种类而变化。 3. 设定加重记号 在无序列表中，使用type属性可以改变表项前的加重记号。格式为： <UL type=”值”> 或 <LI type=”值”> 在<UL>标记内嵌入type属性可以设定直到</UL>标记范围内的表项记号，type属性值有三种，格式为： <UL type=”disc”> 加重记号为实心圆点 <UL type=”circle”> 加重记号为空心圆点 <UL type=”square”> 加重记号为实心小矩形 在<LI>标记内嵌入type属性可以设定某个<LI>标记以下直到</UL>标记范围内列表表项前的记号，type属性值有三种，格式为： <LI type=”disc”> 加重记号为实心圆点 <LI type=”circle”> 加重记号为空心圆点 <LI type=”square”> 加重记号为实心小矩形 type属性值所对应的加重记号依机种和浏览器种类的不同而变化。 例tu4-4 无序列表加重记号的设定 tu4-4 <body> <H3 align="center">internet入门</H3> <UL>    徐 州 工 程 学 院 教 案 纸 <LI type="square">WWW <LI type="circle">Browser <LI>HTML <LI>主页 </UL> <UL type="square"> <LI>Home Page的结构 <LI>文字大小 <LI>文字颜色 </UL> </body> 4. 菜单列表 菜单列表也是一种无序列表，使用<MENU>标记可以建立菜单列表。作为无序列表，HTML4.0推荐使用<UL>标记。 例tu4-5 菜单列表 tu4-5 <MENU> <LH align="center">internet入门</LH> <LI><A href="aaa1.html">WWW</A> <LI><A href="aaa2.html">Browser</A> <LI><A href="aaa1.html">HTML</A> <LI><A href="aaa1.html">主页</A> </MENU> 5. 目录列表 目录列表也是一种无序列表，使用<DIR>标记可以建立目录列表。作为无序列表，HTML4.0推荐使用<UL>标记。 例tu4-6 目录列表 tu4-6 <DIR> <LH><EM>internet入门</EM></LH> <LI>WWW <LI>Browser <LI>主页浏览 <LI>HTML发展沿革 <LI>HTML文件 </DIR>    徐 州 工 程 学 院 教 案 纸 2．3．2 有序列表 1. 有序列表 在日常生活中人们更多的使用带序号的列表，以更清楚地表达并列信息的顺序。使用标记<OL>可实现带序号的列表。格式为： <OL> <LI>项目1 <LI>项目2 <LI>项目3 </OL> 例tu4-7 有序列表 tu4-7 <OL> <LI>WWW <LI>Browser <LI>HTML <LI>Home Page </OL> 有序列表具有以下特征： （1）列表项部分和上下段文本之间各有一行空白。 （2）列表项目向右缩进并左对齐 （3）各项前带顺序号。 2. 有序列表的嵌套 若想给一本书的章、节加上序号并区分出层次，可使用有序列表的嵌套技术。使用<OL>标记实现分层次有序列表的格式为： <OL> <LI>xxxx <OL> <LI>zzzz <OL> <LI>vvvvvvv <LI>bbbbbbb <LI>nnnnnnn . . </OL> <LI>ssssss <OL> <LI>vvvvvvv <LI>bbbbbbb    徐 州 工 程 学 院 教 案 纸 <LI>nnnnnnn . . </OL> . . </OL> <LI>xxxx <OL> <LI>zzzz <OL> <LI>vvvvvvv <LI>bbbbbbb <LI>nnnnnnn . . </OL> <LI>ssssss <OL> <LI>vvvvvvv <LI>bbbbbbb <LI>nnnnnnn . . </OL> . . </OL> <LI>…… . . </OL> 例tu4-8 有序列表嵌套 tu4-8 代码设计为 <H3 align="center">创建Web主页</H3><HR> <OL> <LI>HTML <OL>    徐 州 工 程 学 院 教 案 纸 <LI>概述 <OL> <LI>Internet <LI>WWW主页 <LI>HTML标记语言 </OL> <LI>基础知识 <OL> <LI>Home Page的结构 <LI>文字大小 <LI>文字颜色 </OL> </OL> <LI>列表 <OL> <LI>概述 <OL> <LI>无序列表 <LI>有序列表 <LI>定义列表 </OL> <LI>有序列表 <OL> <LI>有序列表的建立 <LI>有序列表序号的设定 <LI>有序列表序号种类的设定 </OL> </OL> </OL> 3. 序号种类 在<OL>或<LI>标记内使用type属性可以设定5种序号，即阿拉伯数字、大写英文字母、小写英文字母、大写罗马数字和小写罗马数字。格式为： <OL type=”1,A,a,i,I”> 或 < LI type=”1,A,a,i,I”> type值的意义为： 1 阿拉伯数字 A 大写英文字母 A 小写英文字母 I 大写罗马数字    徐 州 工 程 学 院 教 案 纸 i 小写罗马数字 注意：（1）type属性缺省时自动设定为阿拉伯数字 （2）<OL type=” ”>的作用范围为整个标记范围。 （3）< LI type=” ”>的作用范围是当前项 （4）在实际应用中多使用在<OL>标记内设定的方法。 例tu4-9 序号的种类 tu4-9 代码设计为 <BIG> <H3>HTML入门</H3> <OL type=A> <LI>WWW <LI>Browser <LI type=I>HTML <LI>主页 </OL> <EM>HTML实例教程</EM> <OL type=a> <LI>WWW主页 <LI>主页文本的布局 <LI>在主页中插入图像 <LI type=i>列表 <LI>表格 </OL> </BIG> 4. 设定起始序号 有序列表的序号可以从任意的数字开始。方法是在<OL>标记内使用start属性或在<LI>标记内加入value属性。格式为： <OL stret=x> <LI value=”x”> x为任意整数。注意，<OL stret=x>的作用域为当前<OL>标记，<LI value=”x”>的作用域为从当前项开始直到当前的</OL>标记为止的各项。 例tu4-10 顺序号变更 tu4-10 <html> <head> <title>顺序号变更</title> </head> <body> <OL>    徐 州 工 程 学 院 教 案 纸 <LI><EM>Internet入门</EM> <OL type=a start=2> <LI>WWW <LI>Browser <LI>HTML <LI>主页 </OL> <LI><EM>HTML实例教程</EM> <OL type=i> <LI>WWW主页 <LI>主页文本的布局 <LI>在主页中插入图像 <LI value=8>列表 <LI>表格 </OL> </body> </html> 2．3．3 定义项目列表 1. 定义项目的列表 定义项目的列表使用标记<DL>，<DT>和<DD>、</DL>。它们的功能是以列表的形式表示被定义的单词或被定义的语句，并具有行交互凹进表示的特征。一般而言，<DT>标记用于定义单词，<DD>用于定义语句。 项目标记<DD>和<DT>的一般用法为： <DL> <DT>定义单词1 <DD>单词1的说明 <DT>定义单词2 <DD>单词2的说明 <DT>定义单词3 <DD>单词3的说明 </DL> 和<LI>标记一样，<DT>、<DD>也是空标记。<DT>定义项目，自动换行并左对齐。 例tu4-11 定义项目 tu4-11 <body> <BIG> <DD>WWW是Internet最新的信息服务系统。    徐 州 工 程 学 院 教 案 纸 <DD>FTP允许用户向远程主机或从远程主机拷贝文件。 </body> 注意：<DD>定义项目内容，换行、不带记号并缩进左对齐。 tu4-12 定义标记 tu4-12 <body> <DL> <DT>WWW <DD>WWW是Internet最新的信息服务系统。 <DT>FTP <DD>FTP允许用户向远程主机或从远程主机拷贝文件。 </DL> </body> 2. 紧缩定义列表 <DL>标记中加入compact属性，则<DT>、<DD>各自定义的内容排在同一行，并且<DD >定义文本的缩进一致。 例tu4-13 同一行定义型列表标记的用法 tu4-13 代码设计为 <DL compact> <DT>WWW <DD>WWW是一种Internet网使用的软件。 <DT>HTML <DD>HTML是一种标记语言。 <DT>CGI <DD>CGI是公共网关接口。 </DL>    徐 州 工 程 学 院 教 案 纸 2.4 创建超文本链接 通过本节的学习要求掌握以下几点： 1．创建链接前必须建立各种连接资源，即准备好被链接的各个文件，如文本文件、图像文件、声音、视频文件等。 2．学会在不同文档间创建链接的方法和技巧。掌握在同一子目录下、同级子目录下、和上一级、下一级子目录下文件链接时URL的表示方法及<BASE>标记的用法。 3．掌握<A>标记的各种属性的意义及用法，特别是id属性在创建同一文档内的指定文章段链接时的应用。 4．掌握创建链接时热点文本颜色的设定。 5．掌握图像链接和图像映射的方法和技巧。 本节任务：创建一个如图2-32（tu5-1）所示的主页。主页的内容是一本书的简介和目录。单击各个目录项，将立即显示该项目录详细说明的页面，阅读后单击“返回”，则立即返回主页；单击蓝线框起来的图像则显示本书的详细说明，单击说明中的热点，则转到与热点相链接的其他部分。 在World Wide Web中超文本链接，起着非常重要的作用，它不仅使站点内的网页成为有机的整体，还可以在不同的站点之间建立联系。在浏览Web网页时，之所以能够快捷地从一个Web网页转到另一个相关的Web网页，就是因为在这些文件之间建立有超文本链接。超文本链接是从文本或图像指向另一个页面或其他类型文件的链接。一个超文本链接包括（两个端点、一个方向，开始端点（源锚）、目标端点（目标锚）、URL）两部分：一是在Web主页上看到的以蓝色显示的带下划线的一个单词、一个词组或蓝线框起来的一幅图片，称之为热点；二是告诉浏览器当用鼠标单击热点时它应该显示什么地方的内容，称之为URL引用。 根据超链接目标的不同，也可以把它分为绝对超链接和相对超链接。绝对超链接是指向其他站点或目录的，例如：http://www.ec.js.edu.cn。相对超链接则指向本站点，它不包括URL中的协议和计算机名称，如：“course/MBA.htm”。根据超链接是否指向当前网页，又可将相对超链接分为外部超链接和内部超链接，其中内部超链接也就是通常所说的书签超链接。 2．4．1 创建链接 1. 创建网页间的链接 在网页间创建链接前必须准备好链接资源，即制作成一个个目标文档或文件并存放在相应的地方，有确切的URL。链接资源包括HTML文件、图像文件、声音文件及视频文件等。 在主页上建立的超文本链接也称为锚点（Anchor）并由标记<A>定义。    徐 州 工 程 学 院 教 案 纸 基本句法为： <A href=”URL”>文本或图像</A> 这里必须使用结束标记</A>。“href”意为超文本引用，“URL”是一个有效的链接资源的地址，“文本或图像”是在浏览器上显示的热点的信息。 <A>标记可以使用下列属性： href 指定一个URL作为有效的链接资源的地址 name 指定当前文档内的一个字符串作为链接时可以使用的位置名称 Rel 记载由href属性设定的锚与原文章的关系 Rev 指定反向关系 Type 指定特定内容的类型 Hreflang 指定链接资源的语言 注意，依据链接资源存放的位置不同，可分为全局链接和局部链接。若资源文件存放在服务器中，称为局部链接；与本服务器以外的文件链接称为全局链接。在全局链接中，http写入的URL，称为绝对路径。例如： <A href=”http://www.example.com”>热点文本</A> 文件之间局部链接有四种情况：链接同一目录内的文件、链接下一级目录内的文件。链接上一级目录内的文件和链接同级目录内的文件。 （1）链接同一个目录内的文件 格式为：<A href=”文件名.html”>热点文本</A> 仅写入文件名即可。 创建文件间链接的步骤如下： 1）编写主页。在主页中设定热点文本。 2）编写其他欲链接的网页文件，即建立充足的文件资源。 3）在主页文件中使用<A href=” 欲链接的文件名.html”>热点文本</A>建立链接。 4）在被链接的网页文件中使用<A href=”主页文件名.html”>返回</A>建立与主页的链接。 例tu5-2 链接同一个目录内的文件 tu5-2 代码设计为 i主页的.html <body> … <center> <marquee bgcolor="#00ff00" wind=80% behavior="alternate" loop=-1> <font size="6" color="#ff0000">同一目录文件的链接</font> </marquee>    徐 州 工 程 学 院 教 案 纸 </center> … <p><spacer type="horizontal" size="10"> 随着<A href="eee1.html">Internet网</A>的普及，人们已不只满足于仅通过<A href="eee6.html">WWW</A>浏览器在网上查询和浏览信息，开始试着设计自己的Web主页。特别是最近，在网上发布商品广告、介绍企业、用户调查、网上购物等需求越来越多，掌握<A href="eee5.html">Web主页</A>的设计方法和技巧，成为人们渴望掌握的一种技能。许多高校已开设网页设计课程，有些公司也将网页设计技能作为招聘计算机人才的基本条件之一。本书就是介绍使用<A href="eee2.html">HTML语言</A>设计Web主页的基本方法和技术。<HR> … </body> ii链接的eee1.html文件 <html> <body> … <a href="tu5-1.html">返回主页</a> … </body> </html> （2）链接下一级子目录下的文件 格式为：<A href=”子目录名/文件名.html”>热点文本</A> 从子目录名开始写，表示移到原来的子目录名的下一级子目录；可加上“../”，亦可省略，即 <A href=”../ 子目录名/文件名.html”>热点文本</A> （3）链接上一级子目录内的文件 格式为：<A href=”../文件名.html”>热点文本</A> 这里的“../”不可缺省；如果是再上一级子目录，则可再加上“../”。 （4）链接同级子目录的文件 格式为：<A href=”../子目录名/文件名.html”>文本</A> 其中，“../”表示上级子目录；“子目录名”为同级子目录名。例如： <body> <A href=”../frame/frame05.html”>框架</A> </body> 2. 链接指定的文章段落 前述的文件链接都是从文件的开头开始的。所谓链接指定的文章段落是链接到文件中某一段落。此时必须首先对目标段进行定位命名。使用<A>    徐 州 工 程 学 院 教 案 纸 标记的name属性定义命名位置。格式为： <A name=”value”>字符串</A> 其中值value是定义的定位位置名，又称为锚名。例如： <A name=”www”>www简介</A> 其中，www是锚名。锚名必须是唯一、独自的。 使用<A>标记建立的锚名的格式为： <A href=”#锚名”>热点文本</A> 锚名前加“#”记号，文字必须是一致，并且上述定义的锚点仅是实现同一文件内的链接。 链接到特定的文章段同样有全局连接和局部链接。例如，在文件one.html中定义锚名：<A name=”anchor_one”>字符串</A> 则URL可取： 绝对URL：http://www.mycompany.com/one.html# anchor_one 相对URL：./ one.html# anchor_one或one.html# anchor_one 同一文档内定义的链接：# anchor_one 局部链接有5种形式，即同一文件内的某段落、同一目录下的其他文件的某一段落、下一级子目录下文件的段落、上一级子目录下文件的段落和同一级子目录内的文件的段落。局部链接时的设定格式如下： <A name=”锚名”>文字串</A> <A href=”#锚名”>热点文本</A> （1）链接同一文件内的某段落 链接同一文件内的某段落的步骤如下： 1）编写主页。在主页文件中使用<A href=”#锚名”>热点文本</A>建立链接。 2）在链接目的地使用<A name=”锚名”>文字串</A>建立锚地。 3）使用<A href=”#锚名”>返回</A>建立返回原链接点。 例tu5-3 链接同一文件内段落 tu5-3 代码设计为 <body> <h1 align="center">HTML实用教程说明</h1> <hr size=4 color="#ff00ff"> <center> <marquee bgcolor="#00ff00" wind=80% behavior="alternate" loop=-1> <font size="6" color="#ff0000">链接同一文章的不同段落</font> </marquee> </center> <img src="../图片/Image15%20.gif" align="left" width="106"    徐 州 工 程 学 院 教 案 纸 height="91" vspace="20"> <p><spacer type="horizontal" size="10"> 随着<A href="#son1">Internet网</A>的普及，人们已不只满足于仅通过<A href="#son2">WWW</A>浏览器在网上查询和浏览信息，开始试着设计自己的Web主页。特别是最近，在网上发布商品广告、介绍企业、用户调查、网上购物等需求越来越多，掌握<A href="#son3">Web主页</A>的设计方法和技巧，成为人们渴望掌握的一种技能。许多高校已开设网页设计课程，有些公司也将网页设计技能作为招聘计算机人才的基本条件之一。本书就是介绍使用<A href="#son4">HTML语言</A>设计Web主页的基本方法和技术。<HR> <hr><a name="son1"> <em>Internet入门</em><hr> &nbsp;&nbsp;&nbsp;&nbsp;Internet是当前世界上规模最大的计算机网Internet是冷战时代美国军方开发使用的网络，而后作为学术网在大学间使用，近年来Internet迅速拓展，成为拥有一亿多用户的世界性网络。 <a href="lj02.html">返回</a><hr> <hr><a name="son2"> <em>WWW</em><hr> &nbsp;&nbsp;&nbsp;&nbsp;WWW浏览器是使用WWW时的必备软件。目前，Internet上使用的浏览器主要有Netscape Navigator和Internet Explorer。Netscape Navigator3.0/4.0（图1-1），Internet Explorer3.0/4.0（图1-2）是当前最通用的浏览器。 <a href="lj02.html">返回</a><hr> <hr><a name="son3"> <em>主页</em><hr> &nbsp;HTML是生成WWW文件的主要工具，其目的是发送信息。主页是在WWW服务器中存储的信息，并通过WWW浏览器进行显示。 <a href="lj02.html">返回</a><hr> <hr><a name="son4"> <em>HTML4.0</em><hr> &nbsp;为了在WWW上发布信息，必须作成在WWW上能使用的形式并通过WWW浏览器显示的文件。而作成这样的文件所使用的语言就是HTML。用这种语言作成的文本文件称之为HTML文件。HTML（Hyper Text Markup Languae）是一种超文本标记语言。所谓超文本（Hyper Text）是指包含可链接文本本身其他段落或其他文件的关键词，这个关键词成为热区文本。通过单击热区文本可以查到我们感兴趣的与热区文本相关的段落或主页。 <a href="lj02.html">返回</a><hr> </body>    徐 州 工 程 学 院 教 案 纸 （2）链接同一目录下其他文件的段落 <A href =”文件名#锚名”>热点文本</A> <A NAME=”锚名”>热点文本</A> （3）链接下一级目录下其他文件的段落 <A href =”子目录名/文件名#锚名”>热点文本</A> <A NAME=”锚名”>热点文本</A> （4）链接上一级目录下其他文件的段落 <A href =”../文件名#锚名”>热点文本</A> <A NAME=”锚名”>字符串</A> （5）链接同级子目录下其他文件的段落 <A href =”../子目录名/文件名#锚名”>热点文本</A> <A NAME=”锚名”>字符串</A> 例tu5-4 同级子目录下文件的段落 tu5-4 <html> <head> <title>另一文件的段落</title> </head> <body> <h1 align="center">HTML实用教程说明</h1> <hr size=4 color="#ff00ff"> <center> <marquee bgcolor="#00ff00" wind=80% behavior="alternate" loop=-1> <font size="6" color="#ff0000">链接另一文件的段落</font> </marquee> </center> <img src="../图片/Image15%20.gif" align="left" width="106" height="91" vspace="20"> <p><spacer type="horizontal" size="10"> 随着<A href="tu5-5.html#son1">Internet网</A>的普及，人们已不只满足于仅通过<A href="tu5-5.html#son2">WWW</A>浏览器在网上查询和浏览信息，开始试着设计自己的Web主页。特别是最近，在网上发布商品广告、介绍企业、用户调查、网上购物等需求越来越多，掌握<A href="tu5-5.html#son3">Web主页</A>的设计方法和技巧，成为人们渴望掌握的一种技能。许多高校已开设网页设计课程，有些公司也将网页设计技能作为招聘计算机人才的基本条件之一。本书就是介绍使用<A href="tu5-5.html#son4">HTML语言</A>设计Web主页的基本方法和技术。<HR>    徐 州 工 程 学 院 教 案 纸 <hr> </body> </html> 单击热点“Internet”，页面显示如图5-5（tu5-5）所示。 <html> <head> <title>链接另一文章的段落</title> </head> <body> <hr><a name="son1"> <em>Internet入门</em><hr> &nbsp;&nbsp;&nbsp;&nbsp;Internet是当前世界上规模最大的计算机网Internet是冷战时代美国军方开发使用的网络，而后作为学术网在大学间使用，近年来Internet迅速拓展，成为拥有一亿多用户的世界性网络。 <a href="tu5-4.html">返回</a><hr> <hr><a name="son2"> <em>WWW</em><hr> &nbsp;&nbsp;&nbsp;&nbsp;WWW浏览器是使用WWW时的必备软件。目前，Internet上使用的浏览器主要有Netscape Navigator和Internet Explorer。Netscape Navigator3.0/4.0（图1-1），Internet Explorer3.0/4.0（图1-2）是当前最通用的浏览器。 <a href="tu5-4.html">返回</a><hr> <hr><a name="son3"> <em>主页</em><hr> &nbsp;HTML是生成WWW文件的主要工具，其目的是发送信息。主页是在WWW服务器中存储的信息，并通过WWW浏览器进行显示。 <a href="tu5-4.html">返回</a><hr> <hr><a name="son4"> <em>HTML4.0</em><hr> &nbsp;为了在WWW上发布信息，必须作成在WWW上能使用的形式并通过WWW浏览器显示的文件。而作成这样的文件所使用的语言就是HTML。用这种语言作成的文本文件称之为HTML文件。HTML（Hyper Text Markup Languae）是一种超文本标记语言。所谓超文本（Hyper Text）是指包含可链接文本本身其他段落或其他文件的关键词，这个关键词成为热区文本。通过单击热区文本可以查到我们感兴趣的与热区文本相关的段落或主页。 <a href="tu5-4.html">返回</a><hr> </body> </html>    徐 州 工 程 学 院 教 案 纸 3. id属性 id属性的应用十分广泛，它可以用于任何元素的开始标记内，包括<A>标记。因此，使用id属性设定锚名十分灵活。例如： <H2 id=”section2”>S ection2</A> <A href="# section2"> section2</A> 在<H2>内设置锚名，同样可实现同一文章内的链接。 例tu5-6 使用id属性创建连接 tu5-6 &nbsp;&nbsp;&nbsp;&nbsp;随着<A href="#son1">Internet网</A>的普及，人们已不只满足于仅通过<A href="#son2">WWW</A>浏览器在网上查询和浏览信息，开始试着设计自己的Web主页。特别是最近，在网上发布商品广告、介绍企业、用户调查、网上购物等需求越来越多，掌握<A href="#son3">Web主页</A>的设计方法和技巧，成为人们渴望掌握的一种技能。许多高校已开设网页设计课程，有些公司也将网页设计技能作为招聘计算机人才的基本条件之一。本书就是介绍使用<A href="#son4">HTML语言</A>设计Web主页的基本方法和技术。<HR><hr> <H2 id="son1">Internet入门</H2><hr> &nbsp;&nbsp;&nbsp;&nbsp;Internet是当前世界上规模最大的计算机网Internet是冷战时代美国军方开发使用的网络，而后作为学术网在大学间使用，近年来Internet迅速拓展，成为拥有一亿多用户的世界性网络。 <a href="tu5-3.html">返回</a><hr> <H2 id="son2">WWW</H2><hr> &nbsp;&nbsp;&nbsp;&nbsp;WWW浏览器是使用WWW时的必备软件。目前，Internet上使用的浏览器主要有Netscape Navigator和Internet Explorer。Netscape Navigator3.0/4.0（图1-1），Internet Explorer3.0/4.0（图1-2）是当前最通用的浏览器。 <a href="tu5-3.html">返回</a><hr> <H2 id="son3">主页</H2><hr> &nbsp;&nbsp;&nbsp;HTML是生成WWW文件的主要工具，其目的是发送信息。主页是在WWW服务器中存储的信息，并通过WWW浏览器进行显示。 <a href="tu5-3.html">返回</a><hr> <H2 id="son4">HTML</H2><hr> &nbsp;为了在WWW上发布信息，必须作成在WWW上能使用的形式并通过WWW浏览器显示的文件。而作成这样的文件所使用的语言就是HTML。用这种语言作成的文本文件称之为HTML文件。HTML（Hyper Text Markup Languae）是一种超文本标记语言。所谓超文本（Hyper Text）是指包含可链接文本本身其他段落或其他文件的关键词，这个关键词成为热区文本。通过单击热区文本可以查到我们感兴趣的与热区文本相关的段落或主页。 <a href="tu5-3.html">返回</a><hr>    徐 州 工 程 学 院 教 案 纸 4. 顺序链接 在主页的头部或尾部可以设置返向前页和翻到下一页的功能。 例tu5-7 返向前页和翻到下一页 tu5-7 代码设计为 &nbsp;&nbsp;&nbsp;HTML是生成WWW文件的主要工具，其目的是发送信息。主页是在WWW服务器中存储的信息，并通过WWW浏览器进行显示。 <HR><CENTER> <A href="eee12.html">前一页</A> <A href="eee14.html">次一页</A> <A href="lj00.html">返回主页</A> </CENTER> 5. 使用标题 在<A>标记中可使用title属性加入标题名，用以补充有关链接性质的信息。用法例子如下： <BODY> …some text… <P>You’ll find a lot more in <A href=”chapter2.html” title=”Go to chapter two”> chapter two</A>. <A href=”./ chapter2.html” title=”Get chapter two. ”> chapter two</A>. See also this <A href=”../images/forest.gif” Title=”GIF image of enchanted forest”>map of the enchanted forest.</A> </BODY> 例tu5-8 使用标题 tu5-8 <p><spacer type="horizontal" size="10"> <OL> <LI><A href="ddd2.html" title="HTML基础">HTML基础</A> <LI><A href="ddd3.html" title="文字布局">文字布局</A> <LI><A href="ddd4.html" title="图像和链接">图像和链接</A> <LI><A href="ddd5.html" title="列表">列表</A> <LI><A href="ddd6.html" title="表格">表格</A> <LI><A href="ddd7.html" title="表单">表单</A> </OL> 6. 链接到图像 在超文本链接中，链接资源可以是文本文件，也可以是图像文件、声音文件或视频文件。图像文件可以是.gif文件、JPEG格式文件或PNC格式文件。    徐 州 工 程 学 院 教 案 纸 例tu5-9 链接资源为图像 tu5-9 代码设计为 <p><spacer type="horizontal" size="10"> <OL> <LI><a href="../图片/海边.jpg" title="海边">海边</a> <LI><a href="../图片/外景.GIF" title="外景">外景</a> <LI><a href="../图片/Image15%20.gif" title="花朵">花朵</a> </OL> 7. 图像链接 图像链接是将图像设定为热区、单击图像则转移到被链接的文本或其他文件。通过图像进行的链接有四种方式，即链接同一目录下的文件、链接下一级目录下的文件、链接上一级目录的文件或链接同级目录下的文件。 （1）链接同一目录下的文件 格式为：<A href=”被链接的文件名”> <IMG src=”图像文件名”> </A> 例tu5-10 通过图像进行的链接 tu5-10 <A href="tu5-11.html"> <img src="../图片/Image15.gif" align="left" width="180" height="120" hspace="20" vspace="20"> </A> （2）链接同级目录下的文件 格式为：<A href=”../目录名/被链接的文件名”> <IMG src=”图像文件名”> </A> （3）链接下一级目录下的文件 格式为：<A href=”目录名/被链接的文件名”> <IMG src=”图像文件名”> </A> （4）链接上一级目录下的文件 格式为：<A href=”.. /被链接的文件名”> <IMG src=”图像文件名”> </A> 8. 链接 E-MAIL 可以将自己的E-MAIL与www页链接在一起。格式为： <A href=”mailto：自己E-mail的地址”>热点文本</A>    徐 州 工 程 学 院 教 案 纸 9. 热点文本颜色 （补充） 文本链接时，可以设定一般文本、热点文本的文字颜色。格式为： <BODY text=”颜色” bgcolor=”颜色” link=”颜色” alink=”颜色” vlink=”颜色”> 其中 text=”颜色” 设定一般文本的颜色 bgcolor=”颜色” 设定背景颜色 link=”颜色” 设定热点文本的颜色 alink=”颜色” 设定热点文本单击瞬间的颜色 vlink=”颜色” 设定己访问的链接的热点文本的颜色 例tu5-12 链接时文本和热点文本颜色的设定 tu5-12    徐 州 工 程 学 院 教 案 纸 2．4．2 图像映像 所谓图像映像就是在一幅图像中可以包含多个通往其他文件或站点的热点（超链接）。图像映像可以为网页设计者节省空间。将主页中的各图像或将一幅图像分割成几个区域，分别与不同的文件链接，称为图像映像。许多高级主页中使用图像映像作为一种图形菜单，使用户可以方便的选择一个想打开的页面。任何图像都可以用作图像映像。而且几乎所有的联合主页都使用一个图像映像。图像映像一般又称为区域映像或可单击映像。 在制作图像映像时，必须知道每个区域图像的像素坐标。检取坐标最简单的方法是在“画笔”进行。将图像读入后，移动鼠标可检取图形上像素的坐标。 可单击映像的格式为： <IMG src=”图像文件名” usemap=”#name”> <MAP NAME=”name”> <AREA shape=”opt1” coords=”opt2” href=”URL”> </MAP> 其中<IMG sec=>标记用于指定在可单击映像中使用的文件，属性usemap=”#name”则指定使用<MAP>标记在HTML文件中或其他地方定义的图像映像定义名。 图像映像的定义从<MAP>标记开始，到</MAP>标记结束。 <area>标记用于定义每个区域或热区。标记内的属性shape=”opt1”用于定义区域的形状，取值为： SHAPE=”rect”——指定映像区为矩形 SHAPE=”circle”——指定映像区为圆形 SHAPE=”polygon”——指定映像区为多角形 SHAPE=”default”——缺省指定映像区为矩形 属性coords=”opt2”用于定义一个用逗号分开的坐标列表。意义为： SHAPE=”rect” coords=”x1,y1”——指定矩形映像区的左上角坐标值 SHAPE=”circle” coords=”x,y,r”——指定圆形映像区的圆心坐标和半径值 SHAPE=”polygon” coords=”x1,y1,x2,y2,x3,y3”——指定多角形映像区各顶点的坐标值 属性href=”URL”用于指定被链接的文件地址。另外，属性nohref表示该区域无链接。 例tu5-13和tu5-14 图形映像 tu5-13和tu5-14 代码设计为 <body> <h2 align="center">基于用户的图像映像</h2><hr>    徐 州 工 程 学 院 教 案 纸 <img src="../图片/HANXIAOHUI2.jpg" width="500" height="330" usemap="#aMAP"> <MAP NAME="aMAP"> <AREA SHAPE="circle" coords="160,193,83" href="amap1.html"> <AREA SHAPE="rect" coords="338,157,505,372" href="amap2.html"> <AREA SHAPE="polygon" coords="158,311,71,430,334,439" href= "amap3.html"> <AREA SHAPE="default" nohref> </MAP> </body> 单击矩形看结果。 2．4．3 关联链接 关联链接是指使用<LINK>标记定义的链接。和<A>标记不同，它出现在标记<HTML>范围内，可以多次使用。LINK并不取出内容，而仅仅表示当前浏览器显示的文档与其他文档或资源以什么方式相关联的信息。例如： <HTML <HEAD> <TITLE>Chapter2</TITLE> <LINK rel=”Index” href=”../index.html”> <LINK rel=”Next” href=”../Chapter3.html”> <LINK rel=”Prev” href=”../Chapter1.html”> </HEAD> …the rest of the document… 其中，当前文档是“Chapter2.html”，rel属性指定了被链接的文档与当前文档的关联信息：它的下一页是Chapter3.html，上一页是Chapter1.html文档。 另外，使用LINK可以给检索引擎提供各种各样的信息，例如向检索引擎传送各种语言版本位置的信息等。 2．4．4 <BASE>标记的使用 <BASE>标记用于指定文件引用的基础URL路径，给浏览器提供在何处找到其他文件的信息。格式为： <BASE href=URL> 注意，<BASE>标记禁止使用结束标记。<BASE>标记仅能在<HEAD>范围内使用，一旦定义了基础URL之后，其他文档或图像文件的引用则成为相对引用。 例如：    徐 州 工 程 学 院 教 案 纸 <HTML> <HEAD> <TITLE>Our Products</TITLE> <BASE href=”http://www.aviary. com/products/intro.html”> </HEAD> <BODY> <P>Have you seen our <A href= “../cages/birds.gif “>Bird Cages</A>? </BODY> </HTML> 其中，<BASE>标记定义了基础URL地址www.aviary. com，本文件中的随后引用都是相对引用，即URL“../cages/birds.gif”相当于： http:// www.aviary.com//cages/birds.gif 上机练习题 P73 1. 2. 3.    徐 州 工 程 学 院 教 案 纸 第3章 高级主页设计 [学习要点] 1. 创建表格 2. 多窗口主页——框架 3. 输入表单 4. 声音和动画 5. 主页布局 3.1 创建表格 通过本节的学习要求掌握以下几点： 1．怎样在主页中实现表格 使用表格定义标记<TABLE>和行、列定义标记（<TR>，<TD>，<TH>）作成简单的表格。注意表格定义标记<TABLE>必须成对使用；行、列定义标记（<TR>，<TD>，<TH>）可以只使用起始标记，也可以使用结束标记。 2．实现表格的行列合并 表格的行、列合并使用rowspan、colspan属性。行、列合并可以实现多层表头及数据的有机排列，以实现灵活的数据布局，从而使表格更便于浏览。 3．表格的框线控制 表格的框线和格线控制属性可使你用不同风格的边框和格线外观组织同一格式的表格，同时通过颜色的设定（使用bordercolor、bordercolordark、bordercolorlight属性）可使表格边框更加生动悦目。 4．表格尺寸的调整 使用属性width可对表格的整体宽度及表元的宽度进行调整。表元的宽度可在COLGROUP及COL内通过width属性设定列宽。表元的高度使用height属性设定。 5．表格的着色和嵌套 使用bgcolor、background属性给表格或表元着底色或图像背景，同时通过给数据着色和给边框、格线着色以作成绚丽多彩的表格。表格的嵌套指的是表中套表，表格嵌套的使用使表格能更清晰地表达信息。 本节任务：作成一个如图3-1所示的职工基本信息表。在建立过程中使用表格的定义、表格的行组、列组结构化设计、边框控制及布局设计等功能。    徐 州 工 程 学 院 教 案 纸 本节以职工基本信息表为例说明在主页中如何建立一个表格和文本如何在主页上布局。利用类似的方法和技巧，可以作成商品明细表、工资表及人才招聘表等各种表格，再配上简明扼要的说明，组成一个生动的主页在网上发布。 在网页中经常使用表格来组织和处理数据，表格是主页的一部分。将文本或图像按一定的行、列规则进行排列称为表格。使用表格可使得数据信息更容易浏览，具有清楚、明了的特点，还可以利用表格对网页的内容进行布局和定位，因此，创建和编辑表格是网页制作的一个很重要的部分。HTML有极强的表格功能，它可以把文字、图像、声音甚至视频信息组织在表格中，也可以使用表格对文本、图像或其他对象实现版面设计、作成生动、活泼的主页。 3．1．1 建立表格 1.基本格式 主页中建立表格的基本格式如下： <TABLE> <TR> <TD>表项1</TD><TD>表项2</TD>…………….. <TD>表项n</TD> <TR> <TD>表项1</TD><TD>表项2</TD>…………….. <TD>表项n</TD> …… </TABLE> （1）<TABLE>标记 在主页中使用标记<TABLE>和</TABLE>定义表格，表格内容放在开始标记<TABLE>和结束标记</TABLE>之间。 表格内容定义标记有行定义标记<TR>和列定义标记<TD>。<TR>表示表格的一行开始，是一个单标记，也可以使用结束标记</TR>表示一行表项的结束；<TD>为列定义标记，数据写在<TD>和</TD>之间。 <TABLE>标记内常用以下属性定义表格的外观风格： border=”n”——定义表格边框的粗细，n取整数，单位为像素。 bordercolor=”颜色值”——定义表格边框的颜色。 summary=”简要说明”——对表格的格式和内容作简要说明。 bgcolor——设定表格的背景色。 background——设定表格的背景图像。 width=”n/n%”——设定表格的宽度。 Height=”n”——设定表格的高度。 align=”left/right/center”——定义表格在页面上的水平对齐方式。 cellpadding——调节表单元线与数据之间的距离。    徐 州 工 程 学 院 教 案 纸 cellspacing——调节表元与边框间的空白。 rules=”参数”——设定表格线。 rules的参数及意义如：P76 frame=”参数”——设定表格边框。 frame的参数及意义如：P76 （2）<TR>标记 <TR>表示表格的一行开始，是一个单标记，也可以使用结束标记</TR>表示一行表项的结束；<TR>标记的主要属性如：P77 （3）<TD>标记 <TD>为列定义标记，数据写在<TD>和</TD>之间。<TD>标记的主要属性如：P77 例tu6-2 建立表格 tu6-2 <table border="2" summary="建立一个职工信息表，包括序号、姓名、业务专长、技术职称及评聘时间"> <tr> <th>序号<br>id<th>姓名<th>性别<th>年龄<th>专业特长<th>技术职称<th>评聘年月 <tr> <td>101<td>李大力<td>男<td>55<td>计算机网络<td>教授<td>90.1 <tr> </td>——可以省略 <td>102<td>张芝兰<td>女<td>45<td>计算机硬件系统<td>教授 … </table> 2. 表题 表题是表格的内容声明。HTML使用标记<CAPTION>给表格加表题，并使用align属性定义表题的位置。格式为： <TABLE> <CAPTION align=”top/bottom/left/right”>表题</CAPTION> </TABLE> 其中： top 表题放在表的上部 bottom 表题放在表的下部 left 表题放在表上部的左侧 right 表题放在表上部的右侧 使用ALIGN=”bottom”时在标记<CAPTION>内可以嵌套<FONT size=”值”>使表题文字稍稍变小而使得表更清晰。 3. 表头 使用标记<TH>可以在表的第一行或第一列加表头。表头写在开始标记    徐 州 工 程 学 院 教 案 纸 <TH>和结束标记</TH>之间，并用醒目的粗体字显示。在表的第一行加表头的格式为： <TABLE BORDER> <TR> <TH>表头1</TH><TH>表头2</TH><TH>表头3</TH> <TR> <TD>表头1</TD><TD>表头2</TD><TD>表头3</TD> <TR> <TD>表头4</TD><TD>表头5</TD><TD>表头6</TD> </TABLE> 在表的第一列加表标题的格式为： <TABLE BORDER> <TR> <TH>表头1</TH><TD>表项1</TD><TD>表项2</TD> <TR> <TH>表头2</TH><TD>表项3</TD><TD>表项4</TD> <TR> <TH>表头3</TH><TD>表项5</TD><TD>表项6</TD> </TABLE> 例tu6-3 表题和表头 tu6-3 代码设计为 <table border="2" summary="建立一个职工信息表，包括序号、姓名、业务专长、技术职称及评聘时间"> <caption align="bottom"><font size=-1>职工基本信息表</font></caption> <tr><th>序号<br>id<th>姓名<th>性别<th>年龄<th>专业特长<th>技术职称<th>评聘年月 </th>——可以省略 … </table> 4. 行和列的合并 在<TR>、<TD>、<TH>标记使用ROWSPAN和COLSPAN属性可以进行表格元素的行、列合并。 （1）行合并 在<TD>、<TH>标记内使用rowspan属性可以进行行合并。格式为： <TD rowspan=X>表项<TD> 其中X表示纵方向上合并的行数。 （2）列合并 在<TD>和<TH>标记内使用colspan属性进行列合并。格式为： <TD colspan=X>表数据项<TD>    徐 州 工 程 学 院 教 案 纸 其中X为水平方向上的表格单元数（列数）。 例tu6-7 表格的行、列合并 tu6-7 代码设计为 <table border="2"> <tr><th><th>姓名<th>性别<th>年龄<th>专业特长<th colspan="2">技术职称及评聘年月 <tr><td rowspan=5>计算机室<td>李大力<td>男<td>55<td>计算机网络<td>教授<td>90.1 <tr><td>张芝兰<td>女<td>45<td>计算机硬件系统<td>教授<td>96.11 … </table> 5. 多层表头的表格 在<th>标记内使用rowspan和colspan属性可制作多层表头。 例tu6-8 多层表头 tu6-8 代码设计为 <table border="2" frame="box"> <tr><th rowspan=2>序号<br>ID <th colspan=4>基本情况 <th colspan=2>技术职称及评聘年月 <tr><th>姓名<th>性别<th>年龄<th>专业特长<th>技术职称<th>评聘年月 <tr><td>101<td>李大力<td>男<td>55<td>计算机网络<td>教授<td>90.1 <tr><td>102<td>张芝兰<td>女<td>45<td>计算机硬件系统<td>教授<td>96.11 … </table> 3．1．2 表格尺寸 一般表格尺寸是根据表元素中所填入的文字或数据的多少而动态变化的。在表格设计中也可以在<table>标记中使用属性width（宽）和height（高）调整表格的尺寸。在<td>中使用width和height属性可以精确地控制表格中每个表元素的大小。属性值可取像素数或使用相对于窗口的百分比。 1．设定表格宽度 在<TABLE>标记内使用WIDTH属性设定表格的宽度。格式为： <TABLE width=x> x表示像素数，取整数值。width=x中包括表边框的宽度。    徐 州 工 程 学 院 教 案 纸 例tu6-9 使用width属性设置表格宽度 tu6-9 <body> <table border="2" width="400" summary="建立一个职工信息表，包括序号、姓名、业务专长、技术职称及评聘时间"> <caption><h2>职工基本信息表</h2></caption> <tr><th>序号<th>姓名<th>性别<th>年龄<th>专业特长<th>技术职称<th>评聘年月 <tr><td>101<td>李大力<td>男<td>55<td>计算机网络<td>教授<td>90.1 <tr><td>102<td>张芝兰<td>女<td>45<td>计算机硬件系统<td>教授<td>96.11 … </table> </body> 2．设定表格高度 在<TABLE>标记内使用HEIGHT属性可以同时设定表格的高度 例tu6-11 使用HEIGHT属性 tu6-11 <table border="2" height="400" width="700" summary="建立一个职工信息表，包括序号、姓名、业务专长、技术职称及评聘时间"> 3．设定表元宽度 在<TD>标记内使用width属性可以设定表格元素的宽度。 [例3-6] <tr><td width=100>102</td><td width=100>张芝兰</td><td width=100>女</td><td width=100>45</td> 4．设定表元高度 在<TD>标记内使用height属性可以设定表格单元的高度。 例tu6-12 表单元高度的设定 tu6-12 <tr><td height="100">102<td height="100">张芝兰<td height="100 ">女<td height= "100">45<td height="100">计算机硬件系统<td height="100"><p align="center">教授<td height="100">96.11 5. 表项数据对齐 (1) 水平对齐 表格中表项数据水平方向对齐有五种：各表项数据在各表元内居中、左对齐、右对齐、左右调整或整列以特殊文字对齐。方法是在表格内容标记<TH>、<TD>、<TR>内使用align属性进行设定，align的取值及意义为： align=”center” 居中 align=”left” 左对齐 align=”right” 右对齐    徐 州 工 程 学 院 教 案 纸 align=”justify” 左右调整 align=”char” 整列以特殊文字对齐 [例3-8]P82 表项数据水平方向对齐示例 代码设计为 <tr align=”center”><td>101</td><td>李大力</td><td>男</td><td> 55</td><td>计算机网络</td><td>教授</td><td>90.1</td> <tr align=”right”><td>102<td>张芝兰<td>女<td>45<td>计算机硬件系统<td>教授<td>96.11 在浏览器中显示的结果如图3-6所示 (2) 垂直位置 表格元素内数据项的垂直方向位置使用valign属性。valign属性的取值及意义为： valign=”top” 数据靠单元顶 valign=”bottom” 数据靠单元底 valign=”middle” 数据居单元中 valign=”baseline” 同行单元数据位置一致 6. 表单元内容为图像 图像可以作为表格单元中的内容。方法是将<IMG>标记嵌入到<TD></TD>标记内。句法为： <TD><IMG SRC=”图像文件名”></TD> 例tu6-16 将照片嵌入表中 tu6-16 <tr><th>照片 <th>姓名<th>性别<th>年龄<th>专业特长<th>技术职称<th>评聘年月 <tr><td><img src="../图片/陈清枝.GIF" width="55" height="43" alt="L"><td>李大力<td>男<td>55<td>计算机网络<td>教授<td>90.1 <tr><td><img src="../图片/姚福宝.GIF" width="55" height="43" alt="CH"><td>张芝兰<td>女<td>45<td>计算机硬件系统<td>教授<td>96.11 <tr><td><img src="../图片/李东野.GIF" width="55" height="43" alt="W"><td>王一兵<td>男<td>50<td>计算机软件系统<td>教授<td>92.1 <tr><td><img src="../图片/孙晓青.GIF" width="55" height="43" alt="HE"><td>何查里<td>男<td>56<td>计算机硬件通信系统<td>教授<td>89.12 <tr><td><img src="../图片/祝惠民.GIF" width="55" height="43"><td>杨大虎<td>男<td>48<td>计算机外设系统<td>教授<td>95.1    徐 州 工 程 学 院 教 案 纸 3．1．3 表格边框 通过给表格加上有立体感的表边框、调节表格单元边线和单元内的数据之间的空白间距、变化表格单元边线的宽度，可以把表格做的更生动、更美观。 1．表格边框 在<TABLE>标记内附加frame和rules属性可以生成各种表格边框单元线。格式为： <TABLE farme=”边框参数” rules=”格线参数” border=”像素”>内容</TABLE> 说明如下： （1）frame的参数 void——无边框 above——仅顶框 below——仅底框 hsides——仅顶框底框 vsides——仅左右侧框 lhs——仅左侧框 rhs——仅右侧框 box——全部边框 border——外围边框 （2）rules的参数 none——无格线 groups——仅在行组和列组间有格线 rows——仅有行间格线 cols——仅有列间格线 all——有行和列格线 （3）border参数 border =”像素”用于设定边框宽度 例tu6-13 表格边框和仅有行线 tu6-13 代码设计为 <table border="2" frame="box" rules="rows" summary="建立一个职工信息表，包括序号、姓名、业务专长、技术职称及评聘时间"> 2．控制格线和数据之间的距离 调节表单元格线和数据之间的距离使用cellpadding属性，格式为： <TABLE border cellpadding=x>表内容</ TABLE > 当x取像素数时，为表单元四边线与表单元内容之间的空隙。X值越大空隙越宽。x取整数，在属性默认或x=0时最窄；x=1以后，数字越大，距离越宽。    徐 州 工 程 学 院 教 案 纸 例tu6-14 格线和数据之间的距离 tu6-14 <table border="2" cellpadding="20" summary="建立一个职工信息表，包括序号、姓名、业务专长、技术职称及评聘时间"> 3．表元与边框间的空白 使用CELLSPACING属性可以调节表元与边框间的空白。格式为： <TABLE border cellspacing=x>表格内容</TABLE> x取整数，缺省或x=0最窄，x=1以后数字越大空白越宽。 例tu6-15 表元与边框间的空白 tu6-15 代码设计为 <table border="2" cellspacing="20" summary="建立一个职工信息表，包括序号、姓名、业务专长、技术职称及评聘时间"> 4．有立体感的表格边框 使用标记TABLE的border属性，并与<TABLE>标记有机的结合，可以制作双层边框或多层边框的立体感很强的表格。如果再配以bordercolor属性，则可以制作双层边框或多层边框的立体感很强的彩色表格。 作成双层边框表格的格式如下： <TABLE border=x> <TR> <TABLE border=y> <TD>表项</TD><TD>表项</TD><TD>表项</TD> </TABLE> </TABLE> 使用cellpadding和cellspacing属性可作成多层边框表格。格式为： <TABLE border=x cellpadding=z cellspacing=s> <TR> <TABLE border=y> <TD>表项</TD><TD>表项</TD><TD>表项</TD> </TABLE> </TABLE> 例tu6-17 多层边框表格 tu6-17 <body> <table border="5" cellpadding="8" cellspacing="6"><TD> <TABLE border=5> <tr><th>序号<br>ID<th>姓名<th>性别<th>年龄<th>专业特长<th>技术职称<th>评聘年月 <tbody> <tr><td>101<td>李大力<td>男<td>55<td>计算机网络<td>教授<td>90.1    徐 州 工 程 学 院 教 案 纸 <tr><td>102<td>张芝兰<td>女<td>45<td>计算机硬件系统<td>教授<td>96.11 … </table> </table> </body> 3．1．4 表格修饰 1. 着色和嵌套 HTML提供了给表格单元配置背景色的功能，并可设定表项数据的颜色。设定表格单元背景色的方法是使用bgcolor属性，格式为： <TABLE bgcolor=”颜色值”> 设定整个表格的背景色 <TR bgcolor=”颜色值”> 设定表格中一行的背景色 <TD bgcolor=”颜色名”> 设定表格中一个单元的背景色 例tu6-18 表的背景色 tu6-18 <body> <table border="8" bgcolor=”ff0000”> … <tr bgcolor="#90ff15"> <th>序号<br>ID <th>姓名<th>性别<th>年龄<th>专业特长<th>技术职称<th>评聘年月 <tbody> <tr bgcolor="#ff0000"><td>101<td>李大力<td>男<td>55<td>计算机网络<td>教授<td>90.1 <tr bgcolor="#ffff00"><td>102<td>张芝兰<td>女<td>45<td>计算机硬件系统<td>教授<td>96.11 <tr bgcolor="#00ffff"><td>103<td>王一兵<td>男<td>50<td>计算机软件系统<td>教授<td>92.1 <tr bgcolor="#008000"><td>104<td>何查里<td>男<td>56<td>计算机硬件通信系统<td>教授<td>89.12 <tr bgcolor="#cd061f"><td>105<td>杨大虎<td>男<td>48<td>计算机外设系统<td>教授<td>95.1 </table> </body> 2．表格嵌套 表格可嵌套，即表格的一单元可以是另一个表格。 例tu6-19 表格嵌套 tu6-19    徐 州 工 程 学 院 教 案 纸 <table border=2 > <caption><h2>职工基本信息表</h2></caption> <tr bgcolor="#90ff15"> <th>序号<br>ID<th>姓名<th>性别<th>年龄<th>专业特长<th>技术职称<th>评聘年月 <tbody> <tr bgcolor="#ff0000"><td>101<td>李大力<td>男<td>55<td> <table border=2 frame="box" bgcolor="#00ffff"> <tr><td><li>计算机网络 <tr><td><li>数字通信 <tr><td><li>WINDOWS </table></td><td>教授<td>90.1 <tr bgcolor="#ffff00"><td>102<td>张芝兰<td>女<td>45<td>计算机硬件系统<td>教授<td>96.11 <tr bgcolor="#00ffff"><td>103<td>王一兵<td>男<td>50<td>计算机软件系统<td>教授<td>92.1 … </table> 3. 图像背景 Internet Explorer 4.0扩展了表格的着色机能。在标记<TABLE>、<TH>、<TR>、<TD>中可以使用的属性有： backgound=”Imagefilename.gif” 设置表单元的背景图像 bordercolor=” “ 设定表格边框的颜色 bordercolorlight=” “ 设定表格边框亮部的颜色 rules=rows,cols,none 设定表内线的显示方法 例tu6-21 图像为背景的表格 tu6-21 代码设计为 <table border="2" frame=box background="../图片/beijing.gif" align=center> <tr><th>序号<br>ID<th>姓名<th>性别<th>年龄<th>专业特长<th>技术职称<th>评聘年月</tr> <tr><td>101<td>李大力<td>男<td>55<td>计算机网络<td>教授<td>90.1</tr> <tr><td>102<td>张芝兰<td>女<td>45<td>计算机硬件系统<td>教授<td>96.11</tr> <tr><td>103<td>王一兵<td>男<td>50<td>计算机软件系统<td>教授<td>92.1</tr> …    徐 州 工 程 学 院 教 案 纸 </table> 4. 彩色表格 使用<TABLE>标记的bordercolordark属性可以制作彩色表格。 例tu6-22 使用bordercolordark属性 tu6-22 代码设计为 <table border="5" celpadding="8" cellspacing="6" border="#ff0000" align="center"> <td> <table border="2" frame="box" bordercolordark="#ff0000"> <tr><th>序号<br>ID<th>姓名<th>性别<th>年龄<th>专业特长<th>技术职称<th>评聘年月</tr> <tr><td>101<td>李大力<td>男<td>55<td>计算机网络<td>教授<td>90.1</tr> <tr><td>102<td>张芝兰<td>女<td>45<td>计算机硬件系统<td>教授<td>96.11</tr> <tr><td>103<td>王一兵<td>男<td>50<td>计算机软件系统<td>教授<td>92.1</tr> <tr><td>104<td>何查里<td>男<td>56<td>计算机硬件通信系统<td>教授<td>89.12</tr> <tr><td>105<td>杨大虎<td>男<td>48<td>计算机外设系统<td>教授<td>95.1</tr> </table></table> 3．1．5 定位和链接 表格的定位是指表格在浏览器窗口上的位置的设定。在<TABLE>标记内使用align属性可以设定表格在浏览器窗口上的位置。格式为： <TABLE border align={left或right或center}> 分别表示表格位于浏览器窗口中的左侧、右侧或居中位置。表格位于浏览器窗口中的左侧、右侧时文本可填充在表格的右侧或左侧，表格在浏览器窗口中居中时表格两边不放置文本。Align属性缺省时，文本在表格的下边。 例tu6-20 表格在浏览器窗口中居左 tu6-20 代码设计为 <table border align="left"> <tr><td><img src="../图片/Image7.gif" width="60" height="60"></td> <td>HTML是一种标记语言</td> <tr><td><img src="../图片/Image15%20.gif" width="60" height="60"></td>    徐 州 工 程 学 院 教 案 纸 <td>WWW是一种网络软件 <ul><li>WWW<li>HTML<li>URL</ul> </td> </table> <em>表格的定位</em><br> <td>表格的定位是指表格在浏览器窗口上的位置的设定。在&lt;TABLE&gt;标记内使用align属性可以设定表格在浏览器窗口上的位置。格式为：&lt;TABLE border align={left或right或center}&gt;分别表示表格位于浏览器窗口中的左侧、右侧或居中位置。表格位于浏览器窗口中的左侧、右侧时文本可填充在表格的右侧或左侧，表格在浏览器窗口中居中时表格两边不放置文本。align属性缺省时，文本在表格的下边。    徐 州 工 程 学 院 教 案 纸 3.2 多窗口页面——框架 通过本节的学习要求掌握以下几点： 1．使用<FRAMESET>标记建立框架 框架的基本标记为<FRAMESET></FRAMESET>，内容标记为<FRAME>。在含有<FRAMESET></FRAMESET>的HTML文档内，不能再使用标记<BODY>，而在<HEAD>标记之后直接写<FRAMESET>标记。 2．利用框架嵌套可以生成复杂的框架结构。框架内文档的布局是按先行后列的顺序排列的。建立框架时应对各框架进行初始化，未初始化的框架是空白框架。框架的边框可以通过<FRAME>标记的属性对边框的有、无、边框的宽度、颜色及是否加滚动条等进行设定。 3．框架间的文件可以链接，使用target属性和目标框架名可以实现任意框架间的链接。框架的链接可以实现改变一个或同时改变所有框架的内容。 4．使用内联框架可使框架象图像、表格等对象那样插入到文本；通过使用<IFRAME>标记的属性设计内联框架的位置和外观。 5．使用NOFRAME可以在不支持框架的浏览器上表示框架的内容。注意NOFRAME所包括的信息必须包括<NOFRAME>标记范围内。 本节任务：如图3-14（tu7-1）所示，在一个浏览器窗口显示多个页面。建立框架并通过超链接更新多个框架的内容，亦可利用框架属性中的隐含框名，更新该框架自身或其父框架，从而达到一次浏览和更新多个框架的目的。 可以设定各种各样的框架网络，使用框架名和target属性同时更新所有框架的内容。 框架网页是一种特殊的网页，它将浏览器分成几个区域，每个区域可以显示一个HTML页面。这样用户可以在一个窗口中同时浏览多个网页。 在站点目录、导航框架、表单显示中都常用到框架网页结构。框架网页本身并不包含有可视内容，它只是一个展示页面内容的容器。只要在一个框架中点击网页的超链接，被此超链接所指的页面就会在目录框架中显示出来，两者既相互关联，又相互独立，页面内容的更新并不影响框架的状态。这样就可以将整体结构和具体内容同时显示在一个窗口中，既可以阅读又利于查找。 框架是浏览器窗口中的矩形区域，可以显示页面。同时，它的旁边可以有其他的框架，用于显示其他页面。框架与表格类似，也是以行和列安排文本和图像。但是框架和表格不同，其根本区别在于，框架之间包含任意的链接，从而实现动态地变化框架单元中的内容。框架分为水平分割型和垂直分割型两类。可以嵌套即在一个框架内还可以分割成若干个框架。    徐 州 工 程 学 院 教 案 纸 3．2．1 建立框架 1. <FRAMESET>标记 使用框架标记<FRAMESET>，</FRAMESET>和框架内容标记<FRAME>建立一个框架结构，格式为： <FRAMESET> <FRAME> <FRAME> …… </FRAMESET> 框架是按行和列进行排列的。建立框架使用<FRAMESET>的ROWS和COLS属性，格式为： <FRAMESET rows=”x”> <FRAME> </FRAMESET> 或 <FRAMESET cols=”y”> <FRAME> </FRAMESET> 这里属性rows表示作成横向分割型框架，属性cols表示作成纵向分割型框架。rows和cols的值x、y可取为： 像素数——指定框架的绝对尺寸 百分数——指定框架相对于浏览器窗口大小的百分数 符号*——指定框架的尺寸为由像素数或百分数指定框架尺寸后浏览器窗口的剩余部分。当仅用*号时，“*”表示整个窗口，“*，*“时表示窗口分成两个均等的框架，”*，*，*“时表示窗口分成三个均等的框架等。这些值间不能有空格并用”，“号分开，根据输入的值的个数决定框架数和位置。 在框架结构的.html文件中，可以使用<FRAMESET>标记取代<BODY>标记。但如果同时使用了这两个标记，将显示警告提示。 例tu7-2 生成三个横向框架 tu7-2 代码设计为 <Frameset rows="80,80,*"> <FRAME SRC="aaa1.html"> <FRAME SRC="aaa2.html"> <FRAME SRC="aaa3.html"> </Frameset> 调用 <!--aaa1.html--> <HTML>    徐 州 工 程 学 院 教 案 纸 <BODY><H2 align="center">框架1</H2></BODY> </HTML> <!--aaa2.html--> <HTML> <BODY><H2 align="center">框架2</H2></BODY> </HTML> <!—aaa3.html--> <HTML> <BODY><H2 align="center">框架3</H2></BODY> </HTML> 这时，在浏览器上表示指定三个横向框架，顶部框架高为80像素，中部高为80像素，其余为下部框架， P91 如图3-15所示。 也可用三种取值混合使用来指定框架。例如： <FRAMESET rows=”80,*,80”> 表示将窗口分成三个框架，顶部和底部框架高各80各像素，其余为中间框架。又如： <FRAMESET rows=”20%,*,80”> 则表示顶部框架为浏览器窗口高的20%，底部框架高为80各像素，其余为中间框架。使用cols属性纵向分割窗口生成框架的方法与rows相同。 从上述例子中可以看到，在含有框架结构的HTML文档内，不能再使用结构标记<BODY>，而在<HEAD>标记之后直接写<FRAMESET>标记。 例tu7-3 纵向分割的框架 tu7-3 代码设计为 <Frameset cols="*,2*,3*"> <FRAME SRC="aaa1.html"> <FRAME SRC="aaa2.html"> <FRAME SRC="aaa3.html"> </Frameset> 在浏览器中显示的结果， P91 如图3-16所示。本例中，<Frameset cols="*,2*,3*">设定三个纵向框架，框架1为窗体宽的六分之一，框架2为窗体宽的六分之二，框架3为窗体宽的六分之三。 2. 初始化框架 初始化框架是指给各个框架指定初始显示的页面。框架初始化使用<FRAME>标记，格式为： <FRAME src=”文件名.html” name=”框架名”> <FRAME>标记的个数应等于在<FRAMESET>标记中所定义的框架数，并依在文件中出现的次序按先行后列对框架初始化。即第一个FRAME标记指定的文件位于第一行第一列。如果<FRAME>标记数少于<FRAMESET>标记中所定义的框架数量，则其余的框架为空白。    徐 州 工 程 学 院 教 案 纸 （1）src属性 src属性表示源文件，其值为文件名。例如： <FRAME SRC=”filename.html”> <FRAME SRC=”../dictory1/filename.html”> <FRAME SRC=”http://WWW.timbuktu.com/budda.gif”> 即路径的表示与链接标记<A>和图像标记<IMG>相同。 （2）name属性 name属性指定一个框架名。框架名由字母打头，用下划线打头的框架名无效。框架名用于链接。 例tu7-4 指定框架名 tu7-4 <HTML> <HEAD><TITLE>A Frameset document</TITLE></HEAD> <Frameset cols="25%,75%"> <FRAME SRC="tu4-6.html" name="main"> <FRAME SRC="tu4-9.html" name="sub"> </Frameset> </HTML> 本例中设定主框架为菜单框架，副框架为子框架。 例tu7-5 框架初始化 tu7-5 <HTML> <HEAD><TITLE>A Frameset document</TITLE></HEAD> <Frameset cols="200,*,200"> <FRAME SRC="tu4-6.html"> <FRAME SRC="tu4-9.html"> <FRAME SRC="tu4-13.html"> </Frameset> </HTML> 3. 边框宽度和颜色设定 框架边框宽度和颜色的设定是在<FRAMESET>标记内使用下列属性： frameborder——指定框架有无边框 border——确定边框的宽度 bordercolor——给框架边框着色 （1）Frameborder属性 frameborder属性确定框架有无边框。格式为： <frameset frameborder=”值”> 属性frameborder取值有两个，即NO和YES。例如： <frameset frameborder=”yes”> 时生成3D边框；设定为    徐 州 工 程 学 院 教 案 纸 <frameset frameborder=”no”> 时3D边框消失。缺省时为“YES”。 例tu7-2 无边框框架 tu7-2 代码设计为 <Frameset rows="80,80,*" frameborder=”no”> <FRAME SRC="aaa1.html"> <FRAME SRC="aaa2.html"> <FRAME SRC="aaa3.html"> </Frameset> 例tu7-6 <HTML> <HEAD><TITLE>A Frameset document</TITLE></HEAD> <Frameset cols="33%,33%,33%"> <Frameset rows="*,200"> <FRAME SRC="tu4-6.html" scrolling="no"> <FRAME SRC="tu1-1.html" marginwidth="10" marginheight="15" noresize> </Frameset> <FRAME SRC="tu4-10.html" frameborder="0"> <FRAME SRC="tu4-13.html" frameborder="0"> </Frameset> </HTML> （2）border属性 border属性确定边框的宽度。格式为： <FRAMESET border=”值”> 值为像素数。缺省时为8像素宽，取“0”时与frameborder取NO时不同，框架看不见。 （3）bordercolor属性 bordercolor属性给框架边框着色。格式为： <FRAMESET bordercolor=”值”> 颜色参数的取值与文本相同，可取16进制颜色值或颜色名。 例tu7-7 设定框架边框宽度和颜色 tu7-7 代码设计为 <Frameset rows="*,*,*" border="20" bordercolor="#00ffff"> <FRAME SRC="tu4-6.html"> <FRAME SRC="tu4-9.html"> <FRAME SRC="tu4-13.html"> </Frameset>    徐 州 工 程 学 院 教 案 纸 4. 空白 使用<FRAME>标记的下列属性设定框架内容和框架左、右边框和框架上、下边框的空白： marginwidth——设定框架内容和框架的左、右边框的空白 marginheight——设定框架内容和框架的上、下边框的空白 （1）设定框架的左、右边距 设定框架内容和框架的左、右边框的空白使用marginwidth属性。格式为： <FRAME marginwidth=x> x为像素数，取为1以上的数值。注意，框架边距和框架边框不同。框架边距是指框架内文本不能进入的区域。 (2) 设定框架的上、下边缘 设定框架内容和框架的上、下边框的空白使用属性marginheight。格式为： <FRAME marginheight =x> x为像素数，取为1以上的数值。 5. 加入滚动条 使用scrolling属性决定是否在框架内加入滚动条，其值可取“YES”、“NO”、“AUTO”。格式为： <FRAME scrolling=”YES”/”NO”/”AUTO”> 例如： <FRAME scrolling=”YES”> 强制加垂直滚动条和水平滚动条 <FRAME scrolling=”NO”> 框架内不加滚动条 <FRAME scrolling=”AUTO”> 自动使用滚动条 当文件使用<FRAME>标记的下列属性设定框架边框：长度大于窗口时加滚动条，scrolling属性缺省设置时为auto。 例tu7-8 空白 tu7-8 代码设计为 <Frameset cols="33%,33%,33%"> <Frameset rows="*,200"> <FRAME SRC="tu4-6.html" scrolling="no"> <FRAME SRC="tu1-1.html" marginwidth="30" marginheight="30" noresize> </Frameset> <FRAME SRC="tu4-10.html"> <FRAME SRC="tu4-13.html"> </Frameset>    徐 州 工 程 学 院 教 案 纸 6. 固定边框 使用鼠标可以移动框架的边框。但是移动边框会带来一些不好的效果。使用noresize属性可以固定边框的位置。格式为： <FRAME noresize> 其中，noresize无值，写入即可。设置后鼠标就不能拖动框架的边框了。 例tu7-9 固定边框 tu7-9 <HTML> <HEAD><TITLE>A Frameset document</TITLE></HEAD> <Frameset cols="40%,60%"> <FRAME SRC="tu4-6.html" marginwidth="30" marginheight="20" scrolling="yes"> <FRAME SRC="tu4-9.html" noresize> </Frameset> </HTML> 3．2．2 框架嵌套 1．直接嵌套 框架的相互嵌套可以作成一个复杂的框架布局。直接使用<FRAMESET>标记可以进行的框架嵌套，例如： <FRAMESET rows="*,*,*"> <FRAME src=" "> <FRAMESET cols="*,*"> <!嵌套的框架> <FRAME src=" "> <FRAME src=" "> </FRAMESET> <FRAME src=" "> </FRAMESET> 中间框架又纵向分割成两个框架。 例tu7-10 直接嵌套 tu7-10 <Frameset rows="*,*,*"> <!分三行> <FRAME SRC="tu4-2.html"> <!第一行> <Frameset cols="*,*"> <!第二行> <FRAME SRC="tu4-3.html"> <FRAME SRC="tu4-4.html"> </Frameset> <Frameset cols="40%,*,40%"> <!第三行> <FRAME SRC="tu4-5.html"> <FRAME SRC="tu4-6.html">    徐 州 工 程 学 院 教 案 纸 <FRAME SRC="tu4-7.html"> </Frameset> </Frameset> 例tu7-11 横向框架的嵌套 tu7-11 <Frameset cols="*,*,*"> <!分三列> <FRAME SRC="tu4-8.html"> <!第一列> <Frameset rows="*,*"> <!第二列> <FRAME SRC="tu4-9.html"> <FRAME SRC="tu4-10.html"> </Frameset> <Frameset rows="40%,*,40%"> <!第三列> <FRAME SRC="tu4-11.html"> <FRAME SRC="tu4-12.html"> <FRAME SRC="tu4-13.html"> </Frameset> </Frameset> 2．以文件形式实现框架嵌套 被嵌套的框架可以写成另一个.html文件，例如： <FRAMESET rows="*,*,*"> <FRAME src="文件1"> <FRAMESET cols="*,*"> <!嵌套的框架> <FRAME src="文件2"> <FRAME src="文件3"> </FRAMESET> <FRAME src="文件4"> </FRAMESET> 可以写成 <FRAMESET rows="*,*,*"> <FRAME src="文件1"> <FRAME src="文件5"> <FRAME src="文件4"> </FRAMESET> 其中，文件5为： <HTML> <HEAD><TITLE>文件5.html</TITLE></HEAD> <Frameset cols="*,*"> <!嵌套的框架> <FRAME src="文件2"> <FRAME src="文件3">    徐 州 工 程 学 院 教 案 纸 </Frameset> </HTML> 例tu7-12 以文件形式实现框架嵌套 tu7-12 <HTML> <HEAD><TITLE>A Frameset document</TITLE></HEAD> <Frameset cols="45%,*"> <FRAME SRC="tu4-8.html" name="menu" border=50 frameborder="yes"> <FRAME SRC="tu7-12-2.html" name="frame"> </Frameset> </HTML> <! -tu7-12-2.html> <HTML> <HEAD><TITLE>A Frameset document</TITLE></HEAD> <Frameset rows="*,*"> <FRAME SRC="tu4-11.html" name="tu4-11"> <FRAME SRC="tu4-12.html" name="tu4-12"> </Frameset> </HTML> 3．2．3 框架间的链接 框架内容中含有热点文本时，必须指定链接的目标文件显示在哪一个框架内，即指明显示目标文件的框架名。如果没有进行这种指定，则单击当前框架热点文本产生链接时，被链接的目的文件则在当前框架内显示。假如当前框架的内容是一个菜单，则该框架失去了菜单功能。 控制链接目的文件在哪一个框架内显示的方法是在<A>标记内使用target属性。格式为； <A href=”目的文件名.html” target=”值”>热点文本</A> 当单击当前框架的内容的热点文本时，链接目的文件的内容就会显示在由target的值所指定的框架或窗口内。 target属性的值有以下五种： 1.框架名 使用格式为： <FRAME src=”文件名.html” name=”框架名”> <A href=”目的文件名.html” target=”值”>热点文本</A> 例如： <FRAME src=”menu.html” name=”menu”> <FRAME src=”bb.html” name=”bb”> <A HREF=”asd.html” target=”bb”>AAA</A>    徐 州 工 程 学 院 教 案 纸 则单击AAA时，目的文件asd.html将显示在框架名为bb的框架内，从而更新了框架bb的内容。 2. _top 使用格式为： <A href=”连接目的文件名” target=”- top”>热点文本</A> 功能是将链接的文件装入整个浏览器窗口。 3. _self 使用格式为： <A href=”连接目的文件名” taregt=”- self”>热点文本</A> 功能是将连接的文本装入当前框架中，以取代该框架中正在显示的文件。 4. _blank 使用格式为： <A href=”连接目的文件名” target=”- blank”>热点文本</A> 功能是将连接的文件装入一个新的没有名的浏览器窗口。 5. _parent 使用格式为： <A href=”连接目的文件名” target=”-parent”>热点文本</A> 功能是将连接的文件装入父框架中（框架有嵌套时），否则与-top相同。 例tu7-13 生成两个纵向框架，左边框架内放一菜单，单击菜单项，则在右边框架内显示相应的内容。 tu7-13 <HTML> <HEAD><TITLE>A Frameset document</TITLE></HEAD> <Frameset cols="30%,*"> <FRAME SRC="tu7-13-2.html" name="menu" border=50 frameborder="yes "> <Frameset rows="*,*"> <FRAME SRC="tu6-2.html" name="select_1"> <FRAME SRC="../图片/图1-5.gif" name="select_2"> </frameset> </frameset> </HTML> <! –文件tu7-13-2.html-- > <HTML> <HEAD><TITLE>fruit menu</TITLE></HEAD> <body> <h5 align="center">HTML入门</h5> 请你选择：<p><ol>    徐 州 工 程 学 院 教 案 纸 <li><a href="tu4-7.html" target="select_1">HTML基础</a> <li><a href="tu5-10.html" target="select_2">文件布局</a> </ol> </body> </HTML> 例tu7-14 特殊框架名的用法 tu7-14 <HTML> <HEAD><TITLE>A poorly-designed Frameset document</TITLE></HEAD> <Frameset cols="40%,60%"> <FRAME SRC="tu7-14-1.html"> <FRAME SRC="tu7-14-2.html" name="SELECT" longdesc="ostrich- desc.html"> </Frameset> </HTML> 本例是一个说明四种特殊框架名_top、_self、_blank、_parent用法的例子，框架文件如下： <! –tu7-14-1.html-- > <HTML> <HEAD><TITLE>FRUIT MENU</TITLE></HEAD> <body> <h3>欢迎学习HTML</h3> 选择学习：<p> <ol> <li><a href="tu4-1.html" target="SELECT">HTML</a> <li><a href="tu4-2.html" target="SELECT">文字布局</a> <li><a href="tu5-3.html" target="SELECT">图像和链接</a> <li><a href="tu4-4.html" target="SELECT">列表</a> <li><a href="tu6-5.html" target="SELECT">表格</a> </ol></body></HTML> <! –tu7-14-2.html-- > <HTML><body><ol> <li><a href="tu4-2.html" target="_self">更新内容</a> <li><a href="tu5-3.html" target="_parent">更新主框架</a> <li><a href="tu4-4.html" target="_top">_top用法</a> <li><a href="tu6-5.html" target="_blank">_blank用法</a> </ol></body></HTML>    徐 州 工 程 学 院 教 案 纸 例tu7-15和tu7-16 一次变更多个框架的内容 tu7-15和tu7-16 <HTML> <HEAD><TITLE>A poorly-designed Frameset document</TITLE></HEAD> <Frameset cols="35%,*"><frame src="tu7-15-2.html" name="menu" border=50 frameboder="yes"> <Frameset rows="30%,*"> <FRAME SRC="tu7-15-3.html" name="SELECT"> <FRAME SRC="tu7-15-4.html" name="SELECTAAA"> </Frameset> </Frameset> </HTML> <! –tu7-15-2.html-- > <HTML> <HEAD><TITLE>FRUIT MENU</TITLE></HEAD> <body> <h3>欢迎学习HTML</h3> 选择学习：<p> <ol> <li><a href="tu4-2.html" target="SELECT">HTML基础</a> <li><a href="tu5-3.html" target="SELECTAAA">文字布局</a> <li><a href="tu7-16.html" target="_parent">同时更换</a> </ol></body></HTML> <! –tu7-15-3.html-- > <HTML> <HEAD><TITLE>Welcome</TITLE><script language="javaSCRIPT"></script></HEAD> <body> <p><p><p> <h3>显示选择的菜单目录。</h3> <form><input type="submit" value="OK" Onclick="document.bgcolor= "red"></form> </body></HTML> <! –tu7-15-4.html-- > <HTML> <HEAD><TITLE>lly6-14.html</TITLE></HEAD> <body> <ol> <li><a href="tu4-2.html" target="_self">更新内容</a>    徐 州 工 程 学 院 教 案 纸 <li><a href="tu5-3.html" target="_parent">更新主框架</a> <li><a href="tu4-4.html" target="_top">_top用法</a> <li><a href="tu6-5.html" target="_blank">_blank用法</a> </ol></body></HTML> <! –tu7-16.html-- > <HTML> <HEAD><TITLE>Fruit Shop</TITLE></HEAD> <Frameset cols="30%,*"> <FRAME SRC="tu7-15-2.html" name="menu" border=50 frameboder="yes"> <Frameset rows="60%,*"> <FRAME SRC="tu4-4.html" name="SELECT"> <FRAME SRC="tu6-5.html" name="SELECTAAA"> </Frameset> </Frameset> </HTML> 3．2．4 内联框架 1. <IFRAME>标记 使用标记<IFRAME></IFRAME>可以将框架设置在页面中央，称为内联框架。它与<FRAMESET>标记不同，可以插入到<BODY></BODY>标记中。格式为： <IFRAME src=”文件名.html”> </IFRAME> 在<IFRAME>标记中使用下列属性设置内联框架的参数： src——指定内联框架内显示页的URL width=x——指定内联框架的宽，x为像素数或相对于窗口的百分数 height=y——指定内联框架的高，x为像素数或相对于窗口高的百分数 align=”left”/”right”——指定内联框架对齐方式 frameborder——用数值指定内联框架立体框宽 name——指定内联框架的名字 scrolling=”yes”/”no”——指定内联框架是否加滚动条 hspace=x——指定内联框架水平方向上左侧间隔，x为像素数 vspace=y——指定内联框架垂直方向上顶部间隔，y为像素数。 例tu7-17 内联框架——使用SCROLLING属性 tu7-17 <HTML> <HEAD><TITLE>lly10-15.html</TITLE></HEAD> <body> <h2>内联框架</h2>    徐 州 工 程 学 院 教 案 纸 <hr size=10 color="#00ff00"> <iframe src="net09.html" align="left" width=200 height=300 hspace=200 vspace=50 scrolling="yes"> </iframe> </body> </HTML> 例tu7-18 内联框架 tu7-18 <HTML> <HEAD><TITLE>A frameset document</TITLE></HEAD> <body> <h2 align=center>内联框架</h2> <hr size=10 color="#00ff00"> <iframe src="net09.html" align="left" width=200 height=300 vspace= 50> </iframe> 使用标记&lt;IFRAME&gt;&lt;/IFRAME&gt;可以将框架设置在页面中央，称为内联框架。它与&lt;FRAMESET&gt;标记不同，可以插入到&lt;BODY&gt;&lt;/BODY&gt;标记中。格式为： <pre> &nbsp;&nbsp;&nbspIFRAME src="文件名.html"&gt; &nbsp;&nbsp;&nbsp;&lt;/IFRAME&gt; </pre><dl> 在&lt;IFRAME&gt;标记中使用下列属性设置浮动框架的参数： <dt> src<dd>&nbsp;&nbsp;指定浮动框架内显示页的URL <dt> width=x<dd>&nbsp;&nbsp;指定内联框架的宽，x为像素数或相对于窗口的百分数 <dt> height=y<dd>&nbsp;&nbsp;指定内联框架的高，x为像素数或相对于窗口高的百分数 <dt> align="left"或"right"<dd>&nbsp;&nbsp;指定内联框架对齐方式 <dt> frameborder<dd>&nbsp;&nbsp;用数值指定内联框架立体框宽 <dt> name<dd>&nbsp;&nbsp;指定内联框架的名字 <dt> scrolling="yes,no"<dd>&nbsp;&nbsp;指定内联框架是否加滚动条 <dt> hspace=x<dd>&nbsp;&nbsp;指定内联框架水平方向上左侧间隔，x为像素数 <dt> vspace=y<dd>&nbsp;&nbsp;指定内联框架垂直方向上顶部间隔，y为像素数。 </dl>    徐 州 工 程 学 院 教 案 纸 </body> </HTML> <! –net09.html-- > <html> <head><title>lly10-8.html</title></head> <body> <hr size=5 color="#ff00ff"> <center> <marquee bgcolor="#00ff00" wind=60% behavior="alternate" loop=-1> 欢迎您归来！ </marquee> </center> </body> </html> 2. 框架的替代内容 对于不能支持框架的浏览器的用户而言，HTML提供的NOFRAMES可使用户能得到关于框架内容的信息。使用格式为： <FRAMESET rows=” “> <FRAME src=” “> <FRAME src=” “> …… <NOFRAMES> HTML标记的框架内容 <NOFRAMES> </FRAMESET> 注意，<NOFRAMES>标记所包含的内容仅在不支持框架的浏览器上表示，支持框架的浏览器上会将该标记间的内容丢弃。同时应注意该块内容必须含在<FRAMESET>标记范围内，下面的例子是建立一个框架并将框架的说明内容写在<NOFRAMES>标记内的文件例。该文档在支持框架的浏览器上仅表示框架而不表示<NOFRAMES>标记所围内容。 例tu7-19 框架内容的替代 tu7-19 <HTML> <HEAD><TITLE>A simple Frameset document</TITLE></HEAD> <Frameset cols="40%,60%"> <Frameset rows="100,200"> <FRAME SRC="tu4-6.html"> <FRAME SRC="tu1-1.html">    徐 州 工 程 学 院 教 案 纸 </Frameset> <FRAME SRC="tu4-10.html"> <NOFRAMES> <P>this frameset document contains: <ul> <li><a href="tu4-1.html">HTML教程目录</a> <li><img src="../图片/外景.gif" alt="a neat image"> <li><a href="tu4-10.html">HTML基础</a> </ul> </NOFRAMES> </Frameset> </HTML>    徐 州 工 程 学 院 教 案 纸 3.3 输入表单 通过本节的学习要求掌握以下几点： 1．主页的输入表单主要是由输入表项、单选钮、选择框、成段文字输入及发送、复位按钮等表单控制组成的。在制作表单的过程中，可以将列表、表格等功能引入表单的布局设计，使得表单结构整齐，形成风格各异的布局。另外为使表单紧凑，在选择控制中尽量不使用按钮选择而使用菜单选择。 2．掌握作成输入表单的各个主要标记的意义和用法。标记<FORM>是生成表单的格式标记，其他的表单输入控制都被这个标记括定。<FORM>标记的两个属性分别设定表单输入数据发送的地点和方法。<INPUT>标记用于生成表项输入、项目选择及发送、修改按钮控制。注意在生成不同输入控制方式时<INPUT>属性的用法；<SELECT>标记用于生成选择栏。选择栏分弹出式和列表式两种，椐预置选项是1项还是多项来区分。标记<TEXTAREA>设定成段文字输入区。 3．发送表单主要有两种方式。一种是使用自己的E-mail地址，但保密性差；一种是通过服务器CGI，保密性好。 本节任务：建立一个如图3-25（tu8-1）所示的某大学毕业生工作情况调查表的主页。内容包括表项输入、菜单选择和成段文字输入等栏目的制作方法和技巧。 通过前面的学习，我们已经掌握了如何创建网页，以及如何修饰及完善网页，但是到目前为止这些网页上的信息都是单向发布的，即网络上的信息都是由网站提供的，用户只能浏览。而在很多时侯，我们需要了解网络用户的看法及意见，也就是需要收集客户的反馈意见，这时我们就可以利用表单来实现。其实表单不仅仅是反馈客户信息的一种手段，它还广泛应用于资料检索、讨论组、在线会议记录及网上购物等许多网络交互操作。表单的信息交互特点，使得网页不但能进行信息发布，而且还可以根据客户提交的信息，动态地进行信息重组，并将重组信息反馈给客户，从而提高信息的查询和使用效率。表单是实现交互式网络浏览方式的一种手段。网络客户可以在表单域中输入各种信息，并通过提交操作，将各表单域中的输入信息传回服务器。服务器对输入信息进行组织与处理，将客户所需的相关信息动态地生成HTML文件，并反馈给客户。一般说来，表单的作用有以下几个方面： 收集反馈信息。 获取客户需求。 收集网上定货、托运和付款方式的有关信息。 设立留言簿。    徐 州 工 程 学 院 教 案 纸 创建搜索网页，供访问者通过输入查询条件，搜索网站信息。 进行身份认证。 迄今为止我们所设计的主页都是向网上发布信息。实现信息交互、从网上收集反馈信息的方法是在主页上建立输入表单。输入表单是主页的一个组成部分，主页的具有可输入表项及项目选择等控制所组成的栏目称为表单。在个人主页中表单用于收集质量调查、电子购物、商品交易、人才招聘等用户的反馈信息，是实现网上信息交流的重要手段。 3．3．1 建立输入表单 1. 建立表单 一个输入表单主要由输入表项、单选钮、选择框、成段文字输入及发送、复位按钮等表单控制组成的。表单是主页的组成部分，主页上建立一个表单须使用作成表单的标记<FORM>，格式为： <FORM> 表单内容： 输入表项 单选钮 选择框 输入成段文字 发送、复位按钮 </FORM> 注意，<FORM>标记内不能再嵌入<FORM>标记。但一个网页中可以定义多个表单。 表单内容由内容标记作成。作成表单内容的标记主要有3类，即作成输入表项和按钮控制的标记<INPUT>、作成选择栏控制的标记<SELECT>和输入成段文字的标记<TEXTAREA>。 <FORM>标记使用下列属性设定表单的处理方式： action——设定表单的处理代行手段。属性值HTTP网址或E-mail地址。 method——设定传送表单数据组的方法。取值为get（初值）或post。 mnctype——指定当method=”post”时向服务器传送表单所使用的content type。属性初值为”application/www-from-urlencoded” accept-charset——设定由服务器处理表单时能受理的输入数据的字集。 accept——指定用“，”号分开服务器处理表单内容类型的列表。 例如：<FORM action=http://somesite.com/prog/adduser method=”post”> …表单内容… </FORM> 表示发送一个由adduser程序处理的表单。 <FORM action=”mailto:Kligor.T@gee.whiz.com” method=”post”>    徐 州 工 程 学 院 教 案 纸 …表单内容… </FORM> 表示发送表单到电子信箱。 2. 输入表项 使用标记<input>及其属性type可以设计输入表项。表项的格式为： <form> <input type=” “ name=”” size=” “ maxlength=” “> </form> 属性说明如下： type=”text”——表示指定输入的单行文本以标准字符显示。 size=x——表示输入单行文本区域的宽度，x为字符数。 name——指定控制名 maxlength——单行字段内限制输入的最大字符数。 例tu8-2 输入表项 tu8-2 <form> <input type="text" size=20 maxlength=10><p> <input type="text" size=40 maxlength=4><p> <input type="text" size=35 maxlength=30><p> </form> 在表项前可写入表项名，以告诉读者应该在字段内输入什么内容。方法有三种： （1）直接在字段前可题写入表项名，例如： <form> 姓名：<input type="text" size=20><p> 性别：<input type="text" size=40><p> 住址：<input type="text" size=35><p> </form> 例tu8-3 直接在字段前可题写入字段名 tu8-3 <html> <head><title>毕业生情况表</title></head> <body> <form method="post" action="mailto:webmaster@millionlink.com"> <center> <font size="5" color="#ff0000">毕业生工作情况调查表</font> </center><p> <ul> <li>姓名：<input type="text" name="T1" size="8"> <li>性别：<input type="radio" name="男">男<input type="radio" name="    徐 州 工 程 学 院 教 案 纸 女">女 <li>毕业时间：<input type="text" name="T3" size="4">年<input type="text" name="T4" size="2">月<input type="text" name="T5" size="2">日<br> <li>所在班级：<input type="text" name="T6" size="11">系<input type="text" name="T6" size="11">专业<input type="text" name="T6" size="11">班 <li>现工作单位：<input type="text" name="T7" size="68"> <li>通信地址：<input type="text" name="T7" size="68"> <li>邮政编码：<input type="text" name="T7" size="20"> <li>电话号码：<input type="text" name="T7" size="20"> <li>E_mail：<td><input type="text" name="T7" size="68"></ul> </form></body></html> （2）使用标签。 <FORM><P> <LABLE for=”firstname”>First name :</LABLE> <INPUT type=”text” id=”firstname”><br> <LABLE for=”lastname”>Last name :</LABLE> <INPUT type=”text” id=” lastname”><br> <LABLE for=”email”> email :</LABLE> <INPUT type=”text” id=” email”><br> </P></FORM> 标签标记<LABEL>给操作加入信息，使用格式为： <LABLE for=” firstname”>字段名：</LABLE> 其中使用for属性将标签和其他控制挂在一起，属性值必须和同文档中其他控制设定的id属性值相同。例如 例tu8-4 使用标签设定单行字段名 tu8-4 代码设计为 <form action="http://somesite.com/prog/adduser" method="post"> <center><font size="5" color="#ff0000">毕业生工作情况调查表</font></center><p> <p><table> <tr><td><table for="aaa1">姓名：</table><td><input type="text" id="aaa1"> <td><table for="aaa2">性别：</table><td><input type="text" id="aaa2"> <tr><td><table for="aaa3">毕业时间：</table><td><input type="text" id="aaa3"><td><td>    徐 州 工 程 学 院 教 案 纸 … <tr><td><table for="aaa9">E_mail：</table><td><input type="text" id="aaa9"></table> </form> （3）结构化输入 结构化输入使用FIELDSET和LEGEND标记将相关操作和标签成组化。格式为： <FIELDSET> <LEGEND>Personal information</LEGEND> last name:<input name=” personal_lastname” type=”text” tabindex=”1”> first name:<input name=” personal_firstname” type=”text” tabindex=”2”> address:<input name=” personal_address” type=”text” tabindex=”3”> …more personal information… </FIELDSET> 这里<LEGEND>标记用于指定FIELDSET的标题。 例tu8-5 结构化输入 tu8-5 代码设计为 <fieldset> <legend><h3>个人信息</h3></legend> <table> <tr><td>姓名：<td><input type="text" name="T1" size="8">性别：<input type="radio" name="男">男<input type="radio" name="女">女 <tr><td>毕业时间：<td><input type="text" name="T3" size="4">年<input type="text" name="T4" size="2">月<input type="text" name="T5" size="2">日<br> <tr><td>所在班级：<td><input type="text" name="T6" size="11">系<input type="text" name="T6" size="11">专业<input type="text" name="T6" size="11">班 <tr><td>现工作单位：<td><input type="text" name="T7" size="68"> <tr><td>通信地址：<td><input type="text" name="T7" size="68"> <tr><td>邮政编码：<td><input type="text" name="T7" size="20"> <tr><td>电话号码：<td><input type="text" name="T7" size="20"> <tr><td>E_mail：<td><input type="text" name="T7" size="68"></table> </fieldset>    徐 州 工 程 学 院 教 案 纸 3．3．2 选择钮控制 表单中使用两种选择钮，一是圆选钮，二是方选钮。通过<INPUT>标记的type属性进行设定选择钮控制。Type值选择为radio属性时生成圆选钮，type值选为checkbox时生成方选钮。另外，还使用value属性设定控制操作的初值。 1．圆选钮 圆选钮用于在同一类型的项目中选择一项的场合。<INPUT>标记内使用type属性并用name属性输入控制名，同一组选钮的控制名相同。格式为： <INPUT type=”raido” name=”控制名” value=”值”> 例如： <FORM> <INPUT type=”raido” name=”soft”>Windows <INPUT type=”raido” name=”soft”>Unix <INPUT type=”raido” name=”soft”>Windows NT </FORM> 设定一组圆选钮。 例tu8-6 圆选钮 tu8-6 <fieldset> <legend><h3>个人信息</h3></legend><table> <tr><td>姓名：<td><input type="text" name="T1" size="8">性别：<input type="radio" name="男">男<input type="radio" name="女">女 <tr><td>现工作单位：<td><input type="text" name="T7" size="68"> <tr><td>电话号码：<td><input type="text" name="T7" size="20"> <tr><td>E_mail：<td><input type="text" name="T7" size="68"></table> </fieldset><p><p><hr> <fieldset> <legend><h3>单位性质</h3></legend> <table> <tr><td><input type="radio" name="单位性质">外资企业 <td><input type="radio" name="单位性质">国有企业 <tr><td><input type="radio" name="单位性质">私营企业 <td><input type="radio" name="单位性质">科研单位 <tr><td><input type="radio" name="单位性质">大专院校 <td><input type="radio" name="单位性质">其他</table> </fieldset> 2．预置按钮 在若干个按钮中预先置一按钮时，在<INPUT>标记中再加入使用checked属性。例如：    徐 州 工 程 学 院 教 案 纸 <INPUT type=”raido” name=”soft” checked>Windows <INPUT type=”raido” name=”soft”>Unix <INPUT type=”raido” name=”soft”>Windows NT 其中第一个选钮被预置。 例tu8-7 预置按钮 tu8-7 <fieldset> <legend><h3>个人信息</h3></legend><table> <tr><td>姓名：<td><input type="text" name="T1" size="8">性别：<input type="radio" name="男" checked>男<input type="radio" name="女">女 <tr><td>现工作单位：<td><input type="text" name="T7" size="68"> <tr><td>电话号码：<td><input type="text" name="T7" size="20"> <tr><td>E_mail：<td><input type="text" name="T7" size="68"></table> </fieldset><p><p><hr> <fieldset> <legend><h3>单位性质</h3></legend> <table> <tr><td><input type="radio" name="单位性质">外资企业 <td><input type="radio" name="单位性质" checked>国有企业 <tr><td><input type="radio" name="单位性质">私营企业 <td><input type="radio" name="单位性质">科研单位 <tr><td><input type="radio" name="单位性质">大专院校 <td><input type="radio" name="单位性质">其他</table> </fieldset> 选钮名如果传送不到制作者一方，则制作者不明白读者选择了那一个按钮。为此加入value属性以设定控制初值。格式为： < INPUT type="radio" name="控制名" value=”值”> 例如： <FORM> <INPUT type=”raido” name=”soft” value=”win” checked>Windows <INPUT type=”raido” name=”soft” value=”unix”>Unix <INPUT type=”raido” name=”soft” value=”winnt”>Windows NT </FORM> 3．方选钮控制 方选钮控制是表单的组成部分之一。使用<INPUT>标记的type属性并选择值为checkbox时可设定为方选钮。例如： <INPUT type=” checkbox” name=”soft” checked>Windows 设定为方选钮并被预置。    徐 州 工 程 学 院 教 案 纸 例tu8-8 设置方选钮并预置 tu8-8 <tr><td><input type="checkbox" name="业务专长" value="软件技术">软件技术 <td><input type="checkbox" name="业务专长" value="数字通信" checked>数字通信 <tr><td><input type="checkbox" name="业务专长" value="自动控制">自动控制 <td><input type="checkbox" name="业务专长" value="网络技术">网络技术 <tr><td><input type="checkbox" name="业务专长" value="网页设计">网页设计 <td><input type="checkbox" name="业务专长" value="其他">其他 方选钮可以预置，方选钮允许选择多个选项，又称为复选框。鼠标单击则选中，再次单击则取消选择。 4. Reset按钮和Submit按钮 Reset按钮是用户取消输入的表单内容而使用的按钮。按此按钮将清除原来的全部输入以待重新输入。格式为： < INPUT type="reset"> 它将自动给按钮加上名字reset，如果想更改按钮名，可使用VALUE属性。格式为： < INPUT type="reset" value=”按钮名”> submit按钮是用户发送表单时使用的按钮，按此按钮将发送表单。格式为： < INPUT type="submit"> 按钮的缺省名为submit Query，同样，更改按钮名使用VALUE属性。格式为： < INPUT type=" submit " value=”按钮名”> 例如： < INPUT type="reset" value=”单击按钮修改表单”> < INPUT type=" submit " value=”单击按钮发送表单”> 将分别设定名为“单击按钮修改表单”的恢复按钮和名为“单击按钮发送表单”的发送按钮。 例tu8-9 复位按钮和Submit按钮 tu8-9 <center> <font size="5" color="#ff0000">毕业生工作情况调查表</font> </center> … <input name="submit" value="submit" type="submit"><br><P>    徐 州 工 程 学 院 教 案 纸 <input name="reset" type="reset"> 5. 图像Reset按钮和Submit按钮 给Reset按钮和Submit按钮加图像使用<BUTTON>标记。例如： <BUTTON name=”submit” value=”submit” type=”submit”> Send<IMG src=”/icons/wow.gif” alt=”wow”> </BUTTON> 将使发送按钮变为一个图像按钮。BUTTON标记使用的属性有： name——设定控制操作名 value——设定按钮的初值 type——说明按钮类型可取值为： type=”submit”——发送按钮 type=”reset”——复位按钮 type=”button”——弹出式按钮 例如：<form action=http://somesite.com/prog/adduser method=”post”> <BUTTON name=”submit” value=”submit” type=”submit”> Send<IMG src=”/icons/wow.gif” alt=”wow”></BUTTON> <BUTTON name=”reset” type=”reset”> Reset<IMG src=”/icons/oops.gif” alt=”oops”></BUTTON> </p></form> 例tu8-10 图像按钮 tu8-10 代码设计为 <center><font size="5" color="#ff0000">毕业生工作情况调查表</font></center> … <button name"submit" value="submit" type="submit"> send<img src="../图片/Image7.gif" alt="faa" width="60" height= "40"></button> <button name="reset" type="reset"> reset<img src="../图片/图1-5.gif" alt="sanx" width="60" height= "40"></button> 3．3．3 选择栏 选择栏分弹出式选择栏和字段式选择栏两种。生成选择栏使用标记<SELECT>和选项标记<OPTION>。标记<SELECT>可使用的属性有： name——指定控制操作名。 size——在带滚动条的列表选择栏中一次可见的列表项目数。 multiple——布尔属性，设定时可进行多元素选择，否则仅选一项。 标记<OPTION>的属性有：    徐 州 工 程 学 院 教 案 纸 Selected——布尔型属性，设定时则该项被预置。 Value——指定控制操作的初始值，缺省时初值为OPTION的内容。 Label——指定选择项的标签。 1．弹出式选择栏 弹出式选择栏的使用格式为： <form> <select> <option>选项1 <option>选项2 <option>选项3 </select> </form> 在浏览器上显示一个选择栏，选项1显示在栏内，其后是一个带倒立三角形的弹出式按钮，单击按钮则选择栏向下延伸出现各选项。 例tu8-11 弹出式选择栏 tu8-11 代码设计为 <table><tr><td colspan=4 align="center"><h2>职称和职务</h2><tr> <td>职称：<td><select name="职称" size="1"> <option selected value="高级工程师">高级工程师 <option value="工程师">工程师 <option value="教授">教授 <option value="副教授">副教授 <option value="讲师">讲师 <option value="其他">其他 </select> <td>职务：<td><select name="职务" size="1"> <option value="总工程师">总工程师 <option selected value="副总工程师">副总工程师 <option value="经理">经理 <option value="副经理">副经理 <option value="部门负责人">部门负责人 <option value="技术人员">技术人员 <option value="其他">其他 </select></table> 2．字段式选择栏 格式为： <SELECT size=”n”> 即在SELECT标记内使用size属性，n为字段式选择栏内显示的选择项    徐 州 工 程 学 院 教 案 纸 数。拖动滚动条可在选择栏内显示其他选择项。例如： <SELECT multiple size=”4” name=”component-select”> <OPTION select value=” component_1_a”> component_1</OPTION> <OPTION select value=” component_1_b”> component_2</OPTION> <OPTION >component_3</OPTION> <OPTION >component_4</OPTION> <OPTION >component_5</OPTION> <OPTION >component_6</OPTION> <OPTION >component_7</OPTION> </SELECT> 其中，一共有7个菜单项，可看到4项，使用滚动条可看到其他项。使用<select>标记可生成一个菜单，菜单的各项由<option>标记生成，一个<option>标记生成一个菜单项，<select>标记中至少有一个菜单项。 3．预置选择项 若预置某一项为选择项时，可在<option>标记内加入selected属性。格式为： <OPTION selected>选择 注意： （1）option标记中无selected属性时，该菜单项不被预置。 （2）option标记中有selected属性时，该菜单项被预置。 （3）当<select>标记中有multiple属性设定且多个<option>标记有selected属性设定时，则多项被预置。 （4）当<select>标记中无multiple属性设定且多个<option>标记有selected属性设定时，则为错误。 例tu8-12 字段式选择栏 tu8-12 代码设计为 <table><tr><td colspan=4 align="center"><h2>职称和职务</h2><tr> <td>职称：<td><select name="职称" size="4" multiple> <option selected value="高级工程师">高级工程师<option value="工程师">工程师 <option value="教授">教授<option value="副教授">副教授 <option value="讲师">讲师<option value="其他">其他 </select> <td>职务：<td><select name="职务" size="4" multiple> <option value="总工程师">总工程师<option selected value="副总工程师">副总工程师 <option selected value="经理">经理<option value="副经理">副经理 <option value="部门负责人">部门负责人<option value="技术人员">技    徐 州 工 程 学 院 教 案 纸 术人员 <option value="其他">其他 </select></table> 4. 成段文字输入 使用多行字段采用标记<TEXTAREA>，属性有： name——指定控制操作名 rows——设定可视区输入的文本的行数。用户的输入可以多于这个行数，超过可视区的内容用滚动条进行控制操作。 cols——设定可视区输入的文本的列数。用户的输入可以越过这个宽度，超过可视区的内容用滚动条进行控制操作。 使用格式为： <form> <textarea name=” “ rows=”行数” cols=”列数”> 多行文本 </textarea> </form> 一个表单中可以有多个多行文本输入区。 例tu8-13 成段文字输入 tu8-13 代码设计为 <hr><font size="5" color="#ff0000">请对下列各项发表意见</font> <ol><li><font size="4">您在工作中取得成绩：</font></p> <textarea rows="5" name="S4" cols="70"></textarea><p> <li><font size="4">你认为学校的教学中应增加那些方面的课程：</font> <textarea rows="2" name="S1" cols="70"></textarea><p> <li><font size="4">你认为学校的教学中应增加那方面的能力培养：</font> <textarea rows="2" name="S2" cols="70"></textarea><p> <li><font size="4">你对学校的希望是：</font> <textarea rows="2" name="S3" cols="70"></textarea></ol><hr> 3．3．4 表单布局 适当排列输入表单的各个输入单元，可以使制作的表单脉络清晰，美观大方。表单布局常采用以下几种方式： 1．将表格引入表单 将表格引入表单可以使得表单按表格那样规则排列，例如在例8-3中使用表格功能对齐各输入表项；在例8-5中利用表格功能将圆选钮排列成网格布局。 2．将列表引入表单    徐 州 工 程 学 院 教 案 纸 在表单中使用列表功能可对齐各同类控制项，例如在例8-2中使用列表规则排布各输入字段；在例8-12中使用有序列表给各成段文字输入控制项加序号并使其布局规则。 3．多表单文件 可以在一个文件内设置多个表单。例如： <html><body> <form action="mailto:mail地址" method="post"> <dt>姓名：<dd><input type="text" name="name" size=20 maxlength =22><br> <dt>电子信箱地址：<dd><input type="text" name="Email" size=20 maxlength=22><br> <dt>主页的URL：<dd><input type="text" name="URL" size=20 maxlength=22><P> <dt>主机系统： <input type="radio" name="system" value="windows" checked>PC/windows <input type="radio" name="system" value="Mac">Macintosh <input type="radio" name="system" value="Unix">Unix <input type="radio" name="system" value="Others">其他<br> <dd>其他场合系统名：<input type="text" name="name" size=20 maxlength=22><P> <dt>Country: <select name="Country"> <option checked>中国<option>日本<option>英国<option>其他</select><p> <dt>使用意见：<dd><textarea name="使用意见" rows="5" cols="40"></textarea> </dl> <input type="submit" value="发言"> <input type="reset" value="修改"> </form><hr> <form> 姓名：<input type="text" size=20 maxlength=10><P> 性别：<input type="text" size=40 maxlength=4><P> 住址：<input type="text" size=35 maxlength=30><P> <input type="checkbox" name="soft" checked>windows <input type="checkbox" name="soft">Unix <input type="checkbox" name="soft">Windows NT<p>    徐 州 工 程 学 院 教 案 纸 <hr> <input type="reset" value="修改表单"><p> <input type="reset" value="发送表单"> </form></body></html> 上面的文件中含有两个表单。 3．3．5 传送表单 发送表单的方法由<form>标记中使用method属性进行指定的。method属性值有两个，即get和post。 1．使用E-mail 发送表单是在<form>标记内加入action和method两个属性。发信方式依据是否使用服务器计算机的CGI（公共网关接口）而变化。这里介绍在不使用CGI的情况下用自己的E-mail收取form内容的方法。格式为： <FORM action=mailto:mail地址 method=”post”> 即在action属性值mailto:之后，写入自己的E-mail地址。method属性的值取post。 例tu8-15 发送表单 tu8-15 <html><body> <form action="mailto:mail地址" method="post"> <dt>姓名：<dd><input type="text" name="name" size=20 maxlength=22><br> <dt>电子信箱地址：<dd><input type="text" name="Email" size=20 maxlength=22><br> <dt>主页的URL：<dd><input type="text" name="URL" size=20 maxlength=22><P> <dt>主机系统： <input type="radio" name="system" value="windows" checked>PC/windows <input type="radio" name="system" value="Mac">Macintosh <input type="radio" name="system" value="Unix">Unix <input type="radio" name="system" value="Others">其他<br> <dd>其他场合系统名：<input type="text" name="name" size=20 maxlength=22><P> <dt>国别: <select name="Country"> <option checked>中国<option>日本<option>英国<option>其他</select><p> <dt>使用意见：<dd><textarea name="使用意见" rows="5" cols="40"></textarea>    徐 州 工 程 学 院 教 案 纸 </dl> <input type="submit" value="发信"> <input type="reset" value="修改"> </form></body></html> 输入数据，单击[发信]按钮，弹出如图3-37所示的提交发送信息框。单击[确定]按钮，弹出如图3-38所示的确定发送信息框。P118 2．使用CGI CGI（Common Gateway Interface，公共网关接口）位于使用Unix或Windows NT的Internet服务器上。将输入表单的文字或数据传送给CGI的格式为： <FORM method=”post” action=”CGI程序的目录路径/***.cgi”> 例tu8-17 使用CGI tu8-17 <html><body> <form action="cgi-bin/***.cgi" method="post"> <dt>姓名：<dd><input type="text" name="name" size=20 maxlength=22> <br> <dt>电子信箱地址：<dd><input type="text" name="Email" size=20 maxlength=22><br> <dt>E-mail地址：<dd><input type="text" name="URL" size=20 maxlength=22><P> <p><dt>意见：<dd><textarea name="意见" rows="5" cols="40"></textarea></dl> <input type="submit" value="发信"> <input type="reset" value="修改"> </form></body></html>    徐 州 工 程 学 院 教 案 纸 3.4 声音和影像 3．4．1 播放声音 在网页制作中，插入声音能够使主页更加生动活泼。主页中播放声音通常有两种方式，一种方式是打开主页时自动播放的背景声音，另一种是在某个网页中单击某个链接时播放声音。 背景声音 使用<BGSOUND>标记可以加入背景声音，格式为 <BGSOUND src=”…” loop=n> 其中，属性src=”…”表示播放的声音文件，loop=n表示播放的次数。例如： <HTML> <BODY> <BGSOUND src=”music.mid” loop=3> </BODY> </HTML> 利用超级链接播放的声音文件 利用超级链接播放的声音文件的用法如下。 <HTML> <BODY> <A href=”music.mid”>配音</A> </BODY> </HTML> 利用<EMBED>标记播放的声音文件 <EMBED>标记用于播放声音和影像，声音文件可以是.wav或.mid文件；影像可以是.mpg或.avi文件。使用格式为 <EMBED src=”文件名” width=x height=y controls=” “> 主要属性说明如下： src——插入文件的路径或URL地址。 autostart——取值为true时自动播放。 loop——取值为true时自动循环播放。 width——显示的播放控件的宽度，单位为像素。 height——显示的播放控件的高度，单位为像素。 controls——可以选择playbutton，pausebutton，stopbutton，或volumelever。 将autostart属性设置为true时，则在打开页面时自动播放声音。    徐 州 工 程 学 院 教 案 纸 P120例[3-40]播放立体声示例。 代码设计为 <P> <CENTER> <FONT size=1 color=”red”><B> <EMBED src=”Tj.mid” volume=100> </EMBED></B> </FONT> </CENTER> <BR> <P> 在浏览器中显示的结果如图3-40所示。P120 3．4．2 加入影像 通常，在主页中加入影像有两种方法。一种是直接使用超级链接，另一种是使用<EMBED>标记。 直接用超级链接 下面给出一个直接用超级链接在主页中加入影像的例子。 代码设计为 <HTML> <BODY> <A href=”主楼外景2.mpg”>学校介绍</A> </BODY> </HTML> 在浏览器中的显示主页后，单击热点文本，结果如图3-41所示。P121 在主页中嵌入影像 使用<EMBED>标记可以在主页中嵌入影像。影像可以是.mpg文件，也可以是.avi文件。 [例3-41]播放影像主页的例子。P121 代码设计为 <html> <body background=”r6c.gif” link=”#0000ff” vlink=”#9900ff” alink=”0000ff”> <pre> </pre> <center><font size=6 color=”#ff0000”><B>序言</B></font><p> <img src=”bar1.gif” width=300 height=3></center><p><p> <p>    徐 州 工 程 学 院 教 案 纸 <center> <table cellpadding=10><tr><td width=300 bgcolor=”#fff0ff”> <p><font size=3 color=”#0000ff>&nbsp; &nbsp; &nbsp;<B> 同学们！ 从现在开始我们一起学习Web主页设计技术。同学们可能已在WWW网上遨游过，浏览过许多五彩缤纷的网页。网页上丰富的信息、生动的画面、快捷的信息获取，简便的浏览方式，使你流连忘返，叹为观止，不由自主地会产生编写自己的主页、在网上冲浪、将自己的作品送往世界的强烈愿望。本课程学习的HTML语言就是一种设计Web主页的网络应用语言，它提供了建立Web主页的机制，使你能很方便地进行网页设计。 让我们一起轻松、愉快地学习如何设计自己的主页吧！请观看下一页。</B> </font><p><p> <td width=200> <EMBED src=”主楼外景2.mpg”> </td></tr> </table> </center> <pre> </pre> <center><img src=”bar1.gif width=300 height=3></center><p><p> <center><font size=4><a href=”../start.html”><前一页></a> </font> <font size=4><a href=”kj002.html”><次一页></a></font> </center> </body> </html> 在浏览器中显示的结果如图。    徐 州 工 程 学 院 教 案 纸 3.5 主页布局 在主页设计中，页面布局是非常重要的。一个良好的主页布局往往给浏览者留下十分深刻的印象。主页页面布局的方法很多，这里仅列举几个简单的例子。 利用表格进行主页布局 通常，利用表格的<TABLE>，<TR>和<TD>标记及其属性即可进行主页布局。例如，图3-43给出了一个利用表格布局的例子。 代码设计为 <HTML> <HEAD><TITLE>图3-43</TITLE></HEAD> <TABLE align="center" width=700 cellpadding=5 cellspacing=20> <TH colspan=2 bgcolor="#ffffff"> &nbsp;&nbsp;&nbsp;&nbsp; <FONT size=6 color="red"><B>请选择学习内容！</B></FONT> <TR> <TD><FONT size=4><img border="0" src="../图片/34043.gif" width="39" height="26">&nbsp;&nbsp; <a href="tu7-2.html"><B>建立框架</B></a></FONT></TD> <TD><FONT size=4><img border="0" src="../图片/34043.gif" width="39" height="26">&nbsp;&nbsp; <a href="tu7-5.html"><B>初始化框架</B></a></FONT></TD> </TR> <TR> <TD><FONT size=4><img border="0" src="../图片/34043.gif" width="39" height="26">&nbsp;&nbsp; <a href="tu7-6.html"><B>边框宽度和颜色</B></a></FONT></TD> <TD><FONT size=4><img border="0" src="../图片/34043.gif" width="39" height="26">&nbsp;&nbsp; <a href="tu7-8.html"><B>空白和加入滚动条</B></a></FONT></TD> </TR> <TR> <TD><FONT size=4><img border="0" src="../图片/34043.gif" width="39" height="26">&nbsp;&nbsp; <a href="tu7-10.html"><B>框架嵌套</B></a></FONT></TD> <TD><FONT size=4><img border="0" src="../图片/34043.gif" width="39" height="26">&nbsp;&nbsp;    徐 州 工 程 学 院 教 案 纸 <a href="tu7-13.html"><B>框架链接</B></a></FONT></TD> </TR> <TR> <TD><FONT size=4><img border="0" src="../图片/34043.gif" width="39" height="26">&nbsp;&nbsp; <a href="tu7-17.html"><B>内联框架</B></a></FONT></TD> <TD><FONT size=4><img border="0" src="../图片/34043.gif" width="39" height="26">&nbsp;&nbsp; <a href="tu7-19.html"><B>框架的替换内容</B></a></FONT></TD> </TR> <TR> <TD><FONT size=4><img border="0" src="../图片/34043.gif" width="39" height="26">&nbsp;&nbsp; <A href="k7100.html#h79"><B>框架的稍长说明</B></A></FONT></TD> <TD><FONT size=4><img border="0" src="../图片/34043.gif" width="39" height="26">&nbsp;&nbsp; <A href="k7100.html#h7a"><B>练习题</B></A></FONT></TD> </TR> <TR> <TD><FONT size=4><img border="0" src="../图片/34043.gif" width="39" height="26">&nbsp;&nbsp; <A href="k7100.html#h7b"><B>思考题</B></A></FONT></TD> <TD><FONT size=4><img border="0" src="../图片/34043.gif" width="39" height="26">&nbsp;&nbsp; <A href="k7100.html"><B>自测题</B></A></FONT></TD> </TR> </TABLE> </HTML> 利用列表和 &nbsp;布局 使用列表和符号&nbsp；进行主页布局的例子如图3-44所示。 使用列表和符号&nbsp；进行布局的网页的主要代码为 <HTML> <HEAD><TITLE>图3-44</TITLE></HEAD> <p align="center"> <FONT size=5 color="red"><EM>请选择学习内容！</EM></FONT><BR> <img border="0" src="../图片/海边.jpg" width="487" height="250"> <UL> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img    徐 州 工 程 学 院 教 案 纸 border="0" src="../图片/5.gif" width="32" height="32"><B><A href="#h01">主页作品欣赏</A></B><P> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img border="0" src="../图片/5.gif" width="32" height="32"><B></B><A href="#h02"><B>HTML4.0</B></A><P> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img border="0" src="../图片/5.gif" width="32" height="32"><B></B><A href="#h03"><B>HTML和主页</B></A><P> </FONT> </UL> <HR size=4 color="#ff00ff" width=600> </HTML> 本例中使用空格&nbsp；设置元素在主页上的位置。 利用<PRE>标记布局 使用<PRE>标记设计一个主页的例子如图3-45所示。 使用<PRE>标记布局的网页的主要代码为 <html> <head><title>图3-45</title></head> <center> <FONT size=6 color="red"><B>请选择学习内容：</B></FONT><p align="center"> </center><img border="0" src="../图片/Image13.gif" width="613" height="11" align="left"> <pre><font size=5> <img border="0" src="../图片/Image7.gif" width="13" height="13"><a href="kj/k1000.html">第1章 HTML和Web页</a> </font><font size=5><img border="0" src="../图片/Image7.gif" width="13" height="13"></font><font size=5><a href="kj/k2000.html">第2章 Web主页的文本及布局</a> </font><font size=5><img border="0" src="../图片/Image7.gif" width="13" height="13"></font><font size=5><a href="kj/k3000.html">第3章 主页中加入图像</a> </font><font size=5><img border="0" src="../图片/Image7.gif" width="13" height="13"></font><font size=5><a href="kj/k4000.html">第4章 在主页中使用列表</a> </font><font size=5><img border="0" src="../图片/Image7.gif" width="13" height="13"></font><font size=5><a href="kj/k5000.html">第5章 创建超文本链接</a>    徐 州 工 程 学 院 教 案 纸 </font><font size=5><img border="0" src="../图片/Image7.gif" width="13" height="13"></font><font size=5><a href="kj/k6000.html"> 第6章 创建表格</a> </font><font size=5><img border="0" src="../图片/Image7.gif" width="13" height="13"></font><font size=5><a href="kj/k7000.html">第7章 框架</a> </font><font size=5><img border="0" src="../图片/Image7.gif" width="13" height="13"></font><font size=5><a href="kj/k8000.html">第8章 输入表单</a> </font><font size=5><img border="0" src="../图片/Image7.gif" width="13" height="13"></font><font size=5><a href="kj/k9000.html">第9章 Java脚本和Java小应用程序</a> </font><font size=5><img border="0" src="../图片/Image7.gif" width="13" height="13"></font><font size=5><a href="kj/k1000.html">第10章 使用ActiveX制作主页</a> </font><font size=5><img border="0" src="../图片/Image7.gif" width="13" height="13"></font><font size=5><a href="kj/k1000.html">答疑</a> </font> </html> 上机练习题 P126 1. 2. 3. 4.    徐 州 工 程 学 院 教 案 纸 第4章 使用JavaScript设计交互主页 [学习要点] 1. JavaScript概述 2. JavaScript基础 3. 交互主页设计 通过本章的学习要求掌握以下几点： 1．掌握<Script>标记的用法和在HTML文件的插入位置，会编写简单的Java脚本和制作简单的主页。 2．掌握JavaScript基本语法 3. 了解一些常用的JavaScript函数、对象 本章任务：作成如图4-1（tu9-1）所示的一个天气预报的动态主页。其中字幕部分使用JavaScript脚本做成，形成一幅动态主页。 HTML给主页创作者提供了丰富的标记和很大的灵活性，但是，HTML本身是静态的，一旦文件编成则不允许用户干预它而仅仅提供超链接。JavaScript提供了制作动态主页的强有力的工具。 4.1 JavaScript概述 4．1．1 JavaScript简介 Java Script是一种粗略地以Java为基础的脚本制作语言。Java Script是一种解释性语言，JavaScript命令可以直接嵌入HTML文件，支持JavaScript的WWW浏览器能够解释并执行这些命令。支持Java Script的WWW浏览器有Netscape Navigator 4.0以上版本、Microsoft Intemet Explorer 4.0以上版本和Hot Java。 JavaScript给用户提供了动态、交互地扩展HTML文件的手段。例如，可以读入Script以动态变更HTML文件的内容，使用表单中的INPUT标记可以由用户输入数据、与表单的控制操作相结合，作成图形界面元素及通过诸如读入、标记焦点、鼠标操作等影响文件的事件对页面进行操作等。 Java Script提供了丰富的内置函数和命令，它能在浏览器中显示HTML，进行数学运算、演示声音、以及单击窗体中的按钮。 在HTML文件中有仅在读入文件执行并显示的Script和仅在特别事件产生时执行的Script.。 Java Script语言的前身叫做Livescript。在Sun公司推出著名的Java语言之后，Netscape公司引进了Sun公司有关Java程序设计的概念，将自己原有的Livescript重新设计，并改名为Java Script。Java Script是    徐 州 工 程 学 院 教 案 纸 一种基于对象和事件驱动并具有安全性能的脚本语言，它可以产生具有交互功能的Web页面，从而减少Web制作的复杂性，使网页变得更生动。 Java Script的基本特征 1．简单性 JavaScript是一种脚本编写的语言，它采用小程序段的方式实现编程，像VBScript脚本语言一样，JavaScript同样也是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似，但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释，它可以和HTML标识结合在一起，从而方便用户的使用操作。 2．动态性 JavaScript是动态的，它可以直接对客户输入做出响应，无须经过Web服务程序。它对用户的响应，是采用事件驱动的方式进行的。所谓事件驱动，就是指在页面中执行了某种操作后产生的相应动作，比如按下鼠标、移动窗口、选择菜单等都可以视作事件。当事件发生后，可能会引起相应的事件响应。 3．跨平台性 JavaScript具有跨平台性，只要浏览器支持JavaScript，它就能正确执行，这和一般常用的编程语言是不同的，但某些函数可能不是对所有的平台都可用。目前常用的浏览器Intemet Explorer和Netscape Navigator均支持JavaScript。 4．基于对象的语言 JavaScript是一种基于对象的语言，它本身内置了一些基本的对象。这样利用JavaScript语言编制的程序就可以直接使用这些对象来完成相应的功能，而不需要再由自己来创建这些类。 5．具有良好的安全性 JavaScript是一种具有良好安全性的编程语言，它只能通过浏览器来实现信息的浏览和动态交互，而不允许访问用户硬盘或将数据保存到服务器上，同样它也不能从其它文件获取信息，也就是说，JavaScript程序不能对某计算机中的目录和文件进行操作。 4．1．2 JavaScript和HTML 1.<SCRIPT>标记 将Java脚本嵌入到HTML文件中时使用<SCRIPT>标记。<SCRIPT>和</SCRIPT>之间是脚本内容。格式为： <SCRIPT type=”text/Javascript” src=” “ language=” “> …… (Java脚本) ……    徐 州 工 程 学 院 教 案 纸 </SCRIPT> 属性说明如下： type——指定标记内容的Script语言，Script语言是作为内容类型被指定的，必须在标记中使用。 Languge——说明当要解释脚本时所要使用的脚本语言。可用type代替。 Src——用于说明来自外部要装载脚本的URL。 文件内所有的Script语言的初值设定均使用<META>标记，格式为： <META http-equiv=”content-script-type” content=”type”> type的值可取为”text/tcl”，”text/javascript”和”text/vbscript”。 例如： <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD><TITLE>A document with script</TITLE> <META http-equiv=”content-script-type” content=” text/javascript”> <script type=”text/javascript” src=http://someplace.com/progs/javacalc> </script> </HEAD> <body> <script type=”text/javascript”> …some java script… </script> </body> </HTML> 2.JavaScript插入HTML中 JavaScript在HTML文件中的插入位置是任意的，一般有两种方式：一是插入到<HTML>和</HEAD>标记之内；另一种是插入到<BODY>和</BODY>标记之内。 （1）在<HTML>和</HEAD>之间插入时的格式为： <HTML> <HEAD> <TITLE>************</TITLE> <META http-equiv=”content-script-type” content=” text/java script”> <script type=”text/javascript”> …    徐 州 工 程 学 院 教 案 纸 （Java Script） … </SCRIPT> </HEAD> </HTML> 这种方式常用于多次执行的函数，由于它放在文件头部，执行时将先于其他部分被解释。 例tu9-2 活动字幕 tu9-2 所谓活动字幕脚本是在浏览器上作成一个字段、在该字段内显示流动文字的脚本。多用于新闻、通知、广告等。下面是一个在表单的单行输入文本中显示一串流动文字的文件。在这个文件中，JavaScript置于<HEAD>和</HEAD>之间。 <html> <head> <title>JavaScript-01</title> <META http-equiv="content-script-type" content="text/javascript"> <script type="text/javascript"> var msg1="三峡地区天气预报。" var msg2="今日夜间天气晴。" var msg3="东风3、4级，零下3度。" var msg4="明天白天阴有雨。" var msg5="最高温度8度。" var msg=msg1+msg2+msg3+msg4+msg5 function disp() { setTimeout("disp()",500); msg=msg.substring(2,msg.length)+msg.substring(0,2); document.scroll.box.value=msg } </script> </head> <body> <center> <h1 align="center">早发白帝城</h1> </center> <hr> <p align="center"> <img src="../图片/图1-51%20.gif" align="left">    徐 州 工 程 学 院 教 案 纸 朝辞白帝彩云间<p align="center"> 千里江陵一日还<p align="center"> 两岸猿声啼不住<p align="center"> 轻舟已过万重山<p><hr> <p align="center"> <font size="5" color="red"><I>三峡地区天气预报</I></font><hr> <center> <form name="scroll"> <input name="box" type="text" size=60> </form> </center> <script type="text/javascript"> disp(); </script><hr> </body> </html> 从源程序来看，<SCRIPT>分成两部分。位于<HEAD>内的JavaScript设定流动文字和函数；位于<BODY>内的JavaScript使文字流动。当执行<BODY>内的JavaScript时，调动<HEAD>标记内的JavaScript。 （2）在<BODY>和</BODY>之间插入时的格式为： <HTML> <HEAD> <TITLE>************</TITLE> </HEAD> <BODY> <script type=”text/javascript”> … （Java Script） … </SCRIPT> </BODY> </HTML> P133[例4-2]在上述表单的单行输入文本中显示一串流动文字的文件中，我们将JavaScript照原样放在<BODY>和</BODY>之间。 tu9-2 代码设计为 <body> <script type="text/javascript"> var msg1="三峡地区天气预报。"    徐 州 工 程 学 院 教 案 纸 var msg2="今日夜间天气晴。" var msg3="东风3、4级，零下3度。" var msg4="明天白天阴有雨。" var msg5="最高温度8度。" var msg=msg1+msg2+msg3+msg4+msg5 function disp() { setTimeout("disp()",500); msg=msg.substring(2,msg.length)+msg.substring(0,2); document.scroll.box.value=msg } </script> <HR color=”ff0000”> <p align="center"> <font size="5" color="red"><I>三峡地区天气预报</I></font> <center> <form name="scroll"> <input name="box" type="text" size=60> </form> </center> <script type="text/javascript"> disp(); </script> <HR color=”ff0000”> </body>    徐 州 工 程 学 院 教 案 纸 4.2 JavaScript基础 4．2．1 JavaScript语言基础 JavaScript是一种面向对象的语言。与其他程序设计语言相同，有自己的数据、变量类型和表达式。P134——137 1.数据类型 JavaScript有4种基本数据类型：数字类型、字符串类型、布尔类型和null值。 （1）数字类型。例如，-0.25，310，0等。 （2）字符串类型。例如，java，asdf等。 （3）布尔类型。布尔类型值只有两个：真（true）或假（false）。它一般用于逻辑判断和流程控制等方面。 （4）null值 2.常数 常数必须是固定的值或字符串。 3.变量 JavaScript是一种弱类型语言，它的一个变量可以存放不同类型的数据。 定义格式为：var 变量名 变量名的书写规则如下。 大小写英文字母或下划线开头，后跟字母或数字。 字母大小写不同，则为不同的变量名。 例如：var msg1=”三峡地区天气预报。” 声明msg1是一个字符串型变量，并用”三峡地区天气预报。”给该变量赋值。 又例如：var a,b=null 则定义了两个变量a和b，其中变量a是未初始化的变量，变量b的值为null。 4.运算符和表达式 （1）运算符 JavaScript使用的运算符如下。 1）算术运算符 算术运算符包括+、-、*、/、%（取余数）5种。另外，JavaScript也使用C语言中使用的递增运算符（+ +）和递减运算符（- -），并分为前置运算和后置运算两种。 例如，变量x的值为10时， y = + + x 执行后x = 11，y = 11    徐 州 工 程 学 院 教 案 纸 y = x + + 执行后x = 11，y = 10 y = - - x 执行后x = 9，y = 9 y = x - - 执行后x = 9，y = 10 2）赋值运算符 将赋值运算符（=）右边的表达式的运算结果赋予左侧的变量。例如， var msg2 = “今日夜间天气晴。” a = a + 5 3）逻辑运算符 逻辑运算符对两个布尔值进行逻辑运算，其结果仍为布尔值。逻辑运算符有逻辑与（&&）、逻辑或（| |）和逻辑非（!）。 4）比较运算符 比较运算符对运算符两侧的两个运算元依从左到右的顺序进行比较运算。比较运算符包括： = = ——等于。 ! = ——不等于。 < ——小于。 > ——大于。 < = ——小于等于。 > = ——大于等于。 运算结果一定是一个逻辑值（true或false）。 5）字符运算符 JavaScript中用符号“+”连接字符串。例如， S = “三峡地区天气预报。” + “今日夜间天气晴。” 则将两个字符串连接在一起。又例如前面例子中， var msg1 = “三峡地区天气预报。” var msg2 = “今日夜间天气晴。” var msg3 = “东风3、4级，零下3度。” var msg4 = “明天白天阴有雨。” var msg5 = “最高温度8度。” var msg = msg1 + msg2 + msg3 + msg4 + msg5 上面的运算将5个字符串连接在一起。 6）位运算符 位运算符实现对运算符两侧的两个运算元按位进行指定的运算。位运算符主要如下。 & ——按位进行AND运算。 | ——按位进行OR运算。 ^ ——按位进行XOR（异或）运算。 << ——左移。   徐 州 工 程 学 院 教 案 纸 >> ——符号扩展右移。 >>> ——无符号扩展右移。 （2）表达式 表达式是JavaScript中用于计算出某种值的展示。根据数据的类型，JavaScript的表达式有如下3种。 算术表达式计算数值。 字符串表达式计算字符串。 逻辑表达式计算布尔值。 5.对象 对象是现代编程语言中最重要的概念之一。对象就是包含了一组数据进行的操作的完整结构。这些数据被称为属性，操作被称为方法。一般而言，只有对象的方法才可以访问、操作对象的属性。 访问一个对象的属性和方法的通常写法为 对象名.属性名 对象名.方法名 4．2．2 JavaScript基本语法 1.Comment P137_138 注释语句。使用方法有两种： // ——单一指令。 / * ——某块区的多重指令。 2.While语句 While语句与C或C ++语言的While指令一样，是一个循环语句。格式为 While（条件表达式） { JavaScript语句 } While指令后紧跟一个条件表达式，当条件为true时，执行循环体内的语句；当条件为false时，跳出循环。例如， var i = 10 while ( i > 0 ) { i - - document.write ( i + ‘<BR>’ ) } 当满足条件( i > 0 )为true时，从10开始，依次执行显示10，9，8，   徐 州 工 程 学 院 教 案 纸 7，…，直到变量每次循环减1到0；判断条件为false时，跳出循环，执行下面的语句。 3.For语句 与C或C++语言的for指令一样，是一个循环语句。For语句的格式为 For (初始值；条件表达式，步长) { JavaScript语句 } 使用时，通常设置一个循环计数变量并给予初值。 4．2．3 JavaScript函数 函数在JavaScript中占有相当重要的地位。函数是可以完成一定任务的一段代码。可以给它传递一定的参数来控制函数的运行。当函数有return语句时，它能返回一个值，代表运行结果。 例如， var msg1="三峡地区天气预报。" var msg2="今日夜间天气晴。" var msg3="东风3、4级，零下3度。" var msg4="明天白天阴有雨。" var msg5="最高温度8度。" var msg=msg1+msg2+msg3+msg4+msg5 function disp() { setTimeout("disp()",500); msg=msg.substring(2,msg.length)+msg.substring(0,2); document.scroll.box.value=msg } 这里定义了一个函数disp()。 函数体中的setTimeout方法是JavaScript中Window对象的一个用于设定定时器的方法，设定时间单位为毫秒。语法格式为 setTimeout（”执行函数”,时间间隔）； 函数体中的substring是string对象的一个方法，用于返回子字符串，格式为 “显示的字符串”.substring（index1,index2） 语句document.scroll.box.value = msg;是将字符串变量msg的值赋给document.scroll.box对象的value属性。其中，document指文件对象，   徐 州 工 程 学 院 教 案 纸 scroll是文件中的一个from对象名，box是该from对象内的一个text对象名。 <FORM name=”scroll”> <INPUT name=”box” type=”text” size=60> </FORM> 从上述中可以看出，JavaScript函数在形式上与其他语言类似，但具有独自的特点如下。 函数中的形式参数可以是数值、字符串和对象。例如， function test (from) 形式参数是对象。 函数中可以有任何JavaScript指令。 函数内部可调用其他函数，但不允许函数嵌套定义。 4．2．4 JavaScript对象 JavaScript是一种面向对象的语言。它提供了许多事先定义的对象供使用者利用，也允许使用者自行定义对象。 JavaScript的对象有其属性、方法和事件处理器。常用的主要对象如下。 1.Form（表单）对象 表单是HTML文件的一个对象，一个HTML文件（document）中可以有多个表单。而HTML文件中的每一个表单都是独立的对象。 （1）属性 Form（表单）对象的主要属性如下。 name——设置对象名称。例如， <FORM name=”scroll> <INPUT name=”box” type=”text” size=60> </FORM> 中的scroll是该表单的对象名。 action——存放action属性。 elements——每一个表单对应元素的数组。 length——elements数组中对象的个数。 method——如果表单的method属性等于get，则它包含0值；如果method属性等于post，则值为1。 target——定义表单递交后响应表单的窗口。 （2）事件处理函数 当用户递交表单时，将调用onSubmit事件处理函数。如果允许递交表单，则该函数返回值为true，否则为false。 （3）方法 submit()为递交表单。   徐 州 工 程 学 院 教 案 纸 （4）所属对象 Form对象所属对象为Document。 2.Button对象 Button对象用来在屏幕上显示一个按钮，也就是HTML的Button类型。 Button对象属性 name——存放 name属性确定的值。 value——存放value属性确定的值。 事件处理器 onClick为onClick函数处理Button对象所对应的按钮被按下时的事件。 方法 click()为单击按钮。 所属对象 Button对象所属对象为Form。 例4-3 tu9-3使用按钮改变主页的背景色 tu9-3 <html> <head> <title>使用按钮改变主页的背景色</title> <META http-equiv="content-script-type" content="text/javascript"> <script type="text/javascript"> function backdisp(col){ document.bgColor=col;} </script> </head> <body> … <font size="5">利用按钮改变背景色。</font> <form> <input type="button" value="白色" onClick="backdisp('white')"> <input type="button" value="青色" onClick="backdisp('blue')"> <input type="button" value="绿色" onClick="backdisp('green')"> <input type="button" value="红色" onClick="backdisp('red')"> <input type="button" value="紫色" onClick="backdisp('violet')"> <input type="button" value="黄色" onClick="backdisp('yellow')"> <input type="button" value="黑色" onClick="backdisp('black')"> <input type="button" value="橙色" onClick="backdisp('aqua')"> </form> </div>    徐 州 工 程 学 院 教 案 纸 </body></html> tu9-3所示，这个JavaScript是一个通过选择浏览器上显示的按钮，改变主页的背景色。<INPUT>标记内的属性TYPE=”button”显示由VALUE=”***”所指定的按钮。一旦按下按钮，则访问由onClick=所指定的函数。本程序中访问的是backdisp()函数。backdisp()函数是在<HEAD>标记内由function定义的，参数是col。于是col使document对象激活而改变背景色。 （1）选择按钮可以变更主页的背景色。 （2）文件中的颜色函数定义为 function backdisp(col) { document.bgColor=col; } document.bgColor=col;语句表示将颜色参数赋给document对象的bgColor属性。 （3）使用了button对象的onClick事件。格式为 onClick=”执行动作” 例如本例中， onClick=”backdisp(‘green)” 3.Document对象 Document对象指的是当前窗口中的一个HTML文件。HTML文件包含<HEAD>与</HEAD>标签，以及<BODY>与</BODY>标签中的内容。Document对象也包含了anchors，forms和links3种数组，以便用户使用Document对象中的元素。 （1）Document对象属性 P141 （2）事件处理器 对于Document对象，不存在事件处理函数。虽然onLoad及onUnload事件处理器是在<BODY>中设定的，不过这两者也算是Window对象的事件处理器。 （3）方法 P141 （4）所属对象 Document对象所属对象是Window对象。 4.Radio对象 Radio对象用来在屏幕上显示多选一的圆选择钮，而且任何情况下都只可以有一个选择钮被选中。 （1）Radio对象属性 P142 （2）事件处理器 onClick为处理单选按钮被选中的事件。    徐 州 工 程 学 院 教 案 纸 （3）方法 click()为选中单选按钮。 （4）所属对象 Radio对象所属对象是Form对象。 [例4—4]使用圆选择钮设计一个问卷调查的表单。 P142 代码设计为 <html> <head> <script language="javascript"> function judge(form) { var t1,t2,t3,j=0; if (form.r1[1].checked==1) t1=10; else t1=0; if (form.r2[2].checked==1) t2=10; else t2=0; if (form.r3[1].checked==1) t3=10; else t3=0; j=t1+t2+t3; return j; } </script> </head> <body> <center><h2>问卷调查</h2></center> <form name="lx1"> <div align="center"> <center> <table border=0 cellpadding=0 cellspacing=0 width=660 height=267> <tr> <td>一、单向选择：（每题10分）<p> 1.主页图像文件扩展名是 <input type="radio" name="r1">.BMP <input type="radio" name="r1">.GIF <input type="radio" name="r1">.ICON <input type="radio" name="r1">.MPEG </TD></TR><TR><TD>    徐 州 工 程 学 院 教 案 纸 2.主页插入图像的标记是 <input type="radio" name="r2">&lt;FONT&gt; <input type="radio" name="r2">&lt;TABLE&gt; <input type="radio" name="r2">&lt;IMG&gt; <input type="radio" name="r2">&lt;BODY&gt; </TD></TR> <TR><TD> 3.主页设计中文件的扩展名是 <input type="radio" name="r3">.TXT <input type="radio" name="r3">.html <input type="radio" name="r3">.doc <input type="radio" name="r3">.c </TD></TR> <TR><TD width=660 height=100> <input type="button" value="确定" onclick="alert('你的成绩为：'+judge(lx1)+'分。正确答案为：1.GIF；2&lt;IMG&gt;；3.html')"> <input type="reset" value="重选"> </td><tr> </table> </center> </div> </form> <hr size=10 width=90% noshade align="center"> </body> </html> 在浏览器中显示的结果如图4—3所示。 1）该交互主页在每一个选项中有4个选择。选择后单击[确定]按钮，则弹出一个正确答案的信息框，如图4—4所示。 2）设计的成绩统计函数为 function judge(form) { var t1,t2,t3,j=0; if (form.r1[1].checked==1) t1=10; else t1=0; if (form.r2[2].checked==1) t2=10; else t2=0; if (form.r3[1].checked==1) t3=10;   徐 州 工 程 学 院 教 案 纸 else t3=0; j=t1+t2+t3; return j; } 3）单选钮表单设计使用了3组对象，对象名分别为r1，r2和r3。代码为 1.主页图像文件扩展名是 <input type="radio" name="r1">.BMP <input type="radio" name="r1">.GIF <input type="radio" name="r1">.ICON <input type="radio" name="r1">.MPEG </TD></TR><TR><TD> 2.主页插入图像的标记是 <input type="radio" name="r2">&lt;FONT&gt; <input type="radio" name="r2">&lt;TABLE&gt; <input type="radio" name="r2">&lt;IMG&gt; <input type="radio" name="r2">&lt;BODY&gt; </TD></TR><TR><TD> 3.主页设计中文件的扩展名是 <input type="radio" name="r3">.TXT <input type="radio" name="r3">.html <input type="radio" name="r3">.doc <input type="radio" name="r3">.c</TD> 4）使用了Button对象的onClick事件调用alert方法。 <input type="button" value="确定" onclick="alert('你的成绩为：'+judge(this.form)+'分。正确答案为：1.GIF；2&lt;IMG&gt;；3.html')"> alert方法是Window对象的一个方法，用于弹出一个警告框。 5.Reset对象 Reset对象的作用是，在输入表格的过程中发生错误时，按下reset按钮就会将已经输入的数据全部清除，让使用者重新输入。 （1）Reset对象属性 name——Resct对象的名字。 Value——指定在reset按纽上显示的内容。 （2）事件处理器 当用户单击reset按钮时，将产生click事件，由onClick事件处理函数队click事件做出响应。 （3）方法   徐 州 工 程 学 院 教 案 纸 click()为按下按钮。 （4）所属对象 Reset对象的所属对象是Form对象。 6.Submit对象 Submit对象可以说是Button对象和Reset对象的兄弟，按下此按钮后可以让表格上的所有数据传送到表格（form）中action属性所指定的URL。 （1）Submit对象属性 name）——Submit对象的名字。 Value——指定在submit按钮上显示的内容。 （2）事件处理器 当用户单击submit按钮时，将产生click事件，由onClick事件处理函数对click事件作出响应。 （3）方法 click()为单击submit按钮。 （4）所属对象 Submit对象的所属对象是Form对象。 7.Text对象 Text对象是HTML文件中最常见的对象，它的功能是提供单行的文字输入栏位。 （1）Text对象属性 P146 （2）事件处理器 （3）方法 （4）所属对象 Text对象的所属对象是Form对象。 8.Date对象 Date对象是用于处理日期和时间的对象。此对象没有对象属性和事件处理函数。 （1）方法 P146 （2）所属对象 Date对象的所属对象是Document对象。 9.Window对象 Window对象在JavaScript层次结构中是顶层对象。它提供了通过框架的数组属性来访问每一个框架的子窗口。 （1）Window对象属性 P147 （2）事件处理器 （3）方法 Window对象没有所属对象。    徐 州 工 程 学 院 教 案 纸 4.3 交互主页设计 使用JavaScript编写设计一个自测练习主页，如图4-5所示。 在这个主页中，我们可以使用单选钮进行答案选择，最后评定得分，并给出正确答案，从而实现动态交互的主页。 在记事本中输入下列程序代码。 <HTML> <HEAD> <TITLE>测试系统</TITLE> <SCRIPT language=JavaScript> var hc1,hc2,hc3,hc4,hc5,h=0; function test(form) { if (form.c1[0].checked==1) hc1=2; else hc1=0; if (form.c2[1].checked==1) hc2=2; else hc2=0; if (form.c3[3].checked==1) hc3=2; else hc3=0; if (form.c4[1].checked==1) hc4=2; else hc4=0; if (form.c5[2].checked==1) hc5=2; else hc5=0; h=hc1+hc2+hc3+hc4+hc5; form.result.value="每题2分，得分为"+h+"分"; form.cc1.value="A"; form.cc2.value="B"; form.cc3.value="D"; form.cc4.value="B"; form.cc5.value="C"; } </SCRIPT> </HEAD> <BODY text="#ffff22" bgcolor="#000000" link="#5fff5f" vlink="#551a8b" alink="#ff8000"> <CENTER><H1><FONT color="yellow">自测题</FONT></H1> </CENTER>    徐 州 工 程 学 院 教 案 纸 下列各题A）、B）、C）、D）四题选项中，只有一个选项是正确的。请用鼠标选择。 <FORM> <DIV align="center"> <CENTER> <TABLE border=0 cellpadding=0 cellpadding=0 width=660 height=267> <TR> <TD width=359 height=70> 1.主页中可使用图像文件的扩展名是<BR> <INPUT type="radio" name="c1">A..GIF<BR> <Input TYPE="radio" name="c1">B..BMP<BR> <INPUT type="radio" name="c1">C..ICON<BR> <INPUT type="radio" name="c1">D..MPG<BR> </TD> <TD width=301 height=70> <BR> <FONT color="#ff0000">正确答案：</FONT> <INPUT type="text" name="cc1" size=4 style="color:#00000; border-style:solid; border-width:0"> </TD> </TR> <TR> <TD width=359 height=71> 2.设置图象在主页中央应使用<BR> <INPUT type="radio" name="c2" >A.&lt;IMG&gt;标记align<BR> <INPUT type="radio" name="c2" >B.&lt;CENTER&gt;标记<BR> <INPUT type="radio" name="c2" >C.&lt;IMG&gt;标记alt<BR> <INPUT type="radio" name="c2" >D.&lt;H&gt;标记align<BR> </TD> <TD width=301 height=71> <BR> <FONT color="#ff0000">正确答案：</FONT> <INPUT type="text" name="cc2" size=4 style="color:#00000; border-style:solid; border-width:0"> </TD> </TR> <TR> <TD width=359 height=70>   徐 州 工 程 学 院 教 案 纸 3.设置主页文本与图象对齐使用<BR> <INPUT type="radio" name="c3" >A.&lt;p&gt;标记align<BR> <INPUT type="radio" name="c3" >B.&lt;DIV&gt;标记align<BR> <INPUT type="radio" name="c3" >C.&lt;H&gt;标记align<BR> <INPUT type="radio" name="c3" >D.&lt;IMG&gt;标记align属性 <BR> </TD> <TD width=301 height=70><BR> <FONT color="#ff0000">正确答案：</FONT> <INPUT type="text" name="cc3" size=4 style="color:#00000; border-style:solid; border-width:0"> </TD> </TR> <TR> <TD width=359 height=71> 4.设置主页图象左右环绕文本使用<BR> <INPUT type="radio" name="c4">A.&lt;IMG&gt;标记src属性<BR> <INPUT type="radio" name="c4">B.&lt;IMG&gt;标记align属性 <BR> <INPUT type="radio" name="c4">C.&lt;IMG&gt;标记alt属性 <BR> <INPUT type="radio" name="c4">D.&lt;IMG&gt;标记border属性 <BR> </TD> <TD width=301 height=70><BR> <FONT color="#ff0000">正确答案：</FONT> <INPUT type="text" name="cc4" size=4 style="color:#00000; border-style:solid; border-width:0"> </TD> </TR> <TR> <TD width=359 height=70> 5.解除主页图象左右环绕文本使用<BR> <INPUT type="radio" name="c5">A.&lt;P&gt;<BR> <INPUT type="radio" name="c5">B.&lt;BR&gt;<BR> <INPUT type="radio" name="c5">C.&lt;BR clear&gt;<BR> <INPUT type="radio" name="c5">D.&lt;HR&gt;<BR>    徐 州 工 程 学 院 教 案 纸 </TD> <TD width=301 height=70><BR> <FONT color="#ff0000">正确答案：</FONT> <INPUT type="text" name="cc5" size=4 style="color:#00000; border-style:solid; border-width:0"> </TD> </TR> <TR> <TD width=660 height=56 colspan=2> <INPUT onClick="test(this.form)" value="评分" type="button"> <INPUT type="text" name="result" size=20> </FORM> </TD> </TR> </TABLE> </CENTER> </DIV> </FORM> <CENTER> <A href="k3000.html#h00"><FONT color="yellow">返回</FONT></A> </CENTER> </BODY> </HTML> 上机练习题 P151 1. 2. 3. 4.    徐 州 工 程 学 院 教 案 纸 第5章 Dreamweaver MX [学习要点] 1. Dreamweaver MX基本操作 2. 创建并管理网站 3. 页面布局 4. 样式 创建动态效果 制作网页的例子 Macromedia Dreamweaver MX是一款专业的HTML编辑器，用于Web站点、Web页和Web应用程序的设计、编码和开发。无论是愿意享受手工编写HTML代码时的驾驭感，还是偏爱在可视化编辑环境中工作，Dreamweaver都提供了有用的工具，使之拥有更加完美的Web创作体验。 利用Dremweaver MX的可视化编辑功能。可以快速创建页面而无须编写任何代码；可以查看所有站点元素或资源，并将它们从易于使用的面板直接拖到文档中；可以在Macromedia Firworks中创建和编辑图像，然后将他们直接导入Dreamweaver，或者直接接在Dreamweaver中添加Macromedia Flash对象，从而优化了开发工作流程。 Dreamweaver MX包括多种与编码相关的工具和功能，其中包括代码视图中的代码编辑工具（如代码加色和标签完成），有关HTML， CSS， JavaScript, CFML, ASP和JSP的参考资料，以及一个JavaScript调试器。Macromedia MX的可自由导入导出HTML技术，可以导入用户手工编码的HTML 文档，而不用重新设置代码的格式，也可以随后用自选的格式设置样式来重新设置代码的格式。 Dreamweaver MX包含并扩展了Macromedia UltraDev中的所有功能，以帮助用户使用ASP，ASP. NET，ColdFusion标记语言（CFML），JSP和PHP等服务器语言生成由动态数据库支持的Web应用程序。 Dreamweaver MX可以完全自定义，以便创建自己的对象和命令，修改键盘快捷方式，甚至编写JavaScript代码，用新的行为、属性检查器和站点报告来扩展Dreamweaver的功能。    徐 州 工 程 学 院 教 案 纸 5.1 Dreamweaver MX基本操作 在使用Dreamweaver MX制作网页之前，需要现在系统中安装Dreamweaver MX。本章主要介绍Dreamweaver MX的安装步骤和启动方法。 5．1．1 安装和启动 在使用Dreamweaver MX制作网页之前，需要先在系统中安装Dreamweaver Mx。本章主要介绍Dreamweaver Mx的安装步骤和启动方法。 1．Dreamweaver Mx的安装 Dreamweaver Mx的安装过程如下。P158 1）——9） 2．Dreamweaver MX的启动和操作界面 启动Dreamweaver MX的具体步骤如下。P160 1）——4） 5．1．2 操作界面 Dreamweaver MX的操作窗口主要由标题栏、菜单栏、常用工具栏、文档编辑区、状态栏、属性设置面板和多个浮动面板组成。 1．标题栏 2．菜单栏 3．工具栏 4．[插入]面板 5．属性设置面板 6．其他面板 5．1．3 创建网页 1．创建网页 2．设置页面属性 5．1．4 文本格式设置 文字是一个网页最基本的要素。在设计网页时，可以采用不同的设计风格和排版方式，将文字排列在网页上，为用户提供丰富的信息。文本的布局和编排方法对网页的设计风格有很大的影响。 选取一段文字，此时的[属性]设置面板显示如图5-28所示。 1．常见属性 2．属性面板中的其他按钮    徐 州 工 程 学 院 教 案 纸 5.2 创建并管理网站 站点是一种组织和管理所有与Web站点关联的文档的方法。在Dreamweaver MX中，站点这个术语可以指Web站点，也可以指属于Web站点的文档的本地存储位置。通过在站点中组织文件，可以与FTP一起使用Dreamweaver MX将站点上传到Web服务器，自动跟踪和维护链接，管理文件，以及共享文件。除非定义站点，否则不能充分利用Dreamweaver MX的功能。 5．2．1 创建本地站点 当开始考虑创建Web站点时，为了确保站点成功，应该按照一系列的规划步骤进行。 1. 规划站点 2．构建站点的基本结构 3．定义站点 在开始使用Dreamweaver Mx开发网页时，应该先创建一个站点，用于管理站点内的网页及声音、图像、动画等文件。 定义站点的步骤如下。 P171 1）——7）。 5．2．2 站点的基本操作 在Dreamweaver Mx中建立站点后，可以对本站点进行打开、编辑、删除和复制等操作。 打开本地站点 修改站点 删除站点 复制站点 5．2．3 创建远程站点 定义本地站点后，用户也可以在Dreamweaver Mx中创建远程站点。远程站点是用户为Web应用程序在Web服务器上创建的站点。如果用户创建本地站点的计算机是Web服务器，则不需要创建远程站点。 创建远程站点 创建远程站点的操作步骤如下。 P173 1）——4） 连接远程站点 连接远程站点的操作步骤如下。 P174 从远程站点断开 从远程站点断开的操作步骤如下。 P174    徐 州 工 程 学 院 教 案 纸 5.3 页面布局 在设计网页时，必须对页面元素进行定位，使页面布局整齐、美观。 5．3．1 图片和多媒体对象 在网页中插入图像可以让网页更加生动美观。目前，在Dremweaver MX中支持3种格式的图像文件，即GIF，JPEG和PNG。由于这3种格式的图像文件所需的存储容量教小，在算法上各有优点，因此在网络上得到了广泛的应用。 GIF (Graphics Interchage Format)格式，又称图形交换格式，是由Compu Serve创建的一种图像格式。它能以任意尺寸支持图画，通过压缩可以节省存储空间，还能将多幅图画保存在一个文件中。它支持256色，最大图像像素为64000*64000。 JPEG是由Joint Photogrphic Experts Group（联合图像专家组规范）制定的图像压缩格式，支持极高的压缩率。JPEG格式文件一般小于GIF格式文件。JPEG格式通过精确地记录每个像素的光亮，同时平均它们的色调，将人眼无法分辨的细节删除，以节省储存空间，而对图像的质量影响不大，因此，可以用相对较小的磁盘空间得到较好的图像质量。可以选择用不同的压缩比例对JPEG文件进行压缩，即压缩率和图像质量都是可选的。 PNG是一种新颖的网络图像格式，目前还不够完善。但PNG是一种无损压缩，虽然压缩率不及JPEG格式高，但PNG图像可以百分之百精确还原，而且色深可在256色到32位色自由跳转，所以很适用于网络中高精度要求的图像的发布和传送。 在网页中插入图像 在网页中插入图像的操作步骤如下。 P174 1）——4） 设置背景图片 制作网页背景图片的操作步骤如下。 P175 1）——2） 清除背景图片 设置图像 P176 1）——2） 图像的翻转 翻转指的是当鼠标移动到一幅图像上时，会变成另一幅图片，即翻转。翻转的方法如下。 P177 1）——4） 5．3．2 表格 对于网页来说，表格是很好的排版工具，它不但能使网页中的元素有序的排列，使得条理清晰，而且它更被Dreamweaver Mx用于网页的排版，使网页元素的定位更加精确。    徐 州 工 程 学 院 教 案 纸 1．创建表格 在网页中创建表格的操作方法如下。 （1）通过[插入]面板创建表格 （2）通过菜单栏创建表格 2．设置表格属性 3．表格操作 4．单元格属性 5．3．3 框架 1. 何谓框架 框架就是将一个浏览器窗口分成多个小窗口，而每个小窗口中可以显示不同的网页，这些网页是相互独立的、互相不依赖的网页。但可以通过代码，从一个框架中对另一个框架中的内容进行控制。使用框架的最常见的情况是，一个框架显示包含导航控件的文档，而另一个框架显示含有内容的文档。 一个窗口中包含的所有框架称为框架集。一个框架网页由一个描述框架集的网页文件和多个被包含在不同框架中的独立网页组成。 2．框架的创建 创建框架可以使用从[插入]面板、从[框架]子菜单、在框架中嵌入框架和手动创建框架4种方法。 （1）从[插入]面板创建 （2）从[框架]子菜单创建 （3）在框架中嵌入框架 （4）手动创建框架 3．删除框架 将要删除的框架的边框拖至其他的框架边框，松开鼠标即可删除一个框架。 4．保存框架 5．框架的选取 6．框架的属性设置 7．框架集的属性设置 8．改变框架大小及背景色 （1）改变框架大小 （2）改变框架背景色    徐 州 工 程 学 院 教 案 纸 5．3．4 表单 何谓表单 表单是服务器与客户机之间进行信息交换的容器。客户机将要提交给服务器的信息放在表单中传递给服务器，服务器在收到表单后由专门的事先编制好的处理程序来处理表单，从而实现客户机与服务器的交互。 在网页中插入表单 在网页表单的方法有如下3种。 P185 1）——3） 表单的属性 选中表单，[属性]面版就会自动变成表单[属性]面板，P186如图5-59所示。表单[属性]面板中各选项的功能如下。P185-186 表单对象 表单是由表单对象组成的，每一种表单对象都有其特有的功能。表单对象包括按钮、文本框、复选钮、单选钮、图像域、隐藏区域等。 选择[插入]([表单对象]命令，弹出子菜单中各命令项的含义如下。 （1）[文本域]命令 （2）[按钮]命令 （3）[复选钮]命令 （4）[单选钮]命令 （5）[列表/菜单]命令 （6）[文件域]命令 （7）[图像域]命令 （8）[隐藏区域]命令 （9）[跳转菜单]命令