Transcript 資訊概論及資訊網頁設計入門及應用

網站開發基本背景介紹
Instructor
許明宗
網路（Network and Networking）

網路種類





人際網路
通訊網路
電腦網路
核心價值：「表達與溝通」！
What is the “Internet” ?

Internet vs. internet vs. intranet vs. extranet
熱門的網路應用

資料搜尋


電子商務


拍賣網站
無線上網



搜尋引擎
無線區域網路
GPRS & 3G
多媒體應用

中華電信 MOD
常見的網路服務種類







WWW (world wide web)：全球資訊網
Messenger：即時通訊
Email (electronic mail)：電子郵件
BBS (bulletin board system)：電子佈告欄
FTP (File Transfer Protocol)：檔案傳輸
P2P (Peer-to-Peer) ：個人對個人
其他
WWW簡介

「WWW」(Word Wide Web)全球資訊網是1989年歐
洲高能粒子協會一個研究小組所開發的一種全新的
Internet服務，WWW能夠在網路上傳送圖片、文字、
影像、聲音等多媒體資料，由Tim Berners Lee領導
的小組所開發的主從架構分散式網路服務系統。
網頁服務 (Web Service)

主從 (Client-Server) 機制

client：客戶端、用戶端


使用者執行瀏覽程式的電腦，負責和伺服器溝通和讀取伺
服器的資料，也就是HTML文件。
server：伺服器、伺服主機

指的是Web伺服器，在伺服器上儲存著HTML文件等網頁
文件和圖片等多媒體資料。
WWW的基礎-名詞解說
常見的名詞 說明
首頁
英文名稱為 Homepage，指的為連接 Web 伺服器後下載的第一頁文
件、網頁或稱為 Web 畫面、HTML 文件
HTML
全名 HyperText Markup Language，屬於一種文件編排的語言，在
瀏覽程式看到的網頁內容就是使用此語言所製作
URLs
全名 Uniform Resource Locations ，這是 WWW 的萬用資源定位
器，可以用來連結網站和其它
Internet
資源，其格式為
【 http://www.hinet.net 】以「 :// 」符號分隔，符號前為通訊協定，
後為伺服器的網域名稱
HTTP
全名 Hypertext Transport Protocol 為 WWW 使用的標準通訊協定，
Web 伺服器的資料傳送都是透過這個通訊協定進行資料的交換
超文件
英文名稱 Hypertext 為一種文件閱讀方式，透過超連結的導引，可
以在閱讀文件內容時，隨時檢視相關連的資料
超媒體
英文名稱 Hypermedia 基本上和超文件非常相似，只是原來文字的
超連結改為圖片、聲音或影像動畫等多媒體元件
全球資訊網的媒體特性

Hyperlink：超連結


Hypermedia：超媒體


跳躍式的動線特徵
多媒體 + 超連結
Hypertext：超文本

文字 + 多媒體 + 超連結
網頁 vs. 網站



網頁 (Webpage) ：構成網站的基本元件，透過瀏覽
器所看到的每一個畫面
網站 (Website) ：由一系列相關的網頁及其它媒體所
組成
易混淆的幾個術語

首頁、烘焙雞：homepage




進入一個網站時所看到的第一個網頁
功能：負責導覽及介紹最新消息
全球資訊網網站：Web site
入口（入門）網站：portal site
HTML語言


HTML (HyperText Markup Language，超文字
標示語言) 是構成網頁最基礎的要素。
許多新技術如 Dynamic HTML、Java Script、
ASP… 都是建構在 HTML 之上。
動態網頁


由於 HTML 並不是程式語言，因此由 HTML
所構成的文件並不會因時因地產生變化，所以
便有「靜態」 (static) 網頁之稱。
要產生動態網頁，一定要撰寫程式，此程式可
在客戶端 (瀏覽器) 也可以在伺服端 (Server)
執行。
瀏覽器與程式語言
程式
IE 是否可執行
Netscape 是否可
執行
Java
O
O
Java Script
O
O
VB Script
O
X
ActiveX 物件
O
X
傳統網站 vs. 互動式網站
傳統網站運作方式 ：靜態
透過網址
查詢資料
連線要求
瀏覽器
使用者
顯示畫面
伺服器
傳回HTML及
相關物件
處理HTML
及相關物件
靜態網頁要求會被瀏覽器直接送出
瀏覽器直接回覆靜態網頁內容
處理連線網址，
將目標網址的內
容送出
傳統網站 vs. 互動式網站 (cont’d)
互動式網站運作方式：動態與互動
使用VB Script 或Java Script
處理輸入資料
輸入查詢
資料內容
使用者
連線要求
伺服器
瀏覽器
傳回HTML
及相關物件
顯示畫面
處理HTML及
相關物件
客戶端會依描述語言先處理網頁要求，再
送出。
透過PHP或ASP
執行資料庫操作
查詢MySQL或MS SQL
資料庫內容
網址 (Address and Addressing)

現實生活的地址


網路的位址（網址）



台北市民生東路三段67號
192.192.35.98、ns.ntpu.edu.tw、
0050.56C0.0001
用途：定址 (addressing)
網址的形式


IPv4 位址：192.192.35.25
領域名稱 (domain name)：www.ntpu.edu.tw
協定

現實生活的 protocol（協定、規約）




網路的 protocol



外交場合：當英國人遇見阿拉伯人......
部門：公務流程
規範性：應對進退的步驟及語意
不以規矩，不能成方圓
通訊協定服務
網路世界裡，有許許多多的通訊協定

WWW、FTP、TELNET…
網站、網頁、網址、協定


分得出來這幾個字眼嗎？
一個網站可以提供多種通訊協定




實例：http://www.ntpu.edu.tw 和 ftp://www.edu.tw
一個 WWW 網站可以擺許多一頁一頁的網頁
網址：網站的網路地址
URL：協定 + 網址 + 資源名
SGML

SGML (Standard Generalized Markup Language)


HTML (Hypertext Markup Language)





2.0: 基本
3.0: 表格、數學符號
3.2: 妥協
4.0: 嚴謹、全面
XML (Extensible Markup Language)


ISO 8879: Information Processing -- Text and Office
Systems -- Standard Generalized Markup Language
SGML 簡化版
XHTML