Design-Tutorial
Hier möchte ich Euch in wenigen Schritten erklären,wie Ihr das Baukasten-Design "CSS" frei gestalten könnt.
Diese Beschreibung ist nur eine von vielen Möglichkeiten !
Es gibt viele verschiedene Möglichkeiten das zu machen.
- einloggen in die Homepage
- auf "Design einstellen"
- wählt dort das Design "CSS" aus
- Eure Seiten-Inhalte werden übernommen
- Inhalt Eurer "rechten Boxen" werden nicht übernommen
- diesen müsstet Ihr Euch kopieren und im neuen Design einfügen
| Schritt 1 : entfernen unnötiger Klassen |
|---|
| Wir entfernen zunächst all die Klassen, die wir nicht benötigen: - auf "Design einstellen" - auf "Erweiterte Einstellungen" - ganz unten das Feld "css ohne style-tags" - ohne "style-tags" heisst: - kein <style type="text/css"> vor dem CSS-Code - kein </style> am Ende des CSS-Codes - füge das Feld "css ohne style-tags" ein : Mit #Hier die Klasse {display: none;} entfernen wir Klassen. |
| Schritt 2 : Linkformatierung |
|---|
| Du kannst mit dieser CSS-Anweisung für alle verlinkten Texte auf Deiner Homepage die Größe und Farbe bestimmen. - füge ein im Feld "css ohne style-tags" - zwischen vorigem Code und diesem Code füge eine Leerzeile ein - das erleichtert Dir zwischen allen Codes die Übersicht Erklärung: a = Link a:hover = wenn die Maus auf den Link fährt a:link = noch nicht besuchter Link a:active = gerade angeklickter Link a:visited = bereits besuchte Seiten Du kannst gewünschte Farben und Größen im Code ändern / anpassen. |
| Schritt 3 : Der Hintergrund |
|---|
| Du kannst für den Hintergrund Farbe oder ein Hintergrundbild verwenden. Beachte bitte: Deine Besucher verwenden unterschiedliche Bildschirmauflösungen. Verwendest Du ein Bild z.B. mit der Grösse 1024 x 768 , wird für Deine Besucher mit einer höheren Bildschirm-Auflösung das Bild wiederholt ! Verwendest Du ein grösseres Hintergrundbild, wird Deinen Besuchern mit kleinerer Bildschirmauflösung nicht alles angezeigt ! - zwischen diesem und vorigem Code eine Leerzeile einfügen - es erleichtert Dir die Übersicht - füge ein im Feld "css ohne style-tags" Erklärung: background-color = Hintergrundfarbe background-image: none; = wenn Du Bild verwendest : Bild-URL in die Klammer |
| Schritt 4 : Textfeld platzieren |
|---|
| Im Design "CSS" hat das Textfeld die Klasse #content. - füge ein im Feld "css ohne style-tags" Erklärung: - top: = Abstand des Feldes vom oben - margin-left: = Abstand des Feldes vom linken Rand - padding:10px; = Seiten-Inhalt 10 Pixel Abstand zu Seitenrändern - width: = Breite des Textfelds - height: = Höhe des Textfelds - background-color = Hintergrundfarbe Textfeld - background-image: none; = Hintergrundbild (URL) in Klammer einfügen - wenn Du ein Bild einfügen möchtest, gleiche Breite wie das Textfeld hat ! - color:#000000; = Textfarbe im Textfeld - font-size:13px; = Textgrösse - border: 1px solid #C9C9C9 = Rahmen / Rahmenstärke / Rahmenfarbe - overflow:auto;} = erzeugt ein scrollbares Textfeld Ein Beispiel: - Textfeld tiefer setzen ? Erhöhe den Wert bei top. - Textfeld weiter nach rechts ? verringere Minuszahl bei margin-left - Textfeld zu breit ? füge kleinere zahl ein bei width |
| Schritt 5 : Einfügen der "rechten Box" |
|---|
| Im Design "CSS" hat die "Box" die Klasse #sidebar_container. - füge ein im Feld "css ohne style-tags" Erklärung: - top: = Abstand der Box vom oben - margin-left: = Abstand Box vom linken Rand - width: = Breite der Box - height: = Höhe der Box - background-color = Hintergrundfarbe Box - background-image: none; = Hintergrundbild (URL) in Klammer einfügen - wenn Du ein Bild einfügst, gleiche Breite wie Deine Box bekommt - color:#000000; = Textfarbe in der Box - font-size:13px; = Textgrösse in rechter Box - border: 1px solid #C9C9C9 = Rahmen / Rahmenstärke / Rahmenfarbe - overflow:auto;} = erzeugt ein scrollbares Feld |
| Schritt 6 : Die Navigation |
|---|
| Im Design "CSS" hat die "Navi" die Klasse #nav_container. Und die Navi-Buttons die Klasse li.nav_element. - füge ein im Feld "css ohne style-tags" Die Navigation platzierst Du bei #nav_container wie gehabt, mit den Werten top und margin-left Die "Navi-Buttons" kannst Du anpassen bei: - #li.nav_element a - und bei #li.nav_element a:hover - hover = Wenn die Maus über einen Button fährt Wenn Deine "Navi-Buttons" breiter sollen, dann bitte das width (Breite) auch ändern bei : - #nav_container - ul#nav - li.nav_element - li.nav_element a |
