## 課程目標 學會動態修改 html 元素中的內容 ## 課程內容 在上一課,我們學會了這樣用 JavaScript 取得用戶輸入到 html 元素的內容 ``` var str = document.getElementById('keyword').value; ``` 那麼針對 `h1`, `h2`, `p` 這些用來顯示文字的元素,要如何用 JavaScript 修改其中的文字呢? 其實做法非常類似,這樣就可以了 ``` <p id="welcome">歡迎光臨</p> ``` ``` document.getElementById('welcome').textContent = '謝謝光臨'; ``` 一樣先去找出網頁中 id 為 `welcome` 的元素,接著去修改 `textContent` 這個屬性的內容 跟上一課把資料記錄在變數中類似,這邊把資料記錄在此「元素」的「屬性」之中,等於是在修改屬性內容 如前一課所說,各種 html 元素,在 JavaScript 中是一種物件 而在畫面上顯示的文字,在 JavaScript 中會將這些文字存放在物件的 `textContent` 這屬性之中 `h1`, `h2`, `p` 等等元素都可以這樣修改內容,連 `div`, `span` 這些元素也可以這樣修改內容 除了直接賦值為字串之外,使用「變數」來賦值也沒問題 ``` var str = '萬事順利'; document.getElementById('welcome').textContent = str; ``` 請在 jsfiddle 試試看上面的範例,把元素寫在 html 區塊,把修改屬性寫在 JavaScript 區塊,實驗一下、玩玩看! ## 課後作業 接續前一課的作業,你的「線上下單」頁面,目前只有簡單的招呼訊息 你希望在畫面上顯示簡單的訂單資訊,讓顧客聯絡你之前,能看著螢幕再確認一次,減少顧客下單之後又反悔的機率 這課的作業要做這個訂單資訊,先只做「顧客姓名」就好 --- 請在訂購按鈕的下方,寫一個區塊顯示訂單資訊 看起來類似這樣: ``` [我要訂購] ---------- |您的訂單 | |顧客姓名:XXX| ---------- ``` XXX的地方預設是空白,在點擊訂購按鈕之後,跳出招呼訊息之後,就把XXX改為顧客輸入的名稱 請替這個訂單資訊區塊加一些 css 屬性,弄得漂亮一點 做出以上功能,你就完成這次的課程目標了!
## 課程目標 學會基本的變數賦值 學會基本的字串連接 能從 html 元素中,得到用戶輸入的內容 ## 課程內容 在上一課的內容中,我們這樣來顯示訊息視窗 ``` alert('你點擊了按鈕!'); ``` 像這樣單引號包起來的內容 `'你點擊了按鈕!'` 我們叫「字串」,是一種資料類型 除了直接把字串當參數傳給函數之外,還可以先把字串紀錄在「變數」之中,方便重複使用 ``` var message = '你點擊了按鈕!'; alert(message); ``` 就跟函數名稱一樣,變數名稱是隨便命名的,取一個自己看得懂的名稱就行了 記錄到變數之後,就可以到處重複使用,不用每次手寫整段資料內容 不論是字串或者變數,都可以連接起來使用 ``` var text1 = '恭喜'; var text2 = '發財'; alert(text1 + text2); alert('萬事' + '如意'); ``` 除了「字串」這種資料類型之外,還有「數字」等等其他類型,之後課程會提到 --- 不論是購物網站、社群網站、各種網站,一定會經常需要用戶輸入的內容 有一個簡單的方法可以取得用戶輸入內容 ``` <input id="keyword" type="text" /> <button onclick="myFunction()">Click me</button> ``` ``` function myFunction() { var str = document.getElementById('keyword').value; alert(str); } ``` 函數中的 `document` 是一個 JavaScript 在瀏覽器中內建的「物件」,這個物件代表網頁當下的狀態,有很多資料、函數可以呼叫使用 後面的 `.` 代表去呼叫這個「物件」的「函數」,或者去存取這個「物件」的「屬性」 這邊的 `document.getElementById('keyword')` 代表以 `'keyword'` 為參數去呼叫 `getElementById`函數 這函數會去找出網頁中 id 為 `keyword` 的元素,元素在 JavaScript 中也是一種物件 後面的 `.value` 就是去存取元素的 value 屬性。各種輸入相關的元素,都會把用戶的輸入內容存在 `value` 這屬性之中 使用以上的幾段程式碼,可以輕鬆地取得用戶輸入的內容 請在 jsfiddle 試試看上面的範例,把輸入欄位與按鈕寫在 html 區塊,把函數定義寫在 JavaScript 區塊,實驗一下、玩玩看! ## 課後作業 接續第一課的作業,你的「線上下單」頁面,目前有個訂購按鈕 你對按下按鈕的導購訊息,不太滿意,你希望能顯示客戶的名字,看起來更專業 這課的作業要來改善這個「線上下單」頁面的功能 --- 請使用 jsfiddle,多加一個文字輸入欄位,讓客戶能輸入名字 在客戶點擊訂購按鈕之後,跳出的訊息會顯示: 「XXX您好!謝謝您對我們的衣服有興趣!請致電 0987-654-321,會有專人提供您報價!」 請稍微替這個輸入客戶名字的欄位加一些 css 屬性,弄得漂亮一點才專業 做出以上功能,你就完成這次的課程目標了!
## 課程目標 學會定義函數的基本方法 學會呼叫函數的基本方法 學會 onclick 事件的用法 ## 課程內容 請打開這個網站,用這個網站來練習&寫作業: https://jsfiddle.net 在學 html/css 時,我們會給元素一些屬性,例如 id 與 class 屬性,連結的 href 屬性,圖片的 src 屬性 同樣的語法,還可以用來做一些互動式效果、功能 例如,可以這樣在按鈕上做出「點擊後」觸發的效果 ``` <button onclick="myFunction()">Click me</button> ``` onclick 我們叫「事件屬性」。也是屬性的一種,語法跟一般屬性相同 屬性內容是去執行 `myFunction`,後面的小括號 `()` 代表執行的意思 這邊的 `myFunction` 是所謂的「函數」。名稱是隨便命名的。根據互動的內容,取一個自己看得懂的名稱就行了 小括號裡面可以傳參數,這邊我們沒用到參數,所以直接小括號包起來 `()` 就可以 如何定義 `myFunction` 函數的內容呢?這樣即可 ``` function myFunction() { alert('你點擊了按鈕!'); alert('這是很好的開始!'); } ``` 這個函數中,使用了 JavaScript 在瀏覽器中內建的 `alert` 函數。這函數會根據參數,跳出小視窗,把參數顯示在畫面上 在 JavaScript 中,一段動作的結尾都會加上分號 `;` 用來代表這段結束 分號其實可以省略不寫,程式一樣會正常執行,但加上分號,看起來更清楚一點點 有點像寫文章時結尾的「句點」,有人習慣寫,有人經常不寫,但加了比較清楚 請在 jsfiddle 試試看上面的範例,把按鈕寫在 html 區塊,把函數定義寫在 JavaScript 區塊,實驗一下、玩玩看! ## 課後作業 假設你家裡是開成衣批發工廠的,你用 html/css 寫了一個工廠的介紹網頁 在「線上下單」頁面,你希望引導客戶聯絡你,你親口介紹、聊過才報價、提高成交率 你不想把商品報價、聯絡方式直接顯示在畫面上,你希望是點擊按鈕之後,才顯示聯絡資訊 這次作業,需要你實作這個功能。 --- 請使用 jsfiddle,做一個「我要訂購」按鈕 點擊這個按鈕,會跳出 alert 訊息顯示「謝謝您對我們的衣服有興趣!請致電 0987-654-321,會有專人提供您報價!」 接著做一個「認識工廠」按鈕 點擊這個按鈕,會跳出 alert 訊息顯示「我們工廠位於新北市,通過國際 ISO9001 認證,品質讓您放心!」 請稍微替這兩個按鈕加一點 css 屬性,弄得漂亮一點,漂亮的按鈕,會讓客戶更想點 做出這兩個按鈕,你就完成這次的課程目標了!
# 第6課 課程目標 運用目前所學到的技巧,完成一個完整的 RWD 網頁。 # 第6課 課程內容 這門課到目前為止所教的技巧,只有運用 Bootstrap 快速、方便的做出網頁排版。 我們並沒有深入去研究背後 css 原理以及太多進階 css 技巧。 很棒的是,光是這些基本 Bootstrap 應用以及 css,就足以應付實務上的許多需求了! 這次要試著用你在這門課學到的技巧,試著做出一個完整的 RWD 網頁。 # 第6課 作業 請打開美國時代雜誌的網站首頁: http://time.com ![](https://i.imgur.com/cPqz09D.jpg) 在之前的作業,我們只做了藍色圈起來的部份。 這一課的作業,我們要把整個時代雜誌首頁做出來! 你的作業需要滿足下列三個要求: - 在電腦上能順利瀏覽 - 在平板上能順利瀏覽 - 在手機上能順利瀏覽 時代雜誌的首頁有幾個進階的元素,例如影片、投影片元素。這些進階的元素可以省略不做。 除此之外,單純文字與圖片的部份,請儘可能的重現出來。 完成這些,你就完成這次的課程目標了!
# 第5課 課程目標 讓圖片在各種裝置上都能順利顯示。 # 第5課 課程內容 請參考:https://www.w3schools.com/howto/howto_css_image_responsive.asp # 第5課 作業 承接前一課的作業。 ![](https://i.imgur.com/cPqz09D.jpg) 之前的作業我們只有放入文字,省略了圖片。 這一次請將圖片給加進去。並且圖片需要在各種裝置都能順利顯示。 不能過大、破版,讓圖片漂亮的顯示在網頁上。 完成這些,你就完成這次的課程目標了!
# 第4課 課程目標 能夠讓元素在不同裝置上面,以不同的順序顯示。 # 第4課 課程內容 請參考:https://getbootstrap.com/docs/5.3/layout/columns/#order-classes # 第4課 作業 承接前一課的作業。 ![](https://i.imgur.com/cPqz09D.jpg) 仔細看你會發現,在電腦螢幕上,中間是頭條新聞,左側是其他新聞。 按照 html 的順序邏輯(由上至下,由左至右),其他新聞的區塊順序是第一,頭條新聞的區塊順序是第二。 隨著螢幕縮小,在手機螢幕上,頭條新聞是出現在最上面的。 所以在手機螢幕上,頭條新聞的區塊順序是第一,其他新聞的區塊順序是第二。 請實作出這個效果。 除了上一課作業的要求之外,這一課作業再加上兩個要求: - 在平板、電腦上,其他新聞的區塊順序是第一,頭條新聞的區塊順序是第二 - 在手機上,頭條新聞的區塊順序是第一,其他新聞的區塊順序是第二 完成這些,你就完成這次的課程目標了!
# 第3課 課程目標 能夠將元素只顯示在特定裝置上面。例如有些東西只在電腦顯示,有些東西只在手機顯示。 # 第3課 課程內容 請參考: https://getbootstrap.com/docs/5.3/utilities/display/ # 第3課 作業 承接前一課的作業。 ![](https://i.imgur.com/cPqz09D.jpg) 圖中右邊的 The Brief 區塊,只會顯示在電腦與手機上,在平板上是不會顯示的。 請實作出這個效果。 除了上一課作業的要求之外,這一課作業再加上兩個要求: - 在平板上是 1-2 比例的多欄式佈局 - The Brief 區塊在平板上隱藏 完成這些,你就完成這次的課程目標了!
# 第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/ 你應該會在時代雜誌首頁看到這樣的畫面 ![](https://i.imgur.com/cPqz09D.jpg) 這次作業要做藍色線條圈起來的部份。 請利用 Bootstrap 的網格系統,把藍色這部份做出來。 有以下2個條件需要滿足,才算是做完作業: - 在電腦上是 1-2-1 比例的多欄式佈局 - 在手機上是上下堆疊的佈局 除此之外,只要有放入文字就可以了,圖片可以省略。 做完之後,你應該會發現,你做的網頁在手機或電腦螢幕上看都 OK,畫面不會破掉、跑版。 完成這些,你就完成這次的課程目標了!
# 第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. 在手機、平板、電腦三種裝置上看,有些元素在不同裝置上的顯示順序是不同的,你看得出是什麼嗎? 能夠回答以上三個問題,你就完成這次的課程目標了!
大家好,有沒有想學寫網站的朋友呢? 隨著智慧型手機的普及,現在的網站畫面必須同時滿足電腦、手機螢幕,甚至是平板電腦的需求。 要如何做出能在各種寬度的螢幕都 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) 準備好的話,讓我們馬上開始吧!
# 第7課 課程目標 學會使用 bootstrap 視窗元件。學會在毫無指引的情況下,自己想辦法解決問題。 # 第7課 課程內容 終於來到最後一課囉。相信你有發現,目前為止其實只用到了 bootstrap 全部功能的一小部份。 其實 bootstrap 還有很多元件與功能,這一課要請大家試著自己去探索、自行學習。 請大家試著使用視窗元件。 比較特別的是,這一課沒有任何指引,請試著使用 google 自己找資源學習。 關鍵字:bootstrap modal # 第7課 作業 請打開你的 facebook,在你要撰寫貼文的時候,你會看到一個視窗跳出來。 這一課作業要實作這個視窗。 請實作一個「撰寫貼文」按鈕,點擊之後顯示這個撰寫貼文視窗。 注意:Facebook 這個撰寫貼文視窗的內容有很多功能,請至少實作出: - 能夠打字的區塊 - 選擇誰可以看到這則貼文的選單 - 發佈按鈕 完成之後,您已經能夠獨自使用 bootstrap 做出有基本質感的網頁設計。
# 第6課 課程目標 學會如何套用 bootstrap 的表格、表單與與按鈕樣式。 # 第6課 課程內容 表格、表單與按鈕是網頁最基本的元素之一,就算不使用 bootstrap,html 原生就有這些元素的樣式。 不過,套用 bootstrap 樣式之後,會馬上讓這些元素好看起來,這一課要學習如何套用它們。 請閱讀入門教學: https://www.w3schools.com/bootstrap5/bootstrap_tables.php https://www.w3schools.com/bootstrap5/bootstrap_forms.php https://www.w3schools.com/bootstrap5/bootstrap_buttons.php 並參考官方說明文件: https://getbootstrap.com/docs/5.3/content/tables/ https://getbootstrap.com/docs/5.3/forms/overview/ https://getbootstrap.com/docs/5.3/components/buttons/ # 第6課 作業 這一課的作業有兩個,我們先不使用 bootstrap,把畫面做出來,接著再套用 bootstrap,讓畫面變漂亮。 作業一:請將「自學網頁の嬰兒教材:HTML與CSS」的第四課作業完成,並接著將 bootstrap table 套用進去 https://codelove.tw/@howtomakeaturn/post/l3j253 作業二:請將「自學網頁の嬰兒教材:HTML與CSS」的第五課作業完成,並接著將 bootstrap form、input 與 button 套用進去 https://codelove.tw/@howtomakeaturn/post/vx8Lgx 完成這些,你就完成這次的課程目標了!
# 第5課 課程目標 學會使用 Bootstrap 的訊息框框元件。 # 第5課 課程內容 訊息框框在所有網站都會有,在需要顯示歡迎訊息、提醒訊息、公告事項等等的時候,都可以使用。 這一課要學習使用它。 請閱讀入門教學: https://www.w3schools.com/bootstrap5/bootstrap_alerts.php 以及官方說明文件: https://getbootstrap.com/docs/5.3/components/alerts/ # 第5課 作業 這一課的作業要延續第3課的作業一。 在第3課的作業一中,我們做出了 Yahoo 新聞頁的排版。 假設你是發佈新聞的平台,你希望顯示訊息歡迎使用者,並且顯示訊息提醒讀者內容是由合作的媒體發佈,新聞平台不對內容負責任。 請在這個新聞頁面加上兩個 alert 元件。 第一個 alert 元件使用 alert-info 樣式,內含歡迎訊息,並且這個 alert 要可以點擊 × 關閉。 第二個 alert 元件使用 alert-warning 樣式,內含免除責任聲明,這個 alert 無法點擊 × 關閉,會一直顯示在那裡。 注意:這一課作業是以練習為主,實際上 Yahoo 新聞頁面並沒有這些東西。 完成這些,你就完成這次的課程目標了!
# 第4課 課程目標 學會使用 Bootstrap 的卡片元件。 # 第4課 課程內容 卡片式設計近幾年非常流行,在各大網站中都看得到它。 它的功能非常通用,可以在各種場景中使用,這一課要學習使用它。 請閱讀入門教學: https://www.w3schools.com/bootstrap5/bootstrap_cards.php 以及官方說明文件: https://getbootstrap.com/docs/5.3/components/card/ 內容不用全部讀完,也不用全部讀懂,能做出基本的卡片設計即可。 # 第4課 作業 這一課的作業要延續第3課的作業二。 在上一次的作業中,我們做出了整個 Yahoo 新聞首頁的排版,不過各區塊的內容都簡化了。 我們這一次要把內容補上,讓畫面變豐富。 請利用本課學到的卡片元件,在畫面中所有看起來像卡片的地方,全部套用卡片元件,讓卡片元件內有圖片、文字。 做完之後,整個畫面看起來會更接近真正的 Yahoo 新聞首頁。 注意:實際上 Yahoo 新聞首頁的卡片元件不多,幾乎都不是卡片元件(比如說根本沒有邊框)。 這一課作業是以練習為主,把看起來能套用卡片的地方套用就好,套不進去的地方維持原本的陽春即可。或是到處都套用卡片元件也沒關係,看起來類似原本的 Yahoo 新聞首頁即可。 完成這些,你就完成這次的課程目標了!
# 第3課 課程目標 能夠用 Bootstrap 的網格系統做出多欄式排版、各種排版。 # 第3課 課程內容 業界工程師會去使用 Bootstrap,除了美感之外,通常還有一大理由就是想用它的網格系統。 以網頁設計常見的多欄式設計來說,手寫 html 跟 css 實在有點麻煩: [CSS DIV 兩欄式網頁排版](http://www.wibibi.com/info.php?tid=406) [CSS DIV 三欄式網頁排版設計](http://www.wibibi.com/info.php?tid=407) 所以來學習簡單好用的網格系統吧! 請閱讀以下教學的內容: https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php https://www.w3schools.com/bootstrap5/bootstrap_grid_system.php https://www.w3schools.com/bootstrap5/bootstrap_grid_examples.php https://getbootstrap.com/docs/5.3/layout/grid/ 內容不用全部讀完,也不用全部讀懂,把其中的程式碼貼一貼,把玩一下,能做出基本的多欄式網頁佈局即可。 # 第3課 作業 繼續承接之前的作業。我們在前幾課做出了 Yahoo 的新聞頁以及導覽列,這一課的作業有兩個。 ## 作業一 請繼續修改之前的作業,除了新聞內容與導覽列之外,請接著利用 Bootstrap 網格系統將整個頁面都做出來。 請至少將側邊推薦其他新聞的區塊做出來,其餘的可以省略。 ## 作業二 請再開一份 Glitch 專案,我們要做 Yahoo 新聞的首頁: https://tw.news.yahoo.com 我們要用 Yahoo 新聞首頁來練習多欄式排版。 請利用 Bootstrap 網格系統,將整個首頁的排版都切出來。 各個區塊的內容盡量省略、簡化,利用純文字或是 `<ul>、<li>` 清單元素,只放標題跟一些文字即可。 完成以上兩份作業,你就完成這次的課程目標了!
# 第2課 課程目標 學會使用 Bootstrap 的 Navbar 元件。 # 第2課 課程內容 本課內容非常非常簡單,只要能在網頁上做出導覽列就可以了。 請參考: https://www.w3schools.com/bootstrap5/bootstrap_navbar.php https://getbootstrap.com/docs/5.3/components/navbar/ 內容不用全部讀完,也不用全部讀懂,把其中的程式碼貼一貼,把玩一下,能做出一個最簡單的導覽列即可。 # 第2課 作業 上一課的作業,我們模仿 Yahoo 新聞的內容,做了一個簡單的新聞文章頁面。 請繼續修改這份作業,將 Yahoo 新聞上方的導覽列做出來。 你將會發現,使用 Bootstrap 能夠快速做出導覽列,比自己用手寫 html、css 方便且快速多了! 完成這些,你就完成這次的課程目標了!
# 第1課 課程目標 學會安裝 Bootstrap。 # 第1課 課程內容 第一課只要學會如何安裝 Bootstrap 就可以了。 Bootstrap 安裝好之後,瀏覽器預設的 h1, h2, h3, p 等等基本元素的樣式就會被覆蓋。 會變成 Bootstrap 的預設樣式,會更漂亮。 在網頁中引入 Bootstrap 的 css 與 js 檔的方式有很多,其中最簡單的是直接引入 BootstrapCDN 的線上檔案,連下載檔案都不用。 請閱讀一些 Bootstrap 基本觀念: https://www.w3schools.com/bootstrap5/bootstrap_get_started.php https://www.w3schools.com/bootstrap5/bootstrap_typography.php 然後參考官網的 BootstrapCDN 段落: https://getbootstrap.com/docs/5.3/getting-started/download/ --- 對於引入外部檔案的觀念不熟悉的話,請參考這份的「External Style Sheet」段落: https://www.w3schools.com/css/css_howto.asp 以及這份的「JavaScript in External File」段落: https://www.tutorialspoint.com/javascript/javascript_placement.htm # 第1課 作業 請打開:[Yahoo奇摩新聞](https://tw.news.yahoo.com) 找一篇你喜歡的新聞,把新聞內容打出來。 接著打開 [Glitch](https://glitch.com/),用 Glitch 來寫這次的作業。 只要打出文章標題與內容就好,上方的導覽列、旁邊的新聞頭條那些區塊都不用。 做完之後,你會發現,雖然只用了 h1、p、br 等等基本元素,但是套用 Bootstrap 之後,整個畫面自動變漂亮了! 完成這些,你就完成這次的課程目標了!
大家好,有沒有想學寫網站的朋友呢? 坊間大部份的網頁入門課程,在教完基本的 html 與 css 之後,接著就會教 [Bootstrap](http://getbootstrap.com) 這個工具包。 究竟 Bootstrap 是什麼呢? 其實它只是一個寫網頁的懶人工具包,幫助你美化頁面的設計感,並且提供你網頁設計常用的一些元件。 聽再多介紹,不如親自動手實作! 我整理了一份有趣的 Bootstrap 自學教材,每堂課附有一個小作業。 會帶領大家在作業中,以新聞媒體的網站為範例,一步一步利用 Bootstrap 把網頁打造出來。 剛開始入門網頁設計的朋友,很適合接著來學習 Bootstrap 喔! 您只要具備基本的HTML與CSS基本知識就可以了 (還不會的朋友,請先完成自學網頁の嬰兒教材:HTML與CSS) https://codelove.tw/@howtomakeaturn/course/Ja6JaO 歡迎您試試看這份教材!
# 第7課 課程目標 正式完成一個屬於自己的個人網頁 讓這個網頁真正上線 # 第7課 課程內容 在第6課中,你學會了網站架設需要擺放的檔案。 這次要試著利用網路上的主機資源,將網站正式上線。 請學習使用 Glitch ,並將網站架在上面: https://glitch.com/ # 第7課 作業 不論你是學生、上班族、公司經營者,有一個自己的個人網頁、線上履歷表,都是非常令人印象深刻的! 這次的作業要請你做出這個屬於自己的個人網頁! 請全力將這個網頁做好,下次求職、面試、與人談合作…等等需要介紹自己的場合,就可以將這個頁面寄給對方看了! 請上網搜尋各種個人網頁的範例,做出自己喜歡的個人網頁、個人線上履歷 參考網站:https://onepagelove.com/gallery/resume 完成之後,您已經能夠獨自從無到有做出一個完整的靜態網站。
# 第6課 課程目標 正式在自己電腦上寫網頁 不再需要依靠jsfiddle來寫網頁 # 第6課 課程內容 前五課都是用jsfiddle來學習,先跳過了環境設定的問題。 這次的課程要練習正式在自己電腦上寫網頁。 其實,用記事本就可以寫網頁。只要把副檔名存成 .html 就可以了。 請閱讀這份教材: [HTML Editors](http://www.w3schools.com/html/html_editors.asp) 不習慣看英文,可以改看這裡: [HTML 编辑器](http://www.w3school.com.cn/html/html_editors.asp) 接著要回頭學一些基本知識,這些知識在前幾課我們先跳過了: [HTML Introduction](http://www.w3schools.com/html/html_intro.asp) [HTML Head](http://www.w3schools.com/html/html_head.asp) 不習慣看英文,可以改看這裡: [HTML 简介](http://www.w3school.com.cn/html/html_jianjie.asp) [HTML 头部元素](http://www.w3school.com.cn/html/html_head.asp) 全部唸完之後,請試著用計事本在自己電腦上做出一個網頁檔,然後用瀏覽器去打開它 # 第6課 作業 這次的作業要做所謂的 landing page landing page 是網站的門面,給客戶的第一印象 請參考下列網址,了解更多 landing page 的概念 [實例網站解說什麼是 Landing Page ?](https://cola.workxplay.net/what-is-an-landing-page/) 本次的作業內容如下: 假設你打算在近期內創業,請替你的公司建立一個漂亮、有效的 landing page 如果想不到的話,就請替你目前任職的公司,建立landing page 作業條件如下: 請尋找並下載一張大圖片,當作網頁的背景圖片 參考圖庫:https://unsplash.com/ 請建立一個獨立的 css 檔,不要在 html 檔內寫任何一行 css 試著用計事本在自己電腦上做出這個 landing page,然後用瀏覽器去打開它 完成這些,你就完成這次的課程目標了!
你的轉職路上,還缺少一份自學作業包!寫完這幾包,直接拿作品去面試上班!
本論壇另有附設一個 LINE 新手發問&交流群組!歡迎加入討論!