FrontPage 2003 網站製作簡介 Lecturer 許明宗 僑光行政人員訓練課程.

Presentation on theme: "FrontPage 2003 網站製作簡介 Lecturer 許明宗 僑光行政人員訓練課程."— Presentation transcript:

1 FrontPage 2003 網站製作簡介 Lecturer 許明宗 僑光行政人員訓練課程

2 網頁（站）的製作流程

3 網站的規劃 先將整個網站架構規劃好, 然後再分別製作出不同的網頁, 讓網頁間彼此相連。這樣完整的架構就稱為網站

4 網站放在哪裡 一般網站放置在稱為伺服器 (Server) 的電腦中, 除了伺服器在維修或壞掉時關機, 其餘時間都可瀏覽
除自行架設伺服器外, 一般個人與小企業、工作室, 可向 ISP (Internet Service Provider 網路服務提供者) 申請, 在他們的伺服器上租一塊空間放置網站

5 網頁的組成元素 文字 圖片 超連結 其他元素

6 網頁文字 網頁元素中最基本、最重要的內容 優勢：檔案小、速度快
所佔的檔案空間非常小 (一個中文字 2 Bytes) 進入一個純文字的網頁時, 大約只要 1、2 秒鐘就可以看到整篇網頁 可利用 HTML 的語法以及新的 CSS 樣式表來改變色彩、格式與大小等屬性, 滿足不同的設計需求

7 變換網頁文字的限制 瀏覽者的電腦裡若沒有網頁中使用的字體, 瀏覽到該網頁時, 就只能以系統預設的字型顯示
解決方法可將把網頁文字做成圖形, 不過檔案大小會增大很多

8 關於網頁圖片 常應用在 WWW 上的圖形有 JPG、GIF 和 PNG 幾種格式 這些格式除了具有壓縮比例高的特性之外, 也具有跨平台的優點
不管瀏覽者用的是什麼作業系統, 都能直接在瀏覽器上看到這幾種格式的圖片

9 網頁圖片的應用

10 關於超連結 點選頁面上超連結可以： 網頁中不論是文字或圖形都可以加上超連結標記 像穿越任意門一般迅速到達要去的地方 下載檔案
寄 給網站的主人... 網頁中不論是文字或圖形都可以加上超連結標記

11 超連結的種類 連往別的網站的外部超連結 連結自己網站內部 Web Page 的內部超連結 連結同一頁面中部分內容的書籤
連至檔案以下載之的下載超連結 可以寄 的 超連結 按下或滑鼠移上時可以啟動程式產生特效的超連結

12 其他元素 表格、表單 聲音、影像、多媒體 程式特效 其他各類多媒體 Plug-in

13 表格、表單 表格在網頁中的使用： 表單在網頁中的使用： 可以做為一般表格使用 無邊框的表格常被利用來做網頁整體排版
表單是網頁與伺服端程式溝通的主要工具 討論區、留言版、會員登錄等均常使用表單功能

14 聲音、影像、多媒體在網頁的應用 設定背景音樂
利用 Active X 控制項或其他方式將音樂和影像、多媒體 (如 Flash 動畫…等) 插入網頁中播放

15 程式特效 利用 Script 程式或是 Java Applet 之類的程式可以在網頁中製造各類效果
常見的特效：跟著滑鼠移動的文字、水中倒影…

16 網頁的設計考量 不同瀏覽器的觀看效果 螢幕解析度與色彩顯示 字型與語系的設定 考量網路的傳輸速度

17 不同的瀏覽器 Netscape 和 Internet Explorer 所支援的 HTML 標籤就有些許不同, 因此在網頁中所製作的效果可能會因為瀏覽者所使用的瀏覽器不同而呈現不一樣的效果 使用者使用的瀏覽器設定也會影響網頁的外觀

18 螢幕解析度 在高螢幕解析度下設計的網頁, 在低解析度螢幕上觀看時, 會造成捲動好幾次頁面才能看到原設計的網頁
目前來說, 800 X 600 解析度的設定值應該是符合最多人的需求 可以在首頁中宣告一下最佳的瀏覽解析度, 讓瀏覽者有個依據

19 字型與語系 網頁製作時要設定對應的語系編碼 設計網頁時, 最好少用特殊字型, 如果一定要用, 那麼不妨把它作成圖片
例如, 做繁體中文網頁就要將網頁的語系設為 Big-5 繁體中文, 這樣才能避免網頁中的文字出現亂碼 設計網頁時, 最好少用特殊字型, 如果一定要用, 那麼不妨把它作成圖片

20 網路的傳輸速率 哪些網頁內容會影響網路的傳輸速率？ 在設計網頁時, 除非必要, 不然別放入過於龐大的檔案 含有超大圖檔 VRML 虛擬實境
影音多媒體檔案... 在設計網頁時, 除非必要, 不然別放入過於龐大的檔案

21 FrontPage 2003 簡介

22 FrontPage 簡介 (cont’d)

23 FrontPage 2003 簡介 (cont’d) FrontPage 可分成網站及網頁模式。
網站模式的作用, 是方便我們進行網站內檔案的全盤掌控與管理, 按下網站鈕可切換至該模式。 按下網頁標籤則可切換到網頁模式, 此模式會顯示網頁的內容, 也就是我們實際編輯網頁的場所。

24 網站的 6 種檢視模式 『資料夾』檢視模式 『遠端網站』檢視模式 『報告』檢視模式 『導覽』檢視模式 『超連結』檢視模式

25 網頁的 4 種檢視模式 『設計』檢視模式 『分割』檢視模式 『程式碼』檢視模式 『預覽』檢視模式

26 在磁碟中利用範本建立新的網站 選取[工作窗格]的[開新檔案] 選取[其他網站範本]

27 在磁碟中利用範本建立新的網站 (cont’d)

28 在磁碟中利用範本建立新的網站 (cont’d)

29 選擇網站範本 對於初次接觸網頁設計的人, 可從個人網站這個範本下手, 只要套用佈景主題, 再打一些文字進去, 就能快速完成個人網站。
若你想白手起家, 可選擇單頁網站或空白網站。前者會建立一個空白的首頁, 後者則無, 但同樣都可以讓你從頭開始規劃網站內容。

30 指定新網站的位置 Windows 會事先在「C:\My Documents\」裡建立一個「My Webs」資料夾，做為網站的根目錄，你可以將自己的網站指定為其中的子資料夾，例如： 「C:\ My Documents\ My Webs\myweb」 也可以將網站放在電腦中的其它位置，例如 「D：\Test」 方便自己管理就行了。

31 在支授FPSE的伺服器上利用範本建立新的網站
選取[工作窗格]的[開新檔案] 選取[其他網站範本]

32 在支授FPSE的伺服器上利用範本建立新的網站 (cont’d)

33 選擇網站範本 對於初次接觸網頁設計的人, 可從個人網站這個範本下手, 只要套用佈景主題, 再打一些文字進去, 就能快速完成個人網站。
若你想白手起家, 可選擇單頁網站或空白網站。前者會建立一個空白的首頁, 後者則無, 但同樣都可以讓你從頭開始規劃網站內容。

34 指定新網站的位置 指定新網站的網址（需要先新增 FPSE 管理員） FPSE 所在位置的網址

35 新增資料至既有網頁 請開啟一個 .htm 檔, 將網頁切換到設計檢視模式中：

36 新增網頁至網站 在[網站]模式的[資料夾]或是[資料夾清單]視窗按右鍵，選擇[新增]  [空白網頁]

37 修改網站架構 切換到[網站]模式下的[導覽]模式 調整既有的網站架構 新增網頁到既有的網站架構 使用滑鼠左鍵拖曳
在[資料夾清單]新增要放置網頁的資料夾 在該資料夾內新增網頁 將新網頁加入網站架構中（使用滑鼠左鍵拖曳）

38 新增新的空白網站 [檔案]  [開啟網站] 直接開啟既有的空白資料夾或在[開啟網站]的對話框開啟新的資料夾

39 匯入網站 匯入至一個新的資料夾 匯入網站精靈 FPSE，WebDAV，FTP，檔案系統，HTTP 匯入至網站 新增檔案，新增資料夾，從網站

40 檔案處理 在[資料夾清單]或在[網站]模式的[資料夾]視窗進行 搬移 複製 刪除 更名 [網站]模式的操作不用儲存！

41 網頁維護 開啟下載之網頁或連線到支援FPSE之網站 利用 FrontPage 功能編輯 完成後存檔 支援FPSE之網站可以同步更新
上傳網站內容至伺服器主機

42 網站維護注意事項 若為個人網頁，所有的網頁檔都「必須」放在系統指定的目錄內才能夠被瀏覽。
如果日後要維護網站，請覆寫已存在的舊檔案即可。如果看不到新網頁的內容，別忘了按下瀏覽器「重新整理」按鈕以讓瀏覽器重新取得新網頁的內容。 如果您的網頁還是無法瀏覽，請再次確認以下重點： 是否將網頁全部放置在系統指定的目錄下。 首頁是否命名是否正確 (index.htm或index.html)。 個人網址是否正確。 圖形或其它網頁路徑是否為「相對路徑」、路徑是否正確。