1 / 6

Creating A Page with Frames

Creating A Page with Frames. An alternative to creating a page layout using CSS is to use Frames Or you can do both, where a page layout is used within any particular frame The idea behind frames is your page defines some regions (columns or rows) Each region loads its own html page.

lonato
Download Presentation

Creating A Page with Frames

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Creating A Page with Frames • An alternative to creating a page layout using CSS is to use Frames • Or you can do both, where a page layout is used within any particular frame • The idea behind frames is your page defines some regions (columns or rows) • Each region loads its own html page • So the layout is being done outside of the individual html page • As an example, you might define your page to have two rows • a thin row at the top of the page for title • a tall row which itself comprises two columns • a thin left column which is the navigation area • a large right column which is the content area

  2. To Define Frames • Your web page now consists of two sets of definitions • The main page essentially defines how the frames will be laid out • Each frame references its own html file so that other html files represent the remainder of your definition • The main page uses the <frameset></frameset> tags • In the frameset tag, you specify the rows or columns using the rows=“…” or cols=“…” properties • For instance, if you want two columns, a thin column and a wide column, you could use • <frameset cols=“20%,80%”> • You can also specify the size in pixels or use * which means “the remainder of the browser” • For instance <frameset cols=“200,*”> gives you one column of 200 pixels and one column of the rest of the browser • Your main page does not need a body, the frameset tags appear after the header • If a body is included, the body must appear after the <frameset></frameset> tags • The frameset tag can also have properties of bordercolor, frameborder (see next slide), framespacing (in pixels) and title

  3. Inserting the Frames • The Frameset tag merely sets up space for the frames • Now we insert each frame using a <frame /> tag • The frame tag should include at a minimum a src property which specifies the html file that is to be used to fill in that frame • for instance, <frame src=“menu.html” /> • Additional properties are • bordercolor • frameborder – equal to 0 means no visible border, 1 means a border, 1 is the default • id and name as we have used throughout the semester (name can be very important as we will see) • marginheight/marginwidth in pixels • noresize • scrolling (yes, no or auto) • title and longdesc

  4. Creating Multiple Frames <frameset rows=10%,90%> <frame /> <frameset cols="20%,80%"> <frame /> <frame /> </frameset> </frameset> Obviously, we would need to include src statements as in <frame src=“navbar.html” /> where navbar.html would be a simple html file that contains all of our links for this page, and <frame src=“main.html” /> where main.html would be the html file that contains all of our content for this particular frame

  5. Controlling Links • In my website, one of the links is for teaching information • When you click on that link in the menu frame, it loads the teaching.html file into the right frame, why? (see below on the left) • If you do not specify the target for the page, it will instead appear in the same frame (see below on the right) • Obviously we want it placed in the proper frame Right Wrong

  6. The noframe Tag • Some browsers cannot display frames • To avoid a problem of viewing your page if someone is using such a browser, you can set up your page as follows: <html> <head><title>…</title></head> <frameset rows=10%,90%> <frame src=“…” name=“header” /> <frameset cols="20%,80%"> <frame src=“…” name=“main” /> <frame src=“…” name=“main” /> </frameset></frameset> <noframe><body> Place the entire contents of your page here, the header, the menu and main </body></noframe> </html>

More Related