網頁設計｜課程講義

Web design

jQuery動態網頁初探與圖示字體(icon font)

Author

JinJin Wang

March 25, 2026

jQuery概述

jQuery概述
jQuery的口號是 ：write less, do more (寫得更少，實現的更多) 。
jQuery是一套運用 JavaScript來與 HTML和 CSS進行互動的新方法，了解CSS的概念，便能輕鬆的學習這套程式庫。
jQuery對跨瀏覽器的支援完整，可支援複雜動畫並實現視覺效果。

名詞釋義
  1. JavaScript：JavaScript (簡稱 JS) 是具有一級函數 (First-class functions) 的輕量級、直譯式或即時編譯（JIT-compiled）的程式語言。它因為用作網頁的腳本語言而大為知名，但也用於許多非瀏覽器的環境，像是 node.js、Apache CouchDB。JavaScript 是一個基於原型的 (Prototype-based)、多範型的、動態語言，支援物件導向、指令式以及宣告式 (如函數式程式設計) 風格。 閱讀｜關於 JavaScript 以取得更多資訊。

    參考文章｜ MND｜JavaScript

  2. jQuery：jQuery是一個快速，小型且功能豐富的JavaScript庫。通過易於使用的API（可在多種瀏覽器中使用），它使HTML文檔的遍歷和操作，事件處理，動畫和Ajax等事情變得更加簡單。兼具多功能性和可擴展性，jQuery改變了數百萬人編寫JavaScript的方式。

    參考文章｜ jQuery

jQuery相關網站

jQuery相關網站

jQuery官方網站
  1. jQuery介面｜測試練習

    jQuery UI是在jQuery JavaScript庫之上構建的一組精選的用戶界面互動效果、小部件和主題。無論是構建高度互動的Web應用程序，還是只需要向表單控件添加日期選擇器，jQuery UI都是最佳選擇。

    2. Skeuomorphic Design Example
  2. 下載jQuery

    可以使用jQuery文件的壓縮和未壓縮副本。

jQuery教學

jQuery 語法

jQuery 語法

jQuery官方網站

「快速選取元素」並且「做一些事情」

語法釋義：選取($)文件內所有的 div 元素，以兩秒鐘(2000)的速度 淡入 (.fadeIn) 出現

淡入效果語法

語法釋義：

  1. 語法皆置於＜head＞ ＜/head＞ 內。
  2. 連接jQuary官網 CSS(.css)與 juaryScript(.js)檔案，以作為效果連動。
    Skeuomorphic Design Example
  3. 先讓整體 消失.hide()，再以 兩秒時間淡入出現.fadeIn(2000)。
    Skeuomorphic Design Example

語法解析｜ CSS3語法

CSS3語法

    html中插入圖片語法：

    若無適合的自己拍攝之相片，可利用專業免費圖庫 相片圖庫 ｜Unsplash，獲得高清的檔案，底圖需超過2000px，但檔案需小於1MB，否則影響網站流量。

    CSS3部分語法解析｜
    1. 圓角：border-radius: 20px; （上下左右圓角皆為20px）
    2. 圓角：border-radius: 10px 0 10px 0; （ 圖片圓角：上：10px；右：0px；下：10px；左：0px ）
    3. 區塊陰影：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;
    4. 文字陰影：text-shadow: 1px 1px 1px #000000;（文字陰影：X(上下位移)：1px；Y(左右位移)：1px； 模糊度 1px；色彩 #000000））
    5. 透明度： rgba(102,153,255,0.5)(不透明度50%，1為完全不透明，0為完全透明)
    6. RGBA是代表Red（红色） Green（綠色） Blue（藍色）和 Alpha，Alpha 0代表透明、1代表不透明，請自行改變數值）
    7. 透明度：opacity: 0.5;（設定的元素有50%的透明度，請自行放入適當位置並改變數值）
    8. 線性漸層：background:linear-gradient(#B8E7F3,#43C3E4);（從上 #B8E7F3 漸層到下 #43C3E4）
    9. 線性漸層：background:linear-gradient(rgba(123,219,241,0.8),rgba(0,91,112,0.8));（漸層背景色加不透明度80%*）
    10. 放射漸層：background:radial-gradient(#B8E7F3,#43C3E4);
    11. 漸層語法:http://mepopedia.com/forum/read.php?844,17157
    新增於作業02的CSS3語法：

    利用色彩選取工具 MDN ｜色彩選擇工具，可以輕鬆將顏色轉換成各種 CSS 支援的格式，包含：HEXA、RGB（Red/Green/Blue）、rgba、選擇適合的顏色標示，方便以RGBA做透明度與漸層透明色的設定。

    作業02的html中head內語法：
    CSS animation

    只需要定義兩個部份：1. 動畫的最初及結尾 2. 動畫轉變的方式。

    1. 設定 CSS 動畫。
    2. 使用 @keyframes 設定動畫關鍵影格。
    3. animation-duration：設定整個動畫播放一次的時間長度。
    4. animation-name：設定 @keyframes at-rule 所使用的動畫名稱。
    5. 在關鍵影格的部份則是使用百分比來指定動畫在每個時間點呈現的方式，0% 代表動畫一開始播放的起始點，而 100% 則代表動畫的結尾

    若於練習中加入h1滑入的動畫，可加入以下CSS語法練習：

    Youtube影片嵌入
    1. 進入所欲置入的影片網址，點選下方分享
      2. 範例影片網址
      Skeuomorphic Design Example
    2. 進入後，點選左邊的< 嵌入 >
      3. Skeuomorphic Design Example
    3. 點選下方『複製』，將語法複製。
      4. Skeuomorphic Design Example
    4. 將語法複製於要放置html中，影片的位置即可，以 ＜p＞包覆則會有段落。

語法解析｜ 圖示字體

圖示字體

    FontAwesome官方網站｜ FontAwesome ICONS

    使用FontAwesome圖示字體
    1. 註冊或登入FontAwesome帳號
      2. Skeuomorphic Design Example
      Skeuomorphic Design Example
    2. 登入帳號後，點擊『Your Kits』，進入工具包
      3. Skeuomorphic Design Example
    3. 點選『自己的帳號』，進入工具包設定
      4. Skeuomorphic Design Example
    4. 複製自己帳號專屬的『 JavaScript 程式碼』，貼到 html文件的＜head＞＜/head＞中，即可啟動與呼叫fontawesome圖示字體
      5. Skeuomorphic Design Example
    5. 在html文件的＜head＞＜/head＞中加入fontawesome ＜script＞語法，即可啟動與呼叫fontawesome圖示字體。

      6. 來源｜ FontAwesome 文件說明

    6. 點選 FontAwesome Icons頁面：可搜尋或選擇要使用的圖示字體，直接點擊進入圖示文字頁面。

      7. FontAwesome Icons

      Skeuomorphic Design Example
    7. 進入該圖示文字頁面，複製上方語法，貼到html檔案中想要出現的地方即可。
      8. Skeuomorphic Design Example

      來源｜ FontAwesome anchor