1 / 22

動態網頁程式設計 Dynamic Web Programming

動態網頁程式設計 Dynamic Web Programming. 課程綱要 授課教師：劉俊吉. Reference. Textbook ： JSP 2.0 技術手冊 林上傑、林康司 / 著 (2004) 出版社：碁峰 Reference: J2SE 1.4 Documentation http://java.sun.com/j2se/1.4.2/docs/ JSP Tutorial http://www.jsptut.com/ Thinking in Java, 3rd Edition http://www.mindview.net/Books/TIJ/.

urbano
Download Presentation

動態網頁程式設計 Dynamic Web Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 動態網頁程式設計 Dynamic Web Programming 課程綱要 授課教師：劉俊吉

  2. Reference Textbook：JSP 2.0技術手冊 林上傑、林康司/著 (2004) 出版社：碁峰 Reference: • J2SE 1.4 Documentation http://java.sun.com/j2se/1.4.2/docs/ • JSP Tutorial http://www.jsptut.com/ • Thinking in Java, 3rd Edition http://www.mindview.net/Books/TIJ/

  3. Software • Java 2 Platform, Standard Edition, v 1.4.2 (J2SE) • J2SE v 1.4.2_04 SDK with NetBeans 3.6 Bundle http://java.sun.com/j2se/1.4.2/download-netbeans.html • Tomcat 5.0 & MySQL 4.0

  4. 課程大綱 1. HTML 和 XML 語法 2. JAVASCRIPT的應用 3. JAVA基本語法 4. JSP基本語法 5. JSP的隱含物件 6. 資料庫與JAVABEANS應用 7. 連結資料庫與取得資料 8. SQL語言的使用

  5. 評量方式 • Midterm exam: 30% • Homework: 30% • Project Report: 40%

  6. 網頁背景知識

  7. HyperText Markup Language • Web網頁是一個文件，其中包含文字、圖形和超鏈接等元素。製作網頁的標準是HTML (HyperText Markup Language)。 • HTML是根據國際標準化組織（ISO）的SGML（Standard Generalized Markup Language）標準定義的，它規定了文檔的邏輯組織格式，包含了文字、圖像、動畫、表單和鏈接等多種形式。

  8. HTML 文件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>文件標題</title> <!--這是註解 --> </head> <body> 文件本體 <!-- 註解 --> <p>文件本體 </body> </html>

  9. HTML標記 • HTML文件由控制部分和正文部分組成。HTML的控制標記對大小寫不分，同時控制標記用“< >”進行區分。 • HTML標記一般配對使用，只有少數標記單獨使用。

  10. charset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=big5"> <title>文件標題</title> <!--註解 --> </head> <body> 文件本體 </body> </html>

  11. <BODY>標記 • <BODY>標記中，常用的以下屬性︰ • BACKGROUND=“...”背景的圖片名。 • BGCOLOR=“...”背景顏色。 • TEXT=“...“本文顏色。 • LINK=“...“未被訪問的文字鏈結的顏色。 • ALINK=“...”被點擊的的文字鏈結的顏色。 • VLINK=“...“訪問過的文字鏈接源的顏色。 • BORDER=”…”圖像邊界的寬度，單位是像素點。

  12. 超鏈接 • 超鏈接是指多個Web頁面透過關鍵字或圖像連結起來： • <A HREF=….>和</A> • For example: <a href="http://biochip.nchu.edu.tw/" target="_top">實驗室首頁</a>

  13. FONT • 控制文字的HTML標記︰ <FONT>…</FONT> • 常見的屬性參數︰ • SIZE=“...”規定字體的大小尺寸。 • COLOR=“...”規定文字的顏色。 • FACE="..." 規定字體

  14. 字體顯示效果 • <SMALL> …… </SMALL> 小字體顯示 • <BIG> …… </BIG> 大字體顯示 • <B> …… </B> 黑體字顯示 • <Center> ……. </Center> 居中對齊顯示

  15. 圖像和動畫 • 圖形或動畫的標記是︰<IMGSRC="文件名"> • 有以下屬性︰ • SRC="...“圖像的URL位址文件名。 • ALT="...“在圖像未完全收到時，圖像位置顯示的文字訊息。 • ALIGN=“...”確定圖像的對齊模式。

  16. 更改 HTML 之文件流向 • <p> 新的段落 • <br> 強制換行 • &nbsp;空格 • <pre>～</pre> 空白及換行字元保持原狀

  17. Table • <html><head> • <meta http-equiv="Content-Type" • content="text/html; charset=big5"> • <title>表格</title> • </head><body> • <p><table border=2> • <tr><th>第一欄</th> <th>第二欄 • <tr><td>資料 1.2 <td>資料 1.3 • <tr><td>這是第 N 筆資料 <td>資料 2.5 • <tr><td colspan=2>資料 3 • <tr><td colspan=2 align=center>資料 4 • </table> • </body></html>

  18. HTML Form <html><head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>HTML Form</title></head><body> <form action="test.jsp" method=POST> 您的性別： <input type=radio name=sex value="M" checked>Man <input type=radio name=sex value="W">Woman<br> <textarea name=comment rows=4 cols=20> 請在這裡寫上您的意見... </textarea> <p align=center> <input type=submit value="OK"> <input type=reset value="Clear"> </form></body></html>

  19. Server 端的「接收者程式」 • 需配和 server 端的「接收者程式」 • CGI program • Perl program • ASP program • PHP program • JSP program • servlet program • …

  20. HTML Frame <html><head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <meta http-equiv="Content-Language" content="zh-tw"> <title>生物晶片核心實驗室</title> </head> <frameset cols="228,*"> <frame src="left.htm" marginwidth="1" marginheight="1" name="frame1" scrolling="auto" target="frame2"> <frame src="right.htm" marginwidth="2" marginheight="2" name="frame2" scrolling="auto" target="_self"> <noframes> <body> <p>此網頁使用框架，但是您的瀏覽器並不支援。</p> </body> </noframes> </frameset> </html> http://biochip.nchu.edu.tw/

  21. Client vs server • Client 端 • scripts (JavaScript orVBScrpit) • CSS (Cascading Style Sheets) • Java applet orActiveX • Server 端 • CGI, servlet, JSP • scripts (ASP, PHP, Perl, etc.) • Database link

More Related