第 1 章

僑光行政人員訓練課程
Frontpage 網頁維護
鄭瓊芬 ([email protected])
Oct. 20, 2004
1
WWW簡介

「 WWW 」 (Word Wide Web) 全球資訊網是
1989年歐洲高能粒子協會一個研究小組所開發
的一種全新的Internet服務，WWW能夠在網路
上傳送圖片、文字、影像、聲音等多媒體資料，
由Tim Berners Lee領導的小組所開發的主從架
構分散式網路服務系統。
2
WWW的基礎-名詞解說
常見的名詞說明
首頁
英文名稱為 Homepage，指的為連接 Web 伺服器後下載的第一頁文
件、網頁或稱為 Web 畫面、HTML 文件
HTML
全名 HyperText Markup Language，屬於一種文件編排的語言，在
瀏覽程式看到的網頁內容就是使用此語言所製作
URLs
全名 Uniform Resource Locations ，這是 WWW 的萬用資源定位
器，可以用來連結網站和其它
Internet
資源，其格式為
【 http://www.hinet.net 】以「 :// 」符號分隔，符號前為通訊協定，
後為伺服器的網域名稱
HTTP
全名 Hypertext Transport Protocol 為 WWW 使用的標準通訊協定，
Web 伺服器的資料傳送都是透過這個通訊協定進行資料的交換
超文件
英文名稱 Hypertext 為一種文件閱讀方式，透過超連結的導引，可
以在閱讀文件內容時，隨時檢視相關連的資料
超媒體
英文名稱 Hypermedia 基本上和超文件非常相似，只是原來文字的
超連結改為圖片、聲音或影像動畫等多媒體元件
3
WWW的架構-說明

WWW全球資訊網屬於一種主從架構的系統。

主端是「伺服端」(Server)：指的是Web伺服器，
在伺服器上儲存著HTML文件等網頁文件和圖片等
多媒體資料。

從端是「客戶端」(Client)：使用者執行瀏覽程式
的電腦，負責和伺服器溝通和讀取伺服器的資料，
也就是HTML文件。
4
WWW的架構-圖例

Web伺服器儲存客戶端請求的資料，以微軟來說
就是「IIS」（Internet Information
Server），從端是使用瀏覽程式顯示伺服端文件，
微軟的Internet Explorer是目前巿場佔有率最
高的瀏覽程式。
5
WWW的架構-HTTP

WWW 採用「 HTTP 」（ Hypertext
Transfer Protocol）通訊協定將伺服器
的資料傳送到瀏覽程式，伺服器在架構上
處於被動角色，等待使用者藉著瀏覽程式
提出瀏覽的HTTP請求，Web伺服器針對
請求進行檢查，如果沒有問題就開始傳輸
資料，傳輸的資料為HTML文件和相關的
多媒體檔案。
6
網站運作的概念
7
網
頁
的
製
作
流
程
8
網頁與首頁

何謂網頁？


透過瀏覽器在 WWW 上所看到的每一個畫面
都是網頁 (Web Page)
何謂 Home Page (首頁)？


進入一個網站時所看到的第一個網頁
功能：負責導覽及介紹最新消息
9
網站就是網頁的集合

設計者先把整個網站架構規劃好, 然後再
分別製作出不同的網頁, 讓網頁間彼此相
連。這樣完整的架構就稱為網站
10
網站放在哪裡


一般網站放置在稱為伺服器 (Server)
的電腦中, 除了伺服器在維修或壞掉時關
機, 其餘時間都可瀏覽
除自行架設伺服器外, 一般個人與小企業、
工作室, 可向 ISP (Internet Service
Provider 網路服務提供者) 申請, 在他
們的伺服器上租一塊空間放置網站
11
網站與伺服器
12
網頁技術

靜態網頁
網頁是由HTML所撰寫，無論在何時何地瀏覽，皆呈現相
同的畫面與內容，且使用者僅能瀏覽，無法提供訊息給網
站，讓網站回應使用者的需求。

動態網頁

網頁美工
網頁是由 JavaScript, VBScript, ASP, PHP, JSP所撰寫，
讓網頁能夠依照不同的情況做出動態回應
在網頁中加入圖檔及動畫等，常用之軟體為PhotoImpact,
Photoshop, Flash.
13
什麼是 HTML
在瀏覽程式中所看到的內容
原始的文件內容
(執行『檢視/原始檔』命令)
14
HTML 文件結構

標籤 (tag)



由小於 “< “ 及大於 “>” 符號組成
一般文字
Ex：<title>旗標出版公司</title>
15
基本的標籤

HTML 文件最基本的標籤：
1.<HTML></HTML> 文件的開始與結束
2.<HEAD></HEAD> 標示文件資訊
3.<BODY></BODY> 標示本文
4.<TITLE></TITLE> 文件標題
16
HTML 基本架構
17
網頁的組成元素
 文字
 圖片
 超連結
 其他元素
18
網頁文字


網頁元素中最基本、最重要的內容
優勢：檔案小、速度快



所佔的檔案空間非常小 (一個中文字 2 Bytes)
進入一個純文字的網頁時, 大約只要 1、2 秒
鐘就可以看到整篇網頁
可利用 HTML 的語法以及新的 CSS 樣式
表來改變色彩、格式與大小等屬性, 滿足
不同的設計需求
19
變換網頁文字的限制


瀏覽者的電腦裡若沒有網頁中使用的字體,
瀏覽到該網頁時, 就只能以系統預設的字
型顯示
解決方法可將把網頁文字做成圖形, 不過
檔案大小會增大很多
20
關於網頁圖片



常應用在 WWW 上的圖形有 JPG、GIF
和 PNG 幾種格式
這些格式除了具有壓縮比例高的特性之外,
也具有跨平台的優點
不管瀏覽者用的是什麼作業系統, 都能直
接在瀏覽器上看到這幾種格式的圖片
21
網頁圖片的應用
22
關於超連結

點選頁面上超連結可以：




像穿越任意門一般迅速到達要去的地方
下載檔案
寄 e-mail 給網站的主人...
網頁中不論是文字或圖形都可以加上超連
結標記
23
超連結的種類






連往別的網站的外部超連結
連結自己網站內部 Web Page 的內部超
連結
連結同一頁面中部分內容的書籤
連至檔案以下載之的下載超連結
可以寄 E-mail 的 E-mail 超連結
按下或滑鼠移上時可以啟動程式產生特效
的超連結
24
其他元素




表格、表單
聲音、影像、多媒體
程式特效
其他各類多媒體 Plug-in
25
表格、表單

表格在網頁中的使用：



可以做為一般表格使用
無邊框的表格常被利用來做網頁整體排版
表單在網頁中的使用：


表單是網頁與伺服端程式溝通的主要工具
討論區、留言版、會員登錄等均常使用表單功
能
26
聲音、影像、多媒體在網頁的應用


設定背景音樂
利用 Active X 控制項或其他方式將音樂
和影像、多媒體 (如 Flash 動畫…等) 插
入網頁中播放
27
程式特效


利用 Script 程式或是 Java Applet 之類
的程式可以在網頁中製造各類效果
常見的特效：跟著滑鼠移動的文字、水中
倒影…
28
網頁的設計考量




不同瀏覽器的觀看效果
螢幕解析度與色彩顯示
字型與語系的設定
考量網路的傳輸速度
29
不同的瀏覽器


Netscape 和 Internet Explorer 所支援
的 HTML 標籤就有些許不同, 因此在網頁
中所製作的效果可能會因為瀏覽者所使用
的瀏覽器不同而呈現不一樣的效果
使用者使用的瀏覽器設定也會影響網頁的
外觀
30
螢幕解析度



在高螢幕解析度下設計的網頁, 在低解析
度螢幕上觀看時, 會造成捲動好幾次頁面
才能看到原設計的網頁
目前來說, 800 X 600 解析度的設定值應
該是符合最多人的需求
可以在首頁中宣告一下最佳的瀏覽解析度,
讓瀏覽者有個依據
31
字型與語系

