| 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): |
|
|
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.
|
|
|
|
|
