Concevoir visuellement vos sites

Surface de conception visuelle

Visual Web Developer offre une zone de conception visuelle WYSIWYG puissante qui permet de créer vos applications Web. Il inclut tous les contrôles de mise en forme courants tels que la sélection, le choix de la taille et la mise en forme de polices, les puces et la numérotation, etc.

Boîte à outils

Le Boîte à outils contient des composants et des contrôles que vous utilisez par glisser-déplacer pour créer votre site Web. Les contrôles sont regroupés dans des catégories portant des noms logiques tels que Data (Données), Validation et Login (Connexion). Pour ajouter des contrôles à des pages Web, il vous suffit de cliquer sur le contrôle et de le faire glisser sur la page !

fenêtre Propriétés

La fenêtre Propriétés vous permet d'afficher et de modifier les propriétés et les événements d'éléments de votre page Web. Visual Web Developer affichera les valeurs par défaut chaque fois que cela sera possible, ou affichera des éléments de menu contextuel, tels qu'un menu Sélecteur de couleurs permettant de sélectionner la couleur d'arrière-plan d'une page Web ou un menu de boîte de dialogue Ouvrir un fichier lors de la sélection d'une image.

Contrôles de connexion

Pour la sécurité de votre site Web, ASP.NET vous propose une série de contrôles de connexion, tels que les contrôles CreateUserWizard et Login . Ils vous permettent de générer une interface utilisateur pour créer un nouvel utilisateur ou d'établir une connexion à un site Web. Vous pouvez facilement configurer ces contrôles pour envoyer un courrier électronique de confirmation aux nouveaux utilisateurs après leur inscription, ou aider les utilisateurs à récupérer les mots de passe oubliés.

Contrôles WebPart

Visual Web Developer propose un système de gestion des composants WebPart qui permet aux visiteurs d'un site de créer des portails personnalisés tels que ceux situés sur les sites my.msn.com et Microsoft SharePoint. Grâce à la personnalisation, les utilisateurs de votre site Web peuvent faire glisser des composants WebPart sur une page de portail pour créer une page personnalisée présentant uniquement le contenu qui les intéresse. Visual Web Developer fournit l'infrastructure sous-jacente permettant de personnaliser vos applications Web. L'image à gauche illustre la façon dont vos utilisateurs font glisser des composants WebPart personnalisés, tels qu'un contrôle Calendar, sur leurs pages.

Contrôles de navigation

Il peut s'avérer compliqué de créer des façons logiques et attrayantes d'indiquer l'endroit où se trouve un utilisateur sur un site Web. Dans ASP.NET 2,0, vous pouvez utiliser les contrôles TreeView, SiteMapPathet Menu pour aider les utilisateurs à parcourir votre site Web et son contenu. Les contrôles TreeView et Menu permettent des expériences utilisateur avancées en fournissant des fonctionnalités JavaScript côté client pour les navigateurs de niveau supérieur tels que les dernières versions de Microsoft Internet Explorer et de Netscape Navigator. Tous les contrôles de navigation utilisent un nouveau format de fichier connu sous le nom de plan du site (*.sitemap), qui définit la hiérarchie et la navigation de votre site Web, comme indiqué ci-dessous.

Conjointement avec le fichier de carte de site, vous pouvez utiliser le contrôle TreeView pour afficher la navigation du site dans une arborescence utilisant n'importe quel format TreeView intégré tel que le format de l'Explorateur Windows.

Agrandir>

Navigateur des balises

Le Navigateur des balises vous permet de sélectionner des éléments en mode Conception. Il sélectionne automatiquement les balises ASP.NET et HTML correspondantes pour votre sélection. Une fois que vous avez sélectionné différents éléments dans la page, le Navigateur de balises met en surbrillance les balises HTML correspondantes. Vous pouvez également cliquer sur une balise pour voir l'élément correspondant en mode Conception.

Structure du document

La vue Structure du document, disponible par le biais de la commande de menus Affichage | Autres fenêtres | Structure du document , présente un affichage de nœud d'arbre de la structure de votre formulaire Web et les composants associés.

Agrandir>

Pages maîtres

Les pages maîtres vous permettent de créer une conception « maître » de l'apparence de votre site Web. Grâce aux pages maîtres, vous pouvez garantir la cohérence visuelle de vos pages Web. La modification de la page maître met automatiquement à jour les pages qui utilisent la conception de page maître modifiée. Votre application Web peut comporter plusieurs pages maîtres, chacune contrôlant différents ensembles de pages, et vous pouvez même avoir des pages maîtres imbriquées.

Ce diagramme présente une page de contenu ouverte dans Visual Web Developer. La zone grise est héritée du fichier MasterPage1.master et ne peut pas être modifiée. Le contenu personnalisé de la page est placé dans le contrôle Content.

Agrandir>

Concepteur de tableau

Visual Web Developer inclut également des modèles de tableau prédéfini pour simplifier la conception de la disposition d'une page Web. Pour ajouter un tableau, sélectionnez la commande de menus Disposition | Insérer un tableau qui affiche ensuite la boîte de dialogue Insérer un tableau . Cette boîte de dialogue vous permet de sélectionner un modèle prédéfini ou de créer votre propre modèle.

Une fois le tableau ajouté à votre page, vous pouvez redimensionner graphiquement une colonne ou une cellule de tableau individuelle. Le concepteur vous indique automatiquement la largeur, en pixels, de votre sélection.