文章專區

最新網頁設計文章

繼上次的文章介紹了CSS Lint這項可以線上檢查CSS的工具後,這次介紹CSS Compressor這個能夠精簡壓縮CSS的工具。 1.進入CSS Compressor的網站http://www.pagecolumn.com/tool/css_compressor.htm   2.將寫好的CSS複製貼上,按下GO鍵。   3.壓縮完成之後,可以看到壓縮前與壓縮後的檔案大小,以及壓縮率。   如圖中例子的CSS從21kb壓縮到16kb,足足減少了5kb,壓縮率近23%!        
 延續「勒索病毒與網站伺服器更新的必要性」後,我們瞭解了不論是伺服器還是一般個人電腦,在定期更新作業系統都是維護系統安全性事前預防的一項重要工作,俗話說:預防勝於治療,在維護網站伺服器也是如此,除了定期更新系統提高安全性,其實在有規模或有長遠規劃的完整系統下,應該要還有更安全的保護方式,便是定期備份重要資訊,先前提到的系統漏洞,是這次勒索病毒「WannaCry」主要的攻擊途徑,更新系統也是一種防堵方法,但也礙於此波攻擊是在許多使用者受到侵入後才讓大家重視更新的重要性,受侵入的資料大部分人只能選擇付款卻不一定能完全解鎖或是重灌電腦捨去舊有資料。   在這樣不確定的解決辦法下,我們能明白遇到這樣的攻擊,將很可能損失重要文件導致不堪的後果,所以使用安全的備份方法雖然不能直接防堵病毒的入侵,卻能在檔案受到侵害後,使用較早原本備份的資料還原,此舉不僅能免除勒索病毒的付款或重灌動作,甚至有防治其他突發狀況的可能性,例如:硬碟故障、作業系統的毀損、人為入侵蓄意的更改或刪除、病毒或惡意程式碼更改或者刪除、使用者不小心作了更改或者刪除等等可能,是防止資料損失的最後一道保險!   這次勒索病毒「WannaCry」讓眾多使用者在受到攻擊後才意識到系統更新及資訊預防動作的重要性,廣大的網際網路上其實還存在著許多不同樣式的人為或惡意病毒攻擊方式,以公司企業或具有信譽單位的網站來說,網站檔案定期的進行備份保存伺服器檔案,可謂必要安全的作法與保險。  

ARTICLE

3

CSS的text-indent

 text-indent屬性可以幫段落文字做縮排與凸排,將文字調到想要的位置上,相當方便唷! 比如說想將第一行文字凸出一個字的空間,如下範例:   CSS: ul{font-family:'微軟正黑體'; font-size:16px; line-height:24px; padding-left:1em;} ul li{text-indent:-1em;}   裡面要作凸排的文字設text-indent:-1em表示向左移動一個字的空間(1em),em是文字的單位之一,取決於你當時設定的文字大小,如上述範例設定font-size:16px,那麼在這段文字裡1em=16px。同理,若你要設定向左移動三個字的話,便設text-indent:-3em即可。 而由於text-indent的值設定成負數會使得文字凸出區塊之外,所以外面的容器要設定成padding-left:1em 將整塊文字往右移。   常見的文字首行縮排也是如上作法,只是將text-indent的數值從負數寫成正數而已,而容器則不須另外設定。 CSS: ul{font-family:'微軟正黑體'; font-size:16px; line-height:24px; padding-left:-1em;} ul li{text-indent:1em;}   善用text-indent可以幫助調整文字版面,算是個網頁設計上的小技巧,不妨善加使用唷。
      一夕之間引起全球資訊恐慌的勒索病毒「WannaCry」來勢洶洶,在網際網路開始發展至今其實一直都存在著各式各樣病毒,為什麼「WannaCry」卻會在這波攻擊下引起這麼高度的注意呢?在於它是針對大多數人所使用的微軟windows系統弱點進行研發,攻擊的方式並不是只在於破壞作業系統,不像一般病毒重灌作業系統後還能救回其他磁碟槽的資料,卻是會鎖住電腦中所有的檔案並予加密,讓你看得見檔案卻無法再開啟,並且進行勒索贖金,而最令機關行號擔心的是,此款病毒可以透過區域網路進行傳染攻擊,因此一台電腦中毒就等於其他電腦也有受到威脅的可能性,現實中已經影響到金融,能源,醫療等行業,校園網用戶首當其衝,受害嚴重的危機管理問題。            在網站的伺服器上,同樣也會面臨這樣的問題,尤其是許多私人架設或小型的網站伺服器,由於伺服器通常只用來穩定網站空間,因此用於實際作業與更新的機會上相較一般電腦的機會來的低很多,甚至使用較舊版本的伺服器作業系統會直接停止更新,這部分就會造成網站暴露在一個危險的狀態下甚至危險程度會大於一般常用的電腦,所以不論是私人架設的伺服器還是小型網站伺服器,在更新與程式版本升級還是有必要性的定期維護。  
CSS Lint是線上CSS檢測工具,能夠線上分析你所寫的網站CSS有無潛在問題,會清楚列出出錯行數與問題所在,方便進行修改。 步驟如下: 1.進入CSS Lint網站http://csslint.net/ 2.在大白框裡複製貼上寫好的CSS碼,按LINT!鍵     3.會列出有多少錯誤與警告(如下圖的CSS列出了0個錯誤與43個警告   下方會列出警告的清單,包含行數與問題敘述,之後便可針對一個個警告進行CSS修改了唷!   網頁設計師不妨在寫完後貼上檢測看看,有助於讓你的CSS樣式表更精簡唷!  
 本站介紹過一般多種常用的轉址方法,而先前也提到過關於安全憑證SSL的安全連線防護,礙於申裝憑證其實工序繁瑣,所以希望能夠正確有效的進行申裝與移轉而盡可能的不影響網站排名、頁面權重,本次要探討的是,可能會在伺服器上的轉址時機與在多個網站上進行聯合發佈的轉址時機,我們能透過以下這些方法來針對幾個狀況進行網站上的調整,能使我們的網站更正確的被搜尋引擎收錄,達到SEO的最佳化。   先前發文也提到過伺服器上的轉址,我們可以透過伺服器上的設定來進行www子網域的轉址及https安全協定的設置,提供連線資訊的完整度及使用者的安全連線,就能在這些額外服務建立時盡可能不影響網站排名與權重,以下可參考網址範例:   主網域網址:http://yuordomain.com/green-dresses   加入安全協定網址:https://yuordomain.com/blue-glass   加入子網域網址:http://www.yuordomain.com/blue-glass   由主網域進行延伸的轉址,隨著網際網路的演進,使用子網域及加入安全協定的網址,不僅能加以保護網站本身和客戶的安全連線,也能使網站取得搜尋引擎與新使用者較高的信賴度,而其兩項合併延伸將不會互相衝突,因此便可將上述三種網址進行轉,指向參考合併延伸後的網址:https://www.yuordomain.com/blue-glass 進行積分與權重的累積。   資訊平台的普及與友善的相互性,使得不同平台的資訊內容逐漸走向共享化,從自己的網誌聯合發佈至其他網域中網站的內容,與原始內容有部分或全部是重複的時候,我們也會遇到不同網址入口所看見相同的內容,如以下參考:   原始文章網址:https://blog.yuordomain.com/blue-glass/   聯合發佈文章網址:https://news.yuordomain.com/blue-glass.html   此方法可以散播較多窗口,但在頁面轉址導向時可協助搜尋引擎將每個網址的資訊彙整到單一偏好網址。不過,這也表示從其他網 站連至原網址的網址會連結合併。  
