設計


[鐵人賽02]從平面設計前進 HTML

[新手前端]從平面設計前進 HTML 我最早開始做網頁是高中時期,當初還在播接,各校的BBS都還興盛,入口網站是奇摩、蕃薯藤,最大的網路社團是cityfamily。 巴哈姆特還只是個學生做的BBS站。 當年我學會了用右鍵”檢視原始碼” 開始抄寫我分享插畫創作時需要的 <img src=””> 這是我最早接觸到的HTML。 現在回頭看,HTML其實是一種網頁作者用來和瀏覽器溝通的語言。作者用不同的標籤來告訴瀏覽器這些被輸入的內容應該做什麼樣的呈現。 <!–more–> 比如 <a href=””>連結文字來表示鍊出網址 </a> <img src=”表示圖片”> 也就是網頁上面所有構成的元素都是用不同的 tag (標籤)來標示作用讓瀏覽器知道要怎麼呈現。 換句話說,我們人眼看的網頁是瀏覽器看完HTML之後展示出來的結果。 所以常聽到的 IE、firfox、chrome 呈現不一制的問題就是來自於不同瀏覽器對於HTML的解讀有所不同。 在程式底的學習者來說,HTML的理解是以DOM(文件模型)為概念被理解, DOM 樹其實在網頁設計來說可以簡單的理解為… 就是HTML,因為HTML裡面充滿我們標示過的內容,告訴瀏覽器現在應該有什麼行為,網頁在被讀取時會由最上方第一行開始被讀取、解析,就像一根樹由根往上長開枝散葉一樣。 所謂的 DOM 也就是指網頁由 HTML 組成時整個文件本身元素的分佈及組合,而網頁設計的基本就是在一個文件裡不停的增加內容,然後用hTML及其他方式標示用途後交給瀏覽器解析,最後變成我們看到的網頁。 所以在接觸HTML時不用太擔心,就像學語言一樣,只是要知道用什麼詞來表示可以讓瀏覽器知道你現在希望這個內容被怎麼呈現,如此而已。 在實作上,會用到的HTML也沒有想像中多,一開始需要掌握的只有幾個像 <a> 表示錨點 <img> 表示圖片 <div> 表示群組的容器 <table> 表示表格 除了用 tag 能表示該內容的用途之外,每個tag 裡都還可以增加一些參數式的說明來讓瀏覽器理解並做出更多我們需要的行為,比如: <a href=”” title=”” […]


[翻譯]Border-radius:用CSS畫圓角 4

原文 Border-radius: create rounded corners with CSS! CSS3的圓角參數讓網頁開發者能輕鬆的使用圓角設計,不需要使用圖片或是大量的DIV標記,這大概是CSS3裡最令人印象深刻的功能了。 自從2005年發佈的圓角屬性終於被多數瀏覽器支援(雖然支援度不一) ,因為相對容易使用,因此這個新技術很快的被網頁開發者接受。


[翻譯]OOCSS物件導向的CSS設計概念 1

< ![CDATA[ *OOCSS物件導向的CSS設計概念* 重點1. 把物件(定位)和skin (皮)分開,以利維護及重覆使用重點2. 把內容和 容器分開 缺點是HTML那邊會看起來比較亂 翻譯 via +暗月之鏡 – 我英文不夠好,有翻錯還請大家提醒我啊 簡介物件導向CSS(OOCSS)原文- 路易Lazaris 12, 12,2011 你聽過 “內容是王道” 這句吧? 身為網頁開發者你的工作也許就是經常要去創造內容,幾乎都聽過這句。雖然是老生常談但確實是吸引使用者來訪的真正原因。 但從Web開發者的角度,也有些人認為,速度才是王道。漸漸的,我個人越來越同意這個看法,近年來許多前端設計師都提出建議,利用改善效能及速度來增進使用者體驗的經驗。 不過,CSS似乎沒趕上這個風潮,大部分被出來提升效能的方法都集中在JavaScript和其他領域。本文會針對CSS這個被忽視的領域,向您介紹物件導向的CSS概念,它可以幫助提高網頁性能和可維護性。 = OOCSS的原則 ========一如所有物件導向的編碼方式,OOCSS鼓勵代碼重覆利用,創造容易增加及維護,並且更快更有效的CSS樣式表。