狠狠撸

狠狠撸Share a Scribd company logo
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   实习教师:杨 騏
高二數位化
下課了!
感謝大家的聆聽!

More Related Content

Viewers also liked (18)

Check Up From The Neck Up
Check Up From The Neck UpCheck Up From The Neck Up
Check Up From The Neck Up
jmdurkin
?
網頁標準(FrontPage 213)
網頁標準(FrontPage 213)網頁標準(FrontPage 213)
網頁標準(FrontPage 213)
楊 騏
?
Bt Homepage 2009 Before After
Bt Homepage 2009 Before AfterBt Homepage 2009 Before After
Bt Homepage 2009 Before After
guest6c25e06
?
Expocomm Mario Massone
Expocomm Mario MassoneExpocomm Mario Massone
Expocomm Mario Massone
guesta6d457b4
?
Cochin Flower Show 2010
Cochin Flower Show 2010Cochin Flower Show 2010
Cochin Flower Show 2010
Johnson C.J
?
Psts Busbehav Profilefin
Psts Busbehav ProfilefinPsts Busbehav Profilefin
Psts Busbehav Profilefin
Satish Kale
?
Procedures, the Pop-11 stack and debugging
Procedures, the Pop-11 stack and debuggingProcedures, the Pop-11 stack and debugging
Procedures, the Pop-11 stack and debugging
Rich Price
?
Mobile On Education
Mobile On EducationMobile On Education
Mobile On Education
frambla
?
Lets take Mumbai's water crisis HEAD ON
Lets take Mumbai's water crisis HEAD ONLets take Mumbai's water crisis HEAD ON
Lets take Mumbai's water crisis HEAD ON
Aziz Khatri
?
FP2003 ch 3~5
FP2003 ch 3~5FP2003 ch 3~5
FP2003 ch 3~5
楊 騏
?
How to Play The Go Game
How to Play The Go GameHow to Play The Go Game
How to Play The Go Game
Myles Nye
?
Getting Results - Epics Purdue - 10 Sept 2008
Getting Results - Epics Purdue - 10 Sept 2008Getting Results - Epics Purdue - 10 Sept 2008
Getting Results - Epics Purdue - 10 Sept 2008
enginerd
?
20120920 Soutrik Portfolio Medium
20120920 Soutrik Portfolio Medium20120920 Soutrik Portfolio Medium
20120920 Soutrik Portfolio Medium
soutrikdd
?
Ag Stravaganza Jeopardy
Ag Stravaganza JeopardyAg Stravaganza Jeopardy
Ag Stravaganza Jeopardy
Dan Karn
?
Week6
Week6Week6
Week6
Rich Price
?
NorthBridge Technology Overview
NorthBridge Technology OverviewNorthBridge Technology Overview
NorthBridge Technology Overview
Andrew Goodwin
?
New publishers help site
New publishers help siteNew publishers help site
New publishers help site
guest6c25e06
?
Indian Scientific Heritage part1
Indian Scientific Heritage part1Indian Scientific Heritage part1
Indian Scientific Heritage part1
versatile36
?
Check Up From The Neck Up
Check Up From The Neck UpCheck Up From The Neck Up
Check Up From The Neck Up
jmdurkin
?
網頁標準(FrontPage 213)
網頁標準(FrontPage 213)網頁標準(FrontPage 213)
網頁標準(FrontPage 213)
楊 騏
?
Bt Homepage 2009 Before After
Bt Homepage 2009 Before AfterBt Homepage 2009 Before After
Bt Homepage 2009 Before After
guest6c25e06
?
Cochin Flower Show 2010
Cochin Flower Show 2010Cochin Flower Show 2010
Cochin Flower Show 2010
Johnson C.J
?
Psts Busbehav Profilefin
Psts Busbehav ProfilefinPsts Busbehav Profilefin
Psts Busbehav Profilefin
Satish Kale
?
Procedures, the Pop-11 stack and debugging
Procedures, the Pop-11 stack and debuggingProcedures, the Pop-11 stack and debugging
Procedures, the Pop-11 stack and debugging
Rich Price
?
Mobile On Education
Mobile On EducationMobile On Education
Mobile On Education
frambla
?
Lets take Mumbai's water crisis HEAD ON
Lets take Mumbai's water crisis HEAD ONLets take Mumbai's water crisis HEAD ON
Lets take Mumbai's water crisis HEAD ON
Aziz Khatri
?
FP2003 ch 3~5
FP2003 ch 3~5FP2003 ch 3~5
FP2003 ch 3~5
楊 騏
?
How to Play The Go Game
How to Play The Go GameHow to Play The Go Game
How to Play The Go Game
Myles Nye
?
Getting Results - Epics Purdue - 10 Sept 2008
Getting Results - Epics Purdue - 10 Sept 2008Getting Results - Epics Purdue - 10 Sept 2008
Getting Results - Epics Purdue - 10 Sept 2008
enginerd
?
20120920 Soutrik Portfolio Medium
20120920 Soutrik Portfolio Medium20120920 Soutrik Portfolio Medium
20120920 Soutrik Portfolio Medium
soutrikdd
?
Ag Stravaganza Jeopardy
Ag Stravaganza JeopardyAg Stravaganza Jeopardy
Ag Stravaganza Jeopardy
Dan Karn
?
NorthBridge Technology Overview
NorthBridge Technology OverviewNorthBridge Technology Overview
NorthBridge Technology Overview
Andrew Goodwin
?
New publishers help site
New publishers help siteNew publishers help site
New publishers help site
guest6c25e06
?
Indian Scientific Heritage part1
Indian Scientific Heritage part1Indian Scientific Heritage part1
Indian Scientific Heritage part1
versatile36
?

More from 楊 騏 (20)

《為什麼我们的关係总是卡卡的》读书报告懒人包
《為什麼我们的关係总是卡卡的》读书报告懒人包《為什麼我们的关係总是卡卡的》读书报告懒人包
《為什麼我们的关係总是卡卡的》读书报告懒人包
楊 騏
?
《无法测量的领导艺术》读书报告懒人包
《无法测量的领导艺术》读书报告懒人包《无法测量的领导艺术》读书报告懒人包
《无法测量的领导艺术》读书报告懒人包
楊 騏
?
《就业的终结》读书报告懒人包
《就业的终结》读书报告懒人包《就业的终结》读书报告懒人包
《就业的终结》读书报告懒人包
楊 騏
?
3顿列印自造甜点-前导简报
3顿列印自造甜点-前导简报3顿列印自造甜点-前导简报
3顿列印自造甜点-前导简报
楊 騏
?
视觉化程式语言尝辞驳辞
视觉化程式语言尝辞驳辞视觉化程式语言尝辞驳辞
视觉化程式语言尝辞驳辞
楊 騏
?
運算思維挑戰賽 推動簡報
運算思維挑戰賽 推動簡報運算思維挑戰賽 推動簡報
運算思維挑戰賽 推動簡報
楊 騏
?
高中多元选修课程「3顿列印」课程大纲
高中多元选修课程「3顿列印」课程大纲高中多元选修课程「3顿列印」课程大纲
高中多元选修课程「3顿列印」课程大纲
楊 騏
?
备审资料製作经验分享座谈投影片
备审资料製作经验分享座谈投影片备审资料製作经验分享座谈投影片
备审资料製作经验分享座谈投影片
楊 騏
?
厂肠补谤迟肠丑研习投影片
厂肠补谤迟肠丑研习投影片厂肠补谤迟肠丑研习投影片
厂肠补谤迟肠丑研习投影片
楊 騏
?
资讯研习笔丑辞迟辞颁补辫投影片
资讯研习笔丑辞迟辞颁补辫投影片资讯研习笔丑辞迟辞颁补辫投影片
资讯研习笔丑辞迟辞颁补辫投影片
楊 騏
?
空拍影片后製剪接
空拍影片后製剪接空拍影片后製剪接
空拍影片后製剪接
楊 騏
?
一分鐘读懂电脑科学
一分鐘读懂电脑科学一分鐘读懂电脑科学
一分鐘读懂电脑科学
楊 騏
?
和平特色成果投影片
和平特色成果投影片和平特色成果投影片
和平特色成果投影片
楊 騏
?
骋辞辞驳濒别新手使用指南
骋辞辞驳濒别新手使用指南骋辞辞驳濒别新手使用指南
骋辞辞驳濒别新手使用指南
楊 騏
?
Week3 217 2003
Week3 217 2003Week3 217 2003
Week3 217 2003
楊 騏
?
軟體工程 線上遊戲 設計文件簡報
軟體工程 線上遊戲 設計文件簡報軟體工程 線上遊戲 設計文件簡報
軟體工程 線上遊戲 設計文件簡報
楊 騏
?
Photo Cap 投影片
Photo Cap 投影片Photo Cap 投影片
Photo Cap 投影片
楊 騏
?
Blue Apple 規格書簡報
Blue Apple 規格書簡報Blue Apple 規格書簡報
Blue Apple 規格書簡報
楊 騏
?
創造與生活 作品設計與實做
創造與生活 作品設計與實做創造與生活 作品設計與實做
創造與生活 作品設計與實做
楊 騏
?
彼得林區選股戰略 讀書報告
彼得林區選股戰略 讀書報告彼得林區選股戰略 讀書報告
彼得林區選股戰略 讀書報告
楊 騏
?
《為什麼我们的关係总是卡卡的》读书报告懒人包
《為什麼我们的关係总是卡卡的》读书报告懒人包《為什麼我们的关係总是卡卡的》读书报告懒人包
《為什麼我们的关係总是卡卡的》读书报告懒人包
楊 騏
?
《无法测量的领导艺术》读书报告懒人包
《无法测量的领导艺术》读书报告懒人包《无法测量的领导艺术》读书报告懒人包
《无法测量的领导艺术》读书报告懒人包
楊 騏
?
《就业的终结》读书报告懒人包
《就业的终结》读书报告懒人包《就业的终结》读书报告懒人包
《就业的终结》读书报告懒人包
楊 騏
?
3顿列印自造甜点-前导简报
3顿列印自造甜点-前导简报3顿列印自造甜点-前导简报
3顿列印自造甜点-前导简报
楊 騏
?
视觉化程式语言尝辞驳辞
视觉化程式语言尝辞驳辞视觉化程式语言尝辞驳辞
视觉化程式语言尝辞驳辞
楊 騏
?
運算思維挑戰賽 推動簡報
運算思維挑戰賽 推動簡報運算思維挑戰賽 推動簡報
運算思維挑戰賽 推動簡報
楊 騏
?
高中多元选修课程「3顿列印」课程大纲
高中多元选修课程「3顿列印」课程大纲高中多元选修课程「3顿列印」课程大纲
高中多元选修课程「3顿列印」课程大纲
楊 騏
?
备审资料製作经验分享座谈投影片
备审资料製作经验分享座谈投影片备审资料製作经验分享座谈投影片
备审资料製作经验分享座谈投影片
楊 騏
?
厂肠补谤迟肠丑研习投影片
厂肠补谤迟肠丑研习投影片厂肠补谤迟肠丑研习投影片
厂肠补谤迟肠丑研习投影片
楊 騏
?
资讯研习笔丑辞迟辞颁补辫投影片
资讯研习笔丑辞迟辞颁补辫投影片资讯研习笔丑辞迟辞颁补辫投影片
资讯研习笔丑辞迟辞颁补辫投影片
楊 騏
?
空拍影片后製剪接
空拍影片后製剪接空拍影片后製剪接
空拍影片后製剪接
楊 騏
?
一分鐘读懂电脑科学
一分鐘读懂电脑科学一分鐘读懂电脑科学
一分鐘读懂电脑科学
楊 騏
?
和平特色成果投影片
和平特色成果投影片和平特色成果投影片
和平特色成果投影片
楊 騏
?
骋辞辞驳濒别新手使用指南
骋辞辞驳濒别新手使用指南骋辞辞驳濒别新手使用指南
骋辞辞驳濒别新手使用指南
楊 騏
?
Week3 217 2003
Week3 217 2003Week3 217 2003
Week3 217 2003
楊 騏
?
軟體工程 線上遊戲 設計文件簡報
軟體工程 線上遊戲 設計文件簡報軟體工程 線上遊戲 設計文件簡報
軟體工程 線上遊戲 設計文件簡報
楊 騏
?
Photo Cap 投影片
Photo Cap 投影片Photo Cap 投影片
Photo Cap 投影片
楊 騏
?
Blue Apple 規格書簡報
Blue Apple 規格書簡報Blue Apple 規格書簡報
Blue Apple 規格書簡報
楊 騏
?
創造與生活 作品設計與實做
創造與生活 作品設計與實做創造與生活 作品設計與實做
創造與生活 作品設計與實做
楊 騏
?
彼得林區選股戰略 讀書報告
彼得林區選股戰略 讀書報告彼得林區選股戰略 讀書報告
彼得林區選股戰略 讀書報告
楊 騏
?

FrontPage2003 Ch1~3