Expression Web 3 SuperPreview Tutorial
24.07.2009
Seit kurzem kann die englische Testversion von Expression Web 3 bei Microsoft heruntergeladen werden. Da uns insbesondere SuperPreview interessierte, haben wir mal Expression Web 3 installiert. Das Installationsprogramm fragt übrigens nur zwei Dinge ab: einmal die Bestätigung der Lizenzbedingungen und optional den Pfad in welchen die Programme installiert werden sollen. Einfacher geht’s wirklich nicht mehr :-)Nach der Installation, eine Überraschung: SuperPreview ist ein eigenständiges Programm und kann auch separat von den anderen Anwendungen aufgerufen werden. Nach dem Start von SuperPreview sehen wir ein zweigeteiltes Fenster, welches uns einlädt jeweils einen Browser auszuwählen.
Wir entscheiden uns zunächst auf der linken Seite für den IE 8 und auf der rechten Seite für den Firefox 3.5. Eine Möglichkeit die Liste der angezeigten Browser zu erweitern habe ich nicht gefunden. Zum Beispiel für Chrome. Das Hinzufügen weiterer Browser in die Browserliste von Expression Web 3 hat anscheinend keine Auswirkungen auf SuperPreview. Nach Auswahl der Browser werden wir aufgefordert eine Adresse auszuwählen. Hierzu klicken wir einfach auf eines der Browsersymbole. Die Auswahl wird anschließend den Listen am unteren Rand des Programmfensters hinzugefügt. Sie können auf die einzelnen Bilder klicken, um eine vergrößerte Ansicht abzurufen.
Wir entscheiden uns zunächst auf der linken Seite für den IE 8 und auf der rechten Seite für den Firefox 3.5. Eine Möglichkeit die Liste der angezeigten Browser zu erweitern habe ich nicht gefunden. Zum Beispiel für Chrome. Das Hinzufügen weiterer Browser in die Browserliste von Expression Web 3 hat anscheinend keine Auswirkungen auf SuperPreview. Nach Auswahl der Browser werden wir aufgefordert eine Adresse auszuwählen. Hierzu klicken wir einfach auf eines der Browsersymbole. Die Auswahl wird anschließend den Listen am unteren Rand des Programmfensters hinzugefügt.
Der auf der linken Seite gewählte Browser ist der Referenzbrowser. Auf der rechten Seite können weitere Browser eingetragen werden. Klicken Sie hierzu auf das Plus-Symbol. Möchten Sie einen Vergleichsbrowser wieder entfernen, klicken Sie auf das X. Nun wählen wir eine Webseite aus. Hierzu klicken wir auf die Schaltfläche mit den drei Punkten links neben dem grünen Pfeil und suchen eine HTML Seite aus. Während die Seite geladen wird, erscheint übrigens eine kleine nette Animation.
Falls Sie eine Firewall einsetzen, wird diese Sie möglicherweise auf einen und/oder zwei Prozesse (Pipsone.exe und Pipstwo.exe) hinweisen, die Netzwerkverbindungen zum lokalen Rechner (localhost) aufbauen möchten. Dies sollte natürlich erlaubt werden. Nach dem Laden unserer Beispielseite stellen wir im IE 8 und Firefox zunächst keine Unterschiede fest, wir probieren mal den IE 6 aus, indem wir auf das Symbol vom IE 6 klicken.
Hier stellen wir eine Abweichung am unteren Rand des Logos fest. Die Hilfslinien erstellen Sie durch Anklicken eines der Lineale und Ziehen mit der Maus. Wenn Sie zweimal auf dasselbe Element auf der Seite klicken, hier beispielsweise der erste Absatz, wird Ihnen ein Infofenster mit den Position- und Größenangaben des Elementes angezeigt. Unterscheiden sich diese Angaben in einem der Fenster, wird diese in rot hervorgehoben. Sie sehen auch, dass die Umrandung des gewählten Elementes im Referenzbrowser auch in Vergleichsbrowser angezeigt wird. Sehr praktisch. Um die Differenz visuell noch mehr zu verdeutlichen, klicken Sie auf das Lampensymbol links oben in der Symbolleiste.
Wie finden wir jetzt die Ursache der Abweichung heraus? Nun, SuperPreview kann Ihnen an dieser Stelle nur Hinweise zur Fehlersuche geben. Wenn Sie auf die Schaltfläche DOM klicken, wird Ihnen im unteren Bereich das Document Object Modell angezeigt. In folgender Abbildung habe ich zwei weitere Hilflinien gezogen, die Ansicht auf 50% verkleinert und DOM eingeblendet.
Betrachtet man die Hilfslinien genauer, so stellt man fest, dass die Abweichung direkt unter dem Logo sich anscheinend fortpflanzt. Wir suchen die Stelle im DOM, wo das Logo enthalten ist. Im Code zur Seite schauen wir uns den Inhalt des Quellcodes genauer an.
Im passenden CSS #masthead sind margin und padding mit jeweils 0px angegeben, dies wäre korrekt und sollte auch im IE 6 funktionieren sollte.
office (000) 000-0000
fax (000) 000-0000
toll-free (000) 000-0000
Klammern wir versuchsweise den Inhallt vom Absatz aus und aktualisieren wir die Ansicht in SuperPreview, ist der Fehler behoben. Somit müsste man für die Umbrüche eine andere Lösung finden.
Abschließend noch ein interessantes Feature von SuperPreview. Das Programm kann auch Webseiten direkt aus dem Internet ansprechen, wie in folgender Abbildung mit meiner Website zu sehen. Einfach in das Adressfeld die Internetadresse eingeben.
Übrigens, diesen Beitrag haben wir in Word 2010 geschrieben, hat prima und ohne Probleme funktioniert. Folgend ein paar interessante Links:
» Microsoft Expression Web Hauptseite, Englisch
» YourExpression.de, ein Forum rund um Expression Studio Diesen Artikel haben wir ebenfalls auf folgenden Webseiten publiziert:
» Unser bei Blog bei Microsoft Spaces
Blog
Neuigkeiten
