 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| www.my-mode.com > tutorial > layout | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
das display eines handys ist klein, da ist man leicht versucht zu meinen, layout sei nicht so wichtig. weit gefehlt, ein grund, warum wap nie so richtig aus den startloechern kam, ist die triste schwarz-weisse (bzw. grau-guene) oberflaeche, mit der es dank simpler handydisplays leben musste.
bei i-modeTM ist das anders, i-modeTM ist farbig wie das leben selbst. leider freuen sich viele so sehr ueber die neuen moeglichkeiten, dass sie sofort hemmungslos uebertreiben. oft sind die seiten dann so bunt, dass die augen traenen und die zaehne schmerzen. aber das kennt man ja auch von normalen webseiten. bevor wir uns gedanken zu den farben machen, noch ein wort zur abwaertskompatibilitaet. wer scharf darauf ist, das wirklich alle und jeder seine i-modeTM seiten betrachten kann, der sollte bedenken, dass anfangs auch i-modeTM-handys nur schwarz-weis displays hatten, und dass auch heute noch solche geraete verkauft werden. das problem dabei ist: diese telefone stellen jede farbe, die nicht weiss ist, als schwarz dar. damit ist klar, wie eine seite mit beispielsweise gelbem hintergrund dargestellt wird, oder?! wie werden farben definiert? das ist eigentlich recht einfach, jede farbe wird beschrieben, in dem man sie in ihren rot- gruen- und blauanteil aufsplittet. jeder anteil kann in 256 stufen angegeben weden. der zahlenwert wird dabei allerdings hexadezimal angegeben. das ist alles sehr theoretisch, und zu allem ueberfluss sind noch nicht einmal alle so moeglichen farben browserkonform. i-modeTM in deutschland benutzt eine spezielle farbtabelle mit 256 farben, die auf die 256 farben des handys zugeschnitten sind. machen wir es uns also einfach. ich habe hier eine kleine farbtabelle mit den zugehoerigen farbwerten, man braucht sich also nur die gewuenschte farbe aussuchen und den farbwert in seinen code einsetzen (in wie fern die handys andere farben verkraften, auf die palettenfarben ziehen oder verfaelschen kann jeder selbst austesten - zumal inzwischen viele modelle ja mit 65000 farben aufwarten).
tabelle 1 - standardfarben
einige farben haben sogar einen eigenen namen, man kann diesen anstelle des farbcodes angeben:
tabelle 2 - farbnamen
gut, nun haben wir die farben, aber was nuetzen sie uns? wie bekommen wir sie in unsere seite? zu erst waere da nocheinmal auf das uns schon bekannte <body>-tag zu verweisen, es hat naemlich die attribute bgcolor="#XXYYZZ" text="#XXYYZZ" link="#XXYYZZ"dabei steht "XXYYZZ" fuer den farbwert. ein beispiel moege die anwendung verdeutlichen: <body bgcolor="#0000AA"
text="#FFFFFF"
link="#FF9200">...
</body>
liefert uns eine dunkelblaue seite mit weissem text und orangefarbenen links.
das color-attribut des <font>-tags funktioniert ebenso. farbwert angeben, und die schrift wird rot, gelb, blau - was immer man wuenscht... ok, layout besteht natuerlich nicht nur aus farben, und auch cHTML haellt noch ein paar kleine schmaeckerchen bereit. zum einen waere da noch die horizontale linie, mit der man einfach eine seite unterteilen kann. das tag lautet <hr>und hat folgende attribute align= "left | center | right" size= "n" width= "n | %" noshadedabei gibt "align" wie ueblich die ausrichtung der linie an, "size" definiert die hoehe bzw. dicke der linie in pixeln und "width" steuert, wie breit die linie wird. dabei ist ausser einer pixelangabe auch eine prozentangabe moeglich. "noshade" unterdrueckt normalerweise die 3d-darstellung einer horizontalen linie. da die meisten handys aber eh nicht in der lage sind, die linien in 3d darzustellen, bleibt das attribut oft ohne effekt un kann daher auch weggelassen werden. auch hier noch ein beispiel: <hr align="center" size="2" width="75%">erzeugt eine mittig ausgerichtete linie von 2 pixeln hoehe und 75% displaybreite. wer experimentieren moechte, kann ja mal versuchen, ob die verwendung des color-attributs eine farbige linie erzeugt... bleibt noch eins - ueberschriften. die werden mit dem tag <hn>...</hn>definiert. "n" steht dabei fuer eine zahl zwischen 1 und 5. normalerweise kann man mit dieser zahl die schriftgroesse der ueberschrift bestimmen. "h1" ist dabei die wichtigste - und damit groesste ueberschrift. "h5" ist so unbedeutend, dass sie so gross wie der normaltext ist und nur fett ausgezeichnet wird. leider reagieren handys ein wenig anders auf den tag, oft gar nicht. im allgemeinen scheint zu gelten, die zahl muss da sein, hat aber keinen einfluss auf die schriftgroesse. oft ist die schrift dann aber fett dargestellt - das ist ja auch schon was. nicht zu vergessen, auch das <hn>-tag kennt das align-attribut! |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
