網站開發工具

各種網站和網路社群的開發工具，分為語言層次和軟體層次工具。

語言層次工具通常又包括3類：

1.處理網頁功能的各種標註語言，如最常用的HTML。

2.處理網頁呈現的層疊樣式表語言CSS。以上兩者都由協調網路語言規範的機構W3C 制訂；

3.處理網路自動化的JavaScript 語言，而由W3C 以JavaScript 為基礎制訂的標準則為DOM。

最新發展中的是HTML 5 版，於2014年底完成 HTML 5.0，雖然已公佈新版命令與規範，但持續進化，在2016完成 HTML 5.1 「推薦版 Recommendation」，同時，已在 2017 年推出 HTML 5.2「試用版 Working Draft」與 HTML 5.2「解說版 Editor’s Draft」。

在軟體層次的各種編輯器方面，當前為配合微軟教學上的優勢，本系列將講述微軟的網站開發軟體 Expression Web，並兼及前代的 SharePoint Designer 與 FrontPage。

HTML, xHTML and Other ML language

標註語言：結構功能命令

HTML (Hyper Text Markup Language)為超文字標註語言，其加強延伸功能版為 xHTML ，但應用上常合併以 HTML 表示，由W3C定義和維護。

HTML, xHTML 的用途為網頁的功能指令，其中的標註 (Markup)，即表示以〈標籤〉的形式應用。

而通常以〈標籤〉〈/標籤〉的成對的形式出現，也有單獨使用的〈標籤/〉。其中的 / ，都表示結束符號。

最常用的〈標籤〉包括以下例子：

<p>段落</p>

<h1>標題1</h1>

<a>超連結</a>

斷行<br/>

還有其他的標註語言，如：xml, shml…等，但網頁設計上仍以 HTML, xHTML應用最廣。

實用的HTML, xHTML介述，請閱讀HTML, xHTML精華篇。

HTML, xHTML 精華篇

Cascading Style Sheets, CSS: Presentation

層疊樣式表語言：視覺呈現

However, CSS (Cascading Style Sheets) is becoming a major tools to design webs along with HTML. HTML used to cover everything and would narrow down to define the "structure" (what are the objects and contents) whereas CSS define the "presentation" (how to display the objects and contents).

Many HTML tags have been declared as "Deprecated", the new era of web design has already arrived.

層疊樣式表(Cascading Style Sheets, CSS)，又稱串接樣式列表，也是由W3C定義和維護的標準，用來為HTML或XML等，增加視覺呈現效果的網頁語言，以.css為副檔名之檔案方式使用。

HTML Evolving History, Deprecated HTML Elements, CSS Basics

層疊樣式表設計精華篇與實作系列

HTML DOM, Document Object Model

文件物件模型與各種自動化 script 語言

DOM 是由 W3C 組織所建議推廣的自動化標準，是一個「抽象觀念」與「中間層規範」，它不需要您像寫 HTML 或 CSS 那樣去撰寫一個 .dom 檔案。

HTML5、CSS3、JavaScript 都有具體的語法 (Syntax) 與檔案 (.html, .css, .js)。
HTML 是「源代碼」。
DOM 是「記憶體中的活體」： 當瀏覽器讀取您的 HTML 後，會在電腦記憶體裡把它轉化成一個「樹狀模型」。

HTML 是建築圖紙（具體的紙張）。
DOM 是蓋好後的房子內部結構（抽象的空間關係）。
Scripts 是裝修工人，他們進場後，是根據「房子的空間（DOM）」來安裝電燈，而不是對著「圖紙（HTML）」安裝。

如何「看見」DOM？

雖然您不用「寫」它，但您每天都在「看」它。
在瀏覽器（Chrome 或 Edge）按 F12 開啟開發者工具。
切換到 「Elements (元素)」 面板。
這裡顯示的樹狀結構，就是 DOM。

注意： 這裡顯示的東西有時候跟您的 HTML 源代碼不一樣！如果 JavaScript 執行後動態刪除了一個段落，HTML 檔案沒變，但這裡的 DOM 樹 會少掉那一塊。

DOM 作為「介面規範」的具體存在

雖然不寫它，但開發者必須遵循它的 API (應用程式介面)。
當您在 Script 裡寫下 document.getElementById("bookmark") 時：
document 就是 DOM 的起點。
這個指令就是透過 DOM 規範 去尋找標記為 "bookmark" 的那個物件。

DOM 與 JavaScript 的關係

W3C 組織所建議推廣的標準，開始以 JavaScript 作為介面範例，用於網站和網頁的自動化功能，但不限於 JavaScript 。

W3C 在推廣 DOM 時，最震撼的功能就是「讓網頁動起來」，而要讓網頁動起來，唯一的方法就是透過 Script。
久而久之，大家就把 「讓網頁動起來的技術 (Script)」 與 「網頁的內部結構 (DOM)」 給綁在一起了。

為什麼 W3C 當初要用 Script 當例子？

在 1990 年代末期，Netscape 和 Microsoft 正在打「瀏覽器大戰」。兩家公司都發明了各自的「動態網頁技術」，但互不相容。
W3C 介入： 他們制定了 DOM Level 1，目的是要給出一套「標準的儀表板」。
教學策略： 為了證明這個儀表板好用，他們展示了「如何用 JavaScript 撥動指針（改標題、隱藏圖片）」。

這就像是一個車廠（W3C）發明了標準的方向盤連接裝置（DOM），為了展示它，他們請了一位賽車手（Script）來開車。結果大家看完表演，都以為「方向盤連接裝置」就叫做「賽車」。

鑑定 DOM 的「多語言」本質

其實，DOM 是獨立於語言之外的。 雖然 99% 的情況下我們用 JavaScript，但理論上您可以用 Python、Java 甚至 C++ 來操控 DOM。
JavaScript： 就像是常用的「繁體中文」說明書，用來操作 DOM。
DOM： 是那台機器（網頁）本身的邏輯結構。

DOM 的變遷：CSS 化

現代變遷方向：「DOM 是內容的結構，而 CSS 已經奪走了大部分 Script 曾經擁有的控制權。」
以前 (1998年)： 您可能需要寫一段 Script，透過 DOM 去計算 Banner 高度，然後手動偏移內容。
2026年後只要寫一行 CSS3 (scroll-padding-top)，瀏覽器會直接在底層修改 DOM 的捲動行為，完全不需要 Script 介入。

「無腳本 (No-Script)」思維

對於大量檔案的「網群」，最穩定的狀態是：
HTML5 提供完美的 DOM 樹狀結構。
CSS3 直接操作這個 DOM 的外觀與行為（如定錨、閃爍）。
Script 最好只用在 CSS 做不到的事情上（例如複雜的資料搜尋）。

參考連結

http://www.w3schools.com/jsref/default.asp

http://www.w3schools.com/jsref/dom_obj_event.asp  

http://www.w3schools.com/js/

以常用的 onmouseover event，應用舉例如下：

http://www.w3schools.com/jsref/event_onmouseover.asp

網站/網頁：自動化與互動設計系列

HTML Attributes vs. CSS/DOM Property

Attribute 特性和 Property 屬性的不同

許多中文都將 HTML 中的 Attribute 翻譯為「屬性」，而 CSS, DOM，又有 Property，也是翻譯為「屬性」。所以統雄老師特別將其中譯分開。

標註語言特性，就是各 HTML 元素的特別定義，譬如：

<p class="note">

其中 p 是 HTML 元素，而 class 就是 HTML Attributes 標註語言特性。

對初學者，可暫時將 Attribute 視為較基礎穩定的定義，而 Property 是較可連動的定義。

HTML Global Attributes 標註語言通用特性

標註語言通用特性，就是所有元素，都可以應用的 Global Attributes。

通用特性在歷次改版中變動很大，所以最新與完整的語法，還是要參考：

http://www.w3schools.com/tags/ref_standardattributes.asp

HTML Event Attributes 標註語言事件特性

標註語言事件特性 Event Attributes，就是在 DOM 中，以事件觸發行為的各種 Attributes。如滑鼠移動事件，觸發網頁產生的反應…等。

標註語言事件特性屬於較新的發展，預期未來可有很大成長與變動空間，所以最新與完整的語法，也是要參考：

http://www.w3schools.com/tags/ref_eventattributes.asp

ML and CSS Editor 建站與網頁製作軟體

It is time consuming to learn all languages and syntaxes. However, we will use a convenient editor instead of writing down all coding manually.

Dreamweaver

這是最早期的網站製作軟體，因是商業軟體，過去發生不利學生課外實作的問題。

Expression Web 最適免費網站建站與網頁製作教學軟體

微軟開發的網站建站與網頁製作軟體有2套：Expression Web 和 SharePoint，Expression Web 適合內容網站，而 SharePoint 偏向商務網站。兩者的介面與功能，有很大的重疊性。

Expression Web 在國外各軟體評鑑，和 Dreamweaver 同級，且其提供「微軟機器人 webbot」，在某些細節設計上，比 Dreamweaver 還要便利。

Expression Web 自2014後改為免費提供，由於本課程強調「工具獨立性」教學，創作知識與程序不受軟體限制，所以是最適的網站建站與網頁製作教學軟體。

免費下載

../../Tools/ Microsoft/Expression%20Web/

http://www.microsoft.com/en-us/download/details.aspx?id=36179

其他套件

http://www.microsoft.com/expression/chs/

限時版本

微軟也有提供限時版本的 Expression Web ，亦即商業試用有限期間，然後繼續使用必須付費。微軟喜歡搞語焉不詳、浪費使用者時間，不要誤載此連結的版本。

http://www.microsoft.com/zh-TW/download/details.aspx?id=26699 

SharePoint Designer

Microsoft replaced FrontPage, that was a popular tool, with SharePoint Designer in 2007.

SP keeps similar UI of FP and provides more functions to design dynamic pages and realize more interactive functions. The major change is the programming language from HTML into XHTML (Extensible Hypertext Markup Language), an application of Xml.

微軟提供的免費網站建站與網頁製作軟體，在SharePoint Designer 2007 前，可兼作內容網站或商務網站開發，而SharePoint Designer 2010 後，重點偏向商務網站開發。

SharePoint Designer 2007 前，可在本機開發， SharePoint Designer 2010 後，需配合遠端伺服器才能使用 。

Online Web Designer 其他線上網頁製作軟體

長期以來也多有「線上網頁製作軟體+網站空間」服務，不過在設計自由度、功能、與安全性上當然仍有限制。

更麻煩的是該服務機構的存活能力、與發展政策。譬如最老牌的 GeoCities 早已關門多年，其過程與臺灣部落格「無名小站」如出一轍，而且買家與倒店的都是 Yahoo。連 Google 也曾經大改過，會讓使用者被動因應而很吃力，甚至是困擾。

逮較知名的有以下：

Google Site

Wix

超文件標註語言精華篇

Expression Web/SharePoint Designer 網站開發軟體應用（正規版）

Expression Web/SharePoint Designer 網站開發軟體應用（簡捷版）

Popular Web Tools or Components 其他軟體或元件下載

SharePoint Designer 免費下載 合法正版

討論區模組 Bulletin Board

英文大小寫轉換器