套用与管理css样式表制作.pdf

套用與管理CSS 樣式表製作 作品主題 【星座介紹】 1 建立框架頁 2 表格編輯 3 CSS 設定以及插入影像 4 建立div 標籤 重點回顧 學習評量 1 、建立固定上頁框 Step1. 【檔案】→ 【開新檔案】→ 【來自樣本的頁面】→ 【頁框組】→ 【固定 上頁框】。 2 、在top.htm 插入表格且進行編修 Step1. 點選工具列【插入】→ 【表格】→插入一個為 【2 列2 欄】的表格、表 格寬度設定為600 像素、邊框粗細設定為為像素，設定完之後按【確定】 鈕 。 Step2. 選取 【表格】→id 設定為 【a 】、對齊方式設定為 【置中對齊】。 【如果沒有全部選取，請點選table#a 】 Step3. 選取第1 列表格的第1 、2 欄儲存格 。 可以點選【屬性上方的tr 】→點擊屬性面板的【合併選取的儲存格鈕】按鈕。 Step4. 在表格輸入你要輸入的文字。 Step5. 選取表格table#a ，【視窗】→打開【CSS 樣式】編輯視窗→右下方【新 增css 規則】然後按【確定】鈕 。 Step6. 設定css 規則定義  Font-family 字型 : 標楷體  Font-size(大小) ：20px  Color(顏色) ：#90F  Background-color(背景顏色) ：#3FF  區塊Text-align(表格位置) ：center(置中) Step7. 完成後如下圖所顯示。 3 、插入影像與Div 和編輯CSS Step1. 【檔案】→ 【開新檔案】→選擇【空白頁面】→點選【HTML 】→版面選 擇【無】→點選【建立】按鈕 。 Step2. 點選工具列【插入】→ 【影像】→ 【選一張你要的圖片】→按【確定】 鈕→【如果有跑出另一個視窗】在一次按【確定】鈕 。 Step3. 點選 【圖片】在【屬性】面板中設定圖片大小，寬度設定為370 、高度 設定為510 、邊框設定為0 。 Step4. 點選空白處 【屬性】→ 【外觀CSS 】→ 【頁面屬性】。 Step5. 【外觀CSS 】分類→左邊界設定為0 、上邊界設定為0 (讓圖片左邊與上 方不會有空白處)→按【確定】鈕 。 Step6. 【新增CSS 規則】→ 選取器類型：類別(可套用任何HTML) 、選取器名 稱：c (可以依照自己設定) 、規則定義：僅此文件→按【確定】鈕 。 Step7.設定c 的css 規則定義  字型：Font-size ：12pt →Color 顏色 ：#666 。  背景：Background-color 背景顏色 ：#FFC 。  區塊：Letter-spacing ：3pt 。  方框：Width ：500px 、Height ：505px 。  邊框：Style 勾選「全部一樣」：outset → Width 勾選「全部一樣」：thin → Color 勾選「全部一樣」：#F90 。  定位：Position 設定為absolute → Overflow 設定為auto → Placement 中Top 輸入0 → Left 輸入9.8cm 。 Step7. 在圖片 【右邊】→ 【插入】→版面物件 【Div 標籤】→插入選【在插入 點上】→類別 【C 】→按【確定】鈕→在框裡輸入你要的文字或是去找 篇文章複製貼上 。 Step8. 網頁呈現出來的結果(主要