國立瑞芳高工電機科 94年度教學觀摩　　　　　　 科 目: 網頁製作 主講人: 蘇孝傑 老師.

Presentation on theme: "國立瑞芳高工電機科 94年度教學觀摩　　　　　　 科 目: 網頁製作 主講人: 蘇孝傑 老師."— Presentation transcript:

1 國立瑞芳高工電機科 94年度教學觀摩　　　　　　 科 目: 網頁製作 主講人: 蘇孝傑 老師

2 認識網站與網頁 一、網站的設計 二、介紹網頁製作軟體- FrontPage

3 網站的設計 網頁：建構網站的基本單位。 首頁：進入網站所看到的第一個網頁。 文字 圖片 動畫 超連結 瑞工網站的首頁

4 網站的設計 網站： 網頁的集合體。 通常網站會用一個「資料夾」來放置設計者所製作的網頁檔案及圖片。 網站架構圖範例

5 網站的設計 網站的規劃設計： 前置作業：確定網站的主題、收集資料、擬定網站架構及規劃網頁內容。 中期作業：編輯與製作網頁，並發送網頁。
擬定網站主題 蒐集網站相關資料 規劃網站架構與 網頁內容 製作網頁 上傳與測試 網站推廣 更新與維護 前置作業 中期製作 後期維護 網站的規劃設計： 前置作業：確定網站的主題、收集資料、擬定網站架構及規劃網頁內容。 中期作業：編輯與製作網頁，並發送網頁。 後期維護：推廣、更新及維護網站。

6 FrontPage基礎實作 一、認識FrontPage的基本功能 二、製作簡單的個人網頁 三、文字、圖片的輸入與編輯 四、設定超連結
五、表格的插入與設定 六、動態網頁元件的設定 七、申請網頁空間與上傳網頁

7 FrontPage基礎實作 認識FrontPage的工作環境： 標題列 用來顯示網頁檔案的路徑 關閉列 用來關閉FrontPage程式
還原/最大鈕 最小化鈕 用來將視窗最小化至工作列上 工具列 用來放置常用的工具按鈕 關閉視窗鈕 用來關閉個別的網頁 檢視列 用來切換檢視網頁的模式 網頁編輯區 是編輯網頁內容的區域

8 FrontPage基礎實作 建立新網頁：直接套用網頁範本或自行編輯網頁內容。 網頁範本交談窗 幾種FrontPage提供的網頁範本

9 FrontPage基礎實作 網頁的基本編輯： 網頁的儲存： 儲存位置下拉式方塊 在此選擇儲存檔案的位置 網頁標題 在此設定網頁的標題名稱
在游標所在位置輸入文字 網頁編輯區 檔案名稱 在此輸入檔案名稱 檔案類型下拉式方塊 選擇要儲存的檔案類型

10 FrontPage基礎實作 文字樣式的設定： 維生素 蛋白質 礦物質 脂肪 粗體 黑色 3 黃色 斜體 紅色 5 青色 底線 藍色 7
亮綠色 字型樣式 字型色彩 字型大小 醒目提示

11 FrontPage基礎實作 段落格式的設定： 設定對齊方式 設定左右縮排距離 設定段落（上 、下）的間距 設定段落內（上、下）的行高
段落交談窗

12 FrontPage進階實作 圖片的加入：直接選用多媒體藝廊所提供的美工圖案或插入自己喜愛的圖片。 加入草莓的圖片，以突顯網頁的主題
插入圖片後的網頁

13 FrontPage進階實作 超連結的建立： 網頁超連結 1 電子郵件超連結 5 書籤超連結 2 檔案超連結 4 網站超連結 3

14 FrontPage基本實作 表格的加入： 利用工具列中的插入表格鈕 ，以滑鼠拉曳出空白表格。 可彙整雜亂的資料，使文件內容整齊易讀。

15 FrontPage基本實作 動態效果的設定： 動態顯示按鈕：在瀏覽網頁時，當游標移到按鈕上時，按鈕就會產生色彩或光影上的變化。
跑馬燈：讓文字在瀏覽視窗中來回移動的網頁動態效果。 設定效果前 填滿色彩 色彩調和 光暈 微光 外凸 各種動態效果

16 FrontPage基本實作 動態效果的設定： 動態顯示按鈕的設定： 設定按鈕上所 設定按鈕所要連結的網頁 要顯示的文字 設定按鈕的色彩
設定按鈕的變化效果 設定按鈕的大小 設定按鈕所要連結的網頁 設定按鈕變化的顏色

17 FrontPage基本實作 動態效果的設定： 跑馬燈： 利用跑馬燈顯示最近消息

18 FrontPage基本實作 班級網站的發送： 將完成的網站發送（上傳）到網站伺服器上 瀏覽者透過網際網路瀏覽我們存放在網站伺服器中的網站
瀏覽者的電腦 自己電腦 瀏覽者透過網站伺服器（web server）瀏覽我們所製作的網站

19 FrontPage進階實作 班級網站的發送： 網站空間的申請： 向學校申請網站空間。 向提供免費或付費網站空間的網站申請。
依照網站中的引導即可完成網站空間的申請

20 FrontPage基本實作 班級網站的發送： 網站的發送： 利用發送Web功能，將網站發送到網站伺服器中。 開啟要發送的網站
輸入發送目的地位址 輸入使用者名稱密碼 發送網站 網站發送流程圖

21 網頁教學觀摩 教學結束 謝謝大家