Klippbok för småbilder med text
v111107
Detta är ett stöd för en dokumenttyp som har fyra kolumner: marginal, bild, text och
högerkant, se t.ex. "Kenneth Johanssons bilder".
Lägg en tom textfil med ändelsen ".htm" i en undermapp till "text". Klistra in hela
kodavsnittet som kallas stomme nedan, spara och öppna filen i din webbläsare. Bygg
sedan på med önskade tillägg enligt nedan. Allt gulmålat är sådant som man bör ändra
efter inklistringen.
Kopiera ett kodavsnitt ur denna klippbok genom att klicka i kodrutan en eller två gånger
tills du får en textmarkör där. Markera hela avsnittet med Ctrl+A och kopiera med Ctrl+C.
Ställ sedan markören alldeles i början på raden efter stället där koden ska in. Tryck
Ctrl+V. Om det efter inklistringen finns kod till höger om markören, så tryck Enter så att
det hamnar på egen rad.
Ändringsförslag:
<p> har bottenmarginal som kan skapa onödigt stort gap till nästa bildrad. Sista
kommentaren kan använda <p class="tight"> för att minska gapet.
(<p class="comment"> och <p class="comment-last"> ger mindre texthöjd.)
Stomme
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dpffagent_docid="f7cce66" dpffagent_readystate="1">
<head>
<title>Gustavsviks flygfält - Kenneth Johanssons bilder</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="../../css/main.css" rel="stylesheet" type="text/css">
<style type="text/css">
//td {border:1px solid green;} /* Slå på för att se alla tabellceller */
//div {border:1px solid blue;} /* Slå på för att se exakta bildpos */
//* {border:1px solid red !important;} /* Slå på för att se boxarna för alla element */
</style>
</head>
<!-- ====== Body ====== -->
<body>
<div id="banner">
<a href="../../index.htm" title="Till startsidan"><img id="banner-img" src="../../bild/banner.jpg" alt="Titelbild" /></a>
<p id="banner-text">Kenneth Johansson</p>
</div>
<table class="page-layout" width="1000">
<col width="45" /> <!-- marg -->
<col width="250" /> <!-- bild -->
<col width="600" /> <!-- text -->
<col width="105" /> <!-- högerkant -->
<!-- ====== Rubrik ====== -->
<tr>
<td></td>
<td colspan="2">
<h1>Mina bilder</h1>
</td>
<td></td>
</tr>
<!-- ====== Luft ====== -->
<tr><td colspan="4"><h2>&nbsp;</h2></td></tr>
<!-- ====== Revisionslogg ====== -->
<tr>
<td></td>
<td colspan="2">
<table class="rev-log">
<col width="80" /> <!-- date -->
<col />
<!-- revision description -->
<tr><td class="rev-log" colspan="2">Dokumentets historik:</td></tr>
<tr><td class="rev-log">2011-03-26</td><td class="rev-log">Bilderna publicerade.</td></tr>
</table>
</td>
<td></td>
</tr>
</table>
</body>
</html>
Redigera namn på upphovsman i bannern, textens huvudrubrik h1 och så småningom även
publiceringsinfo i revisionsloggen.
Text under en rubrik
Exempelvis rakt under <h1>Mina bilder</h1>
<p>Jag tror att alla dessa bilder är tagna mellan 1959 och 1961 ungefär.</p>
eller
<p>
Jag tror att alla dessa bilder är tagna mellan 1959 och 1961 ungefär.
</p>
En eller flera sådana texter kan läggas direkt efter huvudrubriken eller en underrubrik.
Underrubrik och en bild
<!-- ====== Rubrik ====== -->
<tr>
<td></td>
<td colspan="2">
<h2 class="images">Gästande plan</h2>
</td>
<td></td>
</tr>
<!-- ====== Bild ====== -->
<tr>
<td></td>
<td>
<div class="img-inline">
<a
href="../../bild/svensson_arne/B5_w1200.jpg" title="Visa bilden">
<img src="../../bild/svensson_arne/B5_w500.jpg" alt="B5" width="220px" />
</a>
<p class="img-desc">Foto: Okänd via Arne Svensson</p>
</div>
</td>
<td class="img-desc">
<p>
<b><small>Rolf Broberg:</small></b>
Detta är en bildkommentar från Roffe.
</p>
</td>
<td></td>
</tr>
Kan läggas efter en fullbordad tabellrad (alltså efter en </tr>).
Separera gärna varje sådant "kapitel" med en eller två tomma rader före och efter.
<img ...> bör ha width="220px". Bildkolumnen rymmer inte mer. Men om bilden är
mindre bör en mindre vidd anges, annars blir bilden suddig.
En bild till
Bilder kan staplas under varandra. Kopiera exempelkoden ovan fr.o.m. rubriken "Bild".
Klistra in den utan tomrader till föregående bild. Den tillhör ju samma underrubrik.
Flera kommentar till samma bild
Kommentarer till höger om en enstaka bild under "img-desc" kan staplas under varandra
enligt:
<p>
<b><small>Rolf Broberg:</small></b>
Detta är en bildkommentar från Roffe.
</p>
<p>
<b><small>Alice Babs:</small></b>
Detta är en annan bildkommentar från Alice Babs.
</p>
Varje kommentar bör inledas med namnet på den som kommenterar.
Om kommentaren behöver dateras, t.ex. om den är gammal, kan texten avslutas med en
parentes där datum mm anges. Exempel:
"(Hjalmar Öberg vid ett telefonsamtal med Rolf B 2006)"
Inga kommentar till bilden
Tar man bort alla kommentar-paragrafer (<p>...</p>) så återstår bara en tom tabellcell:
<td class="img-desc">
</td>
Lämnar man det så, är det lätt att lägga in kommentarer till bilden den dag de behövs.
Bildtext som upptar flera rader
Om bildtexten blir lång, tar den flera rader och kommentarerna bredvid hamnar då för lågt.
Radbryt gärna bildtexten m.h.a. <br /> så brytningarna blir genomtänkta.
Komplettera sedan sista kommentaren med motsvarande antal <br />&nbsp; enligt:
<!-- ====== Bild ====== -->
<tr>
<td></td>
<td>
<div class="img-inline">
<a
href="../../bild/svensson_arne/B5_w1200.jpg" title="Visa bilden">
<img src="../../bild/svensson_arne/B5_w500.jpg" alt="B5" width="220px" />
</a>
<p class="img-desc">Här är en tvåradig bildtext.<br />Foto: Okänd via Arne Svensson</p>
</div>
</td>
<td class="img-desc">
<p>
<b><small>Rolf Broberg:</small></b>
Detta är en bildkommentar från Roffe.
<br />&nbsp;
</p>
</td>
<td></td>
</tr>
Bildrad
<!-- ====== Bildrad ====== -->
<tr>
<td></td>
<td colspan="3" class="img-inline">
<div class="img-inline">
<a
href="../../bild/svensson_arne/B5_w1200.jpg" title="Visa bilden">
<img src="../../bild/svensson_arne/B5_w500.jpg" alt="B5" width="220px" />
</a>
<p class="img-desc">Plan nr 1<br />Foto: Okänd via Arne Svensson</p>
</div>
<div class="img-inline">
<a
href="../../bild/svensson_arne/B5_w1200.jpg" title="Visa bilden">
<img src="../../bild/svensson_arne/B5_w500.jpg" alt="B5" width="220px" />
</a>
<p class="img-desc">Plan nr 2<br />Foto: Okänd via Arne Svensson</p>
</div>
</td>
</tr>
<!-- ====== Text ====== -->
<tr>
<td></td>
<td colspan="2">
<p>
<b><small>Rolf Broberg:</small></b>
Här är en kommentar från Roffe som kan handla om både plan 1 och plan 2.
</p>
</td>
<td></td>
</tr>
Max fyra bilder på 220px får plats på raden. Varje bild är en <div>...</div> (blå ruta). Om
man har för långa bildtexter, placeras bilderna glesare och det ryms inte 4 bilder på raden.
Radbryt därför alltid bildtexter med <br/> så att de aldrig blir längre än bilden.
Enstaka bilder enligt tidigare och hela bildrader kan staplas under varandra. Klistra in
exempelkoden ovan utan tomrader till föregående bild. Den tillhör ju samma underrubrik.
Den gröna rutan innehåller kommentarer som rör flera av bilderna på raden. Ta bara med
den om den behövs. Den beskrivs separat som "Textstycke" nedan.
Justera bildplaceringen i en bildrad
Alla bilderna i en rad justeras efter överkanten. Om bilderna är olika höga och man vill
justera dem efter underkanten istället, får man sänka de mindre bilderna genom att ge dem
lämplig margin-top som man får prova sig fram till.
I detta exempel har vi simulerat mindre bildhöjd genom att ange vidden 210px:
<div class="img-inline">
<a href="../../bild/svensson_arne/B5_w1200.jpg" title="Visa bilden">
<img src="../../bild/svensson_arne/B5_w500.jpg" alt="B5" width="220px" />
</a>
<p class="img-desc">Plan nr 1<br />Foto: Okänd via Arne Svensson</p>
</div>
<div class="img-inline" style="margin-top:11px">
<img src="../../bild/svensson_arne/B5_w500.jpg" alt="B5" width="210px" />
<p class="img-desc">Foto: Okänd via Arne Svensson</p>
</div>
Klickbar bild eller ej
En klickbar bild kodas:
<div class="img-inline">
<a
href="../../bild/svensson_arne/B5_w1200.jpg" title="Visa bilden">
<img src="../../bild/svensson_arne/B5_w500.jpg" alt="B5" width="220px" />
</a>
<p class="img-desc">Foto: Okänd via Arne Svensson</p>
</div>
En ej klickbar bild saknar <a>-tagg:
<div class="img-inline">
<img src="../../bild/svensson_arne/B5_w500.jpg" alt="B5" width="220px" />
<p class="img-desc">Foto: Okänd via Arne Svensson</p>
</div>
Textstycke
Detta är en text som upptar hela bredden. Den placeras vanligen under en bildrad eller
under flera rader med en bild på varje för kommentarer som rör flera bilder på en gång.
<!-- ====== Text ====== -->
<tr>
<td></td>
<td colspan="2">
<p>
<b><small>Rolf Broberg:</small></b>
Här är en kommentar från Roffe som kan handla om både plan 1 och plan 2.
</p>
</td>
<td></td>
</tr>
Nytt stycke i kommentar
Styckesindelning inom en och samma kommentar görs med indrag utan tomrad. För
närvarande gör vi sådana indrag m.h.a. hårda blanksteg:
<b><small>Rolf Broberg:</small></b>
Här är en kommentar från Roffe.
<br/>&nbsp; &nbsp;
Och här är ett nytt stycke.
Tomraden i koden och nyrads- och indragskoden på separat rad är bara för att göra koden
lätt att hitta i. Resultatet blir två stycken, varav det andra är indraget.
Röd text "Förhandsversion"
Direkt ovanför sidans huvudrubrik kan något i stil med följande "förhandsstämpel" läggas:
<p><b style="color:red;"><i>
&nbsp; &nbsp;<br/>
Förhandsversion för privata identifieringsdiskussioner.
<br/>
Syftet är att samla upplysningar som kan publiceras till bilderna efter godkännande från bidragsgivarna.
</i></b></p>
Ny-flagga i vänsterkant
I vänstra kolumnen (vänstermarginalen) kan man lägga in en flagga Ny på stycken med
nytt innehåll. Byt i så fall det tomma <td></td> mot:
<td><p style="color:#FF0000; font-weight:bold;">Ny</p></td>
Det lämpar sig bäst i förteckningar, t.ex. över tidningsklipp.
Kort historikrad
<tr><td class="rev-log">2011-03-20</td><td class="rev-log">Kenneth la till bilderna xxx.</td></tr>
Kan läggas till som en egen rad (<tr> ... </tr>) i revisionsloggen.
Lång historikrad med webblänk
<tr><td class="rev-log">2011-03-22</td><td class="rev-log">
Kenneth erbjuder oss att publicera alla hans
<a href="http://www.flickr.com" title="Alla bilder från Flickr">bilder från Flickr. </a>
</td></tr>
Samma princip som kort historikrad, men här visas hur man lägger in en webblänk. Title
anger den tipstext som visas när man håller muspekaren över länken.
