Umständlich: CSS statt frames

[kruge]

Hallo liebes Forum, ich habe zum letzten mal so richtig 1999 HTML geschrieben. Da war die Welt noch in Ordnung.
Nun wollte ich mal wieder was machen und habe erfahren, daß viele Dinge, die damals gang und gäbe waren, heute schlecht sein sollen. Man sagte mir, daß Frames total schlecht seien und auf keinen Fall mehr verwendet werden sollen. Stattdessen mit <div> arbeiten und CSS benutzen. (Was an frames jetzt plötzlich so unglaublich schlecht sein soll, habe ich allerdings bis jetzt nicht so richtig verstanden, aber egal.)
Gut, ich habe mich dann bißchen in CSS eingelesen. Und auch eine Musterseite besucht. Und habe festgestellt: Oh Mann ist das umständlich! Ich mußte nämclih einen Menüpunkt hinzufügen. Bei frames kein Problem: einfach nur die linke Seite editieren, den Punkt hinzufügen, und die neue Seite als target definieren, fertig.
Bei CSS mußte ich für diese primitive Standardsituation jetzt über 15 Seiten aktualisieren, nämclih für jeden Menüpunkt ne eigene Seite. Was um alles in der Welt soll das?!?!? Was habe ich falsch gemacht? Das kann doch nicht so umständlich sein! (HInweis: mein Editor ist das Windowsnotepad)

Eine zweite Sache: was soll dieses xhtml? Habe in wikipedia nachgelesen, da steht jede Menge, aber was das für Vorteile bringen soll ist mir niht klar. Werden die Seiten schneller geladen? Was bringt es konkret für den Anwender? Zudem wird bei firefox der Quellcode einer xhtml-Seite immer sehr merkwürdig angezeigt - dort ist das Schließzeichen mit einem /> versehen statt einfach >, und dieser Querstrich ist leuchtend rot markiert, ganz so, als sei dies ein Programmierfehler.

 

[xXxPeterPanxXx]

css hat viele vorteile:
-seite wird schneller geladen.
-mehr möglichkeiten.
-und viele viele mehr.


ich bin auch an anfänger und ich mag keine frames weil die so umständlich sind

 

[Loon3y]

Es ist schön das du den weg zu uns gefunden hast und dich so dafür interessierst. Das ist schonmal ein guter Anfang.

Ans Herz legen kann ich dir diese Links:

Die Unterschiede zwischen XHTML und HTML [barrierefreies-webdesign.de]

SELFHTML: HTML/XHTML / XHTML und HTML / Unterschiede zwischen XHTML und HTML

Lies es dir mal durch. Dadurch sollten dir viele Fragen beantwortet werden.

Gruß
Loon3y

 

[kruge]

Vielen Dank für die Hilfe. Ich habe den Unterschied zwischen HTML und XHTML jetzt begriffen. Er ist wohl doch eher theoretischer Natur und bringt in Bezug auf Ladezeiten usw.. nicht wirklcih was, aber dafür wurde es ja auch nicht entwickelt.
Was bleibt ist meine Kritik an der CSS-Lösung gegenüber frames.
@PeterPan: wie würdest du denn mein Problem umsetzen? Wieso sind frames für dich umständlicher als die Lösung via CSS? Gibt es bestimmte Editoren, die automatisch in allen relevanten html-Seiten die Linkliste aktualisieren?

 

[_Thor_]

Sinnvoll wäre die Verwendung einer serverseitigen Scriptsprache, wie PHP. Diese bietet dir die Möglichkeit, Dateien in deine Seite einzubinden, z.B. ein Menü. Stichwort: include

Umstieg von Frames auf CSS

Allerdings sollte man darauf hinweisen, dass <div> jetzt nicht das neue Wundermittel sind, wie es vielleicht fälschlicher Weise den Anschein erwecken mag.

Semantisch korrektes HTML sollte das Ziel sein.

Da könnte eine Überarbeitung den Artikels nötig sein.

 

[Efchen]

daß viele Dinge, die damals gang und gäbe waren, heute schlecht sein sollen. Man sagte mir, daß Frames total schlecht seien und auf keinen Fall mehr verwendet werden sollen. Stattdessen mit <div> arbeiten und CSS benutzen. (Was an frames jetzt plötzlich so unglaublich schlecht sein soll, habe ich allerdings bis jetzt nicht so richtig verstanden, aber egal.)

Frames sind heute so schlecht wie auch schon 1999. Sie haben für den Benutzer nur Nachteile. Du kannst Unterseiten nicht bookmarken, wenn Du per Suchmaschine auf eine Unterseite kommst, fehlen andere Frames, z.B. das Menü, und die Site wird für Dich unbenutzbar. In der Adresszeile steht immer nur die selbe URL, aber nicht die für die aktuelle Seite.
Einige der Probleme lassen sich umgehen, aber man braucht JavaScript. Ist das abgeschaltet, ist alles für die Katz.

Frames haben vermeintliche Vorteile für den Webmaster. Z.B. dass man gleichbleibende Seitenteile, z.B. das Menü, nicht in jede Datei packen muss. Das und die meisten anderen Vorteile, lassen sich heute auch anders lösen, besagtes Menüproblem mit einer serverseitigen include-Lösung.

Dass man statt Frames <div> benutzt ist Unfug. Ich weiß, dass es Leute gibt, die das so sagen, aber die haben es noch nicht verstanden, wie es eigentlich gedacht ist. Frames kann man nicht einfach durch irgendwas ersetzen, weil Frames ein Sammelsurium verschiedener Features sind, die man in ein HTML-Tag gepackt hat. Damit wird es zum Strukturelement, obwohl es weit vielseitiger ist.

Richtig geht es mit HTML und CSS: HTML ist für die logische Struktur des Dokuments gedacht (das war auch schon vor 1999 so), nicht für das Aussehen (das war 1999 nicht unbedingt so, CSS steckte noch in den Kinderschuhen und daher hat man bis dahin HTML für die Optik (Layout und Design) missbraucht. Aber schon kurz nach 1999 war CSS reif und seitdem benutzt man ausschließlich CSS für Layout und Design. Und HTML kann endlich wieder dem Sinn zugeführt werden, der schon 1988 für HTML gedacht war, zur Strukturierung des Inhalts.

Das Tag <div> wird nur dafür benutzt, mehrere Elemente zu gruppieren. Aber Layout macht man damit nicht und Frames kann es auch nicht ersetzen.

Gut, ich habe mich dann bißchen in CSS eingelesen. Und auch eine Musterseite besucht. Und habe festgestellt: Oh Mann ist das umständlich!

Ganz und gar nicht. Jetzt ist man endlich in der Lage, Inhalt und Layout voneinander zu trennen. Dadurch wird der gesamte Code übersichtlicher, kürzer, einfacher und die ganze Arbeitsweise wird logischer. Für Dich mag das umständlich aussehen, aber das wird vergehen. Wichtig für das Verständnis von CSS ist aber auch ein gutes Verständnis von HTML, was Semantik eigentlich bedeutet und dass HTML in keiner Weise an der Optik der Elemente beteiligt ist.

Ich mußte nämclih einen Menüpunkt hinzufügen. Bei frames kein Problem: einfach nur die linke Seite editieren, den Punkt hinzufügen, und die neue Seite als target definieren, fertig.
Bei CSS mußte ich für diese primitive Standardsituation jetzt über 15 Seiten aktualisieren, nämclih für jeden Menüpunkt ne eigene Seite. Was um alles in der Welt soll das?!?!? Was habe ich falsch gemacht?

Falsch hast Du gemacht, dass Du das Problem CSS zugeordnet hast. Das hat mit CSS aber rein gar nichts zu tun. CSS ist nur für die Optik zuständig. Und, wie schon gesagt, das Problem lässt sich mit serverseitigem include lösen. Es handelt sich hierbei nicht um ein Problem der Darstellung.

Zudem wird bei firefox der Quellcode einer xhtml-Seite immer sehr merkwürdig angezeigt - dort ist das Schließzeichen mit einem /> versehen statt einfach >, und dieser Querstrich ist leuchtend rot markiert, ganz so, als sei dies ein Programmierfehler.

Richtig. Denn in XHTML werden alle Tags eschlossen, auch inhaltsleere wie <br> oder <img>. Bei diesen inhaltsleeren macht man das mit dem Slash, wie Du das beschrieben hast. Nicht inhaltsleere, die man in HTML nicht schließen musste, sind z.B. <li> oder <option>. XHTML basiert auf XML und hat damit andere Regeln als HTML, das auf SGML basiert.

Was bleibt ist meine Kritik an der CSS-Lösung gegenüber frames.

Wie gesagt, CSS ist kein Ersatz für Frames. CSS ist was völlig anderes als Frames. Deswegen kannst Du das nicht direkt vergleichen und Du siehst hier einen Nachteil der Frames. Es ist ein zusammengewürfeltes Etwas aus verschiedenen Bereichen. Eine ordentliche Trennung von Inhalt und Layout ist nicht möglich.

Wieso sind frames für dich umständlicher als die Lösung via CSS?

Wie gesagt, das kann man so nicht vergleichen.

Gibt es bestimmte Editoren, die automatisch in allen relevanten html-Seiten die Linkliste aktualisieren?

Klar. Es gibt Editoren, die ein dateiübergreifendes Suchen und Ersetzen ermöglichen. Unter Unix sind Tools zu solchen Zwecken bereits integriert, Windows kennt sowas ja leider nicht. Selbst das Suchen in Dateien wird unter Windows zur Qual. Phase5 als HTML-Editor bietet meines Wissens sowas. Aber wie oben angeführt, Du solltest da nach einer serverseitigen Lösung suchen, z.B. in SSI oder PHP.

Sind jetzt noch Fragen offen geblieben? :-)

Viele Grüße und gutes Verständnis wünscht
-Efchen

 

[kruge]

Elfchen, jetzt bin ich aber baff! Vielen Dank für deine Mühen, ich weiß es zu schätzen ;-)
Gut, der von Thor und dir angesprochene Workaround via PHP ist sicherlich eine mächtige Lösung, aber ist das für eine primitive private Homepage nicht ein bißchen "Kanonen auf Spatzen"? Zudem wird das ja dann servermäßig verarbeitet (im Gegensatz zur reinen CSS-Lösung), was der Server auch erstmal erlauben muß...
Immerhin weiß ich jetzt, daß es prinziell tatsächlich so ist, daß jeder einzelne Menüpunkt als einzelne Seite komplett programmiert werden muß, und der Aufwand, wenn man nur das Notepad von Windoof zur Verfügung hat, deshalb tatsächlich viel größer (Faktor 5 bis unendlich? Je nachdem, wieviele Menüpunkte schon vorhanden sind) ist als die klassische frames-Variante. Ausweg: die von euch vorgeschlagene Variante via PHP.

Summa summarum erscheinen mir die jetzigen Möglichkeiten für Ästheten zwar tatsächlich schöner, aber der Mehraufwand ist schon gewaltig. Entweder jede einzelne Seite komplett schreiben oder eine Skriptsprache a la PHP lernen. Ein HTML-konformer Nachfolger von frames, der auch die von euch beschriebenen Nachteile eliminiert, wäre evtl. die beste Lösung.

Nachtrag: wenn ich dann für das Menü auf der linken Seite eine Datei "menu.php" angelegt habe mit den Menüpunkten, dann soll natürlich derjenige Menüpunkt, dessen Seite ich gerade rechts betrachte, z. B. weiß hinterlegt sein. Auch sollen Untermenüs möglich sein, die man aufklappen kann. Ist dies mit der include-Anweisung ebenfalls möglich?

 

[ingoS]

Ich glaube eher, für eine so kleine Aufgabe PHP komplett lernen, das wäre "mit Kanonen auf Spatzen schießen".
Ich hatte schon lange bevor ich PHP wirklich zu lernen begonnen habe diese Methode eingesetzt. Es gibt hier im Forum auch ein entsprechendes Tutorial. Das ist zwar etwas knapp gehalten, aber ich als PHP-Laie habe es damals auch verstanden, dann wird es nicht so schwer sein. ;)

 

[Wolfgang_muc]

Frames haben elemantere Vorteile gegenüber framelosem Design:

1. Änderung lediglich einer HTML Datei bei Änderung des Navigationsbereich gegenüber Einsatz von komplexeren Techniken wie Templates oder PHP-Includes. Spart Zeit und Geld

2. Beim Scrollen bleibt der Navigationbereich stehen und verschwindet nicht - wichtig bei längeren Seiten: Man muss bei Seitenwechsel nicht jedesmal umständlich zurückscrollen. Spart Zeit

3. Bei Seitenwechsel wird nicht der komplette Bildschirminhalt ausgetauscht sondern ein definierter Bereich. Das erspart einem den unangenehmen kurz aufflackernden weißen Bildschirm.


Das Internet begann mit framelosem Design, da es Frames anfangs gar nicht gab. Erst später wurden Frames eingeführt. Man kehrt mit framelosem Design gewissermaßen wieder an die Anfänge des Webdesigns zurück.

 

[_Thor_]

Guter Witz, mehr fällt mir dazu gerade nicht ein...

 

[Bernhard]

Frames haben elemantere Vorteile gegenüber framelosem Design:

Vor allem auch bei den Suchmaschinen...:-)

1. Änderung lediglich einer HTML Datei bei Änderung des Navigationsbereich gegenüber Einsatz von komplexeren Techniken wie Templates oder PHP-Includes. Spart Zeit und Geld

Jawoll, wer über Frames nachdenkt, sollte sich Zeit und Geld für einen Webauftritt lieber gleich sparen...:-)

2. Beim Scrollen bleibt der Navigationbereich stehen und verschwindet nicht - wichtig bei längeren Seiten: Man muss bei Seitenwechsel nicht jedesmal umständlich zurückscrollen. Spart Zeit

Und wieder: volle Zustimmung! - Vor allem bei kleinen Viewports spart man sich die Zeit,
den Inhaltsbereich anzuschauen und geht direkt zu einer vernünftigen Site...:-)

3. Bei Seitenwechsel wird nicht der komplette Bildschirminhalt ausgetauscht sondern ein definierter Bereich. Das erspart einem den unangenehmen kurz aufflackernden weißen Bildschirm.

Wenn Dein Bildschirm flackert, solltest Du ihn austauschen, da das nicht gut für die Augen ist.

Das Internet begann mit framelosem Design, da es Frames anfangs gar nicht gab. Erst später wurden Frames eingeführt. Man kehrt mit framelosem Design gewissermaßen wieder an die Anfänge des Webdesigns zurück.

Das Internet begann ohne Layout - irgendwann wurden Frames als Layout-Krücke eingeführt...
Heute kehren wir insofern zurück, dass HTML kein Layout macht, denn dafür gibt es ja CSS.
Aber: kein Problem, wenn Du Dich lieber an Krücken festhältst...

Grüße
Bernhard

 

[Efchen]

Gut, der von Thor und dir angesprochene Workaround via PHP ist sicherlich eine mächtige Lösung, aber ist das für eine primitive private Homepage nicht ein bißchen "Kanonen auf Spatzen"?

Also zum einen ist das kein Workaround und zum anderen auch keine Kanone, sondern normale Vorgehensweise. Es gibt ja keine andere Möglichkeit. Aber Du kannst ja statt PHP das auch mit SSI machen. Wobei prinzipiell da auch nicht viel Unterschied besteht...

Zudem wird das ja dann servermäßig verarbeitet (im Gegensatz zur reinen CSS-Lösung), was der Server auch erstmal erlauben muß...

Ohne Server funktioniert im WWW eh keine Website. Die "reine CSS-Lösung" muss auch vom Server angefordert werden. Ob der Server nun noch PHP startet, macht den Braten auch nicht unbedingt fett (wenn der Server nicht auf einem 486 läuft ;-)). Dass der Server das erlauben muss, ist logisch. Aber wer anspruchsvolle Websites schreiben will, der kommt sowieso nicht um eine serverseitige Programmiersprache drumrum, aber ob man da PHP, ASP oder die CGI-Schnittstelle nutzt, das ist prinzipiell egal. Includen kann man mit allen.

Ausweg: die von euch vorgeschlagene Variante via PHP.

Und auf jeden Fall der Frames-"Lösung" vorzuziehen.

Summa summarum erscheinen mir die jetzigen Möglichkeiten für Ästheten zwar tatsächlich schöner, aber der Mehraufwand ist schon gewaltig.

include vs Frames? Da ist include deutlich weniger aufwändig.
Du musst bei Frames ja auch an die ganzen Nachteile denken und die Arbeit, die Du hast, diese Nachteile zu umgehen, und da das nur mit JavaScript erfolgen kann, ist es bei Leuten, die das abschalten, für die Katz. Bei serverseitiger Lösung funktioniert es immer und immer nutzerfreundlich.

Entweder jede einzelne Seite komplett schreiben oder eine Skriptsprache a la PHP lernen. Ein HTML-konformer Nachfolger von frames, der auch die von euch beschriebenen Nachteile eliminiert, wäre evtl. die beste Lösung.

Du musst nicht PHP lernen, um den einen include-Befehl zu nutzen. Du solltest nur wissen, wie der Ablauf ist, wenn Dein Browser ein PHP-Script am Server anfordert. Wobei wie gesagt, wenn Du mal ansprechende Websites schreiben willst, wirst Du so oder so PHP (oder eben eine andere Sprache) lernen, weil Du nur so dynamische Inhalte hinbekommst.

Ein Nachfolger von Frames, xframes ist in der Tat in Arbeit, aber wann das zum Standard wird, ist noch offen und dann können es ja trotzdem wieder einige Browser nicht. Die PHP-Lösung funktioniert aber eben in jedem Browser, egal ob Netscape 0.8, Lynx, Mosaic oder IE10. Weil sie eben unabhängig vom Browser ist.

Nachtrag: wenn ich dann für das Menü auf der linken Seite eine Datei "menu.php" angelegt habe mit den Menüpunkten, dann soll natürlich derjenige Menüpunkt, dessen Seite ich gerade rechts betrachte, z. B. weiß hinterlegt sein. Auch sollen Untermenüs möglich sein, die man aufklappen kann. Ist dies mit der include-Anweisung ebenfalls möglich?

Das hat ja nichts mit include oder PHP zu tun. PHP läuft serverseitig und stellt Dir nur dynamisch eine statische HTML-Seite zur Verfügung. Die Kennzeichnung des aktiven Menüpunktes erfolgt nach wie vor durch HTML und das Aussehen durch CSS.
Das einzige, was Du mit PHP machen musst, ist die aktuelle Seite mit den einzelnen Links Deines Menüs zu vergleichen, damit Du weißt, auf welcher Seite Du Dich befindest, um eben diese mit z.B. einer eigenen Klasse auszuzeichnen. Da sind wir jetzt natürlich an einer Stelle, wo Du schon etwas mehr PHP lernen müsstest, wenigstens die if-Anweisung.

Frames haben elemantere Vorteile gegenüber framelosem Design:

Wenn Du Dich mit was anderem als Frames genauso gut auskennen würdest, wie mit Frames, würdest Du erkennen, dass dem nicht so ist.

Änderung lediglich einer HTML Datei bei Änderung des Navigationsbereich

Bei "framelosem Design" genauso möglich. Das praktiziere ich genauso ohne Frames.

Beim Scrollen bleibt der Navigationbereich stehen und verschwindet nicht

Kann in CSS mit position:fixed umgesetzt werden.
Halte ich aber nicht für sinnvoll, ist Platzverschwendung. Ist aber auch ein bisschen Ansichtssache. Dafür benötigt man aber definitiv keine Frames.

Bei Seitenwechsel wird nicht der komplette Bildschirminhalt ausgetauscht sondern ein definierter Bereich. Das erspart einem den unangenehmen kurz aufflackernden weißen Bildschirm.

Bei meinem Browser flackert da nichts. Vielleicht hast Du einen langsamen Rechner, eine alte Grafikkarte oder einen minderwertigen Browser.

Das Internet begann mit framelosem Design, da es Frames anfangs gar nicht gab. Erst später wurden Frames eingeführt. Man kehrt mit framelosem Design gewissermaßen wieder an die Anfänge des Webdesigns zurück.

Und das ist gut so. Denn die Nachteile von Frames überwiegen und die vermeintlichen Vorteile von Frames lassen sich auch auf andere Weise umsetzen.