第6章 網頁製作 - Test Page for Apache Installation
Download
Report
Transcript 第6章 網頁製作 - Test Page for Apache Installation
第6章
網頁製作
實用資訊
目錄
6-1 網頁製作軟體及網頁文件
6-2 把Word文件變成網頁
6-3 網頁製作基本技巧
6-4 框架
6-5 發佈網頁文件
問題與解答
2
6-1 網頁製作軟體及網頁文件
6-1.1 網頁與HTML
6-1.2 什麼是超連結
3
6-1 網頁製作軟體及網頁文件
由於目前市面上有非常多製作網頁的軟體，所
以當您要製作網頁時，可先考慮自己的需求，
再選擇一套最適合自己的軟體來製作網頁，例
如：FrontPage、Dreamweaver、WebEditor……
等。
4
FrontPage：
FrontPage是由微軟公司所發行的 Office系列軟體之一，
FrontPage具有建立動態和複雜網站所需的專業設計、
資料、編寫和發佈工具，可以協助您建立更完善的網
站。
5
Dreamweaver：
Dreamweaver 是 由
Macromedia
（Macromedia已於
2005 年 4 月 被
Adobe 併 購 ） 所 研
發的網頁製作軟體，
使 用 Dreamweaver
製作網頁時，不需
要懂HTML的標籤
指令，只要套用面
板上的功能，即可
製作出漂亮的網頁
了。
6
WebEditor：
WebEditor是利用JavaScript程式技巧來開發及整合企
業的網路應用系統，Web Editor以專案導向的方式，
直接在系統畫面新增及編輯控制項；Web Editor較適
合用於多個團隊共同開發專案時使用。
7
6-1.1
網頁與HTML
網 頁 文 件 是 一 種 使 用 超 文 件 標 籤 語 言 （ HyperText
Markup Language，簡稱為HTML）的資料檔案。
在瀏覽器（例如Internet Explorer或Netscape Navigator）
中讀取網頁檔案資料時，會根據所使用的HTML標籤
命令，而呈現不同的文件效果。
換句話說，把網頁文件載入瀏覽器時，不會顯示所有
檔案內容，而是將標籤隱藏起來，並依照標籤的指示，
顯示檔案中的資料內容。
連線到某一網頁後，可以利用瀏覽器的檢視原始檔功
能，查詢網頁的原始檔案，呈現包含標籤命令的網頁
文件。
8
以下就是查看網頁原始檔的操作
示範：
9
網頁原始檔內容顯示如下：
10
網頁原始檔案內容的基本架構如
下：
11
網頁文件原始檔案：
網頁文件原始檔案的開頭和結尾必須使用
“<HTML>”標籤。
原 始 檔 案 中 可 區 分 為 “ <HEAD>” 和
“<BODY>”兩個區域。
在“<HEAD>”區域可以設定文件的名稱、文
件的類型、背景音樂等等；而在瀏覽器中顯示
的網頁內容，則全部放在“< BODY >”區中。
12
6-1.2
什麼是超連結
超連結（Hyperlink）是網頁文件最重要的特性。
具有超連結特性的文件，可在文件中點選文字、
圖形或特定區域，連結到指定的文件位置。
在網頁文件中的超連結，有多種不同的連結形
式，主要可概分為檔案和Web畫面兩類，檔案
是指超連結同一台電腦上的檔案，而Web畫面
是指超連結到其它電腦的檔案。
13
網頁元件的超連結形式：
14
6-2
把Word文件變成網頁
6-2.1 預覽Word文件的網頁效果
6-2.2 將Word文件變成網頁文件
6-2.3 建立新的網頁文件
15
6-2
把Word文件變成網頁
微軟發行的Office系列軟體，幾乎都可以將檔
案直接轉換為網頁文件，尤其是Word產生的文
件，也可以轉換為網頁文件，讓許多習慣以
Word來編輯文件的使用者，不但可直接上手編
輯網頁，也可以將過去的Word文件直接轉換為
網頁。
16
6-2.1
果
預覽Word文件的網頁效
預覽功能就是讓使用者預先看看效果，為了知
道在Word中編輯的文件檔案，轉換為網頁文件
後的效果，可以先使用Web畫面預覽功能啟動
瀏覽器，看看Word文件在瀏覽器上顯示的效果。
17
以下就是預覽Web畫面的操作示
範：
執行預覽功能後會自動啟動瀏覽器，並顯示Word文件
在瀏覽器上的顯示效果。
18
6-2.2
件
將Word文件變成網頁文
一 般 Word 製 作 的 文 件 ， 儲 存 檔 案 的 副 檔 名
為.doc，而利用另存成Web網頁功能，可將一
般Word的文件轉換為網頁文件，將檔案儲存為
副檔名為.htm（或html）的檔案。
19
以下就是把Word文件轉換為網
頁文件的操作示範：
20
21
將Word文件轉換為網頁文件的
補充說明：
將Word文件儲存成網頁文件後，除了產生一個副檔名
為.htm的檔案外，同時會產生一個相同主檔名的資料
夾，在資料夾中會存放文件中用到的圖形、聲音、影
片等相關檔案。
在另存新檔視窗中，預設儲存的檔案類型是單一檔案
網頁（.mht或.mhtml），如果選擇儲存成此項，則
Word會將文件中所有圖片與格式都儲存成一個檔案，
而不會再另外建立資料夾來存放。此功能可以提昇了
傳送網頁檔案或上傳的方便性，不過目前必須是
Internet Explorer 4.0以上的版本才有支援此種格式。
22
存成單一檔案和ㄧ般網頁檔案的
圖示如下所示：
23
文件變成網頁文件後，畫面顯示
如下：
將文件變成網頁文件後，開啟瀏覽器，然後開
啟所存的網頁文件，畫面顯示如下：
24
25
已篩選的網頁：
如果在另存新檔視窗中的檔案類型選單中選擇已篩選的網頁，也
可以將文件儲存成網頁格式。
將文件儲存成已篩選的網頁，雖然與儲存成網頁的文件大致上相
同，但只要開啟原始檔來比較，就可以明顯的看出兩份文件的差
別；其中，已篩選網頁的原始檔會顯得比較簡潔。
26
未篩選網頁的原始檔：
27
已篩選網頁的原始檔：
28
6-2.3
建立新的網頁文件
雖然Word可以將一般文件轉換為網頁文件，但
仍有許多限制（有些資料格式無法轉換）。
所以，若所製作的文件確定要以網頁的形式呈
現，則最好的方式是直接建立一個新的網頁文
件檔。
29
以下就是建立新網頁文件的操作
示範：
30
31
6-3
6-3.1
6-3.2
6-3.3
6-3.4
網頁製作基本技巧
建立超連結
連結至書籤的位置
套用主題
設定頁面的標題
32
6-3
網頁製作基本技巧
這一節不探討Word的一般編輯技巧（例如：設
定字型、樣式、顏色、背景圖案等等），將介
紹Word用來設計網頁的功能，包括建立超連結、
書籤、套用主題、設定頁面標題等內容。
33
6-3.1
建立超連結
網頁文件中的文字和圖形資料都可以設定超連
結，而超連結的內容可為檔案名稱、Web畫面
的網址，或者郵件信箱等。
34
以下就是建立文字與網址超連結
的操作示範：
35
36
完成後：
完成後，在Word中先按住鍵盤上的
鍵，再
點選設定超連結的文字，就可以連結至指定的
網址。
37
38
6-3.2
連結至書籤的位置
超連結除了可以連結至檔案、Web畫面、電子
郵件地址外，也可以連結至該份文件中的位置。
想要連結至該份文件中的位置前，必須先設定
書籤的位置，然後再將文字或圖形連結至書籤。
39
以下就是設定書籤位置的操作示
範：
40
41
以下就是將文字連結至書籤的操
作示範：
42
43
完成後：
完成後，在Word中按住鍵盤上的
鍵，然後點選設
定連結的文字，就會連結至所指定的書籤位置，畫面
顯示如下：
44
6-3.3
套用主題
Word內建各式各樣的網頁主題，任何一個網頁
文件套用主題後，就可以立即更換整個畫面的
視覺效果，而更改的項目包括背景圖案、標題
樣式、項目符號等。
善加利用內建主題的套用，可以讓網頁更多采
多姿！
45
以下就是套用主題的操作示範：
46
47
套用主題效果後：
套用主題效果後，原來的背景、水平線、項目
符號圖案……等，都會變更成該主題所設定的
樣式，畫面顯示如下：
48
6-3.4
設定頁面的標題
只要在儲存檔案時先行設定頁面的標題，就可
以設定網頁中的頁面標題。
49
以下就是設定頁面標題的示範：
50
51
52
53
設定完成後：
從功能表列依序選擇檔案/網頁預覽，就可以發
現網頁頁面的標題改變成所設定的名稱了。
54
6-4
6-4.1
6-4.2
6-4.3
6-4.4
框架
建立框架
在框架上加入內容
在框架中插入超連結
設定框架的屬性
55
6-4
框架
框架（frame）是網頁特有的文件結構，利用
框架功能可以使網頁更容易閱讀，所以大多數
的網站都會應用框架功能。
56
6-4.1
建立框架
在建立網頁框架前，先來了解一下一般網頁的
框架結構，以下是幾個框架的實例。
57
分割為左右兩個框架：
58
分割為上下兩個框架：
59
先左右分割再上下分割：
60
先上下分割再左右分割：
61
框架工具列各按鈕功能說明如下：
只要應用框架工具列的按鈕，就可以很快製作
出框架的效果。首先先來認識一下框架工具列
按鈕的功能，各按鈕功能說明如下：
62
以下就是建立框架的操作示範：
63
64
新增框架後，Word會以新增一份空白文件的方式呈現，供
使用者設定框架內容，所以必須將文件另外存檔（例如：
另存成index.htm檔），才不致於遺失框架中的設定。
65
6-4.2
在框架上加入內容
與單純的網頁比較，框架網頁的結構較為複雜，
例如：一個分為兩個框架的網頁，除了框架本
身要儲存為一個檔案外，另外還要放入兩個框
架的內容檔案。
66
以下就是在框架上加入內容的操
作示範：
67
68
69
70
在框架內加入內容後，畫面顯示
如下：
71
6-4.3
在框架中插入超連結
在框架中利用超連結功能，可以指定所連結的
網頁要顯示的框架位置，例如：在左框架中插
入超連結，使超連結的結果顯示在右邊的框架
中。
72
以下就是在框架中插入超連結的
操作示範：
73
74
75
76
設定完成後：
在框架中插入檔案連結後，先按住
鍵，然後點選
設有連結的文字，就會在指定的框架中出現連結的檔
案內容，畫面顯示如下：
77
78
6-4.4
設定框架的屬性
在網頁文件中加入框架後，可以再設定是否顯
示框架框線、線條寬度、線條的色彩等屬性。
79
以下就是設定框架屬性的操作示
範：
80
81
6-5
發佈網頁文件
6-5.1 申請網頁空間
6-5.2 用CuteFTP傳送網頁
82
6-5
發佈網頁文件
網頁文件要上傳（Upload）到WWW伺服器上，
才可以供人瀏覽，而這種傳送網頁到伺服器的
作業，就稱為發佈網頁。
83
6-5.1
申請網頁空間
想要發佈網頁，必須先擁有WWW伺服器的網
頁空間，網頁空間可分為付費和免費兩種，例
如：向中華電信（HiNet）、Seednet……等網
路服務公司申請的網頁空間，必須支付費用。
至於免費的網頁空間，則是眾多網路使用者最
期盼的“福利”，多多上網收集情報，可以獲
得意外的網頁空間。
此節將以Yahoo!奇摩為例，說明申請網頁空間
的方法。
84
以下就是申請Yahoo!奇摩網頁空
間的操作示範：
85
86
87
88
89
完成後，就會出現註冊成功的畫面，表示已成功的申請到
網頁空間了。
90
91
6-5.2
用CuteFTP傳送網頁
把網頁發佈到伺服器的方法，可概分為兩種，一種是
使用檔案傳輸程式（FTP程式，FTP為File Transfer
Protocol的簡稱），例如 ：WS_FTP、Cute_FTP等檔
案傳輸專用程式；另一種則是直接使用網頁編輯工具
特製的發佈程式，例如：FrontPage的發佈功能等。
檔案傳輸專用程式則會提供進階的檔案管理功能，包
括將檔案下載到自己的電腦上。本節將介紹CuteFTP
傳 送 網 頁 的 方 法 ， CuteFTP 是 一 套 共 享 軟 體
（Shareware），您可從http://toget.pchome.com.tw網站
上下載到最新版本並安裝。
92
以下就是用CuteFTP程式上傳檔
案的操作示範：
93
94
95
96
97
98
99
100
101
完成後：
完成後，只要開啟瀏覽器並輸入網頁空間的網
址，就可以瀏覽所上傳的網頁內容了，畫面顯
示如下：
102
CuteFTP程式的其他功能：
CuteFTP程式除了可以上傳、下載檔案外，還
可以管理伺服器上的檔案，包括建立資料夾、
更改檔名、刪除檔案等等。
103
104
105
以下就是刪除檔案的操作示範：
106
若WWW伺服器預設首頁名稱為index.html，建議您編
輯網頁文件時，將首頁儲存成index.html，並且將所有
的檔案均以小寫英文來命名，如此一來，上傳網頁檔
案時，比較不會有問題。
107
問題與解答：選擇題
108
問題與解答：選擇題
109
問題與解答：選擇題
110
問題與解答：選擇題
111
問題與解答：實作題
112
問題與解答：實作題
113
問題與解答：實作題
114
問題與解答：實作題
115
問題與解答：實作題
116
問題與解答：實作題
117