NVU Composer: Die Startseite gestalten und veröffentlichen

Nachdem Sie die Vorlage per FTP auf Ihren Webspeicherplatz übertragen haben, können Sie mit der Gestaltung der Startseite beginnen. Die Startseite ist die erste Seite Ihrer Homepage, die Besucher beim Aufruf Ihrer Internetadresse zu sehen bekommen. Es ist die Visitenkarte Ihrer Homepage und sollte bereits Appetit auf mehr machen. Je attraktiver die Startseite ist, umso länger werden die Besucher auf Ihrer Homepage verweilen.

Zur Gestaltung der Startseite mit dem Nvu Composer gehen Sie folgendermaßen vor:

1. Starten Sie den Nvu Composer (Start | Alle Programme | Nvu | Nvu), und klicken Sie auf die Schaltfläche Öffnen. Wechseln Sie anschließend in den Ordner der Festplatte, in den Sie die Vorlagendateien entpackt haben – etwa Eigene DateienMeine HomepageKanada-Reisetipps –, und klicken Sie doppelt auf die Datei index.html. Hinter der Datei index.html verbirgt sich die Startseite Ihrer Homepage.

index.html nicht umbenennen

Bei jeder Webseite wird einheitlich der Name index.html für die Einstiegsseite einer Homepage verwendet. Nennen Sie die Datei index.html daher nicht um, da ansonsten beim Aufruf Ihrer Internetadresse eine Fehlermeldung erscheint. Bei den Unterseiten gibt es eine solche Beschränkung nicht; hier können Sie beliebige Namen verwenden, etwa anreise.html, tipps.html oder impressum.html.

3. Im Bearbeitungsfenster erscheint die Startseite Ihrer Homepage. Da Sie eine Vorlage verwenden, sind bereits einige Beispieltexte vorhanden. Der Vorteil der Vorlage: Die komplette Seitenaufbau (links Navigation und rechts Inhalt) ist bereits vorgegeben; sie müssen das Grundgerüst nicht selbst „bauen“.

Die Gestaltung der Homepage ist jetzt einfach: Überschreiben Sie die Beispieltexte mit eigenen Inhalten. Platzieren Sie die Einfügemarke innerhalb des Beispieltextes, und überschreiben Sie ihn einfach. Geben Sie zum Beispiel oben links den Titel Ihrer Webseite ein. Ersetzen Sie die englischen Bezeichnungen der Navigationsbereiche durch die gewünschten Überschriften. Und im rechten Bereich geben Sie Überschrift und Text für den ersten Beitrag auf der Homepage ein.

Die Bedienung des Editors ist so einfach wie bei der Textverarbeitung. Auch hier finden Sie in der Symbolleiste Schaltflächen zur Textgestaltung. Sollte beispielsweise die Textgröße oder –farbe nicht zusagen, wählen Sie über die Schaltflächen einfach eine andere Textformatierung.

4. Sobald die Texte angepasst sind, speichern Sie die Änderungen per Mausklick auf die Schaltfläche Speichern.

5. Rufen Sie den Befehl Format | Seitentitel und –einstellungen auf, und tragen Sie den Titel Ihrer Webseite sowie eine Kurzbeschreibung ein. Bestätigen Sie die Eingaben mit OK.

6. Im nächsten Schritt können Sie die Beispielgrafiken der Vorlage durch ein eigenes Foto ersetzen. Hierzu ist ein wenig Vorbereitung nötig.

Gute Bildbearbeitungsprogramme

Für die Bearbeitung der Internetbilder eignet sich Fotosoftware wie Adobe Photoshop Elements (www.adobe.com/de/products/photoshopelwin/ – ca. 90 Euro) oder Paintshop Pro (www.corel.com – ca. 80 Euro). Eine gute kostenlose Alternative ist Google Picasa (picasa.google.de – kostenlos).

Bearbeiten Sie das gewünschte Foto zuerst mit einem Bildbearbeitungsprogramm, so dass es bereits im Vorfeld die richtigen Maße hat, zum Beispiel 512 x 160 Pixel wie das Beispielfoto. Und ganz wichtig: Speichern Sie die Grafik als JPG-Datei im img-Ordner Ihrer lokal gespeicherten Homepage-Dateien, etwa im Ordner Eigene DateienMeine HomepageKanada-Reisetippsimg.

7. Platzieren Sie die Einfügemarke an die Position, an der die Grafik erscheinen soll. Sie können auch eine bestehende Grafik ersetzen, indem Sie sie per Mausklick markieren. Klicken Sie anschließend auf die Schaltfläche Grafik.

Wählen Sie jetzt über die Schaltfläche Durchsuchen die gewünschte Grafikdatei aus. Geben Sie in das Feld Alternativtext eine kurze Bildbeschreibung ein, und klicken Sie auf OK. Die Grafik erscheint daraufhin im Editorfenster.

Die Position und Größe der Grafik können Sie auch im Nachhinein noch verändern. Hierzu klicken Sie doppelt auf die Grafik, um das Dialogfenster Grafik-Eigenschaften einzublenden. Im Register Größe legen Sie anschließend die gewünschten Abmessungen fest. Wichtig ist das Register Erscheinungsbild. Hier bestimmen Sie, wie viel Platz um die Grafik bleiben soll und wie sich der Text an der Grafik ausrichtet. Mit der Einstellungen Rechts umbrechen fließt der Text rechts um die Grafik herum.

8. Sobald die erste Version der Startseite fertig ist, können Sie Seite auf Ihrer Homepage veröffentlichen. Klicken Sie zunächst auf die Schaltfläche Speichern, um die aktuelle Version auf der lokalen Festplatte zu speichern.

Anschließend klicken Sie auf die Schaltfläche Publizieren. Kreuzen Sie im folgenden Fenster das Kontrollkästchen Grafiken und andere Dateien hinzufügen an. Wählen Sie die Option Dieses Site-Unterverzeichnis verwenden, und geben Sie das Unterverzeichnis img/ (inklusive Schrägstrich) an. Damit sorgen Sie dafür, dass alle eingebetteten Bilder automatisch in das Unterverzeichnis img Ihrer Homepage kopiert werden.

Klicken Sie auf die Schaltfläche Publizieren, um die Webseite sowie die eingefügten Grafiken auf Ihren Webspeicherplatz zu übertragen. Im Statusfenster erkennen Sie, welche Seiten und Dateien erfolgreich kopiert wurden.

Sobald die Übertragung abgeschlossen ist, können Sie sofort online prüfen, wie die Homepage im Browser aussieht. Starten Sie den Internet Explorer, und rufen Sie die Adresse Ihrer Homepage auf. Sobald das Grundgerüst der Startseite steht, können Sie im nächsten Schritt die Unterseiten gestalten und untereinander verlinken. 

Die mobile Version verlassen