Schritt 1 bis Schritt 3 Anleitung zur fertigen Webseite

.

1. Erstellen der Datenbank

   .

   Als erstes klicken Sie in der Schritt für Schritt Anleitung auf Schritt 1 > Datenbank Verwaltung.

   

   .

   Hier geben Sie die Datenbankdaten für die Datenbank, die Sie am Anfang bei Ihrem Provider erstellt haben, ein.

   Nach Eingabe der Daten drücken Sie bitte auf Speichern.

   Jetzt werden die Tabellen in der Datenbank erstellt.

   Dies dauert ein paar Minuten. Nach erfolgreichem Abschluss, befinden Sie sich wieder bei der Schritt für Schritt Anleitung.

   Je nach PC und Internetgeschwindigkeit, dauert dies ein paar Minuten. (Sollte sich nach einiger Zeit die Webseite nicht wieder automatisch vollständig laden, oder es wird Ihnen nur eine leere Seite angezeigt, dann schließen Sie den Browser und öffnen diesen erneut.) Geben wieder Ihre Domain ein.

   

   .

   Jetzt können Sie sehen, dass die Datenbank erfolgreich erstellt wurde. Damit die Webseite weiter gestaltet werden kann, muss man sich wieder in den Adminbereich einloggen.

   

   .

2. Das Layout für die Webseite gestalten

   .

   WICHTIG:
   Bevor sie beginnen die Layoutmaße einzugeben, muss zuerst entschieden werden, ob die Webseite zwei oder drei Spalten erhalten wird.

   Erhält sie drei Spalten, so setzen sie bitte bei 3 Spalten Webseite einen Haken und drücken auf SPEICHERN.

   Wenn Sie eine zweispaltige Webseite haben möchten, können Sie diesen Punkt überspringen und gleich mit den Seitenbreiten anfangen.

   

   .

   Diese Einstellung können Sie nachher wieder mühelos ändern.

   .

   Aber: Wurde ein Dreispaltiges Layout angelegt und wird dann dieses Layout später zu einem Zweispaltigen Layout geändert, dann sind die Module, die sie in der rechten Spalte positioniert haben( Navigation, Bilder …..), nicht mehr sichtbar.

   Es besteht die Möglichkeit, die Navigation von den Rechtsseiten und die Navigation des Benutzerkontos(betrifft den Onlineshop) auf der Rechten Seite zu platzieren. Ist dies geschehen und Sie ändern das dreispaltige Layout zu einen zweispaltigen Layout, so müssen Sie die Navigation im Navigationsmenü auch ändern.

   .

   Wir werden uns zuerst mit dem zweispaltigen Layout befassen.

   .

   Ganze Seitenbreite: Hier ist die Breite der Webseite 100%. D.h. Die Breite der Webseite füllt immer die Bildschirmbreite aus.

   .

   Manuelle Seitenbreite: Hier legen Sie die Seitenbreite manuell fest.

   .

   Diese Einstellung kann beliebig geändert werden.

   .

   Als Beispiel nehmen wir die manuelle Seitenbreite. Hier sind schon Beispieldaten im Vorfeld eingegeben worden.

   .

   1. Klicken Sie jetzt auf Manuelle Seitenbreite. Bevor Sie weitermachen, müssen Sie warten, bis sich die Seite nochmals lädt. Nachdem die Seite sich aktualisiert hat, sind alle Eingabefelder für die Manuelle Seitenbreite sichtbar geworden.
      

      .

   2. Jetzt geben Sie im Feld Seitenbreite in Pixel z.B. die Zahl 1050 ein und klicken auf Speichern. Nun sehen Sie, wie sich die Seitenbreite verändert. Die Seitenbreite kann beliebig oft verändert werden.
      

      .

      Nach jeder Änderung müssen die anderen Felder angepasst werden.

      Info:
      Der Trennstrich zwischen linker Navigation und Inhaltsbereich ist eine Grafik, die im Navigationspunkt „Design Hauptwebseite“ ausgewählt werden kann. Dazu aber später mehr.

   3. Bei der Einstellung des Kopfbereichs muss zuerst ausgewählt werden:

      Ganze Seitenbreite: Die Breite des Kopfbereichs ist 100%. D.h. Die Breite füllt immer die Bildschirmbreite aus.

      Manuelle Seitenbreite: Hier legen Sie die Breite des Kopfbereichs manuell fest.

   4. Wählen Sie bei der Einstellung des Kopfbereichs die Manuelle Seitenbreite und warten bitte, bis sich die Seite aktualisiert hat.

      Jetzt geben Sie z.B. die Zahl 1200 ein. Nun sehen Sie, wie der Kopfbereich gleichmäßig den Seitenbereich überragt.

      Bleiben wir bei dieser Einstellung, bis der Menüpunkt „Design Webseitenkopf“ erklärt wurde.

   5. Füllen Sie nun die anderen Felder aus. Verwenden Sie vorerst die angegebenen Zahlen. Diese können später mühelos wieder geändert werden.
   6. Sind die Maße alle wie gewünscht eingetragen, klickt man auf Speichern.

   .

   Das aktuelle Design der Webseite:

   .

   

   

   .