之前的文章曾介紹過CSS3:nth-child(n)選取器的功能,這次來介紹功能看似很像的:nth-of-type(n)。 :nth-of-type(n)跟:nth-child(n)一樣都是CSS3的偽類選取器,在寫法上和選取順序沒有太大的不同。   :first-of-type選取第一個元素 ex: ul li{background:#4D90BB; } ul li:first-of-type{ background: #E16F6F;}   :last-of-type選取最後一個元素 ul li: last-of-type{ background: #E16F6F;}   :nth-of-type(n)選取第n個元素 ul li:nth-of-type(3){ background: #E16F6F;}  選取的為第三項   :nth-of-type(odd)選取奇數 ul li:nth-of-type(odd){ background: #E16F6F;}   :nth-of-type(even)選取偶數 ul li:nth-of-type(even){ background: #E16F6F;}   :nth-of-type (an+b)自訂數列 ul li:nth-of-type(2n+1){ background: #E16F6F;} n的值從0算起,因此第一與第三項會被選取   乍看之下跟nth-child(n)沒什麼不同,但參照以下範例便可理解兩者的不同之處。 範例:   CSS分別設定: ul li:nth-of-type(3){ background: #E16F6F;} ul li:nth-child(3){ background: #E16F6F;} 結果兩者相同        但若在每個li之間加上同層級的hr時         :nth-of-type能如實選取到指定的第三項li,而:nth-child卻選取到了第二項,這是為甚麼呢?因為以範例來說,:nth-child是選取了ul裡的第三個子元素,而這元素是li,所以同層級的hr也算進去了。 由以上實例可顯示,:nth-of-type比起:nth-child在選取上更精確、更不易出錯,所以建議若要指定某元素裡的第幾個標籤,可以多多使用:nth-of-type唷!          
      本站介紹過一般常用的的301轉址(永久)與302轉址(暫時)及IIS轉址(進階)和DNS轉址(網域),主要都是在說明轉址的方法,目的就是希望大家在網站改版或是更換網址時能夠正確有效的進行移轉而盡可能的不影響網站排名、頁面權重,明白多種轉址方法後,本次要探討的是,先前介紹的這些功能其實不單單只能用在改版與更換網址,我們還能透過以上這些方法來針對幾個狀況進行網站上的挑整,能使我們的網站更正確的被搜尋引擎收錄,達到SEO的最佳化。          網站網址呈現的方式有許多種,但我們常見的大分類為"靜態網址"與"動態網址",已常見靜態網址來說,網址是固定的沒有帶入參數變動的問題,而動態網址會因為不同的主題規則及需求而帶入不同的資訊,若在不同的規則下也有可能會帶出相同的頁面,因此為了避免不同規則的網址產生相同動態內容而分散積分,這時便可以使用301轉址將不同動態網址的內容統一指向統一網址即可。 可參考以下範例:   動態產生網址:https://www.yuordomain.com/products?category=glass&color=blue   動態產生網址:https://yuordomain.com/glass/cocktail?gclid=ABCD    靜態固定網址:https://www.yuordomain.com/glass/blue/blueglass.html   以上三個網址雖為不同,但頁面呈現的內容卻是一樣的,為了避免同樣產品分數因為網址的呈現方式被分散,可以使用301轉址將其他兩個網址轉址為其一網址。     在部落格發佈文章時可能會遇到不同主題頁面會放置相同的文章,因此也會面臨網站自動生成多個網址,此時我們也可以使用301轉址進行調整。   可參考以下範例:   發佈網址一:https://blog.yuordomain.com/glass/blue-glass-prd-chesome/   發佈網址二::https://blog.yuordomain.com/blue-things/blue-glass-prd-chesome/    
想要讓你的圖片隨著螢幕放大縮小嗎?想要讓你的圖片放滿版嗎?不妨來試試CSS3的新單位vh、vw吧! vh、vw在使用上與百分比%很相似,vh代表view height,指的是螢幕可視範圍高度的百分比,而vw則代表view width,是指螢幕可視範圍寬度的百分比。 vmin:寬度或高度較小值的百分比 vmax:寬度或高度較大值的百分比   像素px、百分比%、vw vh的比較 像素px:最基本易懂的單位,不會跟著視窗縮放尺寸。 例 : width:200px; height:100px;   百分比%:由於沒有任何內容物,所以跟vh vw不同,即使設定了數值也不會顯示,除了這點以外,百分比是以父元素為基準做百分比縮放,而vh vw則是以裝置(螢幕視窗)大小為基準。   vh vw : 會隨著網頁縮放而改變尺寸。比如說設定一個div為width:50vw;height:30vh(為了方便顯示,另設定一個div為width:100vw;height:100vh來包整塊可視範圍)。 意思就是說這塊div會占可視範圍寬度的50%、高度的30%   這個新單位會隨著網頁縮放而改變,因此在RWD網頁設計的應用上是相當實用。
      在維護網站長久經營的積分與排名時,我們瞭解了先前所介紹一般常用的的301轉址(永久)與302轉址(暫時)及IIS轉址(進階),主要是在較基礎與程式的層面上著墨,而網站的組成中,除了內容的製作與程式上的開發外,網域名稱就是我們一直在討論轉址的部分,但在伺服器管理網址名稱時,也有著可以直接透過最高層伺服器進行轉址,就是在管理網域資訊的DNS中進行轉址設定。         比起以往要管理網站伺服器需要繁瑣的動作與設定,現行業界中多了許多代管網址資訊的廠商,而在這些代管的服務中,也提供了友善的操作介面,更重要的是,也整合了以往較複雜的功能並且簡易化了操作流程,已範例:CloudFlare、GoDaddy等代管廠商來說,可以在代管設定上透過記錄類型A類,進行網址來源及目標的設定,再經由伺服器上的更新,便能在最高層級的網域區段直接進行轉址,不過在進行這類的設定中,也伴隨著網站DNS與國際伺服器連結的穩定和安全性,因此,在這部份上的調整建議經由瞭解網域設定的人員操作較為妥善。由於每間廠商所開發介面不同,因此以下已CloudFlare為例,提供範例。