網頁設計公司推薦：10個教學＋範例（網站製作, 軟體報價）

網頁設計軟體推薦; 5. AWD vs. RWD 網頁. 6. 一頁式商店範例; 7. 套版網站vs. 客製化網站; 8. 網頁設計報價; 9. 文案＆多媒體設計; 10. 排版設計 ... SkiptoprimarynavigationSkiptomaincontentSkiptoprimarysidebarSkiptofooter 你搜尋了很多「網頁設計」，但總得到些零碎資訊？ 「RWD、AWD意思？CMS是什麼？」你問。

對此，我在以下10個教學，示範如何設計網站。

從規劃到架設流程、從報價到製作軟體推薦…並比較「套版vs.客製化」優缺點。

無論是設計公司還是個人網頁，我將助你達成目標。

快速導航 1.「官網」建置目的2.如何架設網站3.CMS內容管理系統4.網頁設計軟體推薦5.AWDvs.RWD網頁 6.一頁式商店範例7.套版網站vs.客製化網站8.網頁設計報價9.文案＆多媒體設計10.排版設計 1.「官網」建置目的 為什麼需要網站？ 網站=軟體，因此架網站目的是行銷自動化——特別是推廣、通路、和商業數據蒐集。

從市場研究的角度看，網站有助線上自動化觀察法。

兩種中小企業網站類型： 品牌/公司/個人形象網站電商網站（通常含購物車系統） 形象網站+電商系統=電商網站 建議先設計Logo、計畫行銷4P、寫文案…再規劃網站，因為內容決定架構＆功能。

若架站沒有商業目的，建議經營FB粉專、或FB社團就好。

2.如何架設網站 網站架設流程有四： 註冊網域（申請一個路標）設定DNS指向（把路標指向你租來的那塊地）租用虛擬主機（租一塊地）安裝架站軟體（來蓋房子） 一站式服務或架站平台只有流水式設定，不須分別操作以上四個階段=快速架站（最快只要10分鐘）！ 3.CMS內容管理系統 CMS(ContentManagementSystem)是網站後台、前台的管理系統。

在任一伺服器安裝CMS=架設網站，因此CMS又稱「架站軟體」。

根據W3Techs，市占率最高的CMS是WordPress（大勝Shopify、Joomla、Drupal和Wix！） 4.網頁設計軟體推薦 寫網頁軟體有AdobeDreamweaver… Dreamweaver的WYSIWYG編輯器 和MicrosoftVisualStudio。

VisualStudioCode(簡稱VSCode)是熱門的VisualStudio工具 網站開發(Websitedevelopment)和網頁設計師(Webdesigner)有哪些 UI/UX設計師前端工程師後端工程師DevOps工程師設計軟體Sketch,InVisionStudio,MockFlow,Figma,AdobePhotoshop,AdobeXDChrome開發者工具程式語言HTML,CSSHTML,CSS,JavaScript,SassPHP,Python,Java,SQL,NoSQL[基本了解各種程式語言]框架Bootstrap,jQuery,Vue.js,ReactNode.js,RubyonRails技能使用者研究,文案撰寫,視覺傳達設計,Prototyping,RWD常用斷點/尺寸設定RWD寫法,Git指令,WordPress,API串接Linux指令,CDN,Redis,Apache,Nginx,MySQL,RESTAPI,JSONAPI伺服器作業系統,網路安全,基礎設施＆應用程式監控,Git指令,Ansible指令,JenkinsCI/CD,Docker指令,Kubernetes,AWS,Azure,GCP 前端工程師+後端工程師=全端工程師。

通用寫程式軟體有VSCode、Atom和SublimeText。

程式設計課程推薦： ALPHACamp 六角學院 WYSIWYG網頁編輯器 網頁製作平台如Wix的WYSIWYG編輯器👇 WixWebsiteEditor功能強大，但產生的網頁原始碼複雜（不易維護或SEO） WordPress內容設計外掛如Elementor的WYSIWYGeditor↓ WYSIWYGeditor優缺點： 不懂程式語言也能設計網頁 可能會綁定內容，不便網站搬家 產生複雜的程式碼=降低網頁加載速度、不便維護 5.AWDvs.RWD網頁 AWD、RWD意思？ AWD(AdaptiveWebDesign)是自適應網頁設計，根據不同使用者裝置（桌機、平板電腦、手機…）透過同一網址提供不同版本的HTML和CSS。

RWD(ResponsiveWebDesign)是響應式網頁設計，為不同裝置提供相同的HTML和CSS。

「響應式設計」透過CSS調整網頁在不同裝置/螢幕尺寸上的呈現方式。

AWDvs.RWD範例 RWD為不同裝置提供相同的程式碼（透過CSS調整網頁在不同裝置上的呈現） Google官方稱RWD為「回應式網頁設計」、稱AWD為「動態服務」。

Google建議使用回應式網頁設計👇 截圖自Google官方文件：選擇行動版網站配置 若這樣搜尋… 會看到Google用Responsive取代Adaptive！ developers.google.com是Google給開發者的技術資源網站。

用GoogleTrends比較AWD和RWD… 會看到AWD幾乎被淘汰！另外，RWD已經是網頁設計標準，不再是新聞，搜尋趨勢下降正常。

RWD教學入門：響應式網頁設計的實作方法 現在，熱門網頁模板/套版/版型都是響應式——無論免費還是付費。

以WordPress為例，熱門佈景主題/版型全是RWD 6.一頁式商店範例 「一頁式網頁」商店範例：老彭友 截圖自「老彭友」官網 一頁式網頁模板/產生器： 1shop一頁購物 一頁商店 1shop一頁購物收費（可免費試用） 然而，若搜尋一頁式廣告，會看到詐騙手法、反詐騙… 👆一頁式網站可能產生負面品牌聯想，所以不推薦。

7.套版網站vs.客製化網站 套版網站客製化網站優點 設計、維護費用低 切換版型容易（不斷切換——直到風格符合品牌個性） 能100%滿足需求（客製化程度&收費成正比） 網頁加載速度快 缺點 不能100%滿足需求——即使安裝外掛 為滿足不同使用者需求，模板常內建很多自己用不到的功能=拖慢網站速度 設計、維護費用高 要懂一些技術，才能和工程師有效溝通——除非請UI/UX設計師當翻譯 建議先自架套版網站、學一些基本技術（如HTML、CSS、購買網域＆主機…）並經營部落格（撰寫SEO文案） …等網站流量達到一定目標，再外包網頁設計公司。

純付費或Freemium模板比較理想！完全免費=開發者隨時可能停止更新。

8.網頁設計報價 三家網頁設計公司報價如下 「米洛」報價單 「多米諾」費用 「新視野」收費 然而，平台系統租用/主機維護方案沒說 主機是SSD還是HDD？ 平台是不是AWS/GCP？ 資料中心在哪個國家？ 有沒有CDN？ 虛擬主機費用（以Hostinger為例）↓ 免費SSL憑證(永遠)、免費網域(第一年)、每週或每天自動備份、全年無休24小時客服 每月$0.99USD=每年$11.88USD（續約後每月$2.99USD=每年$35.88USD） 每月$2.59USD=每年$31.08USD（續約後每月$4.99USD=每年$59.88USD） 虛擬主機推薦 回到設計公司報價。

個人認為 無論哪一個方案，都應該是RWD網站（連免費WordPress版型都是RWD！） 無論哪一個方案，都應該送SSL憑證 網頁設計/製作費WordPress版型費NT$15,600~29,800NT$0~1,700 虛擬主機、網站套版（一般指WordPress版型）價格完勝設計公司！建議先自己架設套版網站～等網站流量(分析工具)和獲利達到一定目標，再請設計公司客製化。

製作內容 內容決定網站架構、功能和Google關鍵字排名，因此製作內容是網頁設計第一步。

延伸閱讀：內容行銷案例 9.文案＆多媒體設計 如何下標題 圖片/照片製作 如何寫文案 影片企劃 首頁設計範例 「品牌價值主張」是網站首頁最重要元素。

❌沒有品牌主張的首頁… 板塊設計首頁（網頁動畫、滾動視差特效難溝通價值主張） ✅有品牌主張的首頁… 張阿道首頁（白底黑字溝通效果好） 10.排版設計 排版設計(Typesettingandlayout)主要元素是字體、背景素材。

字體推薦 系統字型(Systemfonts) 手寫/毛筆/藝術/海報字體——除非用於LOGO 背景素材推薦 白色、淺灰色背景 簡約背景 海報背景 動畫/特效背景 教學：廣告文案編輯＆排版設計 網站管理員/站長應該學習HTML、CSS（最推薦的”免費排版軟體”） 輪到你了 以上是網頁設計公司推薦：10個教學＋範例… 你已學會網站規劃＆架設流程、網頁設計師工作分類、套版vs客製化、及排版設計。

設計報價=虛擬主機費用+(網頁設計費or版型費😉) 開始製作「官方網站」吧！我歡迎你在下方留言區，分享你的心得。

👍 讀者互動Comments 組織原有的 負責網站設計者不做了 已經有網站 目前只需要更新圖片視頻 是新手如何著手? 回覆 取消回覆請留言怎麼稱呼（必填）* Email（必填，不顯示於留言）* 你的網站 Δ PrimarySidebar 1.「官網」建置目的 2.如何架設網站 3.CMS內容管理系統 4.網頁設計軟體推薦 5.AWDvs.RWD網頁 6.一頁式商店範例 7.套版網站vs.客製化網站 8.網頁設計報價 9.文案＆多媒體設計 10.排版設計 網路行銷手法大全張阿道最新教材 免費訂閱 張阿道最新教材 免費訂閱