SITEFORUM Design Introduction (german)

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.