Inhalte mit DNN Modul HTML bearbeiten

Transkript

1 Einführung Redaktoren Content Management System DotNetNuke Inhalte mit DNN Modul HTML bearbeiten DNN Version ab 5.0 w3studio GmbH T Letzter Ausdruck: Inhalte mit Modul Text/HTML bearbeiten Seiten: 1 von 13

2 Inhaltsverzeichnis 1. EINLEITUNG INHALTE BEARBEITEN Modul HTML öffnen TEXTEINGABE Text aus anderen Windows-Anwendungen EINFÜGEN EINES LINKS Link auf Seite in Ihrem Portal Link zu einer externen Web-Adresse EINFÜGEN EINES BILDES Bild verändern PDF-DOKUMENT EINFÜGEN Letzter Ausdruck: Inhalte mit Modul Text/HTML bearbeiten Seiten: 2 von 13

3 1. Einleitung Dieses Dokument führt Sie in die Grundlagen und Funktionen des DotNetNuke Standard- Modules HTML ein. Es dient als Schulungsunterlage für Redaktoren, die mit dem Opensource CMS DotNetNuke arbeiten, das von w3studio GmbH implementiert wurde. Im täglichen Gebrauch kann dieses Dokument als Nachschlagewerk genutzt werden. In der CMS-Schulung werden weitere Schulungsunterlagen verwendet: Einstieg Content Management System DotNetNuke Seiten, Module und Dateien verwalten Die aktuellen Dokumentversionen können Sie unter anklicken und als PDF-Dokument herunterladen. Letzter Ausdruck: Inhalte mit Modul Text/HTML bearbeiten Seiten: 3 von 13

4 2. Inhalte bearbeiten Mit dem Modul HTML können Sie Inhalte wie Texte, Links und Bilder in der Website einfügen und bearbeiten. 2.1 Modul HTML öffnen Klicken Sie auf bearbeiten, um den Editor zu öffnen und den Text zu bearbeiten. Der Editor ist einem Word-Programm sehr ähnlich (siehe Abbildung 1) Abbildung 1: Inhalt bearbeiten mit dem HTML-Modul Letzter Ausdruck: Inhalte mit Modul Text/HTML bearbeiten Seiten: 4 von 13

5 3. Texteingabe Mit dem Editor können Sie Text, Bilder und Links eingeben. Editor maximieren Mit dem Symbol Editor maximieren Browserfenster. erhalten Sie das Eingabefeld im vollen 1) Absätze und Zeilenumbrüche Absätze trennen Sie, in dem Sie die [Enter]-Taste drücken. Den Text gestalten Sie mit den Formaten für Überschriften und normalen Text, Fettdruck oder wählen die Listen-Formate aus. Die Silbentrennung wird im Internet nicht unterstützt. Neuer Absatz [Enter]-Taste Zeilenumbruch [Shift] + [Enter] Ihre Arbeit speichern Sie, in dem Sie auf speichern klicken, wobei der Bearbeitungsmodus automatisch geschlossen wird. 2) Text formatieren Den Text können Sie mit einfachen Textformaten gestalten wie Fett Kursiv Aufzählungslisten und nummerierte Listen Hinweis: Damit ein einheitliches Erscheinungsbild beibehalten werden kann, sollen die Formatierungsoptionen Schriftgrösse, Farbe und Schriftart nicht verwendet werden. 3) Formate verwenden Verwenden Sie die vorgegebenen Formate: Normal (Absatz ohne Formatierung) Überschrift 1 Überschrift 2 Überschrift 3 Überschrift 4 Diese Formatstile sind in dem Design der Seite definiert. Überschriften strukturieren die Inhalte. Letzter Ausdruck: Inhalte mit Modul Text/HTML bearbeiten Seiten: 5 von 13

6 4) Sonderzeichen einfügen Mit dem Symbol Symbol einfügen können Sie Sonderzeichen in den Text einfügen 3.1 Text aus anderen Windows-Anwendungen Sie können Text aus anderen Windows-Anwendungen, bspw. Word, in den Editor kopieren. Der Text wird dazu nicht direkt in den Editor kopiert, das Einfügen erfolgt über ein zusätzliches Editor-Symbol. Gehen Sie wie folgt vor: 1) Markieren Sie den bestehenden Text z. B. im Word und kopieren Sie diesen in die Zwischenablage. 2) Fügen Sie den Text in den Editor ein. Benutzen Sie dazu das Symbol Inhalte einfügen und wählen Sie Paste Plain Text, siehe Abbildung 2. Der Text wird ohne Formatierungen in den Editor eingefügt. Abbildung 2: "Plain Text" einfügen. Letzter Ausdruck: Inhalte mit Modul Text/HTML bearbeiten Seiten: 6 von 13

7 4. Einfügen eines Links Mit einem Link können Sie auf eine andere Seite innerhalb Ihres Auftritts oder auf eine beliebige Adresse im Internet verweisen. Links werden im Modul HTML eingefügt. Öffnen Sie dazu das Modul HTML wie im Kapitel 2.1 Modul HTML öffnen beschrieben. 4.1 Link auf Seite in Ihrem Portal So fügen Sie einen Link auf eine andere Seite in Ihrem Portal ein: 1) Markieren Sie den Text, der den Link darstellen soll. 2) Klicken Sie auf Hyperlink Manager (Ctrl + K). 3) Das Fenster Hyperlink Manger wird geöffnet. Klicken Sie auf Page und wählen Sie die Seite im Portal aus (siehe Abbildung 3: Fenster Hyperlink Manager). Den Link-Text (Text, der den Link darstellt, siehe Punkt 1) können Sie hier überschreiben. Abbildung 3: Fenster Hyperlink Manager 4) Klicken Sie auf OK. Letzter Ausdruck: Inhalte mit Modul Text/HTML bearbeiten Seiten: 7 von 13

8 4.2 Link zu einer externen Web-Adresse Um einen Link auf eine andere Seite ausserhalb des Webauftritts einzufügen, gehen Sie wie folgt vor: 1) Markieren Sie den Text, der den Link darstellen soll. 2) Klicken Sie auf Hyperlink Manager (Ctrl + K). 3) Das Fenster Hyperlink Manger wird geöffnet. Geben Sie im Feld URL die vollständige URL (Webadresse) inkl. (=Internet-Protokoll), z.b. (siehe Abbildung 4) Abbildung 4: Fenster Hyperlink Manager - externe Web-Adresse 5) Wählen Sie im Feld Ziel Neues Fenster (_blank) aus. So wird der Link in einem neuen Browserfenster geöffnet (Abbildung 4). 6) Klicken Sie auf OK. Letzter Ausdruck: Inhalte mit Modul Text/HTML bearbeiten Seiten: 8 von 13

9 5. Einfügen eines Bildes Bevor Sie ein Bild einfügen, müssen Sie das Bild für das Web optimieren. Einerseits unterstützen die Browser nicht alle Bildformate, andererseits muss die Bildgrösse für eine rasche Ladezeit optimiert sein. Vor allem die Bildformate.gif und.jpg eignen sich für das Web..gif: Das GIF-Format komprimiert Bilder mit bis zu 245 Farben verlustfrei. Ebenso unterstützt das Bildformat Transparenz und Animation..jpg: JPEG wird vor allem für Fotos eingesetzt, da es bis zu 16,7 Millionen Farben unterstützt. Es braucht oft einen Kompromiss zwischen hoher Bildqualität und Bildgrösse. Optimieren Sie die Bildqualität und Bildgrösse die Besucher schätzen akzeptable Ladezeiten. Sie können die Masse (Breite und Höhe) des Bildes mit dem Image Editor bearbeiten. Siehe dazu Bild verändern, Kapitel 5.1 1) Positionieren Sie den Cursor an der Stelle, an der das Bild erscheinen soll, und klicken Sie auf das Symbol Image Manager. Abbildung 5: Image Manager 2) Falls das Bild bereits vorhanden ist, wählen Sie den Ordner aus, in dem das Bild gespeichert ist. Die Schritte 3-5 können Sie überspringen. 3) Wählen Sie den Ordner für die Bilder aus und klicken Sie auf Upload. 4) Klicken Sie auf Auswählen. Sie können auf Ihrem System das gewünschte Bild auswählen. (Abbildung 6) Letzter Ausdruck: Inhalte mit Modul Text/HTML bearbeiten Seiten: 9 von 13

10 Abbildung 6: Bilder für den Upaload auswählen 5) Haben Sie alle Bilder ausgewählt, so klicken Sie auf Upload. 6) Wählen Sie das Bild aus. Passen Sie die Bildeigenschaften an und klicken Sie dazu auf Eigenschaften. Geben Sie den Alt Text (Alternativtext) ein. Abbildung 7: Bildeigenschaften 7) Klicken Sie auf Einfügen. Das ausgewählte Bild wird eingefügt. Letzter Ausdruck: Inhalte mit Modul Text/HTML bearbeiten Seiten: 10 von 13

11 5.1 Bild verändern Mit dem Image Editor können Sie das Bild in der Grösse ändern. Wählen Sie ein Bild aus und klicken Sie auf Image Editor (Abbildung 8). Abbildung 8: Image Editor Letzter Ausdruck: Inhalte mit Modul Text/HTML bearbeiten Seiten: 11 von 13

12 6. PDF-Dokument einfügen Sie können ein herunterladbares Dokument (z. B. ein PDF-Dokument) im Text verlinken. Sie gehen ähnlich vor, wie unter Einfügen eines Links beschrieben ist. Fügen Sie das PDF- Dokument wie folgt ein: 1) Markieren Sie den Text, der den Link darstellen soll. 2) Klicken Sie auf Document Manager. 3) Das Fenster Document Manager wird geöffnet. Wählen Sie den Ordner aus, in dem Sie ihre Bilder speichern möchten. 4) Falls die Datei bereits vorhanden ist, können Sie die Schritte 5-7 überspringen. 5) Klicken Sie auf klicken Sie auf Upload.. Abbildung 9: Document Manager (Dokument einfügen) 6) Klicken Sie auf Auswählen. Sie können auf Ihrem System das gewünschte Dokument auswählen. (Abbildung 10). Sie können hier auch mehrere Dokumente hochladen und wiederholen diesen Schritt mit Auswählen. Letzter Ausdruck: Inhalte mit Modul Text/HTML bearbeiten Seiten: 12 von 13

13 Abbildung 10: Upload Dokument 7) Haben Sie alle Dokumente ausgewählt, so klicken Sie auf Upload. (siehe Abbildung 10) 8) Wählen Sie das Dokument in der Verzeichnisliste aus und vervollständigen Sie die Optionen Link-Text und Ziel (Abbildung 11): Link-Text: Ziel: angezeigter Text, z.b. Anmeldeformular (pdf, 230 kb) Neues Fenster (_blank) Abbildung 11: Link-Eigenschaften des Dokuments 9) Drücken Sie die Schaltfläche Einfügen. Letzter Ausdruck: Inhalte mit Modul Text/HTML bearbeiten Seiten: 13 von 13