Einzelnen Beitrag anzeigen
Alt 16.05.2003, 12:28   #1 (permalink)
Atomic
Administrator 10 Jahre hx3
5000 Beiträge
 
Benutzerbild von Atomic
 
Registriert seit: 21.02.2003
Ort: Freiburg im Breisgau
Alter: 32
Beiträge: 5.139
Atomic eine Nachricht über ICQ schicken Atomic eine Nachricht über Skype™ schicken
Standard

So hier nun ein Artikel über meine Erfahrungen hinsichtlich "Wie bekomme ich mein Design so wie ich mir es auch Vorstelle in Html hinein?"!

Stilmittel:

- Grafiken
- Html Tabellen
- Cascading Style Sheets
- Framesets

Das mit Abstand wichtigste darunter sind die Tabellen. Sie sind das A und O des Webdesigns. Wer das nicht 100% beherscht kriegt auch kein gutes Design hin.

Allerdings wirken die Elemente abgesehen von den Framsets (das ist eh eine optionale Sache und man sollte darüber bevor man sie nutzt die Schwächen und Vorteile kennen + wie man die Schwächen kompensiert) wie Multiplikatoren.

Cascading Style Sheets (kurz: CSS) werde ich in diesem Artikel nicht besprechen, abgesehen von ein Tricks.
Eine sehr gute Website dazu findet ihr unter: http://www.style-sheets.de/
Die Website ist Deutsch und sehr gut Strukturiert, ohne störende Elemente.
CSS wird zukünftig eine sehr große Rolle spielen das der zukünftige Standart XHTML nur noch Formatierungen via CSS zulässt.

Nun aber zu Html:

Ein Html Tag besteht bekanntlich aus "<TagName " + einer Reihe von Attributen (AttributName="Wert") und ">"
Viele Webdesigner lassen oft die Anführungsstriche vor und nach dem Wert weg.
Das mag zwar auch gehen solange der Wert nicht ein Text ist, ist aber falsch.
Der Browser darf weil es solche Leute gibt in jedes Attribut in jedem Html-Tag, in jedem Html Dokument, bei jedem Aufruf, an jedem Tag, in jedem Jahr, bei jeder Person das Dokument doppelt abtasten. Was da an Rechenzeit gepsart werden könnte ist Phänomenal. Aber es geht nicht nur um die Browser, es geht auch um die Suchmaschienen und die CGI Scripte die mit diesen Html Quellcodes arbeiten müssen und zum Teil diesen Anforderungen nicht gewachsen sind.
Deshalb bleibt beim Standart! Immer!

Html hat die Eigenschaft (fast) alle Attribute optional zu machen.
Was aber viele nicht bedenken: Diese Attribute sind im Hintergrund immer noch vorhanden in ihren Default werten.
Wenn ihr also bei einer Tabelle keine "border"-Angabe macht wird je nach Browser eine andere Voreinstellung diese ersetzen.

Leider sind viele dieser Attribute nicht ausrechend, irrational oder überflüssig. Das liegt daran das Html schon sehr als ist und nicht mehr Weiterentwickelt wurde. XHTML wird hier für Ordnung sorgen.
XHTML und Html sind in dem Sinne auch vergleichbar wie die neue Deutsche Rechtschreibung mit der alten.
Bei der Alten schreibt man ein Wörter mal mit "ss" und mal mit "ß", auch wenn man sie gleich spricht. Bei der neuen herscht Ordnung.
Ich für meinen Teil habe mich zwar bereits an Html gewöhnt aber ich bin auch gerne bereit neue Wege zu gehen. Den neben der Umgewöhnung was als kleinen Nachteil zu betrachten ist gibt es doch wieder einige Vorteile die man mit der neuen Sprache nutzen kann, wie z.B. bessere Integration von Multimedia Objekten.

Lasst uns beginnen:
Nun denn fange wir einfach mit einem sehr heufig auftretenden Problem an: "Hilfe meine Haupt-Tabelle ist immer egal was ich Angebe ein Stück weit vom oberen und linken Browserfensterrand entfernt!"
Der einfachste Weg ist im Body Tag leftmargin="0" und topmargin="0" anzugeben und schon ist das "Problem" Geschichte.

Tabellenverschachtelung und über die Maximalgröße des Quellcodes:
Tabellen können theoretisch unendlich verschachtelt werden. Verschachteln bedeutet hier: Eine Tabelle in eine andere hineinsetzen.
Um ein anspruchsvolles Design umzusetzen kommt man nicht um diese Methode herum. Tabellenverschachtelung ist bin ins unendliche möglich (zumindest theoretisch), dehalb spart auch nicht daran.
Spart nicht an Quellcode. Schlanke Websites sparen zwar an Ladezeit und Traffic aber der Traffic ist so gering und ein gutes Design so wichtig das dieser Grund bei einer normalen Website garnicht erst beachtet werden darf. Außerdem gibt es schon seit längerem das Feature Html Seiten komprimiert (gezipt) an den Browser schicken zu können.
Dieses Feature wird ab IE 4.0 unterstützt (Netscape und Motzilla hab ich nicht im Kopf) und ihr wisst ja wie hoch die Komprimierungsraten bei Texten liegen (oftmals bei 90%!).
Wenn ihr auf dieses Feature baut müsst ihr aber auch keine Angst davor haben das eure Website in einigen Browsern (besonders Exotische) nicht mehr betrachtbar ist, denn Websprachen wie PHP erkennen automatisch ob ein Browser komprimierte Html Seiten akzeptiert oder nicht. Um das Feature nützen zu können muss man das dem Webserver klarmachen. Wie das bei PHP geht und was man darüber wissen sollte könnt ihr im Programierer Bereich in diesem Forum im Tip Nr: 5 nachlesen. (Möglich das der Tip Nr: 5 erst in ein paar Tagen freigeschalten wird.)

Ränder und Freiräume in Tabellen.
Beginnen wir bei den Rändern.
Für einen Rand muss man die Pixelbreite mit dem Attribut border angeben. border="1" würde also einen 1px (px=Abkürzung für Pixel= Breiten Rand erzeugen. Ja das stimmt nicht ganz denken jetzt Einige.
Die Wahrheit ist das es immer zwei Ränder gibt: Einen inneren und einen Äuseren..

*wieder eine pause einlegt*
Atomic ist offline   Mit Zitat antworten