佈置
儘管實際網頁設計的制約因素往往不允許這樣做，就是直接把焦點放在頁面的中間，用戶一眼就可以看見，這是要創建焦點的一個很重要的位置。在離中心不遠處有一個元素，它不太可能被首次發現;看看這方面的例子，如圖1.19
圖1.19繼續創造和安置重點
延伸
延伸背後的想法是，當我們的眼睛在一個方向上移動時，他們往往將繼續沿著這條道路走下去，直到一個更主要特點出現。圖1.19證明瞭這一效應。即使底部油漬顏色較深，可能會首先吸引你的注意，但是你的大腦控制不了自己便說 “嗨，看，一個箭頭！ ”你很快就會發現自己盯著那個小物件。
延伸是網頁設計師用來統一佈局的一種最常見的方法。默認情況下，在任何風格應用之前，標題的左邊邊界，複本和圖像放在網頁上形成垂直線知道網頁的左邊。一個簡單的方法用來延伸一概念，那就是利用三等分原則，在網格上沿著線條排布其他網頁中的元素。
孤立
和就近原則幫助我們創造統一的設計相類似的方法，孤立突出重點。一個物體從它的周圍脫穎而出將會贏得關注。即使他為不如好友的其他網頁而自卑，如圖1.20脫穎而出的孤立猴子將作為網頁中的一個焦點。
圖1.20 延伸——一隻傷心的猴子
對比
對比度的定義是不同圖形元素的並列，這是用來創建佈局重點的最常用的方法。這個概念很簡單：這個圖形元素及其周圍環境的差異越大，它就越脫穎而出。對比可以創建使用不同的顏色（我將在第2章給出更詳細的討論）、大小和形狀。如圖1.21 。
圖1.21: Woot—利用橘黃色作為對比度
該網站名叫Woot ，是一個電子商務網站，每天只銷售一個項目10。當你看到這個佈局，首先引起你的注意的是什麼？我猜想它可能是他們的銷售產品。Woot上的產品每天都在更新，之後又有什麼吸引你的注意？
對於我來說，這是“我要一個！”的按鈕。雖然在網頁的別處也使用同樣的顏色，橢圓形並非如此。為了避免白色空間，這個按鈕和它周圍的顏色形成了對比而且還是孤立的，這就使它成為重點。頁主希望那你能夠點擊這個按鈕。
比例
在網頁中突出重點的一個有用的方式就是使用比例。比例是一種設計的原則，涉及到不同物件的規模。如果我們把一個物體放在這樣一種環境中，就是把它置身在規模比自己大或者小的環境，它就會反映出比實際大很多或者小很多的效果。這種比例的差距將會吸引觀眾的注意，因為這似乎和它原來的樣子格格不入。
http://www.woot.com/
在圖1.22 ，我已經把猴子疊加在Manhattan的天際線上來證明我的觀點。在顏色比例上形成了鮮明的對比，你的腦海馬上會出現一個聲音在說：“嗨，這裏什麼是不對的，”你將會死死盯著猴子直到你強迫自己往別處看。
圖1.22:比例—在Manhattan上的猴子
這一原則對於小型化也同樣使用。如果你看看我的個人網站網站， Jasongraphix ，如圖1.23，在這個網頁上你第一眼注意到的其中一件事物就是在標識下面靠在我作品上的mini-me11。正如網頁Woot上的“I want one!”這個按鈕，這個小圖示很顯著，因為對比度和孤立，但也因為使用了醒目的比例。
圖1.23 ： Jasongraphix ，我的個人網站，包括mini-me！
http://www.Jasongraphix.com/
有幾個標準的HTML標記和CSS屬性,被設計為了在一個即使沒有定制的網頁上充分利用前面的理論設置的重點。對於區塊引用元素孤立的內容。這個元素的縮進它上面左邊和右邊的任何文字，故意打破了網頁內容延續，並注意它自身。
對於定位，考慮CSS的位置屬性。當準確定位CSS上的一個物件，你需要把它從它的分塊中分離出來，這樣你就可以戰略性的把它放在一個適當的位置以引起注意。當你考慮對比，看看那個眨眼標記。開玩笑！永遠不要去眨眼標記。是的，它產生了對比...一次又一次。請不要使用這種方法。不要再考慮使用滾動的標記。設計是關於我們省略的內容是根據我們輸入的內容決定的。
下一節，我們將看看那些對你有用的已經測試成功的網頁設計例子。
