01第一章網(wǎng)頁設(shè)計(jì)基礎(chǔ)-網(wǎng)頁設(shè)計(jì).

1、網(wǎng)頁設(shè)計(jì)與制作黃新榮關(guān)于本課學(xué)時(shí)安排：72學(xué)肘，每周兩節(jié)課、兩節(jié)上機(jī)操作 ®教材：網(wǎng)頁設(shè)計(jì)與制作高等教育出版社.IHm.漫游信息世界WWW 收發(fā)電子郵件E-mail 搜索信息Gopher 傳輸文彳一FTP 網(wǎng)上交流BBS 電子商務(wù)Ebusiness.I Hhi.1.1.1 Internet 基礎(chǔ)S 3Internet的主要功能S5astma1.1.1 Internet 基礎(chǔ)© 4. IP地址與域名 TCP/IP 協(xié)議 TCP/IP仃ransmite Control ProtO8l 傳輸控制協(xié)議/Internet P rotocoirej際協(xié)議）己成為計(jì)算機(jī)網(wǎng)絡(luò)的一套工業(yè)標(biāo)冷

2、協(xié)議 Internet網(wǎng)之所以能將廣闊范圍內(nèi)各種各樣網(wǎng)絡(luò)系統(tǒng)的計(jì)算機(jī) 互聯(lián)起來，主耍是因?yàn)閼?yīng)用了 “統(tǒng)天下”的TCP/IP協(xié)議TCP/IP協(xié)議不是一個(gè)協(xié)議，而是一組協(xié)議構(gòu)成的.可以把它 們分成三層：«網(wǎng)絡(luò)協(xié)議：負(fù)賁將消息從一個(gè)地方傳送到另一個(gè)地方 （IP）®傳輸協(xié)議：保證被傳送信息的完整性（TCP）«應(yīng)用穢丿討辦議：勺絡(luò)傳輸m東西轉(zhuǎn)換成我們能夠識別的結(jié)yt、 Ft1.1.1 Internet 基礎(chǔ)s 4IPi也址與域名TtI NFT| FTP HTTP | RP | NFS |窗F IF>i«towKTIMKMttUOP)tf«IDUru

3、DiB82JPPPLHPKS2J29 4.SI1.1.1 Internet 基礎(chǔ)IP地址與域名IP (Internet Protocol) Interne鏗夠彊各個(gè)不冋類型的0絡(luò)互聯(lián)的主要0餐在于它便用的一個(gè)最基*的必議-IP (Internet ProtocolJ.ajpg際戚 IP猜確地定義了分組的格式，丙此耳聯(lián)網(wǎng)中的分組也被稱為 iPStSfeia IP也越定了在互理網(wǎng)中每臺計(jì)易機(jī)的地站以使IP數(shù)包能順 利傳送到目的計(jì)負(fù)機(jī)TCP (Transmission Control Protocol)廳養(yǎng)富賈番咼翌番碰要解決數(shù)據(jù)包丟失后的重發(fā)和重樣數(shù)抵包 TCP負(fù)賁把數(shù)転$成若干$數(shù)報(bào)#分別加上頭

4、I報(bào)頭上冇ffl 購的編號.以保證數(shù)據(jù)接端每將數(shù)城還爪為求的式 IP在莓 個(gè)報(bào)頭上也加上接收須主軌的4址,使»«屢找到目己耍去的地方 如果傳輸過程中出現(xiàn)S據(jù)丟失、數(shù)失S粵宿況 tbp會要求數(shù)據(jù) 朿新傳§1.1.1 Internet 基礎(chǔ)® 4. IP地址與域名9 IP地址S Internet為網(wǎng)上的每個(gè)網(wǎng)絡(luò)和每臺主機(jī)都分配一個(gè)唯一的地址. 稱為IP地址每個(gè)主機(jī)的IP地址都是由32比特，即4個(gè)字節(jié)組成 的為了便于用戶閱讀和理解，通常采用“'點(diǎn)分十進(jìn)制表示方法” 表示-每個(gè)字節(jié)為一部分.中間用點(diǎn)號分隔開來如 202J17.96.12就是西北大學(xué)網(wǎng)絡(luò)中

5、心WEB脈務(wù)器的IP地址.每 個(gè)IP地址又可分為兩部分-網(wǎng)絡(luò)號表示購絡(luò)規(guī)模的大小主機(jī)號 表示網(wǎng)絡(luò)中主機(jī)的地址編號-按照網(wǎng)絡(luò)規(guī)模的大小，IP地址可以 分為A、B. Cs Ds E五類.其中A. B、C類是三種主要的類型 地址，1.1.1 Internet 基礎(chǔ)9 4. IP地址與域名1 8162432A類|0|網(wǎng)絡(luò)號I機(jī)器號0|網(wǎng)絡(luò)號I機(jī)器號B類C類|1|1間網(wǎng)轄機(jī)器號A典1677214B典65534C典2540JL0J-127e255.255.25412&0O1-54192Q0-223255255254 4IP地址與域名 a域名DNS,即'Domain

6、 Name System' 中文通常翻 譯成“域名系統(tǒng)"勺域名是為方便人們的記憶而設(shè)S的。最高層域名有以機(jī)構(gòu)區(qū)分的，也有以地域區(qū)分的 域名是一種資源.它需要向管理機(jī)構(gòu)申1.1.1 Internet 基礎(chǔ) 4IP地址與域名 a域名DNS,即'Domain Name System' 中文通常翻 譯成“域名系統(tǒng)''勺域名是為方便人們的記憶而設(shè)S的。最高層域名有以機(jī)構(gòu)區(qū)分的，也有以地域區(qū)分的 域名是一種資源.它需要向管理機(jī)構(gòu)申 4IP地址與域名a域名DNS采用層次結(jié)構(gòu).入網(wǎng)的每臺主機(jī) 都可以有一個(gè)類似下面的域名：主機(jī)名機(jī)構(gòu)名網(wǎng)絡(luò)名頂層域名WWW. nw

7、u. edu. cn從左到右，域的范圍變大具有匕IP地址好記1.1.1 Internet 基礎(chǔ) 4IP地址與域名a域名奩 J二A IH仏世£噩9 4IP地址與域名a域名®l Internet協(xié)會規(guī)定機(jī)構(gòu)性域名有七類，分別為:COM:商業(yè)機(jī)構(gòu)組織EDU;教育機(jī)構(gòu)組織 INT:國際機(jī)構(gòu)組織 GOV:政府機(jī)構(gòu)組織 MIL:軍事機(jī)構(gòu)組織 NET:網(wǎng)絡(luò)機(jī)構(gòu)組織 ORG:非贏利機(jī)構(gòu)組織CN中國 US美國JP日本FR法國AU澳大利亞CA加$大UK英國©1.1.1 Internet 基礎(chǔ)9 4IP地址與域名a域名0地理性國別域名，對于不同的國家或地區(qū)有不同的名 稱：©&

8、#169;©©1.1.2 Internet服務(wù)概述1.1.1 Internet 基礎(chǔ)® 4. IP地址與域名中Wttfif科研Mwwu.cemetxduxn202J 12.0.36c清華大學(xué)www.i'I66JIL25X2B北京大學(xué)wuu162 IOS 129 30B北皇抑見大學(xué)bupt .cdu .cn20138-1JM-81c華【I珅L大學(xué)www.gzncl .cdu .cn2O2JI2J738c兩安交通大學(xué). 52O2J17JJ3c丙北人7202l796J2IIai1.1.1 Internet 基礎(chǔ)® 5. URLUR

9、L是通用資源定位(Uniform Resource Locator)的簡 寫，國際互聯(lián)網(wǎng)上的每一個(gè)WEB頁®都右自己的URL. 如微軟的期址是：http:/www.microsoft.8m/.用戶通過 在瀏覽器中指定URLW來訪問不同的internet資源， URL由訪問方法，®務(wù)器名和文檔位置三個(gè)部分組成： http:/www.xaonline.8m/ftp:/ Newsy/.edu-cn/® 1.文件傳輸(File Transfer Protocol)服務(wù)63 FTP服務(wù)是建立在File Transfer Protocol協(xié)議基礎(chǔ)之 上的文件傳輸服務(wù)，F(xiàn)TP服

10、務(wù)可以在兩臺遠(yuǎn)程計(jì)算機(jī) 之間傳輸文件，網(wǎng)絡(luò)上存在著大量的共享文件，獲得這 些文件的主要方式是FTP, FTP服務(wù)是基于TCP的連 接，端口號為21。1.1.2 Internet服務(wù)概述® 1.文件傳輸(File Transfer Protocol)服務(wù)FTPS戶機(jī)客戶機(jī)illIKb* IFTPFTP服務(wù)器服務(wù)器® 2遠(yuǎn)程登剝Telnet)服務(wù)® Telnet服務(wù)用來將一臺計(jì)算機(jī)連接到遠(yuǎn)程計(jì)算機(jī) 上，使之相當(dāng)于遠(yuǎn)程計(jì)算機(jī)的一個(gè)終端。Telnet 為Internet用戶共享網(wǎng)絡(luò)主機(jī)資源而開發(fā)的終謊 仿真程序，簡單地說，使用Telnet可以使本地用 戶登錄到網(wǎng)絡(luò)主機(jī)上而

11、不需要考慮終端的兼容性。1.1.2 Internet服務(wù)概述® 3.電子郵件(E-mail)服務(wù)® E-mail服務(wù)是指服務(wù)器能夠在Internet上發(fā)送和 接收郵件。它為Internet用戶之間提供了方便 快捷、便宜的通信手段。由于它對通信設(shè)施和速 度的要求較低，對我國用戶比其Internet服務(wù)有 更大的實(shí)用性。用戶先向Internet服務(wù)提供商申 請一個(gè)電子郵件地址，再使用一個(gè)合適的電子郵 件客戶程序，就可以向其它電子信箱發(fā)E-mail, 也可接收到來自他人的1.1.2 Internet服務(wù)概述d 4. World Wide Web (WWW)服務(wù)0 WWW又稱萬維網(wǎng)

12、 Web.是一種采用超文本技術(shù)逬疔信息發(fā)布和檢 索的信息服務(wù).WWW信息在Internet上的傳播遵循HTTP協(xié)議的規(guī) 定。WWW上的信息均是按頁面進(jìn)行組織稱為WQb頁或者網(wǎng)頁。 S個(gè)頁面由S文本標(biāo)記語言(HTML)來編寫。頁面中的標(biāo)記 (TAG)用于i兌明頁面的編排格式，頁面構(gòu)成元素等。頁®中還包 含指向其他頁面(可能位于其他主機(jī)上)鏈接地址(anchor)。存 放Web頁面的計(jì)算機(jī)稱為Web站點(diǎn)或WWWgg務(wù)器。每個(gè)Web站點(diǎn) 都有一個(gè)主頁(Homepage).它是該Web站點(diǎn)的信息目錄表或主 菜單。萬維網(wǎng)實(shí)際上是一個(gè)由千千萬萬個(gè)頁面組成的信息網(wǎng)。用戶 霜要使用特定的程序來索取頁

13、面和瀏覽信息-這類程序被稱為瀏覽 gg (Browser,如Netscape、Internet Explorer) c1.1.3 World Wide Web的體纟與特點(diǎn)a Web是World Wide Web (WWW,世界資訊網(wǎng)或萬維網(wǎng))的簡稱，它是因特網(wǎng)上的一種信息服務(wù)系統(tǒng)，并逐漸成為集成其他信息服務(wù)的門戶。1.1.3 World Wide Web的體糸與特點(diǎn)« 1 Web的起源011969年.美國國防部高級研究計(jì)劃署(ARPA)建立ARPANET, 這是Internet的雛形。S11982年捉出TCP/IP協(xié)議SI986年，美國國家科學(xué)基金網(wǎng)NFSNET取代ARPANET,成

14、為 Internet的圭干網(wǎng)r5 t格式和超鏈接3M989年，歐洲粒子物理實(shí)驗(yàn)室(CERN) 6<|Tim Bemers-Lee (蒂 姆伯納斯李)構(gòu)思了Web (萬細(xì)網(wǎng)) Tim Berners-Lee 1955 年6月8R出生于英國倫敦，牛津大學(xué)畢業(yè)的物理學(xué)家，八十年代 任職于瑞士日內(nèi)瓦的CERN.當(dāng)時(shí)面向的任務(wù)是：為從事粒子物 理研究的各國硏究人員提供一種快速查找論文和圖片的方法 Web使用HT血語言來組織文件.HTML語言是從SGML導(dǎo)出的語 是SGML的一個(gè)子集-HTML使用固定的標(biāo)簽集來定義文檔的1.1.3 World Wide Web的體糸與特點(diǎn)1993年美國國家超級計(jì)算應(yīng)

15、用中心(NCSA)的Marc Andereessen發(fā)布®形專0由為覽韶Mosaic (鑲嵌物)<,1994年.Marc Andereessen離開NCSA創(chuàng)建了Netscape通信公司o1994年.歐洲粒子物理實(shí)驗(yàn)室(CERN)和麻省理工學(xué)院(MIT)簽 訂協(xié)議成立World Wide Web Consortium (gDW3C.網(wǎng)址g ).由Tim Berners*Lee任主營。1995年.Netscape公開上市在募股書中聲明：在可預(yù)見的的未來 不期望盈利.但投資者認(rèn)為它星下一個(gè)微軟于是買下了 1.5億美元 的股票。W3C標(biāo)準(zhǔn)c1998年4月.W3C發(fā)

16、布HTML4O 新增<style>. <schpt>等標(biāo)記。5 月.接受CSS2-0 (Cascading Style Sheets, S疊樣式表單)為1998年，W3C發(fā)布XML1.0,示淮(Extensible Markup Language 可 r原勺二己語言) 說區(qū)文比SGML 500頁的文檔簡ml Eiliaii1.1.3 World Wide Web的體系與特點(diǎn)33. Web的結(jié)構(gòu)II np求HTT 呻應(yīng)1.1.3 World Wide Web的體系與特點(diǎn)Web頁面簡單易用，推動了因特網(wǎng)的普及，加快 了世界信息化的進(jìn)程。a Web頁面標(biāo)準(zhǔn)通用，簡化了網(wǎng)絡(luò)軟件

17、的開發(fā)，引 起了軟件業(yè)的革命。S如今，Web技術(shù)可以方便地集成信息發(fā)布、文件 下載、電子郵件、討論組、數(shù)據(jù)庫檢索、視頻通 信、網(wǎng)上聊天和互動游戲等功能，成為各類社會 組織強(qiáng)化信息管理工作的有力工具，也成為個(gè)人 生活和娛樂的重要組 璽陸1.2.1網(wǎng)頁的概念網(wǎng)頁與網(wǎng)站刖從網(wǎng)站的角度講，網(wǎng)頁是網(wǎng)站的基本信息單位，一個(gè) 網(wǎng)站通常由多個(gè)網(wǎng)頁組成，這些網(wǎng)頁之間使用鏈接地 址(anchor)相互連接在一起，成一個(gè)完敕的網(wǎng)站， 用戶能夠通過點(diǎn)擊鏈接地址轉(zhuǎn)換到其他的頁面。網(wǎng)站 存儲在Web服務(wù)器上。當(dāng)用戶訪問一個(gè)網(wǎng)站時(shí)，該網(wǎng) 站中首先被打開的頁面稱為首頁或主頁(Homepage)。 主頁是一種特殊的網(wǎng)頁，它專指

18、一個(gè)網(wǎng)站的首頁。1.2.1網(wǎng)頁的概念® 1.網(wǎng)頁與網(wǎng)站0從組成元素的角度講，網(wǎng)頁是由文本、圖片和超鏈接 等多種對象構(gòu)成的多媒體頁面，包含有相關(guān)的文本、 圖像、聲音、動畫、視頻以及腳本命令等。新浪主頁 上除了文本、圖片、超鏈接之外，還有Flash、G1F動 畫、文本框、按鈕等多種對象.0網(wǎng)頁一般由HTML文件組成，其中，位于特定計(jì)算機(jī)的 特定目錄中，其位置可以根據(jù)URL確定。S按照網(wǎng)頁文件在Web內(nèi)容交互方式的不同，可以將網(wǎng) 頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁1.2.1網(wǎng)頁的概念1 HTML和HTTP9 HTML稱為超文本標(biāo)記語言(hypertext markup language),它是由W3

19、C委員會基于SGML (標(biāo)準(zhǔn)通 用標(biāo)記語言，Standard General Markup Language) 的基礎(chǔ)之上提出，專用于Web頁的描述語言°1.2.1網(wǎng)頁的概念1. HTML和HTTP特征。® HTML語言使用描述性標(biāo)記符(稱為標(biāo)簽，Tag) 來指明文本的不同內(nèi)容。HTML就是使用標(biāo)記 (tags)表示各種元素.用于指示瀏覽器以什么方 式顯示信息。標(biāo)簽描述了文本的結(jié)構(gòu)，它向?yàn)g覽 器提供該文本的格式化信息，以傳送文本的外觀用HTML語言編寫的頁面是普通的文本文件 (ASCII),不含任何與操作系統(tǒng)和計(jì)算機(jī)硬件 相關(guān)的信息，所以HT件可以被任何文本編1.2.1網(wǎng)頁

20、的概念1. HTML和HTTP HTML文本包含兩種信息：頁面本身的文本和表示頁 面元素、結(jié)構(gòu)、格式、及其它超文本鏈接的HTMI4示 簽。編制一個(gè)HTML頁面就是使用一些HTML規(guī)定的 標(biāo)記，將各個(gè)元素要顯示的格式、風(fēng)格、位置等等給 以說明。不同標(biāo)記的使用、搭配以及嵌套、鏈接，就 構(gòu)成了不同風(fēng)格的網(wǎng)頁。因此，正確地使用HTML中 的標(biāo)記是建立HTML頁面的關(guān)鍵。1.2.1網(wǎng)頁的概念1. HTML和HTTPS3當(dāng)用戶在客戶端使用瀏覽器對網(wǎng)頁進(jìn)行訪問的時(shí)候， 服務(wù)器首先返回的是HTML頁面，在這個(gè)頁面中包含 了超文本和超媒體的內(nèi)容的HTML®言描述。瀏覽器 得到這個(gè)HTML頁面之后，將其

21、中的HTML語言描述 的超文本和超媒體轉(zhuǎn)換成相應(yīng)的文字和各種媒體，設(shè) 定它們的超鏈接，并將它們顯示在適當(dāng)?shù)奈籋上。人上 Kn* 1*1. HTML和HTTP田需要注意的是，各種媒體的內(nèi)容并不保存在HTML文件中，而是使用給出媒體文件的URL的方式。瀏覽器 在將HTM供換為各種媒體的時(shí)候，首先將媒體所對 應(yīng)的URL®出，通過URL從服務(wù)器獲取到媒體文件， 然后才將其顯示在網(wǎng)頁上。經(jīng)過轉(zhuǎn)換的網(wǎng)頁中的超文 本和超媒體能夠通過點(diǎn)擊的方式跳轉(zhuǎn)到其他的超文本 或超媒體之上。通過這種方式，WWW將各種信息組 成一個(gè)信息的海洋。1.2.1網(wǎng)頁的概念1. HTML和HTTPS3 HTTP的全稱是Hyp

22、ertext Transfer Protocol.即超文 本傳輸協(xié)議，它建立在TCP/IP協(xié)議的應(yīng)用層之上的一 種面向?qū)ο蟮膮f(xié)議。HTTP協(xié)議是基于請求/響應(yīng)范 式的。其一般實(shí)現(xiàn)過程為：一個(gè)客戶機(jī)與服務(wù)器建立 連接后，發(fā)送一個(gè)謂求給服務(wù)器；服務(wù)器接到請求后, 給予相應(yīng)的響應(yīng)信息，響應(yīng)信息中包含客戶機(jī)所請求 的資源的具體內(nèi)容。.I Hl.1.2.2網(wǎng)頁的組成S 1 超文本超媒體與超連接超媒體(hypermedia)進(jìn)一步擴(kuò)展了超文本所鏈接的 信息類型。他利用集成化的方法將多種媒體的信息聯(lián) 系在一起。用戶不僅可以從一個(gè)文本跳到另一個(gè)文本, 而旦可以激活一段音樂，顯示一個(gè)圖形，播放一段動 畫。超媒體

23、文件就是一種文字、影像、圖片、動畫、 聲音綜合在一起的文件。從組成上來描述超文本，可以采用如下公式：超媒體=媒體+超鏈接1.2.2網(wǎng)頁的組成2網(wǎng)頁的組成方式當(dāng)用戶在客戶錨使用瀏覽器對咫頁逬廳訪問的肘候-腹務(wù)器首先返 回的是HTML頁面在這個(gè)頁面O包含了超文本和苗娛體的內(nèi)容的 HTML語S描述。瀏覽器得到這個(gè)HTML頁面之后.將其中的HTML 語言描述的超文本和超媒體55渙成，目應(yīng)的文字和各種媒體.設(shè)定它 們的超鏈接并將它們先是在適當(dāng)?shù)奈恢蒙?。S?要注意的是.各種媒體的內(nèi)容幷不保存在HTML文件中.而是® 用給出媒體文件的URL®方式。汛覽器在將HTMLfS換為各種媒體 的時(shí)候.首先將媒體所對應(yīng)的URL取岀通過URL從服務(wù)器獲取到 媒體文件然后才將其顯示在網(wǎng)頁上。經(jīng)過轉(zhuǎn)換的網(wǎng)頁中的超文本 和超媒體能園通過點(diǎn)擊的萬式0L轉(zhuǎn)到其他的超文本或S媒體之上C 通過這種方式