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é .

02/05/2008, 17h29	#2
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 630 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 630 Points : 6 232 Points : 6 232	Bonjour Tu veux bien nous indiquer a quel endroit de ton code tu veux placer ton texte ? __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

05/05/2008, 09h16	#3
shubakas Invité régulier Inscription : mars 2008 Messages : 39 Détails du profil Informations forums : Inscription : mars 2008 Messages : 39 Points : 6 Points : 6	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.
	00

08/05/2008, 16h07	#5
Elendil-tar Invité de passage Inscription : mai 2008 Messages : 9 Détails du profil Informations forums : Inscription : mai 2008 Messages : 9 Points : 1 Points : 1	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é .
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email