| Planung einer Website |  |      |
|
|
 HOME |
 ZURÜCK SITEMAP |
Bei der Planung einer Webseite sollten sie in 3 Schritten vorgehen:01) Ziel der Webseite feststellen und erste Überlegungen zum Aufbau 02) Planung und Umsetzung des Entwurfs, Seitenaufteilung und Menüführung 03) wirtschaftliche, vorausschauende Vorgehensweise bei der Erstellung Der Entwurf wurde auf Papier skizziert. Nun geht es an die weitere Planung für Farbgebung, Seitenaufteilung, Menüführung und die Umsetzung in HTML-Techniken. Wenn ihr Entwurf in etwa so aussieht (siehe unten), ist die Entscheidung ob sie mit oder ohne Frames arbeiten wollen, noch offen. 
Jede Farbe vermittelt einen anderen Eindruck - der Bauch entscheidet. 
... weiter am PC 
Bisher gibt es lediglich einen Entwurf auf Papier. Häufig wird zu diesem Zeitpunkt mit einem Grafikprogramm ein digitales Bild entworfen. 1024 Pixle breit, mit den vorgesehenen Spalten und Menübereichen.Fürs Auge: Plazieren sie einige Grafiken in passender Größe und Farbe, Fülltext und angedeutete Menüschaltflächen oder Textlinks in die entsprechenden Bereiche.  Die Entscheidung für ein Design mit oder ohne Frames sollte nun getroffen werden. Grafikfragmente als HTML-Bereiche / Seitenelemente
Vorhaben: Dieser grafische Entwurf wird digital 'zerschnippelt'. Danach sollen die Bildschnipsel so in eine HTML-Seite eingebunden werden, dass das Produkt im Browserfenster wie die ursprüngliche Grafik aussieht.Nur damit kein Missverständnis aufkommt: Die 'zerschnippelten' Bildsegmente speichere ich als einzelne Grafiken ab. 
Mit dem HTML-Editor entwicklt man eine Seitenstruktur. Die Aufteilung des Browserfensters in einzelne Seitenbereiche wird über Frames, Tabellen und / oder DIV-Definitionen festgelegt. Die Abmessungen der Seitenbereiche entspricht der Größe der Grafiken. Diese Grafiken binde ich mit HTML-Befehlen in die Webseitenstruktur ein. Das Produkt sollte wieder so aussehen, wie der ursprüngliche Entwurf als komplettes Bild. Die Webseite besteht zu diesem Zeitpunkt lediglich aus Grafiken. Ungewollte Zwischenräume oder Verschiebungen deuten auf Fehler hin (siehe unten: Testen).  Dieses etwas umständlich scheinende Verfahren garantiert eine pixelgenaue Aufteilung des Browserfensters und eine präzise Positionierung der Seitenelemente. Dort, wo zum jetzigen Zeitpunkt die einzelnen Bildteile plaziert sind, werden später HTML-Anweisungen diese Bereiche füllen. So entstand ein genauer Rahmenentwurf für die Webseite. Das hier gezeigte Beispiel kann man mit oder ohne Frames realisieren. Auch die weitere Aufteilung des Inhaltsbereichs kann man mit DIV-Bereichen oder Tabellen erreichen. Die Entscheidung bleibt ihnen überlassen. Hauptsache die Struktur ist OK. Menüsystem und Rubriken Die Aufteilung des Projekts in Rubriken sollten jetzt bereits feststehen. Schließlich soll das Menüs-System genauso aufgebaut werden. Beispiel: Webseiten-Thema: Fußballverein; Rubriken: Jugend, Senioren, Schiedsrichter, ... Ich empfehle auf der Festplatte, im Hauptordner für ihre Webseite, nun für jede Rubrik erst einmal einen Unterordner anzulegen. Für die Grafiken ist ein separater Ordner ebenfalls angebracht.  Beispiel Menüsystem und Rubriken
Damit sind wir am Ende von Schritt 2: Planung und Umsetzung des Entwurfs, Aufteilung und Menüführung. Bis auf eines ...
* * *
Testen Nun ist es an der Zeit, ihr Konstrukt in verschiedenen Browsern anzeigen zu lassen. Wenn sie nicht alle Browser installieren möchten, laden sie ihre bisherige Arbeit auf den Server. Dann machen sie sich stadtfein und gehen ins nächste Internetcafe, rufen die Seite dort auf und ... ... bestellen sie zur Entspannung ein italienisches Kaffeegetränk. Wie wärs mit einem Cappuccino?  Falls sie bisher keine grauen Haare hatten, werden sich in genau diesem Augenblick die ersten anmelden. Lösungen für evtl. Probleme finden sie möglicherweise auf den unten gelisteten Seiten: Fehlersuche Als Beginner werden sie zu Anfang die größten Probleme mit ungewollten Abständen der Grafiken innerhalb von Frames, des Browserfensters und in Tabellen haben. Der Grundsatz heißt: Wenn sie dem Browser nichts über Abstände und Zwischenräume (margin, padding, cellspacing und cellpadding) mitteilen, macht er das was er für angemessen hält: Der setzt Default-Werte ein und die sind übrigens bei jedem Browser unterschiedlich und nicht Null (0). Das gilt auch für Tabellen! Tragen sie im <table>-Tag keine Attribute für cellspacing, cellpadding und border ein, bedeutet das nicht, dass diese Werte zwangsläufig Null (0) sind. <table cellspacing="0" cellpadding="0" border="0" ... >Also am Besten mit CSS erst einmal für den Body diese Werte auf Null setzen:
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
-->
</style>
Wenn das Ergebnis noch immer nicht ihren Vorstellungen entspricht und sie andere Fehler ausklammern können, lesen sie bitte zuerst meine am 27.03.2008 überarbeiteten Erklärungen auf der ersten Seite der Querverweise.Querverweise: Einführung Frames - Margins und RänderWarum sehe ich Scrollbars?Fenster- und Framegrößen richtig berechnenDefault Rander und Margins im Frame(set)Tipps zur Fehlersuche mit meinen Linealen Zur exakten Überprüfung von Elementbreiten könnte man mit CSS-Angaben eines meiner Lineale als Hintergrundgrafik für diese Bereiche einbinden. Wie das in der Paxis aussieht, lesen sie weiter unten. Lineale zum Download finden sie auf meiner Downloadseite: Download LinealeLineale als GIF-Datei in unterschiedlichen Breiten. Beispiel: Lineal 500 Pixel Breite 
Die Lineale haben eine 5 Pixel-Maßeinteilung. Die größeren Lineale haben zusätzlich rote Markierungen für 800 / 1024 Pixel. Im HEAD-Bereich notieren sie diese CSS-Anweisungen:
<style type="text/css">
<!--
.lineal{
margin:0px;
padding:0px;
background: url(lineal-500.gif) #FFFFFF ;
background-position: top left;
background-attachment: fixed;
background-repeat: no-repeat;
}
-->
</style>
Nun steht ihnen die Möglichkeit offen, nötigenfalls in mehreren HTML-Elementen das Lineal anzeigen zu lassen. Fügen sie dazu einfach das class-Attribut ein:
<HTML-Tag class="lineal" ... >
Erstellt: 23.02.2004 |
|
Planung einer Website 02
(blättern) Seite:
