topic 10 problem Web site review

advertisement
topic 10 problem
Web site review
What makes a Website better than another? There are many different aspects to any Website which
act to make the site achieve its intended purpose. For example, there is the overall design and the
look and feel. There is the ease of navigation and orientation. Some Web sites have loads a very
useful information while others provide a high degree of interactivity and functionality. Your task in this
problem is to identify and choose criteria that you think are important when determining the quality of a
Website and to use these criteria to compare 3 Websites that all serve the same purpose, for
example, marketing cars, marketing fashion, advertising movies etc.
Crop circles are fantastic geometric patterns that are formed in wheat crops (and other crops too) the
world over. They seem to appear at night when no one is looking and they are often very large and
very hard to see how they could have been done by mischievous humans (as many claim they are).
They appear in places where there is often some supernatural significance eg. Stonehenge, and they
are often very hard to explain which lead many to believe they are a supernatural phenomenon.
Submission Requirements
Use the Web to discover the important criteria that determine the quality of a Website. Use your
research to choose a number of criteria that you can use to compare Web sites. Choose 3 Websites
and apply the criteria to compare them. Which is the best, which is the worst? Your solution should be
submitted as a Word document (1-2 pages) and should contain the following information:
1.
2.
3.
4.
5.
A description of the attributes that can be used to assess the quality of a Website;
A set of criteria that you will use to compare 3 sites;
The results gained when the criteria are applied to 3 Web sites;
The best and worst sites according to your evaluation and reasons; and
A list of the references and resources you used in your inquiry.
CMM1108 Comunications and Digital
Technology
Dreamweaver ® MX 2004
This Activity will take you through the steps of how to link using Dreamweaver MX 2004.
Notes on frames in Dreamweaver
Adapted from Dreamweaver MX 2004 Help
Understanding how frames and framesets work
A frame is a region in a browser window that can
display an HTML document independent of what's
being displayed in the rest of the browser window.
A frameset is an HTML file that defines the layout
and properties of a set of frames.
To view a set of frames in a browser, enter the URL
of the frameset file; the browser then opens the
relevant documents to display in the frames. The
frameset file for a site is often named index.html, so
that it displays by default if a visitor doesn't specify
a filename.
The following example shows a frame layout
consisting of three frames: one narrow frame on the
side that contains a navigation bar, one frame that
runs along the top, containing the logo and title of
the website, and one large frame that takes up the
rest of the page and contains the main content. Each
of these frames displays a separate HTML
document.
In this example, the document displayed in the top
frame never changes as the visitor navigates the
site. The side frame navigation bar contains links;
clicking one of these links changes the content of
the main content frame, but the contents of the side
frame itself remain static. The main content frame
on the right displays the appropriate document for
whichever link the visitor clicks on the left.
Note that a frame is not a file. It's easy to think of
the document that currently appears in a frame as
an integral part of the frame, but the document isn't
actually part of the frame. The frame is a container
that holds the document--any frame can display any
document.
Note: The word page can be used loosely to refer
either to a single HTML document or to the entire
contents of a browser window at a given moment,
even if several HTML documents appear at once.
The phrase "a page that uses frames," for example,
usually refers to a set of frames and the documents
that initially appear in those frames.
A site that appears in a browser as a single page
comprising three frames actually consists of at least
four separate HTML documents: the frameset file,
plus the three documents containing the content that
initially appears in the frames. When you design a
page using framesets in Dreamweaver, you must
save each of these four files in order for the page to
work properly in the browser.
4. Frames
To create a predefined frameset and display an
existing document in a frame:
•
•
Place the insertion point in a document.
Do one of the following:
• Select a predefined frameset from the Insert
> HTML > Frames submenu.
• In the Layout category
of
the Insert bar, click the drop down arrow on
the Frames button
, then select a
predefined frameset.
ie. This Frameset contains 3 frames.
4.1 Viewing and setting frameset properties
Use the Property inspector to view and set most
frameset properties.
The frameset icons provide a visual representation
of each frameset as applied to the current
document. The blue area of a frameset icon
represents the current document, and the white
areas represent frames that will display other
documents.
NOTE: When you apply a frameset, Dreamweaver
automatically sets up the frameset to display the
current document (the document in which the
insertion point is located) in one of the frames.
A Frameset contains the whole view of frames:
To view or set frameset properties:
• Select a frameset by doing one of the
following:
• Click a border between two frames in the
frameset in the Document window's Design
view.
• Click the border that surrounds a frameset in
the Frames panel (Window > Frames).
• In the Property inspector (Window >
Properties), click the expander arrow σ in the
lower right corner to see all of the frameset
properties.
• Make changes as necessary.
To set a title for a frameset document:
• Select a frameset by doing one of the
following:
• Click a border between two frames in the
frameset in the Document window's Design
view.
• Click the border that surrounds a frameset in
the Frames panel (Window > Frames).
• In the Title field of the Document toolbar, type
a name for the frameset document.
When a visitor views the frameset in a browser, the
title appears in the browser's title bar.
4.2 Viewing and setting frame properties
and attributes
Use the Property inspector to view and set most
frame properties.
A Frame is each individual frame in a frameset:
CMM1108 – Macromedia Dreamweaver MX2004
You may also want to set some frame attributes,
such as the title attribute (which is not the same as
the name attribute), to improve accessibility.
To view or set frame properties:
• Select a frame by doing one of the following:
• Alt-click (Windows) or Shift-Option-click
(Macintosh) a frame in the Document
window's Design view.
• Click a frame in the Frames panel (Window
> Frames).
• In the Property inspector (Window >
Properties), click the expander arrow in the
lower right corner to see all of the frame
properties.
• Make changes as necessary.
Use the Frame properties to name each frame so it
can be used to target links.
TIP: To change the background color of a frame,
set the background color of the document in the
frame in page properties.
Activity 5.
This activity is a repeat of the previous activity
using the fonts but this time, navigation will be
achieved using the frame structure.
1. Create a frame structure for your Web page as
shown below. Enter some text into each of the
frames as shown. eg. an index in the left column
and a description of fonts in the main frame
2. Use the frame properties dialogue box to name
the various frame locations eg. index, main etc.
3. Make the left scroll non-scrolling.
4. Save and name all the files. Eg. index.htm.
home.htm There are 5 files to be named
(including the frameset itself).
5. Make the Baskerville title in the left column a
hyperlink to a document called baskerville.htm.
6. Set the target for the hyperlink to the mainframe
5. Embedding movies
To include a short video clip in your page that
the user can download:
• Place the clip in your site folder. (These clips
are often in the AVI or MPEG file format.)
7. Create a page called Baskerville.htm which
describes this font and contains a image of the
type.
•
To link to the clip, enter text for the link in the
Document Window, such as "Download Clip"
and
1. Select the text.
2. Click the folder icon in the Property
inspector. Browse to the video file and
select it.
NOTE: The user must download a helper
application to view common streaming formats like
Real Media, QuickTime, and Windows Media.
8. Test your page so far in the browser to confirm
that it works as planned.
6. Image Maps
9. Once you have confirmed the pages link as
planned, create the pages for all other fonts with
their images and make the index link to these.
10. Add other refinements as you see fit. For
example, we need a link back to the first page.
Also you might like to put some credits and
disclaimers in the bottom frame.
Image maps can be used to enable links to be made
by clicking on different parts of an image. An
image map is created by inserting an image in a
document and using the Properties inspector to set
the hot spots and the links.
5. Layers
Another useful feature in Web pages is the use of
layers. Layers enable users to create page layouts
where text and images can be positioned in
different places on the page and can be overlaid on
top of each other.
•
•
•
•
•
Choose INSERT> LAYOUT OBJECTS>
layers to insert a layer.
The layer shows on the page;
The handles can be used to resize the layer;
The handles can be used to position the layer
on the page.
The Properties Inspector can be used to change
the layer properties.
Activity 6.
This activity gives you some practice in using
layers and image maps.
Use the Web to download a map of your country, or
if you are unable to find a map, use the map of
Australia in the Dreamweaver2 folder.
1. Create a new page;
2. Insert the map (or australia.gif from the
Dreamweaver2 folder) into the page;
3. Add some layers to the page to give the map
and the various regions a title;
4. Preview the page in the browser to view the
results.
5. Create a new page;
6. Insert the map of your country (or
australia.gif);
7. Use the image map facility to create a series of
sections on the map corresponding to the
various regions;
8. make each of the regions link to a new page
with an appropriate title.
CMM1108 – Macromedia Dreamweaver MX2004
Download