How to Design Websites With Dreamweaver

Web sites are a good way to spread information to the public.

The ability to design a website can be a useful skill. Most people do not have the time to spend developing the knowledge needed to programming a webpage. The program Dreamweaver makes it easy for any novice to create a webpage from scratch. You can design anything you'd like, with just a few simple tools and some basic instruction. Soon you'll be on your way to a great webpage, and the beginning of a great website.

Things You'll Need

• Dreamweaver

Instructions

1. Open Dreamweaver. Click "File" --> "New." A dialog will appear. Make sure the far top left "Blank Page" button is selected. Then, to the right of that, click "HTML." To the right of that, under "Layout" there are a wide variety of HTML templates. These will be helpful because you will not have to create your own separate code for layouts. By selecting one of these templates, you will see a small thumbnail of the basic layout in a box to the right. Find one that you think looks good, and click "Create."

2. Click "View" --> "Design." Select anywhere there is text. You can delete what is there and write your own text. Fill out the page to your liking. Dreamweaver does not automatically correct spelling mistakes, so be careful. You can select "Text" --> "Check Spelling" to make sure your page is error-free.

3. Change the colors and font sizes of your page by selecting any of the boxes around text. At the bottom of the page, there should be a button that says "div#..." and is followed by the division that you have selected. Make sure that this button is selected, and choose "Window" --> "CSS styles." To the left, you should see a CSS panel. Click the arrow next to it to drop down the panel and search the bottom for a the icon of a small sheet with a plus on it. It should be with three other icons: a chain link, a pencil and a trashcan. Click the sheet with a plus and a new dialog will appear. In the selector box, make sure it says "#..." and the division you selected. For example, if you have selected "div#mainContent," the selector should say "#mainContent." Click "Okay."

4. Use the dialog that appears to manipulate your site more directly. For example, click "Background." Then click the small box that appears next to "background color." A color selector will appear and you can choose a color. Click "apply" once, and behind the dialog you will see the color you selected in the chosen division. Also in this dialog, you can change text size, font, color and much more. Manipulate it to your liking and click "OK" when you're done.

5. Save your work as index.html. On the far right, under "Files" you should see your saved file. Create a new folder in this space by right clicking and selecting "New Folder." Name it what you'd like. Move the page that you just saved into this folder to help with organization. Expand the folder you just created by clicking the plus next to it. You can do two things: duplicate the first file you saved by right clicking it, selecting "Edit" --> "Copy." Right click the folder and select "Edit" --> "Paste." Open the second file you just created by double clicking it. Click "Save" and make sure to enter a new name. Instead of this, you can also click "File" --> "New" and follow the steps from Step 1 to create a new page from scratch. Make sure to save it under the folder you created.

6. Open the first file again and enter the navigation text. This is meant to direct any site viewers toward another page of your site. Try to keep it simple with single words or small phrases. To link to the other page you just created, highlight the word that you want to use as the link. In the bottom there is a dialog called the "property inspector." If it is not there, click "Window" --> "Properties." In the top right of the property inspector, there is a "Link" text box. At the end of this box is a folder and a compass icon. Click the folder. Navigate to your other saved file (from Step 5). At the bottom of the dialog, click "Relative to: Site Root." Click "OK." Press F12 to preview your website in the browser.

7. Continue to work using Steps 1-6. You can create new pages and link them all together to make a complete website. Remember to save your work frequently.

References

• The Site Wizard: Dreamweaver Tutorial