Einfache Präsentationshomepage mit Dreamweaver

Hier schonmal das Ergebnis dieser Anleitung

Indexseite anlegen und speichern unter index.html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Startseite</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body id="startseite">
</body>
</html>

CSS-Datei anlegen unter dem Namen layout.css

/* CSS Document */
#startseite {background-color:tomato}

Ergebnis: die CSS-Datei mit der Body-Definition einer Hintergrundfarbe färbt den Hintergrund der Seite index.html rot.

Textbox auf der Startseite (index.html) einfügen und in der CSS-Datei layoutieren.

.textbox1 {
   position: abolute; /*position auf der Seite absolut */
   left:200px; /*position von links */
   top: 40px; /*position von oben */
   width: 300px; /*Breite der Box */
   font-family: Verdana, Geneva, sans-serif;
   font-size: 1.2em;
   text-align: center;
   height: 300px; /*Höhe der Box */
   border: solid blue 1px; /* Rand durchgezogen blau 1px stark */
   padding:20px; /* Innenabstand vom Text zum Rand */
   background-color:#fff; /* Hintergrundfarbe */
   border-radius:15px; /* Ecken mir Rundungsradius */
   box-shadow: 3px 3px 5px 1px #000; /*schatten Ausrichtung links, oben,      Abstand von der Box, Ausdehnung, Farbe */
   opacity:0.8; /* Transparenz */
}

Ergebnis:

Der Hintergrund wurde transparent weiß eingestellt. Daher scheint das Hintergrundbild durch.



Buttons für den Aufruf von zwei Unterseiten sollen auf der Startseite integriert werden.

<body id="startseite">
<div class="textbox1">Text auf Seite 1</div>
<a class="link1" href="#">Start</a>
<a class="link2" href="#">Seite1</a>
<a class="link3" href="#">Seite2</a>
</body>
.link1 {
position:absolute;
left:10px;
top: 45px;
width: 100px;
height: 100px;
font-family:Verdana, Geneva, sans-serif;
font-size:1.2em;
text-align:center;
padding:20px;
background-color:yellowgreen;
margin: 20px auto;
border: 1px solid blue;
-webkit-border-radius:15px;
border-radius:15px;
box-shadow: 3px 3px 5px 1px #000;
}

Hier das Ergebnis dieser Layoutierung:

Beim Drüberfahren, soll ein Link die Farbe "forestgreen" annehmen.

Dafür wird für alle drei Link-Klassen eine sog. hover-Eigenschaft in der CSS-Datei festgelegt:

.link1:hover, .link2:hover, .link3:hover {
background-color: forestgreen
}

Fährt man jetzt mir der Maus über einen Link, nimmt dieser die Farbe "forestgreen" an.

Seiten 2 und 3 anlegen und verlinken

Um Seiten aufzurufen müssen, die Links eingefügt werden.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Startseite</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body id="startseite">
<div class="textbox1">Text auf Seite 1</div>
<a href="index.html" class="link1">Start</a>
<a href="seite2.html" class="link2">Seite1</a>
<a href="seite3.html" class="link3">Seite2</a>
</body>
</html>

Seiten 2 und 3 erstellen

Jetzt ist der Zeitpunkt zur Erstellung der Seiten 2 und 3.

Hervorheben des Links auf der aktiven Seite

Ergebnis der Musterseiten