close
Blogtrottr
♣梅問題‧教學網【Minwt】♣
分享關於Photoshop教學|商品攝影|網頁教學|Wordpress教學|iPhone教學| Flash教學|jQuery教學...等 
《RWD Wireframes》自適應網頁版型架構圖線上產生器
Mar 3rd 2014, 01:30, by admin

梅問題-網設必備-《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》自適應網頁版型架構線上產生器


引用網址: ※如有發現掉圖或檔案無法下載,請由回應區留言告知,將會盡速處理!謝謝。
※本站採用CC授權請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處,謝謝。

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 kkoki0httzobg 的頭像
    kkoki0httzobg

    線上遊戲排行榜2013/2014,進擊的巨人線上看,candy crush saga外掛,正妹寫真三圍

    kkoki0httzobg 發表在 痞客邦 留言(0) 人氣()