initiation WEB avec Visual Studio

Créer un site web avec Visual Studio

  • Création d’un site web et utilisation du serveur local iisExpress
  • Incorporation d’images
  • Utilisation de l’interface graphique WYSIWYG (what you see is what you get)

Mise en page à l’aide des <div>

  • présentation des div
  • mise en forme automatique Visual Studio
  • affectation d’id aux div, modification d’un style pour une div.
  • utilisation de classe pour assurer un centrage de texte

Positionnement des éléments d’une page.

  • Réalisation d’une petite galerie photo
  • Utilisation des styles float et  margin pour gérer le flottement des éléments.

Structuration d’une page grâce aux balises sectionnantes HTML5

  • Réalisation d’une page dont la structuration est la suivante :

Pour l’utilisation de Framework CSS voir la page Framework Bootstrap

Tutoriel

Créer une page web qui ressemble à ceci :

Le plan de structuration de la page est le suivant :

Aide pour le bouton bleu « See more… »
Ce bouton est créé à l’aide d’une div qui contient un texte inclus dans une balise h2. Cette div se situe dans une section ayant pour id : finArticle

Le code de la section est alors :

[html]
<section id="finArticle">
<p>Etiam rhoncus nunc quis nulla dapibus pellentesque vitae vitae risus. </p>
<div>
<h2> See more…</h2>
</div>
</section>
[/html]

On peut constater que dans la section tous les textes sont centrés , nous pouvons donc déclarer le style suivant :

[css]
#finArticle{
text-align:center;
}
[/css]

Ce style ne s’applique qu’à la balise ayant pour id : finArticle.
Pour appliquer des modifications à une balise div incluse dans finArticle, il faut faire comme ceci :

[css]
#finArticle div {
width: 200px; /*largeur*/
height: 75px; /*hauteur*/
margin: auto; /*centrage de la div dans la page*/
background-color: #0094ff;/*couleur de fond (bleu)*/
border: 1px solid #ccc;/*bordure grise du "bouton"*/
border-radius:8px;/*angles arrondis*/
text-shadow: -1px -1px rgba(0, 0, 0, 0.31);/*effet d’ombrage du texte "See more" */
color: #FFFFFF;/*couleur du premier plan : le texte écrit "See more…"*/
}
[/css]