am 22.08.2007 um 20:59 Uhr
Grafiken Flash HTML & CSS PHP & MySQL Javascript Fertige Skripte Anderes Statistik
|
|
Anzeigen
|
4x bewertet
Von vielen Seiten höre ich immer wieder, dass sie Oyla-Layouts wollen. Obwohl... eigentlich kann fast
jedes Layout ein Oyla-Layout werden, wenn es auf html basiert und kein Frame ist ^^ Und wie man ein
Layout "umwandelt" möchte ich im folgenden erläutern.
Dabei gehe ich davon aus, dass ihr wisst, wie man normalerweise mit Oyla umgeht. Das hier ist kein
Was-ist-Oyla-Kurs, sondern nur eine Ergänzung ;)
1) Ich gehe jetzt einfach davon aus, dass ihr einen Oyla-Account habt (bei oyla.de) und ein Div oder Table
wie dieses Beispiellayout hier:
Klick
Um davon das nun Oyla anzupassen, muss man zunächst die zip-Datei herunterladen, wie es auf den meisten Sites möglich ist:
Klick
2) Diese zip-Datei könnt ihr nun mit einem Programm wie winrar oder einfach so in Windows XP entpacken über
rechtsklick --> entpacken
3) Im Ordner findet ihr dann 2 Bilder (.jpg-Dateien) und eine html-Datei.
4) Zunächst öffnet ihr bitte die index.html per rechtsklick --> öffnen mit --> editor; dann habt ihr
den Quelltext vor euch.
5) Hier sind oft zur Orientierung so genannte Kommentare zu finden, wie z.B. <!---NAVIGATION--->
D.h. dass der Code darunter zur Navigation gehört.
In diesem Fall sieht der Navigationscode so aus:
Dabei kann/soll bei Oyla ein Teil ersetzt werden, damit es dann folgendermaßen aussieht:
Erklärungen:
%navigation_v% = vertikale Navigation, d.h. die Links sind untereinander angeordnet. Es gibt aber
auch %navigation_h% , d.h. eine horizontale Navigation, in der die Links nebeneinander angeordnet
sind. Das ist hier aber nicht sinnvoll.
6) Dann gibt es den "Titl-Code", der folgendermaßen aussieht:
Der soll nun mit %titel% ersetzt werden, d.h.
Das ist notwendig, damit der Titel eurer Site auch im Browser erscheint.
7) Jetzt folgt der Content, d.h. der Inhalt der Site, der hier im Code auch gekennzeichnet ist
und folgendermaßen aussieht:
das blabla soll nun mit %content% ersetzt werden, damit eure Inhalte auch auf der Site erscheinen.
D.h. folgendermaßen:
8) Der 8. Schritt ist beim Beispiel nicht notwendig, aber in den meisten Fällen ist die CSS-Datei
(z.B. style.css) ausgelagert, d.h. sie wird erst importiert mit folgendem Code (steht immer weit
oben):
Wenn das der Fall ist, solltet ihr diese Zeile durch folgendes ersetzen:
Diese CSS-Datei lässt sich gemäß der html-Datei öffnen (also rechtsklick --> öffnen mit --> editor)
und den Inhalt könnt ihr dann kopieren (Strg + A --> Strg + C) und dann das X im oberen Code damit
ersetzen, indem ihr es einfügt (Strg + V).
9) Als letztes fehlen nun noch die Bilder, die sich mit Oyla einfach hochladen lassen.
Also loggt ihr euch dort zunächst ein und geht dann auf
Bilder und Dateien --> Bilder und Dateien --> Dateien hochladen
Hier wählt ihr die Art --> Bild aus und sucht dann die beiden Bilder (in diesem Fall rocken2.jpg &
bg.jpg) heraus, um sie hochzuladen. Danach klickt ihr auf "Jetzt hochladen"
Im Bilderverzeichnis unter Bilder und Dateien --> Bilder und Dateien --> Bilderverzeichnis findet ihr
eure hochgeladenen Bilder wieder. Klickt ihr auf eines, findet ihr auch den Bild-Link, den ihr
benötigt neben "Pfad des Bildes kopieren".
Diesen Pfad kopiert ihr dann auch und ersetzt ihn gegen bg.jpg und rocken.jpg
also z.B.
Achtet dabei darauf, auch das jeweilige Bild mit der passenden URL/Link zu ersetzen ;)
10) Jetzt ist der Code fertig und muss nur noch eingefügt werden. Aber wo? Hier:
Einstellungen ---> Design Vorlagen ---> Eigenes Design
Unter 2.) findet ihr "Eigenes Design aktivieren", was ihr auch tun solltet.
Danach fügt ihr euren Code unter Punkt 3.) in dem freien Feld ein und betätigt "Änderungen speichern"
(also den linken Button darunter)
11) Das wars dann auch eigentlich, wenn ihr noch Fragen habt, könnt ihr euch an
mich wenden ^^
jedes Layout ein Oyla-Layout werden, wenn es auf html basiert und kein Frame ist ^^ Und wie man ein
Layout "umwandelt" möchte ich im folgenden erläutern.
Dabei gehe ich davon aus, dass ihr wisst, wie man normalerweise mit Oyla umgeht. Das hier ist kein
Was-ist-Oyla-Kurs, sondern nur eine Ergänzung ;)
1) Ich gehe jetzt einfach davon aus, dass ihr einen Oyla-Account habt (bei oyla.de) und ein Div oder Table
wie dieses Beispiellayout hier:
Klick
Um davon das nun Oyla anzupassen, muss man zunächst die zip-Datei herunterladen, wie es auf den meisten Sites möglich ist:
Klick
2) Diese zip-Datei könnt ihr nun mit einem Programm wie winrar oder einfach so in Windows XP entpacken über
rechtsklick --> entpacken
3) Im Ordner findet ihr dann 2 Bilder (.jpg-Dateien) und eine html-Datei.
4) Zunächst öffnet ihr bitte die index.html per rechtsklick --> öffnen mit --> editor; dann habt ihr
den Quelltext vor euch.
5) Hier sind oft zur Orientierung so genannte Kommentare zu finden, wie z.B. <!---NAVIGATION--->
D.h. dass der Code darunter zur Navigation gehört.
In diesem Fall sieht der Navigationscode so aus:
<!---NAVIGATION--->
<div style="position: absolute; left: 613px; top: 290px; width: 188px;">
<h1>Header</h1>
<a href="index.html">Link</a><br>
<a href="index.html">Link</a><br>
<a href="index.html">Link</a><br>
<a href="index.html">Link</a><br>
<a href="index.html">Link</a><br>
<a href="index.html">Link</a><br>
</div>
Dabei kann/soll bei Oyla ein Teil ersetzt werden, damit es dann folgendermaßen aussieht:
<div style="position: absolute; left: 613px; top: 290px; width: 188px;">
%navigation_v%
</div>
Erklärungen:
%navigation_v% = vertikale Navigation, d.h. die Links sind untereinander angeordnet. Es gibt aber
auch %navigation_h% , d.h. eine horizontale Navigation, in der die Links nebeneinander angeordnet
sind. Das ist hier aber nicht sinnvoll.
6) Dann gibt es den "Titl-Code", der folgendermaßen aussieht:
<!---TITEL--->
<title>ExtraOrdinary</title>
Der soll nun mit %titel% ersetzt werden, d.h.
<title>%titel%</title>
Das ist notwendig, damit der Titel eurer Site auch im Browser erscheint.
7) Jetzt folgt der Content, d.h. der Inhalt der Site, der hier im Code auch gekennzeichnet ist
und folgendermaßen aussieht:
<!---CONTENT--->
<div style="position: absolute; left: 24px; top: 290px; width: 575px;">
blablabla
</div>
das blabla soll nun mit %content% ersetzt werden, damit eure Inhalte auch auf der Site erscheinen.
D.h. folgendermaßen:
<div style="position: absolute; left: 24px; top: 290px; width: 575px;">
%content%
</div>
8) Der 8. Schritt ist beim Beispiel nicht notwendig, aber in den meisten Fällen ist die CSS-Datei
(z.B. style.css) ausgelagert, d.h. sie wird erst importiert mit folgendem Code (steht immer weit
oben):
<link rel="stylesheet" href="style.css" type="text/css">
Wenn das der Fall ist, solltet ihr diese Zeile durch folgendes ersetzen:
<style type="text/css">X</STYLE>
Diese CSS-Datei lässt sich gemäß der html-Datei öffnen (also rechtsklick --> öffnen mit --> editor)
und den Inhalt könnt ihr dann kopieren (Strg + A --> Strg + C) und dann das X im oberen Code damit
ersetzen, indem ihr es einfügt (Strg + V).
9) Als letztes fehlen nun noch die Bilder, die sich mit Oyla einfach hochladen lassen.
Also loggt ihr euch dort zunächst ein und geht dann auf
Bilder und Dateien --> Bilder und Dateien --> Dateien hochladen
Hier wählt ihr die Art --> Bild aus und sucht dann die beiden Bilder (in diesem Fall rocken2.jpg &
bg.jpg) heraus, um sie hochzuladen. Danach klickt ihr auf "Jetzt hochladen"
Im Bilderverzeichnis unter Bilder und Dateien --> Bilder und Dateien --> Bilderverzeichnis findet ihr
eure hochgeladenen Bilder wieder. Klickt ihr auf eines, findet ihr auch den Bild-Link, den ihr
benötigt neben "Pfad des Bildes kopieren".
Diesen Pfad kopiert ihr dann auch und ersetzt ihn gegen bg.jpg und rocken.jpg
<!---LAYOUT--->
<body topmargin="0" leftmargin="0" background="bg.jpg" bgcolor="#000000">
<img src="rocken2.jpg" alt="" border="0">
also z.B.
<!---LAYOUT--->
<body topmargin="0" leftmargin="0" background="http://www.oyla17.de/userdaten/31950238/bilder/bg.jpg" bgcolor="#000000">
<img src="http://www.oyla17.de/userdaten/31950238/bilder/rocken2.jpg" alt="" border="0">
Achtet dabei darauf, auch das jeweilige Bild mit der passenden URL/Link zu ersetzen ;)
10) Jetzt ist der Code fertig und muss nur noch eingefügt werden. Aber wo? Hier:
Einstellungen ---> Design Vorlagen ---> Eigenes Design
Unter 2.) findet ihr "Eigenes Design aktivieren", was ihr auch tun solltet.
Danach fügt ihr euren Code unter Punkt 3.) in dem freien Feld ein und betätigt "Änderungen speichern"
(also den linken Button darunter)
11) Das wars dann auch eigentlich, wenn ihr noch Fragen habt, könnt ihr euch an
mich wenden ^^
3 Kommentare
Danke.Habs gemacht und es sieht super aus.Vielen Dank.
Frannnnni
Klasse Tut! Danke, hat mir echt geholfen, 6 Herzen
am 06.01.2008 um 13:39 Uhr
Licht100
die links gehen nicht.sry deswegen nur 4. super tut
am 24.12.2009 um 16:10 Uhr