AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Créer un Mag grâce aux pages HTML

    Partagez
    avatar
    Halloween
    FémininAge : 23Messages : 9741

    le Mar 19 Fév 2013 - 17:17

    Rappel du premier message :


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


      Hey,

      J'ai jeté un coup d’œil rapide un peu partout, et je n'ai pas vu d'astuce sur la création de mag pour vos forums, je me lance donc.

      Premièrement pour éclairer vos lanternes, voici à quoi ressemble ce fameux mag : Aperçu. Vous pouvez vous dirigez grâce au sommaire, ou aux flèches directionnelles du bas.

      1. Le code.


      Ce système se base sur la gestion des pages HTML de votre fofo. Pour commencer, nous allons créer une de ces fameuses page HTML. Pour cela, direction le panneau d'administration, et : Modules > HTML > Gestion des pages HTML. On clique sur "créer une page HTML", et on commence la bataille ! è.é

      Voici le code brut :

      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

      transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Tuto mag</title>

      <style type="text/css">
      a { text-decoration: none;
      color: #6D6D6D; }</style>
      <script type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/java/accordeon_effet.js"></script>
      </head>
      <body><div style="background-image: url(http://i71.servimg.com/u/f71/17/97/89/15/i_back10.png); height: 100%; width: 100%;"><br><br>

      <center><div style="width: 500px; background-color: #000000; border: 1px solid #6E6E6E; padding: 20px;"><table border="0" cellspacing="2" width="100%">
        <tbody><tr>
          <td width="50%"><div style="text-align: center; font-size: 25px; color: #FFFFFF; font-family: georgia;"><i>Nom du journal # 1</i></div><div style="text-align: center; font-size: 14px; font-family: georgia; color: #C6B8B9;"><i>Parce qu'on a toujours des choses à dire</i></div></td>
          <td width="50%"><div style="text-align: center; background-color: #E6E4D0; font-size: 14px; font-family: georgia; color: #000000; padding: 20px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;"><i>Résumé de l'article
      <br>By X and X</i></div></td>
        </tr>
      </tbody></table></div></center>

      <center><div style="background-color: #F3F3F3; width: 500px; border: 1px solid #6E6E6E; color: #6E6E6E; padding: 20px; height: 490px; margin-top: -1px; font-size: 12px; text-align: justify; overflow: auto;"><div style="text-align: center; font-size: 28px; color: #000000; font-family: old english text mt; transform: rotate(-3deg"><i>Titre de l'article</i></div>

      <br>Nam quibusdam, quos audio sapientes habitos in Graecia, placuisse opinor mirabilia quaedam (sed nihil est quod illi non persequantur argutiis): partim fugiendas esse nimias amicitias, ne necesse sit unum sollicitum esse pro pluribus; satis superque esse sibi suarum cuique rerum, alienis nimis implicari molestum esse; commodissimum esse quam laxissimas habenas habere amicitiae, quas vel adducas, cum velis, vel remittas; caput enim esse ad beate vivendum securitatem, qua frui non possit animus, si tamquam parturiat unus pro pluribus.
      <br><br>
      Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia. Nam quibusdam, quos audio sapientes habitos in Graecia, placuisse opinor mirabilia quaedam (sed nihil est quod illi non persequantur argutiis): partim fugiendas esse nimias amicitias, ne necesse sit unum sollicitum esse pro pluribus; satis superque esse sibi suarum cuique rerum, alienis nimis implicari molestum esse; commodissimum esse quam laxissimas habenas habere amicitiae, quas vel adducas, cum velis, vel remittas; caput enim esse ad beate vivendum securitatem, qua frui non possit animus, si tamquam parturiat unus pro pluribus.
      <br><br>
      Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.<br><br>
      Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita societate generis humani, quam conciliavit ipsa natura, ita contracta res est et adducta in angustum ut omnis caritas aut inter duos aut inter paucos iungeretur. Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas Constantii deiectas super adimenda vita praefecto conveniet securius cogitari.
      <br><br>
      Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus. Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
      <br><br>
      Et quoniam mirari posse quosdam peregrinos existimo haec lecturos forsitan, si contigerit, quamobrem cum oratio ad ea monstranda deflexerit quae Romae gererentur, nihil praeter seditiones narratur et tabernas et vilitates harum similis alias, summatim causas perstringam nusquam a veritate sponte propria digressurus. Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.</div></center>

      <center><a href="http://halloweens-test.forumactif.org"><img src="http://i71.servimg.com/u/f71/17/97/89/15/gauche11.png"></a>  <a href="http://halloweens-test.forumactif.org/h6-tuto-mag-2"><img src="http://i71.servimg.com/u/f71/17/97/89/15/droite11.png"></a></center>
      </div>
      <div style="background-color: #E6E4D0; width: 200px; height: auto; padding: 20px; margin-top: -763px; margin-left: 140px; font-family: arial; font-size: 12px;"><div style="text-align: center; font-size: 25px; color: #000000; font-family: georgia;"><i>Sommaire</i></div>

      <br><a href="http://halloweens-test.forumactif.org"><div style="color: #717458;"><b>Page 1 ; Nom article</b></div></a><a href="http://halloweens-test.forumactif.org/h6-tuto-mag-2">Page 2 ; Nom article</a><br><br> <div style="font-size: 10px; text-align: right; color: #6D6D6D;">© Code by Halloween de <a href="http://www.never-utopia.com">NU</a></div></div> 

      </body> </html>
       

      Il vous suffit de remplacer les textes par votre production. Ceci fait, on enregistre la page. Pour continuer le mag (dans l'exemple, je n'ai fais que deux pages, mais il est tout à fait possible d'en faire plus), on réitère l'opération autant de fois que nécessaire.

      Attention : pensez à déplacer ceci :

      Code:
      <div style="color: #717458;"><b>Page X ; Nom article</b></div>

      En fonction du numéro de la page que vous venez de créer.


      2. La navigation.

      Il faut désormais ajouter les liens des pages pour la navigation. Pour cela, vous devez copier/coller l'adresse des pages précédentes et suivantes à celle que vous modifiez (cf : ici). Elles sont à insérer dans les bouts de codes suivants :

      Code:
      <center><a href="ADRESSE PAGE PRECEDENTE"><img src="http://i71.servimg.com/u/f71/17/97/89/15/gauche11.png"></a>  <a href="ADRESSE PAGE SUIVANTE"><img src="http://i71.servimg.com/u/f71/17/97/89/15/droite11.png"></a></center>

      En ce qui concerne le sommaire, il vous faudra ajouter les adresses de toutes les pages (copiez/collez les sur un bloc-note pour plus de praticité, ou gardez la liste des pages HTML dans un autre onglet), de cette manière :

      Code:
      <div style="background-color: #E6E4D0; width: 200px; height: auto; padding: 20px; margin-top: -763px; margin-left: 140px; font-family: arial; font-size: 12px;"><div style="text-align: center; font-size: 25px; color: #000000; font-family: georgia;"><i>Sommaire</i></div>

      <br><a href="LIEN PAGE 1"><div style="color: #717458;"><b>Page 1 ; Nom article</b></div></a><a href="LIEN PAGE 2">Page 2 ; Nom article</a><br><br> <div style="font-size: 10px; text-align: right; color: #6D6D6D;">© Code by Halloween de <a href="http://www.never-utopia.com">NU</a></div></div> 


      3. Attention.

      Attention, à chaque édition de vos pages, vous devrez réinsérer le code suivant au début de votre page :

      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

      transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Tuto mag</title>

      <style type="text/css">
      a { text-decoration: none;
      color: #6D6D6D; }</style>
      <script type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/java/accordeon_effet.js"></script>
      </head>
      <body>

      Et celui-ci à la fin :

      Code:
      </body> </html>


      Merci de ne pas toucher au crédit, s'approprier le travail des autres, c'mal. Si vous avez des questions, des réactions, des soucis ... n'hésitez pas Wink

      Au boulot \o/



    Je déménage sur NMD o/
    avatar
    Arfgang
    MasculinAge : 26Messages : 59

    le Lun 8 Avr 2013 - 3:35

    Intéressant en effet, merci à toi :)



    avatar
    Grande
    FémininAge : 29Messages : 206

    le Lun 8 Avr 2013 - 12:32

    merci



    avatar
    Aphroodite
    FémininAge : 23Messages : 52

    le Ven 12 Avr 2013 - 22:12

    Merci Very Happy
    avatar
    Invité

    le Ven 12 Avr 2013 - 22:15

    *o* MILLIONS DE MERCI MA BELLE !!!!!!!!!!!! <3 <3 <3
    avatar
    Cola
    FémininAge : 18Messages : 81

    le Sam 13 Avr 2013 - 14:43

    Merci, je cherchais ça depuis longtemps ! **



    avatar
    Evydence
    FémininAge : 20Messages : 60

    le Dim 14 Avr 2013 - 14:20

    Merci beaucoup!
    avatar
    LuxAeterna
    FémininAge : 38Messages : 99

    le Dim 21 Avr 2013 - 12:55

    Merci !
    avatar
    Capouccino
    FémininAge : 19Messages : 165

    le Dim 21 Avr 2013 - 14:59

    Merciiii o/



    "Espérer l'inespérable c'est croire en l'impossible."
    avatar
    Onigiri2a
    FémininAge : 27Messages : 46

    le Mar 23 Avr 2013 - 1:14

    Je veux bien prendre ça comme modèle ! :)
    Merci beaucoup !



    avatar
    Jimmy
    MasculinAge : 22Messages : 166

    le Mer 24 Avr 2013 - 9:04

    i want to see !
    avatar
    Lenou
    MasculinAge : 21Messages : 20

    le Mer 24 Avr 2013 - 23:44

    Merci, c'est vraiment super *o*
    avatar
    Tagada Choupy
    FémininAge : 19Messages : 39

    le Jeu 25 Avr 2013 - 19:09

    J'ai toujours voulu savoir comment faire ! Merci !!
    avatar
    Illusion
    FémininAge : 18Messages : 16

    le Jeu 25 Avr 2013 - 20:24

  • Merci !!



  • ► And I can think of a thousand reasons why. I don't believe in you. I don't believe in you and I.
    I'm not yours - Angus & Julia Stone
    ► I want to fly, can you take me far away ? Give me a star to reach for. Tell me what it takes. And I’ll go so high... Stitch my wings.
    Wing$ - Macklemore x Ryan Lewis
    avatar
    Gnuh
    FémininAge : 19Messages : 87

    le Ven 26 Avr 2013 - 0:53

    Merci beaucoup !
    C'trop classe *^*



    avatar
    servity
    MasculinAge : 45Messages : 82

    le Lun 29 Avr 2013 - 12:18

    super sympa merci



    avatar
    Nithz
    MasculinAge : 25Messages : 32

    le Jeu 9 Mai 2013 - 11:28

    Merci beaucoup, c'est multi-usage comme système



    avatar
    Shakespeare
    FémininAge : 27Messages : 105

    le Jeu 9 Mai 2013 - 15:19

    merci milles fois !
    avatar
    Invité

    le Dim 12 Mai 2013 - 6:35

    §eerci !
    avatar
    Skyleen
    FémininAge : 25Messages : 476

    le Mer 15 Mai 2013 - 14:35

    Merci beaucoup =)



    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    avatar
    T_Time
    FémininAge : 19Messages : 104

    le Dim 19 Mai 2013 - 17:28

    Je suis curieuse de voir quels codes se cachent la dessous Wink
    avatar
    Alaplaya1
    FémininAge : 25Messages : 18

    le Dim 26 Mai 2013 - 22:52

    Gracias :)
    avatar
    Reishi
    MasculinAge : 23Messages : 141

    le Dim 26 Mai 2013 - 23:28

    Merci !
    avatar
    Naëna
    FémininAge : 19Messages : 10

    le Mer 29 Mai 2013 - 10:20

    Merci ! ça va m'être très utile !
    avatar
    Noukii
    MasculinAge : 16Messages : 31

    le Ven 31 Mai 2013 - 22:07

    Mercii !!

    Une bonne idée pour les sorties de mangas ! *_*

    Encore merci !
    Et encore une fois : Vive Halloween !!
    avatar
    Féréole
    FémininAge : 29Messages : 55

    le Sam 1 Juin 2013 - 19:05

    Merci je cherchais cette astuce depuis longtemps!
    Contenu sponsorisé


      La date/heure actuelle est Ven 21 Juil 2017 - 8:36