網頁設計

網頁設計

文章中的文字圖飾

不知道這要叫什麼,就稱做「文字圖飾」吧!所謂「文字圖飾」指的就是像我的文章中,會有「黃色底線」、紅色小圈圈等等,讓文章感覺起來比較活潑。 其實我必須說這也是我在別人的Blog看到的效果,我只是照抄回來而已。其中一種是從Jas9 Taipei那邊學來的。因為印象中好像有看過某個地方討論這個東西,而且我又是直接竊取別人的idea,所以就沒有特地發文介紹這個用法了。 其實懂Html跟Css的話,稍微去看原始碼,就會知道這真的沒什麼,很簡單就能達到,而效果又還不錯。主要就是在內文把要有效果的文字span起來,設定class,再在css裡面設定這個class的底圖,然後設定位置等等,很容易。以下是我的做法,以這種黃線和這種紅圈圈為例。 粗體大概是這樣 斜體是這樣的 刪除線會是這樣 強調會是這樣的 1. 下載圖檔underline_yhl.gif underline_cyc.gif underline_del.gif underline_hl.gif 2. 在css加入這些。 wordpress的內容

By Hana 花水木

網頁設計

內文截斷不完全造成版面走位

想一想還是這樣的標題比較好懂。 因為這個Blog的版面我我弄得還滿用心的,在設計的時候也都有用IE6、IE7、Firefox分別測試,另外每一種瀏覽器又會測試1280×1024、1024×768及800×600三種不同解析度,目標是跨瀏覽器跟跨解析度(非固定寬度),完成後也確認過。   我自己都是用Firefox的,我的Blog上線後,我幾乎就沒再用IE來看自己的Blog。就這樣。前幾天我偶然在公司用IE看自己的Blog,卻發現嚴重走位。側邊欄整個跑道主要內容的下方靠右。像是左圖這樣(點了會自動放大)。 但奇怪的是,又只有首頁和一些分類是這樣,內文的部分都是OK的。我本來一直覺得奇怪,我明明測過了應該沒問題呀!所以覺得很慌,難不成我測試的時候瞎了嗎?然後我家當兵的那隻大土狗又吠說「妳以為Blog很容易嗎?連用IE看都會這樣,超low的耶!這樣我根本不想去妳的Blog看」,讓我大受刺激,加上我在Google Analytics發現,這個Blog讀者八成都是用IE,所以,死也要想辦法解決啊啊啊! 當我回去看原始碼的時候,冷靜下來,認為應該是有一個元素開了沒有關。簡單說應該是

By Hana 花水木

PSP

新居落成:花水木共筆部落格

我只能說我真的蘊釀了很久,從hanamitsuki.com搬過來這邊有幾個原因。 首先,舊居(http://hanamitsuki.com)的佈景我看膩了,可是因為之前設計佈景的時候,有許多東西是改死的,變成一切都不太好修改,想砍掉重練又嫌麻煩兼沒靈感沒動力。所以,既然要砍掉重練,就真的重來吧! 第二,因為之前叫花水木,我是「花(Hana)」,但我沒想到我會搞烏龍,把花水木的日文搞錯,應該是hanamizuki而非hanamitsuki,雖然有點龜毛,但是拼錯還是不好,所以這次我申請了hanamizuki.tw,是正確的了,因為.com的已經被申請走了,只好用.tw的了。 第三,想把「花色」的內容再度合併回來。那邊實在是沒有好好規劃經營,佈景隨便、架構無聊。再說「花色」的作者是個三分鐘熱度的人,她對美妝相關文章的熱度目前已經退得差不多了,所以我就合併回來,並且會開闢三分鐘熱度的專區,也就是Mizu Fever,敬請期待。 大致上最主要的原因就是以上三點囉!

By HANA 花