Problem mit dem Erstellen eines Templets

PeterPilz · 16.09.2011

hey, habe dreamweaver und wollte nun mit hilfe eines tutorials eine eigene hp erstellen, jedoch komme ich beim thema templates nicht weiter obwohl ich alles haargenau so wie im video gemacht habe.

das problem ist folgendes:
wenn ich ein template erstelle und dieses auf eine neue html-seite anwenden möchte gehen alle bilder und icons verloren. der rest der homepage bleibt bestehen.

um dies zu verdeutlichen habe ich auch ein video aufgenommen, vllt. könnt ihr mir ja helfen.

http://www.youtube.com/watch?v=5Jb8YBbtRfQ

jackykfm · 16.09.2011

AW: Problem mit dem Erstellen eines Templets

Wahrscheinlich stimmt der Link zu dem Verzeichnis, in dem Bilder und Icons sind, nicht.
Wäre besser, den html-Text zu sehen (und CSS).

msblacky · 16.09.2011

AW: Problem mit dem Erstellen eines Templets

Hallo,

sieht echt so aus als ob er die Links zu den Bildern nicht findet und genauso als ob der bearbeitende Bereich nicht funktionieren würde, weil der Cursor einen durchgestrichenen Kreis zeigt wenn Du über den vorher benannten Bereich fährst. Probier doch mal Datei neu - aus Vorlage ob dann das Problem immer noch besteht.

msblacky

behemoth65 · 16.09.2011

AW: Problem mit dem Erstellen eines Templets

Wäre es möglich, dass Du die Vorlage nach dem Erstellen weiter bearbeitet hast ?

RemaN89 · 16.09.2011

AW: Problem mit dem Erstellen eines Templets

Klicke mal auf die Live-Ansicht oben im Reiter

müsste eigentlich dein Problem lösen.

LG
RemaN

ChristianPodlewski · 16.09.2011

AW: Problem mit dem Erstellen eines Templets

Was passiert, wenn Du unter "Datei->Neu->Seite aus Vorlage" gehst und dort das Dokument direkt aus Deiner Vorlage erstellst (statt das Design nachträglich anzuwenden)?

PeterPilz · 16.09.2011

AW: Problem mit dem Erstellen eines Templets

@christian, dann passiert leider genau das selbe wie im video

@reman, in der live-ansicht tauchen die bilder und icons leider auch nicht auf,
sondern nur fragezeichen anstatt der bilder

Das ist die HTML-Datei aus welcher ich dann das Templet erstelle

HTML:

<!DOCTYPE HTML>
<html>

<head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/timothy.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Type" content="cache" />
    <meta name="robots" content="INDEX,FOLLOW" />
    <meta name="keywords" content="Enter Keywords" />
    <meta name="description" content="Description Here" />
    
    <title>Web Site By Timothy Web Design - www.timothywebdesign.com</title>
       
    
    <!-- Google Analytics Code Goes Below Here -->
        
    
    <!-- End Google Analytics Code -->
<style type="text/css" media="screen">
@import url("style.css");
</style>
</head>

<body>

<div id="outer">

<div id="wrapper">
    
        <div id="logo">
            <img src="Images/shears-logo.jpg";>
        </div>
        
  <div id="social-media-icons">
            <ul>
                <li><a href="http://facebook.com/"><img src="Images/icons/facebook_32.png";></a></li>
                <li><a href="#"><img src="Images/icons/rss_32.png";></a></li>
                <li><a href="http://twitter.com/"><img src="Images/icons/twitter_32.png";></a></li>
                <li><a href="http://youtube.com/"><img src="Images/icons/youtube_32.png";></a></li>  
            </ul>
        </div>
        
        <div id="topnav">
               <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="products.html">PRODUCTS</a></li>
                <li><a href="services.html">SERVICES</a></li>
                <li><a href="services.html">CONTACT</a></li>
            </ul>    
        </div>
        
        <div id="banner">
                <img src="Images/banner/b1.jpg";>
        </div>
    
        <div id="content">
                <h1>Welcome To Sheares Desing Website </h1>
                <p>orem pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>        
                <img src="Images/small5-bw.jpg";>
                <img src="Images/small6-bw.jpg";>
          <p>orem pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
        </div>   
  <div id="rightside">
              <h2>LATEST NEWS</h2>
            <p class="date"> 01.01.2011</p>
            <h3>Sample Headline</h3>
            <p>Tesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            <p class="date"> 01.01.2011</p>
            <h3>Sample Headline</h3>
            <p>Tesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            <p class="date"> 01.01.2011</p>
            <h3>Sample Headline</h3>
            <p>Tesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
    
        <div id="footer">
            <p class="footer-text">Copyright by Timo Design Studios</p>
        </div>
        
</div>
</div>

</body>
</html>

<!-- Timothy Framework - www.timothyframework.com -->

<!-- This work is licensed under the MIT License - http://www.opensource.org/licenses/mit-license.php -->

Das ist die CSS-Datei

Code:

* Timothy Framework - [URL="http://www.timothyframework.com/"]www.timothyframework.com[/URL] */
/* This work is licensed under the MIT License -  */


/* Color Legend */


/* Reset */

html, body { margin: 0; padding: 0; border: 0;  
                background: transparent; font-size:10px; }

div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, 
table, tr, th, td, tbody, tfoot, thead {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: transparent;
    }

img     { margin:0; padding:0; border:0; }

table, tr, th, td, tbody, tfoot, thead {
    margin: 0; padding: 0; border: 0;
    vertical-align: baseline;
    background: transparent;
    }
    
table { border-collapse: collapse; border-spacing: 0; }
    
input, select, textarea, form, fieldset {
    margin: 0; padding: 0; border: 0;
    }

article, aside, dialog, figure, footer, header, hgroup, nav, section { 
    display:block; }

h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike { 
    font-family: Arial, Helvetica, sans-serif;
    font-size:100%;
    font-weight: normal;
    font-style: normal;
    line-height: 100%; 
    text-indent: 0;
    text-decoration: none;
    text-align: left;
    color: #000;
    }

ol, ul { list-style: none; }


/* Global */

html     {    }
body    { background-color:#FEE59F    }



/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: bold;  }

h1 { font-size:24px; color:#ED9A00; padding-bottom:15px; border-bottom:1px #ccc solid; margin-bottom:15px;}
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }



/* Text Elements */

p               { color:#000; font-size:12px; line-height:150%; margin:15px 0; }
p .left            { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right         { margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a               {   }
a:link            { color: #00f;  }
a:visited        { color: #0f0;  }
a:active        { color: #000;  }
a:focus            { color: #666;  }
a:hover         { color: #f00;  }

blockquote      { color:#000; font-size:12px; }

strong          { font-weight: bold; }
em                  { font-style: italic; }

/* Images */



/* Lists */

ul              {  }
ol              { list-style-type:decimal; }

ul li            { color:#000; font-size:12px; }
ol li             { color:#000; font-size:12px; }

dl              {      }
dt               {      }
dd              {     }



/* Tables */

table           { width:100%; }

tr                {    }
.odd            { background-color:#eee; }
.even            { background-color:#fff; }

th              { font-weight: bold; }
thead, th        { background: #ccc; }

tbody            {   }

th,td,caption     {     }
caption         {     }

tfoot           {    }
.tfooter        { background-color:#ccc; text-align:center; font-style:italic; }

caption         { background: #efefef; }



/* Miscellaneous */

sup, sub        { line-height: 0; }

abbr, acronym   { border-bottom: 1px dotted #666; }
address         {      }
del             { background:#FFCECE; color:#f00; }

code, pre        { background-color:#FF9; padding:2px 0px; margin:4px 25px;
                    font-family:"Courier New", Courier, monospace; font-size:12px; font-weight:normal; line-height:150%;    }


/* Containers */

#outer                { width:960px; margin:0 auto; background-color:#FFF  }

#wrapper             { width:900px; margin:0 auto; background-color:#FFF  }

#logo                 {  margin:30px 0px; float:left; }

#social-media-icons { float:right; }
#social-media-icons ul li { display:inline; }
#social-media-icons ul { margin:30px 0; }

#topnav             { clear:both;  }
#topnav ul            { border-top:1px #000 solid; border-bottom:1px #000 solid; }
#topnav ul            {margin:20px 0; padding:10px 0;}
#topnav ul li        { display:inline; }
#topnav ul li a        { padding: 0 15px;  } 

#topnav a:link            { color: #000;  }
#topnav a:visited        { color: #000;  }
#topnav a:active        { color: #000;  }
#topnav a:focus            { color: #000;  }
#topnav a:hover         { color: #EEB300;  }

#banner             { margin-bottom:30px;  }

#rightside             { width:200px; float:right;  }

#content             { width:650px; float:left;  }

#footer             {  clear:both; margin-top:20px 0; border-top:1px #ccc solid; padding-bottom:20px;}



#box1 {   }

#box2 {   }

#box3 {   }

#box4 {   }

#box5 {   }

#box6 {   }


/* Layout Extra */




/* Navigation Extra */



/* Forms */

form { text-align:left; margin:20px;    }

label, submit, input, textarea {
    border:0; padding:0; margin:0; background:none; 
    }

label { 
    float: left; width: 150px;
    text-align:right; display:block;
    }
    
input, textarea { 
    border:1px #333 solid; margin-left:10px;     
    }

input { 
    width: 280px; margin-bottom: 16px; 
    }

textarea {
    width: 280px; height: 150px;
    margin-bottom: 16px;
    }

select {    }

.submit {
    width:90px; height:25px;
    margin-left:150px;
    font-size:12px;
}

br    { clear: left;     }


/* Miscellaneous  */

.date             {font-weight:bold; color:#BF6000;}

.copyright-text    { font-size:80%; font-style:italic; color:#333; }
.footer-text    { font-size:100%; font-style:normal; color:#000; text-align:center; }

.title            { font-size:18px; font-weight:bold; color:#333;  }
.subtitle        { font-size:14px; font-style:italic; color:#333;  }

.artist            { font-size:16px; font-weight:bold; color:#333;  }
.author            { font-size:14px font-weight:bold; color:#555;  }
.editor            { font-size:14px font-style:italic; color:#555;  }

.pub-date        { font-size:10px font-style:italic; color:#555; }
.article-date    { font-size:10px font-style:italic; color:#555;  }
.location        { font-size:10px font-style:italic; color:#555;  }

.float-right    { float:right; }
.float-left        { float:left; }
.clear            { clear:both; }

.hide            { display:none; }
.block            { display:block; }
.inline            { display:inline; }

.first            { font-weight:bold; }
.last            { font-weight:bold; }
.left            { font-weight:bold; text-align:left; }
.right            { font-weight:bold; text-align:right; }

.added          { background:#D7D7FF; }
.removed        { background:#FFCECE; color:#f00; }
.changed        { background:#FFB; }


/* Success, info, notice and error/alert boxes - from Blueprint CSS Framework */

.error, .alert, .notice, .success, .info {
    padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error, .alert     { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
    
.notice            { background: #fff6bf; color: #514721; border-color: #ffd324; }
    
.success           { background: #e6efc2; color: #264409; border-color: #c6d880; }
    
.info             { background: #d5edf8; color: #205791; border-color: #92cae4; }
    
.error a     { color: #8a1f11; }
.alert a     { color: #8a1f11; }
    
.notice a   { color: #514721; }
.success a  { color: #264409; }
.info a        { color: #205791; }

PeterPilz · 16.09.2011

AW: Problem mit dem Erstellen eines Templets

@msbblacky, hehe ja das sieht aber nur im video so aus, also der bearbeitbare bereich kann geändert werden.

@behemoth, also so wie ich das da im video zeige, habe ich das auch gemacht, also nichts weiteres verändert.

PeterPilz · 19.09.2011

AW: Problem mit dem Erstellen eines Templets

hmhm, keiner weiß woran's liegen könnte?

ovbb · 19.09.2011

AW: Problem mit dem Erstellen eines Templets

mal ein ganz blöder ansatz: hast du den images-ordner auch mitkopiert?

ChristianPodlewski · 19.09.2011

AW: Problem mit dem Erstellen eines Templets

Hi, mir fällt noch ein, dass es bei Dreamweaver eine Unterscheidung gibt, ob die Links relativ zum Stammverzeichnis oder relativ zur Datei gespeichert werden. Ich weiß nicht, ob man hier nicht relativ zu Stammverzeichnis speichern sollte - ich habe vor einigen Monaten ein ähnliches Problem gehabt - aber ich weiß nicht mehr, wie ich es gelöst habe :-( Die Einstellung ist in der Einstellung für die Website zu finden und ich glaube auch im Dialogfenster für das Setzen von Links.
Falls Du das ausprobierst, dann poste bitte, ob es geklappt hat - vielleicht stehe ich ja mal wieder vor dem selben Problem...

PeterPilz · 19.09.2011

AW: Problem mit dem Erstellen eines Templets

@ovbb, hmhm was meinst du? ich habe das genauso wie oben im video gemacht??

@chris, kannst du mit vllt. den genauen pfad beschreiben, finde diese einstellung leider nicht

.

danke!!

Titelfigur · 19.09.2011

AW: Problem mit dem Erstellen eines Templets

> Site-Definition
> lokale Infos
> Hyperlinks relativ zu: ...

Dem Quelltext zur Folge sind die Links relativ zum Dokument.
Eigentlich sollte ein Slash vor Images (also: /images) Abhilfe schaffen, da der Bilderordner sich ja wahrscheinlich im übergeordneten Verzeichnis befindet und nicht im Template-Ordner. (sprach der Nicht-Coder

)

PeterPilz · 19.09.2011

cool, danke! in welcher datei ändere ich dies aber genau?
also in der ausgangs html-datei? oder in der template-datei welche ich aus der ausgangs html-datei erstellt habe? oder in der leeren html-datei in welche ich die template-datei einfüge?

danke

hmhm, also bin jetzt mal in die "kaputte datei" gegangen, dort habe ich ja, wie man im video sieht einen bestimmten bereich bearbeitbar gemacht. in diesem bereich sind auch 2 bilder vorhanden, welche unter .../images/bla bla gespeichert sind. wenn ich nun "..." lösche, dann erscheint das bild plötzlich. dies ist natürlich gut, aber wie kann ich das auch in den anderen bereichen ändern, die ich nicht "veränderbar" gemacht habe. also ich kann diese bereiche leider weder in der code-ansicht, noch in der live-ansicht verändern.

fast haben wir's geschafft

ChristianPodlewski · 19.09.2011

AW: Problem mit dem Erstellen eines Templets

Hi, Du musst das in der dwt-Datei machen, also im Template, denn dort ist ja alles editierbar. Wollte Dir gerade den Weg zum den genannten Eistellungen beschreiben, da habe ich gesehen, dass Titelfigur schneller war

Viel Erfolg bei weiteren Vorgehen

PeterPilz · 19.09.2011

AW: Problem mit dem Erstellen eines Templets

geile scheisse, vielen dank für eure hilfe. also habe habe jetzt in der dwt-datei die bilder und icons angeklickt und dann unten in der entwurfsansicht in der leiste bei "quelle" die "..."/images entfernt. nun klappt es. wollte jetzt noch mal fragen ob ich da eine generelle einstellung dazu vornehmen kann, ohne dieses entfernen der "..." machen zu müssen. und könntet ihr mir diesen von titelfigur genannten pfad noch mal genau erklären, weil ich leider nirgendwo
> Site-Definition
> lokale Infos
> Hyperlinks relativ zu: ...
finde. sorry bin 'nen pc-noob.

lg und danke!!!

Titelfigur · 19.09.2011

AW: Problem mit dem Erstellen eines Templets

Jo, go ju this way → oben in der Hauptmenüleiste beispielsweise:
> Site > Sites verwalten > (entsprechende Site auswählen) > Bearbeiten...

Dann kannst du in den Site Definitionen alles nachträglich definieren.
z.B. "Lokale Infos"
> Sitename, Stammordner, Bilderordner, und... Hyperlinks relativ zu:

Ich gehe mal davon aus, mit Dreamweaver bist du noch relativ jungfräulich.
Sehr zu empfehlen ist immer die Programmhilfe. Da werden meist grundlegende Fragen wie auch deine beantwortet. (bei geöffnetem Programm Taste F1 oder Menü > Hilfe)

(mal davon abgesehen, dass dir ein eingefleischter Coder Dreamweaver natürlich rechts und links um die Backen hauen würde.) :lol:

PeterPilz · 19.09.2011

AW: Problem mit dem Erstellen eines Templets

echt? dachte dreamweaver ist gut. hmhm, wollte halt nen programm mit welchem ich eine schöne internetseite, möglichst easy erstellen kann.
gibt es da bessere alternativen, oder ist dreamweaver für amateure schon geeignet?

will halt irgendwann, wenn mir mal ne geschäftsidee in den kopf kommt eine hp dazu selber erstellen können.

danke

PeterPilz · 19.09.2011

AW: Problem mit dem Erstellen eines Templets

LOL, sorry dass ich so nerve. wollte mir jetzt meine schöne neue seite im internet angucken und sehe nun, dass die bilder gar nicht angezeigt werden. wenn ich bei dreamweaver in live-ansicht gehe, wird alles perfekt angezeigt, aber sobald ich auf vorschei in firefox oder einem anderen explorer gehe, verschwinden die bilder und icons plötzlich wieder..........

PeterPilz · 19.09.2011

AW: Problem mit dem Erstellen eines Templets

ok, also was ich herausgefunden habe:
wenn ich eine template-datei erstelle und dort "..." bei den bildern und icons entferne, dann tauchen sie nicht mehr im explorer auf, dafür erscheinen sie dann aber in der neuen html-datei die ich erstelle. aber auch wenn ich diese im explorer anschaue, werden keine icons und bilder gezeigt...

any ideas?