一、開啟【default.docVIP

CSS樣式表製作 作品主題【花茶介紹網站】 1插入AP DIV 2設定CSS樣式 3建立個別樣式 4套用圖片樣式 5建立字型樣式 *重點回顧 *學習評量 1.開啟【Default.html】編輯，插入【AP Div】。 Step1：開啟Adobe Dreamweaver CS4，點選【檔案】面板 →【開啟舊檔】→ 選擇【花茶】資料夾 → 雙擊『Default.html』or 選擇『Default.html』按【開啟】。 Step 2：游標在main.htm頁面內點一下，點選【插入】→【版面物件】→【AP Div】新增一個”apDiv1”的元素。 Step 3：將滑鼠點一下新增的AP Div1元件，在【屬性】面板中設定： 1.【左】→【686px】。 2.【上】→【19px】。 3.【寬】→【300px】。 4.【高】→【225px】。 Step 4：把游標置於AP Div1元素內，執行【插入】→【影像】，選擇「images」的資料夾中的「a1.jpg」，按兩次確定。 Step 5：重複上述步驟2~步驟4，新增AP Div2元素，並在【屬性】面板中設定： 【左】→【860px】、【上】→【245px】、【寬】→【300px】、【高】→【225px】； 圖片影像選擇「images」的資料夾中的「a2.jpg」。 2.新增二個類別樣式在main.css的樣式表中。 Step 1：執行【格式】→【CSS樣式】→【開新檔案】新增CSS規則： 1.【選取器類型】選擇【類別（可套用途至任何HTML元素）】。 2.【選取器名稱】輸入【a1】。 3.【規則定義】選擇【main.css】。 4.按【確定】。 Step 2：設定完成會彈出.a1的CSS規則定義的視窗，選擇【擴充功能】設定分類視覺效果： 1.在【Cursor】選擇【help】。 2.【Filter】設定【Alpha Opacity 0, FinishOpacity 100, Style 1, StartX 0, StartY 0, FinishX 0, FinishY 225 】。 3.按【確定】。 Step 3：重複步驟1~步驟2，一樣在「main.css」樣式表中新增「a2」的類別樣式，並設定其擴充功能： 1.在【Cursor】選擇【wait】。 2.【Filter】設定【Alpha Opacity 100, FinishOpacity 0, Style 2, StartX 0, StartY 0, FinishX 300, FinishY 225 】。 3.按【確定】。 3 main.htm連結main.css，將圖片套用樣式。 Step 1：點選【格式】 → 【CSS樣式】 → 【附加樣式表】設定： 1.【檔案/URL】選擇【main.css】。 2.【增加成為】選擇【連結】。 3.按【確定】。 Step 2：在AP Div1內點選a1.jpg的圖片後，在右邊CSS樣式版面點選a2， 按右鍵選擇【套用】；此步驟再重複一次設定a2.jpg的圖片。 Step 3：執行【檔案】→【全部儲存】，儲存已編輯完的檔案並關閉檔案。 4 設定f1.htm、f2.htm的字型類別樣式。 Step 1：另外開啟「f1.htm」、「f2.htm」網頁檔案，點選【檔案】面板 →【開啟舊檔】→ 選擇【花茶】資料夾 → 選取『f1、f2』按【開啟】。 Step 2：執行【格式】→【CSS樣式】→【開新檔案】新增CSS規則： 1.【選取器類型】選擇【類別，（可套用途至任何HTML元素）】。 2.【選取器名稱】輸入【b1】。 3.【規則定義】選擇【僅此文件】。 4.按【確定】。 Step 3：設定.b1的CSS規則定義： 1.在【Font-family】選擇【Adobe 黑體 Std R】。 2.【Color】輸入【#60C】。 3.按【確定】。 Step 3：點選虛線外框，此時顏色變成藍色的線框，在下方【屬性】版面中選擇類別為【b1】，此時字型將會套用成剛所設定的。 Step 4：切換至f2.htm，重複上述步驟2~步驟3，只需將選取器名稱改為【b2】，其餘如同。 重點回顧 1.在選取器類型有「類別」、「標籤」、「進階」，在設定名稱時必須以句點開頭，且可以包含任何字母和數字組合。 2.新增CSS規則，可以透過「標籤」來定義CSS樣式的字型與邊框，及設定有超連結之文字。 學習評量 1. 3 Dreamweaver中的CSS功能可以設定下列哪些? 1 去除連結底線 2 重新定義標籤 3 以上皆可 2. 1 要修改CSS樣式時，須在Dreamweaver中的CSS功能面板中按哪顆鈕 1 編輯樣式 2 附加樣式 3 新增樣式 3. 3 要新增CSS樣式時，須在Dreamweaver中的CSS功能面板中