- 1. Adobe Dreamweaver CS5 & CS5.5使用手冊
- 2. 以視覺化方式建立 Spry 頁面
- 3. 使用選單列 Widget
- 3.1 關於選單列 Widget
- 3.2 插入和編輯選單列 Widget
- 3.3 自訂選單列 Widget
- 3.3.1 變更選單項目文字樣式
- 3.3.2 變更選單項目背景顏色
- 3.3.3 變更選單項目尺寸
- 3.3.4 定位子選單
- 4. 關於標籤面板 Widget
- 4.1 插入和編輯標籤面板 Widget
- 4.1.1 插入標籤面板 Widget
- 4.1.2 新增面板至標籤面板 Widget
- 4.1.3 從標籤面板 Widget 刪除面板
- 4.1.4 開啟面板以進行編輯
- 4.1.5 變更面板順序
- 4.1.6 設定預設開啟的面板
- 4.2 自訂標籤面板 Widget
- 4.2.1 設計標籤面板 Widget 文字
- 4.2.2 變更標籤面板 Widget 的背景顏色
- 4.2.3 限制標籤面板寬度
- 5. TAB實作步驟
- 5.1 插入標籤面板
- 5.2 修改標籤標題，屬性面板對照
- 5.3 重新設定標籤外觀的樣式 .TabbedPanelsTab
- 5.4 文字居中對齊的設定
- 5.5 設定滑鼠移過時的標籤樣式 TabbedPanelsTabHover
- 5.6 設定檢視中頁次的標籤樣式 .TabbedPanelsTabSelected
- 5.7 設定整個標籤面板的外觀樣式.TabbedPanels
- 5.8 設定標籤內容區的外觀樣式 .TabbedPanelsContentGroup
- 5.9 設定標籤內容區的樣式重覆右邊的藍線 .TabbedPanelsContent
- 6. 優良網站分析
- 7. 範例分析
- 7.1 範例網站：
- 7.2 網站名稱：J-period
- 7.3 設計風格：
- 7.4 色彩分析
- 7.5 版面分析
- 7.6 跨瀏覽器問題與分析
- 8. 雙欄網頁概述
- 9. 雙欄網頁，float：浮動屬性做法概述
- 9.1 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動
- 9.2 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
- 9.3 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
- 10. 本單元雙欄網頁範例，float：浮動屬性做法概述
- 11. 雙欄網頁，float：浮動屬性做法步驟
- 11.1 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊
- 11.2 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入
- 11.3 新增ID CSS，命名為content-L
- 11.4 Float浮動設定Left，靠左對齊；寬度設為?180px
- 11.5 設定#content-L，Padding:6px
- 11.6 新增ID CSS，命名為content-R
- 11.7 Margin：間距，設定180px (#content-L的寬度)
- 11.8 #content-R?的字型設定
- 11.9 #content-R?背景設為白色
- 11.10 #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服
- 11.11 #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)
- 11.12 於#content-L?插入影像
- 11.13 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字
- 11.14 選取，設成清單項目
- 11.15 Back回上行?Enter段落?成為清單li
- 11.16 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list
- 11.17 新增ID CSS命名為L-list
- 11.18 #L-list?的字型設定
- 11.19 將#L-list,清單樣式設為none(無樣式)
- 11.20 將#L-list,Margin、Padding 皆設為0，清除清單預設距離
- 11.21 雙欄式網頁及左側的L-list,清單樣式大致設定完成
- 12. 表格設定的步驟
- 12.1 於#content-R插入表格
- 12.2 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題
- 12.3 將資料分別整理至表格之中
- 12.4 將表格自行命名為monent-table
- 12.5 在程式碼欄，將所有表格標題，由<td></td>改為<th></th>
- 12.6 在table下 插入表格大標題<caption></caption>
- 12.7 新增.monent-table tr th 標題CSS樣式
- 12.8 設定表格標題字型、設定表格標題底色
- 12.9 新增.monent-table tr td 表格內文CSS樣式
- 12.10 .monent-table tr td 表格內文，Padding內距與邊框底線的設定
- 12.11 新增.monent-table caption 表格大標題CSS樣式
- 12.12 .monent-table tr td 表格內文，底色與邊框底線的設定
- 13. 錨點連結設定的步驟
- 13.1 在標題欄前，插入→命名錨點，並自行命名
- 13.2 於每個標題前，分別命名錨點
- 13.3 在header標題欄，插入→命名錨點，並自行命名為top
- 13.4 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01
- 13.5 分別設定完成
- 13.6 插入回前一動作#top 的連結│BACK│
- 13.7 │BACK│設置靠右對齊
- 14. 左側清單列按鈕設定的步驟
- 14.1 新增 #L-list li a 左側清單超連結CSS設定
- 14.2 設定#L-list li a ，字型及底部邊框的設定
- 14.3 設定#L-list li a ，的區塊為block
- 14.4 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定
- 14.5 設定#L-list li a:hover ，字型、底色、底部邊框的設定
- 14.6 設定後，滑鼠移過的效果
- 14.7 設定#L-list li a:hover ，加入底圖的設定
- 14.8 設定#L-list li a:hover 高度
- 14.9 設定後，滑鼠移過的底圖效果
- 15. 表格的概述
- 16. 表格中的標記
- 17. 表格的邊框
- 17.1 設定儲存格的邊框
- 18. 一、透過CSS，以清單 ul 及 li 製作網頁導覽列
- 19. 二、以Dreamweaver搭配設計版面與程式碼的分割畫面的製作步驟
- 19.1 1.清單文字採用＜ul＞標籤定義清單的範圍，並使用＜li＞標籤定義個別項目
- 19.2 2.清單文字採用＜ul＞標籤定義清單的範圍，並使用＜li＞標籤定義個別項目
- 19.3 3.接著，加入連結的語法
- 19.4 4.接著設定導覽列的ID名稱為#button，直接設定於＜ul＞
- 20. 一、繞圖排文
- 20.1 1.在準備好的文字中插入圖片
- 20.2 2.新增類別CSS，命名為floatleft
- 20.3 3.Float浮動設定Left靠左對齊，Padding內距?上右下設定為20px
- 20.4 4.將圖片設定為靠左的浮動，選取類別中的floatleft
- 20.5 5.圖片靠左浮動，並與內文產生20px的內距，與文字產生一段舒服的距離
- 20.6 6.以類似的方法，設定置右圖片，新增類別CSS，命名為floatleft
- 20.7 7.Float浮動設定Right靠右對齊，Padding內距?上左下設定為20px
- 21. 二、推文按鈕的應用
- 21.1 1.插入準備好的臉書、噗浪及推特的按鈕圖片
- 21.2 2.替代文字中寫入：將本篇文章推薦到臉書
- 21.3 3.為圖像設定類別CSS命名為iconstyle
- 21.4 4.分享到臉書、噗浪及推特的JavaScript語法
- 21.5 5.點選按鈕，進入行為面板
- 21.6 6.點選→行為→呼叫JavaScript
- 21.7 7.分別複製語法後貼上
- 21.8 8.可以試試看成效囉，不過要上傳到網路後，才能真正分享喔!
- 22. 三、圖片的彈跳視窗設定
- 22.1 1.點選圖片，進入行為面板
- 22.2 2.點選→行為→開啟瀏覽器視窗，並設定，填入圖片的寬高
- 22.3 3.點擊圖片後的效果<
- 23. 「檔名」注意勿用大寫
- 24. 「路徑」勿以自己電腦的路徑為路徑
- 25. [知識補充] 許多常見HTML標籤有預設邊距（margin）
- 26. [實作經驗] 適當使用內距（padding）讓版面平衡
23. 「檔名」注意勿用大寫
檔名盡量勿用大寫（或中文），尤其是 index.html 主頁。例如下圖中檔名寫成 index.HTML 而造成主頁無法呈現而以「資料夾」模式呈現。
24. 「路徑」勿以自己電腦的路徑為路徑
任何網頁檔案的路徑都不應以自已電腦裡的路徑為網頁檔案路徑，也就是不能以裡面有 C: / D: / F: 這種自己電腦的路徑直接使用（如底下的錯誤範例）。正確的寫法有二種。第一種是直接以檔名或檔名+資料夾為路徑的「相對路徑」。另一種是連完整的「網址」都加上的「絕對路徑」。例如：http://mepopedia.com/~jinjin/web/style.css。
要強調的是，「路徑」是寫給「伺服器」看的，寫上「F|/大學生了沒/網頁設計/style.css」這樣的路徑對伺服器主機是沒有意義的。
以 CSS 路徑（style.css）為例：
25. [知識補充] 許多常見HTML標籤有預設邊距（margin）
常見有預設邊距的標籤有 h1、h2 (等)、p、li 等，有時若沒有將 margin 設為 0 (RESET)，預設的 margin 常會對版面造成與預期不一的效果。以下 <h1> 為例說明。
預設邊距 RESET 前：
上圖中網頁以 <h1> 標籤標示「Claude Monet」，可以看到上方有一塊沒有被圖片填滿的「底色」。這個底色就是因為 h1 有預設 24px 的上下邊距，而下邊距 (margin-bottom) 的效果可以在與「forever impression」的文字區的間距看出來。
預設邊距 RESET 後：
26. [實作經驗] 適當使用內距（padding）讓版面平衡
以上面同一個例子說明，在頂圖區塊 (#header) 中加入適當比例之 padding (例如：padding: 20px 0 30px 30px) 可以讓文字排列更加平衡有美感：
