Seite erstellt von www.web-beckum.de - Letzte Änderung: 08.10.2006 17:40:14
Wir verfahren nach dem gleichen Prinzip wie bei der Datei logo.html.
Wir öffnen eine Datei die wir im vorigen Kapitel erstellt haben. Diese Dateien hatten wir ja in unser Arbeitsverzeichnis kopiert.
Hier habe ich einmal die Datei inhalt.html (unsere ehemalige index.html) geöffnet. Diese Datei speichern wir gleich unter navi.html
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Die Wollmaus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Alles über das Leben der Wollmaus."/>
<meta name="author" content="Dein Name" />
<meta name="keywords" content="Wollmaus, Staub, Hausstaub, Staubsauger"/>
<meta name="robots" content="index, follow"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
</head>
<body>
<div class="logo">
<img src="wollmaus.jpg" width="621" height="92" alt="Logo Die Wollmaus" />
</div><!-- Ende class=Logo -->
<div class="navi">
<a href="index.html">Home</a>
<a href="entstehung.html">Entstehung</a>
<a href="lebensraum.html">Lebensraum</a>
<a href="feinde.html">Feinde</a>
<a href="bilder.html">Bilder</a>
<a href="impressum.html">Impressum</a>
<a href="mailto:name@provider.de">name@provider.de</a>
</div><!-- Ende class=navi -->
<div class="inhalt">
<h1>Die Wollmaus</h1>
<p>Auf diesen Webseiten finden sie alles Wissenswerte über die Wollmaus.<br />
Die Wollmaus hält sich üblicherweise in dunklen Ecken auf, so dass es nicht einfach ist, sie zu erforschen.</p>
<p>Wir haben hier versucht etwas über die Entstehung und das Sein der Wollmaus,
aber auch etwas über die natürlichen Feinde zusammenzutragen.</p>
<p>Viel Spaß dabei.</p>
</div><!-- Ende class=inhalt -->
<div class="fuss">
</div><!-- Ende class=fuss -->
</body>
</html>
Aus dieser Datei wird wiederum der fettgedruckte Teil entfernt. Unsere Datei Navi ist dann fast fertig. Wir müssen den Links jetzt aber noch ein Ziel zuweisen, damit die Links auch innerhalb unseres Frames "inhalt" geöffnet werden. Deswegen bekamen die Frames mit name="inhalt" einen Namen.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Die Wollmaus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Alles über das Leben der Wollmaus."/>
<meta name="author" content="Dein Name" />
<meta name="keywords" content="Wollmaus, Staub, Hausstaub, Staubsauger"/>
<meta name="robots" content="index, follow"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
</head>
<body>
<div class="navi">
<a href="inhalt.html" target="inhalt">Home</a><br />
<a href="entstehung.html" target="inhalt">Entstehung</a><br />
<a href="lebensraum.html" target="inhalt">Lebensraum</a><br />
<a href="feinde.html" target="inhalt">Feinde</a><br />
<a href="bilder.html" target="inhalt">Bilder</a><br />
<a href="impressum.html" target="inhalt">Impressum</a><br />
<a href="mailto:name@provider.de" >Mail</a><br />
</div><!-- Ende class=navi -->
</body>
</html>
Den ersten Link ändern wir von index.html (dieses ist ja unser Frameset) in inhalt.html. Damit wird dann auch die Startseite innerhalb des Frames angezeigt.
Den Links wird mit target="inhalt" (target engl. Ziel) das Ziel vorgegeben in dem sich der Link öffnen soll. Hier in unserem Frame "inhalt".
Der Zeilenumbruch <br /> am Ende der Links sorgt dafür, dass unsere Links auch untereinander stehen.
Dann haben wir noch den mailto Link geändert von name@provider.de in Mail. Diese Änderung haben wir nur deswegen durchgeführt, damit der Link innerhalb des Frames dargestellt wird.
Unser Projekt können wir uns nun anschauen.
Seite erstellt von www.web-beckum.de - Letzte Änderung: 08.10.2006 17:40:14