Dreamweaver 入門:向頁面中插入圖像-Dreamweaver教程

來源: 作者:更新時間:2006-08-12點擊:

  創建頁面布局之后,您就可以將資源添加到頁面。您將從添加圖像開始。可以在 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 圖形即顯示在頁面上。

< Prev12 Next >
相關Dreamweaver教程:
最新評論:
loading.. 評論加載中....
發表評論:不能超過250字節,請自覺遵守互聯網相關政策法規.
  • 昵稱: 驗證: