** C H R I S K I Z Z M Y S U N » .. Kopf aus

Eigenes Design coden

Vorraussetzungen

HTML Grundkenntnisse, viel Geduld und die Lust etwas zu lernen und auszuprobieren

Zuerst einmal, wer nicht mindestens Grundkenntnisse hat, in Sachen Homepage etc. sollte erstmal die Finger vom Eigenen Layout lassen.
Es bringt nichts, wenn ihr nicht wisst, wie man einen Scrollbalken farblich verändert, ein Bild einfügt oder nicht wisst, was eine Url ist. Natürlich kann man mit einem eigenen Layout seine Hp besser repräsentieren, aber man sollte auch wissen, was man da eigentlich tut. Am besten erstmal kleine Sachen lernen und später mit einem Layout anfangen.
Ansonsten, viel Spaß beim ausprobieren :}

Das erste was ihr natürlich braucht, ist ein sogenannter Grundcode. Den könnt ihr für alle folgenden Layouts benutzen und braucht ihn lediglich anpassen.

<html> 
<head> 
<title>%title%</title>
<style type="text/css">
<!--
body, td {
scrollbar-face-color: #Hexcode;
scrollbar-highlight-color: #Hexcode;
scrollbar-3dlight-color: #Hexcode;
scrollbar-darkshadow-color: #Hexcode;
scrollbar-shadow-color: #Hexcode;
scrollbar-arrow-color: #Hexcode;
scrollbar-track-color: #Hexcode;}

a:link {color: #Hexcode; text-decoration:none;} 
a:visited {color: #Hexcode; text-decoration:none;}
a:active {color: #Hexcode; text-decoration:none;} 
a:hover {color: #Hexcode; background-color: #Hexcode;}

A.navi:link, A.navi:active, A.navi:visited {
display: block;
padding-left: 3px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
margin-top: 1px;
font-family: Schriftart;
font-size: Schriftgrösse pt;
color: #Hexcode Schriftfarbe;
margin-bottom: 1px;
background-color: #Hexcode Hintergrund Farbe;
text-align: Ausrichtung der Links;
line-height: Linienhöhe px;}

A.navi:hover {
display: block;
padding-left: 3px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
background-color: #Hexcode Hintergrund Farbe;
margin-top: 1px;
font-size: Schriftgrösse pt;
color: #Hexcode Schriftfarbe;
font-family: Schriftart;
text-align: Textausrichtung;
line-height: Linienhöhe px;}

font {font-family: Schriftart; font-size: Schriftgrösse pt;}
b, strong{ color:#Hexcode; font-size: Schriftgrösse pt; font-family:Schriftart;}
i, em{color:#Hexcode; font-size: Schriftgrösse pt; font-family:Schriftart;}
u{color: #Hexcode; font-size: Schriftgrösse pt; font-family:Schriftart;}
s, strike{color:#Hexcode; font-size: Schriftgrösse pt; font-family:Schriftart;}

TEXTAREA { Color: #Hexcode;
width:Breite der Textarea px;
height:Höhe der Textarea px;
background-attachment:fixed;
background-color: #Hexcode Hintergrund Farbe;
Font-Family: Schriftart;
Font-Size: Schriftgrösse px;
Border: 1px solid #Hexcode des Rahmens;}

input { Color: #Hexcode;
background-color: #Hexcode Hintergrund Farbe;
Font-Family: Schriftart;
Font-Size: Schriftgrösse px;
width: Breite px;
Border: 1px solid #Hexcode des Rahmens;}

--> 
</style>
</head>

<div style="overflow: visible; position: absolute; width: Breite des Contents; height: Höhe des Contents; left: Abstand des Contents von links; top: Abstand des Contents von oben">
<font face="Arial" size="1" font color="#FFFFFF">
%content%
</div>

<div style="overflow: visible; position: absolute; width: Breite der Navigation; height: Höhe der Navigation; left: Abstand der Navigation von links; top: Abstand der Navigation von oben">
<font face="Arial" size="1" font color="#FFFFFF">
%navigation_v%
</div>

Erklärung dazu:
%title%: Platzhalter für den Homepage Titel
scrollbar-face-color, etc.: Farbangaben für den Scrollbalken (Siehe unter Scrollbalken Tutorial)
a:link, a:visited, a:active, a:hover: Angaben zum normalen Link
A.navi:link, A.navi:active, A.navi:visited: Angaben zum Navigations Link (Siehe unter Navigation Tutorial)
A.navi:hover: Angaben zum Navigations Link Hover (Siehe unter Navigation Tutorial)
font: Angaben zur normalen Schrift
b, strong: Angaben zur Fettschrift
i, em: Angaben zur Kursivschrift
u: Angaben zur unterstrichenen Schrift
s, strike: Angaben zur durchgestrichenen Schrift
textarea: Angaben zur Textarea (siehe Allgemeine Hilfe)
input: Angaben zum Input (Buttons)
background=Endless Stück des Layouts: Url einfügen für das sich wiederholende Endstück des Layouts
img border="0" src="Url des Layouts: Url des Layouts einfügen
width="Breite des Layouts",height="Höhe des Layouts": Genaue Breite und Höhe des Layouts eintragen
width: Breite des Contents;: Genaue Breite des Contents (wo der Inhalt hinein kommt)
height: Höhe des Contents;: Genaue Höhe des Contents (bei einem Endless Layout unwichtig)
left: Abstand des Contents von links;: Genauer Abstand des Contents von Links
top: Abstand des Contents von oben": Anfang des Contents
%content%: Platzhalter für den Content bei Oyla
width: Breite der Navigation; height: Höhe der Navigation; left: Abstand der Navigation von links; top: Abstand der Navigation von oben": Gleich wie beim Content
%navigation_v%: Platzhalter für die Navigation (vertikal)

Dieser Grundcode ist für ein Endless Layout, d.h. das Layout ist genauso lang, wie der Text. Wollt ihr ein Div Layout (es gibt ein bestimmtes Ende des Layouts und einen Anfang und Ende des Contents + Navigation), müsst ihr folgende Sachen austauschen:
Bei den Angaben zum Content dies suchen: div style="overflow: visible; und durch div style="overflow: auto; ersetzen. Dasselbe bei den Angaben zur Navigation ändern.
Und

duch folgendes ersetzen

Allgemeines:
Zum Layout: Als Endless Stück bezeichne ich den letzten Streifen des Designs. D.h. ihr öffnet euer Layout in einem Bildbearbeitungsprogramm und schneidet unten das letzte Stück ab und speichert es separat ab. Dieses Stück wird sich immer und immer wiederholen, bis euer Text im Content zuende ist. Worauf ihr achten müsst, ist das dieses Stück dieselbe Breite hat, wie euer Layout. Wenn ihr z.B. eine Layout Grösse von 1024 x 768 habt, dann muss euer Endless Stück dieselbe Breite haben. Die Höhe spielt allerdings keine Rolle.
Platzhalter: Diese braucht ihr, wenn ihr bei Oyla seid. Dort erscheint dann später auf eurer Homepage der Text, bzw. die Navigation. Entfernt ihr die Platzhalter, so werdet ihr keinen Text sehen, sondern nur ein leeres Feld ^.~
Für Nicht Oyla + Myblog'er: Statt die Platzhalter müsst ihr euren Inhalt hineinschreiben. Das bedeutet im Grunde, ihr kopiert euren Grundcode und statt %content% schreibt ihr den kompletten Inhalt euerer Textseite hinein und speichert alles im Editor unter z.B. Testseite.html ab und ladet diese Seite bei eurem Hoster hoch. Dasselbe bei der Navigation, statt dem Platzhalter die komplette Linkadresse schreiben (Beispiel, wie sowas aussehen kann, bei dem Navigations Tutorial).
Eure spätere Willkommensseite müsst ihr index.html nennen (Achtung, unbedingt klein schreiben!), damit diese auch erscheint, sobald ihr eure normale Hp Adresse eingebt.

Nun habt ihr die Grundstücke für ein eigenes Layout. Probiert herum und testet aus ^.~ Am Schluss braucht ihr den Code nurnoch unter den Design Einstellungen (Eigenes Design) bei Oyla einfügen und abspeichern.
Viel Spaß ^-^ Falls es noch Fragen gibt, oder ich das Tutorial um bestimmte Sachen erweitern soll, schreibt mir ins Askme :}

(Copyright by Chriskizzmysun, kopieren ist strikt untersagt!)

Welcome here

× View with IE • Firefox ×
Willkommen auf meinem Blog, auf dem ich über meinen Alltag & alles was mich bewegt blogge. Viele verschiedene Themen, wie es mir grad in den Sinn kommt. Über Feedback freue ich mich & bei Gefallen, verfolgt meinen Blog mithilfe verschiedener Funktionen. Have Fun!