Yearly Archives: 2012


[新手前端]選單共用背景圖片

現在的網頁設計比較重視語義化的結構,也就是在設計時會考慮該元素是不是真的「是內容」或者僅是裝飾品,如果是「是內容」就使用 html的元素來表示,如果單純只是造型,就使用CSS 的元素背景來呈現。 所以目前比較流行的選單做法之就是將文字隱藏後用背景圖取代,雖然有一派是主張連字都不要藏,使用所謂的icon-font或是載入字型來美化,不過在英語系國家這麼做問題不太,一個字型檔不會有多大,中文就… 常用字至少要3000個,所以,實用性不高,我們中文使用者還是乖乖的用文字取代吧…淚目。 使用的方法很簡單,一般都是用無順序列表 ul 及例表項目 li 裡面放 錨點 a的方式來做選單 li 浮動後就能做出水平選單 a 設定 block就能採用寬度,設定背景,最後用 text-indent:-9999px 將文字推出可視區域


普悠瑪卡卡號- 超扯的列車採購案

太扯了,特此一婊 真的沒看過這麼白痴的事,採購之前不知道尺寸嗎? =..=+ 還是只有基隆站太窄進不去 =..=+ 但是進不去,應該早就知道才對啊 =..=++ 基隆火車站站務都在睡喔? 這種事到底誰要負責啊? 台鐵? 人民真的很有感,每天都有很幹的爆點…………


告訴任何人該相信什麼,都是一種缺乏公平的說教

告訴任何人該相信什麼,都是一種缺乏公平的說教 不用說出答案。 只有提醒,你應該要思考這個問題 14歲的巴基斯坦女孩瑪拉拉,因為爭取女性受教權,就學途中被槍擊,但她仍然沒有放棄掙取。 年輕的,坐在教室裡的你。 正為了不懂自己為而被關在這無聊的教室裡而憤憤不平。 究竟是你不懂得愛惜前人掙取來的受教權益? 還是教育的內容出了問題? 你有想過嗎? 思考吧


[新手前端]前端工程師和「切版的」有什麼不同? 13

前端工程師和「切版的」有什麼不同? 以網頁而言所謂的前端設計指得就是相對於「程式」、「資料庫」這些所謂的後端其他的都叫前端。 也就包括視覺的呈現、流程、HTML、CSS、JS等的運用以及所謂的使用者體驗(UE)、、使用者介面(UI)、可使性(UX-usability)等等,其實包山包海,範圍可大可小。 其中的 使用者體驗(UE),更是一個舉世知名的大坑,所謂的使用者體驗,user 使用這個產品的所有體驗、感覺,當然不會只停留在你的UI設計的好不好,網站速度、效能、程式有沒有出錯、企劃本身有沒有符合需求、如何去評測UX、如何設計反饋…,UE確實負責了產品的成敗,但是UE絕對不是單一個人的責任,UE是整個團隊的共同問題,所以不管是視覺、企劃、UI、前端、後端,其實只要有把UE放在心裡就好。


[新手前端]從平面設計前進 CSS-9 字型

今天來講 CSS 如何控制HTML內的文字 font-style 字型 首先在文字設定時最基本的- 表示為 font-style: “新細明體” ,helvetica ,serif; 可以指定多組不同的字型在同一個元素上,因為字型會因為每個使用者電腦的狀態不同而出現缺少這個字型的情況,所以CSS裡可以用兩種指定方式來設定字型,如果使用者電腦裡沒有這個字型,就會用下一種,所以第一種就是字型的名字像是”新細明體”、”華康中黑體”,使用時要用”” 把字型名稱包起來。 另一種就是 serif sans-serif cursive fantasy monospace 這幾個是字型的基本樣式,學過設計的都知道,字體有幾種基本的差別,襯線有無、粗細、圓字、黑體、等寬,另一種就是單純指定形式,然後電腦就會去系統裡找最類似的來使用,就是傳說fallback啊!!


[新手前端]從平面設計前進 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


超好笑的影片,超憤怒的我 2

[小記事] 前天晚上回到家母上在看新聞 (事後知道她本來想看氣象的,結果等不到氣象就關機了,還說了真的網路查比較快) 我回到家時電視正在播 TVBS,內容是《陳沖自爆妻子焦慮“偷哭”馬英九宣示力挺到底》 我就說,這新聞有新聞價值嗎? 全篇完全都是癈話,只是一種形象宣傳,沒有任何和社會相關的議題價值。 然後是兩篇大陸新聞轉播,主播就是加上配音把原本大陸主播說的話再重覆一次,幫他加上繁中字幕,內容也不是什麼中國要聞,是《電話亭設計不良,民眾表演特技才能使用》《紅燈如同虛設,糾足一小群人就可過馬路》 第一則如果是去跑台灣哪裡有設計不良的設施我還覺得有理,報大陸的真的關我屁事


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

繼續說明 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的行為。 見下圖:


[新手前端]從平面設計前進 CSS-6 塊級元素及float, reset

上篇解釋了CSS的盒模型,介紹HTML元素在設計時就像一個個的盒子各自佔用了一個矩形的空間,今天就來接著介紹同樣也是針對元素空間定位的相關屬性。 顯示:塊級,行內、行內塊級 display:block; inline; inline-block; position: absolute, relative, fixed z-index:-1 0 1 ; reset 及預設樣式: W3C在制定共通的瀏覽器解讀方式時,針對不同的HTML元素有一些預設的樣式,一個單純的HTML檔案在完全沒有設計師指定樣式時,會呈現一種像大網模式般由上往下排例的內容,還是可以看出標題、連結、段落的差別,這就是預設樣式。 比如: <h1>預設是粗體,字級較大, 預設是普通粗細、14px… 因為這些元素有預設樣式,所以設計師在編寫樣式時有可能會被預設的寬高或間距影响到,例如 table 會有預設的padding 如果沒注意到就會一直無法順利把元素排版,因此多收設計師都喜歡先載入一段有人先寫好的CSS 叫reset.css,把所有預設的樣式都重置,這樣在設計時就比較不會被影响到。


[鐵人賽07]從平面設計前進 CSS-5 盒模型

CSS的部分講了四篇,都還在基本概念和 HTML的元素選擇器上,今天終於要正式講到樣式本身的基礎- box 盒模形。 網頁設計和平面設計最大的差異之一就在元素的空間組成上,平面設計時頁面上的元素是用線條、區塊、形狀、顏色來區分不同的元素,同時元素間可能沒有明顯的邊界,但是在網頁設計的”頁面”中設計師其實是在針對 HTML裡的元素像是標題 <h1>、區隔 <div>、影像 <img>等等元素設計不同的造型,然而這些元素在頁面中佔有的空間 “全部都是矩形”。 沒錯! 全~~部~~ 都是矩形,不管是標題、錨點或是影像,在瀏覽器眼中就像一個個的用HTML <tag> </tag>包起來的箱子box 堆在頁面中,而且常常是一個包一包,盒子裡面還有盒子,這些盒子會依網頁設計者指定的寬高形成一個個不同長寬的矩形空間。 所幸是網頁設計也有圖層的概念,可以讓這些矩形元素有不同的位置變化,但是不管你眼睛看到什麼造型,實際上他們在瀏覽器眼中「全部都是矩形」,只不過這個矩形有不同的長寬、顏色、邊界、內外間距、背景甚致還給你圖層可用。見下圖: 這張圖展示的是任何元素都有的共通的空間性質,每一個元素都具有自己的長寬等上述屬性來確定本身在頁面中佔了多少空間。