Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza...
-
Upload
hertha-koch -
Category
Documents
-
view
212 -
download
0
Transcript of Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza...
![Page 1: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/1.jpg)
Formulare in Dreamweaver 17.03.2005 Seite 1
Übung zu Web-Formularen
Formular für Online Pizza Bestellung mit
Dreamweaver erstellen
![Page 2: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/2.jpg)
Formulare in Dreamweaver 17.03.2005 Seite 2
Layout für Formular
![Page 3: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/3.jpg)
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
![Page 4: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/4.jpg)
Formulare in Dreamweaver 17.03.2005 Seite 4
Dokumenttitel eingeben
Fügen Sie folgenden Text als Titel ein: Pizzaservice Hohenheim
![Page 5: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/5.jpg)
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")
![Page 6: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/6.jpg)
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
![Page 7: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/7.jpg)
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:
![Page 8: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/8.jpg)
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.
![Page 9: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/9.jpg)
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
![Page 10: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/10.jpg)
Formulare in Dreamweaver 17.03.2005 Seite 10
Textfelder "Straße" und "PLZ"
Wiederholen Sie den Vorgang für die Spalte "Straße"
"PLZ"
![Page 11: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/11.jpg)
Formulare in Dreamweaver 17.03.2005 Seite 11
Textfelder "Ort" und "Telefon"
"Ort"
und "Telefon".
![Page 12: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/12.jpg)
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
![Page 13: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/13.jpg)
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.
![Page 14: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/14.jpg)
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
![Page 15: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/15.jpg)
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.
![Page 16: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/16.jpg)
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
![Page 17: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/17.jpg)
Formulare in Dreamweaver 17.03.2005 Seite 17
Textfeld "Zahl"
Fügen Sie jetzt in die Spalte "Anzahl" ein Textfeld mit folgenden Eigenschaften ein:
![Page 18: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/18.jpg)
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:
![Page 19: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/19.jpg)
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
![Page 20: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/20.jpg)
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
![Page 21: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/21.jpg)
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:
![Page 22: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/22.jpg)
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:
![Page 23: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/23.jpg)
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:
![Page 24: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/24.jpg)
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
![Page 25: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/25.jpg)
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.
![Page 26: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/26.jpg)
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
![Page 27: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/27.jpg)
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.
![Page 28: Formulare in Dreamweaver 17.03.2005 Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen.](https://reader035.fdokument.com/reader035/viewer/2022070507/570491c61a28ab14218daebd/html5/thumbnails/28.jpg)
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