Web-Design Wie erstelle ich eine eigene Webseite und bringe sie ins weltweite Internet Ein Kurs der Agenda 21 von Postbauer-Heng in Zusammenarbeit mit.

Präsentation zum Thema: "Web-Design Wie erstelle ich eine eigene Webseite und bringe sie ins weltweite Internet Ein Kurs der Agenda 21 von Postbauer-Heng in Zusammenarbeit mit."—  Präsentation transkript:

1 Web-Design Wie erstelle ich eine eigene Webseite und bringe sie ins weltweite Internet Ein Kurs der Agenda 21 von Postbauer-Heng in Zusammenarbeit mit der VHS Neumarkt Hr. Streichert Hr. Gesellchen 3x 120 Minuten jeweils Freitags ab 29.11.2002 ab 19:00 Uhr

2 Web-Design b Themen des ersten Abends b Netzstruktur, wo sind meine Seiten b Grundzüge von HTML ÜberschriftenÜberschriften ListenListen BilderBilder TabellenTabellen b Übungen

3 Netzstruktur b wo befinden sich die eigenen Seiten? Die erstellten Original- seiten auf dem eigenen PC Kopien auf dem www-Server

4 Grundzüge von HTML b Hyper Text Markup Language b enthält Text und Strukturangaben b enthält Verweise auf Bilder b enthält Verweise auf andere Seiten (Links)

5 Gliederung einer HTML-Seite (unsichtbare) Angaben zum Seiteninhalt, Autor usw. (sichtbare) Texte, Überschriften, Tabellen, Bilder usw.

6 Werkzeuge für Web-Seiten b Einfacher Texteditor b Windowsprogramme Netscape ComposerNetscape Composer Microsoft FrontpageMicrosoft Frontpage GoLive von AdobeGoLive von Adobe viele weitere Tools aus dem Internetviele weitere Tools aus dem Internet

7 Die wichtigsten HTML-Befehle Überschrift Header b Überschrift oberste (1.) Ebene b Überschrift oberste (1.) Ebene b Überschrift 2. Ebene b Überschrift 2. Ebene b... b Überschrift der 6. Ebene b Überschrift der 6. Ebene

8 Darstellung der Überschriften

9 Die wichtigsten HTML-Befehle Fortlaufender Text Paragraph b Ein Textabschnitt, der mit jeweils passendem Zeilenumbruch dargestellt wird. b Ein Textabschnitt, der mit jeweils passendem Zeilenumbruch dargestellt wird. b Ein weiterer Textabschnitt, der mit jeweils passendem Zeilenumbruch dargestellt wird. b Ein weiterer Textabschnitt, der mit jeweils passendem Zeilenumbruch dargestellt wird.

10 Darstellung fortlaufenden Textes b Zwei Darstellungen desselben Textes

11 Die wichtigsten HTML-Befehle Aufzählungs-Liste List b b b list item b list item b b

12 Darstellung von Listen

13 Die wichtigsten HTML-Befehle Bilder / Grafiken image source b b

14 Die wichtigsten HTML-Befehle Tabelle table b b b Überschrift 1. Spalte b Überschrift 1. Spalte b Überschrift 2. Spalte b Überschrift 2. Spalte b b b Text 1. Spalte b Text 1. Spalte b Text 2. Spalte b Text 2. Spalte b b

15 Darstellung einer Tabelle

16 Die wichtigsten HTML-Befehle Deutsche Umlaute äöüß b DOS und Windows sind sich schon nicht einig über die Darstellung von deutschen Sonderzeichen. In HTML werden Ersatzzeichen wie folgt verwendet: b ää ööüü b ÄÄÖÖÜÜ b ßß

17 Web-Design Erste Übungsaufgabe b Erstellen Sie mittels WORDPAD die Datei UEBUNG.HTM im Verzeichnis c:\vhs_kurs\web-desn\schueler\. b Der Titel soll lauten: „Meine erste HTML-Seite“ b Die Hauptüberschrift soll ebenso heißen b Die zweite Überschrift lautet: „Meine Hobbys“ b Erstellen Sie eine Liste mit Ihren Hobbys (mindestens 2) b Fügen Sie ein Bild ein. Verwenden Sie die Datei: BILD1.JPG aus dem Unterverzeichnis.\bilder b Wenn noch Zeit bleibt, fügen Sie eine Tabelle mit beliebigen Textinhalten an. b Speichern Sie die Datei und öffnen Sie diese mit einem Browser.

