Web design
Sponsored Links
This presentation is the property of its rightful owner.
1 / 42

Web-Design PowerPoint PPT Presentation


  • 68 Views
  • Uploaded on
  • Presentation posted in: General

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.

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


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

  • Themen des ersten Abends

  • Netzstruktur, wo sind meine Seiten

  • Grundzüge von HTML

    • Überschriften

    • Listen

    • Bilder

    • Tabellen

  • Übungen


Netzstruktur

  • wo befinden sich die eigenen Seiten?

Die erstellten Original-

seiten auf dem

eigenen PC

Kopien auf dem

www-Server


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)


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

  • Einfacher Texteditor

  • Windowsprogramme

    • Netscape Composer

    • Microsoft Frontpage

    • GoLive von Adobe

    • viele weitere Tools aus dem Internet


Die wichtigsten HTML-BefehleÜberschrift Header

  • <H1> Überschrift oberste (1.) Ebene</H1>

  • <H2> Überschrift 2. Ebene</H2>

  • ...

  • <H6> Überschrift der 6. Ebene</H6>


Darstellung der Überschriften


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>


Darstellung fortlaufenden Textes

  • Zwei Darstellungen desselben Textes


Die wichtigsten HTML-BefehleAufzählungs-Liste List

  • <UL>

  • <LI>list item </LI>

  • <LI>list item </LI>

  • </UL>


Darstellung von Listen


Die wichtigsten HTML-BefehleBilder / Grafiken image source

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

  • <img src=„ . /verzeichnis/grafik2.gif“>

  • <img src=„poster3.jpg“>


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>


Darstellung einer Tabelle


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;


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.


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.


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


Die wichtigsten HTML-BefehleLinks zu anderen Seiten

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


Die wichtigsten HTML-Befehleanklickbare EMail-Adresse

  • Eine EMail senden an <a href = „mailto:[email protected]>[email protected]</a>


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


Beispiel für Frames


Die wichtigsten HTML-BefehleBild teilen Frames 2


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


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>


Struktur einer Internetpräsentation

  • Komplexes Beispiel


Ü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


Fertige Seiten veröffentlichen 1

  • Zugangsdaten für den Server eingeben


Fertige Seiten veröffentlichen 2

  • Lokale Datei(en) markieren und zum Server übertragen


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


Web-Design

  • Themen des dritten Abends

  • Bedienung des Netscape Composers

  • Formulare

  • Verweis-sensitive Grafik

  • Meta-Tags

  • Cascading Style-Sheets

  • Ihren Auftritt bekannt machen

  • Übungen


Web-Design Fehlersuche


Web-Design Formulare 1

  • Auswahlknöpfe (Radio)

  • Auswahllisten

  • Kästchen ankreuzen

  • Textfelder ausfüllen

  • Schaltfläche senden/löschen


Web-Design Formulare 2

  • <form action = "mailto:[email protected]"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">


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>


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


Web-Design Formulare 5

  • Formular_Name=meine private Homepage

  • geschlecht=maennlich

  • wohnort=Ort2

  • beruf=Angestellter

  • kommentar=Hallo Kursteilnehmer von Web-Design

  • [email protected]


Web-Design Verweis-sensitive Grafik 1

  • Die Balken sind anklickbar und verzweigen zu Details des jeweiligen Monats


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>


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


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


  • Login