Html01
- 1. A00338 網頁設計
課程教師：王弘宗
教學網站 : http://course2011.dyndns.biz/
電子郵件 : htwang05@gmail.com
Oct 21, 2012
- 3. 一、課程目標與教學策略
‧ 以範例方式講解 HTML 與相關網頁技術，輕鬆帶領學生學習
網頁設計的語法、技術與應用
‧再以軟體整合與專案製作技巧，進而建立實際網頁作品 / 網站
‧規劃網頁架構
‧基本製作技巧
‧網頁上傳與下載
‧ Web 技術的應用
3
- 4. 二、教學內 容
第一週：課程簡介及網站基本概念介紹
第二週：網頁設計概念及規畫流程
第三週：網頁編輯工具介紹與操作
第四週： HTML 語法 (1)
第五週：網頁版型應用
第六週：完成第一個網站及網頁上傳
第七週：網頁表單語法與應用
第八週：期中作品設計 / 創作
第九週：期中作業報告
第十週：網路應用程式 ( 一 )
第十一週：網路應用程式 ( 二 )
第十二週： HTML 語法 (2)
第十三週：繞圖排文
第十四週：網站相簿
第十五週： CMS 應用 ( 一 )
第十六週： CMS 應用 ( 二 )
第十七週：期末作品設計創作
第十八週：期末作業報告
4
- 5. 課程其它說明
三、學習評量
平時成績： 30% 、期中作業： 30% 、期末作業： 40%
四、課程教材
網頁程式設計 --HTML 、 JavaScript 、 CSS 、 XHTML 、 Ajax( 第三版 )
作者： 陳惠貞 [ 碁峰資訊 ]
五、教學網站
數位教學平台： http://course2011.dyndns.biz/
5
- 6. 標準靜態網頁網站
●●●●●
IE
顯示網頁的要
求
傳回 顯示的網
使用者瀏覽器 頁 網頁伺服器
Web Site
●●●●●
靜態網頁的最後內容由網頁設計師決定
- 7. 標準靜態網頁網站
IE Netscape Mozilla Firefox
Maxthon
MyIE
使用者瀏覽器
顯示網頁的要
求
傳回 顯示的網
網頁伺服器
●●●●●
頁
Web Site
靜態網頁的最後內容由網頁設計師決定
- 8. 標準靜態網頁網站
Apache
IE IIS
使用者瀏覽器 PWS
顯示網頁的要
求
傳回 顯示的網
網頁伺服器
●●●●●
頁
Web Server
靜態網頁的最後內容由網頁設計師決定
- 9. 單純動態網頁網站
執行應用程式
應用程式
顯示網頁的要 伺服器
求
傳回 顯示的網
使用者瀏覽器 頁 網頁伺服器
產生靜態的網頁
- 10. 連結資料庫處理動態網頁網站
執行應用程式
顯示網頁的要求 資料庫
要求存取資
料
回傳伺服器
傳回 顯示的網頁網頁伺服器
使用者瀏覽器 產生靜態的網頁
- 11. 連結資料庫處理動態網頁網站
設計應用程式 設計資料庫
資料庫
設計者 設計網
頁
網頁伺服器
使用者 編輯工具 ：網頁設計、靜態網頁
瀏覽器 Apache ：網頁伺服器
PHP ：動態網頁程式語言，可內嵌 HTML
MySQL ：資料庫伺服器
phpMyAdmin ：圖形介面的 MySQL 資料庫管理程式
- 12. 連結資料庫處理動態網頁網站
設計
設計資料庫
資料庫
瀏覽
網頁伺服器
編輯工具 ：網頁設計、靜態網頁
Apache ：網頁伺服器
PHP ：動態網頁程式語言，可內嵌 HTML
MySQL ：資料庫伺服器
phpMyAdmin ：圖形介面的 MySQL 資料庫管理程式
- 13. 連結資料庫處理動態網頁網站
執行應用程式
顯示網頁的要求 資料庫
要求存取資
料
回傳伺服器
傳回 顯示的網頁網頁伺服器
使用者瀏覽器 產生靜態的網頁
AppServ 2.5.10 的功能相當完整，包含了以下元件：
． Apache 2.2.8
． PHP 5.2.6
． MySQL 5.0.51b
． phpMyAdmin 2.10.3
- 14. HTML 網頁
• HTML 為我們作網頁的基礎，而在網頁的
表達上，是以 HTML 來表達。 HTML 也是
很重要的。 HTML 為一超文字標籤語言，
我們在此介紹較為重要的標籤並且實作。
- 16. 簡介動態網頁與動態網頁應用
• 何謂動態網頁？
– 即使用者能直接與伺服器做互動式的交談，也
就是說只有在使用者發出請求服務時，伺服器
才會做回應，而非靜態網頁獨立於伺服器上
• 可以做哪 些應用？
– 拍賣網站 ( 個人動態新增拍賣物品 )
– 無名小站 ( 個人動態管理 blog)
– Facebook( 個人動態管理、分享與它人互動 )
16
- 17. 1-2 PHP 簡介
• PHP (Hypertext Preprocessor) 介紹
• PHP 運作流程
17
- 18. PHP (Hypertext Preprocessor) 介
紹
• PHP (Hypertext Preprocessor) ：
– 是一種在伺服器上運作的直譯式 Script 腳本語
言，也就是說在網頁被送出前，會先被伺服器
所執行，而它主要是內嵌於 Html 網頁中處理
「動態網頁」。
18
- 19. PHP 運作流程
Web Server 收到該請求
Web Server 收到該請求
Client 端 透 過 Browser 向 Web
Client 端 透 過 Browser 向 Web 服務，會檢查要求之頁
服務，會檢查要求之頁
Server 請求服務。
Server 請求服務。 面 中 是 否 包 含 PHP 程
面 中 是 否 包 含 PHP 程
式語言，若有則 Server
式語言，若有則 Server
<html>
(1) <? php 會 將 該 PHP 的 區 塊 交
會 將 該 PHP 的 區 塊 交
echo "hi"; 由 PHP 解 譯 器 處 理 ，
由 PHP 解 譯 器 處 理 ，
?> 當處理完畢後將結果放
當處理完畢後將結果放
</html>
回 html 中。
回 html 中。
(2)
Client (3) <html>
hi
</html>
Web Server 將 PHP 程式執行完
Web Server 將 PHP 程式執行完 Web Server + PHP
產生之結果頁面回傳給 Client 端
產生之結果頁面回傳給 Client 端
。
。
19
- 20. 1-3 網頁開發 / 測試 / 發佈的整合環境
• 簡介 AppServ
• AppServ 環境建置
• 執行環境的測試
20
- 21. 簡介 AppServ
• 以下為 AppServ 所整合之軟體：
– Apache ：
可以在大多數電腦作業系統上運作的開放源碼網頁伺
服器，負責處理使用者的連線請求並將網頁送給 PHP
處理。
– PHP ：
負責執行網頁中之 PHP 程式片段。
– MySQL ：
開放源碼的關聯式資料庫管理系統，負責儲存互動式
網站所需使用之資料。
– phpMyAdmin ：
以 PHP 撰寫之 MySQL 資料庫網頁管理介面。
21
- 22. AppServ 環境建置 (1/9)
• Step 1 首先連結到 AppServ 官方網站，取得最新版本
的 AppServ 網址如下：
– http://www.appservnetwork.com/
22
- 28. AppServ 環境建置 (7/9)
• Step 7 請依序輸入各欄位值後點選『 Next 』繼續。
Server Name 改 成 『 帳 號 .no-
Server Name 改 成 『 帳 號 .no-
ip.biz 』 ((在 www.no-ip.com 所
ip.biz 』 在 www.no-ip.com 所
Adminstrator’s Email Address
Adminstrator’s Email Address
申請的網站名稱 ))
申請的網站名稱
則 是 輸 入 『 帳 號
則 是 輸 入 『 帳 號
@gmail.com 』
@gmail.com 』
Apache HTTP Port 是指伺服器
Apache HTTP Port 是指伺服器
要開放給使用者使用的 Http 的
要開放給使用者使用的 Http 的
服務埠這裡預設為 80
服務埠這裡預設為 80 28
- 34. 執行環境的測試 (1/3)
• Step 1 Appserv 環境架設安裝完畢後請在瀏覽器的網
址列中輸入『 http://localhost 』，若出現以下頁面即
代表已成功安裝 Apache 網頁伺服器。
34
- 35. 執行環境的測試 (2/3)
• Step 2 點選 phpMyAdmin Database Manger Version 後
，會彈出輸入使用者名稱與密碼視窗。
使用者帳號為預設的『 root 』
使用者帳號為預設的『 root 』
。
。
密 碼 為 『 AppServ 環境 建 置
密 碼 為『 AppServ 環 境 建置
Step 88』時所設定的密碼，輸
Step 』時所設定的密碼，輸
入後即可點選確定，進行
入後即可點選確定，進行
MySQL 資料庫的管理。 35
MySQL 資料庫的管理。
- 38. Q&A
• port 80 ?
• localhost(127.0.0.1) vs 網站名稱 (IP)
• 防火牆、防駭軟體…
38
