Spdsh2017 r: Unterschied zwischen den Versionen
Mhagge (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Mhagge (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
Das Layout spdsh2017_r lehnt sich an das offizielle Wahlkampflayout der SPD SH zur Landtagswahl 2017 an | Das Layout spdsh2017_r lehnt sich an das offizielle Wahlkampflayout der SPD SH zur Landtagswahl 2017 an | ||
__TOC__ | __TOC__ | ||
[[Datei:spdsh2017_r.png|gerahmt|zentriert|Layout spdsh2017_r - in einem Desktopbrowser]] | [[Datei:spdsh2017_r.png|mini|600px|gerahmt|zentriert|Layout spdsh2017_r - 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. | ||
Das Hintergrundbild im Header-Bereich (der Himmel) kann nicht verändert werden, es ist gemäß dem offiziellem Layout vorgegeben. Das Kopfbanner ist der Linke Teil des Header-Bereiches. Im rechten Teil (roter Hintergrund) wird der Titel eurer Homepage dargestellt. Im linken Teil könnt ihr als Kopfbanner (Abmessungen siehe oben in der Tabelle) ein individuelles Bild einfügen. Beachtet bitte bei der Erstellung des individuellen Kopfbanners, dass die Grafik bei größeren Bildschirmgrößen schräg durch den Titel der Homepage "angeschnitten" wird (bei kleineren Bildschirmgrößen wandert der Titel unterhalb des Kopfbanners) | |||
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 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. | ||
| Zeile 12: | 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:spdsh2017_r_iphone.PNG|gerahmt|zentriert|Layout spdsh2017_r - auf einem IPhone]] | [[Datei:spdsh2017_r_iphone.PNG|mini|250px|gerahmt|zentriert|Layout spdsh2017_r - 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 | ||
| Zeile 40: | Zeile 42: | ||
! Bildposition !! Breite !! Höhe !! Bildposition !! Breite !! Höhe | ! Bildposition !! Breite !! Höhe !! Bildposition !! Breite !! Höhe | ||
|- | |- | ||
| Logol || | | Logol || 205px || 70x || Kopfbanner || 600px || 316px | ||
|- | |- | ||
| Blöcke Links|| colspan="2" align="center" | Linke Blöcke wandern unter die <br /> Hauptspalte, dort 750px || Blöcke rechts || 300px || frei | | Blöcke Links|| colspan="2" align="center" | Linke Blöcke wandern unter die <br /> Hauptspalte, dort 750px || Blöcke rechts || 300px || frei | ||
| Zeile 46: | Zeile 48: | ||
| Inhalt mit rechte Blöcke || 750px || frei || Inhalt ohne reche Blöcke || colspan="2" align="center" | nicht vorgesehen | | Inhalt mit rechte Blöcke || 750px || frei || Inhalt ohne reche Blöcke || colspan="2" align="center" | nicht vorgesehen | ||
|} | |} | ||
== bekannte Probleme == | == bekannte Probleme == | ||
| Zeile 53: | Zeile 53: | ||
== Modifikationen == | == Modifikationen == | ||
=== Bootstrap === | === Bootstrap === | ||
Das Layout websozis2015_r 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 | Das Layout websozis2015_r 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 | ||
Aktuelle Version vom 20. Februar 2017, 20:51 Uhr
Das Layout spdsh2017_r lehnt sich an das offizielle Wahlkampflayout der SPD SH zur Landtagswahl 2017 an
Es ist mit allen modernen Browsern kompatibel, lediglich der InternetExplorer muss die Version 9 oder höher haben.
Das Hintergrundbild im Header-Bereich (der Himmel) kann nicht verändert werden, es ist gemäß dem offiziellem Layout vorgegeben. Das Kopfbanner ist der Linke Teil des Header-Bereiches. Im rechten Teil (roter Hintergrund) wird der Titel eurer Homepage dargestellt. Im linken Teil könnt ihr als Kopfbanner (Abmessungen siehe oben in der Tabelle) ein individuelles Bild einfügen. Beachtet bitte bei der Erstellung des individuellen Kopfbanners, dass die Grafik bei größeren Bildschirmgrößen schräg durch den Titel der Homepage "angeschnitten" wird (bei kleineren Bildschirmgrößen wandert der Titel unterhalb des Kopfbanners)
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.
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 | 205px | 70x | Kopfbanner | 600px | 316px |
| 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 | |
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
Bootstrap
Das Layout websozis2015_r 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
