1. Sofort starten: die besten Neuerungen kennenlernen & ältere Projekte migrieren 17. Einführung web to date NG für Einsteiger & Umsteiger

Transkript

1 1. Sofort starten: die besten Neuerungen kennenlernen & ältere Projekte migrieren 17 Teil I Einführung web to date NG für Einsteiger & Umsteiger Dieser erste Teil des Praxisbuches soll Ihnen einen rundum angenehmen Start mit web to date NG ermöglichen. Lernen Sie in Kapitel 1 zunächst die besten Neuerungen gegenüber früheren web-to-date-versionen kennen und erkunden Sie die genialen Funktionen für die Website-Erstellung Schritt für Schritt zunächst in Kurzform; erhalten Sie als Umsteiger außerdem eine nützliche Strategie zur Migration bereits erstellter Website-Projekte. In Kapitel 2 geht es dann bereits richtig los: Sie lernen die Grundlagen für das Anlegen eines Website-Projektes ausführlich kennen, erstellen dieses in der Projektzentrale und sorgen dafür, dass Ihre Website obwohl Sie diese bereits auf den Webserver geladen haben für die Öffentlichkeit erst mal unsichtbar bleibt. 1. Sofort starten: die besten Neuerungen kennenlernen & ältere Projekte migrieren Da web to date NG viel Neues zu bieten hat, werden sich sowohl Einsteiger als auch Umsteiger zunächst mit den Grundlagen der Software vertraut machen wollen. Diese erhalten Sie in diesem Kapitel: einen Überblick über die besten Neuerungen, eine Skizzierung der Website-Erstellung mit web to date NG für den Schnellstart sowie eine Strategie zum Migrieren bereits bestehender Website-Projekte, die Sie mit einer älteren web-to-date-version erstellt haben. Ich setze voraus, dass Sie web to date NG bereits auf Ihrem Computer installiert haben. Dann steht Ihrem gelungenen Webauftritt nichts mehr im Weg!

2 18 1. Sofort starten: die besten Neuerungen kennenlernen & ältere Projekte migrieren 1.1 Die Neuerungen in web to date NG im Überblick Lassen Sie mich Ihnen mit einem kleinen Überblick über die besten Neuerungen in web to date NG zeigen, was die Software so alles draufhat und worauf Sie sich beim Lesen der folgenden Kapitel freuen können. Hier also der Überblick: Projektzentrale: Legen Sie Website-Projekte in web to date NG auf übersichtliche Weise in einer gesonderten Projektzentrale an und führen Sie hier komfortabel Verwaltungsoperationen rund um das Website-Projekt durch wie etwa das Sichern und Wiederherstellen. Schlanker Client: Ihr Website-Projekt wird direkt auf dem Webserver erstellt. Zur Bearbeitung reicht ab sofort ein schlanker Client aus. Vorbei sind lange Wartezeiten bei der Website-Erstellung web to date NG ist in diesem Zusammenhang äußerst flexibel und flink!

3 1.1 Die Neuerungen in web to date NG im Überblick 19 Aufgefrischte Bedienoberfläche: Die Bedienoberfläche von web to date NG, hier im Bearbeitungsmodus dargestellt, hat einen neuen, modernen Anstrich erhalten und ist für den Praxiseinsatz optimal strukturiert. Sowohl Einsteiger als auch Umsteiger werden sich hier schnell zurechtfinden. Zwei Vorschaumodi: In web to date NG erhalten Sie per Mausklick prompt eine Vorschau der gesamten Website, und Sie können sich dabei sowohl die Standardversion als auch die mobile Version der Website ansehen. What you see is what you get! Moderne Designs: Mit den neuen, modernen Designs, die in web to date NG in zahlreichen Varianten verfügbar und mit ansprechenden Farbpaletten ausgestattet sind, werden Sie eine Website gestalten, die Eindruck macht! Auch die Designauswahl gelingt nun einfacher und übersichtlicher als je zuvor.

4 20 1. Sofort starten: die besten Neuerungen kennenlernen & ältere Projekte migrieren Flexible Designbearbeitung: Hier die erweiterten Designeigenschaften bearbeiten, dort Änderungen im Quelltext vornehmen das war gestern. In web to date NG passen Sie das Design sowohl der Standardversion als auch der mobilen Version Ihrer Website in einem übersichtlichen Editor äußerst flexibel an.

