WebDesign Wie erstelle ich eine eigene Webseite und
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 3 x 120 Minuten jeweils Freitags ab 29. 11. 2002 ab 19: 00 Uhr
Web-Design b Themen des ersten Abends b Netzstruktur, wo sind meine Seiten b Grundzüge von HTML • • Überschriften Listen Bilder Tabellen b Übungen
Netzstruktur b wo befinden sich die eigenen Seiten? Die erstellten Originalseiten auf dem eigenen PC Kopien auf dem www-Server
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)
Gliederung einer HTML-Seite <HTML> <HEAD> (unsichtbare) Angaben zum Seiteninhalt, Autor usw. </HEAD> <BODY> (sichtbare) Texte, Überschriften, Tabellen, Bilder usw. </BODY> </HTML>
Werkzeuge für Web-Seiten b Einfacher Texteditor b Windowsprogramme • • Netscape Composer Microsoft Frontpage Go. Live von Adobe viele weitere Tools aus dem Internet
Die wichtigsten HTML-Befehle Überschrift Header b <H 1> Überschrift oberste (1. ) Ebene</H 1> b <H 2> Überschrift 2. Ebene</H 2> b. . . b <H 6> Überschrift der 6. Ebene</H 6>
Darstellung der Überschriften
Die wichtigsten HTML-Befehle Fortlaufender Text Paragraph b <P> Ein Textabschnitt, der mit jeweils passendem Zeilenumbruch dargestellt wird. </P> b <P> Ein weiterer Textabschnitt, der mit jeweils passendem Zeilenumbruch dargestellt wird. </P>
Darstellung fortlaufenden Textes b Zwei Darstellungen desselben Textes
Die wichtigsten HTML-Befehle Aufzählungs-Liste List b <UL> b <LI> list item </LI> b </UL>
Darstellung von Listen
Die wichtigsten HTML-Befehle Bilder / Grafiken image source b <img src = „//pfadangabe/verzeichnis/bild 1. jpg“> b <img src = „. /verzeichnis/grafik 2. gif“> b <img src = „poster 3. jpg“>
Die wichtigsten HTML-Befehle Tabelle table b b b b b <table border=1> <tr> <th>Überschrift 1. Spalte</th> <th>Überschrift 2. Spalte</th> </tr> <td>Text 1. Spalte</td> <td>Text 2. Spalte</td> </tr> </table>
Darstellung einer Tabelle
Die wichtigsten HTML-Befehle Deutsche Umlaute äöüß b b DOS und Windows sind sich schon nicht einig über die Darstellung von deutschen Sonderzeichen. In HTML werden Ersatzzeichen wie folgt verwendet: ä ä ö ö ü ü Ä Ä Ö Ö Ü Ü ß ß
Web-Design Erste Übungsaufgabe b b b b Erstellen Sie mittels WORDPAD die Datei UEBUNG. HTM im Verzeichnis c: vhs_kursweb-desnschueler. 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: BILD 1. 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.
Web-Design Zweite Übungsaufgabe b b Ö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.
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
Die wichtigsten HTML-Befehle Links zu anderen Seiten b Hier kommen Sie zu <a href = „http: //www. postbauerheng. de/bilder. htm“>Postbauer-Heng</a>
Die wichtigsten HTML-Befehle anklickbare EMail-Adresse b Eine EMail senden an <a href = „mailto: gemeinde@postbauerheng. de“>gemeinde@postbauer-heng. de</a>
Die wichtigsten HTML-Befehle Bild teilen Frames 1 b b Frames erleichtern die Navigation durch die Seiten beispielsweise: • Randspalte mit anklickbaren Menüpunkten • eine Hauptseite mit den aufgerufenen Inhalten
Beispiel für Frames
Die wichtigsten HTML-Befehle Bild teilen Frames 2
Die wichtigsten HTML-Befehle Bild 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">
Die wichtigsten HTML-Befehle Bild teilen Frames 4 <head> <base target = “haupt“> </head> <body> <a href=". /haupt. htm" target="haupt">zurü ck</a> <a href=". /seite 1. htm" target="haupt">Thema 1</a> <a href=". /seite 2. htm" target="haupt">Thema 2</a>
Struktur einer Internetpräsentation b Komplexes Beispiel
Übung zu Frames b b b 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
Fertige Seiten veröffentlichen 1 b Zugangsdaten für den Server eingeben
Fertige Seiten veröffentlichen 2 b Lokale Datei(en) markieren und zum Server übertragen
Nützliche, kostenlose Hilfsmittel b Besucherzähler: • www. digits. com b Gästebuch: • www. guestbook. de b Diskussionsforen: • de. groups. yahoo. com b Chat-Room: • www. chat 4 free. de b Weitere Hilfsmittel auf der Kurs-CD
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
Web-Design Fehlersuche
Web-Design Formulare 1 b Auswahlknöpfe (Radio) b Auswahllisten b Kästchen ankreuzen b Textfelder ausfüllen b Schaltfläche senden/löschen
Web-Design Formulare 2 b <form action = "mailto: name@t-online. de" method="post" enctype="text/plain"> b <input type="hidden" name="Formular_Name" value="meine private Homepage"> b <!-- hier folgen die Formularelemente --> b </form> b <form action="http: //www. ihr-guter-name. de/cgi- bin/feedback. pl" method="get">
Web-Design Formulare 3 b b b <input type="radio" name="geschlecht" value="Mann">mä nnlich <input type="radio" name="geschlecht" checked="checked" value=“Frau">weiblich <select name="wohnort" size="4"> <option value="Ort 1">Postbauer</option> <option value="Ort 2" selected="">Heng</option> </select>
Web-Design Formulare 4 b b b <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">
Web-Design Formulare 5 b Formular_Name=meine private Homepage b geschlecht=maennlich b wohnort=Ort 2 b beruf=Angestellter b kommentar=Hallo Kursteilnehmer von Web-Design b address=mein. name@t-online. de
Web-Design Verweis-sensitive Grafik 1 b Die Balken sind anklickbar und verzweigen zu Details des jeweiligen Monats
Web-Design Verweis-sensitive Grafik 2 <map name="klickgrafik"> b <area shape="rect" coords="144, 177, 185, 348" href=". /nov 01. htm" alt="November 2001"> b <area shape="rect" coords="244, 261, 282, 348" href=". /dez 01. htm" alt="Dezember 2001"> b <img src="balken. jpg" width="640" height="409" border="0" alt="bitte auswaehlen" usemap="#klickgrafik"> b </map> b
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 verweissensitiv wird. b Verändern Sie die Formularangaben in impress. htm und prüfen Sie die Auswirkungen
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/netlifepostbauer-heng können wir in Verbindung bleiben
- Slides: 42