|
|
FRAMESIf youve seen a web page that allowed part of the screen to scroll while the navigation bar stayed fixed, youve seen a frame based website. If you havent seen such a site, check out: (The page scrolls while the bottom part stays still) Frame based sites are useful if you want to keep certain information in front of your viewers, while allowing them to scroll through other information. The immobile content can be anything from a navigation bar, to an advertisement, to your logo. Frame sites can be very user friendly, but can also get pretty annoying if you over do it. Frames really should only be used when necessary. How Frames WorkFrames work like a picture frame. If you build a picture frame with space for two photos, you could display two pictures inside of it, right? An HTML Frame is basically the same thing. Youre going to build an onscreen frame, and display more than one web page inside of it. Thats right, youll be displaying more than one totally unique page on the screen at the same time! To display two separate web pages in a frame page, youll need three separate HTML files: 1. The HTML frames page. The frames page wont have any images or color, itll only contain information about the frame itself, and what web pages it holds. 2. A web page to display in the frame. 3. Another web page to display in the frame. Building The Frames PageTo build a set of frames youll start off with the normal basic HTML outline, with one difference: Frames have no <body> tag!!!!!!!This is really important. The body of a web page contains text, colors, and pictures. Frames themselves contain no text, colors, or pictures. Frames only contain fully operational web pages. Each individual web page has its own body tag, so the frame cant have one. When building the frame, you wont need a <body> tag, but youll still have <html>, <head>, and the <title>. Setting up the FramesetA frames page contains a "set" of frames, one for each web page to be displayed. When creating the set of frames, youll have to define some basic characteristics of the frameset. You have to decide whether the frames will be in rows or columns, how many frames there will be, and the size of each frame. You dont actually have to designate both the number of frames and their sizes. Let me explain: If youre at a store picking out pants, you might ask for a size 32, a size 33, and a size 34. You didnt have to say, "Bring me three pants, a size 32, a size 33, and a size 34". You listed three sizes. The clerk knows you want three pairs. The same logic is true when denoting frames. If you list the size of each frame you dont have to designate how many frames there actually are. HTML can tell by counting how many sizes there are. When Defining a Frameset, You Must Designate:
The Frameset TagThe following tag would designate a frameset with two equal rows: <frameset rows="50%,50%"> Frame sizes can be set in pixel width, percentage, or you can use an asterisk (*) to signify "whatevers left". If an asterisk is used for more than one frame, the asterisk frames will evenly share any remaining screen space. The following frameset tag has three columns. The left frame is 200 pixels, the middle frame occupies 10% of the screen, and the right frame will occupy whatever is left: <frameset cols="200,10%,*"> 1. See if you can write the tag for a frameset with four rows, where: a. The first row should be 20% of the screen. b. The second row takes up 100 pixels. c. The third and forth row evenly split the remaining screen space. The tag would read: <frameset rows="20%,100,*,*"> Putting Pages in your FramesYouve got frames. Now you have to instruct HTML what pages initially appear in those frames. Each frame gets its own tag declaring what page should be shown. Each frame will also require naming. Later on during the web design course, well tell hyperlinks to open in certain frames when clicked. The computer requires exact direction when targeting a hyperlinked page at a specific frame. If you name a frame, you can easily tell the computer where to go. You can name your frames whatever you want. You could name them "Fred" and "Wilma" if you felt like it, but that wouldnt be very smart. It would be better to name your frames frame something descriptive, like "top_frame" or "main_frame". The following frameset has two columns. A page called "nav.htm" is held in the left frame. The right frame contains "main.htm": <frameset cols="200,*"> <frame src="nav.htm" name="left_frame"> <frame src="main.htm" name="right_frame"> </frameset> Notice that both frames are named. 1. Try to write the code for a frameset with two rows, where: a. The top frame is 100 pixels high, and contains a page called "banner.htm" b. The bottom frame occupies whatever screen area is left, and contains a page called "main.htm" c. Dont forget to name the frames! The HTML code would look like: (names may differ) <frameset rows="100,*"> <frame src="banner.htm" name="top_frame"> <frame src="main.htm" name="main_frame"> </frameset> Getting Rid of the Ugly Frame Border Normally, a frameset will be surrounded and divided by a border. You can get rid of the border by adding a modifier to the FRAMESET tag: Web designers often remove the border between two pages that have the same background color, resulting in what looks like one seamless page. Clicking Links in One Frame to Open Pages in Another Frame. If you place a page that contains links into a frame, the links will still work. The only problem is that the hyperlinked page will open in the same frame. If you want a linked page to open in a different frame, you must modify the HREF tag on the page containing the link. This is an important point. To change where the link will open, you must actually change the link. That means that youll be editing the page that goes in the frame, and not the frame page itself. If "nav.htm" was kept in your left frame, youd have to open the HTML for nav.htm. For example, in the following graphic:
If you wanted yahoo.com to open in the right_frame, you would: 1. Open the HTML for "page1.htm" 2. Edit the yahoo HREF tag. Youd need to add a modifier to the existing HREF, "targeting" the link at the right frame: <a href="http://www.yahoo.com" target="right_frame"> It is important to note that youll be changing the link on the normal HTML page, not the frames page. Notice how we targeted the name of the frame we wanted the linked page to open in. Nesting FramesIf you have a frameset that looks like:
What youve actually got is a set of three frames (below). To give the appearance of one frame that stretches around the side, we set the borders to "0".
The above frameset is actually two rows. In the top row is "Title.htm". In the bottom row, there is another whole frameset consisting of two columns. You can nest Frames just like we nested tables. The code for the above example would look like: <frameset rows="75,*" border="0" > <frame src="title.htm"> <frameset cols="100,*" border="0"> <frame src="links.htm"> <frame src="text.htm"> </frameset> </frameset> The highlighted area is the nested frameset. Notice that it contains its own <frameset> and </frameset> tag. |
 |
||||||||
