如何準備與管理製作網站相關資料─智邦公益電子報─台灣最大公益電子報發行中心

第三階段【網頁製作系列報導】電子報【網站製作經驗】

網站製作經驗

第七篇
如何準備與管理製作網站相關資料

最新消息：網頁研習室網頁製作教材，已於 97 年 1 月 23 日全部改版完畢！ Go

壹、開始之前：
準備與管理製作網站相關資料，看起來並不是甚麼大問題，但是您若能事先準備好，做起來就會輕鬆多了。
製作網站不外不乎需要相當多的架構模組、選單樣式、網頁色系、圖案素材、互動程式及網站題材等資料。
網站題材資料大都由業者(客戶)提出，您只要指導客戶如何配合提供與討論內容安排，大致上就沒問題了。
但是如何將這些網站題材資料，做好規劃及整合出一個客戶想要的網站需求、模式、功能等需要一些技巧。
如果您已事先有系統的做好蒐集資料及良好的存放管理，在此規劃及整合過程中，一定可以省去很多麻煩。
本次報導系針對未來想製作網站或從事網站製作者，提供一些個人製作經驗，讓您更有效率做好這件工作。
以下就介紹幾項我個人準備與管理網站製作的實務經驗與一些技巧，給您參考吧！
注意：
本站提供之任何軟體其版權(著作權)均為原作者所有，我只是為了方便您使用先下載給您，部份未測試使用過。
每個軟體資料夾內，均提供詳細資料來源或使用介紹(url.txt)，不要忘記去看看喔。

貳、準備製作網站相關資料：
俗話說：萬事起頭難、好的開始是成功的一半，所以首先做好一切的準備工作，就能為您省下寶貴的時間。
網站內容不可能無中生有，大約 70 % 左右的資料需要先(客戶)準備好，因為網站內容才是您主要的展示精華。
製作網站您要準備那些資料呢？如何開始準備？要如何準備？有那些技巧呢？
架構模組：您打算如果配置這個網站？首頁如何設計？內頁採單一網頁或分割視窗？本文使用何種內框架？
選單樣式：網站選單是整個運作是否順暢的靈魂，選單樣式幾百種，要使用那一種比較適合這個網站？
網頁色系：網站的色系是主宰這個網站視覺的成敗關鑑，您要如何搭配？如果您不是美工出身的？該怎麼辦？
圖案素材：底圖、配圖、小圖示、分隔線等，每樣都要自己設計嗎？如果能套用或修改現成的是不是很方便？
互動程式：不會設計計次器、留言版、討論版、寄信表單、資料庫等互動程式，您該怎麼辦？
特殊美工：網站要吸引人，會動的 Flash 、 GIF 或 3D 動畫、 Java、JavaScript 客服端程式確實少不了。
以上這些技巧或工具我們會在後面，盡可能的指導您如何取得與管理運用。
所以首先我們先來討論客戶(或自己)要提供(準備)的網站題材資料。

參、如何準備網站(要求客戶配合提供)題材資料：
準備各種資料應以電子檔為主，如產品照片、商品單價、內容文字、公司商標..等等，並盡可能分類並集中保管好。
如果沒有電子檔，此時您必須要擁有數位相機、掃瞄設備、圖像處理軟體、快速的文字輸入功力及使用技巧。
將期望的網站模式、選單樣式、網頁色系、特殊功能、應用技巧等，想到就先用紙筆繪製或寫下來。
養成參考別人的網站、粹取別人的特色、蒐集網路上的各種免費資源，對您絕對很有幫助的。
您最好有管理妥當與足夠的材料庫可用，這樣才能提供您在構建的過程中隨時可搭配使用。
網站最基本的資料應包括：網站網址與名稱、聯絡資訊(含稱呼、地址、信箱、電話等)。
所有文字檔建議先使用 Word 或 Notepad 整理妥當，使用時再複製到編輯器即可。
如果您的美工或互動程式不是很強，這個部份平時就應準備好這些配合人士。

肆、架構模組與選單樣式之準備：
架構模組之準備：不論您使用任何網頁編輯器，您都應該懂得如何使用分割視窗，其中最基本的 HTML 語法標籤您不能不知道。
單頁的網站不易維護及變更選單，除非您使用很強大的網頁編輯器或以程式代替，適合 10 頁以內的網站採用。
採用分割視窗網頁最大的好處，可以隨時變更或增加選單，但對整體的內視窗框不太好搭配，適合 10 頁以上的網站。
⊕網頁架構主要區分大致可分為：網站標題列、選單(瀏覽)列、主要內容列、次要內容(或配圖)列、信息標示列 Go。
這個部份您可以參考第三篇 HTML 教學 - 第八節分割視窗語法教學及第一期電子報 - 網頁各式模組。
版面決定後，請先模擬安排選單擺放位置，做最妥善的調整，盡量讓每一頁面都能適用與統一。
⊕無障礙網頁暨雙語網頁推行計劃，為修平技術學院電算中心系統組發展組 - 蔡京甫編輯。
⊕這裡我提供幾個不錯的架構模組網站或工具給您。

選單樣式之準備：
網站的選單是整個運作是否順暢的靈魂，有千百種做法，平時您就應該準備好這些資料，以免要用時找的很辛苦。
簡單的說：選單 (Menu) 就是網站的大綱或細項，就像菜單一樣，讓客戶用來點選用的，選用非常重要。
選單的製作方式可為純文字、圖檔、CSS、Dhtml、Java、JavaScript、Flash、多種語法組合等等。
選單的分類可為為純文字、圖檔、動態、層疊、樹狀、下拉、彈出、浮動、影像地圖、Flash 等等。
主選單要簡明易於瞭解，次選單最好不要超過 3 層，每組選單使用文字亦不要超過 5 個字元。
一般選單會放置在瀏覽器的上、左、下方，其實放在最右邊是最理想的點選移動點。
⊕這裡我提供幾個網路上不錯的選單網站或工具給您。
⊕本站蒐集近百個各式選單給您參考選用。

伍、網頁色系之準備：
網站的色系是主宰這個網站視覺的成敗關鑑，您要如何搭配？如果您不是美工出身的？該怎麼辦？
去買一本網頁色彩的書來看是個不錯的選擇，如果您沒有美工的天份，學起來會有點辛苦的。
⊕如果您不想買書，這裡有一篇網頁配色與美學觀念，值得您好好看一下。
網頁配色本身就是一門高深的學問，想在網頁上設計出一個色彩調性和屬性都屬上乘的網站，確實不易。
網頁配色一直是決定整個網站風格的重要關鍵之一，也是網頁設計師們最為頭痛的問題。
其實網路上也有不錯的色彩調配工具網站，可以讓您與客戶很容易溝通或做出不錯的搭配選擇。
好好善用許多免費的網頁調色盤工具，您也能很輕鬆地讓網站散發更為出色的魅力和吸引力！
各個免費網頁調色盤工具都具備有一定的配色輔助水準，端視我們個人的使用習慣而有不同的效果。
⊕這裡我提供 20 幾個不錯的免費輔助配色網頁調色盤工具網站給您參考。

網頁安全色：
網頁安全色 (Web Safe Colors) ，這是在 90 年代時 Netscape 公司選定的最低限度必要色彩，方便我們在使用該公司所開發的瀏覽器 Navigator 瀏覽網頁時所能呈現的色彩，此舉免除了使用者端的電腦環境因為有所限制而無法表達網頁設計的理念傳達問題，所以網頁設計師們無論是在文字、圖片、背景等顏色的運用上，都必須在這 216 色的範圍內選用。
⊕這裡我提供幾個不錯的免費色彩相關工具或網站給您參考。

陸、圖案素材與特殊美工之準備：
圖案素材之準備：
網頁中必須使用到大量的底圖、配圖、小圖示、分隔線等，如果每樣都要自己設計，固然比較好，但可能要花許多時間。
事實上網路有許多免費的資源可以使用，這些小東西比較不涉及版權問題，適當的套用或修改現成的圖檔應該更方便許多。
⊕我專為初學者蒐集的 5 Kb 以下網頁專用圖窟，細分 10 大類 417 個資料夾，計 14,908 個圖檔，值得保存。
⊕在此提供網路上可以找到的一些免費圖檔網站給您參考選用 Go。

特殊美工之準備：
網站要吸引人，會動的 Flash 、 GIF 或 3D 動畫、 Java、JavaScript 客服端程式可能少不了。
⊕在此提供網路上可以找到的一些免費特殊美工網站給您參考選用。

柒、互動程式之準備：
網站少了互動程式感覺就差很多，訪客無法與您直接對話，您也不能順利接到網友來信或留言，這些功能似乎也不能缺少。
⊕學習程式語言不像靜態的 HTML，除了興趣之外您還要一點點天份，網站又不能沒有它，那麼您該怎麼辦 Go？
常見互動程式如：計次器、留言版、討論版、寄信表單、購物車、發佈最新消息、會員系統等各種資料庫互動程式。
這些程式當然是最好能自己依網站客戶需求規劃設計製作，但萬一如果您沒有時間或學不來，其實也不用耽心。
您可以使用免費資源(缺點可能有廣告、無法修改、不穩定、速度比較慢)。
或租用現有的資源(優點是便宜、不用花時間學、效果好)。
⊕以下我就介紹幾個免費互動程式資源網站給您試試，希望能部份協助您解決這方面的困難。

捌、管理製作網站相關資料：
您自己可能已經找到許多網路上的資源(包括網址或各式檔案)，但是否於每次要用時卻一直找不到或忘記存放的位置呢。
徹底做好資料保存與管理是製作網站首要工作，讓我告訴您一些個人的經驗心得與提供不錯工具，希望對您有所助益。
前面提供您一些蒐集管道，從現在就要開使養成蒐集整理習慣，記得要分類存放到不同最愛目錄或專用目錄內。
譬如：建立 image 存放圖檔類、data 存放資料檔類、download 存放下載檔類、tools 存放工具檔類等。
安裝好的軟體應該在桌面建立捷徑，並以專用的資料夾來存放這些捷徑，以便要使用時能利快速取得。
儲存圖片或檔案愈來愈多時，重複性提高許多，適時應找出電腦上重複的檔案，做好分類管理。
瀏覽器我的最愛書籤時間久了，很有可能就成了一堆死連結，應經常檢查書籤是否有效。
檔案或資料夾等，養成使用英文小寫代替中文習慣，此時中翻英的工具不能缺少。
適時檢查電腦內很少使用的軟體，每半年做個檢討，將不需要的軟體移除掉。
經過一段時間，磁碟也應該重新整理一下，以免拖慢您的程式執行速度。
在磁碟重新整理之前，建議您最好來個不要檔案大掃除。
最後安全防護不能少，裝個防毒軟體是絕對必要的。
⊕提供 10 個有效的免費管理電腦工具給您。

注意：您一定要找出時間來完成這個工作，因為這是您製作網站的資料庫。

玖、本站會員注意事項：
以上⊕詳細資料，請參考網頁研習室專屬指導作業教材，第三篇 HTML 教學 - 文字與顏色或第四篇強化內容各節詳細介紹。
注意：本站提供之任何軟體、網站其版權(著作權)均為原作者所有，為了方便您使用略做整理，不含於教材費用內。
為利網友快速取得本報導相關檔案等資料，歡迎到網頁研習室網站進一步取得完整教材。
您也可以加入我們的教學會員或免費索取教材，直接由教材 CD 片內取得安裝。
本報導所有檔案(含以上介紹的軟體)均存放於 CD:/study/04/03/ 相關目錄內。
歡迎大家前往最新完工的網頁教學議題討論版，發表您的看法或建議，讓彼此更能互動受惠。
⊕歡迎大家前往最新完工的網頁教學議題討論版，發表您的看法或建議，讓彼此更能互動受惠。

拾、結論與建議：
⊕本電子報每篇報導至少花了 4 天時間編輯與修改，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
⊕本電子報第三階段報導資料，將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎繼續訂閱。
⊕強烈建議您【學會 HTML 語法】，她真的簡單易學，懂了她您就能駕馭她，將【所見即所得】軟體當做輔助工具吧。
⊕一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
⊕為因應網友要求，本報自即日起全面改為索取教材資料方式，繼續提供及服務有此需求網友。
⊕本報導屬於完全免費性質，索取教材資料屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
⊕本報導內容或資料，因限人力、時間，非索取教材資料包含線上指導網友，不接受任何疑惑解答，敬請見諒。
⊕對本篇有任何問題，歡迎大家前往網頁教學議題討論版，發表您的看法或建議，讓彼此更能互動受惠。
☆本報導非會員可免費訂閱及享用我的電子報報導成果，而會員則可以進一步取得所有資料與線上指導。
☆本站所有報導資料，歡迎網友免費加入鏈結，但請保留文章完整，並註明此引用來源，謝謝您的支持與配合。

第三階段 97.01.31. 發行第 43 期更多精彩報導文章