webedition Benutzerhandbuch Demowebsite we_demo2 webedition Software GmbH

Transkript

1 webedition Benutzerhandbuch Demowebsite we_demo2 webedition Software GmbH

2

3 Demowebsite we_demo2 Benutzerhandbuch Standard Juli webedition Software GmbH Alle Rechte vorbehalten. Printed in Germany Die webedition Software GmbH gibt keine Garantie oder Gewähr hinsichtlich der Richtigkeit und der Genauigkeit der Angaben in diesem Handbuch.Ohne ausdrückliche schriftliche Erlaubnis der webedition Software GmbH darf für andere Zwecke als den privaten Gebrauch durch den Käufer dieses Handbuch nicht in irgendeiner Form mit irgendwelchen Mitteln, elektronisch oder mechanisch, mittels Fotokopie, durch Aufzeichnung oder mit Informationsspeicherungs- und Informationswiedergewinnungssystemen reproduziert oder übertragen werden.der Käufer darf eine Kopie der Software zu Sicherungszwecken erstellen. Eine Kopie der Software kann jederzeit von der webedition Software GmbH angefordert bzw. von der Webseite heruntergeladen werden.weder die webedition Software GmbH noch Lieferanten der webedition Software GmbH sind für irgendwelche Schäden (uneingeschränkt eingeschlossen sind Schäden aus entgangenem Gewinn, Betriebsunterbrechung, Verlust von geschäftlichen Informationen oder von Daten oder aus anderem finanziellen Verlust) ersatzpflichtig, die auf Grund der Benutzung dieses Produktes oder der Unfähigkeit, dieses Produkt zu verwenden, entstehen, selbst wenn die webedition Software GmbH von der Möglichkeit eines solchen Schadens unterrichtet worden ist.auf jeden Fall ist die Haftung der webedition Software GmbH auf den Betrag beschränkt, den Sie für das Produkt tatsächlich bezahlt haben. Microsoft Windows and Explorer are trademarks of Microsoft Corporation. Macintosh and Apple are trademarks of Apple Computer Inc. UNIX is a trademark of UNIX System Laboratories. All other trademarks are the property of their respective owners.

4

5 Inhaltsverzeichnis 5 1 Einführung 7 Was ist die we_demo2? 7 Installation 7 Aktuellste Version des Handbuchs 7 2 Demowebsite anpassen 9 Website öffnen 9 Webseite parken bzw. veröffentlichen 10 Webseite veröffentlichen 10 Webseite parken 11 Navigation anpassen 11 Logo austauschen 12 Hintergrundfarbe ändern 13 Titel, Beschreibung und Schlüsselwörter ändern 13 Einträge erstellen 14 Seiten und Bilder verlinken 16 Textseite verlinken 16 Bilder verlinken 18 Vorläufige Website erstellen 19 Weitere Informationen zu webedition 19

6 6 Inhalt Standard Juli 2004

7 1 Einführung Was ist die we_demo2? Die we_demo2 ist eine Demowebsite, um Ihnen die grundlegenden Funktionen der webedition Basisversion zu veranschaulichen. Die Demowebsite wurde ausschließlich mit den Funktionen der webedition Basisversion erstellt. Wir bieten Ihnen an, diese Seiten an Ihre Bedürfnisse anzupassen und selbst zu nutzen. Sie können die Texte austauschen, die Navigation ändern, die Hintergrundfarben anpassen und natürlich das eigene Logo einbauen. Diese Dokumentation zeigt Ihnen, wie Sie Änderungen durchführen können und welche Möglichkeiten Ihnen webedition ansonsten bietet. 1.2 Installation we_demo2 wird bei der Installation der webedition Basisversion automatisch mit installiert. Die Demosite we_demo2 befindet sich dann im Explorermenü auf der linken Seite des Bildschirms: Abb. 1 Explorermenü nach der Installation von webediton Hinweis: Die Installation der webedition Basisversion ist in der webedition Installationguide beschrieben. Eine.pdf Version dieses Handbuchs finden Sie unter folgender URL: Sie können zur Installation von webedition auch das webedition "Live update tool" benutzen, das Sie auf finden. 1.3 Aktuellste Version des Handbuchs Die aktuellste Version des Handbuchs steht im PDF-Format auf der webedition Homepage unter folgender URL bereit: we_demo2

8 8 Einführung Standard September 2004

9 2 Demowebsite anpassen Website öffnen Klicken Sie im Explorermenü auf der linken Seite des Bildschirms auf das + Zeichen von we_demo2. Das Explorermenü öffent sich: Abb. 2 Ausgeklapptes Exporermenü der we_demo2 Doppelklicken Sie nun auf die Datei index.php mit dem e Icon (in der Abbildung hellblau hinterlegt). Die Website öffnet sich: we_demo2

10 10 Demowebsite anpassen Abb. 3 Website we_demo2 2.2 Webseite parken bzw. veröffentlichen Webseite veröffentlichen Die Webseite /index.php ist momentan nicht veröffenlicht. Hinweis 1: Wenn Sie diese Seite veröffentlichen, überschreiben Sie dadurch eine evtl. bereits vorhandene eigene index.php Seite einer bestehenden Homepage! Hinweis 2: Falls eine bereits bestehende Indexseite zwar nicht index.php, jedoch index.html oder index.htm heißt, wird möglicherweise nach Veröffentlichung der webedition index.php Seite trotzdem nicht Ihre index.htm(l) Seite aufgerufen, sondern die webedition index.php Seite. Dies ist von den Einstellungen Ihres Webservers abhängig. Darin ist festgelegt, ob der Webserver zuerst *.htm(l) Seiten oder *.php Seiten aufruft. Prozedur 1 Webseite veröffentlichen 1 Klicken Sie im Explorermenü auf die Seite, die Sie veröffentlichen wollen (z. B. index.php). Die Datei erscheint hellblau hinterlegt. 2 Klicken Sie die Checkbox Beim Speichern veröffentlichen am unteren Fensterrand an. 3 Klicken Sie auf den Button Speichern. Die Demowebseite index.php ist nun veröffentlicht. Beim Eingeben von gelangen Sie direkt auf die webedition Demoseite we_demo2. Wenn Sie die Webseite zwar bearbeiten und die Änderungen im System speichern wollen, aber die Webseite noch nicht veröffentlichen wollen, achten Sie darauf, dass die Checkbox Beim Speichern veröffentlichen nicht aktiviert ist, bevor Sie auf den Button Speichern klicken. Standard September 2004

11 Demowebsite anpassen 11 Abb. 4 Speichern Button und Checkbox Beim Speichern veröffentlichen Webseite parken Eine Webseite parken bedeutet, dass eine bereits veröffentlichte Webseite nicht mehr veröffentlicht wird. Wenn eine Webseite veröffentlicht ist, erscheint am unteren Fensterrand der Button Parken. Klicken Sie auf diesen Button, um eine Webseite zu parken. Abb. 5 Parken Button 2.3 Navigation anpassen Die Navigation der Demoseite besteht aus 2 Ebenen. Dies reicht im allgemeinen für eine einfache Webseite völlig aus. Beide Ebenen können Sie an Ihre Bedürfnisse anpassen. Abb. 6 Navigation der we_demo2 Klicken Sie im Explorermenü auf /we_demo2/include/navigation.php Klicken Sie nun auf den Reiter Bearbeiten am oberen Fensterrand. Sie sehen die Navigation in der Bearbeiten Ansicht: we_demo2

12 12 Demowebsite anpassen Abb. 7 Navigation in der Bearbeiten-Ansicht Wählen Sie nun einen Navigationspunkt aus, den Sie (zuerst) bearbeiten möchten. Sie haben folgende Möglichkeiten, die Navigation anzupassen: Neuen Navigationspunkt hinzufügen. Wählen Sie dazu den Navigationspunkt aus, unter dem der neue Navigationspunkt erscheinen soll. Klicken Sie dann auf dessen Listenelement hinzufügen Button links außen. Ein neuer Navigationspunkt mit Namen Neuer Link erscheint. Wenn Sie mehrere Navigationspunkte gleichzeitig hinzufügen möchten, wählen Sie vorher in der Auswahlbox rechts neben dem Button Listenelement hinzufügen die gewünschte Anzahl aus. Navigationspunkt verschieben. Klicken Sie dazu auf die Nach oben bzw. Nach unten Buttons. Navigationspunkt löschen. Klicken Sie dazu auf den entsprechenden Löschen Button (Papierkorb-Symbol). Navigationsname ändern. Klicken Sie dazu auf den Bearbeite Hyperlink Button und geben Sie in dem sich öffnenden Dialogfenster einen anderen Namen an. Link bearbeiten. Klicken Sie auf den Bearbeite Hyperlink Button. Im sich öffnenden Dialogfenster können Sie weitere Einstellungen vornehmen. Alle Einstellungen bezüglich des Links löschen. Klicken Sie dazu auf den Löschen Button rechts neben dem Bearbeite Hyperlink Button. Zweite Navigationsebene hinzufügen. Klicken Sie dazu auf den Hyperlink hinzufügen Button und nehmen Sie im sich öffnenden Dialogfenster die Einstellungen dazu vor. 2.4 Logo austauschen Das Logo, das sich auf der Website in der linken oberen Ecke befindet, können Sie mit Ihrem eigenen Logo austauschen. Hinweis: Das Logo sollte nicht größer als 140 Pixel x 85 Pixel sein. Öffnen Sie zunächst im Explorermenü die Datei we_demo_2/include/navigation.php in der Bearbeiten-Ansicht. Es erscheint folgende Darstellung: Abb. 8 Logo in der Bearbeiten Ansicht Standard September 2004

