建國技術學院資訊管理學系 饒瑞佶 rcjao@cc.ckit.edu.tw 2004/7/5 彰化縣政府補助辦理網頁設計資料庫應用班 建國技術學院資訊管理學系 饒瑞佶 rcjao@cc.ckit.edu.tw 2004/7/5
環境介紹 歡迎大家 上課環境介紹 建國資管系一管、電腦教室一 助教介紹 每日記得簽到(9:00 – 16:00) 需要協助請洽資管辦公室 其他… 歡迎大家
上課方式 上機實做+投影片講解(廣播系統) 兩本課本+筆記本+水杯… 檔案可存入D槽中 期末專題製作 歡迎隨時舉手發問 其他
上課內容 網際網路資料庫程式設計 HTML網頁設計－by饒瑞佶 ASP (Active Server Pages) – by 饒瑞佶 JSP (Java Server Pages) － by 賴慧敏 http://www.okbuy.com.tw/rueychi/index.htm
如何學習網頁程式設計
學習網頁程式設計的態度 一定要有信心， “沒有錯誤是沒有原因的“，從錯誤中可以學得更多。 它沒有明確的範圍，學習態度不好的人可以學得很少很少，學習態度好的同學可以學到很多很多 (絕對不限於任何一本課本) 。 模仿是第一步，不要不好意思模仿而一味地自求創新，第二步是變通，一點一點地變，第三步才是創造。
學習網頁程式設計的態度 習題不要抄襲，抄襲是放棄學習的行為，如果你要放棄了，那又何必抄襲呢? 一定要自己動手寫，而不是 用眼看。 多討論，多觀摩，不要單打獨鬥，也不要吝嗇與人分享。 如果你已經有基礎，不要把這門課當新的東西來學。好像開車，操作方式大同小異。
學習網頁程式設計的態度 不要有預設立場，coding不是生下來就會，若你覺得基礎不好，這次更要好好的下定決心努力。 多參考官方網站最新資訊，網路資料豐富，補足課堂或書本不足之處。
學習程式設計的態度 原理說明也許枯燥，但是確是必要的！了解以後，其他就教給課本就好了！ 祝大家都能夠快樂的學習
HTML介紹
Hyper Text Markup Language（HTML） HTML本身並非程式設計，只不過是標示（Markup）、強調及組織一般性的文字。 ＷＷＷ上製作ＨｏｍｅＰａｇｅ的語言，是一種標記語言。需透過瀏覽器翻譯標記後方可呈現 。 HTML 標準之原始資料 （HTML 4.0, 1997/11, W3C） 除標準HTML標記外，各瀏覽器廠商也自訂專屬的標記
HTML長的如何? <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>最新消息</title> </head> <BODY> <p align="center"><font size="4" color="#0080FF"> 最新消息</font>
何謂標記語言? Tag Language 製作ＨＴＭＬ文件的過程中必須加入所謂的標記【ＴＡＧ】，好讓瀏覽器知道該如何處理及呈現原始文件的內容。 在ＨＴＭＬ語法中，除了少數例外，大都是以：<XX>開始，以</XX>結束；其中XX就是ＨＴＭＬ的標記。
何謂標記語言? HTML標籤 IE瀏覽器 翻譯後呈現 這些標記是寫給瀏覽器看的
HTML標記 有頭有尾(但有例外)，中間夾住所要顯示的文字或 圖形 有屬性 純文字檔（使用一般的文字編輯器就可以作業） 無大小寫之分 檔名需要是.HTM或是.HTML <標籤名稱 屬性 =“設定值”> ..要顯示之文件資料.. </標籤名稱> <Tag Attributes ="Value"> ..Document Of Display.. </Tag>
HTML標記類別 表格標籤(Table Tags) 表單標籤(From Tags) 文件結構標籤(Document Structure Tags) 區段格式標籤(Block Formatting Tags) 字元格式標籤(Character Formatting Tags) 清單標籤(List Tags) 連結標籤(Anchor Tag) 多媒體標籤(Multimedia Tag) 表格標籤(Table Tags) 表單標籤(From Tags)
常見HTML編寫工具 OFFICE 記事本 & FrontPage（我們選用這個） Dreamweaver (賴老師) Coreldraw Macromedia系列 : Flash, Director, Authoware 產生html碼容易,不過你要看的懂才有辦法修改 與加入新的東西
HTML的構成 html的構成是有結構的 html文件是由元件(element) 所組成 元件是由標籤 (tag)所包覆而成 例如：<body> </body> ，即是一個網頁元件 一份基本的網頁應包含下列組成： <html> 宣告這份為 html 文件 <head> </head> <body> </body> </html> 宣告html文件結束
常見的HTML的標籤 註：還有很多html的元件不在表中，此表只列出常用的。 Tag起始 Tag結束 元件說明 <html> <head> </head> 標頭資訊 <title> </title> 文件抬頭 <body> </body> 文件主體 <table> </table> 表格 <div> </div> 區塊 <font> </font> 文字 <img> </img> 圖片 <a> </a> 超連結 <h1> </h1> 標題 <hr> 水平分割線 <p> 段落 <br> 換行 註：還有很多html的元件不在表中，此表只列出常用的。
網頁各元件關係圖 <html> <head> <meta> <title> </title> <base> <body> </body> <table> </table> <div> </div> <hr> <font> </font> <img> </img> <a> </a> <p> <br>
練習 使用記事本 但是要如何執行它呢？ 可以透過伺服器或是用IE直接打開 htm01.htm
練習 htm01.htm <H1>初試 HTML 語法</H1> <HR> <H2>使用 HTML 的基本觀念</H2><P> <UL> <LI>標示的觀念</LI> <LI>區塊的觀念</LI> <LI>參數的觀念</LI> </UL> 有沒有發現省略了很多標籤？
練習 htm01.htm <H1>初試 HTML 語法</H1> <HR> <H2>使用 HTML 的基本觀念</H2><P> <UL> <LI>標示的觀念</LI> <LI>區塊的觀念</LI> <LI>參數的觀念</LI> </UL> 有沒有發現省略了很多標籤？
HTML與ASP的執行方式 HTML： 不一定要透過伺服器，直接使用IE開啟檔案就可以 ASP：
基本標籤介紹 HEAD元件(標頭資訊) Meta元件 Title元件 head元件是由<head></head>標籤所包覆的區塊，用來表示這份網頁的資訊，例如標題、文件的編碼、文件的期限等等，裡面可包含下列的元件： Meta元件 <meta content="text/html; charset=big5" http-equiv="content-type"> (這是一份中文BIG5編碼的文件) <meta HTTP-EQUIV=“refresh” CONTENT=“5;URL=http://www.mdu.com.tw”> (五秒後，請幫我轉到 http://www.mdu.com.tw 的網址) Title元件 <title>這是我的第一張網頁</title> Base元件 <base target=“left”> 這張網頁的預設連結，預設都連結到left的框架頁中(後面再詳述)。
基本標籤介紹 BODY元件(文件主體) Bgcolor屬性 背景顏色 <body bgcolor=“red”> body元件是由<body></body>標籤所包覆的區塊，用來表示這份網頁的主體，裡面可包含很多的元件： Body的屬性： Bgcolor屬性 背景顏色 <body bgcolor=“red”> Background屬性 背景圖片 <bdoy Background=“http://www.mdu.edu.tw/123.jpg” > Link、vlink、alink屬性 超連結的顏色 <body link=“red” vlink=“blue” alink=“green”> Scroll 背景圖片要不要跟著scrollbar移動。 <body scroll=“no”>
常用標籤介紹 標題元件 <h1></h1> <h1>這是標題一</h1> <Aaddress> <pre> <blockquote> BLOCKQUO.HTM
常用標籤介紹 <H2>使用 HTML 的基本觀念</H2> <BLOCKQUOTE> BLOCKQUO.HTM <H2>使用 HTML 的基本觀念</H2> <BLOCKQUOTE> 標示的觀念<BR> 區塊的觀念<BR> 其他觀念 多個放在一起空白字元，只會被瀏覽器視為一個空白字元<BR> 跳行字元是沒有作用的字元<BR> 標示是不區分大小寫的 </BLOCKQUOTE>
常用標籤介紹 FONT元件(文字) Font屬性 color 屬性 size 屬性 face 屬性 Font元件是由<font></font>等標籤所包覆的區塊，用來表示一段或是一個文字，可用下列的元件來表示： Font屬性 color 屬性 size 屬性 face 屬性 <font color=“blue” size=“+3” face=“新細明體”>這是Font元件</font>
常用標籤介紹 Text.htm & size.htm 文字標籤元件 列舉常用的如下： <B></B> 粗體 可以讓文字以不同的方式呈現： 列舉常用的如下： <B></B> 粗體 <I></I> 斜體 <U></U> 底線 <S></S> 刪除線 <b>這是粗體</B> Text.htm & size.htm
常用標籤介紹 Text.htm <B>這是粗體字</B> <I>這是斜體字</I> <U>這是加底線字</U><P> 這是正常字<SUP>這是上標字</SUP><P> 這是正常字<SUB>這是下標字</SUB><P> <TT>這是Windows的等寬字</TT><P> <FONT SIZE=+1>字體放大一級</FONT>
常用標籤介紹 列舉清單元件 列舉清單常用的如下： 無序列舉 <ul></ul> 可以讓文字以不同的方式列舉： 列舉清單常用的如下： 無序列舉 <ul></ul> <li> htm01.htm 有序列舉 <ol></ol> <li> 預設用1,2,3,4… 有序列舉 type 可為 1、A、a、I、i
FrontPage介紹
FrontPage介紹 一、Frontpage操作介面介紹 二、MS系統的慣例 【所見即所得】，就是這麼簡單！！ 三、熟悉操作介面 請同學實際操作練習。
下拉選單 工具列 工作區 管理項 編輯切換
表格
表格標籤介紹 table元件(表格) table元件是由<table></table>標籤所包覆的區塊，用來表示一個表格，裡面可包含下列的元件： table的屬性及元件： Bgcolor屬性 <table bgcolor=“red”> Background屬性 <table Background=http://www.mdu.edu.tw/123.gif> border屬性 設定表格的框的寬度<table border=“2”> Width、 height屬性 設定表格寬跟高<table width=“100%” height=“500px”> Cellspacing(欄跟欄之間的距離)、 cellpadding(欄裡面字跟欄框的距離)屬性 <table Cellspacing=“2” cellpadding=“4”> Tr元件 (列) Td元件 (欄)(也具有像table一樣的屬性，包括bgcolor、width、height 等等)
<CAPTION> 標題 </CAPTION> 基本表格樣本 <TABLE> </TABLE> <CAPTION> 標題 </CAPTION> <TR> </TR> <TD> 內容 </TD> <TR> </TR> <TD> 內容 </TD> <TR>：代表列 <TD>：代表欄 這樣轉成HTML標籤長成什麼樣子？
基本表格樣本 <TABLE> <CAPTION>表格標題</CAPTION> <TR> <TD>第一列，內容一</TD><TD>第一列，內容二</TD> </TR> <TD>第二列，內容一</TD><TD>第二列，內容二</TD> </TABLE>
畸形表格的產生 ColSpan 與 RowSpan 屬性 ColSpan=3 RowSpan=2 ColSpan=2
範例練習 用FrontPage來製作表格 如何劃表格？ 如何調整大小 如何設定顏色？ 如何設定邊框？ 如何利用表格來排版？
畸形表格的產生 <table border="1"> <tr> <td colspan="3"> </td> </tr> <td rowspan="2"> </td> <td colspan="2"> </td> <td> </td> </table>
圖片
常見的圖片格式 網路上常見的圖片格式有下列兩種： 檔案格式 GIF JPG 壓縮比例 1:10以上 1:20~100(壓縮能力強) 色彩類型 索引色彩 灰階、全彩 壓縮方式 無失真 有失真 透明色設定 有 無 動態影像 適用範圍 線稿、文字、圖示 風景照片、圖片
如何插入圖片至HTML中？ <img src=“圖片位置” width=“100px” height=“200px”> 圖片的設定 利用FrontPage圖片工具設定圖片
相對路徑與絕對路徑 相對路徑： 相對於預設主目錄，如C:\Inetpub\wwwroot 把主目錄表示成/ 絕對路徑： 使用網址方式指定 如http://www.okbuy.com.tw/rueychi/index.htm
如何找到你設計的網頁？ 但是如何做呢？ 當然你要有一台SERVER 你要把檔案擺到正確的目錄下 別人如何在網際網路這個茫茫大海中找到你所設計的網頁？ 當然你要告訴別人你的網頁在哪？ WWW SEVER位置 但是如何做呢？ 當然你要有一台SERVER 你要把檔案擺到正確的目錄下
Server & Client 伺服器與用戶端是相對的，不是絕對的！ 同一台機器既可以是伺服器，也可以是用戶端 Client用戶端 要求服務 輸入http://www.kimo.com.tw 提供服務：WWW, FTP, BBS … Client用戶端 瀏覽器 Server伺服端 網頁伺服器 伺服器與用戶端是相對的，不是絕對的！ 同一台機器既可以是伺服器，也可以是用戶端
HTML如何運作? HTML碼不受保護 你可以試著複製一個網頁 步驟1：要求瀏覽網頁 A.htm 步驟2：下載A.htm 用戶端 伺服端 網頁伺服器 用戶端 瀏覽器 步驟3：瀏覽器翻譯後顯示 HTML碼不受保護 你可以試著複製一個網頁
ASP如何運作 ? ASP程式受到保護 步驟1：要求瀏覽網頁 A.asp 步驟3：下載A.htm 用戶端 伺服端 瀏覽器 Apache網頁伺服器 用戶端 瀏覽器 步驟2：伺服器執行ASP程式並轉換成純HTML碼 ASP程式受到保護 要瀏覽ASP網頁，而不是開啟ASP網頁
超連結
何謂超連結？ Hypertext Link(超文字連結) 包含文字的連結、圖片、電子郵件、書籤的連結 舉例說明 http://www.ckit.edu.tw 超連結元件以<a></a>表示
超連結的方式 1.文字連結 範例說明 <a href=“連結的網址”>連結呈現的文字</a>
2.圖片連結 範例說明 <a href=“連結的網址”>插入圖片</a> 如<A href=“http://www.ckit.edt.tw”><img src=“123.jpg”></A> 3.電子郵件連結 範例說明 <a href=“mailto:電子信箱位置”>連結文字</a> 如<A href=“mailto:rcjao@cc.ckit.edu.tw”>饒瑞佶的信箱</A> 進階提示： 如果要加上寄信的主題時，可以利用下列方式 如<A href=“mailto:rcjao@cc.ckit.edu.tw?subject=我想睡覺”>饒瑞佶的信箱</A>
4.書籤連結(同一頁內連結) 可連結到某網頁的某一段落(有做書籤的地方) <a name=“書籤名稱”>書籤文字</a> 製作一個書籤如 <A name=“my bookmark”> 連結時，<a href=“#my bookmark”>連到我的書籤</a>
相對路徑與絕對路徑 相對路徑： 相對於預設主目錄，如C:\Inetpub\wwwroot 把主目錄表示成/ 絕對路徑： 使用網址方式指定 如http://www.okbuy.com.tw/rueychi/index.htm
超連結的開啟種類 置換本視窗 target=“_top” 開新視窗 target=“_blank” 置換掉自己的視窗 target=“_self” 置換掉父視窗 target=“_parent” 置換掉框架頁 target=“框架頁名稱”
框架頁
何謂框架？ 框架 Ans：三張，主網頁一張，第一張框架、第二張框架總共三張。 整個視窗 框架 簡單的來說，就是將整個視窗分隔成各自獨立的畫面。 框架元件，其HTML碼如下： 範例說明：將一張網頁切成下面圖示的框架 <frameset cols=“150,*”> 起始，設定框架寬度 <frame name=“contents” target=“main” src=“1.htm”> 設定第一個框架頁的資訊，跟預設超連結的目的框架 <frame name=“main” src=“2.htm”> 設定第二個框架頁的資訊 <noframes> 不支援框架時設定 <body> <p>此網頁使用框架,但是您的瀏覽器並不支援.</p> </body> </noframes> </frameset> 框架元件結束 以上需要幾張網頁？ 框架 框架 整個視窗 Ans：三張，主網頁一張，第一張框架、第二張框架總共三張。
框架的好處，為什麼要用框架？ 1、維護容易 2、瀏覽速度較快 3、能將網頁作更多的運用及變化 ※例子說明：http://www.okbuy.com.tw/rueychi/index.htm main contents
框架中的超連結 contents 1、框架的互相連結 target=“框架頁名稱” 2、重提 <base> 標籤 *溫故知新 置換本視窗 target=“_top” 開新視窗 target=“_blank” 置換掉自己的視窗 target=“_self” 置換掉父視窗 target=“_parent” 置換掉框架頁 target=“框架頁名稱” main contents
用Front Page 來製作框架 1、製作框架 2、編輯框架的屬性 3、控制框架的外觀 4、做出無框的網頁
表單元件
表單標籤 提供使用者輸入傳送資訊 表單需必須配合著CGI、JAVA Script程式或是ASP程式來運作，不然表單單獨存在的意義並不大。 您的網頁將擺脫單向呈現，而開始邁入和使用者互動的階段！
表單基本格式 <FORM method=post或get action=處理表單程式> 不同表單類型 …. 送出/重寫按鈕 填寫完畢按下送出按鈕 表單 .htm或.ASP 處理程式 Abc.asp 送回結果 .htm 表單與處理程式可以是同一個檔案
文字輸入列 每個表單之所以會有不同的類型，原因就在於 TYPE=“表單類型”設定的不同而已，我們就先 來看看第一個類型：文字輸入列。 文字輸入列的形態就是TYPE="TEXT，其使用方法如下： 呈現結果 姓名： 原始碼 <FORM> 姓名：<INPUT TYPE="TEXT" NAME="NAME" SIZE="20"> </FORM>
單選核取表單 利用TYPE=“RADIO”就會產生單選核取表單， 單選核取表單通常是好幾個選項一起擺出來供 使用者點選，一次只能從中選一個，故為單選 核取表單。 呈現結果 性別：男 女 原始碼 <FORM> 性別： 男 <INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY"> 女 <INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL"> </FORM>
複選核取表單 利用TYPE=“ CHECKBOX ”就會產生複選核取表單， 複選核取表單通常是好幾個選項一起擺出來供使用者 點選，一次可以同時選好幾個，故為複選核取表單。 呈現結果 喜好： 電影 看書 原始碼 <FORM> 喜好： <INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">電影 <INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看書 </FORM>
密碼表單 利用TYPE=“ PASSWORD ”就會產生一個密碼表單， 密碼表單和文字輸入表單長得幾乎一樣，差別就在於 密碼表單在輸入時全部會以星號來取代輸入的文字， 以防他人偷窺。 呈現結果 請輸入密碼： 原始碼 <FORM> 請輸入密碼：<INPUT TYPE="PASSWORD" NAME="INPUT"> </FORM>
送出/重寫按鈕 通常我們表單填完之後，都會有一個送出按鈕以及清除 重寫的按鈕，分別是利用TYPE=“ SUBMIT ”及 TYPE=" RESET "來產生，相當的簡單易用。 呈現結果 原始碼 <FORM> <INPUT TYPE="SUBMIT" VALUE="送出資料"> <INPUT TYPE="RESET" VALUE="重新填寫"> </FORM>
大量文字輸入元件 有時候我們會希望讓使用者輸入比較大量的文字，此時， 文字輸入列就顯得不敷使用，因此我們就可以利用 <TEXTAREA></TEXTAREA>來產生一個可以輸入大量文 字的元件，夾在兩個標籤中的文字會出現在框框中，可作 為預設文字。 呈現結果 請輸入您的意見： 原始碼 <FORM> 請輸入您的意見：<BR> <TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA> </FORM>
下拉式選單 下拉式選單令整個網頁看起來有很專業的感覺，我們 只要利用<SELECT NAME=“名稱”>便可以產生一個下 拉式選單，另外，還需要配合<OPTION>標籤來產生選 項，這樣才算完整喔！ 呈現結果 您喜歡看書嗎？： 原始碼 <FORM> 您喜歡看書嗎？： <SELECT NAME="LIKE"> <OPTION VALUE="非常喜歡">非常喜歡 <OPTION VALUE="還算喜歡">還算喜歡 <OPTION VALUE="不太喜歡">不太喜歡 <OPTION VALUE="非常討厭">非常討厭 </SELECT> </FORM>
隱藏欄位 表單中有時有些東西因為某些因素，不想讓使用者看到， 但因程式需要卻又不得不存在，此時，我們就可以利用 TYPE=" HIDDEN "來產生一個隱藏的欄位。 呈現結果 隱藏欄位： 原始碼 <FORM> 隱藏欄位：<INPUT TYPE="HIDDEN" NAME="NOSEE" VALUE="看不到"> </FORM>
表單標籤 表單二件事： 設定<FORM>標籤中的action屬性 (設定要處理表單的程式) 2. 記得表單中各輸入類型的NAME屬性 (靠此名稱與程式連結) 後續REQUEST & RESPONSE物件會有更詳細介紹
HTML其它技巧 HTML只有這樣的能耐嗎？ 跑馬燈、東森速報、背景音樂…等 VBScript & JavaScript 防止偷圖、設成首頁、動態圖形…等 只要你知道哪裡找的到，怎麼放到網頁中就ok了
ASP介紹 Active Server Pages
ASP, JSP, VB Script, Java Script, PHP,DHTML 等 讓網頁活起來 傳統網頁：１．靜態的（Static），內容固定不變 ２．不容易更新與維護 純HTML碼的網頁(之前做的都是) 動態網頁：１．內容是動態的 ２．內容可以自動更新 ３．互動性高 ASP, JSP, VB Script, Java Script, PHP,DHTML 等
Why ASP ? 優點： 市場主流之一（支援與資源都多） 語法簡單（Basic語系） ，不需要編譯（Compile） 輸出結果不受用戶端瀏覽器的影響 缺點： IIS與MS作業系統穩定性與安全性不佳 跨平台轉移不易
Active Server Pages （動態伺服器網頁，簡稱ASP） 可以算是一種程式語言 在伺服器端（Server）執行，需要有IIS（Internet Information Server） 可結合HTML碼, Script指令與ActiveX元件產生動態的網頁 線上購物, 留言版, 聊天室等．．．
ASP的特點 使用VBScript或Jscript等簡易的Script，結合HTML碼，可快速建構動態網站 不需編譯，完全整合於HTML碼中 使用一般文書編輯器（如記事本）就可以完成 執行結果與用戶端（Client）使用的瀏覽器無關 程式碼不會由用戶端外流 可以透過與ActiveX元件的結合來擴展其功能 檔案需以.asp為副檔名
HTML如何運作? HTML碼不受保護 步驟1：要求瀏覽網頁 A.htm 步驟2：下載A.htm 用戶端 伺服端 瀏覽器 網頁伺服器 步驟3：瀏覽器翻譯後顯示 HTML碼不受保護
ASP如何運作 ? ASP程式受到保護 步驟1：要求瀏覽網頁 A.asp 步驟3：下載A.htm 用戶端 伺服端 瀏覽器 IIS網頁伺服器 步驟2：伺服器執行ASP程式並轉換成純HTML碼 ASP程式受到保護 要瀏覽ASP網頁，而不是開啟ASP網頁
如何建立執行ASP所需平台 ? 也就是Server 使用MS作業系統配合IIS伺服器 使用它種作業系統（如Linux）配合可以執行ASP的模組 除98系統外，其它皆內含IIS ，但是穩定性與安全性不佳 因為模組不內含，所以需額外花費購買，但是穩定性較佳
如何建立執行ASP所需平台 ? Ｗindows 9x ：PWS（Personal Web Server）4.0 以使用MS作業系統配合IIS伺服器為例 Ｗindows 9x ：PWS（Personal Web Server）4.0 Windows NT Workstation：PWS 4.0 Windows NT Server：IIS 4.0 Windows 2000 Server/Professional：IIS 5.0 Windows XP Professional：IIS 5.1 Windows 2003 Server：IIS 6.0 Linux上可不可以跑ASP？
軟體來源 – PWS Ｗindows 9x ：PWS 4.0 1.原版光碟中add-ons\pws 目錄或NT4.0 Option Pack 中 Win.95 目錄。 2.執行 setup.exe 進行安裝。 Windows NT Workstation 4.0：PWS 4.0 1.NT4.0 Option Pack 中 Winnt.wks 目錄。
軟體來源 – IIS Windows NT Server 4.0：IIS 4.0 1.Option Pack 中 Winnt.srv 目錄。 2.執行 setup.exe 進行安裝。 Windows 2000 Server/Professional：IIS 5.0 內建即包含 IIS 5.0 Windows XP Professional：IIS 5.1 內建即包含 IIS 5.1
安裝注意事項 – PWS on Win95 升級 Winsock 到 2.0。 安裝程式與 PWS 在同一目錄下，名為 Ws2setup.exe。
安裝注意事項 – PWS/IIS on NT 4.0 1.升級 NT 到 Service Pack 3 以上版本。 Service Pack 3，檔名為Nt4sp3_i.exe。 Service Pack 4，檔名為sp4i386.exe。 Service Pack 5，檔名為sp5i386.exe。 Service Pack 6，檔名為sp6i386.exe。 2.升級 IE 到 4.01 以上版本。
各作業平台安裝步驟 Win95：IE5.0 Winsock 2.0 PWS 4.0。 Win98：PWS 4.0。 Win NT W/S：SP3 IE 5.0 PWS 4.0。 Win NT Server：SP3 IE 5.0 IIS 4.0。 Windows 2000：IIS 5.0 安裝示範
還記得Server & Client嗎？ 伺服器與用戶端是相對的，不是絕對的！ 同一台機器既可以是伺服器，也可以是用戶端 Client用戶端 要求服務 提供服務：WWW, FTP, BBS … Client用戶端 瀏覽器 Server伺服端 網頁伺服器 伺服器與用戶端是相對的，不是絕對的！ 同一台機器既可以是伺服器，也可以是用戶端
如何表示本機位置？ http://127.0.0.1 http://localhost Server伺服端 網頁伺服器 +Client用戶端 瀏覽器 http://127.0.0.1 http://localhost
作業平台運作之檢查 -IIS 啟動IE，輸入http://127.0.0.1或是http://localhost
作業平台運作之管理 -IIS 3.桌面上我的電腦： 我的電腦 管理 服務及應用程式 Internet Information Service 我的電腦 管理 服務及應用程式 Internet Information Service Internet 服務管理員
我的檔案該放在哪裡？ 預設路徑： C:\Inetpub\wwwroot 把要執行的html或asp檔案copy到目錄下 2. 設定首頁 3. 使用http://127.0.0.1執行首頁或 http://127.0.0.1/檔案名稱執行特定網頁 撰寫一個簡單的HTML檔案試試看！
如何維護我的網頁？ 本機：維護IIS中[主目錄]下的所有檔案 方式： 本機操作 FTP上傳檔案 申請免費/付費空間： 方式： FTP上傳檔案
相對路徑與絕對路徑 相對路徑： 相對於預設主目錄，如C:\Inetpub\wwwroot 把主目錄表示成/ 絕對路徑： 使用網址方式指定 如http://www.okbuy.com.tw/rueychi/index.htm 如何改成相對路徑？ 如何連結C:\Inetpub\wwwroot\aa\bb\text.htm？
微軟Internet Information Server(IIS) 介紹 http://www.eu.microsoft.com/taiwan/products/Servers/iis/products.htm
撰寫ASP之前… 需要了解基本HTML。 需要了解Script語法（本課程以VBScript為例）。 資料庫 HTML ASP程式