Step 01 - Die Grundeinstellungen
Anmerkung: Folgender Text ist für das Coden für Oyla-Designs bestimmt! (Nicht für andere Anbieter.)
Infotext: Wenn man bei Oyla vom "Coden" spricht, bedeutet das, dass man einen HTML-Code erstelllt, der notwendig ist, um ein eigenes Design verwenden zu können.
Eine Möglichkeit, das eigene Design zu verwenden, ist, einfach ein Bild mit einem Bildprogramm zu erstellen, wo alle Bereiche für den Textseiteninhalt, die Navigation und eventuell noch weitere Dinge (wie einem Counter zum Beispiel) eingezeichnet sind.
Nur das Design als Bild hochzuladen reicht allerdings nicht aus. Es muss ein Code vorhanden sein, der quasi definiert, wie die Inhalte auf dem Bild positioniert sein sollen. So etwas geht leider nicht von alleine...
Tipp:
Falls ihr diese Homepage so sehen wollt, wie der Grundcode sie darstellen würde, dann klickt links einfach bei "Style ändern" auf "Oyla.de Grundcode"! (Wundert euch nicht, falls das Designbild nicht angezeigt wird. Wir haben gar keins hochgeladen.)
1) Der Grundcode
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>%titel%</title>
<style type="text/css">
<!--
body {
position: absolute;
padding: 0;
margin: 0;
top: 0;
left: 0;
background-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ffffff;
}
img#design {
position: absolute;
top: 0;
left: 0;
border: none;
}
div.content {
overflow: auto;
position: absolute;
top: 260px;
left: 330px;
width: 630px;
height: 220px;
font-family: Arial;
font-size: 16px;
color: #000000;
}
div.navigation {
overflow: auto;
position: absolute;
top: 260px;
left: 40px;
width: 185px;
height: 220px;
font-family: Arial;
font-size: 16px;
color: #000000;
}
a:link {
color: #0000ff;
text-decoration:none;
}
a:visited {
color: #0000ff;
text-decoration:none;
}
a:active {
color: #ffffff;
text-decoration:none;
}
a:hover {
color: #000000;
text-decoration:none;
}
-->
</style>
</head>
<body>
<!-- Start Design -->
<img src="Design_Adresse.jpg" alt="Designbild" id="design" />
<!-- End Design -->
<!-- Start Content -->
<div class="content">
%content%
</div>
<!-- End Content -->
<!-- Start Navigation -->
<div class="navigation">
%navigation_v%
</div>
<!-- End Navigation -->
</body>
<!--
Dies ist der Grundcode von http://www.oylahomepagehilfe.de.
Dieser Hinweis darf ohne Genehmigung von einem Betreiber des Internetabgebotes nicht entfernt werden.
-->
</html>
2) Grundcode kopieren
Als erstes kopiert einmal den Grundcode und fügt ihn in einem Textprogramm wie dem Editor oder dem Notepad ein. Mehr ist dazu nicht notwendig. Den Editor müsste jeder haben. Ihr findet ihn unter Start --> Programme --> Zubehör --> Editor
Oder ihr geht zB in Eigene Dateien rein und macht nen Rechtsklick --> Neu --> Textdokument
Beides ist das Gleiche.
Und in diesen Editor fügt ihr den kopierten Grundcode ein:
3) Das Hintergrundbild
Das Hintergrundbild (Design):
<img src="Design_Adresse.jpg" alt="Designbild" id="design" />
<!-- End Design -->
Dort, wo "Design_Adresse.jpg"steht, müsst ihr die Internetadresse von eurem Design hinschreiben.
Ihr "wandelt" euer Designbild in eine Adresse um, indem ihr das Bild einfach bei euch bei Oyla hochladet. Nach dem Hochladen geht ihr in das Bilderverzeichnis und öffnet das Design. Unter dem Bild ist eine Adresse vorhanden, die ihr euch kopiert und an dieser Stelle (siehe oben) einfügt.
Nun müssen wir das Bild noch richtig positionieren. Das ist in diesem Falle sehr sehr einfach. Sucht einfach folgenden Teil des Codes:
position: absolute;
top: 0;
left: 0;
border: none;
}
Dies ist ein Teil des Stylesheets dieses Designs. Dies wird per CSS geschrieben. Nehmt es einfach so hin und macht, was hier steht. Dann kann nichts schiefgehen. Bei den nächsten Schritten wird noch näher darauf eingegangen.
Also:
top sagt hier aus, wie weit das Bild vom oberen Rand des Bildschirms entfernt sein soll. Da wir oben keinen Rand wünschen, geben wir hier einfach 0 ein. Da wir links auch keinen Rand haben möchten, ist es das gleiche Spiel. Einfach bei left auch 0 hinschreiben. Da das Design keine Umrandung haben soll, fügen wir noch "border: none;" hinzu.
4) Der Inhalt
Jetzt habt ihr den Code und ihr habt hoffentlich auch schon erfolgreich euer Designbild dort eingefügt. Nun müsst ihr noch angeben, wo denn nun Inhalt und Navigation auf dem Bild erscheinen sollen. Ihr wollt ja nicht, dass diese einfach irgendwo auf der Homepage "rumfliegen". Wir fangen einfach mal beim Inhalt, dem "Content" an:
Dazu widmen wir uns jetzt dem nächsten Stückchen des Codes:<div class="content">
%content%
</div>
<!-- End Content -->
Hier wird also der Inhalt eingefügt. Wo momentan "%content%" steht, wird später dann der Inhalt eurer Textseiten zu sehen sein. Soweit so gut. Wie aber stellt ihr jetzt ein, wo der Content (der Inhalt) zu sehen sein soll?
Das ist ganz einfach. Dem Div-Container des Contents wurde die Klasse "content" ("<div class="content">") zugewiesen. Anhand dieser CSS-Klasse können wir diesem Div-Container, der den Inhalt beinhaltet, im Stylesheet bestimmte Eigentschaften geben. Das haben wir weiter oben schon mit dem Designbild gemacht. Hier geht es eigentlich genauso. Wie eben das Designbild, wollen wir nun den Inhalt positionieren.
Dazu müsst ihr mal ein ganzes Stück höher in den Code gehen:
overflow: auto;
position: absolute;
top: 260px;
left: 330px;
width: 630px;
height: 220px;
font-family: Arial;
font-size: 16px;
color: #000000;
}
Hier wird es jetzt also spannend.
Was "overflow: auto;" und "position: absolute;" bedeutet ist erst mal nicht wichtig. Wir gehen direkt zwei Zeilen weiter runter.
top kennen wir ja schon. Hier wird wieder eingegeben, wie weit der Inhalt vom oberen Rand des Bildschirms entfernt sein soll. Hier müsst ihr einfach mal ausprobieren... Je nachdem, wie euer Designbild ausschaut. left ist auch schon vom Designbild her bekannt. Hier wird wieder definiert, wie weit der Inhalt vom linken Rand des Bildschirms entfernt sein soll. Auch hier ist Ausprobieren angesagt.
Mit width (Breite) und height (Höhe) können wir nun angegeben, wie breit und hoch der Inhalt sein soll. Ihr ahnt es schon... Auch hier hilft nur Ausprobieren weiter!
So. Wenn das geschafft ist, dann bleiben nur noch 3 weitere Zeilen übrig. Mit font-family bestimmen wir die Schriftart. Wir haben hier "Arial" gewählt.
Per font-size können wir festlegen, welche Schriftgröße der Inhalt haben soll. Wie man sehen kann, ist in diesem Fall 16px; gewählt worden. Mit color wird zu guter Letzt noch die Schiftfarbe festgelegt. "#000000" entspricht der Schriftfarbe schwarz.
5) Die Navigation
Nun habt ihr (hoffentlich erfolgreich) den Inhalt auf euer Designbild eingefügt. Nun kommt noch die Navigation. Hier habe ich eine gute Nachricht! Das Prinzip ist genau dasselbe wie beim Designbild und dem Content auch. Die Angaben für die Navigation müssen einfach nur hier gemacht werden:
overflow: auto;
position: absolute;
top: 260px;
left: 40px;
width: 185px;
height: 220px;
font-family: Arial;
font-size: 16px;
color: #000000;
}
Wie man sehen kann, ist so ziemlich alles gleich. Nur die Werte bei top, left, width und height haben wir ausgetauscht. Denn die Navigation soll ja nicht an der gleichen Stelle sein, wie der Inhalt auch. Auch hier ist die richtige Position nur die Ausprobieren herauszufinden!
6) Und jetzt das WICHTIGSTE
Ich habe schon sehr sehr oft gelesen, dass Leute Probleme mit dem Coden haben, nur, weil sie die Werte nicht verändert haben. Von alleine passiert das nicht! Schlichtes Kopieren des Codes funktioniert also nicht.
7) Rumprobieren
Ihr habt jetzt ja erst Schätzungswerte als Werte eingesetzt. Wir wollen das Design aber genau eingestellt haben. Deshalb müssen wir das Dokument als HTML-Datei abspeichern und immer im Brwoser (zB Internet Explorer oder Firefox) nachsehen, ob die geschätzten Werte so passen.
Als erstes müssen wir uns einen Test-Text zulegen, damit wir genau sehen, wo unsere Divs anfangen und aufhören. Divs sind normalerweise ja transparent. Schaut euch Folgenden Teil an:
<!-- Start Content -->
<div class="content">
%content%
</div>
<!-- End Content -->
<!-- Start Navigation -->
<div class="navigation">
%navigation_v%
</div>
<!-- End Navigation -->
Hinter die Platzhalter %content% und %navigation_v% schreibt ihr irgendeinen Text. Ich nehme test<br />
Das bedeutet, dass er nach jede, "test" eine neue Zeile anfangen soll (Zeilenumbruch). Bei mir sieht es jetzt folgendermaßen aus:
<!-- Start Content -->
<div class="content">
%content% test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
</div>
<!-- End Content -->
<!-- Start Navigation -->
<div class="navigation">
%navigation_v% test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
</div>
<!-- End Navigation -->
Übrigens: Wo wir gerade bei Platzhaltern sind: Es gibt zwei verschiedene Platzhalter für die Navigation, %navigation_v% und %navigation_h%
%navigation_v% = vertikale, senkrechte Navigation
%navigation_h% = horizontale, waagerechte Navigation
Ihr könnt euch aussuchen, was ihr braucht, und dementsprechend ersetzen.
Na ja, zurück zum Test-Text:
Speichert diese komplette Datei unter Datei --> Speichern unter
Nun gebt als Dateinamen zB "Design.html" an. Der Name ist egal, aber das .html muss immer dahinter stehen! Also mit einem Punkt vor dem "html".
Wählt als Speicherort einen Ort aus, den ihr schnell erreichen und wiederfinden könnt, am besten den Desktop oder in die Eigenen Dateien.
Jetzt öffnet diese soeben abgespeicherte Datei mit einem Doppeklick. Die Datei sollte sich in einem Browser, zB dem Internet Explorer, öffnen. (Als Alternative könnt ihr die Datei auch mit Rechtsklick --> Öffnen mit --> Internet Explorer öffnen) Jetzt müsstet ihr euer Design und zwei Boxen mit %content% und %navigation% sehen.
Falls ihr es nicht seht, könntet ihr folgendes falsch gemacht haben:
- kontrolliert, ob ihr euer Designbild als Internetadresse eingefügt habt (siehe 3) Das Hintergrundbild)
- kontrolliert, ob ihr dieses Bild auch tatsächlich auch bei Oyla hochgeladen habt
- kontrolliert, ob ihr die Dateiendung, also das "jpg" oder "png" etc nicht vergessen habt
- kontrolliert, ob auch alle Anführungszeichen vorhanden sind (schaut oben bei 3) nach)
- kontrolliert, ob ihr das Textdokument auch wirklich als HTML-Datei abgespeichert habt
- kontrolliert, ob ihr einen funktionierenden Browser auf eurem PC installiert habt (wenn nicht, downloaded und installiert einen kostenlosen Brwoser, wie zB dem Mozilla Firefox)
Nachdem ihr gesehen habt, wie eure Fenster positioniert sind, müsst ihr wahrscheinlich noch ein paar Werte ändern. Bei mir sieht es mit einem Testdesign so aus: HIER KLICKEN
Jetzt geht ihr wieder zur abgespeicherten Datei und öffnet sie im Editor: Rechtsklick auf Datei --> Öffnen mit --> Editor
Die Navigation muss viel weiter rechts. Also weiß ich, dass ich eine viel größere Zahl bei "left" hinschreiben muss.
Der Content muss viel weiter nach links, also weiß ich, dass ich bei "left" eine sehr viel kleinere Zahl hinschreiben muss.
Die Navigation muss weiter nach oben, also muss bei "top" eine kleinere Zahl hin (der Abstand nach oben soll ja verkleinert werden).
Und so weiter.
Nach diesem Schema könnt ihr vorgehen. Erst überlegen, wie das passen müsste, und dann die Werte ändern. Dann guckt ihr im Browser wieder nach, wie das aussieht, und ändert danach wieder. So lange, bis alles passt.
Wenn ihr fertig seid, müsst ihr den Test-Text wieder löschen! Nur die Platzhalter müssen stehen bleiben!
Jetzt am Ende sieht es bei mir so aus: HIER KLICKEN
Und das wars schon. Mehr ist das nicht. Wenn ihr alles befolgt habt, wie beschrieben, dann solltet ihr ganz einfach euer eigenes Design gecodet haben.
Und falls jemanden der Quelltext meines Designs mit allen Einstellungen interessiert, kann sich den hier angucken:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>%titel%</title>
<style type="text/css">
<!--
body {
position: absolute;
padding: 0;
margin: 0;
top: 0;
left: 0;
background-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ffffff;
}
img#design {
position: absolute;
top: 0;
left: 0;
border: none;
}
div.content {
overflow: auto;
position: absolute;
top: 247px;
left: 36px;
width: 589px;
height: 518px;
font-family: Arial;
font-size: 16px;
color: #000000;
}
div.newsbox {
overflow: auto;
position: absolute;
top: 200px;
left: 200px;
width: 150px;
height: 400px;
font-family: Arial;
font-size: 16px;
color: #000000;
}
div.navigation {
overflow: auto;
position: absolute;
top: 44px;
left: 757px;
width: 166px;
height: 400px;
font-family: Arial;
font-size: 16px;
color: #000000;
}
a:link {
color: #0000ff;
text-decoration:none;
}
a:visited {
color: #0000ff;
text-decoration:none;
}
a:active {
color: #ffffff;
text-decoration:none;
}
a:hover {
color: #000000;
text-decoration:none;
}
-->
</style>
</head>
<body>
<!-- Start Design -->
<img src="blueinspiration_ohh.jpg" alt="Designbild" id="design" />
<!-- End Design -->
<!-- Start Content -->
<div class="content">
%content% test<br />
test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
</div>
<!-- End Content -->
<!-- Start Navigation -->
<div class="navigation">
%navigation_v% test<br />
test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
</div>
<!-- End Navigation -->
</body>
<!--
Dies ist der Grundcode von http://www.oylahomepagehilfe.de.
Dieser Hinweis darf ohne Genehmigung von einem Betreiber des Internetabgebotes nicht entfernt werden.
-->
</html>
