bilder einbinden oder galerie erstellen hilefeeee?!?

tome91 · 12.08.2010

servus

bin nun seit einiger zeit krank geschrieben, dann hab ich mich vor zwei tagen dazu kurz entschlossen mei adobe prog sortiment mal auszuporbieren.

habe mich also dran gmeacht, photoshop alles entworfen seite für seite, themen wahren erst mal egal, für den prototyp.

dann domain bestellt und rauf damit ins web hat eigentlich nicht schlecht geklappt alles wie ich finde!

nur hängts jetzt voll und ich finde nichts im web wie ich eine galerie oder bilder einfügen kann ohne dass mir dreamweaver alles verrutscht=(

wollte die galerie in den grossen bereich einfügen den ich geslacet habe.

ich komme ienfach nicht darauf was ich falsch mache, dazu kommt dass ich so gut wie keine ahnung habe vom programieren, ein wenig aber eben nicht viel

dann bin ich auf euch hier gestossen hoffe ihr könnt mir nun helfen über all anders wurde nicht geantwortet=(

ist die website ausserdem wollte ich noch die buttons in roll over verändern nur werden sie mir ganz rechts eingebaut und ich kann sie auch ned verschieben, und sie haben einen weissen rahmen rundherum obwohl sie auf transparrent gemacht wurden

hoffe ihr könnt mir helfen=/

Uploaded with
mfg tom

Vanimelda · 12.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

Hi,

such doch mal hier im Forum nach "Bildergalerie", da findest du ein paar Tutorials zu diversen Möglichkeiten so etwas zu realisieren.
Wie verrutscht Dreamweaver das alles? Mach ma n Screenshot davon.
Bei allgemeinen Fragen zu html etc ist http://de.selfhtml.org ne gute Anlaufstelle

Und eine große Bitte: Die deutsche Rechtschreibung ist zwar Freeware, aber nicht Open Source. (Oder: Achte ma auf deine Rechtschreibung. Da fängt mein Auge ja schon an zu zucken, wenn ich das lesen muss :nee: )

tome91 · 12.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

entschuldigung für die schreibweise......

die seite schau ich mir dann mal an, hab halt bis jetzt alles nur mit DW gemacht und verlinkt das wahr recht easy aber das mit bildern funzt nicht=D

ausserdem stört mich der weisse hintergrund der bilder die sollten eigentlich nur in dem rahmen liegen=(

mfg tom

Bitte Bildgröße beachten! Nehmt lieber die vergrößerbare Vorschau!

sunny_76m · 12.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

du musst die slices (Bilder) in den Div-Containern als Hintergrundbild einstellen, dann kannst du auch einen Inhalt IN die Div-Container (wie Z.b. deine Bilder) bringen. Das musst du im Dreamweaver dann bei der Seite für die jeweiligen DIVs einstellen.

Für eine Bildergalerie, schau dir doch mal die "lightbox" an - da gibts hier auch ein paar Tuts zum Einbinden und zur Verwendung.

tome91 · 12.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

ich schau mal ob ich das finde danke

ich habe lightbox bei dem beispiel verwendet

wie gesagt habe noch nie viel zu tun gehabt mit programmieren und so

mfg tom

tome91 · 12.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

bin zu blöd habe wohl zu wenig kentnisse ih bekomms ned gebacken,...

ich weiss nicht mal was ein div box is wie ich die mache,...omg=(

Oxfort · 12.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

tome91 schrieb:
bin zu blöd habe wohl zu wenig kentnisse ih bekomms ned gebacken,...

ich weiss nicht mal was ein div box is wie ich die mache,...omg=(

Guckst Du hier:

tome91 · 12.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

ich bekommsd nicht rein=(

sunny_76m · 13.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

wo genau liegt denn das Problem.... du solltest dir bei Dreamweaver mal die html-Ansicht ansehen... evtl. erst mal in der gesplitteten Version so dass wenn du einen Teil in wysiwyg markierst, dann dazu der code markiert ist... dann guggst du auf selfhtml wie es zuvor schon vorgeschlagen wurde...

Selbst mit den modernen Editoren, ganz drum herum kommen wirst du nicht, dich auch mit dem Hintergrundwissen auseinanderzusetzen bzw. wenigstens ein bisschen was davon zu erlernen.

Kleiner Tipp... schau mal in deinem Code (im Dreamweaver) nach Zeilen die wie folgt aufgebaut sind...

das "index-02" und "index-03" ist dabei der Name deiner geslicedten Bildteile (das sind die einzelnen DIV-Container) und 02 und 03 sind eben die durchnummerierten Bilder bzw. Seitenteile. Du findest das ziemlich am Anfang des html-Codes...

#index-02_ {
position:absolute;
left:0px;
top:129px;
width:185px;
height:12px;
}

#index-03_ {
position:absolute;
left:185px;
top:129px;
width:756px;
height:438px;
background-image:url(images/background_grey.png)

und was ich da bei index-03 mit background-image... geschrieben habe, das stellt eben das Bild "background_grey.png" (das im Ordner images liegt) im DIV-Container index-03 in den Hintergrund, so dass im INHALT dieses Containers z.B. ein Text oder wiederum ein Bild deiner Wahl stehen kann.

patrick_l · 13.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

Du bist ja nun Krank geschrieben und hast demnach Zeit dich anderen Dingen zu widmen.
Also lerne doch zumindest HTML und CSS. Warum? So kannst du auch im Background nachvollziehen was genau vor sich geht und einige Fehler selbst beheben. Ich lege dir auch die PSD-Tutorials in Punkten wie Layout-Design und Web-Programmierung ans Herz. Denn so wird sich keiner gerne deine Seite angucken wollen. Oder gehe gleich einen anderen Weg und nutze eines der vielen Content-Management-Systeme. Außerdem solltest du dir, wenn noch nicht vorhanden die Web-Developer-Toolbar und Firebug installieren. Beides kostenlose Add-ons für Mozilla Firefox. Außerdem W3C nicht vergessen und deine Seite validieren http://validator.w3.org/#validate-by-upload - Es gibt aber auch dafür ein Add-one: Html-Validator. Ich persönlich bevorzuge aber den Besuch auf W3C.

Lg DerOtto

Edit:

Was die Bildergalerie angeht:
Du hast ja unter anderem Adobe Photoshop, somit kannst du auch auf die Bridge zugreifen mit der es sehr einfach geht eigene Bildergalerien zu erstellen. Angefangen von einfachen html/css-Kontrukten bis hin zur netten Flash-Galerie. Außerdem kann ich noch die Slimbox empfehlen. Dieses Javascript wirst Du vielleicht schon einmal gesehen haben. Gefällt mir ehrlich gesagt noch am besten. Hier mal der Link dazu http://www.phpblogger.net/2007/11/29/slimbox-14-deutsch/ . An dieser stelle möchte ich nochmal kurz raten dich in die einzelnen Web/Programmiersprachen einzulesen. Danach fällt dir alles wesentlich leichter und wer weiß das schon. Vielleicht schaffst du es ja auch einmal einen schlanken und sauberen Code zu schreiben. Ich habe selber nach und nach immer größeren Gefallen daran gefunden und versuche nun möglichst viel selber zumachen.

Einen Tipp noch am Schluss:
Weil ich das gerade bei Sunny_76m im Beitrag lese was den Hintergrund angeht. Wenn dieser einfarbig ist gib diese Farbe als Hex-Wert ein.
Also statt "background-image" nur "background-color" angeben. Außerdem spielt dann die Position keine Rolle mehr und du kannst den Code kürzen.
Naja, jetzt aber Gute Nacht oder besser gesagt Morgen

tome91 · 13.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

hab euch mal den code hochgeladen, ich suche derweilen mal hab evtl ne idee....

also das wäre dann das koi_20.gif das als background sein soll wenn ich das richtig verstehe...

Code:

<html>
<head>
<title>koi</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (koi.psd) -->
<table id="Tabelle_01" width="1281" height="1025" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="12"><a href="koi.html"><img src="koi_01.gif" alt="" width="1280" height="192" border="0"></a></td>
        <td>
            <img src="Abstandhalter.gif" width="1" height="192" alt=""></td>
    </tr>
    <tr>
        <td rowspan="7">
            <img src="koi_02.gif" width="8" height="832" alt=""></td>
        <td colspan="3" rowspan="2"><a href="index.html"><img src="koi_03.gif" alt="" width="84" height="30" border="0"></a></td>
        <td rowspan="4">
            <img src="koi_04.gif" width="20" height="46" alt=""></td>
        <td rowspan="2">
            <img src="koi_05.gif" width="43" height="30" alt=""></td>
        <td colspan="6">
            <img src="koi_06.gif" width="1125" height="1" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td rowspan="3">
            <img src="koi_07.gif" width="11" height="45" alt=""></td>
        <td rowspan="2"><a href="skifahrn.html"><img src="koi_08.gif" alt="" width="99" height="30" border="0"></a></td>
        <td rowspan="3">
            <img src="koi_09.gif" width="15" height="45" alt=""></td>
        <td rowspan="2"><a href="kontakt.html"><img src="koi_10.gif" alt="" width="87" height="30" border="0"></a></td>
        <td colspan="2" rowspan="3">
            <img src="koi_11.gif" width="913" height="45" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="1" height="29" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2">
            <img src="koi_12.gif" width="84" height="16" alt=""></td>
        <td rowspan="2">
            <img src="koi_13.gif" width="43" height="16" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="koi_14.gif" width="99" height="15" alt=""></td>
        <td>
            <img src="koi_15.gif" width="87" height="15" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="1" height="15" alt=""></td>
    </tr>
    <tr>
        <td rowspan="3">
            <img src="koi_16.gif" width="15" height="786" alt=""></td>
        <td colspan="9">
            <img src="koi_17.gif" width="1231" height="48" alt=""></td>
        <td rowspan="3">
            <img src="koi_18.gif" width="26" height="786" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="1" height="48" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="koi_19.gif" width="1" height="738" alt=""></td>
        <td colspan="8">
            <img src="koi_20.gif" width="1230" height="608" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="1" height="608" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="koi_21.gif" width="1230" height="130" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="1" height="130" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Abstandhalter.gif" width="8" height="1" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="15" height="1" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="68" height="1" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="20" height="1" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="43" height="1" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="11" height="1" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="99" height="1" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="15" height="1" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="87" height="1" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="887" height="1" alt=""></td>
        <td>
            <img src="Abstandhalter.gif" width="26" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

servus endlich funzt es halbwegs mit dem html

hab sie nun neu aufgesetzt die seite

complet mit subethaedit geschrieben....

jetzt ein neues problem, jetzt ist überall, ausser ausserhalb der 880px wrapper, klickbar und man kommt zb wenn man sich auf der seite koi befindet wieder zur koi seite, ganz oben.

ich wollte ja eine bildergalerie einbinden und unterhalb des menüs nichts klickbar machen=D

mfg tom

Code:

<!DOCTYPE html>
 <html>
 
 <head>
   <meta http-equiv="Content-Type" content="text/html;
   charset=utf-8" />
   <title>Tome91 willkommen</title>
   <link href="screen1.css" type="text.css" rel="stylesheet"
   media="screen" />
 </head>
 
 <body>
   
    
   <div id="wrapper">
     
    
    <div id="header">
    
      <h1><img src="kopf.png" alt="tome" /></h1>
   
    </div>
    
    <div id="menue">
      <img class="menue.png" src="menue.png" alt="" />
    </div>
    
    
    <div id="navi">
    
      <ul>
        <li><a href="index.html"><img class="" src="home-button.png" alt=""/></li>
        <li><a href="koi.html"><img class="" src="koibutton.png" alt=""/></li>
        <li><a href="ski.html"><img class="" src="skibutton.png" alt=""/></li>
        <li><a href="kontakt.html"><img class="" src="kontaktbutton.png" alt=""/></li>
        <a href=""><img class="" src="" alt="" />
      </ul>
    
    </div>
    
    
    <div id="gallerie">
        <img class="" src="rahmen.png" alt="rahmen" />
    </div>
    
    
    
   
   
    <div id="abgrenzung">
      <h3><img class="abgrenzung.png" src="abgrenzung.png" /></h3>
    </div>
    
    <div id="gallerie">
        <img class="" src="rahmen.png" alt="rahmen" />
    </div>
    
   
   
  
    
    
    
   
      
     </div>
 
 </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
</html>

Code:

* {
margin: 0;
padding: 0;  
font-size: 100%
}
    
body {
background: url(hintergund.png)
}
        
#wrapper {
width: 880px;
margin: 0 auto;
}  

#header {
width: 880px;
float: left;
clear: both;
margin: 35px 0 0 0;
}

#navi {
width: 8px;
float: right;
clear: none;
margin: 0 0 0 0;
position: relative;
left: 195px
}

/*----------------------------------hauptnav */
#menue {
background: url(menue.png)
width: 880px;
float: none;
clear: both;
margin: 0 0 0 0;
position: relative;
top: -10px
}
#navi {
width: 880px;
float: none;
clear: right;
margin: 0 0 0 0


}
#navi a:link,
#navi a:visited{
color: #666f6f;
}
#navi li{
list-style: none;
float: left;
margin-right: 15px; 
position: relative;
top: -50px

}


#gallerie {
width:  880px;
float: none;
clear: both;
margin: 0 0 0 0;
position: relative;
top: -50px
}




#abgrenzung {
width: 880px;
float: none;
position: relative;
top: -60px
}

ArtiHl · 16.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

Auf den ersten klick sieht es so aus als ob deine a-tags nicht geschlossen sind

HTML:

<a href="index.html"><img class="" src="home-button.png" alt=""/>

.
ändere in:

HTML:

<a href="index.html"><img class="" src="home-button.png" alt=""/></a>

Und das bitte bei jedem a-tag.

tome91 · 16.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

danke arti ich probiers gleich mal =)

ich uppe die seite mal dann sieht man auch besser was ich meine

mfg tom

mein cyberduck oder filezilla verbinden nicht mehr? woran kann sowas liegen?
einzeln lad ich nichts rauf=D

danke artur es wahr das mit den atags=)

nur komm ich nicht mehr übern ftp client rein=(

Edit Button benutzen

ArtiHl · 16.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

Öhh, zum Ritter(artur) wurde ich noch nicht geschlagen

.

Bei deinem jetztigen Problem kann ich dir nicht helfen.

Hinweis: Benutz die Edit funktion, sonst gibts mecker von den Mods.

tome91 · 16.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

ArtiHl schrieb:
Öhh, zum Ritter(artur) wurde ich noch nicht geschlagen .

Bei deinem jetztigen Problem kann ich dir nicht helfen.

Hinweis: Benutz die Edit funktion, sonst gibts mecker von den Mods.

so hab sie oben, jetzt fällt mir auf dass bei der index seite nach rechts nicht zentriert ist oder der hintergund weiter geht ewig wo hab ich da den wurm drin=??

mfg tom

ArtiHl · 16.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

Mach aus:

HTML:

<link href="screen.css" type="text.css" rel="stylesheet" media="screen">

ein:

HTML:

<link href="screen.css" type="text/css" rel="stylesheet" media="screen">

Die beiden links unten(mail und koi) sollen die umrahmt sein?
Wenn nicht gehe in deine screen.css und füge hinzu:

HTML:

#mailbutton img{
border:none;
}
#koi img{
border:none;
}

Mein Nachredner sagt es schon, du musst dich ein wenig mit dem Ganzen ausseinander setzten.
Dein CSS ist grausam*G*.
Egal: Lese und lerne:http://de.selfhtml.org

patrick_l · 16.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

Ich rate dir aber noch einmal dich etwas mehr mit der Materie auseinander zusetzen.
Sprich was das Gestalten und Umsetzen von Webseiten angeht. Dazu gehören auch Punkte wie das arbeiten mit xHtml und Css. Wichtig ist immer die Usability einer Seite/Site (Benutzerfreundlichkeit, Bedienbarkeit und Nutzen). Du möchtest doch schließlich das ein Besucher auf deiner Seite sich wohlfühlt und keine Probleme hat deine Inhalte klar und deutlich zu verstehen.

1. Lerne in einzelnen Workshops ein Web taugliches Layout zu gestalten.
Angefangen bei der Wahl und Abstimmung der Farben, Positionen der Inhalte etc.
(Hier gibt es reichlich an Lesestoff in Form von Tutorials)

2. Lerne die wichtigsten Sprachen fürs Web - xHtml und Css.
Auch dafür gibt es genug Informationsquellen.

3. Stell dir selber die Frage/n:
Was und wen möchte ich damit ansprechen?
Was möchte ich anbieten und welchen Nutzen haben diese Inhalte?

