| 首頁新聞 | 賽爾作品 | 圖像畫館 | 交流互動 | 賽爾個人 | 對外連結 |
| 魔族流放者 | 散文隨筆 | 教學文章 | 故事開發室 |

這裡不討論專業的網頁設計方法,也不提供完整教學,只是分享個人的看法和經驗談而已,內容會陸續增加

最後更新: 2007-04-02

分類選單

前置作業:給網頁設計新手的提點

先拿紙筆設計網站架構

作一個樹狀圖,把你的網站架構用一張紙畫一下,原則上按功能或屬性來分出幾個頁面,在從這幾個頁面往下發展,儘量不要超過三層。大致層次如下:

首頁--分類頁--內容頁
﹂ 分類頁--內容頁
﹂內容頁
……
﹂分類頁--內容頁
……

先想清楚製作這網站的主要訴求

看過很多沒有核心焦點的網站後,發現這一點真的很重要,設計網站除非是為了交作業、練習語法,否則製作一個公開網站,基本上要先有一個訴求,你這網站要帶給訪客什麼?這一點要先想清楚。

你想提供什麼內容?什麼功能?

一個網站內容最重要,儘可能有足夠的內容再動手製作,否則做起網頁來會有挫折感,因為作不出多少頁面就無法繼續前進。手邊內容不夠的話,先繼續收集吧,或邊作邊收集也可,不要讓你的網頁夭折於內容貧乏的困擾下。

你想吸引什麼樣的人來看?

這些人想要在你的網站裡得到什麼?這些人在哪裡?會從哪裡連結過來?會在這裡停留多久?有多少人?這些問題未必要急著回答,但要先有點概念比較好。

你是不是想要長期經營?

有沒有那份心,真的很重要。沒有想要持續經營的恆心,再多技巧和要訣都幫不上忙。

用資料夾和適當的檔案命名來管理網頁

將整個網頁的內容放在一個特定資料夾之下(例如"my_web"),方便管理。

將網頁按照功能、內容主題、或層次來命名,方便管理、編修、擴充。

利用子資料夾來管理分類和不同層次的頁面、檔案,才不會讓一堆東西擠在同一層。

將不同功能的物件放在資料夾裡統一管理,例如將所有裝飾圖片放在"pic"子資料夾裡。

花點時間學習HTML、CSS

這是基本功,請一定要花心思學一下,光依賴編輯軟體並不好,儘管功能強大。

話說,學習正規的語法可以教你明辨是非,非正規的語法少學為妙。

選擇一個一致性的基調

為你的網頁選擇一個套裝樣式,讓整個網站有一體的感覺。

用色不要太突兀,或者更精確的說法,不要配得太醜(畢竟突兀也是風格,但你要說醜也是風格,我就沒辦法了……)

回到頂端

常犯錯誤:網頁設計新手常作的一些傻事

避免濫用「小玩意」

例如跑馬燈、閃爍字、炫彩字體、彈出視窗、一些有的沒有的javascript特效……甚至 FLASH等等,儘量少用,最好別用,因為這些東西固然新奇好玩、可以吸引目光,但是容易厭膩,而且這些東西通常會延遲網站載入的速度、且妨礙視覺、讓人有一種「網站設計者喜歡玩些小玩意」的感覺,看多了會讓人感到煩。

有些網頁設計教學網站,會提供很多類似上述的東西,我簡單講,這些小玩意都是在「賣弄」、「搔首弄姿」,如果不能彰顯你的網站主題的話,都是華麗的垃圾,不要也罷。

避免濫用「菜市場素材」

所謂菜市場素材,就是隨處可見的網頁素材,例如到處去下載的網頁小圖檔、小動畫、布景主題等等的東西,這些東西固然方便,但也正因為方便,會讓訪客覺得你這網站就是找東西隨便拼拼貼貼出來的,沒有用心,也沒有個人特色,無法給訪客留下特殊的印象。而且很容易跟別的網站「撞衫」,感覺很不好。

避免過多的選項

單一個網頁選單的選項不要太多,一般五個選項是非常合適的,最多不要超過七個比較好。如果真的有很多子項目要讓訪客點選,那就設法做成樹枝狀層次吧,重點就是不要一口氣給訪客一大串的選項(然後有些選項裡面根本沒多少內容)。

補充一點,有些人喜歡把一些常見功能取上個人化的名稱,個人建議不要這樣,這樣會讓一些新訪客搞不清楚這些功能是什麼意思,還得一個一個嘗試,過一段時間之後又忘了(這一點和第一項的「小玩意」道理相似)。

少用「多媒體」

尤其不要在網頁裡夾帶自動播放的音樂或影片,檔案又大、又容易干擾瀏覽,如果真的很喜歡,建議放在一個分頁裡面,讓喜歡的訪客自行去點選瀏覽。

有些網站的背景音樂並不好聽,卻沒有設計關閉的按鈕,會讓人想要按關閉視窗按鈕。

不要擺上「施工中」的圖樣

既然還沒做好,就不要放上來給人點選。不然好歹放一個確定的開放日期(完工預定日),但,如果是一個月後,甚至一年後,那還是乾脆別放吧……

幾個關於訪客計數器的建議

不要預設太多位數,明明沒多少人來,卻還預留十幾位數字,零的位數比訪客數還長。

不要太大個,也不要佔據太大面積,大大的一串數字放在那裡很礙眼。

不要用太搶眼的數字圖和顏色,理由同上。

不要對數字灌水膨風,沒有意義。

不要在每個內頁都放計數器。

圖檔使用的建議

圖片的尺寸儘量先調整到網頁所需的尺寸即可,不要把一張1024x768的桌面大圖擺在網頁裡,卻設定尺寸為40x30,這樣做是把大圖擠在小範圍裡,既沒品質也浪費網站容量(大尺寸圖通常檔案體積也大)。另,尺寸設定記得保持原圖的長寬比例。

高品質圖片記得先壓縮,檔案大小儘量壓縮,一般而言,超過100kB的都稍嫌太大,但縮圖也不要過度犧牲品質。粗略的概念,小圖用gif格式比較省容量,大圖用jpg比較省容量。

少用大圖,所謂大圖就是大幅佔據版面的圖片檔,除非你的主要內容就是這個圖,否則儘量少用。

文字的建議

儘可能不要指定字形,尤其是非預設的字形,因為你的訪客不一定有你指定的字形,可能會造成無法正常顯示。

不要把字體弄得很小,除非你不想讓訪客看見內容。

文字與背景的對比,儘可能做到讓訪客讀起來舒服。

回到頂端

無障礙瀏覽:讓使用不同軟體環境的訪客都能順利瀏覽

常見的障礙網頁:建議瀏覽環境

請不要在首頁建議訪客使用特定瀏覽器、特定螢幕解析度瀏覽你的網頁。

儘可能盡你最大努力,讓使用各種瀏覽器的訪客都能瀏覽你的網頁,都能順利瀏覽到你精心設計的視覺效果。不要為了成全某些視覺效果而排擠了不同軟體的使用者,相信我,訪客的感受比較重要。

關於解析度的問題,目前的主流不外乎800x600、1024x768,或者有些人會用更大的解析度,設計網頁時,儘可能做到能相容於不同解析度的使用者,通常是配合較小的為主。當使用者抱怨版面突出螢幕範圍時,你不應該指責訪客為何不配合你這設計者內定的解析度,而是指責自己沒有做到體貼設計。

延伸閱讀:

網頁所用的檔案請用英文命名

有些瀏覽器的設定會無法連結內含中文字的連結,養成習慣把檔案(不論是htm或其他圖片、媒體、文件)都用英文命名。

避免產生多餘的捲軸

主要訴求是減少瀏覽者的操作,讓他們可以更輕鬆地瀏覽。

下拉捲軸通常無可避免,但是能免則免,因為捲軸會破壞版面,通常,下拉捲軸是用在展示長文章或內容量大的頁面為主,其他情況儘量少讓捲軸出現較佳。

水平捲軸,除非是刻意設計的,否則儘可能不要讓橫向捲軸出現。

無障礙網頁相關網站:

回到頂端

Creative Commons License 本區內容採用Creative Commons License方式授權
歡迎複製、散佈、引用,請註明出處,請勿修改

| 首頁新聞 | 賽爾作品 | 圖像畫館 | 交流互動 | 賽爾個人 | 對外連結 |