文章專區

最新網頁設計文章

      一夕之間引起全球資訊恐慌的勒索病毒「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)沒什麼不同,但參照以下範例便可理解兩者的不同之處。 <ul>     <li>001</li>     <li>002</li>     <li>003</li>     <li>004</li> </ul> CSS分別設定: ul li:nth-of-type(3){ background: #E16F6F;} ul li:nth-child(3){ background: #E16F6F;} 結果兩者相同        但若在每個<li>之間加上同層級的<hr>時 <ul>     <li>001</li>     <hr>     <li>002</li>     <hr>     <li>003</li>     <hr>     <li>004</li> </ul>       :nth-of-type能如實選取到指定的第三項<li>,而:nth-child卻選取到了第二項,這是為甚麼呢?因為以範例來說,:nth-child是選取了ul裡的第三個子元素,所以同層級的<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為例,提供範例。      

ARTICLE

8

常用的CSS簡寫

在撰寫上透過css的簡寫可以讓文件變更小,更易讀,以下為幾項常用的CSS簡寫:   margin padding間距的設定 可縮寫成四個數字, 如:margin:10px 30px 20px 10px 填寫順序依序為上右下左,想成從上方順時針數下來就對了。 margin:10px 30px第一數為上下的值,第二數為左右的。 margin:10px表示四邊的值。   邊框border的設定 border: 1px #c00 solid 依序為 border-width邊框寬度、border-color邊框顏色、border-style邊框樣式   background背景設定 background:url(001.jpg) #000 center no-repeat 依序為background-image背景圖片、background-color背景顏色、background-position背景定位、background-repeat背景重複   font文字設定 font: oblique bold 30px 24px 新細明體 依序為font-style文字樣式、font-weight文字粗細、font-size文字大小 、line-height行距、font-family文字字型 透過css的簡寫可以讓文件變更小,更易讀。如果能多加利用的話,便可有效節省css的撰寫量唷。 
       在先前談到關於301轉址,除了可以使用單頁面上的永久轉址轉址及302暫時性轉址外,我們也可以適時的使用更進階的IIS URL rewrite來進行設定,談到IIS在發行了7.0版本後便加入了URL rewrite的多項功能,一般人一開始不熟悉時,面對多樣性功能強大的圖形化界面可能辦法這麼快熟悉全部功能,因此,IIS URL rewrite在這我們也只針對301轉址進行簡易的相關說明。          回歸程式上的開發,我們可以透過瞭解web.config的設定檔來簡單的進行控制修改IIS上的設定,它可以針對單一網站或單一網路程式來儲存程式面上的修改,也可以輕鬆的根據修改及上傳web.config檔來設定改變網站程式的設定,不需要再依靠IIS操作介面繁複的設定或是重新啟動IIS,而且網站內所有網頁,子層都會按照web.config的設定來執行運作,因此在這邊我們也舉出範例讓大家來瞭解參考如何使用程式化快速的設定IIS URL rewrite,請參考以下。     <configuration>     <system.webServer>         <rewrite>             <rules>                 <rule name="Canonical Host Name" stopProcessing="true">                   <match url="(.*)" />                   <conditions>                     <add input="{HTTP_HOST}" pattern="^yuordomain\.com$" />                   </conditions>                   <action type="Redirect" url="http://www.yuordomain.com/{R:1}" redirectType="Permanent" />                 </rule>              </rules>         </rewrite>     </system.webServer> </configuration>   我們將原先http://yuordomain.com/導向至http://www.yuordomain.com/  
 上回介紹了flex-container(容器)可使用的屬性,這次來介紹flex-items(子項目)可操作的屬性。 一樣先來張flexbox盒子模型圖複習一下(來源:MDN)   關於flex-items可操作的屬性,有以下幾項: order可以決定項目的排列順序。   例:下面兩圖僅差在是否加入了order,若未加order指定順序的話會如右圖所示。左圖則是已加入order。   flex-grow可設定項目們在容器內的比例。 例:每個項目在容器內的比例是2:1:3:2   flex-shrink與flex-grow相反,當項目將容器擠爆時,flex-shrink會把項目們縮小設定的比例。會根據flex-shrink設定的值來決定縮小的倍數。   下圖的縮小倍數比:1:2:3:4:5   flex-basis項目的基本大小,有點類似min-width,算是代替width用的,優先權比width高,但若兩者其中之一為auto,會以沒設auto的為優先。 關於flex-grow、flex-shrink、flex-basis此三項屬性,這邊有更詳細的解釋     flex由flex-grow、flex-shrink、flex-basis三個屬性組成,例:.flex{flex:2 1 300px;}   align-self可以指定某個項目的行為,會覆蓋容器align-items的設定。 auto:預設值,繼承容器的align-items屬性,若沒有則為stretch flex-start:對齊容器最上面的cross start flex-end:對齊容器最下面的cross end center:垂直置中 stretch:將flex項目撐開至容器的高度 baseline:以所有flex項目的基線作為對齊標準 例:下圖本來將容器設align-items: flex-start(靠齊最上方)。然而在第三項與第四項分別設了align-self: center(垂直置中)與align-self: flex-end(靠齊最下方),覆蓋了容器align-items: flex-start的設定。