Grundlagen der Webseiten-Erstellung 17.01.2012 Rudi Waschke Hyazinth-W ä ckerle-Mittelschule Lauingen Sie sind hier richtig, wenn Sie einen Ordner anlegen,

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.



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!



www.orchester-hoechstaedt.de

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

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


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


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


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!


Aufbau der Webseiten am Beispiel www.orchester-hoechstaedt.de



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)

Erstellen der Hyperlinks



- Markieren Sie auf der Frontpage das Wort „Eingang“!

- Klicken Sie in der WORD-Befehls-leiste Einfügen Hyperlink

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, ß,…)!

Erstellen der HyperlinksEinfü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:

[email protected]

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)


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 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



- 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



- 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)



- 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)



- Speichern Sie jetzt die Seite unter ovpresse im Ordner HP ab!

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.

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!

Link zu einer Textmarke setzen (2)



- Markieren Sie „Musikalische Arbeit“

- Klicken Sie nun Einfügen Hyperlink Textmarke TextmarkenMA OK

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.

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!

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!

Die Homepage publizieren



Mit einem FTP-Programm nehmen Sie Verbindung mit dem Server auf und überspielen Sie Ihre Homepage.



Vielen Dank für Ihre

Aufmerksamkeit!

Sie können diese Präsentation herunterladen:

www.waschke-hoechstaedt.de

Documents

Grundlagen der Webseiten-Erstellung 17.01.2012 Rudi Waschke Hyazinth-W ä ckerle-Mittelschule Lauingen Sie sind hier richtig, wenn Sie einen Ordner anlegen,