Microsoft Expression Web 快速指南

Microsoft Expression Web - 概述

Microsoft Expression Web 是一款功能齊全的專業工具，用於設計、開發和釋出符合 Web 標準的功能豐富的網站。您可以使用 Expression Web 建立網頁和站點，以便在您的計算機和託管帳戶之間傳輸檔案。

Expression Web 可以使用 HTML5、CSS 3、ASP.NET、PHP、JavaScript、XML+XSLT 和 XHTML 設計和開發網頁。

Expression Web 4 需要 .NET Framework 4.0 和 Silverlight 4.0 才能安裝和執行。

Microsoft Expression Web - 歷史

Microsoft Expression Web - 歷史 Microsoft 於 2006 年 5 月 14 日釋出了 Expression Web 的第一個社群技術預覽版 (CTP)。

Microsoft Expression Web 4 於 2010 年 6 月 7 日釋出。

它增加了 HTML 外掛選項，並訪問基於 Web 的功能，用於在無法安裝在使用者系統上的瀏覽器（例如 Mac OS X 或 Linux 瀏覽器）上測試頁面。
它還提供了一個 SEO 檢查器，您可以使用它根據獲得最高搜尋引擎排名的最佳實踐來分析已建立的網站。

Expression Web 服務包

Expression Web 服務包 Expression Web 4 Service Pack 1 於 2011 年 3 月釋出，增加了對 HTML5 和 CSS 的 IntelliSense 支援。

Expression Web 4 Service Pack 2 於 2011 年 7 月釋出。它修復了許多問題，並引入了新的功能，例如：

jQuery IntelliSense 支援
用於管理程式碼片段的面板
互動式快照面板
程式碼檢視中的註釋/取消註釋功能，以及
工作區和工具欄自定義。

2012 年 12 月，Microsoft 宣佈 Expression Studio 將不再是獨立產品。Expression Blend 正在整合到 Visual Studio 中，而 Expression Web 和 Expression Design 將成為免費產品。

系統要求

要使用 Microsoft Expression Web 建立網站，您的計算機應滿足以下要求：

您至少應該擁有安裝了 Service Pack 3 的 Windows XP 或最新的作業系統。
您應該擁有 1 GHz 或更快處理器的 PC。
您的 PC 應該擁有 1 GB 或更多 RAM。
您的 PC 應該擁有 2 GB 或更多可用硬碟空間。
您應該擁有 .NET Framework 4.0 和 Silverlight 4.0。
您的 PC 應該支援 Microsoft DirectX® 9.0 圖形。
您應該擁有 DVD 相容驅動器。
您應該擁有 1024 × 768 或更高解析度的顯示器，具有 24 位顏色。
某些產品功能需要 Firefox 3.0 或更高版本，Internet Explorer 8。因此您應該擁有相同版本。

實際要求和產品功能可能會因您的系統配置和作業系統而異。

環境設定

Microsoft 提供 Microsoft Expression Web 的免費版本，可以從 Microsoft Expression Web 下載下載

安裝

步驟 1 - 在安裝 Expression Web 之前，您需要安裝 .NET Framework 4.0。

步驟 2 - 下載完成後，執行安裝程式。將顯示以下對話方塊。

步驟 3 - 單擊“接受”按鈕。

步驟 4 - 選擇“是”單選按鈕，然後單擊“下一步”。

步驟 5 - 您也可以選擇其他安裝位置。選擇位置，然後單擊“安裝”按鈕。

安裝過程開始。

安裝完成後，您將看到以下對話方塊。

步驟 6 - 單擊“完成”繼續。

Microsoft Expression Web - 新建網站

在上一章中，我們已經安裝了 Microsoft Expression Web，現在我們可以開始使用它了。在本章中，我們將學習如何從頭開始建立新的網站。

建立網站

要建立新的網站，讓我們開啟 Microsoft Expression Web。

接下來，您需要按照以下步驟操作。

步驟 1 - 選擇站點 → 新建站點…選單選項。

步驟 2 - 它將開啟以下對話方塊，您可以從中建立或匯入不同型別的網站。

步驟 3 - 為簡單起見，讓我們選擇常規 → 單頁站點。

指定位置，或者您可以瀏覽到要建立新網站的位置。
在名稱欄位中鍵入您的網站名稱，然後單擊“確定”。

步驟 4 - 新網站將建立一個名為default.htm的頁面。讓我們右鍵單擊該檔案並單擊“重新命名”選項，將其重新命名為index.html。

步驟 5 - Expression Web 中使用的預設doctype為：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">

只需切換到程式碼檢視即可檢視。

您可以從工具 → 頁面編輯器選項 → 創作更改 doctype。

步驟 6 - 現在，讓我們在body標記內新增<h1>標記和一些文字，如下面的程式碼所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml"> 
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
   </head> 
   
   <body> 
      <h1> 
         This my first Web page 
      </h1> 
   </body> 
</html>

步驟 7 - 要在瀏覽器中檢視我們的網頁，讓我們轉到“檔案”選單並選擇在瀏覽器中預覽 → 任何瀏覽器，例如 Internet Explorer。

它將在 Internet Explorer 中開啟我們的網頁。

Microsoft Expression Web - 空白網頁

正如我們已經建立了我們的網站，現在我們需要建立我們的主頁。在上一章中，我們建立了一個單頁網站，並且我們的主頁當時由 Expression Web 自動建立。因此，如果您建立了一個空白網站，則需要為您的站點建立主頁。

Microsoft Expression Web 可以建立以下型別的頁面：

HTML
ASPX
ASP
PHP
CSS
主頁面
動態網頁模板
JavaScript
XML
文字檔案

在本章中，我們將建立一個 HTML 頁面及其相應的樣式表。

建立空白頁面

要建立空白頁面，您可以簡單地轉到“檔案”選單並選擇新建 → 頁面…選單選項。

在新對話方塊中，您可以建立不同型別的空白頁面，例如 HTML 頁面、ASPX 頁面、CSS 頁面等，然後單擊“確定”。

如您所見，Microsoft Expression Web 已經添加了預設程式碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <title>Untitled 1</title> 
   </head>  

   <body> 
      <h1> 
         This is a blank web page 
      </h1> 
   </body> 
</html>

如您所見，您新建立的頁面具有檔名Untitled_1.html或Untitled_1.htm。您需要按 Ctrl + S 儲存頁面並指定名稱。

由於我們的網站已經包含一個index.html頁面，因此我們不需要另一個頁面。但是，如果您建立了一個空網站，則將此頁面命名為index.html。

要檢視瀏覽器中的網頁，讓我們轉到“檔案”選單並選擇在瀏覽器中預覽 → 任何瀏覽器，例如 Internet Explorer。

建立 CSS 頁面

讓我們引導您完成建立 CSS 頁面的分步過程。

步驟 1 - 要建立 CSS 頁面，請轉到“檔案”選單並選擇新建 → 頁面…選單選項。

步驟 2 - 選擇常規 → CSS，然後單擊“確定”。

步驟 3 - 儲存頁面併為樣式表鍵入名稱。

步驟 4 - 單擊儲存按鈕。

步驟 5 - 現在，讓我們轉到 index.html 頁面。

步驟 6 - 在管理樣式面板中，單擊附加樣式表。

步驟 7 - 瀏覽到您的樣式表，從“附加到”中選擇“當前頁面”，從“附加方式”中選擇“連結”，然後單擊“確定”。

步驟 8 - 現在，您將看到 index.html 頁面中自動添加了一條新行。

<link href = "sample.css" rel = "stylesheet" type = "text/css" />

步驟 9 - body 元素定義文件的主體。要設定<body>標記的樣式，我們需要建立一個新的樣式。首先，在“設計檢視”中選擇 body 標記，然後單擊“應用樣式”面板或“管理樣式”面板中的“新建樣式…”，這將開啟“新建樣式”對話方塊。

在這裡，您可以為您的樣式定義不同的選項。第一步是從“選擇器”下拉列表中選擇 body，然後從“在其中定義”下拉列表中選擇“現有樣式表”。

步驟 10 - 從 URL 中選擇sample.css檔案。在左側，有一個類別列表，如字型、背景等，目前突出顯示的是字型。根據您的要求設定字型相關資訊，如上圖所示，然後單擊“確定”。

步驟 11 - 現在您可以在設計檢視中看到背景顏色和字型已更改為我們選擇的顏色。現在，如果您開啟 sample.css 檔案，您將看到所有資訊都自動儲存在 CSS 檔案中。

讓我們在瀏覽器中預覽我們的網頁。您會觀察到樣式是從 CSS 檔案應用的。

Microsoft Expression Web - 網頁佈局

在本章中，我們將介紹網頁的基本佈局。在建立網頁佈局之前，我們需要考慮我們的內容，然後設計我們如何呈現該內容，因為這是將在我們的網站上顯示的內容。

我們如何呈現我們的內容取決於我們，以便我們的觀眾找到我們的網站，然後繼續檢視它。佈局可能包括頂部的公司徽標或橫幅、導航選單、可能包含多列的內容區域以及頁面底部的頁尾。

以前，開發人員使用表格來實現這種外觀。表格建立用於建立行和列的盒子組。現在，網頁設計師使用<div>s來形成盒子，並使用 CSS 來將這些盒子放置在頁面上。

<div> 標記

以下是<div>標記的一些功能。

<div>標記定義 HTML 文件中的一個分割槽或一個部分，並使管理、設定樣式和操作這些分割槽或部分變得容易。
它用於對塊元素進行分組，以便使用 CSS 對其進行格式化。
瀏覽器通常會在 div 元素之前和之後放置換行符。
<div>標記是塊級元素。
<div>標記幾乎可以包含任何其他元素。
<div>標記不能位於<p>標記內。

示例

讓我們來看一個簡單的示例，在這個示例中，我們將使用<div> </div>標記來建立各種盒子和樣式規則。

步驟 1 - 開啟 Expression Web，然後開啟我們在上一章中建立的index.html頁面。

步驟 2 - 如上圖所示，預設情況下突出顯示程式碼檢視。您可以在程式碼檢視或設計檢視中工作，但您也可以看到拆分檢視，它將開啟程式碼檢視和設計檢視。因此，讓我們選擇拆分檢視選項。

步驟 3 − body 元素定義文件的主體。要設定 <body> 標籤的樣式，我們需要建立一個新的樣式。首先在設計檢視中選擇 body 標籤，然後單擊“應用樣式”面板中的新建樣式…，這將開啟“新建樣式”對話方塊。在這裡，您可以為您的樣式定義不同的選項。

步驟 4 − 第一步是從選擇器下拉列表中選擇body，然後從“定義於”下拉列表中選擇現有樣式表。從 URL 中，選擇我們在上一章中建立的 CSS 檔案。

在左側，有一個類別列表，例如字型、背景等，當前字型已突出顯示。根據您的要求設定與字型相關的資訊，如上圖所示。

步驟 5 − 選擇您想要的背景顏色。您還可以使用瀏覽器按鈕選擇背景影像。完成背景設定後，如果需要，可以定義邊框。

步驟 6 − 讓我們為邊框選擇雙線選項，並從下拉列表中選擇寬度和顏色。完成樣式設定後，單擊“確定”。

步驟 7 − 現在您可以在設計檢視中看到背景顏色已更改為我們選擇的顏色。如果您開啟 sample.css 檔案，您會看到所有資訊都自動儲存在 CSS 檔案中。

步驟 8 − 再次轉到index.html頁面，從“工具箱”面板拖動<div>並將其放在開啟的頁面上。

步驟 9 − 在程式碼檢視上方，您將看到<body>和<div>標籤，單擊<div>標籤，然後在“應用樣式”面板中單擊“新建樣式…”，這將開啟“新建樣式”對話方塊。

在選擇器欄位中鍵入“#container”。井號 # 是 ID 選擇器。“定義於”下拉列表中，選擇現有樣式表，並選中“將新樣式應用於文件選擇”選項。轉到“背景”類別。

步驟 10 − 選擇背景顏色，讓我們選擇白色，然後轉到“邊框”類別。

步驟 11 − 定義填充和邊距，然後轉到位置類別

步驟 12 − 將寬度設定為 90%。但是，不要指定高度，因為我們希望在輸入內容時容器可以擴充套件。單擊“確定”按鈕。

同樣，讓我們為頁首、頂部導航、左側導航、主要內容和頁尾新增樣式。

sample.css

以下是新增上述所有樣式後sample.css樣式表中的程式碼。

body { 
   font-family: Calibri; 
   font-size: medium; 
   font-weight: normal; 
   font-style: normal; 
   font-variant: normal; 
   text-transform: none; 
   color: #0000FF; 
   background-color: #CCFFFF; 
   background-image: none; 
   border: medium double #FF0000; 
} 

#container { 
   background-color: #FFFFFF; 
   padding: 8px; 
   margin: 8px; 
   width: 90%; 
} 

#header {  
   background-color: #54B431;   
   background-repeat: no-repeat;  
   background-position: right center;  
   height: 170px;  
} 

#top-nav {  
   height: 50px;  
   border-top: solid medium #006600;  
   border-bottom: solid medium #006600;  
   background-color: #FFFFFF;  
}  

#left-nav {  
   margin: 20px 0px 10px 0px;  
   width: 180px;  
   float: left;  
   border: thin dashed #006600;  
} 

#main-content {  
   margin: 20px 10px 10px 200px;  
   background-color: #CCFFCC; 
} 

#footer {  
   border-top: 2px solid #006600;  
   clear: both;  
   padding: 10px 0px;  
   text-align: center;  
 }

index.html

以下是新增所有 <div> 標籤後 index.html 檔案中的程式碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <style type = "text/css"></style> 
      <link href = "sample.css" rel = "stylesheet" type = "text/css" /> 
   </head>  

   <body> 
      <div id = "container"> 
         <div id = "header"></div> 
         <div id = "top-nav"></div> 
         <div id = "left-nav"></div> 
         <div id = "main-content"></div> 
         <div id = "footer"></div> 
      </div> 
   </body> 
</html>

輸出

設計檢視中的頁面佈局將如下圖所示。

Microsoft Expression Web - HTML 佈局

在本章中，我們將學習另一種設計頁面佈局的方法。在上一章中，我們使用了樣式表將樣式應用於頁首、頁尾等，但是您也可以在 HTML 頁面本身中指定樣式，而無需使用額外的樣式表。

這不是推薦的設計佈局的方式，但是為了理解的目的，我們將在本章中介紹此技術。請嘗試按照以下步驟操作。

步驟 1 − 讓我們新增一個 HTML 頁面並將其命名為layoutdemo.html

步驟 2 − 現在從工具箱中新增<div>標籤。

步驟 3 − 在應用樣式面板中，單擊新建樣式…

步驟 4 − 當您從“定義於”下拉選單中選擇“當前頁面”選項時，樣式將儲存到同一個 HTML 頁面中。設定頁面的字型，然後轉到“背景”類別。

步驟 5 − 設定背景顏色。您還可以設定邊框、邊框和位置類別，然後單擊“確定”。

layoutdemo.html

您可以看到樣式已新增到同一個 HTML 檔案中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <title>Untitled 1</title> 
      <style type = "text/css">
         #container { 
            font-family: Arial, Helvetica, sans-serif; 
            font-size: medium; 
            font-weight: normal; 
            font-style: normal; 
            font-variant: normal; 
            text-transform: capitalize; 
            color: #800000; 
            background-color: #C0C0C0; 
            padding: 8px; 
            margin: 8px; 
            width: 90%; 
         } 
      </style> 
   </head>  

   <body> 
      <div id = "container"></div> 
   </body> 
</html>

同樣，您可以新增其他樣式，例如頁首、頁尾、主要內容等，如上所示。

水平導航

在本章中，我們將學習如何向網站新增水平導航或選單項。

步驟 1 − 要建立選單項或水平導航，讓我們在 index.html 檔案中的<div id = “top-nav”>中新增以下程式碼，其中包含選單項列表。

<div id = "top-nav"> 
   <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
   </ul> 
</div>

步驟 2 − 這是一個簡單的頂部選單專案符號列表。要建立超連結，請轉到設計檢視或程式碼檢視。

步驟 3 − 選擇要用作超連結的專案，然後按 Ctrl + K。

步驟 4 − 單擊“螢幕提示…”按鈕。

步驟 5 − 輸入您想要的螢幕提示文字，然後單擊“確定”。

步驟 6 − 在顯示文字欄位中，輸入主頁，選擇 index.html 檔案，然後單擊“確定”。

步驟 7 − 同樣，為其他選單項新增超連結，如下面的程式碼所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset=utf-8" http-equiv = "Content-Type" /> 
      <style type = "text/css"></style> 
      <link href = "sample.css" rel="stylesheet" type = "text/css" /> 
   </head>  

   <body> 
      <div id = "container"> 
         <div id = "header"></div> 
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li> 
               <li><a href = "index.html" title =  "Menu Item 2.">Menu Item 2</a></li> 
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li> 
            </ul> 
         </div> 
         <div id = "left-nav"> </div> 
         <div id = "main-content"> </div> 
         <div id = "footer"> </div> 
      </div> 
   </body>  
</html>

步驟 8 − 要設定頂部導航的樣式，請轉到管理樣式面板。

步驟 9 − 右鍵單擊“#top-nav”並選擇“修改樣式”。選擇“邊框”類別並將寬度更改為細線。

步驟 10 − 選擇“邊框”類別，取消選中“所有相同”填充，並在頂部和底部欄位中輸入 10。

步驟 11 − 轉到位置類別。

步驟 12 − 從高度欄位中刪除 50 並單擊“確定”。在“應用樣式”面板中，單擊“新建樣式…”。

步驟 13 − 在選擇器欄位中輸入#top-nav ul，並從“定義於”下拉列表中選擇現有樣式表。在“塊”類別中，從文字對齊欄位中選擇“居中”，然後轉到“列表”類別。

步驟 14 − 從list-style-type欄位中選擇無，然後單擊“確定”。

步驟 15 − 再次從應用樣式面板中單擊“新建樣式…”。在選擇器欄位中輸入#top-nav ul li。然後從“定義於”下拉列表中選擇現有樣式表，然後轉到“佈局”類別。

步驟 16 − 從display欄位中選擇inline，然後單擊“確定”。

步驟 17 − 轉到“應用樣式”面板，單擊“新建樣式…”。在選擇器欄位中輸入#top-nav ul li a，並從“定義於”下拉列表中選擇現有樣式表，然後選擇白色作為字型顏色。

步驟 18 − 轉到背景類別。

步驟 19 − 選擇綠色作為背景顏色，然後轉到邊框類別。

步驟 20 − 設定填充值並單擊“確定”。

步驟 21 − 現在讓我們再次轉到“應用樣式”面板並單擊“新建樣式”。在選擇器欄位中輸入#topnav ul li a:hover，並從“定義於”下拉列表中選擇現有樣式表，然後選擇黑色作為字型顏色。

步驟 22 − 現在轉到背景類別。

步驟 23 − 選擇滑鼠懸停在選單項上時選單選項的背景顏色，然後轉到“邊框”類別。

步驟 24 − 選擇邊框樣式、寬度和顏色，然後單擊“確定”。要檢查外觀，請轉到“檔案”選單並選擇“在瀏覽器中預覽”。

當您將滑鼠懸停在任何選單項上時，它將更改背景和字型顏色。

垂直導航

在本章中，我們將學習如何向網站新增垂直導航或選單項。讓我們一步一步來。

步驟 1 − 要建立選單項或垂直導航，讓我們在 index.html 檔案中的<div id = “left-nav”>中新增以下程式碼，其中包含選單項列表。

<div id = "left-nav"> 
   <p>Site Navigation</p> 
   <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
   </ul> 
</div>

步驟 2 − 這是一個簡單的頂部選單專案符號列表。要建立超連結，請轉到設計檢視或程式碼檢視。

步驟 3 − 選擇要用作超連結的專案，然後按 Ctrl + K。

步驟 4 − 單擊“螢幕提示…”按鈕。輸入您想要的螢幕提示文字，然後單擊“確定”。

步驟 5 − 在顯示文字欄位中，輸入主頁，選擇 index.html 檔案，然後單擊“確定”。

在此階段，我們的 index.html 頁面如下所示 −

步驟 6 − 為其他選單項新增更多超連結，如下面的程式碼所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
      <style type = "text/css"></style>
      <link href = "sample.css" rel = "stylesheet" type = "text/css" />
   </head>

   <body>
      <div id = "container">
         <div id = "header"></div>
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li>
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li>
               <li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li>
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li>
            </ul> 
         </div> 
   
         <div id = "left-nav"> 
            <p>Site Navigation</p>  
            <ul>
               <li><a href = "index.html" title = "Site Home Page">Home</a></li>
               <li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li>
               <li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li>
               <li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li>
            </ul> 
         </div> 
         <div id = "main-content"></div> 
         <div id = "footer"></div> 
      </div> 
   </body>  
</html>

步驟 7 − 要設定頂部導航的樣式，請轉到“管理樣式”面板。右鍵單擊#left-nav並選擇“修改樣式…”。

步驟 8 − 在字型大小欄位中輸入 0.9，然後從字型大小旁邊的下拉列表中選擇em，然後轉到“邊框”類別。

步驟 9 − 選中“所有相同”填充，並在頂部欄位中輸入 5，然後單擊“確定”。在“應用樣式”面板中，單擊“新建樣式…”。

步驟 10 − 在選擇器欄位中輸入#left-nav ul。從“定義於”下拉列表中選擇現有樣式表，然後在“列表”類別中，從 list-style-type 欄位中選擇“無”，然後單擊“確定”。

步驟 11 − 再次從應用樣式面板中單擊新建樣式。取消選中“所有相同”填充。在底部欄位中輸入 0.2，然後單擊“確定”。

步驟 12 − 在選擇器欄位中輸入#left-nav ul li，並從“定義於”下拉列表中選擇現有樣式表，然後轉到“邊框”類別。

步驟 13 − 轉到“應用樣式”面板並單擊“新建樣式”。

步驟 14 − 在選擇器欄位中輸入#left-nav ul li a，並從“定義於”下拉列表中選擇現有樣式表，然後選擇白色作為字型顏色。

步驟 15 − 轉到“背景”類別。選擇顏色作為背景顏色

步驟 16 − 轉到邊框類別並設定填充值。

步驟 17 − 轉到佈局類別。從display下拉列表中選擇block，然後單擊“確定”。

步驟 18 − 現在讓我們再次轉到“應用樣式”面板並單擊“新建樣式”。在選擇器欄位中輸入#left-nav ul li a:hover，並從“定義於”下拉列表中選擇現有樣式表。選擇黑色作為字型顏色。

步驟 19 − 現在轉到“背景”類別。選擇滑鼠懸停在選單項上時選單選項的背景顏色，然後單擊“確定”。

步驟 20 − 要檢查外觀，請轉到“檔案”選單並在瀏覽器中選擇預覽。

當您將滑鼠懸停在任何選單項上時，它將更改其背景和字型顏色。

Microsoft Expression Web - 驗證頁面

在本章中，我們將學習如何確保 HTML 和 CSS 程式碼都透過驗證。Microsoft Expression Web 提供了幾種方法來檢查網頁中的程式碼錯誤以及與特定 HTML 和 CSS 模式不相容的程式碼。

狀態列和程式碼檢視會提醒您單個頁面中的程式碼錯誤和不相容性，而“相容性”任務窗格會列出在一個或多個頁面或整個網站中的所有程式碼錯誤和不相容性。
Expression Web 使用基於頁面中 DocType 宣告的文件模式來識別不相容的程式碼。
如果頁面不包含 DocType 宣告或未識別 DocType，則 Expression Web 使用輔助模式。

建立站點並處理其頁面時，您應該養成驗證頁面的習慣。Microsoft Expression Web 具有各種工具，在驗證網頁時非常有用。Expression Web 中有兩個非常有用的選項，因此讓我們轉到“工具”選單並選擇“頁面編輯器選項”。

“常規”選項卡提供兩個選項 −

突出顯示無效 HTML − 選中此選項後，它將以特定的配色方案顯示無效的 HTML，預設情況下是黃色背景上的紅色文字。
突出顯示不相容的 HTML − 選中此選項後，它將在與 HTML 標準不相容的程式碼下方顯示波浪形下劃線。

狀態列

噹噹前開啟的網頁包含程式碼錯誤時，您將看到一個檢測到程式碼錯誤圖示（在下圖中突出顯示）。

讓我們假設您忘記了 </div> 標籤中的“>”符號 −

<div id = "footer"></div>

在這種情況下，程式視窗底部的狀態列將顯示“檢測到程式碼錯誤”圖示。

當您從下拉選單中選擇“轉到錯誤”時，它將帶您到錯誤所在的行，您可以輕鬆修復語法。

如果頁面包含與指定的文件型別不相容的程式碼，則狀態列會顯示一個**檢測到HTML不相容性**圖示。

假設您使用“hre”作為超連結而不是“href”，這是一個錯誤。

<li><a href = "index.html" title = "Site Home Page">Home</a></li>

狀態列會顯示如下截圖所示的“檢測到HTML不相容性”圖示。

當您從下拉選單中選擇“轉到錯誤”時，它會將您帶到錯誤所在的行，您可以輕鬆修復語法。

相容性報告

相容性報告會檢查頁面和CSS檔案中的程式碼錯誤以及與您指定的文件型別和CSS模式不相容的程式碼。您可以生成僅檢查特定檔案或整個網站的報告。

**步驟1** − 要生成相容性報告，請轉到工具選單並單擊“相容性報告...”選項。

**步驟2** − 相容性檢查器對話方塊提供不同的選項，可以僅檢查您站點中的特定檔案，開啟這些檔案或在資料夾列表任務窗格或網站檢視中選擇它們。根據需要選擇選項，然後單擊“檢查”按鈕。

**步驟3** − 相容性任務窗格開啟，報告生成的進度顯示在任務窗格底部。雙擊任何一行，它將帶您到錯誤所在的位置。

動態網頁模板

動態網頁模板是一個基於HTML的網頁主副本，您可以建立它來包含設定、格式和頁面元素，例如文字、圖形、頁面佈局、樣式和網頁區域，這些區域可以修改。

當您將動態網頁模板附加到網站中的頁面時，該模板會定義這些頁面的佈局。您可以在網站中使用任意數量的動態網頁模板，並且可以將動態網頁模板附加到任意數量的頁面。

透過使用動態網頁模板，您可以建立共享相同佈局的HTML頁面。除了提供共享佈局之外，您還可以使模板中的一些區域可供編輯，同時防止對該模板中的其他區域進行更改。

這意味著您可以允許其他人新增和編輯內容，同時仍然保留頁面的佈局和模板本身。

動態網頁模板的需求

網站設計的最重要概念是保持網站的一致外觀和風格，而使用動態網頁模板，您可以實現這一點。動態網頁模板提供：

基本頁面，例如站點地圖、聯絡方式、關於和搜尋頁面。訪問者應該能夠從網站上的任何頁面訪問您的主頁。
整個網站的一致導航。
整個網站的一致外觀。

建立動態網頁模板

要建立動態網頁模板 (DWT)，您可以從一個空的HTML頁面開始，並將其另存為***.dwt檔案**。讓我們一步一步地學習更多關於它的知識。

**步驟1** − 開啟index.html檔案並選擇**檔案→另存為…**選單選項，這將開啟“另存為”對話方塊。

從“儲存型別”下拉列表中選擇“動態網頁模板 (*.dwt)”並將檔名從index更改為**master.dwt**，然後單擊“儲存”按鈕。

**步驟2** − 現在，您將在資料夾列表中看到一個新建立的檔案master.dwt。讓我們建立一個新的HTML檔案並將其命名為index_2.html。讓我們開啟master.dwt檔案，在設計檢視或程式碼檢視中，右鍵單擊主內容的<div>標籤內。

**步驟3** − 從選單中選擇“管理可編輯區域…”，這將開啟“可編輯區域”對話方塊。

**步驟4** − 在“區域名稱”中，鍵入可編輯區域的名稱，然後單擊“新增”。如果需要，重複此操作以新增其他可編輯區域。

**步驟5** − 新增所有可編輯區域後，單擊“關閉”。現在轉到index_2.html檔案並在資料夾列表中選擇它。

**步驟6** − 轉到“格式”選單並選擇**動態網頁模板→附加動態網頁模板…**，這將開啟“附加動態網頁模板”對話方塊。

**步驟7** − 選擇**動態網頁模板**，這裡為master.dwt檔案，然後單擊“開啟”按鈕。您將收到一條警告訊息。單擊“是”。

**步驟8** − 您會看到相同的模板已應用於index_2.html檔案。同樣，您可以將相同的模板新增到網站中任意數量的HTML頁面。

**步驟9** − 在此頁面上，您只能編輯main-content部分。如果將滑鼠移到其他部分，您會看到它不可編輯，滑鼠游標也會變為紅色交叉圓圈。

**步驟10** − 要檢視其外觀，請轉到“檔案”選單並選擇“在瀏覽器中預覽”。

Microsoft Expression Web - 搜尋頁面

在本節中，我們將學習如何向網站新增搜尋選項或搜尋框。如果這是一個大型站點，那麼您需要在站點中有一個搜尋框，以便使用者可以輕鬆找到任何資料。有很多免費的搜尋引擎可用，例如Windows Live、Google等。

Windows Live 搜尋

以下步驟將向您展示如何將Windows Live搜尋框新增到您的網頁，然後將搜尋表單設定為搜尋整個網路或僅搜尋您的網站。

**步驟1** − 建立一個新的HTML頁面並將其命名為**SearchPage**。

**步驟2** − 轉到“格式”選單並選擇**動態網頁模板→附加動態網頁模板…**選項。選擇master.dwt檔案並單擊“開啟”按鈕。

**步驟3** − 讓我們在可編輯區域內新增以下程式碼。

<form method = "get" action = "http://search.live.com/results.aspx"> 
   <input type = "hidden" name = "cp" value = "1252"/> 
   <input type = "hidden" name = "FORM" value = "FREESS"/> 
   <table style = "background-color: #ffffff;"> 
      <tr> 
         <td>
            <a href = "http://search.live.com/"> 
               <img src = "http://search.live.com/s/affillogoLive.gif" 
                  style = "border:0px;" alt = "Live Search"/> 
            </a> 
         </td> 
         <td> 
            <input type = "text" name = "q" size = "30" /> 
            <input type = "submit" value = "Search Site"/> 
            <input type = "hidden" name = "q1" 
               value = "site:http://www.microsoft.com/expression"/> 
         </td> 
      </tr> 
   </table> 
</form>

**步驟4** − 儲存頁面。轉到“檔案”選單並選擇“在瀏覽器中預覽”。

**步驟5** − 您將在網頁中看到Windows Live搜尋。讓我們在搜尋中輸入一些內容並單擊“搜尋網站”按鈕

**步驟6** − 正如您所看到的，它將在網路上搜索。如果您想將搜尋限制為僅您的網站，則必須在以下名稱中指定您的網站域名，而不是https://www.microsoft.com/expression

<input type = "hidden" name = "q1" value = "site:http://www.microsoft.com/expression"/>

**步驟7** − 同樣，您可以透過在可編輯區域中新增以下程式碼來新增Google搜尋選項。

<form method = "get" action = "http://www.google.com/search"> 
   <div style = "border: 1px solid black; padding: 4px; width: 20em; margin: 0px auto 0px auto"> 
      <table border = "0" cellpadding = "0"> 
         <tr> 
            <td class = "center"> 
               <input type = "text" name = "q" size = "25" maxlength = "255" value = "" /> 
               <input type = "submit" value = "Google Search" /> 
            </td> 
         </tr> 
         <tr> 
            <td align = "center" style = "font-size: 75%"> 
               <input type = "checkbox" name = "sitesearch" 
                  value = " http://www.microsoft.com/expression" checked = "checked" /> 
               Only search this website<br /> 
            </td> 
         </tr> 
      </table> 
   </div> 
</form>

**步驟8** − 儲存您的HTML頁面，您將看到搜尋框、搜尋按鈕、複選框和複選框標籤。

**步驟9** − 要限制使用者僅搜尋您的網站，請選擇複選框並轉到“標籤屬性”面板，並將“值”屬性設定為您的網站URL，例如https://www.microsoft.com/expression。

**步驟10** − 儲存您的頁面並在瀏覽器中預覽。現在您將在網頁中看到Google搜尋選項。

Microsoft Expression Web - 圖片

圖片在網頁中大量使用，以使它們看起來更有趣並提供更好的使用者體驗。在本節中，我們將學習如何向網站新增圖片。像往常一樣，讓我們一步一步地詳細學習這個過程。

**步驟1** − 要開始新增圖片，讓我們建立一個新的單頁面網站並將default.html檔案的名稱更改為index.html。

**步驟2** − 現在我們需要將圖片包含到網站中，以便我們可以在網頁中使用這些圖片。讓我們建立一個新資料夾。在資料夾列表中，右鍵單擊網站名稱。

**步驟3** − 目前，此資料夾中沒有任何圖片。要在此資料夾中新增圖片，只需從硬碟驅動器中選擇並拖動圖片，然後將其拖放到圖片資料夾中。

您將看到圖片已新增到網站的**圖片**資料夾中，如下面的螢幕截圖所示。

**步驟4** − 現在這些圖片已包含在您的網站中，但這些圖片都沒有在網頁中使用。向網頁中新增圖片的一種簡單方法是從圖片資料夾中拖動圖片，然後將其拖放到要在網頁中新增圖片的程式碼檢視中。

假設我們要在標題下方新增一張圖片。當您放下圖片並釋放滑鼠按鈕時，它將顯示以下對話方塊。

在這裡您可以指定替代文字和長描述。然後單擊“確定”並儲存網頁。現在您可以看到添加了帶有替代名稱和圖片源的**<img>**標籤。

**步驟5** − 按照相同的步驟新增第二張圖片及其替代名稱和源。

現在index.html檔案將顯示如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
   </head>  
   
   <body> 
      <h1> Working with images </h1> 
      <img alt = "Beautiful Birds" src = "images/birds.jpg" /> 
      <img alt = "Other Birds" src = "images/birds2.jpg" /> 
   </body>  
</html>

**步驟6** − **圖片屬性**對話方塊允許您訪問最常用的圖片屬性。雙擊圖片時，它將顯示圖片屬性框。

在Expression Web中，“圖片屬性”對話方塊有兩個選項卡，“常規”和“外觀”。

以下是**常規**選項卡中可用的選項。

**圖片** − 它包含圖形影像的資料夾/檔名。
**替代文字** − 輸入您希望在圖形下載時、找不到圖形時或網站訪問者將指標移到圖形上時顯示的文字。如果您的檢視者正在使用螢幕閱讀器，此文字也將由螢幕閱讀器使用。
**長描述** − 有時幾個詞可能不足以描述您的圖片。圖表就是例子。單擊“瀏覽”以選擇包含圖片較長描述的檔案。
**位置** − 如果您想將圖片連結到網頁或更大的圖片，請在此處插入超連結。
**目標框架** − 如果當前頁面是框架頁面，此選項指示應在哪個框架中顯示連結，或者您可以選擇在新視窗中開啟圖片或頁面。

以下是**外觀**選項卡中可用的選項。

**環繞樣式** − 指定圖片在頁面中的浮動方式，例如無、左或右。
**佈局** − 在此部分，您可以設定對齊方式、邊框粗細、水平和垂直邊距。
**大小** − Expression Web會根據圖片的實際尺寸自動設定圖片的寬度和高度屬性。與其透過更改這些尺寸來調整圖片大小，不如使用圖形編輯器來調整圖片大小。

**步驟7** − 現在，讓我們在瀏覽器中預覽網頁；它將顯示以下輸出。

Microsoft Expression Web - 超連結

在本節中，我們將學習如何在您的網站中使用超連結。使網路如此廣闊的原因之一是網頁能夠連結到其他網頁。**超連結**或連結幾乎存在於所有網頁中。

超連結還允許使用者點選並轉到不同的頁面、頁面內的某個位置、影像或網際網路上的其他位置。以下是超連結的一些重要特性：

Expression Web的超連結工具和選項使使用超連結變得非常容易。
Expression Web超連結檢視和報告也使查詢和修復損壞和不正確的連結變得非常容易。
超連結可以是一個詞、一組詞或一張圖片，點選後會跳轉到新的文件或當前文件中的某個位置。

錨點標籤

在 HTML 中，<a> 標籤（也稱為錨點標籤）用於建立指向另一個文件的連結。錨點可以指向另一個 html 頁面、影像、文字文件或 pdf 檔案等。以下是錨點 <a> 標籤的基本程式碼。

<a href = "url">Text to be displayed as link<a>

在 <a> 標籤中，“href” 屬性用於指定文件的連結地址，錨點標籤開始和結束標籤之間的文字將顯示為超連結。
當您將滑鼠游標移到網頁上的連結上時，箭頭會變成一個小手。
URL 是一個地址，它指定了協議、Web 伺服器和檔案路徑。
URL 有兩種型別：絕對 URL 和 相對 URL。絕對 URL 包含完整的地址，而相對 URL 缺少一個或多個地址部分。但是，Web 瀏覽器會從包含 URL 的頁面獲取缺失的資訊。

示例

讓我們來看一個簡單的例子，在這個例子中我們將同時使用絕對 URL 和相對 URL。

步驟 1 − 首先，開啟index.html頁面，並在主要內容部分新增以下幾行。

<div id = "main-content">  
   <p> Absolute URL Example: </p> 
   <p>  Google </p> 
   <p>  Youtube </p> 
   <p> Relative URL Example: </p> 
   <p>  Home Page 2 </p>  
</div>

以下是index.html頁面的完整實現。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <style type = "text/css"> 
         #left-nav ul li a:hover { 
            color: #000000; background-color: #116611; 
         } 
      
         #left-nav ul li a:hover { 
            color: #000000; background-color: #66FF99; 
         } 
      </style> 
      <link href = "sample.css" rel = "stylesheet" type = "text/css" /> 
   </head> 
   <body> 
      <div id = "container"> 
         <div id = "header"> </div> 
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li> 
               <li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li> 
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li> 
            </ul> 
         </div> 
   
         <div id = "left-nav"> 
            <p>Site Navigation</p>  
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li> 
               <li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li> 
               <li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li> 
            </ul> 
         </div> 
  
         <div id = "main-content">  
            <p> Absolute URL Example: </p> 
            <p>  Google </p> 
            <p>  Youtube </p> 
            <p> Relative URL Example: </p> 
            <p>  Home Page 2 </p> 
         </div> 
         <div id = "footer"> </div> 
      </div> 
   </body> 
</html>

步驟 2 − 儲存網頁，您將在主要內容部分看到文字。

步驟 3 − 在設計檢視中，右鍵單擊 Google，然後從選單中選擇“超連結…”，這將開啟插入超連結對話方塊。

步驟 4 − 在“地址”欄位中，指定 Google 首頁的 URL，然後單擊“確定”。同樣，右鍵單擊設計檢視中的 YouTube，然後選擇“超連結…”。

步驟 5 − 在“地址”欄位中，指定 YouTube 首頁的 URL，然後單擊“確定”。現在對於相對路徑，右鍵單擊“主頁 2”，然後從選單中選擇“超連結…”，這將開啟插入超連結對話方塊。

步驟 6 − 對於相對路徑，在地址欄位中選擇 index_2.html，Expression Web 將從 index.html 檔案獲取其餘路徑，因為這兩個檔案位於同一目錄中。單擊“確定”。

可以看到，這些文字現在帶下劃線，這意味著超連結已建立。

步驟 7 − 預設字型顏色為藍色，超連結的預設字型顏色也為藍色。要更改超連結的預設顏色，請選擇任何超連結，然後轉到格式選單，並選擇背景…選單選項。

您現在將看到以下對話方塊。

步驟 8 − 讓我們將超連結顏色更改為綠色。

在下面的螢幕截圖中，您將看到超連結顏色已更改為綠色。

步驟 9 − 現在讓我們在瀏覽器中預覽此網頁。

如果您點選 Google 連結，它將引導您到 Google 首頁。

步驟 10 − 同樣，如果您返回主頁並點選 YouTube 連結，它將引導您到 YouTube 首頁。讓我們回到主頁。

點選主頁 2連結，您將看到它打開了index_2.hmtl 檔案。

Microsoft Expression Web - 影片

在本章中，我們將學習如何向網站新增影片以及 Expression Web 支援哪些格式。藉助影片，您可以輕鬆地吸引潛在客戶關注貴公司的產品或服務。

Microsoft Expression Web 是一款網頁設計工具，它簡化了向網頁新增宣傳、營銷或培訓影片的過程。您可以輕鬆地在 Microsoft Expression 的設計檢視中插入影片。

預設情況下，Expression Web 支援 Silverlight、Adobe Flash、WMV、ASF、MWA、AVI、WVX 和 MPEG 等影片編碼格式。

示例

現在讓我們來看一個例子，逐步瞭解新增影片的過程。

步驟 1 − 新增一個新的 HTML 檔案，並將其命名為videodemo.html。

步驟 2 − 在網頁中單擊要插入影片的位置。假設我們要在標題下方新增影片。

步驟 3 − 轉到插入選單→媒體，這將開啟一個子選單，其中包含 Expression 預設支援的影片播放器格式列表。讓我們選擇Windows Media Player。

步驟 4 − 找到要使用的影片。選擇影片檔名，然後單擊“插入”按鈕將其插入網頁。按 Ctrl + S 儲存檔案，您將看到“儲存嵌入檔案”對話方塊。

步驟 5 − 單擊“確定”，您將看到媒體檔案已新增到網站資料夾。

以下是videodemo.html 頁面中的程式碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <title>Untitled 1</title> 
   </head>  
   
   <body> 
      <h1> Video Demo</h1> 
      <p> 
         <object id = "media1" height = "200" type = "video/x-ms-wmv" width = "200"> 
            <param name = "filename" value = "logo.wmv" /> 
         </object> 
      </p> 
   </body> 
</html>

步驟 6 − 現在讓我們在瀏覽器中預覽網頁。您將看到影片正在播放。

Microsoft Expression Web - SQL 資料來源

Expression Web 具有許多用於處理靜態 HTML 頁面的工具，但它也具有用於建立更動態頁面的工具。動態頁面通常從資料來源檢索資料或內容。在本章中，我們將學習如何建立要在動態頁面中使用的 SQL 資料來源。

示例

讓我們來看一個簡單的例子，在這個例子中，我們建立一個下拉列表，並透過使用 SQL 資料來源從資料庫檢索資料來填充列表。

步驟 1 − 首先建立一個新的空網站。

讓我們將其命名為SQLDataSource。單擊“確定”。

步驟 2 − 您將看到 Expression Web 為我們建立了一個資料夾。但是，由於我們選擇建立空專案，因此我們還沒有任何檔案。

Expression Web 不僅可以用於建立靜態 HTML 站點；我們還可以輕鬆地使用頁面和控制元件建立動態站點。

步驟 3 − Expression Web 還允許我們建立大量動態內容，而無需成為開發人員。因此，讓我們從檔案→新建頁面選單選項新增一個 ASPX 檔案。選擇中間模型中的 ASPX，然後單擊“確定”。

步驟 4 − 在這裡，我們將建立表單中的一個控制元件，該控制元件需要訪問資料庫中的資料以建立動態網站。

在這種特定情況下，我們將建立一個 SQL 資料來源，該資料來源將從資料庫檢索資料。

步驟 5 − 轉到工具箱，拖動DropDownList並將其放在程式碼檢視中的<form>標籤內，或者也可以將其放在設計檢視中的表單部分。您將看到 Expression Web 新增的程式碼。

在這裡，我們想要連線資料庫中的一些資料並將其儲存在我們的下拉列表中。因此，我們需要的第一件事是資料庫。

步驟 6 − 透過轉到新建→資料夾選單選項，在專案資料夾中建立一個新資料夾。

步驟 7 − 將此資料夾命名為App_Data。

步驟 8 − 我們需要使用檔案→匯入→檔案…選單選項將資料庫匯入我們的專案。

步驟 9 − 它將開啟匯入對話方塊，如下所示。單擊“新增檔案…”按鈕，這將開啟開啟檔案對話方塊。

步驟 10 − 瀏覽到要包含在網站中的資料庫（*.mdf 檔案），然後單擊“開啟”。

步驟 11 − 開啟 MyTestDatabase.mdf。它將顯示以下對話方塊。單擊“確定”。

步驟 12 − 現在您可以看到資料庫檔案已新增到 App_Data 資料夾中。當您擁有下拉列表之類的控制元件並且 Expression Web 允許您將資料繫結到它時，您將在設計檢視的右上角看到一個小箭頭。

步驟 13 − 這是當前上下文選單，它允許我們對特定控制元件執行非常具體的任務，其中一項是選擇資料來源。因此，讓我們單擊選擇資料來源…，這將開啟資料來源配置嚮導。

步驟 14 − 目前，我們沒有資料來源。讓我們從選單中選擇“新建資料來源”選項。

在這裡，我們將匯入一個 SQL 資料庫。讓我們選擇資料庫並單擊“確定”。

步驟 15 − 現在，我們需要指定連線字串。讓我們單擊“新建連線”按鈕。

步驟 16 − 選擇 Microsoft SQL Server 資料庫檔案，然後單擊“確定”。

步驟 17 − 單擊“瀏覽”按鈕以找到資料庫檔案。

步驟 18 − 選擇資料庫檔案，然後單擊“開啟”按鈕或雙擊資料庫檔案。

步驟 19 − 要測試連線，請單擊“測試連線”按鈕。

它將顯示以下螢幕。單擊“確定”按鈕。

步驟 20 − 現在，我們將配置資料來源。在以下螢幕上單擊“下一步”。

選中複選框，然後再次單擊“下一步”。

步驟 21 − 在這裡，您將看到資料庫中的所有表。讓我們選擇Student表。

步驟 22 − 您將在列表框中看到所有列。選擇ID和LastName。在底部，您可以看到它實際上正在建立一個查詢。您也可以使用Where或ORDER BY 子句。完成查詢後，單擊“下一步”。

步驟 23 − 單擊測試查詢按鈕。它將顯示如下所示的查詢結果。

步驟 24 − 在以下對話方塊中，資料來源預設選中。“選擇要在 DropDownList 中顯示的資料欄位”是實際要顯示的欄位。讓我們選擇 LastName 並從“選擇 DropDownList 值的資料欄位”中選擇 ID，然後單擊“確定”。

正如您在下面的螢幕截圖中看到的，資料來源已新增到設計檢視中。

以下是 Expression Web 建立的 ASPX 檔案中的完整程式碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ Page Language = "C#" %> 
<html dir = "ltr" xmlns = "http://www.w3.org/1999/xhtml">  
   <head runat = "server"> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <title>Untitled 1</title> 
   </head>  

   <body>  
      <form id = "form1" runat = "server"> 
         <asp:DropDownList id = "listID" runat = "server" DataSourceID = "SqlDataSource1"  
            DataTextField = "LastName" DataValueField = "ID"> 
         </asp:DropDownList> 

         <asp:SqlDataSource ID = "SqlDataSource1" runat = "server"   
            ConnectionString = "<%$ ConnectionStrings:MyTestDatabaseConnectionString %>"  
               SelectCommand = "SELECT [ID], [LastName] FROM [Student]"> 
         </asp:SqlDataSource> 
      </form>  
   </body>  
</html>

步驟 25 − 按 Ctrl + S 儲存網頁。

將此頁面命名為SQLDatasource.aspx，然後單擊“儲存”。

步驟 26 − 讓我們在瀏覽器中預覽此頁面。您將看到一個下拉列表，其中包含Student表中學生的姓氏。

Microsoft Expression Web - Word

在本章中，我們將學習如何使用 Expression Web 從 Microsoft Word 文件建立網頁。您可以使用 Microsoft Word 來建立 Web 內容，然後將其內容新增到 HTML 頁面，而不是從頭開始建立頁面。

讓我們來看看如何使用 Microsoft Word 中的內容獲得最佳效果。

建立一個新的 HTML 頁面，並將其命名為worddemo.html。將動態 Web 模板 (*.dwt) 應用於此 HTML 頁面。

這是一個應用了一些樣式和表格的示例Word文件。首先，將整個文件複製到剪貼簿，然後切換到 Expression Web。將文件貼上到網頁的主要內容部分。

請注意，當內容貼上到 Expression Web 中時，我們會得到一個圖示。這被稱為貼上選項按鈕。透過單擊它，我們可以選擇將內容貼上到 Expression Web 中的不同方式。

預設設定匹配目標格式意味著 Expression Web 將使用當前網頁中已應用的任何格式。

例如，本文件的文件標題是在 Microsoft Word 中使用 H1 樣式設定的。貼上到頁面時，Expression Web 將把格式應用到 Expression Web 中的“標題 1”樣式。

如果選擇保留源格式選項，則 Expression Web 仍會將 H1 樣式應用於文字。但是，在這種情況下，它會建立一個名為“樣式一”的新 CSS 類，以重新格式化文字使其看起來像在 Word 中一樣。

如果我們選擇刪除格式，頁面看起來與之前非常相似，但如果查看錶格格式，就會發現它現在只是普通文字。

Expression Web 中提供的樣式仍然有效，但 Word 文件中特有的任何樣式都消失了。

僅保留 HTML 選項僅在複製 HTML 程式碼時適用。貼上選項選單上的最後一個選項是僅保留文字，如果只想保留 Word 中的文字，則應選擇此選項。選擇此選項後，將開啟以下“貼上文字”對話方塊。

在這裡，我們可以精確地選擇我們想要如何格式化文字。第一個選項會刪除所有格式化換行符、段落等，並將其替換為一個大的文字塊。

可以看到，我們已經丟失了文件中的表格以及所有格式。您可以使用“貼上文字”對話方塊中的選項。讓我們選擇匹配目標格式選項。

在瀏覽器中預覽此網頁時，它將如下截圖所示。

Microsoft Expression Web - GridView

GridView 控制元件用於以表格形式顯示資料來源的值。每一列代表一個欄位，每一行代表一條記錄。在本節中，我們將學習一個非常簡單的過程，以便在 GridView 中將資料庫中的資料顯示在網頁上。

步驟 1 − 讓我們在 SQLDataSource 專案中建立一個新的 ASPX 頁面，並將其命名為gridview.aspx

步驟 2 − 在工具箱中，您將看到 ASP.NET 控制元件。拖動 GridView 控制元件並將其放在窗體部分。

您可以看到 GridView 上下文選單已開啟。現在從“選擇資料來源”下拉列表中選擇<新建資料來源…>。它將顯示資料來源配置嚮導。

步驟 3 − 選擇資料庫，因為我們將從 SQL 資料庫獲取資料，並指定資料來源 ID。單擊“確定”。

步驟 4 − 選擇我們在 SQL 資料來源章節中建立的現有連線字串，因為我們將在本節中使用相同的資料庫。單擊“下一步”。

步驟 5 − 為便於理解，讓我們選擇 Student 表並單擊*複選框，這將檢索 Student 表中的所有列。單擊“下一步”。

步驟 6 − 在接下來的嚮導中，您可以測試查詢，因此讓我們單擊測試查詢按鈕。

單擊下一步後，它將顯示以下螢幕 −

gridview.aspx的設計檢視如下所示 −

步驟 7 − 讓我們在瀏覽器中預覽網頁。它將顯示如下 −

這是一個沒有任何格式的簡單表格。

步驟 8 − 您可以從GridView 上下文選單中格式化 GridView。

單擊自動套用格式…連結。在“自動套用格式”對話方塊中，有很多預定義方案。根據您的需要選擇一個方案，然後單擊“確定”。

讓我們再次在瀏覽器中預覽網頁。它將如下截圖所示。

Microsoft Expression Web - 主頁

在本節中，我們將學習 ASP.NET 主頁。建立主頁時，我們可以像在 Microsoft Expression Web 中的其他頁面一樣，佈局、應用樣式並在其中新增 ASP.NET 控制元件。我們在主頁中建立的佈局和內容將應用於附加到主頁的頁面。這與動態 Web 模板的概念類似。

動態 Web 模板使您可以將通用的外觀和感覺應用於網站中的所有頁面。由於動態 Web 模板是在設計時應用於附加它們的頁面的，因此對網站中所有頁面應用更改可能會導致延遲，同時 HTML 在所有頁面中更新。

如果伺服器正在執行 ASP.NET，則 ASP.NET 主頁允許透過在模板中定義可編輯區域來實現類似的功能。但是，模板對頁面中自定義內容的應用是在執行時動態完成的。

示例

讓我們來看一個簡單的示例，在這個示例中，我們將使用 CSS 模板建立一個主頁，並使用此主頁建立其他頁面。

步驟 1 − 開啟index.html頁面，我們在其中使用 CSS 樣式表定義了不同的部分。

步驟 2 − 從檔案選單中，轉到新建→頁面，您將看到“新建頁面”對話方塊。

步驟 3 − 從左側窗格中選擇 ASP.NET，從中間列表中選擇主頁，然後單擊“確定”按鈕。

步驟 4 − 以上螢幕將生成一個名為Untitled1.master的彈出視窗。儲存此頁面並將其命名為default.master。

步驟 5 − 我們希望將我們的設計構建到將在整個站點中共享的主頁中。因此，讓我們複製想要在每個頁面上顯示的內容的程式碼（來自 index.html 程式碼），並將程式碼貼上到 default.master 頁面。

步驟 6 − 現在我們有一個我們希望在站點每個頁面上使用的佈局。但是，如果我們現在開始構建內容頁面，我們將無法實際在此佈局中輸入任何內容。因此，我們需要從主頁建立ASPX 內容頁面。為此，我們還必須新增內容區域，以便我們可以向指定的頁面新增內容。

在設計檢視中，右鍵單擊要在頁面上放置內容的位置。假設我們想要在 main-content 部分新增內容，然後單擊管理 Microsoft ASP.NET 內容區域…

步驟 7 − 在“管理內容區域”嚮導中，輸入區域名稱，然後單擊關閉。

步驟 8 − 正如以下螢幕截圖所示，Content PlaceHolder 已新增到 main-content 部分。現在我們必須新增 ASPX 網頁。

步驟 9 − 轉到“檔案”選單，然後選擇新建→從主頁建立…

步驟 10 − 瀏覽到 default.master 頁面，然後單擊“確定”。

步驟 11 − 現在，將建立一個新的 ASPX 頁面，並將所有佈局樣式從主頁應用。

在主部分新增一些文字。

步驟 12 − 儲存此頁面並將其命名為mypage.aspx，然後在瀏覽器中預覽它。

Microsoft Expression Web - 資料表

在本節中，我們將學習如何在網頁中新增資料表。讓我們建立一個新的 HTML 頁面，但是在這裡我們也希望將動態 Web 模板應用於我們的 HTML 頁面。

步驟 1 − 讓我們轉到“檔案”選單，然後選擇新建→從動態 Web 模板建立…

它將開啟以下對話方塊，如下面的螢幕截圖所示。

步驟 2 − 選擇master.dwt檔案，然後單擊“開啟”按鈕。

步驟 3 − 儲存網頁並將其命名為datatable.html。

步驟 4 − 在設計檢視中，轉到 main-content 部分並刪除文字。

步驟 5 − 接下來，轉到表格→插入表格…選單選項，這將開啟“插入表格”對話方塊。

選擇行數和列數。您還可以設定不同的佈局選項，例如對齊方式、填充、邊框大小和顏色以及背景顏色等。完成後，單擊“確定”。

步驟 6 − datatable.html 的設計檢視現在將顯示如下 −

現在，如果您檢視頁面的程式碼檢視，您將看到 Expression Web 添加了以下程式碼。

<table class = "auto-style2" style = "width: 100%"> 
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr>  
   
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr>    
   
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr>  
  
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr> 
     
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr> 
     
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr> 
</table>

步驟 7 − 在“管理樣式”任務面板上，右鍵單擊“.auto-style2”。單擊“選擇重新命名類“auto-style2””。

步驟 8 − 在“重新命名類”對話方塊中，在新名稱欄位中輸入mytable。確保選中“重新命名此頁面中的類引用”，然後單擊“確定”。

現在，在設計檢視中檢視您的網頁。它將顯示如下 −

步驟 9 − 要格式化此表格並應用一些樣式，請轉到“管理樣式”任務面板並單擊新建樣式…

步驟 10 − 在“新建樣式”對話方塊中，設定邊框設定，然後單擊“確定”。還有另一個選項可以格式化您的資料表。在設計檢視中，右鍵單擊表格，然後選擇修改→表格自動套用格式…

在此對話方塊中，您將看到不同的格式和其他設定。讓我們選擇“專業”格式，然後單擊“確定”。

步驟 11 − 現在，您的網頁的設計檢視如下所示 −

讓我們在設計檢視中新增一些資料。

步驟 12 − 儲存您的網頁並在瀏覽器中預覽它。它將如下截圖所示。

Microsoft Expression Web - 釋出

在本節中，我們將學習如何釋出網站。Microsoft Expression Web 是一款完整的網站開發工具。您可以使用 Expression Web 建立網頁和網站，讓您可以在計算機和託管帳戶之間傳輸檔案。

步驟 1 − 讓我們看看我們想要釋出的站點。

在最新的 Expression Web 版本中，添加了新的釋出功能，例如 −

能夠排除整個資料夾而不是僅排除檔案。
能夠輕鬆釋出當前頁面。

步驟 2 − 如果您希望任何特定檔案或資料夾不在站點上釋出，則右鍵單擊該資料夾或檔案並將其從釋出中排除。假設我們想要排除index_2.html 檔案。

如上圖所示，單擊從釋出中排除按鈕。同樣，您也可以排除其他檔案。

步驟 3 − 現在您已完成站點設計，您需要將其釋出以供全世界檢視。Expression Web 支援幾種不同的釋出方案。

要釋出站點，首先我們需要確保已儲存所有頁面。如果我們沒有儲存所有頁面，則釋出過程開始後會收到警告。

現在，讓我們轉到“工具”選單。

選擇重新計算超連結…選項。在以下螢幕上單擊是。

步驟 4 − 轉到站點選單，然後單擊釋出選單選項。

步驟 5 − 如果這是第一次釋出站點，我們將收到訊息添加發布目標，如下面的螢幕截圖所示。

步驟 6 − 單擊該訊息，將出現以下連線設定對話方塊。在“連線設定”對話方塊中輸入所有必需的資訊，然後單擊新增按鈕。

它將顯示以下對話方塊。單擊是。

步驟 7 − 如果釋出設定已設定，我們將收到訊息連線到當前釋出目標。單擊該訊息或使用站點檢視選項卡上的連線到按鈕。

步驟 8 − 釋出過程開始後，可以看到檔案正在傳輸。完成後，我們將收到一條訊息，告知檔案已完成上傳。

下次我們釋出站點時，此過程將比較伺服器站點與計算機上的內容。如果遠端伺服器上有我們已從計算機上的 Web 中刪除的檔案，則可能會彈出一個訊息框，詢問我們是否要刪除它們。如果我們確定它們不再需要，則單擊“確定”。

Microsoft Expression Web - 備份網站

在本節中，我們將學習如何使用 Expression Web 將站點複製到本地計算機。與 Windows 資源管理器不同，Expression Web 中沒有回收站。如果我們不小心刪除了網站或網站中的頁面，我們將處於恢復狀態。

步驟 1 − 要備份網站，讓我們在 Expression Web 中開啟網站。

步驟 2 − 轉到“工具”選單，然後單擊“重新計算超連結...”選項。

單擊“是”，如下圖所示。

步驟 3 − 接下來，轉到站點選單，然後單擊釋出選單選項。

步驟 4 − 如果這是我們第一次釋出此網站，我們將收到一條訊息添加發布目標，如下圖所示。

步驟 5 − 單擊該訊息，將出現連線設定對話方塊。

在名稱欄位中，輸入站點名稱。從連線型別下拉選單中選擇檔案系統，然後瀏覽到要備份網站的位置。接下來，單擊新增按鈕。

步驟 6 − 如果資料夾當前不存在，系統將提示我們建立它。單擊“是”，網站將被建立。

步驟 7 − 連線後，單擊“檢視”下拉選單並選擇“所有檔案”。

步驟 8 − 選擇左側的所有檔案。

步驟 9 − 單擊右箭頭(→)按鈕。

釋出過程開始後，將看到檔案正在傳輸。完成後，將彈出一條訊息，提示檔案已上傳。

Microsoft Expression Web - 附加元件

本章，我們將學習如何在 Expression Web 中安裝附加元件。Expression Web 附加元件是一個外部軟體包，它在 Expression Web 中提供附加或增強的功能。

附加元件可以從以下位置下載 https://msdn.microsoft.com/en-us/expression/jj873995。例如，讓我們下載 AddFeed 附加元件。

步驟 1 − 讓我們開啟 Expression Web 並轉到“工具”選單。單擊附加元件…選單選項。

步驟 2 − 如果這是第一次安裝附加元件，則“管理附加元件”對話方塊中將顯示一個空列表。讓我們單擊安裝按鈕。

步驟 3 − 選擇AddFeeds.xadd檔案並單擊開啟按鈕。

步驟 4 − 安裝完成後，將顯示以下螢幕。它將詢問我們是否要啟用附加元件。螢幕將提供有關正在安裝的特定附加元件的所有資訊。單擊“是”。

步驟 5 − 根據安裝的附加元件，它們將在多個位置可用。

步驟 6 − 接下來，轉到插入選單。您將看到Twitter 或 RSS Feed選項，該選項是在安裝附加元件後新增的。

您可以按照相同的步驟根據需要安裝更多附加元件。

列印頁面