7.3.8 Portfolio-Site erstellen
Worum geht es?
Dieses Modul rundet die Module «Basiskurs XHTML/CSS» [7.3.1] und «Elementare CSS-Eigenschaften» [7.3.2] mit einer praktischen Arbeit ab. Es setzt voraus, dass du diese beiden Module bearbeitet und verstanden hast. Am Rande knüpft es zudem an Themen an, die in den Modulen «Grundlagen Webdesign» [7.3.3] und «Bilder im Web» [7.3.4] behandelt werden. Es ist nicht zwingend notwendig, diese beiden Module zu kennen, kann aber von Vorteil sein.
Die Basis -> Software
Zur Bearbeitung des Moduls wird minimal ein TextEditor (z. B. Adobe Dreamweaver im Code-Modus) und eine aktuelle Version von Mozilla Firefox benötigt. Für die Erweiterung oder Anpassung der Portfolio-Site benötigst du zudem Adobe Photoshop (oder ein anderes Programm zum Bearbeiten uns Exportieren von RGB-Bildern). Zu Beginn des Moduls sind einige Screenshots aus Adobe Dreamweaver abgebildet. Das Modul ist aber kein Dreamweaver-Kurs. Du kannst auch mit einem anderen Texteditor arbeiten (z. B. BBEdit, Coda, TextMate, TextWrangler etc.).
Ziele
- Vertiefung des CSS und «Abrundung» des bestehenden Wissens
Inhalt
- Die Portfolio-Site
- Grundgerüst
- Vorbereitung
- Layout horizontal zentrieren
- Header
- Content
- reset.css Stylesheets des Browsers überschreiben
- CSS fürs Layout
- Der Feinschliff
- Titel und Fliesstext
- Navigation
- Anpassungen am Inhalt
- About und Home
- Layoutanpassungen
- Zeilenumbrüche
- E-Mail-Link
- Textfarbe
- Die Home-Seite
- Letzte Optimierungen
- Layout-Jump
- Schulterhöhe
- Anpassungen für InternetExplorer
- Code validieren
- Pimp my Portfolio: Slideshow mit JavaScript
- Das Dreamteam: XHTML, CSS und JavaScript (JS)
- Vorbereitungen
- Stylesheet, Libraries und Script einbinden
- Script initialisieren
- Zum Schluss wird's noch persönlich
- Wo finde ich weitere Information zu XHTML und CSS?
- Und wenn's nicht klappt wie geplant
Autor
René Keller, ala werkstatt, Zürich
Dieser Bereich ist nur für Lern-Werkstatt Abonnenten bestimmt.
Sie müssen angemeldet sein und die notwendigen Rechte besitzen, um diese Seite
sehen zu dürfen. Bitte melden Sie sich oben rechts unter Login an oder klicken Sie hier,
um sich zu registrieren.
