Home >> Tutorials/FAQs >> CSS Tutorials >> Index

CSS Tutorials - Page Layout and Background Image Design

By: FYICenter.com

Part:   1   2  3  4  5  6 

A collection of 18 FAQs/tutorials tips on designing Web page layouts and background images. Clear answers are provided with tutorial exercises on screen and browser resolutions, setting Web page width in absolute and relative length units, setting images and font sizes in relative length units, adding multiple background images. Topics included in this collection are:

  1. What Needs To Be Considered When Designing Page Layout?
  2. What Is Screen Resolution?
  3. What Is Browser Resolution?
  4. How To Test Browser Resolutions?
  5. How Wide Do You Want Your Page Content to Be?
  6. What Are the Page Widths on Popular Websites?
  7. What Are the Length Units Used in CSS?
  8. How To Set Page Width Relative To the Browser Width?
  9. How To Set Page Width to a Fixed Value?
  10. How To Center Your Page in Browser Windows?
  11. What Happen to Images with Absolute Page Width Units?
  12. How To Set Page Widths to Relative Length Units?
  13. What Happen to Font Sizes with Relative Page Width Units?
  14. How To Set Font Sizes to Relative Length Units?
  15. What Are the Background Style Properties?
  16. How To Specify a Background Image?
  17. How To Position Background Images?
  18. How To Specify Two Background Images on a Page?

What Needs To Be Considered When Designing Page Layout?

There are a number of technical issues you need to consider when designing Web pages:

  • Screen resolution - How many graphical points per inch on a computer screen?
  • Browser resolution - How many graphical points per inch on a Web browser window?
  • Page content width - How wide do you want the page to be? And in what unit of measure.
  • Text font size - How big do you want the text to be?
  • Number of columns - How many columns do you want the page to have?
  • Background pictures - Do you want any background pictures?

What Is Screen Resolution?

Screen resolution is measure by how many graphical points (pixels) per inch or DPI (dots per inch) on a computer system. Screen resolution can be changed within a range on most of today's computer systems.

For example, on a Windows system, you can go to the Control Panel, run Display, and go to the Settings tab to change the number of graphical points on screen in the range of 800x600 and 1400x1050 pixels.

To calculate the screen resolution, you should divide the number of points on the screen by the screen size in inches. For example, if you set 800x600 pixels on a screen of 11.5x8.5 inches, your screen resolution is about 70DPI.

If you set 1024x768 pixels on a screen of 11.5x8.5 inches, your screen resolution is about 90DPI.

Screen resolution must be considered when you design your Web page, because your page size will be affected by the screen resolution of your visitor's computer system. Generally, your page will look smaller on computer systems with higher resolutions.

What Is Browser Resolution?

Browser resolution is measure by how many graphical points (pixels) per inch on a Web browser window. Logically, browser resolution should be identical to the screen resolution, for example, FireFox.

But there is an exception, for example, Internet Explorer (IE). If you set your computer to 1280x1024 pixels on a screen of 11.5x8.5 inches, your screen resolution is about 120DPI. The browser resolution of FireFox will be 120PDI, but the browser resolution will be 90DPI, much lower than FireFox.

Browser resolution must be considered when you design your Web page, because your page size will be affected by the resolution of Web browsers used by your visitors. In the above example, if you design a Web page of 840 pixels wide, it will be displayed as 7 inches wide in FireFox. However, the same Web page will be displayed as 9.33 inches in IE.

How To Test Browser Resolutions?

How to test your browser resolution? A simple way is to put a simple page with several images of different sizes. Then you view this page with different browsers on different computer systems and measure those images on the screen with a ruler.

If you want, you can measure the images listed below while viewing this page. If the first image is measured as one inch in size, your browser resolution (not the screen resolution) is 70DPI. If the second one is one inch, your resolution is 90DPI. If the third one is one inch, your resolution is 120DPI.

                 

How Wide Do You Want Your Page Content to Be?

How wide do you want your page content to be? This seems to be a simple question. But not really. Below are some potential answers. None of them is ideal:

  • "I want my page width equal to the screen width." This is good for visitors with smaller screen. But your page will look ugly on those very wide screen.
  • "I want my page width to be fixed to 10 inches." This stops your page to grow with the screen size. But you will have trouble to satisfy visitors with different browser resolutions. Let's say you put an image of 1200 pixels wide on your page. This image will be displayed perfectly as 10 inches on a 120DPI browser, but it will be displayed as 13.33 inches on a 90DPI browser. Your page layout will be damaged.
  • "I want my page width to be fixed to 1000 pixels." This is good to maintain the page layout. But your page physical size will vary depending on browser's resolutions. Your page will be displayed as 8.33 inches on a 120DPI browser, and 11.11 inches on a 90DPI browser.

Comparing all 3 answers, the last one seems to be best. And most popular Web sites do fix their page widths to pixel numbers.

(Continued on next part...)

Part:   1   2  3  4  5  6 


Selected Developer Jobs:

More...