Handout6 html frames


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Handout6 html frames

  1. 1. WEBPROG1 – HTML Midterm Period Handout #6HTML Frames Frames allow for multiple ".html" documents to be displayed insideof one browser window at a time. This means that one page has nocontent on it, but rather tells the browser which web pages you wouldlike to open.Frames - A Generic Frame Page Frames are most typically used to have a menu in one frame, andcontent in another frame. When someone clicks a link on the menuthat web page is then opened on the content page. Here is a classicexample of a basic "index" frameset with a menu on the left andcontent on the right.Code:<html><head></head><frameset cols="30%,*"><frame src="menu.html"><frame src="content.html"></frameset></html>o frameset - The parent tag that defines the characteristics of this frames page. Individual frames are defined inside it.o frameset cols="#%, *"- Cols(columns) defines the width that each frame will have. In the above example we chose the menu (the 1st column) to be 30% of the total page and used a "*", which means the content (the 2nd column) will use the remaining width for itself.o frame src="" -The location of the web page to load into the frame. A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a sites main page.Prepared By: RICHARD F. ORPIANO Page 1 of 4
  2. 2. WEBPROG1 – HTML Midterm Period Handout #6Adding a Banner or Title Frame Add a row to the top for a title and graphics with the code asfollows:<html><head></head><frameset rows="20%,*"><frame src="title.html"><frameset cols="30%,*"><frame src="menu.html"><frame src="content.html"></frameset></html>o frameset rows="#%, *"- rows defines the height that each frame will have. In the above example we chose the new title (the 1st row) to be 20% of the total page height and used a "*", which means that menu and content (which are the 2nd row) will use the remaining height.FrameBorder and FrameSpacing You probably noticed those ugly gray lines that appear betweenthe frames. It is possible to remove these and manipulate the spacingbetween frames with frameborder and framespacing. These attributesappear within the frameset tag. Note: Framespacing and border are the same attribute, but somebrowsers only recognize one or the other, so use both, with the samevalue, to be safe.o frameborder="#" - A zero value shows no "window" border.o border="#"- Modifies the border width, used by Netscape.o framespacing="#" -Modifies the border width, used by Internet Explorer.Prepared By: RICHARD F. ORPIANO Page 2 of 4
  3. 3. WEBPROG1 – HTML Midterm Period Handout #6Code:<html><head></head><frameset border="0" frameborder="0" framespacing="0"rows="20%,*"><frame src="title.html"><frameset border="0" frameborder="0" framespacing="0"cols="30%,*"><frame src="menu.html"><frame src="content.html"></frameset></html>Frame Name and Frame Target How nice would it be to make each menu link load into the contentpage? We do this by naming each frame and setting the correct basetarget inside menu.html.Frame Code:<html><head></head><frameset rows="20%,*"><frame name="title" src="title.html"><frameset cols="30%,*"><frame name="menu" src="menu.html"><name="content" src="content.html"></frameset></html>menu.html Code:<html><head><base target="content"></head>...</html> We first named the content frame "content" on our frame pageand then we set the base target inside menu.html to point to thatframe. Our frame page is now a perfectly functional menu & contentlayout!Prepared By: RICHARD F. ORPIANO Page 3 of 4
  4. 4. WEBPROG1 – HTML Midterm Period Handout #6Noresize and Scrolling Its possible to further customize the <frame> tag using thenoresize and scrolling="" attributes.Code:<html><head></head><frameset border="2" frameborder="1" framespacing="2"rows="20%,*"><frame src="title.html" noresize scrolling="no"><frameset border="4" frameborder="1" framespacing="4"cols="30%,*"><frame src="menu.html" scrolling="auto" noresize><frame src="content.html" scrolling="yes" noresize></frameset></html>o noresize - Do not let the frames be resized by the visitor.o scrolling="(yes/no)"- Allow scrolling or not inside a frame. We set the scrolling for our content frame to yes to ensure ourvisitors will be able to scroll if the content goes off the screen. We alsoset the scrolling for our title banner to no, because it does not makesense to have a scrollbar appear in the title frame.Prepared By: RICHARD F. ORPIANO Page 4 of 4