Neu in Freeway 7

Neue Funktionen in Freeway 71. Responsive Layout: Die wichtigsten neuen Funktio-

nen in diesem Bereich sind die Unterstützung von Medientypen („Media Types“) und Medienabfragen („Media Queries“).

2. Responsive CSS Menü-Action: Die schon länger ver-fügbare CSS-Menü-Action wurde grundlegend über-arbeitet und kann nun auch auf Seiten mit Responsi-ve Layout verwendet werden. Es ist jetzt möglich, Drop-Down- und Fly-Out-Menüs zu generieren, die auf Desktop-Browsern wie gewohnt funktionieren und auf Mobilgeräten als Icon erscheinen, das man antippen muss, um ein optimiertes Menü zu öffnen, das auf Geräten wie dem iPhone bildschirmfüllend erscheint und trotzdem dieselben Parameter für die Menüzustände (Normal, Hover, Klick, Aktuelle Seite) wie die Desktop-Version verwendet.Attribut „Bold“ (Fettschrift) für den Status „Aktuelle Seite“: Die CSS-Menü-Action unterstützt nun als Hervorhebung der aktuellen Seite den Status Fettschrift (zusätzlich zur Möglichkeit, die Link bzw. Hintergrundfarbe bzw. das Hintergrundbild zu än-dern.Navigationsmenü automatisch generieren: Es gibt eine neue Funktion zum automatischen Generieren des CSS-Menüs auf Basis der im Site-Panel vorhande-nen Seiten und Ordner (einschließlich Untermenüs und Unter-Untermenüs).Action: Aus CSS-Menü entfernen: Alle mit dieser Action können Sie bestimmte Seiten aus dem auto-matisch generierten CSS-Menü ausschließen.

3. Better Meta-Action: Mit dieser Action können Sie Metadaten für Social Media Seiten schnell und ein-fach hinterlegen.

4. Table Styler-Action: Versehen Sie Tabellen mit Hilfe dieser Action mit einer eleganten Formatierung.

5. Verbesserte Google Analytics-Action: Die Google Analytics Action für Freeway 7 nutzt nun auch die neuen durch „Universal Analytics“ bereitgestellten Funktionen.

6. Neue HTML5-Abschnitts-Elemente: Freeway 7 un-terstützt zusätzlich die Elemente Figure, Figure Cap-tion und Main.

7. Neue Tastaturkürzel: Es wurden einige neue Tasta-turkürzel eingeführt, die den Arbeits"uss in Freeway erleichtern sollen. So lassen sich Dialoge, die vorher nur per Menübefehl aufgerufen werden konnten, per Tastatur öffnen.

1. Responsive Websites und Freeway

Alle modernen Webbrowser bieten Unterstützung für „Media Types“ (Medientypen) und „Media Queries“ (Medienabfragen), so dass Sie mit Freeway 7 Websites gestalten können, die ihr Layout automatisch an die Fenster- bzw. Bildschirmbreite des Betrachters anpas-sen. Dazu werden sogenannte „Breakpoints“ für die Bildschirmbreite genutzt, bei deren Erreichen die Layoutänderung ausgelöst wird. Konkret werden dabei mittels CSS verschiedene Seiten- und Elementattribute geändert und so das Layout für die neue Seitenbreite optimiert.

Die Attribute, die beim Erreichen eines Breakpoints ge-ändert werden können, fallen in zwei Kategorien – Sei-tenattribute und Elementattribute. In diesem Abschnitt geht es um die Seitenattribute, auf die Elementattribute wird im Abschnitt Responsive Websites und Freeway-E-lemente eingegangen.

Wir empfehlen, dass Sie Ihre Seiten als prozent-basierte In"ow-Layouts realisieren. Damit erreichen Sie eine "ie-ßende Anpassung der Seitenelemente an die Seiten-breite, bevor ein Breakpoint erreicht wird.

Seitenattribute, die mit Hilfe von Media Queries (Breakpoints) geändert werden könnenEs gibt eine Vielzahl von Seitenattributen, die bereits von Browsern beim Betrachten einer Website mit re-sponsive Layout unterstützt werden. Aktuell handelt es sich um folgende Attribute, es ist möglich, dass in Zu-kunft weitere hinzukommen.

• Ausrichtung (Alignment): Damit können Sie festle-gen, wie die Seite beim Erreichen eines Breakpoints im Browser ausgerichtet werden soll. Beachten Sie hierbei, dass dies von Browsern auf Mobilgeräten nicht unterstützt wird, da die Seite dort immer auf die Bildschirmgröße skaliert wird.

• Hintergrund (Background): Hier können Sie bei Errei-chen des Breakpoints eine andere Farbe für den Browserhintergrund festlegen (also den Bereich au-ßerhalb des Seitenbereichs). Auf mobilen Geräten wird dieser Hintergrund nicht dargestellt, es sei denn, Sie belassen einen Leerraum um Ihren Seiteninhalt, aber innerhalb der Seitenumgrenzung, dem keine Hintergrundfarbe und kein Bild zugewiesen wurde.

• Hintergrundbild (Background Image): Damit haben Sie die Möglichkeit, bei Erreichen des Breakpoints ein anderes Hintergrundbild für das Browserfenster zu laden. Wie für das Hintergrund-Attribut gilt auch hier für Browser auf mobilen Geräten, dass dieses Bild nicht dargestellt wird, es sei denn, Sie belassen einen Leerraum um Ihren Seiteninhalt, aber innerhalb der

Freeway 7 Update-Anleitung

- 1 -

Seitenumgrenzung, dem keine Hintergrundfarbe und kein Bild zugewiesen wurde.

• Abmessungen (Dimensions): Damit können Sie bei Erreichen eines Breakpoints andere Seitenabmessun-gen festlegen.

• Hilfslinien (Guides): Dies beein"usst zwar nicht das Aussehen der erzeugten Seite, gestattet Ihnen aber, für die verschiedenen Medienbreiten unterschiedli-che Hilfsliniengruppen für die Arbeit in Freeway zu de#nieren.

• Ränder/Gitter (Margins/Grids): Die das vorherige At-tribut beein"usst auch dieses nicht die ausgegebene Datei, gestattet Ihnen aber, eigene Ränder und Gitter-linien passend zu den verschiedenen Medienbreiten für die Arbeit in Freeway festzulegen.

• Min./Max. Abmessungen (Min/Max Dimensions): Falls Sie in der Inspektorpalette mit Min./Max. Abmes-sungen für die Seitenbreite arbeiten, können Sie für jeden Breakpoint eigene Werte festlegen.

• Innenabstand (Padding): Sie können für jeden Bre-akpoint einen eigenen Wert für den Innenabstand vorgeben.

• Seitenhintergrund (Page Background): Legen Sie – falls gewünscht – für jeden Breakpoint eine andere Seitenhintergrundfarbe fest.

• Seitenhintergrundbild (Page Background Image): Dementsprechend können Sie ebenfalls für jeden Breakpoint ein eigenes Seitenhintergrundbild wäh-len.

Ein sehr kurzes Einführungs-Tutorial für die Arbeit mit Responsive LayoutDieses Tutorial zeigt in einfachen Schritten am Beispiel eines einzelnen Elements auf einer Seite die Vorge-hensweise zum Erzeugen eines Responsive Layouts mit Freeway.

Auch wenn wir empfehlen, dass Sie Ihre Seiten mit pro-zent-basierten Elementen bauen, können Sie natürlich stattdessen absolut positionierte (Ebenen-) Elemente verwenden.

Der Hauptvorteil eines In"ow-Layouts besteht darin, dass Sie die Seitenbreite einfach bei jedem Breakpoint neu setzen können (so dass sie der Pixelbreite der je-weils verwendeten Medienbreite entspricht). Freeway kann dann das Seiten-„Container“-Element passend skalieren und alle darin enthaltenen Elemente entspre-chend ihrer prozentualen Breite neu positionieren. Wenn Sie kein In"ow-Layout verwenden, müssen Sie für jede Medienbreite jedes einzelne Seitenelement neu positionieren und seine Größe anpassen, was deutlich aufwändiger ist.

Dieses grundlegende Tutorial zeigt die Vorgehensweise für Nicht-In"ow- aus auch für In"ow-Layouts gleicher-maßen. Sie sollten aber das vollständige Tutorial durch-arbeiten, da Sie nur so eine Einführung in alle notwen-digen Arbeitsschritte erhalten. Am besten wäre es, wenn Sie nun Freeway starten und parallel zur Lektüre gleich die beschriebenen Handlungsschritte nachvoll-ziehen.

Indem Sie eine (oder – falls erforderlich –) mehrere Masterseiten einrichten, können Sie erreichen, dass alle allgemeinen Seitenelemente bereits vorhanden sind und für die vorgesehenen Medienbreiten korrekt posi-tioniert werden. Dann müssen Sie „lediglich“ den spezi-#schen Inhalt der einzelnen Seiten bearbeiten und für jede Medienbreite anpassen.

Mit Responsive Layout und Nicht-In!ow-Elementen arbeitenStarten Sie Freeway, rufen Sie den Menüpunkt „Ablage/Neu“ auf und erzeugen Sie aus der „Blank“-Vorlage ein neues Dokument, das Sie auf Ihrer Festplatte (z.B. dem Schreibtisch) speichern. Selektieren Sie die Masterseite und stellen Sie im auf der „Allgemeine Seiteneinstellun-gen“-Karteikarte des Inspektors eine Seitenbreite von 1050px und eine Seitenhöhe von 1000px ein. Im Ausricht.-Popup wählen Sie „Zentriert“.

Stellen Sie sicher, dass in der Symbolleiste der „CSS Layout“-Button eingeschaltet ist (also blau leuchtet) und in der Medienbreiten-Spalte oberhalb des Arbeits-bereichs der Button „Standard“ aktiviert ist.

Aktivieren Sie in der Inspektorpalette die Karteikarte „Erscheinungsbild der Seite“ und wählen Sie „Cyan“ als Fensterhintergrundfarbe. Zeichnen Sie dann ein HTML-Element auf die Seite. Setzen Sie mit Hilfe der Inspek-torpalette dessen linke Position auf 0px, die obere auf 250px, die Breite auf 1050px und die Höhe auf 250px. Weisen Sie dem HTML-Element die Farbe „Gelb“ zu.

Da für die Medienbreite der „Standard“-Button aktiv ist, wird die Seite exakt so dargestellt, wie Sie es von frühe-ren Freeway-Versionen gewohnt sind.


- 2 -

Klicken Sie nun auf den Button „Tablet: 768“. Sie sehen nun einen halbtransparenten roten Balken, der den rechten Seitenbereich abdeckt. Dieser heißt „Überlage-rung der Medienbreite“.

In dem oben abgebildeten Bildschirmfoto können Sie gut erkennen, dass die „Überlagerung der Medienbrei-te“ Ihnen eine Rückmeldung gibt, dass die verfügbare Seitenbreite und kleiner als die Standardbreite ist. Da wir die Seitenbreite anfangs auf 1050px festgelegt hat-ten, zeigt Ihnen die Medienbreite „Tablet: 768“, wie viel Platz für diesen Breakpoint verfügbar ist (d.h., Sie haben für diesen Breakpoint nur noch 768px anstelle der ur-sprünglichen 1050px übrig).

Wir hatten vorhin erwähnt, dass die „Überlagerung der Medienbreite“ als halbtransparenter roter Bereich dar-gestellt wird. Da er halbtransparent ist, erscheint er in der Abbildung wegen der darunter liegenden cyan und gelb gefärbten Elemente blaugrün und orange. Über einem weißen Element wird die Überlagerung in einer roten Schattierung dargestellt, wie auf dem nächsten Bildschirmfoto zu erkennen.

Wenn Sie eine schmalere Medienbreite wählen, passt sich der rote Bereich entsprechend an und zeigt den für den gewählten Breakpoint verfügbaren Platz (wieder

basierend auf der anfänglich gewählten Seitenbreite von 1050px). Klicken Sie auf „Phone: 320“. Sie sehen, dass die „Überlagerung der Medienbreite“ nun fast den gesamten Seitenbereich ausfüllt (siehe nächstes Bildschirmfoto).

Es ist wichtig, an dieser Stelle nochmals darauf hinzu-weisen, dass die „Überlagerung der Medienbreite“ Ih-nen lediglich eine visuelle Rückmeldung über den Un-terschied zwischen der für das Dokument festgelegten Seitenbreite und der Ansicht bei dem jeweils gewählten Breakpoint gibt. Der rote Bereich verhindert nicht, dass Sie Elemente dort positionieren und es gibt keinen Au-tomatismus, der den Seiteninhalt entsprechend an-passt. Auf den Punkt gebracht: Sie sind dafür verant-wortlich, dass die Seitenelemente in Größe und Position angepasst werden, damit sie nicht im roten Bereich lie-gen. Bei Verwendung von Nicht-In"ow-Elementen müs-sen Sie dies manuell bewerkstelligen.

Wenn Sie die Anzeige der Medien-Überlagerung deak-tivieren wollen, können Sie dies mit dem Menüpunkt „Ansicht/Medienbreite-Overlay“ tun. Diese Option ist standardmäßig aktiv.


- 3 -

Da es sich bei dieser Funktion um ein ausgesprochen nützliches Werkzeug und eine gute Erinnerungsstütze handelt, sollten Sie es immer eingeschaltet lassen.

Wir können nun daran gehen, einige grundlegende Ei-genschaften für das Responsive Layout festzulegen. Klicken Sie auf den Button „Tablet: 768“. Ändern Sie den Fensterhintergrund der Seite auf „Gelb“. Wählen Sie das HTML-Element aus und ändern Sie seine Hintergrund-farbe auf „Grün“. Geben Sie dem HTML-Element eine Breite von 768px (also exakt die Breite des aktuellen Breakpoints). Damit füllt das HTML-Element in der Brei-te exakt den Bereich vom linken Fensterrand bis zum Beginn des roten Medienbreite-Overlays.

Sobald Sie diese Änderung vorgenommen haben, er-scheint im Namen des „Tablet: 768“-Buttons links ein schwarzer Punkt. Dieser ähnelt den schwarzen Punkten, die im Site-Panel links vor den Namen von Seiten er-scheinen, wenn es auf diesen nicht veröffentlichte Än-derungen gibt. Mit dem Punkt im „Tablet: 768“-Button hat es eine andere Bewandtnis: Dieser soll lediglich zei-gen, dass für diesen Breakpoint spezielle Anpassungen (Media Changes) vorgenommen wurden und ver-schwindet auch nicht, wenn die Seite veröffentlicht wurde.

Dies ist der passende Zeitpunkt zu erwähnen, dass die Reihe der verschiedenen Medienbreiten kaskadierend funktioniert: Änderungen für eine breitere Medienbrei-te werden automatisch auf die schmaleren Medienbrei-ten übernommen. Wenn Sie also zuerst die „Standard“-Medienbreite bearbeiten, verwenden alle schmaleren automatisch deren Seiten- und Elementeinstellungen. Nachdem wir nun die Fensterhintergrundfarbe und das HTML-Element für die „Tablet: 768“-Medienbreite ange-passt haben, werden diese Änderungen automatisch auf die schmaleren Medien übernommen.

Der Grund für diese Arbeitsweise besteht darin, dass so – immer vorausgesetzt, sie beginnen mit der „Stan-dard“-Medienbreite und arbeiten sich dann von rechts nach links durch die schmaleren Breiten – jede Ände-rung auf der nächstschmaleren Medienbreite automa-tisch berücksichtigt wird. Damit wird verhindert, dass Sie bestimmte Bearbeitungsschritte mehrfach wieder-holen müssen. Wenn Sie die Medienbreiten stattdessen von links nach rechts bearbeiten würden, müssten Sie

alle Bearbeitungsschritte für jede Medienbreite wieder-holen.

Bitte wählen Sie nun noch einmal auf der „Tablet: 768“-Medienbreite das HTML-Element aus und schauen Sie sich seine Einstellungen in der Inspektorpalette an. Sie werden zwei neue Bereiche am unteren Rand der „All-gemeinen Elementeinstellungen“ bemerken: „Aktuelle Medienänderungen“ und „Geänderte Medientypen“.

Unter „Aktuelle Medienänderungen“ werden die Einträ-ge „Format“ und „Hintergrund“ aufgelistet. Für den ak-tuellen Medienbreiten-Breakpoint wurden also zwei Änderungen am HTML-Element vorgenommen: Wir hatten die Hintergrundfarbe auf „Grün“ und die Ele-mentbreite auf 768px geändert.

Der Bereich „Geänderte Medientypen“ gibt uns die Rückmeldung, dass bisher lediglich der „Tablet: 768“-Breakpoint bearbeitet wurde.

Deselektieren Sie das HTML-Element (indem Sie auf ei-nen leeren Seitenbereich oder die Montage"äche kli-cken). Jetzt werden im Inspektor die allgemeinen Ein-stellungen für die Seite selbst angezeigt. Im Bereich „Aktuelle Medienänderungen“ wird nun lediglich „Hin-tergrund“ aufgeführt. Sie werden sich daran erinnern, dass vorhin, als das HTML-Element ausgewählt war, e-benfalls „Hintergrund“ aufgeführt wurde. Dies bezog sich allerdings auf die Änderung der Hintergrundfarbe des HTML-Elements von „Geld“ auf „Grün“. Der Eintrag „Hintergrund“ für die Seite spiegelt die Änderung der Fensterhintergrundfarbe von „Cyan“ auf „Yellow“ wider. (Hinweis: Wenn Sie die Seitenhintergrundfarbe ändern, erscheint im Bereich „Aktuelle Medienänderungen“ der Eintrag „Seitenhintergrund“.)

Die Anzeige im Bereich „Aktuelle Medienänderungen“ ist also kontextsensitiv und führt nur Änderungen auf, die an dem aktuell ausgewählten Element (bzw. der Seite selbst) vorgenommen wurden. Wenn sich mehre-re Elemente auf der Seite be#nden, können Sie diese


- 4 -

nacheinander anklicken, um nachzuschauen, welche Attribute geändert wurden.

Es gibt noch eine andere Möglichkeit festzustellen, wel-che Elemente für eine bestimmte Medienbreite ange-passt wurden. Aktivieren Sie dazu den entsprechenden Medienbreiten-Button und schauen Sie in der Site-Pa-lette nach, welche Elementnamen in Fettschrift aufge-führt sind. Für das folgende Beispiel bedeutet dies, dass das Element m1 für den aktuell angezeigten Breakpoint bearbeitet wurde.

Dies ist ein guter Zeitpunkt, sich eine Vorschau der Seite im Webbrowser anzuschauen. Klicken Sie dazu in der Symbolleiste auf den Browser-Button. Schauen Sie sich dann die Seite zunächst mit besonders breitem Browserfenster an. Wenn Sie gerade an einem normal großen Bildschirm arbeiten, sollten Sie die Seite in ihrer „Standard“-Medienbreite sehen (also mit einem cyan-farbigen Hintergrund und einem gelben HTML-Ele-ment. Wenn Sie nun das Browserfenster in der Breite verkleinern, werden Sie feststellen, dass sich der Seiten-inhalt schließlich verändert, und zwar entsprechend der Einstellungen, die wir für die Medienbreite „Tablet: 768“ vorgegeben haben: Der Fensterhintergrund wird gelb und das HTML-Element färbt sich grün.

Es ist zwar im Browser nicht einfach zu sehen, aber die-se Änderung passiert exakt, sobald die Fensterbreite nur noch 768px oder weniger beträgt. Webbrowser ver-fügen standardmäßig nicht über eine Anzeigefunktion für die aktuelle Fensterbreite, allerdings gibt es Browser-Plug-ins, die diese Funktionalität als Arbeitser-leichterung für Webdesigner nachrüsten.

Wegen der De#zite, die Webbrowser derzeit bei der An-zeige von Pixel-spezi#schen Fensterbreiten aufweisen, haben wir die in Freeway integrierte Voransicht-Funkti-on dahingehend überarbeitet, dass sie die Seite in der

Pixelbreite der gewählten Medienbreite anzeigt. Klicken Sie zum Ausprobieren dieser Funktion einfach auf den „Voransicht“-Button, der sich oberhalb der Medienbrei-ten-Buttons be#ndet. Sie sehen dann die Ansicht der „Tablet: 768“-Medienbreite exakt in einer Breite von 768px, mit grauen Rändern links und rechts.

Verlassen Sie die Voransicht noch nicht und klicken Sie nun auf den „Standard“-Button. Die Seite wird nun in den für die Standardbreite gewählten Farben darge-stellt. Diese erweiterte Voransicht ist ein wichtiges Werkzeug zur Kon#guration der Medienbreiten Ihrer Website.

Wechseln Sie wieder in den „Master“-Modus, indem Sie links neben „Voransicht“ auf „Master“ klicken.

Aktivieren Sie die „Smartphone (Querformat): 480“-Me-dienbreite, ändern Sie den Seitenhintergrund auf „Ma-genta“, die Hintergrundfarbe des HTML-Elements auf „Weiß“ und seine Breite auf 480px. Rufen Sie dann wie-der die Vorschau im Webbrowser auf und überzeugen Sie sich davon, dass der Seiteninhalt sich nun an zwei Breakpoints ändert, wenn Sie das Browserfenster immer schmaler machen.

Wichtig: Wenn Sie für „Smartphone: 320“ ebenfalls ei-nen Breakpoint vorsehen, ist die Vorschau im Desktop-Webbrowser nicht mehr möglich, da Sie das Browser-fenster nicht schmal genug ziehen können. Zum Testen müssten Sie dann entweder die Seite hochladen und mit einem entsprechenden Mobilgerät laden, die in Freeway integrierte Voransicht verwenden, oder den Apple iPhone Simulator installieren. Falls Sie letzteres vorhaben, müssen Sie im Mac App Store XCode laden und installieren. Sobald installiert, klicken Sie lange auf den Webbrowser-Button in der Freeway-Symbolleiste, wählen dann „Browser einstellen“ und im nächsten Dia-log „Aktualisieren“. Der Simulator sollte dann in der Liste der installierten Webbrowser erscheinen.


- 5 -

Mit Responsive Layout und In!ow-Elementen arbeitenNachdem Sie sich im letzten Abschnitt mit einigen Grundlagen des Responsive Layouts vertraut gemacht haben, soll es jetzt um die Unterschiede – und Vorteile – der im Folgenden beschriebenen Methode gehen. Der wichtigste Vorteil besteht darin, dass die Kon#guration der Medienbreiten wesentlich einfacher und schneller von der Hand geht, wenn Sie Ihre Seiten mit einem pro-zent-basierten In"ow-Layout realisieren. Die Seite selbst dient dabei als Container für alle Seitenelemente. Wenn Sie dann den Seitencontainer (bzw. die Seite selbst) auswählen und seine Breite ändern, werden alle enthal-tenen Elemente ebenfalls automatisch entsprechend geändert.

Um herauszu#nden, wie das funktioniert, klicken Sie im „Master“-Modus auf den „Standard“-Medienbreite-But-ton und selektieren und löschen Sie das gelbe HTML-E-lement, indem Sie die Backspace- oder Entf.-Taste drü-cken.

Da wir jetzt im In"ow-Layoutmodus arbeiten, führen Sie zunächst einen Doppelklick in den Seitenbereich aus (Sie sehen einen den blinkenden Textcursor in der lin-ken oberen Seitenecke).

Rufen Sie nun den Menüpunkt „Einfügen/HTML-Ele-ment“ auf und platzieren Sie auf diese Art und Weise ein HTML-Element in den Fluss des „page-DIVs“.

Führen Sie einen cmd-Klick auf das eingefügte HTML-E-lement aus, um es auf der Seite zu selektieren. Setzten Sie im Inspektor die Hintergrundfarbe des Elements auf „Gelb“ (belassen Sie die Seitenhintergrundfarbe bei „Cyan“). Setzten Sie die „Breite“ im Maße-Bereich des Inspektors auf „Verfügbar“ – damit füllt das Element die Seitenbreite von 1050px aus.

Klicken Sie nun auf den Button „Tablet: 480“, stellen Sie sicher, dass kein Element auf der Seite ausgewählt ist und ändern Sie die Seitenbreite im „Abmessungen“-Be-reich der Inspektorpalette auf 768px und damit exakt

auf die aktuelle Medienbreite.

Sie haben vielleicht bemerkt, dass die Medienbreite- Überlagerung nicht mehr angezeigt wird. Das liegt da-ran, dass die Seitenbreite nun exakt mit der aktuellen Medienbreite übereinstimmt.

Da für die Breite des HTML-Elements „Verfügbar“ ge-wählt wurde, füllt es automatisch die Breite seines El-tern-Containerelements aus (also der Seite). Da die Sei-tenbreite 768px beträgt, füllt das HTML-Element diese Breite. Sie können alle In"ow-Elemente so kon#gurie-ren, dass sie automatisch die Breite ihres jeweiligen Containers annehmen. Indem Sie also beim Gestalten der Standard-Medienbreite etwas mehr Zeit aufwen-den, können Sie später beim Einrichten des Responsive Layouts wesentlich schneller vorankommen.

Wählen Sie nun das gelbe HTML-Element aus und set-zen Sie seine Hintergrundfarbe auf „Grün“.

Schauen Sie sich nun die Seite in der (Browser-) Voran-sicht an. Sie werden feststellen, dass sie sich genau so verhält, wie bei der Verwendung von absolut positio-nierten Elementen.

Wechseln Sie wieder in den Master-Modus und aktivie-ren Sie den Medienbreite-Button „SmartPhone (Quer-format): 480“. Ändern Sie wieder die Seitenbreite im „Abmessungen“-Bereich der Inspektorpalette auf 480px, die Hintergrundfarbe des HTML-Elements auf „Weiß“ und überzeugen Sie sich in der (Browser-) Voran-sicht, dass auch dieser Breakpoint funktioniert.

Bearbeiten und Löschen von Medientypen

Wenn Sie für einen bestimmten Breakpoint eine Ände-rung an einem Seiten- oder Elementattribut vornehmen wollen, aktivieren Sie den entsprechenden Medienbrei-ten-Button, wählen das betreffende Element aus (bei der Änderung eines Seitenattributs darf kein Element ausgewählt sein) und nehmen die gewünschten Ände-rungen vor.

Die einfachste Möglichkeit, ein Attribut für einen be-stimmten Breakpoint zu löschen, funktioniert folgen-dermaßen: Wählen Sie das Attribut im Bereich „Aktuelle Medienänderungen“ der Inspektorpalette aus und drü-cken Sie die „Backspace“- bzw. „Entf.“-Taste auf Ihrer Tastatur.


- 6 -

Wenn Sie im Bereich „Geänderte Medientypen“ der In-spektorpalette einen Medientyp auswählen und lö-schen, werden alle Änderungen, die Sie für diesen Me-dientyp vorgenommen haben, gelöscht.

Alternativ können Sie den betreffenden Medienbreite-Button aktivieren und dann den Menüpunkt „Seite/Ak-tuellen Medientyp zurücksetzen“ aufrufen. Es erscheint zunächst die Frage, ob Sie das aktuelle Medium löschen wollen, was Sie mit Klick auf „OK“ bestätigen müssen.

Bitte beachten Sie, dass einmal gelöschte Bearbei-tungsschritte nicht wiederhergestellt werden können!

Einrichten eigener MedienbreitenFreeway enthält im Auslieferungszustand bereits eine Reihe gebräuchlicher Medientypen. Sie können aber die vorgegebenen Medienbreiten bearbeiten und ei-gene hinzufügen.

Rufen Sie dazu den Menüpunkt „Bearbeiten/Medienty-pen“ auf. Es erscheint der Dialog „Medientypen bearbei-ten“.

• Andere Medien: Aktivieren Sie den Schalter „Dru-cker“, wenn Sie einen anderen als die bisher verwen-deten Medientypen benutzen wollen. Es gibt viele verschiedene Medientypen, Freeway unterstützt der-zeit die beiden gebräuchlichsten: Bildschirm (Screen) und Drucker (Print). Andere Medientypen (wie Spe-ech, Braille, Projection, Handheld, TV etc.) sind weni-ger sinnvoll, als sie auf den ersten Blick erscheinen: Mobiltelefone identi#zieren sich als Bildschirm-Medi-en (nicht als Handhelds) und Optionen zur Unterstüt-zung visuell beeinträchtigter Anwender werden kaum oder nur schlecht unterstützt. Safari berücksichtigt beispielsweise Speech-Medien nicht, wenn die Opti-onen zur Sprachausgabe und VoiceOver aktiviert sind. Der Print-Medientyp kann verwendet werden, um eine druckbare Version der Website bereitzustellen. Dabei können für den Druck unwichtige Elemente wie beispielsweise die Navigationsleiste weggelassen werden.Es gibt nur einen „Drucker“-Medientyp. Wenn Sie den Schalter aktivieren und „OK“ anklicken, erscheint in der Reihe der Medientypen-Buttons ganz links ein „Drucker“-Button.

• Hinzufügen: Wenn Sie eine neue Bildschirm-Medi-enbreite einrichten wollen, klicken Sie auf den Button „Neu“. In der Liste erscheint ein leerer Eintrag, in den Sie in die Spalte „Breite“ die gewünschte Breite als numerischen Wert eingeben können. Klicken Sie dann daneben in die Spalte „Beschreibung“ und ge-


- 7 -

ben Sie hier den Text ein, mit dem der Button be-schriftet werden soll. Wenn Sie fertig sind, klicken Sie auf „OK“.Im folgenden Bildschirmfoto sehen Sie die Zeile der Medienbuttons, nachdem ein eigener Medientyp hin-zugefügt wurde:

Wenn Sie die Breite oder den Namen eines Medien-typs bearbeiten wollen, rufen Sie wieder den Dialog „Bearbeiten“Medientypen...“ auf, führen einen Dop-pelklick auf die Breite bzw. Beschreibung aus, neh-men die Änderungen vor und klicken auf „OK“.

• Löschen: Um einen der vorgegebenen oder einen eigenen Medientyp zu löschen, wählen Sie den be-treffenden Medientyp im „Medientypen bearbeiten“-Dialog aus und klicken dann auf „Löschen“ und auf „OK“.

Beim Gestalten einer Responsive Site mit Elementen arbeiten

Genau so wie Freeway die CSS-Attribute einer Seite än-dern kann, wenn Sie ein Responsive Layout umsetzen, ist dies auch für Elemente auf einer Seite möglich, die sich bei Erreichen eines Breakpoints ändern sollen.

Weiter unten #nden Sie eine Liste der Elementattribute, die bei Änderung der Medienbreite von Freeway geän-dert werden können.

Um die Attribute eines Elements zu bearbeiten, müssen Sie dieses Element zunächst auf der Seite auswählen und dann die betreffenden Attribute im Inspektor zu-weisen, löschen oder bearbeiten (bzw. wenn es sich um ein „Extended Style“-Attribut handelt, auf der <DIV Sty-le>-Karteikarte des Dialoges „Element/Erweitert...“).

Wichtig: Sie können nur dann mit Medientypen arbei-ten, wenn es sich bei dem ausgewählten um ein Ebe-nen-Element handelt. Für tabellenpositionierte Elemen-te werden die entsprechenden Funktionen nicht ange-boten. Stellen Sie also sicher, dass der CSS-Layout-But-ton bei der Arbeit immer eingeschaltet ist!

Elementattribute, die mit Hilfe von Media Queries (Breakpoints) geändert werden können

Derzeit können bei Erreichen eines Breakpoints folgende Attribute neu gesetzt werden, weitere werden in Zu-kunft möglicherweise hinzukommen:

• Ausrichtung: Bestimmt, wie sich die Ausrichtung des In"ow-Inhalts eines Elements ändert.

• Hintergrund: Legt eine andere Hintergrundfarbe fest.

• Hintergrundbild: Legt ein anderes Hintergrundbild fest.

• Rahmen: Wählen Sie andere Rahmenattribute.

• Clear: Clears kontrollieren, ob andere In"ow-Elemen-te innerhalb eines Text"usses auf derselben Zeile er-scheinen oder nicht. Mit dieser Option können Sie die Clear-Attribute eines Elements bei Erreichen eines Breakpoints ändern.

• Abmessungen: Legen Sie unterschiedliche Element-abmessungen (Breite und/oder Höhe) bei Erreichen eines Breakpoints fest.

• Höhe: Sie können an einem Breakpoint das Höhe-Attribut ändern (Minimum, Flexibel, etc.).

• Rand: Ränder (Margins) funktionieren im Webdesign so ähnlich wie der Innenabstand (Padding), mit dem Unterschied, dass Ränder zu den Elementabmessun-gen hinzuaddiert werden, während Einrückungen innerhalb des Elements vorgenommen werden. Beide Werte können bei Erreichen eines Breakpoints geän-dert werden.

• Min/Max Abmessungen: Zwar verfügen die Breite- und Höhe-Popups von HTML-Elementen nicht über spezi#sche Min/Max-Optionen (unabhängig davon, ob es sich um In"ow-Elemente handelt oder nicht), Sie können aber die entsprechenden Werde im Maße-Bereich der Inspektorpalette festlegen.

• Deckkraft: Die Deckkraft eines HTML- oder Gra#k-elements kann modi#ziert werden,

• Überlauf: Das Überlauf-Attribut (sichtbar, versteckt, rollen, auto) kann bearbeitet werden.

• Innenabstand: Ändern Sie hier bei Bedarf den Pad-ding-Wert für ein Element.

• Position (Absolut oder fest – für Ebenen-Elemen-te): Legt die Position eines Nicht-In"ow-Elements bei Erreichen eines Breakpoints neu fest.

• Schatten: Änderung des CSS3-Schatten-Attributes.

• Anzeigen: Macht ein Element bei Erreichen des Breakpoints unsichtbar. Um ein Element zu verste-cken, wählen Sie es zunächst aus und rufen dann in der Inspektorpalette die Karteikarte „Element-Ausga-beeinstellungen“ auf. Deaktivieren Sie hier den Schal-ter „Anzeigen“.


- 8 -

• Einblenden: Die „Anzeigen“-Option sollte nicht mit der „Einblenden“-Option der Karteikarte „Allgemeine Elementeinstellungen“ verwechselt werden, die für Nicht-In"ow-Elemente existiert. Mit „Einblenden“ le-gen Sie fest, ob ein bestimmtes Element in der Free-way-Benutzerober"äche angezeigt wird. Sie dient zum Ausblenden von im Vordergrund liegenden Ele-mente, damit die Elemente dahinter bearbeitet wer-den können. Auch wenn ein Element in Freeway nicht eingeblendet ist, wird es trotzdem beim Veröffentli-chen immer ausgegeben und ist auf der Website sichtbar.

• Breite: Hier können Sie ein anderes Attribut für die Breite wählen (Fest, Fest %, Verfügbar).

• Extended Style-Attribute: Wenn Sie bei Erreichen eines bestimmten Breakpoints ein Style-Attribut set-zen möchten, können Sie das Element (bzw. den Ele-menttext) auswählen, den Menüpunkt „Element/Er-weitert...“ aufrufen und auf der <DIV STYLE>-Kartei-karte ein Namen-Wert-Paar für den neuen Stil erfas-sen.

2. Responsive CSS Menü-ActionDie CSS-Menü-Action von Freeway 7 bietet nun zusätz-liche Funktionen. So kann das Menü automatisch mit den im Freeway-Dokument vorhandenen Seiten „bevöl-kert“ werden und funktioniert auch in einem Responsi-ve Layout.

Navigationsmenüs automatisch erzeugenDie Option „Navigationsmenü automatisch erzeugen“ in der Actions-Palette ist ein einfacher und schneller Weg, ein Navigationsmenü für eine Website zu generie-ren.

Freeway baut dazu aus den Seiten und Ordner des Site-Panels eine Liste mit Einträgen für Haupt-, Unter- und Submenüpunkte. Damit Freeway diese Liste in der ge-wünschten Reihenfolge erzeugen kann, müssen die Seiten und Ordner in der Site-Seitenleiste in diese Rei-henfolge gebracht werden.

Im folgenden werden Sie durch die Schritte geführt, die zum automatischen Erzeugen eines Navigationsmenüs (wie in der Abbildung) notwendig sind.

Dieses CSS-Menü verfügt über vier Hauptmenüpunkte (Willkommen, Dienstleistungen, Galerien, Kontakt), zwei Untermenüs im Galerien-Menü (Hochzeiten, Por-traits) und drei Aufklapp-Submenüs für Portraits. Damit das gewünschte Menü automatisch entstehen kann, sollten Sie sich im Vorfeld klar machen, welche Menü-punkte über Untermenüs verfügen sollen, da diese in der Site-Palette anders behandelt werden müssen.

Das folgende Bildschirmfoto zeigt die Struktur der Web-site, für die das oben abgebildete Menü automatisch generiert wurde:

Die Seiten Willkommen und Dienstleistungen, die als Hauptmenüpunkte ohne Untermenüs fungieren, sind als unabhängige Seiten im Basisverzeichnis der Website angelegt. Die Kontakt-Seite soll zwar auch als Haupt-menüpunkt ohne Untermenü erscheinen, muss aber aufgrund einer aktuellen Einschränkung in der Freeway-Arbeitsweise, wegen derer einzelne Seiten in der Site-


- 9 -

Liste nicht unterhalb von Ordnern verschoben werden können, selbst in einem Ordner liegen.

Damit die Kontakt-Seite also in eine Position nach dem Galerien-Ordner verschoben werden kann, muss sie in einem eigenen Ordner liegen.

Der Ordner für die Galerien-Seiten enthält auf der nächsten Ebene zwei Elemente: Die Seite Hochzeiten und den Ordner Portrais. Die CSS-Menü-Action macht daraus den Hauptmenüpunkt „Galerien“ mit den Un-termenüs „Hochzeiten“ und „Portraits“.

Der Ordner „Portraits“ enthält wiederum drei Dateien: „Erwachsene“, „Kinder“ und „Schmusetiere“, die als Aus-klapp-Submenüpunkte für „Portraits“ erscheinen.

Die Titel der Seiten, wie sie im Site-Panel aufgelistet sind, werden als Namen für die Menüeinträge verwen-det.

Zusammenfassung:

• Hauptmenü-Elemente müssen im Basisverzeichnis der Website liegen.

• Für jedes Unter- und Submenü müssen Sie einen Ordner in der passenden Hierarchieebene erzeugen und die entsprechenden Elemente in diesen Ordner legen.

• Um ein Hauptmenü-Element zu erzeugen, das über keine Untermenüs verfügt, aber nach einem Haupt-menüpunkt mit Untermenüs einsortiert ist, muss die-ses als einzelne Seite in einem Ordner liegen.

• Alle Seiten und Seitenordner der Site-Palette werden im Menü aufgeführt, sobald die Site erzeugt wurde. (Einzige Ausnahme sind Seiten, die mit Hilfe der ent-sprechenden Action aus dem Menü entfernt wurden, siehe unten).

Hinweis: Automatisch generierte CSS-Menüs verwen-den die Seitennamen als Menüpunkte, wie sie in der Site-Palette und im Inspektor aufgeführt sind. Mit Hilfe der Better Meta-Action (siehe unten) können Sie aber eigene Menütitel festlegen.

Bestimmte Seiten und Ordner nicht im Menü aufführenEs wird immer wieder vorkommen, dass einzelne Seiten bzw. Ordner nicht im automatisch generierten Menü aufgeführt werden sollen. Wenn Sie beispielsweise ein Kontaktformular verwenden, wollen Sie die „Erfolgreich gesendet“- und „Fehler bei der Formularübermittlung“-Seiten bestimmt nicht als eigene Menüeinträge auffüh-ren.

Wenn eine Seite oder ein Ordner nicht im Menü er-scheinen soll, wählen Sie das entsprechende Element im Site-Panel aus und rufen dann entsprechend „Seite/

Seiten-Actions“ bzw. „Seite/Ordner-Actions“ auf und wählen aus dem Ausklappmenü die Action „Aus CSS-Menüs entfernen“.

Wenn Sie sich später entscheiden sollten, die Seite/den Ordner doch wieder ins Menü aufzunehmen, wählen Sie das Element erneut im Site-Panel aus und löschen Sie die Action.

Der Responsive-Bereich der Hauptmenü-EinstellungenKlicken Sie auf auf das Dreieck vor „Responsive“, um die Responsive-Optionen der CSS-Menü-Action aufzudecken.

Die Optionen in diesem Abschnitt werden nur verwen-det, wenn Sie eine Responsive Website bearbeiten, an-sonsten können Sie sie ignorieren.

• Symbol bei Breakpoint zeigen: Bei schmalen Medi-enbreiten kann es vorkommen, dass das CSS-Menü zu breit für dieses Medium (diesen Breakpoint) ist. Des-halb können Sie das Menü so kon#gurieren, dass bei Unterschreiten einer bestimmten Bildschirmbreite stattdessen ein Menüsymbol angezeigt wird. Ein CSS-Menü, das in einem Desktop-Browser so erscheint:

wird dann auf dem Smartphone durch eine Gra#k – z.B. diese:

ersetzt, sobald der Breakpoint, den Sie im „Symbol für Breakpoint zeigen“-Popup ausgewählt haben, er-reicht wird.


- 10 -

• Öffnen-Symbol: Klicken Sie auf das Popup und dann auf „Wählen...“, um eine Gra#k auszuwählen, die bei Erreichen des oben festgelegten Breakpoints anstelle des Menüs angezeigt werden soll. Das Menü wird dann bei Klick auf diese Gra#k als einspaltige Liste eingeblendet, Unter- und Submenüs werden entspre-chend eingerückt:

Diese Liste füllt den kompletten Bildschirm eines i-Phones und anderer Smartphones. Die Farben für Text und Hintergrund der Liste entsprechen den in der CSS-Menü-Action festgelegten. Die Farbe, die o-ber- und unterhalb des Menüs verwendet wird, kön-nen Sie unter „Überlangerungsfarbe“ festlegen (siehe unten).

• Schließen-Symbol: Legen Sie hier das Symbol fest, auf das der Anwender zum Schließen des Menüs kli-cken/tippen soll. Sie können entweder das „Öffnen-Symbol verwenden“ oder ein eigenes wählen.

• Eingangsmenü: Wenn der Besucher auf das Öffnen-Symbol klickt, wird das Menü in die Bildschirmansicht hinein geschoben. Hier können Sie die Richtung fest-legen aus der der Inhalt erscheint. Möglich sind: „von oben“, „von rechts“, „von unten“ und „von links“.

• Überlagerungsfarbe: Legen Sie hier die Farbe fest, in der der Balken mit dem Öffnen-/Schließen-Symbol und der Bereich unterhalb des Menüs dargestellt

werden soll (für den Screenshot weiter oben wurde ein helles Grau verwendet).

• Vertikaler Abstand: Dieser Wert kontrolliert den Ab-stand zwischen den einzelnen Einträgen der einspal-tigen Menüliste.

• Horizontale Einrückung: Legen Sie hier fest, wie weit die Liste vom linken Bildschirmrand eingerückt werden soll. Dieser Wert betrifft sowohl Hauptmenü- als auch Untermenü-Einträge.

Erweiterte Responsive OptionenHinter diesem Eintrag verbergen sich folgende Optio-nen:

• Offset für Schließen-Symbol: Die hier eingetrage-nen Werte wirken sich auf die Positionierung des Schließen-Symbols aus, wenn das Menü angezeigt wird.

• Menü von Kopfzeile absetzen: Dieser Wert kontrol-liert den Abstand zwischen Menükopf mit dem Schließen-Symbol und dem Menü selbst.

Der Responsive-Bereich der Untermenü-Einstellungen

Falls für die Untermenüs der Schalter „Hauptmenü-Ein-stellungen verwenden“ aktiviert ist, gibt es im Respon-sive-Bereich nur eine Option:

• Untermenü einrücken um: Legen Sie hier die Einrü-ckung (in Pixel) fest, um die jede Unter- und Subme-nü-Ebene eingerückt werden soll.

Falls „Hauptmenü-Einstellungen verwenden“ nicht aktiv ist, gibt es zwei weitere Parameter:

• Vertikaler Abstand: Legen Sie hier den oberen und unteren Abstand der Untermenü-Einträge zu den Hauptmenü-Einträgen fest.


- 11 -

• Horizontale Einrückung: Legen Sie hier den linken und rechten Abstand der einzelnen Untermenüein-träge fest.

3. Die Better Meta-ActionDie neue Better Meta-Action stellt fortgeschrittene Funktionen für Social Media-Anwender bereit.

Um die Action zu verwenden, wählen Sie eine Seite im Site-Panel aus und rufen dann den Menüpunkt „Seite/Seiten-Actions/Better Meta“ auf. Falls Sie in den Doku-ment-Einstellungen noch keine Web-Adresse spezi#-ziert haben, werden Sie aufgefordert, dies nachzuholen. Sobald geschehen, stehen folgende Optionen zur Ver-fügung:

• Seitentitel: Geben Sie hier den Titel ein, der für die aktuelle Seite verwendet werden soll. Diesen Titel se-hen Ihre Besucher später als Seitennamen in der Titel-zeile des Browserfensters. Wir empfehlen, bis 70 Zei-chen Schlüsselwort-relevanten Text einzugeben.

Hinweis: Wenn Sie einen anderen Seitentitel in dieses Feld eingeben, wird dieser anstelle des Seitentitels verwendet, der in den „allgemeinen Seiteneinstellun-gen“ der Inspektorpalette und auch im Site-Panel sichtbar ist. So können Sie einen kurzen Titel für au-tomatisch erzeugte CSS-Menüs verwenden und ha-ben dank Better Meta trotzdem die Kontrolle darüber, was in der Titelzeile des Webbrowsers angezeigt wird.

• Beschreibung der Seite: Legen Sie hier den Text fest, der im Description-Meta-Tag der Seite aufgeführt

werden soll. Geben Sie hier eine allgemeine Beschrei-bung des Inhalts Ihrer Site an und verwenden Sie da-für bis zu 155 Zeichen. Längere Texte werden von vie-len Suchmaschinen ignoriert.

• Suchen: Die beiden Optionen in diesem Abschnitt stehen nur für Google Plus-Accounts zur Verfügung. G+ User ID: Geben Sie hier Ihre Google+ ID ein, damit Ihr Name und Avatar in Google Suchergebnissen an-gezeigt werden.G+ Business ID: Geben Sie die Google Plus Business Page ID des Publishers ein, damit dessen Name und Avatar in Google-Suchergebnissen angezeigt werden.

• Facebook und Google+: Die Optionen in diesem Abschnitt beziehen sich auf Facebook- und Google Plus-Accounts.Seitentyp: Legen Sie hier den Typ der Seite fest. Sie haben die Wahl zwischen Website, Artikel und Blog.Titel: Geben Sie Ihrer Seite für Ihr Social Media-Publi-kum einen aussagekräftigen Namen (bis 95 Zeichen lang).Beschreibung: Geben Sie eine bis zu 297 Zeichen lange Beschreibung ein, damit Ihr Social Media-Publi-kum weiß, worum es auf Ihrer Seite geht.Bild: Klicken Sie auf das Popup und dann auf „Wäh-len...“, wenn Sie ein Bild festlegen wollen, das ange-zeigt wird, wenn Besucher Ihre Seite teilen. Empfoh-lene Größe: 1200x630px.Name der Site: Geben Sie hier den Namen Ihrer Web-site ein (nicht die URL!).Seiten-URL: Geben Sie in dieses Feld die vollständige Web-Adresse der Seite ein, einschließlich des Do-main-Namens. Klicken Sie dazu auf das Popup, wäh-len Sie „Andere“ und geben Sie auf der „Extern“-Kar-teikarte des Hyperlink-Dialogs die URL der Seite ein.Facebook Admin IDs: Falls Sie in Ihrem Facebook-Konto Admin-IDs festgelegt haben, geben Sie in die-ses Feld eine Komma-getrennte Liste dieser IDs ein, damit diese Zugriff auf detaillierte Besucherstatistiken erhalten.

• Twitter: Die folgenden Optionen beziehen sich auf Twitter-Konten.Typ: Wählen Sie hier den Typ der anzuzeigenden Kar-te. Sie haben die Wahl zwischen „Übersicht (Mindest-größe 60x60)“, „Übersicht mit großem Bild (min 230x150)“, „Produkt“, „Foto“, „Player“ und „App“.Titel: Geben Sie einen Titel für Ihre Seite ein (max. 95 Zeichen), der Ihrem Twitter-Publikum angezeigt wird.Beschreibung: Geben Sie eine bis zu 297 Zeichen lange Beschreibung Ihrer Seite ein, die beim Teilen Ihrer Seite verwendet wird.Bild: Klicken Sie auf das Popup und dann auf „Wäh-len...“, um das Bild festzulegen, das angezeigt wird, wenn Besucher Ihre Seite teilen.Seiten-URL: Geben Sie in dieses Feld die vollständige


- 12 -

Web-Adresse der Seite ein, einschließlich des Do-main-Namens. Klicken Sie dazu auf das Popup, wäh-len Sie „Andere“ und geben Sie auf der „Extern“-Kar-teikarte des Hyperlink-Dialogs die URL der Seite ein.Urheber-Benutzername: Geben Sie Ihren Twitter-I-denti#kator ein, der auf der Karte verendet werden soll, z.B. @johnnyappleseed.Herausgeber-Benutzername: Geben Sie den Twit-ter-Identi#kator der Site/Firma ein, der auf der Karte verwendet werden soll, z.B. @softpress

4. Die Tabellen-Styler ActionDas Formatieren von HTML-Tabellen war bisher eine zeitaufwändige und nervtötende Angelegenheit, vor allem wenn es sich um eine oder gar mehrere große Tabellen handelte. Mit der neuen Table Styler Action geht es endlich schnell und einfach von der Hand.

Um die Action zuzuweisen, wählen Sie zunächst ein HTML-Tabellenelement auf der Seite aus. Rufen Sie dann „Element/Actions/Tabellen-Styler“ aus. Danach stellt die Actions-Palette folgende Einstellungen bereit:

Hinweis: Alle Abmessungen und Rahmenbreiten wer-den wie gewohnt in der Inspektor-Palette de#niert! Um die vorgenommenen Änderungen zu begutachten, müssen Sie in die Voransicht wechseln!

Abschnitt: Tabelle

• Hintergrundfarbe/Hintergrunddeckkraft: Legt Hin-tergrundfarbe und -deckkraft für die gesamte Tabelle fest.

• Rahmenfarbe/Rahmendeckkraft: Legt Rahmenfar-be und -deckkraft der Tabellenumrandung fest. Die Breite der Umrandung wird aus dem Inspektor für die Tabelle übernommen. Ist dort „0px“ eingestellt, wird gar kein Rahmen dargestellt, ganz gleich, welche Far-be Sie hier auswählen.

Abschnitt: Kopfzellen

• Hintergrundfarbe/Hintergrunddeckkraft: Legt Hin-tergrundfarbe und -deckkraft für die Zellen der Spalte und/oder Zeile fest, die im Inspektor als Kopf für die Tabelle markiert wurden.

• Rahmenbreite/Rahmenfarbe/Rahmendeckkraft: Hier können Sie für Kopfzellen eigene Werte für Rah-menbreite, -farbe und -deckkraft festlegen.

• Fettschrift: Mit diesem Schalter können Sie den Fett-schrift-Modus für Kopfzellen aus- und einschalten.

Abschnitt: Zellen

• Farbe/Deckkraft ungerade Zellen: Legen Sie hier Farbe und Deckkraft für alle ungeraden Tabellenzei-len fest.

• Farbe/Deckkraft gerade Zellen: Bestimmen Sie Far-be und Deckkraft für alle geraden Zeilen.

• Rahmenbreite: Geben Sie hier die Breite des Zell-rahmens vor.

• Farbe oberer/unterer/linker/rechter Rand: Für die vier Kanten des Zellrahmens können hier unter-schiedliche Farben festgelegt werden.

• Deckkraft oberer/unterer/linker/rechter Rand: Entsprechend kann hier die Deckkraft der Kanten des Zellrahmens eingestellt werden.

5. Erweiterte Google Analytics-Action

Die Google Analytics Action unterstützt nun auch „Uni-versal Analytics“. Sobald Sie die Action einer Seite oder einem Ordner zugewiesen haben, werden in der Acti-


- 13 -

ons-Palette folgende Einstellungen sichtbar:

• Tracking ID: Wenn Sie sich unter Google Webmaster Tools für Analytics anmelden, erhalten Sie einen ein-deutigen Tracking Code, der mit „UA-“ beginnt. Geben Sie diesen Code in das Feld „Tracking ID“ ein.

• Zu verfolgende Domains: Geben sie eine Komma-getrennte Liste der zu verfolgenden Domains in die-ses Feld ein. Subdomains werden automatisch ver-folgt, wenn die Hauptdomain eingetragen wurde. Denken Sie daran, diese Domains in Ihren Google A-nalytics-Einstellungen auszuschließen, damit die Links nicht als Refferals aufgeführt werden.

• Erweitertes Link-Tracking: Wenn Sie diesen Schalter aktivieren, erhalten Sie für jeden Link auf einer Seite separate Informationen, auch wenn mehrere Links auf dasselbe Ziel verweisen.

• Downloads verfolgen: Setzen Sie hier ein Häkchen, falls Sie ein neues Ereignis hinzufügen wollen, wenn ZIP- und/oder PDF-Dateien von Ihrer Site herunterge-laden werden.

• Klassischen Code verwenden: Damit erreichen Sie, dass dass sowohl der klassische als auch der Univer-sal-Analytics-Code zu Ihren Seiten hinzugefügt wird. Verwenden Sie diese Einstellung, wenn Sie vorhan-dene Eigenschaften nach Universal Analytics konver-tieren wollen.

• Klassische Tracking ID: Wenn Sie die Option „Klassi-schen Code verwenden“ aktivieren, können Sie in die-ses Feld Ihre von Google erhaltene klassische Tracking ID eintragen.

6. Neue HTML5-Section-Elemente

Figure-ElementDas Figure-Element repräsentiert eine Illustration auf der Website und ist vergleichbar mit einer Abbildung in einem Buch oder einer Zeitschrift. Das HTML-Element enthält entweder ein Gra#k-Element oder ein Gra#k-E-lement mit einer Beschriftung (ein HTML-Caption-Ele-ment, dem das Figure Caption Section-Element zuge-

wiesen wird, siehe unten). Beachten Sie, dass es sich bei dem Figure-Element um das Eltern-Element handelt, das entweder das Bild oder das Bild samt Beschriftung enthält (dem Bildelement selbst wird kein Section-Ele-ment zugeordnet).

Figure Caption-ElementDieses Element kann nur im Zusammenhang mit einem Figure-Element auftreten (siehe oben). Das Figure Cap-tion-Element wird einem HTML-Text-Kind-Element zu-gewiesen, das in ein HTML-Element eingebettet ist, dem wiederum das Figure-Element zugewiesen wurde.

Main-ElementDas Main-Element repräsentiert das HTML-Element, das den Hauptinhalt der Seite enthält. Dieses Element sollte für den Text und/oder Inhalt verwendet werden, der das zentrale Thema der Seite ausmacht.

Bitte beachten Sie, dass Sie pro Seite nur ein einzelnes Main-Element verwenden sollten. Das Main-Element kann keinem Element zugewiesen werden, dem bereits ein Article-, Aside-, Footer-, Header- oder Nav-Element zugewiesen wurde.

Das Main-Element signalisiert einem Screen Reader und anderen Hilfstechnologien, wo der Haupt- und damit relevanteste Inhaltsbereich der Seite beginnt.

7. Neue Tastenkürzel Für alle Anwender, die Dialoge und andere Funktionen gern per Tastatur bedienen, haben wir viele neue Tas-tenkürzel vorgesehen. Auch Funktionen, für die man bisher zur Maus greifen und/oder sich durch Menüs hangeln musste, lassen sich nun per Tastatur bedienen.


- 14 -

Documents

Neu in Freeway 7