HTML和中文DreamweaverMX2004实用教程

HTML和中文DreamweaverMX2004

实用教程第1章HTML语言

本章要点1.1Internet简介1.2“卡通青蛙”网页1.3“我的收藏”网页1.4再做“我的收藏”网页1.5“俏皮歇后语”网页1.6“动画放映室”网页1.7“HTML技术演示”网页1.8“中国的世界文化遗产”网页1.9“Flash技术说明”网页1.10“公告板”网页1.11“水中人”网页1.12“俄罗斯方块游戏”网页习题11.1Internet简介

1.1.1什么是Internet1．计算机网络计算机网络是将地理位置不同并具有独立工作能力的多个计算机系统通过通信线路互连在一起，由网络软件实现网络资源共享和相互通信的整个信息系统。物理上，计算机网络主要是由计算机、路由器、集线器、调制解调器、网卡、中继器、收发器以及交换机等网络硬件设备组成，所有这些设备统称为网络单元。计算机网络按照覆盖的地域大小，可分为局域网（即LAN，范围不超过10km）和广域网（即WAN，一般指10km以上范围）。任何计算机网络，无论是局域网、城域网、广域网还是因特网都可以划分为两个部分：一部分是负责信息收集和处理的资源子网，另一部分是负责信息传输的通信子网。

1.1Internet简介

2．InternetInternet一词来源于英文Interconnectnetworks，即“互连各个网络”，简称“互联网”，中文译名为“因特网”。Internet是专指全球范围内最大的、由众多网络相互连接而成的、基于TCP/IP的计算机网络。Internet是当今世界最大的计算机互连网络系统，由全球100多个国家和地区无数的不同功能的计算机、通信骨干网和各种计算机网络通过线路连接在一起的一个世界范围的网络。在Internet中，资源是存放在服务器上的，Internet上的服务器昼夜不停地工作，分别存储着各种各样的信息，提供多种服务功能，用户通过客户机（个人计算机）访问服务器，从而获取资源。Internet服务器的资源主要有：超级计算中心、图书文献中心、技术资料中心、公共软件库、科学数据库、地址目录库以及信息库等。Internet服务器的主要信息服务有：万维网服务（WWW）、电子邮件服务（E-mail）、远程登录服务（Telnet）、文件传输服务（FTP）、网络新闻服务（USENET）、电子公告板服务（BBS），还有网上购物、网上会议、网上聊天、网上炒股、网上交友、网上书店、网上报刊、网上广播、网上画廊、网上电影和网上音乐等。各服务器之间通过网络协议相互连接，配合工作，资源共享。当用户与其中一台服务器建立连接后，便可以以链接的方式访问整个网络，服务程序可以根据用户的需要，自动地从一台服务器转移到另一台服务器。一旦进入了Internet，无论所需要的信息是在哪一个国家或地区的服务器上，只要是合法的登录者，就可以漫游Internet，享用所需要的信息和资源。Internet是当今世界上最大的资源子网。Internet正在向着全球信息高速公路的方向快速、健康地发展。

1.1Internet简介

3．Internet的发展1969年，美国国防部高级研究计划署（AdvancedResearchProjectAgency，ARPA）拨款支持建立了军用实验网络ARPANET。它是世界上第一个计算机网络，也是Internet的前身，初期只有4台主机。当时，美国国防部研究并建立ARPANET的主要目的是寻求一种将不同种类的计算机互连成网络的方法，同时能使该网络的一部分遭破坏时不影响网络其他部分的正常运行。以后，ARPANET的应用由军事领域延伸到教育领域，科学家们开始使用ARPANET交换信息，共享研究成果。1983年，TCP/IP（即传输控制协议和网际间协议）的建立，使计算机通信有了统一的标准，这是计算机网络发展史上的一个里程碑，网络从此进入高速发展的时代。1986年，美国国家科学基金会（NationalScienceFoundation，NSF）开始将美国各地的研究人员及分属各大学和研究机构的计算中心连接到了分布在不同地区的5个超级计算中心。至此，越来越多的高等院校、科研机构、图书馆、实验室、政府部门、商业集团、医院和个人所使用的NSFNET逐渐取代了早期源于军事目的的ARPANET。终于，在1990年7月，ARPANET完全被NSFNET取代。到目前为止，连接在网络上的主机已经达到了数百万台。一般认为，正是NSFNET才使Internet迅速推广到全球范围。

1.1Internet简介1994年5月，中国作为第71个国家级网加入Internet，“中国国家计算机网络设施”（TheNationalComputingandNetworkFacilityofChina，NCFC，国内也称中关村网）与Internet连通。我国从1994年中国科技网与Internet连通后，共有4大互联网通过6大国际出口与Internet相连。这4大互联网分别是：中国科技网（CSTNET）、中国教育和科研计算机网（CERNET）、中国公用计算机互联网（ChinaNET）和国家公用经济信息网（即金桥网（ChinaGBN）），其中，前两个网络是非盈利性的，以为教育、科研和政府部门服务为宗旨，原则上不对外接纳个人和商业用户，后两个网络是面向全国提供商业服务的网络。目前，我国Internet商业市场十分活跃，除去上述4家外，一些商业公司也开始纷纷投入这一市场，形成若干商业ISP（InternetServiceProvider，Internet服务提供商）。他们的基本作法大多是：自己建立一个网络服务中心，通过专线从上述几个网络的国际出口与Internet相连，提供服务的业务主要有用户接入服务（拨号上网和专线上网）、培训服务、服务器托管、代理域名注册、出租硬盘空间、收发电子邮件、网上教学、金融证券以及电子商务等。随着计算机和通信技术的发展，计算机网络由过去的军事与教育专用网络发展成为无所不包、无所不能的国际互联网络（Internet）。Internet已经成为我们生活与工作中不可缺少的一部分，它正以人们难以想象的速度迅猛发展。

1.1Internet简介1.1.2TCP/IPInternet没有形成之前，各个地方已经建立了很多小型的局域网，Internet是将全球各地的局域网连接起来而形成的一个“网之间的网”（即网际网）。然而，在连接之前的各式各样的局域网却存在不同的网络结构和数据传输规则，将这些小网连接起来后，各网之间要通过什么样的规则来传输数据呢？这就像世界上有很多个国家，各个国家的人说各自的语言，只有将各种语言翻译成一种通用的语言后才可以交流。TCP/IP正是Internet上的一种公用语言的规范约定。TCP/IP是TransmissionControlProtocol/InternetProtocol的缩写，中文译名为传输控制协议/互联网络协议，是Internet最基本的协议，是由底层的IP和TCP组成的。TCP/IP的开发工作始于上世纪70年代，是用于互联网的第一套协议。1．IPIP是因特网中的基础协议，它非常详细地定义了计算机通信应该遵循的规则，准确地定义了分组的组成和路由器如何将一个分组传递到目的地。连到Internet上的计算机需要IP软件才能在互联网上通信。由IP控制传输的协议单元被称为IP数据报。IP数据报中含有发/收方的IP地址。IP提供不可靠的、尽力的及无连接的数据报投递服务，构成了因特网数据传输的基础。IP是最基本的软件，Internet上的所有通信只有使用IP才能进行分组交换。所以，Internet上的每台计算机都要安装一套供所有应用共享的IP软件的拷贝。在高级的计算机上，内存中随时保留IP的一个拷贝，时刻准备发送或接收分组。

1.1Internet简介

1.1.3万维网、网页和网站1．什么是万维网万维网也叫WWW，是WorldWideWeb（全球信息网）的缩写。万维网是欧洲粒子物理研究所（CERN）的科学家TimBerners-Lee发明的。他提出了超文本（Hypertext）的结构体系，该体系是由相互关联的文件组成的一种高级的基于超文本的浏览和搜索方式，目的是让大家在不同地方用一种简捷的方式共享信息资源。万维网提供了非常丰富的信息，各种信息按不同的类型以网页文件的形式分别存放在万维网服务器上，供人们选择查阅。万维网使得浏览Internet的信息变得非常简单，它已成为Internet用户使用最广泛的网络服务系统。万维网制定了一套标准、又容易掌握的超文本HTML语言、统一的资源定位符URL和超文本传输协议（hypertexttransportprotocol，HTTP）。超文本传输协议是在浏览器与Web服务器间建立连接的协议标准。超文本由若干互连的超媒体文件组成，它实质是通过超链接把一些具有超媒体特性的信息链接起来的一种新型的信息管理技术。超媒体不但包括了文本内容，还包括图像、动画、声音和视频等。超链接就是通过超文本中的链接点（也叫“参考点”或“热点”）建立与其他超媒体文件的链接，用鼠标单击参考点即可调出与之相链接的其他超媒体文件（如网页）。浏览WWW必须通过浏览器来完成。浏览器是用来访问Internet的基于超文本技术使用最广泛的网络软件，它可以提供包括WWW的浏览、搜索、网络资讯的打印和收发E-mail的功能。在浏览器中，比较有代表性的是IE（InternetExplorer）、Netscape和Opera等。

1.1Internet简介

2．网页和网站组成WWW的基本元素是网页，网页也被称为页面或Web页。不同的网页通过超链接联系在一起，构成了WWW的纵横交织结构。WWW是由无数的Web服务器构成的，可以通过浏览器访问这些服务器上的网页。通常把一系列逻辑上可以视为一个整体的页面叫作网站，或者说，网站就是一个相互链接的网页集合，它们可以共享。网站的概念是相对的，大网站（如“雅虎网”和“新浪网”）页面多得无法计数，而且位于多台服务器上；小网站可以是一些个人网站，可能只有几个网页，仅在一台服务器上占据很小的空间。网页与网页之间的关系并不是完全相同的。主页是网站中的一个特殊网页，它是在WWW上进入网站的第一个网页，其中包含指向其他网页的超链接。通常主页的名称是固定的，例如，index.htm或index.html等（.htm或.html扩展名表示是HTML文档）。

1.1Internet简介

1.1.4Internet地址Internet采用一种惟一通用的地址格式，为Internet中的每一个网络和几乎每一台主机都分配了一个地址，就像一个实实在在的整体。Internet中地址类型有IP地址和域名地址两种。1．IP地址连接在Internet上的每台计算机都有一个惟一的地址，发送方计算机在通信之前必须知道接收方计算机的地址，这和我们日常邮寄普通信件是一样的道理，只是Internet上使用的地址称为Internet地址，简称IP地址。IP地址是4个以小数点隔开的十进制整数，每个整数的范围是0～255。Internet上的每一台计算机和路由器都有一个由相关的管理机构指定的IP地址。计算机用4个字节的二进制单位（32位）存储IP地址，每个整数对应一个字节。例如，有一台计算机的IP地址为：，而另一台计算机的IP地址为:0。IP地址分为5类。A类（AClass）：～55适用于大型网络。B类（BClass）：～55适用于中型网络。C类（CClass）：～55适用于小型网络。D类和E类：保留作特殊用途。

1.1Internet简介2．计算机域名由于IP地址是数字型的，不方便记忆，也难以理解，所以Internet采用了另一套字符（可以有英文字母、数字和汉字等）的地址方案，即域名地址。域名地址用具有一定意义的字符串来标识主机地址，IP与域名地址两者相互对应，而且保持全网统一。在网络中，一台主机的IP地址是惟一的，而每台主机只能有一个IP地址，但它的域名数却可以有多个。域名系统（DomainNameSystem，DNS）负责将Internet上每台主机的英文名字转换成IP地址的系统。用户可以只输入要查找的主机的域名，DNS系统把它转换成IP地址后，计算机才能够根据IP地址进行查找。当然并不是每台在Internet上的主机都有域名，例如，拨号上网的用户每次连接Internet时，只需要一个“动态”的IP地址，不需要域名。也就是说，Internet上的每台主机都有一个IP地址，但不一定有域名。一台计算机的域名由若干代表不同层次的子域名组成，各个子域名之间用小数点分开。其中最左边的子域名通常代表主机，中间各子域名代表相应的层次，最右边的子域名是标准化的最高级子域名，主要表示主机所属的国家、地区或网络性质的代码。例如，中国是cn，英国是uk、商业组织是com、教育机构是edu、政府部门是gov、军事部门是mil、网络信息和运营中心是net、非商业组织是org以及国际组织是int等。二级域名（右起第二个子域名）有：教育（edu）、电信网（net）、科研网（ca）、团体（or）、政府（go）、商业（co）以及军队（mi）等。各省则采用其拼音宿写，如bj代表北京、sh代表上海、ah则代表安徽。

1.1Internet简介例如，域名对应一个IP地址，其中youdian是该机构的名字，edu表示教育机构，cn表示中国。例如，域名对应一个IP地址，其中xyz是主机名，netbook是该机构名，com表示商业组织，cn表示中国。另外，还要注意域名只能以字母或数字开头，以字母或数字结尾，中间可以用字母、字符、数字、连字符或下划线。域名不区分大小写，整个长度不得超过255个字符。由于Internet源自美国，所以美国主机其第一级域名一般直接说明其主机性质，而不是国家代码。如果用户看到某主机的第一级域名为com、edu或gov等，一般可以判断这台主机置于美国，因为其他国家或地区第一级域名一般是其国家或地区的代码。

1.2“卡通青蛙”网页

“卡通青蛙”网页在浏览器中的显示效果如图1-2-1所示。网页中的青蛙除了大小不同以外，在图片的周围还增加了粗细不同的边框。

图1-2-1“卡通青蛙”网页1.2“卡通青蛙”网页

1.2.1HTML语言和输入HTML语言1．HTML语言简介HTML的英文全称为Hypertextmakeuplanguage，直译为超文本标记语言。HTML语言不是一种程序语言，而是一种描述文档结构的标记语言，它与操作系统平台的选择无关，只要有浏览器就可以运行HTML文档，显示网页内容。HTML语言使用了一些约定的标记，对WWW上的各种信息进行标记，浏览器会自动根据这些标记，在屏幕上显示出相应的内容，而标记符号不会在屏幕上显示出来。自从1990年首次将HTML语言用于网页制作后，几乎所有的网页都是由HTML语言或以其他语言镶嵌在HTML语言中的语言（如JavaScript语言等）编写的。目前，较流行的浏览器有Netscape公司的NetscapeNavigator和Microsoft公司的InternetExplorer（即IE）。要注意，不同的浏览器对同一个HTML文件的解释可能会不太一样。使用HTML语言编写HTML语言程序（即制作网页文件）是学习制作网页的基础。虽然目前有许多“所见即所得”且操作较方便的网页制作工具，不需要直接用HTML语言编写HTML语言程序，但是在很多时候，了解一些HTML语言知识，将有利于学习网页制作工具、学习编辑修改网页的知识和提高网页制作水平。

1.2“卡通青蛙”网页

2．输入HTML语言编写HTML文档可以在Windows记事本内输入。在存盘输入文件名时，一定要输入HTML文档的扩展名：.htm或.html。要注意：HTML文档中的各种英文标记要在英文输入方式下输入。为了便于管理，可在磁盘目录下建立一个名为“我的网站”的文件夹用来存储HTML文档。再在该文件夹下建立一个名为“image”的文件夹用来存储网页中的图像文件。

1.2“卡通青蛙”网页

1.2.2调整图像大小和边框的HTML标记1．在网页中插入图像的HTML标记在网页中插入图像时使用的标记是<IMG>，用来加载GIF图像与动画，“SRC”属性用来输入图像的路径。在网页中加载GIF动画的方法与加载GIF图像的方法一样。GIF动画文件的扩展名也是.gif，文件格式是GIF89A格式。2．调整图像大小的HTML标记使用<IMG>标记中的HEIGHT和WIDTH属性可以调整图像的大小。HEIGHT（决定图像的高）和WIDTH（决定图像的宽）的取值单位为像素。3．给图像加边框的HTML标记使用<IMG>标记中的BORDER属性可以给图像加边框。BORDER的取值单位为像素，当它的取值为0或者不加BORDER属性时，则没有边框。

1.3“我的收藏”网页

“我的收藏”网页的显示效果如图1-3-1所示。在网页中，列出了最喜爱的3辆汽车的图像，在图片的旁边，还有一句简短的介绍。通过图1-3-1可以看出，每一幅图像旁的文字位置有所不同。

图1-3-1“我的收藏”网页1.3“我的收藏”网页

1.3.1浏览和修改网页1．浏览网页双击HTML文档图标，调出浏览器窗口，同时打开该网页。另外，还可以采用如下方法。图1-3-2“打开”对话框（1）双击浏览器图标，调出浏览器窗口。然后执行浏览器窗口内的“文件”→“打开”菜单命令，调出“打开”对话框，如图1-3-2所示（“打开”文本框内还没有内容）。

图1-3-2“打开”对话框1.3“我的收藏”网页

（2）单击“打开”对话框中的“浏览”按钮，调出“MicrosoftInternetExplorer”对话框，选择HTML文件，单击“打开”按钮，回到“打开”对话框，在其“打开”下拉列表框内已有选中的文件目录与名字，如图1-3-2所示。（3）单击“打开”对话框中的“确定”按钮，即可在浏览器中打开选择的网页。2．修改网页执行“MicrosoftInternetExplorer”浏览器窗口中的“查看”→“源文件”菜单命令，调出Windows记事本窗口，并在该窗口中显示出该网页的代码，此时即可修改网页代码。

1.3“我的收藏”网页

1.3.2调整图像和文本的相对位置在网页中，经常需要将图像和文本放在一起进行显示。使用<IMG>标记的ALIGN属性可以调整图像与文本的相对位置。使用<IMG>标记中的VSPACE和HSPACE属性可以调整图像与文本间的距离。VSPACE（图像与文本的垂直间距）和HSPACE（图像与文本的水平间距）的单位均为像素。<IMG>标记中的ALIGN属性用于调整图像与文字的对齐方式，主要含义如下。（1）ALIGN项缺省时：图像的底部与其他文本或图像的底部对齐。（2）ALIGN=top：图像的顶部与其他文本或图像的顶部对齐。（3）ALIGN=middle：图像的中部与其他文本或图像的中部对齐。（4）ALIGN=bottom：图像的底部与其他文本或图像的底部对齐。（5）ALIGN=left：图像位于屏幕左边，与文本或图像的左边对齐。（6）ALIGN=right：图像位于屏幕右边，与文本或图像的右边对齐。

1.4再做“我的收藏”网页

再做“我的收藏”网页后，当鼠标移到图像上时，会显示出一段浮动的文字说明。当关闭浏览器中的载入图像命令时，说明文字可以替代图像。在“我的收藏”网页中除了为图像添加了说明文字外，还为网页添加了背景图像。网页的部分显示效果如图1-4-1所示。

图1-4-1“我的收藏”网页（部分）的显示效果1.4再做“我的收藏”网页

1.4.1文件的路径名和URL1．文件的路径名（1）绝对路径：绝对路径是写出全部路径，系统按照全部路径进行文件的查找。绝对路径中的盘符后用“：\”或“：/”，各个目录名之间以及目录名与文件名之间，应用“\”或“/”分隔开。绝对路径名的写法及其含义如表1-4-1所示。（2）相对路径：相对路径是以当前文件所在路径或子目录为起始目录，进行相对的文件查找。在网页制作的过程中通常都采用相对路径，这样可以保证文件移动后，不会产生断链现象。相对路径名的写法及其含义如表1-4-2所示。

1.4再做“我的收藏”网页

2．URLURL（UniformResourceLocator）即统一资源定位符，WWW上的地址编码，指出了文件在Internet中的位置。它存在的目的在于统一WWW上的地址编码，给每个网页指定地址，这样就不会出现重复或由于编码不统一而出现无法浏览等问题。当用户查询信息资源时，只要给出URL地址，WWW服务器就可以根据它找到网络资源的位置，并将它传送给用户的计算机。通常，当用户用鼠标单击网页中的链接点时，即可将URL地址的请求传送给了WWW服务器。一个完整的URL地址通常由通信协议名、Web服务器地址、文件在服务器中的路径和文件名4部分组成。例如，/intl/cn/file1.html。其中，“http://”是通信协议名，“”是Web服务器地址，“/intl/cn/”是文件在服务器中的路径，“file1.html”是文件名。URL地址中的路径只能是绝对路径。

1.4再做“我的收藏”网页

1.4.2平铺背景图像和为图像添加文字说明的HTML标记1．设置平铺背景图像的HTML标记使用<BODY>标记中的BACKGROUND属性，可设置网页的平铺的图像，其格式如下：<BODYBACKGROUND="图像文件名或URL">图像的路径可以是绝对路径，也可以是相对路径。2．为图像添加文字说明的HTML标记使用<IMG>标记中的ALT属性可以为图像添加文字说明，其格式如下：<IMGATL=“要添加的文字说明内容”>。

1.5“俏皮歇后语”网页

歇后语是一种隐去后文，以前文表示意思的幽默语言。如以“泥菩萨过河”暗示“自身难保”、以“围棋盘里下象棋”表示“不对路数”等。源远流长的中国文化孕育了这种特殊的语言结构，是广大人民群众喜闻乐见的语言形式。在“俏皮歇后语”网页中显示了一些比较有意思的歇后语，但是在网页中只显示了前文，当鼠标移到前文上时，才可以显示该歇后语的后文，“俏皮歇后语”网页效果如图1-5-1所示。

1.5“俏皮歇后语”网页

图1-5-1“俏皮歇后语”网页的显示效果1.5“俏皮歇后语”网页

1.5.1网页中的基本结构标记1．网页基本结构标记（1）<HTML>……</HTML>：是HTML文档中最基本的标记，不可缺少。<HTML>表示HTML文档的开始，</HTML>表示HTML文档的结束。（2）<HEAD>……</HEAD>：是网页标题标记，可以提高网页文档的可读性，向浏览器提供一个信息。它可以忽略，但一般不予忽略。（3）<TITLE>……</TITLE>：是网页名称标记，是<HEAD>……</HEAD>标记内不可缺少的标记，有<HEAD>……</HEAD>标记就一定要有<TITLE>……</TITLE>标记。（4）<BODY>……</BODY>：是网页主题内容标记，其内包含了网页的全部内容，一般不可缺少。（5）<BODYBGCOLOR=#RRGGBB>：使用<BODY>标记中的BCOLOR属性，可以设置网页的背景颜色。使用的格式有以下两种：<BODYBGCOLOR=RRGGBB><BODYBGCOLOR="颜色的英文名称">

1.5“俏皮歇后语”网页

第一种格式中，RR、GG、BB可以分别取值为00～FF的十六进制数。RR用于表示颜色中的红色成分占多少，数值越大，颜色越深；GG用来表示颜色中的绿色成分占多少；BB用来表示颜色中的蓝色成分占多少。红、绿、蓝三色按一定比例混合，可以得到各种颜色。例如，RR=FF，GG=FF，BB=00，表示为黄色。如果RRGGBB取值为000000，则为黑色；RRGGBB取值为FFFFFF，则为白色；RRGGBB取值为FF8888，则为浅红色。第二种格式是直接使用颜色的英文名称来设定网页的背景颜色。例如，<BODYBGCOLOR=blue>：用来设置网页的背景颜色为蓝色。<BODYBGCOLOR=red>：用来设置网页的背景颜色为红色。<BODYBGCOLOR=white>：用来设置网页的背景颜色为白色。（6）<BR>：是换行标记，表示以后的内容移到下一行，并且是单向标记，没有</BR>。（7）<PRE>……</PRE>：是保留文本原来格式的标记。它的作用是将其中的文本内容按照原来的格式显示，否则浏览器会自动取消文本中的空格。（8）<B>……</B>：是粗体标记，可使其中的文字变为粗体。（9）<OL>……</OL>与<LI>：<OL>……</OL>：是有序列表标记，其内用<LI>标记引导文字，显示网页中的这些文字后，文字前会自动加上“1”、“2”……序号。（10）<UL>……</UL>与<LI>：<UL>……</UL>：是无序列表标记，其内用<LI>标记引导文字，显示网页中的这些文字后，文字前会自动加上“○”。

1.5“俏皮歇后语”网页

2．其他常用标记（1）<H1>……</H1>：是正文的第三级标题标记。此外，还有第一、二、三、四、五、六级标题标记，分别为<H1>……</H1>、<H2>……</H2>、<H3>……</H3>、<H4>……</H4>、<H5>……</H5>和<H6>……</H6>。级别越高，文字越小。（2）<P>……</P>：是段落标记，其作用是将其内的文字另起一段显示。段与段之间有一个空行。1.5.2网页中的文本标记文本属于网页中的基本元素，在前面的基本结构标记中已经介绍了部分文本标记。下面介绍一些网页中不经常使用的文本标记，合理使用这些标记可以使网页的显示效果更加出色。1．边框包围的文字可以通过<FIELDSET>标记定义文字的边框。输入下面的THML代码，可以显示出如图1-5-2所示增加边框的文字的显示效果。

1.5“俏皮歇后语”网页

<html><HEAD><TITLE>图像的大小和边框</TITLE></HEAD><fieldset><font>增加了边框的文字</font></fieldset><body></body></html>2．文字的物理字符标记符样式物理字符标记符样式是指标记本身就说明了修饰文字的效果的标记符。常用的物理字符标记符样式有黑体标记<B>、斜体标记<I>及下划线标记<U>等，常用物理字符标记样式如表1-5-1所示。

1.5“俏皮歇后语”网页

图1-5-2增加边框的文字的显示效果1.5“俏皮歇后语”网页

2．文字的物理字符标记符样式物理字符标记符样式是指标记本身就说明了修饰文字的效果的标记符。常用的物理字符标记符样式有黑体标记<B>、斜体标记<I>及下划线标记<U>等，常用物理字符标记样式如表1-5-1所示。

3．逻辑字符样式逻辑字符样式是指标记符本身表示了所修饰效果的逻辑含义的标记符例如，ADDRESS标记符本身的逻辑含义为“地址”，但并没有说明具体的物体效果。常用的逻辑字符样式如表1-5-2所示。使用这些逻辑字符样式时，只要将需要设置格式的字符括在标记符之间即可。

1.6“动画放映室”网页

现在，比较新颖的网站中经常会使用Flash动画，最主要的原因是Flash动画可以实现复杂的动画效果，而且保持很小的文件体积，这非常有利于在网络上传输。在“动画放映室”网页中插入了Flash动画，显示效果如图1-6-1所示。在播放动画的同时，网页中也在播放音乐。在网页中插入音乐后可以使网页的多媒体效果更加出色。图1-6-1“动画放映室”网页的显示效果如果要想在浏览器中显示Flash动画，前提是计算机中已经安装了播放Flash的插件，如果没有安装该插件，可以在/flash/网站中下载。

1.6“动画放映室”网页

图1-6-1“动画放映室”网页的显示效果1.6“动画放映室”网页

1.6.1添加背景音乐和插入Flash动画的HTML语言1．添加背景音乐使用<BGSOUND>标记可以在网页中插入背景音乐。<BGSOUND>标记可以放在<HTML>与</HTML>标记内的任何地方。引导音乐文件的属性是SRC，其格式如下：<BGSOUNDSRC="文件目录与文件名或URL">2．在网页中插入Flash动画使用<EMBED>标记可以在网页中插入Flash对象。同添加背景音乐的方法一样，<EMBED>标记可以放在<HTML>与</HTML>标记内的任何地方。引导Flash动画文件的属性是SRC，格式如下：<EMBEDSRC="文件目录与文件名或URL">

1.6“动画放映室”网页

1.6.2在网页中插入多媒体文件在网页中直接包含多媒体对象最常用的两个标记是<EMBEN>标记和<OBJECT>标记。1．<EMBEN>标记使用<EMBEN>标记不仅可以在网页中插入Flash动画，还可以下载并显示由插件支持的其他多媒体应用程序。当浏览器遇到<EMBEN>标记时，会加载其中指定的文件并确定它的MIME类型。MIME信息告知浏览器正在下载的文件类型。然后浏览器查找与该MIME类型一致的插件，如果有就使用，如果没有则会显示一条错误信息，并且提示用户下载该插件。2．<OBJECT>标记该标记可以使网页中包含JavaApple、视频和音频等多媒体和其他文件。当浏览器遇到<OBJECT>标记时，会加载相应的文件并根据该标记包含属性的值来显示。

1.7“HTML技术演示”网页

“HTML技术演示”网页的显示效果如图1-7-1所示。在该网页中列出了与前面制作的各个网页的链接文字。单击其中任意一个链接文字即可调出相应的页面。

图1-7-1“HTML技术演示”网页的显示效果1.7“HTML技术演示”网页

1.7.1链接文件使用的HTML标记链接也叫超文本链接，在网页中加入超文本链接，就是通过单击一部分文字、图像或图像中的一个区域，即可调出另一个网页或本网页的另一部分内容。HTML文件的链接是通过链接标记<A>……</A>来实现的。在<A>标记中除标记名“A”外还包括一些属性，HREF是链接标记中一个最常用的属性。该属性用于指出所要链接的文件的路径（或目录）和名称或URL，其简单的结构形式为：<AHREF=“被链接的文件名或URL”>热字<A>所有写在起始标记<A>和结束标记</A>之间的文字构成一个实际的链接，当网页在浏览器内显示时，这些文字将以蓝色高亮度或带有下划线的形式出现。如果需要链接的文件都放在本机磁盘上，则这种链接称为本地链接，它不必连接网络，只要本地的机器上有一个编辑器和浏览器就足够了。如果需要链接的文件在网络上，则需要网络链接，网络链接需要知道网址（URL）。

1.7“HTML技术演示”网页

1.7.2使用图像或动画的链接使用图像或动画的链接，就是在单击图像或动画后，即可调出与之链接的网页文件或本网页中的一段内容。建立图像或动画的链接的方法是在链接标记<A>……</A>的中间加入一个<IMGSRC>标记，其格式如下：<AHREF="被链接的网页的文件名"><IMGSRC="图像或动画的文件名"></A>加入了链接的图像或动画会自动产生一个外框，以示与一般的图像或动画的区别。

1.8“中国的世界文化遗产”网页

世界自然和文化遗产是全人类的一个宝库，其中又以“文化遗产”最为珍贵。了解我们周围的文化遗产才能更好地进行保护，在“中国的世界文化遗产”网页中显示了我国部分文化遗产，如图1-8-1所示。由于网页中的内容比较多，在一个窗口内不能完全显示，所以在网页中增加了“锚点”的链接。在标题下面列出了网页中的遗产名称，单击其中任意一个热字即可链接到相应的位置。例如，单击“天坛”热字后，网页的显示效果如图1-8-2所示。

1.8“中国的世界文化遗产”网页

图1-8-1

“中国的世界文化遗产”网页的显示效果

图1-8-2

单击“天坛”热字后网页的显示效果

1.8“中国的世界文化遗产”网页

1.8.1在同一个网页文件中建立链接的HTML标记在同一个网页文件中建立链接，需要做以下工作。（1）在文件的前面需要列出链接的标题热字，它们相当于文章的目录。同时将这些热字与相应的锚名（即定位名）建立链接。所谓“锚名”是指网页中能被链接到的一个特定位置。建立链接时，要在锚名前加一个“#”符号，其格式是：<AHREF="#锚名">标题名字</A>（2）为被链接的内容命名，该名字叫“锚名”。其格式是：<ANAME="#锚名">锚名的定义应放在相应标题对应的内容前面。

1.8“中国的世界文化遗产”网页

