Aide pour insérer du texte et des images dans ma page HTML ?

**shubakas** · 02/05/2008, 12h24

Bonjour,

J'ai créé un kit graphique sous Photoshop, j'ai créé mes tranches et enregistrer en html avec Image ready.

J'ai relié une page CSS, ce qui m'a permis de donner une couleur au fond.
Et dans la page HTML j'ai centré le tout.

Mon gros problème est que je n'arrive pas à insérer mes textes correctement, soit ils se mettent tout en haut, au dessus de mon interface, soit tout en bas, en dessous.

Comment insérer le texte dans le tableau html créé par image ready ?

Merci beaucoup du coup de pouce !!!

Code source de ma page :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>TITRE</title>
    <link rel=stylesheet type="text/css" href="styles.css">
<!-- ImageReady Preload Script (Interface Web2.psd) -->
<script type="text/javascript">
<!--
 
function newImage(arg) {
    if (document.images) {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
    }
}
 
function changeImages() {
    if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
            document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
        }
    }
}
 
var preloadFlag = false;
function preloadImages() {
    if (document.images) {
        Interface_Web2_05_over = newImage("images/Interface-Web2_05-over.png");
        Interface_Web2_06_over = newImage("images/Interface-Web2_06-over.png");
        Interface_Web2_07_over = newImage("images/Interface-Web2_07-over.png");
        Interface_Web2_08_over = newImage("images/Interface-Web2_08-over.png");
        Interface_Web2_09_over = newImage("images/Interface-Web2_09-over.png");
        Interface_Web2_10_over = newImage("images/Interface-Web2_10-over.png");
        Interface_Web2_11_over = newImage("images/Interface-Web2_11-over.png");
        preloadFlag = true;
    }
}
 
// -->
</script>
<!-- End Preload Script -->
</head>
 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (Interface Web2.psd) -->
<table id="Tableau_01" width="780" align="center" height="607" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="3">
            <img src="images/Interface-Web2_01.png" width="264" height="121" alt=""></td>
        <td colspan="3">
            <img src="images/Interface-Web2_02.png" width="285" height="121" alt=""></td>
        <td colspan="2">
            <img src="images/Interface-Web2_03.png" width="231" height="121" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/Interface-Web2_04.png" width="780" height="1" alt=""></td>
    </tr>
        <tr>
        <td>
            <a href="#"
                onmouseover="changeImages('Interface_Web2_05', 'images/Interface-Web2_05-over.png'); return true;"
                onmouseout="changeImages('Interface_Web2_05', 'images/Interface-Web2_05.png'); return true;"
                onmousedown="changeImages('Interface_Web2_05', 'images/Interface-Web2_05-over.png'); return true;"
                onmouseup="changeImages('Interface_Web2_05', 'images/Interface-Web2_05-over.png'); return true;">
                <img name="Interface_Web2_05" src="images/Interface-Web2_05.png" width="72" height="34" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('Interface_Web2_06', 'images/Interface-Web2_06-over.png'); return true;"
                onmouseout="changeImages('Interface_Web2_06', 'images/Interface-Web2_06.png'); return true;"
                onmousedown="changeImages('Interface_Web2_06', 'images/Interface-Web2_06-over.png'); return true;"
                onmouseup="changeImages('Interface_Web2_06', 'images/Interface-Web2_06-over.png'); return true;">
                <img name="Interface_Web2_06" src="images/Interface-Web2_06.png" width="123" height="34" border="0" alt=""></a></td>
        <td colspan="2">
            <a href="#"
                onmouseover="changeImages('Interface_Web2_07', 'images/Interface-Web2_07-over.png'); return true;"
                onmouseout="changeImages('Interface_Web2_07', 'images/Interface-Web2_07.png'); return true;"
                onmousedown="changeImages('Interface_Web2_07', 'images/Interface-Web2_07-over.png'); return true;"
                onmouseup="changeImages('Interface_Web2_07', 'images/Interface-Web2_07-over.png'); return true;">
                <img name="Interface_Web2_07" src="images/Interface-Web2_07.png" width="142" height="34" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('Interface_Web2_08', 'images/Interface-Web2_08-over.png'); return true;"
                onmouseout="changeImages('Interface_Web2_08', 'images/Interface-Web2_08.png'); return true;"
                onmousedown="changeImages('Interface_Web2_08', 'images/Interface-Web2_08-over.png'); return true;"
                onmouseup="changeImages('Interface_Web2_08', 'images/Interface-Web2_08-over.png'); return true;">
                <img name="Interface_Web2_08" src="images/Interface-Web2_08.png" width="97" height="34" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('Interface_Web2_09', 'images/Interface-Web2_09-over.png'); return true;"
                onmouseout="changeImages('Interface_Web2_09', 'images/Interface-Web2_09.png'); return true;"
                onmousedown="changeImages('Interface_Web2_09', 'images/Interface-Web2_09-over.png'); return true;"
                onmouseup="changeImages('Interface_Web2_09', 'images/Interface-Web2_09-over.png'); return true;">
                <img name="Interface_Web2_09" src="images/Interface-Web2_09.png" width="115" height="34" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('Interface_Web2_10', 'images/Interface-Web2_10-over.png'); return true;"
                onmouseout="changeImages('Interface_Web2_10', 'images/Interface-Web2_10.png'); return true;"
                onmousedown="changeImages('Interface_Web2_10', 'images/Interface-Web2_10-over.png'); return true;"
                onmouseup="changeImages('Interface_Web2_10', 'images/Interface-Web2_10-over.png'); return true;">
                <img name="Interface_Web2_10" src="images/Interface-Web2_10.png" width="150" height="34" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('Interface_Web2_11', 'images/Interface-Web2_11-over.png'); return true;"
                onmouseout="changeImages('Interface_Web2_11', 'images/Interface-Web2_11.png'); return true;"
                onmousedown="changeImages('Interface_Web2_11', 'images/Interface-Web2_11-over.png'); return true;"
                onmouseup="changeImages('Interface_Web2_11', 'images/Interface-Web2_11-over.png'); return true;">
                <img name="Interface_Web2_11" src="images/Interface-Web2_11.png" width="81" height="34" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/Interface-Web2_12.png" width="780" height="2" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/Interface-Web2_13.png" width="780" height="423" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/Interface-Web2_14.png" width="780" height="25" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="72" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="123" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="69" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="73" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="97" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="115" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="150" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="81" height="1" alt=""></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

**12monkeys** · 02/05/2008, 17h29

Bonjour

Tu veux bien nous indiquer a quel endroit de ton code tu veux placer ton texte ?

**shubakas** · 05/05/2008, 09h16

Oui je veux placer le texte entre l'image 12 qui est le dernier morceaux de la barre de navigation et l'image 14 qui est la barre de fin de page.

**mathieu44800** · 07/05/2008, 00h30

Salut,

Le généré j'adore...

Initial :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
    <tr>
        <td colspan="8">
            <img src="images/Interface-Web2_12.png" width="780" height="2" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/Interface-Web2_13.png" width="780" height="423" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/Interface-Web2_14.png" width="780" height="25" alt=""></td>
    </tr>

Essayes ça :

Code :

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
<tr>
        <td colspan="8">
            <img src="images/Interface-Web2_12.png" width="780" height="2" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/Interface-Web2_13.png" width="780" height="423" alt=""></td>
        <td colspan="8">
            <div>Insérer ici le texte...</div>
        </td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/Interface-Web2_14.png" width="780" height="25" alt=""></td>
    </tr>

Dis nous si ça te conviens...

A+

Mathieu

**Elendil-tar** · 08/05/2008, 16h07

Ton design , au lieu de l'enregistrer en tant que tableau , va dans Photoshop , découpe tes tranches , en suite , fais :
fichier=>Enregistrer pour le web ou autres péréfériques => Bouton enregistrer en haut a droite de la fenêtre qui apparait => dans la fenêtre qui te permet de choisir la destination et le nom de ton fichier dispose d'une liste de paramètres déroule cette liste puis click sur " autre... " une nouvelle fenêtre apparait choisit tranches ( ou slices si il est en anglais ) puis coche " Generate CSS" en suite click sur [ok] puis termine ta sauvegarde . Lorsque tu ouvrira ton "jenesaisquoi.html" il y aura un CSS , tu n'aura plus qu'a y referancer les images présentent entre les balises div correspondantes( backgroud-image: url=("images/nomdetonimages.formatdetonimages") ) puis de taper ton texte a l'endroit désiré .

Aide pour insérer du texte et des images dans ma page HTML ?

Discussions similaires

Partager

Partager