網頁製作時要設定對應的語系編碼
例如, 做繁體中文網頁就要將網頁的語系設
為 Big-5 繁體中文, 這樣才能避免網頁中的文
字出現亂碼

設計網頁時, 最好少用特殊字型, 如果一
定要用, 那麼不妨把它作成圖片
32
網路的傳輸速率

哪些網頁內容會影響網路的傳輸速率？




含有超大圖檔
VRML 虛擬實境
影音多媒體檔案...
在設計網頁時, 除非必要, 不然別放入過
於龐大的檔案
33
FTP 簡介

FTP(File Transfer Protocol)是一種檔
案傳輸通訊協定。這項服務主要是讓使用
者在網路上傳輸檔案。方法為登入有提供
FTP服務的主機，然後將檔案從硬碟(近端
機器)傳輸至該主機(遠端機器)，或是將該
主機上的檔案傳輸至硬碟。
34
FTP 簡介
下載FTP軟體
1. 開啟 IE, 輸入 ftp://ftp.ocit.edu.tw
2. 開啟 upload目錄下載 ffftp.exe( 點兩
下儲存)
3. 安裝 ffftp.exe
35
FTP 簡介
如何連上FTP：



主機
帳號
密碼
單位網頁
w3.ocit.edu.tw
單位帳號
單位密碼
個人網頁
rs2.ocit.edu.tw
僑光email帳號
僑光email密碼
36
FrontPage 簡介
37
FrontPage 簡介
38
FrontPage 簡介



FrontPage 可分成網站及網頁模式。
網站模式的作用, 是方便我們進行網站內
檔案的全盤掌控與管理, 按下網站鈕可切
換至該模式。
按下網頁標籤則可切換到網頁模式, 此模
式會顯示網頁的內容, 也就是我們實際編
輯網頁的場所。
39
網站的 6 種檢視模式





『資料夾』檢視模式
『遠端網站』檢視模式
『報告』檢視模式
『導覽』檢視模式
『超連結』檢視模式
40
網頁的 4 種檢視模式




『設計』檢視模式
『分割』檢視模式
『程式碼』檢視模式
『預覽』檢視模式
41
建立新的網站
42
建立新的網站
43
選擇網站範本


對於初次接觸網頁設計的人, 可從個人網
站這個範本下手, 只要套用佈景主題, 再打
一些文字進去, 就能快速完成個人網站。
若你想白手起家, 可選擇單頁網站或空白
網站。前者會建立一個空白的首頁, 後者
則無, 但同樣都可以讓你從頭開始規劃網
站內容。
44
指定網站資料夾

FrontPage 會事先在「C:\My Documents\」
裡建立一個「My Webs」資料夾, 做為網站
的根目錄, 你可以將自己的網站指定為子
資料夾, 例如「C:\My Webs\myweb」；也
可以將網站放在電腦中的其它位置, 如「D：
\Test」, 只要方便自己管理就行了。
45
輸入文字
請開啟一個 .htm 檔, 將網頁切換到設計檢視
模式中：
46
網頁維護




開啟下載之網頁
利用Frontpage功能編輯
完成後存檔
利用FTP上傳至主機
47
網站維護注意事項

若為個人網頁，所有的網頁檔都「必須」放在這個
www目錄內才能夠被瀏覽。 (w3 則無此限制)

如果日後要維護您的網站，請覆寫已存在的舊檔案即
可。如果看不到新網頁的內容，別忘了按下瀏覽器
「重新整理」按鈕以讓瀏覽器重新取得新網頁的內容。

如果您的網頁還是無法瀏覽，請再次確認以下重點：

是否將網頁全部放置在www目錄下。

首頁是否命名為index.htm或index.html。

個人網址是否正確，應為http://rs2.ocit.edu.tw/~帳號。

單位網址是否正確，應為http://w3.ocit.edu.tw/帳號

圖形或其它網頁路徑是否為「相對路徑」、路徑是否正確。
48

Download Report