• 姓名:王雯莉
• 學號:4050C004
• 回我的個人首頁

上課連結

• 第三堂課
  • 3.1.B:使用CSS的 style 取代font,strong等標記
  • 3.2.A:使用CSS的~數值單位~修改某些特性的大小
  • 3.2.B:搭配Body的 CSS 整體網頁風格的效果
  • 3.3.A:直接在head內增加style設定 CSS 風格
  • 3.3.B:在表格上面套用底圖的設計方式
  • 3.4.A:使用 CSS 套用表格兩個不同橫列的設計
  • 3.4.B:統一表格的單一class設計方式
  • 3.5.A:使用id取代class的功能
  • 3.6.A:呼叫外部 CSS 風格設定檔

• 第四堂課
  • 4.1.A
  • 4.1.B 內部留白 (padding)
  • 4.1.D 加入襯線字體
  • 4.2.A 超連結的特效
  • 4.2.B a 變成區塊元素
  • 4.3.A 任何東西都可以 :hover 的啦
  • 4.4.A 清單與hover的同時應用
  • 4.4.B 清單特效,使用圖檔來取代前導符號
  • 4.5.A 空氣品質的相關說明用CSS美化圖表
  • 4.5.B 空氣品質的相關說明用CSS美化圖表:collapse的框線重疊
  • 4.6.A 用清單來說明繼承，這是後代通通繼承的時候
  • 4.6.B 用清單來說明繼承，僅影響下一代而不是所有後代
  • 4.6.C 用清單來說明繼承，加上 display: none 的隱藏應用

• 第五堂課
  • 5.1.A 方塊模型的初級理解
  • 5.1.B 方塊模型的置中處理(水平對齊, margin)
  • 5.1.C 方塊模型的圓角與陰影
  • 5.1.D 方塊模型使用圖檔作為框線的來源
  • 5.2.A 方塊對齊的機制-inline-block
  • 5.2.B 方塊對齊的機制-外部方塊整合排版
  • 5.2.C 方塊對齊的機制-內部靠上對齊用 vertical-align
  • 5.2.D 方塊對齊的機制-內部靠上對齊用 float
  • 5.2.E 方塊對齊的機制-外部框線補ˋ齊用 overflow
  • 5.3.A 位置探討 - 正常流向時，使用 margin 調整移動的位置
  • 5.3.B 位置探討 - 承上，使用 z-index 搭配 position 來調整圖層
  • 5.3.C 位置探討 - 一般排版，使用垂直朝上對齊的效果，分三欄位
  • 5.3.D 位置探討 - 使用 position relative 來調整單一方塊移動的效果
  • 5.3.E 位置探討 - 使用 position absolute 來調整全部方塊移動的效果
  • 5.3.F 位置探討 - 使用 position fixed 來增加一個類似按鈕方塊的功能
  • 5.4.A 討論不同的 overflow 效果展示
  • 5.4.B 圓形的大頭貼產生的方式
  • 5.4.C 討論 visibility 搭配 hover 的效果

• 第六堂課
  • 6.1.A 使用漸層的背景
  • 6.1.B 圖形外框大頭照加上厚重彩虹圖形
  • 6.2.A 多張底圖的處理方式
  • 6.2.B 背景放大到邊框的型態 cover/contain
  • 6.2.C 影像透明度的使用opacity的處理
  • 6.3.A 方塊內圖片上面疊上文字說明的統一格式處理
  • 6.4.A 多重圖示的轉動技巧加上萬用字元的呼叫使用
  • 6.4.B 圖示的重疊畫面展示(5個圖示重疊)
  • 6.5.A 以漸變方式取代直接變化的 transition 功能
  • 6.6.A 以動畫方式讓滑鼠特效變成一直變動的畫面
  • 6.6.B 以動畫方式讓企鵝一直轉圈圈
  • 6.6.C 讓底圖的蜜蜂飛
  • 6.6.D 讓動畫持續輪轉

• 第七堂課
  • 7.1.A 第一個導覽列功能
  • 7.1.B 第一個導覽列功能-外加活動中的項目
  • 7.1.C 第一個導覽列功能-按鈕連在一起
  • 7.2.A 第一個下拉式選單
  • 7.2.B 做選單的 transition 漸變特效
  • 7.3.A 使用圖片地圖的超連結導覽方式
  • 7.4.B 使用 Balsamiq 超快速製作頁面簡介
  • 7.5.A 一層一層建置好所需要的版型(搭配 7.4.B)

Homeworks

• 第三堂課後練習
  • 外部CSS風格設定
  • 以 CSS 風格取代HTML的課表展示
  • 以 CSS 風格取代HTML的特殊符號對應表
  • 以 CSS 風格取代HTML的書籍清單展示

• 第四堂課後練習
  • 以CSS修飾古文的展示
  • 以CSS修飾清單以及巢狀清單的隱藏使用
  • 以CSS修飾表格以及:hover的美化

• 第五堂課後練習
  • 使用position進行排版
  • 使用hover搭配visibility進行答案隱藏

• 第六堂課後練習
  • 使用漸層處理與圖片重疊的技巧，處理彩虹人物像
  • 直立的按鈕改橫式按鈕，並增加一個按鈕
  • 圖示放大變成在正中央放大，不是向右下放大的模樣
  • 承上，加上漸變的功能
  • 蜜蜂飛來飛去，衝向螢幕來嚇你
  • 照片的幻燈片淡出/淡入效果功能

• 第七堂課後練習
  • 清爽版導覽列
  • 直式導覽列
  • 期中報告網站列表
  • 地圖連結及清單項目的絕對位置說明