Eclipse系列工具中文化

//文中圖片是已經中文化過，因此圖片中已經可以看到中文

1.先確定開發工具所用的Eclipse版本 

• 打開About面板Help -> About

• 點擊Eclipse圖示

• 確定Eclipse版本，下圖為3.62

2.到Eclipse官方，查詢Eclipse版本代號

• 得知3.6為Helios

3.至Eclipse Babel Project Downloads

• 可以找到Helios的語言包路徑http://download.eclipse.org/technology/babel/update-site/R0.9.1/helios

4.安裝語言包

• Help -> Install New Sofware

5.Work with 欄中填入語言包下載位置

• 找到Bable Language Packs in Chinese(Traditional)將其打勾，按下Next，依循安裝指示即可完成。

6.更改IDE安裝路徑中的組態設定檔

• Aptana Studio3 為  AptanaStudio3.ini
• FlashBuilder為FlashBuilder.ini

在ini設定檔中加入以下設定，並重新開啟即看見套用的語言介面:

//顯示繁體中文

-nl

zh_TW

//顯示簡體中文  ，當然簡中的話你必須先安裝對應的語言包。

-nl

zh_CN

//顯示英文

-nl

en_US

PS.所有Eclipse為基底的開發工具都可使用

CSS text-shadow + ShlideBar

CSS text-shadow + HTML5 SliderBar
參考資料
CSS Text Level 3
HTML5 Presentation (在裡面有一篇Shodw,可以觀看他的原始碼參考做法,在2599行)
切割法

這是一個簡單的sampe,實際運用，必須用javaScript動態設定抓取css的值給slider的value做初使化才會同步。



0

陰影效果

x= 0 y= 0

<style type="text/css">
#shadow_demo_001
{
 /*text-shadow: x offset y offxet radius*/
 text-shadow: 0px 0px 3px #674ea7;
}
</style>

<span id="_outputValue">0</span>

<input id="_sliderBar" max="30" min="0" type="range" value="0" />

<script type="text/javascript">

$(document).ready(start);

function start()
{ 
 $('#_sliderBar').change(showValue);
}

function showValue(value)
{  
  var newValue = $(this).val();  
  
  //切割css   
   var result = $('#shadow_demo_001').css('text-shadow').match(/(-?\d+px)|(rgb\(.+\))/g);
   //var shadowsX = result[1];  
   var shadowsX  = newValue + 'px';
   var shadowsY = result[2];
   var shadowsSsize = result[3];
   var shadowsColor = result[0];
   var newShadow =  shadowsX +" "+ shadowsY + " " + shadowsSsize + " "+ shadowsColor;  
  
  //更新css
  $("#shadow_demo_001").css({'text-shadow': newShadow})
  //更新<span>的內容
  $("#_outputValue").html(newValue);
}
</script>

<h1>
　<span id="shadow_demo_001">陰影效果</span>
</h1>

CSS3 Borders - border-[top or bottom]-[left or right]-radius

CSS3 module: Border (選擇其中一角做圓角)
參考資料：W3C module Border

border-top-right-radius:10px;

border-top-left-radius:10px;

border-bottom-right-radius:10px;

border-bottom-left-radius:10px;

<style type="text/css"> 
.classBorderB
{
 width:220px;
 height:50px;
 background-color:LemonChiffon;
 border:1px solid LightSkyBlue;
 margin-top:5px; 
 margin-left:10%; 
 margin-right:auto; 
 margin-bottom:20px; 
}

#testDiv1
{
 border:2px solid;
 border-top-right-radius:10px;
 -moz-border-top-right-radius:10 /* Firefox */
 -webkit-border-top-right-radius:10 /* Safari and Chrome */
 -o-border-top-right-radius:10 /* Opera */
}
#testDiv4
{
 border:2px solid;
 border-top-left-radius:10px;:10px;
 -moz-border-top-left-radius:10px; /* Firefox */
 -webkit-border-top-left-radius:10px; /* Safari and Chrome */
 -o-border-top-left-radius:10px; /* Opera */
}
#testDiv2
{
 border:2px solid;
 border-bottom-right-radius:10px;
 -moz-border-top-right-radius:10 /* Firefox */
 -webkit-border-top-right-radius:10 /* Safari and Chrome */
 -o-border-top-right-radius:10 /* Opera */
}
#testDiv3
{
 border:2px solid;
 border-bottom-left-radius:10px;
 -moz-border-bottom-left-radius:10px; /* Firefox */
 -webkit-border-bottom-left-radius:10px; /* Safari and Chrome */
 -o-border-bottom-left-radius:10px; /* Opera */
}

</style>
<div class="classBorderB" id="testDiv1">border-top-right-radius:10px;</div>
<div class="classBorderB" id="testDiv4">border-top-left-radius:10px;</div>
<div class="classBorderB" id="testDiv2">border-bottom-right-radius:10px;</div>
<div class="classBorderB" id="testDiv3">border-bottom-left-radius:10px;</div>

CSS3 Borders - Style

CSS3 module: Border Style
參考資料：W3C module Border

dotted

dashed

solid

double

dot-dash 效果出不來

dot-dot-dash 效果出不來

wave 效果出不來

groove

ridge

inset

outset

CSS3 Borders - radius

CSS3 module: Border
參考資料：W3C module Border

border-radius

<style type="text/css">
.divClass
{
 width:200px;
 height:50px;
 background-color:LemonChiffon;
 border:1px solid LightSkyBlue;
 margin-top:5px; 
 margin-left:10%; 
 margin-right:auto; 
 margin-bottom:5px; 
}

#testDiv1
{
 border:2px solid;
 border-radius:10px;
 -moz-border-radius:10px; /* Firefox */
 -webkit-border-radius:10px; /* Safari and Chrome */
 -o-border-radius:10px; /* Opera */
}
</style>
<div class="ClassRadiusA" id="testDiv1">border-radius</div>

CSS3 transform:rotate( deg )

CSS3目前有支援的瀏覽器

• Firefox
• Safari
• Chrome
• Opera 

IE8需要透過其他外掛套件來支援，IE9會開始支援HTML5與CSS3

這是div

這是div1,旋轉90deg,與Flex不同,基準點不是左上旋轉。

這是div2,連字也會旋轉,轉45

我們可以看到CSS3旋轉的點是以DIV的中心為基準

HTML+CSS3碼

<style type="text/css"> 
.divClass
{
width:200px;
height:100px;
background-color:LemonChiffon;
border:1px solid LightSkyBlue;
}
div#_rotate_1
{
transform:rotate(90deg);
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}

div#_rotate_2
{
transform:rotate(45deg);
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
}
</style>

<div class="divClass">
 這是div
</div>
<div class="divClass" id="_rotate_1">
  這是div1,旋轉90deg,與Flex不同,基準點不是左上旋轉。</div>
<div class="divClass" id="_rotate_2">
  這是div2,連字也會旋轉,轉45
</div>

參考資料
維基百科webkit
w3Schools

head element

head element，用以描述當前HTML文件內容，如文件的標題、關鍵字，也許作用於搜索引擎，以及其他數據，但不包含文件的本文內容，在head中是不會有可繪製的視覺元素，在head內可用的有<title>、<base>、 <link>、<meta>、<script>、 <style>。

• base：可以設定HTML文件內預設的href以及target
• href的值：URI
• target的值：_blank、_parent、_self、_top、framename。
• 若使用<a>、<img>、<link>、<form>之類的元素若他們URL未設定，就會使用預設的url。

• link：用於連接外部資源檔案，最常見的是CSS樣式表，如：

<link href="styleFile.css" rel="stylesheet" type="text/css"></link>

• style：HTML檔內定義樣式，如：

<style type="text/css">
.demoBackground{background:#DAFFEC}
</style>

//結果

div background is #DAFFEC

• script用以在HTML本文中使用script或是引用外部script程式語言檔，如：

//結果(直接在HTML文檔裡寫入javascript)
<script type="text/javascript">
//javaScript撰寫於此
</script>

//引用外部javaScript

<script type="text/javascript" src="javaScriptFile.js"></script> 

• meta使用範例，meta是一名值對(name/content)

<meta name='keywords' content='Flex,flash,學習筆記'/> 
<meta name='author'   content='JT'/> 
<meta name="date"     content="2011/05/24">
<meta name='robots'   content='all'/> 

//http-equiv可以在HTTP的表頭內帶入資訊。

<meta http-equiv="charset" content="utf-8">
<meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

//will result in the HTTP header(HTTP回傳表頭將會):

content-type: text/html
charset:utf-8
Expires: Tue, 20 Aug 1996 14:25:27 GMT

引用與參考資料
w3cSchool：
head元素
link元素
style元素
script元素
meta

W3C官方：
7.4.1 The HEAD element
7.4.4 Meta data