可點選QR code
ARTICLE
1
CSS3新單位－－vh vw
想要讓你的圖片隨著螢幕放大縮小嗎？想要讓你的圖片放滿版嗎？不妨來試試CSS3的新單位vh、vw吧！
vh、vw在使用上與百分比%很相似，vh代表view height，指的是螢幕可視範圍高度的百分比，而vw則代表view width，是指螢幕可視範圍寬度的百分比。
vmin：寬度或高度較小值的百分比
vmax：寬度或高度較大值的百分比
像素px、百分比%、vw vh的比較
像素px：最基本易懂的單位，不會跟著視窗縮放尺寸。
例 : width:200px; height:100px;
百分比%：由於沒有任何內容物，所以跟vh vw不同，即使設定了數值也不會顯示，除了這點以外，百分比是以父元素為基準做百分比縮放，而vh vw則是以裝置(螢幕視窗)大小為基準。
vh vw : 會隨著網頁縮放而改變尺寸。比如說設定一個div為width:50vw;height:30vh（為了方便顯示，另設定一個div為width:100vw;height:100vh來包整塊可視範圍）。
意思就是說這塊div會占可視範圍寬度的50%、高度的30%
這個新單位會隨著網頁縮放而改變，因此在RWD網頁設計的應用上是相當實用。
ARTICLE
2
瞭解網站轉址與DNS轉址
在維護網站長久經營的積分與排名時，我們瞭解了先前所介紹一般常用的的301轉址(永久)與302轉址(暫時)及IIS轉址(進階)，主要是在較基礎與程式的層面上著墨，而網站的組成中，除了內容的製作與程式上的開發外，網域名稱就是我們一直在討論轉址的部分，但在伺服器管理網址名稱時，也有著可以直接透過最高層伺服器進行轉址，就是在管理網域資訊的DNS中進行轉址設定。
比起以往要管理網站伺服器需要繁瑣的動作與設定，現行業界中多了許多代管網址資訊的廠商，而在這些代管的服務中，也提供了友善的操作介面，更重要的是，也整合了以往較複雜的功能並且簡易化了操作流程，已範例:CloudFlare、GoDaddy等代管廠商來說，可以在代管設定上透過記錄類型A類，進行網址來源及目標的設定，再經由伺服器上的更新，便能在最高層級的網域區段直接進行轉址，不過在進行這類的設定中，也伴隨著網站DNS與國際伺服器連結的穩定和安全性，因此，在這部份上的調整建議經由瞭解網域設定的人員操作較為妥善。由於每間廠商所開發介面不同，因此以下已CloudFlare為例，提供範例。
ARTICLE
3
常用的CSS簡寫
在撰寫上透過css的簡寫可以讓文件變更小，更易讀，以下為幾項常用的CSS簡寫：
margin padding間距的設定
可縮寫成四個數字，
如：margin:10px 30px 20px 10px
填寫順序依序為上右下左，想成從上方順時針數下來就對了。
margin:10px 30px第一數為上下的值，第二數為左右的。
margin:10px表示四邊的值。
邊框border的設定
border: 1px #c00 solid
依序為
border-width邊框寬度、border-color邊框顏色、border-style邊框樣式
background背景設定
background:url(001.jpg) #000 center no-repeat
依序為background-image背景圖片、background-color背景顏色、background-position背景定位、background-repeat背景重複
font文字設定
font: oblique bold 30px 24px 新細明體
依序為font-style文字樣式、font-weight文字粗細、font-size文字大小
、line-height行距、font-family文字字型
透過css的簡寫可以讓文件變更小，更易讀。如果能多加利用的話，便可有效節省css的撰寫量唷。
ARTICLE
4
瞭解網站轉址與IIS轉址
在先前談到關於301轉址，除了可以使用單頁面上的永久轉址轉址及302暫時性轉址外，我們也可以適時的使用更進階的IIS URL rewrite來進行設定，談到IIS在發行了7.0版本後便加入了URL rewrite的多項功能，一般人一開始不熟悉時，面對多樣性功能強大的圖形化界面可能辦法這麼快熟悉全部功能，因此，IIS URL rewrite在這我們也只針對301轉址進行簡易的相關說明。
回歸程式上的開發，我們可以透過瞭解web.config的設定檔來簡單的進行控制修改IIS上的設定，它可以針對單一網站或單一網路程式來儲存程式面上的修改，也可以輕鬆的根據修改及上傳web.config檔來設定改變網站程式的設定，不需要再依靠IIS操作介面繁複的設定或是重新啟動IIS，而且網站內所有網頁，子層都會按照web.config的設定來執行運作，因此在這邊我們也舉出範例讓大家來瞭解參考如何使用程式化快速的設定IIS URL rewrite，請參考以下。
＜configuration＞
＜system.webserver＞
＜rewrite＞
＜rules＞
＜rule name="Canonical Host Name" stopprocessing="true"＞
＜match url="(.*)"＞＜/match＞
＜conditions＞＜/conditions＞
＜add input="{HTTP_HOST}" pattern="^yuordomain\.com$"＞＜/add>
＜action type="Redirect" url="http://www.yuordomain.com/{R:1}" redirecttype="Permanent"＞＜/action＞
＜/rule＞
＜/rules＞
＜/rewrite＞
＜/system.webserver＞
＜/configuration＞
我們將原先http://yuordomain.com/導向至http://www.yuordomain.com/
ARTICLE
5
CSS3的flexbox版面配置－flex items(子項目)可用的屬性
上回介紹了flex-container(容器)可使用的屬性，這次來介紹flex-items(子項目)可操作的屬性。
一樣先來張flexbox盒子模型圖複習一下(來源:MDN)
關於flex-items可操作的屬性，有以下幾項：
order可以決定項目的排列順序。
例：下面兩圖僅差在是否加入了order，若未加order指定順序的話會如右圖所示。左圖則是已加入order。
flex-grow可設定項目們在容器內的比例。
例：每個項目在容器內的比例是2:1:3:2
flex-shrink與flex-grow相反，當項目將容器擠爆時，flex-shrink會把項目們縮小設定的比例。會根據flex-shrink設定的值來決定縮小的倍數。
下圖的縮小倍數比：1:2:3:4:5
flex-basis項目的基本大小，有點類似min-width，算是代替width用的，優先權比width高，但若兩者其中之一為auto，會以沒設auto的為優先。
關於flex-grow、flex-shrink、flex-basis此三項屬性，這邊有更詳細的解釋
flex由flex-grow、flex-shrink、flex-basis三個屬性組成，例：.flex{flex:2 1 300px;}
align-self可以指定某個項目的行為，會覆蓋容器align-items的設定。
auto：預設值，繼承容器的align-items屬性，若沒有則為stretch
flex-start：對齊容器最上面的cross start
flex-end：對齊容器最下面的cross end
center：垂直置中
stretch：將flex項目撐開至容器的高度
baseline：以所有flex項目的基線作為對齊標準
例：下圖本來將容器設align-items: flex-start(靠齊最上方)。然而在第三項與第四項分別設了align-self: center(垂直置中)與align-self: flex-end(靠齊最下方)，覆蓋了容器align-items: flex-start的設定。
ARTICLE
6
瞭解網站轉址與302轉址
在先前我們分享了瞭解網站轉址與301轉址後，可以知道網站在進行更新甚至要改版的狀況時，如果要將網站更換至新網址，我們可以透過301轉址的語法來進行，將舊有的網站頁面權重進行轉移到將要使用的新網址頁面，就能保留以往所努力經營的頁面權重及搜尋引擎排名，但301轉址的轉址其實代表的是將舊網站權重"永久轉移"至新的網頁，如果您是要捨去舊有的網站與網址時，這是適合的做法。但如果是要暫時修改及保全舊有網站與網址的同時，要另外使用替代網址與網站狀況下，就並不適用301轉址。
要在維持舊有網站與網址的頁面權重時，也能使替代網站不失重要流量的方法便是使用302轉址，有別於先前介紹的301轉址，同樣都是會將頁面權重進行轉移，但是302轉址主要為"暫時性轉移"，用於舊網站進行更新與改版時將頁面內容與權重轉至替代的網站與網址來提供瀏覽服務與維持原有排名及權重，於轉址後舊有網站並不會失去原有的頁面權重和排名，舊網站進行更新與改版後便可以同時取回替代網站所持續經營舊有的頁面權重。302轉址的語法放置在要轉址的頁面文件中，常見語法請參考以下：
<head>
<meta http-equiv=refresh content="0;url=http://host.yourdomain.tld/path/to/">
</head>
JavaScript 302轉址
<script language="JavaScript">
<!--
window.location.href = "http://host.yourdomain.tld/path/to/";
//-->
</script>
PHP 302轉址
<?php
header("Location: http://host.yourdomain.tld/path/to/");
?>
ASP 302轉址
<% Response.Redirect("http://www.yourdomain.com") %>
如果對於這方面有興趣與疑問的情況下，歡迎大家可以更近一步瞭解進階的IIS轉址-URL rewrite或使用聯絡我們與我們聯繫，將再詳細進解說。
ARTICLE
7
CSS3的flexbox版面配置－flex container(容器)可用的屬性
flexbox是CSS3裡較為特殊的排版方式，相較於一般常使用的float、position等屬性更為彈性，可以更有效率地做出一般方式所不易達成的效果。隨著響應式布局的興起，排版彈性大的flexbox使用率也頻繁了起來。
flexbox盒子模型如下圖(圖片來源:MDN)，不同於其他一般的CSS屬性，它有專屬於自己的一些屬性和概念，flexbox具有水平的起點與終點(main start、main end)、垂直的起點與終點(cross start、cross end)、水平軸與垂直軸(main axis、cross axis)。
總體來說分為flex container(容器)與flex item(子項目)兩大類。
如何使用flexbox的功能呢？
只要在容器內加上display:flex或是display:inline-flex，容器和其內的項目就會直接套用flexbox的設定喔！
display:flex與display:inline-flex的差別
就跟display:block與display:inline-block差不多
此章先介紹flex container(容器)可用的屬性，有以下幾項：
flex-direction為容器內項目的排列方向
可用的值有:
row (從左到右，再從上到下)
row-reverse(row的顛倒順序)
column(從上到下，再從左到右)
column-reverse(column的顛倒順序)
flex-wrap決定flex項目是否換行
可用的值有:
nowrap：不換行(預設值)，不管有多少項目都會放在同一行內(寬度會自動調整)
wrap：換行，會依照內容或寬度自動換行。
wrap-reverse：換行，但順序相反
flex-flow是 flex-direction與 flex-wrap屬性的縮寫，就跟
「border-width:1px;border-style:solid; border-color:#000」等於「 border:1px solid #000」是一樣的道理
flex-direction | flex-wrap
例：.box{flex-flow: row wrap}
justify-content決定flex項目與容器的水平對齊設定
flex-start：預設值，flex項目對齊最左邊的main start(水平起點)
flex-end：flex項目對齊容器最左邊的main end(水平終點)
center：水平置中
space-between：平均分配 flex項目，最左與最右的flex項目會與main start及main end貼齊。
space-around：平均分配 flex項目，間距也是平均分配。
align-items與justify-content相反，決定的是flex項目與容器的垂直對齊設定。
flex-start：預設值，對齊容器最上面的cross start(垂直起點)
flex-end：對齊容器最下面的cross end(垂直終點)
center：垂直置中
stretch：將flex項目撐開至容器的高度
baseline：以所有flex項目的基線作為對齊標準
align-content
align-items是針對內容為單行的項目進行處理，但若是多行的項目，就要使用align-content此屬性。
flex-start：預設值，對齊容器最上面的cross start(垂直起點)
flex-end：對齊容器最下面的cross end(垂直終點)
center：垂直置中
space-between：第一行與最後一行分別貼齊最上方與最下方
space-around：行距平均分配
stretch：將flex項目撐開至容器的高度
以上便是flex container(容器)可用的屬性，下次將介紹flex item(子項目)。
ARTICLE
8
瞭解網站轉址與301轉址
瞭解網站轉址與301轉址，在網站經營與維護中，相信大家能瞭解一個用心經營，內容豐富、時常更新資訊的網站來說，網站頁面對搜尋引擎的權重比例越高與排名越好就是一個很好的肯定，而已長期經營的網站來說我們將可能會遇到網站更新甚至改版的狀況，要如何在穩定網站排名且不失去搜尋引擎積分權重下的方式讓我們將網站更進一步的提升呢?這時候就需要用到"網站轉址或301轉址"。
網站轉址的技術層面其實包含非常的廣泛，在此將以本議題的基礎篇301轉址開始介紹起，由單一頁面來說，在開方網頁時應用不同的程式語言，所以撰寫的方式也有些許的不同，舉例來講，我們可以將301轉址的語法放置在要轉址的頁面文件中，常見語法請參考以下：
HTML 301轉址
<meta http-equiv="refresh" content="0;url=http://yuordomain.com" />
<meta http-equiv="refresh" content="0;url=http://yuordomain.com" />
PHP 301轉址
Header( “HTTP/1.1 301 Moved Permanently" );
Header( “Location: http://yuordomain.com" );
?>
Javascript 301轉址
<script>document.location.href="http://yuordomain.com";</script>
ASP 301轉址
<%@ Language=VBScript %>
<%
Response.Status="301 Moved Permanently"
Response.AddHeader “Location","http://yuordomain.com/"
%>
ASP.NET 301轉址
<script runat="server">
private void Page_Load(object sender, System.EventArgs e)
{
Response.Status = “301 Moved Permanently";
Response.AddHeader(“Location","http://www.yuordomain.com");
}
</script>
JSP 301轉址
<%
response.setStatus(301);
response.setHeader( “Location", “http://www.yuordomain.com/" );
response.setHeader( “Connection", “close" );
%>
如果對於這方面有興趣與疑問的情況下，歡迎大家可以更近一步瞭解302暫時性轉址的相關性或更進階的IIS轉址-URL rewrite。
ARTICLE
9
Font-Awesome－簡單又好用的icon素材網 ，只要一行字即可直接使用！
Font Awesome網站提供許多好看的icon可以免費下載使用，原理為將icon以文字型式(fonts)表現，在應用上比起將設計的icon切成圖片使用來得更加便利。
首先進入Font Awesome的網站http://fontawesome.io/ 下載套件
解壓縮後，若只是需要css的話只需將css與font的資料夾複製到目的地。
在<head>與</head>之間加入css語法
例如: <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
若要使用只需在html裡加入欲選擇的icon語法即可
例：<i class="fa fa-camera" aria-hidden="true"></i>
若要更改大小的話可以依自己需求在原始碼裡加上fa-lg、fa-2x、fa-3x等。
例：
<i class="fa fa-camera fa-lg" aria-hidden="true"></i>
<i class="fa fa-camera fa-2x" aria-hidden="true"></i>
<i class="fa fa-camera fa-3x" aria-hidden="true"></i>
<i class="fa fa-camera fa-4x" aria-hidden="true"></i>
<i class="fa fa-camera fa-5x" aria-hidden="true"></i>
另外因為Font Awesome的icon是文字型式，所以也可用文字設定的css來改變大小
例：font-size:14px
Font Awesome提供的icon可減少特地設計icon和切版所需花費的時間，設計上又簡單實用，為網頁設計師可善加利用的好工具。
ARTICLE
10
SQL Server 與 My SQL的選擇
在網頁設計程式開發時，SQL Server 與 My SQL 都是在Windows較常見的資料庫，由於兩種語法較為貼近相似，所以在選擇上比較常拿來比較，大多數人都會覺得My SQL是免費型的資料庫，但這僅適用於個人網站或是小型簡易網站的應用，在商業性及進階的網站整合功能上，目前My SQL還是需要付費商業性的授權。
瞭解其實在完整的商業開發上，兩套資料庫都是需要授權上的費用後，我們可以由介面的友善及功能對應的完整性進行考量，由於SQL Server較其他資料庫不同的地方是，它只對應Windows系統，不能應用在其他如Linux或UNIX等的系統上，而Windows也是目前大眾較常習慣接觸使用的介面，所以在開發上它較能符合一般人的操作習慣，因此假設是在不熟悉Linux或UNIX等其他的系統時，會比較建議使用SQL Server，如果有考慮使用不同作業系統時便可以考慮 My SQL。
在架設網站類型時，可以參考網站的用途或內容方向來配合使用的語法與資料庫，普遍架設個人網站或較小型網站時訪間有許多PHP對應My SQL的開發模型及相關教學範例可以參考架設，所以架設基礎較為簡易開放，而考量使用在較商業化的網站開發時，需要較多元性的功能，大多是會使用.NET語法與SQL Server資料庫來配合功能較為複雜及多元的需求，SQL Server在安裝後其實有包含非常多的工具可以應用，如:報表、資料轉換(ETL)、商業智慧(BI)等，幾乎一應具全，這或也就是大多數人喜歡SQL Server的原因之一。
SQL Server 與 My SQL，兩套資料庫在語法上有較相近的與法與操作，也有適合不同層面的開發應用，因此在選擇資料庫的同時可以先瞭解架設時的需求及目標進行選擇使用。
