文章專區

最新網頁設計文章

在作網頁設計時常常需要嵌入youtube影片,但一碰到RWD網頁時,影片就會遇上無法隨著螢幕縮放的問題!這是因為youtube供嵌入用的iframe原始碼已經是固定尺寸了,因此我們需要修改以讓影片能跟著RWD一同縮放。 步驟相當簡單: 1.首先在CSS列表中新增以下CSS .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0;left: 0; width: 100%; height: 100%;} padding-bottom: 56.25%為影片高度與寬度的比例16:9計算得來,9除以16=0.5625換算高度比0.5625=56.25% padding-top: 30px:用於修正的高度,可用25px或30px 2.在youtube提供的iframe原始碼加入<div class="video-container"></div> EX: <div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/9CjvlhJMkcc" frameborder="0" allowfullscreen></iframe></div>   影片實例: 可以縮放視窗看看實際效果唷! 以上,就可以使youtube影片100%自動縮放瞜!這是在RWD設計裡相當實用的基本技巧。
      PageSpeed(網站速度),面對廣大使用者的使用習慣與青睞性,眾家搜尋引擎越來越重視每個網站的實用內容與流暢性和讀取執行速度,隨著行動裝置的普及化,如今行動裝置瀏覽網站的頻率已經大幅超越傳統桌上型裝置,讓我們瞭解到大多數人在上網時都仰賴著手機或是平板等行動裝置,而在行動裝置上又受限於行動網路的頻寬與傳輸效率未能達到實體線路的穩定性,因此網站的執行讀取速度就成了搜尋引擎SEO重視的依據。         從大眾較常使用的搜尋引擎Google來觀察可以得知,Google針對網站優化SEO推出了許多實用的工具,其中就有針對網站執行速度做測試與建議的PageSpeed Tools工具,透過輸入網站的網址,我們可以經由測速工具來分析網站在面對使用者讀取執行時的友善性,分析方向一開始最大的類別就分成了行動版與電腦版的分類,由此我們可以得知,網站功能是否貼近行動裝置也是一項重大指標,而因應行動裝置瀏覽,網站使用RWD技術較偏向頁面設計技術,可以參考本站什麼是RWD (響應式網頁設計、回應式網頁設計)?文章,在這就不多加闡述。            回到側速工具測驗與建議的項目,其中包含有圖片最佳化、頁面傳送前的壓縮、減少伺服器回應時間、網站版面效果JavaScript與CSS和HTML技術壓縮等條件,在以上這些項目及未列出細項的檢測後,測速工具會針對還有改善空間及通過的檢核項目來告知我們如何改善與維持良好的連線品質。           在網際網路上其實不單只有Google有推出網頁測速工具,還有許多不同的測速工具,而眾多的側速工具開發的目的其實很單純,就是希望能回歸瞭解如何改善網站的執行讀取速度,進而提升使用者與搜尋引擎的青睞與信任,便是SEO的重要基礎之一。        
html提供許多特殊符號可使用,像是星星、金錢、箭頭.....等等,在作網頁設計時,這樣的話就不用切成圖片,而是能直接寫成html碼了! 而Mausr是個能直接透過手畫找到你想要的符號的搜尋器,十分便利。   1.Draw a symbol - Mausr:http://www.mausr.com/ 進入網頁後,左邊的框框內為繪製區,可以自由地繪出你需要的符號大致輪廓。   2.繪出圖案後網站會自動幫你搜尋類似的符號,其上會提供html碼,只要複製即可運用。   只要畫出大致形狀就會跳出相似圖形的搜尋結果。     除了用繪製區尋找外,還提供了符號列表可供查找。   Mausr辨識效果相當強大,對於網頁設計師來說是不可多得的好工具。  
 Google Tag Manager(標記管理工具),在剛接觸網站行銷或網頁流量控管的人員來說,常會搞不清楚Google Analytics(網站分析)與其的差異,本站先前介紹過"GA分析是什麼? (Google Analytics- Google分析)-看見網站績效",可以透過Google Analytics進行網站的流量統計、分析來瞭解網站的經營績效,而標記管理工具其實就是一個整合網站分析及其他統計功能程式碼的簡易管理介面。   Google在網頁上不僅提供了網站分析的功能,也包含了關鍵字廣告等其他能有效協助我們管理行銷網站的好產品,這些功能產品大多都需要將相關對應的程式代碼植入網站內才能正確的執行或追蹤資訊,當管理人員希望越能完整掌握網站資訊及增加經營績效時,就必須將越多的對應程式碼給植入網站,隨著程式碼的增加,網站被瀏覽器與使用者和搜尋引擎讀取的流量及資訊就顯得逐漸龐大與緩慢。     為了改善管理者不會因為使用了較多的行銷管理工具而造成網站讀取的負擔,Google推出了Tag Manager(標記管理工具),目的除了可以減少以往多次植入或植入錯誤不同程式碼的繁雜步驟,也提供了操作介面,讓我們能在方便快速的狀況下調整網站的行銷工具,最重要是能改善以往瀏覽和收錄頁面時需要的大量讀取多組程式代碼,改由讀取一組Tag Manager代碼便會自動支援帶入其他代碼的優化服務。   透過Google Tag Manager(標記管理工具)造福了管理者以往冗長的代碼植入動作,也能同時整合多項服務功能,減少行銷工具相容性的疑慮,更優化了網站程式讀取的流程,因此使用Google Tag Manager(標記管理工具)將是網站行銷管理的新趨勢。
以往網頁設計常見使用jpg、png、gif等圖片檔,但因為皆屬點陣圖模式,由於RWD(自適應網頁設計)可以隨著螢幕作放大縮小,所以若切成一般圖片格式易造成模糊失真的問題,而SVG會是不錯的解決方法。 SVG(Scalable Vector Graphics)是一種可縮放式向量圖形,是W3C所制定的開放性網路標準之一,此圖片格式能讓網頁設計師在網頁中以向量格式呈現圖片。可以在illusrator中畫好向量圖形,另存成SVG檔,運用方式就跟一般用jpg、png、gif等圖片檔一樣,但不同的是並不會因尺寸的改變而失真,日後欲修改時也可直接開啟檔案修改,相當方便,在網頁設計領域中,SVG的使用已越來越普及。   step.1:開啟製作的AI檔   step.2:另存新檔->SVG檔   step.3:保持預設選項不變,按「確定」   SVG檔在原始碼的寫法如下: 1.跟一般圖片寫法img一樣 <img src="001.svg" /> 2.直接用svg元素寫法 <svg width="800" height="800" version="1.1" xmlns=" http://www.w3.org/2000/svg " xlink:href="001.svg" ></svg> width、height:定義svg的寬高 version:指出此文件遵循的svg語言版本  xmlns:為SVG命名空間 xlink:指出SVG檔案路徑   另外,可直接用SVG標籤繪製圖形,以下介紹三個基本屬性。 圓形:circle 可設定圓心的座標(cx,cy)  r:半徑 fill:填滿色 stroke:線條顏色 線條寬度: stroke-width ex: <svg><circle cx="50" cy="50" r="40" fill="yellow" stroke="black" stroke-width="5"/></svg>   線條:line 從(x1,y1)到(x2,y2)的線條 ex: <svg><line x1="20" y1="20" x2="50" y2="50"/></svg> 矩形:rect 以(x,y)作為左上角的座標繪製 <svg><rect x="20" y="25" width="40" height="40"/></svg>   SVG除了可以先繪製圖形再置入,亦可直接寫原始碼繪製圖形,是網頁設計師可善加利用的工具!
 延續本站先前討論過淺談網址 HTTP 與 HTTPS 的差別 及 SSL/TLS與HTTPS的相關性和 SSL/TLS數位憑證該如選擇後,我們將可以正式為網站置入設定安全憑證囉,在設定SSL/TLS憑證時步驟較為繁瑣,本站將以較為主軸的步驟簡化來讓大家瞭解該往什麼樣的方向來操作。 我們瞭解了SSL/TLS憑證需要透過與具有公信力的憑證廠商(Certificate Authority)來核發後,首要我們需要先準備的是建立一個"憑證要求檔(Certificate Signing Request file,簡稱CSR檔)",這個憑證要求檔內容主要是需要填入關於您將要申請憑證的註冊資訊,一般主要為輸入需要SSL/TLS的網址及公司行號的名稱等相關資訊,而建立這個檔案便是要提供給憑證廠商對我們伺服器進行核對的一個驗證檔。   建立好CSR檔時,我們便可以開始購買選定好SSL/TLS憑證,在填寫資訊其中憑證廠商會需要您提供CSR檔進行驗證,在驗證無誤下,憑證廠商便會產生合法有效的憑證檔(CRT)給您,這當中廠商會給予"您伺服器的憑證"與"中繼憑證"和"根憑證"(如果使用的是較為知名廠商,根憑證都會預設內建在您的作業系統中,通常不用再安裝),將憑證根據廠商提供的路徑正確置入後,再驗證植入的正確性就可以確定是否安裝完全。 最後到SSL/TLS站台中選取"您伺服器的憑證",並將網址類型選擇為 https,確定即可將SSL/TLS憑證設定完成,開啟網站安全加密傳輸。以上文中及先前文章,本站主要希望提供大家能多瞭解HTTPS及網路連線安全加密的重要性及過程,希望使大家在網際網路暢遊的其中能多一份保障,以上較詳細的相關技術與其他需要服務的部分,歡迎大家透過連絡我們與本站來進行諮詢與提供服務。  
 nth-child是CSS新增的偽類選擇器(不寫在html裡,而是寫在CSS),標準的語法是:nth-child(n),括弧中的n可以是奇數「odd」,或是偶數「even」,也可以自訂數列應用。此功能能夠有效減少多餘的class與id,十分方便,應用上也非常彈性與廣泛。   1. :nth-child(odd)選取奇數 ex: .list_1 li:nth-child(odd){ background:#311D1E; color:#fff;}   設定只選取列表中的奇數項目。因此位於第一與第三列的001與003會被選取。   2. :nth-child(even)選取偶數 ex: .list_2 li:nth-child(even){ background:#4E5996; color:#fff;} 同理,even設定偶數,所以位於偶數列的項目會被選取。   3. :nth-child(n)選取特定的數字 ex: .list_4 li:nth-child(5){ background:#61AA72; color:#fff;} n數值設定為5,因此只選定第五項被選取。   4. :nth-child(an+b)自訂數列 裡面的「n」從0數起,a與b為自訂數值。 ex: .list_3 li:nth-child(2n+1){ background:#4CB0D4; color:#fff;} n的值從0算起,因此數列計算如下: 2X0+1=1 2X1+1=3 2X2+1=5 ......以此類推。   CSS3 的:nth-child(n)在網頁設計上十分實用,初學者可以多加應用看看。
 在 Google Chrome 瀏覽器中,網站如果在沒有安裝 SSL 數位憑證保護下,瀏覽器會強制在網址欄位中明確標示不安全的標記,延續本站先前討論過淺談網址 HTTP 與 HTTPS 的差別 及 SSL與HTTPS的相關性,在瞭解了HTTPS需要SSL憑證後,一般人將會遇到另一個疑問,那便是該如何取得SSL憑證?多樣性的SSL憑證該如何選擇? SSL憑證有如識別證一般,在資料開始加密傳輸前,伺服器透過「有效」的SSL憑證來與用戶端識別確認是安全的伺服器,SSL憑證主要透過伺服器站台來產生,而在業界有著眾多的憑證廠商又該如何選擇呢?以下提供幾點可以依循的方向。   1.SSL憑證又分為「有效」與「無效」的憑證,「有效」的憑證主要是透過憑證廠商(Certificate Authority)對申請人做身份的核對確認再給予簽發,其中可以瞭解有些憑證廠商對於核發憑證的條件較為寬鬆,較能輕易取得憑證,看似方便卻隱藏著有心人冒用身分取得憑證或架設釣魚網站的疑慮,反觀面對核發條件越為嚴苛、安全機制較高的廠商便越能降低憑證冒用的風險。   2.根據外國帳戶稅收遵從法FATCA其中條例,在電子交易資訊上需要有效及具國際公信憑證資料的憑證廠商進行加密,因此選擇憑證廠商可以根據符合國際公信力的廠商為優先,選擇可靠的廠商可以保障網站的公鑰和SSL憑證能有效確保使用者和伺服器之間傳輸的資訊,同時,當用使用者在瀏覽網站時可以瞭解網站所使用的SSL機制,也可能提高使用者的信任與使用意願。   3.許多憑證主打輕鬆經濟方案驗證快速,但給予憑證的時效性卻是較為短暫,在考慮網站長期的經營與維護之下,就必須要不斷地去延長憑證時效或是更換其他憑證廠商,其中就可能需要再耗費些時間去檢視憑證、續約或找尋其他憑證廠商及更換的問題。 最後,根據不同類型的網站會需要不同的安全憑證,所以在選購憑證時,可以根據網站的需求適時挑選安全性較高的憑證,如:提供金流、刷卡機制服務及商業性相關的網站。憑證雖然有價格上的差異,但網站就如同一家公司的門面與形象,因此選擇安心可靠的廠商,有助網站永續經營、品牌形象的提升,也能為您避免些不必要的安全疑慮。  
   HTML本身是一個網頁頁面的架構,是超文件標示語言(HyperText Markup Language,簡稱為HTML),它具有超文字(HyperText)、超連結(HyperLink)、超媒體(HyperMedia)的特性。  隨著網路環境的快速發展及行動裝置的出現,因此網站的結構也不斷的演進,Html5與html最大的差異在於寫法的改變,新增許多元素加強文章結構的明確性,例如以往版本的HTML4有 這樣的表示方式,主要是利用 區分文件各個部分,然而HTML5中,許多常用的功能有了自己的標籤,例如和標記,使插入聲音和影片變得更簡單,使用的語意標籤取代不具意義的 所構成的HTML文件,來協助我們做到更好的語義架構,讓開發者更容易閱讀,也更容易讓搜尋引擎能快速了解網頁的重點。     HTML4標籤 HTML5標籤 說明     位於網頁頁面頂部,放置網站的LOGO、大標題或主要資訊     放置網站的連結或選單     文章內容可以有很多個,用於章節或標題的段落區分     放置側邊攔     位於網頁頁面的底部,大多用於顯示著作權、作者或相關資訊等    
     針對HTTP與HTTPS的差異,本站先前討論過淺談網址 HTTP 與 HTTPS 的差別,隨著網路的發達,資訊技術越來越透明,HTTP的開放明文顯得在網際網路中,不再是這麼安全的傳送協定,知名企業網站及全球級大型網站Google、Facebook等皆採用HTTPS加密,作為預設連線方式,因此也針對在有使用者登入系統或或存取到機密敏感資料頁面等有建立會員、購物車、金流、刷卡機制服務的網站選擇使用HTTPS的傳送協定。          HTTPS網站傳輸安全協定,主要是由網景公司(Netscape)開發並內建於其瀏覽器中,之後廣泛發展於網際網路上,用於對資料進行壓縮傳輸及傳輸後解壓縮回正確資訊的操作。HTTPS是以安全為目的得HTTP通道,經由網站傳輸協定進行通訊和利用SSL/TLS憑證來加密封包,簡單來說就是HTTP的進階安全版,由HTTP下加入SSL/TLS 層作為安全基礎。          SSL/TLS  (安全通訊端層) 憑證是網頁伺服器和瀏覽器之間以加解密方式溝通的安全技術標準,透過憑證內的公開金鑰加密資料傳輸至伺服器端,伺服器端用私密金鑰解密來證明自己的身份,取得有效憑證後在網際網路上傳輸加密過的資料以達到資安的目的。          透過HTTP下加入SSL/TLS層作為安全基礎的HTTPS,是網頁伺服器和瀏覽器之間以加解密方式溝通的安全技術標準,通信任務內含網路瀏覽、電子信件、際網路傳真、即時訊息、VoIP和等等其它資料傳輸,這個溝通過程能有效確保了所有在伺服器與瀏覽器之間通過資料的私密性與完整性,而SSL是一個企業級標準,用來保護網站與客戶的線上交易資訊,所以為了使用SSL/TLS安全連結,一個網頁伺服器便需要一個具有公信力的有效的憑證。