Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


Präsentation zum Thema: "Grundlagen der Webseiten-Erstellung 17.01.2012 Rudi Waschke Hyazinth-W ä ckerle-Mittelschule Lauingen Sie sind hier richtig, wenn Sie einen Ordner anlegen,"—  Präsentation transkript:

1

2 Grundlagen der Webseiten-Erstellung 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.

3 Grundlagen der Webseiten-Erstellung 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!

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

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

6 Programme zur Webseitengestaltung 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

7 Tipps zur Webseitengestaltung 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

8 Vorbereitende Ü berlegungen 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

9 Analyse der Beispiel-Page Rudi Waschke Hyazinth-W ä ckerle-Mittelschule Lauingen - 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! Grundlagen der Webseitenerstellung

10 Aufbau der Webseiten am Beispiel Rudi Waschke Hyazinth-W ä ckerle-Mittelschule Lauingen Grundlagen der Webseitenerstellung

11 Gestaltung der Eingangsseite 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)

12 Erstellen der Hyperlinks 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

13 Erstellen der Hyperlinks (2) 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, ß, … )!

14 Erstellen der Hyperlinks E inf ü gen einer -Adresse 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 -Adres... - Geben Sie in das Feld - Adresse ein:

15 Speichern der Eingangsseite 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

16 Erstellen der nachgeordneten Seiten 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 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 Speichern der nachgeordneten Seiten 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!

18 Gestalten einer Seite mit externen Links 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: Adventskonzert im Schloss - Maximieren Sie jetzt den Internet- Explorer und geben Sie in die Adressleiste ein:

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

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

21 Gestalten einer Seite mit weiteren Links 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.

22 Link zu einer Textmarke setzen 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!

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

24 Link zu einer Sound-Datei setzen 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.

25 Link zu einem Dokument setzen 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!

26 Homepage testen 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!

27 Die Homepage publizieren 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.

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


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

Ähnliche Präsentationen


Google-Anzeigen