1 / 42

Web-Design

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

farica
Download Presentation

Web-Design

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Web-Design • Themen des ersten Abends • Netzstruktur, wo sind meine Seiten • Grundzüge von HTML • Überschriften • Listen • Bilder • Tabellen • Übungen

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

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

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

  6. Werkzeuge für Web-Seiten • Einfacher Texteditor • Windowsprogramme • Netscape Composer • Microsoft Frontpage • GoLive von Adobe • viele weitere Tools aus dem Internet

  7. Die wichtigsten HTML-BefehleÜberschrift Header • <H1> Überschrift oberste (1.) Ebene</H1> • <H2> Überschrift 2. Ebene</H2> • ... • <H6> Überschrift der 6. Ebene</H6>

  8. Darstellung der Überschriften

  9. Die wichtigsten HTML-BefehleFortlaufender Text Paragraph • <P> Ein Textabschnitt, der mit jeweils passendem Zeilenumbruch dargestellt wird.</P> • <P> Ein weiterer Textabschnitt, der mit jeweils passendem Zeilenumbruch dargestellt wird.</P>

  10. Darstellung fortlaufenden Textes • Zwei Darstellungen desselben Textes

  11. Die wichtigsten HTML-BefehleAufzählungs-Liste List • <UL> • <LI>list item </LI> • <LI>list item </LI> • </UL>

  12. Darstellung von Listen

  13. Die wichtigsten HTML-BefehleBilder / Grafiken image source • <img src =„//pfadangabe/verzeichnis/bild1.jpg“> • <img src=„ . /verzeichnis/grafik2.gif“> • <img src=„poster3.jpg“>

  14. Die wichtigsten HTML-BefehleTabelle table • <table border=1> • <tr> • <th>Überschrift 1. Spalte</th> • <th>Überschrift 2. Spalte</th> • </tr> • <tr> • <td>Text 1. Spalte</td> • <td>Text 2. Spalte</td> • </tr> • </table>

  15. Darstellung einer Tabelle

  16. Die wichtigsten HTML-BefehleDeutsche Umlaute äöüß • DOS und Windows sind sich schon nicht einig über die Darstellung von deutschen Sonderzeichen. In HTML werden Ersatzzeichen wie folgt verwendet: • ä &auml; ö &ouml; ü &uuml; • Ä &Auml; Ö &Ouml; Ü &Uuml; • ß &szlig;

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

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

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

  20. Die wichtigsten HTML-BefehleLinks zu anderen Seiten • Hier kommen Sie zu <a href =„http://www.postbauer-heng.de/bilder/bilder.htm“>Postbauer-Heng</a>

  21. Die wichtigsten HTML-Befehleanklickbare EMail-Adresse • Eine EMail senden an <a href = „mailto:gemeinde@postbauer-heng.de“>gemeinde@postbauer-heng.de</a>

  22. Die wichtigsten HTML-BefehleBild teilen Frames 1 • Frames erleichtern die Navigation durch die Seiten • beispielsweise: • Randspalte mit anklickbaren Menüpunkten • eine Hauptseite mit den aufgerufenen Inhalten

  23. Beispiel für Frames

  24. Die wichtigsten HTML-BefehleBild teilen Frames 2

  25. Die wichtigsten HTML-BefehleBild teilen Frames 3 </head> <frameset cols="20%,*"> <frame src="./menue.htm" name="links"> <frame src="./haupt.htm" name="haupt"> </frameset> <body background="./bilder/hintbild.jpg">

  26. Die wichtigsten HTML-BefehleBild teilen Frames 4 <head> <base target = “haupt“> </head> <body> <a href="./haupt.htm" target="haupt">zur&uuml;ck</a><br> <a href="./seite1.htm" target="haupt">Thema 1</a><br> <a href="./seite2.htm" target="haupt">Thema 2</a><br>

  27. Struktur einer Internetpräsentation • Komplexes Beispiel

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

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

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

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

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

  33. Web-Design Fehlersuche

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

  35. Web-Design Formulare 2 • <form action = "mailto:name@t-online.de"method="post"enctype="text/plain"> • <input type="hidden" name="Formular_Name" value="meine private Homepage"> • <!-- hier folgen die Formularelemente --> • </form> • <form action="http://www.ihr-guter-name.de/cgi-bin/feedback.pl" method="get">

  36. Web-Design Formulare 3 • <inputtype="radio" name="geschlecht" value="Mann">m&auml;nnlich <br> • <input type="radio" name="geschlecht" checked="checked" value=“Frau">weiblich • <select name="wohnort" size="4"> • <option value="Ort1">Postbauer</option> • <option value="Ort2" selected="">Heng</option> • </select>

  37. Web-Design Formulare 4 • <input type="checkbox" name="beruf" value="Arbeiter">Arbeiter • <input type="checkbox" name="beruf" value="Angestellter">Angestellter • <textarea name="kommentar" rows="5" cols="60"wrap="virtual">Ihre Meinung</textarea> • <input type="submit" value="Formular abschicken"> • <input type="reset" value="Eingaben verwerfen">

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

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

  40. Web-Design Verweis-sensitive Grafik 2 • <map name="klickgrafik"> • <area shape="rect" coords="144,177,185,348" href="./nov01.htm" alt="November 2001"> • <area shape="rect" coords="244,261,282,348" href="./dez01.htm" alt="Dezember 2001"> • <img src="balken.jpg" width="640" height="409" border="0" alt="bitte auswaehlen" usemap="#klickgrafik"> • </map>

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

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

More Related