試談網(wǎng)站設(shè)計全攻略

1、網(wǎng)站設(shè)計全攻略網(wǎng)站設(shè)計的考慮1、定位你的網(wǎng)站主題和名稱2、定位你的網(wǎng)站CI形象3、確定網(wǎng)站的欄目和版塊4、確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)5、確定網(wǎng)站的整體風(fēng)格和創(chuàng)意設(shè)計6、首頁的設(shè)計7、版面布局的原理8、網(wǎng)頁色彩搭配的原理9、字體的設(shè)定10、網(wǎng)頁中表格的運(yùn)用專門榮幸，能在那個地點(diǎn)和大伙兒一起探討關(guān)于網(wǎng)站設(shè)計的問題。目前，網(wǎng)絡(luò)上有關(guān)網(wǎng)頁制作的各種教程差不多相當(dāng)多，能夠方便地學(xué)習(xí)到最新的技術(shù)和技巧。但是，有關(guān)網(wǎng)頁的設(shè)計,比如設(shè)計靈感的實(shí)現(xiàn)，風(fēng)格的確定，進(jìn)展策略，技術(shù)的篩選等的文章卻比較少，許多網(wǎng)友往往有好的材料，卻苦惱沒有好的具有表現(xiàn)力的設(shè)計。受到索易主持人的鼓舞，阿捷整理了一些網(wǎng)頁的設(shè)計心得，在那

2、個地點(diǎn)和大伙兒交流一下，也算拋磚引玉了，希望得到您的指正，假如您有好的建議和心得，也請發(fā)稿給我ajie,在此先道一聲感謝！網(wǎng)站設(shè)計，包含的內(nèi)容特不多。大體分兩個方面：一方面是純網(wǎng)站本身的設(shè)計比如文字排版，圖片制作，平面設(shè)計，三維立體設(shè)計，靜態(tài)無聲圖文，動態(tài)有聲影像等；另一方面是網(wǎng)站的延伸設(shè)計，包括網(wǎng)站的主題定位和掃瞄群的定位，智能交互，制作策劃，形象包裝，宣傳營銷等等。這兩方面相輔相成（感受有點(diǎn)象寫辨證論文：），加之網(wǎng)絡(luò)技術(shù)的飛速進(jìn)展，要提出一個絕對正確和權(quán)威的設(shè)計思路是不可能的，要想在一篇文章中概括出來也專門難，因此阿捷依照建設(shè)一個網(wǎng)站的思路，將自己幾年來網(wǎng)站設(shè)計制作的心得整理成一個系列“講

3、座”，告訴給大伙兒（注意：我并可不能特不具體地講某一個技術(shù)或制作技巧，重點(diǎn)在于思路）希望能給您一些關(guān)心。下面是大致的提綱：1.定位你的網(wǎng)站主題和名稱； 2.定位你的網(wǎng)站CI形象； 3.確定你的欄目和版塊； 4.網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計 5.網(wǎng)站的層次結(jié)構(gòu)和鏈接結(jié)構(gòu) 6.首頁的設(shè)計 7.版面布局的竅門 8.色彩的搭配 9.效果與速度 10.替掃瞄者考慮 11.細(xì)微之處見功力 12.建設(shè)完成度與推出時刻 13.交互性與親和度 14.考慮不同的掃瞄器和分辨率 15.字體的設(shè)置和表格的嵌套 16.新技術(shù)的運(yùn)用取舍 17.設(shè)計好你的banner和位置 18.語句文字-融入感情 19.對網(wǎng)站設(shè)計初學(xué)者的建議

4、以上是本“系列”文章的提綱，會依照實(shí)際撰寫情況作些變動。每星期一篇。我們開始之前，首先明確幾個前提：一網(wǎng)站設(shè)計與網(wǎng)站制作。我們講網(wǎng)站“設(shè)計”而不是網(wǎng)站“制作”，它們的區(qū)不在于設(shè)計是一個考慮的過程，而制作只是將考慮的結(jié)果表現(xiàn)出來。一個成功的網(wǎng)站首先需要一個優(yōu)秀的設(shè)計，然后輔之優(yōu)秀的制作。設(shè)計是網(wǎng)站的核心和靈魂，一個相同的設(shè)計能夠有多種制作表現(xiàn)的方式。二我們講的“網(wǎng)站”是指有確定主題和明確目的的有用性站點(diǎn)，不包括純表現(xiàn)類或者純文字類網(wǎng)站。三在文章中，可能舉例講明或點(diǎn)評到某些具體站點(diǎn)。首先申明，阿捷不存在為任何站點(diǎn)作廣告的“嫌疑“。好了，廢話少講，我們進(jìn)入正題：定位你的網(wǎng)站主題和名稱設(shè)計一個站點(diǎn)，首

5、先遇到的問題確實(shí)是定位網(wǎng)站主題。所謂主題也確實(shí)是你的網(wǎng)站的題材。網(wǎng)絡(luò)上的網(wǎng)站題材千奇百怪,琳瑯滿目。只要你想的到，就能夠把它制作出來。下面是美國個人電腦雜志(PC Magazine)評出的99年度排名前100位的全美知名網(wǎng)站的十類題材，對我們有一些參考價值。第1類：網(wǎng)上求職 第2類：網(wǎng)上談天即時信息/ ICQ 第3類：網(wǎng)上社區(qū)討論 / 郵件列表 第4類：計算機(jī)技術(shù) 第5類：網(wǎng)頁/ 網(wǎng)站開發(fā) 第6類：娛樂網(wǎng)站 第7類：旅行 第8類：參考 /資訊 第9類：家庭/教育 第10類：生活/時尚 每個大類都能夠接著細(xì)分，比如娛樂類再分為體育 /電影/ 音樂大類，音樂又能夠按格式分為MP3，VQF，Ra，按

6、表現(xiàn)形式分古典，現(xiàn)代，搖滾等。以上都只是最常見的題材，還有許多專業(yè)的，另類的，獨(dú)特的題材能夠選擇，比如中醫(yī)，熱帶魚，天氣預(yù)報等等，同時，各個題材相聯(lián)系和交叉結(jié)合能夠產(chǎn)生新得題材，例如旅游論壇（旅游+討論），經(jīng)典入球播放（足球+影視）按如此分下去，題材能夠有成千上萬個，你可不能再為題材重復(fù)，難以選擇而苦惱了吧:)關(guān)于題材的選擇，我的建議是：1. 主題要小而精。定位要小，內(nèi)容要精。假如你想制作一個包羅萬象的站點(diǎn)，把所有您認(rèn)為精彩的東西都放在上面，那么往往會事與愿違，給人的感受是沒有主題，沒有特色，樣樣有卻樣樣都專門膚淺，因為您不可能有那么多的精力去維護(hù)它。網(wǎng)絡(luò)的最大特點(diǎn)確實(shí)是新和快，目前最熱門的個

7、人主頁差不多上天天更新甚至幾小時更新一次。最新的調(diào)查結(jié)果也顯示，網(wǎng)絡(luò)上的“主題站”比“萬全站”更受人們喜愛，就好比專賣店和百貨商店，假如我需要買某方面的東西，確信會選擇專買店。再舉個例子，我的一位網(wǎng)友KK希望制作文學(xué)方面的題材，然而文學(xué)也包括許多許多內(nèi)容，有小講，詩歌，散文；有科幻，武俠，推理；阿捷認(rèn)真了解了他的擅長和想要提供的要緊內(nèi)容，最后將題材定位在網(wǎng)絡(luò)文學(xué)上，刪除了原有的一些無關(guān)的文學(xué)作品，集中擴(kuò)大和整理網(wǎng)絡(luò)文學(xué)作品。網(wǎng)站推出后，專門快受到大伙兒的喜愛。2.題材最好是你自己擅長或者喜愛的內(nèi)容。比如：您對擅長編程，就能夠建立一個編程愛好者網(wǎng)站；對足球感興趣，能夠報道最新的戰(zhàn)況，球星動態(tài)等。

8、如此在制作時，才可不能覺得無聊或者力不從心。興趣是制作網(wǎng)站的動力，沒有熱情，專門難設(shè)計制作出杰出的作品。3.題材不要太濫或者目標(biāo)太高。“太濫”是指到處可見，人人都有的題材；比如軟件下載，免費(fèi)信息?！澳繕?biāo)太高”是指在這一題材上差不多有特不優(yōu)秀，知名度專門高的站點(diǎn)，你要超過它是專門困難的。除非你下決心和有實(shí)力競爭并超過它，記住，在互聯(lián)網(wǎng)上只有第一，人們往往只記得最好的網(wǎng)站，第二第三名的印象則會淺得多。OK，假如你差不多有一個絕妙的主意了，那我們開始為網(wǎng)站起名字。（哎呀，不踢我！）您可能認(rèn)為起名字與網(wǎng)站設(shè)計無關(guān)，阿捷在那個地點(diǎn)白費(fèi)時刻。事實(shí)上網(wǎng)站名稱也是網(wǎng)站設(shè)計的一部分，而且是專門關(guān)鍵的一個要素。你

9、來看，“電腦學(xué)習(xí)室”和“電腦之家”顯然是后者簡練；“迷笛樂園”和“MIDI 樂園”顯然是后者明晰；“兒童天地”和“中國幼兒園”顯然是后者大氣。我們都明白PIIICUP的中文名稱“奔騰”，假如改為“奔馳”，可能就沒有今天這么“火”了:)。和現(xiàn)實(shí)生活中一樣，網(wǎng)站名稱是否正氣，響亮，易記，對網(wǎng)站的形象和宣傳推廣也有專門大阻礙。一般的建議是：1. 名稱要正。那個“正”是阿捷自己的講法，事實(shí)上確實(shí)是要合法，和理，和情。不能用反動的，色情的，迷信的，危害社會安全的名詞語句。2. 名稱要易記。依照中文網(wǎng)站掃瞄者的特點(diǎn)，除非特定需要，網(wǎng)站名稱最好用中文名稱，不要使用英文或者中英文混合型名稱。例如：beyond

10、 studio和超越工作室，后者更親切好記。另外，網(wǎng)站名稱的字?jǐn)?shù)應(yīng)該操縱在六個字（最好四個字）以內(nèi)，比如“XX閣”“XX設(shè)計室”，四個字的能夠用成語，如“一網(wǎng)打進(jìn)”。字?jǐn)?shù)少還有個好處，一般友情鏈接的小logo尺寸是88X31，而六個字的寬度是78左右，適合于其他站點(diǎn)的鏈接排版。3. 名稱要有特色。名稱平實(shí)就能夠同意，假如能體現(xiàn)一定的內(nèi)涵，給掃瞄者更多的視覺沖擊和空間想象力，則為上品。那個地點(diǎn)舉幾個阿捷認(rèn)為專門好的名稱：音樂前衛(wèi)，網(wǎng)頁陶吧，天籟絕音。在體現(xiàn)出網(wǎng)站主題的同時，能點(diǎn)出特色之處?？傊ㄎ活}材和名稱是設(shè)計一個網(wǎng)站的第一步，也是專門重要的一部分。假如能找到一個中意的名稱，花一天時刻翻字典

11、也是值得的:)定位你的網(wǎng)站CI形象所謂CI，是借用的廣告術(shù)語。(CI是英文corporate identity的縮寫)，意思是通過視覺來統(tǒng)一企業(yè)的形象?，F(xiàn)實(shí)生活中的CI策劃比比皆是，杰出的例子如：可口可樂公司，全球統(tǒng)一的標(biāo)志，色彩和產(chǎn)品包裝，給我們的印象極為深刻。更多的例子如SONY,三菱，麥當(dāng)勞等等。一個杰出的網(wǎng)站，和實(shí)體公司一樣，也需要整體的形象包裝和設(shè)計。準(zhǔn)確的，有創(chuàng)意的CI 設(shè)計，對網(wǎng)站的宣傳推廣有事半功倍的效果。在您的網(wǎng)站主題和名稱定下來之后，需要考慮的確實(shí)是網(wǎng)站的CI形象。有網(wǎng)友要問了：我不是學(xué)廣告專業(yè)的，CI對我來講可能太難了吧:( 不用擔(dān)心，阿捷自己也沒有學(xué)過設(shè)計專業(yè)哦。大伙兒

12、只要參考我的一些具體做法和經(jīng)驗，專門容易將自己網(wǎng)站的CI搞定:)1.設(shè)計網(wǎng)站的標(biāo)志(logo).首先你需要設(shè)計制作一個網(wǎng)站的標(biāo)志(logo)。就如同商標(biāo)一樣，logo是你站點(diǎn)特色和內(nèi)涵的集中體現(xiàn)，看見logo就讓大伙兒聯(lián)想起你的站點(diǎn)。注意：那個地點(diǎn)的logo不是指88X31的小圖標(biāo)banner,而是網(wǎng)站的標(biāo)志。標(biāo)志能夠是中文，英文字母，能夠是符號，圖案，能夠是動物或者人物等等。比如：soim是用soim的英文作為標(biāo)志，新浪用字母sina+眼睛作為標(biāo)志。標(biāo)志的設(shè)計創(chuàng)意來自你網(wǎng)站的名稱和內(nèi)容。(1).網(wǎng)站有代表性的人物，動物，花草，能夠用它們作為設(shè)計的藍(lán)本，加以卡通化和藝術(shù)化，例如迪斯尼的米老鼠，

13、搜狐的卡通狐貍，鯊?fù)w壇的籃球鯊魚。(2).網(wǎng)站有專業(yè)性的，能夠以本專業(yè)有代表的物品作為標(biāo)志。比如中國銀行的銅板標(biāo)志，奔馳汽車的方向盤標(biāo)志。(3).最常用和最簡單的方式是用自己網(wǎng)站的英文名稱作標(biāo)志。采納不同的字體， 字母的變形，字母的組合能夠?qū)ｉT容易制作好自己的標(biāo)志。2.設(shè)計網(wǎng)站的標(biāo)準(zhǔn)色彩。網(wǎng)站給人的第一印象來自視覺沖擊，確定網(wǎng)站的標(biāo)準(zhǔn)色彩是相當(dāng)重要的一步。不同的色彩搭配產(chǎn)生不同的效果，并可能阻礙到訪問者的情緒?！皹?biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站型象和延伸內(nèi)涵的色彩。舉個實(shí)際的例子就明白了：IBM的深藍(lán)色，肯得基的紅色條型，windows視窗標(biāo)志上的紅藍(lán)黃綠色塊，都使我們覺得專門貼切，專門和諧。假如將

14、IBM改用綠色或金黃色，我們會有什么感受？一般來講，一個網(wǎng)站的標(biāo)準(zhǔn)色彩不超過3種，太多則讓人眼花繚亂。標(biāo)準(zhǔn)色彩要用于網(wǎng)站的標(biāo)志，標(biāo)題，主菜單和主色塊。給人以整體統(tǒng)一的感受。至于其它色彩也能夠使用，只是作為點(diǎn)綴和襯托，絕不能喧賓奪主。一般來講，適合于網(wǎng)頁標(biāo)準(zhǔn)色的顏色有：藍(lán)色，黃/橙色，黑/灰/白色三大系列色。(注：關(guān)于色彩搭配的具體方法，我們會在本系列文章的第八篇介紹)。3.設(shè)計網(wǎng)站的標(biāo)準(zhǔn)字體。和標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)志，標(biāo)題，主菜單的特有字體。一般我們網(wǎng)頁默認(rèn)的字體是宋體。為了體現(xiàn)站點(diǎn)的“與眾不同” 和特有風(fēng)格，我們能夠依照需要選擇一些特不字體。例如，為了體現(xiàn)專業(yè)能夠使用粗仿宋體，體

15、現(xiàn)設(shè)計精美能夠用廣告體，體現(xiàn)親切隨意能夠用手寫體等等。因此這些差不多上阿捷的個人看法，你能夠依照自己網(wǎng)站所表達(dá)的內(nèi)涵，選擇更貼切的字體。目前常見的中文字體有二三十種，常見的英文字體有近百種，網(wǎng)絡(luò)上還有許多專用英文藝術(shù)字體下載，要查找一款中意的字體并不算困難:)需要講明的是：使用非默認(rèn)字體只能用圖片的形式，因為專門可能掃瞄者的PC里沒有安裝你的特不字體，那么您的辛苦設(shè)計制作便付之東流啦！4.設(shè)計網(wǎng)站的宣傳標(biāo)語。也能夠講是網(wǎng)站的精神，網(wǎng)站的目標(biāo)。用一句話甚至一個詞來高度概括。類似實(shí)際生活中的廣告金句。例如：鵲巢的“味道好極了”；麥斯威爾的“好東西和好朋友一起分享”；Intel的“給你一個奔騰的心”

16、。以上四方面：標(biāo)志，色彩，字體，標(biāo)語，是一個網(wǎng)站樹立CI形象的關(guān)鍵，確切的講是網(wǎng)站的表面文章，設(shè)計并完成這幾步，你的網(wǎng)站將脫胎換骨，整體形象有一個提高。形象地講：你從一個土氣的農(nóng)民轉(zhuǎn)變?yōu)橐晃晃餮b革履的白領(lǐng)人士。(注意：我們只是以平面靜態(tài)來設(shè)計CI,還沒有引入聲音，三維立體等因素。)好了，看了以上的介紹，你應(yīng)該對網(wǎng)站CI有了一個初步的概念。也許不是專門明白，因為那些道理太抽象了，你可能需要一些實(shí)際的，更生動的例子。阿捷會在自己的主頁上同時修改補(bǔ)充一些實(shí)例。下一節(jié)，我們來討論“確定網(wǎng)站的欄目版塊”，歡迎您參與，感謝！確定網(wǎng)站的欄目和版塊設(shè)計的考慮系列文章，今天開始寫第三篇。阿捷不是專業(yè)的網(wǎng)頁設(shè)計師

17、，但阿捷將盡自己所能把那個系列文章寫好，盡可能將自己實(shí)踐過程中總結(jié)的經(jīng)驗和心得告訴給大伙兒，希望能給您一點(diǎn)收獲，一點(diǎn)啟發(fā)。文章中所列觀點(diǎn)如有不同意見，歡迎您來信討論，來信寄ajie，感謝。我們在前二篇文章里學(xué)習(xí)了定位網(wǎng)站主題和確立網(wǎng)站的CI形象。下面是否該進(jìn)入實(shí)質(zhì)性的設(shè)計制作時期呢？答案是：不能。經(jīng)驗告訴我們，建立一個網(wǎng)站好比寫一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰；也好比造一座高樓，首先要設(shè)計好框架圖紙，才能使樓房結(jié)構(gòu)合理。初學(xué)者(包括我自己:-)，最容易犯的錯誤確實(shí)是：確定題材后趕忙開始制作。當(dāng)你一頁一頁制作完畢后才發(fā)覺：網(wǎng)站結(jié)構(gòu)不清晰，目錄龐雜，內(nèi)容東一塊西一塊。結(jié)果不但掃

18、瞄者看得糊涂，自己擴(kuò)充和維護(hù)網(wǎng)站也相當(dāng)困難，您的網(wǎng)站或許就此半途而廢，更糟糕的是：你因此失去了制作主頁的信心和興趣！因此，我們在動手制作網(wǎng)頁前，一定要考慮好以下三方面：1.確定欄目和版塊； 2.確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu) 3.確定網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計今天我們首先來討論“確定網(wǎng)站的欄目和版塊”。網(wǎng)站的題材確定后，相信你差不多收集和組織了許多相關(guān)的資料內(nèi)容。你一定認(rèn)為這些差不多上最好的，確信能吸引網(wǎng)友們來掃瞄網(wǎng)站。然而你有沒有將最好的，最吸引人的內(nèi)容放在最突出的位置呢？有沒有讓好東西在版面分布上占絕對優(yōu)勢呢？我看見許多個人主頁的欄目(主菜單)并不是如此的。舉個例子：有一個以提供動畫素材為主題的

19、站點(diǎn)，它的主欄目是：關(guān)于站長，本站導(dǎo)航，動畫寶庫，本站論壇，本站留言本，聯(lián)系站長。首頁上寫著本站網(wǎng)址和版權(quán)申明(難道還有將本站設(shè)為首頁字樣)。最要緊的，最吸引人的動畫素材在主欄目里占1/6，在首頁上一字沒提。我想即使那個站點(diǎn)的確有大量的，精美的動畫素材，也專門難吸引掃瞄者接著挖掘。欄目的實(shí)質(zhì)是一個網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主體明確顯示出來。在制定欄目的時候，要認(rèn)真考慮，合理安排。一般的網(wǎng)站欄目安排要注意以下幾方面：1.一定記住要緊扣你的主題！一般的做法是：將你的主題按一定的方法分類并將它們作為網(wǎng)站的主欄目。例如上面的例子，能夠?qū)谀糠譃閯游飫赢嫞瑯?biāo)志動畫，三維動畫，卡通動畫等，在首頁上標(biāo)

20、明最近更新的動畫。記?。褐黝}欄目個數(shù)在總欄目中要占絕對優(yōu)勢，如此的網(wǎng)站顯的專業(yè)，主題突出，容易給人留下深刻印象。2.設(shè)一個最近更新或網(wǎng)站指南欄目假如你的首頁沒有安排版面放置最近更新內(nèi)容信息，就有必要設(shè)立一個“最近更新”的欄目。如此做是為了照顧常來的訪客，讓你的主頁更有人性化。假如你的主頁內(nèi)容龐大(超過15MB)，層次較多，而又沒有站內(nèi)的搜索引擎，建議您設(shè)置“本站指南”欄目。能夠關(guān)心初訪者快速找到他們想要的內(nèi)容。3.設(shè)定一個能夠雙向交流的欄目不需要專門多，但一定要有。比如論壇，留言本，郵件列表等，能夠讓掃瞄者留下他們的信息。有調(diào)查表明，提供雙向交流的站點(diǎn)比簡單的留一個Email me的站點(diǎn)更具有

21、親和力。4.設(shè)一個下載或常見問題回答欄目網(wǎng)絡(luò)的特點(diǎn)是信息共享。假如你看到一個站點(diǎn)有大量的優(yōu)秀的有價值的資料，你確信希望能一次性下載，而不是一頁一頁掃瞄存盤?！皩⑿谋刃摹痹谀阕约旱闹黜撋显O(shè)置一個資料下載欄目，會得到大伙兒的喜愛。有些站點(diǎn)為了廣告顯示量，一篇文章還要分幾頁顯示，我覺得遲早會因訪問量下降而淘汰(個人意見:)。另外，假如您的站點(diǎn)經(jīng)常收到網(wǎng)友關(guān)于某方面的問題來信，你最好設(shè)立一個常見問題回答的欄目，既方便了網(wǎng)友，也能夠節(jié)約自己更多時刻用以學(xué)習(xí)。至于其他的輔助內(nèi)容，如關(guān)于本站，版權(quán)信息等能夠不放在主欄目里，以免沖淡主題。總結(jié)以上幾點(diǎn)，我們得出劃分欄目需要注意的是： 盡可能刪除與主題無關(guān)的欄目

22、 盡可能將網(wǎng)站最有價值的內(nèi)容列在欄目上 盡可能方便訪問者的掃瞄和查詢上面講的是欄目，我們再看看版塊設(shè)置。版塊比欄目的概念要大一些，每個版塊都有自己的欄目。舉個例子：網(wǎng)易的站點(diǎn)分新聞，體育，財經(jīng)，娛樂，教育等版塊，每個版塊下面有各有自己的主欄目。一般的個人站點(diǎn)內(nèi)容少，只有主欄目(主菜單)就夠了，不需要設(shè)置版塊。假如你覺得的確有必要設(shè)置版塊的，應(yīng)該注意 1.各版塊要有相對獨(dú)立性。2.各版塊要有相互關(guān)聯(lián)。3.版塊的內(nèi)容要圍繞站點(diǎn)主題。關(guān)于版塊方面，要緊是門戶站點(diǎn)等較大ICP需要考慮的問題，阿捷在此不再作展開討論。確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)上篇講到：我們在動手制作網(wǎng)頁前，一定要考慮好以下三方面：1.

23、確定欄目和版塊； 2.確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu) 3.確定網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計 今天我們接著來討論“確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)”。一.網(wǎng)站的目錄結(jié)構(gòu)網(wǎng)站的目錄是指你建立網(wǎng)站時創(chuàng)建的目錄。例如：在用frontpage98建立網(wǎng)站時都默認(rèn)建立了根目錄和images子目錄。目錄的結(jié)構(gòu)是一個容易忽略的問題，大多數(shù)站長差不多上未經(jīng)規(guī)劃，隨意創(chuàng)建子目錄。目錄結(jié)構(gòu)的好壞，對掃瞄者來講并沒有什么太大的感受，然而關(guān)于站點(diǎn)本身的上傳維護(hù)，內(nèi)容以后的擴(kuò)充和移植有著重要的阻礙。下面是建立目錄結(jié)構(gòu)的一些建議：不要將所有文件都存放在根目錄下。有網(wǎng)友為了方便，將所有文件都放在根目錄下。如此做造成的不利阻礙在于：1.文

24、件治理混亂。你常常搞不清哪些文件需要編輯和更新，哪些無用的文件能夠刪除，哪些是相關(guān)聯(lián)的文件，阻礙工作效率。2.上傳速度慢。服務(wù)器一般都會為根目錄建立一個文件索引。當(dāng)您將所有文件都放在根目錄下，那么即使你只上傳更新一個文件，服務(wù)器也需要將所有文件再檢索一遍，建立新的索引文件。專門明顯，文件量越大，等待的時刻也將越長。因此，給您的建議是：盡可能減少根目錄的文件存放數(shù)。按欄目內(nèi)容建立子目錄。子目錄的建立，首先按主菜單欄目建立。例如:網(wǎng)頁教程類站點(diǎn)能夠依照技術(shù)類不分不建立相應(yīng)的目錄，象Flash,Dhtml,javascript等；企業(yè)站點(diǎn)能夠按公司簡介，產(chǎn)品介紹，價格，在線定單，反饋聯(lián)系等建立相應(yīng)目

25、錄。其他的次要欄目，類似whats new，友情連接內(nèi)容較多，需要經(jīng)常更新的能夠建立獨(dú)立的子目錄。而一些相關(guān)性強(qiáng)，不需要經(jīng)常更新的欄目，例如：關(guān)于本站，關(guān)于站長，站點(diǎn)經(jīng)歷等能夠合并放在一個統(tǒng)一目錄下。所有程序一般都存放在特定目錄。例如：CGI程序放在cgi-bin目錄。便于維護(hù)治理。所有需要下載的內(nèi)容也最好放在一個目錄下。在每個主目錄下都建立獨(dú)立的images目錄。默認(rèn)的，一個站點(diǎn)根目錄下都有一個images目錄。剛開始學(xué)習(xí)主頁制作時，阿捷適應(yīng)將所有圖片都存放在那個目錄里。但是后來發(fā)覺專門不方便，當(dāng)我需要將某個主欄目打包供網(wǎng)友下載，或者將某個欄目刪除時，圖片的治理相當(dāng)苦惱。通過實(shí)踐發(fā)覺：為每個

26、主欄目建立一個獨(dú)立的images目錄是最方便治理的。而根目錄下的images目錄只是用來放首頁和一些次要欄目的圖片。目錄的層次不要太深。目錄的層次建議不要超過3層。緣故專門簡單，維護(hù)治理方便。其它需要注意的還有：1.不要使用中文目錄；網(wǎng)絡(luò)無國界，使用中文目錄可能對網(wǎng)址的正確顯示造成困難。2.不要使用過長的目錄；盡管服務(wù)器支持長文件名，然而太長的目錄名不便于經(jīng)歷。3.盡量使用意義明確的目錄；上面的例子中，你能夠用Flash,Dhtml,javascript來建立目錄，也能夠用1，2，3建立目錄，然而哪一個更明確，更便于經(jīng)歷和治理呢？顯然是前者！隨著網(wǎng)頁技術(shù)的不斷進(jìn)展，利用數(shù)據(jù)庫或者其他后臺程序自

27、動生成網(wǎng)頁越來越普遍，網(wǎng)站的目錄結(jié)構(gòu)也必將飛躍到一個新的結(jié)構(gòu)層次。二.網(wǎng)站的鏈接結(jié)構(gòu)網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)。它建立在目錄結(jié)構(gòu)基礎(chǔ)之上，但能夠跨越目錄。形象的講：每個頁面差不多上一個固定點(diǎn)，鏈接則是在兩個固定點(diǎn)之間的連線。一個點(diǎn)能夠和一個點(diǎn)連接，也能夠和多個點(diǎn)連接。更重要的是，這些點(diǎn)并不是分布在一個平面上，而是存在于一個立體的空間中。我們研究網(wǎng)站的鏈接結(jié)構(gòu)的目的在于：用最少的鏈接，使得掃瞄最有效率。一般的，建立網(wǎng)站的鏈接結(jié)構(gòu)有兩種差不多方式：1.樹狀鏈接結(jié)構(gòu)（一對一）。類似DOS的目錄結(jié)構(gòu)，首頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。立體結(jié)構(gòu)看起來就象蒲公英。如此的鏈接

28、結(jié)構(gòu)掃瞄時，一級級進(jìn)入，一級級退出。優(yōu)點(diǎn)是條理清晰，訪問者明確明白自己在什么位置，可不能迷路。缺點(diǎn)是掃瞄效率低，一個欄目下的子頁面到另一個欄目下的子頁面，必須繞經(jīng)首頁。2.星狀鏈接結(jié)構(gòu)（一對多）。類似網(wǎng)絡(luò)服務(wù)器的鏈接，每個頁面相互之間都建立有鏈接。立體結(jié)構(gòu)象東方明珠電視塔上的鋼球。這種鏈接結(jié)構(gòu)的優(yōu)點(diǎn)是掃瞄方便，隨時能夠到達(dá)自己喜愛的頁面。缺點(diǎn)是鏈接太多，容易使掃瞄者迷路，搞不清自己在什么位置，看了多少內(nèi)容。這兩種差不多結(jié)構(gòu)都只是理想方式，在實(shí)際的網(wǎng)站設(shè)計中，總是將這兩種結(jié)構(gòu)混合起來使用。我們希望掃瞄者既能夠方便快速的達(dá)到自己需要的頁面，又能夠清晰的明白自己的位置。因此，最好的方法是：首頁和一級

29、頁面之間用星狀鏈接結(jié)構(gòu)，一級和二級頁面之間用樹狀鏈接結(jié)構(gòu)。舉個例子。一個新聞?wù)军c(diǎn)的頁面結(jié)構(gòu)如下：一級頁面 二級頁面 財經(jīng)新聞頁 - 財經(jīng)新聞1，財經(jīng)新聞2./ |首頁 - 娛樂新聞頁 - 娛樂新聞1，娛樂新聞2. |IT新聞頁 - IT新聞1，IT新聞2.其中，首頁，財經(jīng)新聞頁，娛樂新聞頁，IT新聞頁之間是星狀鏈接，能夠互相點(diǎn)擊，直接到達(dá)。而財經(jīng)新聞頁和它的子頁面之間是樹狀連接，掃瞄財經(jīng)新聞1 后，你必須回到財經(jīng)新聞頁，才能掃瞄IT新聞2。因此,有站點(diǎn)為了免去返回一級頁面的苦惱，將二級頁面直接用新開窗口(POP up windows)打開，掃瞄結(jié)束后關(guān)閉即可。注意：以上我們差不多上用的三級頁面

30、舉例。假如您的站點(diǎn)內(nèi)容龐大，分類明細(xì)，需要超過三級頁面，那么建議你在頁面里顯示導(dǎo)航條，能夠關(guān)心掃瞄者明確自己所處的位置。確實(shí)是您經(jīng)常看到許多網(wǎng)站頁面頂部的，類似如此：“您現(xiàn)在的位置是：首頁- 財經(jīng)新聞-股市信息-深圳股-深進(jìn)展”關(guān)于鏈接結(jié)構(gòu)的設(shè)計，在實(shí)際的網(wǎng)頁制作中是特不重要一環(huán)。采納什么樣的鏈接結(jié)構(gòu)直接阻礙到版面的布局。例如你的主菜單放在什么位置，是否每頁都需要放置，是否需要用分幀框架，是否需要加入返回首頁的鏈接。在連接結(jié)構(gòu)確定后，再開始考慮鏈接的效果和形式，是采納下拉表單，依舊用DHTML動態(tài)菜單等等。隨著電子商務(wù)的推廣，網(wǎng)站競爭的越來越激烈，對鏈接結(jié)構(gòu)設(shè)計的要求差不多不僅僅局限于能夠方便

31、快速的掃瞄，更加注重個性化和相關(guān)性。例如，一個愛嬰主題網(wǎng)站里，在8個月嬰兒的營養(yǎng)問題頁面上，你需要加入8 個月嬰兒的健康問題鏈接，智力培養(yǎng)鏈接，或者是有關(guān)奶粉宣傳的鏈接，一本圖書，一個玩具的鏈接。因為父母不可能到每個欄目下去查找關(guān)于8個月嬰兒的信息，他們可能在找到需要的問題后就離開網(wǎng)站了。如何盡可能留住訪問者，是網(wǎng)站設(shè)計者以后必須考慮的問題。確定網(wǎng)站的整體風(fēng)格和創(chuàng)意設(shè)計網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計是站長們最希望掌握，也是最難以學(xué)習(xí)的。難就難在沒有一個固定的程式能夠參照和模仿。給你一個主題，任何兩人都不可能設(shè)計出完全一樣的網(wǎng)站。當(dāng)我們講：那個站點(diǎn)專門cool，專門有個性！那么，是什么讓你覺得專門c

32、ool呢？它到底和一般的網(wǎng)站有什么區(qū)不呢？本文試圖用最簡明的語言來講明：1.風(fēng)格是什么，如何樹立網(wǎng)站風(fēng)格？ 2.創(chuàng)意是什么，如何產(chǎn)生創(chuàng)意？風(fēng)格(style)是抽象的。是指站點(diǎn)的整體形象給掃瞄者的綜合感受。那個“整體形象”包括站點(diǎn)的CI（標(biāo)志，色彩，字體，標(biāo)語），版面布局，掃瞄方式，交互性，文字，語氣，內(nèi)容價值，存在意義，站點(diǎn)榮譽(yù)等等諸多因素。舉個例子：我們覺得網(wǎng)易是平易近人的，迪斯尼是生動爽朗的，IBM是專業(yè)嚴(yán)肅的。這些差不多上網(wǎng)站給人們留下的不同感受。風(fēng)格是獨(dú)特的，是站點(diǎn)不同與其他網(wǎng)站的地點(diǎn)?；蛘呱?，或者技術(shù)，或者是交互方式，能讓掃瞄者明確分辨出這是你的網(wǎng)站獨(dú)有的。例如新世紀(jì)網(wǎng)絡(luò) ()的黑

33、白色,網(wǎng)易壁紙站的特有框架,即使你只看到其中一頁，也能夠分辨出是哪個網(wǎng)站的。風(fēng)格是有人性的。通過網(wǎng)站的外表，內(nèi)容，文字，交流能夠概括出一個站點(diǎn)的個性，情緒。是溫文儒雅，是執(zhí)著熱情，是爽朗易變,是放任不羈。象詩詞中的“豪放派”和“婉約派”，你能夠用人的性格來比喻站點(diǎn)。有風(fēng)格的網(wǎng)站與一般網(wǎng)站的區(qū)不在于：一般網(wǎng)站你看到的只是堆砌在一起的信息，你只能用理性的感受來描述，比如信息量大小，掃瞄速度快慢。但你掃瞄過有風(fēng)格的網(wǎng)站后你能有更深一層的感性認(rèn)識，比如站點(diǎn)有品位，和氣可親，是老師，是朋友?？戳艘陨厦枋?，你可能對風(fēng)格是什么可能依舊模糊。事實(shí)上風(fēng)格確實(shí)是一句話：與眾不同！如何樹立網(wǎng)站風(fēng)格呢？我們能夠分如此

34、幾個步驟：第一，確信風(fēng)格是建立在有價值內(nèi)容之上的。一個網(wǎng)站有風(fēng)格而沒有內(nèi)容，就好比繡花枕頭一包草，好比一個性格傲慢但卻目不識丁的人。你首先必須保證內(nèi)容的質(zhì)量和價值性。這是最差不多的，無須置疑。第二，你需要完全搞清晰自己希望站點(diǎn)給人的印象是什么。能夠從這幾方面來理清思路：1.假如只用一句話來描述你的站點(diǎn)，應(yīng)該是:_參考答案： 有創(chuàng)意，專業(yè)，有(技術(shù))實(shí)力，有美感，有沖擊力2.想到你的站點(diǎn)，能夠聯(lián)想到的色彩是：_參考答案： 熱情的紅色，幻想的天蘭色，聰慧的金黃色3.想到你的站點(diǎn)，能夠聯(lián)想到的畫面是：_參考答案： 一份早報，一輛法拉利跑車，人群擁擠的廣場，雜貨店4.假如網(wǎng)站是一個人，他擁有的個性是：

35、_參考答案： 思想成熟的中年人，狂野奔放的牛仔，自信憨厚的創(chuàng)業(yè)者5.作為站長，你希望給人的印象是：_參考答案： 敬業(yè)，認(rèn)真投入，有深度，負(fù)責(zé)，純真，直爽，淑女6.用一種動物來比喻，你的網(wǎng)站最象：_參考答案： 貓(奇妙高貴)，鷹(目光銳利)，兔子(聰慧敏感)，獅子(自信威信)7.掃瞄者覺得你和其他網(wǎng)站的不同是：_參考答案： 能夠信賴，信息最快，交流方便，8.掃瞄者和你交流合作的感受是：_參考答案： 師生，同事，朋友，長幼。你能夠自己先填寫一份答案，然后讓其他網(wǎng)友填寫。比較后的結(jié)果會告訴你：你網(wǎng)站現(xiàn)在的差距，弱點(diǎn)及需要改進(jìn)的地點(diǎn)。第三，在明確自己的網(wǎng)站印象后，開始努力建立和加強(qiáng)這種印象。通過第二步

36、印象的的量化后，你需要進(jìn)一步找出其中最有特色特點(diǎn)的東西，確實(shí)是最能體現(xiàn)網(wǎng)站風(fēng)格的東西。并以它作為網(wǎng)站的特色加以重點(diǎn)強(qiáng)化，宣傳。例如：再次審查網(wǎng)站名稱，域名，欄目名稱是否符合這種個性，是否易記。審查網(wǎng)站標(biāo)準(zhǔn)色彩是否容易聯(lián)想到這種特色，是否能體現(xiàn)網(wǎng)站的性格等等。具體的做法，沒有定式。我那個地點(diǎn)提供一些參考：1.將你的標(biāo)志logo,盡可能的出現(xiàn)在每個頁面上。或者頁眉，或者頁腳，或則背景。2.突出你的標(biāo)準(zhǔn)色彩。文字的鏈接色彩，圖片的主色彩，背景色，邊框等色彩盡量使用與標(biāo)準(zhǔn)色彩一致的色彩。3.突出你的標(biāo)準(zhǔn)字體。在關(guān)鍵的標(biāo)題，菜單，圖片里使用統(tǒng)一的標(biāo)準(zhǔn)字體。4.想一條朗朗上口宣傳標(biāo)語。把它做在你的bann

37、er里，或者放在醒目的位置，告訴大伙兒你的網(wǎng)站的特色是.5.使用統(tǒng)一的語氣和人稱。即使是多個人合作維護(hù)，也要讓讀者覺得是同一個人寫的。6.使用統(tǒng)一的圖片處理效果。比如，陰影效果的方向，厚度，模糊度都必須一樣。7.制造一個你的站點(diǎn)特有的符號或圖標(biāo)。比如在一句鏈接前的一個點(diǎn)，能夠使用,.。（區(qū)位碼里自己參看）等等。盡管專門簡單的一個變化，卻給人與眾不同的感受，(什么緣故我沒有想到呢？)8.用自己設(shè)計的花邊，線條，點(diǎn)9.展示你網(wǎng)站的榮譽(yù)和成功作品。10.告訴網(wǎng)友關(guān)于你的真實(shí)的故事和方法。風(fēng)格的形成不是一次定位的，你能夠在實(shí)踐中不斷強(qiáng)化，調(diào)整，修飾，直到有一天，網(wǎng)友們寫信告訴你：我喜愛你的站點(diǎn)，因為它

38、專門有風(fēng)格！ 創(chuàng)意(idea)是網(wǎng)站生存的關(guān)鍵。這一點(diǎn)相信大伙兒都差不多認(rèn)同。然而作為網(wǎng)頁設(shè)計師，最苦惱的確實(shí)是沒有好的創(chuàng)意來源。注意，那個地點(diǎn)講的創(chuàng)意是指站點(diǎn)的整體創(chuàng)意，(因為那個創(chuàng)意而產(chǎn)生那個站點(diǎn)，或者相同的內(nèi)容，推出的創(chuàng)意不同),網(wǎng)頁的平面設(shè)計創(chuàng)意我將在后面的版面布局竅門里介紹。創(chuàng)意到底是什么，如何產(chǎn)生創(chuàng)意呢？創(chuàng)意是引人入勝，精彩萬分，出奇不意的； 創(chuàng)意是捕捉出來的點(diǎn)子，是創(chuàng)作出來的奇招 這些講法都講出了創(chuàng)意的一些特點(diǎn)，實(shí)質(zhì)上，創(chuàng)意是傳達(dá)信息的一種特不方式。比如Webdesigner(網(wǎng)頁設(shè)計師)，我們將其中的E字母大寫一下: wEbdEsigEr，感受如何樣，這事實(shí)上確實(shí)是一種創(chuàng)意！創(chuàng)

39、意并不是天才者的靈感，而是考慮的結(jié)果。依照美國廣告學(xué)教授詹姆斯的研究，創(chuàng)意考慮的過程分五時期1.預(yù)備期-研究所搜集的資料，依照舊經(jīng)驗，啟發(fā)新創(chuàng)意； 2.孵化期-將資料咀嚼消化，使意識自由進(jìn)展，任意結(jié)合； 3.啟發(fā)期-意識進(jìn)展并結(jié)合，產(chǎn)生創(chuàng)意； 4.驗證期-將產(chǎn)生的創(chuàng)意討論修正； 5.形成期-設(shè)計制作網(wǎng)頁，將創(chuàng)意具體化。創(chuàng)意是將現(xiàn)有的要素重新組合。比如，網(wǎng)絡(luò)與電話結(jié)合，產(chǎn)生IP電話。從這一點(diǎn)上動身，任何人，包括你和我，都能夠制造出不同凡響的創(chuàng)意。而且，資料越豐富，越容易產(chǎn)生創(chuàng)意。就好比萬花筒，筒內(nèi)的玻璃片越多，所呈現(xiàn)的圖案越多。你假如有心能夠發(fā)覺，網(wǎng)絡(luò)上的最多的創(chuàng)意來自與現(xiàn)實(shí)生活的結(jié)合(或者虛擬

40、現(xiàn)實(shí))，例如在線書店，電子社區(qū)，在線拍賣。你是否想到了一種更好的創(chuàng)意呢？創(chuàng)意考慮的途徑最常用的是聯(lián)想，那個地點(diǎn)提供了網(wǎng)站創(chuàng)意的25種聯(lián)想線索：1.把它顛倒 2.把它縮小 3.把顏色換一下 4.使它更長 5.使它閃動 6.把它放進(jìn)音樂里 7.結(jié)合文字音樂圖畫 8.使它成為年輕的 9.使它重復(fù) 10.使它變成立體 11.參加競賽 12.參加打賭 13.變更一部分 14.分裂它 15.使它羅曼蒂克 16.使它速度加快 17.增加香味 18.使它看起來流行 19.使它對稱 20.將它向兒童訴求 21.價格更低 22.給它起個外號 23.把它打包 24.免費(fèi)提供 25.以上各項延伸組合 (轉(zhuǎn)載自樊志育廣

41、告制作)需要一提的是：創(chuàng)意的目的是更好的宣傳推廣網(wǎng)站。假如創(chuàng)意專門好，卻對網(wǎng)站進(jìn)展毫無意義，好比給奶牛穿高跟鞋，那么，我們寧可放棄那個創(chuàng)意！關(guān)于風(fēng)格和創(chuàng)意，能夠講得還有許多。感興趣的網(wǎng)友能夠自己找一些廣告設(shè)計方面的書閱讀。希望本文能關(guān)心您對網(wǎng)站的設(shè)計有一個更新的認(rèn)識和提高。感謝！ 首頁的設(shè)計在我們?nèi)婵紤]好網(wǎng)站的欄目，鏈接結(jié)構(gòu)和整體風(fēng)格之后，我們就能夠正式動手制作首頁了。有這么一句俗語：良好的開端是成功的一半。在網(wǎng)站設(shè)計上也是如此，首頁的設(shè)計是一個網(wǎng)站成功與否的關(guān)鍵。人們往往看到第一頁就差不多對你的站點(diǎn)有一個整體的感受。是不是能夠促使掃瞄者接著點(diǎn)擊進(jìn)入，是否能夠吸引掃瞄者留在站點(diǎn)上，全憑首頁設(shè)

42、計的功力了。因此，首頁的設(shè)計和制作是絕對要重視和花心思的。阿捷的經(jīng)驗是：一般首頁設(shè)計和制作占整個制作時刻的40%。你寧可多花些時刻在早期，以免出現(xiàn)全部做好以后再修改，那將是最白費(fèi)精力的事。那個地點(diǎn)，先插一個“封面”的問題。封面是指沒有具體內(nèi)容，只放一個logo點(diǎn)擊進(jìn)入或者只有簡單的圖形菜單的首頁。是否需要為站點(diǎn)設(shè)計一個“封面”？阿捷的個人觀點(diǎn)是：沒必要！除非你是專門藝術(shù)類的站點(diǎn)，或者能夠確信內(nèi)容獨(dú)特，能夠吸引掃瞄者進(jìn)一步點(diǎn)擊進(jìn)入的站點(diǎn)，否則的話，封面式的首頁并可不能給你的站點(diǎn)帶來什么好處。我們上網(wǎng)掃瞄需要的是快速，有價值的信息，假如等待xx分鐘，只顯示出一個粗劣的“ENTER”圖標(biāo)，那么相信沒

43、有人會再耐心等待進(jìn)入下一頁。因為首頁的重要性，阿捷將著重用篇文章來認(rèn)真討論有關(guān)首頁設(shè)計的方方面面，大致提綱如下：版面布局的竅門 色彩的搭配 字體的設(shè)置和表格的嵌套 細(xì)微之處見功力 考慮不同的掃瞄器和分辨率 設(shè)計好你的banner和位置 meta標(biāo)簽的重要性 首頁設(shè)計的小建議今天，只是關(guān)于首頁設(shè)計的一個引子。讓我們來大致了解一下首頁設(shè)計的步驟。首頁，從全然上講確實(shí)是全站內(nèi)容的目錄，是一個索引。但只是排列目錄顯然是不夠的，如何設(shè)計好一個首頁呢？一般的步驟是：確定首頁的功能模塊 設(shè)計首頁的版面 處理技術(shù)上的細(xì)節(jié)一).確定首頁的功能模塊。首頁的內(nèi)容模塊是指你需要在首頁上實(shí)現(xiàn)的要緊內(nèi)容和功能。一般的站點(diǎn)

44、都需要如此一些模塊：網(wǎng)站名稱(logo), 廣告條(banner), 主菜單(menu), 新聞(whats new), 搜索(search), 友情鏈接(links), 郵件列表(maillist),計數(shù)器(count), 版權(quán)(copyright).選擇哪些模塊，實(shí)現(xiàn)哪些功能，是否需要添加其他模塊差不多上首頁設(shè)計首先需要確定的。二).設(shè)計首頁的版面在功能模塊確定后，開始設(shè)計首頁的版面。就象搭積木，每個模塊是一個單位積木，如何拼搭出一座漂亮的房子，就看你的創(chuàng)意和想象力了。設(shè)計版面的最好方法是：找一張白紙，一支筆，先將你理想中的草圖勾勒出來，然后再用網(wǎng)頁制作軟件實(shí)現(xiàn)。三).處理技術(shù)上的細(xì)節(jié)阿捷

45、經(jīng)常收到的來信問題確實(shí)是：我制作的主頁如何能在不同分辨率下保持不變形，如何能在IE和NC下看起來都不至于太丑陋，如何設(shè)置字體和鏈接顏色等等,阿捷將在下面幾篇文章里為大伙兒詳細(xì)介紹。首頁設(shè)計是整個網(wǎng)站設(shè)計的難點(diǎn)和關(guān)鍵，阿捷希望能夠通過和大伙兒的交流，總結(jié)出一套較為合理易學(xué)的設(shè)計方法，從而舉一反三，使我們能夠更加輕松的完成整個站點(diǎn)的設(shè)計制作。假如你情愿將你的心得體會和大伙兒分享，請來信 HYPERLINK mailto:ajie ajie,感謝！ 版面布局的原理設(shè)計首頁的第一步是設(shè)計版面布局。就象傳統(tǒng)的報刊雜志編輯一樣，我們將網(wǎng)頁看作一張報紙，一本雜志來進(jìn)行排版布局。盡管動態(tài)網(wǎng)頁技術(shù)的進(jìn)展使得我們

46、開始趨向于學(xué)習(xí)場景編劇，然而固定的網(wǎng)頁版面設(shè)計基礎(chǔ)依舊是必須學(xué)習(xí)和掌握的。它們的差不多原理是共通的，你能夠領(lǐng)會要點(diǎn)，舉一反三。版面指的是掃瞄器看到的完整的一個頁面（能夠包含框架和層）。因為每個人的顯示器分辨率不同，因此同一個頁面的大小可能出現(xiàn)640*480像素,800*600像素,1024*768像素等不同尺寸。布局，確實(shí)是以最適合掃瞄的方式將圖片和文字排放在頁面的不同位置。你可能注意到：“最適合”是一個不確定的形容詞，什么才是最適合的呢？抱歉的是阿捷不能也不可能給您一個完整的正確的答案。就好比有人希望明白成功的秘訣是什么，成功者只能建議您用什么方法，什么途徑才能最容易獲得成功，而不可能有一步

47、成功的秘訣告訴您。我們在設(shè)計考慮系列文章第四篇講過站點(diǎn)整體的創(chuàng)意，版面布局也是一個創(chuàng)意的問題，但要比站點(diǎn)整體的創(chuàng)意容易，有規(guī)律的多。讓我們先來了解一下版面布局的步驟：一.草案新建頁面就象一張白紙，沒有任何表格，框架和約定俗成的東西，你能夠盡可能的發(fā)揮你的想象力，將你想到的景象畫上去(我們建議您用一張白紙和一支鉛筆，因此用作圖軟件photoshop等也能夠)。這屬于制造時期，不講究細(xì)膩工整，不必考慮細(xì)節(jié)功能，只以粗陋的線條勾畫出創(chuàng)意的輪廓即可。盡你的可能多畫幾張，最后選定一個中意的作為接著創(chuàng)作的腳本。二.粗略布局在草案的基礎(chǔ)上，將你確定需要放置的功能模塊安排到頁面上。(注：功能模塊我們在首頁設(shè)計

48、-引子中提過，要緊包含網(wǎng)站標(biāo)志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計數(shù)器,版權(quán)信息等)。注意，那個地點(diǎn)我們必須遵循突出重點(diǎn)、平衡諧調(diào)的原則，將網(wǎng)站標(biāo)志，主菜單等最重要的模塊放在最顯眼，最突出的位置，然后在考慮次要模塊的排放。三.定案將粗略布局精細(xì)化，具體化。（靠你的智慧和經(jīng)驗，旁敲側(cè)擊多方聯(lián)想，才能作出具有創(chuàng)意的布局。）在布局過程中，我們能夠遵循的原則有：1、正常平衡亦稱勻稱。多指左右、上下對比形式，要緊強(qiáng)調(diào)秩序，能達(dá)到安定老實(shí)、信賴的效果。 2、異常平衡即非對比形式，但也要平衡和韻律，因此差不多上不均整的，此種布局能達(dá)到強(qiáng)調(diào)性、不安性、高注目性的效果。 3、對比所謂對比，不僅利

49、用色彩、色調(diào)等技巧來作表現(xiàn)，在內(nèi)容上也可涉及古與今、新與舊、貧與富等對比。 4、凝視所謂凝視是利用頁面中人物視線，使掃瞄者仿照跟隨的心理，以達(dá)到凝視頁面的效果，一般多用明星凝視狀。 5、空白空白有兩種作用，一方面對其他網(wǎng)站表示突出卓越，另一方面也表示網(wǎng)頁品位的優(yōu)越感，這種表現(xiàn)方法對體顯網(wǎng)頁的格調(diào)十分有效。 6、盡量用圖片解講此法對不能用語言講服、或用語言無法表達(dá)的情感，特不有效。圖片解講的內(nèi)容，能夠傳達(dá)給掃瞄者的更多的心理因素。 (轉(zhuǎn)載自廣告大師樊志育廣告制作) 以上的設(shè)計原則，盡管枯燥，然而我們假如能領(lǐng)會并活用到頁面布局里，效果就大不一樣了。比如：網(wǎng)頁的白色背景太虛，則能夠加些色快； 版面零

50、散，能夠用線條和符號串聯(lián)； 左面文字過多，右面則能夠插一張圖片保持平衡； 表格太規(guī)矩，能夠改用導(dǎo)角試試。通過不斷的嘗試和推敲，你的網(wǎng)頁一定會亮麗起來的哦:)看看我們經(jīng)常用到的版面布局形式：1.T結(jié)構(gòu)布局。所謂T結(jié)構(gòu)。確實(shí)是指頁面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因為菜單條背景教深，整體效果類似英文字母T,因此我們稱之為T形布局。這是網(wǎng)頁設(shè)計中用的最廣返的一種布局方式。(圖略)這種布局的優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰，主次分明。是初學(xué)者最容易上手的布局方法。缺點(diǎn)是規(guī)矩呆板，假如細(xì)節(jié)色彩上不注意，專門容易讓人看之無味。2.口型布局。這是一個象形的講法，確實(shí)是頁面一般上下各有一個

51、廣告條，左面是主菜單，右面放友情連接等，中間是要緊內(nèi)容。(圖略)這種布局的優(yōu)點(diǎn)是充分利用版面，信息量大(我的主頁首頁即屬于這種布局)。缺點(diǎn)是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設(shè)計，例如網(wǎng)易壁紙站。3.三型布局。這種布局多用于國外站點(diǎn)，國內(nèi)用的不多。特點(diǎn)是頁面上橫向兩條色塊，將頁面整體分割為四部分，色塊中大多放廣告條。4.對稱對比布局。顧名思義，采取左右或者上下對稱的布局，一半深色，一半淺色，一般用于設(shè)計型站點(diǎn)。優(yōu)點(diǎn)是視覺沖擊力強(qiáng)，缺點(diǎn)是將兩部分有機(jī)的結(jié)合比較困難。5.POP布局。POP引自廣告術(shù)語，確實(shí)是指頁面布局象一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心。常用于時尚類

52、站點(diǎn)，比如ELLE.com。優(yōu)點(diǎn)顯而易見：漂亮吸引人。缺點(diǎn)確實(shí)是速度慢。作為版面布局依舊值得借鑒的。以上總結(jié)了目前網(wǎng)絡(luò)上常見的布局，事實(shí)上還有許許多多不具一格的布局，關(guān)鍵在于你的創(chuàng)意和設(shè)計了。關(guān)于版面布局的技巧，那個地點(diǎn)提供四個建議，您能夠自己推敲：1.加強(qiáng)視覺效果 2.加強(qiáng)文案的可視度和可讀性 3.統(tǒng)一感的視覺 4.新奇和個性是布局的最高境地網(wǎng)頁的色彩是樹立網(wǎng)站形象的關(guān)鍵之一，色彩搭配卻是網(wǎng)友們感到頭疼的問題。網(wǎng)頁的背景，文字，圖標(biāo)，邊框，超鏈接.，應(yīng)該采納什么樣的色彩，應(yīng)該搭配什么色彩才能最好的表達(dá)出預(yù)想的內(nèi)涵呢？阿捷那個地點(diǎn)談一些心得，希望對你有所啟發(fā)。網(wǎng)頁色彩搭配的原理首先我們先來了解

53、一些色彩的差不多知識：1.顏色是因為光的折射而產(chǎn)生的。2.紅，黃，藍(lán)是三原色，其它的色彩都能夠用這三種色彩調(diào)和而成。 網(wǎng)頁html語言中的色彩表達(dá)即是用這三種顏色的數(shù)值表示 例如：紅色是color(255,0,0)十六進(jìn)制的表示方法為(FF0000) 白色為(FFFFFF), 我們經(jīng)?？吹降腷gColor=#FFFFFF確實(shí)是指背景色為白色。3.顏色分非彩色和彩色兩類。 非彩色是指黑，白，灰系統(tǒng)色。 彩色是指除了非彩色以外的所有色彩。4.任何色彩都有飽和度和透明度的屬性，屬性的變化產(chǎn)生不同的色相，因此至少能夠制作幾百萬種色彩。網(wǎng)頁制作用彩色依舊非彩色好呢？依照專業(yè)的研究機(jī)構(gòu)研究表明：彩色的經(jīng)歷

54、效果是黑白的3.5倍。也確實(shí)是講，在一般情況下，彩色頁面較完全黑白頁面更加吸引人。我們通常的做法是：要緊內(nèi)容文字用非彩色(黑色)，邊框，背景，圖片用彩色。如此頁面整體不單調(diào)，看要緊內(nèi)容也可不能眼花。非彩色的搭配黑白是最差不多和最簡單的搭配，白字黑底，黑底白字都特不清晰明了。灰色是萬能色，能夠和任何彩色搭配，也能夠關(guān)心兩種對立的色彩和諧過渡。假如你實(shí)在找不出合適的色彩，那么用灰色試試，效果絕對可不能太差。彩色的搭配色彩千變?nèi)f化，彩色的搭配是我們研究的重點(diǎn)。我們依舊需要進(jìn)一步學(xué)習(xí)一些色彩的知識。一.色環(huán)。我們將色彩按紅-黃-綠-藍(lán)-紅依次過度漸變，就能夠得到一個色彩環(huán)。色環(huán)的兩端是暖色和寒色，當(dāng)中

55、是中型色。(如下圖)紅.橙.橙黃.黃.黃綠.綠.青綠.藍(lán)綠.藍(lán).藍(lán)紫.紫.紫紅.紅|_| |_| |_| |_| | | |暖色系 中性系 寒色系 中性系 二.色彩的心理感受。不同的顏色會給掃瞄者不同的心理感受。紅色是一種激奮的色彩。刺激效果，能使人產(chǎn)生沖動，憤慨，熱情，活力的感受。 綠色介于冷暖兩中色彩的中間，顯得和睦，寧靜，健康，安全的感受。 它和金黃，淡白搭配，能夠產(chǎn)生優(yōu)雅，舒適的氣氛。 橙色也是一種激奮的色彩，具有輕快，歡欣，熱烈，溫馨，時尚的效果。 黃色具有歡樂，希望，智慧和輕快的個性，它的明度最高。 藍(lán)色是最具涼快，清新，專業(yè)的色彩。 它和白色混合，能體現(xiàn)柔順，淡雅，浪漫的氣氛(象

56、天空的色彩:) 白色具有雪白，明快，純真，清潔的感受。 黑色具有深沉，奇妙，寂靜，悲傷，壓抑的感受。 灰色具有中庸，平凡，和氣，謙讓，中立和高雅的感受。每種色彩在飽和度，透明度上略微變化就會產(chǎn)生不同的感受。以綠色為例，黃綠色有青春，旺盛的視覺意境，而藍(lán)綠色則顯得幽寧，陰深。網(wǎng)頁色彩搭配的原理1.色彩的鮮亮性。網(wǎng)頁的色彩要鮮艷，容易引人注目。2.色彩的獨(dú)特性。要有與眾不同的色彩，使得大伙兒對你的印象強(qiáng)烈。(參考設(shè)計考慮第二篇網(wǎng)站CI的標(biāo)準(zhǔn)色彩一節(jié))3.色彩的合適性。確實(shí)是講色彩和你表達(dá)的內(nèi)容氣氛相適合。如用粉色體現(xiàn)女性站點(diǎn)的柔性。4.色彩的聯(lián)想性。不同色彩會產(chǎn)生不同的聯(lián)想，藍(lán)色想到天空，黑色想到

57、黑夜，紅色想到喜事等，選擇色彩要和你網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。網(wǎng)頁色彩掌握的過程隨著網(wǎng)頁制作經(jīng)驗的積存，我們用色有如此的一個趨勢:單色-五彩繽紛-標(biāo)準(zhǔn)色-單色。一開始因為技術(shù)和知識缺乏，只能制作出簡單的網(wǎng)頁，色彩單一；在有一定基礎(chǔ)和材料后，希望制作一個漂亮的網(wǎng)頁，將自己收集的最好的圖片，最中意色彩堆砌在頁面上；然而時刻一長，卻發(fā)覺色彩雜亂，沒有個性和風(fēng)格；第三次重新定位自己的網(wǎng)站，選擇好切合自己的色彩，推出的站點(diǎn)往往比較成功；當(dāng)最后設(shè)計理念和技術(shù)達(dá)到頂峰時，則又返樸歸真，用單一色彩甚至非彩色就能夠設(shè)計出簡潔精美的站點(diǎn)。網(wǎng)頁色彩搭配的技巧文章寫到那個地點(diǎn)，有心急的網(wǎng)友要問了：“到底用什么色彩搭配好看呢？

58、你能不能推舉幾種配色方案？”不急，那個地點(diǎn)有一點(diǎn)技巧，能夠關(guān)心你迅速成為調(diào)色大師:)1.用一種色彩。那個地點(diǎn)是指先選定一種色彩，然后調(diào)整透明度或者飽和度，(講得通俗些確實(shí)是將色彩變淡或則加深)，產(chǎn)生新的色彩，用于網(wǎng)頁。如此的頁面看起來色彩統(tǒng)一，有層次感。2.用兩種色彩。先選定一種色彩，然后選擇它的對比色(在photoshop里按ctrl+shift+I)。我的主頁用藍(lán)色和黃色確實(shí)是如此確定的。整個頁面色彩豐富但不花稍。3.用一個色系。簡單的講確實(shí)是用一個感受的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。確定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中選擇

59、自定義，然后在色庫中選就能夠了:)4.用黑色和一種彩色。比如大紅的字體配黑色的邊框感受專門跳。在網(wǎng)頁配色中，忌諱的是：1.不要將所有顏色都用到，盡量操縱在三種色彩以內(nèi)。 2.背景和前文的對比盡量要大，(絕對不要用花紋繁復(fù)的圖案作背景)，以便突出要緊文字內(nèi)容。好了，今天阿捷就為大伙兒講到那個地點(diǎn)了。字體的設(shè)定大伙兒好，網(wǎng)頁設(shè)計考慮欄目今天接著第八講。我們上次討論了首頁設(shè)計的版面布局和色彩的搭配，今天我們來談?wù)勛煮w。 字體(Font)的設(shè)置是網(wǎng)頁制作新手遇到的第一個難點(diǎn)。如何操縱字體大小，如何取消超鏈接字體的下劃線是網(wǎng)友來信問得最多的。好，我們來完全研究一下字體的各個方面：字符集的設(shè)定。在查看ht

60、ml文件原代碼時，我們經(jīng)常能夠在文件頭和之間看到這么一句代碼： 這段代碼的作用是什么呢？是否能夠刪除呢？事實(shí)上這是meta標(biāo)簽的設(shè)定語句，是給掃瞄器看的。它的作用確實(shí)是告訴掃瞄器：那個HTML文件是采納gb2312字符集制作的。當(dāng)掃瞄器讀到這一代碼，便以gb2312字符集來解釋和翻譯網(wǎng)頁原代碼，然后我們就能夠看到正確的網(wǎng)頁。因此那個meta語句是特不重要的，盡量不要刪除。gb2312確實(shí)是我們最熟悉的GB簡體碼，英文是iso-8859-1字符集。其它還有BIG5,UTF-8,Shift-JIS,EUC,KOI8-2等字符集，分不用于不同的字體顯示。字體的使用。在網(wǎng)頁里，字體的定義語句是：顯示文