• 岛屿旅行地中国国家地理网 2019-07-19
  • 你的帖子在告诉世人,你是最傻的人? 2019-07-19
  • 回复@IP比ID好:你的意思是不分老少不分男女不分勤懒不分聪笨……想干啥就干啥?或配置同样多的资源? 2019-07-17
  • 质疑的能力都没有,还有批判的余地吗》?看着就想笑 2019-07-17
  • 【健康解码】儿童发热怎么办? 2019-07-15
  • 江西:建立高校统战工作重点目标管理考核机制 2019-07-12
  • 一个对头能支持你的文章,可见你这个党员的问题了、。。。 2019-07-12
  • 大学毕业生是不是越来越过剩?当然大学毕业生可以在多种行业就业,比如农村、服务业等等。不过,过剩还是一种极大的浪费。 2019-07-11
  • ST富控:关于收到上海证券交易所对公司有关交易事项的监管工作函的公告 2019-06-29
  • 台企为大陆偏乡学生送关怀 2019-06-23
  • 揭秘人民币制作过程 从“白纸”到钞票耗时1个月 2019-06-23
  • 我老张工经历过中国计划经济时代,实践过计划经济,岂能不知计划经济?!现在的市场经济,我也有了实践感受。比较之,深感计划经济是适合社会主义的,而市场经济是不适合社 2019-06-21
  • 由进口至出口再至走向世界,这一路着实不易,其中少不了无数位科研人员的奉献与牺牲。 2019-06-21
  • QS世界大学排名发布:中国11所大学进百强,清华排名创历史 2019-06-20
  • 以实际行动诠释忠诚 以实干实政维护核心 2019-06-20
  • 文章專區

    最新網頁設計文章

    網站莫名開始出現無法順利解析 IP 位址,或是使用者來造訪網站時連線反應變慢、無法連線情形,可能要注意是否為 EDNS 所影響!   EDNS 是什麼呢?     2019 年 2 月 1 日,Google、IBM、Cloudflare 等多家公共 DNS(Public Domain Name System)服務商,將開始正式導入使用 EDNS 符合性驗證,EDNS ( Extension Mechanisms for DNS)主要是應用在提升 DNS 安全性使用,而運用要點在於由 DNS 用戶端發起,用來擴充以往傳統的 DNS 傳輸資訊封包,並配合數位簽章在資訊當中加入加密與驗證的編碼,來確保網站方與瀏覽方在互動資訊的同時,能夠保障資訊傳遞的安全性、正確性,達到有效的資料防護。   在 DNS 伺服器當中,一般通常直接影響網站和郵件信箱的連線運作,所以 DNS 伺服器管理軟體或相關設備如果不支援 EDNS 協定技術,將造成 DNS 無法順利解析或解析反應變慢等問題,這部分如果是自行架設 DNS 伺服器的企業行號更需要特別留意軟體與硬體是否能及時更新與支援上此項技術。   以上提到了相關的技術與影響層面,但如果無法評判造成網站時連線反應變慢、無法連線等情形的話,也不能完全確定是否為 EDNS 所影響,因此,我們可以透過以下檢測工具進行瞭解:   簡易對"網址"或"伺服器地址"進行測試,可以使用:   EDNS Compliance Tester     自行架設 DNS 伺服器測試,可以參考測試方法:   DNS flag day      經過了分析與瞭解,相信大家都能更清楚 EDNS 協定技術的應用,如果在這方面或是網頁設計等設定上遇到困難,也歡迎洽詢本公司,協助設計、規劃與管理! 
    當有兩個div重疊時,可以發現當滑鼠滑到重疊的區域時,會無法對下層的div進行點擊或hover的動作。 如下圖範例,藍色區塊(box01)設定了hover,只要滑入該div就會變色,但是當滑到重疊區塊時,壓在底下的box01設置的hover屬性會無法實現。 See the Pen KEeXqK by Ya (@bok770) on CodePen.   此時可以應用CSS的屬性「pointer-events」,它是針對滑鼠事件的屬性,預設值為auto,若設定值為none時,則可以穿越該元素。也就是說,原本滑鼠無法點擊的下層div,設定為pointer-event: none的話,可以讓鼠標直接穿越上層div,對下層div進行動作。 範例: See the Pen ywEzxO by Ya (@bok770) on CodePen.   我們可以發現,原本壓在底下的box01,就算鼠標滑到重疊區域內,也可以觸發hover了。
    先前在meta robots 與 Robots.txt 的差別與使用時機介紹中提到過, Robots.txt 的使用會使尋引擎在讀取網站內容資訊時,直接不檢查跳過忽略相關的設定頁面,甚至認定並不屬於網站架構內容,這樣雖然能夠幫助搜尋引擎排除不需要的收錄,但在 Robots.txt 的應用來說比較偏向於未設計製作完成還不便上線的頁面,然而其實大多數的重複諮詢頁面、管理員的登入介面等資訊,只是內容篇幅上偏向於功能取向、較無閱讀性、不符合訪客查看應用,嚴格來說,還是整體網站架構的一部份,反觀搜尋引擎在對整體查核時,也會對內容架構進行瞭解,內容架構的豐富度與完整性也有利於排名收錄,因此我們其實並不能一杆打翻全歸類於不屬於網頁內容。   在顧及完整性收錄與重複功能頁面排除的情況之下,我們便可以透過 meta robots 的應用,來明確的告訴搜尋引擎,那些內容算是網站的一部分可以進行檢索,但無須索引提供給訪客進行搜尋便可,至於 meta robots 的應用格式與使用辦法,我們將在以下進行說明舉例:   meta robots 主要是應用在頁面編碼當中的 head 區塊裡,可以自由的針對每個個別頁面提出只需要"檢索"或"索引"的設定,也因為可以個別針對每個頁面進行權限設定,就意味著"每個"需要不同權限的頁面都需要置入相關設定。   在 meta robots 當中,我們使用   index、noindex   代表 索引 或 不索引   follow、nofollow 代表 檢索 或 不檢索     所以我們只需要請搜尋引擎"檢索"理解,不需要"索引"提供搜尋的範例便能設定為:               不過 meta robots 有兩項設定值,個別兩種的狀態,所以也可以組合成以下的設定權限:     1. 不要檢索、不要索引,等同 Robots.txt 應用    2.   不需要檢索、但需要提供索引   3.   需要檢索、需要索引,等同於搜尋引擎正常預設值(形同虛設)
    在網站排除檢索的部分,先前本站淺談過 Robots.txt 主要是應用在提交給搜尋引擎不需要檢索的頁面名單,也介紹過 Robots.txt 的實際應用與設定,因此瞭解排除"檢索"的部分後,我們將要更進階的介紹排除"索引"部分,反觀由開始淺談部分時,我們曾提到搜尋引擎其實是透過的"檢索"與"索引"兩種功能來將網站網頁資訊進行收錄並提供使用者查詢,所以淺談 Robots.txt主要是針對檢索這項功能進行排除。   而檢索與索引這兩項功能雖然有極大的關聯性,但實質上在網頁上進行的動作並不相同,這邊我們用更白話的敘述就是    檢索 = 檢查     索引 = 收藏   所以搜尋引擎在實際上的運作順序是先透過檢查頁面內容與連結後,才決定是否要收藏,因此 Robots.txt 的作用就是在搜尋引擎來訪時,藉由直接提出不需要檢查的資訊,想當然爾就更不可能會被收藏,達到不檢查、不收錄的效果。   在更明確的知道搜尋引擎的收錄原理後,我們將要介紹的部分是 透過 meta robots 進行"索引"的排除,這時相信大家將會些疑惑,Robots.txt不就能達到不檢查、不收錄的效果了,為什麼還需要 meta robots 進行"索引"的排除呢?這部分主要原因就是 Robots.txt 會使尋引擎直接在不檢查這個步驟中就會忽略相關的內容,甚至不認為這是網站的內容;但是 meta robots 的應用,可以使搜尋引擎先進行"檢查"也仍然會將內容視為網站的一部份,但不要收藏提供使用者搜尋,所以這部分差異也會引響網站的總體完整性,因此在非必要的情況下,並不建議使用 Robots.txt的使用,而是推薦 meta robots 的使用。 
    由淺談 Robots.txt 是什麼?能瞭解,Robots.txt 主要是應用在提交給搜尋引擎不需要檢索的頁面名單,先前我們說明過,大部分不需要的檢索的頁面可能是:管理員的登入介面、重複的諮詢頁面、尚未完成或修改調整中的頁面等。這些頁面都包含在網站頁面資訊當中,擁有很重要的使用操作功能,但站在使用者搜詢需求上,卻相較無查閱內容,因此減少相關的頁面檢索能夠提升搜尋引擎對網站內容的精確性。   瞭解了Robots.txt的應用時機後,我們便能著手開始設定提交內容。   在網站中建立一個名稱為:Robots 的 .txt 檔案,在檔案內容中設定需要排除檢索檢索的頁面檔案與路徑。     以下為常見的設定規則:   1.User-agent:宣告設定規則對那些搜尋引擎爬蟲有效,可能是:Google、Yahoo、Bing、Baidu等...另外*號代表全部搜尋引擎適用。(必要宣告規則)   2.Disallow:用來指定不需要被檢索的目錄或檔案,需注意檔案路徑的完整明確性。(與 Allow 為選擇性宣告規則)   3.Allow:用來指定可以被檢索的目錄或檔案,需注意檔案路徑的完整明確性。(與 Disallow 為選擇性宣告規則,且 Allow 可以與 Disallow 同時應用,但 Allow 的優先權大於 Disallow)   4.Sitemap:指定網站內的 sitemap 檔案存放位置,需使用絕對路徑。(非必要宣告規則)     使用範例一:整個網站不要被所有收尋引擎爬蟲檢索   User-agent: *  (適用所有搜尋引擎爬蟲) Disallow: /    (Disallow用來指定不需要被檢索的資訊,/代表全站根目錄)     使用範例二:只允許特定搜尋引擎爬蟲檢索特定內容 (Allow 可以與 Disallow 同時應用,但 Allow 的優先權大於 Disallow)   User-agent: Googlebot          (適用 Goole 搜尋引擎爬蟲) Allow:/classA/pageA.html    (Allow用來指定需要被檢索的資訊)     User-agent: *        (因為先宣告了 Google 可以檢索,因此除了 Google 以外的皆不檢索) Disallo:/classA/pageA.html    ( Disallow 用來指定不需要被檢索的資訊,)     使用範例三:針對特定搜尋引擎爬蟲不需要檢索特定檔案類型   User-agent: Bingbot  (適用 Bingbot 搜尋引擎爬蟲) Disallow: /*.htm$    (不論檔案名稱與參數值,只要是.htm皆不檢索)    
     在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;
  • 岛屿旅行地中国国家地理网 2019-07-19
  • 你的帖子在告诉世人,你是最傻的人? 2019-07-19
  • 回复@IP比ID好:你的意思是不分老少不分男女不分勤懒不分聪笨……想干啥就干啥?或配置同样多的资源? 2019-07-17
  • 质疑的能力都没有,还有批判的余地吗》?看着就想笑 2019-07-17
  • 【健康解码】儿童发热怎么办? 2019-07-15
  • 江西:建立高校统战工作重点目标管理考核机制 2019-07-12
  • 一个对头能支持你的文章,可见你这个党员的问题了、。。。 2019-07-12
  • 大学毕业生是不是越来越过剩?当然大学毕业生可以在多种行业就业,比如农村、服务业等等。不过,过剩还是一种极大的浪费。 2019-07-11
  • ST富控:关于收到上海证券交易所对公司有关交易事项的监管工作函的公告 2019-06-29
  • 台企为大陆偏乡学生送关怀 2019-06-23
  • 揭秘人民币制作过程 从“白纸”到钞票耗时1个月 2019-06-23
  • 我老张工经历过中国计划经济时代,实践过计划经济,岂能不知计划经济?!现在的市场经济,我也有了实践感受。比较之,深感计划经济是适合社会主义的,而市场经济是不适合社 2019-06-21
  • 由进口至出口再至走向世界,这一路着实不易,其中少不了无数位科研人员的奉献与牺牲。 2019-06-21
  • QS世界大学排名发布:中国11所大学进百强,清华排名创历史 2019-06-20
  • 以实际行动诠释忠诚 以实干实政维护核心 2019-06-20
  • 混合过关输一场 虎扑体育论坛 7星彩app 北京pk10公式规律 中国福利彩票36选7 刘佰温四肖中特期期准一 浙江体彩20选5中奖条件 安徽25选5在哪个台开奖 如何看时时彩票走势图的 广东彩票11选5走势图 计算器胜平负 河北20选5最走势图 六合彩特码预测系统 河南快赢481开奖视2336 广东11选59码计划