Quantcast
Channel: 手機網頁 –梅問題．教學網
Viewing all 16 articles
Browse latest View live
↧

手機網頁教學－「Retina高解析手機網頁」影像不再模糊不清

September 16, 2012, 11:22 pm
$
0
0
梅問題-手機網頁教學－Retina高解手機網頁製作影像不再模糊不清
　　早期在作網頁時，只要把IE搞定後，就算All Pass了，但隨著瀏覽器大戰下，現在IE不再有絕對的優勢，使得身為網頁設計人員，電腦中安裝七、八個瀏覽器是很合情合理的，好不容把這些瀏覽器都搞定後，現在又多了行動裝置，而行動裝置除了平台不同外，現在連解析度也是五花八門，再加上iPhone的Retina，讓畫面解析變更高，影像更細緻，而這也苦了網頁設計人員，當用傳統的方式作好後，卻會發現到在高解析的手機中，影像卻是糊的，明明就是1:1，影像也放大，即使把解析改成300也一樣，研究了半天才知道，原來要從影像尺寸下手，再搭配CSS與jQ的外掛，就可實現高解的手機網頁，現在就一塊來看看吧！
準備素材：
#圖像：
圖片的部分，需準備二種尺寸，比方logo為100×100像素，則需再製作一個二倍大的影像200×200像素，並命名為-2x。
梅問題-手機網頁教學－Retina高解手機網頁製作影像不再模糊不清
#外掛：
jQuery.retina
針對網頁中圖片：
#放到<head>~<head>中
?View Code JAVASCRIPT
1 2 3 4 5 6 7 
<script src="jquery-1.8.1.min.js"></script>
<script src="jquery.retina.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.retina').retina();
	});
</script>
#html：
這時jQuery會自動判斷，當是高解時，會自動將圖片換成-2x的高解圖片，並壓縮在指定的大小裡。
?View Code JAVASCRIPT
1 
<img src="logo.png" width="160" height="80" class="retina" />
針對網頁中CSS背景圖片：
#放到<head>~<head>中
?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 
<style>
.retinaDiv
{
	width:160px; 
	height:80px; 
	background:url(logo.png) no-repeat;
	clear:both; 
	margin-bottom:10px;
}
 
