Scratch你的網頁

0.示範網站(以海星中學為例)

響應式網頁設計(Responsive Web Design)簡稱RWD

又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計

1.收集照片及相關資料

(1)安裝NotePad++(NotePad++官方網站)

(2)安裝PhotoCap(PhotoCap官方網站)

(3)練習用圖檔

2.決定網頁版型

(1)網頁版面設計1

(2)網頁版面設計2

(3)2018網頁設計趨勢

3.安裝Bootstrap 4.0

4.建立網頁版面及元件(layoutIt)

第一次使用一定要註冊

5.下載網頁檔案

下載的檔案要存在 C:\AppServ\www

檔案名稱改為 index.html

6.修改文字及尺寸

7.加入jQuery宣告

<script src="js/jquery-3.3.1.min.js"></script>

<script src="js/popper.min.js"></script>

<script src="js/bootstrap.min.js"></script>

8.建立 img 資料夾，存放所有圖片

剪裁圖片 修改檔案名稱

9.修改網頁圖片的位置

<img src="img/XXX.jpg">

10.修改輪播特效程式碼

輪播程式碼下載

11.選用中文字型(Google思源黑體中文字形)

要放在 head 裡面

    <style type = "text/css">

        @import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);

        body {

            font-family: 'Noto Sans TC', sans-serif;

        }

    </style> 

12.選用佈景主題(Bootwatch)

要下載兩個檔案

(1) bootstrap.min.css

(2) bootstrap.css

將檔案存在 CSS 資料夾中