文章專區

最新網頁設計文章

在網頁設計上,icon設計與應用是相當常見的, 而使用上除了將icon存成圖片以外,還可以將之作成ICON Font。   那麼到底什麼是ICON Font呢? ICON Font是指將繪製好的向量圖檔轉存為文字檔, 並以css設定成字型來取代原有的圖片物件,在使用上只需輸入該icon對應的代碼或class, 就能夠輕鬆地產生一個小icon。     ICON Font的優缺點如下: 優點: 1.將小圖示(icon)轉為字體後,可減少原本輸出成圖片的檔案大小,降低圖片的使用率。 2.可透過css設定文字大小和文字顏色、陰影來達成效果。 3.修改時只需透過css修改樣式即可,不需再重複做修改圖片的工作。 4.因為是向量文字,相對在放大縮小時,解析度不受影響。   缺點: 1.由於文字形式只能設成單色,因此icon只能為單色或為css3的漸變色。 2.需借助專業的工具生成文字檔,製作方法可參考IcoMoon-將icon轉成Font的平台   綜合以上優缺點,使用ICON Font,不論是在檔案大小或修改的方便性來說,還是略佔優勢, 除了可自行設計以外,也可利用網路搜尋到不少免費的ICON Font資源,讓icon應用上更省力。   那麼該從哪裡下載免費的ICON Font呢? 除了上述的IcoMoon以外,這裡提供幾個主要的平台 Font Awesome:可參考Font-Awesome-簡單又好用的icon素材網 ,只要一行字即可直接使用! Fontello WE LOVE ICON FONTS 其實這些網站的ICON Font使用方式都差不多,首先都需先載入他們網站所提供的css, 然後輸入你要使用的icon所對應的代碼即可。   隨著扁平化設計逐漸普及,ICON Font在網頁設計上越來越常見, 而豐富的網路資源也能夠提高網站開發的速度,提升工作效率,不妨多加使用。  
  在網站架設的步驟中,建置伺服器是一項較為基礎的應用技術,雖然網站伺服器有許多不同種的系統環境,但從在最普遍的微軟(Microsoft)Windows 環境當中,安裝開啟「IIS管理員工具」進行設定後,就能夠使大眾一般文書作業電腦瞬間成為站台伺服器,並存放運行網頁內容。   在 Windows 10 環境當中,透過安裝IIS管理員服務並進行幾項簡單的設定就能將電腦轉變為網站伺服器。   由控制台當中選取:程式集   再選擇:開啟或關閉windows功能   並找到Internet Information ServicesàWorld Wide Web服務à應用程式開發功能à選擇(ASP、ASP.NET 3.5、ASP.NET 4.7)選項   經過開啟功能,我們再回到控制台進入"系統及安全性"部分   進入"系統管理工具"   就能看見Internet Information Services (IIS) 管理員   開啟後就能進入(IIS) 管理員 功能介面   也可以在瀏覽器當中輸入:http://localhost/ 或是 http://127.0.0.1/ 就能看到站台伺服器成功架設的歡迎畫面  
 HTML button按鈕的應用相當廣泛, 設定值有以下: Type:按鈕的類型,有 button(單純按鈕)、reset(清空表單)、submit(送出表單) value:就是按鈕的値 name:按鈕的名稱 <input type="button" value="按鈕值" name="按鈕名稱" style="按鈕樣式"> 範例: See the Pen gQbbWR by Ya (@bok770) on CodePen.   樣式可以透過CSS做調整,按鈕如下   若要消除預設樣式,CSS可以設定border:0 (去除邊框) 和background-color:none (去除背景),或是將這兩個屬性另外設CSS。 範例: See the Pen vQEEjm by Ya (@bok770) on CodePen.    接下來便可以自由套用CSS設計按鈕,也可以活用:hover讓鼠標接觸按鈕時會有不同的樣式變化。 範例: See the Pen wQBBEX by Ya (@bok770) on CodePen.  
在網站的搜尋優化當中,關鍵字是扮演著舉足輕重的一個重要角色,先前介紹過"初識熱門網站搜尋關鍵字"是希望讓大家都能初步瞭解關鍵字與網站的相互關係,從大眾主要使用的 Google搜尋引擎也推出了"Google Trends熱門關鍵字工具"來幫助站台們優化的情況可以明白,關鍵字的主要應用對搜尋引擎的收錄推薦有很大的引響,但面對眾多站台產業日新月異、彼此競爭的情況下,關鍵字的抉擇與設立,也成了網站優化的重點,因此本次將分享更多應用、分析層面的熱門關鍵字分析工具。   除了 Google搜尋引擎本身推出的Google Trends熱門關鍵字工具之外,坊間也有許多探討不同層面關鍵字的分析推薦應用工具,以下分享兩種免費的析推薦應用工具。     Keyword Tool 在關鍵字工具當中,這項工具主要依照您所輸入的詞彙進行相關分析,並推薦出相似且熱門的其他熱門關鍵字進行設定應用,但由於多數推薦工具皆需要付費,所以本款工具在不註冊會員的情況下,只提供相似熱門關鍵字的參考,較適合對產業關鍵字較沒頭緒的應用參考。     Term Explorer 相較前項熱門關鍵字工具,本項所以提供的功能較為全面,在註冊完會員後,可以在免費應用1千個關鍵字內的服務。 當中包含了:相似熱門關鍵字的列表、單一關鍵字的應用評比分析、指定網址的連結與關鍵字等數量資訊分析。 相較於許多工具來說,分析的層面與資訊更為完整。  

ARTICLE

5

CSS註解的寫法

無論是在HTML、JavaScript等程式語言都有註解可以使用,當然在CSS也不例外, 使用註解可以清楚標示該行CSS所代表的意義, 或是將暫時不需要,但之後可能會用到的CSS先註解掉, 視設計師需求作使用,在專案管理上會更方便。 分成單行與多行寫法:   單行CSS註解的寫法 使用的是兩條斜線//,在//之後的文字皆為註解,不可換行    // 單行註解  // 單行註解   多行CSS註解的寫法 多行註解是用/* 和 */ 將註解的文字包起來,可以一次將多行的CSS註解掉。  /*  多行註解  多行註解  */  
 先前我們說明了"初識熱門關鍵字"的重要性,透過熱門關鍵字,我們能夠瞭解大眾使用者的搜尋習慣,如果網站的各項優化層面都有了一定提升,但關鍵字的設定應用卻是與使用者習慣背道而馳的話,那網站的排名情況還是有可能會不盡理想,因此,我們除了透過先前介紹過的搜尋欄位熱門關鍵字推薦之外,本次將分享在 Google 工具當中,也有項探索工具 Google Trends 能夠協助我們瞭解更多層面的熱門搜尋主題。     Google Trends 當中的熱門關鍵字是由 Google搜尋引擎,全球眾多使用者搜尋習慣所累積統計出來的熱門趨勢應用。      Google Trends 當中提供了 4大項目的主題資訊。     探索主題當中,我們可以使用"想要瞭解的關鍵字"來追蹤過去時間中,使用者對我們想瞭解的關鍵字搜尋熱門度。     搜尋趨勢主題,主要提供"即時性"的搜尋趨勢。     熱搜排行榜主題,根據地區及過去年份的搜尋情況排名出:快速竄升關鍵字、快速竄升議題、快速竄升人物等資訊。   透過以上功能,我們可以更全面性的瞭解使用者的習慣,進而優化網站關鍵字的項目。
 CSS的text-transform屬性可用來控制文字字母的大小寫,僅適用於英文字母, 不管你原本寫的文字是大寫還是小寫,皆可透過text-transform做設定, 可設定為全部大寫、全部小寫或只有第一個字母大寫。   設定值如下: text-transform:uppercase 所有字母皆為大寫 text-transform:lowercase 所有字母皆為小寫 text-transform:capitalize 第一個字母大寫,其他字母小寫   範例: See the Pen YJrVgb by Ya (@bok770) on CodePen.
 初識熱門網站搜尋關鍵字,在 SEO 尋引擎優化方面,我們探討了許多畫面、程式、伺服器、連線等技術的應用調整,集結了先前眾多技術層面的囊括,我們能夠有效的提升使用者體驗觀感及搜尋引擎評斷收錄認可,但在這些網站技術的整合後,最終我們目的便是需要開始檢視瞭解在關鍵字上的搜尋結果,因為回歸使用者們的搜尋動作應用,只是單純的透過輸入搜尋需求關鍵字來與搜尋引擎溝通,並得到最相近符合的搜尋結果,因此除了先前分享過的許多種優化技術外,關鍵字的設定、編著也是對搜尋引擎有著貫穿整體技術的布局重點。   在搜尋欄位當中,雖然關鍵字大多數都只是簡短扼要的關鍵詞彙,但卻是扮演著極為重要的引領角色,透過關鍵詞彙,搜尋引擎可以根據各種收錄資訊進行比對呈現,因此在優化的環節中我們就必須妥善的置入符合內容及搜尋的關鍵詞彙,來提供搜尋引擎的收錄確認,進而讓使用者們能夠透過搜尋引擎找到符合我們的網站資訊,理解了關鍵字的重要性之後,我們便開始需要瞭解且尋找適合、熱門的對應詞彙。   在關鍵字的編著當中,我們通常都會根據大眾使用習慣來定義,如在搜尋引擎欄位輸入關鍵字彙的同時,下方會跑出較多人常使用的習慣搜尋詞彙,就是搜尋引擎們透過大眾搜尋習慣所統計出來的常用關鍵字,從中我們便能瞭解參考相關的詞彙編著方法並加以應用,進而達到貼近使用者搜尋的習慣也能更有提升網站的吸引力。
CSS的word-spacing屬性可以用來控制網頁上英文單字之間的間距,由於英文字是以半形空白做為區隔,而此屬性便是控制此空白的間距, 全形空白則不受其影響,word-spacing可以為負值,如word-spacing: -5px   乍看之下跟letter-spacing屬性有些相似,但是word-spacing控制的是單字之間的距離,而letter-spacing則是控制單一字母間的距離。 範例:  See the Pen NORQrg by Ya (@bok770) on CodePen. 以上範例的句子:「e-work design」,如使用letter-spacing屬性,控制到的會是「e、-、w、o」……等等的單一文字之間的距離。 而若是使用word-spacing屬性的話,控制到的是「e-work」、「design」這兩個單字間的距離。   而word-spacing的另一項特性,句子若是中文字的話,如果中間有空格,也會將空格視為單字之間的分隔, 例如「一化網頁設計」會被視為一個單字,而「一化 網頁設計」則會被視為兩個。 範例: See the Pen Zqpgrm by Ya (@bok770) on CodePen.
 網站在執行 SEO-搜尋引擎最佳化的時候,除了常見的網頁設計結構、內容、排版、等站內資訊優化外,維護架設網站的伺服器與搜尋引擎的收錄互動也是優化的重要一環,或許一般人比較直覺認知是網站有伺服器擺放能穩定工作就好,但這當中其實包含了伺服器運行網站時與搜尋引擎的互動,由伺服器在執行運作網站的同時,將會以 HTTP 狀態碼來回應網站的運行狀態(HTTP 狀態碼是什麼?),而這些狀態碼就如同使用者透過瀏覽器跟正在瀏覽的網站伺服器進行對話,它們經由資料傳遞比對確認能瞭解資訊的正確性,並能明白狀態代碼的應用變化及快速診斷回覆錯誤類型協助管理人員們進行維護與修正,以下將針對幾項 SEO常見應用的狀態代碼進行介紹:   HTTP狀態碼200 - OK 成功訊息 代表網站頁面正常成功運行收錄,也是最常看見的狀態代碼   HTTP狀態碼301 - 永久轉移定向 當固定網址的網頁內容確定需要永久替換或轉移到其他頁面資訊的時候,使用301重新轉址資訊可以在保持原有的網址及搜尋引擎持續穩定收錄狀態下將使用者導向新連結頁面資訊,以確保搜尋引擎和使用者不會持續看到舊資訊或撲空看到內容錯誤消失。是應用在網站改版或網址轉移資訊的一種永久頁面轉址的最好方法。瞭解網站轉址與301轉址   HTTP狀態碼302 - 暫時轉移定向 302暫時轉址與301永久轉址,同樣都是將使用者和搜尋引擎收錄導向至新的網頁,但302轉址就如同名稱一般,是用來暫時替代性的定向功能,適合應用在暫時性調整的網頁,可能因為更新或調整內容時需要暫時把連結導向至其他頁面,待調整更新完成後,還能移除暫時替代的連結頁面資訊,並持續保留使用原本調整前的收錄積分權重,是一種替代性的辦法,但須注意不能長期用來替代永久性的轉址,因為它可能不會傳遞301的連結權重。瞭解網站轉址與302轉址   HTTP狀態碼404 - 找不到網頁 404 - Not Found頁面,在瀏覽網站網頁時,多少都會遇到頁面錯誤,或者是找不到網站的經驗,其中包含的可能原因是:連結頁面的網址更換地址了,原本頁面已經被移除,使用者輸入相似卻錯誤的連結網址,原本就不存在的頁面網址。由以上原因可以瞭解,404錯誤網頁產的原因並不絕對,因此也並不是全都必須重新定向,可以透過預設的方式明確告之404資訊,並透過提供諮詢或其他導向方式進行緩解。404頁面是什麼?   HTTP狀態碼500- 伺服器內部錯誤 500 – Internal server error,從錯誤訊息中,很明顯的能發現,500代碼是代表了網站伺服器端內部的錯誤回報資訊,這部份與頁面程式、搜尋收錄較沒有直接的關係,是屬於伺服器的軟硬體運作與安全設定相關範疇,當站台管理人員發現這樣的訊息時,便意味著需要檢查站台伺服器的運行狀態與設定,盡快排除相關的錯誤,才不會導致使用者與收尋引擎長時間的無法查看站台內容。   HTTP狀態碼503- 伺服器暫停服務 相較於500代碼是伺服器運行時內部錯誤造成的回應,但503狀態代碼則是由管理端主動所設定的提醒代碼,代表著伺服器目前無法使用,可能是由於伺服器暫時超過負載或伺服器正在進行維護的一個公告,而搜尋引擎在得到這樣的公告訊息時,也會瞭解網頁或網站只會短暫停機,並不會將其排出收錄或降低權重。