[DJ*BNY]

Hallo liebe Leute,

ich weiß nicht, ob mein Thema hier richtig ist, aber ich wollte gerne für meine Website www.djbny-music.de ein neues Design einstellen, habe aber leider überhaupt keine Ahnung.
Ich weiß nur, wie ich im Endeffekt Bilder und Texte und andere HTML-Elemente einfüge, aber nicht, wie ich das Grundgerüst in HTML und CSS schreibe.

Ich benutze einen Baukasten, wo ich komplett eigene Designs einstellen kann, dort habe ich letztes Jahr auch eine Vorlage aus dem Netz nutzen können, wo ich dann alles nach belieben abändere.

Mein neues Design soll aussehen, wie auf dem nachstehenden Screenshot, ich habe nämlich vorab alles schonmal in Photoshop entworfen. Es orientiert sich ein bisschen an Zune, enthält jedoch eigene Elemente.

Ich brauche eigentlich nur das Grundgerüst, denn der Contentbereich, der Bereich in der Sidebar und der Footer sind manuell anpassbar, d.h. ich kann meine eigenen Beiträge kinderleicht online stellen.

Ich wäre sehr dankbar, wenn mir da jemand helfen kann. Ihr bekommt natürlich alles, was ihr dafür braucht, um mir zu helfen.

Vielen Dank im Voraus

Benny

Hier der Entwurf:

[DJ*BNY]

Um es auch noch mal genauer zu erläutern, ich brauche das Grundgerüst, so wie die Seite aussehen soll, dann muss vorgegeben sein, wie neue Beiträge aussehen (Schriftart, Breite des Content-Bereiches), dann muss die genaue Position und Größe aller Elemente (Header-Bereich, Content, Sidebar, Footer) gegeben sein.

Wenn mir daraus jemand den HTML-Quelltext schreiben könnte mit einem CSS-Stylesheet, das wäre super.

Hier auch mal das Photoshop-Dokument zum obigen Bild und die HTML- und CSS-Datei zu meinem aktuellen Design:

HTML (aktuell):

Zitat

<div id="header">
<div id="logo">
<h1>
<a href="http://djbny-music.de"><img src="djbny-banner-and-logo.png" alt="DJ*BNY Logo" /></a>
</h1>
</div>

<div id="menu">
<ul>
<li class="active">
<a href="http://djbny-music.de/news" accesskey="1" title="">News</a>
</li>

<li>
<a href="http://djbny-music.de/djbny" accesskey="2" title="">DJ*BNY</a>
</li>

<li>
<a href="http://djbny-music.de/minecraft" accesskey="2" title="">Minecraft</a>
</li>

<li>
<a href="http://djbny-music.de/bilder" accesskey="3" title="">Bildergalerie</a>
</li>

<li>
<a href="http://djbny-music.de/videos" accesskey="4" title="">Videos</a>
</li>
</ul>
</div>
</div>

<hr />

<div id="page">
<div id="bg">
<div id="content">
<div class="post" style="padding-top: 57px;">
<var>content</var>
<p class="meta">
<a class="more" href="#">Zum Anfang</a>
</p>
<var>footer</var>
</div>
</div>
<!-- end contentn -->

<div id="sidebar">
<div id="about-box">
<h2>
Besucht DJ*BNY auf
</h2>
<a href="http://www.facebook.com/pages/DJBNY/175730405828680"><img class="img150" src="facebook-icon.png" alt="" /></a> <a href="http://youtube.com/thebnyorg"><img class="img150" src=
"youtube-ico.png" width="32" height="32" alt="" /></a> <a href="http://www.lastfm.de/music/DJ*BNY"><img class="img150" src="lastfm-icon.png" alt="" /></a><a href=
"http://twitter.com/#!/djbny_music"><img class="img150" src="twitter-icon.png" alt="" /></a>
</div>

<ul>
<li>
<h2>
Informationsbereich
</h2>
<var>sidebar</var>
</li>
</ul>

<ul>
<li>
<h2>
Support
</h2>

<ul>
<li class="first">
<a href="http://www.djbny-music.de/arbeitgeber-information/">Arbeitgeber-Information</a>
</li>

<li>
<a href="http://www.djbny-music.de/faq/">FAQ</a>
</li>

<li>
<a href="http://djbny-music.de/kontakt">Kontaktformular</a>
</li>

<li>
<a href="http://djbny-music.de/g%C3%A4stebuch">Gästebuch</a>
</li>

<li>
<a href="http://www.djbny-music.de/%C3%BCber-dj-bny/">Über DJ*BNY</a>
</li>
</ul>
</li>

<li>
<h2>
Meine Partnerseiten
</h2>

<p>
<br />
<a href="http://WinFuture.de/" target="_top" title="WinFuture.de - News, Download, Forum, Test, Reviews, ..."><img src="http://WinFuture.de/Banner/WinFuture_3_88x31.gif" alt=
"WinFuture.de - News, Download, Forum, Test, Reviews, ..." border="0" width="88" height="31" /></a><br />
Weitere Partner folgen in Kürze
</p>
</li>

<li>
<h2>
Gezählte Besucher
</h2>
<script type="text/javascript" src="http://fc.webmasterpro.de/counter.php?name=thebny&amp;style=pre&amp;p=57women&amp;w=130&amp;h=30">
</script> <noscript>
<div>
<img src="http://fc.webmasterpro.de/as_noscript.php?name=thebny" style="width:1px;height:1px;" alt="" />
</div></noscript><br />
<br />
</li>

<li>
<h2>
Anzeigen
</h2>
<a href="http://www1.belboon.de/adtracking/02e7a3084bc502c43e003d51.html" target="_blank"><img src="http://www1.belboon.de/adtracking/02e7a3084bc502c43e003d51.img" border="0"
width="180" height="150" alt="" /></a><br />
<a href="http://www1.belboon.de/adtracking/02e7a3084bc502f3b2003a96.html" target="_blank"><img src="http://www1.belboon.de/adtracking/02e7a3084bc502f3b2003a96.img" border="0"
width="180" height="180" alt="Chocri - Meine Schokolade" /></a>
</li>
</ul>
</div>
<!-- end sidebar -->

<div style="clear: both;">
 
</div>
</div>
</div>
<!-- end page -->

<hr />

<div id="footer">
<var>navigation[1|2|3]</var>
</div>

CSS (aktuell)  css.txt (3,69K)
Anzahl der Downloads: 179

PSD-Datei (Entwurf)

Gibt es niemanden, der da helfen kann?

Dieser Beitrag wurde von DJ*BNY bearbeitet: 15. Dezember 2011 - 12:54

[Windows 8 User]

Ich würde es schon machen, habe aber erstmal nicht so viel Zeit, weil noch 2 andere Webprojekte von mir angefangen werden müssen.
Wenn es nicht so dringend ist (und kein anderer seine Hilfe anbietet), kannnst du mich gerne im neuen Jahr anschrieben, wenn ich das nicht schon vorher gemacht habe.


Windows 8 User

[Ludacris]

darf ich dir da meine derzeitige Arbeit empfehlen?




(Achtung, der screenshot war die basis für meine arbeit, einfach drauf klicken)

derzeit arbeite ich an der umsetzung des ganzen als Wordpress Design

[DJ*BNY]

@Ludacris: Danke, aber ich kann die Designstudie leider nicht sehen, aber die Startseite deines Blogs ist auch nicht schlecht.

Ich habe übrigens doch schonmal ein wenig rumprobiert und das ist dabei herausgekommen:

Dieser Beitrag wurde von DJ*BNY bearbeitet: 15. Dezember 2011 - 18:54

[Ludacris]

Verdammt da hat mir doch glatt der webmatrix installer die Seite gelöscht - ich las sie in 20 Minuten wieder rauf



so ist wieder oben

[DJ*BNY]

Wow, sieht gut aus

Dieser Beitrag wurde von DJ*BNY bearbeitet: 15. Dezember 2011 - 19:32

[Ludacris]

Geht bin derzeit recht zunzufrieden mit dem Design =/


So, auf meiner seite siehst du jetzt wie es derzeit als Wordpress Theme aussieht. Wenn du willst pass ich es dir auf dein Theme an und mach es fertig (ps, lass ich nicht von der fehlermeldung stören das ist erst seit gerade eben )

[DJ*BNY]

Ja das wäre klasse, ich habe mein vorläufiges Design vorhin ganz alleine in Dreamweaver zusammengebastelt. Ich kann dir da gerne den HTML-Code geben und die CSS.txt, das kann man dann ja abändern. Ich bin nämlich mit meinem Entwurf auch noch nicht ganz zufrieden. Geht aber ziemlich einfach einzubauen, wenn man erstmal das Grundgerüst fertig hat. Denn die Bereiche Content, Footer und Sidebar passt man nicht im HTML-Code der Seite an, sondern wird in diesem nur als <var>content</var>, usw hinterlegt, da man diese drei Bereiche manuell auf der Seite anpassen kann (z.B. neue Beiträge verfassen, usw).

Würde mich sehr freuen, wenn du da was schickes basteln könntest.

MfG Benny

[DJ*BNY]

Moin moin, hab gedacht, ich werde diese Thema mal wieder ein wenig aufrollen, da sich mittlerweile viel getan hat, seitdem ich im Dezember ein Konzept für meine Website vorgestellt habe. Mittlerweile liegt nun ein fertiges Design vor und ist auch schon einige Monate im Einsatz, jedoch bin ich noch nicht so ganz zufrieden. Ich würde das ganze gerne noch personalisieren und vielleicht uach ein wenig "metrofizieren", wenn ihr wisst, was ich meine. Hier auf jeden Fall erstmal ein Screen von meiner Seite. Was sagt ihr dazu und was kann ich eurer Meinung nach machen, um meiner Vorstellung immer näher zu kommen.

Die Seite erreicht ihr mittlerweile übrigens über www.djbny.de erreichbar. Hier der Screenshot

[Windows 8 User]

Ein wenig Metro stelle ich mir schwierig vor.... entweder ganz oder gar nicht. Bedenke die Metrogrundsätze: wenig Farben, große Überschriften, alles klar und übersichtlich und vor allem schlicht. Du könntest z.B. anfangen die "sozialen Buttons" im Metrodesign (Kreis mit entsprechenden Metrologos) zu machen. Außerdem empfehle ich sämtliche "Segoe UI" Schriftarten. Du solltest aber darauf achten, dass die nicht jeder hat. (Windows XP und älter, Linux und Mac)

[DJ*BNY]

Zitat (Windows 8 User: 10. Juli 2012 - 15:40)

Ein wenig Metro stelle ich mir schwierig vor.... entweder ganz oder gar nicht. Bedenke die Metrogrundsätze: wenig Farben, große Überschriften, alles klar und übersichtlich und vor allem schlicht. Du könntest z.B. anfangen die "sozialen Buttons" im Metrodesign (Kreis mit entsprechenden Metrologos) zu machen. Außerdem empfehle ich sämtliche "Segoe UI" Schriftarten. Du solltest aber darauf achten, dass die nicht jeder hat. (Windows XP und älter, Linux und Mac)

Danke W8U für deinen Rat, ich hatte es ja mit dem Konzept schon einmal versucht, ich werde aber mal schauen, dass ich das so mache, wie du vorschlägst, denn momentan sieht die Seite zwar gut aus, aber ich bin damit nicht ganz zufrieden. Wenn, dann soll es auch konsequent umgesetzt werden. Die Segoe UI-Schriftarten benutze ich schon und für die Überschriften nutze ich momentan noch Zegoe Caps.
Aber mal schauen, vielleicht find ich ja das richtige Konzept und die richtige Idee für die Umsetzung.

[DJ*BNY]

Ich habe übrigens mal ein wenig in Photoshop herumgebastelt und für djbny.de ein neues Design im "Nenn-es-bloß-nicht-Metro"-Look entworfen.

Ich hoffe mal, dass ich alles so hinbekomme, wie ich es mir vorstelle. Ich arbeite ja wie gesagt mit dem Baukasten von Jimdo.com, aber dank immer besser werdender Kenntnisse mit HTML und CSS dürfte ich das hinbekommen.

Ist das Design so schon gut oder gibt es da extremen Verbesserungsbedarf?

[Holger_N]

Mir gefällt der Entwurf aus dem allerersten Post optisch am Besten. Danach wirds ja eigenlich nur bunter.

[Windows 8 User]

Also das sieht bedeutend besser aus, als die aktuelle Seite und das von oben. Die Seite wirkt deutlich aufegeräumter und moderner.

Beim Header stelle ich mir die Umsetzung ins CSS auch nicht besonders schwierig vor. Den Schatten nach innen würde ich aber testweise lassen. Das könnte sonst vielleicht etwas eintönig aussehen. Ansonsten sind die Kacheln auch OK. Ich denke, dass ist auch ein einigermaßen guter Kompromiss für "Hasser" und Liebhaber des Userinterfaces im Windows 8 Stil. Gute Arbeit, aber man muss dann auch mal schauen, wie das in der Realität aussieht.

Dieser Beitrag wurde von Windows 8 User bearbeitet: 08. August 2012 - 12:49