Valider Code für paragraph_picture.ccml
Die Flashanimation zeigt eine zentriert positionierte Grafik: Zunächst bei Nichtvorhandensein einer Sidebar, dann zusammen mit einer Sidebar.
Folgendes sei gegeben:
- die (Maximal)Breite wird im Template paragraph_picture.ccml festgelegt
- die Breite ergibt sich aus vom Vorhandensein (oder Nichtvorhandensein) einer Sidebar
- Der Alternativtext wird aus der Bildüberschrift generiert.. Deshalb immer einen Titel eingeben.
- die Bildüberschrift wird jedoch durch den Befehl <span style="display:none;"> ... </span> ausgeblendet
- soll die Bildüberschrift ausgegeben werden, tauscht man den span-Befehl aus gegen ein Headerformat: <cc:if cond="¶graph.picture.caption"><h3><cc:print value="¶graph.picture.caption"></h3></cc:if>
- Format und Positionierung werden im CSS-Stylesheet festgelegt
- Eine Bildbeschreibung wird ausgegeben, falls vorhanden. Der Textgestaltung ist die Klasse .picturetext zugeordnet.
- definiert wird die Klasse .picturetext im CSS-Stylesheet
Um den gesamten Code ansehen zu können, nutzen Sie bitte die Markierfunktion mit Hilfe der Maus.
paragraph_picture.ccm
<cc:*>
--------------------------------------------------
Web2Date
Layout: all
Datei: paragraph_picture.ccml
Funktion: Abbildung
--------------------------------------------------
</cc:*>
<div class="picture"><cc:*>Das Format wird in diesem Template festgelegt vom Vorhandensein (oder Nichtvorhandensein) einer Sidebar abhängig gemacht</cc:*>
<cc:if cond="&sidebar.count gt 0">
<cc:picture uid="¶graph.picture.uid" width="520" suffix="_big" obj="bigpic"><!--wenn eine Sidebar, dann Breite reduzieren-->
<cc:else>
<cc:picture uid="¶graph.picture.uid" width="600" suffix="_big" obj="bigpic"><!--wenn keine Sidebar, dann Breite erhöhen--></cc:if>
<cc:picture uid="¶graph.picture.uid" suffix="_big" obj="bigpic">
<cc:if cond="¶graph.picture.zoom.isonsite"><a href="<cc:print value="¶graph.picture.zoom.url">"><cc:printpicture obj="bigpic_big" alt="¶graph.picture.caption" title="¶graph.picture.caption"></img></a></cc:if>
<cc:if cond="¶graph.picture.zoom.isoffsite"><a href="<cc:print value="¶graph.picture.zoom.url">"><cc:printpicture obj="bigpic_big" alt="¶graph.picture.caption" title="¶graph.picture.caption"></img></a></cc:if>
<cc:if cond="¶graph.picture.zoom.isnone"><cc:printpicture obj="bigpic_big" alt="¶graph.picture.caption" title="¶graph.picture.caption"></img></cc:if>
<cc:if cond="¶graph.picture.zoom.ispicture"><cc:picture uid="¶graph.picture.zoom.uid" obj="hugepic"><a href="<cc:printpictureurl obj="hugepic">"><cc:printpicture obj="bigpic_big" alt="¶graph.picture.caption" title="¶graph.picture.caption"></img></a></cc:if>
<cc:if cond="¶graph.picture.zoom.isdownload"><cc:download uid="¶graph.picture.zoom.uid" obj="mydownload"><a href="<cc:print value="&mydownload.url">"><cc:printpicture obj="bigpic_big" alt="¶graph.picture.caption" title="¶graph.picture.caption"></img></a></cc:if>
<span style="display:none;"><cc:print value="¶graph.picture.caption"></span>
<cc:*>Der Alternativtext wird aus der Bildüberschrift generiert.. Deshalb immer einen Titel eingeben.</cc:*>
<cc:*>Die Bildüberschrift wird jedoch durch den Befehl <span style="display:none;"> ... </span> ausgeblendet.</cc:*>
<cc:*>Wer die Bildüberschrift ausgeben möchte, tausche den o.g. Befehl aus: <cc:if cond="¶graph.picture.caption"><h3><cc:print value="¶graph.picture.caption"></h3></cc:if>
</cc:*>
<cc:*>Eine Bildbeschreibung wird ausgegeben, falls vorhanden. Der Textgestaltung ist die Klasse .picturetext zugeordnet. Formatiert wird im CSS-Stylesheet.</cc:*>
<cc:if cond="¶graph.picture.text"><p class="picturetext"><cc:print value="¶graph.picture.text"></p></cc:if>
</div>
<br clear="all" />
CSS (zentriert)
/* Grafik-Absatz*/
div.picture {
text-align: center;
padding: 0px;
margin: 10px auto 10px auto;/* oben, rechts, unten, links */
border: none;
}
p.picturetext {
margin: 0px;
font-size: 11px;
color: #742E51;
background-color:transparent;
padding: 2px 0px 0px 5px;
}
CSS linksfloatend
/* Stand alone Grafik-Absatz linksfloatend positioniert und mit einem Schatten ausgestattet.*/
/* wie auf dieser Website verwendet*/
div.picture {
float: left;
padding: 0px;
margin: 10px 10px 10px 30px;
/* oben, rechts, unten, links */
border: none;
}
/* Die Schattenmenues stammen von www.thestyleworks.de/tut-art/shadow.shtml */
div.shadow {
float: left; /* Left ist wichtig nicht ändern */
display: block;
background-color: #8F776D;
border: 1px solid #c6c6c6;
margin: 2px 0px 0px 4px;
padding: 1px;
}
div.shadow img {
float: left; /* Left ist wichtig nicht ändern */
display: block;
background-color: #E3EADF;
margin: 0px;
padding: 0px;
display: block;
position: relative;
top: -4px;
left: -4px;
}
p.picturetext {
text-align: left;
font-size: 11px!important;
color: #990000 !important;
background-color: transparent;
margin: 8px 5px 0px 0px !important;
/* oben, rechts, unten, links */
}
Grafikpositionierung demonstrieren
Wer einen beschreibenden Text benötigt, kann ihn (wie hier geschehen) via w2d ausgeben lassen.
Lassen Sie sich die Eigenschaften der Grafik anzeigen (FF= rechte Maustaste). Sie sehen, es wird ein mit Text gefülltes Alt-Tag ausgegeben.
