HTML 103 互動式網頁 助教:黃毓瑩.

Slides:



Advertisements
Similar presentations
《计算机网络技术》 动态网页制作技术 常用HTML控件课程积件 杨 姝.
Advertisements

第六章 网页设计与制作基础.
童詩教學 爬格子工作坊 互動過程 童詩教學法 教學教案 相關資源 心得 林士翔
白玉苦瓜 余光中.
动态Web开发技术--JSP.
基于JSP搭建Web应用程序.
專題製作 許惠淑.
第8讲 HTML与PHP基础 静态网页 vs. 动态网页.
HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。
Web Programming 網際網路程式設計
主讲 冷清波 城乡规划管理与法规 主讲 冷清波
学习情境三:配置WEB服务器 服务器配置与管理.
第五单元课1-3 层叠样式表.
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
圖書館新生導覽 圖書館使用秘笈~新鮮人篇 陳孟珠
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
全球資訊網(WWW)簡介.
HTML簡介、文字的變化、超連結的使用 主講:朱漢琳.
HTML.
第五章 网页设计 网页制作的语言和工具 网页制作步骤和原则 使用Dreamweaver工具制作网页 使用FrontPage工具制作网页
第3章 超文本标记语言(HTML) 3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A>
建國技術學院資訊管理學系 饒瑞佶 2004/7/5 彰化縣政府補助辦理網頁設計資料庫應用班 建國技術學院資訊管理學系 饒瑞佶 2004/7/5.
Google 自訂搜尋 淡江大學資訊中心 專案發展組 朱家璁 2009/10/6.
PHP+MySQL互動式網頁程式設計班 PHP進階語法 講師:林業峻 CSIE, NTU 6/ 19, 2010.
Hello World 體驗實作第一個JSP程式.
Ch1.認識全球資訊網 1.1 「網際網路」與「全球資訊網」 1.2 全球資訊網的基礎 – 網頁與超連結
东南大学 大学计算机基础 ——基本概念及应用思维解析.
PHP5與MySQL5 入門學習指南 凱文瑞克 著 第 9 章 常數.
第 3 章 網頁的基本設定與預覽.
第 2 章 必備的 HTML 與 CSS 重點.
【PHP程式設計】 實作一:計算BMI.
第四章 網頁表單與資料傳遞.
留言版 1.先Create一個留言板的table
PHP +MySQL快速入門 Lesson 4.
Ch11 檔案上傳及電子郵件 WEB程式設計.
利用PHP將資料存入MySQL PHP 5 Tutorial 範例:
第 2 章 FrontPage 2002 的基本操作.
中華技術學院 網頁設計研習會.
Cookie 存取Cookie Cookie有效時間 Session 存取Session session 函數
8 网页制作基础知识 赵国庆 博士 北京师范大学教育技术学院
网页制作与设计 主编 耿 杰 科学出版社.
進階 WWW 程式設計 -- PHP Regular Expression 靜宜大學資訊管理學系 蔡奇偉副教授 2004
無障礙網頁 公關室.
PHP+MySQL互動式網頁程式設計班 檔案上傳程式設計 講師:林業峻 CSIE, NTU 7 / 3, 2010.
檔案上傳 所謂檔案上傳,就是將檔案由客戶端的主機,藉 由瀏覽器傳送到伺服器的資料夾上。
HTML5简介 WEB前端三剑客之一.
W3C标准网页制作 主讲教师:张 涛.
PHP 程式流程控制結構.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
13.1 用框架劃分工作區,方便演示資訊 13.2 使用連結及鎖定點連接資訊 13.3 使用列表及表單演示資訊
网 站 设 计 与 建 设 Website design and developments
Cookie 存取Cookie Cookie有效時間 Session 存取Session session 函數
PHP 變數、常數與運算子 變數 常數 運算子
The Department of Education Technology
表單(Form).
架站實做—AppServ
电子商务专业课程 电子商务应用技术 Application of Technology On Electronic Commerce.
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
HTML 103 互動式網頁.
蓝色图示 — 无动画版.
Ch09 在網頁之間傳遞資訊 網頁程式設計.
表單(Form).
HTTP 1.1 Method OPTIONS GET HEAD POST PUT DELETE TRACE CONNECT
XML備份MySQL資料庫 <html> <head>
利用PHP將資料存入MySQL PHP 5 Tutorial 範例:
第6章 PHP的数据采集.
PHP程式設計 五、程式流程控制結構 建國科技大學 資訊管理學系 饒瑞佶.
網頁設計實務- PHP 與資料庫整合.
第1章 HTML基础 主讲人:刘泰然 经济管理学院.
表单页面 表单是用户利用浏览器对Web站点网络数据库进行查询的一种界面,用户利用表单可以输入信息或选择选项等,然后将这些信息提交给服务器进行处理。通过表单,既可以将浏览器的信息发送到Internet服务器上,同时表单也可以使用户与站点的浏览者交互或从浏览者那里收集信息。它是网页的设计者和使用者相互交流的工具。表单对象包括文本域(单行、多行、密码)、列表、菜单、复选框、单选框、按钮等。
Presentation transcript:

HTML 103 互動式網頁 助教:黃毓瑩

1. 表單的建立-1 啟動 Microsoft Frontpage,插入【表單】

1. 表單的建立-2 一直按【Enter】,將 『提交』與『重新設定』往下推。 將游標移至表單最上方,key in 《姓名:》,執行右圖的指令

1. 表單的建立-3 上述步驟後的結果會如下圖所示。

1. 表單的建立-4 點選方才建立的單行方字方塊,按滑鼠右鍵 點選【表單欄位內容】

1. 表單的建立-5 將預設的“T1”改為“name”,以方便與其他欄位的區別 【字元寬度】之調整,可以變更欄位顯示寬度的大小

1. 表單的建立-6 將FrontPage的呈現方式由【一般】切換成【HTML】

1. 表單的建立-6 HTML語言如下: <p>姓名:<input type="text" name="name" size="20"></p> <p>電子信箱:<input type="text" name="email" size="20"></p> 規則為: <INPUT TYPE=text NAME=欄位名稱 SIZE=欄位顯示寬度>

1. 表單的建立-7 整個文字方塊的建立如下: <HTML> <HEAD> <TITLE> 互動式網頁 - 範例一 </TITLE> </HEAD>   <BODY> <FORM> 姓名:<INPUT TYPE=text NAME=name> <BR> 電子信箱:<INPUT TYPE=text NAME=email> <BR> </FORM> </BODY> </HTML>

1. 表單的建立-8 上述的說明乃是“表單的欄位”,是要讓人填資料用的。 另外還有兩種“決策型欄位”, <INPUT TYPE=submit VALUE=按鈕的顯示文字> <INPUT TYPE=reset VALUE=按鈕的顯示文字> 例如: <p> <input type="submit" value="提交" name="B1"><input type="reset" value="重新設定" name="B2"></p>

1. 表單的建立-9 做完後,存成“xxx. html”,並將該檔案放入你的web資料夾中

2. PHP (Personal Home Page) PHP 開發之時,即是以處理網頁之表單為目標,是一種伺服器端的 Script 語言。

2. PHP -2 用 PHP 進行表單資料處理 <?php $name=$_POST['name']; $email=$_POST['email']; echo "<HTML> \n"; echo "<HEAD> \n"; echo "<TITLE> 中山企管 管理資訊系統 網路商店 $name 的留言</TITLE> \n"; echo "<META HTTP-EQUIV=\"Content-Type\" CONTENT=\"text/html; charset=big5\"> \n"; echo "</HEAD> \n\n"; echo "<BODY> \n"; echo " $name 謝謝您! &nbsp &nbsp 我們已經接到您的留言。 <BR> <BR> \n"; echo " 您所留的資料是:<BR> \n"; echo " 姓名: $name <BR> \n"; echo " 電子信箱: $email <BR> \n"; echo "</BODY> </HTML> \n";  ?>

2. PHP -3 開啟記事本,將上述文字複製貼上,並另存新檔為“xxx.php”(注意,此處要更改檔案類型), xxx 的意思是它必需和你前面做的“xxx. html”檔名是相同的

2. PHP -4 關於字串的處理:回到FrontPage下的xxx. html 將xxx.html與 xxx.php一起上傳至server <FORM METHOD=post ACTION=xxx.php > 姓名:<INPUT TYPE=text NAME=name> <BR> 電子信箱:<INPUT TYPE=text NAME=email> <BR> <INPUT TYPE=submit VALUE=留言> <INPUT TYPE=reset VALUE=清除> </FORM> 將xxx.html與 xxx.php一起上傳至server

完整範例(1)

完整範例(2)-系統回應

2. PHP -5 將資料email給自己:接續剛才的php語言 echo "</BODY> </HTML> \n"; $mailto = “kuo@bm.nsysu.edu.tw”; (商店主的e-mail)   $subject = “網路商店 顧客的留言”;  (e-mail的主旨)   $message = "姓名: $name \n"; $message .= "電子信箱: $email \n"; (注意 這裡的運算子是 .= (dot equal)) $sender = "From: \"$name\" $email "; mail($mailto, $subject, $message, $sender); ?>

3. 參考範本-1 http://www.e-quilters.com/contact_us.php

3. 參考範本-2 http://www.moooe-shop.com.tw/contact/contact.html

3. 參考範本-3 http://www.netbuilder.com.tw/html/modules/tinycontent/index.php?id=17