Getting Started

在下載之前，我們建議你先準備好你的編輯環境，如一個網頁空間及程式編輯工具等等，但最重要的是一個可以設計的美美介面的美工人員。另外雖不需要很強的程式能力，但還是建議能有相關的 jquery 使用的基礎知識。此外在我們這裡不會有太多撰寫程式的討論，如果你都準備好了，那就下載吧，展開UI的神奇之旅。

下載 jquery.NatureFace.js

直接取得 .js 檔案，這個下載不包含其他任何的範本及文件。

Download jquery.NatureFace.js

下載展示包

這個包含了此頁所示範的成果。

Download Demo

NatureFace所有介面都是以圖檔呈現，所以你必須有一些基本觀念，做出來的介面速度及效果才會完美。

1024x768的全黑jpg/png圖多大，壓縮比愈大檔案愈小

一個原本就是MVC架構,何時變得要特別強調，把每個功能畫成圖即是介面?

專業分工 : 專業的人做專業的事，別再叫工程師畫圖了!

我們要需要什麼? button, label, table, popup，message, 好像沒了?

要更炫?擴充,還是原來的能力，你還是可以做你原來想做的事～

NatureFace是一個所見即所得的UI工具，所以你只要畫的出來，就會被忠實的呈現，在此我們準備了三張圖，分別代表START、HOME、HELLO三頁，別客氣！你也可以自己動手作。必須注意圖的大小請依你要呈現於何種裝置的大小相同，雖NatureFace支援resize，但為求最佳品質，其大小不要差異過大。(另外我們建議底圖外，其餘圖檔底色使用透明圖層。)

START頁

是一張全幅的圖檔，做為介面背景圖(362.1kb)。
HOME頁

一張透明底的png圖，並放置了一個icon，還有一些介紹的文字。(18.9kb)
HELLO頁

一張透明底的png圖，並包含二個按鈕及一個文字框。(6.0kb)

這邊我們假設介面是用於手機，其解析度為480x800, 介面功能情境：

顯示START頁, 並同時顯HOME頁元素

點擊HOME頁上的元素切換至HELLO頁

HELLO頁有二個按鈕「Hi」、「返回」及一個文字框

點擊Hi，切換至POPUP頁，即顯示文字框“hello world."

為每張頁進行元素定位，我們使用HTML中常用的MAP標籤來定義元素，你可利用市面上常用的HTML的工具來生成，例如Dreamweaver、KimageMapEditor或線上HTML map編輯工具，並將上述的圖檔進行元素定位，並分別取名為START.html、HOME.html及HELLO.html三個元素定義檔，說明如下所示。

START.html:

<!DOCTYPE html>
<html>
<body>
<!--使用START.png當成介面圖,其大小為480x800-->
<img src="START.png" border="0" usemap="#Map" width="480" height="800"/>
<map name="Map" id="Map">
<!--定素bg元素，範圍為全張圖片, 並位於全域層(layer="", 任何時候皆顯示) -->
<area shape="rect" href="bg" coords="1,1,479,799" layer=""/>
</map>
<page src="HOME"/><!--載入HOME頁-->
<page src="HELLO"/><!--載入HELLO頁-->
</body>
</html>

HOME.html:

<!DOCTYPE html>
<html>
<body>
<!--使用HOME.png當成介面圖,其大小為480x800-->
<img src="HOME.png" border="0" usemap="#Map" width="480" height="800"/>
<map name="Map" id="Map">
<!--定素btnPress元素，位於HOME層(layer)，點擊後切換到HELLO層(layer)-->
<area shape="rect" href="btnPress" coords="1,1,479,799" target="HELLO" layer="HOME"/>
</map>
</body>
</html>

HELLO.html:

<!DOCTYPE html>
<html>
<body>
<!--使用HOME.png當成介面圖,其大小為480x800-->
<img src="HELLO.png" border="0" usemap="#Map" width="480" height="800"/>
<map name="Map" id="Map">
<!--定素txtMessage元素，位於POPUP層，點擊後切換到HELLO層, 文字內容為Hello world.顏色為白色-->
<area shape="rect" href="txtMessage" coords="120,82,396,272" target="HELLO" layer="POPUP" value="Hello world." size="26" color="white" align="middlecenter"/>
<!--定素btnHI元素，位於HELLO及POPUP層，點擊後切換到POPUP層, 按鈕的透明度效果為[0.9,0.7,0.5]-->
<area shape="rect" href="btnHI" coords="46,286,222,376" target="POPUP" layer="HELLO,POPUP" opacity="0.9,0.7,0.5"/>
<!--定素btnBack元素，位於HELLO及POPUP層，點擊後切換回HOME層, 按鈕的透明度效果為[0.9,0.7,0.5]-->
<area shape="rect" href="btnBack" coords="267,286,439,377" target="HOME" layer="HELLO,POPUP" opacity="0.9,0.7,0.5"/>
</map>
</body>
</html>

標籤tag及屬性attribute說明

我們用HTML Map來定義元素，內定的屬性(如href、target)我們重新定義用途外，我們也擴充了許多的標籤及屬性來使用，我們會陸續介紹，點擊「擴充屬性」取得完整的規格。

擴充屬性

完成以上的準備，我們幾乎完成所有的工作了，我們把它全部放至template資料夾，再來就是如何把它載入，並將結果呈現出來，將以上的成果存放在如下的目錄結構：

  root/
  ├── template/
  │   ├── START.png
  │   ├── START.html
  │   ├── HOME.png
  │   ├── HOME.html
  │   ├── HELLO.png
  │   └── HELLO.html
  ├── js/
  │   ├── jquery.1.8.2.min.js
  │   └── jquery.NatureFace.js
  └── index.html

接下來，我們撰寫一個 典型的HTML檔:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<meta charset="utf-8"> 
<script type="text/javascript" src="js/jquery.1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.NatureFace.js"></script>
<script>
$(document).ready(function() { 
    var demo = new NatureFace({
        theme : "START", 
        fullscreen : false, 
        prefix : "template/",
        left : 0,
        top : 0,
        width : 480,
        height : 800,
        firsttarget : "HOME"
    });
});
</script>
</html>

你可看查看這裡的執行結果:

View Demo

有了以上的基礎後，我們認為你應該已了解NatureFace做了什麼事，它利用圖檔來呈現介面，簡單的利用Map來定義UI元件，再透過NatureFace物件來實體化。接下來你要做的是了解更多的元素的定義屬性及NatureFace物件的使用方法，你可前往Document章節進行學習了。

Documents

1. 下載

下載 jquery.NatureFace.js

下載展示包

2. 先有觀念

3. 畫圖吧

START頁

HOME頁

HELLO頁

4. 元素定位及工具

標籤tag及屬性attribute說明

5. 我的第一個介面

接下來呢?