網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素,是承載各種網(wǎng)站應(yīng)用的平臺(tái)。通俗地說,您的網(wǎng)站就是由網(wǎng)頁組成的,如果您只有域名和虛擬主機(jī)而沒有制作任何網(wǎng)頁的話,您的客戶仍舊無法訪問您的網(wǎng)站。
網(wǎng)頁是一個(gè)包含HTML標(biāo)簽的純文本文件,它可以存放在世界某個(gè)角落的某一臺(tái)計(jì)算機(jī)中,是萬維網(wǎng)中的一“頁”,是超文本標(biāo)記語言格式(標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用,文件擴(kuò)展名為.html或.htm)。網(wǎng)頁通常用圖像檔來提供圖畫。網(wǎng)頁要通過網(wǎng)頁瀏覽器來閱讀。
-
中文名
-
網(wǎng)絡(luò)頁面
-
外文名
-
web page
-
閱讀方式
-
網(wǎng)頁瀏覽器
-
拼 音
-
wǎng yè
-
中文縮寫
-
網(wǎng)頁
-
存在方式
-
計(jì)算機(jī)互聯(lián)網(wǎng)
目錄
-
1 主流代碼布局
-
2 構(gòu)成
-
3 記錄功能
-
4 網(wǎng)頁游戲
-
5 元素
-
? 感知信息
-
? 互動(dòng)媒體
-
? 內(nèi)部信息
-
6 分類
-
? 靜態(tài)頁
-
? 動(dòng)態(tài)頁
-
7 設(shè)計(jì)要點(diǎn)
-
? 整體風(fēng)格
-
? 色彩搭配
-
8 排版問題
-
9 設(shè)計(jì)工具
-
? 可用性提升
-
? 設(shè)計(jì)師速成
-
? 元素
-
10 使用腳本
-
11 設(shè)計(jì)原則
-
? 關(guān)于網(wǎng)站
-
? 站點(diǎn)主頁成分
-
? 要素
-
? 原則
-
? 類型
-
? 布局
-
12 網(wǎng)頁儲(chǔ)存
-
13 網(wǎng)頁尺寸
主流代碼布局
編輯
原來是以表格來定位,現(xiàn)在是 DIV(區(qū))+CSS(0.0)。
構(gòu)成
編輯
文字與圖片是構(gòu)成一個(gè)網(wǎng)頁的兩個(gè)最基本的
元素。你可以簡(jiǎn)單地理解為:文字,就是網(wǎng)頁的內(nèi)容。圖片,就是網(wǎng)頁的美觀。除此之外,網(wǎng)頁的元素還包括動(dòng)畫、音樂、程序等等。
在網(wǎng)頁上點(diǎn)擊鼠標(biāo)右鍵,選擇菜單中的 “查看源文件” ,就可以通過記事本看到網(wǎng)頁的實(shí)際內(nèi)容??梢钥吹骄W(wǎng)頁實(shí)際上只是一個(gè)純文本文件。它通過各式各樣的標(biāo)記對(duì)頁面上的文字、圖片、表格、聲音等元素進(jìn)行描述(例如字體、顏色、大小),而瀏覽器則對(duì)這些標(biāo)記進(jìn)行解釋并生成頁面,于是就得到你現(xiàn)在所看到的畫面。 為什么在源文件看不到任何圖片? 網(wǎng)頁文件中存放的只是圖片的鏈接位置,而圖片文件與網(wǎng)頁文件是互相獨(dú)立存放的,甚至可以不在同一臺(tái)計(jì)算機(jī)上。
網(wǎng)頁通常有以下元素:
文字資料圖像檔案Applet(在頁面內(nèi)執(zhí)行的副程式)超鏈結(jié)網(wǎng)頁的合成體為網(wǎng)站,一個(gè)網(wǎng)站的開始點(diǎn)為首頁。
記錄功能
編輯
當(dāng)你每次上網(wǎng)時(shí),都會(huì)在歷史記錄里留下記錄,并且被保存在瀏覽器的緩存文件夾里,刪除時(shí)只要右鍵刪除就可以了 [1] 。
網(wǎng)頁游戲
編輯
從08年開始,國(guó)內(nèi)網(wǎng)頁游戲開始不斷興起,網(wǎng)頁游戲(Webgame)又稱Web游戲,無端網(wǎng)游,簡(jiǎn)稱頁游。網(wǎng)頁游戲也是需要重視水平的,如音效的篩選、恰到好處的樂曲與音效搭配、以及良好的結(jié)構(gòu)平臺(tái)等等,有了這些元素,才能做出一個(gè)好的網(wǎng)頁游戲,同時(shí)也會(huì)引來更多的瀏覽人數(shù)。網(wǎng)頁游戲的出現(xiàn)讓中國(guó)進(jìn)入了一個(gè)新的網(wǎng)絡(luò)游戲平臺(tái),也進(jìn)入了一個(gè)頁游發(fā)展的競(jìng)爭(zhēng)時(shí)代。
元素
編輯
感知信息
-
文本:文本是網(wǎng)頁上最重要的信息載體和交流工具,網(wǎng)頁中的主要信息一般都以文本形式為主。
-
圖像:圖像元素在網(wǎng)頁中具有提供信息并展示直觀形象的作用。
靜態(tài)圖像:在頁面中可能是光柵圖形或矢量圖形。通常為GIF,JPEG或PNG;或矢量格式,如SVG或Flash。
動(dòng)畫圖像:通常動(dòng)畫為GIF和SVG。
三、Flash動(dòng)畫:動(dòng)畫在網(wǎng)頁中的作用是有效地吸引訪問者更多的注意。
四、聲音:聲音是多媒體和視頻網(wǎng)頁重要的組成部分。
五、視頻:視頻文件的采用是網(wǎng)頁效果更加精彩且富有動(dòng)感。
六、表格:表格是在網(wǎng)頁中用來控制面業(yè)信息的布局方式。
七、導(dǎo)航欄:導(dǎo)航欄在網(wǎng)頁中是一組超鏈接,其連接的目的端是網(wǎng)頁中重要的頁面。
八、交互式表單:表單在網(wǎng)頁中通常用來聯(lián)系數(shù)據(jù)庫并接受訪問用戶在瀏覽器端輸入的數(shù)據(jù)。利用服務(wù)器的數(shù)據(jù)庫為客戶端與服務(wù)器端提供更多的互動(dòng) [2] 。
互動(dòng)媒體
頁面上的:
交互式文本:DHTML。
互動(dòng)插圖:例如“點(diǎn)擊此處玩耍該游戲”。
按鈕:例如“百度一下”。
超鏈接:超鏈接是從一個(gè)網(wǎng)頁指向另一個(gè)目的端的鏈接,超鏈界的目的端可以是網(wǎng)頁,也可以是圖片、電子郵件地址、文件和程序等。(標(biāo)準(zhǔn)的“換頁”反應(yīng)。分為URL、URI、URN)。
內(nèi)部信息
-
注釋。如:
二、通過超鏈接鏈接到某文件(如DOC,習(xí),SGML等)。
三、元數(shù)據(jù)與語義的元信息,字符集信息,文件類型描述(DTD),等等。
四、樣式信息:提供的項(xiàng)目的信息(如圖像大小屬性)和視覺規(guī)范,層疊樣式表(CSS)、文檔樣式的語義和規(guī)范語言(外語全稱:Document Style Semantics and Specification Language、外語縮寫:DSSSL)。
五、腳本,通常是爪哇腳本(JavaScript),提供交互性以及相關(guān)功能的補(bǔ)充(比如倒計(jì)時(shí)關(guān)閉窗口等)。
網(wǎng)頁還包含動(dòng)態(tài)適應(yīng)的信息元素,取決于某某渲染瀏覽器或最終用戶的位置。(通過使用IP地址跟蹤和/或“cookie”的信息)。從更一般/寬的角度來看,一些信息(分組)的元素,像一個(gè)導(dǎo)航欄,所有的網(wǎng)頁是統(tǒng)一的,像一個(gè)標(biāo)準(zhǔn),比如“網(wǎng)頁模板系統(tǒng)”。
分類
編輯
靜態(tài)頁
靜態(tài)網(wǎng)頁,其內(nèi)容是預(yù)先確定的,并存儲(chǔ)在Web服務(wù)器或者本地計(jì)算機(jī)/服務(wù)器之上。
特點(diǎn):
-
制作速度快,成本低。
-
模板一旦確定下來,不容易修改,更新比較費(fèi)時(shí)費(fèi)事。
-
常用于制作一些固定板式的頁面。
-
通常用于文本和圖像組成,常用于子頁面的內(nèi)容介紹。
-
對(duì)服務(wù)器性能要求較低,但對(duì)存儲(chǔ)壓力相對(duì)較大。
動(dòng)態(tài)頁
動(dòng)態(tài)網(wǎng)頁,是取決于由用戶提供的參數(shù),并根據(jù)存儲(chǔ)在數(shù)據(jù)庫中的網(wǎng)站上的數(shù)據(jù)中創(chuàng)建的頁面。
通俗地講,靜態(tài)頁是照片,每個(gè)人看都是一樣的,而動(dòng)態(tài)頁則是鏡子,不同的人(不同的參數(shù))看都不相同。
設(shè)計(jì)要點(diǎn)
編輯
網(wǎng)頁設(shè)計(jì)的兩大要點(diǎn)是:整體風(fēng)格和色彩搭配。
整體風(fēng)格
網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是最難以學(xué)習(xí)的,難就難在沒有一個(gè)固定的模式可以參照和模仿。給你一個(gè)主題,任何兩人都不可能設(shè)計(jì)出完全一樣的網(wǎng)站。
風(fēng)格(style)是抽象的。是指站點(diǎn)的整體形象給瀏覽者的綜合感受。這個(gè)“整體形象”包括站點(diǎn)的CI(標(biāo)志、色彩、字體、標(biāo)語)、版面布局、瀏覽方式、交互性、文字、語氣、內(nèi)容價(jià)值、存在意義、站點(diǎn)榮譽(yù)等等諸多因素。舉個(gè)例子:我們覺得網(wǎng)易是平易近人的,迪斯尼是生動(dòng)活潑的。IBM是專業(yè)嚴(yán)肅的,這些都是網(wǎng)站給人們留下的不同感受。
在這里,一些參考經(jīng)驗(yàn):
將你的標(biāo)志,盡可能的放在每個(gè)頁面上最突出的位置。
突出你的標(biāo)準(zhǔn)色彩。
總結(jié)一句能反映貴站精髓的宣傳標(biāo)語!
相同類型的圖像采用相同效果,比如說標(biāo)題字都采用陰影效果,那么在網(wǎng)站中出現(xiàn)的所有標(biāo)題字的陰影效果的設(shè)置應(yīng)該是完全一致的!
色彩搭配
無論是平面設(shè)計(jì),還是網(wǎng)頁設(shè)計(jì),色彩永遠(yuǎn)是最重要的一環(huán)。當(dāng)我們距離顯示屏較遠(yuǎn)的時(shí)候,我們看到的不是優(yōu)美的版式或者是美麗的圖片,而是網(wǎng)頁的色彩。
關(guān)于色彩的原理有許多,在此我們不可能一一闡述,大家可以看看相關(guān)設(shè)計(jì)書籍,有利于系統(tǒng)地理解。在此我們僅僅想告訴大家一些網(wǎng)頁配色時(shí)的小技巧。
-
用一種色彩。這里是指先選定一種色彩,然后調(diào)整透明度或者飽和度,這樣的頁面看起來色彩統(tǒng)一,有層次感。
-
用兩種色彩。先選定一種色彩,然后選擇它的對(duì)比色。
-
用一個(gè)色系。簡(jiǎn)單的說就是用一個(gè)感覺的色彩,例如淡藍(lán),淡黃,淡綠;或者土黃,土灰,土藍(lán)。
在網(wǎng)頁配色中,還要切記一些誤區(qū):
-
不要將所有顏色都用到,盡量控制在三至五種色彩以內(nèi)。
-
背景和前文的對(duì)比盡量要大(絕對(duì)不要用花紋繁復(fù)的圖案作背景),以便突出主要文字內(nèi)容 [3] 。
排版問題
編輯
-
字間距太擠或太寬。
-
行距太小或太大。
-
段距太少或太多。
-
每行字?jǐn)?shù)太多或太少。
設(shè)計(jì)工具
編輯
一、Amaya(單位:萬維網(wǎng)聯(lián)盟)用于編輯HTML、CSS、數(shù)學(xué)標(biāo)記語言、可縮放矢量圖形的工具
二、Dreamweaver(單位:奧多比)用于編輯HTML、ASP、JSP、PHP的輔助工具
三、Frontpage(單位:微軟)跟Dreamweaver一樣。
四、FLASH(單位:奧多比)網(wǎng)頁需要畫面流動(dòng)(動(dòng)畫)時(shí)的首選擇。
五、PhotoShop(單位:奧多比)圖象處理軟件,一般網(wǎng)頁都需要有圖片的相搭配,PhotoShop是款很強(qiáng)大的工具。
六、FireWorks(單位:奧多比)跟PhotoShop一樣都是圖象處理軟件,但FireWorks偏向與對(duì)網(wǎng)頁的處理。Fireworks主要用于制做動(dòng)態(tài)圖片格式。
七、StylePix(單位:Hornil)跟PhotoShop一樣都是圖象處理軟件,可以處理光柵及矢量圖形 [4] 。
可用性提升
權(quán)威研究結(jié)果表明:人們?cè)诰€的閱讀習(xí)慣和平時(shí)的閱讀習(xí)慣是完全不一樣的。訪問者通常是在非常隨意的狀態(tài)下快速瀏覽你的網(wǎng)頁的,他們急于獲取真實(shí)的、實(shí)用的,并且是有價(jià)值的信息。如果他們不能及時(shí)地獲取所需信息,那么,他們將離開你的網(wǎng)頁。
下面的3點(diǎn)方法將會(huì)給你帶來幫助,它會(huì)讓你為你的訪問者提供所需信息,指出提升網(wǎng)頁可用性的方法。
一、精簡(jiǎn)的文本描述
你所寫的文章必須圍繞一個(gè)主題,這可以方便訪問者快速獲取主旨信息和中心思想。好好想想如何把文章改得精簡(jiǎn)得體以便于訪問者閱讀。這里告訴你一個(gè)可行的辦法,盡量把一段文章在3-4行之內(nèi)敘述完整,然后再另起一行寫下面一段。
二、便于快速瀏覽的文本
網(wǎng)絡(luò)用戶一般不會(huì)在線精讀文本內(nèi)容,他們通常是快速瀏覽。因此,應(yīng)該盡量使用簡(jiǎn)短、醒目的文本。舉個(gè)例子來說,可以通過超鏈接的形式將重要的信息從頁面中分離出來,這樣做會(huì)使得這段重要信息顯得非常醒目。將一個(gè)段落以重點(diǎn)列表的形式表示也是一種非常可行的方法。學(xué)會(huì)在你的重點(diǎn)詞組前方加一個(gè)起強(qiáng)調(diào)作用的圓點(diǎn)。還有一點(diǎn),學(xué)會(huì)在頁面中使用副標(biāo)題 ,當(dāng)你瀏覽網(wǎng)頁時(shí),將重點(diǎn)挑選出來,并將它們寫在標(biāo)題標(biāo)簽內(nèi),“標(biāo)題2”和“標(biāo)題3”的效果最好,但是“標(biāo)題1”標(biāo)簽的效果也會(huì)相當(dāng)不錯(cuò),這樣做會(huì)可以給整個(gè)頁面的信息分出層次,以幫助閱讀者在簡(jiǎn)單地瀏覽頁面之后快速地獲取所需信息。
三、必須要客觀公正
這里要提到的“客觀公正”指的是:在你的網(wǎng)頁上放上與你網(wǎng)頁內(nèi)容相關(guān)的鏈接,讓訪問者做出自由的選擇:是繼續(xù)留在你的網(wǎng)頁上,還是去別的網(wǎng)頁上尋找信息。這對(duì)于你——網(wǎng)頁的所有者來說,并不是一件壞事。因?yàn)槟憧梢詾樵L問者指明確切的方向。好好按照上面說的把你的網(wǎng)頁改進(jìn)一下。我相信,網(wǎng)頁的可用性一定會(huì)大大提升;同時(shí),你的訪問者也會(huì)非常感激你,并且會(huì)很愿意與你進(jìn)行往來。
設(shè)計(jì)師速成
循序漸進(jìn)學(xué)知識(shí)
先學(xué)一學(xué)HTML,找本自己能看懂的教材。瀏覽為主,然后學(xué)CSS,進(jìn)而再了解一下JavaScript。
然后就可以用記事本嘗試寫幾個(gè)網(wǎng)頁,記住這時(shí)千萬不要用那些可視化工具,比如Amaya、FrontPage、Dreamweaver(那些以后再學(xué))。
有一個(gè)提高自己“寫網(wǎng)頁”的捷徑,就是上各大網(wǎng)站,模仿他們的寫法,不斷規(guī)范自己的代碼。
接下來學(xué)一下Fireworks。學(xué)Fireworks主要是學(xué)圖片處理,還有切圖。
元素
一、文本:文本是網(wǎng)頁上最重要的信息載體與交流工具,網(wǎng)頁中的主要信息一般都以文本形式為主。
二、圖像:圖像元素在網(wǎng)頁中具有提供信息并展示直觀形象的作用。
靜態(tài)圖像。在頁面中可能是光柵圖形或矢量圖形。通常為GIF,JPEG或PNG;或矢量格式,如SVG或Flash。
使用腳本
編輯
ASP全名Active Server Pages(活性服務(wù)器頁面),是一個(gè)WEB服務(wù)器端的開發(fā)環(huán)境。利用它可以產(chǎn)生和執(zhí)行動(dòng)態(tài)的、互動(dòng)的、高性能的WEB服務(wù)應(yīng)用程序。ASP采用腳本語言VBScript(Java script)作為自己的開發(fā)語言。
PHP是一種跨平臺(tái)的服務(wù)器端的嵌入式腳本語言。它大量地借用C,Java和Perl語言的語法,并耦合PHP自己的特性,使WEB開發(fā)者能夠快速地寫出動(dòng)態(tài)產(chǎn)生頁面。
JSP是Sun公司推出的新一代網(wǎng)站開發(fā)語言,Sun公司借助自己在Java上的不凡造詣,將Java從Java應(yīng)用程序和Java Applet(爪哇小程序)之外,又有新的碩果,就是JSP(爪哇服務(wù)器頁面)。JSP可以在Serverlet和JavaBean的支持下,完成功能強(qiáng)大的站點(diǎn)程序。
WebDNA是一個(gè)服務(wù)器端的腳本,解釋型的語言且?guī)б粋€(gè)嵌入式數(shù)據(jù)庫系統(tǒng),專門設(shè)計(jì)用于萬維網(wǎng)發(fā)布的一個(gè)免費(fèi)的(FastCGI的版本)。基于標(biāo)簽與上下文。
.NET 是 Microsoft XML Web services 平臺(tái)。XML Web services 允許應(yīng)用程序通過 Internet 進(jìn)行通訊和共享數(shù)據(jù),而不管所采用的是哪種操作系統(tǒng)、設(shè)備或編程語言。Microsoft .NET 平臺(tái)提供創(chuàng)建 XML Web services 并將這些服務(wù)集成在一起之所需。對(duì)個(gè)人用戶的好處是無縫的、吸引人的體驗(yàn)。
設(shè)計(jì)原則
編輯
關(guān)于網(wǎng)站
所謂網(wǎng)站(Website),就是指在網(wǎng)際網(wǎng)路(因特網(wǎng))上,根據(jù)一定的規(guī)則,使用HTML等工具制作的用於展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。簡(jiǎn)單地說,網(wǎng)站是一種通訊工具,就像布告欄一樣,人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊(信息),或者利用網(wǎng)站來提供相關(guān)的網(wǎng)路服務(wù)(網(wǎng)絡(luò)服務(wù))。人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站,獲取自己需要的資訊(信息)或者享受網(wǎng)路服務(wù)。
在你眼前,出現(xiàn)在顯示器上的這個(gè)“東西”,就是一個(gè)網(wǎng)頁。網(wǎng)頁實(shí)際是一個(gè)文件,它存放在世界某個(gè)角落的的某一臺(tái)計(jì)算機(jī)中,而這臺(tái)計(jì)算機(jī)必須是與互聯(lián)網(wǎng)相連的。網(wǎng)頁經(jīng)由網(wǎng)址(URL)來識(shí)別與存取,當(dāng)我們?cè)跒g覽器輸入網(wǎng)址后,經(jīng)過一段復(fù)雜而又快速的程序。網(wǎng)頁文件會(huì)被傳送到你的計(jì)算機(jī),然后再通過瀏覽器解釋網(wǎng)頁的內(nèi)容,再展示到你的眼前 [5] 。
站點(diǎn)主頁成分
Web站點(diǎn)主頁應(yīng)具備的基本成分包括:
頁頭:準(zhǔn)確無誤地標(biāo)識(shí)你的站點(diǎn)和企業(yè)標(biāo)志;
Email地址:用來接收用戶垂詢;
聯(lián)系信息:如普通郵件地址或電話;
版權(quán)信息:聲明版權(quán)所有者等。
充分利用已有信息,如客戶手冊(cè)、公共關(guān)系文檔、技術(shù)手冊(cè)和數(shù)據(jù)庫等。
要素
設(shè)計(jì)一個(gè)網(wǎng)站,應(yīng)該考慮下列九條基本因素,這些因素對(duì)網(wǎng)站的成功與否有著重要影響。
1. 整體布局
網(wǎng)站主頁就好像是宣傳欄或者店面
——對(duì)訪問者產(chǎn)生第一印象,都希望盡量給人留下好的印象,不是嗎?
一般來說,好的網(wǎng)站應(yīng)該給人有這樣的感覺:
干凈整潔
條理清楚
專業(yè)水準(zhǔn)
引人入勝
網(wǎng)頁應(yīng)該力求抓住而不是淹沒瀏覽者的注意力,過多的閃爍、色彩、下拉菜單框、圖片等會(huì)讓訪問者無所適從——離開是最好的選擇。就像一些商店,播放震耳欲聾的發(fā)燒音樂,你要做的唯一決定就是離開那里,越快越好。
2. 信息
無論商業(yè)站點(diǎn)還是個(gè)人主頁,你必須給人們提供有一定價(jià)值的內(nèi)容才能留住訪問者。因?yàn)槲覀內(nèi)祟惪偸俏├菆D,第一個(gè)問題總是:“對(duì)我有什么用處?”
所以你必須提供某些有價(jià)值的東西,當(dāng)然并不是說必須提供某些免費(fèi)的物品——免費(fèi)書籍、免費(fèi)入場(chǎng)券、免費(fèi)度假等,這些“有價(jià)值的東西”可以是:
信息;
娛樂;
勸告;
對(duì)一些問題的幫助;
提供志趣相投者聯(lián)絡(luò)的機(jī)會(huì);
鏈接到有用的網(wǎng)頁,等等。
如果你經(jīng)營(yíng)的是企業(yè)網(wǎng)站,需要提供關(guān)于產(chǎn)品或服務(wù)的信息:
容易理解;
容易查詢;
容易訂貨。
3. 速度
我們都知道,頁面下載速度是網(wǎng)站留住訪問者的關(guān)鍵因素。如果20—30秒還不能打開一個(gè)網(wǎng)頁,一般人就會(huì)沒有耐心。至少應(yīng)該確保主頁速度盡可能快,最好不要用大的圖片。
應(yīng)該時(shí)時(shí)提醒自己,網(wǎng)站首頁就像一個(gè)廣告牌。當(dāng)開車經(jīng)過一個(gè)廣告牌時(shí),沒有時(shí)間閱讀上面的詳細(xì)說明,也不可能贊賞其復(fù)雜的圖案,廣告標(biāo)志從眼前一閃而過,必須在一瞬間給人留下印象。
網(wǎng)上訪問者也是“一閃而過”,保證你的首頁簡(jiǎn)單而快速。網(wǎng)上有許多關(guān)于如何增加速度的文章——檢查下載速度,放棄一切顯著減慢主頁速度的資料。
4. 圖形和版面設(shè)計(jì)
圖形和版面設(shè)計(jì)關(guān)系到對(duì)主頁的第一印象,圖象應(yīng)集中反映主頁所期望傳達(dá)的主要信息。
如果有系列商業(yè)站點(diǎn),你不必讓過分顯眼的動(dòng)畫出現(xiàn)在首頁——但如果你的網(wǎng)站是游戲站點(diǎn),動(dòng)畫將是必不可少的一部分內(nèi)容。
圖片是影響網(wǎng)頁下載速度的重要原因,根據(jù)經(jīng)驗(yàn)。把每頁全部?jī)?nèi)容控制在30K左右可以保證比較理想的下載時(shí)間,圖象在6—8K之間為宜,每增加2K會(huì)延長(zhǎng)1秒鐘的下載時(shí)間。
顏色也是影響網(wǎng)頁的重要因素,不同的顏色對(duì)人的感覺有不同的影響,例如:
紅色和橙色使人興奮并使得心跳加速;
黃色使人聯(lián)想到陽光,是一種快活的顏色;
考慮到你希望對(duì)瀏覽者產(chǎn)生什么影響,請(qǐng)為網(wǎng)頁選擇合適的顏色。
閱讀西方格式文本時(shí),眼睛從左上方開始。逐行瀏覽到達(dá)右下方,插入圖象時(shí)不要忘記這種特性。任何具有方向性的圖片應(yīng)該放置在網(wǎng)頁中對(duì)眼睛最重要的地方,如果在左上角放置一幅小鳥的圖片,鳥嘴應(yīng)該放在把瀏覽者目光引向頁面中部的地方,而不是把視線引走。
這種思路可以用于所有圖片:
面部應(yīng)該“看”網(wǎng)頁的中部;
汽車的“停靠”面向網(wǎng)頁中部;
道路、領(lǐng)帶等等圖片的放置都應(yīng)該在有助于吸引目光從左向右、從上向下移動(dòng)。
一般總是把網(wǎng)站導(dǎo)航條放置在頁面左邊,也是出于這種考慮——不斷地出現(xiàn)在瀏覽者的視野之中。
5. 文字的可讀性
我們?nèi)匀挥脧V告牌的比喻來說明,文字要在廣告牌上突出,周圍應(yīng)該留有足夠的空間。也許你曾到過一些網(wǎng)站,要么擁擠不堪的文字覺得好像只有把腦袋鉆進(jìn)去才能閱讀,要么深色的背景給人的感覺好象處于非常狹窄的空間里,而且讓人的心情感覺很壓抑。某些背景色的令人閱讀困難;紫色、橙色和紅色讓人眼花繚亂。
文字的顏色也很重要,不同的瀏覽器有不同的顯示效果,有些在你的瀏覽器上很漂亮的顏色在其他瀏覽器上可能無法顯示。
參考報(bào)紙的編排方式,為方便或快速閱讀將你的內(nèi)容分欄設(shè)計(jì),甚至兩欄也要比一滿頁的視覺效果要好。
另一種能夠提高文字可讀性的因素是你所選擇的字體,通用的字體(Arial, Times New Roman, Garamond and Courier)最易閱讀,特殊字體用于標(biāo)題效果較好,但是不適合正文(試想瀏覽整頁的 Gothic, Script, Westminster, or Cloister會(huì)是怎樣的感受)。因?yàn)殚喿x費(fèi)力,你的眼睛很快就會(huì)疲勞,不得不轉(zhuǎn)移到其他頁面。
6. 網(wǎng)頁標(biāo)題的可讀性
必須盡量使你的網(wǎng)頁易于閱讀,除了分欄之外(將頁面縱向分割),也需要利用標(biāo)題和副標(biāo)題將文檔分段。
為所有標(biāo)題和副標(biāo)題設(shè)置同一字體,并將標(biāo)題字體加大一號(hào),所有標(biāo)題和副標(biāo)題都采用粗體,這樣便于識(shí)別標(biāo)題(字體加大加粗)和副標(biāo)題(粗體,與正文字體大小相同),使瀏覽者一眼就可以看到要點(diǎn),以便找出并繼續(xù)閱讀有興趣的內(nèi)容。標(biāo)題的重要性可見一斑,要認(rèn)真寫好每個(gè)標(biāo)題!
也可以將整句采用粗體或用不同的顏色突出某些內(nèi)容,不過不要用難以閱讀的顏色。
7. 導(dǎo)航
由于人們習(xí)慣于從左到右、從上到下閱讀,所以主要的導(dǎo)航條應(yīng)放置在頁面左邊,對(duì)于較長(zhǎng)頁面來說,在最底部設(shè)置一個(gè)簡(jiǎn)單導(dǎo)航也很有必要(只要兩項(xiàng)就夠了:主頁|頁面頂部)。
確定一種你滿意的模式之后,最好將這種模式應(yīng)用到同一網(wǎng)站的每個(gè)頁面,這樣,瀏覽者就知道如何尋找信息。
8. 保護(hù)個(gè)人信息聲明和客戶推薦信
對(duì)于商業(yè)網(wǎng)站來講,最重要的事情之一是確保潛在客戶的信心,你應(yīng)該明確地告訴人們,如何對(duì)其興趣、愛好,尤其個(gè)人隱私保密,很有必要專門用一個(gè)頁面詳細(xì)陳述你的保護(hù)個(gè)人信息聲明,包括對(duì)訪問者的email地址保密、如何接受定單、如何匯總信息、匯總這些信息的目的、誰可以看到這些信息等基本內(nèi)容。
訪問者也想知道你的產(chǎn)品或服務(wù)現(xiàn)有客戶的反映,所以如果能引用與你關(guān)系融洽的客戶對(duì)你的積極評(píng)價(jià),對(duì)你的可信度將很有幫助。
不要害怕向顧客索取推薦信——人們都愿意自己的意見有價(jià)值。
你可以把客戶的推薦信另設(shè)計(jì)為一個(gè)網(wǎng)頁,作為對(duì)客戶提供推薦信的回報(bào),在這里鏈接到客戶的網(wǎng)站——這也是一種“雙贏”。
9. 詞語
一個(gè)網(wǎng)站如果只有漂亮的外觀而詞語錯(cuò)誤連篇、語法混亂,同樣是失敗的,對(duì)于網(wǎng)站所有者和負(fù)責(zé)人將產(chǎn)生很壞的影響,人們會(huì)用許多貶義詞來評(píng)價(jià)你:粗心大意、懶惰、外行、沒水平等等。
你愿意把自己辛苦掙來的錢花在一個(gè)連自己的網(wǎng)站都馬馬虎虎的人嗎?
你可以請(qǐng)人對(duì)你的工作進(jìn)行校對(duì)、編輯;
你也可以請(qǐng)人為你制作網(wǎng)頁;
總之,上述步驟在很多方面對(duì)你會(huì)有所幫助,不要因?yàn)閷?duì)某些步驟的疏忽而影響你的網(wǎng)站的整體效果。
原則
1. 明確內(nèi)容
如果你想成為一個(gè)
網(wǎng)站設(shè)計(jì)者,并正想建一個(gè)網(wǎng)站的話,首先應(yīng)該考慮網(wǎng)站的內(nèi)容,包括網(wǎng)站功能和你的用戶需要什么。你的整個(gè)設(shè)計(jì)都應(yīng)該圍繞這些方面來進(jìn)行。
2. 抓住用戶
如果用戶不能夠迅速地進(jìn)入你的網(wǎng)站,或操作不便捷,
網(wǎng)站設(shè)計(jì)就是失敗的。不要讓用戶失望而轉(zhuǎn)向你的對(duì)手的網(wǎng)站。
3. 優(yōu)化內(nèi)容
內(nèi)容是核心。大約在兩年以前,企業(yè)網(wǎng)站就像一本廣告冊(cè)子,更槽糕的是,網(wǎng)站使用了大量的圖片,似乎要幾個(gè)世紀(jì)才能下載完。比如某網(wǎng)站在設(shè)計(jì)的某些方面是成功的,但是內(nèi)容太貪乏,并且要花很長(zhǎng)時(shí)間才能找到所要的東西,因此不能算是一個(gè)成功的網(wǎng)站。
4.快速下載
沒有什么比要花很長(zhǎng)時(shí)間下載頁面更槽糕的了。作為一條經(jīng)驗(yàn),一個(gè)標(biāo)準(zhǔn)的網(wǎng)頁應(yīng)不大于60K,通過56K調(diào)制解調(diào)器加載花30秒的時(shí)間。有的設(shè)計(jì)者說網(wǎng)頁加載應(yīng)在15秒內(nèi)。
5. 網(wǎng)站升級(jí)
時(shí)刻注意網(wǎng)站的運(yùn)行狀況。性能很好的主機(jī)隨著訪問人數(shù)的增加,可能會(huì)運(yùn)行緩慢。但是,如果你不想失去訪問者的話,一定要仔細(xì)計(jì)劃好你的升級(jí)計(jì)劃。
6. 堅(jiān)持基本原則
即使你不懂HTML語言,你只需購買一個(gè)有版權(quán)的所見即所得的網(wǎng)頁設(shè)計(jì)工具,如Adobe PageMill 或 Microsoft FrontPage Express 或 Amaya,當(dāng)然則是Dreamweaver啦,就可以創(chuàng)建一個(gè)看起來很合理的網(wǎng)站。但是,在設(shè)計(jì)時(shí),這些軟件包雖然不需要HTML,卻使網(wǎng)站速度下降。為了成功地設(shè)計(jì)網(wǎng)站,你必須理解HTML是如何工作的。大多數(shù)的網(wǎng)站設(shè)計(jì)者建議網(wǎng)絡(luò)新手應(yīng)從有關(guān)HTML的書中去尋找答案,用Notepad制作網(wǎng)頁。
7. 學(xué)習(xí)HTML
用HTML設(shè)計(jì)網(wǎng)站,可以控制設(shè)計(jì)的整個(gè)過程。但是,如果你僅僅是網(wǎng)站設(shè)計(jì)的新手,你應(yīng)該尋找一個(gè)允許修改HTML的軟件包。HomeSite4是一個(gè)很好的Web設(shè)計(jì)工具。在設(shè)計(jì)過程中,HomeSite4能幫助你學(xué)習(xí)HTML。它還允許你切換到所見即所得的模式,以便你在把網(wǎng)站發(fā)送到Web之前,預(yù)覽你的網(wǎng)站。
8. 用筆畫一個(gè)網(wǎng)站的框架
圣人云:筆比劍更強(qiáng)大。在用計(jì)算機(jī)之前,用筆畫一個(gè)網(wǎng)站的框架,顯示出所有網(wǎng)頁的相互關(guān)系。計(jì)劃好你的用戶如何以最少的時(shí)間瀏覽你的網(wǎng)站。
9. “在計(jì)算機(jī)上永遠(yuǎn)也找不到好的方案”。——專家忠告
10. 網(wǎng)站地圖
許多設(shè)計(jì)者把他們的網(wǎng)站地圖放在網(wǎng)站上,這種做法,卻是弊大于利。絕大部分的訪問者上網(wǎng)是尋找一些特別的信息,他們對(duì)于你的網(wǎng)站是如何工作的,并沒有興趣。如果你覺得你的網(wǎng)站需要地圖,那很可能是需要改進(jìn)你的導(dǎo)航和工具條。
11. “睜大你的眼睛,留意所有的事情。對(duì)最不相關(guān)的東西的觀察可以得到最好的靈感。觀察一個(gè)站點(diǎn)的結(jié)構(gòu)和設(shè)計(jì)。理解站點(diǎn)結(jié)構(gòu)的關(guān)鍵元素,確保你的設(shè)計(jì)是圍繞站點(diǎn)瀏覽進(jìn)行的。” —專家忠告
12. 點(diǎn)擊規(guī)則
聽說過3次點(diǎn)擊規(guī)則嗎?對(duì)于小型網(wǎng)站,在你的主頁上,沒有任何一條信息,需要點(diǎn)擊次數(shù)超過3次的。對(duì)于大型網(wǎng)站,使用導(dǎo)航和工具條來改善操作。
13. 特殊字體的應(yīng)用
雖然你可以在你的HTML中使用特殊的字體,但是,你不可能預(yù)測(cè)你的訪問者在他們的計(jì)算機(jī)上將看到什么。在你的計(jì)算機(jī)里看起來相當(dāng)好的頁面,在另一個(gè)不同的平臺(tái)上看起來可能非常糟糕。一些網(wǎng)站設(shè)計(jì)員喜歡使用來定義特性,這雖然允許你使用特殊的字體。但是仍需要一些變通的方法,以免你所選擇的字體在訪問者的計(jì)算機(jī)上不能顯示。級(jí)聯(lián)風(fēng)格表CSS有助于解決這些問題,但是只有最新版的瀏覽器才支持CSS。
14. “使用切合實(shí)際的簡(jiǎn)便的命名規(guī)則。” —專家忠告
15. 檢查錯(cuò)別字
好的拼寫是人們一生中重要的技能。但是遺憾的是,許多設(shè)計(jì)者都缺少這種技能。確保你拼寫正確,并且格外注意平常容易誤寫的錯(cuò)別字。
16. 避免長(zhǎng)文本頁面
在一個(gè)站點(diǎn)上有許多只有文本的頁面,是令人乏味的,且也浪費(fèi)Web的潛力。如果你有大量的基于文本的文檔,應(yīng)當(dāng)以Adobe Acrobat格式的文件形式來放置,以便你的訪問者能離線閱讀。
17. 不要使用卷滾條
人們厭惡在網(wǎng)上使用卷滾條。某站是一個(gè)典型的設(shè)計(jì)很差的網(wǎng)站。它基于一個(gè)浮動(dòng)的架構(gòu),為了閱讀所有的文本,瀏覽者不得不使用卷滾條。
18. 專家最喜愛的Web設(shè)計(jì)工具
(1). Adobe Photoshop
(2). Macromedia Flash
(3).Adobe Illustrator
(4). Adobe ImageRead
(5). Macromedia Dreamweaver
(6). Macromedia Fireworks
(7). Allaire Homesites
(8). Microsoft Notepad
(9). Macromedia Director
(10). Lightwave
(11). Macromedia Freehand
其它:Adobe Acrobat Exchange,Allaire ColdFusion,BBEdit,HTML Validator等。
19. 網(wǎng)站介紹
你應(yīng)當(dāng)有一個(gè)很清晰的網(wǎng)站介紹,告訴訪問者你的網(wǎng)站能夠提供些什么。以便訪問者能找到想要的東西,但是,許多設(shè)計(jì)者都沒有這樣做。有效的導(dǎo)航條和搜索工具使人們很容易找到有用的信息,這對(duì)訪問者很重要。告訴訪問者你所提供的正是他們想要的信息。
20. “網(wǎng)站一旦發(fā)布,網(wǎng)站設(shè)計(jì)的優(yōu)點(diǎn)和缺陷全都公布于世。沒有什么方法使你能夠比從自己的錯(cuò)誤、傾聽其他人的建議和用戶反饋意見中學(xué)到更多的東西。” —專家忠告
21. 閃爍讓人頭痛
通過使用標(biāo)識(shí)可以吸引訪問者對(duì)你的主頁特殊部分的注意,但這也讓你的訪問者頭痛。如果你想使訪問者再次光顧你的網(wǎng)站,就少用此方法。
22. 背景顏色
背景顏色也會(huì)產(chǎn)生一些問題,可能會(huì)使網(wǎng)頁難于閱讀。你應(yīng)當(dāng)堅(jiān)持使用白色的背景和黑色的文本,另外還應(yīng)當(dāng)堅(jiān)持使用通用字體。
23. 向前和向后按鈕
應(yīng)當(dāng)避免強(qiáng)迫用戶使用向前和向后按鈕。你的設(shè)計(jì)應(yīng)當(dāng)使用戶能夠很快地找到他們所要的東西。絕大多數(shù)好的站點(diǎn)在每一頁同樣的位置上都有相同的導(dǎo)航條,使瀏覽者能夠從每一頁上訪問網(wǎng)站的任何部分。
24. 專家忠告 :“堅(jiān)持你的信念。嚴(yán)格遵守各種規(guī)則。避免想當(dāng)然。絕不停止學(xué)習(xí)。”
25. 點(diǎn)擊記數(shù)器
不要輕易考慮在你的網(wǎng)站上放置一個(gè)醒目的點(diǎn)擊記數(shù)器。你設(shè)計(jì)網(wǎng)站是為了給訪問者提供服務(wù),而不是推銷你自己認(rèn)為重要的東西。大多數(shù)瀏覽者認(rèn)為計(jì)數(shù)器毫無意義,它們很容易被做假,瀏覽者也不想看廣告。如果你顯示你的網(wǎng)站是多么受歡迎,你最好提供一個(gè)鏈接,顯示訪問日志。
26. 不要用框架
與記數(shù)器一樣,框架在網(wǎng)頁上越來越流行。在大多數(shù)網(wǎng)站上,在屏幕的左邊有一個(gè)框架。但是設(shè)計(jì)者立刻就發(fā)現(xiàn),在使用框架時(shí)產(chǎn)生了許多的問題。使用框架時(shí)如果沒有17英寸的顯示屏幾乎不可能顯示整個(gè)網(wǎng)站。框架也使得網(wǎng)站內(nèi)個(gè)人主頁不能夠成為書簽。也許更重要的是,搜索引擎常常被框架混淆,從而不能列出你的網(wǎng)站。
27. 去掉圖像
在瀏覽器中即使去掉了圖像功能,也要保證訪問者能夠在你的網(wǎng)站上獲得滿意的效果。對(duì)于那些使用ISDN連接并且關(guān)掉了圖像功能的訪問者,還能獲得好的網(wǎng)頁加載性能??梢酝ㄟ^在網(wǎng)頁底部提供另外的鏈接和使用替代文字,而不是圖像來滿足訪問者的需要。
28. 重復(fù)使用圖像
一些網(wǎng)站由于使用大量不重復(fù)的圖像而錯(cuò)過了使用更好的技巧的機(jī)會(huì)。在創(chuàng)建商標(biāo)時(shí),在網(wǎng)頁上多次使用同樣的圖像是一個(gè)好的方法,并且一旦它們被裝入,以后重新載入就會(huì)很快。
29. 避免使用過大的圖像
不要使用橫跨整個(gè)屏幕的圖像。避免訪問者向右滾動(dòng)屏幕。占75%的屏幕寬度是一個(gè)好的建議。
30. 專家忠告:“避免使用炫耀的技巧。”
31. 選擇使用Flash動(dòng)畫
許多使用比較慢的計(jì)算機(jī)的訪問者發(fā)現(xiàn)動(dòng)畫圖標(biāo)很容易耗盡系統(tǒng)資源,使網(wǎng)站的操作變得很困難,因此,應(yīng)該給用戶一個(gè)跳過使用Flash動(dòng)畫的選擇。
32. 盡量少使用Flash插件
雖然許多Web設(shè)計(jì)者認(rèn)為Flash功能很強(qiáng)大,并且Netscape5.0將支持Flash,在使用時(shí)不必再下載任何插件。 但是,最好還是取消使用Flash做各接口的想法。
33. 讓用戶先預(yù)覽小圖像
如果不得不放置大的圖像在網(wǎng)站上,就最好使用Thumbnails軟件,把圖像的縮小版本的預(yù)覽效果顯示出來,這樣用戶就不必浪費(fèi)金錢和時(shí)間去下載他們根本不想看的大圖像。
34. 動(dòng)畫與內(nèi)容應(yīng)有機(jī)結(jié)合
確保動(dòng)畫和內(nèi)容有關(guān)聯(lián)。它們應(yīng)和網(wǎng)頁渾然一體,而不是干巴巴的。動(dòng)畫并不只是Macromedia Director等制作的東西的簡(jiǎn)單堆積。
35. 慎用聲音
聲音的運(yùn)用也應(yīng)得到警惕。內(nèi)聯(lián)聲音是網(wǎng)頁設(shè)計(jì)者的另一個(gè)禁地。因?yàn)檫^多地使用聲音會(huì)使下載速度很慢,同時(shí)并沒有帶給瀏覽者多少好處。首次聽到鼠標(biāo)發(fā)出聲音可能會(huì)很有趣,但是多次以后肯定會(huì)很煩人。使用聲音前,應(yīng)該仔細(xì)考慮聲音將會(huì)給你帶來什么。
36. 少用Java 和AxtiveX
在網(wǎng)頁上應(yīng)盡量少使用Java 和AxtiveX。因?yàn)椴⒉皇敲恳环N瀏覽器都需要使用它,只有那些Netscape 和Explorer的早期版本的使用者才需要它。另外Mac在處理Java時(shí)也存在問題,過分地使用Java,會(huì)使Mac崩潰 [6] 。
37. 設(shè)計(jì)成功的網(wǎng)站
藍(lán)色理想
七色鳥
ChinaUI
5D多媒體
38. 慎用插件
在Web設(shè)計(jì)中,如果依賴于一些特別的插件,會(huì)減少網(wǎng)站的吸引力。如果訪問者沒有所要求的插件,將不得不到其它站點(diǎn)去下載,這樣訪問者有可能就不會(huì)返回了。
39. 使用著名的插件
如果網(wǎng)站上有聲音或視頻,要保證使用者通過使用某個(gè)知名的插件,能夠聽到或看到。許多站點(diǎn)使用QuickTime、RealPlay和 Shockwave插件。因?yàn)椋S多訪問者并不愿意浪費(fèi)很多時(shí)間和金錢去下載可能僅使用一次的插件。
40. 使用先進(jìn)技術(shù)
跟上新的技術(shù)。Web技術(shù)的進(jìn)步絕不會(huì)停止,所以應(yīng)花一些時(shí)間來研究新產(chǎn)品和開發(fā)技術(shù)。
41. 自己創(chuàng)建圖像和聲音
使用你自己創(chuàng)建的或從某個(gè)商業(yè)網(wǎng)站上下載的圖像和聲音。在制作商業(yè)網(wǎng)站時(shí),應(yīng)該花足夠的資金來創(chuàng)建圖形,以增強(qiáng)公司的宣傳。
42. 專家忠告— “無論是游戲、圖像、動(dòng)畫還是電影,想想你喜歡的設(shè)計(jì)是怎樣的,這將激發(fā)你的創(chuàng)作靈感,使你創(chuàng)作出新的和更好的網(wǎng)站。”
43. 平臺(tái)的兼容性
要為用戶著想,必須最少在一臺(tái)PC 和一臺(tái)Mac機(jī)上測(cè)試你的網(wǎng)站,看看兼容性如何。
44. 用軟件分析工具找錯(cuò)
使用軟件分析工具檢查HTML。軟件分析工具Doctor HTML能夠幫助檢查HTML中的任何問題。如果你有許多網(wǎng)頁需要檢查,可選用軟件分析工具。
45. 避免錯(cuò)誤鏈接
網(wǎng)站中可能與其它一些有用的站點(diǎn)作了鏈接。但是,如果在你的網(wǎng)頁上有鏈接,一定要經(jīng)常檢查它們,保證鏈接有效。鏈接的網(wǎng)站可能很多,但不要鏈接到與你的內(nèi)容無關(guān)的網(wǎng)站上。
46. 給觀眾成熟的東西
如果網(wǎng)站沒有完成,就不要發(fā)送到Web上。所有好的網(wǎng)站都是在幕后完成之后再發(fā)布的。
47. 在搜索引擎上登記網(wǎng)站
任何一個(gè)人發(fā)現(xiàn)你的網(wǎng)站的機(jī)會(huì)都很少,除非你把你的網(wǎng)站在主要的搜索引擎上進(jìn)行登記。
48. 設(shè)計(jì)一個(gè)留言板
瀏覽者愿意把時(shí)間花在好的網(wǎng)站上,所以最好有一個(gè)留言本,這能激勵(lì)訪問者再次回到你的網(wǎng)站,還有助于擴(kuò)充網(wǎng)站內(nèi)容。
49. 測(cè)試網(wǎng)站
在你的網(wǎng)站正式發(fā)布之前,必須進(jìn)行有用的測(cè)試。在設(shè)計(jì)網(wǎng)站時(shí)要使用最新的軟件,但是不要忘了人們并不會(huì)使用最新的瀏覽器,所以要照顧到以前的瀏覽器。在上載網(wǎng)站時(shí)還要測(cè)試所有的鏈接和導(dǎo)航工具條。
50. 專家忠告:“盡你所能反復(fù)測(cè)試所設(shè)計(jì)的網(wǎng)站,直到你不能發(fā)現(xiàn)新的東西為止。”
51. 演示即將發(fā)布的網(wǎng)站
在網(wǎng)站正式運(yùn)行之前,讓人演示它。演示中人們會(huì)告訴你所設(shè)計(jì)的網(wǎng)站是否容易使用。
52. 動(dòng)畫點(diǎn)綴
網(wǎng)頁上的動(dòng)畫最多只用一個(gè)
53. 專家忠告—“傾斜的按鈕看起來不會(huì)太好,最好不要使用。”
54. 內(nèi)容組織
在開始創(chuàng)建新的網(wǎng)頁前,仔細(xì)考慮網(wǎng)站內(nèi)容的組織。決定好想讓訪問者瀏覽的內(nèi)容,然后設(shè)計(jì)導(dǎo)航系統(tǒng)。
55. “空白萬歲”
注意留空白。不要用圖像、文本和不必要的動(dòng)畫GIFs來充斥網(wǎng)頁,即使有足夠的空間,在設(shè)計(jì)時(shí)也應(yīng)該避免使用。
56. 利用空白去吸引注意力。
為了吸引眼球,Web設(shè)計(jì)者使用各種方法,比如:閃爍、旋轉(zhuǎn)等,但是利用空白會(huì)吸引更多的注意力。”—專家忠告
57. 圖像壓縮
為了保持小的圖像,可以使用類似GIF向?qū)У某绦颍茏詣?dòng)對(duì)圖像進(jìn)行壓縮?!∠嚷暶鲌D像的大小,在圖像顯示之前最好能詳細(xì)說明圖像大小屬性,可以在IMG標(biāo)簽中保存這個(gè)屬性。這可以使網(wǎng)頁顯得很流暢,因?yàn)闉g覽器可以在圖像被下載之前在屏幕上顯示整個(gè)網(wǎng)頁。
58. 設(shè)計(jì)一個(gè)失敗的網(wǎng)站,從中找出原因,提高自己的鑒別能力。
59. 用戶注冊(cè)
如果能知道誰瀏覽了網(wǎng)站以及是怎樣瀏覽網(wǎng)站的,那么就能得到大量有用的信息。但是,要求訪問者在瀏覽網(wǎng)站之前進(jìn)行注冊(cè)。這樣做是要冒風(fēng)險(xiǎn)的,因?yàn)檫@將趕走一批不愿意注冊(cè)的人。獲得信息的另一種方法是進(jìn)行有獎(jiǎng)競(jìng)猜或金錢獎(jiǎng)勵(lì),讓用戶能主動(dòng)填一些信息反饋表。
60. 使網(wǎng)站具有交互功能
在網(wǎng)站上提供一些回答問題的工具,使得訪問者能從網(wǎng)站上獲得交互的信息。
61. 圖片更新
盡可能經(jīng)常更換網(wǎng)站上的圖片,人們更愿意點(diǎn)擊的是圖片而不是文本。
62. 在網(wǎng)站上提供游戲
游戲是很好的交互工具,它是使訪問者能再次光顧網(wǎng)站的好方法。
63. 挑選工具軟件
仔細(xì)選擇Web設(shè)計(jì)工具。保證使用自己最想要的、自我感覺最好的軟件。
64. 使用最新版本的軟件
盡量使用Web設(shè)計(jì)軟件的最新版本,還應(yīng)當(dāng)能被授權(quán)進(jìn)行免費(fèi)或便宜的升級(jí) [7] 。
類型
1、電子商務(wù)類網(wǎng)站
電子商務(wù)類網(wǎng)站分為B2B(商家對(duì)商家)和B2C(商家對(duì)個(gè)人)兩種,這種是以網(wǎng)上銷售為主要盈利手段的網(wǎng)站。
2、主題性網(wǎng)站
這種主題性網(wǎng)站是主要提供有共同的興趣愛好的人一起去分享和觀看的網(wǎng)站。
3、個(gè)人性網(wǎng)站
這種網(wǎng)站主要是突出自己鮮明的個(gè)性的網(wǎng)站,比如個(gè)人微博、博客、論壇等等。
布局
1. 圖片與文字的協(xié)調(diào)性
一個(gè)完美的網(wǎng)頁布局會(huì)給人一種和平舒暢的心情,它不僅僅是表現(xiàn)在文字的表達(dá)程度,更多的表現(xiàn)在圖片與文字的協(xié)調(diào)性。
2. 視覺上的對(duì)比性
通過不同的色彩、不同的圖形進(jìn)行對(duì)比,在視覺上形成視覺的沖擊,同時(shí)在圖形也要形成對(duì)比,只有這樣才能讓人們過目不忘。
3. 有松有馳
網(wǎng)頁制作上也要講究有松有馳,不要整個(gè)網(wǎng)頁都是一種樣式,要適當(dāng)進(jìn)行留白,運(yùn)用空格或是改變字體之間的間距,從而達(dá)到不一樣的變化效果 [6] 。
網(wǎng)頁儲(chǔ)存
編輯
當(dāng)要將網(wǎng)頁存入自己的電腦內(nèi),網(wǎng)頁瀏覽器通常提供以下的選擇:
只儲(chǔ)存網(wǎng)頁的文字部分完裝封裝,即連同該網(wǎng)頁(HTML)所要用到的圖像、Applet和JavaScript等文件也一并封裝儲(chǔ)存只有HTML,不作任何改動(dòng);若果網(wǎng)頁內(nèi)的連結(jié)是相對(duì)連結(jié),可能會(huì)令圖片消失只有HTML,但將網(wǎng)頁內(nèi)連結(jié)到的文件改成絕對(duì)定義有些網(wǎng)頁瀏覽器容許在打印網(wǎng)頁前預(yù)覽,并可選擇印底色與否,甚至放大、縮小 [8] 。
網(wǎng)頁尺寸
編輯
從2003年到2008年,網(wǎng)頁的平均尺寸從93.7K增至312K;網(wǎng)頁中的平均對(duì)象數(shù)量從25.7個(gè)增長(zhǎng)到49.9個(gè)。而隨著寬帶的普及,頁面響應(yīng)速度從2006年2月的2.8秒降低到了2008年2月的2.33秒。
來源:http://curryupcaters.com,網(wǎng)站建設(shè)★網(wǎng)站設(shè)計(jì)★網(wǎng)站制作★網(wǎng)頁設(shè)計(jì)-599元全包;企業(yè)網(wǎng)絡(luò)推廣☆網(wǎng)站優(yōu)化☆seo☆關(guān)鍵詞排名☆百度快照-2200元全年展示;做網(wǎng)站優(yōu)化排名-網(wǎng)站建設(shè)公司