網頁設計的專業首選

網頁設計師在寫CSS時，是不是有時會發生明明已寫好屬性設定，但卻無法套用進頁面的情形呢？遇到這情況，不妨檢查看看CSS優先權的設定唷！CSS提供許多選擇器類型，當使用不同的選擇器時，套用樣式的優先權也會不同。 這邊整理優先順序的幾個原則，讓你在寫CSS時可以更容易掌握唷！   越左邊權限越高 元素內的樣式>頁面內的樣式>外部載入 元素內的樣式 例子：   頁面內的樣式 例子：   外部載入 例子： 以@import方式載入 在頁面內以 link 方式載入   後設定>前設定 最後設定的樣式將蓋過之前設定的樣式 例子：   最後會套用的屬性是 width:250px; height:50px; background:#fff;   Id>class 由於 id 具有不可重複性，而class則是可重複的，所以 id 在層級上大於 class， 如果一個元素同時有 id 跟 class 兩種屬性，且互有所衝突時，id 優先權大於 class。   !important 為最高優先 !important 的作用為強制提高優先權，照理說越後面設定的越優先，但若使用了 !important，會使得最前面的設定成了最優先，使用!important的 CSS 樣式幾乎等於無敵。 當出現二個!important時，優先權就是依先後順序，與其它的選擇器的原理相同，因此非必要的話，最好盡量少用!important。  

   在本站先前介紹網域名稱的建立與建議後，此次將針對 子網域(Subdomain) 又稱 次網域 進行說明，在先前的文章中解說過，網域在建立與使用上可能影響著我們網站長遠的發展與經營，因此使用單一網址，避免多個不同網址卻重複同樣網站的內容，較不會影響搜尋引擎的收錄判斷及網站關注評分，但若面臨到一個機關行號資訊較為多元(如：形象、購物、部門分別等)或需要特殊使用需求(如：限時活動網站相關等)時，該如何避免重新申請網址及網站過度分化的困擾呢? 便可以使用"子網域"。     子網域主要是利用原先架設時所申請的"網址名稱"進行延伸，從本站先前介紹過網域名稱的分別與選擇中可以瞭解，網域中每個.分號分開的訊息代表著不同的屬性或域名，本次將說明的子網域就是要使用網址名稱前的域名進行變更產生，由本站網址為例：https://www.webdesigns.com.tw 其中 www 子網域代表的是常見的"全球資訊網路"意思，由於每一個主網域或子網域都是獨立的，可對應至一個IP，當然也可以對應至相同IP(相同主機)，因此，若要增加新的子網域便可根據對應的IP進行將要使用的子網域進行命名設定，如以下範例：   假設本站將要加子網域可以設定為   設產品購物或活動頁面 https://shopping.webdesigns.com.tw    活動頁面 https://activity.webdesigns.com.tw     瞭解完子網域後，若您對設定還有疑問的部分，歡迎參考子網域設定│DNS 指向 IP 與 指向伺服器

展開收合效果是常見的網頁技巧，不僅提高版面布局的美觀性，也能有效縮短文章的長度， 讓我們來看看如何使用jQuery達到這效果吧！ HTML CSS JS   範例：https://codepen.io/bok770/pen/qXZyPN See the Pen <a href='https://codepen.io/bok770/pen/qXZyPN/' _fcksavedurl='https://codepen.io/bok770/pen/qXZyPN/'>qXZyPN</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a></div>

   在網域擁有權確認完成後，通常有申請企業信箱的公司行號會同時開啟郵件伺服器管理，一般會根據郵件伺服器的服務商作為DNS的設定，若使用申請網域時所贈送的郵件位置通常不需刻意設置，但也有許多不同企業會根據使用效能與空間容量來額外申請其他郵件伺服器，此時就需要透過設定的MX紀錄來做為指向郵件伺服器，MX紀錄主要是用來將域名指向處理郵件的伺服器，要將域名連到郵件伺服器的設定，透過 MX 紀錄將負責郵件交換的工作指派給郵件服務提供商。   範例   A 紀錄 - mail ； 127.0.0.1   MX 紀錄 - mail.test.com.tw.；  (10）       在MX設定中，會先指定 A 紀錄，透過固定的IP，來對應郵件伺服器，有了可使用的固定ID後，由 MX 紀錄 來指定 mail.test.com.tw ；其中(10)代表的是 "MX參數"，由於有時伺服器並不是只有單一一台時，將會參考參數中數字越小的伺服器作為優先服務。  

mmenu此套件位於側欄，可應用於RWD響應式網頁設計，選單以點擊滑動來作展開，也包括了階層式選單，相當方便套用。 首先到官網下載檔案解壓縮http://mmenu.frebsite.nl/ 接著到demo資料夾，找其中的一個範例來做，這裡找default.html來做示範   所需的css有jquery.mmenu.all.css js則需要jquery.mmenu.min.all.js  jquery.min.js可以直接從資料夾取得。 並加上   Html 首先建立個div    在page裡加入   在header裡加入   以及選單列表   範例： See the Pen &lt;a href='https://codepen.io/bok770/pen/mMPjgL/' _fcksavedurl='https://codepen.io/bok770/pen/mMPjgL/' _fcksavedurl='https://codepen.io/bok770/pen/mMPjgL/'&gt;mMPjgL&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.

     DNS 主要提供了「網域名稱」與「IP位址」對應的查詢連結，在先前本站介紹了DNS基本資訊設定與企業信箱申請開通後，本次要介紹的是企業信箱與DNS中較為相關聯進階的「SPF 紀錄設定」，在網站正式上線時，多數企業會連同企業信箱一同設定，透過SPF紀錄能有效的排除、阻擋他人冒用網域寄送垃圾信件，也能降低企業人員與其他通信用戶在聯絡被誤判為垃圾信件的可能性，提升通信用戶在與企業聯繫時的信賴成度。       一般來說，會將 SPF 規則 撰寫在 TXT 紀錄的數值欄位中，主要的功能是透過信件中寄件者網域資料，收件端會主動去向寄信端所屬的DNS伺服器核對其SPF紀錄，透過這樣的紀錄偵測發送者是否為盜用或不正確的來源，避免遭人冒用網域名稱寄信，作為防止垃圾郵件的生成。       TXT SPF 記錄在撰寫時，看似簡短普通，但其中有包含著標準規範的規則，已下列例子中：   "v=spf1 a +all"   "v=spf1 ptr:webdesigns.com -all"   "v=spf1 mx mx:example.domain.com ?all"   "v=spf1 a/24 a:example.webdesigns.com/24 -all"   "v=spf1 include:example.webdesigns.com ~all"   "v=spf1 ip4：127.0.0.1  ip4:127.0.0.2  -all"     範例中，v=spf1 是表示 spf 所使用的版本。   其中 a、mx、ptr、include、ip4 等等，表示比對 DNS 記錄中的各項紀錄做為核對參考。   all配合四種不同的符號代表不同的用意：    +：預設，可以根據其他加入的規則對郵件通行；標示為 Pass 。    -：除了規則中所列的寄件者以外，不允許其他來自其他人的郵件；標示為 Hard Fail。    ~：檢查是否為記錄中來源正確的信件，如果不是，已註記方式允許電子郵件但標示為 Soft Fail。    ?：代表可能還有其他網域，收件主機還是會接收該信件;標示為 Neutral 。      

平時我們在設計網頁時，常需要假圖來做預覽圖用。 這裡有個很好用的網站lorempixel ( http://lorempixel.com/ )，只要填入所需圖片的各項設定，例如像素尺寸，選擇橫向或直向，黑白或彩色、主題(EX：食物、動物、人物等等)，如此就可以隨機產生網路假圖囉，而且圖片都相當精美。   可依圖片需求填入設定   如此就可產生符合尺寸需求又精美的圖片囉！    

 一般人在瞭解DNS是什麼之後，會比較能懂得DNS需要工作的方向，是說明透過網址IP位置與伺服器的綁訂連結，網站的內容與相關資訊才能在網際網路中傳遞、散播，但在實際上需要設定DNS時，將要面臨的是專業的設定參數紀錄，DNS中有著看似基本簡單的參數資訊，但其各自所包含的用意不同，關係著網站與信箱在網際網路中是否能正常運作的重要設定，因此清楚瞭解DNS基本資訊就是一項相對專業與重要得的步驟。     本站將在此簡單介紹DNS常見基本紀錄參數與其代表用意：   A紀錄 用於將 IP 位址與主機名稱連接對應功能(適合用IPv4)   AAAA 紀錄 提供IPv6或是不符合 A 紀錄標準格式的 IP 位址   CNAME 記錄 用途通常是將子網域 (如：WWW、mail、FTP) 對應至代管子網域內容的主機或網域名稱(不使用IP設定)。   MX 記錄 指定郵件代理伺服器，確定電郵會傳送到正確位置   SPF 紀錄 防止過濾不必要垃圾郵件堆積信箱   TXT 紀錄 提供有關主機的額外資訊，如文字紀錄訊息，或提供伺服器驗證急電子郵件防治等技術資訊   NS 紀錄 宣告擁有及使用中伺服器名稱與資料訊   LOC 紀錄 將網域名稱指定在特定地理位置。   SRV 紀錄 尋找託管特定服務的電腦      

之前介紹了:nth-child(n)和:nth-of-type(n)這兩項常見的選擇器，這次來介紹:not這個可能比較少見的選擇器。 not跟前兩者其實很像，只是選取的情況是「反過來」的，排除了指定的元素不被選取，也就是說，除了指定的元素以外的其他元素都會被選取。   寫法： div:not(:first-child){ color:red; }  div除了第一個以外其他都會變紅色 p:not(:nth-child(3n)){ display:none }  p除了3的倍數的以外其他皆不會顯示   泛用性很廣，比如要排div順序為由左到右時，可能每個div會設個margin-right:10px的間隔，而最後一個會設:last-child { margin-right: 0 } 然而你卻可以改用not來選取其他的元素，設成div:not(:last-child){ margin:10px }即可。 例子： CSS . div-list div:not(:last-child){ margin-right:10px;} 若你要設個導覽列的話，在每個標題右邊設框線(border-right)，但是最後一個不用，可以這樣設：   CSS .not-list li:not(:last-child){ border-right:1px solid #fff;} 善加使用各項選擇器，對於 class選取元素的狀況，可以更靈活地應用掌握唷。  

    DNS是什麼?由本站先前介紹：網域名稱的分別與選擇、網域名稱的建立與建議後，相信大家更能瞭解申請專屬網站使用的正式網址名稱的用意，在申請完正式使用網址後，需要透過網址IP位置與伺服器的綁訂連結，才能讓網站的內容與相關資訊能在網際網路中散播，讓其他使用者尋找與查看。因此DNS就是網域名稱系統，用於控制網域名稱和網站內容及電郵設定等，使訪客在透過網域名稱進入網站時，能由DNS紀錄控制到達設定的伺服器觀看網站的內容。       DNS 網域名稱系統，目前是以IPv4或IPv6來做為定址的方式，在廣大網際網路的世界中，網域名稱系統透過全球連線伺服器不斷的在進行擴散式的同步更新連線資訊，所以在設定網站域名與伺服器對應位置時，常會看見設定後有些提示告知DNS紀錄雖然已設定完成，但必須要等待24~48小時才能有辦法生效，就是透過擴散的方式將設定資訊同步更新到全球。       DNS網域名稱系統，一般可以選擇自行管理與網址註冊商作為代管，其中談到需要管理的部分就是DNS紀錄設定，DNS紀錄的設定可能會令大多數人有些困惑。因為它是由多種元件，如：A紀錄、CNAME、MX等元件所組成的。其代表的功能和記錄有一定的規則，設定後也需要 時間的生效，可能影響網站的營運或郵件通信的收發，所以建議使用代管或交由專業的人員進行操作設定。