Mise en page PDF vers html avec tableaux et images

**guyoms** · 23/03/2007, 19h33

NEWBIE's work

Mon taf à venir est mettre ne page des PDF en html,

seulement j'ai quelques questions concernant l'exemple que l'on m'a envoyé

concernant le "callage" en hauteur et en largeur
apparement, si j'ai bien compris ce systeme, tout se met en place grace au spacer.gif
Bien que pas habitué j'ai bien compris colspan et rowspan,
mais pas comment sont attribuées les valeurs en gras :

BREF : les images demo_01.gif ou demo_02.gif n'ont pas la même hauteur,
alors qu'est-ce qui me permet d'avoir une mise en page sûre, les calculs,
à faire si je dois faire le meme travail
j'ai bein noté les correspondances en additionnant différentes valeurs
ou,
notamment les valeurs height allouées à des spacer égales à la hauteur de certaines images,
mais ça reste flou !!

Y-a-t'il plus simple, aussi ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
</tr>
    <td colspan="14">
        <img src="images/demo_01.gif" width="731" height="5" lt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="5" alt=""></td>
</tr>

j'ai mis cet exemple en ligne :

http://jeanantoine.malot.free.fr/testfemina/femina.html

le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background="images/brick.jpg">
<!-- ImageReady Slices (col_right.jpg) -->
<!--ici-->
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" >
    <tr>    
     <td valign="top" width="50%" height="100%" background="images/tall_x.jpg" style="background-repeat:repeat-x; background-position:right top "></td>
     <td valign="top" width="766" height="661" >
     <!--ici--> 
 
<table id="Tableau_01" width="767" height="725" border="0" cellpadding="0" cellspacing="0" align="center">
 
    <tr>
 
 
 
 
        <td colspan="2" rowspan="2" dir="ltr">
            <img src="images/index_01.jpg" width="271" height="156" alt=""></td>
        <td colspan="2">
            <img src="images/index_02.jpg" width="495" height="121" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="121" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="4">
            <img src="images/index_03.jpg" width="495" height="152" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="35" alt=""></td>
    </tr> etc etc

_____________________________________________________________

Une autre question :
Pourquoi tableau_01 à-t-il une valeur (width) de732 et pas 766 ???

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<body bgcolor="#F4F4F4">
    <table width="766" style="background-image: url('images/main-dr.jpg'); background-repeat: repeat-y; height:100%" border="0" cellspacing="0" cellpadding="0" align="center">
     <tr>
 
        <td width="766" style="height:801px" align="center">
<table id="Tableau_01" width="732" height="801" border="0" cellpadding="0" cellspacing="0">

**guyoms** · 23/03/2007, 20h13

Valeurs EN GRAS (mettre une couleur à "bouffer" les graisses dans le post initial)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<tr>
<td colspan="2" rowspan="4">
<img src="images/index_03.jpg" width="495" height="152" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="35" alt=""></td>
 
et 
 
</tr>
<td colspan="14">
<img src="images/demo_01.gif" width="731" height="5" lt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt=""></td>
</tr>

**guyoms** · 26/03/2007, 12h21

TOUTE information
ou totu complet concernant cette "ancienne" méthode de construction
c-à-d la construction html par tableau et
surtout l'utilisation de ces "fameux" spacers de manière efficace et sûre
est la TRèS BIENVENUE

**Oluha** · 26/03/2007, 13h52

ca n'a pas grand chose à voir avec le web design mais plus avec le css (je vais donc déplacer).
Je ne comprend pas bien ce que tu souhaites.
L'exemple qu'on t'a donné est cela dit complètement obselete s'il utilise tableau et surtout spacer.
Tu devrais jeter un oeil sur la mise en forme avec des feuilles de style CSS.

**guyoms** · 28/03/2007, 00h14

pourtant, nombreux sont ceux qui continuent ainsi qd même

notamment par les "dev" qui sont ammenés à faire des mises en pages
ou autre graphiste pas si "old school" que ça.
Bref,
sinon il faut dire que les tableaux dans les div servent , qd même

le but pricipal de ma question est donc de savoir
/comprendre pas en quoi les spacers aidaient (dans ce cas précis) mais comment précisément ils peuvent équilibrer la mise en page

=> caller sur une même ligne (par ex horizontale) des images
de taille différentes

et/ou aussi

caller des images afin qu'elles ne soient pas caller sur la meme ligne
mais soient comme sur la mise en page pdf d'origine(au même endroit

les calculs qui sont faits la bidouille qui est faite.
voilà voilou

un ex illustré serait bien d'la boulette

alors un tuto sur l'util de spacers meme obsoltes (nescape 4 l'est aussi
c pour le SPORT

Mise en page PDF vers html avec tableaux et images

Tableau en CSS

Discussions similaires

Partager

Partager