Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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.
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.
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.
What is Dreamweaver?
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.
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:
11
Editing the Homepage
Your homepage is now loaded into the editing window with some
placeholder text.
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
Next, click the “Image” button in the “Common” menu at the top of the
screen:
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
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.
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:
23
24
Click “OK” to close the hyperlink box and save your changes.
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:
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.
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.
30
Other things to Know
31