Entries Tagged '網站製作' ↓

專業主頁設計原則

三月 23rd, 2005 — 網站製作, 網頁製作百寶箱

在任何Web站點上，主頁是最重要的頁面，會比其他頁面有更大的訪問量。主頁對公司收入的影響要比簡單的商務增收方法大的多：主頁使公司對外的臉面。在做任何生意之前，越來越多的潛在客戶將查看公司在網上的形象——而不考慮公司是否在網上有真正的商務活動。    主頁最重要的作用在於它能夠表現出公司的概貌，能夠顯示出與競爭對手相比或與物理世界相比的優勢，並能將所提供的產品或服務展示給訪問主頁的用戶。我們的設計既要能夠使用戶訪問到各種功能，有不至於將這些功能都塞在主頁上，而令經驗不足的用戶感到困惑，重點突出而一目瞭然，又要充分理解用戶的目的，這些都是主頁設計的關鍵。   

網站要容易使用，並遵循一些設計慣例——因為用戶在訪問一個個網站時，難以記住任何特殊的交互訣竅，於是會把更多的時間花在更容易使用的網站上。當您設計公司的主頁時，遵循這些原則顯得尤為重要。因為您如果不按照這些原則，下的賭注未免太大了。主頁經常是第一個（也有可能是最後一個）吸引並留住客戶的機會，在這點上主頁和報紙的頭版非常相像。所有的主頁都應該像報紙的頭版那樣著重對待，並有編輯來決定登載重要內容和保證風格的一致性、連續性。     當然，這些只是指導原則，而不是放之四海而皆准的公理。凡是皆有例外，雖然按照這些原則能大大提高主頁的作用，但還需要和具體用戶進行交流，學習相關領域的知識，並進行實際用戶測試，把不斷反饋的信息融入到開發週期中。如果您的決定和這些原則和這些設計原則不同，您的決定應該建立在用戶的具體反饋之上。日期時間和數字：   

用戶需要瞭解他們看到的信息是當前的，但他們不需要查看每個條目的日期和時間。
1，僅對時間敏感的信息顯示日期和時間。
不要對沒有時間敏感的信息顯示時間和日期，不必顯示星期幾。
2，顯示最後更新的時間，而不是計算機生成的時間。
3，日期的書寫不要只用數字表示日期，比如「01/02/03」，它可能是2月1日，也可能是1月2日，因為有些國家的習慣不同。
4，當顯示一列數字時，要對齊小數點。
在主頁上微小的優化工作，都能減少主頁的混亂程度。


繁榮社區：

    在主頁上，繁榮社區的最好方法是揭示網站有什麼能將人們聯繫在一起的東西。
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，為強調效果，要避免不恰當的使用空格和停頓。
例如，「周 公 制 作」或「周.公.制.作.」，看起來也許很有趣，但會讓用「周公」作為關鍵詞查找的用戶找不到此項，同時也會減慢用戶的閱讀速度。

公司信息：

    除了主頁上的標籤行外，所有商業Web站點都需要提供查找公司信息的清晰方法。無論公司大小，產品或服務是單一還是廣泛，都應該如此。人們願意知道他們是在和誰做生意，有關公司的詳細信息可增加網站的可信度。對一些網站來說，例如大集團公司的網站，有時候人們訪問他的唯一目的或許想獲取公司信息。即使是提供單一產品或服務的網站，很多用戶仍然想知道是誰在提供產品或服務。
下面這些原則也適用於政府網站和其他非盈利機構的網站，雖然他們在具體內容上千差萬別。例如，某一政府部門的主頁不一定需要建立和投資上的連接。在主頁上提供不恰當信息是個普遍的錯誤，尤其是政府部門的主頁此類問題更嚴重。人們訪問政府部門的主頁，是希望瞭解政府的組織機構和工作方式，而不是需要一個把內部機構和宣傳部門首腦作為重點，從而犧牲了公民快速訪問所需信息或服務的頁面。

1，在一個獨立的區域組織好公司的信息。
給內容分類，是用戶能夠明確知道去哪裡找相關信息，使不關心這類信息的用戶只需關注頁面上的其他內容。

2在主頁上建立一個「關於我們」的鏈接，給用戶一個公司的大致印象。
還要建立公司產品、服務、公司價值、商業觀點、管理團隊等相關的詳細鏈接。建議這個鏈接叫做「關於（公司名）」。

3，如果想要發佈公司新聞，可在主頁上放置一個專門的鏈接。
當報刊記者想報道某個公司時，會很喜歡並依賴這部分內容。

4，提供統一的表達方式，讓用戶在網站上覺得是和公司而不是和頁面本身打交道。當提到公司的網戰時，不要使用「公司名.com」，將網站從公司中獨立出來，而要直接使用公司名。這樣顧客會感覺到他們是在何一個不可分割的、緊密聯繫的公司打交道。

5，在主頁上放置一個「聯繫我們的鏈接」，指向一個包含公司所有聯繫信息的頁面。如果您想鼓勵網站訪問者直接和公司聯繫，應該在主頁中直接放置公司的聯繫信息，例如地址 、電話、E-mail等，這樣用戶就不用在網站中尋找了。

6，不要在公司的網站上包含公司內部的信息（這種信息針對的是僱員，應該是在公司的內部網上發佈）。這些內部信息不僅使公共站點更加擁擠，而且如果用戶認為這些信息是針對他們的時候，就會誤導用戶。
招聘信息是公司的焦點內容之一，在內部網和因特網上都頗受關注，因為他們針對的是潛在的僱員，而不是當前的員工。

7，如果網站要搜索用戶的信息，應該在主頁上放置一個隱私策略的鏈接。

8，如果網站的盈利模式並不明顯，應解釋網站是怎樣贏利的。
大家都知道天下沒有免費的午餐。如果用戶不能輕易看出公司或網站的商業模式（例如靠銷售或廣告贏利），他們對網站的信任度就會降低。因為他們害怕在網站中有某種隱藏的攫取他們財富的方法。

網站特色：    當走進一家商店卻不能立即明白那裡提供什麼商品或服務時，您一定會感到莫名其妙。同樣的道理，您的主頁必須能在很短的時間內能讓用戶瞭解公司是做什麼的，他能在您得網站上做什麼。如果網站不能做到這些，那您犯的幾乎是不可彌補的錯誤。如果用戶不知道能做什麼，他們為什麼要做任何事呢？回過頭來看一下，您的網站能讓用戶滿意嗎？為了做到這些，主頁必須強調商標、品牌和公司最重要的目標。主頁還必須具有獨特的、令人印象深刻的外觀，以便從網站中轉來轉去的用戶能認出它就詩詞斬的起始頁面。1，在顯著的位置，以適當的大小顯示公司名稱或標誌。
此標誌區域不需要很大，但應該比周圍條目更大更顯著，以便引起用戶的注意。根據用戶的習慣，頁面的左上角通常是放此標誌的最佳位置。但也有些站點例外，比如雅虎的主頁，標誌就在上方居中。2，有一個簡單的標籤行 。
此標籤行必須簡單、短小並一語中的。其內容可以直截了當地概括出站點提供什麼服務或商品。模糊或過於專業術語化的標籤行只能讓用戶更加茫然。例如，福特公司的主頁www.ford.com的標籤行是「努力使世界變得更加美好」，看起來充滿了理想主義的勇氣，但並沒有對福特公司的汽車業務做出任何描述。
有兩種情況不在此例：a、公司名稱能說明公司本身是做什麼的時候，標籤行是不必要的。比如：「中科院化學院」、「鄭州大學法學院」。
b、公司極其有名時，標籤行也不必要。比如：「Microsoft(微軟)」、「IBM」。
當公司有很多子站點，主站點的標籤行應能概括出總體的業務，並且子站點應該有自己的標籤行，以說明此站點的特殊目的或服務。
然而，國內的網站有標籤行的極少，可能是這個好習慣還沒有被國人吸收，也可能國內的網站大都不在此例。

3，從用戶觀點出發，強調站點的價值，以及公司和主要競爭對手的區別。
如果能簡潔表達的話，標籤行是很好的地方。一個點出公司特色的簡單標籤行，可以讓用戶對公司產生與眾不同的感覺，以及明白站點能提供什麼。

4，強調最重要的任務或工作，以便用戶對主頁有清晰的第一印象。
既然要強調就應該把這些工作或任務放在顯要位置，例如頁面的中上方，並且不要排列太多信息。換句話說，如果你什麼都想強調，則任何事情都不會引起重視。所以，要限制核心工作的數量，一般應該在4個以內，他們的周邊不要有干擾信息。如果您在重要的內容旁放上廣告，很多用戶也會把這些內容當作廣告對待。
這個原則最大的挑戰是，你必須從用戶的要求決定什麼是最重要的任務或工作。所以在決定之前你必須對用戶的需求有深入的瞭解。在設計主頁之前，通過各種細節瞭解您的目標客戶想要什麼。

5，為每一個網站明確設計一個主頁
在網站內要限制「主頁」「首頁」等術語得使用範圍，他們僅指主站點的首頁面。如果到分部門或子站點的首頁時，要用不同的詞語表達。如果讓用戶面對連接到其他子網站的多個「主頁」按鈕或鏈接，用戶肯定會感到迷茫。當然，如果您的公司是個大集團公司，主站點的主頁上應該由到其他單獨的、和母公司分離的站點的鏈接。

6，「網站」這個此僅代表公司在因特網上的全體站點，而不要有別的意思。
如果「網站」這的是整個站點群的一部分而不是整體，就會使用戶感到迷惑，他們會很自然的認為網站群中別的獨立站點屬於另外的公司。
如果您在多個分離的站點上提供服務，一些用戶或許會直接登錄到一個Web服務站點，而不再通過公司的主頁來訪問。這對那些特殊的子站點來說當然效果不錯，但從總公司的角度來看，在主頁上將子站點分門別類更好，使他們作為整體的一部分展示給用戶，而不是各個單獨的部分。

7，設計主頁時，要是主頁和站點上所有其它頁面有明顯的區別，可以考慮使用一個稍微不同的外表設計（仍要和整個網站的視覺風格保持一致），或者在導航部分，有一個顯著的位置指示器。界面上的差別和導航標誌可保證用戶在探索了部分子站點並返回後，還能認識站點的起始位置。
(責任編輯:admin)

無迴響

網站的版面設計

三月 23rd, 2005 — 網站製作, 網頁製作百寶箱

就像傳統的報刊雜誌編輯一樣，我們將網頁看作一張報紙，一本雜誌來進行排版佈局。
　　雖然動態網頁技術的發展使得我們開始趨向於學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。版面指的是瀏覽器看到的完整的一個頁面（可以包含框架和層）。因為每個人的顯示器分辨率不同，所以同一個頁面的大小可能出現640*480像素,800*600像素,1024*768像素等不同尺寸。為了適合不同的瀏覽器，有時候有必要做幾個支持相應瀏覽器的版本。佈局，就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。
　　你可能注意到：「最適合」是一個不確定的形容詞，什麼才是最適合的呢？抱歉的是我也不能也不可能給您一個完整的正確的答案。就好比有人希望知道成功的秘訣是什麼，成功者只能建議您用什麼方法，什麼途徑才能最容易獲得成功，而不可能有一步成功的”秘訣”告訴您。我們在設計思考系列文章第四篇講過站點整體的創意，版面佈局也是一個創意的問題，但要比站點整體的創意容易，有規律的多。讓我們先來瞭解一下版面佈局的步驟：

　　一.草案

　　新建頁面就像一張白紙，沒有任何表格，框架和約定俗成的東西，你可以盡可能的發揮你的想像力，將你想到的”景象”畫上去(我們建議您用一張白紙和一支鉛筆，當然用作圖軟件photoshop等也可以)。這屬於創造階段，不講究細膩工整，不必考慮細節功能，只以粗陋的線條勾畫出創意的輪廓即可。盡你的可能多畫幾張，最後選定一個滿意的作為繼續創作的腳本。

我的建議：先準備幾張空白的紙，然後用鉛筆在紙上進行勾畫網站框架。

　　二.粗略佈局

　　在草案的基礎上，將你確定需要放置的功能模塊安排到頁面上。(註：功能模塊我們在”首頁設計-引子”中提過，主要包含網站標誌,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計數器,版權信息等)。注意，這裡我們必須遵循突出重點、平衡諧調的原則，將網站標誌，主菜單等最重要的模塊放在最顯眼，最突出的位置，然後在考慮次要模塊的排放。

　　三.定案

　　將粗略佈局精細化，具體化。（靠你的智慧和經驗，旁敲側擊多方聯想，才能作出具有創意的佈局。）

　　在佈局過程中，我們可以遵循的原則有：

　　1、正常平衡—亦稱”勻稱”。多指左右、上下對照形式，主要強調秩序，能達到安定誠實、信賴的效果。
　　2、異常平衡—即非對照形式，但也要平衡和韻律，當然都是不均整的，此種佈局能達到強調性、不安性、高注目性的效果。
　　3、對比—所謂對比，不僅利用色彩、色調等技巧來作表現，在內容上也可涉及古與今、新與舊、貧與富等對比。
　　4、凝視—所謂凝視是利用頁面中人物視線，使瀏覽者仿照跟隨的心理，以達到注視頁面的效果，一般多用明星凝視狀。
　　5、空白—空白有兩種作用，一方面對其他網站表示突出卓越，另一方面也表示網頁品位的優越感，這種表現方法對體顯網頁的格調十分有效。
　　6、盡量用圖片解說—此法對不能用語言說服、或用語言無法表達的情感，特別有效。圖片解說的內容，可以傳達給瀏覽者的更多的心理因素。

————(轉載自廣告大師樊志育《廣告製作》)

　　以上的設計原則，雖然枯燥，但是我們如果能領會並活用到頁面佈局裡，效果就大不一樣了。比如，
　　○網頁的白色背景太虛，則可以加些色快；
　　○版面零散，可以用線條和符號串聯；
　　○左面文字過多，右面則可以插一張圖片保持平衡；
　　○表格太規矩，可以改用導角試試。
　　經過不斷的嘗試和推敲，你的網頁一定會亮麗起來的哦:)

　　下面，來看看我們經常用到的版面佈局形式：
（其實有很多的書籍都有此方面的介紹）

　　1.”T”結構佈局。所謂”T”結構。就是指頁面頂部為橫條網站標誌+廣告條，下方左面為主菜單，右面顯示內容的佈局，因為菜單條背景教深，整體效果類似英文字母”T”,所以我們稱之為”T”形佈局。這是網頁設計中用的最廣返的一種佈局方式。這種佈局的優點是頁面結構清晰，主次分明。是初學者最容易上手的佈局方法。缺點是規矩呆板，如果細節色彩上不注意，很容易讓人”看之無味”。

　　2.”口”型佈局。這是一個象形的說法，就是頁面一般上下各有一個廣告條，左面是主菜單，右面放友情連接等，中間是主要內容。這種佈局的優點是充分利用版面，信息量大(我的主頁首頁即屬於這種佈局)。缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網易壁紙站。

　　3.”三”型佈局。這種佈局多用於國外站點，國內用的不多。特點是頁面上橫向兩條色塊，將頁面整體分割為四部分，色塊中大多放廣告條。
　
　　4.對稱對比佈局。顧名思義，採取左右或者上下對稱的佈局，一半深色，一半淺色，一般用於設計型站點。優點是視覺衝擊力強，缺點是將兩部分有機的結合比較困難。

　　5.POP佈局。POP引自廣告術語，就是指頁面佈局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。常用於時尚類站點，比如ELLE.com。優點顯而易見：漂亮吸引人。缺點就是速度慢。作為版面佈局還是值得借鑒的。

　　以上總結了目前網絡上常見的佈局，其實還有許許多多別具一格的佈局，關鍵在於你的創意和設計了。對於版面佈局的技巧，這裡提供四個建議，您可以自己推敲：

　　1.加強視覺效果
　　2.加強文案的可視度和可讀性
　　3.統一感的視覺
　　4.新鮮和個性是佈局的最高境界
(責任編輯:admin)

無迴響

在網頁編輯常用表現的實現方法

三月 23rd, 2005 — 網站製作, 網頁製作百寶箱

製作網頁的時候會經常碰到一些需求，如果不知道方法，說不定會困擾我們半天。一起來看看這些常用的網頁編輯方法。　　取消文本居中　　在編排網頁文本時，你可能會遇到這樣的問題：只想讓一行字符居中，但其它行的字符卻會跟著也變成居中了。其實，這是因為在Dreamweaver MX中進行居中、居右操作時，默認的區域是P、H1－H6、Div等格式標識符，如果你的語句沒有用標識符隔開，Dreamweaver MX就會將整段文字均作居中處理。解決方法就是將想要居中的文本用<P>……</P>隔開。　　讓鏈接文字有提示信息

　　當鼠標停留在鏈接上時，在光標的右下方有時會出現一個提示信息框，對該鏈接進行一定的註釋說明。這樣的效果在網頁製作中也是很重要的。下面就來看看添加鏈接信息的方法。我們可以通過添加HTML代碼來實現。
　　在＜a href=「」＞中添加「Title」屬性，「Title」後面添加提示內容即可。例如： <a href=”http://soft.cpcw.com” mce_href=”http://soft.cpcw.com”  title=”天極網軟件頻道”>。

　　快速調用時間軸

　　使用Dreamweaver MX製作網頁的朋友都知道，新安裝的Dreamweaver MX在快速啟動面板中沒有時間軸，如果要急著用它的話該怎麼辦？這裡有一個快速調用時間軸的方法，按下「Alt+F9」組合鍵，或是在軟件主窗口中依次點擊「窗口→其它→時間軸」。

　　自動刷新頁面

　　無論是重複刷新還是自動跳轉，在設計中都是相當實用的操作。下面介紹一下它們的製作方法。選擇Dreamweaver MX插入控件面板的「文件頭」部分，然後點擊「刷新」按鈕，隨即會跳出「刷新」對話框，然後輸入框中鍵入刷新延遲的時間「300」（單位：秒），「操作」為刷新指定的目標URL。因為現在是刷新當前頁面，直接選擇「刷新此文檔」選項即可。

　　定義網頁關鍵字

　　當用戶使用搜索引擎搜索內容合適的網頁時，關鍵字起著不容忽視的作用。大多數搜索服務器會每隔一段時間自動探測網絡中是否有新網頁產生，並按關鍵字進行記錄，以方便用戶查詢。這時關鍵字的定義就尤為重要了。選擇Dreamweaver MX插入控件面板的「文件頭」部分，點擊「關鍵字」按鈕，彈出定義窗口，錄入需要逐個定義的關鍵字即可。注意每個關鍵字以「；」號隔開，數目沒有限制。

　　製作「空鏈接」

　　「空鏈接」就是沒有鏈接對象的鏈接，「空鏈接」中的目標URL是用「#」來表示的。也就是說製作鏈接時，只要在屬性面板的鏈接輸入框中錄入#標記後，它就是個空鏈接了。在很多情況下都要用到空鏈接，比如一些沒有定期完成的頁面，或是為了保持鏈接樣式與普通文字樣式的一致性。

　　以新窗口形式打開鏈接

　　要想在不覆蓋當前窗口的前提下，打開一個新的瀏覽器窗口，你可以直接在鏈接代碼＜a href=”" mce_href=”"＞中加入「Target=_blank」語句。也可以在Dreamweaver MX屬性面板的「目標」下拉框中點擊下拉菜單，選擇「_blank」即可實現。

　　製作隨意拖動的對象

　　訪問網站時，經常能見到不少可以用鼠標拖動的元素，其中以圖片居多。比如，一張廣告圖片擋住了你想瀏覽的內容，你可以用鼠標選中它把它扔到一邊去！

　　製作這種效果是通過圖層的「拖動層」行為實現的，單擊行為面板中「+」號，選擇「拖動層」，製作之前你應該保證目標圖層處於選中狀態，進行簡單設置後就OK了。
(責任編輯:admin)

無迴響

定位你的網站 CI 形象

三月 23rd, 2005 — 網站製作, 網頁製作百寶箱

所謂CI，是借用的廣告術語。(CI是英文corporate identity的縮寫)，意思是通過視覺來統一企業的形象。現實生活中的CI策劃比比皆是，傑出的例子如：可口可樂公司，全球統一的標誌，色彩和產品包裝，給我們的印象極為深刻。更多的例子如SONY,三菱，麥當勞等等。　　一個傑出的網站，和實體公司一樣，也需要整體的形象包裝和設計。準確的，有創意的CI設計，對網站的宣傳推廣有事半功倍的效果。在您的網站主題和名稱定下來之後，需要思考的就是網站的CI形象。　　有網友要問了：我不是學廣告專業的，CI對我來說可能太難了吧:( 不用擔心，阿捷自己也沒有學過設計專業哦。大家只要參考我的一些具體做法和經驗，很容易將自己網站的CI搞定:)　　1.設計網站的標誌(logo).首先你需要設計製作一個網站的標誌(logo)。就如同商標一樣，logo是你站點特色和內涵的集中體現，看見logo就讓大家聯想起你的站點。注意：這裡的logo不是指88X31的小圖標banner,而是網站的標誌。

　　標誌可以是中文，英文字母，可以是符號，圖案，可以是動物或者人物等等。比如：soim是用soim的英文作為標誌，新浪用字母sina+眼睛作為標誌。標誌的設計創意來自你網站的名稱和內容。

　　(1).網站有代表性的人物，動物，花草，可以用它們作為設計的藍本，加以卡通化和藝術化，例如迪斯尼的米老鼠，搜狐的卡通狐狸，鯊威體壇的籃球鯊魚。
　　(2).網站有專業性的，可以以本專業有代表的物品作為標誌。比如中國銀行的銅板標誌，奔馳汽車的方向盤標誌。
　　(3).最常用和最簡單的方式是用自己網站的英文名稱作標誌。採用不同的字體，字母的變形，字母的組合可以很容易製作好自己的標誌。

　　2.設計網站的標準色彩。網站給人的第一印象來自視覺衝擊，確定網站的標準色彩是相當重要的一步。不同的色彩搭配產生不同的效果，並可能影響到訪問者的情緒。

　　「標準色彩」是指能體現網站型象和延伸內涵的色彩。舉個實際的例子就明白了：IBM的深藍色，肯得基的紅色條型，windows視窗標誌上的紅藍黃綠色塊，都使我們覺得很貼切，很和諧。如果將IBM改用綠色或金黃色，我們會有什麼感覺？

　　一般來說，一個網站的標準色彩不超過3種，太多則讓人眼花繚亂。標準色彩要用於網站的標誌，標題，主菜單和主色塊。給人以整體統一的感覺。至於其它色彩也可以使用，只是作為點綴和襯托，絕不能喧賓奪主。

　　一般來說，適合於網頁標準色的顏色有：藍色，黃/橙色，黑/灰/白色三大系列色。

　　3.設計網站的標準字體。和標準色彩一樣，標準字體是指用於標誌，標題，主菜單的特有字體。一般我們網頁默認的字體是細明體。為了體現站點的「與眾不同」和特有風格，我門可以根據需要選擇一些特別字體。例如，為了體現專業可以使用粗仿細明體，體現設計精美可以用廣告體，體現親切隨意可以用手寫體等等。當然這些都是阿捷的個人看法，你可以根據自己網站所表達的內涵，選擇更貼切的字體。目前常見的中文字體有二三十種，常見的英文字體有近百種，網絡上還有許多專用英文藝術字體下載，要尋找一款滿意的字體並不算困難:) 需要說明的是：使用非默認字體只能用圖片的形式，因為很可能瀏覽者的PC裡沒有安裝你的特別字體，那麼您的辛苦設計製作便付之東流啦！

　　4.設計網站的宣傳標語。也可以說是網站的精神，網站的目標。用一句話甚至一個詞來高度概括。類似實際生活中的廣告金句。例如：鵲巢的「味道好極了」；麥斯威爾的「好東西和好朋友一起分享」；Intel的「給你一個奔騰的心」。

　　以上四方面：標誌，色彩，字體，標語，是一個網站樹立CI形象的關鍵，確切的說是網站的表面文章，設計並完成這幾步，你的網站將脫胎換骨，整體形象有一個提高。形象地說：你從一個土氣的農民轉變為一位西裝革履的白領人士。(注意：我們只是以平面靜態來設計CI,還沒有引入聲音，三維立體等因素。)
(責任編輯:admin)

無迴響

ASP初學者必看

三月 22nd, 2005 — 程式設計, 網站製作

對於用ASP技術編程的初學者來說，無從下手是第一感覺，筆者曾經有這麼一段經歷。經過一番”磨難”以後，你就會找到靈感。現將本人編程中積累的一些經驗，擬成本文，奉獻給讀者。1 首先要學習一些例子程序。接到任務後，不要盲目地急於編寫代碼，而是先看一下別人成功的例子，然後在其上修改或模仿調試，這樣會加快你熟悉的速度。例如，關於ASP編程的教科書上經常有這麼一個例子出現，即顯示系統當前時間的語句：<%=now()%> ，別看這麼簡單的一條語句，裡邊卻包含了ASP的編程思想和格式，會給你後邊的工作帶來很大的幫助。比如說，測試IIS（Internet Information Server）WEB SERVER是否正常工作，用上邊的一個語句測試就足夠了。2 在WINDOWS NT上安裝ODBC後，要測試和後台數據庫確實連通後，再開始編程測試。

可能您沒有看懂題目的意思，我在這裡解釋一下：比如說，後台數據庫是ORACLE，那麼在NT SEVER上首先要安裝SQL*NET（或NET 8），然後配置ODBC，確定和ORACLE數據庫連通，可以用SQL*PLUS測試，還要選擇和ORACLE數據庫相同的字符集，這個工作要在註冊表裡完成。最後在ODBC裡邊測試和ORACLE數據庫連通後，說明WEB SERVER 到後台數據庫端的工作就完成了，下邊再開始編程工作。反過來，你若先編程，後做ODBC的工作，那麼你無法調試程序是否正確，可能大大降低編程效率。在ODBC配置中要選擇MICROSOFT ODBC FOR ORACLE,不要選擇ORACLE ODBC DRIVER，否則不能和數據庫建立聯繫。

