- 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 設定儲存格的邊框
http://mepopedia.com/~jinjin/web/hw06-ex/
在進入表格之前，先複習一下基本的設定，大家可以下載練習檔來練習，希望可以透過影片讓大家對於CSS基本的設定更佳的熟練，也先把基本的部分做好設定。
Dreamweaver中#content、#footer、h2、項目清單的CSS設定
http://www.youtube.com/watch?v=gvI0qYcn9ko
15. 表格的概述
表格是網頁中常出現的元素，在傳統的網頁設計中表格除了有整理資料的功能外，還常被使用為整個頁面排版的工具，但是在CSS逐步展開WEB標準設定後，表格逐漸不再擔任重要的版面配置任務，而以DIV取代，但表格仍然在整理資料上，扮演重要的角色，本單元也以CSS搭配表格，講述如何以表格整理資料，並同時展現美感的部分，包含：色彩、標題、邊框、背景等。
16. 表格中的標記
最常用的與表格相關的標記為<table>、<tr>、<td>。
<table>：定義整個表格。
<tr>：定義一列
<td>：定義一個儲存格
如以下是三列兩欄表格的HTML語法：
| 表格儲存格 | 表格儲存格 |
| 表格儲存格 | 表格儲存格 |
| 表格儲存格 | 表格儲存格 |
另外為了使CSS可以更活用的設計表格樣式，還有兩個常用的標記：
<caption>：定義表格的大標題，該標記可以出現在<table></table>之間的任意位置，不過通常出現在第一排<table>標記之後。
<th>：是table header的縮寫，即表頭的意思，在表格中用於列或欄的名稱，跟<tr>和<td>很類似，主要是針對他們進行樣式設定。
例如表格也可以這樣表現：
| 表格標頭 | 表格標頭 |
|---|---|
| 表格儲存格 | 表格儲存格 |
| 表格儲存格 | 表格儲存格 |
各部位如圖所示
17. 表格的邊框
1. 設定儲存格的邊框
border-collapse:collapse;
HTML屬性中：
cellpadding：設置儲存格內容和邊框之間的距離
cellspacing：設置相鄰儲存格邊框之間的距離
以CSS實現cellpadding的作用，只要對td使用padding就可以，而對儲存格使用margin是無用的，必須在table使用專門屬性：border-spacing來代替他。
接下來則以實例來解說表格的應用：
Dreamweaver表格製作-TABLE,TR TD TH caption的CSS設定
http://www.youtube.com/watch?v=3gPx_YYE1yI
Dreamweaver表格製作-細部調整、圖片開啟新視窗、超連結等CSS的設定
http://www.youtube.com/watch?v=69CMaum2WPY
Dreamweaver中表格CSS設定以及影音嵌入
http://www.youtube.com/watch?v=lXMUKwYmBqQ