網頁設計的專業首選

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狀態代碼則是由管理端主動所設定的提醒代碼，代表著伺服器目前無法使用，可能是由於伺服器暫時超過負載或伺服器正在進行維護的一個公告，而搜尋引擎在得到這樣的公告訊息時，也會瞭解網頁或網站只會短暫停機，並不會將其排出收錄或降低權重。  

 CSS的first-letter 屬性，可以用來控制文字段落的第一個字母，透過此屬性，我們可以對首字母的樣式做一些美化，而要注意的是，由於first-letter是偽元素，所以在寫CSS時必須用:first-letter。   範例：     利用此屬性，可以一次設定多個區塊文字的開頭 範例：

 HTTP 狀態碼(HTTP Status Code)，是一種在網站開發初期鮮少會接觸的狀態編碼，主要是應用在網站營運維護中，用來識別、導向、偵錯，伺服器、用戶與站台狀態的對應編碼，在正常運作情況下的網站是不太會特別看見 HTTP 狀態碼出現的，就算是導向型編碼也不會刻意出現在頁面中，因此這意味著大多數看見網站頁面出現明顯的狀態編碼時，網站連線上可能出現了錯誤，並需要經由網站管理人員進行判別瞭解與除錯。   猶如前面提到 HTTP 狀態碼 可以用來「識別、導向、偵錯」，其實狀態碼有明確的區分狀態對應方向類別，同時也使用了3位數字代碼進行區別，由狀態碼數字的大小位數進行代碼的分門別類，依序位數區分，一般總共分成了五大項目：   1.代碼-1XX-狀態訊息(Informational)   2.代碼-2XX-成功訊息 (OK)   3.代碼-3XX-重新導向 (Redirection)   4.代碼-4XX-客戶端錯誤 (Client Error)   5.代碼-5XX-伺服器錯誤 (Server Error)   從以上大分類中，能夠快速的讓站台管理人員們明白站台當下所呈現的狀態，再配合代碼中細項的數字標示，便能夠更精確的找到可能需要修正或排解的問題，算是協助網站管理人員們的一項指標代碼。

之前我們介紹了CSS的word-wrap，此屬性可以讓過長文字直接換至下一行，使得文字不會超出div區塊的範圍。 而CSS還有另一個相似的屬性為word-break，功能也是讓文字換行，那麼此兩項屬性有什麼差別呢？就讓我們來看以下範例吧。 延續上次的範例介紹的word-wrap，可以讓過長文字換行如下： 原本過長會直接超出範圍    使用word-wrap:break-word，可以使過長的design單字直接換行 但是可以發現的是，由於整行design文字換行的關係，使得「e-work」這段文字右邊留下很大一片空白，除了顯得有些浪費空間以外，看起來也較不整齊，視覺上就沒那麼美觀了。 因此，為了解決此一問題，我們可以使用CSS的word-break屬性。 設定值有： normal：瀏覽器的預設規則 break-all：可以在單字的字母之間換行，不一定要完整單字才能換行。 keep-all：不可以在單字的字母之間換行，必須保留完整單字，比如說遇到半形的空格才可換行。 範例： 可以發現，e-work右邊的空間被填滿了！但缺點是，若是一個完整的單字被強制斷行，可能會失去該單字的易讀性，使得閱覽者不清楚此單字或是誤以為是兩個分開的單字，所以在使用上須斟酌一下。

 CSS的word-wrap功能為讓過長的單字能夠切換到下一行，大多的瀏覽器預設上，為了保持較長文字的完整性，並不會拆掉文字，而是直接跳至下一行，或是直接讓單字超出div的範圍，如果要避免以上這兩種情況，可以使用word-wrap屬性。   若不加word-wrap的時候，在瀏覽器默認下，若有一個單字很長，導致一行剩下的空間都容納不下它時，則會把這個單字挪到下一行。 所以如下圖所示，e-work後面會留下一片空白，而容納不下剩餘空間的design會直接移到下一行。   以上範例的文字整體長度還是在div區塊的範圍之內，但是如果這個單字本身長度比div還要長的時候呢？由下圖我們可以發現，如此便會直接超出div區塊的範圍。   而為了讓以上情況的單字可以不超出範圍，我們可以用word-wrap: break-word讓過長文字直接拆至下一行。   以上便是css word-wrap的功能介紹，此屬性在所有瀏覽器皆有支援。  

  Google Marketing Platform ，是 Google 創新整合的線上工具管理平台，在廣告投放與站台數據分析方面，相信大家都對DoubleClick 與 Google Analytics 都有一定的認識，Google 在眾多用戶應用體驗後，瞭解了大多數行銷人員們都認為這兩項工具如果能夠結合在一起，會有更精確、實務的應用，因此進行了廣告與數據整合的動作，當然隨著Google在廣告和分析技術上的突破與延伸，整合平台中還包含了許多其他能夠加以延伸應的功能進行服務，如:   Display & Video 360   Search Ads 360   Analytics (分析) 360   Data Studio   Tag manager 360   Surveys   Optimize 360   等功能陸續測試開放應用中，透過原先開發網站管理、廣告、行銷、分析等相關的工具，希望的就是能夠同時兼具行銷管理與數據分析 的搭配應用，根據官方期許推出的Google Marketing Platform 好處主要包含了：   1.提升行銷工作的速度和效率。   2.進一步掌控投資，輕鬆瞭解有哪些行銷策略奏效。   3.更加瞭解目標對象，整合及存取資料，找出最有價值的目標對象。   4.跨團隊共用深入分析資料，將資料與報表集中管理後，充分提高行銷成效。   透過以上的程序加強不同行銷團隊彼此之間的合作，達到最大的網站推廣效益。

Analytics(數據分析工具) 與 DoubleClick(廣告管理工具)整合在一起了! Google在 2018年 7月 24日正式上線推出了一個新的整合平台「Google Marketing Platform」，其首頁也直接取代了Analytics 與 DoubleClick 原先的首頁連結資訊，是一個集廣告刊登和分析工具於一身的平台，其用意目的就是希望將原本網站使用的數據分析與廣告管理產品能夠整合應用，使站台管理人員們不再是分頭額外操作可以有關聯性的管理工具。   相信有在使用前述兩項工具的管理員都能理解，在使用 DoubleClicke廣告管理工具之前，網站需要先加入 Analytics數據分析工具追蹤廣告投放前、後成果，進而應用數據比對分析廣告投放實質的轉換效率，因此本次Google主動將以上2項工具結合在同一個平台，無非就是希望整合工具，讓Analytics跟DoubleClicke更加相輔相成，為廣大使用者創造更全面性的應用資源，在這過程中或許需要使用者們再適應搭配應用的程序，但相信在熟悉操作後將會帶給大家更好的網站管理分析體驗。    

html的< dl > < dt >< dd >是在網頁設計上的一種內文排版技巧，通常被稱為定義清單，可以呈現出縮排的效果，撰寫規則為< dd >< /dd >< dt >和< dt >< /dt >皆是寫在< dl >< / dl >裡面，< dt>通常表示項目的標題，而< dd >則為項目的敘述。 範例： See the Pen QVqpra by Ya (@bok770) on CodePen.

  先前分享了"SiteMap是什麼?"與"Sitemap 主要應用格式 xml"，瞭解 Sitemap 的主要應用與格式後，其實在便利的網際網路上，有許多相關的網頁站台都提供了相似的線上 Sitemap 產生器，方便小型網站管理人員們能快速的產生取得管理網站的 Sitemap 檔案應用，是非常便利與貼心的服務，但現今大多數的線上產生器都還是有面臨項共通的問題，那便是「限制產生的頁面數量」，礙於線上的產生器是由網站伺服器進行運算，在執行上還是必須考量站台持續運作和多位使用者同時使用的體驗效果，所以通常都會限制產生的頁面數量在500~1000頁左右，因此當網站頁面數超過負荷的數量時，將可能面臨SiteMap不完整或不能產出的問題。   雖然大多數線上產生器有所限制，但回歸於產生器的原則，我們可以透過下載使用本機運作的產生器來擴大網站的應用資源，進而製作大型網站的 Sitemap 檔案，根據 sitemaps.org (Google、Yahoo、Microsoft 的支援)條款提供指出，Sitemaps 單一檔案最多 URL 上限能到為 50,000 個，因此使用本機運行產生器來製作 Sitemap 檔案，能確實有利完成大部分的站台製作。   以下將分享一套免費使用、操作簡易的 sitemap 本機產生器：G-Mapper Sitemap Generator   從新增檔案計畫中，我們輸入需要製作 sitemap 的網站資訊 在設定資訊後開始啟用製作程式，程式就會自行至指定的網站中抓取資訊並製作檔案 讀取製作好網站頁面時，將會詳細列出頁面的相關資訊提供管理人員的查詢核對 另外值得一提的部分是，使用此產生器，它不僅僅提供常見 XML 而已，還提供了其他 sitemap 可能會應用的格式與robots、rss等資訊是一套簡便實際的應用程式