最近 Firefox 3.5 的推出讓 "只聞樓梯響, 不見人下來" 的 CSS 3 有了眉目. 因為 Firefox 3.5 支援不少 CSS 3 屬性, 這一點比 IE 8 強一些.
IE8 標榜支援 Web Standard 和通過 Acid2 檢測 (註1.), 完全支援 CSS2.1 版本. 算是 IE 的一大步, 所以我們會發現 IE8 的 CSS 寬高顯示都與Firefox一致, 這是喜的部份; 憂的是 IE 6, 7, 8 版的顯示差異就足以讓設計師們手忙腳亂好一陣.
要特別一提的是目前瀏覽器支援的 CSS3 屬性尚未成為 W3C 的推薦標準, 未來仍有被取消的可能性, 所以瀏覽器制定了各自的專有屬性, 要與標準屬性做區分. 這些專有屬性並無法通過 W3C 的 CSS 驗證, 不在意驗證的使用者可以當作實驗或學習先使用.
瀏覽器專有屬性置於 selector (選擇器) 之前, 例如: -moz-border-radius-topleft: 20px;
各瀏覽器的專有屬性標示法如下:
Safari: -webkit-
Firefox: -moz-
Konqueror: -khtml-
Opera: -o-
IE: -ms- ( IE 只有 IE8 支援 -ms- )
CSS3 新增很多 selector (選擇器) 和 property (屬性), 建議讀者先安裝好 Firefox 3.5 版瀏覽器, 其他 IE8, Opera, Safari 等視個人需求決定是否安裝. 接下來的 CSS 單元中將陸續介紹新版瀏覽器已經支援 CSS3 的部份, 敬請期待!
註1. Acid2 是檢驗瀏覽器對 Web Standard 的 HTML、CSS 2.0、PNG 圖像支援能力指標, 已經通過檢測的有 Safari 2.02 以上版本, Opera 9.0 以上版本, Firefox 3 以上版本, Opera Mobile 行動裝置版, IE 8 和 Chrome) , 未來的瀏覽器對 CSS 的解譯和呈現會更趨於一致.
10/12/2008
幫舊版IE升級到IE7或IE8的方式
最近瀏覽器的爭戰越來越激烈, 6月有 Firefox 3 和 Opera 9.5 版的發佈, 9月有 Google Chrome Beta 版發佈, IE8 正式版要在11月發佈, 中文正式版大約晚2個月, 預計明年初發佈.
Netscape 在不久前才表示不再發佈更新版本的瀏覽器, 等於宣告Netscape 將走入歷史, 但是又出現一個全新的 Google Chrome. 以 Google 的用戶數來看, 也是不容忽視的瀏覽器. 想必 Goolge 要藉由開發自家瀏覽器做更多Web應用和服務.
網頁設計師過去一直為不同的瀏覽器修改畫面呈現的問題(因為各家瀏覽器的開發缺乏標準), 瀏覽器版本越多就越麻煩. 但是拜 W3C 之賜, 這幾年強力推行 Web Standard, 原來只有 Firefox 遵行, 現在 IE8 也標榜支援 Web Standard 和通過 Acid2 檢測. Acid2 是檢驗瀏覽器對 Web Standard 的HTML、CSS 2.0、PNG圖像支援能力指標, 已經通過檢測的有 Safari 2.02 以上版本, Opera 9.0 以上版本, Opera Mobile 行動裝置版, Firefox 3, IE 8 和 Chrome , 所以未來的瀏覽器對 CSS 的解譯和呈現會更趨於一致.
但是如果還要顧慮 IE5 和 IE5.5 甚至 IE6 不怎麼完整的 CSS2 支援性, Dean Edwards 的 IE7.js Version 就很好用了, 藉由在 <head> 連結一支 js 檔將舊版 IE 轉變成 IE7 或 IE8 所支援的CSS2 selectors 的方法.
例如要將 IE5~6 升級到 IE7, 可在 <head> 加上以下的 code:
<!--[if lt IE 7] >
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-- >
例如要將 IE5~7 升級到 IE8, 可在加上以下的 code:
<!--[if lt IE 8] >
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-- >
也可將這支 js 下載回來使用 http://ie7-js.googlecode.com/svn/version/2.0(beta3)/
但是這支 js 檔到底為 IE5~6 加入哪些新東西呢? 以下CSS2的用法將會通通支援:
parent > child
adjacent + sibling
adjacent ~ sibling
[attr], [attr="value"], [attr~="value"] etc
.multiple.classes (fixes bug)
:hover, :active, :focus (for all elements)
:first-child, :last-child, only-child, nth-child, nth-last-child
:checked, :disabled, :enabled
:empty, :contains(), :not()
:before/:after/content:
:lang()
再加上支援 Doctype 標準模式 (Standard Mode) 和相容模式 (Quirks Mode) 的切換, 支援 fixed positioning (固定位置設定), min/max-width/height ( 最大最小寬度高度設定), 支援 PNG 透明圖檔等.
更完整支援內容請參考以下網址:
http://dean.edwards.name/IE7/
http://ie7-js.googlecode.com/svn/test/index.html
要幫 IE5, IE5.5 和 IE6 升級到 IE7 或 IE8 版本, 這方法一定要試一試!
Netscape 在不久前才表示不再發佈更新版本的瀏覽器, 等於宣告Netscape 將走入歷史, 但是又出現一個全新的 Google Chrome. 以 Google 的用戶數來看, 也是不容忽視的瀏覽器. 想必 Goolge 要藉由開發自家瀏覽器做更多Web應用和服務.
網頁設計師過去一直為不同的瀏覽器修改畫面呈現的問題(因為各家瀏覽器的開發缺乏標準), 瀏覽器版本越多就越麻煩. 但是拜 W3C 之賜, 這幾年強力推行 Web Standard, 原來只有 Firefox 遵行, 現在 IE8 也標榜支援 Web Standard 和通過 Acid2 檢測. Acid2 是檢驗瀏覽器對 Web Standard 的HTML、CSS 2.0、PNG圖像支援能力指標, 已經通過檢測的有 Safari 2.02 以上版本, Opera 9.0 以上版本, Opera Mobile 行動裝置版, Firefox 3, IE 8 和 Chrome , 所以未來的瀏覽器對 CSS 的解譯和呈現會更趨於一致.
但是如果還要顧慮 IE5 和 IE5.5 甚至 IE6 不怎麼完整的 CSS2 支援性, Dean Edwards 的 IE7.js Version 就很好用了, 藉由在 <head> 連結一支 js 檔將舊版 IE 轉變成 IE7 或 IE8 所支援的CSS2 selectors 的方法.
例如要將 IE5~6 升級到 IE7, 可在 <head> 加上以下的 code:
<!--[if lt IE 7] >
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-- >
例如要將 IE5~7 升級到 IE8, 可在加上以下的 code:
<!--[if lt IE 8] >
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-- >
也可將這支 js 下載回來使用 http://ie7-js.googlecode.com/svn/version/2.0(beta3)/
但是這支 js 檔到底為 IE5~6 加入哪些新東西呢? 以下CSS2的用法將會通通支援:
parent > child
adjacent + sibling
adjacent ~ sibling
[attr], [attr="value"], [attr~="value"] etc
.multiple.classes (fixes bug)
:hover, :active, :focus (for all elements)
:first-child, :last-child, only-child, nth-child, nth-last-child
:checked, :disabled, :enabled
:empty, :contains(), :not()
:before/:after/content:
:lang()
再加上支援 Doctype 標準模式 (Standard Mode) 和相容模式 (Quirks Mode) 的切換, 支援 fixed positioning (固定位置設定), min/max-width/height ( 最大最小寬度高度設定), 支援 PNG 透明圖檔等.
更完整支援內容請參考以下網址:
http://dean.edwards.name/IE7/
http://ie7-js.googlecode.com/svn/test/index.html
要幫 IE5, IE5.5 和 IE6 升級到 IE7 或 IE8 版本, 這方法一定要試一試!
5/31/2008
簡易的CSS彈性圓角邊框設定
彈性圓角邊框的傳統製作方式是利用 table 的 4 個角落各放一張圓角小圖, 再利用背景圖做上下左右 4 邊線條的伸縮效果, 在想避免使用 table 排版, 精簡原始碼的人眼中, 這種方式很多餘, 但又ㄧ直沒有更好的替代方式.
"101個您一定會遇到的問題與解答" 書中曾介紹 3 種製作彈性圓角的方式, 但都不十分理想:
第一種方式是用Firefox專用語法 –moz-border-radius 設定圓角邊框, 只有在 Firefox 瀏覽器可以看見圓角效果, IE 無效.
第二種方式是利用很多僅 1px 邊界設定差異的 <div> 包覆內容, 書中範例在內文上方用 9 個 <div>, 下方也用 9 個 <div> 才完成一個圓角邊框設定, 步驟繁複不說, 顯示的鋸齒效果也不太好.
第三種方式是先切好 4 張小圓角圖, 二張放 html 上, 二張放 css 背景裡面, 再用 class 設定圓角與邊線位置, 這不純是用 css 作成的, 比較像是傳統 table 方式的變身. 對還需要放 2 張圖在 html 上的做法不是很欣賞.
有ㄧ篇 Simple Rounded Corner CSS Boxes 是目前看起來最好的用法, 只用 4 個 class 和一張背景圖就完成圓角邊框設定, 而這張背景圖也允許有立體陰影等效果. 原文是做固定寬度 335px , 這邊我改為彈性寬度, 所以將 width: 335px 刪除, 也對內文與標題間距做點調整.
首先要設計一張夠大的圓角框背景圖 (寬 3200px, 應該沒有比這更寬的螢幕了, 高度也視需求製作), 如果要有陰影立體也直接畫好, 圖雖然大張, 但色階不多的話, 存成 jpg 或 png 也只有幾十 K 大小, 不必擔心檔案過大. 如果標題很長或可能有好幾行字, 可將標題區域高度做大一些, 讓文字有向下伸展空間. 然後再用 4 個 class 對同一張圖做標題及上下左右圓角顯示位置和間距的設定. 這方式不管是html或css設定都很簡潔, 效果可視需求做多元的變化.
"101個您一定會遇到的問題與解答" 書中曾介紹 3 種製作彈性圓角的方式, 但都不十分理想:
第一種方式是用Firefox專用語法 –moz-border-radius 設定圓角邊框, 只有在 Firefox 瀏覽器可以看見圓角效果, IE 無效.
第二種方式是利用很多僅 1px 邊界設定差異的 <div> 包覆內容, 書中範例在內文上方用 9 個 <div>, 下方也用 9 個 <div> 才完成一個圓角邊框設定, 步驟繁複不說, 顯示的鋸齒效果也不太好.
第三種方式是先切好 4 張小圓角圖, 二張放 html 上, 二張放 css 背景裡面, 再用 class 設定圓角與邊線位置, 這不純是用 css 作成的, 比較像是傳統 table 方式的變身. 對還需要放 2 張圖在 html 上的做法不是很欣賞.
有ㄧ篇 Simple Rounded Corner CSS Boxes 是目前看起來最好的用法, 只用 4 個 class 和一張背景圖就完成圓角邊框設定, 而這張背景圖也允許有立體陰影等效果. 原文是做固定寬度 335px , 這邊我改為彈性寬度, 所以將 width: 335px 刪除, 也對內文與標題間距做點調整.
首先要設計一張夠大的圓角框背景圖 (寬 3200px, 應該沒有比這更寬的螢幕了, 高度也視需求製作), 如果要有陰影立體也直接畫好, 圖雖然大張, 但色階不多的話, 存成 jpg 或 png 也只有幾十 K 大小, 不必擔心檔案過大. 如果標題很長或可能有好幾行字, 可將標題區域高度做大一些, 讓文字有向下伸展空間. 然後再用 4 個 class 對同一張圖做標題及上下左右圓角顯示位置和間距的設定. 這方式不管是html或css設定都很簡潔, 效果可視需求做多元的變化.
Html範例如下:
<div class="cssbox">
<div class="cssbox_head"><h2>This is a header</h2></div>
<div class="cssbox_body">
<p>This is for your content. ... This is for your content.</p>
</div>
</div>
CSS設定如下:
/* 設定右下角圓角圖 */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 {
background: transparent url(box.jpg) no-repeat bottom right;
}
/* 可固定寬度值 (例如 width: 335px;) 或刪除寬度改為隨內容伸展的彈性寬度 */
.cssbox {
padding-right: 15px; /* 底圖右邊緣間距 */
margin: 20px auto; /* 地圖上下左右邊界 */
}
/* 設定右上角圓角圖 */
.cssbox_head {
background-position: top right;
margin-right: -15px; /* 右上角底圖向上拉高 15px */
padding-right: 40px; /* 右邊間距 = 圖片間隙 + 內側間距 */
}
/* 設定左上角圓角圖 */
.cssbox_head h2 {
font-size: 120%;
background-position: top left;
margin: 0; /* 邊界設定為 0*/
border: 0; /* 框線設定為 0 */
padding: 5px 0 5px 40px; /* 左側間距 = 圖片間隙 + 內側間距 */
height: auto !important;
height: 1%; /* IE Holly Hack 修正 */
}
/* 設定左下角圓角圖 */
.cssbox_body {
background-position: bottom left;
margin-right: 25px; /* 右邊間距 */
padding: 15px 0 15px 40px; /* 間距設定, 左側 40px 要與 .cssbox_head 相同 */
}
/* 內文與標題間距修改 */
.cssbox_body p {
margin-top: 0 ;
}
這是利用 cssbox 和 cssbox_body 做右下和左下圓角, .cssbox_head 和 .cssbox_head h2 做右上和左上圓角, 並針同一張圖的背景 (background-position) 做置左置右或靠上靠下設定. 所以 4 邊的 margin 和 padding 必需互相對稱搭配, 才能做出無縫隙, 上下左右均衡的圓角邊框.
好用的 "CSS彈性圓角邊框設定" 推薦給各位!
2/10/2008
最大寬度與最小寬度網頁設定- Part II
曾介紹過 "最大寬度與最小寬度網頁設定" 方式, 文中提到最大或最小可擇一使用, 但最近有人問到可否合併使用? 因為直接用原來方式將最大與最小寬度寫在一起會讓 broswer 當掉.
要合併使用的寫法如以下所示(最大寬度不大於950px, 最小寬度不小於780px):
div {
min-width: 780px;
max-width: 950px;
width:expression(document.body.clientWidth < 780? "780px" : document.body.clientWidth > 950? "950px" : "auto");
}
但要強調的是這方式是針對IE6以下的IE瀏覽器使用, IE7和Firefox等較新的瀏覽器已經支援 min-width 和 max-width 的 CSS 語法, 不需要用這種方式設定.
要合併使用的寫法如以下所示(最大寬度不大於950px, 最小寬度不小於780px):
div {
min-width: 780px;
max-width: 950px;
width:expression(document.body.clientWidth < 780? "780px" : document.body.clientWidth > 950? "950px" : "auto");
}
但要強調的是這方式是針對IE6以下的IE瀏覽器使用, IE7和Firefox等較新的瀏覽器已經支援 min-width 和 max-width 的 CSS 語法, 不需要用這種方式設定.
7/08/2007
列印出網頁背景圖的方式
有沒有遇見過客戶要求將網頁背景用印表機印出來的? 一般網製作都會盡量將背景圖, 背景色或icon裝飾圖片用css或table放到背景裡當網頁底圖, 只有文字和新聞照片才會放在html. 無法列印背景是瀏覽器的特性, 目的應該是不想干擾文字的呈現.
曾經有二個客戶提到這個問題: 一個比較好解決, 他的目的是希望可以將背景圖印出來做成報告呈給長官看, 但是缺少背景圖的網頁印出來只有文字和線條, 做不成漂亮的報告. 我提議用"螢幕列印"方式拼出頁面圖檔給他印, 但是他希望可以自己想印的時候印, 所以不喜歡這種方法 . 後來是我們的PM告訴他可以調整瀏覽器的設定才解決這個問題.
瀏覽器的設定可以到瀏覽器的"工具 / 網際網路選項 / 進階" 將 "列印色彩的背景及影像" 這選項打勾, 之後再到預覽列印就可以看到背景的顏色和圖片都顯示出來. 於是這位客戶的問題就解決了!
另一個比較麻煩, 我竟然也連做了二期, 和他照面二次. 第一期他希望將頁面中的選單, 標題和條例項目的icon圖都印出來, 可以清楚呈現這些用css做在背景的icon圖示, 例如箭頭, 圓點等. 但是我們知道css只有條列項目(list-style-image)的icon圖可以被印出來, 其他的不行. 所以當他看見用< li >寫的條列項目的圓點圖示可以印出來, 其他用< h >寫的圖示印不出來時, 就很堅持一定要想辦法達成全部印出來的要求. 第一次遇到這麼"盧"的客戶, 和他解釋瀏覽器的特性也沒用, 所以只好將所有icon圖都從背景拿出來放到html才解決這個問題. 這是很笨的方法, 但是笨方法可以解決問題的話也只好用了.
第二期我們又照面了, 一開始他沒提這種要求, 我也決定不再理會他, 直接將圖示都改放到背景. 在轉移舊資料時就發現第一期放在html的icon圖也跟著轉進來, 這是笨方法的下場, 於是上稿的人要比較辛苦的拿掉這些icon圖. 只是果不其然, 最後快要驗收時他又再次提出相同的問題, 但是這次他沒這麼堅持了, 也就得以維持原狀交差. 但是我還是想知道究竟有沒有人有列印背景圖的方法, 於是開始又搜尋Google.
搜尋的結果發現竟然有很多人在討論區問相同的問題, 大多數也都是遇到這種"盧"的客戶在求助的. 在這當中有個天才Andreas提供一個"偏方", 就是運用list-style-image 的特性印出背景圖, 他的example頁面是 Printing CSS background image . 說明頁在Web-Graphics.
他在h1下一個名為id="title"的style, 這組id如下:
#ti\tle { /* 6. */
display: list-item; /* 1. */
list-style-image: url(banner.jpg); /* 2. */
list-style-position: inside; /* 3. */
letter-spacing: -1000em; /* 4. */
font-size: 1pt; /* 5. */
color: #fff; /* 5. */
}
上面的寫法依序說明如下:
1. 將h1的display設為list-item, 以條例項目型態顯示
2. 將list-style-image設為範例網頁中的banner.jpg
3. 這是考慮firefox的設定, 將圖示呈現方式改為"內縮"
4. 讓html上面h1的文字消失, 於是將letter-spacing設為-1000em
5. 但是4. 讓文字消失的方法在Opera沒有作用, 所以再將字級設成1pt並且和背景色同為白色, 這樣在Opera也看不清這些字了.
6. 在title名字加斜線"/" . 因為這方法在IE5和5.5無效, 所以用加斜線方式讓IE5和5.5因為無法辨識這種名稱寫法而不影響樣式呈現. (也就是讓IE5, 5.5以原來無背景圖, 只呈現標題文字的方式顯示)
這種方式只有在IE6, Firefox 1.0 and 1.5 and Opera 8.5有效, 但是這篇文章是在2005年12月25日發表, 所以只測試這些版本的瀏覽器, 但是我在IE7, Firefox2和Netscape8看也是OK的.
多虧這位Andreas想得出這種方法, 我會稱這種方法為"偏方"是因為< h >本來是標題的意思, 在css中改以條例項目型態顯示(list-item)有名不正言不順的嫌疑, 但是真的遇到這種"盧"的客戶也只好用了.
好用的方法介紹給大家參考!
曾經有二個客戶提到這個問題: 一個比較好解決, 他的目的是希望可以將背景圖印出來做成報告呈給長官看, 但是缺少背景圖的網頁印出來只有文字和線條, 做不成漂亮的報告. 我提議用"螢幕列印"方式拼出頁面圖檔給他印, 但是他希望可以自己想印的時候印, 所以不喜歡這種方法 . 後來是我們的PM告訴他可以調整瀏覽器的設定才解決這個問題.
瀏覽器的設定可以到瀏覽器的"工具 / 網際網路選項 / 進階" 將 "列印色彩的背景及影像" 這選項打勾, 之後再到預覽列印就可以看到背景的顏色和圖片都顯示出來. 於是這位客戶的問題就解決了!
另一個比較麻煩, 我竟然也連做了二期, 和他照面二次. 第一期他希望將頁面中的選單, 標題和條例項目的icon圖都印出來, 可以清楚呈現這些用css做在背景的icon圖示, 例如箭頭, 圓點等. 但是我們知道css只有條列項目(list-style-image)的icon圖可以被印出來, 其他的不行. 所以當他看見用< li >寫的條列項目的圓點圖示可以印出來, 其他用< h >寫的圖示印不出來時, 就很堅持一定要想辦法達成全部印出來的要求. 第一次遇到這麼"盧"的客戶, 和他解釋瀏覽器的特性也沒用, 所以只好將所有icon圖都從背景拿出來放到html才解決這個問題. 這是很笨的方法, 但是笨方法可以解決問題的話也只好用了.
第二期我們又照面了, 一開始他沒提這種要求, 我也決定不再理會他, 直接將圖示都改放到背景. 在轉移舊資料時就發現第一期放在html的icon圖也跟著轉進來, 這是笨方法的下場, 於是上稿的人要比較辛苦的拿掉這些icon圖. 只是果不其然, 最後快要驗收時他又再次提出相同的問題, 但是這次他沒這麼堅持了, 也就得以維持原狀交差. 但是我還是想知道究竟有沒有人有列印背景圖的方法, 於是開始又搜尋Google.
搜尋的結果發現竟然有很多人在討論區問相同的問題, 大多數也都是遇到這種"盧"的客戶在求助的. 在這當中有個天才Andreas提供一個"偏方", 就是運用list-style-image 的特性印出背景圖, 他的example頁面是 Printing CSS background image . 說明頁在Web-Graphics.
他在h1下一個名為id="title"的style, 這組id如下:
#ti\tle { /* 6. */
display: list-item; /* 1. */
list-style-image: url(banner.jpg); /* 2. */
list-style-position: inside; /* 3. */
letter-spacing: -1000em; /* 4. */
font-size: 1pt; /* 5. */
color: #fff; /* 5. */
}
上面的寫法依序說明如下:
1. 將h1的display設為list-item, 以條例項目型態顯示
2. 將list-style-image設為範例網頁中的banner.jpg
3. 這是考慮firefox的設定, 將圖示呈現方式改為"內縮"
4. 讓html上面h1的文字消失, 於是將letter-spacing設為-1000em
5. 但是4. 讓文字消失的方法在Opera沒有作用, 所以再將字級設成1pt並且和背景色同為白色, 這樣在Opera也看不清這些字了.
6. 在title名字加斜線"/" . 因為這方法在IE5和5.5無效, 所以用加斜線方式讓IE5和5.5因為無法辨識這種名稱寫法而不影響樣式呈現. (也就是讓IE5, 5.5以原來無背景圖, 只呈現標題文字的方式顯示)
這種方式只有在IE6, Firefox 1.0 and 1.5 and Opera 8.5有效, 但是這篇文章是在2005年12月25日發表, 所以只測試這些版本的瀏覽器, 但是我在IE7, Firefox2和Netscape8看也是OK的.
多虧這位Andreas想得出這種方法, 我會稱這種方法為"偏方"是因為< h >本來是標題的意思, 在css中改以條例項目型態顯示(list-item)有名不正言不順的嫌疑, 但是真的遇到這種"盧"的客戶也只好用了.
好用的方法介紹給大家參考!
5/13/2007
CSS 命名規則
最近在工作上討論到CSS命名規則, 目的是希望大家能對相同的資料區塊使用同一種名稱, 方便設計師彼此或工程師coding時辨認, 例如: 頁首就用<div class=”header”>.
開始用CSS做網頁設計以來, 所使用的命名規則並非一直固定著, 有時因為版型/佈局不同, 有時因為資料區塊不同, 有時因為網頁結構的寫法不同, 有時是因為想法不同, 認為先前的做法不好所做的改進.
其中又以"網頁結構寫法不同"而更改的原因比較多. 幾年前還是生手時, 做標題總是用: <div class=”title>網頁標題</div> 的方式寫, 所以CSS裡面會有一組: .title {…….}. 現在知道要用結構化的語法寫就改用 <h3>網頁標題</h3>, 當然CSS裡面也要跟著改成 h3 {…….}. (結構化語意請參考 支援各種平台的網站製作方式 和 談Web標準 )
其次是佈局, 我喜歡簡潔的設計(不確定是否一直如此), 傾向極簡風格一派, 希望畫面看起來乾淨舒適又可以表達意涵. 所以比較容易以網頁結構本身的tag (如h, p, ul, li) 命名做設計, 頂多在資料區塊外加一組<div>, 例如:
<div class=”news”>
<h4>即時新聞標題</h4>
<p>即時新聞內文……</p>
<ul>
<li>相關新聞條列1. </li>
<li>相關新聞條列2. </li>
</ul>
</div>
CSS可以寫成:
.news {……}
.news h4 {……}
.news p {……}
.news ul {……}
.news li {……}
這種寫法可以省很多 <div>和<class>, 達到網頁結構簡潔的目的. 但多數設計師是喜歡屬於華麗風格的(也許害怕客戶抱怨沒認真在幫他們做設計), 通常會在資料區塊外圍加上有底圖的圓角邊框包起來, 或者在四周再加上插圖等裝飾圖片. 這樣設計的網頁結構自然也要複雜起來, html寫法可能會變成:
<div class=”news”>
<div class=”header”> </div> -- 這裡放圓角邊框上方底圖
<div class=”body”> --這裡放圓角邊框中間底圖
<h4 class=”title” >即時新聞標題</h4>
<p class=”text”>即時新聞內文……</p>
<ul>
<li class=”list_1”>相關新聞條列1. </li>
<li class=”list_2”>相關新聞條列2. </li>
</ul>
</div>
<div class=”footer”> </div> -- 這裡放圓角邊框下方底圖
</div>
<div class=”pic><img src…… /></div> -- 整個資料區塊下方再補個插圖
CSS可能寫成:
.news {……}
.news .header {……}
.news h4 {……}
.news .body {……}
.news p {……}
.news .title {……}
.news .text {……}
.news .list_1 {……}
.news .list_2 {……}
.news .footer {……}
.news .pic {……}
從上面例子可以看出, 比較難辨認的是Html的語法結構, CSS只要命名不是和內容完全沾不上邊的, 都還好辨認. 工程師coding時的困擾也應該是Html結構層面, 不全是CSS名稱的緣故. 如果頁面上類似的資料區塊多達3~5個的話, 這結構和CSS就真的複雜的可以了! 我經常看見有設計師即使是沒插圖的簡單資料區塊, 也要保留空的<div> tag (header, body, footer), 只為了將來也許會修改的可能性. 這種可能性其實微乎其微, 真的運氣不好也頂多到工程那兒請他加個tag, 幾分鐘就完成了. 如果工程師知道為了這些沒用到的tag讓他困惑許久的話, 也會希望不要保留比較好.
真的要訂規則的話, 應該要用比較客觀的方式命名, 並且考慮"網頁結構"和"版型佈局". 簡單設計和需要放很多插圖的網頁結構必定不同, 簡單設計可以只用少許<div>完成設計. 但是很多插圖的網頁就需要藉由一層又一層的<div>做為放置插圖的區塊. 例如兒童版的網頁就少不了要多放些可愛造型的風景或人物圖片, header. body, footer這些div會是需要存在的. 但如果統一以兒童版的結構訂定一組極大化標準規則的話, 對很多只需要簡單結構的網頁來說會太肥大, 頁面充滿不需要用到的tag. 如果以簡單結構的網頁訂定標準規則的話, 對兒童版的網頁來說又不夠用, 必需再行擴充. 所以不管怎麼訂都是"有欠周全", 而那一類型的網頁適用這樣的規則也應該是思考方向之一.
一位英國資深網頁設計師Andy Clarke做過相同的研究, 發表What's in a name (上) 和 What's in a name (pt2) (下) 二篇文章探討CSS命名規則. 他找了40位當今知名的CSS網頁設計師的網站, 分析他們對外框, 上, 下, 左, 中, 右欄位和導覽列的命名, 並歸納出最常被使用的名稱. 這份分析表請參考Naming Conventions Table.
從分析表可以看到有些欄位是空的, 因為不是每個欄位都有被使用到, 例如有的版型是二欄靠左, 就不會有右邊欄位; 最外框container則視版面的製作方式, 不一定要存在; 導覽列有的獨立在頁面上方, 有的和相關資訊一起放在左邊或右邊欄位.
Andy Clarke 第一篇文章What's in a name從分析表歸納出最常被使用的名稱如下:
‧外框: container (8/40)
‧頁首: header (18/40)
‧主導覽列: nav (4/40) 但是nav相關名稱(navigation, navber, topnav, navcontainer)也佔多數
‧左邊或右邊欄位: sidebar (7/40)
‧內容: content (16/40)
‧頁尾: footer (24/40)
以上的名稱相信也是很多人習慣使用的命名方式, 可以完全同意(雖然我習慣將導覽列命名為menu). 文中也提到命名應該描述區塊本身的意義而非外觀或位置, 因為外觀(顏色)位置(左右)是經常會變動修改的. 他也另外列出幾個常用名稱, 但不在這份分析表中, 所以僅供參考:
‧次導覽列: sub-nav
‧網站搜尋: search
‧搜尋結果: search-results
‧版權資訊: copyright
Andy Clarke 第二篇文章What's in a name (pt2) 又對比較細項的內容區塊命名, 但這些細項就缺少像第一篇那樣客觀的分析, 他也說了: 這些純粹是他個人的想法和建議. 這些建議和我看過優秀的CSS設計網頁的命名有很大差異(例如中間有"-"符號). 由於客觀性不足, 不具說服力, 在此並不推薦第二篇文章所寫的命名方式.
當Andy Clarke發表第一篇文章時就受到Eric Meyer (知名的Web標準和CSS大師級人物)的批評: 認為CSS命名規則是非必要之事, 它應該留給設計師做比較彈性的運用空間. Eric Meyer的看法請參考Elemental Nomenclature. (Eric Meyer也在那40人的名單當中) 但是Andy Clarke的第二篇文章隨即反駁Eric Meyer說法, 並且做出更細項的命名規則結論. Andy Clarke認為他是站在coding和公司的角度看這件事就有其必要性.
從設計師的角度看, 我贊同Eric Meyer 的看法, 因為從事設計或創意工作的人喜歡可以自由發揮創意的空間, 多少都會對"制式"的東西感到反感. 但如果非要制定規則的話, 也以資料區塊為命名單位, 制定符合意義並容易辨認的名稱, 例如: headline, newslist, bulletin, epaper, relatednews等 , 更細項的項目則保留彈性不需訂定. 因為不管做多細都會有如前面所說的"有欠周全"的地方.
附註:
有件事Andy Clarke並未探討, 那就是使用id或class? id通常在頁面中扮演定位或辨識的角色,例如: <div id=”header”>在同一個頁面允許使用一個, 不能出現第二次, class可以重複出現(請參考 id和class的差異 一文), 所以像header, content, footer是常見的以id定位成大區塊框架的做法, 但是都用class定位的也大有人在. 就看製作網頁時的功能設定為何? 有的id是要保留給程式下參數用的. 但是和程式配合得當的話, 也可以不用考慮這些. 因為寫程式的人也會自動避開已經被使用的名稱.
開始用CSS做網頁設計以來, 所使用的命名規則並非一直固定著, 有時因為版型/佈局不同, 有時因為資料區塊不同, 有時因為網頁結構的寫法不同, 有時是因為想法不同, 認為先前的做法不好所做的改進.
其中又以"網頁結構寫法不同"而更改的原因比較多. 幾年前還是生手時, 做標題總是用: <div class=”title>網頁標題</div> 的方式寫, 所以CSS裡面會有一組: .title {…….}. 現在知道要用結構化的語法寫就改用 <h3>網頁標題</h3>, 當然CSS裡面也要跟著改成 h3 {…….}. (結構化語意請參考 支援各種平台的網站製作方式 和 談Web標準 )
其次是佈局, 我喜歡簡潔的設計(不確定是否一直如此), 傾向極簡風格一派, 希望畫面看起來乾淨舒適又可以表達意涵. 所以比較容易以網頁結構本身的tag (如h, p, ul, li) 命名做設計, 頂多在資料區塊外加一組<div>, 例如:
<div class=”news”>
<h4>即時新聞標題</h4>
<p>即時新聞內文……</p>
<ul>
<li>相關新聞條列1. </li>
<li>相關新聞條列2. </li>
</ul>
</div>
CSS可以寫成:
.news {……}
.news h4 {……}
.news p {……}
.news ul {……}
.news li {……}
這種寫法可以省很多 <div>和<class>, 達到網頁結構簡潔的目的. 但多數設計師是喜歡屬於華麗風格的(也許害怕客戶抱怨沒認真在幫他們做設計), 通常會在資料區塊外圍加上有底圖的圓角邊框包起來, 或者在四周再加上插圖等裝飾圖片. 這樣設計的網頁結構自然也要複雜起來, html寫法可能會變成:
<div class=”news”>
<div class=”header”> </div> -- 這裡放圓角邊框上方底圖
<div class=”body”> --這裡放圓角邊框中間底圖
<h4 class=”title” >即時新聞標題</h4>
<p class=”text”>即時新聞內文……</p>
<ul>
<li class=”list_1”>相關新聞條列1. </li>
<li class=”list_2”>相關新聞條列2. </li>
</ul>
</div>
<div class=”footer”> </div> -- 這裡放圓角邊框下方底圖
</div>
<div class=”pic><img src…… /></div> -- 整個資料區塊下方再補個插圖
CSS可能寫成:
.news {……}
.news .header {……}
.news h4 {……}
.news .body {……}
.news p {……}
.news .title {……}
.news .text {……}
.news .list_1 {……}
.news .list_2 {……}
.news .footer {……}
.news .pic {……}
從上面例子可以看出, 比較難辨認的是Html的語法結構, CSS只要命名不是和內容完全沾不上邊的, 都還好辨認. 工程師coding時的困擾也應該是Html結構層面, 不全是CSS名稱的緣故. 如果頁面上類似的資料區塊多達3~5個的話, 這結構和CSS就真的複雜的可以了! 我經常看見有設計師即使是沒插圖的簡單資料區塊, 也要保留空的<div> tag (header, body, footer), 只為了將來也許會修改的可能性. 這種可能性其實微乎其微, 真的運氣不好也頂多到工程那兒請他加個tag, 幾分鐘就完成了. 如果工程師知道為了這些沒用到的tag讓他困惑許久的話, 也會希望不要保留比較好.
真的要訂規則的話, 應該要用比較客觀的方式命名, 並且考慮"網頁結構"和"版型佈局". 簡單設計和需要放很多插圖的網頁結構必定不同, 簡單設計可以只用少許<div>完成設計. 但是很多插圖的網頁就需要藉由一層又一層的<div>做為放置插圖的區塊. 例如兒童版的網頁就少不了要多放些可愛造型的風景或人物圖片, header. body, footer這些div會是需要存在的. 但如果統一以兒童版的結構訂定一組極大化標準規則的話, 對很多只需要簡單結構的網頁來說會太肥大, 頁面充滿不需要用到的tag. 如果以簡單結構的網頁訂定標準規則的話, 對兒童版的網頁來說又不夠用, 必需再行擴充. 所以不管怎麼訂都是"有欠周全", 而那一類型的網頁適用這樣的規則也應該是思考方向之一.
一位英國資深網頁設計師Andy Clarke做過相同的研究, 發表What's in a name (上) 和 What's in a name (pt2) (下) 二篇文章探討CSS命名規則. 他找了40位當今知名的CSS網頁設計師的網站, 分析他們對外框, 上, 下, 左, 中, 右欄位和導覽列的命名, 並歸納出最常被使用的名稱. 這份分析表請參考Naming Conventions Table.
從分析表可以看到有些欄位是空的, 因為不是每個欄位都有被使用到, 例如有的版型是二欄靠左, 就不會有右邊欄位; 最外框container則視版面的製作方式, 不一定要存在; 導覽列有的獨立在頁面上方, 有的和相關資訊一起放在左邊或右邊欄位.
Andy Clarke 第一篇文章What's in a name從分析表歸納出最常被使用的名稱如下:
‧外框: container (8/40)
‧頁首: header (18/40)
‧主導覽列: nav (4/40) 但是nav相關名稱(navigation, navber, topnav, navcontainer)也佔多數
‧左邊或右邊欄位: sidebar (7/40)
‧內容: content (16/40)
‧頁尾: footer (24/40)
以上的名稱相信也是很多人習慣使用的命名方式, 可以完全同意(雖然我習慣將導覽列命名為menu). 文中也提到命名應該描述區塊本身的意義而非外觀或位置, 因為外觀(顏色)位置(左右)是經常會變動修改的. 他也另外列出幾個常用名稱, 但不在這份分析表中, 所以僅供參考:
‧次導覽列: sub-nav
‧網站搜尋: search
‧搜尋結果: search-results
‧版權資訊: copyright
Andy Clarke 第二篇文章What's in a name (pt2) 又對比較細項的內容區塊命名, 但這些細項就缺少像第一篇那樣客觀的分析, 他也說了: 這些純粹是他個人的想法和建議. 這些建議和我看過優秀的CSS設計網頁的命名有很大差異(例如中間有"-"符號). 由於客觀性不足, 不具說服力, 在此並不推薦第二篇文章所寫的命名方式.
當Andy Clarke發表第一篇文章時就受到Eric Meyer (知名的Web標準和CSS大師級人物)的批評: 認為CSS命名規則是非必要之事, 它應該留給設計師做比較彈性的運用空間. Eric Meyer的看法請參考Elemental Nomenclature. (Eric Meyer也在那40人的名單當中) 但是Andy Clarke的第二篇文章隨即反駁Eric Meyer說法, 並且做出更細項的命名規則結論. Andy Clarke認為他是站在coding和公司的角度看這件事就有其必要性.
從設計師的角度看, 我贊同Eric Meyer 的看法, 因為從事設計或創意工作的人喜歡可以自由發揮創意的空間, 多少都會對"制式"的東西感到反感. 但如果非要制定規則的話, 也以資料區塊為命名單位, 制定符合意義並容易辨認的名稱, 例如: headline, newslist, bulletin, epaper, relatednews等 , 更細項的項目則保留彈性不需訂定. 因為不管做多細都會有如前面所說的"有欠周全"的地方.
附註:
有件事Andy Clarke並未探討, 那就是使用id或class? id通常在頁面中扮演定位或辨識的角色,例如: <div id=”header”>在同一個頁面允許使用一個, 不能出現第二次, class可以重複出現(請參考 id和class的差異 一文), 所以像header, content, footer是常見的以id定位成大區塊框架的做法, 但是都用class定位的也大有人在. 就看製作網頁時的功能設定為何? 有的id是要保留給程式下參數用的. 但是和程式配合得當的話, 也可以不用考慮這些. 因為寫程式的人也會自動避開已經被使用的名稱.
3/18/2007
最大寬度與最小寬度網頁設定
W3C雖然制定了最大寬度(max-width)與最小寬度(min-width)的CSS, 但是IE先前的版本並不支援, 直到最近的IE7才開始支援這兩個屬性, 所以很少人使用這項功能, 其實Firefox, Netscape, Opera瀏覽器早已支援.
根據useit .com 2006年7月調查, 1024螢幕寬度是目前最多人使用的, 約佔60%, 800螢幕寬度的使用者約17%, 其餘的是1280(含)以上的大螢幕顯示器, 目前最佳螢幕解析為1024 x 768.
運用這兩項屬性有什麼好處呢? 先從各種螢幕寬度的使用探討:
1. 如果設定為1024寬度, 那麼800寬度的螢幕會出現橫向捲軸, 造成17%使用者的閱讀性不佳.
2. 如果設定為800寬度, 資料多的網頁無法將最重要的內容在不拉捲軸情況下完整顯示出來.
3. 如果設定為彈性寬度(內容隨螢幕大小延展), 當螢幕過寬時(如1280以上), 對以文字為主的網頁會有閱讀上的困難.
一般的網頁內容都是由左排到右, 當我們瀏覽網頁時, 眼球會隨文章寬度從左邊慢慢移到右邊, 折行時再將眼球移回左邊第一個字, 這時如果寬度拉太長, 容易發生找不到承接剛才那一行字的情況, 螢幕越寬問題越嚴重, 這也是為什麼實體的報章雜誌排版都會採用分欄排版的原因: 為了讓讀者的眼睛可以保持一個角度從上閱讀到下, 眼球不用左邊右邊轉來轉去.
可是限制寬度是否會讓買寬螢幕的人無法發揮寬螢幕的作用? 買大螢幕可能是看影音圖檔, 玩遊戲或者專業繪圖等原因的需求, 不是拿來讀會讓眼球轉來轉去的文章, 如果是這種情況, 恐怕讀不了幾行就會放棄, 不然就要手動將瀏覽器寬度拉窄一些.
所以最大寬度設定就派上用場了, 做法如下:
IE7和其他瀏覽器可以直接使用max-width與min-width, 但是顧慮還有多數人使用舊版的IE瀏覽器, 所以要在width再加上一行script語法 (或可到http://www.svendtofte.com/code/max_width_in_ie/ 參看說明)
針對IE6, 除了加script語法, 還需讓它的顯示模式轉為相容模式(請參考瀏覽器的顯示模式一文), 做法有4種 (svendtofte.com採用第4種作法, 我再加上第1, 2, 3種作法):
1. 網頁Doctype宣告上方已經有xml宣告 <?xml version="1.0" encoding="big5" ?>
2. 網頁不需要有xml宣告的可以加上一行註解, 如 <!-- force IE6 into quirks mode -->
3. 使用不加網址的宣告
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
4. 不加任何宣告(非web標準做法, 不建議採用)
最大寬度設定
以下範例將最大寬度設為950px/置中, 當螢幕大於950px的會以這個寬度顯示, 小於950的則以實際螢幕寬度顯示, 例如750寬度的內容自動以750寬度顯示, 不會出現橫向捲軸. 瀏灠器的畫面如下:
1280寬度螢幕(兩邊空白)
根據useit .com 2006年7月調查, 1024螢幕寬度是目前最多人使用的, 約佔60%, 800螢幕寬度的使用者約17%, 其餘的是1280(含)以上的大螢幕顯示器, 目前最佳螢幕解析為1024 x 768.
運用這兩項屬性有什麼好處呢? 先從各種螢幕寬度的使用探討:
1. 如果設定為1024寬度, 那麼800寬度的螢幕會出現橫向捲軸, 造成17%使用者的閱讀性不佳.
2. 如果設定為800寬度, 資料多的網頁無法將最重要的內容在不拉捲軸情況下完整顯示出來.
3. 如果設定為彈性寬度(內容隨螢幕大小延展), 當螢幕過寬時(如1280以上), 對以文字為主的網頁會有閱讀上的困難.
一般的網頁內容都是由左排到右, 當我們瀏覽網頁時, 眼球會隨文章寬度從左邊慢慢移到右邊, 折行時再將眼球移回左邊第一個字, 這時如果寬度拉太長, 容易發生找不到承接剛才那一行字的情況, 螢幕越寬問題越嚴重, 這也是為什麼實體的報章雜誌排版都會採用分欄排版的原因: 為了讓讀者的眼睛可以保持一個角度從上閱讀到下, 眼球不用左邊右邊轉來轉去.
可是限制寬度是否會讓買寬螢幕的人無法發揮寬螢幕的作用? 買大螢幕可能是看影音圖檔, 玩遊戲或者專業繪圖等原因的需求, 不是拿來讀會讓眼球轉來轉去的文章, 如果是這種情況, 恐怕讀不了幾行就會放棄, 不然就要手動將瀏覽器寬度拉窄一些.
所以最大寬度設定就派上用場了, 做法如下:
IE7和其他瀏覽器可以直接使用max-width與min-width, 但是顧慮還有多數人使用舊版的IE瀏覽器, 所以要在width再加上一行script語法 (或可到http://www.svendtofte.com/code/max_width_in_ie/ 參看說明)
針對IE6, 除了加script語法, 還需讓它的顯示模式轉為相容模式(請參考瀏覽器的顯示模式一文), 做法有4種 (svendtofte.com採用第4種作法, 我再加上第1, 2, 3種作法):
1. 網頁Doctype宣告上方已經有xml宣告 <?xml version="1.0" encoding="big5" ?>
2. 網頁不需要有xml宣告的可以加上一行註解, 如 <!-- force IE6 into quirks mode -->
3. 使用不加網址的宣告
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
4. 不加任何宣告(非web標準做法, 不建議採用)
最大寬度設定
以下範例將最大寬度設為950px/置中, 當螢幕大於950px的會以這個寬度顯示, 小於950的則以實際螢幕寬度顯示, 例如750寬度的內容自動以750寬度顯示, 不會出現橫向捲軸. 瀏灠器的畫面如下:
1280寬度螢幕(兩邊空白)
750寬度螢幕(不會產生橫向捲軸)
Css寫法如下:
<style>
body {
text-align: center;
padding: 0px;
margin: 0px;
width: 100%;
}
div {
margin: 20px auto;
border: red 2px solid;
max-width: 950px;
width: expression(document.body.clientWidth > 950? "950px": "auto" );
}
</style>
html寫法如下:
<div>
<p>最大寬度測試網頁, 最大寬度測試網頁, …….</p>
</div>
最小寬度設定 (寫法與最大寬度相近)
以下範例將最小寬度設為780px/置中, 螢幕大於780px的話, 內容會隨螢幕寬度延展為滿版, 小於780的則以780寬度顯示, 並出現橫向捲軸, 瀏灠器的畫面如下:
1280寬度螢幕(滿版)
650寬度螢幕(產生橫向捲軸)
Css寫法如下:
<style>
body {
text-align: center;
padding: 0px;
margin: 0px;
width: 100%;
}
div {
margin: 20px auto;
border: red 2px solid;
min-width: 780px;
width: expression(document.body.clientWidth < 780? "780px": "auto" );
}
</style>
html寫法如下:
<div>
<p>最小寬度測試網頁, 最小寬度測試網頁, …….</p>
</div>
最小寬度應用的時機可能是為了維持某些排版或內容呈現的完整性, 不希望隨螢幕縮小產生變動, ㄧ般來說, 最大寬度設定的需求會比較廣些.
2/28/2007
Yahoo YUI 介紹
在2006年12/30日一場「超越Web 2.0在企業之應用」研討會上, "小正正"介紹了Yahoo UI Library (簡稱YUI) 函數庫的應用, 網址為 http://developer.yahoo.com/yui/ , 可選擇"Download YUI" button下載完整的範例. 想做各瀏覽器都正常顯示的css網頁設計可以參考其作法.
函數庫相當於網頁設計的模組(含html/css/javascript), 這些模組分成三大部分:
1. Utilities --> DTML + AJAX 的web應用模組
2. Controls --> 互動式元件模組, 如月曆, 選單, 標籤頁, 樹狀圖等
3. CSS Resources --> 符合各瀏覽器的css 模組設定
第1. 2項比較適合企劃或程式人員在不需製作無障礙網頁的網站或後端操作平台參考
第3項CSS模組值得網頁設計人員研究參考, 這部份再細分成三項:
1. Grid --> 版型設定
2. Font --> 字型/字級/字距設定
3. Reset --> 修改Broswer預設值為0, 使各瀏覽器畫面呈現一致
CSS模組應用有以下幾個步驟: --> 參考網址: http://developer.yahoo.com/yui/grids/
1. Html/Xhtml宣告改為strict, 目的是使所有瀏覽器都用"標準模式"顯示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. 連結3個css, 目的是重設各瀏覽器預設設定
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="fonts.css">
<link rel="stylesheet" type="text/css" href="grids.css">
或改用3者合併式的css
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
3. HTML區塊(CSS)設定
doc為版面寬度設定, 有750px, 950px, 100%三種
hd為Header(頁首), bd為Body(主要內容), ft為Footer(頁尾)
最外層主結構寫法如下:
<body>
<div id="doc">
<div id="hd"><!-- header --></div>
<div id="bd"><!-- body --></div>
<div id="ft"><!-- footer --></div>
</div>
</body>
bd內容區塊則視資料結構有所不同(bd裡面的body內容), 以下範例是上中下/二欄式的寫法
<div id="bd">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
欄位寬度/左右設定寫在doc這一行, 比較完整寫法如下
<div id="doc" class="yui-t4"> <!-- 改變 class 就能改變欄位呈現方式 -->
<div id="hd"></div>
<div id="bd">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
<div id="ft"></div>
</div>
主要變化在 bd 區塊, 可以從 參考網址 http://developer.yahoo.com/yui/examples/grids/
選擇需要的layout 改變bd內容寫法
本範例demo 請參考 http://developer.yahoo.com/yui/examples/grids/example_g.html
Yahoo YUI 函數庫提供企劃, 設計和程式人員直接應用的模組參考, 網站開發流程是從上到下, 從前端到後端, 需要採用那些模組從最初的網站企劃就需要思考了
函數庫相當於網頁設計的模組(含html/css/javascript), 這些模組分成三大部分:
1. Utilities --> DTML + AJAX 的web應用模組
2. Controls --> 互動式元件模組, 如月曆, 選單, 標籤頁, 樹狀圖等
3. CSS Resources --> 符合各瀏覽器的css 模組設定
第1. 2項比較適合企劃或程式人員在不需製作無障礙網頁的網站或後端操作平台參考
第3項CSS模組值得網頁設計人員研究參考, 這部份再細分成三項:
1. Grid --> 版型設定
2. Font --> 字型/字級/字距設定
3. Reset --> 修改Broswer預設值為0, 使各瀏覽器畫面呈現一致
CSS模組應用有以下幾個步驟: --> 參考網址: http://developer.yahoo.com/yui/grids/
1. Html/Xhtml宣告改為strict, 目的是使所有瀏覽器都用"標準模式"顯示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. 連結3個css, 目的是重設各瀏覽器預設設定
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="fonts.css">
<link rel="stylesheet" type="text/css" href="grids.css">
或改用3者合併式的css
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
3. HTML區塊(CSS)設定
doc為版面寬度設定, 有750px, 950px, 100%三種
hd為Header(頁首), bd為Body(主要內容), ft為Footer(頁尾)
最外層主結構寫法如下:
<body>
<div id="doc">
<div id="hd"><!-- header --></div>
<div id="bd"><!-- body --></div>
<div id="ft"><!-- footer --></div>
</div>
</body>
bd內容區塊則視資料結構有所不同(bd裡面的body內容), 以下範例是上中下/二欄式的寫法
<div id="bd">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
欄位寬度/左右設定寫在doc這一行, 比較完整寫法如下
<div id="doc" class="yui-t4"> <!-- 改變 class 就能改變欄位呈現方式 -->
<div id="hd"></div>
<div id="bd">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
<div id="ft"></div>
</div>
主要變化在 bd 區塊, 可以從 參考網址 http://developer.yahoo.com/yui/examples/grids/
選擇需要的layout 改變bd內容寫法
本範例demo 請參考 http://developer.yahoo.com/yui/examples/grids/example_g.html
Yahoo YUI 函數庫提供企劃, 設計和程式人員直接應用的模組參考, 網站開發流程是從上到下, 從前端到後端, 需要採用那些模組從最初的網站企劃就需要思考了
id 和 class 的差異
原文刊載於Sitepoint : http://www.sitepoint.com/article/html-37-steps-perfect-markup/2
第 34. 項 id 和 class 有何差異?
id 是HTML 文件中某個特定元素的單一識別。好比社會安全號碼一樣為這個特定元素提供唯一可辨識的方式。如同二個人不可能擁有同一個社會安全號碼，任二個元素在文件也不可能擁有同樣的id. Ids在頁面中一定是獨特的。
class認定為某個元素有些特性可以與其他元素共享。 一個元素可能同時屬於一個或多個以上class。 用比較貼切的比喻： 一個人可能同時是木匠和護士，而社會上有許多的木匠和許多的護士。 (他們全都有獨特的社會安全號碼)
id和class主要被使用於CSS和JavaScript。 在CSS， id 比class有更高的獨特性，使它容易為一個特定元素訂定特殊的規則。 以JavaScript來說，我們可以用id查找元素
我們指定 id在頁面中至多只能出現一次，例如導覽menu、footer、sidebar等。 我們也可以指定 id在整個網站只出現一次，例如我們想要一個特定圖像擁有特定的CSS規則，或者想以JavaScript操作。
我們指定class到具有共同特徵的元素中，通常透過CSS規則顯示其屬性。
id和class名稱應該儘可能符合「語義」。它應該描述本身是什麼而不是描述外觀像什麼。 因此用 id= "menu" 會比 id=”left” 好，因為萬一menu移動到右邊的話，left就不合適了。id和class名稱容易因為不同專案而變動，html也是。即便如此，我們也不應讓它隨著不同專案變動。
第 34. 項 id 和 class 有何差異?
id 是HTML 文件中某個特定元素的單一識別。好比社會安全號碼一樣為這個特定元素提供唯一可辨識的方式。如同二個人不可能擁有同一個社會安全號碼，任二個元素在文件也不可能擁有同樣的id. Ids在頁面中一定是獨特的。
class認定為某個元素有些特性可以與其他元素共享。 一個元素可能同時屬於一個或多個以上class。 用比較貼切的比喻： 一個人可能同時是木匠和護士，而社會上有許多的木匠和許多的護士。 (他們全都有獨特的社會安全號碼)
id和class主要被使用於CSS和JavaScript。 在CSS， id 比class有更高的獨特性，使它容易為一個特定元素訂定特殊的規則。 以JavaScript來說，我們可以用id查找元素
我們指定 id在頁面中至多只能出現一次，例如導覽menu、footer、sidebar等。 我們也可以指定 id在整個網站只出現一次，例如我們想要一個特定圖像擁有特定的CSS規則，或者想以JavaScript操作。
我們指定class到具有共同特徵的元素中，通常透過CSS規則顯示其屬性。
id和class名稱應該儘可能符合「語義」。它應該描述本身是什麼而不是描述外觀像什麼。 因此用 id= "menu" 會比 id=”left” 好，因為萬一menu移動到右邊的話，left就不合適了。id和class名稱容易因為不同專案而變動，html也是。即便如此，我們也不應讓它隨著不同專案變動。
框格模型技法
這技法起源於IE5/5.5與IE6對css區塊寬度的解譯不同, 目前的IE6, Netscape和Firefox對區塊寬度有相同的解譯模式稱為"標準模式"(standard model).
如果不考慮IE5/5.5的話, 是可以不必理會這種差異, 但是拜Microsoft之賜, 當IE6在Doctype上方加上任何宣告或字眼時, IE6對區塊寬度解譯就會變成IE5/5.5的"相容模式"(quirks model).
這就是為什麼網頁套上程式後, 區塊寬度經常會跑掉的原因, 因為工程師在Doctype上方加上
<?xml version="1.0" encoding="big5" ?>
IE5/5.5與IE6對區塊寬度的解譯到底有什麼不同?
舉一個200px寬度加上10px間距和1px框線的區塊為例:
width="200px", padding="10px", border="1px"
IE6, Netscape和Firefox會對這區塊顯示出 200+10*2(左右間距)+1*2(左右框線)共222px的區塊寬度 --> 間距與框線寬度外加
IE5/5.5則會對這區塊顯示出padding+border共200px的區塊寬度 --> 間距與框線寬度內含
所以當IE6在Doctype上方加上xml宣告或任何字眼的區塊寬度會比原設定少(從"標準模式"變成"相容模式")
如果不在Dectype上方加宣告, 程式仍然可以正常運作, xml宣告也可以寫在<head>裡面.
"框格模型技法"是顧全新舊版IE, Netscape和Firefox的技巧, 雖然在css寬度設定時會比較麻煩, 但是如果要製作各版broswer都相同的網頁就要熟悉這項技法 .
#box { padding: 20px; border: 5px solid #666666; background-color: #cccccc;}
#box { width: 250px; voice-family: "\"}\""; voice-family: inherit; width: 200px;}
html > body #box { width: 200px;}
#box將寬度寫進另一個同名id,
第一行寬度250px是寫給IE5/5.5看的(所以寬度較大).
第二行寬度200px是寫給IE6看的, 因為IE5/5.5讀到 voice-family: voice-family: "\"}\""; voice-family: inherit; 後就不再往下看, 而IE6會以第二個寬度為準
html > body #box 是寫給Netscape和Firefox看的, 因為IE5/5.5/6不支援這種css寫法
(但是IE7已經支援這種寫法, 如果要再專寫一組給IE7看的可以用*+html > body #box)
在Doctype上面加上xml宣告的網站做法還可以再簡化, 所以在設計網頁時就先加好這行宣告, 讓broswer直接以IE5/5.5模式反應寬度.
#box { padding: 20px; border: 5px solid #666666; background-color: #cccccc; width: 250px;}
html > body #box { width: 200px;}
以上是不以IE6的版本做考慮, 因為IE6已經不存在, 就算user的broswer是IE6也會變成以相容模式呈現, 但是html > body #box還是要加上, 用來解決Netscape和Firefox的寬度問題.
如果不考慮IE5/5.5的話, 是可以不必理會這種差異, 但是拜Microsoft之賜, 當IE6在Doctype上方加上任何宣告或字眼時, IE6對區塊寬度解譯就會變成IE5/5.5的"相容模式"(quirks model).
這就是為什麼網頁套上程式後, 區塊寬度經常會跑掉的原因, 因為工程師在Doctype上方加上
<?xml version="1.0" encoding="big5" ?>
IE5/5.5與IE6對區塊寬度的解譯到底有什麼不同?
舉一個200px寬度加上10px間距和1px框線的區塊為例:
width="200px", padding="10px", border="1px"
IE6, Netscape和Firefox會對這區塊顯示出 200+10*2(左右間距)+1*2(左右框線)共222px的區塊寬度 --> 間距與框線寬度外加
IE5/5.5則會對這區塊顯示出padding+border共200px的區塊寬度 --> 間距與框線寬度內含
所以當IE6在Doctype上方加上xml宣告或任何字眼的區塊寬度會比原設定少(從"標準模式"變成"相容模式")
如果不在Dectype上方加宣告, 程式仍然可以正常運作, xml宣告也可以寫在<head>裡面.
"框格模型技法"是顧全新舊版IE, Netscape和Firefox的技巧, 雖然在css寬度設定時會比較麻煩, 但是如果要製作各版broswer都相同的網頁就要熟悉這項技法 .
#box { padding: 20px; border: 5px solid #666666; background-color: #cccccc;}
#box { width: 250px; voice-family: "\"}\""; voice-family: inherit; width: 200px;}
html > body #box { width: 200px;}
#box將寬度寫進另一個同名id,
第一行寬度250px是寫給IE5/5.5看的(所以寬度較大).
第二行寬度200px是寫給IE6看的, 因為IE5/5.5讀到 voice-family: voice-family: "\"}\""; voice-family: inherit; 後就不再往下看, 而IE6會以第二個寬度為準
html > body #box 是寫給Netscape和Firefox看的, 因為IE5/5.5/6不支援這種css寫法
(但是IE7已經支援這種寫法, 如果要再專寫一組給IE7看的可以用*+html > body #box)
在Doctype上面加上xml宣告的網站做法還可以再簡化, 所以在設計網頁時就先加好這行宣告, 讓broswer直接以IE5/5.5模式反應寬度.
#box { padding: 20px; border: 5px solid #666666; background-color: #cccccc; width: 250px;}
html > body #box { width: 200px;}
以上是不以IE6的版本做考慮, 因為IE6已經不存在, 就算user的broswer是IE6也會變成以相容模式呈現, 但是html > body #box還是要加上, 用來解決Netscape和Firefox的寬度問題.
IE7 的bug
在 positioniseverything.net 中所提到IE5/6的bug, 在IE7都已經修正, 唯一還延續著的是 "Escaping Float Bug"
(原文刊載於 IEblog: http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx )
範例: 一個設定黑色外框及邊界的div內, 包覆幾個float left的小正方形div,
正常流覽器顯示的畫面如下:
(原文刊載於 IEblog: http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx )
範例: 一個設定黑色外框及邊界的div內, 包覆幾個float left的小正方形div,
正常流覽器顯示的畫面如下:
但是IE的畫面中, 框線會內縮, 無法正常撐開
提供的修正方法是在設定外框這組div加上以下一段css (或者避免做這種外框或底色的設定)
/* Hides from IE-mac \*/
* html .floatholder {height: 1%;}
/* End hide from IE-mac */
這個範例完整的css寫法如下
(外框設定)
.floatholder {
border: 2px solid #000;
margin: 0 40% 20px 10%;
}
(小正方形設定)
.floatbox {
float: left;
width: 50px;
height: 50px;
margin: 2px;
background: #bb7;
color: #ffd;
text-align: center;
}
(修正的css)
/* hide from IE-mac \*/
* html .hollyhack {height: 1%;}
/* end hide */
(第一行讓IE-mac版隱藏, 第二行設定* html . hollyhack 高度為1%, 第三行為純註解)
範例的html寫法如下:
(參考網址: http://www.positioniseverything.net/explorer/escape-floats.html )
- - > 請注意 ”floatholder” 和 “hollyhack”為二組並存的class, 中間要空一格
<div class="floatholder hollyhack">
<div class="floatbox"><br />Float</div>
<div class="floatbox"><br />Float</div>
……………………………………..
<div class="floatbox"><br />Float</div>
<div class="floatbox"><br />Float</div>
<div class="floatbox"><br />Float</div>
<div style="clear: both;">
</div>
p.s. IE7修正 positioniseverything.net 上所說的bug如下, 可以點進去看範例, 唯一沒修正的就是上面說的"escaping floats", 計畫將來會修正
/* Hides from IE-mac \*/
* html .floatholder {height: 1%;}
/* End hide from IE-mac */
這個範例完整的css寫法如下
(外框設定)
.floatholder {
border: 2px solid #000;
margin: 0 40% 20px 10%;
}
(小正方形設定)
.floatbox {
float: left;
width: 50px;
height: 50px;
margin: 2px;
background: #bb7;
color: #ffd;
text-align: center;
}
(修正的css)
/* hide from IE-mac \*/
* html .hollyhack {height: 1%;}
/* end hide */
(第一行讓IE-mac版隱藏, 第二行設定* html . hollyhack 高度為1%, 第三行為純註解)
範例的html寫法如下:
(參考網址: http://www.positioniseverything.net/explorer/escape-floats.html )
- - > 請注意 ”floatholder” 和 “hollyhack”為二組並存的class, 中間要空一格
<div class="floatholder hollyhack">
<div class="floatbox"><br />Float</div>
<div class="floatbox"><br />Float</div>
……………………………………..
<div class="floatbox"><br />Float</div>
<div class="floatbox"><br />Float</div>
<div class="floatbox"><br />Float</div>
<div style="clear: both;">
</div>
p.s. IE7修正 positioniseverything.net 上所說的bug如下, 可以點進去看範例, 唯一沒修正的就是上面說的"escaping floats", 計畫將來會修正
All bugs on positioniseverything.net except the “escaping floats” bug (which is planned for the future)
Peekaboo Bug
Internet Explorer and Expanding Box Problem
Quirky Percentages
Line-height bug
Border Chaos
Disappearing List-Background bug
Guillotine Bug
Unscrollable Content bug
Duplicate Characters Bug
IE and Italics
Doubled Float-Margin bug
Duplicate Indent bug
Three pixel text jog
Creeping Text bug
Missing First letter bug
Phantom box bug
Peekaboo Bug
Internet Explorer and Expanding Box Problem
Quirky Percentages
Line-height bug
Border Chaos
Disappearing List-Background bug
Guillotine Bug
Unscrollable Content bug
Duplicate Characters Bug
IE and Italics
Doubled Float-Margin bug
Duplicate Indent bug
Three pixel text jog
Creeping Text bug
Missing First letter bug
Phantom box bug
支援各種平台的網站製作方式
W3C已經將手持裝置(Handheld, PDA和Mobile等行動裝置), TV(數位電視), projection(投影機)列入css的支援項目. 相信不久之後, 就可以在同一個頁面設計不同平台需要呈現的樣式, 不用一一開發PDA版, 手機版, 或iTV版的網頁, 只要在<head>連結不同版本的css就可以了. 但是支援的目標只是讓使用者都能存取網站內容資訊, 如文字, 影像, 多媒體物件等, 不代表所有平台都呈現相同畫面.
連結不同平台css只要在media指定支援的媒體形式即可, 寫法如下:
全部: <link rel="stylesheet" type="text/css" href="css/link_all.css" media="all" />
電腦螢幕: <link rel="stylesheet" type="text/css" href="css/link_screen.css" media="screen" />
印表機: <link rel="stylesheet" type="text/css" href="css/link_print.css" media="print" />
手持裝置: <link rel="stylesheet" type="text/css" href="css/link_handheld.css" media="handheld" />
投影機: <link rel="stylesheet" type="text/css" href="css/link_projection.css" media="projection" />
數位電視: <link rel="stylesheet" type="text/css" href="css/link_tv.css" media="tv" />
各平台瀏覽器的css支援情況如以下網址: (目前大多已經支援all, screen和print項目)
http://w3development.de/css/assigning_external_css/link.html
為了製作支援各種平台的網站, 是有必要開始改變一下製作網站的方式, 這是可預見未來2~3年的事, 提早準備應該可以免除很多將來改版時的困擾, 而且小修改就可以做到
1. 使用xhtml標記語言取代html
xhtml已經取代html4.01為目前網頁標記語言的標準, 主要原因是html標記不夠嚴謹, 允許標記沒有開始或結束的寫法(p,br,li等), 造成其他平台可能無法顯示的狀況. 再者是為了和xml銜接. 目前建議使用的標準版本為XHTML 1.0 Transitional.
2. 建立結構化的格式
文字資料的格式由結構化的標記建立, 標記語言結構化是指"根據文意建立文件結構". 有利於上述平台broswer解譯文件內容, 所以使用標記時必須考量標記所代表的意義. 例如標題為<H>, 段落為<P>, 項目條例為<li>或<dt><dd>等. 如果以<br>斷行取代項目條例或是使用<div>取代標記將會導致內容無法結構化, 在不支援css的平台上容易造成閱讀困難, 例如文字閱讀器. 結構化文件範例如下:
<h1>建立結構化標記</h1>
<h2>結構</h2>
<dl>
<dt>Html項目</dt>
<dd>Html 說明文字, html標記應用缺點</dd>
<dt>Xhtml項目</dt>
<dd>Xhtml 說明文字, xhtml標記應用優點</dd>
<dl>
<h2>格式</h2>
<p>以css取代老式的html表格配置, ....... </p>
沒有css情況下, 以結構化標記製作的網頁螢幕顯示為:
建立結構化標記
結構
Html項目
Html 說明文字, html標記應用缺點
Xhtml項目
Xhtml 說明文字, xhtml標記應用優點
格式
以css取代老式的html表格配置, .......
上述方式可以很容易讀出那一句是標題, 那一句是項目條列, 那一句是段落. 相對的, 沒有css情況下, 不結構化的網頁就無法讀出文件格式, 螢幕顯示可能為
建立結構化標記
結構
Html項目Html
說明文字, html標記應用缺點
Xhtml項目Xhtml
說明文字, xhtml標記應用優點
格式
以css取代老式的html表格配置, .......
3. 建立結構與格式各自獨立的css
以css取代html的表格配置, 開發人員可以隨意變更xhtml而不用擔心破壞版面配置, 在建立不同平台的css時也會比較容易轉換. 比較簡潔的寫法是儘量避免為標記加上class, 例如 <h1 class="head">, <h2 class="sub_head">, <dt class="data">, <p class="text1">...... 尤其要避免將slye寫在標記裡面, 例如 <h1 style=" background:background-......">, 這種方式比較浪費客戶端的頻寬
參考範例如下:
<div id="content">
<h1>建立結構化標記</h1>
<div class="news1">
<h2>結構</h2>
<dl>
<dt>Html項目</dt>
<dd>Html 說明文字, html標記應用缺點</dd>
<dt>Xhtml項目</dt>
<dd>Xhtml 說明文字, xhtml標記應用優點</dd>
<dl>
</div>
<div class="news2">
<h2>格式</h2>
<p>以css取代老式的html表格配置, ....... </p>
</div>
</div>
css寫法為:
#content {........}
h1 {........}
h2 {........}
.news1 {........}
.news1 dl {........}
.news1 dt {........}
.news1 dd {........}
.news1 dd a {........}
.news1 dd a hover {........}
.news2 {........}
.news2 p {........}
.news2 p a {........}
.news2 p a:hover {........}
運用上述方式編寫網頁, 將來需開始支援其他平台時, 應該可以避免很多資料轉換這種疲累的狀況了
連結不同平台css只要在media指定支援的媒體形式即可, 寫法如下:
全部: <link rel="stylesheet" type="text/css" href="css/link_all.css" media="all" />
電腦螢幕: <link rel="stylesheet" type="text/css" href="css/link_screen.css" media="screen" />
印表機: <link rel="stylesheet" type="text/css" href="css/link_print.css" media="print" />
手持裝置: <link rel="stylesheet" type="text/css" href="css/link_handheld.css" media="handheld" />
投影機: <link rel="stylesheet" type="text/css" href="css/link_projection.css" media="projection" />
數位電視: <link rel="stylesheet" type="text/css" href="css/link_tv.css" media="tv" />
各平台瀏覽器的css支援情況如以下網址: (目前大多已經支援all, screen和print項目)
http://w3development.de/css/assigning_external_css/link.html
為了製作支援各種平台的網站, 是有必要開始改變一下製作網站的方式, 這是可預見未來2~3年的事, 提早準備應該可以免除很多將來改版時的困擾, 而且小修改就可以做到
1. 使用xhtml標記語言取代html
xhtml已經取代html4.01為目前網頁標記語言的標準, 主要原因是html標記不夠嚴謹, 允許標記沒有開始或結束的寫法(p,br,li等), 造成其他平台可能無法顯示的狀況. 再者是為了和xml銜接. 目前建議使用的標準版本為XHTML 1.0 Transitional.
2. 建立結構化的格式
文字資料的格式由結構化的標記建立, 標記語言結構化是指"根據文意建立文件結構". 有利於上述平台broswer解譯文件內容, 所以使用標記時必須考量標記所代表的意義. 例如標題為<H>, 段落為<P>, 項目條例為<li>或<dt><dd>等. 如果以<br>斷行取代項目條例或是使用<div>取代標記將會導致內容無法結構化, 在不支援css的平台上容易造成閱讀困難, 例如文字閱讀器. 結構化文件範例如下:
<h1>建立結構化標記</h1>
<h2>結構</h2>
<dl>
<dt>Html項目</dt>
<dd>Html 說明文字, html標記應用缺點</dd>
<dt>Xhtml項目</dt>
<dd>Xhtml 說明文字, xhtml標記應用優點</dd>
<dl>
<h2>格式</h2>
<p>以css取代老式的html表格配置, ....... </p>
沒有css情況下, 以結構化標記製作的網頁螢幕顯示為:
建立結構化標記
結構
Html項目
Html 說明文字, html標記應用缺點
Xhtml項目
Xhtml 說明文字, xhtml標記應用優點
格式
以css取代老式的html表格配置, .......
上述方式可以很容易讀出那一句是標題, 那一句是項目條列, 那一句是段落. 相對的, 沒有css情況下, 不結構化的網頁就無法讀出文件格式, 螢幕顯示可能為
建立結構化標記
結構
Html項目Html
說明文字, html標記應用缺點
Xhtml項目Xhtml
說明文字, xhtml標記應用優點
格式
以css取代老式的html表格配置, .......
3. 建立結構與格式各自獨立的css
以css取代html的表格配置, 開發人員可以隨意變更xhtml而不用擔心破壞版面配置, 在建立不同平台的css時也會比較容易轉換. 比較簡潔的寫法是儘量避免為標記加上class, 例如 <h1 class="head">, <h2 class="sub_head">, <dt class="data">, <p class="text1">...... 尤其要避免將slye寫在標記裡面, 例如 <h1 style=" background:background-......">, 這種方式比較浪費客戶端的頻寬
參考範例如下:
<div id="content">
<h1>建立結構化標記</h1>
<div class="news1">
<h2>結構</h2>
<dl>
<dt>Html項目</dt>
<dd>Html 說明文字, html標記應用缺點</dd>
<dt>Xhtml項目</dt>
<dd>Xhtml 說明文字, xhtml標記應用優點</dd>
<dl>
</div>
<div class="news2">
<h2>格式</h2>
<p>以css取代老式的html表格配置, ....... </p>
</div>
</div>
css寫法為:
#content {........}
h1 {........}
h2 {........}
.news1 {........}
.news1 dl {........}
.news1 dt {........}
.news1 dd {........}
.news1 dd a {........}
.news1 dd a hover {........}
.news2 {........}
.news2 p {........}
.news2 p a {........}
.news2 p a:hover {........}
運用上述方式編寫網頁, 將來需開始支援其他平台時, 應該可以避免很多資料轉換這種疲累的狀況了
在頁面上更換css style
原文刊載於 http://www.alistapart.com/stories/alternate/
做法如下:
步驟1. -->
自上述網址下載 styleswitcher.js 檔案放入目錄資料夾, 並在<head>加上
<script type="text/javascript" src="styleswitcher.js"></script>
步驟2. -->
將欲加入的css style 依次列進<head>
第一行stylesheet 為預設的style, 其他alternate stylesheet 為選項style, 然後自定title 名稱(如以下藍字)
<link rel="stylesheet" type="text/css" href="css/index01.css" title="green"><link rel="alternate stylesheet" type="text/css" href="css/index02.css" title="yellow"><link rel="alternate stylesheet" type="text/css" href="css/index03.css" title="purple">
步驟3. -->
內容html選項的寫法如下, 以下的紅字部分需逐一對應步驟2的藍字才能趨動所命名的style
<p> 更換頁面風格 : 【 <a href="css/index01.css" onclick="setActiveStyleSheet('green'); return false;">綠色</a> 】
【 <a href="css/index02.css" onclick="setActiveStyleSheet('yellow'); return false;">褐色</a> 】
【 <a href="css/index03.css" onclick="setActiveStyleSheet('purple'); return false;">紫色</a> 】 </p>
雖然有預設的style, 但因為js檔中有 Cookie 寫法, 下次再開啟時會以上次最後設定的style為style
做法如下:
步驟1. -->
自上述網址下載 styleswitcher.js 檔案放入目錄資料夾, 並在<head>加上
<script type="text/javascript" src="styleswitcher.js"></script>
步驟2. -->
將欲加入的css style 依次列進<head>
第一行stylesheet 為預設的style, 其他alternate stylesheet 為選項style, 然後自定title 名稱(如以下藍字)
<link rel="stylesheet" type="text/css" href="css/index01.css" title="green"><link rel="alternate stylesheet" type="text/css" href="css/index02.css" title="yellow"><link rel="alternate stylesheet" type="text/css" href="css/index03.css" title="purple">
步驟3. -->
內容html選項的寫法如下, 以下的紅字部分需逐一對應步驟2的藍字才能趨動所命名的style
<p> 更換頁面風格 : 【 <a href="css/index01.css" onclick="setActiveStyleSheet('green'); return false;">綠色</a> 】
【 <a href="css/index02.css" onclick="setActiveStyleSheet('yellow'); return false;">褐色</a> 】
【 <a href="css/index03.css" onclick="setActiveStyleSheet('purple'); return false;">紫色</a> 】 </p>
雖然有預設的style, 但因為js檔中有 Cookie 寫法, 下次再開啟時會以上次最後設定的style為style
訂閱：
文章 (Atom)