第 11 講次 (book1:chap21+book2:chap1)

網際網路導論嘉義大學資訊工程學系李龍盛老師sheng@mail.ncyu.edu.tw

本著作除另有註明外，採取創用CC 「

姓名標示－非商業性－相同方式分享

」台灣 3.0 版授權釋出

1

ContentContent

IIS再談HTML

2

IISIIS3

IIS IIS 的功能的功能4

Windows Vista 內建 IIS 7 (Internet Information Services), 可以提供 Web 服務給用戶端。

開啟 IIS 的相關功能 , 就可以利用 Windows Vista 架設 Web 網站。

IIS 7 可說是微軟新世代的伺服器架站軟體 , 微軟將 IIS 的功能以模組化的方式重新架構 , 讓 IIS 的執行與功能擴充上更具彈性 , 管理者可以依需求開啟或關閉功能 , 降低記憶體與 CPU 資源不必要的消耗 , 提升整體執行的效率。

IIS IIS 的功能的功能5

關閉不必要的功能後 , 可以減少因某功能有弱點而被入侵的機率 , 提高安全性。

IIS 7 也將 .NET 完全整合至核心 , 提升 ASP.NET 的執行效率 , 還可以使用 .NET 撰寫 IIS 模組 , 所以 .NET 程式設計者不僅可以開發 Web 應用程式 , 現在還可以直接設計 IIS 模組 , 為 IIS 加入新功能。

IIS 7 在 Web 服務方面增強了功能 , 但是與之前的 IIS 版本相較 , IIS 7 不再提供 SMTP ( 可架設郵件伺服器 ) 與 NNTP ( 可架設 News 伺服器 ) 這兩種服務。

Windows Vista Windows Vista 上 上 IIS IIS 的限制的限制6

因為 Windows Vista 是桌面環境的作業系統 , 而非設計給伺服器專用 , 所以家用入門版 (Home Basic) 不包含 IIS, 而其他版本 Windows Vista 的 IIS 也有些許功能上的限制。

Windows Vista Windows Vista 上 上 IIS IIS 的限制的限制7

除了功能上的限制外 , Windows Vista 的 IIS 有最大連線數的限制。

家用進階版 (Home Premium) 同一時間最多只允許 3 個 TCP 連線至 IIS 所提供的服務 , 而商用入門版 (Business) 、商用進階版 (Enterprise) 與旗艦版 (Ultimate) 的 IIS 最大連線數為 10 個。

雖然 Windows Vista 的 IIS 有功能與最大連線數的限制 , 但是對於某些環境而言 , Windows Vista 的 IIS 仍然可以勝任許多工作。

Windows Vista Windows Vista 上 上 IIS IIS 的應用的應用8

學習 IIS 操作：如果只是想學習 IIS 的相關操作 , 但又無法安裝伺服器專用的 Windows 版本 (Windows 2000 / 2003 / 2003 R2), 此時可以先透過 Windows Vista 上的 IIS, 熟悉其操作介面與管理架構 , 以便正式接觸伺服器時 , 可以很快地上手。

測試 Web 應用程式：不論是 Web 應用程式的學習者或是設計者 , 都需要一個環境來進行測試 , 而 Windows Vista 的 IIS 便可以提供一個絕佳的測試環境。

小規模的網路環境：對於人數不多的內部網路環境 , 或者較單純的小型社團與組織 , 可能只需要架設 Web 網站或 FTP 站台供少量的使用者存取 ,

因為使用人數少或同時上線的機率低 , 所以 Windows Vista 上 IIS 的最大連線數便是可以接受的限制。

安裝前的準備安裝前的準備9

如果您使用 IIS 架設網站的目的在於服務內部網路使用者 , 或者是在本機上先行測試、學習架設網站 , 則開啟 IIS 的相關功能前 , 只要先確定電腦的 TCP / IP 環境可以正常運作即可。

而如果要讓網際網路的使用者可以連上 IIS 所架設的伺服器 , 便需要合法的 IP 位址或是網域名稱 , 否則 IIS 無法透過網際網路來服務使用者。

開啟 開啟 IIS IIS 的網頁伺服器功能的網頁伺服器功能10

欲開啟 IIS 內的網頁伺服器功能 , 請開啟控制台選擇程式集項目。

在 Windows 功能交談窗中選取 Internet Information Services 功能 , 即可依照預設值開啟 IIS 的相關功能 , 如此即可架設一個具備基本功能的網頁伺服器：可提供靜態網頁的存取 , 但是無法執行 ASP、 ASP.NET、 CGI 等 Web 應用程式。

IIS IIS 各功能的相依性各功能的相依性11

IIS 有些功能之間會有相依性 , 因為功能必須依賴另一個功能才能正常運作。

例如勾選全球資訊網服務下應用程式開發功能項目的 ASP 時 , 同一項目下的 ISAPI 擴充程式 便會被自動勾選。

反過來說 , 當我們取消勾選某個被其他功能相依的功能時 , 則會將其他功能一併關閉。

例如上述 ASP 與 ISAPI 擴充程式的相依情況 , 如果取消勾選 ISAPI 擴充程式時 , 便會出現如右的交談窗 , 提示我們 ASP 功能也會被關閉：

在本機上測試網頁伺服器在本機上測試網頁伺服器12

開啟 IIS 的網頁伺服器功能後 , 不需重新啟動電腦 , IIS 服務就會自動啟動 , 也就是說 , 開啟之後您的主機就已經是個運作中的網頁伺服器。

伺服器中會有一個內建的預設網站 , 也一樣是啟動的狀態 , 所以您可以在本機上使用 IE 瀏覽器 , 連線至 http://127.0.0.1, 即可看到預設網站的歡迎首頁。

在其他電腦測試網頁伺服器在其他電腦測試網頁伺服器13

因為 Windows Vista 預設會啟動防火牆功能 , 其他電腦要連上您的網頁伺服器時 , 會被防火牆擋下 , 所以必須修改防火牆的設定 , 開啟網頁伺服器所使用的 TCP 連接埠。

請執行『開始 / 控制台』命令 , 選擇網路和網際網路項目 , 然後再選擇 Windows 防火牆項目。

IIS IIS 管理工具管理工具14

如果要對 Web 網站進行設定與管理 , 請執行 『開始 / 控制台』命令 ,

選擇系統及維護項目 , 然後再選擇系統管理工具 , 在系統管理工具視窗內雙按 Internet Information Services (IIS) 管理員項目 , 接著在使用者帳戶控制交談窗上按繼續鈕 , 即可開啟 IIS 管理工具。

Web Web 伺服器的管理層次伺服器的管理層次15

我們可以針對『整個網頁伺服器』、『伺服器內的網站』、『網站內的目錄』等 3 個層級來進行管理。

當您要設定伺服器時 , 只要在 IIS 管理工具的左邊連線窗格 , 選擇最上層 圖示或其伺服器名稱 , 即可在中間窗格進行設定 , 或是在右邊的動作窗格執行動作。

同樣地 , 如果要設定網站或是網站的目錄 , 請在左邊連線窗格展開網站項目 , 選擇要設定的網站或目錄 , 即可在中間與右邊動作窗格設定或執行動作。

IIS IIS 管理工具的應用程式集區管理工具的應用程式集區16

在 IIS 管理工具的左邊連線窗格 , 可以看到一個名為應用程式集區的項目。

所謂的應用程式集區 (Application Pool), 是 IIS 用來區隔每個 Web 應用程式 (ASP、 ASP.NET、 CGI...等程式 ) 的群組。

因為 IIS 的網頁伺服器內可以架設多個網站 , 每個網站可能會執行一個或多個 Web 應用程式 , 此時可以使用應用程式集區來將 Web 應用程式分組。

同一個應用程式集區內的 Web 應用程式會使用同一個處理程序 , 亦即不同組 (不同應用程式集區 ) 的 Web 應用程式執行時 , 會使用不同的處理程序。

所以使用應用程式集區可以提高安全性 , 不同組之間無法存取彼此的資源 , 而且某一組的程式當掉時 , 不會影響其他組內的程式。

頻寬、連線逾時、連線數目等限制頻寬、連線逾時、連線數目等限制17

在 IIS 伺服器中 , 可以針對每個網站設定網路頻寬與連線數目的限制 , 避免網站佔用過多的連線頻寬 , 影響其他需要使用網路的程式。

此外 , 還可以設定當用戶端與伺服器連線過程中 , 用戶端多久未回應則視為逾時並切斷連線 , 以免浪費伺服器資源。

設定預設文件設定預設文件18

預設文件相當於網站或目錄的首頁 , 當使用者瀏覽網站時若沒有指明檔案 , 例如只輸入 http://csie.ncyu.edu.tw/ 或是 http://csie.ncyu.edu.tw/tool/, 此時伺服器就會傳送預設文件給使用者。

舉例來說 , 若預設文件為 Default.htm, 那麼瀏覽 http://csie.ncyu.edu.tw/ 時 , 伺服器會將 http://csie.ncyu.edu.tw/Default.htm 傳送給使用者。

每一個網站以及網站的每一個目錄 , 都可以個別指定預設文件 , 而且可以同時指定數個不同的預設文件。

預設文件為 “ Default.htm, index.htm, iisstart.htm”, 伺服器會優先以 Default.htm 做為預設文件 , 若找不到該檔案 , 才會使用 index.htm, 再找不到的話 , 便會使用 iisstart.htm 。

設定預設文件設定預設文件19

如果取消預設文件的功能 , 則使用者連線時 , 必須指定檔案名稱 , 若只輸入 http://flag.com.tw/, 便會產生找不到網頁的錯誤 , 請特別留意。

錯誤網頁錯誤網頁20

當使用者瀏覽網站時 , 可能會因為權限不足 , 或是伺服器本身的錯誤 (如找不到網頁 ), 導致網站無法回應要求 ,

此時依照狀況會產生不同的 HTTP 狀態碼 , 而管理者可以設定各狀態碼產生時應該顯示什麼網頁 , 以便將錯誤狀況通知使用者。

例如伺服器如果找不到網頁 , 就會產生編號 404 的 HTTP 狀態碼 , 根據 IIS 的預設值 , 此時會傳送 404.htm 給使用者 , 告知發生網頁找不到的錯誤。

再談再談 HTMLHTML21

HTML HTML 與網頁的關係與網頁的關係

如果您平常是用 Internet Explorer 做為瀏覽程式 , 執行『檢視』功能表中的『原始檔』命令後 , Internet Explorer 就會顯示另外一個視窗 , 視窗內所呈現的就是您所看到之網頁的原始文件內容。

我們稱這個原始文件為 HTML 網頁文件 , 您要製作網頁時 , 就是要做出一個如上圖所示的 HTML 文件 , 因此我們必須學習 HTML (HyperText Markup Language), 中文可稱之為『超文字標記語言』。

22

HTML HTML 的標準的標準

在電腦上的『語言』都有一套標準 , HTML 也不例外 , HTML 標準的制定單位是大名鼎鼎的 W3C (http://www.w3.org), 目前標準最新版本是 4.01 版 , 有興趣者可至 http://www.w3.org/Markup/ 探個究竟。

23

編輯 編輯 HTML HTML 文件的工具文件的工具

HTML 文件只是一般的 ASCII 文字檔案 , 只要用普通的文書編輯程式來製作就可以了 , 像是Windows 的記事本、甚至是 Word 都可用來編輯 HTML, 在存檔時要記得將副檔名設定成 .HTM 或 .HTML 。

24

目前常見的編輯器簡介目前常見的編輯器簡介

以下對幾種比較知名的軟體做一些簡略的介紹供大家參考：◦Adobe Dreamweaver◦Microsoft FrontPage◦NVU

25

Adobe DreamweaverAdobe Dreamweaver

Dreamweaver 原本是由 Macromedia 公司出品 , 是具有所見即所得功能的網頁製作工具 , 也支援直接編輯 HTML 的功能。 2006 年被 Adobe 公司收購 , 是現在最流行的網頁編輯軟體。

26

Microsoft FrontPageMicrosoft FrontPage

微軟公司出品的網頁編輯軟體。除了強大的網頁製作功能 , 以及所見即所得的編輯環境之外 , 還提供了網站維護的工具。

FrontPage 都是隨著 Microsoft Office 軟體一起推出 , 目前版本為 FrontPage 2003 。

不過 , 在即將面世的 Office 2007 中 , 網頁編輯的功能將會整合到 SharePoint Designer 2007 。

27

NVUNVU

NVU 也是一套「所見即所得」的網頁編輯軟體 , 並且屬於開放始碼 (Open Source) 軟體 , 可以免費使用。

NVU 提供了不同作業系統的版本 , 相當齊全。您可以到 http://www. moztw.org/nvu/ 網站下載 NVU 程式。

28

用瀏覽器預先觀看成果用瀏覽器預先觀看成果

文件編輯完成後 , 當然是自己先用瀏覽器載入看看其顯示效果 , 不合適的地方再回去修改。

通常我們都會在編輯與檢視成果間來回的進行 , 所以此時若有一個網頁編輯器可以直接預覽編輯網頁的效果 , 便顯得方便得多了 (這也是有人選擇使用 Dreamweaver 或 FrontPage 的原因 )。

29

將 將 HTML HTML 文件放到 文件放到 WWW WWW 伺服器伺服器

當完成 HTML 網頁用您主機的瀏覽器預覽時 , 僅僅限於您的電腦可以看到。如果要公開讓大家一起欣賞您的成果時 , 就必須將該文件公佈到一個 WWW 伺服器 ( 亦即有提供 HTTP 服務的主機 ) 上。

只要將做好的 HTML 網頁資料 , 上傳到有提供個人網頁空間的 WWW 伺服器上 , 大家就可以透過網路連線到這台 WWW 伺服器上觀賞您的網頁。

30

將 將 HTML HTML 文件放到 文件放到 WWW WWW 伺服器伺服器

如果您覺得這些免費的網頁空間太小 , 或者限制太多 , 您也可以在自己的電腦上架設 WWW 伺服器 , 那麼整個硬碟都是您可以應用的網頁空間。比如說在 Windows XP 系統內的 IIS 伺服器程式 , 就是很方便的 WWW 伺服器架站程式。

31

設計 設計 HTML HTML 文件的注意事項文件的注意事項

由於瀏覽器對於不認識的語法是採一概不理的方式 , 所以若使用擴充的語法編輯網頁 , 使用者就可能因為所用的瀏覽器不懂該語法 , 而什麼都看不到或是看到非預期的效果。

所以在編輯文件時 , 也要對是否使用擴充的語法來美化文件內容好好考量一番。

32

原始檔原始檔

以 Internet Explorer 而言 , 在瀏覽別人的網頁時 , 只要執行『檢視 / 原始檔』命令就能看到文件的原始內容。

33

純粹文字的 純粹文字的 HTML HTML 文件文件

其實 HTML 文件只是個普通的文字檔 , 您可以在 Windows 的記事本 (或其它文書編輯程式 ) 中輸入以下內容 , 並儲存為 HTML 文件。

34

純粹文字的 純粹文字的 HTML HTML 文件文件

雖然只要將檔案的副檔名改成 .htm 或 .html 即可產生一個 HTML 文件 , 但 HTML 文件必須以標籤來控制所有的圖片和文字 , 才能展現出特色 , 意即標籤是 HTML 的核心所在。

35

1-4-2 1-4-2 在 在 HTML HTML 文件加入標籤文件加入標籤

標籤名稱都是英文 , 也沒有大小寫的區別。例如 <body>、<BODY>、<bOdY> 的效果都是相同的。基本上 HTML 標籤依其用法可分為 2 種：◦前後包夾型◦單槍匹馬型

36

前後包夾型前後包夾型

這種標籤必須成對出現 , 第二個標籤就是在標籤名稱前加上一個斜線 “ /”, 例如在文件中有一個 <body> 標籤 , 在稍後就會有一個 </body> 的標籤 , 在這 2 個標籤間的文字就會被加上此標籤所定義的效果。不過有些也可視情況省略對應的結束標籤 , 例如 <p> 。

37

單槍匹馬型單槍匹馬型

這種標籤只需出現一次 , 像是將 <br>、<hr> 等等。

38

在 在 HTML HTML 文件加入標籤文件加入標籤

雖然 HTML 的語法要求並不嚴格、彈性較大；不過在 XHTML 中對語法的要求較嚴謹 , 標籤的大小寫是不同的 , 因此建議一律使用小寫的標籤。

39

什麼是標籤屬性什麼是標籤屬性

標籤的屬性 (Attribute) 可視為是標籤的『參數』 , 可以讓同一個標籤展現出不同的效果。加入屬性時的標籤格式如下：< 標籤名稱 屬性 = 屬性值>

屬性不一定只有一個 , 有多個屬性時的寫法如下： < 標籤名稱 屬性 1=屬性值 1 屬性 2=屬性值 2 … >

40

最基本的 最基本的 HTML HTML 標籤標籤

<html>： HTML 文件的開始與結束<head> ：標示文件資訊<title> ：文件標題<body> ：標示本文

41

HTML HTML 文件的開始與結束－文件的開始與結束－ <html><html>

這個標籤表示 HTML 文件的開始與結束 , 意即 HTML 文件應以 <html> 開始 , 檔案最後則應以 </html> 做為結束。

42

HTML HTML 和瀏覽器溝通的資訊－和瀏覽器溝通的資訊－ <head><head>

<head> 標籤是用來標示文件的資訊 , 主要是用以敘述 HTML 文件 (如說明此 HTML 文件的用途 ) 及宣告程式碼 (如宣告 Java Script 程式 ) 等。這些資訊只存在於 HTML 文件當中 , 用瀏覽器觀看網頁時 , 並不會看到這些資訊。

43

HTML HTML 和瀏覽器溝通的資訊－和瀏覽器溝通的資訊－ <head><head>

下列 3 種資訊可以放在 <head></head> 標籤之中：

1. <title></title>： HTML 文件的標題。2. <meta></meta> ：記錄此 HTML 文件的相關

資訊 , 如此文件建立的日期 , 使用的軟體等。3. <script></script> ：宣告使用的程式碼 , 如

Java Script 的程式碼。

44

出現在瀏覽器上方的網頁標題－出現在瀏覽器上方的網頁標題－ <title><title>

在瀏覽器視窗的標題欄顯示如上圖所示的 『我的網頁 』 字樣 , 可用 <title> 標籤來定義：<head><title>我的網頁</title></head>

45

網頁的內容－網頁的內容－ <body><body>

在 <body> 標籤之間可輸入任何想顯示在網頁上的文字 , 也是大家發揮個人特色所在。簡單的說 , 若是將事先編輯好的文字檔加到 <body> 標籤之中 , 馬上就完成一個 HTML 文件了。

46

網頁的內容－網頁的內容－ <body><body>

文件中的空格並非沒有作用。當文件中有空格時 , 瀏覽器只會空『一格』 , 而且即使用十個、二十個空格連在一起 , 其效果仍跟只空一格是一樣的 , 至於換行在 IE 中是沒有效的 (有些瀏覽器則視為一個空格 )。

47

referencereference

Based on第二十一章網路應用 Internet 導論與實作，第二版，施威銘研究室著，台北：旗標出版公司， F7060。第一章最新 HTML&CSS 網頁程式設計，施威銘研究室著，台北：旗標出版公司， F6462 。

48