iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
1

古人有云:「先謀定而後動,則無往而不勝」動手前,先想一想,你要切的版是什麼樣子的?

好,那麼,假設你看了一些文件,也試著打開記事本(我一開始真的是用記事本,之後才安裝編輯器)試過一些標籤語法,接下來,你想要嘗試切一個版了,我當時遇到的第一個問題是:一個頁面元素這麼多~我要怎麽開始切?

每次切版前,我都會花一些時間想好,這個版面可以切分成那些區塊,並一邊決定這些區塊要用什麼語法進行配置。例如我決定使用浮動,那我會影響哪些區塊;例如我決定用 Flex ,我可以利用它的語法,幫我分配空白處(justify-content: flex-between 很好用~~)。當你分配好大區塊後,再開始分小區塊,解析有哪些元素並考量他們之間的排列適合用哪些標籤撰寫。

不管多複雜的網站,只要你可以把區塊切割的夠乾淨利落,在區塊的排版上,就越好執行。每一個區塊都乾淨的包裹著內部的元素,你可以視每一個區塊爲獨立的個體,每一次撰寫就專心在那一塊裏面的元素,就不會覺得複雜的網站很可怕了。接下來我們用一個簡單的例子來試著規劃看看吧。

/images/emoticon/emoticon30.gif

網頁渲染由上而下,由左而右,在規劃的時候也要依照這個方式思考,下方是一個簡潔的 Google 首頁畫面,由上而下,由左而右,可以先大方向的區分爲兩大區塊,如下圖:

https://ithelp.ithome.com.tw/upload/images/20181022/20111959ZTbJ7R68yf.png

區塊一通常會被稱爲 header,可以使用語義化標籤 header 來包裹,可以發現在這個範例中 header 元素集中於右邊。區塊二爲網頁主要內容,可以使用語義化標籤 main 來包裹,在區塊二中可以再區分爲三大塊,如下圖中的3/4/5。(語義化標籤可使人更容易理解區塊內容,詳細介紹可見參考 w3school 文檔)。

https://ithelp.ithome.com.tw/upload/images/20181022/20111959zSt9mHhrGB.png

每一個區塊需再分別思考它的位置對齊方式,例如在 header 右方的功能 icon 區,需向右對齊,可以使用 flex 調整或是浮動靠右。main 當中的三個區塊爲置中對齊,可以設定 margin 左右 auto。每一個區塊之間的距離需再使用 margin 或 padding 推開,例如區塊 3 與區塊 4 之間有一小空隙,我們可以在區塊 3 設定 margin-bottom。

在 header 區塊當中,右邊有一功能 icon 區。在 main 區塊當中,可以如上圖分成 3. LOGO 區 4.輸入搜尋區 5.常用網站區。每一個區塊我們可以再進行細部思考。

功能 icon 區

https://ithelp.ithome.com.tw/upload/images/20181018/20111959w7ry56iIYb.png

在此先不討論項目點開後的樣貌。在此五個項目中,皆爲可點擊的超連結,可以想到它會是 <a> 標籤,五個項目要進行排版至 header 右方,必須將他們視爲一組物件,所以需要被包裹起來(大多數人會使用<u> 標籤搭配<i>標籤包裹)。五個項目在你未進行任何操作前,它是縱向的,排列需求爲橫向,你可以思考你要使用 float 還是 flex 進行排版(或是其他)。Gmail 及 圖片是純文字,在<a>標籤的開始及結束中間輸入純文字即可達成。九公格方塊/鈴鐺及個人圖像爲圖片,需於<a>標籤中再插入<img>標籤。

區塊 2:LOGO 區

https://ithelp.ithome.com.tw/upload/images/20181018/20111959VOHcLi0Xhy.png

第二區塊較簡單,只需要一張圖片及一個分享 icon。在第二區塊你可以思考的是,分享符號如何與圖片上方切齊,並置於區塊 2 中的右側(注意:此區塊中圖片是置中的,分享icon是偏右的)。可以使用一個 div 包裹圖片及 icon,將其 position 設置爲 relative,將 icon position 設置爲 absolute,top 設置爲 0,right 設置爲 -150px,即可達成,你也可以再思考看看其他方式。

區塊 3:輸入搜尋區

https://ithelp.ithome.com.tw/upload/images/20181018/20111959gfWPSM5g0u.png

第三區塊很明顯使用的是一個<input>標籤,並且有預設提示文字,右側有一個語音輸入 icon,需能夠能使用者點選,可以以一個<a> 標籤包裹<img>。並且此語音 icon 位於輸入框內,一樣可以用position設置爲 absolute的方式來定位。細節的部分可以注意到輸入框底部有陰影,可以加上 box-shadow。

區塊 4:常用網站區

https://ithelp.ithome.com.tw/upload/images/20181018/20111959EjzYyBMuZI.png

第四區塊爲八個小方塊,只需要分配好八個小方塊的大小及位置間距即可。

以上爲我拿到一個版型時,會先規劃思考的事情,如果你在此階段想的越周到,切起來就會越順哦!我在練習切第一個版的時候,會把這些區塊都先依照靜態版型的寬高寫死,再用 background-color 填上顏色,幫助我可視化各個區域,像是下圖這樣。

https://ithelp.ithome.com.tw/upload/images/20181022/20111959kI2Ib9M1Ue.png

但釘死寬高只有在初次練習切版可以這麼做,後續切版就要改掉了,因爲正確的方法,是由內容撐開你的盒子,以及必須考慮RWD,所以大小值通常不會寫死!有了比較多次切版經驗後,我仍然會在動手前先思考排版方式,只是不會在利用 background-color 的方式寫出來,而是直接呈現在 HTML 的架構上。你構想的排版方式,直接影響 HTML 各階層包裹方式,撰寫好HTML 的架構後,再添加 CSS 就可以一步一步看到你腦中的畫面囉。切版有趣的地方,就如同生活中會遇到的每個問題一樣,將問題細切成你可以接收的大小後(一個一個區塊),它就不是問題了!


上一篇
Day2 開始了,那麼工具呢?
下一篇
Day4 盒子的大小?
系列文
前端之 " wow~原來是這樣啊 "30

尚未有邦友留言

立即登入留言