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

Web-Design PowerPoint PPT Presentation


  • 58 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

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 design1

Web-Design

  • Themen des ersten Abends

  • Netzstruktur, wo sind meine Seiten

  • Grundzüge von HTML

    • Überschriften

    • Listen

    • Bilder

    • Tabellen

  • Übungen


Netzstruktur

Netzstruktur

  • wo befinden sich die eigenen Seiten?

Die erstellten Original-

seiten auf dem

eigenen PC

Kopien auf dem

www-Server


Grundz ge von html

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

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

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

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

Darstellung der Überschriften


Die wichtigsten html befehle fortlaufender text paragraph

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

Darstellung fortlaufenden Textes

  • Zwei Darstellungen desselben Textes


Die wichtigsten html befehle aufz hlungs liste list

Die wichtigsten HTML-BefehleAufzählungs-Liste List

  • <UL>

  • <LI>list item </LI>

  • <LI>list item </LI>

  • </UL>


Darstellung von listen

Darstellung von Listen


Die wichtigsten html befehle bilder grafiken image source

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 befehle tabelle table

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

Darstellung einer Tabelle


Die wichtigsten html befehle deutsche umlaute

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 design erste bungsaufgabe

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 design zweite bungsaufgabe

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 design2

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 befehle links zu anderen seiten

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 befehle anklickbare email adresse

Die wichtigsten HTML-Befehleanklickbare EMail-Adresse

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


Die wichtigsten html befehle bild teilen frames 1

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

Beispiel für Frames


Die wichtigsten html befehle bild teilen frames 2

Die wichtigsten HTML-BefehleBild teilen Frames 2


Die wichtigsten html befehle bild teilen frames 3

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 befehle bild teilen frames 4

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

Struktur einer Internetpräsentation

  • Komplexes Beispiel


Bung zu frames

Ü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

Fertige Seiten veröffentlichen 1

  • Zugangsdaten für den Server eingeben


Fertige seiten ver ffentlichen 2

Fertige Seiten veröffentlichen 2

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


N tzliche kostenlose hilfsmittel

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 design3

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 Fehlersuche


Web design formulare 1

Web-Design Formulare 1

  • Auswahlknöpfe (Radio)

  • Auswahllisten

  • Kästchen ankreuzen

  • Textfelder ausfüllen

  • Schaltfläche senden/löschen


Web design formulare 2

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

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

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

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

Web-Design Verweis-sensitive Grafik 1

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


Web design verweis sensitive grafik 2

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

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 design k nftige kontaktm glichkeit

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