Spd bayern 2016r: Unterschied zwischen den Versionen

Aus WebSoziCMS Handbuch
Wechseln zu: Navigation, Suche
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
Das Layout spd_bayern_2016r ist eine Eigenentwicklung der WebSozis, also nicht an offizielle Layoute angelehnt. Es orientiert sich grob am aktuellen Layout der Bayern-SPD (daher auch der Name), kann aber natürlich auch woanders eingesetzt werden. Der Unterschied zum Layout [[websozis2015_r]] ist zum einen die Farbgebung (helles Blau anstelle Rot) und dass das Menü unterhalb des Kopfbanners liegt, nicht oberhalb.
Das Layout spd_bayern_2016r ist eine Eigenentwicklung der WebSozis, also nicht an offizielle Layoute angelehnt. Es orientiert sich grob am aktuellen Layout der Bayern-SPD (daher auch der Name), kann aber natürlich auch woanders eingesetzt werden. Der Unterschied zum Layout [[websozis2015_r]] ist zum einen die Farbgebung (helles Blau anstelle Rot) und dass das Menü unterhalb des Kopfbanners liegt, nicht oberhalb.
__TOC__
__TOC__
[[Datei:websozis2015_r.png|gerahmt|zentriert|Layout websozis2015_r - in einem Desktopbrowser]]
[[Datei:spd_bayern_2016r.png|gerahmt|zentriert|Layout spd_bayern_2016r - in einem Desktopbrowser]]


Es ist mit allen modernen Browsern kompatibel, lediglich der InternetExplorer muss die Version 9 oder höher haben.
Es ist mit allen modernen Browsern kompatibel, lediglich der InternetExplorer muss die Version 9 oder höher haben.
Zeile 14: Zeile 14:
websozis2015_r ist ein responsives Layout, d.h. die Ansicht passt sich der Auflösung an, mit der die Webseite betrachtet wird. Auf Smartphones wandelt sich beispielsweise die Navigation von einer horizontalen Leiste zu einem Drop-Down-Menü. Bilder (vom System wie auch manuell eingefügte) werden ebenfalls automatisch in der Größe angepasst.
websozis2015_r ist ein responsives Layout, d.h. die Ansicht passt sich der Auflösung an, mit der die Webseite betrachtet wird. Auf Smartphones wandelt sich beispielsweise die Navigation von einer horizontalen Leiste zu einem Drop-Down-Menü. Bilder (vom System wie auch manuell eingefügte) werden ebenfalls automatisch in der Größe angepasst.


[[Datei:websozis2015_r_iphone.jpg|gerahmt|zentriert|Layout websozis2015_r - auf einem IPhone]]
[[Datei:spd_bayern_2016r_iphone.jpg|gerahmt|zentriert|Layout spd_bayern_2016r - auf einem IPhone]]


Das Hauptmenü sollte in Abhängigkeit von der Länge der Menübezeichnungen nicht mehr als 4-5 Menüpunkte auf der ersten Ebene haben. Da sich das Layout der Größe des Ausgabegerätes anpasst kann es ansonsten auf kleineren Ausgabegeräten (Tablets z.B.) zu unschön aussehenden 2-reihigen Hauptmenüs kommen
Das Hauptmenü sollte in Abhängigkeit von der Länge der Menübezeichnungen nicht mehr als 4-5 Menüpunkte auf der ersten Ebene haben. Da sich das Layout der Größe des Ausgabegerätes anpasst kann es ansonsten auf kleineren Ausgabegeräten (Tablets z.B.) zu unschön aussehenden 2-reihigen Hauptmenüs kommen

Version vom 3. März 2016, 11:00 Uhr

Das Layout spd_bayern_2016r ist eine Eigenentwicklung der WebSozis, also nicht an offizielle Layoute angelehnt. Es orientiert sich grob am aktuellen Layout der Bayern-SPD (daher auch der Name), kann aber natürlich auch woanders eingesetzt werden. Der Unterschied zum Layout websozis2015_r ist zum einen die Farbgebung (helles Blau anstelle Rot) und dass das Menü unterhalb des Kopfbanners liegt, nicht oberhalb.

Layout spd_bayern_2016r - in einem Desktopbrowser

Es ist mit allen modernen Browsern kompatibel, lediglich der InternetExplorer muss die Version 9 oder höher haben.

Das Layout erlaubt es, den Menüpunkt "Homepage" (bzw. wie individuell benannt) auszublenden, wenn dieser keinen eigenen Untermenüpunkte hat. Das "Haus-Symbol" in der Menüleiste führt automatisch zur Startseite

Das Layout kann mit in Abhängigkeit vom Menüpunkt wechselnden Header-Bildern eingerichtet werden (nur für die Menüpunkt der ersten Ebene). Dazu ladet ihr die gewünschte Grafik im Tab "Nachrichten und Seiten" bei "Bilder oder MP3s hochladen / ändern" in das WebSoziCMS. Als Suchbegriff im Bereich "Einstellungen" gebt ihr dann die Bezeichnung des Menüpunktes ein. Wichtig: die Grafik muss die absolut gleichen Abmessungen wie das Default-Header-Bild haben. Letzteres wird bei allen Menüpunkten angezeigt, für die kein individuelles Header-Bild definiert ist.

Das Layout unterstützt die Newsbox, diese befindet sich allerdings nicht im Kopfbanner-Bereich wie z.B. im Layout spd2012, sondern oberhalb des Startseitentextes.

Responsives Layout

websozis2015_r ist ein responsives Layout, d.h. die Ansicht passt sich der Auflösung an, mit der die Webseite betrachtet wird. Auf Smartphones wandelt sich beispielsweise die Navigation von einer horizontalen Leiste zu einem Drop-Down-Menü. Bilder (vom System wie auch manuell eingefügte) werden ebenfalls automatisch in der Größe angepasst.

Layout spd_bayern_2016r - auf einem IPhone

Das Hauptmenü sollte in Abhängigkeit von der Länge der Menübezeichnungen nicht mehr als 4-5 Menüpunkte auf der ersten Ebene haben. Da sich das Layout der Größe des Ausgabegerätes anpasst kann es ansonsten auf kleineren Ausgabegeräten (Tablets z.B.) zu unschön aussehenden 2-reihigen Hauptmenüs kommen

Eingebettete Inhalte fremder Quellen (z.B. iframe)

Bei eingebetteten Inhalten anderer Anbieter (z.B. Youtube-Videos, Facebook-Badges oder ähnliches) ist es nicht möglich, diese Inhalte schon systemseits rsponsiv zu machen (im Gegensatz zu den Grafiken/Bildern). Oft ist es möglich, von den Anbietern dieser Dienste auch responsiven Quell-Code zu erhalten. Sollte es das nicht geben besteht die Möglichkeit, diese Inhalte durch etwas zusätzliches HTML nach folgendem Muster responsiv zu machen:

<!-- 16:9-Seitenverhältnis -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3-Seitenverhältnis -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Diese Ergänzungen sind für <iframe>, <embed>, <video> und <object>-HTML-Tags möglich.

Abmessungen

Bildposition Breite Höhe Bildposition Breite Höhe
Logol 90px 90px Kopfbanner 1170px 300px
Blöcke Links Linke Blöcke wandern unter die
Hauptspalte, dort 750px
Blöcke rechts 300px frei
Inhalt mit rechte Blöcke 750px frei Inhalt ohne reche Blöcke nicht vorgesehen

Hinweis: Das Kopfbanner (Headerbild) wird je nach Auflösung aufgrund der Responsivität zusammengeschoben, d.h. Informationen die ganz rechts oder ganz links auf dem Bild sind werden evtl. auf kleineren Bildschirmen nicht angezeigt. Wichtige Informationen sollten daher in der Mitte stehen.

bekannte Probleme

  • beim anlegen einer Seite besteht die Möglichkeit, verschiedene Seitenlayoute auszuwählen. Hier sollten die Seitenlayoute "ohne Tabellen" gewählt werden, da es mit Tabellen zu Darstellungsproblemen kommen kann (die Darstellung mit Tabellen ist sowieso stark veraltet und sollte "neu" generell nicht mehr verwendet werden)

Modifikationen

Ausblenden des Logos

Da das Logo über einen Schatten verfügt reicht es - wie es in anderen Layouten möglich ist - nicht aus, einfach eine transparente Grafik als Logo zu laden. Wenn ihr das Logo ausblenden wollt könnt ihr folgenden Code verwenden (Eingabe im Tab "Einstellungen" bei "Metatags")

<style type="text/css" media="screen, projection">
<!--
#logo {
display:none;
}
-->
</style>

Bootstrap

Das Layout spd_bayern_2016r basiert auf Bootstrap, einem beliebten und weit verbreiteten CSS-Framework. Das hat den Vorteil, dass ihr viele CSS-Hilfsklassen aus dem Framework auch für eigene Inhalte nutzen könnt - z.B. für Tabellen hier: http://holdirbootstrap.de/css/#tables