How to Make a Layout in Dreamweaver

A good website design is hard to do from scratch. With the advent of cascading style sheets and powerful web design programs, it is easier than ever to lay out a website. A template is a page design that can be applied to blank webpages as a quick and easy way to format them. With a template, it is possible to choose a preexisting layout and apply it to many pages. Here are some guidelines for using Adobe Dreamweaver templates to lay out a website.

Instructions

Choose A Template

1. Start Dreamweaver. Under the "Create From Samples" menu select "More."

2. Select "Blank Template" in the first column. In the "Template Type" column, select "HTML."

3. Select the template layout from the "Layout" column. There are many options from which to choose. Each one can be viewed by clicking on it. If none of them is what is needed, select "Blank."

4. Insert editable regions and page elements. Once the template is open, decide which regions you want to remain editable. Place the cursor in regions that will be editable and select "Insert" from the "Menu" bar. Then select "Template Objects" and select "Editable Region" from the sub-menu. An editable region is any region where text, graphics and other elements will be placed on a page. Any area not designated an editable region will not be able to be changed in any webpage the template is applied to later.

5. Add links, text, images and other elements to regions that will not be able to be changed on pages on which the template will be applied. To change a region that cannot be edited on a webpage that uses a template, the template itself has to be edited and reapplied to the page in question.

Define A Site

1. Assemble the elements for the site in a single folder. This should include text, graphics, video and anything else that will appear on your planned site.

2. Start Dreamweaver. Click "Dreamweaver Site" from the list under the "Create New" options on the start page.

3. Name the site. The name entered is for use in Dreamweaver only, and will not show up elsewhere. If the site has a URL, enter it in the blank provided, although entering the URL at this point is not necessary.

4. Select whether or not the site will use a server technology. If you don't know what this means, choose "No."

5. Select " Edit the Site Locally." Then select the root folder. The root folder is the site where all webpages and elements on those pages must be stored. The simplest way to do this is to select the folder where the elements are already stored, but it is possible to designate another folder as the root folder and to move elements into it as needed. If an element placed on a page is outside the root folder, Dreamweaver will ask the user if he wants to move the element to the root folder. If this happens when building a page, choose "Yes."

6. Choose "None" when asked how to connect to the remote server. This option can be changed once the site is complete.

7. Select "Done."

Create Pages and Apply the Template

1. Start Dreamweaver. From the "Start" page, choose "HTML" from the "Create New" options list.

2. Select "File" and then "Save as."

3. Save the new HTML document as "index.html." Save it to the root folder defined in the previous section. This document is the home page for the new site. It must be named "index.html."

4. Create other HTML pages as needed. Save them to the root folder. Do not capitalize any letters in the names, and, if the name is more than one word, use the underscore mark instead of a space between the two words.

5. Apply the template. Select "Modify," "Template," then "Apply Template to Page." This step must be repeated for each page to which a template is to be applied.

6. Add text, images and other elements in the editable regions defined in the first section.

Tips & Warnings

• Save each page after the template is applied and the elements have been added.

Resources

• Adobe Dreamweaver