5.1 – 表格(FORM) 輸入元素 : 兩種傳遞方法 : GET or POST 範例 1. 文字欄位 Text box

Presentation on theme: "5.1 – 表格(FORM) 輸入元素 : 兩種傳遞方法 : GET or POST 範例 1. 文字欄位 Text box"— Presentation transcript:

1 5.1 – 表格(FORM) 輸入元素 : 兩種傳遞方法 : GET or POST 範例 1. 文字欄位 Text box
2. 捲軸文字欄位 Scrollbar textbox 3. 多選項欄位 Checkbox 4. 單選按鈕 Radio button 5. 多項下拉式選單 (Multiple) Select Menu 6. 遞交按鈕 Submit button 7. 重設按鈕 Reset button 8. 密碼欄 Password 9. 隱藏欄位 Hidden field 10. 檔案欄位 File field 兩種傳遞方法 : GET or POST 範例

2 5.2 動態網頁的運作 動態超文本標示語言容許的設計種類 動態樣式

3 動態超文本標示語言容許的設計種類 動態內容

4 動態超文本標示語言容許的設計種類 內建資料處理 容許用戶使用瀏覽器操控和改變所下載的信息 例 : 家課管理系統

5 動態超文本標示語言容許的設計種類 動態超文本標示語言容許網頁設計者指定網頁元素準確的顯示位置

6 靜態html vs 動態html 靜態html (static html):
除非網頁設計者對網頁內容作出修改並再上傳至網站 , 否則, 其內容及外貌永遠不會改變 . 單靠使用不同的網頁標籤寫成 . 例子 : 本科科網

7 靜態html vs 動態html 動態html (dynamic html): 內容及外貌隨用戶的動作而作出相關網頁回應 .
(css) (client-side script) 例子

8 程序片段(伺服器端vs客戶端) Server-side scripts vs Client-side scripts
根據程序片段之地方作分類 : 在伺服器內執行 -> 伺服器程序片段 在用戶的瀏覽器上執行 -> 客戶端程序片段 兩類程序片段皆貯存於網頁伺服器內 Client-side scripts 的優點 : 運算交由客戶端進行 => 可令網頁伺服器有較佳表現 (因伺服器要執行的運算減少了) 令網頁變得互動及吸引 可節省 INTERNET 的頻寬供其他上網用戶使用 缺點 : 如網頁內容須牽涉數據庫內數據的存取 , 就要靠Server-side scripts 才可做到

9 CGI (1) 公共閘道介面 Common Gateway Interface (CGI)
所有以windows及unix作 OS 之網頁伺服器皆支援此介面 可用以下程序語言編寫能使用 cgi 介面 技術之應用程序 : Perl, C, C++, Java

10 CGI (2) – 介紹 Server-side 運作 CGI script 可以是任何一個可執行的程式
(例 : Perl, compiled C, shell script 等) 如何呼叫 CGI script: <form action=“CGI_script的URL” method=[get | post] > ….. </form> 2 種方法 – GET, POST 傳遞數據至伺服器的不同方式

11 CGI (3) – GET 輸入到表格內之數據, 會加在 URL後才傳送出去 :
URL?var1=數值1&var2=數值2&var3=數值3 所有在 ? 後的數據會被抄至伺服器內之環境變量“QUERY_STRING” 內貯存 . QUERY_STRING = ‘var1=數值1&var2=數值2&var3=數值3’ CGI script 由 “QUERY_STRING” 中抽取各數值 如輸入的數據含有特殊符號, 在傳送前, 會變成一些 ascii 字符

12 CGI (4) – GET (續)

13 CGI (5) – Post CGI script 直接接收由表格傅來的輸入數據 環境變數
“CONTENT_LENGTH” 內含數據之總長度 比 GET 更為常用

14 JavaScript (1) – 介紹 最出名之client-side script, 由 Netscape 開發 提供 3 種效能 :
審核輸入到表格內之數據與及向用戶提供輸入錯誤提示 => 回應較快 處理由用戶觸發之事件, 例如當滑鼠移到一圖案上, 該圖案即由另一圖案所取代 => 網頁變得較互動及吸引 在客戶端進行數學運算 => 減輕伺服器之工作量

15 JavaScript (2) – 基礎知識 嵌入在 HTML內 (Head 或 Body 部份) 及由瀏覽器翻譯
<script language=“JavaScript”> ……. </script> 所包圍 語句之間要用分號分隔

16 Javascript 範例 javascript_basic Javascript_event.html
Javascript_form.html Javascript_func.html Javascript_intro.html Javascript_window.html

17 5.3 出版你的網頁 檔案傳送協定 (FTP) 互聯網上傳遞檔案的常用方法 要利用FTP連結至萬維網伺服器，你需要提供特定的信息：
連接名稱：設定一個特定的連接 主機名稱/地址：網站伺服器上貯存你的網站的地方 主機類型：用來辨別不同的伺服器位置 用戶名稱和密碼：連接時辨認你的身份

18 5.3 出版你的網頁 檔案傳送協定 (FTP) FTP應用程序所需的連接設定

19 5.3 出版你的網頁 檔案傳送協定 (FTP) FTP應用程序會顯示本區電腦(你的電腦)和遠端電腦(萬維網伺服器)內的檔案和目錄
你可以在本區目錄內選擇你想上載的檔案，並傳到萬維網伺服器內適當的地方