IPB

Willkommen, Gast ( Anmelden | Registrierung )

5 Seiten V   1 2 3 > »   
Reply to this topicStart new topic
> Tabellenfreies Layout, warum wieso weshalb
legman
Beitrag 04.06.2004 - 13:16
Beitrag #1


is getting harder


Gruppe: User
Beiträge: 13
Mitglied seit: 24.05.2004
Wohnort: Berlin
Mitglieds-Nr.: 2.770



hallo allerseits,

worin liegen die vorteile eines tabellfreien layouts? ist da nicht eher die gefahr, das die seiten mit älteren browsern völlig falsch dargestellt werden weil sie die css anweisungen nicht interpretieren können?

tabellen erkennt doch jeder browser!

kennt ich damit jemand gut aus?

danke
Go to the top of the page
 
+Quote Post
theotull
Beitrag 04.06.2004 - 13:52
Beitrag #2


is getting harder


Gruppe: User
Beiträge: 18
Mitglied seit: 07.07.2003
Mitglieds-Nr.: 887



ZITAT(legman @ 04.06.2004 - 14:16)
worin liegen die vorteile eines tabellfreien layouts? ist da nicht eher die gefahr, das die seiten mit älteren browsern völlig falsch dargestellt werden weil sie die css anweisungen nicht interpretieren können?

Hallo,

hier mal ein Auszug aus Warum Tabellen böse sind


Linearisierung – und alles wird gut

07.05.2001, TC

Als Tim Berners–Lee und Robert Cailliau Anfang der 90er Jahre des letzten Jahrtausends HTML und HTTP – und damit das heutige World Wide Web – erfanden, hatten sie ein System im Sinn, das lediglich Texte auszeichnet. Das heißt: die logische Struktur eines Textdokuments beschreibt, und das Aussehen dem Zielcomputer überlässt. Auch wenn dieses grundlegende Prinzip bis heute weitestgehend missachtet wird, hat sich daran doch nichts geändert.

In den Anfangstagen des Web war die Gestaltung von Seiten noch recht einfach: auf eine Überschrift vom Typ <h1> folgte mit an Sicherheit grenzender Wahrscheinlichkeit eine vom Typ <h2>, Absätze hießen noch <p> und Zitate anderer Wissenschaftler wurden in <blockquotes> verpackt. Dann entdeckten visuell veranlagte Netizens, dass man Webseiten auch gestalten kann und setzten HTML–Tags ein, um ein bestimmtes Aussehen zu erreichen. Daran ist auch eigentlich nichts verwerfliches, ist doch das Web primär ein Medium, das visuell wahrgenommen wird – Benutzer wie Anbieter haben auch ein Recht auf Gestaltung!

Ironie der Geschichte: bereits der erste Browser, den Tim Berners–Lee am CERN entwickelte, und der auf den klangvollen Namen World Wide Web hörte, beherrschte schon benutzerdefinierte Formatvorlagen – Style Sheets! Hier ein Screenshot des ersten Webbrowsers (ca. 260 kB)

Zudem unterstützt eine gute Gestaltung auch die Aufnahme der Inhalte, z.B. indem sie die Lesbarkeit und damit das Textverständnis verbessert – ein nicht zu unterschätzender Faktor. Leider geschah dies aber mit Mitteln, die HTML immer weiter von seiner strukturierenden Funktion wegführten und die mit jedem neuen Release der konkurrierenden Webbrowser weiter weg von einem einfachen Zugang für alle führten.

Die größte Hürde bereiteten damals und auch heute noch die Tabellen. Werden sie als reines Layoutmittel eingesetzt, so führt es fast zwangsläufig zu einer Zerstückelung der Inhalte. Diese sind dann für alle, die nicht mit einem grafischen Webbrowser arbeiten können, kaum mehr entzifferbar.

Der folgende Screenshot aus Macromedia Dreamweaver, einem häufig eingesetzten WYSIWYG–Editor, illustriert das Problem recht anschaulich: in der Darstellung steht nach der in westlichen Ländern üblichen Lesart:

Erster Satz
Zweiter Satz
Dritter Satz
Vierter Satz

Doppelte Ansicht mit Quelltext und grafischer Darstellung von TabellenIn dieser Art werden üblicherweise auch HTML–Seiten aufgebaut: Spaltensatz mit Headline oben links, der dazugehörige Text darunter, nächste Headline oben rechts und wieder Text darunter. Für Systeme, die mit Tabellen nichts anfangen können – und das sind nicht nur Braillezeilen und Sprachsynthesizer, beginnt genau hier das Problem: Im Quelltext stehen die Texte in einer anderen Reihenfolge als sie von grafischen Browsern angezeigt werden.

Ganz gravierend wird es bei mehrfach verschachtelten Tabellen, wie sie heute üblicherweise in mehrspaltigen Layouts eingesetzt werden. Hier kann es passieren, dass die Headline am einen Ende des Quelltextes steht, der dazugehörige Text im HTML aber am gegenüberliegenden Ende.

Die Hersteller von Sprachsynthesizern haben sich mittlerweile auf diesen Trend des Webdesigns der vergangenen Jahre eingestellt. Sie haben teilweise Systeme entwickelt, die den Bildschirmspeicher abgreifen und mit einer Art OCR–Mechanismus versuchen, den Text in den vorgefundenen Blöcken zu sortieren – ein fast unmögliches Unterfangen und, wie unsere Tests ergeben haben, mit kaum brauchbaren Ergebnissen.

Da bereits jetzt der Trend abzusehen ist, dass sich das Web immer mehr vom Desktop lösen wird und immer mehr Zugriffe aus anderen Umgebungen als grafischen Betriebssystemen erfolgen, wird sich diese Problematik noch verschärfen. Man kann hier nicht mehr die gängige Konfiguration (Windows ab 95 mit MS IE ab 5) voraussetzen. Hier bietet das Konzept entscheidende Vorteile, das Inhalte losgelöst von Ihrer Verpackung anbietet und dann die Gestaltung dem jeweiligen Medium entsprechend separat mitliefert.
Zurück zur Struktur

Durch den konsequenten Einsatz von Style Sheets und HTML 4 ist es nun endlich wieder möglich, den Dokumenten die Struktur zurückzugeben, die jahrelang durch den übermäßigen Gebrauch von Tabellen zu reinen Layout–Zwecken verloren gegangen ist. Die Folge ist, dass so aufgebaute Seiten von jedem x–beliebigen Browser dargestellt werden können – und zwar exakt entsprechend seiner Möglichkeiten.

* Browser (oder besser jegliche Art von Zugangssoftware oder Roboter), die lediglich Texte interpretieren können, bekommen auch nur genau das geliefert: reinen Text, nicht mehr und nicht weniger.
* Browser, die CSS und HTML 4 korrekt interpretieren, bekommen die bis aufs letzte Bit identische Datei, aber zusätzlich noch separate, ihrem Medientyp entsprechende Formatvorlagen mit den Formatierungsanweisungen des Anbieters. Diese Seiten hier funktionieren übrigens genau so. Und wenn dem Benutzer diese Formatvorlage nicht passt, bieten alle aktuellen Browser wie Opera, Internet Explorer und Netscape die Möglichkeit einer eigenen Vorlage, die den individuelle Bedürfnissen angepasst ist. Vorgefertigte Style Sheets, die man auch für solche Zwecke lokal installieren kann und darf, gibt es mittlerweile zu Hauf im Netz.
* Diese Seiten werden deutlich schlanker, weil sie nicht mehr alle Eventualitäten in der doch sehr unterschiedlichen Interpretation von Tabellen durch die großen Browser abfangen müssen. Untersuchungen des W3C sprechen von einem Geschwindigkeitsvorteil um den Faktor 3 durch den konsequenten Einsatz von CSS.
* Ehrlicherweise sei hier aber auch erwähnt, dass es einige Produkte gegeben hat, die mit diesen Techniken hoffnungslos überfordert sind. Im Kampf um Marktanteile zwischen Microsoft und Netscape sollten die Versionsnummern 4 dieser Hersteller besser ein auf deren Bugs hin angepasstes Style Sheet geliefert bekommen, da neuere Techniken nur Ärger und Frustration bei den Besuchern verursachen würden.

Gruß
Theo
Go to the top of the page
 
+Quote Post
legman
Beitrag 04.06.2004 - 13:56
Beitrag #3


is getting harder


Gruppe: User
Beiträge: 13
Mitglied seit: 24.05.2004
Wohnort: Berlin
Mitglieds-Nr.: 2.770



vielen dank für die ausführliche antwort! blush.gif
Go to the top of the page
 
+Quote Post
Terry
Beitrag 05.06.2004 - 12:59
Beitrag #4


looks good


Gruppe: User
Beiträge: 43
Mitglied seit: 17.02.2004
Mitglieds-Nr.: 2.047



Und trotzdem hast Du nicht ganz unrecht, legman.

Spätestens dann, wenn man nicht nur ganz spartanische Seiten machen möchte, sondern tatsächlich auch eine optisch ansprechende Seite mit Grafiken etc. designen möchte, hat man das Browserproblem.

Der Netscape 4 kann sehr vieles nicht darstellen - o.k., da kann man sich behelfen, indem man ihm entweder ein spartanisches eigenes Stylesheet erstellt oder ihn gar ganz vom CSS ausschließt - dann bekommen Surfer mit dem Netscape 4 eben nur reinen Inhalt.

Auch der IE (sogar der 6er) kann leider vieles nicht oder stellt es anders dar.
Man muss also viel testen und oft sogenannte Hacks einbauen, um auch in älteren Browsern (IE5, der noch viel benutzt wird), ein ansprechendes Bild zu erzeugen. Jedenfalls ist es so einfach letztlich nicht (will man nicht nur ganz einfache Seiten machen ohne großes "Design").

Dennoch habe ich jetzt zwei Seiten rein mit CSS aufgebaut - es funktioniert und macht auch Spaß, aber knifflig war´s in beiden Fällen, bis es in allen Browsern eingermaßen so aussah wie geplant - ich seh´s als Sport und als Puzzlespiel, insofern ist´s o.k...

Aber ich verstehe gut, warum viele Profis noch nicht umsteigen wollen und denke, dass es auch für Anfänger leichter ist, die erste Seite mit Tabellen zu gestalten, weil man sonst mit den verschiedenen Browserreaktionen echt die Krise kriegen kann (z.B. wenn eine validierte Seite, die im Mozilla und IE tadellos funktioniert, im Opera dann so zerschossen ist, dass eine Navigation unmöglich war - Ursache war, dass Opera bei den Layern zwingend eine Auszeichnung als "id" brauchte, es bei "class"-Auszeichnung völlig anders darstellte....)

Grüße, Terry
Go to the top of the page
 
+Quote Post
legman
Beitrag 05.06.2004 - 13:49
Beitrag #5


is getting harder


Gruppe: User
Beiträge: 13
Mitglied seit: 24.05.2004
Wohnort: Berlin
Mitglieds-Nr.: 2.770



also es wird meine erste seite. ich muß dazu sagen, das ich kein angehender webdesinger bin. es ist ein hobby und eine freundin (fotografin) hat mich gebeten für sie eine seite zu machen.

ist für mich schon sehr anspruchsvoll das projekt.

erster entwurf:

http://www.people.freenet.de/aspa/test.html

in diesem stil soll die seite also aussehen. dürfte das mit css browsertechnisch problematisch werden?

kommen natürlich noch ne menge fotos in die seite. die galerien wollte ich auch mit css erstellen und nicht mit tabellen.
Go to the top of the page
 
+Quote Post
Terry
Beitrag 05.06.2004 - 14:49
Beitrag #6


looks good


Gruppe: User
Beiträge: 43
Mitglied seit: 17.02.2004
Mitglieds-Nr.: 2.047



Es geht alles mit CSS - die Tücke liegt aber im Detail - ich warn Dich schon mal vor! wink.gif

Ich würd auch das Java-Script aus dem Menü rausnehmen - die Texte kannst Du auch mit CSS anzeigen lassen - kein Problem.

Javascript-Menüs haben zwei Nachteile:
1. Sie funktionieren nur mit Javascript - logisch, oder? - ist z.B. in vielen Firmen aus Sicherheitsgründen abgeschaltet (o.k.- ist keine Seite, die man sich beruflich anschaut, von daher wärs o.k.)
2. Suchmaschinen können den Links nicht folgen - und das wäre schade!
Go to the top of the page
 
+Quote Post
legman
Beitrag 05.06.2004 - 19:50
Beitrag #7


is getting harder


Gruppe: User
Beiträge: 13
Mitglied seit: 24.05.2004
Wohnort: Berlin
Mitglieds-Nr.: 2.770



ich habe die seite nur mal schnell mit image ready gemacht, damit sie die html-fassung ihres entwurfs sehen kann und den rollovereffekt, den sie gerne haben wollte.

das javascript durch css zu ersetzen halte ich für gewagt. das können ältere browser bestimmt nicht darstellen!?

es könnte schon sein das sich die seite z.b. agenturen anschauen oder so.

mich würden mal die 2 seiten interessieren die du mit css gemacht hast.
haste mal nen link?
Go to the top of the page
 
+Quote Post
Terry
Beitrag 05.06.2004 - 19:58
Beitrag #8


looks good


Gruppe: User
Beiträge: 43
Mitglied seit: 17.02.2004
Mitglieds-Nr.: 2.047



Hier meine erste CSS-Seite: http://terrikay.tk

und hier die zweite - ist noch nicht ganz fertig und noch nicht offiziell online - geht auch noch auf einen anderen Server - aber jetzt schon mal online zum testen (ihr dürft gerne Eure Meinung dazu sagen ): http://home.arcor.de/terrikay/whisky

Diese ist jetzt XHTML-konform.

Der Beitrag wurde von Terry bearbeitet: 05.06.2004 - 20:00
Go to the top of the page
 
+Quote Post
legman
Beitrag 05.06.2004 - 22:57
Beitrag #9


is getting harder


Gruppe: User
Beiträge: 13
Mitglied seit: 24.05.2004
Wohnort: Berlin
Mitglieds-Nr.: 2.770



hi terry,

hab deine seiten mit opera 7.51,mozilla 1.6, firefox 0.8, IE6.0 besichtigt.(alles win.)
funzen alle tadellos! gute arbeit kann ich nur sagen.

die border-color des containers werden in fast allen browsern unterschiedlich dargestell. der IE u. opera können wohl keine runden border-ecken darstellen?

ich finde den effekt in "terrys galerie" ganz gut. ab welcher browserversion kann man das einsetzen?
wäre interessant für mein projekt.

ich bin ja mehr ein rotweinfreund aber so ein guter whysky is schon ne feine sache.
vor allem hat man am nächsten tag keine kater. wink.gif
Go to the top of the page
 
+Quote Post
Terry
Beitrag 06.06.2004 - 0:20
Beitrag #10


looks good


Gruppe: User
Beiträge: 43
Mitglied seit: 17.02.2004
Mitglieds-Nr.: 2.047



Vielen Dank!

Es war in beiden Fällen ne Puzzlearbeit, bis es endlich passte - aber es geht - man muss nur ausdauernd dranbleiben (und sich ab und zu mal Leute suchen, die sich mit sowas auskennen, in Foren fragen etc...).

Die verschiedenfarbigen Borders: ja, ist mir auch aufgefallen, dass die Anweisung "ridge" extrem unterschiedlich interpretiert wird. Weiß nicht, ob ich das so noch mal benutzen werde....

Zur Bildergalerie: ist halt CSS (mehrere unsichtbare Ebenen übereinander), die dann mit Javascript eingeblendet werden. Funktioniert ab IE 5, alle Mozillas, Operas, ziemlich sicher nicht im Netscape 4 - da hab ichs nicht getestet und das nehm ich in Kauf....
Nachteil: alle Bilder müssen auf der gleichen Seite geladen werden - ist darum sehr ladeintensiv - deshalb stelle ich nur max. 7 oder 8 Bilder auf eine Seite. Aber der Effekt hat was, ne? wink.gif

Die runden Ecken: sind eine Spezialität von Mozilla/Netscape. Geht sonst nur mit Grafikeinsatz. Ist einfach ein kleiner Gag und mal was anderes. Sieht ja aber auch eckig gut aus, insofern ist´s für mich o.k., dass es nicht für alle gleich ist.

Hier noch ne Testseite zu den Infotexten zu den Bilder beim Hovern:
http://home.arcor.de/terrikay/test/bildinfobox.html

hab ich von hier: http://css.fractatulum.net/sample/menu2format_demo.htm
box2 - nur einfach ein Bild reingesetzt statt Text.
Funktioniert ab IE5, alle Mozillas, Netscape vermutlich ab 6, Opera wohl erst ab 7.
http://css.fractatulum.net/sample/menu2format.html

Suchmaschinentechnisch wäre es so auf jeden Fall von Vorteil, browsertechnisch unterliegt es dem eigenen Gewissen... - wobei der Link vermutlich klappt, auch wenn der Infotext evtl. in einem älteren Opera nicht angezeigt wird - vielleicht findet man ja jemanden, der sowas mal testen könnte...

Zum Whisky - naja, eben in Maßen - denn Menschen vertragen nun mal nicht viel davon... wink.gif

Der Beitrag wurde von Terry bearbeitet: 06.06.2004 - 0:23
Go to the top of the page
 
+Quote Post
Google Bot
Beitrag
Beitrag #


Google Ads









Go to the top of the page
 
Quote Post

5 Seiten V   1 2 3 > » 
Reply to this topicStart new topic
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:

 



RSS Vereinfachte Darstellung Aktuelles Datum: 28.03.2024 - 19:18

taschenkalender
expertise-panel IPS Driver Error

IPS Driver Error

There appears to be an error with the database.
You can try to refresh the page by clicking here