Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.

Präsentation zum Thema: "Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen."—  Präsentation transkript:

1 Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen

2 Formulare in Dreamweaver 17.03.2005 Seite 2 Layout für Formular

3 Formulare in Dreamweaver 17.03.2005 Seite 3 Erste Schritte  Starten Sie Dreamweaver und  geben Sie im Dokument-Fenster die Überschrift des Formulars ein  Formatieren Sie die Überschrift: Schrifart: Arial, Helvetica, sans serif Absatz zentrieren

4 Formulare in Dreamweaver 17.03.2005 Seite 4 Dokumenttitel eingeben  Fügen Sie folgenden Text als Titel ein: Pizzaservice Hohenheim

5 Formulare in Dreamweaver 17.03.2005 Seite 5 Formular einfügen  Wählen Sie den Befehl Einfügen > Formular und füllen Sie die Felder im Eigenschaften-Fenster wie unten im Bild. (Tragen Sie bitte Ihre Emailadresse ein im Feld "Aktion")

6 Formulare in Dreamweaver 17.03.2005 Seite 6 Formular einfügen Hinweis: Sie können das Einfügen des Formulars und der einzelnen Formularfelder auch über die Leiste "Einfügen" bewerkstelligen. Dazu müssen Sie die Registerkarte "Formular" auswählen

7 Formulare in Dreamweaver 17.03.2005 Seite 7 Tabelle in Formular einfügen  Fügen Sie in das rot umrandete Feld für das Formular eine Tabelle ein mit folgenden Eigenschaften:

8 Formulare in Dreamweaver 17.03.2005 Seite 8 Texteingabe in Tabelle  Zentrieren Sie die Tabelle mit Hilfe des Eigenschaften-Fesnsters  Fügen Sie jetzt den Text in die Zellen der linken Spalte ein, wie in der Vorlage zu sehen.

9 Formulare in Dreamweaver 17.03.2005 Seite 9 Textfeld "Name" einfügen  Gehen Sie in die erste Zelle rechts und wählen Sie den Befehl: Einfügen > Formularobjekt > Textfeld  Definieren Sie die Eigenschaften wie unten im Bild

10 Formulare in Dreamweaver 17.03.2005 Seite 10 Textfelder "Straße" und "PLZ"  Wiederholen Sie den Vorgang für die Spalte "Straße"  "PLZ"

11 Formulare in Dreamweaver 17.03.2005 Seite 11 Textfelder "Ort" und "Telefon"  "Ort"  und "Telefon".

12 Formulare in Dreamweaver 17.03.2005 Seite 12 Listenfeld "Bestellung"  Gehen Sie Spalte "Bestellung" und wählen Sie den Befehl: Einfügen > Formularobjekt > Liste/Menü  Definieren Sie die Eigenschaften wie unten im Bild

13 Formulare in Dreamweaver 17.03.2005 Seite 13 Listenfeld "Bestellung"  Klicken Sie dann im Eigenschaften-Fenster auf die Schaltfläche "Listenwerte"  Geben Sie die Auswahlmöglichkeiten in der Liste wie unten im Bild an. Sie müssen nach jedem Eintrag auf "+" klicken, um einen neuen Eintrag einzugeben.

14 Formulare in Dreamweaver 17.03.2005 Seite 14 Listenfeld "Zutaten" mit Mehrfachauswahl  wählen Sie den Befehl: Einfügen > Formularobjekt > Liste/Menü  Definieren Sie die Eigenschaften wie unten im Bild

15 Formulare in Dreamweaver 17.03.2005 Seite 15 Listenfeld "Zutaten" mit Mehrfachauswahl  Klicken Sie dann im Eigenschaften-Fenster auf die Schaltfläche "Listenwerte"  Geben Sie die Auswahlmöglichkeiten in der Liste wie unten im Bild an. Sie müssen jedem Eintrag auf "+" klicken, um einen neuen Eintrag einzugeben.

16 Formulare in Dreamweaver 17.03.2005 Seite 16 Listenfeld "Größe"  Wiederholen Sie den Vorgang für das Listenfeld "Größe" und tragen Sie folgende Eigenschaften ein  Die Listenwerte hier heißen: Klein, Groß, Partypizza

17 Formulare in Dreamweaver 17.03.2005 Seite 17 Textfeld "Zahl"  Fügen Sie jetzt in die Spalte "Anzahl" ein Textfeld mit folgenden Eigenschaften ein:

18 Formulare in Dreamweaver 17.03.2005 Seite 18 Textfeld "Lieferdatum, -zeit"  Fügen Sie in die Spalte "Lieferdatum, -zeit" ein Textfeld mit folgenden Eigenschaften ein:

19 Formulare in Dreamweaver 17.03.2005 Seite 19 Optionsfeld "Selbstabholung"  Geben Sie in die Spalte Lieferart den Text "Selbstabholung" und ein Leerzeichen ein  Wählen Sie den Befehl Einfügen > Formularobjekt > Optionschaltfläche  Definieren Sie die Eigenschaften wie im Bild unten

20 Formulare in Dreamweaver 17.03.2005 Seite 20 Optionsfeld "Hauslieferung"  Geben Sie dann als Text "Hauslieferung" und ein Leerzeichen ein  Wählen Sie den Befehl Einfügen > Formularobjekt > Optionschaltfläche  Definieren Sie die Eigenschaften wie im Bild unten

21 Formulare in Dreamweaver 17.03.2005 Seite 21 Mehrzeiliges Textfeld  Fügen Sie in die Spalte "besondere Wünsche" ein mehrzeiliges Textfeld ein: Einfügen > Formularobjekt > Textfeld  Definieren Sie die Eigenschaften wie im Bild:

22 Formulare in Dreamweaver 17.03.2005 Seite 22 Schaltfläche "Bestellung abschicken"  Gehen Sie in die letzte Tabellenzeile und wählen Sie den Befehl Einfügen > Formularobjekt > Schaltfläche  Definieren Sie die Eigenschaften wie im Bild:

23 Formulare in Dreamweaver 17.03.2005 Seite 23 Schaltfläche "Felder löschen"  Fügen Sie ein Leerzeichen ein und wählen Sie den Befehl Einfügen > Formularobjekt > Schaltfläche  Definieren Sie die Eigenschaften wie im Bild:

24 Formulare in Dreamweaver 17.03.2005 Seite 24 Formular speichern und testen  Speichern Sie das erstellte Formular im Verzeichnis H:\public_html\uebungen  Laden Sie das Formular in Netscape, füllen Sie die Felder aus und schicken Sie es ab.  Prüfen Sie nach, ob die Bestellung als Mail bei Ihnen angekommen ist

25 Formulare in Dreamweaver 17.03.2005 Seite 25 Formular speichern und testen Die Mail sieht etwa wie folgt aus: Name=Peter+Krause&Strasse=Gartenstrasse&Ort=70794+Filderstadt&Bestellung=...... Die abgeschickten Formulardaten sehen nicht sehr übersichtlich aus. Wir müssen noch etwas nachbessern im Bestellformular.

26 Formulare in Dreamweaver 17.03.2005 Seite 26 HTML-Code Verbessern  Öffnen Sie die Formulardatei in Dreamweaver und wechseln Sie in die Code-Ansicht durch den Befehl: Ansicht/Code

27 Formulare in Dreamweaver 17.03.2005 Seite 27 HTML-Code Verbessern  Suchen Sie die Anweisung  Ergänzen Sie diese Anweisung um das Attribut enctype="Text/Plain"  Speichern Sie die Datei wieder ab.

28 Formulare in Dreamweaver 17.03.2005 Seite 28 Bestellformular erneut testen Jetzt sehen die abgeschickten Daten vernünftiger aus: Name=Peter Krause Strasse=Gartenstrasse 21 Ort=70794 Filderstadt Bestellung=Pizza mit Artichoken Zutaten=Oregano Zutaten=Zwiebel Groesse=Blech: 60cm.x40cm. Anzahl=3 Datum=2.6.01, 12.30 Uhr Lieferart=Hauslieferung Wuensche= Bitte pünktlich liefern