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"&gt; <!-- 改變 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 函數庫提供企劃, 設計和程式人員直接應用的模組參考, 網站開發流程是從上到下, 從前端到後端, 需要採用那些模組從最初的網站企劃就需要思考了

沒有留言: