Web-Design Wie erstelle ich eine eigene Webseite und bringe sie ins weltweite Internet Ein Kurs der...

Web-DesignWeb-DesignWie erstelle ich eine eigene Wie erstelle ich eine eigene Webseite und bringe sie ins Webseite und bringe sie ins weltweite Internetweltweite Internet

Ein Kurs der Agenda 21 von Postbauer-Hengin Zusammenarbeit mit der VHS Neumarkt

Hr. StreichertHr. Gesellchen

3x 120 Minutenjeweils Freitagsab 29.11.2002ab 19:00 Uhr

Web-DesignWeb-Design Themen des ersten AbendsThemen des ersten Abends Netzstruktur, wo sind meine SeitenNetzstruktur, wo sind meine Seiten Grundzüge von HTMLGrundzüge von HTML

• ÜberschriftenÜberschriften• ListenListen• BilderBilder• TabellenTabellen

ÜbungenÜbungen

NetzstrukturNetzstruktur wo befinden sich die eigenen wo befinden sich die eigenen

Seiten?Seiten? Die erstellten Original-seiten auf dem eigenen PC

Kopien auf demwww-Server

Grundzüge von HTMLGrundzüge von HTML

Hyper Text Markup LanguageHyper Text Markup Language enthält Text und Strukturangabenenthält Text und Strukturangaben enthält Verweise auf Bilderenthält Verweise auf Bilder enthält Verweise auf andere Seiten enthält Verweise auf andere Seiten

(Links)(Links)

Gliederung einer HTML-Gliederung einer HTML-SeiteSeite

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

Werkzeuge für Web-SeitenWerkzeuge für Web-Seiten

Einfacher TexteditorEinfacher Texteditor WindowsprogrammeWindowsprogramme

• Netscape ComposerNetscape Composer• Microsoft FrontpageMicrosoft Frontpage• GoLive von AdobeGoLive von Adobe• viele weitere Tools aus dem Internetviele weitere Tools aus dem Internet

Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleÜberschrift Überschrift HeaderHeader

<H1><H1> Überschrift oberste (1.) Überschrift oberste (1.) EbeneEbene</H1></H1>

<H2><H2> Überschrift 2. Ebene Überschrift 2. Ebene</H2></H2> ...... <H6><H6> Überschrift der 6. Überschrift der 6.

EbeneEbene</H6></H6>

Darstellung der Darstellung der ÜberschriftenÜberschriften

Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleFortlaufender Text Fortlaufender Text ParagraphParagraph

<P><P> Ein Textabschnitt, der mit Ein Textabschnitt, der mit jeweils passendem Zeilenumbruch jeweils passendem Zeilenumbruch dargestellt wirddargestellt wird.</P>.</P>

<P><P> Ein weiterer Textabschnitt, Ein weiterer Textabschnitt, der mit jeweils passendem der mit jeweils passendem Zeilenumbruch dargestellt Zeilenumbruch dargestellt wirdwird.</P>.</P>

Darstellung fortlaufenden Darstellung fortlaufenden TextesTextes Zwei Darstellungen desselben Zwei Darstellungen desselben

TextesTextes

Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleAufzählungs-Liste Aufzählungs-Liste ListList

<UL><UL> <LI><LI> list item list item </LI></LI> <LI><LI> list item list item </LI></LI> </UL></UL>

Darstellung von ListenDarstellung von Listen

Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleBilder / Grafiken Bilder / Grafiken image image sourcesource

<img src =<img src = „„////pfadangabe/verzeichnis/bild1.jpgpfadangabe/verzeichnis/bild1.jpg““>>

<img src<img src == „ „ . /. /verzeichnis/grafik2.gifverzeichnis/grafik2.gif““>> <img src<img src == „„poster3.jpgposter3.jpg““>>

Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleTabelle Tabelle tabletable <table border=1><table border=1> <tr><tr> <th><th>Überschrift 1. SpalteÜberschrift 1. Spalte</th></th> <th><th>Überschrift 2. SpalteÜberschrift 2. Spalte</th></th> </tr></tr> <tr><tr> <td><td>Text 1. SpalteText 1. Spalte</td></td> <td><td>Text 2. SpalteText 2. Spalte</td></td> </tr></tr> </table></table>

Darstellung einer TabelleDarstellung einer Tabelle

Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleDeutsche Umlaute äöüßDeutsche Umlaute äöüß

DOS und Windows sind sich schon nicht einig DOS und Windows sind sich schon nicht einig über die Darstellung von deutschen über die Darstellung von deutschen Sonderzeichen. In HTML werden Ersatzzeichen Sonderzeichen. In HTML werden Ersatzzeichen wie folgt verwendet:wie folgt verwendet:

ää ä ä öö öö üü üü ÄÄ ÄÄ ÖÖ ÖÖ ÜÜ ÜÜ ßß ßß

Web-DesignWeb-DesignErste ÜbungsaufgabeErste Übungsaufgabe Erstellen Sie mittels Erstellen Sie mittels WORDPADWORDPAD die Datei die Datei UEBUNG.HTMUEBUNG.HTM im im

Verzeichnis Verzeichnis c:\vhs_kurs\web-desn\schueler\.c:\vhs_kurs\web-desn\schueler\. DerDer Titel Titel soll lauten: soll lauten: „Meine erste HTML-Seite“„Meine erste HTML-Seite“ Die Die HauptüberschriftHauptüberschrift soll ebenso heißen soll ebenso heißen Die Die zweite Überschriftzweite Überschrift lautet: lautet: „Meine Hobbys“„Meine Hobbys“ Erstellen Sie eine Erstellen Sie eine ListeListe mit Ihren mit Ihren HobbysHobbys (mindestens 2) (mindestens 2) Fügen Sie ein Fügen Sie ein BildBild ein. Verwenden Sie die Datei: ein. Verwenden Sie die Datei: BILD1.JPGBILD1.JPG aus aus

dem Unterverzeichnis dem Unterverzeichnis .\bilder.\bilder Wenn noch Zeit bleibt, fügen Sie eine Wenn noch Zeit bleibt, fügen Sie eine TabelleTabelle mit beliebigen mit beliebigen

Textinhalten an.Textinhalten an. Speichern Sie die Datei und öffnen Sie diese mit einem Speichern Sie die Datei und öffnen Sie diese mit einem

BrowserBrowser..

Web-DesignWeb-DesignZweite ÜbungsaufgabeZweite Übungsaufgabe Öffnen Sie das Programm Öffnen Sie das Programm NetscapeNetscape Öffnen Sie darin das Programm Öffnen Sie darin das Programm ComposerComposer Erstellen Sie die Seite der vorigen Übung mit Erstellen Sie die Seite der vorigen Übung mit

dem dem ComposerComposer Speichern Sie die Seite und betrachten Sie sie Speichern Sie die Seite und betrachten Sie sie

mit dem mit dem BrowserBrowser. .

Web-DesignWeb-Design Themen des zweiten AbendsThemen des zweiten Abends Links zu anderen SeitenLinks zu anderen Seiten Links zum EMail-VersandLinks zum EMail-Versand FramesFrames Struktur einer InternetpräsentationStruktur einer Internetpräsentation ÜbungÜbung Fertige Seiten veröffentlichenFertige Seiten veröffentlichen kostenlose Hilfsmittelkostenlose Hilfsmittel

Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleLinks zu anderen SeitenLinks zu anderen Seiten

Hier kommen Sie zu Hier kommen Sie zu <a href =<a href = „„http://http://www.postbauer-heng.de/bilder/bilder.htwww.postbauer-heng.de/bilder/bilder.htmm““>>Postbauer-HengPostbauer-Heng</a></a>

Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleanklickbare EMail-Adresseanklickbare EMail-Adresse

Eine EMail senden an Eine EMail senden an <a href = <a href = „„mailto:mailto:gemeinde@[email protected]““>>[email protected]@postbauer-heng.de</a></a>

Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleBild teilen Bild teilen Frames 1Frames 1

Frames erleichtern die Navigation durch die Frames erleichtern die Navigation durch die SeitenSeiten

beispielsweise:beispielsweise:• Randspalte mit anklickbaren MenüpunktenRandspalte mit anklickbaren Menüpunkten• eine Hauptseite mit den aufgerufenen Inhalteneine Hauptseite mit den aufgerufenen Inhalten

Beispiel für FramesBeispiel für Frames


Index .htm

<f rameset co ls ="20% , *"><f rame s rc = "me nue .htm" name="links"><f rame s rc = "ha upt .htm" name="ha upt">

