eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

Introducton to Web Design
Column Frames  
  • Okay, let's look at an example of creating a frames document. Specifically, let's divide a browser window into two columns.

  • Since this is best explained by example, consider the following code:

<HTML>
<HEAD>
<TITLE>Frame Column Example</TITLE>
<FRAMESET COLS = "100, 100">
  <FRAME SRC = "afraid_icon.gif" NAME = "afraidFrame">
  <FRAME SRC = "asterix_icon.gif" NAME = "asterixFrame">
<NOFRAME>
Well, if you do not have a frames capable browser,
this whole section will be meaningless.  :(
</NOFRAME>
</FRAMESET>
</HEAD>
</HTML>

  • On the web, the previous code would like the following figure. Notice that we used two images for our frames, but we could easily insert HTML documents or anything else that can be referenced with HREF.

  • Suppose we did not want to hardcode the frame size. The COLS attribute also takes percentages as values to allow for a percentage- based sizing. Thus, the previous code could be rewritten as the following (notice we include one full URL as a frame and a relative link as the other):

<HTML>
<HEAD>
<TITLE>Frame Column Example</TITLE>
<FRAMESET COLS = "50%, 50%">
  <FRAME SRC = "http://www.eff.org/" NAME = "lFrame">
  <FRAME SRC = "relative_link.html" NAME = "rFrame">
<NOFRAME>
Well, if you do not have a frames capable browser,
this whole section will be meaningless.  :(
</NOFRAME>
</FRAMESET>
</HEAD>
</HTML>

  • Finally, you can use an asterix to specify "anything else" as a sizing component. Thus the following code would create three columns. One column would be 25 pixels wide, one would be 25 pixels wide, and the third would take up all the remaining space depending on how the user resized the browser window.

<HTML>
<HEAD>
<TITLE>Frame Column Example</TITLE>
<FRAMESET COLS = "25, 25, *">
  <FRAME SRC = "http://www.eff.org/" NAME = "lFrame">
  <FRAME SRC = "relative_link.html" NAME = "rFrame">
<NOFRAME>
Well, if you do not have a frames capable browser,
this whole section will be meaningless.  :(
</NOFRAME>
</FRAMESET>
</HEAD>
</HTML>

Previous Page | Next Page