Masud Salimian's Multimedia Instructional Design Course- HTML Tutorial: Unit # 5

Review:

Some of the useful tags that we studied in the previous units are:

html head title body center

img i hn p br

sup sub ol ul dl

blockquote font pre a hr

bgsound b table map u

embed !--

In this tutorial, we will study frame tag that has had major impact on how web design has changed from its original form to the current design methodologies. Frames deal with defining independent partitions within a page that may be controlled by different html documents.

FRAME:

Introduction of FRAME tag in HTML, provided a drastic way of presenting the materials via the browsers that supported the tag. The tag provides excellent opportunities for a different-look web design. However, if overused it will be very annoying. In my designs, I have always tried to avoid frames as much as possible. But this is very much a matter of individual preference and style.
Let's assume that you wish to have two subwindows (subframes) in your page. Several major decisions need to be made before you start creating the documents.

How many subwindows you want to have on the screen?
How does the partition look like? (i.e, position, orientation and size of each subframe)
What is going to reside in each subframe?
What is the relationship between the subframes?
In addition many minor decisions can be made too to enhance the look and the performance of the frames. We will discuss some of the important ones as we explain each related tag.
Step One: Main Partition
First we need to create an HTML file that will define how the screen is partitioned. Always start with two subframes, either vertical, or horizontal depending on your judgement. A good way to start is to look for a partition line that goes across the screen (vertical or horizontal). Here are some examples and my suggestions for the first two frames to start.
I will pick two horizontal frames to start for (a), (c), and (e) and two vertical frames for (b), and (d). My guides were the lines as identified in the figure below.
Also we need to declare what percentage of the whole screen is occupied by the first (or second) subframe (e.g., 25%, 30%, etc.). The HTML file that will show the partition into two frames is as follows:
<HTML> <HEAD> <TITLE>Frame Tutorial- The Main Page</TITLE> </HEAD> <FRAMESET COLS="25%,75%">   <FRAME SRC="left.html">   <FRAME SRC="right.html"> </FRAMESET> </HTML>
We will present the formal definitions shortly, but for now notice few things:

The BODY tag is replaced with the FRAMESET tag.
FRAMESET tag also identifies whether you are dividing the screen vertically (using COLS element) or horizontally (using ROWS element) and also the percentage of the screen width (or height) that each subframe is allocated.
FRAME tags immediately following the FRAMESET tag define individual frames and what is going to reside initially in each frame. (Here they are two HTML files, but they can also be images, movies, etc.)
This file will be our main HTML file representing our page.
Step Two: Sub-partitions
Now look at each frame and check whether it has further partitions. In above figures, (a) and (b) do not have any further partition beyond the original two. However, in (c) the top frame itself has been divided into two subframes. In (d) the left frame has been partitioned into two and the right frame into three horizontal subframes respectively. Can you guess how the partitions in (e) are organized?
If a frame is not partitioned further leave its FRAME tag as it is. For the frames that are further partitioned, write the FRAMESET tag that defines the partitions inside that frame and replace them with original FRAME tag. For example for (c) the original FRAMESET statements are:
<FRAMESET ROWS="65%,35%">   <FRAME SRC="top.html">   <FRAME SRC="bottom.html"> </FRAMESET>
However, the top frame itself is partitioned into two subframes. The FRAMESET statements representing this partition are as follows:
<FRAMESET COLS="50%,50%">   <FRAME SRC="left.html">   <FRAME SRC="right.html"> </FRAMESET>
We will now replace the second set (blue color statements) with the appropriate frame statement in the first set (red color FRAME statement). The final HTML file then will be:
<HTML> <HEAD> <TITLE>Frame Tutorial- The Main Page</TITLE> </HEAD> <FRAMESET ROWS="25%,75%"> <FRAMESET COLS="50%,50%">   <FRAME SRC="left.html">   <FRAME SRC="right.html"> </FRAMESET>   <FRAME SRC="bottom.html"> </FRAMESET> </HTML>
Now let's look at the formal definition of the two tags.
<FRAMESET 
        COLS=col-widths
        FRAMEBORDER=1|0 
        FRAMESPACING=spacing
        ROWS=row-heights> 
This tag has an end tag in the form of </FRAMESET> which is required. This tag can have the following attributes:

COLS=col-widths
Creates a frame document with columns. You can specify the column dimensions by percentage (%), pixels, or a relative size (*).
FRAMEBORDER=1|0
Provides the option to display or not display a 3-D border for a frame. 1 (default) sets a frame border. 0 displays no border.
FRAMESPACING=spacing
Creates additional space between frames, in pixels.
ROWS=row-heights
Creates a frame document with rows. You can specify the row dimensions by percentage (%), pixels, or a relative size (*).
The FRAMEBORDER and FRAMESPACING attributes are inherited from any containing FRAMESET element, which means you need only set the attribute on the single, outermost FRAMESET tag to affect all FRAME tags on that page.
The FRAME tag defines each single frame. This tag can have the following attributes:
<FRAME
        ALIGN=LEFT|CENTER|RIGHT|TOP|BOTTOM
        FRAMEBORDER=1|0
        MARGINHEIGHT=height
        MARGINWIDTH=width 
        NAME=name 
        NORESIZE
        SCROLLING=yes|no 
        SRC=address>
Each FRAME tag defines a single frame in a frameset. There is no matching end-tag.

ALIGN=LEFT|CENTER|RIGHT|TOP|BOTTOM
sets the alignment of the frame or of the surrounding text. The default is LEFT.

LEFT
The frame is drawn as a left-flush "floating frame," and text flows around it.
CENTER
Surrounding text is aligned with the center of the frame.
RIGHT
The frame is drawn as a right-flush "floating frame," and text flows around it.
TOP
Surrounding text is aligned with the top of the frame.

BOTTOM
Surrounding text is aligned with the bottom of the frame.

FRAMEBORDER=1|0
Renders a 3-D edge border around the frame. 1 (default) inserts a border. 0 displays no border.
MARGINHEIGHT=height
Controls the margin height for the frame, in pixels.
MARGINWIDTH=width
Controls the margin width for the frame, in pixels.
NAME=name
Provides a target name for the frame.
NORESIZE
Prevents the user from resizing the frame.
SCROLLING=yes|no
Creates a scrolling frame.
SRC=address
Displays the source file for the frame.
Example: Here is the main html file written for the design in (e) above.
<HTML> <HEAD> <TITLE>Frame Tutorial Example- The Main Page</TITLE> </HEAD> <FRAMESET ROWS="25%,*"> <FRAMESET COLS="20%,*"> <FRAME SRC="../../../images/icons/uc_2.gif"> <FRAME SRC="http://www.eng.morgan.edu/~gchen/"> </FRAMESET> <FRAMESET COLS="450,*" FRAMEBORDER="0"> <FRAMESET ROWS="*,50%"> <FRAME ALIGN=center SRC="images/hammer.gif"> <FRAME SRC="http://www.pcworld.com" NORESIZE SCROLLING=no"> </FRAMESET> <FRAME SRC="http://www.eng.morgan.edu/~pitts/"> </FRAMESET> </FRAMESET> </HTML>
To see the result of an HTML file with these statements please click here. Notice how the use of NORESIZE, SCROLLING=no, FRAMEBORDER=0, has affected the appearance of individual frames associated with those elements.
Step Three: Creating Relationships Between Subframes
Creating relationships between subframes is not a specific tag related to the FRAME or FRAMESET tags. It is rather related to the A (anchor) tag. It is through the use of this tag that we can link frames together. It is now the right time to study the A tag in more details.
<A
    CLASS=type
    HREF=reference
    ID=value
    NAME=name
    onClick=function
    onMouseOver=function
    REL=SAME|NEXT|PARENT|PREVIOUS
    REV=value
    STYLE=style
    TARGET=window
    TITLE=title>
The end-tag </A> is required.

CLASS=type
Indicates the class to which the element belongs.
HREF=reference
Specifies either a destination address or a destination file. A destination address must be in URL format. A destination file must name a file and be in the format of the given file system. If no path or domain name is specified, the file is searched for in the same location as the current document.
ID=value
Specifies a unique value for the element over the document.
NAME=name
Specifies a named reference within an HTML document.
onClick=function
Activates a script when the onClick event occurs.
onMouseOver=function
Activates a script when the onMouseOver event occurs.
REL=SAME|NEXT|PARENT|PREVIOUS
Defines the relationship of a link. The default is SAME.

SAME
The author of the linked document is the same as the current document.
NEXT
The link is the next page in a sequence.
PARENT
The current page is the parent of a destination document.
PREVIOUS
The link is to the previous document.

REV=value
Specifies the reverse link.
STYLE=style
Specifies style information.
TARGET=window
Specifies to load the link into the targeted window. This attribute can be used with a frameset where a frame has been named in the FRAME element. The window can be one of these values:

window
Specifies to load the link into the targeted window. The window must begin with an alphanumeric character to be valid, except for the following four target windows:
blank
Load the link into a new blank window. This window is not named.
parent
Load the link into the immediate parent of the document the link is in.
self
Load the link into the same window the link was clicked in.
top
Load the link into the full body of the window.

TITLE=title
Specifies the title that appears when the hyperlink is selected.

The properties of elements that can follow A are applied to the data characters or elements in the container. The anchor element is used to link text or other elements using the HREF= attribute. The anchor element is used to specify text or graphics as a named reference, to which hyperlinks can link, using the NAME= attribute. Anchors cannot be nested.
Using the TARGET attribute of the A tag, and the NAME attribute of the FRAME tag we can define the relationships between the frames.
Examples: Consider the old version of the Resource Center page (click on the link). First notice that how that page opened in a new window not in the current window. That is because in the A tag to define the link, I used the TARGET=top element as follows:

<a href=../resource_center.html target=top>
Second, the Resource Center page represents two vertically divided frames. Now check the source file to see how the main HTML file (resource_c.html) is presented. Also notice that the FRAME statement for the left frame defines the name of that frame as "resource_center_toc". Similarly the right frame is named "resource_center_material."
Now right-click somewhere in the left frame and choose the View Source option. Notice how the link to the email archives is presented:
<A HREF="emails.html TARGET="resource_center_material">
This simply means that when the link is clicked the resulting document (i.e., emails.html) will be loaded to a frame named "resource_center_material" which is the right frame.
In reality, I only added that target element to make a case in here. Notice how the rest of the links do not have any target element in their A tag. However, if you check at the top of the HTML document for the left frame you will see a BASE tag defining all targets to be the frame named "resource_center_material" which is the right window. The BASE tag is defined as follows:
<BASE
    HREF=url
    TARGET=window>
BASE tag specifies the document's URL. No end tag is required.

HREF=url
Specifies the document's full URL in case the document gets read out of context and the reader wants to refer to the original.
TARGET=window
Specifies to load all the links on the page into the targeted window. This can be overridden by specifying a different target attribute for a specific link. The window can be one of these values:

window
Specifies to load the link into the targeted window. The window must begin with an alphanumeric character to be valid, except for the following four target windows:

_blank
Load the link into a new blank window. This window is not named.
_parent
Load the link into the immediate parent of the document the link is in.
_self
Load the link into the same window the link was clicked in.
_top
Load the link into the full body of the window.

IMPORTANT
When assigning a width to a column or height to a row in FRAMESET tag, make sure that the sizes are either enclosed in quotes, or there in no blank space before or after the comma sign.

Your HTML Practice for Unit Five

Study the instructional materials and practice the use the above tags in an HTML document. Verify that your document is valid and correct by saving your document into an html file such as work.html and then try to look at it using your browser. (This can be done off-line)

Create at least two additional documents about the course you are designing using the frames in at least one of them.
Create an HTML documents called FL_assignment_3.html (where FL should be replaced with your first and last initial) with explanations of where you used the tags in those two documents.
Use an HTML reference library and find different elements of FRAME and FRAMESET tags. Develop at least 5 alternative pages to the one that you used to utilize this module's tags using variations of the attributes (e.g., use of NORESIZE, SCROLLING, etc.). Make links to those pages at the bottom of FL_assignment_3.html document.
Create links to the three documents in from your class main page.
Create a frame page following these steps:

Choose images (face) of four subjects (you may choose to use the digital camera with your friends as subjects -- make sure they are the same size)
Use Paint Shop Pro to divide each image into two images and save the halved images.
create an HTML document-- that should have a frameset similar to this image.
Each one of the surrounding corner frames should display the undivided image of a subject (four corners for your four subjects). The other surrounding frames should be designed per specifications given in the image that you just checked. The middle frame should display a combined image as follows:
Every time that you will click on the face (right or left) of a subject in one of the corner frames the left or right portion of that image should be displayed in the middle frame. This will allow you to combine several concepts that you have learned in this class (including frames and maps).

When the page is initially loaded, the two pieces of the face of one of the subjects should be displayed in the center sub-frames. As you click on left or right portion of the face of a subject in one of the corner frames, that portion should be displayed in its appropriate location in the middle frame.
Bonus points will be given if the composite images are seamless (to a reasonable degree)
.
Create buttons, arrows, and other icons including one GIF animation to use in your class pages. Indicate where you used them in your FL_assignment_3.html document.
Create a tutorial for a subject in the course you are designing. If you can not think of any, use a topic in Operations Research or Simulation.
Use Ejay software to create a mix of about 30 to 60 seconds. Export it as a wave sound. You do not need to place the music on the Web page, but make sure that it is submitted in your folder.
This assignment is due Friday February 20th at 5:00pm.