Vorlage1
Ihr wisst nicht was ein Content, Header usw. ist? Hier wird es euch erklärt: zum Tutorial
Vorlage 1
Design mit:-Header
-Logo
-Content
-Linke Navigation
-Copyright Feld
-Counter Feld
1.
Als erstes müssen wir unötige Klassen entfernen:
Bei "css code ohne style tags" einfügen:
| h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} |
2.
Um nun die Hintergrundfarbe oder ein Hintergrundbild festzulegen verwendet man einen "body".
Rot: Hier könnt ihr die Hintergrundfarbe der Homepage festlegen. Der Farbton wird in Html Nationen angegeben eine Farbtabelle findet ihr hier!
-Bei "css code ohne style tags" einfügen:
| body {background-color:#FFFFFF;} |
3.
Nun kommt der eigentliche Teil, hier kannst du Header, Content, Navigation, Logo, Counter und das Copyright Feld bearbeiten.
Erklärung:
-Grün: Hier kannst du die Breite des Feldes verändern!
-Blau: Hier kannst du die Höhe des Feldes verändern!
-Orange: Hier kannst du die Farbe des Links verändern! (Farbangaben siehe oben)
-Pink: Hier kannst du die Hintergrundfarbe verändern!(Farbangaben siehe oben)
-Rot: Zwischen den Klammern kannst du die URL zu einem Hintergrundbild einfügen!( Wichtig das Bild muss in der richtigen Größe sein)
-Lila: Hier kannst du das Feld positionieren
Hier verändern wir die Navigation:
Bei "css code ohne style tags" einfügen:
| li.nav_element a{ color:#FFFFFF; display: block; margin: 5px; padding-left: 10px; text-decoration: none; width: 120px; height: 20px; background-image: none; background-color:#4D4D4D;} li.nav_element a:hover{ color:#FFFFFF; display: block; margin: 5px; padding-left: 10px; text-decoration: none; width: 120px; height: 20px; background-image: none; background-color:#919191;} |