Procédure pas à pas : utilisation d'un fichier CSS existant

  • Article

Mise à jour : novembre 2007

Cette procédure pas à pas introduit les fonctionnalités de feuilles de style en cascade (CSS) de Visual Studio 2008. Elle vous guide lors de la création et de la modification d'une mise en page à deux colonnes. Elle illustre également les techniques de base de création d'une nouvelle page Web et d'une nouvelle feuille de style en cascade.

Cette procédure pas à pas illustre les tâches suivantes :

  • Création d'un site Web de système de fichiers

  • Utilisation des fonctionnalités CSS de Visual Web Developer

  • Création d'une mise en page à deux colonnes en utilisant CSS

    Remarque :

    Cette procédure pas à pas montre des fonctionnalités supplémentaires de Visual Studio 2008 qui ne sont pas abordées dans Procédure pas à pas : création et modification d'un fichier CSS.

Composants requis

Vous avez besoin des composants suivants pour exécuter cette procédure pas à pas :

  • Visual Studio 2008 ou Microsoft Visual Web Developer Express. Pour les informations de téléchargement, consultez le site Web Microsoft Visual Studio Express Editions.

  • Le .NET Framework version 3.5.

  • Une image que vous pouvez ajouter à la page Web. L'image n'est pas importante ; vous utiliserez uniquement l'image pour illustrer des fonctionnalités de positionnement.

Création d'un site Web

Dans cette partie de la procédure pas à pas, vous allez créer un site Web et lui ajouterez une nouvelle page.

Si vous avez déjà créé un site Web dans Visual Web Developer (par exemple, en effectuant les étapes décrites dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer), vous pouvez utiliser ce site Web et passer à l'étape « Ajout d'éléments HTML et d'un fichier CSS », plus loin dans cette procédure. Sinon, créez un site Web en suivant ces étapes.

Pour créer un site Web de système de fichiers

  1. Ouvrez Visual Web Developer.

  2. Dans le menu Fichier, cliquez sur Nouveausite Web.

    La boîte de dialogue Nouveau site Web s'affiche.

  3. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.

  4. Dans la zone Emplacement, sélectionnez Système de fichiers, puis tapez le nom du dossier dans lequel vous souhaitez conserver les pages du site Web.

    Par exemple, tapez le nom de dossier suivant : C:\CSSWebSite.

  5. Dans la liste Langage, cliquez sur Visual Basic ou Visual C#.

    Le langage de programmation que vous aurez sélectionné sera la valeur par défaut pour votre site Web, mais vous pouvez définir individuellement le langage de programmation pour chaque page.

  6. Cliquez sur OK.

    Visual Web Developer crée le dossier et une page nommée Default.aspx.

Ajout d'éléments HTML et d'un fichier CSS

Pour vous permettre de vous concentrer sur les outils de mise en forme et de style au lieu de créer des éléments auxquels appliquer un style, un jeu d'éléments est fourni dans cette section. Vous pouvez copier et coller ces éléments dans une page. Le code inclut des sections construites avec des éléments div, il comprend une bannière, des sections gauche et droite de barre latérale, une section de contenu principale et un pied de page. Ces éléments simples contiennent du texte, sur lequel vous pourrez travailler, et des ID d'éléments. Dans certains cas, les éléments contiennent des classes CSS que vous pouvez utiliser comme style de certains éléments spécifiques de la page.

Ajout d'éléments HTML

Cette section ajoute du contenu avec lequel travailler. La page se compose d'une bannière avec du texte et une zone de recherche, un pied de page et trois sections de texte. Le contenu principal de la page se trouve dans la dernière section de texte.

Pour ajouter des éléments HTML à la page

  1. Ouvrez la page Default.aspx en mode Source.

  2. Ajoutez le code suivant après l'élément <form>.

    <div id="pagecontainer">
<div id="banner">
<h1>AdventureWorks Styling Page</h1>
<h2>Making CSS Styling Easier in Design View</h2>
<div id="search">Find:<input id="searchbox" type="text" />
<input id="searchbutton" type="button" value="Go" />
</div>
</div>
<div id="leftsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="rightsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="maincontent" class="column">
<h2>Matters of the Web</h2>
<p> Pellentesque mattis tincidunt ipsum. Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum 
lacus a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod 
nulla. Suspendisse potenti. Donec in mi nec odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam 
pede tempus magna, mollis dapibus quam est et magna. Aenean eros massa, elementum vehicula, dapibus eget, lobortis non, 
mauris. Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna. Praesent placerat nibh vel metus viverra 
tincidunt.</p>
<asp:Image ID="Image1" />
<p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus. Ut sed eros sit amet neque malesuada 
malesuada. Fusce porttitor cursus eros. Maecenas libero odio, convallis vel, tristique id, sodales vel, leo. Curabitur nibh 
neque, interdum eget, convallis id, adipiscing nec, risus. Suspendisse rutrum dui sed urna. Pellentesque leo felis, tempor eu, 
convallis venenatis, auctor vitae, justo. In at massa.</p>
</div>
<div id="footer">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p>
</div>
</div>

  3. Enregistrez la page.

  4. Basculez en mode Design pour consulter la mise en forme par défaut.

Ajout d'un fichier CSS

Dans cette section, vous allez ajouter une feuille de style en cascade (fichier .css) qui met en forme et applique des styles aux éléments que vous avez ajoutés à la page dans la dernière section. La feuille de style utilise des règles de style basées à la fois sur des ID et des classes.

Pour ajouter un fichier CSS

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web puis cliquez sur Ajouter un nouvel élément.

    La boîte de dialogue Ajouter un nouvel élément s'affiche alors.

  2. Sous Modèles Visual Studio installés, cliquez sur Feuille de style.

  3. Dans la zone Nom, tapez Layout.css, puis cliquez sur Ajouter.

    L'éditeur s'ouvre sur une nouvelle feuille de style qui contient une règle de style body.

  4. Supprimez la règle de style body puis collez les règles suivantes dans le fichier.

    #pagecontainer {
    width: 800px;
}
#banner {
    height: 126px;
    padding-top: 18px;
    background-color: #DD6B26;
}
#search {
    width: 254px;
    position: absolute;
    top: 115px;
    left: 545px;
    font-family: "Lucida Sans";
    font-size: small;
    color: #930626;
}
#leftsidebar {
    width: 188px;
    float: left;
    padding-right: 10px;
}
#rightsidebar {
    width: 238px;
    float: right;
    padding-left: 6px;
}
#maincontent {
    border-left: 1px solid #DD6B26;
    margin-left: 203px;
    margin-right: 260px;
    padding-left: 13px;
    padding-right: 13px;
}
#footer {
    text-align: center;
    background-color: #DD6B26;
}
h1 {
    font-family: "Lucida Calligraphy";
    font-size: x-large;
    font-weight: bold;
    color: #930626;
    text-align: center;
    height: 42px;
    margin-bottom: 0px;
}
h2 {
    font-family: "Lucida Sans";
    font-variant: small-caps;
    font-size: large;
    color: #307630;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0px;
    margin: 0;
    padding: 0;
}
p {
    font-family: "Palatino Linotype";
    font-size: medium;
}

  5. Enregistrez le fichier.

Ajout de règles de style à la feuille de style

Lorsque vous travaillez avec une feuille de style CSS existante, vous pouvez utiliser la fenêtre Gérer les styles pour modifier les règles de style de la feuille de style. Dans cette procédure pas à pas, vous allez modifier la page de la disposition en trois colonnes d'origine en une disposition à deux colonnes. Vous allez ensuite supprimer les styles qui correspondent à la disposition d'origine.

Suppression de la colonne de droite et changement de style

Pour modifier la mise en page en une disposition à deux colonnes, vous pouvez supprimer le code qui crée la colonne de droite. Vous pouvez ensuite changer le style des autres éléments pour créer la disposition à deux colonnes.

Pour supprimer le code et la mise en forme de la colonne de droite

  1. Ouvrez ou basculez vers la page Default.aspx.

  2. Basculez en mode Design.

  3. Depuis l'Explorateur de solutions, faites glisser le fichier .css que vous avez créé et déplacez-le sur la page.

    Cela lie le fichier .css à la page actuelle. La page change pour refléter les styles définis dans le fichier .css.

  4. Basculez en mode Source.

  5. Supprimez l'élément div qui démarre avec <div id="rightsidebar" class="column">.

  6. Enregistrez le fichier.

  7. Dans le menu Format, cliquez sur Styles CSS puis cliquez sur Gérer les styles.

    La fenêtre Gérer les styles s'affiche. (Par défaut, la fenêtre est ancrée.)

  8. Dans la fenêtre Gérer les styles, cliquez avec le bouton droit sur le style #rightsidebar puis cliquez sur Supprimer.

    Remarque :

    L'icône du style #rightsidebar n'a pas de cercle autour de lui, ce qui indique qu'il n'est plus utilisé dans la page et peut être supprimé.

  9. Dans la fenêtre Gérer les styles, cliquez avec le bouton droit sur le style #maincontent puis cliquez sur Modifier le style.

    La boîte de dialogue Modifier le style s'affiche.

  10. Sous Catégorie, cliquez sur Zone.

  11. Sous marge, modifiez la valeur de la zone droite sur 0.

  12. Cliquez sur OK.

  13. Basculez en mode Design. Vous avez maintenant une disposition à deux colonnes.

  14. Enregistrez le fichier.

Ajout d'une image

Avant de définir le style d'une image, vous devez ajouter l'image au projet et définir la propriété ImageUrl de l'image.

Pour ajouter une image au projet

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web, puis cliquez sur Ajouter un élément existant.

    La boîte de dialogue Ajouter un élément existant s'affiche.

  2. Sélectionnez le fichier image et cliquez sur Ajouter.

Maintenant que l'image a été ajoutée à votre projet, vous devez assigner l'image à un contrôle Image.

Pour assigner une image au contrôle Image

  1. Ouvrez ou basculez vers le fichier Default.aspx.

  2. Basculez en mode Design et sélectionnez le contrôle Image.

  3. Dans la fenêtre Propriétés, affectez l'URL de l'image récemment ajoutée à la propriété ImageUrl du contrôle Image.

Ajout de règles de style pour mettre en forme l'image

Pour rendre la position de l'image plus harmonieuse avec le texte, vous pouvez positionner l'image en positionnement flottant par rapport au bord gauche ou droit de la colonne principale et ajouter un espacement (padding) qui déplace le texte loin de l'image.

Pour ajouter des images à la disposition

  1. Ouvrez ou basculez vers le fichier Layout.css.

  2. Ajoutez le code suivant à la feuille de style.

    img {
    margin: 0px;
    border: 1px solid #DD6B26;
    padding: 5px;
}
.floatright {
    margin-left: 10px;
    float:right;
}
.floatleft {
    float: left;
    margin-right: 10px;
}

  3. Ouvrez ou basculez vers le fichier Default.aspx.

  4. Basculez en mode Design et sélectionnez le contrôle Image.

  5. Dans la fenêtre Gérer les styles, appliquez le style CSS floatright ou le style CSS floatleft au contrôle Image en cliquant avec le bouton droit sur le style CSS et en sélectionnant Appliquer un style.

    Le style CSS que vous avez sélectionné est assigné au style img.

Étapes suivantes

Cette procédure pas à pas illustre les techniques de base pour travailler avec des styles CSS en utilisant l'interface utilisateur de Visual Studio 2008. Vous pouvez également parcourir les techniques suivantes de contrôle de l'apparence des pages Web.

Voir aussi

Tâches

Procédure pas à pas : création et modification d'un fichier CSS

Concepts

Vue d'ensemble de l'utilisation de CSS

Contrôles serveur Web ASP.NET et styles CSS

Comment : utiliser la fenêtre Propriétés CSS