13 Demowebsite anpassen 13 Klicken Sie auf den Grafik bearbeiten Button. Klicken Sie dann auf Hochladen und danach auf Browse... Wählen Sie im sich öffnenden Dateimanager die Datei von Ihrer lokalen Festplatte aus und klicken Sie auf Hochladen. 2.5 Hintergrundfarbe ändern Zum Ändern der Hintergrundfarbe der einzelnen Bereiche wählen Sie zunächst die Datei /we_demo2/css/misc.css in der Bearbeiten-Ansicht aus. Scrollen Sie im sich öffnenden Fenster so lange nach unten, bis die Definition der Hintergrundfarben erscheint: Abb. 9 Definition der Hintergrundfarben Die Bereiche b1 bis b6 stehen für folgende Hintergrundbereiche: b1. Hintergrund des Logos, gesamter oberer Randes (u. a. Hintergrund des Banners) und Hintergrund des rechter Randes mit der Newsübersicht (kein Hintergrund der Newsübersichts-Überschrift) b2. Streifen über dem mittleren Textbereich b3. Hintergrund des Navigationsmenüs auf der linken Seite, Streifen über b2, Hintergrund der Newübersichts-Überschrift b4. Hintergrund des Copyrights unterhalb der linken Navigation, Streifen zwischen Newsübersichts-Überschrift und Newsübersicht b5. Nicht belegt b6. Nicht belegt Passen Sie die Farben an, indem Sie den Farbcode ändern. #FFFFFF steht beispielsweise für weiß. Welche Farbe sich hinter welchem Farbcode verbirgt, können Sie der Farbübersicht entnehmen, welche sich durch Doppelklick auf /we_demo2/css/farben.php öffnet. Nachdem Sie die Farbcodes im Bearbeiten-Fenster angepasst haben, klicken Sie auf Speichern (die Checkbox Beim Speichern veröffentlichen muss dabei aktiviert sein!). Durch einen erneuten Doppelklick auf /we_demo2/index.php können Sie die Änderungen ansehen. 2.6 Titel, Beschreibung und Schlüsselwörter ändern Die Meta-Info Titel erscheint im oberen Rahmen des Browserfensters. Die Meta-Infos Beschreibung und Schlüsselwörter benötigen Suchmaschinen, um die Website zu finden und den Inhalt der Webseite anzugeben. Um Titel, Beschreibung und die we_demo2

14 14 Demowebsite anpassen Schlüsselwörter zu ändern, klicken Sie die gewünschte Seite im Explorermenü an und wählen Sie die Ansicht Eigenschaften. Ändern Sie dann im Bereich Meta-Infos die Angaben. Abb. 10 Angeben von Meta-Infos 2.7 Einträge erstellen Zum komfortablen Eingeben von Inhalten bietet webedition die Möglichkeit, Eingabemasken in Vorlagen zu definieren. Um zu sehen, welche Vorlagen (*.tmpl) in der Demosite bereits definiert sind, wählen Sie den Karteireiter Vorlagen aus. In folgender Abbildung sehen Sie beispielhaft die Vorlage /we_demo2/shop/artikel.tmpl für das komfortable Eingeben von Artikeln: Standard September 2004

15 Demowebsite anpassen 15 Abb. 11 Vorlage shop/artikel zum Eingeben neuer Artikel Um das Arbeiten mit Vorlagen noch einfacher zu machen, können verschiedene Einstellungen rund um eine Vorlage in einem sogenannten Dokument-Typ gespeichert werden. Ein Dokument-Typ beinhaltet u. a.: Aussagekräftigen Namen Zuordnung der passenden Vorlage Speicherort Dateiformat Angabe, ob Seite durchsuchbar sein soll Das Arbeiten mit Dokumenttypen ist sinnvoll, da dadurch Inkonsistenzen und fehlerhafte Einstellungen vermieden werden und die Arbeit der Redakteure erleichtert wird. In we_demo2 sind bereits alle Dokument-Typen definiert, die Sie zum Anpassen dieser Website benötigen. Um neue Einträge mit Hilfe eines Dokument-Typs zu erstellen, we_demo2

16 16 Demowebsite anpassen wählen Sie im Menü Datei > Neu > webedition Seite einen dieser Dokument-Typen aus: AktuelleNews. Der Dokument-Typ beinhaltet eine Eingabemaske für Überschriften, das Datum (Sortierkriterium), ein Bild, einen Anlesetext für eine News-Übersichtsseite und den eigentlichen Newstext. Verlinkungen geschehen automatisch. Wenn Sie das Dokument gespeichert und veröffentlicht haben, finden sie die neue News sowohl in der Übersicht nach einem Klick auf News in der Navigation als auch auf jeder Webseite rechts oben in der Kurzübersicht Aktuelle News. Artikel. Der Dokument-Typ beinhaltet eine Eingabemaske zur Beschreibung eines Produkts bzw. einer Dienstleistung. Filmberichte. Der Dokument-Typ beinhaltet eine Eingabemaske für Filmtitel, Bildunterschrift und Text. Gästebucheintrag. Der Dokument-Typ beinhaltet eine Eingabemaske für Datum, Name, Adresse, Ort und den eigentlichen Gästebucheintrag. NewsArtikel. Der Dokument-Typ beinhaltet eine Eingabemaske für Datum, Überschrift, Bildunterschrift und den News-Artikel. PhotoAlbum. Der Dokument-Typ beinhaltet eine Eingabemaske für eine Überschrift, Text und das Album. Produktbild. Dieser Dokument-Typ bietet die Möglichkeit ein (Produkt-)bild mit einem vergrößerten Bild zu verlinken. Wenn ein Kunde dann auf das kleine Bild klickt, erscheint das Bild in einer Großansicht. Textseite. Der Dokument-Typ beinhaltet eine Eingabemaske für eine Überschrift und Text. In das Texteingabefeld kann auch HTML, PHP oder andere Programmiersprachen eingegeben werden; sie werden dann so interpretiert, als würden sie im Quelltext der Seite stehen. Geben Sie nun in der Bearbeiten-Ansicht Inhalte ein. Elemente (Textbereiche, Bilder u.s.w.), die nicht benötigt werden, können Sie leer lassen. Sie werden auf der Website nicht angezeigt. In der Ansicht Eigenschaften können Sie dem neuen Dokument einen aussagekräftigen Namen und bei Bedarf einen anderen Speicherplatz zuweisen. Speichern Sie dann die Seite. Mehr zu Dokument-Typen und Vorlagen finden Sie im webedition Benutzerhandbuch in Abschnitt "Dokument-Typen" auf Seite 79 und in Kapitel 4 "Vorlagen erstellen Aufgabe des Administrators" auf Seite Seiten und Bilder verlinken Seiten, die auf dem Dokument-Typ "Aktuelle News" basieren, werden automatisch verlinkt. Alle anderen Seiten müssen manuell verlinkt werden Textseite verlinken In diesem Kapitel erfahren Sie, wie Sie eine Seite, die auf einem beliebigen Dokument-Typ basiert, mit einem neuen Menüpunkt der Navigation verlinken. In diesem Beispiel basiert die Seite auf dem Dokument-Typ Textseite und wird mit einem neuen Menüpunkt namens Unternehmen verlinkt. Standard September 2004

17 Demowebsite anpassen 17 Öffnen Sie eine neue webedition Seite mit dem Dokument-Typ Textseite (Datei > Neu > webedition Seite > Textseite). Geben Sie in der Bearbeiten-Ansicht die gewünschten Inhalte ein. Wechseln Sie in die Eigenschaften-Ansicht und geben Sie dort einen aussagekräftigen Dateinamen ein, z. B. "unternehmensbeschreibung.php". Speichern und veröffentlichen Sie das Dokument. Wechseln Sie nun zur Navigationsseite /we_demo_2/include/navigation.php. Erweitern Sie in der Bearbeiten-Ansicht die Navigation um einen weiteren Hauptnavigationspunkt durch einen Klick auf den Button Listenelement hinzufügen. Klicken Sie anschließend rechts neben Neuer Link auf den Button Bearbeite Hyperlink. Das Fenster Link bearbeiten öffnet sich. Nehmen Sie nun folgende Einstellungen vor: Abb. 12 Verlinkung einer Seite mit einem Navigationspunkt Aktivieren Sie im Bereich URL den Radio-Button Interner Link und wählen Sie mit Hilfe des Buttons Auswählen und des daraufhin erscheinenden Datei-Managers die zu verlinkende Seite ( unternehmensbeschreibung.php ) aus. Bestätigen Sie mit OK. Aktivieren Sie im Bereich Inhalt den Radio-Button Text und geben Sie den Namen des Links - z. B. Unternehmen - in das Eingabefeld. Bestätigen Sie mit Speichern. Speichern und veröffentlichen Sie nun auch die Seite navigation.php. Wenn Sie jetzt mit einem Doppelklick die /we_demo_2/index.php öffnen, erscheint in der Navigation we_demo2

18 18 Demowebsite anpassen der neue Menüpunkt Unternehmen, nach einem Klick darauf gelangen sie auf die eben neu erstellten Seite Bilder verlinken In diesem Kapitel erfahren Sie, wie ein Kunde durch Klick auf ein Bild eines Produktes eine vergrößerte Ansicht dieses Bildes erhalten kann. Voraussetzung: Für diese Funktion benötigen Sie von den bestehenden Bildern Ihrer Produkte Kopien mit größerer Bildgröße. Importieren Sie die größeren Produktbilder nach webedition (Datei > Import/Export > Import... > Lokale Dateien importieren) und speichern Sie sie unter we_demo2/images/produkte. Erstellen Sie eine neue Seite mit dem Dokument-Typ Produktbild (Datei > Neu > webedition Seite > Produktbild) und klicken Sie auf den Button Grafik auswählen. Abb. 13 Grafik auswählen Wählen Sie das große Produktbild aus und gehen Sie in der Ansicht Eigenschaften in den Bereich Pfad. Geben Sie dem Bild einen aussagekräftigen Namen, wählen Sie bei Erweiterung.php aus und bei Verzeichnis /we_demo2/produkte. Speichern und veröffentlichen Sie die Einstellungen. Öffnen Sie im Verzeichnis /we_demo2/produkte die entsprechende Artikelseite und klicken Sie in der Bearbeiten-Ansicht auf den Button Bearbeite Hyperlink rechts des Bildes. Abb. 14 Link eines Produktbildes bearbeiten Es öffnet sich das Fenster Link bearbeiten (siehe Abb. 15). Aktivieren Sie im Bereich URL den Radiobutton Interner Link und wählen Sie die eben erstellte Seite mit dem großen Produktbild aus: Standard September 2004

19 Demowebsite anpassen 19 Abb. 15 Internes Linkziel angeben Speichern und veröffentlichen Sie dann die Seite. Wenn Sie nun auf das kleine Bild der Produktseite klicken, erscheint die Großansicht des Bildes. 2.9 Vorläufige Website erstellen Wenn Sie möchten, dass während der Aufbauphase Ihrer Website die Meldung Diese Seite befindet sich im Aufbau o. ä. erscheint, ändern Sie den Quellcode in we_demo2/index.html wie folgt ab: Alt: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta http-equiv="refresh" content="0;url=/we_demo_2/"> </head> <body> </body> </html> Neu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=iso "> <!--<meta http-equiv="refresh"content="0;url=/we_demo_2/">--> </head> <body> Diese Seite befindet sich im Aufbau! </body> </html> Selbstverständlich können Sie auch jeden beliebig anderen Text zwischen die <body> Tags eingeben. Wenn die komplette Website veröffentlicht werden soll, stellen Sie einfach den alten Quellcode wieder her Weitere Informationen zu webedition Weitere Informationen zur webedition Basisversion und zu den einzelnen Modulen finden Sie auf der webedition Homepage sowie in den webedition we_demo2

20 20 Demowebsite anpassen Handbüchern. Unter der URL stehen Ihnen sämtliche Handbücher im PDF-Format kostenlos zum Download zur Verfügung. Standard September 2004

21

22 Demowebsite we_demo2 Benutzerhandbuch Standard September 2004 Printed in Germany 2004 webedition Software GmbH Alle Rechte vorbehalten. webediton Software GmbH Karlsburgstr Karlsruhe Deutschland Internet: info@webedition.de