Chapter 1 ~ 3
數位化 FrontPage
實習教師  楊 騏
學習索引
網站 vs 網頁
網站架設流程
如何製作網頁
認識 FrontPage
實際操作 FrontPage
數位化 FrontPage   實習教師:楊 騏
瀏覽網站的經驗
數位化 FrontPage   實習教師:楊 騏
琳瑯
滿目
琳瑯
滿目
瀏覽網站的經驗(續)
213 班網
首頁
213 班網
首頁
數位化 FrontPage   實習教師:楊 騏
瀏覽網站的經驗(續)
213
成員介紹
213
成員介紹
數位化 FrontPage   實習教師:楊 騏
網站、網頁與首頁
網頁設計 FrontPage   實習教師:楊 騏
( 本課 1-4 )
 站?網
 包含了 多許 網頁
 抽象的概念
 ?網頁
 包含了文字、 片、表格等圖
 具 的 案體 檔
4 . h t m l4 . h t m l
網站、網頁與首頁(續)
網頁設計 FrontPage   實習教師:楊 騏
http://www2.slhs.tp.edu.tw/~712/index.htmhttp://www2.slhs.tp.edu.tw/~712/index.htm
( 本課 1-4 )
首 ?頁
 可以是:
檔名 副檔名
index html
default htm
asp
php http://www2.slhs.tp.edu.tw/~712/http://www2.slhs.tp.edu.tw/~712/
網頁能做什麼?
數位化 FrontPage   實習教師:楊 騏
海綿寶寶
官方網站
海綿寶寶
官方網站
網頁能做什麼?(續)
數位化 FrontPage   實習教師:楊 騏
Arashi
後援網站
Arashi
後援網站
網頁能做什麼?(續)
數位化 FrontPage   實習教師:楊 騏
個人網站個人網站
網頁能做什麼?(續)
$12500
數位化 FrontPage   實習教師:楊 騏
站架 流程網 設
( 本課 1-5 ~ 1-6 )
初步 站規劃網
 定 站主 型、 格、欲吸引的目 族群確 網 題類 風 標
 集 站 料蒐 網 資
 作 站所需的素材製 網
數位化 FrontPage   實習教師:楊 騏
網站架設流程
(課本 1-7 )
建立網站結構
 網站導覽圖:
一個網站中,網頁與網頁之間的層級結構圖
數位化 FrontPage   實習教師:楊 騏
網站架設流程
(課本 1-7 )
網站導覽圖之比較
數位化 FrontPage   實習教師:楊 騏
單純的影像單純的影像 有意義、能作用的導覽
圖
有意義、能作用的導覽
圖
站架 流程網 設
( 本課 1-9 、 1-11 ~ 14 )
 站空 申網 間 請
 操作實機 FTP 上傳
 校主 位址:學 機 203.72.185.5
 :帳號 學號
密 :身份 字 (英文小 )碼 證 號 寫
 址 :網 為 http://mail.slhs.tp.edu.tw/~ 自己的帳號
數位化 FrontPage   實習教師:楊 騏
站架 流程網 設
( 本課 1-10 )
設計網頁
 插入文字、 片、加以美化等圖
 站發佈網
 到 路上發佈 網
 常更新經 網頁
數位化 FrontPage   實習教師:楊 騏
如何製作網頁?
使用「所見即
所得」的軟體
編輯
使用純文字編
輯 例如:記事
本、 Notepad++
網 頁
該如何製作?
網頁設計 FrontPage   實習教師:楊 騏
如何製作網頁?(續)
製作網頁的軟體
 所見即所得
1. Microsoft Office FrontPage (FP)
2. Adobe DreamWeaver (DW)
網頁設計 FrontPage   實習教師:楊 騏
如何製作網頁?(續)
3. Microsoft Office SharePoint Designer
4. Microsoft Expression Web
網頁設計 FrontPage   實習教師:楊 騏
認識 FrontPage (實機操作)
網頁設計 FrontPage   實習教師:楊 騏
工作
窗格
工作
窗格
網頁檢視
模式
網頁檢視
模式
設計、分割、
程式碼、預覽
設計、分割、
程式碼、預覽
認識 FrontPage (續)
網頁設計 FrontPage   實習教師:楊 騏
開新網頁、開啟舊檔
、儲存檔案
開新網頁、開啟舊檔
、儲存檔案
利用 本建立網頁範 網頁
認識 FrontPage (續)
網頁設計 FrontPage   實習教師:楊 騏
 站管理 窗:要打 站才 示網 視 開網 會顯
認識 FrontPage (續)
資料夾、遠端網站、報告
、導覽、超連結、工作
資料夾、遠端網站、報告
、導覽、超連結、工作
網站管理
視窗
網站管理
視窗
網頁設計 FrontPage   實習教師:楊 騏
課堂作業:製作個人簡介的網頁
網頁設計 FrontPage   實習教師:楊 騏
1. 網頁標
題
2. 插入文
字
3. 插入圖
片
5. 插入超連
結
4. 圖片有替代顯示
文字
6. 設定背
景
補充:網頁標準
W3C
 W3C 標準驗證
• http://validator.w3.org/
• http://jigsaw.w3.org/css-validator/
無障礙
 無障礙網頁健檢
• http://www.webguide.nat.gov.tw/wSite/lp?ctNode=142
網頁設計 FrontPage   實習教師:楊 騏
補充:網頁標準(續)
通過 W3C 的網站
網頁設計 FrontPage   實習教師:楊 騏
補充:網頁標準(續)
教學網站也有通過 W3C
網頁設計 FrontPage   實習教師:楊 騏
補充:網頁標準(續)
未通過 W3C 的網站
網頁設計 FrontPage   實習教師:楊 騏
補充:網頁標準(續)
通過無障礙 A+ 的網站
網頁設計 FrontPage   實習教師:楊 騏
補充:網頁標準(續)
未通過無障礙 A 的網站
網頁設計 FrontPage   實習教師:楊 騏
高二數位化
下課了!
感謝大家的聆聽!

FrontPage2003 Ch1~3