編者注：設(shè)計技術(shù)的發(fā)展，帶來了網(wǎng)頁世界的繁榮。尤其在崇尚個性的今天，設(shè)計師們更是將頁面設(shè)計表現(xiàn)的淋漓盡致。我們欣喜的看到那些僵化的設(shè)計模式正在被逐個打破，網(wǎng)頁設(shè)計充滿了生機(jī)。但是，作為網(wǎng)頁設(shè)計師，不能一味的只追求個性的體現(xiàn)，還必須兼顧到用戶的習(xí)慣，在體現(xiàn)自己的風(fēng)格的同時，在功能上使用戶更加方便。
接下來我們會建議您如何從這些看似微不足道的細(xì)節(jié)著手，讓您的網(wǎng)頁貼近用戶，你會發(fā)現(xiàn)。設(shè)計一個更有人情味的頁面其實也不是那么困難……
如何改進(jìn)設(shè)計可用性的小技巧
◇ 縮略圖
縮略圖是對一個完整的圖片的概述。如何合理的制作所略圖，是否只需將原圖按比例縮小就行了呢？答案是否定的，問題的關(guān)鍵在于：通過這張圖片，你究竟想告訴用戶什么…… 不斷的裁剪和強(qiáng)調(diào)你的縮略圖所要表達(dá)的意思。展示你最想表達(dá)給用戶的那部分信息。這可以提高用戶信任度。
◇ 在這個上面點擊
您的首頁很酷，為了不破壞首頁的風(fēng)格，您將您的鏈接做的很隱蔽，但是，您不能奢望您的瀏覽者有足夠的時間和耐心去用鼠標(biāo)展開地毯式的搜索,那么，為什么不在一開始做好呢…… 當(dāng)它出現(xiàn)在網(wǎng)上時，我們得告訴用戶去做什么。在可點擊的圖片上放置"Click here"，可以告訴用戶，如果他們點擊這張圖片，就可以得到關(guān)于此方面信息的更多的內(nèi)容。 圖片上沒有任何信息表明這張圖帶有鏈接。因此，我們需要在上面添"Click Here"的字樣，告訴用戶這張圖片是可以點擊的。 我們可以在"Click Here"前面加一個小圓點，以區(qū)分于上面的文字。明確的告訴用戶這是一個鏈接或者給他們更多的信息，能提高可用性。
◇ 面包屑導(dǎo)航
如果您的站點有很多信息，或者一個站點有許多子目錄，您可能會需要面包屑式導(dǎo)航。它們可以讓用戶知道他們現(xiàn)在在哪里，并且可以返回到他們想要的層次上…… 面包屑導(dǎo)航通常位于下圖所示的位置。 用戶可以決定是否直接單擊Products跳轉(zhuǎn)到新產(chǎn)品目錄或者回到CD目錄，查看CD的標(biāo)題。他們僅需單擊一次就能到達(dá)他們所要去的地方。
◇ 小菜單的可用性
現(xiàn)在我們在網(wǎng)上會看見很多迷你的菜單，它們看上去都非?？?，但是請多體貼一下你的用戶，盡可能明顯的區(qū)分用戶當(dāng)前正點擊在哪個選項上……當(dāng)鼠標(biāo)經(jīng)過時，背景變成綠色并且文字顏色變白。使你非常清楚地知道哪個是你當(dāng)前正點到的選項，它更有利于網(wǎng)上瀏覽?？梢允褂肑avascript 的"OnMouse Over"事件來實現(xiàn)。 盡可能明顯的區(qū)分用戶當(dāng)前正點擊在哪個選項上。這也包括在圖片上加上"Alt"屬性。
◇ 鼠標(biāo)滑過
如果您的頁面上有一個鼠標(biāo)經(jīng)過事件，那么，為什么不把他做的更加明顯一點呢？您不會是想讓您的用戶自己去猜想那里是否存在著一個事件吧……如果把鼠標(biāo)經(jīng)過按鈕做得更加明顯，用戶會比較喜歡點擊。
◇ 菜單和指示標(biāo)記
為了增強(qiáng)HTML菜單的可用性，請嘗試下面的技巧…… 我們常會看到這樣的鏈接。它的問題是鏈接居中，并且沒有箭頭標(biāo)記。 把你的所有文本和鏈接對齊。這樣，頁面就看起來更有組織、更整齊。把你的鏈接和上面的LOGO對齊。看上去好多了，但是還有一個問題。我們需要箭頭標(biāo)記。沒有它們，就不太容易區(qū)分和文章中的其它鏈接。 用指示標(biāo)記是為了表明這里的每個鏈接都是一個單獨的項目。 如果由于某些原因，你不能使用指示標(biāo)記,那么你需要調(diào)整鏈接的行間距，這使用戶能夠容易的進(jìn)行區(qū)分。 子菜單標(biāo)記和主菜單標(biāo)記有所不同，鏈接顏色也有所不同。 子菜單的鏈接沒有主菜單鏈接重要，通過鏈接的顏色及標(biāo)記，使它們?nèi)菀椎乇粎^(qū)分開來。
◇ 標(biāo)注按鈕
在安排標(biāo)簽時，通常遵循長的單詞優(yōu)先。因為，如果你不這樣做的話，就會……
網(wǎng)頁制作技巧集錦
——作者： 不詳
◇如何在網(wǎng)頁中加入單個或幾個空格？
◆在源代碼中輸入 ，每個 之間請用空格分開。
◆在Dreamweaver中用<CTRL>+<SHIFT>+<SPACE>插入空格或任輸幾個字符，然后將其色彩設(shè)成背景的色彩！
◇如何在網(wǎng)頁中加入書簽，在頁面內(nèi)任意跳轉(zhuǎn)？
◆在源代碼中需要插入書簽的地方輸入<a name="top"></a>，在調(diào)用的地方輸入<a href="#top">Top</a>，其中的top是你設(shè)定的書簽名字。
◆在Dreamweaver中用菜單的「Insert」-「Name Anchor」命令插入書簽，調(diào)用時，在Link中輸入#top，top為書簽名。
◇如何在網(wǎng)頁中加入書簽，在多個頁面之間任意跳轉(zhuǎn)？
◆方法與上面類似，不過做鏈接時要在書簽名前加上網(wǎng)頁文件名，如：other.htm#top，這樣一來就會跳轉(zhuǎn)到other.htm頁面中的top書簽處。
◇將網(wǎng)頁加入收藏夾？
◆請使用如下代碼：（注意標(biāo)點符號）
< a href=''''#'''' onclick="window.external.addFavorite(''''http://www.haojw.om'''',''''【夢想天空】qiangwei.126.com 各種網(wǎng)頁工具教程DW、FLASH、FIREWORKS及CGI教學(xué)、聊天交友……'''')" target="_top">將本站加入收藏夾< /a>
◇如何去掉鏈接的下劃線？
◆在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼：
<style type="text/css"> <!--
a { text-decoration: none}
--> < /style>
◆在Dreamweaver中用「Text」-「Custom Style」-「Edit Style Sheet」-「New」-Redefine HTML Tag中選擇a，然后在decoration中選中none
◇如何將網(wǎng)頁定時關(guān)閉？
◆在源代碼中的<BODY>后面加入如下代碼：
< script LANGUAGE="JavaScript"> <!--
setTimeout(''''window.close();'''', 60000);
--> < /script>
在代碼中的60000表示1分鐘，它是以毫秒為單位的。
◇如何設(shè)置命令來關(guān)閉打開的窗口？
◆在源代碼中加入如下代碼：
< a href="/" onclick="javascript:window.close(); return false;">關(guān)閉窗口< /a>
◇如何制作電子郵件表單？
◆在<FORM>中輸入Action="youremail@XXX.XXX" ，提交采用POST方法。
◇如何自動加入最后修改日期？
◆在源代碼中的<BODY>…< /BODY>之間加入如下代碼：
< Script Language="JavaScript"><!--
document.write("Last Updated:"+document.lastModified);
-->< /Script>
◇如何在網(wǎng)頁中加入EMAIL鏈接并顯示預(yù)定的主題？
◆代碼：< a href="yourmail@xxx.xxx?Subject=你好">Send Mail< /a>
◇如何讓背景圖象不滾動？
◆代碼：<BODY Background="bg.gif" Bgproperties="fixed" >
◆在Dreamweaver中用「Text」-「Custom Style」-「Edit Style Sheet」-「New」-Redefine HTML Tag中選擇Body，然后在Background中的Attachment里選fixed
◇如何避免別人將你的網(wǎng)頁放入他的框架（FRAME）中？
◆在源代碼中的<HEAD>…< /HEAD>之間加入如下代碼：
<script language="javascript"><!--
if (self!=top){top.location=self.location;}
-->< /script>
◇如何在網(wǎng)頁中加入注釋？
◆代碼：< !-- 這是注釋 -->
◇如何定義網(wǎng)頁的關(guān)鍵字（KeyWords）？
◆格式如下：
< meta name="keywords" content="dreamweaver,flash,fireworks">
content中的即為關(guān)鍵字，用逗號隔開
◆在Dreamweaver中用「Insert」-「Head」-KeyWords命令
◇如何為不支持框架的瀏覽器指定內(nèi)容？
◆在源代碼中加入下面代碼：
< BODY><noframes>本網(wǎng)頁有框架結(jié)構(gòu)，請下載新的瀏覽器觀看< /noframes></ BODY>
◇如何使表格（TABLE）沒有邊框線？
◆將表格的邊框?qū)傩裕篵order="0"
◇如何隱藏狀態(tài)欄里出現(xiàn)的LINK信息？
◆請使用如下代碼：
< a href="http://www.haojw.om" onMouseOver="window.status=''''none'''';return true">夢想天空< /a>
◇如何為網(wǎng)頁設(shè)置背景音樂？
◆代碼：< EMBED src="music.mid" autostart="true" loop="2" width="80" height="30" >
src：音樂文件的路徑及文件名；
autostart：true為音樂文件上傳完后自動開始播放，默認(rèn)為false（否）
loop：true為無限次重播，false為不重播，某一具體值（整數(shù)）為重播多少次
volume：取值范圍為"0-100"，設(shè)置音量，默認(rèn)為系統(tǒng)本身的音量
starttime："分：秒"，設(shè)置歌曲開始播放的時間，如，starttime="00:10"，從第10開始播放
endtime： "分：秒"，設(shè)置歌曲結(jié)束播放的時間
width：控制面板的寬
height：控制面板的高
controls：控制面板的外觀
controls="console/smallconsole/playbutton/pausebutton/stopbutton/volumelever"
·console：正常大小的面板
·smallconsole：較小的面板
·playbutton：顯示播放按鈕
·pausebutton：顯示暫停按鈕
·stopbutton：顯示停止按鈕
·volumelever：顯示音量調(diào)節(jié)按鈕
hidden：為true時可以隱藏面板
◇如何定時載入另一個網(wǎng)頁內(nèi)容？
◆在源代碼中的<HEAD>…< /HEAD> 加入如下代碼：
< meta http-equiv="refresh" content="40;URL=http://www.haojw.com" >
40秒后將自動載入http://www.haojw.com所在的網(wǎng)頁
讓網(wǎng)頁里的提交按鈕變得更靚麗
——作者： 不詳
你是不是覺得自己的主頁不夠靚麗，想讓它有所改變呢？聽說過樣式表格嗎？就是CSS，它就是那個能讓你更為準(zhǔn)確地控制網(wǎng)頁的東東。讓我們先來看兩個例子：
1、把按鈕的背景由灰色變成黃色，下面是代碼：
〈form method="POST"〉
〈input type="button" value="按鈕" name="B1" style="background-color: rgb(255,255,0)"〉
〈/p〉
〈/form〉
“form”標(biāo)簽就是表單的標(biāo)簽，“type”就是說明按鈕的類型，這里說明按鈕是普通的命令按鈕。然后，請注意，重要的東西來了！ “style”說明這里采用了一個樣式表單，而“background-color”是用來聲明按鈕的背景顏色屬性的，后面的“rgb”則給了它的屬性值，在這里“(255,255,0)”表示是黃色。
2、把按鈕文字的顏色變成紅色，字體變成楷體，代碼如下：
〈form method="POST"〉
〈input type="button" value="按鈕" name="B1"
style="background-color:rgb(255,255,0); font-family:楷體_GB2312; color: rgb(255,0,0)"〉〈/p〉
〈/form〉
看一下是不是多了些什么東西？對了，多了兩個屬性：“font-family”和“color”，前一個是字體屬性，后一個是字體的顏色屬性，它們的值分別是：楷體_GB2312和rgb(255,0,0)，說明文字是紅色的楷體字，好了，通過這個例子來了解一下什么叫做樣式表單。
首先，什么叫樣式表單呢？如果你使用過Word就知道只需要設(shè)置一次版面配置和打印格式，那么在該文件內(nèi)所有的頁面都具有了相同的格式，而樣式表單起的也就是這個作用，在同一個網(wǎng)站只需要提供一份樣式表單，然后在所有頁引用它，那么整個網(wǎng)站都會有相同的格式。樣式表單一共有三種。
第一種是外部網(wǎng)頁樣式表單。它是一個以CSS為后綴名的文件，相當(dāng)于一個模板，設(shè)置好以后只需要在網(wǎng)頁內(nèi)部引用它，就能夠使引用的網(wǎng)頁具有相同的格式。
第二種是內(nèi)嵌式的網(wǎng)頁樣式表單，它一般在申明，它只對本網(wǎng)頁起作用，同時如果你已經(jīng)使用了外部樣式表單，那么它將被內(nèi)嵌式的網(wǎng)頁樣式表單屏蔽。
第三種叫做內(nèi)聯(lián)式樣式表單，用于一段文字，一個表格，或者是一幅圖形。在前面，我們用的就是這種樣式表單，請注意，它通常是接在一個我們比較熟悉的HTML標(biāo)簽之后，比如前文的“input”標(biāo)簽，以“style”開頭，后面跟著一些屬性和屬性值。并且借助它們來準(zhǔn)確地控制這個標(biāo)簽。屬性與屬性值之間以冒號隔開，屬性與屬性之間用分號隔開。
好了，有了以上的理論知識，我們再來聯(lián)系一下實際，下面我們再看一個比較復(fù)雜的例子：
〈form method="POST"〉
〈input type="button" value="按鈕" name="B1"
style="font-family: 隸書; font-size: 9pt; background-image: url
(’file:///D:/Inetpub/wwwroot/asp/www
boad/IMAGES/asp400.jpg’); border-left: medium ridge rgb(128,0,0); border-right: medium none rgb(128,0,128); border-top: medium none rgb(0,255,0); border-bottom: medium ridge rgb(255,0,0)"〉
〈/p〉
〈/form〉
其實，形式和我前面講的是一樣的，只不過多了幾種屬性而已，“font-family: 隸書;Font-size: 9pt;”用來說明按鈕文字是9PT大小的隸書，按鈕的背景是一幅圖畫，用了一個“background-image”屬性。接下去用了一個“border-left”屬性說明按鈕的左邊框是隆起的，邊框線是深紅色的，厚度為中等。其余的就可以以此類推了，分別是用來說明按鈕的右邊、上邊和底邊的。
桂公網(wǎng)安備45010502000253號
電子營業(yè)執(zhí)照
