|
| 一.關於 CSS 樣式表 |
|
| HTML 雖為網頁撰寫的主要標記語言，但早期的 HTML 功能薄弱，無法滿足使用者對文字控制及版面編輯的諸多需求。全球資訊網協會
(World Wide Web Consortium, W3C) 遂公佈「共用樣式表 (cascading style
sheets, CSS)」，以擴充 HTML 的功能，增加許多文字及版面的變化，並可有效的管理網站。
1.CSS 樣式表的優點如下：
可以設定所有元件 (object) 的變化，包括文字、圖片、按鈕、視窗等 。
可以重新定義所有的 HTML 標記，以符合個別網站的需求。
可以建立共同樣式指令，在不同的物件套用相同的樣式設定。
可以製作個人化的的樣式設定檔案，以統一更新網站內的各網頁變化。
2.樣式表類別：
標記加註式 (in-line)：如果只有一個 HTML 標記需要設定樣式，則可在該標記內，加上屬性 style="CSS語法"，則可個別修訂樣式。
網頁內嵌式 (embedded)：在 HTML 文件的 <head> </head> 之間，以 <style> </style> 來定義共同樣式，使整個網頁使用同一樣式。
外部設定式 (external)：由於一個網站由許多網頁所組成，最好是可以統一樣式，以免看得眼花繚亂，失去瀏覽的重點。 而且如果每一網頁均個別做樣式設定，萬一將來要修改時，耗費時日，且很容易挂一漏萬，因此可使每個網頁均連結到同一個 .css 的純文字檔，以設定整個網站的樣式。
3.CSS類別選取器：
視窗/CSS樣式 (SHIFT+F11)
A.類別：可套用於任何標籤,並可自行設定與命名。
B.標籤：可以依指定標籤進行指定。
C.進階：為連結4種事件的樣式表。
 
4.套用CSS樣式的基本方法：將滑鼠游標置於文字或段落中
- 於屬性列的格式或樣式下拉式選單中選擇(例:text1)
- 於標籤路徑中按下右鍵 / 設定類別(例:text1)
- 於標籤檢視窗中,找到CSS輔助功能中的class輸入樣式名稱(例:text1)
- 按下右鍵/css樣式,找到樣式名稱(例:text1)
|
| |
|
二.關於Spry framework |
|
Spry 這個 framework 主要就是提供一套 JavaScript 函式庫，最主要提供的功能就是 AJAX。不過不同於 Flex 的部份，即是 Spry 是用 HTML 來寫元件 (view)，用 JavaScript 寫程式 (control)，以及 XML data (model)，所以開發者只需要會使用 HTML、CSS及 JavaScript 便可以開發 Web application，而且許多瀏覽器都可以直接支援。
我認為 Spry 這種概念的 framework 應該會愈來愈流行（像是 Microsoft 提出的 HTML Application，或是 Google 所開發的 Web Toolkit），畢竟愈來愈多的使用者不太喜歡另外裝外掛程式…
對這兩個 framework 有興趣的朋友可以到它們各自的網頁上看看 demo，體驗一下由兩種 framework 所開發出來 web application 的差異。 |
何謂 AJAX？
AJAX 是 Asynchronous JavaScript And XML 的簡寫，它的設計理念非常類似 Dynamic HTML（或者 DHTML），主要的目的在於提高網頁的互動性（interactivity），速度（speed），以及可用性（usability）。想想看，如果我們能使一個網頁的互動方式可以達到類似 Microsoft Office 的境界，那麼網頁的可用性可以達到另一個層次。
其實，這個概念並不是很新，只是這樣的技巧被大量的應用於 Google 的網頁之後，如 Gmail、Google Maps、和 Google Suggest 等，才被重視，而第一個提出 AJAX 這個名詞的就是 Jesse James Garrett。利用類似技巧的公司還有 Writely、Kiko 等。這樣的概念，開始激發人們對於網頁是否會取代 desktop applications 進行討論，而又進一步的延伸出 What is Web 2.0 的討論。
AJAX 也不是一項單獨的技術，它是由一堆現有的技術所組成，它的主要組成技術有：
- XHTML（或者 HTML）加上 CSS 來作為資料的呈現。
- 利用 DOM 以及 Javascript 來進行存取資料（大多為 XML）的處理。
- 利用 XMLHttpRequest 物件與遠端的 web server 進行非同步的資料交換。
|
 Spry選單列：範例 |
|
 Spry標籤面板：範例 |
|
 Spry摺疊式：範例 |
|
 Spry可收合面板：範例 |
|
| |
|
| 二.Spry效果 視窗 / 行為 (Shift+F4) 按下+號 效果 範例 |
|
| |
| |
|
|
