Grundlagen der Webseiten-Erstellung

Präsentation zum Thema: "Grundlagen der Webseiten-Erstellung"—  Präsentation transkript:

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. 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! Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

3 Grundlagen der Webseiten-Erstellung
Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

4 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 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

5 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 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

6 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 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

7 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 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

8 Analyse der Beispiel-Page
Grundlagen der Webseitenerstellung Analyse der Beispiel-Page Doppelklicken Sie den Internet-Explorer auf dem Desktop! Geben Sie in die Adressleiste 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! Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

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

10 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) Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

11 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 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

12 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, ß,…)! Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

13 Erstellen der Hyperlinks Einfügen einer Email-Adresse
Grundlagen der Webseitenerstellung Erstellen der Hyperlinks Einfügen einer -Adresse Markieren Sie das Wort „Kontakt“ Klicken Sie in der WORD-Befehls-leiste Einfügen  Hyperlink  die Schaltfläche -Adres... Geben Sie in das Feld -Adresse ein: Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

14 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) Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

15 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“! Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

16 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! Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

17 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: Adventskonzert im Schloss - Maximieren Sie jetzt den Internet-Explorer und geben Sie in die Adressleiste ein: Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

18 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 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

19 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! Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

20 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. Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

21 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! Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

22 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 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

23 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. Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

24 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! Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

25 Ö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! Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

26 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. Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

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