Presentation is loading. Please wait.

Presentation is loading. Please wait.

 You've probably come into contact with web sites in which the browser window seemingly allowed you to move around between several different pages. 

Similar presentations


Presentation on theme: " You've probably come into contact with web sites in which the browser window seemingly allowed you to move around between several different pages. "— Presentation transcript:

1

2  You've probably come into contact with web sites in which the browser window seemingly allowed you to move around between several different pages.  The truth is that the browser really was allowing you to view several pages at once.  An HTML feature known as frames allows you to divide the browser window into regions that contain separate web pages; each of these regions is known as a frame.  Frames are roughly similar to in that they allow you to arrange text and graphics into rows and columns. Unlike a table cell, however, any frame can contain links that change the contents of other frames (or itself).

3  A frame is a rectangular region within the browser window that displays a web page alongside other pages in other frames.  The main advantage of using frames becomes apparent when you click one of the navigational links in the top frame. The top frame will not change at all in this example, but a new page will be loaded and displayed in the bottom frame.  When they're implemented properly with only two or three frames, the effect can be helpful, but more than that and you'll likely just cause confusion and frustration among your visitors.

4  A frameset document actually has no content.  It only tells the browser which other pages to load and how to arrange them in the browser window.  A frameset document is an HTML page that instructs the web browser to split its window into multiple frames, and specifies which web page should be displayed in each frame.  In the listing there is a tag instead of a tag.  No tags that would normally be contained in a tag can be within the tag.

5  The tag in this example includes a rows attribute, meaning that the frames should be arranged on top of each other like the horizontal rows of a table.  If you want your frames to be side by side, use a cols attribute instead of rows.  You must specify the sizes of the rows or cols, either as precise pixel values or as percentages of the total size of the browser window.  You can also use an asterisk (*) to indicate that a frame should fill whatever space is available in the window.  If more than one frame has an * value, the remaining space will be divided equally between them.

6  means to split the window vertically into two frames.  The top frame will be exactly 80 pixels tall, and the bottom frame will take up all the remaining space in the window.  The top frame contains the document banner.html, and the bottom frame contains greeting.html.  Because you can't predict the size of the window in which someone will view your web page, it is often convenient to use percentages rather than exact pixel values to dictate the size of the rows and columns. For example, to make a left frame 20% of the width of the browser window with a right frame taking up the remaining 80%, you would type the following : 

7  Within the and tags, you should have a tag indicating which HTML document to display in each frame.  If you have fewer tags than the number of frames defined in the tag, any remaining frames will be left blank.)  Include a src attribute in each tag with the address of the web page to load in that frame. (You can put the address of an image file instead of a web page if you just want a frame with a single image in it.)

8  The real power of frames begins to emerge when you give a frame a unique name with the name attribute in the tag.  You can then make any link on the page change the contents of that frame by using the target attribute in an tag. ◦  This code displays the greeting.html page in that frame when the page loads and names the frame "main".

9  In the code for the top frame you will see the following link: ◦  When the user clicks this link, news.html is displayed in the frame named main (the lower frame).  To accomplish this sort of interactivity before the invention of frames, you would have had to use complex programming or scripting languages. Now you can do it with a simple link!  If the target="main" attribute had been left out, the news.html page would be displayed in the current (top) frame instead.

10  Want to open a page in a new window without using frames? Just use one of the following special names with the target attribute of the tag (for example, Click here to open the popup.html document in a new window. ):  _blank loads the link into a new, unnamed window.  _top loads the link into the entire browser window. Use this when you want to get rid of all frames or replace the entire window with a whole new set of frames.  _parent loads the link over the parent frame if the current frame is nested within other frames. (This name does the same thing as top unless the frames are nested more than one level deep.)  _self loads the link into the current frame, replacing the document now being displayed in this frame. (You'll probably never use this because you can achieve the same thing by simply leaving out the target attribute altogether.)

11  By nesting one frameset within another, you can create rather complex frame layouts.  A cols frameset is used to split each row of the rows frameset into three pieces.  Before you get to thinking that I'm contradicting myself when it comes to the complexities of frames, please understand that the purpose of this example is to demonstrate how nested frames work, not to encourage a particular technique.

12  The ugly parts are the gray dividers between the frames, which completely ruin the effect of surrounding the center frame with nicely designed graphics. There also isn't enough room in the top and bottom frames to display the graphics without scrollbars. Fortunately, there are HTML commands to get rid of the frame dividers, make more space in small frames by reducing the size of the margins, and force frames not to have scrollbars.

13  In addition to the name attribute, the tag can take the following special frame- related attributes: ◦ marginwidth Left and right margins of the frame (in pixels). ◦ marginheight Top and bottom margins of the frame (in pixels). ◦ scrolling Display scrollbar for the frame? ("yes" or "no") ◦ frameborder Display dividers between this frame and adjacent frames? (1 means yes, 0 means no) ◦ noresize Don't allow this frame to be resized by the user.

14  marginwidth and marginheight are pretty self-explanatory, but it's worth taking a close look at each of the other attributes.  Normally, any frame that isn't big enough to hold all of its contents will have its own scrollbar(s).  People viewing your frames can ordinarily resize them by grabbing the frame borders with the mouse and dragging them around.  If you don't want anyone messing with the size of a frame, put noresize="noresize" in the tag.  Frames are flexible enough to allow you to control the size of frame borders or eliminate borders altogether.  This makes a frame document look just like a regular web page, with no ugly lines breaking it up. Just put a frameborder="0" attribute in every single tag not just in the tags.

15 Tag/AttributeFunction … Divides the main window into a set of frames that can each display a separate document. Attributes ROWS="..."Splits the window or frameset vertically into a number of rows specified by a number (such as 7), a percentage of the total window width (such as 25%), or as an asterisk (*) indicating that a frame should take up all the remaining space, or divide the space evenly between frames (if multiple * frames are specified). COLS="..."Works similar to ROWS, except that the window or frameset is split horizontally into columns.

16 Tag/AttributeFunction FRAMEBORDER="..."Specifies whether to display a border for the frames. Options are YES and NO. BORDER="..."Size of the frame borders in pixels Defines a single frame within a. Attributes SRC="..."The URL of the document to be displayed in this frame. NAME="..."A name to be used for targeting this frame with the TARGET attribute in links. MARGINWIDTH="..."The amount of space (in pixels) to leave to the left and right side of a document within a frame.

17 Tag/AttributeFunction MARGINHEIGHT="..."The amount of space (in pixels) to leave above and below a document within a frame. SCROLLING="..."Determines whether a frame has scrollbars. Possible values are YES, NO, and AUTO. NORESIZEPrevents the user from resizing this frame (and possibly adjacent frames) with the mouse.... Provides an alternative document body in documents for browsers that do not support frames (usually encloses... ).


Download ppt " You've probably come into contact with web sites in which the browser window seemingly allowed you to move around between several different pages. "

Similar presentations


Ads by Google