網站製作經驗

第六篇
如何能提高效率做好網站維護工作

適合程度： 初學者 一般程度 進階者 以上均宜
壹、報導前言：
您聽過 [上山容易下山難] 這句話吧？其實製作網站過程也是蠻辛苦的，好比登山下山一樣。
登高山前您可能要先養好體力與準備一些裝備，製作網也是一樣，您必需先做好架構規劃及準備好資料。
製作過程雖然長久、辛苦，但都是能掌控整個範圍，也能隨心所欲、天馬行空，任您自由發揮。
可是以後的網站維護呢？十頁以內都還算好，如果超過 20 頁以上或有龐大一致性的資料庫怎麼辦？
如果您使用的是有後台管理程式，或許會好處理些；如果您是用記事本或一般編輯器，麻煩就來了。
如果您是公司網站的網管人員，需要多人共同經營與維護一個網站時，前後如何銜接？彼此如何有默契？
所以製作網站要懂的運用技巧與正確製作觀念，下山(維護)時才不會弄的比上山(製作)還辛苦喔。
就算使用 Dreamweaver 功能強大的網頁編輯器，如果您沒有正確的網頁編輯觀念，維護上還是一樣有許多問題。
網站維護不外就是修改、刪除及增加內容或圖文資料，想想看使用那些方式，可以做一個動作就全部都改變？
♁本次報導系針對初學者或稍有網頁基礎者，歡迎網路高手，也能到 議題討論版 發表您的看法，讓更多網友受惠。
廢話少說，以下就介紹幾種我個人網站製作的經驗，給您參考吧！

貳、不要忘記使用註解標籤：
在 HTML 語法中有個忽略 (Ignore Code) 標籤，<!-- ??? -->，簡稱註解，這是一個很不錯的標籤。
我發現很多人知到它，但都不喜歡使用它？其實許多程式語言都有這種用法，您就應該明白它的重要性了。
CGI   的 # 文字敘述、JavaScript   的 // 文字敘述、VB 或 ASP   的 ' 文字敘述、CSS 或 PHP   的 /* 文字敘述 */ 。
不要以為網站是自己製作的，幹嘛還要加上註解？多此一舉？浪費時間？增加自己工作量？
這一篇報導強調的不是製作一段語法或一個網頁，就如前言所述：超過 20 頁以上或有龐大一致性的資料庫狀況。
就算僅單獨製作一頁來說，也是有其必要的，我教學生製作網頁或幫人製作表單程式，就經常使用這個技巧。
譬如：這一段到那一段是做甚麼用的？您套用修改時要注意甚麼？使用的人看到就會很明白，不是嗎？
如果您使用的是多重包覆表格或數十列位的資料格表格欄位，加入這個註解標籤，絕對有利您的製作與維護工作。
註解標籤另一個最大好處是，給接手製作者的留言，也是協助提醒您幾年後，可能忘記當初製作的構想。
譬如：網頁製作者做好架構或外框，可能要交給美工或程式人員，接續後面的工作，有它一切就搞定了。
重點：請記住！忽略 (Ignore Code) 標籤，<!-- ??? -->，絕對是您養成網站維護的第一個好習慣。
♁至於忽略 (Ignore Code) 標籤，<!-- ??? -->，要怎麼使用？有興趣讀者可到我的 教學網站，進一步學習。
以下的範例，就要麻煩您使用檢視原始碼查看，我在重要或關鍵的地方，都會用註解標籤詳細告訴您。

參、善用外部呼叫 CSS 標籤設定：
CSS 全名串接樣式表 (Cascading Style Sheet)，於 1996 年由 W3C 制定，主要是彌補 HTML 天生不夠嚴謹的問題。
CSS 的特色及優點，共有四項：
一、語法簡潔、撰寫容易，可精確控制版面位置、網頁配色、字型大小..等等，效果上的更多變化。
二、加快網頁維護速度，減少許多修改時間，因為同一個 CSS 檔可共多個不同頁面使用。
三、結構與格式分離，這是它最主要優點，只要變更這個 CSS 檔案，即可同步完成整個網站的原有設定。
四、符合 W3C 制定標準，支援多數平台及瀏覽器顯示，而且功能還一直在增加中。
依上所述，我以同一個表格做兩個簡單範例，請相互比較看看並用檢視原始碼查看內部說明，您就會更明白了。
第一個表格： css1.htm (css1.css)
在 css1.htm 裡您看不到文字內容，請雙擊 css1.css 後開啟檔案執行類型選記事本打開 css1.css 查看便知。
第二個表格： css2.htm (css2.css)
在 css2.htm 裡您看不到文字內容，請雙擊 css2.css 後開啟檔案執行類型選記事本打開 css2.css 查看便知。
重點：<Body> 與 </Body> 內的 HTML 標籤，完全一樣，只能變更 CSS 檔案，讓它同步完成整個網站[文字或底色]等設定。
請注意這兩個表格標題的底圖、文字顏色及各欄位的底色與文字大小、顏色、形狀等改變。
♁至於怎麼學習或使用外部呼叫 CSS 標籤設定？有興趣讀者可到我的教學網站，進一步學習或到 議題討論版 發表您的看法。

肆、發揮 JavaScript 程式嵌入宣告功能：
JavaScript 是由 Netscape Communication 與 Sun Microsystem 兩家公司所共同開發網頁瀏覽器專用的 Script 語言。
JavaScript 是一個 Object-Based (以物件為基礎)的 Scripting Language (腳本語言)，與 Java 之間並沒有什麼直接關連。
JavaScript 隨著網頁下載到電腦中，並經過瀏覽器上的 Runtime Engine 直譯後，然後跟 HTML 標籤結合在一起做出特效來。
JavaScript 的撰寫在不同瀏覽器上的表現會有些許差異，一般而言 IE 對於錯誤的程式碼容忍度較高，Mozilla 則較為嚴謹。
對於常用的 JavaScript Code ，我們可以將之獨立成一個 *.js 檔案，以便在不同的網頁程式中利用它。
依上所述，我做兩個簡單範例，請相互比較看看並用檢視原始碼查看內部說明，您就明白了。
文字型 JavaScript 程式： js1.htm (contact1.js)
在 js1.htm 裡您看不到文字內容，請雙擊 contact1.js 後開啟檔案執行類型選記事本打開 contact1.js 查看便知。
圖片型 JavaScript 程式： js2.htm (contact2.js)
在 js2.htm 裡您看不到文字內容，請雙擊 contact2.js 後開啟檔案執行類型選記事本打開 contact2.js 查看便知。
重點：<Body> 與 </Body> 內的 HTML 標籤，完全一樣，只能變更 *.js 檔案，讓它同步完成整個網站[文字或內容]等變更。
♁要怎麼學習或使用 JavaScript 程式嵌入宣告功能？有興趣讀者可到我的教學網站，進一步學習或到 議題討論版 發表您的看法。

伍、用圖片或 Flash 代替文字：
在 HTML 標籤的圖片顯示語法，很簡單：<Img Src="呼叫外部圖檔" Width="寬度" Height="高度" Border="0">。
大家都很習慣的使用圖片標籤用法，但確很少人將它拿來做網站維護的好幫手，技巧與方法同上面所述，道理是一樣的。
一般我們都是這樣介紹 HTML 圖片標籤：<Img Src="路徑/圖檔" Width="寬度" Height="高度" Border="0">。
其實 Src="路徑/圖檔"，就等於 Src="呼叫外部圖檔"，既然可呼叫外部圖檔，就可以只要修改這個外部圖檔，而替換原來圖檔了。
凡可以呼叫外部檔案的語法或程式，如： Flash 的 <param name="movie" value="呼叫外部檔案">，都可以像範例這樣運用。
依上所述，我做一頁放兩個簡單範例，請相互比較看看並用檢視原始碼查看內部說明，您就明白了。
上下兩張不一樣的圖檔： pics.htm (contact1.jpg & contact2.jpg)
重點：圖片的 HTML 標籤是一個不變的內部語法，但 Src="外部呼叫圖檔"，卻是一個可替代變數，我們就是運用這個特色。
您只要將 contact1.jpg 檔案內容換成 contact2.jpg ，但檔案名稱不能跟換喔。
這種做法大都用於網站標題、底部網站資訊、固定聯絡資料等情況，假設您的電話變更，只要修改這張圖檔就可以了。

陸、用打包網頁元件 DIV + CSS 標籤代替 HTML 網頁 Table 表格標籤：
我們都知道 HTML 標籤的 Table 表格是網頁排版的最佳利器，其實也沒有甚麼缺點，只是不能達到同步更新功能而已。
如果您注意觀察，許多網站都已經在使用 DIV + CSS 來進行網頁排版設計，這就是為了讓網站內容結構更明顯及容易維護。
先來簡單認識 <DIV> 標籤：
被 <DIV> 標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物(元)件。
<DIV> 或 <SPAN> 標籤都具有打包物件功能，但這裡只能使用 <DIV> 。
被 <DIV> 包住的網頁元件會變成一個[區塊物件]，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
被 <SPAN> 包住的物件則可以和其他物件放在一起，不會斷行，也不會自成一塊。
這個 <DIV> 與 <SPAN> 標籤在 DHTML (動態 HTML )中，是非常重要標籤，因為要某樣讓東西能動起，就必需將它定義明確。
因此 DIV + CSS 已經逐漸成為未來網頁布局趨勢，是網頁設計和製作人員必需進一步學習的技能。
依上所述，我做五個簡單範例，請相互比較看看並用檢視原始碼查看怎麼製作的，您就會慢慢明白了。
DIV + CSS 浮動參欄： csstable.htm 您只要修改 csstable.css 檔，就能變更所有網頁 <Body> 內的樣式，這樣就容易多了。
比較複雜的 DIV + CSS 浮動多欄： csstable1.htm 您只要修改 csstable1.css 檔 。
一個 DIV + CSS 免費樣本： csstable2.htm 請用檢視原始碼查看及可。
移除 DIV + CSS 設定結果： csstable3.htm 僅供比對瞭解差別地方。
改用 JavaScript 嵌入功能： csstable4.htm 您只要修改 csstable.css 及 csstable42.js 檔 。
重點：使用打包網頁元件 DIV + CSS 標籤，代替 HTML 網頁 Table 表格，讓網站更易維護管理。
這種功能大都使用於網站架構與排版等情況，萬一您的架構想變更時，只要修改 CSS 檔就可以了。
♁怎麼學習或使用 CSS 標籤？有興趣讀者可到我的教學網站，進一步學習或到 議題討論版 發表您的看法。
一個使用 CSS 代替表格的 樣本網站 ，給您參考 (注意：大部份是要付費的喔)
這是首屆使用 CSS 開發 網頁的世界大賽 （The first CSS World Awards）完成作品。
全部都是使用打包網頁元件 DIV + CSS 標籤代替網頁 Table 表格製作出來的，值得您去參觀喔。

柒、其他應用小技巧：
就如前面所述，凡可以達到呼叫外部檔案的語法或程式，大多可以像所舉的範例這樣運用，除此您還想到了甚麼？
您想道嗎？將選單固定在分割視窗某一邊，雖不能全部同步更新，但也能讓您比較容易維護選單的變更。
如果您不喜歡使用分割視窗(整頁型)網站，也可以改用內嵌框 IFrame 標籤或 JavaScript 程式來做選單，情況與上面一樣。
我的 網頁研習室 選單，就是採用 Flash + JavaScript 程式來做的，如需增減選項時，在維護上就方便很多了。
當然也不是所有的呼叫外部檔案語法或程式，都可以拿來全面套用，如：分割視窗或內嵌框架 IFrame 標籤都只能改自己那一頁。
但是，如果您已熟悉這些標籤或程式用法，其實以上技巧還是可以有更靈活變化會運用的。
例如：上列中 JavaScript 程式嵌入宣告功能，就可以改用圖片來取代文字，也是可以同步完成整個網站[文字或內容]等變更。
在修改網頁的過程中，請多加利用各種編輯內的搜尋、取代功能，這也能提高工作效率。

捌、一個好消先預告給您知道：
我正在全力趕工的全新、最完整的 HTML 標籤教學網站，預定 96 年 6 ~ 7 月底與大家見面！
這篇資料原為本站教學或資料會員專屬教材，為嘉惠電子報讀者，特地開放並完全免費給您瀏覽與學習。
因為本資料比您去買 3 本書的內容還多，所以工程非常浩大，整理相當費時，敬請耐心等候！
♁原參本站加教學會員，在我全部完工時，還會免費再贈送您一份最完整的光碟片，特此說明。

玖、本站會員注意事項：
更多本報導相關參考資料，歡迎到 網頁研習室 HTML 取得進一步學習。
您也可以加入我們的 教學會員 或 免費索取教材 ，直接由教材 CD 片內取得安裝。
已付費會員可於 CD:/study/maillist3/skill/06/ 目錄內完整取得這份資料。

拾、結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。