創建頁面布局之後，您就可以將資源添加到頁面。您將從添加圖像開始。可以在 Dreamweaver 中使用多種方法向 Web 頁面添加圖像。本文將介紹使用不同的方法將四個不同的圖像添加到 Cafe Townsend 的索引頁。
替換圖像占位符
在 Dreamweaver 中創建的index.html 文件。
雙擊頁面頂部的圖像占位符 banner_graphic。
在"選擇圖像源文件"對話框中，浏覽至您定義為站點根文件夾的 cafe_townsend 文件夾中的 images 文件夾。
選擇 banner_graphic.jpg 文件並單擊"確定"。
Dreamweaver 將圖像占位符替換為 Cafe Townsend 的橫幅圖形。
在表格外單擊一次以取消選中該圖像。
保存該頁("文件">"保存")。
使用"插入"菜單插入圖像
在第一個表格的第三行(低於剛插入的橫幅圖形兩行，彩色表格單元格之上)內單擊一次。
選擇"插入">"圖像"。
在"選擇圖像源文件"對話框中，浏覽至 cafe_townsend 文件夾中的 images 文件夾，選擇 body_main_header.gif 文件，然後單擊"確定"。 注意如果出現"圖像標簽輔助功能屬性"對話框，則單擊"確定"。
一個長的彩色圖形出現在該表格行中。它看上去更像表格單元格的背景色，而不是圖形，但如果仔細看，您將看到該圖形具有圓角。添加完所有資源之後，這種圓角效果將使頁面的下半部分呈現一種有趣的外觀。
通過拖動插入圖像
在頁面上最後一個表格的最後一行(彩色表格單元格之下)中單擊一次。
在"文件"面板("窗口">"文件")中，找到 body_main_footer.gif 文件(它位於 images 文件夾中)，將該文件拖到最後一個表格的插入點。 注意如果出現"圖像標簽輔助功能屬性"對話框，則單擊"確定"。
在表格外單擊一次，並保存該頁面("文件">"保存")。
從"資源"面板插入圖像
在由三列組成的表格(第一個淺棕色表格單元格)的中間一列內單擊一次。
在"屬性"檢查器("窗口">"屬性")中，從"水平"彈出式菜單中選擇"居中對齊"，然後從"垂直"彈出式菜單中選擇"頂端"。該操作將表格單元格的內容對齊到單元格的中間，並使單元格的內容從單元格頂端開始。
注意如果您無法看到"垂直"或"水平"彈出式菜單，請單擊"屬性"檢查器右下角的展開箭頭。
按一次 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)，創建更多空間。
單擊"文件"面板中的"資源"選項卡，或選擇"窗口">"資源"。
則會顯示您的站點資源。
如果未選擇"圖像"視圖，則單擊"圖像"以查看您的圖像資源。
在"資源"面板中，選擇 street_sign.jpg 文件。 關於"資源"面板 可以使用"資源"面板查看和管理當前站點中的資源。"資源"面板顯示與文檔窗口中的活動文檔相關聯的站點資源。
必須首先定義一個本地站點，然後才能在"資源"面板中查看資源。
"資源"面板提供兩種視圖:
站點列表顯示您的站點的所有資源，包括在該站點的所有文檔中使用的顏色和 URL。
收藏列表僅顯示您明確選擇的資源。若要將某個資源添加到"收藏"列表，請在"站點"列表中選擇該資源，然後從"文件"面板右上角的"選項"菜單中選擇"添加到收藏夾"。
在"資源"面板中單擊某個資源時，預覽區域會顯示您所選擇的資源。若要更改預覽區域的大小，請拖動預覽區域與資源列標題之間的分隔線。
執行下列操作之一:
將 street_sign.jpg 文件拖到中心位置的表格單元格中的插入點。單擊"資源"面板底部的"插入"。 注意如果出現"圖像標簽輔助功能屬性"對話框，則單擊"確定"。street_sign.jpg 圖形即顯示在頁面上。
在表格外單擊一次以取消選中該圖像。保存該頁。