5 1.1 Die Neuerungen in web to date NG im Überblick 21 Flexible Schriftformate: Auch was die Schriftformate anbelangt, ist web to date NG deutlich flexibler als die Vorgängerversionen. Definieren Sie globale Schriftformate für Standardtext, Überschriften und Co., und nehmen Sie auch in Textabsätzen beliebige Anpassungen der Schriftformate vor. Komfortables Handling von Absatzbereichen: Ihnen stehen auf jeder Seite Ihres Webauftritts bis zu fünf Absatzbereiche zur Verfügung. Mit nur zwei Mausklicks entscheiden Sie, welche Absatzbereiche auf einer Seite eingeblendet werden sollen und welche nicht.

6 22 1. Sofort starten: die besten Neuerungen kennenlernen & ältere Projekte migrieren Einfache Absatzgliederung: Egal ob per Spaltenbereich, Register oder Akkordeon Absätze lassen sich innerhalb eines Absatzbereichs mithilfe von Drag & Drop zusätzlich untergliedern. Das ermöglicht Ihnen eine zuvor nicht gekannte flexible Platzierung der Absätze. Attraktive Absatzrahmen: Jeder Absatz Texte, Bilder und Co. lässt sich in web to date NG mit einem eigenen attraktiven Rahmen versehen. Heben Sie damit Inhalte besonders hervor oder nutzen Sie die Absatzrahmen einfach für eine abwechslungsreiche, ansprechende Seitengestaltung. Nützlicher Papierkorb: Gelöscht ist in web to date NG nicht mehr gelöscht! Elemente, die Sie löschen, werden erst mal in einen Papierkorb verschoben und lassen sich von dort bei Bedarf wiederherstellen. Ein kleiner Bearbeitungsfehler ist somit keine Katastrophe mehr.

7 1.2 Schnellstart mit web to date NG: in fünf Schritten zur eigenen Website 23 Allerlei Finessen: Und web to date NG wartet noch mit allerlei Finessen auf, die gar nicht alle einzeln aufgezählt werden können. Nur ein Beispiel ist die Möglichkeit, neben einem Favicon auch ein Apple Touch Icon anzulegen, das dann auf den Home-Bildschirmen vieler iphones und ipads zu finden sein wird. Keine Bange: Dies ist nur der Schnelldurchlauf zum ersten Kennenlernen. Ich werde Ihnen diese Funktionen im Verlauf des Buches noch ganz ausführlich und mitten in der Praxis vorstellen. 1.2 Schnellstart mit web to date NG: in fünf Schritten zur eigenen Website Gerne würde ich Ihnen nun an einem konkreten Projektbeispiel (ein Taxiunternehmen möchte sich im World Wide Web präsentieren) die grundlegenden Prinzipien der Website-Erstellung mit web to date NG vorstellen. Zu diesem Zeitpunkt ist es noch nicht notwendig, die einzelnen Schritte nachzuvollziehen (ich gehe bei der Darstellung auch nicht bis ins letzte Detail), es geht erst mal nur darum, sich den Arbeitsprozess zu verdeutlichen.

8 24 1. Sofort starten: die besten Neuerungen kennenlernen & ältere Projekte migrieren Schritt 1: Website-Projekt anlegen und eine passende Vorlage auswählen Klaus Mustermann hat von seinem Vater, Herbert Mustermann, ein Taxiunternehmen übernommen. Bisher besteht noch keinerlei Präsenz im Internet, aber das soll sich nun unter dem neuen Inhaber ändern. Klaus entscheidet sich für web to date NG, um seine Website flexibel erstellen und bearbeiten zu können. Und er wählt einen Webhoster aus, der ihn mit ausreichend Webspace versorgt, um seine Website auf dem Webserver zu speichern und für die Öffentlichkeit zugänglich zu machen. Nachdem er mit dem Webhoster einen Vertrag abgeschlossen hat, kann er sich auf dessen Homepage einloggen und den Webserver für die Installation von web to date einrichten. Dazu gehört nicht viel: Er benötigt lediglich die FTP-Zugangsdaten (für die Dateiübertragung zwischen Computer und Webserver) sowie eine MySQL-Datenbank, die sich mit wenigen Handgriffen anlegen lässt. (Alles rund um Webhoster, FTP-Zugangsdaten und MySQL-Datenbank lesen Sie in Kapitel 2.1.) Klaus Mustermann loggt sich auf der Homepage seines Webhosters ein (in diesem Fall 1&1); dort erhält er seine FTP-Zugangsdaten und kann kinderleicht eine MySQL-Datenbank einrichten.

9 1.2 Schnellstart mit web to date NG: in fünf Schritten zur eigenen Website 25 Völlig mühelos per Projektassistent: ein neues Projekt anlegen und korrekt konfi gurieren Nachdem Klaus Mustermann web to date NG auf seinem Computer installiert hat, stehen ihm dort eine Projektzentrale (Project Central) sowie der web to date NG Client zur Verfügung die Projektzentrale zum Anlegen und Verwalten von Projekten, der web to date NG Client zur Bearbeitung von Projekten. Er startet zunächst den Projektassistenten und entscheidet sich für die Schaltfläche Neues Projekt, um sein Projekt sprich: seine Website anzulegen. Ein Assistent führt ihn Schritt für Schritt durch den Vorgang (der noch ausführlich in Kapitel 2.2 dieses Buches dargestellt wird). Im Wesentlichen besteht die Erstellung eines Projektes darin, zunächst Angaben zur gewählten Webadresse, zum FTP-Zugang sowie zur MySQL-Datenbank zu machen also die oben genannten Angaben, die Ihnen der Webhoster bereitstellt. Außerdem wird ein Administrator-Benutzerkonto angelegt, das später für die Anmeldung beim web to date NG Client benötigt wird, sowie ein Systembenutzerkonto für Verwaltungsoperationen. Klaus Mustermann erstellt ein neues Projekt und gibt hier z. B. die Daten zum FTP-Zugang ein, die er zuvor bei seinem Webhoster in Erfahrung gebracht hat.

10 26 1. Sofort starten: die besten Neuerungen kennenlernen & ältere Projekte migrieren Die passende Vorlage auswählen und das Website-Projekt installieren Nachdem Klaus Mustermann die Zugangsdaten etc. eingegeben hat, bietet ihm der Assistent die Auswahl einer Vorlage an. Bei einer Vorlage handelt es sich um eine bereits fertig angelegte Website, die nur noch individuell angepasst werden muss. Klaus Mustermann schaut sich die Vorlagen an, entscheidet sich dann jedoch für das Anlegen einer leeren Website also einer Website, die er von Grund auf selbst aufbaut. Nun muss Klaus Mustermann nur noch einen Ordner für die Datensicherung anlegen, dann kann er den Assistenten abschließen. Die Projektzentrale bietet automatisch die Installation des Website-Projektes auf dem Webserver an. Klaus Mustermann bestätigt mit OK, um die Installation durchzuführen.

11 1.2 Schnellstart mit web to date NG: in fünf Schritten zur eigenen Website 27 Im web to date NG Client anmelden und in den Bearbeitungsmodus umschalten Das war es erst mal in der Projektzentrale hier können später Datensicherungen durchgeführt, neue Projekte angelegt oder die Software kann aktualisiert werden. Zur Bearbeitung der Website dient jedoch der web to date NG Client, den Klaus Mustermann nun öffnet. Er gibt als Benutzername admin, sein zuvor im Assistenten angelegtes Administratorpasswort sowie seine Webadresse ein und klickt auf Anmelden, um eine Verbindung zum Webserver herzustellen. Nach der Anmeldung im Client sieht Klaus Mustermann den aktuellen Stand seiner Website im Vorschaumodus. Um zum Bearbeitungsmodus zu wechseln, klickt er links oben in web to date NG auf die Schaltfläche Bearbeiten. Es gibt noch einen dritten Modus, den Planungsmodus doch zur Anmeldung im Client sowie zur Bedienoberfläche von web to date NG dann alles in Kapitel 2.3. Klaus Mustermann sieht seine Website nach der Anmeldung zunächst im Vorschaumodus. Was das ist und wie das geht, erfahren Sie noch ganz ausführlich in Kapitel 2.

12 28 1. Sofort starten: die besten Neuerungen kennenlernen & ältere Projekte migrieren Die Website auf Under Construction schalten Die Website und der jeweilige Bearbeitungsstand können nicht nur im Vorschaumodus von web to date NG, sondern auch im Webbrowser nachverfolgt werden. Sie ist bereits öffentlich! Klaus Mustermann will aber auf gar keinen Fall, dass seine noch unfertige Website im Internet zu sehen ist. Deshalb entscheidet er sich in der Menü leiste von web to date NG für Gestaltung/ Under Construction -Seite. Im folgenden Fenster kann Klaus Mustermann seine Website einfach per Kontrollkästchen unsichtbar machen und stattdessen eine Seite einblenden, die darauf hinweist, dass sich die Website noch im Aufbau befindet. Schon ist die Website unsichtbar: Klaus Mustermann muss lediglich per Kontrollkästchen die Under Construction -Seite aktivieren. In Kapitel 2.4 wird Ihnen noch ausführlich gezeigt werden, wie Sie eine Under Construction -Seite individuell gestalten und welche weiteren Möglichkeiten es gibt, eine Website bzw. einzelne Seiten erst einmal unsichtbar zu bearbeiten.

13 1.2 Schnellstart mit web to date NG: in fünf Schritten zur eigenen Website 29 Schritt 2: Passen Sie Design und Struktur der automatisch erstellten Website an Das Taxiunternehmen hat nun einen Webauftritt, aber dieser muss jetzt natürlich erst noch gestaltet werden, entweder durch die Anpassung einer Vorlage oder bei einer leeren Website durch die vollständige Neuerstellung. Klaus Mustermann widmet sich als Erstes dem Design der Website er weiß, dass sich Design und Inhalte der Website mit web to date NG völlig unabhängig voneinander bearbeiten lassen. Klaus Mustermann klickt auf das Symbol und kann sich nun für ein Basisdesign entscheiden, das ihm zusagt. Von jedem Basisdesign gibt es noch zahlreiche Varianten, und für jede Variante lässt sich eine von zahlreichen Farbpaletten auswählen. Klaus Mustermann wird fündig: Er entdeckt eine Designvariante, auf der im Eyecatcher (der Kopfgrafik) ein Taxi zu sehen ist. Für ihn ist das zunächst mal ideal, weil er eigene Bilder erst noch erstellen muss. web to date NG bietet eine umfangreiche Designauswahl da ist auch für Klaus Mustermanns Taxiunternehmen etwas dabei.

14 30 1. Sofort starten: die besten Neuerungen kennenlernen & ältere Projekte migrieren Das gewählte Design bis ins Detail individuell anpassen Das Design muss Klaus Mustermann keineswegs so belassen, wie es ist, denn web to date NG bietet ihm unzählige Anpassungsmöglichkeiten, die er in der Menüleiste unter Gestaltung/Design bearbeiten abruft. Je nach Designtyp stehen ihm unterschiedliche Fenster für die Designbearbeitung zur Verfügung. Bei einem Flex-Design und für ein solches hat sich Klaus Mustermann in diesem Fall entschieden lassen sich Farben, Seitenhintergrund, Navigation, Eyecatcher und Absatzbereiche auf vielfältige Weise anpassen. Hier z. B. entscheidet sich Klaus Mustermann dafür, eine Navigation rechts einzublenden und für die Darstellung der Navigation ein pfiffiges Navigationssymbol zu verwenden. Bei einem Standarddesign, wie sie in web to date NG ebenfalls vorhanden sind, sind die Anpassungsmöglichkeiten etwas begrenzter aber auch bei den Standarddesigns lassen sich selbstverständlich Eyecatcher, Farben und Co. so einrichten, dass die Website eine ganz individuelle Note erhält. Ab Seite 69 finden Sie eine Design übersicht, in der jedes Design mit der Angabe Flex-Design oder Standarddesign versehen ist. Die Website individuell anpassen gerade ein Flex-Design bietet in diesem Zusammenhang schier unerschöpfliche Möglichkeiten.

15 1.2 Schnellstart mit web to date NG: in fünf Schritten zur eigenen Website 31 Auch eine Smartphone-Version der Website lässt sich mit web to date NG automatisch erstellen und individuell anpassen. Klaus Mustermann will die mobile Website ebenfalls sofort designen. In diesem Buch wurde das Thema allerdings, da auch nicht zum Thema Design gehörende Informationen besprochen werden, in das Kapitel 13 verlagert. Auch die von web to date NG automatisch erstellte Smartphone-Version der Website bietet eine Menge Anpassungsoptionen. Durch Anlegen und Platzieren von Ordnern die Struktur der Website festlegen Als Nächstes erstellt Klaus Mustermann die Struktur der Website, d. h., er legt Ordner an, und in diesen Ordnern legt er Unterordner an. Neben Ordnern, die in der Hauptnavigation angezeigt werden sollen und die er deshalb dem Ordner Startseite zuweist, legt er auch Ordner für eine Impressum- und eine Kontaktseite an, die er dem Unterordner Infoseiten im Ordner Allgemeine Seiten zuweist. Machen Sie sich bitte noch keinen Kopf, wie genau das funktioniert in Kapitel 5 finden Sie dazu alle Anleitungen, die Sie benötigen.

16 32 1. Sofort starten: die besten Neuerungen kennenlernen & ältere Projekte migrieren Klaus Mustermann entscheidet sich dafür, erst mal nur eine kleine, aus einer einzigen Navigationsebene bestehende Website zu erstellen. Ausbauen kann er sie ja später immer noch eben, indem er den Ordnern der ersten Navigationsebene Unterordner zuweist, diese mit weiteren Unterordnern versieht etc. Die Struktur der Website bestimmt Klaus Mustermann durch das Anlegen von Ordnern entweder im Planungsmodus mit einer besonders übersichtlichen Darstellung der Struktur oder im Bearbeitungsmodus. Mit jedem Ordner, der angelegt wird, wird gleichzeitig auch eine Seite angelegt, die in dem Ordner enthalten ist. Diese Seite ist dann die Webseite, die aufgerufen wird, wenn der entsprechende Eintrag in der Navigation angeklickt wird. (Es lassen sich für unterschiedliche Zwecke auch noch weitere Seiten in einem Ordner erstellen, doch das ist an dieser Stelle noch nicht relevant.) Schritt 3: Füllen Sie Ihren Webauftritt mit attraktiven Textinhalten Um die Website mit Inhalten zu füllen, stehen Klaus Mustermann in web to date NG die verschiedensten Absatztypen zur Verfügung. Mit jedem Absatztyp lassen sich bestimmte Inhalte auf eine Seite bringen. Klaus Mustermann entscheidet sich dafür, zunächst die Textinhalte zu erstellen Bilder und Co. kommen später dazu. Um einen Textabsatz zu erstellen, doppelklickt Klaus Mustermann erst mal auf einen Ordner, um damit gleichzeitig die entsprechende Seite zu öffnen. Dann klickt er auf den Absatzbereich, in dem er seinen Absatz erstellen möchte. Schließlich entscheidet er sich unter der Schaltfläche Neu für das Erstellen eines Textabsatzes. Alles zum Anlegen von Absätzen werden Sie in Kapitel 6 dieses Buches noch ausführlich erfahren.

17 1.2 Schnellstart mit web to date NG: in fünf Schritten zur eigenen Website 33 Klaus Mustermann erstellt hier einen Textabsatz im Absatzbereich Inhalt dies ist der Hauptbereich einer Seite, alle weiteren Absatzbereiche lassen sich optional ein- oder ausblenden. Absätze lassen sich übrigens zusätzlich in einem Spaltenbereich, in einem Register oder in einem Akkordeon organisieren auch dazu mehr in Kapitel 6. Informationen aller Art in einem Textabsatz gefällig präsentieren Jeder Absatztyp bietet eigene Funktionen. Im Fall eines Textabsatzes muss Klaus Mustermann lediglich seinen Text eingeben und diesen dann ähnlich wie in einem Textverarbeitungsprogramm wie gewünscht formatieren. Speziell Textabsätze lassen sich zusätzlich mit einer Marginalspalte versehen, die ein Bild oder einen Infotext enthalten können. Jeder Absatz kann außerdem mit einem attraktiven Rahmen versehen werden. Alles zum Thema Textabsatz lesen Sie noch detaillierter in Kapitel 7.

18 34 1. Sofort starten: die besten Neuerungen kennenlernen & ältere Projekte migrieren Für die Darstellungen von Zahlen, Daten und Fakten verwendet Klaus Mustermann die Absatztypen Aufzählung sowie Tabelle (Sie werden diese, nebst weiteren nützlichen Absatztypen, ebenfalls in Kapitel 7 kennenlernen). Der aktuelle Stand der Website: Auf der Startseite wurde von Klaus Mustermann ein Textabsatz eingefügt; diesen hat er dann mit einem Effektrahmen versehen. Klaus Mustermann baut auf diese Weise beliebig viele Absätze in die Absatzbereiche ein. Dabei denkt er nicht nur an die Seiten in der Hauptnavigation, sondern auch an die Infoseiten für Impressum und Co. (dazu siehe Kapitel 8). Schritt 4: Fügen Sie Ihrer Website Bilder und weitere ansprechende Inhalte hinzu Dateien, die Sie in die Website einfügen möchten, verwalten Sie unten in web to date NG. Hierfür stehen zum einen der Bereich Bilder (für Bilddateien in den gängigen Formaten JPEG, GIF, PNG sowie BMP) und zum anderen der Bereich Downloads (für alle weiteren Dateien) zur Verfügung. Der Import einer oder mehrerer Dateien erfolgt dort einfach per Klick auf das -Symbol. Wie Sie den Bilder-Bereich verwalten, lesen Sie in Kapitel 9.1, zum Verwalten des Download-Bereichs erfahren Sie alles für Sie Wichtige in Kapitel 11.1.