- Erstellung eines Webdesigns Part 1
- Erstellung eines Webdesigns Part 2
- Erstellung eines Webdesigns Part 3
- Erstellung eines Webdesigns Part 4
- Erstellung eines Webdesigns Part 5
Erstellung eines Webdesigns Part 1 | ||
|---|---|---|
 | Im ersten Teil des 5-teiligen Tutorials mit ich bestimmte Dinge näherbringen, wie zum Beispiel die Notwendigkeit, sich vor der Arbeit mit Photoshop und Dreamweaver ein Konzept zurecht zu legen, das sich wie ein roter Faden durch das Design ziehen soll. Dies betrifft räumliche Aufteilung, Farben, Thema usw. Außerdem beginne ich das Tutorialdesign in Photoshop zu erstellen. Um genau zu sein, wird der Header sowie der Hintergrund erstellt. | |
| Länge: 13:50 Minuten | Video starten |  |
Erstellung eines Webdesigns Part 2 | ||
|---|---|---|
| Im zweiten Teil des 5-teiligen Tutorials setze ich unsere Tutorialpage weiter Stück für Stück zusammen. Diesmal erstellen wir eine mögliche Navigation, den Footer, den Contentbereich sowie die linken Menübereiche. Hierbei kommen einfache und bereits erklärte Techniken zur Anwendung, weswegen ich diesen Teil als "Normal" definieren möchte. | |
| Länge: 12:51 Minuten | Video starten |  |
Erstellung eines Webdesigns Part 3 | ||
|---|---|---|
| Im dritten Teil des 5-teiligen Tutorials setze ich unsere Tutorialpage weiter Stück für Stück zusammen. Diesmal erstellen wir den Contentbereich, eine alternative Footernavigation und hauen die im zweiten Teil erstellte Hauptnavigation komplett über den Haufen. Auch dieser Teil besteht aus bekannten Techniken und ist daher als "Normal" eingestuft. Das Ergebnis der bisherigen Arbeit steht als PSD-Download zur Verfügung:  Zum Download des e107-Themes | |
| Länge: 08:09 Minuten | Video starten | |
Erstellung eines Webdesigns Part 4 | ||
|---|---|---|
 | Im vierten Teil beginne ich zu erst die Voraussetzungen für ein Design vorzustellen. Da man ja bekanntermaßen nicht die PSD ins Netz stellen kann, benötigen wir also mindestens eine HTML- und eine CSS-Datei. Diese sich bereits vorher vernünftig zu sortieren ist wichtig. Ich zeige hier, wie ich das normalerweise mache. Später beginne ich die ersten Schritte zu beschreiben, die zur fertigen Seite führen. Das beinhaltet das Slicen der Grafik, das Anlegen von CSS-IDs und -Klassen, sowie das erstellen des HTML-Gerüsts. | |
| Länge: 13:19 Minuten | Video starten | |
Erstellung eines Webdesigns Part 5 | ||
|---|---|---|
| Im fünften und letzten Teil gehe ich das fertige HTML- und CSS-Gerüst im Detail durch und demonstriere mithilfe des Firebug-Plugins für Firefox, wie einfach und übersichtlich ein Webdesign ohne Tabellen, auf DIV-Containern basierend aussehen kann. Zu guter Letzt gehe ich auf die Vorteile der sog. W3C-Validität ein und erkläre, wie man seine Homepage auf Fehler hin überprüfen kann. Das fertige Layout ist online hier zu sehen. Außerdem steht das Layout als HTML/CSS zum Download zur Verfügung: Zum Download des HTML/CSSZu guter Letzt habe ich das Layout auch als e107-Theme vorbereitet: Zum Download des e107-Themes | |
| Länge: 10:35 Minuten | Video starten | |
