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.
Installing a Template
To maintain a consistent look throughout your organization's
site, your Web site developer or Web manager will likely
provide you a template.
To obtain your template for this teaching reference,
download our self-extracting file. click
here.
Click on the Save button and save the file
template.exe to your desktop.
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.
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!
Defining a New Site
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.
Creating the First Page
You are ready to create your first page with our template.
Select File | New from Template on the
menu bar.
Highlight "template" and click on the Select
button.
Save the template by selecting File | Save
as from the menu bar.
Name this page index.htm and click on the Save
button.
Using Tables
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.
Click in the large white area of your template to
be sure your cursor is in the body of your page.
Click on the Insert Table button
on the Opjects panel or select Insert | Table
from the menu bar.
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.
Adding Text
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.
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).
Click in the top left cell of the table and type Welcome
to Jane's[Note: Press Enter key here.]Dreamweaver
4 Workshop.
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.
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.
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.
Formatting Text
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.
Highlight the text, "Welcome to Jane's Dreamweaver
4 Workshop", and make it Heading 3.
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.
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."
Click on the Unordered List button
in the Property inspector.
Continue to enter information on your page as desired
and save your page.
Inserting Images
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:
In the table you created, click in the top right cell.
Click on the Image button or select Insert
| Image from the menu bar.
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.
Making Links
Here are five different types of links that you may want to add
to your Web site:
Absolute link - Link points to an external page, one
that is not within your site.
You must link using the full or absolute address. Create a link
to your favorite search tool.
Highlight the text, "Link 1" and press the Delete key.
Click on the Hyperlink button on the tool bar.
In the Text box type Google.
In the URL box, type http://www.google.com and click on OK.
Note: Links do not work in Dreamweaver. You may check your link
by
pressing the F12 key which will bring up a browser window. Click
on the link you
created to see if it works.
Relative Link - Internal link points to another page
of your site.
Highlight the text for link 4 and press the Delete
key.
Right click and select Make Link.
Select About.htm from C:\website and click OK.
Note: Links do not work in Dreamweaver. You may check your link
by
pressing the F12 key which will bring up a browser window.
Click on the link you
created to see if it works.
Mailto Link - Link to your e-mail.
Right click on the Email graphic and select Change Link.
Change the URL to mailto:workshops@dzfx.com and click
on OK.
Note: Links do not work in Dreamweaver. You may check your link
by
pressing the F12 key which will bring up a browser window. Click
on the link you
created to see if it works.
Named Anchor - Link to a specific location within a Web
page. For
example, you might provide a link from the bottom of a page back
to the top.
Or, you might create a table of contents or index at the top of
your page that i
ncludes named anchors to specific sections within your page or
site.
To create the former,
Click immediately to the left of the Welcome text.
Select Insert | Invisible Tags | Named Anchor
In the dialog box, type Top and click OK.
Click at the bottom of the page and press the Enter key to
extend
the page length.
Type Back to Top at the bottom of your page.
Highlight the text "Back to Top".
Click on the Point to File symbol in the Properties
inspector and
drag your pointer to the anchor at the top of your page.
Note: Links do not work in Dreamweaver. You may check your link
by
pressing the F12 key which will bring up a browser window. Click
on the
link you created to see if it works.
Image Link - Link from a graphic to an external or internal
URL
Right click on the Home picture in the top right of your
template and select
Change Link.
Select index.htm under C:\website and click on OK.
Note: Links do not work in Dreamweaver. You may check your link
by
pressing the F12 key which will bring up a browser window.
Click on the
link you created to see if it works.
Creating Rollover Buttons
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.
Click in the second cell on the right.
Click on Insert | Interactive Images
| Rollover Image.
Conclusion
Once you are done, press the F12 key and
it will bring up a browser window that should look
something like this:
<>
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 
in the Property inspector.
