網(wǎng)頁設(shè)計(jì)基本概念

第1講網(wǎng)頁設(shè)計(jì)基本概念引言Internet與WWW網(wǎng)頁制作涉及的一些重要概念網(wǎng)頁的內(nèi)容網(wǎng)頁的類型網(wǎng)頁制作的編程語言與編輯工具設(shè)計(jì)Web站點(diǎn)的一般步驟2024/1/291.1.1引言

無論是在Internet上創(chuàng)建Web站點(diǎn)和發(fā)布主頁，還是在Intranet上張貼文本和圖形文件，都需要涉及設(shè)計(jì)Web站點(diǎn)和制作網(wǎng)頁。本講將首先介紹如下一些基本問題：?Internet與WWW；?網(wǎng)頁制作涉及的一些重要概念；?網(wǎng)頁制作的編程語言與編輯工具；?設(shè)計(jì)Web站點(diǎn)的一般步驟。2024/1/292.1.2Internet與WWW

20世紀(jì)60年代末，美國(guó)人開展計(jì)算機(jī)網(wǎng)絡(luò)互聯(lián)研究，拉開了計(jì)算機(jī)網(wǎng)絡(luò)研究的序幕。20世紀(jì)80年代以來，隨著計(jì)算機(jī)技術(shù)的發(fā)展和完善，全世界越來越多的計(jì)算機(jī)采用各種通信媒體連接起來，組成了一個(gè)超級(jí)的“網(wǎng)絡(luò)”，這就是人們所稱的“Internet”。2024/1/293.

Internet是世界上最大的互聯(lián)網(wǎng)絡(luò)。實(shí)際上它是把全世界各個(gè)地方已有的各種網(wǎng)絡(luò)，例如計(jì)算機(jī)網(wǎng)、數(shù)據(jù)通信網(wǎng)以及公用電話交換網(wǎng)等互聯(lián)起來，組成一個(gè)跨越國(guó)界范圍的龐大的互聯(lián)網(wǎng)，因此，也稱為“網(wǎng)絡(luò)的網(wǎng)絡(luò)”，參見圖1-1。2024/1/294.圖1-1Internet的用戶視圖及內(nèi)部具體結(jié)構(gòu)2024/1/295.一、對(duì)Internet的理解1.從網(wǎng)絡(luò)互聯(lián)的角度來看Internet利用成千上萬個(gè)具有特殊功能的專用計(jì)算機(jī)（稱為路由器或網(wǎng)關(guān)），通過各種通信線路，把分散在各地的網(wǎng)絡(luò)在物理上連接起來。2.從網(wǎng)絡(luò)通信的角度來看Internet是一個(gè)用TCP/IP（TransmissionControlProtocol/InternetProtocol）協(xié)議把各個(gè)國(guó)家、各個(gè)部門、各種機(jī)構(gòu)的內(nèi)部網(wǎng)絡(luò)連接起來的超級(jí)數(shù)據(jù)通信網(wǎng)。2024/1/296.3.從提供信息資源的角度來看Internet是一個(gè)集各個(gè)部門、各個(gè)領(lǐng)域內(nèi)各種信息資源為一體的超級(jí)資源網(wǎng)。4.從網(wǎng)絡(luò)管理的角度來看Internet是一個(gè)不受政府或某個(gè)組織管理和控制的，包括成千上萬相互協(xié)作的組織和網(wǎng)絡(luò)的集合體。2024/1/297.二、Internet的特點(diǎn)1.TCP/IP協(xié)議是Internet的核心2.Internet實(shí)現(xiàn)了與公用電話交換網(wǎng)的互聯(lián)3.Internet是一個(gè)用戶自己的網(wǎng)絡(luò)2024/1/298.三、對(duì)WWW的理解WWW(WorldWideWeb)可以譯為“環(huán)球網(wǎng)”、“萬維網(wǎng)”，全國(guó)科學(xué)技術(shù)名詞審定委員會(huì)推薦使用的譯名為“萬維網(wǎng)”。1984年提出了一種WWW所依存的超文本(hypertext)數(shù)據(jù)結(jié)構(gòu)，1989年發(fā)展成為一種新型的信息傳播與處理技術(shù)，1991年CERN向世界公布了WWW技術(shù)。2024/1/299.

WWW是一種分布式多媒體超文本系統(tǒng)。所謂“超文本”是指它的信息組織形式不是簡(jiǎn)單地按順序排列，而是由指針連接的復(fù)雜的網(wǎng)狀交叉索引方式。WWW的出現(xiàn)對(duì)Internet的發(fā)展起了巨大的推動(dòng)作用，作出了重大的貢獻(xiàn)。WWW本身是多種技術(shù)組合的產(chǎn)物，它可以不依賴于Internet的存在而運(yùn)行。而WWW與Internet相結(jié)合，更使Internet如虎添翼，為Internet的進(jìn)一步普及鋪平了道路。2024/1/2910.四、WWW的運(yùn)行機(jī)制WWW的運(yùn)行機(jī)制是使用客戶機(jī)/服務(wù)器模式。當(dāng)用戶查詢信息時(shí)，便執(zhí)行一個(gè)客戶機(jī)程序，并輸入一個(gè)統(tǒng)一資源定位地址(uniformresourcelocation，URL)，客戶機(jī)程序也被稱為“瀏覽器”（browser）程序。隨后，瀏覽器程序?qū)⒊蔀橐粋€(gè)客戶，該程序?qū)⒇?fù)責(zé)對(duì)用戶的直接服務(wù)。2024/1/2911.它將用戶的要求轉(zhuǎn)換成一個(gè)或多個(gè)標(biāo)準(zhǔn)的信息查詢請(qǐng)求，通過Internet發(fā)送給遠(yuǎn)方提供信息的服務(wù)器；而服務(wù)器則執(zhí)行一個(gè)服務(wù)器程序。Web的客戶機(jī)程序與服務(wù)器程序之間通過超文本傳輸協(xié)議（hypertexttransferprotocol,HTTP)進(jìn)行通信，如圖1-2所示。2024/1/2912.圖1-2WWW的客戶機(jī)/服務(wù)器模式2024/1/2913.HTTP提供的功能包括實(shí)現(xiàn)Web客戶機(jī)與服務(wù)器的連接，發(fā)出帶文件名的訪問請(qǐng)求，接收文件以及關(guān)閉連接等。為了使客戶機(jī)程序能找到位于整個(gè)Internet范圍內(nèi)的某種信息資源，WWW系統(tǒng)使用統(tǒng)一的URL。客戶機(jī)程序就是憑借輸入的URL找到相應(yīng)的服務(wù)器并與之建立聯(lián)系和獲得信息的。服務(wù)器提供的信息一般是用超文本標(biāo)記語言（hypertextmarkuplanguage,HTML)寫成的信息文件。2024/1/2914.由于HTML是一種統(tǒng)一的標(biāo)準(zhǔn)語言，所以，不管服務(wù)器程序如何不同，或者服務(wù)器所在站點(diǎn)的計(jì)算機(jī)操作系統(tǒng)存在多大差別，用HTML文件提供的信息最終總能為客戶機(jī)程序所理解和顯示。2024/1/2915.

在實(shí)際運(yùn)行中，當(dāng)服務(wù)器接到客戶機(jī)的信息查詢請(qǐng)求之后，便完成相應(yīng)的操作，將查出的結(jié)果通過Internet全部傳送到客戶機(jī)的計(jì)算機(jī)內(nèi)存中?？蛻魴C(jī)再將服務(wù)器送來的結(jié)果轉(zhuǎn)化為一定的顯示格式，通過友好的圖形界面（例如，Windows）展示給用戶。這一過程用戶是感覺不出來的。WWW是一種圖形化的Internet服務(wù)，它的資源極其豐富。2024/1/2916.1.3網(wǎng)頁制作涉及的一些重要概念制作網(wǎng)頁的目的，一般說來是為了將其發(fā)布到網(wǎng)(局域網(wǎng)或者Internet)上，這就涉及到建立Web站點(diǎn)，并將站點(diǎn)發(fā)布到某一個(gè)WWW的Web服務(wù)器上。另外，網(wǎng)頁制作好以后，需要用瀏覽器進(jìn)行瀏覽。在瀏覽網(wǎng)頁時(shí)，第一個(gè)頁面通常稱為主頁。2024/1/2917.一、Web服務(wù)器在WWW中，Web是由成千上萬臺(tái)彼此可以通信的計(jì)算機(jī)組成的全球網(wǎng)絡(luò)。其中，提供信息的每一臺(tái)計(jì)算機(jī)均稱為Web服務(wù)器，又稱為主機(jī)。人們利用統(tǒng)一資源定位地址（URL）的標(biāo)準(zhǔn)格式，提供萬維網(wǎng)中Web服務(wù)器的網(wǎng)址。如果使用超文本傳輸協(xié)議（HTTP）來提供萬維網(wǎng)信息資源空間站點(diǎn)地址的話，則該地址的格式為“http：//…”。2024/1/2918.例如，“中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心”在萬維網(wǎng)中的站點(diǎn)地址是“”。如果用戶在MicrosoftInternetExplorer或者NetscapeNavigator瀏覽器“地址”處輸入該地址，便可以瀏覽到該站點(diǎn)主頁的信息，參見圖1-3。2024/1/2919.圖1-3中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心的主頁面(用域名登錄)2024/1/2920.

其中，“”是“中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心”的域名。在該域名前面加上“WWW”僅表明該站點(diǎn)是Web服務(wù)器，并非用它來幫助確定其位置。所以，當(dāng)我們尋找“中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心”在萬維網(wǎng)中的站點(diǎn)地址時(shí)，輸入“”與輸入“”是等價(jià)的。2024/1/2921.域名實(shí)質(zhì)上是主機(jī)名字的一種標(biāo)識(shí)，它與IP地址是一一對(duì)應(yīng)的。例如，域名“”的IP地址是“9”。IP地址具有32位二進(jìn)制數(shù)字。為了便于用戶記憶，人們發(fā)明了利用域名代替IP地址的直接使用。因此，輸入用IP地址表示的站點(diǎn)地址“http://9”，與輸入用域名表示的站點(diǎn)地址“”，其效果是相同的，如圖1-4所示。2024/1/2922.圖1-4中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心的主頁面(用IP地址登錄)2024/1/2923.:8001/Windows/project.html文件文件夾通訊端口服務(wù)器名稱通訊協(xié)議URL(UniversalResourceLocator,全球資源定位法)，URL所代表的正是Web服務(wù)器的網(wǎng)址。2024/1/2924.協(xié)議URL所連接的服務(wù)實(shí)例http://ftp://mailto:Web服務(wù)文件傳輸服務(wù)/

mailto:wjy@表1-2URL所鏈接的服務(wù)2024/1/2925.二、Web瀏覽器在WWW中，Web瀏覽器是使其得以正常進(jìn)行工作的關(guān)鍵組成部分之一。Web瀏覽器也是人們通過個(gè)人計(jì)算機(jī)瀏覽Internet時(shí)必需的工具軟件。它在讀取Web服務(wù)器上的HTML文件的同時(shí)，必須與組成萬維網(wǎng)的成千上萬臺(tái)Web服務(wù)器中的一臺(tái)進(jìn)行通信聯(lián)系。2024/1/2926.當(dāng)我們的計(jì)算機(jī)與上述主機(jī)聯(lián)系成功以后，該主機(jī)便會(huì)負(fù)責(zé)查找到我們所要的文件，并將其傳回到我們的計(jì)算機(jī)上。另外，還會(huì)將在“index.htm”文件中所包含的一些相關(guān)的圖像也傳回來，而Web瀏覽器就將傳回來的所有信息顯示在計(jì)算機(jī)屏幕上。2024/1/2927.目前，Web瀏覽器的主要開發(fā)公司是微軟(Microsoft)和網(wǎng)景(Netscape)。他們開發(fā)的兩種主流瀏覽器MicrosoftInternetExplorer(簡(jiǎn)稱IE)和NetscapeNavigator/Communicator，在可視化方面的差別甚微，但對(duì)一些特殊技術(shù)的支持卻有很大差異，例如，對(duì)Java和ActiveX等。另外，雖然上述兩種瀏覽器都支持HTML，但NetscapeNavigator/Communicator對(duì)HTML代碼的解釋要比IE嚴(yán)格得多。2024/1/2928.三、Web網(wǎng)頁用瀏覽器從網(wǎng)上看到的信息統(tǒng)稱為網(wǎng)頁。一般來說，人們利用瀏覽器與Internet上某一個(gè)Web服務(wù)器連接成功以后，在瀏覽器上首先顯示的文檔就是該Web服務(wù)器的起始頁，稱為“主頁”，其他的頁面就是網(wǎng)頁。2024/1/2929.圖1-5“中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)”的頁面2024/1/2930.Web服務(wù)器的最主要特征之一就是它具有使一個(gè)HTML文件鏈接到另一個(gè)HTML文件的能力，這種能力稱為“超鏈接”。另外，Web服務(wù)器具有的這種超鏈接能力，還可以使位于世界不同地方的任何兩臺(tái)Web服務(wù)器中的信息連接起來。什么是超鏈接——一種與其它文件的鏈接，當(dāng)用戶點(diǎn)擊后，所鏈接的信息就能顯示出來。2024/1/2931.

一般來說，Web頁面的元素有文本、列表、圖像、超鏈接、書簽、音頻、視頻、表格、表單和框架等。其中，表格、表單和框架屬于復(fù)合元素，它們本身可以包含多種基本元素。這些五彩繽紛和千姿百態(tài)的Web網(wǎng)頁是如何制作出來的？制作好網(wǎng)頁以后又如何將它發(fā)布到Internet上？這些正是本課所要闡述的主題。2024/1/2932.1.4網(wǎng)頁的內(nèi)容請(qǐng)思考一下網(wǎng)頁包含什么樣的內(nèi)容？2024/1/2933.1.5靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁

靜態(tài)網(wǎng)頁是指不應(yīng)用程序而直接或間接制作成html的網(wǎng)頁，這種網(wǎng)頁的內(nèi)容是固定的，修改和更新都必須要通過專用的網(wǎng)頁制作工具，比如Dreamweaver、Frontpage等，而且只要修改了網(wǎng)頁中的一個(gè)字符或一個(gè)圖片都要重新上傳一次覆蓋原來的頁面。2024/1/2934.

動(dòng)態(tài)網(wǎng)頁是指使用網(wǎng)頁腳本語言，比如php、asp、、jsp等，通過腳本將網(wǎng)站內(nèi)容動(dòng)態(tài)存儲(chǔ)到數(shù)據(jù)庫(kù)，用戶訪問網(wǎng)站是通過讀取數(shù)據(jù)庫(kù)來動(dòng)態(tài)生成網(wǎng)頁的方法。網(wǎng)站上主要是一些框架基礎(chǔ)，網(wǎng)頁的內(nèi)容大都存儲(chǔ)在數(shù)據(jù)庫(kù)中。當(dāng)然可以利用一定的技術(shù)使動(dòng)態(tài)網(wǎng)頁內(nèi)容生成靜態(tài)網(wǎng)頁，這樣有利于網(wǎng)站的優(yōu)化，方便搜索引擎搜索。

靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁最大的區(qū)別，就是網(wǎng)頁是固定內(nèi)容還是可在線更新內(nèi)容。2024/1/2935.動(dòng)態(tài)網(wǎng)頁的實(shí)現(xiàn)

2024/1/2936.靜態(tài)網(wǎng)頁的實(shí)現(xiàn)

2024/1/2937.五、從事網(wǎng)頁設(shè)計(jì)所需要的軟、硬件硬件：一臺(tái)配備64MB內(nèi)存的Pentium計(jì)算機(jī)就夠了，最多是再加上調(diào)制解調(diào)器，好將設(shè)計(jì)完畢的網(wǎng)頁上傳至Internet。網(wǎng)頁編輯軟件：網(wǎng)頁編輯軟件可以分成兩種，一種是類似記事本，另一種則是可視化(Dreamweaver)網(wǎng)頁編輯程序。2024/1/2938.圖像動(dòng)畫處理軟件：常見的影像處理軟件有AdobePhotoShop、MacromediaFlash、Director、CorelDraw、UleadPhotoImpact、AppleQuickTimeVR、QuickDraw3D等。瀏覽器軟件：目前常見的瀏覽器有NetscapeCommunicator及MicrosoftInternetExplorer網(wǎng)頁空間：用來存放網(wǎng)頁的存儲(chǔ)空間，位于提供相關(guān)服務(wù)的網(wǎng)絡(luò)服務(wù)器上。2024/1/2939.1.4網(wǎng)頁制作的編程語言與編輯工具在1991年，當(dāng)WWW剛剛問世的時(shí)候，Web網(wǎng)頁就已經(jīng)存在了。當(dāng)時(shí)一些從事WWW研究的人士組織起來，制定了一些標(biāo)準(zhǔn)。由于有了這些標(biāo)準(zhǔn)，才使得全世界范圍內(nèi)的計(jì)算機(jī)可以相互交流信息。其中，一個(gè)十分重要的標(biāo)準(zhǔn)就是超文本標(biāo)記語言（HTML)。HTML作為制作Web頁面的編程語言，完全控制著文本和圖像的顯示方式。2024/1/2940.一、HTML：HTML是“HyperTextMarkupLanguage”的縮寫，中文翻譯為“超文本標(biāo)記語言”。二、XML：XML是“ExtensibleMarkupLanguage”的縮寫，中文翻譯為“可擴(kuò)展標(biāo)記語言”。2024/1/2941.三、瀏覽器端的Script(描述語句)：Script是一段嵌在HTML原始代碼內(nèi)的小程度。2024/1/2942.四、服務(wù)器端的Script(描述語言)：目前常見的服務(wù)器端Script有ASP程序和CGI程度兩種。ASP是“ActiveServerPages”的縮寫，中文翻譯為“動(dòng)態(tài)服務(wù)器網(wǎng)頁”。CGI是“CommonGatewayInterface”縮寫，中文翻譯為“通用網(wǎng)關(guān)接口”，2024/1/2943.五、Dreamweaver

MxDreamweaverMX是WEB

站點(diǎn)開發(fā)的中心環(huán)節(jié)。完全用戶自定義控制可以迅速完成頁面以及站點(diǎn)的設(shè)計(jì)。Javascript

行為庫(kù)以及可視化編輯環(huán)境大量減少了代碼的編寫，同時(shí)亦保證了其專業(yè)性和兼容性。通過

Dreamweaver

與其它群組產(chǎn)品的配合使用以及眾多第三方支持可輕松完成動(dòng)態(tài)發(fā)布個(gè)電子商務(wù)網(wǎng)站的構(gòu)建。到目前為止，全世界范圍超過

60%

的專業(yè)網(wǎng)頁設(shè)計(jì)師都在使用

Dreamweaver。

2024/1/2944.六、Microsoft

FrontPage

2000,2002(xp)使用Frontpage2000創(chuàng)立主頁,你能真正體會(huì)到“功能強(qiáng)大,簡(jiǎn)單易用”的含義。

頁面制作由Frontpage中的Editor完成,其工作窗口由3個(gè)標(biāo)簽頁組成,分別是WYSIWYG（所見即所得）的編輯頁,HTML代碼編輯頁,預(yù)覽頁。站點(diǎn)管理功能由Explorer完成.是2000的優(yōu)勢(shì)所在.預(yù)置了50種主題(Themes),便于設(shè)計(jì)者創(chuàng)立頁面風(fēng)格一致的站點(diǎn)。本站點(diǎn)也是用FP2000制作的，極力向你推薦的工具！2024/1/2945.1.5網(wǎng)站建立的一般流程一般來說，網(wǎng)頁制作可分為三個(gè)階段：1．前期工作準(zhǔn)備階段：在此階段主要完成以下幾個(gè)方面的工作：擬定網(wǎng)頁主題、搜集相關(guān)資料、規(guī)劃網(wǎng)頁內(nèi)容、繪制結(jié)構(gòu)草圖。2．中期制作階段：在此階段主要利用各種網(wǎng)頁制作工具，開始制作網(wǎng)頁，并不斷地進(jìn)行上傳與測(cè)試，直到最后制作完畢。3．后期維護(hù)階段：網(wǎng)頁制作完成后，可進(jìn)行發(fā)布和推廣應(yīng)用。根據(jù)需要，對(duì)網(wǎng)頁進(jìn)行更新與維護(hù)。2024/1/2946.介紹的主要內(nèi)容一.Web網(wǎng)站設(shè)計(jì)規(guī)劃二.總體設(shè)計(jì)方案主題鮮明三.網(wǎng)站的欄目板塊及網(wǎng)站結(jié)構(gòu)四.網(wǎng)站草圖與網(wǎng)頁布局五.設(shè)計(jì)導(dǎo)航結(jié)構(gòu)及鏈接結(jié)構(gòu)六.收集網(wǎng)站所需資料七.創(chuàng)建高瀏覽器兼容的站點(diǎn)八.網(wǎng)站測(cè)試2024/1/2947.一.Web網(wǎng)站設(shè)計(jì)規(guī)劃創(chuàng)建Web網(wǎng)站的第一步是設(shè)計(jì)規(guī)劃，在制作之前對(duì)網(wǎng)站進(jìn)行規(guī)劃是非常重要的。要明確設(shè)計(jì)網(wǎng)站的目的和用戶需求，從而做出切實(shí)可行的設(shè)計(jì)計(jì)劃。根據(jù)消費(fèi)者的需求、市場(chǎng)的狀況、企業(yè)自身的情況等進(jìn)行綜合分析，以“消費(fèi)者”為中心，而不是以“美術(shù)”為中心進(jìn)行設(shè)計(jì)規(guī)劃。2024/1/2948.在設(shè)計(jì)規(guī)劃時(shí)我們應(yīng)考慮

