FrontPage 98 課程

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

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

3. 網路架構

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

5. Web Server 比較

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

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

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

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

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

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

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

13. FrontPage Editor • 一般：所見即所得 • html：程式語言 • 預覽：預覽網路上模式註：建議用工具列上的瀏覽器預覽，但更動設計後，瀏覽器需按F5更新內容。

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

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

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

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

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

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

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

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

22. 一、Gif與Jpg的比較

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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