balthier9999
Bekanntes Gesicht
- Mitglied seit
- 26.02.2007
- Beiträge
- 7.598
- Reaktionspunkte
- 0
Du hast schon Erfahrungen in HTML gesammelt, möchtest aber gerne alles rausholen, was möglich ist? Dann ist dieser Blog der richtige für dich!^^
(WICHTIGER HINWEIS: Aufgrund von Probemen mit dem BB-Code und der Darstellung, sind einige Quellcodes nicht korrekt wiedergegeben. Beispielsweise entstehen ungewollt Leerzeichen, z.B. "1 0" anstatt "10". Ich bitte darum, dies zu berücksichtigen.)
» Nachdem ich Lob und Beifall wegen meines Profils erntete, will ich nun zeigen, dass das Ganze eigentlich recht einfach war, und sogar Spaß macht, wenn man Lust hat. Natürlich könnte man sich ein beliebiges Tutorial aus dem Internet besorgen, doch leider gibt es dabei psychologische Probleme. Da ist zum Beispiel der Fakt, dass »User Dinge im jeweiligen Forum erfahren möchten, und nicht auf einer fremden Website«, und dass »Links deshalb in diesem Zusammenhang unbeliebt« sind. Ist eigentlich auch verständlich, denn warum wird in einem Webdesign-Hilfe-Forum auf eine andere Website verwiesen? Ein häufiger Fehler, der auch in anderen Bereichen vorkommt. Deswegen werde ich mal einen Einblick in mein Profil gewähren. Es ist mit Sicherheit nicht das beste, erst recht nicht von der Schreibweise des Codes^^, aber es beinhaltet für viele sicherlich interressante Dinge. Ich bin auch kein Profi in Sachen HTML, aber gerade deswegen wär´s möglich, dass dieser Blog verstanden wird.
Es folgen nun ein paar Erklärungen. Die sind zwar wieder mal ziemlich steif und trocken formuliert, sollten aber hoffentlich verständlich sein. Wer es trotzdem nicht versteht, oder keine Lust hat, sich durch den Wust durchzuarbeiten, der kann direkt zum letzten Teil springen... Der lautet: Mein Profil ? Schritt für Schritt
TAGS, UND HINWEISE:
» Fangen wir erstmal mit etwas Cynamite-Speziellen an: Die Profile sind 671px breit. Das kann wichtig sein, wenn ihr eine Tabelle genau auf Maximalbreite setzen wollt, oder für eigene Bilder etc.
? Außerdem sollten folgende Tags (so heißen die Dinger in den -Klammern) vergessen werden, da sie veraltet sind:
, , , ...
? Folgende Tags sind wohl am wichtigsten für euch:
Hier kommt Text rein, und zwar wenn möglich JEDER Text. Das Tag erzeugt einen Absatz, und ermöglicht dadurch automatisch Zeilenumbrüche. Dadurch wird der -Tag (Zeilenumbruch) unwichtig; aber keiner verklagt euch, wenn ihr trotzdem einsetzt^^... Korrekterweise sollte das Tag aber so geschrieben werden: (das gilt übrigens für alle Tags, die nicht durch ein End-Tag (z.B. ) geschlossen werden müssen, wie ...)
Diese Kombination definiert Layouttabellen, die euer Layout (größtenteils) bestimmen. gibt die gesamte Größe der Tabelle an, das steht für die vertikale Zeile, und die bestimmen letzlich den Inhalt; hier kommt der Text, die Bilder und alles andere hinein. Um es klar zu stellen: Es handelt sich nicht unbedingt um eine klassische Tabelle, denn von Natur aus haben diese Tags keine Rahmen, sprich man sieht nix im Browser, wenn man nix reintut. Das ganze ist insofern nützlich, da man die s auch nebeneinander platzieren kann (sh. Bild "Tabellen" unten). In meinem Profil ist das zum Beispiel bei dem Besucherliste-Kasten so: Oben ist eine einzelne mit dem Einleitungstext, unten findest 3 s nebeneinander... einmal die Ziffern, dann die User, dann das große Duffman-Bild. Ohne Tabelle wäre das wohl nicht möglich gewesen... Doch es gibt noch einige Sachen zu beachten:
Im Beispiel des Besucherkastens sieht der Code schematisch so aus:
Einleitungstext
...
Die s geben an, diese befindet sich in einer Zeile. Das colspan ="3" sagt dem Browser, dass in der nächsten Zeile 3 s sein werden. Das ist ganz wichtig, ansonsten klappt es nicht. Der Code geht dann so weiter:
...
Nummern
User
Duffmanbild
Die s umgeben gleich 3 s ? das bedeutet, diese 3 s werden in einer Zeile dargestellt, und durch das colspan= "3" wird das ganze unter der oberen dargestellt. Die Tabelle wird geschlossen...
Probier den Code ruhig aus, damit du besser verstehen kannst, wie alles gemeint war.
» ZUSATZ: Neben colspan gibt es noch rawspan, dass angibt, wieviel s NEBEN einer sein sollen. Prinzipiell zwar wichtig und nützlich, aber ich habs eigentlich für das Profil nicht gebraucht^^...
Folgendes gibt es noch zu Tabellen zu sagen: Die Elemente "valign" und "align" sagen dem Browser, wie der Inhalt des jeweiligen Tags ausgerichtet wird. Valign, das sagt der Name, steht für vertikale Ausrichtungen, align logischeweise für horizontale. Das ganze wird so in ein Element eingefügt:
....
Der Text in dieser wird oben ausgerichtet, und ist linksbündig.
Für valign gibt es die Werte: top, bottom, middle, baseline
Übersetzt: Oben, Unten, Mitte, Grundlinie
Für align: left, right, center
Übersetzt: Linksbündig, rechtsbündig, Zentriert
! Das gilt übrigens für alles was im Tag drin ist, also auch Bilder etc.
Zum -Schluss noch eine Sache, die ich fast vergessen hätte: Paddings und Spacings. Diese Dinger werden in Tables reingemacht...
Padding: gibt den Abstand des Inhalt einer von Rahmen selbiger an.
Spacing: Abstand der s von -Rahmen.
Probieren geht über Studieren. Hier noch ein Beispiel:
.....
und sind im Prinzip leere Elemente. Wenn wir gleich CSS durchnehmen gewinnen diese Tags aber durchaus an Bedeutung...
sind Listenelemente... Sind insbesondere für Cynamite interressant, wegen Besucherlisten. Das Prinzip ist ganz einfach: In jedes dieser Tags kommt Text hinein, wobei die Reihenfolge den Stamm definiert. Also gibt das Oberthema an, ein Thema, die Erklärung. Aber im Prinzip kann man mit den Tags machen was man will. Theoretisch kann man das Ganze auch mit Tabellen machen, aber manchmal entstehen merkwürdige Ergebnisse. Deswegen immer auch mit den Listen-Tags probieren!
Und die üblichen Verdächtigen, die allgemein bekannt sein sollten: für Bilder, für Links...
STYLES:
» Nun kommt das, was das Profil so schick macht: CSS, die Styles.
Vorab: Wir nutzen für unsere Profile eine etwas umständlichere Variante von CSS, da es leider auch nicht anders möglich ist. Wichtig ist für ein korrektes Layout: JEDES Element sollte Styles enthalten. Styles werden in die Tags eingefügt, und bringen wie der Name sagt, Style ins Profil^^
Wie folgt werden Styles beschrieben:
Das besondere: Jedes Tag unterstützt Styles, dass heißt, du kannst in jedes Tag styles reinmachen. Wichtig ist immer: Der Inhalt der Styles ist in "-Klammern, die einzelnen Effekte sind durch ; getrennt, und die jeweilige Variable wird mit Doppelpunkt davor angegeben.
» Und nun folgt eine Liste mit den jeweiligen Möglichkeiten. Probieren geht dabei über Studieren.
Schriftart: "font-family:Schriftart, Schriftartalternative;"
Schriftgröße: "font-size:12px;"
Schrift-Typ (Fett, Kursiv...): "font-weight:bold;" (bold | normal | italic)
Schriftfarbe: "color:#Farbnummer;"
Hintergrundfarbe: "background-color:#Farbnummer;"
Rahmen: "border:1px solid #Farbnummer;" (Dicke, Linienart (Solid, Dotted...), Farbe)
Rahmen Links: "border-left:1px solid #Farbnummer;" (Dicke, Linienart (Solid, Dotted...), Farbe)
Rahmen Rechts: "border-right:1px solid #Farbnummer;" (Dicke, Linienart (Solid, Dotted...), Farbe)
Rahmen Oben: "border-top:1px solid #Farbnummer;" (Dicke, Linienart (Solid, Dotted...), Farbe)
Rahmen Unten: "border-bottom:1px solid #Farbnummer;" (Dicke, Linienart (Solid, Dotted...), Farbe)
Abstand zum Rand: "margin (-right, -left, etc.):5px;" ( zum Beispiel mit Text: "margin-left:15px;")
Das sollte reichen^^
Um zum Beispiel einen Text zu erzeugen, der Tahoma als Schriftart hat, 12px groß ist, rot, und dick geschrieben, sieht das dann so aus:
Das ist der Text
Möchte ich eine graue Box um dem Text, mit einem schwarzen durchgezogenen Rahmen, dann sieht das dann so aus:
Das ist der Text
Wie du siehst, ist das -Tag ein Box-Element, dass quasi nur über die Attribute und den Styles steuerbar ist. hingegen dient für minimale Veränderungen im Textlayout, wenn zum Beispiel ein Wort blau dargestellt werden soll, wie hier:
Das ist der blaue Text
SCRIPTS:
» Zum Schluss reiße ich gaaaaanz kurz noch ein paar lustige Scripte an^^ Aber nicht übertreiben!!!
Die wohl einzige Möglichkeit, die "Skripte " zu benutzen besteht bei den onmouse-Befehlen, die übrigens auch überall eingefügt werden können. Doch am besten eignen sie sich für Buttons. Studiert folgenden Code... Sollte ja inzwischen verständlich sein, das Grobe^^
Link
Die onmouse-Dinger bedeuten nix weiter: Ist der Mauszeiger auf diesem Link.... over, also geht er drüber; down, also klickt der drauf; out, lässt los....
Du kannst dem Browser also sagen, was er aus dem Link machen soll, wenn der User drüberfährt oder draufklickt. Wichtig ist nur, den Ausgangswert wieder in onmouseout anzugeben!
Übrigens: jeder Style-Effekt kann damit verändert werden, solange davor this.style. steht. Außerdem kann noch ein .innerhtml eingefügt werden, aber das überlasse ich euch... Und Finger weg von alerts
MEIN PROFIL ? SCHRITT FÜR SCHRITT
» Nun gehen wir Schritt für Schritt einzelne, ausgewählte Elemente meines Profils durch. Wir fangen mit dem grauen Kasten unter meinem Flash-Profil an (Siehe Bild "So soll die graue Box aussehen" ganz unten). Dieser besteht (momentan noch^^) aus einer Tabelle. Wird aber bald durch s ersetzt. Doch das ist erstmal egal, wir wollen es einfach mal praktisch betrachten. Zunächst einmal, wie sieht das ganze aus? Es ist eine Box, mit einem linksbündigen Text, Schriftart Tahoma, Größe 12px. Außerdem ? das wohl auffälligste Merkmal ? befinden sich unter und über dem Text Linien; die untere ist dicker, als die obere.
Zunächsteinmal der grobe Code für die (sinnlose^^) Tabelle:
Der Text ...
Das ist der grobe Code, mehr ist es nicht. Jetzt kommt nur noch der Style ins Spiel^^... Doch bevor das passiert, kommt in das -Tag erstmal Cellspacing rein, 10px groß. Das bedeutet, die -Zelle hat automatisch 10px Abstand zum -Rahmen. Damit bezwecke ich, dass der Text nicht an den Kanten der Box aneckt. Der Code sieht dann so aus:
Der Text
Du kannst das ganze im Prinzip schon mal testen. Der Text sollte im Browser dann einen gewissen Abstand vom Rahmen haben (mach den Vergleich, und lasse das cellspacing weg!). Nun haben wir aber einen langweiligen Text, in Standardschriftart, ohne schicke Rahmen oder Hintergrundfarbe. Doch Geduld, denn nun folgen endlich die Styles. Da die gesamte Tabelle eingefärbt, bzw. umrandet werden soll, müssem die Styles in das -Tag. Unser -Tag sieht also so aus:
Nun kommen unsere Styles rein. Schriftart Tahoma? Das bedeutet in CSS-Sprache "font-family:Tahoma;" .... Schriftgröße Selbsterklärend: "font-size:...." ? die Größe geben wir am besten in px an, also: "font-size:12px". Auch die Farbe muss definiert werden, denn Cynamite hat als Standard ein dunkles Grau. Das macht sich schlecht, wenn der Hintergrund schon grau ist, als definieren wir die Farbe extra nochmal so: "color:#000000". Die Nullen bedeuten Schwarz; für andere Farben besorgst du dir am besten ein Programm, dass dir den Code für eine Farbe verrät, oder nutzt diese Website.
Nun folgt der Hintergrund, der ebenfalls in diesem Farbcode angegeben wird: "background:#CCCCCC;" steht für Hellgrau. Nun haben wir fast alles, so sieht es bis jetzt aus:
Der Text
Nun fehlt das Tollste an der Box^^, die schicken Linien. Die werden auch im Style angegeben, und sind eigentlich Borders, also Ränder. Allerdings kann man gewisse Kanten bei den Rahmen auslassen, also kann man jeden einzelnen Rahmen für sich manipulieren. Der normale Rahmen-Befehl lautet "border: ....". Möchtest du nur den linken Rahmen definieren, dann schreibst du "border-left: ....", du kannst aber gleichzeitig auch den rechten Rahmen definieren: "border-left: ....; border-right: ....". Die Bezeichnung für den oberen Rahmen heißt übrigens "border-top" , und für den unteren "border-bottom" . Nachdem wir nun für unsere Box bereits die Borders für Oben und Unten angegeben haben (also nochmal: "border-top:....; border-bottom") müssen wir sie noch detaillierter beschreiben, und zwar zuerst, wie dick, dann welche Art von Linie, und welche Farbe. Im Falle der oberen Linie sieht das dann so aus:
"border-top:1px solid #000000;"
Der Rahmen ist also 1px dick, schwarz, und was bedeutet das solid? Das bedeutet, dass die Linie durchgehend ist. Es gibt noch andere Arten, z.B. dotted, dass die Linie gepunktet darstellt. Oder Double, dass eine Doppellinie erzeugt (Mindestdicke 3px). Hier findest du alle Linienarten. Man hat also schon von reinen CSS viele Möglichkeiten, die Linien darzustellen. Nun kommen wir zur unteren Linie. Die ist ebenfalls schwarz, und ebenfalls durchgehend, nur ist sie dicker. Also lautet der Code "border bottom:2px solid #000000;". Fertig ist das ganze. So sieht es aus, und so könnt ihr es ruhig mal kopieren, und im Browser testen (der wird allerdings das ganze etwas verkürzt darstellen^^):
Der Text
» Mit diesem Wissen kannst du im Prinzip schon einiges in meinem Profil nachvollziehen. Es gibt eigentlich nur noch zwei Sachen, die ich noch erläutern möchte. Um diese beiden Sachen gleichmal beim Namen zu nennen: Tabellen und OnMouse-Befehle. Die Besucherbox ist prädistiniert für die Aufgabe, euch diese Elemente näher zu bringen. Fangen wir erstmal mit dem einfachen Tabellen an. Wir kennen inzwischen zwar schon die Tabelle von der grauen Box, aber dort wurde ihr Potential eigentlich gar nicht genutzt, denn Tabellen ermöglichen mehrere Layoutzellen neben- und übereinander. Bei der Besucherliste sieht das so aus: Wir haben zunächst die große Box, die alle Elemente beinhaltet, dann haben wir einen Einleitungstext, der quer über die gesamte Box geht. Unter diesem Text befinden sich drei Layoutzellen; eine links mit den Nummern, dann in der Mitte die Besucher und rechte Zelle mit dem Bild von Duffman. Diese Elemente so neben- und übereinander darzustellen ist eine der Stärken von Tabellen. Doch man zuerst überhaupt das eigentlich recht einfache Prinzip verstehen, wie sie programmiert werden. Jede Tabelle beginnt mit dem -Tag, das wissen wir schon. Mit dem End-Tag beenden wir die Tabelle: . Innerhalb dieser Tags kommen nun die Tabellenzellen hinein, also die s. Wird ein in einem eingeschlossen, so wird das allein in einer Zeile (der , denn das soll so ungefähr bedeuten; Zeile) dargestellt. Stellt man wiederrum mehrere s in ein und denselben hinein, so werden diese nebeinander gestellt. ist also ein Container für s, der sie in einer Zeile darstellt. Nun gibt es aber bei meiner Besucherliste ein Problem: Oben ist ein Einleitungstext, der allein in einem liegt. Darunter sind aber gleich 3 s in einem . Was ist daran so schlimm? Nun, weil der Browser später höchstwahrscheinlich einen der unteren s unter dem Einleitungstext stellen wird, die anderen zwei wird er wohl neben dem Einleitungstext darstellen (sh. Bild "Ohne Colspan" ganz unten). Wir wollen aber die drei s unter dem Text haben! Wie sagen wir das dem Text? Mit Colspan! Colspan sagt dem Einleitungstext, wie viel s unter ihm dargestellt werden sollen. Wohl gemerkt: UNTER dem Text. Wenn mehrere s NEBEN dem Text dargestellt werden soll (sh. Bild), benutzen wir Rowspan. Diese Elemente werden in s eingefügt: ... Der Wert ist die Zahl der s unter diesem. Ein weiteres Mysterium ist also gelöst^^; hier ist noch mal der grobe Code:
Einleitungstext... Einleitungstext
Nummer
Besucher
Duffman
! Eine Sache sei noch zu klären: Normalerweise wird der Browser nun die Breite der unteren s selbst bestimmen. Ich mache es so: Ich bestimme bei 2 s die Breite per Width, den dritten lass ich so (der Browser streckt diesen dann auf die volle Tabellenbreite). Width steht für Breite, wird so geschrieben: ... Die Angabe ist in Pixel angegeben. Es gibt übrigens auch eine Höheneinstellung: Height. Hin und wieder ganz nützlich^^.
Wie nun die Liste (also konkret: 500, 600..) funktioniert, ist ganz einfach (siehe Definitionen oben). Theoretisch hätte man´s auch per s machen können^^. Wir wollen aber nun diesen lustigen Effekt nachvollziehen, der entsteht, wenn man mit dem Mauszeiger drüber fährt. Das sind OnMouse-Befehle. So sieht das im Code aus: ... Onmouseover bedeutet: Drüberfahren. Also wenn der User über das Element drüberfährt, soll folgendes passieren... Dann folgt der Ausdruck "this.style.", der angibt, dass der Style dieses Elements geändert wird. Dann folgt der jeweilige Style, in diesem Fall die Textfarbe. Wenn der User nun mit der Maus über das Element fährt, dann verfärbt sich dieses weiß (#FFFFFF). Diese Onmouse-Befehle können überall eingesetzt werden, aber am nützlichsten sind sie bei Links, da man den User damit sagt, wenn du hier klickst, kommst du zu einem Link. Es gibt übrigens noch andere OnMouse-Befehle: "Down" für Drücken, "Out" wenn die Maus nachdem Klicken rausgeht... Du findest diese Befehle auch in meinen Links. Insbesondere das OnMouseOut ist wichtig, weil du damit den Ausgangszustand des Links darstellen solltest. Aber hier hilft sowieso: Probieren^^ Hier findest du weitere OnMouse-Befehle...
» Zum Abschluss möchte ich noch ein paar Hinweise und Tipps geben:
? Normalerweise werden Links mit Unterstrich dargestellt... Das verhinderst du, indem du im Style "text-decoration:none" eingibst.
? Links sollten immer in einem neuen Tab geöffnet werden, damit der User immer noch deine Seite beim Griffel hat. Du erreichst dies, indem du in dem Link-Tag folgendes hinzufügst:
? Wenn etwas nicht funktioniert, erst die Schreibweise überprüfen! Kontrolliere, ob du ein = nicht mit einem : verwechselst, oder ähnliches
? Es bietet sich an, für komplexe Layouts einen WYSIWYG -Editor zu benutzen (What You See Is What You Get), denn die nehmen dir viel Arbeit ab. Ich benutzte das professionelle Programm Dreamweaver, aber es gibt auch kostenlose. Schau einfach mal bei Google
? Es gibt einen praktischen Style-Befehl, namens "margin". Dieser zeigt dem Element an, aber wann es beginnen soll. Beispiel für einen Text: .... Der Text wird nun 50px vom linken Rand entfernt dargestellt. Funktioniert auch mit Right, Bottom, und Top!
? Ähnlich wie "margin": "padding", allerdings auch für den Style-Befehl! Der lässt sich nämlich auch für jede Seite einstellen, also "padding-left:10px;" ^^
? Grafiken verschönern ein Profil ungemein. Ich benutzte für die Webgrafiken Fireworks, wiedermal ein professionelles Programm. Es erzeugt PNGs; das sind websichere (also für jeden PC sichtbare) Bilder mit hoher Qualität, die gleichzeitig Transparenzen darstellen können. Ansonsten empfehlen sich JPEGs in hoher Qualität... Für kleine Icons verwendest du GIFs^^
? Mit dem Align-Befehl "justify" erzeugst du einen Blocksatz... (Algins sind beispielsweise bei s vorhanden)
? Besorg dir, wenn du einen Firefox-Browser hast, das Add-On "Firebug". Damit kannst du jede Website bequem analysieren (per Klick auf "Untersuchen"). Profis freuen sich darüber, dass die classes des angewählten Objekts bequem in einem seperaten Fenster mitsamt Style-Angaben angezeigt werden.
? Der Weg zum HTML/CSS -Profi liegt in diesem Tutorial: selfhtml. Hier erfährst du alles, was man darüber wissen sollte. Jedoch gelten manche Befehle nicht für Cynamite.de: Das -Tag zum Beispiel nicht, genauso wie das -Tag!
? Bei Fragen gibt es mehrere Wege, sich die Antwort zu besorgen: Entweder du schreibst mir, oder in dem Komments, oder gehst in den New User Club und fragst, oder du gehst ins Webdesgin-Forum... Fragen ist Gold, oder so, nicht wahr?^^
So, das soll es gewesen sein. *wink*
(WICHTIGER HINWEIS: Aufgrund von Probemen mit dem BB-Code und der Darstellung, sind einige Quellcodes nicht korrekt wiedergegeben. Beispielsweise entstehen ungewollt Leerzeichen, z.B. "1 0" anstatt "10". Ich bitte darum, dies zu berücksichtigen.)
» Nachdem ich Lob und Beifall wegen meines Profils erntete, will ich nun zeigen, dass das Ganze eigentlich recht einfach war, und sogar Spaß macht, wenn man Lust hat. Natürlich könnte man sich ein beliebiges Tutorial aus dem Internet besorgen, doch leider gibt es dabei psychologische Probleme. Da ist zum Beispiel der Fakt, dass »User Dinge im jeweiligen Forum erfahren möchten, und nicht auf einer fremden Website«, und dass »Links deshalb in diesem Zusammenhang unbeliebt« sind. Ist eigentlich auch verständlich, denn warum wird in einem Webdesign-Hilfe-Forum auf eine andere Website verwiesen? Ein häufiger Fehler, der auch in anderen Bereichen vorkommt. Deswegen werde ich mal einen Einblick in mein Profil gewähren. Es ist mit Sicherheit nicht das beste, erst recht nicht von der Schreibweise des Codes^^, aber es beinhaltet für viele sicherlich interressante Dinge. Ich bin auch kein Profi in Sachen HTML, aber gerade deswegen wär´s möglich, dass dieser Blog verstanden wird.
Es folgen nun ein paar Erklärungen. Die sind zwar wieder mal ziemlich steif und trocken formuliert, sollten aber hoffentlich verständlich sein. Wer es trotzdem nicht versteht, oder keine Lust hat, sich durch den Wust durchzuarbeiten, der kann direkt zum letzten Teil springen... Der lautet: Mein Profil ? Schritt für Schritt
TAGS, UND HINWEISE:
» Fangen wir erstmal mit etwas Cynamite-Speziellen an: Die Profile sind 671px breit. Das kann wichtig sein, wenn ihr eine Tabelle genau auf Maximalbreite setzen wollt, oder für eigene Bilder etc.
? Außerdem sollten folgende Tags (so heißen die Dinger in den -Klammern) vergessen werden, da sie veraltet sind:
, , , ...
? Folgende Tags sind wohl am wichtigsten für euch:
Hier kommt Text rein, und zwar wenn möglich JEDER Text. Das Tag erzeugt einen Absatz, und ermöglicht dadurch automatisch Zeilenumbrüche. Dadurch wird der -Tag (Zeilenumbruch) unwichtig; aber keiner verklagt euch, wenn ihr trotzdem einsetzt^^... Korrekterweise sollte das Tag aber so geschrieben werden: (das gilt übrigens für alle Tags, die nicht durch ein End-Tag (z.B. ) geschlossen werden müssen, wie ...)
Diese Kombination definiert Layouttabellen, die euer Layout (größtenteils) bestimmen. gibt die gesamte Größe der Tabelle an, das steht für die vertikale Zeile, und die bestimmen letzlich den Inhalt; hier kommt der Text, die Bilder und alles andere hinein. Um es klar zu stellen: Es handelt sich nicht unbedingt um eine klassische Tabelle, denn von Natur aus haben diese Tags keine Rahmen, sprich man sieht nix im Browser, wenn man nix reintut. Das ganze ist insofern nützlich, da man die s auch nebeneinander platzieren kann (sh. Bild "Tabellen" unten). In meinem Profil ist das zum Beispiel bei dem Besucherliste-Kasten so: Oben ist eine einzelne mit dem Einleitungstext, unten findest 3 s nebeneinander... einmal die Ziffern, dann die User, dann das große Duffman-Bild. Ohne Tabelle wäre das wohl nicht möglich gewesen... Doch es gibt noch einige Sachen zu beachten:
Im Beispiel des Besucherkastens sieht der Code schematisch so aus:
Einleitungstext
...
Die s geben an, diese befindet sich in einer Zeile. Das colspan ="3" sagt dem Browser, dass in der nächsten Zeile 3 s sein werden. Das ist ganz wichtig, ansonsten klappt es nicht. Der Code geht dann so weiter:
...
Nummern
User
Duffmanbild
Die s umgeben gleich 3 s ? das bedeutet, diese 3 s werden in einer Zeile dargestellt, und durch das colspan= "3" wird das ganze unter der oberen dargestellt. Die Tabelle wird geschlossen...
Probier den Code ruhig aus, damit du besser verstehen kannst, wie alles gemeint war.
» ZUSATZ: Neben colspan gibt es noch rawspan, dass angibt, wieviel s NEBEN einer sein sollen. Prinzipiell zwar wichtig und nützlich, aber ich habs eigentlich für das Profil nicht gebraucht^^...
Folgendes gibt es noch zu Tabellen zu sagen: Die Elemente "valign" und "align" sagen dem Browser, wie der Inhalt des jeweiligen Tags ausgerichtet wird. Valign, das sagt der Name, steht für vertikale Ausrichtungen, align logischeweise für horizontale. Das ganze wird so in ein Element eingefügt:
....
Der Text in dieser wird oben ausgerichtet, und ist linksbündig.
Für valign gibt es die Werte: top, bottom, middle, baseline
Übersetzt: Oben, Unten, Mitte, Grundlinie
Für align: left, right, center
Übersetzt: Linksbündig, rechtsbündig, Zentriert
! Das gilt übrigens für alles was im Tag drin ist, also auch Bilder etc.
Zum -Schluss noch eine Sache, die ich fast vergessen hätte: Paddings und Spacings. Diese Dinger werden in Tables reingemacht...
Padding: gibt den Abstand des Inhalt einer von Rahmen selbiger an.
Spacing: Abstand der s von -Rahmen.
Probieren geht über Studieren. Hier noch ein Beispiel:
.....
und sind im Prinzip leere Elemente. Wenn wir gleich CSS durchnehmen gewinnen diese Tags aber durchaus an Bedeutung...
sind Listenelemente... Sind insbesondere für Cynamite interressant, wegen Besucherlisten. Das Prinzip ist ganz einfach: In jedes dieser Tags kommt Text hinein, wobei die Reihenfolge den Stamm definiert. Also gibt das Oberthema an, ein Thema, die Erklärung. Aber im Prinzip kann man mit den Tags machen was man will. Theoretisch kann man das Ganze auch mit Tabellen machen, aber manchmal entstehen merkwürdige Ergebnisse. Deswegen immer auch mit den Listen-Tags probieren!
Und die üblichen Verdächtigen, die allgemein bekannt sein sollten: für Bilder, für Links...
STYLES:
» Nun kommt das, was das Profil so schick macht: CSS, die Styles.
Vorab: Wir nutzen für unsere Profile eine etwas umständlichere Variante von CSS, da es leider auch nicht anders möglich ist. Wichtig ist für ein korrektes Layout: JEDES Element sollte Styles enthalten. Styles werden in die Tags eingefügt, und bringen wie der Name sagt, Style ins Profil^^
Wie folgt werden Styles beschrieben:
Das besondere: Jedes Tag unterstützt Styles, dass heißt, du kannst in jedes Tag styles reinmachen. Wichtig ist immer: Der Inhalt der Styles ist in "-Klammern, die einzelnen Effekte sind durch ; getrennt, und die jeweilige Variable wird mit Doppelpunkt davor angegeben.
» Und nun folgt eine Liste mit den jeweiligen Möglichkeiten. Probieren geht dabei über Studieren.
Schriftart: "font-family:Schriftart, Schriftartalternative;"
Schriftgröße: "font-size:12px;"
Schrift-Typ (Fett, Kursiv...): "font-weight:bold;" (bold | normal | italic)
Schriftfarbe: "color:#Farbnummer;"
Hintergrundfarbe: "background-color:#Farbnummer;"
Rahmen: "border:1px solid #Farbnummer;" (Dicke, Linienart (Solid, Dotted...), Farbe)
Rahmen Links: "border-left:1px solid #Farbnummer;" (Dicke, Linienart (Solid, Dotted...), Farbe)
Rahmen Rechts: "border-right:1px solid #Farbnummer;" (Dicke, Linienart (Solid, Dotted...), Farbe)
Rahmen Oben: "border-top:1px solid #Farbnummer;" (Dicke, Linienart (Solid, Dotted...), Farbe)
Rahmen Unten: "border-bottom:1px solid #Farbnummer;" (Dicke, Linienart (Solid, Dotted...), Farbe)
Abstand zum Rand: "margin (-right, -left, etc.):5px;" ( zum Beispiel mit Text: "margin-left:15px;")
Das sollte reichen^^
Um zum Beispiel einen Text zu erzeugen, der Tahoma als Schriftart hat, 12px groß ist, rot, und dick geschrieben, sieht das dann so aus:
Das ist der Text
Möchte ich eine graue Box um dem Text, mit einem schwarzen durchgezogenen Rahmen, dann sieht das dann so aus:
Das ist der Text
Wie du siehst, ist das -Tag ein Box-Element, dass quasi nur über die Attribute und den Styles steuerbar ist. hingegen dient für minimale Veränderungen im Textlayout, wenn zum Beispiel ein Wort blau dargestellt werden soll, wie hier:
Das ist der blaue Text
SCRIPTS:
» Zum Schluss reiße ich gaaaaanz kurz noch ein paar lustige Scripte an^^ Aber nicht übertreiben!!!
Die wohl einzige Möglichkeit, die "Skripte " zu benutzen besteht bei den onmouse-Befehlen, die übrigens auch überall eingefügt werden können. Doch am besten eignen sie sich für Buttons. Studiert folgenden Code... Sollte ja inzwischen verständlich sein, das Grobe^^
Link
Die onmouse-Dinger bedeuten nix weiter: Ist der Mauszeiger auf diesem Link.... over, also geht er drüber; down, also klickt der drauf; out, lässt los....
Du kannst dem Browser also sagen, was er aus dem Link machen soll, wenn der User drüberfährt oder draufklickt. Wichtig ist nur, den Ausgangswert wieder in onmouseout anzugeben!
Übrigens: jeder Style-Effekt kann damit verändert werden, solange davor this.style. steht. Außerdem kann noch ein .innerhtml eingefügt werden, aber das überlasse ich euch... Und Finger weg von alerts
MEIN PROFIL ? SCHRITT FÜR SCHRITT
» Nun gehen wir Schritt für Schritt einzelne, ausgewählte Elemente meines Profils durch. Wir fangen mit dem grauen Kasten unter meinem Flash-Profil an (Siehe Bild "So soll die graue Box aussehen" ganz unten). Dieser besteht (momentan noch^^) aus einer Tabelle. Wird aber bald durch s ersetzt. Doch das ist erstmal egal, wir wollen es einfach mal praktisch betrachten. Zunächst einmal, wie sieht das ganze aus? Es ist eine Box, mit einem linksbündigen Text, Schriftart Tahoma, Größe 12px. Außerdem ? das wohl auffälligste Merkmal ? befinden sich unter und über dem Text Linien; die untere ist dicker, als die obere.
Zunächsteinmal der grobe Code für die (sinnlose^^) Tabelle:
Der Text ...
Das ist der grobe Code, mehr ist es nicht. Jetzt kommt nur noch der Style ins Spiel^^... Doch bevor das passiert, kommt in das -Tag erstmal Cellspacing rein, 10px groß. Das bedeutet, die -Zelle hat automatisch 10px Abstand zum -Rahmen. Damit bezwecke ich, dass der Text nicht an den Kanten der Box aneckt. Der Code sieht dann so aus:
Der Text
Du kannst das ganze im Prinzip schon mal testen. Der Text sollte im Browser dann einen gewissen Abstand vom Rahmen haben (mach den Vergleich, und lasse das cellspacing weg!). Nun haben wir aber einen langweiligen Text, in Standardschriftart, ohne schicke Rahmen oder Hintergrundfarbe. Doch Geduld, denn nun folgen endlich die Styles. Da die gesamte Tabelle eingefärbt, bzw. umrandet werden soll, müssem die Styles in das -Tag. Unser -Tag sieht also so aus:
Nun kommen unsere Styles rein. Schriftart Tahoma? Das bedeutet in CSS-Sprache "font-family:Tahoma;" .... Schriftgröße Selbsterklärend: "font-size:...." ? die Größe geben wir am besten in px an, also: "font-size:12px". Auch die Farbe muss definiert werden, denn Cynamite hat als Standard ein dunkles Grau. Das macht sich schlecht, wenn der Hintergrund schon grau ist, als definieren wir die Farbe extra nochmal so: "color:#000000". Die Nullen bedeuten Schwarz; für andere Farben besorgst du dir am besten ein Programm, dass dir den Code für eine Farbe verrät, oder nutzt diese Website.
Nun folgt der Hintergrund, der ebenfalls in diesem Farbcode angegeben wird: "background:#CCCCCC;" steht für Hellgrau. Nun haben wir fast alles, so sieht es bis jetzt aus:
Der Text
Nun fehlt das Tollste an der Box^^, die schicken Linien. Die werden auch im Style angegeben, und sind eigentlich Borders, also Ränder. Allerdings kann man gewisse Kanten bei den Rahmen auslassen, also kann man jeden einzelnen Rahmen für sich manipulieren. Der normale Rahmen-Befehl lautet "border: ....". Möchtest du nur den linken Rahmen definieren, dann schreibst du "border-left: ....", du kannst aber gleichzeitig auch den rechten Rahmen definieren: "border-left: ....; border-right: ....". Die Bezeichnung für den oberen Rahmen heißt übrigens "border-top" , und für den unteren "border-bottom" . Nachdem wir nun für unsere Box bereits die Borders für Oben und Unten angegeben haben (also nochmal: "border-top:....; border-bottom") müssen wir sie noch detaillierter beschreiben, und zwar zuerst, wie dick, dann welche Art von Linie, und welche Farbe. Im Falle der oberen Linie sieht das dann so aus:
"border-top:1px solid #000000;"
Der Rahmen ist also 1px dick, schwarz, und was bedeutet das solid? Das bedeutet, dass die Linie durchgehend ist. Es gibt noch andere Arten, z.B. dotted, dass die Linie gepunktet darstellt. Oder Double, dass eine Doppellinie erzeugt (Mindestdicke 3px). Hier findest du alle Linienarten. Man hat also schon von reinen CSS viele Möglichkeiten, die Linien darzustellen. Nun kommen wir zur unteren Linie. Die ist ebenfalls schwarz, und ebenfalls durchgehend, nur ist sie dicker. Also lautet der Code "border bottom:2px solid #000000;". Fertig ist das ganze. So sieht es aus, und so könnt ihr es ruhig mal kopieren, und im Browser testen (der wird allerdings das ganze etwas verkürzt darstellen^^):
Der Text
» Mit diesem Wissen kannst du im Prinzip schon einiges in meinem Profil nachvollziehen. Es gibt eigentlich nur noch zwei Sachen, die ich noch erläutern möchte. Um diese beiden Sachen gleichmal beim Namen zu nennen: Tabellen und OnMouse-Befehle. Die Besucherbox ist prädistiniert für die Aufgabe, euch diese Elemente näher zu bringen. Fangen wir erstmal mit dem einfachen Tabellen an. Wir kennen inzwischen zwar schon die Tabelle von der grauen Box, aber dort wurde ihr Potential eigentlich gar nicht genutzt, denn Tabellen ermöglichen mehrere Layoutzellen neben- und übereinander. Bei der Besucherliste sieht das so aus: Wir haben zunächst die große Box, die alle Elemente beinhaltet, dann haben wir einen Einleitungstext, der quer über die gesamte Box geht. Unter diesem Text befinden sich drei Layoutzellen; eine links mit den Nummern, dann in der Mitte die Besucher und rechte Zelle mit dem Bild von Duffman. Diese Elemente so neben- und übereinander darzustellen ist eine der Stärken von Tabellen. Doch man zuerst überhaupt das eigentlich recht einfache Prinzip verstehen, wie sie programmiert werden. Jede Tabelle beginnt mit dem -Tag, das wissen wir schon. Mit dem End-Tag beenden wir die Tabelle: . Innerhalb dieser Tags kommen nun die Tabellenzellen hinein, also die s. Wird ein in einem eingeschlossen, so wird das allein in einer Zeile (der , denn das soll so ungefähr bedeuten; Zeile) dargestellt. Stellt man wiederrum mehrere s in ein und denselben hinein, so werden diese nebeinander gestellt. ist also ein Container für s, der sie in einer Zeile darstellt. Nun gibt es aber bei meiner Besucherliste ein Problem: Oben ist ein Einleitungstext, der allein in einem liegt. Darunter sind aber gleich 3 s in einem . Was ist daran so schlimm? Nun, weil der Browser später höchstwahrscheinlich einen der unteren s unter dem Einleitungstext stellen wird, die anderen zwei wird er wohl neben dem Einleitungstext darstellen (sh. Bild "Ohne Colspan" ganz unten). Wir wollen aber die drei s unter dem Text haben! Wie sagen wir das dem Text? Mit Colspan! Colspan sagt dem Einleitungstext, wie viel s unter ihm dargestellt werden sollen. Wohl gemerkt: UNTER dem Text. Wenn mehrere s NEBEN dem Text dargestellt werden soll (sh. Bild), benutzen wir Rowspan. Diese Elemente werden in s eingefügt: ... Der Wert ist die Zahl der s unter diesem. Ein weiteres Mysterium ist also gelöst^^; hier ist noch mal der grobe Code:
Einleitungstext... Einleitungstext
Nummer
Besucher
Duffman
! Eine Sache sei noch zu klären: Normalerweise wird der Browser nun die Breite der unteren s selbst bestimmen. Ich mache es so: Ich bestimme bei 2 s die Breite per Width, den dritten lass ich so (der Browser streckt diesen dann auf die volle Tabellenbreite). Width steht für Breite, wird so geschrieben: ... Die Angabe ist in Pixel angegeben. Es gibt übrigens auch eine Höheneinstellung: Height. Hin und wieder ganz nützlich^^.
Wie nun die Liste (also konkret: 500, 600..) funktioniert, ist ganz einfach (siehe Definitionen oben). Theoretisch hätte man´s auch per s machen können^^. Wir wollen aber nun diesen lustigen Effekt nachvollziehen, der entsteht, wenn man mit dem Mauszeiger drüber fährt. Das sind OnMouse-Befehle. So sieht das im Code aus: ... Onmouseover bedeutet: Drüberfahren. Also wenn der User über das Element drüberfährt, soll folgendes passieren... Dann folgt der Ausdruck "this.style.", der angibt, dass der Style dieses Elements geändert wird. Dann folgt der jeweilige Style, in diesem Fall die Textfarbe. Wenn der User nun mit der Maus über das Element fährt, dann verfärbt sich dieses weiß (#FFFFFF). Diese Onmouse-Befehle können überall eingesetzt werden, aber am nützlichsten sind sie bei Links, da man den User damit sagt, wenn du hier klickst, kommst du zu einem Link. Es gibt übrigens noch andere OnMouse-Befehle: "Down" für Drücken, "Out" wenn die Maus nachdem Klicken rausgeht... Du findest diese Befehle auch in meinen Links. Insbesondere das OnMouseOut ist wichtig, weil du damit den Ausgangszustand des Links darstellen solltest. Aber hier hilft sowieso: Probieren^^ Hier findest du weitere OnMouse-Befehle...
» Zum Abschluss möchte ich noch ein paar Hinweise und Tipps geben:
? Normalerweise werden Links mit Unterstrich dargestellt... Das verhinderst du, indem du im Style "text-decoration:none" eingibst.
? Links sollten immer in einem neuen Tab geöffnet werden, damit der User immer noch deine Seite beim Griffel hat. Du erreichst dies, indem du in dem Link-Tag folgendes hinzufügst:
? Wenn etwas nicht funktioniert, erst die Schreibweise überprüfen! Kontrolliere, ob du ein = nicht mit einem : verwechselst, oder ähnliches
? Es bietet sich an, für komplexe Layouts einen WYSIWYG -Editor zu benutzen (What You See Is What You Get), denn die nehmen dir viel Arbeit ab. Ich benutzte das professionelle Programm Dreamweaver, aber es gibt auch kostenlose. Schau einfach mal bei Google
? Es gibt einen praktischen Style-Befehl, namens "margin". Dieser zeigt dem Element an, aber wann es beginnen soll. Beispiel für einen Text: .... Der Text wird nun 50px vom linken Rand entfernt dargestellt. Funktioniert auch mit Right, Bottom, und Top!
? Ähnlich wie "margin": "padding", allerdings auch für den Style-Befehl! Der lässt sich nämlich auch für jede Seite einstellen, also "padding-left:10px;" ^^
? Grafiken verschönern ein Profil ungemein. Ich benutzte für die Webgrafiken Fireworks, wiedermal ein professionelles Programm. Es erzeugt PNGs; das sind websichere (also für jeden PC sichtbare) Bilder mit hoher Qualität, die gleichzeitig Transparenzen darstellen können. Ansonsten empfehlen sich JPEGs in hoher Qualität... Für kleine Icons verwendest du GIFs^^
? Mit dem Align-Befehl "justify" erzeugst du einen Blocksatz... (Algins sind beispielsweise bei s vorhanden)
? Besorg dir, wenn du einen Firefox-Browser hast, das Add-On "Firebug". Damit kannst du jede Website bequem analysieren (per Klick auf "Untersuchen"). Profis freuen sich darüber, dass die classes des angewählten Objekts bequem in einem seperaten Fenster mitsamt Style-Angaben angezeigt werden.
? Der Weg zum HTML/CSS -Profi liegt in diesem Tutorial: selfhtml. Hier erfährst du alles, was man darüber wissen sollte. Jedoch gelten manche Befehle nicht für Cynamite.de: Das -Tag zum Beispiel nicht, genauso wie das -Tag!
? Bei Fragen gibt es mehrere Wege, sich die Antwort zu besorgen: Entweder du schreibst mir, oder in dem Komments, oder gehst in den New User Club und fragst, oder du gehst ins Webdesgin-Forum... Fragen ist Gold, oder so, nicht wahr?^^
So, das soll es gewesen sein. *wink*
