iT邦幫忙

DAY 34
5

30天掌握Sass語法系列 第 30

Sass開發流程設計 - (4) 排版流程(下)

延續昨天的版面,
已將所有的大框架建立好了,
這裡先來提自己的排版流程習慣:

1.我習慣先把大框架設定用好後,再來微調各元素間的距離。

2.在排網頁時,我會先將PSD裡面的文字都貼到記事本以後,
將html打完後再一次貼到對應位置去。

3.我在寫前端的時候,都是雙螢幕模式,
一邊螢幕是瀏覽器,另一邊則是sublime編輯器,
雙螢幕+Livereload可以加速提升前端設計師的效率。


1.00:00秒
一邊看jpg圖檔一邊將Layout建立起來,
用emmet的好處從這裡就可看得出來,
由於要建立左邊兩個資訊列表的資料,
所以我就打:
section.list*2>(a[href="#" class="img"]>img)+h3+p
就可以建立出下面的HTML架構出來,
有興趣的朋友也可以瀏覽emmet的官方網站:http://docs.emmet.io/

<section class="list">
 <a href="#" class="img"><img src="" alt=""></a>
 <h3></h3>
 <p></p>
</section>
<section class="list">
 <a href="#" class="img"><img src="" alt=""></a>
 <h3></h3>
 <p></p>
</section>

2.03:00秒
當輸入完HTML以後就開始寫Sass嘍,
這邊有一個觀念可以和大家分享一下,
請不要設計一個CSS就想要看一下畫面或按F5更新之類的。
像以我的習慣來說,
通常我都會直接看完稿的jpg,
透過想像的方式來寫Sass與CSS,
你不用抓得非常精準也沒關係,
但有些像是背景顏色、margin、padding等等,
你覺得這些東西是在該元素上一定會用得到的,
就可以先依序先打上去,最後再來做微調,
簡單的說就是做到一個段落再去瀏覽網頁,
讓自己培養想像力,對寫前端的效率也會提升。
像有的時候我狀態好的時候,
就會感覺腦海裡就逐步地在勾勒,
手上的動作就自動把CODE打出來。

我想我會做前端這麼多年,
多少也是有一次進入那個狀態,
從此以後就對CSS有了很瘋狂的著迷^_^||。

3.03:30
我的layout是左邊一塊latest,
右邊有個.side包住了.service+.find。

4.05:00
h3和p其實應該合併為h3,p然後再來寫margin比較節省程式碼,
另外有浮動的東西,都需加clearfix

5.08:35
寫到後面我發現border的顏色也很一致,
所以也將它做成變數,
在之前寫code的過程中,
大家應該也逐步感受到全域變數的魅力了。

做到這邊大致的雛型就有了,
但是這樣子還並沒有結束,
除了元素要微調外,
如果要更完整,我還會做:
1.有些字型並不是預設字型,所以會使用web-font來去做兼容性
2.上面的slide是動畫輪播,會與美術討論該如何呈現並來設計javascipt 動畫輪播效果。
3.有些元素的hover過後的效果並沒有做很齊全,所以當弄好以後,還是會和美術討論,
是否可用transition效果讓畫面更添具網頁效果。

這裡也附上此次切版的layout,提供大家參考學習^_^:
https://github.com/gonsakon/Sass-Layout-Demo


上一篇
Sass開發流程設計 - (3) 網頁排版流程(上)
下一篇
Sass開發流程設計 - (5) Sass設計資源整理
系列文
30天掌握Sass語法41

1 則留言

我要留言

立即登入留言