網(wǎng)頁(yè)設(shè)計(jì)與制作

網(wǎng)頁(yè)設(shè)計(jì)與制作安慶職業(yè)技術(shù)學(xué)院本講內(nèi)容一、網(wǎng)絡(luò)1二、網(wǎng)站與網(wǎng)頁(yè)2三、網(wǎng)頁(yè)設(shè)計(jì)3七、習(xí)題7四、實(shí)例介紹HTML語(yǔ)言設(shè)計(jì)3五、網(wǎng)頁(yè)制作素質(zhì)和修養(yǎng)5六、網(wǎng)站與網(wǎng)頁(yè)的關(guān)系6安慶職業(yè)技術(shù)學(xué)院第一章網(wǎng)站網(wǎng)頁(yè)的基礎(chǔ)知識(shí)安慶職業(yè)技術(shù)學(xué)院第一節(jié)網(wǎng)絡(luò)信息(information),已經(jīng)成為哲學(xué)、自然科學(xué)、技術(shù)科學(xué)和社會(huì)科學(xué)等各個(gè)領(lǐng)域所廣泛應(yīng)用的概念。隨著信息技術(shù)的發(fā)展，網(wǎng)絡(luò)成為人們共享信息的必然。建立網(wǎng)站也就是必然逝在必行。如何建好網(wǎng)站，如何建立有特色的網(wǎng)站將是我們這門(mén)課程所要講述的內(nèi)容。安慶職業(yè)技術(shù)學(xué)院一、網(wǎng)絡(luò)的定義目前計(jì)算機(jī)網(wǎng)絡(luò)的比較公認(rèn)的定義是：計(jì)算機(jī)網(wǎng)絡(luò)是指在網(wǎng)絡(luò)協(xié)議的控制下，通過(guò)通訊設(shè)備和線路來(lái)實(shí)現(xiàn)地理位置不同且具有獨(dú)立功能的多個(gè)計(jì)算機(jī)系統(tǒng)之間的連接，并通過(guò)網(wǎng)絡(luò)操作系統(tǒng)等網(wǎng)絡(luò)軟件來(lái)實(shí)現(xiàn)資源共享的系統(tǒng)。安慶職業(yè)技術(shù)學(xué)院二、計(jì)算機(jī)網(wǎng)絡(luò)的定義和發(fā)展在20世紀(jì)50年代中期，許多系統(tǒng)都將地理上分散的多個(gè)終端通過(guò)通訊線路連接到一臺(tái)中心計(jì)算機(jī)上，這樣就是出現(xiàn)了計(jì)算機(jī)系統(tǒng)。隨著遠(yuǎn)程終端的增多，在主機(jī)前增加了前端機(jī)，但是人們把計(jì)算機(jī)網(wǎng)絡(luò)定義為“以傳輸信息為目的的而連接起來(lái)，實(shí)現(xiàn)遠(yuǎn)程信息處理或進(jìn)一步達(dá)到資源共享的系統(tǒng)”，這就是網(wǎng)絡(luò)的趨形。20世紀(jì)70年代至80年代中期計(jì)算機(jī)網(wǎng)絡(luò)得到了迅速的發(fā)展。ISO在1984年頒布了OSI/RM。定義為新一代計(jì)算機(jī)網(wǎng)絡(luò)體系結(jié)構(gòu)的基礎(chǔ)，這七層模型分別為：物理層、鏈路層、網(wǎng)絡(luò)層、傳輸層、會(huì)話層、表示層、應(yīng)用層安慶職業(yè)技術(shù)學(xué)院三、計(jì)算機(jī)網(wǎng)絡(luò)的分類(lèi)計(jì)算機(jī)網(wǎng)絡(luò)分類(lèi)方法多種多樣，常用的方法有：按網(wǎng)絡(luò)的拓?fù)浣Y(jié)構(gòu)分類(lèi)、按傳輸介質(zhì)分類(lèi)、按速率的分類(lèi)、按數(shù)據(jù)交換方式分類(lèi)以及按網(wǎng)絡(luò)覆蓋的地理范圍分類(lèi)。按照網(wǎng)絡(luò)覆蓋的地理位置范圍的大小分為：局域網(wǎng)，城域網(wǎng)，廣域網(wǎng)。我們通常說(shuō)的上網(wǎng)是指廣域網(wǎng)。安慶職業(yè)技術(shù)學(xué)院四、網(wǎng)絡(luò)的功能1數(shù)據(jù)通訊2資源共享安慶職業(yè)技術(shù)學(xué)院第二節(jié)網(wǎng)站與網(wǎng)頁(yè)一、網(wǎng)站1、網(wǎng)站功能：網(wǎng)站是提供發(fā)布信息、收集信息的平臺(tái)。2、網(wǎng)站概念：簡(jiǎn)單地說(shuō)，網(wǎng)站是由網(wǎng)頁(yè)通過(guò)超級(jí)鏈接有機(jī)地集合而成，通過(guò)瀏覽器看到的畫(huà)面就是網(wǎng)頁(yè)。安慶職業(yè)技術(shù)學(xué)院二、網(wǎng)站的分類(lèi)從網(wǎng)站的目的將網(wǎng)站分為：企業(yè)網(wǎng)站；政府網(wǎng)站；專業(yè)網(wǎng)站；個(gè)人網(wǎng)站。安慶職業(yè)技術(shù)學(xué)院三、網(wǎng)站的管理功能故障管理；計(jì)費(fèi)管理；配置管理；性能管理；安全管理；站點(diǎn)信息管理。

