網頁設計相關文章

在網頁設計上，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在網頁設計上越來越常見， 而豐富的網路資源也能夠提高網站開發的速度，提升工作效率，不妨多加使用。  

 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.  

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

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

CSS的word-spacing屬性可以用來控制網頁上英文單字之間的間距，由於英文字是以半形空白做為區隔，而此屬性便是控制此空白的間距， 全形空白則不受其影響，word-spacing可以為負值，如word-spacing: -5px   乍看之下跟letter-spacing屬性有些相似，但是word-spacing控制的是單字之間的距離，而letter-spacing則是控制單一字母間的距離。 範例：  See the Pen NORQrg by Ya (@bok770) on CodePen. 以上範例的句子：「e-work design」，如使用letter-spacing屬性，控制到的會是「e、-、w、o」……等等的單一文字之間的距離。 而若是使用word-spacing屬性的話，控制到的是「e-work」、「design」這兩個單字間的距離。   而word-spacing的另一項特性，句子若是中文字的話，如果中間有空格，也會將空格視為單字之間的分隔， 例如「一化網頁設計」會被視為一個單字，而「一化 網頁設計」則會被視為兩個。 範例： See the Pen Zqpgrm by Ya (@bok770) on CodePen.

 CSS的first-letter 屬性，可以用來控制文字段落的第一個字母，透過此屬性，我們可以對首字母的樣式做一些美化，而要注意的是，由於first-letter是偽元素，所以在寫CSS時必須用:first-letter。   範例：     利用此屬性，可以一次設定多個區塊文字的開頭 範例：

之前我們介紹了CSS的word-wrap，此屬性可以讓過長文字直接換至下一行，使得文字不會超出div區塊的範圍。 而CSS還有另一個相似的屬性為word-break，功能也是讓文字換行，那麼此兩項屬性有什麼差別呢？就讓我們來看以下範例吧。 延續上次的範例介紹的word-wrap，可以讓過長文字換行如下： 原本過長會直接超出範圍    使用word-wrap:break-word，可以使過長的design單字直接換行 但是可以發現的是，由於整行design文字換行的關係，使得「e-work」這段文字右邊留下很大一片空白，除了顯得有些浪費空間以外，看起來也較不整齊，視覺上就沒那麼美觀了。 因此，為了解決此一問題，我們可以使用CSS的word-break屬性。 設定值有： normal：瀏覽器的預設規則 break-all：可以在單字的字母之間換行，不一定要完整單字才能換行。 keep-all：不可以在單字的字母之間換行，必須保留完整單字，比如說遇到半形的空格才可換行。 範例： 可以發現，e-work右邊的空間被填滿了！但缺點是，若是一個完整的單字被強制斷行，可能會失去該單字的易讀性，使得閱覽者不清楚此單字或是誤以為是兩個分開的單字，所以在使用上須斟酌一下。

 CSS的word-wrap功能為讓過長的單字能夠切換到下一行，大多的瀏覽器預設上，為了保持較長文字的完整性，並不會拆掉文字，而是直接跳至下一行，或是直接讓單字超出div的範圍，如果要避免以上這兩種情況，可以使用word-wrap屬性。   若不加word-wrap的時候，在瀏覽器默認下，若有一個單字很長，導致一行剩下的空間都容納不下它時，則會把這個單字挪到下一行。 所以如下圖所示，e-work後面會留下一片空白，而容納不下剩餘空間的design會直接移到下一行。   以上範例的文字整體長度還是在div區塊的範圍之內，但是如果這個單字本身長度比div還要長的時候呢？由下圖我們可以發現，如此便會直接超出div區塊的範圍。   而為了讓以上情況的單字可以不超出範圍，我們可以用word-wrap: break-word讓過長文字直接拆至下一行。   以上便是css word-wrap的功能介紹，此屬性在所有瀏覽器皆有支援。  

html的< dl > < dt >< dd >是在網頁設計上的一種內文排版技巧，通常被稱為定義清單，可以呈現出縮排的效果，撰寫規則為< dd >< /dd >< dt >和< dt >< /dt >皆是寫在< dl >< / dl >裡面，< dt>通常表示項目的標題，而< dd >則為項目的敘述。 範例： See the Pen QVqpra by Ya (@bok770) on CodePen.

 在網頁設計上icon的使用是不可或缺的，一般是切成圖片，然而若是以文字形式呈現的話，不僅縮放都不會失真，還可以任意更換顏色，比svg檔更便利！而有個網站便是專門將svg轉換成文字檔， IcoMoon ：https://icomoon.io/app/#/select 不僅提供許多的現成圖示可以使用，還可以將自己繪製的icon放進來做轉換。   可以直接選擇想要使用的icon，選取到的會框起來   也可以直接將自己繪製的圖示放進來，點選左上方的「import Icons」，即可匯入   點選最右下角的「generate Font」轉成文字檔   將下載的檔案解壓縮後，只要將style.css和 fonts的資料夾放進自己寫的專案裡即可   點開demo.html會顯示你所下載的每個圖示的class名稱，實際套用時只要加進class裡即可   比如要套用上圖的icon-file-text的圖示，便可將 icon-file-text的class放進來，若要修改樣式可以新增class，如下圖的icon01、icon02、icon03，便是修改圖示的大小和顏色，因為是文字所以需用 font-size