- 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）讓版面平衡
- 27. 1.改變底色的做法/文字居中排法
- 28. 2.改變文字顏色的做法
- 29. 三、範例語法
- 30. 1.範例圖片按鈕的語法如下
- 30.1 1.HTML語法：
- 30.2 2.CSS部分的語法如下：
- 31. 2.透過CSS，以清單 ul 及 li 製作網頁導覽列的語法如下
- 31.1 1.HTML語法：
- 31.2 2.CSS部分的語法如下：
永遠的印象--莫內，範例網址：
1.透過CSS，以清單 ＜ul＞及＜li＞製作網頁導覽列
http://mepopedia.com/~jinjin/web/hw04/ （滑入僅文字變色的導覽列）
http://mepopedia.com/~jinjin/web/hw04-1/ （滑入底色變色及文字置中的導覽列）
2.以圖片按鈕製作的導覽列
http://mepopedia.com/~jinjin/web/hw04-2/
範列 hw04 (文字變色)
範列 hw04-1 (背景變色及文字置中)
範列 hw04-2 (圖片式導覽列)
首先談到的是網頁導覽列的製作，其中分為以清單 ul 及 li 製作與圖片製作兩類
一、透過CSS，以清單 ul 及 li 製作網頁導覽列
導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。
在整個網頁設計中，肩負著重要資訊的描述以及視覺注視的任務，不能搶過主要的視覺焦點，卻要能醒目及兼具設計質感，達到網頁設計的平衡。
以往許多類似的做法，有用表格table製作，或用圖片製作，各有其優缺點：
以表格製作雖然看似架構簡單，但表格本身實際內容複雜(包含TR TD)，以CSS設定會更為繁瑣。
以圖片來製作雖然變化較多，但修改不易（例如只是修改文字內容，整張圖片或一組圖片就需重作）。
以清單 ul 及 li 製作網頁導覽列則是目前設計的趨勢，既簡潔又富設計感，修改也容易。例如修改按鈕的背景顏色只需在CSS中作一次的設定，但圖片則要整組重作（有時數目可能非常多）。
有關以 table 製作與以 CSS 製作的差異可以從觀察下面二個例子發現：
Table: http://www.sitepoint.com/examples/cssvtables/tables4.html
(此例中的留著許多邊框是為了凸顯多層表格，不是設計得不好看)
CSS: http://www.sitepoint.com/examples/cssvtables/butterflycss.html
以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法：
清單文字採用＜ul＞標籤定義清單的範圍，並使用＜li＞標籤定義個別項目，例如：
- About
- Works
- Video
- Links
- Story
即會產生以下的清單列
- About
- Works
- Video
- Links
- Story
接著，加入連結的語法
即會產生以下有連結的清單列
接著設定導覽列的ID名稱為#button，直接設定於＜ul＞
語法為：
接下來就開始開始設定ＣＳＳ的部分
#button {
/*高度設定*/
height: 22px;
/*文字設定*/
font-weight: bolder;
color: #FFF;
font-size: 14px;
/*背景色設定*/
background-color:#6E6E6E;
/*將內定的邊距清除*/
margin: 0px;
/*將清單內定的內距清除(無清除，則左側會多出約40px，範例二可不用加這一項*/
padding:0px;
}
27. 1.改變底色的做法/文字居中排法
#button li {
/* 讓各個清單元素靠左對齊，由原本的垂直排列變成水平排列，形成水平清單 */
float:left;
/* 設定清單文字範圍的寬度 */
width:178px;
/* 去除清單文字前面的小點*/
list-style-type:none;
/* 讓清單文字居中對齊 */
text-align:center;
/* 設定背景色，依個人喜好調整背景色，但要符合整設計風格 */
background-color:#6E6E6E;
/* 設定字距為2px，非必要 */
letter-spacing: 2px;
/* 設定左邊的白邊樣式，可依個人喜好調整 */
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;
/* 右邊留白1像素 ，可依個人喜好調整*/
margin-right:1px;
}
#button li a {
/* 連結範圍充滿整個區塊 */
display: block;
/* 單個連結範圍的框度和高度*/
width: 180px;
height:20px;
/* 設定連結範圍向上的內距，依狀況調整 */
padding-top:2px;
/* 連結的文字設為白色以及無裝飾(無底線) ，依個人喜好調整背景色，但要符合整設計風格*/
color: #FFF;
text-decoration: none;
}
#button li a:hover{
/* 設定滑鼠移過時，清單改變的底色設定 */
background-color:#39919F;
}
完成範例
http://mepopedia.com/~jinjin/web/hw04-1/ （滑入底色變色及文字置中的導覽列）
28. 2.改變文字顏色的做法
#button li {
float: left;
list-style-type: none;
letter-spacing: 2px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;
padding-left: 10px;
}
#button li a {
display: block;
width: 160px;
height: 22px;
padding-top:2px;
color: #FFF;
text-decoration: none;
}
#button li a:hover{
/* 設定滑鼠移過時，改變文字顏色的設定 */
color: #7CCBDC;
}
完成範例
http://mepopedia.com/~jinjin/web/hw04/ （滑入僅文字變色的導覽列）
二、以圖片置入製作網頁導覽列
※以圖片製作導覽按鈕的優點：可依設計者喜好設計多樣風格的按鈕
※以圖片製作導覽按鈕的缺點：修改較不方便，一定要進繪圖軟體修改，製作時間較長，檔案容量較大
1.以photoshop製作頂圖及按鈕
設定與裁切好尺寸，此範例設定為寬900px，按鈕寬180px，高21px
以參考線（尺規CTRL+R 拉出參考線）拉出所需的長寬
2.在清單列打入文字，並設定文字陰影，以增加閱讀性
3.在同一位置放上中英文字
4.將文字分別複製修改至適當位置
5.選擇工具箱中，裁切工具底下的切片工具，進行切片工作
6.使用切片工具，將頂圖案按鈕依照參考線手動切片，（或按參考線自動產生切片後，將頂圖部份合併）
7.直接按確定
8.格式選僅影像，全部使用者切片，按確定
9.將頂圖與按鈕將切割大小自動輸出至自動產生的images資料夾中
10.將英文按鈕的部分，按住ＳＨＩＦＴ分別選取，按確定輸出
11.在切片的選項，選取 選取的切片
即會在images資料夾，自動產生英文組的按鈕
放入按鈕的方法，請見講義三
連結按鈕的方法請參考下圖
