FrontPage2003 Ch1~3

Chapter 1 ~ 3
數位化 FrontPage
實習教師　　楊　騏

學習索引
網站 vs 網頁
網站架設流程
如何製作網頁
認識 FrontPage
實際操作 FrontPage
數位化 FrontPage 　　實習教師：楊　騏

瀏覽網站的經驗
琳瑯
滿目
琳瑯
滿目

瀏覽網站的經驗（續）
213 班網
首頁
213 班網
首頁

瀏覽網站的經驗（續）
213
成員介紹
213
成員介紹

網站、網頁與首頁
網頁設計 FrontPage 　　實習教師：楊　騏
（本課 1-4 ）
 站？網
 包含了多許網頁
 抽象的概念
 ？網頁
 包含了文字、片、表格等圖
 具的案體檔
4 . h t m l4 . h t m l

網站、網頁與首頁（續）
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/

網頁能做什麼？
海綿寶寶
官方網站
海綿寶寶
官方網站

網頁能做什麼？（續）
Arashi
後援網站
Arashi
後援網站

個人網站個人網站

$12500

站架流程網設
（本課 1-5 ～ 1-6 ）
初步站規劃網
 定站主型、格、欲吸引的目族群確網題類風標
 集站料蒐網資
 作站所需的素材製網

網站架設流程
（課本 1-7 ）
建立網站結構
 網站導覽圖：
一個網站中，網頁與網頁之間的層級結構圖

網站架設流程
（課本 1-7 ）
網站導覽圖之比較
單純的影像單純的影像有意義、能作用的導覽
圖
有意義、能作用的導覽
圖

站架流程網設
（本課 1-9 、 1-11 ～ 14 ）
 站空申網間請
 操作實機 FTP 上傳
 校主位址：學機 203.72.185.5
 ：帳號學號
密：身份字（英文小）碼證號寫
 址：網為 http://mail.slhs.tp.edu.tw/~ 自己的帳號

站架流程網設
（本課 1-10 ）
設計網頁
 插入文字、片、加以美化等圖
 站發佈網
 到路上發佈網
 常更新經網頁

如何製作網頁？
使用「所見即
所得」的軟體
編輯
使用純文字編
輯例如：記事
本、 Notepad++
網頁
該如何製作？

如何製作網頁？（續）
製作網頁的軟體
 所見即所得
1. Microsoft Office FrontPage (FP)
2. Adobe DreamWeaver (DW)

如何製作網頁？（續）
3. Microsoft Office SharePoint Designer
4. Microsoft Expression Web

認識 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

補充：網頁標準（續）
通過 W3C 的網站

教學網站也有通過 W3C

未通過 W3C 的網站

通過無障礙 A+ 的網站

未通過無障礙 A 的網站

高二數位化
下課了！
感謝大家的聆聽！

FrontPage2003 Ch1~3

More Related Content

Viewers also liked

Similar to FrontPage2003 Ch1~3

More from 楊 騏

FrontPage2003 Ch1~3

More from 楊騏