Personalizing the Frames
While the <FRAMESET> command creates the overall layout of the windows, the <FRAME> command is responsible for the attribution of the content of each window and of the individual characteristics of each one of them. The attributes of the <FRAME> command supersede the attributes of the same name defined by <FRAMESET>.
The <FRAME> Command:-
<FRAME
ALIGN=position
FRAMEBORDER=1 | 0
MARGINHEIGHT=height
MARGINWIDTH=width
NAME=name
NORESIZE
SCROLLING=yes | no
SRC=address>
Where:
ALIGN=position--Adjusts the alignment of the frame or the text.
The values allowed for position are the following:
| Top | The text around the frame is aligned with the top of the frame. |
| Middle | The text around the frame is aligned with the middle of the frame. |
| Bottom | The text around the frame is aligned with the bottom of the frame. |
| Left | The frame is aligned to the left, leaving the text to run on its right side. |
| Right | The frame is aligned to the right, leaving the text to run on its left side. |
FRAMEBORDER=0 | 1--Identical to the attribute of the same name of the <FRAMESET> command, it enables or disable the border display for the current frame.
MARGINHEIGHT=height--Specifies the height of the top and bottom margins of the frame in pixels.
MARGINWIDTH=width--Specifies the width of the left and right margins of the frame in pixels.
NAME=name--Attributes a name to the frame so that it can be identified and located to load documents.
NORESIZE--Prevents the user from resizing the frame.
SCROLLING=yes | no--When set to the value No, the frame does not have a scroll bar when the window is resized.
SRC=address--Indicates the name or URL of the document that will be displayed in the frame.
Adjusting the Internal Margins of the Frame
The programmer may create an internal margin for the frame to position the content of the window away from its border. To create a margin at the sides of the window, the MARGINWIDTH option should be used.
To create a margin at the top and at the bottom of the frame, the MARGINHEIGHT attribute should be used. The size of the margin should be specified in pixels.
The next example shows the frame of the E.HTM document with the margins specified at 50 pixels.
FROWCOL4.HTM File:
<html>
<head>
<title>frowcol2.htm</title>
</head>
<frameset rows=50%,50%>
<frameset cols=50%,50%>
<frame src=d.htm>
<frame marginwidth=50 marginheight=50 src=e.htm>
</frameset>
<frame noresize src=f.htm>
</frameset>
</html>
Scroll Bars and Resizing the Frames:-
<html>
<head>
<title>frowcol5.htm</title>
</head>
<frameset rows=50%,50% frameborder=0>
<frameset cols=50%,50%>
<frame src=d.htm>
<frame scrolling=no src=d.htm>
<frame src=e.htm>
</frameset>
<frame noresize src=f.htm>
</frameset>
</html>
Upon loading this document using the whole screen, no scrollbars appear. However, when you reduce the size of the window, the scroll bar will appear for the frames, except for the D.HTM document.
Here is what it looks like:
Just like any window in Windows, a frame can be resized by dragging on its border. When the cursor is positioned on the border, it changes shape. If you press the left button of the mouse, you can drag the border to the size desired.
The examples in the following figure shows the E.HTM document being resized:
After dragging the reference line to the place desired, releasing the mouse changes the size of the window.
As the window of document F.HTM has the NORESIZE attribute, the cursor does not change shape when it is moved over its border, thus making its resizing impossible.
Interconnecting Frames
Thus far, you have seen how to create a set of frames to display documents independently of each other. The initial project created and electronic manual using frames so that a permanent index is displayed on the screen while another Windows shows the content of the chapter selected. To execute this project, you need to learn to more items. The first is naming a frame, and the second is how to direct the loading of a document to a specific window. This is easy to understand.
Assuming that the set of frames will be made up of two vertical Windows, we need to create a name for the windows through the <FRAME NAME> commands:
| Name of the frame: | Name of the frame: |
| Menu Command: <frame name="menu"> |
Texts Command used to create the name: <frame name="menu"> |
To indicate to the browser the window in which the documents of the chapter should be loaded, we must include in the document containing the links at attribute called TARGET. This option works in both navigator and explorer. An example of this tag is:
<A HREF=x.htm TARGET="texts">Chapter One</A>
It can appear in two places in the code, either in <A HREF> to specify frame that will load the current link or in the <BASE> tag to specify a frame that will load all the links in the current document. This option works well in internet explorer but has no effect in navigator.
<BASE TARGET="window name"> contains the name of the target window. In this case, the command would be:
<BASE TARGET="texts">
and should be included in the menu file. Next, we will detail the creation of this project.
1. Creating the frames Structure:-
This file contains the definition of two Windows, one for the menu and the other for the chapters. The window that will display the chapters will be named "text," and no file will be previously loaded. The window that will contain the main menu is named "menu." In this situation, only the name of the "texts" window needs to be specified.
MENUFRAM.HTM File:-
<html>
<head>
<title>menufram.htm</title>
</head>
<frameset cols=30%,*>
<frame name="menu" src=indcap.htm>
<frame name="texts" src=a.htm>
</frameset>
</html>
2. Creating the Menu Contents:-
The menu file contains the links to the chapters of the manual. You should include in this document the <BASE TARGET> command, which tells the browser where the files linked by the A HREF> command should be loaded. In our example, it tells the browser to load the links to the window called "texts." If this command is omitted, the chapters will be loaded to the same menu window. If you are using navigator, the linked file will be loaded in a new browser window unless you reload a page in the target window. In our case, we preloaded the A.htm file in the MENUFRAM.HTM file.
INDCAP.HTM File:-
<html>
<head>
<title>Main menu</title>
<base target="texts">
</head>
<body bgcolor="#ffffee">
<CENTER>
<h1>Main menu</h1>
<ul>
<li><A HREF=a.htm>Introduction</>
<li><A HREF=b.htm>Chapter 1</>
<li><A HREF=c.htm>Chapter 2</>
<li><A HREF=d.htm>Chapter 3</>
<li><A HREF=e.htm>Chapter 4</>
<li><A HREF=e.htm>Chapter 5</>
</ul>
</center>
</body>
</html>
3. Creating the Chapter Contents:-
The files of the linked chapters have been previously created.
Examine the result of the project upon loading the MENUFRAM.HTM file. Just click on any of the link for the corresponding file to be loaded.
With this knowledge, you can develop interesting pages. In the rest of this chapter, we will present other techniques to make your page even more sophisticated.
👈Episode 13.1 Episode 13.3👉
Share This Post
No comments:
Post a Comment
If you have any doubts. Please let me know.