Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Wie erstelle ich Internetseiten mit dem Webedition-System ?

Kopien: 1
Wie verknüpfe ich Seiten oder Bilder ?. Das Verlinken geschieht im Arbeitsfenster: also auf Indexblock klicken.

Ähnliche Präsentationen


Präsentation zum Thema: "Wie erstelle ich Internetseiten mit dem Webedition-System ?"—  Präsentation transkript:

1 Wie erstelle ich Internetseiten mit dem Webedition-System ?

2 Eine allgemeine Einführung zur Arbeit mit dem CMS-System "Webedition", mit dem unsere Schulhomepage erstellt wird, liegt auf der Schulseite im Format.pdf vor. Man drucke sich bitte diese Anleitung aus und ziehe sie bei den einzelnen Arbeitsschritten zu Rate: Sie ist abrufbar unter Das ausführliche Handbuch des Programms Webedition ist als.pdf-Datei kostenlos erhältlich unter folgender Internetadresse:

3 Wie geht man sinnvoll und effektiv vor ? Man erstelle als erstes einen Plan der Webseiten, die man erstellen will und überlege sich, wie sie am besten sinnvoll aufzubauen und in "mundgerechte Happen " aufzuteilen sind. Das Ergebnis verarbeite man zu einem Organigramm oder Mindmap ( einfach auf einem Blatt Papier oder mit einem Computerprogramm wie z.B. Mindmanager oder ein Office-Programm... )

4 Übersicht Einleitung: hierhier Leere Seiten erstellen: hierhier Eine Seite bearbeiten: hierhier Das Arbeitsfenster: hierhier Dateien importieren: hierhier Grafiken einfügen/bearbeiten: hierhier Text, Bilder usw verknüpfen: hierhier

5 Nachdem der Plan steht, loggt man sich unter mit Namen und Passwort ein, worauf sich das Webedition-Fenster öffnet.

6 Dann erstelle man eine Reihe von leeren Internetseiten, denen man eindeutige Namen gibt und die man in seinem eigenen Ordner abspeichert. z.B. im Ordner "bubi" erstellt man die Seiten "bubiindex", "bubiprodukte", bibumitarbeiter", "bubipreisliste" und so weiter... Hier kann man zum Erstellen von leeren Seiten springen Hier kann man zum Erstellen von leeren Seiten springen

7 Diese Internetseiten werden nun erst mit "Level"-Nummern und mit einem Titel, der später auf der Seite erscheinen soll, versehen. Hier kann man zu den Folien über die Seitenbearbeitung springen Hier kann man zu den Folien über die Seitenbearbeitung springen

8 Diese Internetseiten werden nun in einem Bearbeitungsfenster nach und nach mit Inhalten gefüllt, d.h. vornehmlich mit Text, Tabellen, Bildern, Grafiken. Hier kann man zur Erklärung des Arbeitsfensters springen

9 Zum Füllen mit Bildern oder für Verweise auf andere Dateien müssen diese zuerst importiert werden. Hier kann man zu den Folien springen, wo der Import von Dateien erklärt wird

10 Wie Bilder oder Grafiken in den Text eingebaut werden, wie man den Text rundherum fließen lässt, wie man die Größe verändert, ist in weiteren Folien zu sehenist in weiteren Folien zu sehen

11 Schließlich werden einzelne Wörter, Bilder, Begriffe, ganze Seiten untereinander und mit der Startseite verknüpft, so dass eine vernetzte Information entsteht, die anschaulich, einprägsam und für jeden nachvollziehbar ist. Sprung zu den Folien über die Verknüpfung von Dateien

12 Wie erstelle ich leere Seiten ? Zurück zur zuletzt angesehenen Folie Zurück zur Übersicht

13 Zur Erstellung einer neuen Seite klickt man auf: Datei - Neu - webEdition Seite - Vorlage BSTI. Die Angabe der Vorlage bestimmt das Aussehen der Seite. Mit der Vorlage BSTI wiird die neue Seite eingebettet in das Layout der gesamten bsti.Seite/

14 Es erscheint ein Fenster, wo man in der Rubrik "Pfad" einen Dateinamen (eine Nummer wird vorgegeben) und Speicher-Verzeichnis festlegen muss. Das Verzeichnis, wo die neue Datei liegen soll, wird angesteuert mit der Schaltfläche Auswählen. Der Dateiname sollte eindeutig und internetgerecht sein, d.h.keine Sonderzeichen wie Umlaut, ß, Minuszeichen etc!!), Alles wird aneinander und klein geschrieben: Beispiel: test. Das System hängt nach Eingabe des Namens die Endung.html selbst an. Sehr wichtig ist, das korrekte Verzeichnis auszuwählen, wo die Seite abgespeichert wird.

15 So lange man leere neue Seiten erstellen will, ist es von Vorteil, beim Speichern auch das Kästchen "Nach Speichern neue Seite" zu aktivieren,. Dadurch wird der korrekte Ordner schon vorgegeben und man braucht nur einfach verschiedene Seiten hintereinander zu erstellen und mit Namen zu versehen. Dieses Kästchen kann deaktiviert werden, wenn man die letzte leere Seite abspeichert.

16 links in der Übersicht erscheinen dann im angewählten Ordner die neuen, leeren html-Seiten, mit dem Webedition-Logo Ein Klick auf eine dieser Seiten genügt, um sie zu bearbeiten

17 Wie bearbeite ich eine Seite ? Zurück zur zuletzt angesehenen Folie Zurück zur Übersicht

18 Zum Bearbeiten einer Seite klickt man sie erst an in der Übersicht links Dann erscheint ein Fenster mit mehreren Registern. Man wählt das Register "Bearbeiten"

19 erscheint ein Fenster, wo erst einmal eine Nummerierung vorgenommen werden muss anschließend wird ein Titel eingegeben. Die Nummerierung der Levels legt fest, welche Schaltflächen der Navigationsleiste hervorgehoben werden Der eingegebene Titel erscheint später als Überschrift der Seite.

20 Wenn diese Einstellungen vorgenommen worden sind, klicken wir auf die Schaltfläche "Indexblock" Dann öffnet sich ein Arbeitsfenster - das eigentliche Bearbeitungsfenster für die einzelnen Seiten..

21 Das Arbeitsfenster Zurück zur zuletzt angesehenen Folie Zurück zur Übersicht

22 Zum Öffnen des Arbeitsfensters klickt man in der Bearbeiten-Ansicht einer Datei auf den Bleistift mit der Bezeichnung Indexblock

23 Nach dem Klick auf Indexblock öffnet sich der eigentliche Arbeitsbereich: Er ähnelt einer normalen "Office"- Arbeitsfläche und ermöglicht viele Arbeitschritte: Text eingeben Text verknüpfen (verlinken) Rahmen und Linien eingeben Grafiken einfügen Tabellen einfügen, in die Tabelle Text oder Bilder einfügen... Format und Ausrichtung von Text und Bildern bestimmen Man kann sogar in html-Quelltext schreiben...

24 Sehr wichtig !! Diese Arbeitsfläche MUSS nach der Bearbeitung mit der Schaltfläche "OK" geschlossen werden, wenn man das Ganze speichern will. Vergisst man das, schließt man mit "Abbrechen" oder mit dem Kreuzchen oben rechts, geht die Arbeit verloren !!!

25 Mit Klick auf die Schaltfläche "OK" schließt sich das Bearbeitungsfeld und es erscheint die fertige Seite im Bearbeiten-Modus Wenn man dann auf den Reiter "Vorschau klickt, bekommt man eine Ahnung, wie sich die Seite später dem Betrachter präsentieren wird

26 Dies ist die Vorschau- Ansicht Wenn man mit dem Ergebnis zufrieden ist, setzt man den Haken neben"Beim Speichern veröffentlichen" und klickt anschließend auf die blaue Schaltfläche "Speichern"

27 Dann erscheint nach einigen Sekunden die Mitteilung, dass die Seite erfolgreich gespeichert und veröffentlicht wurde. Jetzt kann die Seite online abgerufen werden.

28 Dateien (Bilder, Dokumente …) importieren Zurück zur zuletzt angesehenen Folie Zurück zur Übersicht

29 Klick auf Datei - - Import/Export – Import

30 Auf weiter klicken

31 Mit Auswählen das Verzeichnis wählen, wohin die Datei, das Bild … soll Auf weiter klicken

32 Dann erscheint eine Java-Anwendung, mit der man Bilder auf der eigenen Festplatte aussuchen kann …

33 Auf Dateien hinzufügen klicken …

34 Die eigene Festplatte nach Bildern oder Dateien durchsuchen, die man importieren will. Man kann mehrere Dateien gleichzeitig hinzufügen Auf « Dateien hinzufügen » klicken

35 Auf « Hochladen » klicken …

36 Ein Fortschrittsbalken informiert über den Fortgang des Importes. Zum Schluss sind alle importierten Dateien mit einem Häkchen versehen

37 Nach Abschluss des Importes informiert eine Meldung über den Erfolg des Imports

38 Wie bearbeite ich importierte Grafiken ? Zurück zur zuletzt angesehenen Folie Zurück zur Übersicht

39 Eine Grafik wird in einen Texte eingefügt, indem man die Schaltfläche "Grafik einfügen/bearbeiten" anklickt

40 Es erscheint ein Fenster, mit dem ich bestimme, woher die Grafik kommt: Externe Grafik: eine Grafik, die nicht in das Webedition-System importiert wurde Interne Grafik: eine Grafik oder ein Bild, das vorher in das Webedition-System importiert wurde. Zur Import-ErklärungZur Import-Erklärung Mit der Schaltfläche Auswählen navigiert man zu der einzufügenden Grafik

41 Man klickt die ausgewählte Grafik an und bestätigt mit OK

42 Wie die Grafik dargestellt wird: wie groß sie ist, ob der Text um sie herum fließt, ob sie einen Rand hat, wie groß der Abstand zu Text und anderen Elementen ist usw ob sie linksbündig oder rechtsbündig angeordnet ist, wird über das Grafik bearbeiten- Fenster festgelegt

43 Breite. Breite der Grafik in Pixeln. Höhe. Höhe der Grafik in Pixeln. Rand. Rand um die Grafik in Pixeln. Horizontaler Abstand. Bestimmt den Abstand der Grafik nach links und rechts zu anderen Elementen. Vertikaler Abstand. Bestimmt den Abstand der Grafik nach oben und unten zu anderen Elementen. Alternativ Text. Dieser Text wird während des Ladevorganges angezeigt (oder falls Bilder im Browser ausgeschaltet sind). Name. Interner Name der Grafik.

44 Hat man unter Ausrichtung left angeklickt, muss man unter CSS style imgr anklicken, damit der Text das Bild rechts umfließt, hat man unter Ausrichtung right angeklickt, muss man unter CSS style imgl anklicken, damit der Text das Bild links umfließt Ausrichtung. man klickt left oder right an, um die Grafik links oder rechts auszurichten. Begleitender Text wird dementsprechend links oder rechts dargestellt

45 Wie verknüpfe ich Seiten oder Bilder ? Zurück zur zuletzt angesehenen Folie Zurück zur Übersicht

46 Das Verlinken geschieht im Arbeitsfenster: also auf Indexblock klicken

47 Die zu verknüpfenden Textteile Oder Bilder einfach markieren Mit linker Maustaste

48 Auf das Kettenglied klicken ( = Symbol für Verknüpfung)

49 Anklicken, ob es ein externer, ein interner oder ein -Link sein soll

50 Ein externer Link verweist auf eine Internetseite: also:

51 Ein -Link verweist auf eine adresse, d.h.

52 Ein interner Link verweist auf eine Seite, die auf unserem Server liegt, also von uns importiert oder erstellt wurde Ihr Standort wird durch Klick auf « Auswählen » ermittelt

53 Es öffnet sich ein Fenster mit dem man durch die Verzeichnisse navigieren kann, bis man an der gewünschten Seite ankommt

54 Diese klickt man an, sie wird leicht blau unterlegt. anschließend OK klicken

55 Die verknüpften Teile sind nun Blau unterlegt und in der Vorschau anklickbar Nicht vergessen, mit OK abzuschließen !!

56 Nach Abschluss erscheint die Seite wieder im Bearbeiten-Modus Sie kann nun per Klick auf « Speichern » gespeichert und veröffentlicht werden Nach Abschluss erscheint die Seite wieder im Bearbeiten-Modus

57 Target: (=Linkziel) Wo soll die verlinkte Seite erscheinen ? Wird festgelegt durch Klick auf das Dreieckssymbol wird das Feld leer gelassen, wird die neue Seite im selben Fenster geöffnet (= _self) _blank: ein neues Browser Fenster wird geöffnet _top: Die Seite wird im gleichen Fenster auf oberster Ebene geladen, auch wenn Sie aus einem Frame heraus aufgerufen wurde. Man sollte nun noch festlegen, wo die verlinkte Seite erscheinen soll


Herunterladen ppt "Wie erstelle ich Internetseiten mit dem Webedition-System ?"

Ähnliche Präsentationen


Google-Anzeigen