Dokumentenverwaltung Dokument hochladen Hochladen einer PDF-Datei Hochladen einer ZIP-Datei, zum Download bereitstellen

Transkript

1

2 Inhaltsverzeichnis Einleitung Was ist die bluetronix Software? Was ist ein CMS? Was ist eine Online-Software? Vorteile von Online-Software Systemvoraussetzung Sicherheitshinweise Schnelleinstieg Der Bearbeitungsmodus Anmeldung am CMS Das Haupt-Menü Die Edit-Buttons Seite bearbeiten Datensatz bearbeiten Menü bearbeiten - Änderung der Navigation Layout ändern - vorgefertigtes Layout laden Verschobene Darstellung - Bildschirmauflösung Homepage-Editor Grundsätzliche Funktionen Textgestaltung Textausrichtung Webspezifische Funktionen Link erstellen Seiten verbinden Externe Links Link zu einer anderen Webseite Die Bilderverwaltung Bilder hochladen Die Bildermenüleiste Der Bild-Editor Beispiel Bild online bearbeiten Dokumentenverwaltung Dokument hochladen Hochladen einer PDF-Datei Hochladen einer ZIP-Datei, zum Download bereitstellen Tabellen - Tabellenmenüleiste Tabelle einfügen Unsichtbare Tabelle, transparente Tabelle Formulare Einfügen einer Auswahl (Select-Feld) Einfügen eines einzeiligen Eingabefeldes (Input-Feld) 2

3 Senden-Button Formular-Optionen Testen eines Formulars Module und Plugins Laufschrift einfügen Newsticker Datum einfügen Format Datum einfügen Format 30. Juni 2008 Uhrzeit einfügen Bildershow Diashow einfügen Mouseover-Bild einfügen Detaillierte Bildansicht Der CSS-Editor Stylesheet-Editor CSS-Beispiel Sonderzeichen Die HTML-Code-Ansicht Beispiel für die Code-Ansicht Seiten-Einstellungen Der Seiten-Titel Hintergrund und Seitenlayout Autor, Keywords, Suchmaschinen Seite nicht in Suchmaschinen eintragen PHP-Code im Text-Editor bearbeiten Vorlagen zum Seitenaufbau Anpassen der Vorlagen im CSS-Editor (für Webdesigner) Freie Positionierung Dynamische Menüs Klapp-Menüs Menü-Typen Der Menü-Editor Die Seiten-Verwaltung (Datei-Verwaltung) Der Text-Editor Das Benutzersystem Administratorpasswort ändern Benutzerpasswort ändern 3

4 Die Mitarbeiter-Verwaltung Anlegen eines Mitarbeiters Die Mitarbeiter Benutzer sperren Benutzer entsperren Benutzerpasswort neu vergeben Passwort vergessen Registrierte Benutzer und Gruppen Seite / Verzeichnis Passwortschützen, Interner Bereich Homepage-Layout Das bluetronix Layout-Konzept Layout bearbeiten Fensteraufteilung Fenstereinstellungen - Hintergrundeinstellungen Stilarten bearbeiten CSS-Klassen Eigene Schriftarten Stilarten-Assistent global Farben und Bilder ändern Design-Vorlagen Fragen zum bluetronix Layout-Konzept Wie erstelle ich eine Seite ohne Frames, ohne für eine Änderung am Menü oder Kopffeld mehrere Seiten ändern zu müssen? Warum sollte man eine Seite ohne Frames erstellen? Wie kann ich auf der Homepage eine Seite, wie bei Frames ein Fenster, scrollen, ohne Frames zu verwenden? CMS Module Grundsätzliches zu den Modulen dynamische Seiten Komponente 1 die Seiten-Maske Komponente 2 das PHP-Script Komponente 3 die Datenbank Mehrfachinstallation eines Moduls Kombinationen von Modulen Fotoalbum Fotoalbum mit Bilderimport und automatischer Berechnung der Bilder Installation des CMS-Moduls Fotoalbum Einfaches Einfügen bzw. Ändern von Bildern im Fotoalbum Fotoalbum mit individuellem Layout Shopsystem Online-Shop Funktionen des Shopsystems Installation des CMS-Moduls Shopsystem Hinzufügen und Ändern eines Artikels Import und Export von Artikeln im CSV bzw. TXT-Format Aktualisieren des Shopmenüs (automatisch) Aktualisieren des Shopmenüs (manuell) 4

