docDéveloppement d`application web avec Visual Studio 2012 et ASP
download 
Plainte Transcription
Développement d`application web avec Visual Studio 2012 et ASP
Développement d’application web avec Visual Studio
2012 et ASP.NET
Tutoriel 1.1 : Création d’un site web statique
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.
Etape 1 – Lancer Visual Studio
L’objectif de cette étape est de se familiariser avec la création de site web sous VS 2012.
1.
2.
3.
4.
5.
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.
1.
2.
3.
4.
1
Cliquez sur le menu « Fichier Nouveau Fichier »
Dans les modèles, choisissez « Page HTML »
Dans le nom entrez « index.html »
Cliquez sur OK
Copyright ©, Mostefai Mohammed Amine, 2013
Développement d’application web avec Visual Studio
2012 et ASP.NET
Tutoriel 1.1 : Création d’un site web statique
5. 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>
6. En utilisant la barre d’outils, glissez un « div » juste après la balise fermante </p>
7. Dans la fenêtre de propriétés, entrez « mot » 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.
1. Basculez en mode conception de « Index.html » en appuyant sur le bouton « Conception » de l’éditeur
2
Copyright ©, Mostefai Mohammed Amine, 2013
Développement d’application web avec Visual Studio
2012 et ASP.NET
Tutoriel 1.1 : Création d’un site web statique
2. Ajoutez les mots suivants : « et de développement web » à la fin du paragraphe
Etape 4 – Création de fichiers CSS et Javascript
L’objectif de cette étape est de créer et d’éditer des fichiers CSS et JavaScript en utilisant Visual Studio.
1.
2.
3.
4.
5.
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;
}
6. Enregistrez le fichier
7. 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
3
Copyright ©, Mostefai Mohammed Amine, 2013
Développement d’application web avec Visual Studio
2012 et ASP.NET
8.
9.
10.
11.
Tutoriel 1.1 : Création d’un site web statique
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);
}
12. Ouvrez le fichier « Index.html » en mode source
13. Faites un glisser déposer du fichier « MyScript.js » vers « index.html » (entre les balises HEAD »
14. 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>
15. Cliquez sur le bouton « Exécuter »
4
Copyright ©, Mostefai Mohammed Amine, 2013
Développement d’application web avec Visual Studio
2012 et ASP.NET
Tutoriel 1.1 : Création d’un site web statique
Etape 4 : 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.
1. Fermez la fenêtre du site
2. Ouvrez MyScript.js
3. Insérez un point d’arrêt sur l’instruction « alert » en double-cliquant sur la barre latérale
4. Exécutez le site en appuyant sur « F5 »
5. Appuyez sur le texte « formation »
6. Remarquez VS qui se met en mode « debogage » et renvoie sur le fichier « MyScript.js »
5
Copyright ©, Mostefai Mohammed Amine, 2013
Développement d’application web avec Visual Studio
2012 et ASP.NET
7.
8.
9.
10.
6
Tutoriel 1.1 : Création d’un site web statique
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
Copyright ©, Mostefai Mohammed Amine, 2013
