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

Presentation on theme: "第 11 講次 (book1:chap21+book2:chap1)"— Presentation transcript:

1 第 11 講次 (book1:chap21+book2:chap1)
網際網路導論 嘉義大學資訊工程學系李龍盛老師 本著作除另有註明外，採取創用CC「姓名標示－非商業性－相同方式分享」台灣3.0版授權釋出

2 IIS 再談HTML Content

3 IIS

4 Windows Vista 內建 IIS 7 (Internet Information Services), 可以提供 Web 服務 給用戶端。
開啟 IIS 的相關功能, 就可以利用 Windows Vista 架設 Web 網站。 IIS 7 可說是微軟新世代的伺服器架站軟體, 微 軟將 IIS 的功能以模組化的方式重新架構, 讓 IIS 的執行與功能擴充上更具彈性, 管理者可以 依需求開啟或關閉功能, 降低記憶體與 CPU 資源 不必要的消耗, 提升整體執行的效率。 IIS 的功能

5 IIS 的功能 關閉不必要的功能後, 可以減少因某功能有弱點而被 入侵的機率, 提高安全性。
IIS 7 也將 .NET 完全整合至核心, 提升 ASP.NET 的執行效率, 還可以使用 .NET 撰寫 IIS 模組, 所以 .NET 程式設計者不僅可以開發 Web 應用程式, 現 在還可以直接設計 IIS 模組, 為 IIS 加入新功能。 IIS 7 在 Web 服務方面增強了功能, 但是與之前的 IIS 版本相較, IIS 7 不再提供 SMTP (可架設郵件 伺服器) 與 NNTP (可架設 News 伺服器) 這兩種服 務。 IIS 的功能

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

7 Windows Vista 上 IIS 的限制 除了功能上的限制外, Windows Vista 的 IIS 有最大連線數的限制。
家用進階版 (Home Premium) 同一時間最多只 允許 3 個 TCP 連線至 IIS 所提供的服務, 而商 用入門版 (Business)、商用進階版 (Enterprise) 與旗艦版 (Ultimate) 的 IIS 最大 連線數為 10 個。 雖然 Windows Vista 的 IIS 有功能與最大連線 數的限制, 但是對於某些環境而言, Windows Vista 的 IIS 仍然可以勝任許多工作。 Windows Vista 上 IIS 的限制

8 學習 IIS 操作：如果只是想學習 IIS 的相關操作, 但又 無法安裝伺服器專用的 Windows 版本 (Windows / 2003 / 2003 R2), 此時可以先透過 Windows Vista 上的 IIS, 熟悉其操作介面與管理架構, 以便正式 接觸伺服器時, 可以很快地上手。 測試 Web 應用程式：不論是 Web 應用程式的學習者或 是設計者, 都需要一個環境來進行測試, 而 Windows Vista 的 IIS 便可以提供一個絕佳的測試環境。 小規模的網路環境：對於人數不多的內部網路環境, 或者 較單純的小型社團與組織, 可能只需要架設 Web 網站或 FTP 站台供少量的使用者存取, 因為使用人數少或同時上線的機率低, 所以 Windows Vista 上 IIS 的最大連線數便是可以接受的限制。 Windows Vista 上 IIS 的應用

9 如果您使用 IIS 架設網站的目的在於服務內部網 路使用者, 或者是在本機上先行測試、學習架設 網站, 則開啟 IIS 的相關功能前, 只要先確定電 腦的 TCP / IP 環境可以正常運作即可。
而如果要讓網際網路的使用者可以連上 IIS 所架 設的伺服器, 便需要合法的 IP 位址或是網域名稱 , 否則 IIS 無法透過網際網路來服務使用者。 安裝前的準備

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

11 IIS 各功能的相依性 IIS 有些功能之間會有相依性, 因為功能必須依 賴另一個功能才能正常運作。
例如勾選全球資訊網服務下應用程式開發功能項 目的 ASP 時, 同一項目下的 ISAPI 擴充程式 便 會被自動勾選。 反過來說, 當我們取消勾選某個被其他功能相依 的功能時, 則會將其他功能一併關閉。 例如上述 ASP 與 ISAPI 擴充程式的相依情況, 如果取消勾選 ISAPI 擴充程式時, 便會出現如右 的交談窗, 提示我們 ASP 功能也會被關閉： IIS 各功能的相依性

