www.psy-coding.de

taffrot · 17.05.2009

AW: www.psy-coding.de

Herr_D schrieb:
Wie gesagt: Layout ist ansprechend, Umsetzung mangelhaft...

okay, frage: wie kann ich die Umsetzung bessser machen mit einem "photoshop - code" ?

beautyIAF · 17.05.2009

AW: www.psy-coding.de

Hallo,

sehr schöne Farben, allerdings ist die Homepage ohne Inhalte ja noch ein wenig langweilig..

sokie · 17.05.2009

AW: www.psy-coding.de

taffrot schrieb:
okay, frage: wie kann ich die Umsetzung bessser machen mit einem "photoshop - code" ?

den ganzen Photoshop- Code verwerfen und durch xhtml/css ersetzen.

der Javascript Codemüll hat da nichts verloren und die Tabellenkonstruktion auch nicht.

taffrot · 17.05.2009

AW: www.psy-coding.de

so...hab mal das ganze mal anders gemacht...

Code:

<html>
<head>
<title>www.psy-coding.de</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Save for Web Styles (technical_websitelayout.psd) -->
<style type="text/css">
<!--

#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:900px;
	height:800px;
}

#index-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:200px;
	height:129px;
}

#index-02 {
	position:absolute;
	left:200px;
	top:0px;
	width:534px;
	height:129px;
}

#index-03 {
	position:absolute;
	left:734px;
	top:0px;
	width:166px;
	height:129px;
}

#index-04 {
	position:absolute;
	left:0px;
	top:129px;
	width:156px;
	height:22px;
}

#index-05 {
	position:absolute;
	left:156px;
	top:129px;
	width:12px;
	height:18px;
}

#index-06 {
	position:absolute;
	left:168px;
	top:129px;
	width:43px;
	height:18px;
}

#index-07 {
	position:absolute;
	left:211px;
	top:129px;
	width:8px;
	height:18px;
}

#index-08 {
	position:absolute;
	left:219px;
	top:129px;
	width:59px;
	height:18px;
}

#index-09 {
	position:absolute;
	left:278px;
	top:129px;
	width:9px;
	height:18px;
}

#index-10 {
	position:absolute;
	left:287px;
	top:129px;
	width:64px;
	height:18px;
}

#index-11 {
	position:absolute;
	left:351px;
	top:129px;
	width:8px;
	height:18px;
}

#index-12 {
	position:absolute;
	left:359px;
	top:129px;
	width:39px;
	height:18px;
}

#index-13 {
	position:absolute;
	left:398px;
	top:129px;
	width:10px;
	height:18px;
}

#index-14 {
	position:absolute;
	left:408px;
	top:129px;
	width:58px;
	height:18px;
}

#index-15 {
	position:absolute;
	left:466px;
	top:129px;
	width:77px;
	height:18px;
}

#index-16 {
	position:absolute;
	left:543px;
	top:129px;
	width:357px;
	height:22px;
}

#index-17 {
	position:absolute;
	left:156px;
	top:147px;
	width:387px;
	height:4px;
}

#index-18 {
	position:absolute;
	left:0px;
	top:151px;
	width:156px;
	height:375px;
}

#index-19 {
	position:absolute;
	left:156px;
	top:151px;
	width:498px;
	height:442px;
}

#index-20 {
	position:absolute;
	left:654px;
	top:151px;
	width:246px;
	height:375px;
}

#index-21 {
	position:absolute;
	left:0px;
	top:526px;
	width:156px;
	height:88px;
}

#index-22 {
	position:absolute;
	left:654px;
	top:526px;
	width:246px;
	height:88px;
}

#index-23 {
	position:absolute;
	left:156px;
	top:593px;
	width:498px;
	height:1px;
}

#index-24 {
	position:absolute;
	left:156px;
	top:594px;
	width:498px;
	height:20px;
}

#index-25 {
	position:absolute;
	left:0px;
	top:614px;
	width:156px;
	height:186px;
}

#index-26 {
	position:absolute;
	left:156px;
	top:614px;
	width:498px;
	height:186px;
}

#index-27 {
	position:absolute;
	left:654px;
	top:614px;
	width:246px;
	height:186px;
}

-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- Save for Web Slices (technical_websitelayout.psd) -->
<div id="Table_01">
	<div id="index-01">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_01.png" width="200" height="129" alt="" />
	</div>
	<div id="index-02">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_02.png" width="534" height="129" alt="" />
	</div>
	<div id="index-03">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_03.png" width="166" height="129" alt="" />
	</div>
	<div id="index-04">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_04.png" width="156" height="22" alt="" />
	</div>
	<div id="index-05">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_05.png" width="12" height="18" alt="" />
	</div>
	<div id="index-06">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_06.png" width="43" height="18" alt="" />
	</div>
	<div id="index-07">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_07.png" width="8" height="18" alt="" />
	</div>
	<div id="index-08">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_08.png" width="59" height="18" alt="" />
	</div>
	<div id="index-09">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_09.png" width="9" height="18" alt="" />
	</div>
	<div id="index-10">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_10.png" width="64" height="18" alt="" />
	</div>
	<div id="index-11">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_11.png" width="8" height="18" alt="" />
	</div>
	<div id="index-12">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_12.png" width="39" height="18" alt="" />
	</div>
	<div id="index-13">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_13.png" width="10" height="18" alt="" />
	</div>
	<div id="index-14">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_14.png" width="58" height="18" alt="" />
	</div>
	<div id="index-15">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_15.png" width="77" height="18" alt="" />
	</div>
	<div id="index-16">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_16.png" width="357" height="22" alt="" />
	</div>
	<div id="index-17">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_17.png" width="387" height="4" alt="" />
	</div>
	<div id="index-18">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_18.png" width="156" height="375" alt="" />
	</div>
	<div id="index-19">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_19.png" width="498" height="442" alt="" />
	</div>
	<div id="index-20">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_20.png" width="246" height="375" alt="" />
	</div>
	<div id="index-21">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_21.png" width="156" height="88" alt="" />
	</div>
	<div id="index-22">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_22.png" width="246" height="88" alt="" />
	</div>
	<div id="index-23">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_23.png" width="498" height="1" alt="" />
	</div>
	<div id="index-24">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_24.png" width="498" height="20" alt="" />
	</div>
	<div id="index-25">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_25.png" width="156" height="186" alt="" />
	</div>
	<div id="index-26">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_26.png" width="498" height="186" alt="" />
	</div>
	<div id="index-27">
		<img src="http://www.psd-tutorials.de/modules/Forum/images/index_27.png" width="246" height="186" alt="" />
	</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>

Ist der Code wenigstens Teilweise besser?

wewin · 17.05.2009

AW: www.psy-coding.de

Herr_D schrieb:
Wenn du nochmal richtig guckn würdest: Der Frame ergibt sich nur durch die Webadresse... die eigentliche Seite ist nicht in frames aufgebaut dafür aber in html-Code a la 1996

Und das macht es besser? Das Ziel sollte doch in jedem Fall sein, Frames zu vermeiden und bei bplaced braucht man wirklich keine Frame-Weiterleitung. Das Ergebnis ist doch das gleiche, keine direkten Links möglich, die Suchmaschine sagt "no, thanks!".

@taffrot
Die Seite im letzten Zustand braucht bei mir zu lange zum laden, bis alle bilder aufgebaut sind - immer ein paar Sekunden.
Dazu die Frame-Weiterleitung, gerade bei den tutorials möchtest du sicher weiter verlinkt werden - wenn das nicht möglich ist, ist es blöde

Außerdem fehlt mir ein bisschen der Bezug auf c++ - vom Design hätte ich eher auf Webdesign getippt anstatt auf nen programmer

Ansonsten gefällt mir die Seite aber sehr gut, je öfter ich sie mir ansehe umso mehr gefällt sie mir.

sokie · 17.05.2009

AW: www.psy-coding.de

taffrot schrieb:
so...hab mal das ganze mal anders gemacht...
Ist der Code wenigstens Teilweise besser?

das ist nicht besser sondern eigentlich noch schlimmer.
Bildbearbeitsprogramme können dir nur soweit helfen, dass du eine Voransicht deiner Webseite erstellen kannst.
Um sie letztendlich Web-fähig zu machen musst du schon selbst Hand anlegen.
PS ist kein WebSeitenMachProgramm.

taffrot · 17.05.2009

AW: www.psy-coding.de

Das mit der Frameweiterleitung...okay das ist in dem Fall nur noch ein Provisorium, weil sie halt kostenlos ist. Ich werde mir eine HTTP Weiterleitung besorgen.
Der Aspekt mit dem Bezug auf C++ hab ich jetzt schon öfters gehört und ich bin
gerade am austüfteln

ich werde evtl. einfach ein paar codezeilen in den Hintergrund legen oder sowas in der Richtung

@Sokie: alles klar...wollte nur die Möglichkeit auch noch Ausprobieren.

Cheers und thx 4 comment

sokie · 17.05.2009

AW: www.psy-coding.de

eigentlich braucht die Seite zur Darstellung nicht mehr html als dies:

HTML:

<div id="wrapper">
    <div id"header">
      <img src="logo" alt="das ist mein Logo">
    </div>
    <ul id="navi">
      <li><a href="">Home</a></li>
      <li><a href="">Projects</a></li>
      <li><a href="">Thumbnails</a></li>
      <li><a href="">Links</a></li>
      <li><a href="">Contact</a></li>
    </ul>
    <div id="inhalte">
      Hier und anderswo sollte Text als Text stehen und nicht als Bild.
      <div id="footerinfo">
        copyright und info 2009
      </div>
    </div>
</div>

die Positionierung und Ausgestaltung, Hintergrundgrafiken etc werden über css definitionen gemacht

taffrot · 17.05.2009

AW: www.psy-coding.de

Danke

habs ausprobiert, aber nehms mir nicht übel...ich versteh davon einfach immernoch nix.
Werd mir noch die eine oder andere Seite ansehen müssen, bis ich das alles blick ^^

Ausserdem hab ich mir mal was für den Bezug auf C++ überlegt. Er ist nicht so ganz
Offensichtlich, aber vom "Webdesign" bin ich glaub somit gut weg gekommen.

(war mir zu blöd das auf den Server zu laden

)

cheers

edit: hab gesehn das Bild ist nicht so schön, der Code ist normal schon zu lesen, wenn auch mit wenig Deckkraft

wewin · 17.05.2009

AW: www.psy-coding.de

taffrot schrieb:
Das mit der Frameweiterleitung...okay das ist in dem Fall nur noch ein Provisorium, weil sie halt kostenlos ist. Ich werde mir eine HTTP Weiterleitung besorgen.

Frameweiterleitung ist auch nicht kostenloser als eine richtige...

taffrot schrieb:
Ausserdem hab ich mir mal was für den Bezug auf C++ überlegt. Er ist nicht so ganz
Offensichtlich, aber vom "Webdesign" bin ich glaub somit gut weg gekommen.

Sieht schon mal mehr nach (edit) C++ aus und auch nicht schlecht - aber bitte verwende nicht diese Schriftart für den Content - das kann man ja mal gar nicht lesen...

Mja · 19.05.2009

AW: www.psy-coding.de

Hallo Taffrot

Design ist schön. Schlicht und schöne Farben..

mach doch das Logo bündig zum Content. Jetzt "hängt" es irgendwie so in der Luft herum...
Wenn du keine Ahnung von CSS hast, warum machst du nicht einfach alles mit Tabellen?
Der Inhalt per PHP Include includen, kleines php script, und basta..
Muss ja nicht immer als super geil perfekt per CSS designt sein, wenn's auch anderst geht... Das kannst du später ja immer noch anpassen, wenn du dich da hinein versetzt hast.
Mach noch das Menü als Text, und nicht Grafik. Da hat Google noch etwas freude!

Grüessli und viel spass..

saint44 · 31.05.2009

AW: www.psy-coding.de

Ich würde dir vielleicht noch raten, dass du das grüne Content bild als Tabelle machen kannst(mit entsprechener Hintergundfarbe)... Das is das größte Bild und wird den Ladevorgang deutlich verbessern.

mfG

taffrot · 06.06.2009

AW: www.psy-coding.de UPDATE

Soo...ich hab mich ein bisschen in CSS eingelesen und vorläufig mal versucht
das ganze zusammen zu wruschteln.

index.html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//DE">
<html>
<head>
<title>psy-coding --- CSS Umsetzung</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">

</style>
</head>
<body>
<body bgcolor = "#045659">

	<!--HEADER-->
	<div id="header">
	<img id="logo" src="images/logo.png" alt="psY-Coding"> <!--LOGO-->
	<img id="header_1" src="images/psy-coding_04.png">
	<img id="header_2" src="images/psy-coding_03.png">
	<img id="header_left_1" src="images/psy-coding_01.png">
	</div>
	
	<!--NAVIGATION-->
	<div id="navigation">
	 <!--Fehlt noch-->
		</div>
	
	<!--CONTENT-->
	<div id="content">
	<img id="content_left" src="images/psy-coding_05.png">
	<img id="content_down" src="images/psy-coding_08.png">
	<img id="content_main" src="images/psy-coding_06.png">
	<img id="content_right" src="images/psy-coding_07.png">
	</div>


</body>
</html>

style.css

Code:

html.body {
	background-color:rgb(4,86,89);
	margin:0px;
	padding:0px;
}

#psy-coding{
	background-color:rgb(4,86,89);
	width:100%;
	height:100px;
	padding:0px;
	margin:0px;
}	
		#logo {
		position:absolute;
		top:0px;
		left:81px;
		width:138px;
		height:101px;
		}
	
		#header_1 { 
		position:absolute;
		top:101px;
		left:81px;
		width:138px;
		height:50px;
		}
		#header_2 {
		position:absolute;
		top:0px;
		left:219px;
		width:681px;
		height:151px;
		}
		#header_left_1 {
		position:absolute;
		top:0px;
		left:1px;
		width:77px;
		height:800px;		
		}
		#content_left {
		position:absolute;
		top:151px;
		left:78px;
		width:78px;
		height:649px;
		}
		#content_down {
		position:absolute;
		top:614px;
		left:156px;
		width:744px;
		height:186px;
		}
		#content_main {
		position:absolute;
		top:151px;
		left:156px;
		}
		#content_right {
		position:absolute;
		top:151px;
		left:656px;
		width:243px;
		height:463px;
		}

Freue mich auf Antworten
taffrot

p.s. noch schnell auf den Server geladen...das mit der URL kommt auch noch

wewin · 06.06.2009

AW: www.psy-coding.de

Habe mir den Quelltext jetzt nicht angesehen - das Design gefällt mir aber.
Einziger Kritikpunkt wäre, dass man wegen des großen Footers nach unten scrollt, aber keine Informationen erhält...

MaedeG · 13.06.2009

AW: www.psy-coding.de

Das Design ist schlicht und modern, gefällt mir ganz gut! Wie hast du die Backgroundmuster erstellt, also die Linien und Kurven?

mfg: Maede

taffrot · 13.06.2009

AW: www.psy-coding.de

Sind ein paar brushsets. Such mal nach "technical brushes"
@wewin: das Prob hab ich bei mir nicht. Habs auch noch nicht für alle Auflösungen optimiert

wewin · 13.06.2009

AW: www.psy-coding.de

Joa, habe momentan leider nur 1024x768 Pixel zur Verfügung

Da geht der Content direkt bis zum unteren Browserrand, dann scrollt man um weiteres zu erfahren, aber das einzige was noch folgt, istdas hier

tomtom81 · 17.06.2009

AW: www.psy-coding.de

Ich finds auch gut^^ Hast du fertige Brushes benutzt oder sind die "Technik" verzierungen selbst gemacht?