Navigationstabelle auslagern

sunniklein · 01.01.2012

Liebe PSD-Tutorials!
Ich wünsche Euch einen guten Start in ein erfolgreiches Jahr und beginne gleich mich als Newbie und Greenhorn in Sachen Web / HTML / CSS zu outen.
Bisher habe ich meine Homepage mit Frontpage gepflegt, nun beginnt die Umstellung zu Dreamweaver und ich beginne mich einzuarbeiten.

Und gleich habe ich auch eine Frage an Euch:
Die unten dargestellte Tabelle zur Navigationsauswahl verbindet ca 40 Seiten, deshalb suche ich eine Lösung sie aus den jeweiligen .html-Dateien auszulagern und zentral in einer ( .css?)-Datei zu pflegen, denn es müssen fast monatlich Änderungen eingefügt werden.

Uploaded with

Geht das? Und gleich die 2. Frage: wie würde die Verknüpfung lauten?
Für Euch vermutlich ganz easy, für mich noch nicht.
Ich danke all denen, die schon am Neujahrstag ihre Gehirnzellen aktiviert haben und mir helfen können!

Liebe Grüße von
sunniklein

DarkFather · 01.01.2012

AW: Navigationstabelle auslagern

Schau mal ob dein Anbieter SSI (ServerSideIncludes) unterstützt...
Das ganze würde dann so aussehen:

index.shtml (!!! .shtml !!!)

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="iso-8859-2">
<title>Untitled Document</title>
</head>

<body>
Dieser Text ist index.html<br>
<!--#include virtual="test.html" -->
</body>
</html>

test.html

HTML:

dieser Text wird eingefügt...

Wenn der Anbieter das nicht unterstützt kommst du nur mit php weiter...

MfG
Dark

sunniklein · 01.01.2012

AW: Navigationstabelle auslagern

Hallo Dark,
Danke für Deine schnelle Antwort!

Ich habe 1&1 und werde es heute nachmittag probieren.
Habe aber gleich noch eine Frage.
"<body> Dieser Text ist index.html<br>"

Die index.html ist ja auch noch da, bleibt die bestehen oder wird die dort integriert?
Die hier beschriebene Navigationstabelle ist nicht meine Hauptnavigation sondern auf einer Unterseite integriert.

also hier
http://www.tierarzt-hucke.de/Reise/einreise.html

Ich danke Dir schon mal für Deine Mühe!
Liebe Grüße und einen schönen Neujahrstag wünscht
sunniklein

DarkFather · 01.01.2012

AW: Navigationstabelle auslagern

Das ist ja nur ein Beispiel...

Die Dateien in die eingefügt werden soll müssen in .shtml umbenannt werden.

Das heißt konkret für dich erstmal viel Arbeit, denn du musst alle 40 Dateien umbenennen in denen die Navi erscheint, und natürlich die Navigation gegen den Include austauschen, dann kannst du in Zukunft aber die Navi global für alle ändern.

MfG
Dark

//edit
1&1 sollte SSI unterstützen, zumindest findet google massig FAQ usw. von 1&1 zu dem Thema

sunniklein · 01.01.2012

AW: Navigationstabelle auslagern

Danke Dir, nun verstehe ich es besser

Aber: .... heisst es dann nicht auch index.shtml (im body) und test.shtml??

Momentan ist es ja auch viel Arbeit alle Änderungen, die die Tabelle betreffen, in alle Dateien einzuarbeiten, genau dies wollte ich mir langfristig ersparen.
Ich werde mich über shtml informieren, denn davon verstehe ich nichts, versprochen

Sorry für meine Nachfragen

Liebe Grüße
sunniklein

DarkFather · 01.01.2012

AW: Navigationstabelle auslagern

shtml ist nur eine Dateiendung die dem Server sagt, dass die Datei anders vearbeitet werden muss, dein HTML bleibt gleich, du musst also (bis auf die eine Zeile) nichts neues dazulernen.

Eventuell habe ich mein Beispiel etwas undeutlich gewählt, deshalb mal mit deinem Code:

Auszug aus einreise.shtml (die einreise.html wird umbenannt in einreise.shtml)

HTML:

    <span class="rechts">Stand: Januar 2012</span></h5>
    <h5 class="text">Welche Länder gehören zur EU?  
      Durch welche Länder muss ich reisen? <br>
    Die EU-Karte zeigt die KFZ-Kennzeichen der Länder: </h5>
<p class="header"><a href="../bilder/EU-Karte2012gr.jpg" target="_new"><img src="../bilder/EU-Karte2012.png" alt="Europakarte" width="526" height="600" ></a></p>
    <h5 class="text">Wählen Sie Ihr Urlaubsland:    </h5> 
    
   
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="3">
  <tr>
    <td>     
    <div id="laenderwahl">
		<!--#include virtual="http://www.tierarzt-hucke.de/Reise/laenderwahl.html" -->
</div></td>
  </tr>
</table>

laenderwahl.html (neue Datei, hier bitte KEIN <html><head> usw.)

HTML:

<form id="jump" name="jump">
  <select name="menu">
    <option value="" selected>Wählen Sie Ihr Reiseland</option>
    <option value="http://www.tierarzt-hucke.de/Reise/einreise.html">Startseite</option>
    <option value="http://www.tierarzt-hucke.de/Reise/australien.html">Australien (AUS)</option>
    <option value="http://www.tierarzt-hucke.de/Reise/belgien.html">Belgien (B) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/bosnien.html">Bosnien (BIH) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/bulgarien.html">Bulgarien (BG) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/daenemark.html">Dänemark (DK) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/deutschland.html">Deutschland (D) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/estland.html">Estland (EST)</option>
    <option value="http://www.tierarzt-hucke.de/Reise/finnland.html">Finnland (FIN) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/frankreich.html">Frankreich (F) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/griechenland.html">Griechenland (GR) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/grossbritannien.html">Großbritannien (GB) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/irland.html">Irland (IRL) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/island.html">Island (IS) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/italien.html">Italien (I) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/lettland.html">Lettland (LV) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/litauen.html">Litauen (LT) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/luxenburg.html">Luxemburg (L) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/malta.html">Malta (M) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/niederlande.html">Niederlande (NL) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/norwegen.html">Norwegen (N)</option>
    <option value="http://www.tierarzt-hucke.de/Reise/oesterreich.html">Österreich (A) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/polen.html">Polen (PL) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/portugal.html">Portugal (P) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/rumaenien.html">Rumänien (RO) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/russland.html">Russische Föderation (RUS) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/schweden.html">Schweden (S) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/schweiz.html">Schweiz (CH) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/serbien.html">Serbien Montenegro (SRB) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/slowakei.html">Slowakei (SK) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/slowenien.html">Slowenien (SLO) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/spanien.html">Spanien (E) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/tschechicherep.html">Tschechische Republik (CZ) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/tuerkei.html">Türkei (TR) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/ungarn.html">Ungarn (H) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/usa.html">USA (USA) </option>
    <option value="http://www.tierarzt-hucke.de/Reise/zypern.html">Zypern (CY) </option>
    </select> 
  <input onclick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" type="button" value="Los" />
</form>

sunniklein · 01.01.2012

AW: Navigationstabelle auslagern

Guten Abend Dark!

Herzlichen Dank für Deine Unterstützung, es läuft!

Und die Weiterleitung der alten Seite funktioniert auch.

Ich wünsche allen PSD-Tutorials einen schönen Abend,
ich fühle mich hier sehr gut aufgehoben, herzlichen Dank!
Liebe Grüße
sunniklein

DarkFather · 01.01.2012

AW: Navigationstabelle auslagern

Kein Problem

Viel Spass mit dem neuen Feature...

Noch ein paar Tipps:
1. in HTML sind IDs unique, das heißt eine ID darf nicht zweimal vergeben sein. Du hast aber beiden Formularen id="jump" gegeben. Ich bin darauf aufmerksam geworden, weil der Los-Button im Opera nicht funktioniert (liegt an der doppelten ID!)
2. Wäre ein onChange nicht sinnvoll für dich?
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;">
3. Und wenn du mal zuviel Zeit hast:

Solong...
Dir auch ein gutes Neues!
Dark

sunniklein · 01.01.2012

AW: Navigationstabelle auslagern

Danke, habe gerade gemerkt, dass meine Freude zu früh war....
unter Firefox läuft es, unter IE auch nicht
--> ich begebe mich auf die Suche,...
Danke für den Tipp, bin da gerade am testen mit "jump"!

ja,ja, die Grafik wird es auch demnächst geben, demnächst....

Schönen Abend wünscht
sunniklein

DarkFather · 01.01.2012

AW: Navigationstabelle auslagern

Brauchst nicht suchen, einfach
<form id="jump2" name="jump2">
schreiben, statt bisher
<form id="jump" name="jump2">

Habs ausprobiert, geht im IE, Firefox und Opera

sunniklein · 01.01.2012

AW: Navigationstabelle auslagern

Ganz dickes Danke, Du bist mein Engel am Neujahrstag!