12 開啟 IIS 的網頁伺服器功能後, 不需重新啟動電 腦, IIS 服務就會自動啟動, 也就是說, 開啟之後 您的主機就已經是個運作中的網頁伺服器。
伺服器中會有一個內建的預設網站, 也一樣是啟 動的狀態, 所以您可以在本機上使用 IE 瀏覽器, 連線至 即可看到預設網站的 歡迎首頁。 在本機上測試網頁伺服器

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

14 IIS 管理工具 如果要對 Web 網站進行設定與管理, 請執行 『 開始 / 控制台』命令,
選擇系統及維護項目, 然後再選擇系統管理工具, 在系統管理工具視窗內雙按 Internet Information Services (IIS) 管理員項目, 接著 在使用者帳戶控制交談窗上按繼續鈕, 即可開啟 IIS 管理工具。 IIS 管理工具

15 Web 伺服器的管理層次 我們可以針對『整個網頁伺服器』、『伺服器內的網 站』、『網站內的目錄』等 3 個層級來進行管理。
當您要設定伺服器時, 只要在 IIS 管理工具的左邊連 線窗格, 選擇最上層 圖示或其伺服器名稱, 即可 在中間窗格進行設定, 或是在右邊的動作窗格執行動 作。 同樣地, 如果要設定網站或是網站的目錄, 請在左邊 連線窗格展開網站項目, 選擇要設定的網站或目錄, 即可在中間與右邊動作窗格設定或執行動作。 Web 伺服器的管理層次

16 IIS 管理工具的應用程式集區 在 IIS 管理工具的左邊連線窗格, 可以看到一個名為應用程式 集區的項目。
所謂的應用程式集區 (Application Pool), 是 IIS 用來區隔每 個 Web 應用程式 (ASP、ASP.NET、CGI...等程式) 的群組 。 因為 IIS 的網頁伺服器內可以架設多個網站, 每個網站可能會 執行一個或多個 Web 應用程式, 此時可以使用應用程式集區 來將 Web 應用程式分組。 同一個應用程式集區內的 Web 應用程式會使用同一個處理程 序, 亦即不同組 (不同應用程式集區) 的 Web 應用程式執行時 , 會使用不同的處理程序。 所以使用應用程式集區可以提高安全性, 不同組之間無法存取 彼此的資源, 而且某一組的程式當掉時, 不會影響其他組內的 程式。 IIS 管理工具的應用程式集區

17 在 IIS 伺服器中, 可以針對每個網站設定網路頻 寬與連線數目的限制, 避免網站佔用過多的連線 頻寬, 影響其他需要使用網路的程式。
此外, 還可以設定當用戶端與伺服器連線過程中, 用戶端多久未回應則視為逾時並切斷連線, 以免 浪費伺服器資源。 頻寬、連線逾時、連線數目等限制

18 預設文件相當於網站或目錄的首頁, 當使用者瀏覽網站時若沒 有指明檔案, 例如只輸入 http://csie. ncyu. edu
預設文件相當於網站或目錄的首頁, 當使用者瀏覽網站時若沒 有指明檔案, 例如只輸入 或是 此時伺服器就會傳送預設文 件給使用者。 舉例來說, 若預設文件為 Default.htm, 那麼瀏覽 時, 伺服器會將 傳送給使用者。 每一個網站以及網站的每一個目錄, 都可以個別指定預設文件, 而且可以同時指定數個不同的預設文件。 預設文件為 “Default.htm, index.htm, iisstart.htm”, 伺 服器會優先以 Default.htm 做為預設文件, 若找不到該檔案, 才會使用 index.htm, 再找不到的話, 便會使用 iisstart.htm 。 設定預設文件

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

20 錯誤網頁 當使用者瀏覽網站時, 可能會因為權限不足, 或是 伺服器本身的錯誤 (如找不到網頁), 導致網站無 法回應要求,
此時依照狀況會產生不同的 HTTP 狀態碼, 而管 理者可以設定各狀態碼產生時應該顯示什麼網頁, 以便將錯誤狀況通知使用者。 例如伺服器如果找不到網頁, 就會產生編號 404 的 HTTP 狀態碼, 根據 IIS 的預設值, 此時會傳 送 404.htm 給使用者, 告知發生網頁找不到的 錯誤。 錯誤網頁

