Quantcast
Channel: 網頁資源 –梅問題．教學網
Viewing all 164 articles
Browse latest View live
↧

SEO優化：Canonical Tag解決「重複的標題標記」問題

December 10, 2015, 2:00 pm
$
0
0
梅問題－SEO優化：Canonical Tag解決「重複的標題標記」問題
　　一直以來梅干除了有使用Google Analytics分析工具外，也會使用網站管理員工具，而現在更名為Search Console，透過Search Console可知道目前網站被搜尋引擎的檢索狀況，以及關鍵字的排名，因此透過Google這二個免費工具，就能幫網站的SEO作基本的健檢，但最近梅干突然發現，怎麼重複的標題標記與重複的中繼說明這二項目，竟然有上千筆，讓梅干不得不好好留意一下，剛這二個項目則會影響到搜尋結果標題與搜尋，上網爬了一些資料後，才得知原來這是頁面權重性的問題。 　　由於梅干的網站是用WordPress架設，因此造成內容重覆實在是在所難免，最主要是因為像是留言，網址則會變comment-page1、comment-page2、comment-page3.....，但在標題與描述卻是一模一樣的，因此就會造成重複標記的問題，起初梅干還以為那就用程式控制，讓title秀出頁碼，結果發現不但沒用，反而錯誤變更多，最後才知道，原來Google對其它的搜尋引擎，共用規範出一個網址規範的標籤canonical tag，透過它就可解決此問題，因此此標籤是適用於所有的搜尋引擎，因此當你也發生相關問題的朋友，不妨也一塊來看看吧!
Step1
當進入Search Console管理頁面後，點左邊的 搜尋引外觀/改善HTML，分別在重覆中繼說明與標題二個項目，竟然都有三、四千筆。
梅問題－SEO優化：Canonical Tag解決「重複的標題標記」問題
Step2
點開來就會看到，所有重覆的頁面網址與標題。
梅問題－SEO優化：Canonical Tag解決「重複的標題標記」問題
Step3
而解法方法相當簡單，只要加入在</head>前方加入<link rel="canonical" href="http://xxx.xxx.xxx/" />標籤，即可解決。
梅問題－SEO優化：Canonical Tag解決「重複的標題標記」問題
Step4
當加入後，並不會立馬就變0，而是會慢慢的減少，過了一個月後，終於從四千多，降至三百多了。
梅問題－SEO優化：Canonical Tag解決「重複的標題標記」問題
↧
Search

網設必備－FontCDN將Google Fonts雲端字型整合的易使用

December 14, 2015, 2:00 pm
$
0
0
FontCDN將Google Fonts雲端字型整合的易使用
　　身為網頁設計人員，應該很常使用Google Fonts的雲端字型，應用於自己的網頁專案中，但使用過的朋友是否會感到Google Fonts所提供的平台，操作上實在有點不太親民，當要尋找字型時，得花些時間來搜索，所以國外有熱心的網友，將Google Fonts重新打造了一個整合平台，透過這個網站，不但更容易找到所需的文字，還可選擇需要那些字型的樣式，更易將Google Fonts雲端字型應用在自己的專案中。
FontCDN
網站名稱：FontCDN
網站連結：http://fontcdn.org/
Step1
進入網站後，除了可從左手邊的分類找尋外，也可用關鍵字的方式來搜索，當找到相關文字後，右手邊就會列出文字的縮圖。
FontCDN將Google Fonts雲端字型整合的易使用
Step2
點下縮圖後，上方是引用方式，下方是要選擇的字型樣式，這邊建議勾選自己所需就好，勾選的愈多，相對網頁載入的時間也愈長。
FontCDN將Google Fonts雲端字型整合的易使用
Step3
接著先把字型給載入，接著就可在css樣式中，來指定所載入的字型樣式。
FontCDN將Google Fonts雲端字型整合的易使用
Step4
這樣就可顯示出，剛所設定的字型樣式啦!是不是超簡易又方便呀!!
FontCDN將Google Fonts雲端字型整合的易使用
↧
↧

SEO優化：透過Bing網站管理工具分析網站與SEO優化

December 17, 2015, 2:00 pm
$
0
0
透過Bing網站管理工具分析網站與SEO優化
　　經營網站的朋友，都知道SEO的重要性，同時Google官方也有釋出相關的手冊，因此在設計與規畫網頁時，就會遵照手冊中的規範來製作，當網站設計完畢上線後，可透過Google的網站管理員工具，以及流量分析工具，透過這二個工具確實可快速的找出一些蛛絲馬跡，但當有誤錯時，只會顯示錯誤訊息，但卻沒有較明確的錯誤區域，因此就只能靠自己除錯，而這時不坊可試試微軟的Bing網站管理工具，裡面提供一個相當棒的功能，那就是網站SEO分析工具，透過這工具，不但可清楚知道那邊出錯外，還會提示相關的錯誤位置與解決辦法，如此一來就能快速且有效的幫網站SEO優化，讓網站更利於搜尋引擎來檢索。
Step1
進入微軟Bing網站管理員工具後，點左邊的 診斷與工具 / SEO分析程式，接著將要檢測的網址輸入右邊的輸入框中，再按「分析」。
透過Bing網站管理工具分析網站並優化SEO
Step2
當檢測完畢後，在SEO建議的地方，就會出現需要修正的項目與說明。
透過Bing網站管理工具分析網站並優化SEO
Step3
接著點右邊的「網頁來源」，就會看到貼心的將問題的地方，用黃色的色塊標示出來，接著再一一將這些問題解決。
透過Bing網站管理工具分析網站並優化SEO
Step4
都修正完畢後，再重新檢測一次，哈~就沒有再出現任何的問題啦!
透過Bing網站管理工具分析網站並優化SEO
↧

管理Adobe Creative Cloud雲端儲存空間素材檔案

