Dreamweaver CS4 /CSS 筆記

Dreamweaver CS4

Live View 即時檢視

分割視窗: 檢視 / 垂直分割 (on /off )

Pallets 面板:

可依照需求不同切換"設計師"、"傳統"等等不同的版面配置。如果使用上常常需要開關特定的面板，可以考慮按照自己需求自訂"工作區(Workspace)。

屬性(Properties): 分成HTML及CSS來操作，可以配合頁底的HTML tag方便點選。

在Dreamweaver裡移動及複制檔案會比較安全，Dw會自動詢問是否更新相關路徑。

**全站要採用同樣的<h1><h2>....等標籤的策略，如此CSS才能方便順利運作。

• <h1>每個頁面的標題使用
• <h2>頁面內各文章標題使用
• <h3>文章之次標題使用
• <h4>文章內需要單獨強調一列文字時使用

<ol>數字排列

1. <li>數字排列一</li>
2. <li>數字排列二</li>

</ol >

<dl>定義縮排

<dt>標題</dt>

<dd>解釋</dd>

</dl>

建立"新文件"時,面板中間選擇不同的版面,某些程式碼裡有詳細的解說。

從外面文件(如word檔)可以設定剪貼的格式(建議選用"結構+基本格式)。

CSS

h1 {font: 1.4em Arial; color:#ff0; }

偏好設定 -> CSS styles -> use shorthand

• ( )font (不選,易有bug)
• (v)background
• (v)margin & padding
• (v)Border & Border width
• (v)List - style

下方屬性CSS設定: Rule 切換可以挑選特定CSS規則修改。
框選部分內文,修改CSS時會自動進入"新增CSS規則"。

Code Navigator

在內文上,游標停留一下或是按Alt-Click就會出現，可以方便選擇相關的CSS規則。

CSS設定順序

Cascade即有一層一層之意思,也就是先從最大的範圍開始設定,然後再慢慢設定較小的細節。後面細節若有相同設定,即不需重複設置。

例：先設定body之基本字型,顏色;再來設定本文，h1, h2標題等等。

CSS語法,先後順多是有分別的，後面的語法會把前面相同功能的語法給蓋掉。

Controlling Typographics

絕對尺寸：

• Points (如 12pt) 約1/72吋
• inches (如 .25in)
• Centimeters (如 30cm)

相對尺寸：

• Ems (如：1em) 等同該字體裡,大寫M的高度。
• Ex (如:1.2ex) 等同該字體裡,小寫x的高度。
• Percentage (%)
• Pixels (16px) (不建議使用?)

行高設定：

• 內文建議使用1.2em ~ 1.6em,在螢幕上增加可讀性。
• 使用絕對尺寸標示行高,如此之計算單位會把文字推到框框的正中間,上下距離也就是各為行高設定值/2(方便Menu之類的應用)
• 註:一般相對尺寸標示,就會計算以文字底線往上推
• 內文等多行文字,在Dreamweaver 要用multiple來做單位把文字推開(手工coding的話,就不用單位, 如 line-height: 1.4; )

Margin / Padding

每個瀏覽器對於Margin 及Padding都有各自不同的預設值, 若要做到一致的效果,建議先把各種tag的margin及padding預設值先全部歸0,以免產生奇怪的效果：

div,h1,h2,h3,h4,h5,h6,p,pre,address,blockquote,span,ul,ol,li,dl,dd,dt,img { padding:0; margin:0;}

margin 控制各元件之間的距離；padding控制元件內容與元件框之間的距離。

vertical-align只對inline element有作用(如strong em等等)。

流行的連結CSS設定(消除底線 Rollover變色)

a:link, a:visited {
text-decoration:none;
color:#666;
}

a:hover {
color:#900;
border-bottom:1px dashed #900;
}