2.6 了解出血和滾動條
版式設計最常用在平面設計和網頁設計中，在平面設計中通常會為設計稿設置出血值，以保證良好的印刷效果。在網頁設計中，如果頁面高度超出了屏幕的顯示高度，則會自動出現滾動條以方便用戶瀏覽，所以在設計網頁的版式時，也要充分考慮滾動條對頁面版式的影響。
出血線與出血
出血線是用來界定圖片或色塊的哪些部分需要被裁切掉的線。（出血線以外的部分會在印刷品裝訂前被裁切掉，所以也叫裁切線。）出血就是出血線以外的圖片或色塊，也就是會被裁切掉的部分，如圖2-49所示。
圖 2-49
出血的設置可以很好地避免由于裁剪不當造成圖片偏小而漏出頁面的底色，影響版式的效果。如圖2-50所示分別為未設置出血和設置了出血的版式。
圖 2-50
文件的出血值一般設置為3mm，也就是圖片的四邊多留出3mm。出血線的粗細為0.1mm，長度按實際需要而定。一般設置為10mm，如圖2-51所示。
圖 2-51
應用出血除了可以保證正確的印刷輸出外，在實現一些特殊的版式設計上也能起到意想不到的作用。例如當希望某些圖片更加引人注意的時候，可以對圖片進行出血處理，通過將圖片放大到超過頁面大小的尺寸，使整個頁面效果顯得更加寬闊，如圖2-52所示。
圖 2-52
滾動條
網頁設計中版式的應用其實與平面設計是一致的。但是由于網頁中要顯示的內容過多，所以在設計和制作網頁時要充分考慮頁面中縱向的滾動條。正常頁面和瀏覽器頁面效果如圖2-53所示。
圖 2-53
眾所周知，標準網頁設計一般不能出現橫向滾動條，這是由網頁美觀，易用性等多方面決定的。而現在主流設計還都是針對800×600分辨率設計的。在這可憐的800像素里，設計師既要考慮到最大限度地表現出文字與圖片，還要為了美觀來美化頁面元素、增加質感和效果。所以網頁設計中對每一個像素都要認真對待。
Windows操作系統下，IE9的滾動條寬度為17像素，活動窗口邊框寬為6像素，但是Windows為了增加效果，會再有1像素寬的陰影，所以一共是2像素，如圖2-54所示。
圖 2-54
根據以上計算方法可以得出，右側窗口邊框6像素+滾動條17像素+陰影1像素=24像素，再加上左側窗口邊框和陰影一共是31像素，如圖2-55所示。
圖 2-55
具體設計時，一般為了考慮內容居中和方便計算，大多采用雙數，所以對于瀏覽器寬度為800像素的設計稿769像素是最佳尺寸。知道這個原理，1024或1280的也都可以輕松算出來了。
1、在IE6.0瀏覽器下，寬度為顯示器分辨率減21，比如1024的寬度減去21就變成1003。但值得注意的是IE6.0（或更低）無論你的網頁多高都會有右側的滾動條框。
2、在Firefox瀏覽器下，寬度的分率辨減19。比如1024的寬度減去19就變成1005
3、在Opear瀏覽器下，寬度的分率辨減23。比如1024的寬度減去23就變成1001
Firefox或Opear在內容少于瀏覽器高度時不顯示右側滾動條。所以如果是1024的分辨率，最好將網頁的寬度設置成990像素。如果是800的分辨率一般都設成770像素。
以上所講需要明白并且牢記，不然很可能做出來的東西在不符合瀏覽器要求的同時，也會影響整個頁面的版式。而且在實際的網頁設計工作中，可以將頁面尺寸設定的再稍微小一點，因為有些瀏覽器加了插件或者其他的東西寬度會有變化，所以800的分辨率一般設定在760左右；1024的設定在990左右。