Fenster Responsive Layout

Menü Home > Formate > Responive Design

Das Fenster Responisve Design wird am rechten Bildschirmrand eingeblendet. Sie können ein "one-row grid" anlegen das sich verschiebt und auf die jeweilige Bildschirmgröße reagiert, also responsive ist.

Mit der Version 11 wurde das Foundation Framework für die Darstellung der Top Navigation implementiert.

Das neue System für das Fenster Responsive Layout in MadCap Flare ist vergleichbar zu dem System das von Zurb Foundation gestaltet wurde.

Folgende Vorteile ergeben sich durch die Nutzung des neuen Systems:

• Das neue MadCap Flare-System ist einfacher. Das Fenster beschränkt sich auf wenige Optionen und Einstellungen.

• Das neue Fenster Responsive Layout besitzt im Gegensatz zum Foundation Framework eine Oberfläche. Im neuen MadCap Flare-System müssen Sie nicht mehr im Quellcode der Topics arbeiten um Einstellungen zu hinterlegen.

• Das Fenster Responsive Layout wird komplett vom XML-Editor unterstützt. Beim Foundation Framework gab es Bereiche, die im XML-Editor unterschiedlich zur Ausgabe angezeigt wurden.

Sowohl das Foundation Framework als auch das neue MadCap Flare-System basieren auf eine 12-Spalten-Grid-System, d. h. eine Zeile kann 12 Spalten für den Inhalt nutzen. Beachten Sie, dass die Spalten Responsiv nur genutzt werden um die Breite des Inhalts zu steuern. MadCap Flare teilt automatisch die gesamte Breite des Bildschirms in 12 gleich breite Spalten auf. Für die Breite einer einzelnen Zelle geben Sie die gewünschte Anzahl an Spalten im Feld Cell Width im unteren Bereich wird der entsprechende Prozentwert angezeigt. Wenn Sie beispielsweise für die Zelle eine Breite von 6 Spalten hinterlegen, entspricht das 50 %.

Zum Vergrößern / Verkleinern auf das Bild klicken

Im Fenster Responsive Layout können Sie in der oberen Leiste die Schaltflächen Web, Tablet und Mobile wählen. Diese sind synchronisiert mit den Einstellungen in den Medien. Wenn Sie also ein bestimmtes Layout im XML-Editor wählen wird das entsprechende Medium auch im Fenster Responsive Layout gewählt.

Wenn Sie mit dem neuen MadCap Flare-System eine neue Formatvorlage anlegen, werden im Stylesheet unter div automatisch die zugehörigen Selektoren angelegt.

1. Fenster Responsive Layout öffnen

2. Schaltfläche New Style... klicken

3. Im Dialog New Style Row das Stylesheet wählen und den Klassennamen eingeben

4. Schaltfläche OK

5. Cursor im XML-Editor positionieren und im Fenster Responsive Layout Schaltfläche Insert Row wählen

6. Layout definieren, mit Klick auf die Schaltfläche Edit können Sie in das Stylesheet wechseln und die Eigenschaften für die Formatvorlage einstellen.