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向導的窗口程序。在“水中人”網頁實例中，首先選擇了“圖像效果”