PDA

Vollständige Version anzeigen : Page Design

Denny123
30.01.2007, 20:42
Hi,
ich hab mir gedacht, Gimp kann man ja auch mal zum Webdesignen benutzen und nicht immer Zeichnungen und Sigs. Das Design ist komplett mit Gimp gemacht, aber leider muss ich zugeben, das Slicen hab ich mit PhotoImpact 10 (kostest 8€ bei Saturn, also fast geschenkt. Aber zum Slicen richtig Klasse) gemacht. Joa wie ihr seht isses noch nicht fertig gecodet, aber bewertet mal das Design.

http://socialnet.so.funpic.de/

Denny
Tayce
30.01.2007, 21:12
Ja ist schonmal nicht schlecht geworden. Ich würde es allerdings noch etwas breiter machen... Das sieht so schmal ein wenig komisch aus in meinen Augen. Aber das ist wiederrum geschmackssache ;)
ill66
31.01.2007, 00:14
bis die schwarze schrift auf schwarzem hintergrund gefällt mir das gut...
Denny123
31.01.2007, 07:57
also das ist ja kein problem zu ändern. Aber trotzdem danke für den Hinweis, hab es mal geändert. Das mit der Breite kann bestimmt mit einer großen Auflösung zusammenhängen, da das aber wichtig ist, werd ich nochmal danach gucken. Heut mittag setz ich mich nochmal dran. Aber bisdahin

Update: http://socialnet.so.funpic.de/
lox2eagle
31.01.2007, 10:56
Warum hast Du nicht den Gimp zum Slicen verwendet? Die acht Euro hättest Du Dir sparen können ;)
omega
31.01.2007, 14:22
1. Mehr Details einbringen, besonders bei den roten Flächen, die -glaube ich- reflektierend wirken sollen. Außerdem das Design mit besonderen Merkmalen versehen für den Wiedererkennungswert. Kann man viel, viel mehr mit machen.

2. Benutz' einen Editor um eine Seite zu erstellen!

3. World Wide Web Consortium (http://validator.w3.org/check?uri=http%3A%2F%2Fsocialnet.so.funpic.de%2F)
Denny123
31.01.2007, 14:59
@lox2eagle : Nee ^^ , mit Gimp ist das zu schwer, weil man nur mit Hilfslinien arbeiten kann, die dann über das ganze Bild gehen, was dann nacher schwer zu coden ist.

@omega : Code-technisch hab ich ja noch garnichts gemacht ( außer den content Bereich als background gemacht).

Naja mal schaun, was ich noch an Details einbringen kann.
omega
02.02.2007, 11:35
"Code-technisch" noch nichts gemacht?

Dafür ist das aber schon bisschen mehr als nichts:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META CONTENT="text/html; charset=iso-8859-1" HTTP-EQUIV="Content-Type">
<META NAME="Generator" CONTENT="PhotoImpact">
<style type="text/css">
#text {
margin-left: 50px;
margin-right: 50px;
color: #ffffff;
}

</style>
</HEAD>
<BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" align="center">

<TR>
<TD COLSPAN="8"><IMG SRC="images/socialnet_1.jpg" WIDTH="511" BORDER="0" HEIGHT="29"></TD>
<TD COLSPAN="2"><IMG SRC="images/socialnet_2.jpg" WIDTH="83" BORDER="0" HEIGHT="29"></TD>
<TD COLSPAN="2"><IMG SRC="images/socialnet_3.jpg" WIDTH="85" BORDER="0" HEIGHT="29"></TD>
<TD COLSPAN="2"><IMG SRC="images/socialnet_4.jpg" WIDTH="121" BORDER="0" HEIGHT="29"></TD>
</TR>
<TR>
<TD COLSPAN="14"><IMG SRC="images/socialnet_5.jpg" WIDTH="800" BORDER="0" HEIGHT="9"></TD>
</TR>

<TR>
<TD COLSPAN="2"><IMG SRC="images/socialnet_6.jpg" WIDTH="121" BORDER="0" HEIGHT="113"></TD>
<TD COLSPAN="10"><IMG SRC="images/socialnet_7.jpg" WIDTH="558" BORDER="0" HEIGHT="113"></TD>
<TD COLSPAN="2"><IMG SRC="images/socialnet_8.jpg" WIDTH="121" BORDER="0" HEIGHT="113"></TD>
</TR>
<TR>
<TD COLSPAN="14"><IMG SRC="images/socialnet_9.jpg" WIDTH="800" BORDER="0" HEIGHT="10"></TD>
</TR>
<TR>

<TD COLSPAN="2"><IMG SRC="images/socialnet_10.jpg" WIDTH="121" BORDER="0" HEIGHT="26"></TD>
<TD COLSPAN="2"><IMG SRC="images/socialnet_11.jpg" WIDTH="93" BORDER="0" HEIGHT="26"></TD>
<TD><IMG SRC="images/socialnet_12.jpg" WIDTH="93" BORDER="0" HEIGHT="26"></TD>
<TD><IMG SRC="images/socialnet_13.jpg" WIDTH="93" BORDER="0" HEIGHT="26"></TD>
<TD><IMG SRC="images/socialnet_14.jpg" WIDTH="93" BORDER="0" HEIGHT="26"></TD>
<TD COLSPAN="2"><IMG SRC="images/socialnet_15.jpg" WIDTH="93" BORDER="0" HEIGHT="26"></TD>
<TD COLSPAN="3"><IMG SRC="images/socialnet_16.jpg" WIDTH="93" BORDER="0" HEIGHT="26"></TD>
<TD COLSPAN="2"><IMG SRC="images/socialnet_17.jpg" WIDTH="121" BORDER="0" HEIGHT="26"></TD>
</TR>

<TR>
<TD COLSPAN="14"><IMG SRC="images/socialnet_18.jpg" WIDTH="800" BORDER="0" HEIGHT="15"></TD>
</TR>
<TR>
<TD COLSPAN="3"><IMG SRC="images/socialnet_19.jpg" WIDTH="140" BORDER="0" HEIGHT="24"></TD>
<TD COLSPAN="8"><IMG SRC="images/socialnet_20.jpg" WIDTH="520" BORDER="0" HEIGHT="24"></TD>
<TD COLSPAN="3"><IMG SRC="images/socialnet_21.jpg" WIDTH="140" BORDER="0" HEIGHT="24"></TD>
</TR>
<TR>

<TD><IMG SRC="images/socialnet_22.gif" WIDTH="100" BORDER="0" HEIGHT="28"></TD>
<TD COLSPAN="12"><IMG SRC="images/socialnet_23.jpg" WIDTH="600" BORDER="0" HEIGHT="28"></TD>
<TD ROWSPAN="3"><IMG SRC="images/socialnet_24.gif" WIDTH="100" BORDER="0" HEIGHT="324"></TD>
</TR>
<TR>
<TD ROWSPAN="2"><IMG SRC="images/socialnet_25.gif" WIDTH="100" BORDER="0" HEIGHT="296"></TD>
<TD COLSPAN="12" background="images/socialnet_26.jpg" width="600">
<div id="text">
<p>

Hi Leute,
hier entsteht eine Seite, welche die Kommunikation im Internet fördern soll. Ausserdem gibt es
hier diverse Tutorials und Downloads. <br />
Bei Fragen <a href="mailto:dennis-esser@gmx.net">E-mail</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris semper, magna ut pulvinar aliquet, risus tellus elementum urna, venenatis scelerisque pede elit pellentesque urna. Fusce sem lorem, sodales et, tristique ut, semper vitae, enim. Fusce ullamcorper nonummy lacus. Sed nec dolor. Curabitur egestas lacus eget quam. Sed semper dolor vel dolor. Etiam eu massa. Curabitur urna sapien, viverra eu, facilisis eget, dictum at, massa. Aenean consectetuer elementum pede. Cras blandit, velit mattis nonummy semper, eros dolor dictum enim, quis dictum odio turpis eget nibh. Suspendisse pretium, purus at feugiat semper, sem augue imperdiet massa, quis interdum risus lectus ut arcu. Sed viverra mauris. Vivamus aliquet lacinia nisl. In vestibulum sodales ligula. Etiam eu tellus. Fusce consectetuer. Sed iaculis orci eu nisi. Vivamus sit amet erat.

Aenean erat erat, viverra a, elementum et, facilisis eu, odio. Phasellus odio quam, rutrum quis, auctor eu, lobortis vel, quam. In hac habitasse platea dictumst. Vivamus fringilla. Sed erat mi, adipiscing non, vulputate a, egestas sed, mi. Duis gravida fringilla lectus. Donec porta sagittis diam. Suspendisse vel orci. Nullam enim ligula, convallis et, imperdiet vitae, tincidunt ac, mi. Integer dignissim adipiscing massa. Sed tincidunt mi et nibh.

Maecenas sodales elementum elit. Vestibulum ut nibh. Ut et dui. Nunc nisl. Pellentesque dolor tortor, laoreet non, euismod quis, convallis a, risus. Phasellus ac erat sit amet ligula aliquam lacinia. Ut nulla. Pellentesque at massa. Vivamus quam augue, tristique a, dictum vitae, semper in, odio. In ut augue vitae mauris vestibulum volutpat. Nullam luctus, elit vitae auctor tempus, lacus libero scelerisque quam, non blandit ligula risus at lectus. Donec pellentesque mauris venenatis odio. Cras imperdiet orci non leo. Mauris in nisl. Aliquam eros lectus, facilisis vel, ultrices et, dapibus non, nisi.

Phasellus non dolor in metus convallis aliquet. Nunc felis ipsum, laoreet sit amet, blandit id, mattis sed, felis. Nam justo massa, volutpat sed, vulputate non, tempus et, urna. Nulla lacinia dolor sit amet odio. Nunc scelerisque. Nullam felis. Nunc blandit massa eget enim. Fusce bibendum. Maecenas ornare orci id nibh. Nunc elementum lacus at dui. Nam lacinia ligula et neque. Fusce lacinia, orci vel aliquet condimentum, lorem ipsum posuere ligula, id blandit risus risus non sapien.

Integer diam. Suspendisse pharetra. Aliquam erat volutpat. Cras imperdiet arcu nec purus. Mauris placerat, elit et adipiscing pulvinar, pede ligula pellentesque augue, eu vehicula odio felis vel magna. Suspendisse vel felis et nisl tincidunt ultricies. In a felis. Vivamus convallis. Praesent accumsan lacus quis nibh. Vestibulum cursus. Aliquam tincidunt consequat nisl.

</p>
</div>
</TD>
</TR>
<TR>

<TD COLSPAN="12"><IMG SRC="images/socialnet_27.jpg" WIDTH="600" BORDER="0" HEIGHT="47"></TD>
</TR>
<TR>
<TD><IMG SRC="images/socialnet_28.gif" WIDTH="100" BORDER="0" HEIGHT="50"></TD>
<TD COLSPAN="12"><IMG SRC="images/socialnet_29.jpg" WIDTH="600" BORDER="0" HEIGHT="50"></TD>
<TD><IMG SRC="images/socialnet_30.gif" WIDTH="100" BORDER="0" HEIGHT="50"></TD>
</TR>
<TR>
<TD><IMG SRC="images/space.gif" WIDTH="100" BORDER="0" HEIGHT="1"></TD>

<TD><IMG SRC="images/space.gif" WIDTH="21" BORDER="0" HEIGHT="1"></TD>
<TD><IMG SRC="images/space.gif" WIDTH="19" BORDER="0" HEIGHT="1"></TD>
<TD><IMG SRC="images/space.gif" WIDTH="74" BORDER="0" HEIGHT="1"></TD>
<TD><IMG SRC="images/space.gif" WIDTH="93" BORDER="0" HEIGHT="1"></TD>
<TD><IMG SRC="images/space.gif" WIDTH="93" BORDER="0" HEIGHT="1"></TD>
<TD><IMG SRC="images/space.gif" WIDTH="93" BORDER="0" HEIGHT="1"></TD>
<TD><IMG SRC="images/space.gif" WIDTH="18" BORDER="0" HEIGHT="1"></TD>
<TD><IMG SRC="images/space.gif" WIDTH="75" BORDER="0" HEIGHT="1"></TD>
<TD><IMG SRC="images/space.gif" WIDTH="8" BORDER="0" HEIGHT="1"></TD>

<TD><IMG SRC="images/space.gif" WIDTH="66" BORDER="0" HEIGHT="1"></TD>
<TD><IMG SRC="images/space.gif" WIDTH="19" BORDER="0" HEIGHT="1"></TD>
<TD><IMG SRC="images/space.gif" WIDTH="21" BORDER="0" HEIGHT="1"></TD>
<TD><IMG SRC="images/space.gif" WIDTH="100" BORDER="0" HEIGHT="1"></TD>
</TR>
</TABLE>
<!-- Ad by funpic.de --><noscript><div style="display:none">&nbsp;</div></noscript><script type="text/javascript" src="http://media.funpic.de/layer.php?bid=88556260"></script><!-- End Ad by funpic.de --></BODY>
</HTML>


Es fängt doch im Grunde schon beim Schreiben des body-Bereichs und seinen enthaltenen Elementen an, wie die Seite später sein wird und ich kann dir jetzt schon sagen, dass Tabellenlayouts absoluter Mist sind.
Denny123
02.02.2007, 14:48
ähm, das ist der Code aus PhotoImpact. Das sind die gesclicten Bilder in einem einfachen Tabellenlayout zusammengeführt. Ich werde den natürlich nochmal überarbeiten.

Also erst überlegen, bevor man postet.
Galgemaennle
19.02.2007, 04:42
so wie ich die seite sehe, hät man garnet slicen brauchen.....
Denny123
19.02.2007, 12:06
Sry, ich hatte zwischendurch das alte Design wieder draufgemacht. Jetzt ist wieder das neue.

Was ich noch fragen wollte, lohnt es sich an dem weiterzuarbeiten, oder doch ein neues?


MfG Denny
Galgemaennle
19.02.2007, 15:07
Weitermachen! das is so schlicht und einfach gehalten, das wirkt echt seriös! auch farblich einfach top! Zum slicen voll einfach ---> Genial


ich würds nur etwas breitermachen, und denhintergrund nicht weiß lassen.
Lundner
25.02.2007, 02:06
ich würd nen die schrift kleiner machen oder nen anderen font verwenden!
ansonsten kannst du das ganze auch ohne tabelle machen ( ich verwende sie beim slicen zwar auch, aber hier ist eine tabelle nicht notwendig, vorallendingen nicht so wie sie bereitsgestellt wurde)

Trenn doch den Banner vom rest ab und pack ihn in ein div mit den width und height deines Banners, als background-image gibst du dann den banner an.

Darunter kannst du dann die navi packen. Zerteilt, wenn du nen hover effekt machen willst (einfach die image-tags nebeneinander hauen).
Wenn du keinen hover effekt willst dann mach mach es wie beim banner und verwende imagemaps für die navi. (gibts auch als gimp-plugin).
Falls du imagemaps nicht kennst: damit kannst du auf einem Bild Rechtecke und Polynome festlegen, die verlinkt werden. Sehr angenehm ;-)

Nja und darunter dann der Kontentbereich. Da kannst du ein div-Layer hinsetzen mit dem Mittelteil als background-image. Dann mit padding arbeiten.
Oder du setzt ein 2.div-Layer in dieses hinein und arbeitest mit margin.

Darunter kannst du dann die untere Kante hineinsetzen analog zur Vorgehensweise beim Banner ;-) .

Damit wirst du einen übersichtlicheren und kurzen Quelltext hinbekommen.

Das Design gefällt mir aber insgesamt ziemlich gut! Schöne solide Arbeit -weiter so!

P.S. Wenn du es so machen willst kann ich dir auch den Quelltext für das Gerüst schnell schreiben -einfach bescheidsagen ;-)