weiter: img/pfeil_re.gif img/doku.gif   more ..
back: img/pfeil_li.gif img/doku.gif   Links
img/pfeil_do.gif

Frames

  To ease navigation between differet parts of a WEB site, people use the so called frame technique , this against recommendation of some purists. Frames are partial windows, that allow one or some components to be changed solely, whereas others, like navigation windows stay stable.
  We want to create a so called "frameset", that includes your current start page, but enables you, using an additional navigation window, to switch between the first page and other parts.
  To implement that, we need some more content pages as well as a navigation page. The additional pages (lets start with two) you create following the same scheme. Call them seite2.html and seite3.html. As sample, here the HTML code of two nearly empty pages.

img/xview.gif  
Thats how they look.
img/pfeil_up.gif img/pfeil_do.gif
Before continuing, again a lession of the compendium, namely chapter  "Frames".
img/xbooks.gif

Creation of a Simple Frameset Including Two Frames

  Refering the lecture you will remember the layout of HTML pages, that are in fact just consisting of frames. Your task now is to create a file frames.html that describes two frames within a framesets , side by side.
The name of the left frame is expected to be NAVIGATION and it should show a - to be created - page nav.html.
The right frame's name is INHALT, and it should show your first page seite1.html.

img/xview.gif   Thats , how about your HTML code could look
img/pfeil_up.gif img/pfeil_do.gif

Creation of the Navigation Page

  Still missing is the content of the page to be shown in the navigation frame.   Function of this page is, to change and control the display of the frame named INHALT :
To enable this, your navigation page nav.html must contain links to all three pages - but always referencing a display target of INHALT . To differenciate the navigation frame from the content pages, use a light gray background colour.

img/xview.gif   Coding example for the navigation page
img/pfeil_up.gif img/pfeil_do.gif

The whole now finally img/xview.gif  
looks about that.



img/pfeil_up.gif
weiter: img/pfeil_re.gif img/doku.gif   more ...
back: img/pfeil_li.gif img/doku.gif   Links