創(chuàng)建頁(yè)面布局之后，您就可以將資源添加到頁(yè)面。您將從添加圖像開始。可以在 Dreamweaver 中使用多種方法向 Web 頁(yè)面添加圖像。本文將介紹使用不同的方法將四個(gè)不同的圖像添加到 Cafe Townsend 的索引頁(yè)。

　　替換圖像占位符

　　在 Dreamweaver 中創(chuàng)建的index.html 文件。

　　雙擊頁(yè)面頂部的圖像占位符 banner_graphic。

　　在"選擇圖像源文件"對(duì)話框中，瀏覽至您定義為站點(diǎn)根文件夾的 cafe_townsend 文件夾中的 images 文件夾。

　　選擇 banner_graphic.jpg 文件并單擊"確定"。

　　Dreamweaver 將圖像占位符替換為 Cafe Townsend 的橫幅圖形。

　　在表格外單擊一次以取消選中該圖像。

　　保存該頁(yè)("文件">"保存")。

　　使用"插入"菜單插入圖像

　　在第一個(gè)表格的第三行(低于剛插入的橫幅圖形兩行，彩色表格單元格之上)內(nèi)單擊一次。

　　選擇"插入">"圖像"。

　　在"選擇圖像源文件"對(duì)話框中，瀏覽至 cafe_townsend 文件夾中的 images 文件夾，選擇 body_main_header.gif 文件，然后單擊"確定"。 注重假如出現(xiàn)"圖像標(biāo)簽輔助功能屬性"對(duì)話框，則單擊"確定"。

　　一個(gè)長(zhǎng)的彩色圖形出現(xiàn)在該表格行中。它看上去更像表格單元格的背景色，而不是圖形，但假如仔細(xì)看，您將看到該圖形具有圓角。添加完所有資源之后，這種圓角效果將使頁(yè)面的下半部分呈現(xiàn)一種有趣的外觀。

　　通過拖動(dòng)插入圖像

　　在頁(yè)面上最后一個(gè)表格的最后一行(彩色表格單元格之下)中單擊一次。

　　在"文件"面板("窗口">"文件")中，找到 body_main_footer.gif 文件(它位于 images 文件夾中)，將該文件拖到最后一個(gè)表格的插入點(diǎn)。 注重假如出現(xiàn)"圖像標(biāo)簽輔助功能屬性"對(duì)話框，則單擊"確定"。

　　在表格外單擊一次，并保存該頁(yè)面("文件">"保存")。

　　從"資源"面板插入圖像

　　在由三列組成的表格(第一個(gè)淺棕色表格單元格)的中間一列內(nèi)單擊一次。

　　在"屬性"檢查器("窗口">"屬性")中，從"水平"彈出式菜單中選擇"居中對(duì)齊"，然后從"垂直"彈出式菜單中選擇"頂端"。該操作將表格單元格的內(nèi)容對(duì)齊到單元格的中間，并使單元格的內(nèi)容從單元格頂端開始。

　　注重假如您無法看到"垂直"或"水平"彈出式菜單，請(qǐng)單擊"屬性"檢查器右下角的展開箭頭。

　　按一次 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)，創(chuàng)建更多空間。

　　單擊"文件"面板中的"資源"選項(xiàng)卡，或選擇"窗口">"資源"。

　　則會(huì)顯示您的站點(diǎn)資源。

　　假如未選擇"圖像"視圖，則單擊"圖像"以查看您的圖像資源。

　　在"資源"面板中，選擇 street_sign.jpg 文件。 關(guān)于"資源"面板 可以使用"資源"面板查看和治理當(dāng)前站點(diǎn)中的資源。"資源"面板顯示與文檔窗口中的活動(dòng)文檔相關(guān)聯(lián)的站點(diǎn)資源。

　　必須首先定義一個(gè)本地站點(diǎn)，然后才能在"資源"面板中查看資源。

　　"資源"面板提供兩種視圖:

　　站點(diǎn)列表顯示您的站點(diǎn)的所有資源，包括在該站點(diǎn)的所有文檔中使用的顏色和 URL。

　　收藏列表僅顯示您明確選擇的資源。若要將某個(gè)資源添加到"收藏"列表，請(qǐng)?jiān)?站點(diǎn)"列表中選擇該資源，然后從"文件"面板右上角的"選項(xiàng)"菜單中選擇"添加到收藏夾"。

　　在"資源"面板中單擊某個(gè)資源時(shí)，預(yù)覽區(qū)域會(huì)顯示您所選擇的資源。若要更改預(yù)覽區(qū)域的大小，請(qǐng)拖動(dòng)預(yù)覽區(qū)域與資源列標(biāo)題之間的分隔線。

　　執(zhí)行下列操作之一:

　　將 street_sign.jpg 文件拖到中心位置的表格單元格中的插入點(diǎn)。單擊"資源"面板底部的"插入"。 注重假如出現(xiàn)"圖像標(biāo)簽輔助功能屬性"對(duì)話框，則單擊"確定"。street_sign.jpg 圖形即顯示在頁(yè)面上。