Webseiten erstellen mit Expression Web Teil 2 Herzlich Willkommen Webentwicklung mit Expression Web Kursleiter: Steffen Schwientek
Kursverlauf 2. Wochenende Modelle zur Webseitengestaltung Tabelle Anhand Tutorial Layer Webseitenverwaltung Entwurf eines Kontakt-Formulares Kennenlernen von PHP Formmail Scripten
Webseite gestalten Webseite besteht aus vielen Unterseiten Alle Seiten sollten ähnlich aussehen: Gleiche Schriftart Farben Hintergrundbilder Unterseiten eines Webauftritts sollen sich im Inhalt unterscheiden, nicht im Layout! Einheitliche Struktur auf allen Unterseiten
Projekt:Kontaktformular hinzufügen Wir wollen auf unserer Seite ein kleines Kontaktfeld einfügen, in dem der Benutzer dem Webmaster einen Kommentar hinterlassen kann Problem: Wie soll der Server wissen, was er mit damit anfangen soll?
Formulare - Arbeitsweise
Projekt 2 Was wir können: Formularfelder formatieren Formularfelder zusenden Funktioniert bei aktuellen Browsern leider nur noch über das email -Frontend... Alternativ: CGI Script zur Auswertung benutzen PHP Script zur Auswertung benutzen
Formular formatieren Formularelemente werden vom Browser verarbeitet und Dargestellt Formatierung ist HTML, daher Thema dieses Kurses Für alles, was möglicherweise zum Server hochgeladen werden muss, kennt HTML das n <form> </form> Tag <form id="form1" name="form1" method="post" action=""> </form>
Kontaktformular mit X-Web Zunächst ein "Formular" erstellen Dient zum "sammeln von Eingaben"
Formular erstellen Innerhalb des Formularbereiches ist jedes andere HTML Tag erlaubt (also prinzipiell beliebige Formatierung erlaubt) Besonders Interessant sind natürlich die Formular Textfelder...und "Absenden Buttons"
Aufgabe Erstellen Sie Kontaktformular, in dem nach Namen und Kommentar gefragt wird. Formular wird noch nicht funktionieren...
Formular - Verarbeiten Doppelklick auf "form" tag: Optionen Dort das "auswertende Script" angeben
Übertragen zum Server: Methode get und post Methode get: Zu übermittelnde Daten werden direkt an die URL angehängt Methode post: Übertragung geschieht für den Besucher einer Webseite unsichtbar, Daten werden als extra Paket übertragen
Das Script Damit ist das Programm gemeint, das die ausgefüllten Formularelemente auswertet Geben Sie als Adresse den Namen des Scriptes (verarbeiten.php) an Das Script versendet alle Formularfelder die EMailadresse schwientek@web.de Außerdem lenkt das Script Sie zu einer universellen Danke Seite zurück
Auswertscript besorgen und anpassen Im Internet findet man viele Formmail - Scripte. Für unsere Zwecke tut es ein sehr einfaches. http://schlaukopp.org/file.php/10/formailer.php herunterladen und anpassen! Formail Script heruntergeladen aus: de.selfhtml.org Derart Scripte gibt es viele im Netz, vielleicht hat der Provider solche vorrätig
Tabellenlayout Erstellung der allerersten Seite mit einer großen Tabelle anfangen Inhalte nachträglich in Tabellen einfügen ist schwierig, aber machbar Am Anfang wird eine Tabelle layoutet, die später mit Inhalt gefüllt wird
Tabellenlayout - wie Beim Tabellenlayout muß jedes Thema durch eine fast identische Unterseite dargestellt werden. Man erzeugt dadurch viele, nur durch den Haupttext unterschiedliche HTML Seiten
Tabelle, wie damit Layouten Seite 1, Seite 2 Seite 3 und Seite 4 sind dabei Links zu den Entsprechenden Unterseiten
Tabelle Bemerkung Per Hand und ohne technisches Hilfsmittes ist es tatsächlich schwierig, eine Tabelle als Layoutmittel zu verwenden, denn Jede Unterseite ist eine komplette Tabelle? Diese unterscheidet sich nur durch die Zeilen und spalten, die unterschiedlichen Inhalt haben Epression Web wird uns später durch Vorlagen helfen
Aufgabe: Vorlage erstellen Als erstes steht beim Layout mittels Framea die Frage: Wie soll die Webseite ungefähr aussehen?
Analyse Layout
Umsetzung dieser Idee (Grafikdesigner) 3 Zeilen, eine Spalte (Banner) 1 Zeile, 3 Spalten 1 Zeile, 1 Spalte (footer)
Cafe Townsend: Aufgabe 1 Erstellen Sie untereinander 3 Tabellen 1. Tabelle: 3 Zeilen 1 Spalte 2. Tabelle 1 Zeile,3 Spalten 3. Tabelle: 1 Zeile, 1 Spalte Tabellenbreite sei jeweils 700px Bemerkung: Zwischen den Tabellen keine Absätze einfügen
Analyse Banner Besteht aus 3 bereich 1. Bereich: 50px grop 2. Bereich: 166px gro 3. Bereich: 26px hoch
Analyse Mittelteil (Navigation und Inhalt) Breite Navi: 140 Pixel Breite Bilder: 230px Breite Rest: 700px-140px-230px=330px Breite insgesamt: 700pixel Höhe unbekannt, kommt auf den Text an!
Analyse Fuß Der Fuß ist in unserem Fall klein, etwa 24px hoch!
Aufgabe Dimensionieren Sie das Banner (erste Tabelle), Haupttext und Footer! Versehen Sie die Seite mit einer schwarzen Hintergrund (css), den Navigationsframe mit einem rotbraunen Farbton und die 2 Inhaltszellen mit einem Schwarzton. Binden Sie das Bannerbild ein! Versuchen Sie das angegebene Layout zu realisieren!
Flash einbinden Flash werden wie folgt eingebunden: Einfügen/Medien/Flash Flash haben Dateiendung swf Flash sind schön anzuschauende Inhalte
Übung Erstellen Sie eine Layouttabelle für unser Restaurantprojkt
Das Layout dieser Seite Damit eine weitere Seite so aussieht wie die erste (Bsp:eine Speisekarte), müßte man diese Seite Kopieren Den Inhalt rausschmeissen und durch den Inhalt der Speisekarte ersetzen Die Links ggf. anpassen Dreamweaver nimmt diese Automatisierung für uns ab: Vorlagen!
Vorlagen - Idee Eine Vorlage schreiben Seite mühselig gestalten, alles, was nicht von Seite zu Seite verschieden ist, wird dort zentral definiert Alle anderen Seiten werden mit Hilfe dieser Vorlage erzeugt Nur noch der veränderte Bereich muß nachbearbeitet werden
Vorlagen in Web Expression Dazu einfach eine (gut formatierte) bestehende HTML Datei als Vorlage abspeichern Vorlagendatei (Endung dwt, Dynamic Web Template) ist eine einfache HTML Datei Jede HTML Datei kann (durch einfaches umbenennen zu einer DWT Datei werden Unterschied HTML Datei Dreamweaver- Vorlage: In der Vorlage steht noch, welcher Teil in weiteren Dokumenten weiter bearbeitet werden darf
Vorlagen Bereiche auswählen Standardeinstellung: Alles, was nicht explizit gekennzeichnet nicht, darf nicht bearbeitet werden! Gekennzeichnet werden kann: Jeder beliebige HTML Tag <table> </table> liesse sich bsp genauso als bearbeitbar kennzeichnen wie ein einfacher Paragraph <p> </p>
Nachteile Tabellen Übersichtlichkeit Trennung Inhalt/Layout wird vollständig aufgehoben Barrierefreihe Webseite? Tabellen bringen nur visuell Inhalte zusammen Strukturiert sind die Inhalte aber nicht Mit komplex geschachtelten Tabellen haben auch Suchmaschinen ihre Probleme.