網站架構與網頁設計基礎 清雲科技大學資管系 歐陽芳泉.

Presentation on theme: "網站架構與網頁設計基礎 清雲科技大學資管系 歐陽芳泉."— Presentation transcript:

1 網站架構與網頁設計基礎 清雲科技大學資管系 歐陽芳泉

2 網站架構 何謂三層式架構?Web-based System? Web-based System的特色為何?

3 試想網際網路的精神?

4 網路重要的TCP/IP 網路協定

5 TCP/IP 網路協定 連線前

6 TCP/IP 網路協定 連線後

7 什麼是 IP 位址? Gateway Net Mask Gateway 56 58 60 樹人路

8 何謂DNS 網域名稱? ● ... TW JP COM GOV ... GOV ORG EDU COM NCU NTU YAM 104

9 認識全球資訊網 什麼是 WWW? WWW (World Wide Web)是一個執行於 Internet 上的全球性的、互動的、動態的、跨平台的、分散的圖形超連結資訊系統 起緣於歐能物理實理室(CERN)，由二位研究員所建立的通訊協定：超文字傳輸協定(HTTP：HyperText Transfer Protocol)，以用來與世界各國的研究學者交換研究計畫中的多媒體資訊

10 認識全球資訊網 全球資訊網的概念

11 三層式架構與Web-Based System

12 超連結 超連結是一個連接至其他網頁或檔案的指標 網頁連結、影片、聲音、或程式

13 URL:Uniform Resource Locators
http 例: ftp 例: ftp://ftp.cpu.edu.tw/drivers/hplj2000.zip mailto 例: telnet 例: telnet://bbs.cpu.edu.tw file 例: file:///c:/drivers/accon/en2209.zip how where what

14 網頁的概念 全球資訊網中的基本文件稱為網頁 網頁是以一種稱為 HTML (HyperText Markup Language)的語言所寫成的
HTML 文件中包含文字及一些標籤(tags)， 以提供有關文件的結構、外觀及內容等資訊 是否必須學習 HTML 才能設計網頁? 什麼是首頁(Home Page)?

15 網站目錄與檔案架構 目錄如何有組織地建立? 檔案如何正確地擺放?

16 Web Presentation 剖析 Home Page (top of a web presentation) Web
Web Pages/Documents (A single file on a Web server)

17 Step 1 先想想你要在Web上提供什麼資料? Personal Information
Hobbies or Special Interests Publications Company Profiles Online Documentation Shopping Catalogs Polling and Opinion Gathering Anything Else…

18 Step 2 and Step 3 設定目標：想讓人家從你網頁上得到什麼資訊？ 將內容切割成主要單元 Example: 恰克與飛鳥歌迷站
歷史 成員介紹 曾發行的唱片 詞曲集錦 唱片封面 最新資訊 ...

19 Step 4 & Step 5 Structure and Navigation(組織與導覽)
Hierarchies Linear Linear with Alternatives Combination of Linear and Hierarchical Web Make a Storyboard (寫分鏡劇本)

20 Hierarchical 適合的網站 建議提供的導覽方式 2 Level to 3 Level Fruit 百科全書 個人網站
General Specific Fruit 適合的網站 百科全書 個人網站 有階層性概念的網站 建議提供的導覽方式 上一層 下一層 第一層 2 Level to 3 Level Tree Fruit Vine Fruit Soft Fruit Straw- berry Bush Fruit Cane Fruit

21 Linear 適合的網站 建議提供的導覽方式
Online Material with a very linear structure offline 食譜 DIY組裝手冊 建議提供的導覽方式 上一頁 下一頁 Home Home

22 Linear with Alternatives
適合的網站 軟體安裝手冊（隨作業系統不同而有小差別） 建議提供的導覽方式 Linear 原有的方式 Skip forward or back in the chain Home

23 Combination of Linear and Hierarchical
適合的網站 FAQ 劇本 建議提供的導覽方式 上一頁 下一頁 上一層 回首頁 Allow crossing hierarchical boundaries? Home

24 Web 建議提供的導覽方式 回首頁 提供Sitemap Home