大家好，有沒有想學寫網站的朋友呢？ 隨著智慧型手機的普及，現在的網站畫面必須同時滿足電腦、手機螢幕，甚至是平板電腦的需求。 要如何做出能在各種寬度的螢幕都 OK 的網頁呢？ 聰明的設計師們發明了一種稱為「Responsive Web Design」的畫面設計方法。 實作起來非常簡單，利用一些簡單的畫面分割原理，就能滿足各螢幕的需求。 我整理了一份有趣的 RWD 自學教材，每堂課附有一個小作業。 會帶領大家在作業中，以美國時代雜誌的網站為範例，一步一步利用 Bootstrap 做出一個 RWD 網頁。 剛入門網頁設計的朋友，非常適合接著把 RWD 原理學起來！ 開始之前，您需要先具備基本的 HTML、CSS、Bootstrap 知識。 還不會的朋友，請先完成： - [自學網頁の嬰兒教材：HTML與CSS](https://codelove.tw/@howtomakeaturn/course/Ja6JaO) - [自學網頁の嬰兒教材：Bootstrap](https://codelove.tw/@howtomakeaturn/course/YqZQav) 準備好的話，讓我們馬上開始吧！
# 第1課 課程目標 認識 RWD (Responsive Web Design) 的意思。能利用瀏覽器觀察 RWD 網站的變化。 # 第1課 課程內容 RWD 全名 Responsive Web Design，是現在智慧型手機普及的年代，最廣泛被採用的設計方法之一。 乍聽之下很酷炫，其實實作起來非常簡單，主要是在不同的螢幕大小上，顯示不同的排版。 電腦的螢幕上以多欄式排版為主，縮小到平板、手機螢幕時，則將各區塊堆疊起來，方便使用者從上到下瀏覽。 請參考這個連結，認識基本的 RWD 原理： https://www.w3schools.com/html/html_responsive.asp 大致看懂內容即可，不需要全部讀懂沒關係。 如果你在電腦上寫了一個網頁，要如何知道從平板、手機上瀏覽，網頁看起來是什麼樣子呢？ 有兩種方法。 第一種，用滑鼠拖拉瀏覽器，把視窗慢慢縮小，你應該會看到網頁畫面有慢慢變化。 第二種，使用瀏覽器的開發者功能，直接幫你把螢幕調整成平板與手機的大小。 請參考以下連結： https://developers.google.com/web/tools/chrome-devtools/device-mode/?hl=zh-tw https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports?hl=zh-tw 不須讀完全部內容，知道怎麼模擬手機與平板螢幕的大小來瀏覽網頁即可。 # 第1課 作業 請打開美國時代雜誌的網站首頁： http://time.com 並且回答以下三個問題： 1. 在手機、平板、電腦三種裝置上看，你認為網站排版的主要差異是什麼？ 2. 在手機、平板、電腦三種裝置上看，有些元素只會在特定裝置上顯示，你看得出是什麼嗎？ 3. 在手機、平板、電腦三種裝置上看，有些元素在不同裝置上的顯示順序是不同的，你看得出是什麼嗎？ 能夠回答以上三個問題，你就完成這次的課程目標了！
# 第2課 課程目標 能夠使用 Bootstrap 網格系統來打造適應各種螢幕大小的排版。 # 第2課 課程內容 這一課要學習使用 Bootstrap 的網格系統。 請參考這幾份教學： - https://www.w3schools.com/css/css_rwd_intro.asp - https://www.w3schools.com/css/css_rwd_viewport.asp - https://www.w3schools.com/bootstrap5/bootstrap_grid_system.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_stacked_to_horizontal.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_xsmall.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_small.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_medium.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_large.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_xlarge.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_examples.php 以及官方文件： https://getbootstrap.com/docs/5.3/layout/grid/ 內容不用全讀，只要讀到你覺得能夠做出作業即可。 # 第2課 作業 請打開美國時代雜誌網站首頁 http://time.com 接著打開 Glitch，用 Glitch 來寫這次的作業。 https://glitch.com/ 你應該會在時代雜誌首頁看到這樣的畫面  這次作業要做藍色線條圈起來的部份。 請利用 Bootstrap 的網格系統，把藍色這部份做出來。 有以下2個條件需要滿足，才算是做完作業： - 在電腦上是 1-2-1 比例的多欄式佈局 - 在手機上是上下堆疊的佈局 除此之外，只要有放入文字就可以了，圖片可以省略。 做完之後，你應該會發現，你做的網頁在手機或電腦螢幕上看都 OK，畫面不會破掉、跑版。 完成這些，你就完成這次的課程目標了！
# 第3課 課程目標 能夠將元素只顯示在特定裝置上面。例如有些東西只在電腦顯示，有些東西只在手機顯示。 # 第3課 課程內容 請參考： https://getbootstrap.com/docs/5.3/utilities/display/ # 第3課 作業 承接前一課的作業。  圖中右邊的 The Brief 區塊，只會顯示在電腦與手機上，在平板上是不會顯示的。 請實作出這個效果。 除了上一課作業的要求之外，這一課作業再加上兩個要求： - 在平板上是 1-2 比例的多欄式佈局 - The Brief 區塊在平板上隱藏 完成這些，你就完成這次的課程目標了！
# 第4課 課程目標 能夠讓元素在不同裝置上面，以不同的順序顯示。 # 第4課 課程內容 請參考：https://getbootstrap.com/docs/5.3/layout/columns/#order-classes # 第4課 作業 承接前一課的作業。  仔細看你會發現，在電腦螢幕上，中間是頭條新聞，左側是其他新聞。 按照 html 的順序邏輯（由上至下，由左至右），其他新聞的區塊順序是第一，頭條新聞的區塊順序是第二。 隨著螢幕縮小，在手機螢幕上，頭條新聞是出現在最上面的。 所以在手機螢幕上，頭條新聞的區塊順序是第一，其他新聞的區塊順序是第二。 請實作出這個效果。 除了上一課作業的要求之外，這一課作業再加上兩個要求： - 在平板、電腦上，其他新聞的區塊順序是第一，頭條新聞的區塊順序是第二 - 在手機上，頭條新聞的區塊順序是第一，其他新聞的區塊順序是第二 完成這些，你就完成這次的課程目標了！
# 第5課 課程目標 讓圖片在各種裝置上都能順利顯示。 # 第5課 課程內容 請參考：https://www.w3schools.com/howto/howto_css_image_responsive.asp # 第5課 作業 承接前一課的作業。  之前的作業我們只有放入文字，省略了圖片。 這一次請將圖片給加進去。並且圖片需要在各種裝置都能順利顯示。 不能過大、破版，讓圖片漂亮的顯示在網頁上。 完成這些，你就完成這次的課程目標了！
# 第6課 課程目標 運用目前所學到的技巧，完成一個完整的 RWD 網頁。 # 第6課 課程內容 這門課到目前為止所教的技巧，只有運用 Bootstrap 快速、方便的做出網頁排版。 我們並沒有深入去研究背後 css 原理以及太多進階 css 技巧。 很棒的是，光是這些基本 Bootstrap 應用以及 css，就足以應付實務上的許多需求了！ 這次要試著用你在這門課學到的技巧，試著做出一個完整的 RWD 網頁。 # 第6課 作業 請打開美國時代雜誌的網站首頁： http://time.com  在之前的作業，我們只做了藍色圈起來的部份。 這一課的作業，我們要把整個時代雜誌首頁做出來！ 你的作業需要滿足下列三個要求： - 在電腦上能順利瀏覽 - 在平板上能順利瀏覽 - 在手機上能順利瀏覽 時代雜誌的首頁有幾個進階的元素，例如影片、投影片元素。這些進階的元素可以省略不做。 除此之外，單純文字與圖片的部份，請儘可能的重現出來。 完成這些，你就完成這次的課程目標了！
最後，謝謝你耐心的完成這整套課程！ 進階的 RWD 技巧，以及 RWD 背後深入的 css 原理，會在別門課程提到。 但是目前所學的基本技巧，應該已經很足夠使用！
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
