網頁設計的專業首選

大圖輪播已經是許多網站的常見功能了，除了在剛進入網站的時候能夠立即吸引使用者的目光以外，還可以搭配炫目的動畫達成一定的互動效果。 此套件必須包含flexslider.css、jquery.flexslider.js、jquery.min.js，可以到Flexslider官網下載資料夾。https://woocommerce.com/flexslider/   JS方面除了上述以外需加入以下   若要改項目參數可以看官網步驟四有詳細的項目列表 例：   HTML   CSS flexslider.css裡的設定可依據實際需要自由修改   範例：https://codepen.io/bok770/pen/zdvZVe  

   在製作網站申請網域同時，多數企業會連同企業信箱一起辦理，企業信箱主要是用於提供公司行號內部成員專屬的 E-mail 信箱，可以統一對外與客戶的聯繫，間接的能帶來更多的專業形象與實際使用上的延展性，甚至於在正確的設定與規範後，能有效的排除多於垃圾信件，也能降低企業人員與其他通信用戶在聯絡被誤判為垃圾信件的可能性，提升通信用戶在與企業聯繫時的信賴成度。       一般大眾在判定企業信箱信件的方法是透過郵件地址中 @ 後方的發送伺服器名稱來確認，所以通常會在申請企業網域名稱後也一同以企業網域名稱作為命名，主要原因為在設定企業專屬信箱時也會先詢問是否已經擁有專屬的網域名稱，填入後才能作為申請。      申請完企業信箱時，需要進行信箱伺服器 DNS 設定的開通，通常在設定完的 24 小時內就能讓其他郵件主機能找尋到企業信箱的正確位置，在開通 DNS 的同時，也可以在其中網域設定中新增MX 紀錄、 CNAME 紀錄或進而透過 TXT 紀錄 透過新增 SPF 紀錄規則，收件者伺服器就會參考 SPF 紀錄，判斷郵件是否為正確的授權的郵件伺服器所傳送，進而預防信件被歸類為垃圾郵件的機會。  

有時我們會在CSS裡看到「>」、「+」、「~」這些符號的使用，它們到底有甚麼功用呢？各有甚麼不同呢？以下讓我們來簡單介紹一下。 大於符號(>) 大於(>)就是選取底下直接的子元素。 以大於符號(.box > p)和空格(.box p)來做比較，先看以下例子：   CSS 使用空格的情況 .box p{ font-size:20px; color:#216AAD;}   使用大於符號的情況下 .box > p{font-size:20px; color: #216AAD; } 由上可知.box p會影響到box這個div底下所有的p元素，而因為「>」只會影響到直接的子元素，所以例子中box底下直接接觸到的p元素只有001跟004，所以只有這兩者會改變。   加號符號(+)則是會影響到後方同層級的第一個元素 範例： html   CSS div + p{ font-size:20px; color:#216AAD;} 由於跟div同層級又直接位於div後方的只有003，所以只有003改變。   而取代符號(~)是影響到後方同層級的全部元素，因此除了003以外004也會改變。 div ~ p{ font-size:20px; color:#216AAD;}   雖然只是CSS撰寫上的小技巧，但是若能夠善加使用這些符號的話，將可以很好地規避每個CSS之間的影響，想必將更有利於撰寫CSS和減少class的數量唷！

   本站由先前說明404頁面是什麼?時提到了可能會造成的原因，能瞭解404頁面在SEO部分上也有著舉足輕重的影響能力，雖然404頁面是一項重要的頁面錯誤訊息，但利用404頁面的特性，也能有機會化腐朽為神奇，本次將再針對404頁面產生後，該如何加以應用與改善方法作為探討。   1.更換連結網址或進行網站改版前，先行製作404提示頁面，用來說明與可替代的導向網址。 2.在製作404提示頁面時，將首頁網址以標題連結方式提供點選導向連結，避免直接導向首頁。 3.將原本移除連結的頁面導向至預先製作好的404說明頁面或可替代相關主題頁面。 4.使用者輸入相似卻錯誤的連結網址，在使用者常輸入錯誤的頁面提供正確導向或相關說明。 5.設定輸入原本就不存在的頁面網址統一導向至404說明頁面。 6.避免將404頁面全導向至首頁，將有機會被搜尋引擎判定為作弊。      瞭解了404頁面錯誤訊息是網站內連結的改變而產生後，對於網站永續經營與維持SEO的優化為前題，應該盡量避免與預防404頁面的產生，然而在不得已必須調整的情形下，也應該持續定期追蹤網站錯誤頁面改善的情況，才能確保網站在經營許久後不會因為產生錯誤頁面而被列為問題網站或是遭搜尋引擎慢慢的放逐。  

如果只是需要圖片自動輪播，不需要手動點圖的功能的話，可以試試以下方法，不用太多原始碼，輕鬆做出有淡入淡出效果的圖片輪播唷！   外掛套件： 官網：http://malsup.com/jquery/cycle/ 網站上展示了六種特效的外掛，分別有：shuffle、zoom、fade、turnDown、curtainX、scrollRight (click)，可以多嘗試不同特效。以下以「fade」淡入淡出之效果來示範，其餘效果只要將fade改為想要的特效名稱即可。   首先排列要輪播的圖片 HTML 長寬的設定可以依照圖片尺寸做調整   CSS   JS 需要三個JS檔，可以從官網下載。   範例：https://codepen.io/bok770/pen/VzvbbK See the Pen <a href='https://codepen.io/bok770/pen/VzvbbK/' _fcksavedurl='https://codepen.io/bok770/pen/VzvbbK/' _fcksavedurl='https://codepen.io/bok770/pen/VzvbbK/' _fcksavedurl='https://codepen.io/bok770/pen/VzvbbK/' _fcksavedurl='https://codepen.io/bok770/pen/VzvbbK/' _fcksavedurl='https://codepen.io/bok770/pen/VzvbbK/'>VzvbbK</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.   另外在http://malsup.com/jquery/cycle2/有更多進階的輪播效果可以選擇，皆有詳細的使用步驟，相當方便使用唷！

          HTTP Error 404 -Not Found頁面是什麼?大家在瀏覽網站網頁時，多少都會遇到頁面錯誤，或者是找不到網站的經驗，其中包含的可能原因為:    1.原本連結頁面的網址，更換地址了。 2.原本連結網址的頁面已經被移除。 3.使用者輸入相似卻錯誤的連結網址。 4.原本就不存在的頁面網址。       遇到以上這些情況時，網頁伺服器會回應找不到網頁的要求，而回應的HTTP狀態代碼就是404，表示為尋找不到該頁面，一般使用者看見錯誤資訊便會選擇離開，此時雖然是簡單的離開動作，但在多次的錯誤離線的訊息後，就會提高網站整體的跳出率、減少停留的時間，因而在搜尋引擎對關鍵字的積分上將會日趨遞減，尤其是在網站改版或更換網址後未注意404錯誤頁面的大量產生，將可能嚴重影響整個網站原本穩定的頁面排名，是一項看似渺小，卻足以關係網站排名的重大環節。

上次我們介紹了jsFiddle，這次我們來介紹一樣是線上編輯器也很受歡迎的Codepen：https://codepen.io/。簡潔的黑底介面設計，與jsFiddle相比美觀許多，點進網頁就可以看到許多具有精湛效果的範例，讓人一點擊進來便足以被吸引目光，不像jsFiddle需要註冊登入才可分享，Codepen的首頁直接讓你看到來自世界各地的優秀作品！   可以註冊使用，也可以保持未登入的狀態，若是登入使用的話，在尋找過去所寫過的代碼時會比較方便，如果是未登入則必須記得系統生成的保存網址。    使用說明： 按右上角「Create」裡的New Pen可以新增檔案   開起來的頁面，分成HTML、CSS、JS和演示效果共四大區塊。   可以從上方Change View中，依照個人使用習慣改變排版方式。 效果可即時預覽，不像jsFiddle得按Run才會顯示。   點開CSS旁的齒輪圖示可做進階設定，像是CSS Preprocessor可以選SASS、SCSS、LESS等等。 CSS Base可直接載入reset.css，Add External CSS可以載入外部的CSS   JS也一樣可以做設定   完成之後按Save，上面的網址就是你這篇demo的保存網址囉！ 但是若需要使用嵌入功能(Embed)的話，必須註冊登入後才可以唷！   範例：一樣以上次的下拉式選單做例子 See the Pen <a href='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/'>brVqKq</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>. https://codepen.io/bok770/pen/brVqKq

   由先前本站介紹過初識搜尋引擎最佳化（SEO）、影響網站搜尋引擎排名因素時，我們以往都是以面對搜尋引擎時有助住提升排名的條件角度去說明與推廣網站在行銷上的建議，因此較為偏向架設網站一方在面對搜尋引擎時的架構成因，而SEO之所以會日新月異的快速成長受到重視，也因為現今的網際網路上雖然充斥著無數的網頁站台，但由於訊息大量的散播，想要尋找到正確及符合需求的訊息卻成了如今一個重要的議題。     而本次將回歸針對搜尋引擎希望網站面對使用者時，該如何經營內在營運模式來提供說明與建議。使用者在搜尋引擎網羅眾多訊息後，為了篩選尋找符合資訊的同時，可能在極為短暫的幾秒至幾分鐘內決定是否繼續觀看一個網站或著關閉離開，然而架設網站，主要的目的便是希望滿足客戶對資訊的查詢、問題的解答或是購買的需求，所以許多企業行號雖然斥資經費與人力打造形象與購物網站，卻依舊還是乏人問津、寥寥無幾，或是只有簡單觀看，以下將針對使用者習慣與喜好來提供幾項參考。   1.網站就代表者公司行號的品牌形象與門面，網站在開始的整體畫面上是否具有視覺印象的吸引力及簡單俐落的操作模式便取決了  使用者的青睞性，因此在畫面上建議應該具有美觀設計並且定期改善友善操作性，來提申品牌的信賴程度。   2.網站內容持續的更新與進步，許多企業、購物網站，在一開始或許耗費較大人力與經費在架設，但後續卻一成不變，甚至讓使用者察覺出資訊與產品的過渡性，將會對公司行號的專業與技術大打折扣，因此建議持續更新產品資訊或者提供相關產品知識與選購要領等參考訊息。   3.即時性或每日定時的確認訂單與回覆諮詢，雖然網站大多時候是無時無刻停留在網際網路中，但能有效且快速地提供使用者問題的解答或是購買的需求，將能有效的提升使用者的信賴度與購買的機會。

jsFiddle是相當實用且受歡迎的線上編輯器，能夠線上測試、檢查所撰寫的code，也可以分享自己寫的code範例，給其他人觀看、修改、學習等等，以達到交流的效果。 jsFiddle：https://jsfiddle.net/ 欄位有html、CSS、javascript、result四欄。 javascript欄位可以自由選擇版本，如jQuery、YUI、ExtJS等等。 一開始左上角有Run、Save、Tidy、Collaborate四個選項 Run：執行代碼並顯示在result Save：儲存 Tidy：將代碼排版弄整齊 Collaborate：可以將自己所寫的代碼拿給其他人討論，限登入使用 註冊步驟簡單，只要有帳密和電子信箱即可。 按Save儲存後，左上角的選項會多出Update、Fork、Set as base   Update：儲存更新版本，每儲存一次，網址上會多一個版本序號。如下圖：   Fork：另存新檔，會另開一個新網址。 Set as base：如果版本存到第二版以後，會將這一版設定為初版的範本。 若要在網頁中嵌入的話，只要點開Embed，將EMBED CODE中的碼複製貼到網頁中就好囉。   若是想用iframe也可選擇，只要按上方的prefer iframe就會產生iframe碼。     範例：在jsFiddle製作下拉式選單  https://jsfiddle.net/bok770/f07pgr91/

 隨著行動網路的普及和發展，傳統桌上型電腦使用習慣的顛覆，本站先前提到"PageSpeed網站速度與SEO的重要關係"，各家搜尋引擎因為行動網路的趨勢對網站連線速度有著高度重視，因此本站也將針對大多數使用者體驗反應連線速度不佳的網站，在使用網頁測速連線後，最有可能會需要改善的項目"最佳化圖片"來進行說明建議與改善方法。       瞭解了網站連線速度會直接影響使用者體驗的觀感後，我們常會在測試工具中發現，原來大多數會導致連線時間增加的原因，是因為網站中有著較大量的細緻圖片，一般人的印象中圖片的像素越高，圖片會越清晰讓人觀看的越舒適，但其實許多時候在網站中置入圖片時，會因為網站版面大小的配置將高像素、高畫質的圖片進行尺寸大小調整，好呈現頁面中適合觀看的配置，雖然尺寸的調整不至於影響太多的像素問題，但在這過程中，原本可能是4096像素的圖片被侷限在600像素的框架之中，而原本高畫質圖片所伴隨的較大檔案確並未受到改變，累積久之後便成了網站連線速度的累贅，因此適當的壓縮圖片便是改善連線速度的直接辦法，以下是可以針對圖片最佳化的建議與調整。       1.常見的圖片檔案格式PNG檔案通常比JPG檔案還要大，因此可以在使用前先進行格式上的轉換，調整成JGP格式。     2.在網站建置時，先瞭解網頁版面將會使用圖片的尺寸與比例，先行在置入頁面前進行圖片尺吋與像素的壓縮。     3.建置版型同時，指定圖片尺寸，使瀏覽器在讀取時預留適當暫存空間，避免過度等待圖片載入時間。     4.透過測速工具瞭解建議壓縮圖片與建議比例，如：PageSpeed Tools。     5.由網站中圖片檔案大小為依據，從檔案較大的圖片中瞭解實際使用呈現的尺寸與像素，在適時的調整。