2011年8月4日 星期四

Expression Web 4 升級 SP2 後的變革 - 支援 HTML5 與搭配 CSS3+jQuery

這是一篇我幫台灣微軟官方撰寫的Expression軟體系列文章之一,主要是講述ExpressionWeb4更新到Service Pack2之後,出現了不少令人驚豔的新功能,操作上也更為穩定,本文將介紹使用最新的HTML5新結構標籤加上原有標籤,結合部分CSS3功能與jQuery,構成新型態的網頁編排版面(支援Internet Explorer9.0以及其他廠牌新版瀏覽器)。除了有刊載在Microsoft Expression官網之外,也同步放在此部落格上供您瀏覽參考!

您可以到 http://www.microsoft.com/downloads/zh-tw/details.aspx?familyid=87d98075-a40b-40b8-86bc-38e7a7606ca4&displaylang=zh-tw ,點選下載鈕,下載WebSP2_Trial_zh-Hant.exe檔案完成後,滑鼠左鍵點選此檔2下(請先關閉ExpressionWeb),以進行更新安裝。

1

本範例相關的檔案,您可以點此下載本範例,以方便您做練習對照用途!

更新完成後,開啟ExpressionWeb,選選功能表的「工具」/「網頁編輯器選項」。
2

在「製作」的頁面標籤裡,請將「文件類型宣告」,挑選成「HTML5」(次要結構描述可維持原有設定不挑選),CSS「結構描述版本」,請挑選成「CSS3 draft」,完成後請按下「確定」鈕。
3

選擇功能表上的「檔案」/「新增」/「頁面」,在「一般」裡,挑選「HTML」,按下「確定」鈕,請將檔案命名成「default.html」。
4

切換到「程式碼」檢視模式,可以看到產生了HTML5的基礎文件標籤結構。
5

下圖為原本ExpressionWeb預設產生的XHTML 1.0 Transitional模式的文件標籤架構,您可以跟上圖比較一下標籤間的差異性(HTML5解構語法更為精簡)。
6

接著請在功能表上的「檔案」/「新增」/「頁面」,在「一般」裡,挑選「CSS」,按下「確定」鈕,請將檔案命名成「page.css」。
7

在「default.html」頁面上,點選功能表上的「格式」/「CSS樣式」/「附加樣式表」。
8

按下「瀏覽」鈕,挑選到page.css,選擇附加至「本頁」,附加為「連結」,按下「確定」鈕。
9

點選功能表上的「面板」/「程式碼片段」,此為SP2新增的面板功能。
10

切換到「程式碼」模式,將<meta content="text/html; charset=utf-8" http-equiv="Content-Type">這行反白選取,點選「程式碼片段」裡的「HTML」/「HTML5 utf-8 meta」,改成更精簡的<meta charset="utf-8">寫法。
11

接著我們要擴充「程式碼片段」的功能,請點選 http://gallery.expression.microsoft.com/HTML5Snippets ,按下此網頁裡的「DOWNLOAD CODE SNIPPET」鈕。
12

把下載好的「HTML5.zip」檔案解壓縮,將裡面的「Layout」與「Microdata」兩個目錄,按下滑鼠右鍵選擇「複製」。
13

將兩個目錄「貼上」到底下位置(視您使用的Windows作業系統而不同):
Windows XP:
C:\Documents and Settings\[your windows user name]\Application Data\Microsoft\Expression\Web 4\mySnippets
Windows Vista or Windows 7:
C:\Users\[your windows username]\AppData\Roaming\Microsoft\Expression\Web 4\mySnippets
14

回到Expression Web裡,在「程式碼片段」中,按下滑鼠右鍵,選擇「重新整理」。
15

會發現多了「Layout」與「Microdata」兩個選項,請再點選位於右上方的「選項」/「新增程式碼片段」。
16

例如我們要新增一個HTML5的新標籤「aside」,並輸入標籤語法後,按下「確定」鈕。
17

接著請點選功能表上的「面板」,勾選「管理樣式」與「工具箱」。
18

您仍須學習理解CSS幾種主要選取器的基礎觀念,本範例會用到「id選取器」、「class選取器」、「HTML標籤選取器」。
19

本範例即將設計規劃的網頁版面區域如下,除了最外面一層用傳統的div標籤包覆之外,其餘區域皆採用HTML5新標籤構成。
20

在「工具箱」/「HTML」/「標籤」裡,在<div>標籤上按著滑鼠左鍵不放,拖曳到程式碼裡的<body>標籤下。
21

在「分割」模式裡,將<div></div>標籤反白選取,在「設計」模式頁面裡,將滑鼠左鍵點選一下,「管理樣式」裡的「新樣式」才會變成可點選狀態。
22

因為希望此<div>標籤是包含整個<body>標籤的內容範圍,且確定只有此處僅有一個區域(名稱可為唯一值不需重複),因此適合用id選取器,請在選取器裡打上「#body-all」,定義於「現有樣式表」,勾選「套用新樣式到文件選取範圍」,並將URL選擇成「page.css」,在「類別」/「位置」裡,將「width」設定成寬「600」像素。
23

在「類別」/「方塊」裡,取消勾選「margin」的全部相同,將「right」與「left」設定成寬「auto」,按下「確定」鈕,如此我們就製作了一個寬600像素且會置中對齊的區域。
24

請將滑鼠游標至於<div>與</div>的中間,將「程式碼片段」/「Layout」裡的「Header」,使用滑鼠左鍵點選兩下。
25

一樣將<header>與</header>標籤反白選取,在「設計」模式頁面裡,將滑鼠左鍵點選一下,再點選「管理樣式」裡的「新樣式」。
26

因為<header>標籤未來在版面上仍有可能重複運用到,所以若是要設定此標籤樣式,最好使用class選取器,選取器名稱設定為「.header-style1」,定義於「現有樣式表」,勾選「套用新樣式到文件選取範圍」,並將URL選擇成「page.css」,在「類別」/「位置」裡,將「height」設定成高「150」像素。
27

在「背景」裡,將「background-color」設定色彩為「#D27E00」,「background-image」則按下「瀏覽」鈕,選擇「headerbg1.png」的背景圖,此背景圖為事先製作的png去背圖檔格式。
28

在「框線半徑」裡,勾選「全部相同」,輸入「20」像素,按下「確定」鈕,此為CSS3的新屬性,可以不用製作圓邊圖檔而產生圓角矩形樣式。
29

可按下「預覽」鈕,或直接按下鍵盤上的「F12」鈕,進行網頁瀏覽,但要注意的是,本範例必須由Internet Explorer9.0以後版本方可正常顯示。
30

過來要設計選單區域,我們改用IntelliSense來做講解說明,請將滑鼠游標插入到</header>標籤後,按下鍵盤上的「Shift」鍵與鍵盤上的「<」,,出現IntelliSense標籤清單後,選擇「nav」標籤。
31

將<nav>與</nav>標籤反白選取,點選「管理樣式」/「新樣式」。
32

選取器輸入「.nav-style1」,定義於「現有樣式表」,勾選「套用新樣式到文件選取範圍」,並將URL選擇成「page.css」,在「類別」/「位置」裡,將「width」設定成寬「130」像素。
33

因為中間區塊總共需要並排3個區域,所以在「版面位置」裡的「float」,必須選擇成「left」靠左對齊。
34

請依照如下圖類別裡的「背景」、「框線半徑」、「方框」,分別選擇或輸入相關設定。
35

請在「程式碼清單」/「Layout」(或是使用「IntelliSense」輸入),於「程式碼」模式裡,在</nav>標籤後,輸入<article>標籤,將<article>與</article>標籤反白選取,點選「管理樣式」/「新樣式」,選取器輸入「.article-style1」,定義於「現有樣式表」,勾選「套用新樣式到文件選取範圍」,並將URL選擇成「page.css」,在「類別」/「位置」裡,將「width」設定成寬「250」像素。
36

請依照如下圖類別裡的「版面配置」、「背景」、「框線半徑」、「方框」,分別選擇或輸入相關設定。
37

請在「程式碼清單」/「Layout」(或是使用「IntelliSense」輸入),於「程式碼」模式裡,在</article>標籤後,輸入<aside>標籤,將<aside>與</aside>標籤反白選取,點選「管理樣式」/「新樣式」,選取器輸入「.aside-style1」,定義於「現有樣式表」,勾選「套用新樣式到文件選取範圍」,並將URL選擇成「page.css」,在「類別」/「位置」裡,將「width」設定成寬「100」像素。
38

請依照如下圖類別裡的「版面配置」、「背景」、「框線半徑」、「方框」,分別選擇或輸入相關設定。
39

請在「程式碼清單」/「Layout」(或是使用「IntelliSense」輸入),於「程式碼」模式裡,在</aside>標籤後,輸入<footer>標籤,將<footer>與</footer>標籤反白選取,點選「管理樣式」/「新樣式」,選取器輸入「.footer-style1」,定義於「現有樣式表」,勾選「套用新樣式到文件選取範圍」,並將URL選擇成「page.css」,在「類別」/「位置」裡,將「height」設定成高「60」像素。
40

特別要注意的是,因為<footer>標籤並非與<nav>、<article>、<aside>三個標籤並排在一起,而是另外獨立於下方區域,所以必須在「版面配置」裡,將「clear」設定成「both」。
41

請依照如下圖類別裡的「背景」、「框線半徑」、「方框」,分別選擇或輸入相關設定。
42

請在<footer>標籤後,放置一個<address>標籤,此標籤在HTML5裡的定義,是用來提供聯絡人資訊,所以屆時出現在網頁時,字體會自動以斜體來表示。
43