1.8.2建立电子邮件链接如果将HREF属性值指定为“mailto:电子邮件地址”，即可获得电子邮件链接的效果。例如，使用下面的HTML代码可以设置电子邮件的超链接：<AHREF="mailto:tingdudu@163.com">作者的邮箱</A>当浏览网页的用户单击了指向电子邮件的超链接后，系统将自动启动邮件客户程序（对于安装了Windows98/2000以上操作系统的计算机，默认时启动OutlookExpress），并将指定的邮件地址填写到“收件人”栏中，用户可以编辑并发送该邮件，如图1-8-3所示。图1-8-3OutlookExpress发送电子邮件的界面如果是第一次启动OutlookExpress，会要求进行软件设置。

1.8“中国的世界文化遗产”网页

图1-8-3OutlookExpress发送电子邮件的界面1.9“Flash技术说明”网页

“Flash技术说明”网页的显示效果如图1-9-1所示。该网页被分为了3个部分，其中，网页的顶部显示了网页的标题，左边显示了一些技术名称，右边显示了一段引导用户的文字。单击页面左边列出的技术名称热字，即可在右面的页面中显示出相应的技术说明，如图1-9-2所示。

图1-9-1

“Flash技术说明”网页的显示效果

图1-9-2

单击“选取对象”热字的网页

1.9“Flash技术说明”网页

1.9.1设置框架集和修饰框架集1．设置框架框架就是把一个网页页面分成几个单独的区域（即窗口），每个区域就像一个独立的网页，可以是一个独立的HTML文件。框架可以实现在一个网页内显示多个HTML文件。对于一个有n个区域的框架网页来说，每个区域有一个HTML文件，整个框架结构也是一个HTML文件，因此该框架网页有n+1个HTML文件。设置框架需要使用标记<FRAMESET>……</FRAMESET>来取代<BODY>……</BODY>标记。<FRAMESET>标记有两个属性：ROWS="n1,n2,n3……"：纵向设置框架；COLS="n1,n2,n3……"：横向设置框架。其中，n1，n2，n3为开设的框架占整个页面的百分数。

1.9“Flash技术说明”网页

2．修饰框架修饰窗口需要使用<FRAME>标记，它在<FRAMESET>……</FRAMESET>标记之间。<FRAME>标记有6个属性，介绍如下。（1）SRC="URL"属性：用于链接一个HTML文件，如果没有该属性则窗口内无内容。（2）NAME="窗口名称"属性：用于给窗口命名。（3）MARGINWIDTH=n属性：用于控制窗口内的内容与窗口左右边缘的间距。n为像素个数，默认值为1。（4）MARGINHEIGHT=n属性：用于控制窗口内的内容与窗口上下边缘的间距。n为像素个数，默认值为1。

1.9“Flash技术说明”网页

1.9.2窗口间的链接实现窗口间的链接需要使用TARGET属性。TARGET属性可以在HTML的多个标记内使用。（1）在<A>标记中使用的格式如下：<AHREF="URL"TARGET="窗口的名字">如本实例中，左边窗口加载的HTML文件为1-9LEFT.html，右边窗口加载的HTML文件为1-9-0.html。左边窗口中有5行热字。如果单击左边窗口内的“选取对象”热字，则可以在右边窗口（名字为RIGHT）内显示出1-9-1.html文件的内容。如果单击左边窗口内的“调整图像大小”热字，则可以在右边窗口内显示出1-9-2.html文件的内容。单击下面的热字和单击前面两个热字的效果基本相同，只是调出的HTML文件不一样。

1.10“公告板”网页

“公告板”网页的显示效果如图1-10-1所示。在网页中包含一个纵向滚动的文字公告板，其中的文字不断向上滚动，当鼠标移到文字上面时，文字停止滚动，当鼠标移开时文字继续滚动。

图1-10-1“公告板”网页的显示效果1.10“公告板”网页

1.10.1什么是DHTML技术动态DHTML（DynamicHTML，DHTML）是HTML、CSS和客户端脚本的一种集成。DHTML技术在原有技术的基础上，可分为3个方面：一是HTML，也就是页面中的各种页面元素对象，它们是被动态操作的内容；二是CSS，CSS属性也是动态操作的内容，从而获得动态的格式效果；三是客户端脚本（如JavaScript），它实际操纵Web页上的HTML和CSS。使用DHTML技术，可以使网页设计者创建出能够与用户交互并包含动态内容的页面。实际上，DHTML技术使网页设计者可以动态操纵网页上的所有元素——甚至是在这些页面被装载以后的一种语言。利用DHTML技术，网页设计者可以动态地隐藏或显示内容、修改样式定义、激活元素以及为元素定义行为。DHTML技术还可以使网页设计者在网页上显示外部信息，方法是将元素捆绑到外部数据源（如文件和数据库）上。所有这些功能都可以用浏览器完成而无需请求Web服务器，同时也无需重新装载网页。这是因为一切功能都包含在HTML文件中，随网页一起下载到浏览器端。可见，DHTML技术是一种非常实用的网页设计技术。实际上，DHTML技术早已广泛地应用到了各类网站中，成为高水平网页必不可少的组成部分。

1.10“公告板”网页

1.10.2DHTML技术应用举例1．图像显示特效使用记事本软件新建一个HTML文件，打开后输入下面的HTML代码：<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><scriptlanguage="JavaScript1.2">functionhigh(which2){theobject=which2highlighting=setInterval("highlightit(theobject)",50)}functionlow(which2){clearInterval(highlighting)which2.filters.alpha.opacity=20}functionhighlightit(cur2){if(cur2.filters.alpha.opacity<100)

1.10“公告板”网页

cur2.filters.alpha.opacity+=5elseif(window.highlighting)clearInterval(highlighting)}</script></head><bodybgcolor="#FFFFFF"><divid="Layer1"style="position:absolute;left:51px;top:29px;width:690px;height:200px;z-index:1"><tablewidth="689"border="0"cellspacing="0"cellpadding="0"height="202"><divalign="center"><imgsrc="img/2.gif"tppabs="img/2.gif"width="68"height="122"style="filter:alpha(opacity=40)"onMouseover="high(this)"onMouseout="low(this)"></div><divalign="center"><imgsrc="img/4.gif"tppabs="img/4.gif"width="54"height="98"style="filter:alpha(opacity=40)"onMouseover="high(this)"onMouseout="low(this)"></div></td><td><divalign="center"><imgsrc="img/1.gif"tppabs="img/1.gif"width="104"height="103"style="filter:alpha(opacity=40)"onMouseover="high(this)"onMouseout="low(this)"></div></td></tr></table></div></body></html>

1.10“公告板”网页

保存后在浏览器中打开该文件，即可查看“图像特效”网页的显示效果，如图1-10-2所示。初始时网页中图像的颜色较淡，当光标移到图像上时图像显示为正常状态。

图1-10-2“图像特效”网页的显示效果1.10“公告板”网页

2．跟随鼠标的蝴蝶使用记事本软件新建一个HTML文件，然后输入下面的HTML代码：<HTML><HEAD><METAcontent="text/html;charset=gb2312"http-equiv=Content-Type><SCRIPTlanguage=JavaScript><!--functionLayerMove(yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep){if((document.layers)||(document.all)){with(Math){yynextx=eval(yyfnx)}with(Math){yynexty=eval(yyfny)}yycnt=(yyloop&&yycnt>=yystep*yybilder)?0:yycnt+yystep;if(document.layers){eval(yydiv+".top="+(yynexty+yytop))eval(yydiv+".left="+(yynextx+yyleft))}if(document.all){eval("yydiv=yydiv.replace(/.layers/gi,'.all')");eval(yydiv+".style.pixelTop="+(yynexty+yytop));eval(yydiv+".style.pixelLeft="+(yynextx+yyleft));}

1.10“公告板”网页

argStr='LayerMove('+yyleft+','+yytop+',"'+yyfnx+'","'+yyfny+'","'+yydiv+'",'+yybilder+','+yyloop+','+yyto+','+yycnt+','+yystep+')';if(yycnt<=yystep*yybilder){eval(yydiv+".yyto=setTimeout(argStr,yyto)");}}}functionMousetrace(evnt){if(yyns4){if(evnt.pageX){ml=evnt.pageX;mt=evnt.pageY;}}else{ml=(event.clientX+document.body.scrollLeft);mt=(event.clientY+document.body.scrollTop);}if(tracescript)eval(tracescript)}//--></SCRIPT><METAcontent="MSHTML5.00.2614.3500"name=GENERATOR></HEAD><BODYbgColor=#ffffffleftMargin=0topMargin=0><DIValign=center><CENTER>

1.10“公告板”网页

<DIVid=yyd0style="CLIP:rect(0px50px50px0px);HEIGHT:50px;POSITION:absolute;WIDTH:50px;Z-INDEX:1"><IMGsrc="tbttrfly.gif"tppabs="txt/tbttrfly.gif"></DIV><DIVid=yyd1style="CLIP:rect(0px50px50px0px);HEIGHT:50px;POSITION:absolute;WIDTH:50px;Z-INDEX:1"><IMGsrc="tbttrfly.gif"tppabs="txt/tbttrfly.gif"></DIV><SCRIPT>varyyns4=window.Event?true:false;varmt=0;varml=0;document.onmousemove=Mousetrace;tracescript='';if(yyns4){document.captureEvents(Event.MOUSEMOVE);Mousetrace('',',document.Mousetrace1')}LayerMove(0,0,'ml+cos((15*sin(yycnt/24))+0)*120*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','mt+sin((15*sin(yycnt/36))+0)*90*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers[\'yyd0\']',2000,true,100,0,1);LayerMove(0,0,'ml+cos((15*sin(yycnt/16))+90)*120*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','mt+sin((15*sin(yycnt/28))+90)*90*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers[\'yyd1\']',2000,true,100,0,1);

1.10“公告板”网页

</SCRIPT></BODY></HTML>保存后在浏览器中打开该文件，即可查看“跟随鼠标的蝴蝶”网页的显示效果，如图1-10-3所示。网页中飘动着两只蝴蝶，随着鼠标的移动而飞舞。

图1-10-3“跟随鼠标的蝴蝶”网页的显示效果1.11“水中人”网页

“水中人”网页是利用ANFY网页特效工具制作的，其显示效果如图1-11-1所示。可以看到，网页中的图像被分为两个部分，上半部分为一幅正常的图像，下半部分是将上面的图像垂直翻转并增加了“水波纹”的效果，感觉就像是人站在了湖边，水中还不断显示着倒影动画。1.11.1ANFY软件介绍ANFY是国外一个著名的网页特效制作软件，利用ANFY可以制作出数十种Java网页特效，例如，鼠标轨迹水纹效果等。通过图1-11-2可以看出，它的工作界面是一个简单易懂、赋有亲和力的工作界面。ANFY1.4.5中文版中包括了40个Javaapplets程序及一个被称为ANFY向导的窗口程序。在“水中人”网页实例中，首先选择了“图像效果”