verstanden

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu.

Weitere Informationen zu Cookies erhalten Sie in unserer Datenschutzerklärung

Twinix Design

Free moziloCMS Layouts

Tutorials Layout Part 1

Responsives Template für moziloCMS erstellen

Mit diesm Tutorial möchte ich euch zeigen, wie Ihr ein responsives Layout mit Hilfe von Flexbox für moziloCMS erstellen könnt.


Da es den Rahmen dieses Turorials sprengen würde, werde ich allerdings nicht bis ins kleinste Detail gehen.


Ein Tutorial um die Grundlagen von HTML & CSS zu lernen findt ihr z.B. bei selfhtml.org


Der komplette CSS & HTML Code steht am ende des Tutorials zum kopieren bereit, alternativ kann auch das fertige Template heruntergeladen werden.


Voraussetzungen

Für euer eigenes Layout werden folgende Hilfsmittel und Kenntnisse vorausgesetzt:

  • Grundkenntnisse in HTML und CSS um das Layout den eigenen Vorstellungen anzupassen.

  • Ein Editor (bspw. VS Code), um das Layout zu bearbeiten.


Es ist durchaus möglich, HTML & CSS in Notepad oder im Backend von moziloCMS zu bearbeiten, aber wenn wir einen geeigneten Editor verwenden, läuft es viel reibungsloser.


Einer der Hauptgründe ist, dass Code farbig hervorheben wird, was das Lesen und Bearbeiten erheblich erleichtert.

Ich bevorzuge Visual Studio Code, den ihr hier herunterladen könnt.


*Visual Studio Code (VS Code) heißt das Entwicklerwerkzeug von Microsoft.

VS Code bietet euch folgende Vorteile:

  • Aufgeräumtes und schnelles Editieren von Code auf Ordner- und Dateiebene ganz ohne Projekte.

  • Schnelle Steuerung und Navigation durch voll einstellbare Tastenkombinationen.

  • Syntax-Highlighting

  • Textsuche in Dateien und Ordnern

  • Erweiterbar durch Plugins (bspw. Deutsches Sprachpaket)

Planung

Die Planung ist das A und O, denn so überlasst Ihr nichts dem Zufall.

Zu beginn ist es sinnvoll ein grobes Gerüst seiner Seitenstruktur zu erstellen (Anordnung der Elemente, Farbauswahl).


Schau dir Webseiten im Netz an und lasse dich von anderen Designern inspirieren.

Dabei bist du zweifellos auf Websites gestoßen, die dich mit ihrem atemberaubenden Design beeindruckt haben.


Hilfreich ist auch, sich ein Inspirationsdokument zu erstellen mit Links zu Websites, die man liebt, oder einfach Lesezeichen setzen wenn man im Web unterwegs ist.


Man sollte mindestens einen groben Entwurf dessen haben, was Online gehen wird. Durch das Entwerfen mit echten Inhalten können wir besser darstellen, wie die Website aussehen und funktionieren wird.

Es gibt uns auch die Möglichkeit, Änderungen früher im Entwurfsprozess vorzunehmen.


Gib deinen Website-Besuchern eine gute Benutzererfahrung:

Als Webdesigner möchtest du, dass Besucher auf deiner Website bleiben und diese nicht verlassen. Um dies zu erreichen, musst du dafür sorgen, dass deine Website einfach zu navigieren ist. In der Fachsprache Marketing und Webentwicklung nennen man dies eine gute Benutzererfahrung (user experience) oder kurz UX.


  • Versuche grundsätzlich, dich in die Lage deiner Besucher zu versetzen.


  • Halte das Design einfach und intuitiv, niemand möchte beim besuch deiner Website mit dem Design zu kämpfen haben.


  • Die Logik sollte jemanden mit Leichtigkeit durch die Seite führen.


Wir werden die Website in ihre Kernabschnitte aufteilen und entscheiden, wie jeder Abschnitt auf Mobilgeräten, Tablets und Desktops aussehen soll.


Die Abschnitte, die wir erstellen werden, enthalten den Header-, Navigation-, Content-, Sidebar- und Footer Bereich.


Hier ist das mobile Layout:


Bild "Tutorials:mobileansicht.jpg"

Wie man sehen kann, sind alle Abschnitte in einer langen Spalte, einschließlich der Sidebar, grundsätzlich übereinander gestapelt.


Das Stapeln ist die einfachste Methode, um Inhalte effizient auf einem schmalem Gerät wie einem Mobiltelefon darzustellen. Es wäre nicht sehr sinnvoll, die Sidebar neben dem normalen Inhalt zu platzieren, da die Telefone nicht breit genug sind, um beide nebeneinander anzuzeigen.


hier ist das Tablet-Layout:


Bild "Tutorials:tablet.jpg"

Der Hauptunterschied besteht darin, dass wir die Sidebar neben dem Content anzeigen können, da Tablets viel breiter als Telefone sind. Alle Bereiche nehmen die gesamte Breite des Tablets ein.


Und für das breiteste Gerät - hier ist das Desktop-Layout:


Bild "Tutorials:desktop.jpg"

Für den Desktop müssen wir uns überlegen, wie die Website auf sehr breiten Monitoren aussehen soll. Besonders heutzutage mit extrem breiten Bildschirmen, die immer beliebter werden.


Wenn wir den Inhalt der Website auf einem großen Monitor in voller Breite ausdehnen würden, wäre es schwieriger, den Inhalt zu lesen. Stell dir vor, Du zwingst deine Augen, sich ständig von links nach rechts zu bewegen. Es ist viel zu viel Arbeit und würde viele Benutzer vertreiben.


Damit die Website auf Breitbildschirmen weiterhin lesbar ist, werden wir den Inhalt auf eine bestimmte Breite begrenzt und zentriert. Dies macht das Lesen viel einfacher und intuitiver, egal wie groß der Monitor ist.

Ordner anlegen

Da wir uns nun überlegt haben wie die Seite aussehen soll, legen wir den Ordner und die entsprechenden Dateien an.

In mozilo ist der Template Name auch gleich ein Ordner, Sonderzeichen müssen nach den moziloCMS Regeln Konvertiert werden (Leerzeichen, ä, ü usw.). Am besten lassen wir diese im Ordnernamen gleich weg.


Bild "Tutorials:ordner.jpg"
  • Template Name (Ordner)
    • template.html
    • Favicon
    • grafiken (Ordner)
      • Bilddateien
    • css (Ordner)
      • style.css
    • fonts (Ordner)*optional
      • verwendete Schriften

Wenn die entsprechenden Ordner angelegt sind öffnen wir unser Editor VSCode.

Über die Auswahl [Datei] -> [Ordner öffnen...] wählen wir nun unseren Template Ordner,

anschließend erstellen wir eine neue Datei über die Auswahl [Datei] -> [Neue Datei] und speichern diese als template.html in unserem Template Ordner.

Wir wiederholen den Vorgang für unsere style.css, diese wird allerdings im Ordner [css] abgespeichert.


Bild "Tutorials:vscode.jpg"

Favicon erstellen

Ein Favicon ist der letzte Schliff, mit dem wir unsere Website von Mitbewerbern unterscheiden können.


Webdesigner erstellen normalerweise eine kleine Version des Website-Logos, die mit dem Branding der Website übereinstimmt.

Ziel ist es, ein Favicon zu erstellen, das bei der Anzeige in einem Browser-Tab oder einer Lesezeichenleiste leicht zu identifizieren ist.


Was ist ein Favicon

Ein Favicon ist ein kleines Bild oder eine Sammlung kleiner Bilder, die einer Webseite zugeordnet sind.

Favoriten werden von einem Webbrowser neben dem Titel der Webseite in der Adressleiste, der Registerkarte Browser und der Lesezeichenleiste angezeigt.

Ein Favicon ist kein Hexenwerk und kann schon in Wenigen Minuten erstellt werden.

Wir nutzen in diesem Tutorial die Website favicon.io , da wir das erstellte Icon als ZIP Datei mit verschiedenen größen herunterladen können.


Die Heruntergeladene ZIP Datei entpacken wir in das Hauptverzeichnis unseres Templates.

  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • apple-touch-icon.png
  • favicon-16x16.png
  • favicon-32x32.png
  • favicon.ico
  • site.webmanifest

Den CSS Code braucht ihr nicht zu kopieren, da ich ihn bereits in unser HTML Grundgerüst einfügen werde.

Basics

<!DOCTYPE html> definiert, dass dieses Dokument ein HTML5-Dokument ist.

<html> Ist das Stammelement einer HTML-Seite.

<head> Enthält Metainformationen zur HTML-Seite.

<meta charset="utf-8"> Definiert die Zeichenkodierung.

<meta name="viewport" content="width=device-width, initial-scale=1"> Sorgt für eine korrekte Skalierung der Website auf dem mobilen Gerät.

<meta http-equiv="X-UA-Compatible" content="IE=edge"> Der Internet Explorer unterstützt eine Reihe von Dokument kompatibilitätsmodi, die verschiedene Funktionen aktivieren und die Anzeige von Inhalten beeinflussen können. Der Edge-Modus weist den Internet Explorer an, Inhalte im höchsten verfügbaren Modus anzuzeigen.

<title> Gibt einen Titel für die HTML-Seite an (der in der Titelleiste des Browsers oder auf der Registerkarte der Seite angezeigt wird).

<link rel="manifest" href="/site.webmanifest">

Das Web-App-Manifest liefert Informationen über eine Anwendung (wie Name, Autor, Icon und Beschreibung) in einer JSON-Textdatei. Der Zweck des Manifests ist es, Web-Anwendungen auf dem Homescreen eines Geräts zu installieren, was den Benutzern einen schnelleren Zugriff und eine umfassendere Erfahrung bietet.


Web-App-Manifeste sind Teil einer Sammlung von Web-Technologien namens progressive Web-Anwendungen, welche wiederum auf dem Homescreen eines Geräts installiert werden können, ohne dass der Benutzer sie über einen App Store installieren muss. Außerdem stellen sie auch andere Technologien wie z.B. die Offline-Fähigkeit und Push-Benachrichtigungen zur Verfügung.

<link rel="stylesheet" href="css/style.css"> Mit link binden wir unser stylesheet in das HTML Dokument ein. rel Gibt die Beziehung zwischen dem aktuellen Dokument und dem verknüpften Dokument an. href Gibt den Pfad zum Dokuments an.

<body> Definiert den Hauptteil des Dokuments und ist ein Container für alle sichtbaren Inhalte.


Beispiel einer HTML Seite


<!DOCTYPE html>
<html>
<head>
<title>Seiten Titel</title>
</head>
<body>

<h1>Meine erste Überschrift</h1>
<p>Mein erster Paragraph.</p>

</body>
</html> 

HTML Grundgerüst

Wir werdern unser Template Offline vorbereiten und testen, daher fügen wir noch nicht alle Syntax Platzhalter* ein.

*Platzhalter ({WERT} ) werden beim Aufruf der Website durch die von moziloCMS generierten Inhalte ersetzt.

Liste der Platzhalter

Platzhalter Beschreibung
{CHARSET} der Konstante CHARSET
{WEBSITE_TITLE} Der zusamengestellte Titel der Webseite
{WEBSITE_NAME} $CMS_CONF->get("websitetitle")
{WEBSITE_KEYWORDS} $CMS_CONF->get("websitekeywords")
{WEBSITE_DESCRIPTION} $CMS_CONF->get("websitedescription")
{LAYOUT_DIR} der Konstante URL_BASE . layouts/ . $CMS_CONF->get("cmslayout")
{BASE_URL} der Konstante URL_BASE
{MAINMENU} Hauptmenülinks
{DETAILMENU} Detailmenülinks
{SEARCH} getSearchForm()
{SITEMAPLINK} Link der die Sitemap als Inhaltseite anzeigt
{CMSINFO} Link mit dem Inhalt moziloCMS $VERSION_CONF->get("cmsversion")
{TABLEOFCONTENTS} Inhaltsverzeichnis aus allen [ueber?|] der aktuellen Inhaltsseite
{CATEGORY} der Konstante CAT_REQUEST
{CATEGORY_URL} Kategoriename als URL-kodiert
{CATEGORY_NAME} gibt den aktuellen Kategorienamen aus
{PAGE} der Konstante PAGE_REQUEST
{PAGE_URL} aktueller Inhaltsseitenname als URL-kodiert
{PAGE_NAME} aktueller Inhaltsseitenname
{PAGE_FILE} der Konstante PAGE_REQUEST . Dateiendung (EXT_PAGE, EXT_HIDDEN oder EXT_DRAFT) kann auch leer sein.
{MEMORYUSAGE} zeigt den Speicherverbrauch den der Webserver gebraucht hat um die Seite zu generieren
{EXECUTETIME} zeigt die Zeit die der Webserver gebraucht hat um die Seite zu generieren
{JQUERY} Bindet JQuery mit hilfe von insert_jquery_in_head("jquery") ein.

Bevor wir mit dem sichtbaren Inhalt und Styling beginnen können brauchen wir unser HTML Grundgerüst.


In der ersten Zeile muss die art der Menüdarstellung stehen.

<!-- usesubmenu = 2 -->

Die Zahl steht für die art des Menüs

  • 0: Normales Detailmenü
  • 1: Submenü (akt. Kategorie)
  • 2: Submenü (alle Kategorien)

Ich habe mich bei diesem Template für Submenü 2 entschieden.


Darauf folgen die Angaben für Doctype , html , head , meta , link und body , die einzelnen Elemente haben wir bereits in den Basics kennengelernt.

HTML Code


<!-- usesubmenu = 2 -->
<!DOCTYPE html>
<html lang="de">
<!-- / / / / / Vermerk ist nicht zu loeschen / / / /
# Template: Tutorial_TX
# Datum: Februar 2021
# Autor: Twinix Design // https://www.twinix.de
# Version: 1.0
 / / / / / / / / / / / / / / / / / / / / / / / / -->

<head>
<meta charset="{CHARSET}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="description" content="{WEBSITE_DESCRIPTION}">
<meta name="keywords" content="{WEBSITE_KEYWORDS}">
<title>{WEBSITE_TITLE}</title>
<link rel="apple-touch-icon" sizes="180x180" href="{LAYOUT_DIR}/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="{LAYOUT_DIR}/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="{LAYOUT_DIR}/favicon-16x16.png">
<link rel="manifest" href="{LAYOUT_DIR}/site.webmanifest">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<!-- ============================== HAUPTBEREICH ============================== -->

<!-- ============================== ENDE HAUPTBEREICH ============================== -->
</body>

</html>

Inhalt des Body's vorbereiten

Im nächsten Schritt werden wir unsere Container für die einzelnen Bereiche der Website vorbereiten.

Unser erstes Element wird ein Haupt-Container in dem wir den restlichen Inhalt zentrieren und ausrichten.

Um Elemente später über unsere style.css ansprechen zu können müssen wir ihnen eine Klasse class="" oder eine Id id="" zuweisen.


In unseren Haupt-Container werden wir Container für den Kopbereich, Navigation, Inhaltsbereich (Content), Sidebar und den Footer packen, und jedem Container eine Klasse zuweisen.


Um das HTML-Markup einfacher und übersichtlicher zu halten sollte man auf zu viele Verschachtelungen verzichten.

HTML Code


<!-- ============================== HAUPTBEREICH ============================== -->
<main class="tx-main"><!--page wrapper-->

<!-- ########## kopf bereich ############# -->
<header class="tx-header">
<b>Header</b>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sumenda potius quam expetenda. Nihil opus est exemplis hoc facere longius.
</p>
</header>
<!--ende kopf-->

<!-- ########## menü bereich ############# -->
<nav class="tx-nav">
<b>Navigation</b>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sumenda potius quam expetenda. Nihil opus est exemplis hoc facere longius.
</p>
</nav>
<!--ende menü-->

<div class="tx-flex-container"><!--content wrapper-->
<!-- ########## content bereich ########## -->
<section class="tx-content">
<b>Content</b>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sumenda potius quam expetenda. Nihil opus est exemplis hoc facere longius.
</p>
</section>
<!--ende content-->

<!-- ########## sidebar bereich ########## -->
<aside class="tx-sidebar">
<b>Sidebar</b>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sumenda potius quam expetenda. Nihil opus est exemplis hoc facere longius.
</p>
</aside>
<!--ende sidebar-->
</div><!--ende content wrapper-->

<!-- ########## footer bereich ########### -->
<footer class="tx-footer">
<p>© <script>document.write(new Date().getFullYear());</script> {WEBSITE_NAME}</p>
<p>Layout: <a href="https://www.twinix.de/" target="_blank" rel="noopener">Twinix Design</a></p>
<p>powered by: <a href="https://www.mozilo.de/" target="_blank" rel="noopener">moziloCMS 2.0</a></p>
</footer>
<!--ende footer-->

</main><!--ende page wrapper-->
<!-- ============================== ENDE HAUPTBEREICH============================== -->

Nach dem erstellen der HTML-Elemente empfiehlt es sich,für eine bessere Übersicht Platzhalterinhalte hinzuzufügen.


Sie müssen nicht zu ausgefallen sein, ich habe nur etwas Lorem-Ipsum-Fülltext kopiert und in jedes Element einfügt.


Share

Zusammenfassung

Im ersten Teil unseres Tutorials haben wir nun die Basis für unser eigenes Template vorbereitet.

  • Skizze erstellt
  • Template Ordner + Unterordner (css, grafiken, fonts)
  • template.html erstellt und im Hauptverzeichnis abgespeichert.
  • style.css erstellt & im Ordner css abgespeichert.
  • Unser Favicon erstellt und das heruntergepadene ZIP-Archiv in unser Template Ordner entpackt.
  • HTML Grundgerüst erstellt.
  • Elemente für Header, Navigation, Content, Sidebar und Footer vorbereitet.

Im zweiten Teil des Tutorials werden wir beginnen die Elemente unserer Website mit hilfe von CSS anzuordnen, und die ersten Style's hinzufügen.


1 2 3

Verpasse nichts mehr! und folge moziloCMS