網頁技術簡介與製作準備

FrontPage & Flash 動態網頁設計入門

網頁技術簡介與製作準備

講師：陳昭源

CSIE, NTU

April 29, 2007

Outline

核對資料 & 填寫問卷 課程介紹

網頁技術簡介

網頁製作準備

Outline

核對資料 & 填寫問卷 課程介紹

網頁技術簡介

網頁製作準備

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/

可下載所有上課相關教材，作業與成績亦在此公告 討論版，提供大家互相討論與提問的空間 ☺

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 作業

標題請設定為「FP45學號」開頭

例：FP4501:HW01、FP4502 繳交 HW01、FP4503 我有問題 作業評分結果與說明將公佈於課程網頁

Questions?

網頁上傳失敗，可否將網頁以 Email 寄給老師評分？

NO!! 因為你沒辦法把網頁寄給所有想瀏覽網頁的人！

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

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 標準為依歸；可在網頁標註最佳支援之瀏覽器

螢幕解析度

可在網頁標註最佳瀏覽解析度 字型與語系設定

避免使用特殊字型，若使用者電腦中無所設定之字型，網頁將顯 示系統預設字型，可能破壞原始網頁美觀

使用者瀏覽器設定（網頁設計者無法控制）

網頁製作流程

規劃網站內容與架構

繪製網站架構草圖

收集所需相關素材

圖片、文件、聲音、影像等

選擇網頁擺放空間

免費、收費網頁空間或自行架設

製作網頁並上傳至網頁空間

網頁製作準備

工欲善其事，必先利其器

Microsoft FrontPage2003 網頁空間

不懂 HTML 語法怎麼辦？

沒關係！FrontPage2003 讓你不懂 HTML 語法也可 輕輕鬆鬆製作網頁！

網頁製作網路資源

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

網頁製作教學（中文）