RWD網站設計工具

更新 發佈閱讀 2 分鐘

近幾年在一些單位授課,時常教有關於網站設計的課程

而這兩年RWD已經成為必須的網站設計技術

其實這RWD已經不像過去那樣要搞CSS或是bootstrap

雖然HTML基本功還是要有,CSS、jQuery、javascript...等等

若可以還是要會,但今天要講的工具

是要搭配網路行銷的工具

也是最迅速立即馬上完成的手法

也是最基本的美編+版面設計

運用三款工具即可輕鬆完成~

首先第一套工具是 去背工具 Remove Image Background

raw-image

使用上很簡單,就是把要去背的圖點擊 select a photo這按鈕,然後上傳這樣你就會取得一張去背好的圖了

raw-image

接著再到 photopea 進行編輯、合成等的動作(這裡假設你已經會photoshop),這樣你的產品圖或者是一些形象圖就有囉~

raw-image

最後,就是重頭戲 開始製作RWD網站

我們來到 mobirise.com 將這套工具下載並安裝在你的電腦上

raw-image

安裝好後,開啟軟體,再來就是拖拖拉拉就可以完成一間網站囉~

raw-image

當你完成後,發佈之後

基本上一間RWD的靜態形象網站就已經完成了

至於要接購物車或是資料庫等

這就是套程式的事囉~

所以,若你想當一個版面網站設計師

你可以使用這一套軟體

若你想搞形象網站也可以用這一套

若你想搞一頁式網站、客製化RWD網站

這一套你也可以拿去使用~

以上,希望對大家有幫助囉~

下回,咱再把詳細的教學影片放上囉~




補充教學 : https://reurl.cc/e164L

謝謝~


留言
avatar-img
MJ的沙龍
43會員
136內容數
獨立遊戲開發紀錄
MJ的沙龍的其他內容
2025/04/12
🗓 Steam 上市日期:2025/4/28 | 🖤 加入願望清單:https://store.steampowered.com/app/3634400/Elara/ 「他們說我太敏感,說我不合群。 但我只是——不想學會沉默。」 —Elara Quinn 你是否曾經在工作時,感
Thumbnail
2025/04/12
🗓 Steam 上市日期:2025/4/28 | 🖤 加入願望清單:https://store.steampowered.com/app/3634400/Elara/ 「他們說我太敏感,說我不合群。 但我只是——不想學會沉默。」 —Elara Quinn 你是否曾經在工作時,感
Thumbnail
2025/03/05
在靈異頻發的醫院夜班,小護士林筱筱意外發現她的冷酷上司——蘇醫生,竟然早已死亡五年,從此她與這位神秘的「鬼醫生」攜手處理靈異事件,並在驚魂不斷的夜班中逐漸建立起一段超越生死的羈絆。
Thumbnail
2025/03/05
在靈異頻發的醫院夜班,小護士林筱筱意外發現她的冷酷上司——蘇醫生,竟然早已死亡五年,從此她與這位神秘的「鬼醫生」攜手處理靈異事件,並在驚魂不斷的夜班中逐漸建立起一段超越生死的羈絆。
Thumbnail
2025/02/24
這是一篇懸疑驚悚小說,描述女主角江語珊調查一起離奇命案的故事。死者林曦是一位心理學教授,死於自家公寓,現場佈滿鏡子,死者嘴角帶著詭異的微笑。語珊在調查過程中發現,此案與一種名為「鏡像侵蝕」的心理現象有關,並逐漸被捲入其中。
Thumbnail
2025/02/24
這是一篇懸疑驚悚小說,描述女主角江語珊調查一起離奇命案的故事。死者林曦是一位心理學教授,死於自家公寓,現場佈滿鏡子,死者嘴角帶著詭異的微笑。語珊在調查過程中發現,此案與一種名為「鏡像侵蝕」的心理現象有關,並逐漸被捲入其中。
Thumbnail
看更多
你可能也想看
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
【removebg】免費簡單,100% 自動完成背景移除「remove.bg」,100% 自動完成,操作直覺化,簡易上手,免費使用,直接下載檔案,也可以連結到【Canva】做設計。
Thumbnail
【removebg】免費簡單,100% 自動完成背景移除「remove.bg」,100% 自動完成,操作直覺化,簡易上手,免費使用,直接下載檔案,也可以連結到【Canva】做設計。
Thumbnail
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
Thumbnail
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
Thumbnail
【設計素材】3dicons 這個網站提供了精美的 3D 圖標,使用 CC0 開源授權,可以 100% 免費用於商業和個人用途,還可以整批一次下載,除了提供一般圖片檔之外,還提供了 3D原始檔,例如 Figma、Blender、Fbx 等檔案格式。   【線上工具】cleanup.pictures
Thumbnail
【設計素材】3dicons 這個網站提供了精美的 3D 圖標,使用 CC0 開源授權,可以 100% 免費用於商業和個人用途,還可以整批一次下載,除了提供一般圖片檔之外,還提供了 3D原始檔,例如 Figma、Blender、Fbx 等檔案格式。   【線上工具】cleanup.pictures
Thumbnail
基本上這個網站目前不需註冊付費也能使用一些基本的功能,進入網站後先點CREATE NOW。
Thumbnail
基本上這個網站目前不需註冊付費也能使用一些基本的功能,進入網站後先點CREATE NOW。
Thumbnail
這次來點更實用的,動態橫幅(Banner)的製作。
Thumbnail
這次來點更實用的,動態橫幅(Banner)的製作。
Thumbnail
沒有PS、AI的基礎,也想要快速製作一張張屬於自己的網站圖片嗎?或是只想花少少的時間,就完成圖片的編輯及上架嗎?你需要的是這5款免費線上編輯、壓縮及去背軟體;這次TinyBook 將會向大家介紹,2021年推薦的線上圖片編輯工具及使用流程,讓沒有設計底子的你,也可以快速完成圖片製作哦!
Thumbnail
沒有PS、AI的基礎,也想要快速製作一張張屬於自己的網站圖片嗎?或是只想花少少的時間,就完成圖片的編輯及上架嗎?你需要的是這5款免費線上編輯、壓縮及去背軟體;這次TinyBook 將會向大家介紹,2021年推薦的線上圖片編輯工具及使用流程,讓沒有設計底子的你,也可以快速完成圖片製作哦!
Thumbnail
在初學網頁排版的時候,文字、段落、列表的排版可以說是比較好上手的,只要稍微透過margin、padding、border及文字顏色上調整,就可以輕易獲得一段美美的文字。 然而要去調整圖片的大小及其他相關效果,就不是那麼容易的一件事了,往往在開發時,都會出現圖片效果不如自己預期的狀況。
Thumbnail
在初學網頁排版的時候,文字、段落、列表的排版可以說是比較好上手的,只要稍微透過margin、padding、border及文字顏色上調整,就可以輕易獲得一段美美的文字。 然而要去調整圖片的大小及其他相關效果,就不是那麼容易的一件事了,往往在開發時,都會出現圖片效果不如自己預期的狀況。
Thumbnail
Step1. 在photoshop中執行[ 檔案> 開新檔案 ] 設定寬度:100像素、高度:100像素、背景的內容為白色,開啟要製作連續背景圖的新檔。 使用「自訂形狀工具」,選擇所要繪製的圖案、像素格式,在圖層控制版上新增圖層1,設定前景色為灰色(可依喜好更改),直接在檔案中間點一下滑鼠,由設
Thumbnail
Step1. 在photoshop中執行[ 檔案> 開新檔案 ] 設定寬度:100像素、高度:100像素、背景的內容為白色,開啟要製作連續背景圖的新檔。 使用「自訂形狀工具」,選擇所要繪製的圖案、像素格式,在圖層控制版上新增圖層1,設定前景色為灰色(可依喜好更改),直接在檔案中間點一下滑鼠,由設
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News