|
CSS Style Sheets |
|
CSS vs Frames: A Brief Comparison of page
layout using Frames and CSS Stylesheets |
|
 |
This is an example of a web page using Frames.
This example actually consists of an 'overall' page named index.htm,
which contains a separate page for each of the frame entities:
-
Header Page (named header.htm)
-
Column Page (named column.htm)
-
Main Page (named main.htm)
-
Footer Page (named footer.htm)
|
|
|
|
|
|
|
|
| CSS Style Sheets -cont'd: |
| This is the html code for
the index page shown above, which contains the
other pages (header.htm,
column.htm,
main.htm,
and footer.htm): |
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Using Frames</title>
</head>
<frameset rows="108,*,100"
border="0">
<frame name="top"
scrolling="no" noresize target="contents"
src="header.htm" style="border: solid 1px #000000">
<frameset cols="150,*">
<frame name="contents"
target="main" src="column.htm"
style="border: solid 1px #000000">
<frame name="main"
src="main.htm" style="border: solid 1px #000000">
</frameset>
<frame name="bottom"
scrolling="no" noresize target="contents"
src="footer.htm" style="border: solid 1px #000000">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't p1port
them.</p>
</body>
</noframes>
</frameset>
</html> |
|
The first
<frameset rows tag
identifies to the browser that it is a "frames" page with
three rows:
- The header section is 108 px in height
- The second row * means that this row will use
whatever space is left over
- The footer section is 100 px in height
The
<frameset cols tag indicates that there are two frames in
this row:
- column.html, which is 150 px wide
- main.htm, which uses (*) whatever space is left
over.
</frameset> completes
the description of the second row details.
<frame name names
each of the four frames that make up this webpage, and where they are
located in relation to each other.
The
</frameset> closing
tag ends the frames description.
|
|
If the
browser is not capable of reading frames tags (which isn't very likely
these days, it will skip ahead and read the paragraph information
warning at the bottom. |
|
|
|
Frames are a very handy way of controlling the
appearance of an intricate web site, but popularity is giving way to the
CSS, (Cascading Style Sheets) method of web page control. CSS uses
a version of frames called iframes, which does essentially the same thing, but popular
opinion is that it is superior.
iframes allow you to change only a portion of a web page without affecting
the rest of it. You
can achieve the same visual result of using frames with only one file by
using CSS div's and containers. |
|
|
|
 |
This is an image of a similar appearing
webpage using CSS instead of frames.
The
appearance is relatively the same. One major advantage is that
the entire web page is made up of one file as opposed to five with the
corresponding frames web page.
The code below incorporates all
of the CSS
information within the header of the single page,
but could also be done using a
separate stylesheet. Either method will work, though.
The advantages of using a separate stylesheet will be discussed in
another tutorial. |
|
|
|
|
|
|
Notice how the positions of each page
element are dictated in the style declarations. Each element position
assumes that the top left corner of the web page has the coordinates
0,0.
|
 |
|
The height of each page area can be
expressed in relative units such as percent or pixels, or in absolute
measurements in inches., mm, cm, points or picas.
The style section within the <head> and
</head> tags takes the place of the separate css stylesheet.
The <DIV id= tags reference the
style attributes at the top.
For example:
<DIV
id="header"> ... </DIV>
references
#header { etc. in the style section
at the top of the page.
|
|
|
|
|
