• 沒有找到結果。

網頁技術簡介與製作準備

N/A
N/A
Protected

Academic year: 2022

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

Copied!
20
0
0

全文

(1)

FrontPage & Flash 動態網頁設計入門

網頁技術簡介與製作準備

講師:陳昭源

CSIE, NTU

April 29, 2007

(2)

Outline

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

網頁技術簡介

網頁製作準備

(3)

Outline

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

網頁技術簡介

網頁製作準備

(4)

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/

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

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

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

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

(8)

Questions?

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

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

(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

網頁製作教學(中文)

參考文獻

相關文件

系統設計與開發利用 Flash 的 ActionScript 程式語法和 Flash 軟體製作 Flash 評 量遊戲、JSP 語法和 Dreamweaver 軟體製作網頁、My SQL

b、c、d)的編碼;第2碼為學習階段別,依序為Ⅰ代表第一學習階段(國民小學 1-2年級)

並公告錄取人員姓名於本校網頁、臺中市政府教育局網頁。報考人員可自行上網查看

並公告錄取人員姓名於本校網頁、臺中市政府教育局網頁。報考人員可自行上網查看

一、有關「推動機車行升級轉型」111 年度續辦第一階段基礎訓練及第二階 段進階訓練編列經費 1,710 萬 6,880 元,同意由 111

分為兩階段,第一階段選拔採用國際比賽使用之 Double Repechage 方式,取

了解電腦網路的原理,學習使用 個人網誌及簡易的網頁設計,具 備電子商務的觀念、網路安全以 及網路犯罪與相關法規.

國小中高年級組:第一階段比賽將出 10 題國中等級單字,完成後將審查現場學生之分數,取 前 100 名繼續進入第二階段比賽,並列同分者得佔一個名額,若有與第 100

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

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

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

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

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

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

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

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

扭蛋機製作活動 (準備階段) 形式:

第一階段: 讓學生接觸不同的感官刺激 第二階段: 對感官刺激的改變有察覺反應 第三階段: 對感官刺激有一貫的反應..

第一課節:介紹成本會計和解釋成本概念及詞彙 第二課節:了解用於編製財務報表的不同成本分類

階層式 Blueweb 網路形成方法與階層式樹狀網路有很大不同,但一樣首先隨機挑 選一個節點來當 Blueroot,由此 Blueroot 建立子網路,並給它初始參數 K = T,K 值 為 Layer counter

理論提出者 階段一 階段二 階段三 階段四 階段五 階段六 Schoenfeld (1985) 讀題 分析 探討 計畫 執行 驗證.. Polya (1945) 了解問題

四種駕駛時間階段 間階段 間階段 間階段 個數 個數 個數 個數. 1 2

聯合招生管道招生校數最多、規模最大的入學管道,分為二階段 甄試,第一階段為統一入學測驗成績篩選、第二階段為各招生校 系之指定項目甄試 (