IT實用小技巧-齊來看看-IT技巧分享BLOG

RWD (Responsive Website Design) 響應式網頁設計小工具_Responsinator在電腦測試不同行動裝置效果 很久之前，建立一個網站，除了設計電腦版網站外，另外需要再設計手機版或平板用網站，這樣需要很多人力物力，一旦要維護更新網站，必需同時維護更新不同平台的版面。 響應式網站(RWD)會根據不同的螢幕尺寸調整顯示效果，自動放大縮小，方便在不同多媒體平台也能方便瀏覽，易於運用。 有一個viewpoint 的概念，就是在電腦viewpoint可任意調教大小， 但手機一眼看去，就是正面一個viewpoint 。 一個常用的Code 是: <meta name="viewpoint" content="width = device-width, initial-scale=1.0"> (即是100% 縮放)  在網頁的開頭做這設定，字不會變得很小，因為是 100% 縮放，所以通常 網頁的開頭都會加上這一句。 今次介紹一個方法行動裝置測試網頁的工具Responsinator (連結按此)   去到Responsinator的網頁後，打上想測試的網址。 例如我打了本站的網址，就可測試出iphone width 375px, iphone width: 734px.  Andorid phone widthL 412px 等不同行動裝置的網頁效果。 如果我想設定螢幕大小在 370 – 400px 的設定:  可參考CSS Media Query  設定: <style>  @media (min-width: 370px) and (max-width: 400px) {   p {  font-size: 24px;   } } </style> 這樣就能設定iphone width 375px 這行動裝置顯示出來的網頁效果，字體大小為24px。 通常網頁有幾個不同尺寸的CSS Media Query ，設計時會試看效果，然後度身訂造。

學習製作網頁的推介網站 (小薯仔推介) Top 1: https://www.w3schools.com/  Top 1 非w3schools 莫屬。很受歡迎的programming 學習網站，包括HTML, CSS, JAVASCRIPT,JAVA, PYTHON, C, C++, SQL, PHP, GIT 等。 簡單易明，解釋十分清楚。 還有示範功能, 可在Try edior 嘗試，學習。 2.  http://zh-tw.learnlayout.com  學習 CSS 版面配置 繁體中文網站，主要講解CSS, 包括BOX MODEL, DISPLAY 屬性，POSITION 屬性等。 這個比較簡潔，也是小薯仔推介。 ３ https://html5up.net  這個網站有很多響應式網頁範本，Resopnsive website template ，有些還是免費下載的。 ４ https://colorlib.com     有不少免費Wordpress Template 模版及網頁範本 website template。  5.  https://www.cssmatic.com  CSS 實用工具TOOL 有顏色面版Gradient Generator, 外框調整工具 Border Radius, 聲音測量工具 Noise Texture,  陰影調整工具 Box Shadow 。 以上這些都可在這網站嘗試設定，觀看效果，再套用至網頁上。 6  https://jqueryui.com 這個是Jquery 的教學網站，Jquery是建構網頁的一個好好的Library。 可做不同的Widget 和Effect 喔。

Wordpress Woocommerce 簡介篇之買一送一, 買一送二, buy x get y 等商品折扣優惠plugin 推介 小薯仔近期製作了一個用Wordpress 造的網店。 主要用最熱門的Woocommerce plugin , 這一個是常用的網上營商系統。 在這裡推介一個買一送一, 買一送二, buy x get y 等商品折扣優惠plugin: Buy X Get Y Free by StorePro https://wordpress.org/plugins/buy-x-get-y-free-by-storepro/ 它是一個open source software, 是免費的。 可自訂選項：  １選取是否在全球銷售的產品用此優惠 ２購物車訊息，可自訂如一些推廣訊息 在以上的設定是買２盒維他命C ，送一盒肝油丸。 可在下方選項選取填寫在產品頁面的訊息，這就會顯示在產品頁面，讓顧客知道。 如想設定買一送一，或其他數量(同一產品) ， 在Promotional Product 選取和Main Product 一樣的產品，就可做到這效果了。 很方便喔。

什麼是 SSL 憑證? http:// 和https://有什麼分別? SSL 憑證是一個令site viewer 安心的關鍵, Cloudflare一個方法免費安裝! 有時小薯仔在一些網站發現沒有安裝SSL 憑證，這樣令連線及網上付款等不安全。 什麼是 SSL 憑證?  SSL 憑證 是數位證書，它是用來驗證網站的身分並使用 SSL 技術將要傳送的資料加密，然後傳送到伺服器。 這是一個沒有 SSL 憑證的網站，在左上方有個三角形警示符號，寫著不安全。 按上去就有這個錯誤訊息了。 當顧客看到這個訊息，可能會給他們一個對網站感到不安全的感覺， 會大大影響 顧客對網站的信任程度。 那怎麼辦呢?  可以在DOMAIN 提供商一併買入SSL  憑證 (但要付費)  其實 SSL 憑證用Cloudflare 可以免費安裝的, 小薯仔引用一下網上一個很好的教程:  Reference: https://www.youtube.com/watch?v=Y4iHXhRkpO4&feature=youtu.be Cloudflare 是美國一間互聯網公司提供網頁應用程式防火牆， 網域名稱伺服器，公共DNS解析器等服務。 其實有時候它的免費方案已很好用了，它能將網站指向新的NameServer , 從而作出一些設定如安裝SSL 憑證等。