文章專區

最新網頁設計文章

   由先前本站介紹過""初識搜尋引擎最佳化(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  軍方單位        在瞭解用途及區分方式後,我們可以根據網站將發展的規模與用途對照已上規則申請適合的網址,在這邊也特別註明,其實現今網際網路在面對域名上的限制較為放寬,在屬性上還有更多的區別,只要使用正確且符合的屬性,已有較自由上的使用,可以不用過度拘泥於屬性中的國別,以上若有相關疑問歡迎至聯絡我們進行洽詢。
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也可以加上,方法亦同。(如首圖範例)   只要簡單改一下,就可以保證瀏覽器讀取的是最新頁面!