2007年3月27日 星期二

2007年3月25日 星期日

上午10:59

In:

No comments

用PX還是PT?(二)

用PX(pixer)有很多好處,它方便我們計算。
A.螢幕顯示是以px計算的,像螢幕顯示是800*600是以pixer作單位
B.網頁所用圖片,也以pixer來計算


範例1:假設12px大小字體10行,則為10*12px=120px,可輕鬆計算出其總的高度在整體頁面上是如何大小,
然後我們考慮用一個120px高的表格就可剛好包住這10行字,或斷行長度.對齊圖片等等,都可輕鬆計算出來,某些狀況下這有助於規劃網頁。(此處表格僅為舉例,實際上較優良的表格設計請見此文)
範例2.:如果網頁預設最佳瀏覽為800*600,用px做為單位,可較容易掌握網頁內容物規劃,例如框架設定大小.欄位表格.何時斷行.可放置幾個欄位...等等。


C.HTML代碼所默許的值,也是pixer。在沒有設定單位時,例如:width=100則會默許px為單位,成為width=100px。但是不寫明單位的語法撰寫,並不良好。現今已不合乎w3c所規定國際認可的標準,卻也是國內網頁設計者常見錯誤。


px仍有不適用的時候,此時可改用em 或 %這樣的相對單位。



附錄˙w3c所規定與字型相關資料(英文)
以萬維網標準設計您的網頁(中文)
上午9:44

In:

No comments

用PX還是PT?(一)

印刷排版裡,PT(point)為「絕對」長度單位(device-dependent),將字體看作一個方塊,以方塊高度來定義其大小,是物理上的單位。


而螢幕字型單位PX(pixer)則為「相對」長度單位(device-independent),「相對」則表示此字型會隨使用者瀏覽器大小.系統平台或顯示器所預設的像素密度(dpi 值) ....等因素而改變。


簡單說,用途在螢幕上時,盡量使用PX(pixer)
列印文件則請使用PT(point)


因PX本為螢幕用字型單位。
PT則為印刷用字體單位。


兩者換算公式 pt ＝ pt ÷72 ×像素密度(dpi /ppi值) ＝ px(四捨五入)
範例: 9pt= 9pt ÷72×96(dpi/ppi)= 12px
暫時的結論: 將字體設定為9pt與12px在銀幕上顯示是一樣大小
像素密度(dpi/ppi值/screen resolution)早期為72 dpi˙現多改以96 dpi計算


以上只為簡單原理說明,仍有其他因素影響著pt與px的大小顯示
例如:像素密度(dpi 值)則是公式裡需一提因素,此會隨螢幕顯示技術.系統平台預設(dpi /ppi值)...而改變影響。


在網頁設計時,該使用PX還是PT並無絕對定見,但PX相較起PT,仍為較被認可的主流單位!
除非特殊考量,建議採用相對單位做設計,因瀏覽者不會使用相同螢幕顯示與系統平台瀏覽網頁,相對單位除了PX還有常被使用的em %。


也有些錯誤觀念認為PT可以固定住大小,這並非正確。
雖然,在像素密度(dpi/ppi值)不同環境下,pt仍能維持固定「大小」。但就排版上而言,pt仍帶來差異,因而出現斷行.破版的狀況。所以造成px與pt整體顯示差異的因素不只考量「字體看起來的大小」,更要考慮字間排列所帶來之整體差異,才能完整掌控畫面Layout,這並非單單使用pt就能解決的。另外,css裡絕對長度單位(absolute length unit)的概念,是相對於輸出裝置(output device)而言的。





清晨5:39

In: , ,

No comments

XML For BloggerTemplates

XML 「可擴展標示語言」Extensible Markup Language
有很多blogger樣版網站
有關XML Template
http://peterskyhands.blogspot.com/2007/02/blogger-beta-xml-template.html

這裡有些xml面板可下載套用

有很多blogger樣版網站




Blogger的面版設計採用XML技術,對網頁設計師而言,又多一個回家功課(很早就想學學:p)
XML技術將會成為HTML,css,之後該注意的紅人,但XML的規則是比HTML更加嚴格的,在HTML裡也許會被忽略的錯誤,在XML是會造成錯誤甚至無法讀取文件,優點則是透過此技術能發展應用出比HTML更多的功能,
Blogger開發小組採用XML技術,個人覺得是很smart的,以目前網路有那麼多blog競爭來說,採用XML技術無疑是一場賭博,但也很難立刻佔領市場,需看設計者有無學習這們「新技術」來跟上這腳步。這個合乎國際W3C標準的技術以往為專業程式人員所使用,接下來要落入XML魔掌的將是做網頁設計的人了...haha...

XML若說是新技術,其實也存在一小段時間(由1996年開始,又在1998正式成為W3C標準),如果blogger在面板上採用這新技術,某程度也提升XML在應用上的廣泛性與重要性(對web design)


XML和其他 W3C 的技術一樣，沒有版權限制，不受平台限制，更延伸了HTML的應用功能
甚至有人以「XML－HTML的終結者」來稱呼它
凌晨3:18

In:

No comments

添加Blogger的背景圖

1.進控制主頁 > 範本 > 修改HTML
2.找到body {如下

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


修改對象 background:$bgcolor;
應用範例 將background:$bgcolor;換成如下任一語法


A.重複背景語法語法
background:url(http://背景圖位址) repeat;

B.背景居中語法
background:url(http://背景圖位址) no-repeat top center;

C.自動橫向重複，置於上方靠左的背景圖語法
background:url(http://背景圖位址) repeat-x top left;

D.固定背景不動
請在以上背景語法後,加上此語法
background-attachment:fixed;

D範例應用:重複背景語法+固定背景不動語法
background:url(http://背景圖位址) repeat;
background-attachment:fixed;



背景圖放置對齊位置可以有下列組合運用：
top left 置上靠左
top right 置上靠右
bottom left 置下靠左
bottom right 置下靠右
bottom center 置下居中
top center 置上居中
凌晨12:45

In:

2 comments

Blogger小工具

Blogger(Beta)最新回應程式產生器
Blogger聯播程式產生器

方法去該網頁,產生程式碼貼在HTML/JavaScript即可。

用途可用與其他blog網站作文章聯播,最新文章。只要支援 javascript,即可使用。


阿毛碎碎念~
Blogger的Feed已支援JSON
JSON(Javascript Object Notation),是附屬在 javascript 下的一組物件描述方法,加上近日風行的Ajax ,javascript 無疑變成十分熱門的語言。


JSON rule
JSON 是利用了
成對的 {} 來包住各物件(object),
用成對的 [] 來包住各陣列(array),
用成對的 "" 來包住各字串, 用逗號來區隔各變數,
而資料型態有 string, number, array, object, 另外有三個常數, true, false, null, .....。


~女人心思有否rule可套用?

附錄:CSS 樣式規則(rule)
樣式規則(rule) = 選擇子 {宣告} = Selector { property : value }

  • 選擇子(Selector)：通常為文件中的元素(element)，如html中的body, p, strong等標籤 ，多個選擇子可以逗號隔開。
  • 屬性(property)：CSS1 / CSS2 / CSS3規定了許多的屬性，目的在控制選擇子的樣式。
  • 值(value)：指屬性接受的設定值，可由各種關鍵字(keyword)組成，多個關鍵字時大都以空格隔開。
  • 要針對沒有標籤定義範圍進行樣式設定時，可利用
    與 標籤
  • 選擇子的種類
  • 類別選擇子(class selector)：可多次套用