2011-11-22 18:34:09
彰億
教學系列 24 Dreamwaver CS5
Dreamwaver網頁設計軟體
我不喜歡Office Word 文書軟體
它是拿來編排文章列印用的.但不適合直接在電腦裡閱讀文章
早期網頁排版看起也差不多(一行行文字+圖片)
但實際上它是一堆程式碼所組成的
而現在網頁越來越漂亮~製作起來也更複雜
基本上.網頁內的圖文不能隨意擺放
須先建立表格.分別在表格內放上圖片文字
所以一開始就要先構想好如何排版
在這使用前篇Fireworks所切割好的圖片
網站設定選擇含有該圖檔的資料夾
插入表格
依照整體圖片尺寸. 設定表格寬
表格邊框不需要被看到. 選擇0
這時屬性欄會看你點選在哪個位置 出現 頁面
儲存格  置中對齊放在網頁的中央 再配合每張切割圖檔的尺寸,分割/合併儲存格,並設定長寬 右邊工具列會顯示目前資料夾裏有的檔案 分別把圖檔放入表格 並簡單命名  設定背景顏色或圖片  CSS 設定元素基本格式.如文字大小顏色這些.再分別套入各元素 在這新增一個圖片當背景的CSS 命名為content類別 (取其他名子也可)  選取圖片/設定長寬後 用Div標籤插入儲存格內 該格就有自己的背景圖.也可在上面放上其他圖文  把圖片按指向檔案連結到資料夾內其他的網頁檔 該圖就會變成超連結按鈕一樣  也可輸入網址  藍字+底線的預設連結格式不喜歡的話 可新增設定連結的CSS文字格式 Text-decoration文字底線選none無  --------------------------------------------------------------------------------------------------------------------------------------- 除了一般插入圖片外 還可插入[當滑鼠經過時切換]的圖  網頁表格內插入另一個網頁的作法  複製Youtube影片的嵌入碼.貼到網頁程式碼裡  網頁還有很多更進階的作法 在這只放上我會的基礎筆記 按F12可快速存檔 不過平常製作過程還是多存不同檔名備份 |