Web design
Download
1 / 42

Web-Design - PowerPoint PPT Presentation


  • 83 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Web-Design' - farica


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>



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>



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>



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


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



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>



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


ad