第 1 章 ASP.NET VWD 與 HTML 的 基 礎
大 綱 Web 應 用 程 式 的 基 礎 網 頁 設 計 技 術 ASP.NET 與.NET Framework 建 立 ASP.NET 開 發 環 境 Visual Web Developer 的 基 本 使 用 建 立 HTML 網 頁 和 XML 檔 2
Web 應 用 程 式 的 基 礎 WWW 與 HTTP 通 訊 協 定 的 基 礎 Web 應 用 程 式 3
WWW 與 HTTP 通 訊 協 定 的 基 礎 WWW (World Wide Web, 簡 稱 Web) 全 球 資 訊 網 是 1989 年 歐 洲 高 能 粒 子 協 會 一 個 研 究 小 組 所 開 發 的 Internet 服 務,Web 能 夠 在 網 路 上 傳 送 圖 片 文 字 影 像 和 聲 音 等 多 媒 體 資 料, 這 是 由 Tim Berners Lee 領 導 的 小 組 開 發 的 主 從 架 構 和 分 散 式 網 路 服 務 系 統 WWW 服 務 是 目 前 Internet 的 熱 門 服 務 之 一, 使 用 者 只 需 待 在 家 中, 就 可 以 透 過 瀏 覽 程 式 存 取 位 在 全 世 界 各 個 角 落 的 資 源, 它 是 架 構 在 Internet 網 際 網 路 的 一 種 主 從 架 構 應 用 程 式, 在 主 從 端 間 使 用 HTTP 通 訊 協 定 來 交 換 資 料 4
HTTP 通 訊 協 定 HTTP 通 訊 協 定 (Hypertext Transfer Protocol) 是 一 種 在 伺 服 端 (Server) 和 客 戶 端 (Client) 之 間 傳 送 資 料 的 通 訊 協 定 5
HTTP 通 訊 協 定 的 特 性 HTTP 通 訊 協 定 並 不 會 持 續 保 持 連 線 : 只 有 當 瀏 覽 程 式 提 出 請 求 時 才 建 立 連 線, 在 請 求 後 就 斷 線 等 待 回 應, 每 一 次 請 求 和 回 應 都 需 要 事 先 建 立 連 線 HTTP 通 訊 協 定 並 不 會 保 留 狀 態 : 因 為 HTTP 通 訊 協 定 並 不 會 保 持 連 線, 所 以 在 連 線 時, 伺 服 端 和 客 戶 端 互 相 知 道 對 方, 一 旦 請 求 結 束, 就 互 不 相 干, 所 以 使 用 者 狀 態 並 不 會 保 留, 每 一 次 連 線 都 如 同 是 一 位 新 使 用 者 6
WWW 架 構 WWW 全 球 資 訊 網 是 一 種 主 從 架 構 系 統, 主 端 是 指 伺 服 端 (Server) 的 Web 伺 服 器, 儲 存 HTML 網 頁 圖 片 和 相 關 檔 案, 從 端 是 客 戶 端 (Client), 使 用 者 執 行 瀏 覽 程 式 負 責 和 伺 服 器 溝 通 和 讀 取 伺 服 器 的 資 料, 其 傳 送 的 是 HTML 網 頁 圖 檔 和 相 關 檔 案 7
Web 應 用 程 式 Web 應 用 程 式 (Web Application) 簡 單 的 說 是 一 組 網 頁 ( 包 含 HTML 網 頁 圖 片 和 相 關 伺 服 端 網 頁 技 術 的 程 式 檔 案 ) 的 集 合, 請 注 意!Web 應 用 程 式 是 在 Web 伺 服 器 執 行, 並 不 是 在 客 戶 端 電 腦 的 瀏 覽 程 式 執 行 Web 應 用 程 式 主 要 的 功 能 是 回 應 使 用 者 的 請 求, 並 且 與 使 用 者 進 行 互 動, 以 ASP.NET 技 術 來 說, 就 是 建 立 ASP.NET 網 站 的 Web 應 用 程 式 目 前 Internet 擁 有 多 種 不 同 類 型 的 Web 應 用 程 式, 例 如 : 網 路 銀 行 電 子 商 務 網 站 搜 尋 引 擎 網 路 商 店 拍 賣 網 站 和 電 子 公 共 論 壇 等 8
資 訊 傳 遞 模 型 資 訊 傳 遞 模 型 (Information Delivery Model) 就 是 傳 統 的 Web 網 站, 其 所 有 的 資 訊 內 容 都 是 使 用 HTML 語 言 撰 寫 的 靜 態 HTML 網 頁, 我 們 可 以 直 接 使 用 網 頁 編 輯 工 具 或 HTML 語 言 來 建 立 網 站 的 內 容 9
資 訊 處 理 模 型 資 訊 處 理 模 型 (Information Processing Model) 主 要 的 目 的 是 建 立 互 動 的 Web 網 站 內 容, 此 時 Web 伺 服 器 角 色 不 單 純 只 是 傳 遞 資 料, 它 是 一 個 完 整 資 訊 處 理 系 統 的 執 行 平 台, 我 們 需 要 使 用 伺 服 端 網 頁 技 術, 例 如 : 使 用 ASP.NET 技 術 建 立 的 Web 應 用 程 式 10
網 頁 設 計 技 術 客 戶 端 網 頁 技 術 伺 服 端 網 頁 技 術 11
客 戶 端 網 頁 技 術 客 戶 端 網 頁 技 術 是 指 程 式 碼 或 程 式 是 在 使 用 者 客 戶 端 電 腦 的 瀏 覽 程 式 中 執 行, 因 為 瀏 覽 程 式 本 身 即 支 援 直 譯 程 式, 所 以 可 以 執 行 客 戶 端 網 頁 技 術 12
Java Applet 當 我 們 使 用 Java 語 言 撰 寫 Java Applet 程 式 後, 就 可 以 使 用 編 譯 程 式 將 原 始 程 式 碼 編 譯 成 位 元 組 碼, 即 Java Applet ( 一 種 Java 應 用 程 式 ), 在 瀏 覽 程 式 需 要 使 用 Java 直 譯 程 式 JVM (Java Virtual Machine) 來 執 行, 目 前 Internet Explorer 3.0 版 以 上 都 可 以 執 行 Java Applet, 不 過,Internet Explorer 6.x 以 上 的 版 本 需 自 行 安 裝 JVM 13
JavaScript(Jscript) JavaScript 是 Netscape 開 發 的 一 種 Script 腳 本 語 言, 使 用 淺 顯 的 程 式 語 法, 只 需 初 學 程 式 設 計 者 即 可 運 用 自 如, 輕 鬆 在 網 頁 上 建 立 互 動 效 果 ;Jscript 為 微 軟 推 出 相 容 JavaScript 的 Script 語 言, 簡 單 的 說,Netscape 或 Mozilla Firefox 支 援 JavaScript;Internet Explorer 支 援 Jscript JavaScript 定 位 在 簡 單 的 Script 語 言, 其 目 的 是 讓 不 懂 程 式 設 計 的 使 用 者 也 一 樣 可 以 撰 寫 JavaScript 程 式 碼 來 產 生 互 動 的 網 頁 內 容 14
ActionScript 與 Flash ActionScript 是 Macromedia 公 司 開 發 的 一 種 Script 腳 本 語 言, 它 可 以 讓 Flash 動 畫 電 影 檔 產 生 互 動 效 果, 這 是 一 種 類 似 JavaScript 語 法 的 腳 本 語 言 Flash 是 Macromedia 公 司 的 軟 體 名 稱, 可 以 用 來 建 立 動 畫 效 果, 瀏 覽 程 式 只 需 安 裝 Flash 播 放 程 式, 就 可 以 在 網 頁 顯 示 Flash 檔 案 建 立 的 動 畫 效 果 換 句 話 說,Flash 加 上 ActionScript, 就 可 以 輕 鬆 建 立 動 畫 效 果 的 網 頁 應 用 程 式 15
VBScript VBScript 屬 於 Visual Basic 語 言 家 族 的 成 員, 全 名 Microsoft Visual Basic Scripting Edition, 簡 稱 VBScript VBScript 是 一 種 完 全 免 費 的 直 譯 程 式 語 言, 也 是 一 種 在 瀏 覽 程 式 執 行 的 網 頁 語 言, 能 夠 讓 網 頁 設 計 者 開 發 互 動 多 媒 體 的 網 頁 內 容, 目 前 只 有 微 軟 Internet Explorer 瀏 覽 程 式 支 援 VBScript 16
DHTML DHTML (Dynamic HTML) 是 一 種 在 瀏 覽 程 式 建 立 HTML 動 態 效 果 的 技 術 DHTML 技 術 主 要 是 由 三 種 元 素 所 組 成 :HTML CSS 和 Script 語 言, 如 下 所 示 : HTML:HTML 4.0x 版 的 HTML 標 籤,DHTML 只 是 使 用 CSS 和 Script 語 言 來 擴 充 HTML 標 籤 CSS: Cascading Style Sheets 簡 稱 CSS, 中 文 稱 為 層 級 式 樣 式 表,CSS 能 夠 重 新 定 義 HTML 標 籤, 讓 HTML 標 籤 顯 示 不 同 的 編 排 格 式 Script 語 言 : 主 要 是 指 VBScript 或 JavaScript,Internet Explorer 瀏 覽 程 式 就 是 VBScript 和 Jscript 17
Ajax Ajax 是 Asynchronous JavaScript And XML 的 縮 寫, 譯 成 中 文 就 是 非 同 步 JavaScript 和 XML 技 術 Ajax 技 術 是 由 多 種 網 頁 技 術 所 組 成, 相 關 技 術 的 說 明 如 下 所 示 : HTML 和 CSS: 在 瀏 覽 程 式 顯 示 使 用 者 介 面 和 呈 現 相 關 資 料 XML: 伺 服 端 使 用 XML 文 件 來 非 同 步 傳 遞 資 料 XML DOM: 當 瀏 覽 端 非 同 步 取 得 XML 資 料 後, 可 以 進 一 步 使 用 JavaScript 程 式 碼 和 XML DOM 取 出 所 需 的 資 訊 XMLHttpRequest 物 件 :JavaScript 程 式 碼 是 透 過 XMLHttpRequest 物 件 來 建 立 非 同 步 的 HTTP 請 求 18
Silverlight Silverlight 是 一 套 用 來 開 發 豐 富 網 際 網 路 應 用 程 式 (Rich Internet Application,RIAs) 的 工 具 程 式, 其 定 位 和 Macromedia 公 司 的 Flash 相 同, 這 是 微 軟 開 發 的 RIA 工 具, 提 供 網 頁 設 計 師 另 一 種 建 立 豐 富 網 頁 內 容 的 選 擇 Silverlight 也 是 使 用.NET 技 術, 支 援.NET CLR 子 集, 使 用 XML 語 言 建 立 客 戶 端 的 豐 富 網 頁 內 容, 稱 為 XAML (Extensible Application Markup Language) 19
伺 服 端 網 頁 技 術 伺 服 端 網 頁 技 術 簡 單 的 說 是 在 Web 伺 服 器 上 執 行 的 應 用 程 式, 而 不 是 在 客 戶 端 電 腦 的 瀏 覽 程 式 執 行, 如 下 圖 所 示 : 20
CGI CGI (Common Gateway Interface) 共 通 匣 道 介 面 提 供 Web 伺 服 器 執 行 外 部 程 式 的 管 道,CGI 應 用 程 式 是 一 種 外 部 程 式 的 執 行 檔, 能 夠 使 用 各 種 程 式 語 言 來 開 發, 例 如 :Visual Basic 6 C C++ 和 Perl, 程 式 需 要 編 譯 成 執 行 檔 案, 以 便 在 伺 服 端 執 行 其 應 用 程 式 架 構, 如 下 圖 所 示 : 21
ASP ASP (Active Server Pages) 直 接 從 英 文 字 面 上 解 釋 是 一 種 讓 網 頁 在 伺 服 器 上 動 起 來 的 技 術, 能 夠 將 Script 語 言 直 接 內 嵌 HTML 標 籤 的 網 頁, 在 伺 服 端 產 生 動 態 的 網 頁 內 容 ASP 技 術 也 可 以 使 用 多 種 語 言 來 建 立, 例 如 : JavaScript 和 VBScript ASP 技 術 建 立 的 網 頁 程 式 並 不 是 執 行 檔, 而 是 一 種 在 伺 服 端 以 直 譯 方 式 執 行 的 網 頁 技 術 22
ASP.NET ASP.NET 是 繼 ASP 3.0 後, 微 軟 所 開 發 的 伺 服 端 網 頁 技 術, 使 用 CLR (Common Language Runtime) 架 構 的.NET 程 式 設 計 平 台, 只 需 支 援 CLR 的 語 言 就 可 以 在 伺 服 端 建 立 Web 應 用 程 式, 目 前 最 新 版 是 4.0 版 23
PHP PHP 是 PHP: Hypertext Preprocessor 的 簡 稱, 它 是 一 種 通 用 開 放 原 始 碼 (Open Source) 的 伺 服 端 Script 語 言, 可 以 直 接 內 嵌 於 HTML 網 頁, 特 別 適 用 在 Web 網 站 的 開 發, 主 要 是 使 用 在 Linux/Unix 作 業 系 統 的 伺 服 端 網 頁 技 術, 目 前 Windows 作 業 系 統 一 樣 也 可 以 執 行 PHP, 而 且 支 援 微 軟 的 IIS 伺 服 器 24
JSP JSP (Java Server Pages) 是 昇 陽 的 伺 服 端 技 術, 它 是 Java 家 族 中 和 ASP 一 較 長 短 的 網 頁 技 術, 以 Java 語 言 來 說,Java Applet 是 下 載 到 客 戶 端 執 行 的 程 式 檔 ;Java Servlet 是 在 伺 服 端 執 行 ;JSP 是 結 合 HTML 和 Java Servlet 的 一 種 伺 服 端 網 頁 技 術 25
ASP.NET 與.NET Framework ASP.NET 的 基 礎.NET Framework 26
ASP.NET 的 基 礎 在 2000 年 微 軟 推 出 ASP.NET 1.0 版 時, 伺 服 端 控 制 項 表 現 模 型 (Server-side Control Rendering Model) 被 認 為 是 伺 服 端 網 頁 技 術 的 革 命, 可 以 讓 網 頁 程 式 設 計 者 使 用 相 同 的 事 件 驅 動 程 式 設 計 來 建 立 桌 上 型 和 Web 應 用 程 式 ASP.NET 2.0 版 直 接 在.NET Framework 實 作 常 用 的 網 站 功 能 約 在 2 年 多 後 推 出 ASP.NET 3.5 版 時, 導 入 Ajax 技 術 和 支 援 微 軟 WCF 應 用 程 式 最 新 ASP.NET 4.0 版 替 網 頁 程 式 設 計 者 建 立 能 夠 快 速 開 發 Web 應 用 程 式 的 環 境, 除 了 增 強 Ajax 技 術 外, 更 支 援 微 軟 客 戶 端 網 頁 技 術 Silverlight 27
ASP.NET 的 重 要 特 點 網 站 的 一 致 化 設 計 網 站 的 會 員 管 理 網 站 的 個 人 化 程 序 資 料 處 理 控 制 項 更 多 的 網 站 設 定 和 管 理 工 具 28
.NET Framework.NET Framework 是 微 軟 下 一 個 世 代 的 程 式 開 發 平 台, 它 是 由 CLR 和.NET Framework 類 別 函 式 庫 所 組 成 當 我 們 使 用.NET Framework 支 援 的 程 式 語 言 編 寫 程 式 碼 檔 案 後, 就 可 以 使 用.NET 編 譯 程 式 進 行 編 譯, 不 過,.NET Framework 並 不 是 編 譯 成 CPU 可 執 行 的 機 器 語 言, 而 是 一 種 中 間 程 式 語 言 稱 為 MSIL (Microsoft Intermediate Language) 29
.NET Framework 圖 例 當 需 要 執 行 程 式 時,CLR 是 使 用 JIT (Just In Time) 編 譯 程 式 將 MSIL 轉 換 成 機 器 語 言 來 執 行 程 式, 如 下 圖 所 示 : 30
.NET Framework- 類 別 函 式 庫.NET Framework 類 別 函 式 庫 提 供 龐 大 的 類 別 物 件, 可 以 幫 助 我 們 建 立 各 種 不 同 的 應 用 程 式, 只 需 支 援.NET Framework 的 程 式 語 言 都 可 以 使 用 類 別 函 式 庫 的 物 件 和 方 法 在 附 錄 A 將 說 明 如 何 在 ASP.NET 程 式 碼 使 用.NET Framework 類 別 函 式 庫 的 物 件 31
建 立 ASP.NET 開 發 環 境 微 軟 的 Visual Studio 安 裝 Visual Web Developer Express 版 32
Visual Studio 微 軟 程 式 語 言 的 整 合 開 發 環 境 稱 為 Visual Studio, 它 是 微 軟 公 司 開 發 的 應 用 程 式 整 合 開 發 環 境, 能 夠 在 同 一 套 應 用 程 式 編 輯 編 譯 除 錯 和 測 試.NET 語 言 所 建 立 的 應 用 程 式, 在 其 產 品 線 的 Visual Web Developer 是 一 套 用 來 開 發 ASP.NET 網 站 ( 即 Web 應 用 程 式 ) 的 整 合 開 發 環 境 Visual Studio 是 一 套 支 援.NET Framework 的 整 合 開 發 環 境, 可 以 使 用 C# Visual Basic C++ 和 J# 等 語 言 來 建 立 Windows ASP.NET 主 控 台 和 Web Services 等 各 種 不 同 的 應 用 程 式 33
Visual Studio 圖 例 在 Visual Studio 整 合 開 發 環 境 建 立 的 應 用 程 式 是 在.NET Framework 的 CLR 平 台 上 執 行, 如 下 圖 所 示 : 34
Visual Studio 功 能 新 版 2010 支 援 多 螢 幕 顯 示 Silverlight WPF 編 輯 工 具 和 最 新.NET Framework 4.0 版, 這 是 一 套 功 能 強 大 的 網 站 與 應 用 程 式 的 整 合 開 發 工 具, 其 主 要 功 能 如 下 所 示 : 多 種 程 式 語 言 和 多 目 標 (Multi-Targeting) 的 整 合 開 發 環 境 強 大 的 方 案 與 專 案 管 理 提 供 現 成 的 專 案 或 網 站 範 本 視 覺 化 表 單 設 計 介 面 IntelliSense 智 慧 程 式 碼 輸 入 完 整 偵 錯 功 能 35
安 裝 Visual Web Developer Express 版 在 實 務 上, 因 為 Visual Web Developer 開 發 工 具 是 一 套 視 覺 化 的 網 站 開 發 工 具, 可 以 幫 助 我 們 快 速 建 立 ASP.NET 網 頁, 自 動 產 生 標 籤 的 程 式 碼, 而 不 用 自 行 重 複 輸 入 各 種 控 制 項 的 難 記 標 籤 名 稱 和 屬 性, 功 能 強 大 網 站 管 理 介 面, 更 可 以 讓 我 們 輕 鬆 維 護 與 部 署 ASP.NET 網 站 36
安 裝 Visual Web Developer Express 版 - 下 載 1 Visual Web Developer Express 版 可 以 在 網 路 上 免 費 下 載, 其 下 載 網 址 為 : http://www.microsoft.com/express/downloads/ Visual Web Developer Express 版 支 援 線 上 和 離 線 安 裝, 線 上 安 裝 需 先 安 裝 WebPI; 離 線 安 裝 是 下 載 ISO 檔 自 行 燒 錄 光 碟, 在 本 節 是 以 離 線 安 裝 為 例, 請 選 All - Offline Install ISO image file, 選 Chinese (Traditional) 下 載 繁 體 中 文 版 的 ISO 檔, 然 後 使 用 燒 錄 程 式 將 ISO 檔 燒 成 DVD 安 裝 光 碟 37
安 裝 Visual Web Developer Express 版 - 安 裝 2 Visual Web Developer 2010 Express 中 文 版 可 以 建 立 微 軟 Web 平 台, 包 含 :Visual Web Developer SQL Server Express Silverlight 工 具 和 IIS 的 ASP.NET 擴 充 程 式 38
Visual Web Developer 基 本 使 用 啟 動 與 關 閉 Visual Web Developer 建 立 ASP.NET 網 站 加 入 ASP.NET 網 頁 39
啟 動 與 關 閉 Visual Web Developer- 啟 動 VWD 請 執 行 開 始 / 所 有 程 式 /Microsoft Visual Studio 2010 Express/Microsoft Visual Web Developer 2010 Express 指 令, 如 果 是 第 一 次 啟 動, 需 要 執 行 數 分 鐘 的 環 境 設 定, 請 稍 等 一 下, 等 到 完 成 設 定, 可 以 看 到 VWD 的 執 行 畫 面 40
建 立 ASP.NET 網 站 1 VWD 支 援 建 立 的 ASP.NET 網 站 有 三 種, 其 說 明 如 下 所 示 : HTTP 網 站 : 建 立 位 在 Web 伺 服 器 上 的 網 站, 我 們 需 要 在 Internet 擁 有 Web 伺 服 器 支 援 ASP.NET 的 網 頁 空 間, 或 在 Windows 作 業 系 統 安 裝 IIS, 才 能 建 立 HTTP 網 站 FTP 網 站 : 建 立 位 在 FTP 伺 服 器 的 網 站, 也 就 是 透 過 FTP 伺 服 器 來 存 取 ASP.NET 網 站 的 內 容 檔 案 系 統 網 站 : 這 是 儲 存 在 硬 碟 資 料 夾 的 ASP.NET 網 站 41
建 立 ASP.NET 網 站 2 請 啟 動 VWD 看 到 起 始 頁 後, 執 行 檔 案 / 新 網 站 指 令, 可 以 看 到 新 網 站 對 話 方 塊 選 ASP.NET 空 網 站, 在 下 方 Web 位 置 欄 選 檔 案 系 統, 按 瀏 覽 鈕 建 立 D: D:\ 範 例 網 站 \Ch01 Ch01\Ch1 Ch1-5-2 路 徑, 按 確 定 鈕 42
加 入 ASP.NET 網 頁 在 建 立 空 白 ASP.NET 網 站 後, 我 們 就 可 以 在 網 站 加 入 ASP.NET 網 頁 來 編 輯 網 頁 內 容 基 本 上, 在 ASP.NET 網 站 加 入 的 網 頁 主 要 有 兩 種 : Web Forms 表 單 : 包 含 HTML 標 籤 和 伺 服 端 控 制 項 的 網 頁, 即 ASP.NET 網 頁, 其 副 檔 名 為.aspx HTML 網 頁 : 內 含 HTML 標 籤 的 網 頁, 並 不 含 任 何 ASP.NET 控 制 項, 其 副 檔 名 是.htm 43
開 啟 ASP.NET 網 站 例 如 : 開 啟 C:\ 範 例 網 站 \Ch01\Ch1-5-3 路 徑 的 檔 案 系 統 網 站 來 加 入 ASP.NET 網 頁, 請 啟 動 VWD 執 行 檔 案 / 開 啟 網 站 指 令, 可 以 看 到 開 啟 網 站 對 話 方 塊 開 啟 範 例 網 站 \Ch01 Ch01\Ch1 Ch1-5-3 路 徑 的 檔 案 系 統 網 站 44
加 入 網 頁 在 方 案 總 管 視 窗 的 網 站 根 目 錄 上, 執 行 右 鍵 快 顯 功 能 表 的 加 入 新 項 目 指 令, 可 以 看 到 加 入 新 項 目 對 話 方 塊 選 Web Form, 名 稱 欄 的 預 設 檔 案 名 稱 是 Default.aspx, 不 用 更 改, 取 消 勾 選 將 程 式 碼 置 於 個 別 檔 案 中, 按 新 增 鈕 45
介 面 說 明 編 輯 視 窗 方 案 總 管 工 具 箱 標 籤 屬 性 視 窗 46
編 輯 視 窗 VWD 開 發 環 境 的 最 主 要 部 分 就 是 中 間 標 籤 頁 的 編 輯 視 窗, 選 取 視 窗 下 方 的 三 個 標 籤, 可 以 切 換 三 種 不 同 的 檢 視 方 式, 如 下 所 示 : 設 計 檢 視 :VWD 視 覺 化 設 計 工 具, 只 需 從 工 具 箱 視 窗 選 取 控 制 項, 就 可 以 拖 拉 來 建 立 ASP.NET 網 頁 的 內 容 分 割 檢 視 : 將 編 輯 視 窗 分 割 成 上 下 兩 部 分, 上 方 是 原 始 程 式 碼 ; 下 方 是 設 計 檢 視, 在 下 方 選 取 控 制 項, 可 以 在 上 方 顯 示 對 應 的 標 籤 程 式 碼 原 始 檔 檢 視 :ASP.NET 網 頁 的 程 式 碼 編 輯 視 窗, 可 以 顯 示 Visual Basic 和 控 制 項 標 籤 的 程 式 碼 47
方 案 總 管 視 窗 VWD 的 方 案 總 管 視 窗 是 ASP.NET 網 站 檔 案 和 資 料 夾 的 管 理 視 窗, 可 以 顯 示 目 前 開 啟 ASP.NET 網 站 的 檔 案 和 資 料 夾 清 單, 按 二 下 檔 案 名 稱 就 可 以 開 啟 指 定 檔 案 48
屬 性 視 窗 在 屬 性 視 窗 可 以 檢 視 ASP.NET 網 頁 或 控 制 項 等 物 件 的 相 關 屬 性, 在 上 方 欄 位 顯 示 的 是 選 取 物 件 ; 下 方 可 以 顯 示 此 物 件 的 屬 性 清 單 49
建 立 HTML 網 頁 和 XML 檔 建 立 HTML 網 頁 建 立 XML 文 件 50
建 立 HTML 網 頁 XHTML (Extensible HyperText Markup Language) 是 HTML 4.0x 版 以 XML 1.0 語 法 重 新 制 定 的 標 籤 語 法, 屬 於 一 份 標 準 的 XML 文 件 不 過 XHTML 仍 然 採 用 HTML 4.0 版 的 標 籤, 它 是 W3C 制 定 取 代 HTML 4.0 版 的 下 一 個 世 代 的 HTML 51
XHTML 網 頁 的 基 礎 XHTML 網 頁 的 副 檔 名 可 以 和 HTML 一 樣 是.htm 或.html 其 架 構 和 HTML 網 頁 相 似, 只 是 在 網 頁 開 頭 使 DOCTYPE 指 定 驗 證 的 DTD(Document Type Declarations), 如 下 所 示 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> 52
標 籤 與 屬 性 XHTML 本 身 的 指 令 則 是 由 標 籤 和 屬 性 所 組 成, 如 下 所 示 : 標 籤 (Tags):XHTML 標 籤 是 使 用 < 和 > 符 號 括 起 的 指 令, 分 為 開 始 和 結 尾 標 籤, 例 如 : <b>..</b> 標 籤, 在 結 尾 標 籤 需 要 加 上 / 符 號, 標 籤 內 的 文 字 內 容 就 會 套 用 預 設 樣 式 來 進 行 編 排, 以 此 例 <b> 標 籤 就 是 粗 體 字 屬 性 (Attributes): 每 一 個 標 籤 可 以 擁 有 一 些 屬 性 來 定 義 細 部 編 排 53
建 立 HTML 網 頁 注 意 事 項 XHTML 比 HTML 標 籤 寫 法 要 求 的 更 加 嚴 格, 必 須 完 全 遵 循 XML 文 件 的 撰 寫 規 則, 其 注 意 事 項 如 下 所 示 : 不 可 省 略 結 尾 標 籤, 如 果 是 沒 有 結 尾 標 籤 的 單 獨 標 籤, 標 籤 寫 法 在 結 束 > 符 號 前 需 要 加 上 / 符 號, 例 如 :<br/> <hr/> 等 標 籤 和 屬 性 都 是 使 用 小 寫 的 英 文 字, 例 如 :<p> <body> 等 屬 性 值 需 要 使 用 引 號 括 起 來 name 屬 性 使 用 id 屬 性 取 代 54
建 立 HTML 網 頁 請 啟 動 VWD 開 啟 範 例 網 站 \Ch01\Ch1-6-1 資 料 夾 的 ASP.NET 網 站 執 行 檔 案 / 新 增 檔 案 指 令, 可 以 看 到 加 入 新 項 目 對 話 方 塊 選 HTML 網 頁 範 本, 在 名 稱 欄 輸 入 網 頁 名 稱 Ch1-6-1.htm 1.htm, 按 新 增 鈕 新 增 HTML 網 頁 55
建 立 HTML 網 頁 範 例 01: <!-- HTML 網 頁 :Ch1-6-1.htm --> 02: <!DOCTYPE html DOCTYPE 03: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 04: "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> 05: <html xmlns="http://www.w3.org/1999/xhtml"> 06: <head><title> 這 是 一 個 測 試 網 頁 </title></head> 07: <body> 08: <p> 歡 迎 進 入 我 的 網 頁 </p> 09: </body> 10: </html> XHTML 網 頁 56
區 塊 說 明 XHTML 網 頁 分 成 三 個 區 塊, 如 下 表 所 示 : 網 頁 區 塊 <html>. </html> <head>. </head> <body> </body> 說 明 XHTML 網 頁 使 用 <html> 標 籤 包 圍, 告 訴 瀏 覽 程 式 是 一 份 XHTML 網 頁, 內 含 <head> 和 <body> 區 塊 XHTML 網 頁 的 標 題 區 塊, 定 義 網 頁 標 題 網 址 和 網 頁 本 身 的 相 關 定 義, 例 如 :<title> 標 籤 定 義 瀏 覽 程 式 上 方 標 題 文 字 內 容 XHTML 網 頁 實 際 的 內 容 是 置 於 此 區 塊 57
建 立 XML 文 件 XML (Extensible Markup Language) 可 擴 展 標 示 語 言 也 屬 於 一 種 標 籤 語 言,XML 1.0 版 規 格 是 在 1998 年 2 月 正 式 推 出, 目 前 XML 的 相 關 技 術 仍 在 持 續 發 展 和 制 定 中 XML 語 法 十 分 類 似 HTML, 也 屬 於 SGML 的 子 集, 繼 承 SGML 自 訂 標 籤 的 優 點, 並 且 刪 除 一 些 SGML 複 雜 的 部 分, 在 功 能 上 能 夠 補 足 HTML 標 籤 的 不 足, 但 是, 擁 有 更 多 的 擴 充 性 XML 的 目 的 並 不 是 編 排 內 容, 而 是 描 述 資 料, 它 並 沒 有 如 同 HTML 語 言 的 預 設 標 籤, 事 實 上, 使 用 者 需 要 自 己 定 義 描 述 資 料 所 需 的 各 種 標 籤 58
建 立 XML 文 件 請 啟 動 VWD 開 啟 範 例 網 站 \Ch01\Ch1-6-2 資 料 夾 的 ASP.NET 網 站 執 行 檔 案 / 新 增 檔 案 指 令, 可 以 看 到 加 入 新 項 目 對 話 方 塊 選 XML 檔 範 本, 在 名 稱 欄 輸 入 文 件 名 稱 Ch1-6-2.xml 2.xml, 按 新 增 鈕 新 增 XML 文 件 59
建 立 XML 文 件 範 例 1 01: <?xml version="1.0" encoding="big5"?> 02: <!-- 網 頁 製 作 徹 底 研 究 系 列 --> 03: <booklist> 04: <book> 05: <id>f8920</id> 06: <title>asp.net 網 頁 製 作 徹 底 研 究 </title> 07: <authorlist> 08: <author> 陳 會 安 </author> 09: </authorlist> 10: <price>650</price> 11: </book> 60
建 立 XML 文 件 範 例 2 12: <book> 13: <id>f8934a</id> 14: <title>xml 網 頁 製 作 徹 底 研 究 </title> 15: <authorlist> 16: <author> 陳 會 安 </author> 17: </authorlist> 18: <price>650</price> 19: </book> 20: </booklist> 61
建 立 XML 文 件 範 例 3 XML 文 件 的 基 本 架 構 可 以 分 為 幾 個 部 分, 如 下 所 示 : 文 件 宣 告 : 第 1 列 是 XML 文 件 宣 告, 定 義 XML 文 件 的 版 本 和 使 用 的 子 碼 集 ( 即 編 碼 ), 以 此 例 為 1.0 版, 使 用 中 文 Big5 字 碼 根 標 籤 : 第 3 列 和 第 20 列 是 XML 文 件 的 根 標 籤 <booklist> 和 結 尾 標 籤 </booklist>, 這 是 樹 狀 結 構 的 根 元 素 子 元 素 : 在 第 4~19 列 是 根 元 素 的 子 元 素 book, 第 5~10 列 和 第 13~18 列 為 book 元 素 的 子 元 素 id title authorlist 和 price 62
建 立 XML 文 件 範 例 圖 例 63