企業網站服務之建置與管理

Transcript 企業網站服務之建置與管理

網站開發技術簡介
國立暨南國際大學
資訊管理學系
陳彥錚
大綱
1.
2.
3.
4.
5.
6.
WWW簡介
JavaScript
CSS
其他用戶端Web技術
Server端Web技術
企業網站建置
1. WWW簡介
• (1945)Vannevar Bush發表 “As We May
Think” (Atlantic Monthly)
– 超連結(Hyperlink)
• (Mar. 1989)服務於CERN之Tim BernersLee發表 “Information Management: A
Proposal”
– A client/server model for a distributed hypertext
system
CERN: European Organization for Nuclear Research
WWW技術發展
• (1990) Tim BL撰寫第一個Web 瀏覽器:
– WorldWideWeb
• (Sep. 1993) NCSA發表Mosaic browser.
• (Mar. 1994) Marc Andreessen & Jim Clark 開
設 Mosaic Communications Corp. (後改名
Netscape)
• (Dec. 1994) Netscape發表Netscape Navigator
– 只支援HTML
NCSA: National Center for Supercomputing Applications
HTML and HTTP
Browser
1.
HTTP Request
Web Server
Application
2.
HTTP Response
Web Server
Client PC
HTML Document
• Browser
–
–
–
–
IE (~49%)
Firefox (~43%)
Google Chrome (~3%)
Safari, Opera, …
• Web Server
–
–
–
–
Apache (~50%)
Microsoft IIS (~35%)
Google GWS (~6%)
…
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
http://www.w3schools.com/browsers/browsers_stats.asp
Downloading a Web Page with Two Graphics
Files
HTML Document
Browser
Client PC
Web Server
Application
Web Server
As
Displayed
Webpage Consists of Three Files
Rendered as a Single Page On-Screen
http://ycchen.im.ncnu.edu.tw/www/wwwm.html
2
Graphics
Files
Downloading a Web Page with Two Graphics
Files
1.
HTML Document
Browser
Client PC
As
Displayed
HTML Document
Web Server
Application
2
Graphics
Files
Web Server
Download Requires 3
HTTP Request-Response Cycles;
Downloads HTML Page First
It has Tags to Identify Other Files
Downloading a Web Page with Two Graphics
Files
2.
Browser
Client PC
As
Displayed
3.
Web Server
Application
2
Graphics
Files
Web Server
2. JavaScript
• (Dec. 1995) Netscape Navigator 2.0支援
JavaScript
– 可於Brower中解譯執行的程式語言
<script>
for (i=0;i<10;i++) {
document.write("<hr size="+2*i+" width=" + 40*i+" color='red'>");
}
alert("Welcome to JavaScript Test!\nSee you!");
</script>
Advantages of Using JavaScript
• Validate user's input.
• Perform aggregrate calculations.
• Easily prompt a user for confirmation, alert, pop-up
information.
• Control of Web browser's behaviors and HTML page
component's properties.
• Conditionalize HTML.
• Perform operations independent of server information.
• Control of Dynamic HTML.
http://www.w3schools.com/js/js_examples.asp
http://ycchen.im.ncnu.edu.tw/www2011/npm.html
Java
• (Jan. 1996) Sun公司發表Java程式語言
– Java應用程式編譯成Bytecode，可在支援JVM
(Java Virtual Machine)之環境執行
• Java Applet
– 可在Web瀏覽器執行的Java小程式
<HTML>
<title>歡迎使用校務自動化系統</title>
<applet codebase="."
code="NCNUTeacherApplet“
archive="www.jar“ width=800 height=450>
</applet>
</HTML>
3. Cascading Style Sheets (CSS)
• 樣式表 (Stylesheet) 語言
• 提供網頁設定樣式功能，讓網頁能以更精確與結
構化方式顯示網頁版面
<style>
a {text-decoration:none;}
td {background-color:Ivory;}
ul {list-style-image:url(gball.gif);}
h2 {color:white; background-color:black; font-size:1in}
…
</style>
http://www.w3schools.com/css/default.asp
• Dynamic HTML: JavaScript + CSS
http://ycchen.im.ncnu.edu.tw/www2011/lab/bf.html
4. 其他用戶端Web技術
• 瀏覽器之plug-in (附加元件)功能
– Flash (http://ycchen.im.ncnu.edu.tw/doc1/)
– PDF, Windows Media Player, QuickTime, …
• XML (Extensible Markup Language)
<?xml version="1.0" encoding="UTF-8"?>
<department>
<member>
<id type="StuCard">s96211341</id>
<name>Chia-Chia Liu</name>
<email>[email protected]</email>
</member>
</department>
RSS:
http://zh.wikipedia.org/wiki/RSS
• AJAX: Asynchronous JavaScript and XML
http://www.zdnet.com.tw/news/software/0,2000085678,20145297,00.htm
http://chinese.engadget.com/2010/05/10/opera-hakon-wium-lie-and-von-tetzchner-talk-web/
網頁設計應注意事項
•
•
•
•
兼顧美工與內容
避免使用橫向捲軸
從216種Safety Color 選用顏色
考慮瀏覽器的差異性 (JavaScript, ActiveX,
CSS, …)
• 超連結之正確性
– file:///C:/www/radio.html
– http://192.168.0.1/xx.html
5. Server端Web技術
• Common Gateway Interface (CGI)
– Web Server 與 Server端應用程式之介面
• Server端Web程式語言
– ASP, JSP, Perl, PHP
• Database
– MS SQL Server, MySQL, mSQL, Oracle
Web Content Management System
(CMS)
• Joomla!
– http://www.joomla.org/
– http://community.joomla.org/showcase/sites.html
• WordPress
• Drupal
• Xoops
6. 企業網站建置
• 網頁(程式)設計
– 靜態網頁、Flash多媒體、動態網頁程式
– 電子商務
• 會員制
• 付款機制: 信用卡、ATM轉帳、貨到付款
• 網站架設
– 自行架設
– 虛擬主機 (Virtual Hosting)
– 主機代管 (Co-Location)
自行架設網站
• 硬體：
– 機櫃式Server、RAID硬碟?、不斷電系統
• 軟體：
– 作業系統、Web 伺服器程式、資料庫
– XAMPP
• 網路：
– IP位址、主機領域名稱
– 對外頻寬
– 網路安全及防火牆
虛擬主機 (Virtual Hosting)
• 由ISP出租架設網站所需之硬體、軟體、網
路服務。
–
–
–
–
–
–
專屬領域名稱及網路位址
磁碟空間
網路頻寬
Server端Web程式語言支援
資料庫
後台管理
主機代管 (Co-Location)
• ISP提供機房與網路，供企業客戶放置自己
的主機與網路設備。
• IDC (Internet Data Center)服務
–
–
–
–
–
機房空間
網路頻寬
提供IP位址
網路管理：流量監測、障礙管理
網路安全: DDoS攻擊、掃毒

企業網站服務之建置與管理

Transcript 企業網站服務之建置與管理

Directory