Gegen Bilderklau - Das Original | Druckvorschau: Design einbauen | Dreamweaver

Geschrieben von Elincia am 06.10.2006 um 23:54:

smile

Design einbauen | Dreamweaver

Design einbauen im Dreamweaver

Eigentlich ist es ganz einfach. Dennoch wurde danach gefragt und deshalb habe ich nun ein kleines Tutorial dazu geschrieben. Hier erkläre ich lediglich, wie ihr es einbauen müsst, nicht, wie es gecodet wird!

Bevor wir beginnen, brauchst du schonmal den Code deines Designs. Entweder du lässt es dir von jemandem coden, oder du machst es selbst. Dafür ist das folgende Tutorial sehr gut. Mit diesem code ich immer alle Designs:
[Tutorial] ein Design in Paint coden - UP!

Ihr habt euren Code?
Okay, dann fangen wir an.

Wichtig, bevor ihr anfangt:
Das Design muss im selben Ordner sein, wie alle anderen Seiten!

Zuerst müsst ihr natürlich den Dreamweaver öffnen. Wer sich etwas damit auskennt, weiß, dass rechts eure Seiten bzw. alle Dateien eures Stammordners angezeigt werden.
In der Mitte könnt ihr dann neue Seiten erstellen. (Geht auch über Datei -> Neu usw.)

Jetzt müsst ihr eine neue, leere Html-Seite erstellen.
(Dazu entweder in der Mitte auf "Html" klicken, oder über "Datei" -> "Neu" ...)

So müsste das dann aussehen:

Klickt links oben auf "Code" um in die Code-Ansicht zu wechseln. Hier löscht ihr erstmal die 'Vorlage' raus. (Eigentlich kann man es lassen, ist aber dann übersichtlicher).

Setzt euren Code für das Design in der Code-Ansicht ein.

Ich hab für dieses Beispiel ein sehr einfaches Design gemacht.

Wie ihr den Code dann bearbeitet, damit es auf das Design passt, könnt ihr in dem oben angegebenen Tutorial nachlesen. Das erkläre ich hier jetzt nicht zusätzlich.

Wenn ihr also diesen Code eingesetzt habt, müsst ihr auf jedenfall schonmal darauf achten, dass der Name des Hintergrundbildes (also des Designs) und eben die Werte stimmen.

Speichert diese Html-Seite nun im selben Ordner ab, in dem auch dann alle anderen Seiten reinkommen und in dem das Design als Datei gespeichert ist. Ich gebe ihr den Namen "index.html"
(Datei -> speichern -> index.html eingeben -> speichern)

Damit sich das Design nicht wiederholt, könnt ihr es auch fixiern. Dazu gibt es auch ein Tutorial. Lasst ihr es so, wird es sich höchstwahrscheinlich wiederholen. Das ist aber nur der Fall, wenn ihr es als direktes Hintergrundbild einbindet. Fügt ihr das Design 'nur' als normales Bild ein, wiederholt es sich nicht. (allerdings können sich hierbei dann die Frames verschieben und man muss an den Werten etwas herumspielen, bis es passt!)

<body background="Bildname"> = als Hintergrundbild
<img src="Bildname"> = als 'einzelnes' Bild

Nun müsst ihr noch 2 weitere Html-Seiten erstellen.
Zum ersten natürlich für die Main-Seite und dann für das Menü. Auch für alle anderen Seiten werden dann einzelne Html-Seiten erstellt.

Main = Hauptseite = main.html
Menü = Menü = menue.html

Info:
Ich habe bei diesem Beispiel das Design als einzelnes Bild eingefügt. Dadurch verschieben sich jedoch teilweise die Frames und man muss an den Werten etwas abändern, damit es passt.

Code meiner Seite mit eingebautem Design:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body {
	background-color: #F0E0B9;
}
-->
</style></head> 
<body>
<img src="Beispieldesign.jpg">

<div id="Layer1" style="position: absolute;  left: 24px; top: 69px;">
  <iframe src="menue.html" name="menu" width="167" height="399" frameborder=0 scrolling="yes" noresize style="border: 0px" style="FILTER: chroma (color=#ffffff)" ;>
  </iframe>
</div>

<div id="Layer2" style="position: absolute;  left: 229px; top: 220px;">
  <iframe src="main.html" name="main" width="455" height="301" frameborder=0 scrolling="auto" noresize style="border: 0px" style="FILTER: chroma (color=#ffffff)" ;>
  </iframe>
<!-- Ad by funpic.de --><noscript><div style="display:none">&nbsp;</div></noscript><script type="text/javascript" src="http://media.funpic.de/layer.php?bid=62145560"></script><!-- End Ad by funpic.de --></body>
</html>

---> Natürlich sieht euer Code dann wahrscheinlich anders aus.

Könnt mich gerne Dinge fragen, aber ich weiß nicht, ob ich alles beantworten kann.

Vielleicht hat dieses Tutorial manchen etwas gebracht. Ich kann nicht wirklich gut erklären, ich weiß großes Grinsen

Lg .Anka.

Geschrieben von banni am 31.12.2007 um 17:14:

Und wie codet man main und menue? Genau da steht bei mir das Fragezeichen....

Geschrieben von Elincia am 02.01.2008 um 12:36:

Hi,
ich versteh deine Frage nicht genau?!
Wenn du meinst wie man das Layout codet, da gibts andere Tuts zu..

Geschrieben von banni am 02.01.2008 um 13:38:

Meine Frage hat sich erübrigt. Nach langem herumgeplänkel mit dreamweaver und verschiedenen seiten mit verschiedenen methoden habe ich es irgendwie geschafft, durchzublicken.

Ich habe nämlich nie was gefunden, wie man das Main und menue codet. ich dachte, da müsste ich extra documents machen, dann erst wurde mir erklärt, dass ich da nur die index seite mit dem desi brauche.

Hat sich also geklärt. smile