5 Shopdatenbank, Spalten und Eigenschaften Links auf Shopseiten Bearbeiten der Shopmasken Shopsystem für Programmier mit PHP, HTML und Javascript Shopsystem - Warenkorb und Zahlungssystem Zahlung per Kreditkarte Shopsystem Empfang einer Bestellung Weiterleitung auf das Handy Shopsystem - Auswertung der Zugriffe Optimierung Shopsystem mit Modul Interne Bereiche Newsseite Installation des CMS-Moduls Newsseite Einfaches Einfügen bzw. Ändern von Datensätzen in der Newsseite Formularsystem Installation des CMS-Moduls Formular Einfaches Erstellen und Ändern des Formulars Formulare Layout anpassen Formular - Weiterleitung auf das Handy Interne Bereiche Installation des CMS-Moduls Interne Bereiche Einfaches Ändern der Login-Seiten - Layoutanpassungen Gästebuch Installation des CMS-Moduls Interne Bereiche Einfaches Ändern und Löschen von Datensätzen im Gästebuch Einfaches Ändern der Gästebuch-Seiten - Layoutanpassungen Diskussionsforum Installation des CMS-Moduls Diskussionsforum Einfaches Ändern und Löschen von Datensätzen im Forum Einfaches Ändern der Foren-Seiten - Layoutanpassungen Homepage Suche Volltextsuche Installation des CMS-Moduls Diskussionsforum Einfaches Ändern der Suchen-Seiten - Layoutanpassungen Newsletter - Modul Installation des CMS-Moduls Newsletter Einfaches Ändern der Newsletter-Seiten - Layoutanpassungen 5

6 Datenbanken Die Datenbankverwaltung Die Tabellen-Ansicht Felder bearbeiten Zeileninhalt löschen, Spalteninhalt löschen Zeileninhalt kopieren, Spalteninhalt kopieren Spalte einfügen, löschen, ändern Datensatz bearbeiten Die Datensatzansicht Import und Export über Zwischenablage Datenbank importieren Schritt 1 - Datei in Excel als CSV speichern Schritt 2 - Import der Datei in der Datenbankverwaltung Datenbank exportieren MySQL-Befehlseingabe Statistik - Zugriffsauswertung Datentransfer, Anzahl der Besucher Besuchereinzelauswertung Wie kam ein Besucher auf meine Homepage? Was hat ein Besucher in der Suchmaschine eingegeben? Speicherplatzverwaltung Vertag Persönliche Daten ändern Aktuelle Rechnung Vertragswechsel Domain-Verwaltung Domain registrieren Domain-Providerwechsel Domain-Status-Anzeige Was ist eine Hauptdomain? Hauptdomain wechseln Die -Adressverwaltung Neue -Adresse erstellen Passwort der -Adresse ändern -Adresse umleiten -Datenblatt Daten für Outlook POP3, STMP, IMAP s lesen und schreiben mit dem Webmailer lesen s schreiben 6

7 Einrichtung von MS-Outlook Daten zur -Adresse ermitteln MS-Outlook einrichten Einrichtung von Thunderbird Daten zur -Adresse ermitteln Thunderbird einrichten SPAM-Filter installieren Vorgehen bei Problemen mit einer -Adresse Newsletter Newsletter versenden Newsletter-Adressverwaltung Newsletter-Adressbuch aus Outlook importieren Schritt 1 Export des Adressbuches aus Outlook Schritt 2 Formatieren der Spalten in Excel Schritt 3 Import des Adressbuchs in das Newslettersystem FTP-Webverzeichnis Das FTP-Webverzeichnis Die FTP-Zugangsverwaltung FTP-Passwort ändern Externes FTP-Programm einrichten Reseller Vertriebspartner Webpaket als Reseller bestellen Homepage-Übernahme mit Providerwechsel Import einer bestehenden Homepage Kopieren der lokal gespeicherten HTML-Seiten Hochladen der bisherigen HTML-Seiten per FTP Kopieren der Datei style.css Import der Dateien im CMS Seiten mit Frames umwandeln Sinn und Zweck Seiten und Fenstergrößen aus dem Frameset ermitteln Umbenennen der Homeseite in index.html Impressum 7

8 Einleitung Sehr geehrter Kunde, vielen Dank, dass Sie sich für unser Produkt entschieden haben. Im Folgenden erhalten Sie Informationen über die vielen Funktionen der bluetronix CMS-Software. Was ist die bluetronix Software? Was ist ein CMS? Was ist eine Online-Software? Vorteile von Online-Software Systemvoraussetzung Sicherheitshinweise Was ist die bluetronix Software? Die bluetronix Software ist ein einfach zu bedienendes System mit vielen Funktionen für die Gestaltung und Pflege einer professionellen Homepage. Die Software ist für Neueinsteiger und Profis gleichermaßen geeignet und ist mehr als ein reines Content-Management-System. Serverfunktionen wie - und Domain- Konfiguration, Zugriffsstatistik, FTP-Programm und Benutzerkonten sind enthalten. Funktionen wie HTML-Editor, Bild-Editor, Formularsystem, Newslettersystem, CSS-Editor, Text-Editor, Editor für dynamische Menüs, Datenbank-Editor sowie die Module Shopsystem, Gästebuch, Diskussionsforum, Fotoalbum, Interne-Bereiche und Newsseite machen die Software einzigartig. Was ist ein CMS? Der Begriff CMS, in ausgeschriebener Form Content Management System, bedeutet einfach gesagt, die gemeinschaftliche Erstellung und Pflege von Texten und Inhalten einer Homepage. Das Ziel des bluetronix CMS ist, dass die Benutzer des Systems auch ohne Programmier- und HTML-Kenntnisse eine Homepage gestalten und pflegen können. Was ist eine Online-Software? Eine Online-Software, wie die bluetronix Software, kann ohne jegliche Installationsarbeiten direkt online über den Browser (dem Internet-Explorer) ausgeführt werden. Vorteile von Online-Software Bedienbar über verschiedene PC s zum Beispiel im Büro, von zu Hause aus oder im Internet-Kaffee Sie bearbeiten immer die aktuellste Version Ihrer Homepage, speziell bei mehreren Benutzern ist dies unverzichtbar Keine lokale Installation, keine lokale Datensicherung notwendig, automatische Datensicherung auf dem Server Sie verwenden immer die aktuellste Version der bluetronix-software, Updates werden automatisch ausgeführt Systemvoraussetzung Für die bluetronix Software benötigen Sie einen internetfähigen PC mit Modem oder DSL- Anschluss sowie den Microsoft Internet Explorer ab Version 5.5. Für Mac Benutzer ist eine Windows -Desktop-Erweiterung notwendig. Wichtig! Dies ist nur für die Bearbeitung 8

9 der Seiten notwendig, die fertigen Webseiten können natürlich über jeden anderen Browser aufgerufen werden. Der Internet Explorer wird nur zur Bearbeitung Ihrer Webseite benötigt. Die fertige Seite ist natürlich auch in jedem anderen Browser aufrufbar. Sicherheitshinweise Der Kunde verpflichtet sich, vom Provider erhaltene Passwörter streng geheim zu halten. Geben Sie Ihr Passwort nicht an Dritte weiter. Ein verantwortungsvoller Umgang mit Ihren Benutzerdaten ist die Grundvoraussetzung für ein sicheres Arbeiten. Die Haftung für alle übrigen Schäden, insbesondere Folgeschäden, mittelbare Schäden, entgangener Gewinn oder Vermögensschäden ist ausgeschlossen. Alle weiteren Bestimmungen finden Sie unter unseren Allgemeinen Geschäftsbedingungen. 9

10 Schnelleinstieg Im diesem Kapitel werden die wichtigsten Funktionen zur Bedienung der bluetronix Software erläutert. Die Software ist komplett vorinstalliert und beinhaltet eine vorgefertigte Homepage. Sie können direkt mit der Bearbeitung Ihrer Webseite beginnen. Der Bearbeitungsmodus Anmeldung am CMS Das Haupt-Menü Die Edit-Buttons Seite bearbeiten Datensatz bearbeiten Menü bearbeiten - Ändern der Navigation Layout ändern - vorgefertigtes Layout laden Verschobene Darstellung - Bildschirmauflösung Der Bearbeitungsmodus Anmeldung am CMS Öffnen Sie den Internet Explorer und rufen Sie Ihre Webseite auf. Den Domainname finden Sie in Ihren Zugangsdaten zum Beispiel Geben Sie in der Adressleiste des Browsers hinter dem Domainname /bearbeiten ein, zum Beispiel Im Login-Fenster geben Sie Ihren Benutzernamen und Ihre Passwort ein und bestätigen mit Login. Geben Sie die Daten exakt so ein, wie in den Zugangsdaten. Groß- und Kleinschreibung wird unterschieden. 10

11 Nach korrektem Login öffnet sich der Bearbeitungsmodus. Im oberen Teil befindet sich das sogenannte Haupt-Menü, im unteren Teil wird Ihre Webseite im Bearbeitungsmodus geladen. Das Haupt-Menü Aktualisieren der Ansicht Hilfe zum aktuellen Fenster Benutzerverwaltung, Mitarbeiter erstellen, registrierte Benutzer und Gruppen Dateiverwaltung, Passwortschutz, Up- und Download von Dateien Layout, Fensteraufteilung, Farben und Hintergrundbilder, CSS-Einstellungen Module wie Shopsystem, Gästebuch, Forum, Fotoalbum, Newsseite etc. Datenbanken, Datenbankverwaltung, Import und Export, MySQL-Befehlseingabe Statistik, Zugriffauswertung, Besucher-Einzel-Auswertung, Speicherplatzverwaltung Vertrag, Vertragswechsel, Benutzerdaten ändern, Zahlungsart ändern, Domainverwaltung , verwaltung, Webmailer, Hilfe zur Einrichtung von Outlook und Thunderbird Newsletter, Newsletter versenden, Newsletter Adress-Verwaltung FTP, FTP-Programm, FTP-Zugangsverwaltung Extras, Formular-Archiv, Seiten-Import, Schriftgröße Abmelden, Logout 11

12 Die Edit-Buttons Die Homepage verfügt im Bearbeitungs-Modus über die sogenannten Edit-Buttons. Diese erleichtern den Zugriff auf verschiedene Funktionen. Somit können Sie wie gewohnt auf Ihrer Webseite navigieren und immer das bearbeiten, was Sie aktuell sehen. Öffnet die Seite im Editor Öffnet den Menü-Editor Einfügen eines Datensatzes bei dynamischen Seiten Bearbeiten eines Datensatzes bei dynamischen Seiten Löschen eines Datensatzes bei dynamischen Seiten Wenn Sie den Mauszeiger über einen Button bewegen, erhalten Sie weitere Informationen, zum Beispiel beim Bearbeiten-Button den Dateinamen der Seite. Seite bearbeiten Im folgenden Beispiel soll die Seite Home" bearbeiten werden. Navigieren Sie dazu auf die Seite Home mit einem Klick auf Home. Zum Bearbeiten der Seite klicken Sie in der rechten oberen Ecke, auf Bearbeiten. Der Editor verfügt über Textverarbeitungs- sowie webspezifische Funktionen. Sie können Texte schreiben, gestalten oder von anderen Textverarbeitungsprogrammen kopieren. 12

13 Schreiben Sie, wie in der Textverarbeitung gewohnt, einen Beispieltext oder fügen Sie ein Bild ein. Um die Seite zu speichern, klicken Sie anschließend auf das Speichern Symbol. Die Seite wird gespeichert und kann jetzt im Internet von Ihren Besuchern gelesen werden. Eine genaue Beschreibung der Editor-Funktionen finden Sie im Kapitel Der Homepage- Editor. Datensatz bearbeiten Über die Edit-Buttons können Sie genau so einfach Datensätze wie zum Beispiel im Shopsystem, auf der Newsseite oder im Gästebuch ändern. Hier im Beispiel soll ein Eintrag in der Newsseite geändert werden. Navigieren Sie dazu auf die Newsseite mit einem Klick auf Newsseite. Newsseite mit zwei Datensätzen (Datensatz 1 rot umrandet und Datensatz 2 grün umrandet) sowie den Edit-Buttons Um den Inhalte eines Datensatzes zu bearbeiten, klicken Sie in der linken oberen Ecke auf das Datensatz bearbeiten Symbol. 13

14 Ändern Sie zum Beispiel die Überschrift oder tauschen Sie das Bild und klicken Sie anschließend auf Speichern. Kontrollieren Sie das Ergebnis auf der Homepage. Analog verfahren Sie mit den Funktionen Datensatz löschen. Neuen Datensatz einfügen bzw. Weitere Informationen zu Datenbanken und dynamischen Seiten erhalten Sie in den Kapiteln Datenbanken, dynamische Seiten und Grundsätzliches zu den Modulen. Menü bearbeiten - Ändern der Navigation Das folgenden Beispiel zeigt, wie Sie einen weiteren Menüpunkt in die Navigation einfügen. Im Bearbeitungsmodus wird, wie bei allen dynamischem Menüs, in der linken oberen Ecke der Menü bearbeiten Button angezeigt. Zum Aufruf des Menü-Editors klicken Sie auf Menü bearbeiten. 14

15 Im Beispiel soll unterhalb der Navigationspunktes Newsseite ein neuer Menüpunkt mit dem Name Kontakt erstellt werden. Klicken Sie dazu auf den Punkt Newsseite und auf das Symbol Punkt darunter einfügen. Klicken Sie in das neue Feld und geben Sie den Namen des Menüpunkts zum Beispiel Kontakt ein. Klicken Sie abschließend auf Speichern. In der Standard-Einstellung werden die Seiten von neuen Menüpunkten automatisch angelegt. Das Verlinken und Erstellen der zugehörigen Seite ist nicht notwendig. Schließen Sie den Menü-Editor und klicken Sie auf Ihrer Homepage auf den neu erstellten Menüpunkt Kontakt. Eine Anleitung zum Erstellen und Gestalten eines Menüs finden Sie im Kapitel dynamische Menüs. Layout ändern - vorgefertigtes Layout laden Je nach Webpaket sind weitere vorgefertigte Layouts in der Software enthalten. Klicken Sie im Hauptmenü auf Layout -> Design-Vorlagen. 15