/* Retina圖片CSS放在這區塊中 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2)
{
    .retinaDiv 
	{
    	background: url(logo-2x.png);
		background-size:160px 80px;
    }
}
 
</style>
#html：
當為高解析度的手機時，就會自動讀取@media中的CSS。
?View Code JAVASCRIPT
1 
	<div class="retinaDiv"></div>
結果預覽：
當在高解析的裝置下，像是iPhone4s、iPhone4、iPod touch4，就會看到圖片依然保有, 高解析的影像，影像不再糊糊的。
梅問題-手機網頁教學－Retina高解手機網頁製作影像不再模糊不清
[範例預覽] [範例下載]
↧
Search

Dreamweaver CS6「流變格線版面」隨著電腦、平板、手機自動切換網頁版型

September 18, 2012, 11:22 pm
$
0
0
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
　　現在作網頁不但麻煩，也愈來愈複雜，當好不容易把電腦作完後，還得依照手機重新量身打造，比較講究一點公司，連平板也不放過，所以現在單一個網頁，就要設計三種不同的版型，真是一件苦差事，但現在有了Dreamweaver CS6，新增了一個「流變格線版面」的功能，讓你只要作一個頁面，就可同時在電腦、平板、手機等裝置顯示，且還會依照不同的裝置，自動的切換版型，讓版面適合各裝置的瀏覽，無需寫任何的程式碼，因此只要設計人員，就可自行完成，現在就一塊來看看吧！要如何使用這個新功能「流變格線版面」。
開發工具：
軟體：Dreamweaver CS6
功能：流變格線版面
實用性：★★★★
難易度：★★★
Step1
開啟Dreamweaver CS6，選擇新增檔案，將左邊切換到「流變格線版面」頁籤，接著將文件類型選擇「Html5」，再按「建立」。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step2
設定CSS檔案名稱，再按「存檔」。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step3
建立好後，再按全部儲存，設定網頁名稱，再按「存檔」。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step4
按「複製」，這時DW CS6會把這二個檔案，複製到專案中。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step5
完成後，在專案的檔案中，就會看到右下的檔案。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step6
基本上只需修改html、css檔，在css檔中可看到會有三個一模一樣的樣式名稱，分別則用來設定手機、平板、電腦的版型與樣式。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step7
點上方的工具列，版面 / 插入流變格線版面。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step8
設定 插入流變格線版面 的ID名稱，其實它就是一般的DIV的標籤而已。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step9
依序的就可建立幾個流變區塊(div區塊)，同時在下方會看到，目前的版面狀態是在手機模式下，若希望手機是要用這樣條列式呈現，這樣就已完成一個版型了。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step10
接著切到平板模式，這時就可直接修改Div的區塊大小。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step11
當把二個都變小時，若要把下方的Div向右排時，只要點一下Div右邊的箭頭，這時區塊就會自動向上靠齊。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step12
這樣就完成平板版型的樣式啦!
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step13
接著再切到電腦圖示，調整電腦版型所要呈現的樣式。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step14
當版型都調整好後，可透過CSS樣式面板，來設定各Div的CSS樣式，這邊梅干建議直接開啟CSS檔修改，會比較方便些。
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
Step14
當一切都調整好後，馬上來測試看看。
#電腦版
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
#平版
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
#手機版
梅問題-Dreamweaver CS6教學-「流變格線版面」隨著電腦、平板、手機自動切換網頁版型
　　是不是超方便的呀！當網頁在不同裝置時，就會自動切換適合的版型，完全不用寫任何的程式碼，由於目前Dreamweaver CS6的「流變格線版面」不支援巢狀式的Div，而這可透過原始碼的方式直接作修改，因此若習慣直接從原始碼進行編輯的朋友們，會覺得更加的得心應手，比用拖拉的方式，和內建的CSS設定面板來的好控制許多，因此若你也是網頁設計從業人員，不坊也抽空試試看吧！
[範例預覽]　[範例下載]
↧
↧

手機網頁教學－iOS6瀏覽器Safari支援上傳手機照片與影音檔

September 30, 2012, 11:22 pm
$
0
0
梅問題－手機網頁教學-ios6支援Safari上傳手機照片與影音檔
　　自從iOS6正式釋出後，負面的聲浪大過於正面，這也讓iOS6的更新率僅達六成左右，難道iOS6除了圖示變好看外，就沒有可取之處嗎？其實iOS6也有作了一些重大的改變，那就是iOS6的瀏覽器Safari，終於支援檔案上傳的功能，這對於開發手機網頁的朋友來說，可真是一件可喜的事，以後直接透過網頁，就可上傳手機中的圖片、影音，再也不用額外的APP了，經梅干實際測試後，可正常的上傳手機中的相片，或是即時拍攝與錄影的檔案，現在就一塊來看看吧！
上傳手機中的相片檔：
Step1
當在iOS6下的Safari，就會看到選擇檔案是亮起的，按一下並選擇「選擇現有的項目」。
梅問題－手機網頁教學-ios6支援Safari上傳手機照片與影音檔
Step2
選相片膠卷中的檔案。
梅問題－手機網頁教學-ios6支援Safari上傳手機照片與影音檔
Step3
選好後，就會看到相片縮圖，按下「Upload」鈕，哈～上傳成功。
梅問題－手機網頁教學-ios6支援Safari上傳手機照片與影音檔
上傳手機即時拍攝檔案：
Step1
一樣點「選擇檔案」，接著再點「拍攝照片或視訊」。
梅問題－手機網頁教學-ios6支援Safari上傳手機照片與影音檔
Step2
拍好照片後，再按右下的「使用」。
梅問題－手機網頁教學-ios6支援Safari上傳手機照片與影音檔
Step3
再按「Upload」鈕，就會自動上傳啦!
梅問題－手機網頁教學-ios6支援Safari上傳手機照片與影音檔
[範例下載]
↧

手機網頁教學－手機網頁的Firebug網頁檢測除錯器(限iOS6)

October 17, 2012, 7:22 pm
$
0
0
梅問題-手機網頁教學－iOS6手機網頁的firbug
　　身為網頁從業人員，應該對於Firebug不感陌生，透過該工具，除了可以快速的檢測出網站的問題外，還可透過Firebug來檢視網頁區塊，除了Firebug外Chrome與IE8.0+也都內建有相關的網頁檢測工具，方便網頁人員快速找出問題點，但在製作手機網頁時，就只能透過瀏覽器的外掛，或是縮小瀏覽比例，來進行測試，雖然說很方便，但桌機版的瀏覽器，與行動裝置版的支援性還是有些不太一樣，所以一旦發生跑位或網頁出現錯誤時，就只能徒手抓猴，哈～現在終於不用再瞎眼抓猴啦！只要開啟iOS6瀏覽器Safari的進階功能，以及Mac上瀏覽器Safari的開發者機制，就能開始進行檢測啦！
相關需求：
適用裝置：iPhone、iPod touch、iPad
適用平台：iOS6.0
檢測設備：Mac OSX Safar i(僅限MAC平台)
行動裝置設定：
Step1
進到 設定/Safari / 進階。
梅問題-手機網頁教學－iOS6手機網頁的firbug
Step2
將「網頁檢閱器」給開啟。
梅問題-手機網頁教學－iOS6手機網頁的firbug
MAC Safari設定：
Step1
開啟Mac的Safari瀏覽器，選擇功能表「偏號設定」。
梅問題-手機網頁教學－iOS6手機網頁的firbug
Step2
切到「進階」，將下方的選項勾起來，此時上方的功能列，就會看到「開發人員」的選項。
梅問題-手機網頁教學－iOS6手機網頁的firbug
Step3
將手機與電腦連接，並開啟要檢測的網頁。
梅問題-手機網頁教學－iOS6手機網頁的firbug
網頁檢測閱器：
Step1
回到Mac在，點開發人員選項，就會看到裝置的名稱，以及目前所瀏覽的網頁。
梅問題-手機網頁教學－iOS6手機網頁的firbug
Step2
這時就會開啟檢測的面板，有沒有感到很熟悉，與Chrome還蠻像的。
梅問題-手機網頁教學－iOS6手機網頁的firbug
Step3
接著將右邊的面板，切到{}頁籤，就會看到目前區塊所設定的CSS。
梅問題-手機網頁教學－iOS6手機網頁的firbug
網頁區塊檢測：
Step1
這時當點電腦上的網頁區塊，手機中也會同時被選取起來。
梅問題-手機網頁教學－iOS6手機網頁的firbug
Step2
回到MAC的網頁檢測面板，點一下面板中的手指頭。
梅問題-手機網頁教學－iOS6手機網頁的firbug
Step3
這時點手機上的網頁區塊，Mac上的網頁檢測面板，也會即時將所選取的網頁區塊，給標示出來 。
梅問題-手機網頁教學－iOS6手機網頁的firbug
↧

網設必知－Google Chrome開發人員工具，可切換User-Agent即時預覽各裝置的顯示畫面

April 7, 2013, 11:55 pm
$
0
0
梅問題-網頁必備工具－Google Chrome開發人員工具切換User-Agent即時預覽各裝置的顯示畫面
　　之前在製作手機版網頁時，為了讓瀏覽器，能符合行動裝置的狀態，除了在捷徑中加入User-Agent，來初換網頁檔頭外，還會再加裝一套視窗大小切換的外掛，將視窗自動縮放到指定的大小，測試好後得再將參數移除，才不會瀏覽其它的網站時，都切到手機版模式，且偶爾還會發現一些怪現象，實在很不方便，但現在不用這麼麻煩啦！只要透過Google Chrome內建的開發人工具，就可任意的切換各種瀏覽器的版本，像是iOS、Android、BlackBerry、IE、Firefox...等，因此只要透過Google Chrome瀏覽器，就可預覽各種裝置或瀏覽器的呈現結果，相當的方便喔！且再也不用修改捷徑參數啦！因此身為網頁設計人員，絕不容錯過這個小技巧喔！
開啟網頁後，按F12鍵，開啟「開發人員工具」視窗面板，再按右下角的齒輪圖示。
梅問題-網頁必備工具－Google Chrome開發人員工具切換User-Agent即時預覽各裝置的顯示畫面
切到Overrides項目下，從User Agent下拉選單中，選擇要模擬的設備與瀏覽器版本。
梅問題-網頁必備工具－Google Chrome開發人員工具切換User-Agent即時預覽各裝置的顯示畫面
當切換好版本後，畫面會隨著裝置大小而縮小視窗，但網頁依然不變，這時只要按一下重新整理。
梅問題-網頁必備工具－Google Chrome開發人員工具切換User-Agent即時預覽各裝置的顯示畫面
哈~重整後，立即就切到手機模式啦!而這只有版面上的模擬，至於操控事件與js的部分，還是得在實機上才行喔!
梅問題-網頁必備工具－Google Chrome開發人員工具切換User-Agent即時預覽各裝置的顯示畫面
↧
↧

手機網頁必知－設定書籤網址建立到手機桌面中的APP圖示

July 7, 2013, 12:28 pm
$
0
0
梅問題-手機網頁-設定書籤網址建立到桌面中的APP圖示
　　使用水果或Android的朋友應該都知道，除了可將常去的網站加到書籤中外，還可將書籤建立到桌面中，變成一個APP圖示，之後只要點一下該圖示，就會直接進入該網站裡，相當的方便，就像平常在用一般的應用程式一樣，但若該網站沒有特別設定書籤圖示時，把網址加到桌面的APP圖示時，就會出現網站的縮圖，相當的醜且沒特色，而怎該如何立自已專屬的面的APP顯示圖示呢?其實相當的簡單，只要加入一小段語法就可以囉！就像加入我的最愛圖示一樣，至於怎麼加，現在就一塊來看看吧！
將下方的語法加到<head>~</head>之間。
?View Code HTML
1 2 3 
<link rel="apple-touch-icon" href="images/Icon.png"> <!-- 57×57px -->
<link rel="apple-touch-icon" sizes="72×72" href="images/Icon-72.png"> <!-- 72×72px ipad-->
<link rel="apple-touch-icon" sizes="114×114" href="images/Icon@2.png"> <!-- 114×114px iphone4-->
需準備 57×57px、72×72px、114×114px，至於檔名的部分，可自行設定，這邊梅干是直接延用iOS APP的命名規則。
梅問題-手機網頁-設定書籤網址建立到桌面中的APP圖示
完成之後，把網址加到桌面時，就會產生剛所設定的圖示啦！是不是好看很多，就像一般的APP一樣。
梅問題-手機網頁-設定書籤網址建立到桌面中的APP圖示
↧

CSS教學－【Responsive 網頁自適版型】Media Screen 一覽表

September 15, 2013, 6:30 pm
$
0
0
梅問題－Responsive Web Design網頁自適版型Media Queries參考一覽表
　　由於現在行動裝置愈來愈普及，人手已經好幾隻，一個人可能同時擁有手機與平板，同時也改變了整個生活形態，慢慢的習慣直接透過，智慧型手機或平板來找資料，因此這也提高了手機版網頁的需求，而一般在製作手機版網頁，大至有二種方式，一種用導網頁的方式，當偵測到手機瀏覽時，頁面就自動切換成手機模式，而另一種模式，則是會隨著解晰度的不同，來調整網頁的版型，以符合該解晰下瀏覽，而這種模式就叫作Responsive，也就是大家常說的自適版型，由於現在行動裝置這麼多，要如何知道各裝置的解晰呢？這時不妨可到nmsdvid.com網站中查看，在該網站直接提供各裝置的media screen code，因此只要直接複製就可使用囉！
行動裝置Media Screen：
網站名稱：Media Query Snippets
網站網址：http://nmsdvid.com/snippets/
進到網站中，從右上角的頁籤中，可切換各裝置類型，像是手機、平板、螢幕...等。
梅問題－Responsive Web Design網頁自適版型Media Queries參考一覽表
只要點一下裝置名稱，下方就會出現media screen的code，再將框框中的code給複製起來。
梅問題－Responsive Web Design網頁自適版型Media Queries參考一覽表
接著插入的方式有二種，一種是用連結外部檔案的方式，另一種是直接寫在網頁中。
梅問題－Responsive Web Design網頁自適版型Media Queries參考一覽表
由於梅干是iPhone3Gs，所以複製iPhone 3Gs的Code，簡單的來作個示範，當使用桌機時，會看到藍色背景，手機則會出現紅色背景。
梅問題－Responsive Web Design網頁自適版型Media Queries參考一覽表
馬上來瀏覽看看，哈~可看到當用桌機時，背景會呈現藍色，並出現電腦版的文字，由於該網站是用裝置的長寬來作判斷，因此即便將桌機的視窗縮小，也不會切換成行動裝置的頁面。
梅問題－Responsive Web Design網頁自適版型Media Queries參考一覽表
當用手機瀏覽時，背景則會變成紅的，並出現手機版的文字，是不是超ez的呀。
梅問題－Responsive Web Design網頁自適版型Media Queries參考一覽表
　　其實無論是用導網頁，還是用自適版型，唯一的目地就是讓使用行動裝置的朋友，可以不用再用二指來縮放版面，直接就可瀏覽網頁，而自適版型與導網頁，最大的不同點就在於，自適版型在製作時，需要花點時間，好好的規畫網站架構，以及css的code會比較多，而最大好處就是，不用再透過任何程式來作判斷，直接用CSS就可即時改變瀏覽的版型，來符合各行動裝置的螢幕解析來瀏覽。
↧

《Pure》羽量級自適應網頁版型框架 (RWD Framework)

February 24, 2014, 5:30 pm
$
0
0
梅問題－《Pure》羽量級自適應網頁版型套件
　　先前曾分享過由Twitter所研發的Bootstrap，透過這個RWD Framework可快速的打造出自適應的網頁版型，同時內建的特效也相當完整，甚至完全不用寫任何的程式碼，就能快速的打造出自適應的網頁版型，讓網頁可橫跨各種裝置與解析度，接下來要再來分享另一套RWD Framework Pure，這套則大有來頭，是由Yahoo所研發的，由於該套件就如同它的名字，只有單純的CSS的部分，因此Pure不像Bootstrap內建就許多的jq互動特效，所以設計者可任意的載入其它的JavaScirpt框架，由於Pure只有單純的CSS框架，因此檔案相當的小只有4.4KB而已，算是目前RWD Framework最輕巧的，因此若你只要製作自適應的網頁版型時，Yahoo這套Pure框架絕不容錯過喔！
Pure:
套件名稱：Pure
套件官網：http://purecss.io/
進入官網只需複製下方的語法就可使用了，而Pure有個很可愛的地方，就是可依所需載入自已所要的css檔案，以排版來說只載入Grids的話才1KB而已。
梅問題－《Pure》羽量級自適應網頁版型套件
接著將它貼到網頁的header間。
梅問題－《Pure》羽量級自適應網頁版型套件
在開始要使用Pure的版型時，要先了解一下它的網頁版型架構，Pure的版型中，有分基本的5欄與24欄二種(Bootstrap是12欄)。
梅問題－《Pure》羽量級自適應網頁版型套件
在Pure的隱藏模式共只有三種，分別為手機、平板、桌機。
梅問題－《Pure》羽量級自適應網頁版型套件
pure-g-r表示該區塊為自適應區塊，而裡面的子層要用pure-u，前面是要佔用的比例，後面是所有的欄位數，以下圖來說18-24指的就是，共有24欄佔了18欄的區塊，而上下二個div加起來也要與總數相符。
梅問題－《Pure》羽量級自適應網頁版型套件
測試一下在大螢幕時，可同時看到左右二欄，縮小時右側邊欄則會向左堆疊靠齊。
梅問題－《Pure》羽量級自適應網頁版型套件
假設若希望手機瀏覽時，側邊欄可以隱藏起來，只要在class後再加pure-hidden-phone就可以了。
梅問題－《Pure》羽量級自適應網頁版型套件
這時當縮小螢幕時，側邊欄就會自動的隱藏起來了。
梅問題－《Pure》羽量級自適應網頁版型套件
若只是pure-g的話，表示該區塊沒有自適應，而區塊會依照比例同時縮小。
梅問題－《Pure》羽量級自適應網頁版型套件
可看到裡面的三小個區塊不會向左堆疊，而是直接等比的縮小。
梅問題－《Pure》羽量級自適應網頁版型套件
[範例預覽] | [範例下載]
↧
Search

《RWD Wireframes》自適應網頁版型架構圖線上產生器

March 2, 2014, 5:30 pm
$
0
0
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
　　先前梅干曾分享過《Uxpin》網站、行動裝置架構圖線上產生器，透過這個網站，可以快速的將網頁、APP等版型與架構繪製出來，方便跟程式與設計人員討論，也可加速設計人員的製作時間，但隨著自適應網頁的盛行，因此當在規畫網頁版型時，已不再只有單純的桌機模式，更同時要考慮到平板、手機等行動裝置，但要一個一個繪製，還真是挺麻煩，所以梅干要來分享一個好東西，那就是RWD Wireframes自適應網頁版型線上產生器，讓你可快速的規畫出，網頁在各裝置下所要呈現的區塊與版型，至於要怎麼用呢?現在就一塊來看看吧!
自適應網頁框架圖產生器：
網站名稱：RWD Wireframes
網站網址：http://www.lifeishao.com/rwdwire/
RWD Wireframes註冊會員：
Step1
進入RWD Wireframes網站後，先點右上角的會員圖，再點下方的Register鈕，註冊為會員，這樣才能有儲存的功能。
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step2
接著只要輸入Email與密碼就可以了。
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step3
註冊完畢後，會看到頁面中，分成四個區塊，分別就是桌機(大、小)、平板、手機。
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
RWD Wireframes新增區塊：
Step4
若要自行增加區塊時，只需點左邊的+圖示。
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step5
按住滑鼠不放，就可拖拉出所需的區塊來。
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step6
接著設定區塊的屬性。
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step7
這樣就可依自已所需，自行的增減網頁的區塊內容啦!是不是超方便的呀!
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
RWD Wireframes區塊顯示/隱藏：
Step8
比方像手機版，若有某些區塊要隱藏的話，點左邊的第三個圖示。
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step9
再將要隱藏的區塊，由Visible向下拉到Disabled，就可隱藏起來。
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step10
這樣側邊欄就不見了，就可將其它的區塊，點一下將它拉大。
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
RWD Wireframes解析度切換：
Step11
接著點上方的尺寸，切換到其它的解析下，這時若希望側邊欄顯示時，只要將它再拉回Visible就會再顯示出來。
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step12
這時側邊欄就會再顯示出來。
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
RWD Wireframes編輯區塊內容：
Step13
若要重新命名區塊時，只要雙響就可編輯區塊的內容，甚至還支援中文與安插圖片。
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step14
當編輯完後，再拉到下方，按Save儲存起來。
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
RWD Wireframes匯出：
Step15
只要點左邊的原始碼圖示，分別可將html與css給匯出。
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
RWD Wireframes儲存：
Step16
將各個版型都設定好後，再點左邊最後一個鈕，就可將它儲存起來。
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step17
儲存完畢後，在上方會員圖示的鈕，點一下就會出現所有的儲存記錄清單。
梅問題－網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
↧
↧

MakeAppicon 線上立即產生iOS、Android所需的各種圖示大小

September 30, 2015, 3:00 pm
$
0
0
梅問題－MakeAppicon一鍵產生iOS、Android應用程式各尺寸圖示大小
　　早期在往發iOS應用程式時，由於當時iPhone的螢幕相當的固定，且解晰度也差不多，因此在設計應用程式的圖示就單純許多，但隨著iPhone不斷的推陳出新，同時螢幕尺寸也愈來愈大，再加上Retina使得現在，在設計應用程式的圖示時，就得製作好幾組，除了手機應用程式會用到，就連手機網頁也是需要使用到的，而這還不包含Android，二大平台加一加，還真的是讓許多視覺設計師，一個頭二個大，但現在只要透過MakeAppico平台，立即就產生出各尺寸的應用程式圖示大小啦!因此身為視覺設計的你，千萬別錯過囉!
MakeAppicon：
網站名稱：MakeAppicon
連結網址：http://makeappicon.com/
Step1
當進入網站後，將要製作的圖示檔案，拖拉到畫面中，同時圖檔需1024×1024，並支援jpg、png、psd....等格式。
梅問題－MakeAppicon一鍵產生iOS、Android應用程式各尺寸圖示大小
Step2
並放開滑鼠，這時圖示就會開始產生中。
梅問題－MakeAppicon一鍵產生iOS、Android應用程式各尺寸圖示大小
Step3
當產生完畢後，除了右手邊有一堆大大小小的圖示外，左邊還有模擬圖，當此圖示在iPhone或手表上的感覺會長怎樣。
梅問題－MakeAppicon一鍵產生iOS、Android應用程式各尺寸圖示大小
Step4
或是在Android平台下，會長怎樣，相當的貼心。
梅問題－MakeAppicon一鍵產生iOS、Android應用程式各尺寸圖示大小
Step5
當要下載時，只需輸入你的信箱，立即就可將圖示給下載回來囉!同時還會貼心的命名好，是不是超方便的呀!
梅問題－MakeAppicon一鍵產生iOS、Android應用程式各尺寸圖示大小
↧

手機網頁教學－仿Yhaoo!利用滑動手勢切換圖文

August 15, 2012, 11:22 pm
$
0
0
梅問題-手機網頁教學-仿Yhaoo!利用滑動手勢切換圖文(jquery.cycle&jquery.touchwipe)
　　用過智慧型手機的朋友，應該很習慣，透過手指頭，來螢幕左右滑動，切換照片或文章，而這個左右滑動，已是目前大家所習慣的操控模式，因此有不少的手機網頁，也把這個元素加到網頁中，最常見的例子就是奇摩的手機頁面，當進到手機頁面時，上方的新聞部分，就可透過左右滑動來切換上下則，或是直接點二旁的左右鈕，也可進行新聞的切換，而這看似很酷操控行為，其實作法相當的簡單，只要透過二個jQuery套件，jquery.cycle與jquery.touchwipe立即就可完成喔！現在就一塊來看看吧！
使用套件：
#1
套件名稱：jquery.touchwipe
套件功用：自動偵測手指滑動
套件網址：http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
#2
套件名稱：jquery.cycle
套件功用：圖片輪播
套件網址：http://jquery.malsup.com/cycle/
有看過奇摩手機頁面的朋友，應該對於這區塊不感陌生，透過手指頭左右滑動，就可直接切換上下則新聞。
梅問題-手機網頁教學-仿Yhaoo!利用滑動手勢切換圖文(jquery.cycle&jquery.touchwipe)
接著進到二個官方網站，將外掛套件的js給下載回來，然後把二隻js放在同一目錄下，再將下方的語法貼到網頁中，之後若要新增圖片，只要在<div id="imagegallery">~</div>中增加就會自動抓了，夠簡單吧!
?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 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 
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.touchwipe.1.1.1.js"></script>
<script src="jquery.cycle.all.min.js"></script>
<script>
$(function(){
	//參數設定:
	//wipeLeft 向左滑動
	//wipeRight 向右滑動
	//wipeUp 向上滑動
	//wipeDown 向下滑動
	//min_move_x 水平移動最小像
	//min_move_y 垂直移動最小像素
	/*
	$("#imagegallery").touchwipe({
		 wipeLeft: function() { alert("left"); },
		 wipeRight: function() { alert("right"); },
		 wipeUp: function() { alert("up"); },
		 wipeDown: function() { alert("down"); },
		 min_move_x: 20,
		 min_move_y: 20,
		 preventDefaultEvents: true
	});*/
 
 
	$('#imagegallery').cycle({
		timeout: 0,
		fx: 'scrollHorz',
		next: '#next',
		prev: '#prev' 
	});
 
	$("#imagegallery").touchwipe({
 		wipeLeft: function() {
 	 		$("#imagegallery").cycle("next");
 
 		},
 		wipeRight: function() {
 	 		$("#imagegallery").cycle("prev");			
 		}
	});
})
 
</script>
<style>
body {
	margin:0;
	padding:0;
	background:#ccc;
}
#wrap {
	position:relative;
	width:310px;
	height:207px;
	margin:0 auto;
	overflow:hidden;
}
#imagegallery {
	width:310px;
	height:207px;
	background:#fff;
	margin:0 auto;
	margin-top:10px;
	overflow:hidden;
	text-align:center;
}
#imagegallery a {
	text-decoration:none;
	color:#333333;
}
#nav {
	width:310px;
	height:50px;
	position:absolute;
	top:75px;
	z-index:100;
}
#nav a {
	display:block;
	line-height:60px;
	width:60px;
	background:rgba(0,0,0,0.4);
	text-align:center;
	text-decoration:none;
	font-size:21px;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	border-radius: 17px;
}
#prev {
	float:left;
	margin-left:-15px;
}
#next {
	float:right;
	margin-right:-15px;
}
</style>
</head>
<body>
<div id="wrap">
  <div id="imagegallery"> 
      <img src="img01.jpg"> 
      <img src="img02.jpg">
      <img src="img03.jpg">
      <img src="img04.jpg"> 
      <img src="img05.jpg"> 
   </div>
  <div id="nav"><a id="prev" href="#"><</a> <a id="next" href="#">></a></div>
</div>
[範例預覽] [範例下載]
↧

表單按鈕不套用iPhone內建的圓角與漸層樣式效果

March 22, 2016, 3:00 pm
$
0
0
梅問題－按鈕不套用iPhone中的圓角與漸層樣式效果
　　最近在幫位好友，設計手機版的網頁，才發現到一件相當怪異的事，那就是表單中的按鈕，明明已經設定了樣式，同時也將圓角取消了，在其它的平台看都很正常，唯獨在iOS上，就跟別人不一樣，不但完全不理會CSS中所設定的樣式外，還自行最套自己的樣式，讓梅干感到相當的困惑，於是上網爬了許多文章，終於找到了解決辦法，只要加入屬性後，立即就可解決此問題，不再套用iOS上的按鈕樣式，因此有遇到此問題的朋友，也一塊來看看囉!
Step1
一般會透過CSS來設定，按鈕的顏色、圓角與邊框樣式。
梅問題－按鈕不套用iPhone中的圓角與漸層樣式效果
Step2
當設定完畢後，在桌機上看很正常，但在iOS上完全不為所動。
梅問題－按鈕不套用iPhone中的圓角與漸層樣式效果
Step3
接著在按鈕樣式內加入這屬性-webkit-apperance:none;。
梅問題－按鈕不套用iPhone中的圓角與漸層樣式效果
Step4
這樣問題終於解決了，iOS也套用
梅問題－按鈕不套用iPhone中的圓角與漸層樣式效果
↧

「Retina.js」網頁圖片支援Retina螢幕，並自動切換高解影像

September 28, 2016, 3:00 pm
$
0
0
梅問題－「Retina.js」網頁圖片支援Retina螢幕，並自動切換高解影像
　　自從Apple推出Retina的高解析螢幕後，讓手機與筆電，在瀏覽照片時，讓影像變得更細膩，因此也讓許多品牌紛紛的跟進，而這看似美意，但也苦了網頁設計師，由於螢幕的密度提高，這也讓圖片原本的圖片在Retina高解析的螢幕下，會出現鋸齒， 雖然說目前新的網頁格式SVG可解決，但這也只限於向量圖示。 　　因此當網頁中的圖片，也要顯示高解析的影像時，就得準備二倍大影像尺寸，才能讓影像在Retina的高解析螢幕顯示清析的影像，由於目前影像尺寸是二倍大，但在顯示時需除以2，才能讓圖像1:1顯示，因此這時可用Retina.js這外掛來完成，透過Retina.js來偵測並自動切換高解析的影像，讓網頁圖片全面支援Retina的螢幕。
從下圖可看到，在Retina高解析的螢幕下，顯示影的尺寸為100像素，但在每一個像素中，則會再作分割，讓影像看起來更加的細緻。
梅問題－「Retina.js」網頁圖片支援Retina螢幕，並自動切換高解影像
Retina.js
網站名稱：Retina graphics for your website
連結網址：http://imulus.github.io/retinajs/
進入Retina.js網站後，點一下Download鈕。
梅問題－「Retina.js」網頁圖片支援Retina螢幕，並自動切換高解影像
下載解壓縮後，分別會看到以下的檔案，這時只需將retina.min.js放到專案中即可。
梅問題－「Retina.js」網頁圖片支援Retina螢幕，並自動切換高解影像
這時圖片需準備二張，一張為原始尺寸大小，另一張要是二倍大的尺寸大小。
梅問題－「Retina.js」網頁圖片支援Retina螢幕，並自動切換高解影像
接著先把retina.min.js引用到網頁中，接著再啟用它，當要使用時，只要在img標籤中，當要使用高解析的影像時，再data-rjs的自訂屬性中，加入二倍大的尺寸檔案。
梅問題－「Retina.js」網頁圖片支援Retina螢幕，並自動切換高解影像
當螢幕為Retina就會自動切換成二倍大的影像尺寸。
梅問題－「Retina.js」網頁圖片支援Retina螢幕，並自動切換高解影像
一般的螢幕，就會顯示原來1倍的影像，但無論一倍還是二倍，在顯示的大小是一樣大的。
梅問題－「Retina.js」網頁圖片支援Retina螢幕，並自動切換高解影像
除了透過img標籤外，也可用CSS來作控制，但這時就得透過背景的形式來顯示。
梅問題－「Retina.js」網頁圖片支援Retina螢幕，並自動切換高解影像
分別可看到，無論是透過img標籤，還是透過CSS皆可正常顯示，只不過透過CSS的方式，需指定區塊的大小，而Apple官網就是採用CSS的方式來進行控制的。
梅問題－「Retina.js」網頁圖片支援Retina螢幕，並自動切換高解影像
[範例預覽] [範例下載]
↧
↧

Xcode9內建iPhone X模擬器，免換新手機就能測試網頁在新版iPhone X的畫面

September 18, 2017, 3:00 pm
$
0
0
梅問題－Xcdoe9內建iPhone X模擬器，免換新手機就能測試網頁在新版iPhone X的畫面
　　最近這幾天的話題，就是到底要換iPhone8還是iPhone X，沒預算考量當然是選iPhone X，而新款的iPhone X價格，足已買一台筆電，真的挺不便宜，但那無邊框的螢幕還真的是很漂亮，也因為如此，讓iPhone X與以往的iPhone有了些許的不同，本來以為，iPhone X頂多只是螢幕解析變更高，但可視區並沒有加大，所以在設計網頁上，應該沒什麼太大的問題，但最近這一、二天梅干在Twitter上，看到許多網友在討論iPhone X瀏覽網頁時，所會遇到的問題。 　　為何iPhone X在瀏覽網頁時會出現問題，最主要的原因在於，此次的iPhone X採無邊框設計，因此左右下沒什麼問題，問題出在上方，由於上方為了放置一些硬體裝置，像是鏡頭、耳機孔，因此上方就會出現一個突起的黑色色塊，所以當全版顯示網頁時，就會造成問題，本來想說，工作用還花還是得花，就在準備小朋友的時候，突然讓梅干想到，以前在寫Xcode時，內建就有iPhone模擬器，於是就到Apple Store中下載Xcode才發現到，目前的Apple Store中的Xcode只有8.3.3版，但是需要Xcode9才有內建iPhone X模擬器，於是梅干就到先前註冊的開發者帳號中看看，沒想到梅干已沒再繳費，竟然還可以提前下載Xcode9，就這樣梅干就省下了四萬塊啦！因此不想花錢買iPhone X的朋友，不妨可透過Xcode來測試你的網頁喔！
Step1
當下載完畢後，開啟Xcode接著選擇 Xcode / Open Developer Tool / Simulator。
梅問題－Xcdoe9內建iPhone X模擬器，免換新手機就能測試網頁在新版iPhone X的畫面
Step2
這時就會看到一隻iPhone手機，接著再從 Hardare / Device / iOS11.0 中，選擇手機的型號，當然就是要最新的啦！Phone X。
梅問題－Xcdoe9內建iPhone X模擬器，免換新手機就能測試網頁在新版iPhone X的畫面
Step3
接著再點下方的Safarie瀏覽器圖示。
梅問題－Xcdoe9內建iPhone X模擬器，免換新手機就能測試網頁在新版iPhone X的畫面
Step4
再上方輸入要測試的網址。
梅問題－Xcdoe9內建iPhone X模擬器，免換新手機就能測試網頁在新版iPhone X的畫面
Step5
這樣就可在模擬器中，預覽畫面啦！由於目前梅問題還沒將網頁設為全版，所以滿暫時看來沒啥問題。
梅問題－Xcdoe9內建iPhone X模擬器，免換新手機就能測試網頁在新版iPhone X的畫面
Step6
當要轉向時，只需按鍵盤的蘋果鍵+右鍵，就可將手機轉向啦！當轉向後，就明顯的可看出左右留白的問題，而目前要解此問題，Apple也提出了幾個屬性來解決，至於怎麼解決，之後再來與大家分享。
梅問題－Xcdoe9內建iPhone X模擬器，免換新手機就能測試網頁在新版iPhone X的畫面
↧

解決新款iPhone X上方畸零空間蓋版與網頁滿版CSS3設定

September 18, 2017, 11:00 pm
$
0
0
這個新屬性，早在兩年前時，就已被定義出來，而當初在定義這新屬性時，主要是為了圓形智慧型手錶的螢幕上呈現網頁所需的，但沒想到現在卻是運用在iPhone的新機X上，當把網頁設為滿版時，另一個問題就是邊界的部分，由於iPhone X上方的畸零空間會蓋住下方的畫面，為了解決這個問題，Apple也提供了一組新的CSS屬性，來自動抓取螢幕的邊界，雖然目前還沒拿到實機，但可透過早上梅干所分享的Xcode中的iPhone X模擬器來進行測試，因此在還沒拿到iPhone X時，可先提前來了解一下，未來iPhone X的手機網頁要如何來設定
↧
Search

AMP 線上檢測平台，檢測同時還提供錯誤的改善建議

November 29, 2018, 10:00 pm
$
0
0
因此今天要分享一個AMP的線上檢測平台，除了可輸入網址進行檢測外，也可透過原始碼的方式進行檢測，甚至當網頁不符合AMP架構時，還會顯示相關的修正辦法，並依照指示一一的修正後，就可讓網頁符合AMP的架構，當一切都確認沒問題後，再把網頁進行上傳，因此現在就一塊來看看這個AMP線上的檢測平台吧！
↧
Viewing all 16 articles
Browse latest View live
Search