1 / 12

Multimedia-Fortbildung Schul-Websites gestalten mit „Dreamweaver“

Multimedia-Arbeitskreis Ostalb-Heidenheim - 10. April 2006 – Dr. Bert Gerhardt – Aalen. Multimedia-Fortbildung Schul-Websites gestalten mit „Dreamweaver“. 2/12. Überblick !. Beispiel-Sites: Analyse und Konsequenzen! Design und Funktionalität Aufgaben einer Schulwebsite

cicero
Download Presentation

Multimedia-Fortbildung Schul-Websites gestalten mit „Dreamweaver“

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Multimedia-ArbeitskreisOstalb-Heidenheim - 10. April 2006 – Dr. Bert Gerhardt – Aalen Multimedia-FortbildungSchul-Websites gestalten mit „Dreamweaver“

  2. 2/12 Überblick ! • Beispiel-Sites: Analyse und Konsequenzen! • Design und Funktionalität • Aufgaben einer Schulwebsite • Einfache Siteerstellung • Arbeit mit CSS-Stilen • Framesets, Vorlagen, Tabellen, Ebenen • Multimedia integrieren • Code-Bearbeitung • Feedback „Dreamweaver“ http://schulmusiker.info/telemaks/Dr. Bert Gerhardt - 2006

  3. 2/12 Beispiele ! • http://www.t-online.de/ • http://www.cnn.com/ • http://www.sueddeutsche.de/ • http://www.stern.de/ • http://www.zeit.de/ • http://www.tagesschau.de/ • http://www.amazon.de • http://www.uni-muenchen.de/ • http://www.uni-hamburg.de/ • http://www.s-elly.de/ • http://www.kopernikus-gymnasium.info/ • http://semgyms2.s.schule-bw.de/moodle/course/view.php?id=28 „Dreamweaver“ http://schulmusiker.info/telemaks/Dr. Bert Gerhardt - 2006

  4. 2/12 „What works?“ • Vertikale Navigation • Tabellen-Basis • Rollover-Bilder • „Appetizer“ mit Bild • Abgrenzungen mit Rahmen: Überschrift abgesetzt • Schrift nicht zu groß – ggf. definieren durch CSS • geteilte Dreispaltigkeit • 800 Pixel – mittig oder linksbündig (USA: 1024) „Dreamweaver“ http://schulmusiker.info/telemaks/Dr. Bert Gerhardt - 2006

  5. 2/12 Schulseiten ! • Quelle: http://www.schulweb.de: • http://www.avhs.de.vu/ • http://www.asg.sha.schule-bw.de/ • http://www.gw.schule.ulm.de/ • http://www.karlsruhe.de/Schulen/Lessing-Gymnasium/gross.htm • http://www.werkgymnasium.de • http://www.wirtemberg-gymnasium.de/detection.htm • http://www.zg.s.schule-bw.de/index.htm • http://www.clg-online.de/index.php?file=home.php • Kurze Partnerarbeit: Welche Fehler sollte man vermeiden? (Stichwortliste) „Dreamweaver“ http://schulmusiker.info/telemaks/Dr. Bert Gerhardt - 2006

  6. 2/12 Konsequenzen ! • Browser-Kompatibel • Bildschirm-Kompatibel • Einheitliches Design (Schriften, Farben, Navigation) • Verständliche Navigation • keine „Gimmicks“ – keine „Bewegungen“ – keine Maus-Animationen • kein Multimedia-Schnick-Schnack auf der Startseite • keine Pop-Ups • keine „Eröffnungs-Seiten“ • keine „Baustellen“ • keine ungekennzeichneten PDF-Links – keine Link-“Fallen“ • keine „verpixelten“ Bilder • kein langes Herunterscrollen • keine überlangen Ladezeiten • keine „überlaufenden“ Frames – keine versteckten Navigationsteile unten links • keinen Platz verschwenden „Dreamweaver“ http://schulmusiker.info/telemaks/Dr. Bert Gerhardt - 2006

  7. 2/12 Funktionalität ! • Wichtige Infos schnell erreichbar! • Sitemap! • Aktuelles extra! • Minimum:Fächer – Personen – Projekte – Organisation – Adresse/Mail - Anfahrt! • Keinen Link: „Schule“ (Logik / Hierarchisierung beachten!) • Darstellung der Schule nach Außen! • Identifikation für Schule nach Innen! • Kommunikations-Funktion • Informations-Funktion • Präsentations-Funktion „Dreamweaver“ http://schulmusiker.info/telemaks/Dr. Bert Gerhardt - 2006

  8. 2/12 „Dreamweaver“ – Technik 1 ! • Arbeitsbereich und Ansichten kennenlernen • Site einrichten • Ordnerstruktur vorüberlegen (wichtig bei „Neustart“ oder „Revision“!) • Vorlagen verwenden / definieren • Layout definieren – „Tracing Bild“ nutzen • Geschachtelte Tabellen • Bilder einfügen / Platzhalter nutzen • Navigationsleiste • Rollover-Bilder • Leer-Gifs „Dreamweaver“ http://schulmusiker.info/telemaks/Dr. Bert Gerhardt - 2006

  9. 2/12 „Dreamweaver“ – Technik 2 ! • Einfache Formatierung – (Rechtschreibprüfung) • CSS-Definition • Hyperlinks (relativ/absolut) – mit Siteansicht – E-Mail – „Hotspots“ • Ankerpunkte • automatisches Datum (last update ...) • Site testen • Elementpalette verwenden („Bibliothek“) • Farbdefinitionen • Flash einfügen – Audio/Video – Java-Applets • Bilder schnell bearbeiten intern / mit „Fireworks“ • CSS für Layout, Farben, Tabellen etc. „Dreamweaver“ http://schulmusiker.info/telemaks/Dr. Bert Gerhardt - 2006

  10. 2/12 „Dreamweaver“ – Technik 3 ! • Metatags • Seiten-Namen • Ebenen: Verhalten / Überlappungen / Animationen • Framesets • Verhalten (z.B. Texterstellung, Pop-Ups) • Bewegungen • Drop-Down-Menüs, Formularversand • Formulare, Schaltflächen • vorgegebene „Code-Tags“ • Code: Skripte einfügen • HTML optimieren • Verlaufs-Palette • Task-Schritte automatisieren „Dreamweaver“ http://schulmusiker.info/telemaks/Dr. Bert Gerhardt - 2006

  11. 2/12 „Goodies“ ! • FPT-Pro • „Link-Checker“ • Mail/HTML-Verschlüsselung • http://w3w.de • Mozilla – „Composer“ • .htaccess „Dreamweaver“ http://schulmusiker.info/telemaks/Dr. Bert Gerhardt - 2006

  12. Multimedia-ArbeitskreisOstalb-Heidenheim - 10. April 2006 – Dr. Bert Gerhardt – Aalen Multimedia-FortbildungSchul-Websites gestalten mit „Dreamweaver“

More Related