HILFE: Neues Design für eigene Website Wer kann mir helfen?
#1
geschrieben 15. Dezember 2011 - 11:23
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:
Anzeige
#2
geschrieben 15. Dezember 2011 - 11:39
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="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&style=pre&p=57women&w=130&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: 169
PSD-Datei (Entwurf)
Gibt es niemanden, der da helfen kann?
Dieser Beitrag wurde von DJ*BNY bearbeitet: 15. Dezember 2011 - 12:54
#3
geschrieben 15. Dezember 2011 - 16:13
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
#4
geschrieben 15. Dezember 2011 - 16:18
#5
geschrieben 15. Dezember 2011 - 18:41
#6
geschrieben 15. Dezember 2011 - 18:46
so ist wieder oben
#7
geschrieben 15. Dezember 2011 - 19:31
Dieser Beitrag wurde von DJ*BNY bearbeitet: 15. Dezember 2011 - 19:32
#8
geschrieben 15. Dezember 2011 - 21:32
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 )
#9
geschrieben 16. Dezember 2011 - 00:49
Würde mich sehr freuen, wenn du da was schickes basteln könntest.
MfG Benny
#10
geschrieben 10. Juli 2012 - 15:23
Die Seite erreicht ihr mittlerweile übrigens über www.djbny.de erreichbar. Hier der Screenshot
#11
geschrieben 10. Juli 2012 - 15:40
#12
geschrieben 10. Juli 2012 - 15:53
Zitat (Windows 8 User: 10. Juli 2012 - 15:40)
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.
#13
geschrieben 08. August 2012 - 10:05
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?
#14
geschrieben 08. August 2012 - 10:19
#15
geschrieben 08. August 2012 - 12:30
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