Tutorials

Der Umgang mit Flash in Adobe Dreamweaver

Der Umgang mit Flash in Adobe Dreamweaver

Flash ist seit Jahren nicht mehr aus dem Internet wegzudenken. Allerdings hat sich das Einsatzfeld teilweise erheblich verändert. Vor 2000 musste jede Seite fetzig, bunt und laut sein. Zum Glück hat sich das geändert. Flash-Websites sind dezenter und informativer geworden. Überwiegend wird Flash mittlerweile für den Videoeinsatz eingesetzt (YouTube, Clipfish usw.).

Vor allem aber auch Video-Workshops auf PSD-Tutorials.de und auch anderen Webseiten werden fast alle im Flash-Format ausgeliefert. Entweder als SWF-oder als FLV-Datei. Warum das so ist? Weil Flash in allen Browsern/Betriebssystemen korrekt wiedergegeben werden kann und Flash auch gute Kompressionseinstellungen (Bild + Ton) und einen Kopierschutz anbietet.
Wen möchte man ansprechen?

Man sollte genau unterscheiden, für welche Zielgruppen die Website erstellt werden soll. Wenn ich ein Produkt verkaufen möchte, das hauptsächlich optisch kommuniziert (Events/Games usw.), spricht nichts gegen Flash. Vernachlässigt wird häufig auch, dass Flash hervorragend dafür geeignet ist, Prozesse zu visualisieren und Kunden Konfigurationsmöglichkeiten für Seiten und Grafiken zu bieten, die mit HTML und PHP so nicht möglich wären (dank Ajax will man dem allerdings entgegenwirken, was jedoch teilweise (noch) sehr kompliziert in der Programmierung ist).

HTML-Alternative

Adobe behauptet zwar, dass nahezu jeder Browser über das Flash-Plug-In verfügt, was sich auch in modernen Büros und vor allem privat absolut bestätigt, jedoch in Behörden und großen Firmen eher nicht zutrifft (häufig ist das Installieren von Plug-Ins komplett gesperrt oder Flash sogar bereits an der Firewall abfangen).

 

 

Flash per Dreamweaver in ein HTML-Dokument einbinden

Flash-Filme kannst du in Dreamweaver komplett steuern und parametrisieren. Um eine Flash-Datei einzufügen, klickst du zunächst auf das Register Allgemein>Mediensymbol>Flash.

Weiterlesen

Tutorials

Alle Tipps und Tricks beim Arbeiten mit Quellcode in Dreamweaver

Alle Tipps und Tricks beim Arbeiten mit Quellcode in Dreamweaver

Besonders Programmierer werden die neuen Funktionen zu schätzen wissen, obwohl Dreamweaver bei der PHP-Programmierung nicht mal annähernd an die Möglichkeiten von speziellen PHP-Editoren herankommt. Meistens wird in der Entwurfsansicht das Grundlayout mit Tabellen und Grafiken erstellt, diverse Variablen in PHP und SQL-Abfragen jedoch werden direkt im Code programmiert. Nur so ist vollständige Kontrolle über den Quelltext gegeben.

Arbeiten im Quellcode

In dieser Abbildung siehst du die neue Symbolleiste Kodierung. Die Bezeichnung ist sicherlich etwas unglücklich übersetzt. Tatsächlich verbirgt sich dahinter ein Werkzeug zum Bearbeiten und Handhaben von Quellcode.

Weiterlesen

Tutorials

HTML-Formulare erstellen und mit CSS & Javascript gestalten

HTML Formulare erstellen und mit CSS & Javascript gestalten

Um ein Formular zu nutzen, wird Folgendes benötigt:

  • das Formular mit den Informationen über Versandart der Daten (GET/POST oder per Email-Programm)
  • die darin enthaltenen Formularelemente als Eingabeoberfläche für den Benutzer. Nur die Inhalte, die in Formularelemente eingegeben werden, werden versendet.

Die Übertragungsmethoden in der Übersicht

Es gibt drei verschiedene Methoden, um Daten aus einem Formular zu versenden. Jede besitzt ihren eigenen Einsatzzweck:

  • GET
  • POST
  • Formulare per Mail

GET: Hier werden Daten aus dem Formular einfach an die URL angehängt und an den Server gesendet. Jeder kennt die vielen Zahlen und Variablen bei diversen Emailwebhostern in der Adressleiste des Browsers. Das sind Daten, die mit GET verschickt wurden (z. B. Kundennummer oder Session-ID).

Der Nachteil dieser Methode ist die völlig offene Übertragung. Für sensible Daten ist dieser Weg daher nicht geeignet. Außerdem ist die Menge der Daten, die auf diesem Weg versandt werden können, eingeschränkt.

Der Vorteil dieser Methode liegt darin, dass du diese Websites ggf. bookmarken kannst (z. B. wenn bestimmte Parameter wie eine Kategorie übergeben wurden).

POST: Die zweite Methode POST eignet sich besser, Daten in größeren Mengen und verdeckt zu versenden. Dazu ist allerdings notwendig, einen Server, der diverse Scriptsprachen unterstützt, zum Auswerten der Daten zu besitzen. Jedoch sollte das in heutigen Zeiten kein Problem sein, da mittlerweile selbst die kleinsten Webhosting-Pakete PHP unterstützen.

Formulare per Mail: Eine immer wieder genutzte Möglichkeit ist die Übertragung der Formularinhalte per Mail. Diese Methode ist in meinen Augen jedoch absolut unprofessionell. Sie setzt auf User-Seite ein Mailprogramm voraus und ist damit vollständig vom Besucher abhängig. Genau das will man eigentlich durch den Einsatz von Formularen vermeiden.

Formulardaten auswerten: Wenn du keine Skripte auf deinem Webserver laufen lassen kannst, die dafür sorgen, dass die Maildaten richtig ausgewertet und versendet werden, kannst du diverse Dienstleister für den Formularversand nutzen (z. B. www.formmailer.de bzw. unter www.kostenlos.de nachschauen). Wenn du dies nicht willst und auch kein Skript einsetzen kannst, füge dem Form-Tag den Parameter enctype=”text/plain” hinzu. Dieser sorgt dafür, dass der Text in den Mails für dich und das Mailprogramm halbwegs lesbar ist. Outlook hat dennoch immer wieder Probleme mit Mails aus Formularen. Trotzdem rate ich von dieser Methode eindeutig ab.

Weiterlesen

Tutorials

Arbeiten mit Vorlagen (bearbeitbare und wiederholende Bereiche)

Arbeiten mit Vorlagen (bearbeitbare und wiederholende Bereiche)

Erstelle dir zunächst das Dokument mit den Rahmenbedingungen, die in allen von der Vorlage zu erstellenden Dokumenten identisch sein sollen, und lasse die Bereiche mit individuellen Inhalten zunächst frei. In meinem Beispiel habe ich dafür eine HTML-Datei aus der PSD-Tutorials.de-Workshop-DVD genommen. Darin werden in den Formen>Kategorien alle Erweiterungen angezeigt. Hier habe ich zunächst 4 Platzhalter eingetragen: Kategoriename (oben), Bild (links), Kategoriename (Mitte) und Text (rechts):

Weiterlesen

Tutorials

Hyperlinks, Anker, E-Mail-Links, absolute und relative Pfade

Hyperlinks einbauen

Am einfachsten geht das über die Eigenschaftspalette in Kombination mit der Dateienpalette. Dazu klicke ich zunächst ein Wort an, welches verlinkt werden soll (das ganze Wort oder der ganze Satz muss dabei markiert werden). Danach reicht ein Klick auf das Zielfernrohrzeichen. Jedoch diesmal nicht die Maustaste loslassen, sondern mit gedrückter Taste auf die Datei zeigen, die ich verlinkt haben möchte. In meinem Beispiel wäre das die Erweiterungen.htm.

Weiterlesen

Tutorials

Aktionen steuern mihilfe der Verhaltenspalette in Dreamweaver

JavaScript ist gegenüber Java relativ einfach zu erlernen. Nachteil ist jedoch, dass der Code nicht auf jedem Browser sofort lauffähig ist und man so für fast jeden Browser ein paar Code-Zeilen anpassen muss. Gut ist jedoch, dass mir diese Arbeit Dreamweaver abnimmt. Denn der erzeugte Code funktioniert 100% auf IE / Firefox usw. Was ich nicht möchte, ist, in diesem Workshop JavaScript zu erklären. Ich möchte aber zeigen, wie es in Dreamweaver verwendet wird. Und los geht’s!

Dreamweaver bietet schon von Haus aus eine Menge vorgefertigter Aktionen/Scripte an. Wem die nicht ausreichen, der kann gerne auf der Adobe-Webseite weitere kostenlos herunterladen (wie das geht, habe ich im Workshop zum Erweiterungsmanager erklärt).

Zuerst öffne ich das Verhaltensfenster. Das geht unter Menü>Fenster>Verhalten.

Danach ein Klick auf das Plus-Zeichen, um zu schauen, welche Aktionen ich zur Auswahl habe:

Weiterlesen

Tutorials

Arbeiten mit Frames in Dreamweaver

Frames

Ein Frame ist ein verschiebbarer Teilbereich einer HTML -Seite, in dem eine andere HTML-Seite dargestellt werden kann. Das einzelne Segment wird dabei als Frame (engl. Rahmen ) bezeichnet, die Definition aller Frames als Frameset .
Die Frame-Technik wurde von Netscape im Navigator 2.0 eingeführt. Das W3C hat Framesets in den Versionen HTML 4.0 und XHTML 1.0 standardisiert. Bedauerlicherweise ist der W3C-Standard für Framesets inkompatibel zu den Implementierungen in gängigen Browsern, sodass eine valide Frameset-Seite meist nicht den Wünschen des Seitenautors entspricht und eine optisch ansprechende Seite nicht valide ist. Der Microsoft Internet Explorer unterstützt Frames ab der Version 3.0, der Browser Netscape Navigator ab Version 2.0. Alle Opera- und Mozilla-Browser sowie alle Firefox-Browser unterstützen Frames ab der Version 1.0.
Vorteile

- parallele Darstellung von mehreren Einzeldokumenten, die sich unabhängig voneinander verschieben lassen

- es muss damit nicht ständig die gesamte Webseite neu geladen werden

- nur der eigentliche Seiteninhalt wird gescrollt, aber die Menüleiste und andere wichtige Bereiche bleiben im Blickfeld des Benutzers

- über Frames lassen sich problemlos Inhalte aus unterschiedlichen Quellen bzw. aus verschiedenen Webanwendungen miteinander kombinieren; so könnten Unterergebnisse in einem weiteren Frame angezeigt werden
Nachteile

- Probleme mit der Adressierung; normale HTML-Seiten haben nur eine Adresse, mit der sie erreichbar sind, Frames bestehen jedoch aus mehreren Unterseiten, wobei im Browser meist die Adresse der Framedefinition (des Framesets) angezeigt wird, die sich bei dem Wechsel auf eine andere Unterseite in der Regel nicht ändert. Somit wird es schwierig, eine bestimmte Unterseite zu verlinken, ein Lesezeichen darauf zu setzen (verlinkt er den Frameset, wird die im Frameset definierte Startseite statt der gewünschten Unterseite geladen, gibt der die direkte Adresse an, so fehlen die übrigen Komponenten der Seite wie etwa die Navigation; dieses Problem lässt sich jedoch zum Glück per Javascript beheben)

- Suchmaschinen haben mit Frames leider teilweise Probleme, denn es werden dann z.B. Unterseiten erfasst und diese direkt verlinkt, jedoch fehlt dann bei dieser Verlinkung wie im 1. Punkt beschrieben die Navigation, die sich nur mit Javascript wieder zurückholen lässt. Auch kann es passieren, dass durch diesen Umstand nicht alle Seiten indiziert werden und dies zu einer schlechteren Platzierung in der Suchmaschine führt.

- Frames sind meistens nur für bestimmte Bildschirmauflösungen konzipiert.

- Probleme beim Ausdruck

Viele Experten aus dem Bereich Gebrauchstauglichkeit raten ausdrücklich vom Einsatz von Frames ab. Auch lässt sich beobachten, dass professionelle Seiten nur selten Frames einsetzen, aber auch bei privaten Webseiten wird immer öfter auf Frames verzichtet. Trotzdem möchte ich hier erklären, wie es mit Frames in Dreamweaver funktioniert.

Ein kleines Beispiel für eine Seite, die mit Frames aufgebaut ist, z.B. www.asc46.de/alte_webseite (Firmenwebseite, die vor meiner Umstellung auf CMS – Basis online war):

Weiterlesen

Tutorials

Bildformate, Bilder einfügen und ausrichten, Hotspots und Platzhalter

Bildformate

Im Internet haben sich mehrere Formate etabliert. Vor allem das JPG-Format. Damit ist es möglich, Bilder und Fotos mit 16 Mio. Farben zu speichern. Jedoch nicht verlustfrei. Je höher die Kompression ist, desto schlechter wird die Qualität. Wie im Bild links oben zu sehen, wäre das Bild bei einer zu hohen Kompression leider mit Artefakten untersetzt. Darum sollte in z.B. Photoshop immer genau geschaut werden, welche Kompressionsstufe für den jeweiligen Zweck benutzt wird. Für Fotos z.B. Kompressionsstufe 60 – 70 und bei 1 – 20-farbigen Illustrationen sollte erst gar nicht das JPG-Format gewählt werden. Dafür eignet sich das GIF-Format viel besser.

Weiterlesen