Bildformat

Hallo ich möchte eine Website für mich aus Spass erstellen.

Welches Bildformat ist da am besten?

Vektorgrafik (svg)
oder doch eher Rastergrafik

Und wenn diese was dann? was ist platzsparend genug aber kann gut skaliert werden?

wie groß sollte ich zB eine Titelleiste abspeichern? reichen 1024 pixel breite oder soll ich doch auf nummer sicher gehn und größer machen?

----
ich möchte absichtlich kein existentes template verwenden sondern mir wirklich alles selbt erstellen
----

marco.b

Vektorgrafiken werden zur Zeit nicht hinreichend von allen Browsern unterstützt. Für das Web sind zur Zeit nur Png, Jpeg und Gif interessant.

Am besten machst du den Header variabel. Du kannst ein Logo beispielsweise vor einen Hintergrund legen, welcher horizontal getiled wird. Siehe CSS.

ja mit css und so weiter bin ich zumindest grundlagenmäßig vertraut, was ich mich frage ist was passiert wenn ich zB ein 1024 px bild als leiste verwenden will, in der html-datei die größe mit 100% angebe und dann ein benutzer, der eine höhere bildschirmauflösung hat, die seite anschaut

sieht er das ganze dann stark pixelig? wie groß muss ein bild sein, dass es unter allen bedingungen gut aussieht aber nicht unendlich viel speichertplatz wegnimmt?

marco.b

Das wirst du nicht hinbekommen. Du kannst schlecht mit einem Bild allen Auflösungen von 1024... bis 2048... gerecht werden!
Entweder wird dein Header zu breit oder du hast einen riesigen, weißen Rand an der rechten Seite.

Lösung bleibt, wie bereits erwähnt, das Arbeiten mit Bereichen, die dynamisch gestreckt werden können, ohne Qualität zu verlieren. Das geschieht mit einfarbigen Hintergrundfarben oder mit getilten Grafiken. Damit kann man beispielsweise die letzte, vertikale Pixelreihe eines Bildes unendlich weit strecken.

das mit getilten grafiken hört sich gut an, nur dass ich nicht weiß was es heißt.
Googlen führt mich nicht gerade weiter, kannst du mich auf eine Tutorialseite verweisen?

Was verstehet man untwer streckbaren Bereichen? divs oder ...?

marco.b

http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_image

marco.b schrieb:

Lösung bleibt, wie bereits erwähnt, das Arbeiten mit Bereichen, die dynamisch gestreckt werden können, ohne Qualität zu verlieren. Das geschieht mit einfarbigen Hintergrundfarben oder mit getilten Grafiken. Damit kann man beispielsweise die letzte, vertikale Pixelreihe eines Bildes unendlich weit strecken.

Wie das funktionieren soll, würde mich nun aber auch einmal interessieren? Es wird keine letzte Pixelreihe unendlich weit gestreckt, sondern das Bild wird einfach immer wieder neben- bzw. untereinander angezeigt (je nach repeat-Einstellung).

Ansonsten alles richtig soweit. Fixe Graphiken für nicht-fixe Designelemente sind immer eine Katastrophe.

und was hindert dich da dran ein neues image aus der letzten pixel reihe zu erstellen und dieses zu "tilen"?

marco.b

árn[y]ék schrieb:

Wie das funktionieren soll, würde mich nun aber auch einmal interessieren? Es wird keine letzte Pixelreihe unendlich weit gestreckt, sondern das Bild wird einfach immer wieder neben- bzw. untereinander angezeigt (je nach repeat-Einstellung).

Natürlich wird nichts gestreckt, ich habe den optischen Eindruck nur beschrieben, den man erreichen kann.

hmm ,
also bei mir is grad auch so hässlich, das bild einfach öfter nebeneinander dargestellt, wie genau erreiche ich jetzt den "Gestreckt"-effekt, da mein hintergrundbild noch einen farbverlauf beinhaltet, kann ich mir vorstellen, dass
die letzte pixelreihe zu kopieren nicht besonders schön aussieht.

SVG stellt wirklich noch keine gute ALternative dar?

Ansonsten... was kann ich tun?

marco.b

NEIN, Svg würde DIE Lösung darstellen, wenn die Herren von Microsoft endlich eine native Svg-Implementierung in den IE einbauen würden. Und selbst dann wären viele noch jahrelang mit dem IE6 unterwegs. Von daher: Halte dich an Rastergrafiken.

Zum Strecken: Strecken kannst du den Farbverlauf dann schön, wenn er vertikal verläuft. Dann liegt ja in jeder horizontalen Pixelreihe die selbe Farbe. Du kannst dann die letzte vertikale Pixelreihe als Bild abspeichern und dies tilen. Es gibt aber natürlich auch interessantere Tile-Muster. Google doch mal nach ein paar CSS Designs.

Die Meister aller Designs präsentieren ihre Werke btw hier.
http://csszengarden.com/
Um derartige Designs zu erreichen, muss man aber schon geübt sein. Dennoch sieht man auch als Laie, was möglich ist.

ich hab mir jetzt erst mal beholfen indem ich margin vom body auf null gesetzt habe und das bild wieder als normales erstes element eingefügt habe, soll im na#ächsten css nicht streckbare hintergrundbilder unterstützt werde?

marco.b

Das macht nur bei Vektorgrafiken Sinn, was zur Zeit (siehe mein letztes Posting) sowieso nur bedingt eingesetzt werden kann.

Nico D.

Wieso so umstaendlich, wenn's auch einfach geht?

Du brauchst nur die Ecken als Bildobjekt einfuegen. Ansonsten genuegt es doch, wenn du in den Kopf- und Fusszeilen die Grafik (1 Pixel breit) als Hintergrund einbindest und entsprechend horizontal wiederholen laesst. Damit wirst du allen Aufloesungen gerecht, auch noch in 10 Jahren...

marco.b

Die Ecken? Welches ganz bestimmte Design hast du dabei im Sinn? Was ist an deiner Vorgehensweise einfacher, als zwei Grafiken einzubinden?

Nico D.

Etwa dieses Prinzip:

+-------+
|       |
|       |
+-------+

+ = Eckgrafik
- = Hintergrund horizontal (Header / Footer)
| = Hintergrund vertikal (Seitenraender)

Konkret in einem Beispiel:

<html>
<head>
<title>Header / Footer</title>
<style type="text/css">
<!--
table         { background: none; border-collapse: collapse; }
table, td, th { border: none; }
.header       { background-image:url(gheader.png); background-position: center;
                background-repeat: repeat-x; }
.footer       { background-image:url(gfooter.png); background-position: center;
                background-repeat: repeat-x; }
.side         { background-image:url(gside.png);   background-position: center;
                background-repeat: repeat-y; }
//-->
</style>
</head>
<body>
<table>
<tr>
<th><img src="gedgetl.png" alt=""></th>
<th class="header" colspan="2"><center>&Uuml;berschrift</center></th>
<th><img src="gedgetr.png" alt=""></th>
</tr>
<tr>
<td class="side" rowspan="3">&nbsp;</td>
<td>Zeile eins, Position eins</td>
<td>Zeile eins, Position zwei</td>
<td class="side" rowspan="3">&nbsp;</td>
</tr>
<tr>
<td>Zeile zwei, Position eins</td>
<td>Zeile zwei, Position zwei</td>
</tr>
<tr>
<td>Zeile drei, Position eins</td>
<td>Zeile drei, Position zwei</td>
</tr>
<tr>
<td><img src="gedgebl.png" alt=""></td>
<td class="footer" colspan="2">&nbsp;</td>
<td><img src="gedgebr.png" alt=""></td>
</tr>
</table>
</body>
</html>