• 姓名：許銘凱
• 學號：4051c003
• 回首頁

上課內容

• 第三堂課的上課練習
  • 例題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 處理兩種不同的 class
  • 例題3.4.B: CSS 處理 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: 超連結變成區塊 (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: 方塊 - 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: 修改導覽列加入 active 的樣板
  • 例題 7.1.C: 修改導覽列，讓按鈕間沒有框線
  • 例題 7.2.A: 讓導覽列擁有第二個選單功能
  • 例題 7.2.B: 讓導覽列第二層選單可以具有滑動特效
  • 例題 7.3.A: 讓圖片可以具有超連結的點選功能
  • 例題 7.4.B: 使用Balsamiq Markup 快速鍵置網站示意圖
  • 例題 7.5.A: 以HTML5的新標籤處理整體網站的風格樣式
  • 例題 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: 透過function處理時間問候語
  • 例題 9.3.A: 使用網址傳遞變數給伺服器處理
  • 例題 9.3.B: 使用網址傳遞變數給伺服器處理-解決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搭配 visbility

• 第六堂課程課後練習
  • 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： 透過地圖連結以及清單項目的絕對位置說明