Dreamweaver CS3 Tutorial

In this brief tutorial, you will be introduced to some of the basic features of Dreamweaver CS3,
one of the most versatile Web-editing programs.

Getting Started
• First, you must create a “defined site.” To do this, you should create a folder somewhere on
your hard drive or jump drive (USB drive) that you will be able to access. Name it:
yourname Dreamweaver.
• Then, within that named file folder, create another folder. This one should be named images.
• Now, open up Dreamweaver CS3.
• On the Toolbar, go to Site > New Site. You can either use the Basic or Advanced menus.
They will both get you to the same places.
o Under Site name: name your site (your name web site).
o On the next page, click on the circle that says, “No, I do not want to use a server
technology.”
o Click on the blue file folder – in either Basic or Advanced – and then find the folder
that you just created and named. Once you’ve found the folder, click on it, click on
Select.
o “How do you want to connect to your remote server?” = NONE
o Then click Done.
• You have just defined your site.
• To create a page, go to File > New > Blank page > HTML > (layout) <None>. (The other
menus under (Layout) provide you with some layout options. For purposes in this class, it is
probably best to stick with the <none> option.)
• After you create a new html page, look for the icons Code/Split/Design.
• Click on the Design button if it is not already clicked on

Naming Files
• No caps.
• No spaces between words.
• No special characters (except dashes and underscores).

Naming Pages
• Under Modify, click on Page Properties > Title/Encoding, and give your page a title. This
will appear in the blue line at the top of the page. Under Page Properties, you can select a
background color and text colors.
• You can also change the title by typing in the empty area next to Title near the top of your
screen.
• After you click on your preferred browser, you may see a note that says ‘Save changes to
index.html?’ click Save and the page will pop up in the browser

Viewing Your Page

• To view your page in a Web browser, go to File > Preview in Browser > (then your
preferred browser). OR on a PC, you can click on F12.
Setting Up a Page Using Tables
• In the Properties window (bottom of screen), set your page parameters. (You can also do this
in the Page Properties menu.) Also in the Properties window, you can add text, images, and
change the background color.
• Use tables for the layout of the page. Go to the Common tab, and then the Table icon. It looks
like a waffle. If you’re not sure which one it is let your mouse hover over the icons and the
titles will appear.
o BEFORE you put in table, it is ALWAYS better to have an idea of how you think the
page will look, so that you know how many table cells you will need for the rows and
columns.
• Set the page for the table content:
o Although the most common computer screen size is 1024x768, it still is best – at
least for now – to set your page at 800x600. It is probably better to use a slightly
smaller width – say around 775 pixels.
o For the table width, consider the size of your web page, you don’t want to go over the
pixels for the page (average size for web pages is 800 x 600). To be safe, set the
Table Width to 775.
o Set the number of rows and columns you will need.
o Click on the table you created, and then IF you want the border to be transparent, you
must:
ƒ Click on the table tag (<table>) and then in the Properties window (at the
bottom of the screen), set Border = 0.
• For the cell pad and cell space, declare the number of pixels (0=no pixel space in-between
cells in a table).
• Along the bottom of the web page you’ll see what’s known as tags, click on the table and the
table tag (<table>) will be highlighted.
o Now go to the Properties window, select the Table tag and align Center to have the
Web page show up in the middle of your computer screen.
• To get rid of the top bar on the top of the page, you have to set the “Top Margin” to 0. Go
to Modify > Page Properties > Appearance > Top Margin = 0.
• To set the justification in each cell, it is best to use Cell > Horizontal Center, rather than the
actual Justification.

Text and Links

• Start typing in a table cell. You can change the text/font style or color by highlighting the text
and then change the font/color in the Properties window.
• When changing the text color
o Highlight text, and go to the Properties menu at bottom.
o Click on the grey bottom to the right of the Size menu.
o An eyedropper will appear and blocks of color. Choose the new color for the text.
• To link text, highlight the text that you want linked, then click on the Link line in the
Property Inspector.
• To link to an outside page:
o Be sure to include http:// in the address.
• To link to another page that you created:
o Click on the folder icon next to the Link line and then find the file you want to link
to. Remember, it should be within the folder that you have already defined in your
site.
o OR drag the “target” to the specific file you want linked.
• If you want a new page to open up in a new window when you want to link, Target > _blank.
Images
• You should save all of the images you plan to use inside the Images folder that you created
earlier.
• Try to save them in the actual physical size and the file size (72 pixels per inch) necessary for
placement on the Web.
• To insert an image, go to the Common menu at top, and find the Images tab (a little tree icon).
It might be hidden underneath another selection so click on the black triangle to the right of
the icons if you can’t find Images OR click on the Images icon (looks like a picture of a tree)
under the Objects palette.
• In this new version of Dreamweaver, you can actually change the file size of your image by
resizing it in Dreamweaver. However, you should always try to edit your image in Photoshop
first to get it close to the size that you want it before placing it in Dreamweaver.
o To resize an image in Dreamweaver, click on the image. Hold down the Shift key,
then drag the image to make it smaller.
• Remember: You should always include an alternative text description for all images that
you insert. The alt text allows people with sight disabilities to be able to “read” the short
description of your images.

Rollover Images
• Go to the Insert menu and find Insert Rollover Image.
o Note: It’s in the same series as Image so if you don’t see Rollover Image click the
black triangle at the right of Image.
• To create a rollover image – where an image changes from one picture/image to another one
when your mouse rolls over it – here’s what to do:
o Create a cell where you want the rollover image to go.
o Click on Insert > Image >Rollover Image from the Common tab. It will ask you to
name the rollover image and select the two images that you want to use in the
rollover. Make sure that the image sizes are small enough to be “rolled over.” You
can make minor adjustments in Dreamweaver. However, if the images are large (in
actual size), they probably should be edited in PhotoShop.
o You can also insert a link where you want people to go when they click on the
rollover.

Inserting and Linking to Anchors

• To insert an Anchor, go to the Common tab and then click on the Anchor icon.
• To link to an Anchor, highlight the text or image you want to link to the anchor. Then scroll
down to where the anchor is. Next to the Link line in the Property box is a little wheel. Click
on it and drag it to where the Anchor is.

Making a Template
• If you want all of your pages to have the same look, you can make multiple pages that look
the same, and then rename them OR you can make a template.
• To make a template, go to File > Save as Template.
• In the tables, define the editable regions – those areas where you allow people to make
changes.
o Define the editable regions this way: Click on the part of the table that you want to
make an editable region, and then click on the corresponding tag (<tr>=row,
<td>=cell). Then go to the Common tab on the toolbar. Go to the Template Objects
 icon (near the right side of the Common tab row. Click on the Template Objects icon
and then on the drop-down menu, click on Editable Region.
o Or you can right-click on the region, then go to Templates > New Editable Regions.
o Name the editable region. Then do the same for any other editable regions you want
to include on your template.
o Do not F12 a template (.dwt) page. Always preview the .html page, based on the
template. Browsers cannot read .dwt files by themselves.
• To create a page from a template:
o File > New >Page from Template.
o Choose the template and then start creating.
• Applying a template to an existing page:
o Open the .html page.
o Clear out the page to show only content to go into the editable region.
o Modify > Templates > Apply Template to page.
o You must resolve area conflicts.
ƒ Click the <body> tag.
ƒ Choose the region to move to.
o Save changes.

Defining a Remote Site and Uploading Files

You will need a PLAZA account or an IFAS account in order to upload files to the Web.
ALL UF students can get a Plaza account. If you are an IFAS employee, you have an IFAS
account.

From the Toolbar, Site >Manage Sites >Edit.

Under the Advanced tab, go to the Category (left-hand side), click Remote Information. Then
under Access > FTP. From here on, how to upload depends on if you have an IFAS or Plaza
account. (See below.)

If you have an IFAS account:

Click on Edit > Remote Information.
For the FTP Host, type in webftp.ifas.ufl.edu
Leave host directory blank.
Login: ifasdom/your username
Password: your password

If you have a Plaza account:

Click on Edit > Remote Information.
For the FTP Host, type in plaza.ufl.edu
Leave host directory blank.
Login: your username
Password: your password
• THEN, a window should open that shows the “Web” that you have developed. At this point,
you’ll need to click on the icon that looks like two plugs pulled apart. The icon will change to
two plugs plugged in. THEN, click on the Remote Site icon (the one on the far left-hand side
that looks like three squares stacked on top of each other). THEN, drag your root folder to the
left, into your remote site.

Dreamweaver CS3 Tips

• If you lose a panel that you’re working with, go to Window >Workspace Layout > Designer
to get all of your panels back.
• Spry allows you to insert prebuilt components – such as fly-out menus or tab menus.
• F12 = Preview in Browser

REMEMBER, when making FILE NAMES

• No caps.
• No spaces between words.
• No special characters (except dashes and underscores).

Short Assignment in Class

Create two very basic Web pages in Dreamweaver.
Include at least one image.
Link to an outside page and to the two pages you create. (In other words, one page should link
to the other.)
Upload the pages to your Plaza or IFAS account.