Grundlagen der Webseiten-Erstellung
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
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.
Grundlagen der Webseiten-Erstellung
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
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!
Grundlagen der Webseiten-Erstellung
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
www.orchester-hoechstaedt.de
Voraussetzungen für das Publizieren einer Webseite
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
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
Grundlagen der Webseitenerstellung
Programme zur Webseitengestaltung
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
- 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
Grundlagen der Webseitenerstellung
Tipps zur Webseitengestaltung
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
- 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
Grundlagen der Webseitenerstellung
Vorbereitende Überlegungen
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
- 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
Grundlagen der Webseitenerstellung
Analyse der Beispiel-Page
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
- 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!
Grundlagen der Webseitenerstellung
Aufbau der Webseiten am Beispiel www.orchester-hoechstaedt.de
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
Grundlagen der Webseitenerstellung
Gestaltung der Eingangsseite
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
- 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“
Grundlagen der Webseitenerstellung
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)
Erstellen der Hyperlinks
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
Grundlagen der Webseitenerstellung
- Markieren Sie auf der Frontpage das Wort „Eingang“!
- Klicken Sie in der WORD-Befehls-leiste Einfügen Hyperlink
Erstellen der Hyperlinks (2)
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
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, ß,…)!
Erstellen der HyperlinksEinfügen einer Email-Adresse
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
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:
Speichern der Eingangsseite
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
- Speichern Sie die fertige Eingangs-seite wie folgt:
Datei Speichern unter… Server T: Schüler Lehrer HP
- Dateiname: index
- Dateityp: Webseite (*.htm; *.html)
Grundlagen der Webseitenerstellung
Erstellen der nachgeordneten Seiten
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
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 BildGrafik formatierenLayout: Rechteck, Links Weitere Textum-bruch Rechteck, Nur rechts
- Speichern Sie die Seite im Ordner HP! Achten Sie auf den Dateityp „Webseite“!
Speichern der nachgeordneten Seiten
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
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!
Gestalten einer Seite mit externen Links
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
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
Gestalten einer Seite mit externen Links (2)
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
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
Gestalten einer Seite mit externen Links (3)
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
Grundlagen der Webseitenerstellung
- Speichern Sie jetzt die Seite unter ovpresse im Ordner HP ab!
Gestalten einer Seite mit weiteren Links
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
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.
Link zu einer Textmarke setzen
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
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!
Link zu einer Textmarke setzen (2)
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
Grundlagen der Webseitenerstellung
- Markieren Sie „Musikalische Arbeit“
- Klicken Sie nun Einfügen Hyperlink Textmarke TextmarkenMA OK
Link zu einer Sound-Datei setzen
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
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.
Link zu einem Dokument setzen
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
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!
Homepage testen
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
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!
Die Homepage publizieren
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
Grundlagen der Webseitenerstellung
Mit einem FTP-Programm nehmen Sie Verbindung mit dem Server auf und überspielen Sie Ihre Homepage.
Grundlagen der Webseiten-Erstellung
17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen
Vielen Dank für Ihre
Aufmerksamkeit!
Sie können diese Präsentation herunterladen:
www.waschke-hoechstaedt.de