- 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＞
18. 一、透過CSS，以清單 ul 及 li 製作網頁導覽列
導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。
在整個網頁設計中，肩負著重要資訊的描述以及視覺注視的任務，不能搶過主要的視覺焦點，卻要能醒目及兼具設計質感，達到網頁設計的平衡。
以清單 ul 及 li 製作網頁導覽列則是目前設計的趨勢，既簡潔又富設計感，修改也容易。例如修改按鈕的背景顏色只需在CSS中作一次的設定，但圖片則要整組重作（有時數目可能非常多）。
以下為Dreamweaver搭配設計版面與程式碼的分割畫面，大家能更清楚的了解清單導覽列的製作方法
19. 二、以Dreamweaver搭配設計版面與程式碼的分割畫面的製作步驟
1. 1.清單文字採用＜ul＞標籤定義清單的範圍，並使用＜li＞標籤定義個別項目
Image may be NSFW.
Clik here to view.
2. 2.清單文字採用＜ul＞標籤定義清單的範圍，並使用＜li＞標籤定義個別項目
Image may be NSFW.
Clik here to view.
3. 3.接著，加入連結的語法
Image may be NSFW.
Clik here to view.
4. 4.接著設定導覽列的ID名稱為#button，直接設定於＜ul＞
Image may be NSFW.
Clik here to view.
5.
Image may be NSFW.
Clik here to view.
6.
Image may be NSFW.
Clik here to view.
7.
Image may be NSFW.
Clik here to view.
8.
Image may be NSFW.
Clik here to view.
9.
Image may be NSFW.
Clik here to view.
10.
Image may be NSFW.
Clik here to view.
11.
Image may be NSFW.
Clik here to view.
12.
Image may be NSFW.
Clik here to view.
13.
Image may be NSFW.
Clik here to view.
14.
Image may be NSFW.
Clik here to view.
15.
Image may be NSFW.
Clik here to view.
16.
Image may be NSFW.
Clik here to view.
17.
Image may be NSFW.
Clik here to view.
18.
Image may be NSFW.
Clik here to view.
19.
Image may be NSFW.
Clik here to view.
20.
Image may be NSFW.
Clik here to view.
21.
Image may be NSFW.
Clik here to view.
