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
Code
- /*==================================
- 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