What is Dreamweaver? Adobe’s Dreamweaver (previously Macromedia’s Dreamweaver) is a WYSIWYG web design tool for users of all skill levels. Dreamweaver is an all in one web design tool capable of creating websites and uploading them via FTP . Dreamweaver does not assist in the creation of graphics. However, since Adobe purchased Macromedia all the new versions such as those found in the CS3 suite integrate with Photoshop. This makes it easier to manage images while working in Dreamweaver, Fireworks, and illustrator.

1. Basic Web Design using Dreamweaver
By Joseph M. Charnin
September 10, 2007

2. Table of Contents
Table of Contents.............................................................................................................................2
Introduction......................................................................................................................................3
What is Dreamweaver?...............................................................................................................3
Getting Started............................................................................................................................3
What will be covered?................................................................................................................4
Creating Dreamweaver files............................................................................................................4
Page properties.................................................................................................................................6
What are page properties?...........................................................................................................6
Appearance.................................................................................................................................6
Links...........................................................................................................................................7
Headings.....................................................................................................................................7
Title/Encoding.............................................................................................................................7
Image placement..............................................................................................................................7
Inserting an Image.......................................................................................................................7
Placing an Image and Adding a Border......................................................................................8
Text placement.................................................................................................................................8
Formatting Text..........................................................................................................................8
Creating a Link...........................................................................................................................9
Basic use of tables............................................................................................................................9
Inserting a Table.........................................................................................................................9
Formatting Tables ....................................................................................................................10
Site preview...................................................................................................................................10

3. Introduction
What is Dreamweaver?
Adobe’s Dreamweaver (previously Macromedia’s Dreamweaver) is a
WYSIWYG1 web design tool for users of all skill levels. Dreamweaver is an all in one
web design tool capable of creating websites and uploading them via FTP2. Dreamweaver
does not assist in the creation of graphics. However, since Adobe purchased Macromedia
all the new versions such as those found in the CS33 suite integrate with Photoshop. This
makes it easier to manage images while working in Dreamweaver, Fireworks, and
illustrator.
Getting Started
Web design is made simple by this program and allows anyone to create a site
with minimal effort. This reference guide will cover the basics of Dreamweaver but will
not cover the basics of html, style sheets, or template creation.
This reference will give the class of ENC4294 the basic understanding of
Dreamweaver. It is assumed that everyone using this guide already has the basic
understandings of fonts and layout principal such as the use of colors. This guide will
cover creating Dreamweaver files, page properties, image placement, text placement,
basic use of tables, site validation and site preview. The image and Lipsum Ipsum text
referenced in this manual is available under the main discussion for our class in Webct.
Dreamweaver can be purchased via Adobe’s web site for about $398.99 or at the UCF bookstore for
$199.95 with the proof of current student enrollment.
1
What you see is what you get
2
File Transfer Protocol is used to connect a users computer to a server in order to upload a
website to the web
3
CS3 is a bundle of Adobe of products, which includes Dreamweaver, Photoshop, Flash,
illustrator, and other software available for designing websites.

4. What will be covered?
1. Creating Dreamweaver files
2. Page properties
3. Image placement
4. Text placement
5. Basic use of tables
6. Site validation
7. Site preview
Creating Dreamweaver files
1. Create a folder named ‘web site’ by right clicking on the Desktop and selecting ‘Create
New Folder’.
• This is the location you will save your .html files to.
2. Open the ‘web site’ folder and create another folder entitled ‘images’.
• This is the location you will save images to.
3. Go to the main discussion for our class and download the logo image provided in the
Dreamweaver files post.
4. Save this image to the recently created ‘image’ folder.
5. Open Dreamweaver by clicking on the Dreamweaver 2004 MX link located on the
Desktop.
6. Once Dreamweaver loads you will see the menu below.

5. 7. Click on ‘HTML’ listed under Create New.
8. Once the blank .html document loads click on ‘Site’ on the top menu bar and then select
‘New Site…’.
9. Select the ‘Advanced’ button from the top of the new window.
10. On the new screen you will need to edit the following fields.
• Site Name: This should either be the domain name, company name, or something
short and descriptive. For this project please use ENC4294.
• Local root folder: Change this to the recently created folder ‘web site’ located on
your desktop. To do so click on the folder icon next to the text field to browse to
your ‘web site’ folder.
• Default images folder: Change this to the recently created folder ‘images’
located on your desktop within ‘web site’. To do so click on the folder icon next
to the text field to browse to your ‘images’ folder.
The other options presented are not required when creating files for CD publication.
11. After changing the required fields click the ‘ok’ button located at the bottom of the
window.
12. Finally click on ‘File’ from the top menu bar and select ‘Save As’.
13. Change the file ‘untitled1.html’ to ‘index.html’ and save the file.
Dreamweaver is now setup and ready to be used.

6. Page properties
What are page properties?
Page properties control the appearance for all of the fonts, text colors, links,
headings, and the background. The title field is also found in this menu and should be
changed because it will appear at the top of every browser that views the page. Below is
an example of the basic settings, which will affect all text that is not a link. Page
properties are being used in place of complicated style sheets commonly known as .css.
This section will not cover the ‘Tracing Image’ tab because it is used for more
complicated designs and will not affect your web site. The options for background
images will also be skipped; these fields should be left blank.
Appearance
1. Click on ‘Modify’ and select ‘Page Properties’ from the top menu bar.
2. By default page properties opens to the ‘Appearance’ tab. Change the font type to
something suitable such as “Arial, Helvetica, sans serif”.
3. Set ‘Size’ to one that will appear the most on your site, generally 12 is standard and
should be used for this site.
This setting only affects texts that are not listed as a header or a link. For more information on headers
and links please refer to their section below.
4. The text color can be set to any color, but for this exercise please choose black.
5. The background color can be set to any color, but for this exercise please choose

7. white.
6. Finally the margins will control the distance between the site content and the frames
of any Internet browser. Set these all to zero for this exercise.
Fonts, text color, and size can be altered while working within any .html file just as they could
be in a Microsoft Word document. These settings are used to help create an organized
appearance in the final product.
Links
1.
Headings
1.
Title/Encoding
1.
Image placement
This section will cover the basics of inserting an image, positioning it, and applying a
border to it. For this exercise we will use the ENC4294 logo located within your image folder.
Inserting an Image
1. Click on ‘Insert’ and then select ‘Image’.
2. Select logo.jpg from your ‘images’ folder.
3. Use the ‘Alternate text’ field to label pictures. This is an optional step and can only
be seen if the image doesn’t load or if the image is large and takes a while to load. In
either case once done leaving it blank or filling it in click on ‘ok’.

8. Placing an Image and Adding a Border
By default the logo will be aligned to the top left of the page.
1. Click on the logo so that the properties of the image are displayed.
2. By default the box below will be displayed on your screen. To control the position of
the image choose a position from the ‘Align’ field. For now pick any placement.
3. The ‘Border’ field will create a black border around the image. The border is based
on pixels and is optional.
These Steps can be performed on any image to achieve the same results.
Text placement
This section will cover the basics of creating a link, formatting text and applying new
attributes besides those set in the page properties. For this exercise you will need to copy the
Lipsum Ipsum text that was provided and paste it into your .html document below the logo
image. The shortcuts that are used in Microsoft Word will also work within Dreamweaver.
Formatting Text
Text formatting in Dreamweaver is similar to that of Microsoft’s Word. The
formatting for text can be found within the property box and listed under ‘Text’ on the
main menu. For this site we will only cover the basic options.
1. Highlight the two paragraphs so that all of the text is highlighted.
2. The property box will now show the basic formatting option for the text. Select
‘Align Left’.
3. Type “Welcome to ENC4292” Below the image.
4. Highlight “Welcome to ENC4292” and choose ‘Heading 1’ from the ‘Format’ field.

9. Your page should now look similar to the one below.
Creating a Link
Images and words can be turned into links by highlighting them and placing a
URL into the ‘Link’ field located in the property box.
1. Highlight the words “Lorem Ipsum” at the bottom of the page.
2. Insert this link into the ‘Link’ field without the quotations
“http://www.lipsum.com/”.
3. Choose ‘blank’ from the ‘Target’ field. This will cause the link to open in a new
window when it is clicked on.
Basic use of tables
Tables are used to organize text and pictures. Tables can have borders or be invisible.
The space inside of a table is called cells and these are organized into rows and columns. The
following set of instructions will give you a basic understanding of how tables work.
Inserting a Table
1. Place the cursor at the top of the page and press enter so that the logo and text are
moved down.
2. Click on ‘Insert’ and select ‘Table’.

10. 3. The new window controls the general formatting of table that is about to be inserted.
Rows stack up on each other and columns are next to each other. For this exercise
Choose three rows by 1 column with a border that is set to two.
4. Make sure the table width is set to “100” percent and not to “800” pixels.
5. Click ‘ok’.
Formatting Tables
1. Highlight and drag the logo into the first black box.
2. Highlight and move the text into the second box
3. Type your name in the bottom box so that your page looks similar to this one.
<Image>
4. Click on any of the black lines that create the new table, this will display the tables
properties within the properties box.
5. You can now align the table as you would an image or paragraph. Please center the
new table.
6. The Cellpad and Cellspace control the spacing between the context within the tables
and the spacing between the cells. The spacing is based on pixels and can help to
create white space. For this project they can all be left at 0.
7. You can now use the other features listed under the properties to change border colors
and the background colors of the table.
If a single cell is highlighted only that cell and it’s content will be affected.
8. Once you have formatted the table to your liking go to ‘File’ and ‘Save’.
Site preview
You can now preview your website.
1. Minimize Dreamweaver and browse to your ‘web site’ folder on the desktop.
2. Right mouse click the index.html file and choose to open it with ‘Internet Explorer’.
Your site should look similar to this depending upon how you formatted your table.
<Final Image>