自訂卷軸顏色樣式 css jquery語法 ~ 猛甲茶道互動式創意網頁設計 Tea Road

以下文字節錄於網頁設計向前走

沒有必要，千萬別叫訪客註冊

註冊對許多人來說是非常非常麻煩的事情，註冊代表對方會拿到你的資料，會有不好的感覺。重點是，訪客到你的網站來是需要看你網站的內容，不是來註冊的，如果需要註冊才能看的內容，我通常選擇不看，除非內容精華到極點。

不要在網頁中嵌入背景音樂

許多新手在初接觸網頁設計時，都會以為在網頁中嵌入音樂會讓網頁質感很高。這不對，播放音樂並沒有比較好，個人感覺會很煩躁、無法靜下心來閱讀文章，很吵。如果一堆網站都這樣做，真的會被吵死。

網站勿複雜、複雜則無法成大事

請你使用最少、最簡便的步驟讓訪客看到你網頁的內容，不需要在首頁載入前還先有一個Flash影片特效。訪客需要的是網站的內容，在網站剛起步時請直接讓訪客看到重要的內容，不要使用在進去首頁前特別用「點此進入」再來進去首頁。

一定要留下聯絡方式

沒有留下聯絡方式的網頁幾乎等於在做白工，沒辦法幫你增加一分人氣、一分知名度。這不僅對自己不利，更對訪客不利，你可能因此失去許多機會。

不要使用一閃一閃的文字

請不要使用閃來閃去的文字，這看起來很不舒服。

使用CSS+DIV取代HTML畫表格(table)、使用CSS定義樣式

如果你要學網頁設計我會建議你HTML和CSS一定要一起學，使用HTML畫table框架的模式已經非常非常非常落伍了(幾年前的網頁很多是這樣做)。CSS比HTML的功能更多、更便利、更容易分析整個網頁的佈局。強調一次，不要使用HTML畫table框架。

請留意SEO(搜尋引擎優化)，但不要過度操作

這個時代，已經沒有人在記你的網址打你的網址了，大家都使用Google來查資料，所以當你在製作網頁時，請留意網頁的meta標籤，是否讓搜尋引擎Google對你的網站微笑。

避免在文章內文中插入Adsense廣告

如果你在內文插入廣告，必然的流量一大點擊率就會上升，或許短期內錢可以進來比較多。但是以長期來看的話，會讓部分看不慣廣告的人離開，要放廣告，盡量放在邊欄就好。（不過在中文網頁，沒有插入廣告在內文的網站滿少的

簡單的導航結構

訪客拜訪網站的目的不是了解你的網站複雜的結構，而是要取得它想要的資訊，這一點一再強調，結構一定要化繁為簡，使用最簡單的方法讓訪客看到你的網頁核心價值，越簡單，越好。

讓訪客一眼就知道哪個文字是連結

訪客沒有時間去注意你在哪些文字上加了超連結，你要讓他們一眼看見哪個是連結，可以點，看到更多的內容。通常連結都使用藍色，比瀏覽器預設藍再淡一點（用預設藍感覺就沒那麼專業），如#06c看起來很舒服，適合當作連結的顏色，通常我們都會把底線去除，等訪客滑鼠移到上方時再顯示底線。

盡量不要給一般文字加上顏色，重點使用粗體代替之

這點在撰寫文章時要注意一下，盡量不要在文字上面加上顏色，當加多了，整個文章就會變得非常難以閱讀，也會很刺眼。如果是要註明文章的重點，請使用粗體字，不要使用顏色，別以為七彩繽紛很好看。

訪客點擊連結後，連結需換色

這點就是單純的網頁便利度的問題，當訪客點過的連結變色，能夠馬上知道這個連結有點過了，通常用在重複的連結會比較明顯，我想，除非記憶很差不然應該不會忘記吧。

不要使用GIF動畫圖片檔

當你使用了動畫圖片GIF檔，訪客一半以上的注意力都會被分散，所以不要在網頁中有會動的圖片，除非你就是要他點那個圖片，才會這樣做。而且，這會讓你的網站顯的非常不專業，有很多新手都喜歡讓網頁動來動去的，但那很不好。

不要使用POPUP彈出視窗

現在許多瀏覽器都已經有防跳窗的功能了，因為惡意網站總是利用跳窗來載入不正常的東西，而且會妨礙訪客瀏覽網頁。使用POPUP彈出視窗是一個很爛的決定。

在網頁底部提供更多資訊

不知道大家有沒有這個習慣，就是看網頁一定會拉卷軸到最底部，確認過沒有其他內容後才離開。透過這點，許多國外企業網站常常在頁底放連絡資料、更多介紹文、粉絲團嵌入、首頁等等功能，這些都有可能讓訪客有更多的資訊，讓訪客停留於網站的時間更長，黏著度更高。

不要變更已經公開網頁的網址

更改已經公開的網頁的網址如大家所知對SEO不好，同時也對有把網址加入到書籤、我的最愛的讀者帶來不便。

除了內文，其他區塊盡量減少圖片

網頁內文要圖文並茂這點我非常同意，也有利於SEO。但是其他地方，如側邊欄的地方，就盡量不要使用圖片做出效果，應該要使用CSS，並做到最簡化，「簡單風」是未來的趨勢，千萬別把網頁製作的太複雜、用太多圖片。用太多圖片會拖慢載入速度。

勿使用太複雜的導航文字

導航的文字真的不需要複雜，不需要像是一個成語一樣，只需要最簡單的幾個字就好。如「關於我們」、「連絡我們」、「訂閱我們」，其實這個還可以更簡單，把我們去掉也可以。

<!doctype html>
<html lang="en">
    <head>
        <title>Tiny Scrollbar: A crossbrowser lightweight javascript/jQuery scrollbar.</title>

$scrollbar.tinyscrollbar();
            });
        </script>

</head>
    <body>
        <div id="scrollbar1">
            <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
            <div class="viewport">
                 <div class="overview">
                    <h3>孟甲公司~互動式創意網頁設計</h3>
                    <p>孟甲公司的服務項目
◎網頁網站建置規劃
◎電子商務購物網站設計
◎多媒體動態網頁設計
◎部落格版面設計
◎網站更新及維護</p>

</div>
            </div>
        </div>
                <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript" src="http://xn--fiqt30bz6aqzmc5bnzs2yzy5a275a9qv.com/taipei101/responsive_scroll/jquery.tinyscrollbar.js"></script>
        <script src="http://xn--fiqt30bz6aqzmc5bnzs2yzy5a275a9qv.com/taipei101/responsive_scroll/jquery.tinyscrollbar.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                var $scrollbar = $("#scrollbar1");

$scrollbar.tinyscrollbar();
            });
        </script>
    </body>
</html>

響應式網頁架站只要6,888元起|[RWD]響應式網站，自適應網頁，讓SEO搜尋引擎最佳化你的網站

"你是獵人還是獵物？"

Tea Road

Monga Shop

猛甲茶道互動式創意網頁設計 Tea Road