Wie erstelle ich Internetseiten mit dem Webedition-System ?

  • Published on
    05-Apr-2015

  • View
    106

  • Download
    1

Embed Size (px)

Transcript

<ul><li> Folie 1 </li> <li> Wie erstelle ich Internetseiten mit dem Webedition-System ? </li> <li> Folie 2 </li> <li> Eine allgemeine Einfhrung 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 http://www.bsti.be/bs/05_internes/schwarzes/we_anleitung.pdf http://www.bsti.be/bs/05_internes/schwarzes/we_anleitung.pdf Das ausfhrliche Handbuch des Programms Webedition ist als.pdf-Datei kostenlos erhltlich unter folgender Internetadresse: http://www.webedition.de/download/documentation/de/BenutzerhandbuchStandard.pdf </li> <li> Folie 3 </li> <li> 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... ) </li> <li> Folie 4 </li> <li> bersicht Einleitung: hierhier Leere Seiten erstellen: hierhier Eine Seite bearbeiten: hierhier Das Arbeitsfenster: hierhier Dateien importieren: hierhier Grafiken einfgen/bearbeiten: hierhier Text, Bilder usw verknpfen: hierhier </li> <li> Folie 5 </li> <li> Nachdem der Plan steht, loggt man sich unter www.bsti.be/webedition mit Namen und Passwort ein, worauf sich das Webedition-Fenster ffnet. www.bsti.be/webedition </li> <li> Folie 6 </li> <li> 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 </li> <li> Folie 7 </li> <li> Diese Internetseiten werden nun erst mit "Level"-Nummern und mit einem Titel, der spter 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 </li> <li> Folie 8 </li> <li> Diese Internetseiten werden nun in einem Bearbeitungsfenster nach und nach mit Inhalten gefllt, d.h. vornehmlich mit Text, Tabellen, Bildern, Grafiken. Hier kann man zur Erklrung des Arbeitsfensters springen </li> <li> Folie 9 </li> <li> Zum Fllen mit Bildern oder fr Verweise auf andere Dateien mssen diese zuerst importiert werden. Hier kann man zu den Folien springen, wo der Import von Dateien erklrt wird </li> <li> Folie 10 </li> <li> Wie Bilder oder Grafiken in den Text eingebaut werden, wie man den Text rundherum flieen lsst, wie man die Gre verndert, ist in weiteren Folien zu sehenist in weiteren Folien zu sehen </li> <li> Folie 11 </li> <li> Schlielich werden einzelne Wrter, Bilder, Begriffe, ganze Seiten untereinander und mit der Startseite verknpft, so dass eine vernetzte Information entsteht, die anschaulich, einprgsam und fr jeden nachvollziehbar ist. Sprung zu den Folien ber die Verknpfung von Dateien </li> <li> Folie 12 </li> <li> Wie erstelle ich leere Seiten ? Zurck zur zuletzt angesehenen Folie Zurck zur bersicht </li> <li> Folie 13 </li> <li> 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/ </li> <li> Folie 14 </li> <li> 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 Schaltflche Auswhlen. 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 hngt nach Eingabe des Namens die Endung.html selbst an. Sehr wichtig ist, das korrekte Verzeichnis auszuwhlen, wo die Seite abgespeichert wird. </li> <li> Folie 15 </li> <li> So lange man leere neue Seiten erstellen will, ist es von Vorteil, beim Speichern auch das Kstchen "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 Kstchen kann deaktiviert werden, wenn man die letzte leere Seite abspeichert. </li> <li> Folie 16 </li> <li> links in der bersicht erscheinen dann im angewhlten Ordner die neuen, leeren html-Seiten, mit dem Webedition-Logo Ein Klick auf eine dieser Seiten gengt, um sie zu bearbeiten </li> <li> Folie 17 </li> <li> Wie bearbeite ich eine Seite ? Zurck zur zuletzt angesehenen Folie Zurck zur bersicht </li> <li> Folie 18 </li> <li> Zum Bearbeiten einer Seite klickt man sie erst an in der bersicht links Dann erscheint ein Fenster mit mehreren Registern. Man whlt das Register "Bearbeiten" </li> <li> Folie 19 </li> <li> erscheint ein Fenster, wo erst einmal eine Nummerierung vorgenommen werden muss anschlieend wird ein Titel eingegeben. Die Nummerierung der Levels legt fest, welche Schaltflchen der Navigationsleiste hervorgehoben werden Der eingegebene Titel erscheint spter als berschrift der Seite. </li> <li> Folie 20 </li> <li> Wenn diese Einstellungen vorgenommen worden sind, klicken wir auf die Schaltflche "Indexblock" Dann ffnet sich ein Arbeitsfenster - das eigentliche Bearbeitungsfenster fr die einzelnen Seiten.. </li> <li> Folie 21 </li> <li> Das Arbeitsfenster Zurck zur zuletzt angesehenen Folie Zurck zur bersicht </li> <li> Folie 22 </li> <li> Zum ffnen des Arbeitsfensters klickt man in der Bearbeiten-Ansicht einer Datei auf den Bleistift mit der Bezeichnung Indexblock </li> <li> Folie 23 </li> <li> Nach dem Klick auf Indexblock ffnet sich der eigentliche Arbeitsbereich: Er hnelt einer normalen "Office"- Arbeitsflche und ermglicht viele Arbeitschritte: Text eingeben Text verknpfen (verlinken) Rahmen und Linien eingeben Grafiken einfgen Tabellen einfgen, in die Tabelle Text oder Bilder einfgen... Format und Ausrichtung von Text und Bildern bestimmen Man kann sogar in html-Quelltext schreiben... </li> <li> Folie 24 </li> <li> Sehr wichtig !! Diese Arbeitsflche MUSS nach der Bearbeitung mit der Schaltflche "OK" geschlossen werden, wenn man das Ganze speichern will. Vergisst man das, schliet man mit "Abbrechen" oder mit dem Kreuzchen oben rechts, geht die Arbeit verloren !!! </li> <li> Folie 25 </li> <li> Mit Klick auf die Schaltflche "OK" schliet 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 spter dem Betrachter prsentieren wird </li> <li> Folie 26 </li> <li> Dies ist die Vorschau- Ansicht Wenn man mit dem Ergebnis zufrieden ist, setzt man den Haken neben"Beim Speichern verffentlichen" und klickt anschlieend auf die blaue Schaltflche "Speichern" </li> <li> Folie 27 </li> <li> Dann erscheint nach einigen Sekunden die Mitteilung, dass die Seite erfolgreich gespeichert und verffentlicht wurde. Jetzt kann die Seite online abgerufen werden. </li> <li> Folie 28 </li> <li> Dateien (Bilder, Dokumente ) importieren Zurck zur zuletzt angesehenen Folie Zurck zur bersicht </li> <li> Folie 29 </li> <li> Klick auf Datei - - Import/Export Import </li> <li> Folie 30 </li> <li> Auf weiter klicken </li> <li> Folie 31 </li> <li> Mit Auswhlen das Verzeichnis whlen, wohin die Datei, das Bild soll Auf weiter klicken </li> <li> Folie 32 </li> <li> Dann erscheint eine Java-Anwendung, mit der man Bilder auf der eigenen Festplatte aussuchen kann </li> <li> Folie 33 </li> <li> Auf Dateien hinzufgen klicken </li> <li> Folie 34 </li> <li> Die eigene Festplatte nach Bildern oder Dateien durchsuchen, die man importieren will. Man kann mehrere Dateien gleichzeitig hinzufgen Auf Dateien hinzufgen klicken </li> <li> Folie 35 </li> <li> Auf Hochladen klicken </li> <li> Folie 36 </li> <li> Ein Fortschrittsbalken informiert ber den Fortgang des Importes. Zum Schluss sind alle importierten Dateien mit einem Hkchen versehen </li> <li> Folie 37 </li> <li> Nach Abschluss des Importes informiert eine Meldung ber den Erfolg des Imports </li> <li> Folie 38 </li> <li> Wie bearbeite ich importierte Grafiken ? Zurck zur zuletzt angesehenen Folie Zurck zur bersicht </li> <li> Folie 39 </li> <li> Eine Grafik wird in einen Texte eingefgt, indem man die Schaltflche "Grafik einfgen/bearbeiten" anklickt </li> <li> Folie 40 </li> <li> 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-ErklrungZur Import-Erklrung Mit der Schaltflche Auswhlen navigiert man zu der einzufgenden Grafik </li> <li> Folie 41 </li> <li> Man klickt die ausgewhlte Grafik an und besttigt mit OK </li> <li> Folie 42 </li> <li> Wie die Grafik dargestellt wird: wie gro sie ist, ob der Text um sie herum fliet, ob sie einen Rand hat, wie gro der Abstand zu Text und anderen Elementen ist usw ob sie linksbndig oder rechtsbndig angeordnet ist, wird ber das Grafik bearbeiten- Fenster festgelegt </li> <li> Folie 43 </li> <li> Breite. Breite der Grafik in Pixeln. Hhe. Hhe 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 whrend des Ladevorganges angezeigt (oder falls Bilder im Browser ausgeschaltet sind). Name. Interner Name der Grafik. </li> <li> Folie 44 </li> <li> Hat man unter Ausrichtung left angeklickt, muss man unter CSS style imgr anklicken, damit der Text das Bild rechts umfliet, hat man unter Ausrichtung right angeklickt, muss man unter CSS style imgl anklicken, damit der Text das Bild links umfliet Ausrichtung. man klickt left oder right an, um die Grafik links oder rechts auszurichten. Begleitender Text wird dementsprechend links oder rechts dargestellt </li> <li> Folie 45 </li> <li> Wie verknpfe ich Seiten oder Bilder ? Zurck zur zuletzt angesehenen Folie Zurck zur bersicht </li> <li> Folie 46 </li> <li> Das Verlinken geschieht im Arbeitsfenster: also auf Indexblock klicken </li> <li> Folie 47 </li> <li> Die zu verknpfenden Textteile Oder Bilder einfach markieren Mit linker Maustaste </li> <li> Folie 48 </li> <li> Auf das Kettenglied klicken ( = Symbol fr Verknpfung) </li> <li> Folie 49 </li> <li> Anklicken, ob es ein externer, ein interner oder ein E-Mail-Link sein soll </li> <li> Folie 50 </li> <li> Ein externer Link verweist auf eine Internetseite: also: http://www.xy.be </li> <li> Folie 51 </li> <li> Ein E-Mail-Link verweist auf eine Emailadresse, d.h. testperson@musterseite.com </li> <li> Folie 52 </li> <li> 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 Auswhlen ermittelt </li> <li> Folie 53 </li> <li> Es ffnet sich ein Fenster mit dem man durch die Verzeichnisse navigieren kann, bis man an der gewnschten Seite ankommt </li> <li> Folie 54 </li> <li> Diese klickt man an, sie wird leicht blau unterlegt. anschlieend OK klicken </li> <li> Folie 55 </li> <li> Die verknpften Teile sind nun Blau unterlegt und in der Vorschau anklickbar Nicht vergessen, mit OK abzuschlieen !! </li> <li> Folie 56 </li> <li> Nach Abschluss erscheint die Seite wieder im Bearbeiten-Modus Sie kann nun per Klick auf Speichern gespeichert und verffentlicht werden Nach Abschluss erscheint die Seite wieder im Bearbeiten-Modus </li> <li> Folie 57 </li> <li> 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 geffnet (= _self) _blank: ein neues Browser Fenster wird geffnet _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 </li> </ul>

Recommended

View more >