• Skriptum
• Software
• Expression Web: Anwendung

Überblick

Der Arbeitsbereich von Expression Web ist in mehrere Bereiche aufgeteilt:

1. Menüleiste
2. Symbolleisten (in diesem Beispiel: Allgemein und Formatvorlage)
3. Statusleiste
4. Bearbeitungsfenster
   5. Registerkarten der Dokumentfenster
   6. Leiste "Direktauswahl von Tags" (siehe Dokumentstruktur DOM)
   7. Dokumentfenster (Webseite)
   8. Seitenansicht (Optionen Entwurf, Teilen und Code)
9. Panels

Hinweise zu den einzelnen Bereichen:

1. Funktioniert wie gewohnt.
2. Funktionieren wie gewohnt.
3. Statusleiste (erst später)
4. BearbeitungsfensterQuelle: Expression Web-Hilfe - Anpassen - Bearbeitungsfenster
   Hier werden die einzelnen Webseiten bearbeitet. Es können mehrere Seiten gleichzeitig geöffnet sein zwischen denen man natürlich auch wechseln kann. Jede Seite kann in einem Entwurfsansichtmodus oder in einem Codeansichtmodus dargestellt werden.
5. Registerkarten der Dokumentfenster
   Dienen dazu, zwischen den einzelnen, geöffneten Webseiten zu wechseln und diese in den Vordergrund zu holen.
   Können mit Klick auf die Schließen-Schaltfläche geschlossen werden.
   Ist eine Datei bearbeitet und somit verändert worden, also noch nicht in diesem Zustand gespeichert, erscheint ein kleines Sternchen rechts neben dem Namen.
6. Leiste "Direktauswahl von Tags" (siehe Dokumentstruktur DOM)
7. Dokumentfenster (Webseite)
   Hier können die Texte, Hyperlinks und Multimediaobjekte eingegeben und verändert werden. Es ist der Bereich, der später im Browserfenster angezeigt wird.
8. Seitenansicht (Optionen Entwurf, Teilen und Code)
   Hier kann man zwischen den Ansichten wechseln:
   • In der Entwurfsansicht sieht man die Webseite (fast) so, wie sie später in einem Browser dargestellt werden wird, dies nennt sich WYSIWYG (What you see is what you get). Dies ist die Ansicht, in der typischerweise die Texte, Hyperlinks und Multimediaobjekte eingegeben und editiert werden, da hier das Layout der Seite am besten sichtbar ist und damit die Postion, an der der Text stehen soll.
     Wie bei allen Webeditoren kann dies nicht vollständig mit einer Browserdarstellung übereinstimmen, denn jeder Browser und jeder Webeditor kann ein unterschiedliches Programm (rendering engine), das die Darstellung erreichnet - und hier kann es zu Unterschieden kommen.
     Manche Elemente wie Abkürzungen (<abbr>) werden von Webeditoren selten korrekt dargestellt.
   • In der Codeansicht sieht man den Quellcode und hat so die volle Kontrolle über diesen - sowohl bei HTML als auch bei CSS. Hier kann man sehr gut "Fehler" ausbessern, Strukturen kontrollieren und Details ändern.
   • Bei der Option "Teilen" wird das Dokumentfenster durch einen waagrechten Steg (Trennleiste) geteilt und die Webseite wird in beiden Ansichten dargestellt, wobei die Datei oben in der Codeansicht und unten in der Entwurfsansicht angezeigt wird. Änderungen in der Entwurfsansicht werden automatisch sofort in die Codeansicht übernommen; Änderungen in der Codeansicht können nicht automatisch übernommen werden, da z.B. beim Eintippen von Tags der HTML-Code "falsch" ist, solange der Anfangstag nicht fertig und auch der Endtag nicht eingefügt ist - und solange kann es keine korrekte Darstellung geben.
     Sollen die Änderungen in der Entwurfsansicht dargestellt werden, so muss diese aktualisiert werden. Dies erreicht man mit dem Menübefehl Menü Ansicht | Aktualisieren, durch Drücken der F5-Taste drückt oder durch klicken in den Bereich der Entwurfsansicht (und somit durch wechseln in diesen).
     Die Trennleiste kann mit der Maus verschoben werden und so die Dimensionen der beiden Ansichten verändert werden.
9. PanelsQuelle: Expression Web-Hilfe - Anpassen Panels
   Der englische Begriff panel bedeutet in der Technik Instrumententafelhttp://en.wikipedia.org/wiki/Control_panel_%28engineering%29 und wird in der EDV für spezielle Dialogfenster verwendethttp://en.wikipedia.org/wiki/Panel_%28computer_software%29 - wobei es hier auch andere Bezeichnungen, wie z.B. Bedienfelder, gibt. Diese Dialogfenster beinhalten meist Steuerelemente, die nicht nur in bestimmten Situationen, sondern jederzeit sinnvoll eingesetzt werden können. Daher macht es Sinn, diese Dialogfenster ständig anzuzeigen und außerdem haben sie die Eigenschaft, die Anwendung nicht zu blockierenhttp://en.wikipedia.org/wiki/Dialog_box. Diese Dialogfenster sind frei verschiebbar (schwebend), können aber meist am Rand des Fensters "angedockt" werden und teilen sich dann die Arbeitsfläche mit dem Dokumentfenster ohne sich zu überdeckenhttp://de.wikipedia.org/wiki/Tiling_%28Computer%29. Oft können sie "automatisch ausgeblendet" werden und so auf eine Registerkarte reduziert werden. Beim Anklicken der Registerkarte öffnet sich das Dialogfenster, man kann damit Arbeiten, und beim Klicken in einen Bereich außerhalb des Dialogfensters schließt es sich wieder. Meist können einzelne Dialogfenster gruppiert werden, sodass sie sich einen gemeinsamen Bereich teilen und man kann mittels Registerkarten das geünschte Dialogfenster in den Vordergrund holen.
   Solche Dialogfenster gibt es auch in Programmen wie z.B. Word (Navigation und Formatvorlagen), Adobe Reader (Lesezeichen und Seitenvorschau) oder Internet Explorer (Favoriten und Verlauf).
   • Einblenden der Panels
     Im Menü Bereiche können die gewünschten Panels eingeblendet werden. Viele können an anderen Stellen eingeblendet werden.
   • Ausblenden von Panels
     Im Menü Bereiche können die gewünschten Panels auch wieder ausgeblendet werden, außerdem haben alle Panels eine kleine Schließen-Schaltfläche in der rechten oberen Fensterecke.
   • Verschieben eines Panels
     Jedes Panel hat eine Titelleiste, in der sich auch die Registerkarte befinden. Mit Ziehen mit Maus (Klick in die Registerkarte) kann man die Panels frei bewegen.
   • Verschieben von Panelgruppen
     Jedes Panelgruppe hat eine Titelleiste, in der sich auch die Registerkarten befinden. Mit Ziehen mit Maus (Klick in den Bereich der Titelleiste außerhalb der Registerkarten) kann man die Panelgruppe frei bewegen.
   • Gruppieren von Panels
     Zieht man ein Panel so, dass der Mauszeiger in die Titelleiste eines anderen zeigt, so werden beide im Bereich des zweiten gruppiert. Dies wird durch einfärben des Umrisses des Bereiches, den es sich mit einem anderen Panel teilen wird, angezeigt (einfach ein bisschen ausprobieren).
   • Andocken von Panels
     Verschiebt man ein Panel so, dass der Mauszeiger an den Innenrand des Arbeitsbereiches oder zu den Rahmen eines anderen Panels zeigt, so kann das Panel dort angedockt werden. Wo genau, wird durch einfärben der zukünftigen Fläche des neuen Bereiches angezeigt (einfach ein bisschen ausprobieren). Der Arbeitsbereich wird dadurch in rechteckige Bereiche aufgeteilt.
   • Automatisches Ausblenden von Panels
     Mit dem Symbol der Pinnnadel kann für jedes Panel einzel gesteuert werden, ob es automatisch ausgeblendet wird oder nicht. Wird durch klicken auf das Symbol die Pinnnadel waagrecht angezeigt, so wird das Panel automatisch ausgeblendet und nur als Registerkarte angezeigt; wird die Pinnnadel senkrecht angezeigt, so wird das Panel permanent angezeigt. Je nachdem an welchen Rahmen das Panel angedockt war, wird auch die Registerkarte entsprechend angedockt.
     Anmerkung: Ein Panel kann nur automatisch ausgeblendet werden, wenn es angedockt ist. Ist es frei schwebend kann es nicht automatisch ausgeblendet werden und das Symbol der Pinnnadel wird daher nicht angezeigt.

 

Einstellungen

Empfehlenswerde Einstellungen, die von den Standardeinstellungen nach der Installation abweichen.

Darstellungsfarbe / Farbschema

Ist die dunke Standarddarstellung unangenehm oder schlecht lesbar, kann man sie auf ein helles Farbschema umstellen, dass dem eingestellten Windows-Farbschema entspricht.

Menü Extras | Anwendungsoptionen | Registerkarte Allgemein | Auswahlkästchen "Aktuelles Windows-Farbschema verwenden" aktivieren.

Schriftgröße in der Codeansicht

Menü Extras | Seiteneditoroptionen | Registerkarte Standardschriftarten  | Dropdown-Listenfeld "Schriftgrad" anpassen

Reihenfolge der Attribute in HTML-Tags frei wählbar

Menü Extras | Seiteneditoroptionen | Registerkarte Codeformatierung  | Auswahlkästchen "Attributnamen werden alphabetisiert" deaktivieren

Webseiten mit HTML5 und CSS 3 erstellen

Menü Extras | Seiteneditoroptionen | Registerkarte Dokumenterstellung  | Dropdown-Listenfeld "Dokumenttyp deklarieren" HTML 5 auswählen
sowie Dropdown-Listenfeld "Sekundäres Schema " HTML 5 auswählen
sowie Dropdown-Listenfeld "Schemaversion" CSS 3 draft auswählen

Im Kurs verwendete Panels und Symbolleisten

Menü Bereiche | Formatvorlagen verwalten

Erstellen und verändern von CSS-Regeln (in Expression Web Formatvorlagen genannt)

Menü Bereiche | Ordnerliste

Anzeige aller (in einer site) verwendeten HTML-Dateien, Bilder, CSS-Dateien inkl. der Ordnerstruktur

Ansicht | Symbolleisten | Formatvorlagen

Dient zum Zuweisen von Klassen und IDs und zum Erstellen von IDs

Ansicht | Direktauswahl von Tags

Markieren von Tags (auch für Ändern oder Löschen)

Ansicht anpassen

Im Menü Ansicht können folgende Befehle aktiviert bzw. eine differenzierte Feineinstellung vorgenommen werden:

• Visuelle Unterstützung
• Formatierungszeichen
• Direktauswahl von Tags

Hilfe

Das Benutzerhandbuch im Menütitel Hilfe ist teilweise gut gemacht. Leider entsprechen viele beschriebene Methoden veralteter, unprofessioneller Nutzung von HTML und CSS. Daher eher nur die Kapitel über die Benutzung der Bedienelemente von Expression Web verwenden, wie z.B. "Anpassen des Arbeitbereichs", "Anpassen des Arbeitbereichs | Bearbeitungsfenster", "Anpassen des Arbeitbereichs | Statusleiste", "Anpassen des Arbeitbereichs | Panels", "Anpassen des Arbeitbereichs | Tastenkombinationen"