在Dreamweaver CC 2018中添加圖片

目錄

• 添加圖片到網站目錄
• 在頁面中添加圖片
• 保存圖片到站點目錄
• 修改圖片大小
• 文件類型的差異
• 使用透明背景的 PNG 文件
• 使用 JPEG 文件
• 如何選擇文件類型

😄 添加圖片到網站目錄

在本節中，我們將學習如何將圖片添加到您的網站目錄中。首先，我們需要創建一個容器，用於保存圖片。您可以使用 <div> 元素來創建一個容器，並給它添加一個類名。這樣可以更好地組織您的代碼。例如，我們可以創建一個 logo 類的 <div> 元素，並將圖片放入其中。

<div class="logo">
  <!-- 這裡放置圖片 -->
</div>

經過這樣的準備，我們就可以開始添加圖片了。

😄 在頁面中添加圖片

要將圖片添加到網頁中，我們可以使用 <img> 標籤。在 <img> 標籤中，我們需要指定圖片的來源（src）和替代文本（alt）。來源是圖片所在位置，而替代文本在無法顯示圖片時用於替代顯示。

<img src="圖片來源" alt="替代文本">

例如，假設我們的圖片在站點目錄下的 images 文件夾中，並且我們將圖片命名為 logo.png，我們可以使用以下代碼將圖片添加到頁面上：

<img src="images/logo.png" alt="公司的標誌">

現在，我們已經成功將圖片添加到頁面中。

😄 保存圖片到站點目錄

為了確保圖片在網頁上顯示正確，我們需要將圖片保存到網站的目錄中。首先，我們需要在站點目錄下創建一個文件夾來保存圖片。您可以根據需要選擇文件夾的名稱，通常人們將圖片保存在 images 文件夾中。

接下來，將下載的圖片文件保存到創建的文件夾中。請確保文件名與代碼中指定的圖片文件名相同，以避免出現鏈接錯誤。

😄 修改圖片大小

圖片的大小在網頁設計中非常重要。如果您的圖片太大或太小，它們可能無法正確地進行顯示。因此，我們需要根據需要調整圖片的尺寸。

在 CSS 中，我們可以使用 height 屬性來設置圖片的高度。例如，如果我們希望圖片的高度與頁面頂部的標題高度相同，我們可以將 height 屬性設置為相應的像素值。

.logo img {
  height: 70px;
}

請嘗試根據您的需要調整圖片的大小，以使其在網頁中看起來更協調。

😄 文件類型的差異

在網頁上使用的圖片可以有不同的文件類型：PNG、JPEG 等。這些文件類型之間有一些差異，我們需要根據情況選擇適合的文件類型。

😄 使用透明背景的 PNG 文件

PNG 文件支持透明背景，這使得它們非常適合在網頁上使用。如果您的圖片需要透明背景，那麼使用 PNG 文件是一個不錯的選擇。

在創建 PNG 文件時，請確保將透明區域保存為透明。這樣，當圖片添加到網頁上時，透明部分將以網頁的背景顏色顯示。

😄 使用 JPEG 文件

JPEG 文件通常用於保存照片或需要較高壓縮率的圖片。JPEG 文件在保存圖片時具有較小的文件大小，這對於在網頁上加載圖片很重要。

然而，JPEG 文件不支持透明背景，因此如果您的圖片需要透明背景，請選擇其他文件類型。

😄 如何選擇文件類型

選擇適當的文件類型取決於您的圖片需要什麼特性。如果您的圖片需要透明背景，請使用 PNG 文件。如果您的圖片是照片或需要較高壓縮率的圖片，則選擇 JPEG 文件。

除了 JPEG 和 PNG 文件之外，還有其他文件類型可供選擇，如 GIF、SVG 等。請根據您的具體需求選擇適當的文件類型。

在這節中，我們學習了如何添加圖片到網站目錄、在頁面中添加圖片、保存圖片到站點目錄、修改圖片大小以及選擇適當的文件類型。下一節中，我們將討論文件類型的更多細節。

摘要

• 了解如何將圖片添加到網站目錄並在頁面中使用
• 學習如何保存圖片到站點目錄，以確保圖片在網頁上顯示正確
• 調整圖片的大小，以使其在網頁上看起來更協調
• 知道選擇適當的文件類型對於網頁設計很重要

常見問題與解答

Q: 圖片是否一定要保存在站點目錄中？ A: 是的，為了確保圖片在網頁上正確顯示，我們需要將圖片保存在站點目錄中。

Q: 如何修改圖片的大小？ A: 在 CSS 中，您可以使用 height 和 width 屬性來設置圖片的尺寸。根據您的需要調整這些值即可。

Q: 有哪些文件類型可以用於保存圖片？ A: 常見的圖片文件類型有 PNG、JPEG、GIF、SVG 等。根據您的具體需求選擇適當的文件類型。

資源

• HTML 標籤
• CSS height 屬性
• PNG 文件格式
• JPEG 文件格式