FrontPage & Flash 動態網頁設計入門
網頁技術簡介與製作準備
講師：陳昭源
CSIE, NTU
June 9, 2007
Outline
核對資料 & 填寫問卷 課程介紹
網頁技術簡介
網頁製作準備
Outline
核對資料 & 填寫問卷 課程介紹
網頁技術簡介
網頁製作準備
Course Introduction (1/4)
上課時間
2007.06.09 ~ 2007.07.08（假日班）
週六、週日 13:30 – 16:30
講師：陳昭源
Email：jauyuan.chen@yahoo.com 課程網頁
http://www.csie.ntu.edu.tw/~r92045/csieTrain/fp2007-146/
可下載所有上課相關教材，作業與成績亦在此公告
留言板，提供大家互相討論與提問的空間 ☺
Course Introduction (2/4)
課程目的
本課程共分為兩階段。第一階段由基本網頁概念介 紹開始，帶領學員循序漸進使用 FrontPage 2003 建 立個人網頁；第二階段著墨在 Flash 基本使用與技 巧，並藉以豐富網頁內容。
課堂除教材解說外，並給予學員實作機會。藉由講 師的引導，期許學員們能於課程結束後具有初步網 頁撰寫能力。
上課教材
所有上課投影片、講義與範例皆可於課程網站下載
課程進度表
依照學習情況做動態調整
Course Introduction (3/4)
參考書目
Microsoft FrontPage2003 魔法書，施威銘研究室 著，旗標出版
Flash 8 躍動的網頁，施威銘研究室著，旗標出版 坊間各大出版社之 FrontPage 與 Flash 相關書籍
進階課程
ASP.NET 電子商務程式設計班（使用C#）
PHP 網頁程式設計班
Web 應用程式與資料庫程式設計班
Course Introduction (4/4)
成績評定
上課情形（缺曠課、課堂練習、…）
學期中每位學員必須完成課後作業練習 沒有考試！
學期成績合格者（平均70分以上）始發予結業證書
作業繳交方式
網頁作業
上傳至指定伺服器後至留言板回報即可 Email 作業
標題請設定為「FP46學號」開頭
例：FP4601:HW01、FP4602 繳交 HW01、FP4603 我有問題 作業評分結果與說明將公佈於課程網頁
Questions?
網頁上傳失敗，可否將網頁以 Email 寄給老師評分？
NO!! 因為你沒辦法把網頁寄給所有想瀏覽網頁的人！
請將失敗的原因描述給老師或在留言板，老師將協助解決。
為何我都收不到老師的回信？
請檢查垃圾郵件匣，看是否被當成垃圾信件。
有些公司會設定阻擋 Yahoo! 等免費信箱之郵件，故無法在公 司收發，請在家裡另行收發信件。
Outline
核對資料 & 填寫問卷 課程介紹
網頁技術簡介
網頁製作準備
WWW Introduction (1/3)
WWW（World Wide Web, or Web）
起源
1980 年 Tim Berners-Lee 建立 ENQUIRE 計畫， WWW雛形 1990 年聖誕節前，第一套 WWW 系統（包含伺服器 server、
瀏覽器 browser 與網頁 web pages）建立且可運作
1991 年 8 月， Tim Berners-Lee 發表 WWW 計畫總結於 alt.hypertext 新聞群組，此為 WWW 初次公開展示
Client Server
HTTP Request
HTTP Response
Windows, Linux, …etc.
IE, Firefox, …etc.
WWW Introduction (2/3)
網路資源
Web 介紹（from Wikipedia）
http://en.wikipedia.org/wiki/World_Wide_Web
CERN
http://info.cern.ch/
WWW 計畫
http://tinyurl.com/3apuu
WWW 發展歷史重要時間點
http://tinyurl.com/2723w2
Tim Berners-Lee
第一套 WWW 系統使用的機器
WWW Introduction (3/3)
WWW 四大基本元素
Hypertext 超文字
允許使用者在文件的不同部分或透過網際網路（Internet）
在不同文件之間轉移（即超連結 hyperlinks）的資訊格式
Resource Identifiers 資源識別
獨一無二的（unique）資源識別用以在網路上定位特定的 資源，如檔案、圖片等，稱為 URI （Uniform Resource Identifier）或 URL（Uniform Resource Locator）*
Client-Server Model 主從架構 Markup Language 標記語言
將相關的程式碼與訊息嵌入在文件中，以標籤（tag）標 HTML（HyperText Markup Language 超
Client HTTP Request Server HTTP Response
URI vs. URL (1/2)
URI（Uniform Resource Identifier）
通用資源識別，包含 URL 與 URN；在網路上用以定位本地 端或遠端的可用資源，如：HTML 文件、圖片、影片等
格式
協定:[// ] [ [ 用戶名 [ :密碼 ] @ ] 主機名 [ :埠號 ] ] [ /資源路徑 ] 例：
ftp://user:pwd@server.address:port/dir1/dir2/
常見協定（URI scheme）有 http、https、mailto、ftp 等 參考資料
URI 介紹（from Wikipedia）
http://en.wikipedia.org/wiki/Uniform_Resource_Identifier
URI scheme（from Wikipedia）http://en.wikipedia.org/wiki/URI_scheme
URI vs. URL (2/2)
URL（Uniform Resource Locator）
通用資源定址，也被稱為「網址」
嚴格來說， URL 是 URI 的一部份，除了作為網路 資源識別外，並藉由描述取得資源的方式將可用資 源定址；現今， URL 與 URI 常互相混用
URN（Uniform Resource Name）
通用資源名稱，僅作為資源識別，無描述取得方式
URN：URL = Name 名字：Address 地址
網頁技術與標準
文件描述語言
HTML、XHTML、XML 等
樣式描述語言
CSS、XSL
互動式網頁技術
客戶端互動技術：ActiveX、Java Applet、Flash 等 客戶端腳本語言：JavaScript、VBScript 等
伺服器端腳本語言：ASP、ASP.NET、PHP、JSP 等
識別定位語言
URL、URI 等
文件綱要語言
DTD、XML schema
Outline
核對資料 & 填寫問卷 課程介紹
網頁技術簡介
網頁製作準備
網頁設計考量
網頁 Webpage vs. 網站 Website
網站是網頁的集合
Homepage = Webpage？
網頁設計考量
不同瀏覽器的觀賞效果（本課程以 IE 6.0+ 為主）
不同瀏覽器所支援的語言標籤也不盡相同，設計時應儘量以 W3C 標準為依歸；可在網頁標註最佳支援之瀏覽器
螢幕解析度
可在網頁標註最佳瀏覽解析度 字型與語系設定
避免使用特殊字型，若使用者電腦中無所設定之字型，網頁將顯 示系統預設字型，可能破壞原始網頁美觀
使用者瀏覽器設定（網頁設計者無法控制）
