L’objectif de ce tutoriel est de créer un site web statique avec Visual Studio. Le site sera composé d’une page HTML, une feuille de style CSS et d’un fichier Javascript. Ce tutoriel est relatif au module “introduction à ASP.NET et Visual Studio 2012”
Etape 1 – Lancer Visual Studio
L’objectif de cette étape est de se familiariser avec la création de site web sous VS 2012.
- Lancer VS 2012
- Choisir Fichier -> Nouveau -> Site Web
- Choisir le modèle « site web ASP.NET vide »
- Choisir l’emplacement du site (répertoire)
- Cliquez sur OK
Etape 2 – Création d’une page web
L’objectif de cette étape est de créer des pages HTML avec Visual Studio et d’y ajouter des balises HTML.
- Cliquez sur le menu « Fichierà Nouveau à Fichier »
- Dans les modèles, choisissez « Page HTML »
- Dans le nom entrez « index.html »
- Cliquez sur OK
- Dans l’éditeur, tapez le code suivant entre <body> et </body>
<p>Bienvenue à la <span id="mot">formation</span> ASP.NET et de développement web</p>
- En utilisant la barre d’outils, glissez un « div » juste après la balise fermante </p>
- Dans la fenêtre de propriétés, entrez « footer» dans la zone « ID »
<div id="footer"></div>
Etape 3 : Modification de la page en mode « Conception »
L’objectif de cette étape est d’apprendre à modifier les pages HTML en utilisant le designer de Visual Studio.
- Basculez en mode conception de « Index.html » en appuyant sur le bouton « Conception » de l’éditeur
- Ajoutez les mots suivants : « et de développement web » à la fin du paragraphe
Etape 4 – Création de fichiers CSS et Javascript
- Cliquez sur Fichierà Nouveau à Fichier
- Dans les modèles, choisissez feuille de style
- Dans la zone nom, entrez « Site.css »
- Cliquez sur le bouton OK
- Entrez le code suivant dans le fichier CSS :
body {
}
span#mot {
color : red;
}
div#footer {
margin 5;
min-height : 40px;
background-color : green;
}
- Enregistrez le fichier
- Par un glisser-déposer, faites glisser le fichier CSS à partir de l’explorateur de solutions sur le fichier HTML et remarquez comment le style a été appliqué sur la page
- Cliquez sur Fichier à Nouveau à Fichier
- Dans le modèle, choissez « Javascript »
- Dans la zone nom, entrez « MyScript.JS »
- Dans l’éditeur tapez le code suivant :
function sayHello(me) {
alert('hello ' + me);
}
- Ouvrez le fichier « Index.html » en mode source
- Faites un glisser déposer du fichier « MyScript.js » vers « index.html » (entre les balises HEAD »
- Modifiez le code HTML comme suit :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Site.css" rel="stylesheet" type="text/css" />
<script src="MyScript.js"></script>
</head>
<body>
<p>
Bienvenue à la <span id="mot" onclick="sayHello(‘Votre nom);">formation</span> ASP.NET et
de développement web
</p>
<div id="footer"></div>
</body>
</html>
- Cliquez sur le bouton « Exécuter »
Etape 5 : Débogage
L’objecif de cette étape est d’utiliser les fonctions de débogage de Visual Studio afin de créer un point d’arrêt sur un script JavaScript et d’évaluer une variable dans une fonction JavaScript.
- Fermez la fenêtre du site
- Ouvrez MyScript.js
- Insérez un point d’arrêt sur l’instruction « alert » en double-cliquant sur la barre latérale
- Exécutez le site en appuyant sur « F5 »
- Appuyez sur le texte « formation »
- Remarquez VS qui se met en mode « debogage » et renvoie sur le fichier « MyScript.js »
- Faites passer la sourir sur la variable « me »
- Vérifiez que cette variable correspond à la valeur passée lors de l’appel
- Appuyez sur F5 pour continuer l’exécution
- Fermez la fenêtre du site
Pour télécharger le code source, cliquez ici.