3個美化網頁的實用技巧

簡單又立即有成果，網頁新手也可以辦的到

對HTML有個基本的概念後，網頁主要是由HTML與CSS所組成：HTML負責建構網頁的基本架構、CSS則專門負責美化網頁的任務。你會發現，原來網頁不需要太難的語法，就可以做出一些畫面，接下來就是頁面美化的處理；讓頁面更接近自己心目中的網頁。

詳細的CSS語法規則，會在後面的『認識CSS章節』做補充介紹。這篇以「美而美」網站做為例子，我們先來觀察頁面的元素有哪些，以及CSS可以做到哪些事情。掌握了大原則之後，後續製作上也會比較有個方向

magnifier 先來比較一下網頁美化前、美化後的差異。

視覺感受是不是落差很大呢!!原本純文字的敘述，讓人連看都不想看，完成後的配置效果，給人活潑又不失協調的感覺。趕緊來看看有哪3個實用技巧吧~

首先，建構出html標籤

About MEI & MEI 草創初衷

二十多年以來，紅底黃斜線招牌之『瑞麟美又美』、『瑞麟美而美』早餐漢堡加盟店遍佈了台、澎、金、馬各地，是本土速食連鎖加盟業中加盟店數最多、最受歡迎體系之一。美而美國際集團在經營漢堡連鎖速食體系之初衷，就是要讓全台龐大的外食人口可享受既方便又迅速的美味早餐，因而研發出多樣口味，美而美國際集團擁有全國第一家檢驗合格的早餐連鎖優良食品工廠登記證，所有銷售的產品均具有華南產物5000萬元產品責任險，也奠立了本土速食連鎖業界第一品牌的地位，讓消費者吃得放心，加盟者賺得安心。

美化第一招：安排層次，善用標題抓出段落重點

標題能夠提供內容的導讀，引起讀者的興趣！藉由字級大小變化、排列次序、橫直向的錯落、顏色的搭配，會使標題不只是標題，更兼具圖像的作用。以這案例來說，再把內文整理成3大段，會使版面更有層次感、閱讀起來重點條理更分明。

美化第二招：保持內文的良好閱讀

內文字以「良好的閱讀性」擺在第一優先，以中文來說：網頁內文介於15px ~ 20px之間、行距介於1.5 ~ 2之間，段落與段落的間距則介於0.5 ~ 1em之間，就能獲得不錯的效果哦。

magnifier 簡單的CSS字級、標題背景色、行距、間距設定；就已經有明顯的差異了

            
            h2.t2-mei {
                background-color: #eb7b1b;
                color: #fff;
                font-size: 22px;
                font-weight: normal;
                margin: 0;
                text-align: left;
                width: 300px;    
            }
            h2.t2-mei span {
                background-color: #f5c85b;
                display: inline-block;
                font-size: 17px;
                padding: 15px;    
            }
            P {
                font-size: 15px;
                line-height: 2;
                color: #333;
            }
        

美化第三招：適當圖片點綴，吸引瀏覽者目光

根據頁面的內容，單純文字敘述已經不能滿足瀏覽者的需求，置入恰當的圖片或插圖，提高瀏覽者的閱讀興趣。圖片風格、大膽留白、對齊、對比、與段落文字的比例搭配...等等；考驗著設計師的經驗與美感。

magnifier 把準備好的圖片素材，利用CSS定位、間距設定等方式，排列在適當的位置中

善用並掌握這3個小技巧，是不是也讓你的頁面增色不少呢；這次的案例只運用到顏色、字級、背景圖的基本設定，其實表格、列表、表單...等，也還有很多美化的小技巧。之後開始邁入CSS語法的學習；只要持續地觀察與練習，從做中學累積經驗，每個人都可以從零基礎新手，成為專業設計師哦。