PowerPoint 簡報

Download Report

Transcript PowerPoint 簡報 

電子商務概論
Chapter e 網站建置及網頁設計
祝天雄 博士
100年10月 日
電子商務概論
大
壹
 貳
 參
 肆

Chapter
0
綱
設計網站前置準備
網頁製作語言
網頁製作軟體
個人Web Site建置
2
設計網站前置準備





規劃網站
決定主機
選用設計語言
Linux 或 Unix：PHP, JSP
Windows：PHP, JSP, ASP, ASP.NET
3
前端的網路程式語言
呈現文字、圖片和連結，及簡單的互動功能—靜
態網頁
 HTML
 VB Script
 Java Script
4
後端的網路程式語言
在伺服器及使用者溝通的功能—動態網頁
 CGI
 ISAPI
 ASP
 JSP
 PHP
 ASP.NET
5
網頁製作語言

資訊共享的目的


WWW使用了超文件傳輸協定(Hypertext Transfer
Protocol，簡稱HTTP)
超文件(Hypertext)即是在WWW上傳送的主要文件


根據超文件描述語言(Hyper Text Markup Language，或
簡稱HTML)
Web Pages開發技術用來使網頁的功能更加的強大與完整

JavaScript、Jscript、VBScript、JSP、ASP與PHP
網頁製作語言

瀏覽Web Pages的流程
上傳
Interne
t
下載
網頁設計者
Web
Server
網頁瀏覽者
網頁製作語言
標網頁製作語言
標記語言
描述語言
互動式
網頁語言
8
網頁製作語言

標記語言



Hyper Text Markup Language (HTML)
Dynamic HTML (DHTML)
eXtensible Markup Language (XML)
網頁製作語言-HTML

HTML(Hyper Text Markup Language)




在Web Pages設計中，所使用的最基本也是相當易
學易懂的標記語言
HTML版本是4.01
附檔名為htm或是html
描述了這個Web Page資料的呈現方式

包含文字的顏色與大小以及標示資料的種類
網頁製作語言-HTML

描述方式

使用標籤(Tag)將欲進行格式化的資料包含起來

以刮號『<』與『>』將包含Tag名稱包含起來
網頁製作語言-HTML

HTML文件的架構




不同的Tag互相包含而成
最外層的Tag為『HTML』
部分使用Tag『HEAD』與『BODY』包含起來
兩者各有適用的標記

如『<TITLE>』只可出現
於『<HEAD>』部分
HTML
HEAD
BODY
網頁製作語言-HTML

HTML 文件的基本組成格式
網頁製作語言-HTML

超連結(Hyperlink)


使得HTML文件可以的WWW中互相連結
以文字、圖形、影像地圖的方法呈現
網頁製作語言-HTML
Tag名稱
文件
<HTML>
<HEAD>
<TITLE>
<BODY>
排版
<!--註解-->
<P>
<BR>
<HR>
<PRE>
<DIV>
<NOBR>
<WBR>
字體
<STRONG>
<B>
<EM>
<I>
<TT>
用途
文件宣告
開頭
標題
本文
說明
段落
換行
水平線
預設格式
區隔
不換行
建議換行
加重語氣
粗體
強調
斜體
打字字體
Tag名稱
<U>
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
<FONT>
<BASEFONT>
<BIG>
<SMALL>
<STRIKE>
<CODE>
<KBD>
<SAMP>
<VAR>
<CITE>
<BLOCKQUOTE>
<DFN>
<ADDRESS>
用途
加底線
標題一
標題二
標題三
標題四
標題五
標題六
字形設定
基準字形
加大字體
縮細字體
刪除線
程式碼
鍵盤字
範例
變數
傳記引述
文字區塊
述語定義
地址
15
網頁製作語言-HTML
用途
Tag名稱
<SUB>
<SUP>
清單
<OL>
<UL>
<LI>
<MENU>
<DIR>
<DL>
<DT>
<DD>
表格
<TABLE>
<CAPTION>
<TR>
<TD>
<TH>
表單
<FORM>
<TEXTAREA>
下標字
下標字
順序清單
無序清單
清單項目
選單清單
目錄清單
定義清單
定義條目
定義內容
表格
表格標題
表格列
表格欄
表格標頭
表單
文字區塊
用途
Tag名稱
<INPUT>
<SELECT>
<OPTION>
圖形
<IMG>
連結
<A>
<BASE>
框架
<FRAMESET>
<FRAME>
<IFRAME>
<NOFRAMES>
影像地圖
<MAP>
<AREA>
多媒體
<BGSOUND>
<EMBED>
輸入
選擇
選項
圖形
連結
基準
框架設定
框窗設定
頁內框架
不支援框架
地圖名稱
連結區域
背景音樂
多媒體
16
網頁製作語言-DHTML

Web Site開發人員在開發Web Pages時，常常
需要考慮到Web Pages互動性與瀏覽速度

互動效果愈多，就重複地在瀏覽器和Web Server之
間傳送資料來更新Web Pages的內容


瀏覽速度因此較慢
互動效果愈少，瀏覽速度雖可因此提升

貧乏的互動會使得瀏覽者覺得無趣
網頁製作語言-DHTML

DHTML可以適時的解決這個問題


動態效果的執行由Web Server轉換到每個使用者的
瀏覽器上
一方面可以顧及Web Pages的聲光效果，一方面又
兼顧瀏覽的速度
網頁製作語言-DHTML

Dynamic HTML (DHTML)


『動態網頁』
是一些現有Web Pages技術與標準的整合


不是新技術或標準
結合



HTML 4.0
連(串)接樣式表(Cascading Style Sheet，簡稱CSS)
描述語言(Script Language)

Java Script及VBScript
網頁製作語言-DHTML

DHTML提供了下列HTML無法做到的功能





元件存取
樣式與樣式表：使描述語言存取元件的能力更完備
動態樣式：使Web Pages的元件產生動態效果，而
不必重新載入Web Pages
多媒體控制：包含有3D動畫、影像圖片之間的轉換
與Web Pages元件過濾器的使用
由於Script Language的特殊性，故將在之後
介紹
網頁製作語言-DHTML

Cascading Style Sheet


(CSS)
編輯Web Pages時，會希望我們的Web Pages有一體
的特色與功能
傳統的HTML可能會有遭遇以下的問題



設定：需要一一針對每個Web Pages元件的形狀、大小與
顏色進行設定，這是相當繁瑣的工作
修改：要針對個別元件去修改每一項設定，相當沒有效率
功能不足：HTML無法提供特別的顯示效果
網頁製作語言-DHTML

CSS有三種定義方式



Inline Style Sheet
Embedding Style Sheet
Linking Style Sheet
網頁製作語言-DHTML

Inline Style Sheet


最簡單
相關的排版設定完全在同一個控制標籤中來設定完
成
網頁製作語言-DHTML

範例-針對文字的大小(font-size)、顏色
(color)、裝飾(text-decoration)與形式
(font-style)進行設定
網頁製作語言-XML

eXtensible Markup Language (XML)




1986年國際標準組織 (ISO)公佈的『標準通用標示
語言』 (Standard Generalized Markup Language，
簡稱SGML)的精簡版
掌握了SGML其延展性、文件自我描述特性、以及其
強大的文件結構化功能
摒除了SGML過於龐大複雜以及不易普及化的缺點
描述資料的語言 (meta-language)
網頁製作語言-XML

XML

HTML中，標籤和屬性的意義都被明確的定義，但僅
是表示其中的文字如何在瀏覽器中顯示，對於資料
本身是無意義的

XML 只是利用標籤來界定每一筆資料，至於如何去
解譯這些資料則完全是應用程式的工作

使用延伸式樣規語言 (eXtensible Stylesheet
Language，簡稱XSL)，來描述資料該如何被展示
網頁製作語言-XML

XML範例-1
網頁製作語言-XML

XML範例-2:相同XML檔案,套用不同XSL
網頁製作語言-XML

XML的優勢


只要資料結構、語意和資料值能夠統一，具有自我定義
(self-defining)的特性，亦即XML文件不必預先設定的
特殊格式和結構
XML文件內容的Tag元素基本上與通訊協定獨立



適合在網際網路和全球資訊網的環境中流通傳輸
XML在編輯器、中介軟體以及應用工具上擁有更多的選
擇
適用於電子商務

ebXML(Electronic Business using eXtensible
Markup Language)
網頁製作語言-描述語言

描述語言(Script Language)


可以直接加入到HTML檔案中的程式
大部分的Script都是當事件發生的時候才會被觸發


Web Pages有變化時，瀏覽器都會察覺，當有處理該事件
的Scripts時，就把事件交給對應的標記語言事件處理器，
以便做進一步的處理
加入互動式或比較複雜的功能
網頁製作語言-描述語言

動態網頁執行過程
動態網頁程式
直譯程式
Web Server
個人電腦
瀏覽器呈現
網頁製作語言-描述語言

Script Language

Microsoft Visual Basic Scripting Edition
(VBScript)


JavaScript


Microsoft
Netscape
Microsoft version of JavaScript (Jscript)

Microsoft
網頁製作語言- VBScript

VBScrip






是屬於Microsoft Visual Basic語言家族的成員，
因此如果有Visual Basic程式設計的基礎，則對與
VBScript 也會非常熟悉
內嵌在HTML的文件
不需要特殊的工具或編輯軟體
由IE或PWS/IIS解譯後加以執行
使用 Tag 『SCRIPT』將 VBScript 程式碼加到
HTML 檔案中
除了可以用於DHTML的設計外，VBScript還可以用
於互動網頁語言ASP上
網頁製作語言- VBScript

VBScript範例
網頁製作語言- JavaScript

JavaScript



前身為 Live Script，是網景通訊(Netscape
Communications) 公司開發出來的描述語言
不同於由 Sun Microsystems 公司的程式語言Java
搭配上了文件物件模型(Document Object Model，
簡稱DOM)的設計，使得Web Pages的設計變化萬千
網頁製作語言- JavaScript

JavaScript範例
網頁製作語言- JavaScript

精通JavaScript需要對程式設計觀念有徹底的
了解，還需有一點物件導向程式的概念
網頁製作語言- JScript

Jscript

全名為Microsoft version of JavaScript


Microsoft推出相容JavaScript的Script語言
Jscript與JavaScript都滿足歐洲電腦製造商協會
(European Computer Manufacturer‘s Association)所
提出來的標準


滿足此標準的語言則稱為 ECMAScript
JScript和JavaScript幾乎完全相同
網頁製作語言- JScript

JScript 範例
網頁製作語言-互動式網頁語言

靜態網頁

單純地顯示內容


網頁內容
HTML
動態網頁

依據瀏覽者的使用
狀態不同，例如不
同的瀏覽者、瀏覽
行為與瀏覽時間，
而呈現不同的內容
Web Server
執行結果
個人電腦
網頁製作語言-互動式網頁語言



Active Server Pages (ASP)
PHP: Hypertext Preprocessor (PHP)
Java Server Pages (JSP)
網頁製作語言-ASP

動態伺服器網頁(Active Server Pages，簡稱
ASP)



在Server端提供開發以及執行動態、互動式與高效
能應用網頁程式的環境
將Script Language直接加在HTML Tag的Web Pages，
在Web Server產生動態的Web Pages內容
可使用多種語言來建立


JavaScript、VBScript…
伺服端以直譯方式執行Web Pages
網頁製作語言-ASP

ASP 3.0


ASP.NET是以ASP 3.0為基礎所開發出的下一個版本，
使用全新的伺服端技術
與資料庫的搭配


採用Windows的ODBC標準介面，支援各種類型資料庫，像
是SQL Server與Access等
藉由ActiveX擴充其功能，使能控制的範圍廣大

ActiveX是由Microsoft開發出來，由一些具有互動式功能
的技術所組成，它能夠使得軟體元件在網路的環境互相溝
通，而不用去管這些軟體元件是用什麼程式語言所寫出來
的
網頁製作語言-ASP

主機必須支援ASP

ASP需要在伺服器上執行


同樣的概念在開發PHP或是JSP的Web Pages時相同
執行ASP


自行架設Web Server，或是租借外界的伺服器
Microsoft的作業系統


Microsoft Personal Web Server(PWS)
Microsoft Internet Information Service(IIS)
網頁製作語言-ASP

設定Web Site

主目錄：指的就是Web Site的根目錄，該目錄下的Web
Pages都可以被進入Web Site的使用者瀏覽


預設瀏覽網頁：不需輸入網頁名稱，Web Site會把自動
預設瀏覽網頁傳送給使用者


因此我們所撰寫Web Pages都必須放在主目錄下
預設瀏覽網頁檔名多為index.htm、default.htm或是
default.asp等，當然使用者也可以自行設定預設瀏覽網
頁的檔名
虛擬目錄：邏輯的目錄結構，如果主目錄下還有資料夾，
則此資料夾也會成為主目錄下的子目錄
網頁製作語言-ASP

ASP

以『<%』與『%>』包含起來

當使用者瀏覽ASP時，Web Server會先就執行碼的部分先
執行，所以使用者將不會看到程式碼，使用者看到的只是
單純的HTML檔案
網頁製作語言-ASP
網頁製作語言-ASP

ASP

可加上流程控制指令、Script Language或是與資
料庫搭配，使ASP可以根據不同的條件與情況，展
現不同的Web Pages內容給使用者
網頁製作語言-PHP

PHP






全名『PHP: Hypertext Preprocessor』
開放原始碼(Open Source)的伺服端語言
直接於HTML文件內編寫
主要是用於Linux/Unix作業系統，目前穩定的版本
為4.3.10
只需配合Web伺服器和瀏覽程式，就可以建立Web
Site內容
常使用是MySQL資料庫系統

PHP對MySQL的相容是最全面的，包括內建許多管理和維護
MySQL的工具
網頁製作語言-PHP

PHP可支援之作業系統、Web Server、資料庫
和瀏覽程式列表
作業系統
Web Server
資料庫
瀏覽程式
Linux/Unix
Apache
MySQL
Netscape
Windows
Apache/IIS
MySQL/ODBC
Netscape/IE

Apache是一套免費的Web Server軟體


可在官方WebSite(http://httpd.apache.org/)下載安裝
Apache後
所撰寫的Web Pages一樣也是要放在Apache的Web Site主
目錄下
網頁製作語言-PHP

PHP的執行效能較快

ASP是建立在Microsoft開發的通用物件模式
(Common Object Model，簡稱COM)結構之上

當用VBScript來撰寫ASP時，實際VBScript還是需要透過
COM物件來執行
網頁製作語言-PHP

PHP


主要也是包含在Tag『<?』與『?>』中
PHP範例原始碼
網頁製作語言-PHP

PHP 範例經由Web Server執行過後的HTML檔案

PHP範例原始碼執行結果
網頁製作語言-JSP

JSP


以 Java 程式語言為基礎的Web Site伺服器端描述
語言程式技術
JAVA執行方式有二種


Java Applet是下載到使用者端執行的程式
Java Servlet則是在Web Server上執行


JSP就是結合HTML和Java Servlet的一種伺服端網頁技術
不是真正的程式語言

一套由 Java 寫成的物件以及Script Language語法，用
來處理物件與 JSP之間的溝通過程
網頁製作語言-JSP

需要先安裝

Web Server


安裝J2EE Software Development Kit (SDK)


IIS或是Apache都可
可以在昇陽(Sun)公司的Web Site 免費下載
JSP引擎

Caucho Technology的Web 免費下載Resin 伺服器
網頁製作語言-JSP

JSP


包含HTML語法與網頁程式
使用『<%』與『%>』把程式包含起來


當使用者瀏覽JSP網頁時，Web Server會先把Web Pages編
譯為Java Servlet，經由執行後把使用HTML把結果回傳給
使用者的瀏覽器
使用者將看不到JSP的原始碼
網頁製作語言-JSP

JSP範例原始碼
網頁製作語言-JSP

JSP 範例經由Web Server執行過後的HTML檔案

JSP範例原始碼執行結果
網頁製作軟體

開發Web Pages時

利用方便使用的Web Pages編輯工具來設計Web
Pages
網頁製作軟體
FrontPage
Dreamweaver
其他
網頁製作軟體-FrontPage

FrontPage



Microsoft所開發的Web Pages編輯軟體
最新版本是Microsoft® Office FrontPage® 2003
Web Site的建立及管理程式
網頁製作軟體-FrontPage

開發Web Site


增強的製作環境、新的圖形功能、精簡的 HTML，
以及控制程式碼
使用 Microsoft IntelliSense® 技術以減少程式
碼中的錯誤


可編輯不是 HTML 的檔案類型


可用於語言程式碼的編輯上
文字檔 (副檔名為 .txt 的檔案)、XML 檔案、XSLT 檔案
以及其他符合ECMA規範的Script Language之檔案
搭配了ASP.NET 控制項
網頁製作軟體-FrontPage

規劃Web Site


動態Web Site範本
直覺式使用者介面


使用者可以更輕鬆地編輯圖像，並更能控制對圖像顯示及
儲存的方式
支援 Macromedia Flash
網頁製作軟體-FrontPage

發佈Web Site

包含一個新的發佈使用者介面遠端Web Site檢視


發佈到任何檔案系統、本機及遠端Web Site之間、延伸伺
服器與FTP 伺服器上
遠端Web Site及本機Web Site的同步處理


顯示本機Web Site及遠端Web Site中檔案及資料夾的狀態
允許在FTP伺服器上與 Dreamweaver 使用者一起工作，而
不會意外覆寫彼此所做的變更
練習：框架頁
網頁製作軟體-Dreamweaver

Macromedia Dreamweaver


受歡迎的編輯工具
方便的設計及開發環境





一目了然管理Web Site的檔案與使用到的物件
WYSIWYG
可以保留字型、色彩及 CSS 樣式從Microsoft
Word 及 Excel 文件直接複製內容編輯視窗內
支援了上述提及DHTML、ASP.NET、JSP、PHP、XML
與各種資料庫系統
提供製作Web Pages動畫的能力，只要針對一物件
的動畫時間軸中設定設定即可
網頁製作軟體-Dreamweaver

Macromedia Dreamweaver

使用預設的Site進行較完整的Web Site管理



節省修改檔案繁複的在Internet上傳送
自動幫比對Web Pages內容避免更新舊的檔案
安全模式 FTP 來加密所有要傳送的檔案
個人Web Site建置
階段 1
規劃
設計
階段 2
開發
階段 3
維護
個人Web Site建置

規劃設計階段




主題設定：按照個人需求，確定Web Site所要表達的主
題。多以個人的興趣居多，因此內容可以自由發揮創意
來設計
資料搜集：資料的蒐集，根據主題尋找可用的資源與技
術
技術評估：分析Web Site需求與技術的限制，決定可行
的開發架構與模式
內容企劃：針對所蒐集的資料與Web Site的主題，列出
適合的內容。由於Web Site的主題會影響Web Site的風
格與讀者，故決定內容時需適當的取捨
個人Web Site建置

開發階段






規劃設計時所組織的內容
建立Web Site的主架構
製作與編輯Web Pages
瀏覽器預覽全部的Web Pages
試超連結、測試前端程式與畫面效果
促銷Web Site

各大入口Web Site，例如Yahoo Taiwan、MSN或是新浪，
為自己的Web Site註冊
個人Web Site建置

維護階段

資料更新與維護


維持Web Pages的新鮮與可看性是使Web Site
持續受歡迎的重要法門
推陳出新的Web Pages技術
 使的Web Site更有特色，更吸引人
免費網頁空間使用
入口
Web Site
ISP
網頁空間
虛擬
主機
專屬
Web Server
70