This lab will begin to introduce the student designer to more complex
web design choices The basic concept is called a frame page. Think of the
display window in the browser as a real window and think of the frame page
as the physical support structure that defines the various display real
estate into separate areas of display. Each separate display area is like
the window's pane and is called a frame.
Goals of the Lab:
To learn the concepts of a frame page and to become familiar with the various
frame tags and their attributes.
To explore the use of frame pages to provide a consistent and user friendly
navigation process.
To learn some simple tools for creating banners/logos and for adding sound
and other multi media into the frame structure.
To apply JavaScript that allow for the loading of HTML pages into specific
frames and other JS applications for adding some sizzle to your site.
To become familiar with the design principles involved in a frame page
web site.
Introduction:
The frame allows the designer to create a consistent method of navigation
for larger sites. It also allows for the creation of the web site that
has not only a consistent look and feel but one that keeps the companies
banner or it sponsors advertising message always present while the
various pages are loading. This banner frame is sometimes called the splash
page. The use of many multi media including audio are included in the assigned
exercises. While many professional web site designers prefer to not use
large amounts of multi media and images to avoid detracting from the main
message, causing excessive download times, etc. In a real commercial site
the use of these may be either encouraged or discouraged by corporate policy
and consideration of the resulting bandwidth and load time available to
the average user.
The issue of whether to use frames is also complex. The choice to not
use frames is a matter more of preference and conservative design policies
that arose during the mid-90s when the frame tag was less uniformly supported.
The alternative is to use tables (see Lab 4) or to supply an alternative
to the frame page design based on using the <noframe></noframe>
container tag. The number of Internet Explorer 3.0 and early Netscape browsers
now form an ever decreasing percentage of the market. The two major browsers
are freeware; and each corporation is bringing out many new features to
attract and develop loyalty to their new versions. The cost of supporting
pages that support the older browsers is a major issue. Fewer commercial
designers are using a non frame strategy but one should examine the various
designs out there in determining your own web design strategy. Frames with
multi media glitz are often used in entertainment web sites and those targeted
for younger viewers.
Frames:
The basic concept is that the web designer first must layout the division
of the the window in terms of areas and assign each area a unique name.
These areas are called frames. The structure that creates them
is a special type of HTML document called a frame page. The frame
page looks like a HTML with one major difference. The HTML document has
a HTML container which contains a <Head></Head> but no body
container. Instead of a body container it has a <Frameset></Frameset>
container which contains either <Frame> containers or nested <Frameset></Frameset>
containers. In addition to the <Frameset></Frameset> container
it is recommended that a <Noframes></Noframes> container be
included.
The function of the <Noframes></Noframes> container is
to allow for older browsers to be provided an optional document that will
only appear in those browsers that do not support frames. While this number
of older non frame browsers are decreasing, they are not an insignificant
part of the market. Browsers that support the visually impaired are among
those browsers that do not support frames. As will be expanded in
later discussion the <NoFrames> container can be used to also
over come a number of issues that detract from using frames.
The <Frame> tag defines the properties of the window area
that is be assigned. In addition it links the default HTML document that
appears when the user links to the frame page.
Why use frames for a web site?
The use of frame pages in a web site is normally driven by:
the need for navigating a very and complex site,
displaying simultaneously the contents of two web pages from different
servers,
the need to keep some materials such ads fixed while allowing for other
pages -- which may need to be scrolled and replaced.
The frame page is a document that has no visible content, except to non
frame browsers. It must be loaded first and layouts the frames which in
turn define the documents that are to be loaded into them. Framesets that
are nested further define the areas into sub areas that are assigned frames,
etc. While this may sound like frames and tables are equivalent, they are
not. Frames allow the web designer to decide not only how documents are
linked through anchors, image maps, etc. but once the view has decided
on what document to visit next the web designer must specify through the
use of the target attribute where it will be placed:
within the window,
on top of the window, or
even in a new window.
Thus the web designer has much more control over the juxtaposition of two
or more documents.
The Tags of the Frame Page:
The <Frameset></Frameset> container tags:
Attributes of the <Frameset> </Frameset> Tag
Attribute with allowed values
Comments
Cols= "n1, n2, ... nm"
A frame set defined as columns, i.e. divides the window into vertical
pieces. A frame set is either divided in columns or rows but not both.
Remember Frame sets can be nested.
The values, n1, n2, ... nm are
either integer (in screen pixels) or as a per cent ages with % sign included.
The "*" value indicated the remainder.
The <Frame> tags contained are assigned the column widths according
to there order.
Rows= "n1, n2, ... nm"
A frame set defined as rows, i.e. divides the window into horizontal
pieces. See Cols attribute remarks.
Border= "Number"
NS only -- "0" is used for no border
BorderColor= "#rr,gg,bb"
NS only -- Color of surrounding border in standard r,g,b hex values.
Frameborder= "yes|no"
IE only -- yes indicates a border
The <Frame> tag:
The frame is the area of the window defined in the <Frameset>. The frame
is similar to the glass pane in a real window.
The frame tag defines:
the behavior of the scroll bar,
names the frame, i.e. gives it an ID so that documents can be targeted
to it.
define the borders that surround it.
Attribute of the <Frame></Frame> Tag
Attributes with allowed values
Comments
Name= "String"
The name of the frame -- it must be unique and is required
SRC= "URL"
The default HTML page to be loaded into the frame any time the frame
is initialized.
Scrolling= "yes|no|auto"
The scroll bar:
yes -- scroll bar is required
no -- no scroll bar. This should only be used if there is never a
need for a scroll bar. Use very carefully
auto -- the computer decides if it is needed and creates one as needed.
This Should Be the Default
NoResize
Do not resize the frame as the window size changes.
Frameborder= "yes|no"
Create a frame border
Bordercolor= "#rr,gg,bb"
Create a border color where #rr,gg,bb is the HEX Color triplet.
Framespacing
IE -- space around frame
Marginwidth= "N"
N is the number of pixels of margin at the right and left end
Marginheight= "N"
N is the number of pixels of margin at the top and bottom
The <Noframe></Noframe>
container tag:
The <Noframe></Noframe> container is used to advise the reader that
the document is designed for frame page and that the viewer's browser is
not frames enabled. As a minimum is to offer the option of downloading
a frames enabled browser like Netscape and provide a link to the download.
However, this leaves the viewer who, does not want that option or some
reason can not use the download -- lack of time, memory, etc. to go elsewhere.
A better strategy is to offer a page that contains a site map with a navigational
bar to the various sections or pages of the web site.
The inclusion of the navigational menu allows the viewer to navigate
the site. More importantly gives the search engine a means to explore and
catalogue the web site. This, of course, is not a minor matter for an E-commerce
web site. Many search engines can not examine a web site with a frame without
this menu. Further the frame page mst also include the <Meta>
and <Title> tags that are appropriate to the site. Include in
the <NoFrames> container a good executive summary of the web site. This
summary should contain an introduction that give sites key words, phrases,
and concepts. This goes a long way in helping the search engine spider
to correctly find the pages of the web site and to correctly catalogue
them.
Targets:
The targets are those attributes in the tags of the body of pages that
direct the linked HTML document with the correct frame. They are the traffic
cops that work to get the information moved to the right final destination.
The <base> tag:
The most common choice is to use the <Base> tag to establish the default.
Use the <Base> tag to establish the default option for
the target for linking
Insert the following code snippet into the Head of the document
where the linkage occurs : In this code example we have our text links in the TOC and desire that
the default behavior is that the linked document appear in the frame, "Main"
The target attribute associated with the <area> tag that defines
the shape and location of the ho spot in the image causes the link, URL,
to be displayed in the frame whose name= "Name_of_Frame".
Example Code Snippet: Click the number two (2) and observe the a
new window with a [Back] will appear.<br> <!-- Click on two to go to a new window
--> <map NAME="target-menu"> <area SHAPE="RECT" HREF="back.html" target="_self"
COORDS="100,0,200,49"> </map> <img SRC="menu.gif" USEMAP="#target-menu"
height=50 width=300>
Example display: Click the number two (2) and observe the a new window with a [Back]
will appear.
<Form> directing document flow:
<Form Action="URL" target="Name_of_Frame">
The target attribute will cause the document in the URL to be displayed
in the frame whose name="Name_of_Frame"
Example Code Snippet: <Form action="form.html" target= "_blank"> <input type=submit name="target" value="Click for a new window"
target="_blank"> </Form>
Example Display:
Special Targets:
In the use of target attribute to direct the display in a desired frame
there are some special targets. These targets have reserved words or names
that reflect their special function.
Reserved Target Names or Magic Targets
Special Target Names
Resulting Actions
_blank
Loads a page in a new un-named window
_parent
Loads in the parent Frameset (next one up). If no parent exits acts
like "_self".
_self
Loads in the same window as the anchor that was clicked. Useful to
override the default defined in the <Base> tag.
_top
Loads on the top, i.e. breaks out of the frame page.
Simple Examples of a frame page:
The first example:
The basic frame page note the default in scroll bars is auto. Here the
top frame is the Menu page. In this simple example it is the site's navigation
bar. The bottom frame is where the content is dispplayed. We use in this
example three pages that when the viewed selects a color from the menu
causeds the display of a page in the color selected. We see the <Noframe></Noframe>
container that supplies the instructions to the viewer using a non frames
enabled browser.
<HTML>
<Title>Simple frame</Title>
</Head>
<Frameset Rows="20%, * ">
<Frame Name="Menu" SRC="Menu.html">
<Frame Name="Main" SRC="Red.html" >
</Frameset>
<Noframe>
Your instructions for those browsers that
do not support frames. </Noframe>
</HTML>
Second Example:
In this slightly more complicated frame page we see a typical design that
might be used by an e-commerce site. Frame set first set divides
the areas into two rows. The first row is made up of a single frame named
banner. Its function is to continuously display the corporate logo or advertisements.
The second row has a nested frame set that divides the area into two columns.
The left one is used for a navigational bar which we have labeled the TallMenu
and the right one is the Main where the pages (such as a catalog of products)
are displayed. Note the absence of the body tag container. We see the <Noframe></Noframe>
container that supplies the instructions to the viewer using a non frames
enabled browser.
A Nested Frame Set, Frame Page
Banner
Menu
Main
<HTML>
<Head>
<Title>Simple frame</Title>
</Head>
<Frameset Rows="20%, * ">
<Frame Name="Banner" SRC="Red.html">
<Frameset Cols= "20%, * ">
<Frame Name="TallMenu"
SRC="TallMenu.html">
<Frame Name= "Main" SRC="Red.html">
</Frameset>
</Frameset>
<Noframe>
Your instructions for those browsers that
do not support frames. </Noframe>
</HTML>
The think to remember in the JavaScript is that the object structure is
based around the container. The frame is inside the parent frame set thus
the dot notation for the designation of anything inside the frame container
is:
Dot notation for Specifying Frame Attributes or Methods
parent.Frame_name.Attribute_name
parent.Frame_name.Method()
Example of a JavaScript Application involving frames:
Update of two or more frames at one time:
We will use the Javascript event handler, onClick. When the event happens
we will load the frames with the new documents. The loading is accomplished
by setting each frame to be updated with a new location attribute. Setting
the location attribute causes it to load in the new document located the
URL.
Three frame update (note not only the color change but the text does as well)
In each TallMenu(Red | White| Blue).html the following HTML tags has
been added one for each color. (Shown here for changing to all red documents.)
<A Href= "red.html" target= "Main" onClick= "Javascript: parent.Banner.location='Red.html;
parent.TallMenu/location='TallMenuRed.html';
parent.Main.location= 'Red.html';"> ALL red frames</A>
Click to see the Second Example modified to change all three frames
at the same time.
JS3Change.html
Adding Multi Media to Your Pages and Frames:
Adding Background Audio to a Page
Before attempting to add background audio to a page the student should
read the following:
After Reading the above material what we would do is to add both
an <embed> and a <bgsound> to our page so the two most used browsers
could carry out our selection.
For instance using hail.wav as our music we would:
<embed SRC="http://www.cs.uml.edu/~pkrolak/lab6/hail.wav" autostart="true"
loop="true" width=200 height=55>
<bgsound SRC="http://www.cs.uml.edu/~pkrolak/lab6/hail.wav" Loop="50">
To get rid of the player controls add the attribute Hidden= true to
both tags.
Click on Format/ Page colors and properties/Select BackgroundsSelect a
background image with the Browse Button or Give the URL of the background
image.
Click Apply observe the effect.
Select colors for the text that give the proper contrast.
Close.
Test the colors and backgrounds to see if it works
out:
Sessions Online School of Design's Color Calculator
is a good site to become familiar with to test your color concepts and
background texture maps for readablity, harmony, and appearance.
Go to Sessions.edu .See: http://www.sessions.edu/ilu/#
Please note the efficient and effective use of space. The results are gained
by the clever use of Flash 5.0 and JavaScript.
Using full width background tiles and tables as alternative
to frame page layouts:
Full width background tiles (an image that is designed to be the width
of a page). Remember that a background is an image or a texture used
like tiles to cover the surface of the page. For the purpose of creating
a layout that is naturally divided into vertical regions it is best
to select a tile that is wide enough to cover the width of the page (approximately
1350 pixels) and which has a pattern or bar of color on the left end and
remainder some light color or texture. Such a tile is useful in setting
up a narrow vertical bar of color or texture and a larger plain area. This
is a frequently used technique by web designers to avoid using the frame
tag and frame page for layout. They use a table tag to create a large table
that includes the whole page. This large table is set up so the first column
is over the vertical bar, this column is then reserved for the menu, or
table of contents, i.e. a navigational vertical button bar. The larger
area to the left of this first column is reserved for the banner ads and
navigation aids on top and the document's information below. Both of these
to major columns maybe further broken down into table cells as dictated
by the layout of graphics and content to achieve the designer's vision
of the page layout.
See --
The Great Web Site! An example using a table to control the layout with the above full
width background. While this is a rather simple example it does illustrate
the point.
Tools for Generating Banners and other Useful Art
Work for Your Page:
Web based tools for creating banners, logos, and other art work:
How to Create a Simple 3-D Banner
To create an interesting 3-D logo go the GIFWorks.com
site; and use its online interactive tool:
Click on the word File in the GifWorks Toolbar Select [New 3-D Banner]
Fill in the dialog box selecting a font, color and size to match your web
design. Also determine whether to slide or rotate, etc.
Click [Create], examine the preview and if it is satisfactory Click [Save]
The dialog window will disappear and the GIFWorks editor will reappear.
Make final edits and save image in the normal fashion (Click on the banner
with the Right Mouse Button and chose Save Image As..)
For Example the Logo Below was created with:
the Lazy Dog Font and [Effects] Drop Shadow
Other Useful Web Banner sites:
Flamingtext.com:
This web site supplies an impressivev array of web services for creating
customized banners (headings), buttons, bullets, fonts, etc.
http://www.flamingtext.com/
http://www.guistuff.com/
Guistuff.com supplies a very useful service in creating a GUI template
for you site including navigation.
http://www.guistuff.com/
Using Shareware for creating attractive banners:
Using the MS Word 2000 to create art work for your
page:
It is recommended that if you are using the HTML features of MS Word that
the current version found in Office 2000 or later versions be used for
best results. The creation of a logo can be quite time consuming and require
the services of professional web designer for use in a large E-commerce
site. However, it is possible to create attractive and very acceptable
logo's using the tools built in the major word processor packages. Later
we will look at the image editors and web graphic tools that allow even
an amateur to create attractive and professional looking results. For a
simple exercise let us consider the following: hypthetical situation. The
client has chosen a background color scheme based around Kelly green a
logo that states -- The Great Web Site! Wants the concept to be a real
eye grabber. You feeling like Filbert return to cubical.
After meeting with a client go to your computer and open MS Word 2000.
To see what can be accomplished in a short time you:
Open a new page
Reset Page setup: Move the
[Insert] object
[Insert]/Picture/WordArt:
WordArt will provide a number of proposed styles. Click on image one that
meets your needs. -- the one the authors used the one with the text
shaped like a rainbow.
A text dialog box will appear select the Font and the size to be used.
Next type in you message, i.e. "The Great Web Site!" The text will appear
on the page with a set of grabber boxes. These allow you to move the text
up or down (drag the middle box on the top or the one on the bottom), right
or left, etc.
Experiment until you get the text where you want it.
SaveAs the document as logo.html:
Click on [File]/Save as Web Page. -- save it on your A:/ drive or if on
your own computer save it to web documents.
Click on [File}/Web page Preview -- If the page looks ok on the browser
you are ready for the next phase, if not edit it until it meets your approval.
Review the logo created with MS word, the logo example by selecting [File]/Edit
Page. Note that Word added many features to this simple examples that will
not look familiar. The <Style> and <XML> tags that may cause some
difficulties for older browsers.
Note -- Word when it creates a web document, i.e. HTML it transforms the
graphics into images stores them into a file in the sub directory in the
directory that you stored the web document in. Use the right mouse button
to get the image files name. Also use Composer to determine the sub directory's
name. What do you suspect is the pattern for naming the image files and
the sub directory?
Sample logo images (.gif) creates using MS Word:
MS Word 2000 & WordArt Logo
A logo created using Microsoft's Word 97 and Wordart
Effective Frame Web Page Design:
Issues that must be addressed when using Frames:
Frames while a powerful layout option is not without its problems. The
designer must address the following problems.
Web pages other than the home page maybe found by a search engine:
There are to ways to deal with this improtant issue.
One is to trust that the <Noframe></Noframe> container has the site's
naviational bar or site map included in it and that the search engine spider
will check it.
Two is to create a separate front door to your web site that does not use
a frame but does have a site map or navigational bar to direct the search
engine spider to the network of pages and links that make up the site.
The front door and the frame page must then both be registered with the
various search engines.
Bookmarking a specific document in a frame and not the frame page:
The bookmark process marks the location of the frame page and not the
specific page in the frame. If this of concern to your design use a trick
like the site http://www.ask.com/ the meta search engine, Ask Jeeves.
If you will examine the site closely you will see that the banner at the
top of the page has a tab, Remove Frame. When Clicked it removes the page
from the frame that it is in and places it into the "_top" window.. At
that point the actual location of the HTML document in the prior frame
is exposed -- look in the Location window of the browser and you will see
the URL. The bookmark process will then work satisfactorily.
Perhaps an even easier way is to:
place your mouse in an open area of the frame that you want to bookmark,
click the Right Mouse Button and a pop up menu will appear.
chose the option -- Open frame in new window,
the frame will appear in a new window -- bookmark in the normal fashion.
Note this proceedure will also work for printing or saving the frame as
well. The frame, actually the document in the frame, will now correctly
bookmarked and its URL is in the Location window. One issue is that the
frame will appear out side of the framepage that it was designed to be
viewed with. This may not give the information as the designer envisioned
it and may lead to some problems when you revisit the document.
Printing the [Print] button and using the [File]/edit page may produce
wrong or confusing results:
One needs to be careful when using frame pages as it becomes necessary
for the viewer to understand the concept of a frame and a page. If the
designer is very skillful the frames may appear seamless and the user may
not even recognize that it a frame page. Why is this important after all
this was the effect the designer sought? If viewing and interacting with
the window were the only process that viewer undertakes then all is fine.
However, the minute the viewer tries to save the "page", edit the "page",
or print the "page", etc. potential for confusion and frustration exists.
The browser will normally print the frame instead of the "page", i.e. the
window. Where did the information on the corporation go? The viewer may
wonder I wanted the corporate phone number for my records. Here the printer
knows from about window but assumes that you want the document where cursor
is positioned last. This is no problem to the frame savvy user. It is the
same thing that happens to the newbie when they print a black background
document with with text and get a blank page. Similarly the act of saving
the "page" if the novice is not careful what is saved is the "frame page"
which is not the wonderful recipe or information the user thought they
were storing. Not much can be done here. The viewer normally starts going
to a newsgroup to report proof of alien behavior and is quietly informed
about frames.
The frame page may be used in a small window or have too many or
two small a frame size to display the desired material:
The classic mistake about frames is to create page with too many, or
too small, too crowded for some screen resolutions. The only way to avoid
this mistake is to employee a design process that begins with a layout
on paper of the window, a story board of user actions and navigational
behavior, and testing of multiple combinations of operating systems, browsers,
and screen resolutions. With the advent of WebTV the author must consider
the standard video format. Some advocate only designing for that single
format. This would seem to be too extreme but certainly it will be an issue
to be addressed in any well designed and layout web site.
Using a simple javascript can prevent you document
from being load inside a frame page:
One designs a page to be loaded into a user's window. But it sometimes
happens that the user attempts to load it into some else's frame. This
may lead to very undesirable results. To prevent this from happening the
following simple JavaScript:
Prevent your page from being framed
Place the following script in the <head></head>
Container:
The design of any web site must consider how the typical viewer will want
to move through it. The process of moving from one page to another is called
navigation of the site. In some complex large corporate web site we may
actually be moving through pages from several sites (servers). The designer
must decide what are the mostly uses of the site and facilitate the user's
navigational needs based on these requirements.
Introduction:
The printed book is typically read from front to back going from page 1
to 2 ... until the book is read. This is called linear navigation. But
not every book is read in that fashion. Consider the dictionary. Very few
people read it by reading every word entry starting with the word "a" and
going through to the z words. Most uses of the dictionary are random. We
discover a word that we do not recognize and go to the dictionary and open
it the pages with words starting with the first letter of our unknown word.
We then may split the section in half and see if the word is in the first
half of the section, repeating the process until we find the page. Thus
we navigate the dictionary differently from a novel. Web sites can be organized
like a novel with each page designed to follow the one in front of it.
In which case we would find the site with a simple navigation design of
a navigation bar that has perhaps three choices (next, back, and home or
starting page). For a very small site (number of web pages) this is fine.
But as the site grows larger it becomes cumbersome. If it is a large site,
how do we find where we left off reading? Later when we go back to find
specific material how do we find it?
In the dictionary example, the book is broken into smaller units by
labeling the first page of words starting with a single letter. Larger
text books break the material into chapters, lessons, or some similar grouping
for similar reasons. For a large web site with similar types of material
we would create an "index page" with a navigational bar with links to the
first page of each chapter. Each page in the chapter would have a link
to the next, previous, and index page. Here what we are calling an index
page is more like the Table of Contents that tells where each chapter starts.
An index is a collection of keywords and phrases arranged alphabetically
with the page(s) that address this concept listed beside it.
This form of index is very useful in text and refenece books where the
reader reads and rereads the content and has to find specific passages
for review or citation. A very large web site used for reference, help,
or random access such as to a online catalog, can achive the same results
as index by using a database and search engine to locate pages that deal
with the keyword or concept.
Finally we may have many types of viewers some will read the pages from
cover to cover, others will want a single page via a keyword search, others
will be interested in sections of material. Thus we can expect that naviagation
will often reflect a variety of navagitional appraoches to service the
multiple type of viewer's and their needs.
Alternative mechanisms for creating user friendly navaigation:
Similarly we saw that one of the most frequesnt applications of the
image map was to create button bars for simple navigation tasks like (next,
previous, home). In the prior material we have learned that forms and JavaScript
allow for interaction between the user and the web server. Using forms
and JavaScript will allow us to design a variety of approaches to complex
navigational mechanisms. In a few cases we will select the navigational
tools to allow better Computer Human Interfaces (CHI). These include buttons
that flash when the mosue is placed over the choice or make a noise. The
reader is reminded that design requirement and style should dictate which
tool to use where. To much glitter will distract the customer and lead
to sites that are confusing to navigate.
Simplicity -- the Navigation Bar:
The simplist navigational techique is the navigation bar (nav bar) -- that
is a list of links in a single horizontal or vertical line. The best practice
dictates using one at the top or bottom of the page. If a button bar or
image map is used at either the top or left of the page an alternative
nav bar is place at the bottom of the page to allow for a backup form of
navigation in case the browser does not support the JavaScript or other
devices required.
In the case where the web site employes a frame page as in the first
example, we used the menu frame to hold the nav bar. See Frame
page where we use a horizintal list of links in the menu.
Menus featuring Roll over Buttons:
A roll over is a button/image map that changes its state when the mouse
is passed over it. Normally, we use the event handler onMouseOver or onMouseOut
which will call a JAvaScript function that changes the image in some manner,
e.g.. makes the image turn red when the mouse is over it and green when
it goes off it. Before the event handler is called we preload the two images
(On, Off) so that the change of state is rapid and does not wait for the
new image to be loaded from the server. This is accomplished by adding
a JavaScript to the <head></head> container. Remember that the scripts
in the head are activated (parsed) while the page is loading. The following
is an example of a simple rollover nav bar.
For an example of a rollover nav bar. Place you mouse over the text
in the logo:: http://www.kkrolak.org/
Alternative JavaScript Techniques that are simple to Create with great
results:
Sound is very effective in cueing the viewer that a button is being rolled
over or clicked. The technique will help the vision impaired and if not
over done set the site off from its competitos. For more on this subject
see
http://www.cs.uml.edu/~pkrolak/lab10/lab10.html
Tool for creating roll over buttons for both image and sound:
The concept of a menu tree similar to Window's directory tree is another
attractive and eye catching method of naviagating a medium to large web
site. See for example the course's site could be laid out as follows:
One strategies used by large web sites is not to have a rigid navigation
structure but to allow the user to it like a web search engine. Form a
query to a database that either finds the stored page or generates it dynamically.
Catalogues, archival sites like online news magazines (e-zines) aften use
this technique for all or part of their sites naviagtion.
How to Design a Frame Page:
Frames deserve serious consideration as a technique for page layout particularly
with a large site and/or complex navigation. However they do involve a
more careful design before one begins to implement a frame layout than
required ofr other design alternatives such as tables. The designer should:
look at the design in a variety of computer screen resolutions including
that of the new WebTV.
not just approach the frame page as a simple alternative to tables, or
use it because it is somehow flashy.
avoid too many or too small frames that can not be easily read.
Story Board the layout:
Lay the frame page out by first drawing the page on a graph paper and see
how a typical page will look. Try a simple mock up of the individual frames.
Examine it with a variety of options such as no borders, no resize, etc.
Let the window be a variety of sizes and repeat the previous exercise with
the best candidates. Once the frame pages architecture has been resolved,
we are ready to move on to the tough stuff.
Place yourself in the user's mind and imagine how the user will navigate
the system. Layout the major portions of the site on a large piece of paper
or tape sample pages to a white board. The drawn links to the way you envision
the viewer navigating the site. Image that the user is dropped into an
arbitrary page by a search engine -- What do you want the viewer
to do after they have visited that page. This leads most designers
to use tricks like that discussed in the section on JavaScript and Targets.
A technique that is often employed is to place a navigational bar at the
bottom of the page to lead the viewer to the site map or master frame page.
If the page is difficult to understand without the supporting frame page
them use the
JavaScript
in Forcing a frame into its designed frame page.
Creating the Frames:
Now that the planning and design is over and only then can one undertake
to be gin the implementation of this page content. In general after the
planning has been done only the frame page and the Table Of Contents (TOC)
page will be outside of the normal web page creation done with Composer
or other available page design tools. The frame page because it has normally
no visible content is not done on a WYSIWYG web editor but something like
MS WordPad. Composer does have a simple plugin to support the creation
of a frame page.
As we shall see in the exercises the creation of the TOC can involve
some HTML tags that are not support by the tool bar, e.g. the <Base>
tag. We can overcome this by the use of the [Insert]/HTML tag ..
The failure to use the <Base> tag will lead the linking of the document
into the TOC..
Additional Reading material for those that are
interested in web site design:
Lab Instructions -- The Creation and Effective Use
of Frames:
For this exercise we will:
Use WordPad to copy and paste a frame page template called framepage.html
-- this page defines the layout of the window into three separate frames.
There are in realty two frame sets the first defines two rows. The top
row, contains only one frame name="Banner" is defined as fixed size and
contains our logo. The second row is a frameset. This nested Frameset contains
two columns. The right one is defined as narrow relative to the second.
This frame, name="TOC", and will be the frame that displays the
site map or Table of Contents. This TOC frame will default to tocstudent.html
and will be static while the viewer visits the site It is important to
understand the role the <base> tag plays in the tocstudent.html. It
defines the default target for all links that are clicked on the tocstudent.html.
This default is used for all links except for the one that causes the viewer
to return to page prior to visiting the framepage.html. Finally, the last
and designed to be the largest frame -- MainPage.html. It role is to be
the frame that is used to display the documents that make up the web site,
i.e. the content, material, the images.
In Lab 4 we discussed that it is sometimes necessary to edit the source
material directly since the WYSIWYG editor can not easily deal with issues
like frames etc. The Student should now set up the HTML source editor to
Word pad.
Creating the Frame Page --- Call it framepage.html. Copy this page into
Word Pad Copy the bracketed HTML below.
Open the Word pad program,
Open a New Blank Page
Paste the Code copied from Lab 6
Save_as -- framepage.html using File Format -- Text Document
Copy and Paste into a new page in WordPad
<HTML> <HEAD> <!-- Do not forget to fill out the meta
tags to assist the search engine --> <Meta author="Your Name"> <TITLE> FRAME LESSON </TITLE> </HEAD> <! -- Create a Frame set of Two Rows with the Top Row (85 pixels
wide) for the Logo which will have embedded sound in it. The Second Row
is set to "*" (which is used to signify whatever
is left) of Width . The Row however is not a frame but a frameset.
This nested frameset will have Two Columns. The Left column Name= TOC will
be for the Table of Contents Menu. The Second Column is for the display
of the MainPage. -->
<Frameset rows="85px,*"
frameborder="0" framespacing="0" border=0> <!-- logo is your banner to the world do not resize or scroll -->
<Frame Name="Banner" src="logo.html" Noresize
Scrolling="No" marginwidth=0 marginheight=0 >
<!-- The following is a nested frameset of columns with frame names
being TOC on the left and MainPage on the right -->
<Frameset Cols="30%, 70%"> <Frame Name="TOC" src="tocstudent.html" Scroll="Auto"
> <Frame Name="MainPage" src="blank.html" Scroll="Auto"
> </Frameset> </Frameset> <Noframe> You have visited a site designed to be viewed with a frame enabled
browser! For a download of the latest Netscape. Place a description of your
site here!! Place a menu of you site's links
here!! </Noframe> </HTML>
Exercise 2: Create the Initial Frame Pages for the
Frame Set
Step 1: Create the Logo
The first page, logo.html, will have a logo for the student's page
of the own design.
It can be simple art work using the graphic tools in MS Word and Save_as
-- logo.hmtl using the File Format of HTML or Web Page on the newer
versions of Word..
Another alternative is to use a banner creation tool:
Once the logo graphic is created we are ready to proceed with actual layout
and composition of the logo.html page.
Open Composer with a new page.
Chose the color scheme for the web site. The colors for the background
or background texture, text, link, active link, and visited link must harmonize
and provide a pleasant effect. The text should be easy to read against
the background. Use [Format]/Page Colors and Properties to set your color
scheme.
Use the General and Meta Tags to define the page title, author,etc.
Click [Table]. Create a table with one row that fills the page. Set the
table background to match the rest of the page. Unchecked the equal column
size box. and align in the center.
The document will be opened in the Composer with the empty showing. Place
your mouse in the right cell. Click [Insert]/ HTML
Tag we will create the <embed> tag to add background sound of the student's
choice, i.e.
Copy and paste into the text box of the Insert
HTML dialog box
<Embed src="URL of your music"
autostart="true" loop="true" width=255 height=55 Hidden="true">
Repeat the [Insert]/ HTML Tag step now for the Internet
Explorer tag <bgsound>
<bgsound src="URL of your music"
loop="true">
The student should use a file format that is known to be supported
by the browser being used, i.e. try ".wav" files first before testing more
exotic ones. Can't think of a good tune go to your resource page try:
The third page, tocstudent.html, open in Composer [new] page,
[Blank Page] and modified as follows:
At the very top of the page, click on [Insert]/HTML Tag . A dialog window will appear:
Type in the Box the following tag--
<Base target="MainPage">
This will cause the clicking on a hot link in the TOC frame to be displayed
in the MainPage frame as the default. The return link is an example of
overriding this default.
Add Links to:
your resume
Text -- Resume
Resume URL --
Day Students
http://www.cs.uml.edu/~your userid/resume.html
Online UMASS Ed
http://ceweb.uml.edu/USER-ID/resume.html
your resource page
Text -- Resource Page
Resource URL --
Day Students
http://www.cs.uml.edu/~your userid/resource.html
Online UMASS Ed
http://ceweb.uml.edu/USER-ID/resource.html
your image map test
Text -- See my image map
Image map URL --
Day Students
http://www.cs.uml.edu/~your userid/imagemap.html
Online UMASS Ed
http://ceweb.uml.edu/USER-ID/imagemap.html
BE CAREFUL THE PATTERN CHANGES
The next link uses the [Link] Button's [Extra HTML] button to allow
us to insert the target= "_top" to over ride the default set in the <Base>
tag.
What does this achieve?
Ans: It causes the viewer to break out of the frame page and go
to the _top window.
Why is there a need to add the target="_top"?
The answer is that if you didn't you would
never get out of the frame.
What is " _top"?
It is a special target name..
Add a return link using:
Text -- Return to Home Page
URL -- The URL of your web site!
Click the [Extra HTML] button which will cause a dialog box:
Type in the following --
target="_top"
Click [Apply] then [CLOSE].
Now you have finished the Table of Contents!!
Save_as -- tocstudent.html
For those who like a flashier web site Use the following alternative instead of the
above :
Copy and Paste Directly into WordPad -- Replace all the red text with your own
information -- SaveAs --- to your A:/ drive File Name -- tocstudent.html File Format -- text doc
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta name="Author" content="Not For E-mail Use">
<meta name="GENERATOR" content="Mozilla/4.5 [en] (Win95;
I) [Netscape]">
<title>lab5 Image map theory, creation, and use</title>
<base target="MainPage">
<script language="javascript1.1">
<!--
/*Code generated by the onMouseover whipper
Visit http://wsabstract.com for more info*/
a333=new Image(120,42)
a333.src="http://www.cs.uml.edu/~pkrolak/template/bbutton1.gif"
a648=new Image(120,42)
a648.src="http://www.cs.uml.edu/~pkrolak/template/abutton2.gif"
a133=new Image(120,42)
a133.src="http://www.cs.uml.edu/~pkrolak/template/bbutton4.gif"
a148=new Image(120,42)
a148.src="http://www.cs.uml.edu/~pkrolak/template/abutton4.gif"
a233=new Image(120,42)
a233.src="http://www.cs.uml.edu/~pkrolak/template/back1.jpg"
a248=new Image(120,42)
a248.src="http://www.cs.uml.edu/~pkrolak/template/back3.jpg"
a433=new Image(120,42)
a433.src="http://www.cs.uml.edu/~pkrolak/lab6/TOC1.jpg"
a448=new Image(120,42)
a448.src="http://www.cs.uml.edu/~pkrolak/lab6/TOC2.jpg"
//-->
</script>
<script>
<!--
function filter(imagename,objectsrc){
if (document.images)
document.images[imagename].src=eval(objectsrc+".src")
}
-->
</script>
</head>
<body text="#000000" bgcolor="#66FFFF" link="#0000EE" vlink="#551A8B"
alink="#FF0000">
<a href="Your_Webs_URL" target="_top"
onmouseover="filter('a537','a648')"
onmouseout="filter('a537','a333')">
<img SRC="http://www.cs.uml.edu/~pkrolak/template/bbutton1.gif"
NAME="a537" BORDER=0
height=42 width=120></a>
<br><!-- Set Up Email Button -->
<a href="Mailto:Your_EMAIL_Address"
onmouseover="filter('a137','a148')" onmouseout="filter('a137','a133')">
<img SRC="http://www.cs.uml.edu/~pkrolak/template/bbutton4.gif"
NAME="a137" BORDER=0 height=42
width=120></a><br>
<!-- Set Up Return to the Last Page -- a Back Button -->
<a href="Javascript:history.back()" target="_top" onmouseover="filter('a237','a248')"
onmouseout="filter('a237','a233')">
<img SRC="http://www.cs.uml.edu/~pkrolak/template/back1.jpg" NAME="a237"
BORDER=0 height=42 width=120></a>
<br>
<!-- This is the code for the pop up menu
to each of your labs' web pages Each
lab's web page is placed in an Option container -- the value is set to
the pages URL The text in
the container is a one or two word description of the assignment -->
Once the three web pages have been created, you are ready to test the frame.
Use the Navigator browser. Click [File]/open to select the framepage.html.
You should see a window:
A Banner frame on top.
Narrow frame, tocstudent.html, with the Table Of Contents.
The large frame, MainPage, will open with your chosen background image.
You should be able to hear the selected music as the Banner Frame loaded.
The Clicking on the TOC links should load the resume, etc. in the MainPage
Frame.
Finally. when the Return to Home Page link is selected in the TOC the Home
Page appears without the frame.
Exercise 4: Modify your web home page, index.html;
and transfer all files to your web site
Once the experiment is tested and working the Student should link the
index.html (the Home Page) to the framepage.html. The text is not very
important, e.g. See my frame exercise.
What to upload to your web site:
Move the new pages to your web site and test one last time!!.
The folowing files need to be uploaded:
The modified index.html (link to your framepage.html)
framepage.html
logo.html
logo.gif (the logo image)
the wave file (the sound file that goes with the embed tag)
blank.html (& amy image file that you used)
tocstudent.html
References:
Glossary of New Terms:
Frames -- the <frame> tag container defines the area of the window that
will have that name. It will also define the default HTML document that
will occupy the window.
Frame page -- the HTML document that defines the frames into which the
documents will be posted. The frame page defines the hierarchy of frames
and frameset containers. The frame page must have at least one <frameset></framest>
container and one or more frames and <frameset></frameset> nested
containers. The frame page has a head but no Body. A frame page should
have a <noframes></noframes> container to handle those browsers that
do not support frames.
Navigation Bar or Nav bar -- A list of links to various key web pages
in a site. The nav bar allows the user to navigate the site. This same
function can be accomplished by button bars, more general image maps, hierarchial
menus, pop up menus, or key word searchs.
Navigate a site -- the process used by the viewer to visit the pages
of a web site. Depending on the users' navigational profiles and the size
of the site the designer must find an appropraite strategy to facilitate
them.
Story board -- The practice of using a white board or similar device
to layout the design and connect the pages to see how the user will navigate
the site. The story board is used in many different areas of presentation
and graphics to see the physical relationship and flow of concept and images.
Target -- the attribute of the tag that contains the name of the frame
where the linked document is to be displayed.
Design Fundamentals
The Planning Stage
Layout and Structure I
Layout and Structure II
Effective Typography
Color Considerations
Good Use of Graphics I
Good Use of Graphics II
Good Use of Graphics III
Interactive Multimedia
Testing and Revision
Site Promotion I
Site Promotion II
Emai
