上課連結

• 第一堂課:My 1st web page
• 第一堂課:練習基礎文字排版
• 第一堂課:練習基礎清單項目
• 第一堂課:練習堪入圖示與超連結

• 第二堂課
• 使用上標、下標的方式處理公式
• 36計的來源
• Hello World Java 程式學習
• 特殊符號的使用
• 簡易表格處理
• 透過表格顯示特殊符號
• 網頁配色建議
• 用表格展示學經歷並整合數個欄位
• iframe
• iframe框框
• 影片插入
• 音樂插入

HOME WORKs

• 第一堂功課
  • 習題:1.5.2:書籍清單練習
  • 習題:1.5.3:圖片超連結
  • 習題:1.5.4:同一頁的書籤超連結
• 第二堂課
  • 習題:2.6.2:書籍清單練習
  • 習題:2.6.3:HTML 的原始碼標記配置介紹
  • 習題:2.6.4:顏色的複製與產生
  • 習題:2.6.5:影片嵌入
  • 習題:2.6.6:我的課表

• 第三堂課
• 3.1.B 第一個 CSS 文字、背景的調整
• 3.2.A 考慮單位大小，例如文字大小
• 3.2.B 許多底色的設定方式
• 3.3.A 使用 head 內的 style 修改預設標記顯示模式
• 3.3.B 加上底圖的設定方式
• 3.4.A 表格加上兩種不同的 tr 顯示模式
• 3.4.B 設定類別影響子標記的方式 (table.class1 tr {..})
• 3.5.A 使用 id 取代 class 的方案
• 3.6.A 使用外部檔案來處理 css 的呼叫

• 第四堂課
• 4.1.A 中文作業系統常見的支援字型
• 4.1.B 字距、行距與留白
• 4.1.D 由自己的網站提供免費授權的字型
• 4.2.A 關於行內元件 (inline block) 的超連結設計
• 4.3.A 關於 :hover 的應用
• 4.4.A 關於清單的特殊效果
• 4.4.B 清單的項目符號使用圖示來展示
• 4.5.A 空氣品質表格處理
• 4.5.B 空氣品質表格處理:collapse框線重疊
• 4.6.A 以清單來說明使用ul li會產生的後帶繼承影響問題
• 4.6.B 承上，使用ul>li
• 4.6.B display搭配hover

• 第五堂課
• 5.1.A 關於方塊：內部元素寬度、內部留白、框線、外部留白
• 5.1.B 方塊的水平置中
• 5.1.C 方塊框線形狀變化與陰影 (position)
• 5.1.D 自製框線 (position)
• 5.2.A 方塊的對齊 (vertical-align) 以及浮動 (float) 對齊 (position)
• 5.2.B 讓圖示排版整齊，不會跑掉的方法
• 5.2.C 排版向上對齊的方式
• 5.2.D 使用 float 漂浮對齊以及父元素的問題
• 5.3.A 方塊位置的特性 (position)

• 第六堂課
• 5.1.A 關於方塊：內部元素寬度、內部留白、框線、外部留白
• 5.1.B 方塊的水平置中
• 6.2.A 寧夏的歌詞 (三張底圖的處理方式)
• 6.2.B 底圖的填滿效果 (contain vs. cover)
• 6.2.C 使用底圖產生假按鈕的效果
• 6.3.A 特定效果的圖示變化
• 6.4.A 使用 transform - rotate 來改變圖層的變化
• 6.4.B 使用 transform - translate+scale來改變圖層的變化
• 6.5.A 特定效果的圖示變化-加上漸變(transition)
• 6.6.A 使用動畫 (animation) 特效
• 6.6.B 以動畫方式讓企鵝一直旋轉旋轉
• 6.6.C 讓底圖的蜜蜂飛
• 6.6.D 讓動畫持續輪轉

• 第七堂課
• 7.1.A 一般導覽列使用清單項目搭配 CSS 特效功能 (7±2的按鈕)
• 7.1.B 修改導覽列加入active的樣板
• 7.1.C 修改導覽列，讓按鈕鍵沒有框線
• 7.2.A 讓導覽列擁有第二層選單的功能
• 7.2.B 讓導覽列第二層選單可以有滑動特效
• 7.3.A 讓圖片具有超連結的功能
• 7.4.B 使用Balsamip Markup快速建置網站示意圖
• 7.5.A 以HTML5的新標籤處理整體的風格樣式

• 第八堂課
• 8.2.A 單欄式版面設計
• 8.2.B 雙欄式版面設計