文章專區

最新網頁設計文章

Sublime Text 3是相當好用的文字編輯器,有許多方便的套件可以安裝,增進開發效率。 首先到官網下載安裝 http://www.sublimetext.com/3   安裝套件: 開啟Sublime Text 3,從上面主選單的view>show console(或是按快捷鍵ctrl+ˋ) 複製貼上出現的指令碼到主控台命令列中(或是直接到https://packagecontrol.io/installation#st3複製文字內容),然後直接按下enter執行,便可安裝完成。 右邊為整個檔案的縮圖,可以點擊並快速跳到欲修改的部分。   Sublime Text 3預設為英文介面,若不擅長英文也可改成中文,從上方選單: Help>Language>Traditional Chinese(繁體中文)   接著便可以從Preferences > Package Control來啟用 Package Control此套件管理員,許多套件都必須透過它來安裝唷! 快捷鍵:ctrl+shift+p然後輸入install按enter   再來便可以安裝一些套件了! 每個套件都是如上步驟:先按ctrl+shift+p ->輸入install按enter,因此ctrl+shift+p是滿重要的快捷鍵唷!若要移除套件,輸入remove即可。       以上便是Sublime Text 3的安裝入門,下一次我們再來介紹Sublime Text 3推薦安裝的套件!
   許多公司行號在架設專屬的網站時首要會遇到的便是要申請屬於自己專屬的網域名稱,網域名稱代表著網頁註冊核發的網址,如字面上意思便是網頁的地址,在沒有網址的情況下網站是無法讓人尋找到的,因此申請一個正式的網域名稱是每個網站必需的動作,這個看似簡單的動作其實背後帶來的影響,足以影響網站的長期發展與排名趨勢。      從網址的欄位中,常會看見許多或長或短、形式不一的各種網址,其中還可能包含著網站的資料參數和架構與規劃,在這我們將單純針對網站的正式註冊網址來談論,若有網址內參數與架構上的問題,也歡迎另外由連絡我們做洽詢,回到我們將要談論的正式註冊網址來說,大家常會聽到網址、網域,其實兩者看似都指的是網站位址,但網域是將網址內的區別作為分隔的定義,如本站網址為:www.webdesigns.com.tw 其中每個點號做區隔的就是不同的網域,就如同我們房屋地址的鄉、鎮、市一般,因此網域也影響著網站在網際網路上的規模,若使用國際網域,較能讓世界各國的人所看見,使用的是國別地區性的網域,較能針對單一目標國家進行服務。       雖然網域的層級關係著網址的規模,但除了政府機關或教育機構等有保留規模發展的必要性之外,越高的層級也不見得適合每個網站,因此如何選擇網域及建立網址將影響著我們網站長遠的發展與經營,以下我們提供幾項在申請網址前可以做為參考的注意事項:   1.使用簡短且容易記憶的網址名稱   2.可以由行號名稱或品牌進行命名   3.根據將服務的規模及地區選擇適合的網域層級   4.網址單一,避免多個不同網址重複同樣網站內容   5.避免更換網址,網址的變動及轉換,可能影響用戶查詢及內容的落差  
.demo-2:before,.demo-2 after{position:absolute;}.demo-2 a:hover:before,.demo-2 a:hover:after{color:#F48627;}.demo-2 a:hover:after{right:-20px;content:"]";}.demo-2 a:hover:before{content:"[";left:-20px;} before和after是偽元素,顧名思義就是元素的「前」與「後」,可以在指定元素的前後插入其他內容。 範例:       加入before和after後 CSS .demo-1:before{ content:"一化科技-"; color:#257DB4; font-size:28px;} .demo-1:after{ content:"的專業首選";color:#DF5D22;}   「content」為before與 after必須設置的屬性,意思是插入的「內容」,可以是圖片、文字等等,若未填此屬性,偽元素將不會發生任何作用。 例:content:url ( "img/logo.png" ) 例:content:"一化科技" 若不需要內容的話,可以寫成content:""   以下我們來介紹幾項應用範例:   1.清除浮動 常常清除浮動是設個div{clear:both},但如此一來便會多個無意義的空白元素,我們可以利用after來清浮動。 例: .demo-3{float:left;} .demo-3:after{ content:""; clear:both; display:none; width:0;}   2.配合attr使用 attr是取得選取元素的屬性,例如attr(href)是取得href屬性 以下例子是取得a的title屬性: a::before{content:attr(title)} 效果相當於     3.特效 可以做出在鼠標靠近時文字增加外框的特效   例: E-Work   Html  CSS .demo-2:before, .demo-2 after{ position:absolute;} .demo-2 a:hover:before, .demo-2 a:hover:after{color:#F48627;} .demo-2 a:hover:after{ right:-20px; content:"]";} .demo-2 a:hover:before{ content:"[";left:-20px;}   製作陰影        可以運用偽元素、box-shadow以及z-index:-1來做兩邊陰影。 範例: Html   CSS .box{ width:300px; height:200px;         background:#A7C7D3;         position:relative;         box-shadow:0 0 3px rgba(0, 0, 0, 0.2); } .box:before, .box:after{ width:50%;                                       background:#000;                                       z-index:-1;                                       position: absolute; top:10px; bottom:15px; left:10px;                                       content:"";                                       box-shadow:0 15px 10px rgba(0, 0, 0, 0.5);                                                     -webkit-transform: rotate(-3deg);                                      -moz-transform:rotate(-3deg);                                      -o-transform:rotate(-3deg);                                      -ms-transform:rotate(-3deg);                                      transform: rotate(-3deg);} .box:after{ right:10px; left:auto;                  -webkit-transform:rotate(3deg);                  -moz-transform:rotate(3deg);                  -o-transform:rotate(3deg);                  -ms-transform:rotate(3deg);                  transform: rotate(3deg);                 }   before和after的瀏覽器兼容性相當好,除了IE6 IE7以外不用加上前綴。且可以簡化網頁的html標籤和class數量。
    在網站架設時,大家通常比較瞭解與注意網站的設計跟製作,相對在存放網站的伺服器和空間部份反而較為陌生,加上現今資訊中大家常聽見的雲端服務,也常讓人有著無限儲存空間與執行能力絕對優勢的遐想錯覺,而網站空間的應用上,其實有虛擬主機與雲端主機的分別與選項,一般人可能會將虛擬主機和雲端主機混為一談,認為其兩項是相同的物件,但其實不然。       雖然兩種主機都能提供網站存放與維運的服務,但在這兩種主機所提供的權限和功能及費用部分上有較為明顯的不同,從大眾常聽見卻未能真實瞭解的雲端主機說起,雲端主機在提供的服務中有著較高系統控制權限,也有專屬的處理效能、記憶體,硬體空間也可以依據需求做增減,可提供管理者做伺服器的規劃,但費用部分有一定門檻也可以依據需求做提升調整,較適合有專門管理MIS人員之中型、有規模企業做應用。虛擬主機提供的系統權限相較雲端主機提供的權限為低,但主要提供的管理功能較貼近單純的網站管理,儲存空間與記憶體和效能部份為共享制,所以費用上較為實惠,適合中小型企業或無MIS人員管理公司行號做應用。      瞭解了兩種主機雖然都能夠維運網站後,可以根據網站的規模與需求進行評估選擇,大部分網站其實架構清楚簡單可以斟酌使用虛擬主機,價格較為實惠,而有規劃且規模較大的中型網站可以參考雲端主機甚至提高需求效能,達到網站長期的穩定與成長,若在評估網站規模的依據上較為不清楚,歡迎參考本公司聯絡我們進行洽詢與評估。
我們常常在修改完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、注意趨勢上相關安全議題,及早防範