Hallo In diesem Tutorial stelle ich euch einen Mustercode zurverfügung, mit denen Hilfe du das coden für endless Myblog Layouts lernen kannst
Aber um zu verstehen, was wir hier machen, musst du erstmal wissen was
Endless Layouts sind.
ENDLESS (Dt. Endloss) sind Layouts, bei denen sich Navigation & Conent immer der Länge des Textes anpassen. da sheißt also, das es innerhalb nichts zu scrollen gibt.
Bevor wir anfangen, solltest du dich vielleicht einigermaßen mit CSS auskennen.
Bespiel-Layout:
HIER Einleitung Es wäre sinnvoll wenn du schonmal ein layout designt hast. Da dies kein Grafik Tutorial ist, werde ich es hier nicht erklären !
In dem layout habe ich einige sachen großgeschrieben (z.B: #FARBE) das Großgeschriebene kann die schriftart-größe doer Farbe ect. Sein.
Wenn z.B jeztzt #FARBE steht, musst du die ′FARBE′ mit einem HEXCODE ersetzen,
SCHRITT EINS Bei FARBE musst du den Hexcode für die Hintergrundfarbe einfügen.
<html>
<head>
<style type="text/css">
body {
background-color: #FARBE;
background-position: top left;
background-repeat: repeat-y;
background-attachment:scroll;
}
SCHRITT ZWEI Jetzt werden wir die Stylecheets und den Body Coden, -Sprich farbe,schriftgröße ect.
B;Fett
I;Kursiv
U;Unterstrichen
S;Durchgestrichen
body {
font-family: SCHRIFTART;
color: #FARBE;
font-size: GRÖßE DER SCHRIFTpx;
font-weight: normal;
text-decoration: none;
text-transform: none;
}
b, strong {
color: #FARBE;
font-family: SCHRIFTART;
letter-spacing: 1px;
}
u {
color: #FARBE;
font-family: SCHRIFTART;
letter-spacing: 1px;
text-decoration: underline;
border-bottom: 1px dotted #FARBE;
}
i, em {
color: #FARBE;
font-family: SCHRIFTART;
letter-spacing: 1px;
}
s, del {
color: #FARBE;
font-family: SCHRIFTART;
letter-spacing: 1px;
}
SCHRITT DREI Jetzt coden wir die Überschriften in der navi & Im Conent, dort musst du abermals Frabe,schriftart,größe ect. einsetzen.
Die ′UNDERLINE′ bedeutet, das die Überschrift unterstrichen wird, du kannst dir etwas beliebiges aussuchen, und es einsetzten,
solid: gerader strich
dotted: gepunktet
dashed: gestrichelt
double: doppelt unterstrichen
title {
font-family: SCHRIFTART;
font-size: 12;
display: block;
color: #FARBE;
line-height: 12px;
text-decoration: none;
margin-bottom: 2px;
text-align: center;
letter-spacing: 1px;
font-weight: normal;
border-bottom: 1px solid #FARBE;
}
SCHRITT VIER Nun fangen wir an die Textarea′s und Inputs zu coden, Textareas sind kommentarboxen, in denen auch oft layouts Codes Ect. Eingefügt wird, (So würde das aussehen, in HTML: <textarea>DER CODE</textarea>)
Inputs sind die kleinenboxen z.B bei den kommentaren, i denen Man den namen, die homepage adresse undsoweiter einträgt.
Bei "width" und "height" musst du die Breite und die Höhe der Textarea angeben.
Wenn du wen betsimmtes Hintergrundbild haben willst, musst du es designen & dann wieder bei tinypic.com hochladen, und die URL bei
background-image: url(′URL VOM EIGENEN HINTERGRUND′); Eintragen. wenn du nur Frabenwillst, einfach den code löschen(also: background-image: url(′URL VOM EIGENEN HINTERGRUND′); entfernen)
TEXTAREA, INPUT {
color: #FARBE;
border: 2px solid #FARBE;
font-family: SCHRIFTART;
border: 1px dotted #FARBE;
}
TEXTAREA {
background-image: url(′URL VOM EIGENEN HINTERGRUND′);
width: BREITE DER TEXTAREApx;
height: HÖHE DER TEXTAREApx;
font-family: SCHRIFTART;
color: #FARBE;
border: 1px dotted #FARBE;
}
.inhaltetable {
width: 100%;
}
SCHRITT FÜNF Jetzt werden wir die Text- und Navilinks gecodet. Wenn du wieder willst, kannst du auch deinen eigenen Hovereffekt (Hover: Das, was erscheint beim Drüberfahren der Maus) erstellen. Das ist das gleiche, wie bei der Textarea. Einfach ein kleines Bildchen designen und wieder die URL angeben. Willst du es nicht, denncode für das Bildchen (nur den Bildercode bei a.Navi:hover{). (Wenn du beim Hover eines willst, musst du das "background-color: #FARBE;" entfernen)
a:link, a:visited, a:active {
color: #FARBE;
font-size: GRÖßE DER SCHRIFT;
font-family: SCHRIFTART;
text-decoration: none;
}
a:hover {
color: #FARBE;
font-size: GRÖßE DER SCHRIFT;
font-family: SCHRIFTART;
text-decoration: none;
border-bottom: 1px solid #FARBE;
}
a.navi {
color: #FARBE;
background-color: #FARBE;
font-size: GRÖßE DER SCHRIFT;
font-family: SCHRIFTART;
display: block;
border-bottom: 0px solid #FARBE;
border: 1px solid #FARBE;
text-decoration: none;
}
a.navi:hover {
color: #FARBE;
font-size: GRÖßE DER SCHRIFT;
font-family: SCHRIFTART;
background-image: url(′URL VOM EIGENEN HOVER EFFEKT′);}
display: block;
border:1px solid #FARBE;
background-color: #FARBE;
text-decoration: none;
cursor: crosshair;
}
</style>
</head>
SCHRITT SECHS Nun werden wir die Angaben für das Layout machen,
das dies ein Endless Layout wird, wäre es gut wenn du eine LINE hast.
diese ist ein stück aus dem coennt & dme hintergrund,
Hier ist das Layout und die line zusehen.
Das LayoutDie Line <body bgcolor=#FARBE background="LINE DES lAYOUTS">
<IMG SRC="LAYOUT" WIDTH=BREITE DES LAYOUTS HEIGHT=HÖHE DES LAYOUTS BORDER=0 STYLE="position:absolute; top: 0; left:0">
SCHRITT SIEBEN Nun werden wir die Navi Coden. wir müssen Koordinaten für die navigation eingeben, damit die Navigation weiß wo ihr platz ist,
TOP;Höhe
Left;Links
Weidht;Breit/ Inhalt
Damit du weißt wie du diese Ausmisst, werde ich es erklären.
Ich benutze gimp, geht auf Das werkzeug:MAßSTAB und macht bei den Wekzeugeinstellungen bei Info-Fenster verwenden ein häckchen, Nund misst du aus du ziehst mit der maus von der einen zur anderen stelle wo es enden soll, damit du weißt wie es funktioniert habe ich 3 Screens erstellt, auf allen ist das Info-Fenster drauf, Bitte schau sie dir auch an =)
Screen zu ′widht′ ausmessen Screen zu ′left′ ausmessen Screen zu ′Top′ ausmessen <<div align="center"
style="solid; background:;
border-collapse: collapse;
position: absolute;
font-size: GRÖßE DER SCHRIFT;
width: PIXELpx;
left: PIXELpx;
top: PIXELpx ">
<p class="title"> Überschrift </p>
<a href="URL" class="navi">Linkname</a>
<a href="URL" class="navi">Linkname</a>
<a href="URL" class="navi">Linkname</a>
<br>
<p class="title"> Überschrift </p>
<a href="URL" class="navi">Linkname</a>
<a href="URL" class="navi">Linkname</a>
<br>
<p class="title"> Überschrift </p>
<a href="URL" class="navi">Linkname</a>
<a href="URL" class="navi">Linkname</a>
<a href="URL" class="navi">Linkname</a>
</div>
SCHRITT ACHT Nun müssen wir die Koordinaten für den ′CONENT′ außmessen, da sfunktioniert egnau so wie bei der navi, nur einfach müsst ihr den conent abmeßen ,
<div align="justify"
id="entry"
class="inhaltetable"
style="border: 0px solid #000000;
overflow: auto;
position: absolute;
width: PIXELpx;
left: PIXELpx;
top: PIXELpx">
:CONTENT_HIER:
</div>
<div style="visibility: hidden;
position: absolute;
right: 0;
bottom: 0;">
{PLACE_POWEREDBY}
</div>
</body>
</html>
So das war es.
Wenn ihr fragen habt wendet euch einfach an mich, Lob & kritik ist immer erwünscht.
Zu screens, ich finde bei einem mustercode kann man keine screens machen, es sei eben bei sowas wie bei dem koordinaten außmessen
Ich wusste nicht egnau wo ein msutercode hingehört, deswegen ahbe ich ihn zu Codeschnipsel gemacht, wenn es falsch ist tut es mir sehr leid.
Lg.
Licht100
Anzeigen
Papierherz
Die Angaben für Navi und Content hättest du auch einfach in die css schreiben können zb .content { code } und dies dann einfach im Body aufrufen <div class="content"> INHALT </div>.