</f ra meset>

me nue .htm ha upt .htm

<a href="se ite 1.htm" ta rget="ha upt"> se ite2 .htm

<a href="se ite2 .htm" ta rget="ha upt">

se ite 1.htm


</head>

<frameset cols="20%, *"> <frame src="./menue.htm" name="links"> <frame src="./haupt.htm" name="haupt"></frameset>

<body background="./bilder/hintbild.jpg">


<head><base target = “haupt“></head><body><a href="./haupt.htm" target="haupt">zurück</a><br><a href="./seite1.htm" target="haupt">Thema 1</a><br><a href="./seite2.htm" target="haupt">Thema 2</a><br>

Struktur einer Struktur einer InternetpräsentationInternetpräsentation Komplexes BeispielKomplexes Beispiel

Übung zu FramesÜbung zu Frames Die Dateien Die Dateien index.htmindex.htm, , menue.htmmenue.htm und und haupt.htmhaupt.htm

sind vorbereitet.sind vorbereitet. Starten Sie die Datei Starten Sie die Datei index.htmindex.htm mit dem mit dem BrowserBrowser probieren Sie die probieren Sie die VerknüpfungenVerknüpfungen aus aus Ändern Sie in Ändern Sie in index.htmindex.htm die Angabe die Angabe colscols durch durch rowsrows

und probieren Sie die Seite mit dem und probieren Sie die Seite mit dem Browser Browser ausaus Ändern Sie in Ändern Sie in menue.htmmenue.htm die Angabe die Angabe target=„haupt“target=„haupt“

durch durch target=„links“target=„links“ oder oder target=„new“target=„new“ . . Probieren Sie wieder das Ergebnis mit dem Probieren Sie wieder das Ergebnis mit dem BrowserBrowser

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

eingebeneingeben

Fertige Seiten Fertige Seiten veröffentlichen 2veröffentlichen 2 Lokale Datei(en) markieren und zum Server Lokale Datei(en) markieren und zum Server

übertragenübertragen

Nützliche, kostenlose Nützliche, kostenlose HilfsmittelHilfsmittel Besucherzähler: Besucherzähler:

• www.digits.comwww.digits.com Gästebuch:Gästebuch:

• www.guestbook.dewww.guestbook.de Diskussionsforen:Diskussionsforen:

• de.groups.yahoo.comde.groups.yahoo.com Chat-Room: Chat-Room:

• www.chat4free.dewww.chat4free.de Weitere Hilfsmittel auf der Kurs-CDWeitere Hilfsmittel auf der Kurs-CD

Web-DesignWeb-Design Themen des dritten AbendsThemen des dritten Abends Bedienung des Netscape ComposersBedienung des Netscape Composers FormulareFormulare Verweis-sensitive GrafikVerweis-sensitive Grafik Meta-TagsMeta-Tags Cascading Style-SheetsCascading Style-Sheets Ihren Auftritt bekannt machenIhren Auftritt bekannt machen ÜbungenÜbungen

Web-Design Web-Design FehlersucheFehlersuche

Web-Design Web-Design Formulare 1Formulare 1

Auswahlknöpfe Auswahlknöpfe (Radio)(Radio)

AuswahllistenAuswahllisten Kästchen Kästchen

ankreuzenankreuzen Textfelder Textfelder

ausfüllenausfüllen Schaltfläche Schaltfläche

senden/löschensenden/löschen

Web-Design Web-Design Formulare 2Formulare 2 <<form actionform action = = ""mailto:mailto:[email protected]@t-online.de""

methodmethod==""postpost"" enctype=enctype=""text/plaintext/plain">"> <input type="<input type="hiddenhidden" name="" name="Formular_NameFormular_Name" "

value="value="meine private Homepagemeine private Homepage">">  </</formform>>

<form action="http://www.ihr-guter-name.de/<form action="http://www.ihr-guter-name.de/cgi-cgi-binbin/feedback.pl" method="get">/feedback.pl" method="get">

Web-Design Web-Design Formulare 3Formulare 3 <<inputinput typetype="="radioradio" name="geschlecht" " name="geschlecht"

value="value="MannMann">">männlichmännlich <br> <br> <<input typeinput type="="radioradio" name="geschlecht" " name="geschlecht"

checked="checked"checked="checked" value=“ value=“FrauFrau">">weiblichweiblich

<<select nameselect name="wohnort" size="4">="wohnort" size="4"> <<option valueoption value="="Ort1Ort1">">PostbauerPostbauer</</optionoption>> <<option valueoption value="="Ort2Ort2" "

selectedselected="">="">HengHeng</</optionoption>> </</selecselect>t>

Web-Design Web-Design Formulare 4Formulare 4 <<input type="input type="checkboxcheckbox" " name="beruf"name="beruf"

value="value="ArbeiterArbeiter"">>ArbeiterArbeiter <<input type="input type="checkboxcheckbox" " name="beruf"name="beruf"

value="value="AngestellterAngestellter"">>AngestellterAngestellter <<textarea nametextarea name="kommentar" ="kommentar" rows="5" cols="60"rows="5" cols="60"

wrap="virtual">wrap="virtual">Ihre MeinungIhre Meinung</</textareatextarea>>

<<input typeinput type="="submitsubmit" " valuevalue="="Formular Formular abschickenabschicken">">

<<input typeinput type="="resetreset"" value value="="Eingaben verwerfenEingaben verwerfen">">

Web-Design Web-Design Formulare 5Formulare 5 Formular_Name=meine private Formular_Name=meine private

HomepageHomepage geschlecht=maennlichgeschlecht=maennlich wohnort=Ort2wohnort=Ort2 beruf=Angestellterberuf=Angestellter kommentar=Hallo Kursteilnehmer von Web-kommentar=Hallo Kursteilnehmer von Web-

DesignDesign [email protected][email protected]

Web-Design Web-Design Verweis-sensitive Grafik 1Verweis-sensitive Grafik 1

Die Balken Die Balken sind sind anklickbar und anklickbar und verzweigen zu verzweigen zu Details des Details des jeweiligen jeweiligen MonatsMonats

Web-Design Web-Design Verweis-sensitive Grafik 2Verweis-sensitive Grafik 2 <<map namemap name="="klickgrafikklickgrafik">"> <<area shapearea shape="="rectrect" " coordscoords="="144,177,185,348144,177,185,348" "

href="./nov01.htm" alt="November 2001"href="./nov01.htm" alt="November 2001">> <<area shapearea shape="="rectrect" " coordscoords="="244,261,282,348244,261,282,348" "

href="./dez01.htm" alt="Dezember 2001">href="./dez01.htm" alt="Dezember 2001"> <<img src="balken.jpg" width="640" img src="balken.jpg" width="640"

height="409" border="0" alt="bitte auswaehlen" height="409" border="0" alt="bitte auswaehlen" usemapusemap="#="#klickgrafikklickgrafik">">

</</mapmap>>

Web-DesignWeb-DesignÜbungsaufgabe in Übungsaufgabe in abend_3abend_3 Ergänzen Sie in Ergänzen Sie in menue.htmmenue.htm die die

Koordinaten für die beiden fehlenden Koordinaten für die beiden fehlenden Schaltflächen aus Schaltflächen aus raster.txtraster.txt

Ergänzen Sie in Ergänzen Sie in aktuell.htmaktuell.htm den Verweis den Verweis auf die Grafik auf die Grafik balken.jpgbalken.jpg, so dass diese , so dass diese verweis-sensitiv wird.verweis-sensitiv wird.

Verändern Sie die Formularangaben in Verändern Sie die Formularangaben in impress.htmimpress.htm und prüfen Sie die und prüfen Sie die AuswirkungenAuswirkungen

Web-DesignWeb-Designkünftige künftige KontaktmöglichkeitKontaktmöglichkeit Wir können uns regelmäßig im Wir können uns regelmäßig im

Computer-Treff im Bahnhof treffen Computer-Treff im Bahnhof treffen und unsere Erfahrungen austauschenund unsere Erfahrungen austauschen

unter der news-Group:unter der news-Group:de.groups.yahoo.com/group/netlife-de.groups.yahoo.com/group/netlife-postbauer-hengpostbauer-hengkönnen wir in Verbindung bleibenkönnen wir in Verbindung bleiben

Web-Design Wie erstelle ich eine eigene Webseite und bringe sie ins weltweite Internet Ein Kurs der...

Documents

Transcript of Web-Design Wie erstelle ich eine eigene Webseite und bringe sie ins weltweite Internet Ein Kurs der...