Template erstellen

 

One.com Forum und Tutorial

Lösungen sind meist ganz einfach - wenn man sie kennt

 

Template aufbauen

 

 

Hier die Anleitung, wie man am schnellsten ein neues, eigenes Template erstellt. Voraussetzung, man hat nur noch die Form, also ein leeres Template vor sich . (siehe Template leeren)

 

Vorab zur Erläuterung: Wenn man eine neue Seite des Projektes erstellen will, kann man jederzeit ein anderes Template nutzen. Geht man links auf das register "Seiten" kann man ja oben über den Button "Neue Seite (Kopie)" eine neue Seite erstellen. Über den Auswahlpfeilrechts neben dem Button, kann man auch ein anderes Template auswählen. Am Anfang gibt es nur die Auswahl zwischen den One-Com-Templates und den leeren Templates, die dir nur eine Grundaufteilung der Website bieten. Das Register "Meine Templates" ist noch leer. Erst wenn du an einem der bereitgestellten und benutzten Templates Änderungen vorgenommen hast, wird dir dieses unter "eigene Templates" angezeigt.

Hast du bereits eigene Templates, kannst du eines davon kopieren. Leider nicht benennen, was für Fälle in denen sich die Templates sehr ähneln, gut wäre.

 

Zuerst sollte man hier kurz die Grundeinstellungen des Templates bei Bedarf korrigieren. Hier sind eigentlich nur zwei Einstellungen wichtig: Der Hintergrund (Bild, Farbe oder Farbverlauf) und der Abstand, welcher bei den meisten Templates vor allem oben relevant ist, den man aber auch auf null stellen kann. (Das ist Abstand zwischen Oberkante Editor (später Browser) und dem gepunkteten Bereich deiner Website) Das kann man natürlich bei Bedarf auch jederzeit machen – dann wird es aber schwieriger und sehr viel aufwändiger, weil man, bedingt durch die Layertechnologie, dann alle Elemente der Seite neu ausrichten müsste.

Regulär sind die Templates immer mittig ausgerichtet, man kann aber auch eine links- oder rechtsseitige Ausrichtung festlegen. (Der Begriff Box steht für Hintergrundelement - ich war zu faul die Grafik, die noch aus der Beschreibung des alten Editors stammt, neu zu machen)

 

 

 

Oben seht ihr eine mögliche Aufteilung einer Webseite.

 

Genau diese Variante werde ich jetzt aufbauen und auch für dieses Projekt verwenden.

Ohne den rechten Seitenbereich ist es natürlich deutlich einfacher, aber ihr kennt das sicher als typische Variante in Blogs.

 

Man kann den Seitenbereich sehr gut für weitere Menüs, Links oder auch Werbung nutzen.

 

Noch ein kleiner Tipp vorher: Macht es einfach wie ich es beschreibe – spart euch die Zeit zu experimentieren, wenn ihr es eilig habt. Aber bitte erst lesen und dann loslegen.

 

Als erstes aktiviere ich links das Register „Komponenten“ und ziehe mir ein Hintergrundelement in mein Template. Wenn ich über dem Websitenbereich auf der rechten Seite bin, wird das neue Element sichtbar und ich brauche nur loslassen – fertig. dann noch schnell die Größe anpassen und ausrichten. Fertig. Lasst euch nicht durch irgendwelche plötzlich sichtbaren Linien verwirren.

 

Das ist der Hintergrund für meine Kopfzeile. Es kann Sinn machen dem Hintergrund gleich eine Farbe zu zuweisen, damit man besser arbeiten kann, weil man bei der Anpassung weiterer Elemente die man einfügt, dann die Begrenzung erkennt. Der Hintergrund fungiert ja gleichzeitig als Container für andere Elemente die eingefügt werden, wie z. B. Text und passt sich in der Größe an diese an. Jetzt gleich die max. Größe, vor allem die Höhe, für die Kopfzeile festlegen und einstellen.

 

Genau so verfahre ich mit den Bereichen für das Menue und den rechten Seitenbereich. Zwar könnte ich auch gleich das Menueelement einfügen, aber durch den Hintergrund habe ich bei Bedarf zusätzlichen Gestaltungsspielraum in Bezug auf die Farbgestaltung.

 

Anschließend positioniere ich das Menueelement in den linken Hintergrund und ein Textelement in den rechten Seitenbereich. Dabei positioniere ich es so, das rundum ein kleiner Rand entsteht. Damit kann ich es farblich abheben und die Elemente bei Bedarf auch direkt auswählen, weil sie sich nicht komplett überdecken.

 

Das Menue anpassen:

 

Da sich jetzt alle Elemente auf verschiedenen Ebenen befinden, muss man die Breite für das Menue gleich korrekt auf die maximale Breite festlegen. Ansonsten muss man bei langen Seitennamen der Unterseiten die Menuebezeichnung für die Unterseiten entsprechend so wählen, dass diese im Menue Platz haben. Also mal kurz überlegen wie lang die Bezeichnung für die längste Unterseite wird.

Am besten man speichert jetzt mal und erstellt durch Kopieren eine Seite mit dem längsten zulässigen Namen. Damit wird diese im Menue angezeigt und man kann die Menue-Breite unter Berücksichtigung der Schriftart, - größe etc. perfekt einstellen.

rechten Seitenbereich anpassen:

 

Für den rechten Seitenbereich stelle ich 160px ein – Standard für Google-Werbung und richte diese exakt am rechten Rand aus.

 

Contentbereich einrichten:

 

Um den Contentbereich zu definieren, wechselt man über den Tab "Seite bearbeiten", in den Seitenbereich. Alle hier definierten Elemente liegen auf Ebenen, die über den im Template definierten Elementen liegen - überdecken diese also im Fall des Falles.

Auch hier lege ich mir zuerst ein Hintergrundelement an und fülle das anschließend mit einem Textelement, dem ich ebenfalls rundum einen kleinen Abstand zum Hintergrund gebe. Dem Textelement weise ich per Mauszug gleich eine gewisse Größe zu, so dass genügend Inhalt hineinpasst. Sollte eine Unterseite mehr Platz benötigen, vergrößert sich das Textelement automatisch und auch das Hintergrundelement wird mit vergrößert. Eine automatische Verkleinerung passsiert derzeit noch nicht.

 

Fußzeile:

 

Zur Gestaltung der Fußzeile bitte auch den separaten Menuepunkt beachten. Für die Fußzeile wird ebenfalls ein Hintergrundelement eingefügt. Da die Fußzeile zum Template gehört und auf allen Seiten gleich ist, vorher in den TAB "Template bearbeiten" wechseln. Es ist vom Handling am einfachsten zwischen Contentbereich und der eigentlichen Fußzeile noch einen ganz schmalen Hintergrund zu platzieren. Änderungen, die man dann vielleicht irgendwann einmal an der Fußzeile vornimmt, haben dann garantiert keinen Einfluß auf das Gesamtlayout.

 

Generell gilt, das, wenn ihr später im Seitenbereich Content einbaut, die Fußzeile entsprechend mit nach unten verschoben wird. Wichtig ist das bei der Positionierung der gewünschten Elemente in der Fußzeile, sich diese auch vollständig unterhalb des Seitenbereiches befinden. Andernfalls interpretiert der Editor diese als "Seitenelemente" und positioniert diese absolut. Das heißt, die Elemente würden nicht mit nach unten verschoben, sondern würden an dieser Posiition bleiben und bei längeren Seiten dann mitten im Text stehen. Deswegen auch der Tipp mit dem trennenden Hintergrundelement - siehe oben.

Ein typisches Beispiel wäre das Codeelement für den Seitenanfang-Button.

 

 

 

Die Länge der Webseite

 

 

Die Länge der Webseite sollte man relativ kurz halten, da (beobachtet euch selbst) es meist etwas nervt, wenn man ewig scrollen muss. Vor allem, wenn der Seitenanfang-Button fehlt und man wieder bis hoch scrollen muss. Generell gilt, das die Länge der Webseite durch das längste Element oberhalb der Fußzeile (falls vorhanden) bestimmt wird.