網站架設網頁設計教學

網頁設計技巧－文字排版

我們在做網頁的時候會發現：自己畫的圖也不錯，自己做的佈局也很精緻，做的圖示也很漂亮，第一眼看起來都覺得很漂亮，但是看看就覺得不舒服，也不清楚為什麼……

這裏我告訴你，也許就是你的排版出現問題了。頁面排版不合理產生的視覺效果會讓讀者的眼睛產生的疲勞感，基本的毛病在於「字間距太擠或太寬」、「行距太小或太大」、「段距太少或太多」、「每行字數太多或太少」等這幾個常見因素。大家可以從下面的圖示和講解內容中看出差別，同時我會給大家一個相對照較好的參數供大家參考。當然設計本來就不要太過拘泥，我所提供的都是一般性的提議，不同網站不同對待，不要過於拘泥我所給大家的一些參數。

下面我們用圖例來說明。大家仔細看下面第一張圖，前三個圖是行距的問題，後兩個是字數的問題。

行距的問題

第一個太擠了，都粘在一起了，這樣眼睛在看這個文字的時候會需要花點時間去分辨，這樣的排版會讓讀者看得很累。很不舒服。大家看一下自己手頭上所做文字的是不是太擠了，如果是那就改一下吧!

第二個是比較適中的，由於每行分得很清楚，這樣看起來有很強的識別性。

第三個是比較寬的，鬆了一點，這樣看起來也很清楚，但是當你的文章不是一兩行而是十幾行與幾十行的時候你就會覺得文章的連貫性產生了很嚴重的脫節，一般排版不會越過兩個字型高度(2em)。

字數的問題

下面兩個圖是字數的問題。第四個每行文字太長，這樣看起來頭要搖來搖去，這樣讀者更容易顯得很累。因為要不斷的轉動頭，或是讓眼球不斷的左右擺動。最舒服的模式就是讀者一眼看上去就能把一行看完，不然從行末到下一行行首也會形成斷裂感。

而下面的又太扁了，這樣看起來也不是很舒服。由於在不斷的換行閱讀，眼球也會覺得不舒服。推薦的最好字數是： 不大於45個字母，不大於30個漢字。

學員來信諮詢：
總教頭您好！ 請問您
我按照教學安裝phpBB3
成功完成安裝後要進入phpBB3登入畫面時出現
一般性錯誤
Could not get style data
是我那裡出現錯誤了
謝謝！
————————————–
總教頭技術回覆：
phpBB3「could not get style data」解決辦法
1. 刪除phpbb安裝資料夾下面的cache資料夾裡所有php檔案
2. 如果是linux主機，還需要 把cache的權限設定為777

Windows 7還沒滿月！傳『微軟』2012年推128位Windows 8

【賽迪網訊】11月25日訊息，根據微軟上周舉行的專業開發者大會(PDC，ProfessionalDevelopers'Conference)透露的發展規劃，
公司將於2012年推出新版操作系統Windows8。
儘管微軟尚未公開討論推出Win8的計劃，但目前傳出的2012年時間點，符合微軟每3年推出一新操作系統平台的規劃。
微軟1個月前才推出新操作系統Windows7。
據國外媒體報道，何時推出Win8的訊息，是由討論微軟的部落格《微軟廚房(MicrosoftKitchen)》上一篇名為「Windows8:MoreRoadmaps」的發文揭露。
該部落格號稱「提供真正有料的微軟訊息」(ServingupsomeseriouslytastyMicrosoft)。
不過除了微軟發展規劃以外，該文並未提供其它Win8的進一步訊息。
儘管如此，《PCWorld》報道，微軟員工RobertMorgan上個月在產業社交網站LinkedIn上，似乎不小心洩漏了Win8的關鍵特色，透露微軟計劃推出128位(128-bit)版本，甚至規劃推出Windows9。
Morgan在LinkedIn上顯示的職務是「資深研發人員」，其個人檔案已自LinkedIn移除，原本內容透露他任職於「與中長期策略規劃關聯的高度安全性研發部門」，而其工作計劃內含「與Windows8核心及Windows9計劃相容的128位架構」，以及「與主要夥伴建立合作關係，內含英特爾、AMD、惠普及IBM」。

安裝 Xoops utf8 版本模組時.
當然 Mysql用utf8編碼卻『發生亂碼』的解決方法

自己有獨立主機，還沒有發生『亂碼』的問題
今天在『虛擬主機』幫客戶安裝XOOPS2的模組，卻發生『亂碼』

用PHPMyAdmin進入資料庫一看：哇！資料庫校對是：latin1_swedish_ci

難怪會發生『亂碼』的事件！

各位下載了 Xoops utf8 版安裝後, 一定會發現資料庫儲存是
latin1_swedish_ci 的格式, 而不是 utf8_unicode_ci 嗎？

A. 當你要安裝新 module 時, 全部都要作第一步驟。
B. 升級新版 Xoops 時, 要確定第二步驟內三行指令還在。
不然就會出現問題! 如: 選 變成 口 , 而且 phpmyadmin
看到都是亂碼了!

我解決方式如下：

在安裝模組的：sql 目錄
  mysql.sql
在每一個 CREATE TABLE 的底下

找到:
—————-
ENGINE=MyISAM;
—————-
改成:
—————-
ENGINE=MyISAM CHARACTER SET utf8 COLLATE utf8_unicode_ci;
—————-

先將發生亂碼的模組反安裝（移除安裝）
再將已經修改好的mysql.structure.sql上傳覆蓋之！

再次安裝模組，這樣就OK啦！
希望這篇文章日後有人也因此而獲得解決！

筆者網站寫文章，就是分享自己的經驗（給日後需要的你！）

超連結不停變換彩色的JS代碼

超連結不停變換彩色的JS代碼,很漂亮.
使用方法,將下列代碼放到網頁的任意地方就可以了.

<SCRIPT language=JavaScript type=text/javascript>
//超連結不停變換彩色的JS代碼
var rate = 20;
var obj;
var act = 0;
var elmH = 0;
var elmS = 128;
var elmV = 255;
var clrOrg;
var TimerID;
if (navigator.appName.indexOf("Microsoft",0) != -1 && parseInt(navigator.appVersion) >= 4) {
Browser = true;
} else {
Browser = false;
}
if (Browser) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
function doRainbow()
{
if (Browser && act != 1) {
act = 1;
obj = event.srcElement;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (Browser && act != 0) {
obj.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (Browser && act != 1) {
obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (Browser && act != 0) {
if (obj.tagName == 'A') {
obj.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
obj.style.color = makeColor();
}
function makeColor()
{
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 – elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 – t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 – t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 – t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 – t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR);
elmG = Math.floor(elmG);
elmB = Math.floor(elmB);
clrRGB = '#' + elmR.toString(16) + elmG.toString(16) + elmB.toString(16);
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return clrRGB;
}
// –>
</SCRIPT>

網站如何使用.htaccess禁止盜鏈（防止搭順風車）

許多網站因為自身的性質，要應用到很多圖片。
隨著網站訪問量的上升，大量的圖片檔案對伺服器頻寬的佔用日趨嚴重，而其他網站對圖片的盜鏈則更雪上加霜。
如果說其他網站不加說明不注出處地對我們內容的複製讓我們鬱悶的話，這種圖片的盜鏈則更過份：複製內容雖然在某種程度上可以說是剽竊我們的勞動成果，但畢竟對網站本身沒有太大的傷害，而圖片盜鏈則讓頻寬被無任何回報地佔用，影響網站的訪問速度。

我們對此的反應也只是為圖片加入水印，加上我們網站的位址，希望這一方面能讓盜鏈者有所忌諱，另一方面即便被盜鏈，希望能有使用者循此找到我們網站。

這時候便不由自主地地感歎起伺服器平台選取的重要性來了，如果在Linux + Apache下，想要防止類似的盜鏈是相當簡單的。

下面簡單介紹一下筆者之前在Linux + Apache平台下防止圖片被盜鏈的設定方法，希望能對同樣面臨圖片盜鏈問題，
伺服器基於Linux + Apache的朋友有所說明。

註：1、本文雖然談的是防止圖片盜鏈的問題，但設定也同樣適用於其他非Html類型的檔案，比如說下載網站的防盜鏈，只需將下面設定中的檔案類似由gif、jpg變更為相應的zip或rar即可。

Apache中的.htaccess檔案
.htaccess檔案(或是」分散式配置檔」)是Apache中相當重要的配置檔，其格式為純文字，它提供了針對目錄改變配置的方法，通過在一個特定的文件目錄中放置一個包括一個或多個指令的檔案，以作用於此目錄及其所有子目錄。

通過.htaccess檔案，可以實現簡單地很多在IIS中很繁瑣甚至無法實現的功能，如密碼保護、禁止顯示目錄清單、阻止/容許特定的IP位址、實現網址的301 重定向等。

正如上面所說， .htaccess檔案將影響其所在的目錄及其子目錄，因此，如果我們要保護的內容(此處以防止圖片盜鏈為例，即圖片)位於網站內多個目錄下，可以考慮將其放在根目錄下；而如果圖片有單獨的子目錄如「/images/」，則只需將其放置在該目錄下。

需要注意的是，如果通過FTP模式將建立好的.htaccess上傳到伺服器上，傳輸模式應為ASCII而非Binary。上傳到伺服器後，應將其屬性通過CHMOD修改為644 或「RW-R–R–」，這樣，可以保證伺服器能夠使用同時無法通過瀏覽器修改，當然，.htaccess的可讀屬性也存在一定的風險：攻擊者可通過它找出您要保護的對象或認證檔案位置——解決辦法是將認證檔案.htpasswd放到網站根目錄之外，這樣，便無法通過網路找到它了。

使用.htaccess禁止盜鏈
通過.htaccess來防止網站的圖片、壓縮檔、或視訊等非Html檔案被盜鏈的方法相當簡單，通過在.htaccess檔案中加入幾句指令即可保護我們寶貴的頻寬。

通過.htaccess來防止網站的圖片、壓縮檔、或視訊等非Html檔案被盜鏈的方法相當簡單，通過在該檔案中加入幾句指令即可保護我們寶貴的頻寬。
設定如下：

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http://itlore.cn/.*$ [NC]

RewriteCond %{HTTP_REFERER} !^http://itlore.cn$ [NC]

RewriteCond %{HTTP_REFERER} !^http://www.itlore.cn/.*$ [NC]

RewriteCond %{HTTP_REFERER} !^http://www.itlore.cn$ [NC]

RewriteCond %{HTTP_REFERER} !^http://itlore.ch/.*$ [NC]

RewriteCond %{HTTP_REFERER} !^http://itlore.ch$ [NC]

RewriteCond %{HTTP_REFERER} !^http://www.itlore.ch/.*$ [NC]

RewriteCond %{HTTP_REFERER} !^http://www.itlore.ch$ [NC]

RewriteCond %{HTTP_REFERER} !^http://blog.itlore.ch/.*$ [NC]

RewriteCond %{HTTP_REFERER} !^http://blog.itlore.ch$ [NC]

RewriteRule .(gif|jpg)$ http://botu.bokee.com/photodata2/2008-3-30/001/168/952/14901157_gif/14901157_h.jpg [R,L]

簡單的解釋一下上述語句：

1、RewriteCond %{HTTP_REFERER} !^$ [NC]

容許空「HTTP_REFERER」的訪問，即容許使用者在瀏覽器位址欄中直接輸入圖片位址時圖片檔案的顯示。一般而言，這是可選的，不過，建議這麼設定，如果強迫必須具有「HTTP_REFERER」才能訪問，可能會帶來某些問題，比如說在使用者通過代理伺服器訪問時。

2、RewriteCond %{HTTP_REFERER} !domain.com [NC]

設定容許訪問的HTTP來源，內含我們的站台自身、Google、Baidu、Bloglines、Feedburner等。

3、RewriteRule .*.(gif|jpg|png)$ http://domain.com/no.png [R,NC,L]

定義被盜鏈時替代的圖片，讓所有盜鏈 jpg、gif、png 等檔案的網頁，顯示根目錄下的 no.png 檔案。注意：取代顯示的圖片不要放在設定防盜鏈的目錄中，並且該圖片檔案體積越小越好。當然你也可以不設定取代圖片，而是使用下面的語句即可：

RewriteRule .*.(gif|jpg|png)$ – [F]

4、說明一下其中的R、NC 和 L

R 就是轉向的意思
NC 指的是不區分大小寫
L 的作用是指明本次轉向到此結束，後續的轉向不受先前判斷語句的影響

5、防止盜鏈的檔案類型

上例中是 gif、jpg、png，而根據需要，可變更或加入其他檔案類型，如rar、mov等，不同檔案副檔名間使用「|」分割。

這樣的話，就可以基本做到簡單的防止被盜鏈情況的發生，而且可以盡最大可能的減少伺服器流量的無畏消耗，當然了，如果你不在意這點流量的話，那麼可以不用考慮上述設定啦！

什麼是whois？
    
透過 WHOIS 可以查到網域名稱註冊人的基本資料。

以.TW WHOIS 資料庫來說，資料包括有您在註冊時所提供之中英文資料（網域名稱、申請人姓名、電話、傳真、電子郵件、申請日期、有效日期、DNS 設定資料），但為了保護隱私權，又區分註冊人為個人或非個人而擇定部分中英文資料，讓註冊人自行選擇是否提供給外界查詢。

因此在註冊的過程中，您可以自行選擇是否開放「申請人中文姓名」、「申請人中文地址」給 WHOIS 查詢。若是個人用戶申請還另有「申請人聯絡電話」的開放選擇。

WHOIS 資料庫的設置目的，是基於國際網路社群慣例及維護消費者權益、保護智慧財產權與執行法律等公共利益之考量而設置。除依法律規定、法院命令或相關主管機關依法以書面申請，台灣網路資訊中心及受理註冊機構不得提供與第三人使用。

特別說明，WHOIS 中以電子郵件這一項最可能影響到您的權益，在註冊後或是網域名稱到期前，我們會透過您所留的email寄發通知信給您，因此請務必維持 email 的正確性。

另外，一旦若有第三者檢舉註冊資料不符合申請域名的條件時，例如在台灣申請 com.tw 必須為公司行號，此時註冊單位可以要求註冊人補正資料。

維持註冊資料的正確性，是每個註冊人要依循的規則。

國際域名的部分，也一樣有 WHOIS 資料庫的設置，其設置目的與上述說明相同。

火狐瀏覽器 Firefox 6.0 要『檢視原始碼』該如何操作？

網頁設計者通常會另外安裝火狐瀏覽器 Firefox或其他瀏覽器與IE一起交換使用。
因為這樣才可充分理解同樣的設計網頁在不同的瀏覽器上顯示有何差異？
設計網頁當然不是：設計自己爽的（不管網路瀏覽者看到的是否與原設計相同？）
此外，有在弄網站排名SEO的網站站長或網頁設計者，還會有一個習慣動作：在瀏覽網頁時，點擊：『檢視原始碼』
來觀察『原始網頁程式碼』，看一下網頁的整體結構。

今天火狐瀏覽器自動升級到 Firefox 6.0，怪啦！『檢視原始碼』的選單之前是在『檢視』中，Firefox 6.0換位置了！
用新軟體程式最討厭的就是：重新學習，重新習慣新的介面，有些程式設計工程師是真是：吃屎的！喜歡亂換選單或使用介面
為了讓人家知道，新版與舊版的不同之處？
好跟他的老闆說：他有改進了？他有做事啦？這對使用者來說是一件爛事情！
軟體一天到晚：更新！為何要更新？因為原先設計有問題？
還是要一直更新，人家才不會認為該公司已經關門啦？
這類的爛事情，真是：族繁不及備載！

好啦！牢騷發完了，該來找找火狐瀏覽器 Firefox 6.0 究竟是把『檢視原始碼』的選單弄到那裡去啦？
在選單上逐一尋找，終於找到了！
改在：『工具』→『網頁開發者』→『頁面原始碼』

喔！是『網頁開發者』才用此『工具』來檢視『頁面原始碼』嗎？
是這樣解釋的嗎？
那不是『網頁開發者』就不會用此『工具』來檢視『頁面原始碼』嗎？
檢視就是直接→檢視『頁面原始碼』，還繞一大圈？
希望以後不要再改位置了，要使用者：重新習慣與重新適應介面都是程式設計者的錯！

浪讓使用者時間，浪費使用者生命。

如果不是當初設計有錯，就是後面修改者：思路有問題！

Bootstrap Studio是一個桌面應用程式，可說明您建立漂亮的網站。
它帶有大量內建元件，您可以將其拖放以組裝響應式網頁。它基於廣受歡迎的Bootstrap框架構建，並匯出乾淨的語義HTML。
每天都有成千上萬的開發人員和設計師使用。我們相信您也會喜歡它！

介面
Bootstrap Studio具有美觀而強大的介面，該介面圍繞拖放的簡單性而構建。這使其成為用於原型設計和設計網頁和應用程式的理想工具。

漂亮的內建元件
Bootstrap Studio帶有大量用於構建響應頁面的漂亮元件。我們有頁眉，頁腳，畫廊，幻燈片，甚至還有諸如span和div之類的基本元素。

智慧拖放
Bootstrap Studio知道哪些Bootstrap元件可以相互嵌套，並提供建議。它會自動為您生成漂亮的HTML，看起來就像是由專家手動編寫的。

建立自己的元件
您可以將設計的各個部分提取為「自訂元件」，並準備將其放入您建立的任何設計中。您也可以將這些元件匯出為檔案並共享。

網上圖書館
如果您需要庫中不存在的元件，只需點選「元件面板」中的「聯機」索引片。在這裡，您會發現由社區構建和共享的數千個元件。您也可以上傳自己的。

連結元件
這是一項強大的功能，可讓您同步元件，因此變更一個元件將自動變更另一個元件。這對於需要跨頁更新的頁眉和頁腳之類的東西尤其有用。

實時預覽
Bootstrap Studio具有一項稱為「預覽」的強大功能。有了它，您可以在多個Web瀏覽器和裝置中開啟設計，並且您在應用程式中所做的每項變更都會即時顯示在任何地方。

編輯代碼
對於某些事情，拖放是不夠的。這就是為什麼Bootstrap Studio可以在需要時完全控制您的旗標。您可以在我們的Sublime Text-like編輯器中匯入和編輯CSS，JavaScript和HTML。

進階CSS編輯器
我們先進的CSS編輯介面支援自動建議和規則驗證，並在任何給定時間顯示活動和繼承的規則。您很快將不得不返回到文字編輯器。

JavaScript編輯
在我們的Sublime Text-like編輯器中編寫JavaScript。您所做的所有變更都將與預覽同步，因此您無需重新加載瀏覽器即可編寫代碼並進行嘗試。

HTML編輯
使用我們強大的自訂代碼元件，您可以直接編寫HTML，而無需通過我們的拖放介面。您還可以在需要時將頁面的任何部分轉換為自訂代碼。

匯入現有網站
如果您擁有以前開發的網站，則可以匯入它。只需將HTML，CSS，JS檔案和圖像拖放到Bootstrap Studio中，它們就會被新增到您的項目中。

更多功能
關於我們出色的應用，還有很多要說的。從生產力功能到私人的Bootstrap工具，Bootstrap Studio使設計網站和構建可標準運行的原型成為真正的樂趣。

專為Bootstrap設計
Bootstrap Studio知道如何構造有效的Bootstrap頁面，並自動編寫正確的HTML。它支援Bootstrap 3，一旦發佈，它將更新為Bootstrap 4。

網格工具
該應用程式具有用於處理Bootstrap網格的私人工具。輕鬆建立，調整大小和偏移列，並應用響應式可見性類。

Google Webfonts
Bootstrap Studio與Google Webfonts整合在一起，為您提供了一種匯入和管理字型的簡便方法。字型家族名稱甚至在我們的CSS編輯器中自動建議。

生產力特點
Bootstrap Studio對鍵盤快捷鍵提供了全面的支援，使您可以極大地加快工作流程。

主題和圖示
該應用程式具有許多內建的Bootstrap主題，圖示字型，模板和元件，您可以將它們組合成精美而獨特的設計。

始終保持最新
Bootstrap Studio會自動更新，因此您始終擁有最新版本。我們每個月都會發佈更新，其中包括新功能，元件和改進。

【響應式網頁.網站設計師】Bootstrap Studio v4.5.6 設計：
    https://bootstrapstudio.io/

Bootstrap Studio is a desktop application that helps you create beautiful websites. It comes with a large number of built-in components, which you can drag and drop to assemble responsive web pages. It is built on top of the hugely popular Bootstrap framework, and exports clean and semantic HTML. Thousands of developers and designers use it every day. We are sure you’ll love it too!

The Interface
Bootstrap Studio has a beautiful and powerful interface, which is built around the simplicity of drag and drop. This makes it the perfect tool for prototyping and designing web pages and apps.

Beautiful Built-in Components
Bootstrap Studio comes with a large number of pretty components for building responsive pages. We’ve got headers, footers, galleries, slideshows and even basic elements like spans and divs.

Smart Drag & Drop
Bootstrap Studio knows which Bootstrap components can be nested in one another and gives you suggestions. It automatically generates beautiful HTML for you, which looks as if it was written by hand by an expert.

Create Your Own Components
You can extract pieces of your designs as Custom Components, and have them ready to be dropped into any design you create. You can also export these components as files and share them.

Online Library
If you need a component which doesn’t exist in our library, just click the Online tab in the Component Panel. There you will find thousands of components built and shared by the community. You can also upload your own.

Linked Components
This is a powerful feature which allows you to synchronize components, so changing one will automatically change the other. This is especially useful for things like headers and footers which you need to update across pages.

Realtime Preview
Bootstrap Studio has a powerful feature called Preview. With it, you can open your design in multiple web browsers and devices, and every change you make within the app will be shown instantaneously everywhere.

Editing Code
For some things drag and drop isn’t enough. This is why Bootstrap Studio gives you full control over your markup when you need it. You can import and edit CSS, JavaScript and HTML in our Sublime Text-like editor.

Advanced CSS Editor
Our advanced CSS editing interface supports auto suggest and rule validation, and shows the active and inherited rules at an any given time. You will soon dread having to go back to your text editor.

JavaScript Editing
Write JavaScript in our Sublime Text-like editor. All your changes are synced with the preview, so you can write code and try it out without having to reload your browser.

HTML Editing
With our powerful Custom Code component, you can write HTML directly, without going through our drag and drop interface. You can also convert any piece of your page into Custom Code when you need it.

Import Existing Websites
If you have a website that you’ve developed previously, you can import it. Just drag and drop the HTML, CSS, JS files and images into Bootstrap Studio and they will be added to your project.

Even More Features
There is a lot more to say about our wonderful app. From productivity features to specialized Bootstrap tools, Bootstrap Studio makes designing websites and building fully working prototypes a real joy.

Built for Bootstrap
Bootstrap Studio knows how to construct a valid Bootstrap page and automatically writes the correct HTML. It supports Bootstrap 3 and will be updated to Bootstrap 4 once it’s out.

Grid Tools
The app has specialized tools for working with the Bootstrap grid. Easily create, resize and offset columns, and apply responsive visibility classes.

Google Webfonts
Bootstrap Studio is integrated with Google Webfonts and gives you an easy way to import and manage your fonts. Font family names are even auto-suggested in our css editor.

Productivity Features
Bootstrap Studio has comprehensive support for keyboard shortcuts which allow you to speed up your workflow dramatically.

文字編碼採用Big5與UTF-8 的優點缺點：
選擇Big5的人說—->big5模組比較多
（早期台灣使用big5比較多）目前可不是這樣。

選擇UTF-8 的人說—->有些新模組沒有big5模組
（目前新網站程式，大多採用UTF-8 ）。

郵件問題
選擇Big5的人說—->主機是UTF-8系統 Big5系統發的郵件會產生亂碼。
選擇UTF-8的人說—->Big5系統新模組(utf-8)有許.功.蓋的問題。

跟著官方網站
選擇Big5的人說—->Big5比較穩且支援雙位元文字。
選擇UTF-8的人說—->這是驅勢，且總站發表模組也以UTF-8為主。

——————————————————————————-
Big5，Unicode and Unicode UTF-8 的差異

文字編碼基本上可以分為幾種：
ANSI(就是BIG5、GBXXXX那些的) : 優點是擁有小的檔案，但是不支援多語系。
較舊的軟體會採用這個編碼
你打開非BIG5的軟體,像是簡體中文的軟體，會亂碼
表示那個軟體就是採用ANSI編碼的軟體

Unicode（萬國碼、國際碼、統一碼、單一碼）
UTF-16 : 新的 WINDOWS作業系統 ，還有一些新的WINDOWS 軟體所採用的編碼，優點是擁有高效能，固定位元。
 
XP記事本存檔後,那個儲存編碼那邊的Unicode，指的就是UTF-16

我寫的繁體中文UTF-16應用程式，卻可以在日文電腦，啥都不用改，就可以執行，也不會亂碼，這就是Unicode的好處之一。

基本上
WINDOWS 95/98 => ANSI
WINDOWS 2000/XP/2003/Windows7、8 => UTF-16

UTF-8 : 跟UTF-16一樣，不過文字大小是變動位元，可能這個字要2byte，那個字卻要3byte，需要更多的CPU效能來做排序，所以效能沒utf-16來的好。
因為他是變動位元，所以他的大小會比utf16還要小，所以比較多人將他用在網頁上。

結論:
如果你要寫的是網頁，最好採用UTF-8編碼，除非你不想要多語系的優點。
如果你寫的是應用程式，最好採用UTF-16編碼 ，除非你希望其他語系的作業系統，打開會亂碼，跟不想要多語系。

Xoops 發布新的 引擎 (X3) 【為什麼要重寫XOOPS？】

XOOPS 是一個高度可擴充、具物件導向、且易於使用的動態網站內容管理系統(CMS)，採用 PHP 語言來設計。XOOPS 十分適合用於發展小型至大型的動態社群網站、內部 Intranet 網站、入口網站、並且可用來做為 WEB LOG 使用。
非常榮幸為您呈現 X3，一個為下一代XOOPS網站應用程式開發所設計的全新 Xoops 引擎。

此Xoops引擎不久就要呈現在世人眼前，這段期間，我們將會徹底的進行微調與除錯，但我相信，為了將XOOPS變成世界上最頂尖的網站平台，最終我們會將各種功能及技術方案做最佳的整合。

此新的Xoops引擎已從底層全面重新設計，並結合了各種第三方框架（如 Zend Framework 及 Smarty 3）的優點於一身。

為什麼要重寫XOOPS？
XOOPS 是眾多開放原始碼內容管理系統中成功的方案之一，在各種不同的平台評比中長期處於領先的位置，並獲獎無數。
但慢慢的已經顯露出疲態，因此，我們需要大刀闊斧的重寫其核心。

為了讓我們的開發者在開發時保持彈性以及擴展性，並且提供使用者一個高效能的平台，開發小組決定使用業界標準的各種框架。
如此一來，用現成的框架我們可以集中有限的資源使XOOPS更具獨特性及特殊性。

這樣我們可以擷取這些最新的網路開發框架的優點-就像是突然得到一個最頂尖最聰明的PHP以及RIA團隊來加入XOOPS一樣！

經多許多研究，現階段我們選用了一些框架：

    * PHP： Zend Framework
    * 樣板： Smarty 3,
    * JavaScript： jQuery

同時，Xoops引擎的多引擎機制，將可確保在未來繼續採用其他傑出的框架的可能性，例如Yii框架、Dojo Toolkit…等。

為什麼我們選用PHP 的 Zend Framework

    * 其設計與編程是最專業也是全球最先進
    * 全面物件導向以及純 PHP 5
    * 文件超完整，網路上還有數不盡的第三方資源可取用
    * 開發活動相當活躍且持續，此外，其團隊也是 PHP (Zend)幕後的開發團隊
    * 擁有來自主流企業的支援（包括 IBM, Google, Microsoft, Adobe Systems, 以及 StrikeIron）
    * 松耦合(Use-at-will)設計可以讓開發者獨立使用組件，每個組件幾乎不依賴其他組件。
    * 提供了強大且高效能的 MVC 實現和基於PHP的樣板。
    * 其組成元件廣大，且鬆散耦合並可相容於其他函數庫
    * 可搭配 PHPunit 來進行單元測試

我們的展望：
 XOOPS引擎架構是設計用來建構一個更受歡迎的XOOPS：

    * 模組化
    * 佈景主題
    * 樣板

於新的XOOPS Engine我們期望改善：

    * 彈性的架構以及優雅的程式碼及執行
    * 現代化的 MVC 架構：快速開發、頂尖技術工藝
    * 支援分散式的虛擬主機佈署
    * 貢獻者的友善架構：易於管理第三方模組及外掛
    * SEO 優化能力
    * 豐富的函數庫及框架
    * 可使用單元測試

自從新的Xoops引擎致力以穩定、彈性架構及頂尖框架來帶領XOOPS專案成為下一世代的網站開發平台，他的機制以及APIs可能會與傳統的XOOPS有所不同。
然而，我們將持續盡我們最大的努力去維持舊有的模組及佈景在開發上及佈署上可以相容於新平台。

在即將發布的文件中，我將會完整的詳細介紹新的功能。
在此刻，請先參閱 Technical.txt 作為臨時的說明文件。
您可能也會想要看看 Todo.txt 以了解我們接下來還有哪些事情要做。

測試：
我了解每個XOOPS人都熱切的想要看看新的Xoops引擎長怎樣以及它是如何運作，而且部份開發者可能已經迫不及待的想要在新的引擎上開發新模組。

然而自從發布了此新引擎的初版，我想強調這只是 Alpha 測試版本，主要是給經驗豐富的開發者以及設計者來使用，看看哪裡有臭蟲、遺漏的功能，而且也會常常在更新。請記住：這只是ALHPA 測試版！

給一般使用者：在經驗豐富的開發者與設計者使這個新系統更為友善之前，請耐心等待囉～

測試中的平台：:
本平台源碼已經在一些有限的環境下測試過：

    * WAMP Server
    * CentOS/apache/php/mysql
    * Uniform Server

我們注意到 X3 無法在某些環境下運作（例如： EasyPHP）。然而， Alpha 測試版的目標並非測試X3可以在哪些瀏覽器及可能的平台上運作，而是測試其功能及規格。
所以，若您的測試網站無法運作時，請盡量使用上述平台環境。
等到我們將主要架構確認，我們就會開始測試各種不同環境的相容性以確保它可以順利運作。

系統需求：
Apache mod_rewrite
PHP 5.3+

臭蟲回報：
對於XOOPS引擎的開發，我們將使用獨立的 Bug Tracker: SourceForce Trac. 請在此回報任何問題。
關於相關討論，在示範網站建立前請使用 Sourceforge Forum 。

這是未來幾個月的計畫：

   1. 11月：我將會與少數經驗豐富的開發者，像是 Trabis 以及 MusS 來準備一些基本模組。
   2. 12月：一個指定的小團體，包括開發者、設計者、測試者以及技術文件編輯者將一起在一個有基本功能的系統上開始作業
   3. 我們的目標是在年底前可以生出一個相當穩定的平台，可以讓開發者及使用者來玩玩看。

網頁設計從Table走向css的好處

有人認為：css沒有像網頁設計中用Table來的『視覺化』『直接』，所以會猜疑：為何『網頁設計』的趨勢會走向CSS呢？
大家在架站時會發覺：『網頁設計』由table走向css的趨勢，很多架站程式已經都不用table，而改用css來製作！
其實很多設計包括我自已一開始都會覺得css是非常麻煩的，有的時候為了解決某個瀏覽器的一個小bug，往往花上半天到一天的時間，而雖然書上總是說的很容易，但在實作的時候也總是會碰到很多問題
所以很多設計都會直接跟我說：用table就好啦！幹嘛吃飽太閒嗎？為何要用CSS這種麻煩的東西？

可是因為在許多css的書籍及網站都宣揚許多使用css的好處，所以雖然一開始花了很多時間在研究
後來真的也漸漸發現了使用css及table的差異，和它的好處:
1.原始碼整個乾淨了許多，沒有那些多餘了tr，td， [原始碼瞬間瘦身成功]
2.由於原始碼變得整齊，而且標籤也具有意義，所以在修改的時候變得更容易， [更好管理] ，不需要盲目的尋找不具意義的標籤，一個一個作修改，節省了許多時間
3.網站檔案變小後，當然 [load網頁的速度也加快了許多]
4.有意義的標籤如title、h1、h2，使得搜尋引擊更容易去判斷此網站的內容及關鍵字為何，進而 [提升網站的排名]
當然使用css還有許多優點是我所沒有提到的，但是我覺得基於上面四項好處，我們就應該儘量的由table轉向css，致力研究更多css的用法，讓我們的客戶擁有更通用、更優化的一個網站。

 網路使用人口遽增，有人開始擔心：網址短缺將會不夠用？
其實那是：庸人自擾（有問題就會有對策）
請看以下的新聞報導：

網址短缺 教部推IPv6
【17:25】〔中央社〕
對於2012年全球網際網路協定位址（IPv4）將用完，教育部準備好了，推動能夠大量提供網路位址的IPv6因應，學術網路不用擔心；未來藉由IPv6，教育體系內打電話還可免費。

依據國際網路號碼資源組織發出通知，全球IPv4位址將於2012年枯竭，身為科技島的台灣要及早因應。教育部電算中心主任趙涵捷表示，校園網路已經做好準備，預估目前校園所配置到的實體IPv6位址數，足以滿足台灣所有學校的師生需求。

趙涵捷說，去年開始投入經費改善校園網路環境，台灣學術網路骨幹網路及各級學校網路設備，將成為全球第1個實際提供IPv4/IPv6雙協定（Dual-Stack）服務的網路。

趙涵捷表示，IPv6相較於IPv4有互動功能，IPv6可以說讓每個人都帶著伺服器走，使用更彈性，包括電子書、無線網路及網路語音交換平台（VoIP）等服務都會更加值。

趙涵捷還說，如果病人血壓升高，血壓計資料若使用IPv6傳輸，除了可將病歷資料傳送給醫療院所，還可從醫療院所反向要求血壓計縮短時間定時測量，從原本半天測量1次縮短為每小時測量，具備雙向功能。

台北市有60所國小有簡易的氣象站，趙涵捷說，若透過IPv6傳輸，氣象局可以獲得更多資訊，因此氣象局盼與教育部合作，有助於氣象預報。 

(PHP代碼自動生成工具) PHPMaker 7.01 繁體中文化版（含影片教學）

PHPMaker(PHP代碼自動生成工具)  PHPMaker(PHP代碼自動生成工具)
 7.0 Build 7600   PHP代碼自動生成工具，一款在Windows平台上運行的基於MYSQL資料庫自動生成PHP腳本的軟體。
使用生成的PHP代碼，你可以通過WEB網頁對資料庫的記錄進行瀏覽、修改、查詢、加入和刪除。
利用它你只需幾步就可以得到完整的PHP代碼。
清晰易懂的生成代碼，方便開發人員在其基礎上二次開發。

————————————————————–

網頁上對mysql表進行操作，代碼寫起來很複雜。
例如一個簡單的列表：首先連接資料庫，然後通過sql迴圈讀取表內容，最後關閉連接。
說起來不太複雜，但是還要考慮到html代碼（就是介面的樣子）就顯得很複雜。
還有如果要修改表的話，就要修改許多代碼。
這個樣子，如果完成一個項目的話，那就是一個大的工程了！

有了phpmaker事情就好多了，完全可以快速的完成網頁的代碼。實現較為實用的功能。
有些像access的操作，每個表都可以設置許可權進行記錄的操作、查詢、排序。
還可以通過建立表關係進行邏輯上的聯接。
html採用css風格定制在phpmaker裏就可以完成，而且通過對每個表的代碼重新寫入，馬上就能在網頁上看到效果。

原版是：英文版，總教頭已經有把他繁體中文化，最近會開此課程（再提供給學員使用）不要寫信來索取喔！
因為此軟體要有整體教學及二次開發配套教學才有用，自己摸索費時又無法商業運用開發賺錢！

無法連上XOOPS 出現警告：XOOPS path check: Script is not inside XOOPS_ROOT_PATH and cannot run.

訪客來信問道：
請問總教頭，我的XOOPS網站更換不同主機後
無法連上XOOPS
我網頁資料、資料庫上傳後
網頁顯示及聯結都OK
但超連結xoops時卻顯示以下之訊息：
XOOPS path check: Script is not inside XOOPS_ROOT_PATH and cannot run.

請問要如何解決此問題？
——————————————–
總教頭回覆：
請不要用『直接複製檔案』方式搬移網站
你應該是 mainfile.php 出錯！
原因：兩台主機的網站目錄實體路徑不一樣
這應該是你安裝時沒有修改mainfile.php 中的 XOOPS_ROOT_PATH 路徑
例如：請注意，你的網站在主機的路徑為何？
你的帳號應該是要設/home/你的用戶名稱/public_html/xoops/
如果你還是搞不定，那就再次上傳install目錄（重新安裝）
全新安裝後，再刪除install目錄
用PHPMyAdmin匯入你的原先備份之資料庫，應該就可以了！
—————————————————

Internet Explorer 瀏覽器為何要一再的更新？

PC作業系統Windows在安裝後預設瀏覽器就是：Internet Explorer
從IE6不行就換IE7，後來Windows 7又來個IE8
IE8很都人都還沒適應使用，現在又來個IE9（因為很多網友都不用IE瀏覽器，而改用其他網頁瀏覽器！）
微軟IE瀏覽器又推出新版本IE9，記者寫得天花亂墜（真的有那麼好嗎？還是照官方的廣告詞報導？）
不用花錢就可以免費下載的瀏覽器（其實暗地的商業收入是可觀的！）競爭當然火熱！
使用網頁瀏覽器時，使用者最在意的是：相容性（網頁看到的是否與原設計一樣？還是CSS設計都跑掉啦？）
說有【特色】？還不如穩定.安全.首頁不要被綁架，這才是使用者關心的！

以下是：台灣IE9繁體中文上市的新聞引用！
——————————————————————————-

台灣IE9繁體中文上市 展示效能威力
‧數位資訊 2011/03/21

微軟IE9正式版本在上週時候已經正式開放下載，而台灣地區在本日 (3/21)舉辦相關記者會活動，除了在現場展示IE9在執行效能以及對HTML5支援等方面表現外，同時現場在會後也分享了於3月12日所舉辦的微軟IE9「黑客松」活動心得。

微軟旗下IE9於上週 (3/14)釋出正式版本內容，並且在推出首日內即突破200萬次以上的下載次數，而台灣地區也在今天舉辦記者發表會，除了邀請相關合作廠商一同慶祝 IE9上市活動外，現場也提供展示IE9在執行方面的效能表現，另外從今天開始也將於台北信義誠品一樓開設「體驗，速度之美」IE9展示區，提供使用者親身體驗微軟新版瀏覽器的實際執行速度，另外也能在現場欣賞美麗的蓮花Elise Hardtop限量版跑車。

根據台灣微軟營運暨行銷事業群總經理陳宣霈表示，他將瀏覽器本身比喻為「電影院」，而使用者所想看的便是「電影 (即網頁)」內容，因此微軟秉持對瀏覽器市場的高度重視及對於使用者的承諾，此次IE9的推出便是擁抱網頁開發標準，同時結合支援硬體加速及強化安全隱私保護等機制，提供全新的「網路原力之美」瀏覽體驗，而配合微軟此次與各廠商的合作，除了將帶給使用者更多便利之外，同時也期望能帶來更多營運商機。

而延續去年在beta版本推出時所加入的I'm TV、痞客邦及6waves等合作夥伴，微軟此次也宣佈新加入的合作網站，包含MSN、遊戲基地、巴哈姆特、Groupon、KKBOX、美麗佳人、 Rojo (樂宙遊戲)、Pubu電子書城 (湛天科技)、UDN聯合線上、中華電信Xuite，甚至是台北市民當家熱線1999等知名廠商。

IE9特色介紹
現場除了分享IE9在開放下載後的表現外，同時也向現場媒體介紹微軟IE9中所做的改進與創新。

首先是與微軟合作廠商所提供的服務網站內容，將能透過IE9本身釘選功能 (Pinned Site)直接將網頁「釘」在Windows工作列上成為一組「應用程式」。不僅能提供一般網頁瀏覽，同時在釘選之後的圖示上按下滑鼠右鍵顯示的「跳躍清單 (Jump List)」，也能發現合作廠商所提供的特殊功能服務，例如直接顯示新聞分類項目，或是提供網路串流音樂播放控制，甚至對應部落格服務的話，佈僅能就各分類熱門內容推薦外，使用者也可直接點按發文功能撰寫內容。

而在IE9當中，隱私及安全保護更是主要議題之一。即使將網頁釘選為工具列程式後依然提供隱密瀏覽的 (InPrivate Browse)功能，避免IE儲存在瀏覽過程中會用到的網頁Cookie、暫存檔內容、歷程記錄或相關資訊，而可不留痕跡地放心瀏覽網頁內容。而在反追蹤部份，IE9提供「追蹤保護清單」的功能，讓使用者自訂管理可疑的網頁名單，避免特定網頁執行瀏覽行為紀錄的現象。

能有效將特定網率內容予以阻擋
而在惡意軟體防護方面，除了微軟本身團隊強化防堵之外，IE9本身亦可有效杜絕99%的社交引擎惡意軟體攻擊，根據官方統計報告透露，阻擋效果幾乎為Firefox的5倍及Chrome的33倍之多，同時亦提供使用者透過SmartScreen惡意軟體防護機制進行網站篩選，另外也能在下載過程中提醒安全性及可能存在的潛在威脅。

安全性方面，由微軟投資人力製作阻擋惡意網址清單等方式提供瀏覽安全
當然，IE9最重要的還是對應HTML5網頁技術，提供使用者結合Canvas、video等標籤進行特效技術呈現，讓瀏覽器本身即可呈現過去可能必須仰賴各式外掛才能顯示的效果。另外除了採用新款Chakra JavaScript引擎外，IE9也加入對應GPU或GPS等硬體項目的支援，使得執行效能可以更快，同時也能發揮過去以往可能無法完成的應用，諸如多媒體聲光播放呈現、具備華麗特效的Web頁面遊戲發展，或是以筆電為主的LBS服務應用等。

效能方面明顯提昇不少
而因為擁抱HTML5等網頁標準，IE9的開發者套件其實也顯得相當容易上手，透過撰寫一組網頁程式即可在各瀏覽器平台中運用，對於使用者而言則可毫無阻礙地瀏覽網頁內容，而無須考量是否有瀏覽器版本相容，或是遺漏外掛程式的困擾。而對開發者而言，內容跨平台的發展更是有利無弊，不但能吸引更多使用族群，對於旗下服務的推動也能更快加速發展。

黑客松活動分享

與現場媒體分享IE9諸多特色之後，微軟在會後也邀集3月12日所舉辦的「IE9黑客松」活動優勝團隊，同時分享活動當天的創作內容與心得，其中也能看見許多採用IE9內建的canvas繪圖技術及各項HTML5網頁技術的應用，甚至除了透過IE9呈現以投籃及迷宮為主題的遊戲創作外，也有開發者製作出「偽．Kinect彈力球」的遊戲，並且透過IE9完整重現在Xbox 360上呈現的效果 (雖然體感是透過電腦鍵盤操作…)。

而小編在私下與微軟官方人員談論時，也透露行動版的IE9將會在年內釋出 (不過出不僅對應WP7平台)，其中當然也包含硬體加速與支援HTML5技術等特色，因此未來預期將能看見更多微軟或其他廠商在跨平台方面的網頁服務應用。 (至於先前一再更改日期的WP7首波更新內容，則確定將在近期釋出)
IE9上市慶祝活動
而此次台灣微軟為慶祝IE9正式上市，目前除了在台北信義誠品展示之外，同時也推出「即刻下載IE9，體驗速度之美」活動，讓使用者有機會獲得四萬元雙人來回機票或Groupon十萬團購金，另外也將特別安排其中五名幸運者親身體驗Lotus純手工賽車Exige S240的實駕速度。