SITEFORUM Design
MasterSets / DesignSets Farben / Hintergrundbilder CSS-Module Master-Design Design-Templates Applikationslinks Design-Module Design-Attribute Design-Tools
SITEFORUM
®
SMART UP YOUR BUSINESS
Diese Zusammenfassung stellt eine Einleitung sowie einen Überblick über die Grundfunktionalitäten und Bereiche von SITEFORUM Designs dar. Je mehr Grundwissen in HTML, CSS sowie XSL vorhanden ist, um so mehr können die nachfolgenden Bereiche sehr stark für individuelle Anpassungen verwendet werden.
www.siteforum.com/design
SITEFORUM MasterSets
SITEFORUM
®
SMART UP YOUR BUSINESS
MasterSets Ein "MasterSet" besteht aus vordefinierten Farben, Schriften, Logos und LayoutZuweisungen. Hierbei stehen verschiedene Kombinationen zur Auswahl. Durch den Import/Export können auch weitere individuelle MasterSets erstellt werden.
DesignSets Nach der Auswahl eines MasterSets stehen anschließend verschiedene Farbvarianten zur Verfügung. Hierbei werden nur 2 CSSModule verlinkt. (Farben und Hintergrundbilder) www.siteforum.com/design
SITEFORUM Farben / Hintergrundbilder
SITEFORUM
®
SMART UP YOUR BUSINESS
Farben Für die individuelle Anpassung der Farbvorgaben gibt es einen "Einfachen Modus", indem auch ohne CSS und HTML-Kenntnisse Zuweisungen vorgenommen werden können. Die Farben sind in die einzelnen Portal-Bereiche unterteilt: - Allgemeine Hintergrund- und Schrift-Farben - Hauptmenüs - Untermenüs - Applikationen - Datum und Profil Box - Newsflash - Story- und Produkt-Templates - Dialoge und Tabellen in Dialogen - Gateway Box (Hauptseite)
CSS-Editor Der CSS-Editor ermöglicht das Definieren von eigenen Klassen, Werten und Eigenschaften. www.siteforum.com/design
SITEFORUM CSS-Module <!DOCTYPE...> <html><head><title>$portalName</title> <meta ....> $metaData $feedLinks <link rel="stylesheet" href="$public/design/design.css" type="text/css" > </head><body>
design.css
colors.css
layout.css
userdefined colors (old colors and fonts)
userdefined layout
modules.css css modules
searchBox.csslink
SITEFORUM
®
SMART UP YOUR BUSINESS
CSS-Module Durch die sehr komplexe Verwendung von CSS-Klassen und Definitionen im gesamten Design ist eine Unterteilung notwendig. Die wichtigste Unterteilung, die auch bei dem Austausch von DesignSets vorhanden ist, ist die Trennung von Farben, Hintergrundbildern und den LayoutZuweisungen. Weiterhin gibt es für die unterschiedlichen Design-Module eigene CSS-Module, die je nach Verwendung von einer globalen "Bibliothek" nur verlinkt oder in das eigene Portal kopiert werden, um dann individuelle Anpassung vorzunehmen.
module link
positionPath.csslink module link
mainMenus.css
Über die @import Funktionalität werden mehrere CSS-Dateien zusammengefasst, so dass am Ende nur die design.css Datei verlinkt wird.
copied module
www.siteforum.com/design
SITEFORUM Master-Design <div id="sfsExample"> <div id="sfsHeader"> $mainMenus $applications </div> <div id="sfsMainContent"> <div id="sfsNavigation"> $subMenuRows $iconMenus $dateANDprofile </div> <div id="sfsContent"> <div id="sfsContentIn">$content</div> </div> </div> </div> $logoLeft
SITEFORUM
®
SMART UP YOUR BUSINESS
Master-Design Im Master-Design wird die Grundstruktur des gesamten sichtbaren Portals definiert. Hierbei werden im HTML-Quellcode die verfügbaren Bausteine "Design-Module" positioniert. Der $content Bereich ist hierbei der Hauptbereich in dem die Inhalte wechseln. Alle weiter zur Verfügung stehenden Platzhalter werden immer in einer Übersicht aufgelistet und beschrieben. Der Quellcode entspricht dem Code zwischen dem <body>-Tags.
$mainMenus
Der HTML Header wird in einem gesonderten Design-Modul definiert.
$subMenuRows $content $searchBox
Generell existiert immer ein Master-Design. Über Design-Attribut-Bedingungen können dann unterschiedliche Master-Designs aufgerufen werden, so dass z.B. im OnlineShop ein ganz anderes Layout-Raster verwendet wird. www.siteforum.com/design
SITEFORUM Design-Templates <div class="sfsStoryContainer"> <div class="sfsStoryTop"> <h1 class="headline">$StoryName</h1> </div> <div class="sfsStoryContent"> <div class="shortDesc">$desc_short</div> <div class="text">$desc_long</div> </div> </div>
SITEFORUM
®
SMART UP YOUR BUSINESS
Design-Templates Für den Hauptbereich ($content) des dynamischen Inhaltes vom Portal können weitere Design-Templates erstellt werden. Diese individuelle Vorlagen stehen dann z.B. den Editoren zur Auswahl und ermöglichen eine Trennung von Inhalt und Design.
$StoryName
$desc_short $image1
$desc_long
$var1
www.siteforum.com/design
SITEFORUM Design-Templates
SITEFORUM
®
SMART UP YOUR BUSINESS
Story-Templates Für die Auflistung von Story-Artikeln innerhalb von einem Menü, wird zwischen Story- und Story-Intro-Templates unterschieden. Ein Story-Template definiert die Darstellung der gesamten Story und wird bei Leadstory-Zuweisungen sowie bei der einzelnen Darstellung einer Story direkt angezeigt.
Story-Intro-Templates Wenn einem Menü mehrere Story-Artikel zugewiesen sind, so werden diese als "Intro" aufgelistet. Ein Intro-Template definiert somit die mehrfache Darstellung mit und ohne Bild, mit einfacher oder komplexer Auflistung. Wenn gleichzeitig dem Menü eine Leadstory zugewiesen ist, so wird zuerst das Story-Template dieser Story als "Kopf" dargestellt und darunter alle weiteren StoryArtikel als Intro aufgelistet. www.siteforum.com/design
SITEFORUM Applikationslinks $mainMenus $applications
$iconMenus $content $searchBox
SITEFORUM
SMART UP YOUR BUSINESS
Applikationslinks Neben den Menüpunkten für den CMS-Bereich und den Katalogen im Shop-Bereich, gibt es eine Vielzahl an Verlinkungen zu SITEFORUM Applikationen. Diese werden als Applikationslinks den einzelnen Bereichen im Gesamtdesign zugewiesen. Eine Steuerung der Hauptposition wird somit über die Zuordnung zu den Design-Modulen bestimmt.
Online Shop | Forum | Blogs | DMS
Weiterhin können sowohl eigene als auch externe Applikationslinks erstellt werden, die auf Links wie z. B. www.google.com verweisen.
P. Manager Persönlicher Bereich
Jedes Design-Modul kann eine unterschiedliche Sortierung mit Menüs und Applikationslinks erhalten.
Home | Aktives Hauptmenü | Inaktives Hauptmenü
Sitemap
®
Beispiel: Start | Shop | Menü = 2 Applikationslinks + 1 Menülink
www.siteforum.com/design
SITEFORUM
SITEFORUM Design-Module Home | Aktives Hauptmenü | Inaktives Hauptmenü Online Shop | Forum | Blogs | DMS
Sitemap
Parameter #1 Beginn <div id="sfsApplications"><ul> Parameter #2 Aktiver Link <li class="active"><a href="$link">$name</a></li> Parameter #3 Inaktiver Link
®
SMART UP YOUR BUSINESS
Design-Module Je nachdem welche Berechtigung der Endnutzer hat, werden ihm dynamisch die Menüpunkte und Applikationslinks angezeigt. Damit für die Auflistung in diesen MenüModulen eine hohe individuelle DesignAnpassung möglich ist, werden für die jeweiligen Module unterschiedliche Parameter zur Verfügung gestellt. Es gibt somit für die Darstellung einer "Menü-Schleife" z.B. Anfangs- und Endparameter, aktive und inaktive Bereiche sowie Trennzeichen.
<li><a href="$link">$name</a></li> Parameter #4 Trennzeichen bei einfachen Darstellungen z.B. | Parameter #5 Ende </ul></div>
Beginn Aktiver Link Trennzeichen Inaktiver Link Trennzeichen Inaktiver Link Ende www.siteforum.com/design
SITEFORUM
SITEFORUM Design-Attribute
®
SMART UP YOUR BUSINESS
Design-Attribute Das eher statisch festgelegte MasterDesign kann durch das Hinzufügen von Design-Attributen sehr stark dynamisiert werden. Diese ermöglichen z.B. die Darstellung von unterschiedlichen Header, Farben oder Newsbereichen in Abhängigkeit von vordefinierten AttributBedingungen. Die Bedingungen lassen eine Vielzahl an Variationen und Kombination zu, z.B. durch $designAttribute:header
$designAttribute:banner
$content
- Menüs - Kataloge - Sprachen - Applikationen - Browser - Domains - Tageszeiten
$designAttribute:news
www.siteforum.com/design
SITEFORUM Design-Tools Farbrechner
px:em Rechner
Bild-Farben, Bildskalierung
SITEFORUM
速
SMART UP YOUR BUSINESS
CSS-Deklarationen
HTML-Sonderzeichen
www.siteforum.com/design