frontpage2003 ch1~3
DESCRIPTION
TRANSCRIPT
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 Designer4. 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 實習教師:楊 騏
高二數位化下課了!
感謝大家的聆聽!