網頁設計的專業首選

 在SEO搜尋引擎優化當中，大家都會非常在意自己經營的網站是不是有被各家搜尋引擎完整的收錄頁面資訊，原因當然是網站頁面有被收錄索引，才能夠被使用者找到並增加網站的搜尋能見度，但其實管理人員也必須思考注意的部分是，假設：尚未完成或修改調整中的頁面、管理員的登入介面、重複的諮詢頁面等...，這些網站內容並不全然適合被搜尋引擎收錄、並提供搜尋呈現給外在搜尋者查看。   因此瞭解搜尋引擎的運作原理，主要是透過程式進行多方網狀連結"檢索"與"索引"來對進行網頁資訊收錄，而網頁站台在長期經營的同時，難以避免會有些頁面"不需要被搜尋引擎收錄"，因此管理人員們便能透過提交 Robots.txt 這個檔案，將無須收錄的頁面資訊載明提出給搜尋引擎檢索參照，便能明確的有效排除無須收錄的網站頁面。

 從網站廣告行銷中，我們瞭解可以透過 UTM 參數設定與 Analytics 查看UTM應用成效，能夠明確達到追蹤和解析網站廣告的應用成效，隨著大眾行動裝置應用程度遠超越了桌上裝置的習慣，在 Android、ios 系統下，APP的廣告連結也成為了網站推廣行銷的重要管道，因此UTM的應用也針對行動裝置系統有了專屬的"Google Play URL Builder"、"iOS Campaign Tracking URL Builder"延伸。       以 Android Google Play URL Builder 為例，我們也是需要根據先介紹過UTM參數進行相似的設定，較為不同的地方是在Ad Network需要選擇不同廣告平台的選項進行對應追蹤。   在填寫 UTM 參數 時，同樣需要注意   ※字與字的間距，盡量使用 _ 或 + 號 ，勿使用空白與特殊符號，因為網址在編譯產生的過程，空白與特殊符號將會以網址用法代碼額外編入，造成網址過為冗長。   ※如果需要使用同個活動多個項目連結時，要注意所有餐數大小寫都要一致，因為大小寫的誤差，數據將會導向到不同的連結，將會造成錯誤的追蹤。   按照注意事項與參數欄位在產生與安裝好連結後，便同樣能透過"Analytics查看UTM應用成效"。

由"最簡單的UTM參數說明、設定教學"中，我們能瞭解，在產生完成UTM連結後，我們便能將連結複製加以應用在需要推廣的平台上，當使用者們透過此連結進入後，Google Analytics將會自動為我們統計各項應用資訊，達到有效的追蹤、統計總和。 透過UTM產生連結進入的使用數據存主要被歸類存放在 Analytics 當中的"廣告活動"中，我們經由介面分類中的：「客戶開發→廣告活動→所有廣告活動」便能查看統計的相關資訊。   根據先前我們產生UTM範例連結時填寫的層級資訊，我們能在廣告活動欄位中看見活動名稱：Brand_Promotion       進一步我們能夠經由"來源與媒介"更清楚的知道造訪者的相關資訊，達到分析與瞭解的目的  

近來CSS有不少新增的屬性，然而各個兼容性不一，我們可以用@support標記來檢測該瀏覽器是否有支援。 基本用法： @supports (該CSS屬性規則) { div {該CSS屬性規則} } 範例： @supports (display: flex) { div { display: flex; } } 意思是當瀏覽器支援display: flex時，即套用該屬性。   我們可以用not來設定該屬性不支援時的替換CSS，來應付不支援時的情況。 範例： @supports not(display: flex) { div { display: inline-block; } } 意思是當瀏覽器不支援display: flex時，改為display: inline-block   你也可以使用or或and串接多個CSS設定 範例： @supports (display: -webkit-flex) or           (display: -moz-flex) or           (display: flex){     div{     display: -webkit-flex;             display: -moz-flex;             display: flex          } } @support可以針對舊型和新型瀏覽器設定不同的CSS規則，大多時候用來支援較舊式的瀏覽器，並在使用更新的瀏覽器時，套用新屬性，提升用戶體驗。

在網頁設計上，用float排版若不清除浮動，會造成父元素塌陷的問題，不然就是改用display:inline-block或flexbox解決。 而現在CSS有一個新屬性display:flow-root，可以讓你不用再特地清除浮動囉！ 範例： See the Pen rozENw by Ya (@bok770) on CodePen.   display:flow-root 的生效條件 1. float的值不是none 2. overflow的使用值不是visible 3. display的值為table-cell、table-caption、inline-block或inline-table 4. position的值既不是static也不是relative 5. block-progression的值為lr或rl，其父框的block-progression 的值為tb 6. block-progression ' tb的值為' '，其父框的block-progression的值為 lr或 rl   由於是新屬性的關係，在瀏覽器的兼容性尚有待加強，只可支援firfox 53+、chrome58+、opera45+ 而可以使用@supports功能來進行增強漸進處理或是優雅降級處理 @supports(display:flow-root){} @supports not (display:flow-root){}   範例： @supports(display:flow-root){ display: flow-root; } 若瀏覽器支援display:flow-root，會啟用該屬性   @supports not (display:flow-root){ display: inline-block; clear:both; } 若瀏覽器不支援，則會啟用display: inline-block;  clear:both;

我們在瀏覽網站時，時常可以看到網頁的網址列上附有該品牌或是該公司企業的logo圖示，那麼該如何才能將icon加上去呢？   有兩個方法如下： 1.將圖片轉成ico格式，然後命名為favicon.ico，尺寸設16X16px，因為只是放在title上，占的範圍很小，所以圖檔不宜過大。 有不少將png、jpg等圖檔線上轉成ico的網站，可以直接將圖片上傳轉檔。 png轉ico：https://www.convertico.com/ 原始圖片支援jpg、png、gif：http://tw.faviconico.org/ 之後再將圖片放在網站的根目錄下即可。   第二個方法是在網頁的head裡放入 標題欄： < link rel="icon" href="/favicon.ico" type="image/x-icon" / > 收藏夾： < link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" / >   href裡可以放圖片的相對路徑或絕對路徑，所以不需放在網站的根目錄下，圖片名稱也不一定要取favicon.ico，可以自由命名。 例如： < link rel="icon" href="images/logo.ico" type="image/x-icon" / > < link rel="icon" href="https://www.webdesigns.com.tw/images/logo.ico" type="image/x-icon" / >  但還是建議使用ico檔案，因為相較於png、jpg等圖片，ico在瀏覽器的支援度更廣。

先前我們介紹過"GA分析是什麼? (Google Analytics- Google分析)-看見網站績效"，是Google針對網站經營所推出的友善管理功能，也是現今主流熱門的網站追蹤分析工具，分析層面多元且精細，其中Analytics還大方的囊括提供了 Google搜尋來源以外的廣告資訊追蹤分析功能，而 UTM(Urchin Tracking Module)參數就是提供給分析人員可以自訂寫入的連結標記模組。   透過 UTM參數產生工具，分析人員們可以自行根據Google搜尋引擎外的來源，如：Facebook 貼文連結、Facebook 廣告、Yahoo廣告、Bingn廣告、電子郵件廣告、Google AdWords 關鍵字廣告等，進行連結產生、統計、追蹤並在Analytics界面中分層別類進行縝密分析。   應用的方式： 來到"UTM參數產生工具"介面中，我們需要根據五種欄位定義規則進行層級的名稱輸入，依序是：   utm_source (來源) ：帶來流量的網站名稱(其實就是您想放置這個連結給人點擊的網站)，有可能是搜尋引擎或是社群網站等其他來源。(必填)   utm_medium (媒介) ：這個連結將要應用的行銷或廣告的方式，如：單次點擊出價、電子郵件廣告、banner廣告等...。   utm_campaign (名稱) ：這個連結的廣告活動的形式，或是產品、宣傳活動的名稱。   utm_term (廣告關鍵字) ：付費關鍵字使用，如： Google 付費搜尋關鍵字廣告，使用的詞彙等...。   utm_content (內容) ：在同一次的廣告行銷中，可能會同時使用2個或以上的不同方法，可以歸類成同次活動的多個，個別應用名稱，Ex：同一個網站不同的連結應用、同一封信件不同個產品連結。   參考設定：   在產生完成UTM連結後，我們便能將連結複製加以應用在需要推廣的平台，當使用者們透過此連結進入後，Google Analytics將會自動為我們統計各項應用資訊，達到有效的追蹤、分析總和。  

在行動裝置搜尋習慣大幅顛覆了桌上型裝置的查詢方式同時，Google由2016年時提出了網站"行動裝置優先收錄(mobile-first indexing)"的測試計畫，當時點出了：響應式網站(Responsive web design)、動態服務網站(Dynamic serving)、結構化標記，幾項有助於站台對應行動裝置瀏覽的友善技術，在經歷了一年半的左右的測試後，Google又在今年正式的宣布了"推出移動優先索引(Rolling out mobile-first indexing)"，而這就意味著往後 Google 搜尋規則都將會根據適合行動裝置瀏覽的網頁站台進行優先抓取、收錄及評估排名!   過去許多人對於新開發或改版成為"響應式網站(Responsive web design)"的想法抱持半信半疑，但是在眾多的公開資訊與有利使用者操作條件之下，由搜尋引擎優化(SEO)的檢視角度來切入，這樣的網站新趨勢是必然需要面對實行的，畢竟友善的使用者體驗及內容豐富完整性一直都是Google最重視的收錄排序條件。   因此在這也建議不論是新開發亦或是原先只有桌上型瀏覽的舊網站都需要正視這些公開訊息與跟進現行趨勢技術，達到站台的永續經營及SEO的優良體現。 

 在網頁設計中，若要將一張圖片作水平或是垂直翻轉，除了新製作一張翻轉過的圖片以外，還可以直接用CSS做到，這就要應用到CSS的transform屬性了。此屬性除了上次介紹的旋轉效果以外，也可以做翻轉，也就是鏡射效果。 寫法為以下： 水平翻轉： scale本為縮放效果，可以控制圖片的縮放倍率，如果設定值為scaleX(-1)，便可以呈現出鏡射效果。 See the Pen pqEWbO by Ya (@bok770) on CodePen.   垂直翻轉： 水平為scale(X)，反之垂直翻轉則是要設scale(Y) See the Pen ZVpXyP by Ya (@bok770) on CodePen.  

在IIS管理員工具中，安裝完成 "URL Rewrite轉址擴充功能"時，站台就能透過伺服器的判別程式進行自動轉址，先前我們介紹過在站台IIS設定檔案中，可以應用指令方式在"web.config檔案中進行轉址"設定，但其實在安裝完成URL Rewrite轉址擴充功能的同時，我們也是能夠透過IIS管理員工具介面中的URL Rewrite功能進行圖形化介面設定的。     進入URL Rewrite功能設定介面後，在右上方動作中，可選取"新增規則" 由新增規則視窗中，選擇空白規則 命名規則名稱，設定模式的判讀應用，並展開條件列表 從條件中，新增規則 輸入判讀網址條件，且在模式的部分填入我們要辦別的實際網址進行測試 從測試中輸入要測試的網址，可以從結果中看到是否正確 建立完規則後，選擇"重新導向"的動作的模式進行判別後的動作 再將需要導向前往的網址設定在重新URL，之後選擇導向的型態，一般都是永久(301)