網(wǎng)站設(shè)計(jì)都包含什么

2023-01-24    分類: 網(wǎng)站設(shè)計(jì)

網(wǎng)站設(shè)計(jì),包含的內(nèi)容非常多。大體分兩個(gè)方面:
一方面是網(wǎng)站的延伸設(shè)計(jì),包括網(wǎng)站的主題定位和瀏覽群的定位,智能交互,制作策劃,形象包裝,宣傳營(yíng)銷(xiāo)等等。
另一方面是純網(wǎng)站本身的設(shè)計(jì)比如文字排版,圖片制作,平面設(shè)計(jì),三維立體設(shè)計(jì),靜態(tài)無(wú)聲圖文,動(dòng)態(tài)有聲影像等;
這兩方面相輔相成(感覺(jué)有點(diǎn)象寫(xiě)辨證論文:),加之網(wǎng)絡(luò)技術(shù)的飛速發(fā)展,要提出一個(gè)絕對(duì)正確和權(quán)威的設(shè)計(jì)思路是不可能的,要想在一篇文章中概括出來(lái)也很難,所以阿捷根據(jù)建設(shè)一個(gè)網(wǎng)站的思路,將自己幾年來(lái)網(wǎng)站設(shè)計(jì)制作的心得整理成一個(gè)系列“講座”,告訴給大家(注意:我并不會(huì)非常具體地講某一個(gè)技術(shù)或制作技巧,重點(diǎn)在于思路)希望能給您一些幫助。下面是大致的提綱:
1.定位你的網(wǎng)站CI形象;
2.定位你的網(wǎng)站主題和名稱;
3.網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計(jì)
4.確定你的欄目和版塊;
5.首頁(yè)的設(shè)計(jì)
6.網(wǎng)站的層次結(jié)構(gòu)和鏈接結(jié)構(gòu)
7.版面布局的竅門(mén)
8.色彩的搭配
9.效果與速度
10.替瀏覽者考慮
11.細(xì)微之處見(jiàn)功力
12.建設(shè)完成度與推出時(shí)間
13.交互性與親和度
14.考慮不同的瀏覽器和分辨率
15.字體的設(shè)置和表格的嵌套
16.新技術(shù)的運(yùn)用取舍
17.設(shè)計(jì)好你的banner和位置
18.對(duì)網(wǎng)站設(shè)計(jì)初學(xué)者的建議
19.語(yǔ)句文字--融入感情
以上是本“系列”文章的提綱,會(huì)根據(jù)實(shí)際撰寫(xiě)情況作些變動(dòng)。每星期一篇。我們開(kāi)始之前,首先明確幾個(gè)前提:
一.在文章中,可能舉例說(shuō)明或點(diǎn)評(píng)到某些具體站點(diǎn)。首先申明,阿捷不存在為任何站點(diǎn)作廣告的“嫌疑“。
二.網(wǎng)站設(shè)計(jì)與網(wǎng)站制作。我們說(shuō)網(wǎng)站“設(shè)計(jì)”而不是網(wǎng)站“制作”,它們的區(qū)別在于設(shè)計(jì)是一個(gè)思考的過(guò)程,而制作只是將思考的結(jié)果表現(xiàn)出來(lái)。一個(gè)成功的網(wǎng)站首先需要一個(gè)優(yōu)秀的設(shè)計(jì),然后輔之優(yōu)秀的制作。設(shè)計(jì)是網(wǎng)站的核心和靈魂,一個(gè)相同的設(shè)計(jì)可以有多種制作表現(xiàn)的方式。
三.我們說(shuō)的“網(wǎng)站”是指有確定主題和明確目的的實(shí)用性站點(diǎn),不包括純表現(xiàn)類或者純文字類網(wǎng)站。
好了,廢話少說(shuō),我們進(jìn)入正題:
========================================================
一:定位你的網(wǎng)站主題和名稱
設(shè)計(jì)一個(gè)站點(diǎn),首先遇到的問(wèn)題就是定位網(wǎng)站主題。
所謂主題也就是你的網(wǎng)站的題材。網(wǎng)絡(luò)上的網(wǎng)站題材千奇百怪,琳瑯滿目。只要你想的到,就可以把它制作出來(lái)。下面是美國(guó)《個(gè)人電腦》雜志(PC Magazine)評(píng)出的99年度排名前100位的全美知名網(wǎng)站的十類題材,對(duì)我們有一些參考價(jià)值。
第1類:生活/時(shí)尚
第2類:網(wǎng)上求職
第3類:網(wǎng)上聊天/即時(shí)信息/ ICQ
第4類:網(wǎng)上社區(qū)/討論 / 郵件列表
第5類:計(jì)算機(jī)技術(shù)
第6類:網(wǎng)頁(yè)/ 網(wǎng)站開(kāi)發(fā)
第7類:娛樂(lè)網(wǎng)站
第8類:旅行
第9類:參考 /資訊
第10類:家庭/教育
每個(gè)大類都可以繼續(xù)細(xì)分,比如娛樂(lè)類再分為體育 /電影/ 音樂(lè)大類,音樂(lè)又可以按格式分為MP3,VQF,Ra,按表現(xiàn)形式分古典,現(xiàn)代,搖滾等。以上都只是最常見(jiàn)的題材,還有許多專業(yè)的,另類的,獨(dú)特的題材可以選擇,比如中醫(yī),熱帶魚(yú),天氣預(yù)報(bào)等等,同時(shí),各個(gè)題材相聯(lián)系和交叉結(jié)合可以產(chǎn)生新得題材,例如旅游論壇(旅游+討論),經(jīng)典入球播放(足球+影視)按這樣分下去,題材可以有成千上萬(wàn)個(gè),你不會(huì)再為題材重復(fù),難以選擇而煩惱了吧:)
對(duì)于題材的選擇,我的建議是:
1.題材好是你自己擅長(zhǎng)或者喜愛(ài)的內(nèi)容。比如:您對(duì)擅長(zhǎng)編程,就可以建立一個(gè)編程愛(ài)好者網(wǎng)站;對(duì)足球感興趣,可以報(bào)道最新的戰(zhàn)況,球星動(dòng)態(tài)等。這樣在制作時(shí),才不會(huì)覺(jué)得無(wú)聊或者力不從心。興趣是制作網(wǎng)站的動(dòng)力,沒(méi)有熱情,很難設(shè)計(jì)制作出杰出的作品。
3.題材不要太濫或者目標(biāo)太高。“太濫”是指到處可見(jiàn),人人都有的題材;比如軟件下載,免費(fèi)信息。“目標(biāo)太高”是指在這一題材上已經(jīng)有非常優(yōu)秀,知名度很高的站點(diǎn),你要超過(guò)它是很困難的。除非你下決心和有實(shí)力競(jìng)爭(zhēng)并超過(guò)它,記住,在互聯(lián)網(wǎng)上只有第一,人們往往只記得好的網(wǎng)站,第二第三名的印象則會(huì)淺得多。
2.主題要小而精。定位要小,內(nèi)容要精。如果你想制作一個(gè)包羅萬(wàn)象的站點(diǎn),把所有您認(rèn)為精彩的東西都放在上面,那么往往會(huì)事與愿違,給人的感覺(jué)是沒(méi)有主題,沒(méi)有特色,樣樣有卻樣樣都很膚淺,因?yàn)槟豢赡苡心敲炊嗟木θゾS護(hù)它。網(wǎng)絡(luò)的大特點(diǎn)就是新和快,目前最熱門(mén)的個(gè)人主頁(yè)都是天天更新甚至幾小時(shí)更新一次。最新的調(diào)查結(jié)果也顯示,網(wǎng)絡(luò)上的“主題站”比“萬(wàn)全站”更受人們喜愛(ài),就好比專賣(mài)店和百貨商店,如果我需要買(mǎi)某方面的東西,肯定會(huì)選擇專買(mǎi)店。再舉個(gè)例子,我的一位網(wǎng)友KK希望制作文學(xué)方面的題材,但是文學(xué)也包括許多許多內(nèi)容,有小說(shuō),詩(shī)歌,散文;有科幻,武俠,推理;阿捷仔細(xì)了解了他的擅長(zhǎng)和想要提供的主要內(nèi)容,最后將題材定位在網(wǎng)絡(luò)文學(xué)上,刪除了原有的一些無(wú)關(guān)的文學(xué)作品,集中擴(kuò)大和整理網(wǎng)絡(luò)文學(xué)作品。網(wǎng)站推出后,很快受到大家的喜愛(ài)。
OK,如果你已經(jīng)有一個(gè)絕妙的主意了,那我們開(kāi)始為網(wǎng)站起名字。(哎呀,別踢我?。┠赡苷J(rèn)為起名字與網(wǎng)站設(shè)計(jì)無(wú)關(guān),阿捷在這里浪費(fèi)時(shí)間。其實(shí)網(wǎng)站名稱也是網(wǎng)站設(shè)計(jì)的一部分,而且是很關(guān)鍵的一個(gè)要素。你來(lái)看,“電腦學(xué)習(xí)室”和“電腦之家”顯然是后者簡(jiǎn)練;“迷笛樂(lè)園”和“MIDI樂(lè)園”顯然是后者明晰;“兒童天地”和“中國(guó)幼兒園”顯然是后者大氣。我們都知道PIIICUP的中文名稱“奔騰”,如果改為“奔跑”,可能就沒(méi)有今天這么“火”了:)。和現(xiàn)實(shí)生活中一樣,網(wǎng)站名稱是否正氣,響亮,易記,對(duì)網(wǎng)站的形象和宣傳推廣也有很大影響。一般的建議是:
1. 名稱要正。這個(gè)“正”是阿捷自己的說(shuō)法,其實(shí)就是要合法,和理,和情。不能用反動(dòng)的,色情的,迷信的,危害社會(huì)安全的名詞語(yǔ)句。
2. 名稱要易記。根據(jù)中文網(wǎng)站瀏覽者的特點(diǎn),除非特定需要,網(wǎng)站名稱好用中文名稱,不要使用英文或者中英文混合型名稱。例如:beyond studio和超越工作室,后者更親切好記。另外,網(wǎng)站名稱的字?jǐn)?shù)應(yīng)該控制在六個(gè)字(好四個(gè)字)以內(nèi),比如“XX閣”“XX設(shè)計(jì)室”,四個(gè)字的可以用成語(yǔ),如“一網(wǎng)打進(jìn)”。字?jǐn)?shù)少還有個(gè)好處,一般友情鏈接的小logo尺寸是88X31,而六個(gè)字的寬度是78左右,適合于其他站點(diǎn)的鏈接排版。
3. 名稱要有特色。名稱平實(shí)就可以接受,如果能體現(xiàn)一定的內(nèi)涵,給瀏覽者更多的視覺(jué)沖擊和空間想象力,則為上品。這里舉幾個(gè)阿捷認(rèn)為很好的名稱:音樂(lè)前衛(wèi),網(wǎng)頁(yè)陶吧,天籟絕音。在體現(xiàn)出網(wǎng)站主題的同時(shí),能點(diǎn)出特色之處。
總之,定位題材和名稱是設(shè)計(jì)一個(gè)網(wǎng)站的第一步,也是很重要的一部分。如果能找到一個(gè)滿意的名稱,花一天時(shí)間翻字典也是值得的:)
好,今天的心得就寫(xiě)到這里。因?yàn)槭堑谝黄?,所以如果您?duì)本系列講座形式有任何建議,請(qǐng)速來(lái)信告訴阿捷,以便阿捷作相應(yīng)更改。如果您有更好的心得,也請(qǐng)來(lái)信,阿捷會(huì)擇優(yōu)發(fā)表。謝謝大家!下次我們討論的主題是“定位你的網(wǎng)站CI形象”。
所謂CI,是借用的廣告術(shù)語(yǔ)。(CI是英文corporate identity的縮寫(xiě)),意思是通過(guò)視覺(jué)來(lái)統(tǒng)一企業(yè)的形象。現(xiàn)實(shí)生活中的CI策劃比比皆是,杰出的例子如:可口可樂(lè)公 司,全球統(tǒng)一的標(biāo)志,色彩和產(chǎn)品包裝,給我們的印象極為深刻。更多的例子如SONY,三菱,麥當(dāng)勞等等。
一個(gè)杰出的網(wǎng)站,和實(shí)體公司一樣,也需要整體的形象包裝和設(shè)計(jì)。準(zhǔn)確的,有創(chuàng)意的CI 設(shè)計(jì),對(duì)網(wǎng)站的宣傳推廣有事半功倍的效果。在您的網(wǎng)站主題和名稱定下來(lái)之后,需要思考的就是網(wǎng)站的CI形象。
有網(wǎng)友要問(wèn)了:我不是學(xué)廣告專業(yè)的,CI對(duì)我來(lái)說(shuō)可能太難了吧:( 不用擔(dān)心,阿捷自己也沒(méi)有學(xué)過(guò)設(shè)計(jì)專業(yè)哦。大家只要參考我的一些具體做法和經(jīng)驗(yàn),很容易將自己網(wǎng)站的CI搞定:)
1.設(shè)計(jì)網(wǎng)站的標(biāo)志(logo).首先你需要設(shè)計(jì)制作一個(gè)網(wǎng)站的標(biāo)志(logo)。就如同商標(biāo)一樣,logo是你站點(diǎn)特色和內(nèi)涵的集中體現(xiàn),看見(jiàn)logo就讓大家聯(lián)想起你的站點(diǎn)。注意:這里的logo不是指88X31的小圖標(biāo)banner,而是網(wǎng)站的標(biāo)志。
標(biāo)志可以是中文,英文字母,可以是符號(hào),圖案,可以是動(dòng)物或者人物等等。比如:soim是用soim的英文作為標(biāo)志,新浪用字母sina+眼睛作為標(biāo)志。標(biāo)志的設(shè)計(jì)創(chuàng)意來(lái)自你網(wǎng)站的名稱和內(nèi)容。
(1).網(wǎng)站有代表性的人物,動(dòng)物,花草,可以用它們作為設(shè)計(jì)的藍(lán)本,加以卡通化和藝術(shù)化,例如迪斯尼的米老鼠,搜狐的卡通狐貍,鯊?fù)w壇的籃球鯊魚(yú)。
(2).網(wǎng)站有專業(yè)性的,可以以本專業(yè)有代表的物品作為標(biāo)志。比如中國(guó)銀行的銅板標(biāo)志,奔馳汽車(chē)的方向盤(pán)標(biāo)志。
(3).最常用和最簡(jiǎn)單的方式是用自己網(wǎng)站的英文名稱作標(biāo)志。采用不同的字體, 字母的變形,字母的組合可以很容易制作好自己的標(biāo)志。
2.設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩。網(wǎng)站給人的第一印象來(lái)自視覺(jué)沖擊,確定網(wǎng)站的標(biāo)準(zhǔn)色彩是相當(dāng)重要的一步。不同的色彩搭配產(chǎn)生不同的效果,并可能影響到訪問(wèn)者的情緒。
“標(biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站型象和延伸內(nèi)涵的色彩。舉個(gè)實(shí)際的例子就明白了:IBM的深藍(lán)色,肯得基的紅色條型,windows視窗標(biāo)志上的紅藍(lán)黃綠色塊,都使我們覺(jué)得很貼切,很和諧。如果將IBM改用綠色或金黃色,我們會(huì)有什么感覺(jué)?
一般來(lái)說(shuō),一個(gè)網(wǎng)站的標(biāo)準(zhǔn)色彩不超過(guò)3種,太多則讓人眼花繚亂。標(biāo)準(zhǔn)色彩要用于網(wǎng)站的標(biāo)志,標(biāo)題,主菜單和主色塊。給人以整體統(tǒng)一的感覺(jué)。至于其它色彩也可以使用,只是作為點(diǎn)綴和襯托,絕不能喧賓奪主。
一般來(lái)說(shuō),適合于網(wǎng)頁(yè)標(biāo)準(zhǔn)色的顏色有:藍(lán)色,黃/橙色,黑/灰/白色三大系列色。(注:關(guān)于色彩搭配的具體方法,我們會(huì)在本系列文章的第八篇介紹)。
3.設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體。和標(biāo)準(zhǔn)色彩一樣,標(biāo)準(zhǔn)字體是指用于標(biāo)志,標(biāo)題,主菜單的特有字體。一般我們網(wǎng)頁(yè)默認(rèn)的字體是宋體。為了體現(xiàn)站點(diǎn)的“與眾不同”和特有風(fēng)格,我們可以根據(jù)需要選擇一些特別字體。例如,為了體現(xiàn)專業(yè)可以使用粗仿宋體,體現(xiàn)設(shè)計(jì)精美可以用廣告體,體現(xiàn)親切隨意可以用手寫(xiě)體等等。當(dāng)然這些都是阿捷的個(gè)人看法,你可以根據(jù)自己網(wǎng)站所表達(dá)的內(nèi)涵,選擇更貼切的字體。目前常見(jiàn)的中文字體有二三十種,常見(jiàn)的英文字體有近百種,網(wǎng)絡(luò)上還有許多專用英文藝術(shù)字體下載,要尋找一款滿意的字體并不算困難:)
需要說(shuō)明的是:使用非默認(rèn)字體只能用圖片的形式,因?yàn)楹芸赡転g覽者的PC里沒(méi)有安裝你的特別字體,那么您的辛苦設(shè)計(jì)制作便付之東流啦!
4.設(shè)計(jì)網(wǎng)站的宣傳標(biāo)語(yǔ)。也可以說(shuō)是網(wǎng)站的精神,網(wǎng)站的目標(biāo)。用一句話甚至一個(gè)詞來(lái)高度概括。類似實(shí)際生活中的廣告金句。例如:鵲巢的“味道好極了”;麥斯威爾的“好東西和好朋友一起分享”;Intel的“給你一個(gè)奔騰的心”。
以上四方面:標(biāo)志,色彩,字體,標(biāo)語(yǔ),是一個(gè)網(wǎng)站樹(shù)立CI形象的關(guān)鍵,確切的說(shuō)是網(wǎng)站的表面文章,設(shè)計(jì)并完成這幾步,你的網(wǎng)站將脫胎換骨,整體形象有一個(gè)提高。形象地說(shuō):你從一個(gè)土氣的農(nóng)民轉(zhuǎn)變?yōu)橐晃晃餮b革履的白領(lǐng)人士。(注意:我們只是以平面靜態(tài)來(lái)設(shè)計(jì)CI,還沒(méi)有引入聲音,三維立體等因素。)
好了,看了以上的介紹,你應(yīng)該對(duì)網(wǎng)站CI有了一個(gè)初步的概念。也許不是很明白,因?yàn)槟切┑览硖橄罅?,你可能需要一些?shí)際的,更生動(dòng)的例子。阿捷會(huì)在自己的主頁(yè)上同時(shí)修改補(bǔ)充一些實(shí)例。下一節(jié),我們來(lái)討論“確定網(wǎng)站的欄目版塊”,歡迎您參與,謝謝!
確定網(wǎng)站的欄目和版塊
《設(shè)計(jì)的思考》系列文章,今天開(kāi)始寫(xiě)第三篇。阿捷不是專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)師,但阿捷將盡自己所能把這個(gè)系列文章寫(xiě)好,盡可能將自己實(shí)踐過(guò)程中總結(jié)的經(jīng)驗(yàn)和心得告訴給大家,希望能給您一點(diǎn)收獲,一點(diǎn)啟發(fā)。文章中所列觀點(diǎn)如有不同意見(jiàn),歡迎您來(lái)信討論,來(lái)信寄ajie@soim.com,謝謝。
我們?cè)谇岸恼吕飳W(xué)習(xí)了定位網(wǎng)站主題和確立網(wǎng)站的CI形象。下面是否該進(jìn)入實(shí)質(zhì)性的設(shè)計(jì)制作階段呢?答案是:不能。經(jīng)驗(yàn)告訴我們,建立一個(gè)網(wǎng)站好比寫(xiě)一篇文章,首先要擬好提綱,文章才能主題明確,層次清晰;也好比造一座高樓,首先要設(shè)計(jì)好框架圖紙,才能使樓房結(jié)構(gòu)合理。
初學(xué)者(包括我自己:-),最容易犯的錯(cuò)誤就是:確定題材后立刻開(kāi)始制作。當(dāng)你一頁(yè)一頁(yè)制作完畢后才發(fā)現(xiàn):網(wǎng)站結(jié)構(gòu)不清晰,目錄龐雜,內(nèi)容東一塊西一塊。結(jié)果不但瀏覽者看得糊涂,自己擴(kuò)充和維護(hù)網(wǎng)站也相當(dāng)困難,您的網(wǎng)站或許就此半途而廢,更糟糕的是:你因此失去了制作主頁(yè)的信心和興趣!
所以,我們?cè)趧?dòng)手制作網(wǎng)頁(yè)前,一定要考慮好以下三方面:
1.確定欄目和版塊;
2.確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)
3.確定網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計(jì)
今天我們首先來(lái)討論“確定網(wǎng)站的欄目和版塊”。
網(wǎng)站的題材確定后,相信你已經(jīng)收集和組織了許多相關(guān)的資料內(nèi)容。你一定認(rèn)為這些都是好的,肯定能吸引網(wǎng)友們來(lái)瀏覽網(wǎng)站。但是你有沒(méi)有將好的,最吸引人的內(nèi)容放在最突出的位置呢?有沒(méi)有讓好東西在版面分布上占絕對(duì)優(yōu)勢(shì)呢?
我看見(jiàn)許多個(gè)人主頁(yè)的欄目(主菜單)并不是這樣的。舉個(gè)例子:有一個(gè)以提供動(dòng)畫(huà)素材為主題的站點(diǎn),它的主欄目是:關(guān)于站長(zhǎng),本站導(dǎo)航,動(dòng)畫(huà)寶庫(kù),本站論壇,本站留言本,聯(lián)系站長(zhǎng)。首頁(yè)上寫(xiě)著本站網(wǎng)址和版權(quán)申明(居然還有將本站設(shè)為首頁(yè)字樣)。最主要的,最吸引人的動(dòng)畫(huà)素材在主欄目里占1/6,在首頁(yè)上一字沒(méi)提。我想即使這個(gè)站點(diǎn)的確有大量的,精美的動(dòng)畫(huà)素材,也很難吸引瀏覽者繼續(xù)挖掘。
欄目的實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引,索引應(yīng)該將網(wǎng)站的主體明確顯示出來(lái)。在制定欄目的時(shí)候,要仔細(xì)考慮,合理安排。一般的網(wǎng)站欄目安排要注意以下幾方面:
1.一定記住要緊扣你的主題!
一般的做法是:將你的主題按一定的方法分類并將它們作為網(wǎng)站的主欄目。例如上面的例子,可以將欄目分為動(dòng)物動(dòng)畫(huà),標(biāo)志動(dòng)畫(huà),三維動(dòng)畫(huà),卡通動(dòng)畫(huà)等,在首頁(yè)上標(biāo)明最近更新的動(dòng)畫(huà)。記?。褐黝}欄目個(gè)數(shù)在總欄目中要占絕對(duì)優(yōu)勢(shì),這樣的網(wǎng)站顯的專業(yè),主題突出,容易給人留下深刻印象。
2.設(shè)一個(gè)最近更新或網(wǎng)站指南欄目
如果你的首頁(yè)沒(méi)有安排版面放置最近更新內(nèi)容信息,就有必要設(shè)立一個(gè)“最近更新”的欄目。這樣做是為了照顧常來(lái)的訪客,讓你的主頁(yè)更有人性化。
如果你的主頁(yè)內(nèi)容龐大(超過(guò)15MB),層次較多,而又沒(méi)有站內(nèi)的搜索引擎,建議您設(shè)置“本站指南”欄目??梢詭椭踉L者快速找到他們想要的內(nèi)容。
3.設(shè)定一個(gè)可以雙向交流的欄目
不需要很多,但一定要有。比如論壇,留言本,郵件列表等,可以讓瀏覽者留下他們的信息。有調(diào)查表明,提供雙向交流的站點(diǎn)比簡(jiǎn)單的留一個(gè)"Email me"的站點(diǎn)更具有親和力。
4.設(shè)一個(gè)下載或常見(jiàn)問(wèn)題回答欄目
網(wǎng)絡(luò)的特點(diǎn)是信息共享。如果你看到一個(gè)站點(diǎn)有大量的優(yōu)秀的有價(jià)值的資料,你肯定希望能一次性下載,而不是一頁(yè)一頁(yè)瀏覽存盤(pán)。“將心比心”在你自己的主頁(yè)上設(shè)置一個(gè)資料下載欄目,會(huì)得到大家的喜歡。有些站點(diǎn)為了廣告顯示量,一篇文章還要分幾頁(yè)顯示,我覺(jué)得遲早會(huì)因訪問(wèn)量下降而淘汰(個(gè)人意見(jiàn):)。另外,如果您的站點(diǎn)經(jīng)常收到網(wǎng)友關(guān)于某方面的問(wèn)題來(lái)信,你好設(shè)立一個(gè)常見(jiàn)問(wèn)題回答的欄目,既方便了網(wǎng)友,也可以節(jié)約自己更多時(shí)間用以學(xué)習(xí)。
至于其他的輔助內(nèi)容,如關(guān)于本站,版權(quán)信息等可以不放在主欄目里,以免沖淡主題??偨Y(jié)以上幾點(diǎn),我們得出劃分欄目需要注意的是:
●盡可能刪除與主題無(wú)關(guān)的欄目
●盡可能將網(wǎng)站最有價(jià)值的內(nèi)容列在欄目上
●盡可能方便訪問(wèn)者的瀏覽和查詢
上面說(shuō)的是欄目,我們?cè)倏纯窗鎵K設(shè)置。版塊比欄目的概念要大一些,每個(gè)版塊都有自己的欄目。舉個(gè)例子:網(wǎng)易的站點(diǎn)分新聞,體育,財(cái)經(jīng),娛樂(lè),教育等版塊,每個(gè)版塊下面有各有自己的主欄目。一般的個(gè)人站點(diǎn)內(nèi)容少,只有主欄目(主菜單)就夠了,不需要設(shè)置版塊。如果你覺(jué)得的確有必要設(shè)置版塊的,應(yīng)該注意1.各版塊要有相對(duì)獨(dú)立性。2.各版塊要有相互關(guān)聯(lián)。3.版塊的內(nèi)容要圍繞站點(diǎn)主題。關(guān)于版塊方面,主要是門(mén)戶站點(diǎn)等較大ICP需要考慮的問(wèn)題,阿捷在此
不再作展開(kāi)討論。

好,已經(jīng)深夜了,今天就寫(xiě)到這。阿捷下次繼續(xù)和大家探討如何"確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)",謝謝。
確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)
大家好。這是《設(shè)計(jì)的思考》系列文章第四篇。如果你需要前幾期文章可以到索易下載《多媒體與網(wǎng)站開(kāi)發(fā)》電子雜志,也可以到我個(gè)人主頁(yè)《網(wǎng)頁(yè)設(shè)計(jì)師》瀏覽。
上篇講到:我們?cè)趧?dòng)手制作網(wǎng)頁(yè)前,一定要考慮好以下三方面:
1.確定欄目和版塊;
2.確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)
3.確定網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計(jì)
今天我們繼續(xù)來(lái)討論“確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)”。
一.網(wǎng)站的目錄結(jié)構(gòu)
網(wǎng)站的目錄是指你建立網(wǎng)站時(shí)創(chuàng)建的目錄。例如:在用frontpage98建立網(wǎng)站時(shí)都默認(rèn)建立了根目錄和images子目錄。目錄的結(jié)構(gòu)是一個(gè)容易忽略的問(wèn)題,大多數(shù)站長(zhǎng)都是未經(jīng)規(guī)劃,隨意創(chuàng)建子目錄。目錄結(jié)構(gòu)的好壞,對(duì)瀏覽者來(lái)說(shuō)并沒(méi)有什么太大的感覺(jué),但是對(duì)于站點(diǎn)本身的上傳維護(hù),內(nèi)容未來(lái)的擴(kuò)充和移植有著重要的影響。下面是建立目錄結(jié)構(gòu)的一些建議:
●不要將所有文件都存放在根目錄下。
有網(wǎng)友為了方便,將所有文件都放在根目錄下。這樣做造成的不利影響在于:
1.文件管理混亂。你常常搞不清哪些文件需要編輯和更新,哪些無(wú)用的文件可以刪除,哪些是相關(guān)聯(lián)的文件,影響工作效率。
2.上傳速度慢。服務(wù)器一般都會(huì)為根目錄建立一個(gè)文件索引。當(dāng)您將所有文件都放在根目錄下,那么即使你只上傳更新一個(gè)文件,服務(wù)器也需要將所有文件再檢索一遍,建立新的索引文件。很明顯,文件量越大,等待的時(shí)間也將越長(zhǎng)。所以,給您的建議是:盡可能減少根目錄的文件存放數(shù)。
●按欄目?jī)?nèi)容建立子目錄。
子目錄的建立,首先按主菜單欄目建立。例如:網(wǎng)頁(yè)教程類站點(diǎn)可以根據(jù)技術(shù)類別分別建立相應(yīng)的目錄,象Flash,Dhtml,Javascript等;企業(yè)站點(diǎn)可以按公司簡(jiǎn)介,產(chǎn)品介紹,價(jià)格,在線定單,反饋聯(lián)系等建立相應(yīng)目錄。
其他的次要欄目,類似what's new,友情連接內(nèi)容較多,需要經(jīng)常更新的可以建立獨(dú)立的子目錄。而一些相關(guān)性強(qiáng),不需要經(jīng)常更新的欄目,例如:關(guān)于本站,關(guān)于站長(zhǎng),站點(diǎn)經(jīng)歷等可以合并放在一個(gè)統(tǒng)一目錄下。
所有程序一般都存放在特定目錄。例如:CGI程序放在cgi-bin目錄。便于維護(hù)管理。所有需要下載的內(nèi)容也好放在一個(gè)目錄下。
●在每個(gè)主目錄下都建立獨(dú)立的images目錄。
默認(rèn)的,一個(gè)站點(diǎn)根目錄下都有一個(gè)images目錄。剛開(kāi)始學(xué)習(xí)主頁(yè)制作時(shí),阿捷習(xí)慣將所有圖片都存放在這個(gè)目錄里。可是后來(lái)發(fā)現(xiàn)很不方便,當(dāng)我需要將某個(gè)主欄目打包供網(wǎng)友下載,或者將某個(gè)欄目刪除時(shí),圖片的管理相當(dāng)麻煩。經(jīng)過(guò)實(shí)踐發(fā)現(xiàn):為每個(gè)主欄目建立一個(gè)獨(dú)立的images目錄是最方便管理的。而根目錄下的images目錄只是用來(lái)放首頁(yè)和一些次要欄目的圖片。
●目錄的層次不要太深。
目錄的層次建議不要超過(guò)3層。原因很簡(jiǎn)單,維護(hù)管理方便。
其它需要注意的還有:
1.不要使用中文目錄;網(wǎng)絡(luò)無(wú)國(guó)界,使用中文目錄可能對(duì)網(wǎng)址的正確顯示造成困難。
2.不要使用過(guò)長(zhǎng)的目錄;盡管服務(wù)器支持長(zhǎng)文件名,但是太長(zhǎng)的目錄名不便于記憶。
3.盡量使用意義明確的目錄;上面的例子中,你可以用Flash,Dhtml,Javascript來(lái)建立目錄,也可以用1,2,3建立目錄,但是哪一個(gè)更明確,更便于記憶和管理呢?顯然是前者!
隨著網(wǎng)頁(yè)技術(shù)的不斷發(fā)展,利用數(shù)據(jù)庫(kù)或者其他后臺(tái)程序自動(dòng)生成網(wǎng)頁(yè)越來(lái)越普遍,網(wǎng)站的目錄結(jié)構(gòu)也必將飛躍到一個(gè)新的結(jié)構(gòu)層次。
二.網(wǎng)站的鏈接結(jié)構(gòu)
網(wǎng)站的鏈接結(jié)構(gòu)是指頁(yè)面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)。它建立在目錄結(jié)構(gòu)基礎(chǔ)之上,但可以跨越目錄。形象的說(shuō):每個(gè)頁(yè)面都是一個(gè)固定點(diǎn),鏈接則是在兩個(gè)固定點(diǎn)之間的連線。一個(gè)點(diǎn)可以和一個(gè)點(diǎn)連接,也可以和多個(gè)點(diǎn)連接。更重要的是,這些點(diǎn)并不是分布在一個(gè)平面上,而是存在于一個(gè)立體的空間中。
●我們研究網(wǎng)站的鏈接結(jié)構(gòu)的目的在于:用最少的鏈接,使得瀏覽最有效率。
一般的,建立網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本方式:
1.樹(shù)狀鏈接結(jié)構(gòu)(一對(duì)一)。類似DOS的目錄結(jié)構(gòu),首頁(yè)鏈接指向一級(jí)頁(yè)面,一級(jí)頁(yè)面鏈接指向二級(jí)頁(yè)面。立體結(jié)構(gòu)看起來(lái)就象蒲公英。這樣的鏈接結(jié)構(gòu)瀏覽時(shí),一級(jí)級(jí)進(jìn)入,一級(jí)級(jí)退出。優(yōu)點(diǎn)是條理清晰,訪問(wèn)者明確知道自己在什么位置,不會(huì)"迷"路。缺點(diǎn)是瀏覽效率低,一個(gè)欄目下的子頁(yè)面到另一個(gè)欄目下的子頁(yè)面,必須繞經(jīng)首頁(yè)。
2.星狀鏈接結(jié)構(gòu)(一對(duì)多)。類似網(wǎng)絡(luò)服務(wù)器的鏈接,每個(gè)頁(yè)面相互之間都建立有鏈接。立體結(jié)構(gòu)象東方明珠電視塔上的鋼球。這種鏈接結(jié)構(gòu)的優(yōu)點(diǎn)是瀏覽方便,隨時(shí)可以到達(dá)自己喜歡的頁(yè)面。缺點(diǎn)是鏈接太多,容易使瀏覽者迷路,搞不清自己在什么位置,看了多少內(nèi)容。
這兩種基本結(jié)構(gòu)都只是理想方式,在實(shí)際的網(wǎng)站設(shè)計(jì)中,總是將這兩種結(jié)構(gòu)混合起來(lái)使用。我們希望瀏覽者既可以方便快速的達(dá)到自己需要的頁(yè)面,又可以清晰的知道自己的位置。所以,好的辦法是:
●首頁(yè)和一級(jí)頁(yè)面之間用星狀鏈接結(jié)構(gòu),一級(jí)和二級(jí)頁(yè)面之間用樹(shù)狀鏈接結(jié)構(gòu)。
舉個(gè)例子。一個(gè)新聞?wù)军c(diǎn)的頁(yè)面結(jié)構(gòu)如下:
---------------------------------------------------
一級(jí)頁(yè)面 二級(jí)頁(yè)面
財(cái)經(jīng)新聞頁(yè) -- [財(cái)經(jīng)新聞1,財(cái)經(jīng)新聞2...]
/ |
首頁(yè) -- 娛樂(lè)新聞頁(yè) -- [娛樂(lè)新聞1,娛樂(lè)新聞2...]
|
IT新聞頁(yè) -- [IT新聞1,IT新聞2...]
----------------------------------------------------
其中,首頁(yè),財(cái)經(jīng)新聞頁(yè),娛樂(lè)新聞頁(yè),IT新聞頁(yè)之間是星狀鏈接,可以互相點(diǎn)擊,直接到達(dá)。而財(cái)經(jīng)新聞頁(yè)和它的子頁(yè)面之間是樹(shù)狀連接,瀏覽財(cái)經(jīng)新聞1后,你必須回到財(cái)經(jīng)新聞頁(yè),才能瀏覽IT新聞2。所以,有站點(diǎn)為了免去返回一級(jí)頁(yè)面的麻煩,將二級(jí)頁(yè)面直接用新開(kāi)窗口(POP up windows)打開(kāi),瀏覽結(jié)束后關(guān)閉即可。
注意:以上我們都是用的三級(jí)頁(yè)面舉例。如果您的站點(diǎn)內(nèi)容龐大,分類明細(xì),需要超過(guò)三級(jí)頁(yè)面,那么建議你在頁(yè)面里顯示導(dǎo)航條,可以幫助瀏覽者明確自己所處的位置。就是您經(jīng)常看到許多網(wǎng)站頁(yè)面頂部的,類似這樣:“您現(xiàn)在的位置是:首頁(yè)->財(cái)經(jīng)新聞->股市信息->深圳股->深發(fā)展”
關(guān)于鏈接結(jié)構(gòu)的設(shè)計(jì),在實(shí)際的網(wǎng)頁(yè)制作中是非常重要一環(huán)。采用什么樣的鏈接結(jié)構(gòu)直接影響到版面的布局。例如你的主菜單放在什么位置,是否每頁(yè)都需要放置,是否需要用分幀框架,是否需要加入返回首頁(yè)的鏈接。在連接結(jié)構(gòu)確定后,再開(kāi)始考慮鏈接的效果和形式,是采用下拉表單,還是用DHTML動(dòng)態(tài)菜單等等。
隨著電子商務(wù)的推廣,網(wǎng)站競(jìng)爭(zhēng)的越來(lái)越激烈,對(duì)鏈接結(jié)構(gòu)設(shè)計(jì)的要求已經(jīng)不僅僅局限于可以方便快速的瀏覽,更加注重個(gè)性化和相關(guān)性。例如,一個(gè)愛(ài)嬰主題網(wǎng)站里,在8個(gè)月嬰兒的營(yíng)養(yǎng)問(wèn)題頁(yè)面上,你需要加入8個(gè)月嬰兒的健康問(wèn)題鏈接,智力培養(yǎng)鏈接,或者是有關(guān)奶粉宣傳的鏈接,一本圖書(shū),一個(gè)玩具的鏈接。因?yàn)楦改覆豢赡艿矫總€(gè)欄目下去尋找關(guān)于8個(gè)月嬰兒的信息,他們可能在找到需要的問(wèn)題后就離開(kāi)網(wǎng)站了。如何盡可能留住訪問(wèn)者,是網(wǎng)站設(shè)計(jì)者未來(lái)必須考慮的問(wèn)題。
講到這里,阿捷忽然覺(jué)得自己很厲害,居然會(huì)總結(jié)出這么大一套理論:)什么,皮厚?可能吧,這么多高手都沒(méi)發(fā)言呢!有意見(jiàn)請(qǐng)來(lái)信ajie@soim.com
下次我們繼續(xù)討論“確定網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計(jì)”,歡迎您的參與。
確定網(wǎng)站的整體風(fēng)格和創(chuàng)意設(shè)計(jì)
網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是站長(zhǎng)們最希望掌握,也是最難以學(xué)習(xí)的。難就難在沒(méi)有一個(gè)固定的程式可以參照和模仿。給你一個(gè)主題,任何兩人都不可能設(shè)計(jì)出完全一樣的網(wǎng)站。當(dāng)我們說(shuō):"這個(gè)站點(diǎn)很cool,很有個(gè)性!"那么,是什么讓你覺(jué)得很cool呢?它到底和一般的網(wǎng)站有什么區(qū)別呢?本文試圖用最簡(jiǎn)明的語(yǔ)言來(lái)說(shuō)明:
1.風(fēng)格是什么,如何樹(shù)立網(wǎng)站風(fēng)格?
2.創(chuàng)意是什么,如何產(chǎn)生創(chuàng)意?
●風(fēng)格(style)是抽象的。是指站點(diǎn)的整體形象給瀏覽者的綜合感受。
這個(gè)“整體形象”包括站點(diǎn)的CI(標(biāo)志,色彩,字體,標(biāo)語(yǔ)),版面布局,瀏覽方式,交互性,文字,語(yǔ)氣,內(nèi)容價(jià)值,存在意義,站點(diǎn)榮譽(yù)等等諸多因素。舉個(gè)例子:我們覺(jué)得網(wǎng)易是平易近人的,迪斯尼是生動(dòng)活潑的,IBM是專業(yè)嚴(yán)肅的。這些都是網(wǎng)站給人們留下的不同感受。
風(fēng)格是獨(dú)特的,是站點(diǎn)不同與其他網(wǎng)站的地方?;蛘呱?,或者技術(shù),或者是交互方式,能讓瀏覽者明確分辨出這是你的網(wǎng)站獨(dú)有的。例如新世紀(jì)網(wǎng)絡(luò)(www.century.2000c.net)的黑白色,網(wǎng)易壁紙站的特有框架,即使你只看到其中一頁(yè),也可以分辨出是哪個(gè)網(wǎng)站的。
風(fēng)格是有人性的。通過(guò)網(wǎng)站的外表,內(nèi)容,文字,交流可以概括出一個(gè)站點(diǎn)的個(gè)性,情緒。是溫文儒雅,是執(zhí)著熱情,是活潑易變,是放任不羈。象詩(shī)詞中的“豪放派”和“婉約派”,你可以用人的性格來(lái)比喻站點(diǎn)。
有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于:普通網(wǎng)站你看到的只是堆砌在一起的信息,你只能用理性的感受來(lái)描述,比如信息量大小,瀏覽速度快慢。但你瀏覽過(guò)有風(fēng)格的網(wǎng)站后你能有更深一層的感性認(rèn)識(shí),比如站點(diǎn)有品位,和藹可親,是老師,是朋友。
看了以上描述,你可能對(duì)風(fēng)格是什么可能依然模糊。其實(shí)風(fēng)格就是一句話:與眾不同!
如何樹(shù)立網(wǎng)站風(fēng)格呢?我們可以分這樣幾個(gè)步驟:
第一,確信風(fēng)格是建立在有價(jià)值內(nèi)容之上的。一個(gè)網(wǎng)站有風(fēng)格而沒(méi)有內(nèi)容,就好比繡花枕頭一包草,好比一個(gè)性格傲慢但卻目不識(shí)丁的人。你首先必須保證內(nèi)容的質(zhì)量和價(jià)值性。這是最基本的,無(wú)須置疑。
第二,你需要徹底搞清楚自己希望站點(diǎn)給人的印象是什么。可以從這幾方面來(lái)理清思路:
1.如果只用一句話來(lái)描述你的站點(diǎn),應(yīng)該是:_____________
參考答案:
有創(chuàng)意,專業(yè),有(技術(shù))實(shí)力,有美感,有沖擊力
2.想到你的站點(diǎn),可以聯(lián)想到的色彩是:________________
參考答案:
熱情的紅色,幻想的天蘭色,聰明的金黃色
3.想到你的站點(diǎn),可以聯(lián)想到的畫(huà)面是:________________
參考答案:
一份早報(bào),一輛法拉利跑車(chē),人群擁擠的廣場(chǎng),雜貨店
4.如果網(wǎng)站是一個(gè)人,他擁有的個(gè)性是:________________
參考答案:
思想成熟的中年人,狂野奔放的牛仔,自信憨厚的創(chuàng)業(yè)者
5.作為站長(zhǎng),你希望給人的印象是:____________________
參考答案:
敬業(yè),認(rèn)真投入,有深度,負(fù)責(zé),純真,直爽,淑女
6.用一種動(dòng)物來(lái)比喻,你的網(wǎng)站最象:__________________
參考答案:
貓(神秘高貴),鷹(目光銳利),兔子(聰明敏感),獅子(自信威信)
7.瀏覽者覺(jué)得你和其他網(wǎng)站的不同是:__________________
參考答案:
可以信賴,信息最快,交流方便,
8.瀏覽者和你交流合作的感受是:______________________
參考答案:
師生,同事,朋友,長(zhǎng)幼。
你可以自己先填寫(xiě)一份答案,然后讓其他網(wǎng)友填寫(xiě)。比較后的結(jié)果會(huì)告訴你:你網(wǎng)站現(xiàn)在的差距,弱點(diǎn)及需要改進(jìn)的地方。
第三,在明確自己的網(wǎng)站印象后,開(kāi)始努力建立和加強(qiáng)這種印象。
經(jīng)過(guò)第二步印象的的"量化"后,你需要進(jìn)一步找出其中最有特色特點(diǎn)的東西,就是最能體現(xiàn)網(wǎng)站風(fēng)格的東西。并以它作為網(wǎng)站的特色加以重點(diǎn)強(qiáng)化,宣傳。例如:再次審查網(wǎng)站名稱,域名,欄目名稱是否符合這種個(gè)性,是否易記。審查網(wǎng)站標(biāo)準(zhǔn)色彩是否容易聯(lián)想到這種特色,是否能體現(xiàn)網(wǎng)站的性格等等。具體的做法,沒(méi)有定式。我這里提供一些參考:
1.將你的標(biāo)志logo,盡可能的出現(xiàn)在每個(gè)頁(yè)面上?;蛘唔?yè)眉,或者頁(yè)腳,或則背景。
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)語(yǔ)。把它做在你的banner里,或者放在醒目的位置,告訴大家你的網(wǎng)站的特色是...
5.使用統(tǒng)一的語(yǔ)氣和人稱。即使是多個(gè)人合作維護(hù),也要讓讀者覺(jué)得是同一個(gè)人寫(xiě)的。
6.使用統(tǒng)一的圖片處理效果。比如,陰影效果的方向,厚度,模糊度都必須一樣。
7.創(chuàng)造一個(gè)你的站點(diǎn)特有的符號(hào)或圖標(biāo)。比如在一句鏈接前的一個(gè)點(diǎn),可以使用,.?!睢稹蟆酢?rarr;(區(qū)位碼里自己參看)等等。雖然很簡(jiǎn)單的一個(gè)變化,卻給人與眾不同的感覺(jué),(為什么我沒(méi)有想到呢?)
8.用自己設(shè)計(jì)的花邊,線條,點(diǎn)
9.展示你網(wǎng)站的榮譽(yù)和成功作品。
10.告訴網(wǎng)友關(guān)于你的真實(shí)的故事和想法。
風(fēng)格的形成不是一次定位的,你可以在實(shí)踐中不斷強(qiáng)化,調(diào)整,修飾,直到有一天,網(wǎng)友們寫(xiě)信告訴你:"我喜歡你的站點(diǎn),因?yàn)樗苡酗L(fēng)格!"
● 創(chuàng)意(idea)是網(wǎng)站生存的關(guān)鍵。這一點(diǎn)相信大家都已經(jīng)認(rèn)同。然而作為網(wǎng)頁(yè)設(shè)計(jì)師,最苦惱的就是沒(méi)有好的創(chuàng)意來(lái)源。
注意,這里說(shuō)的創(chuàng)意是指站點(diǎn)的整體創(chuàng)意,(因?yàn)檫@個(gè)創(chuàng)意而產(chǎn)生這個(gè)站點(diǎn),或者相同的內(nèi)容,推出的創(chuàng)意不同),網(wǎng)頁(yè)的平面設(shè)計(jì)創(chuàng)意我將在后面的版面布局竅門(mén)里介紹。
創(chuàng)意到底是什么,如何產(chǎn)生創(chuàng)意呢?
創(chuàng)意是引人入勝,精彩萬(wàn)分,出奇不意的;
創(chuàng)意是捕捉出來(lái)的點(diǎn)子,是創(chuàng)作出來(lái)的奇招....
這些講法都說(shuō)出了創(chuàng)意的一些特點(diǎn),實(shí)質(zhì)上,
○創(chuàng)意是傳達(dá)信息的一種特別方式。
比如Webdesigner(網(wǎng)頁(yè)設(shè)計(jì)師),我們將其中的E字母大寫(xiě)一下: wEbdEsigEr,感覺(jué)怎么樣,這其實(shí)就是一種創(chuàng)意!
創(chuàng)意并不是天才者的靈感,而是思考的結(jié)果。根據(jù)美國(guó)廣告學(xué)教授詹姆斯的研究,創(chuàng)意思考的過(guò)程分五階段:
1.準(zhǔn)備期--研究所搜集的資料,根據(jù)舊經(jīng)驗(yàn),啟發(fā)新創(chuàng)意;
2.孵化期--將資料咀嚼消化,使意識(shí)自由發(fā)展,任意結(jié)合;
3.啟示期--意識(shí)發(fā)展并結(jié)合,產(chǎn)生創(chuàng)意;
4.驗(yàn)證期--將產(chǎn)生的創(chuàng)意討論修正;
5.形成期--設(shè)計(jì)制作網(wǎng)頁(yè),將創(chuàng)意具體化。
○創(chuàng)意是將現(xiàn)有的要素重新組合。
比如,網(wǎng)絡(luò)與電話結(jié)合,產(chǎn)生IP電話。從這一點(diǎn)上出發(fā),任何人,包括你和我,都可以創(chuàng)造出不同凡響的創(chuàng)意。而且,資料越豐富,越容易產(chǎn)生創(chuàng)意。就好比萬(wàn)花筒,筒內(nèi)的玻璃片越多,所呈現(xiàn)的圖案越多。你如果有心可以發(fā)現(xiàn),網(wǎng)絡(luò)上的最多的創(chuàng)意來(lái)自與現(xiàn)實(shí)生活的結(jié)合(或者虛擬現(xiàn)實(shí)),例如在線書(shū)店,電子社區(qū),在線拍賣(mài)。你是否想到了一種更好的創(chuàng)意呢?
創(chuàng)意思考的途徑最常用的是聯(lián)想,這里提供了網(wǎng)站創(chuàng)意的25種聯(lián)想線索:
1.把它顛倒 2.把它縮小 3.把顏色換一下 4.使它更長(zhǎng)
5.使它閃動(dòng) 6.把它放進(jìn)音樂(lè)里 7.結(jié)合文字音樂(lè)圖畫(huà) 8.使它成為年輕的
9.使它重復(fù) 10.使它變成立體 11.參加競(jìng)賽 12.參加打賭
13.變更一部分 14.分裂它 15.使它羅曼蒂克 16.使它速度加快
17.增加香味 18.使它看起來(lái)流行 19.使它對(duì)稱 20.將它向兒童訴求
21.價(jià)格更低 22.給它起個(gè)綽號(hào) 23.把它打包 24.免費(fèi)提供
25.以上各項(xiàng)延伸組合
-------------(轉(zhuǎn)載自樊志育《廣告制作》)
需要一提的是:創(chuàng)意的目的是更好的宣傳推廣網(wǎng)站。如果創(chuàng)意很好,卻對(duì)網(wǎng)站發(fā)展毫無(wú)意義,好比給奶牛穿高跟鞋,那么,我們寧可放棄這個(gè)創(chuàng)意!
關(guān)于風(fēng)格和創(chuàng)意,可以講得還有許多。感興趣的網(wǎng)友可以自己找一些廣告設(shè)計(jì)方面的書(shū)閱讀。希望本文能幫助您對(duì)網(wǎng)站的設(shè)計(jì)有一個(gè)更新的認(rèn)識(shí)和提高。謝謝!
首頁(yè)的設(shè)計(jì)
在我們?nèi)婵紤]好網(wǎng)站的欄目,鏈接結(jié)構(gòu)和整體風(fēng)格之后,我們就可以正式動(dòng)手制作首頁(yè)了。
有這么一句俗語(yǔ):"良好的開(kāi)端是成功的一半"。
在網(wǎng)站設(shè)計(jì)上也是如此,首頁(yè)的設(shè)計(jì)是一個(gè)網(wǎng)站成功與否的關(guān)鍵。人們往往看到第一頁(yè)就已經(jīng)對(duì)你的站點(diǎn)有一個(gè)整體的感覺(jué)。是不是能夠促使瀏覽者繼續(xù)點(diǎn)擊進(jìn)入,是否能夠吸引瀏覽者留在站點(diǎn)上,全憑首頁(yè)設(shè)計(jì)的"功力"了。
所以,首頁(yè)的設(shè)計(jì)和制作是絕對(duì)要重視和花心思的。阿捷的經(jīng)驗(yàn)是:一般首頁(yè)設(shè)計(jì)和制作占整個(gè)制作時(shí)間的40%。你寧可多花些時(shí)間在早期,以免出現(xiàn)全部做好以后再修改,那將是最浪費(fèi)精力的事。
這里,先插一個(gè)“封面”的問(wèn)題。封面是指沒(méi)有具體內(nèi)容,只放一個(gè)logo點(diǎn)擊進(jìn)入或者只有簡(jiǎn)單的圖形菜單的首頁(yè)。
是否需要為站點(diǎn)設(shè)計(jì)一個(gè)“封面”?阿捷的個(gè)人觀點(diǎn)是:沒(méi)必要!
除非你是很藝術(shù)類的站點(diǎn),或者可以確信內(nèi)容獨(dú)特,可以吸引瀏覽者進(jìn)一步點(diǎn)擊進(jìn)入的站點(diǎn),否則的話,封面式的首頁(yè)并不會(huì)給你的站點(diǎn)帶來(lái)什么好處。我們上網(wǎng)瀏覽需要的是快速,有價(jià)值的信息,如果等待xx分鐘,只顯示出一個(gè)粗劣的“ENTER”圖標(biāo),那么相信沒(méi)有人會(huì)再耐心等待進(jìn)入下一頁(yè)。
因?yàn)槭醉?yè)的重要性,阿捷將著重用8篇文章來(lái)仔細(xì)討論有關(guān)首頁(yè)設(shè)計(jì)的方方面面,大致提綱如下:
○版面布局的竅門(mén)
○色彩的搭配
○字體的設(shè)置和表格的嵌套
○細(xì)微之處見(jiàn)功力
○考慮不同的瀏覽器和分辨率
○設(shè)計(jì)好你的banner和位置
○meta標(biāo)簽的重要性
○首頁(yè)設(shè)計(jì)的小建議
今天,只是關(guān)于首頁(yè)設(shè)計(jì)的一個(gè)引子。讓我們來(lái)大致了解一下首頁(yè)設(shè)計(jì)的步驟。
首頁(yè),從根本上說(shuō)就是全站內(nèi)容的目錄,是一個(gè)索引。但只是羅列目錄顯然是不夠的,如何設(shè)計(jì)好一個(gè)首頁(yè)呢?一般的步驟是:
●確定首頁(yè)的功能模塊
●設(shè)計(jì)首頁(yè)的版面
●處理技術(shù)上的細(xì)節(jié)
一).確定首頁(yè)的功能模塊。
首頁(yè)的內(nèi)容模塊是指你需要在首頁(yè)上實(shí)現(xiàn)的主要內(nèi)容和功能。一般的站點(diǎn)都需要這樣一些模塊:
網(wǎng)站名稱(logo), 廣告條(banner), 主菜單(menu),
新聞(what's new), 搜索(search), 友情鏈接(links),
郵件列表(maillist),計(jì)數(shù)器(count), 版權(quán)(copyright).
選擇哪些模塊,實(shí)現(xiàn)哪些功能,是否需要添加其他模塊都是首頁(yè)設(shè)計(jì)首先需要確定的。

二).設(shè)計(jì)首頁(yè)的版面
在功能模塊確定后,開(kāi)始設(shè)計(jì)首頁(yè)的版面。就象搭積木,每個(gè)模塊是一個(gè)單位積木,如何拼搭出一座漂亮的房子,就看你的創(chuàng)意和想象力了。
設(shè)計(jì)版面的好方法是:找一張白紙,一支筆,先將你理想中的草圖勾勒出來(lái),然后再用網(wǎng)頁(yè)制作軟件實(shí)現(xiàn)。
三).處理技術(shù)上的細(xì)節(jié)

阿捷經(jīng)常收到的來(lái)信問(wèn)題就是:我制作的主頁(yè)如何能在不同分辨率下保持不變形,如何能在IE和NC下看起來(lái)都不至于太丑陋,如何設(shè)置字體和鏈接顏色....等等,阿捷將在下面幾篇文章里為大家詳細(xì)介紹。
首頁(yè)設(shè)計(jì)是整個(gè)網(wǎng)站設(shè)計(jì)的難點(diǎn)和關(guān)鍵,阿捷希望能夠通過(guò)和大家的交流,總結(jié)出一套較為合理易學(xué)的設(shè)計(jì)方法,從而舉一反三,使我們能夠更加輕松的完成整個(gè)站點(diǎn)的設(shè)計(jì)制作。如果你愿意將你的心得體會(huì)和大家分享,請(qǐng)來(lái)信ajie@soim.com,謝謝!
版面布局的原理
設(shè)計(jì)首頁(yè)的第一步是設(shè)計(jì)版面布局。
就象傳統(tǒng)的報(bào)刊雜志編輯一樣,我們將網(wǎng)頁(yè)看作一張報(bào)紙,一本雜志來(lái)進(jìn)行排版布局。雖然動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的發(fā)展使得我們開(kāi)始趨向于學(xué)習(xí)場(chǎng)景編劇,但是固定的網(wǎng)頁(yè)版面設(shè)計(jì)基礎(chǔ)依然是必須學(xué)習(xí)和掌握的。它們的基本原理是共通的,你可以領(lǐng)會(huì)要點(diǎn),舉一反三。
版面指的是瀏覽器看到的完整的一個(gè)頁(yè)面(可以包含框架和層)。因?yàn)槊總€(gè)人的顯示器分辨率不同,所以同一個(gè)頁(yè)面的大小可能出現(xiàn)640*480像素,800*600像素,1024*768像素等不同尺寸。
布局,就是以最適合瀏覽的方式將圖片和文字排放在頁(yè)面的不同位置。你可能注意到:“最適合”是一個(gè)不確定的形容詞,什么才是最適合的呢?抱歉的是阿捷不能也不可能給您一個(gè)完整的正確的答案。就好比有人希望知道成功的秘訣是什么,成功者只能建議您用什么方法,什么途徑才能最容易獲得成功,而不可能有一步成功的"秘訣"告訴您。
我們?cè)谠O(shè)計(jì)思考系列文章第四篇講過(guò)站點(diǎn)整體的創(chuàng)意,版面布局也是一個(gè)創(chuàng)意的問(wèn)題,但要比站點(diǎn)整體的創(chuàng)意容易,有規(guī)律的多。讓我們先來(lái)了解一下版面布局的步驟:
一.草案
新建頁(yè)面就象一張白紙,沒(méi)有任何表格,框架和約定俗成的東西,你可以盡可能的發(fā)揮你的想象力,將你想到的"景象"畫(huà)上去(我們建議您用一張白紙和一支鉛筆,當(dāng)然用作圖軟件photoshop等也可以)。這屬于創(chuàng)造階段,不講究細(xì)膩工整,不必考慮細(xì)節(jié)功能,只以粗陋的線條勾畫(huà)出創(chuàng)意的輪廓即可。盡你的可能多畫(huà)幾張,最后選定一個(gè)滿意的作為繼續(xù)創(chuàng)作的腳本。
二.粗略布局
在草案的基礎(chǔ)上,將你確定需要放置的功能模塊安排到頁(yè)面上。(注:功能模塊我們?cè)?quot;首頁(yè)設(shè)計(jì)-引子"中提過(guò),主要包含網(wǎng)站標(biāo)志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計(jì)數(shù)器,版權(quán)信息等)。注意,這里我們必須遵循突出重點(diǎn)、平衡諧調(diào)的原則,將網(wǎng)站標(biāo)志,主菜單等最重要的模塊放在最顯眼,最突出的位置,然后在考慮次要模塊的排放。
三.定案
將粗略布局精細(xì)化,具體化。(靠你的智慧和經(jīng)驗(yàn),旁敲側(cè)擊多方聯(lián)想,才能作出具有創(chuàng)意的布局。)
在布局過(guò)程中,我們可以遵循的原則有:
1、正常平衡---亦稱"勻稱"。多指左右、上下對(duì)照形式,主要強(qiáng)調(diào)秩序,能達(dá)到安定誠(chéng)實(shí)、信賴的效果。
2、異常平衡---即非對(duì)照形式,但也要平衡和韻律,當(dāng)然都是不均整的,此種布局能達(dá)到強(qiáng)調(diào)性、不安性、高注目性的效果。
3、對(duì)比---所謂對(duì)比,不僅利用色彩、色調(diào)等技巧來(lái)作表現(xiàn),在內(nèi)容上也可涉及古與今、新與舊、貧與富等對(duì)比。
4、凝視---所謂凝視是利用頁(yè)面中人物視線,使瀏覽者仿照跟隨的心理,以達(dá)到注視頁(yè)面的效果,一般多用明星凝視狀。
5、空白---空白有兩種作用,一方面對(duì)其他網(wǎng)站表示突出卓越,另一方面也表示網(wǎng)頁(yè)品位的優(yōu)越感,這種表現(xiàn)方法對(duì)體顯網(wǎng)頁(yè)的格調(diào)十分有效。
6、盡量用圖片解說(shuō)---此法對(duì)不能用語(yǔ)言說(shuō)服、或用語(yǔ)言無(wú)法表達(dá)的情感,特別有效。圖片解說(shuō)的內(nèi)容,可以傳達(dá)給瀏覽者的更多的心理因素。
------------(轉(zhuǎn)載自廣告大師樊志育《廣告制作》)
以上的設(shè)計(jì)原則,雖然枯燥,但是我們?nèi)绻茴I(lǐng)會(huì)并活用到頁(yè)面布局里,效果就大不一樣了。比如,
○網(wǎng)頁(yè)的白色背景太虛,則可以加些色快;
○版面零散,可以用線條和符號(hào)串聯(lián);
○左面文字過(guò)多,右面則可以插一張圖片保持平衡;
○表格太規(guī)矩,可以改用導(dǎo)角試試。
經(jīng)過(guò)不斷的嘗試和推敲,你的網(wǎng)頁(yè)一定會(huì)亮麗起來(lái)的哦:)
看看我們經(jīng)常用到的版面布局形式:
1."T"結(jié)構(gòu)布局。所謂"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é)色彩上不注意,很容易讓人"看之無(wú)味"。
2."口"型布局。這是一個(gè)象形的說(shuō)法,就是頁(yè)面一般上下各有一個(gè)廣告條,左面是主菜單,右面放友情連接等,中間是主要內(nèi)容。(圖略)
這種布局的優(yōu)點(diǎn)是充分利用版面,信息量大(我的主頁(yè)首頁(yè)即屬于這種布局)。缺點(diǎn)是頁(yè)面擁擠,不夠靈活。也有將四邊空出,只用中間的窗口型設(shè)計(jì),例如網(wǎng)易壁紙站。
3."三"型布局。這種布局多用于國(guó)外站點(diǎn),國(guó)內(nèi)用的不多。特點(diǎn)是頁(yè)面上橫向兩條色塊,將頁(yè)面整體分割為四部分,色塊中大多放廣告條。
4.對(duì)稱對(duì)比布局。顧名思義,采取左右或者上下對(duì)稱的布局,一半深色,一半淺色,一般用于設(shè)計(jì)型站點(diǎn)。優(yōu)點(diǎn)是視覺(jué)沖擊力強(qiáng),缺點(diǎn)是將兩部分有機(jī)的結(jié)合比較困難。
5.POP布局。POP引自廣告術(shù)語(yǔ),就是指頁(yè)面布局象一張宣傳海報(bào),以一張精美圖片作為頁(yè)面的設(shè)計(jì)中心。常用于時(shí)尚類站點(diǎn),比如ELLE.com。優(yōu)點(diǎn)顯而易見(jiàn):漂亮吸引人。缺點(diǎn)就是速度慢。作為版面布局還是值得借鑒的。
以上總結(jié)了目前網(wǎng)絡(luò)上常見(jiàn)的布局,其實(shí)還有許許多多別具一格的布局,關(guān)鍵在于你的創(chuàng)意和設(shè)計(jì)了。對(duì)于版面布局的技巧,這里提供四個(gè)建議,您可以自己推敲:
1.加強(qiáng)視覺(jué)效果
2.加強(qiáng)文案的可視度和可讀性
3.統(tǒng)一感的視覺(jué)
4.新鮮和個(gè)性是布局的最高境界
好了,今天我們就討論到這里,下篇我們將繼續(xù)首頁(yè)設(shè)計(jì)的"色彩的搭配"篇,歡迎大家來(lái)信討論。ajie@soim.com
網(wǎng)頁(yè)的色彩
網(wǎng)頁(yè)的色彩是樹(shù)立網(wǎng)站形象的關(guān)鍵之一,色彩搭配卻是網(wǎng)友們感到頭疼的問(wèn)題。網(wǎng)頁(yè)的背景,文字,圖標(biāo),邊框,超鏈接...,應(yīng)該采用什么樣的色彩,應(yīng)該搭配什么色彩才能好的表達(dá)出預(yù)想的內(nèi)涵呢?阿捷這里談一些心得,希望對(duì)你有所啟發(fā)。
首先我們先來(lái)了解一些色彩的基本知識(shí):
1.顏色是因?yàn)楣獾恼凵涠a(chǎn)生的。
2.紅,黃,藍(lán)是三原色,其它的色彩都可以用這三種色彩調(diào)和而成。
網(wǎng)頁(yè)html語(yǔ)言中的色彩表達(dá)即是用這三種顏色的數(shù)值表示
例如:紅色是color(255,0,0)十六進(jìn)制的表示方法為(FF0000)
白色為(FFFFFF), 我們經(jīng)常看到的"bgColor=#FFFFFF"就是指背景色為白色。
3.顏色分非彩色和彩色兩類。
非彩色是指黑,白,灰系統(tǒng)色。
彩色是指除了非彩色以外的所有色彩。
4.任何色彩都有飽和度和透明度的屬性,屬性的變化產(chǎn)生不同的色相,所以至少可以制作幾百萬(wàn)種色彩。
網(wǎng)頁(yè)制作用彩色還是非彩色好呢?根據(jù)專業(yè)的研究機(jī)構(gòu)研究表明:彩色的記憶效果是黑白的3.5倍。也就是說(shuō),在一般情況下,彩色頁(yè)面較完全黑白頁(yè)面更加吸引人。
我們通常的做法是:主要內(nèi)容文字用非彩色(黑色),邊框,背景,圖片用彩色。這樣頁(yè)面整體不單調(diào),看主要內(nèi)容也不會(huì)眼花。
●非彩色的搭配
黑白是最基本和最簡(jiǎn)單的搭配,白字黑底,黑底白字都非常清晰明了。
灰色是萬(wàn)能色,可以和任何彩色搭配,也可以幫助兩種對(duì)立的色彩和諧過(guò)渡。如果你實(shí)在找不出合適的色彩,那么用灰色試試,效果絕對(duì)不會(huì)太差。
●彩色的搭配
色彩千變?nèi)f化,彩色的搭配是我們研究的重點(diǎn)。我們依然需要進(jìn)一步學(xué)習(xí)一些色彩的知識(shí)。
一.色環(huán)。
我們將色彩按"紅->黃->綠->藍(lán)->紅"依次過(guò)度漸變,就可以得到一個(gè)色彩環(huán)。
色環(huán)的兩端是暖色和寒色,當(dāng)中是中型色。(如下圖)
紅.橙.橙黃.黃.黃綠.綠.青綠.藍(lán)綠.藍(lán).藍(lán)紫.紫.紫紅.紅
|___________| |____| |_________| |_________|
| | | |
暖色系 中性系 寒色系 中性系
二.色彩的心理感覺(jué)。不同的顏色會(huì)給瀏覽者不同的心理感受。
紅色---是一種激奮的色彩。刺激效果,能使人產(chǎn)生沖動(dòng),憤怒,熱情,活力的感覺(jué)。
綠色---介于冷暖兩中色彩的中間,顯得和睦,寧?kù)o,健康,安全的感覺(jué)。
它和金黃,淡白搭配,可以產(chǎn)生優(yōu)雅,舒適的氣氛。
橙色---也是一種激奮的色彩,具有輕快,歡欣,熱烈,溫馨,時(shí)尚的效果。
黃色---具有快樂(lè),希望,智慧和輕快的個(gè)性,它的明度最高。
藍(lán)色---是最具涼爽,清新,專業(yè)的色彩。
它和白色混合,能體現(xiàn)柔順,淡雅,浪漫的氣氛(象天空的色彩:)
白色---具有潔白,明快,純真,清潔的感受。
黑色---具有深沉,神秘,寂靜,悲哀,壓抑的感受。
灰色---具有中庸,平凡,溫和,謙讓,中立和高雅的感覺(jué)。
每種色彩在飽和度,透明度上略微變化就會(huì)產(chǎn)生不同的感覺(jué)。以綠色為例,黃綠色有青春,旺盛的視覺(jué)意境,而藍(lán)綠色則顯得幽寧,陰深。
○網(wǎng)頁(yè)色彩搭配的原理
1.色彩的鮮明性。網(wǎng)頁(yè)的色彩要鮮艷,容易引人注目。
2.色彩的獨(dú)特性。要有與眾不同的色彩,使得大家對(duì)你的印象強(qiáng)烈。(參考設(shè)計(jì)思考第二篇網(wǎng)站CI的標(biāo)準(zhǔn)色彩一節(jié))
3.色彩的合適性。就是說(shuō)色彩和你表達(dá)的內(nèi)容氣氛相適合。如用粉色體現(xiàn)女性站點(diǎn)的柔性。
4.色彩的聯(lián)想性。不同色彩會(huì)產(chǎn)生不同的聯(lián)想,藍(lán)色想到天空,黑色想到黑夜,紅色想到喜事等,選擇色彩要和你網(wǎng)頁(yè)的內(nèi)涵相關(guān)聯(lián)。
○網(wǎng)頁(yè)色彩掌握的過(guò)程
隨著網(wǎng)頁(yè)制作經(jīng)驗(yàn)的積累,我們用色有這樣的一個(gè)趨勢(shì):單色->五彩繽紛->標(biāo)準(zhǔn)色->單色。一開(kāi)始因?yàn)榧夹g(shù)和知識(shí)缺乏,只能制作出簡(jiǎn)單的網(wǎng)頁(yè),色彩單一;在有一定基礎(chǔ)和材料后,希望制作一個(gè)漂亮的網(wǎng)頁(yè),將自己收集的好的圖片,最滿意色彩堆砌在頁(yè)面上;但是時(shí)間一長(zhǎng),卻發(fā)現(xiàn)色彩雜亂,沒(méi)有個(gè)性和風(fēng)格;第三次重新定位自己的網(wǎng)站,選擇好切合自己的色彩,推出的站點(diǎn)往往比較成功;當(dāng)最后設(shè)計(jì)理念和技術(shù)達(dá)到頂峰時(shí),則又返樸歸真,用單一色彩甚至非彩色就可以設(shè)計(jì)出簡(jiǎn)潔精美的站點(diǎn)。
○網(wǎng)頁(yè)色彩搭配的技巧
文章寫(xiě)到這里,有心急的網(wǎng)友要問(wèn)了:“到底用什么色彩搭配好看呢?你能不能推薦幾種配色方案?”別急,這里有一點(diǎn)技巧,可以幫助你迅速成為調(diào)色大師:)
1.用一種色彩。這里是指先選定一種色彩,然后調(diào)整透明度或者飽和度,(說(shuō)得通俗些就是將色彩變淡或則加深),產(chǎn)生新的色彩,用于網(wǎng)頁(yè)。這樣的頁(yè)面看起來(lái)色彩統(tǒng)一,有層次感。
2.用兩種色彩。先選定一種色彩,然后選擇它的對(duì)比色(在photoshop里按ctrl+shift+I)。我的主頁(yè)用藍(lán)色和黃色就是這樣確定的。整個(gè)頁(yè)面色彩豐富但不花稍。
3.用一個(gè)色系。簡(jiǎn)單的說(shuō)就是用一個(gè)感覺(jué)的色彩,例如淡藍(lán),淡黃,淡綠;或者土黃,土灰,土藍(lán)。確定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中選擇"自定義",然后在"色庫(kù)"中選就可以了:)
4.用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺(jué)很"跳"。
在網(wǎng)頁(yè)配色中,忌諱的是:
1.不要將所有顏色都用到,盡量控制在三種色彩以內(nèi)。
2.背景和前文的對(duì)比盡量要大,(絕對(duì)不要用花紋繁復(fù)的圖案作背景),以便突出主要文字內(nèi)容。
好了,今天阿捷就為大家講到這里了,另外The Open Road網(wǎng)站為大家提供了一張網(wǎng)頁(yè)基本配色表,是非常有價(jià)值的資料,趕快保存一頁(yè)吧!
(http://best.163.com/%7Esinclair/chinese/teach/color/color1.htm)
下次我們繼續(xù)討論“字體和表格”,有好的心得,請(qǐng)來(lái)信!
大家好,網(wǎng)頁(yè)設(shè)計(jì)思考欄目今天繼續(xù)第八講。我們上次討論了首頁(yè)設(shè)計(jì)的版面布局和色彩的搭配,今天我們來(lái)談?wù)勛煮w。
●字體(Font)的設(shè)置是網(wǎng)頁(yè)制作新手遇到的第一個(gè)難點(diǎn)。如何控制字體大小,如何取消超鏈接字體的下劃線是網(wǎng)友來(lái)信問(wèn)得最多的。好,我們來(lái)徹底研究一下字體的各個(gè)方面:
○字符集的設(shè)定。
在查看html文件原代碼時(shí),我們經(jīng)??梢栽谖募^
和之間看到這么一句代碼:
這段代碼的作用是什么呢?是否可以刪除呢?
其實(shí)這是meta標(biāo)簽的設(shè)定語(yǔ)句,是給瀏覽器看的。它的作用就是告訴瀏覽器:這個(gè)HTML文件是采用gb2312字符集制作的。當(dāng)瀏覽器讀到這一代碼,便以gb2312字符集來(lái)解釋和翻譯網(wǎng)頁(yè)原代碼,然后我們就可以看到正確的網(wǎng)頁(yè)。所以這個(gè)meta語(yǔ)句是非常重要的,盡量不要
刪除。
gb2312就是我們最熟悉的GB簡(jiǎn)體碼,英文是iso-8859-1字符集。其它還有BIG5,UTF-8,Shift-JIS,EUC,KOI8-2等字符集,分別用于不同的字體顯示。
○字體的使用。
在網(wǎng)頁(yè)里,字體的定義語(yǔ)句是:顯示文字
其中Arial就是一種字體的名稱。
默認(rèn)的瀏覽器定義的標(biāo)準(zhǔn)字體是中文宋體和英文times new Roma字體。也就是說(shuō),如果你沒(méi)有設(shè)置任何字體,網(wǎng)頁(yè)將以這兩種標(biāo)準(zhǔn)字體顯示。同時(shí),著兩種字體也可以在任何操作系統(tǒng)和瀏覽器里正確顯示。
windows另外自帶了40多種英文字體和5種中文字體。這些字體,你也可以在網(wǎng)頁(yè)里自由使用和設(shè)置。凡是使用windows操作系統(tǒng)的瀏覽器都可以正確顯示這些字體,但在其它操作系統(tǒng)里,如unix 則不能完全正確顯示。
如果你需要用一種特殊的字體來(lái)體現(xiàn)你的風(fēng)格,那么如何讓大家可以真正看到你的設(shè)計(jì)頁(yè)面呢?解決的辦法是:用圖片。
將需要用這種字體的地方用圖片代替,以保證所有人看到的頁(yè)面是同一效果。   ○字體的樣式(style)。
字體的樣式有四種:正常體(regular),斜體(Italic),粗體(Bold),粗斜體(Bold Italic)。設(shè)置方法很簡(jiǎn)單,阿捷就不多羅嗦了。
○字體的效果。
這里指通過(guò)html語(yǔ)言設(shè)定可以直接顯示的效果,在html里的語(yǔ)句設(shè)定為:
顯示文字
其中,overline是指上劃線效果。其它常用的效果還有:underline(下劃線),uppercase(大寫(xiě))等等。
○字體大小的控制。
字體大小的控制是本節(jié)的重點(diǎn)。
一般字體默認(rèn)的大小是12pt(鎊).用語(yǔ)句可以將文字增大2pt。這種方法我們都已經(jīng)掌握了。而現(xiàn)在網(wǎng)絡(luò)上最流行的小中文字體大小為9pt,是如何設(shè)定的呢?有三種方法:
1.用"顯示文字"語(yǔ)句來(lái)設(shè)定。
顯然這種方法非常麻煩,你必須為每段文字都設(shè)定大小。
2.用CSS層疊樣式表。CSS是DHTML的一個(gè)組成部分,它可以定義整個(gè)頁(yè)面的字體顯示風(fēng)格和大小。是較為簡(jiǎn)便的方法。比如,這里需要設(shè)定整個(gè)頁(yè)面文字大小為9pt,只要將下面這段代碼加入html代碼的和
之間:
其中FONT-SIZE:9pt指字體的大小為9鎊
3.第二種方法已經(jīng)簡(jiǎn)化了許多步驟,但是仍然不是最理想的方法,因?yàn)槟惚仨氃诿總€(gè)頁(yè)面的head區(qū)都放置這么一段代碼,擴(kuò)大了文件的字節(jié)。另外這樣的做法還有一個(gè)重大缺點(diǎn),就是如果我需要修改整個(gè)站點(diǎn)的字體大小,就必須一頁(yè)一頁(yè)的改!
所以推薦給你最終也是目前好的方法---外部摸板文件調(diào)用法。
“外部摸板調(diào)用”就是說(shuō)你將css的設(shè)定作成一個(gè)單獨(dú)的文件,在每個(gè)頁(yè)面里都調(diào)用它。一旦你需要修改字體大小,只要修改一個(gè).css文件,幾百個(gè)頁(yè)面就同時(shí)修改了。(這種方法類似子程序調(diào)用編寫(xiě)過(guò)程序的網(wǎng)友很容易理解:)
調(diào)用的具體方法如下:
(1)將上面的css代碼copy成一個(gè)mycss.txt文件,然后修改后綴名為mycss.css
(2)在html文件的之間插入,
語(yǔ)句調(diào)用mycss.css(注意有關(guān)路徑的設(shè)置正確)OK!
○字體超鏈接樣式的設(shè)定。
通常在網(wǎng)頁(yè)的中設(shè)置連接的顏色,如:
其中:link -- Hyperlink(連接)的顏色
vlink-- visited Hyperlink(已訪問(wèn)過(guò)的連接)顏色
alink-- active Hyperlink (當(dāng)前活動(dòng)的連接)顏色
顏色用rgb的16進(jìn)制碼表示如紅色是#FF0000。
同樣用CSS可以更簡(jiǎn)便的設(shè)定網(wǎng)頁(yè)超連接的樣式,看下面這段代碼
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}
將它插入html文件的head區(qū)就可以了。其中l(wèi)ink設(shè)定的是有超鏈接的顏色;visited是訪問(wèn)過(guò)的超鏈接顏色;active是鼠標(biāo)移上去的顏色;hover是鼠標(biāo)點(diǎn)擊時(shí)的顏色。而"text-decoration:none"是指取消超鏈接的下劃線顯示。
關(guān)于CSS的設(shè)定還有更多的用法和技巧,比如在同一頁(yè)中設(shè)定不同的字體大小和超鏈接顏色,請(qǐng)學(xué)習(xí)有關(guān)CSS的專門(mén)知識(shí)(可以到阿捷的主頁(yè)http://pageone.yeah.net查閱)在這里我們不在冗述。
●上面已經(jīng)介紹了字體在技術(shù)上的各個(gè)方面。有關(guān)字體的設(shè)計(jì)使用,目前還沒(méi)有一個(gè)成熟的理論,下面是幾條網(wǎng)頁(yè)設(shè)計(jì)中字體的使用原則,僅供參考:
1.不要使用超過(guò)3種以上的字體。字體太多則顯得雜亂,沒(méi)有主題。
2.不要用太大的字。因?yàn)榘婷媸菍氋F,有限的,粗陋的大字體不能帶給訪問(wèn)者更多信息。
3.不要使用不停閃爍的文字。想讓瀏覽者多停留一會(huì)兒的話,就不要使用閃爍的文字。
4.原則上標(biāo)題的字體較正文大,顏色也應(yīng)有所區(qū)別。
●附:英文字體資源
http://www.pambytes.com
http://www.freestuff101.com/Fonts
http://www.typearound.com/mainfont.html
http://205.177.231.33/sofontes/us/pc_us.htm
關(guān)于字體,今天就寫(xiě)到這里,您有好的建議或意見(jiàn),請(qǐng)來(lái)信ajie@soim.com。下章我們繼續(xù)關(guān)于表格的設(shè)計(jì)探討。
表格(table)是頁(yè)面的重要元素,是頁(yè)面排版的主要手段。盡管DHTML中的層(layer)也可以實(shí)現(xiàn)網(wǎng)頁(yè)元素的自由定位,但是表格顯然更加方便編輯與修改。熟練掌握和運(yùn)用表格的各種屬性,可以讓您的頁(yè)面看起來(lái)賞心悅目。

網(wǎng)站標(biāo)題:網(wǎng)站設(shè)計(jì)都包含什么
標(biāo)題鏈接:http://www.bm7419.com/news13/232113.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)