简单网页制作-blog.hongai.edu.hk.doc

簡單網頁製作 以溝通的角度來分類，網頁的應用可以有兩種模式。第一種應用模式是使用者透過網頁獲取外界資訊；第二種應用模式就是使用者透過網頁，向外界發放資訊。其實透過網頁向專家提問或向教材設計者提供意見，已可歸入第二種應用模式。不過，如果你能為自己建立網頁，向外界發放資訊及鼓勵溝通交流的話，你便可成為更標準的第二種應用模式的使用者。 希望當你試為自己建立網頁，但設計和製作一個精美的網頁絕對不容易，因為除了需要學習一些基本知識和技巧外，亦要花大量心思搜集資料、繪畫圖案和設計展示形式。換言之，制作網頁是不可以紙上談兵，而是在實際製作過程中不斷學習和改良。同時，製作一個精美的網頁是需要專門的技術，所以為個人製作網頁的其中一個快捷而有效的方法，就是聘請一些專業人才，來進行這項工作。如果有興趣的話，亦不妨學習一些網頁製作的基本技巧，因為網頁的資料很多時需要不斷更新的，如果對網頁稍作修改，也要請別人幫忙的話，既花金錢，亦難及時將資料更新。 超文體標示語言(Hyper Text Markup Language，簡稱HTML)是一種標示語言，而網頁就是由HTML的標示組成的。 圖1 圖2 細看圖2，便可知道網頁其實是一些純文字檔，所以網頁製作只需要一個非常原始的文字處理軟件，例如視窗內的”記事本”，然後鍵入網頁所要顯示的文字，再加入適當的超文體標示語言。超文體標示語言能夠標示網頁內字體的大小和顏色，還有是文件的格式、背景圖案及超連結等，而這些果效，要藉著網頁瀏覽器，才能看到。 如下，香港政府網頁及其原始檔 你應察覺到，超文體標示語言是頗複雜的。正由於這種通過鍵入超文體標示語言的網頁製作方法並不容易掌握，所以有些軟件生產商便設計了些網頁編輯軟件，使製作者不用鍵入件何的超文體標示語言，便可進行網頁製作或編輯工作。 以下的分將會教導你使用微軟的Word，來建立一個簡單的私入網頁。完成這個簡單的網頁製作後你可自行學習一些更複雜的技巧，甚至在自己的電腦裝置微軟FrontPage Express，以便進行製作更複雜的網頁。 第一步：建立空白的Web畫面 1.當你開啟了Word 後，請先選取檔案功能表內的“開新檔案”指令。 2.選取“空白Web畫面。 第二步：建立頁標題 1.在首行輸入“主網頁”，並格式化成36點字及置中對齊。 第三步：建立水平線 1.選取插入功能表中的 “水平線” 指令。 2.看到水平線對話盒後，請選擇以下其中一款的水平線。 3. 按確定後，會得出以下結果。 第四步：建立表格及框線 1. 選取表格功能表中“插入表格”指令，並建立一個2x1的表格。 2. 鍵入兩行文字。 3. 執行表格功能表中的 “選取表格” 指令。 4. 執行表格功能表中的 “框線” 指令。 5. 看到水平線對話盒後，請作以下選擇。 6. 按確定後，會得出以下結果。 第五步：建立超連結 選取“第一頁”這字串。 2. 執行插入功能表中的 “超連結”(hyperlink)指令，會出現對話盒。 3. 按“是”鈕，會出現“另存為HTML”對話盒，請執行以下設定(輸入檔案名稱為home.htm) 4. 按“儲存檔案”鈕，可以看到對話盒。(對話盒內是以英文顯示選擇語言，即大五碼繁體中文) 5. 按“OK”鈕，可以看到 “插入超連結” 對話盒。之後請執行下列設定(檔案名稱為:page1.html) 6. 按“確定”鈕，可以得到以下結果。 7. 選取“第二頁”字串，並重複上述2至6各步驟，同時在執行第5步時，設定超連結的檔案為：page2.html 第六步：建立背景效果 1. 執行 “格式” 功能表中的 “背景” 指令，然後選取 “填滿效果”。 2. 選取其中一種材質，如 “羊皮紙”，並按“確定”鈕，會得出以下結果。 第七步：插入圖片 1. 執行 “插入” 功能表中的“圖片”指令，然後選取“美工圖案”指令。 2. 屏幕將會呈現“Microsoft多媒體藝廊3.0”對話盒，從“學術”圖案中選取以下圖案。 3. 按“插入”鈕後，可得出以下結果。(如希望插入相片而非以上的圖案，可參閱Word的使用手冊。) 第八步：插入電子郵件地址 1. 鍵入“網頁製作人：”。(學員所使用的字型大小可能與下圖所示有些出入) 2. 鍵入你自己的電子郵件地址，例如:abc@cde.net。 3. 按下“空白鍵”，可得出以下結果。(你所使用的字型大小，可能與下圖所示有些出入) 第九步：設計及建立“page1.html”及“page2.html”1. 重複第一步：建立“空白 Web畫面”，並鍵入文字。 2. 參考第五步：以接回首頁。(將檔案儲存為：page1.html) 3. 重複第一步：建立“空白Web畫面”，並鍵入文字。並參考第五步：建立“超連結”，將“返回主網頁”設為超連結，以接回首頁。(將檔案儲存為：