微軟開發的網頁設計工具Expression Web，作為網頁設計工具FrontPage的替代品，在功能以及可擴展性方面都有了很大提升，它徹底解決了以前FrontPage會產生不標準網頁代碼的缺點，現在用Expression Web可以創建完全符合標準的網站，同時支持最新的CSS和層，具有強大的CSS功能，Expression Web支持asp.net2.0和XML，具有強大的資料庫操作功能。通過這些新特性，Expression Web擺脫了以前FrontPage給設計人員造成的一種「玩具」印象，逐步走進了專業網頁設計人員的視野。微軟網頁設計工具Expression Web快速入門

Expression Web啟動畫面

下面我們就來了解一下這個網頁設計工具的使用方法。

一、建立網站

Expression Web是一個強大的網頁編輯和網站設計工具，在編輯具體的網頁之前，我們首先要對自己的網站有一個總體的規劃，設計網站的結構，然後再進行具體的網頁編輯操作。在網站規劃方面，我們既可以自己手工操作，也可以用Expression Web提供的模板來自動創建。

（一）建立普通站點

單擊「文件→新建→網站」命令，打開「新建」網站對話框，在左邊的窗口中選擇「常規」，在右邊的窗口中顯示出要創建的網站類型。

只有一個網頁的網站：創建只有一個單獨的空白網頁的新網站。

空白網站：創建一個沒有內容的新網站。

單擊「指定新網站的位置」右邊的「瀏覽」按鈕，可以選擇網站保存的位置，最後單擊「確定」按鈕，一個新網站就建立好了。

（二）使用導入嚮導建立站點

這種方式可以創建一個網站，並將一個已建立的網站或某個文件（目錄）導入到當前網站中，它採用嚮導式的操作，一步步引導用戶完成網站的創建。

單擊「文件→新建→網站」命令，打開「新建」網站對話框，在左邊窗口中選擇「常規」，在右邊窗口中選擇「網站導入嚮導」，然後單擊「瀏覽」按鈕，選擇新網站的位置；單擊「確定」按鈕，出現「導入網站嚮導」對話框，用戶可以選擇導入文件的方式，有Http、Ftp、WebDAV、 FrontPage Server Extensions、文件系統五種方式，這裡我們選擇從本機上導入文件，所以選擇「文件系統」，然後單擊「瀏覽」按鈕選擇要導入的文件目錄，單擊兩次「進一步」按鈕，最後單擊「完成」，出現「本地網站」和「遠程網站」窗口，單擊「遠程網站」下部的「發布網站」按鈕，將遠程網站中的文件發布到本地網站中，在「文件夾列表」中就可以看到導入的文件內容。

（三）使用模板建立站點

Expression Web內置了多種站點模板，用戶可以非常方便地用它創建一個自己需要的網站。

單擊「文件→新建→網站」命令，打開「新建」網站對話框，在左邊窗口中選擇「模板」，在右邊窗口中列出了模板網站的類型，有個人、單位、小型企業，選中某種類型，就可以在右邊的預覽區查看它的外觀樣式，單擊「瀏覽」按鈕，選擇網站保存的位置，然後單擊「確定」按鈕，一個新網站就建好了。對模板中的各個頁面適當修改就可以變成自己的網站，非常簡單。如果用戶創建的是單位或個人的小型站點，用這種方法最方便快捷。

二、創建新網頁

單擊「文件→新建→網頁」命令，打開「新建網頁」對話框，Expression Web可以創建「常規」、「asp.net」、「 css布局」、「樣式表」、「框架網頁」4種類型的文件，每種文件又包含很多種類型，在左邊的窗口中選中一種類型，在中間的窗口中列出詳細的分類，右邊的窗口是預覽區，可以預覽一些網頁的外觀樣式，選中要創建的網頁類型，單擊「確定」按鈕即可。一般常用的文檔類型在「常規」分類中都可以找到。微軟網頁設計工具Expression Web快速入門

創建新網頁

另外，單擊工具欄「新建文檔」右邊的下拉按鈕，在彈出菜單中選擇「網頁」選項，也可以打開「新建網頁」對話框，當然也可以直接在彈出的菜單中選擇要創建的網頁類型，如HTML、ASPX、CSS。

