Tutorial 2
Wie code ich ein Template um?
Top 5 der Templateanbieter:
|
Anbieter / Webseite
|
Kostenlos?
|
|
Ja!
|
|
|
Ja!
|
|
|
Ja!
|
|
|
Ja!
|
|
| Ja! |
Tutorial: Webtemplates im Homepage-Baukasten
Anleitung für die Anpassung eines kostenlosen Webtemplates in CSS für den Homepage-Baukasten.
Der Homepage-Baukasten bietet viele Möglichkeiten seine eigene Homepage gut und individuell zu gestalten. Doch viele Menschen empfinden eher eine Abneigung gegenüber Baukästen. Doch zum Glück gibt es den Homepage-Baukasten. Ich weiß selbst, dass Baukasten eigentlich ziemlich negativ klingt, aber er bietet auch Möglichkeiten für die professionelle Gestaltung einer eigenen Homepage.
Ich möchte nun die folgenden Schritte erklären, wie man sich selbst ein kostenloses Design für den Homepage-Baukasten zusammenstellen kann.
1) Auf der wohl beliebtesten Suchmaschine "Google" findet man viele Lösungen, wenn man zum Beispiel "Free Webtemplates CSS" eingibt. Wenn man sich also ein schickes Design ausgesucht hat, dann kann man das sogar kostenlos aus dem Internet herunterladen.
2) Na toll - denkt der ein oder andere. Nun hab ich soetwas Komisches auf meinem PC und kann damit nichts anfangen. Doch als erstes sollte man die Datei öffnen und alle Dateien in einen Ordner entpacken/extrahieren.
3) Dann öffnet sich folglich der Ordner mit den heruntergeladenen Sachen. Unter anderem sollte man jetzt folgende Sachen im Ordner sehen:
- Eine Index Datei: Diese Datei kann man anklicken und sie öffnet das Design im Internet-Browser
- Eine Style Datei: Diese Datei ist unser wichtigstes Dokument.
- Einen Ordner mit "Images", also den Bildern des Designs
Zunächst trauen wir uns an das Style-Script heran. Dies ist der Code des Designs, an dem wir noch einige Änderungen vornehmen müssen.
3.1) Öffne das Style-Script mit einem normalen Editor/Works etc.
3.2) Nun findest du einen langen Code. Außerdem siehst du an einigen Stellen zum Beispiel in Klammern geschrieben (images/bg.jpg). An all diesen Stellen müssen nun die URL´s deiner Bilder hinein. Am besten lädst du alle Bilder aus dem Ordner "Images" im Homepage-Baukasten hoch, oder über einen externen Bilder-Upload-Dienst, allerdings ist bei solchen Diensten nie die Gewährleistung, dass die Bilder für immer dort bleiben und erreichbar sind.
3.3) Wenn du nun ein Bild hochgeladen hast, hast du auch eine Bild-URL aufrufen. Diese URL musst du in die Klammern deines Designs einfügen. Zum Beispiel in (images/bg.jpg) kommt dann rein: (http://meinbackgroundimage.jpg). Natürlich muss man vorher schauen, welches Bild man hochladen muss und ob in dem Style-Script eine "gif", eine "jpg", oder eine "png" Datei eingefügt werden muss. Oft gibt es die gleichen Bilder mehrmals, nur in einem anderen Format. Und wenn man da nur eine Kleinigkeit falsch macht, dauert es ganz schön lange, den Fehler hinterher zu finden.
4) Wenn du nun alle Bilder hochgeladen und in das Script eingefügt hast, dann kannst du deinen Code abspeichern, kopieren und im Homepage-Baukasten unter "CSS-Design"- "CSS-Code ohne Style Tags" einfügen.
5) Wenn du nun deine Homepage aufrufen solltest, wird dir auffallen, dass doch noch einiges fehlt. Dies kommt nun.
5.1) In deinem Design-Ordner hast du auch eine "Index-Datei". Klicke auf die Datei und öffne sie mit deinem Internet-Browser. Am besten hierzu eignet sich der "Mozilla Firefox". Nun siehst du dein Design, das du allerdings ja für deine Homepage haben möchtest. Klicke im aufgerufenen Design einmal "Rechtsklick" - "Seitenquelltext anzeigen", in manchen Browsern, wie zum Beispiel "Opera" steht nur "Quelltext". Dort siehst du nun einen ganz langen Code, den du kopieren musst und im Homepage-Baukasten unter: "CSS-Design" - "Text über Design" einfügen musst, am Ende abspeichern.
5.2) Da wir das Design ja für den Baukasten anpassen wollen, müssen außerdem folgende Codes zusätzlich eingefügt werden.
Zum Einen muss dieser Code bei "CSS-Code ohne Style Tags" eingefügt werden.
Außerdem müssen wir nun den Content vom Homepage-Baukasten in unser Design einfügen.
Dieser Code wird ebenfalls bei "CSS-Code ohne Style Tags" eingefügt.
Die Werte, Farben und Abstäne müssen natürlich an das Design angepasst werden.
Zusatz: Wenn du diesen Code hier einfügst, dann erscheint später im Design ein Scrollbalken, wenn eine Textseite länger ist, als dein Design. Wenn du das nicht möchtest, gehe bitte einen Schritt weiter zu 5.3)
5.3) Wenn du also KEINEN Scrollbalken im Design möchtest, dann darfst du den "Content" Code, den du soeben übersprungen hast, NICHT einfügen. In 5.1) hast du ja bereits einiges bei "Text über dem Design" eingefügt. Du siehst du ja nun jede Menge Beispieltext in dem sogenannten Content. Irgendwo in deinem eingefügten Code bei "Text über dem Design" wirst du folgendes finden:
<div id="templatemo_content">
ODER
<div id="templatemo_left_column">
ODER
<div id="templatemo_left_section">
All diese drei sind eine Angabe für den Content. Alles, was nach einem dieser Codes folgt, muss bei "Text unter dem Design" hinein, wenn du KEINEN Scrollbalken im Design willst. Bei einigen Designs muss man es einfach ausprobieren, wo und wann der Content passt und richtig sitzt.
6) Die letzten Schritte. Ich empfehle jedem, der den Mozilla Firefox benutzt, sich das kostenlose Add-one "Write Area" zu holen und zu installerien. Es kann hier heruntergeladen bzw. installiert werden.
https://addons.mozilla.org/de/firefox/addon/6147
Eine Anleitung, was das genau ist, findet ihr unter:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=102256
Wenn ihr das Add-one folglich installiert habt, ist der Rest eigentlich ein Kinderspiel.
Den Code, den ihr unter "CSS-Design" - "Text über Design" stehen habt, muss noch ein kleines bisschen bearbeitet werden. Das könnt ihr sehr erfolgreich mit dem gerade installierten Add-one machen. Klickt mit einem Rechtsklick auf "Edit in Write Area". Dort seht ihr euren Code nun verständlicher und ihr könnt den Text, der ja noch auf euerer Homepage zu sehen sein sollte, löschen, da wir gerade schon in Punkt 5.2. unseren eigenen Content/Seiteninhalt hinzugefügt haben. Wenn ihr also alles löscht, was überflüssig ist, sollte bei euch im Content auf eurer Homepage nur noch euer Inhalt zu sehen sein, was ihr mit dem Homepage-Baukasten Editor schreibt/geschrieben habt.
Und das war´s. Fertig ist das eigene Webtemplate für den Homepage-Baukasten.
Und so schwer war es doch nun wirklich nicht ?!
Falls ihr weitere Fragen habt, postet sie bitte hier unten im Kommentar oder benutzt mein Kontaktformular, ich werde versuchen euch umgehend zu antworten.
Kleiner Hinweis:
"Jedes Design ist verschieden. Es kann sein, dass es bei dem einen Design schneller funktioniert, bei dem anderen Design weniger schnell oder bei noch einem anderen Design gar nicht. Ich garantiere nicht, dass mein Tutorial 100%-ig funktionieren muss. Aber nun - do it yourself !"
Der Homepage-Baukasten bietet viele Möglichkeiten seine eigene Homepage gut und individuell zu gestalten. Doch viele Menschen empfinden eher eine Abneigung gegenüber Baukästen. Doch zum Glück gibt es den Homepage-Baukasten. Ich weiß selbst, dass Baukasten eigentlich ziemlich negativ klingt, aber er bietet auch Möglichkeiten für die professionelle Gestaltung einer eigenen Homepage.
Ich möchte nun die folgenden Schritte erklären, wie man sich selbst ein kostenloses Design für den Homepage-Baukasten zusammenstellen kann.
1) Auf der wohl beliebtesten Suchmaschine "Google" findet man viele Lösungen, wenn man zum Beispiel "Free Webtemplates CSS" eingibt. Wenn man sich also ein schickes Design ausgesucht hat, dann kann man das sogar kostenlos aus dem Internet herunterladen.
2) Na toll - denkt der ein oder andere. Nun hab ich soetwas Komisches auf meinem PC und kann damit nichts anfangen. Doch als erstes sollte man die Datei öffnen und alle Dateien in einen Ordner entpacken/extrahieren.
3) Dann öffnet sich folglich der Ordner mit den heruntergeladenen Sachen. Unter anderem sollte man jetzt folgende Sachen im Ordner sehen:
- Eine Index Datei: Diese Datei kann man anklicken und sie öffnet das Design im Internet-Browser
- Eine Style Datei: Diese Datei ist unser wichtigstes Dokument.
- Einen Ordner mit "Images", also den Bildern des Designs
Zunächst trauen wir uns an das Style-Script heran. Dies ist der Code des Designs, an dem wir noch einige Änderungen vornehmen müssen.
3.1) Öffne das Style-Script mit einem normalen Editor/Works etc.
3.2) Nun findest du einen langen Code. Außerdem siehst du an einigen Stellen zum Beispiel in Klammern geschrieben (images/bg.jpg). An all diesen Stellen müssen nun die URL´s deiner Bilder hinein. Am besten lädst du alle Bilder aus dem Ordner "Images" im Homepage-Baukasten hoch, oder über einen externen Bilder-Upload-Dienst, allerdings ist bei solchen Diensten nie die Gewährleistung, dass die Bilder für immer dort bleiben und erreichbar sind.
3.3) Wenn du nun ein Bild hochgeladen hast, hast du auch eine Bild-URL aufrufen. Diese URL musst du in die Klammern deines Designs einfügen. Zum Beispiel in (images/bg.jpg) kommt dann rein: (http://meinbackgroundimage.jpg). Natürlich muss man vorher schauen, welches Bild man hochladen muss und ob in dem Style-Script eine "gif", eine "jpg", oder eine "png" Datei eingefügt werden muss. Oft gibt es die gleichen Bilder mehrmals, nur in einem anderen Format. Und wenn man da nur eine Kleinigkeit falsch macht, dauert es ganz schön lange, den Fehler hinterher zu finden.
4) Wenn du nun alle Bilder hochgeladen und in das Script eingefügt hast, dann kannst du deinen Code abspeichern, kopieren und im Homepage-Baukasten unter "CSS-Design"- "CSS-Code ohne Style Tags" einfügen.
5) Wenn du nun deine Homepage aufrufen solltest, wird dir auffallen, dass doch noch einiges fehlt. Dies kommt nun.
5.1) In deinem Design-Ordner hast du auch eine "Index-Datei". Klicke auf die Datei und öffne sie mit deinem Internet-Browser. Am besten hierzu eignet sich der "Mozilla Firefox". Nun siehst du dein Design, das du allerdings ja für deine Homepage haben möchtest. Klicke im aufgerufenen Design einmal "Rechtsklick" - "Seitenquelltext anzeigen", in manchen Browsern, wie zum Beispiel "Opera" steht nur "Quelltext". Dort siehst du nun einen ganz langen Code, den du kopieren musst und im Homepage-Baukasten unter: "CSS-Design" - "Text über Design" einfügen musst, am Ende abspeichern.
5.2) Da wir das Design ja für den Baukasten anpassen wollen, müssen außerdem folgende Codes zusätzlich eingefügt werden.
Zum Einen muss dieser Code bei "CSS-Code ohne Style Tags" eingefügt werden.
#extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#pre_content {display: none;}
#nav_heading{display: none;}
#nav{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
Außerdem müssen wir nun den Content vom Homepage-Baukasten in unser Design einfügen.
Dieser Code wird ebenfalls bei "CSS-Code ohne Style Tags" eingefügt.
Die Werte, Farben und Abstäne müssen natürlich an das Design angepasst werden.
Zusatz: Wenn du diesen Code hier einfügst, dann erscheint später im Design ein Scrollbalken, wenn eine Textseite länger ist, als dein Design. Wenn du das nicht möchtest, gehe bitte einen Schritt weiter zu 5.3)
#content {
position: absolute;
left: 50%; top:328px;
margin-left:-599px;
width: 660px; padding:10px;
color: #000000;
font-size:13px;
font-family: Arial;
background-color:#transparent;
background-image: none;
border: 0px solid #5F5F5F;
height : 344px;
overflow:auto;
}
5.3) Wenn du also KEINEN Scrollbalken im Design möchtest, dann darfst du den "Content" Code, den du soeben übersprungen hast, NICHT einfügen. In 5.1) hast du ja bereits einiges bei "Text über dem Design" eingefügt. Du siehst du ja nun jede Menge Beispieltext in dem sogenannten Content. Irgendwo in deinem eingefügten Code bei "Text über dem Design" wirst du folgendes finden:
<div id="templatemo_content">
ODER
<div id="templatemo_left_column">
ODER
<div id="templatemo_left_section">
All diese drei sind eine Angabe für den Content. Alles, was nach einem dieser Codes folgt, muss bei "Text unter dem Design" hinein, wenn du KEINEN Scrollbalken im Design willst. Bei einigen Designs muss man es einfach ausprobieren, wo und wann der Content passt und richtig sitzt.
6) Die letzten Schritte. Ich empfehle jedem, der den Mozilla Firefox benutzt, sich das kostenlose Add-one "Write Area" zu holen und zu installerien. Es kann hier heruntergeladen bzw. installiert werden.
https://addons.mozilla.org/de/firefox/addon/6147
Eine Anleitung, was das genau ist, findet ihr unter:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=102256
Wenn ihr das Add-one folglich installiert habt, ist der Rest eigentlich ein Kinderspiel.
Den Code, den ihr unter "CSS-Design" - "Text über Design" stehen habt, muss noch ein kleines bisschen bearbeitet werden. Das könnt ihr sehr erfolgreich mit dem gerade installierten Add-one machen. Klickt mit einem Rechtsklick auf "Edit in Write Area". Dort seht ihr euren Code nun verständlicher und ihr könnt den Text, der ja noch auf euerer Homepage zu sehen sein sollte, löschen, da wir gerade schon in Punkt 5.2. unseren eigenen Content/Seiteninhalt hinzugefügt haben. Wenn ihr also alles löscht, was überflüssig ist, sollte bei euch im Content auf eurer Homepage nur noch euer Inhalt zu sehen sein, was ihr mit dem Homepage-Baukasten Editor schreibt/geschrieben habt.
Und das war´s. Fertig ist das eigene Webtemplate für den Homepage-Baukasten.
Und so schwer war es doch nun wirklich nicht ?!
Falls ihr weitere Fragen habt, postet sie bitte hier unten im Kommentar oder benutzt mein Kontaktformular, ich werde versuchen euch umgehend zu antworten.
Kleiner Hinweis:
"Jedes Design ist verschieden. Es kann sein, dass es bei dem einen Design schneller funktioniert, bei dem anderen Design weniger schnell oder bei noch einem anderen Design gar nicht. Ich garantiere nicht, dass mein Tutorial 100%-ig funktionieren muss. Aber nun - do it yourself !"
Seite druckenMehr zu diesen Thema?
Kein Problem, schau doch mal in den weiteren Tutorials nach ob du mehr Infos und Daten zu diesen Thema findest.
