Lektion 8 - Die Navigation

Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Lektion 8 - Die Navigation

Beitrag von Admin » Di 19. Aug 2014, 11:21

Da ein Internetauftritt immer aus mehr als nur einer Seite besteht, muss man sich überlegen, welche Seiten man anlegen will. Jede Unterseite muss über eine Navigation erreichbar sein. Du musst dir an dieser Stelle also genau überlegen, welche Unterseiten du in deinem Web anlegen willst.
  • Welche Inhalte sollen auf deiner Homepage Platz finden?
  • Welche gesetzlichen Bestimmungen musst du einhalten?
  • Inwieweit sollen Besucher Kontakt zu dir aufnehmen können?
In den meisten europäischen Ländern gibt es eine Impressumspflicht. Häufig gilt diese nur für kommerzielle Internetseiten z.B. von Firmen oder Vereinen, aber auch Privatpersonen sollten ein Impressum einrichten. In jedem Fall solltest du dich über die gesetzlichen Bestimmungen in deinem Land informieren. Nicht nur, ob die Pflicht besteht, sondern auch welche Angaben gemacht werden müssen. In Deutschland wird die Impressumspflicht über das Telemediengesetz gesteuert.

Auf welche Art und Weise sollen deine Besucher mit dir in Kontakt treten?
  • Per Kontaktformular
  • über ein Gästebuch
  • in einem Diskussionsforum
  • oder einfach nur per E-Mail ...
Wie möchtest du den Inhalt deiner Webseite gliedern? Hast du Bilder, so brauchst du eine Galerie um sie darzustellen. Hast du mehrere Themen, über die du berichten möchtest, so solltest du diese Themen sinnvoll zusammenfassen. Hast du ein Geschäft, dann ist es wichtig, dass deine Kunden dich finden. Alle diese Seiten müssen untereinander verlinkt sein. Einen Hyperlinks erstellst du zu

... einer Seite innerhalb des Webs
  • Über die Navigation verlinkst du die Webseiten innerhalb deines eigenen Webs miteinander.
    z.B. index.html
... einer externe Seite
  • Über einen Textlink oder einen Bildlink erstellst du einen Link zu einer externen Seite. Er beginnt immer mit http://
    z.B. http://www.kompozer-web.de
... einer bestimmten Stelle auf der gleichen Seite
  • Diese Hyperlinks führen zu einem Anker, den du auf deine Seite setzt. Anker beginnen immer mit einer #. Als Anker können auch die IDs einer Webseite verwendet werden.
    z.B. #kopf
... einer E-Mail-Adresse
  • Eine E-Mail Adresse kannst du als Kontaktmöglichkeit für deine Besucher anbieten. Wenn sie die E-Mail-Adresse anklicken, öffnet sich ihr E-Mail Programm und deine E-Mail Adresse wird automatisch in das Adressfeld des Mail-Programms eingefügt. Den Link erstellst du einfach indem du indem du ein mailto: vor die Adresse stellst.
    z.B. mailto: info@kompozer-web.de

Übung

Auch auf unserer Übungsseite werden wir mehrere Unterseiten einfügen:

Öffne deine index.html
  • Startseite
    Die Startseite enthält eine Zusammenfassung deiner Seite. Der Besucher soll sofort sehen, um was es geht und ob er auf der die Infos findet, die er im Internet sucht.
    Es ist wichtig hier viel Text einzufügen, da diese Seite von allen Suchmaschinen auch im Text eingelesen wird.

    Hobby
    denke dir ein Hobby aus über das du schreiben möchtest und benenne die Seite danach z.B. Pferdezucht, Briefmarkensammlung oder Segelsport ...

    Galerie
    Hier wirst du eine kleine Sammlung von Fotos in eine Galerie einbinden.

    Glossar
    eine Infothek zu deinem Hobby.

    Termine
    hier beschreibst du Veranstaltungen zu deinem Hobby.

    Gästebuch
    hier haben deine Besucher die Möglichkeit ein Feedback zu hinterlassen.

    Wegbeschreibung
    Wenn deine Besucher dich, dein Geschäft, deinen Verein ... den Mittelpunkt deines Hobbys finden sollen, geht das am besten mit einer Wegbeschreibung.

    Impressum
    gesetzlich vorgeschriebene Angaben
[col]Öffne deine index.html mit KompoZer.

Setze den Cursor in den Navigations-Div und schreibe die Begriffe untereinander. Lösche das Wort Navigation, sodass die Begriffe so untereinander stehen.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


[col]Markiere das Wort "Startseite". Du kannst anstatt von Startseite auch "home" oder "start" schreiben. Es muss nur aus dem Begriff hervor gehen, dass das die Startseite - die Homepage - deines Webs ist.|Klicke auf das Symbol Link. Es öffnet sich der Link-Assistent:
#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Die Startseite muss den Namen index.html tragen. Eine index-Seite wird automatisch vom Browser als Startseite eines Webs erkannt. Schreibe den Dateinamen in das Textfeld.

Verfahre auf die gleiche Art mit den restlichen Begriffen. Achte darauf, dass du die Dateinamen immer klein schreibst und keine Umlaute verwendest. So wird der Link zum Gästebuch gaestebuch.html geschrieben.
  • start = index.html
    Hobby = hobby.html
    Galerie = galerie.html
    Glossar = glossar.html
    Termine = termine.html
    Gästebuch = gaestebuch.html
    Wegbeschreibung = wegbeschreibung.html
    Impressum = impressum.html
|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


[col]Hat alles geklappt? Super, dann kommt noch ein kleiner Link in den Footer. Hier soll eine Sprungmarke zum Kopf der Seite führen.

Klicke in den Footer und schreibe "nach oben" hinein. Lösche das Wort "Footer".
Klicke erneut auf das Symbol Link einfügen.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


[col]Diesmal schreibst du nichts in das Textfeld sondern öffnest den kleinen Pfeil am Ende des Textfeldes.

In dieser Liste findest du alle IDs wieder, die du auf deiner Seite angelegt hast. Auch der Inhalt der h1 wird dort als ID angezeigt.

Da eine ID einmalig ist, findet jeder Browser den Zielort für den Link. Wähle aus der Liste #kopf aus und bestätige den Assistenten mit OK.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


Hat alles geklappt? Zum Vergleich findest du die Lösung hier --> Zur Lösung

Ja und für unsere Quellcodepuristen ist hier noch einmal der Quelltext abgebildet:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

<meta content="text/html; charset=UTF-8"http-equiv="content-type">
<title>Vorlage</title>
<meta content="Anke Lange" name="author">
<style type="text/css">
#kopf {
  height: 150px;
  background-color: #333300;
  background-image: url(images/strom.jpg);
  background-repeat: repeat-x;
}
#navi {
  background-color: #ffff33;
  width: 200px;
  float: left;
}
#inhalt {
  height: 200px;
  margin-left: 200px;
  background-color: #ffffcc;
}
#footer {
  height: 30px;
  background-color: #666600;
  color: #ffff66;
  font-size: 12px;
  line-height: 30px;
  font-weight: bold;
  text-align: right;
  padding-right: 20px;
  clear: both;
}
h1 {
  font-size: 2em;
  text-align: right;
  margin-top: 0px;
  padding-top: 30px;
  padding-right: 30px;
  font-family: "Arial, Helvetica, Sans";
}

</style></head><body>
 
<div>
<div id="kopf">
<h1>Überschrift 1</h1>

</div>
<div id="navi"><a href="index.html">Startseite</a><br>
<a href="hobby.html">Hobby</a><br>
<a href="galerie.html">Galerie</a><br>
<a href="glossar.html">Glossar</a><br>
<a href="termine.html">Termine</a><br>
<a href="gaestebuch.html">Gästebuch</a><br>
<a href="wegbeschreibung.html">Wegbeschreibung</a><br>
<a href="impressum.html">Impressum</a><br>
</div>
<div id="inhalt">Inhalt<br>
</div>
<div id="footer"><a href="#kopf">nach oben</a><br>
</div>
</div>


</body></html>
Hat alles geklappt? Gut, weiter gehts mit Lektion 9

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 8 - Die Navigation

Beitrag von eibauoma » Mo 8. Sep 2014, 17:12

Die Lektion mit der Navigation habe ich nicht vergessen - allerdings gleich mit den Listen weitergemacht :?
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

camouflage1984
Beiträge: 249
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 8 - Die Navigation

Beitrag von camouflage1984 » Mo 8. Sep 2014, 22:46

Hallo eibauoma

Alles gut, weiter gehts.

Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Moendel
Beiträge: 34
Registriert: Di 13. Okt 2015, 07:32

Re: Lektion 8 - Die Navigation

Beitrag von Moendel » Di 5. Jan 2016, 21:16

Hallo,
ich bin über Navigation gleich zu den Listen und ab zu Lektion 10.
Sorry - hatte Zeit ;)

Lake
Beiträge: 2
Registriert: Mo 25. Apr 2016, 06:36

Re: Lektion 8 - Die Navigation

Beitrag von Lake » Sa 30. Apr 2016, 14:10

Erst einmal vielen Dank für dieses ausführliche Tutorial.

Vielleicht habe ich eine doofe Frage aber wie steuere ich über die "Navigation" damit die Seite nicht in einem neuen Fenster aufgemacht wird sondern im DIV "Inhalt"

Danke
Tom

camouflage1984
Beiträge: 249
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 8 - Die Navigation

Beitrag von camouflage1984 » Sa 30. Apr 2016, 21:41

Hallo Tom

Das kannst du über iframe einstellen, das wird dir in der Lektion 17erklärt.
Iframes sind aber nicht dafür gedacht interne inhalte zu laden(geht auch) sondern externe.
Warum willst du das so haben?
Mit der hier gezeigten Navigation wird die neue Seite im selben Browserfenster angezeigt
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Lake
Beiträge: 2
Registriert: Mo 25. Apr 2016, 06:36

Re: Lektion 8 - Die Navigation

Beitrag von Lake » Mo 2. Mai 2016, 09:03

Hallo,

vielen Dank für die schnelle Antwort.

Es es richtig, dass sich die neue Seite direkt im Browserfenster öffnet.
Hat die neue Seite aber nur textuellen Inhalt ist die Menüstruktur weg.

Zu meinem Verständnis:
Wenn die Menüstruktur auf jeder Seite vorhanden sein soll, muss ich dann jede Seite so aufbauen wie meine Startseite (mit Navigation,Footer etc.) und jeweils nur den <Div> Inhalt mit neuem Text erstellen.
Es geht also nicht, dass ich z.B. aus der Menuestruktur z.B. den Eintrag/Link "Hobby" auswähle und auf der Seite ändert sich nur der Text des <DIV> Inhalt und die Menüstruktur bleibt erhalten.

Gruss
Tom

camouflage1984
Beiträge: 249
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 8 - Die Navigation

Beitrag von camouflage1984 » Mo 2. Mai 2016, 22:21

Hallo Tom

Mit Kompozer kanst du das nur so lösen:
Lake hat geschrieben:muss ich dann jede Seite so aufbauen wie meine Startseite (mit Navigation,Footer etc.) und jeweils nur den <Div> Inhalt mit neuem Text erstellen.
Es geht aber mit php und include oder file_get_contents und switch für die navigation.

Du müsstest PHP lernen....

Oder mit Framesets https://wiki.selfhtml.org/wiki/HTML/Frames, das ist aber nicht zu empfehlen...

Hier viewtopic.php?f=18&t=79 kannst du nachlesen wie man eine Navigation für alle Seiten erstellt und einbindet.
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 8 - Die Navigation

Beitrag von anke » Di 3. Mai 2016, 17:53

In Lektion 5 des Fortgeschrittenen Kurses findest du die Anleitung für php include. => Lektion 5

Gruß Anke

Benutzeravatar
Kerberos
Beiträge: 30
Registriert: Mo 2. Mai 2016, 18:07

Re: Lektion 8 - Die Navigation

Beitrag von Kerberos » Sa 14. Mai 2016, 11:26

Es macht so viel Spass, dass ich gleich mit Lektion 8 weiter gemacht habe. Hier das Ergebinis

http://polska1919.de/WEB/index1.html

Oh man hätte ich gewusst dass es so viel Spass macht hätte ich schon früher damit angefangen, hatte aber immer irgendwie Angst.
Super, dass es dieses Forum gibt, und es Menschen gibt, die sich so viel Mühe gegeben haben bzw. geben! Toll! Danke!

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast