Hallo,
Ich habe mithilfe von Photoshop ein Design für eine Webseite erstellt. Die Seite ist für eine Jahrgangsstufe 12 eines Gymnasiums, demnach eine mit dem Inhalt Abitur 08. Dazu habe ich mir meine Gedanken gemacht und da ich denke, dass man in der Oberstufe weniger an Hausaufgaben und einem besonders seriösen Dasein interessiert ist, als an Partys usw. habe ich das Design etwas locker gewählt. Am Anfang ist mir das Thema Sommer in den Sinn gekommen, was das Layout auch teilweise wiederspiegelt. Zwar sind mir Ratschläge für das Layout auch sehr willkommen, da ich jetzt in der Anfangsphase alles noch ändern kann, jedoch besteht meine Frage eher in der weiteren Herangehensweise an das Problem. Was ist die sinnvollste und auch professionellste Methode dieses Layout zu einer fertigen Webseite zu gestalten. Ich habe schon Erfahrung in dem Bereich XHTML und CSS Design (auch in PHP habe ich meine Skripte bis jetzt noch alle selbst schreiben können), jedoch habe ich bislang meine Probleme mit einigen Div-Elementen gelöst, denke aber nicht, dass das die beste Variante war. Auch will ich natürlich auf Dinge, wie das Verhalten der Seite bei größeren Schriftarten achten, d.h. alles was in dem Forum "Barrierefreiheit" so schön untergebracht ist. Was denkt ihr, wie fange ich am besten an?
Falls ihr euch fragt, warum ich diese Art von Fragen stelle... Es ist so, dass ich meine letzte Webseite, nach dem Abschluss der Arbeiten im Webseitencheck eingestellt habe. Dabei habe ich aber einige Hinweise bekommen, was ich hätte besser machen können, habe sie aber teilweise nicht alle verstanden und konnte eig. sowieso nichts mehr an der schon fertigen Webseite ändern, ohne komplett von vorne zu beginnen. Dies will ich vermeiden.
Das Design habe ich als verkleinerte Version angehangen im gif-Format angehangen. Die Originalmaße entsprechen ungefähr denen eines IE-Fensters bei der Auflösung 1024x768, d.h. in der Breite ist die Seite kleiner. Die Höhe soll sowieso je nach Inhalt größer oder kleiner sein.
Ich danke schon jetzt für jede Hilfe !
MfG Jan

Angehängte Grafiken

abi08_design_verkleinert.gif (38,1 KB, 81x aufgerufen)

In HTML stehen dir bestimmte Element zur Verfügung (Überschriften, Absätze, Listen usw.). Betrachte die Site als ein Dokument und verwende diese Elemente, um die Elemente der Site umzusetzen. Das CSS kommt ganz zum Schluß.

Soviel Markup wie nötig, sowenig wie möglich.

Ich will nur mal ein paar Stichworte geben, falls sich dann noch Fragen ergeben kann man die ja immer noch klären.

Ich würde dir erstmal eine feste Breite von 960px empfehlen (wenn du die Seite an 1024x768 anpassen willst). Das ganze dann zentriert, würde deinem (symetrischen) Layout entgegenkommen.

Dann würde ich das ganze auf den ersten Blick in vier Bereiche unterteilen. Header - Navigation - Inhalt - Footer.

Hilfe zur Umsetzung dieser Struktur findest du z.B. hier

Zum Design: In meinen Augen wirkt das ganze extrem wuchtig/groß. Mag daran liegen, daß ich grundsätzlich auf filigranere Sachen stehe. Obwhl ich denke, daß andere das auch so sehen würden.

__________________
Gruss, sumone

IE...

Genau das würde ich nicht tun (beides). Wenn du dich von den runden Ecken (die mir ehrlich gesagt nicht soo sher gefallen) trennen kannst, vereinfacht sich das Ganze ungemein. Dann bekommst du schon mit Hintergrundbildern ein flexibles Design, mehr braucht es nicht.

Aber ich würde mich erstmal an das HTML setzen. Das sollte nicht lange dauern. Mach dir mal lieber über das CSS noch keine Gedanken. Schreib nur eine Testseite, in der alle Sorten Inhalt vorkommen (echte Tabellen, Listen, Bilder, natürlich Links, was auch immer).

Lektüre: http://www.vorsprungdurchwebstandard.../retro-coding/, http://jendryschik.de/wsdev/einfuehrung/

Und? Wie läuft’s so?

hallo,
tut mir leid, dass ich mich nicht mehr gemeldet habe...
ich habe eingesehen, dass das design wohl wirklich zu wuchtig und zu kitschig ist. Deswegen habe ich mich erneut drangesetzt und etwas neues entworfen. Diesmal schlicht. Ich habe auch angefangen, dass XHTML und CSS zu schreiben, aber bin nicht sonderlich weit, da ich immer so viele Hausaufgaben aufkrieg ^^ Also, die folgende Seite ist noch kein bisschen validiert und wahrscheinlich sind auch unzählige CSS Einträge überflüssig. Außerdem werden dem Design an einigen Stellen noch Abstände hinzugefügt.
Ansonsten:
Webseite
Danke für die Antworten, die haben mir sehr geholfen !
MfG Jan

Das sind ein paar divs zuviel. Aus .titel kannst du h3 machen.

Es kann sogar sein, daß du dir die divs für die einzelnen „Newsboxen“ sparen kannst, wenn du Überschrift und Inhalt lückenlos aneinanderfügst.

ISO im head würde ich kleinschreiben, für h1 sowie die Menülinks würde ich mir eine Möglichkeit einfallen lassen, die Grafiken per CSS einzubinden, damit man ohne CSS und/oder Bilder den Text sieht.

Hallo,
Ich habe das ganze jetzt mal weitergebaut. (Wenn auch mit einem anderen Design, was jetzt aber erst einmal endgültig sein soll.) Leider habe ich noch mehrere Probleme mit Abständen etc. Die Startseite sieht im Firefox jetzt schon so aus wie sie aussehen soll (zumindest ungefähr, ein paar Abstände bei dem Formular müssten noch geändert werden). Jedoch wird jetzt das Impressum falsch dargestellt. W3C meldet bis jetzt mal keine Fehler aber ich denke dass ich einige Sachen noch ändern müsste um Barrierefreiheit zu gewährleisten und alles so anzeigen zu lassen wie ich es gerne hätte. Vll. kann jemand drüberschauen und mir sagen was ich in CSS besser anders schreiben sollte und was an der Struktur falsch ist. Danke schon mal
Hier ist die Adresse: http://superman89.funpic.de
CSS Datei könnt ihr ja über den Validator einsehn.
Jan

Ja, auf dieses Impressum hab’ ich gewartet. Die Absätze 1. bis 5. kannst du weglassen.

Was wird falsch dargestellt?

Sowas wie „Startseite“ wäre ganz angenehm, „aktuelles“ suggeriert einem nicht, daß es da zum Anfang geht.

Die schwarzen Linien links und rechts gehen nicht bis zur gelben Fußzeile runter, wenn der Inhalt zu lang ist.

Geht es nicht auch ohne #contentlinks?

Hast du das CSS mal durch den Validator gejagt? Stell im FF mal eine andere Hintergrundfarbe ein (bei den Einstellungen).

Die leere h1 ist gar nicht schön. Da sollte Text rein.
Die Bilder in der Navi sollte man besser über CSS einbinden (das gilt für alle verwendeten Grafiken).

Die Liste in der Fußzeile gefällt mir gar nicht. Da du sowieso mit einer festen Breite arbeitest, kannst du einfach dem a display:block geben und dir so das footer-div sparen und nur ein Hintergrundbild verwenden, die linke Randgrafik brauchst du nicht extra.

Wenn jetzt jemand von den Formular-Insidern hier etwas zu input und label sagen könnte, dann wäre das vorerst alles.

Hallo,
Danke schon mal für die Antwort.
Jedoch ist das nicht alles was mir an meiner Arbeit noch nicht gefällt.
Die Breite der h2 wollte ich ja eig. auf 100% setzen, damit sie sich je nach Inhalt anpasst. Das Problem ist nur, dass der Border da wohl noch mal drauf gerechnet wird und deswegen das ganze zu lang ist. Wenn ich dann das ganze auf 96% oder so setze dann geht das mit Border, jedoch habe ich ja auch Seiten, die nicht in 2 Teile geteilt werden sollen und da ist das ganze dann zu kurz. Ein weiteres Problem ist die Darstellung im Internet Explorer. Da sieht das ganze weniger gut aus und ich weiß nicht warum. Die von dir angesprochenen Probleme werd ich beseitigen, wenn ich aus der Schule wieder da bin. Danke für deine Hilfe! Bis Dann