網站架設第一點，首重網站要精緻漂亮、所以網站公司請網頁設計師設計網頁版型、 RWD響應式網頁設計、HTML切版排版、設計ICON、找圖、設計Banner，林林種種一個網站包含首頁、內頁10萬元跑不掉，這種屬於 客製化網站設計就是貴(參考 網站架設費用)，那為何不考慮使用響應式網站模板的方式！
貴設計推薦你使用Themeforest購買網頁模版，2000元不到，精緻美觀又一堆滿足RWD響應式網站模板的設計，不管Wordpress模版、HTML5模版，一頁式網頁模版、形象網站模版通通有。讓你免去一切從零開始一步一步做的時間，瞬間就擁有專業的網站。所以網頁模版就是那麼好用的，再請繼續看我們的分享吧！
🧬 網頁版型與網頁模版的關係
早期網頁設計公司做網站時，了解網站需求過後，就會請網頁設計師，設計版型、HTML切版的動作，而 這中間涉汲的專業包括網頁設計、平面設計、前端程式技術，而所需技術如HTML 5、BOOTSTRAP、CSS、jQuery、js、第三方程式外掛。加上一個最重要的就是"美感"，因此設計一個網頁版型絕對不容易。再加上設計出來的網頁版型，至少需能夠在Chrome、Safari二大陣營能夠精美呈現，這中間的難度又更難了。貴設計認為一個優質的版型大概要一個7、8年工作經驗的網頁設計師才能夠一手搞定。若找外包設計光是首頁就上萬元，內頁一頁都7、8000的，稍有規模的網站整個下來10萬跑不掉。所以其實網站版型設計真的不是一件容易的事情。但現在呢?完全都變了。歐美許多公司單靠賣版型就年收入上千萬，一套RWD響應式網頁模版上千、上萬人購買下載。所以使用模版設計網站，絕不是一個讓人嗤之以鼻的事情，而是所謂的如Zara般的快時尚了。再者你身上穿的衣服，不也是Uniqlo同一件衣服模版打樣出來的嗎?你難道會每一件衣服都客製化嗎? 很明顯的你一定不會嘛。 所以透過購買網頁模版之後，再依網站的資訊架構、圖片、文案去調整模版的外表、介面的設計就可以變成你的網頁版型，是不是簡單又快速！
🧬 RWD響應式網頁模版
不管你是經由何種方式取得版型，請務必檢查版型是否滿足"響應式網頁設計"。 響應式網頁模版，是指版型必會滿足Google所指定的
所以RWD網頁已經是趨勢，不管是購買網頁版型或著是請網頁設計公司設計，一定要注意是不是有符合RWD網頁設計版型。除了透過模版在手機瀏覽器上人工檢查有無跑版、變形之類的問題，也可以使用Google所提供的工具 行動裝置相容性測試(如下圖)做檢查。 
在輸入網址後經過20秒左右，若出現如下圖"網頁適合透過行動裝置瀏覽"，這就代表這個網頁是RWD響應式網站模板。 了解更多 【RWD響應式網頁設計是什麼】手機世代必具備的網站技術。 
可以參考貴設計的RWD響應式網站模版設計後的DEMO：以及視覺 、 GinerC 、 CATHY 函育造型師 、 亞洲矽谷ASVDA 、 金磚鳳梨酥、 綠茶形象官網
🧬 網頁版型設計軟體
網頁版型設計軟體有好多種，網站設計工具有分程式編輯、排版設計、切版、用戶體驗等。不要小看架設一個網站，擁有優質的網站，呈現看是簡單，其實幕後人員需要顧到很多細節，需要搭配幾個網頁設計軟體，才能呈現出最完美的網站。以下會介紹幾個我們覺得不錯用的網頁版型設計軟體工具。網頁設計工具推薦
- Adobe Dreamweaver－程式編寫工具與即時預覽
- Brackets－輕量化軟體開發程式碼編輯器
- Phpstorm－PHP語言開發程式碼編輯器
- Adobe XD－使用者介面設計＋框線圖製作＋設計用戶體驗（UI/UX設計流程整合）
- Sketch－使用者介面設計 UI（MAC電腦）
- FluidUI－應用程式模型製作
- BalsamiqMockups UI－模型框線繪製工具
🧬 RWD響應式網頁模板下載
現在講求速度的時代，隨時都在變化，為了追求最新、跟上時代潮流，下載免費網頁版型是一定要的，如果你剛好又沒有前例可參考，要從零開始是一件很費神的事情，尤其使用原刻網頁設計，連最基礎的RWD響應式網頁模版都要針對每一個瀏覽器去寫程式碼，還不如下載版型再加以修改。
下載網頁版型除了能夠縮短製作時間與更多設計方向，又可以參考別人的網站結構、架構、設計、程式碼等，好處多多，可以好好運用免費網頁版型，有的還可以用於商用喔。
推薦免費RWD響應式網頁模板下載
- Wordpress免費版型下載
- HTML免費版型下載
推薦購買RWD響應式網頁模板下載
- Wordpress付費版型下載
- HTML付費版型下載
🧬 模版與文案
開開心心下載好模版了，要開始製作網站了，但問題來了？？模版是專為攝影師打造的，但我是工程師，我跟本無法使用模版上作品集的區塊。又死定了，這個模版的文案怎麼有那麼多?我又不會寫文案。挫賽我只是要寫Blog用的網站，怎麼有購物車的功能呢？？這個餐廳的版模好漂亮，立即下載，結果這個模版要吃很多精美又漂亮的圖片。COW，難不成叫我請專業攝影師來拍一組？Orz！OMG！
上面的情境是常常會發生的，貴設計有一個客戶就是如此，他是賣電動牙刷的，但卻想用攝影師的作品集方式呈現，這是很不適合的。作品集一方面只是只是呈現屬於照片式的作品，例如攝影師、新秘、風影照之類的。但電動牙刷賣的是功能與實用性，不是精美照片，用作品集的方式非常的不適合。
所以選擇模版之前，不只要確認版型的上次更新日期、下載次數、FAQ，還要確認版型的區塊、甚至功能，是否能與您的官網資訊、手中的文案相符。不然再漂亮的模版也英雄無用武之地。
🧬 HTML模版實戰
一個基本HTML模版的修改，需俱備二件事情第一對於HTML的認識，第二好用的HTML編輯器，有了以上的二種才有可能對HTML的模版做調整。若沒有的話，請參考以下連結。
- HTML教學：w3schools提供許多程式設計的教學，包含HTML、CSS、Javascript、SQL、php。程式新手必定造訪的網站之一。
- HTML編輯器：Notepad++佛心來著的程式碼編輯器，提供多種的程式編輯器，重要語法都以會不同顏色強調，甚至自動提示功能。也是適合新手的程式碼編輯器。
- assets：存放資源檔，例如圖片、影片、聲音、下載的檔案
- css：存放css檔案，CSS負責管理網頁的美觀，透過撰寫CSS，可以網頁精緻、漂亮又大方。可以想像成女性的"化粧品"
- js：存放js檔案，js即為javascript的意思，負責一個網站的功能，例如點擊某html的元素下載檔案、開啟連結、字形變化。可以想像成遊戲的外掛的概念。
- index.html：網站的首頁一般都會叫index.html，不同語言或許會叫index.php、index.jsp、index.asp，但那屬於動態語言，非html靜態語言。