A.PAO designSTUDIO BLOG

利用免費軟體PickPic建立對應RWD的圖片

Tue, 08 Dec 2020 04:16:17 +0000

客戶通常不在網站初期建立時提出需求，往往都在完成後才有意見，尤其碰到客戶千奇百怪的需求，都是十分具有挑戰性。今天來說明如何利用免費軟體，將兩張圖檔放置於一個圖檔內完成上傳。也能符合RWD的規範。

▼客戶需求將兩張圖直放

▼在Pickpic中開啟第一張圖片

▼「調整大小」>「調整畫布大小」

▼圖示1123px（看自己的圖片大小）修改至兩倍長2246xp

▼再將第二張圖片用拷貝貼上的方式移動到第一張圖片的下方，並記得儲存

▼儲存後，就能得到兩張合併的圖片了

▼再將合併的兩張圖，上傳至後台，就可以得到一張對應RWD的圖片了
範例網址 https://www.aantut.org/Platform_View.php?id=12

Tags - 免費軟體 , pickpic , rwd , 圖片

如何在RWD對應頁面中放大圖片

Wed, 26 Aug 2020 03:46:06 +0000

如果有個圖片檔案文字很多，又需要放大時，可以在PC版或是手機版上做圖片放大動作。方法如下：

▼PC 版 / 電腦版：按圖片上方按右鍵，開啟圖檔在新的頁簽中（瀏覽器：Chrome）

▼PC 版 / 電腦版：開啟新頁簽後，再點擊圖片，就能使圖片放大（瀏覽器：Chrome）

▼mobile 版 / 手機版：開啟需要放大內容的網頁

▼mobile 版 / 手機版：於圖片上方，使用兩個指頭滑向兩側，讓圖片放大

Tags - rwd , 頁面 , 放大 , 圖片 , pc , mobile

在RWD對應頁面中增添2張圖片的技巧

Tue, 11 Aug 2020 09:59:56 +0000

當因為需求，需要將兩張圖片放至網站後台時，如果橫放會導致縮圖變小，最好的方式就是將圖片直放，才能得到PC版與手機版內最好的瀏覽效果。
▼橫放的效果，因為橫幅縮小，整體變的不清楚

▼直放的效果，整體字與圖都比較清楚

Tags - 兩張圖 , 直放 , 橫放 , 差異

在後台中添加連結的URL（網址）

Tue, 11 Aug 2020 08:09:46 +0000

在A.PAO 開發中的網站後台當中，上圖文都很方便，尤其只需要一次上架，就會對應電腦版（PC）與手機版（mobile）頁面，但想要在前台給用戶看到網址的話，需要輸入網址的HTML碼。
範例網址如下：
https://www.aantut.org/WhatsNews_View.php?id=150
▼電腦版（PC）圖例

▼手機版（mobile）圖例

要在後台內加入以下連結時，需寫入 html 程式碼
https://forms.gle/EuLQYfoTWLQrQ3kV6
程式碼如下：

https://forms.gle/EuLQYfoTWLQrQ3kV6

說明：
這次連結的網址：
https://forms.gle/EuLQYfoTWLQrQ3kV6

網址的HTML程式碼：
輸入網址或說明文

意思為在另一分頁內開啟：
target="_blank"

▼後台的欄位

Tags - tag

某公司購物網站視覺架構說明書

Mon, 28 Nov 2016 05:47:30 +0000

這是幫一家貿易公司所做的電商購物平台所做的規劃書的部分內容。
把主要的規劃功能與內容以視覺方式呈現給客戶瞭解，也方便雙方的溝通。

註：這是第二代的自主開發RWD購物平台

Facebook 連結：https://goo.gl/BmO2UC
Tags - 电商网站 , 公司 , 購物 , 網站 , 視覺 , 架構 , 說明書