You are on page 1of 7

Mit Weebly ganz einfach anspruchsvolle Webseiten gestalten.

Webdesign mit Weebly


Herbstsemester 2011

Lukas Buser und Jarka Arnold

Webdesign mit Weebly

http://www.weebly.com/
1) Der Zugang
Bevor Sie sich einloggen, schauen Sie sich den 2-mintigen Einfhrungsfilm in Weebly an. Anschliessend knnen Sie sich mit Log In in die Umgebung einloggen.

Benutzername: Passwort:

xxx xxx

Erstellen die mit Website hinzufgen eine eigene Unterseite.

Webdesign mit Weebly

Vergeben Sie einen sinnvollen Namen. Whlen Sie bei Art Educational und besttigen Sie mit Weiter.

Whlen Sie nun einen Namen Ihrer Subdomain aus. Es wird automatisch geprft, ob dieser noch verfgbar ist. Besttigen Sie mit Weiter.

Webdesign mit Weebly

2) Erste Schritte
Nachdem Sie mit Klicken auf Bearbeiten die Seite geffnet haben, stehen Ihnen umfangreiche Bearbeitungsmglichkeiten zur Verfgung. Im Hauptmen Elemente unter dem Reiter Einfach knnen mittels DragnDrop (der Mauszeiger verwandelt sich in einen Positionierungspfeil) Elemente ausgewhlt und an der gewnschten Stelle zur gewnschten Seite hinzugefgt werden: Absatz mit Titel, Absatz mit Bild, ein Bild, ein Titel, ein reiner Textabsatz, ein Video, ein Kontaktformular, ein zweispaltiger Absatz oder ein Feld, um direkt HTML-Code einzugeben. Anschliessend kann der Text (oder das Bild, Objekt, Video etc) direkt eingefgt werden, ab der Festplatte geladen oder mittels Internetlink verknpft werden.

Soll ein Objekt wieder gelscht werden, gengt es, On-Mouse-Over oben rechts auf den roten Button mit x zu klicken und das Lschen zu besttigen. Unter dem Reiter Multimedia knnen Elemente zur Animation der Seite eingefgt werden: Eine Fotogalerie, eine Diashow, eine herunterladbare Datei, ein Audioplayer, ein Videoplayer, ein eingebettetes Dokument (zum Beispiel ein Word oder ein Excel), eine Flash-Datei, eine Karte von Google Maps oder auch ein YouTube-Video.

Webdesign mit Weebly

3) Designs
Im Hauptmen Design kann eine von unzhligen Design-Vorlagen ausgewhlt werden.

Wenn die ausgewhlte gefllt, wird diese mit Klick auf Verffentlichen bernommen und bereits im Internet angezeigt. Soll die Vorlage noch angepasst werden, so kann der HTML-Code bzw. die CSS-Vorlage mit Klick auf HTML/CSS bearbeiten an die eigenen Bedrfnisse angepasst werden. Der Code und die Vorschau werden parallel angezeigt, anschliessend werden die Vernderungen mit Save bernommen.

Webdesign mit Weebly

4) Seitenverwaltung
Unter dem Hauptmen Seiten knnen die einzelnen Seiten der Webseite verwaltet werden. Mit Add Page wird eine New Page hinzugefgt, deren Namen anschliessend definiert werden kann. Die einzelnen Seiten knnen mittels DragnDrop verschoben und in verschiedene Unterkategorien verschoben werden. Verschiedene zustzliche Optionen sind whlbar (Seite mit einem Passwort schtzen, die Seite in der Navigation ausblenden oder den Link mit einer externen Webseite verknpfen). Am Schluss klicken Sie Einstellungen speichern, um zur Startseite der Bearbeitung zurckzukehren.

Mit Add Blog kann ein Weblog zur eigenen Seite hinzugefgt werden, welcher alle bekannten Funktionen eines Blogs bietet. Unter den Settings des Blogs (in Manage Blog auf der Seite des Blogs) kann definiert werden, ob Kommentare von allen offen zugelassen sind, oder ob sie zuerst vom Eigentmer genehmigt werden mssen. Zustzlich kann man sich bei jedem erstellten Kommentar eine Mail senden lassen oder Facebook/Twitter-Links zum Teilen der Kommentare bereitstellen.

Webdesign mit Weebly

5) Verffentlichen
Bei der Bearbeitung der Seite kann jeweils oben rechts auf Verffentlichen geklickt werden. Die Seite wird im Netz aktualisiert und ist unter der eingangs gewhlten Internetadresse abrufbar: http://saraaaaah.weebly.com Gleichzeitig kann die Aktualisierung der persnlichen Seite auf dem eigenen Facebook- und/oder TwitterAccount bekannt gemacht werden.

Mit Schliessen (oben rechts auf der Seite) verlsst man den Bearbeitungsmodus der eigenen Seite.