Site Development
Downloads
Help!!
Home
FramesFrames act like mini-windows inside the browser's screen. Acting like separate windows, each frame scrolls individually and may have its own set of scrollbars. The bars and borders can be removed to make a seamless looking screen that is actually two pages. This is how some sites have a column of links that don't scroll with the content section of the page. The first idea to get used to is that a set of frames, called a "frameset", is coded on one HTML file and the content filling those frames is coded on other HTML files. The page with the frameset code does not have any content on it. The content comes from the pages loaded into the frames. A Simple <frameset>Check out this simple frameset. This single screen requires three web pages (HTML files). The first makes the frameset. The other two are the red and yellow pages that are presented inside the frames. To get started with frames it's a good idea to make some simple test pages like the red and yellow ones I've used in the example. Different backgrounds come in handy for identifying a page and making sure the right one loads in the right place. Now lets jump right into framesets. Look at the code below:
<html> First note that the code for a frameset is in the <head> of a page that will hold only the frameset code. It doesn't even have a <body>. We'll get into that later. Just remember that we're coding the frameset, not the content. The content is on the simple test pages mentioned above. The code above is not complete code for a <frameset>. We'll get into that next. For now notice that a frameset is made between two <frameset> tags. Each frame is defined with an individual <frame> tag. There will be only one set of <frameset> tags and one <frame> tag for each frame on the screen. The <frame> tag doesn't have a closing tag, but the <frameset> must be closed with the </frameset> closing tag. Now lets make and size our columns. That's done by using the COLS attribute in the <frameset> tag:
<frameset cols="200,*"> It's the "cols" part that makes columns as opposed to rows. The dimensions are put in quotation marks. The first dimension will be for our first column, the second dimension is for the second column and so forth. You can code as many framed columns as you'd like. The first column is sized to 200, which the browser reads as 200 pixels. Percentages can also be used. The second value is represented by an asterisk (*). It may be hard to see, but look closely. That asterisk tells the browser to assign any remaining space to the second column. It's used a lot. The dimensions inside the quotes are separated by commas (,). You could just as well size the second frame with pixels or percentages, but using the asterisk automatically fits the second frame to take up the rest of the width of the screen regardless of video resolution. This frameset would make a frame column thats 200 pixels wide on the left of the screen, and another column beside it that's as wide as the rest of the browser screen. Now lets add the content for the frames:
<frameset cols="200,*"> All we've done is add a SRC attribute to each <frame> tag and set it to the URL of the page we want loaded in that particular frame. When making columns, the first <frame> coded is the first column on the left. The next is the second column, and so forth. Columns go left-to-right when making your <frames> and coding your dimensions. That's all there is to it. Make a frameset and then make pages to load in each frame. Keep in mind that content might look differently in frames as opposed to an entire window. You may have to fiddle with your content pages to get them to look good in a frame. We'll be dealing with this throughout this section. RowsFrames can go across the page in rows as well as columns. This page was made from the same test pages using a slightly different frameset to make rows.
<frameset rows="150,*"> All we do to get rows is to use the ROWS attribute instead of COLS. Rows go from top to bottom when your coding the dimensions and SRCing the <frame>s. The top row is set to 150 pixels and the second is set to take up the remaining screen space (by using an asterisk - *). The top frame will load the red "test1.htm" page, and the bottom one will load the yellow "test2.htm" one. Remember that rows are coded from top to bottom and columns are coded left to right. Summary & Exercises
Make some framed pages with columns and rows. Try making some three and four frame pages. Don't worry about getting columns and rows to work together yet. We'll cover that later. Experiment using percentages and multiple asterisks. (Hint: If more than one asterisk is used, the left over screen space is divided evenly among those frames sized with an asterisk.) |
Frames are made in "framesets". They are coded on a page (HTML file) that's separate from the content to be displayed. The content is coded on other pages and "loaded" into the frames.
To Next Advanced HTML Lesson
Back To Advanced HTML Index