Codage.
Cursus
• Ouvrez un document de dimension 100*100
• Remplissez-le à l'aide de l'outil "pot de peinture" de couleur #09527b. Passez l'opacité du calque à 30% et enregistrez le en .png au nom de "Fondpa"
• Ouvrez un autre document et remplissez le cette fois-ci de la même façon de couleur #0a754b. Passez l'opacité du calque à 30% et enregistrez le en .png au nom de "Fondpab"
• Enfin, remplissez un troisième document de couleur #750a0a. Passez l'opacité du calque à 30% et enregistrez le en .png au nom de "Fondpac"
• Ouvrez un document de dimensions 900*400.
• Remplissez-le de la couleur #0c2539.
• Créez un nouveau calque (CTRL + MAJ + N) et remplissez le de blanc (#ffffff). Passez-le en mode Produit.
• Double-cliquez sur le calque que vous avez crée et sélectionnez "Incrustation en dégradé".
(#0b1e29 -- #0f2937)
• Créez à nouveau un calque et remplissez le de blanc (#ffffff). Passez-le également en mode Produit.
• Double-cliquez sur le calque que vous avez crée et sélectionnez "Incrustation de Motif".
J'ai choisi le même motif que pour mes catégories et ai baissé son opacité à 22% après l'avoir passé en mode Produit.
Pour terminer, nous allons créer les titres de notre page.
• Ouvrez un document de dimensions 400*40 et remplissez-le de blanc.
• Double-cliquez sur le calque 1 et appliquez :
? Un contour intérieur de 1px, de couleur #053c5b
? Une Incrustation en dégradé, Angle = 90°
(#02121a -- #031f2f )
• Créez à nouveau un calque et remplissez le de blanc (#ffffff). Passez-le en mode Produit.
• Double-cliquez sur le calque que vous avez crée et sélectionnez "Incrustation de Motif".
J'ai choisi le même motif que précédemment avec les mêmes valeurs.
• Fusionnez les calques. Faîtes image, rotation de l'image, 90° antihoraire et enregistrez le en .jpg au nom de "FondContenu"
Reproduisez les même manipulations que précédemment mais ne les fusionnez pas et enchaînez par la suite :
• A l'aide de l'outil de texte horizontal, écrivez le titre du premier onglet de votre PA. Moi ce sera tout simplement "Accueil" avec la police Blue Highway en taille de police 35px.
• Double-cliquez sur le calque et appliquez :
- Un contour extérieur de 1px, de couleur #022031
- Une ombre portée d'opacité 37%, Distance 2px, Grossi 0%, Taille : 5px.
- Une Incrustation en dégradé, Angle = 90°
(#042230 -- #073a52)
• Dupliquez le calque et faites clique droit dessus : Supprimer le style de calque.
• Appliquez une incrustation en dégradé du noir vers le blanc en mode superposition. Le calque prendra un opacité de 57%.
• Dupliquez le calque et faites clique droit dessus : Supprimer le style de calque.
• Appliquez une incrustation en dégradé du blanc vers le noir en mode en mode Lumière Tamisée. Le calque prendra un opacité de 57%.
• Créez une nouvelle typographie avec une police plus légère - j'ai pris Exmouth- de taille 22px, de couleur #005784. J'ai écris : "Bienvenue sur le forum"
• Appliquez lui une ombre portée d'opacité 75%, Distance 2px, Grossi 0%, Taille : 1px.
• Placez le texte au centre de la première typographie, fusionnez les calques et enregistrez en .jpg le document.
• Procédez de la même manière pour les autres onglets. En changeant le dégradé, voici, pour que vous ayez un modèle, les boutons que j'ai réalisé :
• Passons à la manipulation HTML/CSS !
• Direction Affichage> Généralités> Message sur la page d'accueil
• Nous allons créer une div qui aura pour ID "accueil".
• Ensuite, nous allons créer dans cette div, une autre div. Elle aura un ID nommé "page1".
• A présent, nous allons dans la div "page1", qu'on appellera plus simplement "Page 1", créer un tableau avec une class nommée "contenu_page".
• Enfin, nous allons créer d'autre page (4 précisément). Êtes-vous capable de le faire tout seul =P ?
• Pour finir, ajouter une div ayant pour class "contenu" dans chacune des cellules créées :
• Passons maintenant au CSS. Nous avons créé six ID et deux class : "#accueil", "page1", "page2", "page3", "page4", "contenu" et "contenu_page".
Ainsi, nous allons mettre dans le CSS :
• Retournons dans notre code, nous allons placer les titres et amorcer la mobilité des onglets. Pour placer les titres, nous allons créer une cellule avant celle qui a le contenu. La cellule aura pour style une barre de défilement cachée et une largeur de 40px.
Ensuite nous plaçons notre image de titre entourée d'une span ayant pour class : page_titre.
• Faites la même chose pour les autres pages en prenant soin de remplacer le lien de l'image titre.
• Passez dans le CSS, on va amorcer la mobilité des onglets !
Avant tout, nous avons crée une class : "page_titre".
•".page_titre" prend les valeurs suivantes :
- On lui donne un "display: inline-block" pour que chaque titre soit l'un à côté de l'autre.
- Des dimensions : 400*40
- On aligne le contenu (text-align: center)
- Une marge extérieure de -180px
- Une rotation de -90deg :
Au final donc :
• Maintenant, nous allons créer l'interaction avec nos onglets. Ceci se fera au survole des pages, on peut donc poser :
Ajoutons leur une barre de défilement cachée, une largeur de 80%, une hauteur de 400px et les propriétés de transition, sans oublier de les ajouter aux pages quand elles ne sont pas survolées :
Puis, nous allons faire en sorte que lorsque la page est survolé, le contenu ait de nouvelles valeurs, soit "#page1:hover .contenu, #page2:hover contenu, etc..." Nous l'avons fait précédemment, vous vous souvenez ?
Donnez-leur comme propriétés :
- Une barre de défilement cachée
- Des dimensions 650*380
- Une marge extérieure de -180px
- Une opacité totale "1"
- Les propriétés de transition.
Ensuite, nous allons donner les fonds colorés à faible opacité que nous avons donné précédemment à chaque contenu de différentes pages survolés sachant que la page1 et la page4 auront le fond bleu :
• Il est temps de remplir notre page d'accueil ! Repassez donc dans votre code, nous allons nous occuper de cette partie :
Nous allons tout d'abord créer un titre "accueilb" (b=bleu, v=vert, r=rouge) que nous allons insérer entre :
Ainsi :
Ensuite, directement en-dessous, nous allons créer nos deux boites qui vont flotter :
Il ne faut pas oublier le clear: both qui permet de retirer l'effet de flottement sur les éléments à venir et enfin, la navigation rapide :
On valide le tout et on passe dans le CSS ;D !
Nous avons créé trois class: "accueilb", "paboxb" et "fastlinks".
Aussi :
On prévoit à l'avance que les liens auront un effet lorsqu'ils seront survolés ^^ !
• Nous allons ensemble modifier le style des liens de la navigation rapide.
Les liens de la navigation rapide, lorsqu'ils ne sont pas survolés, vont devenir des "blocs" grâce à la propriété display: block (à l'inverse de inline-block qui aligne des éléments type bloc). Nous leur donneront un fond de couleur #011d2a, une bordure en bas de 1px, solide ##0b344b, une largeur de 100%, un texte centré, un taille de police de 13px en gras. On ajoute également les propriétés de transition.
Lorsque le lien sera survolé, on changement la couleur du fond pour #0b344b :
• Enregistrez votre CSS.
• Il est temps de faire le contenu de la seconde page ! Nous allons donc nous concentrer sur cette partie de notre code :
• Comme précédemment, nous allons créer un titre "accueilv" (b=bleu, v=vert, r=rouge) que nous allons insérer entre :
Ainsi :
Ensuite, nous allons créer un tableau à trois cellules :
Nous ne remplirons que la première et la dernière cellule d'une boite ayant pour class : "paboxv"
• Validez la page accueil et allez dans votre CSS.
• Nous avons créé deux div : "accueilv" et "paboxv". les propriétés d'"accueilv" sont semblables à celles que nous avons donné à "accueilb" alors nous allons utiliser la "super-balise" !
Va devenir :
Ainsi, nous allons modifier la couleur du texte et la couleur de la bordure de "accueilv" :
On rajoutera également une nouvelle couleur (#113113) aux liens dans les boites vertes :
• Nous allons maintenant faire apparaître les derniers messages sur le forum dans votre page accueil ! C'est un nouveau système plutôt simple et vraiment très intéressant. Pour ce faire, direction Modules> Gestion des widgets du forum> Oui.
• A présent, on va cacher la partie des widgets sur la gauche parce qu'on ne veut seulement les derniers messages ! Ainsi, on va ajouter ceci au CSS :
Ajoutez ce bout de code dans la partie STRUCTURE du CSS.
• On retourne enfin dans notre code. Dans la première colonne de la partie sur laquelle nous travaillons, nous allons ajouter une div avec un id:"recent-topics" pour contenir les derniers messages, ensuite, une code JavaScript va venir mettre la partie des derniers messages des widgets vers la div que l'on a créé. Copiez le code suivant juste après la div que nous venons de créer. Ce dernier récupère à l'aide de l'ID dans les widgets le contenu des derniers messages et le bascule vers notre div.
• Enfin, dans la seconde colonne, nous allons créer un défilement. Ce dernier se compose en deux parties, d'abord la balise marquee et ensuite le span qui contient ... le contenu Very Happy !
Cependant, marquee va prendre plusieurs attributs, notamment pour modifier sa vitesse de défilement, sa direction, sa hauteur. Nous allons donc lui donner l'ordre de défiler vers le haut, avec une taille de 280px, à un vitesse de "2" unités (plus le chiffre est haut, plus ça va vite) et enfin une vitesse en millisecondes qui augmente l'intervalle moyen entre les déplacements du texte, plus le chiffre est haut, plus c'est long !
Oups, j'avais oublié de vous dire, on va donner à span une taille de police de 11px et un texte justifié ! Voici un bon site pour les défilements, il est vraiment complet ^^ Voir le site
C'est ici que vous mettrez vos news, j'ai pour habitude de prendre cette forme :
Pour terminer avec cette page, on va ajouter un titre dans chaque boite pour faciliter la compréhension. Nous nommerons la div qui le contiendra "VTitle". Ainsi ça donne :
• On passe dans la CSS, notre deuxième page est bientôt terminée ! Nous avons créée la div "VTitle".
• Nous allons passer à la création du contenu de la troisième page !
C'est donc cette partie qui nous intéresse :
Comme précédemment (et ce sera fait pour les deux prochaines pages également) nous allons ajouter un titre.
Nous allons donc créer un titre "accueilr" (b=bleu, v=vert, r=rouge) que nous allons insérer entre :
Ainsi :
Vous l'aurez compris, nous allons créer un tableau d'effectifs. Rien de bien difficile, c'est tout simplement créer un tableau normalement. Nous allons donc avoir autant de colonne que de groupes (6 étant un bon nombre) et 5 lignes (Une pour le titre, une pour le nom des groupes, une pour le chef du groupe, une pour l'effectif et une pour la situation du groupe [Fermé/Ouvert])
Au passage, la table prendra comme class "AccueilEffectifs"
Etant donné que notre première ligne ne contiendra que notre titre, nous pouvons "fusionner" toutes les colonnes en une ligne grâce à "colspan=""". Si nous devons fusionner 2 colonnes, ça donnera colspan="2". Ici, nous en avons 6. Vous prendrez soin d'ajouter le titre entouré d'une div ayant pour class :"RTitle".
• Notre seconde ligne contiendra le nom des groupes. Nous allons donc reprendre les divs que nous avons créé dans le QEEL pour entourer le nom de nos groupes comme ceci :
Ensuite, vous n'avez plus qu'à remplir normalement les autres cellules avec le Chef, l'effectif et le statut du groupe.
• Passons dans le CSS. Nous avons créée "accueilr", "AccueilEffectifs" et "RTitle". Comme avant, "accueilr" a les même propriétés que accueilb et accueilv, seul sa bordure et sa couleur change ça donne donc :
Nous allons donner à accueilr un couleur de police (#853f3f) et une bordure de 5px vers le bas, solide de couleur #2a0101.
• Nous allons nous occuper de la page 4 pour terminer :
• On finira par la dernière page, la page 4.
Le width="100%" va venir dire que le tableau prendre toute la largeur de la page. Maintenant, on va ajouter un style à la première cellule. Elle va avoir une largeur de 35%, une hauteur de 320px et une bordure sur la droite de 1px en petits points (dotted) de couleur #011d2a . De même, la seconde cellule va avoir une largeur de 65% et une largeur de 320px;
La première colonne accueillera les crédits, je vous laisse ajouter dès maintenant une petite phrase de remerciement pour NU Razz
La seconde accueillera les partenaires. Aussi, nous allons créer des liens avec des classes et une image :
• Passons une dernière fois dans le CSS !
Nous avons créée une div: "Amis".
Nous allons lui donner une bordure sur tous les côtés de 1px, solide de couleur #095279, une largeur automatique (elle s'adaptera au logo) une hauteur de 10px, une marge intérieure de 10px à gauche et à droite, une marge extérieure en haut de 10px et un arrondis de 5px.
Et voilà, j'en ai terminé de mes explications longues et interminables ou parfois pas assez présentes. Dans tous les cas ce fut un réel plaisir de pouvoir vous aider tout au long de cette application. Ce n'est pas encore terminé, il nous reste quelques "petits plus" mais après ce sera fini ! ^^
N'hésitez pas à m'envoyer vos rendus par MP ou sur le topic dans les tutos, c'est toujours un plaisir de voir ce que vous pouvez faire grâce à ce qu'on tente de vous apprendre.
Précédent Suivant
Étape 11 - La Page Accueil, mise en avant d'un élément décisif
Vous voici dans la dernière étape de construction de votre forum. Les prochaines étapes à venir ne seront que des finitions alors tenez le coup Very Happy ! De tous temps, la page accueil a été le sujet principal de commandes, d'aide ou encore de tutoriels. Aujourd'hui, je vais lever le secret sur ce que doit absolument contenir une page accueil !
2C2N
Késako ? C'est mon moyen mnémotechnique pour désigner le Contexte, les Crédits, une Navigation rapide, les News. Ce sont, d'après moi, des éléments essentiels qui doivent se retrouver impérativement dans une Page Accueil facile d'accès, esthétique et complète. Libre à vous d'ajouter des éléments, plus il y en a, plus c'est chargé donc plus l'affaire est complexe ^^ Nous commencerons la création de notre page accueil par le graphisme ! Si vous avez des questions, n'hésitez pas à me MP : Envoyer un MP
Késako ? C'est mon moyen mnémotechnique pour désigner le Contexte, les Crédits, une Navigation rapide, les News. Ce sont, d'après moi, des éléments essentiels qui doivent se retrouver impérativement dans une Page Accueil facile d'accès, esthétique et complète. Libre à vous d'ajouter des éléments, plus il y en a, plus c'est chargé donc plus l'affaire est complexe ^^ Nous commencerons la création de notre page accueil par le graphisme ! Si vous avez des questions, n'hésitez pas à me MP : Envoyer un MP
Auteur : Taktiik
Amorce graphique de la PA
• Ouvrez un document de dimension 100*100
• Remplissez-le à l'aide de l'outil "pot de peinture" de couleur #09527b. Passez l'opacité du calque à 30% et enregistrez le en .png au nom de "Fondpa"
• Ouvrez un autre document et remplissez le cette fois-ci de la même façon de couleur #0a754b. Passez l'opacité du calque à 30% et enregistrez le en .png au nom de "Fondpab"
• Enfin, remplissez un troisième document de couleur #750a0a. Passez l'opacité du calque à 30% et enregistrez le en .png au nom de "Fondpac"
• Ouvrez un document de dimensions 900*400.
• Remplissez-le de la couleur #0c2539.
• Créez un nouveau calque (CTRL + MAJ + N) et remplissez le de blanc (#ffffff). Passez-le en mode Produit.
• Double-cliquez sur le calque que vous avez crée et sélectionnez "Incrustation en dégradé".
(#0b1e29 -- #0f2937)
• Créez à nouveau un calque et remplissez le de blanc (#ffffff). Passez-le également en mode Produit.
• Double-cliquez sur le calque que vous avez crée et sélectionnez "Incrustation de Motif".
J'ai choisi le même motif que pour mes catégories et ai baissé son opacité à 22% après l'avoir passé en mode Produit.
Pour terminer, nous allons créer les titres de notre page.
• Ouvrez un document de dimensions 400*40 et remplissez-le de blanc.
• Double-cliquez sur le calque 1 et appliquez :
? Un contour intérieur de 1px, de couleur #053c5b
? Une Incrustation en dégradé, Angle = 90°
(#02121a -- #031f2f )
• Créez à nouveau un calque et remplissez le de blanc (#ffffff). Passez-le en mode Produit.
• Double-cliquez sur le calque que vous avez crée et sélectionnez "Incrustation de Motif".
J'ai choisi le même motif que précédemment avec les mêmes valeurs.
• Fusionnez les calques. Faîtes image, rotation de l'image, 90° antihoraire et enregistrez le en .jpg au nom de "FondContenu"
Reproduisez les même manipulations que précédemment mais ne les fusionnez pas et enchaînez par la suite :
• A l'aide de l'outil de texte horizontal, écrivez le titre du premier onglet de votre PA. Moi ce sera tout simplement "Accueil" avec la police Blue Highway en taille de police 35px.
• Double-cliquez sur le calque et appliquez :
- Un contour extérieur de 1px, de couleur #022031
- Une ombre portée d'opacité 37%, Distance 2px, Grossi 0%, Taille : 5px.
- Une Incrustation en dégradé, Angle = 90°
(#042230 -- #073a52)
• Dupliquez le calque et faites clique droit dessus : Supprimer le style de calque.
• Appliquez une incrustation en dégradé du noir vers le blanc en mode superposition. Le calque prendra un opacité de 57%.
• Dupliquez le calque et faites clique droit dessus : Supprimer le style de calque.
• Appliquez une incrustation en dégradé du blanc vers le noir en mode en mode Lumière Tamisée. Le calque prendra un opacité de 57%.
• Créez une nouvelle typographie avec une police plus légère - j'ai pris Exmouth- de taille 22px, de couleur #005784. J'ai écris : "Bienvenue sur le forum"
• Appliquez lui une ombre portée d'opacité 75%, Distance 2px, Grossi 0%, Taille : 1px.
• Placez le texte au centre de la première typographie, fusionnez les calques et enregistrez en .jpg le document.
• Procédez de la même manière pour les autres onglets. En changeant le dégradé, voici, pour que vous ayez un modèle, les boutons que j'ai réalisé :
• Passons à la manipulation HTML/CSS !
Amorce de la PA (Codage)
• Direction Affichage> Généralités> Message sur la page d'accueil
• Nous allons créer une div qui aura pour ID "accueil".
• Ensuite, nous allons créer dans cette div, une autre div. Elle aura un ID nommé "page1".
• A présent, nous allons dans la div "page1", qu'on appellera plus simplement "Page 1", créer un tableau avec une class nommée "contenu_page".
• Enfin, nous allons créer d'autre page (4 précisément). Êtes-vous capable de le faire tout seul =P ?
• Pour finir, ajouter une div ayant pour class "contenu" dans chacune des cellules créées :
• Passons maintenant au CSS. Nous avons créé six ID et deux class : "#accueil", "page1", "page2", "page3", "page4", "contenu" et "contenu_page".
Ainsi, nous allons mettre dans le CSS :
EXERCICE :
• Appliquez à "#accueil" les propriétés et valeurs suivantes :
- Une barre de défilement cachée (overflow: hidden)
- Un fond avec l'image que nous avons fait de dimensions 900*400 positionnée en haut à gauche qui ne se répète pas.
- Une bordure de tous les cotés de 3px, solide de couleur #011d2a
- Ayant pour dimensions 900*400
- Centré automatiquement
• Appliquez à "#page1, #page2, #page3, #page4" les propriétés et valeurs suivantes :
- Un flottement sur la gauche
- Une barre de défilement cachée
- Un fond avec l'image que nous avons nommé "FondContenu", positionnée en haut à gauche qui se répète horizontalement.
- Ayant pour dimensions 40*400
• Appliquez à ".contenu_page"
- Une largeur de 100%
- Une hauteur de 400px
• Appliquez enfin à ".contenu"
- Une barre de défilement cachée
- Ayant pour dimensions 0*0
- Une marge intérieure de 6px
- Une opacité de 0
Vous avez remarqué ? Vous êtes capable de faire des choses presque tous seuls maintenant, vous devenez vraiment des experts Very Happy !
• Appliquez à "#accueil" les propriétés et valeurs suivantes :
- Une barre de défilement cachée (overflow: hidden)
- Un fond avec l'image que nous avons fait de dimensions 900*400 positionnée en haut à gauche qui ne se répète pas.
- Une bordure de tous les cotés de 3px, solide de couleur #011d2a
- Ayant pour dimensions 900*400
- Centré automatiquement
• Appliquez à "#page1, #page2, #page3, #page4" les propriétés et valeurs suivantes :
- Un flottement sur la gauche
- Une barre de défilement cachée
- Un fond avec l'image que nous avons nommé "FondContenu", positionnée en haut à gauche qui se répète horizontalement.
- Ayant pour dimensions 40*400
• Appliquez à ".contenu_page"
- Une largeur de 100%
- Une hauteur de 400px
• Appliquez enfin à ".contenu"
- Une barre de défilement cachée
- Ayant pour dimensions 0*0
- Une marge intérieure de 6px
- Une opacité de 0
Vous avez remarqué ? Vous êtes capable de faire des choses presque tous seuls maintenant, vous devenez vraiment des experts Very Happy !
• Retournons dans notre code, nous allons placer les titres et amorcer la mobilité des onglets. Pour placer les titres, nous allons créer une cellule avant celle qui a le contenu. La cellule aura pour style une barre de défilement cachée et une largeur de 40px.
Ensuite nous plaçons notre image de titre entourée d'une span ayant pour class : page_titre.
• Faites la même chose pour les autres pages en prenant soin de remplacer le lien de l'image titre.
• Passez dans le CSS, on va amorcer la mobilité des onglets !
Avant tout, nous avons crée une class : "page_titre".
•".page_titre" prend les valeurs suivantes :
- On lui donne un "display: inline-block" pour que chaque titre soit l'un à côté de l'autre.
- Des dimensions : 400*40
- On aligne le contenu (text-align: center)
- Une marge extérieure de -180px
- Une rotation de -90deg :
Au final donc :
• Maintenant, nous allons créer l'interaction avec nos onglets. Ceci se fera au survole des pages, on peut donc poser :
Ajoutons leur une barre de défilement cachée, une largeur de 80%, une hauteur de 400px et les propriétés de transition, sans oublier de les ajouter aux pages quand elles ne sont pas survolées :
Puis, nous allons faire en sorte que lorsque la page est survolé, le contenu ait de nouvelles valeurs, soit "#page1:hover .contenu, #page2:hover contenu, etc..." Nous l'avons fait précédemment, vous vous souvenez ?
Donnez-leur comme propriétés :
- Une barre de défilement cachée
- Des dimensions 650*380
- Une marge extérieure de -180px
- Une opacité totale "1"
- Les propriétés de transition.
Ensuite, nous allons donner les fonds colorés à faible opacité que nous avons donné précédemment à chaque contenu de différentes pages survolés sachant que la page1 et la page4 auront le fond bleu :
• Il est temps de remplir notre page d'accueil ! Repassez donc dans votre code, nous allons nous occuper de cette partie :
Nous allons tout d'abord créer un titre "accueilb" (b=bleu, v=vert, r=rouge) que nous allons insérer entre :
Ainsi :
Ensuite, directement en-dessous, nous allons créer nos deux boites qui vont flotter :
Il ne faut pas oublier le clear: both qui permet de retirer l'effet de flottement sur les éléments à venir et enfin, la navigation rapide :
On valide le tout et on passe dans le CSS ;D !
Nous avons créé trois class: "accueilb", "paboxb" et "fastlinks".
Aussi :
On prévoit à l'avance que les liens auront un effet lorsqu'ils seront survolés ^^ !
EXERCICE :
• "accueilb" prend les propriétés et les valeurs suivantes :
- Une largeur de 100%
- Une bordure sur le bas de 5px, solide de couleur #011d2a
- Un alignement du texte à gauche
- Un texte en gras
- Une taille de police de 15px
- Une couleur de police #3F6C85
- Une ombre portée avec X= 1, Y= 1, Z= 0 et pour couleur #000000
- Une marge intérieure de 10px sur la gauche
- Une marge extérieure en haut et en bas de 10px
• "paboxb" prend les propriétés et les valeurs suivantes :
- Une barre de défilement automatique
- Un flottement sur la gauche
- Un fond de couleur #0b344b
- Une bordure de 2px, solide de couleur #011d2a sur tous les cotés, elle sera de 5px sur la gauche et sur la droite.
- Ayant pour dimensions 280*150
- Un alignement du texte justifié
- Une marge intérieure de 3px
- Une marge sur le haut de 20px, de 25 px sur la gauche et une marge de 10px sur tous les côtés
• "fastlinks" prend les propriétés et les valeurs suivantes :
- Une barre de défilement cachée
- Une bordure à droite et à gauche de 5px, solide de couleur #011d2a
- Une largeur de 80%
- Une hauteur de 112px
- Une marge extérieure sur le haut de 5px
- Un texte centré automatique
- Un arrondis de 70px
Les pièges étaient à nouveau sur la disposition des propriétés, d'abord margin: auto; puis margin-top: 15px, j'insiste sur cela parce que c'est une erreur fréquente ^^ ! Vous l'aurez remarqué, j'ai compressé la propriété "font" à la manière de background, ça marche de la même manière !
• "accueilb" prend les propriétés et les valeurs suivantes :
- Une largeur de 100%
- Une bordure sur le bas de 5px, solide de couleur #011d2a
- Un alignement du texte à gauche
- Un texte en gras
- Une taille de police de 15px
- Une couleur de police #3F6C85
- Une ombre portée avec X= 1, Y= 1, Z= 0 et pour couleur #000000
- Une marge intérieure de 10px sur la gauche
- Une marge extérieure en haut et en bas de 10px
• "paboxb" prend les propriétés et les valeurs suivantes :
- Une barre de défilement automatique
- Un flottement sur la gauche
- Un fond de couleur #0b344b
- Une bordure de 2px, solide de couleur #011d2a sur tous les cotés, elle sera de 5px sur la gauche et sur la droite.
- Ayant pour dimensions 280*150
- Un alignement du texte justifié
- Une marge intérieure de 3px
- Une marge sur le haut de 20px, de 25 px sur la gauche et une marge de 10px sur tous les côtés
• "fastlinks" prend les propriétés et les valeurs suivantes :
- Une barre de défilement cachée
- Une bordure à droite et à gauche de 5px, solide de couleur #011d2a
- Une largeur de 80%
- Une hauteur de 112px
- Une marge extérieure sur le haut de 5px
- Un texte centré automatique
- Un arrondis de 70px
Les pièges étaient à nouveau sur la disposition des propriétés, d'abord margin: auto; puis margin-top: 15px, j'insiste sur cela parce que c'est une erreur fréquente ^^ ! Vous l'aurez remarqué, j'ai compressé la propriété "font" à la manière de background, ça marche de la même manière !
• Nous allons ensemble modifier le style des liens de la navigation rapide.
Les liens de la navigation rapide, lorsqu'ils ne sont pas survolés, vont devenir des "blocs" grâce à la propriété display: block (à l'inverse de inline-block qui aligne des éléments type bloc). Nous leur donneront un fond de couleur #011d2a, une bordure en bas de 1px, solide ##0b344b, une largeur de 100%, un texte centré, un taille de police de 13px en gras. On ajoute également les propriétés de transition.
Lorsque le lien sera survolé, on changement la couleur du fond pour #0b344b :
• Enregistrez votre CSS.
• Il est temps de faire le contenu de la seconde page ! Nous allons donc nous concentrer sur cette partie de notre code :
• Comme précédemment, nous allons créer un titre "accueilv" (b=bleu, v=vert, r=rouge) que nous allons insérer entre :
Ainsi :
Ensuite, nous allons créer un tableau à trois cellules :
Nous ne remplirons que la première et la dernière cellule d'une boite ayant pour class : "paboxv"
• Validez la page accueil et allez dans votre CSS.
• Nous avons créé deux div : "accueilv" et "paboxv". les propriétés d'"accueilv" sont semblables à celles que nous avons donné à "accueilb" alors nous allons utiliser la "super-balise" !
Va devenir :
Ainsi, nous allons modifier la couleur du texte et la couleur de la bordure de "accueilv" :
EXERCICE :
• "paboxv" va prendre les propriétés et les valeurs suivantes :
- Une barre de défilement automatique
- Une police de couleur #3f8544
- Une bordure sur tous les cotés de 2px, solide de couleur #012a02 sauf sur la gauche et la droite où elle doit être de 5px
- Ayant pour dimensions 200*320
- Un texte justifié
- Une marge extérieure de 5px
• "paboxv" va prendre les propriétés et les valeurs suivantes :
- Une barre de défilement automatique
- Une police de couleur #3f8544
- Une bordure sur tous les cotés de 2px, solide de couleur #012a02 sauf sur la gauche et la droite où elle doit être de 5px
- Ayant pour dimensions 200*320
- Un texte justifié
- Une marge extérieure de 5px
On rajoutera également une nouvelle couleur (#113113) aux liens dans les boites vertes :
• Nous allons maintenant faire apparaître les derniers messages sur le forum dans votre page accueil ! C'est un nouveau système plutôt simple et vraiment très intéressant. Pour ce faire, direction Modules> Gestion des widgets du forum> Oui.
• A présent, on va cacher la partie des widgets sur la gauche parce qu'on ne veut seulement les derniers messages ! Ainsi, on va ajouter ceci au CSS :
Ajoutez ce bout de code dans la partie STRUCTURE du CSS.
• On retourne enfin dans notre code. Dans la première colonne de la partie sur laquelle nous travaillons, nous allons ajouter une div avec un id:"recent-topics" pour contenir les derniers messages, ensuite, une code JavaScript va venir mettre la partie des derniers messages des widgets vers la div que l'on a créé. Copiez le code suivant juste après la div que nous venons de créer. Ce dernier récupère à l'aide de l'ID dans les widgets le contenu des derniers messages et le bascule vers notre div.
• Enfin, dans la seconde colonne, nous allons créer un défilement. Ce dernier se compose en deux parties, d'abord la balise marquee et ensuite le span qui contient ... le contenu Very Happy !
Cependant, marquee va prendre plusieurs attributs, notamment pour modifier sa vitesse de défilement, sa direction, sa hauteur. Nous allons donc lui donner l'ordre de défiler vers le haut, avec une taille de 280px, à un vitesse de "2" unités (plus le chiffre est haut, plus ça va vite) et enfin une vitesse en millisecondes qui augmente l'intervalle moyen entre les déplacements du texte, plus le chiffre est haut, plus c'est long !
Oups, j'avais oublié de vous dire, on va donner à span une taille de police de 11px et un texte justifié ! Voici un bon site pour les défilements, il est vraiment complet ^^ Voir le site
C'est ici que vous mettrez vos news, j'ai pour habitude de prendre cette forme :
Pour terminer avec cette page, on va ajouter un titre dans chaque boite pour faciliter la compréhension. Nous nommerons la div qui le contiendra "VTitle". Ainsi ça donne :
• On passe dans la CSS, notre deuxième page est bientôt terminée ! Nous avons créée la div "VTitle".
EXERCICE :
• "VTitle" va prendre les propriétés et les valeurs suivantes :
- Une couleur de fond #011a02
- Une bordure en bas de 1px, solide de couleur #011a02
- Une largeur de 100%
- Une couleur de police #074a04
- Une taille de police de 12px, en gras, écrite en Georgia (font-family: 'Georgia'Wink
- Un texte en lettres capitales
- Un texte aligné au centre
- Une ombre portée sur le texte avec X= 0, Y= 0, Z= 3 et avec une couleur #000000
• "VTitle" va prendre les propriétés et les valeurs suivantes :
- Une couleur de fond #011a02
- Une bordure en bas de 1px, solide de couleur #011a02
- Une largeur de 100%
- Une couleur de police #074a04
- Une taille de police de 12px, en gras, écrite en Georgia (font-family: 'Georgia'Wink
- Un texte en lettres capitales
- Un texte aligné au centre
- Une ombre portée sur le texte avec X= 0, Y= 0, Z= 3 et avec une couleur #000000
• Nous allons passer à la création du contenu de la troisième page !
C'est donc cette partie qui nous intéresse :
Comme précédemment (et ce sera fait pour les deux prochaines pages également) nous allons ajouter un titre.
Nous allons donc créer un titre "accueilr" (b=bleu, v=vert, r=rouge) que nous allons insérer entre :
Ainsi :
Vous l'aurez compris, nous allons créer un tableau d'effectifs. Rien de bien difficile, c'est tout simplement créer un tableau normalement. Nous allons donc avoir autant de colonne que de groupes (6 étant un bon nombre) et 5 lignes (Une pour le titre, une pour le nom des groupes, une pour le chef du groupe, une pour l'effectif et une pour la situation du groupe [Fermé/Ouvert])
Au passage, la table prendra comme class "AccueilEffectifs"
Etant donné que notre première ligne ne contiendra que notre titre, nous pouvons "fusionner" toutes les colonnes en une ligne grâce à "colspan=""". Si nous devons fusionner 2 colonnes, ça donnera colspan="2". Ici, nous en avons 6. Vous prendrez soin d'ajouter le titre entouré d'une div ayant pour class :"RTitle".
• Notre seconde ligne contiendra le nom des groupes. Nous allons donc reprendre les divs que nous avons créé dans le QEEL pour entourer le nom de nos groupes comme ceci :
Ensuite, vous n'avez plus qu'à remplir normalement les autres cellules avec le Chef, l'effectif et le statut du groupe.
• Passons dans le CSS. Nous avons créée "accueilr", "AccueilEffectifs" et "RTitle". Comme avant, "accueilr" a les même propriétés que accueilb et accueilv, seul sa bordure et sa couleur change ça donne donc :
Nous allons donner à accueilr un couleur de police (#853f3f) et une bordure de 5px vers le bas, solide de couleur #2a0101.
EXERCICE :
• "RTitle" va prendre les propriétés et les valeurs suivantes :
- Une couleur de police #853f3f
- Une largeur de 100%
- Une taille de police de 13px, en gras, en Georgia.
- Une alignement du texte centré.
- Un texte avec des lettre capitales
- Un espace entre les lettres de 3px (letter-spacing: 3px;)
- Une ombre portée avec X= 0, Y= 0, Z= 1 et pour couleur #000000
• "AccueilEffectifs" va prendre les propriétés et les valeurs suivants :
- Une couleur de fond #4f2727
- Une bordure sur tous les cotés de 1px, solide de couleur #780808
- Ayant pour dimensions 600*320
- Un texte centré
- La police prend la couleur #853f3f
- Un centrement auto
- Une marge extérieure en haut et en bas de 10px
- Un arrondis de 10px;
- Une ombre portée sur la boite avec X= 0, Y= 0, Z= 3 et avec une couleur #000000
• "RTitle" va prendre les propriétés et les valeurs suivantes :
- Une couleur de police #853f3f
- Une largeur de 100%
- Une taille de police de 13px, en gras, en Georgia.
- Une alignement du texte centré.
- Un texte avec des lettre capitales
- Un espace entre les lettres de 3px (letter-spacing: 3px;)
- Une ombre portée avec X= 0, Y= 0, Z= 1 et pour couleur #000000
• "AccueilEffectifs" va prendre les propriétés et les valeurs suivants :
- Une couleur de fond #4f2727
- Une bordure sur tous les cotés de 1px, solide de couleur #780808
- Ayant pour dimensions 600*320
- Un texte centré
- La police prend la couleur #853f3f
- Un centrement auto
- Une marge extérieure en haut et en bas de 10px
- Un arrondis de 10px;
- Une ombre portée sur la boite avec X= 0, Y= 0, Z= 3 et avec une couleur #000000
• Nous allons nous occuper de la page 4 pour terminer :
• On finira par la dernière page, la page 4.
Le width="100%" va venir dire que le tableau prendre toute la largeur de la page. Maintenant, on va ajouter un style à la première cellule. Elle va avoir une largeur de 35%, une hauteur de 320px et une bordure sur la droite de 1px en petits points (dotted) de couleur #011d2a . De même, la seconde cellule va avoir une largeur de 65% et une largeur de 320px;
La première colonne accueillera les crédits, je vous laisse ajouter dès maintenant une petite phrase de remerciement pour NU Razz
La seconde accueillera les partenaires. Aussi, nous allons créer des liens avec des classes et une image :
• Passons une dernière fois dans le CSS !
Nous avons créée une div: "Amis".
Nous allons lui donner une bordure sur tous les côtés de 1px, solide de couleur #095279, une largeur automatique (elle s'adaptera au logo) une hauteur de 10px, une marge intérieure de 10px à gauche et à droite, une marge extérieure en haut de 10px et un arrondis de 5px.
Et voilà, j'en ai terminé de mes explications longues et interminables ou parfois pas assez présentes. Dans tous les cas ce fut un réel plaisir de pouvoir vous aider tout au long de cette application. Ce n'est pas encore terminé, il nous reste quelques "petits plus" mais après ce sera fini ! ^^
N'hésitez pas à m'envoyer vos rendus par MP ou sur le topic dans les tutos, c'est toujours un plaisir de voir ce que vous pouvez faire grâce à ce qu'on tente de vous apprendre.
Précédent Suivant