網頁設計的專業首選

上次我們介紹了如何安裝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  軍方單位        在瞭解用途及區分方式後，我們可以根據網站將發展的規模與用途對照已上規則申請適合的網址，在這邊也特別註明，其實現今網際網路在面對域名上的限制較為放寬，在屬性上還有更多的區別，只要使用正確且符合的屬性，已有較自由上的使用，可以不用過度拘泥於屬性中的國別，以上若有相關疑問歡迎至聯絡我們進行洽詢。

Sublime Text 3是相當好用的文字編輯器，有許多方便的套件可以安裝，增進開發效率。 首先到官網下載安裝 http://www.sublimetext.com/3   安裝套件： 開啟Sublime Text 3，從上面主選單的view>show console(或是按快捷鍵ctrl+ˋ) 複製貼上出現的指令碼到主控台命令列中(或是直接到https://packagecontrol.io/installation#st3複製文字內容)，然後直接按下enter執行，便可安裝完成。 右邊為整個檔案的縮圖，可以點擊並快速跳到欲修改的部分。   Sublime Text 3預設為英文介面，若不擅長英文也可改成中文，從上方選單： Help>Language>Traditional Chinese(繁體中文)   接著便可以從Preferences > Package Control來啟用 Package Control此套件管理員，許多套件都必須透過它來安裝唷！ 快捷鍵:ctrl+shift+p然後輸入install按enter   再來便可以安裝一些套件了！ 每個套件都是如上步驟：先按ctrl+shift+p ->輸入install按enter，因此ctrl+shift+p是滿重要的快捷鍵唷！若要移除套件，輸入remove即可。       以上便是Sublime Text 3的安裝入門，下一次我們再來介紹Sublime Text 3推薦安裝的套件！

   許多公司行號在架設專屬的網站時首要會遇到的便是要申請屬於自己專屬的網域名稱，網域名稱代表著網頁註冊核發的網址，如字面上意思便是網頁的地址，在沒有網址的情況下網站是無法讓人尋找到的，因此申請一個正式的網域名稱是每個網站必需的動作，這個看似簡單的動作其實背後帶來的影響，足以影響網站的長期發展與排名趨勢。      從網址的欄位中，常會看見許多或長或短、形式不一的各種網址，其中還可能包含著網站的資料參數和架構與規劃，在這我們將單純針對網站的正式註冊網址來談論，若有網址內參數與架構上的問題，也歡迎另外由連絡我們做洽詢，回到我們將要談論的正式註冊網址來說，大家常會聽到網址、網域，其實兩者看似都指的是網站位址，但網域是將網址內的區別作為分隔的定義，如本站網址為：www.webdesigns.com.tw 其中每個點號做區隔的就是不同的網域，就如同我們房屋地址的鄉、鎮、市一般，因此網域也影響著網站在網際網路上的規模，若使用國際網域，較能讓世界各國的人所看見，使用的是國別地區性的網域，較能針對單一目標國家進行服務。       雖然網域的層級關係著網址的規模，但除了政府機關或教育機構等有保留規模發展的必要性之外，越高的層級也不見得適合每個網站，因此如何選擇網域及建立網址將影響著我們網站長遠的發展與經營，以下我們提供幾項在申請網址前可以做為參考的注意事項:   1.使用簡短且容易記憶的網址名稱   2.可以由行號名稱或品牌進行命名   3.根據將服務的規模及地區選擇適合的網域層級   4.網址單一，避免多個不同網址重複同樣網站內容   5.避免更換網址，網址的變動及轉換，可能影響用戶查詢及內容的落差  

.demo-2:before,.demo-2 after{position:absolute;}.demo-2 a:hover:before,.demo-2 a:hover:after{color:#F48627;}.demo-2 a:hover:after{right:-20px;content:"]";}.demo-2 a:hover:before{content:"[";left:-20px;} before和after是偽元素，顧名思義就是元素的「前」與「後」，可以在指定元素的前後插入其他內容。 範例：       加入before和after後 CSS .demo-1:before{ content:"一化科技－"; color:#257DB4; font-size:28px;} .demo-1:after{ content:"的專業首選";color:#DF5D22;}   「content」為before與 after必須設置的屬性，意思是插入的「內容」，可以是圖片、文字等等，若未填此屬性，偽元素將不會發生任何作用。 例：content:url ( "img/logo.png" ) 例：content:"一化科技" 若不需要內容的話，可以寫成content:""   以下我們來介紹幾項應用範例：   1.清除浮動 常常清除浮動是設個div{clear:both}，但如此一來便會多個無意義的空白元素，我們可以利用after來清浮動。 例： .demo-3{float:left;} .demo-3:after{ content:""; clear:both; display:none; width:0;}   2.配合attr使用 attr是取得選取元素的屬性，例如attr(href)是取得href屬性 以下例子是取得a的title屬性： a::before{content:attr(title)} 效果相當於     3.特效 可以做出在鼠標靠近時文字增加外框的特效   例： E-Work   Html  CSS .demo-2:before, .demo-2 after{ position:absolute;} .demo-2 a:hover:before, .demo-2 a:hover:after{color:#F48627;} .demo-2 a:hover:after{ right:-20px; content:"]";} .demo-2 a:hover:before{ content:"[";left:-20px;}   製作陰影        可以運用偽元素、box-shadow以及z-index:-1來做兩邊陰影。 範例： Html   CSS .box{ width:300px; height:200px;         background:#A7C7D3;         position:relative;         box-shadow:0 0 3px rgba(0, 0, 0, 0.2); } .box:before, .box:after{ width:50%;                                       background:#000;                                       z-index:-1;                                       position: absolute; top:10px; bottom:15px; left:10px;                                       content:"";                                       box-shadow:0 15px 10px rgba(0, 0, 0, 0.5);                                       　　　　　　　　　     -webkit-transform: rotate(-3deg);                                      -moz-transform:rotate(-3deg);                                      -o-transform:rotate(-3deg);                                      -ms-transform:rotate(-3deg);                                      transform: rotate(-3deg);} .box:after{ right:10px; left:auto;                  -webkit-transform:rotate(3deg);                  -moz-transform:rotate(3deg);                  -o-transform:rotate(3deg);                  -ms-transform:rotate(3deg);                  transform: rotate(3deg);                 }   before和after的瀏覽器兼容性相當好，除了IE6 IE7以外不用加上前綴。且可以簡化網頁的html標籤和class數量。

    在網站架設時，大家通常比較瞭解與注意網站的設計跟製作，相對在存放網站的伺服器和空間部份反而較為陌生，加上現今資訊中大家常聽見的雲端服務，也常讓人有著無限儲存空間與執行能力絕對優勢的遐想錯覺，而網站空間的應用上，其實有虛擬主機與雲端主機的分別與選項，一般人可能會將虛擬主機和雲端主機混為一談，認為其兩項是相同的物件，但其實不然。       雖然兩種主機都能提供網站存放與維運的服務，但在這兩種主機所提供的權限和功能及費用部分上有較為明顯的不同，從大眾常聽見卻未能真實瞭解的雲端主機說起，雲端主機在提供的服務中有著較高系統控制權限，也有專屬的處理效能、記憶體，硬體空間也可以依據需求做增減，可提供管理者做伺服器的規劃，但費用部分有一定門檻也可以依據需求做提升調整，較適合有專門管理MIS人員之中型、有規模企業做應用。虛擬主機提供的系統權限相較雲端主機提供的權限為低，但主要提供的管理功能較貼近單純的網站管理，儲存空間與記憶體和效能部份為共享制，所以費用上較為實惠，適合中小型企業或無MIS人員管理公司行號做應用。      瞭解了兩種主機雖然都能夠維運網站後，可以根據網站的規模與需求進行評估選擇，大部分網站其實架構清楚簡單可以斟酌使用虛擬主機，價格較為實惠，而有規劃且規模較大的中型網站可以參考雲端主機甚至提高需求效能，達到網站長期的穩定與成長，若在評估網站規模的依據上較為不清楚，歡迎參考本公司聯絡我們進行洽詢與評估。

我們常常在修改完CSS上傳後，對方看到的卻還是未改過的舊畫面，這是因為瀏覽器會暫存CSS、js等等這些靜態網頁，雖然按ctrl+F5或是有像「CSS Reloader」這種讓瀏覽器清除快取、重新載入最新CSS的配件可以安裝，然而也不太可能要求每個客戶都這麼做吧！ 這時就得用一些小撇步讓瀏覽器加載網頁最新版，讓瀏覽器認為URL變得不同，向伺服器請求新的下載，這樣一來對方就能夠直接看到新頁面了。   方法如下： CSS後面加上?以及日期、亂數、版本等都可以強制瀏覽器讀取最新的CSS唷！ 1.CSS?後面加上日期。如：style.css?20170620  2. CSS?後面加上亂數。如：style.css?3344qwe 3.CSS?後面加上版本。如：style.css?v2.11.1 圖片也可以運用唷！ 例如： CSS內用到的圖片也行 如：.AD{background:url(../images/banner.png?20170808);} js也可以加上，方法亦同。(如首圖範例)   只要簡單改一下，就可以保證瀏覽器讀取的是最新頁面！

動態網址與靜態網址對SEO的影響，在網站優化時，大家都會非常注意網站是否有被搜尋引擎完整收錄，因為在未收錄的情況中，網頁根本就沒有被搜尋引擎認可，更別談排名與優化了，而網址呈現的方式便占了搜尋引擎爬行收錄規則很重要的一個環節，以往常會有的觀念是搜尋引擎收錄規則會傾向靜態網址的網頁內容，反觀動態網址如果帶入太多不明確參數，的確也會使搜尋引擎在查尋與收錄時較有難度與錯誤，但這也僅只於帶入太多或不明確參數，因此在靜態與動態網址中隨著搜尋引擎的演進，我們將簡單的說明其差異與SEO的影響。   靜態網址，如其字面上意思，就是已經製作完成，確定不會因為其他規則與條件更換當中內容的網址，因為它是單一確定的資訊，所以搜尋引擎對其單純且穩定的結構較能快速理解並認可，但也因為每一個頁面都是單獨的個體需要個別編譯，在更新此種網址類型頁面時，需要消耗較多的時間，面對大型或需經常更新的網站，將顯得管理與操作上的不便。   動態網址，在以往的觀念中，大多數對其多變且自由的參數較有收錄上的質疑，但從動態網址的架構上去瞭解，其實當中內容基本上是有一定的基礎與架構，搭配網站內較豐富的內容數據做呈現，雖然看似資訊繁多，實質上對於內容豐富且須要經常性更新的大型網站，如購物、論壇等，卻是可以協助它們在有條理與明確規則下的生成，會造成搜尋引擎收錄上的問題在於不明確的規則與制定參數冗長和可能重複資訊模糊單一性的頁面。    由上的說明中，我們瞭解靜態網址與動態網址在網站的架構中有不同的呈現，對於網站的需求提供了不同層面上的優缺點，靜態化的網址較為單純但變化上較為困難，但收錄相對快速，而動態化的網址較需要事前的規劃，好處是適合複雜的網站，站在SEO的角度上，其實兩種類型的網址只要善加利用，搜尋引擎的演化都能在收錄上有一定的表現，因此網站在決定製作前的規劃就顯得較為重要。

.article{width:960px;max-width:70%;margin:0 auto;height:400px;padding:40px;font:24px 'Arial';background-repeat:no-repeat;background-attachment:fixed;background-position:center center;background-size:cover;line-height:28px;}.section1{color:#fff;background-image:url("img/upload//pic-4.jpg");text-shadow:5px 4px 5px #575353;font-weight:bold;}.section2{color:#fff;background-image:url("img/upload//pic-6.jpg");font-weight:bold;text-shadow:3px 4px 5px #373030;}.section3{color:#fff;background-image:url("img/upload//pic-3.jpg");text-shadow:3px 4px 5px #373030;} 什麼是視差滾動呢？其實就是當使用者滾動滑鼠滾輪（捲軸）時，將多層背景以不同速度移動，形成3D的垂直運動效果，造成視覺上的錯覺並增加趣味性。 網路上多的是用CSS搭配JS寫出來的，以下來介紹如何只用CSS表現出最簡單入門的視差滾動。 只要想成背景圖的尺寸必須比包住它的div還大，並且在頁面上須是固定住的，因此在向下滾動時，背景就會固定在原地，但是其上的內容和包住的div卻會隨著滾輪而向上移動，這樣就形成最簡單的視差滾動了。 範例：           Travel     Travel     Travel                 Enjoy Your Life     Enjoy Your Life     Enjoy Your Life     Enjoy Your Life                 HAVE FUN!     HAVE FUN!     HAVE FUN!       Html CSS 要注意的是背景圖的高(height)一定要比div還長，否則向下滾動時就會露餡了！  以上範例便是最基本的視差滾動，很適合想嘗試看看的新手唷！

  在先前初識搜尋引擎最佳化（SEO）時，我們瞭解了搜尋引擎最佳化(SEO)目的就是希望提升網站在自然搜尋的排名，但也明白了自然搜尋排名的排序其實是由百種以上眾多規則與條件組合而成的排序，先不論搜尋引擎為了提高精確結果還持續在增加地改善的條件，由原本的規則來說大家可能會疑問，排序條件這麼多種，搜尋引擎的優化又該有何依據呢，在這邊將以目前多家搜尋引擎公司釋出的方向讓大家快速的理解，較能影響搜尋排名的因素。       搜尋引擎公司為了提高搜尋用戶市場的信賴度，逐漸朝向內容準確性、豐富性發展，也會經常性 地調整排名條件和修訂各種因素的優先權重，用來幫助搜尋引擎更精確的評估網頁的品質，所以在眾多搜尋引擎公司釋出較大的排序方向中可以分為: 1.網站本身內容豐富性 2.網站與它站的友善性連接 3.網站與趨勢平台的相互性 4.搜尋用戶的體驗友善性 5.網站營運操作是否違規      面對網際網路上數不完的網頁，搜尋引擎不會單單是依靠以上幾項規則，但如果網站符合越多種的正向排名因素，那排名提升的機會自然也會相對增加，回歸搜尋引擎最佳化的目的，除了提升自然排名外，主要就是希望提供搜尋者正確的搜尋結果與豐富的服務內容，因此網站優化的經營目的應該是避免違規性的操作，回歸使用者的需求體驗。