Web Design Tools HTML, CSS, DOM/Java and S/W
網頁 3 大基本語言與編輯軟體

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

語言層次工具通常又包括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精華篇 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定義和維護的標準,用來為HTMLXML等,增加視覺呈現效果的網頁語言,以.css為副檔名之檔案方式使用。

TxAdvanced HTML Evolving History, Deprecated HTML Elements, CSS Basics

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


HTML DOM, Document Object Model

文件物件模型:自動化 script 語言

DOM 是由 W3C 組織所建議推廣的標準,基本上屬於JavaScript 的介面標準,用於網站和網頁的自動化功能。

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 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後改為免費提供,由於本課程強調「工具獨立性」教學,創作知識與程序不受軟體限制,所以是最適的網站建站與網頁製作教學軟體。

免費下載

http://tx.liberal.ntu.edu.tw/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 網站開發軟體應用(簡捷版)


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

SharePoint Designer 免費下載 合法正版SharePoint Designer 免費下載 合法正版
討論區模組討論區模組 Bulletin Board
英文大小寫轉換器英文大小寫轉換器

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page  
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題