Procédure pas à pas : création d'un site Web ASP.NET
Mise à jour : novembre 2007
Cette procédure pas à pas vous présente les fonctionnalités de développement Web de Microsoft Visual Web Developer Express et de Microsoft Visual Studio 2008. Elle vous guide à travers le processus de création d'une page simple. En outre, elle vous initie au concepteur visuel de WYSIWYG.
Cette procédure pas à pas décrit notamment les tâches suivantes :
Création d'un site Web de système de fichiers
Familiarisation avec Visual Web Developer
Exécution des pages à l'aide du serveur de développement ASP.NETServeurs Web dans Visual Web Developer
Composants requis
Pour accomplir cette procédure pas à pas, vous devez disposer des éléments suivants :
- Microsoft Visual Studio 2008 ou Microsoft Visual Web Developer Express. Pour obtenir les informations de téléchargement, consultez le site Web Centre de développement Visual Studio
Création d'un site et d'une page Web
Dans la première partie de la procédure pas à pas, vous créerez un site Web ASP.NET qui possède une page par défaut. Ce site Web sera un site Web de système de fichiers qui ne requiert pas Microsoft Internet Information Services (IIS). Cela vous permet de créer et d'exécuter la page à partir du système de fichiers local de votre ordinateur.
Un site Web de système de fichiers est un site qui stocke des pages et d'autres fichiers dans un dossier que vous sélectionnez sur l'ordinateur local. D'autres options de site Web incluent un site Web IIS local qui stocke les fichiers dans un sous-dossier à la racine des services ISS locale (en général, \Inetpub\wwwroot\). Un site FTP stocke des fichiers sur un serveur distant auquel vous pouvez accéder en utilisant le protocole FTP (File Transfer Protocol). Un site distant stocke des fichiers sur un serveur distant auquel vous pouvez accéder via un réseau local. Pour plus d'informations, consultez Procédure pas à pas : modification de sites Web avec FTP dans Visual Web Developer.
.gif "Remarque") Remarque : |
|---|
Vous pouvez également créer des sites Web à l'aide de projets d'application Web. Pour plus d'informations, consultez Vue d'ensemble des projets d'application Web. |
Pour créer un site Web de système de fichiers
Ouvrez Visual Web Developer.
Dans le menu Fichier, cliquez sur Nouveau site Web.
La boîte de dialogue Nouveau site Web apparaît, comme illustré dans la figure suivante.
.gif)
Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
Dans la zone Emplacement, sélectionnez Système de fichiers et entrez le nom du dossier dans lequel vous souhaitez conserver les pages du site Web.
Par exemple, tapez le nom de dossier C:\Tasks.
Dans la liste Langage, cliquez sur Visual Basic ou Visual C# pour sélectionner le langage de programmation que vous utiliserez dans l'ensemble du projet Web
Remarque :Vous n'écrirez pas de code de programme dans cette procédure pas à pas.
Cliquez sur OK.
Visual Web Developer crée le dossier et une nouvelle page nommée Default.aspx. Par défaut, lorsqu'une page est créée, Visual Web Developer l'affiche en mode Source, ce qui vous permet de consulter les éléments HTML de la page. L'illustration suivante montre une page Web par défaut en mode Source.
.gif)
Visite guidée de Visual Web Developer
Avant de continuer, il est utile de se familiariser avec l'environnement de développement Visual Web Developer. L'illustration suivante vous montre quelques fenêtres et outils de Visual Web Developer.
Diagramme de l'environnement Visual Web Developer
.gif)
Examinez l'illustration précédente et liez le texte à la liste suivante, qui décrit les fenêtres et les outils les plus fréquemment utilisés. (Tous les outils et fenêtres visibles ne sont pas répertoriés ici, uniquement ceux qui sont marqués dans l'illustration précédente.)
Barres d'outils. Fournissez des commandes pour mettre en forme le texte, rechercher du texte, et ainsi de suite. Certaines barres d'outils sont disponibles uniquement lorsque vous travaillez en mode Design.
Explorateur de solutions Affiche les fichiers et les dossiers du site Web.
Fenêtre de document. Affiche les documents que vous utilisez dans les fenêtres à onglet. Vous pouvez basculer entre des documents en cliquant sur les onglets.
Onglet Affichage. Présente les différents affichages du même document. Le mode Design est une surface de modification proche du mode WYSIWYG. Le mode Source est l'éditeur de la page qui affiche le balisage. Le mode Fractionné affiche le document à la fois en mode Design et en mode Source. Vous utiliserez ultérieurement le mode Design et le mode Source dans cette procédure. Si vous préférez ouvrir des pages Web en mode Design, dans le menu Outils, cliquez sur Options, sélectionnez le nœud Concepteur HTML et modifiez l'option Démarrer les pages en.
Propriétés, fenêtre Vous permet de modifier des paramètres de la page, des éléments HTML, des contrôles et d'autres objets.
Fenêtre Propriétés CSS. Affiche les styles CSS actuels lorsque le mode Design est actif.
Fenêtres Gérer les styles et Appliquer des styles. Vous permettent de contrôler les styles CSS du site Web.
Boîte à outils. Fournit des contrôles et des éléments HTML que vous pouvez faire glisser sur une page. Les éléments de la Boîte à outils sont regroupés selon leur fonction.
Explorateur de bases de données. Affiche les connexions de bases de données. Si vous ne voyez pas la fenêtre Explorateur de bases de données dans Visual Web Developer, cliquez sur Autres fenêtres puis sur Explorateur de bases de données dans le menu Affichage.
Remarque :La fenêtre Explorateur de bases de données de Visual Web Developer s'appelle Explorateur de serveurs dans la version complète de Visual Studio.
Vous pouvez réordonner, redimensionner et ancrer les fenêtres selon vos préférences. Le menu Affichage vous permet d'afficher des fenêtres supplémentaires.
Pour avoir une vue d'ensemble de l'environnement de développement
Dans le menu Affichage, cliquez sur Barre d'outils.
Un sous-menu des barres d'outils disponibles s'affiche. Une case à cocher apparaît en regard des barres d'outils actuellement sélectionnées.
Faites défiler la liste de barres d'outils jusqu'en bas puis cliquez sur Personnaliser.
La boîte de dialogue Personnaliser s'affiche.
Passez en revue les barres d'outils disponibles. Lorsque vous avez terminé, cliquez sur Fermer.
Dans le menu Affichage, cliquez sur Explorateur de solutions.
La fenêtre Explorateur de solutions s'affiche. Par défaut, cette fenêtre est ancrée sur un côté de l'environnement Visual Web Developer.
Cliquez avec le bouton droit sur l'élément supérieur de la liste de sites dans l'Explorateur de solutions.
Un menu contextuel d'opérations communes de site Web s'affiche.
Appuyez sur Échap pour fermer le menu contextuel.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le fichier Web.config puis sur Ouvrir pour ouvrir le fichier dans la fenêtre de document.
Double-cliquez sur la page Default.aspx pour l'ouvrir dans la fenêtre de document. Le double-clic sur un fichier est une alternative à l'utilisation de la commande Ouvrir du menu contextuel.
Notez que le nom de chaque page ouverte s'affiche dans un onglet situé en haut de la fenêtre de document.
En bas de la fenêtre de document, cliquez sur Fractionné pour afficher à la fois le mode Source et le mode Design.
Dans le menu Affichage, cliquez sur Fenêtre Propriétés.
La fenêtre Propriétés s'affiche.
Lorsque vous sélectionnez un objet dans la fenêtre de document, la fenêtre Propriétés affiche les propriétés de l'objet sélectionné.
Dans le volet du mode Source, sélectionnez l'élément form, puis examinez les propriétés disponibles dans la fenêtre Propriétés.
Dans le menu Affichage, cliquez sur Boîte à outils.
La fenêtre Boîte à outils s'affiche.
En mode Design, à partir de l'onglet Standard de la Boîte à outils, faites glisser un contrôle Button vers le document et déplacez-le dans l'élément div.
Notez que le mode Source est mis à jour avec la balise appropriée.
Dans le menu Affichage, cliquez sur Explorateur de bases de données.
La fenêtre Explorateur de bases de données s'affiche.
Remarque :La fenêtre Explorateur de bases de données de Visual Web Developer s'appelle Explorateur de serveurs dans la version complète de Visual Studio.
Cliquez avec le bouton droit sur Connexions de données pour consulter les options de base de données disponibles.
Création d'une page Web ASP.NET
Lorsque vous créez un site Web, Visual Web Developer ajoute une page Web ASP.NET (page Web Forms) nommée Default.aspx. Vous pouvez utiliser la page Default.aspx comme page d'accueil du site Web. Toutefois, pour cette procédure pas à pas, vous devez créer et utiliser une nouvelle page.
Pour ajouter une page au site Web
Dans la fenêtre de document, cliquez avec le bouton droit sur l'onglet de la page Default.aspx puis cliquez sur Fermer.
Si vous êtes invité à enregistrer des modifications, cliquez sur Non.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le site Web (par exemple C:\Tasks), puis cliquez sur Ajouter un nouvel élément.
La boîte de dialogue Ajouter un nouvel élément s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
Dans la zone Nom, tapez Home.aspx.
Dans la liste Langage, sélectionnez le langage de programmation que vous préférez utiliser (Visual Basic ou C#).
Désactivez la case à cocher Placer le code dans un fichier distinct.
L'illustration suivante montre la boîte de dialogue Ajouter un nouvel élément.
.gif)
Cliquez sur Ajouter.
Visual Web Developer crée la nouvelle page. Par défaut, la page est affichée en mode Source.
Ajout de HTML à la page
Dans cette partie de la procédure pas à pas, vous ajouterez du texte statique sur la page.
Pour ajouter du texte à la page
En bas de la fenêtre de document, cliquez sur l'onglet Design pour basculer en mode Design.
Dans la page, tapez Liste des tâches.
Exécution de la page
Avant de continuer, vous pouvez tester la page. Pour exécuter une page, vous avez besoin d'un serveur Web. Dans un site Web de production, utilisez IIS comme serveur Web. Toutefois, pour tester une page, vous pouvez utiliser le serveur de développement ASP.NET qui s'exécute en local et ne requiert pas IIS. Pour les sites Web de système de fichiers, le serveur Web par défaut de Visual Web Developer est le serveur de développement ASP.NET.
Pour exécuter la page
Appuyez sur CTRL+F5 pour exécuter la page.
Visual Web Developer démarre le serveur de développement ASP.NET Une icône apparaît sur la barre d'outils Windows pour indiquer que le serveur Web Visual Web Developer est en cours d'exécution, comme le montre la figure suivante :
.gif)
La page s'affiche dans le navigateur. Bien que la page que vous avez créée ait une extension .aspx, elle s'exécute actuellement comme toute page HTML.
Remarque :Si le navigateur affiche une erreur 502 ou une erreur qui indique que la page ne peut pas être affichée, vous devrez peut-être configurer votre navigateur pour ignorer les serveurs proxy en cas de requêtes locales. Pour plus d'informations, consultez Comment : contourner un serveur proxy pour les demandes Web locales.
Fermez le navigateur.
Étapes suivantes
Cette procédure pas à pas a illustré les fonctionnalités de base de Visual Web Developer.
Pour améliorer les contrôles de fichier, envisagez de stocker des fichiers de site Web dans un système de contrôle de source tel que Visual SourceSafe. Pour plus d'informations, consultez Introduction au contrôle de code source.