L objectif de cette étape est de se familiariser avec la création de site web sous VS 2012.

Dimension: px

Commencer à balayer dès la page:

Download "L objectif de cette étape est de se familiariser avec la création de site web sous VS 2012."

Antoine Carrière
il y a 8 ans
Total affichages :

1 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 Lancer VS Choisir Fichier -> Nouveau -> Site Web 3. Choisir le modèle «site web ASP.NET vide» 4. Choisir l emplacement du site (répertoire) 5. 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. Cliquez sur le menu «Fichier Nouveau Fichier» 2. Dans les modèles, choisissez «Page HTML» 3. Dans le nom entrez «index.html» 4. Cliquez sur OK 1 Copyright, Mostefai Mohammed Amine, 2013

Choisir le modèle «site web ASP.NET vide» 4. Choisir l emplacement du site (répertoire) 5.

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

2 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

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

3 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. body { 1. Cliquez sur Fichier Nouveau Fichier 2. Dans les modèles, choisissez feuille de style 3. Dans la zone nom, entrez «Site.css» 4. Cliquez sur le bouton OK 5. Entrez le code suivant dans le fichier CSS : 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

Cliquez sur le bouton OK 5. Entrez le code suivant dans le fichier CSS : span#mot { color : red; div#footer { margin 5; min-height : 40px; background-color : green; 6. Enregistrez le fichier 7.

4 8. Cliquez sur Fichier Nouveau Fichier 9. Dans le modèle, choissez «Javascript» 10. Dans la zone nom, entrez «MyScript.JS» 11. 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=" <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

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.

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

5 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

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.

6 7. Faites passer la sourir sur la variable «me» 8. Vérifiez que cette variable correspond à la valeur passée lors de l appel 9. Appuyez sur F5 pour continuer l exécution 10. Fermez la fenêtre du site 6 Copyright, Mostefai Mohammed Amine, 2013

Documents pareils

< Atelier 1 /> Démarrer une application web

MES ANNOTATIONS SONT EN ROUGE : Axel < Atelier 1 /> Démarrer une application web Microsoft France Tutorial Découverte de ASP.NET 2.0 Sommaire 1 INTRODUCTION... 3 1.1 CONTEXTE FONCTIONNEL... 3 1.2 CONTEXTE