（1）建站的目的是什么?

（2）為誰提供服務(wù)和產(chǎn)品?（3）能提供什么樣的產(chǎn)品和服務(wù)?

（4）網(wǎng)站的目的消費(fèi)者和訪問者的特點(diǎn)是什么?

（5）產(chǎn)品和服務(wù)適合什么樣的表現(xiàn)方式（風(fēng)格）?2024/1/2949.二.總體設(shè)計(jì)方案主題鮮明1.定位網(wǎng)站和主題Web網(wǎng)站主頁應(yīng)具備得基本成分：頁頭：準(zhǔn)確無誤地標(biāo)識(shí)你的網(wǎng)站和企業(yè)標(biāo)志E-mail地址：用來接收用戶垂詢

聯(lián)系信息：比如普通郵件地址或電話版權(quán)信息：聲明版權(quán)所有者等

2024/1/2950.2.定位網(wǎng)站CI形象所謂CI(CorporateIdentity)，是借用的廣告界術(shù)語，意思是通過視覺來統(tǒng)一企業(yè)的形象。

一個(gè)杰出的網(wǎng)站，和實(shí)體公司一樣，也需要整體的形象包裝和設(shè)計(jì)。準(zhǔn)確的、有創(chuàng)意的CI設(shè)計(jì)，對(duì)網(wǎng)站的宣傳推廣有事半功倍的效果。設(shè)計(jì)網(wǎng)站的標(biāo)志（logo）

設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩

設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體

設(shè)計(jì)網(wǎng)站的宣傳標(biāo)語

2024/1/2951.（1）設(shè)計(jì)網(wǎng)站的標(biāo)志（logo）logo是你網(wǎng)站特色和內(nèi)涵的集中體現(xiàn)

標(biāo)志可以是中文、英文字母，可以是符號(hào)、圖案，還可以是動(dòng)物或者人物等等。

標(biāo)志的設(shè)計(jì)創(chuàng)意來自你網(wǎng)站的名稱和內(nèi)容2024/1/2952.標(biāo)志的設(shè)計(jì)創(chuàng)意來源①網(wǎng)站有代表性的人物、動(dòng)物、花草，可以作為設(shè)計(jì)的藍(lán)本，加以卡通化和藝術(shù)化，例如迪斯尼的米老鼠，搜狐的卡通狐貍，鯊?fù)w壇的籃球鯊魚。②專業(yè)性的網(wǎng)站，可以以本專業(yè)有代表性的物品作為標(biāo)志。比如中國(guó)銀行的銅板標(biāo)志，奔馳汽車的方向盤標(biāo)志。③最常用和最簡(jiǎn)單的方式是用自己網(wǎng)站的英文名稱作標(biāo)志。采用不同的字體、字母的變形、字母的組合可以很容易制作好自己的標(biāo)志。2024/1/2953.現(xiàn)實(shí)生活中的Logo2024/1/2954.（2）設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩“標(biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩。例如：IBM的深藍(lán)色，肯德基的紅色條形，Windows視窗標(biāo)志上的紅藍(lán)黃綠色塊，都使我們覺得很貼切，很和諧。標(biāo)準(zhǔn)色彩要用于網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和主色塊，給人以整體統(tǒng)一的感覺。一般來說，一個(gè)網(wǎng)站的標(biāo)準(zhǔn)色彩不超過3種，太多則讓人眼花繚亂通常適于網(wǎng)頁標(biāo)準(zhǔn)色的顏色有：藍(lán)色，黃/橙色，黑/灰/白色三大系列色2024/1/2955.（3）設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體標(biāo)準(zhǔn)字體是指用于標(biāo)志、標(biāo)題、主菜單的特有字體。一般我們網(wǎng)頁默認(rèn)的字體是宋體。為了體現(xiàn)網(wǎng)站的“與眾不同”和特有風(fēng)格，可以根據(jù)自己網(wǎng)站所表達(dá)的內(nèi)涵，選擇更貼切的字體。需要說明的是：使用非默認(rèn)字體只能用圖片的形式，因?yàn)楹芸赡転g覽者的PC機(jī)里沒有安裝你的特別字體，那么你的辛苦設(shè)計(jì)制作便會(huì)付之東流。2024/1/2956.（4）設(shè)計(jì)網(wǎng)站的宣傳標(biāo)語網(wǎng)站的宣傳標(biāo)語也可以說是網(wǎng)站的精神、網(wǎng)站的目標(biāo)，可用一句話甚至一個(gè)詞來高度概括，它類似于現(xiàn)實(shí)生活中的廣告金句。2024/1/2957.三.網(wǎng)站的欄目版塊及網(wǎng)站結(jié)構(gòu)你是否能將最好的、最吸引人的內(nèi)容放在最突出的位置以吸引更多的網(wǎng)友瀏覽網(wǎng)站？在制定欄目的時(shí)候，要仔細(xì)考慮，合理安排

網(wǎng)站的欄目

網(wǎng)站和版塊

網(wǎng)站的目錄結(jié)構(gòu)

其他2024/1/2958.1．網(wǎng)站的欄目欄目的實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主體明確顯示出來一般的網(wǎng)站欄目安排要注意以下幾方面：

（1）記住一定要緊扣你的主題即將你的主題按一定的方法分類并將它們作為網(wǎng)站的主題欄目（2）設(shè)立一個(gè)最近更新或網(wǎng)站指南欄目（3）設(shè)立一個(gè)可以雙向交流的欄目（4）設(shè)立一個(gè)下載或常見問題回答欄目2024/1/2959.2．網(wǎng)站和版塊版塊比欄目的概念要大一些，每個(gè)版塊都有自己的欄目。關(guān)于版塊方面，主要是門戶網(wǎng)站等較大ICP需要考慮的問題。設(shè)計(jì)時(shí)應(yīng)注意：（1）各版塊要有相對(duì)獨(dú)立性。（2）各版塊要相互關(guān)聯(lián)。（3）版塊的內(nèi)容要圍繞網(wǎng)站主題。2024/1/2960.3．網(wǎng)站的目錄結(jié)構(gòu)網(wǎng)站的目錄是指你建立網(wǎng)站時(shí)創(chuàng)建的目錄。目錄結(jié)構(gòu)的好壞，對(duì)瀏覽者來說并沒有什么太大的感覺，但是對(duì)于網(wǎng)站本身的上傳維護(hù)、內(nèi)容及未來的擴(kuò)充和移植有著重要的影響。組織好網(wǎng)站的結(jié)構(gòu)會(huì)便于以后的管理和維護(hù)工作。2024/1/2961.常用的方法在本地計(jì)算機(jī)上創(chuàng)建一個(gè)專門放置網(wǎng)站所有文件的文件夾，然后在該文件夾中制作和編輯Web頁。當(dāng)發(fā)布網(wǎng)站時(shí)，你就可以復(fù)制該文件夾到Web服務(wù)器上，以便讓更多的人可以訪問到你的網(wǎng)站。將你的網(wǎng)站內(nèi)容以目錄結(jié)構(gòu)組織起來以方便維護(hù)和導(dǎo)航，將相關(guān)的文件放置在同一個(gè)文件夾里。2024/1/2962.需要注意的是：（1）不要將所有文件都存放在根目錄下。所有文件都存放在根目錄下，會(huì)造成文件管理混亂從而影響工作效率，另外還會(huì)影響上傳速度。（2）按欄目?jī)?nèi)容建立子目錄。子目錄首先按主菜單欄目建立。對(duì)于次要欄目，需要經(jīng)常更新的欄目可以建立獨(dú)立的子目錄。而不需要經(jīng)常更新的欄目，可以合并放在一個(gè)統(tǒng)一目錄下。所有程序一般都存放在特定目錄下。所有需要下載的內(nèi)容也最好放在一個(gè)目錄下。（3）在每個(gè)主目錄下都建立獨(dú)立的images目錄為每個(gè)主目錄建立一個(gè)獨(dú)立的images目錄是最利于管理的。根目錄下的images目錄放首頁和一些次要欄目的圖片。目錄的層次不要太深，為了維護(hù)方便，建議不要超過3層。2024/1/2963.（4）其他注意方面①不要使用中文目錄名，使用中文目錄名可能對(duì)網(wǎng)址的正確顯示造成困難。②不要使用過長(zhǎng)的目錄名，太長(zhǎng)的目錄名不便于記憶。③盡量使用意義明確的目錄名，你可以用Flash、Dhtml、Javascript來建立目錄名，也可以用1，2，3來建立目錄名，但是哪一個(gè)更明確，更便于記憶和管理呢?顯然是前者。2024/1/2964.四.網(wǎng)站草圖與網(wǎng)頁布局：一般是在紙上繪制出網(wǎng)站的布局和大致外觀，也可在特定的軟件中（如Freehand和Fireworks）精確地繪制草圖。當(dāng)具體制作網(wǎng)站內(nèi)容時(shí)，將一切參考網(wǎng)站草圖進(jìn)行。：DreamweaverMX提供了重復(fù)使用頁面布局的簡(jiǎn)便方法，即制作網(wǎng)站時(shí)使用模板。使用模板技術(shù)不但可以提高網(wǎng)頁制作的效率，而且當(dāng)我們決定修改整個(gè)網(wǎng)頁布局時(shí)，僅需更改模板即可。網(wǎng)站草圖網(wǎng)頁布局2024/1/2965.五.設(shè)計(jì)導(dǎo)航結(jié)構(gòu)及鏈接結(jié)構(gòu)Web網(wǎng)站設(shè)計(jì)中，導(dǎo)航結(jié)構(gòu)的設(shè)計(jì)一直是網(wǎng)頁設(shè)計(jì)者比較關(guān)心的問題。導(dǎo)航欄對(duì)整個(gè)網(wǎng)站內(nèi)容有提綱的作用，同時(shí)，一些廣告和網(wǎng)站更新通知也經(jīng)常放置在導(dǎo)航欄中，導(dǎo)航欄往往需要隨時(shí)改變。2024/1/2966.1．導(dǎo)航結(jié)構(gòu)的設(shè)計(jì)導(dǎo)航欄一定要清晰、醒目。通常導(dǎo)航欄要在“第一屏”能顯示出來，橫向放置的導(dǎo)航欄要優(yōu)于縱向的導(dǎo)航欄。下面這些方法會(huì)非常有用：（1）“當(dāng)前位置”：在每一頁的頂部提示當(dāng)前所在頁所處的位置，以便讓瀏覽者知道身在何處，并可輕松地返回到上一層頁面。（2）“搜索和索引”：在網(wǎng)站中添加搜索和索引功能，可以讓瀏覽者快速查找到所需要的內(nèi)容。（3）“反饋信息”：提供電子郵件地址或電話等信息，以便讓瀏覽者能聯(lián)系到網(wǎng)站的網(wǎng)管人員。遇到任何問題都可以快速得到反映并解決。2024/1/2967.2．鏈接結(jié)構(gòu)網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)。它建立在目錄結(jié)構(gòu)基礎(chǔ)之上，但可以跨越目錄。每個(gè)頁面都是一個(gè)固定點(diǎn)，鏈接則是在兩個(gè)固定點(diǎn)之間的連線。一個(gè)點(diǎn)可以和一個(gè)點(diǎn)鏈接，也可以和多個(gè)點(diǎn)鏈接。這些點(diǎn)并不是分布在一個(gè)平面上，而是存在于一個(gè)立體的空間中。我們研究網(wǎng)站的鏈接結(jié)構(gòu)的目的在于用最少的鏈接，使得瀏覽最有效率。2024/1/2968.鏈接結(jié)構(gòu)的兩種基本方式樹狀鏈接結(jié)構(gòu)（一對(duì)一）首頁鏈接指向一級(jí)頁面，一級(jí)頁面鏈接指向二級(jí)頁面。立體結(jié)構(gòu)看起來就像蒲公英。瀏覽時(shí)，一級(jí)級(jí)進(jìn)入，一級(jí)級(jí)退出。優(yōu)點(diǎn)是條理清晰，訪問者明確知道自己在什么位置，不會(huì)迷路。缺點(diǎn)是瀏覽效率低，一個(gè)欄目下的子頁面到另一個(gè)欄目下的子頁面，必須繞經(jīng)首頁。星狀鏈接結(jié)構(gòu)（一對(duì)多）每個(gè)頁面相互之間都建立有鏈接。立體結(jié)構(gòu)像東方明珠電視塔上的鋼球。優(yōu)點(diǎn)是瀏覽方便，隨時(shí)可以到達(dá)自己喜歡的頁面。缺點(diǎn)是鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了多少內(nèi)容。2024/1/2969.六.收集網(wǎng)站所需資料網(wǎng)站最忌諱多而雜，在搜集資料時(shí)不要追求內(nèi)容多而全，而應(yīng)追求精、專、新，包括圖像、文本及多媒體（Flash、