Den Artikel 2055 weiterempfehlen
E-Mailadresse
 




 FAQ finden
Produktkategorie: Hosting

So leicht gestalten Sie Ihre erste Homepage mit Adobe® GoLive CS


Nützliches Hintergrundwissen:

Adobe® GoLive CS ist Bestandteil der Adobe Creative Suite (CS) und bietet Ihnen die Werkzeuge, die sie sich zur schnelleren, effizienteren und kostengünstigeren Erstellung und Veröffentlichung von Inhalten für Print und Web wünschen. Adobe® GoLive CS bietet die bislang engste Integration mit anderen Adobe-Produkten, wie z.B. Photoshop oder Acrobat. Adobe® GoLive CS bietet eine vertraute und anpassbare Benutzeroberfläche, deren Tools für effizientes Web-Design erforderlich angeordnet sind. Nutzen Sie z.B. das intuitive, visuelle Drag-and-Drop Raster zur Gestaltung von Seiten-Layouts und profitieren Sie vom leistungsfähigen Quellcode-Editor, mit dessen Hilfe Design-Konzepte präzise umgesetzt werden können.

Anlegen einer neuen Web-Site

Um eine neue Seite anzulegen, starten Sie den Web-Site Assistenten, indem Sie auf "Datei" -> "Neue Web-Site" klicken. Übernehmen Sie die Einstellung "Einzelne Benutzer" und klicken Sie auf "Weiter". Im folgenden Fenster übernehmen Sie ebenfalls die Einstellung "Leere Web-Site", klicken auf "Weiter" und geben im nächsten Fenster einen Namen für Ihr Web-Projekt ein, z.B. Texte. Wenn Sie jetzt nochmals auf "Weiter" klicken, gibt Ihnen der Web-Site Assistent die Einstellungen zur Web-Site an. Definieren Sie den Speicherort und klicken Sie abschließend auf "Fertig stellen". GoLive CS hat jetzt das Web-Site-Fenster mit dem Namen "Texte.site" erstellt.

Texte eingeben und bearbeiten

Im Fenster "Texte.site" klicken Sie jetzt bitte doppelt auf die Datei index.html

 


Abb. 1

 

Geben Sie nun in der leeren Seite Ihren Text ein.

Anmerkung:
Wenn Sie bereits Inhalte besitzen, die Sie gerne für die Seite verwenden möchten, transportieren Sie die über die Zwischenablage in das Dokumentfenster. Dazu markieren Sie den Text in der ursprünglichen Anwendung, z.B. einem Editor, und wählen "Bearbeiten" und "Kopieren". Wechseln Sie zu GoLive CS in das Dokumentfenster, setzten den Cursor an die Stelle, wo Sie den Text einfügen möchten und wählen Sie "Bearbeiten" und "Einfügen". Beachten Sie jedoch, dass Formatierungen, z.B. Fettschrift, beim Transport über die Zwischenablage verloren gehen.

Klicken Sie jetzt auf den Titel der Seite, wo derzeit noch "unbekannte Seite" steht und geben Sie einen Titel ein.

 


Abb. 2

 

Wählen Sie "Datei" -> "Speichern unter..". Um sicherzugehen, dass die Datei im Stammverzeichnis Ihrer Web-Site abgespeichert wird, wählen Sie bitte unter dem Punkt "Website-Ordner" den Eintrag "Web-Site-Ordner" aus. Klicken Sie abschließend auf "Speichern".

 


Abb. 3

 

Sie können sich jetzt die Eigenschaften der Seite anzeigen lassen, indem Sie oben auf die Symbolschaltfläche "Seiteneigenschaften anzeigen" klicken. Sie öffnen damit den so genannten Inspektor für die Eigenschaften.

Hier haben Sie jetzt die Möglichkeit, z.B. Text- und Hintergrundfarbe zu definieren.

Der Inspektor ist eine kontextsensitive Palette mit Optionen, die sich je nach Bearbeitungsbereich ändern. Wenn Sie z. B. eine Tabelle oder einen Rahmen in einer Seite auswählen, verwandelt sich der Inspektor entsprechend in den Tabelleninspektor bzw. den Rahmeninspektor mit Optionen zum Einrichten einer Tabelle bzw. mit Rahmenattributen.

Der Inspektor enthält nicht nur Optionen für Seitenelemente, sondern auch für Dateien oder Website-Bestände im Website-Fenster, Frames in einem Frameset und mehr.

In der Werkzeugleiste finden Sie diverse Formatierungssymbole, wie fett, kursiv etc. Unter dem Menüpunkt "Typ" -> "Stil" oder "Struktur" finden Sie weitere Formatierungsmöglichkeiten.

Grafiken einbinden

Klicken Sie auf Ihrem Desktop doppelt auf "Eigene Dateien" (Windows 95, 98, Me, 2000) oder wählen Sie "Start" -> "Eigene Dateien" (Windows XP). Wechseln Sie in das Stammverzeichnis der Web-Site, die Sie gestalten. Wählen Sie dort das Menü "Datei" -> "Neu" -> "Ordner". Wählen Sie als Name "Images".

Klicken Sie nun auf dem Desktop doppelt auf "Arbeitsplatz" bzw. wählen Sie "Start" -> "Arbeitsplatz". Öffnen Sie das Verzeichnis, in dem sich die Grafikdateien befinden . Kopieren Sie die Grafikdateien, die Sie kopieren möchten in das eben angelegte "Images-Verzeichnis".

Laden Sie die Datei, in die Sie die Grafik einbinden möchten. In unserem Beispiel klicken Sie doppelt auf die Datei index.html. Klicken Sie auf den Titel und ändern Sie ihn in "Grafik". Speichern Sie die Datei unter diesem Namen im Stammverzeichnis ab. Geben Sie einen beliebigen Text ein. Fügen Sie an die Stelle, wo sich die Grafik befinden soll, einen Absatz ein.

Klicken Sie nun in der Objekte-Palette auf das Symbol Bild und ziehen Sie es bei gedrückter Maustaste an die Stelle, wo die Grafik platziert werden soll.

Klicken Sie mit der Maus in den Platzhalter. Im Inspektor erscheinen jetzt die Eigenschaften der Grafik. Da hier noch keine Grafik eingebunden ist, steht als Name neben Quelle die Bezeichnung (Empty Reference) für leere Referenz.

Klicken Sie auf das Ordnersymbol neben dem Eintrag.

 


Abb. 4

 

Es öffnet sich so das Dateiauswahlfenster. Wechseln Sie in das Verzeichnis "images" und klicken Sie auf die Grafikdatei, die Sie einbinden möchten. Klicken Sie auf "Öffnen", um die Datei einzubinden.

Anmerkung:
Wir empfehlen Ihnen, die Dateiformate .gif oder .jpg zu verwenden. Grundsätzlich sollten Sie auch darauf achten, dass die Grafik bereits in der Größe vorliegt, in der sie später eingebunden wird.

Objekte-Palette

Dank der Palette "Objekte" müssen Sie keinen HTML-Code schreiben. Sie haben die Möglichkeit, die Objekte-Palette so einzurichten, dass sie wie die Werkzeugliste in anderen Adobe-Programmen aussieht. Die Palette enthält HTML-Elemente und vordefinierten Quellcode, den Sie Ihrer Seite per Drag & Drop oder durch Doppelklicken auf die entsprechenden Objektsymbole in der Palette hinzufügen können. Einige Objekte sind Platzhalter (wie z. B. das Bildsymbol), die Sie zum Erstellen von Ressourcen-Links verwenden, die die Seite mit den Quelldateien verknüpfen. Bei anderen Objekten handelt es sich um Website-Referenzen für Farben, Schriftsammlungen usw., die in einer Website oder in leeren Seiten gespeichert sind und die Sie einer Website hinzufügen können.

Die meisten Funktionen der Objektpalette arbeiten nach dem Platzhalter-System. Sie brauchen nur mit gedrückter rechter Maustaste das Symbol zum Beispiel für eine Tabelle oder ein Bild in das Dokumentenfenster schieben, um es in die HTML-Datei zu integrieren. Zur Weiterbearbeitung der Platzhalter haben Sie verschiedene Alternativen. Entweder passen Sie das neue Objekt - beispielsweise eine Tabelle - mit dem Kontextmenü an Ihre Bedürfnisse an. Oder Sie bedienen sich des Inspektors, mit dem Sie sogar die winzigsten Details festlegen können.

Hochladen von Dateien mit FTP

Wie Sie Ihre Dateien oder Ordner auf Ihren Webspace hochladen, entnehmen Sie bitte folgendem Artikel:
So einfach veröffentlichen Sie Ihre Seiten mit Adobe® GoLive CS / Adobe® GoLive CS2

Anmerkung:
Bitte beachten Sie, dass wir in dieser Anleitung nur einen kleinen Einblick in den Umgang mit Adobe® GoLive CS geben können. Wenn Sie darüber hinaus Verknüpfungen, Frames, Animationen, CSS-Elemente und mehr in Ihre Web-Site einbinden möchten, konsultieren Sie bitte unser ausführliches Benutzerhandbuch. Hierfür starten Sie die STRATO Komplettsoftware-CD und wählen die Adobe® GoLive CS Komplett-Dokumentation. Für die Betrachtung benötigen Sie den kostenlosen Adobe® Reader.