網頁設計的專業首選

在設計網頁時，有時需要調整圖片的透明度，如我們所知用CSS調整透明度的作法就是設定opacity屬性，然而設置此屬性的元素都會受到其影響，也就是說，若只是單純想調整圖片的透明度，設定opacity屬性之後，卻會連帶地使得置於其上的文字也一起具有透明性，然而又不希望文字也跟著透明化，這樣的情況該如何解決呢？ 一般在設定opacity時可能會如以下情況，以設60%不透明度為例，我們可能會設opacity:0.6，但是如此一來，文字的透明度也跟圖片一起變化了(如最下方範例的第一塊div)，此時我們可以將顏色的設定改以CSS3的rgba(red, green, blue, alpha)來表示，rgba最後的a代表alpha，是指透明度，設定的數值從0到1，例如60%不透明度要設成0.6，rgba(red, green, blue, 0.5)，如最下方範例的第二塊div。 但是這屬性IE6、7、8不支持，IE9及以上版本和其他瀏覽器都支持。   因此若是要只針對IE6、7、8的兼容性的話，還有一個方法便是使用filter:Alpha(opacity=x)，x 的取值從 0 到 100，例如60%不透明度便是filter:Alpha(opacity=60) ，範例如最下方的第三塊div。 因為此範例僅是針對IE6、7、8、9，所以對IE10及以上版本和其他瀏覽器不會起作用。 範例： See the Pen <a href='https://codepen.io/bok770/pen/vWBrOm/' _fcksavedurl='https://codepen.io/bok770/pen/vWBrOm/' _fcksavedurl='https://codepen.io/bok770/pen/vWBrOm/'>vWBrOm</a> by Ya (<a href='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'>CodePen</a>.  

   由先前本站介紹過"瀏覽器快取/緩存技術-HTTP Cache"，瀏覽器運用快取技術的原理後，能夠有效的節省頻寬流量與網站再造訪時的快速呈現，但使用者在瀏覽較為大量的網站頁面後，將會有累積過多的快取/緩存檔案和未能即時對應網站更新的同步資訊問題，便可能影響長時間後的效率跟使用者操作的及時落差問題。     在瞭解了瀏覽器應用快取技術的優點與長期使用後可能會面臨的問題後，本次針對累積過多快取/緩存檔案跟未能即時更新同步問題，整理了改善對應的辦法，讓使用者能有效改善瀏覽器快取/緩存大量使用後的盲點。針對現今各家瀏覽器開發技術中大多皆加入了快取/緩存技術，也因為瞭解其應用原理將會有後續的盲點，因此各家瀏覽器也衍生了清理快取/緩存的功能，已下將針對現今常用的幾項瀏覽器進行清理快取/緩存的步驟說明。     Google Chrome  61.0.3163.100(正式版本)   1.點選在瀏覽器右上方 自訂及管理Google Chrome的圖示選項  2.選擇 自訂及管理Google Chrome 中的"設定"選項 3.進入設定頁面後，將最下方"進階"選項展開 4.從隱私權和安全性的功能中選擇"清除瀏覽資料" 5.其中有各項提供選擇的清除項目及可以選擇將要刪除的時機點，在此建議選擇"不限時間"和"瀏覽紀錄、快取圖片和檔案紀錄" 6.確定選擇完要刪除的項目後點擊"清除瀏覽資料"便能完成清理快取/緩存的功能     Microsoft Internet Explorer 11   1.點選在瀏覽器右上方 ，點選"工具"的圖示選項  2.選擇"安全性"中的"刪除瀏覽歷程紀錄" 3.其中有各項提供選擇的清除項目，在此建議選擇"網際網路暫存檔與網站檔案、cookie與網站資料、歷程記錄" 4.確定選擇完要刪除的項目後點擊"刪除"，此時尚未完成，請稍待 5.待瀏覽器下方出現"Internet Explorer 已完成刪除選項的瀏覽歷程記錄"便能完成清理快取/緩存的功能     Mozilla Firefox 56.0.1   1.點選在瀏覽器右上方 ，點選"開啟選單"的圖示選項 2.選擇"歷史"中的"清除最近的歷史紀錄" 3.其中有"清除時間範圍"和"詳細資訊"展開後能提供選擇各項的清除項目 4.在此建議選擇"所有歷史紀錄"和"瀏覽與下載紀錄、已存表單及搜尋紀錄、cookie、快取" 5.確定選擇完要刪除的項目後點擊"立刻清除"便能完成清理快取/緩存的功能       在透過定期清除快取/緩存的功能後，便能有效提升瀏覽器快取的功能，以上若有相關疑問可以參考本站"初識網站快取加速、代理/Proxy快取伺服器"相關文章或歡迎至聯絡我們進行洽詢。

fancybox是乾淨美觀的jQuery燈箱套件，在相片的展示上呈現簡潔漂亮的視覺效果，在網頁設計上泛用性高。  fancybox官網(http://fancyapps.com/fancybox/)有幾項描寫詳盡的範例，可以依據自己需求選擇適合的demo來做。 首先到官網下載有全部檔案的壓縮檔，以自己所設的連結放進裡面 href裡放的圖片連結是點擊後放大的圖，img src裡的則是小圖，class部分為自己命名。   範例：https://codepen.io/bok770/pen/yoEVvm  See the Pen &amp;lt;a href='https://codepen.io/bok770/pen/yoEVvm/' _fcksavedurl='https://codepen.io/bok770/pen/yoEVvm/'&amp;gt;yoEVvm&amp;lt;/a&amp;gt; by Ya (&amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;gt;@bok770&amp;lt;/a&amp;gt;) on &amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;gt;CodePen&amp;lt;/a&amp;gt;.

  本站先前介紹了"初識網站快取加速"與"代理/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