3. Die Platzierung der oberen Navigation

   Sie haben hier die Möglichkeit die Platzierung der Horizontalen Navigation zu bestimmen. In dieser Navigation können 4 Hauptnavigationspunkte bestimmt werden(z.B. Startseite, Wir über uns…..)

   .

   

   .

   Möchten Sie Ihr Logo auf der linken Seite der horizontalen Navigation einfügen, so machen Sie einen Haken bei Logo links Ja/Nein und geben den Bildnamen mit Endung bei Logoname ein. Wenn Sie bei Abstand von Bild bis zum ersten Reiter eine Zahl eingeben, können Sie bestimmen, wie weit der erste Reiter vom Bild entfernt ist. (Es verschiebt sich die ganze Navigation nach rechts).

   Nach Eingabe drücken Sie auf „Speichern“.Diese Einstellung kann nach belieben geändert werden.

   Um die horizontale Navigation im wahren Design zu erhalten, müssen zuerst die Schritte 8 und 9 abgearbeitet werden.

   Dazu später mehr, oder wenn Sie zu Schritt 8 springen, können sofort die horizontalen Navigationspunkte eingegeben und bei Schritt 9, das Design gestaltet werden.

   .

4. Ihr Logo ganz Oben auf Ihrer Webseite platzieren

   .

   Sie haben hier die Möglichkeit Ihr Logo Oben Links, Oben Mitte oder Obern Rechts zu positionieren. Dazu markieren Sie bitte die gewünschte Stelle. Danach geben Sie den Logonamen ein.

   Dazu kann noch eine Hintergrundfarbe ausgewählt und Abstände eingegeben werden.

   .

   

   .

   Neben dem Logo können noch zwei Slogans eingegeben werden. Dazu kann die Schriftart, Schrittgröße und Schriftfarbe eingestellt werden.

5. Die Platzierung der linken Navigation

   .

   Hier wählt man aus, ob man eine Navigation auf der linken Seite möchte.Möchte man keine, kann man diesen Punkt überspringen.

   Da in unserem Beispiel der Onlineshop mit beschrieben wird, wähle ich Auf der linken Seite aus.

   .

6. Auswahl der Navigationsart (Nur für Onlineshop)

   .

   Hier kann ausgewählt werden, ob die Untermenüs in der Produktnavigation

   .

   1. Untermenü klappt seitlich auf

      .

      

      .

   2. Untermenü klappt nach unten auf
      

      .

   3. Navigation ohne Klappfunktion

      .

      d.h. klickt man auf einen Reiter, wird eine extra Seite für diese Unterkategorie geöffnet. Dort werden die Unterkategorien durch Grafiken dargestellt.
      Siehe Beispiel

      .

      

   

   .

7. Das Design für die Hauptwebseite gestalten

   .

   Um das Design der Hauptwebseite zu gestalten klicken Sie jetzt entweder Links in der Navigation Adminbereich auf „Design verändern-->Design Hauptwebseite“ oder in der Schritt für Schritt Anleitung auf „Schritt 3“.

   .

   

   .

   Hier kann für die ganze Webseite die Haupteinstellung vorgenommen werden. Einen Farbverlauf erreicht man, indem man die Hintergrundfarbe1 und Hintergrundfarbe2 auswählt.

   .

   Entscheidet man sich für ein Hintergrundbild, so muss man das Bild so bearbeiten, dass es auch für die größte Auflösung noch voll angezeigt wird(d.h. dass es nicht abgeschnitten wird). Oder man macht einen Haken für die Vertikale Wiederholung bei „Bild Wiederholung Y-Achse“ und für die horizontale Wiederholung bei „Bild Wiederholung X-Achse“.

   .

   Man sollte entweder die Hintergrundfarben oder das Hintergrundbild auswählen. Beides zusammen geht zwar, ist aber nicht sinnvoll.

   

   .

   Es stehen schon Hintergrundbilder zur Auswahl. Möchte man ein eigenes Hintergrundbild einfügen, so geht man folgendermaßen vor:

   .

   1. Klicken Sie in der linken Navigation auf „Layout Gestaltung->Eingabe Webhintergrund“.
   2. Geben bei „Bildpfad“ den Namen des Hintergrundbildes ein und drücken auf Speichern. Jetzt erscheint der Bildname in der unteren Tabelle.

      .

      

      .

   3. Über den Button über dem Bildnamen kann dieser wieder entfernt werden.
   4. Laden Sie jetzt das eingegebene Bild im Webspace in den Ordner „images/hintergrund“.
   5. Danach klicken Sie in der linken Navigation wieder auf „Design verändern->Design Hauptwebseite“.
   6. Wählen Sie jetzt das neue Bild in der Auswalbox „Hintergrundbild-Pfad“ aus und drücken auf Speichern.

      Haben Sie das Bild jetzt zu klein erstellt, wird es normalerweise auf der X- und Y- Achse abgeschnitten.
      (Siehe Bild)

      .

      Diese Hintergrundbild erscheint auf der linken Seite der Webseite und ist zu klein für diese Auflösung als Webseitenhintergrund.

      Man kann sich jetzt Abhilfe schaffen, wenn man auf die Bildwiederholung Y- und X-Achse drückt. Speichern nicht vergessen!

      Jetzt wird das Bild über die ganze sichtbare Webseite verteilt.

      .

      

      .

   7. Möchte man anstatt eines Bildes lieber einen zweifarbigen Hintergrund, so wählt man bei „Hintergrund-Pfad“ Kein aus und entfernt die Haken bei Bild Wiederholungen X- und Y-Achse.
   8. Wählen Sie jetzt bei Hintergrundfarbe 1 und 2 die gewünschten Farben aus und drücken auf Speichern.
   9. Jetzt fehlt noch die Eingabe der Standard Schriftart, Schriftfarbe und Schriftgröße für die ganze Webseite.

      Dazu wählt man:

      Bei „Schriftfarbe“ z.B. die Farbe Schwarz aus.

      Bei „Schriftart“ z.B. die Schriftart Arial aus.

      Bei „Schriftgröße“ gibt man z.B. die 1 ein. Die Standard Schriftgröße ist bei Webseiten 1em=100%. Gibt man z.B. 0.9 ein, so setzt man als Komma einen Punkt.

   10. Hat man alles eingegeben, so drückt man auf „Speichern“.

   

   .

8. Das Design für den Bodybereich gestalten

   .

   Wir befassen uns jetzt mit dem zweiten Block auf dieser Seite, der Einstellung für die „Bodyseite“.

   .

   Das ist der Seitenteil, der gerade die Hintergrundfarbe Weiß und einen dunkelblauen Trennbalken zwischen der linken Navigation und dem Inhaltsbereich hat.

   .

   Wenn Sie später einmal die Einstellung auf „Ganze Seitenbreite“ umstellen würden, wäre nur dieser Bereich sichtbar.

   .

   Hier hat man auch die Wahl, eine Grafik oder eine Farbe für den Hintergrund zu verwenden.

   .

   

   .

   Entscheidet man sich für ein Hintergrundbild, so muss man das Bild so bearbeiten, dass es auch für die größte Auflösung noch voll angezeigt wird(d.h. dass es nicht abgeschnitten wird). Oder man macht einen Haken für die Vertikale Wiederholung bei „Bild Wiederholung Y-Achse“.

   Es stehen schon Hintergrundbilder zur Auswahl. Möchte man ein eigenes Hintergrundbild einfügen, so geht man folgendermaßen vor:

   .

   

   1. Klicken Sie in der linken Navigation auf „Layout Gestaltung->Eingabe Bodyhintergrund“.

      .

      

      .

   2. Geben Sie bei „Bildname“ den Suchnamen und bei „Bildpfad“ den Namen mit Endung (s.Bild) des Hintergrundbildes ein und drücken auf Speichern. Jetzt erscheint der Bildname in der unteren Tabelle.
   3. Danach laden Sie das Bild in den Ordner „images/spaltentrennung“ in Ihrem Webspace.
   4. Ist dies getan, kann die neue Hintergrundgrafik bei „Bodyhintergrund“ ausgewählt werden. Wenn Sie diese auf der Y-Achse wiederholen müssen, machen Sie bitte einen Haken bei „Wiederholung Y-Achse“ und drücken auf Speichern.
   5. Man hat noch die Möglichkeit für die linke und rechte Seite des Bodybereichs einen Rahmen zu gestalten.
      Dazu wählen Sie bei „Außenrahmenfarbe“ die Farbe aus und geben bei „Rahmengröße“ eine ganze Zahl ein. Hier kann keine Kommazahl eingegeben werden, da diese Größe als Pixel benannt wurde.

      .

      

      .

      In diesem Block wäre jetzt noch der Eckenradius übrig. Mit diesem befassen wir uns dann im Reiter „Design Webseitenkopf“.

      .

      Die anderen zwei Blöcke „Hintergrundfarbe oder Hintergrundbild für die Linke Spalte“ und „Hintergrundfarbe oder Hintergrundbild für die Rechte Spalte“ werden dann nach Eingabe der Navigation behandelt.

   .

   Das aktuelle Design der Webseite:

   .

   

   .

.