前言 大家好！ 很榮幸，能在這里和大家一起探討關(guān)于網(wǎng)站設(shè)計的問題。目前，網(wǎng)絡(luò)上有關(guān)網(wǎng)頁制作的各種教程已經(jīng)相當(dāng)多，可以方便地學(xué)習(xí)到更新的技術(shù)和技巧?？墒牵嘘P(guān)網(wǎng)頁的設(shè)計, 比如設(shè)計靈感的實(shí)現(xiàn)，風(fēng)格的確定，發(fā)展策略，技術(shù)的篩選等的文章卻比較少，許多網(wǎng)友往往有好的材料，卻苦惱沒有好的具有表現(xiàn)力的設(shè)計。受到索易主持人的鼓勵，阿捷整理了一些網(wǎng)頁的設(shè)計心得，在這里和大家交流一下，也算拋磚引玉了，希望得到您的指正，如果您有好的建議和心得，也請發(fā)稿給我a jie@soim.com,在此先道一聲謝謝！
網(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ù)的飛速發(fā)展，要提出一個更對正確和**的設(shè)計思路是不可能的，要想在一篇文章中概括出來也很難，所以阿捷根據(jù)建設(shè)一個網(wǎng)站的思路，將自己幾年來網(wǎng)站設(shè)計制作的心得整理成一個系列“講座”，告訴給大家（注意：我并不會非常具體地講某一個技術(shù)或制作技巧，重點(diǎ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é)者的建議
以上是本“系列”文章的提綱，會根據(jù)實(shí)記凹斧寫情況作些變動。每星期一篇。我們開始之前，首先明確幾個前提： 一．網(wǎng)站設(shè)計與網(wǎng)站制作。我們說網(wǎng)站“設(shè)計”而不是網(wǎng)站“制作”，它們的區(qū)別在于設(shè)計是一個思考的過程，而制作只是將思考的結(jié)果表現(xiàn)出來。一個成功的網(wǎng)站首先需要一個**的設(shè)計，然后輔之**的制作。設(shè)計是網(wǎng)站的核心和靈魂，一個相同的設(shè)計可以有多種制作表現(xiàn)的方式。 二．我們說的“網(wǎng)站”是指有確定主題和明確目的的實(shí)用性站點(diǎn)，不包括純表現(xiàn)類或者純文字類網(wǎng)站。 三．在文章中，可能舉例說明或點(diǎn)評到某些具體站點(diǎn)。首先申明，阿捷不存在為任何站點(diǎn)作廣告的“嫌疑“。 好了，廢話少說，我們進(jìn)入正題： (待續(xù))
定位你的網(wǎng)站主題和名稱 設(shè)計一個站點(diǎn)，首先遇到的問題就是定位網(wǎng)站主題。 所謂主題也就是你的網(wǎng)站的題材。網(wǎng)絡(luò)上的網(wǎng)站題材千奇百怪,琳瑯滿目。只要你想的到，就可以把它制作出來。下面是美國《個人電腦》雜志( PC Magazine)評出的99年度排名前100位的全美知名網(wǎng)站的十類題材，對我們有一些參考價值。 前幾類：網(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類：家庭/教育 前幾0類：生活/時尚 每個大類都可以繼續(xù)細(xì)分，比如娛樂類再分為體育 /電影/ 音樂大類，音樂又可以按格式分為MP3，VQF，Ra，按表現(xiàn)形式分古典，現(xiàn)代，搖滾等。以上都只是更常見的題材，還有許多專業(yè)的，另類的，前幾特的題材可以選擇，比如中醫(yī)，熱帶魚，天氣預(yù)報等等，同時，各個題材相聯(lián)系和交叉結(jié)合可以產(chǎn)生新得題材，例如旅游論壇（旅游+ 討論），經(jīng)典入球播放（足球+影視）按這樣分下去，題材可以有成千上萬個，你不會再為題材重復(fù)，難以選擇而煩惱了吧 對于題材的選擇，我的建議是： 1.主題要小而精。定位要小，內(nèi)容要精。如果你想制作一個包羅萬象的站點(diǎn)，把所有您認(rèn)為精彩的東西都放在上面，那么往往會事與愿違，給人的感覺是沒有主題，沒有特色，樣樣有卻樣樣都很膚淺，因為您不可能有那么多的精力去維護(hù)它。網(wǎng)絡(luò)的更大特點(diǎn)就是新和快，目前更熱門的個人主頁都是天天更新甚至幾小時更新一次。更新的調(diào)查結(jié)果也顯示，網(wǎng)絡(luò)上的“主題站”比“萬全站”更受人們喜愛，就好比專賣店和百貨商店，如果我需要買某方面的東西，肯定會選擇專買店。再舉個例子，我的一位網(wǎng)友K K希望制作文學(xué)方面的題材，但是文學(xué)也包括許多許多內(nèi)容，有小說，詩歌，散文；有科幻，武俠，推理；阿捷仔細(xì)了解了他的擅長和想要提供的主要內(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)等。這樣在制作時，才不會覺得無聊或者力不從心。興趣是制作網(wǎng)站的動力，沒有熱情，很難設(shè)計制作出杰出的作品。 3.題材不要太濫或者目標(biāo)太高?！疤珵E”是指到處可見，人人都有的題材；比如軟件下載，免費(fèi)信息。“目標(biāo)太高”是指在這一題材上已經(jīng)有非常**，知名度很高的站點(diǎn)，你要超過它是很困難的。除非你下決心和有實(shí)力競爭并超過它，記住，在互聯(lián)網(wǎng)上只有前幾，人們往往只記得更好的網(wǎng)站，**第三名的印象則會淺得多。
OK，如果你已經(jīng)有一個更妙的主意了，那我們開始為網(wǎng)站起名字。（哎呀，別踢我?。┠赡苷J(rèn)為起名字與網(wǎng)站設(shè)計無關(guān)，阿捷在這里浪費(fèi)時間。其實(shí)網(wǎng)站名稱也是網(wǎng)站設(shè)計的一部分，而且是很關(guān)鍵的一個要素。你來看，“電腦學(xué)習(xí)室”和“電腦之家”顯然是后者簡練；“迷笛樂園”和“M IDI樂園”顯然是后者明晰；“兒童天地”和“中國幼兒園”顯然是后者大氣。我們都知道PIIICUP的中文名稱“奔騰”，如果改為“奔跑”，可能就沒有今天這么“火”了。和現(xiàn)實(shí)生活中一樣，網(wǎng)站名稱是否正氣，響亮，易記，對網(wǎng)站的形象和宣傳推廣也有很大影響。一般的建議是：
1. 名稱要正。這個“正”是阿捷自己的說法，其實(shí)就是要合法，和理，和情。不能用反動的，色情的，迷信的，危害社會**的名詞語句。 2. 名稱要易記。根據(jù)中文網(wǎng)站瀏覽者的特點(diǎn)，除非特定需要，網(wǎng)站名稱更好用中文名稱，不要使用英文或者中英文混合型名稱。例如：beyo nd studio和超越工作室，后者更親切好記。另外，網(wǎng)站名稱的字?jǐn)?shù)應(yīng)該控制在六個字（更好四個字）以內(nèi)，比如“XX閣”“XX設(shè)計室”，四個字的可以用成語，如“一網(wǎng)打進(jìn)”。字?jǐn)?shù)少還有個好處，一般友情鏈接的小l ogo尺寸是88X31，而六個字的寬度是78左右，適合于其他站點(diǎn)的鏈接排版。 3. 名稱要有特色。名稱平實(shí)就可以接受，如果能體現(xiàn)一定的內(nèi)涵，給瀏覽者更多的視覺沖擊和空間想象力，則為上品。這里舉幾個阿捷認(rèn)為很好的名稱：音樂前衛(wèi)，網(wǎng)頁陶吧，天籟更音。在體現(xiàn)出網(wǎng)站主題的同時，能點(diǎn)出特色之處。
總之，定位題材和名稱是設(shè)計一個網(wǎng)站的前幾步，也是很重要的一部分。如果能找到一個滿意的名稱，花一天時間翻字典也是值得的 好，今天的心得就寫到這里。因為是前幾篇，所以如果您對本系列講座形式有任何建議，請速來信告訴阿捷，以便阿捷作相應(yīng)更改。如果您有更好的心得，也請來信，阿捷會擇優(yōu)發(fā)表。謝謝大家！下星期我們討論的主題是“定位你的網(wǎng)站C I形象”。
定位你的網(wǎng)站CI形象
大家好，我是阿捷。今天我們繼續(xù)《網(wǎng)站設(shè)計的思考》專題系列文章之二： 定位你的網(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)站主題和名稱定 下來之后，需要思考的就是網(wǎng)站的CI形象。 有網(wǎng)友要問了：我不是學(xué)廣告專業(yè)的，CI對我來說可能太難了吧 不用擔(dān)心，阿捷自己也沒有學(xué)過設(shè)計專業(yè)哦。大家只要參考我的一些具體做法和 經(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)。注 意：這里的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ù)化，例如迪斯尼的米老鼠，搜狐的卡通狐貍，鯊?fù)w壇的籃球鯊魚。 (2).網(wǎng)站有專業(yè)性的，可以以本專業(yè)有代表的物品作為標(biāo)志。比如中國銀行的 銅板標(biāo)志，奔馳汽車的方向盤標(biāo)志。 (3).更常用和更簡單的方式是用自己網(wǎng)站的英文名稱作標(biāo)志。采用不同的字體， 字母的變形，字母的組合可以很容易制作好自己的標(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)黃綠色塊，都使我們覺得 很貼切，很和諧。如果將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)格， 我門可以根據(jù)需要選擇一些特別字體。例如，為了體現(xiàn)專業(yè)可以使用粗仿宋體，體現(xiàn)設(shè)計 精美可以用廣告體，體現(xiàn)親切隨意可以用手寫體等等。當(dāng)然這些都是阿捷的個人看法，你 可以根據(jù)自己網(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的“給你一個奔騰的心”。
以上四方面：標(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è)計師，但 阿捷將盡自己所能把這個系列文章寫好，盡可能將自己實(shí)踐過程中總結(jié)的經(jīng)驗和心得 告訴給大家，希望能給您一點(diǎn)收獲，一點(diǎn)啟發(fā)。文章中所列觀點(diǎn)如有不同意見，歡迎 您來信討論，來信寄ajie@soim.com，謝謝。
我們在前二篇文章里學(xué)習(xí)了定位網(wǎng)站主題和確立網(wǎng)站的CI形象。下面是否該進(jìn)入 實(shí)質(zhì)性的設(shè)計制作階段呢？答案是：不能。經(jīng)驗告訴我們，建立一個網(wǎng)站好比寫一篇 文章，首先要擬好提綱，文章才能主題明確，層次清晰；也好比造一座高樓，首先要 設(shè)計好框架圖紙，才能使樓房結(jié)構(gòu)合理。 初學(xué)者(包括我自己:-)，更容易犯的錯誤就是：確定題材后立刻開始制作。當(dāng)你 一頁一頁制作完畢后才發(fā)現(xiàn)：網(wǎng)站結(jié)構(gòu)不清晰，目錄龐雜，內(nèi)容東一塊西一塊。結(jié)果 不但瀏覽者看得糊涂，自己擴(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)站的題材確定后，相信你已經(jīng)收集和組織了許多相關(guān)的資料內(nèi)容。你一定認(rèn)為 這些都是更好的，肯定能吸引網(wǎng)友們來瀏覽網(wǎng)站。但是你有沒有將更好的，更吸引人 的內(nèi)容放在更突出的位置呢？有沒有讓好東西在版面分布上占更對優(yōu)勢呢？
我看見許多個人主頁的欄目(主菜單)并不是這樣的。舉個例子：有一個以提供動 畫素材為主題的站點(diǎn)，它的主欄目是：關(guān)于站長，本站導(dǎo)航，動畫寶庫，本站論壇，本 站留言本，聯(lián)系站長。首頁上寫著本站網(wǎng)址和版權(quán)申明(居然還有將本站設(shè)為首頁字樣)。 更主要的，更吸引人的動畫素材在主欄目里占1/6，在首頁上一字沒提。我想即使這個 站點(diǎn)的確有大量的，精美的動畫素材，也很難吸引瀏覽者繼續(xù)挖掘。
欄目的實(shí)質(zhì)是一個網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主體明確顯示出來。在制定 欄目的時候，要仔細(xì)考慮，合理安排。一般的網(wǎng)站欄目安排要注意以下幾方面：
1.一定記住要緊扣你的主題！ 一般的做法是：將你的主題按一定的方法分類并將它們作為網(wǎng)站的主欄目。例如上 面的例子，可以將欄目分為動物動畫，標(biāo)志動畫，三維動畫，卡通動畫等，在首頁上標(biāo) 明更近更新的動畫。記?。褐黝}欄目個數(shù)在總欄目中要占更對優(yōu)勢，這樣的網(wǎng)站顯的專業(yè)， 主題突出，容易給人留下深刻印象。
2.設(shè)一個更近更新或網(wǎng)站指南欄目 如果你的首頁沒有安排版面放置更近更新內(nèi)容信息，就有必要設(shè)立一個“更近更新” 的欄目。這樣做是為了照顧常來的訪客，讓你的主頁更有人性化。 如果你的主頁內(nèi)容龐大(超過15MB)，層次較多，而又沒有站內(nèi)的搜索引擎，建議您 設(shè)置“本站指南”欄目?？梢詭椭踉L者快速找到他們想要的內(nèi)容。
3.設(shè)定一個可以雙向交流的欄目 不需要很多，但一定要有。比如論壇，留言本，郵件列表等，可以讓瀏覽者留下他們的 信息。有調(diào)查表明，提供雙向交流的站點(diǎn)比簡單的留一個"Email me"的站點(diǎn)更具有親和力。
4.設(shè)一個下載或常見問題回答欄目 網(wǎng)絡(luò)的特點(diǎn)是信息共享。如果你看到一個站點(diǎn)有大量的**的有價值的資料，你肯定希望 能一次性下載，而不是一頁一頁瀏覽存盤?！皩⑿谋刃摹痹谀阕约旱闹黜撋显O(shè)置一個資料下載 欄目，會得到大家的喜歡。有些站點(diǎn)為了廣告顯示量，一篇文章還要分幾頁顯示，我覺得遲早 會因訪問量下降而淘汰(個人意見。另外，如果您的站點(diǎn)經(jīng)常收到網(wǎng)友關(guān)于某方面的問題來信， 你更好設(shè)立一個常見問題回答的欄目，既方便了網(wǎng)友，也可以節(jié)約自己更多時間用以學(xué)習(xí)。
至于其他的輔助內(nèi)容，如關(guān)于本站，版權(quán)信息等可以不放在主欄目里，以免沖淡主題?？?nbsp; 結(jié)以上幾點(diǎn)，我們得出劃分欄目需要注意的是：
●盡可能刪除與主題無關(guān)的欄目 ●盡可能將網(wǎng)站更有價值的內(nèi)容列在欄目上 ●盡可能方便訪問者的瀏覽和查詢 上面說的是欄目，我們再看看版塊設(shè)置。版塊比欄目的概念要大一些，每個版塊都有自己的 欄目。舉個例子：網(wǎng)易的站點(diǎn)分新聞，體育，財經(jīng)，娛樂，教育等版塊，每個版塊下面有各有自 己的主欄目。一般的個人站點(diǎn)內(nèi)容少，只有主欄目(主菜單)就夠了，不需要設(shè)置版塊。如果你覺 得的確有必要設(shè)置版塊的，應(yīng)該注意1.各版塊要有相對前幾立性。2.各版塊要有相互關(guān)聯(lián)。3.版塊 的內(nèi)容要圍繞站點(diǎn)主題。關(guān)于版塊方面，主要是門戶站點(diǎn)等較大ICP需要考慮的問題，阿捷在此 不再作展開討論。 好，已經(jīng)深夜了，今天就寫到這。阿捷下星期繼續(xù)和大家探討如何"確定網(wǎng)站的目錄結(jié)構(gòu)和 鏈接結(jié)構(gòu)"，謝謝。
確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)
上篇講到：我們在動手制作網(wǎng)頁前，一定要考慮好以下三方面： 1.確定欄目和版塊； 2.確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu) 3.確定網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計 今天我們繼續(xù)來討論“確定網(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)的好壞，對瀏覽者來說并沒有什么太大的感覺，但是對于站點(diǎn)本 身的上傳維護(hù)，內(nèi)容未來的擴(kuò)充和移植有著重要的影響。下面是建立目錄結(jié)構(gòu)的一些建議：
●不要將所有文件都存放在根目錄下。 有網(wǎng)友為了方便，將所有文件都放在根目錄下。這樣做造成的不利影響在于： 1.文件管理混亂。你常常搞不清哪些文件需要編輯和更新，哪些無用的文件可以刪除， 哪些是相關(guān)聯(lián)的文件，影響工作效率。 2.上傳速度慢。服務(wù)器一般都會為根目錄建立一個文件索引。當(dāng)您將所有文件都放在 根目錄下，那么即使你只上傳更新一個文件，服務(wù)器也需要將所有文件再檢索一遍，建立新 的索引文件。很明顯，文件量越大，等待的時間也將越長。 所以，給您的建議是：盡可能減少根目錄的文件存放數(shù)。
●按欄目內(nèi)容建立子目錄。 子目錄的建立，首先按主菜單欄目建立。例如:網(wǎng)頁教程類站點(diǎn)可以根據(jù)技術(shù)類別分別 建立相應(yīng)的目錄，象Flash,Dhtml,Javascript等；企業(yè)站點(diǎn)可以按公司簡介，產(chǎn)品介紹，價格， 在線定單，反饋聯(lián)系等建立相應(yīng)目錄。 其他的次要欄目，類似what's new，友情連接內(nèi)容較多，需要經(jīng)常更新的可以建立前幾立的 子目錄。而一些相關(guān)性強(qiáng)，不需要經(jīng)常更新的欄目，例如：關(guān)于本站，關(guān)于站長，站點(diǎn)經(jīng)歷等 可以合并放在一個統(tǒng)一目錄下。 所有程序一般都存放在特定目錄。例如：CGI程序放在cgi-bin目錄。便于維護(hù)管理。所有 需要下載的內(nèi)容也更好放在一個目錄下。
●在每個主目錄下都建立前幾立的images目錄。 默認(rèn)的，一個站點(diǎn)根目錄下都有一個images目錄。剛開始學(xué)習(xí)主頁制作時，阿捷習(xí)慣將所有
圖片都存放在這個目錄里?？墒呛髞戆l(fā)現(xiàn)很不方便，當(dāng)我需要將某個主欄目打包供網(wǎng)友下載，或
者將某個欄目刪除時，圖片的管理相當(dāng)麻煩。經(jīng)過實(shí)踐發(fā)現(xiàn)：為每個主欄目建立一個前幾立的
images目錄是更方便管理的。而根目錄下的images目錄只是用來放首頁和一些次要欄目的圖片。
●目錄的層次不要太深。
目錄的層次建議不要超過3層。原因很簡單，維護(hù)管理方便。
其它需要注意的還有：
1.不要使用中文目錄；網(wǎng)絡(luò)無國界，使用中文目錄可能對網(wǎng)址的正確顯示造成困難。
2.不要使用過長的目錄；盡管服務(wù)器支持長文件名，但是太長的目錄名不便于記憶。
3.盡量使用意義明確的目錄；上面的例子中，你可以用Flash,Dhtml,Javascript來建立目錄，
也可以用1，2，3建立目錄，但是哪一個更明確，更便于記憶和管理呢？顯然是前者！
隨著網(wǎng)頁技術(shù)的不斷發(fā)展，利用數(shù)據(jù)庫或者其他后臺程序自動生成網(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)看起來就象蒲公英。這樣的鏈接結(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á)到自己需要的頁面，又可以清晰的知道自己的位置。所以，
更好的辦法是：
●首頁和一級頁面之間用星狀鏈接結(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)閉即可。
注意：以上我們都是用的三級頁面舉例。如果您的站點(diǎn)內(nèi)容龐大，分類明細(xì)，需要超過三級
頁面，那么建議你在頁面里顯示導(dǎo)航條，可以幫助瀏覽者明確自己所處的位置。就是您經(jīng)常看到
許多網(wǎng)站頁面更部的，類似這樣：
“您現(xiàn)在的位置是：首頁->財經(jīng)新聞->股市信息->深圳股->深發(fā)展”
關(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è)計的要求已經(jīng)不**局限于
可以方便快速的瀏覽，更加注重個性化和相關(guān)性。例如，一個愛嬰主題網(wǎng)站里，在8個月嬰兒
的營養(yǎng)問題頁面上，你需要加入8個月嬰兒的健康問題鏈接，智力培養(yǎng)鏈接，或者是有關(guān)奶粉
宣傳的鏈接，一本圖書，一個玩具的鏈接。因為父母不可能到每個欄目下去尋找關(guān)于8個月嬰
兒的信息，他們可能在找到需要的問題后就離開網(wǎng)站了。如何盡可能留住訪問者，是網(wǎng)站設(shè)
計者未來必須考慮的問題。
講到這里，阿捷忽然覺得自己很厲害，居然會總結(jié)出這么大一套理論什么，皮厚?
可能吧，這么多高手都沒發(fā)言呢！有意見請來信
確定網(wǎng)站的整體風(fēng)格和創(chuàng)意設(shè)計
網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計是站長們更希望掌握，也是更難以學(xué)習(xí)的。難就難在
沒有一個固定的程式可以參照和模仿。給你一個主題，任何兩人都不可能設(shè)計出完全
一樣的網(wǎng)站。當(dāng)我們說："這個站點(diǎn)很cool，很有個性！"那么，是什么讓你覺得很cool
呢？它到底和一般的網(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)格是前幾特的，是站點(diǎn)不同與其他網(wǎng)站的地方。或者色彩，或者技術(shù)，或者是交互方
式，能讓瀏覽者明確分辨出這是你的網(wǎng)站前幾有的。例如新世紀(jì)網(wǎng)絡(luò)(。優(yōu)點(diǎn)顯而易見：漂亮吸引人。缺點(diǎn)就是速度慢。
作為版面布局還是值得借鑒的。
以上總結(jié)了目前網(wǎng)絡(luò)上常見的布局，其實(shí)還有許許多多別具一格的布局，關(guān)鍵在于你的創(chuàng)意和
設(shè)計了。對于版面布局的技巧，這里提供四個建議，您可以自己推敲：
1.加強(qiáng)視覺效果
2.加強(qiáng)文案的可視度和可讀性
3.統(tǒng)一感的視覺
4.新鮮和個性是布局的更高境界
網(wǎng)頁字體的設(shè)置
大家好，網(wǎng)頁設(shè)計思考欄目今天繼續(xù)第八講。我們上次討論了首頁設(shè)計的版面布局
和色彩的搭配，今天我們來談?wù)勛煮w。
●字體(Font)的設(shè)置是網(wǎng)頁制作新手遇到的前幾個難點(diǎn)。如何控制字體大小，如何取消
超鏈接字體的下劃線是網(wǎng)友來信問得更多的。好，我們來**研究一下字體的各個方面：
○字符集的設(shè)定。
在查看html文件原代碼時，我們經(jīng)?？梢栽谖募^<head>和</head>之間看到這么一句
代碼：
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
這段代碼的作用是什么呢？是否可以刪除呢？
其實(shí)這是meta標(biāo)簽的設(shè)定語句，是給瀏覽器看的。它的作用就是告訴瀏覽器：這個HTML
文件是采用gb2312字符集制作的。當(dāng)瀏覽器讀到這一代碼，便以gb2312字符集來解釋和翻譯
網(wǎng)頁原代碼，然后我們就可以看到正確的網(wǎng)頁。所以這個meta語句是非常重要的，盡量不要
刪除。
gb2312就是我們更熟悉的GB簡體碼，英文是iso-8859-1字符集。其它還有BIG5,UTF-8,
Shift-JIS,EUC,KOI8-2等字符集，分別用于不同的字體顯示。
○字體的使用。
在網(wǎng)頁里，字體的定義語句是：<font face="Arial">顯示文字</font>
其中Arial就是一種字體的名稱。
默認(rèn)的瀏覽器定義的標(biāo)準(zhǔn)字體是中文宋體和英文times new Roma字體。也就是說，
如果你沒有設(shè)置任何字體，網(wǎng)頁將以這兩種標(biāo)準(zhǔn)字體顯示。同時，著兩種字體也可以在任
何操作系統(tǒng)和瀏覽器里正確顯示。
windows另外自帶了40多種英文字體和5種中文字體。這些字體，你也可以在網(wǎng)頁里自由
使用和設(shè)置。凡是使用windows操作系統(tǒng)的瀏覽器都可以正確顯示這些字體，但在其它操作
系統(tǒng)里，如unix 則不能完全正確顯示。
如果你需要用一種特殊的字體來體現(xiàn)你的風(fēng)格，那么如何讓大家可以真正看到你的設(shè)計
頁面呢？解決的辦法是：用圖片。
將需要用這種字體的地方用圖片代替，以保證所有人看到的頁面是同一效果。
○字體的樣式(style)。
字體的樣式有四種：正常體(regular),斜體(Italic),粗體(Bold),粗斜體(Bold Italic)。
設(shè)置方法很簡單，阿捷就不多羅嗦了。
○字體的效果。
這里指通過html語言設(shè)定可以直接顯示的效果，在html里的語句設(shè)定為：
<span style="text-decoration: overline">顯示文字</span>
其中，overline是指上劃線效果。其它常用的效果還有：underline(下劃線)，
uppercase(大寫)等等。
○字體大小的控制。
字體大小的控制是本節(jié)的重點(diǎn)。
一般字體默認(rèn)的大小是12pt(鎊).用<font size="+1">語句可以將文字增大2pt。這種方法我們都已經(jīng)掌握了。而現(xiàn)在網(wǎng)絡(luò)上更流行的小中文字體大小為9pt，是如何設(shè)定的呢？有三種方法：
1.用"<span style="font-size:9pt">顯示文字</span>"語句來設(shè)定。
顯然這種方法非常麻煩，你必須為每段文字都設(shè)定大小。
2.用CSS層疊樣式表。CSS是DHTML的一個組成部分，它可以定義整個頁面的字體顯示風(fēng)格和大小。是較為簡便的方法。比如，這里需要設(shè)定整個頁面文字大小為9 pt,只要將下面這段代碼加入html代碼的<head>和</head>之間：
<style type="text/css"><--
body {FONT-SIZE: 9pt}
th {FONT-SIZE: 9pt}
td {FONT-SIZE: 9pt}
--></style>
其中FONT-SIZE:9pt指字體的大小為9鎊
3.**種方法已經(jīng)簡化了許多步驟，但是仍然不是更理想的方法，因為你必須在每個頁面的head區(qū)都放置這么一段代碼，擴(kuò)大了文件的字節(jié)。另外這樣的做法還有一個重大缺點(diǎn)，就是如果我需要修改整個站點(diǎn)的字體大小，就必須一頁一頁的改！
所以推薦給你更終也是目前更好的方法---外部摸板文件調(diào)用法。
“外部摸板調(diào)用”就是說你將css的設(shè)定作成一個單前幾的文件，在每個頁面里都調(diào)用它。一旦你需要修改字體大小，只要修改一個.cs s文件，幾百個頁面就同時修改了。(這種方法類似子程序調(diào)用編寫過程序的網(wǎng)友很容易理解
調(diào)用的具體方法如下：
(1)將上面的css代碼copy成一個mycss.txt文件，然后修改后綴名為mycss.css
(2)在html文件的<head></head>之間插入<LINK href="mycss.css" rel=stylesheet type=text/css>，
語句調(diào)用mycss.css(注意有關(guān)路徑的設(shè)置正確)OK!
○字體超鏈接樣式的設(shè)定。
通常在網(wǎng)頁的<body>中設(shè)置連接的顏色，如：
<body link="#FF00FF" vlink="#FF0000" alink="#008080">
其中：link -- Hyperlink（連接）的顏色
vlink-- visited Hyperlink（已訪問過的連接）顏色
alink-- active Hyperlink （當(dāng)前活動的連接）顏色
顏色用rgb的16進(jìn)制碼表示如紅色是#FF0000。
同樣用CSS可以更簡便的設(shè)定網(wǎng)頁超連接的樣式，看下面這段代碼
<style type="text/css">
A:link {TEXT-DECORATION: none;COLOR: #0000FF}
A:visited {TEXT-DECORATION: none;COLOR: #000000}
A:active {TEXT-DECORATION: none;COLOR: #FF0000}
A:hover {COLOR: #FF0000}
</style>
將它插入html文件的head區(qū)就可以了。其中l(wèi)ink設(shè)定的是有超鏈接的顏色;visited是訪問過的超
鏈接顏色；active是鼠標(biāo)移上去的顏色；hover是鼠標(biāo)點(diǎn)擊時的顏色。而"text-decoration:none"是指
取消超鏈接的下劃線顯示。
關(guān)于CSS的設(shè)定還有更多的用法和技巧，比如在同一頁中設(shè)定不同的字體大小和超鏈接顏色，請學(xué)習(xí)有關(guān)CSS的專門知識(可以到阿捷的主頁h ttp://pageone.yeah.net查閱)在這里我們不在冗述。
●上面已經(jīng)介紹了字體在技術(shù)上的各個方面。有關(guān)字體的設(shè)計使用，目前還沒有一個成熟的理論，
下面是幾條網(wǎng)頁設(shè)計中字體的使用原則，僅供參考：
1.不要使用超過3種以上的字體。字體太多則顯得雜亂，沒有主題。
2.不要用太大的字。因為版面是寶貴，有限的，粗陋的大字體不能帶給訪問者更多信息。
3.不要使用不停閃爍的文字。想讓瀏覽者多停留一會兒的話，就不要使用閃爍的文字。
4.原則上標(biāo)題的字體較正文大，顏色也應(yīng)有所區(qū)別。
關(guān)于網(wǎng)站設(shè)計的問題，歡迎合作。
