Partie 4 - TP 1 : Création d'une page d'accueil HTML pour un forum
Dans ce TP on va gentiment mettre en place une "page d'accueil" sur votre forum.
... Une page d'accueil ? Mais... y'en a déjà une sur mon forum, avec mon beau tableau de news, le staff, et tout et tout !
Tout à fait, d'ailleurs en France on s’emmêle un peu dans les termes et on appelle "Page d'accueil" plusieurs choses :
- ça peut être simplement votre "index", ou la première page de votre forum, l'"Accueil" si vous préférez
- c'est aussi le bloc d'information qui se trouve au dessus de vos catégories, là où vous mettez vos infos du genre "news, staff, événements, recherches de personnages", etc...
- dans notre cas, ça pourra également être la page sur laquelle tombent vos visiteurs lorsqu'ils tapent l'adresse "nue" de votre forum (j'entends par adresse nue le http://xxxxxx.com/net/fr)
Pour faire une telle page il faudra créer une page HTML, ce qui est possible dans votre panneau d'administration, et y installer une image présentant votre forum, ainsi qu'un bouton d'entrée.
Attention cependant car l'utilisation d'une page d'accueil comme ça ajoute "un clic" à votre visiteur. En effet, avant cela il arrivait directement sur le forum, alors qu'avec cette page il devra cliquer sur "entrer" (ou texte de votre choix) pour accéder au forum. Cela peut paraitre rien, un détail, mais le nombre de clics dans une visite est important, même inconsciemment, pour tout visiteur. S'il y a trop d'intermédiaires, il risque de se s'impatienter et de partir.
Création de la page html
Commençons donc par créer notre page. Pour cela, allez dans l'onglet "Modules" de votre panneau d'admin. Tout en bas de la colonne de gauche se trouve : "HTML & Javascript". Cliquez sur "Gestion des pages html".
Dans notre cas, il nous en faut qu'une seule, ça sera simple à gérer.
Faites donc : créer une nouvelle page html. Vous obtenez ce cadre :
Le premier champ est le titre de votre page. Ce sera également ce qui sera dans l'adresse de la page, donc évitez de mettre quelque chose de trop long comme "ma super page d'accueil de la mort qui tue", car ça allongerait aussi l'adresse x). Restez simple, mettez "accueil" ou "bienvenue".
Le second champ vous demande si vous souhaitez utiliser le haut et le bas de votre forum. L'idée dans notre cas c'est de ne PAS les utiliser. Cochez donc "non". On vous averti en dessous que si vous cochez "non" vous devrez utiliser le "doctype" et autres termes barbares de mise en page html, mais rassurez-vous, je vous donnerez tout ça.
Le troisième champ vous demande si vous voulez utiliser cette page en "page d'accueil" et il faut bien évidemment mettre "oui". Par contre, on vous averti qu'il fautdra alors mettre un lien vers "forumactif", le site source de la création de forum, et pas la peine de penser y échapper, la page ne peut pas se valider en temps que page d'accueil si ce lien n'est pas dans votre code. Par ailleurs, inutile de chercher à le masquer, respectez FA et mettez-le proprement, ça passera très bien.
Le quatrième champ est celui qui nous intéresse et auquel nous allons nous attaquer avant d'installer la page en temps qu'accueil. Ce champ est votre code, il doit contenir votre mise en forme. Nous allons faire quelque chose de simple dans un premier temps.
Préparation de la page : DOCTYPE
Je ne vais pas trop vous ennuyer avec du html pur dans lequel j'ai moi-même encore beaucoup à apprendre, je vais simplement vous donner la structure type que DOIT avoir toute page html, de base.
- Code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de votre page</title>
<!-- meta -->
<meta name="description" content="Bienvenue !" />
<meta name="keywords" content="liste de vos mots clefs" />
<meta name="author" content="votre pseudo" />
<!-- mon CSS -->
</head>
<body>
Contenu de ma page.
</body>
</html>
Validez votre page. Vous avez ensuite dans votre liste de page (qui ne contient théoriquement qu'une page^^) quelque chose comme ceci :
Vous avez là dans l'ordre : le numéro de votre page, l'adresse permettant de linker cette page, le titre que vous lui avez donné, la date de modification puis les actions que vous pouvez faire sur cette page, à savoir la modifier, la voir ou la supprimer (en cochant la case puis en cliquant sur "supprimer" en bas de liste).
Vous allez être curieux et vous allez cliquer sur la petite loupe qui permet d'afficher la page... Et là, si vous avez copié tel quel le code que je vous ai donné ça va vous afficher ceci :
C'est pas terrible, n'est-ce pas ? Tout le code mis actuellement ne sert qu'à préparer la page, mais concrètement ce qui s'affiche c'est ce qui se trouve entre les balises "body" (corps) et donc pour le moment seulement notre texte, sans mise en forme.
Inclure du CSS dans la page
Nous allons nous y attaquer dès maintenant et mettre l'emplacement du css dans notre page. Sachez tout d'abord qu'il y a plusieurs manières d'afficher un css sur une page html (quatre méthodes, disons) et que celle que je vais vous proposer là est pratique lorsque vous avez peu de pages et un css court. Si vous espérez ajouter 20 pages html à votre froum et créer une sorte de "mini-site" il faudra procéder autrement et ce TP n'est pas celui qu'il vous faut !
Sur notre page, nous allons afficher notre css dans la balise "head". Je vous ai préparé la zone avec l'annotation :
- Code:
<!-- mon CSS -->
Placez simplement en dessous ceci :
- Code:
<style type="text/css">
</style>
C'est entre ces balises que nous pourrons placer toute notre feuille css, de la même façon que lorsque vous l'écrivez dans la feuille de CSS de votre forum. Vous comprenez maintenant que, forcément, si votre feuille fait 2000 lignes ça va vite devenir compliqué. Là, notre css ne sera pas très long donc il est parfaitement possible de l'afficher ainsi.
Tentons de mettre une couleur de fond à notre page : mettez ceci dans votre css :
- Code:
<style type="text/css">
body
{
background: #000000;
}
</style>
Et cliquez sur "prévisualisation" en bas de votre cadre. Vous devez avoir une page noire au lieu de votre page blanche ! Tout votre css fonctionnera ainsi.
Bien ! Maintenant que nous avons préparé notre page, il va falloir remplir tout ça, et afin que ce TP puisse servir autant aux personnes qui ont un logiciel de retouche d'images que ceux qui n'en ont pas ou ne veulent pas s'en servir, je vais tâcher d'être simple quant à la réalisation de l'image.
Composition de la page
Afin que ce soit le plus facile à réaliser possible, les images avec lesquelles je vais vous proposer de réaliser cette page sont des renders, trouvés sur google, tout simplement. L'idée est donc de choisir les personnages ou les objets qui représentent le mieux votre univers/contexte et de les placer là où j'afficherais mes images.
Une fois le principe de placement des éléments compris, vous pourrez très facilement afficher plusieurs personnages, ou bien un seul, agrandir votre cadre texte, ou placer un autre objet devant... Tout est possible, le tout est de comprendre comment les placer sur la page.
Voici le résultat que j'obtiendrais à la fin de ce tutoriel, à adapter par la suite à votre choix concernant les couleurs, les personnages et leur disposition :
Le matériel qu'il vous faut pour cela est minime puisque tout se passera sur votre page html, y compris l'écriture du code lui-même et sa prévisualisation. Il peut être nécessaire de posséder un logiciel de retouche d'image pour redimensionner les renders s'ils sont trop grands, mais certains hébergeurs le proposent aussi.
Par la suite, rien ne vous empêche de réaliser votre fond, vos images, votre montage, ou bien d'en faire la commande. L'essentiel du tutoriel est de vous montrer concrètement comment placer les éléments avec une problématique constante : la résolution d'écran variable.
Résolution d'écran : rappel des positionnements et des unités de largeur
Si vous avez quelques bases en codage vous savez peut-être qu'il existe plusieurs positionnement pour un objet de type "bloc", à savoir :
- la position "relative" : l'objet se placera par rapport aux autres, en tenant compte de leur tailles et de leur marge dans la page ou le corps où ils se trouvent
- la position "absolute" : l'objet se placera par défaut en haut à gauche du bloc dans lequel il est (ce bloc peut être la page elle-même)
- la position "fixed" : que je vous conseille d'éviter dans un premier temps, car elle place l'objet par rapport à la page totale, et ceux où qu'il se trouve, même enfermé dans pleins de blocs
Le problème majeur de la réalisation d'une page d'accueil propre mais un minimum travaillée c'est la position des éléments par rapport à l'écran de l'utilisateur. En effet, tout vos visiteurs n'auront pas le même écran, la même taille ni résolution. Si vous placez un élément avec des marges classiques, il peut être centré sur VOTRE écran, mais totalement décalé sur le leur.
Pour palier à cela nous allons combiner un positionnement précis et des placements/marges spécifiques.
Le positionnement choisi sera l'absolute, parce qu'il place l'objet dans en endroit précis qui est le même pour tous : en haut à gauche. A partir de ce point, ce sera à nous de le centrer.
Le centre... C'est ça le problème. Centrer un élément dans une page quelle que soit sa résolution, c'est ce que ce tutoriel va vous apprendre, entre autre. Nous verrons la théorie, puis la pratique, et vous verrez, même si vous ne comprenez pas tout directement, un jour tout deviendra parfaitement clair.
Pour finir ce petit rappel, j'ajoute simplement qu'il y a deux manières de régler les distances (tailles, marges...) des blocs : le pixel et le pourcentage. Le pourcentage est complexe à utiliser car il se base sur la largeur totale de la page. Le pixel est fixe sur tout les écrans, mais attention car un bloc centré dans une page avec des pixels ne le sera pas sur un autre écran.
Je sens que je vous perd... Restez-là ! Je vous assure que tout va bien se passer x).
Juste un petit passage théorique pour ceux qui voudraient comprendre, pour les autres bah passez à l'application hein
. Théorie : méthode pour centrer un élément dans une page
J'entends par "page" une page entière d'écran, votre "body" finalement. Dans un corps de page fixe, par exemple votre forum, si vous voulez centrer quelque chose, vous attribuez une largeur à votre bloc, vous lui mettez un "margin: auto" et hop c'est plié, votre bloc et centré, on en parle plus.
Pour centrer un bloc dans une page, ou de manière plus générale pour placer un élément dans cette page de manière à ce qu'il soit au même endroit pour tous, c'est plus compliqué. Voici le procédé théorique avec quelques schémas, histoire que je vous balance pas les codes tout faits sans rien vous expliquer alors qu'il y aura des "margin" étranges à l'intérieur.
Prenons notre page web vierge :
Oui, c'est un rectangle blanc, tout à fait, c'est CA votre page x). Si vous tentez d'écrire quelque chose, vous allez votre texte en haut à gauche, comme si c'était une feuille de papier, sans marge sans rien, généralement vous commencez de ce côté.
Si vous placez un bloc de contenu pour du texte, ça sera la même chose, vous allez vouloir lui donner une taille, bien, une couleur de fond aussi, mais il sera placé au même endroit :
Voilà, mon bloc texte est présent, mais il n'est pas centré. Si je décidais de le centrer en lui mettant une marge gauche en pixel, pour le décaler, je vais pouvoir, bien sûr, mais il sera centré que pour moi et tout ceux ayant ma résolution d'écran. Tout les autres l'auront décalé, peut-être même à moitié caché hors de la page.
Alors comment faire ?
L'idée est de commencer par placer ce bloc en absolute, puis de bien clarifier les choses avec votre navigateur en le mettant totalement dans le coin.
Euh...okay, mais on voulait pas le centrer justement à la base le bloc là ?
Si, mais pour centrer quelque chose il faut en définir la taille et la position de base par rapport à l'écran, c'est ce que nous avons fait là. Pour cela, il a fallu un code comme ceci :
- Code:
#mon_bloc
{
position: absolute;
width: 900px;
height: 500px;
top: 0;
left: 0;
}
Le "top: 0" et "left: 0" permettent de coller le bloc en haut et à gauche. Dans le même principe, on aurait pu le coller en bas à droite, par exemple, avec "bottom" et "right".
Maintenant, il s'agit de le centrer, et pour cela nous savons que les pixels ne sont pas bons, mais les pourcentages ne le sont pas forcément non plus. 30% d'une page de 1400px de large ce n'est pas la même chose que 30% d'une page de 1024px de large. Dans le premier cas ça correspond à 420 pixels, et dans le second cas à environ 307 pixels. Même en décalant avec des pourcentages il y aurait un écart. Il faut alors trouver une autre solution, et ça sera le 50%.
Alors oui, je sais, 50% c'est le même problème, selon la résolution ça ne correspond pas au même nombre de pixel, mais nous, ce qu'on veut, c'est juste CENTRER notre bloc, non ? Alors si, à la place de lui mettre un "left: 0" on lui met un "left: 50%" ça donne ça :
Certes, ce n'est pas centré, mais nous avons un nouveau repère : le décalage a permis de mettre le bord gauche de notre bloc au centre de la page. Le centre est sur mon schéma représenté par la ligne verticale grise. Voici donc le code actuel :
- Code:
#mon_bloc
{
position: absolute;
width: 900px;
height: 500px;
top: 0;
left: 50%;
}
Puisque notre bloc est en pixel, il est de la même taille sur tout les écran, n'est-ce pas ? Donc nous avons la possibilité de lui mettre une marge en pixel qui sera la même pour tout le monde. Il faut donc reculer ce bloc de l'équivalent de la moitié de sa taille :
Voici donc le procédé pour centrer un élément, quel que soit la taille de l'écran, sur une page de site vierge. C'est de cela dont nous allons nous servir pour déterminer notre bloc de contenu, afin qu'il soit bien placé pour tout vos visiteurs.
Délimiter le corps de page
Dans notre cas il ne s'agira pas d'un corps de page classique, long avec un scroll sur le bord droit, mais juste d'un bloc, centré horizontalement, pour que nos éléments soient au milieu de la page.
Mon exemple précédent était avec une position absolute, et c'est d'ailleurs la position qu'auront tout mes autres éléments, mais j'ai choisi de mettre le bloc "corps" en position "fixed". Oui, c'est un positionnement à éviter, mais en l'occurrence je le trouve plus logique, du moins pour le résultat de ce TP, car il permet de ne pas avoir de scroll. Cela signifie qu'il faudra faire attention à ce que rien d'important ne dépasse, même pour les petits écrans.
Cependant, pour une page d'accueil, je trouve le scroll désagréable, c'est pourquoi j'ai choisi le "fixed", du moins pour le premier bloc.
Entrons (enfin !) dans le vif du sujet et mettons...notre couleur de fond de page
. Là, rien de compliqué, j'ai choisi un gris clair, optez pour celle de votre choix, rien de trop agressif par contre. Prenez votre page html et mettrez dans votre CSS :
- Code:
<style type="text/css">
body
{
width: 100%;
background: #c9c9c9;
}
</style>
Normalement, si vous prévisualisez, vous aurez la couleur choisie en fond de page.
Plaçons maintenant notre bloc. Celui-ci, pour être vu par tous, aura une largeur de 980px et une hauteur de 700, en sachant qu'en bas rien d'important ne sera présent, puisqu'il ne faut pas oublier que la page internet est très réduite en hauteur avec le bandeau de haut de page parfois assez imposant.
Créons donc tout d'abord notre bloc en html, donc dans la partie "body", comme ceci :
- Code:
<div id="corps"></div>
Ce qui donne dans ma page :
- Code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de votre page</title>
<!-- meta -->
<meta name="description" content="Bienvenue !" />
<meta name="keywords" content="liste de vos mots clefs" />
<meta name="author" content="votre pseudo" />
<!-- mon CSS -->
<style type="text/css">
body
{
width: 100%;
background: #c9c9c9;
}
</style>
</head>
<body>
<div id="corps"></div>
</body>
</html>
Vous l'avez compris, tout ce qui est "html" (éléments eux-mêmes) sont entre les balises "body", et tout ce qui est css (mise en forme de ces éléments) est dans la partie "head", entre les balises de CSS "style".
Il est donc temps d'appliquer ce que nous avons vu plus haut et centrer proprement notre bloc :
- Code:
#corps
{
position: fixed;
width: 980px;
top: 0;
left: 50%;
margin-left: -490px;
height: 700px;
background: black;
}
Le positionnement fixed est mon choix, je le rappelle, vous pouvez parfaitement préférer le "absolute". La seule chose qui changera sera l'apparition d'une barre de scroll verticale normale si la hauteur du contenu dépasse celle de la page. Ca peut être un meilleur choix que le fixed si vous avez besoin d'une page d'accueil comprtant beaucoup d'éléments et donc plus haute...
Le top colle le bloc en haut, le "left: 50%;" le décale de la moitié de la page donc colle sa bordure à la ligne médiane de la page, et le margin-left négatif le recule pour qu'il soit centré, avec une distance en pixel correspondant à la moitié du bloc.
(Pour information il y a une calculette sur votre pc ou sur google en tapant "calculette" XD).
Le "background: black" ici ne sert qu'à repérer le bloc et mieux le placer. Une fois qu'il est placé, vous pouvez enlever la couleur de fond.
Bien ! Maintenant, l'avantage que nous avons c'est qu'en mettant tout les éléments de notre accueil DANS notre bloc, on sait qu'ils se placeront par rapport à lui et donc nos marges en pixel seront à nouveau possible, puisque ce bloc a une largeur fixe en pixel.
Placer les éléments
Renders de fond
J'ai tout d'abord choisi de mettre deux renders en fond, qui seront donc placés derrière l'ensemble. Ces renders sont entiers (les personnages ne sont pas coupés) et c'était préférable, sans quoi j'aurais du la mettre derrière mon bloc de texte pour que celui-ci cache le bas du corps absent.
Commençons pas mettre nos blocs, vides, qui contiendront ensuite nos renders. Si vous avez bien suivi, nous devons placer ces blocs dans... le body, exact !
- Code:
<div id="corps">
<div id="render1"></div>
<div id="render2"></div>
</div>
Constatez que mes deux blocs sont bien DANS mon bloc "corps", qui a été centré juste avant. Si vous prévisualisez, vous ne verrez rien car il faut mettre en forme ces blocs avec en guise de fond l'image de notre render. Pour cela, hébergez votre render sur un hébergeur d'image. Vous devez ensuite attribuer pour chaque bloc sa largeur et hauteur qui doivent être tout simplement ceux de votre image ! Pensez également à placer ces images en absolute :
- Code:
#render1
{
position: absolute;
width: 385px;
height: 700px;
background: url(http://img11.hostingpics.net/pics/171648render2.png);
}
#render2
{
position: absolute;
width: 441px;
height: 700px;
background: url(http://img11.hostingpics.net/pics/927628render3.png);
}
Oui, vos deux blocs et donc vos deux images se superposent, c'est parfaitement normal puisqu'elles sont en "absolute" et donc que les blocs ne tiennent pas compte de la présence d'autres éléments, ils s'ignorent mutuellement x). Cependant, ils sont tout les deux placés en haut à gauche de notre bloc corps, et c'est pour cela qu'on va pouvoir leur mettre des marges.
Vous allez donc décaler vos blocs avec des "margin", de gauche et/ou du haut, selon ce que vous voulez. Vous pouvez même faire sortir légèrement vos images du bloc corps, elles se seront pas coupée par son bord et dans le cas où elles sortiraient un peu d'un écran petit ce ne sont que des images, donc rien de réellement essentiel.
- Code:
#render1
{
position: absolute;
width: 385px;
height: 700px;
background: url(http://img11.hostingpics.net/pics/171648render2.png);
margin-left: 700px;
}
#render2
{
position: absolute;
width: 441px;
height: 700px;
background: url(http://img11.hostingpics.net/pics/927628render3.png);
margin-left: -100px;
}
Voici le placement, il permettra d'avoir un bloc au centre, devant les deux images, dans lequel pourra être placé votre petit texte d'intro, votre vidéo de présentation du forum, ou ce que vous voulez.
Placement du bloc texte
Voici donc notre bloc-texte, ou bloc-contenu puisque c'est à vous de voir ce que vous souhaitez y mettre. Créons tout d'abord ce bloc dans le "body", toujours dans notre corps :
- Code:
<div id="corps">
<div id="render1"></div>
<div id="render2"></div>
<div id="contenu"></div>
</div>
Puis mettons lui une mise en forme, une taille notamment, mais aussi une couleur de fond, bordure, et tout ce que vous souhaitez :
- Code:
#contenu
{
position: absolute;
width: 660px;
padding: 20px;
height: 360px;
background: #e7e7e7;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 10px #878787;
-o-box-shadow: 0px 0px 10px #878787;
-moz-box-shadow: 0px 0px 10px #878787;
-htm-box-shadow: 0px 0px 10px #878787;
-webkit-box-shadow: 0px 0px 10px #878787;
border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-htm-border-radius: 20px;
-webkit-border-radius: 20px;
color: #696969;
text-shadow: 1px 1px 0px #f7f7f7;
font-family: helvetica;
text-align: justify;
}
Voici le résultat de ce code :
Explications : le "padding" est important, il s'agit je le rappelle de la marge intérieure, or si vous souhaitez mettre du texte il est toujours mieux d'en avoir une, plus ou moins importante, de sorte que le texte ne soit pas collé au bord, ce qui n'est pas esthétique du tout. Mon padding est important car j'ai arrondi les angles de mon bloc.
Vous constatez donc que le bloc, placé en absolute, n'est pas centré mais qu'il est logiquement venu se place en haut à gauche. Il va falloir le centrer...et comme il est en absolute, le "margin: auto" ne fonctionnera pas, il va falloir utiliser notre première méthode :
- Code:
#contenu
{
position: absolute;
width: 660px;
padding: 20px;
height: 360px;
left: 50%;
margin-left: -350px;
margin-top: 120px;
background: #e7e7e7;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 10px #878787;
-o-box-shadow: 0px 0px 10px #878787;
-moz-box-shadow: 0px 0px 10px #878787;
-htm-box-shadow: 0px 0px 10px #878787;
-webkit-box-shadow: 0px 0px 10px #878787;
border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-htm-border-radius: 20px;
-webkit-border-radius: 20px;
color: #696969;
text-shadow: 1px 1px 0px #f7f7f7;
font-family: helvetica;
text-align: justify;
}
J'ai donc appliqué, comme si j'étais dans une page, un left 50%, puis un margin négatif de la moitié de la largeur...
Euh, non. 350 c'est la moitié de 700, pas de 660. Bouuuuh le Cap'tain s'est gourré ! =O
Certes, la largeur indiquée est de 660, mais il ne faut pas oublier que j'ai 20 pixel de marge intérieure... Et oui, ça se complique avec le padding ! Il faut en tenir compte, et comme sur la largeur cette marge va se trouver à gauche et à droite, elle ajoute 40 pixel à la largeur totale, ce qui fait...
... 700, ok ok j'ai compris U_U
Faites donc attention à vos "padding" dans ce genre de mise en forme, pour centrer vos blocs !
Une sécurité : le z-index
Nous avons notre cadre texte et vos deux blocs images. Il est bien sûr important dans le cas présent que les images soient derrière le cadre. C'est le cas ici, mais certains navigateurs sont plus tatillons que d'autres sur le positionnement et pourraient ne pas comprendre que le bloc texte doit être devant. Nous allons donc l'indiquer, juste histoire d'être sûr.
Pour cela, il faut utiliser le "z-index". C'est une propriété qui sert à définir l'ordre des éléments, à savoir lequel est au-dessus et lequel est en dessous. Plus la valeur indiquée est grande, plus l'élément de trouvera au dessus des autres.
Voici le CSS de nos blocs et renders avec ce z-index :
- Code:
#render1
{
position: absolute;
z-index: 1;
width: 385px;
height: 700px;
background: url(http://img11.hostingpics.net/pics/171648render2.png);
margin-left: 700px;
}
#render2
{
position: absolute;
z-index: 1;
width: 441px;
height: 700px;
background: url(http://img11.hostingpics.net/pics/927628render3.png);
margin-left: -100px;
}
#contenu
{
position: absolute;
z-index: 2;
width: 660px;
left: 50%;
margin-left: -350px;
margin-top: 120px;
padding: 20px;
height: 360px;
background: #e7e7e7;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 10px #878787;
-o-box-shadow: 0px 0px 10px #878787;
-moz-box-shadow: 0px 0px 10px #878787;
-htm-box-shadow: 0px 0px 10px #878787;
-webkit-box-shadow: 0px 0px 10px #878787;
border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-htm-border-radius: 20px;
-webkit-border-radius: 20px;
color: #696969;
text-shadow: 1px 1px 0px #f7f7f7;
font-family: helvetica;
text-align: justify;
}
Le z-index 2 du corps indique que celui-ci en forcément au dessus des deux blocs "renders".
Attention : pour indiquer un z-index il faut absolument que votre élément ait une "position" de précisé.
Vous pouvez d'ores et déjà mettre votre texte, ou un texte de base "lorem ipsum" comme moi, juste histoire de voir si votre couleur de texte convient.
J'ai personnellement ajouté une image, pourquoi pas, vous pouvez très bien mettre un gif pour faire plus vivant. Je vous donne simplement le code cette fois, rien de complexe :
HTML :
- Code:
<span class="illustration"><img src="http://fc01.deviantart.net/fs71/f/2011/237/1/1/lightning_ff_xiii_2_by_splash_123-d47rx12.gif" alt="" /></span>
CSS :
- Code:
.illustration img
{
display: block;
width: 300px;
margin: 10px auto;
border: 2px solid #ffffff;
}
Ajout du titre/nom du forum
Parce qu'il est toujours mieux de savoir sur quelle page on est tombé et quel est le type de forum représenté au premier coup d'oeil sans lire tout le texte d'intro', nous allons ajouter un titre qui va se composer en deux parties :
- un "Bienvenue sur" qui sera en petit, plus fondu
- un "Nom du Forum" qui sera plus gros et d'une couleur plus visible
Mettez tout d'abord ces deux blocs dans la partie htm, j'ai choisi de la mettre en premier, juste après l'ouverture du "corps" comme vous pouvez le voir :
- Code:
<div id="corps">
<div id="titre">Bienvenue sur</div>
<div id="titre2">"Nom du Forum"</div>
[...]
Passons à leur mise en forme, je vous donne le code que je vous explique ensuite :
- Code:
#titre
{
position: absolute;
width: 980px;
margin-top: 40px;
z-index: 1;
font-size: 28px;
font-family: helvetica;
font-variant: small-caps;
font-weight: bold;
color: #a2a2a2;
text-align: center;
text-shadow: 1px 1px 0px #dbdbdb;
}
#titre2
{
position: absolute;
width: 980px;
margin-top: 60px;
z-index: 1;
font-size: 46px;
letter-spacing: 4px;
font-family: impact;
font-variant: small-caps;
font-weight: bold;
color: #2871a9;
text-align: center;
text-shadow: 1px 1px 0px #dbdbdb;
}
Nous avons donc toujours notre position "absolute", si vous tentez de l'enlever vous verrez que tout vos autres éléments descendent puisque votre titre les poussera vers le bas de sa hauteur.
La largeur indiquée est celle du bloc "corps", tout simplement.
La marge permet de ne pas avoir le texte collé en haut de page, ce qui est plus esthétique.
Le z-index que nous retrouvons ici assure que le texte soit par en dessous du bloc cadre même si dans le cas présent ce n'est pas utile car ils ne se chevauchent pas.
Pour tout le reste il s'agit simplement de la mise en forme, donc la couleur du texte etc...
La largeur indiquée est celle du bloc "corps", tout simplement.
La marge permet de ne pas avoir le texte collé en haut de page, ce qui est plus esthétique.
Le z-index que nous retrouvons ici assure que le texte soit par en dessous du bloc cadre même si dans le cas présent ce n'est pas utile car ils ne se chevauchent pas.
Pour tout le reste il s'agit simplement de la mise en forme, donc la couleur du texte etc...
Une image par dessus le bloc-contenu
Histoire de compliquer un peu les choses, et surtout de vous montrer que c'est possible, j'ai ajouté un render (bloc) en plus de mes deux images déjà présentes, et je l'ai cette fois placé au dessus du bloc texte. Alors attention évidemment à ne rien cacher d'important avec cette image.
Le principe est le même que pour tout le reste, l'image est au départ un bloc placé dans la page, l'image est en fond, et le tout est ensuite décalé avec des marges.
Mon bloc dans le html :
- Code:
<div id="render3"></div>
Je l'ai placé juste avant la fermeture du "corps".
Voici sa mise en forme, expliquée juste après :
- Code:
#render3
{
position: absolute;
z-index: 3;
width: 400px;
height: 500px;
background: url(http://img11.hostingpics.net/pics/441002render1.png);
margin-top: 250px;
margin-left: 600px;
}
Nous avons donc notre bloc en absolute, comme les autres, l'image mise en fond, là aussi comme les autres, mais cette fois le z-index permet de s'assurer que l'image sera bien devant le bloc de contenu et non derrière, le chiffre doit donc être plus élevé que les renders (1) et que le bloc texte (2).
Les marges sont bien sûr là pour placer l'image où je le souhaite, pour ne pas cacher de texte.
Le bouton "Entrer"
Il est VITAL ! C'est tout de même lui qui mènera vos membres sur le forum. Sans lui ils ne pourront pas y accéder, sauf en tapant "/forum" dans l'adresse du navigateur et je ne suis pas certains que tous y penseront...
Nous allons donc le mettre en bas de notre bloc :
- Code:
<div id="contenu">Ex his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum. quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos... statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare.
<span class="illustration"><img src="http://fc01.deviantart.net/fs71/f/2011/237/1/1/lightning_ff_xiii_2_by_splash_123-d47rx12.gif" alt="" /></span>
<div id="entrer"><a href="/forum">Entrer</a></div>
</div>
(C'est ici la "div" portant le nom "entrer"). Vous pouvez constater que l'adresse que j'ai indiquée ne comporte que le "/forum", normalement la fin de l'adresse, en fait. C'est normal et logique, car du moment que vous êtes sur VOTRE forum, vous n'êtes pas forcé de mettre toute l'adresse, vous pouvez mettre que la fin, à partir du "slash". Du coup, théoriquement, vous n'avez même pas besoin de mettre votre adresse, ce morceau là mênera systématiquement sur le forum correspondant : le vôtre, chaque fois.
Voici le CSS que j'ai appliqué, j'ai mis en forme le bloc, puis à l'intérieur le lien, avec un changement de couleur en "hover" (survol) :
- Code:
#entrer
{
width: 200px;
height: 40px;
margin: 20px auto;
text-align: center;
background: #f2f2f2;
border: 1px solid #ffffff;
box-shadow: 0px 0px 10px #b1b1b1;
-o-box-shadow: 0px 0px 10px #b1b1b1;
-moz-box-shadow: 0px 0px 10px #b1b1b1;
-htm-box-shadow: 0px 0px 10px #b1b1b1;
-webkit-box-shadow: 0px 0px 10px #b1b1b1;
border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-htm-border-radius: 10px;
-webkit-border-radius: 10px;
}
#entrer:hover
{
background: #c9c9c9;
}
#entrer a
{
font-size: 26px;
text-decoration: none;
letter-spacing: 4px;
font-family: impact;
font-variant: small-caps;
font-weight: bold;
color: #2871a9;
text-align: center;
text-shadow: 1px 1px 0px #dbdbdb;
}
#entrer a:hover
{
color: #ffffff;
text-shadow: 1px 1px 0px #2871a9;
}
Je pense que ces codes sont assez clairs, ils mettent en forme le bloc simplement, puis le lien avec couleur et ombre. Si vous souhaitez que la transition pour le hover soit lente, il suffit d'ajouter ceci :
- Code:
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
Pensez bien à le mettre dans chaque élément, hover et "normal".
Vous pouvez également aller voir la page en aperçu.
Mettre cette page en page d'accueil
En théorie, c'est facile, mais nous avons oublié un détail : une page d'accueil HTML doit absolument contenir l'adresse de forumactif ! Sinon vous ne pourrez pas la valider en temps que page d'accueil, et ce serait bien dommage d'avoir fait tout cela pour rien...
Il va donc falloir ajouter ce lien, et pour cela nous allons le mettre dans le html, dans un bloc :
- Code:
<div id="liens"><a href="http://www.forumactif.com" target="_blank">ForumActif</a> - <a href="http://www.never-utopia.com" target="_blank">Never-Utopia</a></div>
(oui, tant qu'à faire, j'ai placé un crédit à N-U, normal tout de même...).
J'ai donc placé ce bloc juste après l'ouverture de la balise "body".
Voici maintenant mon css :
- Code:
#liens
{
position: fixed;
z-index: 999;
width: 200px;
bottom: 0;
right: 0;
padding: 2px;
text-align: center;
background: #f2f2f2;
border: 1px solid #ffffff;
box-shadow: 0px 0px 10px #b1b1b1;
-o-box-shadow: 0px 0px 10px #b1b1b1;
-moz-box-shadow: 0px 0px 10px #b1b1b1;
-htm-box-shadow: 0px 0px 10px #b1b1b1;
-webkit-box-shadow: 0px 0px 10px #b1b1b1;
border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-htm-border-radius: 10px;
-webkit-border-radius: 10px;
}
#liens a
{
font-size: 11px;
font-family: helvetica;
color: #ababab;
text-decoration: none;
}
#liens a:hover
{
color: #7b7b7b;
}
J'ai donc placé ce bloc en fixed, puis avec un z-index très élevé pour être sûr qu'il passe par dessus le reste. Il a été mis en bas à droite, et les deux liens sont discret, avec un léger effet hover simple.
Vous ne pouvez pas valider la page en tant que page d'accueil pour votre forum si vous n'avez pas le lien de ForumActif, mais je vous demanderais aussi, en cas d'utilisation de ce tutoriel pour votre page, de garder un crédit à Never-Utopia. Même si vous ne le voulez pas ici, enlevez-le si vous voulez mais mettez le quelque part, sur votre PA (sur l'index), dans un topic...mais il doit être là x).
Ce TP est terminé, j'espère qu'il vous aidera non seulement pour une éventuellement page d'accueil (ou simple page html informative, pourquoi pas...) pour votre forum, mais également à comprendre le placement des éléments sur une page web vierge, afin de bien penser aux différentes résolutions d'écran.
N'oubliez pas que vous pouvez par la suite adapter tout cela en modifiant des éléments, en mettant moins d'images, plusieurs cadres textes... C'est à votre choix ! Vous pouvez très bien ne pas centrer votre bloc de contenu et le placer par marges comme les blocs renders et ainsi avoir plusieurs zones. Vous pouvez également préparer un fond de page, ou une image avec des personnages et des zones textes déjà faites graphiques, dans laquelle vous n'avez plus qu'à mettre vos textes. Du moment que vous avez délimié un corps centré, vous pouvez placer à l'intérieur tout vos éléments en absolute avec des margin.
En espérant que ce tutoriel vous aura plus et aidé !
