第5章 網(wǎng)站設(shè)計(jì)與 建設(shè)
第 章 網(wǎng)站頁(yè)面設(shè)計(jì)nn5nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)是指用戶對(duì)網(wǎng)站整體形象的一種感覺。如果 說硬件是網(wǎng)站的生存環(huán)境，結(jié)構(gòu)是網(wǎng)站的骨骼，內(nèi)容是網(wǎng)站 的血肉，那么界面就是網(wǎng)站的外表。 相對(duì)
第 章 網(wǎng)站頁(yè)面設(shè)計(jì)nn5nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)是指用戶對(duì)網(wǎng)站整體形象的一種感覺。如果 說硬件是網(wǎng)站的生存環(huán)境，結(jié)構(gòu)是網(wǎng)站的骨骼，內(nèi)容是網(wǎng)站 的血肉，那么界面就是網(wǎng)站的外表。 相對(duì)于網(wǎng)站的其它設(shè)計(jì)，網(wǎng)站的風(fēng)格設(shè)計(jì)是最抽象、也是最 頭疼的一個(gè)問題。許多網(wǎng)站的建設(shè)者作為專業(yè)做作業(yè)人員， 缺少開發(fā)獨(dú)特風(fēng)格的主頁(yè)的能力。而專業(yè)的美工師通常從事 的都是傳統(tǒng)的美工技術(shù)，對(duì)網(wǎng)頁(yè)操作技術(shù)和因特網(wǎng)知之甚 少，難設(shè)計(jì)出最適合網(wǎng)絡(luò)傳輸?shù)膱D片。所以網(wǎng)站的頁(yè)面設(shè)計(jì) 并不簡(jiǎn)單，它是一項(xiàng)綜合技術(shù)。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n5.1.1 確定網(wǎng)站的主題風(fēng)格 整個(gè)網(wǎng)站的主題風(fēng)格是在圖形界面設(shè)計(jì)之前必須要解決的重 要問題，是圖形界面設(shè)計(jì)的出發(fā)點(diǎn)。 1．主題風(fēng)格概述 ． 風(fēng)格是一個(gè)抽象的概念，是指站點(diǎn)整體形象給用戶的綜合感 受，這個(gè)整體形象包括網(wǎng)站的CI（標(biāo)志、色彩、字體、標(biāo)語 等）、版面布局、瀏覽方式、交互性、文字、語氣、內(nèi)容價(jià) 值、存在意義、站點(diǎn)榮譽(yù)等等諸多因素。它往往無法用一個(gè) 具體的物體來描述，沒有一個(gè)固定的程式可以參照和模仿。 有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于： 有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于：普通網(wǎng)站你看到的只 是堆砌在一起的信息，你只能用理性的感受來描述。但瀏覽 過有風(fēng)格的網(wǎng)站后你能有更深一層的感性認(rèn)識(shí)，比如站點(diǎn)的 品位，和藹可親的個(gè)性等。 所以風(fēng)格就是一句話：與眾不同，有個(gè)性。 所以風(fēng)格就是一句話：與眾不同，有個(gè)性。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n2．如何建立網(wǎng)站的主題風(fēng)格 ． （1）要肯定風(fēng)格是建立在有價(jià)值內(nèi)容之上的 要肯定風(fēng)格是建立在有價(jià)值內(nèi)容之上的。一個(gè)網(wǎng)站有 要肯定風(fēng)格是建立在有價(jià)值內(nèi)容之上的 風(fēng)格而沒有內(nèi)容，就像繡花枕頭草包一個(gè)，無論你的站點(diǎn) 采用何種形式、什么樣的外觀、提供什么內(nèi)容，都要以站 點(diǎn)的最終內(nèi)容、目的作為出發(fā)點(diǎn)來考慮。 （2）要徹底搞清楚自己希望站點(diǎn)給人的印象是什么 ） 要徹底搞清楚自己希望站點(diǎn)給人的印象是什么。在此 反復(fù)強(qiáng)調(diào)給人以深刻印象，因?yàn)檫@點(diǎn)很重要，瀏覽者通常 會(huì)重返他印象最深刻的網(wǎng)站。可以從這幾個(gè)問題來理清思 路。如果只用一名話來描述你的站點(diǎn)，應(yīng)該是什么呢？如 果網(wǎng)站是一個(gè)人，他擁有的個(gè)性是什么呢？作為站長(zhǎng)，你 希望給人的印象是什么呢？用一種動(dòng)物來比喻，你的網(wǎng)站 最象什么？瀏覽者覺得你和其他網(wǎng)站的不同是什么呢？瀏 覽者跟你交流合作的感受又是什么呢？你可以自己先填寫 一份答案，然后讓其他的網(wǎng)友填寫，比較的結(jié)果會(huì)告訴你 的網(wǎng)站現(xiàn)在的差距、弱點(diǎn)及需
要改進(jìn)的地方。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n（3）在明確自己的網(wǎng)站印象后，開始努力建立和加強(qiáng)這種 印象。經(jīng)過第二步印象的“量化”后。你需要進(jìn)一步找出 進(jìn)一步找出 其中最有特色特點(diǎn)的東西，就是最能體現(xiàn)網(wǎng)站風(fēng)格的東西。 并以它作為網(wǎng)站的特色加以重點(diǎn)強(qiáng)化 特色加以重點(diǎn)強(qiáng)化，宣傳。例如：再次 特色加以重點(diǎn)強(qiáng)化 審查網(wǎng)站的名稱、域名、欄目名稱是否符合這種個(gè)性、是 否容易記憶等等。 （4）確定了風(fēng)格后，要堅(jiān)持所有網(wǎng)頁(yè)風(fēng)格的一致性。特別 是色彩斑斕的站點(diǎn),尤其要注意風(fēng)格的統(tǒng)一 注意風(fēng)格的統(tǒng)一。其實(shí),風(fēng)格一 注意風(fēng)格的統(tǒng)一 致性的原則和傳統(tǒng)的印刷出版物沒什么區(qū)別。網(wǎng)頁(yè)上所有 的圖像、文字,包括像背景顏色、區(qū)分線、字體、標(biāo)題、 注腳等,都要統(tǒng)一風(fēng)格,貫穿全站。這樣讀者看起來舒服、 順暢,會(huì)對(duì)網(wǎng)站留下一個(gè)“很專業(yè)”的印象。在方法上可 統(tǒng)一使用CSS樣式技術(shù)，對(duì)整個(gè)站點(diǎn)內(nèi)的頁(yè)面風(fēng)格進(jìn)行統(tǒng) 一控制。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n從美工設(shè)計(jì)角度來看,網(wǎng)站的風(fēng)格是指通過一定的顏色及圖案 組合,布局安排等設(shè)計(jì)來體現(xiàn)網(wǎng)站經(jīng)營(yíng)者的思想和傾向。具體 三個(gè)方面的工作要做: 制作時(shí)有三個(gè)方面 三個(gè)方面 第一步:設(shè)置背景顏色或圖案 第二步:設(shè)置文本的顏色 第三步:設(shè)置鏈接點(diǎn)的顏色nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n3．網(wǎng)頁(yè)主題風(fēng)格的創(chuàng)意設(shè)計(jì) ． 你的網(wǎng)站要有獨(dú)特并能給人深刻印象的風(fēng)格，創(chuàng)意是很重要 的。創(chuàng)意是網(wǎng)站生存的關(guān)鍵。 創(chuàng)意到底是什么？如何產(chǎn)生創(chuàng)意呢？ 創(chuàng)意到底是什么？如何產(chǎn)生創(chuàng)意呢？ 創(chuàng)意是傳達(dá)信息的一種特別方式。創(chuàng)意就是靈感。很多時(shí) 候，成功的網(wǎng)站就是設(shè)計(jì)者的一點(diǎn)靈感創(chuàng)造出來的。 （1）網(wǎng)頁(yè)創(chuàng)意設(shè)計(jì)的意義、功能和目的 網(wǎng)頁(yè)創(chuàng)意設(shè)計(jì)是否成功，除了其內(nèi)容因素外，首先要看其在 視覺上能否引人注目。 網(wǎng)頁(yè)的創(chuàng)意設(shè)計(jì)包括文字排列方向、字群聚散組合，字體大 小風(fēng)格的選擇，圖片的分布及色彩與空白的經(jīng)營(yíng)。不僅追求 網(wǎng)頁(yè)形式的變化，更重視各視覺元素的不同形式和構(gòu)成能給 人在感情上造成不同的心理感受，并體現(xiàn)不同的主題。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n（2）網(wǎng)頁(yè)創(chuàng)意設(shè)計(jì)的構(gòu)成要素及其作用 標(biāo)題。標(biāo)題是表達(dá)信息主題的短句，標(biāo)題有主標(biāo)題與子標(biāo) 題之分。 標(biāo)語。標(biāo)語是具有韻味的意義完整的句子。 正文。 網(wǎng)頁(yè)名稱。 標(biāo)志。 插圖。將所傳達(dá)的信息內(nèi)容賦以視覺化的造型稱為插圖。 圖標(biāo)。 背景。 動(dòng)畫。動(dòng)畫不僅能增添網(wǎng)頁(yè)的視覺趣味效果，同時(shí)，也可 以用來進(jìn)一步突出網(wǎng)頁(yè)和信息內(nèi)容的主題和風(fēng)格。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n（3）網(wǎng)頁(yè)創(chuàng)意設(shè)計(jì)的原理和準(zhǔn)則 進(jìn)行網(wǎng)頁(yè)的創(chuàng)意設(shè)計(jì)時(shí)，應(yīng)遵循以下幾
條構(gòu)成原則 幾條構(gòu)成原則： 幾條構(gòu)成原則 內(nèi)容與形式表現(xiàn)必須統(tǒng)一和有序，形式表現(xiàn)必須服從內(nèi)容 要求，在造型上各構(gòu)成要素規(guī)格化的設(shè)計(jì)樣式要統(tǒng)一。要依 據(jù)信息內(nèi)容的意義和結(jié)構(gòu)進(jìn)行情節(jié)化、理性化的統(tǒng)調(diào)布局和 必要的圖像符號(hào)化處理。 必須考慮網(wǎng)頁(yè)上各構(gòu)成要素之間的視覺流程，能自然而有 序地達(dá)到信息訴求重點(diǎn)的位置，突出主題。注意提高網(wǎng)頁(yè)信 息內(nèi)容的視讀性，在視覺上著力強(qiáng)調(diào)網(wǎng)頁(yè)的訴求重點(diǎn)。 注意保護(hù)網(wǎng)頁(yè)在視覺上的相對(duì)均衡感，不論是正常的均衡 或是異常的均衡，均應(yīng)有相應(yīng)的均衡和律動(dòng)感，使其在網(wǎng)頁(yè) 上得到正確的配置，否則會(huì)失去必要的安定感。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n（3）網(wǎng)頁(yè)創(chuàng)意設(shè)計(jì)的原理和準(zhǔn)則 進(jìn)行網(wǎng)頁(yè)的創(chuàng)意設(shè)計(jì)時(shí)，應(yīng)遵循以下幾條構(gòu)成原則 幾條構(gòu)成原則： 幾條構(gòu)成原則 突出主題要素。注意網(wǎng)頁(yè)設(shè)計(jì)中的空白處理。注重整體的 對(duì)比因素。 創(chuàng)造一定的韻律感。它反映在網(wǎng)頁(yè)設(shè)計(jì)中利用有力的線條、 形體及色彩形成一種有節(jié)奏性的律動(dòng)感，能引導(dǎo)人的視覺以 一種流暢而有停頓的方式運(yùn)動(dòng)。既有視覺的連續(xù)性又有間歇 性，使人能夠抑揚(yáng)起落地瀏覽整個(gè)網(wǎng)頁(yè)，閱讀時(shí)感到輕松而 又富于韻味。 網(wǎng)頁(yè)的創(chuàng)意設(shè)計(jì)還必須重視“形象思維”的情感象征意義 的傳達(dá)，以有別于知識(shí)性思考形式審美結(jié)構(gòu)的營(yíng)造。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n（4）網(wǎng)頁(yè)創(chuàng)意設(shè)計(jì)的形式和表現(xiàn)手法 點(diǎn)、線、面 形狀間的組合和構(gòu)成關(guān)系 形狀與空間關(guān)系 構(gòu)架與空間 節(jié)奏與韻律 對(duì)比，調(diào)和與統(tǒng)一 裝飾與趣味 特異nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n4．網(wǎng)站名稱的設(shè)計(jì) ． 網(wǎng)站的名稱，也稱為網(wǎng)站的標(biāo)題。網(wǎng)站的名稱應(yīng)是它主題的 一部分，也應(yīng)是網(wǎng)站設(shè)計(jì)的一部分，一個(gè)好的主題應(yīng)該包括 一個(gè)好的主題應(yīng)該包括 給網(wǎng)站起一個(gè)好的名字，如圖5-1所示。如果網(wǎng)站題材和主 給網(wǎng)站起一個(gè)好的名字 題已經(jīng)確定，就要圍繞題材和主題給網(wǎng)站起一個(gè)名字。和現(xiàn) 實(shí)生活中的商標(biāo)一樣，網(wǎng)站名稱是否正氣、響亮、易記，這 對(duì)網(wǎng)站的形象和宣傳推廣有很大影響，對(duì)網(wǎng)站主題的表現(xiàn)也 有很大的影響。 但是，也有些網(wǎng)站名稱平平，而內(nèi)容卻十分突出。這些網(wǎng)站 的特點(diǎn)是開始的時(shí)候訪問量不太大，但一段時(shí)間之后訪問量 卻與日俱增。這種情況也是很常見的，不過網(wǎng)站的發(fā)展就走 了不少的彎路，如果一開始就使用一個(gè)人人記得住的名字， 這樣再加上內(nèi)容與眾不同，一定會(huì)成為一個(gè)成功的網(wǎng)站的。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n網(wǎng)站名稱設(shè)計(jì)的一般規(guī)則 一般規(guī)則： 一般規(guī)則 （1）名稱要正，要符合人類社會(huì)公認(rèn)的文明標(biāo)準(zhǔn)和規(guī)范。 要合法、合情、合理，不能用帶有反動(dòng)的、色情的、
迷信的、 危害社會(huì)安全的名詞語句。 （2）名稱要易記。根據(jù)中文網(wǎng)站瀏覽者的特點(diǎn)，除非特別 的需要，網(wǎng)站的名字最好用中文名稱，不要使用英文或者中 英文混合型名稱，因?yàn)橹形拿指H切更好記。另外，網(wǎng)站 名稱的字?jǐn)?shù)應(yīng)該控制在六個(gè)字（最好四個(gè)字）以內(nèi)，比如 “阿里巴巴”、“網(wǎng)易”等。 （3）名稱要有特色。名稱如果能體現(xiàn)一定的文化內(nèi)涵，給 瀏覽者更多的視覺沖擊和空間想象力，則為上品。例如：音 樂前衛(wèi)，網(wǎng)頁(yè)陶吧，e書時(shí)空等網(wǎng)站的名字就很有特色。在 體現(xiàn)出網(wǎng)站主題的同時(shí)，又能點(diǎn)出特色之處。 總之,主題和名稱的確立是設(shè)計(jì)網(wǎng)站的第一步,如能設(shè)計(jì)出一 個(gè)既有特色又令人滿意的名稱,花費(fèi)再多的時(shí)間和精力都是值 得的。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n5．網(wǎng)站的標(biāo)志（logo）和網(wǎng)頁(yè)的圖標(biāo)設(shè)計(jì) ．網(wǎng)站的標(biāo)志（ ） 網(wǎng)站的標(biāo)志就如同商標(biāo)一樣，是網(wǎng)站特色的集中體現(xiàn)。它對(duì) 對(duì) 外宣傳網(wǎng)站的形象，對(duì)內(nèi)反映網(wǎng)站的內(nèi)涵。 外宣傳網(wǎng)站的形象，對(duì)內(nèi)反映網(wǎng)站的內(nèi)涵 一個(gè)好的網(wǎng)站標(biāo)志通常既要具有瑯瑯上口的名字，又要具有 令人印象深刻的圖片造型，讓人看見logo就能聯(lián)想起你的站 點(diǎn)。 圖標(biāo)的代表了網(wǎng)頁(yè)上一個(gè)部分的內(nèi)容，也能對(duì)欄目?jī)?nèi)容進(jìn)行 裝飾。下面分別介紹網(wǎng)站的標(biāo)志設(shè)計(jì)和網(wǎng)頁(yè)的圖標(biāo)設(shè)計(jì)。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n（1）網(wǎng)站標(biāo)志的類型 為你的網(wǎng)站設(shè)計(jì)一個(gè)好的logo，對(duì)提高你網(wǎng)站的形象有很大 的幫助，一般來說，網(wǎng)站的logo可以分為主圖標(biāo)和副圖標(biāo)兩 種類型。 有時(shí)你進(jìn)入一個(gè)網(wǎng)站時(shí)，看到的并不是網(wǎng)站的首頁(yè)，而是一 幅圖畫，你要點(diǎn)擊圖形或者首頁(yè)上的其他鏈接才能進(jìn)入首頁(yè)， 這幅圖畫就是網(wǎng)站的主圖標(biāo) 主圖標(biāo)。在進(jìn)入了首頁(yè)之后，一般在網(wǎng) 主圖標(biāo) 頁(yè)的右上角有一個(gè)很小的logo，這就是網(wǎng)站的副圖標(biāo) 副圖標(biāo)。設(shè)置 副圖標(biāo) 主圖標(biāo)的作用，就是讓人們進(jìn)入你的網(wǎng)站之前，先給人一個(gè) 總體的印象。網(wǎng)站的副圖標(biāo)就是放在首頁(yè)或者所有頁(yè)面中的 代表了網(wǎng)站形象的一幗小圖片。當(dāng)沒有主圖標(biāo)而只有一個(gè)副 圖標(biāo)時(shí)，我們就沒有主副之分而稱這個(gè)副圖標(biāo)為網(wǎng)站的logo 圖標(biāo)）。如無特別說明，下面所說的logo都是指網(wǎng)站的副圖 標(biāo)。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n下面就詳細(xì)介紹兩個(gè)重要的 logo類型。 純文字型的logo。 純文字型的 這類logo一般是由網(wǎng)站的名 稱、網(wǎng)址，或者一兩個(gè)能概 括角色內(nèi)容的詞構(gòu)成。當(dāng)然， 字體要跟文章中的字體有很 大的分別，字的顏色可以鮮 艷一些，引人注目一點(diǎn)。要 注意的是，選擇合適的文字 作為logo和文字之間的相互 搭配是很重要的。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n圖形加文字的logo。 。 圖形加文字的 這類logo一般由一
個(gè)或幾個(gè) 小圖案再配合文字組成。圖 案必須能反映出網(wǎng)站的特色， 而已必須要精巧，做到小巧 玲就最合適了。而文字的內(nèi) 容也可以與純文字型logo的 內(nèi)容一樣。由于文字與圖案 的配合更能體現(xiàn)網(wǎng)站的風(fēng)格， 這類logo在網(wǎng)上更加常用。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n（2）網(wǎng)站標(biāo)志的設(shè)計(jì) 網(wǎng)站標(biāo)志的設(shè)計(jì)并不是漂亮 就行，它需綜合考慮網(wǎng)站的 性質(zhì)、網(wǎng)站的特色、網(wǎng)站所 在地的歷史文化等諸多方面 的因素。 比如門戶網(wǎng)站在設(shè)計(jì)時(shí)就必 須考慮門戶站點(diǎn)的性質(zhì)。新 浪 網(wǎng) （ www.sina.com.cn ） 在設(shè)計(jì)其網(wǎng)站標(biāo)志時(shí)就非常 成功，它那只大眼睛無時(shí)不 向人門傳送“新浪就是你的 眼睛，能幫助你快速地找到 你想要的東西”這一信息。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n又比如政府網(wǎng)站不僅需要考慮嚴(yán)肅認(rèn)真的政府形象，還需 要考慮政府所在地的歷史文化。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n總之，網(wǎng)站標(biāo)志的設(shè)計(jì)既要有特色，醒目，又要符合網(wǎng)站的 網(wǎng)站標(biāo)志的設(shè)計(jì)既要有特色，醒目， 網(wǎng)站標(biāo)志的設(shè)計(jì)既要有特色 內(nèi)涵。設(shè)計(jì)Logo也有較大程度取決于創(chuàng)意。 內(nèi)涵 標(biāo)志的設(shè)計(jì)創(chuàng)意來自你網(wǎng)站的名稱和內(nèi)容，可以用有代表性 的人物、動(dòng)物和花草；也可以用中文、英文字母，或者各種 符號(hào)、圖案等等。還可通過卡通化和藝術(shù)化的手段或者用英 文字母通過不同字體組合，以及顏色的變化來表現(xiàn)他們的效 果。 另外，借鑒其他網(wǎng)站的LOGO制作是自己制作LOGO的很好 的手段。例如 webdesigner（網(wǎng)頁(yè)設(shè)計(jì)師），我們將其中E 字母大寫一下，wEbdEsigEr，感覺怎么樣,這其實(shí)就是一種 創(chuàng)意。如果你能夠在你的網(wǎng)頁(yè)上也加上那么幾下神來之筆， 你創(chuàng)造出來的Logo也許會(huì)深深印在人們心中。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n（3）網(wǎng)站標(biāo)志設(shè)計(jì)的注意事項(xiàng)： 體現(xiàn)形象。利用有代表性的人物、動(dòng)物和花草，作為設(shè)計(jì) 要體現(xiàn)形象 體現(xiàn)形象 的藍(lán)本，加以卡通化和藝術(shù)化。例如迪斯尼的米老鼠，搜狐 的卡通狐貍，鯊?fù)w壇的籃球鯊魚。 要體現(xiàn)專業(yè) 體現(xiàn)專業(yè)?？梢砸员緦I(yè)有代表的物品作為標(biāo)志。比如中 體現(xiàn)專業(yè) 國(guó)銀行的銅板標(biāo)志，奔馳汽車的方向盤標(biāo)志。 要體現(xiàn)特色 體現(xiàn)特色。最常用和最簡(jiǎn)單的方式是用自己網(wǎng)站的英文名 體現(xiàn)特色 稱作標(biāo)志。采用不同的字體，字母的變形，字母的組合可以 很容易制作好自己的標(biāo)志。比如：soim是用soim的英文作為 標(biāo)志，新浪用字母sina 眼睛作為標(biāo)志。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n圖標(biāo)設(shè)計(jì)的技巧通常有以下 幾種。 （1）欄目標(biāo)題前加上一個(gè)小 目標(biāo) 細(xì)看網(wǎng)易網(wǎng)站的首頁(yè)，你會(huì) 發(fā)現(xiàn)在有些標(biāo)題欄目之前， 都有一個(gè)趣的符號(hào)標(biāo)志 符號(hào)標(biāo)志，而 符號(hào)標(biāo)志 且這些標(biāo)志大多數(shù)反映了欄 目的內(nèi)容。例如在“通
信” 一欄，就用了一個(gè)代表信封 的圖標(biāo)，在“娛樂”一欄， 放置了一個(gè)游戲手柄的小圖 標(biāo)等。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n（2）廣告圖標(biāo)的安排 一個(gè)成功的商業(yè)網(wǎng)站，除了正上方的廣告橫幅（banner）以 外，往往還有不止一個(gè)作為廣告宣傳功能的圖標(biāo)。 為了向?yàn)g覽者提供更多廣告客戶的信息，一般這些圖標(biāo)都使 用gif動(dòng)畫形式，把文字和圖片輪流顯示。 21世紀(jì)網(wǎng)站在這方面做得很好，他們的訣竅就是把這些圖標(biāo) 放到欄目之間的空隙處，而且盡量選擇文字多、圖標(biāo)少的地 方。這樣，既為文字增加了生氣，增添了網(wǎng)頁(yè)的色彩，又滿 足了廣告客戶的要求。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n（3）根據(jù)其他功能而設(shè)置的圖標(biāo) 由于21世紀(jì)網(wǎng)站是一個(gè)很龐大的網(wǎng)站，有很多方面的功能， 如果這些功能用圖標(biāo)來說明，再加上少量必要的文字，會(huì)收 到更好的效果。 可以看到在免費(fèi)信箱登錄框前面，就又有一個(gè)形象的信封標(biāo) 志，那么這個(gè)登錄框的功能就不言而喻了。我們還可以看到 一個(gè)提供21cn電話服務(wù)的圖標(biāo)，只要點(diǎn)擊一下該圖標(biāo)，就會(huì) 進(jìn)入到提供服務(wù)的鏈接頁(yè)中。 另外，為圖標(biāo)加上鏈接，就可以作為與其他站點(diǎn)的友情鏈接， 這種鏈接方法比直接用文字更直觀。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n6．設(shè)計(jì)網(wǎng)站的宣傳標(biāo)語。 ．設(shè)計(jì)網(wǎng)站的宣傳標(biāo)語。 宣傳標(biāo)語可以說是網(wǎng)站的“心”，是網(wǎng)站的精神，它是用一 用一 句話甚至一個(gè)詞來高度概括的網(wǎng)站要實(shí)現(xiàn)的目標(biāo)。它類似實(shí) 句話甚至一個(gè)詞來高度概括的網(wǎng)站要實(shí)現(xiàn)的目標(biāo) 際生活中的廣告金句一樣。 好的網(wǎng)站宣傳標(biāo)語會(huì)使網(wǎng)站名氣更大，更容易成為“名牌”。 宣傳標(biāo)語可以采用夸張、求實(shí)、奇特、幽默等各種各樣的方 法去實(shí)現(xiàn)。 例如：飛利浦的“讓我們做的更好”；e龍網(wǎng)的“e網(wǎng)情深”； Intel腦“給你一個(gè)奔騰的心”；鵲巢的“味道好極了”；麥 斯威爾的“好東西和好朋友一起分享”等等。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n5.1.2 設(shè)計(jì)網(wǎng)站的界面風(fēng)格 網(wǎng)頁(yè)設(shè)計(jì)作為一種視覺語言，要講究編排和布局。為達(dá)到最 佳的視覺表現(xiàn)效果，應(yīng)講究界面整體布局的合理性，使瀏覽 者有一個(gè)流暢的視覺體驗(yàn)。這種視覺效果和視覺體驗(yàn)是通過 界面風(fēng)格來完成的，是通過文字和圖形的空間組合所表達(dá)出 的和諧美來表現(xiàn)的。 網(wǎng)站的界面風(fēng)格與網(wǎng)站的主題風(fēng)格既有區(qū)別又有聯(lián)系，前者 主要是指網(wǎng)站每一個(gè)頁(yè)面的背景色彩、前景色彩、頁(yè)面結(jié)構(gòu)、 頁(yè)面圖案、文字之間的相互搭配，而后者主要是指整個(gè)網(wǎng)站 給人的總體印象。即：前者主要體現(xiàn)了網(wǎng)站的形式方面統(tǒng)一 的問題，而后者則體現(xiàn)了網(wǎng)頁(yè)的內(nèi)容方面的統(tǒng)一問題。它們 相互之間又是有聯(lián)系的，一個(gè)網(wǎng)站的
主題風(fēng)格決定了它應(yīng)該 用什么界面來把這個(gè)主題表現(xiàn)出來，而設(shè)計(jì)得當(dāng)?shù)慕缑嬗謺?huì) 更加突出主題。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n1．網(wǎng)頁(yè)界面風(fēng)格設(shè)計(jì)的一般原則 ． 首先要把握總體原則。整個(gè)網(wǎng)站頁(yè)面應(yīng)該保持一致的風(fēng)格 整個(gè)網(wǎng)站頁(yè)面應(yīng)該保持一致的風(fēng)格， 整個(gè)網(wǎng)站頁(yè)面應(yīng)該保持一致的風(fēng)格 給瀏覽者以整體的美感。在設(shè)計(jì)中切勿將各組成部分孤立分 散，那樣會(huì)使Web頁(yè)面呈現(xiàn)出一種枝蔓紛雜的凌亂效果。 網(wǎng)頁(yè)中各元素命名也應(yīng)保持一致，同樣的元素應(yīng)該用同樣的 網(wǎng)頁(yè)中各元素命名也應(yīng)保持一致 命名，做到即使某個(gè)元素的表述不清楚也能從上下文推斷其 含義；網(wǎng)頁(yè)中各元素功能應(yīng)保持一致 網(wǎng)頁(yè)中各元素功能應(yīng)保持一致，完成同樣的功能應(yīng)該 網(wǎng)頁(yè)中各元素功能應(yīng)保持一致 網(wǎng)頁(yè)元素的風(fēng)格也應(yīng)保持一致，元素 盡量使用同樣的元素；網(wǎng)頁(yè)元素的風(fēng)格也應(yīng)保持一致 網(wǎng)頁(yè)元素的風(fēng)格也應(yīng)保持一致 的美觀風(fēng)格、擺放位置在同一個(gè)界面和不同界面之間都應(yīng)該 保持一致。 表現(xiàn)在網(wǎng)頁(yè)布局上應(yīng)保持一致 網(wǎng)頁(yè)布局上應(yīng)保持一致；多樣化的格式和標(biāo)志會(huì)使網(wǎng) 網(wǎng)頁(yè)布局上應(yīng)保持一致 頁(yè)更生動(dòng)，但要把握一個(gè)“度”。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n另外，界面風(fēng)格設(shè)計(jì)要考慮各因素的平衡統(tǒng)一 界面風(fēng)格設(shè)計(jì)要考慮各因素的平衡統(tǒng)一。雖然網(wǎng)頁(yè)的 界面風(fēng)格設(shè)計(jì)要考慮各因素的平衡統(tǒng)一 設(shè)計(jì)不等同于平面設(shè)計(jì)，但是它們有許多相近之處，應(yīng)充分 加以利用和借鑒。 在界面設(shè)計(jì)中要運(yùn)用對(duì)比與調(diào)和、對(duì)稱與平衡、節(jié)奏與韻律 以及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建 立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對(duì)稱原則在頁(yè)面設(shè) 計(jì)中，它的均衡有時(shí)會(huì)使頁(yè)面顯得呆板，但如果加入一些富 有動(dòng)感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會(huì) 達(dá)到比較好的效果。 點(diǎn)、線、面作為視覺語言中的基本元素，要使用點(diǎn)、線、面 的互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁(yè)面效果。網(wǎng) 頁(yè)設(shè)計(jì)中的點(diǎn)、線、面的運(yùn)用并不是孤立的，很多時(shí)候都需 要將它們結(jié)合起來，表達(dá)完美的設(shè)計(jì)意境。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n2．版面布局風(fēng)格 ． 網(wǎng)頁(yè)界面的布局設(shè)計(jì)，是指文字、圖形圖像、色彩、動(dòng)畫和 視頻多媒體等網(wǎng)頁(yè)對(duì)象的傳達(dá)要素，根據(jù)特定的內(nèi)容和主題， 在網(wǎng)頁(yè)限定的范圍內(nèi)將設(shè)計(jì)意圖以視覺形式表現(xiàn)出來。布局 問題是網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)舉足輕重的問題，網(wǎng)站的頁(yè)面（特別 是主頁(yè)）中有各種各樣的部件，比如圖片、圖標(biāo)、文字段和 菜單，每種類型的部件又可以分為相對(duì)獨(dú)立的模塊。網(wǎng)頁(yè)的 布局問題就是考慮如何將這些模塊有機(jī)地組織在一個(gè)網(wǎng)頁(yè)上， 使這些模塊既完
成各自的功能，又能和其他模塊互相協(xié)調(diào)， 不但不會(huì)相互沖突，而且能相互襯托，令整個(gè)網(wǎng)頁(yè)成為一個(gè) 不可分割的整體。理想狀況下，設(shè)計(jì)良好的網(wǎng)頁(yè)應(yīng)該能讓用 戶立刻明白各區(qū)域的作用，并且能在明確定義的區(qū)域中快速 找到自己關(guān)心的內(nèi)容或者放心地跳過自己不需要的部分。 設(shè)計(jì)網(wǎng)頁(yè)的布局效果是構(gòu)造網(wǎng)站獨(dú)特風(fēng)格的最主要的工作。 設(shè)計(jì)網(wǎng)頁(yè)的布局效果是構(gòu)造網(wǎng)站獨(dú)特風(fēng)格的最主要的工作。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n與報(bào)紙、雜志相比，報(bào)紙、雜志對(duì)不同的版面需要不同的布 局，但是網(wǎng)站的所有網(wǎng)頁(yè)組成的是一個(gè)層次型結(jié)構(gòu)，每一層 網(wǎng)頁(yè)都需要建立到下一層網(wǎng)頁(yè)的超鏈接索引，所以網(wǎng)頁(yè)所處 的層次越高，網(wǎng)頁(yè)中的內(nèi)容就越豐富，網(wǎng)頁(yè)的布局就越復(fù)雜。 比如小說網(wǎng)主頁(yè) 小說網(wǎng)主頁(yè)（http://www.xiaoshuo.com/），其中的內(nèi) 小說網(wǎng)主頁(yè) 容非常豐富，所以它的版面布局就非常復(fù)雜，而下面一層的 欄目首頁(yè)，因?yàn)閮?nèi)容比較集中，所以它的布局比主頁(yè)就簡(jiǎn)單 欄目首頁(yè) 了一些。 再打開一個(gè)具體的內(nèi)容網(wǎng)頁(yè)，可以看到內(nèi)容網(wǎng)頁(yè) 內(nèi)容網(wǎng)頁(yè)的布局更加 內(nèi)容網(wǎng)頁(yè) 簡(jiǎn)單，網(wǎng)頁(yè)的上邊是一個(gè)頭部，下邊就是具體的內(nèi)容。果將 這個(gè)特點(diǎn)反過來，便得到了網(wǎng)站在進(jìn)行版面布局設(shè)計(jì)時(shí)應(yīng)采 用的原則，那就是首先對(duì)主頁(yè)進(jìn)行版面布局，然后在主頁(yè)布 局的基礎(chǔ)上對(duì)欄目首頁(yè)進(jìn)行版面布局，接著往下，最后對(duì)內(nèi) 容網(wǎng)頁(yè)進(jìn)行版面布局。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n圖示5-10就非常清晰地顯示了上面例子中三層網(wǎng)頁(yè)的版面布 局，從這幅圖可以總結(jié)出網(wǎng)站在版面布局上的一個(gè)特點(diǎn)，那 就是從網(wǎng)站層次型結(jié)構(gòu)的頂層主頁(yè)到最底層的內(nèi)容網(wǎng)頁(yè)，版 面布局不斷簡(jiǎn)化。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n3．版面布局的操作 ． 無論是主頁(yè)、欄目首頁(yè)還是內(nèi)容網(wǎng)頁(yè)，作為網(wǎng)頁(yè)本身，在進(jìn) 行單個(gè)網(wǎng)頁(yè)的版面布局時(shí)所采用的步驟和方法都是一樣的， 下面就具體介紹一下有關(guān)版面布局的一些基本知識(shí)。 （1）常用的頁(yè)面布局形式。n網(wǎng)站標(biāo)志 廣告 網(wǎng)站標(biāo)志 廣告 條 主 內(nèi)容 菜 單 內(nèi)容 網(wǎng)站標(biāo)志 網(wǎng)站標(biāo)志 主菜單 廣 告 欄 內(nèi)容 網(wǎng)站標(biāo)志nn主 菜 單 1nn版本說 明nn2nn廣告條nn3nn4nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n①“T”型布局 所謂“T”結(jié)構(gòu)，就是指頁(yè)面頂部為橫條網(wǎng)站標(biāo)志 廣告條， 下方左面為主菜單，右面顯示內(nèi)容的布局。因?yàn)椴藛螚l背景 較深，整體效果類似英文字母“T”，所以我們稱之為“T”形 布局?！癟”型布局是網(wǎng)頁(yè)設(shè)計(jì)中用得最廣泛的一種布局方式。 這種布局的優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰，主次分明，是初學(xué)者最容 易掌握的布局方法。缺點(diǎn)是規(guī)矩呆板，如果
細(xì)節(jié)色彩上不注 意，很容易讓人“看之無味”。 ②“口”型布局 “口”型布局是一個(gè)象形的說法，就是頁(yè)面一般上下各有一 個(gè)廣告條，左面是主菜單，右面放友情連接等，中間是主要 內(nèi)容。這種布局的優(yōu)點(diǎn)是充分利用版面，信息量大。缺點(diǎn)是 頁(yè)面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型 設(shè)計(jì)，如網(wǎng)易壁紙站。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n③“三”型布局 “三”型布局是頁(yè)面上橫向兩條色塊,將頁(yè)面整體分割為四部 分，色塊中大多放廣告條。這種布局多用于國(guó)外站點(diǎn)，國(guó)內(nèi) 站點(diǎn)較少用。 ④對(duì)稱對(duì)比布局 對(duì)稱對(duì)比布局，顧名思義，采取左右或者上下對(duì)稱的布局， 一半深色，一半淺色，一般用于設(shè)計(jì)型站點(diǎn)。優(yōu)點(diǎn)是視覺沖 擊力強(qiáng)，缺點(diǎn)是將兩部分有機(jī)地結(jié)合比較困難。 ⑤POP布局 POP引自廣告術(shù)語，就是指頁(yè)面布局象一張宣傳海報(bào),以一張 精美圖片作為頁(yè)面的設(shè)計(jì)中心。常用于時(shí)尚類站點(diǎn)，比如 ELLE.com。優(yōu)點(diǎn)是頁(yè)面色彩亮麗，引人注目。缺點(diǎn)就是網(wǎng) 頁(yè)下載速度慢，但作為版面布局還是值得借鑒的。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n（2）版面布局的步驟和方法 版面布局也是一個(gè)創(chuàng)意的問題，但要比站點(diǎn)整體的創(chuàng)意容易， 有規(guī)律。 因?yàn)椴煌挠脩艨赡苁褂貌煌娘@示器和網(wǎng)頁(yè)瀏覽器，所以 同一個(gè)網(wǎng)頁(yè)在不同用戶的計(jì)算機(jī)上顯示可能是不一樣的。 所以在設(shè)計(jì)版面布局之前，首先要做的就是確定這個(gè)網(wǎng)頁(yè)主 要面向哪種配置，即主要在哪種分辨率 分辨率下進(jìn)行顯示，是面向 分辨率 800×600呢還是面向1024×768。800×600是目前大多數(shù) 顯示器設(shè)置的分辯率，所以很多網(wǎng)站在設(shè)計(jì)時(shí)都針對(duì) 800×600進(jìn)行設(shè)計(jì)。但是1024×768卻是未來的發(fā)展趨勢(shì)， 將日益成為主流的分辨率模式，所以在設(shè)計(jì)時(shí)最好能兼顧這 種分辯率。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n第二步是確定網(wǎng)頁(yè)的框架。框架指的是怎么樣從整體把頁(yè)面 劃分開來，框架有很多種，最簡(jiǎn)單的是圖5-14所示的左右型 框架和上下型框架，這種框架一般有大小兩塊區(qū)域，其中一 塊較大的區(qū)域放置網(wǎng)頁(yè)的主體內(nèi)容，它通常占據(jù)整個(gè)屏幕的 五分之四。而另一塊較小的區(qū)域通常放置的是網(wǎng)站標(biāo)志和導(dǎo) 航條。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n將上下型框架和左右型框架結(jié)合起來可以形成復(fù)合型框架， 如圖5-15所示顯示的就是幾種比較常見的復(fù)合型框架。比如 IBM公司主頁(yè)和風(fēng)雨網(wǎng)絡(luò)文學(xué)網(wǎng)的欄目首頁(yè)采用的就是圖中 的第一種復(fù)合型框架，而易趣網(wǎng)主頁(yè)和微軟公司主頁(yè)則采用 了圖中的第四種復(fù)合型框架。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n當(dāng)然，并不是所有 的網(wǎng)頁(yè)都是有框架 的。它通常將網(wǎng)頁(yè) 的內(nèi)容很好地融合 到圖片或者FLASH 動(dòng)畫中，
給人一種 與眾不同的感覺。 這種無框架的設(shè)計(jì) 通常很難，需要很 高的美術(shù)功底才行。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n第三步就是在框架的不 同區(qū)域上安排不同的內(nèi) 容。 人們?cè)跒g覽一個(gè)網(wǎng)頁(yè)的 時(shí)候，通常會(huì)把第一眼 通常會(huì)把第一眼 停留在網(wǎng)頁(yè)的左上角或 中間的地方，然后才會(huì) 中間的地方 瀏覽其他部分。這個(gè)部 分通常稱為焦點(diǎn)，所以 在布局內(nèi)容的時(shí)候，應(yīng) 該把最能傳達(dá)信息、最 能吸引人的內(nèi)容放在這 些地方，比如網(wǎng)站標(biāo)志 和最新新聞。nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n因此，具體版面布局的方法是先確定框架，然后在框架的不 同區(qū)域上安排不同的內(nèi)容。 具體在操作上可用下列方法： 草案：新建頁(yè)面就象一張白紙，沒有任何表格，框架和約 草案 定俗成的東西,你可以盡可能的發(fā)揮你的想象力，將你想到的 “景象”畫上去。 粗略布局：在草案的基礎(chǔ)上，將你確定需要放置的功能模 粗略布局 塊安排到頁(yè)面上。主要包含網(wǎng)站標(biāo)志，主菜單，新聞，搜索， 友情鏈接，廣告條，郵件列表，計(jì)數(shù)器，版權(quán)信息等。 這種方法是用專業(yè)制圖軟件進(jìn)行布局。建議使用Photoshop。 定案：將粗略布局精細(xì)化，具體化。 定案nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n網(wǎng)頁(yè)制作工具的布局技術(shù)有： 使用表格布局 表格就是一些你通過HTML代碼創(chuàng)建出來的矩形格，在表格 中可以放置圖片、文字或任何你想放置的內(nèi)容。表格的優(yōu)點(diǎn) 在于它的靈活性，你可以將表格展開至全部頁(yè)面，也以只占 用其中的部分空間，選擇權(quán)全部由你掌握。了解表格的第一 步是你應(yīng)該知道可以將表格都制成哪些形式，它們是正方形 還是矩形？ 這 一個(gè) 是 表格nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n還可以把表格變得更加古怪些：nn這 一個(gè)nn是 古怪的 表格nn?.1 網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)n表格由三個(gè)基本標(biāo)志符組 成，它們是： 表 格
| 。 。 需要記住的是 | 標(biāo)志符 標(biāo)志符 總是在 | |||
| cell 1 | cell 2 |
| cell 3 | cell 4 |