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

Formulare in Dreamweaver 17.03.2005 Seite 1

Übung zu Web-Formularen

Formular für Online Pizza Bestellung mit

Dreamweaver erstellen


Layout für Formular


Erste Schritte

Starten Sie Dreamweaver und geben Sie im Dokument-Fenster die

Überschrift des Formulars ein Formatieren Sie die Überschrift:

Schrifart: Arial, Helvetica, sans serifAbsatz zentrieren


Dokumenttitel eingeben

Fügen Sie folgenden Text als Titel ein: Pizzaservice Hohenheim


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


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


Tabelle in Formular einfügen

Fügen Sie in das rot umrandete Feld für das Formular eine Tabelle ein mit folgenden Eigenschaften:


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.


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


Textfelder "Straße" und "PLZ"

Wiederholen Sie den Vorgang für die Spalte "Straße"

"PLZ"


Textfelder "Ort" und "Telefon"

"Ort"

und "Telefon".


Listenfeld "Bestellung"

Gehen Sie Spalte "Bestellung" und wählen Sie den Befehl:Einfügen > Formularobjekt > Liste/Menü



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.


Listenfeld "Zutaten" mit Mehrfachauswahl

wählen Sie den Befehl:Einfügen > Formularobjekt > Liste/Menü



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.


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


Textfeld "Zahl"

Fügen Sie jetzt in die Spalte "Anzahl" ein Textfeld mit folgenden Eigenschaften ein:


Textfeld "Lieferdatum, -zeit"

Fügen Sie in die Spalte "Lieferdatum, -zeit" ein Textfeld mit folgenden Eigenschaften ein:


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


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


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:


Schaltfläche "Bestellung abschicken"

Gehen Sie in die letzte Tabellenzeile und wählen Sie den Befehl Einfügen > Formularobjekt > Schaltfläche



Schaltfläche "Felder löschen"

Fügen Sie ein Leerzeichen ein und wählen Sie den Befehl Einfügen > Formularobjekt > Schaltfläche



Formular speichern und testen

Speichern Sie das erstellte Formular im VerzeichnisH:\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


Formular speichern und testen

Die Mail sieht etwa wie folgt aus:Name=Peter+Krause&Strasse=Gartenstrasse&Ort=70794+Filderstadt&Bestellung=......

Die abgeschickten Formulardaten sehennicht sehr übersichtlich aus.Wir müssen noch etwas nachbessern imBestellformular.


HTML-Code Verbessern

Öffnen Sie die Formulardatei in Dreamweaver und wechseln Sie in die Code-Ansicht durch den Befehl:Ansicht/Code


HTML-Code Verbessern

Suchen Sie die Anweisung <Form name="..." method=".." ...>

Ergänzen Sie diese Anweisung um das Attribut enctype="Text/Plain" <form action=mailto:[email protected]?subject=pizzaservice method="POST" enctype="Text/Plain">

Speichern Sie die Datei wieder ab.


Bestellformular erneut testen

Jetzt sehen die abgeschickten Datenvernünftiger aus:Name=Peter KrauseStrasse=Gartenstrasse 21Ort=70794 FilderstadtBestellung=Pizza mit ArtichokenZutaten=OreganoZutaten=ZwiebelGroesse=Blech: 60cm.x40cm.Anzahl=3Datum=2.6.01, 12.30 UhrLieferart=HauslieferungWuensche= Bitte pünktlich liefern

Documents

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