Design Manager und Design Module



Einleitung, Allgemeine Beschreibung

Auf der Startseite im Bereich "Design & Layout" sehen Sie im unteren Bereich ein Vorschau-Bild des Design Managers. Klicken Sie bitte auf das Bild um den erweiterten Design Manager in einem neuen Fenster zu öffnen. Hier können Sie folgende Einstellungen vornehmen:
  • Erweiterte Farbverwaltung, Farb-Paletten, Farb-Rechner
  • Individuelle Bearbeitung von MasterDesigns und ViewMode für Design-Module
  • Design-Module, Story und Intro Templates, Produkt Templates
  • Individuelle Schrift Einstellungen, Hintergrund Einstellungen
  • HTML - Dateieditor, Export und Import Einstellungen
  • Komplexe Farbverwaltung
Der SITEFORUM Design Manager bietet Ihnen die Möglichkeit mit einfachen Schritten die Schriften, Hintergrundfarben, Layout und Bilder individuell anzupassen.

Logos, Story Bilder, Produkt Bilder und Icons können mit dem integrierten Bild-Browser direkt in das passende Verzeichnis auf den SITEFORUM Server hochgeladen, betrachtet und gelöscht werden.

Anpassungen von DesignTemplates die für das Layout der Storys in SITEFORUM Content wichtig sind, können Sie hier vornehmen.

Der Zugriff auf das Master-Design der Applikationen durch den Design Manager gewährleistet mit den Design-Modulen eine einfache modulare Anpassung des gesamten Layouts. (Menü-Einstellungen, LoginArea, ... etc.).

Alle Bereiche des Design Managers sind erreichbar für das Nutzerrolle "Portal Master" oder einen regulären Nutzer mit "Designer" Status.

Das Interface

Das Layout des DesignManagers ist durch ein Frameset definiert. Es beinhaltet im obersten Frame die Menüleiste, im linken Frame die Symbolleiste, auf der rechten Seite einen Palettenframe, im unteren Bereich einen Informations und Einstellungsframe und in der Mitte den Arbeitsframe.

Die Menü-Leiste
beinhaltet die Menü-Links zu
Hintergrund-Farben | Schriften | Master Design | Design Module | Design Templates | File Editor | Viewer

Symbol-Leiste
Zugriff auf die Einstellungen von:
[B] Hintergrund - Einstellungen
[F] Schrift - Einstellungen
[L] MasterDesign / Layout - Einstellungen
[V] VIEWER - Bildbrowser
[P] Paletten - Auswahl
[C] Farbrechner
[D] DesignManager - Einstellungen


Palettenframe
Darstellung der Farbpaletten wichtig für die Hintergrund- und Schrifteneinstellungen.

Informations / Einstellungsframe
Beinhaltet die Eigenschaften, Buttons und Infomationen für die jeweils ausgewählten Einstellungen.

Arbeitsframe
Das Hauptfenster - Darstellung der jeweils ausgewählten Einstellungen sowie der Übersicht beim Start. In diesem Fenster können Sie auch die SITEFORUM-Applikationen betrachten, erreichbar durch den Link "PREVIEW" in der Menüleiste des PortalManager.

Detaillierte Beschreibung
Beim Start des Erweiterten-DesignManagers öffnet sich im Arbeitsframe eine Übersicht der verschiedenen Einstellungen, die Sie mit diesem DesignManager bearbeiten können. Zu dieser Übersicht gelangen Sie jederzeit durch den Link "Design" in der Menü-Leiste des PortalManagers zurück. Diese Übersicht ist zugleich eine Erklärung der Symbole in der Symbolleiste.


Zum Anfang

Hintergrund-Farben

Die CSS-Technology

Alle Hintergrund Farben die in den Accounts durch CSS-Technology gesteuert werden, können hier angepasst werden. So befindet sich im MasterDesign z.B. die Farbangabe
<tr class="colorMenu"> (alle mit den Anfangsbuchstaben color...)
Die verfügbaren Hintergrund-Farben sind bei den Hintergrund Einstellungen im Arbeitsframe mit Namen und Beschreibung aufgelistet.
Hier können Sie durch klicken auf den Namen in der Liste, die Farbe aktivieren die Sie ändern möchten. Wenn diese aktiviert ist, können Sie anschliessend auf die Farbe im Palettenframe klicken, die Sie zuweisen wollen oder einen hexadezimalen Farbwert direkt eingeben.
Sie können auch parallel dazu die Farbe zuweisen, die in der Liste hinter den anderen Hintergrund-Namen farblich dargestellt ist. Um die Einstellungen zu speichern und in die Accounts zu übernehmen brauchen Sie nur noch den Button "Einstellungen speichern" drücken.
Verwendung finden diese Angaben in den LayouModulen, DesignTemplates und im MasterDesign.

Zu beachten ist hier, die Zuweisung von Style Sheet Namen im MasterDesign mit dem Namen
z.B. <td class="colorMenu">
in der CSS-Datei wird dieser benutzerdefinierte Name mit einem Punkt vor den Namen
.colorMenu { color: #FFFFFF; }
definiert.

Übersicht der Farben

Farb Namen / akt. Farben <td class="colorMenuTop">
body
  BODY HTML Body Der Hintergund der gesamten HTML-Seite sowie Einstellungen zu der Scrollbar des Fensters.
Hintergründe
  colorMenuTop MenuTop Hintergund Die Hintergrund-Farbe von dem menuTop Bereich, Hintergrund-Farbe der Logos.
  colorMenu Hauptmenü Hintergrund Die Hintergrundfarbe der Hauptmenüs.
  colorNavigation Navigations Hintergrund Die Hintergrund-Farbe des Navigation Bereiches.
  colorMenuBottom Bottom Menü Hintergund Die Hintergund-Farbe der Menüs im unterem Bereich.
  colorContent Hauptinhalts-Bereich Die Hintergrund-Farbe des Hauptinhaltes.
  dialogLines Dialog Linien Die Linien, Trennzeichen zwischen einzelnen Bereichen auf den Dialog-Fenstern.
  dialogBorder_0 Dialog Rahmen Die Farbe des Rahmens der Dialoge.
  dialogHead_0 Dialog Kopf Farbe Die Hintergrund-Farbe des Kopfes der Dialog-Fenster, sowie die Farbe der inaktiven Karteikarten der Dialoge und Menüs.
  dialogHead_0a Aktiver Dialog Kopf Die Hintergrund-Farbe der aktiven Karteikarten der Dialoge und Menüs.
  dialogCell_0 Dialog Inhalt Die Hintergrund-Farbe des Dialog Inhaltes.
  dialogListBorder Dialog Listen Rahmen Die Rahmen-Farbe der Dialog-Listen.
  dialogListHead_1 Dialog Listen Kopf Die Hintergrund-Farbe des Kopfes der Dialog-Listen.
  dialogListCell_1 Dialog Listen Die Hintergrund-Farbe der Zeilen von den Listen auf den Dialog-Fenstern.
  dialogBoxBorder Dialog Box Rahmen Die Rahmen-Farbe der Dialog Boxen im Navigation Bereich.

Zum Anfang

Mehrfachauswahl

Wenn Sie mehrere Farben gleichzeitig anpassen möchten, verwenden Sie die Mehrfach Auswahl. Klicken Sie dazu auf den Link [Mehrfach Auswahl] und wählen anschliessend die Farben aus, bei denen Sie eine gleiche Farbe zuweisen möchten. Klicken Sie auf den Button "Auswahl Absenden" und wählen die neue Farbe aus oder geben Sie die neue Farbe als hexadezimale Zahl ein. Nachdem Sie dann die Einstellungen gespeichert haben, werden ihre "nderungen in die Datenbank übernommen und die CSS-Datei wird sofort neu generiert.

Hintergrund-Bilder

Sie können im Bereich Icon-Logo Einstellungen dem Logo#1 und Logo#2 ein Hintegrundbild, sowie dem gesamten Hintergrund ein Bild zuweisen. Wenn Sie weitere Hintergrundbilder verwenden wollen können Sie dies in den Design-Modulen, DesignTemplates und MasterDesign mit den Angaben:
z.B. <td background="$public/logo_images/image_bg.gif">
Desweiteren haben Sie die Möglichkeit ein designSets im FileEditor mit CSS Angaben zu modifizieren und anschließend zu importieren.
Erstellen Sie z.B. eine Kopie des aktuellen DesignSets, der CSS-Datei "design.css" im Verzeichnis "design/designsets" mit dem Anfangsbuchstaben "designset_"
designsets/designset_mydesign.css
dort können Sie folgende Angaben verwenden:
.dialogHead_0
{
background-color: #003366;
background-image:url(/portals/my_portal/logo_images/my_background.gif);
}
Sie können diese Design-Datei bei den DesignSets dann auswählen, nach dem Abspeichern wird das DesignSet importiert. Danach können Sie bei Hintergrund-Farben in einem Inputfeld die Pfadangabe des Hintergrundbildes ändern.
Achten Sie bitte darauf, dass Sie nicht den Platzhalter $public verwenden können.


Zum Anfang

Schriften

Die Schriften in den Applikationen

Alle Schriften die in den Applikationen durch Cascading Style Sheets gesteuert werden, können hier angepasst werden. So befindet sich im MasterDesign z.B. die Farbangabe
<span class="menuTop">MENU-NAME</span>
Die Schriften fontStyle1, fontStyle2, fontStyle3, fontStyle4 und fontStyle5 können zusätzlich verwendet werden und sind nicht im SITEFORUM-Script vorhanden.
Alle verfügbaren Schriften sind bei den Schrift Einstellungen mit Namen und Beschreibung aufgelistet.

Unterteilung:
- Schriften Text
- Schriften Text / Storys
- Schriften Links
- weitere Style Sheets (Forms)

Die vorhandenen Schriften/Farben können in LayouModulen, DesignTemplates und im MasterDesign verwendet werden.
Hier können sie durch klicken auf den Namen in der Liste, die Schrift aktivieren die sie ändern möchten. Wenn diese aktiviert ist, können Sie anschliessend auf die Farbe im Palettenframe klicken, die Sie zuweisen wollen. Sie können auch parallel dazu die Farbe zuweisen, die in der CSS-Liste hinter den Schrift-Namen farblich dargestellt ist.

Durch mehrere Select-Boxen können Sie der ausgewählten Schrift weitere Eigenschaften zuordnen:
- Schriftart (Arial, Helvetica ....)
- Schriftstil (kursiv, .....)
- Schriftgrösse (10pt, 12px ....)
- Schriftgewicht (fett, dünn ...)
- Zeilenhöhe (1.0 em z.B. eine Zeilenhöhe)
- Textdekoration (unterstrichen ....)


Nach der Zuweisung der gewünschten Eigenschaften klicken Sie auf den Button "Einstellungen Speichern".


Nachdem Sie dann die Einstellungen gespeichert haben, werden ihre "nderungen in die Datenbank übernommen und die CSS-Datei wird sofort neu generiert.
Im DesignModule htmlHead der dynamisch generierten HTML Seiten befindet sich ein Link zu dieser CSS-Datei:

<head>
<link rel="stylesheet" href="$public/design/design.css" type="text/css">
</head>

Schrift-Typen

Es gibt verschiedene Typen von Schriften, diese sind wie folgt unterteilt:
Fonts - Texte
Fonts - Texte in Storys
Fonts - Links
Fonts - Formulare und Weiteres

Zum Anfang

Text

Schriften - Text
  naviText Navigations Text Der Schriftstil der Navigations Texte.
  fontFace Dialog Text Der Schriftstil des einfachen Textes auf Dialog-Fenstern.
  fontFaceL Kleiner Dialog Text Der Schriftstil des kleinen Textes auf Dialog-Fenstern.
  fontFaceBig Grosser Text Der Schriftstil des grossen Textes und der Überschriften auf Dialog-Fenstern.
  fontFaceB Fetter Dialog Text Der Schriftstil des einfachen Textes auf Dialog-Fenstern, dick bzw. fett hervorgehoben.
  fontFaceLB Kleiner Fetter Dialog Text Kleiner Dialog Text, Der Schriftstil des kleinen Textes auf Dialog-Fenstern.
  fontFaceOrdersBig Fette Auftrags Überschrift Der Schriftstil der Überschriften von Auftrags Dialogen im Online-Shop.
  fontSearch Hervorgehobener Suchtext Der Schriftstil des hervorgehobenen Suchtextes.

Zum Anfang

Text in Stories

Schriften - Text / Storys
  text Story Text Der Schriftstil des Standart Textes bei Storys.
  textBold Fetter Story Text Der Schriftstil des Standart Textes bei Storys, dick bzw. fett hevorgehoben.
  headline Story Überschrift Der Schriftstil der Überschriften bzw. Titeln von Storys.
  shortDesc Kurze Storybeschreibungen Der Schriftstil von kurzen Story Beschreibungen auf den EinleitungsSeiten bzw. bei Storys.
  fontStyle1 Benutzerdefinierte Schrift #1 Der Schriftstil der benutzerdefinierten Schrift #1.
  fontStyle2 Benutzerdefinierte Schrift #2 Der Schriftstil der benutzerdefinierten Schrift #2.
  fontStyle3 Benutzerdefinierte Schrift #3 Der Schriftstil der benutzerdefinierten Schrift #3.
  fontStyle4 Benutzerdefinierte Schrift #4 Der Schriftstil der benutzerdefinierten Schrift #4.
  fontStyle5 Benutzerdefinierte Schrift #5 Der Schriftstil der benutzerdefinierten Schrift #5.

Zum Anfang

Links

Schriften - Links
  a:link Standart Links Der Schriftstil von Standart Links. Diese Zuweisung ist nur sichtbar wenn keine anderen CSS Stile in die Schriftzuweisung eingreifen.
  a:visited Besuchte Links Der Schriftstil von "besuchten" Standart Links. Diese Zuweisung ist nur sichtbar wenn keine anderen CSS Stile in die Schriftzuweisung eingreifen.
  a:hover Mouse Over Link Effect Der Schriftstil / Schrift-Effekt für Verweise, während der Anwender mit der Maus darüber fährt. Diese Zuweisung ist nur sichtbar wenn keine anderen CSS Stile in die Schriftzuweisung eingreifen. <A class="submenu_0" href="...">link</a>
  a:active Aktive Links Der Schriftstil von "besuchten" Standart Links. Diese Zuweisung ist nur sichtbar wenn keine anderen CSS Stile in die Schriftzuweisung eingreifen.
  menuTop Inaktive Hauptmenüs Der Schriftstil der inaktiven Hauptmenüs.
  menuTopActiv Aktive Hauptmenüs Der Schriftstil der aktiven Hauptmenüs.
  submenus0 Untermenüs Stil #0 Der Schriftstil der Untermenüs. Schriftart 0.
  submenus1 Untermenüs Stil #1 Der Schriftstil der Untermenüs. Schriftart 1.
  submenus2 Untermenüs Stil #2 Der Schriftstil der Untermenüs. Schriftart 2.
  submenus3 Untermenüs Stil #3 Der Schriftstil der Untermenüs. Schriftart 3.
  application Icon Links Der Schriftstil der Icon Links im Navigations Bereich.
  naviLink Navigations Links Der Schriftstil der Links in der Navigation.
  fontFaceC2 Inaktive Karteikarten Der Schriftstil der inaktiven Karteikarten
  fontFaceC1 Aktive Karteikarten Der Schriftstil der aktiven Karteikarten.
  fontFaceA Dialog Links Der Schriftstil der Links in den Dialog-Fenstern.
  fontFaceAL Kleine Dialog Links Der Schriftstil der kleinen Links in den Dialog-Fenstern.
  fontFaceALB Kleine Fette Dialog Links Der Schriftstil der kleinen, fetten Links in den Dialog-Fenstern.
  fontFaceAB Fette Dialog Links Der Schriftstil der dicken, fetten Verweise in den Dialog-Fenstern.

Zum Anfang

Formulare und Weiteres

Weitere Style Sheets (Forms)
  input Formulare Eingabefelder Der Stil und die Größe der Eingabefelder von Formularen.
  select Formulare - Auswahlfeld Der Stil und die Größe von Auswahlfelder, Selectboxen von Formularen.
  textarea Formulare - Textfelder Der Stil und die Größe von Textfeldern in Formularen.

Schrift Eigenschaften

Im Bereich Schriften können Sie jeder Schrift verschiedene Eigenschaften zuordnen:
Schriftfarbe     ( color           )
Schriftart       ( font-family     )
Schriftgröße     ( font-size       )
Schriftgewicht   ( font-weight     )
Schriftstil      ( font-style      )
Text-Dekoration  ( text-decoration )
Zeilenhöhe       ( line-height     )

Schriftfarbe

Verwenden Sie die Farbpaletten des DesignManager oder schreiben Sie direkt in das Input-Feld hexadezimale Farbangaben. (z.B. #003366)

Schriftart (font-family)

Zur Auswahl bei den Schriften stehen die folgende Schriftarten:
Arial, Helvetica, Verdana, sans-serif
Helvetica, Arial, Verdana, sans-serif
Verdana, Arial, Helvetica, sans-serif
Times New Roman, Times, serif
Georgia, Times New Roman, Times, serif
Courier New, Courier, mono
Monospace
Die Schriften sind geordnet nach:
sans-serif  Schriftarten ohne Serifen
serif       Schriftarten mit Serifen
mono        Schriftarten mit dicktengleichen Zeichen
Die Reihenfolge bei mehreren Angaben ist entscheidend.
Ist die erste Angabe verfügbar, wird diese verwendet.
Ist die erste Angabe nicht verfügbar, wird die zweite Angabe verwendet.
Falls die letzte Schriftart nicht verfügbar ist,
wird z.B. eine vorhandene "sans-serif" verwendet.

Weitere Schriftarten können nur über den Import von einem DesignSet oder über externe CSS-Dateien zugeordnet werden.


Zum Anfang

Schriftgröße (font-size)

Verwenden Sie verschiedene numerischen Angaben für ihre Schriftgrößen,
folgende Maßeinheiten stehen zur Verfügung:
absolut mit Masseinheit (abhängig von der Bildschirmauflösung)
px   Pixel      ( 12px  )
pt   Punkt      ( 12pt  )
pc   Pica       ( 1pc   )  1 Pica = 12 Punkt
in   Inch       ( 0.3in )  1 Inch = 2.54 Zentimeter
mm   Millimeter ( 9mm   )  1000 Millimeter = 1/1000 Meter
cm   Zentimeter ( 1.0cm )  100 Zentimeter  = 1/100 Meter

relativ mit Masseinheit
em   Einheit / Schriftgröße des Elements  ( font-size:1.0em; line-height:1.3em )
ex   Einheit / Höhe des Kleinbuchstaben x ( 1.4ex )
%    Prozent / Schriftgröße des Elements  ( 5%    )

relativ ohne Masseinheit
xx-small  winzig
x-small   sehr klein
small     klein
medium    mittel
large     groß
x-large   sehr groß.
xx-large  riesig
smaller   sichtbar kleiner als normal
larger    sichtbar größer als normal


Zum Anfang

Schriftgewicht (font-weight)

Die Dicke und Stärke einer Schrift ist das Schriftgewicht.
Folgende Angaben stehen Ihnen zur Auswahl:
relativ ohne Masseinheit
normal  normal
bold    fett
bolder  extra fett
lighter dünner

relativ mit Masseinheit
100     extra dünn
200
300
400
500     medium
600
700     bold
800
900     extra fett

Schriftstil (font-style)

Hier können Sie den Schriftstil, die Neigung der Schrift verändern.
Folgende Angaben stehen Ihnen zur Auswahl:
normal   normal
italic   kursiv
oblique  kursiv

Text-Dekoration

Hier können Sie die Text-Dekoration, zusätzliche Formatierungen der Schrift zuweisen.
Folgende Angaben stehen zur Auswahl:
none          normal
underline     unterstrichen
line-through  durchgestrichen
overline      überstrichen    (nur IE)
blink         blinkend        (nur NC)

Zeilenhöhe (line-height)

Verwenden Sie verschiedene numerischen Angaben für ihre Zeilenhöhe,
folgende Maßeinheiten stehen zur Verfügung:
absolut mit Masseinheit (abhängig von der Bildschirmauflösung)
px   Pixel      ( 12px  )
pt   Punkt      ( 12pt  )
pc   Pica       ( 1pc   )  1 Pica = 12 Punkt
in   Inch       ( 0.3in )  1 Inch = 2.54 Zentimeter
mm   Millimeter ( 9mm   )  1000 Millimeter = 1/1000 Meter
cm   Zentimeter ( 1.0cm )  100 Zentimeter  = 1/100 Meter

relativ mit Masseinheit
em   Einheit / Schriftgröße des Elements  ( font-size:1.0em; line-height:1.3em )
ex   Einheit / Höhe des Kleinbuchstaben x ( 1.4ex )
%    Prozent / Schriftgröße des Elements  ( 5%    )


Zum Anfang

Mehrfach Auswahl (Zuweisung, Hauptschriftart)

Wenn Sie eine Eigenschaft, so z.B. die Hauptschriftart bei mehreren Schriften gleichzeitig zuweisen möchten, verwenden Sie die Mehrfach Auswahl.
Klicken Sie dazu auf den Link [Mehrfach Auswahl] und wählen anschliessend die Schriften aus, bei denen Sie die gleiche Schriftart zuweisen möchten. Klicken Sie auf den Button "Auswahl Absenden", aktivieren Sie die Eigenschaft "Schriftart" und wählen in der Select-Box eine der Schriftarten aus.


Zum Anfang

MasterDesign

Bei diesen Einstellungen haben Sie eine Auswahl an unterschiedlichen, vordefinierten MasterDesigns. Wenn Sie ein Design durch klicken auf das entsprechende Bild ausgewählt und im unteren Frame durch den Button "Einstellungen Speichern" abgespeichert haben, wird dieses Design für die ausgewählten Nutzer aktiviert.







Die Anordnung einzelner Layout Elemente als Platzhalter (Design-Module) wird im MasterDesign festgelegt. Diese Verteilung der Design-Module können Sie jederzeit über den Link "Bearbeiten" in der Auflistung der MasterDesigns anpassen.



Hier bietet sich auch die Möglichkeit einen Wysiwyg-Editor für das Bearbeiten eines MasterDesigns zu verwenden. Für eine einfache Anpassung des Layouts benötigen Sie hier keine HTML-Kenntnisse.

Bitte klicken Sie im MS Wysiwyg-Editor auf das Icon "Visible Boders", damit Sie eine bessere Ansicht von der Verteilung der SITEFORUM Design-Modulen bekommen.
Sie können die verfügbaren Design-Module in Ihren MasterDesign per drag&drop an unterschiedlichen Stellen platzieren.

Die verfügbaren Design-Module, CSS - Hintergrundfarben und Schriften sowie verschiedene Sonderzeichen werden Ihnen im unteren Frame aufgelisted. Alle diese Elemente können Sie mit HTML im MasterDesign kombinieren.


Zum Anfang

Verwendung der Design Module

$logoLeft $logoBackground $logoRight
$mainMenus $mainMenuButtons $mainMenuCards
$languageButton
$applications
$subMenuTree
$subMenuRows
$mainMenuTree
$mainMenuRows


$iconMenus
$shopInfo
$searchBox
$loginArea
$dateANDprofile

dialogBox
$content
dialog
dialogCards
dialogOrder
dialogTree


homepage
homepageShop

$designAttribute:bannerTop
$newsFlash:ID


$public
$linkAdvancedSearch
$linkHome
$linkSitemap



$bottomMenus


Zum Anfang

Designer ViewMode

Die Sichtbarkeit des aktiven MasterDesign für die Nutzer ist in der Auflistung hervorgehoben. Wenn Sie als Designer ein MasterDesign für sich aktiviert haben, so sind alle Veränderungen in diesen MasterDesign nur für Sie als Designer sichtbar. Es besteht hier die Möglichkeit, dass mehrere Designer an unterschiedlichen MasterDesigns arbeiten und die Nutzer des Portals keine "nderung der MasterDesigns sehen.

Bei einen für Designer aktivierten MasterDesign ist zusätzlich der Link [View Mode] vorhanden. Hier sehen Sie nach dem Klicken auf diesen Link eine vereinfachte Darstellung des MasterDesign mit den verwendeten Design-Modulen. Durch Klick auf den Namen eines LayoutModuls in dieser Ansicht, gelangen Sie direkt zu den Einstellungen des LayoutModuls.



Zum Anfang

Backup

Unter dem Link MasterDesign/Backup kann man das aktuelle MasterDesign, welches für alle Nutzer sichbar ist nochmals Absichern. Dabei wird ein Kopie mit Zeitstempel und Beschreibung unter der MasterDesign-Übersicht zur Auswahl gestellt.



Somit kann jederzeit ein zurückliegender Zustand wiederhergestellt werden.

Desweiteren wird die Datei
design/masterD_backup.html
als Sicherungskopie erstellt, diese wird im FileEditor zum download angeboten und stellt nur einen Quelltext des masterDesigns dar. Bei dem nächsten Absichern einer MasterD wird die html-Datei wieder überschrieben und enthält somit immer nur den Zustand der letzten Absicherung.

Zum Anfang

Design Module

Unterteilung der Design Module

Die Design Module sind Platzhalter für Funktionen die Sie im MasterDesign verwenden können, somit ist das gesamte Design Ihres Portal "modular" und sehr individuell anpassbar.
Unterteilung der Design Module:
  • Menü-Einstellungen
  • Informations-Portlets
  • Weitere wichtige Module
  • Layout Elemente im $content Bereich
  • Weitere Layout Elemente

Nach dem Bearbeiten eines Design Modules klicken Sie bitte auf den Button "Einstellungen Speichern" um Ihre Einstellungen in die Datenbank zu übernehmen. Alle Veränderungen von dem LayoutModul sind für die anderen Nutzer sofort sichtbar, wenn in dem MasterDesign für alle Nutzer das von Ihnen modifizierte Design-Module enthalten ist.

Die verfügbaren CSS - Hintergrundfarben, Schriften und verschiedene Sonderzeichen für das jeweilige Modul werden Ihnen im unteren Frame aufgelisted.



Zum Anfang

Menü Module

$name - moduleNameBeschreibung (Keywords)
Menü-Einstellungen
$applications Applikations Links Die horizontale Linkliste mit den Applikationen. Die Links zu den anderen Accounts.
(Board, Online-Shop, Calendar)
$bottomMenus Bottom Menüs Die Hauptmenüs im unteren Teil ihres MasterDesigns.
(Menü 1, Menü 2)
$iconMenus Icon Menüs Zeigt die speziellen Applikations Links, mit Icon-Symbolen.
(PortalManager, Neuer Beitrag, Meine Aufträge)
$mainMenuButtons Hauptmenü Buttons Zeigt die Hauptmenüs als Buttons / Kästchen.
(Menü 1, Menü 2)
$mainMenuCards Karteikarten Menüs Zeigt die Hauptmenüs in Karteikarten Design.
(Menü 1, Menü 2)
$mainMenuRows Hauptmenü Zeilen Zeigt die Hauptmenüs und Untermenüs im Navigations Bereich ihres MasterDesigns mit horizontalen Linien getrennt.
(mainMenuRows, Zeilen)
$mainMenus Hauptmenüs Die Hauptmenüs im oberen Teil ihres MasterDesigns.
(Menü 1, Menü 2)
$mainMenuTree Hauptmenü Baum Zeigt alle Haupt- und Untermenüs, sowie die Applikationslinks in einer Baumstruktur.
(MenüBaum, Menu1, Menu2, Forum, Online Shop)
$positionPath Positions Pfad Zeigt die aktuelle Menü Position als Pfad.
(Positionspfad)
$subMenuRows Untermenü Zeilen Zeigt die Untermenüs im Navigations Bereich ihres MasterDesigns mit horizontalen Linien getrennt.
(UnterMenü1, UnterMenü2)
$subMenuTree Untermenü Baum Zeigt die Untermenüs im Navigations Bereich ihres MasterDesigns in Baumstruktur.
(UnterMenü1, UnterMenü2)


Zum Anfang

InformationsPortlets

$name - moduleNameBeschreibung (Keywords)
Informations Portlets
$dateANDprofile Datum und Profil Box Zeigt das aktuelle Datum und die Profildaten des Nutzers.
(Heutiges Datum | Nutzername)
$gatewayBox gatewayBox Zeigt kleine, informative Listen zu den einzelnen Applikationen auf der Startseite an.
(gatewayBox)
$loginArea Login Area Zeigt ein kleines Formular für Gäste zum anmelden.
(eMail, Passwort, Neu Registration)
$newsFlash NewsFlash Zeigt den NewsFlash.
(NewsFlash, News)
$searchBox Such-Box Zeigt ein kleines Formular für globale Suche in allen Applikationen, sowie Links zu Sitemap und Erweiterten Suche.
(Suchbegriffe, Sitemap, Storymap, Productmap, Erweiterte Suche)
$shopInfo Shop Info Zeigt kurze Informationen über den Warenkorb im Online Shop und Links zu den zuletzt betrachteten Produkten. (wird nur im Online Shop angezeigt)
(Einkaufskorb, Product-History)


Zum Anfang

Content Module (dialogs, homepage)

In Ihrem MasterDesign können Sie den Platzhalter $content verwenden, dieser Bereich bestimmt die Position des aktiven, wechselnden Inhalts. Es ist die Position der Homepage, StoryTemplates, IntroTemplates und der Dialoge, z.B. die Erweiterte Suche.

Das Design der jeweiligen Design Module, wie z.B. das Dialog - Design oder das Homepage - Design, können Sie auch mit Hilfe eines Wysiwyg-Editors anpassen.

$name - moduleNameBeschreibung (Keywords)
Design Elemente von $content - Bereich
dialog Dialog Zeigt die Haupt-Dialoge im $content-Bereich des MasterDesigns.
(Title, Inhalt)
dialogCards DialogCards Das Design der Dialoge mit Karteikarten-Menüs im oberen Bereich, v.a. in den Accounts Webmail und Kalender.
(Webmail und Kalender)
dialogOrder DialogOrder Das Design der Dialoge vor allem im Online Shop für Nutzer Bestellungen.
(Dialoge, Bestellungen, Einkaufkorb)
dialogTree DialogTree Das Design der Dialog um den Katalog-Baum von Webmail, Dokumenten Manager und Kalender
(Webmail, Dokumenten Manager, Kalender)
homepage Homepage Das Design der Homepage. Platzieren Sie hier den Newsflash, die GatewayBoxen oder das FrontpageLogo.
(Homepage, Newsflash, GatewayBox, Frontpage Logo, Frontpage Story)
homepageShop Online Shop Homepage Das Design der Startseite im Online Shop.
(Shop Homepage, Startseite im Online Shop)
siteMap Sitemap Die Struktur des Portals in einer Übersicht.
(Sitemap)


Zum Anfang

Weitere Module (banner, languageButton)

$name - moduleNameBeschreibung (Keywords)
weitere wichtige Module
$applicationLinks_1 applicationLinks #01 Stellt das Design von Applikationsverweisen innerhalb eines bestimmten Design-Modules dar.
(Applikationsverweise, Applikationslinks)
$applicationLinks_2 applicationLinks #02 Stellt das Design von Applikationsverweisen innerhalb eines bestimmten Design-Modules dar.
(Applikationsverweise, Applikationslinks)
$applicationLinks_3 applicationLinks #03 Stellt das Design von Applikationsverweisen innerhalb eines bestimmten Design-Modules dar.
(Applikationsverweise, Applikationslinks)
$designAttribute:banner Werbebanner Zeigt die Werbebanner.
(Banner, Werbebanner)
$languageButton Sprach Button Zeigt eine Flagge, mit der die Sprache gewechselt werden kann.
([GERMAN], [ENGLISH])
$linkAdvancedSearch Erweiterte Suche Ein Module für einen Text oder ein Bild mit Link zur Erweiterte Suche.
(Erweiterte Suche.)
$linkHome Home Link Ein Module für ein Bild oder Logo als Home Link.
<a href="$linkHome">home</a>
(Home Link)
$linkSitemap Sitemap Link Ein Module um mit einen Link von Texten oder Bildern zur SiteMap bzw. StoryMap zu gelangen.
(Sitemap Link, Storymap Link)
$public public Sie benötigen diese Module für das Einfügen von weiteren Bildern in Ihrem MasterDesign.
<img scr="$public/logo_images/logo.gif">
(Bilder Einfügen)


Zum Anfang

Design Elemente (htmlHead)

$name - moduleNameBeschreibung (Keywords)
weitere Design Elemente
dialogBox Dialog Box Zeigt einen Rahmen um die Icon Menüs, die Login Area bzw. die kleinen Dialoge in der Navigation.
(Dialog Rahmen)
htmlHead MasterDesign HTML Head Der HTML Kopf der dynamisch generierten HTML Seite. Hier können Sie Meta-Tags ändern und JavaScripts einbinden
(MasterDesign, HTML Head, metaTags, JavaScript, CSS)

Zum Anfang

Parameter der Design Module

Jedes dieser Design-Module hat eigene unterschiedliche Parameter.

Wenn Sie z.B. auf das LayoutModul $iconMenus klicken, so befinden sich hier 5 Parameter untereinander aufgelistet, jedes dieser Parameter hat einen Namen und eine Beschreibung.

DialogBox

Der 1. Parameter des Icon Menü Modules ist eine Einstellung für das Anzeigen der DialogBox, den Rahmen um die IconMenüs, über die Auswahl der Radio Button entscheiden Sie z.B. ob ein Rahmen um die IconMenüs angezeigt werden soll oder nicht.
Der 2. bis 5. Parameter ist in einem Textfeld editierbar.
Für jeden dieser Parameter sind nur spezielle Platzhalter verfügbar, nutzen Sie bitte nur die aufgelisteten Platzhalter in den Textfeldern. Sie können in diesen Textfeldern alle verfügbaren CSS Hintergrundfarben und Schriften verwenden. Design-Module wie z.B. $applications als Platzhalter können Sie hier nicht verwenden. Für diese Einstellungen sind HTML-Kenntnisse erforderlich.

Beginn

Der 2. Parameter stellt den Anfang einer HTML Tabelle dar:
<table width="100%" border="0" cellspacing="0" cellpadding="2">
LinkBereich

Der 3. Parameter ist der Link Bereich der sich je nach Anzahl der Icon Links (z.B. Einkaufskorb, Preisliste, Währungsrechner usw. ....) zeilenweise, dynamisch wiederholt.
<tr>
<td width="16" valign="top"><img
src="$icon" width="16" height="16" border="0" alt="$name"></td>
<td width="96%" valign="top"><a
href="$link"><span class="application">$name</span></a></td>
</tr>
Verwenden Sie hier z.B $icon für die Position des Bildes im Quelltext, $link als Platzhalter für die URL des Links und $name als Platzhalter für den Link Namen.

Weitere Einstellungen zu den Icons, Links und den Namen finden Sie bei den ApplikationsLinks im Portalmanager.

Trennzeichen

Der 4. Parameter ist das Trennzeichen zwischen den dynamisch wiederholten Zeilen der Tabelle. Hier ist es z.B. möglich eine zusätzliche Zeile zwischen den dynamischen Zeilen der Link Bereiche einzubinden. Dieses "Trennzeichen" befindet sich nicht hinter der letzten dynamischen Zeile des Link Bereichs.
<tr>
<td colspan="2" height="1" class="color1"><img
src="../images/1x1.gif" width="1" height="1" border="0"></td>
</tr>
Ende

Der 5. Parameter ist hier z.B. der schliessende HTML-Tag der Tabelle.
</table>



Zum Anfang

Export/Import (layout_fts, layout_ftp)

Im Einstellungsbereich des DesignManagers können die DesignModul-Funktionen und ihre Parameter jederzeit als "CSV" Datei gesichert und zu einem späteren Zeitpunkt daraus wiederhergestellt werden.
dm_*_layout_fts.csv - die Funktionen und ihre Beschreibungen
dm_*_layout_ftp.csv - die Parameter der Funktionen und ihre Beschreibungen
Beide Dateien sind für eine Wiederherstellung notwendig.

Zum Anfang

Story und Produkt Vorlagen / Design Templates

Story Templates, Intro Templates, Produkt Templates und Produkt Intro Templates sind Design Vorlagen bzw. Schablonen die mit Platzhaltern und mit HTML-Quelltext das Layout von Storys und Produkten beschreiben.

Die verfügbaren Platzhalter, CSS - Hintergrundfarben, Schriften und verschiedene Sonderzeichen werden Ihnen im unteren Frame aufgelisted.



Zum Anfang

Story Templates

Story Templates bestimmen mit HTML die Darstellungsart einer Story, an welcher Stelle ein bestimmter Teil der Story angezeigt werden soll. Story Templates werden beim Anlegen einer neuen Story, der Story zugewiesen. Voreingestellt existieren die Standard Templates:
STANDARD_WITH_IMAGE
STANDARD_WITHOUT_IMAGE
STANDARD_WITH_IMAGE_RIGHT_WITH_SUBTEXT
STANDARD_WITH_IMAGE_LEFT_WITH_SUBTEXT
Bei dem Erstellen eines neuen oder Modifizieren eines bestehenden Story Templates können folgende Platzhalter in HTML eingebettet werden:

SITEFORUM $names-Module für Ihr Storytemplate
$name - moduleNameBeschreibung
$StoryNameStory Nameder Name der Story
$desc_shortKurzbeschreibungdie Position der kurzen Beschreibung
$desc_longLangbeschreibungdie Position der langen Beschreibung
$var1Variables Feld 1die Position des 1. variablen Feldes
$var2Variables Feld 1die Position des 2. variablen Feldes
$var3Variables Feld 1die Position des 3. variablen Feldes
$var4Variables Feld 1die Position des 4. variablen Feldes
$image1Bilder 1 - 20die Story Bilder
$publicpublic PfadNutzen Sie:
<img src= "$public/product_images/my_image.gif">
für
<img src= "portals/my_portal/product_images/my_image.gif">

Beispiel:
<span class="headline">$StoryName</span>
<br>
<span class="text">$desc_long
<br>
Autor: $var1 </span>
Resultat:
Der Name einer Story die dieses Story Template verwendet, wird als Überschrift mit der Schriftzuweisung des Cascading Style Sheet Typ "headline" dargestellt. Es folgt ein Absatz, dann wird die lange Beschreibung der Story eingefügt. Es folgt ein erneuter Absatz und hinter "Autor:" wird benutzerdefinierte Variable1 ausgelesen.
Verwendet ein Story Template Variablen, so muss die Variable beim Erstellen des Story Templates benannt werden. Die Variable wird dann beim Eingeben einer Story mit diesem Story Template abgefragt.


Zum Anfang

Story Intro und Newsflash Templates

Die Story "Introduction" Templates bestimmen mit HTML die Darstellungsart der Vorstellungsseite eines Menüs und an welcher Position der Inhalt einer Story kurz vorgestellt werden soll.
Introduction Templates werden beim Anlegen eines neuen Menüs, dem Menü zugewiesen. Voreingestellt existieren die Standard Templates "STANDARD" und "NEWFLASH".
Bei dem Erstellen eines neuen oder Modifizieren eines bestehenden Introduction Template können folgende Platzhalter in HTML eingebettet werden:

SITEFORUM $names-Module für Ihr Story Intro Template
$name - moduleNameBeschreibung
$StoryNameStory Nameder Name der Story
$storyURLStory URLdie URL zur eigentlichen Story
<a href="$storyURL">$StoryName</a>
$desc_shortKurzbeschreibungdie Position der kurzen Beschreibung
$desc_longLangbeschreibungdie Position der langen Beschreibung
$var1Variables Feld 1die Position des 1. variablen Feldes
$var2Variables Feld 1die Position des 2. variablen Feldes
$var3Variables Feld 1die Position des 3. variablen Feldes
$var4Variables Feld 1die Position des 4. variablen Feldes
$image1Bild 1das Story Bild 1
$publicpublic PfadNutzen Sie:
<img src= "$public/product_images/my_image.gif">
für
<img src= "portals/my_portal/product_images/my_image.gif">

Beispiel:
<a href="$storyURL"><span class="headline">$StoryName</span></a>
<br>
<span class="text">$desc_short</span>
<br>
<a href="$storyURL">$image</A>
<hr nonshade>
Resultat:
Storys die sich in einem Menü mit diesem Introduction Template befinden, werden mit dem Story Namen als Link zur Story dargestellt.
Nach einem Absatz, folgt die kurze Beschreibung der Story. Es folgt ein erneuter Absatz und das Bild der Story ist der Verweis zur eigentlichen Storyseite.
Bei dieser Auflistung von mehreren Storys befindet sich hinter jeder Story eine horizontale Leiste als Trennzeichen.

Zum Anfang

NewsFlash

Unter dem Administrationslink Inhalt/MenüManager/Newsflash kann man ein Menü als NewsFlash Menü zuweisen. Storys die sich in einem solchem Menü befinden, werden in dem Bereich angezeigt in dem das Design-Module
 $newsFlash:ID 
im MasterDesign oder in dem Layout Element homepage positioniert wird. Das Intro Template Newsflash ist ein System IntroTemplate und kann nicht gelöscht werden.

Produkt Templates

Produkt Templates bestimmen mit HTML die Darstellungsart eines Produktes, an welcher Stelle eine bestimmte Information des Produktes angezeigt werden soll. Produkt Templates werden beim Anlegen eines neuen Produktes, dem Produkt zugewiesen.
Voreingestellt existieren die Standard Templates:
Standard
Mercedes
Sony
Flowers
Bei dem Erstellen eines neuen oder Modifizieren eines bestehenden Produkt Templates können folgende Platzhalter in HTML eingebettet werden:

SITEFORUM $names-Module für Ihr Produkt-Template
$name - moduleNameBeschreibung
$productnameProdukt Nameder Name des Produktes
$desc_shortKurzbeschreibungdie Position der kurzen Beschreibung
$desc_longLangbeschreibungdie Position der langen Beschreibung
$pricePreisder Produktpreis
$var1Variables Feld 1die Position des 1. variablen Feldes
$var2Variables Feld 1die Position des 2. variablen Feldes
$var3Variables Feld 1die Position des 3. variablen Feldes
$var4Variables Feld 1die Position des 4. variablen Feldes
$imageBilddas Produkt-Bild
$stockLagerbestandder Lagerbestand des Produktes
$partnumberArtikelnummerdie Arikelnummer des Produktes
$buybuttonKauf Buttonder Button zum Kaufen des Produktes
$publicpublic PfadNutzen Sie:
<img src= "$public/product_images/my_image.gif">
für
<img src= "portals/my_portal/product_images/my_image.gif">


Zum Anfang

Intro Produkt Templates

Diese "Introduction" Templates bestimmen mit HTML die Darstellungsart der Vorstellungsseite eines Produkt Kataloges und an welcher Position die Infomationen eines Produktes kurz vorgestellt werden sollen.
Introduction Templates werden beim Anlegen eines neuen Produkt Kataloges zugewiesen. Voreingestellt existieren die Standard Templates:
Intro_Mercedes_Template
Intro_BMW_Template
Intro_Flowers_Template
Intro_Sony_Template
Bei dem Erstellen eines neuen oder Modifizieren eines bestehenden Shop Intro Templates können folgende Platzhalter in HTML eingebettet werden:

SITEFORUM $names-Module für Ihr Product Intro Template
$name - moduleNameBeschreibung
$productnameProdukt Nameder Name des Produktes
$productURLProdukt URLdie URL zu dem eigentlichen Produkt
<a href="$productURL"> $productname</a>
$desc_shortKurzbeschreibungdie Position der kurzen Beschreibung
$desc_longLangbeschreibungdie Position der langen Beschreibung
$pricePreisder Produktpreis
$var1Variables Feld 1die Position des 1. variablen Feldes
$var2Variables Feld 1die Position des 2. variablen Feldes
$var3Variables Feld 1die Position des 3. variablen Feldes
$var4Variables Feld 1die Position des 4. variablen Feldes
$imageBilddas Produkt-Bild
$stockLagerbestandder Lagerbestand des Produktes
$partnumberArtikelnummerdie Arikelnummer des Produktes
$publicpublic PfadNutzen Sie:
<img src= "$public/product_images/my_image.gif">
für
<img src= "portals/my_portal/product_images/my_image.gif">


Zum Anfang

File Editor

Alle *.css, *.csv, *.html, *.txt und *.js Dateien in dem design Verzeichnis werden hier aufgelistet und können modifiziert werden. Sie können auch neue statische Dateien dieser Art erstellen. Die index.html Ihres Portal können Sie ebenfalls auf einfache Weise hier bearbeiten.

design.css ist eine CSS-Datei, die aktuelle Cascading Style Sheet Elemente ihres Design enthält und wird dynamisch bei jeder Anpassung von Hintergrundfarben und Schriften erstellt.

design_pman.css ist eine CSS-Datei, die aktuelle Cascading Style Sheet Elemente ihres administrativen Design enthält.

designset_*.css Dateien sind DesignSets die Ihnen zur Farb - Auswahl stehen.

Ordner Struktur

|_my_portal    index.html
  |_design     palette.sfs / design.css / designsets_*.css / .csv

Spezielle Dateien

design/design.css
- die Haupt-CSS Datei
- alle aktuellen Cascading Style Sheet Elemente
- mit jeder Einstellung der Farben und Schriften wird diese Datei neu generiert

design/design_conference.css
- die Cascading Style Sheet Elemente für den Textteil der Conference Applikation

design/designset_x.css
- alle ColorSets bzw. SesignSets
- Kombinationen von Schriften und Farben
- nach einer Auswahl unter designManager/designSets werden diese Dateien importiert
- die benutzerdefinierten DesignSets sind erkennbar durch einen "user-defined" Screenshot

design/palette.sfs
- die benutzerdefinierte Farbpalette mit hexadezimalen Farbwerten

design/masterD_backup.html
- wird nach einem Backup des aktuellen MasterDesigns erstellt
- nur die letzte Rüchsicherung des MasterDesign
- nur HTML-Tags mit Platzhaltern

design/dm_2_0_css_types.csv
- alle Zuweisungen und Beschreibungen von Standard Schriften und Hintergründen

design/dm_2_0_layoutset.csv
- alle MasterDesign mit Beschreibungen

design/dm_2_0_layout_fts.csv
- alle Zuordnungen und Beschreibungen der DesignModule

design/dm_2_0_layout_ftp.csv
- alle Zuordnungen und Beschreibungen der Parameter der DesignModule

dm_2_0_master_set.zip
- *.css, *.csv, *.gif Dateien mit den wichtigsten Einstellungen ihres Design

(global_props.txt)
- wichtige Einstellungen für Icons und Logos

(design/dm_2_0_layout_cst.csv)
- nur ein MasterDesign mit Beschreibung


Zum Anfang

Viewer

Hier haben Sie die Möglichkeit alle lokal vorhandenen Bilder der Art *.jpg, *.jpeg, *.gif und *.swf direkt in die Bild-Verzeichnisse auf den Server zu laden.



Die Bilder werden mit Namen, Bildvorschau, Bildgröße und Dateigröße aufgelistet.

Im Bereich Portal/Datei-Manager haben Sie auch die Möglichkeit mehrere Bilder gleichzeitig mit einer ZIP-Datei hochzuladen.

Um Dateien z.B. aus dem "logo_images" Verzeichnis anzusprechen, muss folgende Verzeichnisstruktur im MasterDesign oder in einen Design-Module eingegeben werden:
<img src="$public/icons/my_image.gif">
In SITEFORUM Studio Templates werden Bilder mit folgender Anweisung angesprochen:
<img src="/$getProperty{parent_public}/icons/my_image.gif">

Color-Pixel-Indentifizierung

Wenn Sie die Maus über das Bild bewegen erscheint ein Fadenkreuz mit dem Sie einzelne Farben aus dem Bild selektieren können. Im unteren Frame des DesignManagers erscheint die Position (x,y) und der RGB Farbwert sowie der hexadezimale Farbwert des ausgewählten Pixels.

Diese ausgewählte Farbe können Sie der benutzerdefinierten Farbpalette zuordnen, indem Sie auf dem Button "Farbe hinzufügen" klicken.

Farbpalette Erstellen

Unter dem Punkt (3) Bild-Farben können Sie sich alle Farben eines Bildes wiedergeben. Die Wiedergabe von allen Farben eines Bildes kann nur bis zu einer maximalen Anzahl von 4096 Bildfarben dargestellt werden, so werden v.a. die Farben eines *.gif Bildes angezeigt. Die Auflistung von allen Farben eines *.jpg Bildes kann somit in dem meisten Fällen nicht dargestellt werden. Von den aufgelistenten Bild-Farben können Sie mit dem Button "Palette Erstellen" eine benutzerdefinierte Farbplatte erstellen.

Alle dieser berechneten Farben sind den Hintergrundfarben und Schriftfarben zuweisbar.

Breite, Höhe, Zoom

Nach dem Anklicken eines Bildes aus der Liste, öffnet sich das Bild in originaler Größe im Arbeitsframe. Nun können Sie aus der Palette im Palettenframe eine andere Hintergrundfarbe wählen. So haben Sie auch die Möglichkeit für ein Logo mehrere Hintergrundfarben zu testen, bevor Sie die Farb-Einstellungen online schalten.

Im unteren Frame finden Sie mehrere Informationen zu dem Bild und der aktuellen Hintergrundfarbe.

Breite

Die Breite des Bildes in Pixel.

Höhe

Die Höhe des Bildes in Pixel.



Zoom

Sie können das Bild in verschiedenen Größen kleiner bzw. größer zoomen.
Der minimale Zoom Wert ist 10% und der maximale ist 800%.



Bild-Editor

Mit dem Bild-Editor können Sie die reale Größe des Bildes anpassen. Geben Sie bitte in das Text-Feld die Breite der gewünschten Größe in Pixel an. Achten Sie darauf, dass die Pixel Breite kleiner als die reale Größe ist, da die Bilder bei einer Vergrößerung unscharf werden. Bei dem Abspeichern wird von dem Bild in originaler Größe ein zusätzliches Abbild erstellt.

Ordner Struktur

|_design                palette.sfs / design.css / designset_*.css / .csv
|_logo_images           .gif / .jpg   Logos / Frontpage Logos
|_product_images        .gif / .jpg   Product Images
|_story_images          .gif / .jpg   Story Images / Newsflash Images
|_icons                 .gif / .jpg   Icons
  |_folder01            .gif          Icons Menu Functions - blue folders
  |_folder02            .gif          Icons Menu Functions - dots and lines
  |_folder03            .gif          Icons Menu Functions - dots
  |_folder04            .gif          Icons Menu Functions - lines
  |_folder05            .gif          Icons Menu Functions - yellow folders
  |_folder06            .gif          Icons Menu Functions - white folders

Zum Anfang

Die Farbpaletten

Mit dem Link Paletten Auswahl auf der Startseite bzw. mit dem Icon der Paletten Auswahl gelangen sie zu den Paletten Einstellungen mit denen Sie unterschiedliche Farbpaletten in den Palettenframe laden können.

Als Auswahl stehen Ihnen vordefinierte Paletten sowie individuell anpassbare Paletten zur Verfügung. Die Anzahl der Palettenspalten zu erhöhen wird nur für das entsprechende Interface des DesignManagers empfohlen. Die unterschiedliche Auswahl der Interfaces können Sie bei den DesignManager Einstellungen vornehmen.
Wichtige Farbpaletten sind hier z.B. die Paletten:
BENUTZERDEFINIERT   - Farbpalette mit benutzerdefinierten Farben
( Bearbeitung durch Paletten Editor,
Farbrechner oder den Viewer )
216 WEBSAFE COLORS  - Farbpalette mit 216 websicheren Farben
SCHWARZ & WEISS     - Farbpalatte mit Grautönen von weiss bis schwarz
Desweiteren besteht die Möglichkeit beliebige Kombinationen von eigenen dynamisch berechneten Farbpaletten zu erstellen. Wählen Sie dazu einen ROT, GRUEN und BLAU Farbwert.



Zum Anfang

Vordefinierte Farbpaletten

Im SITEFORUM DesignManager stehen Ihnen 14 vordefinierte Farb-Paletten, sowie individuell anpassbare Paletten zur Verfügung.
SCHWARZ & WEISS  Grautöne weiss bis schwarz (#FFFFFF-#000000)
ROT              Farben rot bis schwarz     (#FF0000-#000000)
ROT HELL         Farben weiss bis rot       (#FFFFFF-#FF0000)
GRUEN            Farben grün bis schwarz    (#00FF00-#000000)
GRUEN HELL       Farben weiss bis grün      (#FFFFFF-#00FF00)
BLAU             Farben blau bis schwarz    (#0000FF-#000000)
BLAU HELL        Farben weiss bis blau      (#FFFFFF-#0000FF)
ORANGE           Farben gelb bis rot        (#FFFF00-#FF0000)
CYAN             Farben cyan bis schwarz    (#00FFFF-#000000)
CYAN HELL        Farben weiss bis cyan      (#FFFFFF-#00FFFF)
MAGENTA          Farben magenta bis schwarz (#FF00FF-#000000)
MAGENTA HELL     Farben weiss bis magenta   (#FFFFFF-#FF00FF)
GELB             Farben gelb bis schwarz    (#FFFF00-#000000)
GELB HELL        Farben weiss bis gelb      (#FFFFFF-#FFFF00)

Websafe Farbpalette

Die websichern Farben werden in jeder Farb-Palette durch ein erkenntliches Symbol gekennzeichnet.

Als "websafe" Farben gelten alle Farben die sich aus den hexadezimalen Werten
00, 33, 66, 99, CC oder FF zusammensetzen.
Alle möglichen Kombinationen werden in der Farb-Palette "216 WEBSAFE Colors" dargestellt.

Benutzerdefinierte Farbpalette

Dynamische benutzerdefinierte Farbpalette

Sie haben die Möglichkeit beliebige Kombinationen von einer eigenen dynamisch berechneten Farbpalette zu erstellen. Wählen Sie dazu z.B. die Farbwerte:
Farbwert   RGB Farbwert   hexadezimalen Farbwert
ROT        0              00
GRUEN      255            FF
BLAU       255 bis 0      FF bis 00 (hell bis dunkel)
Diese Kombination ergibt eine Farbpalette mit den Farben von Cyan bis Grün.



Feste benutzerdefinierte Farbpalette (palette.sfs)

Im "design" Verzeichnis Ihres Portals befindet sich die Datei "palette.sfs", diese enthält eine Auflistung von hexadezimalen Farben, die mit Zeilenumbruch miteinander getrennt sind. Standard-Inhalt nach der Installation eines Portals ist z.B.:
#000000
#333333
#666666
#999999
#CCCCCC
#EEEEEE
#FFFFFF
Diese einfache Auflistung von Farbwerten kann sehr individuell angepasst werden.
Dazu stehen Ihnen folgende Möglichkeiten zur Verfügung:

- Dynamische Generierung durch alle Farben eines Bildes im Viewer
- Anpassung durch Selektierung einer Farbe eines Bildes im Viewer
- Hinzufügen von Farben durch den Farbrechner (RGB, RGB%, HEX)
- Hinzufügen von Farben der Websafe-Farbliste
- Anpassung über den FileEditor/PalettenEditor

Viewer Color-Pixel-Indentifizierung

Selektierung einer Farbe

Wenn Sie die Maus über das Bild bewegen erscheint ein Fadenkreuz mit dem Sie einzelne Farben aus dem Bild selektieren können. Im unteren Frame des DesignManagers erscheint die Position (x,y) und der RGB Farbwert sowie der hexadezimale Farbwert des ausgewählten Pixels.

Diese ausgewählte Farbe können Sie der benutzerdefinierten Farbpalette zuordnen, indem Sie auf dem Button "Farbe hinzufügen" klicken.

Auszug aller Farben eines Bildes

Unter dem Punkt (3) Bild-Farben können Sie sich alle Farben eines Bildes wiedergeben. Die Wiedergabe von allen Farben eines Bildes kann nur bis zu einer maximalen Anzahl von 4096 Bildfarben dargestellt werden, so werden v.a. die Farben eines *.gif Bildes angezeigt. Die Auflistung von allen Farben eines *.jpg Bildes kann somit in dem meisten Fällen nicht dargestellt werden. Von den aufgelistenten Bild-Farben können Sie mit dem Button "Palette Erstellen" eine benutzerdefinierte Farbplatte erstellen.

Alle dieser berechneten Farben sind den Hintergrundfarben und Schriftfarben zuweisbar.

Zum Anfang

Websafe-Überblick

Alle 216 websicheren Farben werden hier dargestellt und mit RGB, hexadezimal sowie prozentualen Farbangaben aufgelistet.
Diese websafe Farben können mit der CheckBox-Auswahl vor der Farbe markiert und am Ende der Liste der benutzerdefinierten Farbpalette zugewiesen werden.

Paletten-Editor

Mit dem Paletten-Editor können Sie die Farbwerte für die benutzerdefinierte Farbpalette bearbeiten, sortieren und löschen. Diese Farbwerte werden in der Datei:
../portals/my_portal/design/palette.sfs
in einer einfachen Auflistung gespeichert.
Bitte verwenden Sie im Paletten Editor nur hexadezimale Farben, mit Zeilenumbruch (Enter Taste) getrennt und nutzen Sie keine Freizeichen.

Klicken Sie danach auf den Button "Speichern" um Ihre Angaben in die Palette zu übernehmen. Klicken Sie auf den Button "Löschen ?" um alle eingegebenen Farbwerte zu löschen.



Zum Anfang

RGB-Farbrechner

RGB>HEX

Hier haben Sie die Möglichkeit RGB Farbwerte in Hexadezimalwerte umzurechnen und anzeigen zu lassen. Geben Sie z.B. den Rotwert 0, den Grünwert 51 und den Blauwert 102 in die drei Felder des Farbrechers ein und klicken anschliessend auf den Button "Aktualisieren" so wird im rechten Farbfeld des Rechners die gewünschte Farbe dargestellt. Verwenden Sie bitte nur Farbwerte von 0 bis 255.
Die prozentuale Angabe von Rot, Grün und Blauwert wird in der 2. Zeile und in der 3. Zeile der hexadezimale Farbwert dargestellt.

Jede berechnete Farbe können Sie der benutzerdefinierten Farbpalette durch einen Klick auf den Button "Farbe hinzufügen" hinzufügen.

RGB%>HEX

Bei diesem Farbrechner können Sie eine hexadezimale Farbe durch Eingabe von Prozent-Werten berechnen und anschliessend der benutzerdefinierten Farbpalette hinzufügen.
Verwenden Sie bitte nur Prozent-Werte von 0 bis 100.

HEX>RGB

Bei diesem Farbrechner können Sie RGB-Farbwerte durch Eingabe von hexadezimalen Farbwerten berechnen und anschliessend der benutzerdefinierten Farbpalette hinzufügen.
Verwenden Sie bitte nur Kombinationen von 0 1 2 3 4 5 6 7 8 9 A B C D E F.



Zum Anfang

Weitere Einstellungen

Einstellungen im Design Manager

Bei den Einstellungen des DesignManager haben Sie verschiedene Möglichkeiten Ihr Design zu sichern und können unterschiedliche Layouts für den DesignManager auswählen.

Im aktivierten Zustand von "SuperUSER" der Erweiterten Einstellungen des DesignManagers, können Sie neue CSS Typen erstellen, den vorhandenen Typen neue Parameter Eigenschaften zuordnen und die Typen löschen und anpassen. Sie können MasterDesigns löschen und bei den MasterDesign sowie bei den DesignModulen die Namen und die Beschreibungen editieren.
Es wird jedoch darauf hingewiesen, dass die Einstellungen in diesen Bereichen nur für erfahrene Nutzer geeignet ist, da diese Ihrem Design und Layout - System schaden können.

Interfaces für den DesignManager

Für den DesignManager stehen unterschiedliche Interfaces zur Verfügung, diese können Sie hier auszuwählen.
Sie sind geeignet für den MS Internet Explorer sowie Netscape Browser.
FACE1      - mit einem Farbbalken im Palettenframe
FACE2      - mit zwei Farbbalken im Palettenframe
FACE3      - mit einem extra langen Farbbalken im Palettenframe
FACE800px  - mit sechs Farbbalken im Palettenframe,
             bei dieser Einstellung beträgt die Breite
             des Arbeitsframes 800 Pixel (- Scrollbar) und ist somit
             nur für eine Auflösung ab 1024x786px geeignet
FACE1024px - mit 3 Farbbalken im Palettenframe,
             bei dieser Einstellung beträgt die Breite
             des Arbeitsframes 1024 Pixel (- Scrollbar) und ist somit
             nur für eine Auflösung ab 1152x864px geeignet

Zum Anfang

Wichtige Browser Einstellungen

Die Browser nehmen wichtige Dateien, darunter auch die design.css und Bilder in den Cache, einen Zwischenpuffer.
Dadurch sind manche Veränderungen bei den Einstellungen im Design nicht sofort sichtbar. Bitte stellen Sie, für eine korrekte Darstellung der Anpassungen im DesignManager, ihren Browser mit folgenden Angaben ein:

MS Internet Explorer

"Neuere Versionen der gespeicherten Seiten suchen: Bei jedem Zugriff auf die Seite".

Opera

"Auf Veränderungen überprüfen:"
Dokumente = immer
Bilder = immer
Andere Dateien = immer

Netscape

"Die Seite im Cache mit der Seite im Netzwerk vergleichen: Immer beim /ffnen der Seite"

Bei allen Browser kann man auch zusätzlich die Grösse des Cache einstellen, bitte wählen Sie hier eine möglichst geringe Grösse (0 KB) aus.


Kontakt

anuvito GmbH
Mathias Möller
design@anuvito.com

Telefon

+49 170 8979649

Skype

Name: anuvito

Cookie-Policy

Cookies helfen uns bei der Bereitstellung unserer Dienste und bei der Funktionalität der Website. Bitte geben Sie uns die Erlaubnis welche Cookies wir setzen dürfen: