• 姓名:朱永馨
• 學號:4050c026
• 回到我的個人首頁

上課連結

• 第三堂課
  • 例題 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 設定類別影響子標記的方式
  • 例題 3.5.A 使用 id 取代 class 的方案
  • 例題 3.6.A 使用外部 style 檔案，重複呼叫同一樣式設定

• 第四堂課
  • 例題 4.1.A 簡單文字的滾滾長江東逝水
  • 例題 4.1.B 承上，加上內部留白的 padding 處理
  • 例題 4.1.D 承上，使用自己伺服器提供的字型
  • 例題 4.2.A 超連結的特殊效果
  • 例題 4.2.B 超連結元素變成區塊元素
  • 例題 4.3.A 任何東西都可以 :hover
  • 例題 4.4.A 清單的中文數字顯示
  • 例題 4.4.B 清單中加入殊美工圖案
  • 例題 4.5.A 空氣品質處理表格處理
  • 例題 4.5.B 空氣品質處理表格處理-針對框線
  • 例題 4.6.A 用清單來說明繼承，這是後代通通繼承的時候
  • 例題 4.6.B 用清單來說明繼承，僅影響下一代而不是所有後代
  • 例題 4.6.C 用清單來說明繼承，加上 display: none 的隱藏應用

• 第五堂課
  • 例題 5.1.A 內部元素寬度、內部留白、框線、外部留白
  • 例題 5.1.B 方塊的水平置中
  • 例題 5.1.C 方塊框線形狀變化與陰影
  • 例題 5.1.D 自製框線
  • 例題 5.2.A 方塊的對齊 (vertical-align) 以及浮動 (float) 對齊
  • 例題 5.2.B 讓圖示排版整齊，不會跑掉的方法
  • 例題 5.2.C 排版向上對齊的方式
  • 例題 5.2.D 使用 float 漂浮對齊以及父元素的問題
  • 例題 5.2.E 很多網頁都以此方式來進行兩欄或三欄排版的對齊
  • 例題 5.3.A 位置探討 - 正常流向時，使用 margin 調整移動的位置
  • 例題 5.3.B 位置探討 - 承上，使用 z-index 搭配 position 來調整圖層
  • 例題 5.3.C 位置探討 - 一般排版，使用垂直朝上對齊的效果，分三欄位
  • 例題 5.3.D 位置探討 - 使用 position relative 來調整單一方塊移動的效果
  • 例題 5.3.E 位置探討 - 使用 position absolute 來調整全部方塊移動的效果
  • 例題 5.4.A 討論不同的 overflow 效果展示
  • 例題 5.4.B 圓形的大頭貼產生的方式
  • 例題 5.4.C 討論 visibility 搭配 hover 的效果

• 第六堂課
  • 例題 6.1.A 色彩漸層的初體驗
  • 例題 6.1.B 圓形的彩虹漸層處理
  • 例題 6.2.A 寧夏的歌詞 (三張底圖的處理方式)
  • 例題 6.2.B 底圖的填滿效果 (contain vs. cover)
  • 例題 6.2.C 影像透明度的使用 opacity 的處理
  • 例題 6.3.A 方塊內圖片上面疊上文字說明的統一格式處理
  • 例題 6.4.A 多重圖示的轉動濟橋加上萬用字源的呼叫使用
  • 例題 6.4.B 圖示的重疊畫面展示 (五個圖示重疊)
  • 例題 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)

• 第八堂課
  • 例題 8.2.A 單欄式設計-使用 vw 的單位
  • 例題 8.2.B 雙欄式設計-讓導覽列固定在左側
  • 例題 8.3.A
  • 例題 8.4.B
  • 例題 8.5.A

• 第九堂課
  • 例題 9.1.A 第一個 PHP 的網頁 (你看不到程式碼的)
  • 例題 9.1.B 利用變數處理
  • 例題 9.1.C 迴圈處理網頁安全色
  • 例題 9.1.D 迴圈處理網頁安全色-套用文字對比色
  • 例題 9.1.E PHP的伺服器時間顯示
  • 例題 9.1.F PHP 的日期功能和時間回應問候語
  • 例題 9.2.A 直接呼叫 function.php檔案共用程式碼
  • 例題 9.2.B 如同9.2.A
  • 例題 9.3.A 透過網址列傳送變數

Home Wroks

• 第3堂課課後練習
  • 3.7.2:CSS設計
  • 3.7.3:以CSS風格取代HTML的課表展示
  • 3.7.4:以CSS風格取代HTML的特殊符號對應表
  • 3.7.5:以CSS風格取代HTML的書籍清單展示
• 第4堂課課後練習
• 4.7.2-以CSS修飾古文的展示
• 4.7.4-以CSS修飾清單以及巢狀清單的隱藏使用
• 4.7.5-以CSS修飾表格以及:hover的美化
• 第5堂課課後練習
• 5.5.2-使用position 進行排版
• 5.5.3-使用 :hover 搭配 visibolity 進行答案隱藏
• 第6堂課課後練習
• 6.7.2-使用漸層處理與圖片重疊的技巧，處理彩虹人物像
• 6.7.3-直立的按鈕改橫式按鈕，並增加一個按鈕
• 6.7.4-圖示放大變成正中央放大，不是向右下方放大模樣
• 6.7.5-承上，加上漸變的功能
• 6.7.6-蜜蜂飛來飛去，衝向螢幕來嚇你
• 6.7.7-照片的幻燈片淡出/淡入效果功能
• 第7堂課課後練習
  • 7.6.2:使用較清爽的導覽列模式
  • 7.6.3:讓原本橫的導覽列變成直的導覽列模式
  • 7.6.4:預計達成的期中報告網站列表
  • 7.6.5:透過地圖連結以及清單項目的絕對位址說明