|
 |
 |
 |
 |
 |
 |
 |
 |
本單元要學習的重點是在dreamweaver中套用Fireworks畫好的圖片做為背景底圖。
在做動作前，先到功能列的點選視窗，檢查"插入"面板有沒有打開。
在插入面板中找到插入"影像：Fireworks HTML" 點選後會跳出對話框，用瀏覽找到已經做好的Fireworks HTML檔案後按確定就完成了。
如果希望中間的內容部份圖片可以隨內容增加而延展，就先點選圖片，可以由下方屬性列看到自己點選的東西來確認；選好後先把圖刪掉。
刪完圖後先在圖原本的地方輸入一些文字，選取時會比較好選。選取（１）後，到下方（２）新增CSS規則，此部份在上個單元有詳細教過，可以再回去複習。
到CSS樣式面板找到剛才新增的CSS樣式後，開啟它並更改背景圖案即可。
如果覺得頁面有點單調，可以到功能列的修改＞頁面屬性，更改外觀＞背景影像
這樣基本的版型就完成嘍。不過這樣做有個小缺點，不方便排版；所以下面要教另一種做法。
對於dreamweaver入門者來說，表格是相當好用的東西；善用表格就可以做出不少版型效果。
先把剛才做的東西全選後按右鍵剪下，接著到（１）插入面板＞常用＞表格，做一個一欄一列的表格。
接著到屬性面板將表格的對齊設為置中
然後把剛才剪下的東西貼在表格內
將游標放到圖片的中間空白區塊，點選並刪除圖片後（不要移動游標）直接在原地插入一個２欄２列的表格，要注意寬度的單位。
在CSS樣式面板右下選擇新增CSS規擇（１），建立一個類別。
選取剛才插入的２欄２列表格後，到屬性面板＞類別，將類別套用成剛才新建立的CSS規則。
到CSS樣式面板下點選新建的CSS規則修改它，背景＞Background-image，找到要套用的圖片後按下"套用"就可以看到套用結果。
這樣就完成版型了，而且可以利用更改最外圈１欄１列表格的屬性來改變版面。
剩的就是把要置入的文字與圖片放進版面。在貼上內文的同時若要修改表格欄寬，可以將游標移到表格內部的分隔線上即可按住拖曳來改變欄寬。
利用插入面板＞常用＞影像可以插入圖片。插入圖片時會跳出對話視窗（２），替代文字一方面是圖片讀取不出來時會顯示的文字說明，另一方面對無障礙網路空間來說也是相當重要的，因為這些替代文字可以讓螢幕閱讀機、點字顯示器等各種特殊輸出裝置做進一步處理，讓視覺障礙者或聽覺障礙者可以使用其他替代方式獲得其資訊內容。
圖片插入後可以在屬性面板針對大小、對齊方式...等設定做修改。
將圖片及文字排版後，最新活動訊息的頁面就完成嘍。
回目錄│上一篇│下一篇│ＴＯＰ