• Choose Start | Programs | Macromedia Dreamweaver

Screen Layout

One look on opening Dreamweaver finds a collection of buttons, toolbars, and menus that help Web authors enter page elements such as text, images, and links. You will see the following four items: Menu bar, Tool Options bar, Property inspector, and Launcher bar. You will learn how to use these tools in this teaching reference.

Menu Bar - Click on any of the words on this bar to see a menu of options in that category. Some categories such as File and Edit, used for saving files and to copy and paste text, are found in most programs. Other categories offer options more specific to Dreamweaver.

Tool Options Bar - Most Dreamweaver tools have options that are displayed on the Tool Options bar. These options change as different tools are selected.

Properties Inspector - The Properties inspector frees Web authors from the tedium and drudgery of having to create pages in raw HTML code. The Properties inspector allows you to examine and edit properties for the currently selected page element, either an object or text.

Objects panel - Many of the commonly used tools can be found here. These same functions can also be found on the menu bar, however, you will likely find it more convenient to use these shortcuts.

Inserts a picture

Inserts a rollover image

Inserts a table

Inserts a horizontal line

Inserts an email link

Inserts current date

Launcher bar - The launcher bar, found at the bottom of the document window, provides easy navigation among Dreamweaver venues.

Note: We will frequently refer to the toolbars and the menu bar. Each button has one function while each word on the menu bar offers a host of options. If you are not sure what a button does, point at it and a balloon will reveal its function. As always when all else fails, read the directions. You will find a guide online under Help on the menu bar.

To maintain a consistent look throughout your organization's site, your Web site developer or Web manager will likely provide you a template.

1. To obtain your template for this teaching reference, download our self-extracting file. click here.
2. Click on the Save button and save the file template.exe to your desktop.
3. Double-click this file on your desktop to extract it to your machine. It should default to C:\ where it will make a folder called website.
4. Click on the Install button.

Note: Organizing a Web site into folders and subfolders makes lots of sense if you are building a large site with many pages!

Return to the Dreamweaver opening screen.

• On the menu bar, select Site | New Site.
• In the Site Definition dialog box, under Local Info, type My Web Site in the Site Name box.
  
• In the Local Root Folder box, type C:\website and click on OK twice.

You are ready to create your first page with our template.

1. Select File | New from Template on the menu bar.


2. Highlight "template" and click on the Select button.
3. Save the template by selecting File | Save as from the menu bar.
4. Name this page index.htm and click on the Save button.

Tables are used to divide and organize information on a Web page by separating the page into sections. Complete the following steps to create a table with two columns and three rows.

1. Click in the large white area of your template to be sure your cursor is in the body of your page.
2. Click on the Insert Table button on the Opjects panel or select Insert | Table from the menu bar.
3. Set Rows to 3, columns to 2, and Width to 90 Percent.

Note: Perhaps you will want to center the table. You may easily edit the table properties by first selecting the table and then using the Property inspector.

Tip: A border of 0 would allow the table to be invisible.

Now that you have a place to put all of the information associated with your new Web site, you can begin adding content. Dreamweaver is one of many WYSIWYG (what you see is what you get) editors allowing authors to create Web pages in a user friendly, point and click environment similar to modern word processing programs.

1. Personalize the Website title by replacing the text, "My Website" in the upper left corner of the template with Jane's Site (you may use your own name if you prefer).
2. Click in the top left cell of the table and type Welcome to Jane's[Note: Press Enter key here.]Dreamweaver 4 Workshop.
3. Highlight Dreamweaver 4 and click on the Bold button in the Properties inspector. Note: If the Properties inspector is closed, you can open it by selecting Windows | Properties from the menu bar.
4. To change text color, highlight Dreamweaver 4. Then click on the text color box on the Properties inspector and select a green in the color palette.
5. Finally, highlight all of the text, "Welcome to Jane's Dreamweaver 4 Workshop" and use the Property inspector to center the text in the cell.

Note: Continue to enter text as you see fit. At any point, you may run Spell Check! Just select Text | Check Spelling from the menu bar. This is a good time to save your page. Remember to save often!

Tip: Have you noticed that when entering text and you press the Enter key, your cursor will skip a line? To avoid extra blank lines, press Shift-Enter and your cursor will simply go to the next line.

Click in the second cell on the left in your table and type the following text:

Objectives

You will learn how to add text to your site.

You will learn how to insert graphics onto your site.

You will learn how to create links from your site.

Headings - Headings are used to set titles and subtitles apart from the main text on a page. There are six different heading sizes with Heading 1 being the largest and Heading 6 the smallest.

Tip: For good Web page design, avoid skipping a heading size on the page. For example, If you use Heading 3 for your title, you should use Heading 4 for subtitles on your page.

1. Highlight the text, "Welcome to Jane's Dreamweaver 4 Workshop", and make it Heading 3.
2. Highlight the text, "Objective", and make it Heading 4.

Note: All the tools you need to format text are found on the Properties inspector.

Ordered/Unordered Lists - Lists are used to organize data on a Web page for a clean, concise, professional look. You can create bulleted (unordered) lists, or numbered (ordered) lists. You may see an example of an ordered list in Activity 2 and an example of an unordered list in activity 3.

1. Highlight the words,
   
   "You will learn how to add text to your site.
   
   You will learn how to insert graphics onto your site.
   
   You will learn how to create links from your site."

2. Click on the Unordered List button in the Property inspector.

Continue to enter information on your page as desired and save your page.

The creation of the World Wide Web in the early 1990's and subsequent development of graphical browsers brought the Internet to life with a rainbow of colors, images and sound. You can insert an image by completing the following steps:

1. In the table you created, click in the top right cell.
2. Click on the Image button or select Insert | Image from the menu bar.
3. Highlight kid.gif in "c:\My Website\images\DWT_kid.gif", click on OK and save your page.

Note: Keep in mind when adding images to your page, it can also add hundreds of seconds of download time.

Rollover Buttons are fun additions to your site! They are an added way to navigate. In the Photoshop 6 teaching reference you learned to make a button. For a rollover button you will need two graphics of the same size.

1. Click in the second cell on the right.
2. Click on Insert | Interactive Images | Rollover Image.

Once you are done, press the F12 key and it will bring up a browser window that should look something like this: