當前位置:才華齋>資格證>職稱考試>

職稱計算機Dreamwaver使用教程:插入影象

職稱考試 閱讀(6.79K)

導語:目前網際網路上支援的影象格式主要有GIF、JPEG和PNG。其中使用最為廣泛的是GIF和JPEG。下面我們一起來學習一下在Dreamwaver中如何插入影象吧。

職稱計算機Dreamwaver使用教程:插入影象

  1、插入影象

在製作網頁時,先構想好網頁佈局,在影象處理軟體中將需要插入的圖片進行處理,然後存放在站點根目錄下的資料夾裡。

插圖影象時,將游標放置在文件視窗需要插入影象的位置,然後滑鼠單擊常用插入欄的“影象”按鈕。

彈出的“選擇影象原始檔”對話方塊,選擇img/001.jpg,單擊“確定”按鈕就把影象001.jpg插入到了網頁中。

注意:如果我們在插入圖片的時候,沒有將圖片儲存在站點根目錄下,會彈出下圖所示的對話方塊,提醒我們要把圖片儲存在站點內部,這時單擊“是”按鈕,

然後選擇本地站點的路徑將圖片儲存,影象也可以入到網頁中。

  2、設定影象屬性

選中影象後,在屬性面板中顯示出了影象的屬性,如下如所示。

在屬性面板的左上角,顯示當前影象的縮圖,同時顯示影象的大小。在縮圖右側有一個文字框,在其中可以輸入影象標記的名稱。

影象的大小是可以改變的,但是在DW裡更改是極不好的習慣,如果我們的電腦安裝了FW軟體,單擊屬性面板的“編輯”旁邊的,即可啟動FW對影象進行縮放等處理。當影象的大小改變時,屬性欄中“寬”和“高”的數值會以粗體顯示,並在旁邊出現一個弧形箭頭,單擊它可以恢復影象的原始大小。

“水平邊距”和“垂直邊距”文字框用來設定影象左右和上下與其它頁面元素的距離。

“邊框”文字框時用來設定影象邊框的寬度,預設的邊框寬度為0。

“替代”文字框用來設定影象的替代文字,可以輸入一段文字,當影象無法顯示時,將顯示這段文字。

單擊屬性面板中的對齊按鈕,可以分別將影象設定成瀏覽器居左對齊、居中對齊、居右對齊。

在屬性面板中,“對齊”下拉列表框時設定影象與文字的相互對齊方式,共有10個選項。通過它我們可以將文字對齊到影象的上端、下端、左邊和右邊等,從而可以靈活的.實現文字與圖片的混排效果。

  3、插入其它影象元素

在我們單擊常用插入欄的“影象”按鈕時,可以看到,除了第1項“影象”外,還有“影象佔位符”、“滑鼠經過影象”、“導航條”等專案。

插入影象佔位符,在我們佈局頁面時,如果要在網頁中插入一張圖片,可以先不製作圖片,而是使用佔位符來代替圖片位置。單擊下拉列表中的“影象佔位符”,開啟“影象佔位符”對話方塊。按設計需要設定圖片的寬度和高度,輸入呆插入影象的名稱,即可。

滑鼠經過影象,滑鼠經過影象實際上由兩個影象組成,主影象(當首次載入頁時顯示的影象)和次影象(當滑鼠指標移過主影象時顯示的影象)。這兩張圖片要大小相等,如果不相等,DW自動調整次圖片的大小跟主影象大小一致。