Page Layout

  • Themenstarter Themenstarter IsNull
  • Beginndatum Beginndatum
I

IsNull

Guest
Hallo,

Ich bin gerade am gestalten eines Webauftrits. Das Grundgerüst habe ich wie folgt festgelegt:

Code: 
+-------------+
|  Logo & Nav |
+-------------+
|Hauptinhalt  |
|(wechselbar) |
+-------------+
| footer      |
+-------------+

Ich möchte nun den oberen Teil (Logo & Nav) sowie den footer immer auf die gleiche Datei verlinken. (damit ich das Inhaltsverzeichnis zentral verwalten kann, und die Logo Grafik nur 1mal geladen/interpretiert werden muss)

Wie stelle ich das nun am klügsten an? Möglichst nur html und css. JS möchte ich wenn möglich vermeiden.

Ich habe zuerst an frames gedacht, nur müsste ich dann je nach dem, was in der Nav angeklickt wird, im Main frame etwas anderes anzeigen lassen. JS?

Macht man sowas überhaupt mit frames? Gibt doch sicher ein paar hier, die sich mit webdesign etwas auskennen :) Ein paar Stichworte in die richtige Richtung würden schon reichen ;)

Gruss & thx
IsNull
 
Original von lightsaver
wenn ich dein problem richtig verstanden habe, dann hatten wir eine ähnliche frage bereits: menü für eine website - wie realisieren
Zum Vergrößern anklicken....
Danke für den Link, habe das nicht gefunden. Scheint aber trotzdem nur mit Frames oder dann mit php zu gehen...

Werde wahrscheinlich doch mit php machen. - Und dazu habe ich jetzt auch noch ne kleine Frage:

Ich kann ja die einzelnen html Dateien includen.
PHP: 
<? include ("nav.html"); ?>
<? include ("main1.html"); ?>
<? include ("footer.html"); ?>

wie kann ich jetzt das main1.html verändern?
 
ich würde es so machen:

du machst deine einzelnen seiten. sagen wir mal, du hast ne datei impressum.php (nur ein beispiel für jede einzelne seite)

in dieser impressum.php machst du ein

Code: 
<? include ("nav.html"); ?>

hier kommt jetzt in html der inhalt, also das was du als main bezeichnest

<? include ("footer.html"); ?>

und so machst du das dann halt auch mit allen anderen seiten.

ach und nav.html und footer.html sollten vielleicht keine kompletten html-dateien sein, da du ja sonst probleme mit doppelten tags bekommst. theoretisch würde halt schon ne einfache txt zum includen reichen.
 
Original von lightsaver
ach und nav.html und footer.html sollten vielleicht keine kompletten html-dateien sein, da du ja sonst probleme mit doppelten tags bekommst. theoretisch würde halt schon ne einfache txt zum includen reichen.
Zum Vergrößern anklicken....

Man sollte auf keinen Fall komplette .html Dateien includen. Der Validator ist bestimmt nicht begeistert, wenn ein Quelltext 3x <html></html>, <head></head> und <body></body> enthält.

Edit:

Du solltest bei include nicht mit absoluten Pfadangaben arbeiten, sondern mit relativen. Einige Server machen da Ärger.
 
Du könntest es auch komplett in HTML halten. Machst 1 Tabelle mit 100% Breite und Höhe.

Darin eine weitere Tabelle mit 3 Reihen (1. header/menu, 2. mainFrame/Inhalt, 3. Footer). Diese Tabelle dann für 1. auf eine feste Pixelzahl (bspw. Höhe des Logos) festlegen. Das selbe machst Du mit dem Footer.

Die Menüpunkte würde ich schon im Grundgerüst verlinken und als index.html speichern.

Dann brauchst Du lediglich für die einzelnen Menüpunkte den Inhalt ändern und das Dokument dann jeweils speichern (about.html, etc).

So sollte es auch klappen.
 
Original von BigDevil
Man sollte auf keinen Fall komplette .html Dateien includen. Der Validator ist bestimmt nicht begeistert, wenn ein Quelltext 3x <html></html>, <head></head> und <body></body> enthält.
Zum Vergrößern anklicken....

deswegen hatte ich es ja extra nochmal erwähnt ;) habe mich nur so nah an dem beispiel gehalten wir grad möglich ;)
 
kann dir nur php empfehlen.

Du musst nichma php können, kannst alle sauslagern.
Geht auch über include sprich::

Du machst ne Datei
config.php
da schreibst du alle beschreibungen -> Seiten rein
und in dne Link auf den Seiten packste dann nurnoch die Bezeichnung

zb:

in der config.php steht

$dateien['home'] = "home.html"

dann schreibste in den link

"href="index.php?section=home"

=) hört sich bestimmt brutal an, is abe recht dufte leicht.

Bei Interesse erlär ichs gerne genauer
 
Erstmal danke für die vielen Tipps und Anregungen.

Ich habe nun Lightsavers Methode in die Tat umgesetzt, und das haut auch hin.

also so:

<? include ("nav.htm"); ?>

//hier kommt jetzt in html der inhalt, also das was du als main bezeichnest

<? include ("footer.htm"); ?>
Zum Vergrößern anklicken....
Selbstverständlich habe ich nur im nav.htm die eröffnungs Tags, und nur im footer die schliessenden. Das was ich erreichen wollte, ist somit erreicht. :)


@.:L:

Ich kann ein bisschen PHP (ich brauchte es bis jetzt halt nur sehr wenig, deshalb muss ich mich oft durch die Helps quälen...) Das was du antönst, scheint mir als ob man hier mit GET Variabeln schaffen würde, oder?

Wäre dir dankbar, wenn du deinen Vorschlag noch etwas genauer umschreiben könntest. Evtl. auch mit Gründen, warum man es auf diese oder die andere Art machen sollte...

thx & Gruss
IsNull
 
Original von IsNull
Selbstverständlich habe ich nur im nav.htm die eröffnungs Tags, und nur im footer die schliessenden. Das was ich erreichen wollte, ist somit erreicht. :)l
Zum Vergrößern anklicken....

Ich hätte das anders gemacht.

Code: 
<html>
<head>
</head>
<body>
<?php include ("navi.html"); ?>
---main---
<?php include ("footer.html"); ?>
</body>
</html>

So steht in der Navi- und Footerdatei auch nur die Navigation und der Footer.
 
Hallo IsNull,

hier ist mal ein kleines Beispiel zur Verwendung von GET-Variablen. Du brauchst dazu nur einmal eine "index.php" mit "navi" und "footer" zu schreiben, der dementsprechende Inhalt der dann angezeigt wird, wird durch die Links in der Navigation gesteuert.

Code: 
/***** Navigation *****/
GET-Variablen werden mit einem ? an die URL angehängt, mehrere Variablen werden
durch ein & getrennt (z.b. index.php?foo=wert1&bar=wert2)

<a href="index.php?id=1">Link1</a>
<a href="index.php?id=2">Link2</a>
<a href="index.php?foo=bar">Link3</a>

/**** Main *****/
Hier prüfst du die GET-Variablen auf ihren Wert und includierst dann die 
dementsprechenden Dateien. 
(z.B. mit switch() falls du nur auf Zahlen prüfst oder mit if() wenn du auch auf
Strings prüfst)

<?php
  switch($_GET['id']) {
    case 1:
    include("seite1.php");
    break;
    case 2:
    include("seite2.php");
    break;
  }

  if($_GET['foo'] == "bar") {
    include("seite3.php");
  }
?>

/***** Footer ****/

Ich hoffe dieses kleine Beispiel ist relativ verständlich, falls du dich ernsthaft damit befassen willst kann ich dir nur das PHP-Manual oder ein gutes Buch empfehlen.
 
ich weiss jetzt nicht wie groß der webauftritt werden soll.
sollte deine Seite nicht mehr als 3 verschiedene pages haben,
dann ignoriere meinen beitrag einfach ^^

Ich persönlich würde die Ganze sache mit einer Template Engine unter PHP lösen.
Dies würde dir 1. mehr möglichkeiten bieten und 2. eine höhere Dynamik der Seite erlauben,
wenn dies denn gewünscht ist.
Zu PHP gibt es schon einige viele Engines die alle ihre Vor- und Nachteile haben.
Am besten du schaust dir die Engine's selber mal an.
Würde dir vLib empfehlen. ist für so kleine sachen recht gut :)


PS: Nimm nicht Smarty... das wär für deine Zwecke 1. viel zu Overpowered und 2. ist es generell einfach zu langsam. die anderen kenne ich leider nicht :X :)
 
Original von M.D.Geist
Hallo IsNull,

hier ist mal ein kleines Beispiel zur Verwendung von GET-Variablen. Du brauchst dazu nur einmal eine "index.php" mit "navi" und "footer" zu schreiben, der dementsprechende Inhalt der dann angezeigt wird, wird durch die Links in der Navigation gesteuert.
[...]
Ich hoffe dieses kleine Beispiel ist relativ verständlich, falls du dich ernsthaft damit befassen willst kann ich dir nur das PHP-Manual oder ein gutes Buch empfehlen.
Zum Vergrößern anklicken....
Hi M.D.Geist,

Jetzt verstehe ich das Prinzip. Ich werde es nun so umsetzen.

@bLaCk-DrAg0n:
Nun, die grösse ist nicht ganz so einfach festzulegen. Zu Beginn werden es so um die 3-4 Haupseiten sein, wobei bei es bei einer Hauptseite Sub-Kategorien geben wird. Da ich aber überall mit dem gleichen nav und footer fahren will, ist es wahrscheinlich übertrieben so was zu nutzen. Später könnte das ganze noch etwas wachsen.

Da ich es aber nicht kenne, werde ich es mir sicherlich mal zu Gemüte führen... wenn ich mal ne freie Minute finde :rolleyes:

Sobald das ganze oben ist, und öffentlich zugänglich, werde ich die Site hier verlinken, und ihr könnt, sofern ihr wollt, konstruktive Krittik anbringen :P (momentan ist dies aus "politischen" Gründen nicht möglich. )

Ich möchte mich nochmals für die tolle Unterstützung bei euch allen bedanken ;)

Gruss
IsNull
 
Soho da bin ich nun =)

Mache mir mal die Mühe etwas ausführliches z uschreiben

index.php
Code: 
<?php
	error_reporting(E_ALL);
	include "config.php";	
?>
<html>
<head><title></title></head>
<body>
<?php
	include "menu.php";
          include "inhalt.php";
          include "footer.php";
?>
</body>
</html>

Kannst natürlich nochn Stylesheet reinbringen

hm jetzt könnte man sich ja fragen, was in der config.php steht die ganz am ist

config.php
Code: 
<?php
	$dateien = array();
          $dateien['home'] = "home.html";
?>

Hier werden die Links eingebungen. Später musst du im Link nurnoch
<a href="index.php?section=home
schreiben, und php nimmt die definierte datei.

Tja, bleibt zu klären, wo home.html jetzt auftauchen soll.

inhalt.php
Code: 
<?php
    if(isset($_GET['section']) AND isset($dateien[$_GET['section']])) {
        include $dateien[$_GET['section']];
    } else {
        include $dateien['home'];
    }
?>

mehr ist das ganze nicht.....
 
oha, da werd ich ja richtig mit Hilfestellungen überschüttet^^

Eine kurze "Sinn" Frage habe ich dazu noch: Warum includest du inhalt.php, und machst dort die Switch-Abfrage nicht direkt in der index.php? Hat das irgendwelche Webdesignergründe ? :)

thx =)

EDIT:
SO habe das ganze nun so angepasst, und es läuft perfekt :)
 
Hi, ich habe auch noch einen Vorschlag.
Und zwar find ich Content Management Systeme nicht schlecht. Ich selbst benutze PostNuke.

Herzlich Willkommen!

PostNuke ist ein unter GPL lizenziertes und frei verfügbares Framework mit Benutzerverwaltung und Templating System. Über frei verfügbare Module kann es zum Community- und Content Management System (CMS) aufgerüstet werden. Die Inhalte einer Internetpräsenz wie zum Beispiel News-Artikel, Links, Downloads, FAQ, Bildergalerien, Foren etc. können dabei direkt via Browser verwaltet werden.

Durch die klare Trennung von Inhalt und Gestaltung hilft PostNuke, die Kosten und den Aufwand beim Betrieb einer Internet-Präsenz zu reduzieren.

Das bedeutet, dass PostNuke kein Programm ist, das fertig installiert überall passt und alle Probleme löst - Mit etwas Kreativität und Interesse sind aber den Möglichkeiten keine Grenzen gesetzt.
Zum Vergrößern anklicken....

Es ist kostenlos und kann einfach runtergeladen werden. Das Basispaket muss dann auf den Ftp Server geladen werden und von dort aus die install.php aufgerufen werden. Von nun an musst du ein paar angaben machen im Browser. Ftp zugang und Datenbank etc.,..

dann installiert sich das postnuke system automatisch

beispiel für eine postnukeseite: http://demo.pn-cms.de/
 
Warum etwas fertiges nehmen, wenn man es selbst bauen kann? ^^

//edit: @eleet: es war keine Kritik, sondern nur ein Hinwies darauf, dass es manchmal besser ist wenn man etwas selbst macht, anstatt irgendetwas fertiges von irgend jemand anderem zu nehmen.
Gerade wo ich der Meinung bin, dass der Ersteller wohl noch relativ neu bei PHP ist, ist soetwas eine sehr gute Programmierübung.
Es sind nämlich nicht irgendwelche 0815-Aufgaben, sondern etwas, dass einen Zweck erfüllt, und dass er sich selbst als Ziel gesetzt hat.

MFG - Keks :)
 
Wieso immer Kritik wenns nur ein Vorschlag war?

//edit@keksinat0r: klar, dessen bin ich mir bewusst. da aber die beiträge meistens mehrere user lesen kann man so einen vorschlag auch mal machen. wenn man es selbst macht lernt man natürlich html und php zu verstehen. doch wer zu faul ist zum selbst coden ist mit solchen programmen ziemlich gut versorgt. man sollte auch immer die alternativen kennen ;D
 
Original von IsNull
oha, da werd ich ja richtig mit Hilfestellungen überschüttet^^

Eine kurze "Sinn" Frage habe ich dazu noch: Warum includest du inhalt.php, und machst dort die Switch-Abfrage nicht direkt in der index.php? Hat das irgendwelche Webdesignergründe ? :)

thx =)

EDIT:
SO habe das ganze nun so angepasst, und es läuft perfekt :)
Zum Vergrößern anklicken....

Übersichtlichkeit =)

Jeder 3. kann so ohne Stress einsehen, editieren etc. pp
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben