Das Template vorbereiten und entschlacken
Vorbereitende Arbeiten am Grundgerüst des Templates und Umbennen der Dateien
Nachdem das gezippte Template von CSSLayoutGenerator.com (in diesem Beispiel layout_html5_liq_lcr_s2_800_m1020_l220_r200_fh80_1.zip) in das neu erstellte Verzeichnis "template01" auf dem PC verschoben worden ist und die Zip-Datei entpackt wurde, befinden sich dort die folgenden Dateien und Verzeichnisse:
template01/
- layout_html5_liq_lcr_s2_800_m1020_l220_r200_fh80_1/
- - index.html
- - style.css
- layout_html5_liq_lcr_s2_800_m1020_l220_r200_fh80_1.zip
Die beiden Dateien "index.html" und "style.css" werden in das Verzeichnis "template01/" verschoben und das Verzeichnis "layout_html5_liq_lcr_s2_800_m1020_l220_r200_fh80_1" gelöscht.
Die gezippte Datei "layout_html5_liq_lcr_s2_800_m1020_l220_r200_fh80_1.zip" wird jetzt nicht mehr benötigt und kann gelöscht, bzw. archiviert werden.
Die Datei "index.html" wird in "template.htm" und die Datei "style.css" wird in "stylesheet.css" umbenannt.
Die neue Verzeichnisstruktur mit den dazu gehörigen Dateien sieht jetzt wie folgt aus:
template01/ (Name des künftigen Template Verzeichnisses)
- template.htm (ehem. index.html, Struktur und Aufbau des neuen Templates)
- stylesheet.css (ehem. style.css, Formatierung für das neue Template)
( - layout_html5_liq_lcr_s2_800_m1020_l220_r200_fh80_1.zip)
Entschlacken des Templates (Fülltexte und nicht benötigter Code entfernen)
Die Datei "template.htm" wird jetzt beispielsweise mit Notepad++ geöffnet.
Die Zeile ...
<link href="style.css" rel="stylesheet">
so anpassen, dass dort jetzt der Name der umbenannten Datei "stylesheet.css" steht:
<link href="stylesheet.css" rel="stylesheet">
Alle anderen Zeilen zwischen <head> und </head> können gelöscht werden und das Ergebnis sollte wie folgt aussehen:
<head>
<link href="stylesheet.css" rel="stylesheet">
</head>
Den langen Fülltext im Bereich "Header" löschen und dort zur besseren Übersichtlichkeit nur "Header" eintragen. Das Ergebnis sollte wie folgt aussehen:
<header class="header">
Header
</header><!-- .header-->
Den langen Fülltext im Bereich "Content" löschen und dort zur besseren Übersichtlichkeit nur "Content" eintragen. Das Ergebnis sollte wie folgt aussehen:
<div class="container">
<main class="content">
Content
</main><!-- .content -->
</div><!-- .container-->
Den langen Fülltext im Bereich "left-sidebar" (linke Spalte) löschen und dort zur besseren Übersichtlichkeit nur "Left Sidebar" eintragen. Das Ergebnis sollte wie folgt aussehen:
<aside class="left-sidebar">
Left Sidebar
</aside><!-- .left-sidebar -->
Den langen Fülltext im Bereich "right-sidebar" (rechte Spalte) löschen und dort zur besseren Übersichtlichkeit nur "Right Sidebar" eintragen. Das Ergebnis sollte wie folgt aussehen:
<aside class="right-sidebar">
Right Sidebar
</aside><!-- .right-sidebar -->
Den langen Fülltext im Bereich "footer" (Fußzeile) löschen und dort zur besseren Übersichtlichkeit nur "Footer" eintragen. Das Ergebnis sollte wie folgt aussehen:
<footer class="footer">
Footer
</footer><!-- .footer -->
Die Datei "template.htm" enthält jetzt die "wirklich notwendigen Inhalte" mit dem grundlegenden Aufbau Header (Kopfbereich), den drei nebeneinander liegenden Spalten (Menü, Content, News) und dem darunter liegenden Fußbereich (Footer), die in den folgenden Schritten für den Einsatz unter CMSimple_XH als Vorlage verwendet wird.
Die Datei "template.htm" bitte speichern.
Wenn die "template.htm" mit dem Webbrowser jetzt aufgerufen wird, sieht sie wie folgt aus:
Hartmut Keil - http://cmsimplexh.webdesign-keil.de - Stand: 01.10.2015
| « vorige Seite | Seitenanfang | nächste Seite » |