16 Klicken Sie auf das gewünschte Layout und bestätigen Sie mit Layout-Laden. Schließen Sie das Layout-Fenster und kontrollieren Sie das Ergebnis auf Ihrer Homepage. Eine einfache Möglichkeit, das Layout anzupassen, finden Sie unter Layout -> Stilarten- Assistent. Hier können einfach Farben, Bilder und Hintergrundbilder des Layouts verändert werden. Die bluetronix Software umfasst ein umfangreiches System zur Erstellung und Gestaltung des Layouts. Verschiedene Layouts auf einer Homepage, zum Beispiel für verschiedene Bereiche oder dem Shopsystem, sind möglich. Ein vollwertiger CSS-Editor, mit welchem auch ohne CSS-Programmierkenntnisse Objekte umfangreich beschrieben werden können, ist enthalten. Weitere Informationen zum Erstellen eines Layouts finden Sie im Kapitel Das eigene Layout erstellen. Verschobene Darstellung - Bildschirmauflösung Bei einer Bildschirmauflösung mit 120 dpi, bzw. bei veränderten Einstellungen der Schriftgröße im Browser können Verschiebungen der Darstellung auftreten. Um die bluetronix Software optimal zu nutzen, können Sie im Hauptmenü unter Extras -> Editor- Schriftgröße die Schriftgröße anpassen. Stellen Sie die Schriftgröße so ein, dass wie hier im Bild der Beispieltext nicht über die Markierungen reicht. 16

17 Homepage-Editor Der Homepage-Editor (HTML-Editor oder auch als Wyswy-Editor bezeichnet) vereinfacht das Bearbeiten von Webseiten. Für die Bedienung sind keine Programmierkenntnisse erforderlich. Grundsätzliche Funktionen Im folgenden werden einige Symbole der Menüleisten beschrieben. Seite öffnen, startet die Dateiverwaltung Seite speichern Seite speichern unter, speichert die Seite unter einem anderen Name Seite neu beginnen Ausschneiden Kopieren Einfügen Rückgängig, letzte ausgeführte Aktion rückgängig machen Wiederherstellen, letztes Rückgängig machen widerrufen Beispiel zum Ausschneiden, Kopieren und Einfügen Um Objekte wie Texte, Bilder oder Tabellen zu kopieren, markieren Sie den Text oder das Bild und klicken Sie auf das Kopieren Symbol. Klicken Sie jetzt an die Stelle, an welche der Text eingefügt werden soll und auf den Einfügen Button. 17

18 Textgestaltung Die folgenden Funktionen können auf Texte angewendet werden. Markieren Sie dazu den entsprechenden Text und klicken Sie auf eines der Symbole. Fettschrift Kursivschrift Unterstrichen Hochgestellt Tiefgestellt Textfarbe Text-Hintergrundfarbe Text-Formatierung entfernen, entfernt alle Formatierungen Schriftart Schriftgröße, mit Eingabefeld zur manuellen Eingabe der Schriftgröße Textausrichtung linkbündige Textausrichtung zentrierte Textausrichtung rechtsbündige Textausrichtung Blocksatz Textausrichtung entfernen Nummerierung - Automatische Nummerierung von Absätzen, in Kombination mit Absatz einrücken können Unterpunkte realisiert werden Punktliste analog der Nummerierung nur stilistisch mit Punkten anstelle von Zahlen Absatz einrücken Absatz weniger einrücken Webspezifische Funktionen Seiten-Einstellungen Vorlage Menü-Einstellungen Objekt freistellen HTML-Code-Ansicht Suche findet Begriffe auf der Seite sowie in der Code-Ansicht. Link entfernen Eigene Bilder - Bilderverwaltung Dokumente - Dokumentenverwaltung Tabelle-Menüleiste - Aktivieren sowie deaktivieren der Menüleiste FTP-Verzeichnisse - Zugriff auf das FTP Verzeichnis 18

19 Trennlinie einfügen - Textgestaltung Formular einfügen - Formulare erstellen Spezielle Objekte - Laufschrift, Counter, Datum, Diashow, Mouseover - Bild Schaltfläche einfügen - Buttons erzeugen Sonderzeichen Link erstellen Seiten verbinden Ein sogenannter Link ist ein Verweis zu einer anderen Seite. Ein Link kann aus einem Text oder einem Bild bestehen. Markieren Sie dazu im Editor den gewünschten Text oder ein Bild und klicken Sie auf Link einfügen. Im Link-Fenster klicken Sie auf Seite wählen. Hier im Beispiel soll ein Link zur Seite Kontakt.html erstellt werden. Klicken Sie in der Dateiverwaltung auf die Seite Kontakt.html und bestätigen Sie mit Übernehmen. Bestätigen Sie im Link-Fenster mit Einfügen. Speichern Sie die Seiten, schließen Sie den Editor und testen Sie den Link. 19

20 Externe Links Link zu einer anderen Webseite Als externe Links werden Verweise bezeichnet, die zu einer anderen Webseite verbinden. Markieren Sie dazu im Editor den gewünschten Text oder ein Bild und klicken Sie auf Link einfügen. Geben Sie jetzt im Feld Link die sogenannte URL der Webseite, zum Beispiel ein. Sofern die Webseite in einem neuen Browser-Fenster geöffnet werden soll, wählen Sie unter Ziel Neues_Fenster. Bestätigen Sie im Link-Fenster mit Einfügen. Speichern Sie die Seiten, schließen Sie den Editor und testen Sie den Link. Die Bilderverwaltung Bilder hochladen Mit Hilfe der Bilderverwaltung übertragen Sie Bilder von Ihrem lokalen PC auf Ihren Webspeicherplatz und fügen diese zum Beispiel im Editor ein. Bilderverzeichnis wählen Bild-Editor, zum online bearbeiten des Bildes Bild löschen Bild downloaden (runterladen) Im folgenden Beispiel soll ein Bild hochgeladen werden und anschließend im Editor eingefügt werden. Starten Sie die Bilderverwaltung mit einem Klick auf den Button Bilderverwaltung. Klicken Sie auf Durchsuchen, wählen Sie eine Bilddatei von Ihrem PC aus. Klicken Sie auf Öffnen und anschließend auf Bild-Hochladen. 20

21 Um das Bild einzufügen, markieren Sie das Bild mit einem Klick und drücken auf Bild- Einfügen. Eine Bild-Datei muss die Endung jpg, jpe, jpeg, png oder gif besitzen und darf nicht größer als 1 MB sein. Um nicht zutreffende Dateien hochzuladen, verwenden Sie den FTP- Zugang. Die Bildermenüleiste Wenn Sie im Editor ein Bild anklicken, wird automatisch die Bildermenüleiste eingeblendet. Hier können Sie die Bildergröße, den Bild-Titel, die Randfarbe sowie die Randbreite einstellen. Die Funktion Glätten berechnet das Bild automatisch auf die eingegebene Bild- Größe. Die Funktion Auto schneidet das Bild so zu, dass es proportional in die vorgegebene Bildgröße passt. Im folgenden Beispiel wurde das Bild mit einer Auflösung von 640x480 Pixel und einer Dateigröße von 95 KB übertragen und in verschiedenen Bildgrößen mehrfach im Editor eingefügt. Bild in Größe 250x188 Pixel, mit Glätten, und Proportionalität, Dateigröße 28 KB Bild in Größe 150x188 Pixel, mit Glätten, und Auto-Zuschnitt, Dateigröße 18 KB Bild in Größe 250x100 Pixel, mit Glätten, und Auto-Zuschnitt, Dateigröße 17 KB 21

22 Ein Bild kann somit an verschiedenen Stellen im Editor in verschiedenen Auflösungen verwendet werden. Die Bilder werden dabei von der bluetronix Software automatisch in Pixelgröße und Auflösung berechnet. Ein vorheriges Zuschneiden der Bilder kann entfallen. Wird das Bild in der Bilderverwaltung ersetzt, so ändern sich automatisch alle Version diese Bildes. Der Bild-Editor Mit dem Bild-Editor können Sie Bilder aus der Bilderverwaltung einfach online ohne jede Zusatz-Software bearbeiten. Bild öffnen, startet die Dateiverwaltung Bild speichern Bild speichern unter, speichert das Bild unter einem anderen Name Auswahlfeld Zoomfaktor Rückgängig, letzte ausgeführte Aktion rückgängig machen Wiederherstellen, letztes Rückgängig widerrufen senkrecht Spiegeln waagerecht Spiegeln Auswahlfeld Kontrast Auswahlfeld Helligkeit Bild beschneiden, auf Auswahlrahmen beschneiden Auswahl löschen Eingabefeld Breite in Pixel Eingabefeld Höhe in Pixel Option Proportionalität beibehalten beim Ändern der Bildabmessungen 22

23 Bild auf Eingabegröße zuschneiden Bild zurücksetzen, auf Anfangszustand zurücksetzen Eingabefeld für Drehen in Grad Drehen im Uhrzeigersinn Drehen gegen den Uhrzeigersinn Umwandeln in Negativ-Bild Umwandeln in Graustufen-Bild Beispiel - Bild online bearbeiten Im folgenden Beispiel wird ein Bild geöffnet, auf einen bestimmten Bildausschnitt zugeschnitten, gespiegelt und nach der Anpassungen von Helligkeit und Kontrast gespeichert. Originalbild Bild nach der Bearbeitung Starten Sie die Bilderverwaltung, markieren Sie ein Bild und klicken Sie auf Bild- Bearbeiten. Zum Zuschneiden des Bildes klicken Sie mit der linken Maustaste auf den Anfangspunkt für den Bildausschnitt. Halten Sie die Maustaste gerückt und ziehen Sie den Rahmen auf den Endpunkt für den Bildausschnitt. Klicken Sie auf das Symbol Bild beschneiden. Für das Spiegeln des Bildes klicken Sie auf den Button waagerecht Spiegeln. In nächsten Schritt wird die Helligkeit und der Kontrast eingestellt. Verwenden Sie dazu die Auswahlfelder und stellen Sie bei Kontrast auf +2 (um 2 Werte erhöhen) und bei Helligkeit auf 1 (um einen Wert verringern). Sofern nicht das gewünschte Ergebnis erzielt wurde klicken Sie auf Rückgängig, um die letzte Aktion rückgängig zu machen. Speichern Sie das Bild mit einem Klick auf Speichern. Dokumentenverwaltung Dokument hochladen Mit Hilfe der Dokumentenverwaltung übertragen Sie Dokumente wie PDF, DOC, XLS, ZIP sowie Media-Dateien wie WAV, MP3, SWF, MOV etc. von Ihrem lokalen PC auf Ihren Webspeicherplatz und fügen diese zum Beispiel im Editor ein. Je nach Format wird das Dokument so eingefügt, dass es generell mit der entsprechenden Anwendung aufgerufen wird. Zum Beispiel wird ein PDF so eingefügt, dass es bei einem Klick auf den Dateinamen im PDF-Programm geöffnet wird. Beim Anklicken einer ZIP-Datei öffnet sich das Download-Fenster (Herunterladen-Fenster). Bei MOV und MP3 öffnet sich der Player zum Abspielen des Films oder des Titels. 23

24 Dokumentenverzeichnis wählen Vorschau im neuen Fenster Dokument löschen Dokument downloaden (runterladen) Hochladen einer PDF-Datei Im folgenden Beispiel soll ein PDF-Dokument hochgeladen und anschließend im Editor eingefügt werden. Starten Sie die Dokumentenverwaltung mit einem Klick auf den Button Dokumentenverwaltung. Klicken Sie auf Durchsuchen, wählen Sie eine Datei von Ihrem PC aus und klicken Sie auf Öffnen und anschließend auf Datei-Hochladen. Um das Dokument einzufügen, markieren Sie dieses mit einem Klick und drücken auf Datei- Einfügen. Schließen Sie die Dokumentenverwaltung und speichern Sie die Seite. Wenn Sie jetzt auf Ihrer Homepage auf den Dateinamen klicken, öffnet sich das PDF automatisch im PDF-Programm. Hochladen einer ZIP-Datei, zum Download bereitstellen Im folgenden Beispiel soll eine ZIP-Datei zum Download bereitgestellt werden. Starten Sie die Dokumentenverwaltung mit einem Klick auf den Button Dokumentenverwaltung. Klicken Sie auf Durchsuchen, wählen Sie die ZIP-Datei von Ihrem PC aus und klicken Sie auf Öffnen und anschließend auf Datei-Hochladen. Um die Datei einzufügen, markieren Sie diese mit einem Klick und drücken auf Datei- Einfügen. Schließen Sie die Dokumentenverwaltung und speichern Sie die Seite. 24

25 Um den Download zu testen, klicken Sie jetzt auf Ihrer Homepage auf den Dateinamen der ZIP-Datei und anschließend im Datei-Speichern Fenster auf Speichern. Eine Dokumenten-Datei muss die Endung tiff, tif, fla, swf, wav, doc, wri, txt, xls, pdf, csv, zip, mpg, mov, mp3 oder ppt besitzen und darf beim Upload in der Dokumentenverwaltung nicht größer als 10 MB sein. Sofern die Datei größer ist, laden Sie diese mit FTP hoch. Siehe dazu Hochladen einer Datei mit FTP. Tabellen - Tabellenmenüleiste Für das Gestalten einer Webseite haben Tabellen eine wichtige Funktionen zum Positionieren von Elementen. Tabelle einfügen Klicken Sie im Editor auf den Button Tabelle einfügen. Um die Tabelle hervorzuheben, treffen Sie die Einstellungen zu Hintergrundfarbe, Randfarbe sowie Randbreite. Geben Sie die Anzahl der Spalten und Zeilen ein und bestätigen Sie mit Einfügen. Wenn Sie im Editor in eine Tabelle bzw. auf den Rand einer Tabelle klicken, wird automatisch die Tabelle-Menüleite eingeblendet. Zeile einfügen - fügt unterhalb der markierten Zeile eine neue Tabellenzeile ein Zeile löschen - entfernt die gewählte Zeile Spalte einfügen - fügt neben der markierten Spalte eine neue Tabellenspalte ein Spalte löschen - entfernt die gewählte Zeile Tabellen-Gesamtbreite - formatiert die Breite der Tabelle in Pixel und in Prozent Tabellen-Gesamthöhe Zellen-Abstand - legt den Abstand zwischen dem Text und dem Rand fest Randbreite Randfarbe - Die Farbe des Tabellenrandes Tabellen-Hintergrundfarbe Zellen-Hintergrundbild - für jedes Feld der Tabelle kann ein Hintergrundbild gesetzt werden Zellen-Hintergrundbild entfernen 25

26 Zellen-Hintergrundfarbe - wie für die gesamte Tabelle kann auch für jedes Tabellenfeld eine Hintergrundfarbe gewählt werden Spalten-Breite der Zelle - formatiert die Breite der Spalte in Pixel und in Prozent Zeilen-Höhe der Zelle werden vertikale Textausrichtung - der Text innerhalb eines Tabellenfeldes kann vertikal ausgerichtet Unsichtbare Tabelle, Tabelle ohne Rand, transparente Tabelle, Bild und Text nebeneinander positionieren Eine Tabelle ohne Rand kann zum Ausrichten und Positionieren von Bildern und Texten verwendet werden. Im folgenden Beispiel sollen zwei Bilder mit jeweils einer Bildbeschreibung nebeneinander positioniert werden. Klicken Sie im Editor auf Tabelle einfügen. Geben Sie bei Anzahl der Spalten eine 2 ein (für 2 Bilder) und bei Anzahl der Zeile eine 1 ein. Da die Tabelle nur zur Positionierung verwendet wird und auf der Homepage nicht sichtbar sein soll, geben Sie bei Rahmenbreite ein 0 ein. Bestätigen Sie mit Einfügen. Die Tabelle wird mit Randbreite 0 im Editor mit gestrichelten Linien dargestellt. Nach dem Speichern der Seite sind diese Linien nicht mehr sichtbar. Klicken Sie im Editor in das linke Tabellenfeld und fügen Sie aus der Bilderverwaltung ein Bild ein. Geben Sie unter dem Bild eine Bildbeschreibung ein. Klicken Sie jetzt in das rechte Tabellenfeld und fügen Sie das 2. Bild ein. Speichern Sie die Seite und kontrollieren Sie das Ergebnis auf Ihrer Homepage. Formulare Das Formular kann von einem Besucher Ihrer Homepage ausgefüllt und an Sie versandt werden. Der Vorteil ist, dass für das Ausfüllen des Formulars der Besucher weder eine - Adresse noch einen -Clienten installiert haben muss. Im Editor können Formulare einfach ohne Programmierkenntnisse erstellt werden. Die bluetronix Software korrigiert automatisch Feldnamen und Formularelemente. Versandte Formulare werden generell im Formular-Archiv Extras -> Formular-Archiv gespeichert. Zusätzlich können die Formulare an eine -Adresse weitergeleitet werden. Auch eine automatische Bestätigung an den Versender kann eingestellt werden. Die Übermittlung des Formulars kann im Textmodus (Feld -> Name: Mustermann) sowie im HTML-Modus (1:1 die ausgefüllte Formularmaske) erfolgen. 26

27 Hier im Beispiel soll das im oberen Bild gezeigte Kontakt-Formular erstellt werden. Zum Ausrichten der Formularfelder wird eine transparente Tabelle mit Randbreite 0 verwendet. Formulare werden im Editor mit einem lila farbigen, gestrichelten Rahmen dargestellt. Besonders bei der Verwendung von mehreren Formularen auf einer Seite muss der Formular- Rahmen beachtet werden. Einfügen einer Auswahl (Select-Feld) Klicken Sie in das linke Tabellenfeld (1. Zeile) und geben Sie die Bezeichnung Anrede ein. Wechseln Sie in das rechte Feld und klicken Sie im Editor auf das Formular Symbol. 27