ADOBE DREAMWEAVER CS3 TUTORIAL

ADOBE DREAMWEAVER CS3 TUTORIAL

---

T A B L E O F C O N T E N T S

This tutorial focuses on the basic steps involved in creating an attractive, functional website. Learn
to design a site layout, insert images and text, create links, and how to upload your site to the
Internet. This tutorial offers information for Mac and PC users.

1. Activating your web space………………………………………………………3
2. Getting Started……………………………………………………………………4
3. Creating a Homepage…………………………………………………………....7
4. Design and Layout………………………………………………………………..8
5. Inserting and Using Tables………………………………………………………10
6. Adding Design Elements…………………………………………………………16
7. Previewing in Browser……………………………………………………………19
8. Creating Hyperlinks………………………………………………………………21
9. Inserting Special Media…………………………………………………………..24
10. Uploading Files to the Web………………………………………………………27
11. Downloading Files from the Web………………………………………………..29
Dreamweaver CS3 2

---

A C T I V A T I N G Y O U R W E B S P A C E

Before you get started, it is important that you have a space to upload your Web site
When it is completed. BGSU offers 15 MB of free personal Web space for each student,
so you can use this space to upload your project.

To activate your personal Web space, follow these steps:

1. Log onto your MyBGSU Account.
2. Scroll to the bottom of the page to find the My Computer Accounts box (Fig. 1).
3. Click the Add Server Account button.
4. In BGSU Server Account Registration window, check the box next to Personal
(Fig. 2).
5. Click the Submit button. Now your Web space is activated.

NOTE: An email will be sent when your account is activated


Fig. 1. My Computer Accounts window






Fig. 2. BGSU Server Account Registration
Dreamweaver CS3 3

---

G E T T I N G S T A R T E D

CREATING YOUR LOCAL ROOT FOLDER
First, you need to decide what you want to put on your website: images, buttons, videos,
PDF documents, PowerPoint presentations, etc. To create and maintain an organized
website, you need to establish a hierarchy of folders that contain all of the components
that make up your site. This folder is called your Local root folder. It is important
because this is where Dreamweaver looks for all your files.

To create a root folder, follow these steps:

1. Create a new folder on your desktop. On a Mac, click File > New Folder. On a PC,
right-click and choose New Folder.
2. Give the folder a brief, but descriptive name. Do not use capital letters, spaces, or
special characters when naming folders and files for your website. All of your pages will
be saved within this folder.
3. Open the folder, and create another new folder inside. Name this folder images. Put
all of your images, buttons, movie files, etc. inside the images folder.

NOTE: Make sure that all your pages and images are saved in your root folder, or they
will not appear the next time your website is opened.

MANAGING YOUR SITES

Now you are ready to launch Dreamweaver CS3. On a Mac, click the Dreamweaver CS3 icon from
the Dock. On a PC, click Start > Programs > Macromedia Dreamweaver CS3.

The most important step you need to take every time you launch Dreamweaver CS3 is to
define your Local Info. The "local root folder" is the name for the folder where you are
storing all of your website’s contents.

To define a site, follow these steps:

1. Click Site > Manage Sites.

NOTE: If you are using Dreamweaver CS3, go to Site > New Site.

2. Click New > Site.
3. Select the Advanced tab.
4. Enter a name for the site in the Site Name text field (Fig. 1). (This name will be for
your use only – it will not be published with your site.)
5. Click the small folder icon next to the Local Root Folder text field.
6. Navigate through the folders on the computer and/or disk and locate the
folder that you have designated for your website project (local root folder).
7. Select the designated folder and click the Choose button.
Dreamweaver CS3 4

---

8. Follow the same steps above to choose your Default Images Folder, which is located
in your Local Root Folder.


Fig. 1: Local Info tab

Next, every time you launch Dreamweaver, you have to define your Remote Info. The
Remote Info tab is used to tell Dreamweaver where to put your files when you are ready
to upload them to the web. If you are using the BGSU personal server space, use the
diagram below (Fig. 1) to fill out the information. (If you are using any other server you
will need to know the host name.)