December 30, 2015, 2:00 pm
$
0
0
梅問題－管理Adobe Creative Cloud雲端儲存空間檔案
　　在這月中有參加Photoshop CC響應式網頁應用的活動的朋友們，在活動中梅干將已製作好的PSD檔案，透過Brackets把檔案上傳到Adobe的雲端空間中，再載入到Brackets來進行版面的切割與編輯，讓切版變得更容易，而這個雲端空間，只要註冊為Adobe會員皆享有20GB儲存空間，但有在使用的朋友是否發現到，上傳檔案與素材相當的容易，當要刪除或管理時卻找不到，而管理雲端的檔案有二種方式，一個是透過它的桌面程式，採用同步的方式，另一個是直接在網頁中進行管理，而梅干個人比較偏好在網頁中來進行管理，己上傳的素材檔案，至於要怎麼來管理自己的Adobe雲端儲存檔案，現在就一塊來看看吧!
Step1
首先開啟CreativeCloud桌面管理面板後，切到資產的頁籤，再點下方的開始同步，就可進行管理。
梅問題－管理Adobe Creative Cloud雲端儲存空間檔案
Step2
或點在網上檢視。
梅問題－管理Adobe Creative Cloud雲端儲存空間檔案
Step3
接著就會進到個人的Adobe雲端儲存空間，再對著要刪除的素材檔，按滑鼠右鍵選擇封存。
梅問題－管理Adobe Creative Cloud雲端儲存空間檔案
Step4
再點封存。
梅問題－管理Adobe Creative Cloud雲端儲存空間檔案
Step5
接著進入已封存的清單中，就會看到已封存的檔案，這時再勾選要刪除的檔案後，再點上方的永久刪除，這時檔案才會從雲端中清除。
梅問題－管理Adobe Creative Cloud雲端儲存空間檔案
Step6
再按下永久刪除後，檔案就會正式的從雲端空間移除掉。
梅問題－管理Adobe Creative Cloud雲端儲存空間檔案
Step7
當在刪除的過程中，檔案會呈現灰色狀，當移除完畢後，就會在封存的清單中消除，這樣就正式的將檔案給刪掉啦!因此有在使用Adobe雲端碟的朋友，也趁著放假這幾天整一下囉!
梅問題－管理Adobe Creative Cloud雲端儲存空間檔案
↧

Adobe Brackets安裝Emmet擴充元件

January 3, 2016, 2:00 pm
$
0
0
梅問題－Adobe Brackets安裝Emmet外掛
　　現在有不少的網頁設計師，使用Sublime Text來設計網頁，除了Sublime Text外，也有另一個也相當受歡迎的編輯器，那就是Adobe Brackets，由於是Adobe自家的產品，因此在整合上更加的完整，可以直接在Brackets中直接載入PSD檔，並快速的將PSD檔自動儲存成網頁格式，這一點作的相當好。 　　除此之外Brackets與Sublime Text一樣，也有許多外掛可安裝，而在製作網頁時，為了加速製作時間，有隻外掛一定非裝不可，那就是Emmet，而這隻外掛支援的網頁編輯器相當的多，甚至就連Dreamweaver也有，因此先前梅干也分享過Dreamweaver的安裝方式，讓使用Dreamweaver的朋友們，也可感受到Emmet所帶來的便利，接下來看看如何在Brackets下安裝Emmet吧！
Emmet
外掛名稱：Emmet
下載連結：https://github.com/emmetio/brackets-emmet#readme
Step1
首先到外掛頁面後，點右上角的Download ZIP鈕，將外掛下載回來。
梅問題－Adobe Brackets安裝Emmet外掛
Step2
接著開Brackets後，點右邊的外掛擴充圖示。
梅問題－Adobe Brackets安裝Emmet外掛
Step3
接著把下載好的外掛zip壓縮包，直接拖拉到Brackets外掛安裝的左下角。
梅問題－Adobe Brackets安裝Emmet外掛
Step4
這時會出現錯誤的訊息框，接著先按Close鈕。
梅問題－Adobe Brackets安裝Emmet外掛
Step5
接著到node.js的官網中，下載並完成安裝。
梅問題－Adobe Brackets安裝Emmet外掛
Step6
這時開啟終端機，輸入下方的語法，進到此目錄下。
cd ~/Library/Application\ Support/Brackets/extensions/user/brackets-emmet
梅問題－Adobe Brackets安裝Emmet外掛
Step7
進入該目錄後，再輸入npm install，這樣就安裝完成了。
梅問題－Adobe Brackets安裝Emmet外掛
Step8
回到Brackets，立馬來試試看，輸入Emmet的語法。
梅問題－Adobe Brackets安裝Emmet外掛
Step9
輸入完畢再按下Tab鍵後，立即就會轉成HTML啦!
梅問題－Adobe Brackets安裝Emmet外掛
↧
↧

Bootstrap教學－左右滑出導覽列選單

January 24, 2016, 2:00 pm
$
0
0
梅問題－Bootstrap教學－左右滑出導覽列選單
　　這次總統選舉，三大候選人的官網都有支援RWD自適應網頁，讓支持者無論是使用桌機、平板、手機，都能正常的瀏覽網站，並時時觀注候選人的動態，而在這三大候選人之中，小英除了官網外，還有一個CI的設計規範網頁，一樣也是支援RWD自適應網頁，但比較特別的是，一般都是在手機模式下，才會顯示選單鈕，按一下後才將選單推出，但這個功能則是放在桌機版，直接點上方的目錄，立即就會推出選單，但它則是在上面蓋一層圖層，並將選單滑出，而梅干上網爬了一下文，找到一個類似的效果，唯一的差別則在於，當選單滑出時，內容也會一併被推出去，但網路上這範例只限左選單，梅干作了小修改，讓選單無論在左還右都能滑出，同時一樣架構於Bootstrap下使用。
Step1
將html標籤加入class="easy-sidebar-active"。
?View Code JAVASCRIPT
1 
<html class="easy-sidebar-active">
Step2
在body加入下方的html標籤。
?View Code JAVASCRIPT
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 
<html class="easy-sidebar-active">
<nav class="navbar navbar-inverse easy-sidebar">
  <div class="container-fluid"> 
    <div class="navbar-header">
       <!--easy-sidebar-toggle-right -->
      <button type="button" class="navbar-toggle easy-sidebar-toggle" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a> 
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
  <!-- /.container-fluid --> 
</nav>
 
<div class="container">
  <h1>Bootstrap Easy Sidebar Example</h1>
  <!--easy-sidebar-toggle-right -->
  <button class="btn btn-danger easy-sidebar-toggle">Toggle Sidebar</button>
</div>
Step3
在/body加入下方的script。
?View Code JAVASCRIPT
1 2 3 4 5 6 7 8 9 10 11 12 
<script src="js/jquery-1.11.0.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script>
//easy-sidebar-toggle-right
$('.easy-sidebar-toggle').click(function(e) {
    e.preventDefault();
   //$('body').toggleClass('toggled-right');
    $('body').toggleClass('toggled');
   //$('.navbar.easy-sidebar-right').removeClass('toggled-right');
    $('.navbar.easy-sidebar').removeClass('toggled');
});
</script>
Step4
加入easy-sidebar.css。
?View Code CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 
html.easy-sidebar-active {
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	margin: 0;
	padding: 0;
}
 
body {
	transition: 0.2s ease;
	min-height: 100%;
	margin: 0;
	padding: 0;
}
body.toggled {
	-webkit-transform: translateX(250px);
	transform: translateX(250px);
}
 
.navbar.easy-sidebar {
	transition: 0.2s ease;
	position: absolute;
	width: 250px;
	top: 0;
	left: -250px;
	min-height: 100%;
	border-radius: 0;
	margin: 0;
	z-index: 9999;
}
 
.navbar.easy-sidebar.toggled {
	-webkit-transform: translateX(250px);
	transform: translateX(250px);
}
 
 
body.toggled-right {
	-webkit-transform: translateX(-250px);
	transform: translateX(-250px);
}
 
.navbar.easy-sidebar-right {
	transition: 0.2s ease;
	position: absolute;
	width: 250px;
	top: 0;
	right: -250px;
	min-height: 100%;
	border-radius: 0;
	margin: 0;
	z-index: 9999;
}
 
.navbar.easy-sidebar-right.toggled-right {
	-webkit-transform: translateX(-250px);
	transform: translateX(-250px);
}
 
.easy-sidebar .btn {
	width: 100%;
}
 
.navbar.easy-sidebar .navbar-header {
	margin: 0 -15px;
	float: none;
}
 
.navbar.easy-sidebar .navbar-brand {
	margin: 0;
}
 
.navbar.easy-sidebar .navbar-toggle {
	display: inline-block;
}
.navbar.easy-sidebar .navbar-toggle span.icon-bar:nth-child(2) {
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transform: translate(2px, -5px) rotate(45deg);
	transform: translate(2px, -5px) rotate(45deg)
}
.navbar.easy-sidebar .navbar-toggle span.icon-bar:nth-child(3) {
	display: none;
}
.navbar.easy-sidebar .navbar-toggle span.icon-bar:nth-child(4) {
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transform: translate(2px, 4.5px) rotate(-45deg);
	transform: translate(2px, 4.5px) rotate(-45deg);
}
 
.navbar.easy-sidebar .nav.navbar-nav {
	margin: 7.5px -15px;
	float: none;
}
.navbar.easy-sidebar .nav.navbar-nav>li {
	float: none;
}
.navbar.easy-sidebar .nav.navbar-nav>li>a {
	padding: 10px 15px;
}
 
.navbar.easy-sidebar .navbar-nav .open .dropdown-menu .divider {
	box-shadow: 0 1px 0 rgba(255,255,255, 0.1);
}
 
 
.navbar.easy-sidebar .navbar-form {
	padding: 10px 15px;
	margin: 8px -15px;
	border-top-width: 1px;
	border-top-style: solid;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
}
.navbar.easy-sidebar .navbar-form .form-group {
	margin-bottom: 5px;
	display: block;
}
.navbar.easy-sidebar .navbar-form .form-group .form-control {
	display: block;
	width: 100%;
}
 
 
/**/
.navbar.easy-sidebar-right .navbar-header {
	margin: 0 -15px;
	float: none;
}
 
.navbar.easy-sidebar-right .navbar-brand {
	margin: 0;
}
 
.navbar.easy-sidebar-right .navbar-toggle {
	display: inline-block;
}
.navbar.easy-sidebar-right .navbar-toggle span.icon-bar:nth-child(2) {
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transform: translate(2px, -5px) rotate(45deg);
	transform: translate(2px, -5px) rotate(45deg)
}
.navbar.easy-sidebar-right .navbar-toggle span.icon-bar:nth-child(3) {
	display: none;
}
.navbar.easy-sidebar-right .navbar-toggle span.icon-bar:nth-child(4) {
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transform: translate(2px, 4.5px) rotate(-45deg);
	transform: translate(2px, 4.5px) rotate(-45deg);
}
 
.navbar.easy-sidebar-right .nav.navbar-nav {
	margin: 7.5px -15px;
	float: none;
}
.navbar.easy-sidebar-right .nav.navbar-nav>li {
	float: none;
}
.navbar.easy-sidebar-right .nav.navbar-nav>li>a {
	padding: 10px 15px;
}
 
.navbar.easy-sidebar-right .navbar-nav .open .dropdown-menu .divider {
	box-shadow: 0 1px 0 rgba(255,255,255, 0.1);
}
 
 
.navbar.easy-sidebar-right .navbar-form {
	padding: 10px 15px;
	margin: 8px -15px;
	border-top-width: 1px;
	border-top-style: solid;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
}
.navbar.easy-sidebar-right .navbar-form .form-group {
	margin-bottom: 5px;
	display: block;
}
.navbar.easy-sidebar-right .navbar-form .form-group .form-control {
	display: block;
	width: 100%;
}
@media (max-width:  768px) {
	body.toggled {
		position: fixed;
	}
}
Step5
完成後，可看到一個按鈕，當按一下就可將左選單的導覽開啟。
梅問題－Bootstrap教學－左右滑出導覽列選單
Step6
而梅干作了小調整，只要把註解中的替換後，就可變成右選單，可看下方的範例預覽，或下載原檔比較容易理解。
梅問題－Bootstrap教學－左右滑出導覽列選單
[範例預覽-右選單] [範例預覽-左選單] [範例下載]
↧

Bootstrap教學－Bootstrap讓網格系統內的多個div高度相同

January 28, 2016, 2:00 pm
$
0
0
梅問題－Bootstrap教學－Bootstrap讓網格系統內的多個div高度相同
　　以前使用Table排版，當一列有三個區塊時，Table會依最三個裡面內容元素最多的高度為主，並將其它二個區塊也一併撐高，但到了DIV版本時，若想要將二個DIV等高，除了將DIV原來的屬性變成table外，不然就是使用javascript，而最近梅干發現一個更簡單的方式，就能將多個DIV變成等高，同時還能套用在Bootstrap的網格系統中，並還支援各瀏覽器，因此也有在使用Bootstrap套件的朋友，現在也一塊來看看，如何將Bootstrap的網格系統中，也讓裡面的DIV變成等高。
Step1
在row層中，再包覆一個equalheight的DIV。
<div class="container">
　 <div class="row">
　　　 <div id="equalheight"></div>
　 </div>
</div>
Step2
接著在equalheight的div中，開始使用Boostrap的網格。
<div id="equalheight">
　　<div class="col-md-4"></div>
　　<div class="col-md-4"></div>
　　<div class="col-md-4"></div>
</div>
Step3
完成後，再每個col-md-*中，再用ehdiv包覆，並在div內就可加入內容。
<div class="col-md-4">
　 <div class="ehdiv"></div>
</div>
<div class="col-md-4">
　 <div class="ehdiv"></div>
</div>
<div class="col-md-4">
　 <div class="ehdiv"></div>
</div>
Step4
最後再加入style，這樣就大功告成囉。

.ehdiv{
　margin-bottom: -10000px;
　padding-bottom: 10000px;
　background-color:#efefef;
}

#equalheight {
　overflow: hidden;
}

Step4
完成後，在一般的桌機尺寸時，DIV則會等高，當變成切換成行動版尺寸時，區塊則會自動縮回原先的大小。
梅問題－Bootstrap教學－Bootstrap讓網格系統內的多個div高度相同
[範例預覽] [範例下載]
↧

Website Grader 網站測速、SEO、行動裝置檢測與優化建議

February 1, 2016, 2:00 pm
$
0
0
梅問題－Website Grader 網站測速、SEO、行動裝置檢測與優化建議
　　隨著SEO的規則不斷的改變，從標籤是否使用正確、網站的速度、行動裝置....等，都會被列為SEO排名評比，因此先前梅干也分享幾個SEO檢測的網站，能幫網站進行檢測與優化，而最近梅干又發現另一個相當老牌的網站檢測平台Website Grader，它主要會針對網站的四個指標進行檢測，包含效能、行動裝置、seo、安全性...等，除了會幫網站打分數外，也會針對有需要調整的地方進行建議，因此要讓網站是高搜尋引擎的曝光表現，也趕快來幫網站檢測一下吧!
Website Grader
網站名稱：Website Grader
網站連結：https://website.grader.com/
Step1
進入網站後，輸入要檢測網站的網址。
梅問題－Website Grader 網站測速、SEO、行動裝置檢測與優化建議
Step2
接著就會開始進行檢測與評分，滿分是100，綠色表示沒問題，黃色則表示該進行處理，這時可點上方的名稱進行跳頁。
梅問題－Website Grader 網站測速、SEO、行動裝置檢測與優化建議
Step3
在行動裝置的部分，竟然要製作為RWD才符合行動裝置。
梅問題－Website Grader 網站測速、SEO、行動裝置檢測與優化建議
Step4
在SEO的部分，原來是描述檔的文字太多了。
梅問題－Website Grader 網站測速、SEO、行動裝置檢測與優化建議
Step5
這時點READ MORE，可看到相關的解釋頁面。
梅問題－Website Grader 網站測速、SEO、行動裝置檢測與優化建議
Step6
當調整後，seo終算解決了，至於行動裝置版改成RWD，看來要花點時間來處理了，因此有網站的朋友，也趕快幫網站檢測一下囉!
梅問題－Website Grader 網站測速、SEO、行動裝置檢測與優化建議
↧
Search

JPEGmini 支援巢狀式資料夾進行圖片壓縮，且低失真率

March 2, 2016, 2:00 pm
$
0
0
梅問題－JPEGmini支援巢狀式資料夾進行圖片壓縮低失真率
　　拖慢網站的讀取速度，絕大部分在於圖片，當頁面中的圖片愈多，相對的載入時間就愈長，因此要如何有效的幫圖片廋身，是一個相當重要的課題，同時Google也會針對網站的讀取速度，加入SEO的排名評分，因此梅干先前也分享過幾款的圖片壓縮器，像是TinyPNG、PP鴨、Compressor.io....等，雖然歷縮的效果不錯，同時圖片的失真率也很低，但唯一最大的問題則是只針對單一資料夾內的圖片才能進行壓縮。當有巢狀式資料夾時，就無法進行壓縮，這也讓梅干相當的困擾，當今天圖片放到多層目錄下後，就無法運行，只能手動的進入一一的資料夾內，將裡面的圖片拖拉出來進行壓縮，實在有點小麻煩。 　　而最近梅干發現另一款的圖片壓縮工具JPEG Mini，不但有線上版外，還有提供桌面程式與Photoshop、Lightroom和Server CDN等服務，更重要的一點是，JPEG Mini圖片壓縮器，支援巢狀式壓縮，同時只要將要壓縮的資料夾，直接拖拉進來，立即就可進行壓縮，同時有不錯的壓縮比例外，圖片的失真率也相當的低，因此無論是身為網頁設計師，還是攝影師，這款圖片壓縮器絕不容錯過。
JPEG Mini：
軟體名稱：JPEG Mini
支援平台：Windows、MAC、線上、Server CDN
軟體性質：付費(免費試用)
軟體下載：http://www.jpegmini.com/
Step1
進入下載頁面後，點一下Download Free Trial鈕。
梅問題－JPEGmini支援巢狀式資料夾進行圖片壓縮低失真率
Step2
當下載完畢，並安裝完成後，第一啟用時，只需輸入姓名與Email就可完成註冊，比較特別的是，該軟體的試用版，是以一天限20張，而不是以天數。
梅問題－JPEGmini支援巢狀式資料夾進行圖片壓縮低失真率
Step3
用法相當的簡單，只需將要壓縮的資料夾，直接拖拉到該軟體的畫面中央，並放開滑鼠後，立即就會開始進行壓縮。
梅問題－JPEGmini支援巢狀式資料夾進行圖片壓縮低失真率
Step4
當壓縮完畢後，可看到原來是4.5MB變成4MB，足足少了0.5MB。
梅問題－JPEGmini支援巢狀式資料夾進行圖片壓縮低失真率
Step5
來看一下，壓縮前與壓縮後，幾乎感覺不到差異，但二張之間就差了17KB。
壓縮前
Step5
雖然看起來好像才差一點點，但當圖檔一多時，還可觀的，這是梅干將梅問題教學網中的圖片全部進行壓縮。
梅問題－JPEGmini支援巢狀式資料夾進行圖片壓縮低失真率
Step6
當壓縮完畢後，整個廋了快一倍。
梅問題－JPEGmini支援巢狀式資料夾進行圖片壓縮低失真率
↧
↧

Bootstrap教學－Bootstrap Affix滾動式滑出置頂導覽列實作

March 9, 2016, 2:00 pm
$
0
0
梅問題－Bootstrap教學－Bootstrap Affix滾動式滑出置頂導覽列實作
　　那天好友正好北上，就來找梅干聊聊天，就與梅干分享了一個免費的CDN服務，同時就近主機節點就在香港，這與目前知名的cloudflare相較下，還真是近多了，雖然說cloudflare的速度也不差，但礙於中華線路每當晚上時，總會有點卡卡的，因此梅干則是有必要時，才會將它開啟，所以那天梅干就抽來研究一下這免費的CDN服務，結果看著看著，竟然對於上方的導覽列給吸引，這時職業病又來了，雖然這個已不是新作法，但想看看寫法有沒有更簡易些，結果才意外的發現到，原來這間CDN竟然也是使用Bootstrap，同時置頂也是使用Bootstrap內建的Afiix，而這滑出滑入的效果，竟然是用CSS3的動畫語法製作的，而非使用javascript，所以梅干也稍稍整理，並加了一點簡易的判斷，讓選單在版頭下方，當頁面滾動超出多少範圍時，才滑動效果套入，至於要怎麼做，現在就一塊來看看吧!!
Step1
首先，在導覽列後方，設定區塊滑到指定的高度後，加入affix的類別名稱，這邊梅干設定了1000像素。
梅問題－Bootstrap教學－Bootstrap Affix滾動式滑出置頂導覽列實作
Step2
接著在下方的動畫效果，加入CSS樣式中。
?View Code CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 
.fixed-strip.affix {
    top: 0;
}
.fixed-strip {
    position: fixed;
    top: -100px;
    right: 0;
    left: 0;
    z-index: 9999;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
Step3
接著在/body前，加入javascript判斷，當上方的藍色版頭區塊，大於滾動高度再把動態的效果加入，這時再滾動到1000像素時，就會將剛所設定的動畫效果給套進去啦!。
?View Code JAVASCRIPT
1 2 3 4 5 6 7 8 
$(window).scroll(function(){
  var win_h = $(document).scrollTop();
    if(win_h >= $('#header').height()){
        $('.navbar').addClass('fixed-strip');
    }else{
        $('.navbar').removeClass('fixed-strip');
    }
  });
Step4
當完成時，畫面滾動到1000像素時，上方的導覽列，就會由向上向下滑出，當小於1000時，就會再向上滑動收回。
梅問題－Bootstrap教學－Bootstrap Affix滾動式滑出置頂導覽列實作
[範例預覽] [範例下載]
↧

將Chrome瀏覽器變成「Web Server」方便行動裝置實機測試

March 20, 2016, 3:00 pm
$
0
0
梅問題－Chrome瀏覽器變成Web Server方便行動裝置實機測試
　　隨著裝置愈來愈多元，因此現在在設計網頁，已不像五、六年那麼的單純，每當將頁面製作好後，大部分都會用拖拉視窗，來模擬在各裝置下的效果，雖然可大略看一下是否有狀況，但最終還是得到真的環境，才能確切的知道，當頁面行動裝置上時，文字大小是否洽當好閱讀，以及按鈕是否好按，和所寫的Javascript是否能正常的運作，而這時若要實現，將手機連進電腦，首先就是要先將電腦變成一台WEB Server，這時不外乎就會使用USBWebserver、Xampp、MAMAP....等，但這些頁面只是單純的HTML，也不會使用PHP與MYSQL資料庫，因此這時有個更快速且方便的作法，就是把Chrome瀏覽器，變成Web Server，如此一來就能將電腦中所編輯的網頁，讓手機連進來，並在實機上瀏覽結果，而這隻外掛操控也相當的簡易與方便，身為網頁設計人員，也趕快來看一下囉!
Web Server for Chrome：
外掛名稱：Web Server for Chrome
支援平台：Google Chrome
下載網址：https://chrome.google.com/
Step1
進入外掛的安裝畫面後，點右上角的加到CHROME鈕，依序就可完成安裝。
梅問題－Chrome瀏覽器變成Web Server方便行動裝置實機測試
Step2
比較特別的是，這隻外掛安裝完畢後，並不會出現在網址列後方，而是在應用程式時，這時點一下Web Server圖示。
梅問題－Chrome瀏覽器變成Web Server方便行動裝置實機測試
Step3
開啟後，點下CHOOSE FOLDER鈕，選擇目錄。
梅問題－Chrome瀏覽器變成Web Server方便行動裝置實機測試
Step4
接著選擇專案目錄。
梅問題－Chrome瀏覽器變成Web Server方便行動裝置實機測試
Step5
選擇完畢後，再網址列上方輸入127.0.0.1與埠號8887，就可看到剛所設定的專案目錄中的內容。
梅問題－Chrome瀏覽器變成Web Server方便行動裝置實機測試
Step6
由於127.0.0.1是本機的意思，因此手機是無法連進來的，這時將下方的Accessible to other computers的選項勾起來。
梅問題－Chrome瀏覽器變成Web Server方便行動裝置實機測試
Step7
接著再把上方的開啟鈕，關閉再開啟一次，這時下方就會出現該電腦，由分享器中所配置的一組虛擬ip。
梅問題－Chrome瀏覽器變成Web Server方便行動裝置實機測試
Step8
這時將手機與電腦連到同一個分享器上，再開啟瀏覽器，並輸入電腦的IP位置，這時就可瀏覽到電腦中的檔案啦!這樣就可即時的預覽啦!當電腦進行任何修改儲存時，手機重整瀏覽器，也會隨即顯示結果畫面，這對於在設計網頁人員來說，就相當的方便，因此身為網頁設計人員，也趕快來裝一下吧!
梅問題－Chrome瀏覽器變成Web Server方便行動裝置實機測試
↧

Google Fonts推出五款網頁用，雲端字型「思源黑、仿宋體、黑體、明體、圓體、楷書」

March 30, 2016, 3:00 pm
$
0
0
梅問題-Google Fonts推出五款實用的網頁用雲端字型「思源黑、仿宋體、黑體、明體、圓體、楷書」
　　一直以來在設計網頁時，版型可以自由的發揮與變化，但唯獨字型就那一百零一個「新細明體」，雖然目前有第三方的雲端字型可使用，但收費則是依照網站的流量的多寡，因此若流量大一點的朋友，每月下來還真是一筆費用，雖然先前分享的Adobe雲端字型，有提供免費的版本，除了有單月25,000 次的瀏覽次數外，還需綁定網域名稱與註冊為Adobe ID才能使用。 　　但最近Google終於推出Google Fonts網頁專用的雲端字型，不但沒有任何流量的限制，同時也無需註冊與綁定網域，就能任意的將Google的思源黑體套字至網頁中，而除了思源黑體外，還有cwTeXFangSong（仿宋體）、cwTeXHei（黑體）、cwTeXMing（明體）、cwTeXYen（圓體）和cwTeXKai（楷體）五種字型可選擇，因此網頁不再只有新細明體啦!身為網頁設計的朋友，現在也一塊來看看，怎麼來套用Google Fonts雲端字型到自己的專案中裡吧!
Google Fonts: Early Access：
網站名稱：Google Fonts: Early Access
網站連結：https://www.google.com/fonts/earlyaccess
Step1
進入Google Fonts的頁面後，向下拉找到Noto Sans TC，接著在下方就會看到使用的方法，分別只需將文字檔，載入到CSS中，並當要用時，再把字型指定到所需的區塊中。
梅問題-Google Fonts推出五款實用的網頁用雲端字型「思源黑、仿宋體、黑體、明體、圓體、楷書」
Step2
所以只需將文字匯入CSS中，再把字型指定到所需的區塊中，這邊梅干將此字型應用於.content的div中。
梅問題-Google Fonts推出五款實用的網頁用雲端字型「思源黑、仿宋體、黑體、明體、圓體、楷書」
Step3
當儲存完畢後，一開始會先以新細明體呈現，當字型載入完畢後，則會套用Google的思源黑體。
梅問題-Google Fonts推出五款實用的網頁用雲端字型「思源黑、仿宋體、黑體、明體、圓體、楷書」
Step4
除了Google思源黑外，再向下拉，分別就會看到cwTeXFangSong系列的中文字型，而這些是由吳聰敏、吳聰慧、翁鴻翎所開發的，分別有cwTeXFangSong（仿宋體）、cwTeXHei（黑體）、cwTeXMing（明體）、cwTeXYen（圓體）和cwTeXKai（楷書）。
梅問題-Google Fonts推出五款實用的網頁用雲端字型「思源黑、仿宋體、黑體、明體、圓體、楷書」
Step5
使用方法跟剛剛一樣，將字型檔當匯入後，再把文型指定到所需的區塊中。
梅問題-Google Fonts推出五款實用的網頁用雲端字型「思源黑、仿宋體、黑體、明體、圓體、楷書」
Step6
就這樣，在一個頁面中，就能同時有黑體與圓體，因此當下回遇到客戶有字型需求時，不妨可試試看囉!
梅問題-Google Fonts推出五款實用的網頁用雲端字型「思源黑、仿宋體、黑體、明體、圓體、楷書」
↧

Coolors線上配色平台，從生活中尋找配色靈感

April 12, 2016, 3:00 pm
$
0
0
梅問題－Coolors線上配色平台，從生活中尋找配色靈感
　　配色一直是許多人的痛，要如何搭配不會產生違和感，還真是一門學問，這也讓許多人，時常為了配色而半天時間就不見了，而先前也分享過許多的配色平台，甚至也曾分享過到泰國旅行時，透過在地的招牌、文具找出配色的法則，借由平台或旅行從中找出配色的靈感，而最近梅干又發現另一個配色平台，除了可透過拖曳來進行配色外，還可透過生活中所拍攝中的照片進行選色，同時只需手機中所拍攝的相片即可，因此當下回配色卡卡時，不妨可利用此平台，與手機中所拍攝的照片，找出配色的靈感。
Coolors：
網站名稱：Coolors
連結網址：https://coolors.co/
Step1
進入網站後，點一下Start the generator 鈕。
梅問題－Coolors線上配色平台，從生活中尋找配色靈感
Step2
接著將滑鼠，移上色塊中，除了可以移動色塊，也可透過上方的控制桿，改變色彩。
梅問題－Coolors線上配色平台，從生活中尋找配色靈感
Step3
當要透過控制桿配色，除非已有配色的概念，否則還真是難下手，這時可選擇中間的相機圖示。
梅問題－Coolors線上配色平台，從生活中尋找配色靈感
Step4
接著點BROWSE IMAGE鈕，選擇圖片。
梅問題－Coolors線上配色平台，從生活中尋找配色靈感
Step5
這時就可將手機中，平常隨手拍攝的照片。
梅問題－Coolors線上配色平台，從生活中尋找配色靈感
Step6
當選擇完畢後，先點下方的色塊，再移動左上的探色器，移到圖片上進行選色。
梅問題－Coolors線上配色平台，從生活中尋找配色靈感
Step7
除了手動選色外，也可按下方的AUTO鈕，交由電腦幫你選色。
梅問題－Coolors線上配色平台，從生活中尋找配色靈感
Step8
若不滿意的話，可以一直點AUTO，就會一直重新選色，直到挑中自己喜愛的顏色。
梅問題－Coolors線上配色平台，從生活中尋找配色靈感
Step9
當選完色後，再將滑鼠移到上方，選擇REFINE，就可再作細部的微調。
梅問題－Coolors線上配色平台，從生活中尋找配色靈感
Step10
這時上方會出現四個項目，進行細部的調整。
梅問題－Coolors線上配色平台，從生活中尋找配色靈感
Step11
都微調後，再按EXPORT，將配好的色給匯出。
梅問題－Coolors線上配色平台，從生活中尋找配色靈感
Step12
選擇要匯出的格式，除了可匯出影像檔外，也可匯出網頁用的CSS檔。
梅問題－Coolors線上配色平台，從生活中尋找配色靈感
Step13
當匯出影像檔後，還可將剛所配好的色彩，建立到Adobe Color下，作為自己配色的素材，是不是超方便的呀!
梅問題－Coolors線上配色平台，從生活中尋找配色靈感
↧
↧

Pinegrow Web Editor全視覺化的Bootstrap開發工具

May 3, 2016, 3:00 pm
$
0
0
梅問題－Pinegrow Web Editor全視覺化的Bootstrap開發工具
　　Bootstrap是目前相當火紅，且最廣為被使用的RWD框架，甚至也有不少的網頁開發工具，紛紛的支援Bootstrap，但大部分支援的網頁開發工具，都以原始碼的編輯模式，來進行設計，但這對於早以習慣Dreamweaver全視覺化的網頁設計師們，一時要從全視覺化，變成全文字模式，透過原始碼一個一個將版型給刻出來，還真是讓許多網頁設計吃不消。 　　因此梅干也不斷在尋找，是否有比較視覺化的網頁設計軟體，並支援Bootstap框架，因此先前梅干也曾分享過，幾款的視覺化的Bootstrap編輯工具，但支援度都不夠完整，而最近梅干發現一套，不但支援度完整，同時操控更簡易的全視覺化網頁編輯軟體Pinegrow Web Editor，而這套網頁編輯器，不但全視覺化的產生Bootstrap所有架構外，甚至還可開發WordPress的佈景主題，同時相當的好上手，因此有在使用Bootstrap的朋友，與需要開發WordPress佈景主題的朋友，這款全視覺化的網頁軟體絕不容錯過喔!
Pinegrow Web Editor：
軟體名稱：Pinegrow Web Editor
軟體語言：英文
軟體性質：付費
適用平台：Win/Mac/Liunx
軟體下載：http://pinegrow.com/
Step1
進入軟體官網，點畫面中的下載鈕，將軟體下載回來。
梅問題－Pinegrow Web Editor全視覺化的Bootstrap開發工具
Step2
下載回來，雙響完成安裝後，啟用軟體並點一下+號，建立一個網頁。
梅問題－Pinegrow Web Editor全視覺化的Bootstrap開發工具
Step3
接著選擇所需的框架，再點一下範本。
梅問題－Pinegrow Web Editor全視覺化的Bootstrap開發工具
Step4
建立好後，左手邊就是所有Bootstrap可用的框架與特效。
梅問題－Pinegrow Web Editor全視覺化的Bootstrap開發工具
Step5
除了透過區塊選擇所需的效果外，也可用搜尋的方式，找到後再將效果直接拖拉到中間白色的編輯區域中。
梅問題－Pinegrow Web Editor全視覺化的Bootstrap開發工具
Step6
這時最右邊，就會看到整個樹狀結構，可點選標籤進行區塊的選擇，當不要時可直接按鍵盤的del鍵外，也可按元件下方的垃圾桶，將元素刪除。
梅問題－Pinegrow Web Editor全視覺化的Bootstrap開發工具
Step7
甚至加入廣告輪播特效後，還可設定輪播圖片的路徑。
梅問題－Pinegrow Web Editor全視覺化的Bootstrap開發工具
Step8
同時也可設定CSS，並切換上方的頁籤，就可針該元件設定CSS的樣式，每個CSS元素後方都有圖示方便理解。
梅問題－Pinegrow Web Editor全視覺化的Bootstrap開發工具
Step9
除了全視覺化設計外，也可開啟原始碼編輯模式。
梅問題－Pinegrow Web Editor全視覺化的Bootstrap開發工具
Step10
這時只會開啟剛所選擇元件的原始碼，方便進行細部的修正。
梅問題－Pinegrow Web Editor全視覺化的Bootstrap開發工具
Step11
當都編輯好後，也可從上方修改預覽的尺寸，這時畫面也會跟著一起縮放，而這套Pinegrow Web Editor的功能還蠻強大的，同時可編輯的東西也相當的多，因此習慣視覺化的網頁編輯軟體，這一款有空可以體驗看看喔!
梅問題－Pinegrow Web Editor全視覺化的Bootstrap開發工具
↧

Bootstrap必知!內建clearfix解決網格DIV區塊長短腳問題

May 9, 2016, 3:00 pm
$
0
0
梅問題－Bootstrap必知!內建clearfix解決網格區塊長短腳問題
　　有用過Bootstrap的朋友，應該對於Bootstrap的Grid System網格系統，感到相當的便利，只需透過css類別的指定後，就可快速的將畫面分割成所需的版型，而這些區塊的比例，Bootrap早已都計算好了，但這些區塊為能隨著裝置解析不同，而跟著作堆疊，因此都是用浮動靠齊的方式，因此在網格系統中的每一個DIV的高度都要一致，當今天有長有短時，就會造成跑版，因此先前梅干也分享一篇DIV區塊等高的作法，除此之外Bootstrap內建也有相關的屬性可設定，只要加入clearfix後，就可解決區塊長短腳，造成區塊跑版的問題啦!至於怎麼做現在也一塊來看看囉!
Step1
透過Bootstrap的網格系統後，可快速的將版型，分割成所需的數量，但區塊中的內容，若長度不一時，就會造成跑版的問題。
梅問題－Bootstrap必知!內建clearfix解決網格區塊長短腳問題
Step2
這時只需在每個區間下，加入clearfix的div區塊，就可解決此問題啦!
梅問題－Bootstrap必知!內建clearfix解決網格區塊長短腳問題
Step3
重新整理後，梅干這邊特別加了紅框，可看到剛加入的DIV會把區塊包覆起來，但在手機版時，就會多了一塊空白。
梅問題－Bootstrap必知!內建clearfix解決網格區塊長短腳問題
Step4
接著在剛的div後方，再加hidden-xs，讓在手機版時不顯示此區塊。
梅問題－Bootstrap必知!內建clearfix解決網格區塊長短腳問題
Step5
設定完成後，就只會在桌機版才會顯示，切換到手機版時，就會被隱藏起來，因此在手機版就不會再多一塊空白啦!
梅問題－Bootstrap必知!內建clearfix解決網格區塊長短腳問題
↧
Search

Chrome外掛－Pinegrow Web Designer免費版Bootstrap視覺化開發工具

May 16, 2016, 3:00 pm
$
0
0
梅問題－Chrome外掛－Pinegrow Web Designer免費版Bootstrap視覺化開發工具
　　先前曾分享過Pinegrow Web Designer這套網頁開發工具，不但全視覺化操控，同時可開發Bootstrap、Foundation、AngularJS...外，甚至還可開發WordPress的佈景主題，這對於設計人員來說，是件相當方便的事情，無需看著冷冰冰的原始碼，腦海裡自己勾勒出整個網頁的架構藍圖，甚至Pinegrow Web Designer這套所產生出的Bootstrap的網頁框架，右手邊還會呈現出網站的樹狀結構外，同時還可以隨時修改已建立的結構。 　　而這麼好用的工具，並非免費且隨著所需的功能不同，費用也不同，但若只需使用到Bootstrap的朋友，有福啦!Pinegrow Web Designer有推出免費版，且直接掛載在Chrome瀏覽器中，直接開啟瀏覽器立即就可使用，因此有在使用Bootstrap的朋友，也趕快來安裝一下囉!
Pinegrow Web Designer：
外掛名稱：Pinegrow Web Designer
支援平台：Google Chrome
下載網址：https://chrome.google.com/
Step1
進到外掛網頁後，點一下加到CHROME鈕，就可完成安裝。
梅問題－Chrome外掛－Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step2
這隻外掛安裝完後，會放在應用程式中，接著點一下Pinegrow Web Designer的圖示。
梅問題－Chrome外掛－Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step3
開啟Pinegrow Web Designer應用程式後，點右下的OK鈕.
梅問題－Chrome外掛－Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step4
操作界面就與之前的電腦版一模一樣，畫面也是一分為三，中間可以建立新專案，或是開啟舊檔襄進行編輯。
梅問題－Chrome外掛－Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step5
建立好後，左邊欄就是所有可用的元件，點一下或拖拉到中間的工作視窗即可。
梅問題－Chrome外掛－Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step6
甚至也可編輯元件的原始碼，功能一點也沒少。
梅問題－Chrome外掛－Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step7
當編輯完畢後，點上方的File / Downlaod project Zip，就可把剛所製作的專案給下載回來。
梅問題－Chrome外掛－Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step8
接著再點對話框上方的連結，就可將專案給下載回來。
梅問題－Chrome外掛－Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step9
下載完畢，解壓縮後，就會看到所有的檔案，接著再點new.html檔。
梅問題－Chrome外掛－Pinegrow Web Designer免費版Bootstrap視覺化開發工具
Step10
立馬可用瀏覽器來檢查一下，基本上在Pinegrow Web Designer看到的畫面，幾乎與結果畫面是一致的，因此有這工具後，讓在製作RWD網頁更加的簡易。
梅問題－Chrome外掛－Pinegrow Web Designer免費版Bootstrap視覺化開發工具
↧

CSS3的新單位(vh/vw)讓Bootstrap廣告輪播也支援全版廣告

May 18, 2016, 3:00 pm
$
0
0
梅問題－CSS3的新單位vh/vw，讓Bootstrap廣告輪播也可全螢幕
　　先前曾透過百分比，來將Bootstrap的廣告輪播系統變成全螢幕，但這時圖片就會依照比例，等比的將圖片放到滿版，這時當螢幕的比例與圖片不符時，就會發現到，廣告輪播的切換鈕跑到下方去，同時還會出現捲軸，因此這時若要解決此問題，就只能透過jQuery來計算當前螢幕的顯示比例，再去縮放圖片，但現在有更簡單的方法啦!透過CSS3的新單位vh與vw，就可完成全螢幕啦!而vh與vw到底是什麼單位呢?現在就一塊來了解吧!
CSS3新單位vw：
vw：view width指的是螢幕可視範圍寬度百分比，用法與%相當雷同，當設為10表示為可視範圍10%的意思。
梅問題－CSS3的新單位vh/vw，讓Bootstrap廣告輪播也可全螢幕
CSS3新單位vh：
vh：view height指的是螢幕可視範圍高百分比，有了vh後，終於可實現高度百分百的夢想，就很像早期使用table時，可設定高度100%，高度撐滿整個螢幕。
梅問題－CSS3的新單位vh/vw，讓Bootstrap廣告輪播也可全螢幕
CSS3新單位vmin/vmax：
在了解CSS3新單位的vw與vh後，還有另一單位為vmin和vmax，而vmin指是取得「長、寬較小值百分比」，vmax則是取得「長、寬較大值百分比」，在了解CSS3的新單位，就可將這單位應用到Bootstrap中，將原來的廣告輪播變全版面的廣告。
Step1
只需在CSS中加入以下的設定值。
梅問題－CSS3的新單位vh/vw，讓Bootstrap廣告輪播也可全螢幕
Step2
這樣就Bootstrap的廣告輪播，就會以全版顯示，是不是超EZ的呀!!
梅問題－CSS3的新單位vh/vw，讓Bootstrap廣告輪播也可全螢幕
[範例預覽] [範例下載]
↧
↧

Chrome外掛－OSX Resizer讓Chrome瀏覽器視窗可以小於400像素

May 19, 2016, 12:00 am
$
0
0
梅問題－Chrome外掛－OSX Resizer讓瀏覽器視窗可以小於400像素以下
　　當今天在設計網頁時，為了方便測試網頁在行動裝置下，版面是否正常呈現，這時就會直接拖拉視窗，改變視窗尺寸，來模擬一下在行動裝置下的各種解晰，同時還可搭配瀏覽器中的網站管理工具，當有任何問題時，方便進行除錯，但是否有發現到，無論那一家的瀏覽器，都有最小的限制，差不多在400像素左右，就無法再向下縮，這時就得實際手機，進行測試，才可知道是否有跑版。 　　相信這問題，應該是許多從事網頁設計朋友，共同的困擾，但現在只需在Chrome瀏覽器下安裝此外掛後，立即就可解決此問題啦!同時視窗變得超軟Q，想縮多小就縮多小，因此身為網頁設計的朋友，現在也趕快來看看囉!
OSX Resizer：
外掛名稱：OSX Resizer
支援平台：Google Chrome
下載網址：https://chrome.google.com/
Step1
進到外掛網頁後，先點加到CHROME鈕。
梅問題－Chrome外掛－OSX Resizer讓瀏覽器視窗可以小於400像素以下
Step2
接著再點新增擴充功能鈕，就可完成安裝。
梅問題－Chrome外掛－OSX Resizer讓瀏覽器視窗可以小於400像素以下
Step3
當安裝完畢後，在網址列後方，就會出現一個手機的圖示。
梅問題－Chrome外掛－OSX Resizer讓瀏覽器視窗可以小於400像素以下
Step4
當要啟用時，只需對著該圖示點一下。
梅問題－Chrome外掛－OSX Resizer讓瀏覽器視窗可以小於400像素以下
Step5
接著就會將目前所瀏覽的網頁，再另啟一個新視窗，同時無網址與狀態列，畫面更為乾淨，這時還可拖拉視窗，改變視窗大小。
梅問題－Chrome外掛－OSX Resizer讓瀏覽器視窗可以小於400像素以下
Step6
這時視窗變得超軟Q，想多大多小都可以，而原先的最小視窗只能400像素而已，因此身為網設的朋友們，也趕快來安裝一下囉!
梅問題－Chrome外掛－OSX Resizer讓瀏覽器視窗可以小於400像素以下
↧

Chrome外掛－Brackets雲端版! 打開瀏覽器就可編輯網頁

May 22, 2016, 3:00 pm
$
0
0
　先曾分享過Adobe研究室所研發的Brackets網頁編輯器，深受許多人喜愛，再加上能與Adobe ID整合，因此可將Photoshop製作好的PSD檔，上傳到自己的Adobe ID下，再載入Brackets後，就可快速的切版，同時Brackets還是一套全免費的軟體，有別於Sublime Text，而習慣使用Brackets的朋友，現在有福啦!由國外一間相當知名的雲端服務公司RollApp，將Brackets製作成雲端版啦!因此就不用再安裝到電腦裡，直接裝到Chrome瀏覽器的應用程式裡，以後只需打開瀏覽器，就可開始編輯網頁啦!甚至它還可以將網頁儲存在雲端的主機中，如此一來外出也不用擔帶檔案心沒，甚至寫好的專案也可直接上傳到雲端空間中，是不是超方便的呀!有在用Brackets的朋友，也一塊來看看。
↧

Pinegrow Web Editor暗黑祕技!將網路上喜歡的版型直接搬回家

June 7, 2016, 3:00 pm
$
0
0
梅問題-Pinegrow Web Editor暗黑密法!將網路上喜歡的版型直接搬回家
　　自從改用Pinegrow Web Editor網頁編輯軟體，大幅的縮短RWD自適應網頁的製作時間，同時讓套用Bootstrap框架變得更簡單，但使用Pinegrow Web Editor已有好段時間，一直對於它內建的Open URL這功能感到好奇，一般都是Open File怎會有Open URL，因此那天就試用看看，才發現這功能真是太強大了，比砍站軟體還更砍站，除了能將網站下載回來外，甚至連網頁的結構也會一併顯示在Pinegrow編輯器中，就可直接在Pinegrow編輯器中，直接進行編輯與修改，再按下儲存後，就會儲存為自己的樣版啦!這對於收集網頁，或是研究別人的版型特別的方便，因此身為網頁設計的朋友，也趕快來看看囉!
Step1
打開Pinegrow Web Designer後，點一下「Opne url」圖示。
梅問題-Pinegrow Web Editor暗黑密法!將網路上喜歡的版型直接搬回家
Step2
接著輸入頁面的網址，不是RWD的網頁也可以。
梅問題-Pinegrow Web Editor暗黑密法!將網路上喜歡的版型直接搬回家
Step3
這時Pinegrow Web Designer就會開始分析結構，並將網頁載入。
梅問題-Pinegrow Web Editor暗黑密法!將網路上喜歡的版型直接搬回家
Step4
當載入完畢後，左邊的工作視窗會顯示網頁的畫面，右邊會顯示該網頁的樹狀結構。
梅問題-Pinegrow Web Editor暗黑密法!將網路上喜歡的版型直接搬回家
Step5
同時點選畫面中的區塊，還可直接進行編輯，因此不是只是預覽畫面而已。
梅問題-Pinegrow Web Editor暗黑密法!將網路上喜歡的版型直接搬回家
Step6
接著再將頁面儲存起來。
梅問題-Pinegrow Web Editor暗黑密法!將網路上喜歡的版型直接搬回家
Step7
這時只會儲存CSS與html，同時所有頁面的用的檔案，都會依照原來的結構進行儲存。
梅問題-Pinegrow Web Editor暗黑密法!將網路上喜歡的版型直接搬回家
Step8
雙響後，不但沒跑版，同時剛修改的也能正常的顯示，而頁面中的js與圖片則會以連結的方式，因此當下回看到喜歡的網頁樣版時，不妨可試試看囉!
梅問題-Pinegrow Web Editor暗黑密法!將網路上喜歡的版型直接搬回家
↧
Viewing all 164 articles
Browse latest View live
Search