Dreamweaver Basics

Tip #21

Testing for different monitor resolutions

Have you ever thought about how monitor resolution on your machine and on your user's machine affects the display of web pages? When creating any type of page, you can decide to constrain the page's width or not to constrain it.

As an example, this is a page which is largely made up of textual links, and I have done a screen capture using three different resolutions:

screen capture of page at 800 pixel width
Monitor set at 800 pixels wide.

screen capture of page at 1024 pixel width
Monitor set at 1024 pixels wide.

screen capture of page at 1280 pixel width
Monitor set at 1280 pixels wide.

Just by looking at these three examples, you can see some of the problems with using an unconstrained page. As the monitor resolution increases, lines of text get longer and longer, and harder for a user to read.

It is for this reason that many site creators decide to constrain the display by placing the content within a table cell so that no matter what the monitor looks like the page has a similar look. That is to say, even if a more complicated structure is not used, all of the page content is placed inside a table made up of one row and one cell and some width is set up for the table as a whole.

You may have noticed at the bottom of the document area, Dreamweaver is displaying a measurement in terms of pixels horizontally and pixels vertically as is shown below:

The bottom of the document area shows the resolution of your work area.

If you want to select various possible window sizes by clicking on the triangle next to the pixel measurements, you must click on the Restore/Maximize icon in the Document window to resize the document window (don't click on this icon for the application itself, just the document window one).

Change the document window so it is not maximized, to pick monitor options.

Once the document is no longer maximized, you can pick various monitor options from the drop down listing.

From a listing, you can pick monitor size options.

You may need to collapse the display of panels to the right of the document area.  

You should try displaying your pages, both the front page and other pages, by viewing the page at settings for different monitors, at least for a 800 x 600 monitor and a 1024 x 768 monitor since these are common monitors.

Because of variations in resolutions on monitors, site managers often put the most important parts of the page (particularly a front page) at the top and left part of the display.

These tips are created as part of a class on Dreamweaver Basics.