Hallo liebe page4 Anwender,

Moderner, größer und noch mehr Möglichkeiten. Lange Monate haben wir daran gearbeitet, Stück für Stück haben wir page4 umgebaut und erweitert. Endlich können wir Euch das Ergebnis präsentieren. Wir hoffen, Euch gefällt es genauso gut wie uns. Unser System page4 in der aktuellen Version 3.0 präsentiert sich in einem völlig neuen Outfit. Die Dialoge sind neu gestaltet, optimiert und bieten mehr Platz. Diesen Platz wollen wir nutzen, um Euch durch Live-Vorschauen beim Gestalten zu helfen. Bei den Designschriften, dem Linien-Content und den Dialogen zum Bearbeiten der Navigation haben wir bereits die ersten Vorschauen eingebaut. Selbstverständlich ist der Dialog so ausgelegt, dass er komplett auf einem Netbook angezeigt wird. Dazu muss man mit der Taste F11 in den Vollbildmodus wechseln da die Größe des Dialoges (960x560px) fast den gesamten Bildschirm ausfüllt.

Nachfolgend ein erster Überblick über unser System 3.0 sowie eine ausführliche Anleitung zum neuen Dialog "Navigation bearbeiten". Mit dieser neuen Funktion seid Ihr in der Lage, das Aussehen der Navigation über Templates beliebig zu verändern. Dadurch ergeben sich komplett neue Möglichkeiten in der Gestaltung Deiner Webseite. Möchtest Du zum Beispiel ein Design vom Layout 001 nutzen, aber Dir gefällt die Navigation nicht, kannst Du einfach ein neues Navigations-Template verwenden (zum Beispiel das aus Layout 1001) um die Optik Deiner Webseite zu verändern. Aktuell sind alle bereits vorhandenen Navigations-Templates verfügbar. Selbstverständlich werden wir die Anzahl der Vorlagen kurzfristig erweitern und weitere Funktionen in diesem Zusammenhang freischalten. So wird es in Kürze die Möglichkeit geben, in der Navigation Icons (kleine Bilder) zu verwenden. Entweder aus unserer Bibliothek oder ganz eigene Bilder. Möchtest Du zum Beispiel, dass vor jeder Seite der Hauptnavigation eine Katzenpfote oder eine Flagge steht, kannst Du dass bald mit wenigen Klicks einbauen. Mehr dazu bei uns im Blog sobald diese Funktion online geht.

page4 - Version 3: Modern, optimiert und vielseitig

Die neuen Dialoge der Version 3.0 sind bewußt schlicht und einfach gehalten um weiterhin zu gewährleisten, dass page4 eines der schnellsten Systeme auf dem Markt bleibt. Alle modernen Browser unterstützen inzwischen CSS3 so dass wir uns entschlossen haben, zukünftig stärker von diesen Möglichkeiten Gebrauch zu machen. Der neue Dialog hat bereits runde Ecken, die durch CSS3-Befehle erzeugt werden (1). Solltest Du diese Rundungen nicht sehen können, verwendest Du wahrscheinlich einen Browser, der diese neuen Möglichkeiten nicht unterstützt. Wir empfehlen Dir auf einen der folgenden Browser umzusteigen: Internet Explorer 9, Firefox 4 oder 5, Opera 11, Safari 5 sowie Chrome 12 oder 13.

1. Wir verwenden für die runden Ecken keine Grafik, sondern CSS3. Wenn Du den Dialog auf Deinem Rechner genauso siehst, dann verwendest du den richtigen Browser um den größten Nutzen aus page4 zu ziehen. Wenn der Dialog "eckig" ist, solltest Du auf einen aktuellen Browser updaten.
2. Natürlich sind die allermeisten Optionen in den Dialog unverändert und genau da, wo Du es kennst. An einigen wenigen Stellen haben wir die Bedienung optimiert, damit das Arbeiten noch schneller von der Hand geht.
3. Nach und nach werden wir dort, wo es Sinn macht, Vorschauen einbauen. Hier im Beispiel Designschriften ist die neue Vorschau bereits eingebaut. Du siehst nun nicht nur einfach die Schrifteinstellung sondern bekommst gleich einen Eindruck, wie die von Dir gewählten Einstellungen auf Deiner Seite wirken. Selbstverständlich ändert sich die Vorschau live, sobald Du eine Einstellung änderst. Mit den Karteikarten (6) kannst du zu den einzelnen Schriftbereichen springen. Diese Funktion haben wir auch in die Vorschau eingebaut. Klickst du auf die Überschrift 2 in der Vorschau springt der Dialog sofort zur entsprechenden Karteikarte und du kannst gleich die Einstellungen ändern. Bis auf den Hover-Effekt gilt das für alle Schrifteinstellungen.
4. Unten im Dialog findest du wie gewohnt die entsprechenden Button zum Speichern oder Abbrechen. Klar und deutlich mit entsprechenden Symbolen versehen und mit einer gut lesbaren großen Schrift.
5. Wo es Sinn machte, haben wir die Icons ausgetauscht. So gibt es nun neue Symbole für die Farbauswahl. Man erkennt an dem grauen Symbol mit dem roten Kreuz sofort, dass man hiermit die Farbinformation entfernen kann.
6. Die Karteikarten-Reiter sind nun schlicht gehalten, nur durch eine horizontale Linie getrennt, in großer klarer Schrift und Farbgebung. Die jeweils aktive Karteikarte ist durch einen blauen Hinweis-Pfeil markiert.
7. Rechts oben wirst Du zur gegebenen Zeit weitere Symbole finden wie eine Online-Hilfe. Wir informieren Dich sobald diese Funktionen verfügbar sind.
8. Links unten findest Du nun die Bezeichnung des Dialogs damit Du immer genau weisst, wo Du dich gerade befindest.

page4 - Version 3: Neu gestaltete Toolbar, gleiche Funktionen

Navigation - die neue Gestaltungsmöglichkeit für Deine Webseite

Mit page4 stellen wir Dir verschiedene Designvorlagen mit unterschiedlichen Navigationen zur Verfügung. Es gibt Vorlagen mit horizontaler Navigation. Um die Unterseiten anzeigen zu können, sind diese Vorlagen mit einem Aufklapp-Menü versehen. Des weiteren haben wir Vorlagen die aus zwei Navigationen bestehen, einer horizontalen und einer vertikalen Version. In diesem Fall wird für die horizontale Navigation nur die Hauptebene benutzt, da die Unterseiten nicht als Aufklapp-Menü erscheinen sondern in der zweiten Navigation angezeigt werden. Du kannst mit dem neuen Navigations-Dialog jede beliebige horizontale Navigation auswählen. Wenn Du solch eine Navigation in einem Design nutzt, welches eine zweite Navigation hat, dann beachte bitte, dass du zwar die Gestaltung der Unterseiten der horizontalen Navigation einstellen kannst, dass diese aber in Deinem Design niemals angezeigt werden, da dafür die zweite Navigation zuständig ist. Die zweite Navigation kann nun mit dem Dialog beliebig angepasst werden was insbesondere die User freuen wird, die etwas dunklere Farben verwenden.
Neben den Designvorlagen mit horizontaler und zusätzlicher vertikaler Navigation gibt es auch Vorlagen, die nur eine vertikale Navigation besitzen. Natürlich kannst Du auch hier die Navigation austauschen.
Zum Start haben wir alle bisher verwendeten Navigationsstile in die Auswahl genommen, im Laufe der Zeit werden neue Vorlagen dazukommen..

Dialog 1. Navigation - Hauptnavigation, hier eine horizontale Navigation

Dialog 2. Navigation - Unternavigation, hier eine vertikale Navigation

Beschreibung des Navigations-Dialogs für den Bereich Auswahl der Navigation

1. Je nachdem welches Design du benutzt, besteht der Dialog aus einem oder mehreren Karteikarten. Für jede verfügbare Navigation ist eine Karteikarte reserviert mit allen dazugehörigen Optionen.
2. Beim ersten Aufruf des Dialogs wird die aktuelle Navigation als Template geladen. Über diese Auswahlbox kannst Du jederzeit eine andere passende Navigation auswählen. Über die Live-Vorschau siehst Du sofort, wie Deine Auswahl aussieht und mit einem Mausklick kannst Du zwischen den Templates wechseln. Die Navigation wird so dargestellt, wie sie auch auf der Webseite zu sehen ist mit dem einen Unterschied, dass wir nicht den Original-Hintergrund (Farbe oder Bild) einblenden. Wenn Du eine Seite mit dunklen Farben nutzt und daher helle Farben in Deiner Navigation benutzt, wirst du ein Problem haben, die Vorschau auf weissem Hintergrund erkennen zu können. Aus diesem Grund hast du die Möglichkeit, den Hintergrund der Vorschau in verschiedenen Graustufen darzustellen (5). Die Änderung der Hintergrundfarbe der Vorschau hat natürlich keinerlei Einfluss auf die Hintergrundfarbe des Navigationsbereichs auf Deiner Webseite.
3. Möchtest du Die Farben Deiner Navigation (und einiges mehr in der Zukunft) anpassen, klickst Du einfach auf den entsprechenden Button. Beachte, dass Du damit natürlich nur die Farben der ausgewählten Navigation (1) änderst.
4. Die Vorschau ist interaktiv. Du kannst mit der Maus über die Vorschau fahren um ein Aufklapp-Menü zu aktivieren oder den Hover-Effekt zu testen. Damit du sofort siehst, welche Bereiche der Navigation wie aussehen, haben wir die Vorschau so gebaut, dass jede Seite genau beschreibt, welchen Zustand sie darstellt. Die Seite "Ebene 2 - Kette" zeigt zum Beispiel das Aussehen der Navigation, welches du der Ebene 2 für den Zustand Chain (Kette) gegeben hast. Du kannst insgesamt 3 Ebenen gestalten. Da Du allerdings beliebig viele Ebenen anlegen kannst, ist es wichtig zu wissen, dass die 4. Ebene und alle weiteren Ebenen das Aussehen der 3. Ebene "erben".
5. Unter der Vorschau siehst Du einen Balken mit verschiedenen Graustufen von weiss bis schwarz. Dieser Balken dient dazu, die Helligkeit des Hintergrundes der Vorschau anzupassen wenn Du zum Beispiel weisse oder helle Farben für die Navigation verwendest. Die Änderung des Hintergrundes hat keine Auswirkung auf den tatsächlichen Hintergrund Deiner Navigation auf der Webseite.

Beschreibung des Navigations-Dialogs - Gestaltung der Navigationsebenen

1. Jede Navigation kann bis in die 3. Ebene gestaltet werden. Verwendest Du mehr als 3 Ebenen (es gibt bei page4 keine Begrenzung) dann erhalten alle weiteren Ebenen das Aussehen der 3. Ebene. Wenn Du eine zweigeteilte Navigation nutzt, wo die Hauptseiten horizontal angeordnet sind, brauchst du die Gestaltung der 2. und 3. Ebene nicht vornehmen, da diese Ebenen in der Hauptnavigation nicht sichtbar werden. Bei einer zweigeteilten Navigation werden alle Unterseiten über die zweite Navigation angezeigt. Der Dialog ist so aufgebaut, das Du in Ruhe alle Farben der Navigation einstellen kannst und dabei jederzeit zwischen den Ebenen wechseln darfst. Erst wenn Du auf den Button "Übernehmen" drückst, werden Deine Einstellungen zwischengespeichert. Verwirfst Du Deine Änderungen, schließt sich der Dialog ohne die Eingaben zu speichern und wechselt zurück zur Auswahl der Templates.
2. Eine Navigation besteht aus bis zu 4 "Zuständen" und zwar Normal, Hover, Kette (Chain) und Aktiv. Eine Erklärung zu diesen Zuständen findest Du direkt auf den jeweiligen Karteikarten. Du kannst bequem zwischen diesen Zuständen über die internen Karteikarten-Reiter wechseln. Deine Eingaben bleiben dabei immer erhalten.
3. Jeder "Zustand" Deiner Navigation besteht aus einem Hintergrund, der Schrift und einem eventuellen Rahmen. Für alle diese Elemente kannst Du hier bequem die Farben anpassen. Löscht Du die Hintergrund-Farbe wird dieser transparent. Bei der Schrift und dem Rahmen ist es nicht möglich, die Farben zu löschen. Möchtest Du eine Navigation ohne Linien, musst du ein anderes Template auswählen oder die Linien "verstecken" indem Du eine entsprechende Farbe wählst.
4. Natürlich siehst Du beim Einstellen Deiner Farben in der Vorschau immer sofort wie das Ergebnis aussiehst. Schneller und einfacher geht es nicht.
5. Wie schon oben erklärt, dient dieser Bereich dazu, den Hintergrund der Vorschau zu ändern, falls Deine Farbeinstellungen schlecht zu erkennen sind, weil Du helle Farben benutzt.
6. Um Dir die Arbeit zu erleichtern, gibt es nun die Möglichkeit, die kompletten Einstellungen einer Ebene zu kopieren. Du kannst also in Ebene 1 alle Farben definieren für alle Zustände der Navigation und dann kannst Du in Ebene 2 diesen Link nutzen, um alle diese Einstellungen aus Ebene 1 zu übernehmen. Dabei werden vorhandene Farben überschrieben. Nach dem Kopieren änderst Du dann nur noch die Farben, die Du in Ebene 2 anders haben möchtest. Genauso kannst Du in Ebene 3 vorgehen und dort die Einstellungen aus Ebene 2 holen. Da für jede Ebene bis zu 12 Farben definiert werden können, spart diese Funktion eine Menge Zeit.
7. Wenn Du zufrieden bis, klicke einfach auf "Übernehmen" und alle Einstellungen aller Ebenen werden übernommen und du kommst zurück in den Dialog zum Auswählen der Templates. WICHTIG: Du musst den ersten Dialog abspeichern, damit Deine Farbauswahl endgültig gespeichert wird. Wenn Du es Dir anders überlegt hast und den Dialog ohne Speichern beendest, bleibt Deine Navigation unverändert. Auf der anderen Seite kannst Du die Farbeinstellungen natürlich jederzeit auf ein anderes Template übertragen indem Du im ersten Dialog einfach ein neues Template auswählst.

Ausblick und eine kleine Bitte

So, genug für diesmal. Nachdem wir das lange geplante "große" Update online haben, wird es in Kürze weitere, "kleine" Updates geben mit vielen zusätzlichen Funktionen und Tools. Parallel dazu wollen wir unsere Webseite noch einmal etwas umbauen. Dazu würden wir gerne 5-10 tolle, mit page4 erstellte Webseiten vorstellen. Wenn Du dabei sein möchtest, dann schreibe uns bitte eine Email mit einem kleinen 3-5 Sätze langen Text, warum Du page4 nutzt und was Dir besonders gefällt. Bitte lege ein Foto von Dir bei, damit wir dieses dann zusammen mit einem Screenshot Deiner Seite, einem Link zu Deiner Seite und Deinem Text veröffentlichen können. Bitte habe Verständnis, dass wir nicht jede Webseite auf unserer Homepage präsentieren können, sondern aus Platzgründen nur eine kleine Auswahl davon.

Mit page4 kann man einfach schöne Webseiten erstellen und das wollen wir zukünftigen Kunden und Interessenten natürlich zeigen. Wir freuen uns auf Eure Zuschriften, bitte an mfs@page4.me schicken und mit einem kurzen Satz bestätigen, dass wir die Erlaubnis haben, Dein Foto, deine Webseite und Deinen Text bei uns zu veröffentlichen und für Marketingzwecke zu nutzen.