Alternative zum framebasierten Layout

L

LightModulator

Aktives Mitglied
Thread Starter
Dabei seit
15.12.2008
Beiträge
149
Reaktionspunkte
0
Hallo,
arbeite gerade an meiner Website. Ganz simpel: oben Navi unten den Inhaltsbereich.
Ich frage mich ob es eine Alternative zum framebasierten Layout gibt? Hab gelesen, dass es auch mit CSS gehen soll. Aber was sind dann die "Frames"? Divs?

Freue mich auf antworten
 
Richtig.

statt:

HTML: 
<frameset rows="100, 500">
        <frame name="oben" src="oben.html">
        <frame name="unten" src="unten.html">
</frameset>

könnte der HTML-Teil z.b. so aussehen:

HTML: 
<body>
        <div id="oben">Hier steht was</div>
        <div id="unten">Hier steht auch was</div>
</body>

und das zugehörige CSS würde so aussehen:

Code: 
div#oben{
        height: 100px;
        width: 100%;
}

div#unten{
        height: 500px;
        width: 100%;
}

es müssen aber nicht unbedingt divs sein. es reicht jedes block-element

@thebug
was das mit php und javsacript zu tun hat, versteh ich nicht :kopfkratz:
 
OrangUtanKlaus schrieb:
Richtig.

statt:

HTML: 
<frameset rows="100, 500">
        <frame name="oben" src="oben.html">
        <frame name="unten" src="unten.html">
</frameset>

könnte der HTML-Teil z.b. so aussehen:

HTML: 
<body>
        <div id="oben">Hier steht was</div>
        <div id="unten">Hier steht auch was</div>
</body>

und das zugehörige CSS würde so aussehen:

Code: 
div#oben{
        height: 100px;
        width: 100%;
}

div#unten{
        height: 500px;
        width: 100%;
}

es müssen aber nicht unbedingt divs sein. es reicht jedes block-element

@thebug
was das mit php und javsacript zu tun hat, versteh ich nicht :kopfkratz:
Zum Vergrößern anklicken....

Und wie navigiere ich? nehmen wir an im oberen div gibt es verlinkungen welche im unteren angezeigt werden sollen. läuft das dann über die div id? leuchtet mir noch nicht ganz ein.
 
LightModulator schrieb:
Und wie navigiere ich? nehmen wir an im oberen div gibt es verlinkungen welche im unteren angezeigt werden sollen. läuft das dann über die div id? leuchtet mir noch nicht ganz ein.
Zum Vergrößern anklicken....

wenn du AJAX (javascript) verwenden würdest, dann ja. Aber das wäre jetzt zu kompliziert ;)

du hast einfach mehrere html dokumente, zb.:

home.html
kontakt.html
anfahrt.html
impressum.html

und die sehen dann so aus:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Home</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="oben">
	<ul id="navi">
		<li><a href="home.html">Home</a></li>
		<li><a href="kontakt.html">Kontakt</a></li>
		<li><a href="anfahrt.html">Anfahrt</a></li>
		<li><a href="impressum.html">Impressum</a></li>
	</ul>
</div>

<div id="unten">

	<p>Hier steht der jeweilige Inhalt</p>

</div>

</body>
</html>

der einzige teil der auf jeder seite anders ist, ist der im div "unten".

die css datei (style.css) sieht dann z.b. folgendermaßen aus:

Code: 
#oben{
	height: 100px;
	width: 980px;
	border: 1px solid black;
	background-color: #42ff4d;
	margin: auto;
	margin-bottom: 10px;
}

#navi li{
	display: inline;
	list-style-type: none;
}


#unten{
	height: 500px;
	width: 980px;
	background-color: red;
	border: 1px solid black;
	margin: auto;
}

die 4 html dateien und die style.css liegen in dem Beispiel dann im selben ordner

wenn du jetzt eine weitere seite in der navi aufnehmen willst, müsstest du diesen link dann auf allen seiten neu einsetzen (da gibt es auch vereinfachungen, z.b. per php)...

dafür greifen alle auf die selbe css-datei zurück, d.h. du änderst irgendwas (z.b. die schriftgröße) und diese wird überall geändert... probier es einfach mal aus :)
 
Zuletzt bearbeitet:
thebug schrieb:
und warum ein div+css eine alternative zu einem frame sein soll verstehe ich nicht.
Zum Vergrößern anklicken....

  • Weil Suchmaschinen nur den Inhalt finden und nicht Dein Frameset.
  • Weil wenn man jemandem einen Link senden möchte, man nicht einfach die Adresse aus der Adresszeile kopieren kann. Aber auch nicht einfach mit Rechtsklick sich den Link "besorgen" kann. Es geht entweder gar nicht oder es geht der Frameset verloren.
  • Es gibt mehr Ausgabegeräte neben Computern, z.B. iPhone. Gerade diese mobilen Geräte mit begrenztem Platz haben Probleme mit Frames.
  • Der einzige wesentlich Vorteil von Frames hat heute kaum noch Relevanz: die Link-Seite muss nicht unbedingt mehr mehrfach vorhanden sein, sondern kann durch entsprechende Server-Skripte auch nur einmal vorliegen.

Sicherlich gibt es noch einige Gründe mehr.
 
thebug schrieb:
und warum ein div+css eine alternative zu einem frame sein soll verstehe ich nicht.
ist vielleicht eine alternative zu tabellen gestütztem layout, aber anstatt frames???
Zum Vergrößern anklicken....

Frames zu benutzen ist einfach nicht gut.

Semantic Web, CoolUri und Usability leiden drunter, daher ist jede andere Möglichkeit eine Seite zu bauen und dabei auf Frames zu verzichten eine Alternative
 
.:timmy schrieb:
(...) daher ist jede andere Möglichkeit eine Seite zu bauen und dabei auf Frames zu verzichten eine Alternative
Zum Vergrößern anklicken....

Genau nach diesen Möglichkeiten wurde doch hier gefragt.

Leider wurden noch keine genannt. Außer "Server-Skripte" ...

was ist damit genauer gemeint und wie funktioniert es?
 
Im grunde ist das ganz einfach.
Bei einer Frame-Lösung hat Du die Navigation mal z.B. oben in einem Frame und darunter den Seiteninhalt in einem anderen Frame. Beim Klick auf einen Navigationspunkt, öffnt sich die verlinkte Seite im Content-Frame und in
dem Navigations-Frame passiert gar nichts.

Ohne Frames, würde man das so machen, das man die Navigation in jeder Seite drin hat. Die Navigation ist entweder in einer eigenen Datei und wird entsprechend in jeder Seite einfach eingebunden

Code: 
<html>
<head><title></title></head>
<body>
<?php
include("navigation.php");
?>
</body>
</html>

oder man bastelt sich einfach eine Methode, die die Navigation ausgibt


Code: 
<html>
<head><title></title></head>
<body>
<?php
 renderNavigation();
?>
</body>
</html>

Damit umgeht man, das man die Navigation mehr als einmal anpassen muß, wenn es dort änderungen gibt.

Aber das was ich hier beschreibe, macht man schon die letzten 8 Jahre so.
Das man da Frames benutzt, habe ich in meiner Praxis noch nie erlebt.
 
Zu den Nachteilen von Frames habe ich vergessen:
- Sehbehinderte und andere Personen mit Disabilities. Denn ohne Frames lässt sich die Seite als ganzen besser organisieren, damit auch andere Personenkreise dazu besser Zugang finden, sei weil sie einfach ein anderes CSS verwenden, um den Kontrast zu erhöhen oder sei mit ScreenReadern.
- Man möchte meistens dann doch den Menüpunkt hervorheben, wo man sich befindet. Das führt dazu dass man selbst bei Frames die Navigation neu laden muss. Weil es nicht direkt geht, braucht man dafür wieder JavaScript. Its just a mess.
 
Pingu schrieb:
- Man möchte meistens dann doch den Menüpunkt hervorheben, wo man sich befindet. Das führt dazu dass man selbst bei Frames die Navigation neu laden muss.
Zum Vergrößern anklicken....

Das ist aber mit den obigen Beispielen ("include" oder "render navigation")
auch nicht gelöst.

Bei Frames lassen sich die "gedrückten" Links über css oder javascript
auch anzeigen/ändern.
 
MacEnroe schrieb:
Das ist aber mit den obigen Beispielen ("include" oder "render navigation")
auch nicht gelöst.
..
Zum Vergrößern anklicken....

Doch. Ist es.
Ich kann ja ganz einfach per CSS den Link in der Navigation, der der Seite entspricht, auf der ich mich gerade befinde, hervorheben.

Nichts für ungut, aber das sind alles absolute Grundlagen, über die wir hier sprechen. Für den Privatanwender, der seinen Dackelzüchterverein im Netz präsentiert, ist es auch egal.

Aber bei allem, was darüber hinausgeht sind Frames nichtmals etwas, wo man auch nur anfangen sollte, darüber nachzudenken. :)
 
Also nochmal.
Mir ist schon klar warum man keine Frames mehr benutzt. Und ich weiß auch wofür divs+css gut sind. Nur wenn jemand nach einem "Ersatz" für Frames fragt, liegt doch nahe das er etwas sucht was es ihm ermöglicht nur teile der Seite neuzuladen.....
Und wie man das nur mit css+divs machen soll, ist mir ein Rätsel.

lg

Leon
 
thebug schrieb:
Nur wenn jemand nach einem "Ersatz" für Frames fragt, liegt doch nahe das er etwas sucht was es ihm ermöglicht nur teile der Seite neuzuladen.....
Zum Vergrößern anklicken....

er fragte ja nach einem Ersatz für ein "Framebasiertes Layout". Das kann man natürlich so oder so verstehen... Allerdings sagte er ja auch, das er gelesen hat das dies mit CSS funktionieren soll... und nicht mit AJAX/Javascript.

Daher verstehe ich das so, das es ihm darauf ankommt das Layout entsprechend zu gestalten, statt teile der Seite neu zu laden :)
 
Naja, wie dem auch sei.
Ein kleines Beispiel wie es gehen könnte...
:)
lg

Leon
 

Anhänge

  • FrameErsatz.zip
    3,3 KB · Aufrufe: 67
thebug schrieb:
Mir ist schon klar warum man keine Frames mehr benutzt. Und ich weiß auch wofür divs+css gut sind. Nur wenn jemand nach einem "Ersatz" für Frames fragt, liegt doch nahe das er etwas sucht was es ihm ermöglicht nur teile der Seite neuzuladen.....
Zum Vergrößern anklicken....

Ja, das liegt nahe – ob es ihm tatsächlich hauptsächlich darum geht, hat der OP ja leider nicht deutlich gesagt.

Dein Ajax-basierter Ansatz bringt, zumindest in dieser Form, leider ganz ähnliche Probleme mit sich wie ein Frameset: Man kann die URL des aktuellen Dokuments nicht kopieren, Suchmaschinen werden ausgebremst, der Zurück-Button des Browser funktioniert nicht mehr wie erwartet.
So treibt man den Teufel mit Beelzebub aus.


Wer lediglich die Navigation bei jeder Änderung der Site nicht zigfach anpassen will, ist mit dem PHP-include oder einer vergleichbaren anderen serverseitigen Lösung gut bedient.
Und wer vermeiden will, dass die Navigation auf jeder Seite neu geladen wird: Der sollte sich ernsthaft Gedanken über sein Design machen. Eine gute Navigation sollte so schnell geladen sein, dass man sie ruhig auf jeder Seite neuladen kann. Das Ding ist schließlich ein Werkzeug, kein Selbstzweck.
 
Atarimaster schrieb:
Ja, das liegt nahe – ob es ihm tatsächlich hauptsächlich darum geht, hat der OP ja leider nicht deutlich gesagt.

Dein Ajax-basierter Ansatz bringt, zumindest in dieser Form, leider ganz ähnliche Probleme mit sich wie ein Frameset: Man kann die URL des aktuellen Dokuments nicht kopieren, Suchmaschinen werden ausgebremst, der Zurück-Button des Browser funktioniert nicht mehr wie erwartet.
So treibt man den Teufel mit Beelzebub aus.


Wer lediglich die Navigation bei jeder Änderung der Site nicht zigfach anpassen will, ist mit dem PHP-include oder einer vergleichbaren anderen serverseitigen Lösung gut bedient.
Und wer vermeiden will, dass die Navigation auf jeder Seite neu geladen wird: Der sollte sich ernsthaft Gedanken über sein Design machen. Eine gute Navigation sollte so schnell geladen sein, dass man sie ruhig auf jeder Seite neuladen kann. Das Ding ist schließlich ein Werkzeug, kein Selbstzweck.
Zum Vergrößern anklicken....

Das stimmt.
Ich wollte nur zeigen wie man frames ohne frames haben kann. ;)
 
Atarimaster schrieb:
Und wer vermeiden will, dass die Navigation auf jeder Seite neu geladen wird: Der sollte sich ernsthaft Gedanken über sein Design machen. Eine gute Navigation sollte so schnell geladen sein, dass man sie ruhig auf jeder Seite neuladen kann. Das Ding ist schließlich ein Werkzeug, kein Selbstzweck.
Zum Vergrößern anklicken....

Egal wie gut und schnell die Navigation ist, man sieht trotzdem, dass sie neu geladen wird. Danke für alle Beiträge ich werd mir PHP aneignen und es damit realisieren.
 
Zurück
Oben Unten