Hallo Lauras,
Gerne
HTML
PHP
<!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" xml:lang="de" lang="de">
<head>
<title>Testseite</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<link href="dbd.css" type="text/css" rel="stylesheet" />
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>
<body>
<!-- Begin Wrapper-->
<div id="wrapper">
<!-- Begin Kopfbereich-->
<div id="Header">
Modellierung eines Kopfes
<img src="Bilder-Tutorial/LogoCiara.JPG" alt="" title="" />
<img src="Bilder-Tutorial/LogoCiara.JPG" alt="" title="" />
</div>
<!-- Ende Kopfbereich -->
<div id="Inhalt">
<!-- Begin Inhaltsbereich -->
<!-- Begin Textbereich -->
<div id="Textbereich">
<div class="ZurueckMenu">
<a href="Testseite.php">
<img src="Bilder-Tutorial/ani-menu.gif"
alt="Zurueck zur Startseite"
title="Zurueck zur Startseite"
width="76" height="20" style="border: 0;"/></a>
</div>
<h1>Modellierung eines Schlafbabies</h1>
<p>
Im folgenden versuche ich Ihnen den Werdegang eines Babykopfes mit Hilfe von
Bildern zu beschreiben. Selbstverständlich ist es kaum möglich
jemanden das Modellieren Online, mit Buch oder per Video zu vermitteln. Jeder
hat ein anderes Gefühl dafür bzw. auch andere Vorstellungen,
Stärken und Schwächen. Insgesamt sollte daher diese Anleitung
nur als Hilfe und Orientierung verstanden werden, da es ein Buch erfordern
würde um jeden einzelnen Schritt detailliert darzustellen und zu
erklären.
</p>
<p>
Im folgenden Beispiel benutze ich Prosculpt als Modelliermasse, Sie können
jedoch auch mit jeder anderen Modelliermasse arbeiten. Welche Modelliermasse
für Sie die richtige ist, können Sie am Besten durch ausprobieren
feststellen.
</p>
<div class="Bildkasten" style="width: 410px;">
<div class="Bildbeschreibung_unten" style="width: 400px;">
<p>
<img src="Bilder-Tutorial/IMG_0137.JPG"
alt="Schaufensterpuppe ohne Fehlteile"
title="Schaufensterpuppe ohne Fehlteile"
width="400" height="300" style="border: 0px;"/>
</p>
<p>
Als Grundlage dient ein einfacher Styroporkopf aus dem
Modellier - Zubehörhandel. Hierauf tragen wir zuerst eine
ca. 5mm starke Lage von Prosculpt auf um das Grundgesicht
zu formen. Sie müssen hierbei noch nicht auf die zukünftige
Kopfform achten.
</p>
</div>
<p style="clear:left"></p>
</div>
<p>
Sobald das Grundgesicht aufgetragen wurde, bringen wir als
nächtes mit <span>zusätzlicher</span> Masse die Augen auf. Bitte
versuchen Sie nicht die Augen aus dem Grundgesicht heraus zu
Formen, die Folge wäre ein sehr dünner Untergrund der
später einreissen oder beim Backen des Kopfes brechen
könnte.
</p>
<div class="Bildkasten" style="width: 410px;">
<div class="Bildbeschreibung_unten" style="width: 400px;">
<p>
<img src="Bilder-Tutorial/IMG_0139.JPG"
alt="Schaufensterpuppe ohne Fehlteile"
title="Schaufensterpuppe ohne Fehlteile"
width="400" height="300" style="border: 0px;"/>
</p>
<p>
Achten Sie darauf dass die neue Masse handwarm ist, so
lässt sie sich einfacher und nahtlos anfügen. Beim Ansetzen
immer darauf achten, gut andrücken, damit
sich keine Luftpolster bilden. Die Ränder mit den Fingern glatt
einstreichen. Sie werden schnell merken, dass sich die Masse gut
aneinanderfügen und ansetzen lässt.
</p>
</div>
<p style="clear:left"></p>
</div>
<p>
Lufteinschlüsse beim Ansetzen bzw. Hinzufügen von Masse führen
spätestens später beim Backen des fertigen Kopfes zur Katastrophe.
Wenn nur Blasen
entstehen haben Sie noch Glück, oft wird aber durch die Erhitzung
der einmodellierten Luft das Modell regelrecht gesprengt oder es entstehen
grossflächige Risse.
</p>
<div class="Bildkasten" style="width: 410px;">
<div class="Bildbeschreibung_unten" style="width: 400px;">
<p>
<img src="Bilder-Tutorial/IMG_0143.JPG"
alt="Schaufensterpuppe ohne Fehlteile"
title="Schaufensterpuppe ohne Fehlteile"
width="400" height="300" style="border: 0px;"/>
</p>
<p>
Nach dem Anfügen der Augen, streichen Sie die Masse glatt und
versuchen schon den endgultigen Sitz der Augen fest zu legen. Mit
einem kleinen Spatel legen Sie auch gleich Anfang und Ende der beiden
Augenlider fest. Im nächsten Schritt fügen wir wieder neue
Masse für die Nase hinzu, und versuchen schon jetzt annähernd
Sitz und Form der Nase zu bestimmen, bzw vorzugeben.
</p>
</div>
<p style="clear:left"></p>
</div>
<div class="Bildkasten" style="width: 410px;">
<div class="Bildbeschreibung_unten" style="width: 400px;">
<p>
<img src="Bilder-Tutorial/IMG_0146.JPG"
alt="Schaufensterpuppe ohne Fehlteile"
title="Schaufensterpuppe ohne Fehlteile"
width="400" height="300" style="border: 0px;"/>
</p>
<p>
Nach dem Anfügen der Augen, streichen Sie die Masse glatt und
versuchen schon den endgultigen Sitz der Augen fest zu legen. Mit
einem kleinen Spatel legen Sie auch gleich Anfang und Ende der beiden
Augenlider fest. Im nächsten Schritt fügen wir wieder neue
Masse für die Nase hinzu, und versuchen schon jetzt annähernd
Sitz und Form der Nase zu bestimmen, bzw vorzugeben.
</p>
</div>
<p style="clear:left"></p>
</div>
<div class="Bildkasten" style="width: 410px;">
<div class="Bildbeschreibung_unten" style="width: 400px;">
<p>
<img src="Bilder-Tutorial/IMG_0147.JPG"
alt="Schaufensterpuppe ohne Fehlteile"
title="Schaufensterpuppe ohne Fehlteile"
width="400" height="300" style="border: 0px;"/>
</p>
<p>
Nach dem Anfügen der Augen, streichen Sie die Masse glatt und
versuchen schon den endgultigen Sitz der Augen fest zu legen. Mit
einem kleinen Spatel legen Sie auch gleich Anfang und Ende der beiden
Augenlider fest. Im nächsten Schritt fügen wir wieder neue
Masse für die Nase hinzu, und versuchen schon jetzt annähernd
Sitz und Form der Nase zu bestimmen, bzw vorzugeben.
</p>
</div>
<p style="clear:left"></p>
</div>
<div class="Bildkasten" style="width: 410px;">
<div class="Bildbeschreibung_unten" style="width: 400px;">
<p>
<img src="Bilder-Tutorial/IMG_0148.JPG"
alt="Schaufensterpuppe ohne Fehlteile"
title="Schaufensterpuppe ohne Fehlteile"
width="400" height="300" style="border: 0px;"/>
</p>
<p>
Nach dem Anfügen der Augen, streichen Sie die Masse glatt und
versuchen schon den endgultigen Sitz der Augen fest zu legen. Mit
einem kleinen Spatel legen Sie auch gleich Anfang und Ende der beiden
Augenlider fest. Im nächsten Schritt fügen wir wieder neue
Masse für die Nase hinzu, und versuchen schon jetzt annähernd
Sitz und Form der Nase zu bestimmen, bzw vorzugeben.
</p>
</div>
<p style="clear:left"></p>
</div>
<div class="ZurueckMenu">
<a href="Testseite.php">
<img src="Bilder-Tutorial/ani-menu.gif"
alt="Zurueck zur Startseite"
title="Zurueck zur Startseite"
width="76" height="20" style="border: 0;"/></a>
</div>
</div>
<!-- Ende Textbereich -->
</div>
<!-- Ende Inhaltsbereich -->
<!-- Beginn Fussbereich -->
<div id="Update">
<p>
Letzes Update:
<?php
include("Php-include/Update.php");
echo FileDate("Testseite.php");
?>
Uhr
</p>
</div>
<!-- <div id="Fussbereich" style="text-align: center; color: #000000; font-size: 0.8em; padding: 25px 5px;">
<?php
include("Php-include/Copyright.php");
?>
</div>
-->
<!-- Ende Fussbereich -->
</div>
<!-- Ende Wrapper-->
</body>
</html>CSS
CSS
/*==================================
1. Kalibrierung
==================================*/
* { padding: 0; margin: 0; } /*Komplettes Abschalten*/
h1,h2, h3, h4, h5, h6, hr, p, ul, ol { margin-bottom: 0; }
ol ul { margin-bottom: 0; }
li { margin-left: 0; }
body {
height: 101%;
width: auto;
background-image: url(Bilder-Tutorial/tilegrainfade.jpg);
background-repeat: repeat;
/* background-color: #808080; */
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: small;
text-align: justify;
font-size: 0.8em;
font-weight: bold;
color: #66CCFF;
}
body p {
margin: 0 30px;
padding: 8px 20px;
font-family: Broadway, Verdana, Arial, Tahoma, sans-serif;
font-size: small;
text-align: justify;
font-size: 1.0em;
color: #000000;
}
h1 {
margin: 10px;
padding: 30px 15px 20px;
text-align: center;
font-size: 1.5em;
font-weight: bold;
color: #0000FF;
}
h2 {
font-weight: bold;
color: #0047BF;
}
h3 {
margin: 0 30px;
padding: 8px 20px;
text-align: justify;
font-size: 0.9em;
color: #66CCFF;
}
h4 {
color: #000000;
font-size: 0.9em;
}
hr {
text-align: center;
margin: 30px auto;
border: 0px; /* Für Firefox und Opera */
width: 700px;
border-top: solid 3px #A8B3B7; /* Für I.Explorer (Seiten-Hintergrundfarbe!) */
padding-bottom: 20px;
}
#wrapper {
border: 2px solid #000000;
margin: 10px;
padding:2px;
}
#Kopfbereich {
border: 1px solid #000000;
margin: 1px 1px 0px;
padding:5px;
}
#Update p {
color: #0000FF;
font-size: 0.8em;
text-align: center;
}
#Header {
border: solid 1px #3399FF;
padding: 1px;
margin: 1px;
border: solid 6px #C65A84;
height: 190px;
text-align: center;
line-height: 190px;
font-size: 1.8em;
}
#Header > img {
float: left;
}
#Header > img + img {
float: right;
}
.BildHeader { /* Einfache Bilder ohne Beschreibung, ohne Float-Attr. */
background-image: url(Bilder-Tutorial/LogoCiara.JPG);
background-repeat: no-repeat;
background-position: left;
padding: 3px;
margin: 2px 0px 2px 2px;
/*border: solid 2px #000000; */
}
.Bild { /* Einfache Bilder ohne Beschreibung, ohne Float-Attr. */
/*float: left; */
text-align: left;
margin: auto;
padding: 0px;
}
.Bildbeschreibung { /* Allgemeine Beschreibung für Bilder oben oder unten */
text-align: center;
width: 550px;
margin: auto;
padding-top: 10px;
font-size: 0.9em;
color: #808080;
}
.Bildbeschreibung_unten { /* Bildbeschreibung unter den Bildern*/
text-align: center; /* Der Angabe der Bildbreite muss im*/
font-size: 0.8em; /* class Attr. style=width"xxx" plus 10px*/
padding-top: 5px; /* hinzugerechnet werden!!! */
padding-bottom: 5px;
margin-bottom: 5px;
float: left;
}
.Bildbeschreibung_unten p { /* Formatierung der Bildbeschreibung */
margin: 0px; /* Abstand von Text direkt unter dem Bild */
text-align: justify; /* Text ist zentriert unter dem Bild */
padding: 0 5px; /* Abstand vom Text rechts und links damit der Text nicht exakt mit dem Bildrahmen beginnt */
color: #000000; /* Textfarbe der Bildbeschreibung */
}
.Bilder { /* Einfache Bilder Nebeneinander ohne Float-Attr. */
margin: 10px 10px 25px 10px;
padding: 10px;
text-align: center;
}
.Bildkasten { /* Rahmen für Bilder mit Float-Attr. */
height: auto; /* Größe des Rahmens ergibt sich aus der */
margin: auto; /* Gesamtsumme aller Bildbreiten "width" */
color: #C0C0C0; /* die im div Bereich, Bildkasten,*/
text-align: center; /* enthalten sind */
padding: 5px;
}
#Inhalt {
margin: 0px;
padding: 0px;
background-image: url(Bilder-Tutorial/tilegrainfade.jpg);
background-repeat: repeat;
}
.Beispiel_Text_Rechts { /* Kasten mit Hintergrundgrafik für Beispieltexte*/
color:#C0C0C0;
font-size:0.9em;
margin: 15px auto;
padding:0px 40px 20px;
text-align: left;
width: 700px;
}
.Beispiel_Text_Rechts p { /* Formatierung von Text in der Beispielauktion */
font-weight: bold;
padding: 10px 0px;
font-size: 0.9em;
margin: 0 10px;
}
.Beispiel_Text_Rechts span {
color: #FF1515 !important;
}
.Beispiel_Text_Rechts ul { /* Einrückung der Listenelemente im Beispielkasten */
line-height: 1.8em ;
padding-left:20px;
}
.rechts {
float:right;
font-size: 1.0em;
width: 220px;
}
.rechts p {
color: #C0C0C0;
font-size: 0.9em;
}
.links {
float:left;
font-size: 1.0em;
}
.links p {
color: #C0C0C0;
font-size: 0.9em;
}
#Textbereich span {
font-size: 1.0em;
color: #800080;
}
.ZurueckMenu {
text-align: center;
margin: 10px auto;
padding: 10px;
}http://www.vergel.kilu.de/Testseite.php
Sicher ist noch einiges/vieles verbesserungswürdig, aber ich arbeite daran.
Viele Grüße
Lacido