資材部 洪富一 編箸 TEL:3046 E-mail：hfe@cch.org.tw FrontPage 98 課程 資材部 洪富一 編箸 TEL:3046 E-mail：hfe@cch.org.tw

FrontPage 98 網路架構 front page 98 安裝 front page 98 簡介

網路架構

Front Page 98 安裝 Personal Web Sever 安裝 Front page 98 安裝 中文化介面安裝 Image Composer 安裝

Web Server 比較

Web Server 安裝 Microsoft Personal Web server (微軟網站、\\網路上芳鄰\Pur014 \frontpage98\個人伺服器安裝程式\twpwssetup.exe) Frontpage Personal Web server (frontpage 98 內附)

Front Page 98 安裝 Front Page 98 光碟片 (setup.exe) 院內網路 (\\網路上芳鄰\Pur014\frontpage98\setup.exe) 中文化介面安裝 (網路上芳鄰\Pur014\front page98\中文化介面安裝程式\FP98Chinese\setup.exe)

Front Page 98 安裝 注意事項 安裝前檢查電腦名稱 \\控制台\網路\識別資料\電腦名稱 安裝Microsoft Personal Web Server 者，請於安裝Front Page 98 前安裝並啟動。 不可同時安裝Front Page、Microsoft Personal Web Server。 安裝中文化介面前，一定要先將Front page 98關閉。

Front Page 98 簡介 FrontPage Explorer 網站、網頁管理功能 FrontPage Editor 網頁編輯、製作功能

Front Page 98 簡介-建立 開啟 FrontPage 98 (1)開啟現有的FrontPage Web (2)建立一個新FrontPage Web 第一步：1.單頁Web 2.匯入現存網站 3.從精靈或範本 第二步：1.輸入FrontPage Web 標題 2.變更…檔案位置與名稱 ex:\\pru014\job 網站名稱 電腦名稱不可更動 網站檔案名稱(英文)

匯入現存網站 步驟： 1.建立新FrontPage Web 2.點選“匯入現存網站” 4.變更→\\電腦名稱\test (取名test) 5.點選全球資訊網→輸入網站位址(http://www.cch.org.tw/history/default.htm) 6.修改“只限此網頁和【20】以下的階層” 7.完成!! 英文

FrontPage Explorer 資料來：檔案總管 報告：全部檔案明細 導覽：網站組織圖(連結導覽列) 超連狀態：檢視超連結狀況 佈置主題：自動背景配置 工作：分工合作模式

FrontPage Editor 一般：所見即所得 html：程式語言

Web Page 的誕生過程 擬定網頁主題 蒐集相關資料 規劃網頁內容 繪製架構草圖 開始製作網頁 上傳與測試 推廣網頁 更新與維護

網站web的基本操作 (FrontPage Explorer) 開啟 or檔案(F)→ 入門→開啟現存的Front Page Web 入門→建立一個新的Front Page Web 關閉 檔案(F)→關閉Web 刪除 檔案(F)→刪除Web 更改Web資料夾名稱及標題 工具(T)→Web設定→設定→Web名稱、標題

儲存檔案 Front Page Explorer 任何更動均會自動儲存 Editor儲存 1. URL(網頁名稱)：一定要用“英文”命名ex.Default.htm、newpage1.htm…. 2.標題：該網頁標題(方便瞭解該網頁內容) )ex：首頁、…. 3.有插入圖形時：需另儲存圖片。

Web Page 的組成元素 (FrontPage Editor) 文字 圖形 超連結 表單：互動介面 CGI：共同閘道介面(程式語言) Component：特定功能程式，計數器.. 特殊效果：聲音、影像、跑馬燈、JAVA、ActiveX Control、Plug-In、Script、VBScript …….。

Web Page 的組成元素-文字 應用 1.標題：網頁標題(主題、醒目) 2.大小：俺俺俺俺俺俺俺思春竹 3.樣式：注意字型、底線等…. 4.顏色：勿濫用(別在白底上寫上白字)

一、輸入文字 中文輸入的頁面設定 檔案(F)→內容→語系→繁體中文(Big 5) 網頁上按滑鼠右鍵→網頁內容…….. 自動換行、段落、換行、註解文字、段落樣式、加入分隔線、……. 文字屬性：字形、樣式、底線、大小、顏色、其它效果(底線、刪除線、打字機)、特殊樣式(閃爍….)、上標、下標。 註：別使用奇怪的字型，別人電腦內如果沒有該字型，你做了也是白做。

二、文字-項目符號及編號 格式(O)→項目符號及編號→圖片、項目、編號、其它 (工具列上也有) 以增加縮排、減少縮排來製作文章層次。 製作摺疊大綱：開啟時可摺疊大綱(打勾) 1.每層次需增加縮排兩次 (次項目符號出現) 2.游標放於第一段，勾選“開啟時可摺疊大綱”

Web Page 的組成元素-圖形 格式 1.JPG 2.GIF 應用 1.標題：醒目、動人、誘人‧…… 2.底圖：網頁的底圖 3.主圖：大、小圖形，美化網頁。 4.連結按鈕：使用小圖示取代文字連結。 5.廣告：廣告圖示。

一、Gif與Jpg的比較

二、插入圖形 插入(I)→圖片 1.現有網站圖片 2.美工圖庫→多媒體藝廊 3.電腦各磁碟中的圖片 4.Internet網站上之圖片

三、圖形編輯(1) 刪除Delete 大小、搬移、複製、對齊 圖片內容：圖形上按滑鼠右鍵→圖片內容 一般：圖片來源、類型、替代圖片&文字、預設超連結(位置) 視訊：特殊效果，後續…. 外觀：版面配置(外框線)、大小

四、圖形編輯(2) 圖片工具列 1.圖片中加上文字 2.設定透明色彩 3.剪裁 4.退色 5.黑白圖 6.翻轉 7.斜角 8.重新取樣 9.重設圖片(未儲存前) 復原

五、圖形編輯(3) 圖文並列(版面配置)p.5-45 網頁背景 滑鼠右鍵→網頁內容→背景←格式(O) 1.指定背景與色彩→背景圖、單色預設為白色→圖形名稱→浮水印 2.從網頁取得背景與色彩 (套用首頁背景，統一網站背景)

Web Page 的組成元素-超連結 連結媒介 1.文字連結 2.圖形連結 連結的目的地 1.網頁內的連結：同一網頁的另一個位置(書籤) 2.網頁的連結：首頁→子頁→子頁..→首頁 3.網站的連結：網站首頁→其它網站首頁、子頁 4.E-mail的連結：自動開啟電子郵件軟體 5.檔案的連結：連結到一個檔案

超連結之建立 點選文字或圖形→插入(I)→超連結→連結位址 *連到新網頁→選用空白或套用版面。 網頁內的連結 1.建立書籤標記：點選網頁內連結點文字或圖形→編輯(E)→書籤(標記點) 2.……→超連結→點選書籤 影像地圖：一張圖形上，切割後可做不同之超連結。 圖形工具列(矩形、圓形、多邊形)→建立作用區→超連結

超連結的管理 Front Page Explorer 超連結 Front Page Explorer 超連結狀態 直接點選問題連結→編輯超連結→取代超連結為→點選所有or本網頁做變更 註：自動修復，當網頁一個超連結更動時，Front Page 會自動詢問是否自動更新相關頁面的連結，大部份選擇”是“。

精靈與範本 精靈 公司展示精靈 討論網站精靈 匯入web精靈(參照筆記第十頁) Front page wizard(表單)精靈 範本 網站範本(p.12-8) 網頁範本(p.12-23)

導覽列 Front Page Explorer 導覽→建立網站架構 工具(T)→共用邊框(上、下、左、右) or 於Editor內，工具→共用邊框 Front Page Editor 加入導覽列： 插入(I)→導覽列→導覽內容 or右鍵雙點[按鈕] 按鈕內容： 父層：往本網頁的上一層網頁 同一層：往本網頁的同一層網頁 前一個後一個：同一層中，前一頁、後一頁 子層級：…… 最上層：首頁、其它網站…. 附加網頁：首頁、父網頁

表格 建立表格 1.工具列上插入表格鈕 欄數*列數 2.表格(A)→插入表格 列數、欄數、對齊方式、邊框粗細、邊界、格線粗細、寬度 3.表格(A)→手繪表格 筆&橡皮擦….

表格的編輯 1.選取 2.插入表格、欄列、格、標題 3.刪除、合併、分割、…… 4.儲存格內容 版面配置、大小、背景、格線色彩、儲存格合併 5.表格內容 版面配置、大小、背景、格線色彩

表格的運用 輸入文字 圖片 隱藏式表格 表格中的表格

分割頁框 建立頁框 檔案(F)→開新檔案→頁框 1.設定啟始網頁(連結已存在網頁) 2.開新網頁(空白) 分割頁框 頁框(R)→分割頁框 or 直接拉出 頁框的儲存 整個頁面之儲存(檔名、標題)→各頁框之儲存(檔名、標題)

頁框之超連結 目標網頁框之設定 1.點選使用中的頁框 2.其它功能 網頁預設(main) 相同頁框 整頁 開新視窗 父頁框(巢狀頁框用)

頁框內容 頁框(R)→頁框內容(P) 名稱、頁框大小、瀏覽時可否改變大小、是否顯示捲軸、邊界、初始網頁 頁框(R)→網頁內容(R) 頁框間距 是否顯示框線

特殊效果-音效 可用之聲音檔案之副檔名 .wav .midi .mid .aif .aifc .aiff .au .snd 背景聲音 網頁內容→背景聲音 超連結聲音 文字或圖形→超連結→聲音檔

特殊效果-影像 插入(I)→元件→視訊 視訊內容 顯示控制面板、播放次數、間隔時間、播放時機 超連結影像…….

特殊效果-其它 跑馬燈 插入(I)→元件→跑馬燈 方向、速度、高、寬、次數、背景顏色、移動方式、對齊方式 其它 JAVA、ActiveX Control、Plug-In、Script、VBScript

動態網頁 動態顯示按鈕 文字按鈕 插入(I)→元件→動態顯示按鈕圖形 圖片按鈕 ……→自訂→按鈕圖、盤旋時圖 動態物件：從四面八方飛入物件 網頁切換：換頁之特殊效果

佈置主題 選定佈置主題 選擇 鮮豔的顏色 使用中的圖片 背景圖片 網頁橫幅 佈置主題中之元件 於Explorer之導覽列更改名稱

網頁發佈(上傳) 檔案(F)→發佈 發佈Web→輸入網址 http://www.taconet.com.tw/(帳號) 輸入使用者帳號&碼密 FTP Sever Name:www.taconet.com.tw Directory Path: www.taconet.com.tw/(帳號) 注意： 1.taconet要求首頁名稱為index.htm，上傳前要先更改。 2.往後更新上傳，要勾選只上傳有改變的網頁