Ruminia
Es gibt schon ein Oylatutorial :/http://www.giatu.de/tutorial/32
am 25.11.2010 um 19:32 Uhr
Grafiken Flash HTML & CSS PHP & MySQL Javascript Fertige Skripte Anderes Statistik
|
|
Anzeigen
|
3x bewertet
Ich möchte euch hier beibringen wie man ein sauberes Coding für Olya.de erstellt.
Der Start
Fangen wir mit dem einfachsten an. Eine Person möchte eine Homepage erstellen, hat aber kaum HTML/CSS Erfahrung, aber will dennoch was präsentieren. Was macht man? Man geht zu Oyla.de. Oyla ist für jeden Einsteiger geeignet mit seinen Standard Designs und dem WYSIWYG-Editor. Einfach und schnell. Man geht nun auf die Seite, wo so aussieht:
Alle andere Seiten, die nicht so aussehen, gehören meist nicht dazu
Nun könnt ihr euch eine Homapage erstellen. Am besten überprüft ihr, ob euer Name noch zu haben ist. Denkt aber bitte daran, das ihr keine Sonderzeichen _-äüö etc. nicht benutzen könnt. Leerzeilen sind auch nicht erlaubt. Ich nenne die Seite nun moonwichtes. wenn ihr nun auf EureURL.oyla.de klickt sieht eure Page so aus:
Aber wir wollen dies ändern! Also gehen wir auf den Quicklogin oder auf der Oyla-Seite Direkt zum Login. Nun sehen wir den Admin-Bereich.
Nun geht ihr auf Design Vorlagen Eigenes Design und geht auf Status ändern Aktivieren. Der Code wo da jetzt steht kann man entweder löschen oder für seinen Code verwenden.
[h2]Fangen wir an! [/h2]
Wir haben uns nun ein Design erstellt die wir Header und Footer benannt haben. Diese 2 Bilder lädt man jetzt entweder auf Oyla hoch oder auf einen Bilderhoster wie Imgimg oder einem ähnlichen. Wir laden dies nun hoch. Und verwenden Link zum Vollbild.
Header und Footer
Grundgerüst
<HTML> </HTML> leitet zu Anfang den HTML Quelltext ein und beendet ihn in der letzten Zeile wieder.
<HEAD> </HEAD> teilt dem Browser mit: Hier beginnt der Kopf der Webseite und hier endet er. Im Kopfbereich des Quelltext (Header genannt) werden Einstellungen festgelegt, die noch vor dem Anzeigen der Seite geladen und übersetzt werden. Im Header steht nichts, was auf der eigentlichen Webseite erscheinen soll. Hier kämen z.B. Javascript Befehle oder CSS rein.
<TITLE> </TITLE> ist auch ein Befehl, der in den Header gehört. Innerhalb der Tags steht der Name der Webseite, der oben im Browserfenster als Bezeichnung des Browserfensters angezeigt wird.
<BODY> </BODY> schließt den Code ein, der vom Browser in die eigentliche Webseite übersetzt wird, sobald der Header geladen wurde. Man nennt diesen Abschnitt des Quelltextes Body.
Unterteilung
Damit man aber ein Aussehn bekommt, kommen Divs dazu. Bei Oyla werden meistens Divs mit Styles versehen. Ich möchte aber dazu gerne IDs benutzen.
CSS-Befehl
Damit diese Befehle auch ausgeführt werden, brauchen wir noch den CSS-Befehl. Den setzten wir im Header-Bereich mit <STYLE></STYLE> ein.
Nun wenn wir das erledigt haben, wären wir eigentlich fertig. Wir können aber noch die Farben für Texte, Überschriften und Links bestimmen.
Ende
Nun geht man auf Änderung speichern und klickt in der Navigation auf Deine Homepage. Fertig ist deine Homepage.
Der Start
Fangen wir mit dem einfachsten an. Eine Person möchte eine Homepage erstellen, hat aber kaum HTML/CSS Erfahrung, aber will dennoch was präsentieren. Was macht man? Man geht zu Oyla.de. Oyla ist für jeden Einsteiger geeignet mit seinen Standard Designs und dem WYSIWYG-Editor. Einfach und schnell. Man geht nun auf die Seite, wo so aussieht:
Alle andere Seiten, die nicht so aussehen, gehören meist nicht dazu
Nun könnt ihr euch eine Homapage erstellen. Am besten überprüft ihr, ob euer Name noch zu haben ist. Denkt aber bitte daran, das ihr keine Sonderzeichen _-äüö etc. nicht benutzen könnt. Leerzeilen sind auch nicht erlaubt. Ich nenne die Seite nun moonwichtes. wenn ihr nun auf EureURL.oyla.de klickt sieht eure Page so aus:
Aber wir wollen dies ändern! Also gehen wir auf den Quicklogin oder auf der Oyla-Seite Direkt zum Login. Nun sehen wir den Admin-Bereich.
Nun geht ihr auf Design Vorlagen Eigenes Design und geht auf Status ändern Aktivieren. Der Code wo da jetzt steht kann man entweder löschen oder für seinen Code verwenden.
[h2]Fangen wir an! [/h2]
Wir haben uns nun ein Design erstellt die wir Header und Footer benannt haben. Diese 2 Bilder lädt man jetzt entweder auf Oyla hoch oder auf einen Bilderhoster wie Imgimg oder einem ähnlichen. Wir laden dies nun hoch. Und verwenden Link zum Vollbild.
Grundgerüst
<html>
<head>
<title>Meine Webseite</title>
</head>
<body>
</body>
</html>
<HTML> </HTML> leitet zu Anfang den HTML Quelltext ein und beendet ihn in der letzten Zeile wieder.
<HEAD> </HEAD> teilt dem Browser mit: Hier beginnt der Kopf der Webseite und hier endet er. Im Kopfbereich des Quelltext (Header genannt) werden Einstellungen festgelegt, die noch vor dem Anzeigen der Seite geladen und übersetzt werden. Im Header steht nichts, was auf der eigentlichen Webseite erscheinen soll. Hier kämen z.B. Javascript Befehle oder CSS rein.
<TITLE> </TITLE> ist auch ein Befehl, der in den Header gehört. Innerhalb der Tags steht der Name der Webseite, der oben im Browserfenster als Bezeichnung des Browserfensters angezeigt wird.
<BODY> </BODY> schließt den Code ein, der vom Browser in die eigentliche Webseite übersetzt wird, sobald der Header geladen wurde. Man nennt diesen Abschnitt des Quelltextes Body.
Unterteilung
Damit man aber ein Aussehn bekommt, kommen Divs dazu. Bei Oyla werden meistens Divs mit Styles versehen. Ich möchte aber dazu gerne IDs benutzen.
<html>
<head>
<title>Meine Webseite</title>
</head>
<body>
<div id="header"></div>
<div id="content">%content%</div>
<div id="navigation">%navigation_V%</div>
</body>
</html>CSS-Befehl
Damit diese Befehle auch ausgeführt werden, brauchen wir noch den CSS-Befehl. Den setzten wir im Header-Bereich mit <STYLE></STYLE> ein.
<style>
body {
background: url(http://s3.imgimg.de/uploads/bge6572cc2jpg.jpg);
}
#header {
background: url(http://s3.imgimg.de/uploads/headercd11c815jpg.jpg);
position: absolute;
left: 0px;
top: 0px;
width: 1000px;
height: 600px;
}
#content{
overflow:auto;
position: absolute;
left: 23px;
top: 256px;
width: 724px;
height: 700px;
}
#navigation{
position: absolute;
left: 758px;
top: 357px;
width: 217px;
height: 459px;
}
</style>Nun wenn wir das erledigt haben, wären wir eigentlich fertig. Wir können aber noch die Farben für Texte, Überschriften und Links bestimmen.
<style>
body {
background: url(http://s3.imgimg.de/uploads/bge6572cc2jpg.jpg);
}
#header {
background: url(http://s3.imgimg.de/uploads/headercd11c815jpg.jpg);
position: absolute;
left: 0px;
top: 0px;
width: 1000px;
height: 600px;
}
#content{
overflow:auto;
position: absolute;
left: 23px;
top: 256px;
width: 724px;
height: 700px;
}
#navigation{
position: absolute;
left: 758px;
top: 357px;
width: 217px;
height: 459px;
}
p, pre{
color:#333333;
font: 0.9em "Times New Roman", Times, serif;
}
h1 {
color:#9BC597;
text-decoration:none;
border-bottom:dashed 1px #000000;
font: 1.4em;
}
h2 {
color:#D9AFA3;
text-decoration:none;
border-bottom:dashed 1px #000000;
font: 1.2em;
}
a:link, a:active, a:visited {
color:#FF9B02;
text-decoration:none;
}
a:hover {
color:#FFFFFF;
text-decoration:none;
}
</style>Ende
Nun geht man auf Änderung speichern und klickt in der Navigation auf Deine Homepage. Fertig ist deine Homepage.
2 Kommentare
http://www.giatu.de/tutorial/32
SmaX
Hey,dein Tutorial ist ganz ok, allerdings sind ein paar Satzbaufehler drin und irgendwie klingt das (jedenfalls am Anfang) wie wenn du Werbung für diese Seite machen willst.
Ansonsten Standardbefehle bei CSS sowie Html.
MfG SmaX