1、用模板創建框架網頁
框架網頁，在FrontPage中只能利用模板創建；在Dreamweaver中創建的方法有多種，相對比較靈活。
經研究發現，在Dreamweaver中用模板創建框架網頁，較其他方法有一些優點。例如，默認為每個（子）框架命名。有了框架名，可以方便超鏈接設置。
用「上方固定，左側嵌套」模板創建的框架網頁的代碼視圖中，可以看到代碼：name=”topFrame”、name=”leftFrame”和name=”mainFrame”。
即，將上、左和右等三個子框架命名為top、left和main。
在框架網頁中設置超鏈接時，「屬性」面板的「目標」框中會出現：”topFrame”、”leftFrame”和”mainFrame”等選項，供用戶選用。
提示：如果，用鼠標拖動框架邊框的方法創建框架網頁，則軟件不會自動給子框架命名，子框架的命名，必須由用戶自行完成。
2、超鏈接的目標
在框架網頁中設置超鏈接時，應注意「目標」的選擇。
_blank：將鏈接的網頁顯示在一個新打開的瀏覽窗口中。
_parent：將鏈接的網頁顯示當前網頁的父框架頁中。
提示：如果不是嵌套框架網頁，效果與_top相同。
_self：將鏈接的網頁顯示當前框架中。
_top： 將鏈接的網頁顯示當前框架的最高層框架頁中。
提示：此選項，只有在嵌套框架網頁中，才可能與_parent選項的效果不同。
3、子框架屬性設置
在框架頁的代碼視圖中可以看到一些子框架的屬性設置，其中，重要的有：
cols：設定子框架的寬度（橫向）。
rows：設定子框架的高度（縱向）。
例如，當縱向有兩個子框架時，由「rows」設定它們的高度。
「rows＝150,300」，即，上框高度150像素，下框300像素。
當橫向有兩個子框架時，由「cols」設定它們的寬度。
「cols＝30%,70%」，即，左框寬度為屏幕寬度的30%，右框寬度為屏幕寬度的70%。
提示：１最後面的數字可以用「＊」號替代，表示最下面的框架（或最右側的框架中）寬度（或高度）自動適應屏幕的寬（高）度。
２最後面的數字，最好用「＊」，這樣做，能夠自動適應不同的屏幕分辨率。尤其對於設定縱向高度的「rows」。
Entries Tagged '網頁製作百寶箱' ↓
框架網頁製作技巧
十一月 23rd, 2007 — 網站製作, 網頁製作百寶箱
Sophos推出免費移除Rootkit工具
十一月 23rd, 2007 — 網站製作, 網頁製作百寶箱
根據Sophos最新的統計，對335名企業用戶所進行的網路調查中，有55％的人擔心他們的電腦也許被Rootkit感染。不過更令人驚訝的是，高達37％的人坦承不知道什麼是Rootkit。所 謂的Rootkits是一種由第三方所使用的「非正規」軟體，通常被駭客頻繁地利用，隱藏在其它軟體或是流程中的先進竊取技術。這類的惡意程式，像是間諜 軟體（Spyware）和側錄程式（Keyloggers）都能夠以隱形或掩飾的方式、輕易躲避一般的安全產品或作業系統的偵察。使用者無法察覺的情況 下，駭客正透過rootkit 技術入侵一臺「坐以待斃」的電腦，藉以持續獲取這臺電腦上的資訊。
Sophos亞太區業務總監Jim Dowling表示，「Rootkit」這個名詞，在2005年時第一次受到全球的矚目，是當Sony承認採用Rootkits來防止消費者未經授權的音樂CD複製。從此Rootkits便嶄露頭角，成為駭客最偏愛的攻擊方式之一。
Sophos Anti-Rootkit提供了一個易於使用的圖形介面，顯示隱藏在系統中的一些資訊，包括任何被發現的Rootkit名稱，以及所需採取的因應措施。 Sophos的Rootkit保護工具被設計出具有辨識已知和未知Rootkits的能力，目前已經可以免費被Sophos或非Sophos用戶下載、安 裝。
帶中英文翻譯功能的收藏夾
浏览网页的时候经常会碰到一些不认识的英文单词，或者想知道一些中文单词的翻译，这时候再去找翻译软件或者翻译网站就有些麻烦了。因此我做了一个“中英文翻译”的Bookmarklet，只要选中网页里要翻译的中英文单词，再点击“收藏”菜单里的“中英文翻译”，就会自动打开IE的搜索栏，并且在搜索栏显示金山词霸对所选单词翻译的网页，由于翻译结果是显示在搜索栏里，不会影响正常浏览，而且不用切换窗口，非常方便。不过这个Bookmarklet只能在IE中使用。
使用方法：在下面的链接上点右键，选“添加到收藏夹”。在添加bookmarklet时，IE会弹出一个安全警告框，不用管他，点“是”就可以了。
中英文翻译
代码拷贝框
網頁設計的基本原則
—-設計網站中有哪些關鍵技巧？有哪些陷阱？在這裡，世界上一流的網站設計專家，讓你共享他們的秘密，告訴你：使網站賦予情趣的訣竅、應該避免做什麼、應使用什麼工具軟件以及他們喜愛和厭惡的網站。
01.明確內容
如果你想成為一個網站設計者，並正想建一個網站的話，首先應該考慮網站的內容，包括網站功能和你的用戶需要什麼。你的整個設計都應該圍繞這些方面來進行。
02.抓住用戶
如果用戶不能夠迅速地進入你的網站，或操作不便捷，網站設計就是失敗的。不要讓用戶失望而轉向你的對手的網站。
03.優化內容
內容是核心。大約在兩年以前，企業網站就像一本廣告冊子，更槽糕的是，網站使用了大量的圖片，似乎要幾個世紀才能下載完。
Chanels網站（www.channels.co.uk）在設計的某些方面是成功的，但是內容太貪乏，並且要花很長時間才能找到所要的東西，因此不能算是一個成功的網站。
04.快速下載
沒有什麼比要花很長時間下載頁面更槽糕的了。作為一條經驗，一個標準的網頁應不大於60K，通過56K調製解調器加載花30秒的時間。有的設計者說網頁加載應在15秒內。
05.網站升級
時刻注意網站的運行狀況。性能很好的主機隨著訪問人數的增加，可能會運行緩慢。但是，如果你不想失去訪問者的話，一定要仔細計劃好你的升級計劃。
06.堅持基本原則
即使你不懂HTML語言，你只需購買一個有版權的所見即所得的網頁設計工具，如Adobe PageMill或MicrosoftFrontPage Express，就可以創建一個看起來很合理的網站。但是，在設計時，這些軟件包雖然不需要HTML，卻使網站速度下降。
為了成功地設計網站，你必須理解HTML是如何工作的。大多數的網站設計者建議網絡新手應從有關HTML的書中去尋找答案，用Notepad製作網頁。
07.學習HTML
用HTML設計網站，可以控制設計的整個過程。但是，如果你僅僅是網站設計的新手，你應該尋找一個允許修改HTML的軟件包。HomeSite4是一個很好的Web設計工具。在設計過程中，HomeSite4能幫助你學習HTML。它還允許你切換到所見即所得的模式，以便你在把網站發送到Web之前，預覽你的網站。
08.用筆畫一個網站的框架
聖人云：筆比劍更強大。在用計算機之前，用筆畫一個網站的框架，顯示出所有網頁的相互關係。計劃好你的用戶如何以最少的時間瀏覽你的網站。
09.網站地圖
許多設計者把他們的網站地圖放在網站上，這種做法，卻是弊大於利。絕大部分的訪問者上網是尋找一些特別的信息，他們對於你的網站是如何工作的，並沒有興趣。如果你覺得你的網站需要地圖，那很可能是需要改進你的導航和工具條。
10.特殊字體的應用
雖然你可以在你的HTML中使用特殊的字體，但是，你不可能預測你的訪問者在他們的計算機上將看到什麼。在你的計算機裡看起來相當好的頁面，在另一個不同的平台上看起來可能非常糟糕。一些網站設計員喜歡使用來定義特性，這雖然允許你使用特殊的字體，但是仍需要一些變通的方法，以免你所選擇的字體在訪問者的計算機上不能顯示。級聯風格表CSS有助於解決這些問題，但是只有最新版的瀏覽器才支持CSS。
11.檢查錯別字
好的拼寫是人們一生中重要的技能。但是遺憾的是，許多設計者都缺少這種技能。確保你拼寫正確，並且格外注意平常容易誤寫的錯別字。
12.避免長文本頁面
在一個站點上有許多只有文本的頁面，是令人乏味的，且也浪費Web的潛力。如果你有大量的基於文本的文檔，應當以Adobe Acrobat格式的文件形式來放置，以便你的訪問者能離線閱讀。
13.專家最喜愛的Web設計工具
1.Adobe Photoshop
2.Macromedia Flash
3.Adobe Illustrator
4.Adobe ImageRead
5.Dreamweaver
6.Macromedia Fireworks
7. Allaire Homesites
8.Microsoft Notepad
9. Macromedia Director
10. Lightwave
11. Macromedia Freehand
12．其它：Adobe Acrobat Exchange，Allaire ColdFusion,BBEdit,HTML Validator等。
14.網站介紹
你應當有一個很清晰的網站介紹，告訴訪問者你的網站能夠提供些什麼，以便訪問者能找到想要的東西。但是，許多設計者都沒有這樣做。有效的導航條和搜索工具使人們很容易找到有用的信息，這對訪問者很重要。告訴訪問者你所提供的正是他們想要的信息。
15.閃爍讓人頭痛
通過使用標識可以吸引訪問者對你的主頁特殊部分的注意，但這也讓你的訪問者頭痛。如果你想使訪問者再次光顧你的網站，就少用此方法。
16.背景顏色
背景顏色也會產生一些問題，可能會使網頁難於閱讀。你應當堅持使用白色的背景和黑色的文本，另外還應當堅持使用通用字體。
17.向前和向後按鈕
應當避免強迫用戶使用向前和向後按鈕。你的設計應當使用戶能夠很快地找到他們所要的東西。絕大多數好的站點在每一頁同樣的位置上都有相同的導航條，使瀏覽者能夠從每一頁上訪問網站的任何部分。
18.點擊記數器
不要輕易考慮在你的網站上放置一個醒目的點擊記數器。你設計網站是為了給訪問者提供服務，而不是推銷你自己認為重要的東西。大多數瀏覽者認為計數器毫無意義，它們很容易被做假，瀏覽者也不想看廣告。如果你顯示你的網站是多麼受歡迎，你最好提供一個鏈接，顯示訪問日誌。
19.不要用框架
與記數器一樣，框架在網頁上越來越流行。在大多數網站上，在屏幕的左邊有一個框架。但是設計者立刻就發現，在使用框架時產生了許多的問題。使用框架時如果沒有17英吋的顯示屏幾乎不可能顯示整個網站。框
架也使得網站內個人主頁不能夠成為書籤。也許更重要的是，搜索引擎常常被框架混淆，從而不能列出你的網站。
20.去掉圖像
在瀏覽器中即使去掉了圖像功能，也要保證訪問者能夠在你的網站上獲得滿意的效果。對於那些使用ISDN連接並且關掉了圖像功能的訪問者，還能獲得好的網頁加載性能。可以通過在網頁底部提供另外的鏈接和使用替代文字，而不是圖像來滿足訪問者的需要。
21.重複使用圖像
一些網站由於使用大量不重複的圖像而錯過了使用更好的技巧的機會。在創建商標時，在網頁上多次使用同樣的圖像是一個好的方法，並且一旦它們被裝入，以後重新載入就會很快。
22.避免使用過大的圖像
不要使用橫跨整個屏幕的圖像。避免訪問者向右滾動屏幕。占75%的屏幕寬度是一個好的建議。
23.選擇使用Flash動畫
許多使用比較慢的計算機的訪問者發現動畫圖標很容易耗盡系統資源，使網站的操作變得很困難，因此，應該給用戶一個跳過使用Flash動畫的選擇。
24.盡量少使用Flash插件
雖然許多Web設計者認為Flash功能很強大，並且Netscape5.0將支持Flash，在使用時不必再下載任何插件。
但是，最好還是取消使用Flash做各接口的想法。
25.讓用戶先預覽小圖像
如果不得不放置大的圖像在網站上，就最好使用Thumbnails軟件，把圖像的縮小版本的預覽效果顯示出來，這樣用戶就不必浪費金錢和時間去下載他們根本不想看的大圖像。
26.動畫與內容應有機結合
確保動畫和內容有關聯。它們應和網頁渾然一體，而不是乾巴巴的。動畫並不只是Macromedia Director等製作的東西的簡單堆積。
27.慎用聲音
聲音的運用也應得到警惕。內聯聲音是網頁設計者的另一個禁地。因為過多地使用聲音會使下載速度很慢，同時並沒有帶給瀏覽者多少好處。首次聽到鼠標發出聲音可能會很有趣，但是多次以後肯定會很煩人。使用聲音前，應該仔細考慮聲音將會給你帶來什麼。
28.少用Java和AxtiveX
在網頁上應盡量少使用Java和AxtiveX。因為並不是每一種瀏覽器都需要使用它，只有那些Netscape和Explorer的早期版本的使用者才需要它。另外Mac在處理Java時也存在問題，過分地使用Java，會使Mac崩潰。
29.設計成功的網站
www.bmw.co.uk ——內容和關聯性很好
www.yugop.com ——圖形下載很快
www.comicrelief.org.uk ——設計簡單明瞭
www.dreamcast-europe.com www.newsunlimited.co.uk
www.newbeetle.com
www.swoon.com www.viaduct.co.uk
30.慎用插件
在Web設計中，如果依賴於一些特別的插件，會減少網站的吸引力。如果訪問者沒有所要求的插件，將不得不到其它站點去下載，這樣訪問者有可能就不會返回了。
31.使用著名的插件
如果網站上有聲音或視頻，要保證使用者通過使用某個知名的插件，能夠聽到或看到。許多站點使用QuickTime、RealPlay和Shockwave插件。因為，許多訪問者並不願意浪費很多時間和金錢去下載可能僅使用一次的插件。
32.使用先進技術
跟上新的技術。Web技術的進步絕不會停止，所以應花一些時間來研究新產品和開發技術。
33.平台的兼容性
要為用戶著想，必須最少在一台PC和一台Mac機上測試你的網站，看看兼容性如何。
34.用軟件分析工具找錯
使用軟件分析工具檢查HTML。軟件分析工具Doctor HTML能夠幫助檢查HTML中的任何問題。如果你有許多網頁需要檢查，可選用軟件分析工具。在網址www.weblint.org/validation.html中，你能夠找到更多有效的HTML工具。
35.避免錯誤鏈接
網站中可能與其它一些有用的站點作了鏈接。但是，如果在你的網頁上有鏈接，一定要經常檢查它們，保證鏈接有效。鏈接的網站可能很多，但不要鏈接到與你的內容無關的網站上。
36.給觀眾成熟的東西
如果網站沒有完成，就不要發送到Web上。所有好的網站都是在幕後完成之後再發佈的。
37.在搜索引擎上登記網站
任何一個人發現你的網站的機會都很少，除非你把你的網站在主要的搜索引擎上進行登記。
38.設計一個留言板
瀏覽者願意把時間花在好的網站上，所以最好有一個留言本，這能激勵訪問者再次回到你的網站，還有助於擴充網站內容。
39.測試網站
在你的網站正式發佈之前，必須進行有用的測試。在設計網站時要使用最新的軟件，但是不要忘了人們並不會使用最新的瀏覽器，所以要照顧到以前的瀏覽器。在上載網站時還要測試所有的鏈接和導航工具條。
40.反覆測試
「盡你所能反覆測試所設計的網站，直到你不能發現新的東西為止。」 ——專家忠告
41.動畫點綴
網頁上的動畫最多只用一個。
42.慎用按鈕
「傾斜的按鈕看起來不會太好，最好不要使用。」——專家忠告
43.內容組織
在開始創建新的網頁前，仔細考慮網站內容的組織。決定好想讓訪問者瀏覽的內容，然後設計導航系統。
44.「空白萬歲」
注意留空白。不要用圖像、文本和不必要的動畫GIFs來充斥網頁，即使有足夠的空間，在設計時也應該避免使用。
45.「利用空白去吸引注意力
為了吸引眼球，Web設計者使用各種方法，比如：閃爍、旋轉等，但是利用空白會吸引更多的注意力。」——專家忠告
46.圖像壓縮
為了保持小的圖像，可以使用類似GIF嚮導的程序，它能自動對圖像進行壓縮。
先聲明圖像的大小
在圖像顯示之前最好能詳細說明圖像大小屬性，可以在IMG標籤中保存這個屬性。這可以使網頁顯得很流暢，因為瀏覽器可以在圖像被下載之前在屏幕上顯示整個網頁。
47.設計失敗的網站
www.boo.com
——在它上面找一件T恤衫要花一個小時；
——給顧客承諾的服務太多，但真正實現的太少；
——二年以前的設計水平，忽視了顧客的需要；
www.miniheroes.co.uk
——不吸引人，主頁太雷同
www.saturn.com
——設計太差
www.e13.com.
——沒有新意
www.song.com.
——導航不知所云
48.圖像大小屬性
可以在IMG標籤中保存這個屬性。這可以使網頁顯得很流暢，因為瀏覽器可以在圖像被下載之前在屏幕上顯示整個網頁。
49.用戶註冊
如果能知道誰瀏覽了網站以及是怎樣瀏覽網站的，那麼就能得到大量有用的信息。但是，要求訪問者在瀏覽網站之前進行註冊，這樣做是要冒風險的，因為這將趕走一批不願意註冊的人。獲得信息的另一種方法是進行有獎競猜或金錢獎勵，讓用戶能主動填一些信息反饋表。
50.使網站具有交互功能
在網站上提供一些回答問題的工具，使得訪問者能從網站上獲得交互的信息。
51.圖片更新
盡可能經常更換網站上的圖片，人們更願意點擊的是圖片而不是文本
52.在網站上提供遊戲
遊戲是很好的交互工具，它是使訪問者能再次光顧網站的好方法。
53.挑選工具軟件
仔細選擇Web設計工具。保證使用自己最想要的、自我感覺最好的軟件
54.使用最新版本的軟件
盡量使用Web設計軟件的最新版本，還應當能被授權進行免費或便宜的升級.
網站項目建設流程概述
一.概念
網站項目管理就是根據特定的規範、在預算範圍內、按時完成的網站開發任務。
二.需求分析
項目立項
我們接到客戶的業務咨詢，經過雙方不斷的接洽和瞭解，並通過基本的可行性討論夠，初步達成製作協議，這時就需要將項目立項。較好的做法是成立一個專門的項目小組，小組成員包括：項目經理，網頁設計，程序員，測試員，編輯/文檔等必須人員。項目實行項目經理制。
客戶的需求說明書
第一步是需要客戶提供一個完整的需求說明。很多客戶對自己的需求並不是很清楚，需要您不斷引導和幫助分析。曾經有一次，我問客戶：「您做網站的目的是什麼？」他回答：「沒有目的，只是因為別人都有，我沒有！」。這樣的客戶就需要耐心說明，仔細分析，挖掘出他潛在的，真正的需求。 配合客戶寫一份詳細的，完整的需求說明會花很多時間，但這樣做是值得的，而且一定要讓客戶滿意，簽字認可。把好這一關，可以杜絕很多因為需求不明或理解偏差造成的失誤和項目失敗。糟糕的需求說明不可能有高質量的網站。那麼需求說明書要達到怎樣的標準呢？簡單說，包含下面幾點：
1.正確性：每個功能必須清楚描寫交付的功能；
2.可行性：確保在當前的開發能力和系統環境下可以實現每個需求；
3.必要性：功能是否必須交付，是否可以推遲實現，是否可以在削減開支情況發生時”砍”掉；
4.簡明性：不要使用專業的網絡術語；
5.檢測性：如果開發完畢，客戶可以根據需求檢測。
三.系統分析
網站總體設計
在拿到客戶的需求說明後，並不是直接開始製作，而是需要對項目進行總體設計，詳細設計，出一份網站建設方案給客戶。總體設計是非常關鍵的一步。它主要確定：
1.網站需要實現哪些功能；
2.網站開發使用什麼軟件，在什麼樣的硬件環境；
3.需要多少人，多少時間；
4.需要遵循的規則和標準有哪些。
同時需要寫一份總體規劃說明書，包括：
1.網站的欄目和版塊；
2.網站的功能和相應的程序；
3.網站的鏈接結構；
4.如果有數據庫，進行數據庫的概念設計；
5.網站的交互性和用戶友好設計。
網站建設方案
在總體設計出來後，一般需要給客戶一個網站建設方案。很多網頁製作公司在接洽業務時就被客戶要求提供方案。那時的方案一般比較籠統，而且在客戶需求不是十分明確的情況下提交方案，往往和實際製作後的結果會有很大差異。所以應該盡量取得客戶的理解，在明確需求並總體設計後提交方案，這樣對雙方都有益處。網站建設方案的包括以下幾個部分：
1.客戶情況分析；
2.網站需要實現的目的和目標；
3.網站形象說明；
4.網站的欄目版塊和結構；
5.網站內容的安排，相互鏈接關係；
6.使用軟件，硬件和技術分析說明；
7.開發時間進度表；
8.宣傳推廣方案；
9.維護方案；
10.製作費用；
11.本公司簡介：成功作品，技術，人才說明等。
當您的方案通過客戶的認可，那麼恭喜你！您可以開始動手製作網站了。但還不是真正意義上的製作，你需要進行詳細設計：
網站詳細設計
總體設計階段以比較抽像概括的方式提出了解決問題的辦法。詳細設計階段的任務就是把解法具體化。詳細設計主要是針對程序開發部分來說的。但這個階段的不是真正編寫程序，而是設計出程序的詳細規格說明。這種規格說明的作用很類似於其他工程領域中工程師經常使用的工程藍圖，它們應該 包含必要的細節，例如：程序界面，表單，需要的數據等。程序員可以根據它們寫出實際的程序代碼。
四. 項目實施
整體形象設計
在程序員進行詳細設計的同時，網頁設計師開始設計網站的整體形象和首頁。
整體形象設計包括標準字，Logo，標準色彩，廣告語等。 首頁設計包括版面，色彩，圖像，動態效果，圖標等風格設計，也包括banner，菜單，標題，版權等模塊設計。首頁一般設計1-3個不同風格，完成後，供客戶選擇。
記住：在客戶確定首頁風格之後，請客戶簽字認可。以後不得再對版面風格有大的變動，否則視為第二次設計。
開發製作
到這裡，程序員和網頁設計師同時進入全力開發階段，需要提醒的是，測試人員需要隨時測試網頁與程序，發現Bug立刻記錄並反饋修改。不要等到完全製作完畢再測試，這樣會浪費大量的時間和精力。項目經理需要經常瞭解項目進度，協調和溝通程序員與網頁設計師的工作。
調試完善
在網站初步完成後，上傳到服務器，對網站進行全範圍的測試。包括速度，兼容性，交互性，鏈接正確性，程序健壯性，超流量測試等，發現問題及時解決並記錄下來。
為什麼要記錄文檔呢？其實本軟件工程本身就是一個文檔，是一個不斷充實和完善的標準。通過不斷的發現問題，解決問題，修改，補充文檔，使這個標準越來越規範，越來越工業化。進而使得網站開發趨向規範，趨向合理。
宣傳推廣
宣傳推廣的基本方法有：
1.網頁裡設置適當的META標籤；
2.各搜索引擎登錄；
3.準備新聞稿件在各新聞公告板發表；
4.合理使用Email郵件列表；
5.廣告條交換；
6.付費廣告。
至此，網站項目建設完畢，將有關網址，使用操作說明文檔等提交客戶驗收。如果需要維護，另行簽定維護項目。
維護
網站成功推出後，長期的維護工作才剛剛開始，我們需要做到的是
1.及時響應客戶反饋；例如可以採取Email自動回復功能，然後在1-3個工作日裡解決問題，再次回復；
2.網站流量統計分析和相應對策；
3.盡量推廣和使用您的網址；
4.網站內容的及時更新和維護。
五.遵循的規範
1.網站建設目錄規範
2.網站文件命名規範
3.網站建設尺寸規範
4.網站首頁head區代碼規範
5.網站連接結構規範
網站VI設計淺談
| VI設計，來源與英文中的 Visual Indentity System，意即視覺識別系統。單單就網站而言，一個網站上看到的所有圖片、文字、動畫、以及他們的編排方式等等一切能夠看到的元素都是VI設計的一部分，簡單來說，其實就一一個網站的外觀。 網站的VI設計重要嗎？要回答這個問題，就先得回答：網站的外觀重要嗎？一個網站的內容固然重要，但是如果沒有一個好看而吸引的外表，哪怕有著再好的內容，有著再好的結構，相信整個網站的瀏覽效果也會大打折扣，瀏覽者的閱讀興致也會大減。就等於一個內涵豐富但卻外表平庸的人在一個公共場所出現，是難以引起別人的注意的一樣。人們稱互聯網經濟為注意力經濟，如何吸引大眾的注意力，除了內容是一個重要的因素外，外觀也同樣起著舉足輕重的作用。網站的外觀非常重要，因此，網站的VI設計也非常重要。Intel精彩網站的VI設計，深深吸引著你一點再點 怎樣才是一個好的VI設計呢？一個好的視覺設計，首先要有一個好的視覺效果。一個網站怎樣才算是有一個好的視覺效果？一個最簡單的判別方法是，看她三眼：第一眼，看是否搶眼；第二眼，看是否順眼；第三眼，看是養眼。其實，這三眼就是網站給你的第一感覺。第一感覺很重要，瀏覽者能否接受這個網站，很大程度上，就看有否這種一見鍾情的感覺。如果答案都是Yes，那麼，這個網站就是有一個很好的視覺效果了，相信瀏覽者也會耐著性子去看完你整個網站的。
搶眼、順眼、養眼——Macromedia就是這樣的一個網站 怎樣才能有一個讓人一見傾心的視覺效果？首先要看整個頁面的顏色是否協調，千萬不可給人刺眼的感覺；其次要看網頁上的的文字是否易於閱讀，文字太細、顏色太淺、頁面太長或超出屏幕寬度，都是有違網站設計的「美學原則」；再次要看圖片，圖片太大、太多、太模糊都會惹來瀏覽者的反感；最後要看「動」與「靜」是否配合得當，無節制地濫用Flash、動態GIF、滾動字幕等效果就會讓人眼花繚亂，但死氣沉沉，毫無生氣的頁面也會讓人感到乏味。 上面談到的VI設計僅僅是就一個頁面而言，VI設計的另一方面是看整個網站的所有頁面是否協調與一致。每個頁面都使用相同種排版方式、相同的背景色及近似的按鈕都能增加網頁一致性，樹立統一的風格。這是最基本而有最重要的網站VI設計。 中文熱訊的VI設計非常注重統一性，在業內也是有口皆碑 如果你是打算為企業建立一個商業網站，則更加要注重網站的VI設計。如果你的企業本身已經有了一個統一的CI設計（Corporate Indentity，企業形象識別），那麼，網站的VI設計就應該遵循其CI設計。當然，前提是你必須有一套適用的CI設計。按照我們的經驗，有相當的CI設計並不適合應用到網站的視覺設計之中，這使得網站的設計受到很大限制，因此企業在制定其CI設計時，很有必要聽取專業網頁製作人員的意見，哪怕企業暫時並被有觸網的打算。 找一家專業而可靠的網絡顧問公司，能起到事半功倍的效果 一個好的VI設計，事實上可以憑借CI設計裡已經指定的Logo、色彩、或標準字型等予以發展。尤其是色彩部分，使用正確的色彩往往可以得到相得益彰的效果。另外針對Logo本身的一致性所作的設計上變化也是一種變化，總而言之，所有的做法必須能夠發展出一套更具品牌形象的設計，而且能將網站的整體特性完全地容入瀏覽者的腦海裡。能讓瀏覽者記住，並能吸引瀏覽者回頭的VI設計，就是一個成功的網站VI設計。 |
| (責任編輯:admin) |
建立無障礙網站的五大指南
| 據估計，全球大約有七億五千萬的殘障人口。他們是否能夠毫無障礙的上網存取您所精心製作的網站呢？ 殘障人士可說是越來越具政治影響力的廣大族群。1996 年， 美國司法部通過美國殘障人士法（Americans with Disabilities Act）規定網站屬於公共領域的範疇之一。此外，美國政府也在今年一月規定所有政府單位的官方網站在 6 月 21 日以前遵守 1973 修正法（Rehabilitation Act of 1973）的第 508 條的規定。 雖然設立「無障礙網站」（或是所謂「具親和力」的網站瀏覽）是目前美國政府官方網站所主力提倡的一大措施，但是我們相信在不久的未來，民法也會通過並強制規定其它非政府官方網站也必須符合「無障礙」存取的特性。 設計一個「無障礙」網站即不困難也不需花費大筆鈔票，它還可以為你帶來百分之二十的潛力造訪者。話雖如此，許多網站設計師卻對「無障礙存取」的概念不表苟同，認為「具親和力」的網站所代表的儘是一些無趣、大量文字而毫無圖像的設計。事實上，為殘障用戶所設計的「無障礙」網頁設計技巧對一般網友來說，也具備提升使用性的效益。它所需要的就是良好的程序撰寫技巧以及細緻周全的規劃能力。你只需要做一點小小的修改就能讓你那設計絕佳的網站「暢通無阻」！「無障礙」網站的五大指南
一個「無障礙設計的網頁」必須能夠讓不同殘障類型的網友所採用，除了要顧及像是失聰及失明的網友所面對的問題外，你也必須考慮到行動不便、色盲、癲癇或患有其它肢體障礙的訪客的需要。 這聽起來像是一件具有重大歷史意義的偉大工程。但是，在一般情況下，你可以參考以下的五大指南來設計出一個「無障礙」的網站： • 對具有圖像、視訊、小程序（applets）或是任何非文本（non-text）的內容及信息提供相關的文字敘述。使用文字來敘述該對象的內容或功能。記得要在所有的圖像上使用 ALT 標籤來加注。 • 如果你使用圖像作為網站的主要導覽架構，請記得要在網頁上加上文字超級鏈接（Text links）。 • 選擇顏色及反差/對比色時要謹慎。不要以顏色作為傳達信息的主要指針。在色彩的調配及組合上也要小心。在文字和背景色的選擇要格外留意－拜託！千萬不要在黑色的背景上使用藍色系的文字了，好嗎？ • 清楚的標示你的超級鏈接，並對終點/目標站加以描述。 • 對網頁上使用諸如 Javascript 和 DHTML 等特殊技巧的功能提供其它的選項（alternatives）。任何具備工具依存度（Device-dependent）的導覽設計將導致部分的殘障網友無法存取你的網頁。 請參觀因特網聯合會（World Wide Web Consortium）所公佈的「無障礙」網頁內容指南網頁，你將獲得「具親和力」網頁設計的提示和相關詳情。 你的網站具備親和力嗎？ 還搞不清楚你的網站是否具備上述的條件？那就試試以下的資源，替你的網站做個免費的鑒定吧！ • Bobby: 這是由 Center for Applied Special Technology（CAST）所設立的單位，針對網頁的存取度和 flags 問題做評鑒。 凡是通過測試的網站都將獲得一個 「Bobby Approved 」的圖示。 • Lynx Viewer: 讓你的網頁僅以文本的格式（text-only format）呈現。 • IBM Home Page Reader: 讓失明或是有視覺障礙的使用者利用鍵盤來瀏覽網站。你可以下載 30 天的試用版來試試看。 • Media Access Generator（MAGpie）: 允許作者在 QuickTime, SMIL 及 SAMI 這三種多媒體格式上加入標題/說明文字。由 National Center for Accessible Media 所設立。 擁有一個「無障礙」的網站，你將增加網站的使用者，免遭他人訴訟，並能迎合以文本技術為主（像網絡電話和 PDA）的新型態技術。這的確是值得期待的！ |
| (責任編輯:admin) |
專業主頁設計原則
| 在任何Web站點上，主頁是最重要的頁面，會比其他頁面有更大的訪問量。主頁對公司收入的影響要比簡單的商務增收方法大的多：主頁使公司對外的臉面。在做任何生意之前，越來越多的潛在客戶將查看公司在網上的形象——而不考慮公司是否在網上有真正的商務活動。 主頁最重要的作用在於它能夠表現出公司的概貌，能夠顯示出與競爭對手相比或與物理世界相比的優勢，並能將所提供的產品或服務展示給訪問主頁的用戶。我們的設計既要能夠使用戶訪問到各種功能，有不至於將這些功能都塞在主頁上，而令經驗不足的用戶感到困惑，重點突出而一目瞭然，又要充分理解用戶的目的，這些都是主頁設計的關鍵。
網站要容易使用，並遵循一些設計慣例——因為用戶在訪問一個個網站時，難以記住任何特殊的交互訣竅，於是會把更多的時間花在更容易使用的網站上。當您設計公司的主頁時，遵循這些原則顯得尤為重要。因為您如果不按照這些原則，下的賭注未免太大了。主頁經常是第一個（也有可能是最後一個）吸引並留住客戶的機會，在這點上主頁和報紙的頭版非常相像。所有的主頁都應該像報紙的頭版那樣著重對待，並有編輯來決定登載重要內容和保證風格的一致性、連續性。 當然，這些只是指導原則，而不是放之四海而皆准的公理。凡是皆有例外，雖然按照這些原則能大大提高主頁的作用，但還需要和具體用戶進行交流，學習相關領域的知識，並進行實際用戶測試，把不斷反饋的信息融入到開發週期中。如果您的決定和這些原則和這些設計原則不同，您的決定應該建立在用戶的具體反饋之上。日期時間和數字： 用戶需要瞭解他們看到的信息是當前的，但他們不需要查看每個條目的日期和時間。 繁榮社區： 在主頁上，繁榮社區的最好方法是揭示網站有什麼能將人們聯繫在一起的東西。 1，如果網站支持用戶社區，例如提供聊天室或其他談論工具，不要將它們作為一般的鏈接。 相反，要在主頁上列出實際的談論主題，並提供任何有關日程表。 2，在商業網站上不要提供「留言薄」。 這使得網站看起來很業餘，而且不能給客戶帶來任何好處。當然，個人站點不在此例。收集用戶信息： 很多站點，開始在主頁上就向用戶索要信息，比如用戶的電子郵件地址等。絕大多數網站並不向用戶解釋為什麼用戶應該這樣做。在通常情況下，很多用戶（更不用說有經驗的用戶了）都直接放棄了填寫他們的個人信息，因為他們知道滿足了這些要求後，經常會收到一大堆不期而至的電子郵件，將收件箱塞的滿滿當當。 1，在主頁上不要直接提供註冊鏈接，而是要解釋用戶註冊的好處。 用戶訪問網站不是為了註冊，但如果理由很充分，他們或許會這樣做。但是很多網站在主頁上提供註冊鏈接時，對用戶為什麼要註冊沒有任何解釋。 2，敏感信息的收集不要過於固執。 誠然，業務需要可能會要求用戶填寫身份證、工作單位、家庭電話之類的敏感信息。大多數用戶對這樣的要求是很抗拒的。因此除了解釋為什麼有必要收集這類信息，不能要求用戶一定填寫這些信息。（除非必要） 個性化： 個性化的主頁如果不要求用戶做很多的設置或者根本不要求用戶做出任何設置操作，就能給用戶帶來價值，它的效果就相當好。如果主頁能根據用戶過去在網站上的行為就做出智能判斷或提出相關建議，或者能根據他們的地理位置提供特殊內容，用戶將受益匪淺。 但是，不要讓用戶定制主頁基本外觀的各種特性，比如顏色模式。集中精力推出未來方便最大多數的用戶閱讀的更好的設計界面，是更好的方式。最好能尊重用戶的瀏覽器設置，比如字體尺寸要用相對大小，而不要用絕對大小。站點的榮譽： 用戶訪問網站是來看內容的，要避免在主頁上塞滿了有關網站的無用的讚美信息，或告訴用戶您的網站是多麼的偉大。 1，不要浪費寶貴的空間誇讚網站的搜索引擎、設計公司、喜愛瀏覽的公司或者界面背後的技術。 用戶其實不關心這些，這樣的條目，您每增加一條，就會增加網頁的整體複雜性，並減弱用戶對真正內容的注意程度。如果這些條目鏈接到其它的網站，還會使用戶在這些網站中迷失方向。 2，要控制顯示網站獲得的讚譽的內容。 絕大多數用戶並不關心您的網站已經入選某些人選出的「今日熱門站點」之類的內容。但同時，獨立的權威機構發表的讚譽、認證和優秀站點的評價也是一條提高網站可信度的途徑。對建立信任度來說，產品質量或服務的獎項比網站本身的獎項通常更有幫助。在任何情況下，都不要過分強調這些獎項的內容，以至於讓用戶反感。而且，過分強調去年獲得的獎項也會降低信譽度，因為它們說明最近網站還沒有做出什麼令人稱道的事情。 突發事件處理： 有時網站會出問題，或者公司受到突發事件的影響。當這些事故發生後，用用戶需要的相關信息及時更新主頁是很重要的。 1，如果網站癱瘓了，或者網站的某個重要部分不能用了，要在主頁上明確說明。 要講明大概要經過多長時間才能修復故障，而不是僅顯示「稍候重試」、「try again later」之類的話。在網站癱瘓期間，還要通知用戶可以做其他的事情，例如：「我們的客戶服務部門隨時為您服務，電話：0371-6342791」。要將這些信息作為關鍵信息保留在網站上，而不要給用戶顯示網站的某些部分「正在建設中」之類的信息。 2，有一個應付突發事件的計劃。 比如事先準備好主頁的備份版本，它有一個主要區域，告訴用戶現在是非常時刻。廣告： 警告：用戶已經對網站上的廣告相當有經驗了，他們已經學會了怎樣忽視廣告。不幸的是，他們經常會忽視任何和廣告類似的東西，或者和廣告相鄰的內容。如果您在網站中使用了公司外的廣告設計，必須保證網站內容和風格的一致性。失去客戶的代價也許會遠遠超過廣告帶來的收益。 1，將公司的廣告放在頁面的邊緣。 絕對不要把廣告放在最重要的條目的旁邊，他們會使這些條目被用戶忽視。 2，為其它公司做的廣告要慎重採用，要盡量小，並盡量和主頁的核心內容相關。 3，最好給廣告加上標籤，說明他們是廣告不是網站內容。 如果將廣告放在頁面上方的標準廣告區域，就不用加標籤。 4，避免用廣告的慣用方式顯示網站的常見特性。 內容越像廣告就越沒有人看。 歡迎詞： 很多網站似乎很想在主頁上包含歡迎詞。在主頁上顯示友好的「歡迎」、「welcome」等詞彙時因特網早期剩下的殘羹冷炙，那時能在有限的網站上見到一個實在是值得慶賀的事情，可是現在人們已經習以為常了。 不要將主頁上最重要的區域用於向用戶打招呼。 對用戶最好的歡迎是讓用戶知道他們能在網站上具體做什麼。本原則的一個例外是：在網站確認註冊用戶的身份後使用歡迎詞是很不錯的。一般來說最好立即顯示站點內容。引導頁面幾乎沒有必要使用，並且它使用戶遠離主站點的內容。 1，當用戶鍵入主頁網址時，或在別的頁面上點擊到站點的鏈接時，要將他們帶到真正的主頁上。 必須取消紛紛彈出的窗口。但如果網站含有對少數人不合適的內容，甚至會冒犯一些用戶，最好有一個彈出窗口對相關內容發出警告。 2，盡量避免彈出式窗口。 大量的彈出式廣告早已使用戶深惡痛絕，現在用戶已經形成了一個共識：彈出窗口通常是廣告。即使您的彈出式窗口包含有用信息也是這樣，有時用戶等不及它打開就將它關掉了。同時，彈出式窗口在用戶關掉後一般不會再次出現，這樣就為想找某些信息的用戶造成了困難，甚至不能如願。因此，在主頁上突出關鍵內容通常是最好的辦法。 3，如果網站只有一種主要的語言版本，就不要用引導頁面。 如果站點有一種主導語言和其他語言，要將用戶直接帶到主導頁面的主頁上，並在主頁上包含一個到其他語言版本的鏈接。最好不要用下拉菜單，因為當菜單太長時會給用戶選擇造成不便，可以考慮放置一個到「網站的國際化版本」的鏈接。反面的例子請看鄭州電專的主頁（www.zepc.edu.cn）,只有一種主導語言（中文），卻專門放置一個引導頁面，而英文版幾乎沒有內容，並且常年沒有更新。為了更有效的在主頁上發佈新聞，需要用心雕琢標題和新聞概要，這對發佈網站所屬公司的信息和其他新聞同樣適用。標題和內容要直接切入正體，而不是僅僅在引誘用戶點擊後才能看到真正的信息。幫助用戶使他們不用去點擊那些他們不感興趣的內容是很重要的，否則經過多次無意義的點擊之後用戶最終會放棄您的網站。 1，標題應該簡潔，應該用敘述語言，用盡量少的文字表達盡量多的信息。 例如，標題「xx的身體正在恢復」比「xx身體恢復狀況的醫學報告」的字少，但包含更多的信息。標題和它下面的內容提要的相關程度應該高於和整篇文章的相關程度。 2，精心編輯在主頁上重點突出的新聞內容提要。 不要只是照抄或改寫文章的第一段，因為第一段往往不適合作為一個單獨的部分。要給用戶一個真正的內容——而不僅僅是對用戶後面內容的描述。要用盡量具體的內容來吸引用戶的點擊並閱讀全文。 3，不必要在新聞提要中列出日期和時間，除非它確實是一條爆炸新聞並且經常更新。 如果主頁經常更新的話，主頁上的時間以足以說明新聞內容是現在的了。但是，在一篇文章的顯著位置顯示日期是很重要的，因為很久以後可能還要查找文章內容，如果不標明一個包括年份的完整日期，老新聞可能會被當作當前發生的新聞。 網址： 盡可能使主頁的網址簡單記憶是非常重要的。不僅要讓用戶記住他們訪問過的網址，而且是他們能快速猜到公司的域名，這是人們必須經常做的。一旦用戶鎖定某個網站，簡單的網址能讓他們明白是否在正確的網站上，而複雜的網址就是用戶不敢斷定。 1，商業網站得主頁應該具有「www.公司名.com」或「www.公司名.com.cn」這樣的域名。 不要在域名後面加複雜的代碼甚至「index.htm」之類的內容，幾乎沒有用戶願意輸入一長串令人恐怖的網址。 2，如果條件允許，要為站點註冊不同的拼寫、縮寫或常見的拼寫錯誤域名。 如果域名有不同的拼寫方法，選擇一個作為正式版本，將用其他拼寫的網址重新定向到此網址上。 窗口標題： 每一個主頁都有一個簡單直接的窗口標題。雖然很多人在上網時或許不會留意窗口標題，它仍然在給窗口加標籤和用搜索引擎查找網站時起關鍵作用。當用戶把網站假如收藏夾時，窗口標題是默認的標籤。這樣當用戶瀏覽書籤列表來訪問網站時，標題應該以最能將用戶和網站聯繫起來的詞作為開頭。與之類似，搜索引擎在搜索結果中顯示窗口標題，用戶據此決定搜索內容和搜索項的關聯程度，所以在一長串搜索結果列表中，標題必須方便瀏覽，內容獨特。為方便瀏覽，窗口標題應以盡量短的句子表達盡量多的內容。 1，用最能傳達信息的詞語作為窗口標題開頭——通常是公司的名字。 用戶經常瀏覽而不是閱讀屏幕上的文字，所以如果不能用最初幾個詞語吸引住顧客的話，可能就不會在引起他們的注意。如果沒有用公司名稱中最重要的詞作為窗口標題的開頭，公司名就不會在書籤列表和搜索結果中出現。很多網站以「歡迎」、「主頁」開頭，獨立的看這也很不錯，但在首先出現的詞中並未表示出任何此網站的獨特信息。 2，不要在窗口標題中包括頂級域名，如「.com」。 除非它確實是公司名的組成部分。諸如「.com」的後綴對窗口標題是不必要的，並且會使公司形象在網上和網下不一致。當用戶進入網站時，他們早知道是在網上，所以不需要加「.com」。 3，在窗口標題中包括對網站的簡短描述。 這段描述對尚未廣為人知的網站尤為重要，即使用戶早已將網站加入收藏夾，或者在搜索列表中查看，就能輕易記住或理解網站的用途。可以考慮採用網站標籤行的內容（如果網戰有標籤行的話）。 4，標題不要太長。 多長的標題不容易閱讀，尤其在書籤列表中更是如此。控件： 諸如下拉菜單、選擇列表和文字框等用戶界面上的小控件，總會引起用戶的注意。但是不要經常使用它們，只有在為完成任務必須使用時，再使用這些控件。 1，如果不讓用戶點擊，決不要將控件作為屏幕的一部分。 注意，控件是可點擊的。例如如果在文字後面緊跟著使用圖形化鏈接，要保證它們是可點擊的，就像文字鏈接一樣。在無數的研究中，我們早已看到用戶會小心謹慎的試圖點擊圖形化鏈接；如果圖形處於不可點擊狀態，用戶就會認為整行都不是鏈接，甚至在鏈接文字可點擊時也這樣認為。 2，盡量少用下拉菜單，尤其是當其中的項目本身不能說明自身意思的情況下。 他們能吸引用戶，但經常是最無效的導航工具。如果下拉菜單列表中只有很少幾個項目，將他們直接列在主頁中效果更好。與之類似，要避免使用過長的下拉菜單——它們將使用戶難以有效的操作，並且用戶經常要將精力花在區分列表中的各項上。將用戶帶到一個單獨的選擇頁面上通常是一個較好的辦法，在這個頁面上可以解釋不同的條目，至少可以將他們組成比單個列表更有意義的多個類別。 版面設計： 圖形設計應該有助於將用戶的注意力吸引到頁面的重要元素上，但在主頁上最好不要以圖形設計作為起始點。 1，在頁面上要限制字體的樣式和其他文本格式例如文字大小、顏色等。 因為繁多的文字樣式容易分散用戶對文字本身的注意力。如果文本樣式看起來過於圖形化，用戶會把它當作廣告而忽略。 2，使用高對比度的文字顏色和背景顏色，是文字盡量清晰。 3，在800*600的分辨率下避免水平滾屏。 水平滾屏不可避免的導致使用問題——最大的問題是用戶有時候不會注意滾動條，從而忽略其中的信息。 4，頁面並非越長越好。 如果您有興趣看一下世界前500強的主頁，您就會發現它們都致力於將主頁控制在一個半版面之內。如果您的主頁超過了用戶通常使用的滿屏高度的四倍的話，或許應該簡化主頁，將一部分內容移到次級頁面上。另一方面，也不一定要將所有的東西都塞在一個屏幕範圍之內，只要頁面上部得能反映最重要特性的內容可以顯示出來就行了。 5，最好使用動態頁面設置，使主頁大小可根據屏幕分辨率來調整。 6，慎重使用標誌圖案。 除了站點本身的標誌圖案外，僅在用戶能瞭解它們的意思時，才能使用它們以吸引用戶的注意。因為其他的標誌圖案更像是廣告，而不是鏈接。用圖形有意識的表現內容，可以大大提高主頁的表現力。但另一方面，圖形會增加頁面的混亂程度並增加頁面的下載時間。與之類似，動畫尤其如此。 1，用圖形表現真正的內容，而不是主頁的裝飾。 使用和內容有關的照片，人們會被圖片吸引，但是和內容無關的圖片，卻分散了用戶的注意力。 2，如果圖形或圖片在上下文中意義並不明確，應簡短的解釋他們。 例如在關於電影節的文章裡顯示了一部電影的靜態圖片，就要清楚的說明這幅圖片是那部電影的，以及它和電影節上的範圍更廣泛的電影有什麼聯繫。另一方面，如果誇張的圖片以幫助讀者快速瀏覽頁面時瞭解故事內容，或許不需要解釋它的意思。 3，以適當的尺寸編輯圖片，並加上ALt文本。 數量過多的圖片並不會傳遞過多的信息，反而會使頁面看起來更加混亂。避免使用帶水印的圖片，它會使頁面更加混亂，經常會減弱視覺效果。即使這些圖片和內容相關並且有吸引力，用戶也不能清楚地看到它，而如果不是這樣，用戶也沒有看到它的必要。 4，在主頁上，不要僅為吸引用戶注意力而是使用動畫，因為它會減弱用戶對其他元素的注意程度。 5，不要用動畫表示關鍵內容，比如公司的標誌，提示行或主標題。 這些看起來像廣告的動畫區域不僅不容易閱讀，而且用戶更容易忽視。搜索： 搜索是用戶能輕鬆找到所需資料的主要方法。關於在主頁上設置搜索引擎，我們的建議很簡單:讓它可以直接看到，使用簡單並查找範圍廣泛。 1，最好在主頁上就設置搜索引擎。 如果在主頁上找不到，用戶會經常認為網站沒有搜索功能。 2，搜索引擎放置 放置位置最好在頁面的上方，最好在最右面或最左面的角部位置。 搜索引擎用搜索框表示，根據用戶的習慣，搜索框的顏色最好是白色。 輸入框的寬度應足夠寬，以使能看到和編輯標準的查詢。輸入框應至少能輸入18個字符。 3，高級搜索 如果網站有高級搜索但並不常用，就不要在主頁上包含一個指向它的鏈接，而是當顯示查找結果時，再向用戶提 供高級查詢的選項。 4，主頁的搜索功能應默認的是整個網站。 如果要限制用戶要查找，絕對不要對用戶隱藏查找範圍。用戶總是以為查找的是整個網站，當找不到時就會以為網站沒有他們要找的功能，除非您告訴談們並非如此。 導航： 主頁設計的初衷就是使網上訪問其他內容更加方便，所以使用戶能方便的找到適當的導航區域是很重要的。您的站點要是用戶能夠區分多個鏈接，並對鏈接下的內容有很好的認識，而不是當他們點擊鏈接以後才知道具體內容。所以導航區域應該顯示站點最重要的內容，以使用戶查看頂級類別時就對內容有很好的感覺。 1，在顯著位置放置主導航區域。 要避免在頁面的頂端放置導航區域，因為用戶經常把屏幕頂端的條形區域當作廣告而忽略。並且已經在大量的測試中得到驗證。比如微軟網站頂部的導航區域，就是一個導致很多用戶易忽視導航區域的例子。 2，在導航區域將鏈接條目分組，不要有多個導航區域指向同一類型鏈接。 分組能幫助用戶區別相識和有關聯的類別，從而容易查看您提供的全部產品或內容。但是，分組太細會使界面複雜並顯得支離破碎，給用戶有條理的理解和掌握界面帶來困難。 3，在主頁不要包含指向該主頁的動態鏈接。 例如，如果將「主頁」作為導航條的一部分，在該主頁上它應該處於不可點擊的狀態。否則肯定有用戶點擊它，得來的結果不過是頁面重載了一次，用戶會有一種上當的感覺。當然，其他頁面應當有一個回到主頁的鏈接。 4，導航區域的詞應該簡單明瞭。 類別名應能明顯區分開，如果您在導航區使用了自造詞或業內術語，用戶就不可能區分，這恐怕不是您所希望的。鏈接： 鏈接不僅僅在主頁上有，但由於主頁是網站的門戶，應該比一般的頁面有更多的鏈接，所以下面關於主頁鏈接的設計原則對吸引用戶尤為重要。 1，盡量使鏈接更容易閱讀。 用帶更多信息的文字作鏈接的開頭，因為用戶經常只瀏覽鏈接的頭一兩個詞以決定是否閱讀，所以要精心處理鏈接文字，使他們言簡意賅，不要在每個鏈接開頭都包含冗余信息——無區別的文字只能使用戶尋找關鍵詞時更加困難。例如，如果在發佈公司新聞的時候，每條新聞都用公司名開頭，通過瀏覽器快速找到每條新聞的主旨就不太容易，如「FedEx Express」、「FedEx Ground」、「FedEx Home Delivery」等，以這種形式列出來，會呈現給用戶一大堆相同的詞（「FedEx」），從而給閱讀造成不便。 盡量用帶下劃線的文字便是鏈接，除非是公認的鏈接區域。越來越多的網站熱衷於將鏈接的下劃線去掉，從而使用戶不知道哪些是鏈接，哪些不是，有時候只能靠將鼠標移上去看是否變成一個小手指來判斷。這樣做的後果是很多鏈接失去作用。 2，注意鏈接名稱。 不要用普通的指令作為鏈接名稱，如「點擊」、「Click」等，而要用有意義的名稱，比如「點擊下載」。 不要再普通列表後使用諸如「更多—」「more—」，而要告訴用戶點擊將得到什麼東西，比如「更多新聞」、「更多軟件」等。 3，用不同的顏色來表示鏈接狀態。 用容易區分的、不太飽和的顏色表示訪問過的鏈接。雖然很多網站用灰色表示訪問過的鏈接，但是灰色一般不容易閱讀，而且灰色通常是控件不可用的標誌，所以我們不建議這樣做。並且已訪問的鏈接顏色也不要和正文顏色相同，因為這樣使用戶難以找到他們曾訪問過的鏈接。 4，如果鏈接的作用不是打開另一個Web頁面，而是諸如鏈接到一個PDF文件、打開一段聲音或視頻、打開應用程序等，注意要明確說明點擊鏈接以後要發生什麼，比如用小圖標來說明。 過期數據： 經常會用到這樣的情況：老用戶訪問網站是對過去的內容感興趣，或者新用戶對公司過去做的事情感興趣，所以，要建立一份包含最近從主頁上移走內容文檔很有必要。 1，要保證很容易的訪問最近在主頁上已經重點介紹的內容。例如，在最近兩個星期或一個月內的內容，可提供一個最近重點介紹的內容列表，並把近期的條目放到永久文檔中保存。舉例說明： 在主頁上舉例說明站點內容能在很多方面給用戶以幫助。首先，例子能說明網站是幹什麼的，用戶就能明白網站是否能滿足他們的需要；第二，例子能解釋網站提供的產品或服務的豐富程度；第三，具體實力比一般性的原則描述更有趣，可以通過具體事例引起用戶的興趣，而不必閱讀抽像的類別名稱；最後，或許是最重要的，例子能幫助用戶成功的導航，因為他們看到了抽像類別名下面到底是什麼。例子可以區分各個類別，是用戶不必再點擊以查看該類別是什麼，從而節省用戶的時間。 1，用例子解釋網站的內容，而不僅僅是抽像的描述。 精心挑選的例子可以比文字本身產生更多的信息。例如，一個叫「超級新聞」並帶有查看今天所有的「頭條新聞」說明的類別，不如顯示頭五條新聞標題和連接著所有超級新聞的一個鏈接更有吸引力。或者在一個電子商務站點上，一個叫「銷售項目」的簡單類別不如讓人們看到一些實際銷售產品及價格更有吸引力。在很多情況下，描述或說明一個類別要比顯示類別的一些具體內容和鏈接用更多的文字和空間。在百貨店裡，顧客依賴於具體事例指引他們找到所需的物品，與此相似，主頁應該在每個部分顯示一些產品的小圖片或其他內容，這樣用戶就能快速瀏覽頁面，看看他們是否在頁面適當的位置。例子還能幫助不能流利閱讀文字的用戶。 2，在例子後面直接加一個到例子所屬類別的詳細內容的鏈接，而不是鏈接到一個通用父類的頁面上。 用戶是最重要的，不要增加用戶尋找他們感興趣的條目的負擔，讓他們還要點擊一次鼠標才能在下一個頁面找到所需內容。比如，如果主頁對電影節作了新聞特寫報道，並顯示了一部電影的照片和標題，則和此電影相關的條目應直接和這條信息鏈接起來，而不是後面跟一個關於該電影節的一般頁面。當然也有例外，比日例子的內容很少，並且沒有更深入的相關信息。 3，在特定例子後面提供一個到更廣泛的類別的鏈接。如果您在主頁上著重突出了某一具體產品、服務或內容的鏈接（除非公司只有一種產品），因為人們有時相信公司的主要產品、服務或內容都在這裡了。例如，如果一個發佈工作崗位的網站重點突出了在醫學領域的三項工作，但卻沒有「其它行業的工作列表」之類的鏈接緊跟其後，用戶會很容易認為此網站只發佈和醫學相關的工作。 4，要明確顯示哪個鏈接指向例子的相關信息，哪個鏈接指向例子所屬類別的一般信息。 要做到這一點，既要靠文字本身說明，也要放好鏈接的位置。指向例子相關信息的鏈接應該直接放在例子後面，而指向例子所屬類別的鏈接應該放得稍微遠點，留一些間隔。例如，如果在亞馬遜網上書店的主頁上重點宣傳一本玄幻小說，就應該在小說描寫的末尾加上一個對此小說「完全描寫和評論」的鏈接，在稍微靠下的位置，再放一個「玄幻小說完全列表」之類的鏈接。 主頁內容： 寫出令人深刻的內容是所有的Web頁面設計最重要的方法之一。絕大多數用戶只會大致瀏覽一下標題內容，而不會仔細閱讀，所以必須優化內容，用盡量少的詞語表達盡量多的信息，使之適合快速閱讀。主頁是必須用盡量少的空間表達盡量多的標題的地方。1，使用用戶關注的詞語。類別和科目的劃分要按照用戶的取向劃分，而不要按照公司的劃分。例如，在一個熱門的石油網站，您怎樣為一個家庭能源的類別起名呢？在某個網站它被稱為「消費者信息」，這個詞語完全是基於燃料公司看待用戶（是消費者，而不是交易者）的態度。相反，如果我們從另一方面考慮問題，想想用戶看到諸如「家庭能源」這樣的標題有什麼反應。要瞭解用戶在需要這樣的信息是會找什麼樣的標題，從而使用他們希望的詞語。2，避免冗余內容。 為了強調某些條目（例如類別或鏈接）的重要性而不斷在主頁上重複它們，反而會減少它們受關注的程度。而且冗余的條目使頁面更加擁擠，導致所有的條目都不再引人注目，因為它們在互相競爭。為了突出某些顯著的東西，應將它放在一個清晰的位置。另一方面，如果在多個類別中包含相同條目或者包含文字標題不同但實際上指向同一頁面的鏈接，只要標題文字用的是用戶使用的語言，冗余內容還是有幫助的。 3，不要使用成語、行話，否則用戶很難明白您在說什麼。 4，如果頁面上的某個區域中的內容已經有效的說明自身作用，就不需要給這個定義明確的區域貼上標籤命名。 5，盡量少用命令式語言。 6，避免使用感歎號。 7，為強調效果，要避免不恰當的使用空格和停頓。 公司信息： 1，在一個獨立的區域組織好公司的信息。 2在主頁上建立一個「關於我們」的鏈接，給用戶一個公司的大致印象。 3，如果想要發佈公司新聞，可在主頁上放置一個專門的鏈接。 4，提供統一的表達方式，讓用戶在網站上覺得是和公司而不是和頁面本身打交道。當提到公司的網戰時，不要使用「公司名.com」，將網站從公司中獨立出來，而要直接使用公司名。這樣顧客會感覺到他們是在何一個不可分割的、緊密聯繫的公司打交道。 5，在主頁上放置一個「聯繫我們的鏈接」，指向一個包含公司所有聯繫信息的頁面。如果您想鼓勵網站訪問者直接和公司聯繫，應該在主頁中直接放置公司的聯繫信息，例如地址 、電話、E-mail等，這樣用戶就不用在網站中尋找了。 6，不要在公司的網站上包含公司內部的信息（這種信息針對的是僱員，應該是在公司的內部網上發佈）。這些內部信息不僅使公共站點更加擁擠，而且如果用戶認為這些信息是針對他們的時候，就會誤導用戶。 7，如果網站要搜索用戶的信息，應該在主頁上放置一個隱私策略的鏈接。 8，如果網站的盈利模式並不明顯，應解釋網站是怎樣贏利的。 網站特色： 當走進一家商店卻不能立即明白那裡提供什麼商品或服務時，您一定會感到莫名其妙。同樣的道理，您的主頁必須能在很短的時間內能讓用戶瞭解公司是做什麼的，他能在您得網站上做什麼。如果網站不能做到這些，那您犯的幾乎是不可彌補的錯誤。如果用戶不知道能做什麼，他們為什麼要做任何事呢？回過頭來看一下，您的網站能讓用戶滿意嗎？為了做到這些，主頁必須強調商標、品牌和公司最重要的目標。主頁還必須具有獨特的、令人印象深刻的外觀，以便從網站中轉來轉去的用戶能認出它就詩詞斬的起始頁面。1，在顯著的位置，以適當的大小顯示公司名稱或標誌。 此標誌區域不需要很大，但應該比周圍條目更大更顯著，以便引起用戶的注意。根據用戶的習慣，頁面的左上角通常是放此標誌的最佳位置。但也有些站點例外，比如雅虎的主頁，標誌就在上方居中。2，有一個簡單的標籤行 。 此標籤行必須簡單、短小並一語中的。其內容可以直截了當地概括出站點提供什麼服務或商品。模糊或過於專業術語化的標籤行只能讓用戶更加茫然。例如，福特公司的主頁www.ford.com的標籤行是「努力使世界變得更加美好」，看起來充滿了理想主義的勇氣，但並沒有對福特公司的汽車業務做出任何描述。 有兩種情況不在此例：a、公司名稱能說明公司本身是做什麼的時候，標籤行是不必要的。比如：「中科院化學院」、「鄭州大學法學院」。 b、公司極其有名時，標籤行也不必要。比如：「Microsoft(微軟)」、「IBM」。 當公司有很多子站點，主站點的標籤行應能概括出總體的業務，並且子站點應該有自己的標籤行，以說明此站點的特殊目的或服務。 然而，國內的網站有標籤行的極少，可能是這個好習慣還沒有被國人吸收，也可能國內的網站大都不在此例。 3，從用戶觀點出發，強調站點的價值，以及公司和主要競爭對手的區別。 4，強調最重要的任務或工作，以便用戶對主頁有清晰的第一印象。 5，為每一個網站明確設計一個主頁 6，「網站」這個此僅代表公司在因特網上的全體站點，而不要有別的意思。 7，設計主頁時，要是主頁和站點上所有其它頁面有明顯的區別，可以考慮使用一個稍微不同的外表設計（仍要和整個網站的視覺風格保持一致），或者在導航部分，有一個顯著的位置指示器。界面上的差別和導航標誌可保證用戶在探索了部分子站點並返回後，還能認識站點的起始位置。 |
| (責任編輯:admin) |
網站的版面設計
| 就像傳統的報刊雜誌編輯一樣，我們將網頁看作一張報紙，一本雜誌來進行排版佈局。 雖然動態網頁技術的發展使得我們開始趨向於學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。版面指的是瀏覽器看到的完整的一個頁面（可以包含框架和層）。因為每個人的顯示器分辨率不同，所以同一個頁面的大小可能出現640*480像素,800*600像素,1024*768像素等不同尺寸。為了適合不同的瀏覽器，有時候有必要做幾個支持相應瀏覽器的版本。佈局，就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。 你可能注意到：「最適合」是一個不確定的形容詞，什麼才是最適合的呢？抱歉的是我也不能也不可能給您一個完整的正確的答案。就好比有人希望知道成功的秘訣是什麼，成功者只能建議您用什麼方法，什麼途徑才能最容易獲得成功，而不可能有一步成功的”秘訣”告訴您。我們在設計思考系列文章第四篇講過站點整體的創意，版面佈局也是一個創意的問題，但要比站點整體的創意容易，有規律的多。讓我們先來瞭解一下版面佈局的步驟： 一.草案 新建頁面就像一張白紙，沒有任何表格，框架和約定俗成的東西，你可以盡可能的發揮你的想像力，將你想到的”景象”畫上去(我們建議您用一張白紙和一支鉛筆，當然用作圖軟件photoshop等也可以)。這屬於創造階段，不講究細膩工整，不必考慮細節功能，只以粗陋的線條勾畫出創意的輪廓即可。盡你的可能多畫幾張，最後選定一個滿意的作為繼續創作的腳本。 我的建議：先準備幾張空白的紙，然後用鉛筆在紙上進行勾畫網站框架。 二.粗略佈局 在草案的基礎上，將你確定需要放置的功能模塊安排到頁面上。(註：功能模塊我們在”首頁設計-引子”中提過，主要包含網站標誌,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計數器,版權信息等)。注意，這裡我們必須遵循突出重點、平衡諧調的原則，將網站標誌，主菜單等最重要的模塊放在最顯眼，最突出的位置，然後在考慮次要模塊的排放。 三.定案 將粗略佈局精細化，具體化。（靠你的智慧和經驗，旁敲側擊多方聯想，才能作出具有創意的佈局。） 在佈局過程中，我們可以遵循的原則有： 1、正常平衡—亦稱”勻稱”。多指左右、上下對照形式，主要強調秩序，能達到安定誠實、信賴的效果。 ————(轉載自廣告大師樊志育《廣告製作》) 以上的設計原則，雖然枯燥，但是我們如果能領會並活用到頁面佈局裡，效果就大不一樣了。比如， 下面，來看看我們經常用到的版面佈局形式： 1.”T”結構佈局。所謂”T”結構。就是指頁面頂部為橫條網站標誌+廣告條，下方左面為主菜單，右面顯示內容的佈局，因為菜單條背景教深，整體效果類似英文字母”T”,所以我們稱之為”T”形佈局。這是網頁設計中用的最廣返的一種佈局方式。這種佈局的優點是頁面結構清晰，主次分明。是初學者最容易上手的佈局方法。缺點是規矩呆板，如果細節色彩上不注意，很容易讓人”看之無味”。 2.”口”型佈局。這是一個象形的說法，就是頁面一般上下各有一個廣告條，左面是主菜單，右面放友情連接等，中間是主要內容。這種佈局的優點是充分利用版面，信息量大(我的主頁首頁即屬於這種佈局)。缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網易壁紙站。 3.”三”型佈局。這種佈局多用於國外站點，國內用的不多。特點是頁面上橫向兩條色塊，將頁面整體分割為四部分，色塊中大多放廣告條。 5.POP佈局。POP引自廣告術語，就是指頁面佈局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。常用於時尚類站點，比如ELLE.com。優點顯而易見：漂亮吸引人。缺點就是速度慢。作為版面佈局還是值得借鑒的。 以上總結了目前網絡上常見的佈局，其實還有許許多多別具一格的佈局，關鍵在於你的創意和設計了。對於版面佈局的技巧，這裡提供四個建議，您可以自己推敲： 1.加強視覺效果 |
| (責任編輯:admin) |
在網頁編輯常用表現的實現方法
| 製作網頁的時候會經常碰到一些需求，如果不知道方法，說不定會困擾我們半天。一起來看看這些常用的網頁編輯方法。 取消文本居中 在編排網頁文本時，你可能會遇到這樣的問題：只想讓一行字符居中，但其它行的字符卻會跟著也變成居中了。其實，這是因為在Dreamweaver MX中進行居中、居右操作時，默認的區域是P、H1－H6、Div等格式標識符，如果你的語句沒有用標識符隔開，Dreamweaver MX就會將整段文字均作居中處理。解決方法就是將想要居中的文本用<P>……</P>隔開。 讓鏈接文字有提示信息
當鼠標停留在鏈接上時，在光標的右下方有時會出現一個提示信息框，對該鏈接進行一定的註釋說明。這樣的效果在網頁製作中也是很重要的。下面就來看看添加鏈接信息的方法。我們可以通過添加HTML代碼來實現。 快速調用時間軸 使用Dreamweaver MX製作網頁的朋友都知道，新安裝的Dreamweaver MX在快速啟動面板中沒有時間軸，如果要急著用它的話該怎麼辦？這裡有一個快速調用時間軸的方法，按下「Alt+F9」組合鍵，或是在軟件主窗口中依次點擊「窗口→其它→時間軸」。 自動刷新頁面 無論是重複刷新還是自動跳轉，在設計中都是相當實用的操作。下面介紹一下它們的製作方法。選擇Dreamweaver MX插入控件面板的「文件頭」部分，然後點擊「刷新」按鈕，隨即會跳出「刷新」對話框，然後輸入框中鍵入刷新延遲的時間「300」（單位：秒），「操作」為刷新指定的目標URL。因為現在是刷新當前頁面，直接選擇「刷新此文檔」選項即可。 定義網頁關鍵字 當用戶使用搜索引擎搜索內容合適的網頁時，關鍵字起著不容忽視的作用。大多數搜索服務器會每隔一段時間自動探測網絡中是否有新網頁產生，並按關鍵字進行記錄，以方便用戶查詢。這時關鍵字的定義就尤為重要了。選擇Dreamweaver MX插入控件面板的「文件頭」部分，點擊「關鍵字」按鈕，彈出定義窗口，錄入需要逐個定義的關鍵字即可。注意每個關鍵字以「；」號隔開，數目沒有限制。 製作「空鏈接」 「空鏈接」就是沒有鏈接對象的鏈接，「空鏈接」中的目標URL是用「#」來表示的。也就是說製作鏈接時，只要在屬性面板的鏈接輸入框中錄入#標記後，它就是個空鏈接了。在很多情況下都要用到空鏈接，比如一些沒有定期完成的頁面，或是為了保持鏈接樣式與普通文字樣式的一致性。 以新窗口形式打開鏈接 製作隨意拖動的對象 訪問網站時，經常能見到不少可以用鼠標拖動的元素，其中以圖片居多。比如，一張廣告圖片擋住了你想瀏覽的內容，你可以用鼠標選中它把它扔到一邊去！ 製作這種效果是通過圖層的「拖動層」行為實現的，單擊行為面板中「+」號，選擇「拖動層」，製作之前你應該保證目標圖層處於選中狀態，進行簡單設置後就OK了。 |
| (責任編輯:admin) |