顯示具有 CSS 標籤的文章。 顯示所有文章
顯示具有 CSS 標籤的文章。 顯示所有文章

表格的欄位為什麼不對齊

表格的欄位為什麼不對齊

表格的欄位不對齊

Table Display Bug

這是一個舊頁面內容，裡面的本來都很正常。但近來有使用者慢慢更新作業系統或瀏覽器後，發現表格原本被隱藏的欄位在點擊後不會正常排版。各位可以點擊標題測試，如果你是舊IE 6~IE 9，以上測試是正常的。但從IE 10開始，上述表格欄位就會不正常。（包含目前主流瀏覽器都不正常）

閱讀更多 »
標籤： , , , 張貼者： 於 0 意見

實用Sublime Text 2套件整理(2012/12)

Sublime Text 2的延伸套件

文字編輯器在接觸Sublime Text 2之前大多以Notepad++為主，筆記本為輔。不過看過Kevin Tseng的Sublime Text 2系列教學文之後，又花了一段時間來上手，發現Sublime Text 2這個又免費又付費的編輯器，實在是用程式設計師的角度來開發，而不是像一般編輯器是用編輯器的角度來開發，慢慢的喜歡上它，而且它多元化的輔助套件，和Visual Studio的擴充套件一樣，令Sublime Text 2加分不少。

以下整理我由A選到Z的套件，分類為安裝與選用，安裝是我正在安裝使用中的套件，選用是可依個人需求安裝使用。

Sublime Text 2實用安裝套件

  • Package Control

    必啟用，沒有它你就無法安裝擴充套件，快速鍵：Ctrl+Shift+P

    啟用請參考：啟用Package Control

  • BracketHighlighter

    讓你在撰寫如HTML程式碼時，能有高亮度提醒功能。請參考以下官方圖片：

    BracketHighlighter功能說明圖
  • ColorHighlighter

    當的游標移至文字中如"#FFFFFF"，"rgb(255,255,255)"，"white"會自動顯示對應的顏色。當然，用在CSS居多。

閱讀更多 »
標籤： , , , , , , , , , 張貼者： 於 4 意見

Zen-Coding - 教你極速撰寫HTML5與CSS3程式碼

什麼是Zen-Coding？

Zen Coding本身是個外掛程式，官網上的資料，Zen Coding目前可以使用在36套各類HTML與CSS編輯器中，像是Aptana、TextMate (Mac)、Notepad++、PSPad、Dreamweaver、Sublime Text 2、Visual Studio…等常用的編輯器都有支援Zen Coding。

那Zen-Coding的作用是什麼呢？它的目標很簡單，就是利用已有的技術，高速的架構出HTML、CSS、XML、XSL或HAML。什麼是已有的技術，簡單說，它是CSS Selector（CSS選擇器）的再利用。

一些些改變，能帶來什麼呢？

極速

就我使用Zen-Coding它的經驗而言，就算只是簡單拿來產出HTML5或CSS3的程式碼，Zen-Coding也可以非常有效率的加速我寫HTML5與CSS3的速度，加多少，這我很難用言語或文字表示，先看一段影片：

哇!哇!哇!哇!哇!哇!

如果看完沒有跟著哇！那再來一次！

哇!哇!哇!哇!哇!哇!

閱讀更多 »
標籤： , , , , , 張貼者： 於 8 意見

SCSS 語法學習心得筆記

Sass - SCSS 語法初學

在上一篇【在 VISUAL STUDIO 撰寫 SASS(SCSS) 讓您快樂似神仙】中，我們完成了在 Visual Studio 裡開發 SCSS 的設定，這一篇主要是參考【Sass Reference】網站內容與【Sass & Compass: The future of stylesheets now.】簡報內容裡的程式碼做一些註解，未來查詢時方便自我取用。

SCSS 語法:Nesting Rules, 巢狀規則

就那麼簡單: {} 一層，{{}} 兩層，以此類推。在 SCSS 語法裡巢狀規則也很簡單，你就看包幾層的 {} 符號，那就是幾層。

巢狀規則 SCSS 範例

/* 巢狀規則1 */
/* article 與 border-top 一條規則 */
/* article 與 header 一條規則 */
article {
	border-top: 1px dashed #eee;
	header { margin-bottom: 1.5em; }
}

/* 巢狀規則2 */
/* article 與 header 一條規則 */
/* article 與 section 一條規則 */
article {
	header, section { margin-bottom: 1.5em; }
}

/* 巢狀規則3 */
/* article 與 >, ~, +, * 各一條規則(共 4 條規則) */
article {
	> h2 { border-top: 1px dashed #eee; }
	~ article { padding-top: 1.5em; }
	+ footer { margin-top: 0; }
	* { color: #000; }
}

/* 巢狀規則4 */
/* Parent Selector - & 參考父選擇器 */
/* a 一條規則 */
/* &:hover 一條規則 */
a {
	color: blue;
	&:hover { color: red; }
	display: inline-block;
	line-height: 1.8em;
}

/* 巢狀規則5 */
/* Parent Selector - & 新增內容至選擇器 */
/* article 與 h1 一條規則 */
/* .blog-index & 參考(&)父選擇器形成
	".blog-index article"，.blog-index article 與 h1 一條規則
*/
article {
	h1 { font-size: 2.4em; }
	.blog-index & {
		h1 { font-size: 2em; }
	}
}

/* 巢狀規則6 */
/* Parent Selector - & 與 Modernizr 一起運作 */
/* button 與 backgroud 一條規則 */
/* .no-cssgradients & 參考(&)父選擇器形成
	".no-cssgradients button" 一條規則
	
*/
button {
	background: linear-gradient(#444, #222);
	.no-cssgradients & { background: #333; }
}

巢狀規則 SCSS 轉成 CSS

@charset "UTF-8";
/* 巢狀規則1 */
article {
  border-top: 1px dashed #eee; }
  article header {
    margin-bottom: 1.5em; }

/* 巢狀規則2 */
article header, article section {
  margin-bottom: 1.5em; }

/* 巢狀規則3 */
article > h2 {
  border-top: 1px dashed #eee; }
article ~ article {
  padding-top: 1.5em; }
article + footer {
  margin-top: 0; }
article * {
  color: #000; }

/* 巢狀規則4 */
a {
  color: blue;
  display: inline-block;
  line-height: 1.8em; }
  a:hover {
    color: red; }

/* 巢狀規則5 */
article h1 {
  font-size: 2.4em; }
.blog-index article h1 {
  font-size: 2em; }

/* 巢狀規則6 */
button {
  background: linear-gradient(#444444, #222222); }
  .no-cssgradients button {
    background: #333; }

父選擇器碰到子選擇器，就形成一條規則。碰到 &(參考) 就形成一條規則。例如以下 SCSS，

a {
	color: red;
	b {
		color: greed;
		c {
			color:blue;
		}
	}
}

產生的 CSS，

a {
  color: red; }
  a b {
    color: greed; }
    a b c {
      color: blue; }

a、ab、abc 一共三條，這樣清楚了嗎。

閱讀更多 »
標籤： , 張貼者： 於 0 意見

在 Visual Studio 撰寫 Sass(SCSS) 讓您快樂似神仙

Sass(SCSS)的認識

前陣子，透過 demo.tc 認識了正妹 compass.app 這套很棒的軟體。透過 compass.app 的介紹又認識了 Sass (這是辣媽，不信你連進去看)，Sass 為 CSS 提供程式語言等級的功能。CSS 嚴格來說不算程式語言，它本身只是一堆樣式的設定，前後樣式一串一串起來成為串接樣式表，內容更是了無新意【選擇器 { 樣式: 樣式設定};】就這樣，CSS2 到 CSS3 只就增加更多的選擇器、樣式、樣式設定。不過，就像樂高積木一樣，雖然只是積木，但可以千變萬化，這才是它利害的地方。

單純就 *.css 檔案而言，就組織與維護方面實在很弱。不過有了 Sass 之後情況就不同了。Sass 是延伸 CSS3 語法的語法，而且讓我們可以像寫程式語言一樣去撰寫 CSS，Sass 提供了像：

  1. 巢狀規則
  2. 變數
  3. 混合
  4. 選擇器繼承
  5. 函式
  6. 迴圈
  7. 條件
  8. 運算

還有其他更多功能，這些內容你看起來有沒有很熟悉。目前 Sass 分為二個語法版本，舊的是 Sass 語法，新的是 SCSS 語法。Sass 語法與 SCSS 語法差異很小，不過 SCSS 語法合乎 CSS 語法的使用習慣，所以比較建議學習使用 SCSS 語法。

compass.app 是一套 monitor 軟體，它會監控指定目錄(或稱專案)下的 *.scss 檔案，在目錄下有 *.scss 檔案新增或異動時，compass.app 會自動產生及更新對應的 *.css 檔案，透過 compass.app 的幫忙，會自己轉換 SCSS 語法為 CSS 語法，非常方便，方便之中帶點小不便。

在撰寫 SCSS 過程裡，總不能開 Notepad / Notepad++ 來寫 SCSS，這就好像回到十多年前，用 Notepad 寫 HTML 的時代，在已經習慣自動完成這種功能，要使用沒自動完成功能的撰寫任務，我只能說：我回不去了！

犀利人妻之我回不去了
圖片來源：網路

所以我們要為史上最強 IDE Visual Studio 裡加上 SCSS 的開發功能。讓 Visual Studio 強上加強！

閱讀更多 »
標籤： , , , , 張貼者： 於 2 意見

HTML5 完美風暴推薦序

XHTML 騙了我好多年

直到最近，我才知道，原來 XHTML 騙了我好多年，我們寫出來的程式，從來就沒有成為 XHTML 的一天，但一直以為只要我把那非常長的 DOCTYPE 加入，然後使用良好格式(well-formated)來撰寫，並且只要通過 w3 的驗證器認證，就可以大聲說，我很厲害，而且還可以把 w3 官方 XHTML Logo 放在網頁上，以示眾人。

HTML5 完美風暴封面
來源:呂高旭作者點部落 - HTML5 完美風暴封面
閱讀更多 »
標籤： , , , 張貼者： 於 0 意見

2012 A Best Present "Microsoft MVP Award"

我只是一個平凡人，如果我能，你也能。by KKBruce
首先，我一定要感謝我最愛的家人們，不管什麼時候、什麼事，你們都永遠支持我。再來感謝所有幫助過我的人，因為有你們的表率，讓我有學習的對象，讓我有機會成為一位Microsoft MVP。

2012年最棒的一份新年禮物，那就是我當選2012年 Microsoft MVP。

KKBruce Microsoft MVP獎項
圖一：Microsoft MVP獎項
KKBruce 2012 Microsoft MVP獎盃
圖二：2012 Microsoft MVP獎盃

Microsoft MVP得獎感言

我不知道，我是不是很「感覺」的人？為什麼說很感覺呢？從開啟這個KingKong Bruce記事已經快滿5年的時間，除了一些在生活上的感想外，主要有很大一部分是以技術為主的文章內容，在學習這些以Microsoft為主的技術路上，常常覺得這些Microsoft MVP對於技術出神入化，只有嘆為觀止可以形容，常常有那種抬頭看天的感覺，人就是那麼奇怪，想追求平凡又不甘於平凡，我給自己一個夢想，想像有一天我也能成為一位Microsoft MVP。

從有那個夢開始，我慢慢觀察網路上這些Microsoft MVP們，我發現我錯了，這些Microsoft MVP們除有擁有技術外，更重要的是有一顆幫助別人的心，你很難想像，一位未曾謀面Microsoft MVP，使用MSN從頭到尾只和你聊"程式"，有空還會問你說，最近還有沒有什麼新鮮貨(新文章)，害得我想不長進都不行。

還有，當你看到突然有Microsoft MVP跑來你的Blog上指導時，我心想，我只是個無名小卒，怎會讓這些大腳、起大腳(台)的Microsoft MVP願意來我的Blog上指導我，意外之外，我了解到技術非第一，還是那句「有一顆助人的心」。

去年年底，不知道為什麼，我很想、非常想、超級想試試看去申請Microsoft MVP，我就在MSN上問Allen大大一些關於Microsoft MVP資格問題，原來申請Microsoft MVP有二種方式：
  • 毛遂自薦
  • 他人推薦
我是自己寫信去 mvpga@microsoft.com 要申請表格來填寫，不過好玩的事是幾天後，我在Plurk上收到一則私人息訊，發訊者是現任Microsoft MVP 91哥，他問我要不要去申請Microsoft MVP，我又嚇到了，這些Microsoft MVP的通靈能力也太強了吧！我又沒和任何人提過我想申請Microsoft MVP，感謝之餘，更讓我確定要去申請這個Microsoft MVP獎項。

在我寄送出申請表格之後的幾週後，有一天我的E-Mail裡寄來一封信，怎麼是Microsoft MVP的申請表格，一看，原來是我的老師MISLab2000寄來的，我很不意思說我已經寄出申請表格了，不過我心想，看來我的感覺是對的，就是這一次。

身體健康最重要

我要在得獎感言最後寫得病的心路歷程。可以得這個獎，我還感謝我的病「甲狀腺機能亢進」。

約半年多前的幾個月，我變成了超人，因為經常性失眠，這個失眠不是睡不著，而是睡一下下就睡飽了，天未亮雞未啼人已起，起來沒事做，就坐在電腦前看看資料、寫寫文章，所以今年文章的產量非常不錯。

因為平常坐得久，都有在小心控制飲食，就在發病的那一個月裡，我突然廋了十三公斤之多，我才在想怎麼這個月的效果超好，可以把心得拿來出書賺點奶粉錢，就在幾天後的早上，我帶著小花去散步，才走沒多久就覺得不舒服，回到家已經是臉色慘白加喘不過氣。

那個月的平均心跳在140上下，常常感到累而就在我家地板上睡著，選擇在地板上睡是因為很熱，心跳快加上新陳代謝也快，所以那一二個月的時間，我都無法在床上睡覺，醫生說，我那時的新陳代謝就算坐著不動，也是平常人的三~四倍，難怪會廋那麼快。

這讓我想到一位Visual Basic的前輩王國榮，我們那個年代，大概學Visual Basic的沒有一位不拜讀他的作品，後來好像生病引退了。

追求不平凡，要有健康的身體。

申請Microsoft MVP參考資料

  1. 什麼是微軟最有價值專家？
  2. 申請Microsoft MVP報名表
  3. Microsoft MVP常見問題集
標籤： , , , , , , , , , , , , , , 張貼者： 於 2 意見

Visual Studio - 提升Web與CSS開發的流暢度

Visual Studio 2010 與 Usability

老實說，從學習 .NET Framework 2.0 + ASP.NET 2.0 開炲，一直覺得 Visual Studio 2008 是一套很棒的開發工具。到了後來，升級使用了 Visual Studio 2010 之後，更覺得來到了一個不一樣的世界。Microsoft 應該有感覺到我們「程式開發人員」的辛苦，在 Visual Studio 2010 開發工具中有把「Usability」考慮進去。

雖然 Usability 是網頁開發的一個名詞，但其實所有與使用者有互動的內容，都應考慮 Usability，只是考慮多或少。像 Apple 的產品，使用起來只有一個字形容「順」！但，人家背後花了多少的心思在 Usability 之上，才能有今天成功？

回主題，Visual Studio 2010 與 Usability。

在 Visual Studio 2010 新發現系列文章中，我提到過「擴充組件庫」及介紹了幾套當時使用起來感覺很不錯的擴充組件。在「KKBruce的軟體清單」中，也重新整理過。

今天要來介紹一套讓你在開發Web和CSS更流暢、更省時間、更人性的擴充組件。

閱讀更多 »
標籤： , , 張貼者： 於 0 意見

ASP.NET MVC - 即時整合與壓縮網站輸出的CSS及JavaScript檔案

讓網頁有高效率

不知道你有沒有為了
  • SEO
  • 安全性
  • 加速網頁載入
種種的理由，去進行過任何的CSS與JavaScript檔案壓縮的行為。在 YSlow 這套測試網頁執行率效軟體的首頁中，提供一篇「Web Performance Best Practices and Rules」文章，此篇文章針對網頁效率提供了 23 個非常棒建議(註1)。
  1. 減少發出HTTP請求 (Minimize HTTP Requests)
  2. 使用內容分散式網路 (Use a Content Delivery Network (CDN))
  3. 避免空白的 src 或 href (Avoid empty src or href)
  4. 增加過期或Cache-Control標頭(add an Expires or a Cache-Control Header)
  5. 使用Gzip 組件(Gzip Components)
  6. 樣式表(CSS檔案)放在最頂端(Put StyleSheets at the Top)
  7. 腳本(JavaScript檔案)放在最底端(Put Scripts at the Bottom)
  8. 避免 CSS 表達式(Avoid CSS Expressions)
  9. 將 JavaScript 與 CSS 放在外部檔案(Make JavaScript and CSS External)
  10. 減少 DNS 查詢(Reduce DNS Lookups)
  11. 壓縮 JavaScript 與 CSS(Minify JavaScript and CSS)
  12. 避免重導向(Avoid Redirects)
  13. 刪除重複的腳本(JavaScript檔案)(Remove Duplicate Scripts)
  14. 設置 ETags(Configure ETags)
  15. 讓AJAX能快取(Make AJAX Cacheable)
  16. 在AJAX請求中使用 GET 方法(Use GET for AJAX Requests)
  17. 減少DOM元素數量(Reduce the Number of DOM Elements)
  18. 不要有HTTP 404錯誤(No 404s)
  19. 減少 Cookie 大小(Reduce Cookie Size)
  20. 為組件使用 Cookie-free 網域(Use Cookie-free Domains for Components)
  21. 避免過濾器(Avoid Filters)
  22. 不要在HTML裡使用縮放圖片(Do Not Scale Images in HTML)
  23. 讓favicon.ico圖小且能快取(Make favicon.ico Small and Cacheable)

註1：在查詢相關說明資料時發現，Web Performance Best Practices and Rules 文章內不只有 23 個建議，列在 YSlow 上的 23 個建議，應該重點中的重點了。有些看標題就能了解內容，有些則相反，必須去讀內容能才了解，例如，第 20 點的Cookie-free？非常建議花一些時間全部完整看完。如果你對網頁執行效率或是想改善你的網站/網頁，由此為出發點，絕對是個非常好的開始。另外，這篇 Web Performance Best Practices and Rules 文章和另一本 2007 出版的 High Performance Web Sites: Essential Knowledge for Front-End Engineers (中文：網頁加速的14條黃金法則)重複性很高，內容差不多，原因也很簡單，此書作者是曾任雅虎CPO(Chief Performance Officer)，所以 Web Performance Best Practices and Rules 應該是此書的重點整理版本，作者還提供一個測試那 14 條規則的網站http://stevesouders.com/hpws/rules.php，也非常值的一玩。還有，Will保哥也針對 High Performance Web Sites 這本書提供了非常棒的經驗分享「加速前端網頁效能的14條規則」推薦非讀不可。

第2點 CDN 部分，一般網站如果不是成長到一定規模，是不太可能去使用，不過就 Scripts 部分，到是可以使用免費的 CDN 服務。可以參考我的「Microsoft Ajax content delivery network (CDN)」、「Microsoft ajax CDN Domain改名為aspnetcdn」、「jquery-1.4.4-vsdoc.js會讓jQuery無法運作」這幾篇。

借上面的項目，我想要討論的就是第11點「壓縮 JavaScript 與 CSS(Minify JavaScript and CSS)」。其實第9點「將 JavaScript 與 CSS 放在外部檔案(Make JavaScript and CSS External)」可以和第11點一起討論。

當網站開發到一定層度，我們會開始切割CSS檔案及JavaScript檔案以方便管理。

CSS檔案分割範例
例如，原本單一的CSS檔案，我們分割為 reset.css、layout.css、header.css、main.css、footer.css、ie6.css，依每個網站需求規劃而定。

JavaScript檔案分割範例
例如，原本單一的JavaScript檔案，我們分割為ajax.js、cookie.js、dom.js、forms.js、tables.js、validate.js、windows.js、ie6hack.js、ie7.js、ieall.js，依每個網站需求規劃而定。

也就是第9點所討論的內容。我認為，切割最重要的是「縮小問題點」。例如，validate.js，是我常新增、修改、使用的一支 JavaScript，當使用者反應說"驗證"方便有問題時，我馬上知道要去找那一支程式查詢及修改，例如有一次使用者反應，為什麼程式在 Firefox 之下都不會有任何提示，而只有 IE 有？查詢之下，我使用到 IE 專用語法，結果所有 Firefox 都可以在不驗證情況下送出表單，嚇死我了。

網站上線之後

好了，通常那是上線開發之時，那上線之後呢？先看一個討論串「抄很大、抄不用錢」，線上之前。建議進行第11點「壓縮 JavaScript 與 CSS(Minify JavaScript and CSS)」，這方面的線上工具很多，然後進行上線動作。

回到討論串，因為那些 JavaScript 沒有經過壓縮，都是明碼，要了解及看懂內容對有功力的人，不是太難。以 JavaScript 而言，壓縮過程會順便重新編碼過，讓人看懂不容易。如果你辛苦寫了 JavaScript 或 jQuery 的程式碼，不想很容易讓人家複製使用，那請執行壓縮這一步驟。

你可以試著去看 jquery-version.js 與 jquery-version.min.js，兩個 JavaScript 檔案的內容。就會了解我說的意思。

但切割及壓縮CSS與JavaScript檔案容易造成一個問題：「管理不易。」

你可以很方便針對「專案」進行版本控制，但針對大量切割的CSS檔案與JavaScript檔案進行版本控制不太容易。另一重點是，我每次只對針對CSS或JavaScript檔案進行了修改，就必須「重新製作壓縮後的CSS與JavaScript檔案」，然後上傳、覆寫原有的CSS與JavaScript檔案。

或許你能學 jQuery，分為未壓縮 jquery-version.js 與壓縮 jquery-version.min.js，也是不錯，不過那一個 min 很好猜，有心人大概只要把 min 去除，就可以得到未壓縮的原始碼。

這方面我有二個想法：
  1. 讓未壓縮與壓縮檔案命名之間無關聯性，但這又造成「管理更加不易」。
  2. 讓未壓縮與壓縮檔案放在不同目錄之中，且那著目錄命名差異大或無關聯性。但還是一樣，易造成「管理更加不易」。

第二點，例如，jsUnZip與jsZip兩個目錄，關聯性及命名差異不大，也是很好猜。但如果改為kkbruceUUUjs(UUU代表unzip)與kkbruceZjs(Z代表zip)目錄，你只要不要在上線網頁引用kkbruceUUUjs目錄裡的 JavaScript 檔案，我想就很難猜得到。

還是麻煩呀，有沒有更好的辦法？

有，不然我前面廢話連篇做什麼？

閱讀更多 »
標籤： , , , 張貼者： 於 9 意見

XHTML與CSS免費參考資料

Professional XHTML+CSS：網頁設計師的創意與實踐

我有買這本書，寫的不錯，也很簡單入門，雖然是掛Professional，但讀起來很容易進入狀況，不會生澀難懂， 基礎的XHTML到CSS都有完整的介紹，另外它還有一份附件的參考資料，內容整理的很不錯，非常合適拿來複習之用：

目錄：
  • XHTML元素、屬性一覽表
  • 各瀏覽器支援之CSS規則一覽表
  • 各瀏覽器支援之CSS選擇器一覽表
  • 各瀏覽器支援之CSS屬性一覽表
  • 瀏覽器的DOCTYPE Switch
重點是可以免費下載，就算你沒買這本書，但以上的參考還是很棒，不下載太浪費了。

下載：Professional XHTML+CSS：網頁設計師的創意與實踐 -- 附錄參考資料
備份：Professional XHTML+CSS：網頁設計師的創意與實踐 -- 附錄參考資料(for .7z)

Reference：
標籤： , , 張貼者： 於 0 意見

CSS, jQuery -- 動態調整網頁文字大小設計技巧

我們計設網頁時，都必須做一個非常全面的考慮，當字型考慮好了之後，然下來考慮文字的大小。文字對大家影響很大，太小看不清更，看起來吃力，太大又很奇怪，但你面對的使用者又是那種「一種米養百種人」的情況，這個說太大，那個說太小，怎麼辦？

那就要從最開始設計CSS時，就把文字大小的關係處理好，那接下來就可以很輕鬆搞定網頁上文字大小的問題。

基本這問題不難，先首第一步，必須利用CSS的「繼承」關係，由上而下繼承一個「主大小」，然後依各「元素」所需去自訂自己需要的大小，而非由各元素去各自自訂大小。

先看一個各元素去各自自訂大小的範例：

h1 {
  font-size: 24px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 16px;
}

p {
  font-size: 14px;
}

以上這種各自玩各自的遊戲，盡量不要，現在是合作的社會，所以我們來玩繼承合作遊戲：

body {
  /* 一般都會選擇 small 或 medium為主大小；
     small約 12px; medium 約 14px;
  */
  font-size: small;
}

h1 {
  /* 12px * 200% 約 24px */
  font-size: 200%;
}

h2 {
  /* 12px * 160% 約 19px */
  font-size: 160%;
}

h3 {
  /* 12px * 120% 約 14px  */
  font-size: 120%;
}

p {
  /* 12 * 1.5 = 18px  */
  font-size: 1.5em;
}

經由body來設定為主要字型大小，讓以下所有元素去「繼承」這個字型大小的設定，需要改變時，只需要利用「%, 百分比」或「em, 倍」的用法，即可立即享受到繼承的好處，例如，使用者覺得字太小了點，你只需要將body中「font-size: small;」改為「font-size: medium;」那整個網頁就馬上會將字型放大，而且相關的元素也會立即跟著變更，而不用一個一個去調整。

再來，我想讓使用者去手動變更網頁上字型的大小，怎麼做？

jQuery -- 手動讓使用者動態調整網頁文字大小

這邊我透過jQuery示範：

$(function(){
 // 加上flag是為了讓文字有切換的效果
 var flag = false;
 // 在一個input上(id=click)註冊onclick事件
 $('#click').bind('click',function(){
  if (flag){
   $('body').css('font-size','medium');
   flag = false;
  }
  else {
   $('body').css('font-size','large');
   flag = true;
  }
 });
});

其實很簡單，我們只要透過修改body裡的css屬性，將font-size變更，網頁立即產生效果。


學會CSS中繼承關係，你也能有像Yahoo國際水準的功能哦！
標籤： , 張貼者： 於 0 意見

CSS -- 中英文字型家族相關整理

英文字型家族

  1. Sans-serif家族
    Sans-serif家族都沒有截線，可讀性較高。
    • Verdana
    • Arial Black
    • Trebuchet MS
    • Arial
    • Genev
  2. Serif家族
    Serif家族都有截線，比較像印刷體。
    • Times
    • Times New Roman
    • Georgia
  3. Monospace家族
    Monospace家族字母寬度都一樣，適合顯示軟體程式碼之類。
    • Courier
    • Courier New
    • Andale Mono
  4. Cursive家族
    Cursive家族像手寫，適合「標題, h1~h6」之類。
    • Comic Sans
    • Apple Chancery
  5. Fantasy家族
    Fantasy家族像裝飾性風格，但非每台電腦都有，網路上較少使用。
    • LAST NINJA
    • Impact

Windows or Mac?

Windows and Mac可能都有的字型：
  • Andale Mono
  • Arial
  • Arial Black
  • Comic Sans
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana
Mac可能有：
  • Genava
  • Courier
  • Helvetica
  • Times

Google Font API

Google Font API是Google所提供免費的英文字型。可線上載入及使用。

正體中文字型家型

中文字型的選擇就少很多，因為我們使用在網站上，主要目標還是Browser，假設你使用了「華康字型」，網路上其他人的電腦沒有此字型，也是白搭。所以就中文字型而言，在簡體或正體中文網站，就簡單多了，除非Microsoft會透過Microsoft Update去更新字型給所有Windows用戶，不然還是不要想太多，你沒什麼機會在網頁裡就中文字型動什麼花樣。

以大眾市場而言，正體中文就「"標楷體", "細明體", "新細明體","微軟正黑體"」四種，沒了；"微軟正黑體"還算比較新的字型，也不一定所有正體中文電腦都有，所以說是三種也行。

2010/12/07 補充--正體中文及簡體中文font-family設定

/* for China */
    font-family : "宋体", simsun, nsimsun, "黑体", simhei, "楷体", simkai, "仿宋", simfang, Arial, Verdana, "Trebuchet MS", sans-serif;
    
    /* for Taiwan */
    font-family : "新細明體", PMingLiu , "標楷體", DFKai-sb , "細明體", MingLiu , "微軟正黑體", "Microsoft JhengHei" , Arial, Verdana, "Trebuchet MS", sans-serif;

2010/12/27 補充--OS及軟體包含字型查詢網址

  1. Microsoft Typegraphy
  2. MAC OS X:Fonts list
標籤： , 張貼者： 於 0 意見

CSS簡易功能表

實作，實作。

<div id="nav">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Sports</a></li>
</ul>
</div>


body { background-color : #ffdee0;}
#nav { width:200px; font-family : Arial ;} /*寬度與字型*/
#nav ul { list-style-type : none; margin : 0px; padding : 0px;} /*取消樣式*/
#nav li { border-bottom : solid 1px #ed9f9f;} /*li底線顏色*/
#nav li a { display:block ; /*a區塊顯示*/ 
padding : 5px 5px 5px 0.5em;  /* 左邊留0.5em空白*/
text-decoration : none;  /*取消底線*/
border-left : 12px solid #711515; /* 左邊產生12px粗bar*/
border-right : 1px solid #711515;} /* 右邊產生1px細bar*/
#nav li a:link, #nav li a:visited { background-color : #c11136; color :#ffffff;} /*設定:link與:visited的背景與文字顏色*/
#nav li a:hover { background-color : #990020; color : #ffff00;}/*設定:hover背景與文字顏色*/

一個CSS排版的簡易功能表出現。
標籤： 張貼者： 於 0 意見

感謝對正體中文付出的人

在開發網頁的過程裡，可能是我大腦還停在我高中那台486 HD 40MB的等級，常常需要參考其他資料，看過就忘是正常的，所以寫網誌(Blog)是個不錯的方法，就當做是留下筆記資料，要使用時，就上來看看。

今天發現在mozilla的開發者網站中，原來所有的資料都已經有了「正體中文化」， 你只在要畫面上「Languages」選擇「中文(台灣)」就可以切換到正體中文了。雖然這種「科技、技術」類看原文是比較好，但使用自己的母語來學習的話，一定能更快速提升自己的層次。而如果有看不懂的地方，也能回頭去看看原文，這也是一般「翻譯書」所做不到的地方。

ps. 有些不錯的翻譯書會附上原文全文電子檔。 不過就我逛過、看過、買過的書中，很少就是了。

mozilla Web 開發

我自己有翻譯過這種技術文件，我知道難度很高，看了之後很感動，在學習網頁的過程中，這是一個你不可錯過的網站。從HTML、XHTML、DOM、CSS、Javascript、AJAX，一步一步的看，一步一步的學，這裡面的內容都非常實用。

如果你不想花錢買書，或許從這裡開始是個不錯的選擇。也借此感謝一下翻譯文件的人，他們的幸苦讓我能更加輕鬆愉快來學習知識。

我推薦給各位。
標籤： , , , 張貼者： 於 0 意見

CSS margin值的設定

CSS margin


margin : 0;
/*一個值：代表上、下、左、右。margin : 0 0 0 0;的簡寫。*/
margin : 5 10;
/*二個值：值1：上下、值2：左右。margin : 5 10 5 10;的簡寫。*/
margin : 5 10 15;
/*三個值：值1：上、值2：左右、值3：下。margin : 5 10 15 10;的簡寫。*/
margin: 1 10 5 15;
/*四個值：值1：上、值2：右、值3：下、值4：左。*/

margin auto


margin裡的auto通常是拿來「置中對齊」使用。也就是我們將左右邊界值設定為「auto」，讓它產生置中對齊的效果。

/*方法一*/
margin-left : auto;
margin-right: auto;
/*方法二*/
margin : auto;
/*方法三*/
margin : 上下 auto;
margin : 0 auto;
/*方法四*/
margin : 上 auto 下;
margin : 0 auto 0;
標籤： 張貼者： 於 6 意見

簡易Menu導覽(巡覽)列加文章下拉效果

我要來實作一個簡單的Menu導覽(巡覽)列。

一、先首我們準備好HTML內容：


<!--巡覽列-->
    <div id="navigation">
        <div id="container">
            <ul id="firstul">
                <li id="home" class="active"><a href="#" title="Home">首頁</a></li>
                <li id="news"><a href="#" title="讀書心得" id="mynews">讀書心得</a></li>
                <li id="about"><a href="#" title="有關我" id="about_us">有關我</a></li>
            </ul>
            <div id="mypage" style="display: none" align="center">
            </div>
        </div>
    </div>
    <!-- 文章：預設只顯示標題 -->
    <div id="content">
        <span id="title01">數位式競爭--讀書心得</span><br>
        <div id="title01_content" style="display: none;">
            這本書為民國89年出版，已經在我書架上很多了年，是我讀大學時的教科書，老師花了一個學期就只上這本書，當時讀起來沒什麼感覺，頂多只是為了交報告而讀，但很奇怪，它就是一直在我的書架上，雖然十多年來，書架上的書已經換了好幾回，尤其是資訊類的書，換的速度之快連我都怕，不過一本好書一定有存在的價值，不會因為時間的變動而有任何改變。我每天可以說都在與技術文件為「舞」，只是不知是我看它跳還是它看我跳。就這樣有一天，不知為何，好像「它」在跟我招手，然後說，來看看我吧，離上次你讀我已經是九年多前的事了，我能給你一些「明牌」！古人說：「不經一事，不長一知。」你沒有經歷過的事，說再多感受就是有限。但九年後的今天重讀本書，真是感受良多，這本書應該是十年前版的「由A到A+」。我一直很佩服國外的研究學者，能花那麼多時間、精神來研究出原本為「隱性」的知識，讓想要更上一層樓的人可以有方法可循。看完這本書後，讓我心有戚戚，十多年前的故事，現在每天還是在不斷重覆發生，不管是成功的故事，還是失敗的故事。我想這可能是知識的傳遞、了解到最後的落實還有很大一段差距。如果你從事軟體相關產業，而還沒有看過這本書，我非常建議你買來看看（我不知道還買不買的到)。
        </div>
        <span id="title02">The Last Lecture -- 讀書心得</span><br>
        <div id="title02_content" style="display: none;">
            「最後的演講」，是一位父親留給孩子的遺言。沒錯，是遺言。聽起來是個不好的消息，但也因為是遺言，所以他必須認真思考要留下什麼給他的孩子們，他晚婚，他小孩都還小，他有成就，他患癌。最後的演講分為兩個部分，一是演講影片，二是書本。我是先看書再看影片，影片的部份，你可以搜尋「朱學恆」在他的部落格裡有影片檔和中文字幕，影片是免費的。這場演講為什麼會是全世界轟動？我想，除了是作者蘭迪．鮑許（Randy
            Pausch）本身在面對癌症時還能散發不可思義的"樂觀"魅力，還有一種「人之將死，其言也善。」的人生智慧在裡面。人生有方向，是多麼重要及快樂的一件事，首先，是完成自我的夢想，然後是啟發他人的夢想，還可以進一步幫助他人完成夢想。這是Randy教授最後想跟我們說的話。反之，也就是人生一定要有「目標」、要有「方向」，要知道你自己的「路」在那裡。這或許是我喜歡讀些哲學類的書籍關係，思考一件的事的角度之多，或許不是你能想像的，提高看事的高度，提高做事的層度，努力的成就自己，但也不要忘了幫助別人，造成一個良性循環的社會。
        </div>
        <span id="title03">Word of Mouth Marketing--讀書心得</span><br>
        <div id="title03_content" style="display: none;">
            我的信箱中有許多的電子報，每天上班第一件事就開打開信箱，確認一下有沒有重要人士的信件，看看Log信件，看看電子報，其實訂了那怎多的電子報，絕大部份都在1-10秒內被我的食指結束生命，快快的按下那Delete鍵，然後Next。而某天的一封電子報裡刊載的標題讓我有興趣「掃」一下，看完後(很少有認真看完全部)，內容簡潔但又不失內容，後來又收到幾期的內容，一樣，都是很直接也實用的內容，文筆也不會看了想睡覺。這些電子報其實也是行銷手腕的一種，精選幾段精彩的內容，吸引你的注意，如果你也確實被吸引，但因為你只是看到部份的片面，這時就要看這些精彩的內容是否有足夠的吸引內，讓你採取行動，拿出新台幣去換一本有完整內容的書本。而我，被打動了。雖然我不是行銷人員，但我對行銷、管理方面的知識算很有興趣，一樣是動腦的工作，但行銷、管理和程式就是不同。而作者除了提供大量免費實用的做法外，也提供簡單的5個步驟打造好的「口碑」。
        </div>
    </div>


  • 巡覽列：我們先使用ul及li元素配合CSS來做UI的工作。
  • 文章：一開始只會顯示標題，使用者點選標題，才顯示文章內容。

二、巡覽列之CSS


/*ul元素設定*/
#navigation ul
{
 list-style-type : none ;
 margin : 0 auto; /*置中*/
 padding : 0;
 width : 850px;
}

/*讓li"浮"起來，變成"橫向列"*/
#navigation li 
{
 float : left ;
}

/*Menu中a元素設定*/
#navigation a 
{
 float : left ;
 display : block ; /*以「區塊」元素方式顯示*/
 color : rgb(197,197,197);
 padding : 5px 8px;
 margin-top : 10px;
 border-bottom-width : 0;
}

/*li中類別為active的a元素設定*/
#navigation li.active a
{
 color : rgb(255,204,0);
 background-color : rgb(153,153,153);
}

/*Menu中a元素:hover及:active設定 */
#navigation a:hover, #navigation a:active
{
 color : rgb(204,204,255);
 background-color : rgb(100,90,125);
}

/*文章區塊，<div id="content">設定 */
#content
{
 clear : both ;
 width : 850px;
 margin : 0 auto; /*置中*/
 padding : 0;
 background-color : rgb(193,189,204);
}

/* 文章標題，讓jQuery動態加入 */
.newstitle
{
 color :Black ;
 border-bottom : 1px dotted gray;
}

/* 文章內容，由jQuery動態控制  */
.newscontent
{
 width : 50%;
 color : Black ;
 background-color : rgb(255,153,51);
 border : 1px dotted gray;
 padding : 7px 30px 10px 25px;
}

建議一段一段複製，看整個畫面變化的過程，才能了解為什麼這樣設定。

三、jQuery程式碼


再來就是jQuery來設定文章標題樣式及文章內容顯示部份：
$(function() {
    $("#firstul li:eq(0)").removeClass("active"); //先將"首頁"的類別移除
    $("#firstul li:eq(1)").addClass("active");  // 將"讀書心得"設定.active類別
    $("span[id]").addClass("newstitle"); // 文章標題設定

    $("#title01").click(function() { //點擊標題時，
        //文章內容加入.newscontent類別設定
        $("#title01_content").addClass("newscontent").toggle("slow"); 
        //其他非title01的內容，全部hide()
        $("div[id^=title]:not(#title01_content)").hide("slow");
    });

    $("#title02").click(function() {
    $("#title02_content").addClass("newscontent").toggle("slow");
    $("div[id^=title]:not(#title02_content)").hide("slow");
    });

    $("#title03").click(function() {
    $("#title03_content").addClass("newscontent").toggle("slow");
    $("div[id^=title]:not(#title03_content)").hide("slow");
    });
});

這樣我們就完成了一個起簡單版的Menu巡覽列(CSS實作)加上切換文章內容功能(jQuery)的網頁。程式還有很多改進的空間，加油！
標籤： , 張貼者： 於 1 意見

CSS Seletor與jQuery Seletor

在CSS部份，先設計好你所要的樣式，我們這裡舉下載檔案的例子，我們常在網頁上放PDF等類型的檔案讓訪客下載，我們jQuery寫幾行簡單的Code，就可以幫我們處理好全部這類下載的樣式而不用我們一行一行class屬性的設定。
HTML部份：
<a href="kkbruce.blogspot.com" title="KingKong Bruce">Bruce</a> | <a href="KingKong.pdf" title="KingKong PDF file">KingKong PDF</a>

CSS部份：
.pdf {
  background-color: green;
  border: 1px solid #ABABAB;
  color: white;
}

jQuery部份：
$(function(){
  $('a[href$=".pdf"]).addClass('pdf');
  //a[]：屬性過濾
  //$=：結尾是…
  //addClass：加入Class
  //整句話：將a屬性href結尾是.pdf加入Class屬性為pdf
});

或是我們要為網站上的Link設定一個統一的樣式，也可以採用以下寫法，將CSS包在jQuery中：

$(function(){
  $('a[href$=".com"]').css({"background-color": "green",
  "border":"1px solid #ABABAB",
  "color":"white",
  "font-family":'"Verdana", "Courier New"', 
  "font-size": ".93em"});
  //css：加入css設定
  //特性：值
  //整句話：將a屬性href結尾是.com加入css設定(即style屬性)
});

以上只是透過一個簡單的jQuery屬性過濾功能，來針對href來進行過濾及設定。但其實jQuery的選擇器(Selector)是採用CSS Selector，所以相同的東西我們在CSS裡也可以這樣設定：

CSS部份：
a[href$=".pdf"] {
background-color: green;
border: 1px solid #ABABAB;
color: white;
}

這裡我連jQuery程式都沒有寫就完成了我想要的效果。這裡其實我想表達的有兩件事：
  1. CSS能做到的事，不要拿jQuery來開刀。
  2. jQuery就是拿來做有經濟效益的事，如動態效果、程式邏輯、AJAX…等。
標籤： , 張貼者： 於 0 意見

免費CSS編輯器整理及使用心得

　　最近在做一些CSS的工作，我不是美工人員，自認沒什麼天分，但基本的CSS還做的來，尤其是要和jQuery有好的配合，那一定少不了CSS。有感於前一篇「開發工具…」，所以最近也認真複習一下基礎的內容，說是簡單，從大學學網頁開始到現在，複習了以後才知道，原來「規範」又修改了許多，從事程式技術這一途只有一句話，「沒有超人的熱情」那你就快快轉行。

　　我使用一些工具來進行修改、撰寫的工作，PSPad、Notepad++，效果不是很理想，最後我Visual Studio都請出來，才發現使用的Visual Studio 2008 SP1的CSS IntelliSense還不是很健全，都已經是哪麼成熟的產品了，還是老話…大問題沒有，小問題一堆，永遠都有出不完Service pack。

　　想想，這是什麼時代了，網路上應該有「免費又好用」的CSS發開工具或CSS Editor，索性一套一套下載回來玩玩，測試看看，最後整理出下面的列表及心得。

個人評價順序一：純CSS編輯器
  1. Stylizer Basic
  2. TopStyle Lite
  3. JustStyle CSS Editor
  4. Free CSS Toolbox
　　純CSS編輯器裡，Stylizer Basic最好，強力推薦，頂多再加使用TopStyle Lite應該就可以完成絕大多數CSS的工作，用過就知道。

　　註：純CSS編輯器：就只單純撰寫、設定CSS樣式、檢查CSS。簡單說，就是集中火力在CSS上。

個人評價順序二：網頁開發工具
  1. aptana studio
　　這已經比較算網頁開發工具，不是純CSS編輯器，aptana studio使用起來相當順手及簡單。如果你沒有預算買Visual Studio或DreamWeaver之類的開發工具，或你不是寫.NET(就沒必要買Visual Studio)而是寫PHP之類的網頁程式，可以考慮使用aptana。

個人評價順序三：純文字編輯器
  1. PSPad
  2. Notepad++
　　純文字編輯器，這兩個都很棒，但如果是在純文字撰寫、修改網頁方面，PSPad會比Notepad++來好一些，兩者都有內建FTP client連線程式，可以很方便連線到Server做修改的工作，而且PSPad內建一些網頁方面的小工具相當實用，例如顏色方面的工具…等，PSPad的Help也幫忙收集分類了許多網路網頁開發的資源，所以個人比較建議使用PSPad。

純CSS編輯器
  • ｋｋ名次：2
  • 軟體名稱： TopStyle Lite
  • 軟體版本： 3.5
  • 軟體語言： 英文
  • 軟體性質： 免費(另有進階付費版)
  • 檔案大小： 1.45 MB
  • 官方網站： http://www.newsgator.com/
  • 使用心得：　文字型和選擇型兩者之間，在文字輸入時，自動提示功能完整，樣式、樣式值都可以很快速選擇，在選擇時，除CSS 2.1外，還可以直接選擇其他支援類型的CSS：Internet Explorer 7、Outlook 2007…等。而工具最下方有一簡單的預視區，可以即時看到各元素或id或class設定的效果。

  • ｋｋ名次：1
  • 軟體名稱： Stylizer Basic
  • 軟體版本： Basic
  • 軟體語言： 英文
  • 軟體性質： 免費(另有進階付費版)
  • 檔案大小： 9.7 MB
  • 官方網站： http://www.skybound.ca/
  • 使用心得：即見即所得的CSS編輯器，UI、相關設定方式都相當不錯，點選式的CSS編輯器，Stylizer還會偵測使用者電腦中有那些Browser，可以直接在工具中切換Browser看畫面效果，不用一直切換畫面上的Browser，儲存時可以選擇儲存CSS的格式，還有各種視覺化的小功能，小功能裡有個「放大鏡,(Lens)」實在好用，這可是在Adobe CS系列(dreamweaver)才有的功能，可以很方便放大觀看局部區域。強力推薦。個人認為的小缺點：由於是純CSS Editor，所以無法做簡單HTML Code的修改，必須使用其他工具修改原始HTML Code，再來Stylizer看畫面的變化；另外在CSS設定方面，是完全點選設定，沒有可以切換到純CSS Code模式做修改，這是個人習慣問題，應不算缺點，沒有看到Code總覺得怪怪的^.^！[註]Stylizer安裝預設為Ultimate版本(付費)，只有14天試用期，14天後會轉換為Basic版本，Basic會取消大部份功能，所以取消排名。基本功能：只能使用Internet Explorer預覽畫面，CSS簡易設定(一般Keyin輸入)，其他功能全部取消。

  • 軟體名稱： Oiko CSS editor
  • 軟體版本： 1.00 RC3
  • 軟體語言： 英文
  • 軟體性質： 免費
  • 檔案大小： 1.4 MB
  • 官方網站： http://css-editor.info/
  • 使用心得：看似強大，但我實在不太會玩。

  • 軟體名稱： snapcss
  • 軟體版本： 2.1
  • 軟體語言： 英文
  • 軟體性質： open-source
  • 檔案大小： 653 KB
  • 官方網站： http://www.improvingcode.com/snapcss/
  • 使用心得：類似notepad工具，唯一的功能是幫你將CSS排成一行或是多行。不推薦安裝。

  • ｋｋ名次：4
  • 軟體名稱： Free CSS Toolbox
  • 軟體版本： 1.2
  • 軟體語言： 英文
  • 軟體性質： 免費(另有進階付費版)
  • 檔案大小： 1.34 MB
  • 官方網站： http://www.blumentals.net/csstool/
  • 使用心得：純文字類型的CSS編輯器，自動提示功能相當方便，能自動帶出所有樣式設定，但不會自動帶出樣式的各種建議值，有各種快速排序CSS內容的功能。

  • ｋｋ名次：3
  • 軟體名稱： JustStyle CSS Editor
  • 軟體版本： 1.3.3
  • 軟體語言： 英文
  • 軟體性質： 免費
  • 檔案大小： 1.24 MB
  • 官方網站： http://www.ucware.com/juststyle/
  • 使用心得：點選式的CSS編輯器，絕大多數的動作都能使用點選的方式完成，在選擇完Seletor後，右方是所有CSS的樣式值，依你想要的方式選擇或設定即可，還可以很方便幫你直接附加或插入HTML檔案中。網路上相當多人推薦，但我個人試用過後認為Stylizer更好。小缺點：UI小小難看。

  • 軟體名稱： Simple CSS
  • 軟體版本： 2
  • 軟體語言： 英文
  • 軟體性質： 免費
  • 檔案大小： 1.72 MB
  • 官方網站： http://www.hostm.com/css/
  • 使用心得：　免安裝，點選式的CSS編輯器，點選方式比JustStyle更直覺，設定完成後只能進行匯出的動作，設定-->匯出-->看網頁效果-->re-peate，與網頁互動性不足。
網頁開發工具
  • 　軟體名稱： aptana studio
  • 　軟體版本： 1.2.6
  • 　軟體語言： 英文
  • 　軟體性質： Open Source
  • 　檔案大小： 129 MB
  • 　官方網站： http://www.aptana.com/
  • 　使用心得：定位上為網頁基礎開發工具，或是說比較屬於用戶端(Client)的程式開發工具：HTML、CSS、Javascript…，而伺服器端(Server)的開發偏向like-Unix的網頁程式語言，如PHP、Ruby on Rails、Python、Java…等，不像高階開發工具哪麼強大(例如：Visual Studio、Adobe CS系列…)，但在開發工具的相關功能一點都沒有少，自動提示、高亮度…，還與目前各種ajax及javascript函式庫(例如jQuery)做整合，還會自動更新軟體，不失為一個基礎網頁開發的好工具。另外，雖然檔案大小跟其他工具列表比較是大了不少，但如果跟Visual Studio或Adobe CS系列相比，這個算是很小很小。

純文字編輯器

  • 　軟體名稱： PSPad
  • 　軟體版本： 4.5.3 (2298)
  • 　軟體語言： 多國語言
  • 　軟體性質： 免費
  • 　檔案大小： 3.43 MB
  • 　官方網站： http://www.pspad.com/en/
  • 　使用心得： PSPad必備安裝，就不寫了。

  • 　軟體名稱： Notepad++
  • 　軟體版本： 5.3.1
  • 　軟體語言： 多國語言
  • 　軟體性質： 免費
  • 　檔案大小： 2.48 MB
  • 　官方網站： http://notepad-plus.sourceforge.net/tw/site.htm
  • 　使用心得：Notepad++必備安裝，就不寫了。
標籤： 張貼者： 於 4 意見
訂閱： 文章 (Atom)