1 / 75

網際網路實務

網際網路實務. 現今與未來之構想 講師：陳惠貞. 課程大綱. ODBC 的建立 ASP 準備 IIS 架站設定 測試. HTML 簡介 基本 HTML 功能 段落元素 表格元素 表單元素 基本資料庫使用 MS-SQL MS-ACCESS MS-EXCEL. HTML 簡介. HTML(HyperText Markup Language) --- 一種用來標示 、排版超文件的語言 ( 標籤 ) 撰寫工具 --- 記事本 /Microsoft Word/Micrsoft FrontPage/ … HTML 的標籤 大小寫不分

ocean-peterson
Download Presentation

網際網路實務

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. 網際網路實務 現今與未來之構想 講師：陳惠貞

  2. 課程大綱 • ODBC的建立 • ASP準備 • IIS架站設定 • 測試 • HTML簡介 • 基本HTML 功能 • 段落元素 • 表格元素 • 表單元素 • 基本資料庫使用 • MS-SQL • MS-ACCESS • MS-EXCEL

  3. HTML簡介 • HTML(HyperText Markup Language) --- 一種用來標示、排版超文件的語言(標籤) • 撰寫工具---記事本/Microsoft Word/Micrsoft FrontPage/… • HTML的標籤 大小寫不分 • 可以直接以瀏覽器(Browser)來觀看網頁，但是一般會放在網頁伺服器(Web Server)上，才可以供人從外部觀賞

  4. 基本HTML 功能 • 段落元素 • 項目符號 • 標題字型 • 表格元素 • 表單元素 • 輸入方塊 • 核取方塊 • 選項…

  5. HTML外觀 • <html><head><title>名稱</title></head><body>內容</body></html>Titile讓首頁製作者以簡短的文字表達此一首頁之內容。Title的內容會出現在瀏覽器的頂端。若將某個首頁加入書籤，則Title內容變成該書籤名稱。

  6. 範例 • <html><head><title>西遊記</title></head><body>齊天大聖到此一遊。</body></html>

  7. 設定標題格式 • <html><head><title>標題測試</title></head><body> <center><h1>第一級標題</h1>正常文字<h2>第二級標題</h2>正常文字<h3>第三級標題</h3>正常文字<h4>第四級標題</h4>正常文字<h5>第五級標題</h5>正常文字<h6>第六級標題</h6>正常文字</center> </body></html>

  8. 設定段落格式 • <HR>：插入水平分隔線。 • <center>...</center>夾在這組配對標籤中的元件，將會被置中。 • <br>　它可以使文字換到下一行。注意！它並沒有配對標籤。 • <p>...</p><p> 代表一個段落的開始，用了它以後，文字會自動換行，</p>則 　代表此段落結束。 • <p align=left>...</p> • <p align=center>.</p> • <p align=right>...</p> • 這分別是靠左、置中與靠右的寫法。 • <pre>...</pre>　不管是空格、空行、換行或是文字的位置， 　都會依你原來的格式乖乖排好。

  9. 設定文字格式 • 字體的大小 • 標籤：<font size=number> </font>。數字從１～７，數字越大字體顯示就越大，而一般預設的字體大小為３。 • 例如：<font size=1>字</font><font size=2>體</font><font size=3>越</font><font size=4>來</font><font size=5>越</font><font size=6>大</font><font size=7>吧</font>

  10. 字形顏色的變化 • 基本格式<font color="#??????"></font> • <font color="#ff0000">紅色的字</font> • <font color="#00ff00">綠色的字</font> • <font color="#0000ff">藍色的字</font> • 粗體、斜體及加底線 • <B>這是粗體字效果</B>＝這是粗體字效果<I>這是斜體字效果</I>＝這是斜體字效果<U>文字加了底線</U>＝文字加了底線

  11. 跑馬燈設定 • <Marquee> </Marquee> behavior =”{slide,scroll,alternate}” [設定跑馬燈的表現方式(滑動，捲動，交替)] width=”n” [設定跑馬燈的寬度] height=”n” [設定跑馬燈的高度] direction=”{left,right}” [設定跑馬燈移動的方向] loop=”n” [設定跑馬燈重複的次數]

  12. <h1> 段落標記實例練習 <h3>

  13. 無序列表 type=squaretype=circle type=disc • <UL><LH>資工營營規<LI>上課不睡覺<LI>睡覺不打呼<LI>打呼不流口水</UL>

  14. 有序列表 type=A type=Istart=5 • <OL><LH>資工營營規<LI>上課不睡覺<LI>睡覺不打呼<LI>打呼不流口水</OL>

  15. 序列表實作

  16. 表格 • <table border=2><caption>光啟高中高三</caption><tr><td></td><td>導師</td> <td>人數</td> </tr><tr><td>仁班</td><td>豬聰明</td> <td> 40 </td> </tr><tr><td>義班</td><td>飛雅特</td> <td> 32 </td> </tr></table><table>的相關屬性：１．Border：為表格加上框線。　　若各位設定<table border=0>，則這個表格便無框線（本站首頁就是利用這技巧來做編排），而數字設的越大，表格的外框線便越粗。２．Width、Height：設定表格的寬度及高度。　　設定的方式可分為百分比及圖點大小這兩種單位，基本上這與設定圖片的寬度及高度是一樣的，所以我就不多做介紹了。３．Cellspacing：調整儲存格間的寬度。　　數字越大，儲存格間的間隔越大，反之則越小。一般的情況下，預設值為２。４．Cellpadding：調整欄位內資料與儲存格線間的間隔距離。　　數字設的越大，間隔越大，反之則越小。在一般的情況下，預設值為１。５．Bgcolor：設定表格的背景顏色。　　與設定網頁背景顏色的方法是相同的，例如：<table bgcolor="#ooooff">則表示將表格的背景色彩設為藍色。６．background：設定表格的背景。　　使用的方法為<table background="圖片的ｕｒｌ位置">。基本上與設定網頁背景圖案的方法是相同的。

  17. 表格二 • <TR><TH>及<TD>的相關屬性: Align：控制資料顯示的水平位置。而可設定的值有left、center及right三種。 • 你可以用ROWSPAN=n及COLSPAN=n來完成。 • 例如：<tr><th >品名</th> • <th colspan="2" bgcolor=red>個人電腦</th></tr> • <tr><th rowspan="4">說明</th> • <th rowspan="2">硬體</th> • <td >Pentium IV 800</td></tr> • <tr><td >256M Ram</td></tr>

  18. 範例實作

  19. 圖片 【例】 <img src="images/nor2.jpg"alt="酒井法子的相片"border=0> 例如：檔名：news.gif（檔名的大小寫要注意）圖片大小：width=150 height=107 （單位為pixel）因此我們加上下面的原始碼便可插入此圖。<img src="news.gif" width=150 height=107> • 格式：<img src="路徑/圖檔檔名"alt="找不到圖檔時出現的內容,當滑鼠移到圖片上方時也會出現該內容"width=XX顯示時的寬度height=XX顯示時的高度border="邊框大小">

  20. 圖片格式 • 目前支援的圖片格式，常見的有 .gif .jpg .bmp等 • Bmp為常見的圖形檔格式，沒有壓縮，所以一般來說檔案較大，不建議使用在網頁上 • Gif格式有經過非破壞性的壓縮，所以圖形不失真，但是只有256色而已，常見的有兩種格式gif87及gif89a，gif89a可以將多張圖片放在一個圖檔以顯示動畫 • Jpeg採用破壞性壓縮，經壓縮過的檔案可以小到原先圖形檔的百分之一 • 注意SRC屬性中不要有file:///…的字眼，以避免他人無法瀏覽網頁

  21. 超鏈結 • HTML文件中建立超連結標籤的基本用法為：<A Href="要連結的URL位置">敘述文字</A>想利用超連結連到『奇摩站』， • <A Href="http://www.kimo.com.tw">奇摩站</A> • E-mail：連結到指定的Email信箱。 • <A Href="mailto:u4480495@tknet.tku.edu.tw">寫信給我吧</A> • FTP：指定FTP站的位置 • <A Href="ftp://ftp.isu.edu.tw/win95/graphics/gifcon32.exe">下載gifcon32.exe</A>

  22. 圖片超鏈結 • 若是我們有替圖片加上超連結，則瀏覽器自己會替圖片加上一個外框，因此若我們想去除此外框或是加粗此框，則我們可用border=number的屬性來控制，數字越大，框越粗，數字為零則無外框。 • <A Href="../news.htm target=_top"><img src="news.gif" width=150 height=107 border=0 alt=加上連結去掉邊框></A>

  23. 圖片超連結實例練習 http://mail.yahoo.com http://tw.ezchat.yahoo.com/ http://tw.messenger.yahoo.com/ http://tw.reg.yahoo.com/

  24. 互動式表單 • <form>...</form>　是宣告一個表單的開始與結束，也就是表單的內容必須夾在裡面。 • action　可填入cgi或asp的位置，表單的資料將由伺服器端的程式來處理。 • 【例】action=“addnew.asp” <form method="post" action= “addnew.asp”> 表單內容 </form>

  25. 表單內容之input形式 • <form> 您的暱稱 • <input type="text" name="暱稱" size="10" value="請填入暱稱" > </form> • input type=“text”　指定輸入的形式，text表示要讓別人輸入文字。 • name　指定這個欄位的名稱。 • size　指定這個欄位的長度。 • value　可指定欄位中預設的文字。 • input type="password"　指定輸入的形式，password表示要別人輸入密碼。

  26. 讓別人做單一的選擇 • input type=“radio”　指定輸入的形式， radio表示讓別人多選一。 • name　指定這個欄位的名稱。注意！每一個選項的欄位名稱一定要相同！ • value　指定這個選項的名稱。 • checked　表示預先設定的選擇 • <form> ASP課程 • <input type=“radio”name=“評鑑”value=“BEST”checked>一級棒 • <input type=“radio” name=“評鑑”value=“SOSO”>普普啦 • <input type=“radio” name=“評鑑”value=“SO BAD”>爛斃了 • </form>

  27. 執行複選的動作 • input type=“checkbox”　指定輸入的形式，checkbox表示可以做多重選擇。 • name　指定這個欄位的名稱。注意！每一個選項的欄位名稱一定要相同！ • value　指定這個選項的名稱。 • <form> 你的嗜好 • <input type=“checkbox” name=“嗜好”value=“兜風”checked>兜風 • <input type=“checkbox” name=“嗜好”value=“音樂”>聽音樂 • <input type=“checkbox” name=“嗜好”value=“上網”>上網 • </form>

  28. 表單內容之select形式 • <select>...</select>　表示一個選單的開始與結束。 • name　指定這個欄位的名稱。 • option　設定一個選項，如果有四個選項，就必須存在四個option。 • value　指定這個選項的名稱。 • <form> 居住地 • <select name=“居住地”> • <option value=“北部”>北部 • <option value=“中部”>中部 • <option value=“南部”>南部 • <option value=“離島”selected>離島 • </select> </form>

  29. 輸入大量文字 • <textarea>...</textarea>　文字方塊的開始與結束。 name　設定這個欄位的名稱。 • rows　此文字方塊的橫列數。輸入的數字代表列數。 • cols　此文字方塊的直行數，輸入值代表此列一共可以輸入的字元數。 • wrap　指定輸入文字時是否自動換行，共有三種選擇。 • off，表示不會自動換行，必須按下enter來換行。 　virtual，表示螢幕上會自動換行，但信件的內容中沒有自動換行 　的效果。必須按下enter來換行。 　physical，表示螢幕上會自動換行，信件的內容中也有自動換行的 　效果。 • <form> <textarea name="建議與感想" rows="4" cols="20" wrap="off"> 請留下您的建議與感想 </textarea> </form>

  30. 傳送表單 • input type=“submit”　指定輸入的形式。submit表示傳送資料。 • input type=“reset”　指定輸入的形式。reset表示重填資料。 • value　指定按鈕上呈現的文字。 • <form> • <input type=“submit” value=“傳送”> • <input type=“reset” value=“重新填寫”> • </form>

  31. 表單實作

  32. 表單應用

  33. ASP準備 • IIS 架站設定 • 建立實體目錄 • 虛擬目錄或站台

  34. Internet ASP架構圖 • Windows 98以上 • Access2000 (資料庫) • Web Server（網頁伺服器）: • NT平台==>IIS 4.0 /IIS 5.0 • Windows平台==>Personal Web Server • Active Server Page Client 端軟體

  35. Active Server Pages動作順序 Internet Information Server Active Server Pages HTTP “Get” VBScript HTTP Response Process Page Invokes server Component ADO Adventure Works Page

  36. 使用ASP物件 • Request • Querystring • Form • ServerVariables • Response • Write • Redirect

  37. Request Object • 取得Client端Browser經由HTTP發出請求傳到Server的訊息 • 語法： • Request[.Collection](variable) • Collecion: • QueryString • Form • ServerVariables

  38. Form • 取得form element藉由HTTP所傳來的值語法： • Request.Form(parameter)[(index) ∣.Count] • 範例：

  39. Form.htm • <html> • <form action=“submit.asp” method=“post”> • <p>您的大名是：<input name=“name” size=48> • <p>您的工作是：<select name=“work”> • <option>學生<option>老師<option>上班族<option>老闆 • </select> • <p><input type=submit> • </form> • </html> • Submit.asp • <HTML> • 您是<%=Request.Form(“name”) %>. • 您目前是<%=request.Form(“work”) %>. • </HTML>

  40. 網頁編輯器的選擇 • Frontpage • 記事本

  41. ASP與表單整合運用 • 留言版之建立 • ASP程式之撰寫(Request物件) • IIS之架設 • 測試與執行

  42. 留言版之建立 • 利用Frontpage 之輸入表單功能 • 插入/表單/單行文字方塊 （設定暱稱、標題） • 名稱(N)= 姓名；名稱(N)= 標題 • 插入/表單/選擇鈕（設定性別） • 群組名稱=性別、數值=男；群組名稱=性別、數值=女 • 插入/表單/多行文字方塊（設定留言訊息） • 名稱(N)= 留言、字元寬度=50、行數=5 • 修改 HTML （設定表單執行程序Action） • <form method="POST" action=“Echo.asp">

  43. 留言版之建立步驟 • 步驟一：根據畫面需求利用Frontpage建立表單 • 根據表單建立中所設定之變數與ASP程式作連結 • 利用 Request 物件讀取瀏覽器之輸入資料 • 步驟二：利用Frontpage 建立輸出之表格並結合ASP之資料輸出

  44. ASP 程式之撰寫（一）－Echo.asp <table border="0" width="100%"> • <tr> • <td width="17%">暱稱</td> • <td width=“17%”><%=request(“name”) %></td> • <td width="17%">標題</td> • <td width="17%"><%=request(“title ”) %></td> • <td width="16%">時間</td> • <td width="16%"><%=request(“now ”) %></td> • </tr> • <tr> • <td width="100%" colspan="6"> • <p><%=request(“memo ”) %></td> • </tr> </table>

  45. 步驟三：IIS 之架設 • 確定網站目錄為本機目錄 c:\my documents\my webs • 首頁名稱：Default.htm • ASP程式名稱：Echo.asp • 執行IIS • 本機電腦/網站/預設的網站/右鍵/新增/虛擬目錄（設定你網站之首頁路徑）

  46. 步驟四：測試與執行 • Step 1：啟動Browser（IE） • Step 2：輸入網址 • http://127.0.0.1

  47. 思考及討論 • 參考附件【如講義27頁】 • 附件的這些內容該如何呈現？ • 使用者所填寫的資料如何保存？ 資料庫版的 留言版

  48. 基本資料庫使用 • MS-SQL • MS-ACCESS • MS-EXCEL

  49. 資料庫版之留言版 • 建立 Access 資料庫 • 建立 Connection 物件－以mdb資料庫為範本 • 取得資料來源 • 新增資料到資料庫 • 測試與執行

  50. 建立 Access 資料庫 • 建立Access資料庫 Gbook.mdb • 資料表名稱：留言版 • 設定 留言版之欄位

More Related