Microsoft Expression Web - Guide rapide

Microsoft Expression Web est un outil professionnel complet pour la conception, le développement et la publication de sites Web riches en fonctionnalités conformes aux normes Web. Vous pouvez utiliser Expression Web pour créer des pages Web et des sites qui vous permettent de transférer des fichiers entre votre ordinateur et votre compte d'hébergement.

Expression Web peut concevoir et développer des pages Web en utilisant HTML5, CSS 3, ASP.NET, PHP, JavaScript, XML + XSLT et XHTML.

Expression Web 4 nécessite .NET Framework 4.0 et Silverlight 4.0 pour être installé et exécuté.

Microsoft Expression Web - Historique

Microsoft Expression Web - Historique Microsoft a publié la première version CTP (Community Technology Preview) d'Expression Web le 14 mai 2006.

Microsoft Expression Web 4 a été publié le 7 juin 2010.

Il a ajouté l'option de compléments HTML et l'accès à une fonctionnalité Web pour tester des pages sur des navigateurs qui ne peuvent pas être installés sur le système de l'utilisateur, tels que les navigateurs Mac OS X ou Linux.
Il fournit également un vérificateur de référencement à l'aide duquel vous pouvez analyser les sites Web déjà créés par rapport aux meilleures pratiques pour obtenir le meilleur classement possible des moteurs de recherche.

Expression Web Service Packs

Expression Web Service Packs Expression Web 4 Service Pack 1 a été publié en mars 2011 et a ajouté la prise en charge d'IntelliSense pour HTML5 et CSS.

Expression Web 4 Service Pack 2 a été publié en juillet 2011. Il a résolu un certain nombre de problèmes et introduit de nouvelles fonctionnalités telles que -

Prise en charge de jQuery IntelliSense
un panneau de gestion des extraits
Panneau instantané interactif
la fonctionnalité de commentaire / décommenter en mode Code, et
personnalisation de l'espace de travail et de la barre d'outils.

En décembre 2012, Microsoft a annoncé qu'Expression Studio ne serait plus un produit autonome. Expression Blend est en cours d'intégration dans Visual Studio, tandis que Expression Web et Expression Design seront désormais des produits gratuits.

Configuration requise

Pour créer un site Web à l'aide de Microsoft Expression Web, votre ordinateur doit répondre aux exigences suivantes:

Vous devez avoir au moins Windows XP avec Service Pack 3 ou les derniers systèmes d'exploitation.
Vous devriez avoir un PC avec un processeur de 1 GHz ou plus rapide.
Votre PC doit avoir 1 Go de RAM ou plus.
Votre ordinateur doit disposer d'au moins 2 Go d'espace disque disponible.
Vous devez avoir .NET Framework 4.0 et Silverlight 4.0.
Votre ordinateur doit prendre en charge les graphiques Microsoft DirectX® 9.0.
Vous devriez avoir un lecteur compatible DVD.
Vous devriez avoir un écran de résolution 1024 × 768 ou supérieure avec des couleurs 24 bits.
Certaines fonctionnalités du produit nécessitent Firefox 3.0 ou version ultérieure, Internet Explorer 8. Vous devriez donc avoir la même version.

Les exigences réelles et la fonctionnalité du produit peuvent varier en fonction de la configuration de votre système et de votre système d'exploitation.

Microsoft fournit une version gratuite de Microsoft Expression Web qui peut être téléchargée à partir de https://www.microsoft.com/en-pk/download/details.aspx?id=36179

Installation

Step 1 - Avant de pouvoir installer Expression Web, vous devez avoir installé .NET Framework 4.0.

Step 2- Une fois le téléchargement terminé, exécutez le programme d'installation. La boîte de dialogue suivante s'affiche.

Step 3 - Cliquez sur le bouton Accepter.

Step 4 - Sélectionnez le bouton radio Oui, puis cliquez sur Suivant.

Step 5- Vous pouvez également choisir un autre emplacement pour l'installation. Sélectionnez l'emplacement et cliquez sur le bouton Installer.

Le processus d'installation démarre.

Une fois l'installation terminée, vous verrez la boîte de dialogue suivante.

Step 6 - Cliquez sur Terminer pour continuer.

Dans le chapitre précédent, nous avons installé Microsoft Expression Web et nous sommes maintenant prêts à commencer à travailler dessus. Dans ce chapitre, nous allons apprendre à créer un nouveau site Web à partir de zéro.

Créer un site Web

Pour créer un nouveau site Web, ouvrons Microsoft Expression Web.

Ensuite, vous devez suivre les étapes ci-dessous.

Step 1 - Sélectionnez Site → New Site… option de menu.

Step 2 - Il ouvrira la boîte de dialogue suivante à partir de laquelle vous pouvez créer ou importer différents types de site Web.

Step 3 - Pour plus de simplicité, sélectionnons General → One Page Site.

Spécifiez l'emplacement ou vous pouvez accéder à l'emplacement où vous souhaitez que le nouveau site Web soit créé.
Tapez le nom de votre site Web dans le champ de nom et cliquez sur OK.

Step 4 - Le nouveau site Web sera créé avec une page nommée default.htm. Renommons-le enindex.html avec un clic droit sur le fichier et en cliquant sur l'option Renommer.

Step 5 - La valeur par défaut doctype utilisé dans Expression Web est -

<!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">

Vous pouvez le voir en passant simplement au code view.

Vous pouvez changer le doctype de Tools → Page Editor Options → Authoring.

Step 6 - Maintenant, ajoutons <h1> étiquette à l'intérieur du body et du texte comme indiqué dans le code suivant.

<!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" /> 
   </head> 
   
   <body> 
      <h1> 
         This my first Web page 
      </h1> 
   </body> 
</html>

Step 7 - Pour voir notre site Web dans un navigateur, allons dans le menu Fichier et sélectionnez le Preview in Browser → Any browser, disons, Internet Explorer.

Cela ouvrira notre site Web dans Internet Explorer.

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 l'étiquette 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.

Voyons un aperçu de notre page Web dans un navigateur. Vous observerez que le style est appliqué à partir du fichier CSS.

Dans ce chapitre, nous couvrirons la mise en page de base de vos pages Web. Avant de créer la mise en page de notre page Web, nous devons réfléchir à notre contenu, puis concevoir la façon dont nous voulons présenter ce contenu, car c'est le contenu qui sera visible sur notre site Web.

C'est à nous comment nous présentons notre contenu afin que nos téléspectateurs trouvent notre site et restent ensuite pour le vérifier. La mise en page comprendra probablement le logo ou la bannière de l'entreprise en haut, le menu de navigation, une zone de contenu pouvant inclure plusieurs colonnes et un pied de page en bas de la page.

Auparavant, les développeurs utilisaient des tableaux pour obtenir ce look. Les tables ont créé un groupe de boîtes qui ont été utilisées pour créer des lignes et des colonnes. Désormais, les concepteurs Web utilisent<div>s pour former les boîtes et CSS pour placer ces boîtes sur la page.

Balise <div>

Voici quelques-unes des fonctionnalités de la balise <div>.

La balise <div> définit une division ou une section dans un document HTML et facilite la gestion, le style et la manipulation de ces divisions ou sections.
Il est utilisé pour regrouper des éléments de bloc pour les formater avec CSS.
Les navigateurs placent généralement un saut de ligne avant et après l'élément div.
La balise <div> est un élément de niveau bloc.
La balise <div> peut contenir presque n'importe quel autre élément.
La balise <div> ne peut pas être à l'intérieur d'une balise <p>.

Exemple

Jetons un coup d'œil à un exemple simple dans lequel nous utiliserons les balises <div> </div> pour créer les différentes boîtes et règles de style.

Step 1 - Ouvrez Expression Web puis le index.html page que nous avons créée dans le chapitre précédent.

Step 2- Comme le montre la capture d'écran ci-dessus, la vue Code est mise en surbrillance par défaut. Vous pouvez travailler dansCode View ou Design View, mais vous pouvez également voir la vue fractionnée qui ouvrira à la fois la vue Code et la vue Création. Alors sélectionnons leSplit View option.

Step 3 - Le bodyelement définit le corps du document. Pour styliser la balise <body>, nous devons créer un nouveau style. Sélectionnez d'abord l'étiquette de corps en mode Création, puis cliquez sur le boutonNew Style…dans le panneau Appliquer les styles, qui ouvrira la boîte de dialogue Nouveau style. Ici, vous pouvez définir les différentes options pour votre style.

Step 4 - La première étape consiste à sélectionner le body du Selectorliste déroulante, puis sélectionnez la feuille de style existante dans «Définir dans» la liste déroulante. Depuis l'URL, sélectionnez le fichier CSS que nous avons créé dans le chapitre précédent.

Sur le côté gauche, il y a un Categoryliste telle que Police, Arrière-plan, etc. et la police actuelle est mise en surbrillance. Définissez les informations relatives à la police selon vos besoins, comme indiqué dans la capture d'écran ci-dessus.

Step 5 - Sélectionnez le Background colortu veux. Vous pouvez également sélectionner l'image de votre arrière-plan en utilisant le bouton du navigateur. Une fois que vous avez terminé avec l'arrière-plan, définissez vos bordures si vous le souhaitez.

Step 6 - Choisissons le double lineoption pour la bordure et choisissez la largeur et la couleur également dans les listes déroulantes. Une fois que vous avez terminé avec le style, cliquez sur OK.

Step 7- Vous pouvez maintenant voir dans la vue de conception que la couleur d'arrière-plan est modifiée pour ce que nous avons sélectionné. Si vous ouvrez le fichier sample.css, vous verrez que toutes les informations sont automatiquement stockées dans le fichier CSS.

Step 8 - Allez au index.html à nouveau et faites glisser le <div> dans le panneau "Boîte à outils" et déposez-le sur votre page ouverte.

Step 9 - Au-dessus du code view, tu verras <body> et <div> balises, cliquez sur <div>puis dans le panneau Appliquer les styles, cliquez sur Nouveau style…. qui ouvrira la boîte de dialogue Nouveau style.

Tapez «#container» dans le champ Sélecteur. La marque dièse # est un sélecteur d'ID. Dans la liste déroulante «Définir dans», sélectionnez la feuille de style existante et cochez l'option «Appliquer un nouveau style à la sélection de document». Accédez à la catégorie Arrière-plan.

Step 10 - Sélectionnez la couleur d'arrière-plan, sélectionnons la couleur blanche, puis allons dans la catégorie Boîte.

Step 11 - Définir padding et margin puis allez au Position Catégorie

Step 12- Réglez la largeur sur 90%. Cependant, ne spécifiez pas la hauteur car ici nous voulons que le conteneur se développe lorsque nous entrons dans le contenu. Cliquez sur le bouton OK.

De même, ajoutons des styles pour l'en-tête, la navigation du haut, la navigation de gauche, le contenu principal et le pied de page.

sample.css

Voici le code dans sample.css feuille de style après avoir ajouté tous les styles mentionnés ci-dessus.

body { 
   font-family: Calibri; 
   font-size: medium; 
   font-weight: normal; 
   font-style: normal; 
   font-variant: normal; 
   text-transform: none; 
   color: #0000FF; 
   background-color: #CCFFFF; 
   background-image: none; 
   border: medium double #FF0000; 
} 

#container { 
   background-color: #FFFFFF; 
   padding: 8px; 
   margin: 8px; 
   width: 90%; 
} 

#header {  
   background-color: #54B431;   
   background-repeat: no-repeat;  
   background-position: right center;  
   height: 170px;  
} 

#top-nav {  
   height: 50px;  
   border-top: solid medium #006600;  
   border-bottom: solid medium #006600;  
   background-color: #FFFFFF;  
}  

#left-nav {  
   margin: 20px 0px 10px 0px;  
   width: 180px;  
   float: left;  
   border: thin dashed #006600;  
} 

#main-content {  
   margin: 20px 10px 10px 200px;  
   background-color: #CCFFCC; 
} 

#footer {  
   border-top: 2px solid #006600;  
   clear: both;  
   padding: 10px 0px;  
   text-align: center;  
 }

index.html

Voici le code dans le fichier index.html après avoir ajouté toutes les balises <div>.

<!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" /> 
      <style type = "text/css"></style> 
      <link href = "sample.css" rel = "stylesheet" type = "text/css" /> 
   </head>  

   <body> 
      <div id = "container"> 
         <div id = "header"></div> 
         <div id = "top-nav"></div> 
         <div id = "left-nav"></div> 
         <div id = "main-content"></div> 
         <div id = "footer"></div> 
      </div> 
   </body> 
</html>

Production

Votre mise en page dans la vue de conception ressemblera à celle illustrée dans la capture d'écran suivante.

Dans ce chapitre, nous allons apprendre une autre façon de concevoir la mise en page d'une page. Dans le dernier chapitre, nous avons utilisé une feuille de style pour appliquer les styles à l'en-tête, au pied de page, etc. mais vous pouvez également spécifier les styles dans la page HTML elle-même sans utiliser de feuille de style supplémentaire.

Ce n'est pas la manière recommandée de concevoir une mise en page, mais juste pour comprendre, nous allons couvrir cette technique ici. Essayez de suivre les étapes ci-dessous.

Step 1 - Ajoutons une page HTML et appelons-la layoutdemo.html

Step 2 - Ajoutez maintenant le <div> tag à partir de la boîte à outils.

Step 3 - Dans le Apply Styles panneau, cliquez sur le New Style…

Step 4- Lorsque vous sélectionnez l'option Page actuelle dans la liste déroulante «Définir dans», le style sera enregistré dans la même page HTML. Définissez la police de votre page, puis accédez à la catégorie Arrière-plan.

Step 5- Définissez la couleur de votre arrière-plan. Vous pouvez également définir les catégories Bordure, Boîte et Position, puis cliquer sur OK.

layoutdemo.html

Vous pouvez voir que le style est ajouté dans le même fichier HTML.

<!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> 
      <style type = "text/css">
         #container { 
            font-family: Arial, Helvetica, sans-serif; 
            font-size: medium; 
            font-weight: normal; 
            font-style: normal; 
            font-variant: normal; 
            text-transform: capitalize; 
            color: #800000; 
            background-color: #C0C0C0; 
            padding: 8px; 
            margin: 8px; 
            width: 90%; 
         } 
      </style> 
   </head>  

   <body> 
      <div id = "container"></div> 
   </body> 
</html>

De même, vous pouvez ajouter d'autres styles tels que l'en-tête, le pied de page, le contenu principal, etc. comme indiqué ci-dessus.

Dans ce chapitre, nous allons apprendre comment ajouter une navigation horizontale ou menu items sur le site Web.

Step 1 - Pour créer des éléments de menu ou une navigation horizontale, ajoutons le code suivant dans <div id = “top-nav”> dans le fichier index.html, qui contient la liste des éléments de menu.

<div id = "top-nav"> 
   <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
   </ul> 
</div>

Step 2- C'est une simple liste à puces pour le menu supérieur. Pour créer un lien hypertexte, accédez à ladesign view ou code view.

Step 3 - Sélectionnez l'élément que vous souhaitez utiliser comme lien hypertexte et appuyez sur Ctrl + K.

Step 4 - Cliquez sur le bouton Info-bulle….

Step 5 - Saisissez le texte souhaité comme info-bulle et cliquez sur OK.

Step 6 - Dans le Text to display champ, entrez Home et sélectionnez le fichier index.html, puis cliquez sur OK.

Step 7 - De même, ajoutez des hyperliens pour d'autres éléments de menu, comme indiqué dans le code suivant.

<!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" /> 
      <style type = "text/css"></style> 
      <link href = "sample.css" rel="stylesheet" type = "text/css" /> 
   </head>  

   <body> 
      <div id = "container"> 
         <div id = "header"></div> 
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li> 
               <li><a href = "index.html" title =  "Menu Item 2.">Menu Item 2</a></li> 
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li> 
            </ul> 
         </div> 
         <div id = "left-nav"> </div> 
         <div id = "main-content"> </div> 
         <div id = "footer"> </div> 
      </div> 
   </body>  
</html>

Step 8 - Pour définir le style de la navigation supérieure, accédez à la Manage Styles panneau.

Step 9 - Faites un clic droit sur “#top-nav”et sélectionnez Modifier le style. Sélectionnez la catégorie «Bordure» et changez la largeur en mince.

Step 10 - Sélectionnez la catégorie Boîte et décochez le remplissage «Identique pour tous» et entrez 10 dans les champs du haut et du bas.

Step 11 - Allez au Position Catégorie.

Step 12 - Retirez le 50 du heightchamp et cliquez sur OK. Dans le panneau Appliquer les styles, cliquez sur Nouveau style…

Step 13 - Entrez #top-nav uldans le champ Sélecteur et sélectionnez la feuille de style existante dans la liste déroulante «Définir dans». Dans la catégorie Bloc, sélectionnez centre dans le champ d'alignement de test et accédez à la catégorie Liste.

Step 14 - Sélectionnez none du list-style-type champ et cliquez sur OK.

Step 15 - Encore une fois, du Apply Styles panneau, cliquez sur Nouveau style… Entrez #top-nav ul lidans le champ Sélecteur. Sélectionnez ensuite la feuille de style existante dans la liste déroulante «Définir dans» et accédez à la catégorie Disposition.

Step 16 - Sélectionnez inline du display champ et cliquez sur OK.

