IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    mars 2008
    Messages
    56
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2008
    Messages : 56
    Points : 40
    Points
    40
    Par défaut Aide pour insérer du texte et des images dans ma page HTML ?
    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>

  2. #2
    Expert éminent
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : novembre 2006
    Messages : 4 093
    Points : 9 049
    Points
    9 049
    Par défaut
    Bonjour



    Tu veux bien nous indiquer a quel endroit de ton code tu veux placer ton texte ?
    Vous souhaitez participer à la rubrique (X)HTML/CSS, contactez moi.
    débutez 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...

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    mars 2008
    Messages
    56
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2008
    Messages : 56
    Points : 40
    Points
    40
    Par défaut
    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.


  4. #4
    Membre averti
    Inscrit en
    août 2007
    Messages
    360
    Détails du profil
    Informations forums :
    Inscription : août 2007
    Messages : 360
    Points : 396
    Points
    396
    Par défaut
    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

  5. #5
    Futur Membre du Club
    Profil pro
    Inscrit en
    mai 2008
    Messages
    9
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 9
    Points : 5
    Points
    5
    Par défaut
    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é .

Discussions similaires

  1. [CS5.5] extension php upload pour insérer le nom d'une image dans une table
    Par barale61 dans le forum Dreamweaver
    Réponses: 3
    Dernier message: 14/02/2013, 10h48
  2. Réponses: 3
    Dernier message: 06/06/2012, 19h07
  3. Réponses: 4
    Dernier message: 15/04/2011, 17h26
  4. Comment insérer des images dans une ComboBox HTML ?
    Par UiYuki dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 29/08/2010, 15h35
  5. Substitution de textes par des images dans Word
    Par Unusual dans le forum Delphi
    Réponses: 2
    Dernier message: 19/03/2007, 17h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo