Anzeige

Dreamweaver - Grundstruktur einer "modernen" Website erstellen

Dreamweaver - Grundstruktur einer "modernen" Website erstellen | PSD-Tutorials.de

Erstellt von XInfinity, 17.09.2010.

  1. XInfinity

    XInfinity Art is infinite!

    Dabei seit:
    06.10.2009
    Beiträge:
    180
    Geschlecht:
    männlich
    Software:
    Photoshop CS4 + Cinema 4D R11.5
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    Hi PSDler,

    da ich ich die Möglichkeit habe, bei meiner Mutter etwas mit Dreamweaver zu arbeiten, und ich mir sehr gerne eine Website erstellen möchte, und ich aber, ehrlich gesagt, mich nicht ein Jahr lang damit beschäftigen möchte, frage ich euch hier nach Rat.

    Meine Seite sollte diese "moderne" Grundstruktur beinhalten, wie man sie heute auf sehr vielen Seiten sieht.

    Erstmal eine kleine Grafik, wie ich mir das so vorstelle:

    http://img443.imageshack.us/img443/3001/homepageaufbau.png

    Der Hauptteil ("Inhalt", grün) sollte immer horizontal zentriert sein und eine feste Breite haben.
    Die Ränder (links, rechts) müssen dann gleich breit sein und haben somit eine variable Breite.
    In dem Hauptteil kommt dann ein Banner unter dem sich die Navigation befindet.
    Wie ich dann aber der Naviagation noch ein Drop-Down Menü hinzufügen kann, weiß ich zwar noch nicht so, aber das kommt auch erst ein bischen später.

    Könnte man das Ganze in CSS verwirklichen, oder empfehlt ihr mir es eher in Frames (was ich mir jetzt eigentlich nicht vorstellen kann, da das schon sehr veraltet ist, oder?) oder sonstwas zu machen?

    Ich denke, dass das eigentlich relativ einfach zu realisieren ist, aber in den ganzen Tutorials, die ich bisher gefunden habe, wurde dieses Thema nicht behandelt.

    lg XInfinity
     
    Zuletzt von einem Moderator bearbeitet: 17.09.2010
    #1      
  2. fexx

    fexx Aktives Mitglied

    Dabei seit:
    13.07.2010
    Beiträge:
    1.058
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe Creative Cloud, Coda2
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    das denke ich nicht, dass ist ein sehr gäniger aufbau einer seite...

    auf keinen fall frames!

    hast du denn schon etwas ahnung bezüglich html und css?

    um dir mal einen anfang zu geben:
    - damit die seite zentriert steht, solltest du einen div um alles legen, welchem du eine feste breite gibst und dann per "margin: 0 auto;" zentrierst

    - für die navigation solltest du mal in einer suchmaschine nach "listennavigation" suchen ... da wirst du sicher fündig (auch wie du eine drop down navigation realisieren kannst)
     
    #2      
  3. XInfinity

    XInfinity Art is infinite!

    Dabei seit:
    06.10.2009
    Beiträge:
    180
    Geschlecht:
    männlich
    Software:
    Photoshop CS4 + Cinema 4D R11.5
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    Ersteinmal vielen Dank für deine schnelle Antwort. :)

    Ich habe mal eine Seite mit Frames erstellt in Dreamweaver, das war sehr einfach.
    Ein bischen kenn ich mich mit HTML schon aus, aber mit CSS habe ich mich noch nicht beschäftigt.

    Kannst du mir dann vielleicht einen Link zu einem passendem Tutorial geben, denn ich habe wirklich keins gefunden?

    Was meinst du mit "um alles legen"? Wie erstelle ich eigentlich überhaupt diesen Mittelteil?

    lg XInfinity
     
    #3      
  4. chris_90

    chris_90 Immer gut drauf.

    Dabei seit:
    22.12.2007
    Beiträge:
    305
    Geschlecht:
    männlich
    Software:
    Adobe CS 5
    Kameratyp:
    Canon EOS 550D | 18-55mm | 50mm | 70-300mm
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    Moin!

    Auch wenn Du meinst es kommt erst später, hier schon einmal ein Link zu Menüs - da gibt es ganz viele, musst mal durchklicken und das raussuchen, das Du Dir am besten vorstellen kannst. Dann einfach den Quellcode anschauen, verstehen, modifizieren und einfügen.

    Stu Nicholls | CSSplay | CSS only menus

    LG
    Slowpoke!
     
    #4      
  5. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    Gib mal "Webseite zentrieren" in die Suche ein, und du wirst mehr als fündig...
     
    #5      
  6. Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    #6      
  7. schnullerbacke

    schnullerbacke Aktives Mitglied

    Dabei seit:
    22.03.2006
    Beiträge:
    268
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    Dein Layout sollte kein großes Problem darstellen.
    Zum Lernen der Grundlagen kannst du auch hier vorbeischauen:
    Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller) Ok, da war ich wohl zu langsam

    Grundlagen brauchst du auf jeden Fall, ein Jahr wird das Lernen mit Sicherheit nicht dauern. Man muss sich aber nichts vormachen, das Thema ist schon sehr umfangreich und birgt viele Tücken (gerade, wenn man eine Seite machen will ,die in allen Browsern funktioniert).


    Auf www.yaml.de kannst du dir mit dem yaml-Builder dein Layout quasi zusammenklicken, ich glaub' sogar incl. Dropdown-Navigation.
    Html und css bekommst du dann frei Haus geliefert.
    Dazu sollten aber Grundkenntniss vorhanden sein.
     
    Zuletzt bearbeitet: 17.09.2010
    #7      
  8. XInfinity

    XInfinity Art is infinite!

    Dabei seit:
    06.10.2009
    Beiträge:
    180
    Geschlecht:
    männlich
    Software:
    Photoshop CS4 + Cinema 4D R11.5
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    Vielen Dank für die vielen Antworten. :)

    Jetzt werde ich erstmal alle Links durchforsten und dann verstehe ich wohl mehr. :)

    Wenn ihr noch Sachen habt, die ihr mir sagen wollt, dann freue ich mich sehr, wenn ihr sie hier postet. :)

    lg XInfinity
     
    #8      
  9. XInfinity

    XInfinity Art is infinite!

    Dabei seit:
    06.10.2009
    Beiträge:
    180
    Geschlecht:
    männlich
    Software:
    Photoshop CS4 + Cinema 4D R11.5
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    So nachdem ich mich jetzt eingearbeitet habe in CSS und HTML, stehe ich jetzt vor einem neuen Problem:
    Die MouseOver-Effekte in meiner Navi.
    Ich habs hier online gestellt, dann könnt ihr den Code sehen:
    www.infinity-projects.com
    Die Menu-Grafiken habe ich in die html-Datei gesteckt, damit sie dem Padding folgen und somit richtig positioniert sind.

    Aber wie kann ich das jetzt mit CSS realisieren, dass bei einem MouseOver ein anderes Bild angezeigt wird?
    Ich habe zwar gelesen, man soll das alles über Hintergrund-Grafiken lösen, aber dann muss ich erst etwas Leeres mit einer id erstellen, dem ich dann ein Hintergrundbild in der CSS-Datei zuweise, das sich dann mit focus und hoover ändert.
    Aber wie kann ich das genau verwirklichen?

    Ich würde mich wirklich sehr über eure Hilfe freuen, denn im Moment komm ich nicht weiter.
    lg XInfinity
     
    #9      
  10. ullihantke

    ullihantke B2B Design e.K.

    Dabei seit:
    15.08.2012
    Beiträge:
    163
    Geschlecht:
    männlich
    Software:
    CC (Mac)
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    Ist ein etwas altes Thema, aber ich hätte eine Frage.

    Viele neue Moderne Homepages haben mittlerweile einen header (so wie auch hier) der sich immer über die komplette Breite des Bildschirms zieht. Wie baut man so was?

    Ist vielleicht eine dumme Frage, aber wenn ich das über einen div Tag mache, dann ist links und rechts immer ein Rand. ich weiss, dass man das auch mit einem Hintergrundbild über die "Seiteneigenschaften" machen kann, aber das scheint mir nicht sehr professionell zu sein.
     
    #10      
  11. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.075
    Geschlecht:
    männlich
    Ort:
    Ö
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    Das macht man mit einem einfachen div, dem man ein Hintergrundbild zuweist. Und wenn man einen CSS Reset einbaut, dann gibt es auch keine Abstände auf der Seite.
     
    #11      
  12. ullihantke

    ullihantke B2B Design e.K.

    Dabei seit:
    15.08.2012
    Beiträge:
    163
    Geschlecht:
    männlich
    Software:
    CC (Mac)
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    hmmm danke für deine Antwort, aber irgendwie verstehe ich das nicht ganz...

    Ich möchte nur, dass in meine div das Hintergrundbild bis über den Rand (oder bis am dem Rand) geht. Das man dies mit CSS einstellen kann weiss, nur nicht wie :)
     
    #12      
  13. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.075
    Geschlecht:
    männlich
    Ort:
    Ö
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    Dann solltest du vielleicht einmal spezifizieren, wo dein konkretes Problem ist.
    Ausgehen von deiner Information (welche gegen 0 geht), habe ich angenommen, dass du lediglich Probleme mit Padding, Margin hast.
    Aus deinem zweiten Post geht hervor, dass du null Ahnung von CSS hast?
    Also, liebe(r) Ulli, bevor wir weiter im Dunkeln tappen, schildere uns deine bisherigen Lösungsvorschläge und woran sie gescheitert sind, deinen Wissensstand etc.
     
    #13      
  14. ullihantke

    ullihantke B2B Design e.K.

    Dabei seit:
    15.08.2012
    Beiträge:
    163
    Geschlecht:
    männlich
    Software:
    CC (Mac)
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    Es geht darum, das ich auf meiner Homepage ein Banner habe und ich möchte gerne, dass mein Banner die komplette Breite meine Browsers ausnutzt (immer).

    Bzw. ich möchte auch andere grafische Elemente so setzten. In einem div Tag wird die Breite beschränkt bzw. weiss ich nicht wo ich dies umstellen kann.
     
    #14      
  15. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.075
    Geschlecht:
    männlich
    Ort:
    Ö
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    Du wiederholst dich. Ein div Container ist immer 100% breit, abzüglich des paddings und margins. Siehe ersten Post von mir, damit du weißt, wie du das lösen kannst.
    Wenn du dich weigerst, uns Informationen (Code) zu liefern, dann können wir dir nicht helfen.
     
    #15      
  16. dirtdiver2010

    dirtdiver2010 Noch nicht viel geschrieben

    Dabei seit:
    05.11.2011
    Beiträge:
    31
    Geschlecht:
    männlich
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    Eventuell in den body und dort als Hintergrund reinsetzten. Ist aber auch nur geraten da ich nicht genau weiß was du machen willst.
     
    #16      
  17. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    Du kannst entweder die mit gelieferten Vorlagen (Templates) von Dreamweaver verwenden oder das Grundgerüst deiner Website selber erstellen. Zweites empfehle ich dir. Das Grundgerüst für deine Website ist ja ziemlich simple.

    HTML:
    1.  
    2. <!-- HTML5 -->
    3. <div class="wrap">
    4.       <header role="heading">
    5.         <!-- header -->
    6.     </header>
    7.     <nav id="mainnav" role="navigation">
    8.         <ul>
    9.           <li><a href="#">Punkt 1</a></li>
    10.         <li><a href="#">Punkt 2</a></li>
    11.         <li><a href="#">Punkt 3</a></li>
    12.         <li><a href="#">Punkt 4</a></li>
    13.       </ul>
    14.     </nav>
    15.     <div id="main" role="main">
    16.         <!-- content -->
    17.     </div>
    18.     <footer role="footer">
    19.         <!-- footer -->
    20.     </footer>
    21.   </div>
    22.  
    Code (Text):
    1.  
    2.     * {margin:0; padding:0; border:none; outline:none; font-size:100%;} /* simple CSS reset */
    3.     .wrap {width:960px; margin:0 auto;} /* fixe Breite, zentriert */
    4.  
    Du solltest dir aber die nötigen Grundkenntnisse von HTML und CSS aneignen. Auch wenn im Dreamweaver einiges über die WYSIWYG (what you see is what you get) Optionen eingestellt werden kann.

    Liebe Grüße, Patrick
     
    #17      
  18. ullihantke

    ullihantke B2B Design e.K.

    Dabei seit:
    15.08.2012
    Beiträge:
    163
    Geschlecht:
    männlich
    Software:
    CC (Mac)
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    Hallo, danke für deine Antwort, kannst du mir ein Buch empfehlen? Ich arbeite ca. 6 Monate intensiv mit html und CSS, aber manch mal sollte man sich schlau lesen.
     
    #18      
  19. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    Selbstverständlich :) Erst einmal eine Link-Sammlung hilfreicher (freier) Lern-Ressourcen im Internet. Ja, es gibt auch das ein oder andere für Lau ;)

    - Grundlagen & mehr (xHTML/HTML5, CSS2/CSS3 & JavaScript)

    Aus der Linkliste kann ich dir vor allem zwei Online-Bücher empfehlen, die du dir auch als gebundenes Buch kaufen kannst. Sie sind ihr Geld auf jeden Fall Wert.

    - HTML5-Handbuch - Webkompetenz
    - Einführung in XHTML, CSS & Webdesign (Michael Jendryschik)

    Wenn du dich auch mit anderen Sprachen auseinandersetzen möchtest, gibt es noch das Website-Handbuch von Markt & Technik. Kostet knapp 50 Euro, ist ca. 1000 Seiten stark und deckt so ziemlich alles ab.

    Alle drei genannten Bücher (das letzte in mehren Ausgaben) habe ich auch bei mir im Regal stehen. Kann ich auf jeden Fall weiter empfehlen. Wie gesagt, schau dir mal die Linkliste an.

    Liebe Grüße, Patrick
     
    Zuletzt bearbeitet: 25.10.2012
    #19      
  20. dirtdiver2010

    dirtdiver2010 Noch nicht viel geschrieben

    Dabei seit:
    05.11.2011
    Beiträge:
    31
    Geschlecht:
    männlich
    Dreamweaver - Grundstruktur einer "modernen" Website erstellen
    AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

    Welches Buch mir sehr geholfen hat und mit welchem ich auch gut zurecht gekommen bin ist "html und css von Kopf bis Fuß". Beinhaltet aber nicht html5 und css3! Ich denke aber um einmal das wesentliche zu begreifen ist es nach wie vor sinnvoll.
     
    #20      
x
×
×