阿腸網頁設計工作室 – 2014 全新改版，部落格搬家、網頁設計

發表時間：

久久未發文，突然不知道第一句話該怎麼寫？揮別了以往會在年底發表的回顧文，直接來到了2014年發表第一篇部落格文章，因為最近比較忙，少了很多時間可以撰寫文章，手邊也好多東西delay中。不過剛好看到今天外面的好天氣，突然想說來寫篇2014的第一篇文章好了！就從年底前默默規劃改版的阿腸網頁設計工作室官方網站作為序。

記得去年初春公開的阿腸網頁設計工作室官網嗎？就是一個大紅色的搶眼色系，採用滾動式的滑動，全站只有一個頁面，不過最近也做了一個大幅度的調整，直接變成一頁頁的網頁，除了讓瀏覽動線上更好，色系部分也改為比較舒服的配色，希望家可以在網站上停留久一點、閱讀上可以舒適一點，順便讓網站多一點點PV。

這次的官網嘗試透過Sass+Susy的方式撰寫，為了之後的RWD響應式網頁設計，讓各螢幕尺寸都可以正常觀看，同時也可以加快網頁的開發速度，不過礙於時間關係，暫時還沒有對手機板做調整，等過年有時間一口氣補完好了XD。在特效的使用上，比起上次少用了很多jQuery，大量使用jQuery對於用戶的瀏覽體驗雖然比flash好(跨平台)，但是相對的會造成用戶瀏覽器資源吃重、CPU吃重等問題，因此大部分的特效能使用CSS3替代的就改用CSS實現，至於舊版瀏覽器不支援CSS部分，則是盡量讓他可以看為主，版面部分還需花時間做些微調。

首頁上方採用大圖輪播，讓使用者視覺完全聚焦，這些首頁上方大圖輪播，展示的不只是漂亮的圖片，而是我們的部分作品集。去年無名宣布關閉，我們接手不少的部落客搬家，並協助幫助他們無痛轉移、快速上手WordPress部落格，同時也替他們網站進行客製化開發與網站優化、部落格人氣轉移等。

阿腸網頁設計工作室 – 2014 全新改版，部落格搬家、網頁設計

文章目錄
  1. 首頁
  2. 網頁設計
  3. 作品瀏覽
  4. 免費版型

首頁

在前端UI設計工，因對初次嘗試Sass + Susy，光是對column的規劃就花了大半的時間，以往用像素去計算位置一時間要轉換還要磨合一下。不過抓到感覺之後，後面在版面規劃上都比較快。下圖是首頁的下半部分。網頁結構上也是使用HTML5的語意化結構。

阿腸網頁設計工作室 – 2014 全新改版，部落格搬家、網頁設計

網頁設計

網頁設計的部分，我們主要採用 WordPress 作為基底，進行網頁客製化版型、功能開發，我們不購買國外版型來修改，一律依照客戶需求進行客製化開發，同時會對程式進行優化，讓你的網站可以在我們的虛擬主機上，達到最棒的呈現效果與瀏覽速度。

作品瀏覽

在作品瀏覽部分，如同前一版的設計，也是採用CSS不過這次直接手刻效果了，並搭配上CSS3的動畫效果「CSS3 transition」來達到漸變的特效。區塊的排版上則採用了Susy的欄位設定，把網頁區分為12欄，每一個作品集使用4欄進行排版，完全不用拿計算機算半天，一整個很方便。不過在位置的設定上因為Susy是用了CSS3的「nth-child」，有些舊版瀏覽器無法辨識，就會造成版面跑掉了XD。不過Chrome、Firefox、IE9以上，都可以正常運作。

阿腸網頁設計工作室 – 2014 全新改版，部落格搬家、網頁設計

免費版型

去年我們推出了3個免費的WordPress佈景主題供大家分商業性的免費使用，如果你還沒跟到的，別忘了來測試使用一下囉！佈景主題一律採用CSS3 + HTML5 的結構進行規劃撰寫，採用 WordPress 最新的語法進行開發，讓你的網站保持在安全的狀態上。內建社群功能，讓你功能內建不需安裝一堆消耗資源的外掛，只要安裝好佈景就通通幫你Ready！

阿腸網頁設計工作室 – 2014 全新改版，部落格搬家、網頁設計

2012年中剛好碰到了無名、Yahoo部落格關閉，認識了不少不同的部落客圈的朋友們與加入WordPress部落格圈的朋友，2014年當然希望有更多的使用者可以體會到自己架設網站的美好與優勢，就是打造出完全屬於自己的部落格平台。仰賴在BSP雖然是個安全的保護，就很像小孩子依偎在媽媽身旁受到呵護，但總有一天小孩也是需要成長獨立的！