bebugs Blog


Willkommen auf meiner Homepage. Wer Lust hat kann sich gern über Messenger oder im gulli irc melden.

ICQ: 164621172
MSN: nuqer@hotmail.de

GreenfieldGrafix
-Affi-
-Affi-
-Affi-
-Affi-
-Affi-
-Affi-
-Affi-
-Affi-
Wer eingetragen werden möchte meldet sich einfach

Wir haben bezahlt!


Buttonnetzwerk für ein freies Internet

Disclaimer
Abonieren

Artikel

Lockerz invites

Atomexplosion
Barbie jeeptuning
Batman 1966
Geiler Klingelton
Der große blaue Bär in da House
Die Elite des Internets 1
Die Elite des Internets 2
Die Elite des Internets 3
eBooks
Eigenes Layout designen
Fahrradfahrer
Farbkombinationen
Finanzkrisengewinner
Fontstruct
Gema Rohlinge
Head Tracking
Herzblatt Synchro
ICQ-Spam
Informiert Wolfgang
Lars the Emo Kid
Lockpicks herstellen
Magnetisches Armband
Matrix Flash
Nerdwebsites
Tilt-Shift-Effekt
Online TV Recorder
Orisinal
Out Drink Santa
Out of Bounds
Sandboxie
Shepard-Skala
Stickman Exodus
Super Mario World
Ultimate Defrag 1
Ultimate Defrag 2
USB-Stick Autorun
Von wegen Klimaschwindel
WCF Tutorial 1
WCF Tutorial 2"
---

Mein neuer Blog

 

Gratis bloggen bei
myblog.de

Gratis bloggen bei
myblog.de

Blogverzeichnis - Blog Verzeichnis bloggerei.de
Eigenes Layout erstellen

Da ich lange keine Zeit mehr gehabt habe zum Bloggen fang ich jetzt mal wieder an. Da ich nen neuen Nick benutze übertrage ich die nützlichen Tuts hier von Zeit zu Zeit. Viel Spaß.

Ich fang damit an, die Layouts du beschreiben die ein kleines Fenster in der Mitte haben.

Da ich keine Lust hab die ganzen HTML-Formatierungen zu beschreiben solltet ihr euch auf jeden Fall ein wenig mit HTML auskennen. Es reicht aber auch aus, wenn ihr einen HTML-Editor besitzt, der Ebenen darstellen kann. Hier eine kleine kostenpflichtige Auswahl: Adobe GoLive oder Macromedia Dreamweaver. Wer möchte kann die Seite auch mit dem Editor bearbeiten. Die txt-Endung muss hierzu einfach in .html oder .htm geändert werden. Es kann aber auch direkt im Weblog gearbeitet werden indem ihr den Code unter Vollprofi einfügt.

So, als erstes brauchen wir ein Bild, dass groß genug ist und einen Freiraum für den Text bietet. Ich hab hier mal kurz eines erstellt.
Bild
Und dazu auch die Hintergrundtextur.
Textur

Wenn man beides hat kann man anfangen das Standartgerüst für die Homepage aufzulegen. Das sieht ungefähr so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Seitenname
</head>

<body>

</body>

</html>

Hintergrund

Zwischen den < title> < /title> tags könnt ihr den Namen eurer Seite schreiben. Ist aber nicht so wichtig.
Um einen sich wiederholenden Hintergrund einzufügen muss die URL bekannt sein und mit folgendem Code in dem < body> Tag eingefügt werden:

background="Bild URL"

In meinem Fall sieht der Code dann so aus:

<body background="http://sharkospy.sh.funpic.de/designs/elisha/elishatex.jpg">

Div Tags

Wenn man sich die Seite nun anschaut ist sie vollkommen von der Textur überzogen. Als nächstes wird das Hauptbild eingefügt. Das kann auf die alte Weise mit Tabellen oder auf die neumodische Weise mit < div> tags gemacht werden. Solche < div> tags sind Ebenen, die beliebig verschachtelt werden können. Man kann sie sich wie Klarsicht-Folien vorstellen die man übereinander legt. Man sieht immer nur das, was die darüber liegende Folie nicht verdeckt. Das gute an diesen Tags ist, die Möglichkeit sie beliebig auf der Seite auszurichten.
Diese Ebenen orientieren sich an dem Nullpunkt der Seite. Der Nullpunkt liegt ganz oben links. (Es gibt ausnahmen, die ich hier allerdings nicht beschreiben will) Um den < div> tag einzufügen gibt es 2 Möglichkeiten.

Die eine ist die direkte Eingabe der Werte im < div> selber. Dieser wird zwischen die < body> tags kopiert.

<body>
<div style="position: absolute; width: 300px; height: 300px; z-index: 1; left: 100px; top: 100px" id="Ebene1"></div>
</body>

Das sollte allerdings nicht gemacht werden, da es zum schlechten Stil gehört. Zu den Parametern kommen wir gleich.

Info:
Wenn ich schreibe, dass ihr den Code zwischen zwei Tags einfügen sollt so wie < tag> code < /tag>. So kann es sein, dass die Tags noch andere Werte enthalten. < tag ganzganzganzganzganzganz viel Zeug> < /tag>. Wichtig ist hierbei den Code immer zwischen die > < Zeichen zu setzen. Alles andere kann außer acht gelassen werden. Falls ihr es noch nicht gemerkt habt, beginnt ein Tag immer mit seinem Namen und hört mit einem / und seinem Namen auf. Zwischen den Tags können beliebig viele Leerzeichen und Absätze geschrieben werden.

Die zweite Möglichkeit ist die Werte für die Ebene in einem < style> tag auszulagern. Ein < style> tag wird zwischen den < head> < /head> tag geschrieben und sieht so aus:

<style type="text/css" media="screen">
<!--
--></style>

Der Code für den < style> tag wird zwischen dem < !-- und dem -- > geschrieben. Alles was in diesem Code steht wird für den grundlegenden Aufbau der Seite ignoriert. (Um es einfach zu fassen) Man kann so z.B. auch einen eigenen Kommentar überall in den Code einfügen, der auf der Homepage selber nicht zu sehen ist. Das hilft beim erstellen der Seite und kann anderen helfen mit dem Code umzugehen. Beispiel:

<!-- Ab hier beginnt mein Text über ..... bitte nicht kopieren-->

Nun schreiben wir den selben Code für die Ebene wie oben schon. Diesmal aber in dem < style> tag.

#Ebene1 { position: absolute; width: 300px; height: 300px; z-index: 1; left: 100px; top: 100px; }

Und im < body> < /body> tag fügen wird nur noch den < div> tag ein.

<div id="Ebene1"></div>

Jeweils da wo Ebene1 steht könnte auch jeder andere Name stehen. Es muss jedoch überall der gleiche sein. Für eine bessere Übersichtlichkeit kann man auch Zeilenumbrüche zwischen den einzelnen Parametern einfügen (direkt nach dem ; ). Die Reihenfolge der einzelnen Parametern ist egal.

#Ebene1 {
position: absolute;
width: 300px;
height: 300px;
z-index: 1;
left: 100px;
top: 100px;
}

Parameter

position: WERT; Hier gibt es mehrere Bezugspunkte um die Ebene auszurichten. Wir benötigen allerdings nur "absolute". Dieser sagt aus, dass der absolute Nullpunkt als Bezugspunkt genommen werden soll. Also oben links.

z-index: WERT; Der Wert wird in Zahlen angegeben, je höher die Zahl desto weiter oben befindet sich die Ebene. Eine Ebene mit der Zahl 1 wird z.B. von einer Ebene mit der Zahl 2 überdeckt und ist deswegen nicht sichtbar.

left: WERT; Gibt den linken Abstand der Ebene gegenüber dem Nullpunkt (linker Seitenrand) an.

top: WERT; Gibt den oberen Abstand der Ebene gegenüber dem Nullpunkt (Oberer Seitenrand) an.

width: WERT; Gibt die Breite der Ebene an.

height: WERT; Gibt die Höhe der Ebene an.

Bei Werten die eine Länge beschreiben wird der Abstand in Pixel gemessen. Pixel sind die Bildpunkte aus denen sich ein Bild auf dem Monitor zusammensetzt. Bei einer Monitorauflösung von 800x600 sind es z.B. 800 Pixel in die Breite und 600 in die Höhe. Ihr solltet mit den Abständen später ein wenig rumspielen um damit umgehen zu lernen. Da jeder Monitor eine andere Einstellung hat sieht eure später entworfene Seite nachher nicht überall gleich aus. Da die Schriftgröße sich allerdings auch auf die Auflösung des Monitors ausrichtet ist kaum davon auszugehen, dass dadurch euer Design verfälscht wird. Ihr solltet euch deswegen keine Sorgen machen. Das einzige was vorkommen kann ist, dass euer Bild bei dem einen mehr rechts oder weiter unten ist als bei dem anderen. Es gibt die Möglichkeit durch % angaben etwas auszurichten, dass es überall gleich aussieht. Das ist allerdings schwieriger und führ nicht selten zu nervigen Schwierigkeiten. Die Werte width und height sollten die gleiche Größe wie das Bild haben. Es ist zwar nicht zwingend notwenig, sollte aber formeshalber stimmen.

Bild einfügen

Das Bild wird mit Folgendem Code im < div> < /div> tag eingefügt:

<img border="0" xsrc="BILD-URL" width="200" height="200">

Der Border Parameter gibt dem Bild einen Rahmen. Dieser Wert sollte auf 0 bleiben. In src wird die URL von dem Bild, dass ihr haben möchtet eingefügt. Die Parameter width und height sind schon bekannt und müssen die gleiche Größe wie das Bild haben. Ich habe die Werte ein wenig an mein Bild angepasst. Wenn alles fertig ist sollte unser Code nun so aussehen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css" media="screen"><!--
#Ebene1 {
height: 400px;
width: 690px;
left: 60px;
top: 50px;
position: absolute;
}
--></style>

</head>

<body background="http://sharkospy.sh.funpic.de/designs/elisha/elishatex.jpg">
<div id="Ebene1">
<img border="0" xsrc="http://sharkospy.sh.funpic.de/designs/elisha/elisha.jpg" alt="" height="389" width="677">
</body>

</html>

Beilspiellink

Textrahmen

Als nächstes wird der Bereich eingefügt, der den eigentlichen Inhalt der Seite enthält. Der Content. Das ist der Platz in dem die Blognachrichten stehen werden. Dieser wird auch mit einem < div> tag eingefügt. Ihr richtet ihn mit der dafür vorgesehenen Stelle im Bild aus. Ganz wichtig ist dabei, dass ihr nicht den selben Namen wie im ersten < div> tag nehmt und euer z-index eine Ebene höher ist. Ihr solltet den Code dafür in das selbe < style> < /style> tag einfügen. Viele (ganz besonders die, die nur von anderen Kopieren) machen das nicht. Das macht den Code jedoch übersichtlicher und einfacher zu lesen.

#Ebene2 {
height: 332px;
width: 354px;
left: 355px;
top: 75px;
position: absolute;
z-index: 2;
overflow: auto;
}

In den < div> tag für die zweite Ebene schreibt ihr nun das Content (für euren Inhalt) und das Poweredby (Für die Myblog Werbung). Diese beiden Codestellen sagen nichts aus. Es sind nur von myblog.de die Standartnamen für ihren Code. An diesen stellen werden automatisch die Inhalte deines Weblogs eingefügt. Glaubt aber nicht, wenn ihr Powerdedby weglasst, dass es damit keine Werbung mehr auf eurer Seite gibt. Die Werbung wird dann automatisch ans Ende eures < body> tags geschrieben.

<div id="Ebene2">{PLACE_CONTENT}{PLACE_POWEREDBY}</div>

So nun währe das auch geschafft. Es gibt allerdings ein kleines Problem dabei. Die Webloggröße bleib gleich und eine nervige Scrollbar ist auf der unteren Seite eures Textes zu erkennen.

Beispiellink

Dieses entsteht dadurch, dass eure Weblog-Einträge auf eine Breite von 480 Pixel mit einer Tabelle fixiert werden. Um die Tabelle dennoch kleiner oder größer zu bekommen gibt es einen Trick. Die Tabelle greift auf eine Klasse namens "Inhalttable" zu. Wenn wir nun dieser Klasse eine eigene Breite zuweisen, können wir damit die Tabellenbreite verändern. Den Code dafür gebt ihr wieder im < style> < /style> Tag ein. Den Punkt vor inhalttable nicht vergessen!

.inhaltetable {
width: 750;
}

Navigationsleiste

Die Navigationsleiste wird (wie sollte es auch anders sein) auch mit einem < div> tag geschrieben. Hier können alle Links zu den Seiten eingetragen werden. Wie das Funktioniert wird auf Zahlreichen anderen Weblogseiten beschrieben. Ich mach auch noch ein Tutorial dazu. Doch das ein anderes mal. Hier nochmal der gesamte Code für das Design

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css" media="screen"><!--
#Ebene1 {
height: 400px;
width: 690px;
left: 60px;
top: 50px;
position: absolute;
visibility: visible;
}

#Ebene2 {
height: 332px;
width: 354px;
left: 355px;
top: 75px;
position: absolute;
z-index: 2;
overflow: auto;
visibility: visible;
}

.inhaltetable {
width: 335;
}


#Ebene3 {
height: 345px;
width: 100px;
left: 760px;
top: 75px;
position: absolute;
}
--></style>
</head>

<body background="http://sharkospy.sh.funpic.de/designs/elisha/elishatex.jpg">
<div id="Ebene1">
<img border="0" xsrc="http://sharkospy.sh.funpic.de/designs/elisha/elisha.jpg" alt="" height="389" width="677" /></div>
<div id="Ebene2">
<p><font size="2" color="white">{PLACE_CONTENT}{PLACE_POWEREDBY}</font></p>
</div>
<div id="Ebene3">
<a xhref="a">Link1</a><br />
<a xhref="b">Link2</a><br />
<a xhref="c">Link3</a><br />
<a xhref="d">Link4</a><br />
<a xhref="e">Link5</a>
<p><a xhref="l">Link6</a><br />
<a xhref="m">Link7</a>

<a xhref="n">Link8</a><br />
<a xhref="o">Link9</a></p>
<p><a xhref="http://myblog.de/sharkospy" target="_blank">Designer</a></p>
</div>
</body>

</html>





24.2.07 12:17