How to Make a Template Larger to Fit the Screen in Dreamweaver

Increasing the size of a Dreamweaver template isn't difficult.

Adobe Dreamweaver, a Web page design program, comes with several generic templates. Templates are pre-built Web pages containing the various elements of a page layout. Just plug in your own content, such as text and graphics, and your Web page is ready to display to the world. All of Dreamweaver's templates combine HTML and Cascading Style Sheets, or CSS, a page formatting language. You can increase the display size of a Dreamweaver template by editing its CSS rules.

Instructions

1. Click the "File" menu and choose "New." This opens the New Document dialog box.

2. Select "HTML" from the Type list.

3. Choose the desired template from the Layout list, and then click the "Create" button. Dreamweaver creates a new Web page based on the template.

4. Click the "Split" button to display the code-editing window.

5. Scroll in the code-editing window until the ".container {" line is visible. In the templates included with Dreamweaver, the .container CSS selector defines the top-level container for the entire Web page. In other words, all other elements of the page go inside this container. The entire selector style, depending on the template you chose in Step 1, will look similar to the following:

   .container {
   width: 960px;
   background: #FFF;
   margin: 0 auto;
   }

   The "width" property controls the display size, in pixels, of the container. You can make the page larger, so that it fills more of the screen, by increasing the value of the width property.

6. Change the "width" value as desired. For example, to increase the page size to fit a monitor with a 1280-by-768 resolution, your .container selector would look like or similar to this:

   .container {
   width: 1200px;
   background: #FFF;
   margin: 0 auto;
   }

Tips & Warnings

• Keep in mind that the browser needs room on both sides of the Web page to display the window's border and the vertical scrollbar on the right side of the window. When increasing the size of the page, make the page a little smaller than the monitor's overall width. On a 1280-by-800 monitor, for example, set the width value to about "1200" to leave space for the browser.

• Some of Dreamweaver's templates have multiple columns, such as .sidebar and .content. When you increase the size of the .container style, you should also adjust the size of the column containers to fit the new page size. Change the size of the columns by increasing the width values in their respective CSS selectors.

References

• Adobe Systems: Dreamweaver Templates: Customizable Starter Designs for Beginners
• Auburn University: Dreamweaver Templates Editing Instructions
• Layers Magazine: Save Time With Templates in Dreamweaver; Janine Warner; July 2010

Resources

• Adobe: Editing, Updating and Deleting Templates