dreamweaver
workshop
Below is a list of bookmarked websites. Organize these sites by placing them in folders/categories. Name
the folders/categories accordingly. Use as many of them as necessary. Create subcategories if and where
necessary. Discuss with your classmates.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
Jazz Musicians
Lion King
Medicine
Bond University
Crash
The West Australian
Classical Music: electronic resources
Communication and Creative Industries
Engineering
Prime Minister’s Current Events
Rugrats
AFL website
Eagles website
IMDB website
ECI IT help
Top Hits of 2005
Australian Newspaper
The Simpsons
Yoga
Business Weekly
Curtin University
Western Australia of Performing Arts
Edith Cowan University
Ice Age 2
Rhythm & Blues Artists
Murdoch University
Scary Movie
TAFE
Apple website
Yahoo website
Google
SIMO
Hoyts
Jokes Daily
Horoscopes
dreamweaver
workshop
Place the following lines of this joke into a meaningful sequence.
1.
2.
3.
4.
5.
6.
7.
The rabbit ordered lettuce, cabbage, and spinach.
A rabbit and lunch were having lunch together.
“He isn’t hungry.”
The rabbit answered for the lion.
The surprised waiter said, “What’s the matter?”
The waiter then asked the lion what he wanted to eat.
The rabbit answered, “If he were hungry, I would be here.”
(Alverno College, 2003)
dreamweaver
workshop
Dreamweaver ® MX 2004
This Activity will take you through the steps of how to create a basic webpage using Dreamweaver MX 2004.
Before You Begin
Before you start using Dreamweaver MX 2004, you should become familiar with its features. On the Macintosh,
Dreamweaver provides a floating workspace layout, in which each document is in its own individual window. Panel
groups are initially docked together, but can be undocked into their own windows.
The Document window displays the current document as you create and edit it.
The Property inspector lets you view and change a variety of properties for the selected object or text. Each kind of
object has different properties.
Panel groups are sets of related panels grouped together under one heading. To expand a panel group, click the
expander arrow at the left of the group's name; to undock a panel group, drag the gripper at the left edge of the group's
title bar. 1. Setting up your Webpage
1.1 Opening a New Page
•
•
Click File from the Menu bar, then New – OR –
Press  + N for a new blank page – OR –
Click the New button
on the Standard toolbar.
The New Document dialogue box appears, select
Basic Page from the Category column, and HTML
from the Basic page column.
Click on Create to begin a new blank page.
1.4 Saving your document
NOTE – File Structure
1.2 Entering Text
•
Simply type into the Document window to enter text
into a Web Page. Type some text as a title at the top
of the page, press the Enter key, and type a couple of
sentences.
NOTE – Understanding paragraph and break tags
It’s important to understand the difference between
paragraph (<p>) and break (<br>) tags.
Paragraph tags surround a block of text, placing two
carriage returns after the block. You create a new
paragraph by pressing the Enter or Return key.
The break tag inserts a single carriage return into text. You
can insert a break into a Web page by using the keyboard
shortcut Shift+Enter or selecting the Line Break object from
the Characters drop-down menu in the Text category of the
Insert bar.
It’s important to understand the difference between
paragraph and break tags. Pressing Shift+Enter twice,
inserting two line breaks, instead of pressing Enter to
create a paragraph looks identical to paragraph text.
However, because you haven’t created a paragraph
container, any formatting applied to the paragraph gets
applied to the entire container. This will become more
important as you begin formatting portions of Web pages in
different ways.
1.3 Applying Text Formatting
•
•
Select the title and in the Property Inspector, click the
Align Centre icon , apply
Heading 1 format and change the colour.
Change the font selection of the title.
It is important to organise your web site’s file
structure. Create a home folder where you will save
your first page. In this folder, you should create
other separate folders such as ‘images’ and/or
‘buttons’ and place your images in the folder so they
will be easy to locate and well organised.
Additional pages and folders will be given other
names as appropriate, but be sure to name files and
folders appropriately, and keep them all organized.
Save all files and folders in the same home folder.
Don't use special characters in file names: stick to
the basics (lowercase letters, numbers, and the
underscore ( _ ) character); do not use spaces in
filenames.
•
•
Click File from the Menu bar, then Save As
Save the file as ‘index.htm’ in the appropriate
folder, click Save
1.5 File Organisation
A typical Web site is comprised of a series of pages
and graphical elements. When building a Web site
the first task is to create an appropriate file
organisation.
1. Create a folder to contain all the pages and
images eg. sample;
2. Create a folder called images inside the sample
folder;
3. Create an html page and save it inside the
sample folder;
4. Save all the other pages within the sample
folder.
NOTE – Web pages and their relation to each
other
The first page of a website is referred to as the "index
page" and needs to be saved as "index.htm”. Web
browsers are designed to look for “index.htm” when you
access a website.
For example, if you were to enter "http://www.yahoo.com"
into your web browser, what you are actually telling it to
look for is "http://www.yahoo.com/index.html".
1.6 Setting Page Properties
NOTE – Page properties
Page properties allow you to globally customize the look
and feel of your site. You can change the style of the links,
the page color, default font, font size and other features by
working with the Page Properties in Dreamweaver.
•
•
•
Click Modify from the Menu bar, then Page
Properties
Leave everything as the default settings, however
under ‘Title/Encoding’, a Title will be added (this
gives your website a title that appears in
Dreamweaver and browsers, and it important if you
want people to be able to find your page when using a
search engine.)
Click OK
1.7 Adding an image
•
Place the cursor where you want to insert the image.
•
Select the Image icon
from the Insert bar and the
Select image source dialogue box will appear.
Locate your image in the images file and click choose.
When the image is selected, the Property Inspector
displays the properties of the image. In the top left
hand corner of the Property Inspector box, type in a
unique name for the image.
•
•
Practice Activity 1.
In this first activity, you will create a web page
which contains pictures and text. (We have
supplied some images and descriptions of WA
orchids in a Zip file in the Week 10 schedule to
give you some material to work with)
1. Create a folder on your computer called
practice. This folder will be the location of all
the files you will create in the Dreamweaver
activities over the next few weeks.
2. Download the Dreamweaver1 folder from the
CMM1108 site.
3. Copy the images folder from Dreamweaver1
into your practice folder.
4. Use Dreamweaver to create a new page (basic
HTML) and save the page in the practice folder
as your first page called index.html.
5. Use the MODIFY menu to set some Page
Properties. Give the page a title and choose a
soft background colour.
6. Now enter some text for your page. Create a
heading at the top of the page, for example,
Orchids of Western Australia.
7. Enter a line of text to describe the content which
will follow. For example, this page contains
some pictures and descriptions of common
Western Australia orchids.
8. Use the INSERT menu to choose an image to
put into your page. Use the smaller image from
the list eg. bee2.jpg
9. Under the image put the name of the orchid and
make this text bold.
10. Now copy and paste the description of this
orchid from the document orchids.doc which is
in the Dreamweaver1 folder. This text should
sit underneath the orchid name.
11. Use the WINDOW menu to view the properties
toolbar and choose an appropriate font, font size
and style for the text you have inserted.
12. Save your document.
13. Use the FILE menu to preview your work in
the browser. (You may wish to make some
changes to your design)
14. Continue to insert all the supplied orchid images
and text into your page.
15. Save your work regularly and preview the page
in the browser to confirm the appearance.
2. Creating links in Dreamweaver
2.1 Adding a new page
You can create several types of links in a document:
• A link to another document or to a file, such as a
graphic, movie, PDF, or sound file.
• A named anchor link, which jumps to a specific
location within a document.
• An e-mail link, which creates a new blank e-mail
message with the recipient's address already filled in.
•
•
•
To create a new page and keep the same
formatting, have your original (home) page
open and click File from the Menu bar, then
Save As
Save the file as a new unique name in the same
folder as your home page.
Click Save
But first, understanding the file path between the
document you're linking from and the document you're
linking to is essential to creating links.
Understanding document locations and paths
Each web page has a unique address, called a Uniform
Resource Locator (URL).
Eg.
However, when you create a local link (a link from one
document to another on the same site), you generally don't
specify the entire URL of the document you're linking to;
instead, you specify a relative path from the current
document or from the site's root folder.
•
The new file should now be open in
Dreamweaver and you can edit the new page.
2.2 Adding buttons
Eg.
Note:
Dreamweaver will try to help you with links but this can
sometimes cause problems. When creating links to other
pages, it is a good idea to create the pages first and to
ensure they are in the folder you are using. Never try to
link to pages outside your home folder. Another sound
strategy is to browse to select the link (rather than typing
the file name).
When you preview your page in a browser, if a page will
not link, look at the link address in the properties inspector
to ensure it is what you intend.
You can use images as button icons. Using an
image to perform tasks other than submitting data
requires attaching a behavior to the form object.
•
In the document, place the cursor where you
want the button to go.
•
Select the Image icon
from the Insert bar
and the Select image source dialogue box will
appear.
Locate your image in the images file and click
choose.
When the image is selected, the Property
Inspector displays the properties of the image.
In the top left hand corner of the Property
Inspector box, type in a unique name for the
image (which will become important later for
creating rollovers).
•
•
•
•
Click the file icon
next to the link area and
locate the page you want your button to take
you when you click it. (If you have set up your
file structure properly, this page should be
located in the same area as index.htm).
You have now added a behaviour telling the
image that ‘when you click this image in a
browser, to take you to the allocated page’.
NOTE – Behaviours
A behavior can be attached to links, images, form
elements, or any of several other HTML elements and is a
snippet of code that gets inserted into a Dreamweaver
document when the user chooses one from the behaviors
list.
2.3 Linking an image to an external
website
•
Select the inserted image and using the Property
Inspector box, type a URL (including ‘http://’) of the
website address into the Link text field, eg.
http://www.yahoo.com
•
•
Then select your target (see notes below)
NOTE – Setting your target
To use a link in one frame to open a document in another
frame, you must set a target for the link. The target
attribute of a link specifies the frame or window in which
the linked content opens.
 _blank opens the linked document in a new browser
window, leaving the current window untouched.
 _parent opens the linked document in the parent
frameset of the frame the link appears in, replacing the
entire frameset.
 _self opens the link in the current frame, replacing the
content in that frame.
 _top opens the linked document in the current browser
window, replacing all frames.
•
After you save the Web page, preview your working
hyperlink in a browser by clicking the image. Your
browser should go to the hyperlinked page. (Pressing
F12 in Dreamweaver will launch your saved website
in a browser so you can test it.)
2.4 Linking text to an external website
•
Select the text you want to hyperlink to another
website by highlighting the text in the ‘document
window’ in Dreamweaver. Using the Property
Inspector box, type a URL (including ‘http://’) of the
website address into the Link text field, eg.
http://www.yahoo.com
•
Select your target.
2.5 Linking in the same page
You can use the Property inspector to link to a
particular section of a document by first creating
named anchors. Named anchors let you set
markers in a document, which are often placed at a
specific topic or at the top of a document. You can
then create links to these named anchors, which
quickly take your visitor to the specified position.
Creating a link to a named anchor is a two-step
process. First, you create a named anchor; then you
create a link to the named anchor.
To create to a named anchor:
• In the Document window, place the insertion
point where you want the named anchor.
• Do one of the following:
• Select Insert > Named Anchor.
• Press Control+Alt+A (Windows) or
Command+Option+A (Macintosh).
• In the Common category of the Insert bar,
•
•
click the Named Anchor
button.
The Named Anchor dialog box appears.
In the Anchor Name text box, type a name for
the anchor (ie. top), and click OK.
•
The anchor marker
insertion point.
appears at the
To link to a named anchor:
• In the Document window, select text or an
image to create a link from.
• In the Link text box of the Property inspector,
type a number sign (#) and the name of the
anchor. For example:
• To link to an anchor named "top" in the
current document, type #top.
• To link to an anchor named "top" in a
different document in the same folder, type
filename.html#top.
Practice Activity 2
In this second activity, you will create some links within
your orchid page to add some functionality to the page.
1. Under the heading of your first page, add a list of all
the orchids you have described. Make a bulleted list
using the properties tool.
2. Place the insertion point (cursor) adjacent the title of
the first orchid. Use the INSERT menu to place a
named anchor at this location. Give the anchor a
appropriate name eg. bee
3. Now repeat the process to place named anchors at the
titles you have placed in your document for al the other
orchids.
4. Go back to the list at the top of the page and drag to
select the first orchid name. Use the properties tool to
set the link for this orchid to #bee (or whatever name
you gave the anchor). Don’t forget the #
5. Repeat this process for several other orchids and
preview the page in the browser to confirm that the
linking works as intended.
6. Repeat the process for all the orchids on your page.
7. Place the insertion point next to the title of the page
and insert a named anchor, call it top.
8. Go through the document again and place the word
<top> at the bottom of each orchid description. Use
properties tool to make each of the <top> words link
to the top of the document.
9. Preview in the browser to confirm that the linking
works.
10. The next activity is to enable the user to click on each
image on this page and to see a larger image in a
separate window.
11. Click to select the first image in the page, and view the
properties tool. Set the link by browsing to select the
large image eg. bee.jpg
12. Use the target option to choose _blank (this will open
the image in a blank window).
13. Preview in the browser to confirm that this linking
works.
14. Make a new page called credits.htm. In this page,
write down the credits associated with the pages you
have designed.
15.Make a link from the very bottom of your first page to
this credits page. Preview in the browser to confirm
that it works as planned.
16. Use Google to find some sites on the Web that describe
Western Australian or other terrestrial orchids. For
example the Species Orchid Society of Western
Australia at
http://members.iinet.net.au/~emntee/page18.html
17. Add some links a the bottom of your first page
that link to these external sites.
18. Preview your page in the browser to confirm
that it works.