網頁設計的專業首選

CSS的背景屬性background-position，主要用來定位背景圖片的位置。 background-position的數值分成三種表示方式：關鍵字、像素、百分比 關鍵字：background-position:top left;　值有top、bottom、left、right、center 像素：background-position:0px 0px; 百分比：background-position:0% 0%; 前兩者指定的是背景圖片左上角相對於容器左上角的位置。（百分比的情況較特殊，後面會解釋。）   EX: background-position: 10px 20px; 第一個數值(10px)指的是水平位置；第二個數值(20px)指的是垂直位置 也就是說從左上角算起，將背景圖往右移10px、往下移20px   background-position: top center; 背景圖設定在從容器左上角算起最上方並中間的位置   百分比表示： background-position: 背景圖本身(x% y%)的那個點會與容器(x% y%)的那個點重合 例： background-position: 20% 40%; 背景圖本身(20% 40%)的那個點會與容器(20% 40%)的那個點重合   若以px或%表示時，數值可以用負的。 如: background-position: -10px -30px; 從左上角算起，背景圖會往左移10px、往上移30px 註:因為背景圖片只能在容器內顯示，所以超出的部分會被切掉。   1. 數值與百分比是可以一起用的。(如:background-position:15px 60%;) 2. 數值/百分比與關鍵字是無法混用的。(如:background-position:center 20%;) 3. 若只輸入一個數值，會隨數值改變的只有水平位置。

     根據資策會及許多具有公信力的網路平台、廣告公司等，都發表了關於行動裝置在網路中實際測量所佔有流量比例逐年攀升的相關文獻，在眾多數據下的舉證中，我們能明白，使用行動裝置漸漸地已經占據了我們每日生活的一部分，甚至超越了看電視、使用傳統電腦的2至3倍時間。       從使用習慣和數據統計上的改變可以瞭解到，現今人們人手一支的智慧型裝置能隨身、快速、方便的在網路上進行即時通訊、社群網站服務、收發電子郵件、地圖導航、行動搜尋、訂票、遊戲暢遊等等其他功能，其中了也包含了網站的搜尋與瀏覽，先前本站說明了許多關於網頁與智慧裝置配合的"響應式網頁設計(RWD)技術"，而本技術便是因應行動裝置的網路使用量超越了傳統桌上型電腦時我們該注意的進步。       經由多方的數據下，我們其實可以清楚的瞭解到行動裝置已經取代傳統桌上型電腦大部分的流量，因此傳統網頁將面臨的考驗便是行動裝置的趨勢，會由使用者、搜尋引擎等使用條件因素開啟新的挑戰。       面對這項全新的挑戰與趨勢，您所設想建置的網站，甚至您目前已經擁有的網站是否能具備了這項優勢呢?這是所有網站擁有者該面臨的問題。關於設計一個具有競爭力符合趨勢的網站或是想闊斧改造傳統頁面都歡迎您與本站諮詢，本站擁有許多創新網站的開發，也服務過許多傳統網站改造，是您值得信賴的平台。    

在作網頁設計時常常需要嵌入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原始碼加入 EX:   影片實例： 可以縮放視窗看看實際效果唷！ 以上，就可以使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 與 HTTPS 的相關性和 SSL 數位憑證該如選擇後，我們將可以正式為網站置入設定安全憑證囉，在設定 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.許多憑證主打輕鬆經濟方案驗證快速，但給予憑證的時效性卻是較為短暫，在考慮網站長期的經營與維護之下，就必須要不斷地去延長憑證時效或是更換其他憑證廠商，其中就可能需要再耗費些時間去檢視憑證、續約或找尋其他憑證廠商及更換的問題。 最後，根據不同類型的網站會需要不同的安全憑證，所以在選購憑證時，可以根據網站的需求適時挑選安全性較高的憑證，如：提供金流、刷卡機制服務及商業性相關的網站。憑證雖然有價格上的差異，但網站就如同一家公司的門面與形象，因此選擇安心可靠的廠商，有助網站永續經營、品牌形象的提升，也能為您避免些不必要的安全疑慮。