[Website-Erstellung] 2-3 kurze Fragen zu einem *.psd Layout

chillious

Grünschnabel
Servus zusammen! :)

Einiges vorneweg, ich bin kein professioneller Web-Entwickler, vielmehr bin ich ein totaler Anfänger.

So, die Tage ist mein Daddy an mich ran getreten und hat mich gefragt ob ich nicht mal für seine kleine Tischlerei ne Website bauen könnte, muss nix ultra krasses sein, halt für die wichtigsten Info's. Da mich das Thema eh interessiert habe ich eingewilligt.

Mit Hilfe einiger Turtorials diverser Webseiten habe ich im Photoshop mal ein Layout erstellt mit dem ich persönlich relativ zufrieden bin.

Tada:

http://i.imgur.com/VtUTyBw.jpg


So, da ich leider noch nicht wirklich weiß wie das mit dem Sclicen so genau funktioniert wollte ich jetzt einfach mal wissen ob dieses Layout realisierbar ist mit Div-Containern.
Das einzige wo ich mir den Kopf ein bisschen zerbreche ist der Content-Bereich, genauer gesagt der rand mit Schlagschatten und der Übergang zum Background (der Holztextur). Im Netz finde ich leider nur Tutorials die einfache Webseiten Sclicen mit Einfarbigen Objekten. Außerdem frage ich mich, wie ich das Sclicen kann damit der Background auf der Webseite z.B. mit dem Background des Headers übereinstimmt, ich meine damit den Übergang vom Background aus dem gesclicten Objekt und dem normalen Background der Webseiten (Übergang Holztextur).

Ich hoffen ich versteht meine Fragen! :D Wenn nicht kann ich es ja nochmal versuchen irgendwie zu erklären.

MfG
 
Zuletzt bearbeitet:

threadi

Erfahrenes Mitglied
Du solltest von 2 Begriffen weg gehen:
* Slicen
* div-Container

Ersteres ist ein Begriff der durch Bildbearbeitungsprogramme erzeugt wurde die es erlauben aus dem Programm heraus das erstellte Design automatisiert als HTML-Datei mit dazugehörigen Grafiken zu erzeugen. Das Ergebnis ist gelinde gesagt unbrauchbar und sollte nicht verwendet werden, größtenteils auch, weil die meisten dieser Erzeugnisse aus Tabellen-Layouts bestehen. Die sind jedoch heutzutage falsch, da sie a) die Inhalte semantisch falsch beschriften und b) schwerer in der Handhabung hinsichtlich Layout-Anpassungen und -Feinheiten sind.

"div-Container" werden gerne als Alternativen zu Tabellen-Designs genannt. Allerdings ist das ebenso falsch: div-Container geben den Inhalten keinerlei semantische Bedeutung. Sie dienen einzig dazu HTML-Elemente zu gruppieren, was aber in Zeiten von HTML5 auch immer weniger Sinn macht.

Deine Fragen zeigen jedoch, dass Du offenbar auch mit HTML noch nicht allzu vertraut bis. Statt von der Grafik auszugehen würde ich dir empfehlen eher mal eine HTML-Grundstruktur per CSS zu stylen. Dadurch wirst Du erkennen, welche Möglichkeiten du mit CSS hast. Insbesondere mit Hintergrundfarben, Schriftarten, -farben und -größen etc. Baue nicht sofort dein Wunschdesign zusammen sondern spiele erstmal mit den Eigenschaften herum die dir so gegeben sind. Dann solltest Du nach etwas Einarbeitung auch selbst erkennen wie Du dein Design in HTML und CSS umsetzen kannst.
 

Rainve

Mitglied
Und ich würde dir empfehlen wenn du dein Design in HTML und CSS umsetzt dann solltest du anfangs mal die grünen gewellten Linien weg lassen. Das macht es nur unnötig kompliziert. Ansonsten kann ich threadi nur zustimmen.

Und ja Schatten sind einfach umzusetzen allerdings werden die auch nicht von jedem Browser unterstützt.
 

hubba

Grünschnabel
die einfachste Lösung für die Schatten und rahmen wird sein, diese einfach als hintergrund bild zu definieren und keinen echten html-rahmen zu definieren. mehr probleme sehe ich mit der geschungenen navigation. da kannst man ja fast nur mit einer image-map arbeiten.
meine empfehlung ist ebenfalls: entweder mit html-basics lernen oder von einem profi umsetzen lassen.

gruß
hubba
 

chillious

Grünschnabel
Na ja, da eure Kommentare eher semi hilfreich waren, nichts desto trotz danke dafür, habe ich mich heute einfach mal an die Umsetzung gemacht.

Dies ist das Ergebnis

http://www.tischlerei-emw.de/new/index.html

So die Schatten sind zwar suboptimal bzw. der ganze Rand da beißt sich wie befürchtet der Übergang zum normalen BG, aber da es eh nur ne kleine Webseite ist die vllt. 20 Leute im Monat anschauen wird es reichen! :D

Ich habe nur ein einziges Problem, das ist zwar gelöst aber ich weiß nicht wieso es auftritt. x)

Nun folgend der Code:

Code:
<!doctype html>
<html lang="de">
<head>
	<meta charset="utf-8">
    <title>Erfurter Möbelwerkstätten GmbH</title>
    <meta name="description" content="Dies ist die Firmenwebsite der Erfurter Möbelwerkstätten GmbH" />
    <meta name="author" content="Erfurter Möbelwerkstätten GmbH">
    <meta name="robots" content="index, follow">
	<meta name="revisit-after" content="1 days">
    <meta name="keywords" content="Tischlerei, Drechslerei, Schreinerei, Erfurter Möbelwerkstätten GmbH, Möbel, Innenausbau, Fester, Türen, Treppen, Holz, Trockenbau">
	<link rel="shortcut icon" href="img/favicon.ico">
    <meta name="viewport" content="width=device-width, intial-scale=1">
    <link rel="stylesheet" href="css/style.css" media="all">

</head>

<body>

	<div id="wrapper">
		<div id="bannertop"></div>
	    <div id="bannermid"></div>
        <div id="anfahrt"><a href="anfahrt.html"><img src="img/emw_06.jpg" style="border: 0;" alt="Anfahrt" width="77" height="22"></a></div>
        <div id="kontakt"><a href="kontakt.html"><img src="img/emw_07.jpg" style="border: 0;" alt="Kontakt" width="91" height="22"></a></div>
        <div id="impressum"><a href="impressum.html"><img src="img/emw_08.jpg" style="border: 0;" alt="Impressum" width="114" height="22"></a></div>        
        <div id="abschluss"></div>
        <div id="foto"></div>
        <div id="startseite"><a href="index.html"><img src="img/emw_11.jpg" style="border: 0;" alt="Startseite" width="167" height="73"></a></div>
        <div id="produkte"><a href="produkte.html"><img src="img/emw_12.jpg" style="border: 0;" alt="Produkte" width="131" height="73"></a></div>
        <div id="referenzen"><a href="referenzen.html"><img src="img/emw_13.jpg" style="border: 0;" alt="Referenzen" width="159" height="73"></a></div>
        <div id="team"><a href="team.html"><img src="img/emw_14.jpg" style="border: 0;" alt="Team" width="90" height="73"></a></div>
        <div id="philosophie"><a href="philosophie.html"><img src="img/emw_15.jpg" style="border: 0;" alt="Philosophie" width="160" height="73"></a></div>
        <div id="chronik"><a href="chronik.html"><img src="img/emw_16.jpg" style="border: 0;" alt="Chronik" width="117" height="73"></a></div>
        <div id="werkstatt"><a href="werkstatt.html"><img src="img/emw_17.jpg" style="border: 0;" alt="Werkstatt" width="171" height="73"></a></div>        
        <div id="content"><p>Startseite</p></div>
		<div id="footertop"></div>
        <div id="footermid"></div>
        <div id="footermail"><address><a href="mailto:E.MoebelwerkstaettenGmbH@t-online.de"><img src="img/emw_23.jpg" style="border: 0;" alt="E-Mail" width="300" height="16"></a></address></div>
        <div id="footerabschluss"></div>
        <div id="footerbot"></div>        
	</div> 
 
</body>
</html>

Code:
*{margin:0px; padding:0px;}

html  
{  
background-image:url(../img/bg.jpg);
text-align:center;  
}  

#wrapper  
{  
Width:995px;  
margin-left:auto;  
margin-right:auto;  
}

#bannertop  
{  
background-image:url(../img/emw_03.jpg);  
width:995px;  
height:54px;  
margin-left:auto;  
margin-right:auto;  
margin-top:10px;  
}

#bannermid 
{  
background-image:url(../img/emw_05.jpg);
float:left;
width:695px;  
height:22px;  
margin-left:auto;  
margin-right:auto;  
margin-top:auto;  
}

#anfahrt  
{  
background-image:url(../img/emw_06.jpg);  
float:left;
width:77px;  
height:22px;  
margin-left:auto;  
margin-right:auto;  
margin-top:auto;  
}

#kontakt
{  
background-image:url(../img/emw_07.jpg);  
float:left;
width:91px;  
height:22px;  
margin-left:auto;  
margin-right:auto;  
margin-top:auto;  
}

#impressum 
{  
background-image:url(../img/emw_08.jpg);  
float:left;
width:114px;  
height:22px;  
margin-left:auto;  
margin-right:auto;  
margin-top:auto;  
}

#abschluss  
{  
background-image:url(../img/emw_09.jpg);  
float:left;
width:18px;  
height:22px;  
margin-left:auto;  
margin-right:auto;  
margin-top:auto;  
}

#foto
{  
background-image:url(../img/emw_10.jpg);  
width:995px;  
height:239px;  
margin-left:auto;  
margin-right:auto;
margin-top:22px;
}

#startseite
{  
background-image:url(../img/emw_11.jpg);  
float:left;
width:167px;  
height:73px;  
margin-left:auto;  
margin-right:auto;
margin-top:auto; 
}

#produkte
{  
background-image:url(../img/emw_12.jpg);  
float:left;
width:131px;  
height:73px;  
margin-left:auto;  
margin-right:auto;
margin-top:auto; 
}

#referenzen
{  
background-image:url(../img/emw_13.jpg);  
float:left;
width:159px;  
height:73px;  
margin-left:auto;  
margin-right:auto;
margin-top:auto; 
}

#team
{  
background-image:url(../img/emw_14.jpg);  
float:left;
width:90px;  
height:73px;  
margin-left:auto;  
margin-right:auto;
margin-top:auto; 
}

#philosophie
{  
background-image:url(../img/emw_15.jpg);  
float:left;
width:160px;  
height:73px;  
margin-left:auto;  
margin-right:auto;
margin-top:auto; 
}

#chronik
{  
background-image:url(../img/emw_16.jpg);  
float:left;
width:117px;  
height:73px;  
margin-left:auto;  
margin-right:auto;
margin-top:auto; 
}

#werkstatt
{  
background-image:url(../img/emw_17.jpg);  
float:left;
width:171px;  
height:73px;  
margin-left:auto;  
margin-right:auto;
margin-top:auto; 
}

#content
{  
background-image:url(../img/emw_19.jpg);  
margin-left:auto;  
margin-right:auto;
margin-top:auto; 
}

#footertop
{  
background-image:url(../img/emw_21.jpg);  
width:995px;  
height:70px;
margin-left:auto;  
margin-right:auto;
margin-top:auto; 
}

#footermid
{  
background-image:url(../img/emw_22.jpg);  
float:left;
width:559px;  
height:16px;
margin-left:auto;  
margin-right:auto;
margin-top:auto; 
}

#footermail
{  
background-image:url(../img/emw_23.jpg);  
float:left;
width:300px;  
height:16px;
margin-left:auto;  
margin-right:auto;
margin-top:auto; 
}

#footerabschluss
{  
background-image:url(../img/emw_24.jpg);  
float:left;
width:136px;  
height:16px;
margin-left:auto;  
margin-right:auto;
margin-top:auto;
}

#footerbot
{  
background-image:url(../img/emw_25.jpg);  
float:left;
width:995px;  
height:36px;
margin-left:auto;  
margin-right:auto;
margin-top:auto;
margin-bottom:10px;
}

Wenn ihr nun in der CSS-Datei schaut unter #foto da muss ich ein margin-top:22px; setzten anstatt margin-top:auto; da sich sonst dieses Bild in das obere schiebt, warum auch immer, sonst funktioniert immer auto nur an dieser Stelle nicht. Habt ihr ne Ahnung wieso? Wenn ich es mit den 22px machen sieht alles ok aus von daher juckts mich nicht so hart aber na ja würd shcon gerne wissen wieso :)

Unter Impressum hab ich mal bissel "Content" gemacht damit die Seite etwas länger wird.
Alles in allem bin ich zufrieden dafür das ich vorher nix mit html und Photoshop am Hut hatte. :)

MfG
 

Rainve

Mitglied
Hast du dir schon mal angesehen wie "float & clear" funktioniert?
Entferne doch mal das "margin-top: 22px" und ersetze es durch ein "clear: both".
 

chillious

Grünschnabel
ok damit funktioniert es auch, leider weiß ich nicht wieso dies so ist :) dennoch danke!

hast du zufällig ne seite die den umstand besonders gut erklärt? :)

wenn nicht google ich ma.

mfg
 

chillious

Grünschnabel
ok alles klar danke dafür, jedoch verstehe ich nicht warum es sonst z.b. beim footer funktioniert ohne den befehl. na ja egal das nächste mal nutze ich den einfach.

E: ich hab das clear:both jetzt noch an den entsprechenden stellen hinzugefügt und es funktioniert immer noch. =)
 
Zuletzt bearbeitet: