Design Manager und Design Module
- Einleitung
- Hintergrund-Farben
- Schriften
- Master Design
- Design Module
- Story und Produkt Vorlagen
- File Editor
- Viewer
- Farbpaletten
- Weitere Einstellungen
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
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.cssdort 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 MonospaceDie Schriften sind geordnet nach:
sans-serif Schriftarten ohne Serifen serif Schriftarten mit Serifen mono Schriftarten mit dicktengleichen ZeichenDie 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
|
|||||
$mainMenus $mainMenuButtons $mainMenuCards
$languageButton |
|||||
$applications | |||||
$subMenuTree $subMenuRows $mainMenuTree $mainMenuRows $iconMenus $shopInfo $searchBox $loginArea $dateANDprofile
|
$content
$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.htmlals 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 - module | Name | Beschreibung (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 - module | Name | Beschreibung (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 - module | Name | Beschreibung (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 - module | Name | Beschreibung (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 - module | Name | Beschreibung (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 BeschreibungenBeide 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_SUBTEXTBei 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 - module | Name | Beschreibung |
$StoryName | Story Name | der Name der Story |
$desc_short | Kurzbeschreibung | die Position der kurzen Beschreibung |
$desc_long | Langbeschreibung | die Position der langen Beschreibung |
$var1 | Variables Feld 1 | die Position des 1. variablen Feldes |
$var2 | Variables Feld 1 | die Position des 2. variablen Feldes |
$var3 | Variables Feld 1 | die Position des 3. variablen Feldes |
$var4 | Variables Feld 1 | die Position des 4. variablen Feldes |
$image1 | Bilder 1 - 20 | die Story Bilder |
$public | public Pfad | Nutzen 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 - module | Name | Beschreibung |
$StoryName | Story Name | der Name der Story |
$storyURL | Story URL | die URL zur eigentlichen Story <a href="$storyURL">$StoryName</a> |
$desc_short | Kurzbeschreibung | die Position der kurzen Beschreibung |
$desc_long | Langbeschreibung | die Position der langen Beschreibung |
$var1 | Variables Feld 1 | die Position des 1. variablen Feldes |
$var2 | Variables Feld 1 | die Position des 2. variablen Feldes |
$var3 | Variables Feld 1 | die Position des 3. variablen Feldes |
$var4 | Variables Feld 1 | die Position des 4. variablen Feldes |
$image1 | Bild 1 | das Story Bild 1 |
$public | public Pfad | Nutzen 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:IDim 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 FlowersBei 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 - module | Name | Beschreibung |
$productname | Produkt Name | der Name des Produktes |
$desc_short | Kurzbeschreibung | die Position der kurzen Beschreibung |
$desc_long | Langbeschreibung | die Position der langen Beschreibung |
$price | Preis | der Produktpreis |
$var1 | Variables Feld 1 | die Position des 1. variablen Feldes |
$var2 | Variables Feld 1 | die Position des 2. variablen Feldes |
$var3 | Variables Feld 1 | die Position des 3. variablen Feldes |
$var4 | Variables Feld 1 | die Position des 4. variablen Feldes |
$image | Bild | das Produkt-Bild |
$stock | Lagerbestand | der Lagerbestand des Produktes |
$partnumber | Artikelnummer | die Arikelnummer des Produktes |
$buybutton | Kauf Button | der Button zum Kaufen des Produktes |
$public | public Pfad | Nutzen 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_TemplateBei 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 - module | Name | Beschreibung |
$productname | Produkt Name | der Name des Produktes |
$productURL | Produkt URL | die URL zu dem eigentlichen Produkt <a href="$productURL"> $productname</a> |
$desc_short | Kurzbeschreibung | die Position der kurzen Beschreibung |
$desc_long | Langbeschreibung | die Position der langen Beschreibung |
$price | Preis | der Produktpreis |
$var1 | Variables Feld 1 | die Position des 1. variablen Feldes |
$var2 | Variables Feld 1 | die Position des 2. variablen Feldes |
$var3 | Variables Feld 1 | die Position des 3. variablen Feldes |
$var4 | Variables Feld 1 | die Position des 4. variablen Feldes |
$image | Bild | das Produkt-Bild |
$stock | Lagerbestand | der Lagerbestand des Produktes |
$partnumber | Artikelnummer | die Arikelnummer des Produktes |
$public | public Pfad | Nutzen 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 schwarzDesweiteren 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 FarbpaletteSie 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 #FFFFFFDiese 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 FarbeWenn 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.sfsin 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>HEXHier 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.