How to Use Macromedia Dreamweaver
Macromedia Dreamweaver is a full-featured professional web design tool that is also easy for a beginning web designer to learn. Dreamweaver's WYSIWYG (what-you-see-is-what-you-get) interface makes designing a web page as simple as typing a letter. For those comfortable with HTML, Dreamweaver offers the ability to work easily with the behind-the-scenes code. An intuitive workspace with menus, panels and toolbars allows both beginners and experts to create a professional-looking website in a short period of time.
Other People Are Reading
Things You'll Need
- Macromedia Dreamweaver installed on your computer A registered domain name for your site A web hosting account to store your site FTP directions for connecting to your web host to upload files A written plan of how you want your website organized A drawing (on paper) of the layout design or a web template to start with Graphic files for the website in .jpg, .gif or .png format
Instructions
-
Create the Site
-
1
Start Dreamweaver.
-
2
Choose "Designer" in the Workspace Setup box if it comes up (only the first time you launch the software).
-
-
3
Select "Dreamweaver Site" under Create New (see Figure 1). Have the server and FTP details provided by your web host handy for the next few steps.
-
4
Enter a short name for your site when prompted by the Site Definition wizard---this is purely for identification purposes within the Dreamweaver program and will not affect your actual website.
-
5
Enter the domain address for your site. Click "Next" (see Figure 2).
-
6
Click "No" if asked about server technology. That is an advanced option and is not part of this document. Click "Next."
-
7
Select "Edit local copies on my machine, then upload to server when ready," then choose a folder on your local hard drive to hold the files for your site. Each site should have a unique folder. If you don't have a folder ready yet, you can create a new one now. Click "Next."
-
8
Choose FTP as the method for connecting to your host server, and enter the login information from your host: the FTP address (usually a web address beginning with http://), the name of the folder that holds your web files on the server (some hosts ask you to put web files in a public_html or www folder) and your username/password to log in to the web host account.
-
9
Check the "Save" button if you want to save the login information to Dreamweaver's preferences. This way, Dreamweaver can upload/download files without asking you to log in every time, but only do this if you don't share the machine with other people, or they will have access to your web account.
-
10
Check the box for "Secure FTP" if your web host tells you this should be done. Click "Test Connection" to see if you entered the information correctly. If you receive an error, contact your web host support team for assistance. You must be able to login before you can upload any files to your web server.
-
11
Click "Next" to view a summary of the information, and click "Done" when you are satisfied with the settings. You can always revise them later using "Site-->Manage Sites..." from the main menu bar at the top of the screen or the pop-up menu to the right on the Site Files panel (see Figure 3).
Create a Page
-
12
Choose "HTML" under Create New on the Dreamweaver main screen to start a new web page. If this screen is no longer showing, start a new page by going to the File menu and selecting "New-->Basic Page-->HTML." See Figure 3 for a picture of the Dreamweaver workspace: a blank document surrounded by toolbars, panels and palettes.
-
13
Note the Insert toolbar at the top. This allows you to insert different objects, such as images and tables, on your page. This toolbar can display as menus or tabs (see Figure 3).
-
14
Examine the panels to the right of the new document. These contain information about the website you just defined and additional Dreamweaver features such as CSS (style sheets). When you save this new web page you have just started, its name will appear in the local site files list in the right-most panel.
-
15
Look to the bottom of the screen. The panel there is the Properties inspector. When you click on an object on your web page, (i.e., text, a graphic or table), the choices in the Properties panel will change to those associated with that particular object. By default, the Properties panel shows attributes associated with text objects, the default object in a new Dreamweaver window.
-
16
Type some text and watch it appear in the previously blank document. Practice formatting this text with the selections for style, font, size and color located in the Properties inspector panel.
Insert Hyperlinks
-
17
Select the text on your web page that will become the "hot link" or "hyperlink" to a new web page.
-
18
Add an external link (a web location outside your site) by typing the full URL of the link, starting with http://, in the "Link" box on the Properties panel.
-
19
Add an internal link (to a page inside your site) by clicking the folder icon to the right of the "Link" box and choosing the file from the dialog box. OR, if your site isn't too large, you can use the "Point to File" crosshairs icon on the right of the "Link" box and drag the pointer to the file in the Local Site File list you want to link to (see Figure 4).
Insert Graphics
-
20
Click to place your cursor on your web page where you want the graphic to appear, then click the "Insert Image" button on the Insert toolbar (located at the top of your screen and circled in Figure 5).
-
21
Choose the graphics file you wish to add from the dialog box that opens. Graphics should be resized and ready to be inserted before you add them to your page. You'll waste disk space and slow the speed of your page if you put a large graphic on your page and reduce the size with the H (height) and W (width) Image attributes in the Properties inspector.
-
22
Remember: Image files must be JPEG/JPG, GIF or PNG to work on a website, and PNG images may not show up in older browsers.
Upload the Site
-
23
Choose "Save" from the FILE menu as you create pages for your site. Be sure the files all save into the same folder, the one you chose when you first defined your site. Verify that you can see the names of the files in the Local Site Files List panel (on the right).
-
24
Check that the name of your "home page, " the file you want to come up when a visitor types your domain into the browser, is "index.htm" or "index.html" unless your web host has given you other directions. Some hosts ask for the file to be called "default.htm" or "default.html."
-
25
Click to select the file you want to upload to the server in the Local Site Files panel. Shift+Click to select multiple files.
-
26
Click the blue "up" arrow at the top of the panel to "Put" the selected files on your server (see Figure 6). Dreamweaver will prompt you to also put any connected files on the server as well, such as graphics you inserted to the page while you were editing. Click "Yes" the first time you upload the page or if you aren't sure all the objects have been uploaded yet.
Test the Site
-
27
Open a web browser.
-
28
Enter your domain address.
-
29
Check your web page layout; test the links. If you find problems, return to Dreamweaver, double-click the file in your Local Site Files panel, make changes, save and upload again.
-
30
Repeat this process until your website works the way you want it to.
-
1
Tips & Warnings
If you hover your cursor over a button or menu without clicking, help text will appear that tells you what the item does. Dreamweaver has a vast number of features beyond the basics. Invest in a good Dreamweaver reference book, such as "Dreamweaver for Dummies" or the "Dreamweaver Bible." Consider purchasing Dreamweaver's sister program, Fireworks, if you need a graphics program for customizing images for your website. FIreworks is designed specifically for working with web graphics and Dreamweaver.
Back up your work constantly on a separate disk or folder after you make changes.
