formulare in dreamweaver 17.03.2005 seite 1 Übung zu web-formularen formular für online pizza...
TRANSCRIPT
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 2
Layout für Formular
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 serifAbsatz zentrieren
Formulare in Dreamweaver 17.03.2005 Seite 4
Dokumenttitel eingeben
Fügen Sie folgenden Text als Titel ein: Pizzaservice Hohenheim
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")
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
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:
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.
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
Formulare in Dreamweaver 17.03.2005 Seite 10
Textfelder "Straße" und "PLZ"
Wiederholen Sie den Vorgang für die Spalte "Straße"
"PLZ"
Formulare in Dreamweaver 17.03.2005 Seite 11
Textfelder "Ort" und "Telefon"
"Ort"
und "Telefon".
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
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.
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
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.
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
Formulare in Dreamweaver 17.03.2005 Seite 17
Textfeld "Zahl"
Fügen Sie jetzt in die Spalte "Anzahl" ein Textfeld mit folgenden Eigenschaften ein:
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:
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
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
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:
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:
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:
Formulare in Dreamweaver 17.03.2005 Seite 24
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
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 sehennicht sehr übersichtlich aus.Wir müssen noch etwas nachbessern imBestellformular.
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
Formulare in Dreamweaver 17.03.2005 Seite 27
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.
Formulare in Dreamweaver 17.03.2005 Seite 28
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