Microsoft很難得出了免費版的 網頁編輯器還外加 手機模擬器
也因為這軟體非常輕量化 編輯網頁還算可以，但是
還是用IIS的伺服系統，之前WampServer用慣了，
所以想說把這兩個搭一起使用。
WebMatrix 有分 2和 3 版
WebMatrix2 是 32bit作業系統使用 xp 至少要sp2 framework2.0以上
載點 : http://www.microsoft.com/web/webmatrix/v2/
WebMatrix3 是64bit作業系統使用 vista win7 以上
載點:http://www.microsoft.com/web/webmatrix/
因為我只有XP所以就用 WebMatrix2 來做示範
首先先到網站去下載
點選Free Download
不過 這套軟體會裝IIS Express
這會跟WampServer的80port衝突 會使WampServer無法正常運作
所以要把WampServer的Apache設定檔打開
Apache--->httpd.conf
打開後往下拉一點 會看到Listen 80
把它改成 Listen 8080
之後請存檔，然後重新啟動 WampServer
啟動完後沒問題的話
可以開啟網頁做一下單機版測試
在網址上打
127.0.0.1:8080 (注意要打上:8080喔)
然後看到Wamp的主畫面 就表是成功了
再來就是安裝 WebMatrix
找到檔案後 點選兩下安裝
確認有無安裝到
安裝好了之後 可以去開啟程式了
開啟程式後
先選擇 開啟站台
再選擇 以資料夾做為站台
之後選擇 在Wamp的資料夾的檔案
如過裡面有 PHP的網頁檔案會出現對話框
按繼續後會開始安裝，但最後會安裝失敗
因為他本身是跑IIS伺服器 沒安裝IIS會安裝失敗
但IIS要付費 所以才會用WampServer免費又好用
之後 點選下圖上的1. 設定
再到右邊的2. 框起來的地方 把原來的port 改成8080連到 Wamp
localhost 等同於 127.0.0.1
在下方會顯示個小訊息 這表示有連結到WampServer
然後在點下方的1.檔案 會在上方2.的地方列出資料夾的檔案資料
可以先選擇你要的網頁檔
再來就是啟用mobile要瀏覽的手機 平板 的模擬器了
一開始先在執行的下方按一下 選新增
之後會有 IPhone、 IPad、 Chrome、 WindowsPhone
* WindowsPhone 需要再64bit的作業系統上才能執行
所以我只好選IPhone
選完後點選安裝，等一下之後 就會有訊息提示
IPhone安裝好後可以來啟動模擬器了
之後會出現一支IPhone手機
網址是剛剛之前設定的 localhost:8080
連到WampServer的主頁上了
*因為WampServer的主頁是PHP的網頁，所以PHP是可以使用的
再來打上檔案的路徑來看成果
有顯示出來 jquery mobile 的網頁了
再來是一些小技巧
按鍵盤上的 Ctrl+R Ctrl+L
可以翻轉手機螢幕喔
按盤上的 Ctrl+1 Ctrl+2
可以切換成iPhone和iPad
結尾:
這網頁編輯器算是很不錯的一個編輯器了
一些 jquery mobile、HTML5、CSS3等
都有支援函數庫 等同於 Dreamweaver CS5以上
但感覺又比DW還要不佔記憶體
重點是"免費"
對於沒有Dreamweaver CS5 又要寫JQM 的人來說
是算很好用的工具了
在APP中，多少都一定會使用到圖片，所以這邊就先教簡單的圖片使用。
1.一開始先去專案的檔案區的res資料夾底下建立一個drawable資料夾
不知道在哪可以在你的專案名稱上按滑鼠右鍵，選Properties(或 Alt+Enter)，之後選Resource就可以看到Location: 路徑
2.把要放的圖片放進去(建議圖檔不要太大，不然很吃模擬器的記憶體)
3.之後回到編輯器上，在專題上按滑鼠右鍵重整，就會多一個drawable資料夾還有圖片
這樣圖片就進來圖庫區，並且也都有建立R.java的ID識別碼，沒有的話請關掉編輯器再重開看看，或是建立時路徑錯誤。
都完成之後就可以開始建立檔案和面版了
首先先建立Layout面版
1.先在左方元件庫，選擇Images & Media類別區裡的ImageView元件
(注意，這是一個圖片元件而不是單純圖片)
2.之後拉到右方的版子上，會出現對話視窗，圖片先隨便選，之後按OK。
之後再加幾顆Button元件，然後再把版面稍為排版一下
版面排版的程式碼，有標記比較要注意的地方。
都排版完之後就建立程式碼，並把所有要用到的元件都給抓到。
先看程式的架構
Tip重點
(1)
int[] imges={R.drawable.a1,R.drawable.a2,R.drawable.a3,R.drawable.a4,R.drawable.a5,R.drawable.a6};
由於R檔的識別碼是屬於整數型態，所以要用整數陣列來裝圖片
R.drawable.a1 因為是在drawable資料夾下，有點像是物件導向。
private p=0 是用來作為旗標值用。
(2)
bt1.setOnClickListener(new mylistener());
bt2.setOnClickListener(new mylistener());
按鈕事件可以設定給它同一個函數，這樣可以不用寫太多函數。
(3)
switch(v.getId())
因為點選Button之後會啟動mylistener()裡面的onClick(View v)，而這個View v就是代表onClick事件處發時的元件id。
case R.id.button1
case R.id.button2
到R檔裡面抓取 元件的id來對應switch的值，判斷是哪顆Button被觸發
這是比較有技巧性的寫法，如果要一個按鈕事件對應一個函數也是可以。
基本架構完成後，就開始寫觸發事件的內容
Tip重點
iv1.setImageResource(imgs[p]);
對iv1圖片元件設定它的圖檔來源，由於已經把圖檔來源都放在imgs[]陣列裡了，所以直接用陣列來取出。
imgs.length-1
因為imgs.length是取陣列長度，但陣列索引值是從0開始，所以要-1。
之後就啟動模擬器看成果
按上一張
按下一張
到最後一張再繼續按下一張
這樣就完成了圖片的基本瀏覽
先建立一個Text1.java主程式，之後再建立一個text1.xml Layout檔，兩者建立完之後，先到Layout建立版面。
版面的排版
注意事項
紅色框框是EditText的輸入格式，在要驗證時，可以省去很多正規表達式。
它的格式都列在上面，也就不多做說明了。
排版的程式碼
版面排版完之後記得要存檔
再來就是主程式的部分
這邊有幾個重點
private EditText et1
這是把EditText做成全域的，因為會離開onCreate()函數，所以要用全域的
private 是私有的，只能在這個Text1類別內使用，讓資料不會被修改。
et1.getText().toString()
這是抓取EditText元件內容的寫法，記得要加後面的toString()，不然會亂碼。
抓出來後本身toString()是字串型態，所以要用字串型態的變數去接取。
完成之後，記得存檔，再到AndroidManifest.xml 改要啟動的主程式名稱
不懂得可以看這一篇
完成畫面
這邊好像不支援中文輸入法，彷間也有一些教學，但SDK版本一更新的話，還要再重新設定，畢竟只是模擬程式而已，不過可以轉成中文介面。
1.先到下圖的地方，點選紅色框框Custom Locale
2.選擇語言
3.之後按Select 'zh_TW'，就完成中文了
這樣中文介面就設定完成了。
Android最基礎，最常用的就是Button元件，所以先教簡單的基本應用
先建立一個主程式Button1.java 和 layout面板 button1.xml (檔案名稱自訂)
先做版面的排版和元件
button1.xml layout版面
這邊可以做 Button元件的修改
background 後面是顏色的編碼。
button1.xml 程式碼
這邊出現黃色虛線不會造成執行影響，是因為名稱是直接輸入的，而不是經由R檔那邊連結的，它會判定不太合邏輯。
Button的主程式碼
函數庫的宣告
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;
重點解說 :
1. Button bt1=(Button) findViewById(R.id.button1);
// Button bt1 建立區域變數bt1，屬性Button。
// findViewById(int)到版面的資源去找介面元件的索引ID，R.id.button1--->是屬於整數int。
2. bt1.setOnClickListener(new mylistener());
// bt1.setOnClickListener() 對bt1設定一個OnClickListener函數點擊事件
// new mylistener() 建立新的函數，函數名稱自訂。
＊ 這邊建立Button的點擊事件是採用 implements 介面實做的方式，也是有其他的方式，但這邊就不多錯介紹了。
3. public class mylistener implements OnClickListener
// 對剛剛建立的新函數 mylistener() 去實做 OnClickListener介面
// 注意要在 public class Button1 extends Activity{} 裡面
Tip : 小技巧
public class mylistener implements OnClickListener{}
//當你打完之後，mylistener底下會乘現紅色虛線，這時可以把滑鼠移過去，
此時會出現下圖
這時可以移進去點 Add unimplemented methods
就會幫你加上 public void onClick(View v) {}的函數了
4. Toast.makeText(Button1.this, "123", Toast.LENGTH_LONG).show();
// 這個Toast很常用，這邊可以做一些訊息提示，也可以用來偵錯。
Tip : 重點
Button1.this 這邊也可以寫作2種
(1) this (需要在本文內 OnCreate()函數內)
(2) getApplicationContext()(在本文以外的地方 離開OnCreate()函數時使用，本文內也可以)
不過用 Button1.this(檔名.this) 或getApplicationContext() 都通吃。
// "123" 為訊息，這邊要字串型態
// Toast.LENGTH_LONG 顯示的維持時間，目前是它內定，也可以輸入秒數(單位: 1/1000秒)。
// .show() 這樣它才會顯示在螢幕。
顯示結果
