Header einer Webseite gestalten

[Anton]

Hallo,

ich habe mir eine kleine Webseite gebaut. Die Webseite basiert auf einem CSS-Layout. Konkret handelt es sich darum um ein zweispaltiges Layout mit einem Header und einem Footer. Es gibt gibt vier DIV-Container (header, footer, column1 und column2).

Soweit ist die Seite fertig... aber trotzdem so wirklich toll wirkt sie noch nicht. Nach einem Vergleich mit anderen Seiten ist mir klar geworden, dass es wohl daran liegt, dass meine Seite noch keinen grafisch gestalteten Header besitzt.

1.)
Ich würde jetzt also gerne einen grafischen Header basteln und diesen in den DIV-Container header stecken. Könnt ihr mir vielleicht sagen wo ich weitere Informationen diesbezüglich finde z.B. ein Tutrial das beschreibt wie ich mir solch einen Header am besten baue. Am besten wäre es wenn sich dieses Tutorial auf Gimp beziehen würde. In dieses geile Programm hab ich mich in letzter Zeit etwas eingearbeitet.

2.)
Manchmal sieht man Webseiten die eine halb transparente Grafik haben die sich teilweise im Header und teilweise in anderen Bereichen der Webseite befindet. Wie kann ich es denn hinbekommen, eine Grafik in meine Webseite zu packen, die sich nicht nur auf einen DIV-Container beschränkt?

[suit]

Nach einem Vergleich mit anderen Seiten ist mir klar geworden, dass es wohl daran liegt, dass meine Seite noch keinen grafisch gestalteten Header besitzt.

ein grafischer header muss nicht unbedingt sein

sieht dich einfach mal um und schau was dir gefällt, wenns dann ein konkretes problem bei der umsetzung mit gimp gibt, stelle die frage - etwa "wie erstelle ich ein rechteck mit abgerundeten ecken in gimp"

Manchmal sieht man Webseiten die eine halb transparente Grafik haben die sich teilweise im Header und teilweise in anderen Bereichen der Webseite befindet. Wie kann ich es denn hinbekommen, eine Grafik in meine Webseite zu packen, die sich nicht nur auf einen DIV-Container beschränkt?

als hintergrund des übergeordneten elements

btw: hör auf in "kästen" zu denken, denke in strukturen ;)

[Beat]

1.)
Ich würde jetzt also gerne einen grafischen Header basteln und diesen in den DIV-Container header stecken. Könnt ihr mir vielleicht sagen wo ich weitere Informationen diesbezüglich finde z.B. ein Tutrial das beschreibt wie ich mir solch einen Header am besten baue. Am besten wäre es wenn sich dieses Tutorial auf Gimp beziehen würde. In dieses geile Programm hab ich mich in letzter Zeit etwas eingearbeitet.

Vor allem solltest du die Zugänglichkeit deines headers nicht zerstören, weder für langsichtige noch kurzhörige.
Was immer du also tust, sollte bestenfalls ein Hintergrundbild werden, vor dem dein <h1>Titel</h1> seine ganze Usability entfalten darf.

Ich arbeite nicht mit Gimp, sondern eher mit Inkscape.
Gute Tutorials gibt es hier: http://screencasters.heathenx.org/

2.)
Manchmal sieht man Webseiten die eine halb transparente Grafik haben die sich teilweise im Header und teilweise in anderen Bereichen der Webseite befindet. Wie kann ich es denn hinbekommen, eine Grafik in meine Webseite zu packen, die sich nicht nur auf einen DIV-Container beschränkt?

Diese "Manchmal"-Seiten sollte man zuerst bezüglich ihrer Zugänglichkeit prüfen, bevor man ihre oft fragwürdigen Methoden (absolute positionierung) nachzuahmen versucht.

Am Wunsch nach Schein ist noch mancher Seite Sein eingegangen.

mfg Beat

[Gunnar Bittersmann]

@@Beat:

Was immer du also tust, sollte bestenfalls ein Hintergrundbild werden

?? Vielleicht eher <h1><img src="Titel" alt="Titel"/></h1>

Live long and prosper,
Gunnar

[Beat]

Was immer du also tust, sollte bestenfalls ein Hintergrundbild werden

?? Vielleicht eher <h1><img src="Titel" alt="Titel"/></h1>

Ich finde es als nicht Screenreader User immer etwas umständlich, wenn ich mir den Quellcode anzeigen lassen muss, um dann den kanonischen Webseitentitel (für Zitatzwecke) aus dem alt Attribut stehlen muss.

Ich bin nicht der Meinung, dass ein Bild einen Titel repräsentiert.

mfg Beat

[Gunnar Bittersmann]

@@Beat:

Du willst den Inhalt des 'h1'-Elements mit CSS verstecken? Was bekommen Nutzer ohne Bildanzeige (aber mit Interpretation von Stylesheets) zu sehen? Nichts?

Was passiert beim Ausdrucken? Drucken ohne Hintergrundfarben und -bilder ist Voreinstellung in Browsern.

Ich bin nicht der Meinung, dass ein Bild einen Titel repräsentiert.

Warum nicht? Wenn das Bild eine Textgrafik ist, auf der genau dersebe Titel zu lesen ist?

Live long and prosper,
Gunnar

[Beat]

@@Beat:

Du willst den Inhalt des 'h1'-Elements mit CSS verstecken? Was bekommen Nutzer ohne Bildanzeige (aber mit Interpretation von Stylesheets) zu sehen? Nichts?

Die Ansicht des alt Textes war noch nie garantiert, und Browser geben sich keine Mühe, desen Text anzuzeigen, wenn ihnen irgend eine andere Eigenschaft in die Quere kommt.

Nein. Ich will den Inhalt des <h1> Elements nicht verstecken.
Ich habe eingesehen,das es keine kompatible Lösung gibt, resigniere und sage ganz einfach: Verwende keine Bilder als Ersatz für Text.
Die Lösung lautet schlicht: trenne Inhalt von Darstellung, lege den Titel als Text über den Hintergrund.

Ich bin nicht der Meinung, dass ein Bild einen Titel repräsentiert.

Warum nicht? Wenn das Bild eine Textgrafik ist, auf der genau dersebe Titel zu lesen ist?

a) wegen der Inkompatibilitäten, und
b) Weil Text eine Abfolge von Codepunkten ist, mitunter also Information der Gattung Text.

mfg Beat

[ChrisB]

Hi,

Du willst den Inhalt des 'h1'-Elements mit CSS verstecken? Was bekommen Nutzer ohne Bildanzeige (aber mit Interpretation von Stylesheets) zu sehen? Nichts?

Gaengiges Problem von Image Replacement-Techniken, ja.
Aber mit guenstigen Ansaetzen vermeidbar, wenn auch ggf. unter Zuhilfenahme eines zusaetzlichen Elements.

Was passiert beim Ausdrucken? Drucken ohne Hintergrundfarben und -bilder ist Voreinstellung in Browsern.

Muss man dir erklaeren, dass es Druckstylesheets gibt?

MfG ChrisB

[Maik W. aus E.]

Tach auch ChrisB,

Gaengiges Problem von Image Replacement-Techniken, ja.
Aber mit guenstigen Ansaetzen vermeidbar, wenn auch ggf. unter Zuhilfenahme eines zusaetzlichen Elements.

Das dachte ich lange auch, allerdings habe ich zur Lösung des Problems, das bei Nutzern der Kontrats-Schwarz Farbprofils auftritt: "Imagereplacement nicht barrierefrei"
noch keine Idee gehabt...

Maik

[Anton]

Erstmal sorry wegen dem Doppelposting... kommt nicht wieder vor. Jetzt schreib ich wieder an der richtigen Stelle weiter ;-)

Ich würde mir sehr gerne einen Header bauen, der ähnlich aussieht wie in diesem Tutorial:

GIMP

Ich würde das ganze gerne so machen, das es keine Probleme mit verschiedenen Auflösungen gibt, das es bezüglich STRG und + korrekt funktioniert. Des weiteren soll es natürlich auch optimal nach den neuesten Richtlinien gelöst sein.

Ich weiß nicht so wirklich was ich dazu lesen soll bzw. was ich nicht lesen soll. Wäre es jetzt unsinning diese Gimp-Tutorial zu lesen?