How to Make a Website With Dreamweaver 8

Macromedia Dreamweaver 8 is a comprehensive web design tool favored by web professionals, but it is easy enough for the beginning web designer to use too. Dreamweaver utilizes a WYSIWYG (what you see is what you get) interface that makes designing a web page as easy as typing a document into a word processor. The program also offers the ability to work directly with the web page code for those who are comfortable with HTML. Intuitive menus, panels and toolbars allow beginners and experts to add advanced features to their websites with ease.

Instructions

Start Dreamweaver

1. Launch the "Dreamweaver" application, and if you are asked to choose a "Workspace Setup," choose "Designer."

2. 

   A dialog box will open asking what you want to do (see FIgure 1).

3. Under "Create New," choose "Dreamweaver Site."

Define Your Site

1. The "Site Definition" wizard will prompt you for information about your site. Have the server details provided by your web host handy.

2. 

   Enter a short name for your site--this is how it will be identified in the list of sites in the Dreamweaver program. Then enter the domain address for your site. Click "Next." See Figure 2.

3. Click "No" if asked about using server technology to build your site. That is an advanced feature of Dreamweaver and not part of this tutorial. Click "Next."

4. Choose "Edit local copies on my machine, then upload to server when ready," and select the folder on your hard drive where you will store the files for your site. Each site should have its own folder. If you don't have a folder yet, you will be able to create one now. Click "Next."

5. Choose FTP as the method you will use to connect to your remote server. Then enter the login information from your web host. You will need to know the FTP address (usually written as a web address starting with http://), the folder name if the files are not meant to be uploaded to the root directory of that web address (some hosts have you put web files in a www folder), and your username and password to log in to the account.

6. Check the "Save" button if this is your primary computer and you are the only one using it. That way Dreamweaver can upload and download files from your site without prompting you to log in every time.

7. Check off the box for "Secure FTP" if your web host tells you this is necessary. Use the "Test Connection" button to see if you entered the information correctly. If you receive an error, you will need to contact your web host support staff for assistance before you can upload any files.

8. 

   Click "Next" to view a summary of the information you have entered. Click "Done" when you are satisfied with your site definitions. You can always revise them later by selecting "Site" and "Manage Sites" from the main menu bar at the top of the screen, or from the pop-up menu on the right-hand side of the "Site Files" panel (see Figure 3).

Create a Page

1. The Dreamweaver main dialog box (Figure 1) should still be open after you define your site, so choose "HTML" under "Create New" to start a new web page. If the dialog box is not still open, from the "File" menu choose "New," "Basic Page" and "HTML." You now have a blank web page document on your screen, surrounded by Dreamweaver's panels, palettes and toolbars (see Figure 3).

2. The "Insert" toolbar at the top allows you to add different objects to your page, such as image files and tables. This toolbar can display as menus or tabs.

3. The panels to the right of the blank document contain information about your site and other Dreamweaver features, such as style sheets and templates. After you save this new web page file, you will see its name appear in the panel that contains your local site files list.

4. The panel down the bottom of your screen is the "Properties" inspector. Depending on which object is selected, (some text, a graphic or a table), the items in the "Properties" window will change to allow you to alter attributes associated with that specific object. Right now the "Properties" window shows the attributes associated with text, since that is the default object in a new web page document.

5. If you start typing, you will see text appear on your web page. You can format this text using the "Properties" inspector selections for style, font, size and color.

Add Graphics

1. 

   Place your cursor where you want the graphic to appear, then click the "Insert Graphic" button on the "Insert" toolbar at the top of your screen (circled in Figure 4).

2. A dialogue box will open asking you to locate the graphic file you wish to add to the web page. Graphics should be edited and re-sized to the dimensions you need before you add them to your web page. You waste disk space and increase page load time if you insert a large graphic onto your web page and shrink it to fit with the height and width image attributes in the "Properties" inspector.

3. Understand that graphics files need to be in JPEG, GIF or PNG format to work on a web page. PNG graphics may not be visible in older browsers.

Add Hyperlinks

1. Select the text on your web page that will become the "hot link" or "hyperlink" to a new web page.

2. 

   For an external link (a web address outside your website), type the URL of the link, starting with http://, in the "Link" box on the "Properties" inspector (Figure 5).

3. For an internal link (a link to a page in your site), click the folder icon to the right of the "Link" box and choose the file from the dialog box, or use the "Point to File" cross-hairs icon to the right of the "Link" box to drag a pointer to the file in your Local Site File list you wish to link to. (Figure 5).

Upload Your Site

1. Choose "Save" from the "File" menu to save your web pages as you create them. Be sure you save them into the folder you chose to hold all your website files when you set up your site, and that you see the file names appear in your "Local Site Files List" panel on the right.

2. Your "home page" file, the page you want to appear when someone types your domain address into their web browser, should be named "index.htm" or "index.html" in order for the web server to recognize it as your home page.

3. In the "Local Site Files List" panel, click the file you wish to upload to the web server. You can "Shift+Click" to select more than one at a time.

4. 

   Click the blue "Up" arrow at the top of the site files list panel to "Put" the files on your web server (Figure 6). Dreamweaver will connect to your web server, then prompt you to put any related files up on the server as well. Related files are any objects, such as graphics, you added to the web page while you were editing it. Click "Yes" if this is the first time you're uploading the page, or if you aren't sure all the objects have been uploaded before.

View and Test Your Site

1. Open a web browser and enter the address of your domain. Check how your web page looks, test the links.

2. If you discover any problems, return to Dreamweaver to make any changes to the pages in your "Local Site Files" list, then upload them again.

3. Continue this process until you have the website working the way you want it to.

Tips & Warnings

• Place your mouse pointer on a button or menu in Dreamweaver without clicking to view help text that tells you what the button or menu does. Invest in a good Dreamweaver reference book, such as "Dreamweaver 8 For Dummies" by Janine C. Warner, "Dreamweaver 8: The Missing Manual" by David Sawyer McFarland, or the "Dreamweaver 8 Bible" by Joseph W. Lowery. Practice one feature of Dreamweaver at a time instead of trying to learn everything at once. Consider purchasing a good graphics program for editing and customizing graphics for your website. Dreamweaver's sister program, Fireworks, is designed specifically for web graphics and works seamlessly with Dreamweaver.

• Always back up your work onto a separate disk or folder after you make changes.

Resources

• Adobe Dreamweaver 8 documentation
• Adobe Dreamweaver development center
• Free Dreamweaver templates
• TechRepublic Dreamweaver 8 resources