第1講網(wǎng)頁設(shè)計(jì)概33第1講網(wǎng)頁設(shè)計(jì)概33第1講網(wǎng)頁設(shè)計(jì)概331.1網(wǎng)頁中的基本概念1．萬維網(wǎng)(WWW)萬維網(wǎng)(WorldWideWeb，WWW)是Internet的多媒體信息查詢工具，由三部分組成：客戶機(jī)、服務(wù)器和HTTP，它是促使Internet迅速發(fā)展和普及的重要技術(shù)。用戶只要在WWW瀏覽器中的Web頁面上輕松點(diǎn)擊鏈接，就可以轉(zhuǎn)到相應(yīng)的信息服務(wù)資源中去。多媒體的Web界面帶來生動(dòng)活潑的效果，簡單和直觀的操作手段給用戶提供了很大的便利。2第1講網(wǎng)頁設(shè)計(jì)概33第1講網(wǎng)頁設(shè)計(jì)概33第1講網(wǎng)頁設(shè)計(jì)概3311.1網(wǎng)頁中的基本概念1．萬維網(wǎng)(WWW)萬維網(wǎng)(WorldWideWeb，WWW)是Internet的多媒體信息查詢工具，由三部分組成：客戶機(jī)、服務(wù)器和HTTP，它是促使Internet迅速發(fā)展和普及的重要技術(shù)。用戶只要在WWW瀏覽器中的Web頁面上輕松點(diǎn)擊鏈接，就可以轉(zhuǎn)到相應(yīng)的信息服務(wù)資源中去。多媒體的Web界面帶來生動(dòng)活潑的效果，簡單和直觀的操作手段給用戶提供了很大的便利。21.1網(wǎng)頁中的基本概念1．萬維網(wǎng)(WWW)22．網(wǎng)頁和網(wǎng)站網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)。通俗地講，網(wǎng)站就是由網(wǎng)頁組成的。網(wǎng)頁可由文字、圖像、動(dòng)畫、聲音和程序等多種媒體信息鏈接組成，通過鏈接實(shí)現(xiàn)與其他網(wǎng)頁或網(wǎng)站的關(guān)聯(lián)和跳轉(zhuǎn)。32．網(wǎng)頁和網(wǎng)站33．瀏覽器瀏覽器是指可以顯示網(wǎng)頁服務(wù)器或者文件系統(tǒng)的HTML文件內(nèi)容，并讓用戶與這些文件交互的一種軟件。網(wǎng)頁瀏覽器主要通過HTTP協(xié)議與網(wǎng)頁服務(wù)器交互并獲取網(wǎng)頁，這些網(wǎng)頁由URL指定，文件格式通常為HTML。一個(gè)網(wǎng)頁中可以包括多個(gè)文檔，每個(gè)文檔都是分別從服務(wù)器獲取的。43．瀏覽器44．URLURL(UniformResourceLocator，統(tǒng)一資源定位符)也被稱為網(wǎng)頁地址，是因特網(wǎng)上標(biāo)準(zhǔn)資源的地址，是用于完整地描述Internet上網(wǎng)頁和其他資源的地址的一種標(biāo)識(shí)方法。在Internet上所有資源都有一個(gè)獨(dú)一無二的URL地址，這種地址可以是本地磁盤，也可以是局域網(wǎng)上的某一臺(tái)計(jì)算機(jī)，更多的是Internet上的站點(diǎn)。簡單地說，URL就是Web地址，俗稱“網(wǎng)址”。例如http://www.C。54．URL55．Internet協(xié)議協(xié)議(Protocol)是關(guān)于信息格式及信息交換規(guī)則的描述。在信息技術(shù)中，協(xié)議就是—些特殊規(guī)則的集合，它被通信的接收方和發(fā)送方認(rèn)可，接收到的信息和發(fā)送的信息均以這種規(guī)則加以解釋。在網(wǎng)絡(luò)的各層中存在著許多協(xié)議。接收方與發(fā)送方同層的協(xié)議必須一致，否則一方將無法識(shí)別另一方發(fā)出的信息，以這種規(guī)則規(guī)定雙方完成信息在計(jì)算機(jī)之間的傳送過程。65．Internet協(xié)議66．IP地址IP地址是網(wǎng)上的通信地址，是計(jì)算機(jī)、服務(wù)器和路由器的端口地址，每—個(gè)IP地址在全球都是惟一的，是遠(yuǎn)行TCP/IP的惟一標(biāo)識(shí)。每臺(tái)Internet上的計(jì)算機(jī)由一個(gè)獨(dú)有的IP地址來惟一標(biāo)識(shí)。目前Internet使用的是IPv4版本，IP地址是一個(gè)由32位的二進(jìn)制數(shù)組成的號(hào)碼，該號(hào)碼分為4段，每段8位，每段取值范圍為0~255。例如0。76．IP地址77．HTTPInternet的基本協(xié)議是TCP/IP協(xié)議，然而在TCP/IP摸型最上層的是應(yīng)用層(Applicationlayer)，它包含所有高層的協(xié)議。高層協(xié)議有文件傳輸協(xié)議FTP、電子郵件傳輸協(xié)議SMTP、域名系統(tǒng)服務(wù)DNS、網(wǎng)絡(luò)新聞傳輸協(xié)議NNTP和HTTP協(xié)議等。87．HTTP88．HTMLHTML是HypertextMarkupLanguage(超文本標(biāo)記語言)的縮寫，它是構(gòu)成Web頁面的主要工具，是用來表示網(wǎng)絡(luò)上信息的符號(hào)標(biāo)志語言。在萬維網(wǎng)上，如果要向全球范圍出版和發(fā)布信息，需要有一種能夠被廣泛理解的語言，即所有的計(jì)算機(jī)都能夠理解的一種用于出版的“母語”。98．HTML99．靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁在網(wǎng)站設(shè)計(jì)中，純粹HTML格式的網(wǎng)頁通常被稱為靜態(tài)網(wǎng)頁，靜態(tài)網(wǎng)頁每個(gè)網(wǎng)頁都有一個(gè)固定的URL，且網(wǎng)頁URL以.htm、.html、.shtml等常見形式為后綴，而不含有“？”。靜態(tài)網(wǎng)頁一經(jīng)編寫完成，其顯示效果就確定了。在HTML格式的網(wǎng)頁上，也可以出現(xiàn)各種動(dòng)態(tài)的效果，但這些“動(dòng)態(tài)效果”只是視覺上的，與動(dòng)態(tài)網(wǎng)頁是不同的概念。動(dòng)態(tài)網(wǎng)頁有asp，jsp和php等。109．靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁101.2頁面組成元素現(xiàn)在的網(wǎng)頁已經(jīng)不再是簡單的文字和圖像組合，而是添加了各種設(shè)計(jì)元素，這使網(wǎng)頁變得更加豐富多彩。組成網(wǎng)頁的最基本元素通常包括網(wǎng)站LOGO、BANNER、導(dǎo)航欄、文本和圖像、動(dòng)畫、超級(jí)鏈接、表單和多媒體等。111.2頁面組成元素現(xiàn)在的網(wǎng)頁已經(jīng)不再是簡單的文字和圖像組合，1．LOGO網(wǎng)站LOGO，也叫網(wǎng)站標(biāo)志。它是一個(gè)站點(diǎn)的象征，一般放在網(wǎng)站首頁的左上角或顯眼位置，訪問者能明顯地看到它。成功的網(wǎng)站標(biāo)志有著獨(dú)特的形象標(biāo)識(shí)，在網(wǎng)站的推廣和宣傳中起到事半功倍的效果。如新浪用字母sina和大眼睛作為標(biāo)志。121．LOGO122．BANNERBANNER一般翻譯為網(wǎng)幅廣告、旗幟廣告和橫幅廣告等。BANNER通常為一幅表現(xiàn)商家廣告內(nèi)容的圖片，放置在廣告商的頁面上，是互聯(lián)網(wǎng)廣告中最基本的廣告形式。橫幅廣告的標(biāo)準(zhǔn)尺寸是468*60像素，而彈出窗口廣告一般為360*300像素。BANNER可以是使用GIF格式的圖像文件，可以使用靜態(tài)圖形，也可用多幀圖像拼接為動(dòng)畫圖像。132．BANNER13BANNER的設(shè)計(jì)原則包括具有鮮明的色彩、語言具有號(hào)召力、文字的字體清晰和圖形位置合適這4個(gè)方面。如圖1.6所示為一個(gè)靜態(tài)圖形格式的BANNER。圖1.6網(wǎng)站的BANNER14BANNER的設(shè)計(jì)原則包括具有鮮明的色彩、語言具有號(hào)召力、文3．導(dǎo)航欄導(dǎo)航欄是用戶在規(guī)劃好站點(diǎn)結(jié)構(gòu)、開始設(shè)計(jì)主頁時(shí)必須考慮的一項(xiàng)內(nèi)容。導(dǎo)航欄的作用就是讓瀏覽者在瀏覽站點(diǎn)時(shí)，不會(huì)因?yàn)槊月范兄箤?duì)站點(diǎn)的訪問。事實(shí)上，導(dǎo)航欄就是一組超鏈接，這組超鏈接的目標(biāo)就是本站點(diǎn)的主頁以及其他重要頁面。153．導(dǎo)航欄154．文本和圖像文本一直是人類最重要的信息載體和交流工具，網(wǎng)頁中的信息也以文本為主。在網(wǎng)頁中，雖然文字不像圖像那樣能夠很快地引起瀏覽者的注意，但卻能夠準(zhǔn)確地表達(dá)信息的內(nèi)容和含義。網(wǎng)頁設(shè)計(jì)與制作者還可以通過設(shè)置字體、字號(hào)、顏色、底紋和邊框等屬性來改變文本的視覺效果，通過不同格式的區(qū)別，突出顯示重要的內(nèi)容。164．文本和圖像165．動(dòng)畫動(dòng)畫是構(gòu)成網(wǎng)頁的重要元素之一，目前，最常用的網(wǎng)頁動(dòng)畫軟件是Flash、ImageReady和GifAnimation等，使用較多的動(dòng)畫格式通常有GIF動(dòng)畫和SWF動(dòng)畫。動(dòng)畫能提供信息、展示作品、裝飾網(wǎng)頁、動(dòng)態(tài)交互等，用它可以將音樂、聲效、動(dòng)畫以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁動(dòng)態(tài)效果，甚至有的網(wǎng)站中的所有網(wǎng)頁也全部都是用Flash完成。175．動(dòng)畫176．超鏈接在網(wǎng)上用鼠標(biāo)點(diǎn)擊一段文字或一幅圖片，就會(huì)有一個(gè)新的頁面被打開，這就是超鏈接技術(shù)。超鏈接技術(shù)是WWW流行起來的原因。鏈接源可以是帶下劃線的文本，也可以是圖像或圖像切片，甚至可以是一些不可見的程序代碼。當(dāng)鏈接源被鼠標(biāo)單擊激活后，其鏈接目的端將會(huì)顯示在Web瀏覽器上，并根據(jù)目的端的類型不同選擇以不同的方式打開。186．超鏈接187．表單表單通常用于填寫申請(qǐng)或提交信息的交互頁面，如電子郵箱、主頁空間、QQ密碼等申請(qǐng)頁面以及論壇、留言簿等都是通過表單來實(shí)現(xiàn)交互的。通常表單的用途是：收集聯(lián)系信息、接收用戶要求、獲得反饋意見、設(shè)置訪問者簽名、讓瀏覽者輸入關(guān)鍵字去搜索相關(guān)網(wǎng)頁、讓瀏覽者注冊(cè)會(huì)員或以會(huì)員身份登錄等。197．表單198．聲音和視頻聲音是多媒體網(wǎng)頁的一個(gè)重要組成部分。從目前來看，網(wǎng)絡(luò)上使用范圍最廣的音頻格式主要有MP3、MIDI和WAV等。設(shè)計(jì)者在采用音頻前需要考慮其用途、格式、文件大小、聲音品質(zhì)和瀏覽器兼容差別等因素。208．聲音和視頻201.3網(wǎng)站規(guī)劃與網(wǎng)頁設(shè)計(jì)我們所見到的網(wǎng)站，雖然在規(guī)模、內(nèi)容和功能上各不相同，但網(wǎng)站設(shè)計(jì)制作的基本流程是相似的。從簡單的個(gè)人網(wǎng)站到復(fù)雜的門戶型網(wǎng)站，都遵循著一個(gè)基本的制作流程。同時(shí)，網(wǎng)站的定位、策劃、創(chuàng)意和風(fēng)格，網(wǎng)站的版面布局，網(wǎng)頁的色彩應(yīng)用及網(wǎng)頁的藝術(shù)原則等都直接關(guān)系到網(wǎng)站的生存和效果評(píng)估。211.3網(wǎng)站規(guī)劃與網(wǎng)頁設(shè)計(jì)我們所見到的網(wǎng)站，雖然在規(guī)模、內(nèi)容和1.3.1網(wǎng)站的策劃網(wǎng)站的前期策劃是一個(gè)網(wǎng)站成功與否的關(guān)鍵，也是進(jìn)行網(wǎng)站建設(shè)和網(wǎng)頁制作整個(gè)流程中的第一步。策劃的目的是為了完成需求分析，確定網(wǎng)站的主題、目標(biāo)、規(guī)模、風(fēng)格和類型等。網(wǎng)站的主題就是將要?jiǎng)?chuàng)建的網(wǎng)站的主要內(nèi)容，也就是網(wǎng)站的題材。一個(gè)網(wǎng)站必須有一個(gè)明確的主題。網(wǎng)站按照其功能和結(jié)構(gòu)形式大體上可以分為4類，即門戶網(wǎng)站、職能網(wǎng)站、專業(yè)網(wǎng)站和個(gè)人網(wǎng)站。221.3.1網(wǎng)站的策劃網(wǎng)站的前期策劃是一個(gè)網(wǎng)站成功與否的關(guān)鍵，1.3.2網(wǎng)頁版面布局設(shè)計(jì)網(wǎng)頁制作本質(zhì)上就是排版，是以瀏覽器作為閱讀平臺(tái)的電子出版物的圖文排版。網(wǎng)頁設(shè)計(jì)表面上看是一種全新的視覺表現(xiàn)形式，但仔細(xì)想想，網(wǎng)頁設(shè)計(jì)與日常所見的傳統(tǒng)報(bào)刊排版并沒有太多不同，只不過在單一靜止的圖文編輯基礎(chǔ)上添加了新的交互元素和多媒體元素，它們的基本原理是相通的。網(wǎng)頁版面布局是個(gè)性思維的展示，因此沒有固定的網(wǎng)頁版式模式，設(shè)計(jì)者可以根據(jù)自己的喜好隨心所欲地設(shè)計(jì)。231.3.2網(wǎng)頁版面布局設(shè)計(jì)網(wǎng)頁制作本質(zhì)上就是排版，是以瀏覽器頁面布局設(shè)計(jì)1．構(gòu)思構(gòu)圖在真正開始頁面布局設(shè)計(jì)之前，都要對(duì)頁面的整體布局進(jìn)行認(rèn)真的構(gòu)思。在這個(gè)階段，可以借鑒他人的布局經(jīng)驗(yàn)，參考他人的布局結(jié)構(gòu)，吸取別人的精華，融入到自己的整體構(gòu)思中。要充分發(fā)揮藝術(shù)想象力，銳意創(chuàng)新、大膽突破，結(jié)合現(xiàn)有的網(wǎng)頁素材考慮，進(jìn)行整合創(chuàng)作。構(gòu)思結(jié)果一定要有自己的獨(dú)特創(chuàng)意，并要考慮技術(shù)實(shí)現(xiàn)的可行性。有時(shí)候，盡管構(gòu)思巧妙，見解獨(dú)到，但用現(xiàn)在的計(jì)算機(jī)技術(shù)和網(wǎng)絡(luò)技術(shù)卻不能實(shí)現(xiàn)，創(chuàng)意也就變成了空想。24頁面布局設(shè)計(jì)1．構(gòu)思構(gòu)圖242．繪制草圖網(wǎng)頁布局設(shè)計(jì)就像寫文章一樣，要事先打草稿——繪制草圖。新建頁面就像一張白紙，沒有任何表格和框架，沒有約定俗成的條條框框的約束，可以盡可能地發(fā)揮你的想象力，將想到的“景象”畫上。繪制草圖就是把頭腦中構(gòu)思的頁面布局輪廓具體化的過程，可以在紙上繪畫，也可以用軟件在計(jì)算機(jī)上繪制。252．繪制草圖25某某網(wǎng)上商城草圖26某某網(wǎng)上商城草圖263．草圖細(xì)化和方案確定草圖細(xì)化和方案確定就是在繪制出來的輪廓草圖上，具體擺布頁面元素，包括網(wǎng)站的站標(biāo)、導(dǎo)航欄、欄目標(biāo)題、廣告、圖片和搜索引擎等。按照平面設(shè)計(jì)的規(guī)律做出平面的基本樣式。這一步可以用一些圖像處理軟件（如Photoshop、PageMaker和Illustrator等）在計(jì)算機(jī)上完成。在具體布局頁面元素時(shí)，可以借鑒平面構(gòu)圖的一些基本原則，如平衡、呼應(yīng)、對(duì)比和疏密等。這個(gè)階段的設(shè)計(jì)結(jié)果仍然是草圖，但是已經(jīng)是一個(gè)布局完善的設(shè)計(jì)方案了，除了文字內(nèi)容之外，其他所有內(nèi)容應(yīng)該基本接近將來網(wǎng)頁的實(shí)際效果。這個(gè)方案供客戶和技術(shù)開發(fā)人員討論確定最后方案時(shí)參考。273．草圖細(xì)化和方案確定2728284．量化描述量化描述就是確定各種頁面元素的具體尺寸。主要包括下面幾個(gè)方面。(1)網(wǎng)頁的外形尺寸。(2)圖形圖像的尺寸。(3)字體大小。(4)色彩代碼。(5)網(wǎng)頁的文件大小。294．量化描述295．方案實(shí)施根據(jù)上述步驟確定的最終方案用網(wǎng)頁編輯軟件（如Dreamweaver或Frontpage）和圖像處理軟件（如Photoshop和Fireworks）進(jìn)行布局設(shè)計(jì)。305．方案實(shí)施30常見的網(wǎng)頁結(jié)構(gòu)類型(1)“同”字型布局“同”字型布局（又叫“國”字型布局）的結(jié)構(gòu)特點(diǎn)是：頁面頂部為水平放置的主導(dǎo)航欄，其下大體上分為左中右三欄，左邊一般放置內(nèi)容導(dǎo)航、二級(jí)欄目或熱點(diǎn)內(nèi)容等；右邊一般放置站點(diǎn)圖片鏈接、動(dòng)畫廣告、搜索引擎、友情鏈接和注冊(cè)登錄信息等；中間為主要內(nèi)容板塊。31常見的網(wǎng)頁結(jié)構(gòu)類型(1)“同”字型布局31“中國人民大學(xué)”首頁32“中國人民大學(xué)”首頁32這種結(jié)構(gòu)布局是互聯(lián)網(wǎng)上最常見的布局，其優(yōu)點(diǎn)是：頁面結(jié)構(gòu)清晰、直觀、平衡均衡和主次分明。缺點(diǎn)是版次過于呆板、僵化，往往給人一種“單調(diào)乏味”的感覺。因此，采用這種布局結(jié)構(gòu)時(shí)，必須在設(shè)計(jì)過程中更加注重色彩的搭配和細(xì)節(jié)的處理，調(diào)節(jié)頁面的整體韻律，彌補(bǔ)它的不足。33這種結(jié)構(gòu)布局是互聯(lián)網(wǎng)上最常見的布局，其優(yōu)點(diǎn)是：頁面結(jié)構(gòu)清晰、(2)“匡”字型布局“匡”字型布局（又叫“拐角型”布局）是把“同”字型布局右邊的內(nèi)容移到底部而成，它們的結(jié)構(gòu)特點(diǎn)和優(yōu)缺點(diǎn)也大體相同。如北京交通大學(xué)首頁就屬于這種布局。34(2)“匡”字型布局343535(3)“呂”字型布局“呂”字型布局的特點(diǎn)是把頁面分為上下兩大塊，其中每一塊都具有同字型結(jié)構(gòu)的特點(diǎn)。這種結(jié)構(gòu)在設(shè)計(jì)技術(shù)上采用上下兩個(gè)表格進(jìn)行頁面元素的定位，兩個(gè)表格之間往往插入條幅廣告。這種布局能夠容納大量信息，目前各大型門戶網(wǎng)站的二級(jí)模塊通常都是采用“呂”字型的布局。如“新浪體育”、“網(wǎng)易新聞”和“搜狐財(cái)經(jīng)”等網(wǎng)頁。36(3)“呂”字型布局363737(4)自由式布局自由式布局打破上述結(jié)構(gòu)的“規(guī)規(guī)矩矩”，盡情揮灑。頁面布局就像一張宣傳海報(bào)，極具創(chuàng)意。這種頁面常常以一幅精美的圖片作為設(shè)計(jì)中心，導(dǎo)航欄則作為次要的設(shè)計(jì)元素，自由擺布，起到點(diǎn)綴、修飾和均衡的作用。一些時(shí)尚網(wǎng)站常常采用這種布局，如藝術(shù)設(shè)計(jì)、時(shí)裝服飾和化妝品等站點(diǎn)。這種布局的優(yōu)點(diǎn)是漂亮、現(xiàn)代、輕松和明快，極具美感，給人以美的享受。38(4)自由式布局3839391.4網(wǎng)頁的色彩搭配及應(yīng)用在網(wǎng)頁設(shè)計(jì)中，色彩搭配是體現(xiàn)網(wǎng)頁風(fēng)格的重要元素之一。一個(gè)網(wǎng)站設(shè)計(jì)的成功與否，很大程度上取決于網(wǎng)頁色彩的搭配。色彩搭配是一項(xiàng)藝術(shù)性很強(qiáng)的工作，因此在設(shè)計(jì)網(wǎng)頁時(shí)除了考慮網(wǎng)站本身的特點(diǎn)外，還要遵循一定的藝術(shù)規(guī)律，這樣才能設(shè)計(jì)出色彩鮮明、性格獨(dú)特的網(wǎng)站。401.4網(wǎng)頁的色彩搭配及應(yīng)用在網(wǎng)頁設(shè)計(jì)中，色彩搭配是體現(xiàn)網(wǎng)頁風(fēng)1.4.1網(wǎng)頁色彩搭配的原理網(wǎng)頁的色彩是樹立網(wǎng)站形象的關(guān)鍵之—，網(wǎng)頁的背景、文字、圖標(biāo)、邊框和鏈接等應(yīng)該采用什么樣的色彩，應(yīng)該搭配什么色彩才能最好地表達(dá)網(wǎng)站的內(nèi)涵和主題呢?下面將介紹網(wǎng)頁色彩搭配的一些原理。

1．色彩的鮮明性

2．色彩的獨(dú)特性

3．色彩的藝術(shù)性

4．色彩搭配的合理性411.4.1網(wǎng)頁色彩搭配的原理網(wǎng)頁的色彩是樹立網(wǎng)站形象的關(guān)鍵之1.4.2網(wǎng)頁色彩搭配的技巧網(wǎng)頁配色很重要，網(wǎng)頁顏色搭配得好壞與否會(huì)直接影響到訪問者的情緒。好的色彩搭配會(huì)給訪問者帶來很強(qiáng)的視覺沖擊力，不好的色彩搭配則會(huì)讓訪問者產(chǎn)生抵觸情緒。下面就來講述網(wǎng)頁色彩搭配的一些技巧。421.4.2網(wǎng)頁色彩搭配的技巧網(wǎng)頁配色很重要，網(wǎng)頁顏色搭配得好1．使用單色

2．使用鄰近色

3．使用對(duì)比色

4．黑色的使用

5．背景色的使用

6．色彩的數(shù)量431．使用單色431.4.3網(wǎng)頁色彩選擇標(biāo)準(zhǔn)選擇網(wǎng)頁色彩，在遵從藝術(shù)規(guī)律的同時(shí)，還應(yīng)考慮人的生理特點(diǎn)。色彩搭配一定要合理，給人一種和諧、愉快的感覺，避免采用容易造成視覺疲勞的純度很高的單一色彩。在選擇網(wǎng)站顏色時(shí)，應(yīng)遵循以下標(biāo)準(zhǔn)。441.4.3網(wǎng)頁色彩選擇標(biāo)準(zhǔn)選擇網(wǎng)頁色彩，在遵從藝術(shù)規(guī)律的同時(shí)1．了解網(wǎng)站所要傳達(dá)的信息和品牌2．了解網(wǎng)站的訪問群體3．不要使用過多的顏色4．在文字的部分使用對(duì)比色5．選擇顏色要注意時(shí)效性6．選擇色盤時(shí)應(yīng)考慮功能性的顏色7．注意網(wǎng)站色差問題451．了解網(wǎng)站所要傳達(dá)的信息和品牌451.5網(wǎng)頁的設(shè)計(jì)原則

盡管網(wǎng)頁設(shè)計(jì)和網(wǎng)站的開發(fā)有多種多樣的方式和技巧，但要完成一個(gè)完美的、既讓瀏覽者愛好又便于日后維護(hù)的網(wǎng)站，在設(shè)計(jì)時(shí)必須要牢記以下網(wǎng)頁設(shè)計(jì)原則。461.5網(wǎng)頁的設(shè)計(jì)原則盡管網(wǎng)頁設(shè)計(jì)和網(wǎng)站的開發(fā)有多1．內(nèi)容第一、形式第二2．重點(diǎn)信息要醒目突出3．網(wǎng)頁文件的命名原則4．設(shè)置合理的網(wǎng)站目錄5．確保鏈接的有效性6．流暢的訪問速度7．清晰的導(dǎo)航結(jié)構(gòu)8．良好的兼容性9．慎用多媒體元素10．真實(shí)有效的客服信息471．內(nèi)容第一、形式第二471.6小結(jié)本章主要講述了制作網(wǎng)頁時(shí)需要注意的一些事項(xiàng)、網(wǎng)頁設(shè)計(jì)的藝術(shù)原則、網(wǎng)頁的實(shí)用布局結(jié)構(gòu)、網(wǎng)頁的色彩搭配等網(wǎng)頁設(shè)計(jì)知識(shí)，最后介紹了網(wǎng)頁制作的流程。使讀者有個(gè)整體認(rèn)識(shí)，為后面制作復(fù)雜的網(wǎng)頁奠定基礎(chǔ)。481.6小結(jié)本章主要講述了制作網(wǎng)頁時(shí)需要注意的一些事項(xiàng)、網(wǎng)頁設(shè) 謝謝大家！ 謝謝大家！49第1講網(wǎng)頁設(shè)計(jì)概33第1講網(wǎng)頁設(shè)計(jì)概33第1講網(wǎng)頁設(shè)計(jì)概331.1網(wǎng)頁中的基本概念1．萬維網(wǎng)(WWW)萬維網(wǎng)(WorldWideWeb，WWW)是Internet的多媒體信息查詢工具，由三部分組成：客戶機(jī)、服務(wù)器和HTTP，它是促使Internet迅速發(fā)展和普及的重要技術(shù)。用戶只要在WWW瀏覽器中的Web頁面上輕松點(diǎn)擊鏈接，就可以轉(zhuǎn)到相應(yīng)的信息服務(wù)資源中去。多媒體的Web界面帶來生動(dòng)活潑的效果，簡單和直觀的操作手段給用戶提供了很大的便利。2第1講網(wǎng)頁設(shè)計(jì)概33第1講網(wǎng)頁設(shè)計(jì)概33第1講網(wǎng)頁設(shè)計(jì)概33501.1網(wǎng)頁中的基本概念1．萬維網(wǎng)(WWW)萬維網(wǎng)(WorldWideWeb，WWW)是Internet的多媒體信息查詢工具，由三部分組成：客戶機(jī)、服務(wù)器和HTTP，它是促使Internet迅速發(fā)展和普及的重要技術(shù)。用戶只要在WWW瀏覽器中的Web頁面上輕松點(diǎn)擊鏈接，就可以轉(zhuǎn)到相應(yīng)的信息服務(wù)資源中去。多媒體的Web界面帶來生動(dòng)活潑的效果，簡單和直觀的操作手段給用戶提供了很大的便利。511.1網(wǎng)頁中的基本概念1．萬維網(wǎng)(WWW)22．網(wǎng)頁和網(wǎng)站網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)。通俗地講，網(wǎng)站就是由網(wǎng)頁組成的。網(wǎng)頁可由文字、圖像、動(dòng)畫、聲音和程序等多種媒體信息鏈接組成，通過鏈接實(shí)現(xiàn)與其他網(wǎng)頁或網(wǎng)站的關(guān)聯(lián)和跳轉(zhuǎn)。522．網(wǎng)頁和網(wǎng)站33．瀏覽器瀏覽器是指可以顯示網(wǎng)頁服務(wù)器或者文件系統(tǒng)的HTML文件內(nèi)容，并讓用戶與這些文件交互的一種軟件。網(wǎng)頁瀏覽器主要通過HTTP協(xié)議與網(wǎng)頁服務(wù)器交互并獲取網(wǎng)頁，這些網(wǎng)頁由URL指定，文件格式通常為HTML。一個(gè)網(wǎng)頁中可以包括多個(gè)文檔，每個(gè)文檔都是分別從服務(wù)器獲取的。533．瀏覽器44．URLURL(UniformResourceLocator，統(tǒng)一資源定位符)也被稱為網(wǎng)頁地址，是因特網(wǎng)上標(biāo)準(zhǔn)資源的地址，是用于完整地描述Internet上網(wǎng)頁和其他資源的地址的一種標(biāo)識(shí)方法。在Internet上所有資源都有一個(gè)獨(dú)一無二的URL地址，這種地址可以是本地磁盤，也可以是局域網(wǎng)上的某一臺(tái)計(jì)算機(jī)，更多的是Internet上的站點(diǎn)。簡單地說，URL就是Web地址，俗稱“網(wǎng)址”。例如http://www.C。544．URL55．Internet協(xié)議協(xié)議(Protocol)是關(guān)于信息格式及信息交換規(guī)則的描述。在信息技術(shù)中，協(xié)議就是—些特殊規(guī)則的集合，它被通信的接收方和發(fā)送方認(rèn)可，接收到的信息和發(fā)送的信息均以這種規(guī)則加以解釋。在網(wǎng)絡(luò)的各層中存在著許多協(xié)議。接收方與發(fā)送方同層的協(xié)議必須一致，否則一方將無法識(shí)別另一方發(fā)出的信息，以這種規(guī)則規(guī)定雙方完成信息在計(jì)算機(jī)之間的傳送過程。555．Internet協(xié)議66．IP地址IP地址是網(wǎng)上的通信地址，是計(jì)算機(jī)、服務(wù)器和路由器的端口地址，每—個(gè)IP地址在全球都是惟一的，是遠(yuǎn)行TCP/IP的惟一標(biāo)識(shí)。每臺(tái)Internet上的計(jì)算機(jī)由一個(gè)獨(dú)有的IP地址來惟一標(biāo)識(shí)。目前Internet使用的是IPv4版本，IP地址是一個(gè)由32位的二進(jìn)制數(shù)組成的號(hào)碼，該號(hào)碼分為4段，每段8位，每段取值范圍為0~255。例如0。566．IP地址77．HTTPInternet的基本協(xié)議是TCP/IP協(xié)議，然而在TCP/IP摸型最上層的是應(yīng)用層(Applicationlayer)，它包含所有高層的協(xié)議。高層協(xié)議有文件傳輸協(xié)議FTP、電子郵件傳輸協(xié)議SMTP、域名系統(tǒng)服務(wù)DNS、網(wǎng)絡(luò)新聞傳輸協(xié)議NNTP和HTTP協(xié)議等。577．HTTP88．HTMLHTML是HypertextMarkupLanguage(超文本標(biāo)記語言)的縮寫，它是構(gòu)成Web頁面的主要工具，是用來表示網(wǎng)絡(luò)上信息的符號(hào)標(biāo)志語言。在萬維網(wǎng)上，如果要向全球范圍出版和發(fā)布信息，需要有一種能夠被廣泛理解的語言，即所有的計(jì)算機(jī)都能夠理解的一種用于出版的“母語”。588．HTML99．靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁在網(wǎng)站設(shè)計(jì)中，純粹HTML格式的網(wǎng)頁通常被稱為靜態(tài)網(wǎng)頁，靜態(tài)網(wǎng)頁每個(gè)網(wǎng)頁都有一個(gè)固定的URL，且網(wǎng)頁URL以.htm、.html、.shtml等常見形式為后綴，而不含有“？”。靜態(tài)網(wǎng)頁一經(jīng)編寫完成，其顯示效果就確定了。在HTML格式的網(wǎng)頁上，也可以出現(xiàn)各種動(dòng)態(tài)的效果，但這些“動(dòng)態(tài)效果”只是視覺上的，與動(dòng)態(tài)網(wǎng)頁是不同的概念。動(dòng)態(tài)網(wǎng)頁有asp，jsp和php等。599．靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁101.2頁面組成元素現(xiàn)在的網(wǎng)頁已經(jīng)不再是簡單的文字和圖像組合，而是添加了各種設(shè)計(jì)元素，這使網(wǎng)頁變得更加豐富多彩。組成網(wǎng)頁的最基本元素通常包括網(wǎng)站LOGO、BANNER、導(dǎo)航欄、文本和圖像、動(dòng)畫、超級(jí)鏈接、表單和多媒體等。601.2頁面組成元素現(xiàn)在的網(wǎng)頁已經(jīng)不再是簡單的文字和圖像組合，1．LOGO網(wǎng)站LOGO，也叫網(wǎng)站標(biāo)志。它是一個(gè)站點(diǎn)的象征，一般放在網(wǎng)站首頁的左上角或顯眼位置，訪問者能明顯地看到它。成功的網(wǎng)站標(biāo)志有著獨(dú)特的形象標(biāo)識(shí)，在網(wǎng)站的推廣和宣傳中起到事半功倍的效果。如新浪用字母sina和大眼睛作為標(biāo)志。611．LOGO122．BANNERBANNER一般翻譯為網(wǎng)幅廣告、旗幟廣告和橫幅廣告等。BANNER通常為一幅表現(xiàn)商家廣告內(nèi)容的圖片，放置在廣告商的頁面上，是互聯(lián)網(wǎng)廣告中最基本的廣告形式。橫幅廣告的標(biāo)準(zhǔn)尺寸是468*60像素，而彈出窗口廣告一般為360*300像素。BANNER可以是使用GIF格式的圖像文件，可以使用靜態(tài)圖形，也可用多幀圖像拼接為動(dòng)畫圖像。622．BANNER13BANNER的設(shè)計(jì)原則包括具有鮮明的色彩、語言具有號(hào)召力、文字的字體清晰和圖形位置合適這4個(gè)方面。如圖1.6所示為一個(gè)靜態(tài)圖形格式的BANNER。圖1.6網(wǎng)站的BANNER63BANNER的設(shè)計(jì)原則包括具有鮮明的色彩、語言具有號(hào)召力、文3．導(dǎo)航欄導(dǎo)航欄是用戶在規(guī)劃好站點(diǎn)結(jié)構(gòu)、開始設(shè)計(jì)主頁時(shí)必須考慮的一項(xiàng)內(nèi)容。導(dǎo)航欄的作用就是讓瀏覽者在瀏覽站點(diǎn)時(shí)，不會(huì)因?yàn)槊月范兄箤?duì)站點(diǎn)的訪問。事實(shí)上，導(dǎo)航欄就是一組超鏈接，這組超鏈接的目標(biāo)就是本站點(diǎn)的主頁以及其他重要頁面。643．導(dǎo)航欄154．文本和圖像文本一直是人類最重要的信息載體和交流工具，網(wǎng)頁中的信息也以文本為主。在網(wǎng)頁中，雖然文字不像圖像那樣能夠很快地引起瀏覽者的注意，但卻能夠準(zhǔn)確地表達(dá)信息的內(nèi)容和含義。網(wǎng)頁設(shè)計(jì)與制作者還可以通過設(shè)置字體、字號(hào)、顏色、底紋和邊框等屬性來改變文本的視覺效果，通過不同格式的區(qū)別，突出顯示重要的內(nèi)容。654．文本和圖像165．動(dòng)畫動(dòng)畫是構(gòu)成網(wǎng)頁的重要元素之一，目前，最常用的網(wǎng)頁動(dòng)畫軟件是Flash、ImageReady和GifAnimation等，使用較多的動(dòng)畫格式通常有GIF動(dòng)畫和SWF動(dòng)畫。動(dòng)畫能提供信息、展示作品、裝飾網(wǎng)頁、動(dòng)態(tài)交互等，用它可以將音樂、聲效、動(dòng)畫以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁動(dòng)態(tài)效果，甚至有的網(wǎng)站中的所有網(wǎng)頁也全部都是用Flash完成。665．動(dòng)畫176．超鏈接在網(wǎng)上用鼠標(biāo)點(diǎn)擊一段文字或一幅圖片，就會(huì)有一個(gè)新的頁面被打開，這就是超鏈接技術(shù)。超鏈接技術(shù)是WWW流行起來的原因。鏈接源可以是帶下劃線的文本，也可以是圖像或圖像切片，甚至可以是一些不可見的程序代碼。當(dāng)鏈接源被鼠標(biāo)單擊激活后，其鏈接目的端將會(huì)顯示在Web瀏覽器上，并根據(jù)目的端的類型不同選擇以不同的方式打開。676．超鏈接187．表單表單通常用于填寫申請(qǐng)或提交信息的交互頁面，如電子郵箱、主頁空間、QQ密碼等申請(qǐng)頁面以及論壇、留言簿等都是通過表單來實(shí)現(xiàn)交互的。通常表單的用途是：收集聯(lián)系信息、接收用戶要求、獲得反饋意見、設(shè)置訪問者簽名、讓瀏覽者輸入關(guān)鍵字去搜索相關(guān)網(wǎng)頁、讓瀏覽者注冊(cè)會(huì)員或以會(huì)員身份登錄等。687．表單198．聲音和視頻聲音是多媒體網(wǎng)頁的一個(gè)重要組成部分。從目前來看，網(wǎng)絡(luò)上使用范圍最廣的音頻格式主要有MP3、MIDI和WAV等。設(shè)計(jì)者在采用音頻前需要考慮其用途、格式、文件大小、聲音品質(zhì)和瀏覽器兼容差別等因素。698．聲音和視頻201.3網(wǎng)站規(guī)劃與網(wǎng)頁設(shè)計(jì)我們所見到的網(wǎng)站，雖然在規(guī)模、內(nèi)容和功能上各不相同，但網(wǎng)站設(shè)計(jì)制作的基本流程是相似的。從簡單的個(gè)人網(wǎng)站到復(fù)雜的門戶型網(wǎng)站，都遵循著一個(gè)基本的制作流程。同時(shí)，網(wǎng)站的定位、策劃、創(chuàng)意和風(fēng)格，網(wǎng)站的版面布局，網(wǎng)頁的色彩應(yīng)用及網(wǎng)頁的藝術(shù)原則等都直接關(guān)系到網(wǎng)站的生存和效果評(píng)估。701.3網(wǎng)站規(guī)劃與網(wǎng)頁設(shè)計(jì)我們所見到的網(wǎng)站，雖然在規(guī)模、內(nèi)容和1.3.1網(wǎng)站的策劃網(wǎng)站的前期策劃是一個(gè)網(wǎng)站成功與否的關(guān)鍵，也是進(jìn)行網(wǎng)站建設(shè)和網(wǎng)頁制作整個(gè)流程中的第一步。策劃的目的是為了完成需求分析，確定網(wǎng)站的主題、目標(biāo)、規(guī)模、風(fēng)格和類型等。網(wǎng)站的主題就是將要?jiǎng)?chuàng)建的網(wǎng)站的主要內(nèi)容，也就是網(wǎng)站的題材。一個(gè)網(wǎng)站必須有一個(gè)明確的主題。網(wǎng)站按照其功能和結(jié)構(gòu)形式大體上可以分為4類，即門戶網(wǎng)站、職能網(wǎng)站、專業(yè)網(wǎng)站和個(gè)人網(wǎng)站。711.3.1網(wǎng)站的策劃網(wǎng)站的前期策劃是一個(gè)網(wǎng)站成功與否的關(guān)鍵，1.3.2網(wǎng)頁版面布局設(shè)計(jì)網(wǎng)頁制作本質(zhì)上就是排版，是以瀏覽器作為閱讀平臺(tái)的電子出版物的圖文排版。網(wǎng)頁設(shè)計(jì)表面上看是一種全新的視覺表現(xiàn)形式，但仔細(xì)想想，網(wǎng)頁設(shè)計(jì)與日常所見的傳統(tǒng)報(bào)刊排版并沒有太多不同，只不過在單一靜止的圖文編輯基礎(chǔ)上添加了新的交互元素和多媒體元素，它們的基本原理是相通的。網(wǎng)頁版面布局是個(gè)性思維的展示，因此沒有固定的網(wǎng)頁版式模式，設(shè)計(jì)者可以根據(jù)自己的喜好隨心所欲地設(shè)計(jì)。721.3.2網(wǎng)頁版面布局設(shè)計(jì)網(wǎng)頁制作本質(zhì)上就是排版，是以瀏覽器頁面布局設(shè)計(jì)1．構(gòu)思構(gòu)圖在真正開始頁面布局設(shè)計(jì)之前，都要對(duì)頁面的整體布局進(jìn)行認(rèn)真的構(gòu)思。在這個(gè)階段，可以借鑒他人的布局經(jīng)驗(yàn)，參考他人的布局結(jié)構(gòu)，吸取別人的精華，融入到自己的整體構(gòu)思中。要充分發(fā)揮藝術(shù)想象力，銳意創(chuàng)新、大膽突破，結(jié)合現(xiàn)有的網(wǎng)頁素材考慮，進(jìn)行整合創(chuàng)作。構(gòu)思結(jié)果一定要有自己的獨(dú)特創(chuàng)意，并要考慮技術(shù)實(shí)現(xiàn)的可行性。有時(shí)候，盡管構(gòu)思巧妙，見解獨(dú)到，但用現(xiàn)在的計(jì)算機(jī)技術(shù)和網(wǎng)絡(luò)技術(shù)卻不能實(shí)現(xiàn)，創(chuàng)意也就變成了空想。73頁面布局設(shè)計(jì)1．構(gòu)思構(gòu)圖242．繪制草圖網(wǎng)頁布局設(shè)計(jì)就像寫文章一樣，要事先打草稿——繪制草圖。新建頁面就像一張白紙，沒有任何表格和框架，沒有約定俗成的條條框框的約束，可以盡可能地發(fā)揮你的想象力，將想到的“景象”畫上。繪制草圖就是把頭腦中構(gòu)思的頁面布局輪廓具體化的過程，可以在紙上繪畫，也可以用軟件在計(jì)算機(jī)上繪制。742．繪制草圖25某某網(wǎng)上商城草圖75某某網(wǎng)上商城草圖263．草圖細(xì)化和方案確定草圖細(xì)化和方案確定就是在繪制出來的輪廓草圖上，具體擺布頁面元素，包括網(wǎng)站的站標(biāo)、導(dǎo)航欄、欄目標(biāo)題、廣告、圖片和搜索引擎等。按照平面設(shè)計(jì)的規(guī)律做出平面的基本樣式。這一步可以用一些圖像處理軟件（如Photoshop、PageMaker和Illustrator等）在計(jì)算機(jī)上完成。在具體布局頁面元素時(shí)，可以借鑒平面構(gòu)圖的一些基本原則，如平衡、呼應(yīng)、對(duì)比和疏密等。這個(gè)階段的設(shè)計(jì)結(jié)果仍然是草圖，但是已經(jīng)是一個(gè)布局完善的設(shè)計(jì)方案了，除了文字內(nèi)容之外，其他所有內(nèi)容應(yīng)該基本接近將來網(wǎng)頁的實(shí)際效果。這個(gè)方案供客戶和技術(shù)開發(fā)人員討論確定最后方案時(shí)參考。763．草圖細(xì)化和方案確定2777284．量化描述量化描述就是確定各種頁面元素的具體尺寸。主要包括下面幾個(gè)方面。(1)網(wǎng)頁的外形尺寸。(2)圖形圖像的尺寸。(3)字體大小。(4)色彩代碼。(5)網(wǎng)頁的文件大小。784．量化描述295．方案實(shí)施根據(jù)上述步驟確定的最終方案用網(wǎng)頁編輯軟件（如Dreamweaver或Frontpage）和圖像處理軟件（如Photoshop和Fireworks）進(jìn)行布局設(shè)計(jì)。795．方案實(shí)施30常見的網(wǎng)頁結(jié)構(gòu)類型(1)“同”字型布局“同”字型布局（又叫“國”字型布局）的結(jié)構(gòu)特點(diǎn)是：頁面頂部為水平放置的主導(dǎo)航欄，其下大體上分為左中右三欄，左邊一般放置內(nèi)容導(dǎo)航、二級(jí)欄目或熱點(diǎn)內(nèi)容等；右邊一般放置站點(diǎn)圖片鏈接、動(dòng)畫廣告、搜索引擎、友情鏈接和注冊(cè)登錄信息等；中間為主要內(nèi)容板塊。80常見的網(wǎng)頁結(jié)構(gòu)類型(1)“同”字型布局31“中國人民大學(xué)”首頁81“中國人民大學(xué)”首頁32這種結(jié)構(gòu)布局是互聯(lián)網(wǎng)上最常見的布局，其優(yōu)點(diǎn)是：頁面結(jié)構(gòu)清晰、直觀、平衡均衡和主次分明。缺點(diǎn)是版次過于呆板、僵化，往往給人一種“單調(diào)乏味”的感覺。因此，采用這種布局結(jié)構(gòu)時(shí)，必須在設(shè)計(jì)過程中更加注重色彩的搭配和細(xì)節(jié)的處理，調(diào)節(jié)頁面的整體韻律，彌補(bǔ)它的不足。82這種結(jié)構(gòu)布局是互聯(lián)網(wǎng)上最常見的布局，其優(yōu)點(diǎn)是：頁面結(jié)構(gòu)清晰、(2)“匡”字型布局“匡”字型布局（又叫“拐角型”布局）是把“同”字型布局右邊的內(nèi)容移到底部而成，它們的結(jié)構(gòu)特點(diǎn)和優(yōu)缺點(diǎn)也大體相同。如北京交通大學(xué)首頁就屬于這種布局。83(2)“匡”字型布局348435(3)“呂”字型布局“呂”字型布局的特點(diǎn)是把頁面分為上下兩大塊，其中每一塊都具有同字型結(jié)構(gòu)的特點(diǎn)。這種結(jié)構(gòu)在設(shè)計(jì)技術(shù)上采用上下兩個(gè)表格進(jìn)行頁面元素的定位，兩個(gè)表格之間往往插入條幅廣告。這種布局能夠容納大量信息，目前各大型門戶網(wǎng)站的二級(jí)模塊通常都是采用“呂”字型的布局。如“新浪體育”、“網(wǎng)易新聞”和“搜狐財(cái)經(jīng)”等網(wǎng)頁。85(3)“呂”字型布局368637(4)自由式布局自由式布局打破上述結(jié)構(gòu)的“規(guī)規(guī)