Design in Dreamweaver coden

S

Stan_123456789_987

Grünschnabel
Hallo erstmal,
Ich bin neu hier und habe auch gleich mal eine Frage.
Und zwar habe ich mir in Photoshop ein Design gemacht
und will das jetzt in Dreamweaver coden.
Allerdings nicht mit einem Iframe oder einem Frameset.
Ich will, dass die seite am ende dynamisch ist,
also das wenn ein langer Text im Content steht,
soll der content sich automatisch verlängern.
Ich hoff ma ich rede jetzt nicht totalen Blödsinn,
aber soweit ich weiß nennt man das CSS
Hab auch schon viele viele Tuts darüber gelesen,
allerdings erklären die alle nur CSS Stile und nicht,
die ich ein komplettes Design slicen und dann in CSS umwandeln kann!

so und jetzt zu meiner frage:
Kann mir einer von euch ein gutes Tut dafür geben?
Ich hab da absolut nichts gefunden.
Oder einfach in ein paar Sätzen sagen, wie es so ganz grob geht,
nur damit ich weiß, ob ich an der richtigen stelle versuch weiterzukommen.

Hab z.B. in einem Forum gelesen, dass das mit Ebenen geht
und gleich der nächste Link in google hat gesagt, dass ich es mit Div's machen soll

Also, wäre nett, wenn mich jemand aufklären könnte :)

AChja, hier noch das Design, was ich umsetzen will:
http://img3.imagebanana.com/img/r1kdvizg/templaet.jpg

Mfg Basti
 
Hallo

Ich hoff ma ich rede jetzt nicht totalen Blödsinn,
aber soweit ich weiß nennt man das CSS
Zum Vergrößern anklicken....

Dies ist nur teilweise richtig. Es ist leider etwas komplizierter ;)

Die Frage, die ich an dich habe ist. Für was brauchst du das ?
Soll das nur vorrübergehend sein, damit jemand das Design zusammen baut, oder willst du dann diese Seite auch online stellen, die du machst ?


Im Prinzip ist Dreamweaver genau für das da. Man kann einfach ein paar Bildchen, Knöpfchen und ähnliches drücken und hat dann seine Seite. Man muss eigentlich nicht viel wissen. Ob die Seite dann wirklich etwas Wert ist, das ist eine andere Frage, aber wenn du das wirklich machen willst, dann hast du viel vor, denn eine Webseite besteht mindestens aus HTML und CSS.

CSS, das du bereits angesprochen hast, ist im Prinzip der Teil der sagt wie es farblich, größenmäßig aussieht.

HTML ist das, das dir die Elemente zur Verfügung stellt, die du dann mit CSS schmücken kannst.
CSS alleine bringt dir nichts, wenn du es auf nichts anwenden kann.

Stell es dir einfach wie ein Haus vor.
HTML ist das Gebäude, die Wände, die Inneneinrichtung und mit CSS kannst du dann entscheiden, ob du jetzt die Wände weiß oder gelb, den Kasten dort oder dort hin stellst.
Beides zusammen ist eine gute Mischung und du kannst damit eine einfach Homepage machen.
Dreamweaver "beherrscht" diese zwei und, wenn du dich ein bisschen einarbeitest kommst du, ohne jemals den Code ansehen zu müssen, drauf, dass du eine einfache Homepage machen kannst.
Aber falls du diese online stellen willst, empfehle ich dir auf jeden Fall dich ein bisschen mit dem hochladen von Designs zu beschäftigen, da es ein paar Regeln einzuhalten gibt.
Zum beispiel sehe ich, dass du keine Standardschriftart verwendest. (Ich weiß nicht ob die überall drauf ist) Aber damit könnte es Probleme geben, ...

Gruß Simon
 
Hier mal zwei Source-Texte, die Du einfach mal in zwei Dateien speicherst.

Datei style.css
Code: 
body  {
  font-size: 10px;
  font-family: Geneva, Tahoma, sans-serif;
  background-color: #000000;
  color:#AAAAAA;
}
a, a:visited{
  color:#FFFFFF;
  text-decoration:none;
}
a:hover, a:active, a:focus{
  background-color:#444444;
  color:#FFFFFF;
  text-decoration:none;
}
#top{position:absolute;
 background-image:url(./_pix/Header_Logo.jpg);
 background-repeat:no-repeat;
 border:1px solid #882222;
 top:0px;
 left:10px;
 width:700px;
 height:100px;
 z-index:5;
}
#content{position:absolute;
 border-color: #228822;
 border-width:1px;
 border-style:solid;
 top:105px;
 left:10px;
 width:700px;
 z-index:5;
}

.eintrag{
 background-color: #222255;
 text-align:justify;
 width:680px;
 padding:5px;
 margin:5px;
 z-index:6;
}
.green{color:#88FF88;}
.red{color:#FF8888;}

Datei Test.htm
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Test - phreekz Divs</title>
</head>
<body>
<div id="top">Logo aus der css !</div>
<div id="content">
 <div class="eintrag">Test-Eintrag <span class="red">1</span></div>
 <div class="eintrag">Test-Eintrag <span class="green">2</span></div>
 <div class="eintrag">Link zu <a href="http://www.phreekz.de">mir</a></div>
<div class="eintrag">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>

Speicher beide Dateien in einem Ordner und schau Dir an, was die CSS in der HTML bewirkt, indem Du Werte in der CSS veränderst. Schau hier, was für Werte in einer CSS eingetragen werden können. Grundsätzlich findest Du da alle Infos zum Gebrauch von CSS in Verbindung mit HTML.

Interessant ist für Dich, dass die Box ( Layer,Ebene, Div ) content mit dem Inhalt ( hier mehrere eintrag Divs )automatisch wächst, wir haben in der CSS ja auch keine Höhe definiert.

Ganz wichtig auch das Boxmodell, betrifft padding, margin und border und die Unterschiede zwischen div id(#) und class(.).

An die Erfahrenen : Vergebt mir irgendwelche Fehler :-)

mfg chmee
 
Zuletzt bearbeitet:
Hi.
Stan_123456789_987 hat gesagt.:
so und jetzt zu meiner frage:
Kann mir einer von euch ein gutes Tut dafür geben?
Ich hab da absolut nichts gefunden.
Zum Vergrößern anklicken....
Ich schon: Slice & Umsetzung in HTML einer Webseite. Vielleicht hilft es dir ja weiter?

Auf meinem :google:-Trip nach solch einem Tutorial bin ich zudem auf das Adobe-LiveDoc Arbeiten mit Photoshop und Dreamweaver gestoßen.

Stan_123456789_987 hat gesagt.:
Hab z.B. in einem Forum gelesen, dass das mit Ebenen geht
und gleich der nächste Link in google hat gesagt, dass ich es mit Div's machen soll

Also, wäre nett, wenn mich jemand aufklären könnte
Zum Vergrößern anklicken....
Der Begriff "Ebene" (= Layer) umschreibt umgangssprachlich das div-Element.
 
ah, danke für die antowrten =)
damit kann ich glaube was anfangen

Zum beispiel sehe ich, dass du keine Standardschriftart verwendest. (Ich weiß nicht ob die überall drauf ist) Aber damit könnte es Probleme geben, ...
Zum Vergrößern anklicken....

Jo das weiß ich, war nur mal so ein test
Ich will halt das meine Hompage dynamisch wird...
Ich weiß jetzt nicht ob das der richtige Begriff ist, aber sie soll sich halt automatisch an die länge vom Text anpassen
Das kann ich zwar auch mit Framesets machen, aber das is mir dann doch ein wenig zu schlicht, da kann man ja auch nur beschränkt ein design "coden"

@chmee:
Schonmal danke dafür, werde ich mal ausprobieren
das sieht schonmal vielversprechend aus =)

@ Maik:
Hab die tuts zwar jetzt noch nicht gelesen, aber mal grob überflogen
ma sehn, aber ich denk mal das könnte mir gut helfen =)

Der Begriff "Ebene" (= Layer) umschreibt umgangssprachlich das div-Element.
Zum Vergrößern anklicken....

wenn ich mich jetzt nicht total irre kann man bei DW ebenen oder Divs einfügen,
das div passt sich dann automatisch ans browerfenster an
und die ebene steht immer fest an ihrem platz

hmm nuja ok, also schonmal vielen vielen dank für eure antworten, ich werde dann berichten wie es geklappt hat
Aber eine frage hab ich noch
wenn ich dann alles gesliced und angepasst hab
wie kann ich dann sagen, dass wenn ich einen button drück in den divs (oder ebenen) ein neuer text steht?
oder geht das iwie anders?
 
Hallo Stan

wie kann ich dann sagen, dass wenn ich einen button drück in den divs (oder ebenen) ein neuer text steht?
oder geht das iwie anders?
Zum Vergrößern anklicken....

Und hier kommen wir zum komplizierteren Teil ;)
In HTML gibt es die Frames, diese sind dafür da, dass man beim klicken eines Links nur bestimmte Teile der Webseite lädt.
Um dies wie zum Beispiel hier auf Tutorials .de und vielen anderen Seiten zu machen brauchst du PHP oder eine andere Programmiersprache, die dir dies ermöglicht.

Deine Möglichkeiten mit HTML sind nun Frames oder in jede .html Datei die gesamte Seite hineinschreiben, wobei dies nicht zu empfehlen ist, weil wenn du etwas änderst am Kopf der Seite musst du diese in jeder Unterseite durchführen.


Links allgemein sind auch in Dreamweaver eingespeichert und können mit dem Kettensymbol in die Seite eingefügt werden.
 
uff...
also kann ich nicht wie z.b. bei einem IFrame sagen, das sich da ein neuer text öffnen soll?
Sozusagen einem div nen namen geben und wenn man nen Button drückt, erscheint ein neuer text in dem div?
So hab ich mir das zusammengereimt, aber scheint ja doch alles komplizierter zu sein...
 
Holla

Ohne dich jetzt verwirren zu wollen, aber es gäbe da auch noch eine Möglichkeit, die heutzutage sehr in ist und, bei der du nicht so viel wissen musst, da es dort fertige Frameworks und Anleitungen gibt.
Und zwar Ajax, das auf Javascript basiert. (Das heißt, der Nachteil ist, dass wenn jemand JS aus hat, dann kann er nicht durch deine Seite navigieren)
Aber soll nur mal so angemerkt sein.

Gruß Simon
 
Für das Knopf drücken -> Div erscheint wäre Javascript zuständig. Man muss es nicht gleich Ajax nennen :)

mfg chmee
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück