FrontPage & Flash 動態網頁設計入門 網頁技術簡介與製作準備 講師 : 陳昭源 CSIE, NTU April 29, 2007
Outline 核對資料 & 填寫問卷 課程介紹 網頁技術簡介 網頁製作準備 National Taiwan University April 29, 2007 Page 2
Outline 核對資料 & 填寫問卷 課程介紹 網頁技術簡介 網頁製作準備 National Taiwan University April 29, 2007 Page 3
Course Introduction (1/4) 上課時間 2007.04.28 ~ 2007.05.27( 假日班 ) 週六 週日 13:30 16:30 講師 : 陳昭源 Email:jauyuan.chen@yahoo.com 課程網頁 http://www.csie.ntu.edu.tw/~r92045/csietrain/fp2007-145/ 可下載所有上課相關教材, 作業與成績亦在此公告 討論版, 提供大家互相討論與提問的空間 National Taiwan University April 29, 2007 Page 4
Course Introduction (2/4) 課程目的 本課程共分為兩階段 第一階段由基本網頁概念介紹開始, 帶領學員循序漸進使用 FrontPage 2003 建立個人網頁 ; 第二階段著墨在 Flash 基本使用與技巧, 並藉以豐富網頁內容 課堂除教材解說外, 並給予學員實作機會 藉由講師的引導, 期許學員們能於課程結束後具有初步網頁撰寫能力 上課教材 所有上課投影片 講義與範例皆可於課程網站下載 課程進度表 依照學習情況做動態調整 National Taiwan University April 29, 2007 Page 5
Course Introduction (3/4) 參考書目 Microsoft FrontPage2003 魔法書, 施威銘研究室著, 旗標出版 Flash 8 躍動的網頁, 施威銘研究室著, 旗標出版 坊間各大出版社之 FrontPage 與 Flash 相關書籍 進階課程 ASP.NET 電子商務程式設計班 ( 使用 C#) PHP 網頁程式設計班 Web 應用程式與資料庫程式設計班 National Taiwan University April 29, 2007 Page 6
Course Introduction (4/4) 成績評定 上課情形 ( 缺曠課 課堂練習 ) 學期中每位學員必須完成課後作業練習 沒有考試! 學期成績合格者 ( 平均 70 分以上 ) 始發予結業證書 作業繳交方式 網頁作業 上傳至指定伺服器後至留言板回報即可 Email 作業 標題請設定為 FP45 學號 開頭 例 :FP4501:HW01 FP4502 繳交 HW01 FP4503 我有問題 作業評分結果與說明將公佈於課程網頁 National Taiwan University April 29, 2007 Page 7
Questions? 網頁上傳失敗, 可否將網頁以 Email 寄給老師評分? NO!! 因為你沒辦法把網頁寄給所有想瀏覽網頁的人! National Taiwan University April 29, 2007 Page 8
Outline 核對資料 & 填寫問卷 課程介紹 網頁技術簡介 網頁製作準備 National Taiwan University April 29, 2007 Page 9
WWW Introduction (1/3) WWW(World Wide Web, or Web) HTTP Request Client Server 起源 IE, Firefox, etc. HTTP Response Windows, Linux, etc. 1980 年 Tim Berners-Lee 建立 ENQUIRE 計畫, WWW 雛形 1990 年聖誕節前, 第一套 WWW 系統 ( 包含伺服器 server 瀏覽器 browser 與網頁 web pages) 建立且可運作 1991 年 8 月, Tim Berners-Lee 發表 WWW 計畫總結於 alt.hypertext 新聞群組, 此為 WWW 初次公開展示 1993 年 4 月 30 日,CERN(the European Organization for Nuclear Research) 宣佈 WWW 對任何人皆免費 National Taiwan University April 29, 2007 Page 10
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 系統使用的機器 National Taiwan University April 29, 2007 Page 11
WWW Introduction (3/3) WWW 四大基本元素 Hypertext 超文字 允許使用者在文件的不同部分或透過網際網路 (Internet) 在不同文件之間轉移 ( 即超連結 hyperlinks) 的資訊格式 Resource Identifiers 資源識別 獨一無二的 (unique) 資源識別用以在網路上定位特定的資源, 如檔案 圖片等, 稱為 URI (Uniform Resource Identifier) 或 URL(Uniform Resource Locator)* Client-Server Model 主從架構 HTTP Request Client Server HTTP Response Markup Language 標記語言 將相關的程式碼與訊息嵌入在文件中, 以標籤 (tag) 標示 ; 常見的有 HTML(HyperText Markup Language 超文字標記語言 ) XML(eXtensible Markup Language 可延伸標記語言 ) National Taiwan University April 29, 2007 Page 12
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 National Taiwan University April 29, 2007 Page 13
URI vs. URL (2/2) URL(Uniform Resource Locator) 通用資源定址, 也被稱為 網址 嚴格來說,URL 是 URI 的一部份, 除了作為網路資源識別外, 並藉由描述取得資源的方式將可用資源定址 ; 現今,URL 與 URI 常互相混用 URN(Uniform Resource Name) 通用資源名稱, 僅作為資源識別, 無描述取得方式 URN:URL = Name 名字 :Address 地址 National Taiwan University April 29, 2007 Page 14
網頁技術與標準 文件描述語言 HTML XHTML XML 等 樣式描述語言 CSS XSL 互動式網頁技術 客戶端互動技術 :ActiveX Java Applet Flash 等 客戶端腳本語言 :JavaScript VBScript 等 伺服器端腳本語言 :ASP ASP.NET PHP JSP 等 識別定位語言 URL URI 等 文件綱要語言 DTD XML schema National Taiwan University April 29, 2007 Page 15
Outline 核對資料 & 填寫問卷 課程介紹 網頁技術簡介 網頁製作準備 National Taiwan University April 29, 2007 Page 16
網頁設計考量 網頁 Webpage vs. 網站 Website 網站是網頁的集合 Homepage = Webpage? 網頁設計考量 不同瀏覽器的觀賞效果 ( 本課程以 IE 6.0+ 為主 ) 不同瀏覽器所支援的語言標籤也不盡相同, 設計時應儘量以 W3C 標準為依歸 ; 可在網頁標註最佳支援之瀏覽器 螢幕解析度 可在網頁標註最佳瀏覽解析度 字型與語系設定 避免使用特殊字型, 若使用者電腦中無所設定之字型, 網頁將顯示系統預設字型, 可能破壞原始網頁美觀 使用者瀏覽器設定 ( 網頁設計者無法控制 ) National Taiwan University April 29, 2007 Page 17
網頁製作流程 規劃網站內容與架構 繪製網站架構草圖 收集所需相關素材 圖片 文件 聲音 影像等 選擇網頁擺放空間 免費 收費網頁空間或自行架設 製作網頁並上傳至網頁空間 National Taiwan University April 29, 2007 Page 18
網頁製作準備 工欲善其事, 必先利其器 Microsoft FrontPage2003 網頁空間 不懂 HTML 語法怎麼辦? 沒關係!FrontPage2003 讓你不懂 HTML 語法也可輕輕鬆鬆製作網頁! National Taiwan University April 29, 2007 Page 19
網頁製作網路資源 HTML 4.01 Reference http://tinyurl.com/4clmp HTML Code Tutorial http://www.htmlcodetutorial.com/ Index of HTML Tags http://tinyurl.com/ywr8q HTML 語法測試 http://tinyurl.com/5agt4 Color Palette http://www.guistuff.com/tools/css/colorhex.htm 網頁製作教學 ( 中文 ) http://tinyurl.com/z58vj National Taiwan University April 29, 2007 Page 20