Currently browsing tag

新手前端日記

[新手前端]視覺及企劃也該知道的網頁設計概念- 網頁設計 ≠ 平面設計,有些”眉角”還是要了解一下

網頁設計 ≠ 平面設計,有些”眉角”還是要了解一下 前端網頁設計的技巧很雜,不過有很多問題其實在企劃或視覺設計版面的階段就要先溝通好,否則等到定稿了再來調整就肯定「痛苦太多收獲太少」不然就是牽一髮動全身叫人不想死也難…. 癈話不多說,直接寫心得: 1. HTML元素都是矩型: 首先建立一個我之前也提過的概念,HTML裡的元素其實不管造型如何,都是「正矩形」,先有盒模型的概念,在設計時就比較不會出現天馬行空的「視覺饗宴」了。 2.網頁是活的: 網頁設計和平面設計最大的差異是「網頁是活的」,和平面不同,平面設計時你的元素是固定的,字型設什麼樣子就是那樣,不會隨著印刷品放置的時間和看的人不同字型忽大忽小,或是圖片有時大有時小。 但是很不幸的,網頁會。

[新手前端]從平面設計前進 CSS-8 背景及overflow

今天來講最常用的背景色及背景吧~ color:#fff | rgb(255,0,0) | red 顏色可以用三種方法指定,不過在CSS裡直接用color是指定字的顏色 要用background-color: #333; 才是指定背景顏色。 background 背景:預設是透明的,可以放顏色及影像 background-color: green; background-image: url(image/img.jpg); 背景比較有趣的是可以決定要不要重覆及放置的位置 background-repeat: 背景重覆:有四個參數 no-repeat; repeat; repeat-x; repeat-y 即,不重覆、重覆、重覆X、重覆Y

[新手前端]從平面設計前進 CSS-7 元素排序規則- DOM,float,position

繼續說明 CSS 如何控制HTML元素在頁面裡的空間及位置配置。 上篇介紹了 display 屬性,可以針對元素的盒模型有不同的設定,display 設定了元素的顯示方式以及和其他元素的互動關係,今天來談談 position 位置。 HTML元素出現在頁面什麼位置可以依據三種主要的規則: 1. 普通 DOM樹 隨著HTML 的DOM元素順序 display是塊級還是行內不同,元素由上至下,由左而右依序排列。 2. 浮動 float 元素從普通的 DOM樹順序中浮到上方圖層,然後依元素被設定的float方向延著母元素邊界排列,display:block 的元素會被蓋住,如果左右的浮動元素堆到需要換行時,會依原本DOM 樹裡的順序,如果float:left 的元素寫在比較前面就會有優先權,空間不夠的 float:right會被擠到下一行裡。如果碰到 display為table時,table會無視float,從設為tabl置開始,做出類似block的行為。 見下圖:

[鐵人賽03]從平面設計前進 CSS-1

[新手前端]從平面設計前進 CSS-1 上一篇簡介了HTML,版面來比喻,HTML就是不同的元素,而CSS就是這些元素的造型。 如果說HTML是一篇有標題、大綱的文章,那麼CSS就是用來指定字型、大小、顏色、排版的樣式,所謂的CSS就是樣式表的意思。 同HTML一樣,CSS也是一種網頁設計師用來和瀏覽器溝通用的語言,瀏覽器永遠都會照你給的指示做出呈現,唯一的問題是設計師必需學會怎麼和他們溝通,所以在前端網頁設計時常會碰到跨瀏覽器問題就是因為主流的 IE, Firefox, chrome 對指令解讀有一些差異,其中尤以 IE的解讀方式和其他瀏覽器相差最多,所以在做樣式設計時,一般是以firefox 或 chrome的呈現結果為主,其次再修改指定讓IE也能做出類似的呈現。 <!–more–> 既然CSS也是一種和瀏覽器溝通用的語言,首先就來介紹CSS的基本語法。 首先,你必需告訴瀏覽器你想要改變樣式的是HTML裡的哪一個元素 E (element),這個E 可以是任何一個HTML裡的 tag (標籤),再來就用CSS的語法把想要改變的樣式及其參數寫入文件中。 例如針對一個HTML裡的 <a> 指定字型、顏色: <a style=” font-family:Aral; font-size:14px”> <tag a 錨點的 樣式=” 字型: Aral ; 字級: 14像素”> 其中的 style=”” 部分是HTML裡的參數指定方式,像 <a href=”” alt=””> </a> 裡面的一樣,只是這個參數是針對HTML的造型(style)來指定。而在CSS樣式裡面的指定方式也很簡單,造型類別:參數; 結尾用分號分隔。 如上述的標示方法,就叫做行內 CSS, 顧名思義就是把 style 造型寫在 …

[新手前端日記] compass- fireapp使用筆記

fireapp是compass app 改名之後的名稱,是一個用來編寫網站的工具 似乎是用ruby 及 scss 為基礎 大神們說這是rails 但是小的不知道那是什麼,我只是個不久前還在用DW 寫CSS 的美工啊啊啊!!! 只知道如果要使用fireapp可至此取得軟體 http://fireapp.handlino.com/ 裡面有個DEMO可以參考,不過因為我完全不是程式底,看DEMO也是有看沒懂 在神人一句:不會寫scss沒關係,不會時就寫css 及 前輩給我的 IE bug 求救卡 配合 deadline,還是完成了一個小改版的切版 趕快把心得都記一下,免得忘記。

[新手前端日記] 想在IE9以下使用html5時的辨法

因為IE9以下不支援新的 html tag 諸如 <header><footer><nav> 等等 故google提供了一個補救的js 只要是IE系列 9以下,都可以用這個 js來順利讓IE套用HTML5 的新tag 然後在 html 裡就不需要再多做宣告了 <!–[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]–> 附帶一個連結 http://formatmysourcecode.blogspot.tw/ 可以把字符改成實體編碼,再加上樣式來模擬貼code