Dreamweaver 入門:向頁面中插入圖像_Dreamweaver教程
創(chuàng)建頁面布局之后,您就可以將資源添加到頁面。您將從添加圖像開始。可以在 Dreamweaver 中使用多種方法向 Web 頁面添加圖像。本文將介紹使用不同的方法將四個不同的圖像添加到 Cafe Townsend 的索引頁。
替換圖像占位符
在 Dreamweaver 中創(chuàng)建的index.html 文件。
雙擊頁面頂部的圖像占位符 banner_graphic。
在"選擇圖像源文件"對話框中,瀏覽至您定義為站點(diǎn)根文件夾的 cafe_townsend 文件夾中的 images 文件夾。
選擇 banner_graphic.jpg 文件并單擊"確定"。
Dreamweaver 將圖像占位符替換為 Cafe Townsend 的橫幅圖形。
在表格外單擊一次以取消選中該圖像。
保存該頁("文件">"保存")。
使用"插入"菜單插入圖像
在第一個表格的第三行(低于剛插入的橫幅圖形兩行,彩色表格單元格之上)內(nèi)單擊一次。
選擇"插入">"圖像"。
在"選擇圖像源文件"對話框中,瀏覽至 cafe_townsend 文件夾中的 images 文件夾,選擇 body_main_header.gif 文件,然后單擊"確定"。 注重假如出現(xiàn)"圖像標(biāo)簽輔助功能屬性"對話框,則單擊"確定"。
一個長的彩色圖形出現(xiàn)在該表格行中。它看上去更像表格單元格的背景色,而不是圖形,但假如仔細(xì)看,您將看到該圖形具有圓角。添加完所有資源之后,這種圓角效果將使頁面的下半部分呈現(xiàn)一種有趣的外觀。
通過拖動插入圖像
在頁面上最后一個表格的最后一行(彩色表格單元格之下)中單擊一次。
在"文件"面板("窗口">"文件")中,找到 body_main_footer.gif 文件(它位于 images 文件夾中),將該文件拖到最后一個表格的插入點(diǎn)。 注重假如出現(xiàn)"圖像標(biāo)簽輔助功能屬性"對話框,則單擊"確定"。
在表格外單擊一次,并保存該頁面("文件">"保存")。
從"資源"面板插入圖像
在由三列組成的表格(第一個淺棕色表格單元格)的中間一列內(nèi)單擊一次。
在"屬性"檢查器("窗口">"屬性")中,從"水平"彈出式菜單中選擇"居中對齊",然后從"垂直"彈出式菜單中選擇"頂端"。該操作將表格單元格的內(nèi)容對齊到單元格的中間,并使單元格的內(nèi)容從單元格頂端開始。
注重假如您無法看到"垂直"或"水平"彈出式菜單,請單擊"屬性"檢查器右下角的展開箭頭。
按一次 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh),創(chuàng)建更多空間。
單擊"文件"面板中的"資源"選項(xiàng)卡,或選擇"窗口">"資源"。
則會顯示您的站點(diǎn)資源。
假如未選擇"圖像"視圖,則單擊"圖像"以查看您的圖像資源。
在"資源"面板中,選擇 street_sign.jpg 文件。 關(guān)于"資源"面板 可以使用"資源"面板查看和治理當(dāng)前站點(diǎn)中的資源。"資源"面板顯示與文檔窗口中的活動文檔相關(guān)聯(lián)的站點(diǎn)資源。
必須首先定義一個本地站點(diǎn),然后才能在"資源"面板中查看資源。
"資源"面板提供兩種視圖:
站點(diǎn)列表顯示您的站點(diǎn)的所有資源,包括在該站點(diǎn)的所有文檔中使用的顏色和 URL。
收藏列表僅顯示您明確選擇的資源。若要將某個資源添加到"收藏"列表,請?jiān)?站點(diǎn)"列表中選擇該資源,然后從"文件"面板右上角的"選項(xiàng)"菜單中選擇"添加到收藏夾"。
在"資源"面板中單擊某個資源時,預(yù)覽區(qū)域會顯示您所選擇的資源。若要更改預(yù)覽區(qū)域的大小,請拖動預(yù)覽區(qū)域與資源列標(biāo)題之間的分隔線。
執(zhí)行下列操作之一:
將 street_sign.jpg 文件拖到中心位置的表格單元格中的插入點(diǎn)。單擊"資源"面板底部的"插入"。 注重假如出現(xiàn)"圖像標(biāo)簽輔助功能屬性"對話框,則單擊"確定"。street_sign.jpg 圖形即顯示在頁面上。
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動換行
- 探討Dreamweaver制作網(wǎng)頁時的空格
- 使用Dreamweaver制作網(wǎng)頁的20個技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- 用Dreamweaver8學(xué)習(xí)網(wǎng)頁滾動字幕的制作
- Dreamweaver8制作網(wǎng)頁過度效果
- 首頁的實(shí)現(xiàn)-Dreamweaver構(gòu)建Blog
- Dreamweaver MX2004視頻寶典教程 Dreamweaver安裝與啟動
- 入門:充分利用Dreamweaver8中的查找替換技巧
- Dreamweaver MX進(jìn)階教程(十四)使用server-side include(服務(wù)器端包括)
- DW MX 2004網(wǎng)頁中文亂碼問題:嘗試解決
- Dreamweaver基礎(chǔ)教程:層及其應(yīng)用
- Dreamweaver MX進(jìn)階教程(四)使用Dreamweaver的插件
- 分欄及回復(fù)的實(shí)現(xiàn)-Dreamweaver構(gòu)建Blog
猜你也喜歡看這些
- 北風(fēng)網(wǎng)資深web講師李炎恢講師Dreamweaver系列課程(已完結(jié)|45課時)陸續(xù)更新中
- CSS視頻教程
- FIF小組Dreamweaver制作網(wǎng)頁視頻教程
- PHP+MYSQL網(wǎng)站設(shè)計(jì)入門實(shí)踐
- 呂聰賢網(wǎng)頁三劍客視頻教程FlashMX,DreamweaverMX,F(xiàn)i
- 視友工作室網(wǎng)站頁設(shè)計(jì)制作全面通
- 4u2v Drwamweaver網(wǎng)頁制作實(shí)例教程100例
- 新編Dreamweaver MX2004 中文版輕松入門視頻教程 2CD
- 別具光芒:DIV+CSS網(wǎng)頁布局與美化
- Dreamweaver視頻課程
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-Dreamweaver 入門:向頁面中插入圖像。