• 姓名: 許景竣
• 學號:4076C001

上課連結

• 我的bootstrap網頁
• bootstrap
• 報告
• 報告1
• 報告2
• 報告3
• 第九課
• 第一個 PHP 程式
• 使用變數處理
• 迴圈搭配表格秀出網頁安全色
• 迴圈搭配表格秀出網頁安全色-對比色
• 用 PHP 抓伺服器的時間
• 用 date() 判斷時間，並告知問候語
• 透過 function 處理時間問候語
• 使用網址傳遞變數給伺服器處理
• 使用網址傳遞變數給伺服器處理-解決 XSS
• 電腦隨機出拳
• 跟電腦猜拳-假設你先出剪刀
• 隨機計算人物屬性
• 照片就隨便你丟
• 期中
• 期中
• 第八課
• 例題 8.2.A: 版片配置-單欄式設計
• 例題 8.2.B: 版片配置-兩欄式設計
• 第七課
• 例題 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: 主要的版面配置建置
• 第六課
• 例題 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: 讓圖片自己動的小小動畫效果
• 第五課
• 例題 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 的隱藏效果
• 第四課
• 例題 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 的隱藏效果
• 第三課
• 第三堂課:第一次使用 CSS 取代
• 第三堂課:探討 CSS 的單位
• 第三堂課:探討 CSS 的簡易使用
• 第三堂課: CSS 在 head 使用的整體設定值
• 第三堂課:CSS 處理背景
• 第三堂課:CSS 處理兩種不同的 class
• 第三堂課:CSS 處理 table 的底圖
• 第三堂課:CSS 使用 id 去呼叫，不是用 class
• 第三堂課:使用外部呼叫的 style.css 樣式
• 第二課
• 第二堂課:上下標的使用，在公式、化學式的使用
• 第二堂課:使用引言如blockquote,q,cite的使用(介紹36計)
• 第二堂課:使用pre來介紹程式碼
• 第二堂課:使用pre來輸出特殊符號
• 第二堂課:使用表格來輸出學經歷
• 第二堂課:使用表格來輸出特殊符號
• 第二堂課:使用表格來顯示網頁配色
• 第二堂課:嵌入式框架iframe的應用
• 第二堂課:嵌入式框架iframe的應用-活用本頁跳動
• 第二堂課:網頁上嵌入影片
• 第二堂課:網頁上嵌入音樂
• 第一課
• 第一堂課:My 1st web page
• 第一堂課:練習基礎文字排版
• 第一堂課:練習基礎清單項目
• 第一堂課:練習嵌入圖示與超連結

HMOE WORKS

• 第九課
• 九九乘法表
• 剪刀石頭布
• 第七課
• 使用較清爽的導覽列表模式
• 讓原本橫的導覽列變成值的導覽列模式
• 第六課
• 使用漸層處理與圖片重疊的技巧，處理彩虹人物像
• 直立的按扭改橫式按扭，並增加一個按扭
• 圖是放大變成在正中央放大，不是向右下方放大的模樣
• 承上，加上漸變功能
• 蜜蜂飛來飛去，衝向螢幕來嚇你
• 照片的幻燈片淡出/淡入效果功能
• 第五課
• 使用position進行排版
• 使用:hover搭配visibility進行答案隱藏
• 第四課
• 以CSS修飾古文的展示
• 以CSS修飾清單以及巢狀清單的隱藏使用
• 以CSS修飾表格以及 :hover的美化
• 第三課
• 外部的CSS風格設定擋主要內容
• 以CSS風格取代HTML的課表展示
• 以CSS風格取代HTML的特殊符號對應表
• 以CSS風格取代HTML的書籍清單展示
• 第二課
• 習題2.6.2:鳥哥的專訪重新排版
• 習題2.6.3:使用pre去展示HTML原始碼
• 習題2.6.4:使用表格去合理的展示資料
• 習題2.6.5:影音多媒體的使用
• 習題2.6.6:本人的課表
• 第一課
• 習題1.5.2:書籍清單資料
• 習題1.5.3:圖片超連結
• 習題1.5.4:同一頁的書籤超連結