- 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部分的語法如下：
- 32. 前言
- 33. HTML的最基本結構與練習
- 33.1 作業一的步驟與要求：
32. 前言
基本的網頁是由HTML與CSS所組成
HTML負責建構網頁的基本架構
CSS專門負責美化網頁的任務
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家第一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
建議需先安裝的軟體
好用的免費記事本軟體
Notepad++官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FileZilla 免費又好用的FTP軟體，供客戶端和伺服器端使用
本學期作業都需透過FTP上傳，直接從網路上看到作品
請同學務必下載並學會如何使用
官方下載網頁：http://filezilla-project.org/
GoogleChrome
https://www.google.com/chrome?hl=zh-TW&brand=CHMI
速度快又好用的瀏覽器，觀察網頁與法更方便，網頁設計必備
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: FireBug ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
推薦很棒的CSS網站
CSS-TRICKS http://css-tricks.com/
HTML & CSS基礎教學影音(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
其他HTML & CSS相關網站
有空可多多研讀，增加自己的功力
HTML
1.HTML教學導覽 http://www.powmo.com/
2.HTML 簡介與應用 http://neural.cs.nthu.edu.tw/jang/books/html/
3.HTML Tutorial http://www.w3schools.com/html/
4.HTML教學 http://www.pcnet.idv.tw/pcnet/html/html.htm
5.HTML教學示範 http://www.csie.nctu.edu.tw/~jglee/teacher/content.htm
6.HTML 語言簡介 http://203.71.199.2/HTML/%E4%BD%95%E8%AC%82HTML.htm
7.HTML教學 http://m7.dfps.tp.edu.tw/chen/main5/ahtml/01.asp
CSS
CSS語法教學攻略篇 http://andyliudesign.idv.tw/31
CSS 語法教學 http://css.1keydata.com/tw/
語法 | 基本的css語法縮寫 http://blog.mukispace.com/css-shorthand/
CSS 樣式表簡介 http://www.pt.ntu.edu.tw/hmchai/ptcomputer03_2/hcss/cssintroduction.htm
ＣＳＳ教程（簡體）http://www.dreamdu.com/css/
33. HTML的最基本結構與練習
HTML的架構是由
網頁所有檔案命名原則：
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
1. 作業一的步驟與要求：
請自行以自己的內容，完成以下需求
1.先建立一以 hw01-學號 命名的資料夾，於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於資料夾內，可直接將檔案拉入瀏覽器，觀看預覽效果
3.如果想把字體變得又大又粗，可以用<標題1>的語法，於字的前後加上
大標題
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的第二行文字，用以下p 語法來換行
嗨!大家好
welcome to my website!!!
5.接著我們另存新檔為: about.html，依樣存放於資料夾內，製作第二個頁面，新增如下文字:
接著加入超連結語法 a ，如下：
拉入瀏覽器預覽效果
6.要出現連結效果還要加入以下語法:
index.html
about.html
即可以呈現互相連結的效果
重整瀏覽器預覽效果
7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接在h1中直接加入style的語法
如
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
ps.可以把網站架構打得完整一點之後，再以另存新檔的方式，儲存成about.html
(3).接著在新的style.css檔案裡鍵入
接著重整瀏覽器會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: http://rhinejo.myweb.hinet.net/home/color/color-cord.html
Adobe Kuler: http://kuler.adobe.com/
調色盤-色票產生器: http://cowwu.myweb.hinet.net/note/js/Color.htm
MyChat 調色盤 http://mychat.to/pub_java/selcolor.htm
也可以改變字體大小，於style.css設定如下
重整FireFox看效果
12.接著於文字的外層包上一層div
補充說明：
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。
index.html
style.css
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的＜HEAD＞＜/HEAD＞以及＜＜BODY＞＜/BODY＞。