• 姓名：古勵
• 學號：4060C040

底下為各階段網頁學習所建立的個別首頁

第三堂課的內容

• 例題3.1.B:第一次使用CSS取代<font>
• 例題3.2.A:探討CSS的單位
• 例題3.2.B:探討CSS的簡易使用
• 例題3.3.A:CSS 在 head 使用的整體設定值
• 例題3.3.B:CSS 處理背景
• 例題3.4.A:CSS 用CSS處理兩種不同的class
• 例題3.4.B:CSS 用CSS處理table的底圖
• 例題3.5.A:CSS 用ID去呼叫，不是class
• 例題3.6.A:使用外部呼叫的style.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： 自製方塊的邊框圖片(以90x90為例)
• 例題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跟container
• 例題6.2.C： 背景-清單變成按鈕的效果
• 例題6.3.A： 照片圖文框的設計
• 例題6.4.A： 方塊的變形-角度變化與疊圖
• 例題6.4.B： 方塊的變形-方塊的大小跟位置
• 例題6.5.A： 照片圖文框的設計-增加漸變
• 例題6.6.A： 讓圖片自己動的小小動畫

第七堂課的內容

• 例題7.1.A： 用清單設計導覽列
• 例題7.1.B： 用清單設計導覽列-增加目前瀏覽中的頁面
• 例題7.1.C： 用清單設計導覽列-增加目前瀏覽中的頁面-連在一起
• 例題7.2.A： 用清單設計導覽列-兩層導覽列
• 例題7.2.B： 用清單設計導覽列-兩層導覽列-加上下拉效果
• 例題7.3.A： 用圖片型超連結map功能
• 例題7.4.B： 使用 Balsamiq 設計簡單的網頁草圖
• 例題7.5.A： 主要的版面配置建置

第九堂課的內容

• 例題9.1.A： 第一個php程式
• 例題9.1.B： 使用變數處理
• 例題9.1.C： 迴圈搭配表格秀出網頁安全色
• 例題9.1.D： 迴圈搭配表格秀出網頁安全色-對比色
• 例題9.1.E： 用php抓伺服器的時間
• 例題9.1.F： 用date() 判斷時間，並告知問候語
• 例題9.2.B： 透過function處理時間問候語
• 例題9.3.A： 使用網址傳遞變數給伺服器處理
• 例題9.3.B： 使用網址傳遞變數給伺服器處理
• 例題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： 照片的幻燈片淡出/淡入的效果
• 第七節課程作業
• 6.7.2： 比較清爽的導覽列
• 6.7.3： 橫的導覽列變直的導覽列
• 6.7.5： 地圖連結以及清單項目的絕對位置說明
• 第九節課程作業
• 9.5.2： 九九乘法表列表
• 9.5.3： 剪刀石頭布
• 9.5.4： 透過陣列設計以及亂數，取得最大獎的抽獎活動