在ASP程序中，和數據庫連接的語句是比較固定的，舉例如下：
Set Conn = Server.CreateObject(”ADODB.Connection”)
Conn.Open “odbclink”,”o7people”,”peoplepd”
在這裡，odbclink是數據源的名字，可以說成是ODBC和數據庫連接的定義，o7people是ORACLE的一個用戶名，peoplepd是用戶o7people的密碼。

3 記錄下出錯信息，尋找糾錯規律。

在編程、調試過程中，是一個出錯、糾錯的循環過程，但是時間長了，會發現一些規律，排除錯誤的效率會大大提高。

3．1 出錯信息：
Microsoft OLE DB Provider for ODBC Drivers 錯誤 80040e14
[Microsoft][ODBC driver for Oracle][Oracle]ORA-00933: SQL command not properly ended
/default.asp, 行781
這種錯誤，一般是在執行 Conn.Execute(”SQL 語句”)操作時，所定義的”SQL 語句”有問題，檢查此語句就能發現問題，如日期格式不對，等等。

3．2 出錯信息：
ADODB.Field 錯誤 800a0bcd
BOF 或 EOF 中有一個是”真”，或者當前的記錄已被刪除，但應用程序要求操作的是當前的記錄。
/lzjsblr.asp, 行123
這個錯誤，一般發生在執行下列語句的過程中：
set RS = Conn.Execute(”SQL 語句” )
varnum1=RS(0)
RS.CLOSE
所取的值RS(0)無意義或無意義，還要檢查”SQL 語句”的正確性。

3．3 出錯信息：
Microsoft VBScript 編譯器錯誤 錯誤 800a0409
未結束的字符串常量
/people/default.asp, 行86
insert_sql = insert_sql & dwdm & “,” & d1 & “,” & t1 & “,” & t2 & “,
————————————————————————–^
次項錯誤也是出在SQL語句的定義上，檢查引號、單引號等的配對情況。

4.下邊是一個基於瀏覽器的網上用戶註冊登記程序，筆者在裡邊運用了一些技巧，奉獻給感興趣的讀者。
<html>
<head>
……
<
<%和數據庫連接
Set Conn = Server.CreateObject(”ADODB.Connection”)
Conn.Open “odbclink”,”o7people”,”peoplepd”
將選擇的數據放入選擇框
Set RS = Conn.Execute(”SELECT dwmc FROM tab_dw order by dwdm”)
%>
<% Do While Not RS.EOF %> <option><% = RS(0) %></option>
<%
RS.MoveNext
Loop
RS.Close
%>
<%
定義變量
Dim D1,D2,T1,T2,T3,T4,T5,T6,T7,T8,T9,T10,csrq,sqrq
事件觸發按鈕
B1=”commit”
B2=”return”
%>
<%
將信息初始化
Sub Reset()
D1 = “”
……
T9 = date()
T10 = “”
End Sub
%>
<%
Call Reset()
%>
<%
信息提交條件（觸發條件）
if Request(”B1″) = “commit” Then Save Button
D1 = Request(”D1″)
set DWDM_RS = Conn.Execute(”SELECT dwdm FROM table_dw where dwmc=”&D1&” ” )
DWDM=DWDM_RS(0)
DWDM_RS.CLOSE
D2 = Request(”D2″)
……
日期數據轉換成ORACLE識別的格式
csrq = DAY(T6) & “-” & month_array(Month(T6)) & “-” & Year(T6)
sqrq = DAY(T9) & “-” & month_array(Month(T9)) & “-” & Year(T9)
定義SQL語句
Sql_insert = “INSERT INTO peopleuser(dwdm,dwmc,sjks,tele,address,zipcode,xm,xb,csrq,peoplename,peoplepd,sqsj,bz) VALUES (”
Sql_insert = Sql_insert & DWDM & “,” & D1 & “,” & T1 & “,” & T2 & “,” & T3 & “,” & T4 & “,”
Sql_insert = Sql_insert &T5&”,”& D2 & “,” & CSRQ & “,” & T7 & “,” & T8 & “,” & SQRQ & “,”
Sql_insert = Sql_insert & T10 & “)”
將信息入庫
Set LFMC_R4 = Conn.Execute(Sql_insert)
信息提交完成後，將屏幕信息初始化
call reset()
end if
%>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

　　1、設計規劃
　　現在是模塊化程序設計的天下，應用程序要實現的目標就是金字塔尖，進行程序設計規劃的意義就在於，對構成金字塔的基礎模塊進行劃分，規劃得越詳細，模塊分工越明確，越容易明白下一步該做什麼，這好比搭積木的遊戲，你可以把你的積木塊組合成各種各樣的形狀，但首先要熟悉每個積木塊的功能。

　　2、有備無患
　　實戰之前，先找幾個樣例程序研究研究，最起碼明白怎麼開頭，怎麼結尾，別打無準備之仗。

　　3、葵花寶典
　　做一份所用程序語言的精簡列表，包括基本數據類型、各類運算符說明、基本語句結構、常用關鍵詞（保留字）、常用函數（控件）說明等等。

　　4、自由獨立
　　為你的應用程序建立一個單獨的目錄，這樣既方便應用程序文件的管理，而且如果你要給程序搬「家」，捲起鋪蓋就可以走人了。

　　5、見名知意
　　程序再小，用的變量也不會少，變量起名應當見名知意是個老話題了，好處是顯而易見的。推薦程序員使用「匈牙利命名法」，它會使你的起名工作變得輕而易舉，而且相當專業。

　　6、對稱之美
　　中國人講究對稱之美，用在編程裡也很合適，如果程序裡用到A循環嵌套B判斷，B判斷又包含C循環之類的結構，記著使用縮進法，讓A:ENDDO對齊A:DO，B:ENDIF對齊B:IF……諸如此類，依次縮進，總之對稱就等於美觀加易讀。

　　7、多加註解
　　對程序中自定義的變量、函數、子程序加以功能性的註釋說明，別嫌麻煩。如果過了三月五月，連自己寫的東西都看不明白了，那才大麻煩。

　　8、環境保護
　　如果應用程序需要修改系統設置，記著應用開始前先保存設置，應用結束後要恢復設置，千萬別污染環境。

　　9、拿來主義
　　一個人的力量是有限的，大家的力量是無限的，平時多看看別人的程序，如果碰巧有好的經驗，巧的方法，用得上的段子，不妨拿來。

　　10、忍者無敵
　　當你認為程序代碼寫的「百分百」正確，而程序編譯執行百分百有毛病，你基本屬於暈菜的時候，千萬要忍，歇口氣，重頭來，別放棄！相信最終的勝利是屬於你的！

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

ASP提速技巧五則

技巧之一：提高使用Request集合的效率
訪問一個ASP集合來提取一個值是費時的、佔用計算資源的過程。因為這個操作包含了一系列對相關集合的搜索，這比訪問一個局部變量要慢得多。因此，如果打算在頁面中多次使用Request集合中的一個值，應該考慮將其存貯為一個局部變量。例如將代碼寫成下面的形式以加快腳本引擎處理速度：
strTitle=Request.Form(”Title”)
strFirstName=Request.Form(”FirstName”)　
strLastName=Request.Form(”LastName”)　
If Len(strTitle) Then strTitle=strTitle & ” “　
If strFirstName=”" Then strFullName=strTitle & ” ” & strLastName　
Elseif Len(strFirstName)=1 Then
strFullName=strTitle & strFirstName & “. ” & strLastName
Else
strFullName=strTitle & strFirstName & ” ” & strLastName　
End If

技巧之二：直接訪問適當的集合
如果不是別無選擇，否則不要使用strPage=Request(”page”)的這樣的形式來獲取參數，因為這將按順序搜索全部的集合—QueryString、Form、Cookies、ClientCertificate、ServerVarible直到發現第一個匹配值的名稱。這樣做比直接訪問適當的集合效率低，並且是不安全的，除非能絕對保證這個值不會出現在另外一個集合中。
例如，可能希望搜索滿足客戶請求的WEB服務器名稱，這通過出現在每個查詢中的Request.ServerVarables集合中尋找「SERVER_NAME」來實現。然而，假如其他的集合也包含名為「SERVER_NAME」的值（鍵名不區分大小寫），當使用Request(”server_Name”)時，就會得到錯誤的結果。總而言之，應盡可能直接訪問適當的集合。

技巧之三：在費時操作前使用Response.IsClientConnected屬性
使用Response.IsClientConnected是觀察用戶是否仍連到服務器並正在載入ASP創建的網頁的有用方式。如果用戶斷開連接或停止下載，我們就不用再浪費服務器的資源創建網頁，因為緩衝區內容將被IIS丟棄。所以，對那些需要大量時間計算或資源使用較多的網頁來說，值得在每一階段都檢查遊覽者是否已離線：
…… Code to create first part of the page
If Response.IsClientConnected Then
Response.Flush
Else
Response.End
End If
…… Code to create next part of page

技巧之四：優化ASP中的ADO操作
通常面言，數據構成了WEB站點的實際內容。所以，優化ADO操作以加速ASP代碼執行，十分有用：
a. 僅選擇所需的列：當打開ADO記錄集時，除非需要獲得所有的列，否則不應自動地使用表名（即SELECT *）。使用單獨的列意味著將減少發送到服務器或從服務器取出的數據量。即使需要使用全部列，單獨地命名每個列也會獲得最佳的性能，因為服務器不必再解釋這些列的名字。
b. 盡可能的使用存儲過程。存儲過程是預先編譯的程序，含有一個已經準備好的執行計劃，所以比SQL語句執行更快。
c. 使用適當的光標和鎖定模式。如果所做的全部工作只是從記錄集中讀取數據，並將其顯示在屏幕上，那麼就使用缺省的只能前移、只讀的記錄集。ADO用來維護記錄和鎖定的細節的工作越少，執行的性能就越高。
d. 使用對像變量。當遍歷記錄集時一個肯定能提高性能的方法是使用對像變量指向集合中的成員。例如：
While Not RsGc.EOF
Response.Write “工程名稱：” & RsGc(”GcMC”) & “(工程代碼：” & RsGc(”GcCode”) & “)
“　
RsGc.MoveNext
Wend
可以用改寫為下面的代碼以加快執行：
set GcMc=RsGc(”GcMc”)
set GcCode=RsGc(”GcCode”)　
While Not rsGc.EOF Response.Write “工程名稱：” & GcMc & “(工程代碼：” & GcCode & “)
” RsGc.MoveNext　
Wend
新的代碼建立了對象變量的引用，所以可以使用對像變量而不是實際的變量，這意味著腳本引擎的工作減少了，因為在集合中進行索引的次數變少了。

技巧五：不要混用腳本引擎
我們知道，ASP頁面中既可以使用VBScript，也可以使用JScript。但是在同一個頁面上同時使用JScript和VBScript則是不可取的。因為服務器必須實例化並嘗試緩存兩個（而不是一個）腳本引擎，這在一定程度上增加了系統負擔。因此，從性能上考慮，不應在同一頁面中混用多種腳本引擎。
(責任編輯:admin)

無迴響

1小時ASP入門，非常簡單

三月 22nd, 2005 — 程式設計, 網站製作

<%
語句
……
%><2>定義變量dim語句
<%
dim a,b
a=10
b=」ok!」
%>
注意：定義的變量可以是數值型，也可以是字符或者其他類型的<3>簡單的控制流程語句
1. If 條件1 then
語句1
elseif 條件2 then
語句2
else
語句3
endif
2.while 條件
語句
wend
3.for count=1 to n step m
語句1
exit for
語句2
next二.ASP數據庫簡單操作教程
<1>.數據庫連接(用來單獨編製連接文件conn.asp)
<%
Set conn = Server.CreateObject(”ADODB.Connection”)
conn.Open “DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=” & Server.MapPath(”\bbs\db1\user.mdb”)
%>
(用來連接bbs\db1\目錄下的user.mdb數據庫)

<2>顯示數據庫記錄
原理：將數據庫中的記錄一一顯示到客戶端瀏覽器，依次讀出數據庫中的每一條記錄
如果是從頭到尾：用循環並判斷指針是否到末 使用: not rs.eof
如果是從尾到頭：用循環並判斷指針是否到開始 使用：not rs.bof

<!–#include file=conn.asp–> (包含conn.asp用來打開bbs\db1\目錄下的user.mdb數據庫)
<%
set rs=server.CreateObject(”adodb.recordset”) (建立recordset對像)
sqlstr=”select * from message” —->(message為數據庫中的一個數據表，即你要顯示的數據所存放的數據表)
rs.open sqlstr,conn,1,3 —->(表示打開數據庫的方式)
rs.movefirst —->(將指針移到第一條記錄)
while not rs.eof —->(判斷指針是否到末尾)
response.write(rs(”name”)) —->(顯示數據表message中的name字段)
rs.movenext —->(將指針移動到下一條記錄)
wend —->(循環結束)
——————————————————
rs.close
conn.close 這幾句是用來關閉數據庫
set rs=nothing
set conn=nothing
——————————————————-
%>
其中response對象是服務器向客戶端瀏覽器發送的信息

<3>增加數據庫記錄像
增加數據庫記錄用到rs.addnew,rs.update兩個函數
<!–#include file=conn.asp–> (包含conn.asp用來打開bbs\db1\目錄下的user.mdb數據庫)
<%
set rs=server.CreateObject(”adodb.recordset”) (建立recordset對像)
sqlstr=”select * from message” —->(message為數據庫中的一個數據表，即你要顯示的數據所存放的數據表)
rs.open sqlstr,conn,1,3 —->(表示打開數據庫的方式)
rs.addnew 新增加一條記錄
rs(”name”)=”xx” 將xx的值傳給name字段
rs.update 刷新數據庫
——————————————————
rs.close
conn.close 這幾句是用來關閉數據庫
set rs=nothing
set conn=nothing
——————————————————-

%>

<4>刪除一條記錄
刪除數據庫記錄主要用到rs.delete,rs.update
<!–#include file=conn.asp–> (包含conn.asp用來打開bbs\db1\目錄下的user.mdb數據庫)
<%
dim name
name=”xx”
set rs=server.CreateObject(”adodb.recordset”) (建立recordset對像)
sqlstr=”select * from message” —->(message為數據庫中的一個數據表，即你要顯示的數據所存放的數據表)
rs.open sqlstr,conn,1,3 —->(表示打開數據庫的方式)
——————————————————-
while not rs.eof
if rs.(”name”)=name then
rs.delete
rs.update 查詢數據表中的name字段的值是否等於變量name的值”xx”，如果符合就執行刪除，
else 否則繼續查詢,直到指針到末尾為止
rs.movenext
emd if
wend
——————————————————
——————————————————
rs.close
conn.close 這幾句是用來關閉數據庫
set rs=nothing
set conn=nothing
——————————————————-
%>

<5>關於數據庫的查詢
(a) 查詢字段為字符型
<%
dim user,pass,qq,mail,message
user=request.Form(”user”)
pass=request.Form(”pass”)
qq=request.Form(”qq”)
mail=request.Form(”mail”)
message=request.Form(”message”)
if trim(user)&”x”=”x” or trim(pass)&”x”=”x” then (檢測user值和pass值是否為空，可以檢測到空格)
response.write(”註冊信息不能為空”)
else
set rs=server.CreateObject(”adodb.recordset”)
sqlstr=”select * from user where user=”&user&”" (查詢user數據表中的user字段其中user字段為字符型)
rs.open sqlstr,conn,1,3
if rs.eof then
rs.addnew
rs(”user”)=user
rs(”pass”)=pass
rs(”qq”)=qq
rs(”mail”)=mail
rs(”message”)=message
rs.update
rs.close
conn.close
set rs=nothing
set conn=nothing
response.write(”註冊成功”)
end if
rs.close
conn.close
set rs=nothing
set conn=nothing
response.write(”註冊重名”)
%>
(b)查詢字段為數字型
<%
dim num
num=request.Form(”num”)
set rs=server.CreateObject(”adodb.recordset”)
sqlstr=”select * from message where id=”&num (查詢message數據表中id字段的值是否與num相等，其中id為數字型)
rs.open sqlstr,conn,1,3
if not rs.eof then
rs.delete
rs.update
rs.close
conn.close
set rs=nothing
set conn=nothing
response.write(”刪除成功”)
end if
rs.close
conn.close
set rs=nothing
set conn=nothing
response.write(”刪除失敗”)
%>

<6>幾個簡單的asp對象的講解
response對像:服務器端向客戶端發送的信息對像,包括直接發送信息給瀏覽器,重新定向URL，或設置cookie值
request對像:客戶端向服務器提出的請求
session對像:作為一個全局變量，在整個站點都生效
server對像：提供對服務器上方法和屬性的訪問
(a) response對象的一般使用方法
比如：
<%
resposne.write(”hello, welcome to asp!”)
%>
在客戶端瀏覽器就會看到 hello, welcome to asp! 這一段文字
<%
response.Redirect(”www.sohu.com”)
%>
如果執行這一段，則瀏覽器就會自動連接到 「搜狐」 的網址
關於response對象的用法還有很多，大家可以研究研究
request對象的一般使用方法
比如客戶端向服務器提出的請求就是通過request對像來傳遞的
列如 ：你在申請郵箱的所填寫的個人信息就是通過該對像來將
你所填寫的信息傳遞給服務器的
比如：這是一段表單的代碼，這是提供給客戶填寫信息的，填寫完了按
「提交」傳遞給request.asp文件處理後再存入服務器數據庫
<form name=”form1″ method=”post” action=”request.asp”>
<p>
<input type=”text” name=”user”>
</p>
<p>
<input type=”text” name=”pass”>
</p>
<p>
<input type=”submit” name=”Submit” value=”提交”>
</p>
</form>
那麼request.asp該如何將其中的信息讀入，在寫入數據庫，在這裡就要用到request對象了，下面我們就來分析request.asp的寫法
<%
dim name,password (定義user和password兩個變量)
name=request.form(「user」) (將表單中的user信息傳給變量name)
password=request.form(「pass」) (將表單中的pass信息傳給變量password)
%>
通過以上的幾句代碼我們就將表單中的數據讀進來了，接下來我們要做的就是將信息寫入數據庫了，寫入數據庫的方法上面都介紹了，這裡就不一一複述了。
（通過上面的學習大家完全可以自己做一個留言版了）
(責任編輯:admin)

無迴響

ASP開發web站點

三月 22nd, 2005 — 程式設計, 網站製作

說明：由於行文倉促及作者水平有限，難免有錯，歡迎來信指正。一般的大型網站目前已經越來越少的使用ASP來架構，不過在中小型商務站點上，ASP依然佔據了較大的市場範圍。ASP以其簡單，開發週期短，易維護的優點受到中小型站點管理員的青睞。不過，據我所知，完全使用ASP來集成更新維護網站的僅常見於那些真正的商務站點或者比較成熟的技術站點，更多的網站僅僅有一些獨立的欄目在使用ASP程序。這樣的特點是站點管理過於分散，比如：每進入一個欄目管理都要輸入不同的帳號和密碼。不僅浪費管理員的精力，更加重了網站的維護困難程度。而我們看見的那些單欄目使用的ASP程序有很多是從網上尋找的源代碼，這樣使你的網站安全性也會受到一定的威脅，因為網上提供的源代碼都是開放的，每個人都可以研究這個代碼，當然後果你也知道，ASP的安全性本來就是一個受用戶長期關注的問題，而被開放的源代碼更是危險。當然我並不是不贊成大家使用網上的源代碼，只是希望各位能夠注意這個問題，不要完全信奉拿來主義，該修改的地方還是要修改，該打補丁的地方還是要打上補丁（當然絕不是讓你去修改人家的版權信息）。綜上所述，我覺得凡是對ASP有一定瞭解的人都可以自己開發一套整站系統，並且使集成化的。本專題的目的就是為了指引大家如何建立一套完整的web動態站點。為了使各個層次的讀者都能看懂本文，有必要先講講下面這些話：

如果你是初學者，你應該掌握什麼？
必要的VBscript和Javascript。vbs作為主要的ASP程序編寫語言來自於Visual Basic，學過VB的人可以很快的掌握，Javascript就不用說了，嵌入在網頁裡面，客戶端使用平凡的腳本語言。你最好擁有一定的HTML語言知識，不然會覺得很惱火。

SQL語句基礎亦是基礎！
初期你不必掌握全部，基本的就可以了。

前提：我們將用最基本的語句和功能編寫一套web動態站點的整站系統。

您只要認真看完此專題，可以基本掌握web整站開發的思想，並已能賦予實際應用。當然，隨學習的深入，您可以加入更多的功能或對程序算法進行改進。
(1)對網站進行需求分析：

很多人都忽略了這一點，他們認為開發web站點程序不需要用軟件工程的思想，實際上最後會導致web站點的無序化，比如：一些人想到要開發什麼站點想都不想，直接開始寫代碼，想到什麼就寫什麼，直到他們寫完之後，才發現我還需要什麼功能沒有寫，然後就立刻返回加代碼。這樣的話，使得程序極易出錯。所以一開始的時候還是建議你像軟件工程一樣，制定web站點開發的需求分析，應包括所開發web系統的基本要求，如：功能，性能，用戶群，基本的數據流程和處理流程，安全與保密的要求。web系統的目標，條件、假設、限制等。

詳細一點來說，就以我們的站點來說，它是一個技術型站點，就應包括新聞系統、文章系統、下載系統等等，那麼這些系統需要具備哪些功能就是我們要分析的問題。

下面我們就從實例來分析要實現的功能：

新聞系統：一個新聞系統最重要的一點就是能夠實時的把新聞傳達給用戶，那麼新聞系統應該具備哪些功能？發佈時間，點擊次數，插入圖片，以及對新聞來源赫作者的一些註釋。當然發佈時間這些都是非常容易實現的功能。插入圖片可以使用html功能，ubb轉換表或上傳圖片來解決，這些方法本文就不再一一闡述，大家可以參考有關資料。

實際上，不管對於什麼系統，當你在一開始對其需求進行了詳細分析之後，實現起來肯定比想到哪寫道哪輕鬆高效。如果方便的話用電腦或者紙將web系統的開發需求記錄下來，在開發過程中也可以進行參考。這裡還不得不提的一個話題是關於用戶驗證的，一般我們對用戶的驗證使用的是session和cookie，Session變量和cookies是同一類型的。如果某用戶將瀏覽器設置為不兼容任何cookie，那麼該用戶就無法使用這個Session變量及cookies。一般來說，對於網站管理員的操作我個人推薦使用session，因為我們的主題是開發web整站，那麼管理員肯定要在多個管理頁面中跳轉，在這裡session是非常方便的。若是對用戶進行驗證，那麼可以使用cookies，比如用戶可以設置強制瀏覽器把cookie存儲在計算機上面，只需要使用response.cookies的Expires屬性就可以輕鬆的做到，還有一點就是因為sessionID的信息是非常容易丟失的，對於用戶這種長時間訪問的集群，則必須通過在用戶的web瀏覽器中存儲一個專用的cookie，並且把cookie信息保存到數據庫中來創建一個用戶標識。

上面這一節我們講到了web整站開發的先期需求分析，就我個人認為是在網站工程中非常重要的一步。
(2)組織和管理站點結構

往往在開發一個有一定規模的站點的時候，使站點具有較好的目錄結構是一個值得注意的問題。商業應用的程序往往都要求具有在事務內部運行腳本和組件的能力。事務是服務器端的操作，簡單的說就是即便該操作包含了許多步驟，例如：下定單，查看定單，打印訂單等也只能整體返回操作是成功還是失敗。用戶可以創建在事務內部運行的ASP腳本，如果教本的任何一部分操作失敗，那麼整個事務就終止。

這裡我們要詳細說明的並不是事務性腳本在整站中的應用，而是要讓你在開發中不至於被眾多的文件，眾多的操作攪昏了頭。

合理的對文件名進行組織。例如：我們將管理頁面命名為admin.asp,而管理頁面中對各個欄目進行操作的頁面可以在admin後面加下劃線然後命以這個欄目的名稱，比如新聞管理頁面admin_news.asp,下載管理頁面admin_download.asp

關於文件的放置。我這裡僅是以我得做法來講解，相信各位能有自己的見解。將所有管理操作頁面放置於同一目錄下面，為的是更加方便的管理和分配權限。各個欄目用戶頁面可以放在一個目錄下方便於管理。數據庫可以放在統一的目錄下面。

怎樣減少文件的數量。你沒有必要為每個添加，刪除，修改或者別的操作新建許多頁面，你可以使用參數來減少頁面，打一個比方，在管理頁面admin_news.asp中，當admin_news.asp?action=addnew的時候執行添加操作，當admin_news.asp?action=del的時候執行刪除操作，這樣將大大增強你站點集成化程度。

可以重用的代碼。很多代碼是可以重複使用的，比如UBB的轉換表等，可以把它們單獨放在一個目錄中。
(3)開發後台管理
我不知道各位開發者是不是和我一樣，先將後台開發完畢後再進行前台開發。或者你是混在一起來做。不過，我認為先開發後台是比較合適的。前面我們講過先要對系統進行分析，要實現哪些功能自己心裡要有個底。這樣做起來才會事半功倍，也會減少許多不必要的錯誤。後台管理無非具有以下這些功能：
1）用戶驗證
2）添加網站數據
3）修改網站數據
4）刪除網站數據
5）站點系統設置
6）站點訪問統計
7）搜集用戶信息
…
如何把他們同意的集中在一起管理，是我們要解決的問題。比如說用戶驗證我們可以這樣來實現：

<%
…
username=replace(trim(request(”username”)),”",”")
password=replace(trim(Request(”password”)),”",”")
set rs=server.createobject(”adodb.recordset”)
sql=”select * from admin where password=”&password&” and username=”&username&”"
rs.open sql,conn,1,1
if not(rs.bof and rs.eof) then
if password=rs(”password”) then
session(”admin”)=rs(”username”)
session(”flag”)=rs(”flag”)
else
end if
else
end if
…
%>

username和password是從用戶表單輸入傳遞過來的值，你一定要注意用replace處理一次後再和數據庫中存儲的值進行對比。因為我們知道username=username是恆等的，必須把用戶輸入的去掉。

通過驗證後建立一個session變量，可以很方便的在各個管理頁面中進行管理。
要對用戶進行驗證的頁面可以這樣寫：

<%if session(”admin”)=”" then
response.write “no access”
else
…
end if
%>

有人在數據處理的頁面會遺忘寫這個驗證，這是非常危險的，用戶可以通過這個缺陷非法提交數據。

再來說說如何收集用戶信息，這似乎都不涉及到太多技術了，一般可以這麼做，比如你站點的特色是提供自主產權的軟件下載，你可以讓用戶在下載前填寫用戶信息表，這個方法在外國網站用的比較多，在中國還很少見，我的網站就擁有這個功能，讓我輕鬆的知道來自美國和新西蘭的用戶比較多。

在進行後台管理開發的時候還往往遇到這個問題，為不同的管理員分配不同的權限。僅以西路整站系統講一種方法。在上面驗證用戶的時候我們還將flag寫入了session變量，我們可以通過flag來判斷用戶級別，當然前提是你已經為flag分配了不同的值。具體可以這樣實現：

<%
select case session(”flag”)
case “1″
case “9″
case “10″
case else
%>
<script language=”javascript”>
if (confirm(”您的操作權限不夠(進入站點新聞設置界面需要第1或9,10級權限),系統拒絕你的訪問,請點確定返回,或者點取消退出重新登錄”))
location.href=”admin.asp” mce_href=”admin.asp”;
else
location.href=”quit.asp” mce_href=”quit.asp”;
</script>
<%end select%>

以上確定了三種級別可以進入該操作頁面的管理員。當然這裡僅僅是說明了一種簡單的驗證方法，其實你亦可以使用split函數等來確定用戶權限。
(責任編輯:admin)

無迴響

網頁設計規範

三月 22nd, 2005 — 程式設計, 網站製作

一. 規範有效期：從PSD源文件到HTM頁面交付給客戶為止；二. 面向的對象：所有的設計人員及編輯人員； 三. 生成HTM文件的命名1. 網站結構
生成大於兩個頁面的網站時必須有以下結構.
例: (citk.net)
index.htm 根目錄
/common 公司用件夾(swf/js/css)文件存放處
/images 網站使用圖片
/Templates DW自動生成的模版目錄
/news * 是否使用二級目錄結構 *
…
/service * 是否使用二級目錄結構 *

2. 模版的命名
一般情況下設計出來的網頁一般有三個兩種版式(推薦使用下面這三個文件命名)
index.dwt (可選, 一個網站只要有一個index件)
list.dwt
memo.dwt

3. 模版的可編輯區命名(待定)

4. 關於模版的套用
希望網站中(除了index外)所的網頁(HTM文件)都應該對應一個模版(dwt文件)

5. 關於鏈接
除了標注的幾個鏈接(如: http://zf.91.com)外，其他頁面禁止使用絕對鏈接(就是使用http://開頭的鏈接格式)

6. 關於CSS
生成頁面時，請重新定義 <TD> 樣式標籤
css定義（待定)

7. 網站首頁head區代碼規範_ (是否由編輯來填)

註釋 <!— 日期與設計師姓名 —> *　是否需要
<!— 日期與修改者(編輯)姓名 —> *

網站簡介 <META NAME=”DESCRIPTION” CONTENT=”網站簡介”>

搜索關鍵字 <META NAME=”keywords” CONTENT=”關鍵字1,關鍵字2,關鍵字3″>

css規範 <LINK href=”style/style.css” mce_href=”style/style.css” rel=”stylesheet” type=”text/css”>

搜索機器人<META NAME=”robots” CONTENT=”">
　　　CONTENT的參數有all,none,index,noindex,follow,nofollow。默認是all。

js規範 <script language=”JavaScript” type=”text/JavaScript” src=”menu.js” mce_src=”menu.js”></script>

其他由ps or ir 自動生成

四. 注意事項

1. 編輯大於三個頁面的網站，請使用DW站點管理器；
2. 在生成頁面時，盡量把網頁的內容模塊化；
3. 在生成頁面時，要求使用已經存在的元素(圖片,Js,樣式)
4. 頁面的頭部及底部使用(ifarme)內嵌頁面

編者註：事實上，我覺得個人網站沒有必要這樣規範，遵循一般的命名規則即可。但對於團隊協作者，規範還是非常有必要的。
(責任編輯:admin)

無迴響

網頁佈局設計基礎

三月 22nd, 2005 — 網站製作, 網頁製作百寶箱

正如你現在所看到的一樣，網頁的佈局設計變得越來越重要。訪問者不願意再看到只注重內容的站點。雖然內容很重要，但只有當網頁佈局和網頁內容成功接合時，這種網頁或者說站點才是受人喜歡的。取任何一面你都無法留住太過「挑剔」的訪問者。　　一.網頁佈局的基本概念 　　最開始，網頁呈現在你面前的時侯，它就好像一張白紙，它需要你任意揮灑你的設計才思。在開始的時侯，你需要明白，雖然你能控制一切你所能控制的東西，但假如你知道什麼是一種約定俗成的標準或者說大多數訪問者的瀏覽習慣，那麼你可以在此基礎上加上自己的東西。你當然也可以創造出自己的設計方案，但如果你是初學者，那麼最好明白網頁佈局的基本概念。 　　
　　
1.頁面尺寸：　　由於頁面尺寸和顯示器大小及分辨率有關係，網頁的局限性就在於你無法突破顯示器的範圍，而且因為瀏覽器也將佔去不少空間，留下給你的頁面範圍變得越來越小。一般分辨率在800×600的情況下，頁面的顯示尺寸為：780×428個像素；分辨率在640×480的情況下，頁面的顯示尺寸為:620X311個像素；分辨率在1024X768的情況下，頁面的顯示尺寸為：1007×600。從以上數據可以看出，分辨率越高頁面尺寸越大。

　　瀏覽器的工具欄也是影響頁面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那麼當你顯示全部的工具欄時，和關閉全部工具欄時，頁面的尺寸是不一樣的。

　　在網頁設計過程中，向下拖動頁面是惟一給網頁增加更多內容(尺寸)的方法。但我想提醒大家除非你能肯定站點的內容能吸引大家拖動，否則不要讓訪問者拖動頁面超過三屏。如果需要在同一頁面顯示超過三屏的內容，那麼你最好能在上面做上頁面內部連接，方便訪問者瀏覽。

　　2.整體造型：

　　什麼是造型，造型就是創造出來的物體形象。這裡是指頁面的整體形象，這種形象應該是一個整體，圖形與文本的接合應該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對於頁面的造型，你可以充分運用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。

　　對於不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規則，你注意到很多ICP和政府網頁都是以矩形為整體造型；圓形帶表著柔和，團結，溫暖，安全等，許多時尚站點喜歡以圓形為頁面整體造型；三角形代表著力量，權威，牢固，侵略等，許多大型的商業站點為顯示它的權威性常以三角形為頁面整體造型；菱形代表著平衡，協調，公平，一些交友站點常運用菱形作為頁面整體造型。雖然不同形狀帶表著不同意義，但目前的網頁製作多數是接合多個圖形加以設計，在這其中某種圖形的構圖比例可能佔的多一些。

　　3.頁頭：

　　頁頭又可稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個站點的名字多數都顯示在頁眉裡。這樣，訪問者能很快知道這個站點是什麼內容。頁頭是整個頁面設計的關鍵，它將牽涉到下面的更多設計和整個頁面的協調性。頁頭常放置站點名字的圖片和公司標誌以及旗幟廣告。

　　4.文本：

　　文本在頁面中出現都數以行或者塊(段落)出現，它們的擺放位置決定者整個頁面佈局的可視性。在過去因為頁面製作技術的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起，文本已經可以按照自己的要求放置到頁面的任何位置。

　　5.頁腳：

　　頁腳和頁頭相呼應。頁頭是放置站點主題的地方，而頁腳是放置製作者或者公司信息的地方。你能看到，許多製作信息都是放置在頁腳的。

　　6.圖片

　　圖片和文本是網頁的兩大構成元素，卻一不可。如何處理好圖片和文本的位置成了整個頁面佈局的關鍵。而你的佈局思維也將體現在這裡。

　　7.多媒體

　　除了文本和圖片，還有聲音，動畫，視頻等等其它媒體。雖然它們不是經常能被利用到，但隨著動態網頁的興起，它們在網頁佈局上也將變得更重要。

　　二.網頁佈局的方法

　　網頁佈局的方法有兩種，第一種為紙上佈局；第二種為軟件佈局。下面分別加以介紹：

　　1.紙上佈局法

　　許多網頁製作者不喜歡先畫出頁面佈局的草圖，而是直接在網頁設計器裡邊設計佈局邊加內容。這種不打草稿的方法不能讓你設計出優秀的網頁來。所以在開始製作網頁時，要先在紙上畫出你頁面的佈局草圖來。

　　準備一若干張白紙和一隻鉛筆，你要設計一個時尚站點。

　　*尺寸選擇：

　　目前一般800X600的分辨率為約定俗成的瀏覽模式。所以為了照顧大多數訪問者，你頁面的尺寸以800X600的分辨率為準。

　　*造型的選擇：

　　先在白紙上畫出象徵瀏覽器窗口的矩形，這個矩形就是你佈局的範圍了。選擇一個形狀作為整個頁面的主題造型，我們選擇圓形，因為它代表者柔和，和時尚流行比較相稱，然後在矩形框架裡隨意畫出來，你可以試者在增加一些圓形或者其它形狀。這樣畫下來，你會發現很亂。其實，如果你一開始就想設計出一個完美的佈局來是比較困難的，而你要在這看似很亂的圖形中找出隱藏在其中的特別的造型出來。還要注意一點，你不要擔心你設計的佈局是否能夠實現。事實上，只要你能想到的佈局都能靠現今的HTML技術實現。

　　考慮到左邊向左凹的弧線，為了取得平衡我們在頁面右邊增加了一個矩形(也可以是一條線段)。

　　*增加頁頭：

　　.jpg是我們從.jpg和2.jpg得到的佈局造型，那麼我們該增加頁頭了。一般頁頭都是位於頁面頂部，所以我們為.jpg增加了一個頁頭，為了和左邊的弧線和右邊的矩形取得平衡，我們增加了一個矩形頁頭並讓頁頭相交與左邊的弧線。

　　*增加文本：

　　頁面的空白部分加別加入文本和圖形。因為在頁面右邊有矩形作為陪襯，所以文本放置在空白部分不會因為左邊的弧線而顯得不協調。

　　*增加圖片：

　　圖片是美化頁面和說明內容必須的媒體。在這裡把圖片加入到適當的地方。

　　經過以上的幾個步驟，一個時尚頁面的大概佈局就出現了。當然，它不是最後的結果，而是你以後製作時的重要參考依據。

2.軟件佈局法

　　如果你不喜歡用紙來畫出你的佈局意圖，那麼你還可以利用軟件來完成這些工作。這個軟件就是Photoshop。Photoshop所具有的對圖像的編輯功能用到設計網頁佈局上更顯得心應手。不像用紙來設計佈局，利用Photoshop可以方便的使用顏色，使用圖形，並且可以利用層的功能設計出用紙張無法實現的佈局意念。

CITK註：我本人傾向於使用前一種方法。後一種方法更適合專業的網頁設計（不是網頁製作）者。

　　三.網頁佈局的技術

　　1.層疊樣式表的應用

　　在新的HTML4.0標準中，CSS(層疊樣式表)被提出來，它能完全精確的定位文本和圖片。CSS對於初學者來說顯得有點複雜，但它的確是一個好的佈局方法。你曾經無法實現的想法利用CSS都能實現。目前在許多站點上，層疊樣式表的運用是一個站點優秀的體現。你可以在網上找到許多關於CSS的介紹和使用方法。

　　2.表格佈局

　　表格佈局好像已經成為一個標準，隨便瀏覽一個站點，它們一定是用表格佈局的。表格佈局的優勢在於它能對不同對像加以處理，而又不用擔心不同對像之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。表格佈局唯一的缺點是，當你用了過多表格時，頁面下載速度受到影響。對於表格佈局，你可以隨便找一個站點的首頁，然後保存為HTML文件，利用網頁編輯工具打開它(要所見即所得的軟件)，你會看到這個頁面是如何利用表格的。

　　3.框架佈局

　　不知道什麼原故，框架結構的頁面開始被許多人不喜歡，可能是因為它的兼容性。但從佈局上考慮，框架結構不失為一個好的佈局方法。它如同表格佈局一樣，把不同對像放置到不同頁面加以處理，因為框架可以取消邊框，所以一般來說不影響整體美觀。

我今天來介紹的佈局指南並不是全部的網頁佈局技術，從某種意義上來說，我想引導你在製作網頁的時侯，怎樣把圖片和文本放置的恰到好處，而且如何擁有一個跳越的設計思維。
(責任編輯:admin)

無迴響

淺談從菜鳥到准網頁設計師的快速成長過程

三月 10th, 2005 — 網站製作, 網頁製作百寶箱

筆者曾經是一個網頁設計的菜鳥，經過自己不斷的摸索和實踐，現在已經可以獨立製作一個完整的靜態站點，並且給學校的NN＞5個部門、院系和外面的公司做網站，雖然不是一個完全意義上的Web Designer（網頁設計師），但是完成一些要求不是很專業、不是十分完美的站點已經是小事兒了（嘿嘿，是不是有自吹自擂之嫌），自己心裡已經是小有成就感了，所以自封為準 Web Designer！

　　筆者自認為成長過程還算快，所以把本人的經歷向大家介紹一下，給那些有志於此的朋友們一些參考意見。

　　循序漸進學知識

　　先學一學HTML，找本自己能看懂的教材，瀏覽為主，不用記住所有的概念，只要記住使用原理就行了，這一階段，估計三天就夠了；然後用兩天時間學CSS，方法同上；進而再花些時間瞭解一下JavaScript。

　　然後就可以用記事本嘗試寫幾個網頁，記住這時千萬不要用那些可視化工具，比如FrontPage、Dreamweaver（那些以後再學）。

　　有一個提高自己「寫網頁」的捷徑，就是上各大網站，把網頁保存下來（什麼？你說你不會保存網頁？就是「文件→另存為」），然後打開保存下來的網頁，點擊右鍵→查看源文件，看看人家的網頁是怎麼寫的，然後模仿他們的寫法，不斷規範自己的代碼。嘿嘿，這個方法不錯吧。先好好模仿一下吧。

　　接下來該學一下Fireworks了。建議一開始就到網上找些實例教程，這些實例教程一般都介紹得很詳細，跟著它一步一步做下來，每學會一個實例就掌握了幾項操作，而且也有了自己的作品，很有成就感的，長期積累下來對自己的提高很有幫助。學Fireworks主要是學圖片處理，比如加一些效果，還有很重要的就是切圖，這對於初學者是很重要的。

　　這時還可以結合Dreamweaver進行學習，你就可以體會到Dreamweaver和Fireworks的無縫集成了。利用這些工具多做幾個網頁，你就可以達到一定水平了。

　　要是想讓你的網頁多一些炫目的效果，建議你學一下Flash，難度並不大，而且要是前面的JavaScript基礎打得好的話，學到Flash中ActionScript時，你會有一種似曾相識的感覺，因為這兩種語法幾乎是一模一樣的。

　　到這時，相信你就可以真正領會到「網頁三劍客」的威力了。

　　在實踐中不斷提高

　　要是每天能拿出兩個小時來學習，完成以上這些學習估計只要20天就差不多了。要是天賦高的話（比如說像我這樣的，呵呵)，那需要的時間就更少了。接下來該實習了，找個地方鍛煉一下自己，比如可以去一些公司干干兼職，或是給自己的單位設計一下主頁等。

　　最好是能進入一個正規的開發團隊，你就會學會如何以團隊合作的方式開發網站，特別是怎樣和程序組合作，把頁面與後台程序數據庫配合起來。可能你會擔心自己是新手，人家會嫌棄你，沒關係，只要努力去找，總會有機會的。

　　我特別感謝我們學校的學生在線網站給了我一個機會。有一天正趕上應聘，我拿著自己做的兩個Flash作品就去了，沒想到面試還通過了，於是我就這樣有了在專業開發團隊中實踐的機會，通過自己的不斷努力以及向高手的不斷提問，水平飛快提高，兩三個月後，就可以獨立完成一些站點了，當然只是靜態的。在此，我想指出，千萬不要不好意思，不會就問，高手們是很樂意回答你的，而且你能向他請教，這本來就是對他的一種肯定，他會很高興的，呵呵。

　　到此，你就基本可以稱作是一個「准Web Designer」了，不過要從根本上提高自己，最好去學學美術，這是當一個網頁設計師的基本功。

　　筆者剛開始做網頁純粹是自娛自樂，但在這個過程中，我逐漸開始深深喜歡上了這項工作。這個學習過程是人生的一筆寶貴財富，至少我是這麼認為的。
 
(責任編輯:admin)

無迴響

← Previous Entries

Next Entries →