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

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

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

Voraussetzungen für das Publizieren einer Webseite Grundlagen der Webseitenerstellung Voraussetzungen für das Publizieren einer Webseite 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

Programme zur Webseitengestaltung Grundlagen der Webseitenerstellung Programme zur Webseitengestaltung 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

Tipps zur Webseitengestaltung Grundlagen der Webseitenerstellung Tipps zur Webseitengestaltung - 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

Vorbereitende Überlegungen Grundlagen der Webseitenerstellung Vorbereitende Überlegungen 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

Analyse der Beispiel-Page Grundlagen der Webseitenerstellung Analyse der Beispiel-Page 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

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

Gestaltung der Eingangsseite Grundlagen der Webseitenerstellung Gestaltung der Eingangsseite 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

Erstellen der Hyperlinks Grundlagen der Webseitenerstellung Erstellen der Hyperlinks 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

Erstellen der Hyperlinks (2) Grundlagen der Webseitenerstellung Erstellen der Hyperlinks (2) 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

Erstellen der Hyperlinks Einfügen einer Email-Adresse Grundlagen der Webseitenerstellung Erstellen der Hyperlinks Einfügen einer Email-Adresse 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

Speichern der Eingangsseite Grundlagen der Webseitenerstellung Speichern der Eingangsseite 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

Erstellen der nachgeordneten Seiten Grundlagen der Webseitenerstellung Erstellen der nachgeordneten Seiten 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

Speichern der nachgeordneten Seiten Grundlagen der Webseitenerstellung Speichern der nachgeordneten Seiten 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

Gestalten einer Seite mit externen Links Grundlagen der Webseitenerstellung Gestalten einer Seite mit externen Links 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

Gestalten einer Seite mit externen Links (2) Grundlagen der Webseitenerstellung Gestalten einer Seite mit externen Links (2) 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

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

Gestalten einer Seite mit weiteren Links Grundlagen der Webseitenerstellung Gestalten einer Seite mit weiteren Links 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

Link zu einer Textmarke setzen Grundlagen der Webseitenerstellung Link zu einer Textmarke setzen 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

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

Link zu einer Sound-Datei setzen Grundlagen der Webseitenerstellung Link zu einer Sound-Datei setzen 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

Link zu einem Dokument setzen Grundlagen der Webseitenerstellung Link zu einem Dokument setzen 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

Öffnen Sie im Internet-Explorer die Seite index.htm Ihres Ordner HP! Grundlagen der Webseitenerstellung Homepage testen Ö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

Die Homepage publizieren Grundlagen der Webseitenerstellung Die Homepage publizieren 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

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