問與答
Joomla教學文件
如何使用SP Page Builder打造完美的 JOOMLA 和 WORDPRESS 網站，SP Page Builder是一個超級簡單的 網頁設計 工具，可以用來打造自己的網站。
你們可能會問，為什麼要建立網站？好問題！網站可以成為一個多功能的賺錢工具，網站可以不但可以做線上業務和電子商務、廣告和聯盟行銷、提供線上課程或內容、部落格和內容創建、線上諮詢和服務等，網站還能幫助你實現財務自由的目標，而學習如何設計、建置網站也是一項非常有用的技能，未來或許能幫助你找到一份好工作。
影片教學：
網頁設計 網站教學：無須程式碼，輕鬆做網頁
網頁設計 網站教學：怎麼做 響應式網頁？
探索前端網頁設計的魔法！打造完美的JOOMLA和WORDPRESS網站
這篇文章依據 益盛科技 多年來的 網站建置 網頁設計 實際案例為基礎，深入了解JOOMLA和WORDPRESS的前端網頁設計，讓你的網站成為吸引眾多粉絲目光的亮點。
在這篇教學中提到：
1. 使用 網頁設計 前端編輯器 的秘訣，建置令人驚嘆的網站
2. 網頁設計 前端編輯器的操作技巧
3. 如何匯出和匯入網頁佈局，節省寶貴的時間
4. 調整網頁版面、文字斷行，甚至手機版網頁圖片的比例
5. 介紹4種網頁大圖BANNER輪播特效，創造獨特風格
6.手機版網頁設計的訣竅
無論你是專業設計師還是初學者，閱讀文章，讓你的 網頁設計 技能更上一層樓。
文章目錄
1. SP PAGE BUILDER：彈性強大的網頁設計工具
1.1 SP Page Builder簡介
1.2 為什麼要使用SP Page Builder？
2. 什麼是 網頁設計 前端編輯器?
2.1 進入 網頁設計 前端編輯器
2.2 初次使用 網頁設計 前端編輯器 介面
2.3 SP Page Builder 網頁設計 頂部工具欄
2.4 SP Page Builder 網頁設計 前端編輯器 側邊欄
2.5 SP Page Builder 網頁設計 前端編輯器 側邊欄與外掛設定
3. 匯出和匯入網頁
3.1 儲存和分享您的設計
3.2 匯入現有的網頁佈局
4. 網頁版面間距修改
4.1 調整網頁元素之間的距離
5. 網頁文字斷行的設定
5.1 控制網頁文字如何換行
6. 手機版網頁圖片比例的調整
6.1 保持圖片比例一致，優化手機版網頁
7. 桌機網頁和手機網頁版面製作
7.1 製作適合不同螢幕大小的網頁版面
8. MARGIN 和PADDING-CSS說明
8.1 自訂網頁元素的邊界和內距
9. 手機版網頁 設定為一排2張圖
9.1 創建手機版網頁的多圖格局
10. Image Carousel 和 Image的區別
10.1 Image Carousel 和 Image的不同
10.2 Image carousel 和Image 差異表格
10.3 建立Image Carousel樣式範本
11. 網頁設計 輪播特效的說明
11.1 大圖BANNER輪播：單一圖片輪播
11.2 3張圖片一組輪播
11.3「卡片式輪播」（Card Carousel）
11.4「無限輪播」（Infinite Carousel）
12. 圖片輪播不要圓角的設定
12.1 自訂圖片輪播的角落形狀
13. 網頁設計 範例教學
13.1 國立虎尾科技大學-通識教育中心-課程資訊修改
1. SP PAGE BUILDER：彈性強大的網頁設計工具
1.1 SP Page Builder簡介
SP Page Builder有一個很酷的特點，就是可以直接在前端編輯網站，就像在編輯照片一樣，可以直覺式的拖拉文字、圖片、按鈕等等，並能即時預覽效果。
而SP Page Builder也提供了很多有趣的元素，比如圖片輪播、表格、影片等等，可以隨心所欲地將它們添加到網站頁面中。
它還有很多現成的設計範本，這樣就不需要從頭開始設計網站，可以節省大量時間。
無論是想建立個人網站、學術作品集，還是一個小型的網路商店，SP Page Builder都能完成。
註：在WORDPRESS名為Qubely
1.2 為什麼要使用SP Page Builder？
網頁設計 網站建置 不再僅僅是為了展示商品或個人訊息，它更是一個互動式和引人入勝的體驗。
SP Page Builder是一個強大的網頁設計及編輯的工具，可以建立精美且功能豐富的網站，而不需要深厚的程式碼知識或專業的 網頁設計 技能。
以下是一些使用SP Page Builder的重要原因：
A. 視覺化設計：
SP Page Builder提供了一個直覺的網頁前端編輯器，可以在實時預覽中設計網頁。
透過拖放元素和即時編輯來輕鬆設計編輯網頁，無需觸及程式碼。
B. 節省時間和精力：
傳統的網頁設計可能需要花費大量的時間和精力，特別是對於非專業的使用者。
SP Page Builder可以迅速建立網頁，節省時間，讓您專注於內容和設計。
C. 豐富的元素和模板：
SP Page Builder提供了大量的內建元素、網頁範本和佈局。
這些網頁元素範本可以設計編輯各種不同風格和用途的網站，從商業網站到個人部落格，應有盡有。
D. 多語言支援：
如果網站需要在多個語言之間切換，SP Page Builder具有完整的多語言支援。
能夠輕鬆地將網站本地化，擴展網站受眾。
5. 前瞻性的功能：
SP Page Builder不斷更新和改進，以跟上網頁設計的最新趨勢和技術。
能夠使用最新的功能和效果，使網站保持現代和吸引人。
6. 可擴展性：
SP Page Builder與多個Joomla和WordPress模板相容，並且可以與其他擴展程式集成。提供了無限的可能性，以滿足不同的需求。
SP Page Builder是一個令人驚歎的工具，對於任何希望設計引人注目的網站的人來說都是一個必不可少的資源。
無論您是初學者還是有經驗的網頁設計師，它都能幫助您實現您的網頁設計目標。
2. 什麼是 網頁設計 前端編輯器?
網頁設計前端編輯器是一種工具或軟體，它允許使用者在建立或編輯網頁時直接在網頁的前端（即瀏覽者將看到的部分）進行操作和預覽，而無需深入了解網頁的後端技術或程式碼。
這種編輯器的主要目的是提供一個直觀的、視覺化的方式來設計和排版網頁，使非專業的使用者能夠輕鬆地設計編輯具有吸引力和功能性的網站。
以下是網頁設計前端編輯器的一些關鍵特點和功能：
A. 拖放功能：
網頁設計 前端編輯器通常具有拖放功能，使使用者可以從工具欄中選擇元素（如文字方塊、圖像、按鈕等）並將它們直接拖放到所需的位置。
這消除了手動編寫或編輯HTML和CSS的需求。
B. 實時預覽：
使用者可以在設計網頁過程中立即查看其更改的效果，即時調整和優化網頁的外觀和功能。
C. 網頁設計元素庫：
網頁設計 前端編輯器通常提供了一個內建的元素庫，其中包含各種預製的網頁元素和網頁範本，以幫助使用者快速建立各種不同風格和用途的網頁。
D. 無需程式設計知識：
對於那些不具備程式設計知識的使用者來說，網頁設計 前端編輯器是一個理想的工具，因為它們無需了解程式設計語言。
E. 視覺化設計：
使用者可以通過直覺的界面調整網頁設計元素的位置、大小、顏色、字體等設計細節，而不必查看或修改程式碼。
前端編輯器使網頁設計變得更加容易，並大大簡化了設計和編輯網站的過程，使更多人能夠參與網頁設計，而不僅僅是專業的網頁開發人員。
2.1 進入 網頁設計 前端編輯器
從 SP Page Builder 的控制台輕鬆訪問所有網站頁面。點擊每個頁面旁的編輯圖標，即可進入編輯界面。
(以下版本為5.0.8)
2.2 初次使用 網頁設計 前端編輯器 介面
一開始，會立刻看到 SP Page Builder 的頂部工具欄和簡潔的前端側邊欄編輯器，我們來更仔細地瞭解每一個部分。
2.3 SP Page Builder 網頁設計 頂部工具欄
在頂部工具欄上，能執行以下操作：
1. 訪問控制台頁面
2. 使用 6 種不同的視窗進行內容自訂：
桌面、筆記型電腦、平板電腦橫向、平板電腦縱向、手機橫向、手機
3. 取消頁面自訂變更
4. 重做頁面自訂變更
5. 儲存頁面自訂變更
2.4 SP Page Builder 網頁設計 前端編輯器 側邊欄
SP Page Builder 擁有高度靈活的前端網頁設計編輯器。
只需輕輕拖動你想使用的元素，然後將它們放在正確的位置，就能完成你所期望的網頁設計。
這個編輯器不僅節省了我們 設計網頁 的時間，也提高了效率，每次的網頁修改都能即時預覽效果。
透過這強大的拖放前端網頁設計工具，我們能夠實時編輯，設計並建立出精美的網頁，並即時新增各種元素和內容。
在左側，你會發現一個時尚的前端側邊欄，這就是所有的魔法聚集處。
它是這個網頁設計工具的核心，可以輕鬆增加外掛和內建區塊，同時也能使用這個編輯工具進行所有的網頁版面設計。
憑藉這個極具彈性的前端側邊欄，能夠建立功能豐富內容和無限的可能性的現代網頁。
這個側邊欄編輯器包括以下 5 個面板：
- 外掛
- 圖層
- 佈局
- 媒體
- 選項
2.5 SP Page Builder 網頁設計 前端編輯器 側邊欄與外掛設定
前端側邊欄和外掛設定都可以自由移動，可以把它們隨意拖放到頁面上的任何位置。
也能在各種不同螢幕尺寸上輕鬆工作和設計網站頁面，不會因為編輯器的位置中斷工作流程。
還可以將側邊欄固定在頁面上，讓它浮動在右側或左側，根據需求進行調整。
3. 匯出和匯入網頁
SP Page Builder可以輕鬆匯出和匯入網頁佈局，這能迅速建立網站頁面結構，並複製以及重複使用之前設計的網頁設計佈局，節省寶貴的時間。
3.1 儲存和分享您的設計
儲存和分享您的設計是在網頁設計過程中非常重要的步驟。
當您設計或編輯網頁時，希望工作被保存以防止意外丟失，同時也可能需要與他人共享您的設計，以便他們能夠檢閱、修改或使用它。
在 SP Page Builder 中，一旦建立了自訂的網頁設計（包括頁面、行和外掛程式），可以將其保存以供將來多次使用。
3.2 匯入現有的網頁佈局
匯入現有的網頁佈局是在網頁設計中的重要步驟之一，可以節省大量的時間和工作。
以下是一些關於匯出和匯入功能的重要資訊：
(1) 每個頁面都提供匯出/匯入功能。 SP Page Builder可以匯出任何頁面，然後將其存儲以供將來使用，甚至可以在其他網站上使用。匯出的頁面結構會以 .json 文件的形式保存。
(2) 請注意：保存的文件不包含圖片、mp4 檔案或附件，僅包含指向這些資源的連結。
(3) 匯出/匯入功能適用於模組和文章中的 SP Page Builder。
(4) 匯出（EXPORT）：點擊“EXPORT”按鈕以匯出現有的頁面、模組或文章內容。系統將提供一個 .json 下載文件。
(5) 匯入（IMPORT）頁面：打開一個新頁面，然後點擊“IMPORT”按鈕，您將看到選擇 .json 文件的提示，選擇它，頁面將立即匯入！完成後，請點擊頂部的“SAVE”按鈕。
(6) 請注意！您也可以在不同的網站上重複使用匯出的頁面，但必須確保它包含相同的ADDON列表、圖片結構和CSS。否則某些內容可能無法正常工作。
(7) 匯出的 .json 文件不包含任何外掛程式，僅包含佈局和頁面設置。為了實現視覺效果，需要在新頁面中存儲相同的圖片。
4. 網頁設計 版面間距修改
4.1 調整網頁元素之間的距離
舉例：右邊３個圖片不需要間距該如何調整？
圖片來源：時尚服飾電商 belonging
進入 SP Page Builder編輯頁面
(1) 請選擇ROW->ROW OPTIONS
(2) Remove Gutter->YES 即可
5. 網頁文字斷行的設定
5.1 控制網頁文字如何換行
加上斷行語法
6. 手機版網頁圖片比例的調整
6.1 保持圖片比例一致，優化手機版網頁
圖片變形的問題出現是因為手機版的高度設定不當。
為了解決這個問題，需要在手機版的設定中設定適當的高度，並根據原始圖片的尺寸比例進行調整。
例如，原始圖片的尺寸是1291x749像素，那麼手機版的高度應設定為390x226像素。
請在輪播（carousel）的高度設定中，將手機版的高度設定為226像素。這樣可以確保圖片在手機上正確顯示，不再變形。
7. 桌機網頁和手機網頁版面製作
7.1 製作適合不同螢幕大小的網頁版面
舉例：桌機網頁版面，設計稿圖片尺寸1921x749px
圖片來源：時尚服飾電商 belonging
手機網頁版面，設計稿圖片尺寸 390x343px
＊手機比例非設計稿計算說明範例：手機寬度390px，原圖1000px，1000/390=2.56，高1048/2.56=409px
(1) 建立一個Image Layouts的區塊,命名為大圖-M(mobile)手機版網頁使用
(2) 上傳尺寸390x343px的圖片
(3) 在文字框輸入文字
(4) 修改文字大小及行距以符合版面
(5) 確認行距是否生效：
開啟網頁，使用CHROME瀏覽器，點擊F12按鈕，再篩選處輸入line-height ，就會出現相關的css，如已確認修改但在前台css卻沒有生效，可能是主機和網站都使用了快取和緩存的功能，所以當您對程式進行修改後，這些更改可能不會立即在前台產生反應。
快取和緩存的功能旨在提升網站的效能和加速載入時間。它們將一些資料暫存在您的瀏覽器或伺服器上，以便在下一次訪問時可以更快速地提供相同的資源。
然而，這也可能導致當您進行程式修改時，前台的顯示並未立即更新，這是因為部分資源可能仍然被緩存在您的瀏覽器中，或者在伺服器上的快取尚未被刷新。
這是一種常見的情況，並不意味著您的網頁修改無效喔!
(6) 設定在桌面網頁及平板網頁隱藏,只有在手機網頁才看得到
(7) 將大圖-D(desktop)桌面網頁設定在手機隱藏,只有桌機和平板才看得到
8. MARGIN 和PADDING-CSS說明
8.1 自訂網頁元素的邊界和內距
(1) 在CSS中，margin和padding是用來控制元素與其他元素之間的間距。
(2) Margin 是用來控制元素與其他元素之間的外間距。例如，如果你設定一個元素的 margin-top 為 10px，那麼該元素與上方元素之間將會有 10px 的間距。
(3) Padding 是用來控制元素內部與元素邊界之間的間距。例如，如果你設定一個元素的 padding-left 為 15px，那麼該元素內部與左邊邊界之間將會有 15px 的間距。
(4) 請至SP PAGE BUILD->ADDON->STYLE->PADDING/ MARGIN可設定上下左右的間距
9. 手機版網頁 設定為一排2張圖
9.1 創建手機版網頁的多圖格局
圖片來源：時尚服飾電商 belonging
範例：
(1) 到後台點選下圖圈圈的Column Options
(2) 點到裡面之後點選RESPONSIVE，在Mobile Layout的地方選擇col-xs-6，這樣就會是兩欄了
(3) 這個概念就是用12去除你選擇的數字 就會是顯示出來的欄位，舉例來說如果要三個欄位就是選col-xs-4 ，要一個欄位就是選col-xs-12，所以要兩個欄位就是選6的那個
10. Image Carousel 和 Image的區別
10.1 Image Carousel 和 Image的不同
就像郭台銘和郭台強一樣，Image和Image Carousel雖然只差一個字，卻在功能上有著巨大的差異。
Image carousel 是指一種可以顯示多張圖片的滑動元件，通常會在網頁或應用程式中使用，讓使用者可以透過滑動或點擊等操作來瀏覽多張圖片。它可以展示一組相關的圖片，例如產品圖片、旅遊景點圖片等等，並且可以設定自動輪播、動畫效果等功能。
而 image 則是指單個圖片，通常是一個網頁或應用程式中的一個圖片元素，用於顯示單個圖片。使用者可以點擊圖片進行放大、下載等操作，但是不能像 image carousel 一樣顯示多張圖片並且可以進行滑動操作。
Image carousel 是一種多圖片展示的滑動元件，而 image 則是單個圖片元素，它們在使用場景和功能上有所區別。
image Carousel 通常透過CSS和JavaScript來實現，所以比單純的image還複雜 ，2種是不一樣的元件。
10.2 Image carousel 和Image 差異表格
|
Image Carousel |
Image |
|
|
定義 |
可顯示多張圖片的滑動元件，常用於網頁或應用程式，供使用者滑動、點擊等操作以瀏覽多張圖片。 |
單一圖片元素，常用於網頁或應用程式中，用於顯示單一圖片。 |
|
功能 |
展示相關圖片組，如產品、旅遊景點等，可自動輪播、使用動畫效果。 |
用戶可點擊放大、下載等，無法像 Image Carousel 一樣滑動顯示多張圖片。 |
|
使用場景 |
網頁、應用程式等 |
網頁、應用程式等 |
|
複雜度 |
較複雜，通常需使用CSS和JavaScript來實現。 |
較簡單，通常只需單一圖片元素。 |
|
元件區別 |
多圖片展示、滑動操作 |
單一圖片展示 |
10.3 建立Image Carousel樣式範本
(1) 在ROW中點選+圖示
(2) 在「SP Page Builder」的「Addons List」中加入「Image Carousel」。
(3) 按一下你想要的「LAYOUT」：有四種不同的「樣式」可以選。選擇需要的輪播版面，根據範例將原本的圖片換掉。每個版面都有特別的設計哦！
(4) Carousel Items編輯輪播項目：點擊Item上的設定圖示，就可以進入這個小工具的項目更換圖片囉！
(5) 預設圖片大小：在圖片上按一下滑鼠右鍵，然後點選「在新分頁中開啟圖片」，就會跳到另一個看圖片的網頁唷！
(6) 點選網頁頁籤：只需要點一下網頁的分頁頁籤，就會看到圖片的尺寸寬高數值。如果網站需要非常清晰的圖片，可以依照原本圖片的寬高乘以２，例如說，690X388 PX變成 1380X776 PX。這樣圖片就會更清楚囉！
通常網頁上的圖片解析度都是72 dpi，這對於電腦螢幕的顯示是最適合的。
但如果要在紙上印刷或展示大畫面時，會需要更高的解析度，大約300 dpi。
網頁的圖片大小最好不要太大，這樣網頁才能夠快速載入。
一般來說，每個圖片的大小最好在100 KB 到 300 KB 之間，這樣網頁的速度會比較快唷！
圖片的容量對於網頁的載入速度影響很大。
如果圖片太大，可能會讓網頁變得很慢，特別是在網路速度不太好的情況下。
建議儘量把圖片壓縮，並選擇適合的檔案格式，比如說 JPEG 格式，這樣可以在保持圖片品質的同時，減少檔案大小，讓網頁載入更快唷！
11. 網頁設計 輪播特效的說明
11.1 大圖BANNER輪播：單一圖片輪播
(1) 響應式網頁圖片裁切說明：
範例：會將響應式網頁的圖片改成和原設計圖相同比例390px ｘ228px，圖的話就是確保要顯示的人事物在中心的比例39:23範圍內就好(如圖示意在中間39:23的紅色框框內)，這樣就確保裁到也不影響
圖片來源：時尚服飾電商 belonging
(2) 進入前端網頁編輯頁面，在要編輯的區塊點選滑鼠左鍵
(3) 會出現左邊[大圖輪播]image carousel編輯畫面
(4) 往下拉，如需新增banner請點選[+ADD ITEM]按鈕，如需修改圖片請點選carousel item的[
(５) 往下拉，如需更換圖片請點選［REMOVE]再上傳新圖片
(6) 修改完成後點選[save]儲存按鈕即可
11.2 3張圖片一組輪播特效
比例調整說明：依據網頁寬度的不同，高度也需要按照比例進行調整，避免變形
強調一下，版面圖片的寬度是由設計師在每次製作網頁版面時所決定的。
在建立網站的過程中，首要步驟是由設計師負責設計整體網頁佈局。一旦版面設計確定無誤，設計師接著需要定義在不同裝置上（包括桌機、平板和手機）所顯示的版面元素，如圖片尺寸、字體大小以及行距等。這些定義確保了在不同螢幕大小上都能呈現最佳的視覺效果。之後，這些設計指引會被交由前端工程師進行網頁切版的工作，確保網頁在各種裝置上都能適切地呈現出設計師所設計的佈局和風格。
請注意：版面設計元素等相關資訊是由設計師所定義，而不是由工程師制定。
(1) 開啟網頁，使用CHROME瀏覽器，點擊F12按鈕，滑鼠移到圖片上，則會出現圖片的寬及高
(2) 圖片依據螢幕寬度分成３塊，原圖寬度為690px，輪播圖片寬度為338.66px
要計算圖片等比例縮放後的高度，可以使用以下公式：
新高度 = (新寬度 / 原寬度) * 原高度
在這個情況下，新寬度是 338.66px，原寬度是 690px，原高度是 388px。
換算一下：
新高度 = (338.66 / 690) * 388 ≈ 190.84
所以，寬度為 338.66px 時，高度約為 190.84px，保留小數點後兩位。
也可以開啟PHOTOSHOP或Illustrator軟體，輸入須變更的寬度，它就會出現對應的高度
(3) 開啟設定調整高度：在Carousel Height 填出相應的高度
(4) 正常比例顯示如下
(5) 平板及手機頁面高度調整：打開 CHROME 瀏覽器，按下 F12 鍵，然後點擊「切換裝置工具列
(6) 接下來，依照上面提到的步驟換算出圖片高度，並在Carousel Height的平板及手機填上相應的高度
11.3「卡片式輪播特效」（Card Carousel）
一種能夠無限循環、具有卡片疊放效果的輪播特效，圖片寬高比例換算及說明請重複上述步驟。
注意：圖片的寬度應該至少是特效區塊寬度的70%，這樣才能呈現出卡片疊加的效果。
11.4「無限輪播特效」（Infinite Carousel）
圖片寬高比例換算及說明請重複上述步驟。
12. 圖片輪播不要圓角的設定
12.1 自訂圖片輪播的角落形狀
(1) 答：用image carousel的話 點到裡面的style
(2) 在.sppb-carousel-extended-item img底下寫border-radius: unset;就可以了，如圖。
13. 網頁設計 範例教學
13.1 國立虎尾科技大學-通識教育中心-課程資訊修改
來函回覆：
1. 進入您的Joomla 控制台，然後至「元件」 > 「SP Page Builder」。
2. 從頁面列表中選擇「課程資訊」 ， 當滑鼠懸停在頁面上時，您應該能夠看到兩個選項「Preview」和「Frontend Editor」，點擊「Frontend Editor」。
3. 到要修改的方塊上可以點擊編輯或刪除圖示
4. 修改完成也可以將此列改為2欄
5.完成之後再按右下角"save"按鈕即可
這篇文章依據益盛科技多年來的 網站建置 網頁設計實際案例為基礎，深入探討了如何利用SP PAGE BUILDER在JOOMLA和WORDPRESS平台上進行前端網頁設計。
我們介紹了SP PAGE BUILDER的優勢，它是一個強大而靈活的網頁設計編輯工具，可幫助使用者設計令人驚嘆的網站。
更深入瞭解了網頁設計前端編輯器的操作技巧，包括如何進入前端編輯器、探索其界面、使用頂部工具欄和側邊欄，以及調整側邊欄和外掛設定的方法。
我們也討論了如何匯出和匯入網頁佈局，以節省寶貴的時間。
這篇文章應該讓您學會如何調整網頁版面、文字斷行，甚至手機版網頁圖片的比例，讓網站在不同螢幕上都表現出色。
我們也介紹了4種網頁大圖BANNER輪播特效，幫助您創造網站獨特的風格，使網站脫穎而出。
無論您是專業設計師還是初學者，這篇文章都提供了前所未有的網頁設計靈感，讓網頁設計技能更上一層樓。
參考文章
網站架設 WordPress：網站優化 從一般設定到媒體管理
B2B 企業網站 建置教學 ：全方位 產品目錄 、 詢價清單 與 網頁設計 說明
https://www.joomshaper.com/documentation/sp-page-builder
益盛科技 電子商務購物車網站 網站後台教學手冊 v1 2
推薦閱讀：全後台模組化形象官網
簡易電子書下載：一頁式網頁設計電子書
如果您喜歡我們的文章，歡迎分享！也歡迎查看我們的其他文章。如果有任何疑問也歡迎加line和我們聯絡
全後台模組化形象官網，符合各式商業模式與需求，請參考：https://des13.com/service/rwd.html
Written by Ring
作者：益盛科技 專案經理
通過Google Ads-Measurement Assessment
15年 網站專案管理及人員管理實務經驗。
具網站美編企劃繪製能力
具多媒體網頁設計與 RWD設計之實務經驗
