在網頁中插入圖像

  • 2019-09-20 10:52:17
  • 閱讀次數:
  • 作者:盈嵐科技小編
  • 來源:http://www.258852.net

設計網頁時,有了豐富的圖像素材,就可以利用Dreamweaver把這些圖像組織在一起,設計出具有一定審美效果的網頁頁面。

如何把所擁有的素材有機地組織在一起,在具體設計網頁之前用戶應心中有數,最好在紙上隨意打個草稿,避免盲目操作。本頁布局簡明,結構也不是太復雜,但對于初學者來說仍然會存在不小的困難,下面就逐步介紹。

【操作步驟】

第1步,啟動Dreamweaver,新建一個網頁文件,保存為main.html。

提示:把上面制作的所有圖像素材都匯集到im-ages文件夾中,并保證該文件夾和main.html文件同處在一個目錄下。

第2步,在Dreamweaver文檔編輯窗口中,單擊窗口底部的【屬性】面板中的【頁面屬性】按鈕,如圖5.13所示。如果沒有顯示【屬性】面板,可以選擇【窗口】|【屬性】命令。

第3步,打開【頁面屬性】對話框,在【分類】列表框中選擇【常規】選項,然后在右側設置區域設置網頁的背景圖像,如圖5.14所示。第4步,設置完畢,單擊【確定】按鈕關閉【頁面屬性】對話框。

第5步,在編輯窗口中插入一個表格。選擇【插入】|【表格】命令,打開【表格】對話框,設置:1行2列,寬度800像素,邊框、單元格邊距和單元格間距都為0。

第6步,插入表格之后,在【屬性】面板中設置表格居中顯示。

第7步,把光標置于插入表格的第1個單元格中,在【屬性】面板中設置第1個單元格寬為200像素。

第8步,選擇【插入】|【圖像】|【圖像】命令,在打開的【選擇圖像源文件】對話框中選擇要插入的LOGO圖標。然后,把光標置于第2個單元格中,以同樣的方法插入Banner廣告條,并設置該圖像在單元格中居中顯示。

插入按鈕和修飾圖案

前面完成了網站建設時網頁頁面的標題設計,本節利用表格插入導航按鈕和制作圓角的修飾圖案。

【操作步驟】

第1步,把光標置于第1個表格的后面,選擇【插入】|【表格】命令,插入一個表格,設置:1行2列,寬度800像素,邊框粗細、單元格間距和單元格邊距都為0。

第2步,插入表格之后,在【屬性】面板中設置表格居中顯示,同時設置第1個表格也居中顯示,并設置第2個表格的第1個單元格寬度為100。

第3步,在第1個單元格中插入一個8行1列的表格,設置寬度為100%,同時設置邊框粗細、單元格間距和單元格邊距都為0的表格。

第4步,在表格中按順序從上到下分別插入圓角圖案(border1.gif)、6個按鈕(about.jpg、ser-vices.jpg、gallery.jpg、freebies.jpg;、portfolio.jpg、contact.jpg)和圓角圖案(border2.gif)。

第5步,以同樣的方式在右邊單元格中插入一個3行3列的表格,設置表格寬度為98%,并在【屬性】面板中設置居中顯示。

第6步,在4個頂角的單元格中插入圓角修飾圖案,并設置單元格寬、高為圖案大小。

第7步,設置沒有插入圓角圖案的單元格背景顏色為圖案的顏色,即保持表格背景顏色的一致性。

當前文章標題:在網頁中插入圖像

當前URL:http://www.258852.net/news/wzzz/3100.html

上一篇:搜集圖像素材

下一篇:設置圖片樣式

網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
a级国产乱理论片在线观看_久久久久久黃色網站免費_日韩 欧美 一区 不卡_国产成人av综合网