• 姓名：黃建智
• 學號：4060C005
• 回到我的個人首頁

上課連結

• 第三堂課的上課練習
• 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： 使用 CSS 修改字體相關的功能顯示
• 4.1.B： 在字框與字體之間透過 padding 保留空白留白感
• 4.1.D： 使用本伺服器提供的中文字型
• 4.2.A： 超連結的 :hover, :active :focus 特效
• 4.2.B： 讓超連結變成區塊顯示 (display: block)
• 4.3.A： :hover 用在其他任意的地方
• 4.4.A： 清單的效果-中文號碼清單
• 4.4.B： 清單的效果-使用圖檔來取代前導符號
• 4.5.A： 空氣品質 (AQI) 的相關說明用 CSS 美化圖表
• 4.5.B： 空氣品質 (AQI) 的相關說明用 CSS 美化圖表(collapse 的框線重疊)
• 4.6.A： 以清單來說明使用 ul li 會產生的後代繼承影響問題
• 4.6.B： 承上，使用 ul > li 討論後代就不會繼承的效應
• 4.6.C： 使用 display 搭配 :hover 討論影藏資料的特效
• 第五堂課的上課練習
• 5.1.A： 方塊初探
• 5.1.B： 方塊 - 水平置中
• 5.1.C： 方塊 - 框線的圓角+陰影
• 5.1.D： 方塊 - 框線的圓角+陰影自製的邊框 (90x90x 為例)
• 5.2.A： 方塊 - 將方塊變成行內元素
• 5.2.B： 方塊 - 盡量不要跑版的設計之一
• 5.2.C： 方塊 - 用 vertical-align 進行向上對齊的功能 (放在子元素內歐~)
• 5.2.D： 方塊 - 用 float 進行向上對齊的功能
• 5.2.E： 方塊 - 加上 overflow 得父元素的功能
• 5.3.A： 方塊 - 兩個方塊的重疊與透明度
• 5.3.B： 方塊 - 透過 z-index 調整元素的圖層上/下
• 5.3.C： 方塊 - position 位置初探
• 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 的影藏效果
• 第六堂課的上課練習
• 6.1.A： 背景的漸層效果初探
• 6.1.B： 背景的漸層效果--用於大頭照
• 6.2.A： 背景--多張背景的應用
• 6.2.B： 背景--背景填滿的效果-cover, contain
• 6.2.C： 背景--清單變成按鈕的效果
• 6.3.A： 照片圖文框的設計
• 6.4.A： 方塊的變形--角度變化與疊圖
• 6.4.B： 方塊的變形--方塊的大小、位置
• 6.5.A： 照片圖文框的設計-增加漸變功能 (類似動畫)
• 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： 用清單設計導覽列 - 兩層導覽列 - 加上下拉效果
• 7.3.A： 用圖片進行超連結的 map 功能
• 7.4.B： 使用 Balsamiq Mark 進行快速版面配置作業
• 7.5.A： 主要的版面配置建置
• 第八堂課的上課練習
• 8.2.A： 版面配置 - 單欄式設計
• 8.2.B： 版面配置 - 單欄式設計
• 8.4.A： 版面配置 - 單欄式設計
• 第九堂課的上課練習 - PHP初探
• 9.1.A： 第一個 PHP 程式碼的網頁
• 9.1.B： 使用變數處理
• 9.1.C： 網頁安全色 - PHP迴圈寫成
• 9.1.D： 網頁安全色 - PHP迴圈寫成 - 對比色
• 9.1.E： 用 PHP 抓伺服器的時間
• 9.1.F： 用 date() 判斷時間，並告知問候語
• 9.2.B： 透過 function 處理時間問候語
• 9.3.A： 使用變數處理資料輸出 - 用 PHP $_GET 抓取資料
• 9.3.B： 使用變數處理資料輸出 - 用 PHP $_GET 抓取資料--已經解決 XSS 的問題
• 9.4.A： 電腦隨機出拳
• 9.4.B： 跟電腦猜拳-假設你先出剪刀拳
• 9.4.C： 隨機計算人物屬性
• 9.4.D： 隨機讓電腦判斷圖怎麼撤

Homeworks

• 第三節課程課後練習
• 3.7.2： 外部的 CSS 風格設定檔主要內容
• 3.7.3： 以 CSS 風格取代 HTML 的課表展示
• 3.7.4： 以 CSS 風格取代 HTML 的特殊符號對應表
• 3.7.5： 以 CSS 風格取代 HTML 的書籍清單展示
• 第四節課程課後練習
• 4.7.2： 以 CSS 修飾古文展示
• 4.7.4： 以 CSS 修飾清單以及巢狀清單的影藏使用
• 4.7.5： 以 CSS 修飾表格以及 :hover 的美化
• 第五節課程課後練習
• 5.5.2： 使用 position 進行排版
• 5.5.3： 使用 :hover 搭配 visibility 進行答案隱藏
• 第六節課程課後練習
• 6.7.2： 使用漸層處理與圖片重疊的技巧，處理彩虹人物像
• 6.7.3： 直立的按鈕改橫式按鈕，並增加一個按鈕
• 6.7.4： 圖示放大變成在正中央放大，不是向右下方放大的模樣
• 6.7.5： 承上，加上漸變功能
• 6.7.6： 蜜蜂飛來飛去，衝向螢幕來嚇你
• 6.7.7： 照片的幻燈片淡出/淡入效果功能
• 第七節課程課後練習
• 7.6.2： 使用較清爽的導覽列模式
• 7.6.3： 讓原本橫的導覽列變成直的導覽列模式
• 7.6.4： 預計達成的期中報告網站列表
• 7.6.5： 透過地圖連結以及清單項目的絕對位置說明
• 第九節課程課後練習
• 9.5.2： 九九乘法表列表
• 9.5.3： 剪刀石頭布
• 9.5.4： 透過陣列設計以及亂數，取得最大獎的抽獎活動