毛慶禎 |
|
輔仁大學圖書資訊學系 |
2001/03/02 |
製作網頁的過程, 大體需要這幾個步驟:
網頁的目標, 先想好建立該網頁的目標: 繳作業、做生意、推銷自己、驗收學習的成果; 目標明朗後, 一切好談。
預期的讀者, 有了目標後, 訪客的層級與規模就很明確了。
選定編輯器, 總不致於用記事本撰寫網頁吧! 每個標籤都自己敲進去, 不僅虐待自己, 而且容易出錯。免費的網頁編輯器到處都有, 附贈的網頁編輯器也不少, 最喜歡的就是最好的。
設計藍圖, 決定網頁的內容以什麼方式呈現。
編製內容, 把內容放進來, 加入標籤。
測試, 確定編碼的完整, 在客戶端的瀏覽器裡讀取硬碟裡的網頁檔案。
出版, 以檔案傳輸協定或其他方式, 把網頁檔案上傳在網際網路服務商給定的次目錄裡, 或者自己架設網頁伺服器。
為了有效的溝通, 先把網頁的目標界定清楚, 以學生的立場來說, 他的網頁有幾個用途:
結交朋友, 把自己的興趣喜好, 以及電子郵件信箱留在網頁上, 藉以招徠趣味相投的朋友。
宣揚理念, 對社會或政治議題有特別的感觸, 網頁是一個發抒想法的好地方。
蒐集連結, 針對特定的主題, 把相關的資源全部連結在一起, 也算是對網際網路的回饋。
社團招生, 把社團的成果與活動, 在網頁上公告, 免除保存紙本資訊的不便。
公開履歷, 把個人的履歷放在網路上, 隨時隨地都可以讀取其內容。
雖然可以多給幾個目標, 但是單一的目標最容易規畫, 最好的網頁祗有一個目標, 目標眾多或不明確的網頁, 很難做得好。
建立網頁之前, 需先向放置網頁伺服器的學校或網路服務商詢問使用規約(AUP), 確定網頁的宗旨目標與內容, 符合該環境的要求。以學校來說, 商業性的網頁就不符合其使用規約的要求。
目標界定清楚後, 讀者就呼之欲出, 預期的讀者影響網頁的內容、撰寫風格及呈現方式。給小朋友看的網頁文字與圖片, 千萬不要讓未來的雇主看到。
有多種編輯網頁的方式, 應視當時的環境, 選取最適合的編輯器:
視窗作業系統的記事本是一種文字編輯器, 可以用來編寫網頁的內容與標籤, 它的好處是讓編寫者完全控制整個網頁, 麻煩的是編寫者要自己檢查各項錯誤。
這種軟體有其專屬檔案格式, 本來不適合做為編輯網頁之用, 但是為了因應網際網路的盛行, 新版的文書處理軟體多增加了儲存成超文件標識語言格式的選項, 以微軟公司的Word為例, 從Word 97之後, 就可以當成所視即所得的編輯器使用, 把看到的效果, 直接存成超文件標識語言格式的檔案。
它是一種特別的文字編輯器, 增加許多標籤的撰寫按鈕, 自動撰寫完整標籤, 執行標籤的文法檢查, 很多熟練的網頁著者喜歡用這種編輯器, HomeSite、Hot Dog都是很流行的超文件標識語言編輯器, HtmlABC是本土的超文件標識語言編輯器, 畫面都是中文, 備感親切。
使用這種編輯器的最大好處是完全不必懂得任何超文件標識語言標籤, 以文書處理軟體型的指令, 直接在螢幕上編寫最後的結果。微軟公司的 FrontPage Editor即是非常流行的一種所見即所得編輯器。
結合所見即所得編輯器與管理網頁的工具, 適合用在大型的網頁管理場合, 微軟公司的
FrontPage Explorer在臺灣很流行。
初學者最好用文字編輯器或超文件標識語言編輯器直接撰寫內容與標籤, 熟悉後, 再以所見即所得編輯器做快速的編輯, 不必再理會標籤, 可是所見即所得編輯器總有若干不便之處, 還是要用文字編輯器或超文件標識語言編輯器直接掌握標籤, 所以, 文字編輯器或超文件標識語言編輯器開始才是完整的學習起點。
第一個要考慮的是建一個網頁或一系列的網頁, 2001年的慣例, 以15吋螢幕800*600的解析度為考量, 每個網頁保持在三頁以內, 除非有其他的考慮, 超過這個範圍的資料, 最好把它切割成幾頁, 互相連結。
接著選擇網頁的樣子, 背景顏色或圖案, 通常在整個系列網頁裡都採用相同的背景顏色或圖案, 給讀者一個整體性的感覺。背景顏色或圖案的色差, 會影響內文的閱讀, 應事先測試完整。瀏覽器會以四方連續圖案的方式, 以貼磁磚的手法, 將圖案貼滿整個螢幕, 不必挑選滿螢幕的大型圖案。
製作一個最簡單的網頁, 照著鍵入內文與標籤, 或者把自己的內文加入, 都可以。
超文件標識語言有若干標籤, 以瀏覽器看到的網頁內文來說, 這些標籤可分為兩大類:
段落標籤, 定義一段段的內容, 標題、排序與一般段落均是, 瀏覽器會在段落之前加一列空白。
行列標籤, 定義行列裡面的內容, 字形(黑體、斜體等)、顏色等均是。
不論是段落標籤或行列標籤, 它的標籤都包含下列的內容:
起始符號, 所有的標籤都從起始符號開始, 先給左角括號<、名稱、右角括號>, 若有屬性, 則以空格區別。
名稱, 表示該標籤的作用, FONT、TITLE、H2等均是, 為了閱讀方便, 多半以大寫表示。
屬性, 有些標籤需要指明其屬性, 以插入圖檔的IMG標籤為例, 它的SRC屬性, 可以指定該圖檔的位置。
參數, 絕大部份的屬性, 都需要參數, 通常放在等號之後的一組引號裡, SRC="portrait.jpg", 指定圖檔的來源。
內容, 接受內容的標籤都有內容模式, 可以置入相關的內容。<BR>是空標籤, 不接受任何的內容, 它加一個換行訊息。
終止符號, 把標籤的名稱放在角括號裡, 並且在名稱前多了一個斜撇符號, 告訴瀏覽器該標籤到此終止。
超文件標識語言文件有固定的架構, 告訴瀏覽器該文件為超文件標識語言的文件, 這個架構分為兩大部份:
標頭, 放在HEAD標籤裡, 不會出現在瀏覽器視窗裡, 祗有TITLE的內容出現在視窗最上端的題名。
內文, 螢幕上看到的部份, 都是放在這個區域裡的。
以標籤A表示, href是它的重要屬性之一, 把標準資源表放在這個屬性的參數裡, 通常瀏覽器把它的內文, 解釋為底線方式呈現, 使用者點選之後, 就可以進入另一個網頁。
有三種超連結方式: 絕對超連結、相對超連結與電子郵件超連結。
做好了以後, 別忘了先在瀏覽器裡看一遍, 以檔案/開啟舊檔/瀏覽的方式, 打開存在電腦裡的檔案。
新手本來就會犯下很多錯誤, 祗要逐一去改它就可以了。
打字錯誤, 英文不是我們的母語, 本來就容易弄錯, 標籤或標準資源表, 都有可能弄錯。
少了角括號, 很可能發生, 顧前不顧後。
少了斜撇, 結束標籤一定要有斜撇。
忘了結束標籤, 絕大部份的標籤, 有開始就有結束。
少了引號, 標準資源表必須放在引號裡, 最容易忘記的是後引號。
以複製的方式貼上標準資源表, 就不會出錯; 使用網頁編輯器的話, 也不會掛一漏萬。
首先要向網際網路服務商申請帳號及密碼, 學生可向學校的電子計算機中心申請, 或者在網路上找免費的網頁空間, 然後依照規定, 把網頁及圖檔上傳至指定的資料夾。
想知道外國的學生怎麼寫網頁嗎? 查看這個網址, http://www.student.com/feature/ppd, 至少有二十萬個學生的網頁, 你也可以把自己的網頁放上去; 美國德州大學做了全球各地學生的網頁連結, http://www.utexas.edu/world/personal/index.html。
臺灣學術網路使用規範, http://www.edu.tw/tanet/tanet-rules/use.html, 81.01.01訂定, 86.01.08第一次修定
有個不算挺出名的網頁, http://www.millsaps.edu/www/habitat/, 不過它的功能完備, 訴求明確, 沒什麼囉唆的內容, 堪稱網頁的代表作。
網頁編輯器多如繁星, 絕大部份為免費軟體, 各有所長, http://cws.internet.com/32html.html, 為讀者評比流行的編頁編輯器, 雖然是英文介面的, 部份已被國人另譯出中文介面。
免費的背景圖片比比皆是, http://www.drissman.com/avi/newton/AvisBackdrop/gallery/
構思個人網頁的內容。
毛慶禎 |