Transcript 第10章 在網頁加入音效與影片

網站架構與網頁設計基礎
清雲科技大學資管系 歐陽芳泉
1
網站架構
何謂三層式架構?Web-based System?
 Web-based System的特色為何?

2
試想網際網路的精神?
3
網路重要的TCP/IP 網路協定
4
TCP/IP 網路協定
連線前
5
TCP/IP 網路協定
連線後
6
什麼是 IP 位址?
140.112.12.105
163.25.6.200
Gateway
163.25.6.254
140.115.0.0
163.25.6.0
140.112.0.0
Net Mask
255.255.255.0
Gateway
163.25.6.254
163.25.6.220
140.115.155.20
56
58
60
樹人路
7
何謂DNS 網域名稱?
●
GOV
TW
JP
ORG
EDU
NCU
NTU
COM
...
...
GOV
COM
YAM
104
8
認識全球資訊網


什麼是 WWW?
WWW (World Wide Web)是一個執行於 Internet 上
的全球性的、互動的、動態的、跨平台的、分散
的圖形超連結資訊系統
起緣於歐能物理實理室(CERN)，由二位研究員所
建 立 的 通 訊 協 定 ： 超 文 字 傳 輸 協 定 (HTTP ：
HyperText Transfer Protocol)，以用來與世界各國
的研究學者交換研究計畫中的多媒體資訊
9
認識全球資訊網

全球資訊網的概念
10
三層式架構與Web-Based System
11
超連結
 超連結是一個連接至其他網頁或檔
案的指標
網頁連結、影片、聲音、或程式
12
URL:Uniform Resource Locators

URL指定檔案的位置及所要求的服務
http://www.microsoft.com/download/default.asp
how





where
what
http 例: http://www.cpu.edu.tw
ftp 例: ftp://ftp.cpu.edu.tw/drivers/hplj2000.zip
mailto 例: mailto:[email protected]
telnet 例: telnet://bbs.cpu.edu.tw
file 例: file:///c:/drivers/accon/en2209.zip
13
網頁的概念
全球資訊網中的基本文件稱為網頁
 網頁是以一種稱為 HTML (HyperText
Markup Language)的語言所寫成的
 HTML 文 件 中 包 含 文 字 及 一 些 標 籤
(tags)， 以提供有關文件的結構、外觀
及內容等資訊
 是否必須學習 HTML 才能設計網頁?
 什麼是首頁(Home Page)?

14
網站目錄與檔案架構
目錄如何有組織地建立?
 檔案如何正確地擺放?

15
Web Presentation 剖析
Home Page
(top of a web presentation)
Web
Presentation
Web Pages/Documents (A single file on a Web server)
16
Step 1

先想想你要在Web上提供什麼資料?
 Personal
Information
 Hobbies or Special Interests
 Publications
 Company Profiles
 Online Documentation
 Shopping Catalogs
 Polling and Opinion Gathering
 Anything Else…
17
Step 2 and Step 3
設定目標：想讓人家從你網頁上得到什麼
資訊？
 將內容切割成主要單元
 Example: 恰克與飛鳥歌迷站

 歷史
 成員介紹
 曾發行的唱片
 詞曲集錦
 唱片封面
18
Step 4 & Step 5

Structure and Navigation(組織與導覽)
 Hierarchies
 Linear
 Linear
with Alternatives
 Combination of Linear and Hierarchical
 Web

Make a Storyboard (寫分鏡劇本)
19
Hierarchical
General
Fruit

Tree
Fruit
Vine
Fruit
適合的網站
 百科全書
Soft
Fruit
 個人網站
 有階層性概念的
網站
Strawberry
Bush
Fruit

Cane
Fruit
建議提供的導覽
方式
 上一層
 下一層
Specific
 第一層

2 Level to 3 Level
20
Linear

適合的網站
 Online
Home
Material with a
linear structure
very
offline
 食譜
 DIY組裝手冊

建議提供的導覽方式
 上一頁
 下一頁
 Home
21
Linear with Alternatives

適合的網站
軟
體安裝手冊
（隨作業系統不
同而有小差別）
Home

建議提供的導覽
方式
 Linear
原有的方
式
 Skip forward or
back in the chain
22
Combination
Hierarchical
Home
of

Linear
and
適合的網站
 FAQ
 劇本

建議提供的導覽方式
 上一頁
 下一頁
 上一層
 回首頁

Allow
crossing
hierarchical boundaries?
23
Web

Home
建議提供的導覽方式
 回首頁
 提供Sitemap
24