Door To Darkness
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.



 
AccueilNewsRechercherDernières imagesS'enregistrerConnexion
Le Deal du moment :
Coffret dresseur d’élite ETB ...
Voir le deal
56.90 €

 

 Créer un site web: Partie 2-Le "squelette"

Aller en bas 
AuteurMessage
Yami
Ultime Souverain
Ultime Souverain
Yami


Messages : 187
Age : 28

Créer un site web: Partie 2-Le "squelette" Empty
MessageSujet: Créer un site web: Partie 2-Le "squelette"   Créer un site web: Partie 2-Le "squelette" EmptyVen 8 Jan - 16:48

(Partie précédente: https://door-to-darkness.forumofficiel.fr/t42-creer-un-site-web-partie-1-le-portail)

Objectifs

Maintenant que le portail menant vers les deux sites est terminé, je vais m'occuper du premier site: YAMI Works.
Ici, je commence simplement le design du site et je créée la page d'accueil, sans me soucier des contenus spécifiques.

Go!

Je vais créer une nouvelle page dans le dossier de mon site, que j'appellerai "blog.html".
Ensuite, je vais retoucher un peu de code présent dans ma page "index.html".

Code:
[code]<a href="http://illusiocorp.unblog.fr/"> /*L'adresse qui va vers YAMI WORKS, non définitive!*/
<img src="pictures/BULLEYAMIWORKS.png" align="left" alt="YAMI Works." title="YAMI Works." />
</a>[/code]

Je vais le transformer pour qu'il devienne ainsi:

Code:
[code]<a href="blog.html"> /*L'adresse qui va vers YAMI WORKS, maintenant définitive!*/
<img src="pictures/BULLEYAMIWORKS.png" align="left" alt="YAMI Works." title="YAMI Works." />
</a>[/code]

Ainsi, en cliquant sur cette image depuis le portail...
Créer un site web: Partie 2-Le "squelette" Bulley13
On arrivera directement sur la page de YAMI Works que j'aurai créé, où se trouveront tous les articles (mais on ne s'attaquera pas à ce système d'articles maintenant). Cette page fera également office de page d'accueil.
Passons maintenant aux balises de la page "blog.html".

LA BALISE HEAD

Code:
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
 <link rel="icon" href="icone.ico" />
    <title>YAMI Works. Le fast food de la bande dessinée depuis août 2014.</title>
 <link rel="stylesheet" href="styledublog.css" />
</head>

Rien de nouveau, ce sont les premières informations lues par le navigateur, mis à part un élément:

Code:
<link rel="stylesheet" href="styledublog.css" />

Cette portion de code nous dit que la page que nous sommes en train de créer sera affectée par ce qu'on dira dans la page "styledublog.css". Mais nous y reviendrons plus tard.

Vous aurez également remarqué que j'ai changé le titre de la page, pour qu'on saisisse mieux le rôle de cette partie du site, contrairement au portail qui indiquait "Bienvenue dans mon monde, petites putes." En dessous, de HEAD on va crééer une nouvelle balise:

LA BALISE BODY

Ce sera le "corps" de la page. Dans ce corps, nous allons placer tous nos éléments à l'intérieur d'une sous-balise: DIV. Cette balise sert à structurer non pas du texte, mais des documents. Vous allez comprendre l'intérêt de la démarche juste après. Nous allons également identifier cette balise en lui donnant un nom: "conteneur". En code, cela donne:

Code:
<body>
<div id="conteneur">
</div>
</body>

Maintenant, je vais vous expliquer l'intérêt d'utiliser une balise DIV pour les besoins du design: Vous allez créer dans le dossier de votre site le fichier CSS nommé "styledublog.css" si vous ne l'avez pas encore fait.

MISE EN PLACE DU CONTENEUR

Dans ce fichier CSS, on va utiliser la même astuce de fond que pour le portail, sauf qu'on va changer l'image par celle-ci:

Spoiler:

Si vous avez oublié le code CSS:
Code:
html {
  margin:0;
  padding:0;
  background: url(pictures/CLOUDS.jpg) no-repeat center fixed;
  -webkit-background-size: cover; /*pour anciens navigateurs*/
  background-size: cover; /*version standardisée*/
}

On va ensuite explorer quelque chose de bien pratique. On va donner des propriétés à "conteneur" en ajoutant cette portion!

Code:
#conteneur {
 background-color: black;
 COLOR: white;
 margin-left: 10%;
 margin-right: 10%;
 text-align: center
}

Explications: "Background-color" fait de conteneur un bloc noir. "Color" met le texte en blanc pour qu'on puisse le lire. "Margin left" et "margin right" éloignent les bordures de 10% des bords de la fenêtre. Et enfin, "text-align" va centrer tout texte se trouvant dans le bloc.

Enregistrez cela. Maintenant, à l'intérieur de la balise DIV nommée "conteneur", écrivez n'importe quoi, toutes les conneries que vous voulez.
Et matez le résultat!

Le début de la gloire:

Yes! Vous comprenez maintenant l'importance de la balise DIV, mais surtout, il faut que vous sachiez que lorsque vous attribuez un nom ("id" ), à une balise, il devient très facile d'en faire un bloc modifiable à souhait depuis un fichier CSS. On a la base du site, maintenant, on va retourner à la page "blog.html" et mettre de vraies choses à l'intérieur du conteneur.

LE "HEADER"

C'est le truc en haut du site. Dans la balise nommée "header", on trouvera la bannière (une image), une punchline accrocheuse et une barre de navigation. Voici à peu de choses près ce qu'on doit pouvoir lire:

Code:
<header id="header">
 <center><img src="pictures/yamiworksheader.png" alt="YAMI Works." /></center>
 <h1>YAMI Works. Le fast food de la bande dessinée depuis août 2014.</h1>
 <nav id="mainbar" role="navigation">
            <a href="blog.html" title="BLOG">BLOG</a>&nbsp|&nbsp<a href="yami.html" title="YAMI">YAMI</a>&nbsp|&nbsp<a href="books.html" title="BOOKS">BOOKS</a>&nbsp|&nbsp<a href="newsletter.html" title="NEWSLETTER">NEWSLETTER</a>&nbsp|&nbsp<a href="contact.html" title="CONTACT">CONTACT</a>&nbsp|&nbsp<a href="shop.html" title="SHOP">SHOP</a>
 </nav>
 </header>

>La balise h1 définit un titre très important; selon la même logique, h2 définit un titre moins important que h1.
>La balise nav: Elle est ici nommée "mainbar", pour pouvoir la "lifter" avec le CSS par la suite. Son "rôle" est d'être une zone de navigation: Dedans, on trouve les liens vers chaque page du site.
Enfin: "&nbsp" est le code pour faire un espace en html.

Spoiler:
Voilà, pour l'instant le header est assez moche, et le menu est incomplet, mais on peut remédier à ça à n'importe quel moment. Avec un peu de CSS, par exemple.
Spoiler:
Tout de suite, c'est moins moche! J'ai simplement changé la police de caractère depuis "styledublog.css" et retapé quelques lignes de code.

Voilà mon fichier HTML:
Code:
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
 <link rel="icon" href="icone.ico" />
    <title>YAMI Works. Le fast food de la bande dessinée depuis août 2014.</title>
 <link rel="stylesheet" href="styledublog.css" />
</head>
<body>
<div id="conteneur">
    <header id="header">
 <center><img src="pictures/yamiworksheader.png" alt="YAMI Works." /></center>
 <h1>YAMI Works. Le fast food de la bande dessinée depuis août 2014.</h1>
 <nav id="mainbar" role="navigation">
            <a href="blog.html" title="BLOG">BLOG</a>&nbsp|
 <a href="yami.html" title="YAMI">YAMI</a>&nbsp|
 <a href="books.html" title="BOOKS">BOOKS</a>&nbsp|
 <a href="contact.html" title="CONTACT">CONTACT</a>&nbsp|
 <a href="shop.html" title="SHOP">SHOP</a>&nbsp|
 <a href="mates.html" title="MATES">MATES</a>
 </nav>
 </header>
</div>
</body>

Et mon fichier CSS!

Code:
html {
  margin:0;
  padding:0;
  font-family: "Arial";
  background: url(pictures/CLOUDS.jpg) no-repeat center fixed;
  -webkit-background-size: cover; /*pour anciens navigateurs*/
  background-size: cover; /*version standardisée*/
}

   #conteneur {
 background-color: black;
 COLOR: white;
 margin-left: 10%;
    margin-right: 10%;
 text-align: center
}
   #mainbar {
    border: 3px white ridge;
    font-size: 22px;

}

a {
  text-decoration: none;
  color: red;
}
a:visited {
  color: red;
}

Comme vous pouvez le voir, ça commence à s'allonger. "a { }" désigne tous les liens sur la page.

LE "FOOTER"

On va ajouter une dernière balise et s'arrêter là: C'est "FOOTER". Cette balise concernera tout ce qui est en bas de page, comme les mentions légales ou les partenaires, par exemple.

Code:
<footer>
© Votre nom
</footer>

On pourrait aussi ajouter des balises comme <aside> pour créer un menu latéral, mais n'en voyant pas l'utilité aujourd'hui, on va s'arrêter là. On a bien bossé!
http://yami-works.com/blog.html
Revenir en haut Aller en bas
https://door-to-darkness.forumofficiel.fr
 
Créer un site web: Partie 2-Le "squelette"
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Créer un site web: Partie 1-Le portail
» Bienvenue sur le nouveau site du projet Door To Darkness

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Door To Darkness :: COMMUNAUTÉ :: DO IT YAMI (TUTORIELS)-
Sauter vers: