網頁設計的專業首選

預設的div區塊為方形，CSS的border-radius屬性可以幫div添加圓角的效果， 設定值為圓角的半徑值，例如：border-radius:5px 意思為圓角半徑為5px 我們可以依據自身需求為div的四個邊分別設定不同數值， 四個數值對應的方向為 border-radius:  左上 右上 右下 左下 範例： See the Pen xQJbqB by Ya (@bok770) on CodePen.   以上範例僅設了兩個圓角10px，分別為右下角和左下角，其他兩邊設成0，所以會是直角。   若只設一個數值，則全部的角皆會設成該值 範例： See the Pen ZmjYpo by Ya (@bok770) on CodePen.     若要設計圓形可以設border-radius: 99em 範例： See the Pen KrBwNy by Ya (@bok770) on CodePen.    

  在完成"IIS安裝│建置伺服器"的步驟後，我們將可以開始建立網頁站台，透過站台的開設，將網頁內容上架至網際網路。   我們可以在IIS管理員中，點擊右鍵選擇左方連線資訊管理欄位當中的「 站台」功能來新增網站。   在新增網站的欄位中，我們可以依序輸入：站台名稱、網站頁面存放的實體路徑資料夾、連接埠號(預設都是80，可以根據後續新增網站延伸ex:8001(1至655的數字))、主機名稱(網址名稱)   設定完後就可以看見剛剛在「站台」資訊下看見我們所新增的網頁站台   透過IIS管理員中右邊"瀏覽網站的選項"我們可以直接驗證網站是不是架設成功。     備註：如網站還處於測試階段，新增站台資訊中的"主機名稱(網址名稱)"欄位可以先不要填寫，網站一樣能用localhost/指定IP，搭配連接埠號來執行查看，Ex：http://localhost:8001    

在網頁設計上，icon設計與應用是相當常見的， 而使用上除了將icon存成圖片以外，還可以將之作成ICON Font。   那麼到底什麼是ICON Font呢? ICON Font是指將繪製好的向量圖檔轉存為文字檔， 並以css設定成字型來取代原有的圖片物件，在使用上只需輸入該icon對應的代碼或class， 就能夠輕鬆地產生一個小icon。     ICON Font的優缺點如下： 優點： 1.將小圖示(icon)轉為字體後，可減少原本輸出成圖片的檔案大小，降低圖片的使用率。 2.可透過css設定文字大小和文字顏色、陰影來達成效果。 3.修改時只需透過css修改樣式即可，不需再重複做修改圖片的工作。 4.因為是向量文字，相對在放大縮小時，解析度不受影響。   缺點： 1.由於文字形式只能設成單色，因此icon只能為單色或為css3的漸變色。 2.需借助專業的工具生成文字檔，製作方法可參考IcoMoon－將icon轉成Font的平台   綜合以上優缺點，使用ICON Font，不論是在檔案大小或修改的方便性來說，還是略佔優勢， 除了可自行設計以外，也可利用網路搜尋到不少免費的ICON Font資源，讓icon應用上更省力。   那麼該從哪裡下載免費的ICON Font呢？ 除了上述的IcoMoon以外，這裡提供幾個主要的平台 Font Awesome：可參考Font-Awesome－簡單又好用的icon素材網 ，只要一行字即可直接使用！ Fontello WE LOVE ICON FONTS 其實這些網站的ICON Font使用方式都差不多，首先都需先載入他們網站所提供的css， 然後輸入你要使用的icon所對應的代碼即可。   隨著扁平化設計逐漸普及，ICON Font在網頁設計上越來越常見， 而豐富的網路資源也能夠提高網站開發的速度，提升工作效率，不妨多加使用。  

  在網站架設的步驟中，建置伺服器是一項較為基礎的應用技術，雖然網站伺服器有許多不同種的系統環境，但從在最普遍的微軟(Microsoft)Windows 環境當中，安裝開啟「IIS管理員工具」進行設定後，就能夠使大眾一般文書作業電腦瞬間成為站台伺服器，並存放運行網頁內容。   在 Windows 10 環境當中，透過安裝IIS管理員服務並進行幾項簡單的設定就能將電腦轉變為網站伺服器。   由控制台當中選取：程式集   再選擇：開啟或關閉windows功能   並找到Internet Information ServicesàWorld Wide Web服務à應用程式開發功能à選擇(ASP、ASP.NET 3.5、ASP.NET 4.7)選項   經過開啟功能，我們再回到控制台進入"系統及安全性"部分   進入"系統管理工具"   就能看見Internet Information Services (IIS) 管理員   開啟後就能進入(IIS) 管理員 功能介面   也可以在瀏覽器當中輸入：http://localhost/ 或是 http://127.0.0.1/ 就能看到站台伺服器成功架設的歡迎畫面  

 HTML button按鈕的應用相當廣泛， 設定值有以下： Type：按鈕的類型，有 button（單純按鈕）、reset（清空表單）、submit（送出表單） value：就是按鈕的値 name：按鈕的名稱 <input type="button" value="按鈕值" name="按鈕名稱" style="按鈕樣式"> 範例： See the Pen gQbbWR by Ya (@bok770) on CodePen.   樣式可以透過CSS做調整，按鈕如下   若要消除預設樣式，CSS可以設定border:0 (去除邊框) 和background-color:none (去除背景)，或是將這兩個屬性另外設CSS。 範例： See the Pen vQEEjm by Ya (@bok770) on CodePen.    接下來便可以自由套用CSS設計按鈕，也可以活用:hover讓鼠標接觸按鈕時會有不同的樣式變化。 範例： See the Pen wQBBEX by Ya (@bok770) on CodePen.  

