Generelle Frage zu flexiblen und statischen Webdesign

[Matze Kellner]

Hallo,
möchte eine Frage stellen zu css und xml im Zusammenhang mit flexiblem Seitendesign, doch behersche nur Html. Benötige für eine Klausur allerdings ein wenig theoretische Kenntnisse.
Verstanden habe ich: Seiten können absolut oder relativ gestaltet werden (z.B: 100% Tabellenbreite, oder 800 Punkte Seitenbreite).
Doch wie funktioniert ein flexibles Seitendesign im Kern mit css Dateien und xml?
Css:
Wird hier z.B. jeweils für unterschiedliche Auflösungen eine anderes ausgelagerte Css Datei geladen?

XML:
Kann ich xml überhaupt für eine flexible Gestaltung von Text verwenden?

Warte auf Schelte, so ungenaue Fragen ins Forum zu stellen,
hoffe aber dennoch auf Antwort ;-)

[Samuel Vogel]

Hallo,

Ich bin mir nicht gnz sicher aber heißt "flexiblem Seitendesign" nicht dass die Seite jedesmal ein anderes Bild lädt oder so was? Also mit PHP, Perl, ASP?

samy,

[Matze]

sooooweit ich weiß, ist damit eher dynamisches html gemeint. Das ist nicht ganz das, was ich meine ;-)

[Dennis]

Hi @all!

Ich bin mir nicht gnz sicher aber heißt "flexiblem Seitendesign" nicht dass die Seite jedesmal ein anderes Bild lädt oder so was? Also mit PHP, Perl, ASP?

Nein, das ist falsch, wenn dann schon "dynamisches Seitenlayout" - heißt soviel, dass es sozusagen vituell beim Besucher z.B. auf Klick geändert wird (oder eben auch Zufallsgeneratoren enthält).
Schau, hier kann man die Hintergrundfarbe "dynamisch" ändern: http://tutorial.riehle-web.com/tutorial_wahl.html

Ein "flexibles Seitenlayout" ist ein Layout, welches sich an die Bildschirmbreite des Users anpasst.
Egal, wie groß der User das Fenster hat.

Ich hab mal versucht, das schnell darzustellen; schaut mal her: http://www.riehle-web.com/breite.html

MfG, Dennis.

[Ingo Turski]

Hi,

ein flexibles Design funktioniert ohne oder mit relativen Angaben zu Schriftgrößen und Längen. Ganz einfach.
Eine Seite, nur mit sinnvollen HTML-Elementen ohne jegliche Größenangaben ist bereits extrem flexibel, da HTML flexibel ist.

freundliche Grüße
Ingo

[Matze Kellner]

Hi Ingo,
also das mit den flexiblen html Befehlen versteh ich.
Mit css und XML ist jedoch auch Flexibilität zu erreichen (nur wie?):
Mit css nur über mehrere vielleicht auf unterschiedliche Auflösungen hin ausgerichtete css Dateien, die dann passend zur Auflösung geladen werden? Ist das der Kern? Oder über eine andere Methode?

[Andreas Schneider]

Hallo Matze,

Mit css nur über mehrere vielleicht auf unterschiedliche Auflösungen hin ausgerichtete css Dateien, die dann passend zur Auflösung geladen werden? Ist das der Kern? Oder über eine andere Methode?

Nein, sondern indem z.B. keine festen Höhen- und Breitenangaben gemacht werden, sondern relative. Vielleicht solltest Du dich mal ein wenig ins CSS-Kapitel von selfHTML einlesen, u.a. http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm.

Grüße
Andreas

[matze]

Nein, sondern indem z.B. keine festen Höhen- und Breitenangaben gemacht werden, sondern relative.

ist das nicht dann aber genau das gleiche, also ob ich einfach variable html befehle verwende?

Vielleicht solltest Du dich mal ein wenig ins CSS-Kapitel von selfHTML einlesen, u.a. http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm.

hm danke für den Tip ;-), hab ja schon geschmökert, nur weiß ich dann nicht genau, unter welchen Eigenschaften sich das variable verbirgt (mal wieder im Kern).

[Andreas Schneider]

Hallo Matze,

ist das nicht dann aber genau das gleiche, also ob ich einfach variable html befehle verwende?

Nein, der Vorteil von (ausgelagertem) CSS ist ja gerade die einfache Pflege der Seite.

Sieh dir mal http://www.csszengarden.com/ an. Dort siehst Du, wie einfach mit CSS eine komplette Layoutänderung zu bewerkstelligen ist, ohne das HTML-Dokument auch nur anfassen zu müssen.

Grüße
Andreas

[matze]

Hallo Matze,

ist das nicht dann aber genau das gleiche, also ob ich einfach variable html befehle verwende?

Nein, der Vorteil von (ausgelagertem) CSS ist ja gerade die einfache Pflege der Seite.

den vorteil der ausgelagerten Datei kenne ich, verwende ich ja selbst für meine kleine Site.
Stelle die Frage dann nochmal anders: Ich erreiche mit einem css befehl in einer ausgelagerten Datei nicht mehr Flexibilität als mit normalen relativen html befehlen?

Und meine Auflistung war sonst ganz richtig?
flexible html befehle
ausgelagerte datei (hier nur wieder jede datei für sich statisch)
ausgelagerte Datei mit relativen css befehlen (vorteil, leichte wartbarkeit, bringt aber nicht mehr flexibilität als relative html befehle?

Puh, ist das eine Haarspalterei ;-)

[Andreas Schneider]

Hallo Matze,

Stelle die Frage dann nochmal anders: Ich erreiche mit einem css befehl in einer ausgelagerten Datei nicht mehr Flexibilität als mit normalen relativen html befehlen?

Und meine Auflistung war sonst ganz richtig?
flexible html befehle
ausgelagerte datei (hier nur wieder jede datei für sich statisch)

Ich verstehe nicht so ganz, was Du immer mit "statisch" meinst. Wie die allwissende Müllhalde (interessanter Nick) schon schrieb ([pref:t=76590&m=441377]: HTML/CSS an sich ist flexibel, es sei denn, Du legst selbst Größenangaben fest.

ausgelagerte Datei mit relativen css befehlen (vorteil, leichte wartbarkeit, bringt aber nicht mehr flexibilität als relative html befehle?

Wie gesagt, die Flexibilität hast Du dann, wenn Du auf feste Größenangaben verzichtest, egal ob in HTML oder CSS.

Puh, ist das eine Haarspalterei ;-)

Und wo wir gerade beim Haarespalten sind: Weder HTML noch CSS kennen Befehle.

Grüße
Andreas

[Dennis]

Hi @all!

also das mit den flexiblen html Befehlen versteh ich.

prima

Mit css und XML ist jedoch auch Flexibilität zu erreichen (nur wie?):

in dem du die Sachen da mit prozentualen Angaben versiehst: width:100% zum Beispiel
Allerdingst musst du schauen, was das Elternelement ist!!
Schau einfach mal in meinem Posting weiter unten in diesem Thread.
Steht auch sehr gut in selfHTML im Kapitel CSS - nur so am Rande *g*

Mit css nur über mehrere vielleicht auf unterschiedliche Auflösungen hin ausgerichtete css Dateien, die dann passend zur Auflösung geladen werden? Ist das der Kern? Oder über eine andere Methode?

Das würde natürlich auch gehen, aber es ist eher so:
Ein FESTES Design ist und bleibt fest: wenn der Besucher ne größere Auflösung hat, ist da halt einfach irgendwo freier Platz - rechts, wenn die Texte alle links ausgerichtet sind.

Man kann aber auch verschiedene CSS Dateien laden, ist aber nicht gut,
weil dazu Javascript benötigt wird:

if( Jezt kommt die Formuliereung für Auflösung 800x600) {
  document.write('<link rel="stylesheet" src="...");
}
elseif( Tja, und das kannste jetzt für jede Auflösung machen ...

Ist aber, wie du siehst, zu umständlich. Ich würds nicht machen.
Noch fragen?

MfG, Dennis.

[matze]

ja doch noch fragen ;-):
es ist so, ich hab keine praktische Erfahrung mit css oder xml, und möchtes auch nicht praktisch umsetzen, sondern brauche nur ein Verständnis dafür, was die wesentliche Technik bei der Umsetzung von flexiblem Design mit css und xml ist.

Für css gänge es also auf folgende Arten:
ausgelagerte Datei (hat Jakob Nielsen so geschrieben, deswegen kam ich darauf ;-)), nachteil hier nur: das design an sich bleibt statisch *je nachdem, welche Datei geladen wird

die Befehle in der ausgelagerten Datei relativ verwenden, z.B 100%. Das wäre dann aber eigentlich nix anderes, als direkt flexible html befehle zu verwenden, oder?

noch eine Möglichkeit?

xml:
Was ist hier das wesentliche? *davon versteh ich ja gar nix :-(

[Andreas Schneider]

Hallo Dennis,

wenn der Besucher ne größere Auflösung hat, ist da halt einfach irgendwo freier Platz - rechts, wenn die Texte alle links ausgerichtet sind.

Nicht zwangsläufig. Warum die Auflösung nichts mit der Größe des Browserfensters - und damit mit dem benötigten Platz - zu tun hat findest Du hundertfach im </archiv/>.

Man kann aber auch verschiedene CSS Dateien laden, ist aber nicht gut,
weil dazu Javascript benötigt wird:

Nicht unbedingt. Unterschiedliche CSS-Dateien kann man auch serverseitig einbinden.

Grüße
Andreas

[Dennis]

Hi @all!

Man kann aber auch verschiedene CSS Dateien laden, ist aber nicht gut,
weil dazu Javascript benötigt wird:
Nicht unbedingt. Unterschiedliche CSS-Dateien kann man auch serverseitig einbinden.

Sry, mein Fehler: Ich meinte irgendeine Scripttechnik, PHP usw. geht natürlich auch.

MfG, Dennis.

[rainer groth]

Hallo Matze,

vielleicht kann ich fuer etwas Klarheit sorgen ;-)

(X)HTML zeichnet Inhalte logisch aus - eine Ueberschrift ist eine Ueberschrift (h1-h6), ein Abschnitt eines laengeren Textes ist ein Absatz p usw.
Die Interpretation dieser Auszeichnungen ("Markierungen") bleibt der Software des Nutzers ueberlassen. Das meint z.B., dass die Inhalte so dargestellt werden, dass sie ins Browserfenster passen, aber auch, dass die Inhalte entsprechend "erklaerend" vorgelesen werden (Screenreader).

CSS-Anweisungen teilen der User-Software mit, wie der Autor/Produzent der Website die Inhalte dargestellt haben moechte - falls die Software dazu in der Lage ist (UND es auch darf), werden die Inhalte entsprechend dargestellt - ungeachtet der tatsaechlichen Gegebenheiten (Platz etc.).

Dies kann natuerlich zu unwillkommenen Effekten fuehren - eine 8px grosse Schrift mag einem Normalsichtigen bei einer 800er-Bildschirmaufloesung gross genug erscheinen, einem Kurzsichtigen mit 1400er-Aufloesung aber wohl zu klein ;-(

Ausweg aus diesem Dilemma bieten die Moeglichkeiten, in CSS Darstellungsanweisungen zu definieren, die auf den vom User bestimmten Darstellungs-Leitlinien aufbauen:

• Verwendung von relativen Groessenangaben mit em bzw.%, die vom User skalierbar sind;
• Definieren von (ausreichend) kontrastierenden Farbangaben fuer Vordergrund UND Hintergrund;
• Erhalten der entscheidenden Darstellungs-Eigenschaft von (X)HTML, naemlich der Anpassung an die Darstellungs-Gegebenheiten (Fenster schmal? Dann wird halt frueher umgebrochen).

Dies ist natuerlich fuer Produzenten, die eine Website mit einer Illustriertenseite verwechseln schwer zu verstehen, jedem WWW-Nutzer, der schon einmal mit der Nase am Monitor klebte allerdings glasklar ;-)

Ich hoffe, Dir weitergeholfen zu haben.

gruesse
rainer groth