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
Complex Frames  
  • In real life, most uses of frames involve a combination of rows and columns. Thus, you will want to be familiar with a more complex frame structure design. Let's look at an example of a common design pattern that can be seen in operation at Selena Sol's Scripts Archive.

  • In this example, you can see that there are three frames divided into two columns. The column on the left is a viewer frame used for reading web site information. The column on the right is divided into two rows and is used for navigation. The top row is a clickable image that points to the homepage. The bottom row is a table of contents for the site.

  • Here is the code:
<HTML>
<HEAD>
<TITLE>Selena Sol's Public Domain CGI Script
Archive and Resource Library</TITLE>
<FRAMESET COLS = "141, *" BORDER = "0">
<FRAMESET ROWS = "97, *" BORDER = "0">
  <FRAME SRC = "home.html" SCROLLING = "no">
  <FRAME SRC = "toc.html" SCROLLING = "auto">
</FRAMESET>
  <FRAME NAME = "main"
         SRC =  "/Scripts_archive/index.cgi">
</FRAMESET>
</HEAD>
</HTML>

  • Notice that we will follow design logic very similar to the tables within tables idea. In this case, we will set a frame of rows within a frame of columns.

Previous Page | Next Page