十二年國民基本教育中等學校教師教學專業能力研習五堂課 主題：有效教學策略設計- 以KompoZer&CSS網頁設計教學為例 國立善化高級中學 教師 蕭嘉民
演講大綱 課程規劃 使用KompoZer的動機 KompoZer與FrontPage功能比較 KompoZer網頁設計軟體的CSS編輯功能
課程規劃 必修課教學進度表 選修資訊科學與應用專題
資訊科技概論課程常遇到的問題? 每週節數少、班級數多，學生多，作業改不完。 理論教學與實作練習，上課時間不夠用。 學生用Email交作業，管理與批改不易。 實作練習，教師演練過程，學生有時未注意聆聴，課後常要求老師，重新講解。 相關問題可參閱資訊學科中心99年3月電子報。
數位教學平台
教科書授課內容
KompoZer教學影音平台
使用KompoZer的動機 許多教過網頁設計課程的老師，都有同樣的經驗，鼓勵學生儘量利用學校設備與軟體，多做練習或完成作業，因為回家可能就無軟體可用的窘境。 製作個人網頁為學期報告，學生需隨時有可以使用、可學習的軟體與參考資料，撰寫報告。 自由軟體世界希望能以KompoZer與商業版網頁設計軟體互別苗頭，只是KompoZer的知名度不像FrontPage與Dreamweaver那麼高。
KompoZer的特點 KompoZer 是一套易學易用、所見即所得網站編寫系統，並且能結合網站檔案管理，使用KompoZer設計網站相當容易。 KompoZer內部是架構在 Gecko開放原始碼、C++編寫的網頁排版引擎，值得注意的是對XML、CSS 和 JavaScript的支援。 KompoZer具有跨平台的優點，在Linux系統、微軟Windows與蘋果麥金塔電腦皆有支援。
下載KompoZer軟體 下載KompoZer軟體，請連線到http://kompozer.net/download.php 兩個版本的KompoZper可供使用者下載: 穩定版0.7.10版，需另行下載中文化套件 (2007-08-30釋出) 。 另一個是版本較新的發展版0.8b3 版(2010-02-28釋出)，已有最新的中文化版本可以下載。
KompoZer與FrontPage功能比較 建立新網站與設定網頁編碼方式比較 FrontPage KompoZer
KompoZer與FrontPage功能比較
KompoZer與FrontPage功能比較
KompoZer與FrontPage功能比較
KompoZer與FrontPage功能比較
KompoZer與FrontPage功能比較
CSS串接樣式表 CSS串接樣式表，主要用來描述網頁外觀的程式語法。 CSS主要的目的，是將網頁內容與外觀格式分開，一般來說，設定網頁內容，採用HTML標籤語法，將網頁的外觀格式設定交由CSS負責設定。
KompoZer網頁設計軟體的CSS編輯功能 CSS外部樣式表建立與設定－使用CSS設定圖層與圖層文字設定為例。
CSS樣式表的優點 設計製作網頁樣式更有效率：將常用的文字段落、表格型式，透過CSS定義可以更簡潔，格式更一致。
CSS語法規則 所有定義必需包含在大括號{}，每一個定義內容主要由選擇器(selector)與定義內容組成，必須用分號結束。 CSS稱HTML語法的標籤元素為選擇器selector，定義內容區分為屬性與屬性值設定。
選擇器依對象不同分為三類： 標籤選擇器：以HTML標籤為選擇器的對象。 類別選擇器：class類別選擇器以.開頭，HTML的所有標籤都可以當做CSS的選擇器使用，使用類別選擇器，主要以類別為套用對象，也就是對於所屬類別的元素，套用這些規則。 ID選擇器：ID選擇器是以#開頭，代表以ID=○○的標籤為套用對象，對於名稱為○○標籤，套用此規則。 ID選擇器在HTML語法中只能套用一次，類別class選擇器則可套用多次。
標籤選擇器 以HTML標籤為選擇器的對象，語法如下： 執行結果
類別選擇器 class類別選擇器以.開頭，HTML的所有標籤都可以當做CSS的選擇器使用，使用類別選擇器，主要以類別為套用對象，也就是對於所屬類別的元素，套用這些規則。 執行結果
ID選擇器 ID選擇器是以#開頭，代表以ID=○○的標籤為套用對象，對於名稱為○○標籤，套用此規則。 ID選擇器在HTML語法中只能套用一次，類別class選擇器則可套用多次。 執行結果
CSS樣式表的分類 運用HTML語法在網頁中設定字型、粗體與斜體，敍述如下： 執行結果
CSS樣式表的分類 內部樣式檔案: 要在網頁html檔案中，使用CSS功能有兩種主要方式：行內樣式表(inline Style)與內嵌樣式(embedded style sheets)表。 外部樣式檔案:有連結外部樣式檔 (linked style sheets)、匯入外部樣式檔案 (imported style sheets) 兩種。 匯入樣式表作法在程式中透過@import“樣式表.css”指令，加在兩個<style></style>之間，相當於將樣式表內容加到HTML檔案中。 由於匯入樣式表的方式，某些瀏覽器並不支援，所以建議使用連結外部樣式檔，本教材不再對匯入外部樣式檔案的方式再做說明。
CSS樣式表的分類 －行內樣式表 語法說明，紅色部分為CSS行內樣式語法： 執行結果
CSS樣式表的分類－內嵌樣式表 CSS敍述寫在網頁<Body>前的兩個<head>之間，影響範圍只有網頁本身。 執行結果 CSS敍述寫在網頁<Body>前的兩個<head>之間，影響範圍只有網頁本身。 定義是寫在<head></head>內的<style type="text/css"> </style>標籤中，紅色部分為CSS內嵌樣式表語法格式。 行內樣式表與內嵌樣式表語法作用範圍，只限檔案的HTML敍述內。 執行結果
CSS樣式表的分類－外部連結樣式表 p15執行結果 外部樣式表的優點在於：只要定義一個樣式檔，即可影響與其連結的HTML文件檔，而HTML只要使用到相同的標籤元素的都可以適用相同的設定，當標籤需要被修改時，設計人員只要修改標籤的定義即可，所以CSS可以將頁設計內容與格式分開設計。
KompoZer結合CSS行內樣式表 進行中文字型的設定 KompoZer無法直接這樣設定中文!
KompoZer結合CSS行內樣式表 進行中文字型的設定示範 網頁的文字段落，主要被包圍在<body></body>標籤中間，因此可透過內含樣式表的方式，直接對body標籤做修飾，達到設定文字段落的目的。
KompoZer結合CSS行內樣式表 進行中文字型的設定 執行結果 執行結果
KompoZer外部串接樣式表 將CSS語法匯整至CSS檔案中，供網站程式使用，再由每個網頁對此檔做連結，不用費時逐頁修改網頁外觀設定。
圖層範例說明 結合CSS語法設定DIV圖層，DIV標籤可以在網頁上任何地方設定區塊，區塊內可放置圖片與文字，再由CSS設定區塊的個別屬性。 如下圖，龍的圖片可直接盤據於其他圖片之上。
圖層範例說明 KompoZer完成龍的圖片設定後，patttern.css 鏈結樣式檔，增加以下內容 background-image: url(images/dragon.png); background-position: left top; margin-top: 5cm; margin-left: 3cm; width: 458px; height: 669px; font-family: Times New Roman;
圖層編輯－加入文字「龍行千里」 在圖層中加入文字「龍行千里」。 編輯步驟
圖層編輯－加入文字「龍行千里」 經KompoZer的設定後，pattern.css多出h2標籤元素的定義內容，針對「龍行千里」四個字的CSS語法定義，包含字型的大小、顏色、字型與相對於圖層的位置定義等等。 #my_photo1 { background-image: url(images/dragon.png); background-position: left top; margin-top: 5cm; margin-left: 3cm; width: 458px; height: 669px; font-family: Times New Roman; } h2 { font-size: 1.5cm; color: red; position: relative; margin-top: 3.5cm; margin-left: 1.5cm; font-family: 標楷體;}
KompoZer&CSS動態網頁選項清單設計 KompoZer不支援框架網頁製作，需另行撰寫框架頁HTML敍述，並向學生說明frameset語法規則。 圖左是個人網站的示範畫面，圖右為檔案結構圖。
框架頁的html語法 html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="keywords" content="蕭嘉民, java, jiamin, moodle" /> <meta name="description" content="蕭嘉民個人網站" /> <title>蕭嘉民的首頁</title> </head> <frameset cols="15%,*" frameborder="0"> <frame name="itempage" target="main" src="leftitem.htm" scrolling="no" noresize> <frame name="main" src="me.htm"> <noframes> <body> <p>This page uses frames, but your browser doesn’t support them.</p> </body> </noframes> </frameset> </html>
設定圖層背景相片 編輯框架頁左邊選項的網頁區塊，設定網頁編碼為UTF-8，以免上傳伺服器後，瀏覽時出現亂碼。
設定超連結選項的圖層 為了方便設定選項的位置，在設定選項的超連結時，新增圖層並命名為items，如圖框處為items圖層，並於圖層內輸入5個超連結選項的名稱。
設定超連結選項的動態效果 滑鼠游標移到選項上方時，選項變為反白的功能： 步驟一：改變選項字型與背景設定。 以Java Script撰寫，並不容易，但透過KompoZer＋CSS，可以不需撰寫程式，就可完成。 步驟一：改變選項字型與背景設定。 超連結的HTML語法敍述為<a href=“○○○.htm” target=“main”>○□○</a>，所以 CSS可針對<a>進行設定。
設定超連結選項的動態效果 步驟二：滑鼠游標移到選項上方時，選項變為反白，實作這個功能，需要再新增一個樣式規則#items a:hover，hover代表當滑鼠游標移到圖層items內的超連結<a>，要設定的動作或顯示的格式。
左選項網頁加入背景圖片 網頁加入背景圖片的CSS語法敍述為body { background-image: url(oo.jpg);}，所以CSS可針對body{background-image}進行設定。 在外部樣式檔設定背景圖片功能，必須僅限於左邊選項網頁，因此在此採用類別選擇器的設定來對左選項網頁背景進行設定。
KompoZer網頁設計課程評量 評量方式：請同學將每次上課所學習的軟體操作方式，以個人網頁為設計主題，逐次漸進地完成。個人完整報告需於學期結束前三週完成並上傳至網站，以便教師有足夠的時間進行評分，並讓學生修正作業缺點或不足之處，以下為公告給學生的作業內容。
Kompozer教學順序
KompoZer網頁設計課程評量 請同學依本學期所教的網頁設計課程，製作個人網站，所需呈現的網頁如下：左邊框架頁需有自我介紹、生活點滴、作品欣賞與心得寫作等四大選項，當使用者點選選項內容時，各選項的網頁內容會呈現在右邊框架頁中，各選項實作內容與所佔分數比重，說明如後
KompoZer網頁設計課程評量 一、自我介紹(15分)： 二、生活點滴(15分)： 1.需有影像清晰的個人生活照1~2張。 2.家庭狀況簡介。 3.個人專長與興趣。 4.學校生活。 5 .未來生涯規劃與展望。 二、生活點滴(15分)： 學校、社團或家庭生活清楚相片，至少6張，並註記日期與活動說明。
KompoZer網頁設計課程評量 三、作品欣賞(15分)： 四、心得寫作(10分)： 五、整體美感(15分)： 個人作品相片至少4張、或以讀書心得或文章寫作取代。 四、心得寫作(10分)： 請同學將修習資訊科技概論或學習設計網頁的心得，以圖文描述的方式撰寫，文字至少150-200字。 五、整體美感(15分)： 包含圖形選項、橫幅、圖片處理、背景之美工處理(同學可以GIMP 、InkScape、PhotoCap美工編輯)。
教學平台作業說明
KompoZer網頁設計課程評量 注意事項： 1.個人網站中所使用的圖片、文字、音樂或影片，請同學務必遵守著作權法。 2.上述資料將會在網站中呈現，請同學不可將個人的地址、電話、生日、家中成員等詳細或私密資料上網，否則造成個人資料外洩，老師將酌情扣分，若因而造成損失自行負責。 3.設計網頁，若有問題可參考網頁範例（http://210.60.253.18/~jiamin/100.htm），網頁中有去年高一的優良作品可供參考。
學生作品欣賞 更多學生作品 學生心得
謝謝各位指教