<4D F736F F D A67EABD7B1D0A7F7ACE3B56F4B6F6D706F5A65725FB5BDA4C6B0AAA4A4BFBDB9C5A5C1A6D1AE76>

Size: px

Start display at page:

Download "<4D F736F F D A67EABD7B1D0A7F7ACE3B56F4B6F6D706F5A65725FB5BDA4C6B0AAA4A4BFBDB9C5A5C1A6D1AE76>"

后席
5 years ago
Views:

1 壹課程單元名稱單元摘要 KompoZer 網頁設計軟體的安裝操作環境與基本功能介紹 1.KompoZer 軟體介紹與下載 2.KompoZer 網頁設計環境與編輯功能 3.KompoZer 的基本功能, 並與 FrontPage 比較設計者蕭嘉民教師 ( 國立善化高中 ) 學習目標課綱範圍 1. 透過對自由軟體 KompoZer 的學習, 減少對商業網頁設計軟體如 Microsoft FrontPage Adobe Dreamweaver 等的依賴 2. 在學習 KompoZer 設計網頁的過程中, 搭配 FrontPage 類似功能比較, 強化學生對網頁設計軟體功能的認知電腦軟體 - 應用軟體電腦網路 - 網際網路教學節數先備知識評量方法參考資源 3 節學生對電腦網路與軟體操作具有基本概念課堂觀察與口頭問答上機實作作業參考書籍 1. 施威銘研究室, 最新 HTML&CSS 網頁程式設計 ( 民國 95 年 ), 旗標資訊 2.VT 虛擬團隊王天利,CSS 動能網頁之樣式表應用開發手冊 ( 民國 90 年 ), 知城數位 3. 施威銘研究室著, 正確學會 Drteam Weaver CS5 的 16 堂課 ( 民國 99 年 ), 旗標資訊網站資源 1.KompoZer 官方網站 2. 維基百科, 自由的百科全書 3. 公務員資訊學習網主題 : 用 KompoZer 自由軟體設計專業網站, 講師 : 吳弘凱 4.KompoZer 網頁製作教學蘇天富

2 貳教學活動計畫教學活動 KompoZer 軟體介紹 1 節微軟 Office 是目前最受歡迎的辦公室軟體, 但價格對許多學生的家庭並不容易接受, 還好有自由軟體 OpenOffice 與 MS-Office 操作界面相當類似, 因此近年來, 對 OpenOffice 的接受程度也越來越高, 商業網頁設計軟體像是 FrontPage Dreamweaver 等, 價格其實不便宜, 對學校來說, 也許有經費可負擔, 但許多教過網頁設計課程的老師, 都有同樣的經驗, 鼓勵學生儘量利用學校設備與軟體, 多做練習或完成作業, 因為回家可能就無軟體可用的窘境自由軟體世界希望能以 KompoZer 與商業版網頁設計軟體互別苗頭, 只是知道 KompoZer 的人比較少, 知名度不像 FrontPage 與 Dreamweaver 那麼高 KompoZer 是一套易學易用所見即所得網站編寫系統, 並且能結合網站檔案管理, 使用 KompoZer 設計網站相當容易, 即使是不太會使用 HTML 語法與編寫網站程式碼的使用者也可以設計出很專業與吸引人的網站 KompoZer 內部是架構在 Gecko,Gecko 是一套開放原始碼 C++ 編寫的網頁排版引擎, 是 Mozilla 的版面配置引擎, 具有速度非常快可信賴, 目前全世界仍有廣大的社群開發者在維護中, 值得注意的是對 XML CSS 和 JavaScript 的支援 KompoZer 是又小又快的獨立軟體, 所見即所得的網頁設計編輯方式, 使建置網站就像使用文書處理軟體打字一樣的容易, 並可以在所見即所得與 HTML 模式間快速切換而且可以在不同網頁間快速切換編輯, 對於表單表格與樣版的設計, 一樣有強大支援 KompoZer 在 Linux 系統微軟 Windows 與蘋果麥金塔電腦, 都稱得上是功能強大的網頁編輯系統, 正如微軟的 Microsoft FrontPage 或 Adobe Dreamweaver 一樣, 熟悉上述商業軟體界面的使用者, 一定也可以用 KompoZer 用得很順手, 而且它是免付費的自由軟體, 並具有強大與易用的 CSS 支援能力透過 FTP 的檔案整合系統, 只要登入你的網站, 直接編輯檔案, 就可直接修改網站 KompoZer 所產生的都是可以信賴的 HTML 程式碼, 可以在所有目前常用的瀏覽器使用下載 KompoZer 軟體, 請連線到有兩個版本的 KompoZper 可供使用者下載, 一是穩定版版, 需另行下載中文化套件 ( 釋出 ), 另一個是版本較新的發展版 0.8b3 版

3 KompoZer 下載網頁 ( 釋出 ), 已有最新的中文化版本可以下載, 請參閱圖一下方紅色框處圖一 KompoZer 下載點本次安裝採用的是發展版 kompozer-0.8b3.zh-tw.win32.exe 繁體中文版, 安裝步驟請讀者自行操作

4 KompoZer 網頁設計環境與編輯功能介紹在安裝 KompoZer 軟體後, 開啟 KompoZer 程式應會出現如下畫面 : KompoZer 與 FrontPage 網頁設計基本操作對照 0.5 節圖二 KompoZer 的啟始畫面 KompoZer 軟體與 FrontPage 有相似網頁編輯環境, KompoZer 提供一些方便好用的工具列, 如圖二紅色框處 : 設計工具列 : 有基本的新增開啟與儲存檔案等基本檔案管理的操作, 其他常用的編輯網頁指令插入新錨點超連結圖片表格與選單等等功能上方格式工具列 1: 有編號式列表符號式列表縮排文字等等常用的功能下方格式工具列 2: 有選擇文字色彩選擇背景色彩縮小與放大字體粗體斜體加底線等等功能 KompoZer 的編輯模式 : 在設計模式 : 除了一般所見即所得的設計編輯模式外, 另採用原始碼編輯模式, 使用者可以在原始碼模式下編寫程式, 另外分離模式讓網頁設計人員, 可直接編輯目前標籤游標或選取範圍中的 HTML 原始程式碼, 與 FrontPage 的分割模式功能類似, 用來顯示所選取標籤的 HTML 原始碼, 在編輯網頁時, 這個功能相當有用, 可以省去設計人員搜尋網頁標籤程式碼的使用者第一次建立網站時, 網站設計人員首先需要在硬碟空間建立資料夾, 儲存網頁檔案, 再把網頁檔案存放在資料夾中, 在編輯的過程中, 如有插入圖片, 需先行將 HTML 檔案存檔, 再把圖片插入到網頁中, 這樣 KompoZer 才能以相對路徑存檔, 否則 KompoZer 將以絕對路徑存檔, 日後放到網路上, 由於網頁設計者與伺服器檔案目錄結構或檔案系統不同, 導致檔案路徑錯誤, 網頁會找不到檔案位置 KompoZer 建立的新網頁, 透過檢視原始碼, 發現與 FrontPage 採用的編碼不同,FrontPage 預設編碼採用 Big5 碼, 而 KompoZer 則預設採用萬國碼 UFT-8 網頁設計若使用 Big5 碼, 只能使用繁體中文, 無法在網頁中使用其他國家的語言 ; 而使用 UTF-8 則可以在網頁中, 使用不同國家的語言, 在現代的網頁設計, 網頁包括不同國家語言文字,

畫面, 可進行修改若在 FrontPage 中想改變網頁的編碼, 可在網頁編輯區空白處按右鍵, 出現選單, 點選網頁內容的語言, 如圖三 B,

5 KompoZer 與 FrontPage 建立新網站與設定網頁編碼方式比較有時是必要的另外, 在伺服器方面, 近來各 Linux Distribution 的 Apache 網站伺服器預設也是採用 UTF-8 編碼若 KompoZer 需要改變編碼, 請由點選清單格式之頁面標題與屬性選項, 出現圖三 A 畫面, 可進行修改若在 FrontPage 中想改變網頁的編碼, 可在網頁編輯區空白處按右鍵, 出現選單, 點選網頁內容的語言, 如圖三 B, 使用者可透過 HTML 編碼方式下方的下拉選單, 選擇 UTF-8 編碼圖三 A KompoZer 頁面標題與屬性圖三 B FrontPage 網頁內容編碼方式

KompoZer 與 FrontPage 插入表格設定方式比較 KompoZer 與 FrontPage

插入表格的設定畫面, 圖五 A 由網頁設計者直接以滑鼠拖移出所需要的儲存格數目 ; 圖五 B 則需要於列數

5 節圖五 A 圖五 B KompoZer 可以在選取表格後, 按右鍵如圖六, 點選表格屬性後, 出現圖七

6 KompoZer 與 FrontPage 插入表格設定方式比較 KompoZer 與 FrontPage 插入表格的操作界面很類似,KompoZer 由插入選單點選表格選項如圖四, 會出現如圖五 A 或圖五 B 插入表格的設定畫面, 圖五 A 由網頁設計者直接以滑鼠拖移出所需要的儲存格數目 ; 圖五 B 則需要於列數欄數輸入方塊中輸入正確的數字圖四 1.5 節圖五 A 圖五 B KompoZer 可以在選取表格後, 按右鍵如圖六, 點選表格屬性後, 出現圖七 A 畫面, 可設定表格屬性選項如表格大小 ( 欄列數 ) 框線間隔對齊方式背景色彩, 功能與圖七 B 的 FrontPage 操作方式很類似, 請讀者參考圖七 A 圖七 B 的比較圖六

7 圖七 A KompoZer 表格屬性設定 ( 紅色框處編號與圖七 B 功能類似處 ) 圖七 B FrontPage 表格屬性設定 ( 紅色框處編號與圖七 A 功能類似處 ) KompoZer 與 KompoZer 由插入選單點選圖片選項, 畫面出現如圖八

FrontPage 插入圖片設定方式比較圖八在圖九圖片位置右方, 透過瀏覽檔案資料夾的方式, 將圖片加入至網頁中,

避免網頁檔案上傳至網頁伺服器後, 由於路徑錯誤, 導致圖片無法瀏覽替代文字主要是相片無法出現於網頁時,

KompoZer 插入圖片設定 FrontPage 插入圖片的設定選項與步驟, 顯得較單純, 請參考圖十 KompoZer

8 FrontPage 插入圖片設定方式比較圖八在圖九圖片位置右方, 透過瀏覽檔案資料夾的方式, 將圖片加入至網頁中, 請點選網址是相對於此網頁位址核取方塊, 使 html 程式碼中圖片路徑資料保持使用相對位址, 避免網頁檔案上傳至網頁伺服器後, 由於路徑錯誤, 導致圖片無法瀏覽替代文字主要是相片無法出現於網頁時, 在網頁相片處顯示提示文字, 設計者可直接點選不要使用替代文字選項, 那麼萬一相片出不來時, 相片處只會出空白方格圖九 KompoZer 插入圖片設定 FrontPage 插入圖片的設定選項與步驟, 顯得較單純, 請參考圖十 KompoZer 與 FrontPage 插入圖十在網頁中使用超連結, 方便使用者瀏覽其他與主題相關的網頁, 在 KompoZer 編輯網頁超連結會先出現圖十一 B 連結屬性設定視窗, 供

9 超連結設定比較網頁設計者設定連結顯示文字連結檔案名稱視窗開啟方式設定, 詳細做法, 請讀者依圖十一與圖十二順序自行操作 KompoZer 與 FrontPage 超連結設定步驟圖十一 A 圖十一 B 圖十一 KompoZer 插入超連結設定圖十二 B 圖十二 A 圖十二 C 圖十二 FrontPage 插入超連結設定 KompoZer 與 FrontPage 網頁在網頁背景中, 加入色彩或背景圖片, 會使網頁更加活潑生動, 使瀏覽者容易被網頁的氛圍所感染, 在 KompoZer 中加入背景圖片, 由格式清單, 點選頁面色彩與背景, 出現圖十三 A 頁面色彩與背景,

10 背景設定可以設定網頁的文字連結文字點選中的連結文字已瀏覽過的連結文字背景等顏色, 而且可在背景中加入圖片檔圖十三 A FrontPage 網頁背景設定 : 點選編輯區按右鍵清單, 點選網頁內容之設定格式的文字顏色背景背景圖片, 如圖十三 B, 做法與 KompoZer 相似, 可減少網頁設計者適應與轉換不同應用軟體的圖十三 B

11 壹課程單元名稱單元摘要 KompoZer 網頁設計軟體的 CSS 編輯功能 1.CSS 樣式表與分類 2.CSS 內部樣式表設定 - 以文字格式設定為例 3.CSS 外部樣式表建立與設定 - 使用 CSS 設定圖層與圖層文字設定為例設計者蕭嘉民教師 ( 國立善化高中 ) 學習目標課綱範圍教學節數先備知識評量方法參考資源 1. 了解如何在 HTML 檔加入 CSS 串接樣式表 2.CSS 串接樣式表的分類與 KompoZer 中如何設定串接樣式表 3.CSS 內部樣式表的使用 - 使用文字格式設定 4. 運用 CSS 外部設定檔進行圖層與圖層文字設定電腦軟體電腦網路 4 節 1. 對網頁設計軟體具有基礎概念與操作能力 2. 熟悉資訊科技概論課程電腦網路電腦軟體兩單元內容課堂觀察與口頭問答上機實作參考書籍 1. 施威銘研究室, 最新 HTML&CSS 網頁程式設計 ( 民國 95 年 ), 旗標資訊 2.VT 虛擬團隊王天利,CSS 動能網頁之樣式表應用開發手冊 ( 民國 90 年 ), 知城數位 3. 施威銘研究室著, 正確學會 Drteam Weaver CS5 的 16 堂課 ( 民國 99 年 ), 旗標資訊網站資源 1.KompoZer 官方網站 2. 維基百科, 自由的百科全書 3. 公務員資訊學習網主題 : 用 KompoZer 自由軟體設計專業網站, 講師 : 吳弘凱 4.KompoZer 網頁製作教學蘇天富

貳教學活動計畫教學活動 CSS 樣式表與分類 CSS 是 Cascading Style Sheets 的縮寫,Cascading 有連成系列或串聯意思, 中文翻譯為串接樣式表, 主要用來描述網頁外觀的程式語法 CSS 主要的目的, 是將網頁內容與外觀格式分開, 一般來說, 設定網頁內容, 採用 HTML 標籤語法, 將網頁的外觀格式設定交由 CSS 負責設定傳統網頁主要是由 HTML

12 貳教學活動計畫教學活動 CSS 樣式表與分類 CSS 是 Cascading Style Sheets 的縮寫,Cascading 有連成系列或串聯意思, 中文翻譯為串接樣式表, 主要用來描述網頁外觀的程式語法 CSS 主要的目的, 是將網頁內容與外觀格式分開, 一般來說, 設定網頁內容, 採用 HTML 標籤語法, 將網頁的外觀格式設定交由 CSS 負責設定傳統網頁主要是由 HTML 標籤組成, 但 HTML 標籤樣式其實不多, 網頁可做得變化也少, 因此 W3C 公佈了 CSS 語法, 來增加網頁外觀設計的功能 CSS 樣式表的優點 : 一設計製作網頁樣式更有效率 : 將常用的文字段落表格型式, 透過 CSS 定義可以更簡潔, 格式更一致二大量套用在網頁 :CSS 使得網頁的製作時, 版面的配置可以有一致的做法, 想要變更網頁的格式顯示, 不需要用傳統的方法打開網站中的每個網頁去修改, 只要針對 CSS 檔去修改, 就可以全部網頁遵循修改後的格式, 透過外部樣式檔的使用與定義, 提供網站上檔案直接匯入或連結樣式表, 可以很快的將網頁設計好, 並有一致的使用界面 CSS 語法規則 CSS 選擇器的分類 2 節 CSS 語法規則 : 所有定義必需包含在大括號 {}, 每一個定義內容主要由選擇器 (Selector) 與定義內容組成, 必須用分號結束 CSS 稱 HTML 語法的標籤元素為選擇器 selector, 定義內容區分為屬性與屬性值設定選擇器依對象不同分為三類 : - 標籤選擇器 : 以 HTML 標籤為選擇器的對象, 語法如下 : <head> <style type= text/css > HTML 標籤選擇器名稱 { 標籤 1 屬性 : 屬性值 ; 標籤 2 屬性 : 屬性值 ; } HTML 標籤選擇器名稱 { 標籤 1 屬性 : 屬性值 ; 標籤 2 屬性 : 屬性值 ; } </style> </head> 標籤選擇器 CSS 語法範例如下 : <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> 標籤選擇器語法 </title> <style type="text/css"> body {color: red;font-weight: bold; font-style: italic; } p {font-family: 微軟正黑體 ; background-color: yellow;} </style> </head> <body> <p> 兩腳踢翻塵世浪 </p> <p> 一肩擔盡古今愁 </p> </body> </html> 二類別選擇器 :class 類別選擇器以. 開頭,HTML 的所有標籤都可以當做 CSS 的選擇器使用, 使用類別選擇器, 主要以類別為套用

13 對象, 也就是對於所屬類別的元素, 套用這些規則 class 類別選擇器定義語法 : HTML 標籤名稱. 類別選擇器名稱 { 標籤 1 屬性 : 屬性值 ; 標籤 2 屬性 : 屬性值 ; }. 類別選擇器名稱 { 標籤 1 屬性 : 屬性值 ; 標籤 2 屬性 : 屬性值 ; } class 類別選擇器敍述使用語法 : < 標籤名稱 class= class 選擇器名稱 > 類別選擇器 CSS 語法範例如下 : <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> 類別 class 選擇器 </title> <style type="text/css">.font_kai {font-family: 標楷體 ;} p.red_text {color: red;font-weight: bold;} p.blue_text {color: blue;font-weight: bold;} </style> </head> <body class="font_kai"> <p class="blue_text"> 兩腳踢翻塵世浪 </p> <p class="red_text"> 一肩擔盡古今愁 </p> </body> </html> 三 ID 選擇器 :ID 選擇器是以 # 開頭, 代表以 ID= 的標籤為套用對象, 對於名稱為標籤, 套用此規則 ID 選擇器在 HTML 語法中只能套用一次, 類別 class 選擇器則可套用多次定義語法 : #ID{ 屬性 1: 屬性值 ; 屬性 2: 屬性值 ; } ID 類別選擇器語法 : < 標籤名稱 ID= ID 選擇器名稱 > ID 選擇器 CSS 語法範例如下 : <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>id 選擇器語法 </title> <style type="text/css"> #font_kai {font-family: 標楷體 ;} #font_black {font-family: 微軟正黑體 ;} </style> </head> <body> <p id="font_kai"> 兩腳踢翻塵世浪 </p> <p id="font_black"> 一肩擔盡古今愁 </p> </body> </html> HTML 與 CSS 語法比較運用 HTML 語法在網頁中設定字型粗體與斜體, 敍述如下, 以下亦將使用不同型式的 CSS 樣式表設定, 供讀者參考 : <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>html 設定格式 </title> </head>

14 CSS 樣式表的分類 <body> <i><b> <font face=" 標楷體 " color="red"> 兩腳踢翻塵世浪, 一肩擔盡古今愁 </font> </b></i> </body> </html> CSS 樣式表的分類 : 一內部樣式檔案 : 要在網頁 html 檔案中, 使用 CSS 功能有兩種主要方式 : 行內樣式表 (inline Style) 與內嵌樣式 (embedded style sheets) 表行內樣式表語法, 紅色部分為 CSS 行內樣式語法 : <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> 行內樣式表 </title> </head> <body style="font-family: 標楷體 ; color: red; font-weight: bold; font-style: italic;"> 兩腳踢翻塵世浪, 一肩擔盡古今愁 </body> </html> 內嵌樣式表會將 CSS 敍述寫在網頁 <Body> 前的兩個 <head> 之間, 影響範圍只有網頁本身定義是寫在 <head></head> 內的 <style type="text/css"> </style> 標籤中, 告知瀏覽器使用 CSS 書籤做美化網頁功能, 紅色部分為 CSS 內嵌樣式表語法格式 : <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> 內嵌樣式表語法 </title> <style type="text/css"> body { style=font-family: 標楷體 ; color: red; font-weight: bold; font-style: italic; } </style> </head> <body> 兩腳踢翻塵世浪, 一肩擔盡古今愁 </body> </html> 行內樣式表與內嵌樣式表語法作用範圍, 只限檔案的 HTML 敍述內二外部樣式檔案 : 有連結外部樣式檔 (linked style sheets) 匯入外部樣式檔案 (imported style sheets) 兩種樣式表.css 指令, 加在兩個 <style></style> 之間, 相當於將樣式表內容加到 HTML 檔案中 ; 而採用連結外部樣式檔的方式, 在 HTML 讀取到標籤設定時, 才去讀取連結樣式表的設定, 做法不太一樣, 不過由於匯入樣式表的方式, 某些瀏覽器並不支援, 所以建議使用連結外部樣式檔, 本教材不再對匯入外部樣式檔案的方式再做使用外部樣式表的優點在於 : 只要定義一個樣式檔, 即可影響與其連結的 HTML 文件檔, 而 HTML 只要使用到相同的標籤元素的都可以適用相同的設定, 當標籤需要被修改時, 設計人員只要修改標籤的定義即可, 所以 CSS 可以將頁設計內容與格式分開設計紅色部分為 CSS 連結外部樣式檔語法格式 :

15 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> 古詩 </title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> 兩腳踢翻塵世浪, 一肩擔盡古今愁 </body> </html> style.css 外部樣式檔內容, 如下 : body { font-family: 標楷體 color: red; font-weight: bold; font-style: italic; }

範例實作 CSS 行內樣式表本範例藉由 KompoZer 結合 CSS 行內樣式表, 進行中文字型的設定做介紹在 KompoZer

0.5 節圖一 A 圖一 B 網頁的文字段落, 主要被包圍在 <body></body> 標籤中間, 因此可透過內含樣式表的方式, 直接對

選項, 再點選所要選擇的中文字型, 即可將網頁字型設定成點選的字型圖二程式碼如表一粗體字所示為 CSS 內含樣式表, 讀者可再參考表二使用

16 範例實作 CSS 行內樣式表本範例藉由 KompoZer 結合 CSS 行內樣式表, 進行中文字型的設定做介紹在 KompoZer 網頁編輯區, 選取中文字, 不論使用圖一 A 格式工具列 2 的字體選項或是圖一 B 格式清單的字體選項, 你會發現中文字型都沒有作用 0.5 節圖一 A 圖一 B 網頁的文字段落, 主要被包圍在 <body></body> 標籤中間, 因此可透過內含樣式表的方式, 直接對 body 標籤做修飾, 達到設定文字段落的目的在圖二左下角紅色框處, 點選 <body>, 再按下右鍵, 點選內含樣式, 接著點選文字選項, 再點選所要選擇的中文字型, 即可將網頁字型設定成點選的字型圖二程式碼如表一粗體字所示為 CSS 內含樣式表, 讀者可再參考表二使用 HTML 語法設定, 修改後的程式碼 font-family: 標楷體, 代表所用的字型 ; color: rgb(0, 0, 153) 代表所用的字型顏色設定

17 <html> <head> <meta content="text/html; charset=utf8" http-equiv="content-type"> <title> 流金歲月 </title> </head> <body style="font-family: 標楷體 ; color: rgb(0, 0, 153);"> 1995 年冬我來到浯州, 展開一年九個月的大兵生活, 在這六百多個日裏, 經歷了酸甜苦辣各種生活, 走遍了大小金門, 拜訪了屹立百年的風獅爺, 感謝那群曾經和我共患難過的弟兄!<br> </body> </html> 表一使用 CSS 設定文字字型與顏色 <html> <head> <meta content="text/html; charset=utf8" http-equiv="content-type"> <title> 流金歲月 </title> </head> <body> <font color="#000099" face=" 標楷體 ">1995 年冬我來到浯州, 展開一年九個月的大兵生活, 在這六百多個日裏, 經歷了酸甜苦辣各種生活, 走遍了大小金門, 拜訪了屹立百年的風獅爺, 感謝那群曾經和我共患難過的弟兄!</font><br> </body> </html> 表二使用 HTML 設定文字字型與顏色

18 建立 CSS 外部連結樣式表在本單元將使用外部串接樣式表, 將 CSS 語法匯整至一個 CSS 檔案中, 供網站程式使用, 再由每個網頁對此檔做連結, 不用費時逐頁修改網頁外觀設定, 本範例實作建立連結樣式表 pattern.css, 圖三步驟, 點選設計工具列 CSS 編輯器選項, 出現 CSS 樣式表的視窗圖三圖四步驟是點選左上角鏈結樣式表, 準備定義 CSS 樣式表, 將其另行定義於外部鏈結檔案上, 檔案副檔名為.css 1 節圖四圖五 : 由於目前網站中没有鏈結樣式表, 請選擇建立樣式表圖五圖六 : 點選匯出樣式表並且切換到匯出的版本

按右鍵出現選單, 選擇進階屬性, 如圖八, 首先幫新增加的圖層命名, 並將此區塊放上一張 png

19 圖六圖七 : 在網頁資料夾中, 將檔案存為 pattern.css 圖層的意義與圖七結合 CSS 語法設定 DIV 圖層,DIV 標籤可以在網頁上任何地方設定區塊, 區塊內可放置圖片與文字, 再由 CSS 設定區塊的個別屬性在網頁中先點選 [ 格式工具列 1] 右邊的按鈕, 在網頁的左上方會建立一個圖層, 再點選圖層, 按右鍵出現選單, 選擇進階屬性, 如圖八, 首先幫新增加的圖層命名, 並將此區塊放上一張 png 的背景透明圖圖八圖九, 除了圖八點選圖層按右鍵出現選單, 選擇進階屬性, 也可以將滑鼠游標移至圖九下方紅色框處, 點選 <div> 後, 按右鍵出現, 選擇進階屬性, 幫新增加的圖層命名

樣式規則, 新增新的樣式規則圖十一圖十二 : 指定圖層 ID 屬性規則名稱為 #my_photo1, 如上圖, 選擇

20 圖九圖十 : 選擇圖層的屬性 id, 並命名為 my_photo1, 如此等是給了圖層一個識別名稱, 才能在 CSS 樣式表中設定使用圖十圖十一 : 以上步驟幫圖層設定好名稱, 接著設定圖層, 點選設計工具列, 出現如圖十一, 選擇樣式規則, 新增新的樣式規則圖十一圖十二 : 指定圖層 ID 屬性規則名稱為 #my_photo1, 如上圖, 選擇套用到一個指定 ID 屬性的元素的樣式, 在下方下拉式選單, 可以找到之前命名 ID 選擇器 #my_photo1, 點選建立樣式規則

21 圖十二圖十三畫面出現後, 可以開始為圖層 #my-photo1 建立一套規則, 透過畫面操作, 可以設定圖層的文字背景框線排版定位.. 等等, 並自動產生 CSS 設定檔的內容圖十三圖十四畫面, 設定圖層 #my-photo1 的背景圖片與相關選項圖十四圖十五畫面, 設定 #my-photo1 圖層在網頁上的大小與位置

png); background-position: left top; margin-top: 5cm; margin-left: 3cm;

22 圖十五圖十六畫面, 完成作品為透明底圖飛龍盤踞於表格圖片之上, 圖層可讓網頁設計者隨心所欲將圖片放在網頁上任何地方圖十六 pattern.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; 表三 patttern.css 鏈結樣式檔

在圖層加入文字接下來準備在圖層 #my-photo1 中加入文字, 如圖十七 A

css, 並針對圖層 #my-photo1 定義, 接下來針對在圖層中的文字定義,

5 節圖十八圖十九圖十九 : 前面將文字格式定義為段落標題 2, 接下來我們針對

23 在圖層加入文字接下來準備在圖層 #my-photo1 中加入文字, 如圖十七 A 加入龍行千里, 選取圖十七 B, 將龍行千里的標題格式設定為段落標題 2 圖十七 A 圖十七 B 點選設計工具列, 出現如圖十八畫面, 選擇樣式規則, 新增樣式規則由於先前步驟已將 CSS 設定在連結檔 pattern.css, 並針對圖層 #my-photo1 定義, 接下來針對在圖層中的文字定義, 建立樣式規則 0.5 節圖十八圖十九圖十九 : 前面將文字格式定義為段落標題 2, 接下來我們針對 <h2>..</h2> 做 CSS 設定由於 <h2>..</h2> 是 HTML 中的標籤, 故在圖十九選擇套用到所有同一類型元素的樣式, 來對 <h2>..</h2> 重新給予新的定

5CM 字體紅色, 圖層中的龍行千里如圖廿一的視窗所呈現圖廿一在排版定位處, 設定位置為相對位置, 所謂 h2 段落標題 2 相對位置

24 義, 再到下方下拉選項選要定義選擇器 h2, 點選建立樣式規則, 出現圖廿的視窗, 供網頁設計者定義 h2 的 CSS 指令圖廿首先針對段落標題 2 <h2>..</h2> 的 CSS 樣式表的文字樣式規則, 進行設定, 將字型改為標楷體字型長與寬 1.5CM 字體紅色, 圖層中的龍行千里如圖廿一的視窗所呈現圖廿一在排版定位處, 設定位置為相對位置, 所謂 h2 段落標題 2 相對位置的位置是以圖層 my-photo1 來算, 而不是針對整個網頁, 接著距圖層頂端與左端設定, 距離邊界值分別為 3.5cm 與 1.5cm, 如圖廿二視窗圖廿二圖廿三畫面, 完成作品為龍行千里四個大字放在透明底圖上

$圖廿三經 KompoZer 的設定後,pattern.css 多出 h2 標籤元素的定義內容, 針對龍行千里四個字的 CSS 語法定義, 包含字型的大小顏色字型與相對於圖層的位置定義等等 #my_photo1 { background-image: url(images/dragon.$

25 圖廿三經 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: 標楷體 ;} 表四 patttern.css 外部連結樣式檔

26 壹課程單元名稱單元摘要 KompoZer&CSS 動態網頁選項清單設計 1. 網站實作與網頁結構分析 2. 框架式網頁 HTML 語法 3. CSS 外部樣式表建立與設定相片圖層 4. CSS 外部樣式表建立與設定網頁選項連結 5. 使用 CSS 語法設定網頁的背景設計者蕭嘉民教師 ( 國立善化高中 ) 學習目標課綱範圍教學節數先備知識評量方法參考資源 1. 了解如何規劃網站架構 2. 了解如何建立框架式網頁 3. 了解如何在 KompoZer 應用圖層顯示圖片 4. 了解如何在 KompoZer 應用圖層建立超連結清單選項 5. 了解如何在 KompoZer 使用 CSS 語法設定網頁的背景電腦軟體電腦網路 3 節 1. 對網頁設計軟體具有基礎概念與操作能力 2. 熟悉資訊科技概論課程電腦網路電腦軟體兩單元內容課堂觀察與口頭問答上機實作參考書籍 1. 施威銘研究室, 最新 HTML&CSS 網頁程式設計 ( 民國 95 年 ), 旗標資訊 2.VT 虛擬團隊王天利,CSS 動能網頁之樣式表應用開發手冊 ( 民國 90 年 ), 知城數位 3. 施威銘研究室著, 正確學會 Drteam Weaver CS5 的 16 堂課 ( 民國 99 年 ), 旗標資訊網站資源 1.KompoZer 官方網站 2. 維基百科, 自由的百科全書 3. 公務員資訊學習網主題 : 用 KompoZer 自由軟體設計專業網站, 講師 : 吳弘凱 4.KompoZer 網頁製作教學蘇天富

實作網頁檔案結構在本單元介紹 KompoZer 實作網站的方式, 筆者以個人網站為實作範例, 圖一是筆者個人網站的首頁畫面, 圖二為檔案結構圖, 檔案超連結的連接方式,index.html 是首頁亦是框架頁, 框架頁左邊為 leftitem.htm 網頁, 由圖二可看出, 共有 6 個網頁與 leftitem.

htm 為連結, 表一是網站 htm 檔案的功能框架網頁製作與語法圖一框架頁網頁 KompoZer 不支援框架網頁製作, 需另行撰寫框架頁 HTML 敍述, 並向學生 frameset 語法規則, 圖二右側各個選項的網頁內容, 皆可以先前的 KompoZer 技巧進行編輯, 不再贅述 1 節圖二網頁檔案結構圖檔案名稱網頁檔案

27 實作網頁檔案結構在本單元介紹 KompoZer 實作網站的方式, 筆者以個人網站為實作範例, 圖一是筆者個人網站的首頁畫面, 圖二為檔案結構圖, 檔案超連結的連接方式,index.html 是首頁亦是框架頁, 框架頁左邊為 leftitem.htm 網頁, 由圖二可看出, 共有 6 個網頁與 leftitem.htm 有連結 ; 框架頁右邊則是以自我介紹 me.htm 為連結, 表一是網站 htm 檔案的功能框架網頁製作與語法圖一框架頁網頁 KompoZer 不支援框架網頁製作, 需另行撰寫框架頁 HTML 敍述, 並向學生 frameset 語法規則, 圖二右側各個選項的網頁內容, 皆可以先前的 KompoZer 技巧進行編輯, 不再贅述 1 節圖二網頁檔案結構圖檔案名稱網頁檔案選項名稱 pattern.css 外部 CSS 樣式表 leftitem.htm 左邊選項網頁 me.htm 筆者自我介紹網頁關於我自己 ccu.htm 研究所生活相片諸羅桃花源 nsysu.htm 大學生活相片西灣美麗島 soldier.htm 當兵生活相片金門浯洲嶼 works.htm 個人作品閒情雅致坊表一網頁檔案表二的框架頁語法敍述的網站首頁型態, 如圖一, 左邊分頁為超連結選項網頁, 佔螢幕寬度 15%, 命名為 itempage, 右邊分頁為各選項主題呈現網頁所在位置, 框架頁命名為 main, 在左邊選項網頁中, 透過設定超連結的標籤元素 <a href=".htm" target="main"> </a>, 可以讓網頁在右邊框架出現

設定圖層背景相片 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="keywords" content=" 蕭嘉民, java,

frameborder="0"> <frame name="itempage" target="main" src="leftitem.htm" scrolling="no" noresize> <frame name="main" src="me.

</p> </body> </noframes> </frameset> </html> 表二框架頁的 html 語法編輯框架頁左邊製作選項的網頁, 設定網頁編碼為 UTF-8, 以免上傳伺服器後, 瀏覽時出現亂碼, 如圖三 A, 並在網頁上方加入一個圖層,

28 設定圖層背景相片 <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> 表二框架頁的 html 語法編輯框架頁左邊製作選項的網頁, 設定網頁編碼為 UTF-8, 以免上傳伺服器後, 瀏覽時出現亂碼, 如圖三 A, 並在網頁上方加入一個圖層, 設定圖層相片, 如圖三 B 滑鼠點選新增圖層按鈕, 點選新增的圖層, 再接滑鼠右鍵出現清單, 選擇進階屬性, 將圖層 id 值設為 #family_photo, 如圖三 C, 做法類似前一節, 將龍的圖形嵌入網頁圖三 A 設定網頁編碼圖三 B 選項網頁圖三 C 設定圖層 ID 圖四建立 id 選擇器 #family_photo 樣式規則圖四對圖層 ID 選擇器 #family_photo 建立樣式規則, 排版定位樣式

29 設定如圖五, 設定相片的圖層位置, 畫面中的相對位置指的是相對於框架頁左側網頁的位置, 距離網頁上邊界 10px 左邊界 10px, 並依圖片尺寸來設定圖層的高度與寬度圖五設定 #family_photo 排版定位樣式規則設定圖六設定背景圖片樣式檔案名稱, 並以背景圖的方式將相片放於圖層中, 完成圖如圖三 B 圖六設定 #family_photo 背景圖片樣式規則

設定超連結選項的圖層為了方便設定選項的位置, 在設定選項的超連結時, 新增圖層並命名為 items,

items 圖層詳細 items 圖層設定如圖八, 分別設定圖層的網頁位置, 距左上邊界各 10px

圖層排版定位樣式規則圖十超連結設定圖九設定 items 圖層排版定位樣式規則圖九為設定連結屬性

網址相對於此網頁位址, 在目標網頁點選連結要開啟於之以下頁框, 由於 KompoZer 不支援框架頁,

30 設定超連結選項的圖層為了方便設定選項的位置, 在設定選項的超連結時, 新增圖層並命名為 items, 如圖七紅色框處為 items 圖層, 並於圖層內輸入 5 個超連結選項的名稱設定超連結選項圖層的參數圖七 items 圖層詳細 items 圖層設定如圖八, 分別設定圖層的網頁位置, 距左上邊界各 10px 140px, 高度與寬度分別為 120px 160px, 按下確定完成設定 1 節圖八設定 items 圖層排版定位樣式規則圖十超連結設定圖九設定 items 圖層排版定位樣式規則圖九為設定連結屬性之畫面, 設定網頁選項的超連結時, 在每個選項的連結屬性視窗, 輸入連結的網頁檔名, 並勾選網址相對於此網頁位址, 在目標網頁點選連結要開啟於之以下頁框, 由於 KompoZer 不支援框架頁, 故需修改網頁原始程式敍述超連結參數 target="main", 如表三標示紅字處, 使點選左邊框架選項後, 點選的網頁可以出現在右邊框架, 其餘網頁選項作法, 請參照此步驟修改

31 設定超連結選項的動態效果 <div id="items"> <a href="me.htm" target="main"> 關於我自己 </a><br> <a href="ccu.htm" target="main"> 諸羅桃花源 </a><br> <a href="nsysu.htm" target="main"> 西灣美麗島 </a><br> <a href="soldier.htm" target="main"> 金門浯洲嶼 </a><br> <a href="works.htm" target="main"> 閒情雅致坊 </a><br> </div> 表三設定每個網頁的開啟位置滑鼠游標移到選項上方時, 選項變為反白, 這樣的功能, 如果以 Java Script 撰寫, 並不容易, 但透過 KompoZer+CSS, 可以不需撰寫程式, 就可完成超連結的 HTML 語法敍述為 <a href="ccu.htm" target="main"> 諸羅桃花源 </a>, 所以 CSS 可針對 <a> 進行設定, 但設定超連結選項反白的功能, 必須僅限於左邊選項網頁, 並不適用網頁中的所有連結, CSS 設定時, 必須只針對 #items 圖層的 <a> 設定所以在圖十畫面, 先由套用一個指定 ID 屬性的的元素的樣式點選出 ID 選擇器 #item, 空格輸入小寫字母 a 之後, 新增樣式規則的分類, 會變成自訂樣式規則, 點選建立樣式規則按鈕圖十設定 items 圖層超連結的樣式規則樣式規則 #item a 適用範圍僅止於圖層 #item 內的超連結設定, 設定文字樣式規則包括字型大小行高色彩等, 超連結選項背景樣式規則等等, 詳細設定如圖十一圖十二等等圖十一 #items a 文字樣式規則