Step 17 - Allez dans le panneau Appliquer les styles, cliquez sur Nouveau style… Entrée #top-nav ul li a dans le champ Sélecteur et sélectionnez la feuille de style existante dans la liste déroulante «Définir dans» et sélectionnez le blanc comme couleur de police.

Step 18 - Allez au Background Catégorie.

Step 19 - Sélectionnez green comme couleur d'arrière-plan et accédez à la Box category.

Step 20 - Réglez le padding values et cliquez sur OK.

Step 21- Revenons maintenant au panneau Appliquer les styles et cliquez sur Nouveau style. Entrer#topnav ul li a:hover dans le champ Sélecteur et sélectionnez la feuille de style existante dans la liste déroulante «Définir dans» et sélectionnez black comme le font color.

Step 22 - Allez maintenant au Background category.

Step 23 - Sélectionnez la couleur d'arrière-plan de votre option de menu lorsque la souris survole l'élément de menu et accédez à la catégorie Bordure.

Step 24- Sélectionnez le style, la largeur et la couleur de la bordure, puis cliquez sur OK. Pour vérifier à quoi il ressemble, allez dans le menu Fichier et sélectionnez Aperçu dans le navigateur.

Lorsque vous passez la souris sur un élément de menu, cela changera la couleur de fond et de police.

Dans ce chapitre, nous allons apprendre comment ajouter une navigation verticale ou des éléments de menu au site Web. Allons-y étape par étape.

Step 1 - Pour créer des éléments de menu ou une navigation verticale, ajoutons le code suivant dans <div id = “left-nav”> dans le fichier index.html qui contient la liste des éléments de menu.

<div id = "left-nav"> 
   <p>Site Navigation</p> 
   <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
   </ul> 
</div>

Step 2- C'est une simple liste à puces pour votre menu principal. Pour créer un lien hypertexte, accédez à ladesign view ou code view.

Step 3 - Sélectionnez l'élément que vous souhaitez utiliser comme lien hypertexte et appuyez sur Ctrl + K.

Step 4- Cliquez sur le bouton Info-bulle…. Entrez le texte souhaité commescreentip et cliquez sur OK.

Step 5 - Dans le Text to display champ, entrez Home et sélectionnez le fichier index.html, puis cliquez sur OK.

À ce stade, notre page index.html se présente comme suit -

Step 6 - Ajoutez plus d'hyperliens pour d'autres éléments de menu, comme indiqué dans le code suivant.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!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" />
      <style type = "text/css"></style>
      <link href = "sample.css" rel = "stylesheet" type = "text/css" />
   </head>

   <body>
      <div id = "container">
         <div id = "header"></div>
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li>
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li>
               <li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li>
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li>
            </ul> 
         </div> 
   
         <div id = "left-nav"> 
            <p>Site Navigation</p>  
            <ul>
               <li><a href = "index.html" title = "Site Home Page">Home</a></li>
               <li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li>
               <li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li>
               <li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li>
            </ul> 
         </div> 
         <div id = "main-content"></div> 
         <div id = "footer"></div> 
      </div> 
   </body>  
</html>

Step 7- Pour définir le style de la navigation supérieure, accédez au panneau Gérer les styles. Faites un clic droit sur#left-nav et sélectionnez Modifier le style…

Step 8 - Entrez la valeur 0,9 dans le champ Taille de la police et sélectionnez em dans la liste déroulante à côté de la taille de la police et accédez à la catégorie Boîte.

Step 9- Cochez le remplissage «Même pour tous» et entrez 5 dans le champ supérieur et cliquez sur OK. Dans le panneau Appliquer les styles, cliquez sur Nouveau style…

Step 10 - Entrez #left-nav uldans le champ Sélecteur. Sélectionnez la feuille de style existante dans la liste déroulante «Définir dans» et dans la catégorie Liste, n'en sélectionnez aucune dans le champ de type de style de liste et cliquez sur OK.

Step 11 - Encore une fois, du Apply Styles panneau, cliquez sur New Style. Décochez le remplissage «Identique pour tous». Entrez 0,2 dans le champ du bas et cliquez sur OK.

Step 12 - Entrez #left-nav ul li dans le champ Sélecteur et sélectionnez la feuille de style existante dans la liste déroulante «Définir dans» et accédez à la catégorie Boîte.

Step 13 - Accédez au panneau Appliquer les styles et cliquez sur Nouveau style.

Step 14 - Entrez #left-nav ul li a dans le champ Sélecteur et sélectionnez la feuille de style existante dans la liste déroulante «Définir dans» et sélectionnez le blanc comme couleur de police.

Step 15- Allez dans la catégorie Arrière-plan. Sélectionnez la couleur comme couleur d'arrière-plan

Step 16 - Allez au Box category et définissez les valeurs de remplissage.

Step 17 - Allez au LayoutCatégorie. Sélectionnerblock du display liste déroulante et cliquez sur OK.

Step 18- Revenons maintenant au panneau Appliquer les styles et cliquez sur Nouveau style. Entrer#left-nav ul li a:hoverdans le champ Sélecteur et sélectionnez la feuille de style existante dans la liste déroulante «Définir dans». Sélectionnez le noir comme couleur de police.

Step 19- Allez maintenant dans la catégorie Arrière-plan. Sélectionnez la couleur d'arrière-plan de votre option de menu lorsque la souris survole l'élément de menu et cliquez sur OK.

Step 20 - Pour vérifier à quoi il ressemble, allez dans le menu Fichier et sélectionnez Aperçu dans votre navigateur.

Lorsque vous passez la souris sur un élément de menu, il changera sa couleur d'arrière-plan et de police.

Dans ce chapitre, nous allons apprendre comment nous assurer que notre code HTML et CSS est valide. Microsoft Expression Web propose plusieurs méthodes pour rechercher dans vos pages Web les erreurs de code et le code incompatible avec un schéma HTML et CSS particulier.

La barre d'état et la vue Code vous alertent sur les erreurs de code et l'incompatibilité dans une seule page, tandis que le volet Office Compatibilité répertorie toutes les erreurs de code et les incompatibilités dans une ou plusieurs pages ou sur un site Web entier.
Expression Web identifie le code incompatible à l'aide d'un schéma de document basé sur la déclaration DocType dans une page.
Si la page ne contient pas de déclaration DocType ou si le DocType n'est pas reconnu, Expression Web utilise un secondary schema.

Lorsque vous créez un site et travaillez sur ses pages, vous devez prendre l'habitude de valider les pages. Microsoft Expression Web dispose de divers outils qui peuvent être très utiles lors de la validation de vos pages Web. Il existe deux options très utiles dans Expression web, allons donc dans le menu Outils et sélectionnez l'option Éditeur de page.

L'onglet Général propose deux options -

Highlight Invalid HTML - Cette option, lorsqu'elle est cochée, affichera un code HTML invalide dans un jeu de couleurs spécifique et la valeur par défaut en texte rouge sur fond jaune.
Highlight Incompatible HTML - Cette option, lorsqu'elle est cochée, affichera un soulignement ondulé sous le code qui n'est pas compatible avec les normes HTML.

Barre d'état

Lorsque la page Web actuelle et ouverte contient une erreur de code, vous obtenez un Code Error Detected icône (mise en évidence dans la capture d'écran suivante).

Supposons que vous ayez oublié le symbole «>» dans une balise </div> -

<div id = "footer"></div>

Dans ce cas, la barre d'état en bas de la fenêtre du programme affiche l'icône Code Error Detected.

Lorsque vous sélectionnez «Aller à l'erreur» dans le menu déroulant, cela vous amènera à la ligne où l'erreur existe et vous pourrez facilement corriger la syntaxe.

Lorsque la page contient un code incompatible avec le DocType spécifié, la barre d'état affiche un HTML Incompatibility Detected icône.

Supposons que vous ayez utilisé «hre» pour un lien hypertexte au lieu de «href», ce qui est une erreur.

<li><a href = "index.html" title = "Site Home Page">Home</a></li>

La barre d'état affiche l'icône d'incompatibilité HTML détectée, comme illustré dans la capture d'écran suivante.

Lorsque vous sélectionnez «Aller à l'erreur» dans le menu déroulant, cela vous amènera à la ligne où l'erreur existe et vous pourrez facilement corriger la syntaxe.

Rapport de compatibilité

Un rapport de compatibilité vérifie les pages et les fichiers CSS pour les erreurs de code et le code incompatible avec le schéma DocType et CSS que vous spécifiez. Vous pouvez générer un rapport qui vérifie uniquement des fichiers particuliers ou un site Web entier.

Step 1 - Pour générer un rapport de compatibilité, allez dans le menu des outils et cliquez sur l'option Rapports de compatibilité….

Step 2- La boîte de dialogue Vérificateur de compatibilité propose différentes options pour vérifier uniquement des fichiers particuliers de votre site, ouvrez ces fichiers ou sélectionnez-les dans le volet Office Liste des dossiers ou dans la vue Site Web. Sélectionnez les options selon l'exigence et cliquez sur le bouton Vérifier.

Step 3- Le volet des tâches Compatibilité s'ouvre et l'état de la génération du rapport apparaît en bas du volet des tâches. En double-cliquant sur n'importe quelle ligne, cela vous mènera à l'emplacement où l'erreur existe.

Un modèle Web dynamique est une copie maîtresse HTML d'une page Web que vous pouvez créer pour contenir des paramètres, une mise en forme et des éléments de page tels que du texte, des graphiques, une mise en page, des styles et des régions d'une page Web pouvant être modifiés.

Lorsque vous attachez un modèle Web dynamique aux pages d'un site Web, ce modèle définit la mise en page de ces pages. Vous pouvez utiliser n'importe quel nombre de modèles Web dynamiques dans un site Web et vous pouvez attacher un modèle Web dynamique à autant de pages que vous le souhaitez.

En utilisant des modèles Web dynamiques, vous pouvez créer des pages HTML qui partagent la même mise en page. En plus de fournir une mise en page partagée, vous pouvez rendre certaines régions d'un modèle disponibles pour modification tout en empêchant les modifications apportées à d'autres régions de ce modèle.

Cela signifie que vous pouvez autoriser d'autres personnes à ajouter et modifier du contenu, tout en conservant la mise en page des pages et le modèle lui-même.

Le besoin de modèles Web dynamiques

Le concept le plus important de la conception de sites Web est de maintenir une apparence cohérente pour votre site et avec le modèle Web dynamique, vous pouvez y parvenir. Le modèle Web dynamique fournit -

Pages de base telles que les pages Plan du site, Contact, À propos et Recherche. Un visiteur doit pouvoir accéder à votre page d'accueil à partir de n'importe quelle page du site.
Navigation cohérente sur tout votre site.
Look cohérent sur tout le site.

Créer un modèle Web dynamique

Pour créer un modèle Web dynamique (DWT), commencez par une page HTML vide et enregistrez-la en tant que *.dwt file. Allons-y étape par étape et apprenons-en plus à ce sujet.

Step 1 - Ouvrez le fichier index.html et sélectionnez File → Save As… option de menu, qui ouvrira la boîte de dialogue Enregistrer sous.

Sélectionnez le modèle Web dynamique (* .dwt) dans la liste déroulante Enregistrer en tant que type et changez le nom de fichier de l'index en master.dwt et cliquez sur le bouton Enregistrer.

Step 2- Maintenant, vous verrez qu'un nouveau fichier master.dwt est créé dans la liste des dossiers. Créons un nouveau fichier HTML et appelons-le index_2.html. Ouvrons le fichier master.dwt et dans la vue Conception ou la vue Code, cliquez avec le bouton droit de la souris à l'intérieur des balises <div> du contenu principal.

Step 3 - Dans le menu, sélectionnez Gérer les régions modifiables… qui ouvrira la boîte de dialogue Régions modifiables.

Step 4- Dans le nom de la région, saisissez un nom pour la région modifiable, puis cliquez sur Ajouter. Répétez pour ajouter des régions modifiables supplémentaires si vous le souhaitez.

Step 5- Une fois que vous avez ajouté toutes les régions modifiables, cliquez sur Fermer. Accédez maintenant au fichier index_2.html et sélectionnez-le également dans la liste des dossiers.

Step 6 - Allez dans le menu Format et sélectionnez Dynamic Web Template → Attach Dynamic Web Template… qui ouvrira la boîte de dialogue Joindre un modèle Web dynamique.

Step 7 - Sélectionnez le Dynamic Web Templatequi est ici le fichier master.dwt et cliquez sur le bouton Ouvrir. Vous recevrez un message d'avertissement. Cliquez sur Oui.

Step 8- Vous pouvez voir que le même modèle est appliqué au fichier index_2.html. De même, vous pouvez ajouter le même modèle à autant de pages HTML que vous le souhaitez sur le site Web.

Step 9- Sur cette page, vous ne pouvez modifier que la section du contenu principal. Si vous déplacez la souris vers l'autre section, vous verrez qu'elle n'est pas modifiable et le curseur de la souris se transforme également en croix rouge.

Step 10 - Pour voir à quoi il ressemble, allez dans le menu Fichier et sélectionnez Aperçu dans votre navigateur.

Dans ce chapitre, nous apprendrons comment ajouter une option de recherche ou un champ de recherche au site Web. S'il s'agit d'un grand site, vous aurez besoin d'un champ de recherche dans le site afin que l'utilisateur puisse trouver facilement toutes les données. Il existe de nombreux logiciels gratuits disponibles tels que Windows Live, Google, etc.

Recherche Windows Live

Les étapes suivantes vous montrent comment ajouter une zone de recherche Windows Live à votre page Web, puis définir le formulaire de recherche pour rechercher sur l'ensemble du Web ou uniquement sur votre site Web.

Step 1 - Créez une nouvelle page HTML et appelez-la SearchPage.

Step 2 - Allez dans le menu Format et sélectionnez Dynamic Web Template → Attach Dynamic Web Template…option. Sélectionnez le fichier master.dwt et cliquez sur le bouton Ouvrir.

Step 3 - Ajoutons le code suivant dans la région modifiable.

<form method = "get" action = "http://search.live.com/results.aspx"> 
   <input type = "hidden" name = "cp" value = "1252"/> 
   <input type = "hidden" name = "FORM" value = "FREESS"/> 
   <table style = "background-color: #ffffff;"> 
      <tr> 
         <td>
            <a href = "http://search.live.com/"> 
               <img src = "http://search.live.com/s/affillogoLive.gif" 
                  style = "border:0px;" alt = "Live Search"/> 
            </a> 
         </td> 
         <td> 
            <input type = "text" name = "q" size = "30" /> 
            <input type = "submit" value = "Search Site"/> 
            <input type = "hidden" name = "q1" 
               value = "site:http://www.microsoft.com/expression"/> 
         </td> 
      </tr> 
   </table> 
</form>

Step 4- Enregistrez la page. Allez dans le menu Fichier et sélectionnez Aperçu dans le navigateur.

Step 5- Vous verrez Windows Live Search sur votre page Web. Entrons quelque chose dans la recherche et cliquez sur le bouton Rechercher sur le site

Step 6- Comme vous pouvez le voir, il recherchera sur le Web. Si vous souhaitez limiter la recherche à votre site Web uniquement, vous devez spécifier le domaine de votre site dans le nom suivant au lieu dehttps://www.microsoft.com/expression

<input type = "hidden" name = "q1" value = "site:http://www.microsoft.com/expression"/>

Step 7 - De même, vous pouvez ajouter l'option de recherche Google en ajoutant le code suivant dans la région modifiable.

<form method = "get" action = "http://www.google.com/search"> 
   <div style = "border: 1px solid black; padding: 4px; width: 20em; margin: 0px auto 0px auto"> 
      <table border = "0" cellpadding = "0"> 
         <tr> 
            <td class = "center"> 
               <input type = "text" name = "q" size = "25" maxlength = "255" value = "" /> 
               <input type = "submit" value = "Google Search" /> 
            </td> 
         </tr> 
         <tr> 
            <td align = "center" style = "font-size: 75%"> 
               <input type = "checkbox" name = "sitesearch" 
                  value = " http://www.microsoft.com/expression" checked = "checked" /> 
               Only search this website<br /> 
            </td> 
         </tr> 
      </table> 
   </div> 
</form>

Step 8 - Enregistrez votre page HTML et vous verrez une zone de recherche, un bouton de recherche, une case à cocher et une étiquette de case à cocher.

Step 9 - Pour empêcher les utilisateurs de rechercher uniquement votre site Web, cochez la case et accédez au panneau Propriétés de la balise et définissez la propriété Value sur l'URL de votre site Web, par exemple https://www.microsoft.com/expression.

Step 10- Enregistrez votre page et prévisualisez-la dans le navigateur. Vous verrez maintenant l'option Recherche Google sur votre page Web.

Les images sont largement utilisées dans les pages Web pour les rendre intéressantes et offrir une meilleure expérience utilisateur. Dans ce chapitre, nous apprendrons comment ajouter des images au site Web. Comme d'habitude, allons-y étape par étape et apprenons le processus en détail.

Step 1 - Pour commencer à ajouter des images, créons un nouveau site d'une page et changeons le nom du fichier default.html en index.html.

Step 2- Nous devons maintenant inclure des images sur le site Web afin de pouvoir utiliser ces images dans la page Web. Créons un nouveau dossier. Dans la liste des dossiers, cliquez avec le bouton droit sur le nom du site Web.

Step 3- Actuellement, il n'y a aucune image dans ce dossier. Pour ajouter des images dans ce dossier, sélectionnez et faites simplement glisser les images de votre disque dur et déposez-les sur le dossier images.

Vous verrez que les images sont ajoutées au site Web images dossier, comme indiqué dans la capture d'écran suivante.

Step 4- Ces images sont désormais incluses dans votre site Web, mais aucune de celles-ci n'est utilisée dans une page Web. Un moyen simple d'ajouter une image à la page Web consiste à faire glisser l'image du dossier images et à la déposer dans la vue de code à l'endroit où vous souhaitez ajouter l'image dans la page Web.

Supposons que nous voulions ajouter une image sous l'en-tête. Lorsque vous déposez l'image et relâchez le bouton de la souris, la boîte de dialogue suivante s'affiche.

Ici, vous pouvez spécifier le texte alternatif et la description longue. Cliquez ensuite sur OK et enregistrez la page Web. Maintenant tu peux voir ça<img> La balise est ajoutée avec le nom et la source alternatifs de l'image.

Step 5 - Suivez le même processus et ajoutez la deuxième image avec son autre nom et sa source.

Maintenant le index.html le fichier apparaîtra comme suit -

<!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" /> 
   </head>  
   
   <body> 
      <h1> Working with images </h1> 
      <img alt = "Beautiful Birds" src = "images/birds.jpg" /> 
      <img alt = "Other Birds" src = "images/birds2.jpg" /> 
   </body>  
</html>

Step 6 - Le Picture PropertiesLa boîte de dialogue vous donne accès aux attributs d'image les plus couramment utilisés. Lorsque vous double-cliquez sur une image, la boîte de dialogue Propriétés de l'image s'affiche.

Dans Expression Web, la boîte de dialogue Propriétés de l'image comporte deux onglets, General et Appearance.

Voici les options disponibles sur le General tab.

Picture - Il contient le nom du dossier / fichier de l'image graphique.
Alternate Text- Tapez le texte que vous souhaitez afficher pour les images lorsque le graphique est en cours de téléchargement, lorsqu'il est introuvable ou lorsqu'un visiteur du site déplace le pointeur dessus. Ce texte sera également utilisé par un lecteur d'écran si votre spectateur en utilise un.
Long Description- Il arrive que quelques mots ne suffisent pas pour décrire votre image. Les graphiques et les graphiques sont des exemples. Cliquez sur Parcourir pour sélectionner un fichier contenant une description plus longue de l'image.
Location - Si vous souhaitez lier votre image à une page Web ou à une image plus grande, insérez le lien hypertexte ici.
Target Frame - Si la page actuelle est une page de cadres, cette option indique dans quel cadre le lien doit être affiché OU vous pouvez choisir d'ouvrir l'image ou la page dans une nouvelle fenêtre.

Les options suivantes sont disponibles sur le Appearance tab.

Wrapping Style - Spécifiez la façon dont l'image flotte dans la page, par exemple Aucun, Gauche ou Droite.
Layout - Dans cette section, vous pouvez définir l'alignement, l'épaisseur de la bordure, les marges horizontales et verticales.
Size- Expression Web définit automatiquement les propriétés de largeur et de hauteur de l'image en fonction des dimensions réelles de l'image. Plutôt que de redimensionner votre image en modifiant ces dimensions, redimensionnez l'image à l'aide de votre éditeur graphique.

Step 7- Maintenant, prévisualisons la page Web dans le navigateur; il affichera la sortie suivante.

Dans ce chapitre, nous allons apprendre à utiliser des hyperliens dans votre site Web. L'une des choses qui rend le Web si étendu est la capacité des pages Web à créer des liens vers d'autres pages Web.Hyperlinks ou des liens se trouvent dans presque toutes les pages Web.

Les hyperliens permettent également aux utilisateurs de cliquer et d'accéder à une autre page, un endroit dans une page, une image ou un autre emplacement sur Internet entièrement. Voici quelques-unes des caractéristiques importantes du lien hypertexte -

Les outils et options de lien hypertexte d'Expression Web facilitent grandement l'utilisation des liens hypertexte.
Les vues et les rapports d'hyperliens Expression Web facilitent également la recherche et la correction des liens rompus ou incorrects.
Un lien hypertexte peut être un mot, un groupe de mots ou une image qui, une fois cliqué, vous mènera à un nouveau document ou à un emplacement dans le document actuel.

Étiquette d'ancrage

En HTML, <a>La balise appelée balise d'ancrage est utilisée pour créer un lien vers un autre document. Une ancre peut pointer vers une autre page html, une image, un document texte ou un fichier pdf entre autres. Voici le code de base d'une ancre<a> marque.

<a href = "url">Text to be displayed as link<a>

Dans <a> balise, l'attribut «href» est utilisé pour adresser le lien vers le document, et les mots entre l'ouverture et la fermeture de la balise d'ancrage seront affichés sous forme de lien hypertexte.
Lorsque vous déplacez le curseur sur un lien dans une page Web, la flèche se transforme en une petite main.
Une URL est une adresse qui spécifie un protocole, un serveur Web et un chemin de fichier.
Il existe deux types d'URL, absolute et relative. Unabsolute URL contient une adresse complète tandis qu'un relative URLil manque une ou plusieurs parties de l'adresse. Cependant, le navigateur Web obtient les informations manquantes de la page contenant l'URL.

Exemple

Jetons un coup d'œil à un exemple simple dans lequel nous utiliserons les deux absolute et relative URLs.

Step 1 - Tout d'abord, ouvrez le index.html page et ajoutez les lignes suivantes dans la main content section.

<div id = "main-content">  
   <p> Absolute URL Example: </p> 
   <p>  Google </p> 
   <p>  Youtube </p> 
   <p> Relative URL Example: </p> 
   <p>  Home Page 2 </p>  
</div>

Voici la mise en œuvre complète de index.html page.

<!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" /> 
      <style type = "text/css"> 
         #left-nav ul li a:hover { 
            color: #000000; background-color: #116611; 
         } 
      
         #left-nav ul li a:hover { 
            color: #000000; background-color: #66FF99; 
         } 
      </style> 
      <link href = "sample.css" rel = "stylesheet" type = "text/css" /> 
   </head> 
   <body> 
      <div id = "container"> 
         <div id = "header"> </div> 
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li> 
               <li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li> 
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li> 
            </ul> 
         </div> 
   
         <div id = "left-nav"> 
            <p>Site Navigation</p>  
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li> 
               <li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li> 
               <li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li> 
            </ul> 
         </div> 
  
         <div id = "main-content">  
            <p> Absolute URL Example: </p> 
            <p>  Google </p> 
            <p>  Youtube </p> 
            <p> Relative URL Example: </p> 
            <p>  Home Page 2 </p> 
         </div> 
         <div id = "footer"> </div> 
      </div> 
   </body> 
</html>

Step 2 - Sauvegardons la page Web et vous verrez le texte dans la section principale du contenu.

Step 3 - Dans la vue Design, faites un clic droit sur Google puis sélectionnez Hyperlien… dans le menu qui ouvrira le Insert Hyperlink dialogue.

Step 4- Dans le champ Adresse, spécifiez l'URL de la page d'accueil Google et cliquez sur OK. De même, cliquez avec le bouton droit de la souris sur YouTube dans la vue de conception et sélectionnez Hyperlien…

Step 5- Dans le champ Adresse, spécifiez l'URL de la page d'accueil YouTube et cliquez sur OK. Maintenant, faites un clic droit sur la «Page d'accueil 2» et sélectionnez Hyperlien… dans le menu qui ouvrira la boîte de dialogue Insérer un hyperlien.

Step 6- Pour le chemin relatif, sélectionnez index_2.html dans le champ d'adresse et Expression Web obtiendra le chemin restant du fichier index.html, car ces deux fichiers se trouvent dans le même répertoire. Cliquez sur OK.

Comme on peut le voir, ces mots sont maintenant soulignés, ce qui signifie que des hyperliens sont créés.

Step 7- La couleur de police par défaut est le bleu et la couleur de police par défaut pour les hyperliens est également bleue. Pour modifier la couleur par défaut du lien hypertexte, sélectionnez l'un des liens hypertexte et accédez auFormat menu et sélectionnez Background… option de menu.

Vous verrez maintenant la boîte de dialogue suivante.

Step 8 - Changeons la couleur du lien hypertexte en vert.

Dans la capture d'écran suivante, vous verrez que la couleur du lien hypertexte est passée au vert.

Step 9 - Voyons maintenant un aperçu de cette page Web dans un navigateur.

Si vous cliquez sur le lien Google, il vous dirigera vers la page d'accueil de Google.

Step 10- De même, si vous revenez à la page d'accueil et cliquez sur le lien YouTube, cela vous dirigera vers la page d'accueil YouTube. Revenons à la page d'accueil.

Clique le Home Page 2 lien et vous verrez qu'il ouvre le index_2.hmtl file.

Dans ce chapitre, nous apprendrons comment ajouter des vidéos au site Web et quels formats sont pris en charge dans Expression Web. À l'aide de vidéos, vous pouvez facilement attirer l'attention de clients potentiels sur les produits ou services de votre entreprise.

Microsoft Expression Web est un outil de conception Web qui simplifie le processus d'ajout de vidéos promotionnelles, marketing ou de formation aux pages Web. Vous pouvez facilement insérer vos vidéos dans la vue Conception de Microsoft Expression.

Par défaut, Expression Web prend en charge les formats d'encodage vidéo tels que Silverlight, Adobe Flash, WMV, ASF, MWA, AVI, WVX et MPEG.

Exemple

Prenons maintenant un exemple pour comprendre le processus d'ajout d'une vidéo étape par étape.

Step 1 - Ajoutez un nouveau fichier HTML et appelez-le videodemo.html.

Step 2- Cliquez avec la souris à l'emplacement de la page Web où la vidéo doit être insérée. Disons que nous voulons ajouter une vidéo sous le titre.

Step 3 - Allez au Insert menu → Mediaqui ouvrira le sous-menu contenant la liste des formats de lecteur vidéo pris en charge par Expressions par défaut. SélectionnonsWindows Media Player.

Step 4- Localisez la vidéo que vous souhaitez utiliser. Sélectionnez le nom du fichier vidéo et cliquez sur le bouton Insérer pour l'insérer dans la page Web. Enregistrez le fichier en appuyant sur Ctrl + S et vous verrez la boîte de dialogue Enregistrer les fichiers incorporés.

Step 5 - Cliquez sur OK et vous verrez que le fichier multimédia est ajouté au dossier du site Web.

Voici le code dans le videodemo.html page.

<!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> Video Demo</h1> 
      <p> 
         <object id = "media1" height = "200" type = "video/x-ms-wmv" width = "200"> 
            <param name = "filename" value = "logo.wmv" /> 
         </object> 
      </p> 
   </body> 
</html>

Step 6- Voyons maintenant un aperçu de la page Web dans un navigateur. Vous verrez que la vidéo est en cours de lecture.

Expression Web propose de nombreux outils pour travailler avec des pages HTML statiques, mais il dispose également d'outils pour créer des pages plus dynamiques. Les pages dynamiques récupèrent souvent des données ou du contenu à partir d'une source de données. Dans ce chapitre, nous allons apprendre à créer une source de données SQL à utiliser dans des pages dynamiques.

Exemple

Jetons un coup d'œil à un exemple simple dans lequel nous créons une liste déroulante et remplissons la liste en récupérant des données de la base de données à l'aide de SQL DataSource.

Step 1 - Commencez par créer un nouveau site Web vide.

Appelons ça SQLDataSource. Cliquez sur OK.

Step 2- Vous verrez que l'expression web a créé un dossier pour nous. Cependant, comme nous avons choisi de créer un projet vide, nous n'avons donc pas encore de fichiers.

Expression Web ne doit pas être utilisé uniquement pour créer des sites HTML statiques; nous pouvons créer des sites dynamiques en utilisant des pages et des contrôles avec beaucoup de facilité.

Step 3- Expression web nous permet également de créer beaucoup de contenu dynamique sans forcément être développeur. Ajoutons donc un fichier ASPX à partir duFile → New Pageoption de menu. Sélectionnez ASPX dans le modèle du milieu et cliquez sur OK.

Step 4 - Ici, nous allons créer un contrôle sous notre forme qui doit accéder aux données d'une base de données pour créer un site Web dynamique.

Dans ce cas particulier, nous allons créer une source de données SQL qui récupérera les données de la base de données.

Step 5 - Allez dans la boîte à outils et faites glisser le DropDownList et déposez-le dans le <form>en mode Code ou vous pouvez également le déposer dans la section formulaire en mode Création. Vous verrez que le code est ajouté par Expression Web.

Ici, nous voulons connecter certaines données de notre base de données et les stocker dans notre liste déroulante. Donc, la première chose dont nous avons besoin est la base de données.

Step 6 - Créez un nouveau dossier dans votre dossier Projet en allant dans le New → Folder option de menu.

Step 7 - Appelez ce dossier App_Data.

Step 8 - Nous devons importer une base de données dans notre projet en utilisant le File → Import → File… option de menu.

Step 9 - Cela ouvrira le Importboîte de dialogue, comme illustré ci-dessous. Cliquez sur le bouton Ajouter un fichier… pour ouvrir la boîte de dialogue d'ouverture de fichier.

Step 10 - Accédez à la base de données (*.mdf file) que vous souhaitez inclure dans le site Web et cliquez sur Ouvrir.

Step 11- Ouvrez MyTestDatabase.mdf. Il affichera la boîte de dialogue suivante. Cliquez sur OK.

Step 12- Vous pouvez maintenant voir que le fichier de base de données est ajouté dans le dossier App_Data. Lorsque vous avez un contrôle comme une liste déroulante et qu'Expression Web vous permet de lier les données à celui-ci, vous verrez une petite flèche dans le coin supérieur droit de la vue de conception.

Step 13- C'est le menu contextuel actuel qui peut nous permettre de faire une tâche très spécifique pour ce contrôle particulier et l'un de ceux-ci est de choisir une source de données. Alors cliquons surChoose Data Source… et cela ouvrira l'assistant de configuration de la source de données.

Step 14- Actuellement, nous n'avons pas de source de données. Sélectionnez l'option Nouvelle source de données dans le menu.

Ici, nous allons importer une base de données SQL. Sélectionnez la base de données et cliquez sur OK.

Step 15- Maintenant, nous devons spécifier la chaîne de connexion. Cliquons sur le bouton Nouvelle connexion.

Step 16 - Sélectionnez le fichier de base de données Microsoft SQL Server et cliquez sur OK.

Step 17 - Cliquez sur le bouton Parcourir pour localiser le fichier de base de données.

Step 18 - Sélectionnez le fichier de base de données et cliquez sur le bouton Ouvrir ou double-cliquez sur le fichier de base de données.

Step 19 - Pour tester la connexion, cliquez sur le bouton Tester la connexion.

Il affichera l'écran suivant. Cliquez sur le bouton OK.

Step 20- Maintenant, nous allons configurer la source de données. Cliquez sur Suivant sur l'écran suivant.

Cochez la case et cliquez à nouveau sur Suivant.

Step 21- Ici, vous verrez toutes les tables de votre base de données. Choisissons leStudent table.

Step 22- Et vous verrez toutes les colonnes de la zone de liste. SélectionnerID et LastName. En bas, vous pouvez voir qu'il crée en fait une requête. Vous pouvez également utiliser leWhere ou ORDER BY clauses. Une fois que vous avez terminé avec la requête, cliquez sur Suivant.

Step 23 - Cliquez sur le Test Querybouton. Il affichera lequery result comme indiqué ci-dessous.

Step 24- Dans la boîte de dialogue suivante, la source de données est sélectionnée par défaut. Le champ «Sélectionnez un champ de données à afficher dans la DropDownList» est le champ qui va réellement être affiché. Sélectionnez LastName et sélectionnez l'ID dans le champ «Sélectionnez un champ de données pour la valeur de DropDownList» et cliquez sur OK.

Comme vous pouvez le voir dans la capture d'écran suivante, DataSource est ajouté en mode Création.

Voici le code complet dans le fichier ASPX, qui est créé par Expression Web.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ Page Language = "C#" %> 
<html dir = "ltr" xmlns = "http://www.w3.org/1999/xhtml">  
   <head runat = "server"> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <title>Untitled 1</title> 
   </head>  

   <body>  
      <form id = "form1" runat = "server"> 
         <asp:DropDownList id = "listID" runat = "server" DataSourceID = "SqlDataSource1"  
            DataTextField = "LastName" DataValueField = "ID"> 
         </asp:DropDownList> 

         <asp:SqlDataSource ID = "SqlDataSource1" runat = "server"   
            ConnectionString = "<%$ ConnectionStrings:MyTestDatabaseConnectionString %>"  
               SelectCommand = "SELECT [ID], [LastName] FROM [Student]"> 
         </asp:SqlDataSource> 
      </form>  
   </body>  
</html>

Step 25 - Sauvegardons la page Web en appuyant sur Ctrl + S.

Appeler cette page SQLDatasource.aspx et cliquez sur Enregistrer.

Step 26- Prévisualisons cette page dans un navigateur. Vous verrez une liste déroulante contenant le nom de famille des étudiants duStudent table.

Dans ce chapitre, nous allons apprendre à créer une page Web à partir d'un document Microsoft Word à l'aide d'Expression Web. Au lieu de créer des pages à partir de rien, vous pouvez également utiliser Microsoft Word pour le contenu Web, puis importer ce contenu sur votre page HTML.

Voyons comment vous pouvez obtenir des résultats optimaux tout en utilisant le contenu de Microsoft Word.

Créez une nouvelle page HTML et appelez-la worddemo.html. Appliquez le modèle Web dynamique (* .dwt) à cette page HTML.

Voici un échantillon Worddocument avec quelques styles appliqués et un tableau. Copiez d'abord l'intégralité de ce document dans le presse-papiers, puis passez à Expression Web. Collez le document dans une section de contenu principal de la page Web.

Notez que lorsque le contenu est collé dans Expression Web, nous obtenons une icône. C'est ce qu'on appelle lepaste options button. En cliquant dessus, nous pouvons choisir différentes manières dont le contenu est collé dans Expression Web.

Le paramètre par défaut Match Destination Formatting signifie qu'Expression Web utilisera toute mise en forme déjà appliquée dans la page Web actuelle.

Par exemple, l'en-tête du document de ce document a été stylisé en utilisant le style H1 dans Microsoft Word. Une fois collé dans la page, Expression Web appliquera la mise en forme au style Titre un dans Expression Web.

Si vous sélectionnez le Keep Source Formatting, alors Expression Web appliquera toujours le style H1 au texte. Cependant, il créera une nouvelle classe CSS appelée Style un dans ce cas qui reformate le texte pour ressembler à ce qu'il faisait dans Word.

Si nous sélectionnons Remove Formatting, la page ressemble beaucoup à ce qu'elle était auparavant, mais si vous regardez la mise en forme des tableaux, vous verrez qu'il ne s'agit plus que de texte normal maintenant.

Les styles fournis dans Expression Web sont toujours en vigueur, mais tous les styles spécifiques au document Word ont désormais disparu.

le keep HTML only options'applique uniquement lorsque vous copiez du code HTML. La dernière option du menu des options de collage estKeep Text onlyet c'est l'option que vous voulez choisir si vous ne voulez vraiment que le texte de Word. Lorsque vous sélectionnez cette option, la boîte de dialogue Coller le texte suivante s'ouvre.

De là, nous pouvons choisir exactement comment nous voulons mettre en forme le texte. La première option supprime tous les sauts de ligne, paragraphes, etc. de mise en forme et les remplace par un seul gros bloc de texte.

Vous pouvez voir que nous avons perdu le tableau dans le document ainsi que tout le formatage. Vous pouvez jouer avec les options duPaste Textboite de dialogue. Choisissons l'optionMatch Destination Formatting.

Lors de la prévisualisation de cette page Web dans un navigateur, elle ressemblera à la capture d'écran suivante.

Le contrôle GridView est utilisé pour afficher les valeurs d'une source de données dans une table. Chaque colonne représente un champ, tandis que chaque ligne représente un enregistrement. Dans ce chapitre, nous allons apprendre un processus très simple pour afficher les données d'une base de données sur une page Web dans un GridView.

Step 1 - Créons une nouvelle page ASPX dans le projet SQLDataSource et appelons-la gridview.aspx

Step 2- Dans la boîte à outils, vous verrez les contrôles ASP.NET. Faites glisser le contrôle GridView et déposez-le sur la section du formulaire.

Vous pouvez voir que le menu contextuel GridView est ouvert. Sélectionnez maintenant le<New data source…>dans la liste déroulante Choisir la source de données. Il affichera l'assistant de configuration de la source de données.

Step 3- Sélectionnez la base de données car nous obtiendrons les données de la base de données SQL et spécifierons l'ID de la source de données. Cliquez sur OK.

Step 4- Sélectionnez la chaîne de connexion existante, que nous avons créée dans le chapitre SQL DataSource, car nous utiliserons la même base de données dans ce chapitre. Cliquez sur Suivant.

Step 5 - Dans un but de compréhension, sélectionnons la table des étudiants et cliquons sur le * checkboxqui récupérera toutes les colonnes de la table des étudiants. Cliquez sur Suivant.

Step 6 - Dans l'assistant suivant, vous pouvez tester la requête, alors cliquons sur le Test Query bouton.

En cliquant Next, il affichera l'écran suivant -

La conception de gridview.aspx ressemble à ceci -

Step 7- Laissez-nous prévisualiser la page Web dans un navigateur. Il apparaîtra comme suit -

Il s'agit d'un tableau simple sans aucun formatage.

Step 8 - Vous pouvez formater le GridView à partir du GridView Context menu.

Clique le Auto Format…lien. Dans la boîte de dialogue Format automatique, il existe de nombreux schémas prédéfinis. Sélectionnez un schéma selon vos besoins et cliquez sur OK.

Prévisualisons à nouveau la page Web dans un navigateur. Cela ressemblera à la capture d'écran suivante.

Dans ce chapitre, nous allons découvrir les pages maîtres ASP.NET. Lorsque nous créons une page maître, nous pouvons la mettre en page, appliquer des styles et ajouter des contrôles ASP.NET de la même manière que dans d'autres pages de Microsoft Expression Web. La mise en page et le contenu que nous créons dans une maquette sont appliqués aux pages jointes à la maquette. C'est un concept similaire àDynamic Web Template.

Les modèles Web dynamiques vous permettent d'appliquer une apparence et une convivialité communes à toutes les pages de votre site Web. Comme les modèles Web dynamiques sont appliqués dans les pages auxquelles ils sont attachés au moment de la conception, l'application de modifications à toutes les pages d'un site peut entraîner un retard pendant la mise à jour du code HTML dans toutes les pages.

Si le serveur exécute ASP.NET, les pages maîtres ASP.NET autorisent des fonctionnalités similaires en définissant les zones modifiables dans le modèle. Cependant, l'application du modèle au contenu personnalisé dans les pages se fait de manière dynamique au moment de l'exécution.

Exemple

Jetons un coup d'œil à un exemple simple dans lequel nous allons créer une page maître à l'aide d'un modèle CSS et utiliser cette page maître pour créer d'autres pages.

Step 1 - Ouvrez le index.html page dans laquelle nous avons défini différentes sections en utilisant une feuille de style CSS.

Step 2 - De la File menu, allez à New → Page et vous verrez la boîte de dialogue Nouvelle page.

Step 3 - Dans le volet gauche, sélectionnez ASP.NET et dans la liste du milieu, sélectionnez Page maître et cliquez sur le bouton OK.

Step 4 - L'écran ci-dessus produira un pop-up nommé Untitled1.master. Enregistrez cette page et nommez-ladefault.master.

Step 5- Nous voulons intégrer notre conception dans la page maître qui sera partagée sur notre site. Copions donc le code du contenu que vous souhaitez avoir sur chaque page à partir du code index.html et collez le code dans la page default.master.

Step 6- Nous avons maintenant une mise en page que nous aimerions utiliser sur chaque page du site. Cependant, si nous devions commencer à créer les pages de contenu maintenant, nous ne serions pas en mesure de saisir du contenu dans cette mise en page. Par conséquent, nous devons créerASPX contentpages de la page maître. Pour ce faire, nous devons ajouter lecontent region ainsi que pour que nous puissions ajouter du contenu aux pages spécifiées.

Dans la vue de conception, cliquez avec le bouton droit de la souris à l'endroit où vous voulez le contenu sur vos pages. Disons que nous voulons ajouter du contenu dans la section de contenu principal, puis cliquez sur le boutonManage Microsoft ASP.NET Content Regions…

Step 7 - Dans l'assistant Gérer les régions de contenu, entrez le Region Name et cliquez Close.

Step 8- Comme le montre la capture d'écran suivante, le Content PlaceHolder est ajouté dans la section du contenu principal. Maintenant, nous devons ajouter une page Web ASPX.

Step 9 - Allez dans le menu Fichier et sélectionnez New → Create from Master Page…

Step 10 - Accédez à la page default.master et cliquez sur OK.

Step 11 - Une nouvelle page ASPX est maintenant créée et tous les styles de mise en page sont appliqués à partir de la page maître.

Ajoutez du texte dans la section principale.

Step 12 - Enregistrez cette page et appelez-la mypage.aspx puis prévisualisez-le dans un navigateur.

Dans ce chapitre, nous allons apprendre comment ajouter une table de données dans votre page Web. Créons une nouvelle page HTML, mais ici nous voulons également appliquer le modèle Web dynamique à notre page HTML.

Step 1 - Allons dans le menu Fichier et sélectionnez New → Create from Dynamic Web Template…

Il ouvrira la boîte de dialogue suivante comme indiqué dans la capture d'écran suivante.

Step 2 - Sélectionnez le master.dwt fichier, puis cliquez sur le bouton Ouvrir.

Step 3 - Enregistrez la page Web et appelez-la datatable.html.

Step 4 - En mode Création, accédez à la section du contenu principal et supprimez le texte.

Step 5 - Ensuite, allez à la Table → Insert Table… option de menu qui ouvrira la boîte de dialogue Insérer un tableau.

Sélectionnez le nombre de lignes et de colonnes. Vous pouvez également définir différentes options de mise en page telles que l'alignement, le remplissage, la taille et la couleur de la bordure, la couleur d'arrière-plan, etc. Une fois que vous avez terminé, cliquez sur OK.

Step 6 - La vue de conception de datatable.html apparaîtra désormais comme suit -

Maintenant, si vous regardez la vue Code de la page, vous verrez que le code suivant est ajouté par Expression Web.

<table class = "auto-style2" style = "width: 100%"> 
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr>  
   
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr>    
   
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr>  
  
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr> 
     
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr> 
     
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr> 
</table>

Step 7 - Dans le panneau de tâches Gérer les styles, cliquez avec le bouton droit de la souris “.auto-style2”. Cliquez sur la classe Choisir renommer "auto-style2".

Step 8 - Dans la boîte de dialogue Renommer la classe, entrez mytable dans le New namechamp. Assurez-vous que Renommer les références de classe dans cette page est coché, puis cliquez sur OK.

Maintenant, jetez un œil à votre page Web en mode Création. Il apparaîtra comme suit -

Step 9 - Pour formater ce tableau et lui appliquer un style, allez dans le panneau de tâches Gérer les styles et cliquez sur New Style…

Step 10- Dans la boîte de dialogue Nouveau style, définissez les paramètres de bordure, puis cliquez sur OK. Il existe une autre option pour formater votre tableau de données. Dans la vue Conception, cliquez avec le bouton droit sur la table et sélectionnezModify → Table AutoFormat…

Dans cette boîte de dialogue, vous verrez les différents formats et autres paramètres. Sélectionnez le format Professionnel et cliquez sur OK.

Step 11 - Maintenant, la vue de conception de votre page Web se présente comme suit -

Ajoutons quelques données dans la vue de conception.

Step 12- Enregistrez votre page Web et prévisualisez-la dans un navigateur. Cela ressemblera à la capture d'écran suivante.

Dans ce chapitre, nous allons apprendre à publier un site Web. Microsoft Expression Web est un outil de développement de site Web complet. Vous pouvez utiliser Expression Web pour créer des pages Web et des sites qui vous permettent de transférer des fichiers entre votre ordinateur et votre compte d'hébergement.

Step 1 - Jetons un coup d'œil au site que nous souhaitons publier.

Dans la dernière version d'Expression Web, de nouvelles fonctionnalités de publication sont ajoutées telles que -

La possibilité d'exclure des dossiers complets de la publication plutôt que de simples fichiers.
La possibilité de publier facilement la page actuelle.

Step 2- Si vous souhaitez qu'un fichier ou un dossier spécifique ne soit pas publié sur le site, faites un clic droit sur ce dossier ou fichier et excluez-le de la publication. Disons que nous voulons exclure leindex_2.html file.

Comme indiqué dans la capture d'écran ci-dessus, cliquez sur le Exclude from Publishingbouton. De même, vous pouvez également exclure d'autres fichiers.

Step 3- Maintenant que vous avez terminé la conception du site, vous devrez le publier pour que le monde le voie. Expression Web prend en charge plusieurs scénarios de publication différents.

Pour publier le site, nous devons d'abord nous assurer que nous avons enregistré toutes les pages. Un avertissement sera reçu si nous ne l'avons pas fait, une fois le processus de publication lancé.

Maintenant, allons dans le menu Outils.

Sélectionnez le Recalculate Hyperlinks…option. Cliquez surYes sur l'écran suivant.

Step 4 - Allez au Site menu et cliquez sur le Publishing option de menu.

Step 5 - Si c'est la première fois que le site est publié, nous recevrons le message Add a publishing destination, comme illustré dans la capture d'écran suivante.

Step 6 - Cliquez sur le message et sur le suivant Connection Settingsla boîte de dialogue apparaîtra. Entrez toutes les informations requises dans la boîte de dialogue Paramètres de connexion, puis cliquez sur le boutonAdd bouton.

Il affichera la boîte de dialogue suivante. Cliquez surYes.

Step 7 - Si le paramètre de publication est déjà défini, nous recevrons le message Connect to current publishing destination. Cliquez sur le message ou utilisez leConnect To bouton sur le Site View languette.

Step 8- Une fois le processus de publication lancé, les fichiers peuvent être vus en cours de transfert. Une fois terminé, nous recevrons un message indiquant que le téléchargement du fichier est terminé.

La prochaine fois que nous publierons un site, ce processus comparera le site serveur avec ce qui se trouve sur l'ordinateur. S'il y a des fichiers sur le serveur distant que nous avons supprimés du Web sur l'ordinateur, une boîte de message peut apparaître pour vous demander si nous voulons les supprimer. Si nous sommes sûrs qu'ils ne sont plus nécessaires, cliquez sur OK.

Dans ce chapitre, nous allons apprendre à copier le site sur un ordinateur local à l'aide d'Expression Web. Contrairement à l'Explorateur Windows, il n'y a pas de corbeille dans Expression Web. Si nous supprimons par inadvertance le site Web ou les pages du site, nous allons être dans une situation de restauration.

Step 1 - Pour faire une sauvegarde du site Web, ouvrons le site dans Expression Web.

Step 2 - Allez dans le menu Outils et cliquez sur l'option Recalculer les hyperliens….

Cliquez sur Oui, comme illustré dans la capture d'écran suivante.

Step 3 - Ensuite, allez à la Site menu et cliquez sur le Publishing option de menu.

Step 4 - Si c'est la première fois que nous publions ce site, nous recevrons un message Add a publishing destination, comme illustré dans la capture d'écran suivante.

Step 5 - Cliquez sur le message et le Connection Settings la boîte de dialogue apparaîtra.

dans le Namechamp, entrez le nom du site. ChoisirFile System du Connection Typemenu déroulant, puis accédez à l'emplacement où vous souhaitez sauvegarder votre site Web. Ensuite, cliquez sur leAdd bouton.

Step 6- Si le dossier n'existe pas actuellement, nous serons invités à le créer. Cliquez sur «Oui» et le site Web sera créé.

Step 7 - Une fois connecté, cliquez sur le menu déroulant «Afficher» et sélectionnez Tous les fichiers.

Step 8 - Sélectionnez tous les fichiers sur le côté gauche.

Step 9 - Cliquez sur le right arrow Bouton (→).

Une fois le processus de publication lancé, les fichiers seront considérés comme étant transférés. Une fois terminé, un message apparaîtra suggérant que les fichiers ont été téléchargés.

Dans ce chapitre, nous allons apprendre à installer des compléments dans Expression Web. Un complément Web Expression est un progiciel externe qui fournit des fonctionnalités supplémentaires ou améliorées dans Expression Web.

Les compléments peuvent être téléchargés à partir de l'emplacement suivant https://msdn.microsoft.com/en-us/expression/jj873995. Par exemple, téléchargeons le complément AddFeed.

Step 1- Ouvrons Expression Web et allons dans le menu Outils. Clique leAdd-Ins…option de menu.

Step 2- Si c'est la première fois qu'un complément est installé, il y aura une liste vide dans la boîte de dialogue Gérer les compléments. Cliquons sur leInstall bouton.

Step 3 - Sélectionnez le AddFeeds.xadd fichier et cliquez sur le Open bouton.

Step 4- Une fois installé, il vous montrera l'écran suivant. Il vous demandera si nous voulons activer le complément. L'écran donnera toutes les informations sur le complément particulier en cours d'installation. Cliquez sur Oui.

Step 5 - En fonction des compléments installés, ils seront disponibles à plusieurs endroits.

Step 6 - Ensuite, allez à Insertmenu. Vous verrez leTwitter or RSS Feed option qui est maintenant ajoutée après l'installation du complément.

Vous pouvez suivre les mêmes étapes pour installer plus de compléments selon les exigences.

↰ Previous page

Microsoft Expression Web - Guide rapide

Microsoft Expression Web - Historique

Expression Web Service Packs

Configuration requise

Installation

Créer un site Web

Créer une page vierge

Créer une page CSS

Balise <div>

Exemple

sample.css

index.html

Production

layoutdemo.html

Barre d'état

Rapport de compatibilité

Le besoin de modèles Web dynamiques

Créer un modèle Web dynamique

Recherche Windows Live

Étiquette d'ancrage

Exemple

Exemple

Exemple

Exemple

Didacticiel Web Microsoft Expression

Ressources Web MS Expression