Grundlagen der Webseiten-Erstellung

1. Grundlagen der Webseiten-Erstellung Sie sind hier richtig, wenn • Sie einen Ordner anlegen, Dateien darin abspeichern und daraus entnehmen können • Sie mit einem Textverarbei- tungsprogramm wie WORD einigermaßen vertraut sind, d.h. • Texte schreiben, markieren, kopieren und einfügen können. • Bilder einfügen, positionieren und ihre Größe verändern können. 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

2. Grundlagen der Webseiten-Erstellung Falls Sie das nicht können, lade ich Sie herzlichst zu einem Kaffee ins Lehrerzimmer ein oder Sie suchen sich bitte eine/n kompetenten Partner/in! 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

3. Grundlagen der Webseiten-Erstellung www.orchester-hoechstaedt.de 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

4. Voraussetzungen für das Publizieren einer Webseite Grundlagen der Webseitenerstellung • Sollten Sie Ihre Webseite nicht (nur) im schul- oder firmeneigenen Netz-werk (Intranet) nutzen, brauchen Sie • einen Provider (T-Online, 1und1, Freenet, Bürgernetz Dillingen), der Ihnen • * Speicherplatz zur Verfügung stellt • * und eine Domain, d.h. einen Namen für Ihre Seite, zuweist (eig. DENIC/INTERNIC) • ein FTP-Programm, das Ihre Dateien auf den Server überträgt 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

5. Programme zur Webseitengestaltung Grundlagen der Webseitenerstellung • FrontPage im MS Office-Paket seit 2007 von Expression Web ersetzt • MAGIX Website Maker (Freeware) • Joomla, 1und1-Baukasten, homepage-baukasten.de, Netobjects Fusion, … • - Microsoft Word 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

6. Tipps zur Webseitengestaltung Grundlagen der Webseitenerstellung • - Nur Standard-Schriftarten verwenden, die auf allen Computern vorhanden sind (z.B. Times New Roman, Arial, Verdana, Helvetica und Courier New) • nicht mehr als zwei verschiedene Schriftarten pro Dokument • ausgewogenes Verhältnis zwischen Text und Bildern • - gute Farb-Harmonie und Lesbarkeit zwischen Text und Hintergrund 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

7. Vorbereitende Überlegungen Grundlagen der Webseitenerstellung • Welchem Zweck dient mein Internet-auftritt? (privat, geschäftlich, informativ, nachrichtlich,…) • Wie lautet der Titel meiner Home(Front)page (Start-/Indexseite)? • Welche Inhalte möchte ich darstellen? • Was brauche ich dafür? (Texte, Bilder, Sounds, Videos,…) • Wie beschaffe ich das Material? (Texte selber schreiben, kopieren, Bilder/Sounds/Videos von Kameras/ CD/aus dem Internet 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

8. Analyse der Beispiel-Page Grundlagen der Webseitenerstellung • Doppelklicken Sie den Internet-Explorer auf dem Desktop! • Geben Sie in die Adressleiste • www.orchester-hoechstaedt.de • ein! • Suchen Sie Verknüpfungen zu Dateien (Webseiten, Textdokumente, Sounddateien, …) und rufen Sie diese auf! • Stellen Sie Gemeinsamkeiten der verknüpften Webseiten fest! • - Minimieren Sie den Internet-Explorer! 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

9. Aufbau der Webseiten am Beispiel www.orchester-hoechstaedt.de Grundlagen der Webseitenerstellung 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

10. Gestaltung der Eingangsseite Grundlagen der Webseitenerstellung • Legen Sie sich immer einen eigenen Ordner für Ihre Webseiten an (z.B. „HP“)! • LG: Arbeitsplatz Server T: Schüler Lehrer HP • Minimieren Sie den Ordner „HP“ Rufen Sie WORD auf! Gestalten Sie die Eingangsseite der Orchestervereinigung Höchstädt nach der Vorlage! (Bild = geige.jpg, Schriftstil/-grad, Layout, Hintergrund nach eigenem Geschmack) 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

11. Erstellen der Hyperlinks Grundlagen der Webseitenerstellung • Markieren Sie auf der Frontpage das Wort „Eingang“! • - Klicken Sie in der WORD-Befehls-leiste Einfügen  Hyperlink 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

12. Erstellen der Hyperlinks (2) Grundlagen der Webseitenerstellung • Geben Sie bei Dateityp oder Webseite ein: index.htm • Gehen Sie nun bei folgenden Menü-punkten der Frontpage analog vor: • Markieren  Dateityp • Wir über uns  ovwir.htm Geschichte  ovgeschichte.htm Termine  ovtermine.htm Presse  ovpresse.htm Impressum  ovimpressum.htm • Achten Sie immer auf die exakte Schreibweise (Groß- und Klein-schreibung, Leerzeichen,…). Keine Sonderzeichen (Umlaute, ß,…)! 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

13. Erstellen der HyperlinksEinfügen einer Email-Adresse Grundlagen der Webseitenerstellung • Markieren Sie das Wort „Kontakt“ • Klicken Sie in der WORD-Befehls-leiste Einfügen  Hyperlink  die Schaltfläche E-Mail-Adres... • Geben Sie in das Feld E-Mail-Adresse ein: • info@orchester-hoechstaedt.de 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

14. Speichern der Eingangsseite Grundlagen der Webseitenerstellung • Speichern Sie die fertige Eingangs-seite wie folgt: • Datei  Speichern unter… Server T:  Schüler Lehrer HP • Dateiname:index • Dateityp: Webseite (*.htm; *.html) 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

15. Erstellen der nachgeordneten Seiten Grundlagen der Webseitenerstellung • Löschen Sie das Bild auf der Frontpage, indem Sie es anklicken und die Entf-Taste drücken! • Gestalten Sie die Webseite „Geschichte“: Kopieren Sie Überschrift und Text aus der Internetseite und fügen Sie das Bild „ovalt.jpeg“ aus Ihrem Ordner HP ein! • Bildposition: Doppelklick aufs BildGrafik formatierenLayout: Rechteck, Links Weitere Textum-bruch Rechteck, Nur rechts • - Speichern Sie die Seite im Ordner HP! Achten Sie auf den Dateityp „Webseite“! 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

16. Speichern der nachgeordneten Seiten Grundlagen der Webseitenerstellung • Speichern Sie die Seite im Ordner HP unter ovgeschichte! Achten Sie auf den Dateityp „Webseite“! • Behalten Sie Überschrift und Menüleiste bei, indem Sie die Inhalte darunter löschen! • Gestalten Sie auf ähnliche Weise die Seiten „Termine“ und „Impressum“ und speichern Sie sie unter ovtermine und ovimpressum im Ordner HP ab! • Achten Sie darauf, dass immer der Dateityp Webseite (*.htm; *.html) im Speichern unter - Menü ausgewählt ist! 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

17. Gestalten einer Seite mit externen Links Grundlagen der Webseitenerstellung • Löschen Sie nun wieder die Inhalte unter der Überschrift und dem Menü! • - Überschreiben Sie mit Presse und • Artikel aus den Regionalausgaben der Augsburger Allgemeinen • Tippen Sie ein: • 23.11.2011 Adventskonzert im Schloss • - Maximieren Sie jetzt den Internet-Explorer und geben Sie in die Adressleiste ein: www.augsburger-allgemeine.de 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

18. Gestalten einer Seite mit externen Links (2) Grundlagen der Webseitenerstellung • Geben Sie in die Suchleiste der AA Orchestervereinigung Höchstädt ein! • Klicken Sie den Artikel Adventskonzert im Schloss an! • Markieren Sie den Inhalt der Adressleiste des IE durch Anklicken und kopieren Sie ihn mit Strg+C! • Kehren Sie zur WORD-Seite zurück und markieren Sie den Eintrag - Klicken Sie nun Einfügen Hyperlink  Strg+V 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

19. Gestalten einer Seite mit externen Links (3) Grundlagen der Webseitenerstellung - Speichern Sie jetzt die Seite unter ovpresse im Ordner HP ab! 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

20. Gestalten einer Seite mit weiteren Links Grundlagen der Webseitenerstellung • Löschen Sie nun wieder die Inhalte unter der Überschrift und dem Menü! • Schreiben (nicht kopieren!) Sie untereinander: • Musikalische Arbeit • Hörprobe • Programm • Fügen Sie darunter das Bild ov2009.jpg ein und schreiben Sie daneben: • Die Orchestervereinigung Höchstädt ist ein Laienorchester. 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

21. Link zu einer Textmarke setzen Grundlagen der Webseitenerstellung • Setzen Sie den Cursor vor das erste Wort „Das …“! • Klicken Sie Einfügen Textmarke und tragen Sie als Name der Textmarke MA ein. Bestätigen Sie mit Hinzufügen! 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

22. Link zu einer Textmarke setzen (2) Grundlagen der Webseitenerstellung • Markieren Sie „Musikalische Arbeit“ • Klicken Sie nun Einfügen Hyperlink Textmarke  TextmarkenMA OK 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

23. Link zu einer Sound-Datei setzen Grundlagen der Webseitenerstellung • Markieren Sie „Hörprobe“! • Klicken Sie nun Einfügen Hyperlink und geben Sie als Dateityp Telemann Oboe 1.mp3 ein! • Alternativ können Sie den Datei-namen auch mit Durchsuchen: Datei und Doppelklick auf • Telemann Oboe 1.mp3 • aus Ihrem Ordner HP einfügen. 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

24. Link zu einem Dokument setzen Grundlagen der Webseitenerstellung • Markieren Sie „Programm“! • Klicken Sie nun Einfügen Hyperlink und geben Sie als Dateityp • programm.pdf ein! • Alternativ können Sie den Datei-namen auch mit Durchsuchen: Datei und Doppelklick auf • programm.pdf • aus Ihrem Ordner HP einfügen. • - Speichern Sie jetzt die Seite unter ovwir im Ordner HP! 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

25. Homepage testen Grundlagen der Webseitenerstellung • Öffnen Sie im Internet-Explorer die Seite index.htm Ihres Ordner HP! • Datei  Öffnen  Server T:  Schüler Lehrer HP index.htm • Kontrollieren Sie, ob alle Inhalte (Texte und Bilder) vollständig übernommen wurden! • Prüfen Sie die Funktion aller Links (blaue,unterstrichene Begriffe) in allen Webseiten! Freuen Sie sich, wenn`s klappt! Wenn nicht, trinken Sie erst mal einen Kaffee! 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

26. Die Homepage publizieren Grundlagen der Webseitenerstellung Mit einem FTP-Programm nehmen Sie Verbindung mit dem Server auf und überspielen Sie Ihre Homepage. 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

27. Grundlagen der Webseiten-Erstellung Sie können diese Präsentation herunterladen: www.waschke-hoechstaedt.de Vielen Dank für Ihre Aufmerksamkeit! 17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen