Frame

  • November 2019
  • PDF
Download

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA

Overview

Download & View Frame as PDF for free.

More details

  • Words: 1,296
  • Pages: 7
F.4 CIT – HTML – Frame

page 1

Introduction In many cases, when the content of a document is too long to be viewed in one window, we need to scroll the document. By doing so, other elements are scrolled as well, thus making some no longer visible to the user. This may not be a desirable result of scrolling. For example, a navigation bar may go off the screen and can no longer be immediately accessed. By dividing the window into frames, different elements can be placed in different frame. When one frame is scrolled, others remain static within their own regions. At their simplest level, frames provide multiple separately scrollable areas within one user window. When implementing frames, a separate web document that defines the frame layout as well as individual documents which actually occupy the frames are requires. A frameset is created like other HTML document, except that its content is limited to frame-related tags. This is to say, element is not found in a frameset and is replaced by element. Frame Structure - Tag The tag defines the layout of the frames in the document. It does so by specifying whether the frames should be laid out in columns or rows and what each column’s width should be. Usage: ... ...
Attribute: cols, rows:

An array of the width/height of all columns/rows. The size of the array tells the number of columns/rows. The size can be assigned in pixels, percentage or “*”.

Frame Content - Tag While tag is responsible for defining the layout of the entire page, the tag is responsible for defining the properties of each frame, for example the visibility of frame border, the name of the frame and the URL of the frame content. Usage:

Attributes: name:

(Required) It gives the frame a unique name that can be referenced by URLs, scripts, and so on to control the frame’s contents.

src:

(Required) It is used to specify the URL of the content that the frame should display.

frameborder:

Whether the frame has a border or not. Frame borders can help users understand the layout of the document and where the frame borders are so they better manipulate them. On the other hand, without borders, the frame division are hard to distinguish, which leads to a seamless

F.4 CIT – HTML – Frame

page 2

page design. Possible values: 0 (no border, default) | 1 (shows border) marginheight:

Sets the top and bottom margins for the frame, which is the distance from the border.

marginwidth: scrolling:

Sets the left and right margins for the frame, which is the distance from the border. Specify whether the frame displays scroll bars to help scroll the content displayed in the frame. Possible values: yes | no | auto Note:

noresize:

“yes” behaves differently from “auto”. So what is their difference?

If noresize appears in a frame tag, user will not be allowed to resize the frame size.

Example: The following diagram shows the frames of the above code which is saved as frameset.htm:

URL: page1.htm Name: First

URL: page2.htm Name: Second

URL: page3.htm Name: Third

frameset.htm

marginwidth

50% of the page

25%

25%

marginheight

    

Change “50%” to “100px”, and “*” to other values. Assign different values to the border attribute of the frames. Vary the margins of different frames. Set scrolling to “yes”, “no” and “auto”. Try to find their difference. Introduce noresize to different frames. See what the effect of this attribute is.

F.4 CIT – HTML – Frame

page 3

Browser Compatibility Since some of the very old browsers may not equip with support to frames, it is always a good practice to include another non-framed version of your page by using tag in the frameset page. Enclosed by the &lt;noframes> tag is the <body> element, which defines the visual content of the nonframed version. Usage: <html> <head>...</head> <frameset>...</frameset> &lt;noframes> <body>...</body>

Attributes: Attributes in tag are applicable to <noframes> tag.

Nested Framesets If you want to create both rows and columns at the same time using framesets, you need to nest one frameset inside of another. This can be achieved in different ways: file level and tag level. File Level: Nested frame can be done by putting another frameset in a frame. Example: In frameset1.htm: In frameset2.htm:

By defining nested framesets in this way, inner framesets can be reused by other framesets or be shown independently. Moreover, this will give a greater flexibility when targeting links (see the next section).

F.4 CIT – HTML – Frame

page 4

Tag Level: In this method, framesets are defined within another frameset. That is to say, you can include another tag within a element. Example: Fragment 1:

Compare the resulting layouts after modifying Fragment 1 to Fragment 2. Fragment 2:

Targeting Links to Frame We may want to change the content of one frame by performing some actions. For example, by clicking an item on the navigation bar on the left frame, we hope the right frame to show the new page. In order to perform such action, we need to use the target attribute of, for example, the tag to specify the target of the anchor. As discussed in previous chapter, target attribute of the tag takes several possible values: frame_name, _blank, _self, _parent, _top. Explanation: frame_name: the target frame is specified by the name attribute of tag. _blank: _self: _parent: _top:

the target is a new window. the target is the current frame. the target is the parent frameset of the current frame. the target is the current window, without frame.

Example: Outerframeset.htm:

_top

F.4 CIT – HTML – Frame

page 5

InnerframeSet.htm:

_parent



_self

left.htm: Top
Blank
Self
Parent
Topmost
The resulting layout is shown below:

TopFrame _top OuterFrameset.htm

Top Blank Self Parent Topmost

LeftFrame

_self

RightFrame

_parent InnerFrameset.htm

F.4 CIT – HTML – Frame

page 6

Inline Frame - <IFRAME> Tag In some occasions, we may want to include smaller pieces of content to be incorporated in scrollable containers within a larger document. Although it is possible to use regular framesets to create individually scrollable regions, it is better to use the <IFRAME> to build an inline frame – a frame enveloped by the document around it. However, please keep in mind that inline frames are not fully supported by all user agents.

Inline Frame

Usage: <iframe src=”url_of_content”>

Attributes: All attributes in tag are also applicable to <iframe> tag. height, width: align:

the height and width expressed in pixels or percentage.

the alignment of the frame to surrounding text. Possible values:left | right | top | middle | bottom

Example: innerFrame.htm: Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. <iframe src=”main.htm” align=”left”> Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello.

F.4 CIT – HTML – Frame



Try to change the value of align, height and width attribute.

page 7

Related Documents

Frame
November 2019 45
Frame
July 2020 29
Membuat Animasi Frame By Frame
June 2020 20
Frame Relay
November 2019 26
Ribbon Frame
April 2020 16
Frame-0247
December 2019 19

Copyright © 2024 PDFCOKE.