grundlagen der webseiten erstellung n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Grundlagen der Webseiten-Erstellung PowerPoint Presentation
Download Presentation
Grundlagen der Webseiten-Erstellung

Loading in 2 Seconds...

play fullscreen
1 / 27

Grundlagen der Webseiten-Erstellung - PowerPoint PPT Presentation


  • 84 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Grundlagen der Webseiten-Erstellung' - maxim


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
grundlagen der webseiten erstellung
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 erstellung1
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 erstellung2
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
Voraussetzungen für das Publizieren einer Webseite

Grundlagen der Webseitenerstellung

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

Grundlagen der Webseitenerstellung

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

Grundlagen der Webseitenerstellung

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

Grundlagen der Webseitenerstellung

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

Grundlagen der Webseitenerstellung

  • 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
Aufbau der Webseiten am Beispiel www.orchester-hoechstaedt.de

Grundlagen der Webseitenerstellung

17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

gestaltung der eingangsseite
Gestaltung der Eingangsseite

Grundlagen der Webseitenerstellung

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

Grundlagen der Webseitenerstellung

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

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

17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

erstellen der hyperlinks e inf gen einer email adresse
Erstellen der HyperlinksEinfügen einer Email-Adresse

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:
  • info@orchester-hoechstaedt.de

17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

speichern der eingangsseite
Speichern der Eingangsseite

Grundlagen der Webseitenerstellung

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

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

speichern der nachgeordneten seiten
Speichern der nachgeordneten Seiten

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!

17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

gestalten einer seite mit externen links
Gestalten einer Seite mit externen Links

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

17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

gestalten einer seite mit externen links 2
Gestalten einer Seite mit externen Links (2)

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

17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

gestalten einer seite mit externen links 3
Gestalten einer Seite mit externen Links (3)

Grundlagen der Webseitenerstellung

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

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.

17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

link zu einer textmarke setzen
Link zu einer Textmarke setzen

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!

17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

link zu einer textmarke setzen 2
Link zu einer Textmarke setzen (2)

Grundlagen der Webseitenerstellung

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

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.

17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

link zu einem dokument setzen
Link zu einem Dokument setzen

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!

17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

homepage testen
Homepage testen

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!

17.01.2012 Rudi Waschke Hyazinth-Wäckerle-Mittelschule Lauingen

die homepage publizieren
Die Homepage publizieren

Grundlagen der Webseitenerstellung

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