Dreamweaver - Grundstruktur einer "modernen" Website erstellen

[XInfinity]

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:



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

 

[fexx]

AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

[...] aber in den ganzen Tutorials, die ich bisher gefunden habe, wurde dieses Thema nicht behandelt.

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

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?

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)

 

[XInfinity]

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

 

[chris_90]

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.



LG
Slowpoke!

 

[cebito]

AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

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

Gib mal "Webseite zentrieren" in die Suche ein, und du wirst mehr als fündig...

 

[Pixelverwender]

AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

Und zusätzlich findest Du eine ganze Menge an Infos hier: Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

 

[schnullerbacke]

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.

 

[XInfinity]

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

 

[XInfinity]

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:

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

 

[ullihantke]

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.

 

[Myhar]

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.

 

[ullihantke]

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

 

[Myhar]

AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

Dann solltest du vielleicht einmal spezifizieren, wo dein konkretes Problem ist.

Ist vielleicht eine dumme Frage, aber wenn ich das über einen div Tag mache, dann ist links und rechts immer ein Rand.

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.

 

[ullihantke]

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.

 

[Myhar]

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.

 

[dirtdiver2010]

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.

 

[patrick_l]

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.

<!-- HTML5 -->
<div class="wrap">
      <header role="heading">
        <!-- header -->
    </header>
    <nav id="mainnav" role="navigation">
        <ul>
          <li><a href="#">Punkt 1</a></li>
        <li><a href="#">Punkt 2</a></li>
        <li><a href="#">Punkt 3</a></li>
        <li><a href="#">Punkt 4</a></li>
      </ul>
    </nav>
    <div id="main" role="main">
        <!-- content -->
    </div>
    <footer role="footer">
        <!-- footer -->
    </footer>
  </div>

    * {margin:0; padding:0; border:none; outline:none; font-size:100%;} /* simple CSS reset */
    .wrap {width:960px; margin:0 auto;} /* fixe Breite, zentriert */

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

 

[ullihantke]

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.

 

[patrick_l]

AW: Dreamweaver - Grundstruktur einer "modernen" Website erstellen

kannst du mir ein Buch empfehlen?

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

-

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

 

[dirtdiver2010]

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.