Webmaster Forum Logo Part 1 Webmaster Forum Logo Part 2
Webmaster Forum Logo Part 3
     
 
  :: Anmeldung

Benutzername:

Registrierung...

Passwort:

Passwort vergessen?

angemeldet bleiben


  
  :: Umfrage
Welche sozialen Netzwerke benutzt du regelmäßig?

 Facebook
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 73%
 keines
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 21%
 Google+
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 18%
 Twitter
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 12%
 Xing
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 6%
 schülerVZ
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 4%
 meinVZ
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 3%
 studiVZ
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 3%
 MySpace
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 2%
 LinkedIn
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 2%

 ges. 707 Stimmen
 
  :: Buttons

Valid XHTML 1.0 Transitional

Lieber Besucher, herzlich willkommen bei: WebmasterWork. Falls dies dein erster Besuch auf dieser Seite ist, lese dir bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

Gimli

Kaiser

Dabei seit: 12.02.2003

Beiträge: 1 375

 

1 Zum Seitenanfang

Dienstag, 28. Dezember 2004, 21:46

Gute Designs mit CSS

So, hier geht es darum, wie man gute Websites macht.

Auf was sollte man weshalb achten, was ist CSS, wofür sollte ich es weshalb einsetzen, was sollte ich unter keinen Umständen machen usw.

Gut beginnen wir mit dem Allgemeinem:
  • Das Internet wurde für den Infomartionsaustausch begründet. Flash-Intros, Designerseiten welche aus mehr Grafiken als HTML bestehen usw widersprechen dem. Deshalb sollten solche Pages wenn möchlich vermieden werden.
  • Frames sind sehr sehr böse und sollten nicht verwendet werden. Ein sehr schönes Dokument dazu gibt es hier: http://www.subotnik.net/html/frames.html (Danke #gaby für den schönen Link)
  • Jeder sollte eine Website betrachten können sollen. "This Page ist optimized for Internet Explorer 6" und ähnliches sollte nicht sein. Es ist nicht schwer, eine Website so zu gestallten, dass sie in allen Browsern gut angezeigt wird. (Wie erfahrt ihr weiter unten)
  • Genauso Schwachsinnig ist es, die Website für eine bestimmte Bildschirmauflösung zu optimieren. Es gibt heute noch Leute, welche mit 800x600 Pixel surfen. Aber es gibt auch solche welche mit 1024 x 768 oder mit 1280x1024 oder mit ....


Wie sollte ich HTML schreiben?

  • Übersichlich, durch einrücken. Beispiel:

    PHP-Quelltext

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    <html>
      <head>
         <title>Titel</title>
      </head>
      <body>
        <div>
          Text
        </div>
      </body>
    </html>

  • Möglichst Valid, sprich möglichst so, wie die HTML-Befehle nach Standart aussehen sollten. Wenn man dies einhält, hat man schon viele Designfehler aus dem Weg geräumt.
    Hier kannst du deinen Quelltext auf Validität überprüfen: http://validator.w3.org/
  • Je weniger Grafiken, desto besser. Spart Traffic, ist freundlicher zu Modem-Surfern(Jaha, die gibts noch!) und Platzhaltergrafiken sind fehl am Platz, denn mit Textbrowsern (zB. lynx) sind Designs voll mit Platzhaltergrafiken hässlich anzusehen, weil deren alt=""-Text anstelle der Garfik angezeigt wird. Das heisst aber nicht, dass man bei Platzhaltergrafiken den alt=""-Teil weglassen sollte! Es ist besser, solche Platzhaltergrafiken ganz zu vermeiden.


Designs mit CSS, ohne Tabellen
Man sollte für Designs keine Tabellen verwenden. Tabellen wurden nicht als Design-Element gedacht, sondern als Informationsträger. Man sollte seine Seiten deshalb ohne Tabellen, mit CSS gestalten.

Was ist CSS? CSS steht für Cascading Style Sheets. CSS-Datein sind Datein, in welchen ausschliesslich Design-Vorgaben stehen (dh Textfarbe, Hintergrundfarbe, Schriftgrösse usw)
Diese Dateien werden dann mittels eines "Links" in die HTML-Dateien eingebunden (<link rel="stylesheet" type="text/css" href="style.css"> im <head>-Tag)
Das bietet mehrere Vorteile:
  • CSS_Dateien werden vom Browser nur einmal heruntergeladen. -> Spart Traffic
  • Bei Designänderungen muss nur eine Datei angepasst werden. Bei grossen Websiten ein nicht zu unterschätzender Vorteil.
  • Der Inhalt (HTML-Datei) ist ganz klar vom Design (CSS-Datei) getrennt. Dies trägt sehr viel zur Übersichtlichkeit in der HTML-Datei bei!

CSS-Dateien bieten noch weitere Vorteile. Man kann nämlich für jeden Ausgabetyp (Drucker, Bildschirm, Palm/Pocket PC, Phonetische Ausgabe für Behinderte usw) eine eigene CSS-Datei festlegen.

Ich kann dafür nur http://css4you.de/ empfehlen. Vor allem als Referenz sehr nützlich.

So, jetzt stehe ich an, weiss nicht was ich noch schreiben soll.
Verbesserungen & Erganzüngen sind erwünscht. Schliesslich wollen wir ja alle, dass es immer weniger schlechte Pages gibt ^^ (bleibt nur zu hoffen, dass den Thread hier auch einige lesen werden)

mfg Gimli
"Linux is evolution, not intelligent design." - Linus Torvalds

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Gimli« (7. März 2006, 19:05)

 

converged

Jungspund

Dabei seit: 03.01.2008

Beiträge: 20

 

2 Zum Seitenanfang

Sonntag, 24. Februar 2008, 17:13

so und nicht anders.

vorallem wird es interessant, wenn man versucht:
  • ein frameset, komplett mit CSS zu bauen
  • mit dem gleichen HTML - Markup verschiedene Styles zu entwerfen (siehe CSS Zen Garden )
  • anfängt php und css zu koppeln (z.B. Tag und Nacht - Style, Jahreszeiten - Style, usw...)
alles in allem das wichtigste helferlein des webdesigners.

und wer mit seinem stylesheet noch nicht zufrieden ist (weil es zu groß oder unübersichtlich ist, sollte sich das mal anschauen).
ansonsten hast du ja den chrashkurs CSS schlechthin geschaffen.

[edit: hab vorhins ausversehen einen neuen Thread (css-gebrabbel) erstellt. dieser kann auch gelöscht werden.]

...ich bin für ein sauberes Internet ... und du?
blackpage.wmw.cc
 

Rene82

Kaiser

Dabei seit: 08.08.2006

Beiträge: 1 231

 

3 Zum Seitenanfang

Sonntag, 24. Februar 2008, 23:29

Ich lege persönlich meine Dokmente immer im XHTML an.

PHP-Quelltext

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


Des Weiteren empfehle ich nur class="" zu verwenden. da das W3C doppelte IDs als einen Fehler betrachtet.

PHP-Quelltext

1
<div class=""></div>


Außerdem, um einfach den Downloadtraffic zu schonen (Wird eh erzeugt aber mancher speichert sich eine Seite auch gerne auf die Festplatte) lege ich eine Haupt-CSS an (import.css), in der folgendes drin steht:

PHP-Quelltext

1
<link rel="stylesheet" href="style/import.css" type="text/css" media="screen" />

PHP-Quelltext

1
2
@import url(style_all.css);
@import url(textformatierungen.css);


Beim Speichern der Seite, kann der Browser die @import url(); nicht interpretieren und speichert die NICHT ab. Das hat zur folge, das alles was importiert wird, nicht auuf die Platte geladen wird. Bilder, Formatierungen etc.

Ob das nun Userfreundlich ist oder nicht ist egal ;)

Achso, und um den Quellcode etwas zu säubern (nicht den Browserquellcode) erstelle ich PHP-Dokumente und importiere stellen, die in Websites auf jeder Seite zu finden sind. (Copyright, Navigation, Header etc.)

PHP-Quelltext

1
<?PHP include('zur_datei.php');?>


Was ich ebenfalls mache, sind PHP-Kommentare erstellen. Der Vorteil hierbei ist, dass diese Kommentare im Browserquelltext nicht sichtbar sind. Die Alten HTML-Kommentare kennt ja jeder:

PHP-Quelltext

1
<!-- HTML Kommentar -->


Ich empfehle jedoch diese:

PHP-Quelltext

1
<?php /*?> PHP-Kommentar <?php */?>



So, ich habe Fertig

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Rene82« (24. Februar 2008, 23:38)

 

Skittles

Moderator

Dabei seit: 14.02.2004

Beiträge: 3 019

 

4 Zum Seitenanfang

Montag, 25. Februar 2008, 08:49

wie wärs wenn irgendjemand mal einen schönen, ausführlichen eintrag für die knowleadge base daraus schreibt ...

~!__/
..o.o

This is Einkaufswagen.
Copy Einkaufswagen into your signature to help him on his way to world domination.
 

Sir Diego

Haudegen

Dabei seit: 14.01.2003

Beiträge: 511

 

5 Zum Seitenanfang

Montag, 21. April 2008, 10:11

Hallo,

[...]Des Weiteren empfehle ich nur class="" zu verwenden. da das W3C doppelte IDs als einen Fehler betrachtet.[...]

Das empfehle ich nicht, da ID's und Klassen 2 verschiedene Sachen sind. Das doppelte ID's als Fehler betrachtet werden, ist ja nichts schlimmes sondern nur korrekt, ID's soll es nunmal nur einmal in einem Dokument geben, damit man sie eindeutig zuweisen kann. Wenn man also einen Hauptkontainer hat beispielsweise "content" dann sollte man diesem schon die id="content" zuweisen und nicht class="content".

Hierzu ein Zitat von css4you.de:

Zitat

Damit ein Element innerhalb der Dokumentenstruktur eindeutig ist, darf eine ID nur einmal verwendet werden. Deshalb wird diese Art der Formatierung häufig in Zusammenhang mit Javascript verwendet.


Gruß Tim
 

Rene82

Kaiser

Dabei seit: 08.08.2006

Beiträge: 1 231

 

6 Zum Seitenanfang

Montag, 21. April 2008, 13:13

Das empfehle ich nicht, da ID's und Klassen 2 verschiedene Sachen sind. Das doppelte ID's als Fehler betrachtet werden, ist ja nichts schlimmes sondern nur korrekt, ID's soll es nunmal nur einmal in einem Dokument geben, damit man sie eindeutig zuweisen kann. Wenn man also einen Hauptkontainer hat beispielsweise "content" dann sollte man diesem schon die id="content" zuweisen und nicht class="content".


Schon wieder so ein 0815 Kommentar. Es mag zwar sein das du recht hast, aber nenn mir doch mal den grund warum das so ist wie du es sagst? Niemand anderes als ich muss doch meinen Quelltext verstehen? Also. Das thema hatten wir gestern schon!
 

Sir Diego

Haudegen

Dabei seit: 14.01.2003

Beiträge: 511

 

7 Zum Seitenanfang

Montag, 21. April 2008, 21:11

Das empfehle ich nicht, da ID's und Klassen 2 verschiedene Sachen sind. Das doppelte ID's als Fehler betrachtet werden, ist ja nichts schlimmes sondern nur korrekt, ID's soll es nunmal nur einmal in einem Dokument geben, damit man sie eindeutig zuweisen kann. Wenn man also einen Hauptkontainer hat beispielsweise "content" dann sollte man diesem schon die id="content" zuweisen und nicht class="content".


Schon wieder so ein 0815 Kommentar. Es mag zwar sein das du recht hast, aber nenn mir doch mal den grund warum das so ist wie du es sagst? Niemand anderes als ich muss doch meinen Quelltext verstehen? Also. Das thema hatten wir gestern schon!


Hey,

sorry ich wusste nicht das du so allergisch darauf reagierst wenn man deine Meinung nicht teilt. Das W3C hat den ID-Selector nicht einfach so eingefügt. Wenn man mit JavaScript arbeitet ist es zB. teilweise besser ID's zu verwenden. Oder hast du vielleicht schonmal etwas von Semantik gehört, manche Sachen sind einfach "Grammatik", die sind so damit es jeder verstehen kann, und nicht nur du. Bei Menschen mag das nicht so das Problem sein class und id zu unterscheiden, aber wie sieht es da mit Maschienen aus, wie sollen die das verstehen.

Ich möchte diese Diskussion nicht weiter führen, da ich nicht annehme, dass das mit dir geht.

Nur eins noch:

Du empfiehlst in deinem Beitrag nur Class-Selectoren zu verwenden und ich empfehle es dies nicht zu tun, das war noch lange kein Angriff auf deine Person.

Gruß Tim
 

brg19

Mitglied

Dabei seit: 17.11.2012

Beiträge: 33

 

8 Zum Seitenanfang

Freitag, 21. Dezember 2012, 15:34

Von inline-Styles würde ich abraten! (ziemlich offensichtlich, aber als ich noch ein html Anfänger war, da hab ich den Unterschied einfach nicht gewusst)
besonders den Inhalt nicht inline-stylen!
Guter Tipp: die website muss nicht gleich für smartphones geschrieben werden aber ich rate @media Attribute sehr nützlich um z.B.: Den Text vom Inhalt zu vergrößern.
Natürlich soll der Quellcode sinnvoll sein z.B.: ein header oben und in footer unten.
Html gut durchdenken bevor man es zig mal kopiert und enen anderen Inhalt einfügt.
Hier ist PHP mit include eine gute Lösung! :thumbsup: