Einfache Präsentationshomepage mit Dreamweaver
Hier schonmal das Ergebnis dieser Anleitung
Indexseite anlegen und speichern unter index.html
- Starten Sie das Programm Dreamweaver und erstellen Sie eine neue HTML-Seite
- Geben Si lie der Seite einen Titel, z.B. <title>startseite</title>
- Speichern Sie die Seite unter dem Namen "index.html" in einem neuen Ordner Ihrer Wahl.
- Erstellen Sie im Head-Bereich der Seite folgenden Link auf eine externe CSS-Datei, in der alle Layoutdefinitionen der Seite festgelegt werden:
<link href="layout.css" rel="stylesheet" type="text/css"> - Zur Definition des Body-Tags weisen Sie dem Body-Tag der Seite index.html eine ID zu, z.B. <body id="startseite">
- Ergebnis: Der Quelltext der Seite index.html lautet nun:
<!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>
<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
- Legen Sie mit Dreamweaver oder einem einfachen Texteditor eine leere Datei an und speichern Sie diese unter layout.css
- Erweitern Sie die CSS-Datei um eine Definition für die ID "sartseite", die Sie dem body-Element zugewiesen haben. Weisen Sie dieser ID in der CSS-Datei eine Hintergrundfarbe zu. Suchen Sie eine Farbe auf der Seite http://www.stellatest.de/css/cssMorgenstern/colorhex.htm
- Die Definition in der CSS-Datei lautet z.B.: #startseite {background-color: tomato}
- Ergebnis: die CSS-Datei lautet nun:
/* CSS Document */
#startseite {background-color:tomato}
#startseite {background-color:tomato}
- Zwischen Sie den Zeichen /* und */ können Sie Kommentar in der CSS-Datei unterbringen.
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.
- Fügen Sie auf der Startseite mit dem Element "div" eine Textbox hinzu und weisen Sie dieser eine Klasse zu. Nennen Sie diese zum Beispiel "textbox2": <div class="textbox1">Text auf der Startseite</div>. Auf der Startseite erscheint dieser Text.
- Layoutieren Sie Textbox in der CSS-Datei: Positionieren Sie die Textbox auf der Startseite, weisen Sie dieser eine Hintergrundfarbe zu und umranden Sie den Text mit einer Umrandung mit runden Ecken sowie einem Schatteneffekt.
- Die Befehle in der CSS-Datei sehen wie folgt aus:
.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 */
}
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.
- Schreiben Sie drei Namen für Start, Seite1 und Seite2 auf die Textseite.
- Markieren Sie jeden Namen und weisen Sie jedem Namen einen leeren Link zu. Fügen Sie dazu im Eigenschaftenfenster in Dreamweaver am unteren Ende der Seite dem Feld "Hyperlink" das Zeichen "#" ein. Im Quelltext im body der Seite index.html entsteht folgender Code:
-
<body id="startseite">
<div class="textbox1">Text auf Seite 1</div>
<a href="#">Start</a>
<a href="#">Seite1</a>
<a href="#">Seite2</a>
</body> - In der Ansicht werden nun die Begriffe unterstrichen und blau dargestellt. Gleichzeitig wird der Mauszeiger zur Hand, wenn mann mit der Maus über die Begriff fährt.
- Weisen Sie jedem Link eine Klasse zu und nennen Sie diese z.B. link1, link2, link3.
- Der Code im body der Datei index.html sieht dann so aus:
<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>
<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>
- Die Definition für die Klasse in der CSS-Datei sieht zum Beispiel für link1 so aus:
.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;
}
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
}
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.
- Ersetzen Sie zunächst die Platzhalter # in den Links durch echte Seitenadressen.
- Der Name der Startseite ist bekannt. Ersetzen Sie daher den ersten Platzhalter im Link "Start" durch den Dateinamen "index.html". Der Code lautet daher:
<a class="link1" href="index.html">Start</a> - Die Namen der Seiten 2 und 3 legen Sie jetzt fest und nennen Sie diese zum Beispiel seite2.html und seite3.html
- Der komplett Code der Seite index.html lautet jetzt:
<!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>
<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.
- Kopieren Sie die Seite index.html zwei Mal und bennenen Sie die Kopien um in seite2.html und seite3.html
- In einem Ordner liegen jetzt folgende Dateien:
- index.html
- seite1.html
- seite2.html
- seite3.html
- Passen Sie die Seiten 2 und 3 an. Ersetzen Sie die Title-Information durch eine entsprechende Benennung
- Schreiben Sie einen Text in die Textbox aus dem hervorgeht, dass hier eine andere Seite vorliegt.
- Ändern Sie auf Seite 2 die ID im body. auf der Index-Seite wurde dem Body die ID "Startseite" zugewiesen. Weisen Sie der Seite 2 die ID "seite2" und der Seite 3 die ID "seite3" zu.
- Definieren Sie für die IDs der Seiten 2 und 3 in der CSS-Datei andere Hintergrundfarben.
- Ergebnis: Jetzt können Sie zwischen den Seiten hin- und her blättern.
Hervorheben des Links auf der aktiven Seite
- Definieren Sie eine Klasse .aktiv und weisen Sie dieser z.B. eine hellere Hintergrund-Farbe zu als den übrigen Links. Auf der jeweiligen Seite wird dem Link der Seite die Hintergrundfarbe "lime" zugewiesen. Der Befehl im Body der Index-Seite lautet:
- <a href="index.html" class="link1 aktiv">Start</a>
- die Klasse "aktiv" wird einfach zusätzlich der Klasse "link1" hinzugefügt.