260 likes | 550 Views
Frame Page. A Frame Page does the following: Defines the size of each frame. Defines how the window will be broken up – rows or columns. Specifies which HTML documents are displayed in each frame. You can’t add regular text or HTML tags to a frame page. Tags associated with a Frame Page.
E N D
Frame Page • A Frame Page does the following: • Defines the size of each frame. • Defines how the window will be broken up – rows or columns. • Specifies which HTML documents are displayed in each frame. • You can’t add regular text or HTML tags to a frame page.
Tags associated with a Frame Page • FRAMESET • FRAME
The FRAMESET tag • Has a closing tag </FRAMESET> • Its purpose is for dividing the window up into frames and determining the size of each frame.
Attributes for the FRAMESET tag • COLS • ROWS • BORDER=# • BORDERCOLOR=“#123456” • FRAMEBORDER= “0” or “no” to turn off • Default is a 3-D border • FRAMESPACING = # (space between frames)
For Example: • <FRAMESET ROWS=“25%, 30%,45%”> • Results in 3 rows of frames taking up 25%, 30% and 45% of the screen. • <FRAMESET COLS=“75%, 25%”> • Results in 2 columns of frames taking up 75% and 25% of the screen.
FRAME tag • No closing tag • Its purpose is to determine what web page will be displayed in a frame.
Attributes for the FRAME tag • SRC • NAME = “text” • NORESIZE • SCROLLING • Ex. SCROLLING = “no” • BORDERCOLOR=“#123456” • (Netscape >=3.0)
MARGINHEIGHT • MARGINWIDTH • FRAMEBORDER = value (IE) • FRAMEBORDER = “no” or “0” to turn off. • FRAMEBORDER = “yes” or “1” to turn on.
FRAMEBORDER attribute • Netscape - removes a border only if adjacent frames sharing that border have borders turned off. • IE - removes adjacent borders only if they are not explicitly turned on in those adjacent frames. • To control borders for all browsers, control the borders for each frame.
Format of a Frame Page <HTML> <HEAD> <TITLE> Example of Frames </TITLE> </HEAD> <FRAMESET ROWS="25%, 75%"> <FRAME SRC="One.htm"> <FRAME SRC="Two.htm"> </FRAMESET> </HTML> Note: There are no BODY tags within a frame page.
Note: • When the previous HTML code is rendered by a browser, the contents of the web page will depend on the contents of the two web pages called “One.htm” and “Two.htm” • The row consisting of 25% of the window will contain the web page called “One.htm”. • The row consisting of 75% of the window will contain the web page called “Two.htm”
Pages are loaded as follows: • If using columns, the pages are loaded left to right. • If using rows, the pages are loaded top to bottom.
Alternative • <FRAMESET ROWS = “100, * ” • This results in a top row consisting of a height of 100 pixels. • The second row will consist of the number of pixels that are left.
Links within the individual frames • <FRAME SRC=“file.htm” NAME = “whatever”> • Then your link contains the following: <A HREF = “Four.htm” TARGET=“whatever”> Click Here!</A> clicking on “Click Here!” will cause the file “Four.htm” to load in the frame named “whatever”.
Nested Framesets <HTML> <FRAMESET ROWS=“30%, 70%”> <FRAME SRC=“one.htm”> <FRAMESET COLS=“20%, 30%, 50%”> <FRAME SRC=“two.htm”> <FRAME SRC=“three.htm”> </FRAMESET> </FRAMESET> </HTML>
Other values for the TARGET attribute within the A tag. • _blank - opens linked document into a newly opened window. (starts another browser window. • _self - opens linked document into the same frame window containing the hypertext link. • This is the default so not necessary.
Other values for the TARGET attribute within the A tag. (continued) • _parent - opens linked document into the parent window or frameset containing the frame containing the hypertext link. • Equivalent to _self if reference is in a window or top-level frame. • _top - opens linked document into the window containing the hypertext link, replacing any frames currently displayed in the window.
Working with frames • When making changes to your frame page or to individual pages, sometimes pressing reload or refresh does not load the new changed versions. • You may have to go to File/Open to reload the changed versions or • You may have to close your browser and start over in order to view your changes.
Example <FRAMESET ROWS=“20%, 80%”> <FRAMESET COLS=“50%, 50%”> <FRAME SRC=“page.htm”> <FRAME SRC=“file.htm”> </FRAMESET> <FRAME SRC=“doc.htm”> </FRAMESET>
Example A (correct?) <FRAMESET COLS=“20%, 80%”> <FRAMESET ROWS=“50%, 50%”> <FRAME SRC=“page.htm”> <FRAME SRC=“file.htm”> </FRAMESET> <FRAME SRC=“doc.htm”> </FRAMESET>
Example B (correct?) <FRAMESET COLS=“20%, 80%”> <FRAMESET ROWS=“50%, 50%”> <FRAME SRC=“page.htm”> <FRAME SRC=“file.htm”> </FRAMESET> <FRAME SRC=“doc.htm”> </FRAMESET>
Example C (correct?) <FRAMESET COLS=“20%, 80%”> <FRAMESET ROWS=“50%, 50%”> <FRAME SRC=“page.htm”> <FRAME SRC=“file.htm”> </FRAMESET> <FRAME SRC=“doc.htm”> </FRAMESET>
NOFRAMES • Use the <NOFRAMES> tag only within the outermost <FRAMESET> tag and its required ending tag </FRAMESET>. • Any contents within the <NOFRAMES> and </NOFRAMES> tag set will not be displayed by any frame-capable browser but will be displayed by any browser that does not handle frames.
The <NOFRAMES> tag set can contain any normal body content including the BODY tags.
Example <FRAMESET COLS=“20%, 80%”> <FRAMES SRC=“file1.htm”> <FRAMES SRC=“file2.htm”> <NOFRAMES> This will appear if a user’s browser does not handle frames Click <A HREF=“url”>here</A> to view a page without frames </NOFRAMES> </FRAMESET>