先準備一個網站資料夾「TS_web2」,接著再依以下步驟準備相關資源與檔案。
下載後 → 解壓縮 → 將「images」資料夾放在「TS_web2」網站資料夾之內。
【screensiz.es】、【手機屏幕尺寸大全】、【Device Metrics】
設計了手機、平板、桌機...等各種顯示器規格,方便快速查詢了解螢幕顯示器的規格。
查找任何屏幕的設備指標,以及相關設備RWD的資訊。
許多網站皆喜於圖示表達,Font Awesome 提供了豐富的圖示,可以搜尋「fa font 4.7」是Free的版本。
網站中我們將自定設計動畫,並且需要設計動畫的加減速特效。
網站中有些標題或重要文字希望能有統一的字體,可以運用 Google Web Font。
在網頁的<head>區內使用 link 的方式,貼上如下的語法,參考如下:(以下是一行,不換行)
<link href="https://fonts.googleapis.com/css2?family= Noto+Sans+TC:wght@500&family=Righteous&display=swap" rel="stylesheet">
或是在 CSS 撰寫區域的最上方使用 @import 的方式,貼上如下的語法,參考如下:
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&family=Righteous&display=swap');
另外建議在CSS撰寫區的最上方加上 font-family:... 參考寫法的註解,在需要的時候複製貼上,參考如下:
/* font-family: 'Noto Sans TC', sans-serif; 中文黑體 font-family: 'Righteous', cursive; 英文方圓體 font-family: 'Righteous', 'Noto Sans TC', sans-serif; 英文方圓體=>中文黑體=>電腦系統預設的無襯線字體 */
建議也可以在CSS中撰寫一個class樣式,在需要的地方加上這個class樣式即可,參考如下:
.webfont { }