• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML Navigation in Seiten

W

Workaholic4u

Neues Mitglied
Hallo,

ich bin etwas eingerostet was HTML angeht. Ich habe eine Seite in HTML erstellt in dem ich mehere CSS DIV Container platziert habe und ein Java Script Menüleiste, die eine kleine Animation enthält. MNun befindet sich der Gesamte Code in der index.html.

Wie binde ich nun weitere Seiten ein, ohne das jedes mal die Seite komplett neu geladen´wird? geht das? weil andonsten müsste ich ja immer eine komplette kopie der seite erstellen in dem ich nur den Inhalt im Content Bereich ändere, aber ich schätze beiom Navigieren sieht das scheiße aus, wenn jedesmal die komplette seite neu geladen wird.

Früher gab es inline Frames. gibt es sowas aktuell auch? Wie macht man sowas heute?

Dies bezüglich habe ich gerade einen Knoten im Kopf. :(
 
Idealerweise setzt man PHP ein. Man teilt eine Seite dann in mehrere Blöcke ein, z.B. Header, Menü, Content und Footer. Somit muss man nur noch pro Seite den Content erstellen und den Rest mit PHP per include einbinden
 
Hallo,

Wie binde ich nun weitere Seiten ein, ohne das jedes mal die Seite komplett neu geladen´wird?
Zum Vergrößern anklicken....

Wenn die Seite besucherfreundlich sein soll - gar nicht.

aber ich schätze beiom Navigieren sieht das scheiße aus, wenn jedesmal die komplette seite neu geladen wird.
Zum Vergrößern anklicken....

Kann diese Ansicht etwas realitätsfern sein? Dann sähen ja schätzungsweise 99,99 Prozent aller Websites Scheiße aus, weil die beim Navigieren komplett neu geladen werden. Daran scheint sich auch so recht niemand dran zu stören.

Daran ändert auch bdt600s Vorschlag nichts. Auch beim include via PHP werden die Seiten komplett neu geladen. Für den Seitenersteller wird nur der Wartungs- und Änderungsumfang geringer, weil er den Quellcode nur in einer Datei ändern muss und damit gleich alle betroffenen Seiten akualisiert werden. Die Seiten werden so auf dem Server zusammengestellt, aber danach auch komplett übertragen.

Seiten, bei denen beim Navigieren nur bestimmte Teile neu geladen werden sind die große Ausnahme, da dies mit HTML und CSS alleine nicht möglich ist. Es sei denn man benutzt Frames bzw. iFrames, die aber auf Grund ihrer gravierenden Nachteile berechtigterweise aus der Mode sind und von seriösen Websiteerstellern nur noch genutzt werden, wenn es keine anderen Möglichkeiten gibt.

Um beim Navigieren nur bestimmte Teile einer Site nachladen zu müssen, muss auf Techniken bzw Programmiersprachen wie Java-Script zurückgegriffen werden. Dadurch ergeben sich aber unerwünschte Barrieren, weil Besucher, die keinen Zugriff auf Java-Script haben dann z. B. nicht mehr navigieren können.

Gruss

MrMurphy
 
bdt600 schrieb:
Idealerweise setzt man PHP ein. Man teilt eine Seite dann in mehrere Blöcke ein, z.B. Header, Menü, Content und Footer. Somit muss man nur noch pro Seite den Content erstellen und den Rest mit PHP per include einbinden
Zum Vergrößern anklicken....
Das ist richtig, hilft dem TE allerding nur bedingt weiter, weil im Frontend trotzdem die gesamte Seite neu geladen wird. Ansonsten stimme ich McMurphy zu
 
MrMurphy schrieb:
Hallo,

Wenn die Seite besucherfreundlich sein soll - gar nicht.
Zum Vergrößern anklicken....

?? Wie soll ich es dann machen? Ich habe eine Seite mit einer Sartseite und min. 5 "Unterseiten" Wie navigiere ich nun zwischen den einzelnen Seiten? ohne Allles in einer html zu speichern und dann mit ankern zu arbeiten???

MrMurphy schrieb:
Kann diese Ansicht etwas realitätsfern sein? Dann sähen ja schätzungsweise 99,99 Prozent aller Websites Scheiße aus, weil die beim Navigieren komplett neu geladen werden. Daran scheint sich auch so recht niemand dran zu stören.

Daran ändert auch bdt600s Vorschlag nichts. Auch beim include via PHP werden die Seiten komplett neu geladen. Für den Seitenersteller wird nur der Wartungs- und Änderungsumfang geringer, weil er den Quellcode nur in einer Datei ändern muss und damit gleich alle betroffenen Seiten akualisiert werden. Die Seiten werden so auf dem Server zusammengestellt, aber danach auch komplett übertragen.

Seiten, bei denen beim Navigieren nur bestimmte Teile neu geladen werden sind die große Ausnahme, da dies mit HTML und CSS alleine nicht möglich ist. Es sei denn man benutzt Frames bzw. iFrames, die aber auf Grund ihrer gravierenden Nachteile berechtigterweise aus der Mode sind und von seriösen Websiteerstellern nur noch genutzt werden, wenn es keine anderen Möglichkeiten gibt.

Um beim Navigieren nur bestimmte Teile einer Site nachladen zu müssen, muss auf Techniken bzw Programmiersprachen wie Java-Script zurückgegriffen werden. Dadurch ergeben sich aber unerwünschte Barrieren, weil Besucher, die keinen Zugriff auf Java-Script haben dann z. B. nicht mehr navigieren können.

Gruss

MrMurphy
Zum Vergrößern anklicken....

Wie gesagt, ich bin sehr eingerostet was das angeht, mag sein, das dies sehr realitätsfern ist. Ich habe es ja nochnichtmal ausprobiert, mehere "unterseiten" in der seite anzusteuern.... eventuell mache ich mir viel zu viele Gedanken...

Ich habe halt auf ein Tutorial für sowas gehofft... Wie man heutzutage in reinen html webseiten die Navigation realisiert ohne die Verwendung von Frames. Frames sind ja glaube ich voll "oldschool"... oder?

Danke!
 
Workaholic4u schrieb:
Ich habe halt auf ein Tutorial für sowas gehofft... Wie man heutzutage in reinen html webseiten die Navigation realisiert ohne die Verwendung von Frames. Frames sind ja glaube ich voll "oldschool"... oder?
Zum Vergrößern anklicken....

Es gibt heutzutage keine "reinen" (statischen) HTML-Seiten mehr. Inhalt, Struktur, Funktionen und Styling werden separiert und in einzelnen Modulen gespeichert. Die Seite selber wird erst beim Aufruf im Browser quasi "on the fly" zusammengebaut. Als ersten Schritt solltest du den Xampp herunterladen und dich damit vertraut machen, wie man Seiten über einen Webserver aufruft.

apache friends - xampp

Schreibe anschließend eine ganz einfache Seite, mit Head, Body, Navigation, Inhalt und speichere diese unter dem Namen index.php.
HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite</title>
<meta charset="utf-8" />
</head>
<body>
   <nav>
    <ul>
        <li><a href="home.php">Home</a></li>
        <li><a href="sub.php">Unterseite</a></li>
    </ul>
   </nav>
   <div id="box">Hier kommt der Inhalt rein</div>
</body>
</html>

Im dritten Schritt schneidest du alles was in <nav></nav> steht incl. der Tags aus, speicherst das in der Datei nav.php und inkludierst diese über PHP: <?php include 'nav.php'; ?>
HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite</title>
<meta charset="utf-8" />
</head>
<body>
   <?php include 'nav.php'; ?>
   <div id="box">Hier kommt der Inhalt rein</div>
</body>
</html>

Hier liegen jetzt alle Dateien im Hauptverzeichnis. Das ist noch nicht ideal, sollte aber für das Verständnis der Funktionalität erst mal ausreichen.

Wenn du damit klar kommst, melde dich wieder. Im nächsten Schritt wird der Inhalt ausgelagert und über $_GET oder $_SESSION wieder eingebunden.
 
Hi Tronjer,

ok, das habe ich ja bereits, ich habe:

Eine Seite mit Head, Body, Navigation und Inhalt i Moment noch in Form einer html... OK, das speichere ich nun als index.php. Dann extrahiere ich die Navigations Section und speichere diese in einer nav.php

Die Nav.php incluidiere ich dann (ich wusste nicht das sowas geht, cool! wieder in der index.php?

Dann habe ich meine Navigationsleiste in eine extra Datei ausgelagert.

Wie kann ich nun von der Navigations Seite Inhalte in die Index Seite in bestimmte Sektionen laden, ziel ist es ja, Unterseiten immer nur in den Inhaltsbereich zu laden OHNE immer die komplette Seite neu zuladen.

Wie funktioniert das? Das stelle ich mir nicht Einfach vor, geht das überhaupt?
 
spaceCookie schrieb:
Mit jQuery geht das sogar relativ einfach und unkompliziert. Benutzer die Javascript deaktiviert haben gucken bei dir aber in die Röhre.
Zum Vergrößern anklicken....
Deshalb ist es wohl am Klügsten, die Seite erst mal regulär über includes aufzubauen und bedienbar zu machen, und dann später die AJAX-Funktionalität hiunzuzufügen, also die Klicks auf die Navigation per JS abfangen und entsprechend verfahren.
Damit ist auch die Funktionalität für Nutzer gewährleistet, bei denen JS nicht aktiviert ist.
 
Ja, so etwas geht natürlich auch mit AJAX. Nur bringt das wieder andere Nachteile mit sich. Deshalb im Anschluss an mein vorheriges posting ein Ansatz in PHP. Dabei wird die Seite nur einmal geschrieben aber immer neu geladen.

XAMPP wurde installiert und die Sache mit dem include() verstanden. Dann gehen wir zum nächsten Schritt über und bauen eine Verzeichnisstruktur. Im Projektverzeichnis (meins heißt Test) werden zwei Unterverzeichnisse angelegt: layout und views.



Anschließend werden die Dateien mittels der Funktion include() weiter aufgespalten. Außerdem benötigt PHP eine Möglichkeit zur Unterscheidung, welche Inhalte geladen werden sollen. Dafür bedienen wir uns hier der superglobalen Variable $_SESSION.

Auf der obersten Ebene liegen drei Dateien:

index.php:
PHP: 
<?php
session_start();
$_SESSION['subpage'] = 'index_content';
include 'layout/layout.php';

me.php:
PHP: 
<?php
session_start();
$_SESSION['subpage'] = 'me_content';
include 'layout/layout.php';

contact.php:
PHP: 
<?php
session_start();
$_SESSION['subpage'] = 'contact_content';
include 'layout/layout.php';

Diese setzen eine PHP Session und binden die Datei layout.php, aus dem Verzeichnis layout ein.
HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite</title>
<meta charset="utf-8" />
</head>
<body>
<?php
    include 'views/nav.php';
    include 'views/' . $_SESSION['subpage'] . '.php';
    session_unset();
?>

</body>
</html>

Die layout.php stellt das HTML-Grundgerüst der Seite und bindet ihrerseits nun die Navigation und - basierend auf dem Inhalt von $_SESSION['subpage'] - die jeweilige Unterseite aus dem Verzeichnis views ein. Im Anschluß wird die Session-Variable mit session_unset() wieder gelöscht.

nav.php:
HTML: 
<nav>
<ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="me.php">Über mich</a></li>
    <li><a href="contact.php">Kontakt</a></li>
</ul>
</nav>

index_content.php:
HTML: 
Das ist die Startseite

contact_content.php:
HTML: 
Das ist die Kontaktseite

me_content.php:
HTML: 
Hier stehen Angaben über mich

Bei der Gelegenheit solltest du darüber nachdenken, ob du mit den semantischen Tags aus HTML5 arbeiten oder lieber generische Container verwenden willst. Im letzteren Fall sollten die Tags in der Navigation in DIVs aumgewandelt werden.
 
So auf den zweiten Blick betrachtet ließen sich auch die Redundanzen der verlinkten Dateien durch die Auslagerung des Codes in eine Funktion oder Klasse vermeiden.

Dazu erstellen wir einen Unterordner mit den Namen models und packen in diesen die Datei page.php.

page.php:
PHP: 
<?php
class Page
{
    static public function setSubpage($subpage)
    {
        session_start();
        $_SESSION['subpage'] = $subpage;
        include 'layout/layout.php';
    }
}

Die drei Dateien auf der obersten Ebene werden wie folgt geändert:

index.php:
PHP: 
<?php
  require_once 'models/page.php';
  Page::setSubpage('index_content');

contact.php:
PHP: 
<?php
require_once 'models/page.php';
Page::setSubpage('contact_content');

me.php:
PHP: 
<?php
require_once 'models/page.php';
Page::setSubpage('me_content');

Der Ordner models wird zur Einbindung von Klassen im weiteren Verlauf des Projekts ohnehin gebraucht.
 
Abschließend noch die Variante mit AJAX, bei der Content nachgeladen wird, ohne dass ein Seitenrefresh stattfindet.

An den bisher angelegten Dateien und Verzeichnissen muss nichts verändert werden. Mit Ausnahme der Datei layout.php. Diese sieht nun so aus:

layout.php:
HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite</title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>

<?php
    include 'views/nav.php';
?>

<article id="content">
<?php 
    include 'views/' . $_SESSION['subpage'] . '.php';
    session_unset();
?>
</article>
<script>
    $('nav ul li a').click(function(event) {
        event.preventDefault();
        var url = $(this).attr('href');
        subpage = 'views/' + url.slice(0,-4) + '_content.php';
        $('#content').load(subpage);
    });
</script>
</body>
</html>

Im Head wurde jQuery eingebunden und innerhalb des Bodys die Unterseiten in das HTML5 Tag <article> verschoben. Kurz vor das schließende Body Tag kommt dann etwas Javascript. Die Methode event.preventDefault(); unterdrückt den Link, die beiden folgenden Zeilen lesen das ursprüngliche Link-Ziel aus, bauen daraus ein neues und speichern es in der Variablen subpage. Die Anweisung $('#content').load(subpage); lädt dann die jeweilige Seite in das HTML-Element mit der ID #content.

Der Vollständigkeit halber sollte auch das JavaScript wieder in einer separaten Datei (main.js) im anzulegenden Unterverzeichnis js gespeichert und anschließend in die layout.php inkludiert werden. Aber das dürftest du nach diesem kurzen Exkurs mittlerweile alleine können.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben