[DW 2004] Frame im Bild @ tutorials.de: Tutorials, Forum & Hilfe

jackassol · 16.10.06 14:13

Hallo ihr....

Habe mit photoshop ein bild fürs web exportiert!(also ein großes bild in mehrere kleinere Teile "geschnitten"!)

So weit so gut....Das bild besteht aus 10 kleinern Bilder...nun möchte ich aber ein Bildteil rausmachen und da ein frame einfügen...wie geht das?

Genau so wie es auf der seite ist

Arbeite mit dreamweaver 2004

Maik · 16.10.06 14:30

Ein Blick in den Quelltext der genannten Seite hätte Dir verraten, daß hierfür das iframe-Element verwendet wurde

jackassol · 16.10.06 14:31

ja das weiß ich....aber wie gehe ich weiter vor?

Maik · 16.10.06 14:36

Ich arbeite nicht mit Photoshop und Dreamweaver, aber wenn Du sagst, daß Du aus Photoshop eine Grafik für das Web exportiert hast, dann wurde doch ein entsprechender HTML-Code (Tabellenkonstruktion für das Grafik-Puzzle) generiert, oder nicht?

jackassol · 16.10.06 14:44

[quote=jackassol;1336973]ja und zwar sieht er so aus:::: habs aber nich hinbekommne...es hat sich immer alles verschoben...

PHP-Code:


<html>
<head>
<title>bildmitrand Kopie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    background-color: #201A04;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (bildmitrand Kopie) -->
<p>&nbsp;</p>
<table width="1007" height="574" border="0" align="center" cellpadding="0" cellspacing="0" id="Tabelle_01">
    <tr>
        <td colspan="5" rowspan="2">
            <img src="Bilder/extraweg-site_01.jpg" width="356" height="39" alt=""></td>
        <td colspan="2">
            <img src="Bilder/extraweg-site_02.jpg" width="269" height="31" alt=""></td>
        <td colspan="3" rowspan="3">
            <img src="Bilder/extraweg-site_03.jpg" width="180" height="148" alt=""></td>
        <td colspan="2" rowspan="3">
            <img src="Bilder/extraweg-site_04.jpg" width="201" height="148" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="31" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="4">
            <img src="Bilder/extraweg-site_05.jpg" width="269" height="200" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="8" alt=""></td>
    </tr>
    <tr>
        <td rowspan="4">
            <img src="Bilder/extraweg-site_06.jpg" width="45" height="243" alt=""></td>
        <td colspan="2" rowspan="2">
            <img src="Bilder/extraweg-site_07.jpg" width="257" height="161" alt=""></td>
        <td colspan="2" rowspan="4">
            <img src="Bilder/extraweg-site_08.jpg" width="54" height="243" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="109" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="3">
            <img src="Bilder/extraweg-site_09.jpg" width="141" height="134" alt=""></td>
        <td colspan="3" rowspan="3">
            <img src="Bilder/extraweg-site_10.jpg" width="240" height="134" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="52" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="Bilder/extraweg-site_11.jpg" width="257" height="82" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="31" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="Bilder/extraweg-site_12.jpg" width="269" height="51" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="51" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="Bilder/extraweg-site_13.jpg" width="176" height="291" alt=""></td>
        <td colspan="2">
            <img src="Bilder/extraweg-site_14.jpg" width="137" height="137" alt=""></td>
        <td colspan="2">
            <img src="Bilder/extraweg-site_15.jpg" width="174" height="137" alt=""></td>
        <td colspan="2">
            <img src="Bilder/extraweg-site_16.jpg" width="225" height="137" alt=""></td>
        <td colspan="3">
            <img src="Bilder/extraweg-site_17.jpg" width="158" height="137" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/extraweg-site_18.jpg" width="136" height="291" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="137" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="Bilder/extraweg-site_19.jpg" width="180" height="154" alt=""></td>
        <td>
            <img src="Bilder/extraweg-site_20.jpg" width="131" height="154" alt=""></td>
        <td colspan="2">
            <img src="Bilder/extraweg-site_21.jpg" width="225" height="154" alt=""></td>
        <td colspan="3">
            <img src="Bilder/extraweg-site_22.jpg" width="158" height="154" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="154" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/spacer.gif" width="45" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="131" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="126" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="11" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="43" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="131" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="138" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="87" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="54" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="39" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="65" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="136" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Bild ....05 soll den iframe enthalten..

Maik · 16.10.06 14:53

Ohne die Seite jetzt "live" gesehen zu haben, behaupte ich einfach mal, daß da einige Grafiken (darunter auch extraweg-site_05.jpg) als Hintergrundbild für die jeweilige Tabellenzelle eingesetzt gehören.

jackassol · 16.10.06 15:06

http://www.extraweg.de/test.rar

heir mal die datei...also bei extraweg-site_02.jpg soll der iframe sein....wäre cool wenn ihr das hinbekommt

Maik · 16.10.06 15:11

Sorry, aber mit RAR-Archiven kann ich hier leider nichts anfangen. Kannst Du vielleicht "Zippen", oder die Seite online stellen?

extraweg-site_02.jpg oder extraweg-site_05.jpg?

jackassol · 16.10.06 15:13

jo kein ding... hier

aso ja bild 05 meint ich natürlich..sorry

Maik · 16.10.06 15:44

Quellcode-Schnipsel der test.html:

Code :

1
2
3

<td colspan="2" rowspan="4">
       <iframe src="seite_im_iframe.html" width="269" height="200" frameborder="0"></iframe>
</td>

Quellcode der seite_im_iframe.html:

Code :

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
 
<style type="text/css">
<!--
body {
background: url(Bilder/test_05.jpg) no-repeat fixed;
color: #fff;
}
-->
</style>
 
</head>
<body>
 
<!-- Hier folgt der Inhalt -->
 
</body>
</html>

jackassol · 17.10.06 17:54

Super danke dir..wunderbar

Jetzt nur noch ein Problem das nich so richtig klappen will...wie bekomm ich den hinn, das wenn ich zb. das bild ...04 anklicke eine neue seite in diesen frame lädt? (Also bild..04 als button ->klick-> neuer inhalt in dem frame)

Maik · 17.10.06 17:58

Lies hierzu bitte mal den Abschnitt Verweise zu eingebetteten Frames.

jackassol · 17.10.06 18:31

Nein ich bekomm es nich hin....es verschiebt sich alles...
Also wenn man bild (...22) anklickt....soll in Bild (...10) der neue frame laden..

zb. hallo.htm

bekomms ni hin:

hier mein code:

PHP-Code:


<html>
<head>
<title>bild</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    background-color: #201A04;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (bild.psd) -->
<p>&nbsp;</p>
<table width="1007" height="574" border="0" align="center" cellpadding="0" cellspacing="0" id="Tabelle_01">
    <tr>
        <td rowspan="2">
            <img src="Bilder/index_01.jpg" width="3" height="31" alt=""></td>
        <td colspan="4" rowspan="2">
            <img src="Bilder/index_02.jpg" width="230" height="31" alt=""></td>
        <td colspan="6" rowspan="2">
            <img src="Bilder/index_03.jpg" width="314" height="31" alt=""></td>
        <td colspan="5" rowspan="2">
            <img src="Bilder/index_04.jpg" width="176" height="31" alt=""></td>
        <td colspan="3" rowspan="6">
            <img src="Bilder/index_05.jpg" width="100" height="207" alt=""></td>
        <td colspan="4">
            <img src="Bilder/index_06.jpg" width="183" height="26" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="26" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="3">
            <img src="Bilder/index_07.jpg" width="102" height="82" alt=""></td>
        <td colspan="2" rowspan="3">
            <img src="Bilder/index_08.jpg" width="81" height="82" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="5" alt=""></td>
    </tr>
    <tr>
        <td colspan="7">
            <img src="Bilder/index_09.jpg" width="356" height="20" alt=""></td>
        <td colspan="7" rowspan="8">
       <iframe src="seite_im_iframe.html" width="253" height="219" frameborder="0"></iframe>        
        <td colspan="2" rowspan="4">
            <img src="Bilder/index_11.jpg" width="114" height="176" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="20" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="8">
            <img src="Bilder/index_12.jpg" width="58" height="218" alt=""></td>
        <td colspan="4" rowspan="4">
            <img src="Bilder/index_13.jpg" width="245" height="171" alt=""></td>
        <td rowspan="6">
            <img src="Bilder/index_14.jpg" width="53" height="195" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="57" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="Bilder/index_15.jpg" width="102" height="98" alt=""></td>
        <td colspan="2" rowspan="4">
            <img src="Bilder/index_16.jpg" width="81" height="125" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="98" alt=""></td>
    </tr>
    <tr>
        <td rowspan="7">
            <img src="Bilder/index_17.jpg" width="84" height="76" alt=""></td>
        <td rowspan="3">
            <img src="Bilder/index_18.jpg" width="18" height="27" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="6">
            <img src="Bilder/index_19.jpg" width="127" height="75" alt=""></td>
        <td colspan="2" rowspan="6">
            <img src="Bilder/index_20.jpg" width="87" height="75" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="15" alt=""></td>
    </tr>
    <tr>
        <td colspan="4" rowspan="4">
            <img src="Bilder/index_21.jpg" width="245" height="47" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="11" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="5">
            <img src="Bilder/index_22.jpg" width="96" height="65" alt=""></td>
        <td rowspan="9">
            <img src="Bilder/index_23.jpg" width="3" height="183" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="13" alt=""></td>
    </tr>
    <tr>
        <td rowspan="8">
            <img src="Bilder/index_24.jpg" width="53" height="170" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="4" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="7">
            <img src="Bilder/index_25.jpg" width="100" height="166" alt=""></td>
        <td rowspan="7">
            <img src="Bilder/index_26.jpg" width="1" height="166" alt=""></td>
        <td colspan="2" rowspan="7">
            <img src="Bilder/index_27.jpg" width="104" height="166" alt=""></td>
        <td colspan="2" rowspan="5">
            <img src="Bilder/index_28.jpg" width="48" height="94" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="19" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="3">
            <img src="Bilder/index_29.jpg" width="112" height="62" alt=""></td>
        <td colspan="3" rowspan="6">
            <img src="Bilder/index_30.jpg" width="191" height="147" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="13" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="3">
            <img src="Bilder/index_31.jpg" width="127" height="62" alt=""></td>
        <td colspan="2" rowspan="4">
            <img src="Bilder/index_32.jpg" width="87" height="102" alt=""></td>
        <td rowspan="5">
            <img src="Bilder/index_33.jpg" width="84" height="134" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="16" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="4">
            <img src="Bilder/index_34.jpg" width="96" height="118" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="33" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="3">
            <img src="Bilder/index_35.jpg" width="112" height="85" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="13" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2">
            <img src="Bilder/index_36.jpg" width="91" height="72" alt=""></td>
        <td colspan="2" rowspan="2">
            <img src="Bilder/index_37.jpg" width="84" height="72" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="40" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="Bilder/index_38.jpg" width="87" height="32" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="32" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/index_39.jpg" width="189" height="157" alt=""></td>
        <td colspan="2">
            <img src="Bilder/index_40.jpg" width="114" height="157" alt=""></td>
        <td colspan="2">
            <img src="Bilder/index_41.jpg" width="132" height="157" alt=""></td>
        <td colspan="5">
            <img src="Bilder/index_42.jpg" width="139" height="157" alt=""></td>
        <td colspan="5">
            <img src="Bilder/index_43.jpg" width="179" height="157" alt=""></td>
        <td colspan="2">
            <img src="Bilder/index_44.jpg" width="154" height="157" alt=""></td>
        <td colspan="3">
            <img src="Bilder/index_45.jpg" width="99" height="157" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="157" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/spacer.gif" width="3" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="55" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="54" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="77" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="44" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="70" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="53" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="79" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="21" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="90" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="14" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="13" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="35" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="43" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="71" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="13" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="17" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="70" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="84" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="18" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="78" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="3" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Maik · 17.10.06 18:42

Hast Du es schon so probiert?

Code :

<td colspan="7" rowspan="8">
  <iframe src="seite_im_iframe.html" width="253" height="219" frameborder="0" [b]name="Daten"[/b]></iframe>
</td>      
 
<td colspan="2" rowspan="5"><a href="hallo.htm" target="Daten"><img src="Bilder/index_22.jpg" width="96" height="65" alt=""></a></td>

Ansonsten lade mal die "Original"-Seite hoch, damit man da einen Blick drauf werfen kann und sieht, was sich wo verschiebt.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

1 Bild pro Frame importieren

Bild in Frame, Abstände zum Rand

Ganz einfaches Bild im Frame

[MX 2004] Problem mit Bild in HTML-Textfeld

frame mittn im bild?

E-Mail:

Abonnieren Abbestellen