Scribd Logo
Upload

Welcome to Scribd!

  • Frames

    Uploaded by

    khairitkr
    14 views24 pages
    12. Frames

    Original Title

    12. Frames

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    12. Frames

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    14 views24 pages

    Frames

    Uploaded by

    khairitkr
    12. Frames

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 24

    Frames

    Frames
    Dividing a page, called frameset, into frames, allow the visitor to see more than one page at a time Each frame contains its own Web page, and theoretically could be viewed independently in a separate window One of the disadvantage they can be hard to navigate

    Creating a Simple Frameset


    Think of a frameset as a window with individual panes Each pane shows different information You decide

    how many panes your windows will have how its border look like should have scroll bars or not

    Assigning individual URLs to each pane, that is, frame

    <!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=content-type content=text/html;charset=utf-8 /> <title> FRAMES IN ROWS </title> </head> <frameset rows=20%,60%,20%"> <frame name="one" src="Winter.htm"/> <frame name="two" src="Sunset.htm"/> <frame name="three" src="Water lilies.htm"/> </frameset> </html>

    Create simple frameset with 3 horizontal rows all in the same column
    no <body> </body> rows=20%,60%,* 3 rows row height name identify the particular frames use

    Creating Frames in Columns

    <!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=content-type content=text/html;charset=utf-8 /> <title> FRAMES IN COLUMNS </title> </head> <frameset cols="20%,*,20%"> <frame name="one" src="Winter.htm/> <frame name="two" src="Sunset.htm/> <frame name="three" src="Water lilies.htm/> </frameset> </html>

    Creating Frames in Rows and Columns

    <!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=content-type content=text/html;charset=utf-8 /> <title> FRAMES IN COLUMNS </title> </head> <frameset frameborder="0" rows="20%,*,20%" cols="50%,*"> <frame name="one" src="red.htm" scrolling="no"/> <frame name="two" src="blue.htm" scrolling="no"/> <frame name="three" src="black.htm" scrolling="no"/> <frame name="four" src="purple.htm" scrolling="no"/> <frame name="five" src="green.htm" scrolling="no"/> <frame name="six" src="yellow.htm" scrolling="no"/> </frameset>

    </html>

    Combining Framesets

    <!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=content-type content=text/html;charset=utf-8 /> <title> COMBINING FRAMESETS </title> </head> <frameset rows="10%,85%,*"> <frame name="one" src="blue.htm"/> <frameset cols="10%,*"> <frame name="two" src="yellow.htm"/> <frame name="three" src="purple.htm"/> </frameset> <frame name="four" src="red.htm"/> </frameset> </html>

    Creating an Inline Frame


    If you want to mix text, graphics and a frame all on one page, youll need to create a floating or inline frame

    <!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=content-type content=text/html;charset=utf-8 /> <title> INLINE FRAME </title> </head>

    in the <body> </body> tag and refer to frame.url

    <body bgcolor="#ffffff">
    <h1> COLOURS </h1> - colors - colors - colors - colors - colors - colors - colors - colors - colors - colors <hr /> <iframe src="combiningframesets.htm" width="100%" height="450"> <h1> this part :: type the text that should appear if the browser can't display the frame </h1> </iframe>

    </body>
    </html>

    Adjusting a Frames Margins


    All browsers display a frames contents with a default margin from 8 to 15 pixels on each side You can adjust the margin so that there is more space, or, if you prefer, so that the frames contents begin in the topleft corner

    <!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=content-type content=text/html;charset=utf-8 /> <title> COMBINING FRAMESETS </title> </head> <frameset rows="10%,85%,*"> <frame name="one" src="blue.htm"/> <frameset cols="10%,*"> <frame name="two" src="yellow.htm"/> <frame name="three" src="purple.htm" marginheight="50" marginwidth="75"/> </frameset> <frame name="four" src="red.htm"/> </frameset> </html>

    Showing or Hiding Scroll Bars


    You can decide whether each individual frame should have scroll bar all the time, never, or only needed Only when needed :: means that the scroll bars will appear only when there is more information than can be shown at one time in the frame If the visitors makes the window big enough, these scroll bars will eventually disappear To show scroll bars all the time :

    To hide scroll bars all the time :

    scrolling=yes scrolling=no

    To show scroll bars when needed :

    scrolling=auto

    <frame name="two" src="yellow.htm scrolling=auto/>

    Adjusting the Color of the Borders


    In theory, you can change the color of each frame individually In practice, however, since the borders are shared between frames, the possibilities are more limited Unfortunately, the bordercolor attribute is not standard (X)HTML
    <frameset rows="10%,85%,*" bordercolor="#ff0000">

    Adjusting the Frame Borders


    By default, your visitors browser will draw sculpted borders around each frame in your frameset The border tag lets you control the width of the space between frames The frameborder tag lets you choose to fill that space with sculpted borders or leave it blank
    <frameset rows="10%,85%,*" bordercolor="#ff0000 border=10>

    To hide the sculpted borders:


    <frameset rows="10%,85%,*" bordercolor="#ff0000 border=10 frameborder=0>

    Keeping Visitors from Resizing Frames


    Frames with relative or variable sizes are always resized when the visitor changes the size of the browser window However, you can also choose whether to let the visitor resize the individual frames To keep visitor from resizing your frame:
    <frame name="one" src="blue.htm" noresize="noresize"/>

    Targeting Links to Particular Frames


    You can have other pages appear in the same frame The trick is to add a pointer, called a target, to the links to those pages The target says open this link in the photos frame

    <title> COMBINING FRAMESETS </title> </head> <frameset rows="10%,85%,*" > <frame name="one" src="blue.htm"/> <frameset cols="10%,*"> <frame name="two" src="yellow.htm"/> <frame name="three" src="purple.htm" /> </frameset> <frame name="four" src="red.htm"/> </frameset> <title> YELLOW </title> </head> <body bgcolor="yellow"> <p> text - text - text - text - text - text - text - text - text - text </p> <a href="blue.htm" target="three">blue</a> <a href="green.htm" target="three">green</a> <a href="red.htm" target="three">red</a> <a href="purple.htm" target="three">purple</a> </body>

    Targeting Links to Special Spots


    You will want to make more general instructions, like having the link open on a new window. There are 4 special target names:

    <a href=content.htm

    target=_blank target=_self target=_top


    the link

    to have the link open a new window to open the link in the same frame that contains

    target=_parent
    current frameset

    to use the entire current window for the link to open the link in the frameset that contains the

    Changing the Default Target


    In a frame contains a link, the link will open up in the same frame, by default, unless you change the target You can change the default target for all the links on a page by using the base tag

    <title> YELLOW </title> </head> <body bgcolor="yellow"> <p> text - text - text - text - text - text - text - text - text - text </p> <a href="blue.htm" target="three">blue</a> <a href="green.htm" target="three">green</a> <a href="red.htm" target="three">red</a> <a href="purple.htm" target="three">purple</a> </body> <title> YELLOW </title>

    <base target=three/>
    </head> <body bgcolor="yellow"> <p> text - text - text - text - text - text - text - text - text - text </p>

    <a href="blue.htm">blue</a>
    <a href="green.htm">green</a> <a href="red.htm">red</a> <a href="purple.htm">purple</a>

    </body>

    Nesting Framesets
    As if frames and framesets werent complicated enough, you can nest framesets inside of frames to achieve special effects Build the inner frame ==
    <title> NESTING FRAMESETS </title> </head> <frameset cols="*,3*"> <frame src="Winter.htm"/> <frame name="main" src="combiningframesets.htm"/> </frameset> </html>

    combiningfra mesets.htm
    Build the outer frameset ==

    "Winter.htm"

    You might also like