Transcript ASP 入門教學
ASP 入門教學 紀蔚亮老師 ASP 基本概念 Active Server Page？ ASP 的運作方式 ASP 網頁發佈方式 測試你的第一個ASP 網頁 撰寫ASP 網頁的必備基礎 Active Server Page？ 一種 網路伺服器 端(Server)的程式執行環 境。 能夠產生動態、互動式的網站應用結果。 如計數器,線上人數,資料庫,流言版等…. 使用 ASP 就不用擔心客戶端的瀏覽器是 否支援 ASP，因為 ASP 所送出的網頁是 標準的 HTML 格式。 ASP 的運作方式 它是將我們所設計的網頁經由 Server 端 翻譯後送出 HTML 文件給客戶端 瀏覽器 Web Server Internet (IE Netscape) HTML HTML ASP 應用程式 資料庫 ASP 網頁發佈方式 上傳 Web Server (IIS) 如免費網頁空間或自行架設網頁伺服器 單機測試 (PWS) 安裝 PWS 4.0 (課本1-6 第1-13頁) <HomeWork> 於家中電腦安裝PWS 4.0 及 Dreadmweaver UltraDev 4 測試你的第一個ASP 網頁 使用 WordPad 來撰寫 檔名設定為 test.asp , 並存放在 C:\Intpub\wwwroot 資料夾中 網頁內容參閱課本1-7 第1-17頁範例 測試虛擬網站及程式 http://電腦名稱 http://localhost http://127.0.0.1 撰寫ASP 網頁的必備基礎 瞭解 HTML 基本 VB Script Dreadmweaver UltraDev 4 的運用 ASP 網頁將由 HTML 及 VB Script 為基本 概念 ,而以 Dreadmweaver UltraDev 4 來 完成 HTML 基本概念 基本運用 HTML語言一覽 基本概念 標籤式語言概念 區塊概念 標籤的屬性概念 階層概念 其他概念 標籤式語言概念 所有 .htm 檔案都是由標籤式語言組成 <!-- html 基本架構 -- > <html> <head> <title>標題</title> </head> <body> 內容… </body> </html> •如圖 < 及 > 符號之間所表示 字串稱之 標籤(Tag) 區塊概念 使 HTML 具有結構性 <!-- html 基本架構 -- > <html> <head> <title>標題</title> </head> <body> 內容… </body> </html> 標籤的屬性概念 大部份的HTML語言包含有許多屬性 如 : <body bgcolor=“#ffffff” leftmargin=100> 標籤 屬性 Body 標籤屬性一覽 屬性 階層概念 標籤式語言概念 <!-- html 基本架構 -- > <html> <head> <title>標題</title> </head> <body> 內容… </body> </html> 其他概念 多個空白字元,只會視為一個 按下Enter不會跳行 標籤語言不分大小寫 屬性值中若只有中英文字或數字,則不加“” 亦可;但全加“”一定不會錯 HTML 基本運用 網頁基本架構 段落 文字 清單 圖像 超連結 表格 背景音樂 網頁基本架構 <!-- HTML 語言基本架構 -- > <html> <head> <title>標題</title> </head> <body> 網頁內容… </body> </html> Body 標籤屬性一覽 段落 <P>段落標籤</P> ALIGN 對齊(左邊界) <P ALIGN=LEFT>…</P> (右邊界) <P ALIGN=RIGHT>…</P> (置中) <P ALIGN=CENTER>…</P> <BR>段落標籤 無屬性 <HR>分隔線段落標籤 文字 <FONT>文字標籤</FONT> FACE 字型 <FACE=“標楷體“> COLOR 顏色 <COLOR=“#FFFFFF”> 大小 <SIZE=3> <SIZE=+1> <SIZE=-2> SIZE 文字 <B>粗體</B> <S>刪除線</S> <I>斜體</I> <SUB>下標</SUB> <U>底線</U> <SUP>底線</SUP> <!-- 註解 --> 空白文字   <PRE>原來編排文字 </PRE> 清單 有序清單 <OL> <LI> <OL> <LI>清單1 <LI>清單2 <LI>清單3 </OL> <OL>屬性 TYPE 類型A – 大寫英文 <OL TYPE=“A”>…</OL> 類型a – 小寫英文 <OL TYPE=“a”>…</OL> 類型I – 大寫羅馬數字 <OL TYPE=“I”>…</OL> 類型i – 小寫羅馬數字 <OL TYPE=“i”>…</OL> 無 – 數字 START 起始值 <OL START=10>…</OL> 清單 無序清單 <UL> <LI> TYPE <UL> <LI>清單1 <LI>清單2 <LI>清單3 </UL> <OL>屬性 類型circle – 空心小圓 <OL TYPE=“circle”>…</OL> 類型square – 實心方塊 <OL TYPE=“square”>…</OL> 無 – 實心小圓 清單 無序清單 <LH> </LH> 與前一行無空行. 靠左對齊 , 無縮排 . <LH> <LI>清單1 <LI>清單2 <LI>清單3 </LH> <IMG SRC=“logo.gif” Border=1 Alt=“作者相 片”> 圖像 <IMG>顯示圖像 SRC 圖像來源(相同資料夾 <SRC=“LOGO.GIF“> 目錄) 圖像來源(不同資料夾 <SRC=“.Image/LOGO.GIF“> 目錄) WIDTH 寬度 <WIDTH=50 HEIGT=100> HEIGHT 高度 Border 外框 <Border=1> Alt 圖像文字 <Alt=“作者相片”> 超連結 <A>…</A> 文字超連結 <A HREF=“URL”> 連結文字</A> 圖片超連結 <A HREF=“URL”><IMG SRC=“logo.gif”</A> E-mail 連結 <A HREF=“mailto:電子郵件位址”> …… </A> 超連結的路徑 <a href="001.htm">這是連結檔案在同一目錄下的標示法</a>。 <a href="http://www.world.com">這是連結至網路上其它網站 的標示法</a>。 <a href="test/101.htm">下一個子目錄內檔案的連結</a> <a href="../index.htm">連結到上一層目錄內的檔案</a> 在 SERVER 上您的檔案路徑, 並非像家裏的電腦一樣,可以下指令 C:\ABC\INDEX.HTM , 但在網路上不行喔!! 可以用 ../ 退到上一層目錄, 或 ../../再退更上一層, 或../../../...... 表格 表格起始標籤 <TABLE> </TABLE> 表格列標籤 <TR> </TR> 儲存格標籤 <TD> </TD> 表格 <TABLE BGCOLOR=“#0000FF” Border=2 Align=left> <TABLE> </TABLE> Border 框線厚度 <Border=2> Bordercolor 框線顏色 <Bordercolor=“#00FF00”> Bgcolor 背景顏色 <Bgcolor=“#0000FF”> Cellspacing 內框線厚度 <Cellspacing=10> Height 表格高度 <Height=50> <Height=50%> Width 表格寬度 <Width=50> Align 水平對齊方式 <Align=center> <Width=50%> 背景音樂 <BGSOUND> SRC 背景音樂來源 <SRC=“bgsound.mid> LOOP 播放次數 <LOOP=1> <LOOP=INFINITE> <BGSOUND=“midi/test.mid” LOOP=INFINITE> <EMBED SRC=“school.avi” LOOP=“true”> 多媒體播放 <EMBED> </EMBED> SRC 多媒來源 <SRC=“school.avi> Autostart 自動播放 <Autostart=“false”> <Autostart=“true”> Loop 播放次數 <Loop=“true”> <Loop=“false”> Height 高度 <Height=50> <Height=50%> Width 寬度 <Width=50> Alt 說明文字 <Alt=“廣告影片”> <Width=50%> 表單 <FROM> </FROM> Name 名稱 <Name=“data”> Action 接收資料的asp程 式 <Action=“asp\test.asp> Method 指定資料傳送方式 <Method=“get”> <Method=“post”> <FORM NAME=“data” ACTION=“test.asp” METHOD=“get”> </FORM> 表單輸入項 <INPUT> TYPE 輸入資料類型 <TYPE=“text”> VALUE 初始值 <VALUE=“結束”> <INPUT TYPE=“button” NAME=“button-1” VALUE=“確定”> <EMBED SRC=“school.avi” LOOP=“true”> TYPE TEXT 文字輸入 BUTTON 按鈕 PASSWORD 密碼輸入 CHECKBOX 勾選清單(單選) RADIO 勾選清單(單選) FILE 可瀏覽檔案的 文字輸入 IMAGE 圖像式按鈕 SUBMIT 傳送按鈕 RESET 清除輸入資料 按鈕 HIDDEN 隱藏 選項 <SELECT> <OPTION> … <SELECT NAME=“country” SIZE=4> <OPTION>台灣 <OPTION>日本 <OPTION>美國 <OPTION>泰國 </SELECT> </SELECT> <Name=“COUNTRY”> Name 名稱 Size 選項列可顯示行數 <Size=4> Multiple 可多重選擇 <Multiple> 多行文字輸入 <TEXTAREA COLS=7 ROWS=5> ……… </TEXTAREA> <TEXTAREA> Name 名稱 <Name=“MEMO”> COLS 寬幾字 <COLS=40> ROWS 高幾行 <ROWS=6> READONL Y 唯讀 <READONLY> DISABLES 無法存取 <DISABLES> Body 標籤屬性一覽 background 背景圖檔 Background=“image.jpg” bgcolor 背景顏色 Bgcolor=“#000000” text 文字顏色 Text=“#c0c0c0” bgproperties 浮水印 Bgproperties=“fixed” leftmargin 左邊界 Leftmargin=100 topmargin 上邊界 Topmargin=50 link 未瀏覽超連結顏色 Link=“#ffffff” alink 超連結被選取顏色 Alink=“#800080” vlink 已瀏覽超連結顏色 Vlink=“#ff0000” 顏色的數值 <BODY bgcolor=#5d4d8d> ■設定背景的顏色!!</font> <font color=#9a6400> ■設定文字的顏色!!</font> #ffffff這六個單位分別代表著 R G B 三原色光 00 - FF(16進位) 相當於 000 - 255(10進位) ,從黑色到白色 使用小算盤將 255(10進位)轉換成 FF(16進位) !! 相對路徑與絕對路徑的觀念 / --interpub ---- index.htm 相對路徑 ﹂ images – a.gif 引用網頁存放檔案位置為參考基礎。 不同網頁引用同一個檔案時，其使用路徑都不相同。 在index 中引用a.gif 時，相對路徑如下 ./images/a.gif 絕對路徑 以根目錄為參考基礎。 不同網頁引用同一個檔案時，其使用路徑都一樣。 在index 中引用a.gif 時，絕對路徑如下 : /inetrpub/images/a.gif 『 . 』…….代表目前所在資料夾。 『 .. 』……代表上一層資料夾。 / ---- web1 ---- html -------- index.htm 範例 images ---- a.gif web2 ---- html ---- myweb.htm midi ---- bird.mid 引用檔案 被引用檔案 index.htm a.gif myweb.htm a.gif index.htm bird.mid myweb.htm bird.mid 相對路徑 相對路徑