Erstellen Sie Ihre erste Website!

Einführung Stellen Sie sich vor, Sie sind der Werbemanager eines kleinen Unternehmens für Bergabenteuer namens Bergsport GmbH. Sie haben mehr Bergerfahrung als die meisten Kollegen. Sie möchten den Kunden Ihre Begeisterung für die von Bergsport GmbH angebotenen Leistungen vermitteln. Sie wissen, dass eine verbesserte Kundenkommunikation die Expansion der Firma fördern würde. Deshalb beschließen Sie, eine Web-Präsenz für die Bergsport GmbH aufzubauen und NetObjects Fusion XII zum Erstellen der Site zu verwenden.

Ihre Ziele:

• Es soll für den Kunden einfacher werden, mehr über die Bergsport GmbH zu erfahren. • Der Kontakt zur Firma soll für den Kunden vereinfacht werden. • Der Kunde soll sich auf geplante Veranstaltungen freuen.

In dieser Lektion lernen Sie, wie Sie:

• eine neue leere Site erstellen • Seiten hinzufügen • Text hinzufügen • mit NetObjects Cloud Burst kostenlose Archivfotos herunterladen • mit der NetObjects Image Bank ein Bild herunterladen • einen SiteStyle auswählen • hervorgehobene und Rollover-Schaltflächen verwenden • die Vorschau einer Site anzeigen • eine Site speichern.

Sind Sie soweit? Dann fangen wir an!

Vorbereitung Wählen Sie im Start-Menü von Windows Programme > NetObjects > NetObjects Fusion 12.0 aus oder doppelklicken Sie auf das Symbol für NetObjects Fusion 12.0 auf dem Desktop. Die Online-Ansicht wird angezeigt.

Machen Sie in der Online-Ansicht die Registerkarte Angebote ausfindig. Dort werden die meisten Cloud Burst-Updates bereitgestellt (möglicherweise enthält das Support-Feld links Lehrprogramme). Wählen Sie im Feld Angebote die Option Grafikdatenbank. Klicken Sie auf die Schaltfläche Installieren Foto eingestellt, um das Anfangsangebot an kostenlosen Archivfotos von NetObjects zu installieren. Die Bilder werden in der Seitenansicht in der Image Bank-Symbolleiste angezeigt. Dieses Thema wird später in dieser Vorführung behandelt.

Eine neue leere Site erstellen Beginnen wir mit einer neuen, leeren Website.

1. Wählen Sie in der Online-Ansicht die Option Neue leere Site unterhalb des Feldes Neue Site, um das Dialogfeld Neue leere Site anzuzeigen.

Hier können Sie einen Namen für die Website-Datei angeben. NetObjects Fusion speichert Ihre Site unter NetObjects Fusion 12.0\User Sites in einem Ordner mit demselben Namen wie die Site.

NetObjects-Tipp

Sie können die Einstellungen in den Anwendungsoptionen für NetObjects Fusion auf „Zuletzt verwendete Datei beim Start öffnen“ wählen. Um das Dialogfeld Anwendungsoptionen anzuzeigen, gehen Sie zum Menü Werkzeuge und wählen Optionen > Anwendung.

2. Geben Sie im Feld Dateiname die Bezeichnung „Bergsport GmbH“ ein und klicken Sie anschließend auf Speichern. Der Site-Name wird in der Titelleiste des Fensters angezeigt. NetObjects Fusion hängt automatisch .nod an den Namen der Site an, um anzuzeigen, dass es sich um eine NetObjects Datenbank-Datei handelt.

3. Standardmäßig wird die neue leere Site in der Site-Ansicht geöffnet. Site-Ansicht wird in der Steuerleiste hervorgehoben, um anzuzeigen, dass diese Ansicht zurzeit ausgewählt ist. In der Site-Ansicht entwickeln Sie die Struktur Ihrer Site.

Die einzelnen Seiten Ihrer Website werden jeweils durch ein Seitensymbol dargestellt. Ihre neue Website enthält vorläufig eine Seite: die Standardseite Home. Der blaue Rahmen zeigt an, dass sie ausgewählt ist.

NetObjects-Tipp

Um die Eigenschaftsanalyse anzuzeigen, wählen Sie aus dem Menü Ansicht die Option Eigenschafts-Palette aus. Die Eigenschafts-Palette zeigt den Namen des gewählten Objekts, in diesem Fall der Seite Home.

Seiten hinzufügen Seiten werden in der Site-Ansicht hinzugefügt. NetObjects Fusion fügt unter der gewählten Seite neue Seiten hinzu. Sie werden unter der Seite Home vier neue Seiten hinzufügen.

1. Klicken Sie bei ausgewählter Home-Seite viermal auf die Schaltfläche Neue Seite in der Steuerleiste, um vier neue Seiten hinzuzufügen.

NetObjects Fusion fügt unter der Seite Home vier neue Seiten hinzu. Diese heißen Unbenannt1, Unbenannt2 usw.

2. Während die Seite Home ausgewählt ist, geben Sie in das Feld Seitentitel der Eigenschafts-Palette den Text „Bergsport GmbH“ ein.

Wenn der Besucher der Site nun die Homepage aufruft, zeigt die Titelleiste des Browsers den Text „Bergsport GmbH“ anstelle von „Home“.

3. Klicken Sie auf der linken Seite auf den Namen Unbenannt1, um diesen Seitennamen auszuwählen.

4. Geben Sie „Mission“ ein und drücken Sie die Tabulatortaste, um den nächsten Seitennamen auszuwählen.

5. Geben Sie den nächsten drei Seiten die Namen „Veranstaltungen“, „Nächste Führung“ und „Wettbewerb“.

Nun fügen Sie der Seite Veranstaltungen weitere Seiten über kommende Veranstaltungen hinzu.

6. Klicken Sie auf die Seite Veranstaltungen, um sie auszuwählen.

7. Klicken Sie zweimal auf die Schaltfläche Neue Seite, um der Veranstaltungsseite zwei untergeordnete Seiten hinzuzufügen.

8. Nennen Sie die zwei Seiten „Aktivitäten“ und „Highlights“. Als Nächstes fügen Sie eine Seite hinzu, um den Hauptgewinn für Ihren Wettbewerb bekannt zu geben.

9. Klicken Sie auf die Seite Wettbewerb, um sie auszuwählen.

10. Klicken Sie einmal auf die Schaltfläche Neue Seite, um der Seite Wettbewerb eine untergeordnete Seite hinzuzufügen.

11. Nennen Sie die Seite Edelweiß-Hütte und drücken Sie die Eingabetaste. Ist der Seitenname zu lang, um in das Seitensymbol zu passen, zeigt NetObjects Fusion eine Abkürzung des Namens an. Im Browser-Fenster erscheint der Name jedoch in voller Länge.

12. Doppelklicken Sie auf das Symbol Home, um die Homepage in der Seitenansicht zu öffnen.

Seitenansicht öffnen In der Seitenansicht entwerfen Sie Ihre Seiten und fügen Inhalte hinzu.

Die Startseite wird in der Seitenansicht geöffnet. In der Standardeinstellung werden die folgenden Elemente angezeigt:

a) die Standardwerkzeugleiste rechts von den Registerkarten der Seitenansicht b) Benutzerdefinierte Komponenten links vom Fensterrahmen c) die Eigenschafts-Palette, die die Eigenschaften des gewählten Elements zeigt d) die Site-Navigationspalette, mit der Sie beim Entwerfen der Site von einer Seite zur nächsten wechseln

NetObjects-Tipp

Werkzeugleisten können mit der Maus gezogen und fließend oder angedockt an einer beliebigen Stelle auf dem Bildschirm platziert werden. Sie können den Arbeitsbereich speichern, indem Sie im Menü Ansicht auf Arbeitsbereich > Arbeitsbereich speichern unter... klicken. Mit diesem Menü können Sie außerdem zum Standardarbeitsbereich oder fortgeschrittenen Arbeitsbereich zurückkehren.

Verwenden Sie die Schaltflächen unten links im Seitenansichtsfenster, um die Eigenschafts-Palette, die Site-Navigationspalette und den Objekt-Explorer zu öffnen und zu schließen.

NetObjects-Tipp

Der Master-Rahmen funktioniert wie eine Fuß- bzw. Kopfzeile, außer dass er sich an allen vier Seiten des Layouts befindet.

Die Seitenansicht ist in zwei Bereiche unterteilt: Master-Rahmen und Layout. Der Master-Rahmen befindet sich am unteren, oberen, linken und rechten Rand der Seite. Objekte, die im Bereich des Master-Rahmens platziert werden, werden auf allen Seiten angezeigt. Der Master-Rahmen enthält normalerweise Objekte, die auf mehreren Seiten angezeigt werden, wie zum Beispiel Navigationsleisten und Banner. Das Layout enthält in der Regel den Inhalt der betreffenden Seite.

Klicken Sie einfach in den Master-Rahmen oder in das Layout, um den betreffenden Bereich auszuwählen. Wenn der Master-Rahmen gewählt wurde, ist seine Beschriftung hervorgehoben. Wenn das Layout ausgewählt wurde, ist die Beschriftung des Layouts hervorgehoben. Die Eigenschafts-Palette zeigt immer die Eigenschaften des ausgewählten Elements an.

Der obere Rand des Standard-Master-Rahmens enthält immer ein Banner und ein Navigationselement, der untere Rand eine Textnavigationsleiste und das Logo „Built with NetObjects Fusion XII“.

Text hinzufügen Zunächst fügen Sie Ihrer Homepage einen Begrüßungstext hinzu. In NetObjects Fusion ist alles, was sich auf einer Seite befindet, ein Objekt. Sie müssen also ein Text-Objekt hinzufügen, um Text eingeben zu können.

1. Wählen Sie aus der Standardwerkzeugleiste das Textwerkzeug aus.

2. Klicken Sie auf eine Stelle im Layout und ziehen Sie ein breites Textfeld. Beginnen Sie dabei in der Nähe der oberen linken Ecke im Layout-Bereich.

Machen Sie sich keine Gedanken um die Größe des Textfelds. Während Sie den Text eingeben, wird das Textfeld größer und passt sich dem Textvolumen an.

Das Textfeld ist mit Ziehpunkten ausgestattet und enthält eine blinkende Einfügemarke. Wenn Sie den Mauszeiger im Textfeld bewegen, verwandelt er sich in einen I-Cursor und zeigt damit an, dass Sie nun Text eingeben können.

Verwenden Sie die Standard-Pfeiltasten, Rücktaste und Löschtaste, um den Text zu bearbeiten.

1. Geben Sie Folgendes ein: Bergsport GmbH

2. Drücken Sie gleichzeitig die Umschalt- und Eingabetaste, um einen Zeilenumbruch einzufügen.

Im Gegensatz zum Drücken der Eingabetaste, bei der ein doppelter Zeilenabstand eingefügt wird, wird beim gleichzeitigen Drücken der Umschalt- und Eingabetaste ein einfacher Zeilenabstand eingefügt. Der Zeilenumbruch erfolgt dabei genau an der gewünschten Stelle.

3. Geben Sie in der neuen Zeile Folgendes ein: Erleben Sie das Beste, was die Natur zu bieten hat

Während Sie den Text bearbeiten, zeigt die Palette Text-Eigenschaften die Registerkarte Format mit Optionen wie Schriftart, Größe und Farbe an, die Sie zum Bearbeiten des markierten Texts verwenden können.

Das Feld Schriftart zeigt die Schriftart Arial und das Feld Größe enthält den Wert 14, also die Standardschriftart und -größe gemäß CSS-SiteStyle.

4. Klicken Sie außerhalb des Textfelds.

Die Höhe des Textfelds passt sich automatisch dem Text an, und die Ziehpunkte werden ausgeblendet. Der Text ist nun von einer Umrisslinie umgeben.

5. Klicken Sie einmal auf eine beliebige Stelle im Textfeld, um es auszuwählen. Das Textfeld wird nun mit ausgefüllten Ziehpunkten dargestellt, um anzuzeigen, dass es ausgewählt wurde. Die Palette Text-Eigenschaften zeigt die Registerkarte Textfeld an.

Wenn das Textobjekt ausgefüllte Ziehpunkte aufweist, können Sie den Text nicht bearbeiten, aber Sie können das Textfeld verschieben oder löschen oder seine Größe ändern.

6. Doppelklicken Sie in das Feld, sodass wieder die umrandeten Ziehpunkte angezeigt werden.

7. Ziehen Sie die Maus mit gedrückter linker Maustaste über den Text, um ihn zu markieren. Die Palette Text-Eigenschaften zeigt die Registerkarte Format an.

8. Wählen Sie im Abschnitt Standard der Registerkarte Format aus dem Dropdown-Menü die Option H1.

Falls erforderlich, wird das Textfeld größer und passt sich dem Textvolumen an. Sie können auch einen umrandeten oder ausgefüllten Ziehpunkt bewegen, um dem Textfeld eine neue Form zu geben. Verschieben Sie bei Bedarf den Ziehpunkt des Textfelds, um das Textfeld zu verbreitern, sodass der Text nur zwei Zeilen umfasst.

9. Klicken Sie im Abschnitt Absatz auf der Registerkarte Format auf die Schaltfläche Zentriert. Die Ausrichtung des Textes ändert sich entsprechend.

10. Klicken Sie außerhalb des Textfelds, um die Auswahl aufzuheben.

Bilder einfügen Die Grafikabteilung der Bergsport GmbH hat eine Grafik für die Homepage entwickelt.

1. Öffnen Sie in der Werkzeugleiste Benutzerdefinierte Komponenten die Image Bank.

2. Wählen Sie aus dem Dropdown-Menü die Option Image Bank.

Der Inhalt der Image Bank wurde im Abschnitt Vorbereitung zu Beginn dieser Vorführung eingefügt. Wenn Sie diese Schritte noch nicht durchgeführt haben, tun Sie dies jetzt.

Ziehen Sie ein beliebiges Bild aus der Image Bank in den Layout-Bereich.

NetObjects-Tipp:

Das dritte Bild zeigt einen See, der gut zum Motiv unserer Site passt.

Die Bilder werden mit hoher Auflösung zur Verfügung gestellt, NetObjects Fusion zeigt jedoch automatisch eine Aufforderung zur Anpassung der Bildmaße, wenn die Originalmaße den Layout-Bereich vergrößern würden.

Wählen Sie Ja. Daraufhin wird die Bildanalyse angezeigt. Verwenden Sie den Schieber oder geben Sie die gewünschten Bildmaße ein (300 x 200 ist für unsere Zwecke geeignet).

3. Klicken Sie nach der Bearbeitung auf Fertig, um das Bild im Layout-Bereich zu platzieren.

Das Bild wird im Layout-Bereich als ausgewählt angezeigt. Nachdem Sie das Bild ausgewählt haben, enthält die Eigenschafts-Palette den Eintrag Bild-Eigenschaften.

Sie können das Bild weiter beschneiden oder seine Größe ändern, indem Sie die Ziehpunkte verschieben.

NetObjects-Tipp

Die Palette Bild-Eigenschaften enthält mehrere nützliche Bearbeitungsfunktionen. Klicken Sie auf die einzelnen Registerkarten, um sich mit den zahlreichen Möglichkeiten zur Bildbearbeitung direkt in NetObjects Fusion vertraut zu machen!

• Um die Originalgröße und -form des Bilds wiederherzustellen, klicken Sie mit der rechten Maustaste auf das Bild und wählen aus dem Kontextmenü die Option Originalgröße wiederherstellen.

SiteStyle festlegen Ein SiteStyle enthält Grafiken, Text- und Flash-Elemente, die überall auf der Site verwendet werden, um ein einheitliches Erscheinungsbild zu gewährleisten. SiteStyle-Elemente sind u. a. Banner und Navigationsleistenschaltflächen sowie eine Art von Aufzählungszeichen, eine Linie und Farben für Link-Texte. Jeder SiteStyle enthält außerdem Formatvorlagen, wie z. B. Schriftart und Größe für den Haupttext der Seite, sowie verschiedene Kombinationen von Textattributen für unterschiedlich große Überschriften. SiteStyles enthalten darüber hinaus angepasste CSS und Bilder für AJAX-Elemente wie Accordions, TabTop und TogglePanes, die speziell für den gewählten SiteStyle vordefiniert sind!

Der Standard-SiteStyle passt nicht zum Image der Bergsport GmbH. Da ist es gut, dass Sie unter Dutzenden von SiteStyles wählen können, die Ihrem Geschmack entsprechen.

1. Klicken Sie in der Steuerleiste auf die Schaltfläche Design, um zur Ansicht Design zu wechseln.

2. Wählen Sie aus der Liste der Local SiteStyles Gloss - Blue.

3. Klicken Sie in der Steuerleiste auf die Schaltfläche Format festlegen.

4. Klicken Sie in der Steuerleiste auf die Schaltfläche Seiten.

5. In der Seitenansicht erscheint die Startseite mit dem SiteStyle Gloss – Blue. Der SiteStyle hat einen zweifarbigen Hintergrund. Der obere Teil ist anthrazitfarben mit einem leichten Farbverlauf.

6. Wählen Sie aus dem Menü Ansicht die Option An Objektumrissen einrasten. So werden Objekte überschneidungsfrei nebeneinander platziert, wenn Sie ein Objekt neben ein anderes ziehen.

7. Verschieben Sie das Bild nach oben, damit es den unteren Rand des Textes berührt, diesen aber nicht schneidet, und unter dem Textfeld zentriert ist.

Einstellungen der Navigationsleistenschaltflächen festlegen Sie können Schaltflächen einrichten, die hervorgehoben werden, wenn Sie im Browser die Maus über sie bewegen.

1. Wählen Sie die Schaltflächennavigationsleiste im oberen Master-Rahmen aus.

2. Klicken Sie auf die Registerkarte Stil der Eigenschafts-Palette.

3. Achten Sie darauf, das die Optionen Hervorgehoben und Rollover im Abschnitt Optionen markiert sind (diese sollten in der Standardeinstellung ein Häkchen enthalten).

• Rollover-Schaltflächen ändern sich in die in der Design-Ansicht dargestellten Rollover-Schaltflächen, wenn Besucher der Site den Mauszeiger im Browser über die Schaltflächen bewegen.

• Hervorgehobene Schaltflächen werden im Browser mit dem seitenspezifischen Format für hervorgehobene Schaltflächen dargestellt.

• Navigationsleistenenden sind grafische Elemente, die vor der ersten und nach der letzten Schaltfläche einer Navigationsleiste eingefügt werden können.

• Klappleisten-Untermenüs machen die nicht in der Navigationsleiste angezeigten untergeordneten Seiten sichtbar, wenn der Site-Besucher den Mauszeiger über den Link zur übergeordneten Seite bewegt.

• Mit Klappleisten-Untermenüs automatisch schließen werden die Klappleisten automatisch geschlossen, wenn der Mauszeiger vom Menü wegbewegt wird.

• Mit Verknüpfte Navigationsleistenenden werden Navigationsleistenenden mit der angrenzenden Schaltfläche in der Navigationsleiste verknüpft.

Site-Vorschau anzeigen Sie haben in kurzer Zeit viel erreicht. Betrachten wir uns jetzt, wie Ihre Site in einem Web-Browser aussieht. Mit NetObjects Fusion können Sie Ihre Arbeit überprüfen, indem Sie sie noch während der Erstellung im Browser anzeigen.

• Um eine Vorschau Ihrer Site zu betrachten, klicken Sie in der Steuerleiste auf die Schaltfläche Vorschau.

Nun erscheint das Dialogfeld Vorschau. Dieses enthält Fortschrittsmeldungen, während NetObjects Fusion HTML-Code für Ihre Seiten erzeugt.

NetObjects Fusion startet Ihren Web-Browser und zeigt die Seite an, von der aus Sie die Vorschau gestartet haben.

Die anderen Seiten haben noch keinen Inhalt. Sie können aber auf die Navigationsschaltflächen klicken, um die Seiten und ihre SiteStyle-Elemente zu betrachten.

Beachten Sie, dass alle Master-Rahmen-Ränder mit denen der Startseite übereinstimmen. Der Grund dafür ist, dass derzeit allen Seiten der Standard-Master-Rahmen zugewiesen ist, wie Sie der Palette Master-Rahmen-Eigenschaften entnehmen können.

Wenn Sie die Vorschau beendet haben, können Sie den Browser entweder minimieren oder schließen oder einfach NetObjects Fusion wieder zum aktiven Fenster machen.

Site speichern und Programm beenden Vielleicht möchten Sie jetzt eine Pause einlegen und Ihre Site später fertigstellen.

• NetObjects Fusion speichert Ihre Site automatisch jedes Mal, wenn Sie die Ansicht wechseln oder eine andere Seite öffnen. Um die Site manuell zu speichern, wählen Sie auf dem Menü Datei die Option Site speichern.

• Um von der automatischen Speicherung zur manuellen Speicherung zu wechseln, entfernen Sie das Häkchen aus dem Kontrollkästchen Automatisch speichern im Dialogfeld Anwendungsoptionen.

• Um NetObjects Fusion zu beenden, wählen Sie im Menü Datei die Option Beenden. Die Registerkarte Programm des Dialogfelds Anwendungsoptionen enthält die Option Datenbank beim Beenden komprimieren. Wenn diese Option aktiviert ist, komprimiert NetObjects Fusion die Site, damit sie weniger Platz auf Ihrer Festplatte benötigt, und überprüft die Integrität Ihrer Site-Datei.

• Wenn Sie weitermachen möchten, speichern Sie einfach die Site, beenden aber nicht das Programm.

Wie geht es weiter? Sie haben soeben mit NetObjects Fusion eine Site erstellt, die im Internet publiziert werden soll. Nun ist es an der Zeit, mehr über die leistungsfähigen Funktionen von NetObjects Fusion zu erfahren. Weitere Lehrprogramme finden Sie unterhalb des Support-Felds in der Online-Ansicht Ihres Programms.