第 6 章　網頁製作

第 6章　網頁製作

實用資訊

2

目錄

6-1　網頁製作軟體及網頁文件6-2　把Word文件變成網頁6-3　網頁製作基本技巧6-4　框架6-5　發佈網頁文件問題與解答

3

6-1 　網頁製作軟體及網頁文件

6-1.1 　網頁與 HTML6-1.2 　什麼是超連結

4

6-1　網頁製作軟體及網頁文件

由於目前市面上有非常多製作網頁的軟體，所以當您要製作網頁時，可先考慮自己的需求，再選擇一套最適合自己的軟體來製作網頁，例如： FrontPage 、 Dreamweaver 、 WebEditor…… 等。

5

FrontPage： FrontPage 是由微軟公司所發行的 Office 系列軟體之

一， FrontPage 具有建立動態和複雜網站所需的專業設計、資料、編寫和發佈工具，可以協助您建立更完善的網站。

6

Dreamweaver： Dreamweaver 是由

Macromedia （ Macromedia 已於 2005 年 4 月被 Adobe 併購）所研發的網頁製作軟體，使用 Dreamweaver 製作網頁時，不需要懂 HTML 的標籤指令，只要套用面板上的功能，即可製作出漂亮的網頁了。

7

WebEditor： WebEditor 是利用 JavaScript 程式技巧來開發及整合企

業的網路應用系統， Web Editor 以專案導向的方式，直接在系統畫面新增及編輯控制項； Web Editor 較適合用於多個團隊共同開發專案時使用。

8

6-1.1　網頁與 HTML

網頁文件是一種使用超文件標籤語言（ HyperText Markup Language ，簡稱為 HTML ）的資料檔案。

在瀏覽器（例如 Internet Explorer 或 Netscape Navigator ）中讀取網頁檔案資料時，會根據所使用的 HTML標籤命令，而呈現不同的文件效果。

換句話說，把網頁文件載入瀏覽器時，不會顯示所有檔案內容，而是將標籤隱藏起來，並依照標籤的指示，顯示檔案中的資料內容。

連線到某一網頁後，可以利用瀏覽器的檢視原始檔功能，查詢網頁的原始檔案，呈現包含標籤命令的網頁文件。

9

以下就是查看網頁原始檔的操作示範：

10

網頁原始檔內容顯示如下：

11

網頁原始檔案內容的基本架構如下：

12

網頁文件原始檔案：

網頁文件原始檔案的開頭和結尾必須使用“ <HTML>” 標籤。

原始檔案中可區分為“ <HEAD>” 和“ <BODY>” 兩個區域。

在“ <HEAD>” 區域可以設定文件的名稱、文件的類型、背景音樂等等；而在瀏覽器中顯示的網頁內容，則全部放在“ < BODY >” 區中。

13

6-1.2　什麼是超連結

超連結（ Hyperlink ）是網頁文件最重要的特性。具有超連結特性的文件，可在文件中點選文字、圖形或特定區域，連結到指定的文件位置。

在網頁文件中的超連結，有多種不同的連結形式，主要可概分為檔案和 Web 畫面兩類，檔案是指超連結同一台電腦上的檔案，而 Web畫面是指超連結到其它電腦的檔案。

14

網頁元件的超連結形式：

15

6-2　把Word文件變成網頁

6-2.1 　預覽 Word 文件的網頁效果6-2.2 　將 Word 文件變成網頁文件6-2.3 　建立新的網頁文件

16

6-2　把Word文件變成網頁

微軟發行的 Office 系列軟體，幾乎都可以將檔案直接轉換為網頁文件，尤其是 Word產生的文件，也可以轉換為網頁文件，讓許多習慣以Word 來編輯文件的使用者，不但可直接上手編輯網頁，也可以將過去的 Word 文件直接轉換為網頁。

17

6-2.1 　預覽 Word 文件的網頁效果預覽功能就是讓使用者預先看看效果，為了知道在 Word 中編輯的文件檔案，轉換為網頁文件後的效果，可以先使用 Web 畫面預覽功能啟動瀏覽器，看看 Word 文件在瀏覽器上顯示的效果。

18

以下就是預覽 Web 畫面的操作示範：

執行預覽功能後會自動啟動瀏覽器，並顯示 Word 文件在瀏覽器上的顯示效果。

19

6-2.2 　將 Word 文件變成網頁文件一般Word 製作的文件，儲存檔案的副檔名為 .

doc ，而利用另存成 Web 網頁功能，可將一般Word 的文件轉換為網頁文件，將檔案儲存為副檔名為 .htm （或 html ）的檔案。

20

以下就是把 Word 文件轉換為網頁文件的操作示範：

21

22

將 Word 文件轉換為網頁文件的補充說明：將 Word 文件儲存成網頁文件後，除了產生一個副檔

名為 .htm 的檔案外，同時會產生一個相同主檔名的資料夾，在資料夾中會存放文件中用到的圖形、聲音、影片等相關檔案。

在另存新檔視窗中，預設儲存的檔案類型是單一檔案網頁（ .mht 或 .mhtml ），如果選擇儲存成此項，則Word 會將文件中所有圖片與格式都儲存成一個檔案，而不會再另外建立資料夾來存放。此功能可以提昇了傳送網頁檔案或上傳的方便性，不過目前必須是 Internet Explorer 4.0 以上的版本才有支援此種格式。

23

存成單一檔案和ㄧ般網頁檔案的圖示如下所示：

24

文件變成網頁文件後，畫面顯示如下：將文件變成網頁文件後，開啟瀏覽器，然後開啟所存的網頁文件，畫面顯示如下：

25

26

已篩選的網頁：如果在另存新檔視窗中的檔案類型選單中選擇已篩選的網頁，也

可以將文件儲存成網頁格式。

將文件儲存成已篩選的網頁，雖然與儲存成網頁的文件大致上相同，但只要開啟原始檔來比較，就可以明顯的看出兩份文件的差別；其中，已篩選網頁的原始檔會顯得比較簡潔。

27

未篩選網頁的原始檔：

28

已篩選網頁的原始檔：

29

6-2.3　建立新的網頁文件

雖然Word 可以將一般文件轉換為網頁文件，但仍有許多限制（有些資料格式無法轉換）。

所以，若所製作的文件確定要以網頁的形式呈現，則最好的方式是直接建立一個新的網頁文件檔。

30

以下就是建立新網頁文件的操作示範：

31

32

6-3　網頁製作基本技巧

6-3.1 　建立超連結6-3.2 　連結至書籤的位置6-3.3 　套用主題6-3.4 　設定頁面的標題

33

6-3　網頁製作基本技巧

這一節不探討Word 的一般編輯技巧（例如：設定字型、樣式、顏色、背景圖案等等），將介紹Word 用來設計網頁的功能，包括建立超連結、書籤、套用主題、設定頁面標題等內容。

34

6-3.1　建立超連結

網頁文件中的文字和圖形資料都可以設定超連結，而超連結的內容可為檔案名稱、 Web 畫面的網址，或者郵件信箱等。

35

以下就是建立文字與網址超連結的操作示範：

36

37

完成後：

完成後，在 Word 中先按住鍵盤上的鍵，再點選設定超連結的文字，就可以連結至指定的網址。

38

39

6-3.2　連結至書籤的位置

超連結除了可以連結至檔案、 Web 畫面、電子郵件地址外，也可以連結至該份文件中的位置。

想要連結至該份文件中的位置前，必須先設定書籤的位置，然後再將文字或圖形連結至書籤。

40

以下就是設定書籤位置的操作示範：

41

42

以下就是將文字連結至書籤的操作示範：

43

44

完成後：完成後，在 Word 中按住鍵盤上的鍵，然後點選

設定連結的文字，就會連結至所指定的書籤位置，畫面顯示如下：

45

6-3.3　套用主題

Word 內建各式各樣的網頁主題，任何一個網頁文件套用主題後，就可以立即更換整個畫面的視覺效果，而更改的項目包括背景圖案、標題樣式、項目符號等。

善加利用內建主題的套用，可以讓網頁更多采多姿！

46

以下就是套用主題的操作示範：

47

48

套用主題效果後：

套用主題效果後，原來的背景、水平線、項目符號圖案……等，都會變更成該主題所設定的樣式，畫面顯示如下：

49

6-3.4　設定頁面的標題

只要在儲存檔案時先行設定頁面的標題，就可以設定網頁中的頁面標題。

50

以下就是設定頁面標題的示範：

51

52

53

54

設定完成後：

從功能表列依序選擇檔案 / 網頁預覽，就可以發現網頁頁面的標題改變成所設定的名稱了。

55

6-4　框架

6-4.1 　建立框架6-4.2 　在框架上加入內容6-4.3 　在框架中插入超連結6-4.4 　設定框架的屬性

56

6-4　框架

框架（ frame ）是網頁特有的文件結構，利用框架功能可以使網頁更容易閱讀，所以大多數的網站都會應用框架功能。

57

6-4.1　建立框架

在建立網頁框架前，先來了解一下一般網頁的框架結構，以下是幾個框架的實例。

58

分割為左右兩個框架：

59

分割為上下兩個框架：

60

先左右分割再上下分割：

61

先上下分割再左右分割：

62

框架工具列各按鈕功能說明如下：

只要應用框架工具列的按鈕，就可以很快製作出框架的效果。首先先來認識一下框架工具列按鈕的功能，各按鈕功能說明如下：

63

以下就是建立框架的操作示範：

64

65

新增框架後， Word 會以新增一份空白文件的方式呈現，供使用者設定框架內容，所以必須將文件另外存檔（例如：另存成 index.htm 檔），才不致於遺失框架中的設定。

66

6-4.2　在框架上加入內容

與單純的網頁比較，框架網頁的結構較為複雜，例如：一個分為兩個框架的網頁，除了框架本身要儲存為一個檔案外，另外還要放入兩個框架的內容檔案。

67

以下就是在框架上加入內容的操作示範：

68

69

70

71

在框架內加入內容後，畫面顯示如下：

72

6-4.3　在框架中插入超連結

在框架中利用超連結功能，可以指定所連結的網頁要顯示的框架位置，例如：在左框架中插入超連結，使超連結的結果顯示在右邊的框架中。

73

以下就是在框架中插入超連結的操作示範：

74

75

76

77

設定完成後：在框架中插入檔案連結後，先按住鍵，然後點

選設有連結的文字，就會在指定的框架中出現連結的檔案內容，畫面顯示如下：

78

79

6-4.4　設定框架的屬性

在網頁文件中加入框架後，可以再設定是否顯示框架框線、線條寬度、線條的色彩等屬性。

80

以下就是設定框架屬性的操作示範：

81

82

6-5　發佈網頁文件

6-5.1 　申請網頁空間6-5.2 　用 CuteFTP傳送網頁

83

6-5　發佈網頁文件

網頁文件要上傳（ Upload ）到 WWW伺服器上，才可以供人瀏覽，而這種傳送網頁到伺服器的作業，就稱為發佈網頁。

84

6-5.1　申請網頁空間

想要發佈網頁，必須先擁有 WWW伺服器的網頁空間，網頁空間可分為付費和免費兩種，例如：向中華電信（ HiNet ）、 Seednet…… 等網路服務公司申請的網頁空間，必須支付費用。

至於免費的網頁空間，則是眾多網路使用者最期盼的“福利”，多多上網收集情報，可以獲得意外的網頁空間。

此節將以 Yahoo!奇摩為例，說明申請網頁空間的方法。

85

以下就是申請 Yahoo! 奇摩網頁空間的操作示範：

86

87

88

89

90

完成後，就會出現註冊成功的畫面，表示已成功的申請到網頁空間了。

91

92

6-5.2 　用 CuteFTP 傳送網頁把網頁發佈到伺服器的方法，可概分為兩種，一種是

使用檔案傳輸程式（ FTP 程式， FTP 為 File Transfer Protocol 的簡稱），例如： WS_FTP 、 Cute_FTP 等檔案傳輸專用程式；另一種則是直接使用網頁編輯工具特製的發佈程式，例如： FrontPage 的發佈功能等。

檔案傳輸專用程式則會提供進階的檔案管理功能，包括將檔案下載到自己的電腦上。本節將介紹 CuteFTP傳送網頁的方法， CuteFTP 是一套共享軟體（ Shareware ），您可從 http://toget.pchome.com.tw 網站上下載到最新版本並安裝。

93

以下就是用 CuteFTP 程式上傳檔案的操作示範：

94

95

96

97

98

99

100

101

102

完成後：

完成後，只要開啟瀏覽器並輸入網頁空間的網址，就可以瀏覽所上傳的網頁內容了，畫面顯示如下：

103

CuteFTP程式的其他功能：

CuteFTP 程式除了可以上傳、下載檔案外，還可以管理伺服器上的檔案，包括建立資料夾、更改檔名、刪除檔案等等。

104

105

106

以下就是刪除檔案的操作示範：

107

若WWW伺服器預設首頁名稱為 index.html ，建議您編輯網頁文件時，將首頁儲存成 index.html ，並且將所有的檔案均以小寫英文來命名，如此一來，上傳網頁檔案時，比較不會有問題。

108

問題與解答：選擇題

109


110


111


112

問題與解答：實作題

113


114


115


116


117


Documents

第 6 章 網頁製作

第 6 章　網頁製作