When designing your Web pages, you may want to design with a particular page size in mind. Years ago, most designers tried to keep within a 640-by-480-pixel screen as that was the lowest common monitor size of the time. Over time, manufacturers have increased monitor dimensions significantly. Web designers responded with larger designs going from 800 by 600 to 1,024 by 768. Many designers have decided to use a more flexible design using screen percentages so that their Web pages look good on almost any size monitor.
Launch Adobe Dreamweaver CS3. From the "Welcome Screen," select "HTML" from the "Create New" column. You may also select "New" from the "File" menu and then select from the many options presented in the "New Document" dialog box. The layouts include elastic, fixed, liquid and hybrid dimensions.
Click the "Window Size" selector in the lower right of your new, untitled HTML document. Dreamweaver presents you with these choices:
536 x 196 (640 x 480, Default)
600 x 300 (640 x 480, Maximized)
760 x 420 (800 x 600, Maximized)
795 x 470 (832 x 642, Maximized)
955 x 600 (1024 x 768, Maximized)
544 x 378 (WebTV)
Select the size of the screen you wish to use for your Web page development. If the size you wish to use is not listed, select "Edit Sizes" from the "Window Size" selector. You may also access this item by selecting "Preferences" from the "Edit" menu. "Window Sizes" are under the "Status Bar" category.
Click below the last row displayed to add additional sizes. Click "OK." You may also resize your development window by dragging the lower-right corner in or out. Dreamweaver will reflect the changed dimensions in the Window Size area of the document status bar.
Tips & Warnings
- Most designers do not specify a page height, allowing the page content to dictate the length of the page. The Window Size selector can help you "see" what a typical user will see upon first arriving at your website without additional scrolling.
- Specifying a window size in the document status bar will not limit the page size to those dimensions. You would need to use cascading style sheets (CSS) or tables to limit page size. If you insert a table and specify the tables' width in percent rather than pixels, the table will expand to the width of the user's browser and not the width specified in "Window Size."
- Photo Credit Ciaran Griffin/Lifesize/Getty Images