Dreamweaver Einsteigerfragen

RockDaHouse · 03.04.2011

Hallo zusammen!

Ich wollte mich mal ein bischen in Dreamweaver einarbeiten habe aber keine Ahnung wie ich meine Ideen umsetzen kann.
Ich habe mir zunächst ein Design mit Photoshop erstellt und die Buttons schon mit Slices versehen.
So weit so gut.
Nun meine erste Frage: Wie bekomme ich es hin das mein Design immer mittig im Browser dargestellt wird und die Ränder mit dem Hintergrund gefüllt werden? Die orangefarbende Kontur sollte sich dabei mitbewegen und bei jeder Auflösung den gleichen Abstand zum Fensterrand haben.

Zweite Frage wie kann ich eine Flashgallerie in die Mitte einfügen die permanent eine Bilderschleife abspielt. Die Gallerie kann ich ja ganz fix mit Lightroom erstellen. Wenn ich diese allerdings einsetze verschieb sich alles und es entstehen Lücken im Design. Zudem hat die swf datei dann keinen Inahlt.

Letze Frage. Wie bekomme ich es hin das man durch Klicken auf einer der Buttons auf einen neuen Bereich der Seite weitergeleitet wird. Das Design soll dabei gleich werden. Nur anstelle der Gallerie in der Mitte soll dann der dazugehörige Text erscheinen.

Das wars erstmal. Hier das Bild:

Uploaded with

Vielen Dank für die Tips

Mway · 03.04.2011

AW: Dreamweaver Einsteigerfragen

Links: Du musst für jede Seite die zu zeigen möchtest eine neue Seite erstellen. Also z.B gallerie, impressum etc
mit den links musst du dann per <href=""/> verlinken.

Das deine Seite mittig erscheint musst du im css für den Body einstellen margin left auto
margin right auto.

das sich alles mit deiner Flashgallerie verschiebt vermute ich mal, das du sieh nicht richtig in einen DIV´s setzt der mit float versehen ist und damit die nachfolgenden DIV´s verschoben werden.

MegaAdi · 03.04.2011

AW: Dreamweaver Einsteigerfragen

Hallo RockDaHouse,
da ich deinem Posting entnehme dass du sehr wenige Grundlagen in der Webgestaltung besitzt rate ich dir, dich ersteinmal mit den Basics vertraut zu machen. Dies kannst du unteranderem auf SelfHTML oder du suchst bei BIG G oder vergleichbaren Suchmaschinen nach HTML-Tutorials.

Back 2 Topic:

wie Mway schon schrieb musst du verschiedene Seiten erstellen wie z.B. gallerie.html (enthällt deine Gallerie), impressum.html, start.html etc etc und velinkst diese mit <a href="start.html">Start</a><a href="gallerie.html">Gallerie</a>... auf deiner Seite.
Als Basic nutzt du immer dein Style welches ich als CSS erstellen würde und du dann nur noch die style.css in jede Seite einbinden musst.

Zur Gallerie kann ich nichts sagen, wieso sich diese verschiebt. Poste mal den Quell-Code dazu oder ein Link zur aktuellen Test-Seite.
Ansonsten kann man hier nur mit ner Glaskugel arbeiten oder im Trüben fischen

Gruß Adrian

RockDaHouse · 03.04.2011

AW: Dreamweaver Einsteigerfragen

danke euch beiden schonmal für die schnelle Antwort.
Stimmt im Webdesign habe ich noch kaum Erfahrungen. Ich habe wie die meisten mit einem Baukasten angefangen was ich aber schnell wieder verworfen habe. Ist einfach scheiße wenn man auch nur ein bischen Anspruch hat...
Wohl oder übel muss man sich dann selbst reinarbeiten wenn man nicht jemanden damit beauftragen will.

btt:
Wenn ich die neuen Seiten für Portfolio, contact ect erstelle kann ich diese dann auch ähnlich wie bei Photoshop im Ebenenfenster organisieren? Einfach um etwas den Überblick zu behalten. Wenn ich einfach eine neue Datei erstelle und diese dann contact.html nenne wird der hyperlink wohl kaum funktionieren oder? das muss doch sicherlich alles in dem gleichen Projekt verwaltet werden oder?

Einen Testserver habe ich noch nicht aufgesetzt. Da gibt es ja bisher noch nicht mehr als das Design.

Mway · 03.04.2011

AW: Dreamweaver Einsteigerfragen

Ebene gibt es in Dreamweaver nicht, aber du kannst dir eine Site (Zielordner anlegen ) und jede neue Seite bekommt einen eigenen Reiter.

Ich würde in deinem Fall erstmal eine Seite fertig aufbauen mit allen Links, css usw. wenn diese Fertig ist speicherst du sie unter dem namen der nächste Seite nochmal also z.B Impressum.html und änderst einfach den Inhalt.

RockDaHouse · 03.04.2011

AW: Dreamweaver Einsteigerfragen

gut das habe ich soweit verstanden.

es ergibt sich aber ein neues problem:
Wenn ich versuche mit meiner von Photoshop erstellten html Seite ein Bild einzufügen oder eben die Flashgallerie aus Lightroom dann verschieben sich die Bilder "fragmente" des Layouts.
Anscheinend muss man das irgendwie noch als Hintergrund definieren damit neue Objekte darüber gelagert werden und keine Lücke erzeugen.
Ich zeige euch mal einen Sceenshot zum besseren Verständniss

Uploaded with

Mway · 03.04.2011

AW: Dreamweaver Einsteigerfragen

da liegt schon das Problem^^. In Photoshop erstellten html-seite.
Mach sowas nicht.

Ich weiß nur wie es bei cs3 noch war da wurde das img nicht in den Hintergrund des Divs gestetzt sonder direkt in den DIv. wenn du nun noch was in den DIV reinmachst (deine Flashgallery) verschiebt sich natürlich alles.

Also nicht die Seite in Photoshop als HTML-generieren lassen, das kann nicht viel werden.

RockDaHouse · 03.04.2011

AW: Dreamweaver Einsteigerfragen

dann muss ich erstmal wissen wie ich das selbe design auch so mit dreamweaver hinbekomme. ich nehme mal an das ich dann nur die buttons und die hintergrundtextur mit photoshop machen muss oder?
Dann wird DW mir die Hintergrundtextur wahrscheinlich als ganzflächigen Hintergrund raportieren.
Wie funktioniert das?

MegaAdi · 03.04.2011

AW: Dreamweaver Einsteigerfragen

da du ja nur eine Farbe für den Hintergrund genommen hast kannst du diese deinem div auch direkt zuweisen. Ich schätze mal der Hex-Code von deiner Farbe ist #444444 oder?
Du gibts dem Div wo der Inhalt reinsoll die ID "Content" also <div id="content">HIER DER INHALT</div>

per CSS kannst nu nun dem Div die Hintergrundgrafik anweisen.

also:

<style type="text/css">
#content {
background: #444; /* Hintergrund deklarieren */
}
</style>
Da du ja eine Linie (Rahmen) um deinen Content haben möchtest realiserst du das ebenfalls in CSS mit "".
Da wir schon den Hintergrund haben:

<style type="text/css">
#content {
background: #444; /* Hintergrund deklarieren */
border: 1px solid #ccc; /* Und hier die Ramen-Farbe */
}
</style>

Da wir den Rahmen aber nicht direkt an dem Content klebend haben wollen müssen wir noch ein bißchen :

<style type="text/css">
#content {
background: #444; /* Hintergrund deklarieren */
border: 1px solid #ccc; /* Und hier die Ramen-Farbe */
padding: 15px; /* Der Innenabstand */
}
</style>

Und somit hast du das, was du in Photoshop als Grafik gebaut hast OHNE Grafik! Das steigert die Performance der Webseite und berücksichtigt auch langsame Surfer (z.B. nur bei GPRS-Empfang mit einem Smart-Phone,...).

Für den Hintergrund der gesamten Seite hast du ja horizontal verlaufende "Profil-Abdrücke" Dort nimmst du 1 Streifen raus - sagen wir mit einer Höhe von 10px - und deklarierst den für die Komplette Seite als Hintergrund.

Wieder als CSS:

body {
background: url('site_background.png') #ddd; /* Hintergrundgrafik deklarieren und alternativ noch eine Farbe angeben */
}

dadurch wird diese kleine Grafik auf der kompletten Seite als Hintergrund angezeigt da dieser sich sowohl auf der X-Achse als auch auf der Y-Achse wiederholt. Je nachdem wie hoch / breit deine Seite ist.

Wie gesagt: Schau dir mal selfhtml.org genauer an und arbeite da ein paar Tutorials nach. Dann begreifst du recht schnell

Gruß Adrian

RockDaHouse · 03.04.2011

AW: Dreamweaver Einsteigerfragen

danke für die ausführliche Antwort.
Man sieht es wahrscheinlich auf dem Bild nicht aber ich wollte einen Radialverlauf für den Hintergrund einbauen. Sodass das Fenster in der Mitte noch etwas hervorgehoben wird. Das wird dann schon schwieriger oder?

Ich werde das trotzdem gleich mal ausprobieren was du geschrieben hast

Mway · 03.04.2011

AW: Dreamweaver Einsteigerfragen

ne kannst du schon machen ein Radialverlauf, aber das Problem ist dabei eben die verschiedenen auflösungen der Bildschirme. Also entweder wird es gekachelt oder skaliert was beides nicht schön aussieht.

RockDaHouse · 03.04.2011

AW: Dreamweaver Einsteigerfragen

Also die Sachen die MegaAdi geschrieben hat funktionieren nicht so recht bei mir. Ich habe dementsprechend alles ausgefüllt aber es zeigt sich nichts...

<style type="text/css">
#content {
background: #444; /Hintergund.jpg/
}
</style>

hat zB keine Wirkung.

Mway · 03.04.2011

AW: Dreamweaver Einsteigerfragen

wo hast das den hingeschrieben ?

Zeig doch mal den Quelltext dann kann man dir auch eher helfen

RockDaHouse · 03.04.2011

AW: Dreamweaver Einsteigerfragen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
</head>

<body>
</body>
</html>

<style type="text/css">
#content {
background: #444; /Hintergrund.jpg/
}
</style>

MegaAdi · 03.04.2011

AW: Dreamweaver Einsteigerfragen

so schwer ist das dank css3 auch nicht mehr!
Schau dir mal dazu mal diesen Link an.

Edit: Die Style-Angaben gehören IMMER in zwischen <head> und </head>! Da sonst die Angaben nicht akzeptiert werden.
Und du musst ein Div deklarieren das die id "content" hat... hab ich Oben aber erklärt. Sonst greift ja auch #content nicht

Gruß Adrian

Mway · 03.04.2011

AW: Dreamweaver Einsteigerfragen

Du solltest dich erstmal ein kleines bisschen mit HTML auseinander setzen dann wird dir auch dreamweaver ganz schnell klar.

RockDaHouse · 03.04.2011

AW: Dreamweaver Einsteigerfragen

Ich merk das schon... In sämtlichen reviews bekommt man immer ganz schön erklärt wie man hyperlinks setzt oder verzeichnisse anlegt ect. aber die Grundlagen werden einfach völlig weggelassen...

Ich versteh noch nicht so wirklich was ihr da redet vonwegen div und content... hört sich alles spanisch an für mich. Schade das der Enthusiasmus immer durch sowas gebremst wird. Im Prinzip weiß ich schon wie die komplette Homepage aussehen soll ich hab aber keinen Schimmer wie ich das umsetzen kann.

Dann werde ich mich mal bei selfhtml einlesen. sonst macht das keinen Sinn wenn ich eure Ratschläge nicht verstehen kann.

Trotzdem vielen Dank für die Tips

MegaAdi · 03.04.2011

AW: Dreamweaver Einsteigerfragen

Ich war mal so frei und habs mal nachgebaut!
Das ist der Code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
      html {
        background: url(bg.png) #332f2c;
      }
      body {
        width: 835px;
        padding: 25px;
        border: 1px solid #7a553b;
        margin: 10px auto;
      }
      #content {
        min-height: 500px;
        width: 800px;
        margin: 0 auto;
        background: #292522;
        border: 1px solid #605c59;
        -moz-box-shadow: -1px -1px 5px 5px #201c19;
        -webkit-box-shadow: -1px -5px 5px 5px#201c19;
        box-shadow: -1px -1px 5px 5px #201c19;
      }
      
      #navi {
        min-height: 50px;
        width: 800px;
        margin: 20px auto;
        background: #292522;
        border: 1px solid #605c59;
        -moz-box-shadow: -1px -1px 5px 5px #201c19;
        -webkit-box-shadow: -1px -5px 5px 5px#201c19;
        box-shadow: -1px -1px 5px 5px #201c19;
      }
      #navi ul {
        list-style: none;
      }
      #navi ul li {
        float: left;
        margin: 0 5px;
      }
      #navi ul li:first-letter {
        color: #b36235;
      }
      #navi ul li a,#navi ul li a:visited,#navi ul li a:active {
        color: #6f7374;
        text-decoration: none;
      }
      #navi ul li a:hover
      {
        color: #b36235;
        tet-decoration: underline;
      }
        
    </style>
  </head>
  <body>
    <div id="content"></div>
    <div id="navi">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </body>
</html>

und dieses Bild musst du dir speichern als "bg.png".
Viel Spaß damit!

Gruß Adrian

RockDaHouse · 03.04.2011

AW: Dreamweaver Einsteigerfragen

klasse so in etwa sollte es aussehen. jetzt nur noch den orange farbenden rahmen mit etwa 10 Pixeln abstand zur Fensterkante und dann ist das schon ziemlich nah dran.

Also der Rahmen sollte sich halt entsprechend der Auflösung immer mit 10 Pixeln Abstand zum Rand halten...

MegaAdi · 03.04.2011

AW: Dreamweaver Einsteigerfragen

Ersetze

body {
width: 835px;
padding: 25px;
border: 1px solid #7a553b;
margin: 10px auto;
}

durch

body {
border: 1px solid #7a553b;
margin: 10px;
}

Ich leg dir wirklich nahe, dich zuerst mit grundlegendem HTML / CSS zu beschäftigen, bevor du irgend ein Web-Projekt angehst! Wenn du da dann immer noch Probleme oder Verständisfragen hast, melde dich einfach nochmal! Aber dir immer alles vorzukauen... Da hab ich keine Lust zu!

Gruß Adrian