對(duì)網(wǎng)絡(luò)的故障檢測(cè)和排除

記錄網(wǎng)絡(luò)資源實(shí)時(shí)計(jì)費(fèi)

配置網(wǎng)絡(luò)優(yōu)化網(wǎng)絡(luò)

對(duì)通信效率評(píng)價(jià)

授權(quán)、訪問(wèn)、加密機(jī)制管理

對(duì)信息的跟蹤確保完整可靠安慶職業(yè)技術(shù)學(xué)院四、中國(guó)Internet概況CSNET

中國(guó)科技網(wǎng)CERNET

中國(guó)教育網(wǎng)CHINANET

中國(guó)電信網(wǎng)CHINAGBN中國(guó)經(jīng)濟(jì)網(wǎng)UNINET中國(guó)聯(lián)通網(wǎng)中科院系統(tǒng)的12個(gè)分院和123個(gè)研究所(95年)中國(guó)公用計(jì)算機(jī)互聯(lián)網(wǎng)，即163、169原國(guó)家教委94年12月組織清華、北大等高校承建中國(guó)國(guó)家公用經(jīng)濟(jì)信息通信網(wǎng)（金橋網(wǎng)）中國(guó)聯(lián)通公司2000年Internet安慶職業(yè)技術(shù)學(xué)院五、瀏覽器——Internet泛游之舟WWW采用客戶機(jī)/服務(wù)器系統(tǒng)。在客戶機(jī)方面（用戶）使用的程序叫做Web瀏覽器。服務(wù)器上則主要存放網(wǎng)頁(yè)文件，通常稱為Web站點(diǎn)或“Web網(wǎng)站”。在Web網(wǎng)站上除了Web網(wǎng)頁(yè)文件外，還有Web服務(wù)程序。Web服務(wù)器＋網(wǎng)頁(yè)文件＋I(xiàn)P地址＝Web網(wǎng)站1、網(wǎng)站成套網(wǎng)頁(yè)Web服務(wù)器瀏覽器客戶機(jī)安慶職業(yè)技術(shù)學(xué)院六、IP地址正如每部電話必須有一個(gè)由郵電部門(mén)分配的唯一的電話號(hào)碼用戶才能與之通話一樣，IP地址相當(dāng)于Internet系統(tǒng)的電話號(hào)碼。Internet將世界各地成千上萬(wàn)個(gè)網(wǎng)絡(luò)互連起來(lái)，這些網(wǎng)絡(luò)上又各有許多計(jì)算機(jī)接入。為了使用戶上網(wǎng)后能從繁若星空的方便快捷地找到網(wǎng)上的某一臺(tái)主機(jī)，Internet采用所謂“IP地址”的方法，即為網(wǎng)上的每一個(gè)網(wǎng)絡(luò)和每臺(tái)提供服務(wù)的主機(jī)都分配一個(gè)網(wǎng)絡(luò)地址。這就是IP地址。對(duì)于因特網(wǎng)上的主機(jī)而言，這個(gè)地址是全球唯一的。安慶職業(yè)技術(shù)學(xué)院IP地址為4個(gè)字節(jié)長(zhǎng)，每個(gè)字節(jié)為一個(gè)小于256的十進(jìn)制整數(shù)，字節(jié)間用點(diǎn)號(hào)分隔，形如：XXX.XXX.XXX.XXX。安慶職業(yè)技術(shù)學(xué)院IP地址其結(jié)構(gòu)說(shuō)明如下：計(jì)算機(jī)名.組織機(jī)構(gòu)名.網(wǎng)絡(luò)名.最高管理層名安慶職業(yè)技術(shù)學(xué)院

【域名示例】J(安慶職業(yè)技術(shù)學(xué)院）

(中國(guó)國(guó)際互聯(lián)網(wǎng)）

(北京大學(xué)）

(清華大學(xué)）

(合肥工業(yè)大學(xué)）最高域名機(jī)構(gòu)名網(wǎng)絡(luò)名主機(jī)名或網(wǎng)站名注：許多網(wǎng)站喜歡用“WWW”作主機(jī)名，表示是一個(gè)Web網(wǎng)站安慶職業(yè)技術(shù)學(xué)院七、IP地址分類(lèi)1動(dòng)態(tài)地址2靜態(tài)地址安慶職業(yè)技術(shù)學(xué)院八、網(wǎng)址用戶通過(guò)WWW（萬(wàn)維網(wǎng)）訪問(wèn)Internet，是在瀏覽器（BROWSER）的“地址”處鍵入所謂“網(wǎng)址”，術(shù)語(yǔ)叫“URL”（UniformResourceLocator,統(tǒng)一資源定位器）。URL看起來(lái)可能很長(zhǎng)很復(fù)雜，但它一般是由四個(gè)部分構(gòu)成的，即協(xié)議、主機(jī)名、文件夾名（目錄）和文件名。網(wǎng)址有兩種形式：IP地址與域名。安慶職業(yè)技術(shù)學(xué)院網(wǎng)址：

域名：IP地址：

精品課程的網(wǎng)址：http://

安慶職業(yè)技術(shù)學(xué)院第三節(jié)網(wǎng)頁(yè)設(shè)計(jì)所謂“網(wǎng)頁(yè)”，實(shí)際上是以“圖文并茂”、“有聲有色”(多媒體)系列專欄形式向公眾展示各種信息的網(wǎng)絡(luò)“宣傳欄”。常用的設(shè)計(jì)軟件和工具有哪些呢？安慶職業(yè)技術(shù)學(xué)院一、HTML語(yǔ)言超文本文件的格式早在1945年就由VannevarBush提出，他在理論上建立了一個(gè)超文本文件系統(tǒng)。1965年TedNelson第一次使用“超文本”一詞來(lái)形容這種管理信息的系統(tǒng)。與Bush一樣，他的超文本文件系統(tǒng)“Xanadu”，最終也未獲得成功。1967年，在IBM資助下，世界上第一個(gè)真正運(yùn)行成功的“超文本編輯系統(tǒng)”建成，這項(xiàng)研究由AndriesVanDam主持，在美國(guó)布朗大學(xué)最終完成。1969年，美國(guó)國(guó)防部高級(jí)研究計(jì)劃署建立了ARPA網(wǎng)，該網(wǎng)絡(luò)最成功的技術(shù)就是TCP/IP協(xié)議。安慶職業(yè)技術(shù)學(xué)院二、HTML發(fā)展歷史美國(guó)國(guó)防部高級(jí)研究計(jì)劃署建立了ARPA網(wǎng)，該網(wǎng)絡(luò)最成功的技術(shù)就是TCP/IP協(xié)議。1945196519671969發(fā)展史TedNelson第一次使用“超文本”一詞來(lái)形容這種管理信息的系統(tǒng)。失敗告終。在IBM資助下，世界上第一個(gè)真正運(yùn)行成功的“超文本編輯系統(tǒng)”建成，這項(xiàng)研究由AndriesVanDam主持，在美國(guó)布朗大學(xué)最終完成

VannevarBush提出，他在理論上建立了一個(gè)超文本文件系統(tǒng)。安慶職業(yè)技術(shù)學(xué)院人們?cè)谕ㄟ^(guò)INTERNET獲取信息的同時(shí)，紛紛建立自己的主頁(yè)和網(wǎng)站，向世界展示自己。一個(gè)網(wǎng)站可以包含一個(gè)或多個(gè)網(wǎng)頁(yè)，這些網(wǎng)頁(yè)以一定的方式連接在一起，成為一個(gè)整體。而一個(gè)成功的網(wǎng)站的建設(shè)離不開(kāi)其中每一張制作精美的網(wǎng)頁(yè)。如何設(shè)計(jì)呢?安慶職業(yè)技術(shù)學(xué)院三、網(wǎng)頁(yè)制作的工具雖然HTML語(yǔ)言是功能強(qiáng)且語(yǔ)法簡(jiǎn)單的網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言。但是，直接用HTML在普通的文本編輯器上編寫(xiě)制作復(fù)雜精美的網(wǎng)頁(yè)是很不方便的。網(wǎng)頁(yè)設(shè)計(jì)者不得不花大量的時(shí)間去測(cè)試所寫(xiě)的文檔是否合乎其語(yǔ)法規(guī)則，又不能在網(wǎng)頁(yè)設(shè)計(jì)的同時(shí)就了解文檔在瀏覽器上地顯示的確切效果。其次要記憶、掌握大量的HTML語(yǔ)言地語(yǔ)法規(guī)則也不是一件容易的事情。而現(xiàn)在可視化網(wǎng)頁(yè)設(shè)計(jì)工具可以使得設(shè)計(jì)者網(wǎng)頁(yè)設(shè)計(jì)輕松自如。網(wǎng)頁(yè)設(shè)計(jì)的工具很多，當(dāng)前流行的工具有：安慶職業(yè)技術(shù)學(xué)院網(wǎng)頁(yè)制作的工具之一：Frontpage它是建立和管理專業(yè)網(wǎng)站的簡(jiǎn)易工具，用戶可以精確地將網(wǎng)頁(yè)中的每一個(gè)元素放置在網(wǎng)頁(yè)地任意位置上；用戶可以自定義主題。它具有方便地?cái)?shù)據(jù)庫(kù)管理功能，還能提供靈活的網(wǎng)頁(yè)發(fā)布工具。安慶職業(yè)技術(shù)學(xué)院網(wǎng)頁(yè)制作的工具之二：Dreamweaver它是Macromedia公司設(shè)計(jì)推出，可以最快的方式將Photoshop等文件移至網(wǎng)頁(yè)；它能夠通過(guò)網(wǎng)站地地圖快速制作網(wǎng)站雛形、設(shè)計(jì)、更新和重組網(wǎng)頁(yè)；提供了可視化編輯與原代碼編輯同步的設(shè)計(jì)工具；集成了動(dòng)態(tài)出版可視編輯及電子商務(wù)功能，在動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)中網(wǎng)頁(yè)的預(yù)覽無(wú)需通過(guò)瀏覽器；利用它設(shè)計(jì)的網(wǎng)頁(yè)一般不受平臺(tái)的限制。安慶職業(yè)技術(shù)學(xué)院網(wǎng)頁(yè)制作的工具之三：Flash它能制作可任意放大的動(dòng)畫(huà)，使用方便，它提供的交互動(dòng)畫(huà)文件容量很小，它的使用流技術(shù)播放動(dòng)畫(huà)。以上三種網(wǎng)頁(yè)設(shè)計(jì)工具通常稱為“網(wǎng)頁(yè)設(shè)計(jì)三劍客”。安慶職業(yè)技術(shù)學(xué)院四、網(wǎng)頁(yè)設(shè)計(jì)早期的網(wǎng)頁(yè)外觀是靜態(tài)的，只有文字與靜態(tài)的圖片，用戶只能被動(dòng)地閱讀網(wǎng)頁(yè)制作者提供的信息。其網(wǎng)頁(yè)的內(nèi)容也是靜態(tài)的，若無(wú)外來(lái)干預(yù)，其內(nèi)容不會(huì)自動(dòng)改變，也無(wú)法通過(guò)網(wǎng)頁(yè)實(shí)現(xiàn)與訪問(wèn)網(wǎng)頁(yè)者交互信息的功能。因此，為了克服靜態(tài)網(wǎng)頁(yè)的呆板、缺乏交互性等缺點(diǎn)，使網(wǎng)頁(yè)變得絢麗多彩、充滿互動(dòng)性，動(dòng)態(tài)網(wǎng)頁(yè)便應(yīng)運(yùn)而生。安慶職業(yè)技術(shù)學(xué)院動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)包括網(wǎng)頁(yè)的動(dòng)態(tài)表現(xiàn)技術(shù)與網(wǎng)頁(yè)的動(dòng)態(tài)內(nèi)容技術(shù)，前者是網(wǎng)頁(yè)外觀的動(dòng)態(tài)表現(xiàn)技術(shù)，如GIF動(dòng)畫(huà)、FLASH技術(shù)、DHTML（動(dòng)態(tài)HTML）技術(shù)、VHTML（虛擬HTML）技術(shù)、VRML（虛擬實(shí)現(xiàn)造型語(yǔ)言）技術(shù)等。而網(wǎng)頁(yè)的動(dòng)態(tài)內(nèi)容技術(shù)是通過(guò)一定的計(jì)算機(jī)語(yǔ)言編程如CGI、ASP、JSP等，使得計(jì)算機(jī)按照網(wǎng)頁(yè)設(shè)計(jì)者設(shè)置的網(wǎng)頁(yè)格式，生成所需要內(nèi)容的網(wǎng)頁(yè)并傳送給訪問(wèn)網(wǎng)頁(yè)者瀏覽。

安慶職業(yè)技術(shù)學(xué)院五、多媒體表現(xiàn)音頻與視頻隨著多媒體技術(shù)的發(fā)展，人們已經(jīng)不滿足簡(jiǎn)單的文件傳輸，電子郵件，遠(yuǎn)程登陸等網(wǎng)絡(luò)應(yīng)用。人們希望網(wǎng)絡(luò)提供實(shí)時(shí)交互的服務(wù)，如：視頻會(huì)議、視頻點(diǎn)播、遠(yuǎn)程多媒體教學(xué)和網(wǎng)上購(gòu)物等。音頻：通過(guò)計(jì)算機(jī)的聲卡等多媒體設(shè)備來(lái)實(shí)現(xiàn)聲音的傳輸和播放。一般有Wave波形音頻、MIDI音頻和CD音頻，MP3視頻：通過(guò)視頻采集和處理實(shí)現(xiàn)圖象的傳輸和播放。一般有AVI，MOV，MPEG等格式的文件。安慶職業(yè)技術(shù)學(xué)院第四節(jié)實(shí)例介紹HTML語(yǔ)言的設(shè)計(jì)例1含有超文本標(biāo)識(shí)的網(wǎng)頁(yè)源程序。

<HTML><HEAD><TITLE>含有超文本標(biāo)識(shí)的網(wǎng)頁(yè)源程序</TITLE></HEAD><BODY><H2>讀書(shū)人的三個(gè)意境</H2><OL><LI>昨夜西風(fēng)凋碧樹(shù)，獨(dú)上高樓，望盡天涯路。

<LI>衣帶漸寬終不悔，為伊消得人憔悴。

<LI>眾里尋她千百度，驀然回首，那人卻在燈火闌珊處。

</OL><MARQUEEbgcolor="#87CEFA"width=75%scrollamount=1>⒈昨夜西風(fēng)凋碧樹(shù)，獨(dú)上高樓，望盡天涯路。</MARQUEE><MARQUEEbgcolor="#FFC900"behavior=alternate>⒉衣帶漸寬終不悔，為伊消得人憔悴。</MARQUEE><FONTsize="3"color="#FFFFFF"><MARQUEEbgcolor=“#FF4500”>⒊眾里尋她千百度，驀然回首，那人卻在燈火闌珊處。</MARQUEE></FONT></BODY></HTML>安慶職業(yè)技術(shù)學(xué)院其效果安慶職業(yè)技術(shù)學(xué)院例2、簡(jiǎn)單的表單設(shè)計(jì)<formaction=/cgi-bin/post-querymethod=post>

您的姓名:<inputtype=textname=網(wǎng)址value=http://><br>

密碼:<inputtype=passwordname=密碼><br><inputtype=submitvalue="發(fā)送"><inputtype=resetvalue="重設(shè)"></form>安慶職業(yè)技術(shù)學(xué)院其效果安慶職業(yè)技術(shù)學(xué)院第五節(jié)網(wǎng)頁(yè)制作素質(zhì)和修養(yǎng)

網(wǎng)頁(yè)制作是一個(gè)系統(tǒng)工程，一個(gè)網(wǎng)頁(yè)的優(yōu)劣完全取