請在<address>標籤裡,輸入「若有問題請聯絡我」的文字,回到「設計」模式,將「聯絡我」這三個字反白選取,選擇功能表上的「插入」/「超連結」。
44

由於希望此超連結是E-Mail型態,所以左方請選擇「電子郵件地址」,並在右方的「電子郵件地址」與「主旨」裡,分別輸入您的E-Mail與主旨文字,按下「確定」鈕。
45

請將<address>與</address>標籤反白選取,點選「管理樣式」/「新樣式」。
46

在選取器裡選擇「address」,此型態為HTML標籤選取器。
47

請參照如下圖內的設定,定義於「現有樣式表」,並將URL選擇成「page.css」,在「字型」/「color」裡,輸入「#008000」。
48

由於希望此標籤裡的字為置中對齊,請將「區塊」/「test-align」設定成「center」。
49

本範例我們運用了三種選取器,下圖為在「管理樣式」裡使用的對照,請您務必確認是否顯示的圖示正確,這是很基本但重要的觀念。
50

完成的版面備置如下圖所示,但目前有個小缺點,就是在中間區域的選單區<nav>、文章內容區<article>、側邊廣告區<aside>這三個標籤,因為內容數量多寡不一,在文章內容區裡的字數較多,造成選單區與側邊廣告區往下的範圍,沒辦法延伸跟文章內容區下緣切齊。
51

針對這個問題,我們可以採用jQuery做修正,請切換到「程式碼」模式,將滑鼠游標插入到<meta>標籤下,選擇「程式碼片段」/「jQuery」/「一般」/「jQuery 指令碼參照 - MS CDN」。
52

筆者建議您,在瀏覽器上輸入「http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js」,會出現如下畫面,請選擇「儲存」/「另存新檔」,請將「jquery-1.5.2.min.js」儲存到您目前的網站目錄下。
53

回到Expression Web裡,請將「程式碼」模式裡的「http://ajax.aspnetcdn.com/ajax/jQuery/」網址路徑移除,讓script src裡僅剩下「jquery-1.5.2.min.js」的檔名,可以在「資料夾清單」裡按下鍵盤上的「F5」重新整理後,看到之前儲存放入的「jquery-1.5.2.min.js」,這樣做的好處是,未來不必擔心該網址的檔案被移除(或是您測試時無法連結網路),而造成您的網頁顯示有問題,而且您也才能夠針對此檔進行編修。
備註:「資料夾清單」裡點選檔案時,會出現此檔案資訊(若為圖檔則顯示縮圖),亦為SP2更新後之新功能,但此功能僅支援Windows Vista與7。
54

請開啟「jquery-1.5.2.min.js」檔案,在最後面輸入jQuery程式碼(請注意,若您命名的class名稱與本範例不同時,則需要自行修改部分程式碼內參數):
$(function(){
$(".nav-style1, .article-style1, .aside-style1").css("height", Math.max($(".nav-style1").height(), $(".article-style1").height(), $(".aside-style1").height()));
});
55

完成上述jQuery程式碼輸入後,請儲存「jquery-1.5.2.min.js」檔案,請瀏覽「default.html」網頁,即會呈現如下圖所示,選單區、文章內容區、側邊廣告區的範圍下緣都會自動延伸切齊。
56

網頁區塊版型完成後,您可以點選功能表上的「檔案」/「另存新檔」,在「存檔類型」裡進行挑選,若是要使用一般傳統無程式資料庫的網頁,請選擇「動態網站範本(*.dwt)」,若是要搭配ASP,NET程式資料庫的網頁運用,則需選擇儲存成「主版頁面(*.master)」。
57

本範例相關的檔案,您可以點此下載本範例,以方便您做練習對照用途!


5 意見:

romeo08001 提到...

老師您好
請問您的expression web 4在原始碼模式時,上下滾動視窗或是全選複製貼上,又或是篇寫修改語法時,會很頓很慢嗎?
我是Win8系統,expression web 4每次在原始碼模式時,都會有上述狀況
電腦規格不差,使用DW CS6都很順...

romeo08001 提到...

老師請問expression web 4的原始碼模式,很慢很頓,有辦法改善嗎?
電腦硬體規格不差,跑DW CS6都很順

創意眼 提到...

由於每人的電腦環境不盡相同,建議先確認以下幾點:
1.作業系統的Service Pack更新修補到最新
2.expression web Service Pack更新修補到最新
3.更新.net framework到最新版本

Sean 提到...

Su 先生好,您提到的 HTML5.zip,微軟已不提供了,你可以在這裡提供下載嗎?謝謝。

創意眼 提到...

抱歉!這個檔案我這邊也沒有備份耶~!

張貼留言

若對於本篇文章有任何批評指教或鼓勵建議,歡迎您留言讓我知道...