在網站的搜尋優化當中，關鍵字是扮演著舉足輕重的一個重要角色，先前介紹過"初識熱門網站搜尋關鍵字"是希望讓大家都能初步瞭解關鍵字與網站的相互關係，從大眾主要使用的 Google搜尋引擎也推出了"Google Trends熱門關鍵字工具"來幫助站台們優化的情況可以明白，關鍵字的主要應用對搜尋引擎的收錄推薦有很大的引響，但面對眾多站台產業日新月異、彼此競爭的情況下，關鍵字的抉擇與設立，也成了網站優化的重點，因此本次將分享更多應用、分析層面的熱門關鍵字分析工具。   除了 Google搜尋引擎本身推出的Google Trends熱門關鍵字工具之外，坊間也有許多探討不同層面關鍵字的分析推薦應用工具，以下分享兩種免費的析推薦應用工具。     Keyword Tool 在關鍵字工具當中，這項工具主要依照您所輸入的詞彙進行相關分析，並推薦出相似且熱門的其他熱門關鍵字進行設定應用，但由於多數推薦工具皆需要付費，所以本款工具在不註冊會員的情況下，只提供相似熱門關鍵字的參考，較適合對產業關鍵字較沒頭緒的應用參考。     Term Explorer 相較前項熱門關鍵字工具，本項所以提供的功能較為全面，在註冊完會員後，可以在免費應用1千個關鍵字內的服務。 當中包含了：相似熱門關鍵字的列表、單一關鍵字的應用評比分析、指定網址的連結與關鍵字等數量資訊分析。 相較於許多工具來說，分析的層面與資訊更為完整。  

無論是在HTML、JavaScript等程式語言都有註解可以使用，當然在CSS也不例外， 使用註解可以清楚標示該行CSS所代表的意義， 或是將暫時不需要，但之後可能會用到的CSS先註解掉， 視設計師需求作使用，在專案管理上會更方便。 分成單行與多行寫法：   單行CSS註解的寫法 使用的是兩條斜線//，在//之後的文字皆為註解，不可換行     多行CSS註解的寫法 多行註解是用/* 和 */ 將註解的文字包起來，可以一次將多行的CSS註解掉。  

 先前我們說明了"初識熱門關鍵字"的重要性，透過熱門關鍵字，我們能夠瞭解大眾使用者的搜尋習慣，如果網站的各項優化層面都有了一定提升，但關鍵字的設定應用卻是與使用者習慣背道而馳的話，那網站的排名情況還是有可能會不盡理想，因此，我們除了透過先前介紹過的搜尋欄位熱門關鍵字推薦之外，本次將分享在 Google 工具當中，也有項探索工具 Google Trends 能夠協助我們瞭解更多層面的熱門搜尋主題。     Google Trends 當中的熱門關鍵字是由 Google搜尋引擎，全球眾多使用者搜尋習慣所累積統計出來的熱門趨勢應用。      Google Trends 當中提供了 4大項目的主題資訊。     探索主題當中，我們可以使用"想要瞭解的關鍵字"來追蹤過去時間中，使用者對我們想瞭解的關鍵字搜尋熱門度。     搜尋趨勢主題，主要提供"即時性"的搜尋趨勢。     熱搜排行榜主題，根據地區及過去年份的搜尋情況排名出:快速竄升關鍵字、快速竄升議題、快速竄升人物等資訊。   透過以上功能，我們可以更全面性的瞭解使用者的習慣，進而優化網站關鍵字的項目。

 CSS的text-transform屬性可用來控制文字字母的大小寫，僅適用於英文字母， 不管你原本寫的文字是大寫還是小寫，皆可透過text-transform做設定， 可設定為全部大寫、全部小寫或只有第一個字母大寫。   設定值如下： text-transform:uppercase　所有字母皆為大寫 text-transform:lowercase　所有字母皆為小寫 text-transform:capitalize　第一個字母大寫，其他字母小寫   範例： See the Pen YJrVgb by Ya (@bok770) on CodePen.

 初識熱門網站搜尋關鍵字，在 SEO 尋引擎優化方面，我們探討了許多畫面、程式、伺服器、連線等技術的應用調整，集結了先前眾多技術層面的囊括，我們能夠有效的提升使用者體驗觀感及搜尋引擎評斷收錄認可，但在這些網站技術的整合後，最終我們目的便是需要開始檢視瞭解在關鍵字上的搜尋結果，因為回歸使用者們的搜尋動作應用，只是單純的透過輸入搜尋需求關鍵字來與搜尋引擎溝通，並得到最相近符合的搜尋結果，因此除了先前分享過的許多種優化技術外，關鍵字的設定、編著也是對搜尋引擎有著貫穿整體技術的布局重點。   在搜尋欄位當中，雖然關鍵字大多數都只是簡短扼要的關鍵詞彙，但卻是扮演著極為重要的引領角色，透過關鍵詞彙，搜尋引擎可以根據各種收錄資訊進行比對呈現，因此在優化的環節中我們就必須妥善的置入符合內容及搜尋的關鍵詞彙，來提供搜尋引擎的收錄確認，進而讓使用者們能夠透過搜尋引擎找到符合我們的網站資訊，理解了關鍵字的重要性之後，我們便開始需要瞭解且尋找適合、熱門的對應詞彙。   在關鍵字的編著當中，我們通常都會根據大眾使用習慣來定義，如在搜尋引擎欄位輸入關鍵字彙的同時，下方會跑出較多人常使用的習慣搜尋詞彙，就是搜尋引擎們透過大眾搜尋習慣所統計出來的常用關鍵字，從中我們便能瞭解參考相關的詞彙編著方法並加以應用，進而達到貼近使用者搜尋的習慣也能更有提升網站的吸引力。