21 再談HTML

22 如果您平常是用 Internet Explorer 做為瀏覽程 式, 執行『檢視』功能表中的『原始檔』命令後, Internet Explorer 就會顯示另外一個視窗, 視 窗內所呈現的就是您所看到之網頁的原始文件內 容。 我們稱這個原始文件為 HTML 網頁文件, 您要製 作網頁時, 就是要做出一個如上圖所示的 HTML 文件, 因此我們必須學習 HTML (HyperText Markup Language), 中文可稱之為『超文字標 記語言』。 HTML 與網頁的關係

23 在電腦上的『語言』都有一套標準, HTML 也不 例外, HTML 標準的制定單位是大名鼎鼎的 W3C (http://www. w3

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

25 目前常見的編輯器簡介 以下對幾種比較知名的軟體做一些簡略的介紹供 大家參考： Adobe Dreamweaver
Microsoft FrontPage NVU 目前常見的編輯器簡介

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

27 Microsoft FrontPage 微軟公司出品的網頁編輯軟體。
除了強大的網頁製作功能, 以及所見即所得的編 輯環境之外, 還提供了網站維護的工具。 FrontPage 都是隨著 Microsoft Office 軟體一 起推出, 目前版本為 FrontPage 2003。 不過, 在即將面世的 Office 2007 中, 網頁編輯 的功能將會整合到 SharePoint Designer 2007 。 Microsoft FrontPage

28 NVU NVU 也是一套「所見即所得」的網頁編輯軟體, 並且屬於開放始碼 (Open Source) 軟體, 可以 免費使用。
NVU 提供了不同作業系統的版本, 相當齊全。您 可以到 moztw.org/nvu/ 網站下 載 NVU 程式。 NVU

29 用瀏覽器預先觀看成果 文件編輯完成後, 當然是自己先用瀏覽器載入看 看其顯示效果, 不合適的地方再回去修改。
通常我們都會在編輯與檢視成果間來回的進行, 所以此時若有一個網頁編輯器可以直接預覽編輯 網頁的效果, 便顯得方便得多了 (這也是有人選 擇使用 Dreamweaver 或 FrontPage 的原因) 。 用瀏覽器預先觀看成果

30 當完成 HTML 網頁用您主機的瀏覽器預覽時, 僅 僅限於您的電腦可以看到。如果要公開讓大家一 起欣賞您的成果時, 就必須將該文件公佈到一個 WWW 伺服器 (亦即有提供 HTTP 服務的主機) 上。
只要將做好的 HTML 網頁資料, 上傳到有提供個 人網頁空間的 WWW 伺服器上, 大家就可以透過 網路連線到這台 WWW 伺服器上觀賞您的網頁 。 將 HTML 文件放到 WWW 伺服器

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

32 由於瀏覽器對於不認識的語法是採一概不理的方 式, 所以若使用擴充的語法編輯網頁, 使用者就可 能因為所用的瀏覽器不懂該語法, 而什麼都看不 到或是看到非預期的效果。
所以在編輯文件時, 也要對是否使用擴充的語法 來美化文件內容好好考量一番。 設計 HTML 文件的注意事項

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

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

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

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

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

38 這種標籤只需出現一次, 像是將 <br>、<hr> 等等。
單槍匹馬型

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

40 標籤的屬性 (Attribute) 可視為是標籤的『參數 』, 可以讓同一個標籤展現出不同的效果。加入 屬性時的標籤格式如下： <標籤名稱 屬性=屬性值>
屬性不一定只有一個, 有多個屬性時的寫法如下 ： <標籤名稱 屬性1=屬性值1 屬性2=屬性值2 … > 什麼是標籤屬性

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

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

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

44 HTML 和瀏覽器溝通的資訊－<head>
下列 3 種資訊可以放在 <head></head> 標 籤之中： <title></title>：HTML 文件的標題。 <meta></meta>：記錄此 HTML 文件的相關 資訊, 如此文件建立的日期, 使用的軟體等。 <script></script>：宣告使用的程式碼, 如 Java Script 的程式碼。 HTML 和瀏覽器溝通的資訊－<head>

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

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

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

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