緒論 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)簡(jiǎn)介 教學(xué)內(nèi)容1） Internet 先驅(qū)J.C.R Licklider ：一位擁有心理學(xué)博士學(xué)位的心理學(xué)教授，在1966年被請(qǐng)到美國(guó)國(guó)防高級(jí)研究計(jì)劃局來(lái)領(lǐng)導(dǎo)

緒論 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)簡(jiǎn)介 教學(xué)內(nèi)容

1） Internet 先驅(qū)

J.C.R Licklider ：一位擁有心理學(xué)博士學(xué)位的心理學(xué)教授，在1966年被請(qǐng)到美國(guó)國(guó)防高級(jí)研究計(jì)劃局來(lái)領(lǐng)導(dǎo)指令和控制技術(shù)的研究工作。

Larry Roberts：被尊稱為“阿帕網(wǎng)之父”，從1966年開始支出阿帕網(wǎng)的技術(shù)工作。

Tim Berners-Lee ：“萬(wàn)維網(wǎng)之父”，開發(fā)了第一個(gè)所見即所得的超文本瀏覽器/編輯器World Wide Web ，通過一種超文本方式，把網(wǎng)絡(luò)上不同計(jì)算機(jī)內(nèi)的信息有機(jī)地結(jié)合在一起，并且可以通過超文本傳輸協(xié)議（HTTP ）從一臺(tái)Web 服務(wù)器轉(zhuǎn)到另一臺(tái)Web 服務(wù)器上檢索信息。 什么是超文本？

超文本（Hypertext ）基本上是一般的文本文件，只是在文本文件中另含有鏈接（Link ）及其他文件的引用（Pointer ），我們只要單擊這些引用，即可鏈接其他相關(guān)文件。

2） Web 的歷史

ML ：Markup Language，標(biāo)記語(yǔ)言

什么是標(biāo)記語(yǔ)言？

特指用一系列約定好的標(biāo)記來(lái)對(duì)電子文檔進(jìn)行標(biāo)記，來(lái)實(shí)現(xiàn)對(duì)電子文檔的語(yǔ)義、結(jié)構(gòu)、格式的定義。這些標(biāo)記必須能夠和容易的和內(nèi)容相區(qū)分，易于識(shí)別。標(biāo)記語(yǔ)言必須定義什么樣的標(biāo)記是允許的，什么樣的標(biāo)記是必須的，標(biāo)記是如何與文檔的內(nèi)容向區(qū)分的，以及標(biāo)記的含義是什么。 GML ：①Generalized Markup Language，通用標(biāo)記語(yǔ)言; ②Geography Markup Language，地理標(biāo)記語(yǔ)言

GML 標(biāo)準(zhǔn)化后出現(xiàn)了SGML ：Standard Generalized Markup Language，標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言

SMIL ：Synchronized Multimedia Integration Language，同步多媒體集成語(yǔ)言 CML : Chemical Markup Language，化學(xué)標(biāo)記語(yǔ)言

SVG ：Scalable Vector Graphics，可伸縮矢量圖形

OEB ：Open eBook，開放式電子圖書

3） Web 1.0 vs. Web 2.0

什么是Web 2.0？

Web 2.0并不是一個(gè)具體的事物，而是一個(gè)階段，是促成這個(gè)階段的各種技術(shù)和相關(guān)的產(chǎn)品服務(wù)的一個(gè)總稱，與之相對(duì)應(yīng)的是靜態(tài)HTML 的WWW 時(shí)代，可以稱之為Web 1.0。總結(jié)起來(lái)，Web 2.0的大概特征是：與前幾年的網(wǎng)絡(luò)應(yīng)用相比，用戶從內(nèi)容的消費(fèi)者變成了內(nèi)容的創(chuàng)造者；用戶從聚集在門戶網(wǎng)站和BBS 等公共空間，到分散至個(gè)體網(wǎng)絡(luò)日志（Blog ）的包產(chǎn)到戶和全民織網(wǎng)。信息正在日益呈現(xiàn)離散的趨勢(shì)，分散的“信息島”與曾經(jīng)一統(tǒng)天下的門戶網(wǎng)站也形成了分庭抗禮之勢(shì)。

我們無(wú)法說(shuō)，Web 2.0是什么，但是可以說(shuō)，那些是Web 2.0。

4） Web 2.0

AJAX ：AJAX 不是一個(gè)技術(shù)，它實(shí)際上是幾種技術(shù)，每種技術(shù)都有其獨(dú)特這處，合在一起就成了一個(gè)功能強(qiáng)大的新技術(shù)，這種新技術(shù)可以使得用戶提交數(shù)據(jù)后頁(yè)面本身不刷新，帶來(lái)更好的用戶體驗(yàn)。

RSS ：(Rich Site Summary)是一種用于共享新聞和其他Web 內(nèi)容的數(shù)據(jù)交換規(guī)范。讀者可以通過RSS 訂閱一個(gè)Blog ，確知該Blog 最近的更新。

IM ：即時(shí)通訊工具，QQ 、MSN 、Skype 等均屬此類。

Bookmark ：也稱Tag 或Tagging ，書簽、標(biāo)簽之意。它可以讓你把喜愛的網(wǎng)站隨時(shí)加入自己的網(wǎng)絡(luò)書簽中；你可以用多個(gè)關(guān)鍵詞而不是分類來(lái)標(biāo)示和整理你的書簽，并與其他人共享。 Blog ：網(wǎng)絡(luò)日志，個(gè)人或群體以時(shí)間順序所作的一種記錄，且不斷更新。Blog 之間的交流主要是通過反向引用（TrackBack ）和留言/評(píng)論（Comment ）的方式來(lái)進(jìn)行的。Blog 的作者（Blogger ），既是這個(gè)Blog 的創(chuàng)作人，也是其檔案管理人。

Podcasting ：播客，它是數(shù)字廣播技術(shù)的一種，出現(xiàn)初期借助一個(gè)叫iPodder 的軟件與一些便攜播放器相結(jié)合而實(shí)現(xiàn)。Podcasting 錄制的是網(wǎng)絡(luò)廣播或類似的網(wǎng)絡(luò)聲訊節(jié)目，網(wǎng)友可將網(wǎng)上的廣播節(jié)目下載到自己的iPod 、MP3播放器或其它便攜式數(shù)碼聲訊播放器中隨身收聽，不必端坐電腦前，也不必實(shí)時(shí)收聽，享受隨時(shí)隨地的自由。更有意義的是，你還可以自己制作聲音節(jié)目，并將其上傳到網(wǎng)上與廣大網(wǎng)友分享。

Wiki ：Wiki 一詞來(lái)源于夏威夷語(yǔ)的“wee kee wee kee”，原本是“快點(diǎn)”的意思，它是網(wǎng)上免費(fèi)的百科全書，它依靠眾多投稿人來(lái)增加和修改其條目。想像一下：一組人坐在一塊白板面前，任何人都可以在上面添加想法，做出修改，甚至擦掉一點(diǎn)東西，你就可以對(duì)Wiki 有了個(gè)大致的印象。

Witkey ：人的知識(shí)、智慧、經(jīng)驗(yàn)、技能通過互聯(lián)網(wǎng)轉(zhuǎn)換成實(shí)際收益的互聯(lián)網(wǎng)新模式。主要應(yīng)用包括解決科學(xué)、技術(shù)、工作、生活、學(xué)習(xí)等領(lǐng)域的問題。

P2P ：P2P 直接將人們聯(lián)系起來(lái)，讓人們通過互聯(lián)網(wǎng)直接交互。P2P 使得網(wǎng)絡(luò)上的溝通變得容易、更直接共享和交互，真正地消除中間商。P2P 就是人可以直接連接到其他用戶的計(jì)算機(jī)、交換文件，而不是像過去那樣連接到服務(wù)器去瀏覽與下載。P2P 另一個(gè)重要特點(diǎn)是改變互聯(lián)網(wǎng)現(xiàn)在的以大網(wǎng)站為中心的狀態(tài)、重返" 非中心化" ，并把權(quán)力交還給用戶。平常使用eMule 、BitTorrent 等均屬于此類。

SNS ：Social Networking Software/Service/Sites/Systems的縮寫，即社會(huì)交往軟件（或服務(wù)、網(wǎng)站、系統(tǒng)）。目前，新一代的SNS 技術(shù)使社會(huì)交往超越了單純的網(wǎng)絡(luò)交友，而逐步成為了一種新的網(wǎng)絡(luò)生存方式，SNS 的邏輯是通過老朋友，認(rèn)識(shí)新朋友，不斷擴(kuò)展自己的人脈，使自己獲得更廣闊的發(fā)展空間。如MySpace 。

5） Web Standards

Web 2.0最大的特點(diǎn)之一是用戶參與，一個(gè)網(wǎng)站如何吸引最多的用戶，最基本的條件之一是不管用戶使用什么樣的瀏覽器，網(wǎng)站都應(yīng)該是可以正常瀏覽的，這時(shí)候Web 標(biāo)準(zhǔn)就應(yīng)運(yùn)而生了。 Web 標(biāo)準(zhǔn)的一個(gè)最基本理念就是對(duì)網(wǎng)頁(yè)進(jìn)行分層。

6） What we will learn

帶create 的說(shuō)明該項(xiàng)可以作為一個(gè)單獨(dú)的文件存在，比如CSS 可以放在擴(kuò)展名為.css 的文件中。

為什么不講工具的使用？

7） 編輯器

Microsoft Expression Web Designer是2007年微軟剛剛推出的取代FrontPage 的網(wǎng)頁(yè)設(shè)計(jì)軟件，使用這個(gè)軟件的目的是為了和以后學(xué)習(xí)ASP .NET時(shí)保持一致性。

選擇Macromedia Dreamweaver 8.02是因?yàn)檫@款軟件太經(jīng)典了，在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域占有非常重要的地位。

8） 瀏覽器

測(cè)試網(wǎng)頁(yè)在多種不同內(nèi)核的瀏覽器中的兼容性

9） 驗(yàn)證工具

驗(yàn)證網(wǎng)頁(yè)是否符合XHTML 和CSS 標(biāo)準(zhǔn)。

第一章 Web 基礎(chǔ)與概述 教學(xué)內(nèi)容

1） Web

PPT1——

1989年8月6日，Tim Bernes-Lee 發(fā)布了World Wide Web 。最初，Tim Berners-Lee 曾經(jīng)考慮把World Wide Web叫做“信息挖掘(Mining of Information, MOI)”，但是他覺得這個(gè)名字有點(diǎn)過于自負(fù)，所以舍棄了這個(gè)名字。

交叉引用的萬(wàn)維網(wǎng)：35年以前，美國(guó)心理學(xué)家米爾格倫(Stanley Milgram)在《今日心理學(xué)》雜志上提出“六度分割（Six Degrees of Separation ）”的理論：任何兩個(gè)陌生人都可以通過“親友的親友”建立聯(lián)系，而這兩個(gè)人之間的親友數(shù)量大約是5；最新的實(shí)驗(yàn)結(jié)果來(lái)自哥倫比亞大學(xué)社會(huì)學(xué)系的瓦茨（Duncan Watts）領(lǐng)導(dǎo)的研究小組?！犊茖W(xué)》雜志發(fā)表了他們關(guān)于在世界范圍內(nèi)大規(guī)模檢驗(yàn)“六度分割”假說(shuō)的論文。瓦茨的研究結(jié)果表明：從一個(gè)網(wǎng)頁(yè)達(dá)到任何另外一個(gè)平均只需點(diǎn)擊19次。

超鏈接：是當(dāng)今世界萬(wàn)維網(wǎng)的基礎(chǔ)，是網(wǎng)頁(yè)制作的基礎(chǔ)技術(shù)，是有效實(shí)現(xiàn)信息資源共享的關(guān)鍵。 PPT2——

uniform 有制服的意思，如果大家都穿上了制服，那么就可以說(shuō)大家的著裝是“統(tǒng)一的”，URL 中的uniform 即指統(tǒng)一。

詞匯

既然是8位二進(jìn)制數(shù)，那么每個(gè)數(shù)的最大值只能是255。

4個(gè)點(diǎn)分的十進(jìn)制數(shù)轉(zhuǎn)換為二進(jìn)制表示可以代表更多的含義，如網(wǎng)絡(luò)號(hào)、主機(jī)號(hào)等，這是《計(jì)算機(jī)網(wǎng)絡(luò)》中藥講授的內(nèi)容，此處不再深入。

PPT7——

端口就像管道一樣，服務(wù)器端程序需要使用不同的端口來(lái)響應(yīng)客戶端程序的請(qǐng)求，這樣不致引起混亂。

常用服務(wù)的默認(rèn)端口應(yīng)該能夠記住，但這是《計(jì)算機(jī)網(wǎng)絡(luò)》中要求的內(nèi)容，此處只作簡(jiǎn)單介紹。 3） 域名與

PPT8——

江蘇的同學(xué)的身份證號(hào)碼前三位是什么？320！在居民身份證這個(gè)系統(tǒng)中，320代表的就是江蘇，但是你很可能知道某位同學(xué)是江蘇人，但是不知道他/她的身份證號(hào)碼前三位是320。這是因?yàn)槊Q（江蘇）比代碼（320）更好記。域名和IP 地址的關(guān)系也和這個(gè)類似，域名更容易記憶。比如中國(guó)礦業(yè)大學(xué)的域名為cumt.edu.cn ，管理學(xué)院的域名為sm.cumt.edu.cn 。 域名的分類——

①類別頂級(jí)域名：由于Internet 最初是在美國(guó)發(fā)源的，當(dāng)時(shí)人們按用途把它們分為幾個(gè)大類，它們分別以不同的后綴結(jié)尾：

URL

這類域名可以稱為類別域名，其中，.edu, .gov 和.mil 一般只為美國(guó)專用，而.com, .net 和.org 在全世界范圍內(nèi)通用。

②地理頂級(jí)域名:隨著越來(lái)越多的國(guó)家和地區(qū)接入Internet ，出現(xiàn)了地理頂級(jí)域名，共有243個(gè)國(guó)家和地區(qū)的代碼，如.cn 代表中國(guó)，.hk, .mo和.tw 分別代表中國(guó)的香港、澳門和臺(tái)灣地區(qū)。

能不能在地理頂級(jí)域名中實(shí)現(xiàn)和類別頂級(jí)域名中類似的按用途分類呢？答案是肯定的，地理頂級(jí)域名中分設(shè)了不同意義的二級(jí)域名，主要包括類別域和行政區(qū)域。cumt.edu.cn 中的edu 就是cn 頂級(jí)域名下的二級(jí)類別域名，xz.js.cn 中的js 則是cn 頂級(jí)域名下的二級(jí)行政區(qū)域名。2002年12月開始，cn 頂級(jí)域名下的二級(jí)域名開放注冊(cè)，受到了中國(guó)國(guó)內(nèi)網(wǎng)站的青睞，這樣，cn 頂級(jí)域名下的二級(jí)域名也就不再局限為類別域和行政域了。

③新頂級(jí)域名:根據(jù)Internet 發(fā)展的需要，從2001年開始使用的新頂級(jí)域名有7

個(gè)：.aero, .biz, .coop, .info, .museum, .name, .pro

PPT9——

我們可以把整個(gè)域名系統(tǒng)看作是一棵倒立的樹，對(duì)于每個(gè)域名來(lái)說(shuō)，可以把它們看作是這棵樹上的一個(gè)分支。

PPT10——

從資源管理器，我們可以很清楚地看到，文件系統(tǒng)(file system)也可以看作一棵樹，事實(shí)上，這個(gè)控件正是Treeview 。

PPT11——

雖然域名容易記憶，但是它不能標(biāo)識(shí)主機(jī)的位置，比如單從sina.com.cn 這個(gè)域名來(lái)看只能說(shuō)這臺(tái)主機(jī)可能在中國(guó)大陸；路由器等網(wǎng)絡(luò)設(shè)備需要使用IP 地址進(jìn)行運(yùn)算（轉(zhuǎn)化為二進(jìn)制后運(yùn)算）以確定該主機(jī)的具體位置，這個(gè)過程就是所謂的域名解析。

在通過局域網(wǎng)接入Internet 時(shí)，有時(shí)我們需要手動(dòng)設(shè)置訪問Internet 的DNS 服務(wù)器地址，如下圖所示。

如果不填寫如上圖所示的

DNS 服務(wù)器地址，那么通過域名是無(wú)法訪問到網(wǎng)站的。

在瀏覽器的地址欄中，輸入dangdang.com.cn 和211.100.16.198都可以正確訪問當(dāng)當(dāng)網(wǎng)上書城的網(wǎng)站。但是，由于一些Web 服務(wù)器的特殊設(shè)置（如Web 服務(wù)器綁定了多個(gè)IP ），使用IP 地址并不一定能夠正常訪問網(wǎng)站。

怎樣從一個(gè)域名得到一臺(tái)主機(jī)的IP 呢？介紹兩個(gè)常用的DOS 下的網(wǎng)絡(luò)命令。

①ping ：用于驗(yàn)證與遠(yuǎn)程計(jì)算機(jī)的連接。

②tracert ：用于路由診斷。

圖中加方框的字符串即為域名dangdang.com.cn 對(duì)應(yīng)的IP 地址。

PPT12——

該圖解釋了域名和IP 地址的層次關(guān)系。對(duì)于一個(gè)域名或IP 地址來(lái)說(shuō)，按照從右到左的順序，該主機(jī)的位置越來(lái)越具體。

PPT13——

和域名注冊(cè)相關(guān)的兩個(gè)英文單詞：

① registrar 注冊(cè)機(jī)構(gòu)

② registrant 注冊(cè)人

它們的關(guān)系和employer 和employee 類似。

有人總結(jié)出來(lái)域名選擇A to F：A cronym （盡量使用縮寫）, B enefit （足夠吸引人以帶來(lái)利益）, C haracter （盡量只使用字母）, D otcom （Dotcom 是最廣泛使用的域名）, E xtension （注冊(cè)擴(kuò)展域名以防惡意注冊(cè)）, F ree （盡量不要使用免費(fèi)域名）。

域名相關(guān)的三個(gè)機(jī)構(gòu)：

①國(guó)際互聯(lián)網(wǎng)名稱和地址分配組織(The Internet Corporation for Assigned Names and Numbers, ICANN)：http://www.icann.org

②國(guó)際互聯(lián)網(wǎng)絡(luò)信息中心(The Internet’s Network Information Center,

InterNIC) ：http://www.internic.net

③中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心(China Internet Network Information Center, CNNIC)：http://www.cnnic.net

在UNIX 系統(tǒng)中，有一個(gè)命令叫做whois ，可以用它來(lái)查詢域名的域注冊(cè)信息，Windows 用戶可以使用InterNIC 和CNNIC 提供的在線whois 服務(wù)中查詢：

6.cn （六間房視頻）和g.cn 可以說(shuō)是世界上最短的域名。

對(duì)于這種太長(zhǎng)的域名，事實(shí)上沒有任何好處，只能把它加入收藏夾以便下次訪問。

PPT14——

通常直接域名只能訪問到一個(gè)網(wǎng)站的首頁(yè)。

最常見的協(xié)議還有FTP （File Transfer Protocol），即文件傳輸協(xié)議，DOS 下FTP 的使用方法——幾個(gè)主要的命令ftp , open , ls , get , set 。

協(xié)議的英文是protocol ，這里使用的是scheme ，“架構(gòu)”之意，因?yàn)橄?/p>

maito:cumtzzp@163.com中的mailto 不是一個(gè)具體的協(xié)議（和郵件相關(guān)的協(xié)議有POP3和SMTP ），所以用scheme 包含的范圍更廣一些。

4） 靜態(tài)頁(yè)面與動(dòng)態(tài)頁(yè)面