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 檔案中應用的。

列印頁面