Intégrer des page web au forum

Un Site Web
sur votre forum !

Les forum ForumActif ont l'agréable particularité de permettre tout une série d'ajouts et de modifcations avec lesquelles les plus à l'aise d'entre vous en codage pourront s'amuser pendant des heures ! Dans cette astuce, nous verrons comment arriver tout simplement à intégrer une page web à votre forum, que ce soit en temps que "page d'accueil' ou bien pour le règlement, par exemple. Par la suite, nous passerons à l'étape supérieure, à savoir créer plusieurs pages, avec un design original ou du moins différent de celui du forum, ou bien carrément une sorte de "mini-site" !
Les premières parties de ce tuto sont accessibles à tout le monde, que vous sachiez ou non coder, par la suite il sera nécessaire d'avoir des bases en codage html et css afin de pouvoir exploiter pleinement le style de contenu que nous vous proposons de faire.

.......................


I/ Créer une page d'accueil à votre forum


Dites vous bien que cette page doit avoir une utilité avant de vous lancer dans son élaboration ! Posez-vous les bonnes questions en vous mettant aussi dans le rôle d'un visiteur tombant sur votre forum. Pourquoi faire cette page ? Qu'apporte-t-elle ? Ne va-t-elle pas être un frein à la navigation de l'invité ?
En effet, il est important de ne pas faire une telle page juste histoire de paraitre plus "pro" en faisant seulement un bouton pour accéder au forum, car dans ce cas cela ne sert à rien, si ce n'est à exaspérer le visiteur venu chez vous dès la première seconde.

Voici des exemples de ce que vous pouvez mettre sur cette page :
• une vidéo de présentation du forum : ça bouge, y'a de la musique, si c'est bien fait c'est aussi très attractif, ça peut aussi planter votre scénario de jeu de rôle par exemple...
• une présentation écrite rapide du forum : faites bref afin de ne pas déjà lasser le visiteur ! Mettez le tout sur une illustration (légère !), évitez les format flash trop long aussi...
• une navigation globale : mettre des liens comme "Jouer" (lien forum), "créer son personnage" (lien présentation, ou règle des présentations), "FAQ" (la FAQ du forum ou un topic de questions/suggestions ouvert aux invités), ou "Site" (lien de votre site si vous en avez un... ce qui pourra éventuellement être le cas à la fin de ce tuto^^) est une bonne idée pour déjà guider l'invité. Attention toutefois à ne mettre que l'essentiel. Si la navigation ne fait que le ralentir dans son parcours du forum il risque de fermer la page au lieu de cliquer sur le bouton inscription !

C'est très simple ! Nous allons commencer par créer une page qui ne sera pas vide, mais comportera déjà votre thème de forum ainsi que sa navigation. Seul le contenu aura disparu et donc vous serez libre d'y ajouter ce que vous voulez. Pour cela, entrez dans votre panneau d'administration et suivez ce trajet :

PA > (onglet) Modules > HTML > Gestion des pages HTML

Vous tombez donc sur un cadre pour le moment vide contenant seulement un bouton "Créer une nouvelle page HTML".

Cliquez dessus pour créer votre page. Vous être désormais là dessus :



A la première question "Voulez-vous utiliser le haut et le bas de page de votre forum ?" :
• cochez oui : Cela vous permettra de garder l'apparence de votre forum (thème : bannière, navigation, pied de page si vous avez) tout en ayant une page "vide" que vous pourrez remplir.
• cochez non> : Cela vous permet d'avoir une page blanche que vous devrez remplir vous-même, mais attention ! cette page vous devrez la coder en langage html complet !
Je conseille donc dans un premier temps de mettre oui à cette question.

A la seconde question "Utiliser cette page en tant que page d'accueil ?" : cochez oui. Cela vous permet d'afficher cette page en temps que page d'accueil de votre forum.

Mettez ensuite un texte basique dans le cadre de saisie afin d'avoir un aperçu de sa mise en forme et de son positionnement. Voici le genre de texte servant à cela :

Code:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna. Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.

Validez votre page.

Revenez ensuite sur la page "Gestion des pages HTML" et vous observez ceci :


Le fait qu'il y ait une couleur de fond dans la ligne de votre page signifie qu'elle est utilisée en temps que page d'accueil de votre forum, indication d'ailleurs précisée en bas de la liste des pages.

Par la suite, ce symbole permet de modifier la page (Edition), ce symbole permet de supprimer la page, et ce symbole permet d'avoir un aperçu réel de la page.

=> Afficher une vidéo
Pour afficher une vidéo sur cette page il vous faut tout d'abord choisir celle que vous souhaitez mettre. Ce sujet n'étant pas là pour vous apprendre à en réaliser une, nous partons du principe qu'elle est déjà faite et hébergée sur Youtube, Dailymotion ou autre plateforme du même genre. Affichez donc la page de votre vidéo et sélectionnez le code flash de la vidéo présent sous la forme :

Code:

<object width="480" height="385"><param name="movie" value="http://www.youtube.com...."></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com....." type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Placez simplement ce code sur votre page.

Rappel : la balise

Code:

<center></center>

permettent de centrer votre vidéo, placez le code de la vidéo entre les particules.


=> Faire une navigation
Sachant qu'une navigation se trouvent déjà sur votre page si vous choisissez de garder la mise en forme de votre forum, ajouter des liens fera peut-être trop et risque de "perdre" le visiteur. Vous pouvez donc choisir d'afficher une page blanche et vierge et d'y mettre votre navigation. Dans ce cas, je vous conseille un moyen simple pour faire votre navigation :
- créez une image comportant les liens voulus de sorte qu'ils soient "découpables"
- découpez l'image en carré qui une fois côté à côté reconstitueront l'image
- donnez à chaque partie devant être liée un lien vers la page souhaitée

Autres possibilités :
• utiliser le flash (faisable avec Imageready)
• utiliser uniquement une image de base puis du mapping html (voir le cours sur le Site de Never-Utopia)

=> Autres idées ?
• Afficher une carte type mappemonde qui représente votre contexte de jeu

II/ Faire votre page de "règles du jeu" sur une page web


Et bien tout simplement car votre règlement est "fixe", il ne demande généralement pas d'interaction entre membres, or un forum est fait de part sa logique seulement pour cela. Des règles de vie, de jeu ou autres sont donc mises à jour par le staff du forum, mais ces sujets là sont toujours verrouillés. Pourquoi donc ne pas les mettre sur une page entière ce qui permettra :
• une meilleure visibilité et donc une lecture agréable puisque la largeur du texte n'est pas "mangé" par la colonne de l'avatar du membre postant
• d'avantage de possibilité de mise en page avec le tout plus aéré
• une page moins longue et donc une possibilité plus simple de faire tout le règlement sur une même pas et ainsi épargner les membres ayant une connexion lente de devoir afficher plusieurs pages pour avoir toutes les parties du règlement.

Pour faire cela, il nous faut créer une page web, comme pour la partie précédente. Je rapelle les étape de cette création :

PA > (onglet) Modules > HTML > Gestion des pages HTML

Cliquez sur "Créer une nouvelle page HTML".

=> Voulez-vous utiliser le haut et le bas de page de votre forum ? oui
=> Utiliser cette page en tant que page d'accueil ? non

Validez

Si votre règlement était déjà écris vous n'avez qu'à faire un copier coller, attention tout de même à certains problèmes de mise en page qu'il vous faudra peut-être corriger.
En cliquant sur l'icone vous pourrez avoir l'éditeur html qui vous permettra de mettre facilement votre texte en forme. Pour ceux ayant quelques bases en html je vous conseille de faire la mise en forme à la main puisque des effets de style ne sont pas présents dans l'éditeur.






Mettre le lien de la page dans la navigation
Il faut ensuite penser à bien mettre le lien de cette page html quelque part bien en vue sur le forum afin que les membres puissent l'avoir très facilement à portée de clic... L'une des solution est donc de l'afficher directement dans la navigation de votre forum !
Pour cela, allez dans :

PA > (onglet) Affichage > Page d'Accueil > En-tête & navigation

Vous avez à présent sous les yeux la liste des liens de votre navigation, et tout en bas de cette liste le bouton "Ajouter un menu personnalisé". Cliquez sur ce bouton pour créer un lien supplémentaire dans votre barre de navigation.
On vous demande :

Menu : nom de ce menu
Image : adresse de l'image de ce lien (non obligatoire)
Texte : texte du lien, du titre ou lien alternatif de ce menu
URL de redirection : le lien de la page voulue

Permissions : sélectionnez qui peut voir ce lien
Affichage : cochez si vous souhaitez que la page s'ouvre dans un nouvel onglet.

Autres solutions ?
• mettre le lien sur la page d'accueil de votre forum
• mettre le lien dans la description de la catégorie de présentation des membres/joueurs (par exemple)
• mettre le lien dans les wigets (voir le sujet "créer des wigets" dans ce forum pour plus d'info.)

merci *-*

Merci

Merci

Merci !

Merci du partage

Merci !

merci beaucoup

Miiiiiiiiciiiiiiii

Merci beaucoup ♥

merci ♥

Merci !