實作這個功能, 需要再新增一個樣式規則 #items a:hover,hover

32 圖十二設定 #items a 背景樣式規則圖十三設定超連結完成圖十四建立 #items a:hover 樣式規則滑鼠游標移到選項上方時, 選項變為反白, 實作這個功能, 需要再新增一個樣式規則 #items a:hover,hover 代表當滑鼠游標移到圖層 items 內的超連結 <a>, 要設定的動作或顯示的格式, 在本例中, 希望滑鼠游標移到選項上方時, 背景色變淡文字色變暗 #items a:hover 樣式規則的設定 : 文字樣式的設定包括字型大小行高色彩等與超連結的背景顏色等等, 詳細設定如圖十五圖十六等等, 透過改變選項文字與背景顏色的方法, 使滑鼠游標移到選項上方時, 選項變為反白, 達到動態變化的效果圖十五 #items a:hover 文字樣式規則

jpg);}, 所以 CSS 可針對 body{background-image} 進行設定, 在外部樣式檔設定背景圖片功能, 必須僅限於左邊選項網頁,

33 左選項網頁加入背景圖片圖十六 #items a:hover 背景樣式規則網頁加入背景圖片的 CSS 語法敍述為 body { background-image: url(oo.jpg);}, 所以 CSS 可針對 body{background-image} 進行設定, 在外部樣式檔設定背景圖片功能, 必須僅限於左邊選項網頁, 因此在此採用類別選擇器的設定來對左選項網頁背景進行設定, 圖十七設定框架頁左側選項網頁的類別 class =leftside 1 節圖十七設定類別選擇器的值點選出現圖十八視窗, 點選套用到所有此類別元素的樣式增加類別.leftside 的樣式規則圖十八新增類別選擇器.leftside 的樣式規則圖十九畫面設定背景的圖片規則, 在選取檔案處點選背景圖片

$圖十九設定背景樣式規則本單元設定完成後, 可完成如圖一畫面之網頁, 表三為第二與第三單元的實作過程, 由 KompoZer 自動產生的 CSS 外部樣式檔程式碼, 供教師 KompoZer 設定與 CSS 語法的關係 #my_photo1 { background-image: url(images/dragon.$

34 圖十九設定背景樣式規則本單元設定完成後, 可完成如圖一畫面之網頁, 表三為第二與第三單元的實作過程, 由 KompoZer 自動產生的 CSS 外部樣式檔程式碼, 供教師 KompoZer 設定與 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: 標楷體 ; } #family_photo { position: relative; width: 110px; height: 127px; margin-top: 10px; background-image: url(images/bg/family.jpg); background-position: center center; background-repeat: repeat-y; margin-left: 10px; } #items { width: 120px; height: 160px; margin-top: 140px; margin-left: 10px; position: relative; } #items a { text-decoration: none; font-weight: bold; font-size: 0.5cm; color: white; background-color: #660000;

35 line-height: 32px; } #items a:hover { font-weight: bold; background-color: #ffcc99; color: #990000; }.leftside { background-image: url(images/bg/bg13.jpg); } 表三 pattern.css 外部樣式檔的內容

36 KompoZer 網頁設計課程評量評量方式 : 請同學將每次上課所學習的軟體操作方式, 以個人網頁為設計主題, 逐次漸進地完成個人完整報告需於學期結束前三週完成並上傳至網站, 以便教師有足夠的進行評分, 並讓學生修正作業缺點或不足之處, 以下為公告給學生的作業內容請同學依本學期所教的網頁設計課程, 製作個人網站, 所需呈現的網頁如下 : 左邊框架頁需有自我介紹生活點滴作品欣賞與心得寫作等四大選項, 當使用者點選選項內容時, 各選項的網頁內容會呈現在右邊框架頁中, 各選項實作內容與所佔分數比重, 如後 : 自我介紹生活點滴作品欣賞心得寫作歡迎來到蘋果新視界一自我介紹 (20 分 ): 1. 需有影像清晰的個人生活照 1~2 張 2. 家庭狀況簡介 3. 個人專長與興趣 4. 學校生活 5 未來生涯規劃與展望二生活點滴 (20 分 ): 學校社團或家庭生活清楚相片, 至少 6 張, 並註記日期與活動三作品欣賞 (20 分 ): 個人作品相片至少 4 張或以讀書心得或文章寫作取代四心得寫作 (20 分 ): 請同學將修習資訊科技概論或學習設計網頁的心得, 以圖文描述的方式撰寫, 文字至少字五整體美感 (20 分 ): 包含圖形選項橫幅圖片處理背景之美工處理 ( 同學可以 GIMP PhotoCap 美工編輯 ) 注意事項 : 1. 個人網站中所使用的圖片文字音樂或影片, 請同學務必遵守著作權法 2. 上述資料將會在網站中呈現, 請同學不可將個人的地址電話生日家中成員等詳細或私密資料上網, 否則造成個人資料外洩, 老師將酌情扣分, 若因而造成損失自行負責 3. 設計網頁, 若有問題可參考網頁範例 ( 網頁中有去年高一的優良作品可供參考

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05