To define the remote info, do the following:

1. Click on the Remote Info tab located on the left side of the toolbar.
2. Select FTP in the Access field.
3. Type in personal.bgsu.edu for FTP host.
4. Type in public_html for Host directory.
5. Type in your webmail username for Login.
6. Type in your webmail password for Password.
7. Make sure the Use passive FTP box is checked.
8. Click Test to make sure it connects to the server correctly.
9. Click OK.
10. Select your site name and click Done.

Dreamweaver CS3 5

---

Fig.2: Remote Info tab
Dreamweaver CS3 6

---

C R E A T I N G A H O M E P A G E

To create a Web page, follow these guidelines:

1. Choose a page to be the homepage of your Web site. This will be the first page that
users encounter when they visit your site. Save this file to your local root folder as
index.html. Naming the homepage index.html tells the Web browser that this is the first
page it should open when someone visits your site.

2. To add a new page go to File > New and choose a basic HTML page. Save this page
by clicking File > Save As. Name the first page index.html

3. After your homepage index.html is created, you can use this page as a template
layout for all the other pages in your site. Simply hit Save As and name the file whatever
you wish, but be sure to keep the name is simple, for example history.html, resume.html,
etc. Remember not to use capital letters or spaces when naming files, this will make it
easier for web browsers to find your files.

4. To save the pages of your site simply click File > Save for each page. Make sure your
homepage is named index.html, and save all of your files in the folder you chose when
you defined your site, i.e. in your local root folder.

NOTE: This process will save your files to your local site. You can transfer each file
separately to the remote site or transfer the entire site once you have finished working
on it.
Dreamweaver CS3 7

---

D E S I G N A N D L A Y O U T

Even if you are creating only a simple Web site, you should begin by sketching out the
layout of your site. Decide where you want titles, images, navigation buttons, and text to
appear on the screen.

Most web sites have the same design characteristics on every page. For example,
Web site titles are usually in the top left or top center, while navigation buttons usually
appear vertically on the left or horizontally below the title.
In addition to sketching out a layout for each page, you should determine how many
pages you will need for the Web site. Thorough planning is essential to good web design.

In order to get your text, navigation buttons, and images to appear where you want them
on the Web page; you need to use tables to format content of each page. Everything on
each page of your Web site should fit within one large table.

Using your layout sketches, you can determine what your table needs to look like.
Fig. 1 shows a simple layout sketch.
Fig. 2 shows the same layout, with table borders drawn in.
Fig. 3 and Fig. 4 show how the table can be implemented in Dreamweaver.

Now, simply create a table in Dreamweaver that has the same characteristics as the
borders drawn on the page. The next chapter will teach you how to insert your table.



Fig. 1: Simple layout sketch Fig.2: Simple layout sketch with borders

Dreamweaver CS3 8

---

Fig.3: Table menu in Dreamweaver Fig.4: Finished table in Dreamweaver





Fig. 5 and 6 show some common layouts for a basic webpage.





Fig.5: Common Layout with Columns Fig.6: Common Layout without Columns












Dreamweaver CS3 9

---

I N S E R T I N G A N D U S I N G T A B L E S

WHY USE TABLES
Tables help you divide the space on your page. They are similar to tables in Word or
Excel but can be used in much more flexible ways. Tables give you the option of making
your page a fixed size or making it fit to the user's window the best it can. Tables also
guarantee that the location of your text and images does not change when seen on
screen with different resolutions or in different Web browsers.

HOW TO INSERT A TABLE

To insert a table, follow these steps:

1. In the main menu, click Insert > Table.
2. Insert the amount of Table Rows and Columns (Figure 1).
3. Set Table width to between 600 and 800 pixels.
4. Set Border thickness. To have a visible border type in 1 or higher, to have no
border type in 0.
5. Cell padding adds room inside of a cell. Enter 0 for no space or a number to
Increase the space.
6. Cell spacing adds space between cells. Enter 0 for no space or a number to
Increase the space.
7. Click OK.




















Dreamweaver CS3 10

---