HTML和中文DreamweaverMX2004實(shí)用教程

HTML和中文DreamweaverMX2004

實(shí)用教程第1章HTML語言

本章要點(diǎn)1.1Internet簡(jiǎn)介1.2“卡通青蛙”網(wǎng)頁1.3“我的收藏”網(wǎng)頁1.4再做“我的收藏”網(wǎng)頁1.5“俏皮歇后語”網(wǎng)頁1.6“動(dòng)畫放映室”網(wǎng)頁1.7“HTML技術(shù)演示”網(wǎng)頁1.8“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁1.9“Flash技術(shù)說明”網(wǎng)頁1.10“公告板”網(wǎng)頁1.11“水中人”網(wǎng)頁1.12“俄羅斯方塊游戲”網(wǎng)頁習(xí)題11.1Internet簡(jiǎn)介

1.1.1什么是Internet1．計(jì)算機(jī)網(wǎng)絡(luò)計(jì)算機(jī)網(wǎng)絡(luò)是將地理位置不同并具有獨(dú)立工作能力的多個(gè)計(jì)算機(jī)系統(tǒng)通過通信線路互連在一起，由網(wǎng)絡(luò)軟件實(shí)現(xiàn)網(wǎng)絡(luò)資源共享和相互通信的整個(gè)信息系統(tǒng)。物理上，計(jì)算機(jī)網(wǎng)絡(luò)主要是由計(jì)算機(jī)、路由器、集線器、調(diào)制解調(diào)器、網(wǎng)卡、中繼器、收發(fā)器以及交換機(jī)等網(wǎng)絡(luò)硬件設(shè)備組成，所有這些設(shè)備統(tǒng)稱為網(wǎng)絡(luò)單元。計(jì)算機(jī)網(wǎng)絡(luò)按照覆蓋的地域大小，可分為局域網(wǎng)（即LAN，范圍不超過10km）和廣域網(wǎng)（即WAN，一般指10km以上范圍）。任何計(jì)算機(jī)網(wǎng)絡(luò)，無論是局域網(wǎng)、城域網(wǎng)、廣域網(wǎng)還是因特網(wǎng)都可以劃分為兩個(gè)部分：一部分是負(fù)責(zé)信息收集和處理的資源子網(wǎng)，另一部分是負(fù)責(zé)信息傳輸?shù)耐ㄐ抛泳W(wǎng)。

1.1Internet簡(jiǎn)介

2．InternetInternet一詞來源于英文Interconnectnetworks，即“互連各個(gè)網(wǎng)絡(luò)”，簡(jiǎn)稱“互聯(lián)網(wǎng)”，中文譯名為“因特網(wǎng)”。Internet是專指全球范圍內(nèi)最大的、由眾多網(wǎng)絡(luò)相互連接而成的、基于TCP/IP的計(jì)算機(jī)網(wǎng)絡(luò)。Internet是當(dāng)今世界最大的計(jì)算機(jī)互連網(wǎng)絡(luò)系統(tǒng)，由全球100多個(gè)國(guó)家和地區(qū)無數(shù)的不同功能的計(jì)算機(jī)、通信骨干網(wǎng)和各種計(jì)算機(jī)網(wǎng)絡(luò)通過線路連接在一起的一個(gè)世界范圍的網(wǎng)絡(luò)。在Internet中，資源是存放在服務(wù)器上的，Internet上的服務(wù)器晝夜不停地工作，分別存儲(chǔ)著各種各樣的信息，提供多種服務(wù)功能，用戶通過客戶機(jī)（個(gè)人計(jì)算機(jī)）訪問服務(wù)器，從而獲取資源。Internet服務(wù)器的資源主要有：超級(jí)計(jì)算中心、圖書文獻(xiàn)中心、技術(shù)資料中心、公共軟件庫、科學(xué)數(shù)據(jù)庫、地址目錄庫以及信息庫等。Internet服務(wù)器的主要信息服務(wù)有：萬維網(wǎng)服務(wù)（WWW）、電子郵件服務(wù)（E-mail）、遠(yuǎn)程登錄服務(wù)（Telnet）、文件傳輸服務(wù)（FTP）、網(wǎng)絡(luò)新聞服務(wù)（USENET）、電子公告板服務(wù)（BBS），還有網(wǎng)上購物、網(wǎng)上會(huì)議、網(wǎng)上聊天、網(wǎng)上炒股、網(wǎng)上交友、網(wǎng)上書店、網(wǎng)上報(bào)刊、網(wǎng)上廣播、網(wǎng)上畫廊、網(wǎng)上電影和網(wǎng)上音樂等。各服務(wù)器之間通過網(wǎng)絡(luò)協(xié)議相互連接，配合工作，資源共享。當(dāng)用戶與其中一臺(tái)服務(wù)器建立連接后，便可以以鏈接的方式訪問整個(gè)網(wǎng)絡(luò)，服務(wù)程序可以根據(jù)用戶的需要，自動(dòng)地從一臺(tái)服務(wù)器轉(zhuǎn)移到另一臺(tái)服務(wù)器。一旦進(jìn)入了Internet，無論所需要的信息是在哪一個(gè)國(guó)家或地區(qū)的服務(wù)器上，只要是合法的登錄者，就可以漫游Internet，享用所需要的信息和資源。Internet是當(dāng)今世界上最大的資源子網(wǎng)。Internet正在向著全球信息高速公路的方向快速、健康地發(fā)展。

1.1Internet簡(jiǎn)介

3．Internet的發(fā)展1969年，美國(guó)國(guó)防部高級(jí)研究計(jì)劃署（AdvancedResearchProjectAgency，ARPA）撥款支持建立了軍用實(shí)驗(yàn)網(wǎng)絡(luò)ARPANET。它是世界上第一個(gè)計(jì)算機(jī)網(wǎng)絡(luò)，也是Internet的前身，初期只有4臺(tái)主機(jī)。當(dāng)時(shí)，美國(guó)國(guó)防部研究并建立ARPANET的主要目的是尋求一種將不同種類的計(jì)算機(jī)互連成網(wǎng)絡(luò)的方法，同時(shí)能使該網(wǎng)絡(luò)的一部分遭破壞時(shí)不影響網(wǎng)絡(luò)其他部分的正常運(yùn)行。以后，ARPANET的應(yīng)用由軍事領(lǐng)域延伸到教育領(lǐng)域，科學(xué)家們開始使用ARPANET交換信息，共享研究成果。1983年，TCP/IP（即傳輸控制協(xié)議和網(wǎng)際間協(xié)議）的建立，使計(jì)算機(jī)通信有了統(tǒng)一的標(biāo)準(zhǔn)，這是計(jì)算機(jī)網(wǎng)絡(luò)發(fā)展史上的一個(gè)里程碑，網(wǎng)絡(luò)從此進(jìn)入高速發(fā)展的時(shí)代。1986年，美國(guó)國(guó)家科學(xué)基金會(huì)（NationalScienceFoundation，NSF）開始將美國(guó)各地的研究人員及分屬各大學(xué)和研究機(jī)構(gòu)的計(jì)算中心連接到了分布在不同地區(qū)的5個(gè)超級(jí)計(jì)算中心。至此，越來越多的高等院校、科研機(jī)構(gòu)、圖書館、實(shí)驗(yàn)室、政府部門、商業(yè)集團(tuán)、醫(yī)院和個(gè)人所使用的NSFNET逐漸取代了早期源于軍事目的的ARPANET。終于，在1990年7月，ARPANET完全被NSFNET取代。到目前為止，連接在網(wǎng)絡(luò)上的主機(jī)已經(jīng)達(dá)到了數(shù)百萬臺(tái)。一般認(rèn)為，正是NSFNET才使Internet迅速推廣到全球范圍。

1.1Internet簡(jiǎn)介1994年5月，中國(guó)作為第71個(gè)國(guó)家級(jí)網(wǎng)加入Internet，“中國(guó)國(guó)家計(jì)算機(jī)網(wǎng)絡(luò)設(shè)施”（TheNationalComputingandNetworkFacilityofChina，NCFC，國(guó)內(nèi)也稱中關(guān)村網(wǎng)）與Internet連通。我國(guó)從1994年中國(guó)科技網(wǎng)與Internet連通后，共有4大互聯(lián)網(wǎng)通過6大國(guó)際出口與Internet相連。這4大互聯(lián)網(wǎng)分別是：中國(guó)科技網(wǎng)（CSTNET）、中國(guó)教育和科研計(jì)算機(jī)網(wǎng)（CERNET）、中國(guó)公用計(jì)算機(jī)互聯(lián)網(wǎng)（ChinaNET）和國(guó)家公用經(jīng)濟(jì)信息網(wǎng)（即金橋網(wǎng)（ChinaGBN）），其中，前兩個(gè)網(wǎng)絡(luò)是非盈利性的，以為教育、科研和政府部門服務(wù)為宗旨，原則上不對(duì)外接納個(gè)人和商業(yè)用戶，后兩個(gè)網(wǎng)絡(luò)是面向全國(guó)提供商業(yè)服務(wù)的網(wǎng)絡(luò)。目前，我國(guó)Internet商業(yè)市場(chǎng)十分活躍，除去上述4家外，一些商業(yè)公司也開始紛紛投入這一市場(chǎng)，形成若干商業(yè)ISP（InternetServiceProvider，Internet服務(wù)提供商）。他們的基本作法大多是：自己建立一個(gè)網(wǎng)絡(luò)服務(wù)中心，通過專線從上述幾個(gè)網(wǎng)絡(luò)的國(guó)際出口與Internet相連，提供服務(wù)的業(yè)務(wù)主要有用戶接入服務(wù)（撥號(hào)上網(wǎng)和專線上網(wǎng)）、培訓(xùn)服務(wù)、服務(wù)器托管、代理域名注冊(cè)、出租硬盤空間、收發(fā)電子郵件、網(wǎng)上教學(xué)、金融證券以及電子商務(wù)等。隨著計(jì)算機(jī)和通信技術(shù)的發(fā)展，計(jì)算機(jī)網(wǎng)絡(luò)由過去的軍事與教育專用網(wǎng)絡(luò)發(fā)展成為無所不包、無所不能的國(guó)際互聯(lián)網(wǎng)絡(luò)（Internet）。Internet已經(jīng)成為我們生活與工作中不可缺少的一部分，它正以人們難以想象的速度迅猛發(fā)展。

1.1Internet簡(jiǎn)介1.1.2TCP/IPInternet沒有形成之前，各個(gè)地方已經(jīng)建立了很多小型的局域網(wǎng)，Internet是將全球各地的局域網(wǎng)連接起來而形成的一個(gè)“網(wǎng)之間的網(wǎng)”（即網(wǎng)際網(wǎng)）。然而，在連接之前的各式各樣的局域網(wǎng)卻存在不同的網(wǎng)絡(luò)結(jié)構(gòu)和數(shù)據(jù)傳輸規(guī)則，將這些小網(wǎng)連接起來后，各網(wǎng)之間要通過什么樣的規(guī)則來傳輸數(shù)據(jù)呢？這就像世界上有很多個(gè)國(guó)家，各個(gè)國(guó)家的人說各自的語言，只有將各種語言翻譯成一種通用的語言后才可以交流。TCP/IP正是Internet上的一種公用語言的規(guī)范約定。TCP/IP是TransmissionControlProtocol/InternetProtocol的縮寫，中文譯名為傳輸控制協(xié)議/互聯(lián)網(wǎng)絡(luò)協(xié)議，是Internet最基本的協(xié)議，是由底層的IP和TCP組成的。TCP/IP的開發(fā)工作始于上世紀(jì)70年代，是用于互聯(lián)網(wǎng)的第一套協(xié)議。1．IPIP是因特網(wǎng)中的基礎(chǔ)協(xié)議，它非常詳細(xì)地定義了計(jì)算機(jī)通信應(yīng)該遵循的規(guī)則，準(zhǔn)確地定義了分組的組成和路由器如何將一個(gè)分組傳遞到目的地。連到Internet上的計(jì)算機(jī)需要IP軟件才能在互聯(lián)網(wǎng)上通信。由IP控制傳輸?shù)膮f(xié)議單元被稱為IP數(shù)據(jù)報(bào)。IP數(shù)據(jù)報(bào)中含有發(fā)/收方的IP地址。IP提供不可靠的、盡力的及無連接的數(shù)據(jù)報(bào)投遞服務(wù)，構(gòu)成了因特網(wǎng)數(shù)據(jù)傳輸?shù)幕A(chǔ)。IP是最基本的軟件，Internet上的所有通信只有使用IP才能進(jìn)行分組交換。所以，Internet上的每臺(tái)計(jì)算機(jī)都要安裝一套供所有應(yīng)用共享的IP軟件的拷貝。在高級(jí)的計(jì)算機(jī)上，內(nèi)存中隨時(shí)保留IP的一個(gè)拷貝，時(shí)刻準(zhǔn)備發(fā)送或接收分組。

1.1Internet簡(jiǎn)介

1.1.3萬維網(wǎng)、網(wǎng)頁和網(wǎng)站1．什么是萬維網(wǎng)萬維網(wǎng)也叫WWW，是WorldWideWeb（全球信息網(wǎng)）的縮寫。萬維網(wǎng)是歐洲粒子物理研究所（CERN）的科學(xué)家TimBerners-Lee發(fā)明的。他提出了超文本（Hypertext）的結(jié)構(gòu)體系，該體系是由相互關(guān)聯(lián)的文件組成的一種高級(jí)的基于超文本的瀏覽和搜索方式，目的是讓大家在不同地方用一種簡(jiǎn)捷的方式共享信息資源。萬維網(wǎng)提供了非常豐富的信息，各種信息按不同的類型以網(wǎng)頁文件的形式分別存放在萬維網(wǎng)服務(wù)器上，供人們選擇查閱。萬維網(wǎng)使得瀏覽Internet的信息變得非常簡(jiǎn)單，它已成為Internet用戶使用最廣泛的網(wǎng)絡(luò)服務(wù)系統(tǒng)。萬維網(wǎng)制定了一套標(biāo)準(zhǔn)、又容易掌握的超文本HTML語言、統(tǒng)一的資源定位符URL和超文本傳輸協(xié)議（hypertexttransportprotocol，HTTP）。超文本傳輸協(xié)議是在瀏覽器與Web服務(wù)器間建立連接的協(xié)議標(biāo)準(zhǔn)。超文本由若干互連的超媒體文件組成，它實(shí)質(zhì)是通過超鏈接把一些具有超媒體特性的信息鏈接起來的一種新型的信息管理技術(shù)。超媒體不但包括了文本內(nèi)容，還包括圖像、動(dòng)畫、聲音和視頻等。超鏈接就是通過超文本中的鏈接點(diǎn)（也叫“參考點(diǎn)”或“熱點(diǎn)”）建立與其他超媒體文件的鏈接，用鼠標(biāo)單擊參考點(diǎn)即可調(diào)出與之相鏈接的其他超媒體文件（如網(wǎng)頁）。瀏覽WWW必須通過瀏覽器來完成。瀏覽器是用來訪問Internet的基于超文本技術(shù)使用最廣泛的網(wǎng)絡(luò)軟件，它可以提供包括WWW的瀏覽、搜索、網(wǎng)絡(luò)資訊的打印和收發(fā)E-mail的功能。在瀏覽器中，比較有代表性的是IE（InternetExplorer）、Netscape和Opera等。

1.1Internet簡(jiǎn)介

2．網(wǎng)頁和網(wǎng)站組成WWW的基本元素是網(wǎng)頁，網(wǎng)頁也被稱為頁面或Web頁。不同的網(wǎng)頁通過超鏈接聯(lián)系在一起，構(gòu)成了WWW的縱橫交織結(jié)構(gòu)。WWW是由無數(shù)的Web服務(wù)器構(gòu)成的，可以通過瀏覽器訪問這些服務(wù)器上的網(wǎng)頁。通常把一系列邏輯上可以視為一個(gè)整體的頁面叫作網(wǎng)站，或者說，網(wǎng)站就是一個(gè)相互鏈接的網(wǎng)頁集合，它們可以共享。網(wǎng)站的概念是相對(duì)的，大網(wǎng)站（如“雅虎網(wǎng)”和“新浪網(wǎng)”）頁面多得無法計(jì)數(shù)，而且位于多臺(tái)服務(wù)器上；小網(wǎng)站可以是一些個(gè)人網(wǎng)站，可能只有幾個(gè)網(wǎng)頁，僅在一臺(tái)服務(wù)器上占據(jù)很小的空間。網(wǎng)頁與網(wǎng)頁之間的關(guān)系并不是完全相同的。主頁是網(wǎng)站中的一個(gè)特殊網(wǎng)頁，它是在WWW上進(jìn)入網(wǎng)站的第一個(gè)網(wǎng)頁，其中包含指向其他網(wǎng)頁的超鏈接。通常主頁的名稱是固定的，例如，index.htm或index.html等（.htm或.html擴(kuò)展名表示是HTML文檔）。

1.1Internet簡(jiǎn)介

1.1.4Internet地址Internet采用一種惟一通用的地址格式，為Internet中的每一個(gè)網(wǎng)絡(luò)和幾乎每一臺(tái)主機(jī)都分配了一個(gè)地址，就像一個(gè)實(shí)實(shí)在在的整體。Internet中地址類型有IP地址和域名地址兩種。1．IP地址連接在Internet上的每臺(tái)計(jì)算機(jī)都有一個(gè)惟一的地址，發(fā)送方計(jì)算機(jī)在通信之前必須知道接收方計(jì)算機(jī)的地址，這和我們?nèi)粘｀]寄普通信件是一樣的道理，只是Internet上使用的地址稱為Internet地址，簡(jiǎn)稱IP地址。IP地址是4個(gè)以小數(shù)點(diǎn)隔開的十進(jìn)制整數(shù)，每個(gè)整數(shù)的范圍是0～255。Internet上的每一臺(tái)計(jì)算機(jī)和路由器都有一個(gè)由相關(guān)的管理機(jī)構(gòu)指定的IP地址。計(jì)算機(jī)用4個(gè)字節(jié)的二進(jìn)制單位（32位）存儲(chǔ)IP地址，每個(gè)整數(shù)對(duì)應(yīng)一個(gè)字節(jié)。例如，有一臺(tái)計(jì)算機(jī)的IP地址為：，而另一臺(tái)計(jì)算機(jī)的IP地址為:0。IP地址分為5類。A類（AClass）：～55適用于大型網(wǎng)絡(luò)。B類（BClass）：～55適用于中型網(wǎng)絡(luò)。C類（CClass）：～55適用于小型網(wǎng)絡(luò)。D類和E類：保留作特殊用途。

1.1Internet簡(jiǎn)介2．計(jì)算機(jī)域名由于IP地址是數(shù)字型的，不方便記憶，也難以理解，所以Internet采用了另一套字符（可以有英文字母、數(shù)字和漢字等）的地址方案，即域名地址。域名地址用具有一定意義的字符串來標(biāo)識(shí)主機(jī)地址，IP與域名地址兩者相互對(duì)應(yīng)，而且保持全網(wǎng)統(tǒng)一。在網(wǎng)絡(luò)中，一臺(tái)主機(jī)的IP地址是惟一的，而每臺(tái)主機(jī)只能有一個(gè)IP地址，但它的域名數(shù)卻可以有多個(gè)。域名系統(tǒng)（DomainNameSystem，DNS）負(fù)責(zé)將Internet上每臺(tái)主機(jī)的英文名字轉(zhuǎn)換成IP地址的系統(tǒng)。用戶可以只輸入要查找的主機(jī)的域名，DNS系統(tǒng)把它轉(zhuǎn)換成IP地址后，計(jì)算機(jī)才能夠根據(jù)IP地址進(jìn)行查找。當(dāng)然并不是每臺(tái)在Internet上的主機(jī)都有域名，例如，撥號(hào)上網(wǎng)的用戶每次連接Internet時(shí)，只需要一個(gè)“動(dòng)態(tài)”的IP地址，不需要域名。也就是說，Internet上的每臺(tái)主機(jī)都有一個(gè)IP地址，但不一定有域名。一臺(tái)計(jì)算機(jī)的域名由若干代表不同層次的子域名組成，各個(gè)子域名之間用小數(shù)點(diǎn)分開。其中最左邊的子域名通常代表主機(jī)，中間各子域名代表相應(yīng)的層次，最右邊的子域名是標(biāo)準(zhǔn)化的最高級(jí)子域名，主要表示主機(jī)所屬的國(guó)家、地區(qū)或網(wǎng)絡(luò)性質(zhì)的代碼。例如，中國(guó)是cn，英國(guó)是uk、商業(yè)組織是com、教育機(jī)構(gòu)是edu、政府部門是gov、軍事部門是mil、網(wǎng)絡(luò)信息和運(yùn)營(yíng)中心是net、非商業(yè)組織是org以及國(guó)際組織是int等。二級(jí)域名（右起第二個(gè)子域名）有：教育（edu）、電信網(wǎng)（net）、科研網(wǎng)（ca）、團(tuán)體（or）、政府（go）、商業(yè)（co）以及軍隊(duì)（mi）等。各省則采用其拼音宿寫，如bj代表北京、sh代表上海、ah則代表安徽。

1.1Internet簡(jiǎn)介例如，域名對(duì)應(yīng)一個(gè)IP地址，其中youdian是該機(jī)構(gòu)的名字，edu表示教育機(jī)構(gòu)，cn表示中國(guó)。例如，域名對(duì)應(yīng)一個(gè)IP地址，其中xyz是主機(jī)名，netbook是該機(jī)構(gòu)名，com表示商業(yè)組織，cn表示中國(guó)。另外，還要注意域名只能以字母或數(shù)字開頭，以字母或數(shù)字結(jié)尾，中間可以用字母、字符、數(shù)字、連字符或下劃線。域名不區(qū)分大小寫，整個(gè)長(zhǎng)度不得超過255個(gè)字符。由于Internet源自美國(guó)，所以美國(guó)主機(jī)其第一級(jí)域名一般直接說明其主機(jī)性質(zhì)，而不是國(guó)家代碼。如果用戶看到某主機(jī)的第一級(jí)域名為com、edu或gov等，一般可以判斷這臺(tái)主機(jī)置于美國(guó)，因?yàn)槠渌麌?guó)家或地區(qū)第一級(jí)域名一般是其國(guó)家或地區(qū)的代碼。

1.2“卡通青蛙”網(wǎng)頁

“卡通青蛙”網(wǎng)頁在瀏覽器中的顯示效果如圖1-2-1所示。網(wǎng)頁中的青蛙除了大小不同以外，在圖片的周圍還增加了粗細(xì)不同的邊框。

圖1-2-1“卡通青蛙”網(wǎng)頁1.2“卡通青蛙”網(wǎng)頁

1.2.1HTML語言和輸入HTML語言1．HTML語言簡(jiǎn)介HTML的英文全稱為Hypertextmakeuplanguage，直譯為超文本標(biāo)記語言。HTML語言不是一種程序語言，而是一種描述文檔結(jié)構(gòu)的標(biāo)記語言，它與操作系統(tǒng)平臺(tái)的選擇無關(guān)，只要有瀏覽器就可以運(yùn)行HTML文檔，顯示網(wǎng)頁內(nèi)容。HTML語言使用了一些約定的標(biāo)記，對(duì)WWW上的各種信息進(jìn)行標(biāo)記，瀏覽器會(huì)自動(dòng)根據(jù)這些標(biāo)記，在屏幕上顯示出相應(yīng)的內(nèi)容，而標(biāo)記符號(hào)不會(huì)在屏幕上顯示出來。自從1990年首次將HTML語言用于網(wǎng)頁制作后，幾乎所有的網(wǎng)頁都是由HTML語言或以其他語言鑲嵌在HTML語言中的語言（如JavaScript語言等）編寫的。目前，較流行的瀏覽器有Netscape公司的NetscapeNavigator和Microsoft公司的InternetExplorer（即IE）。要注意，不同的瀏覽器對(duì)同一個(gè)HTML文件的解釋可能會(huì)不太一樣。使用HTML語言編寫HTML語言程序（即制作網(wǎng)頁文件）是學(xué)習(xí)制作網(wǎng)頁的基礎(chǔ)。雖然目前有許多“所見即所得”且操作較方便的網(wǎng)頁制作工具，不需要直接用HTML語言編寫HTML語言程序，但是在很多時(shí)候，了解一些HTML語言知識(shí)，將有利于學(xué)習(xí)網(wǎng)頁制作工具、學(xué)習(xí)編輯修改網(wǎng)頁的知識(shí)和提高網(wǎng)頁制作水平。

1.2“卡通青蛙”網(wǎng)頁

2．輸入HTML語言編寫HTML文檔可以在Windows記事本內(nèi)輸入。在存盤輸入文件名時(shí)，一定要輸入HTML文檔的擴(kuò)展名：.htm或.html。要注意：HTML文檔中的各種英文標(biāo)記要在英文輸入方式下輸入。為了便于管理，可在磁盤目錄下建立一個(gè)名為“我的網(wǎng)站”的文件夾用來存儲(chǔ)HTML文檔。再在該文件夾下建立一個(gè)名為“image”的文件夾用來存儲(chǔ)網(wǎng)頁中的圖像文件。

1.2“卡通青蛙”網(wǎng)頁

1.2.2調(diào)整圖像大小和邊框的HTML標(biāo)記1．在網(wǎng)頁中插入圖像的HTML標(biāo)記在網(wǎng)頁中插入圖像時(shí)使用的標(biāo)記是<IMG>，用來加載GIF圖像與動(dòng)畫，“SRC”屬性用來輸入圖像的路徑。在網(wǎng)頁中加載GIF動(dòng)畫的方法與加載GIF圖像的方法一樣。GIF動(dòng)畫文件的擴(kuò)展名也是.gif，文件格式是GIF89A格式。2．調(diào)整圖像大小的HTML標(biāo)記使用<IMG>標(biāo)記中的HEIGHT和WIDTH屬性可以調(diào)整圖像的大小。HEIGHT（決定圖像的高）和WIDTH（決定圖像的寬）的取值單位為像素。3．給圖像加邊框的HTML標(biāo)記使用<IMG>標(biāo)記中的BORDER屬性可以給圖像加邊框。BORDER的取值單位為像素，當(dāng)它的取值為0或者不加BORDER屬性時(shí)，則沒有邊框。

1.3“我的收藏”網(wǎng)頁

“我的收藏”網(wǎng)頁的顯示效果如圖1-3-1所示。在網(wǎng)頁中，列出了最喜愛的3輛汽車的圖像，在圖片的旁邊，還有一句簡(jiǎn)短的介紹。通過圖1-3-1可以看出，每一幅圖像旁的文字位置有所不同。

圖1-3-1“我的收藏”網(wǎng)頁1.3“我的收藏”網(wǎng)頁

1.3.1瀏覽和修改網(wǎng)頁1．瀏覽網(wǎng)頁雙擊HTML文檔圖標(biāo)，調(diào)出瀏覽器窗口，同時(shí)打開該網(wǎng)頁。另外，還可以采用如下方法。圖1-3-2“打開”對(duì)話框（1）雙擊瀏覽器圖標(biāo)，調(diào)出瀏覽器窗口。然后執(zhí)行瀏覽器窗口內(nèi)的“文件”→“打開”菜單命令，調(diào)出“打開”對(duì)話框，如圖1-3-2所示（“打開”文本框內(nèi)還沒有內(nèi)容）。

圖1-3-2“打開”對(duì)話框1.3“我的收藏”網(wǎng)頁

（2）單擊“打開”對(duì)話框中的“瀏覽”按鈕，調(diào)出“MicrosoftInternetExplorer”對(duì)話框，選擇HTML文件，單擊“打開”按鈕，回到“打開”對(duì)話框，在其“打開”下拉列表框內(nèi)已有選中的文件目錄與名字，如圖1-3-2所示。（3）單擊“打開”對(duì)話框中的“確定”按鈕，即可在瀏覽器中打開選擇的網(wǎng)頁。2．修改網(wǎng)頁執(zhí)行“MicrosoftInternetExplorer”瀏覽器窗口中的“查看”→“源文件”菜單命令，調(diào)出Windows記事本窗口，并在該窗口中顯示出該網(wǎng)頁的代碼，此時(shí)即可修改網(wǎng)頁代碼。

1.3“我的收藏”網(wǎng)頁

1.3.2調(diào)整圖像和文本的相對(duì)位置在網(wǎng)頁中，經(jīng)常需要將圖像和文本放在一起進(jìn)行顯示。使用<IMG>標(biāo)記的ALIGN屬性可以調(diào)整圖像與文本的相對(duì)位置。使用<IMG>標(biāo)記中的VSPACE和HSPACE屬性可以調(diào)整圖像與文本間的距離。VSPACE（圖像與文本的垂直間距）和HSPACE（圖像與文本的水平間距）的單位均為像素。<IMG>標(biāo)記中的ALIGN屬性用于調(diào)整圖像與文字的對(duì)齊方式，主要含義如下。（1）ALIGN項(xiàng)缺省時(shí)：圖像的底部與其他文本或圖像的底部對(duì)齊。（2）ALIGN=top：圖像的頂部與其他文本或圖像的頂部對(duì)齊。（3）ALIGN=middle：圖像的中部與其他文本或圖像的中部對(duì)齊。（4）ALIGN=bottom：圖像的底部與其他文本或圖像的底部對(duì)齊。（5）ALIGN=left：圖像位于屏幕左邊，與文本或圖像的左邊對(duì)齊。（6）ALIGN=right：圖像位于屏幕右邊，與文本或圖像的右邊對(duì)齊。

1.4再做“我的收藏”網(wǎng)頁

再做“我的收藏”網(wǎng)頁后，當(dāng)鼠標(biāo)移到圖像上時(shí)，會(huì)顯示出一段浮動(dòng)的文字說明。當(dāng)關(guān)閉瀏覽器中的載入圖像命令時(shí)，說明文字可以替代圖像。在“我的收藏”網(wǎng)頁中除了為圖像添加了說明文字外，還為網(wǎng)頁添加了背景圖像。網(wǎng)頁的部分顯示效果如圖1-4-1所示。

圖1-4-1“我的收藏”網(wǎng)頁（部分）的顯示效果1.4再做“我的收藏”網(wǎng)頁

1.4.1文件的路徑名和URL1．文件的路徑名（1）絕對(duì)路徑：絕對(duì)路徑是寫出全部路徑，系統(tǒng)按照全部路徑進(jìn)行文件的查找。絕對(duì)路徑中的盤符后用“：\”或“：/”，各個(gè)目錄名之間以及目錄名與文件名之間，應(yīng)用“\”或“/”分隔開。絕對(duì)路徑名的寫法及其含義如表1-4-1所示。（2）相對(duì)路徑：相對(duì)路徑是以當(dāng)前文件所在路徑或子目錄為起始目錄，進(jìn)行相對(duì)的文件查找。在網(wǎng)頁制作的過程中通常都采用相對(duì)路徑，這樣可以保證文件移動(dòng)后，不會(huì)產(chǎn)生斷鏈現(xiàn)象。相對(duì)路徑名的寫法及其含義如表1-4-2所示。

1.4再做“我的收藏”網(wǎng)頁

2．URLURL（UniformResourceLocator）即統(tǒng)一資源定位符，WWW上的地址編碼，指出了文件在Internet中的位置。它存在的目的在于統(tǒng)一WWW上的地址編碼，給每個(gè)網(wǎng)頁指定地址，這樣就不會(huì)出現(xiàn)重復(fù)或由于編碼不統(tǒng)一而出現(xiàn)無法瀏覽等問題。當(dāng)用戶查詢信息資源時(shí)，只要給出URL地址，WWW服務(wù)器就可以根據(jù)它找到網(wǎng)絡(luò)資源的位置，并將它傳送給用戶的計(jì)算機(jī)。通常，當(dāng)用戶用鼠標(biāo)單擊網(wǎng)頁中的鏈接點(diǎn)時(shí)，即可將URL地址的請(qǐng)求傳送給了WWW服務(wù)器。一個(gè)完整的URL地址通常由通信協(xié)議名、Web服務(wù)器地址、文件在服務(wù)器中的路徑和文件名4部分組成。例如，/intl/cn/file1.html。其中，“http://”是通信協(xié)議名，“”是Web服務(wù)器地址，“/intl/cn/”是文件在服務(wù)器中的路徑，“file1.html”是文件名。URL地址中的路徑只能是絕對(duì)路徑。

1.4再做“我的收藏”網(wǎng)頁

1.4.2平鋪背景圖像和為圖像添加文字說明的HTML標(biāo)記1．設(shè)置平鋪背景圖像的HTML標(biāo)記使用<BODY>標(biāo)記中的BACKGROUND屬性，可設(shè)置網(wǎng)頁的平鋪的圖像，其格式如下：<BODYBACKGROUND="圖像文件名或URL">圖像的路徑可以是絕對(duì)路徑，也可以是相對(duì)路徑。2．為圖像添加文字說明的HTML標(biāo)記使用<IMG>標(biāo)記中的ALT屬性可以為圖像添加文字說明，其格式如下：<IMGATL=“要添加的文字說明內(nèi)容”>。

1.5“俏皮歇后語”網(wǎng)頁

歇后語是一種隱去后文，以前文表示意思的幽默語言。如以“泥菩薩過河”暗示“自身難?！?、以“圍棋盤里下象棋”表示“不對(duì)路數(shù)”等。源遠(yuǎn)流長(zhǎng)的中國(guó)文化孕育了這種特殊的語言結(jié)構(gòu)，是廣大人民群眾喜聞樂見的語言形式。在“俏皮歇后語”網(wǎng)頁中顯示了一些比較有意思的歇后語，但是在網(wǎng)頁中只顯示了前文，當(dāng)鼠標(biāo)移到前文上時(shí)，才可以顯示該歇后語的后文，“俏皮歇后語”網(wǎng)頁效果如圖1-5-1所示。

1.5“俏皮歇后語”網(wǎng)頁

圖1-5-1“俏皮歇后語”網(wǎng)頁的顯示效果1.5“俏皮歇后語”網(wǎng)頁

1.5.1網(wǎng)頁中的基本結(jié)構(gòu)標(biāo)記1．網(wǎng)頁基本結(jié)構(gòu)標(biāo)記（1）<HTML>……</HTML>：是HTML文檔中最基本的標(biāo)記，不可缺少。<HTML>表示HTML文檔的開始，</HTML>表示HTML文檔的結(jié)束。（2）<HEAD>……</HEAD>：是網(wǎng)頁標(biāo)題標(biāo)記，可以提高網(wǎng)頁文檔的可讀性，向?yàn)g覽器提供一個(gè)信息。它可以忽略，但一般不予忽略。（3）<TITLE>……</TITLE>：是網(wǎng)頁名稱標(biāo)記，是<HEAD>……</HEAD>標(biāo)記內(nèi)不可缺少的標(biāo)記，有<HEAD>……</HEAD>標(biāo)記就一定要有<TITLE>……</TITLE>標(biāo)記。（4）<BODY>……</BODY>：是網(wǎng)頁主題內(nèi)容標(biāo)記，其內(nèi)包含了網(wǎng)頁的全部?jī)?nèi)容，一般不可缺少。（5）<BODYBGCOLOR=#RRGGBB>：使用<BODY>標(biāo)記中的BCOLOR屬性，可以設(shè)置網(wǎng)頁的背景顏色。使用的格式有以下兩種：<BODYBGCOLOR=RRGGBB><BODYBGCOLOR="顏色的英文名稱">

1.5“俏皮歇后語”網(wǎng)頁

第一種格式中，RR、GG、BB可以分別取值為00～FF的十六進(jìn)制數(shù)。RR用于表示顏色中的紅色成分占多少，數(shù)值越大，顏色越深；GG用來表示顏色中的綠色成分占多少；BB用來表示顏色中的藍(lán)色成分占多少。紅、綠、藍(lán)三色按一定比例混合，可以得到各種顏色。例如，RR=FF，GG=FF，BB=00，表示為黃色。如果RRGGBB取值為000000，則為黑色；RRGGBB取值為FFFFFF，則為白色；RRGGBB取值為FF8888，則為淺紅色。第二種格式是直接使用顏色的英文名稱來設(shè)定網(wǎng)頁的背景顏色。例如，<BODYBGCOLOR=blue>：用來設(shè)置網(wǎng)頁的背景顏色為藍(lán)色。<BODYBGCOLOR=red>：用來設(shè)置網(wǎng)頁的背景顏色為紅色。<BODYBGCOLOR=white>：用來設(shè)置網(wǎng)頁的背景顏色為白色。（6）<BR>：是換行標(biāo)記，表示以后的內(nèi)容移到下一行，并且是單向標(biāo)記，沒有</BR>。（7）<PRE>……</PRE>：是保留文本原來格式的標(biāo)記。它的作用是將其中的文本內(nèi)容按照原來的格式顯示，否則瀏覽器會(huì)自動(dòng)取消文本中的空格。（8）<B>……</B>：是粗體標(biāo)記，可使其中的文字變?yōu)榇煮w。（9）<OL>……</OL>與<LI>：<OL>……</OL>：是有序列表標(biāo)記，其內(nèi)用<LI>標(biāo)記引導(dǎo)文字，顯示網(wǎng)頁中的這些文字后，文字前會(huì)自動(dòng)加上“1”、“2”……序號(hào)。（10）<UL>……</UL>與<LI>：<UL>……</UL>：是無序列表標(biāo)記，其內(nèi)用<LI>標(biāo)記引導(dǎo)文字，顯示網(wǎng)頁中的這些文字后，文字前會(huì)自動(dòng)加上“○”。

1.5“俏皮歇后語”網(wǎng)頁

2．其他常用標(biāo)記（1）<H1>……</H1>：是正文的第三級(jí)標(biāo)題標(biāo)記。此外，還有第一、二、三、四、五、六級(jí)標(biāo)題標(biāo)記，分別為<H1>……</H1>、<H2>……</H2>、<H3>……</H3>、<H4>……</H4>、<H5>……</H5>和<H6>……</H6>。級(jí)別越高，文字越小。（2）<P>……</P>：是段落標(biāo)記，其作用是將其內(nèi)的文字另起一段顯示。段與段之間有一個(gè)空行。1.5.2網(wǎng)頁中的文本標(biāo)記文本屬于網(wǎng)頁中的基本元素，在前面的基本結(jié)構(gòu)標(biāo)記中已經(jīng)介紹了部分文本標(biāo)記。下面介紹一些網(wǎng)頁中不經(jīng)常使用的文本標(biāo)記，合理使用這些標(biāo)記可以使網(wǎng)頁的顯示效果更加出色。1．邊框包圍的文字可以通過<FIELDSET>標(biāo)記定義文字的邊框。輸入下面的THML代碼，可以顯示出如圖1-5-2所示增加邊框的文字的顯示效果。

1.5“俏皮歇后語”網(wǎng)頁

<html><HEAD><TITLE>圖像的大小和邊框</TITLE></HEAD><fieldset><font>增加了邊框的文字</font></fieldset><body></body></html>2．文字的物理字符標(biāo)記符樣式物理字符標(biāo)記符樣式是指標(biāo)記本身就說明了修飾文字的效果的標(biāo)記符。常用的物理字符標(biāo)記符樣式有黑體標(biāo)記<B>、斜體標(biāo)記<I>及下劃線標(biāo)記<U>等，常用物理字符標(biāo)記樣式如表1-5-1所示。

1.5“俏皮歇后語”網(wǎng)頁

圖1-5-2增加邊框的文字的顯示效果1.5“俏皮歇后語”網(wǎng)頁

2．文字的物理字符標(biāo)記符樣式物理字符標(biāo)記符樣式是指標(biāo)記本身就說明了修飾文字的效果的標(biāo)記符。常用的物理字符標(biāo)記符樣式有黑體標(biāo)記<B>、斜體標(biāo)記<I>及下劃線標(biāo)記<U>等，常用物理字符標(biāo)記樣式如表1-5-1所示。

3．邏輯字符樣式邏輯字符樣式是指標(biāo)記符本身表示了所修飾效果的邏輯含義的標(biāo)記符例如，ADDRESS標(biāo)記符本身的邏輯含義為“地址”，但并沒有說明具體的物體效果。常用的邏輯字符樣式如表1-5-2所示。使用這些邏輯字符樣式時(shí)，只要將需要設(shè)置格式的字符括在標(biāo)記符之間即可。

1.6“動(dòng)畫放映室”網(wǎng)頁

現(xiàn)在，比較新穎的網(wǎng)站中經(jīng)常會(huì)使用Flash動(dòng)畫，最主要的原因是Flash動(dòng)畫可以實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果，而且保持很小的文件體積，這非常有利于在網(wǎng)絡(luò)上傳輸。在“動(dòng)畫放映室”網(wǎng)頁中插入了Flash動(dòng)畫，顯示效果如圖1-6-1所示。在播放動(dòng)畫的同時(shí)，網(wǎng)頁中也在播放音樂。在網(wǎng)頁中插入音樂后可以使網(wǎng)頁的多媒體效果更加出色。圖1-6-1“動(dòng)畫放映室”網(wǎng)頁的顯示效果如果要想在瀏覽器中顯示Flash動(dòng)畫，前提是計(jì)算機(jī)中已經(jīng)安裝了播放Flash的插件，如果沒有安裝該插件，可以在/flash/網(wǎng)站中下載。

1.6“動(dòng)畫放映室”網(wǎng)頁

圖1-6-1“動(dòng)畫放映室”網(wǎng)頁的顯示效果1.6“動(dòng)畫放映室”網(wǎng)頁

1.6.1添加背景音樂和插入Flash動(dòng)畫的HTML語言1．添加背景音樂使用<BGSOUND>標(biāo)記可以在網(wǎng)頁中插入背景音樂。<BGSOUND>標(biāo)記可以放在<HTML>與</HTML>標(biāo)記內(nèi)的任何地方。引導(dǎo)音樂文件的屬性是SRC，其格式如下：<BGSOUNDSRC="文件目錄與文件名或URL">2．在網(wǎng)頁中插入Flash動(dòng)畫使用<EMBED>標(biāo)記可以在網(wǎng)頁中插入Flash對(duì)象。同添加背景音樂的方法一樣，<EMBED>標(biāo)記可以放在<HTML>與</HTML>標(biāo)記內(nèi)的任何地方。引導(dǎo)Flash動(dòng)畫文件的屬性是SRC，格式如下：<EMBEDSRC="文件目錄與文件名或URL">

1.6“動(dòng)畫放映室”網(wǎng)頁

1.6.2在網(wǎng)頁中插入多媒體文件在網(wǎng)頁中直接包含多媒體對(duì)象最常用的兩個(gè)標(biāo)記是<EMBEN>標(biāo)記和<OBJECT>標(biāo)記。1．<EMBEN>標(biāo)記使用<EMBEN>標(biāo)記不僅可以在網(wǎng)頁中插入Flash動(dòng)畫，還可以下載并顯示由插件支持的其他多媒體應(yīng)用程序。當(dāng)瀏覽器遇到<EMBEN>標(biāo)記時(shí)，會(huì)加載其中指定的文件并確定它的MIME類型。MIME信息告知瀏覽器正在下載的文件類型。然后瀏覽器查找與該MIME類型一致的插件，如果有就使用，如果沒有則會(huì)顯示一條錯(cuò)誤信息，并且提示用戶下載該插件。2．<OBJECT>標(biāo)記該標(biāo)記可以使網(wǎng)頁中包含JavaApple、視頻和音頻等多媒體和其他文件。當(dāng)瀏覽器遇到<OBJECT>標(biāo)記時(shí)，會(huì)加載相應(yīng)的文件并根據(jù)該標(biāo)記包含屬性的值來顯示。

1.7“HTML技術(shù)演示”網(wǎng)頁

“HTML技術(shù)演示”網(wǎng)頁的顯示效果如圖1-7-1所示。在該網(wǎng)頁中列出了與前面制作的各個(gè)網(wǎng)頁的鏈接文字。單擊其中任意一個(gè)鏈接文字即可調(diào)出相應(yīng)的頁面。

圖1-7-1“HTML技術(shù)演示”網(wǎng)頁的顯示效果1.7“HTML技術(shù)演示”網(wǎng)頁

1.7.1鏈接文件使用的HTML標(biāo)記鏈接也叫超文本鏈接，在網(wǎng)頁中加入超文本鏈接，就是通過單擊一部分文字、圖像或圖像中的一個(gè)區(qū)域，即可調(diào)出另一個(gè)網(wǎng)頁或本網(wǎng)頁的另一部分內(nèi)容。HTML文件的鏈接是通過鏈接標(biāo)記<A>……</A>來實(shí)現(xiàn)的。在<A>標(biāo)記中除標(biāo)記名“A”外還包括一些屬性，HREF是鏈接標(biāo)記中一個(gè)最常用的屬性。該屬性用于指出所要鏈接的文件的路徑（或目錄）和名稱或URL，其簡(jiǎn)單的結(jié)構(gòu)形式為：<AHREF=“被鏈接的文件名或URL”>熱字<A>所有寫在起始標(biāo)記<A>和結(jié)束標(biāo)記</A>之間的文字構(gòu)成一個(gè)實(shí)際的鏈接，當(dāng)網(wǎng)頁在瀏覽器內(nèi)顯示時(shí)，這些文字將以藍(lán)色高亮度或帶有下劃線的形式出現(xiàn)。如果需要鏈接的文件都放在本機(jī)磁盤上，則這種鏈接稱為本地鏈接，它不必連接網(wǎng)絡(luò)，只要本地的機(jī)器上有一個(gè)編輯器和瀏覽器就足夠了。如果需要鏈接的文件在網(wǎng)絡(luò)上，則需要網(wǎng)絡(luò)鏈接，網(wǎng)絡(luò)鏈接需要知道網(wǎng)址（URL）。

1.7“HTML技術(shù)演示”網(wǎng)頁

1.7.2使用圖像或動(dòng)畫的鏈接使用圖像或動(dòng)畫的鏈接，就是在單擊圖像或動(dòng)畫后，即可調(diào)出與之鏈接的網(wǎng)頁文件或本網(wǎng)頁中的一段內(nèi)容。建立圖像或動(dòng)畫的鏈接的方法是在鏈接標(biāo)記<A>……</A>的中間加入一個(gè)<IMGSRC>標(biāo)記，其格式如下：<AHREF="被鏈接的網(wǎng)頁的文件名"><IMGSRC="圖像或動(dòng)畫的文件名"></A>加入了鏈接的圖像或動(dòng)畫會(huì)自動(dòng)產(chǎn)生一個(gè)外框，以示與一般的圖像或動(dòng)畫的區(qū)別。

1.8“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁

世界自然和文化遺產(chǎn)是全人類的一個(gè)寶庫，其中又以“文化遺產(chǎn)”最為珍貴。了解我們周圍的文化遺產(chǎn)才能更好地進(jìn)行保護(hù)，在“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁中顯示了我國(guó)部分文化遺產(chǎn)，如圖1-8-1所示。由于網(wǎng)頁中的內(nèi)容比較多，在一個(gè)窗口內(nèi)不能完全顯示，所以在網(wǎng)頁中增加了“錨點(diǎn)”的鏈接。在標(biāo)題下面列出了網(wǎng)頁中的遺產(chǎn)名稱，單擊其中任意一個(gè)熱字即可鏈接到相應(yīng)的位置。例如，單擊“天壇”熱字后，網(wǎng)頁的顯示效果如圖1-8-2所示。

1.8“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁

圖1-8-1

“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁的顯示效果

圖1-8-2

單擊“天壇”熱字后網(wǎng)頁的顯示效果

1.8“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁

1.8.1在同一個(gè)網(wǎng)頁文件中建立鏈接的HTML標(biāo)記在同一個(gè)網(wǎng)頁文件中建立鏈接，需要做以下工作。（1）在文件的前面需要列出鏈接的標(biāo)題熱字，它們相當(dāng)于文章的目錄。同時(shí)將這些熱字與相應(yīng)的錨名（即定位名）建立鏈接。所謂“錨名”是指網(wǎng)頁中能被鏈接到的一個(gè)特定位置。建立鏈接時(shí)，要在錨名前加一個(gè)“#”符號(hào)，其格式是：<AHREF="#錨名">標(biāo)題名字</A>（2）為被鏈接的內(nèi)容命名，該名字叫“錨名”。其格式是：<ANAME="#錨名">錨名的定義應(yīng)放在相應(yīng)標(biāo)題對(duì)應(yīng)的內(nèi)容前面。

1.8“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁

1.8.2建立電子郵件鏈接如果將HREF屬性值指定為“mailto:電子郵件地址”，即可獲得電子郵件鏈接的效果。例如，使用下面的HTML代碼可以設(shè)置電子郵件的超鏈接：<AHREF="mailto:tingdudu@163.com">作者的郵箱</A>當(dāng)瀏覽網(wǎng)頁的用戶單擊了指向電子郵件的超鏈接后，系統(tǒng)將自動(dòng)啟動(dòng)郵件客戶程序（對(duì)于安裝了Windows98/2000以上操作系統(tǒng)的計(jì)算機(jī)，默認(rèn)時(shí)啟動(dòng)OutlookExpress），并將指定的郵件地址填寫到“收件人”欄中，用戶可以編輯并發(fā)送該郵件，如圖1-8-3所示。圖1-8-3OutlookExpress發(fā)送電子郵件的界面如果是第一次啟動(dòng)OutlookExpress，會(huì)要求進(jìn)行軟件設(shè)置。

1.8“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁

圖1-8-3OutlookExpress發(fā)送電子郵件的界面1.9“Flash技術(shù)說明”網(wǎng)頁

“Flash技術(shù)說明”網(wǎng)頁的顯示效果如圖1-9-1所示。該網(wǎng)頁被分為了3個(gè)部分，其中，網(wǎng)頁的頂部顯示了網(wǎng)頁的標(biāo)題，左邊顯示了一些技術(shù)名稱，右邊顯示了一段引導(dǎo)用戶的文字。單擊頁面左邊列出的技術(shù)名稱熱字，即可在右面的頁面中顯示出相應(yīng)的技術(shù)說明，如圖1-9-2所示。

圖1-9-1

“Flash技術(shù)說明”網(wǎng)頁的顯示效果

圖1-9-2

單擊“選取對(duì)象”熱字的網(wǎng)頁

1.9“Flash技術(shù)說明”網(wǎng)頁

1.9.1設(shè)置框架集和修飾框架集1．設(shè)置框架框架就是把一個(gè)網(wǎng)頁頁面分成幾個(gè)單獨(dú)的區(qū)域（即窗口），每個(gè)區(qū)域就像一個(gè)獨(dú)立的網(wǎng)頁，可以是一個(gè)獨(dú)立的HTML文件?？蚣芸梢詫?shí)現(xiàn)在一個(gè)網(wǎng)頁內(nèi)顯示多個(gè)HTML文件。對(duì)于一個(gè)有n個(gè)區(qū)域的框架網(wǎng)頁來說，每個(gè)區(qū)域有一個(gè)HTML文件，整個(gè)框架結(jié)構(gòu)也是一個(gè)HTML文件，因此該框架網(wǎng)頁有n+1個(gè)HTML文件。設(shè)置框架需要使用標(biāo)記<FRAMESET>……</FRAMESET>來取代<BODY>……</BODY>標(biāo)記。<FRAMESET>標(biāo)記有兩個(gè)屬性：ROWS="n1,n2,n3……"：縱向設(shè)置框架；COLS="n1,n2,n3……"：橫向設(shè)置框架。其中，n1，n2，n3為開設(shè)的框架占整個(gè)頁面的百分?jǐn)?shù)。

1.9“Flash技術(shù)說明”網(wǎng)頁

2．修飾框架修飾窗口需要使用<FRAME>標(biāo)記，它在<FRAMESET>……</FRAMESET>標(biāo)記之間。<FRAME>標(biāo)記有6個(gè)屬性，介紹如下。（1）SRC="URL"屬性：用于鏈接一個(gè)HTML文件，如果沒有該屬性則窗口內(nèi)無內(nèi)容。（2）NAME="窗口名稱"屬性：用于給窗口命名。（3）MARGINWIDTH=n屬性：用于控制窗口內(nèi)的內(nèi)容與窗口左右邊緣的間距。n為像素個(gè)數(shù)，默認(rèn)值為1。（4）MARGINHEIGHT=n屬性：用于控制窗口內(nèi)的內(nèi)容與窗口上下邊緣的間距。n為像素個(gè)數(shù)，默認(rèn)值為1。

1.9“Flash技術(shù)說明”網(wǎng)頁

1.9.2窗口間的鏈接實(shí)現(xiàn)窗口間的鏈接需要使用TARGET屬性。TARGET屬性可以在HTML的多個(gè)標(biāo)記內(nèi)使用。（1）在<A>標(biāo)記中使用的格式如下：<AHREF="URL"TARGET="窗口的名字">如本實(shí)例中，左邊窗口加載的HTML文件為1-9LEFT.html，右邊窗口加載的HTML文件為1-9-0.html。左邊窗口中有5行熱字。如果單擊左邊窗口內(nèi)的“選取對(duì)象”熱字，則可以在右邊窗口（名字為RIGHT）內(nèi)顯示出1-9-1.html文件的內(nèi)容。如果單擊左邊窗口內(nèi)的“調(diào)整圖像大小”熱字，則可以在右邊窗口內(nèi)顯示出1-9-2.html文件的內(nèi)容。單擊下面的熱字和單擊前面兩個(gè)熱字的效果基本相同，只是調(diào)出的HTML文件不一樣。

1.10“公告板”網(wǎng)頁

“公告板”網(wǎng)頁的顯示效果如圖1-10-1所示。在網(wǎng)頁中包含一個(gè)縱向滾動(dòng)的文字公告板，其中的文字不斷向上滾動(dòng)，當(dāng)鼠標(biāo)移到文字上面時(shí)，文字停止?jié)L動(dòng)，當(dāng)鼠標(biāo)移開時(shí)文字繼續(xù)滾動(dòng)。

圖1-10-1“公告板”網(wǎng)頁的顯示效果1.10“公告板”網(wǎng)頁

1.10.1什么是DHTML技術(shù)動(dòng)態(tài)DHTML（DynamicHTML，DHTML）是HTML、CSS和客戶端腳本的一種集成。DHTML技術(shù)在原有技術(shù)的基礎(chǔ)上，可分為3個(gè)方面：一是HTML，也就是頁面中的各種頁面元素對(duì)象，它們是被動(dòng)態(tài)操作的內(nèi)容；二是CSS，CSS屬性也是動(dòng)態(tài)操作的內(nèi)容，從而獲得動(dòng)態(tài)的格式效果；三是客戶端腳本（如JavaScript），它實(shí)際操縱Web頁上的HTML和CSS。使用DHTML技術(shù)，可以使網(wǎng)頁設(shè)計(jì)者創(chuàng)建出能夠與用戶交互并包含動(dòng)態(tài)內(nèi)容的頁面。實(shí)際上，DHTML技術(shù)使網(wǎng)頁設(shè)計(jì)者可以動(dòng)態(tài)操縱網(wǎng)頁上的所有元素——甚至是在這些頁面被裝載以后的一種語言。利用DHTML技術(shù)，網(wǎng)頁設(shè)計(jì)者可以動(dòng)態(tài)地隱藏或顯示內(nèi)容、修改樣式定義、激活元素以及為元素定義行為。DHTML技術(shù)還可以使網(wǎng)頁設(shè)計(jì)者在網(wǎng)頁上顯示外部信息，方法是將元素捆綁到外部數(shù)據(jù)源（如文件和數(shù)據(jù)庫）上。所有這些功能都可以用瀏覽器完成而無需請(qǐng)求Web服務(wù)器，同時(shí)也無需重新裝載網(wǎng)頁。這是因?yàn)橐磺泄δ芏及贖TML文件中，隨網(wǎng)頁一起下載到瀏覽器端?？梢?，DHTML技術(shù)是一種非常實(shí)用的網(wǎng)頁設(shè)計(jì)技術(shù)。實(shí)際上，DHTML技術(shù)早已廣泛地應(yīng)用到了各類網(wǎng)站中，成為高水平網(wǎng)頁必不可少的組成部分。

1.10“公告板”網(wǎng)頁

1.10.2DHTML技術(shù)應(yīng)用舉例1．圖像顯示特效使用記事本軟件新建一個(gè)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“公告板”網(wǎng)頁

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“公告板”網(wǎng)頁

保存后在瀏覽器中打開該文件，即可查看“圖像特效”網(wǎng)頁的顯示效果，如圖1-10-2所示。初始時(shí)網(wǎng)頁中圖像的顏色較淡，當(dāng)光標(biāo)移到圖像上時(shí)圖像顯示為正常狀態(tài)。

圖1-10-2“圖像特效”網(wǎng)頁的顯示效果1.10“公告板”網(wǎng)頁

2．跟隨鼠標(biāo)的蝴蝶使用記事本軟件新建一個(gè)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“公告板”網(wǎng)頁

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“公告板”網(wǎng)頁

<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“公告板”網(wǎng)頁

</SCRIPT></BODY></HTML>保存后在瀏覽器中打開該文件，即可查看“跟隨鼠標(biāo)的蝴蝶”網(wǎng)頁的顯示效果，如圖1-10-3所示。網(wǎng)頁中飄動(dòng)著兩只蝴蝶，隨著鼠標(biāo)的移動(dòng)而飛舞。

圖1-10-3“跟隨鼠標(biāo)的蝴蝶”網(wǎng)頁的顯示效果1.11“水中人”網(wǎng)頁

“水中人”網(wǎng)頁是利用ANFY網(wǎng)頁特效工具制作的，其顯示效果如圖1-11-1所示。可以看到，網(wǎng)頁中的圖像被分為兩個(gè)部分，上半部分為一幅正常的圖像，下半部分是將上面的圖像垂直翻轉(zhuǎn)并增加了“水波紋”的效果，感覺就像是人站在了湖邊，水中還不斷顯示著倒影動(dòng)畫。1.11.1ANFY軟件介紹ANFY是國(guó)外一個(gè)著名的網(wǎng)頁特效制作軟件，利用ANFY可以制作出數(shù)十種Java網(wǎng)頁特效，例如，鼠標(biāo)軌跡水紋效果等。通過圖1-11-2可以看出，它的工作界面是一個(gè)簡(jiǎn)單易懂、賦有親和力的工作界面。ANFY1.4.5中文版中包括了40個(gè)Javaapplets程序及一個(gè)被稱為ANFY向?qū)У拇翱诔绦?。在“水中人”網(wǎng)頁實(shí)例中，首先選擇了“圖像效果”