第3課 課程目標

學會使用div和span元素

能夠做出漂亮的排版

第3課 課程內容

用jsfiddle來練習:

https://jsfiddle.net

這次要寫HTML跟CSS兩個區塊

請閱讀這份教材:

HTML Block and Inline Elements

或是看中文版

HTML 块

接著開始學習版面配置:

學習 CSS 版面配置

把教學裡面的HTML、CSS程式碼,貼到 jsfiddle 裡面做練習,貼好之後按上面的 RUN 按鈕,就會在右下角的 Result 看到結果了。

讀完、練習完這份教學裡面的程式碼,就算是學會基本的網頁排版了。

第3課 作業

在第1、2課的作業,我們將風傳媒的文章內容做了出來,但是略過了上方的導覽列、旁邊的熱門文章等等區塊。

這次作業要延續那些作業,這次不只是文章內容,請將整個頁面都做出來。

注意:本週作業內容繁重許多,請至少將上方的導覽列、旁邊的熱門文章推薦區塊做出來,其餘的可以省略。

完成這些,你就完成這次的課程目標了!

注意:

有同學反應,jsfiddle的介面太窄,不方便排版

如果您也覺得jsfiddle不好用,可改用 Glitch 來練習。

完成後請將您的 Glitch 專案發布,即可將網址分享出去。

小技巧:

您可以使用瀏覽器的開發者功能,觀察網站本身是怎麼寫的

例如:Google Chrome 請對著元素按右鍵 -> 檢查

多利用這個技巧觀察網站原始碼,對於學習本身很有幫助


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!

按讚的人:

共有 42 則留言

https://jsfiddle.net/43ukjrgv/ 感覺從1-2課到第3課 是一個好大的幅度 感覺弄明白了又沒有 好難切版

按讚的人:

沒問題,順利通過!


沒錯,這一課的確特別難 切版的方式五花八門,各種進階技巧很多 大致感覺有知道即可!

按讚的人:

交作業~ https://jsfiddle.net/j437437/hs9o3jvt/633/

練習用 flex 做雙欄排版 也練習寫了超陽春版響應式斷點 XD

按讚的人:

別擔心,RWD 設計,超過本課規劃程度,可以之後再研究!

寫得很好,順利完成!繼續保持!

按讚的人:

交作業~ 花了幾天的時間還是有點混亂,但是應該算完成了。不知道為什麼我的新新聞圖片會載不出來... 再麻煩檢查了! https://jsfiddle.net/dj3habn6/4/

差一點喔,至少要做一點旁邊的「熱門文章」區塊

(有點混亂很正常,未來慢慢搞懂即可)

按讚的人:

好的 我在修改一下

https://jsfiddle.net/5zL9fcr7/ 重新上傳,再麻煩站長檢查一下了~

按讚的人:

可以了,順利通過! 不需要一次通通搞懂,有機會再鑽研、練習更多即可!

按讚的人:

來繳第三次作業了,這次真的弄好久,處處碰壁 https://jsfiddle.net/johnny890118/k3os49dL/513/

按讚的人:

OK,順利通過! 不需要一次通通搞懂,有機會再鑽研、練習更多即可!

第三次的作業: https://glitch.com/edit/#!/efficacious-enormous-play

再請站長看看了~謝謝

側邊欄的部分排版部分,我會再想一下怎麼調整。 切版這部分真的很需要多練練...

按讚的人:

別擔心,順利通過本課要求了!排版方式有無限多種,找時間慢慢研究即可!

交作業,不知道是不是這樣,用了好多的div 再麻煩站長了,謝謝! https://glitch.com/edit/#!/pchun-practise-from-the-storm-media?path=pchun.html%3A30%3A10

按讚的人:

別擔心,順利通過本課要求了!排版方式有無限多種,找時間慢慢研究即可!

按讚的人:

https://jsfiddle.net/973224/ht5Ly1jm/110/

最近比較忙碌有一段時間沒碰了 但還是勉強擠出...... 麻煩過目!!

按讚的人:

寫得很好,順利通過!

作業: https://jsfiddle.net/jared0921/jpxaq92y/241/ 使用了flex來設計版面,麻煩大大檢查了!感謝!

按讚的人:

寫得很好,順利通過!

https://jsfiddle.net/tsaii/ocpaLrf8/193/ 自己做了之後真的覺得好難@@

按讚的人:

很正常,慢慢來即可!

寫得很好,順利完成!

第2章跳到第3章難度差好多.... 卡了一整天晚上整理好思緒才寫出來 https://jsfiddle.net/tony05060165/z03pt61n/245/

按讚的人:

這課的確特別難! 寫得很好,順利完成! 繼續保持!

弄得好醜 https://jsfiddle.net/wimp9487/0e5zqcux/151/

按讚的人:

不會醜,別擔心!順利完成!

來繳第三次作業,旁邊熱門文章弄了好久 https://jsfiddle.net/000dd/2ufcb8g6/218/

按讚的人:

卡關很正常,要習慣一下,慢慢解決就好! 寫得很好,順利完成!

https://jsfiddle.net/liang10000/tj5c3y2x/323/ 切版算順利成功,但是在列表那邊卡好久 站長在檢查一下!感謝

按讚的人:

寫得很好,順利完成!

https://jsfiddle.net/Pansen/nayxmteo/53/

繳交作業!! 終於完成了這次的目標了,麻煩川大檢查謝謝

按讚的人:

第三次作業,麻煩站長查看了,謝謝! https://jsfiddle.net/ktf9n045/

按讚的人:

寫得很好,順利完成!

交作業~~~ https://jsfiddle.net/Chen_yi/jefnb1tk/1208/

按讚的人:

code https://glitch.com/edit/#!/homework-frontenddeveloper live site https://homework-frontenddeveloper.glitch.me/folder/homework.html 交作業啦~~ 真的會被排版搞死,卡在版面超級久。

按讚的人:

寫得非常好!完整度很高!順利完成!

按讚的人:

最近發現這個,想來交作業😚 https://imgeorgechou.github.io/newspractice/

按讚的人:

記錄一下,謝謝老師的教材! https://jsfiddle.net/IreneQiu/4gqjprkf/136/

按讚的人:

2024.02.06 繳作業! https://jsfiddle.net/s6wpno2L/
小視窗看起來會跑版,但全視窗就沒事🫠要處理RWD真的滿累的,這裡先偷懶(#
這次作業的心得是:覺得先寫好HTML再來寫CSS會比較好處理,但如果在HTML架構之前,還有設計稿的話,那就更好了。 因為這次作業是前幾節的作業延續發展,在第一堂的時候想要用單純的標籤不加入樣式,儘可能排出(順序和文字對齊)和原文網站相似的樣子,結果寫CSS就有點頭疼了😅但實務操作應該也是會有客戶臨時要增加資料的狀況吧?希望自己能儘早適應隨時切換編寫的狀況

按讚的人:

打卡! sidebar 遇到一些問題 滑鼠點不到 再研究一下 學到超多東西 https://jsfiddle.net/st4haprj/485/

按讚的人:

繳交作業~不曉得有沒有確實練習到本篇的重點 https://jsfiddle.net/unm947vz/1/

按讚的人:

總覺得寫法好像不夠成熟 先繳交這一個章節之後再看看能不能寫得更理想 謝謝! https://jsfiddle.net/etai200/dgu70c4L/160/

按讚的人: