allgemeines zum Seitenaufbau einer Webseite

Um es gleich vornweg zu nehmen - diese Seiten beziehen sich jetzt für das Weiterarbeiten auf die Seiten "Grundlagen", ohne deren Grundkenntnisse hier kein weiter machen möglich ist!
Solltest Du also diese Seiten übersprungen haben, dann wirst Du eventuell mit den weiteren Ausführungen Probleme bekommen.

Bevor wir aber zum ersten Seitenaufbau gehen noch folgende Hinweise und Grundgedanken:

1. Solltest Du Dich mit einem Fotoprogramm auskennen, dann kannst Du Dir auch ein Layout mit diesem entwerfen.
Der Vorteil bei einem Bildentwurf vor dem Seitenlayout in HTML ist der, dass Du die Bilder aus dem Bilddesign "nur" noch ausschneiden musst um diese dann mit der CSS-Datei einzubinden.
Sehr gut geeignet hierfür sind kostenpflichtige Programme (selbst der etwas in die Tage gekommene Adobo Photoshop 7 erfüllt diese Aufgaben noch sehr gut) - nicht unbedingt dafür geeignet sind Freeware-Programme.

2. Entscheidung Tabellen- oder Blockbauweise

2.1. Die Tabellenbauweise
ist die etwas einfachere Form des Seitenaufbaues und wird mit zwei oder mehr einzeiligen Tabellen durchgeführt.
Die erste Tabelle erfasst dabei das Logo und das Banner und die Zweite die Links und den Seiteninhalt. Dazwischen kann noch eine einzeilige Tabelle gesetzt werden um zum Beispiel die Hauptseitenlinks zu erfassen.
Diese Bauweise ist sehr gut geeignet für dynamische Layouts über die gesamte Fensterbreite des Browsers, außerdem sind hier nicht unbedingt mehrere Browser notwendig um das Aussehen zu kontrollieren.

2.2. Die Blockbauweise
ist die etwas schwierigere Form des Seitenaufbaus, dafür benötigt sie aber weniger Quelltext wie die Tabellenbauweise.
Wenn das Layout auf eine feste Breite des Browserfensters festgelegt wird, dann ist sie auch für Anfänger sehr gut geeignet, voraus gesetzt, es werden mehrere Browser zur Kontrolle eingesetzt. Schwieriger wird diese Variante bei dem dynamischen Seitenaufbau (Nutzung des gesamten Browserfensters), denn hier kommen die unterschiedlichen Interpretationen der Browser voll zum Tragen.

3. Browser
In den Seiten der Grundlagen habe ich es bereits erwähnt, dass die verschiedenen Browser Anweisungen in HTML und CSS unterschiedlich verarbeiten und dementsprechend auch anzeigen.
Gerade bei der Blockbauweise kann es hier zu sehr unterschiedlichen Darstellungen kommen - also installiere Dir am besten die drei wichtigsten Browser: Internet Explorer (meist bei Windows vorhanden), Firefox und Opera.
Auch ein Textbrowser wie zum Beispiel Lynx sollte vorhanden sein um sich die Informationen nur als Text anzeigen zu lassen. Diese Darstellung liest in etwa auch der Textbrowser der Behinderten aus beziehungsweise vor. Also sehr nützlich um auch diese Besucher zu erreichen.

Auch für diese Seiten gilt - wir erstellen erst einmal nur die Startseite (index) und die weiteren Seiten erstellst Du später mittels kopieren und einfügen mit anschließendem umbenennen der so erstellten neuen Seite.

Wichtig dabei ist - die Seite sollte zu mindestens Dich ansprechen!

Folgende Workshops habe ich hier für Dich vorbereitet, welche Du der Reihe nach abarbeiten solltest:

Layout mit einem Bildbearbeitungsprogramm erstellen:
In diesem Workshop erläutere ich Dir an Hand des Programmes Paint.net die Erstellung eines Layouts für eine Homepage. Sinngemäß gilt dies für alle weiteren Programme, hier können sich aber verschiedene Elemente anders nennen oder in anderen Optionen untergebracht sein.
- Hier gehts zum Workshop für das Design/Layout mit Paint.net -
- Hier gehts zum Workshop für das Design/Layout mit Adobe Photshop Elements -

Hintergrundbild erstellen
Der Entwurf ist verhältnismäßig groß - so groß darf ein Hintergrundbild nicht sein. Wie Du ein kleineres Hintergrundbild erstellst und auf welche Tücken Du dabei aufpassen musst, das erfährst Du in diesem Workshops.
- Hier gehts zum Workshop für Hintergrundbilder mit Paint.net -
- Hier gehts zum Workshop für Hintergrundbilder mit Adobe Photshop Elements -

Logo erstellen
In diesen kleineren Workshops erläutere ich Dir, wie Du ein Logo passend zum Layout erstellen kannst.
- Hier gehts zum Workshop für Logo mit Paint.net -
- Hier gehts zum Workshop für Logo mit Adobe Photshop Elements -

Banner erstellen
Banner haben oft feste Größen. Standartgrößen sind zum Beispiel: 90 x 60px (Pixel), 120 x 90px, 234 x 60px, 468 x 60px, 728 x 90px.
Feste Größen lassen sich schlecht mit Dynamik kombinieren, deshalb gibt es im zweiten Teil zu jedem Workshop noch eine Möglichkeit, dynamische Banner zu erstellen, welche Du dann als Hintergrundbild über die gesamte Seitenbreite anzeigen lassen kannst.
- Hier gehts zum Workshop für Banner mit Paint.net -
- Hier gehts zum Workshop für Banner mit Adobe Photshop Elements -
Mehr als ein Banner kannst Du unter anderem nutzen, wenn Du verschiedene Themen auf Deiner Homepage erstellen willst oder auch wenn Du eine Rotation (wechselnde Banner bei Seitenaufruf) machen möchtest.

Buttons erstellen
Diese Workshops sind eher klein und hier wird Dir gezeigt, wie Du Buttons erstellen kannst.
- Hier gehts zum Workshop für die Buttons mit Paint.net -
- Hier gehts zum Workshop für die Buttons mit Adobe Photshop Elements -

 

Google