Übung 1

1. Erstellen Sie in dem neuen Order "uebung1" ein 2zeiliges Frameset mit den folgenden Dateien:
 
Frameset-Datei "index.htm":
 
  • kein Rahmen: oben: 100 Pixel; unten: den noch verfügbaren Rest
  • Titel: "Ihr Containerdienst im Herzen des Ruhrgebiets"
 
Seite "top.htm":
 
  • Framename "topFrame"; Scrollbar "nein"
  • Hintergrundfarbe "weiß"; Textfarbe "schwarz"
  • Plazieren Sie in einer unsichtbaren Tabelle (Breite 100%) den Firmen Schriftzug und die sechs Grafiken "\gifs\b3_1a" bis "\gifs\b3_6a" nach Vorlage1
  • Achten Sie auf den Zeilenumbruch hinter "Lehmann" (Schriftgrösse 4, -farbe #000099, fett)
  • Plazieren Sie unter der Tabelle eine Horizontale Linie (Höhe 3 Pixel, keine Schattierung)
 
Seite "main.htm":
 
  • Framename "mainFrame"; Scrollbar "Standard"
  • Hintergrundfarbe "weiß"; Textfarbe "schwarz"
  • Fügen Sie die Überschrift (Grösse "6", Farbe "Dunkelblau") und den restlichen Text (Grösse "2", Schriftart "Verdana") entsprechend der Vorlage1 ein.
   
2. Fertigen Sie mit den passenden Überschriften (Arial, Grösse 4, fett, dunkelblau) die Dateien "angebot.htm", "preise.htm", "order.htm" und "wir.htm" an. Speichern Sie diese dann und unterlegen Sie die Schaltflächen in der Datei "top.htm" in geeigneter Weise mit einem Hyperlink (Die Schaltfläche "Homepage" soll die Seite "index.htm" aufrufen!)
   
3. Seite "order.htm":
 
  • Fügen Sie als erstes ein Formular ein, dass mit der Methode "POST" die Formulardaten an Ihre EMail-Adresse sendet (Action "mailto:xyz@xyz.de")
  • Fügen Sie in das Formular eine zentrierte Tabelle (nur eine Zelle, Rahmen "2", Hintergrundfarbe "#CCCCFF") und in diese eine unsichtbare 2spaltige Tabelle mit mehreren Zeilen ein (Padding "2", Spacing "0")
  • Setzen Sie in die Tabelle die einzelnen Formular-Objekte nach Vorlage2 ein.
  • Beachten Sie, dass alle Formular-Objekte einen sinnfälligen eindeutigen Namen benötigen! Dass aber alle Optionsschaltflächen einer Gruppe den gleichen Namen benötigen!
  • Ferner, dass dort wo (Antwort-)Werte angegeben werden können auch diese sinnvoll gewählt werden!

    Bsp.: Name Optionsgruppe "cbm" - Werte: 1, 2, 3, 5, 7; Name Checkbox "Deckel" - Wert "ja"

   
4. Seite "preise.htm":
 
  • Legen Sie die Tabelle nach Vorlage3 an.
  • Benutzen sie für das "Kubikmeter" die Darstellung m³ (Sonderzeichen)
  • Beachten Sie die Hintergrundfarben und Ausrichtung einzelner Zellen.
  • Beachten Sie, dass einige Zellen miteinander verbunden wurden.
   
5. Wenn noch Zeit übrig bleibt:
 
  • Versuchen Sie mit Hilfe von Javascript (onmouseover) einen Bildwechsel der Schaltflächen in der Datei "top.htm" zu erreichen. Wenn die Maus z. B. auf das Bild b3-1a gesetzt wird (Image benennen, z. B. "pic1") soll das Bild3-1b angezeigt werden. Bei Fortbewegen der Maus wieder das ursprüngliche Bild. (Siehe dazu Kursmaterialien)
  • Versuchen Sie den ersten Teil der noch fehlenden Dateien (angebot, wir) so nahe wie möglich an den Beispielseiten zu ergänzen

Vorlage1:
Vorlage1
 
Vorlage2:
Vorlage1
 
Vorlage3:
Vorlage1


Top  Previous  Next