Ce que nous allons réaliser
La réalisation de cette application se déroule en 3 étapes :
- Vous préparer les différents éléments images ou médias. Il faut, en effet, que toutes les images présentées dans ce portfolio soient de meme dimension afin d'assurer une certaine cohérence graphique.
- Création de la page HTML qui présentera cette application. Celle-ci hébergera les différentes zones de présentation et les codes HTML et javascript associé à JQuery
- La page CSS3 permettant le positionnement de <div> ainsi que vos règles de style (ou les memes que moi ...) dans laquelle nous définirons les "id" et "class" nécessaires.
Au final, vous devez obtenir ceci :
Préparation des images
Je suppose que vous avez déjà idée des images que vous souhaitez présenter avec cette application, il vous faudra cependant respecter certaines règles :
- Toutes vos images (excepté le logo) doivent etre au memes dimensions, j'utilise ici 18 images de format 185px de largeur sur 250px de hauteur. Retenez ces valeurs, elles ont une importance dan sla compréhansion du CSS et du javascript.
- Vous pouvez, à l'aide de votre logiciel graphique préféré, exporter vos image aux formats .png ou .jpg et les réunir dans un meme dossier (cela simplifie le code).
- Le portfolio présente une image désignant une "série" puis les images attenantes.
Dans notre démo nous avons 4 "séries" avec, respectivement, 3 - 4 - 4 et 3 images attenantes, pensez à organiser vos noms d'images en fonction afin de ne pas trop vous compliquer la tache.
Création des pages
Nous allons créer la page HTML accueillant notre application qui est nommée pour l'exemple "portfolio_demo.html" et sa feuille de style CSS nommée simplement "style.css".
Appelons notre feuille de style immédiatement afin de pouvoir positionner les éléments à venir et insérons le lien extérieur vers la bibliothèque JQuery qui facilitera le code javascript :
<!DOCTYPE html>
<html>
<head>
<title>Portfolio en HTML5</title>
<!-- on appelle la bibliothèque JQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" /></script>
<!-- on appelle la feuille de style -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
Création de la structure HTML (avec les propriétés CSS)
Toutes nos balises auront une position absolute afin de préserver la mise en place de notre structure.
Commencons par définir le style de notre body, mon exemple arbore un simple fond noir mais libre à vous d'en choisir la couleur (ou image), puis définissons le masque vertical qui accueillera nos images d'entete de "séries".
Du coté du CSS (fichier "style.css"):
body{
margin:0px;
padding: 0px;
background-color: black;
overflow:hidden;
}
#maskMenu{
position:absolute;
width: 185px;/*la largeur est identique à celle de vos images d'entete de serie*/
height:auto;/* ou en valeur en pixels legerement supérieure à la somme des hauteurs de vos images d'entete de serie*/
top:0px;/*
left: 400px;/*decalage du bord gauche, valeur en fonction de la largeur de votre logo et du design final souhaité*/
}
Vous pouvez eventuellement définir un background-color à l'id #maskMenu afin de vous faciliter son repérage et positionnement sur votre page HTML et le supprimer une fois votre application terminée.
Et du coté HTML (fichier "portfolio_demo.html") :
<html>
<head>
<title>Portfolio en HTML5</title>
<!-- on appelle la bibliothèque JQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" /></script>
<!-- on appelle la feuille de style -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="maskMenu">
</div>
Nous créons maintenant la <div> qui contiendra nos images d'entete de séries, vous pouvez aussi lui attribuer une couleur de fond pour vous faciliter son repérage.
Sa règle CSS
(fichier "style.css"):
position:absolute;
width: 185px;/*la largeur est identique à celle de vos images d'entete de serie*/
top:250px;/*espacement avec le bord superieur*/
left:0px;
}
Et son insersion dans la page HTML (fichier "portfolio_demo.html") :
<!DOCTYPE html>
<html>
<head>
<title>Portfolio en HTML5</title>
<!-- on appelle la bibliothèque JQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" /></script>
<!-- on appelle la feuille de style -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="maskMenu">
<div id="contMenu">
</div>
</div>
De la meme façon nous allons créer un masque pour le contenu horizontal (les images attenantes à votre image d'entete de série) qui possedera lui aussi sa règle CSS. Je me permet d'accélérer un peu le détail de codage, vous avez maintenant acquis le principe fichier HTML / fichier CSS :
#maskContenu{
position:absolute;
width: 800px;/*la largeur est identique à celle de vos images */
height:250px;/*la hauteur est identique à celle de vos images */
top:250px;/*espacement avec le bord superieur identique à celui de #contMenu*/
left:585px;/*espacement avec le bord gauche correspond à la valeur "left #maskMenu" + "largeur image entete de serie"*/
overflow:hidden;
}
--------------------------------------------------------------------------------------
</head>
<body>
<div id="maskMenu">
<div id="contMenu">
</div>
</div>
<div id="maskContenu">
</div>
Créons maintenant la <div> qui hébergera vos images placée sur l'axe horizontal :
#contContenu{
position:absolute;
height:250px;/*la hauteur est identique à celle de vos images */
float:left;
}
----------------------------------------
</head>
<body>
<div id="maskMenu">
<div id="contMenu">
</div>
</div>
<div id="maskContenu">
<div id="contContenu">
</div>
</div>
On insère maintenant notre logo :
#logo{
position:absolute;
top:0px;
left:0px;
padding:40px;/*facultatif, mis en place afin de permettre un décalage du logo du bord de page*/
}
----------------
</head>
<body>
<div id="maskMenu">
<div id="contMenu">
</div>
</div>
<div id="maskContenu">
<div id="contContenu">
</div>
</div>
<div id="logo"><img src="images/logo.jpg"></div>
Nous allons maintenant insérer nos image d'entete de série nommées ici " scr1 - scr11 - scr21 et scr31 ", nous leur assignons une class nommée ".menuImg" :
.menuImg{
position:relative;
height:250px;
margin-bottom:3px;/*facultatif, mis en place afin de permettre un leger espacement entre les images*/
}
------------------------------------
</head>
<body>
<div id="maskMenu">
<div id="contMenu">
<div class="menuImg"><img src="images/scr1.jpg"></div>
<div class="menuImg"><img src="images/scr11.jpg"></div>
<div class="menuImg"><img src="images/scr21.jpg"></div>
<div class="menuImg"><img src="images/scr31.jpg"></div>
</div>
</div>
Et nous insérons le contenu de notre première série (uniquement !) en leur assignant une class nommée ".contenuImg" :
.contenuImg{
position:relative;
height:250px;/*la hauteur est identique à celle de vos images */
width:185px;/*la largeur est identique à celle de vos images */
float:left;
margin-left:3px;/*facultatif, mis en place afin de permettre un leger espacement entre les images*/
}
----------------------
<div id="maskContenu">
<div id="contContenu">
<div class="contenuImg"><img src="images/scr2.jpg"></div>
<div class="contenuImg"><img src="images/scr3.jpg"></div>
<div class="contenuImg"><img src="images/scr4.jpg"></div>
</div>
</div>
Nous allons maintenant mettre en place les boutons actionnés à la sourie permettant de naviguer dans le Portfolio. pour info les boutons gauche et droite ont un format de 30 x 40px et les bouton haut et bas de 20 x 15px :
/*LE POSITIONNEMENT DES BOUTONS DEPEND DES DIMENSIONS DE VOS IMAGES ET DU RESULTAT FINAL QUE VOUS SOUHAITEZ OBTENIR, IL VOUS APPARTIENT DE PEAUFINER LEUR PLACEMENT*/
#boutonHaut{
position: absolute;
left:360px;
top:430px;
}
#boutonBas{
position: absolute;
left:360px;
top:480px;
}
#boutonDroite{
position: absolute;
left:860px;
top:550px;
margin-left:15px;
}
#boutonGauche{
position: absolute;
left:830px;
top:550px;
margin-right:15px;
}
----------------------
<div id="maskContenu">
<div id="contContenu">
<div class="contenuImg"><img src="images/scr2.jpg"></div>
<div class="contenuImg"><img src="images/scr3.jpg"></div>
<div class="contenuImg"><img src="images/scr4.jpg"></div>
</div>
</div>
<div id="boutonHaut"><img src="images/fleche_haut.png"></div>
<div id="boutonBas"><img src="images/fleche_bas.png"></div>
<div id="boutonDroite"><img src="images/fleche_droite.png"></div>
<div id="boutonGauche"><img src="images/fleche_gauche.png"></div>
</body>