文章專區

最新網頁設計文章

 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等資訊是一套簡便實際的應用程式 
 在網頁設計上icon的使用是不可或缺的,一般是切成圖片,然而若是以文字形式呈現的話,不僅縮放都不會失真,還可以任意更換顏色,比svg檔更便利!而有個網站便是專門將svg轉換成文字檔, IcoMoon :https://icomoon.io/app/#/select 不僅提供許多的現成圖示可以使用,還可以將自己繪製的icon放進來做轉換。   可以直接選擇想要使用的icon,選取到的會框起來   也可以直接將自己繪製的圖示放進來,點選左上方的「import Icons」,即可匯入   點選最右下角的「generate Font」轉成文字檔   將下載的檔案解壓縮後,只要將style.css和 fonts的資料夾放進自己寫的專案裡即可   點開demo.html會顯示你所下載的每個圖示的class名稱,實際套用時只要加進class裡即可   比如要套用上圖的icon-file-text的圖示,便可將 icon-file-text的class放進來,若要修改樣式可以新增class,如下圖的icon01、icon02、icon03,便是修改圖示的大小和顏色,因為是文字所以需用 font-size
 在瞭解了"SiteMap是什麼?"時,相信大家都能清楚的知道網站地圖的用途為顯示網站內所有的頁面連結資訊架構,雖然 SiteMap 可以使用多種形式呈現列表( html、asp、aspx、php、RSS、mRSS、Atom 1.0) ,但主要使於連結協助搜尋引擎針對網站的所有頁面進行審查和收錄的應用格式為 XML,所以在建置 XML 格式 sitemap 的時候,又該注意什麼細節呢?我們將在本次進行分享。   可延伸標記式語言 XML(Extensible Markup Language),是一種標記式語言。用於電腦、站台與搜尋引擎之間可以溝通傳遞處理各種資訊的通訊格式。Sitemap.xml主要是將網站內所有的網頁目錄和檔案,提供給搜尋引擎的爬蟲程式閱讀檢索應用,方便搜尋引擎進行正確的網站頁面收錄留存動作,在 xml 的格式下,Sitemap 中的所有資料值都必須是實體逸出。 ‧檔案本身必須使用 UTF-8 進行編碼。 ‧由開始的標記便是以 開頭,並同樣以 標記做為結尾 ‧指定 內的名稱領域 (通訊協定標準)。 ‧讓每個 URL 中包含一個連結的 項目做為母層 XML 標記。 ‧在每個 母層標記包含一個 子層項目。   以下為實際應用範例: