|
|
|---|
|
壹、報導前言： 您聽過 [上山容易下山難] 這句話吧？其實製作網站過程也是蠻辛苦的，好比登山下山一樣。 登高山前您可能要先養好體力與準備一些裝備，製作網也是一樣，您必需先做好架構規劃及準備好資料。 製作過程雖然長久、辛苦，但都是能掌控整個範圍，也能隨心所欲、天馬行空，任您自由發揮。 可是以後的網站維護呢？十頁以內都還算好，如果超過 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 ，但檔案名稱不能跟換喔。 這種做法大都用於網站標題、底部網站資訊、固定聯絡資料等情況，假設您的電話變更，只要修改這張圖檔就可以了。 ⊕要怎麼學習或使用 HTML 圖片標籤？有興趣讀者可到我的教學網站，進一步學習或到 議題討論版 發表您的看法。 |
|
陸、用打包網頁元件 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 本書的內容還多，所以工程非常浩大，整理相當費時，敬請耐心等候！ ⊕原參本站加教學會員，在我全部完工時，還會免費再贈送您一份最完整的光碟片，特此說明。 |
|
玖、本站會員注意事項： ⊕由於免費 PcHome 空間及速度有限，所有檔案資料無法提供網友直接下載，請見諒。 為利網友快速取得本報導相關檔案等資料，歡迎到 網頁研習室 網站進一步取得完整教材。 您也可以加入我們的 教學會員 或 免費索取教材 ，直接由教材 CD 片內取得安裝。 本報導所有檔案均存放於 CD:/study/maillist3/skill/06/ 目錄內。 ⊕歡迎大家前往最新完工的網頁教學 議題討論版 ，發表您的看法或建議，讓彼此更能互動受惠。 |
|
拾、結論與建議： ⊕本報每篇報導都花上很多時間搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。 ⊕本電子報 第三階段 報導資料，將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。 ⊕強烈建議您【學會 HTML 語法】，她真的簡單易學，懂了她您就能駕馭她，將【所見即所得】軟體當做輔助工具吧。 ⊕為因應網友要求，本報自即日起全面改為 索取教材資料 方式 ，繼續提供及服務有此需求網友。 ⊕本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的兩套光碟片，則是我們的誠意而已。 ⊕本報導內容或資料，因限人力、時間，非 索取教材資料包含線上指導 網友，不接受任何疑惑解答，敬請見諒。 ⊕本報導 非會員 可免費訂閱及享用我的電子報報導成果，而 會員 則可以進一步取得所有資料與線上指導。 ☆本站所有報導資料，歡迎網友免費加入鏈結，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。 |
|
第三階段 96.05.30. 發行第 35 期 更多 精彩報導 文章 |
|
| © 網頁研習室【電子報】李文能 主編 © |