WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

3-2. 網站環境準備工作

先準備一個網站資料夾「TS_web2」,接著再依以下步驟準備相關資源與檔案。

 

1.準備工作下載安裝 Bootstrap 4 協助提高RWD網站開發效率

Bootstrap 是世界上「非常受歡迎」「使用率非常高」「符合 RWD 」網站前端設計的框架套件。

使用方式:先新增一個「test.html」檔案練習,在網頁的<head>區內 (在</head>的上一行) 輸入以下原始碼

      <link rel="stylesheet" href="路徑/bootstrap4/css/bootstrap.min.css">
      <script src="路徑/jquery-3.3.1.min.js"></script>
      <script src="路徑/popper.min.js"></script>
      <script src="路徑/bootstrap4/js/bootstrap.min.js"></script>

 

2. 下載:範例練習用的影像檔

下載後 → 解壓縮 → 將「images」資料夾放在「TS_web2」網站資料夾之內。

 

3.準備工作設定 viewport 宣告

viewport是螢幕上瀏覽器的可視區域,viewport的宣告是告訴瀏覽器,目前裝置有多寬(或多高),以便在縮放時有個基準,如果設定 width=device-width 表示依比例呈現對應的可視寬度與高度。

在網頁的<head>區內meta宣告的位置輸入以下原始碼,檢查一下是否要調整。

      <meta name="viewport" content="width=device-width, user-scalable=yes, 
                               initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0">

screensiz.es】或【Device Metrics
設計了手機、平板、桌機...等各種顯示器規格,方便快速查詢了解螢幕顯示器的規格。

 

4.需要時再準備工作下載安裝 fa font 4.7 (圖標文字)

許多網站皆喜於圖示表達,Font Awesome 提供了豐富的圖示,可以搜尋「fa font 4.7」是Free的版本。

在網頁的<head>區內輸入以下原始碼

      <link rel="stylesheet" href="路徑/font-awesome/css/font-awesome.min.css">

 

5.需要時再準備工作下載安裝 jQuery plugin easing

網站中我們將自定設計動畫,並且需要設計動畫的加減速特效。

在網頁的<head>區內輸入以下原始碼

      <script src="路徑/jquery.easing.1.3.js"></script>

 

6.需要時再準備工作取得 Google Web Font 的連結 (雲端文字)

網站中有些標題或重要文字希望能有統一的字體,可以運用 Google Web Font。

在網頁的<head>區內貼上複製的語法,參考如下:

      <link href="https://fonts.googleapis.com/css2?family=
            Noto+Sans+TC:wght@500&family=Righteous&display=swap" rel="stylesheet">

另外建議在CSS撰寫區的最上方加上 font-family:... 參考寫法的註解,在需要的時候複製貼上,參考如下:

      /*
      font-family: 'Noto Sans TC', sans-serif;  中文黑體
      font-family: 'Righteous', cursive;    英文方圓體
        英文方圓體=>中文黑體=>電腦系統預設無襯線字體
      */

建議也可以在CSS中撰寫一個class樣式,在需要的地方加上這個class樣式即可,參考如下:

      .webfont {  }

 

 

go TOP