zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Design fertig aber welche Herangehensweise

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.08.2006, 19:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.06.2006
Beiträge: 12
JanW1989 befindet sich auf einem aufstrebenden Ast
Standard Design fertig aber welche Herangehensweise

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
Dateityp: gif abi08_design_verkleinert.gif (38,1 KB, 81x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.08.2006, 00:27
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.326
E|H befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.08.2006, 00:32
Benutzerbild von sumone
Neuer Benutzer
neuer user
 
Registriert seit: 15.09.2004
Beiträge: 24
sumone befindet sich auf einem aufstrebenden Ast
Standard

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...

Geändert von sumone (16.08.2006 um 00:34 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 16.08.2006, 00:34
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.326
E|H befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von sumone
Ich würde dir erstmal eine feste Breite von 960px empfehlen (wenn du die Seite an 1024x768 anpassen willst).
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/

Geändert von E|H (16.08.2006 um 00:38 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 17.08.2006, 23:49
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.326
E|H befindet sich auf einem aufstrebenden Ast
Standard

Und? Wie läuft’s so?
Mit Zitat antworten
  #6 (permalink)  
Alt 18.08.2006, 08:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.06.2006
Beiträge: 12
JanW1989 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 18.08.2006, 19:31
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.326
E|H befindet sich auf einem aufstrebenden Ast
Standard

Code:
<div id="inhalt">
				<div id="inhalt_links">
<h2>Aktuelles</h2>
<div class="newseintrag">
<div class="titel">Feten Gremium gegründet</div>
<div class="inhalt">
Es wurde von den Stufensprechern ein Feten Gremium gegründet, dass nun hauptsächlich für die Organisation und Planung von Stufenfeten oder sonstigen Feierlichkeiten verantwortlich ist. Mitglieder sind Jan Wessels, Moritz Wernecke und Jakob Springorum.
</div>
</div>
				</div>

				<div id="inhalt_rechts"></div>
			</div>
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.
Mit Zitat antworten
  #8 (permalink)  
Alt 26.08.2006, 15:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.06.2006
Beiträge: 12
JanW1989 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 27.08.2006, 18:23
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.326
E|H befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.08.2006, 08:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.06.2006
Beiträge: 12
JanW1989 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
design automatisch verlängern elias1993 CSS 4 06.05.2011 20:47
Design Darstellung dessauer CSS 22 03.05.2010 16:46
Design Scrollbalken in IE FF und O (mit Bildern) MarkusStar CSS 1 08.03.2009 15:27
Was haltet ihr von Design? tobik999 Offtopic 10 29.11.2008 00:03
Sitecheck: Barrierearm - Design - Ajax Schmidt Site- und Layoutcheck 16 21.08.2008 21:06


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:30 Uhr.