文章專區

最新網頁設計文章

  本站先前介紹了"初識網站快取加速"與"代理/Proxy快取伺服器"後,本次將要說明的為"瀏覽器快取/緩存(HTTP Cache)",它幾乎是每個有瀏覽網站的人,都使用過的快取應用技術,但卻是一般人比較不會瞭解到的快取應用技術!不被瞭解的原因在於,一般使用者在使用時只會感受瀏覽器的流暢度,卻不知道瀏覽器其中已經運用了快取的對應技術,所以更加不可能知道瀏覽器的快取技術其實是運用了使用者本機記憶體作為對應進行。     瀏覽器的快取功能,主要是透過首次讀取網站頁面時,由瀏覽器產生一個"快取/緩存過期時間(max-age)"及"文件編輯/修改時間(last-modified-time)",在根據造訪伺服器實際網站內容來進行讀取工作,進而儲存快取/緩存資訊至使用者的本機記憶體中;當使用者再次查看相同網站時,瀏覽器會先透過第一次造訪所產生的"快取/緩存過期時間"來比對快取/緩存的資料是否"過期",若比對後沒有過期,瀏覽器就不再造訪伺服器,直接運用第一次造訪時所儲存的快取資料來呈現網站,便能省去重新呼叫伺服器和重新讀取資訊的動作與時間,達到節省流量且快速呈現的快取/緩存功能。若是真的遇到"快取/緩存過期時間",瀏覽器便會重新呼叫伺服器,透過"文件編輯/修改時間"與伺服器端資料進行比對,確認在過期這段時間中,是否有檔案有遭變更修改過,假設並沒有任何變動,瀏覽器便將會直接使用第一次造訪時的快取/緩存資訊來直接呈現,省下重新讀取的時間,此動作稱為"協議快取/緩存";如果在比對中發現有變更的檔案內容,便能針對個別單一誤差檔案進行重新讀取且更新的動作,省去重新讀取整個網站全部內容的冗長時間。     瞭解了瀏覽器快取技術的運用原理後,我們進而可以得知,其技術是透過瀏覽器將快取資料儲存在瀏覽者本機記憶體當中,此技術能有效達到節省流量與快速呈現網站的好處,但卻也可能造成使用者瀏覽過多網站後的過多快取資訊及快取資訊尚未過期而未能即時對應網站修改更新的問題,針對這部分衍伸問題的對應處理辦法將於下回討論中進行分享。
網站的運行速度對於瀏覽量占有舉足輕重的影響,而影響速度的原因之一就是圖片! 圖片若尺寸太大或數量太多勢必會跑得比較久,就算只是幾秒的差異,但這就會使得用戶等得不耐煩而離開網站,導致跳出率提升,對網站排名也會有不好的影響。 那麼該怎麼處理圖片才能減低對網站速度的影響呢?首先就是將圖片的容量壓到最低,但該如何既不影響到圖檔本身的畫質,又可有效降低容量大小呢?   這篇就來介紹線上的圖片壓縮工具-TinyPNG,還有另一個網站是TinyJPG,可以針對這兩種圖檔,在不破壞原有圖片品質的情況下,進行最佳化的壓縮。   TinyJPG:https://tinyjpg.com/ TinyPNG:https://tinypng.com/   1. 進入TinyJPG網站後,可以直接將欲壓縮的圖片拖進虛線框中,不過一次的壓縮張數是有限制的唷!最多可以壓縮20張圖片,如果數量很多的話必須分批壓縮。而單張照片的容量則不能超過5MB。   2. 在上傳完之後,TinyJPG就會開始進行壓縮,並顯示壓縮後的大小以及節省了多少容量。  
   由"初識網站快取加速"我們能瞭解,網站快取的技術原理與包含了許多層面,本次將延伸說明"代理/Proxy快取伺服器"技術,快取伺服器是在網站讀取連線中較為主要的快取技術,為了加快網頁瀏覽的反應速度、降低伺服器的負載、減少網路頻寬的浪費而開發的技術,主要是透過額外的一台暫存伺服器來儲存資料加速協助使用者讀取網站內容,但由於架設快取伺服器需要較為龐大費用,並不是所有網站能獨立架設,因此產生了"代理快取伺服器",代理快取伺服器透過建立大型快取伺服器分割資源、租用IP給個別網站或用戶達到了有效快取支援,也節省了個別架設的費用。     代理快取伺服器的技術中大致分類為"正向代理(Proxy)快取"與"反向代理(Reverse Proxy)快取",兩種技術雖然都為快取功能,但正向代理技術,是由瀏覽者端加設的伺服器進行快取功能,而反向代理技術則是由網站經營端加設的伺服器進行快取功能;在資訊技術進步的現今,反向代理技術逐漸取代了正向代理技術,原因在於正向代理技術需要每個瀏覽者自行加設,而反向代理技術由站方加設便能提供大眾使用者的便利,且將低了原網站伺服器的負荷,也因為代理伺服器提供額外的連線IP位置保護了主要伺服器位置不被發現且不被攻擊的好處。     透過反向代理快取伺服器能夠提高用戶的連線速率、降低了網站的使用負荷,也保障了網站的安全,搭達用戶與站方的雙向友善性,進而符合了搜尋引擎的優先收錄條件,是貼近現今行動網路的主流的網站快取技術,本公司也提供了此項服務,歡迎進一步的瞭解與洽詢。  
我們在使用網路上的字型時,在粗細上並不是只有正常和粗體兩種而已,Font-weight屬性可以設定字體的粗細變化,除了normal是預設值、bold是粗體、inherit是繼承父元素之外,數字設定是從100、200~900,一共有九種,此外bold粗體是700,normal是400,設定值是純數字時,不需要在後面加上任何單位唷。 下面以網頁常使用的繁中字型-微軟正黑體做示範: See the Pen MErNBE by Ya (@bok770) on CodePen. font-weight屬性相當容易使用,不妨善用這個屬性讓網頁上的字體更有變化性唷!
   在行動裝置普級的現況下,因為行動網路受到基地台的限制,已往內容精緻豐富、資訊龐大的網站反而將可能會導致讀取時間冗長,所以網頁讀取呈現的速度逐漸變成了網站瀏覽的優先指標,先前提到的"響應式網頁設計(RWD)、PageSpeed網站速度"都是能夠有效貼近行動裝置使用者操作的優化技術,提升網站在瀏覽時的快速性、便利性,因此本次將要再為大家介紹說明的是"網站快取功能"。      網站快取功能加速,能夠確實提升網站讀取速度,其原理在於暫存、緩存效果,當使用者在造訪網站時,需要透過網路傳輸將儲存在伺服器上的網站頁面資料,如:畫面、圖片、文字、影像等資訊,傳遞給使用者做瀏覽,當網站內容越豐富細緻,相對的傳輸時間自然會加長,便會增加觀看者的等待時間,就有可能造成使用者的青睞性降低;在使用網站快取功能增強網站讀取效能時,暫存、緩存功能可以預先將常使用的圖片及較為龐大檔案的資料進行整理壓縮且傳送到等待讀取的序列,讓網站在被使用者查看時能夠即時支援查看接收資訊的速度,不再受到已往網路傳輸模式單一呼叫與單一回應傳送的限制。      網站快取功能的概念目前已經被廣泛延伸,不僅在硬體裝置上的配置,還在許多一般人常用卻不會特別注意的軟體、程式置入相關技術,因此在行動裝置普級的時下,網站能夠兼具速度與豐富的操作感官,網站快取功能也是一項值得參造、使用的實用技術。   
 之前曾介紹一個大家較熟悉的icon素材網-Font-Awesome,這次介紹的雖然也是提供icon下載使用,但是比較特別的是,Devicon提供的圖示是較偏向於技術性相關的,我們有時需要在網站放一些這種icon,以告訴客戶支援了哪些技術、瀏覽器(Google Chrome、Firefox、Safari)、使用何種設計軟體(photoshop、illustrator)製作等等,這種常見的技術相關標誌,在這個網站都找得到。 Devicon:https://konpa.github.io/devicon/ 圖示提供了SVG和字型版本(Font version)。最上方可以輸入關鍵字搜尋你要的icon名稱。   首先選擇一個圖示,這邊選擇Google Chrome的icon作示範,點了之後右列會顯示字型版本與SVG版本,各版本又有好幾種不同的外型,如示範中的Chrome,字型版本和SVG版本各有四種,不同點是加入英文字或是改了顏色之類的,可以依據自己的需求來使用。下有原始碼可直接複製到自己的檔案中使用。要注意的是字型版本需要多加一行在裡。   若要下載原檔的話可以滑到下方下載。 Devicon提供各種技術開發者會用到的icon和logo,只要複製貼上即可快速使用!
  在先前的文章子網域是什麼?淺談子網域中,我們瞭解了子網域的來由與作用之後,本次將要解說的是子網域的設定,子網域雖然是由原網址名稱的延伸,可以隨著使用需求上的遞增或減少,不過在網域上的命名和設定上有著些微不同的,子網域需要在"DNS基本資訊"中進行增加與管理,因此會分為"指向 IP 位址的子網域"或"指向伺服器名稱的子網域"。     從字面上能瞭解子網域可以對應的是 IP 或是對應伺服器,但其實都是要給予子網域一個正確的連線地址,其中設定上的不同是,對應 IP 時,需要在 DNS 管理中進行" A紀錄 的設定",而 A記錄 的原意就是 IP Address 地址記錄,就是將單一個域名或主機名稱解析成一個具體的 IP 位址進行對應;對應伺服器時,則需要在 DNS 管理中進行" CNAME紀錄 的設定",CNAME記錄 原意為"別名記錄",通常用途是將子網域(例如:「www」或「mail」) 對應至其他(他人)代管子網域內容的網域,當中他人可能將多種子網域名稱功能合併映射成一個伺服器域名提供服務,此時我們在設定上便可以透過 CNAME 紀錄來各別指定 WWW 跟 MAIL 對應到同個伺服器域名進行工作,如以下範例:   紀錄名稱            子網域名稱                                對應位置                                                     TTL(暫存紀錄保留時間) ------------------------------------------------------------------------------------------------------ A紀錄       www.webdesigns.com.tw              127.0.0.1(對應IP)                                           Automatic   A紀錄       mail.webdesigns.com.tw               125.0.0.2(對應IP)                                           Automatic   A紀錄      example.webdesigns.com.tw         122.0.0.3(對應IP)                                           Automatic ------------------------------------------------------------------------------------------------------ CNAME      www.webdesigns.com.tw         abc.google.com(對應他人子網域伺服器)        Automatic   CNAME      mail.webdesigns.com.tw           mail.google.com(對應他人子網域伺服器)       Automatic   CNAME     example.webdesigns.com.tw     rwq.google.com(對應他人子網域伺服器)       Automatic 
網頁設計師在寫CSS時,是不是有時會發生明明已寫好屬性設定,但卻無法套用進頁面的情形呢?遇到這情況,不妨檢查看看CSS優先權的設定唷!CSS提供許多選擇器類型,當使用不同的選擇器時,套用樣式的優先權也會不同。 這邊整理優先順序的幾個原則,讓你在寫CSS時可以更容易掌握唷!   越左邊權限越高 元素內的樣式>頁面內的樣式>外部載入 元素內的樣式 例子:   頁面內的樣式 例子:   外部載入 例子: 以@import方式載入 在頁面內以 link 方式載入   後設定>前設定 最後設定的樣式將蓋過之前設定的樣式 例子:   最後會套用的屬性是 width:250px; height:50px; background:#fff;   Id>class 由於 id 具有不可重複性,而class則是可重複的,所以 id 在層級上大於 class, 如果一個元素同時有 id 跟 class 兩種屬性,且互有所衝突時,id 優先權大於 class。   !important 為最高優先 !important 的作用為強制提高優先權,照理說越後面設定的越優先,但若使用了 !important,會使得最前面的設定成了最優先,使用!important的 CSS 樣式幾乎等於無敵。 當出現二個!important時,優先權就是依先後順序,與其它的選擇器的原理相同,因此非必要的話,最好盡量少用!important。  
   在本站先前介紹網域名稱的建立與建議後,此次將針對 子網域(Subdomain) 又稱 次網域 進行說明,在先前的文章中解說過,網域在建立與使用上可能影響著我們網站長遠的發展與經營,因此使用單一網址,避免多個不同網址卻重複同樣網站的內容,較不會影響搜尋引擎的收錄判斷及網站關注評分,但若面臨到一個機關行號資訊較為多元(如:形象、購物、部門分別等)或需要特殊使用需求(如:限時活動網站相關等)時,該如何避免重新申請網址及網站過度分化的困擾呢? 便可以使用"子網域"。     子網域主要是利用原先架設時所申請的"網址名稱"進行延伸,從本站先前介紹過網域名稱的分別與選擇中可以瞭解,網域中每個.分號分開的訊息代表著不同的屬性或域名,本次將說明的子網域就是要使用網址名稱前的域名進行變更產生,由本站網址為例:https://www.webdesigns.com.tw 其中 www 子網域代表的是常見的"全球資訊網路"意思,由於每一個主網域或子網域都是獨立的,可對應至一個IP,當然也可以對應至相同IP(相同主機),因此,若要增加新的子網域便可根據對應的IP進行將要使用的子網域進行命名設定,如以下範例:   假設本站將要加子網域可以設定為   設產品購物或活動頁面 https://shopping.webdesigns.com.tw    活動頁面 https://activity.webdesigns.com.tw     瞭解完子網域後,若您對設定還有疑問的部分,歡迎參考子網域設定│DNS 指向 IP 與 指向伺服器
展開收合效果是常見的網頁技巧,不僅提高版面布局的美觀性,也能有效縮短文章的長度, 讓我們來看看如何使用jQuery達到這效果吧! HTML CSS JS   範例:https://codepen.io/bok770/pen/qXZyPN See the Pen <a href='https://codepen.io/bok770/pen/qXZyPN/' _fcksavedurl='https://codepen.io/bok770/pen/qXZyPN/'>qXZyPN</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a></div>