Anzeige
Tutorialbeschreibung

Homepage Workshop #2 - Tag 1

Homepage Workshop #2 - Tag 1

In nur drei Tagen zur fertigen Homepage.

Endlich, es ist soweit. Der legendäre:
Homepage Workshop #2
von eFoX

Nach 9 Monaten ist er fertig!
Ihr lernt hier vom Aufbau, über CSS + XHTML zur fertigen validen Seite.
Tag 1 - Aufbau
Tag 2 - CSS
Tag 3 - XHTML


Homepage‐Workshop #2


In 3 Tagen zur eigenen Homepage
(in XHTML 1.1)


Vorwort

Lieber Leser,

Nachdem ich im Jahre 2005 meine erste Workshopreihe zum Thema:
  • Homepage‐Erstellung in 5 Tagen
geschrieben hatte wurde ich regelrecht mit Anfragen zum Thema überflutet. Kein Wunder, ist die Reihe doch insgesamt ~220.000 Mal aufgerufen worden, somit also einer der meistgelesenen Workshops auf psd‐tutorials.de

Der damalige Workshop erläuterte in 5 Tagen die Planung, Erstellung und Aufbereitung einer eigenen Homepage, zur damaligen Zeit im „aktuellen“ Tabellenlayout. Tag 5, der die Publikation behandeln sollte, wurde nie fertiggestellt – es fehlte die Resonanz der Community.
Die Arbeit mit Div‐Boxen war noch nicht so populär, wie sie heutzutage ist. Durch diesen Workshop soll sich das ändern.

Mit diesem Workshop möchte ich an Teil 1 anknüpfen. Er soll für den interessierten Anfänger geeignet sein, der schon gewisse Kenntnisse im Umgang mit HTML/CSS vorweisen kann. Das ist ein neuer Workshop, möglicherweise kommen euch manche Themenpunkte bekannt vor.

Bastian (eFoX)


Inhalt

Tag 1 : Aufbau
Hier wird die grundlegende Form der Homepage aufgezeigt und geplant.
Themen: Aufbau durch (X)HTML, Konzeption, Farbwahl, Aussehen, Features

Tag 2 : CSS und Photoshop
Eine kleine CSS‐Einführung und Grafikaufbereitung in Photoshop
Themen: CSS Vorteile, Umsetzung, Grafikaufbereitung, das CSS schreiben

Tag 3 : HTML
Die Homepage entsteht in vielen kleinen Schritten
Themen: HTML schreiben, die Box‐Container einbauen und Text aufbereiten, Seiten organisieren


Homepage-Workshop #2 - Tag: 1 Aufbau

Thema:
Die grundlegende Form der Homepage wird aufgezeigt und geplant


Inhalt:
1. Aufbau durch XHTML
2. Konzeption
3. Farbwahl
4. Aussehen
5. Features


Hallo,

Willkommen zum Homepage-Workshop #2
Dies ist Tag 1, heute beschäftigen wir uns ziemlich theoretisch mit dem Aufbau der Page. Es ist von Vorteil, wenn du schon grundlegende Kenntnisse im Umgang mit HTML gesammelt hast.

1. Aufbau durch XHTML:

Dazu sollten wir uns erstmal fragen, was bedeutet XHTML überhaupt?
Extensible Hypertext Markup Language = Erweitertes HTML

Vorgänger war HTML 4.01, wird allerdings vom W3C Konsortium als Teilmenge von SGML nicht mehr weiterentwickelt. XHTML ist eine Neufassung von HTML 4.01 und leitet sich aus der Metasprache XML ab. Genauer gesagt, ist XHTML ein Teil von XML.
Vorteile von XHTML gegenüber HTML sind:
  • Erweiterbarkeit der Sprache
  • Verwendbarkeit von XML Werkzeugen
  • Kompatibilität zu existierender HTML Software

Soviel zur Geschichte von XHTML, detaillierter möchte ich darauf nicht eingehen.
Weitläufig im Web verbreitet, ist den Begriff XHTML mit der Trennung von Inhalt und Aussehen einer Seite zu bezeichnen. Um es treffender zu beschreiben:
- Der Inhalt wird durch XHTML ausgezeichnet.
- Das Aussehen wird in einem Stylesheet definiert. (CSS)

Der Vorteil aus dieser Verbindung liegt in einer leichteren Verwaltbarkeit der Homepage; so kann beispielsweise schnell eine Farbanpassung vorgenommen werden, ohne die Seite komplett neu zu schreiben.
Deshalb habe ich diesen beiden Eigenschaften jeweils zwei separate Tage gewidmet:
- Tag 2: CSS und Grafikaufbereitung
- Tag 3: XHTML

Es ist eigentlich sinnlos, diese Themen zu separieren, normalerweise wird an beiden gleichzeitig geschrieben; aber so bekommt man für den Anfang einen besseren Überblick, was aktuell passiert. Ich bitte es zu entschuldigen, wenn ich oft zwischen den Begriffen HTML und XHTML hin und her wechsle, gemeint ist natürlich XHTML.

2. Konzeption:

Am Anfang jeder Website steht ein Konzept. Es empfiehlt sich, seine Ideen immer auf ein Blatt Papier zu schreiben. Hat sich dann eine Struktur zum Vorgehen etabliert, kann immer nach dem gleichen Muster vorgegangen werden. Ein paar wichtige Punkte sollten nicht vergessen werden und gedanklich immer präsent sein:

1. Welches Thema will ich mit der jeweiligen Page vermitteln
2. Was für Kategorien ergeben sich daraus
3. Welche Leute sind meine Zielgruppe
4. Seitenaufbau
5. Farben
6. Seitenname (optional: Logoentwurf)
7. Technische Umsetzung der Seite

Als denkbar schlechtes Beispiel, werde ich diese Punkte an diesem Workshop erläutern.
zu 1: Inspiration zur „modernen“ Homepagegestaltung
zu 2: Aufbau, Umsetzung, XHTML, CSS
zu 3: Personen mit Grundkenntnissen in HTML
zu 4: Ein schlichtes, vertikal im Browser zentriertes, Layout
zu 5: Nach Laune, allerdings mit der wichtigste Punkt
zu 6: Homepage Workshop #2
zu 7: Inhalt: XHTML, Layout: CSS – „Aufbau durch Box-Modell“

Ein besseres Beispiel zur Konzeption könnt ihr euch selbst zurechtlegen, beispielsweise wenn ihr eurer „Portfolio“ mit diesem Tutorial plant.

Das Internet ist voll mit diversen Checklisten dazu, was es für Webseiten zu beachten gibt, meine „minimale“ Konzeption ist ausreichend für eine private Seite.

3. Farbwahl:

Jetzt wird es bunt…

Die Farbwahl steht an; wie schon im Workshop 1 empfehle ich euch einfach, bei absoluter Einfallslosigkeit eine Suchmaschine eures Vertrauens zu bedienen und den Begriff Colormatch einzugeben, hier könnt ihr euch nach euren Vorlieben verschiedene Farbwünsche zusammenstellen oder schon aus fertigen Farbpaletten auswählen.

Ich habe mich für folgende Farben entschieden:

Bilder


Auf der Page wird es unterschiedliche Grautöne geben. Die Farbe Lila/Magenta wird für den Header bzw. Banner gebraucht; oder auch um Hyperlinks hervorzuheben.

1. Wird die Seiten-Haupthintergrundfarbe
2. Farbe für Elemente im Content
3. Haupthintergrundfarbe im Content
4. Wird für den Header im Seiten-Haupthintergrund benutzt
5. Header über dem Content

Jetzt habe ich schon 2x das Wort Content und 2x Header benutzt, ohne dass ihr wisst, was ich damit meine, das erfahrt ihr nun.


4. Aussehen:

Die aufmerksamen Leser wissen bis jetzt Folgendes:
- Schlichtes, vertikal zentriertes Layout im Browser - Aufbau durch „Box-Modell“ - Farben

Diese Stichpunkte in eine Grafik umgesetzt, so stelle ich mir die Seite vor:

Bilder


Und was meint ihr dazu? Kann doch ’ne ganz schicke Homepage werden?

Kurz das „Box-Modell“ formuliert, was das genau ist, kommt noch:

  • Seitenhintergrund (body background) Grau, mit lila Header (repeat-x)
  • Div-Container (wrapper) bewirkt vertikale Zentrierung, Hintergrund in Weiß
  • Content-Header und Navigation in Magenta und Grau
  • Div-Container (sidebar) in hellerem Grau
  • Footer
Wollt ihr mal sehen, wie die fertige Seite aussehen wird?

Bilder



5. Features:

Das Navigationsmenü ist nicht vertikal angeordnet, sondern horizontal. Das spart eine Menge Platz und es ist einfacher, die verschiedenen Kategorien zu finden.
Die Linke Seitenbox ist ideal, um kleine Bilder, Kommentare oder Beschreibungen zur jeweiligen Rubrik anzuzeigen. Ein Feature an dieser Stelle: diese kann komplett weggelassen werden, sodass nur „Content“ angezeigt wird, um beispielsweise eine große Bildergalerie anzuzeigen.
Weiterhin, der Footer, der euch erlaubt, kleine Copyright Verweise anzubringen, letzte Aktualisierungen oder einen Verweis auf validiertes HTML / CSS.



Weiter geht es mit Tag 2: CSS und Grafikaufbereitung

Wärmt schon mal Photoshop an und macht euch ein Konzept & Farbideen zurecht, natürlich könnt ihr auch das „schöne“ Lila von mir übernehmen und später euren eigenen Stil ausprobieren.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von rabbitdesign
  • 22.12.2013 - 19:49

auch hierzu: Super gemacht! Ganz großes Lob

Portrait von Forynia
  • 30.09.2013 - 13:52

Vielen Dank :) mal sehen wie es weitergeht.

Portrait von Reen36
  • 20.08.2013 - 12:55

hammer gut bin ein riesen stück weiter

Portrait von shenja91
  • 04.04.2013 - 23:48

wirklich gut, kurz und knapp das wichtigste erklärt

Portrait von visi1983
  • 16.07.2012 - 00:22

Super Danke für die Inspiration

Portrait von JanniNanni
  • 28.02.2012 - 16:45

Sehr vielen Dank,
Super Tutorial hat mir wirklich geholfen!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 05.01.2012 - 23:24

Werd wohl erstmal Html verstehen müssen, sonst bringt´s mir nichts. Schade.

Portrait von Abendsegler
  • 05.12.2011 - 20:10

Endlich ein Tutorial, das mir als Anfänger weiterhilft.

Portrait von apeljuice
  • 01.12.2011 - 06:01

Ein wirklich gutes Tutorial! Hab mir gleich noch die anderen Teile mit runtergeladen! :) Super!

Portrait von Estielle
  • 23.10.2011 - 16:38

Vielen Dank für die Mühe. Hat mir schonmal weitergeholfen, allerdings blick ichs noch nicht so ganz :D

Portrait von Ruffydi
  • 18.10.2011 - 19:12

Vielen Dank, für mich als anfänger leicht und verständlich Erklärt. Ich bin schon gespannt auf die anderen Teile.

Portrait von Elchblender
  • 09.08.2011 - 09:09

OK, ich wärme mein PS an / vor!!! Und dann ......

Alles in Allem schon mal GUT!!! Danke

Portrait von sad23
  • 24.07.2011 - 17:12

top, kurz und gut! hat mir sehr geholfen!

Portrait von Naye
  • 20.07.2011 - 09:19

Genau, was ich gerad brauche - vielen Dank!

Portrait von Slyzza
  • 14.07.2011 - 11:45

ist sehr interessant geschrieben und durchaus für anfänger verständlich

Portrait von DaNino
  • 13.07.2011 - 16:17

für Anfänger sehr gut erklärt!

Portrait von Feddmund
  • 16.04.2011 - 17:00

Klasse, ich komme der Erstellung einer HP immer nähre =). vielen dank! ;)

Portrait von Non_Stop
  • 13.04.2011 - 21:32

ja danke schön, lese mir noch die nächsten Teile durch!

Portrait von snu_snu
  • 01.04.2011 - 15:52

Danke, hat mir sehr weiter geholfen!!!

Danke!

Portrait von Sasha
  • 28.03.2011 - 14:30

Danke für die Mühe, gut geschrieben. Ohne Teil zwei und drei aber noch nichts zum selbst ausprobieren.

x
×
×