文章專區

最新網頁設計文章

我們常常在修改完CSS上傳後,對方看到的卻還是未改過的舊畫面,這是因為瀏覽器會暫存CSS、js等等這些靜態網頁,雖然按ctrl+F5或是有像「CSS Reloader」這種讓瀏覽器清除快取、重新載入最新CSS的配件可以安裝,然而也不太可能要求每個客戶都這麼做吧! 這時就得用一些小撇步讓瀏覽器加載網頁最新版,讓瀏覽器認為URL變得不同,向伺服器請求新的下載,這樣一來對方就能夠直接看到新頁面了。   方法如下: CSS後面加上?以及日期、亂數、版本等都可以強制瀏覽器讀取最新的CSS唷! 1.CSS?後面加上日期。如:style.css?20170620  2. CSS?後面加上亂數。如:style.css?3344qwe 3.CSS?後面加上版本。如:style.css?v2.11.1 圖片也可以運用唷! 例如: CSS內用到的圖片也行 如:.AD{background:url(../images/banner.png?20170808);} js也可以加上,方法亦同。(如首圖範例)   只要簡單改一下,就可以保證瀏覽器讀取的是最新頁面!
動態網址與靜態網址對SEO的影響,在網站優化時,大家都會非常注意網站是否有被搜尋引擎完整收錄,因為在未收錄的情況中,網頁根本就沒有被搜尋引擎認可,更別談排名與優化了,而網址呈現的方式便占了搜尋引擎爬行收錄規則很重要的一個環節,以往常會有的觀念是搜尋引擎收錄規則會傾向靜態網址的網頁內容,反觀動態網址如果帶入太多不明確參數,的確也會使搜尋引擎在查尋與收錄時較有難度與錯誤,但這也僅只於帶入太多或不明確參數,因此在靜態與動態網址中隨著搜尋引擎的演進,我們將簡單的說明其差異與SEO的影響。   靜態網址,如其字面上意思,就是已經製作完成,確定不會因為其他規則與條件更換當中內容的網址,因為它是單一確定的資訊,所以搜尋引擎對其單純且穩定的結構較能快速理解並認可,但也因為每一個頁面都是單獨的個體需要個別編譯,在更新此種網址類型頁面時,需要消耗較多的時間,面對大型或需經常更新的網站,將顯得管理與操作上的不便。   動態網址,在以往的觀念中,大多數對其多變且自由的參數較有收錄上的質疑,但從動態網址的架構上去瞭解,其實當中內容基本上是有一定的基礎與架構,搭配網站內較豐富的內容數據做呈現,雖然看似資訊繁多,實質上對於內容豐富且須要經常性更新的大型網站,如購物、論壇等,卻是可以協助它們在有條理與明確規則下的生成,會造成搜尋引擎收錄上的問題在於不明確的規則與制定參數冗長和可能重複資訊模糊單一性的頁面。    由上的說明中,我們瞭解靜態網址與動態網址在網站的架構中有不同的呈現,對於網站的需求提供了不同層面上的優缺點,靜態化的網址較為單純但變化上較為困難,但收錄相對快速,而動態化的網址較需要事前的規劃,好處是適合複雜的網站,站在SEO的角度上,其實兩種類型的網址只要善加利用,搜尋引擎的演化都能在收錄上有一定的表現,因此網站在決定製作前的規劃就顯得較為重要。
.article{width:960px;margin:0 auto;height:400px;padding:40px;font:24px 'Arial';background-repeat:no-repeat;background-attachment:fixed;background-position:center center;background-size:cover;line-height:28px;}.section1{color:#fff;background-image:url("img/upload//pic-4.jpg");text-shadow:5px 4px 5px #575353;font-weight:bold;}.section2{color:#fff;background-image:url("img/upload//pic-6.jpg");font-weight:bold;text-shadow:3px 4px 5px #373030;}.section3{color:#fff;background-image:url("img/upload//pic-3.jpg");text-shadow:3px 4px 5px #373030;} 什麼是視差滾動呢?其實就是當使用者滾動滑鼠滾輪(捲軸)時,將多層背景以不同速度移動,形成3D的垂直運動效果,造成視覺上的錯覺並增加趣味性。 網路上多的是用CSS搭配JS寫出來的,以下來介紹如何只用CSS表現出最簡單入門的視差滾動。 只要想成背景圖的尺寸必須比包住它的div還大,並且在頁面上須是固定住的,因此在向下滾動時,背景就會固定在原地,但是其上的內容和包住的div卻會隨著滾輪而向上移動,這樣就形成最簡單的視差滾動了。 範例:           Travel     Travel     Travel                 Enjoy Your Life     Enjoy Your Life     Enjoy Your Life     Enjoy Your Life                 HAVE FUN!     HAVE FUN!     HAVE FUN!       Html CSS 要注意的是背景圖的高(height)一定要比div還長,否則向下滾動時就會露餡了!  以上範例便是最基本的視差滾動,很適合想嘗試看看的新手唷!
  在先前初識搜尋引擎最佳化(SEO)時,我們瞭解了搜尋引擎最佳化(SEO)目的就是希望提升網站在自然搜尋的排名,但也明白了自然搜尋排名的排序其實是由百種以上眾多規則與條件組合而成的排序,先不論搜尋引擎為了提高精確結果還持續在增加地改善的條件,由原本的規則來說大家可能會疑問,排序條件這麼多種,搜尋引擎的優化又該有何依據呢,在這邊將以目前多家搜尋引擎公司釋出的方向讓大家快速的理解,較能影響搜尋排名的因素。       搜尋引擎公司為了提高搜尋用戶市場的信賴度,逐漸朝向內容準確性、豐富性發展,也會經常性 地調整排名條件和修訂各種因素的優先權重,用來幫助搜尋引擎更精確的評估網頁的品質,所以在眾多搜尋引擎公司釋出較大的排序方向中可以分為: 1.網站本身內容豐富性 2.網站與它站的友善性連接 3.網站與趨勢平台的相互性 4.搜尋用戶的體驗友善性 5.網站營運操作是否違規      面對網際網路上數不完的網頁,搜尋引擎不會單單是依靠以上幾項規則,但如果網站符合越多種的正向排名因素,那排名提升的機會自然也會相對增加,回歸搜尋引擎最佳化的目的,除了提升自然排名外,主要就是希望提供搜尋者正確的搜尋結果與豐富的服務內容,因此網站優化的經營目的應該是避免違規性的操作,回歸使用者的需求體驗。 
 fliter:drop-shadow顧名思義就是投影濾鏡,因此透明的部分不會有效果,可以用在將圖片加上陰影等等。 chrome瀏覽器需加上-webkit- 數值設定: fliter:drop-shadow(x偏移 y偏移  模糊大小 顏色)   例:fliter:drop-shadow(4px 5px 5px #000)   fliter:drop-shadow與box-shadow的差異 可能看上面範例會覺得跟box-shadow這屬性沒什麼兩樣,但看以下範例就能清楚明瞭:   .pic01{-webkit-filter: drop-shadow(5px 5px 8px #000); }   .pic03{ box-shadow:5px 5px 8px #000; }   明明png圖片的背景是透明的,但是box-shadow的陰影卻還是以白背景做呈現,而fliter:drop-shadow卻能夠以實際投影的方式做出陰影效果。兩者的陰影效果也有所不同,box-shadow的陰影較深且模糊範圍較小,fliter:drop-shadow則是陰影較淺、模糊範圍偏大。   下次發現圖片加陰影還是會留一大片空白時,不妨使用fliter:drop-shadow唷!  
 本站先前介紹了因應此波勒索病毒攻擊的防治辦法,如:"網站定期備份"與"定期更新"的重要性,但在網站長期營運的方面上,不論是公司企業還是機關行號,都有可能會面臨到各種資訊安全的疑慮,因此具備多樣的預防動作與防護措施才能擁有全面性的保障,以下本站也整理了些可以參考的項目,希望提供再選擇網站空間或伺服器的層面上可以有些依據,參考項目如下:   1、選擇有規模或穩定安全性的空間與伺服器 2、定期更新作業系統與應用程式之修補程式 3、定期備份網站資訊內容 4、使用防火牆保護 5、連線資訊採用加密傳輸 6、對較嚴重或特定弱點或病毒,進行不定期掃瞄偵測 7、擁有專業資安管理人員即時維護排解故障或攻擊 8、可以隔離外部及內部網路,且避免攻擊者以間接方式入侵內部系統 9、使用者帳號密碼要求定期更新,提供安全驗證 10、注意趨勢上相關安全議題,及早防範
繼上次的文章介紹了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

9

CSS的text-indent

 text-indent屬性可以幫段落文字做縮排與凸排,將文字調到想要的位置上,相當方便唷! 比如說想將第一行文字凸出一個字的空間,如下範例:   *一化科技 *一化科技是您的好選擇 *一化科技-網頁設計的專業首選 *「一化網頁設計」由一群富含專業熱情、深厚技術背景的人才所組成。從網頁設計、網站設計與統合、企業內部程式與e化的輔導及建置,均提供一貫的解決方案,不同於一般的網頁設計公司或個人工作室。   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系統弱點進行研發,攻擊的方式並不是只在於破壞作業系統,不像一般病毒重灌作業系統後還能救回其他磁碟槽的資料,卻是會鎖住電腦中所有的檔案並予加密,讓你看得見檔案卻無法再開啟,並且進行勒索贖金,而最令機關行號擔心的是,此款病毒可以透過區域網路進行傳染攻擊,因此一台電腦中毒就等於其他電腦也有受到威脅的可能性,現實中已經影響到金融,能源,醫療等行業,校園網用戶首當其衝,受害嚴重的危機管理問題。            在網站的伺服器上,同樣也會面臨這樣的問題,尤其是許多私人架設或小型的網站伺服器,由於伺服器通常只用來穩定網站空間,因此用於實際作業與更新的機會上相較一般電腦的機會來的低很多,甚至使用較舊版本的伺服器作業系統會直接停止更新,這部分就會造成網站暴露在一個危險的狀態下甚至危險程度會大於一般常用的電腦,所以不論是私人架設的伺服器還是小型網站伺服器,在更新與程式版本升級還是有必要性的定期維護。