Microsoft Expression Web - Page Web vierge
Comme nous avons déjà créé notre site Web, nous devrons maintenant créer notre page d'accueil. Dans le chapitre précédent, nous avons créé un site Web d'une page et notre page d'accueil a été créée à ce moment-là automatiquement par Expression Web. Donc, si vous avez créé un site Web vierge, vous devrez créer une page d'accueil pour votre site.
Microsoft Expression Web peut créer les types de pages suivants -
- HTML
- ASPX
- ASP
- PHP
- CSS
- La page principale
- Modèle Web dynamique
- JavaScript
- XML
- Fichier texte
Dans ce chapitre, nous allons créer une page HTML et sa feuille de style correspondante.
Créer une page vierge
Pour créer une page vierge, vous pouvez simplement aller dans le menu Fichier et sélectionner New → Page… option de menu.
Dans la nouvelle boîte de dialogue, vous pouvez créer différents types de pages vierges telles que la page HTML, la page ASPX, la page CSS, etc. et cliquez sur OK.
Comme vous pouvez le voir ici, le code par défaut est déjà ajouté par Microsoft Expression Web.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<h1>
This is a blank web page
</h1>
</body>
</html>Comme vous pouvez le voir, votre page nouvellement créée porte le nom de fichier Untitled_1.html ou Untitled_1.htm. Vous devrez enregistrer la page en appuyant sur Ctrl + S et en spécifiant le nom.
Comme notre site Web contient déjà un index.htmlpage, nous n'en avons pas besoin d'une autre. Cependant, si vous avez créé un site Web vide, nommez cette pageindex.html.
Pour voir votre site Web dans un navigateur, allons dans le menu Fichier et sélectionnez le Preview in Browser → Any browser, disons Internet Explorer.
Créer une page CSS
Passons en revue le processus étape par étape de création d'une page CSS.
Step 1 - Pour créer une page CSS, allez dans le menu Fichier et sélectionnez New → Page… option de menu.
Step 2 - Sélectionnez General → CSS et cliquez sur OK.
Step 3 - Enregistrez la page et tapez un nom pour la feuille de style.
Step 4 - Cliquez sur le Save bouton.
Step 5 - Passons maintenant à la page index.html.
Step 6 - Dans le Manage Styles Panel, Cliquez sur Attach Style Sheet.
Step 7 - Accédez à votre feuille de style et sélectionnez la page actuelle de «Joindre à» et Lien de «Joindre en tant que» et cliquez sur OK.
Step 8 - Maintenant, vous verrez qu'une nouvelle ligne est ajoutée automatiquement dans la page index.html.
<link href = "sample.css" rel = "stylesheet" type = "text/css" />Step 9 - Le bodyelement définit le corps du document. Pour coiffer le<body>tag, nous devons créer un nouveau style. Tout d'abord, sélectionnez la balise de corps en mode Création, puis cliquez sur Nouveau style… dans le panneau Appliquer les styles ou Gérer les styles, ce qui ouvrira la boîte de dialogue Nouveau style.
Ici, vous pouvez définir les différentes options pour votre style. La première étape consiste à sélectionner le corps dans la liste déroulante Sélecteur, puis à sélectionner la feuille de style existante dans la liste déroulante «Définir dans».
Step 10 - Depuis l'URL, sélectionnez le sample.cssfichier. Sur le côté gauche, il y a une liste de catégories comme la police, l'arrière-plan, etc. et actuellement la police est en surbrillance. Définissez les informations relatives à la police selon vos besoins, comme indiqué dans la capture d'écran ci-dessus, puis cliquez sur OK.
Step 11- Vous pouvez maintenant voir dans la vue de conception que la couleur d'arrière-plan et la police ont changé pour ce que nous avons sélectionné. Maintenant, si vous ouvrez le fichier sample.css, vous verrez que toutes les informations sont automatiquement stockées dans le fichier CSS.
Aperçu de notre page Web dans un navigateur. Vous observerez que le style est appliqué à partir du fichier CSS.
