Einfache Homepage mit CSS Boxen erstellen

user-245

15.01.2008 08:31

Zuerst erstellt man sich ein Layout (ich habe es mit dem Programm Photoshop erstellt deshalb auch zuerst die Slice Erklärung)

Dann beginnt man mit dem "Slicen" das man unter diesem Symbol findet:

Hat man dieses Werkzeug ausgewählt wählt man einen bereich den man Slicen möchte.
Das Slicen hat folgenden sinn:
Man teilt 1 Bild in mehrere Bilder auf um sie dann in der Webseite verwenden zu können.

Also um diese Webseite verarbeiten zu können teilte ich die Seite in 3 Teile (Slices) auf.

Wichtig ist dabei ein sehr genaues Slicen.

Denn Sliced man ungenau wie im folgendem Beispiel wird man sich bei der weiteren Bearbeitung schwer tun.

Nach dem alles genau gesliced ist gehts an die Namengebung der Slices.
In dem man auf dem Slice Werkzeug länger mit der linken Maustaste gedrückt hält.
Danach klickt man einen Slice mit der rechten Maustaste an und wählt man den Menüpunkt "Slice-Optionen bearbeiten"

Folgendes Fenster erscheint und bei Name tippt man den Namen ein den das jeweilige Bild dann bei der Weiterverarbeitung haben soll.
In meinem Fall Nehme ich für
Slice 1 => banner
Slice 2 => navi
Slice 3 => text

So nun geht es ans Speichern unter "Datei" =>"Für Web speichern unter" anwählen.
Im Fenster was sich nun öffnet lasse ich alles so eingestellt wie es mir Photoshop vorgibt und wähle "Speichern".
Im Speicherdialog wähle ich dann "HTML und Bilder" sowie "Alle Slices"

Zuerst öffne ich den Ordner dem ich beim Speichern in Photoshop angegeben habe.
in diesem Ordner finde ich nun eine html datei und einen Bilder Ordner in dem meine 3 Dateien (banner.jpg, navi.jpg und text.jpg). Wenn ein erfahrener User einen blick in die HMTL Datei wirft wird er feststellen das dies völliger quirks ist.
1. Tabellenlayout
2. Von irgendwelchen Validen sachen mehr als weg

also beginnen wir beim Code komplett neu.
Als erstes benenne ich den Ordner "Bilder" in "images" um.
Weil im WWW alles Case Sensitive ist d. H. "Hallo.jpg" ist im Internet etwas anderes als "hallo.jpg". Man kann es natürlich auch so lassen nur muss man dan überall wo ich "images" verwende "Bilder" benutzen.

Also ich beginne nun mit dem Grundaufbau jeder HTML Seite (in dem Fall XHTML):

<!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>Seitentitel</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

</body>

</html>

So als erstes überlege ich mir den Aufbau der Boxen.

Ich werde es so machen:
Mein Layout ist 500x500 Pixel groß.
Also mache ich als erstes eine Container Box in die dann mein Kompletter Inhalt kommt 500x500 Pixel groß.
Dann mache ich eine Box für den Banner dann eine für die Navigation und schließlich eine für den Inhalt.

Erstellung der Container Box und des "Bodys":



<!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>seite</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

        body

        {

                margin: 0;

                padding: 0;

                font: 85% arial, hevetica, sans-serif;

                text-align: center;

                color: #505367;

                background-color: #FFFFFF;

        }



        #container

        {

                margin: 1em auto;

                width: 500px;

                height: 500px;

                text-align: left;

                background-color: red;

        }

</style>

</head>

<body>

<div id="container">

</div> <!-- /container -->

</body>

</html>

Erklährung: body=für die gesammte seite:
margin: 0; => Außenabstand soll keiner sein also 0
padding: 0; => Innenabstand soll auch keiner sein also 0
font: 85% arial, hevetica, sans-serif; =>Schriftart soll 85% groß sein und in Arial
text-align: center; => der Text soll mittig außgerichtet werden
color: #000000; => Textfarbe schwarz
background-color: #FFFFFF; => Hintergrundfarbe weiss

Erhlährung Container:
width: 500px; => Breite 500 Pixel
height: 500px; => Höhe 500 Pixel

Dann gehts weiter mit dem Banner:



        #header

        {

                height: 128px;

                background-color: fuchsia;

        }

mit der Navigation:



         #navi

        {

                height: 15px;

                background-color: blue;

        }

und dem Text (Inhalt):



        #contents

        {

                height: 357px;

                background-color: yellow;

        }

Das ganze sieht nun so aus (um es besser dazustellen in verschiedenen Farben sichtbar gemacht)

Und hier der komplette Code:



<!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>seite</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

        body

        {

                margin: 0;

                padding: 0;

                font: 85% arial, hevetica, sans-serif;

                text-align: center;

                color: #505367;

                background-color: #FFFFFF;

        }



        #container

        {

                margin: 1em auto;

                width: 500px;

                height: 500px;

                text-align: left;

                background-color: red;

        }

        

        #header

        {

                height: 128px;

                background-color: fuchsia;

        }

        

        #navi

        {

                height: 15px;

                background-color: blue;

        }

        

        #contents

        {

                height: 357px;

                background-color: yellow;

        }

</style>

</head>

<body>

<div id="container">

        <div id="header"></div>

        <div id="navi"></div>

        <div id="contents"></div>

</div> <!-- /container -->

</body>

</html>

user-245

15.01.2008 08:33

Nun tausche ich die Farben mit den Bildern die ich aus Photoshop habe.
also ich tausche die Zeile:



background-color: fuchsia;

im bereich: #header, #navi und #contents gegen:



background-image: url(images/datei.jpg);

aus.
So sieht das nun aus

Als nächstes kommt die Navi dran:
zuerst fügt man im HTML Teil (der bei <body> beginnt)
bei <div id="navi">folgendes ein:

        <ul>

        <li><a href="deine_seite.html">Men&uuml;punkt 1</a></li>

        <li><a href="deine_seite.html">Men&uuml;punkt 2</a></li>

        <li><a href="deine_seite.html">Men&uuml;punkt 3</a></li>

        <li><a href="deine_seite.html">Men&uuml;punkt 4</a></li>

        </ul>

Um einigen Standarts gerecht zu werden habe ich das "ü" gegen ein "ü" getauscht.
um nun eine schöne Aufgliederung der Navigationspunkte zu haben füge ich nun im CSS Teil (der bei <style type="text/css" media="screen"> beginnt) folgende Formatierung ein (unter "#navi" zwinkern

        #navi ul

        {

                margin: 0 0 0 20px;

                padding: 0;

                list-style-type: none;

                border-left: 1px solid #000000;

        }



        #navi li

        {

                display: inline;

                padding: 0 10px;

                border-right: 1px solid #000000;

        }



        #navi li a

        {

                text-decoration: none;

                color: #666666;

        }



        #navi li a:hover

        {

                text-decoration: none;

                color: #000000;

        }

das ganze nun zu Erklähren währe nun doch ein bisschen zu viel.
es sei nur folgendes gesagt:

li a ist für die links zuständig
li a:hover ist für den Effekt zuständig wenn man mit der Maus über einen Link fährt.
Wer weitere CSS befehle erkährt haben möchte: CSS4YOU hilft weiter

So sollte das nun aussehen

Jetzt fehlt noch der Inhalt von unserer Seite:

Unter <div id="contents"> füge ich nun folgendes ein:

        <h1>Das ist die &Uuml;berschrift</h1>

        <div class="text">

        Das ist der TEXT

        <p></p>

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id user-228. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

</div>

<h1> ist die Überschrift
<p> ist ein Abstand
und meinen gesamten text stelle ich unter <div class="text"> da er Blocksatz und einen Aussenabstand von 10px haben soll (wird im CSS Teil angegeben zu dem ich jetzt komme:
Unter "#contents" füge ich folgendes ein:

        #contents h1

        {

                font-size: 20px;

                text-align: center;

                color: #000000;

                margin: 5;

                padding: 0;

        }

        

        div.text

        {

              line-height: 150%;

              margin: 10px;

              text-align: justify;

        }

So sollte das ganze nun aussehen

Und hier nochmal der gesammte Quellcode:

<!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>seite</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

        body

        {

                margin: 0;

                padding: 0;

                font: 85% arial, hevetica, sans-serif;

                text-align: center;

                color: #505367;

                background-color: #FFFFFF;

        }



        #container

        {

                margin: 1em auto;

                width: 500px;

                height: 500px;

                text-align: left;

                border: 1px solid #676767;

        }

        

        #header

        {

                height: 128px;

                background-image: url(images/banner.jpg);

        }

        

        #navi

        {

                height: 15px;

                background-image: url(images/navi.jpg);

        }



        #navi ul

        {

                margin: 0 0 0 20px;

                padding: 0;

                list-style-type: none;

                border-left: 1px solid #000000;

        }



        #navi li

        {

                display: inline;

                padding: 0 10px;

                border-right: 1px solid #000000;

        }



        #navi li a

        {

                text-decoration: none;

                color: #666666;

        }



        #navi li a:hover

        {

                text-decoration: none;

                color: #000000;

        }





        #contents

        {

                height: 357px;

        }



        #contents h1

        {

                font-size: 20px;

                text-align: center;

                color: #000000;

                margin: 0.5em;

                padding: 0;

        }

        

        div.text

        {

              line-height: 150%;

              margin: 10px;

              text-align: justify;

        }

</style>

</head>

<body>

<div id="container">

        <div id="header"></div>

        <div id="navi">

        <ul>

        <li><a href="#">Men&uuml;punkt 1</a></li>

        <li><a href="#">Men&uuml;punkt 2</a></li>

        <li><a href="#">Men&uuml;punkt 3</a></li>

        <li><a href="#">Men&uuml;punkt 4</a></li>

        </ul>

        </div>

        <div id="contents">

        <h1>Das ist die &Uuml;berschrift</h1>

        <div class="text">

        Das ist der TEXT

        <p></p>

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id user-228. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

        </div>

        </div>

</div> <!-- /container -->

</body>

</html>

welcher natürlich

W3C konform ist zwinkern

user-310

15.01.2008 12:18

für nicht coder (so wie mich :rolleyes lächeln

sehr leicht nachzuvollziehen lächeln

was mich allerdings noch interessieren würde, ist, wie man die content box dynamisch machen kann.
also dass sie bei mehr inhalt automatisch weiter nach unten geht. vlt. kann das ja noch wer posten Fettes Grinsen