第3課 課程目標
學會使用div和span元素
能夠做出漂亮的排版
第3課 課程內容
用jsfiddle來練習:
這次要寫HTML跟CSS兩個區塊
請閱讀這份教材:
HTML Block and Inline Elements
或是看中文版
接著開始學習版面配置:
把教學裡面的HTML、CSS程式碼,貼到 jsfiddle 裡面做練習,貼好之後按上面的 RUN 按鈕,就會在右下角的 Result 看到結果了。
讀完、練習完這份教學裡面的程式碼,就算是學會基本的網頁排版了。
第3課 作業
在第1、2課的作業,我們將端傳媒的文章內容做了出來,但是略過了上方的導覽列、旁邊的編輯推薦、熱門頭條等等區塊。
這次作業要延續那些作業,這次不只是文章內容,請將整個頁面都做出來。
注意:本週作業內容繁重許多,請至少將上方的導覽列、旁邊的編輯推薦區塊做出來,其餘的可以省略。
完成這些,你就完成這次的課程目標了!
注意:
有同學反應,jsfiddle的介面太窄,不方便排版
如果您也覺得jsfiddle不好用,可改用 Thimble 來練習。
完成後請將您的Thimble專案發布,即可將網址分享出去。
小技巧:
您可以使用瀏覽器的開發者功能,觀察網站本身是怎麼寫的
例如:Google Chrome 請對著元素按右鍵 -> 檢查
多利用這個技巧觀察網站原始碼,對於學習本身很有幫助