尤川豪   ·  5年前
445 貼文  ·  275 留言

自學網頁の嬰兒教材:第3課 ── 網頁排版

⚠️⚠️⚠️ 公告 ⚠️⚠️⚠️

📢📢📢 本課程已有更新版本:請前往新版網站瀏覽、討論、交作業 📢📢📢

👉 點我前往新課程網站


第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不好用,可改用 Thimble 來練習。

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

小技巧:

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

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

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

  分享   共 6,904 次點閱
共有 16 則留言
   ·  5年前
0 貼文  ·  7 留言

這一部分的東西有點雜,花了一點時間理解和做作業,但覺得樣子好像還是有點落差? (個人覺得很醜Q_Q)但想先貼上來確定是不是有符合作業標準。 作業:https://jsfiddle.net/KitHuang/fb5emjvy/87/

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

哈囉 我看到你的作業囉

其實有過關囉!頁面大格局的切板,基本原理就是這樣 你都做到了

醜的話沒關係,內容跟細節可以再慢慢補 但是大原理你都懂囉

目標順利完成,期待看到你之後的其他作業!加油摟~

 
按了喜歡:
   ·  5年前
0 貼文  ·  1 留言

老師您好~~~ CSS 版面配置的教學 大概第十頁之後就看不太懂了 緩慢研究中Q.Q https://jsfiddle.net/14hpcfaj/6/
目前做了大概長這樣 請您過目 OAO

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

嗨嗨~我看到你的作業囉~寫得很不錯喔,沒問題的~

上方欄位、側邊欄位都有出來,網頁排版的基本原理你已大致掌握!

部份教材看不太懂沒關係唷~改天有興趣再去翻閱就可以了

學習目標順利達成唷!繼續加油摟

期待看到你下一次的作業~

按了喜歡:
feifeitzu   ·  5年前
0 貼文  ·  21 留言

這部分花了一些時間在琢磨,但還是不太明白 flex 跟 inline-block 在使用時機上的差別。另外 @media 的部份也還沒做出來QQ,目前做了這樣:https://thimbleprojects.org/feifeitzu/636971/ 繼續努力研究中(;3」ㄥ)

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

你好,我看到你寫的「以為只是太累,結果竟是腦中風差點送命!醫師嚴正提醒:出現這3症狀,速速送醫還有救!」

還原度非常高,寫得非常好,有95分,接近滿分

本課目標順利達成!

另外,關於你提到的問題,跟你分享兩篇文章

https://devs.tw/post/151

https://devs.tw/post/150

繼續加油!期待看到你下一次的作業!

按了喜歡:
   ·  4年前
0 貼文  ·  5 留言

嗨! 愚人節快樂!

排版的部分好複雜,還是硬著頭皮寫出來這些

謝謝你的教材跟幫助

這次的做業 https://jsfiddle.net/mooju7463/cegt2901/

原文 https://www.storm.mg/article/860547

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

哈囉,看到「海平面升高7公尺」囉!

jsfiddle 畫面比較窄一些,不過意思有到。

合格,過關囉!

   ·  4年前
0 貼文  ·  6 留言

Hello~版主,我完成第三階段作業了,再請你幫我看看作業~謝謝 ^_^

第三階段作業: https://thimbleprojects.org/hannahtest190705/699034

參考文章: https://crossing.cw.com.tw/blogTopic.action?id=742&nid=11862

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

「外派年薪百萬」神話不再?

寫得非常好哦~很棒

目標都有達成~

繼續保持 加油~

Clucky Lai   ·  4年前
0 貼文  ·  7 留言

老師好,我完成第三階段的作業了,再請您幫我看看,謝謝: 作業:https://glitch.com/~legendary-vulture 參考文章:https://www.storm.mg/lifestyle/1405103?srcid=73746f726d2e6d675f66396662373236386462386564333633_1563455352 因為連過去Thimble要註冊時,它說要搬家了,我就直接用它新合作的Glitch註冊放專案,也是免費的。

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

阿拉丁是中國人

作業寫得沒問題~目標都有達成

繼續保持~

Glitch OK~很棒

Jessica Chen  ·  4年前
0 貼文  ·  3 留言

版主好~~這次好多似懂非懂的用法看得霧煞煞……憑感覺拼拼湊湊勉強完成了第三次的作業,很多用法沒用到寫得也不精簡……再麻煩版主幫忙看看喔~謝謝! https://jsfiddle.net/Jessica35/dzucwxg5/251/ 另外想請問一下有些地方CSS我有寫顏色,可是都沒有呈現出來,是我寫錯了還是需要寫在html呢?像是最上面facebook、line到忠於真實這整個部份還有文章標題上面的下班經濟學、新新聞和台灣外交等都是沒有呈現所寫的顏色

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

哈囉 我看到你作業囉

左右排版的樣子有出來囉 所以 OK 唷 本課原理算是有理解囉!

顏色跟一些屬性沒顯示的部份,可以利用瀏覽器的開發者工具(Chrome 右鍵 -> 開發者工具)查看瀏覽器到底讀到了什麼 css 唷!

本課目標算有完成唷!

陳楚瑜  ·  4年前
0 貼文  ·  9 留言

老師好,我完成第三課作業了,做到最後有想嘗試媒體查詢,但是拉起來好像怪怪的,左邊的主內容區會整個消失,請問是因為設成固定寬度的問題嗎? https://jsfiddle.net/ccyingo/b6tpkhqc/11/ 原檔:https://www.storm.mg/article/1521656?srcid=7777772e73746f726d2e6d675f64643530343235383764346663333766_1564204080

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

HI~

何志勇觀點:政治人物的「接地氣」只是一場秀

作業完成度很高~本課目標順利完成~

media query 的問題,超出本課要求~

如果有疑問的話,可以到新手發問區貼文,我統一在那邊回答唷~!

您的留言