總覽｜ 講義列表
作業範例與說明｜
學長姐參考｜ hw02-1091445085｜ hw02-1091445028｜ hw02-1091445032｜ hw02-1091445069｜ 1081445079｜ 1095445027｜
作業二同樣須針對歌詞意境，加入圖片、jQuery動態語法、CSS3進階語法以及圖示字體(icon font)，使網頁加入更多效果，藉以了解更多樣的語法與功能。包含：
- jQuery動態語法：至少需放置兩項jQuery語法，如『FadeIn淡入效果』，以及『tabs標籤轉換頁』。
- CSS3語法： 透明度、漸層色、漸層加透明、文字陰影、區塊陰影、區塊圓角、CSS3動畫..等效果。
- 圖示字體 ：在適當處加入圖示字體，讓網頁增添活潑與設計感。
本章為作業二語法總整理，其他相關詳細說明，請參考講義：
語法解析｜ jQuery動態語法
jQuery動態語法
- 語法皆置於＜head＞ ＜/head＞ 內。
-
連接jQuary官網 CSS(.css)與 juaryScript(.js)檔案，以作為效果連動。
-
先讓整體 消失.hide()，再以 兩秒時間淡入出現.fadeIn(2000)。
作業至少需放置兩項jQuery動態語法，如『FadeIn淡入效果』，以及『Tabs標籤轉換頁』
淡入效果語法｜
語法釋義：
應用範例｜tabs
以tabs為範例，應用於作業中Tabs HTML head部分
重點是style.cc需放在jquery-ui.css的下方，以讀取最後的設定為主。
將Tabs內容，放置於html適合的位置，並修改為適合歌詞內容的文字。
Tabs 在 style.css 修改寬度比例，以及底色、透明度的修改
整合語法｜FadeIn 與 Tabs
Html部分。
style.css 部分。
語法解析｜ CSS3語法
CSS3語法
- 圓角：border-radius: 20px; （上下左右圓角皆為20px）
- 圓角：border-radius: 10px 0 10px 0; （ 圖片圓角：上：10px；右：0px；下：10px；左：0px ）
- 區塊陰影：box-shadow:5px 5px 5px #000000;（區塊陰影：X(上下位移)：5px；Y(左右位移)：5px； 模糊度 5px；色彩 #000000）
- 作用：替一個區塊(div/block)增加陰影。
- 用法：box-shadow: x y blur spread color inset;
- 解釋：x = 上/下 (水平移動)。y = 左/右 (垂直移動)。blur = 模糊/清楚。spread = 分散/凝聚。color=顏色。inset = 內陰影
- 寫法：box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
- 文字陰影：text-shadow: 1px 1px 1px #000000;（文字陰影：X(上下位移)：1px；Y(左右位移)：1px； 模糊度 1px；色彩 #000000））
- 透明度： rgba(102,153,255,0.5)(不透明度50%，1為完全不透明，0為完全透明)
- RGBA是代表Red（红色） Green（綠色） Blue（藍色）和 Alpha，Alpha 0代表透明、1代表不透明，請自行改變數值）
- 透明度：opacity: 0.5;（設定的元素有50%的透明度，請自行放入適當位置並改變數值）
- 線性漸層：background:linear-gradient(#B8E7F3,#43C3E4);（從上 #B8E7F3 漸層到下 #43C3E4）
- 線性漸層：background:linear-gradient(rgba(123,219,241,0.8),rgba(0,91,112,0.8));（漸層背景色加不透明度80%*）
- 放射漸層：background:radial-gradient(#B8E7F3,#43C3E4);
- 漸層語法:http://mepopedia.com/forum/read.php?844,17157
- 設定 CSS 動畫。
- 使用 @keyframes 設定動畫關鍵影格。
- animation-duration：設定整個動畫播放一次的時間長度。
- animation-name：設定 @keyframes at-rule 所使用的動畫名稱。
- 在關鍵影格的部份則是使用百分比來指定動畫在每個時間點呈現的方式，0% 代表動畫一開始播放的起始點，而 100% 則代表動畫的結尾
- 進入所欲置入的影片網址，點選下方分享 範例影片網址
- 進入後，點選左邊的< 嵌入 >
- 點選下方『複製』，將語法複製。
- 將語法複製於要放置html中，影片的位置即可，以 ＜p＞包覆則會有段落。
html中插入圖片語法：
若無適合的自己拍攝之相片，可利用專業免費圖庫 相片圖庫 ｜Unsplash，獲得高清的檔案，底圖需超過2000px，但檔案需小於1MB，否則影響網站流量。
CSS3部分語法解析｜
新增於作業02的CSS3語法：
利用色彩選取工具 MDN ｜色彩選擇工具，可以輕鬆將顏色轉換成各種 CSS 支援的格式，包含：HEXA、RGB（Red/Green/Blue）、rgba、選擇適合的顏色標示，方便以RGBA做透明度與漸層透明色的設定。
作業02的html中head內語法：
CSS animation
只需要定義兩個部份：1. 動畫的最初及結尾 2. 動畫轉變的方式。
若於練習中加入h1滑入的動畫，可加入以下CSS語法練習：
Youtube影片嵌入
語法解析｜ 圖示字體
圖示字體
-
FontAwesome官方網站｜
FontAwesome ICONS
註冊或登入FontAwesome帳號
登入帳號後，點擊『Your Kits』，進入工具包
點選『自己的帳號』，進入工具包設定
複製自己帳號專屬的『 JavaScript 程式碼』，貼到 html文件的＜head＞＜/head＞中，即可啟動與呼叫fontawesome圖示字體
在html文件的＜head＞＜/head＞中加入fontawesome ＜script＞語法，即可啟動與呼叫fontawesome圖示字體。
點選 FontAwesome Icons頁面：可搜尋或選擇要使用的圖示字體，直接點擊進入圖示文字頁面。
進入該圖示文字頁面，複製上方語法，貼到html檔案中想要出現的地方即可。
使用FontAwesome圖示字體
來源｜ FontAwesome 文件說明
HomeWork｜課後作業
【作業二】｜html+css 進階練習｜歌詞排版
平時作業｜作業二｜html+css 進階練習｜歌詞排版
第7週繳交
- 請參考[講義] html-css基礎概念練習-歌詞篇製作說明 的步驟製作。
- 請分別於兩首歌詞，加入CSS3視覺效果、jQuary動態效果、FontAwesome圖示字體等，
- 設定出具有符合歌詞意境的網頁
- 加入圖片、影片、及效果使其產生：透明感、漸層、陰影..等。
- 上傳至學校FTP
- 網址為：https://my.cute.edu.tw/~學號/hw02
- 作業評分標準
- 完成兩個檔案且分別設定符合要求的css，無錯誤，至少80分
- 完成以上說明，並符合歌詞意境，設計符合設計美感，85分以上，優秀作品90分以上
- 只完成一個檔案css設定，無錯誤，至多70分
- 只完成一個檔案css設定，且有錯誤，至多60分
- 完成兩個檔案，部分設定未符合要求，且有錯誤，至多70分