Lg DerOtto

Außerdem solltest du nicht vergessen deine Seite später zu validieren. Damit lassen sich Fehler im Code aufspüren.
Ein schlanker und sauber Code sorgt dafür das deine Seite schnell und vernünftig geladen werden kann.
http://validator.w3.org/#validate-by-upload

tome91 · 16.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

servus,

bin doch beim lernen und ich finde ich mache mich nicht schlecht die erste selbst programierte^^

das mit dem / hat nichts gebracht leider=(

mfg tom

ArtiHl · 16.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

tome91 schrieb:
servus,

bin doch beim lernen und ich finde ich mache mich nicht schlecht die erste selbst programierte^^

das mit dem / hat nichts gebracht leider=(

mfg tom

Laut dem Quelltext den du hochgeladen hast ist da immer noch den punkt drin.Und der muss durch ein / ersetzt werden.

patrick_l · 16.08.2010

AW: bilder einbinden oder galerie erstellen hilefeeee?!?

Außerdem solltest du mal deinen Browser mit der Web-Developer-Toolbar ausstatten. Hilfreich wäre dann noch Firebug für den Firefox.
Damit lässt es sich wunderbar arbeiten und in meinen Augen ein muss beim erstellen einer Webseite/site.
Und wie schon mal gesagt: validiere deine Seite auf http://validator.w3.org/#validate-by-upload - hilft dir auch weiter.
Aber dein Code besonders das Cascading Style Sheet(css) ist nicht gerade super.

Hier mal ein par nützliche Links: