Danas Homepagehilfe

Bevor Sie ein eigenes Layout kreieren wollen, sollten Sie erst einmal Html lernen. Das können Sie Schritt für Schritt in diesem Html-Seminar tun. Viel Spaß beim Lernen.

Dieser Video-Crashkurs ist auch sehr zu empfehlen. Hier wird alles sehr schön erklärt, das verstehen alle Dummies.

Hier ist eine Test-Seite mit CSS-Boxen, die über das erstellte Bild laufen: Designtest von 2007

Hier wollen wir lernen wie wir ein Layout aus einem Bild, dass wir im Bildbearbeitungsprogramm z.B. Photoimpact 10 erstellt haben, herstellen.

In Photoimpact kannst Du auch gleich die Werte für die Div-Styles ablesen, in dem Du die Felder mit dem Ausschneidewerkzeug markierst.
Oben erscheinen alle 4 Werte (Links = left, Oben = Top, Breite = Width und Höhe = height).
Dann die Werte einfach nur in die Div-Styles einsetzen. Der Standard-Code dürfte langsam geläufig sein.

Hier nochmal:
<div style="position:absolute;overflow:auto;width:Xpx; top:Xpx; width:Xpx; height:Xpx;background-color:transparent;">
Dein Text.
</div>

Es ist wichtig, dass im Style immer hinter dem Wert px steht, sonst können die neuen Browser wie Firefox und Opera die CSS-Boxen nicht richtig lesen.

left-margin:0; top-margin:0; kann in den Body-Tag eingebaut werden oder im Style-Sheet im Head margin-left:0;margin-top:0;
Bitte aufpassen, in <body leftmargin=0> und im Style body {margin-left:0;} eingeben. Ich vertue mich auch öfters.

Dann ganz normal das Designbild in den Body mit <img src="bild.jpg" border=0> einbauen und Eure Div-Styles wie oben. Für jedes Feld einen mit den entsprechenden Werten.

Die Werte kannst Du auch in Paint ermitteln, wenn Du das Programm Photoimpact nicht hast. Eine kleine Hilfe ist es, wenn Ihr in die Div-Style "background-color:black oder white" einbaut, damit Ihr sehen könnt, ob die Felder stimmen. Nachher wieder entfernen. Hier noch ein Tutorial für Paint.

Und ein sehr hilfreiches Tool ist PixLin, das digitale Lineal, was Ihr kostenlos downloaden könnt. Danke für den Tipp an Micha.

PixLin-Lineal bei Mueller-Freeware

Neues Tutorial für ein Div-Container-Layout.

Wenn Du den Code hast, kopiere diesen und füge ihn am besten in Deinen Phase5-Editor ein. Dort bearbeitest Du Dein Design so, wie Du es haben möchtest. Mit der neuen Version 5.50 von Phase5 lassen sich auch Imagemaps erstellen.

Für iframes gibt es folgenden Generator:  Iframe-Generator.


So sieht ein Style dann aus:

Im Header steht Dein Style, der kann so aussehen. Hier wird das Menü, der Background und die Schriftart, -farbe und -größe festgelegt:

<html>
<head>
<title>Dein Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="Dana" />
<style type="text/css">
body {
background-color: #e8e8e8;
background-image:url(rosenlayoutbg.jpg);
font-size:10pt;
font-family:"lucida handwriting";
color:black;
scrollbar-base-color:#e8e8e8;
scrollbar-arrow-color:white;
margin-left:0;
margin-top:0;
}

#menu02 {
width:200px;
margin: 10px;
padding:10px;
}

#menu02 ul, #menu02 li {
list-style-type: SQUARE;
margin-left:10px;
padding: 0px;
color:#2F2F2F;
}

#menu02 li a:link, #menu02 li a:visited, #menu02 li a:active {display:block;
border-bottom: SOLID 1px #000;
color:#424242;text-decoration:none;
background:TRANSPARENT;
font: normal 11px verdana, sans-serif;
padding-top:0px;
padding-bottom:0px;
height: 24px;
line-height: 24px;
}

#menu02 li a:hover { background-color:TRANSPARENT;
border-bottom: solid 1px #000;
color:#424242;text-transform:uppercase;
}

a:link, a:visited, a:active
{ color:#424242;text-decoration:underline;
background:TRANSPARENT;
font: normal 11px verdana, sans-serif;
padding-top:0px;
padding-bottom:0px;
height: 24px;
line-height: 24px;
}
a:hover{
background-color:TRANSPARENT;
color:#424242;text-transform:uppercase;
}
</style>
</head>


Im Body die Div-Styles:

<body>
<img src="rosenlayout.jpg" "border=0" >
<div style="position: absolute; left: 59px; top: 471px; width: 200px; height: 246px; overflow: no">
<!-- Div (Menu) -->
<!--MENU 02-->
<div id="menu02">
<ul>
<li><a href="index.html" onfocus="this.blur()">
Start</a></li>
<li><a href="index.html" onfocus="this.blur()"> Kontakt</a></li>
<li><a href="mailto:dana@fussball-fanpage.de" onfocus="this.blur()">Email</a></li>
<li><a href="index.html" onfocus="this.blur()"> Gästebuch</a></li>
</ul>
</div>
<!--MENU 02 ENDE-->
</div>
<div style="position: absolute; left: 355px; top: 476px; width: 563px; height: 240px; overflow: visible">
<!-- Div (Inhalt) -->
%content%
</div>


</body>
</html>


Da wo %content% steht, kommt Dein Inhalt rein. Wenn Du bei Oyla Deine Homepage gehostet hast, dann wird hier die Textseite zugeordnet. Wenn Du bei Repage bist, dann kommt statt %content% %%CONTENT%% da hinein. Wenn Du auf normalen Webspace wie funpic, ohost, lima-city bist, dann fügst Du da Deinen Inhalt ein.

Das Menü ist hier ein CSS-Menü, wenn Du bei Oyla bist, kannst Du anstelle der Links auch %navigation_v% oder bei Repage %%MENU%% eingeben. Das demonstrierte Menü funktioniert bei Oyla nur manuell so wie hier angegeben. Bei Repage kannst Du %%MENU%% verwenden und den Style ins Link-Menü eingeben. Das ist der Vorteil von Repage.

Baust Du Deine Homepage bei Websitepark, 2page, nPage dann kommt alles was über dem Inhalt steht in den Header und alles, was unter dem Inhalt steht in den Footer im eigenen Design.

Ich wünsche viel Spaß beim Erstellen Deiner Homepage!

Wer kein Bildbearbeitungsprogramm hat, kann sich kostenlos Gimp downloaden und installieren. Aber bei ebay oder Amazon gibt es sehr günstig Photoimpact X3. (ca. 30 Euro)


Das nervt beim Besuch einer Homepage:
  1. Intro

    2. Ein Intro muss ich erst wegklicken wie einen Werbelayer. Wenn es auch noch Flash ist, dauert es viel zu lange, bis ich weiter komme. Man sollte auf ein Intro verzichten, da der Besucher meist auch gar keine Lust hat zu warten und guckt sich die Page gar nicht an.

  2. Musik

    3. Musik nervt auch, weil diese meist dem Besucher eh nicht gefällt und beim Radio hören stören kann. Außerdem lädt die Seite mit Musik auch noch lange.

  3. Schrift, die ein normal Sterblicher nicht lesen kann

    4. Hier klickt man schnell weg, weil man ja nix lesen kann. Dazu zählt die Teeny-Schrift mit den Zeichen vor und nach dem Wort und Klein- und Großschreibung in einem Wort sowie zu kleine Schrift. Schrift sollte nicht kleiner als 10pt sein.

  4. Glimmer

    5. zu viel davon nervt das Auge. Ein zartes Glimmern mal im Header ok.

  5. Bewegter Hintergrund

    6. Nervt beim Lesen und stört kolossal.

  6. Nicht klicken

    7. Das nervt, vor allem wenn man versehentlich drauf kommt. Dann stürzt auch noch alles ab, was ärgerlich ist. So kann man prima Besucher verärgern.

  7. Tote Links

    8. Nichts ist blöder, wenn man auf eine Seite stößt, die nicht existiert.

  8. Javagesteuerte Bilder und anderes

    9. Seite lädt sehr lange und man muss viel Geduld aufbringen.

  9. Blinkende Werbebanner und Werbe-Layer, die erst ganz dunkel werden und man warten muss, bis man wegklicken kann.


  10. Zwei oder mehr poppige Farben

    11. Man hat keine Lust auf zu bunten Seiten, etwas zu lesen und klickt die Page gleich weg. Ganz schlimm waren Layouts, von dem eins mit Knallgelb und Royalblau gemischt und eins mit Pink und Türkis gemischt war, welche ich sah.

  11. Bilder die eine Größe von über 800 kb haben,

    12. weil sie als png hochgeladen sind. Laden sehr lange, mit jpg würden die Bilder meist unter 100 kb sein und laden schneller. Bei ImageShack hochgeladene Bilder auf der Homepage, da diese auch sehr lange laden. ImageShack dient nur, um kurzzeitig etwas zu demonstrieren.



Dana

16.07.2011
Dana
c/o Ingrid Dörner
Postfach 102101
40012 Düsseldorf
Kontakt