• 姓名:陳鵬皓
• 學號:4060c006
• 回首頁

• 第三堂課的內容
• 例題3.1.B: 第一次使用CSS取代
• 例題3.2.A: 本系目標改字幕顏色
• 例題3.2.B: 本系目標改底色
• 例題3.3.A: 整體版型設定如文字、背景、段落行高
• 例題3.3.B: 利用圖檔當底部配色
• 例題3.4.A: 增加類別 (class) 可重複引用特定屬性的方式
• 例題3.4.B: 增加類別 (class) 可重複引用特定屬性加上表格用底圖當背景
• 例題3.5.A: CSS使用ID去呼叫
• 例題3.6.A: CSS使用外部去呼叫style.class

• 第四堂課的內容
• 例題4.1.A: 簡易的CSS字型處理
• 例題4.1.B: 簡易的CSS字型處理(內部留白)
• 例題4.1.D: 使用本伺服器提供的中文字型
• 例題4.2.A: 超連結的使用
• 例題4.2.B: 超連結變成區塊(block)
• 例題4.3.A: 任何地方都能用 :hover
• 例題4.4.A: 清單的效果-中文號碼清單
• 例題4.4.B: 清單的效果-項目變成圖片
• 例題4.5.A: 表格功能的CSS修訂
• 例題4.5.B: 表格功能-border-collapse 功能
• 例題4.6.A: 繼承-清單為例
• 例題4.6.B: 繼承-後代子孫不會被影響>
• 例題4.6.C: 繼承-display的隱藏效果

• 第五堂課的內容
• 例題5.1.A: 方塊初探
• 例題5.1.B: 方塊-水平置中
• 例題5.1.C: 方塊-框線圓角+陰影
• 例題5.1.D: 方塊-自製的邊框圖片(90*90為例)
• 例題5.2.A: 方塊-將方塊變成行內元素
• 例題5.2.B: 方塊-盡量不要跑版的設計之一
• 例題5.2.C: 方塊-用vertical-align 進行向上對齊的功能
• 例題5.2.D: 方塊-加上overflow的父元素功能
• 例題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.5.A: 照片圖文框的設計-增加漸變功能(類似動畫)
• 例題6.4.A: 方塊的變形--角度變化與疊圖
• 例題6.4.B: 方塊的變形--方塊的大小跟位置
• 例題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 Mark 進行快速版版面配置作業
• 例題7.5.A: 主要的版面配置建置

• 第八堂課的內容
• 例題8.2.A: 版面配置-單欄式設計
• 例題8.2.B: 版面配置-兩欄式設計

• 第九堂課的內容(php)
• 例題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: 使用網址傳遞變數給伺服器處理解決XSS
• 例題9.4.A: 電腦隨機出拳
• 例題9.4.B: 跟電腦猜拳-假設你先出剪刀
• 例題9.4.C: 隨機計算人物屬性
• 例題9.4.D: 照片就隨便你丟

Home Work

• 第三堂作業
• 習題:03.7.2以外部的CSS風格設定檔主要內容
• 習題:03.7.3以CSS風格取代HTML的課表展示
• 習題:03.7.4以CSS風格取代HTML的對應表
• 習題:03.7.5以CSS風格取代HTML的書籍清單展示

• 第四堂作業
• 習題:04.7.2修飾古文的展示
• 習題:04.7.4修飾清單以及巢狀清單的隱藏
• 習題:04.7.5以 CSS 修飾表格以及 :hover 的美化

• 第五堂作業
• 習題:05.5.2 使用position排版
• 習題:05.5.3使用:hover 搭配 visibility進行答案隱藏

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

• 第七堂作業
• 習題:07.6.2 使用較輕爽的導覽列模式
• 習題:07.6.3 讓原本橫的導覽列變成直的導覽列
• 習題:07.6.4 預計達成的期中報告網站列表
• 習題:07.6.5 透過地圖連結以及清單項目的絕對位置說明

• 第九堂作業
• 習題:09.5.2 九九乘法表列表
• 習題:09.5.3 剪刀石頭布
• 習題:09.5.4 透過陣列以及亂數，取得最大獎的抽獎活動