Presented by Michelle Johnson

Maynard Multimedia Editing Program

Demystifying the Web

What is a Web Site?

A typical web site is a collection of files saved in various formats: text

files containing coding such as Hypertext Markup Language or HTML
(somepage.html or somepage.htm), image files (.jpg, .gif, .png), audio
files (.mp3, etc.), video files and more, organized (usually) in a
hierarchy of folders sitting on a computer called a web server.

The job of a web server (computer software) is to deliver pages over a

network, so for instance, when a user types in a web address such as
http://www.boston.com, information that site’s homepage gets
delivered to their web browser.

If a small web site was organized as a flowchart, starting with a home

page, it would look something like this:

Homepage

Link 1
Link 2
Link 3
Conventions

Homepage

When you create a homepage the file should be saved with the
filename index.html or index.htm. Why? It’s a standard and it allows
you to have a shorter web address.

When you type in www.boston.com, for example, your web browser

automatically looks for a file on the web server called “index.html.”

Name your homepage something else and you force the user to type in
the exact address to call up the page. Example:
boston.com/myfabhomepage.html

Organization

It pays to give some thought to how you organize files on your web
site. Once your site gets large enough, it’ll become difficult to keep
track of where every thing is.

Generally files are organized this way:

HTML files sit in the “root” or top-level directory or folder.

Photos and graphics go into their own folder (named images, img or
something descriptive.)
Video in it’s own folder, audio, Flash, etc.

Here’s an example of a typical setup:

So, what does this have to do with anything? Well, how you organize
your files is directly related to your url. If you type in

2
mysite.com/images/photo.jpg your web browser loads a photo that’s
sitting in your site’s images folder.

Bottom Line

Obviously the web gets more complicated than this. Some sites employ
more advanced technology and coding other than HTML.

Using Dreamweaver to Create a News Site

What is Dreamweaver?

Dreamweaver is a high-end editing program for producing web sites.

The program offers a variety of tools to help you create visually rich
web pages.

The program has a graphical interface, so in some ways it is similar to

working in a word processing program such as Microsoft Word or a print
page layout program such as Adobe InDesign. Dreamweaver makes it
easy to add text, pictures and other graphics to web pages and to set
up a structure for a web site.

You do not have to know HTML to use Dreamweaver because it can

hide all of the coding for the web page. However, you can also enter
code directly into Dreamweaver. It’s a time-saving way to generate
code that you can copy and paste into a content management system
or blog.

Creating a Web Site

3
When you first open Dreamweaver you’ll see screen that looks like this.

You will need to tell Dreamweaver where your site is located before you
can edit your pages.

To do that, click on “Manage Sites” on the right-hand side of the

screen.

The following window will appear. Click the “new” button.

4
Then click “Site”

You will then be asked for a name for your site. Call it whatever you
like. In this example it’s called “Dreamweaver_Practice.” Since we’re
not creating a real site, leave the second setting empty and click the
“Next” button.

5
Next, we’ll follow the prompts to “point” Dreamweaver to our practice
files.

On the next screen, leave it set to “No, I do not want to use a server
technology” and click “Next.”

6
7
Next, you will need to add a name for your site to the directory “path.”
In the example below “DailyNews” is the name of the directory (folder)
where the site will be stored. (NOTE: NO SPACE IN FILENAME. You can
use an underscore if it will make the name easier to read.) Click “Next
to Continue.”

8
You will then be asked how you want to connect to the remote server.
We can skip this step. Click the down arrow and select “None.”

9
The final setup screen will confirm your choices. Click “Done” to finish
and move to the next step. (NOTE: This is a one-time setup. From now
on you’ll simply open your site in Dreamweaver.)

Once we’re done, your screen should now look like this. Your web site
files appear on the right-hand side of the screen.

10
Let’s take a look at what’s here:

You should see several folders and files:

Audio – there’s an audio file there.
Flash – practice Flash files.
Images – practice photos
Index.html – this is a practice homepage
Anotherpage.html – a second page in your web site.
Other files are used by the template. Just leave them in the folder.

11
Editing the Homepage

Double-click on the file “index.html” to open it:

Your screen should now look like this:

Your homepage is now loaded into the editing window with some
placeholder text.

Let’s look at the Dreamweaver interface.

At the top of the screen you’ll see menus and a row of buttons that
perform various functions. We won’t use most of them. We’ll just focus
on the ones that we need to get the job done.

12
At the bottom of the screen you’ll find a “properties” panel. This will
allow you to tweak the page and change settings.

First, let’s replace the dummy text. Select the type that reads
“Headline Here” and change it to something else. For example:
Childcare on the Brink. Then replace the text “website name” and
“tagline.”

Result:

Note that the properties pallet allows you to select type and change
fonts, font colors, etc.

13
Adding a Photo

Let’s add a picture to our story.

First, place your cursor where you want your photo to appear:

Next, click the “Image” button in the “Common” menu at the top of the
screen:

We’re going to select a photo from our “images folder.”

When you click the images button it will bring you to a window where
you can select your photo. Note: if you don’t see the “images” folder
click the “server” button:

You will then be prompted to choose a file from your web site. Double-
click the “images” folder to open it:

14
Choose the photo called “daycare1.jpg” and click the “OK” button:

Next you’ll be prompted to add text to the “alternate text” box. (Note:
this is what pops up on the homepage when the user mouses over an
image. It should be something short and descriptive. Example: Pic of
kids

Click “OK” to continue.

15
16
Your screen should now look like this:

Note that the text is bumping up against your text. Place your cursor at
the beginning of the text and hit the “Enter” key to put the photo on
it’s own line.

17
Adding Links

The web is all about linking. You can create links to other pages on
your web site, or to other web sites. Let’s start by creating a link to
another web site. To do that, highlight the text that you want to be the
link, then, click the “add link” button:

18
Enter a web address in the link box, and set Target to “_blank.” This will
force the link to open in a new window. Then click OK.

Note that your text is now highlighted. It’s not underlined because our
site is styled not to highlight links. However, that text is clickable.

To test it, let’s save the page (file > save or CTRL – S) then open the
preview button on the menu and choose a browser (firefox, Internet
Explorer) to open your page.

Once your page opens, click the link to test it.

19
Linking to “Internal” Pages

Let’s create a link to another page in your site. Look at your site files.
You have another page called “anotherpage.html.” Let’s create a link
to it from the homepage.

To do that, select the text that says “Link 1” on the left-hand side of
the page, then click the “link” button:

This time, instead of typing in a web address, click the folder next to
the “Link” box.

20
This will bring you to a screen where you can select the file
“another_page.html.” Click OK to continue. (Remember, if you don’t
see your files, click the “Server” button.)

This will bring you back to the Hyperlink box. Click “OK” to continue.

Your link should now be highlighted. Preview your page and test your
link.

21
22
Now, let’s create a link back to the homepage from “another page.”
Double-click on the file in your site list to open it in Dreamweaver:

Note that when you have multiple pages open in Dreamweaver you
can switch between them using the tabs at the top of the window:

Now, let’s create our link. Select the text “Home” and click the link
button:

Click on the folder to select your homepage. Remember, it’s called:

“index.html.”

23
24
Click “OK” to close the hyperlink box and save your changes.

Preview your page to check your link.

Adding Video to a Page

Let’s say you’ve created a video package that you want to add to your
site. First, make sure that you’ve converted it to Flash video (see
handout: Converting Video from Avid to Flash), then you’ll need to
make sure that you’ve put a copy of it in your web site folder.

For the tutorial we’re going to use a file that’s in our Flash folder.

First, create a blank line and place your cursor where you want your
video to appear:

In the menu at the top of the screen choose: Insert > Media > Flash
Video:

25
First you’ll have to tell Dreamweaver where your video is. Click the
“Browse” button next to “URL.”

Again, if you don’t see the correct folders, hit the “Server” button:

You’ll see the Flash folder. Click to open it:

There’s a file there called “Fivefaces.flv.” Highlight it and click “OK” to

continue.

26
27
Other settings:

Detect size: this button and it will automatically import the video at the
proper size. (NOTE: This may not work over the network! If it doesn’t,
enter width: 320, height: 240.)

Skin: You can choose a “look and feel” for the controls on your site.

Autoplay: Uncheck this if you don’t want to the video to begin playing
immediately.

NOTE: You MUST preview the page in a browser to run the

video.

Adding a Flash Animation

The process is similar to adding a video.

Click Insert > Media > Flash

Then select your file from the Flash folder (or wherever it’s sitting in
your web site).

OR, simply drag and drop the file from your file list onto the page.
Open the “+” sign next to the Flash folder in your list, and drag the file
animation-example.swf onto your page. Give the file a title and click
OK.

28
29
Unlike video, you can play a Flash animation directly in Dreamweaver.
Click on the Flash box and use the button in your properties palette.

Creating New Pages

The simplest way to create a new page is to save an existing page

under another file name. So, for instance, with
“another_page.html”open, click File > Save As and give the file
another name.

30
Other things to Know

You can create new pages using Dreamweaver’s built-in templates.

Click File > New to see what’s available. Don’t mix and match page
designs. Keep your site consistent.

Changing page background color, links, etc

Click: Modify > Page Properties

Note: We will make add a folder to your Courses folder called

“final_project” with a fresh set of templates for you to work
with.

31