目前分類:網頁設計 (3)

瀏覽方式: 標題列表 簡短摘要

關於隨視窗彈性縮放的排版,就會想到響應式設計(Responsive design),但這次遇到的挑戰是網頁式的系統管理介面,UI設計師的設計圖是將畫面分成上下兩部分,頁面上的每個區塊都能隨視窗的寬和高彈性縮放,最外圍不能出現卷軸。(如下圖)

依照Responsive design的方法,寬度可以用百分比定義,但高度卻不能,遍尋不著現成的jQuery,只能往純CSS的方向思考,如何讓五個區塊都能保持高度一致,又不會因為瀏覽器的差異而走位,搜尋了好多解決方案,多次的測試中,終於找到一個規則,在這裡作筆記記錄下來,有同樣困擾的網頁設計們可以試試看,也互相交流,看看能不能有更好的解決方法。

layout01.jpg

月光獨舞 發表在 痞客邦 留言(0) 人氣()

接續上一篇提到外層排版的寫法,現在就來說明主內容區五個區塊的寫法。

主內容區

HTML的結構:

文章標籤

月光獨舞 發表在 痞客邦 留言(0) 人氣()

CSS已經是網頁設計必備的技能,利用CSS定義網頁的排版、顏色、字型等等,在和程式設計師合作時可以避免在修改頁面時誤觸程式。只是網站越大,CSS很可能會越寫越雜,管理和修改也就變得很繁瑣。

前陣子才發現有個東西叫做Less,可以建立動態的CSS,有點像是在寫程式,意思是將一些會重複用到的設定,比如說顏色或寬度之類的寫成一個參數,要用的時候把這個參數值寫進去就可以 (由視覺優先的人來解釋簡直就是誤人子弟><),這麼好用的東西現在才知道有點遜掉了。

我在找資料的過程中遇到了一個問題,不管是Less或是Sass都需要在server端安裝程式才能將less檔轉換成標準的CSS,以一個web designer來說有點難度,這種好東西一定有其他辦法可以輕鬆轉換才是。終於讓我找到了,而且非常簡單。

文章標籤

月光獨舞 發表在 痞客邦 留言(0) 人氣()