Design your Life!
Bei Aufträgen im Webbereich stellt sich immer die Frage „Wie viel kostet mich der Spaß?“. Wir wollen nun ein bisschen Licht ins Dunkle bringen. Heute im ersten Teil geht es um das Umsetzen einer grafischen Vorlage in HTML bzw. XHTML Code. Wir gehen hierbei von einer grafischen Vorlage im PSD oder TIFF Format aus. Natürlich ist der Aufwand je nach Design unterschiedlich hoch. Komplexe Webseiten mit einem Anspruchsvollen Design brauchen für die Umsetzung mehr Zeit.
Es gibt Internetagenturen / Webagenturen die speziell solch einen Service einzeln anbieten. Die Preise schwanken hier von 75 bis 400€.
Hier eine Liste mit Anbietern dieses Service:
http://www.xhtmlteam.com/ 75$
http://xhtmlslicer.com/ 200-350$ 1-3 days
http://www.xhtmlmaster.com/ 77$ 8hours
http://www.xhtmlized.com/ 199$ 7days
http://www.xhtmlit.com/ 119$ 8hours
http://www.xhtmlin24hours.com/ 199$ 25hours
http://www.xhtmlgenius.com/ 250$ 3days
http://www.xhtml2go.com/ 119$
http://www.xhtmlslashcss.com/ 150$ 3days
http://www.wellcodeit.com/ 199$ days
http://www.slicerus.com/ 135$
http://www.slicendiceit.com/ 279-399$ 3-6days
http://www.slicemydesign.com/ 165$ 3days
http://www.psdxhtml.com/ 89$
http://www.psdtocode.com/ $110
Alle dieser Anbieter versprechen ein Slice in XHTML Form mit validen Code.
Ausgangssituation:
Wir haben in Photoshop ein Layout erstellt. Dieses Design liegt uns als PSD oder anderer Form vor.
Beispiel
Zielstellung:
Aus dieser Vorlage wollen wir eine möglichst browserkompatible Website bauen.
Planung:
Die Fragen die sich beim betrachten der Vorlage stellt ist:
Wie fang ich an?
Welche Elemente kann ich nicht in HTML darstellen und muss daher Grafiken erstellen?
Mit ein bisschen Erfahrung erkennt man wie sich die Seite Glieder lässt. Zum einen habe ich den Hintergrund. Dann kommt die eigentliche Seite mit dem grünlichen Balken, der den Kopf der Webseite bildet. Diesen brauch ich als eine Grafik, weil er einen Verlauf hat den ich mit HTML nicht darstellen kann. Als nächstes kommt der mittlere Teil der Seite ran. Zum einen die Navigation mit den Buttons (diese brauche ich auch als Grafik. Dann ist noch der Contentbereich, den man später mit beliebigen Inhalten füllen kann. Den Schluss der Seite bildet der Footer (Fuß der Website). Der wird auch als grafisches Element genommen, da wir hier ein Logo haben und rechts noch kleine Quadrate.
Zusammenfassung: Wir brauchen 13 Grafiken
1 Headergrafik
5 Buttons x2
1 Footergrafik
1 Hintergrundgrafik
Dateistruktur
Bevor wir jedoch mit dem schneiden der einzelnen Grafiken beginnen, kümmern wir uns um die richtige Dateistruktur. Wir schaffen uns einen Ordner für das Websiteprojekt. In diesem kommen 2 Ordner (slice & img). Für die HTML Umsetzung benötigen wir natürlich ein HTML Dokument und dazu 2 passende CSS Dateien. Ihr eine Textdatei erstellen und diese in das entsprechende Dateiformat speichern. Das ganze sieht dann so aus:
Wieso wir 2 CSS benötigen, dazu später. Erst einmal schneiden wir wie geplant unsere Bilder zurrecht. Dazu schmeißen wir unser schicke Photoshop an und laden uns die Vorlage.
Slicen
So nun sind wir im beliebten Photoshop. Zur besseren Aufteilung kann man Hilfslinien ziehen. Einfach mit der Maus auf das Lineal klicken (gedrückt halten) und an die gewünschte Position ziehen
Falls Ihr das Lineal nicht sehen könnt, versucht es einfach mit „strg+r“.
Wie Ihr nun sehen könnt habe ich die Vorlage mit den Hilfslinien schon einmal grob eingeteilt in einzelne Bereiche.
Nun wähle ich das Slicewerkzeug aus der Liste aus. 
Dann beginnen wir mit dem schneiden des ersten Bildes (den Header).
Wenn wir unsere erste Slice-Auswahl gemacht haben, überprüfen wir, ob die breite eine gerade Zahl ist in dem ich mit dem Slicewerkzeug auf die linke obere Ecke der Auswahl klicken und dann auf „Slice bearbeiten“.
Im Folgenden Fenster können wir sehen wie breit unsere Auswahl ist und dem entsprechen anpassen.
Wieso sollte die Breite eine gerade Zahl sein?
Damit wir es später leichter haben. Zum Beispiel ist das ausrichten mit „mittig“ einfacher als mit ungeraden Zahlen.
Nun kommen die Buttons dran. Dazu ziehe ich mir ein paar weitere Hilfslinien in denen ich dann die Slicerahmen ziehe.
Die Buttons sollen nachher einen Rollovereffekt haben. Dazu brauchen wir für jeden Button 2 Grafiken mit einem unterschiedlichen Hintergrund. Wenn man später auf der fertigen Website mit der Maus über den Button fährt, ändert sich die Hintergrundfarbe des einzelnen Buttons.
Jetzt muss der Footer dran glauben.
So, alle Grafiken wir markiert. Ab geht’s zum speichern der Bilder in den extra angelegten Slice Ordner. Geht auf Datei � Für Webseite speichern …
Es öffnet das magische Fenster. Hier können wir einzelne Einstellungen vornehmen, in welchem Format die Bilder gespeichert werden sollen.
Die obere Grafik speichern wir als jpeg mit einer Qualität von 60%. Dazu einfach auf die 3 klicken, im rechten bereich das Format JPEG wählen und die Qualität entsprechend runterschrauben.
Warum kein PNG oder GIF Format?
PNG ist nicht Browserkompatibel und wird auch nur von neuen Browserversionen richtig dargestellt.
GIF eignet sich bei einem Verlauf weniger, da nur 256 in diesem Format abgespeichert werden können.
Die Buttons wählen wir auf die selbe weise aus. Doch hier wählen wir hier das Format GIF mit und stellen 16 Farben ein.
Wir brauchen bei den Buttons nicht mehr Farben. Da bietet sich das GIF förmlich an um die Dateigröße so klein wie möglich zu halten.
Als letztes kommt der Footer dran, den wir mit JPEG Qualität 60% Einstellungen belegen.
Nun wird alles gespeichert. Als Dateityp wird „Nur Bilder“ ausgewählt. Lasst euch vom „*jpg“ dahinter nicht irritieren. Die Grafiken werden in dem ausgewählten Format gespeichern. Wählt dazu noch den Ordner „slice“ aus.Worum nicht als HTML speichern?
Das was Dreamweaver hier produktiert ist ein haufen unbrauchbarer HTML Code.
Ab geht es in den Slice Ordner. Dort werden die brauchbaren Grafiken kopiert und im angelegten „img“ Ordner abgelegt. Wir bennen noch die einzelnen Bilder um.
War da nicht noch etwas?
Richtig, wir wollen ja Rolloverbuttons. Das heißt wir brauchen eine 2te Version, wenn die Maus über die Buttons fährt. Sprich wir ändern die Hintergrund den Buttons und speichern das ganze noch mal wie oben schon mal beschrieben.
Hier die 2te Version der Buttons (der Rollovereffekt)
Nach dem speichern kopieren wir die Button-Bilder und speichern diese in den „img“ Ordner, wo auch die anderen sind. Und nicht das umbennen vergessen.
Für die 2te Version verwenden wir z.B. 1bahover.gif
Der erste Teil ist geschafft. Der Slice ist KOMPLETT
Auf geht’s zum umsetzen des ganzen in HTML und CSS
Als erstes bauen wir uns die Grundstrukturen und legen die Voreinstellungen fest.
Wir öffnen die drei Dateien im Dreamweaver:
index.html
formate.css
formate-ie.css
<!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"> <head> <title>Hier kommt der Seitentitel rein</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Author" content="WME" /> <meta name="Publisher" content="WME" /> <meta name="Copyright" content=" WME " /> <meta http-equiv="content-language" content="de" /> <meta name="keywords" content="Template" /> <meta name="description" content="Beischreibungstext der Seite " /> <meta name="Audience" content="Alle" /> <meta name="allow-search" content="yes" /> <meta name="robots" content="index, follow" /> <meta name="revisit-after" content="1 days" /> <link rel="stylesheet" type="text/css" xhref="formate.css" /> <!-- Browserweiche fuer den InternetExplorer, der Bugs behebt --> <!--[if IE]> <link rel="stylesheet" type="text/css" xhref="formate-ie.css" ><![endif]--> </head><body><!-- Hier kommt der Seiteninhalt rein--> </body></html><strong></strong>
Erklärung zu der Grundgerüst des HTML Dokuments:
1.+ 2. Geben den Doctype des Dokumentes an. In unserem Fall schreiben wir nach dem W3C Standart XHTML
4. Hier beginnt der „head“ (Kopf) Bereich in diesen werden bestimmte Tags geschrieben. Bsp.: META-Tags
5. Titel unserer Website
6. Norm in der das Dokument verfasst ist
7. – 16 Verschiedene Meta-Tags mit zusätzlichen Informationen
17. Link zur Datei CSS Datei (formate.css) in der die Gestaltung/Layout definiert wird
18.+ 19. Eine Browserweiche für den InternetExplorer. Wir wollen das auf allen Browser eine gleiche Darstellung zu sehen ist. Deshalb wird eine 2te CSS Datei (formate-ie.css) verwendet, explizit für den IE.
20. Der Kopf wird geschlossen.
21. Body Bereich beginnt. Hier kommt der Inhalt der Seite rein.
22. Kommentar der nicht auf der Seite zu sehen ist.
23. Body endet hier
24. Html endet hier
Jetzt die Grundeinstellung für die formate.css Datei
*{ margin:0px; padding:0px;}
Erklärung zum Grundgerüst der CSS Datei:
* die Einstellungen gelten für alle Element im HTML. Sprich kein Außenabstand (margin) und kein Innenabstand (padding).
Beim bau einer Website fangen wir vom Hintergrund an und arbeiten uns zum Vordergrund oder von außen nach innen. Als erstes legen wir die Hintergrundfarbe fest, die wir auch der PSD Datei entnehmen können. Dazu schreiben wir in die CSS folgendes
html
{
background-color:#1d2d3c;
text-align:center;
}
Im HTML Dokument schaffen wir nun eine Hülle für Webseite, die auch genau die Breite der Seite einnimmt. Die Breite entnehmen wir vom Bild top.jpg . Bei mir sind das jetzt 560 Pixel. Dazu schreiben wir folgendes in die HTML im Body Bereich. Ein Div-Block mit einer ID. Der Wrapper wird noch mittig ausgerichtet (margin).
HTML:
<div id=”wrapper”></div>
CSS:
#wrapper
{
Width:560px;
margin-left:auto;
margin-right:auto;
}
In diese Hülle (wrapper) kommt nun der Bannerbereich. Das sieht dann wie Folgt aus
HTML:
… <div id=”wrapper”> <div id="banner"></div> </div> …
CSS:
#banner
{
background-image:url(img/top.jpg);
width:560px;
height:42px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
Wir legen hierbei das Hintergrundbild fest. Und weisen dem Block eine Breite und Höhe des Bildes „top.jpg“ zu. Schließlich positionieren wir es wie den wrapper und geben dem Element noch einen Abstand zum oberen Rand von 40 Pixeln.
Es folgt der mittlere Bereich der Webseite. Wir errichten hierfür eine container (Hülle) mit der id „middle“ und teilen diesen wieder die Breite der Seite zu mit dem passenden Hintergrundbild content_bg.gif.
HTML:
… <div id="wrapper"> <div id="banner"></div><div id="middle"> Inhalt </div> </div> …
CSS:
#middle
{
background-image:url(img/content_bg.gif);
}
Schließlich wird noch ein Abschluss für die Seite genötigt. Wie bei dem Menschen sind ganz unten die Füße (footer). Deshalb geben wir dem div Block die ID footer. Wie im middle Bereich wird wieder ein Hintergrundbild, was wir am Anfang des Tutorials ausgeschnitten hatten, festgelegt. Zu beachten ist hierbei, dass wir eine feste Höhe haben, die wir angeben müssen.
Und so schaut es aus:
HTML:
… <div id="wrapper"> <div id="banner"></div> <div id="middle">Inhalt</div> <div id="footer"> </div> </div> …
CSS:
#footer
{
background-image:url(img/footer.jpg);
height:35px;
}
Bisheriges Ergebnis:
Inhalte
Wir haben nun die hinterste Ebene, den Hintergrund und die 2te Ebene erstellt, das Grundgerüst der Seite. Es fehlen uns nun Inhalte für die Seite und deren Formatierung + Positionierung.
Den ersten Inhalt den wir einfügen wird die Überschrift der Seite sein im grünlichen Bereich. Dazu verwenden wir im banner Bereich den h1-Tag. Der wird anschließend im CSS formatiert. Im CSS legen wir noch einen Abstand nach links (margin-left: …) fest, damit die Schrift nicht gegen den Rand klatscht und Innenabstand nach oben (padding-top:…) aus dem selben Grund.
HTML:
…<div id="banner"> <h1>Titel der Seite</h1> </div>…
CSS:
#banner
{
…
text-align:left;
…
}#banner h1
{
margin-left:30px;
padding-top:5px;
}
Resultat:
Weiter geht’s mit dem mittleren Bereich der Seite. Es folgt nun der schwierigste Teil der Seite, die Navigation.Wir weisen noch davor in der id #middle ein text-align:left; zu, um auch wieder auf der linken Seite zu starten. Navigationen werden generell in Listen angelegt. Hierfür gibt es zwei Möglichkeiten. 1. die horizontale 2. die vertikale
Als erstes legen wir eine Liste an. Die Liste bekommt eine ID und die Listenpunkte, in der die einzelnen Buttons eingefügt werden, eine jeweils eigene class (Klasse). In den Listenpunkten fügen wir die Links ein mit einem beliebigen Textlink (z.B. Button1).
Das ganze sieht im HTML so aus:
HTML:
…<div id="middle"> <br /> <ul id="navi"> <li class="b1"><a xhref="http://muse-design.de/#" target="_self" title="link">Button 1</a></li> <li class="b2"><a xhref="http://muse-design.de/#" target="_self" title="link">Button 2</a></li> <li class="b3"><a xhref="http://muse-design.de/#" target="_self" title="link">Button 3</a></li> <li class="b4"><a xhref="http://muse-design.de/#" target="_self" title="link">Button 4</a></li> <li class="b5"><a xhref="http://muse-design.de/#" target="_self" title="link">Button 5</a></li> </ul> Inhalt </div> …
Jetzt wieder die richtige Formatierung im CSS daneben schreibe ich CSS Kommentar der die Einstellung erklärt ( /*CSS Kommentar */ )
CSS:
#navi ul, li
{
padding:0px; /* Innenabstand in den Elementen */
margin-top:3px; /* Abstand nach oben, damit sie nicht zusammhängen */
}#navi{
margin-left:8px; /* Abstand nach links der ganzen Navigation */
width:140px; /* Gesamtbreite */
text-align:left; /* Textausrichtung in der Navigation */
margin:0px; /* Wieder Außenabstand auf Null gesetzt */
padding:0px; /* ebenso der Innenabstand */
overflow:hidden; /* Alles was über width und height geht wird abgeschnitten und nicht gezeigt */
}#navi a /* alle “a-Elemente” im div-block navi haben folgende eigenschaften */
{
display:block; /* das Element a wird zum Block Element */
width:133px; /* Die Breite wird festgelegt (die Breite der Bilder */
height:20px; /* ebenso die Höhe -5 padding left */
padding-left:5px; /* damit Text nicht am Rand klebt */
}.b1 a /* wirkt sich auf das element a aus */
{
background-image:url(img/b1a.gif); /* hintergrund für den ersten button */
}.b1 a:hover /* nun das ganze beim mouseover */
{
background-image:url(img/b1ahover.gif); /*hier kommt der Hintergrund als Highlight rein*/
}
.b2 a /* das ganze wiederholt sich für die anderen */
{
background-image:url(img/b1a.gif);
}
.b2 a:hover
{
background-image:url(img/b1ahover.gif);
}
.b3 a
{
background-image:url(img/b2a.gif);
}
.b3 a:hover
{
background-image:url(img/b3ahover.gif);
}
.b4 a
{
background-image:url(img/b4a.gif);
}
.b4 a:hover
{
background-image:url(img/b4ahover.gif);
}
.b5 a
{
background-image:url(img/b5a.gif);
}
.b5 a:hover
{
background-image:url(img/b5ahover.gif);
}
Ergebnis:
Nach der Liste „navi“ eröffnen wir ein DIV-Block für den Contentbereich.
HTML:
… </ul> <div id="content"> Inhalt </div> <div class=”clr”></div> …
Damit wir den Contentbereich nicht unter der Navigation wieder finden erhält die „navi“ ein float:left; Resultat ist, dass die nachfolgenden Element und bedingt an den linken Rand der Webseite fließen wollen. So landet dann Content Element direkt neben die Navigation. Nach dem Contentblock muss ein Element eingefügt werden, der den Fluß (float:left;) wieder aufhebt, damit sich die einzelnen Blöcke danach nicht überlappen.
Und so schaut es aus:
CSS:
#navi
{
…
float:left;
…
}#content
{
width:395px;
margin-left:155px;
text-align:left;
}.clr
{
clear:left;
}
Nun kann auch ein beliebiger Text in die Contebox eingefügt werden.
Wir runden das ganze ein bisschen und packen in den Footer noch einen kleinen Vermerk des Autors rein.
Die CSS formatieren wir wie folgt:
CSS:
#footer
{
background-image:url(img/footer.jpg);
height:20px;
font-size:9px;
padding-top:15px;
text-align:left;
padding-left:45px;
}
#footer a
{
font-size:9px;
color:#000000;
}#footer a:hover
{
font-size:9px;
color:#ff0000;
}
Wir benutzen wieder einen Padding um den Text im Footer richtig zu Positionieren. Nicht vergessen den Padding dann wieder von der Höhenangabe abzuziehen. Hier sind es 15px. Bei der Breite braucht man das nicht, da keine angegeben wurde
Das ganze sieht doch schon ganz nett aus. Doch halt. Es sieht im Internet Explorer ganz anders aus. Die Navigation ragt zu weit nach rechts raus. Und genau dafür haben wir eine Browserweiche. Wir können mit der 2ten CSS den Fehler vom IE korrigieren. Der Internet Explorer scheint hier ein padding oder margin anders zu interpretieren.
FireFox Ansicht InternetExplorer Ansicht
Also wir öffnen nun die Datei formate-ie.css und fügen folgendes ein:
CSS:
#navi
{
margin-left:4px;
}
Damit wird der „margin-doppler bug“ vom IE aufgehoben.
Redet man von Web 2.0, fällt häufig der Begriff Ajax. Was aber verbirgt sich hinter dem Zauberwort? Der wesentliche Vorteil ist, dass sich der Browserg von der Interaktion des Benutzers jederzeit Daten vom Server holen kann, ohne dabei die Seite komplett neu laden zu müssen. Bevor es Ajax gab, musste der Besucher einer Seite immer einen “Submit” Button drücken, um z.B. den Inhalt eines Formulares abzuschicken. Erst dann konnten Daten zwischen Server und Client ausgetauscht werden.
Ajax steht für Asynchronous JavaScript and XML und ist damit nichts Neues, doch die Kombination von JavaScript und XML eröffnet neuartige Möglichkeiten. Ajax Anwendungen erinnern bereits an Offline Software. Writely beispielsweise ist ein Schreibprogramm, das dank Ajax komplett im Browser läuft und so erfolgversprechend startete, dass Gigant Google es kaufte.
Was muss man können, um Ajax einzusetzen?
Das Verständnis für JavaScript und DOM (Document Object Model). Die beiden Komponenten werden auch unter dem Begriff DHTML (Dynamic HTML) zusammengefasst. Mit Java-Script wird die Ajax-Engine implementiert, die den ganzen Datenfluss steuert. Für die Gestaltung der Oberflächen kommen Kenntnisse von XHTML und CSS dazu. Serverseitig muss zudem eine Programmiersprache vorhanden sein, die generiert was an den Client geliefert wird. “PHP ist hier weit verbreitet. Die neue Version ist mit vielen Funktionen ausgestattet, die gut zu Ajax passen.
Der Austuasch der Daten zwischen Server und Client verlangt XML-Know-hox: Es können mitunter sehr komplexe Datenstrukturen vom Server geliefert werden, XML ist dann das beste Format für den Transport. Obwohl für simple Antworten von Serverseite oft Plain Text reicht.
