Major Layouts with Frames for CSS3

Mastering CSS3 - Part 2

Forward: In this part of the series, we look at major layouts with Frames.

By: Chrysanthus Date Published: 25 Jul 2012

Introduction

This is part 2 of my series, Mastering CSS3. In this part of the series, we look at major layouts with Frames. Frameset including (frames) is the official element to use to partition a web page. This topic can be learned under html tutorials. However framesets (including their frames) deal with layout of the web page and layout is a presentational feature. CSS deals with presentation of the web page while html deals with the functioning of the web page. So, this topic is better treated under CSS. I assume you have read the previous part of this series because this is a continuation.

Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.

What is really a Layout?
Layout means where you place what. That is where you place what html element in a web page. Layout can be divided into two categories: major layout and minor layout. Major layout deals with partitioning of the web page. With frameset (frames), each partition takes an HTML document. So major layout with frameset deals with where you place which html element. The html document is the largest html element. Each partition here is a frame. Minor layout deals with where you place which small (e.g. image or paragraph) html element in a partition.

Should you use Frameset for Layout?
It is possible to partition your web page without frameset. I show you how in the next parts of the series. However, frameset is the best partitioning tool. Search Engine authors discourage website designers from using framesets and their frames in web page design. They say search engines do not work well with frameset pages. A search engine is a software application in the Internet, own by a company that promotes websites.

My advice to you is to use framesets (frames) for websites that would depend very little on search engines. A website of an association (group) meant to be used mainly by members of the association is such a website. Whatever is the case, as a website designer, you have to learn how to partition a web page with framesets (and their frames).

Major Layouts
I give you the description and code for major layouts with frames below. The main thing you will have to do is just to fit in HTML documents into the frames and you would have a web page to use in a web site. You should try all the code samples, even without the individual html documents. If you want to modify the frames by doing things such as removing borders, then use the knowledge gained in the previous part of the series.

Before you try each code sample, you should read it first to know what is going on.

Banner, Sidebar and Content Layout
This is the most popular layout. It has a header (banner) frame that runs across the top of the web page. It has a narrow vertical frame that runs downward below the header on the left. The frame for the main content is big and is below the header and just on the right of the narrow vertical frame. The code is:

<!DOCTYPE HTML>
<html>
<head>
    <title>Frame Example</title>
</head>
<frameset rows="25%, 75%">
    <frame src="banner.htm">
    <frameset cols="25%, 75%">
        <frame src="sidebar.htm">
        <frame src="main.htm">
    </frameset>
</frameset>
</html>

Banner, Sidebar, Content and Asidebar Layout
Today, there are computer screens that are too wide. This layout has an aside bar. The asidebar is on the opposite end of the sidebar (extreme right). This layout is suitable for screens that are too wide. The code is:

<!DOCTYPE HTML>
<html>
<head>
    <title>Frame Example</title>
</head>
<frameset rows="25%, 75%">
    <frame src="banner.htm">
    <frameset cols="20%, 60%, 20%">
        <frame src="sidebar.htm">
        <frame src="main.htm">
        <frame src="asidebar.htm">
    </frameset>
</frameset>
</html>

Sidebar and Content Layout
This layout is the same as the above but without the header. The code is:

<!DOCTYPE HTML>
<html>
<head>
    <title>Frame Example</title>
</head>
<frameset cols="25%, 75%">
    <frame src="sidebar.htm">
    <frame src="main.htm">
</frameset>
</html>

Header and Content Layout
This layout is the same as the first one above but without the sidebar. The code is:

<!DOCTYPE HTML>
<html>
<head>
    <title>Frame Example</title>
</head>
<frameset rows="25%, 75%">
    <frame src="banner.htm">
    <frame src="main.htm">
</frameset>
</html>

Content and Footer Layout
With this layout, you have the main content frame and then a small horizontal footer frame below the main content frame. This is the code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Frame Example</title>
</head>
<frameset rows="75%, 25%">
    <frame src="main.htm">
    <frame src="banner.htm">
</frameset>
</html>

Header, Sidebar, Content and Footer Layout
In this layout, you have a header frame (banner) that runs across the top of the web page. Below this frame you have a long narrow vertical frame, on the left side of the web page for the sidebar. On the right of this narrow frame you have the big frame for the main content. Below the sidebar and content frames you have the footer frame that stretches right across the web page. This is the code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Frame Example</title>
</head>
<frameset rows="20%, 65%, 15%">
    <frame src="banner.htm">
    <frameset cols="25%, 75%">
        <frame src="sidebar.htm">
        <frame src="main.htm">
    </frameset>
    <frame src="footer.htm">
</frameset>
</html>

Header, Sidebar, Content, Asidebar and Footer Layout
This layout is the same as the one above but with an asidebar. It would be good for the new computer screens that are too wide. This is the code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Frame Example</title>
</head>
<frameset rows="20%, 65%, 15%">
    <frame src="banner.htm">
    <frameset cols="20%, 60%, 20%">
        <frame src="sidebar.htm">
        <frame src="main.htm">
        <frame src="asidebar.htm">
    </frameset>
    <frame src="footer.htm">
</frameset>
</html>

Nested Hierarchy
This layout is similar to the �Banner, Sidebar and Content Layout�. However, here, the sidebar goes right up to the top of the web page. This is the code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Frame Example</title>
</head>
<frameset cols="25%, 75%">
    <frame src="sidebar.htm">
    <frameset rows="25%, 75%">
        <frame src="banner.htm">
        <frame src="main.htm">
    </frameset>
</frameset>
</html>

Top-Down Hierarchy Layout
With this layout, you have a small narrow header horizontal frame at the top of the web page that runs from the left end of the page to the right end. Below this, you have another horizontal frame slightly taller than the first and it also runs from the left end of the web page to the right end. You can call this the banner frame. Banner and header mean more or less the same thing here. I have decided to use the word banner, here, to mean a bigger header. This is the code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Frame Example</title>
</head>
<frameset rows="15%, 25%, 60%">
    <frame src="header.htm">
    <frame src="banner.htm">
    <frame src="main.htm">
</frameset>
</html>

Horizontal Split Layout
This layout divides the web page into two equal horizontal frames, each running from the left end of the page to the right end. The code is:

<!DOCTYPE HTML>
<html>
<head>
    <title>Frame Example</title>
</head>
<frameset rows="50%, 50%">
        <frame src="top.htm">
        <frame src="bottom.htm">
</frameset>
</html>

Vertical Split Layout
This layout divides the web page into two equal vertical frames, each running from the top end to the bottom end. The code is:

<!DOCTYPE HTML>
<html>
<head>
    <title>Frame Example</title>
</head>
<frameset cols="50%, 50%">
        <frame src="left.htm">
        <frame src="right.htm">
</frameset>
</html>

Wow, we have seen a good number of major layouts. They are the very important major layouts. Well, let us stop here and continue in the next part.

Chrys

Broad Network

Major Layouts with Frames for CSS3

Mastering CSS3 - Part 2

Introduction

Related Links

Comments