12 Basic CSS Template
The templates include some basic directory structure as well as basic markup and styling. You can preview the templates by clicking one of them below.
- 1 column
- 2 columns (left)
- 2 columns (right)
- 3 columns
分享本篇文章
3/27/2007
12 種css基本版型(無框架式)
12 種css基本版型(無框架式)
12 Basic CSS Template
The templates include some basic directory structure as well as basic markup and styling. You can preview the templates by clicking one of them below.
分享本篇文章
12 Basic CSS Template
The templates include some basic directory structure as well as basic markup and styling. You can preview the templates by clicking one of them below.
分享本篇文章
3/25/2007
用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所規定與字型相關資料(英文)
以萬維網標準設計您的網頁(中文) 分享本篇文章
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所規定與字型相關資料(英文)
以萬維網標準設計您的網頁(中文) 分享本篇文章
用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)而言的。
分享本篇文章
而螢幕字型單位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)而言的。
分享本篇文章
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的終結者」來稱呼它 分享本篇文章
有很多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的終結者」來稱呼它 分享本篇文章
「超級無腦安裝Blogger外掛功能」
適用對象:電腦文盲
療程:共花費12.5秒
建議:裝進階的,然後將要使用選項勾一勾
方法:請至Josh's Note
直接安裝
------------------------
不適合初學的深入瞭解
適用對象:略懂語法應用
分享本篇文章
療程:共花費12.5秒
建議:裝進階的,然後將要使用選項勾一勾
方法:請至Josh's Note
直接安裝
------------------------
不適合初學的深入瞭解
適用對象:略懂語法應用
分享本篇文章
添加Blogger的背景圖
1.進控制主頁 > 範本 > 修改HTML
2.找到body {如下
修改對象 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範例應用:重複背景語法+固定背景不動語法
背景圖放置對齊位置可以有下列組合運用：
top left 置上靠左
top right 置上靠右
bottom left 置下靠左
bottom right 置下靠右
bottom center 置下居中
top center 置上居中 分享本篇文章
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 置上居中 分享本篇文章
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可套用?
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)：可多次套用
訂閱：
文章 (Atom)
LinkWithin