18 Web-Design Zweite Übungsaufgabe b Öffnen Sie das Programm Netscape b Öffnen Sie darin das Programm Composer b Erstellen Sie die Seite der vorigen Übung mit dem Composer b Speichern Sie die Seite und betrachten Sie sie mit dem Browser.

19 Web-Design b Themen des zweiten Abends b Links zu anderen Seiten b Links zum EMail-Versand b Frames b Struktur einer Internetpräsentation b Übung b Fertige Seiten veröffentlichen b kostenlose Hilfsmittel

20 Die wichtigsten HTML-Befehle Links zu anderen Seiten b Hier kommen Sie zu Postbauer-Heng b Hier kommen Sie zu Postbauer-Heng

21 Die wichtigsten HTML-Befehle anklickbare EMail-Adresse b Eine EMail senden an gemeinde@postbauer-heng.de b Eine EMail senden an gemeinde@postbauer-heng.de

22 Die wichtigsten HTML-Befehle Bild teilen Frames 1 b Frames erleichtern die Navigation durch die Seiten b beispielsweise: Randspalte mit anklickbaren Menüpunkten Randspalte mit anklickbaren Menüpunkten eine Hauptseite mit den aufgerufenen Inhalteneine Hauptseite mit den aufgerufenen Inhalten

23 Beispiel für Frames

24 Die wichtigsten HTML-Befehle Bild teilen Frames 2

25 Die wichtigsten HTML-Befehle Bild teilen Frames 3

26 Die wichtigsten HTML-Befehle Bild teilen Frames 4 zurück Thema 1 Thema 2

27 Struktur einer Internetpräsentation b Komplexes Beispiel

28 Übung zu Frames b Die Dateien index.htm, menue.htm und haupt.htm sind vorbereitet. b Starten Sie die Datei index.htm mit dem Browser b probieren Sie die Verknüpfungen aus b Ändern Sie in index.htm die Angabe cols durch rows und probieren Sie die Seite mit dem Browser aus b Ändern Sie in menue.htm die Angabe target=„haupt“ durch target=„links“ oder target=„new“. b Probieren Sie wieder das Ergebnis mit dem Browser

29 Fertige Seiten veröffentlichen 1 b Zugangsdaten für den Server eingeben

30 Fertige Seiten veröffentlichen 2 b Lokale Datei(en) markieren und zum Server übertragen

31 Nützliche, kostenlose Hilfsmittel b Besucherzähler: www.digits.comwww.digits.com b Gästebuch: www.guestbook.dewww.guestbook.de b Diskussionsforen: de.groups.yahoo.comde.groups.yahoo.com b Chat-Room: www.chat4free.dewww.chat4free.de b Weitere Hilfsmittel auf der Kurs-CD

32 Web-Design b Themen des dritten Abends b Bedienung des Netscape Composers b Formulare b Verweis-sensitive Grafik b Meta-Tags b Cascading Style-Sheets b Ihren Auftritt bekannt machen b Übungen

33 Web-Design Fehlersuche

34 Web-Design Formulare 1 b Auswahlknöpfe (Radio) b Auswahllisten b Kästchen ankreuzen b Textfelder ausfüllen b Schaltfläche senden/löschen

35 Web-Design Formulare 2 b b

36 Web-Design Formulare 3 b männlich b männlich b weiblich b b b Postbauer b Postbauer b Heng b Heng b b

37 Web-Design Formulare 4 b Arbeiter b Angestellter b Ihre Meinung b Ihre Meinung b b

38 Web-Design Formulare 5 b Formular_Name=meine private Homepage b geschlecht=maennlich b wohnort=Ort2 b beruf=Angestellter b kommentar=Hallo Kursteilnehmer von Web-Design b address=mein.name@t-online.de

39 Web-Design Verweis-sensitive Grafik 1 b Die Balken sind anklickbar und verzweigen zu Details des jeweiligen Monats

40 Web-Design Verweis-sensitive Grafik 2 b b

41 Web-Design Übungsaufgabe in abend_3 b Ergänzen Sie in menue.htm die Koordinaten für die beiden fehlenden Schaltflächen aus raster.txt b Ergänzen Sie in aktuell.htm den Verweis auf die Grafik balken.jpg, so dass diese verweis- sensitiv wird. b Verändern Sie die Formularangaben in impress.htm und prüfen Sie die Auswirkungen

42 Web-Design künftige Kontaktmöglichkeit b Wir können uns regelmäßig im Computer- Treff im Bahnhof treffen und unsere Erfahrungen austauschen b unter der news-Group: de.groups.yahoo.com/group/netlife- postbauer-heng können wir in Verbindung bleiben