• 姓名:陳怡佳
• 學號:4060C019
• 回我的個人首頁

第三堂課的內容

• 例題3.1.B:第一次使用 CSS 取代 <font&rt;
• 例題3.2.A:探討CSS單位
• 例題3.2.B:探討CSS的簡易使用
• 例題3.3.A:CSS在head使用的整體設定值
• 例題3.3.B:CSS處理背景
• 例題3.4.A:CSS處裡兩種不同的class
• 例題3.4.B:處裡table的底圖
• 例題3.5.A:使用ID去呼叫，不是用Class
• 例題3.6.A:使用外部呼叫的style.css檔案

第四堂課的內容

• 例題4.1.A:簡易的CSS字型處理
• 例題4.1.B:簡易的CSS字型處理+padding(內部留白)
• 例題4.1.D:使用本伺服器提供的中文字形
• 例題4.2.A:超連結的使用
• 例題4.2.B:A 超連結變成區塊(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:方塊 - 自製的邊框圖片 (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:方塊 - position - 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:讓圖片自己動的小動畫

第七堂課的內容

• 例題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.B:主要的版面配置建置

第八堂課的內容

• 例題8.2.A:版面配置-單攔式設計
• 例題8.2.B:版面配置-兩攔式設計

第九堂課的內容

• 例題9.1.A:第一個PHP程式
• 例題9.1.B:使用變數處理
• 例題9.1.C:迴圈搭配表格秀出網頁安全色
• 例題9.1.D:迴圈搭配表格秀出網頁安全色-對比色
• 例題9.1.E:用PHP抓伺服器的時間
• 例題9.1.F:用date()判斷時間並告知問候語
• 例題9.2.B:透過functiont處理時間問候語
• 例題9.2.A:使用網址傳遞變數給伺服器處理
• 例題9.2.B:使用網址傳遞變數給伺服器處理-解決XSS
• 例題9.4.A:電腦隨機出拳
• 例題9.4.B:跟電腦猜拳-假設你先出剪刀
• 例題9.4.C:隨機計算人物屬性
• 例題9.4.D:照片隨便丟

Home Works

第九節課後練習

• 9.5.2九九乘法列表
• 9.5.3剪刀石頭布
• 9.5.4透過陣列及亂數，取得最大獎的抽獎活動

第七節課後練習

• 7.6.2使用較清爽的導覽列模式
• 7.6.3讓原本橫的導覽列變成直的導覽列模式
• 7.6.4預計達成的期中報告網站列表
• 7.6.5透過地圖連結以及清單項目的絕對位置說明

第六節課後練習

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

第五節課後練習

• 5.5.2:使用position進行排版
• 5.5.3:使用:hover搭配visibility進行答案隱藏

第四節課後練習

• 4.7.2:以CSS修飾古文的展示
• 4.7.4:以CSS修飾清單以及巢狀清單的隱藏使用
• 4.7.5:以CSS修飾表格以及:hover的美化

第三節課後練習

• 3.7.2:外部CSS風格設定檔主要內容
• 3.7.3:以CSS風格取代HTML的課表展示
• 3.7.4:以CSS風格取代HTML的特殊符號對應表
• 3.7.5:以CSS風格取代HTML的書籍清單展示