Getting Started with Dreamweaver MX 2004
26 February 2004
Copyright, Information Technology
The University of Texas at
Creating Web pages is made simple with Dreamweaver. Instead of hand-writing
code in the computer language HTML, Dreamweaver writes it for you! This
WYSIWYG application allows you to point and click your way to an outstanding
This handout introduces the workspace and basic features of Dreamweaver.
It covers formatting text, inserting images, using layers to control
page display, linking to other pages, and provides a foundation in Web
Before You Begin
The Internet is a network of computers and cables that transmit data
The World Wide Web provides a Graphical User Interface, or GUI, for
some of the data being transmitted on the Internet. Browsers are the
applications that know how to display the data being transmitted via
the World Wide Web. Two examples of browsers are Netscape and Internet
Explorer. Programmers tell browsers what to display using a language
called HTML. HTML stands for Hypertext Markup Language.
When you want to create a Web page, you first create it on your local
computer. Your computer is sometimes connected to the Internet. In order
to share your Web page with others or “make it live” you must transfer
the files to a server. A server is different than your computer because
it has a dedicated connection to the Internet, which makes it easy for
other computers to find. When you save a Web page on your computer you
need to use the file extension .html to let the computer know that it
is a Web page.
If you want your page to be the default page that the browser displays
you should name it index.html . This is because Web
page locations, or URLs (uniform resource locator) always end in a folder/directory
name or a file name. The browser will automatically generate a
list, or index, of the files in a directory. If the user types in a
URL ending in the directory name he will see the list that was
generated by the browser. In order to prevent the user from seeing
this list, you can provide your own version of an index, named
A Web page is an html file. A Web site consists of multiple Web pages
that are somehow related. The pages in a Web site are usually found in
the same folder/directory and are connected by links.
Dreamweaver is a WYSIWYG program, which means what you see is what you
get. Dreamweaver writes the HTML for you. Although Dreamweaver is a WYSIWYG
program, you should always test in different versions of different browsers
on different platforms.
Exploring the Dreamweaver Interface
Dreamweaver opens with a main document window and several panels that
are docked along the top, right, and bottom of the screen. The main document
window is where you will build your Web pages.
One of the panels along the right-hand side of the screen is the Files
panel. This panel keeps track of all the files in your site; Web pages,
images, and more.
This panel can be expanded for additional functionality
by clicking on the Expand/Collapse Button.
The two panels that are used most often are the Insert
Panel, located below the Menu Bar, and the Properties Panel, located
below the Document Window.
The Insert Panel allows you to insert various objects such
as images, anchors, and e-mail links. These objects are arranged by group.
The Common group is shown by default.
The Properties Panel allows you to control the properties
of the currently selected object or text. The Properties will change
depending on the type of item that is selected in the Document Window.
Create a new folder
This is where you will store your Web page and all the files with which
you build it. This can be on your Desktop, in your My
Documents folder, or wherever you like. This will become your Local
The Local Root Folder will be Dreamweaver's starting place when it looks
for a file. Dreamweaver will create a path based on where the file is
in relation to the Root Folder.
Define a new site
1. Launch Dreamweaver.
2. The Dreamweaver splash screen opens and provides
a list of options.
3. Under Create New choose Dreamweaver Site.
In the Site Definition dialog
box, enter the name of your site. This name is used to help you keep
track of your site locally and will not be published to the Web.
5. Choose "No, I do not want to use a server
technology", unless you
know otherwise. Click Next.
6. Choose "Edit local copies on my machine,
then upload to server when ready."
7. Click the folder icon below
the question, "Where on your computer do you want to store your files?"
Navigate to your newly created Root Folder. Click Select, then click
8. If you know your server name and connection information you
can enter it now. If not, choose None from the drop down list. Click
9. Review the information and click Done. Dreamweaver scans any files
in your Local Root Folder to help it keep track of your actions as
10. In the Dreamweaver splash screen, click HTML under Create New.
You should now have a blank document open and your site information
should appear in the Files Panel on the right side of the screen.
and format text
1. In the Document Window type Your Name's Homepage and
select (highlight) the text you have just typed.
2. In the Properties Panel click the center alignment button to center
Next to the word Format there is a drop down list that
allows you to choose the Heading size for selected text. Headings 1
through 6 cause these formatting changes:
- Make text bold
- Change the text size
Heading 1 is the largest and Heading 6 is the smallest.
1. Choose Heading 1. The text is quite large and takes up a good deal
of the page.
2. Choose Heading 2 or Heading 3. Click to the right of the text to
Spacing works a little differently in Dreamweaver than in a standard
word processing application. To add extra spaces between words you
cannot simply press the space bar. Instead you must insert a non-breaking
space, or nbsp, found in the Text group of the Insert Panel.
1. In the Document Window, click between your name and the word Homepage
to relocate the insertion point.
2. Press the spacebar a few times and notice that no spaces are inserted.
3. Select the Text group from the Insert Panel.
From the Characters drop down list at the right end of the Insert Panel,
choose Non-breaking Space.
Click the nbsp button a
few more times to add additional spaces.
6. Use the backspace key on your keyboard to remove each space one
To add a blank line in between lines of text you may simply press
the Enter/Return key on your keyboard. This will create a new paragraph
using the <p> tag and will allow for a different text format. This
method also leaves some space between the previous paragraph and the
1. Position the insertion point at the end of the line of text and
press Enter on your keyboard.
2. Notice that your cursor is now located on the line below your text.
Type the text, "Please read on to learn more about me."
3. Select the text that you just entered and choose a different heading
size from the Properties Panel. Notice that the heading size of your
first line of text remains the same.
4. Position the insertion point at the beginning of the second paragraph.
Press the backspace key to move the text up to the first line.
5. Notice that the text you just entered was converted to the heading
size of the first paragraph.
6. From the Characters drop down list in the Text group
of the Insert Panel, click
the Line Break button or press Shift + Enter on your keyboard. Notice
that your text goes immediately to the line below, with no additional
space added between the two lines.
7. Highlight the second line of text and change the heading size in
the Properties Panel. Notice that both lines of text change.
8. From the Edit Menu choose Undo Text Format, or press Ctrl + Z.
9. Position the insertion point at the beginning of the second line
of text and press the backspace key on your keyboard. All of your text
should now be on the first line.
10. Press Enter on your keyboard to move the sentence into a new paragraph.
11. Readjust the formatting of each paragraph as you like.
Also notice the standard formatting tools that are included on the
right side of the Properties Inspector (while your cursor is within
text). The buttons for indent, out dent, bulleted list,
numbered list, and alignment all work very much like in a word processing
Save your document
1. Under File choose Save.
2. Navigate to your Root Folder and save your document as index.html.
To quickly add some color you can assign a background
color to the page. This information is communicated in the HTML code
itself, not as a separate image, so it loads very quickly.
1. Click the Page Properties button in the Properties Panel.
2. The Page Properties dialog box will appear.
3. Select a background color by clicking the box to the
right of the word Background, called the color picker,
or by typing in the 6-digit code for that color. (This is the hexadecimal
color code that browsers use to identify colors.) Click Apply to see
if you like the color. When you are satisfied with your color choice
TIP : If you click the Color Picker and want to exit without
choosing a new color, press Escape . Clicking somewhere else
within Dreamweaver will pick whatever color the browser is currently
Background images are separate image files that can be applied to
specific pages or entire sites. The browser must upload this file in
addition to the HTML file. Keep background image files small to reduce
the download time for your users. The background image will tile both
down and across your page, so even a small image can fill up the entire
1. In the Properties Panel click the Page Properties button.
2. Click Browse next to "Background image" and navigate
to the desired image (which should be stored in your root folder).
3. In the Page Properties dialog box click Apply to try
out the image, or click OK to apply the image.
3. If the image you would
like to use is located outside of your root folder, Dreamweaver will
prompt you to place a copy there. You should click Yes and save the
file in your root folder with the same name.
The title of a Web page will appear in the title bar of the browser.
It will also appear when the user makes your page a bookmark or favorite,
so make it intuitive and descriptive. The page title is not the same
as the file name.
1. Locate the Title box just in the toolbar at the top of the Document
Window and type Welcome
to Your Name's Homepage!
2. Press Enter to confirm the page title.
3. From the File Menu choose Save or press Ctrl + S on your keyboard.
Testing in the Browser
Although Dreamweaver is a WYSIWYG application, your page may not appear
exactly the same when displayed in the browser. It is important to
test your page in the browser before publishing it to the Web. Certain
fonts and colors may appear differently than you were expecting, animations
and links will be active, and several other details could need some
Dreamweaver's Preview in Browser feature will create a temporary version
of your file and load it in the browser. This file will be stored locally
and will keep you from having to save your page before viewing it in
1. Click the Preview in Browser button in the toolbar located across
the top of the Document Window.
2. From the drop down list, choose the browser that you
would like to use to test your page.
Images on the Web are generally one of two types, GIF or JPEG. The
GIF format efficiently relays information about drawings because it
focuses on areas that are the same color from dot to dot, or pixel
to pixel. JPEGS are usually photographs and are better for images in
which there are many colors with many variations.
1. Position your cursor at the end of your text and press Enter on
2. Click the Insert Image button in the Common group of the Insert
TIP: If you move your mouse over a button and leave it still
for a moment, a label will appear telling you what the button does.
3. The Select Image Source window pops up.
4. Navigate to the image you wish to insert and click OK.
The image will now appear on your page.
5. If the image you would
like to use is located outside of your root folder, Dreamweaver will
prompt you to place a copy there. You should click Yes and save the
file in your root folder with the same name.
6. Save your document.
7. Click the Preview in Browser button in the toolbar at the top of
the Document Window to see you page in the browser.
Note that the Properties Panel now reflects the properties of the
current selection, an image.
On the right side of the Properties Panel there is a
field for Alt, or alternate text. This is text that will be displayed
in the event that the viewer cannot properly view the image. This may
be due to a visual impairment, and slow modem connection, or a missing
8. Position the cursor within the Alt field and enter
some text that describes the image. Think of what text you would like
to see if you were not able to view the image.
9. Press Enter on the keyboard to confirm the alternate
You can resize an image in Dreamweaver by clicking and dragging one
it its three handles. You can constrain the proportions of the image
while resizing it by holding down the Shift key.
TIP: Do not use Dreamweaver for dramatic changes in size.
If your image is large and you make it smaller, the user will still
have to wait for the large file size download time. If your image is
small and you make it bigger, the image will pixilate because there
are not enough pixels, or dots of color to fill in the space.
Layers allow you to to position text and objects on your
page according to the distance from the top and left of the window's
edge, rather than using spaces, blank lines, and alignment to control
1. From the File Menu select New.
2. In the New Document dialog box, select HTML and click Create.
3. From the Window Menu choose Layers. The Layers Panel appears in
the upper right corner of the screen.
In the Layout group of the Insert Panel click the Draw Layer button.
As you move the cursor over the Document Window, the cursor becomes
a cross hair.
5. Use this cross hair. to draw a layer. Begin at the upper
left and drag to the lower right.
6. Repeat steps 4 and 5 to draw two more layers.
Your page should look similar to this:
These layers will be the containers for all content on the page. Everything
on the page should now be placed in a layer to create the most consistent
display. It is easy to resize a layer after it has been drawn.
on the layer's border to select the layer. Eight little black handles
2. Position your mouse over a handle so that it becomes
a two-way arrow, then drag the handle in or out to the desired size.
3. To reposition a layer repeat step one, but this time click
on the tab in the upper left corner of the layer.
4. Drag the layer by its tab to the desired location.
To reposition a layer repeat step one, then use the arrow keys to
move the layer one pixel at a time, or Shift + the arrow keys to move
the layer ten pixels at a time.
Also notice that the Properties Panel now displays the layer's properties.
Add text to a layer
1. Click within the layer to position the cursor in the
upper left corner of the layer.
2. You can now type and align text within the layer. The
same formatting rules apply to text whether it is placed in a layer
or straight on the page.
Add an image to a layer
1. Click anywhere in the layer to make it active.
2. Click the Insert Image button from the Common group of the Insert
3. The Select Image Source window pops up. Navigate to the desired
image and click OK. Remember to copy the image to the root folder if
it is not already there.
4. Add alternate text in the Alt field of the Properties
5. Save your file in your root folder with a name other
than index. Be sure to use the file extension ".html".
Links are spots on a Web page that can be clicked
to go to another Web page. Links can be text or other objects, such
as images. The text that serves as the link is usually blue and underlined
before it is clicked. This text does not have the be the URL. We
will use links to link to pages outside of our site and also to link
the pages within our site to each other.
1. In the central layer, type I am learning Dreamweaver
at the University of Texas at Austin .
2. Select/highlight the words University of Texas
3. In the Properties Panel type the destination URL http://www.utexas.edu (or
path/file name) in the Link field and press Enter on your keyboard.
4. Test your link by clicking the Preview in Browser button in the
toolbar at the top of the Document Window. If your link is successful
in the browser, use the browser's Back button to return to your page.
If it is not successful, correct any mistakes you may have made in
the URL and preview your page again.
5. Position the insertion point in the layer on the left side of
6. Type the word Home and select the text.
7. In the Properties Panel, click the folder icon next to the Link
box and navigate to the destination file, index.html, then click
OK. You now have a link from your new page back to your homepage.
8. Save your file.
Date and Time Stamps
Insert the Date
The creation date and last modified date are usually included at
the bottom of Web pages. Dreamweaver can help you include both of
1. Place the insertion point after the text in the central layer
and press Enter twice to make leave a blank line.
2. Type "Created on: ".
the Common group of the Insert Panel, click the Insert
4. In the Insert Date dialog box, choose the format Dreamweaver
will use to display the date and time.
6. Click the Line Break button from the Text group of the Insert
Panel or press Shift + Enter on your keyboard.
7. Type "Last Modified: ".
8. In the Common group of the Insert Panel, click the
Insert Date button.
9. In the Insert Date dialog box, choose the format
Dreamweaver will use to display the date and time. This time, check
the option for "Update automatically on save". This means that each
time you edit this file and save, Dreamweaver will automatically
update this date and time.
Your page should now look something like this:
It is a good idea to include a method by which you
can be contacted. Users may want to notify you of an error, provide
you with additional content, or ask for your permission to borrow
from your content. An easy way to provide this outlet is to create
an e-mail link.
1. Place the insertion point after the Last Modified date and click
the Line Break button from the Insert Panel or press Shift + Enter.
2. Type "Created
3. In the Common group of the Insert Panel click the
Email Link button.
the Text field type your name (or the text that you wish to serve
as the link). In the second text field of the dialog box that appears,
enter your e-mail address.
5. Click OK. When the user clicks on the e-mail link,
a new e-mail message will open in his default e-mail application
with your e-mail address in the To: field.
6. Save the file.
Switching Between Documents
You may have noticed the tabs at the top of the document
windows that have the file names listed on them. Use these tabs to
easily switch between document windows that are maximized.
1. Click on the index.html tab to bring your homepage
to the front.
When your Document Windows are not maximized, you can
make a window active by clicking somewhere in the window, or by choosing
the document from the Window Menu.
2. On your homepage (index.html) insert a few blank
lines and type the following text:
Home | Hobbies
You may wish to substitute the word "hobbies" with the title of
your second page.
3. Select the word "Hobbies" and click the folder icon next to the
Link field in the Properties Panel.
4. Navigate to the correct page and click OK.
index.html should now look something like this:
5. Save index.html.
A site map lets you see how the pages in your site
relate to each other. Think of it as a genealogy chart for your Web
site. It will help you manage your pages and see where you may have
left out links.
1. Click the Expand/Collapse button in the Files Panel.
2. Click the Site Map icon in the toolbar of the expanded Files
Panel and choose Map and Files.
You should see something like this:
3. Click on the plus signs next to the files in the site
map to see what each is linked to.
4. Click on the Expand/Collapse button again to return
to document editing mode.
Publishing Your Files
Dreamweaver has a built-in FTP Function. FTP stands for File Transfer
Protocol and is the standard method for moving files from your computer
to a server. Putting your files onto a server allows them to be viewed
by anyone with a Web connection.
If you would like to publish your files to a remote server from
within Dreamweaver using FTP or one of the other provided methods,
you will need to manage your Site.
Setting up a Remote Server Connection
1. In the Files Panel, click the drop down list where your site
name appears and choose Manage Sites.
2. Choose your site and click Edit.
3. Click Next until you get to the Sharing Files screen.
4. Choose your connection method from the drop down
list under "How do you connect to your remote server?"
5. Fill out the required information and click Test
Connection to check for errors. Click Next.
6. Choose "No, do not enable check in and check out."
7. Review the information and click Done.
8. Click Done.
Uploading Your Files
1. In the Files Panel click the Connects
to Remote Server button. Once you have connected you should have
a list of files on the remote server and the Connects to Remote Server
button should be lit up green.
2. Click the Expand/Collapse button in the Files Panel.
3. In the toolbar click the Site Files button to display
both the local files and the remote files.
4. Select all of the files in the Local Files list
that need to be uploaded and click the blue Put arrow to upload them
to the remote server.
Congratulations! You have now published your Web site.
For future updates, simply save an upload only the files that have