• 沒有找到結果。

網頁技術簡介與製作準備

N/A
N/A
Protected

Academic year: 2022

Share "網頁技術簡介與製作準備"

Copied!
20
0
0

加載中.... (立即查看全文)

全文

(1)

FrontPage & Flash 動態網頁設計入門

網頁技術簡介與製作準備

講師:陳昭源

CSIE, NTU

June 9, 2007

(2)

Outline

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

網頁技術簡介

網頁製作準備

(3)

Outline

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

網頁技術簡介

網頁製作準備

(4)

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/

可下載所有上課相關教材,作業與成績亦在此公告

留言板,提供大家互相討論與提問的空間 ☺

(5)

Course Introduction (2/4)

課程目的

本課程共分為兩階段。第一階段由基本網頁概念介 紹開始,帶領學員循序漸進使用 FrontPage 2003 建 立個人網頁;第二階段著墨在 Flash 基本使用與技 巧,並藉以豐富網頁內容。

課堂除教材解說外,並給予學員實作機會。藉由講 師的引導,期許學員們能於課程結束後具有初步網 頁撰寫能力。

上課教材

所有上課投影片、講義與範例皆可於課程網站下載

課程進度表

依照學習情況做動態調整

(6)

Course Introduction (3/4)

參考書目

Microsoft FrontPage2003 魔法書,施威銘研究室 著,旗標出版

Flash 8 躍動的網頁,施威銘研究室著,旗標出版 坊間各大出版社之 FrontPage 與 Flash 相關書籍

進階課程

ASP.NET 電子商務程式設計班(使用C#)

PHP 網頁程式設計班

Web 應用程式與資料庫程式設計班

(7)

Course Introduction (4/4)

成績評定

上課情形(缺曠課、課堂練習、…)

學期中每位學員必須完成課後作業練習 沒有考試!

學期成績合格者(平均70分以上)始發予結業證書

作業繳交方式

網頁作業

上傳至指定伺服器後至留言板回報即可 Email 作業

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

例:FP4601:HW01、FP4602 繳交 HW01、FP4603 我有問題 作業評分結果與說明將公佈於課程網頁

(8)

Questions?

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

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

請將失敗的原因描述給老師或在留言板,老師將協助解決。

為何我都收不到老師的回信?

請檢查垃圾郵件匣,看是否被當成垃圾信件。

有些公司會設定阻擋 Yahoo! 等免費信箱之郵件,故無法在公 司收發,請在家裡另行收發信件。

(9)

Outline

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

網頁技術簡介

網頁製作準備

(10)

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.

(11)

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 系統使用的機器

(12)

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

(13)

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

(14)

URI vs. URL (2/2)

URL(Uniform Resource Locator)

通用資源定址,也被稱為「網址」

嚴格來說, URL 是 URI 的一部份,除了作為網路 資源識別外,並藉由描述取得資源的方式將可用資 源定址;現今, URL 與 URI 常互相混用

URN(Uniform Resource Name)

通用資源名稱,僅作為資源識別,無描述取得方式

URN:URL = Name 名字:Address 地址

(15)

網頁技術與標準

文件描述語言

HTML、XHTML、XML 等

樣式描述語言

CSS、XSL

互動式網頁技術

客戶端互動技術:ActiveX、Java Applet、Flash 等 客戶端腳本語言:JavaScript、VBScript 等

伺服器端腳本語言:ASP、ASP.NET、PHP、JSP 等

識別定位語言

URL、URI 等

文件綱要語言

DTD、XML schema

(16)

Outline

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

網頁技術簡介

網頁製作準備

(17)

網頁設計考量

網頁 Webpage vs. 網站 Website

網站是網頁的集合

Homepage = Webpage?

網頁設計考量

不同瀏覽器的觀賞效果(本課程以 IE 6.0+ 為主)

不同瀏覽器所支援的語言標籤也不盡相同,設計時應儘量以 W3C 標準為依歸;可在網頁標註最佳支援之瀏覽器

螢幕解析度

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

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

使用者瀏覽器設定(網頁設計者無法控制)

(18)

網頁製作流程

規劃網站內容與架構

繪製網站架構草圖

收集所需相關素材

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

選擇網頁擺放空間

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

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

(19)

網頁製作準備

工欲善其事,必先利其器

Microsoft FrontPage2003 網頁空間

不懂 HTML 語法怎麼辦?

沒關係! FrontPage2003 讓你不懂 HTML 語法也可

輕輕鬆鬆製作網頁!

(20)

網頁製作網路資源

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

參考文獻

相關文件

第十二階段 配對數數卡(數量與符號配對) 第十三階段 按量取數訓練(數數和寫數) 第十四階段

• 承接視覺藝術科作為高中課程的 選修科,並繼續推動本科課程的 發展,教育局於2020/21學年開

課題  感動一刻  學習階段  第三學習階段  科目  視覺藝術 ..

階段一 .小數為分數的另一記數方法 階段二 .認識小數部分各數字的數值 階段三 .比較小數的大小.

九、遴選標準:第一階段以符合報名資格為主,第二階段標準:填寫個 人 簡介 25%、參訓動機 40%、職涯規劃 20%及最有成 就感 的事

1.1.3 檢視分三個階段 。 在過去第一、第二階段 (即由1999年 1月至2000年

本課程共分為兩階段。第一階段由基本網頁概念介 紹開始,帶領學員循序漸進使用 FrontPage 2003 建 立個人網頁;第二階段著墨在 Flash

本課程共分為兩階段。第一階段由基本網頁概念介 紹開始,帶領學員循序漸進使用 FrontPage 2003 建 立個人網頁;第二階段著墨在