chibc

About chibc

chibc《暗月之鏡》從高中網路開始普及就開始成為重度網路使用者，早期主要活動集中於巴哈姆特。
G+ CHIBC

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

This entry was posted in 　└ CSS教學　├ 前端新手日記設計 and tagged CSS HTML 前端新手前端日記鐵人賽 on 10/11/2012 by chibc

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

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

This entry was posted in 　├ 前端新手日記設計 and tagged HTML 前端鐵人賽 on 10/10/2012 by chibc

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

[鐵人賽01] 我一開始只是單純想做網頁而已

This entry was posted in 　├ 前端新手日記設計 and tagged 前端鐵人賽 on 10/09/2012 by chibc

[設計轉新手前端]我一開始只是單純想做網頁而已被人推坑報名了，本來一直覺得自己很弱很沒料，但是閃光蛋說：不嘛就直接放棄，不嘛就用力拼完，你覺得自己會的東西很簡單，但是可能就是別人不會的。所以，拼了!! /* ===== */

[翻譯] 無字的情書 – [ wordless love letter ] lyrics translation

This entry was posted in 　├ 私藏歌本 and tagged lyrics translate 台語歌無字的情書翻譯 on 09/05/2012 by chibc

我很喜歡一些台語歌，很多歌語和語法只有台語唱起來才會很有味道這首《無字的情書》算是台語歌裡我很喜歡的一首，所以把他翻譯成英文雖然我是破英文，但是如果能有更多人聽得懂台語歌就更好啦~~ grandma is non-literacy but she understand a lot of things. she said the lightning is the key of sky. once it open the rain will falling.

[新手前端日記] 我還是討厭IE, 9-不太支援opacity 透明度參數以及和視覺設計溝通的要點

This entry was posted in 　├ 前端新手日記學習筆記 and tagged IE but opacity photoshop 前端溝通透明度支援 on 08/27/2012 by chibc

IE 7 8 對opacity的支援度不佳，所以用jQ做 fedein out 的效果時要注意，這次這個案子最後的解法是捨png24 改用png8，一但用了png8就很悲情的要對位置對到快死。另外因為這次的美術設計版面時，採用了大量的濾色、覆蓋、色彩增殖之類的圖層特效，造成每個元件在psd裡都無法獨立，圖層互相影响，我以前自己在做圖時也會有這種情形，因為拿張素材濾色或增殖下去效果就很華麗，叫人不愛用也難。但是考慮到要做成元件各自分開的網頁時，大量的使用濾色或是色彩增殖這種會往下影响到背景的特效，就要小心，不然就會設計出，你在PSD裡看到是分圖層包好都獨立的元素，但其實圖層一合併就會因為背景消失而產生破圖慘況，不是元件上的特效跑出來，就是背景沒吃到特效，最好只好變成一大張動不得尺寸的固定圖… 所以這裡幾個技巧可以分享給設計者，重點就是多利用遮色片讓元件的特效可以獨立，而不是所有元素的特效都一路往下堆疊到背景色上。

媒體，少呼攏我了!!

This entry was posted in 　├ 時事看法+藉題發揮 and tagged 媒體新聞 on 08/24/2012 by chibc

主流媒體沒播的重要新聞越來越多，重大民生法案不聲不响的通過電視新聞只追著八卦、無聊的小事跑，更多是業配、轉貼熱門話題、翻拍CNN、NHK畫面。雖然網路普及但電視依然是社會多數人的訊息來源，我們真的愛看那些小事、八卦，但並不該是由電視新聞台來播放，熱門話題能討論的地方太多了，請重視自己的專業，回想起媒體第四權、人民知的權益真正的價值。並不在於我這則新聞有多少點閱數，而在於民眾有沒有獲得他們真正需要知道的訊息。拜託我真的不想再看到翻播 youtube 熱門影片放了5分鐘或是某個大陸大媽做了什麼怪事，那都不重要好嗎? 好嗎?