以梅干時常會上網四處看，別人是怎麼設計與呈現，當看到不錯的模版時，梅干也會將它下載回來當素材，下回當有需要時，就可派上用場，而找著找著，卻無意間發現一個佛心來著的網站，裡面收錄了100個各式各樣的一頁式網頁版型，且還是2017最新版的，更重要的是，這個平台本身就是在銷售網頁的模版，因此所有一頁式網頁的設計品質，也是在水準之上，因此身為網頁設計的朋友，千萬可別錯過了，這100一頁式的精選網頁版型。
↧
Themewagon精選2017年100個高質感，一頁式網頁版型免費下載
↧
「View Source」讓手機中的Safari瀏覽器，內建支援檢視網頁原始碼
因此最近梅干上網爬了好多的資料，終於找到一款iOS專用的檢視原始碼的APP，而有別於先前的檢視原始碼的APP在於，該APP能整合到iOS中的Safari瀏覽器中，直接在Safari就能開啟檢視原始碼的功能，如此一來當在設計RWD網頁時，就更加的方便，才能清楚知道，在手機中到底是那邊出了狀況，甚至當啟用了快取時，到底手機是否有正常的運作，一樣也是得透過原始碼才能清楚知道，因此身為網頁設計師，這隻APP絕對必裝的啦！
↧
↧
Bootstrap教學－Bootstrap 導覽選單再進化，支援無限階層子選單
前幾天梅干就花了快二天的時間，直接打造一個多層級的下拉式選單，為了更符合使用習慣，所以在桌機是滑入展開，點前方的選單名稱，則會開啟該選單連結，進到手機版時，則是點右邊的箭頭展開選單，點前方的選單名稱一樣也是開啟連結，而主架構還是Bootstrap Navbar，但在選單中，就有所調整，讓選單更單純，更好套用，因此有在使用Bootstrap的朋友，也趕快來看看囉！
↧
PlotDB來自台灣所開發，上百種新潮的動態圖表輕鬆用
PLOTDB，雖然剛開始點進去網頁會看到很多的東西，感覺好像很複雜，但實際試用了之後會發現，其實並不難，而且他不只是對於電腦新手來說很方便喔，對於電腦高手來講，尤其是懂程式的使用者來說，他也是很不錯的一個網站喔。功能上可簡易可複雜，完全是看個人的需求來選擇自已所要的功能來使用，根本就是客製化啦。那麼今天，小的就用比較簡單的方法來跟大家分享一下該怎麼利用這個網站來製作美美的圖表吧。
↧
Open Web Design 上千款RWD自適應網頁版型免費下載
要從這個網站下載模板並不是件困難的事，相反的還滿簡單的，只需要搜尋到想要的模板，並預覽確定後，按下「Download」，模板整包就會直接下載到電腦裡。不需註冊也不需登記e-mail帳號等等，直接在線上簡單操作就能東西入手，真的很方便。接下來就讓我們來看看，是如何簡單的將這些誘人的模板下載下來吧。
↧
↧
CodePen 如何快速搜尋所需的網頁特效並下載打包成ZIP檔
CodePen這平台中，支援的語法相當多，因此當找到的範例，是用SCSS或是Jade時，就得再進行編譯後才能使用，甚至有些範例，引用到外部的Javascript時，就得一一的將引用的資源給下載回來，其實CodePen中，除了提供搜尋的功能外，還有封裝的功能，可將找到的範例直接壓縮成ZIP檔，因此不知道的朋友，現在也一塊來看看，如何善用CodePen這個資源庫吧！
↧
Google Maps 建立我的地圖旅行標記，並嵌入自己網站中
而我的地圖，除了可以用來規畫行程外，甚至也可以將自己分享到部落格的旅遊文章結合在一起，因此讀者在瀏覽旅遊文章時，也能了解，除了這景點外，周邊還有那些有趣、好玩、好吃的點，因此在我的地圖中，除了可規畫自己的旅行地圖外，也可將規畫好的旅行地圖，分享並嵌入自己的部落格文章中，至於要怎麼建立我的地圖，以及嵌入到自己的部落格中，不知道的朋友，也趕快來看看囉！
↧
免花錢！網頁前後端設計，必備的十大免費教學網站
一、W3CSchool(HTML、CSS、jQuery..)
W3CSchool是目前內容最豐富，資料最完整的網頁教學平台，裡面所提供的網頁技術也相當的完整，從基礎的HTML、CSS到jQuery、PHP應有盡有，而該平台也有提供中文版語系，是所有學習網頁必備的網站之一。
二、MDN web docs(HTML、CSS)
MDN與剛的W3CSchool差不多，只不過在MDN裡面都以網頁前端技術為主，同時是由知名瀏覽器Mozilla Firefox公司所成立的，雖然資料相當完整，但中文翻譯的部分，還尚未很完整。
三、jQuery
jQuery是目前相當主流的Javascript Framework，在官網的文件中，就會針對每個可用的屬性，有盡細的解說，甚至也有提供教學範例可參考，透過jQeury可讓網頁變得更炫、更活潑。
四、SASS(CSS)
SASS是CSS的一種框架，透過SASS讓在編寫CSS變得更有效率，同時也較易管理，但編輯完畢後，需編譯過後，才能放到網站上使用，在網站中，有SASS相關的寫法規則，以及編譯的方式。
五、LESS(CSS)
LESS與SASS差不多，但透過LESS可以線上即時就編譯，無需再進行轉檔，像是大家所熟悉的Bootstrap也透過LESS所開發的。
六、Bootstrap(RWD CSS)
Bootstrap是目前相當受歡迎的RWD元件之一，透過Bootstrap可以快速的設計出RWD網頁，同時內建了許多網頁互動特效可使用，像是滾動頁籤、廣告輪播、漢堡選單....，在網站中，也有各元件的範例以及網格系統的應用。
七、Gulp(專案管理)
Gulp是網頁前端必備的套件之一，透過Gulp可以有效的管理你的網頁專案，甚至將專案進行壓縮與編譯。
八、Yarn(專案管理)
Yarn也是一套專案管理工具，透過Yarn讓執行的效能快速、更簡單，在網站中，也有詳細的安裝方法與操作設定。
九、PHP(後端語言)
PHP是一個網頁後端語言，透過PHP可以快速的與資料庫作溝通，像是大家所熟悉的WordPress、Joomla、Opencart....都是用PHP所開發出來的，在PHP官網中的文件，也相當的完整。
十、Node.js(後端語言)
Node.js與PHP一樣，都屬於後端語言的一種，透過官網中，有詳細的說明，要如何佈署Node.js的環境，以及相關的寫作規則。
↧
版尾的版權宣告(Copyright©)該如何寫才正確
為了這個Copyright每次都花了梅干不少時間，上網去抓別人的，再俢修改改，所以梅干就花了點時間，研究一下Copyright的正確標示法，這樣下回再標示時，才知道每一個段落所代表的意義，才不會亂亂標，因此不知道Copyright要如何標示才正確的朋友，現在也一塊來看看，順便也幫自己檢測一下囉！
↧
↧
Iconfinder Icon Editor 免費線上SVG向量檔編輯器
但要如何產生SVG檔，其實早在好幾年前，Adobe Illustrator就已內建了SVG的檔格式，當在Adobe Illustator繪製好的檔案，就能直接輸出成SVG檔，並用於網頁上，但除了Adobe Illustrator可繪製SVG檔外，現在可透過Iconfinder這免費圖示的資源平台，推出一款SVG線上編輯器Iconfinder Icon Editor，不但不用安裝任何的擴充元件，打開瀏覽器立即就可使用，甚至還可以將繪製好的向量檔，儲存成SVG或是PNG檔，雖然Iconfinder Icon Editor的功能不及Illustrator來的強大，但只要繪製一些簡易的LOGO，絕對是措措有餘的。
↧
如何查看Chrome瀏覽器中Cookie小餅乾的儲存值
由於這個Cookie設定值是儲存在使用者的電腦裡，因此可透過瀏覽器來檢測這個設定值是否儲存，而早期Chrome瀏覽器，則是將Cookie放在網頁開發工具底下，但最近梅干突然找不到Cookie小餅乾，找了好久才知道，原來新版的Chrome瀏覽器將Cookie搬家啦！因此使用Chrome瀏覽器，想知道目前電腦裡存放那些的Cookie設定值，可從這裡來查看喔！
↧
Bootstrap教學－bootstrap.css.map的作用與是否該留或不該留
當下載回來的Bootstrap中，共包含了css、js、fonts三大資料夾，同時在css資料夾中，除了bootstrap.css、bootstrap.min.css外，應該還會有一隻bootstrap.css.map檔，而這一隻bootstrap.css.map是作什麼用，以及要如何將它關閉不引用，現在就一塊來看看吧！bootstrap.css.map這隻檔案的作用吧！
↧
Bootstrap教學－二招讓多個div(column)的區塊等高
因此DIV等高的問題，已不是使不用使用Bootstrap的問題了，而是DIV本身的問題，雖然說Bootstrap4已把flex導入到它的網格系統中，就可解決等高的問題，但目前還在beta階段，因此還是有不少朋友，維持著Bootstrap３.0，因此當使用Bootstap3.0，一樣也可實現讓多個col中的DIV等高，而這邊梅干也分享二種作法，一種是透過內距的方式來解決，而另一種就是採用flex的方式，因此有DIV等高問題的朋友，現在也一塊來看看吧！
↧
↧
JSCompress線上JS壓縮器，一鍵將多隻JS合併並壓縮
一次要將多隻JS檔，合併成一隻，除非是使用專案工具，才能把專案中的JS檔，合併成一隻，因此先前梅干找了好久，終於找到一隻小工具，可將多隻JS檔，合併成一隻，且還會進行壓縮，但該工具只有MAC版，雖然說網路上，有許多免費的JS壓縮器，但最常遇到的問題就是，一壓縮完畢後，JS就無法正常執行，因此梅干找了好久，最近發現一個超棒的JS壓縮平台，不但壓縮後，檔案變更小，且可正常運作，甚至還可將多隻JS檔，合併成一隻，是目前梅干使用過，最強大且壓縮後，零錯誤的JS壓縮平台，因此下回當網頁製作完畢後，不坊也可試試這個JS壓縮器吧！
↧
Sublime Text 搜尋並取代多個檔案中的內容
隨著網頁編輯器愈來愈多，因此有許多網設的朋友，也紛紛從Dreamweaver轉投靠Sublime Text，一來是Sublime Text相當的輕巧，二來是有豐富的外掛可使用，因此梅干也相當習慣使用Sublime Text來編輯網頁，但在Sublime Text要如何，針對多個檔案進行搜尋，梅干花了點時間，找了好久，終於找到Sublime Text多檔案的搜尋的功能，除了搜尋以外，還能針對找到的文件中的文字，進行替換，因此有在使用Sublime Text的朋友，也趕快來看看，在Sublime Text要如何來使用此功能。
↧
hilite.me 線上一鍵將原始碼轉高亮效果，網頁免再加載Javascript、CSS
hilite.me線上一鍵，就可將黑馬馬的原始碼，變成有高亮效果，同時網頁免再加載任何的javascript或是css，並且支援的語言相當多～
↧
Pngyu 專為PNG圖檔廋身軟體，大幅的減少圖檔大小，影像卻不失真
所以梅干前前後後也分享過幾套，關於圖片的壓縮軟體，但大部分都針對JPG，比較少有針對PNG，因此今天要來分享一套，不但針對PNG檔外，還跨雙平台，更重要的是不但免費，且壓縮後，圖檔除了大降的減少外，圖檔卻幾乎感覺不到變差
↧
↧
前端網頁設計師必備! 十大Chrome外掛套件總整理
因此身為網頁前端設計師的朋友，這十個外掛絕不容錯過，讓你在設計網頁時，可更加的方便，同時經由這十隻外掛，可讓你的Chrome瀏覽器，就像一個除錯器，有任何問題，都可立即的反應出來，因此現在就一塊來看看
↧
Screenfly / Multi Screen Test 測試網頁在不同裝置下的顯示效果，與抓取裝置實際解和瀏覽器版號
但無論怎麼設定，都只限於自己螢幕大小中呈現，因此無法模擬比自己螢幕的尺寸，因此最近梅干發現一個超棒的線上測試平台，不但可以針對各裝置進行模擬外，甚至還可以模擬出，比現行裝置還大的螢幕解析，當出現跑版時，還能快速的抓取出，目前裝置的實際解析，以及瀏覽器的版號
↧
Facebook 官方終於可將Messenger嵌入網站，變成線上客服系統
因此在上個月Facebook官方正式推出「顧客聊天外掛程式」服務，就是將Facebook Message嵌入到網站中，因此使用者只需登入Facebook帳號，就可透過「顧客聊天外掛程式」線上即時進行對話，同時當對方發送訊息時，管理者端也會在Facebook Message的面板中，即時的收到訊息，並透過Message來進行回覆，不但可解決一對多，也可保留所有的對話記綠
↧