可以通過以下方法隨時預覽編輯的網頁，注意在預覽前一定要先保存網頁。

方法一：單擊「文件→在瀏覽器中預覽」命令，然後在展開的子菜單中選擇瀏覽器和窗口大小。

方法二：單擊工具欄中的「預覽」按鈕，或者單擊按鈕旁的箭頭，在下拉框中選擇瀏覽器和窗口大小。

方法三：直接按F12鍵。

三、創建超鏈接

超鏈接既可以是文字也可以是圖片，既可以鏈接到網站內的網頁，也可以鏈接到其他的網站、文件、程序或電子郵件。

1、選中要建立超鏈接的文本或圖片，如果沒有選擇文本或圖片，則目標URL顯示為超鏈接文本。

2、單擊「插入→超鏈接」命令或工具欄中的「插入超鏈接」按鈕，彈出「插入超鏈接」對話框。

3、設置超鏈接的參數內容：

在「要顯示的文字」框中輸入超鏈接要顯示的文本內容。

單擊「屏幕提示」按鈕，在彈出的對話框中輸入屏幕提示文字，當你將滑鼠移到超鏈接上時將顯示該文字內容。

如果要鏈接到網站中的某個網頁，請在「當前文件夾」列表中選中一個網頁，如果要鏈接到外部網站，請在「地址」框中輸入網站的網址。

單擊「目標框架」，在彈出的窗口中可以設置網頁的打開方式，如果希望在新瀏覽窗口中打開超鏈接，請選擇「新建窗口」。

如果要鏈接到電子郵件地址，請選擇「電子郵件地址」，然後在右邊的窗口中輸入「電子郵件地址」和郵件主題。

4、設置完畢，單擊「確定」按鈕。

四、插入圖片

將游標移到網頁中要插入圖片的位置，單擊「插入→圖片→來自文件」命令或直接單擊工具欄中的「插入文件中的圖片」按鈕，打開「圖片」對話框，選中所需要的圖片文件，單擊「插入」按鈕，出現「輔助功能屬性」對話框，在「替代文本」框中，輸入在下載圖形、找不到圖形或網站訪問者將滑鼠移到圖形上時為圖形所顯示的文本，若要添加較詳細的說明，請單擊「瀏覽」按鈕，並選擇一個文件，再單擊「打開」按鈕，當然你也可以選擇不在「輔助功能屬性」對話框中輸入內容，單擊「確定」按鈕，圖片就插入到網頁中。

五、創建表格

在Expression Web中有兩種方法創建表格。

（1）使用工具按鈕插入表格

將插入點移到網頁中要插入表格的位置，單擊工具欄中的「插入表格」按鈕，彈出一個表格窗口，向右下方拖動滑鼠，表格框中就會顯示錶格的大小，表格大小滿足要求時單擊滑鼠就會在網頁中插入一張空表格。

（2）使用菜單命令輸入表格

將插入點移到網頁中要插入表格的位置，單擊「表格→插入表格」命令，出現「插入表格」對話框，輸入表格所需的「行數」和「列數」，然後在「布局」、「邊框」、「背景」中設置好表格的其他參數，單擊「確定」按鈕，一個表格就出現在網頁中。

六、創建框架網頁

框架網頁是一種特殊的網頁，它本身並不包含可見內容，它只是一個窗口，裡面包含多個框架，每個框架都可以顯示一個獨立的網頁，多個框架之間還可以設置超鏈接，這些框架的集合，就稱為框架網頁。

單擊「文件→新建→網頁」命令，打開「新建」網頁對話框，在「網頁」選項卡中單擊「框架網頁」，在右邊的列表中就可以看到程序內置的十種框架網頁模板以及預覽圖，選擇一種模板，單擊「確定」按鈕，就可以創建一個框架網頁。

新創建的框架網頁還沒有任何內容，用戶需要給每個框架來填充網頁內容，有兩種方法：

如果已經在網站中編輯了網頁，可以單擊框架中的「設置初始網頁」按鈕，打開「插入超鏈接」對話框，在文件列表中選中一個網頁文件，也可以直接在「地址」欄中輸入網址，單擊「確定」按鈕，就可以將網頁插入到框架中。

如果還沒有建立網頁，需要給框架新建網頁內容，請單擊框架中的「新建網頁」按鈕，開始新網頁的編輯。

七、創建樣式表

利用Expression Web可以非常方便地創建樣式表，用來設置網頁及其內容的格式。

（1）創建外部樣式表

單擊「文件→新建→CSS」命令，新建一個樣式表文件，然後單擊「應用樣式」任務窗格中的「新建樣式」按鈕，打開「新建樣式」對話框，在「選擇器」中選擇要定義的標記，在「定義位置」下拉列表中選擇「現有樣式表」，在下面的「類別」區設置好各項參數，單擊「確定」按鈕，一個樣式表就建好了，將它保存起來，以後就可以使用了。

（2）創建內部樣式表

首先打開要創建內部樣式表的網頁，然後單擊「應用樣式」任務窗格中的「新建樣式」按鈕，在「新建樣式」對話框的「定義位置」下拉菜單中，選擇「當前網頁」，在「選擇器」中選擇要定義的標記，同時在下面設置好各項參數，單擊「確定」按鈕，樣式表就自動插入到網頁中的<head></ head>標記之間，我們可以轉換到「代碼」視圖模式進行查看。

八、插入層

單擊「任務窗格→層」命令，將「層」任務窗格顯示在右下方的面板中，然後在網頁中，將游標移到要插入層的位置，單擊「插入→HTML→層」命令或在「層」任務窗格中單擊「插入層」按鈕，就可以在網頁中插入一個層。

也可以在「層」任務窗格中單擊「繪製層」按鈕，然後用滑鼠在網頁中拖動就可以畫出一個層。

九、添加動態網頁效果

為了使網頁充滿活力，富於變化和吸引力，我們往往需要給網頁添加上一些聲音、動畫、彈出窗口、網頁過渡效果等特效，在Expression Web中我們可以不用寫一句代碼，就能輕鬆實現這些特效。

1、添加互動式按鈕

將游標移到要添加按鈕的位置，單擊「插入→互動式按鈕」命令，打開「互動式按鈕」對話框，進行如下設置：

在「按鈕」選項卡的「按鈕」列表中，單擊選擇按鈕樣式，在「文本」框中，輸入要顯示在按鈕上的文本，單擊「鏈接」旁邊的「瀏覽」按鈕，在打開的「編輯超鏈接」對話框中找到並單擊希望鏈接到的文件、URL或電子郵件地址。

在「字體」選項卡上，可設置各種按鈕狀態下文本的字體、樣式、對齊方式及顏色。

在「圖像」選項卡上，可設置要創建的圖像的大小以及是否創建對應於各種按鈕狀態的圖像。

各種參數設置完畢，單擊「確定」按鈕，一個互動式按鈕就會出現在網頁中。

2、添加網頁過渡效果

Expression Web可以通過動態HTML技術讓網頁之間的轉換變成動態的，當用戶瀏覽網站時，從一個網頁切換到另一個網頁將出現淡入、淡出、擦除等不同的效果。

向網頁添加過渡效果的具體操作是：打開要添加過渡效果的網頁，單擊「格式→網頁過渡」命令，打開「網頁過渡」對話框，在「事件」下拉菜單中選擇要應用效果的事件，在「持續時間」中輸入過渡效果持續的時間，在「過渡效果」列表中單擊所需的過渡效果類型，最後單擊「確定」按鈕。

3、向頁面元素添加行為

我們可以對整個頁面、圖像、文字、鏈接或者頁面中的一個或多個元素添加行為，具體操作如下：

首先單擊「格式→行為」命令，在右下角的面板中打開「行為」任務窗格，然後在網頁中選中要添加行為的網頁元素，如文本或圖形，在「行為」任務窗格中，單擊「插入」按鈕，彈出下拉菜單，單擊所需的操作，彈出設置對話框，對於不同的操作，對話框的內容不同，設置完畢，單擊「確定」按鈕。若要選擇不同的事件，請在「事件」之下，單擊默認事件右邊的下拉箭頭，在彈出的菜單中選中所需的事件即可。