Microsoft Expression Web - 影像

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

步驟 1 - 要開始新增影像，讓我們建立一個新的單頁網站並將預設的 default.html 檔名稱更改為 index.html。

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

步驟 3 - 當前，此資料夾中沒有影像。要在此資料夾中新增影像，只需從硬碟驅動器中選擇並拖動影像，然後將其拖放到 images 資料夾上。

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

步驟 4 - 現在這些影像已包含在您的網站中，但沒有一個在網頁中使用。將影像新增到網頁中的一種簡單方法是從 images 資料夾中拖動影像，然後將其放在您希望在網頁中新增影像的程式碼檢視中。

假設我們想在標題下方新增一個影像。當您放下影像並釋放滑鼠按鈕時，將顯示以下對話方塊。

在這裡，您可以指定替代文字和長描述。然後單擊“確定”並儲存網頁。現在您可以看到添加了帶有替代名稱和影像源的 <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 - 現在，讓我們在瀏覽器中預覽網頁；它將顯示以下輸出。

列印頁面