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

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

相關文章

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Animate.css」讓Boostrap導覽列的下拉選單動起來

「Animate.css」讓Boostrap導覽列的下拉選單動起來

MAC專用的網頁壓縮器「Smaller」可合併多個CSS、JS檔案並壓縮

MAC專用的網頁壓縮器「Smaller」可合併多個CSS、JS檔案並壓縮





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 6 梅留言

  • 第3梅
    jeafan1031 說道:

    謝謝分享

  • 第2梅
    Jakin 說道:

    直點網站架設、網頁開發、梅專區等沒反應

  • 第1梅
    Jakin 說道:

    就是您的Spry導覽列的第一階連結喔,直點、、,之前是錯誤連結,現在是沒反應喔^ ^ 還有之前https://www.minwt.com/mobilewebdesign/8568.html那裏不知為何我不能回覆了,系統說(發現重複迴響;看來你已經發表過啦!),所以貼在這裡囉~~