文章專區

最新網頁設計文章

有時我們會在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.由網站中圖片檔案大小為依據,從檔案較大的圖片中瞭解實際使用呈現的尺寸與像素,在適時的調整。  
上次我們介紹了如何安裝Sublime Text 3,這次我們來簡單介紹幾個Sublime Text 3相當實用的套件。     Emmet  快速提示功能,加速建置原始碼,可減少html和css的撰寫時間 例如: HTML5網頁架構的步驟: 新開檔案,右下角點選html->輸入html:5或是! 再按tab鍵就完成了!   選擇HTML   有了Emmet,只要打上簡易語法+[tab]就可快速產生原始碼  例如:html:5+[tab] 就可以產出htnl5的網頁架構 官方提供的速查表:https://docs.emmet.io/cheat-sheet/   Color Highlighter  點選色碼時會顯示該顏色   ColorPicker  調色盤,按ctrl+shift+c就可以叫出色盤自由選色囉!   P.S.預設中ColorPicker的快捷鍵會跟ConvertToUTF8的衝突到,因此會發生按了快捷鍵卻叫不出色盤的情況,解決方法如下: Perferences> Browse Packages,找到ConvertToUTF8的資料夾   依照自己的作業系統開啟檔案做修改,這邊以windows系統做示範。修改ConvertToUTF8的快捷鍵為[ctrl+shift+c+alt](可依自己的習慣作調整   ConvertToUTF8  Sublime Text 3預設不支援中文編碼,開啟big5會亂碼,因此需要安裝此套件來解決問題。   AutoFileName 輸入路徑或url時,自動抓取檔案路徑   SublimeCodeIntel 功能強大的代碼提示工具。   SublimeLinter 用於提示寫的代碼中錯誤的地方,支持Javascript、CSS、HTML、Java、PHP、Python、Ruby 必須先安裝Node.js http://nodejs.org 接著挑選你要安裝的部分,假如你要檢查CSS的部分,一樣先呼叫Package Control,然後打上SublimeLinter-csslint按enter即可安裝。 Html:SublimeLinter-contrib-htmlhint js:SublimeLinter-jshint 如果不想邊打字邊檢查的話,可以改成存檔再一次檢查的設定。 打SublimeLinter便會有選項讓你挑,選擇Choose Lint Mode 接著會有四個選項,分別是: Background:工作中一直在檢查 Load/save:剛開檔案和存檔時檢查 Save only:只有存檔時檢查 Manual:手動檢查   Sublimerge Pro  可以快速比對兩個檔案的內容差異,雖然Sublime Text本身就可以開兩欄或多欄,但必須以人工方式比對內容太耗時間,此套件可快速標示出兩檔案的差異之處。 先安裝此套件-->將要比對的檔案開啟-->在檔案按右鍵Sublimerge > Compare to你要比對的另一個檔案   兩邊不同的地方會被框起來,對照查看相當方便。   Alignment  自動對齊代碼,使得排列更為整齊美觀。快捷鍵:ctrl+alt+a     以上便是Sublime Text3常用的套件,能夠有效加速開發效率,也還有許多其他的套件可以嘗試使用看看唷!    
    在先前網域名稱的建立與建議中,本站簡單的說明了網站中"網址"與"網域"的差別,也在初次申請專屬網址時,提供了幾項可以作為參考的建議,作為網站設定前的創立方向,接下來希望再分享網域上的選擇與區別提供大家做為更多的瞭解與參考。       上篇文章中分享了網址中點號區隔的是不同層級的網域等級,其中網域的等級看似為簡單的英文組合,但其中不同層級及每個層級中其實都有著明訂且規範的規則,代表著在網路上不同的作用和限制,所以在申請網址時,瞭解網域的規範與應用也關係著網站的規模與發展,因此在申請特別網址時,如:"政府機關"或"教育機構"等有保留規模發展的網址。我們必須注意網域上的規則,而較特殊的文字作為網址的特例我們也將在以下說明。   www.webdesigns.com.tw        由以上範例來說,www就是"world wide web"是美國國防部創始的名字後來受到廣泛應用,叫做"全球廣域網路"或是"全球資訊網路"。       而"webdesigns"就是網站主要代表的網址名稱,可以是由行號單位名稱、品牌進行命名或是專屬個人的名稱,其中也有人會使用文字作為多語言網域名稱來進行申請,主要為單一國別公司發展的"多語言網域名稱"。       .com主要作為網站屬性的判別,其中還分為依網際網路網域名稱與網址管理機構 (ICANN) 的分 類,網域名稱主要可分為: "通用型網域名稱"與"區域型網域名稱"用於區隔網站的屬性,如下說明。   通用型網域名稱可分為:   com  商業組織   edu  教育機構   net  主要網路支援中心   gov  政府機關   int  國際組織   org  組織   mil  軍方單位     區域型網域名稱,這類網域名稱是由世界各國網路資訊中心 (NIC) 處理,例如: 台灣地區由 TWNIC 管理   com.tw  商業組織   edu.tw  教育機構   net.tw  主要網路支援中心   gov.tw  政府機關   int.tw  國際組織   org.tw  組織   mil.tw  軍方單位        在瞭解用途及區分方式後,我們可以根據網站將發展的規模與用途對照已上規則申請適合的網址,在這邊也特別註明,其實現今網際網路在面對域名上的限制較為放寬,在屬性上還有更多的區別,只要使用正確且符合的屬性,已有較自由上的使用,可以不用過度拘泥於屬性中的國別,以上若有相關疑問歡迎至聯絡我們進行洽詢。