Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Bild für Website slicen“

S

supido

Guest

Hallo ich habe mir mühsam einen Rahmen für eine Webseite erstellt.
Anschließend habe ich ihn mit dem Slicen-Werkzeug bearbeitet und fürs Web exportiert.
Wenn ich jetzt die Index.html im Editor aufrufe und Text einfüge zerreist es das ganze Image.Wie kann ich nachträglich denn Text einfügen.
Vielen Dank René
 

Herr_D

offline

AW: Bild für Website slicen

Das geht leider gar nicht...



Wenn du dir mal die Mühe machen würdest, im Tutbereich nach Tuts wahlweise über die Suche nach Webdesign zu suchen, könntest du vielleich was finden... vielleicht...



Ich verschieb das erst mal in den richtigen Bereich... den Webseiten haben nichts mit Photoshop zu tun...




Ach so noch ein kleiner Tipp: Hintergrundbilder...



..ach ich bin gar nicht so: Photoshop öffnen F1 drücken und dein Problem ist gelöst...



...und aller guten Dinge sind 3:
 
S

supido

Guest

AW: Bild für Website slicen

Hallo Herr_D,
danke für die freundliche Begrüßung.

Ich habe mir die Mühe schon gemacht, im Tutorial Bereich zu suchen, komme aber wegen fehlender Punkte nicht weiter.
Aus den 2 Tutorials, die ich gefunden habe, habe ich nicht genau entnehmen können, wie die Vorgehensweise bei meinem Problem ist, da ich blutiger Anfänger bin.

Danke für den Link ganz unten.

Gruß René
 

stb_87

Web-Sheriff - ohne Bild

AW: Bild für Website slicen

Zeig doch mal den Quelltext!

Dann kann man auch praktikable Tipps geben oder Ansätze liefern.
 
S

supido

Guest

AW: Bild für Website slicen

Hallo stb_87,

hier kommt der INhalt der geslicten Website:
HTML:
<HTML>
<HEAD>
<TITLE>Rahmen 1</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<!-- ImageReady Slices (Rahmen 1.psd) -->
<TABLE WIDTH=900 BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD>
            <IMG SRC="images/Abstandhalter.gif" WIDTH=51 HEIGHT=1></TD>
        <TD>
            <IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=1></TD>
        <TD>
            <IMG SRC="images/Abstandhalter.gif" WIDTH=7 HEIGHT=1></TD>
        <TD>
            <IMG SRC="images/Abstandhalter.gif" WIDTH=787 HEIGHT=1></TD>
        <TD>
            <IMG SRC="images/Abstandhalter.gif" WIDTH=8 HEIGHT=1></TD>
        <TD>
            <IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=1></TD>
        <TD>
            <IMG SRC="images/Abstandhalter.gif" WIDTH=45 HEIGHT=1></TD>
    </TR>
    <TR>
        <TD COLSPAN=7>
            <IMG SRC="images/Rahmen-1_01.gif" WIDTH=900 HEIGHT=1></TD>
    </TR>
    <TR>
        <TD ROWSPAN=4>
            <IMG SRC="images/Rahmen-1_02.gif" WIDTH=51 HEIGHT=999></TD>
        <TD COLSPAN=4>
            <IMG SRC="images/Rahmen-1_03.gif" WIDTH=803 HEIGHT=39></TD>
        <TD COLSPAN=2>
            <IMG SRC="images/Rahmen-1_04.gif" WIDTH=46 HEIGHT=39></TD>
    </TR>
    <TR>
        <TD>
            <IMG SRC="images/Rahmen-1_05.gif" WIDTH=1 HEIGHT=279></TD>
        <TD>
            <IMG SRC="images/Rahmen-1_06.gif" WIDTH=7 HEIGHT=279></TD>
        <TD>
            <IMG SRC="images/Rahmen-1_07.gif" WIDTH=787 HEIGHT=279></TD>
        <TD COLSPAN=2>
            <IMG SRC="images/Rahmen-1_08.gif" WIDTH=9 HEIGHT=279></TD>
        <TD ROWSPAN=3>
            <IMG SRC="images/Rahmen-1_09.gif" WIDTH=45 HEIGHT=960></TD>
    </TR>
    <TR>
        <TD COLSPAN=4>
            <IMG SRC="images/Rahmen-1_10.gif" WIDTH=803 HEIGHT=29></TD>
        <TD ROWSPAN=2>
            <IMG SRC="images/Rahmen-1_11.gif" WIDTH=1 HEIGHT=681></TD>
    </TR>
    <TR>
        <TD COLSPAN=4>
            <IMG SRC="images/Rahmen-1_12.gif" WIDTH=803 HEIGHT=652></TD>
    </TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
Rahmne -1-10 müsste der untere Rahmen sein. darüber muss ja der Content.

Danke René

Hier ist das von dem Rahmen zu sehen.
 

rotzbua

Aktives Mitglied

AW: Bild für Website slicen

argh, deshalb sollte man slicen lassen ;)

grauenhafter code der da erzeugt wurde, aber ok...

kurze frage: soll der rahmen auch in der breite varieren oder nur in der höhe?
 
S

supido

Guest

AW: Bild für Website slicen

Hallo Entschuldigung für die späte Antwort.

Ich habe mich etwas einlesen können und habe eine Layout erstellt.
Leider ist es nun so, daß im Internetexplorer alles komplett anders dargestellt wird als im Firefox oder Opera.
Ich habe für den IE auch eine Css-Datei angelegt, weiss aber nciht inwiefern sich welche Elemente unterscheiden müssen.
Wie gesagt, ich bin blutiger Anfänger, sitze nun schon 2 Tage darüber und für jeden Tip dankbar.
Ich habe mal von beiden Ansichten ein Bild angehangen.

Vielen Dank
René

Das ist die index.htm
HTML:
<!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>
<title>...Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css"/>
<!--[if lte IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="ram">
<div id="header">
<div id="hg"></div>
</div>
<div id="content">  <body text="#000000" bgcolor="#ffffff"><table><tr><td>&nbsp; <p class="garant"><strong>Willkommen bei ...</strong><br></p><p class="Zitat">"Pflege in allen Deinen Taten das Ziel der Perfektion. Entscheide Dich für die wirkliche Qualität und entwickle diese noch weiter. Wenn Du erkennst, dass die Lösung, die Du optimal findest, nicht existiert, dann entwickle sie selbst."<br></p></td><td>&nbsp;<img src="http://www.psd-tutorials.de/modules/Forum/images/Home.jpg" alt="Image" title="Image" border="0" width="320" height="240" hspace="6"></td></tr></table></body>
</div>    
<div id="menu">
<ul>
<li><a href="link" title="Link Titel">Home</a></li>
<li><a href="link" title="Link Titel">Kontakt</a></li>
<li><a href="link" title="Link Titel">Unternehmen</a></li>
<li><a href="link" title="Link Titel">Hightech</a></li>
<li><a href="link" title="Link Titel">Links</a></li>
<li><a href="link" title="Link Titel">Impressum</a></li>
</ul>
</div>

<div id="footer">Copyright by ...c( 2008)</div>
</div>
</body>
</html>
Das ist die Css-Datei

Code:
body{
background: #FFFFFF url('images/bg.jpg') repeat-x; /* Hintergrundbild das senkrecht wiederholt wird */
color: #000000; /* Schriftfarbe */
font: 0.9em 'Trebuchet MS', Geneva, Arial, Helvetica, sans-serif; /* Schriftgroesse und Schriftart */
margin: 0px; /* Aussenabstand */
}
p, pre{
padding: 5px 10px; /* Innenabstand */
margin: 0px; /* Aussenanbstand */
color: #000000; /* Schriftfarbe */
} 
#ram {
background: url('images/mitte.jpg') repeat-y; /* Hintergrundbild das senkrecht wiederholt wird */
width: 950px; /* Bereit des Div-Elements */
margin: 0px 5        0px ; /* Aussenabstand - durch auto = mittige Ausrichtung */
}

#header {
background: url('images/header.jpg') repeat-y; /* Hintergrundbild das senkrecht wiederholt wird */
width: 950px; /* Breite des Div-Elements */
height: 166px; /* Hoehe des Div-Elements */
}
#hg {
background: url('images/hg.jpg')no-repeat;
position: relative;
left:51px; top:25px; width:884px; height:138px;
z-index:1;
}
#menu{
width: 150px; /* Bereit des Div-Elements */
margin: 10px 0px 0px 55px; /* Aussenabstand */
padding: 0px 0px 0px 0px; /* Innenabstand */
}

* html #menu{ /* Angabe nur fuer den IE */
margin: 0px 0px 0px 555px; /* Aussenabstand */
}

#menu ul{
list-style: square inside; /* Liststyle => Quadrat */
margin: 0px auto; /* Aussenabstand */
padding: 0px; /* Innenabstand */
}
#content {
width: 650px; /* Bereit des Div-Elements */
padding: 10px 15px 15px 35px; /* Innenabstand */
float: right; /* Elemente umfließen lassen */
}
#footer {
background: #ffffff url('images/footer.jpg') top no-repeat; /* Hintergrundbild das nicht wiederholt wird */
clear: right; /* hebt float: rigth; wieder auf*/
width: 950px; /* Bereit des Div-Elements */
height: 15px; /* Hoehe des Div-Elements */
margin: 0px auto; /* Aussenabstand */
padding: 25px 0px 0px; /* Innenabstand */
line-height: 36px; /* Zeilenhoehe*/
text-align: center; /* Textausrichtung */
color: #000000; /* Textfarbe */
}
A { /* generelle Formatierung eines Links */
color: #000000; /* Textfarbe */
text-decoration: none; /* Definiert das der Link nicht unterstrichen ist */
}

A:visited { /* Besuchter Link */
color: #000000; /* Textfarbe */
text-decoration: underline; /* Definiert dass der Link unterstrichen ist */
}

A:hover, A:active { /* Aktiver Link & wenn man mit der Maus drueber faehrt */
color: #000000; /* Textfarbe */
text-decoration: underline; /* Definiert dass der Link unterstrichen ist */
}
h1{
color: #A2B710; /* Textfarbe */
text-align: left; /* Textausrichtung */
padding: 0 5px 5px 5px; /* Innenabstand */
font: normal 1.6em verdana, tahoma, sans-serif; /* Schriftgroesse und Schriftart */
}


h2{
color: #65666B; /* Textfarbe */
text-align: left; /* Textausrichtung */
padding: 0 5px 0px 5px; /* Innenabstand */
font-size: 1.4em; /* Schriftgroesse */
}
 
S

supido

Guest

AW: Bild für Website slicen

Hallo Entschuldigung für die späte Antwort.

Ich habe mich etwas einlesen können und habe eine Layout erstellt.
Leider ist es nun so, daß im Internetexplorer alles komplett anders dargestellt wird als im Firefox oder Opera.
Ich habe für den IE auch eine Css-Datei angelegt, weiss aber nciht inwiefern sich welche Elemente unterscheiden müssen.
Wie gesagt, ich bin blutiger Anfänger, sitze nun schon 2 Tage darüber und für jeden Tip dankbar.
Ich habe mal voon beiden Ansichten ein Bild angehangen.

Vielen Dank
René

Das ist die index.htm
HTML:
<!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>
<title>...Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css"/>
<!--[if lte IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="ram">
<div id="header">
<div id="hg"></div>
</div>
<div id="content">  <body text="#000000" bgcolor="#ffffff"><table><tr><td>&nbsp; <p class="garant"><strong>Willkommen bei ...</strong><br></p><p class="Zitat">"Pflege in allen Deinen Taten das Ziel der Perfektion. Entscheide Dich für die wirkliche Qualität und entwickle diese noch weiter. Wenn Du erkennst, dass die Lösung, die Du optimal findest, nicht existiert, dann entwickle sie selbst."<br></p></td><td>&nbsp;<img src="http://www.psd-tutorials.de/modules/Forum/images/Home.jpg" alt="Image" title="Image" border="0" width="320" height="240" hspace="6"></td></tr></table></body>
</div>    
<div id="menu">
<ul>
<li><a href="link" title="Link Titel">Home</a></li>
<li><a href="link" title="Link Titel">Kontakt</a></li>
<li><a href="link" title="Link Titel">Unternehmen</a></li>
<li><a href="link" title="Link Titel">Hightech</a></li>
<li><a href="link" title="Link Titel">Links</a></li>
<li><a href="link" title="Link Titel">Impressum</a></li>
</ul>
</div>

<div id="footer">Copyright by ...c( 2008)</div>
</div>
</body>
</html>
Das ist die Css-Datei

Code:
body{
background: #FFFFFF url('images/bg.jpg') repeat-x; /* Hintergrundbild das senkrecht wiederholt wird */
color: #000000; /* Schriftfarbe */
font: 0.9em 'Trebuchet MS', Geneva, Arial, Helvetica, sans-serif; /* Schriftgroesse und Schriftart */
margin: 0px; /* Aussenabstand */
}
p, pre{
padding: 5px 10px; /* Innenabstand */
margin: 0px; /* Aussenanbstand */
color: #000000; /* Schriftfarbe */
} 
#ram {
background: url('images/mitte.jpg') repeat-y; /* Hintergrundbild das senkrecht wiederholt wird */
width: 950px; /* Bereit des Div-Elements */
margin: 0px 5        0px ; /* Aussenabstand - durch auto = mittige Ausrichtung */
}

#header {
background: url('images/header.jpg') repeat-y; /* Hintergrundbild das senkrecht wiederholt wird */
width: 950px; /* Breite des Div-Elements */
height: 166px; /* Hoehe des Div-Elements */
}
#hg {
background: url('images/hg.jpg')no-repeat;
position: relative;
left:51px; top:25px; width:884px; height:138px;
z-index:1;
}
#menu{
width: 150px; /* Bereit des Div-Elements */
margin: 10px 0px 0px 55px; /* Aussenabstand */
padding: 0px 0px 0px 0px; /* Innenabstand */
}

* html #menu{ /* Angabe nur fuer den IE */
margin: 0px 0px 0px 555px; /* Aussenabstand */
}

#menu ul{
list-style: square inside; /* Liststyle => Quadrat */
margin: 0px auto; /* Aussenabstand */
padding: 0px; /* Innenabstand */
}
#content {
width: 650px; /* Bereit des Div-Elements */
padding: 10px 15px 15px 35px; /* Innenabstand */
float: right; /* Elemente umfließen lassen */
}
#footer {
background: #ffffff url('images/footer.jpg') top no-repeat; /* Hintergrundbild das nicht wiederholt wird */
clear: right; /* hebt float: rigth; wieder auf*/
width: 950px; /* Bereit des Div-Elements */
height: 15px; /* Hoehe des Div-Elements */
margin: 0px auto; /* Aussenabstand */
padding: 25px 0px 0px; /* Innenabstand */
line-height: 36px; /* Zeilenhoehe*/
text-align: center; /* Textausrichtung */
color: #000000; /* Textfarbe */
}
A { /* generelle Formatierung eines Links */
color: #000000; /* Textfarbe */
text-decoration: none; /* Definiert das der Link nicht unterstrichen ist */
}

A:visited { /* Besuchter Link */
color: #000000; /* Textfarbe */
text-decoration: underline; /* Definiert dass der Link unterstrichen ist */
}

A:hover, A:active { /* Aktiver Link & wenn man mit der Maus drueber faehrt */
color: #000000; /* Textfarbe */
text-decoration: underline; /* Definiert dass der Link unterstrichen ist */
}
h1{
color: #A2B710; /* Textfarbe */
text-align: left; /* Textausrichtung */
padding: 0 5px 5px 5px; /* Innenabstand */
font: normal 1.6em verdana, tahoma, sans-serif; /* Schriftgroesse und Schriftart */
}


h2{
color: #65666B; /* Textfarbe */
text-align: left; /* Textausrichtung */
padding: 0 5px 0px 5px; /* Innenabstand */
font-size: 1.4em; /* Schriftgroesse */
}



 
Zuletzt bearbeitet:
S

supido

Guest

AW: Bild für Website slicen

Hallo stb_87,

danke für die Erklärung und den Link, jetzt schau ich mal, ob ich da durchsteige.

Schönen Abend

René
 

sokie

Mod | Web

AW: Bild für Website slicen

Hallo Entschuldigung für die späte Antwort.

Ich habe mich etwas einlesen können und habe eine Layout erstellt.
...

Das ist die index.htm
HTML:
...
 </head>
 <body>
...
  <div id="content">  <body text="#000000" bgcolor="#ffffff"><table>
 ...



böse Dinge sind da passiert:
Da fängt ein zweiter body an. das könnte echt Probleme machen. Ein Body pro Seite muss reichen :)
die dann folgende Tabelle die ist eher unnötig.
 
S

supido

Guest

AW: Bild für Website slicen

Hallo Sokie, danke für den Hinweis.
Ich habs jetzt so für Joomla aufbereitet.
Jetz muss ich mich nur noch um die CSS-Geschichte kümmern.
Gruss René
HTML:
<!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>
<title>...Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?>
<!--[if lte IE 6]>
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<!--<div id="path"<?php mosPathWay();?></div> -->
<div id="ram">
<div id="header">
<div id="hg">
</div></div>
<div id="content">
<?php mosMainBody();?></div>    
<div id="menu">
<?php mosLoadModules('user1',-1);?><br/>
<?php mosLoadModules ( 'left',-1 ); ?>
</div>
<div id="footer">Copyright by ...c( 2008)</div>
</div>
</body>
</html>
 
S

supido

Guest

AW: Bild für Website slicen

Hallo, so langsam bin ich am verzweifeln.
Ich kapier nun gar nichts mehr und schmeiss gleich alles hin.
Kann ich jemandem meine PSD-Datei schicken, damit er mir CSS für IE und FF darum macht, damit ich sehe, was ich verkehrt mache?

Das wäre natürlich super.

Vielen Dank René
 

stb_87

Web-Sheriff - ohne Bild

AW: Bild für Website slicen

Befasse dich vernünftig mit der Materie und arbeite dich Schritt für Schritt durch und backe erstmal kleine Brötchen. Mit der Zeit lernst du das dann alles zu verstehen.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben