Stellaplan weiter Alle Anleitungen Diese und weitere Anleitungen finden Sie unter http://stellatest.de/anleitungen

Erstellen Sie eine Homepage mit vier Seiten:

Startseite / Bilder / Kontakt / Impressum

Erstellen Sie eine HTML-Seite und speichern Sie diese ab unter index.html.

index.html ist die Seite, die der Browser als erste Seite sucht und öffnet.

Ein neues Dokument wird zunächst mit der Anzeige "untitled-1" angezeigt. Im title-Element steht "Unbekanntes Dokument".

Speichern Sie die Startseite unter index.html ab und ändern Sie den Inhalt des Elements "title".

Benennen Sie das Dokument mit dem Namen des Seiteninhalts.

index.html ist die Startseite jeder Internetseite.

Fügen Sie für jedes Seitenelement eine sogenannte div-Box ein. Beachten Sie, dass für jedes div-Element, das auf einer Seite nur einmal vorkommt, eine id vergeben werden sollte (<div id="name">...</div>), damit es individuell gestaltet werden kann.

Beim Einfügen eines neuen Elementes haben Sie die Wahl, ob Sie das Element vor oder nach einem Element oder um die Elementauswahl herum einfügen möchten.

(Anmerkung: Elemente, die mehrmals auf einer Seite individuell gestaltet werden sollen, werden durch eine Klasse (z.B. <p class="hervorhebung">...</p>) gekennzeichnet.

 Setzen Sie den Cursor ans Ende des vorausgehenden div-Elementes und fügen Sie die neue div-Box Am Einfügepunkt hinzu.

Dreamweaver fügt einen Platzhaltertext in jedes neue div-Element hinzu.

Vergeben Sie für jede id einen sprechenden Namen. Achten Sie darauf, dass sie eine einheitliche Schreibweise benutzen. Schreiben Sie zum Beispiel alle ids in Kleinbuchstaben. Vermeiden Sie Blanks, Sonderzeichen oder Umlaute.

Umhüllen Sie die Seitenbereiche "header", "navigation", "inhalt" und "footer" mit einem Rahmen. Diesen benötigen Sie, wenn Sie die Seite zum Beispiel zentrieren oder auf eine einheitlich Breite bringen wollen.

 Um die Boxen header, navigation, inhalt und footer herum wird nun ein div mit der id="rahmen" gelegt.

Um die Seite gestalten zu können benötigen Sie einen Style-Bereich, in dem Sie die Gestaltungsbefehle eingeben. Erstellen Sie dazu eine CSS-Datei, die das Gestaltungskonzept für alle Internetseiten enthält.

Wählen Sie als Seitentyp CSS. Die Datei, die dabei entsteht kann im Prinzip mit jedem Texteditor erstellt werden und enthält keinen zwingenden Inhalt. Wichtig ist, dass die Seite mit der Endung .css endet.

In der ersten Seite, die Dreamweaver erzeugt wird der Zeichensatz genannt, dem die Datei folgt. In der Zweiten Seite steht in Kommentarzeichen (/*...*/) ein Kommentar, der beschreibt, um was für eine Seite es sich hier handelt. Beide Informationen sind nicht zwingend notwendig. Eine CSS-Seite funktioniert auch ohne diese Informationen.

Im Quelltext der Datei index.html muss die CSS-Seite verlinkt werden, damit die Gestaltungskriterien auf der Seite ihre Wirkung entfalten können.

Fügen Sie im Bereich <head>...</head> den link auf die CSS-Datei hinzu.

Der Befehl beginnt mit <link href="...

Sobald Sie das Anführungszeichen " eingegeben haben erscheint das Symbol für die Dateisuche und Sie können die CSS-Datei auswählen und als Link hinzufügen.

rel beschreibt, welche Funktion die verlinkte Seite besitzt, hier stylesheet.

type beschreibt, welche Art Datei hier vorliegt. Es handelt sich um eine Textdatei mit CSS-Befehlen (text/css)

Defninieren Sie in der CSS-Datei jeden Bereich der Seite, indem Sie ihr eine Höhe und eine Hintergrundfarbe zuweisen.

Definieren Sie Höhe, Hintergrundfarbe und Abstände.

Wählen Sie weitere Eigenschaften aus dem Repertoire der CSS-Befehle.

Fügen Sie in die Navigationszeile Seitennamen für Startseite, Bilderseite, Kontakt und Impressum hinzu.

Definieren Sie Schrift, Farbe und Schriftgewicht der Navigationsleiste in der CSS-Datei.

Definieren Sie die Navigation so, dass Sie als Navigationsleiste wahrgenommen wird.

Markieren Sie jeden Namen, mit dem Sie eine neue Seite aufrüfen möchten und geben Sie in das Feld Hyperlink (in der Fußleiste von Dreamweaver) den Seitennamen ein, unter dem Sie die Seite speichern werden. Die Startseite haben Sie ja bereits unter dem Namen index.html abgespeichert. Tragen Sie daher ein index.html.

Tragen Sie als Hyperlink für die Seite z.B. bilder.html, für die Seite Kontakt: kontakt.html, für die Seite Impressum: impressum.html ein.

Die Seiten müssen Sie anschließend natürlich unter diesem Namen erstellen.

Nach dem Eintrag des Hyplerlinks wird der Name des Links blau und Unterstrichen dargestellt. Navigationspunkte werden jedoch in der Regel nicht blau und unterstrichen dargestellt. Ändern Sie daher die Definition für Links in der CSS-Datei.

Links werden standardgemäß blau und unterstrichen dargestellt. Um dies zu ändern, muss für Links - das Element für Link ist a - die Farbe und die Text-decoration eingestellt werden. Der Befehl text-decoration: none bewirkt, dass die voreingestellte Textauszeichnung ausgeschaltet wird.

Nachdem Sie jedem Seitenlink einen Hyperlink zugewiesen haben (bild.html, kontakt.html, impressum.html, index.html) speichern Sie die Seite index.html dreimal ab und zwar unter den drei genanntn Seitennamen. Im Anschluss können Sie die Seiten in der Browseransicht jeweils durch Klick auf den Seitenlink aufrufen.

 

johannes.bucka@t-online.de. Diese Anleitung steht unter Creative Commons Lizenz: Namensnennung | Keine kommerzielle Nutzung | Weitergabe uter gleichen Bedingungen (http://de.creativecommons.org/).