高中資訊學科中心研發教材.ppt

KompoZer結合CSS行內樣式表 進行中文字型的設定示範 網頁的文字段落，主要被包圍在body/body標籤中間，因此可透過內含樣式表的方式，直接對body標籤做修飾，達到設定文字段落的目的。 * KompoZer結合CSS行內樣式表 進行中文字型的設定 * 執行結果 執行結果 KompoZer外部串接樣式表 將CSS語法匯整至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: 標楷體;} KompoZerCSS動態網頁選項清單設計 在本單元介紹KompoZer實作個人網站的方式，為教學範例。 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 pThis 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代表當滑鼠