Dreamweaver CC完整教學：如何添加圖片和背景

目錄

1. 簡介
2. Dreamweaver中的圖片和背景區別
3. 在設計視圖中添加圖片
4. 圖片屬性和編輯
5. 替代文本
6. 添加背景顏色
7. 添加背景圖片
8. 添加漸層背景
9. 將背景應用於段落和標題
10. 選擇圖片還是背景
11. 結語

簡介

在這個視頻中，我們將學習如何在Adobe Dreamweaver CC中添加圖片和背景。圖片和背景是網頁設計中常見的元素，它們可以讓網站更具吸引力和專業性。我們將逐步介紹如何在Dreamweaver中操作和編輯圖片以及如何設置背景。

Dreamweaver中的圖片和背景區別

在Dreamweaver中，圖片和背景有一些不同之處。圖片是作為Div標籤內的文件，如果Div標籤的大小發生變化，圖片的大小不會改變。而背景則完全覆蓋Div標籤，無論Div標籤的大小如何，背景都會跟隨著變化。

在設計視圖中添加圖片

您可以通過多種方式在設計視圖中添加圖片。您可以複製和粘貼圖片，也可以直接拖動文件到設計視圖中。添加圖片後，您可以通過選擇圖片並拖動來移動圖片的位置。如果要刪除圖片，只需選擇圖片並使用Ctrl+X進行剪切操作。在Div標籤的屬性面板中，您可以編輯圖片的屬性，包括圖片源文件、鏈接和大小。如果需要進行更高級的編輯，您可以使用Photoshop，通過點擊相應的圖標進入Photoshop進行編輯。

圖片屬性和編輯

在Div標籤的屬性面板中，您可以設置圖片的屬性。例如，src屬性指定圖片的源文件，link屬性可以添加點擊圖片時的目標網址。您還可以設置圖片的大小和鎖定長寬比，以及應用簡單的編輯效果。請注意，這些編輯效果是永久性的，如果需要返回到原始狀態，您可以使用編輯撤消功能。

替代文本

替代文本是指在圖片無法顯示時替代圖片的文字。您可以通過為圖片添加alt屬性來設置替代文本。這在網站使用者無法查看圖片時非常有用，也有助於提升網站的可訪問性。

添加背景顏色

您可以在Div標籤的屬性面板中設置背景顏色。這樣的背景顏色會影響所有沒有背景的Div標籤。您可以選擇一種簡單的純色作為背景，也可以選擇一個漸變色。

添加背景圖片

除了純色背景外，您還可以設置背景圖片。在背景選項中，您可以通過url屬性瀏覽並添加背景圖片。背景圖片會覆蓋之前設置的純色背景。請注意，使用的圖片大小可能不正確，您可以通過設置背景大小來調整。

添加漸層背景

您還可以使用漸層背景。在背景選項中，您可以設置漸層顏色和方向。這樣的漸層背景可以讓網站更具視覺效果。

將背景應用於段落和標題

除了Div標籤，您還可以將背景應用於段落和標題。然而，背景會覆蓋整個行，無法控制背景的實際長度。

選擇圖片還是背景

在選擇使用圖片還是背景時，您需要考慮是否需要在內容變動時自動調整大小。如果希望網站在不同的屏幕尺寸下都能顯示良好，則應優先選擇使用背景。

結語

通過本視頻，您學習了在Dreamweaver中添加圖片和背景的基本方法。圖片和背景是網頁設計中常見的元素，它們可以提升網站的效果和吸引力。希望這個視頻對您有所幫助。感謝觀看！

Highlights:

1. 在Dreamweaver中添加圖片和背景
2. 圖片和背景的區別
3. 在設計視圖中添加圖片
4. 圖片屬性和編輯
5. 替代文本
6. 添加背景顏色
7. 添加背景圖片
8. 添加漸層背景
9. 將背景應用於段落和標題
10. 選擇圖片還是背景

FAQ:

Q: 如何在Dreamweaver中添加圖片？ A: 您可以在設計視圖中複製、粘貼或拖動圖片文件來添加圖片。

Q: 如何添加背景顏色？ A: 您可以在Div標籤的屬性面板中設置背景顏色。

Q: 如何設置替代文本？ A: 您可以在圖片的alt屬性中添加替代文本。

Q: 圖片和背景有什麼區別？ A: 圖片是以Div標籤內的文件形式存在，而背景完全覆蓋Div標籤。

Q: 是否應該使用圖片還是背景？ A: 如果需要在內容變動時自動調整大小，則應優先選擇使用背景。

資源:

• Adobe Dreamweaver CC 官方網站