Jean-Marie Cocheteau
Microsoft Expression
Web
Concevez des sites internet riches et ergonomiques
Microsoft Expression
Web
CONCEVEZ
DES SITES INTERNET RICHES ET ERGONOMIQUES
Jean-Marie Cocheteau Formateur et infographiste
© Dunod, Paris, 2008 ISBN 978-2-10-053568-2
Table des matières Avant-propos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Chapitre 1 – Les sites web. . . . . . . . . . . . . . . Généralités . . . . . . . . . . . . . . . . . . . . . Classement des sites . . . . . . . . . . . . . . . . En fonction des technologies employées . . . . . En vertu des fonctionnalités . . . . . . . . . . Organisation et structure d’un site . . . . . . . . . Fondations d’un site . . . . . . . . . . . . . . Les outils et services nécessaires . . . . . . . . . Un site est un ensemble de pages web . . . . . . Plusieurs langages dans une même page web . . . Structure d’une page web . . . . . . . . . . . Quelques règles simples et élémentaires à respecter
. . . . . . . . . . . .
. . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . .
. . . . . . . . . . . .
. . . . . . . . . . . .
. . . . . . . . . . . .
. . 7 . . .7 . . .8 . . 8 . . 9 . . 11 . 11 . 12 . 13 . 14 . 16 . 18
Chapitre 2 – Convertir un site FrontPage . . . . . . . Différences entre FrontPage et Expression Web . . Ce qui n’existe plus… . . . . . . . . . . . . . Ce qui existe toujours… . . . . . . . . . . . . Ce qu’il y a en plus… . . . . . . . . . . . . . Compatibilité entre FrontPage et Expression Web Compatibilité et conséquences. . . . . . . . . . Évolution d’un site . . . . . . . . . . . . . . Transformer les composants web . . . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. 21 . . 22 . 22 . 23 . 24 . . 25 . 25 . 25 . . 27
@ III
Expression Web
Chapitre 3 – Prise en main . . . . . . . . . . . . . . Installation . . . . . . . . . . . . . . . . . . . . . Système requis . . . . . . . . . . . . . . . . Installation. . . . . . . . . . . . . . . . . . Choix d’un éditeur de site . . . . . . . . . . . . . L’interface . . . . . . . . . . . . . . . . . . . . . Organisation générale . . . . . . . . . . . . . Personnaliser l’environnement de développement . Comparaison des interfaces des éditeurs de site . Tour d’horizon des principales commandes . . . Démarrer son site. . . . . . . . . . . . . . . . . . Organisation de l’espace disque . . . . . . . . Création du site . . . . . . . . . . . . . . . Propriétés . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. 37 . 37 . 38 . 38 . 39 . 40 . 40 . 41 . 44 . 46 . 55 . 55 . 55 . 58
Chapitre 4 – Codes et conduites de sites . . . . . . . . . . . . . . . . Faut-il être programmeur pour faire un site ? . . . . . . . . . . . . . Un peu d’histoire pour mieux comprendre le HTML et le XHTML . Les balises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Syntaxe d’une balise . . . . . . . . . . . . . . . . . . . . . . Schéma type d’une page HTML vierge . . . . . . . . . . . . . . Analyse du code de notre page « index.htm » du site Primo . . . . Classification des balises HTML . . . . . . . . . . . . . . . . . Des balises pour structurer. . . . . . . . . . . . . . . . . . . . Mettre en forme grâce aux barres d’outils . . . . . . . . . . . . . . . Mise en gras . . . . . . . . . . . . . . . . . . . . . . . . . . Changer de couleur . . . . . . . . . . . . . . . . . . . . . . . Changer la taille d’un texte . . . . . . . . . . . . . . . . . . . Choisir la police . . . . . . . . . . . . . . . . . . . . . . . . Organiser les textes. . . . . . . . . . . . . . . . . . . . . . . . . . . Les paragraphes . . . . . . . . . . . . . . . . . . . . . . . . La justification . . . . . . . . . . . . . . . . . . . . . . . . . Les listes à puces . . . . . . . . . . . . . . . . . . . . . . . . Les liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les hyperliens . . . . . . . . . . . . . . . . . . . . . . . . . Cible des liens . . . . . . . . . . . . . . . . . . . . . . . . . Les ancres . . . . . . . . . . . . . . . . . . . . . . . . . . . Les liens de messagerie . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. 63 . 63 . 64 . 65 . 66 . 68 . 70 . 71 . 71 . 77 . 79 . 80 . 82 . 83 . 87 . 87 . 89 . 90 . 91 . 91 . 94 . 94 . 96
Chapitre 5 – Mises en boîtes : les blocs . . . . . . . . Structurer l’information . . . . . . . . . . . . . . Les tableaux . . . . . . . . . . . . . . . . . . . . Diverses méthodes de création de tableaux. . . .
. . . .
. . . .
. . . .
. 97 . 97 . 99 . 99
@ IV
. . . . . . . . . . . . . .
. . . .
. . . . . . . . . . . . . .
. . . .
. . . . . . . . . . . . . .
. . . .
. . . . . . . . . . . . . .
. . . .
. . . . . . . . . . . . . . . . . . . . . .
Table des matières
Modification de tableaux . . . . . . . . . . . . . . . . . . . Imbrication de tableaux . . . . . . . . . . . . . . . . . . . Création d’une page d’accueil avec un tableau . . . . . . . . . Les frames (ou cadres) . . . . . . . . . . . . . . . . . . . . . . . Définition et utilisation . . . . . . . . . . . . . . . . . . . . Les conteneurs . . . . . . . . . . . . . . . . . . . . . . . . . . . Reparlons un peu de CSS . . . . . . . . . . . . . . . . . . Un peu de syntaxe . . . . . . . . . . . . . . . . . . . . . Quatre ou cinq choses simples au sujet des éléments ou balises . . Les éléments flottants . . . . . . . . . . . . . . . . . . . . Positionnement des éléments de type bloc . . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. 111 . 112 . 113 . 114 . 114 . 118 . 118 . 118 . 119 . 122 . 124
Chapitre 6 – Faites preuve de style (CSS) . . . . . . . . . . . . . . Principes de base des CSS . . . . . . . . . . . . . . . . . . . . . Avantages et inconvénients . . . . . . . . . . . . . . . . . . . . Inconvénients des structures à base de tableaux uniquement . . . Avantages des CSS et des blocs de type DIV . . . . . . . . . . Quelques exemples . . . . . . . . . . . . . . . . . . . . . Les panneaux de contrôle et de gestion des CSS . . . . . . . . . Gestion des styles . . . . . . . . . . . . . . . . . . . . . . . . . . Détails des propriétés et attributs CSS . . . . . . . . . . . . . . . Les CSS et les navigateurs . . . . . . . . . . . . . . . . . . . . . Les principaux navigateurs . . . . . . . . . . . . . . . . . . Quel navigateur utiliser ?. . . . . . . . . . . . . . . . . . . Firefox et ses extensions . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. 129 . 129 . 130 . 130 . 131 . 132 . 134 . 143 . 145 . 151 . 151 . 151 . 153
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . (v2 uniquement) . . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. 155 . 155 . 156 . 160 . 164 . 166 . 168 . 169 . 170 . 171
Chapitre 7 – Valorisez votre image . . . . . . . . . . Les images . . . . . . . . . . . . . . . . . . . . . . Insertion d’une image. . . . . . . . . . . . . . . . Modification d’une image . . . . . . . . . . . . . Utilisation des images en tant que fond d’élément Utilisation des images dans une liste à puces . . . Insertion d’objets Flash (v2 uniquement) . . . . . Insertion d’objets SilverLight (v2 uniquement) . . Insertion d’objets Windows Media Player et autres Comportements . . . . . . . . . . . . . . . . . . .
Chapitre 8 – Travaux des champs : les formulaires . . . . . . . . . . . . . . 175 Traitement du formulaire. . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Structure d’un formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
@ V
Expression Web
Chapitre 9 – Prenez modèle . . . . . . . . . . . . . . . . . . . . . . Les modèles liés aux CSS . . . . . . . . . . . . . . . . . . . . . . . Modèle de style. . . . . . . . . . . . . . . . . . . . . . . . . Modèle de structure. . . . . . . . . . . . . . . . . . . . . . . Modèle de frameset (cadres) . . . . . . . . . . . . . . . . . . . Les modèles dynamiques . . . . . . . . . . . . . . . . . . . . . . . . Création d’un site ou d’une page à partir d’un modèle dynamique . . Création d’une page modèle web dynamique . . . . . . . . . . . Utilisation des modèles web dynamiques fournis par Expression Web
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
181 181 181 183 183 184 185 186 188
Chapitre 10 – Passerelles avec Visual Studio . . . . . . . Introduction . . . . . . . . . . . . . . . . . . . . . . Les principaux langages de développement dynamiques Les serveurs Web de développement . . . . . . . . Pré-requis pour le développement dynamique. . . . . Les pages maîtres . . . . . . . . . . . . . . . . . . . . Définition et utilité . . . . . . . . . . . . . . . . Avantages des pages maîtres . . . . . . . . . . . . Tutoriel complet sur l’usage de page maître . . . . . Utiliser et intégrer l’XML dans vos pages web . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
191 191 192 193 193 195 195 195 196 205
Chapitre 11 – Le référencement . . Les modèles liés aux CSS . . . Le référencement naturel . . Le référencement payant . .
. . . . . . . . . . . . . . . . . . . . .
. . . .
. . . .
. . . .
. . . .
. . . . . . . . . . . . . . . . . . . . .
. . . .
. . . .
. . . .
217 217 218 220
Chapitre 12 – Gérez l’hébergement de votre site . . . L’accès au réseau Internet . . . . . . . . . . . . . L’hébergement du site . . . . . . . . . . . . . . . Le nom de domaine . . . . . . . . . . . . . . . . Le transfert des fichiers vers le serveur . . . . . . Transférer les fichiers de son site vers l’hébergeur
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . .
. . . . . .
. . . . . .
211 211 212 212 213 213
Chapitre 13 – Annexes. Liens . . . . . . . Glossaire HTML . Bibliographie . . .
. . . .
. . . .
. . . .
. . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . .
. . . .
. . . .
221 221 224 229
. . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . . . . . . . . . . . . . . . . . . . . .
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
@ VI
Avant-propos À propos de cet ouvrage Expression Web est un nouveau logiciel de création et de publication de sites web, paru en 2007 et faisant partie de la gamme logicielle Microsoft : Expression. Cet ouvrage aborde les fonctionnalités de la version 1, celles de la version 2 n’étant, à l’heure où cet ouvrage paraît, pas encore complètement établies. Écrit par un formateur infographiste, l’ouvrage aborde de façon simple et varié, toutes les fonctionnalités du logiciel, permettant à des néophytes de pouvoir, dès les premières pages, créer leur propre site web. Tout au long de l’ouvrage, de nombreux exercices, accompagnés de leurs corrections, vous permettront de mettre en pratique vos acquis.
À qui s’adresse ce livre ? En premier lieu aux utilisateurs de FrontPage désireux d’évoluer. Ils trouveront dans cet ouvrage un chapitre qui leur est entièrement consacré, décrivant en détail comment faire passer leur site, d’une version FrontPage à une version Expression Web. Ensuite, le reste du livre leur permettra d’acquérir de nouvelles techniques, qu’ils ne pouvaient pas mettre en œuvre précédemment. En second lieu, à toute personne désireuse d’acquérir les règles de création de site, dans les standards actuels, au moyen d’un logiciel professionnel. Vous découvrirez combien l’écriture d’un site avec Expression Web est aisée, grâce notamment à son mode Wysiwyg permettant un contrôle et un positionnement très précis des éléments du site, à ses capacités d’analyse du code produit, ce qui évite dès le départ de nombreux dysfonctionnements
@ 1
Expression Web
futurs, et à l’excellence de son module de gestion des styles (CSS) qui se révèle très pratique à l’usage. En dernier lieu, aux professionnels : graphistes, intégrateurs, webmasters, travaillant avec ou au sein d’équipes de développement utilisant les environnements de programmation Microsoft, et qui désormais vont enfin pouvoir travailler sur des projets communs, avec des outils communs, utilisant les mêmes interfaces et les mêmes structures de projets. Les utilisateurs de Visual Studio ne seront pas dépaysés avec l’emploi des logiciels de la gamme Expression, et notamment Expression Web.
Les tutoriels en ligne Tous les tutoriels de cet ouvrage ont été conçus et organisés pour être facilement accessibles et exploitables dans l’interface d’Expression Web et son interface de gestion. Les tutoriels sont téléchargeables sur la page associée à cet ouvrage sur le site dunod.com.
Nomenclature et ergonomie de lecture Organisation des tutoriels Les tutoriels sont classés dans les dossiers respectifs des chapitres auxquels ils sont rattachés. Par ailleurs, dans certains cas, nous vous fournissons les corrections des tutoriels à différents niveaux de leurs réalisations, ce qui permet de se rattraper et de pouvoir continuer les exercices, même en cas de difficultés sur une étape du tutoriel.
Lecture du code Les passages essentiels figurent en gras. FLOTTE -- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisi. petit DIV relative Cras placerat metus rutrum velit.
Conseils et astuces L’ouvrage est parsemé de « conseils, Trucs et Astuces », acquis par expérience. Utilisez-les sans modération !
@ 2
Introduction Expression Web succède à FrontPage, dont il reprend les atouts qui ont fait son incroyable succès et notamment sa simplicité d’emploi et son ergonomie qui ont permis à des milliers d’utilisateurs de créer un site web sans écrire une ligne de code. Mais Expression Web va beaucoup plus loin, offrant des passerelles vers tous les nouveaux formats du Web qui permettent de faire des sites multimédias riches et variés. Et surtout, il s’inscrit comme l’élément déterminant, dans l’environnement de développement Microsoft, entre développeurs et graphistes, puisqu’il leur permet de partager les mêmes projets web.
La gamme Expression La collection regroupe cinq logiciels de qualité professionnelle :
3 Expression Design : outil d’illustration vectorielle novateur, notamment en termes d’ergonomie, utilisant des effets dynamiques (non destructifs et modifiables) et capable d’exporter vers un ensemble varié de format tel que le code XAML. Des spécificités qui vont forcément lui permettre de rencontrer beaucoup de succès auprès des designers et codeurs.
3 Expression Blend : la suite logique d’Expression Design. Permet la création d’interfaces graphiques multimédias riches en contenus graphique 2D ou 3D, en graphisme d’animation, en vidéos.
3 Expression
Encoder : complément indispensable à Expression Blend, puisqu’il permet d’encoder une vidéo vers SilverLight, le nouveau plug-in de Microsoft, outil multi-plate-forme permettant aux navigateurs Mac et PC, tels qu’Internet Explorer
@ 3
Expression Web
version 6 ou 7, Safari ou Firefox, d’afficher des contenus multimédias ou des applications Internet enrichies (RIA). Beaucoup y voient un concurrent direct de Flash.
3 Expression Media : outil permettant de visualiser et d’organiser les contenus numériques. Il est capable de gérer un très grand nombre de formats, des plus classiques aux plus récents. Certains le connaissent peut-être déjà, mais sous son ancien nom : iView Media Pro, avant qu’il ne soit racheté par Microsoft.
3 Expression Web : logiciel professionnel permettant la création, la publication et la mise à jour de sites Internet ou extranet, de type statique ou dynamique et capable d’intégrer de nombreux formats de code en plus du HTML, CSS et JavaScript, tels que XML, ASP.NET et XHTML. À noter que la version 2 présentera quelques nouveautés dont la possibilité d’intégrer du PHP, langage de programmation open source permettant, comme l’ASP.NET, la création de sites dynamiques, ainsi que l’insertion d’objets Flash, SilverLight et Windows Media File.
À propos d’Expression Web Expression Web qui, avant sa commercialisation en 2007, se nommait « Web Designer », est donc un outil logiciel « aidant » à la réalisation de sites web modernes et respectant les standards du Web, tels qu’énoncés par le W3C. Pourquoi « aidant » ? Car en fait, pour écrire un site Internet, un logiciel de type « Blocnotes » peut amplement suffire puisqu’il s’agit, pour un site simple, d’écrire du code HTML1 et des feuilles CSS2. Pour ce type de site, modeste, il faut surtout du HTML (pour la structure et le contenu texte), une ou plusieurs feuilles CSS (pour la mise en styles du contenu), saupoudrés si on le souhaite d’un peu de JavaScript, de Flash ou de SilverLight pour apporter un enrichissement multimédia (animation, vidéo, audio…) et du dynamisme. Attention, ne pas oublier que les navigateurs (Internet Explorer, Firefox, Opéra, Safari…) qui permettent l’interprétation de ces langages, ne comprennent de base que le HTML et les CSS, et le reste en fonction des plug-ins installés.
Mais ce langage, même s’il est simple, demande de connaître sa structure, sa syntaxe, ses mots-clés, autant d’éléments qu’il faut apprendre par cœur, ou aller puiser dans un livre ; pas ce qu’il y a de plus pratique et rapide pour faire un site ! Sans compter le fait, que pour voir le résultat, il faut charger la page HTML dans un navigateur à chaque fois. Et les choses se compliqueront quand vous allez vouloir apporter un peu d’animation à vos pages, ou
1. HTML ou HyperText Markup Langage pour « langage utilisant des balises de navigation hyper-texte ». 2.CSS : Cascading Style Sheet traduit en feuille de style en cascade, permettant la mise en style d’une page HTML.
@ 4
Introduction
quand vous souhaiterez que celles-ci soient couplées avec une base de données afin de les alimenter en contenu. C’est pour cela que sont apparus des logiciels comme FrontPage de Microsoft, Dreamweaver de chez Adobe Corporation (anciennement édité par la société Macromedia) et… bien sûr Expression Web. Difficile de prédire si Expression Web deviendra leader dans ce créneau, toujours est-il qu’il possède toutes les qualités pour le devenir, voire même certaines qui font défaut à ses concurrents.
Tour d’horizon des fonctionnalités d’Expression Web
3 Prise en charge des normes XHTML1, DHTML2 et CSS3. 3 Gestion des DOCTYPE. 3 Interface modulable et proche de FrontPage et Visual Studio. 3 Visualisation du code en mode Wysiwyg. 3 Fonctions « IntelliSense » permettant l’anticipation du code
à écrire, en mode
HTML et CSS.
3 Gestion avancée des feuilles de styles CSS. 3 Prévisualisation et application de styles. 3 Affichage et modification directs des marges des blocs. 3 Gestion des couches (layer). 3 Insertion d’objets multimédias aux formats Flash, SilverLight, Windows Media File. 3 Prise en charge du langage PHP version 5. 3 Prise en charge d’ASP.NET 2.0, AJAX et Data Controls pour créer des applications web modulables.
3 Contrôles ASP.NET directement accessibles 3 Emploi de pages maîtres ASP.NET. 3 Modules de modèles web dynamiques (bibliothèques de templates). 3 Bibliothèque d’extraits de code. 3 Intégration directe par glisser-déposer de données XML et XLT. 3 Serveur Web de développement ASP.NET fourni (serveur logiciel). 1. XHTML : pour HTML extensible. Ce n’est jamais qu’une reformulation du HTML 4.01. 2. DHTML : HTML dynamique, mais qui est un peu passé de mode. 3. CSS : Cascading Style Sheet traduit en feuille de style en cascade, permettant la mise en style d’une page HTML.
@ 5
Expression Web
3 Module FTP actif ou passif pour pouvoir synchroniser et placer les fichiers du site sur le serveur.
3 Module de recherche d’erreur de schéma. 3 Module de production de rapport et d’analyse portant sur : • gestion des styles CSS ; • compatibilité avec les navigateurs ; • accessibilité.
3 Module d’optimisation du code. 3…
@ 6
1
Les sites web OBJECTIF Découvrir les différents types de site, les technologies employées, comprendre leurs différences, quels outils faut-il embarquer avec soi pour débuter dans la création d’un site, tels sont les objectifs de ce chapitre.
•••
Généralités Un site web est composé d’un ensemble de pages reliées entre elles et affichées par un navigateur tel qu’Internet Explorer, Firefox, Opéra ou Safari pour ne citer que les plus connus. En théorie, le choix du navigateur n’influe pas sur le rendu du site, puisque cet affichage est régi par une syntaxe commune, édictée par un organisme international, le W3C. La base d’écriture des pages est le langage HTML ou XHTML et le langage CSS, tout en sachant que d’autres langages, tels que le JavaScript, l’ASP.NET et le PHP peuvent s’inviter dans ces pages pour offrir aux visiteurs un contenu plus riche, plus dynamique ou fabriquer à la volée, suivant la demande de l’internaute, des pages dynamiques. Pour que ce site soit ensuite visible par l’ensemble des internautes, il faut que :
3 les pages de ce site soit disposées sur un ordinateur ouvert sur le monde (le rôle des hébergeurs qui vous feront disposer de leurs « serveurs ») ;
3 le nom de domaine qui caractérise votre site soit déclaré à une adresse (URL) bien précise, afin d’ être accessible par la communauté.
@ 7
Expression Web
On peut compléter cette mise en visibilité par un travail de référencement, c’est-à-dire appliquer les règles de référencement naturel et/ou mettre en place une politique marketing de référencement payant afin que les moteurs de recherche (Google, Yahoo, Live Search) puissent proposer votre site comme un résultat pertinent face à la requête d’un internaute sur un mot (mot-clef) ou une expression censés représenter une thématique particulière (voir chapitre 11).
•••
Classement des sites On peut classer les sites de diverses manières :
3 en fonction des technologies employées pour leur construction ; 3 en fonction de leurs modes de communication. Bien entendu, cette distinction est arbitraire et évolue très vite en fonction des technologies, des modes et des attentes des utilisateurs ; peut-être vous permettra t-elle d’avoir une meilleure vision de ce monde en perpétuel mouvement, tout en vous aidant à choisir la technologie et le type de site adapté à vos besoins personnels, à ceux de votre association ou de votre société.
En fonction des technologies employées Soit les pages reçues par le navigateur sont figées, c’est-à-dire que chaque page sera affichée de manière identique, en termes de contenus, pour tous les internautes (site statique), soit le contenu des pages varie en fonction de la demande des utilisateurs (site dynamique). Au final, le navigateur reçoit toujours du langage HTML (ou XHTML) et des feuilles de style CSS principalement ; tant mieux, car il ne sait lire à peu près que ça.
Site statique Dans le cas des sites statiques, le contenu des pages est figé et prédéterminé. Chaque visiteur verra la même chose, aura accès aux mêmes informations. Le serveur se contente d’envoyer le contenu du fichier de la page HTML qu’il a sur son disque dur sans se poser de questions. C’est bien entendu, le type de sites le plus facile à mettre en œuvre, et ils peuvent parfaitement convenir aux besoins de particuliers, d’associations, de petites et moyennes entreprises, souhaitant présenter leur gamme de produits. C’est aussi, bien sûr, les plus rapides à monter ; ils ne nécessitent pas d’être un professionnel de la programmation, mais juste de connaître les principales balises HTML et propriétés CSS. C’est donc aussi ceux qui seront les meilleurs marchés.
@ 8
Chapitre 1. Les sites web
Site dynamique Dans le cas d’un site dynamique, le contenu des pages (contenu texte ou contenu « riche » audio, vidéo) varie en fonction de la demande des visiteurs. Pas forcément sur toutes les pages, mais au moins sur les pages qui nécessitent de présenter des contenus en fonction de requêtes du visiteur, comme il peut en faire sur une page « produits » d’un site d’e-commerce par exemple. Imaginons que le visiteur souhaite voir s’afficher tous les produits ayant un prix inférieur à 200 euros. Le fait de faire cette demande est une requête. Au moment de la validation par l’utilisateur, celle-ci est envoyée par le navigateur vers le serveur du site. Un programme spécifique (de type PHP, ASP.NET ou Java pour les plus répandus) va alors aller glaner dans une base de données (présente également sur le serveur) les renseignements demandés puis, une fois la récolte faite, va construire une nouvelle page HTML et la renvoyer au poste client, qui va pouvoir être affichée par le navigateur. Ainsi, à plusieurs requêtes différentes, vont correspondre des pages différentes. Pour pouvoir ainsi générer du code dynamique, l’HTML, le CSS et le JavaScript ne suffisent plus. Il faut ajouter une programmation en ASP.NET ou PHP principalement, au sein des pages HTML. La mise en place de ce type de site est donc plus lourde, plus chère et nécessite déjà d’avoir quelques connaissances en programmation. Cependant, dans les deux cas, sites statiques ou dynamiques, Expression Web saura vous être utile, voire indispensable. Dans le cas de sites statiques, nous verrons qu’Expression Web vous permettra de construire facilement et simplement votre site, en vous signalant vos erreurs, en optimisant le code, en vous proposant des modèles. Par contre, dans le cas de sites dynamiques, il saura être un parfait partenaire, puisque si vous travaillez avec des développeurs ASP.NET, vous pourrez partager vos projets avec les développeurs. Eux travaillant sous Visual Studio (l’outil de développement pour écrire du code .NET), et vous sous Expression Web, mais sur un projet commun, le site. Ainsi, et suivant la volonté de Microsoft, Expression Web devient la passerelle entre développeurs Microsoft et web designers.
En vertu des fonctionnalités Qu’y a-t-il de commun… Qu’y a-t-il de commun entre une newsletter, un site d’association, le portail du ministère des Finances, le site de vente par correspondance d’un grand magasin parisien, le wiki de mon encyclopédie en ligne favorite, le forum dans lequel vous vous exprimez régulièrement, le tchat sur lequel vos enfants passent des nuits entières à discuter et le blog de ma voisine, très jolie au demeurant, sans oublier les mails et les spams qui inondent votre boîte aux lettres ?
@ 9
Expression Web
Réponse : le code HTML et les feuilles de styles CSS. Ce qui permet d’affirmer :
3 qu’en connaissant l’HTML et les CSS, vous vous ouvrez des possibilités de communication importantes et variées ;
3 que dans cette énumération, on va trouver des technologies statiques et d’autres dynamiques.
Analysons plus en détail ces éléments en les comparant Nous allons juste passer en revue ce que l’on trouve désormais sur, dans et autour d’Internet, histoire de démystifier tous ces termes et technologies qui souvent, par manque d’information, effraient.
3 Différences
entre une newsletter et un site web : une newsletter est en fin de compte une page de site, isolée, utilisant du code HTML et du code CSS, mais prévue pour être envoyée par mail, alors qu’un site web comporte plusieurs pages HTML, liées entre elles par des hyperliens. Par ailleurs, on se déplace pour la visionner (on va à son adresse URL), à la différence de la newsletter qui vient vers vous.
3 Différences entre un site personnel et le site d’un grand magasin : • Aucune si l’on se fie au code lu par le navigateur client ; du HTML, du CSS et
du JavaScript. • Nombreuses si l’on se réfère aux technologies ayant produit le HTML (dynami-
que), aux temps et donc aux coûts de développement, au niveau de sécurité exigé pour protéger les données, aux débits d’entrée et de sortie des données côté serveur.
3 Différence entre un blog et un site : aucune, car un blog est un site web. Cependant, dans le cas d’un site web, vous avez tout à faire (création du design, de la structure, du contenu…), tout à gérer techniquement (référencement, hébergement, nom de domaine…) mais vous avez une totale liberté en termes de fonctionnalités et de quantité de contenus. Un peu comme si vous achetiez un terrain pour ensuite construire de vos mains une somptueuse demeure (mais vous avez le droit d’embaucher des ouvriers ou de vous faire aider). Tandis qu’avec un blog (issu du terme Weblog), vous emménagez dans un logement tout équipé. Même la cuisine est fonctionnelle, c’est beau, c’est propre mais vous êtes en location. Un blog est un ensemble de pages, construites suivant un modèle préétabli, et composées d’une suite de « billets ». Ces « billets », genre d’articles assez courts en général, peuvent être accompagnés d’éléments riches, tels que des passages audios, vidéos ou des images. En général, si le blog a une certaine audience, les billets sont suivis de commentaires rédigés par les internautes lecteurs. Par ailleurs, une des pratiques très en vogue sur les blogs, consiste à relayer des billets parus sur d’autres blogs ou d’autres sources d’informations.
@ 10
Chapitre 1. Les sites web
Pour monter un blog, il faut passer par un moteur spécialisé. Les deux principaux sont DotClear et WordPress. Le blog est le reflet de ce que certains nomment le Web 2.0, où il y a un contenu participatif. Avant l’avènement du Web 2.0, l’information présente dans un site était rédigée par l’auteur du site ; avec le Web 2.0, une bonne partie de l’information est écrite par les visiteurs. Mais attention, aussi bien dans le cas d’un site que dans le cas d’un blog, le directeur de publication (c’est-à-dire vous, dans le cas d’un site ou d’un blog perso) est responsable du contenu, de tous les contenus, qu’ils soient ou non de lui ; à partir du moment où des contenus sont publiés sur votre site ou votre blog, vous en êtes responsable. Cela veut donc dire qu’il est préférable de toujours travailler en « modération », c’est-à-dire se réserver la liberté de lire et de pouvoir supprimer un commentaire envoyé par un lecteur.
3 Et le Wiki ? Un Wiki est également un site web, mais totalement orienté vers le travail collaboratif ; un espace, ouvert pour un projet, où chaque visiteur peut apporter des éléments de contenus, mais aussi en effacer. Ce genre de site est très courant dans les communautés de développeurs.
•••
Organisation et structure d’un site
Fondations d’un site Au départ, un site se construit en « local », c’est-à-dire que les fichiers composant le site sont créés et sauvegardés sur une machine présente dans les locaux du créateur ou de la société. Il est également possible, dans le cas de sites plus importants, que plusieurs personnes travaillent conjointement sur un site. La encore, les fichiers seront tous placés sur la même machine, que l’on peut présenter comme un « serveur local ». Une fois le site créé et testé, on le bascule alors sur le disque dur de l’hébergeur, par connexion à distance (un upload en protocole FTP). Mais pour un site de type dynamique, il faut, pendant sa création et ses phases de tests, pouvoir reproduire le comportement du site tel qu’il sera en ligne. On doit donc pouvoir tester des requêtes passées dans une page « produits », par exemple « affiche-moi tous les produits de marque X, et inférieurs à 200 € ». Pour cela, tous les environnements de développement permettent de « transformer » la machine locale en serveur web local : serveur Apache pour les environnements PHP, et IIS pour les environnements .NET de Microsoft.
@ 11
Expression Web
Les outils et services nécessaires Un éditeur de site pour : 3 écrire le code des pages HTML ;
3 écrire le code des feuilles de styles (CSS) ; 3 écrire le code des fonctions JavaScript ; 3 écrire le contenu texte ; 3 insérer des objets multimédias images, des vidéos ; 3 transférer vers l’hébergeur (FTP) ; 3 etc. Outils conseillés : Expression Web bien sûr.
Un logiciel d’art graphique pour : 3 créer les visuels en mode bitmap ou vectoriel (boutons, illustrations, bannières, fond de pages) ;
3 faire des retouches photos (correction, trucage, modification de tailles) ; 3 faire les « découpes d’images ». Outils conseillés : Expression Design, Photoshop CS3, Flash, Illustrator mais aussi PaintShopPro, PhotoFilter, Pixia et GIMP (gratuit).
Des navigateurs web pour : 3 visualiser ce que verront les internautes. Le navigateur le plus répandu actuellement, est Internet Explorer V6 et 7, suivis par Firefox V2 et Opéra. Il est fortement conseillé, pour les créateurs de site, de disposer de plusieurs navigateurs, car certains interprètent de manière particulière le code HTML ou CSS qu’ils reçoivent, provoquant des défauts d’affichage ;
3 valider votre site ; 3 pouvoir modifier en temps réel les attributs des sélecteurs CSS (possible sous Firefox avec l’extension « Web Developper Tool Bar »). Outils conseillés : Internet Explorer version 6 et version 7, Firefox v2 et bientôt v3, Opéra v9, Safari v3. Tous ces navigateurs sont gratuits.
Un outil de transfert de fichiers pour : 3 transférer les fichiers composant le site, de votre disque dur vers le disque dur du serveur de l’hébergeur. Pour sécuriser le transfert mais également autoriser une vitesse d’échange plus importante, on utilise un protocole d’échange particulier appelé FTP (File Transfert Protocol) et non le protocole HTTP.
@ 12
Chapitre 1. Les sites web
Notez qu’Expression Web possède son propre module de transfert, utilisant le protocole FTP. Outils conseillés : FileZilla (gratuit).
Un hébergeur : pour que le monde entier puisse accéder à votre site. Ils sont nombreux, et les critères de choix sont de trois ordres :
3 qualité des services offerts (bande passante, espace de stockage, boites mails…) ; 3 tarifs pratiqués ; 3 choix de la technologie serveur en fonction des outils de développement que vous aurez utilisé pour faire le site : • vous avez fait un site statique ; un hébergeur supportant les serveurs Apaches est
suffisant. C’est la majorité des hébergeurs et aussi les moins chers ; • vous avez fait un site dynamique, utilisant une ou des bases de données MySQL
et du PHP : pareil au cas précédent ; • vous avez fait un site dynamique utilisant une plate-forme de développement
Microsoft (.NET, ASP.NET) avec une ou des bases de données SQL. Dans ce cas, il faut choisir un hébergeur possédant un serveur de type Microsoft.
Un nom de domaine pour : 3 être « domicilié » sur le Net. Ce nom de domaine est pour ainsi dire votre marque de site. Il est impossible de l’acheter définitivement, par contre, vous pouvez simplement louer son usage durant un laps de temps déterminé (un an minimum) auprès de sociétés privées, spécialement habilitées à fournir ce service, et que l’on nomme des « registrars » ou bureaux d’enregistrement en français. Attention : pour un même nom de domaine, « maisons-bretonnes » par exemple, il va exister plusieurs suffixes possibles : .com, .fr, .org, .eu, .uk (pour un site anglais par exemple). À chaque fois, il vous faut déposer une demande différente. Au final, vous pouvez donc disposer de plusieurs noms de domaine tels que : « maisons-bretonne.com », « maisons-bretonne.fr », « maisonsbretonne.uk », etc.
Un site est un ensemble de pages web Un site est un ensemble de pages HTML reliées entre elles par des liens nommés aussi hyperliens. La notion de lien est donc primordiale dans l’univers des sites, et c’est même à la base de la naissance de l’Internet. Les liens sont principalement placés sur des mots, des expressions ou des images. Un lien n’est rien d’autre que l’indication exacte de l’emplacement de l’objet recherché (pages, images, autre site), sur le disque dur du serveur ou vers une adresse (URL) extérieure. Les
@ 13
Expression Web
pages web comportent de nombreux éléments, tels que des images, des vidéos, des fichiers audios, des documents PDF, etc., tous chargés dans la page par un lien.
Plusieurs langages dans une même page web Divers langages sont utilisés pour la construction des pages, même si au final un navigateur lit essentiellement de l’HTML ou du XHTML et du code CSS.
Langages de base
3 Le langage HTML ou XHTML, la base, permet de construire la structure et de placer les contenus variés. Il existe indifféremment deux suffixes pour définir une page HTML : HTM ou HTML au choix.
3 Les feuilles de style CSS, en code CSS, sont responsables de la décoration (mise en style), comme par exemple la taille des polices, leur couleur, la couleur des fonds. Elles jouent également un rôle important dans la disposition des différents blocs ou conteneurs (paragraphes, colonnes…). Par ailleurs, elles permettent d’adapter les contenus (mise en page et mise en style) en fonction du support utilisé pour visualiser les pages (écran, imprimantes, téléphone mobile, périphériques de lecture ou de saisie pour handicapés). Peu employées au début du Web, elles sont aujourd’hui la garantie des sites de qualité, en favorisant la lisibilité, l’ergonomie de navigation, l’accès de l’information aux handicapés, les mises à jour et le travail collaboratif entre designers et développeurs. Elles offrent la distinction entre écriture du code de développement et webdesign. Le code CSS se place : • soit dans la page HTML : on parle alors de feuille de style interne ; • soit dans un fichier séparé, comme feuille de style externe, portant une extension
CSS. Un lien dans la page HTML permet de relier page HTML concernée et feuille de style.
3 Le JavaScript : apparu en 1995 dans le navigateur Netscape et créé par Sun et Netscape. Ce langage permet d’apporter essentiellement de l’interactivité dans les sites. Attention, interactif ne veut pas dire dynamique. Un site statique peut comporter du JavaScript, il ne deviendra pas dynamique pour autant. L’un des emplois les plus courants de ce langage se retrouve dans les roll-over, c’est-à-dire le fait qu’une image ou un fond de bouton par exemple change d’aspect au survol ou au clic de la souris. Son extension est .JS et comme pour les CSS, le code JavaScript peut être soit placé en interne, dans la ou les pages HTML concernées, soit placé dans un fichier externe, avec un lien dans la page HTML.
@ 14
Chapitre 1. Les sites web
Autres langages utilisés pour la création de sites dynamiques
3 ASP.NET : développé par Microsoft, le langage ASP.NET permet l’élaboration de sites web dynamiques. L’extension des pages écrites en ASP.NET est .ASPX. Ce type de programmes travaille souvent en synergie avec une ou plusieurs bases de donnés de type Microsoft SQL Server. Microsoft propose diverses versions de son éditeur, Visual Studio, pour produire du code ASP.NET. De même, Microsoft multiplie les offres commerciales auprès des centres universitaires permettant, pour les étudiants, de disposer d’environnement de développement bon marché, voire gratuits.
3 PHP : langage créé par Rasmus Lerdorf en 1994, permettant également la création de pages dynamiques mais, à la différence d’ASP.NET, ce langage fait partie du monde de l’open source, c’est-à-dire créé par l’interaction et la collaboration de centaines de développeurs dans le monde, et d’un usage gratuit, même dans une application commerciale. À l’instar d’ASP.NET, le PHP a besoin de pouvoir échanger avec des bases de données ; par défaut, le PHP travaille avec MySQL, faisant également partie du monde de l’open source. D’ailleurs, l’installation du PHP sur votre poste, par l’intermédiaire du pack EasyPHP, installe également l’administration de cette base de données (ou SGBD).
3 ColdFusion
: langage payant, proche de la syntaxe de l’HTML et désormais propriété d’Adobe system, après avoir été créé par les frères Allaire et racheté par Macromedia. ColdFusion est moins présent sur le marché de la génération de sites dynamiques, sans doute parce qu’il est payant. Néanmoins, il est capable de travailler naturellement avec les SGBD rencontrées précédemment, Microsoft SQL Server ou MySQL pour le PHP. L’extension des pages écrites en ColdFusion est .CFM.
3 Java : il est à noter que l’univers Java est également très présent dans le domaine de la création de sites web dynamiques. Similaire en termes de fonctionnalités aux technologies dynamiques déjà évoquées, cette plate-forme est fortement portée par la richesse de sa communauté et par ses nombreux outils librement distribués. Si le langage Java vous attire, l’IDE « Eclipse » vous permettra notamment d’éditer vos pages JSP (JavaServer Pages) qui pourront être servies par nombre de serveurs web compatibles comme TomCat d’Apache, Blazix, WebSphere d’IBM, etc. Attention : le choix du langage de développement a une répercussion sur le choix de l’hébergeur, qui doit disposer sur ses serveurs, des librairies de programmation des langages utilisés.
Autres langages rencontrés : le XML et XSLT (présentations de contenus et structure par balisage des pages), le Java, le VBScript. Un coup d’œil tout particulier par contre pour la programmation en ActionScript. Ce langage, orienté objet comme l’ASP.NET par exemple, est le langage de programmation des
@ 15
Expression Web
applications Flash, anciennement de la société Macromedia, et depuis propriété de la société Adobe. Nous en sommes à la version 3, dénommée AS3. Le Flash permet de développer soit de simples animations, interactives ou non (très prisées par exemple par les bannières de publicité, qui sont désormais presque à 100 % composées d’animations Flash), mais également de proposer des modules entiers (comme une page de formulaire par exemple) ou bien un site 100 % Flash. Les applications Flash sont capables de communiquer avec les serveurs et le code HTML, JavaScript, PHP, ASP.NET et ColdFusion. Mais, de toute façon, les applications Flash seront toujours, pour être présentes dans une page Web, encapsulées dans un objet HTML. À la différence du PHP, du JavaScript ou de l’ASP.NET, vous ne trouverez jamais de code ActionScript, « libre », directement dans une page HTML. Et bien sûr, il est préférable de disposer du programme Flash. Par contre, pour pouvoir être chargées par les navigateurs, les applications Flash ne nécessitent que de disposer du Player Flash en relation avec le navigateur utilisé.
Structure d’une page web Une page HTML comporte toujours deux parties bien distinctes :
3 l’entête, délimité par les balises « HEAD » et « /HEAD » ; 3 le corps de page délimité par les balises « BODY » et « /BODY ». L’entête L’entête est bien sûr indispensable, car c’est dans cette zone, invisible à l’affichage dans les navigateurs, que vont être placés tous les paramètres caractérisant la page, comme le DOCTYPE qui définit le langage informatique utilisé :
On va également y trouver le titre de la page (entre les balises <TITLE>) et la liaison vers une feuille de style externe
ou les caractéristiques des styles, si ceux-ci sont en interne : <style type="text/css"> #container { height: 400px; position: relative; width: 400px; color: #FF00FF; border: 4px solid; padding: 1px 4px; }
@ 16
Chapitre 1. Les sites web
#header {text-align: center;} #page_content { margin: 0; height: 268px; text-align: center; }
Le corps de page Représenté par les balises et . C’est entre cette balise ouvrante (la première) et la balise fermante concordante, que va être placé tout le contenu de la page. Ici, dans notre exemple, nous avons d’abord placé des blocs distincts, qui servent de conteneurs pour y placer les éléments textes ou images (balises DIV) : …
puis nous avons mis un titre : Page d'accueil du Site
puis inséré une image avec sa légende :
Bienvenue sur mon site
Fig. 1.1 Le code de la page…
@ 17
Expression Web
Fig. 1.2 et son résultat dans un navigateur
Pour en finir avec ces généralités et cette introduction à l’HTML, je me permets de vous apporter ci-dessous quelques conseils et règles de conduite qu’il me semble préférable d’appliquer pour optimiser ses chances de réussite dans la construction d’un site web.
Quelques règles simples et élémentaires à respecter Au départ, un site comporte peu de fichiers et il est aisé de s’y retrouver. Par contre, au fil des jours, il va grossir au rythme des ajouts de pages, ajouts de contenus médias (images, photos, vidéos), fichiers annexes (feuilles de style, fichier JavaScript). Il est donc important de prendre de bonnes habitudes dès le départ :
3 pour éviter les erreurs « bêtes » (écrasement de fichiers, corrections sur les mauvais fichiers, liens cassés…) ;
3 pour retrouver plus facilement la cause d’un bug ; 3 pour faciliter les mises à jour et sauvegardes de sécurité ; 3 pour optimiser le référencement de votre site par les moteurs de recherche. En effet, ceux-ci sont par exemple très friands de nom de fichier en rapport avec le contenu. Par exemple, ne nommez pas une page servant de vitrine à des produits bio sous le terme : « page02.htm » mais plutôt « produits_bio.htm ». De plus, cela vous permettra également de connaître immédiatement le contenu de la page, quand vous
@ 18
Chapitre 1. Les sites web
reviendrez sur le site dans 6 mois pour une correction. C’est également valable pour le nom des fichiers de médias (audio, images, vidéos…).
Les règles de base
3 Ne placez pas d’accents ou de caractères spéciaux (cédilles, apostrophes, guillemets, etc.) dans les noms de fichier ou de répertoires.
3 Si vous souhaitez séparer deux mots, utilisez le tiret (-) ou l’underscore (_), mais surtout n’utilisez pas d’espaces. En effet, suivant les polices employées, il est parfois difficile de savoir s’il y a un, deux ou pas d’espace. En décidant de ne jamais en mettre, vous vous simplifierez la vie ! De même, n’utilisez aucun caractère de ponctuation dans le préfixe ou le suffixe de vos fichiers, tels que le point, le point-virgule ou la virgule. Seul le point est autorisé pour séparer préfixe du suffixe.
3 Préférez
les minuscules aux majuscules et ne les mélangez pas dans un nom de fichier. Si en local votre système d’exploitation ne fait pas de différences entre majuscules et minuscules, il n’en est pas de même des systèmes présents sur certains serveurs. Au final, vous risquez de vous retrouver avec une véritable énigme pour vous ; un site qui fonctionne en local, mais pas sur le serveur de l’hébergeur avec, notamment, la présence de « liens cassés », c’est-à-dire l’impossibilité pour le programme d’aller chercher la cible du lien.
3 Organisez
vos fichiers dans le répertoire du site, en créant des sous-répertoires. Chacun aura son organisation dans laquelle il se sentira à l’aise. Ainsi, moi par exemple, je préfère placer toutes les pages (leur fichier) en racine du site, alors que certains, comme Microsoft avec les modèles par exemple, n’hésitent pas à créer un sous-répertoire par page. Mais le plus important, et sur ce point il existe un consensus, c’est de séparer les images utilisées dans le site, en les plaçant dans un sous-répertoire « images ». Attention, à ne pas associer dans ce dossier, les maquettes ayant servi à créer ces images. Pourquoi ? lors du transfert de votre site vers le serveur de l’hébergeur, il sera beaucoup plus rapide, s’il n’y a que des images servant au site, de recopier directement le sous-répertoire « images ». Il est hors de question de placer vos maquettes (.PSD en général) sur le serveur, au su et au vu de tous. Donc, si ces maquettes sont dans le répertoire « images », il va vous falloir faire du tri avant de procéder au transfert des contenus. Idem pour les mises à jour du site : pensez que le sous-répertoire « images » sera amené à être souvent modifié.
3 Faites du code « propre », c’est-à-dire respectant la syntaxe et les règles de programmation, et annoté (avec des commentaires pour éclairer certains points précis du développement). Non seulement cela facilite le travail de débogage mais, en plus, cela améliore le référencement.
3 Faites du code léger en limitant l’emploi des tableaux aux données tabulaires qui les nécessitent (et non pour faire de la pseudo-mise en page).
@ 19
Expression Web
3 Séparez le contenu du style, en confiant la gestion des styles aux feuilles de styles CSS2.
3 Pensez aux règles d’accessibilité aux handicapés (et en plus, c’est bon pour le référencement).
3 Ne bouleversez pas les règles de lecture et d’ergonomie simplement pour vous faire remarquer. Vous risquez surtout de faire fuir !
3 Testez votre site sur plusieurs navigateurs : Internet Explorer v6 et v7, Firefox, Opéra et Safari.
@ 20
2
Convertir un site FrontPage OBJECTIF Si vous lisez ce chapitre, c’est que vous êtes désormais conscient des avantages d’Expression Web dans le domaine du développement de sites. Après 10 ans de présence, FrontPage ne correspond plus aujourd’hui aux attentes des développeurs et des concepteurs web, car trop éloigné des standards du Web et des règles définies par le W3C. En fait, FrontPage n’est pas remplacé dans la gamme de produits de Microsoft par un mais par deux produits : – Expression Web pour répondre à 90 % des besoins de création de site, qu’ils soient statiques ou dynamiques. – Microsoft SharePoint Designer 2007, pour les concepteurs travaillant sous la plate-forme Microsoft SharePoint®. Par ailleurs, rien ne vous empêche de garder FrontPage installé sur votre poste, en même temps qu’Expression Web, le temps d’effectuer les transformations de vos sites. Ce chapitre passe en revue la compatibilité des pages créées sous FrontPage et reprises sous Expression Web, les éléments ou fonctionnalités de FrontPage qui ont disparu et les solutions pour les remplacer sous Expression Web.
@ 21
Expression Web
•••
Différences entre FrontPage et Expression Web
Ce qui n’existe plus… Les thèmes et bordures Datant des premières versions de FrontPage, ces mécanismes permettaient d’appliquer à une ou plusieurs pages un style prédéfini. Très pratiques sans doute, mais devenus totalement obsolètes, et surtout faisant appel à du code « propriétaire » c’est-à-dire du code avec une syntaxe propre à FrontPage. Les barres de liens Il existait trois types de barres de liens :
3 une assujettie à la structure de navigation ; 3 une avec les deux liens « Suivant » et « Précédent » ; 3 et une avec des liens personnalisables. Ces trois types de barres utilisaient les extensions FrontPage Server. Par ailleurs, l’ajout de nouveaux liens se faisait par l’intermédiaire de la « vue Navigation » qui n’existe plus dans Expression Web. Donc, sous Expression Web, s’il est toujours possible de travailler sur des pages comportant des barres de menus, il est par contre impossible de rajouter de nouveaux liens, puisqu’on ne dispose plus de cette fameuse « Vue Navigation ». Cependant, sous Expression Web, il est très facile de mettre en place ces barres de menus : non plus avec une technologie propriétaire faisant appel à des ressources sur les serveurs, mais grâce à l’emploi des feuilles de style (les CSS). C’est léger, faisant partie des standards, conseillé par le W3C et, en plus, ce type de menus géré en CSS facilite le référencement.
Les composants web FrontPage Nécessitant de nombreuses lignes de code, les composants web, aussi appelés webbots, étaient donc lourds et entraînaient des ralentissements dans le chargement des pages. Autre conséquence, les modifications ou personnalisations ultérieures étaient pénalisées. Disparus dans Expression Web, ils peuvent être, comme nous le verrons dans ce chapitre, facilement remplacés, notamment par les services web, qui sont devenus d’un usage courant pour les développeurs. Néanmoins, vos sites comportant des composants web créés sous FrontPage pourront toujours être chargés dans Expression Web, mais sans aucune possibilité de modification sur ces composants web et, à condition que les extensions nécessaires soient toujours disponibles sur le serveur.
@ 22
Chapitre 2. Convertir un site FrontPage
FrontPage Server Extensions Les composants web avaient besoin d’extensions FrontPage Server installées sur les serveurs. Déjà, la version FrontPage 2003 ne prend plus en charge que les composants web compatibles avec les extensions FrontPage 2002 Server. Avec Expression Web, plus besoin de FrontPage Server.
Ce qui existe toujours… Les interfaces Remarquez la grande similitude entre les deux interfaces, avec notamment les trois modes de visualisation des pages web en construction, qui restent identiques :
3 Création. 3 Fractionné. 3 Code.
Fig. 2.1 L’interface logicielle de FrontPage 2003
@ 23
Expression Web
Fig. 2.2 L’interface logicielle d’Expression Web
Ce qu’il y a en plus…
3 Plus de fonctionnalités. 3 Gestion des feuilles de style CSS. 3 Respect des standards. 3 Qualité du code généré. 3 Poids du code généré. 3 Pérennité du code. 3 Facilité de mise à jour. 3 Portabilité du code. 3 Gestion des modèles web dynamiques et des pages maître ASP.NET. 3 Analyse des paramètres d’accessibilité des sites. 3 Prise en charge de langages de développement professionnel, permettant la création et la gestion de sites dynamiques tels que le langage ASP.NET dans la version 1 d’Expression Web, et également du langage open source, PHP dans la version 2.
3 Plate-forme commune de réalisation entre développeurs Microsoft et web designers. Ainsi, pour toutes ces raisons, il semble très nettement préférable d’utiliser, en 2008, Expression Web plutôt que FrontPage 2003, pour créer un site.
@ 24
Chapitre 2. Convertir un site FrontPage
•••
Compatibilité entre FrontPage et Expression Web
Compatibilité et conséquences Mais que se passe-t-il pour les sites déjà créés sous FrontPage, est-il possible de les reprendre sous Expression Web, de modifier leur code, d’y apporter des mises à jour ou de rajouter des éléments ? En fait, tout dépend des technologies de code utilisées pour la création des pages du site :
3 Si le code des pages (langages) est composé uniquement d’HTML, de code CSS ou de code JavaScript (voire de PHP ou d’ASP.NET dans le cas de sites dynamiques) et que vous n’avez pas employé de composants web : pas de soucis. Ces langages sont les standards du marché. Donc, l’intégralité des pages du site pourra être reprise, modifiée, mise à jour ou se voir adjoindre de nouvelles pages ou de nouveaux contenus. Notez que si vous avez placé non pas des composants web mais des « Comportements », pas de soucis non plus puisque dans la plupart des cas les « Comportements » sont le résultat de fonctions JavaScript, langage et méthodologie tout à fait acceptés par Expression Web, et qui continuent à être couramment employés. Astuce : pour vérifier qu’une page ne contient pas de composant web : il suffit de lancer un « chercher/remplacer » (Ctrl + F) sur le terme : « webbot », car ce terme est placé en début du code des composants web.
3 Par contre, si vous avez placé des composants web, le problème est différent : • Primo : vos pages pourront toujours être chargées dans Expression ; • Secundo : des modifications pourront être apportées à certains composants web
présents dans les pages mais pas à tous, comme nous le verrons dans les paragraphes suivants. Mais dans tous les cas, vous continuerez à avoir besoin des extensions FrontPage Server, qui doivent être placées côté serveur. • Tertio : il vous sera désormais impossible, en étant sous Expression Web, de rajou-
ter de nouveaux composants web.
Évolution d’un site En résumé : si vous souhaitez pouvoir faire évoluer votre site dans les mois et les années futures, alors profitez de l’occasion qui vous est donnée au cours de cette migration de FrontPage vers Expression Web, pour revoir sérieusement le code de vos pages, voire le réécrire, bref offrir à votre site un grand « nettoyage de printemps ».
@ 25
Expression Web
Voyons les avantages que ce grand nettoyage pourrait procurer à votre site :
3 Faire disparaître toute trace des composants web qui, comme nous l’avons déjà dit : • utilisent du code « propriétaire » et n’offrent donc pas tous les gages de compa-
tibilité avec les divers navigateurs ; • alourdissent le code, ce qui a pour effet de ralentir le chargement des pages ; • pénalisent les mises à jour en limitant leurs champs d’action ; • sont considérés comme hors standards par les instances mondiales du Web, le
W3C notamment ; • sont amenés à plus ou moins long terme à disparaître et à ne plus bénéficier de
support technique de la part de Microsoft ; • nécessitent de disposer des extensions de Microsoft FrontPage Server côté ser-
veur.
3 Mise à niveau des méthodologies de programmation : • suppression de l’utilisation des tableaux pour faire des mises en pages ou mises
en style, au profit de l’emploi de feuilles de style CSS2 ; • allègement du code par des méthodes à base de CSS2, comme pour les roll-over
par exemple ; • suppression de la technologie avec des frames (qui empêchent le référencement) ; • profitez avec Expression Web de la mise en commun des plates-formes de déve-
loppement, pour les sites utilisant les technologies Microsoft, ASP.NET et Dot.Net, en utilisant par exemple les contrôles ASP.NET accessibles directement dans l’interface de travail d’Expression Web ;
3 Mise à niveau de l’ergonomie de navigation. Profitez-en pour revoir le chemin de navigation (si vous disposez par votre hébergeur, ou par les services de Google par exemple, de statistiques de fréquentation de votre site, c’est le moment de les utiliser) : elles vont vous permettre de voir les pages vues ou visitées. À partir de là, posez-vous des questions pour savoir pourquoi certaines pages ne sont pas lues ; est-ce un problème de contenu, un problème de lien cassé, une mauvaise accessibilité de la page ?
3 Mise en place ou mise à niveau des « options d’accessibilité pour les handicapés ». Les systèmes et les logiciels d’aide à la lecture des sites web, notamment pour les handicapés, ont fait en quelques années de réels progrès. Depuis longtemps déjà, les instances du Web prêchent pour que les développeurs intègrent dans leurs méthodologies de programmation les éléments qui permettent cette accessibilité des handicapés aux sites web. Vous découvrirez un excellent dossier sur ce sujet à l’adresse suivante : http://openweb.eu.org/accessibilite/.
3 Mise à niveau des éléments d’optimisation du référencement naturel par les moteurs de recherche.
@ 26
Chapitre 2. Convertir un site FrontPage
•••
Transformer les composants web Sous Expression Web, il est donc toujours possible d’utiliser les composants web (webbots) mais avec certaines restrictions :
3 il n’est plus possible d’ajouter un composant web ; 3 certains n’ont pas d’équivalents dans Expression
Web, il faudra donc trouver un moyen différent si l’on veut continuer à offrir la même fonction ;
3 certains permettent encore de modifier leur action. Pour cela, double-cliquer sur le composant tel qu’il apparaît en mode « Création » ou dans la partie « Création » du mode « Fractionné ». Cependant, n’oubliez pas qu’en laissant des composants actifs dans votre page, vous vous laissez un handicap puisqu’il vous faudra garder les extensions FrontPage Server sur le serveur, avec le risque que dans le futur, Microsoft ne supporte plus ces extensions et donc que les hébergeurs ne les proposent plus. Nous allons maintenant passer en revue tous les composants et sous-composants présents dans FrontPage, et découvrir ce qu’il advient de leurs fonctionnalités propres.
Fig. 2.3 Les différents composants web tels qu’ils apparaissent dans le panneau d’insertion sous FrontPage. Effets dynamiques
@ 27
Expression Web
Texte défilant (remplacé) Cet effet de texte pouvant défiler horizontalement dans la page est géré par la balise propriétaire <marquee>. <marquee >Exemple de Texte défilant
Propriétaire, ce qui veut donc dire que seul Internet Explorer est capable de l’interpréter, puisque non établi par le W3C. Cependant, si vous souhaitez cet effet, vous avez deux solutions viables :
3 créer
l’animation en Flash, quitte à placer le contenu du texte défilant dans un fichier externe texte ou XML, afin de pouvoir actualiser facilement le message ;
3 le faire en HTML avec une fonction JavaScript, qui fait ça très bien. (Je n’évoquerai pas la solution du Gif animé qui, sur ce type d’animation, se révélera catastrophique, et lourde.)
Bouton interactif (conservé) En fait, un bouton interactif est un bouton qui possède un effet roll-over, c’est-à-dire qui est capable de changer d’aspect au survol ou au clic par la souris. FrontPage offre un éventail de modèles de boutons. Une fois sélectionné le bouton de votre choix, il se charge de créer les déclinaisons du bouton pour le mode « over » ou « clic », qui seront utilisés pour donner cet effet roll-over. Expression Web a intégralement repris la fonction, toujours accompagnée de la bibliothèque de boutons. Remarque : l’effet de roll-over ne peut être obtenu, dans ce cas, qu’avec la complicité de code JavaScript embarqué dans la page. Cela ne pose aucun problème dans la majorité des cas, mais sachez que certains internautes désactivent la lecture du code JavaScript dans leur navigateur. Dans ce cas, votre bouton semblera très « endormi ». Il existe une méthode utilisant les CSS pour générer cet effet de roll-over, méthode qui ne présente pas l’inconvénient précité.
Fig. 2.4
@ 28
Appel du composant dans Expression Web
Chapitre 2. Convertir un site FrontPage
Fig. 2.5 Choix du bouton du composant
Recherche Web (disparu) Recherche de mots-clés dans les sites Il n’existe pas d’équivalence dans les fonctionnalités d’Expression Web car, outre le fait qu’Expression Web se doit de respecter les standards, les deux principales sociétés de moteurs de recherche (Google et Microsoft) offrent, gratuitement ou non, la possibilité d’intégrer dans son propre site, un accès direct à leur moteur de recherche. Voici les liens pour installer vous-même ces moteurs de recherche :
3 Live Search (Microsoft) : http://help.live.com/help.aspx?mkt=fr-FR&project=wl_webmasters
3 Google: http://www.google.com/coop/cse/ Recherche sur le texte intégral Sous Front Page, ce composant doit disposer en plus de Windows SharePoint Services. Sous Expression Web, on est dans le même cas que précédemment et c’est donc à vous d’installer un service de recherche.
@ 29
Expression Web
Feuilles de calculs et graphiques (disparu) Feuille de calcul Office – Graphique Office – Tableau croisé dynamique Office Ces trois déclinaisons de ce composant web font appel à un composant Microsoft Office. Hors, d’une part les composants Office ne sont pas considérés comme des objets en HTML et, d’autre part, Expression Web ne fait pas partie de la gamme de produits Office.
3 L’une des solutions les plus rapides et les plus fiables (mais non dynamique) pour faire afficher ce type de document par les navigateurs, en travaillant sous Expression Web, consiste à transformer ceux-ci en documents de type PDF. Ce format PDF, inventé par la compagnie Adobe, est devenu au fil du temps le format standard multi-plate-forme et multisystème d’exploitation, pour pouvoir lire et échanger des documents entre machines et systèmes différents. À ce titre, tous les navigateurs disposent d’un plug-in (l’équivalent d’un petit programme associé, pour effectuer une tâche précise), permettant de lire les documents PDF. Notez cependant, qu’il est de la responsabilité de chaque internaute, d’installer ou non ce plug-in dans son navigateur.
3 Par contre, si la fourniture de documents Office dans vos pages web est primordiale, je vous conseille alors de vous orienter vers les solutions Microsoft prévues à cet effet, telles que SharePoint Designer, SharePoint Server, et Windows SharePoint Services.
Compteur d’accès (disparu) Bien que n’étant plus proposé dans Expression Web, il vous sera toujours possible de modifier ces compteurs mais, par contre, désormais, aucun nouvel ajout de compteur n’est possible.
Fig. 2.6 Insertion dans FrontPage, du composant « Compteur d’accès »
@ 30
Chapitre 2. Convertir un site FrontPage
Cela dit, il faut savoir que ces compteurs de pages sont soumis à une grande imprécision et qu’il est nettement préférable de faire appel :
3 soit à son hébergeur qui, en règle générale, met à disposition de sa clientèle un ou des outils de statistiques de fréquentation du site, plus ou moins élaborés et détaillés ;
3 soit
auprès des moteurs de recherche, tels que Google qui, dans ses outils pour webmasters, peut vous proposer, gracieusement, un rapport hebdomadaire de plusieurs pages, de la fréquentation de votre site.
Galerie d’images (disparu) Comme pour le précédent composant web, il est possible, sous Expression Web, si le composant Galerie d’images est présent dans le site, de modifier celui-ci. Cependant, la lourdeur et la rigidité de son code, alliée au fait qu’il ne répond à aucun standard présent sur le Web, rende l’outil très difficile à manier. Diverses solutions existent pour remplacer avantageusement ce composant, en utilisant du PHP, Dot.Net, JavaScript ou Ajax. Il est également possible, et c’est souvent une très bonne solution, d’intégrer dans son code HTML, un objet Flash, avec alimentation dynamique des contenus par du code XML.
Contenu inclus Substitution (disparu)
Fig. 2.7 Les différentes possibilités de « Substitution »
Ce composant fait apparaître, de manière dynamique, l’auteur, une description, l’URL de la page et d’autres éléments propres à la page en cours. Aucun de ces sous-composants n’a d’équivalent dans Expression Web. Le fait est qu’ils n’ont pas non plus une utilité extraordinaire et ne sont pas d’un emploi très courant. Par ailleurs, il est toujours possible, dans la plupart des cas, de remplacer ces sous-composants par une programmation classique de type PHP ou ASP.NET.
Page (remplacé) Ce composant permet de recopier le code d’une autre page entière dans une page existante. Il ne fait pas appel aux extensions FrontPage Server.
@ 31
Expression Web
Cependant, si vous souhaitez réaliser la même chose sous Expression Web, il existe une fonctionnalité très pratique : « Ajout d’extrait de Code » qui permet, en mode Code, d’insérer une ou plusieurs lignes de code, que l’on aura sauvegardées précédemment. Pour inclure un nouvel extrait de code :
3 allez dans « Outils>Option de l’Editeur de Page>Extraits de Code » ; 3 puis choisissez « Ajouter » et insérez votre fragment de code. Pour rappeler ce code à l’endroit souhaité, il suffit juste, en mode « Code », de placer le curseur à l’endroit où l’on désire insérer le code, puis à faire : Ctrl + Entrée. Cela provoque l’ouverture d’une petite fenêtre vous permettant de choisir le code désiré.
Page basée sur la planification (supprimé) Ce composant est en quelque sorte une variante du précédent puisqu’il permet de déclencher l’apparition d’une page à un moment donné. Il n’existe pas dans Expression Web de fonction équivalente. Image basée sur la planification (supprimé) Ce composant est dans le même esprit que le précédent, en autorisant l’apparition d’une image à un moment donné. Il n’existe pas dans Expression Web de fonction équivalente. Bannière de page (supprimé) Attention, il ne s’agit pas de créer une bannière publicité, mais simplement :
3 soit de créer une image à partir d’un court texte au choix ; 3 soit de créer un contenu texte à partir de même texte court. Ce composant n’a aucun intérêt et vous pourrez aisément le remplacer dans Expression Web, soit en insérant votre texte entre des balises ou , soit en le composant sous forme d’image avec un logiciel de création graphique puis en l’insérant entre des balises ou en le plaçant sous forme d’image de fond dans une CSS.
Barre de liens (disparu) FrontPage propose trois sous-composants pour l’insertion de barres de liens.
Barre de liens personnalisés (disparu) Barre de liens « Précédent » et « Suivant » (disparu) Barre basée sur la structure de navigation (disparu) Les trois composants utilisent les extensions FrontPage Server, mais il est bien sûr toujours possible de les modifier. Néanmoins, leur modification devient difficile et surtout il ne vous sera plus possible d’ajouter de nouveaux liens, car vous ne disposez plus du mode « Navigation » sous Expression Web. Le mieux est donc de remplacer ces composants, par leur équivalence en CSS.
@ 32
Chapitre 2. Convertir un site FrontPage
Fig. 2.8 Les différentes barres de liens disponibles grâce aux composants web
Table des matières (disparu) Le composant Table des matières génère soit une carte du site, soit une liste des pages en fonction des critères assignés. Comme précédemment, s’il est possible de modifier ces Composants, en revanche, vous ne pourrez pas créer de nouvelles Table des Matières. Comme il n’y a aucune fonctionnalité dans Expression Web remplaçant ce composant, vous devrez le refaire de manière manuelle. Je ne peux d’ailleurs que vous encourager à faire une page « Plan du Site » car, outre le fait qu’elle permet au visiteur de pouvoir accéder directement à la page de son choix, cette page « Carte du Site » revêt une grande importance auprès des robots des moteurs de recherche, car ils y trouvent de nombreux paramètres dont ils sont friands et qui leur permettront ensuite de mieux référencer les sites.
Liste Top 10 (disparu) Que ce soit pour l’affichage :
3 des dix pages les plus visitées du site ; 3 des dix principaux domaines de référence ; 3 des dix URL de référence ; 3 des dix chaînes utilisées par les visiteurs dans les moteurs de recherche ; 3 des dix visiteurs qui ont le plus fréquenté le site ;
@ 33
Expression Web
3 des dix systèmes d’exploitation (!!!!) les plus populairement utilisés ; 3 ou enfin des dix navigateurs les plus couramment utilisés pour visualiser le site. Vous obtiendrez ces renseignements par les services de statistiques de votre hébergeur, ou par les services de Microsoft avec Live Search ou Google (Google Analytics) par exemple. Ce composant nécessitait les extensions FrontPage Server ou SharePoint Services.
Fig. 2.9 Les différentes possibilités du composant web « Top 10 » dans FrontPage
Affichage de liste (disparu) Le composant Affichage de liste nécessitait SharePoint Services.
Affichage Bibliothèque de documents (disparu) Ce composant nécessite l’enregistrement de la page sur un serveur web utilisant SharePoint Services de Microsoft.
Mappage MSN (disparu) Ce composant insère et gère une carte à l’emplacement que vous désirez dans votre page web. Il existe désormais des services dédiés à cette tâche et que vous pouvez mettre en œuvre au sein de votre page.
@ 34
Chapitre 2. Convertir un site FrontPage
Composants MSN (disparu) Les composants MSN insèrent un formulaire de recherche et/ou la cotation d’une action sur la page de votre choix. Avec l’avènement des fils RSS, il est assez facile, désormais, d’intégrer ce fil RSS au sein de votre page.
Composants MSNBC (disparu) Ce type de composant, les Web MSNBC, affiche des liens vers des portails d’informations et financiers gérés par MSNBC. Pour garder un contact permanent, utilisez un flux RSS.
Contrôles avancés L’option Contrôles avancés permet d’intégrer divers types d’objets comme des applets Java, des contrôles ActiveX, des animations de type Flash et d’autres objets.
Fig. 2.10 Les différentes possibilités du composant web « Top 10 » dans FrontPage
Insertion d’objets de type Flash (Adobe System) (code conservé) En réalité, même si sous FrontPage cet item est classé dans les composants web, il n’en n’est pas un. En effet, pour intégrer l’objet Flash, il fait appel à la balise , ce qui est la norme. Le code produit est donc tout à fait correct, et il n’est pas nécessaire de le modifier.
@ 35
Expression Web
Notez que seule la version 2 d’Expression Web possède un sous-menu d’insertion d’objets de type Flash (Insertion > Media > Animation Flash). Avec la version 1 d’Expression Web, vous devez faire cette insertion manuellement, en utilisant la balise comme dans l’exemple suivant : <param name="movie" value="anim-flash.swf"> <param name="quality" value="High"> <embed src="anim-flash" pluginspage="http://www.macromedia.com/go/getflashplayer " type="application/x-shockwave-flash" name="obj1" width="160" height="160">
Insertion de contrôle ActiveX (code conservé) Comme précédemment, ce composant utilise la balise . Autres contrôles avancés (supprimé) Les autres contrôles avancés (HTML, Applet Java, Plug-In, Champ de confirmation et Contrôles DTC) ne sont plus présents dans Expression Web.
@ 36
3
Prise en main OBJECTIF Si vous connaissez déjà FrontPage ou Dreamweaver, vous ne devriez pas être dépaysé par l’interface d’Expression Web. Si vous êtes novice, vous allez découvrir une interface claire, intuitive et permettant de démarrer une application très rapidement. Plutôt que de passer en revue, un par un, tous les menus et sous-menus du logiciel, nous allons nous contenter dans ce chapitre de découvrir les fonctions indispensables et basiques. Les autres fonctionnalités seront détaillées au moment de leur emploi dans les autres chapitres.
•••
Installation Expression Web fonctionne à la fois sur Mac et sur PC. Il est conseillé d’installer le framework .NET (environnement de développement de Microsoft) avant d’installer Expression Web, sauf dans le cas où vous seriez sous système d’exploitation Vista puisque, dans ce cas, il est déjà installé. Pour l’installer, suivez les recommandations fournies par Microsoft à l’adresse suivante : http://www.microsoft.com/downloads/details.aspx?familyid=0856eacb-4362-4b0d-8eddaab15c5e04f5&displaylang=fr Si vous souhaitez utiliser les fonctionnalités Microsoft Active Server Pages (AS) d’Expression Web, il faut installer Microsoft ASP.NET. Vous trouverez les instructions d’installation d’ASP.NET, à l’adresse suivante : http://support.microsoft.com/kb/928710/fr
@ 37
Expression Web
Système requis PC : configuration minimale
3 Systèmes
d’exploitation pris en charge : Windows Vista ; Windows XP Service
Pack 2.
3 Ordinateur équipé d’un processeur Pentium 700 ou supérieur en performance. 3 512 Mo de mémoire vive minimum. 3 1,5 Go d’espace de stockage disponible sur disque dur. Mac : configuration minimale
3 Systèmes d’exploitation pris en charge : Apple Mac OS X ; Macintosh. 3 Processeur Macintosh® PowerPC® ou Intel®. 3 Apple® Macintosh OS X (10.4 ou ultérieur). 3 Apple QuickTime® 7.1.5 ou ultérieur. 3 Écran défini à 16 millions de couleurs. 3 100 Mo d’espace disque libre pour l’installation. 3 512 Mo de mémoire vive (RAM) au minimum. Installation Microsoft fournit une version d’évaluation gratuite pour ceux qui souhaiteraient se faire une opinion sur le logiciel avant de l’acheter.
3 Version PC d’évaluation 60 jours : http://www.microsoft.com/downloads/details.aspx?FamilyID=15d30591-8ad0-42c992ee-8e657a86686f&displaylang=fr
3 Version Mac d’évaluation 60 jours : http://www.microsoft.com/downloads/details.aspx?FamilyID=80db5f02-bc08-4f1dbf89-41aaf598192b&displaylang=fr L’installation ne pose pas de problèmes particuliers. Il suffit juste de suivre les instructions qui apparaissent au fur et à mesure de l’avancement de l’installation. Une fois terminée, lancez Expression Web. Lors de son premier lancement, un panneau vous invite à déclarer Expression Web comme éditeur de pages Web par défaut. Acceptez l’invitation si vous le désirez, en sachant qu’il sera toujours possible de redéfinir cet état ultérieurement.
@ 38
Chapitre 3. Prise en main
•••
Choix d’un éditeur de site Comme nous le verrons en comparaissant les interfaces des principaux éditeurs graphiques du marché, Expression Web et Dreamweaver CS3, les fonctionnalités sont quasiment les mêmes entre les deux logiciels. (D’autres éditeurs, issus de l’open source, sont à citer également, comme le plus connu NVU issu de la sphère Mozilla (d’où provient le navigateur Firefox). Malheureusement, à l’heure actuelle, ce logiciel gratuit ne semble plus être supporté par l’équipe de Mozilla, lui préférant semble-t-il le logiciel Kompozer, qui est également un éditeur de sites. (Source : http://frenchmozilla.sourceforge.net/nvu/). Le choix de tel ou tel éditeur se fera donc plutôt en fonction :
3 de l’environnement de travail dans lequel on se situe : par exemple, si vous travaillez avec des développeurs en environnement .NET, il sera plus judicieux d’utiliser Expression Web car, vous bénéficierez alors de plateformes communes de développement. C’est même le principal avantage d’Expression Web, faciliter le partage du travail entre Webdesigner et développeurs .Net, tout en restant sur des projets communs. Il est ainsi possible, sans quitter Expression Web, d’utiliser des contrôles ASP.NET, d’accéder à des sources de données diverses (bases de données, XML…), des créer des pages maîtres.
3 de votre expérience : si vous avez toujours utilisé FrontPage, il est logique dans ce cas de s’orienter vers Expression Web qui en est la juste continuité, mais avec plus de fonctions, plus de passerelles avec les autres programmes et la certitude de produire du code valide, actuelle et qui répond aux standards du W3C.
3 de votre historique de travail ou de votre domaine d’activité : si vous travaillez historiquement avec les packs Adobe, parce que vous êtes infographiste, illustrateur ou maquettiste, vous avez dans ce cas, sans doute acheté un des packs Adobe : (Photoshop, Flash, Illustrator…) ; il est logique alors de poursuivre avec Dreamweaver CS3) surtout qu’il est souvent compris dans un des choix de packs proposés. Néanmoins, les habitudes changent et s’usent ; de nouvelles technologies apparaissent régulièrement, auquel il faut savoir s’adapter et répondre. Ainsi, Microsoft bouleverse le monde des web designers jusqu’alors capté par Adobe en grande partie : l’arrivée de SilverLight, venu concurrencer le plug-in Flash sur son terrain (à savoir, la vidéo et l’animation diffusées sur le Web), avec en appui, une offre logicielle importante et complète, la gamme Expression, risque de changer la donne. Ainsi, Expression Design apporte de nouvelles voies très intéressantes et vraiment performantes, en termes de création infographique à destination du Web.
3 des fonctionnalités annexes et de l’ergonomie du produit ; très proches entre Dreamweaver et Expression Web mais on peut cependant noter : • À l’actif de Dreamweaver, la possibilité de splitter la fenêtre de code, pour avoir
plusieurs fenêtres de code côte à côte (très pratique pour travailler sur un code
@ 39
Expression Web
HTML et CSS en même temps), la possibilité de visualiser directement les fichiers médias actifs, images, flash, etc.), sans aller dans un logiciel de présentation de médias ou un éditeur d’image, et ses modules pour produire des modules interactifs en Ajax dans sa dernière version CS3. • À celui d’Expression Web, une meilleure gestion des CSS (ergonomie des outils
de commandes CSS, fidélité de la visualisation du résultat), une gestion poussée des moyens de contrôle (rapport), les nombreuses passerelles existant entre lui et Visual Studio et l’environnement de développement .NET.
3 et bien sûr du prix de chaque produit, seul ou en pack : pack Expression pour Microsoft, pack Creative Suite pour Adobe.
•••
L’interface
Organisation générale L’interface d’Expression Web est organisée autour de la fenêtre centrale (1) qui va contenir le code HTML, CSS ou autre de la page web, avec éventuellement, dans une fenêtre inférieure, la visualisation censée apparaître dans les navigateurs.
Fig. 3.1 Organisation générale de l’interface d’Expression Web
@ 40
Chapitre 3. Prise en main
De part et d’autre de cette fenêtre centrale sont disposés divers panneaux de commande (2) primordiaux et dont on a constamment besoin. Encadrant verticalement l’ensemble, des rangées de boutons (3) permettant, comme dans le cas de la barre du haut, d’insérer des objets dans la page, des images par exemple, tandis que la rangée inférieure est destinée à gérer les propriétés stylistiques de ces éléments. Enfin, classiquement, vous allez retrouver en tête d’écran, l’ensemble des commandes regroupées en menus et sous-menus thématiques (4), avec à l’extrémité, « l’appel à l’aide ».
Personnaliser l’environnement de développement Panneaux « flottants » Tous les panneaux (2) peuvent être déplacés et/ou modifiés en taille.
3 Déplacement
– Mise en œuvre : pour effectuer un déplacement d’un panneau, cliquez sur le titre du panneau, le curseur doit changer d’aspect pour prendre l’allure d’une flèche à quatre branches, comme on le voit sur la figure 3.3. À partir de ce moment, cliquez et gardez enfoncé le bouton gauche de votre souris sur cet entête et déplacez l’ensemble à l’endroit souhaité. Une fois parvenu à destination, relâchez tout. Suivant votre position dans la page à ce moment-là, le panneau va soit venir s’emboîter entre des panneaux existants (figure 3.4), soit se placer sur les autres panneaux (figure 3.5).
Fig. 3.2 Panneau de base
@ 41
Expression Web
3 Modification
de la taille d’un panneau : vous avez sans doute remarqué que les panneaux peuvent comporter plusieurs onglets, mais on ne peut de toute façon voir qu’un seul onglet à la fois. Sachez cependant qu’il suffit, quand le panneau est emboîté dans un autre, soit de placer le pointeur de la souris sur la ligne de séparation entre deux panneaux, puis de cliquer et glisser la souris pour modifier immédiatement sa largeur, soit, si le panneau est totalement flottant, de placer le pointeur de la souris sur le coin en bas à droite par exemple du panneau, puis de tirer en largeur ou en hauteur pour modifier ses dimensions, comme le montre la figure 3.5.
Fig. 3.3 Panneau en déplacement
Fig. 3.4 Panneau imbriqué avec les autres panneaux
@ 42
Chapitre 3. Prise en main
Fig. 3.5 Panneau « flottant » : quand il est placé sur les autres panneaux
Barre de boutons Toutes les barres de boutons sont à l’image de ce qui se passe dans les autres produits Microsoft, comme Office 2007, c’est-à-dire qu’elles sont entièrement personnalisables. On peut, à son gré, ajouter ou supprimer des boutons. Il suffit juste de cliquer sur la petite flèche noire dirigée vers le bas et placée en bout de barre. Un menu contextuel vous invite alors à personnaliser votre barre de menus. Enfin, sachez que dans le menu « Volets des tâches », vous trouverez en bas de liste une commande vous permettant de rétablir la « disposition de l’espace de travail ». Construisez votre boite à outils personnelle Pour votre confort de travail, n’affichez pas toutes les barres de boutons disponibles. En effet, beaucoup de boutons sont présents en double, voire en triple, dans les barres de boutons. L’astuce consiste à construire votre propre barre. Pour cela : – partez d’une barre existante ; – cliquez à son extrémité sur la flèche ; – descendez sur le sous-menu « Ajouter/Supprimer des boutons » ; – puis sur l’autre sous-menu qui apparaît à sa droite et choisissez « Personnaliser » ; – une fenêtre « Personnalisation » va s’ouvrir. Ne vous en occupez pas ; – par contre, vous pouvez désormais, à votre guise, tant que cette fenêtre est ouverte, ajouter ou supprimer des boutons de n’importe quelle barre de menu ; – une fois que vous avez personnalisé vos barres, cliquez sur le bouton « Fermer » de la petite fenêtre qui s’est ouverte.
@ 43
Expression Web
Comparaison des interfaces des éditeurs de site Voici, figures 3.6 à 3.8, les interfaces d’Expression Web, Dreamweaver CS3 et FrontPage 2007. Comme vous pouvez le constater, il y a un air de famille entre les trois logiciels. Que ce soit le cas entre Expression Web et FrontPage, deux logiciels Microsoft, est compréhensible. Ce qui est plus surprenant, ce sont les similitudes d’interfaces existant entre Expression Web et Dreamweaver. Il existe bien sûr des différences, avec du reste une meilleure ergonomie de travail sur les CSS avec Expression Web, mais les interfaces sont quand même très proches. Premièrement, les deux logiciels ont choisi la même logique et la même organisation – avec quelques variantes – pour la présentation du code et des principales commandes : une fenêtre de code centrale avec, autour, des panneaux renfermant les principaux outils ; deuxièmement, les deux logiciels proposent les mêmes fonctions, ce qui somme toute est assez logique, leur but étant de produire, à partir de langages à la syntaxe bien établie, du code compréhensible par l’ensemble des navigateurs (du moins en théorie).
Fig. 3.6 Dreamweaver CS3 : son interface
@ 44
Chapitre 3. Prise en main
Fig. 3.7 FrontPage 2003 : son interface
Fig. 3.8 Expression Web : son interface
@ 45
Expression Web
Correspondance des numéros : 1 – Gestion du site 2 – Gestion des fichiers dans le répertoire défini du site 3 – Affichage du site sous deux formes : code et/ou visualisation censée être wysiwyg, telle qu’elle est censée apparaître indifféremment dans tous les navigateurs 4 – Choix du mode d’affichage de la page : •
code seul
•
affichage de la page en wysiwyg
•
panachage des deux modes précédents
5 – Insertion d’éléments 6 – Propriétés des éléments 7 – Accès direct aux balises 8 – Gestion CSS : les sélecteurs 9 – Gestion CSS : les propriétés et attributs 10 – Éléments de marquage du code 11 – Aide Comme vous pouvez le remarquer, les panneaux ou fonctions n° 8, 9 et 10 sont absents de l’interface de FrontPage. Je vous propose maintenant de nous pencher plus en détail sur ces divers éléments communs à tous des éditeurs, mais en nous intéressant plus particulièrement aux éléments présents dans l’interface d’Expression Web. Ces onze éléments représentent les outils et fonctions dont vous allez avoir le plus besoin.
Tour d’horizon des principales commandes 1 – Gestion du site Point de départ de la gestion des sites, ce panneau permet (grâce aux quatre pseudo-onglets présents en bas de la fenêtre) :
3 de visualiser et choisir les fichiers du site, en mode local, à éditer ;
@ 46
Chapitre 3. Prise en main
Fig. 3.9
Gestion des sites : visualisation fichiers et répertoires du site
3 de gérer le site en mode distant, soit distant sur le poste en local dans un autre répertoire, soit en mode serveur local, soit en mode serveur distant avec liaison FTP ;
Fig. 3.10
Gestion des sites en mode distant par FTP
3 cette fenêtre est également le lieu pour générer la « carte des liens » du site, c’est-àdire les relations existantes, grâce aux hyperliens, entre les divers fichiers du site. Dans cet exemple simple, le site est réduit à son minimum puisqu’il ne comporte qu’une page, cette page étant liée par hyperlien à la feuille de style « primo.css » comme on le voit très bien sur cette carte du site.
@ 47
Expression Web
Fig. 3.11 Carte des liens du site
3 enfin, dernière fonction disponible dans cette fenêtre, la production de nombreux rapports concernant le site et notamment des rapports très utiles sur la validité des hyperliens.
Fig. 3.12 Les nombreux rapports sur le site, constamment disponibles
@ 48
Chapitre 3. Prise en main
2 – Gestion des fichiers dans le répertoire défini du site
Fig. 3.13 Les fichiers présents dans le répertoire du site (en mode local ou distant)
En sélectionnant un ou plusieurs fichiers et en cliquant avec le bouton droit, vous aurez accès à de nombreuses opérations en relation avec ce ou ces fichiers.
3 et 4 – Gestion du mode d’affichage du site La fenêtre centrale comporte trois boutons à son pied, permettant de choisir le type d’affichage du site en mode de création.
3 Code seul. 3 Visualisation de la page (Wysiwyg), telle qu’elle devrait apparaître dans les navigateurs.
3 Mode panaché : code en haut et visualisation en bas. Notez qu’il est possible de travailler indépendamment dans l’un ou l’autre de ces modes. Choisissez celui avec lequel vous vous sentez le plus à l’aise.
Si au début, le mode création convient parfaitement aux débutants, en leur facilitant la tâche pour le positionnement des blocs par exemple, vous vous rendrez compte que vous passerez vite au mode code, car ce mode vous assure un meilleur contrôle. Par ailleurs, certains ajouts ou corrections ne peuvent être faits en mode création, comme l’écriture du code pour les feuilles de style par exemple ; mais nous verrons qu’il existe des moyens d’aide à la création, qui vous dispensent d’écrire du code. Maintenant, c’est une question de préférences personnelles et d’expérience.
5 et 6 – Insertion d’éléments et propriétés En plus de l’insertion d’éléments, les barres de menus placées en haut de l’écran permettent d’accéder à de nombreuses autres fonctions, également accessibles par les menus thémati-
@ 49
Expression Web
ques classiques placés au-dessus de ces rangées de boutons. Par ailleurs, le dessin des icônes vous semblera familier si vous êtes un utilisateur d’Office et de Word en particulier. N’oubliez pas que vous pouvez personnaliser ces barres de menus.
7 – Accès direct aux balises La figure 3.14 affiche le panel des possibilités offertes par ce panneau de commande. Il vous permet de sélectionner des éléments HTML (balises, objets, bloc Div), mais également les éléments de formulaire, pour les insérer dans la page. Autre élément important, c’est le tableau de bord pour initialiser les relations avec les contrôles de type ASP.NET, et également pour établir les connections avec des bases de données ou des fichiers externes de type XML.
Fig. 3.14
Les nombreux types d’objets ou contrôles directement accessibles par ce panneau
8 et 9 – Gestion des styles CSS Comme nous le verrons dans les chapitres suivants, Expression Web possède de nombreux panneaux de contrôle pour gérer les styles des pages : les CSS.
@ 50
Chapitre 3. Prise en main
Par ailleurs, il fait preuve de fonctionnalités intéressantes dans ce domaine en termes de gestion des CSS. Il est ainsi capable de mettre en avant les déclarations en doublons par exemple, ce qui se révèle très pratique à l’usage pour les sites importants qui nécessitent des centaines de ligne de code CSS.
10 – Éléments de marquage du code Ces éléments sont des outils que l’on utilise lors de la création du code afin de clarifier le code (comme des commentaires par exemple), des flags (drapeaux) que l’on peut positionner à divers endroits du code afin de pouvoir y revenir très rapidement. Un regret cependant, il n’y a pas de listes récapitulatives disponibles, qui permettraient de se déplacer encore plus rapidement dans le code. Il propose également des services visant à éviter ou retrouver des erreurs de code, comme par exemple afficher les couples de balises (ouvrantes et fermantes). À utiliser avec excès.
11 – Aide Expression Web vous propose plusieurs modalités pour obtenir de l’aide :
3 Aide générique classique obtenue par la touche F1 ou en entrant dans le champ de saisie un mot-clé en rapport avec sa recherche (numéro 11, figure 3.8).
3 Aide contextuelle, en rapport avec l’action en cours. Cette aide se manifeste sous forme de courts messages dans la partie gauche de la barre d’état. Comme le montre la figure 3.15, le logiciel a détecté que l’image a été sélectionnée et un message apparaît dans l’aide pour inviter à redimensionner l’image par ses poignées.
Fig. 3.15 Aide contextuelle
@ 51
Expression Web
3 Une aide très appréciable axée sur la recherche constante d’erreurs de code et les incompatibilités HTML. C’est vraiment l’un des points forts de ce logiciel, grâce notamment à la pertinence de cette aide à la recherche d’erreurs. La figure 3.16 l’illustre parfaitement :
Fig. 3.16 Aide sur la recherche d’erreurs
• une première alerte s’affiche en bas à droite, symbolisée par un triangle orangé
avec un point d’exclamation : il signale une grossière erreur de syntaxe dans le code, car la balise
, qui sert à créer un retour chariot, ne comporte pas d’anti-slash, ce qui est une erreur en XHTML ; • une seconde alerte, cette fois-ci symbolisée par un panneau sens interdit rouge,
pour signaler une erreur de compatibilité à l’accessibilité pour les handicapés. La règle prévoit que les éléments de type images, insérés dans leur balise ,
@ 52
Chapitre 3. Prise en main
doivent comporter un texte alternatif, apporté par la propriété Alt et permettant d’afficher ou d’autoriser une lecture à voix haute (pour les systèmes le permettant) lorsque la souris passe sur l’image. Ainsi, les non-voyants pourront aussi profiter des éléments de la page.
3 Autre volet des aides proposées : les nombreux rapports et états du site, des fichiers, des liens, etc. que peut diffuser Expression Web. On a souvent tendance à ne pas prêter attention à ce genre d’outils ; dommage, car cela évite de nombreux problèmes ultérieurs de fonctionnement. Tous ces rapports et états sont disponibles, en cliquant sur l’onglet du bas « Rapports » à condition d’être en mode « Site Web » (onglet du haut).
Fig. 3.17 Les rapports : une aide précieuse
Fig. 3.18 Autre aide importante : les états sur les fichiers
@ 53
Expression Web
Fig. 3.19 États sur les Modèles
Fig. 3.20 États sur les Problèmes
Fig. 3.21
États sur les Flux (FTP)
3 Pour finir sur le chapitre des aides qui, comme vous le remarquerez, sont nombreuses et efficaces, il faut citer une aide que l’on a plus l’occasion de rencontrer dans un logiciel de traitement de texte que dans un éditeur de code : l’aide à la correction orthographique. Sa mise en action et le réglage de ses paramètres se font par le menu : « Outils > Orthographe > Options du vérificateur orthographique ».
@ 54
Chapitre 3. Prise en main
•••
Démarrer son site
Organisation de l’espace disque Un site se compose de plusieurs pages, reliées entre elles par des hyperliens. Ces pages peuvent afficher, en plus de leurs contenus textes, divers éléments médias (images, animations, audio, vidéos). Par ailleurs, la page a souvent besoin, pour s’afficher correctement, de fichiers complémentaires, tels qu’un ou plusieurs fichiers CSS (qui permettent la mise en styles de la page), un ou plusieurs fichiers JavaScript (pour apporter de l’interactivité notamment). La liste des fichiers annexes peut être longue. Il est donc indispensable que ces fichiers soient regroupés dans un même répertoire sur le poste local. On parle alors de « racine du site » pour évoquer ce répertoire, car c’est le niveau 0. En théorie, aucun élément utilisé dans une page du site ne devrait se trouver en dehors de ce répertoire. Ensuite, au niveau de l’organisation à l’intérieur de ce répertoire racine, il y a plusieurs façons de procéder :
3 soit placer toutes les pages en racine, avec des sous-dossiers « images », « styles », et « scripts » pour l’ensemble du site ; chaque sous-dossier renfermant des éléments en rapport avec sa dénomination : des images au format jpg, gif… pour le dossier « images », des feuilles de styles CSS pour le dossier « styles » et, par exemple, un ou des fichiers JavaScript pour le dernier. Chaque page fait ensuite référence à ses éléments spécifiques, répartis dans ces répertoires, par des hyperliens. Avantage de cette méthodologie : on limite le nombre de sous-dossier, ce qui permet une plus grande clarté dans la gestion des éléments.
3 soit, comme le fait Microsoft avec ses modèles fournis, créer un sous-dossier par page, chaque sous-dossier pouvant ensuite comporter un ou plusieurs nouveaux sousdossiers par type d’éléments contenus dans la page. Astuce : Expression Web utilise des métadonnées pour permettre l’utilisation de modèles dynamiques et perpétuer la mise à jour de composants FrontPage dans des pages Expression Web. Ces métadonnées sont placées dans deux répertoires cachés, dans chaque dossier de site : « _vti_cnf » et « _vti_pvt ». Si vous ne les souhaitez pas, il est possible de demander à Expression Web de supprimer cette option. Pour cela, allez dans le menu « Sites > Paramètres du Site » puis dans l’onglet Général, et désélectionnez l’option « Gérez le site Web à l’aide des options de métadonnées masquées ».
Création du site Plutôt que de créer une page HTML seule, nous allons d’abord créer un site dans lequel nous placerons ensuite les pages. Pour cela :
@ 55
Expression Web
3 Cliquez sur Fichier > Nouveau > Site Web 3 Dans la boîte de dialogue qui apparaît, vous avez alors le choix entre : • créer un site vierge (« général ») ; • créer un site en partant de modèles (« modèles »).
3 Choisissez « général ». 3 Vous avez de nouveau le choix entre trois items : • « Site Web à une page » • « Assistant importation de sites web » : cette option vous permet de réimporter
dans un nouveau répertoire, les fichiers d’un site déjà existant sur votre poste ou même extérieur à votre poste comme le serveur d’un hébérgeur. • « Site web vide » : en faisant ce choix, vous devrez ensuite « créer une page
vide ».
3 Choisissez « Site web à une page ».
Fig. 3.22
Boîte de dialogue pour la création d’un nouveau site
3 Définissez ensuite le nom du site, dans la barre de saisie en bas de la fenêtre. Par défaut, si vous ne faites rien, Expression Web va d’une part placer votre site dans le dossier « Mes sites Web » et, d’autre part, le désigner sous le terme de « Web 1 ». Dans notre exemple, tel que vous pouvez le voir dans la figure 3.23, nous préférons le nommer « primo » mais tout en souhaitant le laisser dans le dossier « Mes Sites Web ». Pour cela, placez-vous à l’extrémité du texte saisi et corrigez le nom de site en « primo ».
3 Validez.
@ 56
Chapitre 3. Prise en main
3 Expression Web va alors créer le dossier « primo » au sein du dossier « Mes Sites Web » et va ensuite y placer la première page du site, qu’il nomme par défaut « default.htm » (il est possible d’utiliser l’extension HTM ou HTML au choix).
3 Dans la fenêtre centrale d’Expression Web, sous l’onglet « Site Web », vous devez avoir désormais un fichier « default.htm » qu’Expression Web vient de créer. Remarque : lorsque dans un site en ligne, un fichier a le préfixe « index » (ou « defaut », tout dépend du serveur), avec un suffixe de type : htm, html, php, aspx pour ne citer que les principaux, il est chargé automatiquement par le navigateur, sans qu’il soit nécessaire de le nommer. C’est pour cette raison que la page d’accueil des sites est toujours nommée « index ». Ainsi, dans le cas d’un site ayant comme nom de domaine « blueprocess.com », pour atteindre sa page d’accueil, il suffit de taper dans la barre d’adresse du navigateur : http://www.blueprocess.com. Cela équivaut à écrire : http://www.blueprocess.com/index.htm ou http://www.blueprocess.com/ default.htm.
3 Le
site étant appelé à contenir quelques images, créez dès maintenant un sousdossier « images » qui deviendra le lieu de stockage de ces images. Pour cela, dans la même fenêtre que précédemment, cliquez avec le bouton droit de la souris et choisissez dans le menu qui apparaît : « Nouveau > Dossier » ; nommez le dossier « images ».
Fig. 3.23
Le site « primo » tel qu’il apparaît dans l’Explorateur Windows
3 Pour vous familiariser avec la manipulation des fichiers sous Expression Web, nous allons renommer la page (le fichier) « default.com » en « index.htm ». Pour cela, placez vous dans le panneau « Liste des Dossiers », sélectionnez le fichier en cliquant une seule fois dessus pour le mettre en surbrillance, cliquez avec le bouton droit et choisissez « renommez ». Inscrivez le nouveau nom : « index.htm ».
3 Pour
finir, nous allons charger cette première page en double-cliquant sur « index.htm ».
@ 57
Expression Web
Propriétés Il existe plusieurs types de propriétés sous Expression Web :
3 les propriétés de fichier ; 3 les propriétés de page ; 3 les propriétés de site (général) ; 3 les propriétés du site distant. Propriétés de fichier Ces propriétés sont surtout utiles pour les projets nécessitant plusieurs participants, afin de pouvoir classifier les fichiers en fonction du projet. Pour les atteindre :
3 sélectionnez le fichier dans le panneau (aussi nommé volet de tâches) « Liste des Dossiers ». (S’il n’apparaît pas, allez dans « Volet de Tâches » et activez l’item « Liste des Dossiers ».) ;
3 puis « Fichiers > Propriétés » ou clic droit sur le fichier et « Propriétés ».
Fig. 3.24 Propriétés de fichier
Propriétés de pages Pour afficher les propriétés de page, il faut que la page ait été chargée en mémoire. Si ce n’est pas le cas, double-cliquez sur le fichier « index.htm », puis allez dans « Fichier > Propriétés ». (Vous noterez que c’est le même menu qui permet, indifféremment, d’aller sur les propriétés de fichier ou les propriétés de page, tout dépend si vous êtes en mode site ou en mode page).
@ 58
Chapitre 3. Prise en main
Les propriétés de page ont surtout trait aux styles, tel la couleur de fond de page, la couleur des liens, les marges… (On retrouve également quelques éléments des propriétés de fichier.) Pour notre premier site, nous allons dès à présent renseigner ces propriétés :
3 dans l’onglet « Général » du panneau propriété : • renseignez le titre de la page : « Accueil » ; • ajoutez ensuite une brève description du but de cette page (par exemple : « Page
d’accueil de Primo, qui sert d’exemple pour notre premier site ») ; • et insérez des mots-clés pour la caractériser (« exemple, site, accueil site »).
Ces trois renseignements prennent une part importante dans la procédure de référencement naturel. Pensez à toujours les renseigner.
3 dans l’onglet « Avancé » : une bonne habitude à prendre est de mettre dès le départ les marges des pages à zéro. Pour cela, pour chaque champ de marge, saisissez la valeur zéro (figure 3.25) ;
Fig. 3.25 Initialisation des marges à 0 dans les propriétés de page
3 dans l’onglet « Langue » : • renseignez la langue des contenus du site, par défaut le français : « Fran-
çais(France) » ; • le codage HTML : par défaut, Expression Web stipule l’encodage unicode UTF-
8. (Voir encadré dans le paragraphe sur les Propriétés du site.) Dans le listing ci-dessous, nous retrouvons les renseignements que nous venons d’inscrire dans les propriétés de page. Certains sont les attributs de HTML comme le titre encadré par la balise <TITLE>, ou les mots-clés dans la balise <META.KEYWORDS> ; d’autres, par contre, sont les attributs de sélecteurs CSS, comme les marges pour la propriété margin.
@ 59
Expression Web
Voici le code que vous devriez désormais voir apparaître à l’écran si vous avez renseigné les propriétés de page : <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="fr" /> <style type="text/css"> body { margin: 0; } Accueil <meta name="keywords" content="exemple, site, accueil site" /> <meta name="description" content="Page d'accueil de Primo, qui sert d'exemple pour notre premier site " />
Propriétés de site (paramètres du site) Les propriétés et les paramètres du site sont réunis dans le même panneau : « Site > Paramètres du Site ».
3 Général.
Hormis le titre du site et son emplacement sur le poste en local, on retrouve l’option déjà évoquée, à savoir l’utilisation de métadonnées par Expression Web (facultatif). La partie inférieure du panneau ne sera disponible que dans le cas où cette gestion par métadonnées a été précédemment validée.
Fig. 3.26
@ 60
Paramètres du site
Chapitre 3. Prise en main
3 Aperçu. Très utile dans le cas de développement de sites dynamiques, puisque c’est dans cet onglet que l’on va définir l’utilisation ou non du serveur de développement Microsoft.
3 Options Avancées. Utile pour nettoyer le dossier de fichiers temporaires. 3 Langue. Permet surtout de définir l’encodage du site. Très important. Ainsi, par exemple, l’emploi des caractères spéciaux tels que le signe de l’euro (€) ou les lettres accentuées (é, à, è, etc.) sont fonction de l’encodage. La restitution correcte de ces caractères par les navigateurs est liée à l’encodage que vous allez décider. L’encodage UTF-8 est défini par défaut par Expression Web.
3 Base
de Données. Permet d’activer l’assistant d’accès aux bases de données en renseignant les paramètres de connexions.
Encodage des caractères : UTF-8 ou iso-8859-1 (ou iso-8859-15) Il existe de nombreux types d’encodage, mais nous n'en retiendrons que trois : – l'ISO-8859-1 (ou latin1), qui correspond à presque tous nos caractères français ; – l'ISO-8859-15 (ou latin9) qui, en théorie, contient en plus le symbole (bien que paradoxalement, le 8859-1 le possède aussi !) et le symbole e dans l'o ; – l'UTF-8, qui autorise, en théorie, l'encodage de toutes les langues, y compris le japonais et l'arabe. Lequel utiliser ? UTF-8 ? Oui, puisque l'UTF-8 gère toutes les langues. Dans ce cas, vous devrez : – le préciser dans l'entête de votre page HTML suivant cette syntaxe : <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ;
– ne pas oublier d'encoder vos fichiers externes de type Texte par exemple, comme c'est le cas dans notre site, en UTF-8. Les fichiers XML sont de base encodés en UTF-8. Tous les éditeurs de texte ne permettent pas forcément l'encodage que l'on souhaite. Par contre, des éditeurs comme Notepad2 ou PSPad le permettent. ISO-8859-15 ou ISO-8859-1 ? Conseillé puisqu'on est en France. Les deux (15 ou 1) conviennent et vous assureront de pouvoir bénéficier des caractères accentués et des caractères spéciaux. Notez qu'en général le navigateur détectera l'encodage automatiquement. Si vous avez néanmoins des caractères bizarres qui s'affichent, sachez qu'il est possible, dans tous les navigateurs modernes, de choisir son encodage. Par défaut, votre éditeur devrait encoder votre fichier texte en UTF-8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Par contre, Expression Web ne propose pas l’iso8959-1 dans les paramètres du site. Mais, si vous souhaitez l’utiliser, aucun problème, le site sera valide. Il suffit juste que vous le précisiez dans l'entête de votre page HTML suivant cette syntaxe : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1/> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1/>
@ 61
Expression Web
Propriétés du site distant Pour atteindre les propriétés du site distant, placez-vous dans l’onglet de la fenêtre centrale « Site Web » ou passez par le menu « Site > Site Web distant ». L’accès aux propriétés se fait en cliquant sur le lien placé en haut à droite de la fenêtre.
Fig. 3.27
Propriétés du site distant
3 Site Web distant. Permet de paramétrer le FTP. Le FTP est le nom d’un protocole qui permet d’effectuer de manière rapide les transferts de fichiers entre site local et serveur distant (chez l’hébergeur notamment). Pour connaître les paramètres de connexion, contactez votre hébergeur.
3 Optimiser le code HTML. Permet de « nettoyer » le code en supprimant les espaces en trop, et les commentaires. Ce nettoyage aura lieu au moment du transfert FTP. Cependant, pensez dans ce cas, à garder une version de sauvegarde avec les commentaires, pour pouvoir en cas de reprise ultérieure de développement, bénéficier de ces commentaire.
3 Publication. La publication désigne le fait de transférer ses fichiers du site local vers le site placé chez l’hébergeur, sur le serveur. La publication peut-être en partie automatisée.
@ 62
4
Codes et conduites de sites OBJECTIF Maintenant que vous avez créé la première page de votre site, paramétré ses propriétés et découvert l’organisation générale d’Expression Web, il est temps d’insérer du contenu dans cette page. Pour cela, nous verrons comment ajouter grâce aux codes HTML et XHTML, du contenu textes et images. Nous aborderons également les conduites à tenir pour d’une part, produire un code « propre », qui respecte les standards et, d’autre part mettre en forme de manière intelligente ces contenus.
•••
Faut-il être programmeur pour faire un site ? Faut-il être un pilote de course pour pouvoir conduire une voiture ? Réponse : non. Pour la création de site, c’est identique. Un éditeur de site comme Expression Web vous permet de créer des sites sans connaître la programmation, ni taper une ligne de code. Seulement, d’une part c’est mieux de comprendre ce que l’on fait et, dans le domaine des sites, tout se passe côté code et, d’autre part, c’est valable uniquement pour des sites simples et statiques. C’est pourquoi il est nécessaire de faire connaissance, un tant soit peu, avec le code HTML et ses congénères.
@ 63
Expression Web
Un peu d’histoire pour mieux comprendre le HTML et le XHTML Inventé en 1989, le HTML1 est un langage simple, de type descriptif, et utilisant des « balises » pour placer des éléments dans un document, avec une idée maîtresse : pouvoir relier ces documents par des liens. À la différence d’autres langages, ce n’est pas un langage compilé mais un langage interprété par les navigateurs type Internet Explorer, Firefox, Opéra, Safari pour ne citer que les principaux. C’est d’ailleurs pour cela qu’un simple éditeur de texte, type Notepad ou BlocNote, suffit pour lire du code HTML. L’avantage de disposer d’un éditeur comme Expression Web est de pouvoir visualiser le résultat des lignes de code HTML en temps réel. Le HTML possède une syntaxe développée par le W3C et, même s’il a surtout évolué durant ses dix premières années, il n’en continue pas moins de progresser – puisque l’on en est au HTML version 5 – à la demande des professionnels, web designers et programmeurs en tête. Toute sa syntaxe est en langue anglaise, mais ce sont des termes techniques simples et sans véritablement de faux amis. Pour lui permettre de continuer sa croissance, l’HTML4 s’est transformé en XHTML2, issu du XML3. La syntaxe du XHTML est simplement plus précise et plus rigoureuse que celle du HTML, mais n’ayez crainte : si vous connaissez le HTML, vous passerez sans soucis au XHTML. Notez cependant qu’Expression Web déclare par défaut les pages que vous créez en XHTML grâce à la déclaration de DOCTYPE, placée en tout début de page et obligatoire pour que les navigateurs sachent quel est le type de document qu’ils sont en train de charger. Si au départ, ce langage HTML suffisait à faire le bonheur des chercheurs et des universitaires, il a vite révélé ses limites concernant la possibilité de manipuler du contenu autre que du texte, son peu de goût pour la mise en style et ses possibilités inexistantes d’interactivité. Sont alors apparus d’autres langages capables de prendre en charge ces autres aspects des sites web tels que le code CSS 4 et le JavaScript. En même temps, de petits programmes appelés plug-in ont été couplés aux navigateurs web, leur permettant de lire de nouveaux formats : le meilleur exemple est le plug-in Flash d’Adobe qui permet aux navigateurs de lire les animations et vidéos Flash, ou le dernier né, édité par Microsoft et qui se nomme SilverLight.
1. HTML (HyperText Markup Language) : langage de balisage hypertexte 2. XHTML (eXtensible HyperText Markup Language) : langage de balisage hypertexte extensible 3. XML (eXtensible Markup Language) : langage de balisage extensible 4. CSS (Cascade Style Sheet) : feuille de styles en cascade
@ 64
Chapitre 4. Codes et conduites de sites
•••
Les balises La balise est la base du langage HTML : tous les éléments présents dans une page web sont introduits par une balise. Ainsi, un titre de page sera introduit par une balise TITLE, une image par une balise IMG, un titre de paragraphe par une balise H1, un paragraphe par une balise P et une liste à puces par une balise UL. Utilisons le site que nous venons de créer dans le site précédent, pour vérifier cela. Dans Expression Web, vous devriez avoir ceci :
Fig. 4.1 Le page index.htm du nouveau site « Primo »
Comme vous le voyez, malgré le code présent dans la fenêtre supérieure, il n’y a rien de visible dans la partie basse. C’est normal, puisque pour l’instant nous n’avons inscrit que des propriétés. Astuce : si dans votre fenêtre de code, vos mots ne reviennent pas à la ligne, il faut modifier les paramètres d’Expression Web. Pour cela, allez dans « Outils > Options de l’Editeur de pages » puis sélectionnez l’onglet « Général ». En bas du panneau qui s’affiche, dans la partie « Options d’affichage de code », activez l’option « Retour automatique à la ligne ».
@ 65
Expression Web
Fig. 4.2 Modification des paramètres d’Expression Web pour le retour à la ligne
Syntaxe d’une balise
3 Une balise se présente toujours sous la forme suivante : chevron ouvrant| nom de la balise| chevron fermant soit : .
3 Une balise, sauf exceptions rares, encadre toujours un ou des éléments. Donc, une balise est composée en réalité d’une paire de balises, avec : • une première balise, dite balise ouvrante, placée au début des éléments qu’elle
encadre telle que : ; • une seconde balise, dite balise fermante, qui se situe à la fin des éléments encadrés
tels que : . La différence avec la balise ouvrante est la présence d’un SLASH devant le nom de balise.
3 Une balise peut-être écrite en minuscules ou en majuscules, mais préférez les minuscules.
3 Entre les deux crochets, < et > , la balise peut contenir des propriétés, qui viennent compléter son action comme dans :
@ 66
Chapitre 4. Codes et conduites de sites
3 Une
balise peut contenir un nombre infini d’autres balises, du moment qu’elles s’imbriquent et qu’elles ne se chevauchent pas. C’est ce que l’on appelle « phénomène d’imbrication ». En d’autres termes, ce 1er exemple est autorisé, la balise DIV contenant la balise P :
3 Par contre, ce second exemple est interdit car il y a chevauchement des balises et non imbrication :
3 Pour faciliter la lecture du code et voir du premier coup d’œil comment est réalisée l’imbrication des balises, il est préférable de décaler son code, à l’aide de tabulation. Le principe consistant à décaler vers l’intérieur, d’une unité de tabulation, tout élément contenu dans une balise et ainsi de suite. On obtient alors un code dit en « escalier ». Je vous engage vivement à suivre cette pratique car cela vous fera gagner beaucoup de temps, je vous l’assure, surtout quand une erreur se présente. Au sujet des tutoriels Vous remarquerez au fil des exercices que, souvent, le nom du fichier de la page servant de tutoriel est « index.htm ». Pourquoi ? – comme nous l’avons déjà vu, lorsque sur un serveur de site un fichier se nomme « index.xxx », il est chargé par défaut. Exemple : si je nomme « index.htm » la page d’accueil de mon site, dont le nom de domaine est « primotuto », il suffira alors de taper le nom de domaine dans la barre d’adresse du navigateur, soit « http://www.primotuto.com », pour que la page d’accueil s’affiche ; – bien qu’il s’agisse d’exercices, autant se mettre dans les conditions du réel : lorsqu’on réalise un site, on démarre tout de suite avec les noms de fichiers définitifs, car ce sont ces noms qui servent de cibles aux liens qui relient les pages entre elles ; – par contre, il est important de mettre en place dès le début des règles de gestion des pages. Pour cela, deux éléments principaux sont à votre disposition : • La balise <TITLE> : tant que le site n’est pas en ligne, vous pouvez ici inscrire un texte qui s’affichera tout en haut du navigateur, dans sa barre supérieure. Une fois en ligne, par contre, pensez à bien renseigner ces balises, car leur contenu est fort apprécié des moteurs de recherche pour le référencement. Rappelons que cette balise sert à renseigner sur le thème de la page. J’ai moi-même mis cette recommandation en pratique et vous trouverez, au sein des balises <TITLE>, les références (numéro) du tutoriel en cours.
@ 67
Expression Web
• Les commentaires : un bon code est un code bien présenté (tabulé avec ses retraits) et commenté. Il faut user et abuser des commentaires : tout d’abord parce qu’Expression Web possède une fonction automatique permettant de supprimer ces commentaires sur le site en ligne, au moment de sa publication (fenêtre « Site Web distant », option « Optimisez le site…), au cas où vous auriez peur que vos commentaires alourdissent votre code et, ensuite, pour vous apporter (ainsi qu’à vos collègues travaillant également sur le code) un peu d’éclaircissements sur des parties de code que vous aurez pondu et qui dans 6 mois risquent de vous sembler bien obscures sans explications. Dans notre cas d’application, nous allons les utiliser pour indiquer également les références du tutoriel, mais de manière un peu plus étendue. La syntaxe HTML pour déclarer un commentaire n’est pas facile à retenir, ni à taper : – début du commentaire : Exemple de commentaire : <style type="text/css"> body { margin: 0; }
@ 82
Chapitre 4. Codes et conduites de sites
.style1 { color: #FF0000; font-size: xx-large; }
Bienvenue sur la page d'accueil du site Primo
<em>Première phrase en italique
<strong>Seconde phrase en mode gras et ce mot en <span >rouge
3 Remarquez qu’Expression Web n’a pas ajouté de classe mais a continué avec celle précédemment créée : « style1 ».
3 Ainsi, vous noterez que dans la déclaration de cette classe « style1 », déclaration présente dans l’entête de la page (comprise entre les balises et ), il y a une propriété supplémentaire avec « font-size : xx-large ».
3 Ainsi, nous savons désormais qu’une classe peut contenir plusieurs propriétés. 3 Sauvez le fichier. Nous verrons également dans le chapitre consacré au CSS que pour indiquer la taille des titres, sous-titres ou chapeaux, il existe des balises HTML prévues et dédiées à cet effet, les balises H1 à H6, H1 étant la taille la plus grande. Elles offrent de nombreux avantages qu’il est conseillé de mettre à profit, notamment en matière de référencement.
Choisir la police
3 Pour terminer ce tour d’horizon des principales possibilités de mise en forme sur un texte, intéressons-nous à la police de caractère employée. Dans ce domaine, la mise en page HTML est le parent pauvre des design graphiques. En effet, à moins d’utiliser une image ou une technologie Flash ou SilverLight, les possibilités dans ce domaine sont très restreintes.
Les polices disponibles Ne peuvent être employées sur une page web que les polices de caractères supposées être disponibles sur le poste client, c’est-à-dire sur le poste de l’internaute qui visite le site. C’est logique puisque c’est le navigateur du client qui déchiffre le code et affiche la page. Il utilise donc les polices qu’il a à sa disposition sur son système. La création d’une police est une activité de designer qui nécessite du temps, d’où un prix de vente élevé en général pour ces packs de fontes. Les polices sont, comme les illustrations, vidéos ou photos, protégées par des copyrights. Heureusement, tous les systèmes d’exploita-
@ 83
Expression Web
tion sont livrés avec des polices de base telles que l’Arial, le Times ou la Verdana. Malheureusement, leur nombre est restreint. Bien sûr, on pourrait imaginer que les polices soient embarquées dans les pages, et cela viendra peut-être, mais cela pose d’autres problèmes, tel celui du droit de disposer de ces polices et de les diffuser et, celui moins sensible depuis la quasi-généralisation du haut débit en France, du poids des fichiers de polices à charger en sus de la page.
Autres solutions indépendantes des polices systèmes D’autres solutions existent, telles que :
3 Transformer le texte en image, mais les inconvénients sont nombreux : • applicable que pour des mots isolés (bouton, titre…) ; • difficulté pour les mises à jour ; • doublons d’images pour les sites multilangues ; • ralentissement dans l’affichage occasionné par le chargement en mémoire des
images ; • non prise en compte du « texte-imagé » dans le référencement.
3 Créer ces textes sous Flash ou Expression Design pour ensuite les intégrer dans la page et les lire grâce aux plug-in Flash ou SilverLight. A priori, peu d’inconvénients, si ce n’est au niveau du référencement : • il est désormais certains que Google sait référencer les sites en Flash, mais uni-
quement sur les mots-clés des contenus textes placés en mode statique dans les fichier Flash SWF, pas encore sur les contenus de textes dynamiques ; • concernant SilverLight, il semblerait que Google puisse les référencer, mais il
vaut mieux rester prudent, notamment au sujet du XAML. Par contre, si à cause du domaine ou de la cible de visiteurs prévus sur votre site, ou encore si votre désir ou celui du client est de privilégier le design, dans ce cas, c’est tout à fait concevable. Et puis, rien ne vous oblige à faire un site tout en Flash par exemple (bien que de toute façon, l’objet Flash représentant la page du site sera bien encapsulé dans une page HTML). Il peut être panaché, avec une partie en Flash et une autre en HTML. Tout est possible. Dans le cas d’un site ou de boutons en Flash, vous êtes entièrement libre en ce qui concerne le choix de la police. Si c’est pour du texte de type statique, la police sera transformée en tracé vectoriel au moment de la transformation du Flash en SWF et, s’il s’agit de textes dynamiques, alors il vous faut embarquer dans le Flash les caractères susceptibles d’être rencontrés dans les contenus textes, dans la police choisie.
@ 84
Chapitre 4. Codes et conduites de sites
Catalogue de polices disponibles par le système Pour en revenir au HTML et XHTML, nous disposons donc, sur système Windows, d’une dizaine de polices pour afficher les contenus textes : Arial, Helvetica, Sans-serif, Times, New Roman, Times, Serif, Courier New, Courier, Monospace, Verdana. Pour indiquer que l’on veut un texte en Monospace par exemple, il suffirait donc d’indiquer comme propriété dans la classe « Style1 » : font-family: Monospace;
Seulement, du fait que toutes les polices citées précédemment ne sont pas de façon sûre et certaine sur le poste client, il a été décidé de proposer non pas une, mais plusieurs polices regroupées en famille : pour chaque famille, si la première police indiquée n’est pas trouvée sur le poste client, alors le navigateur va tenter de charger la seconde police dans la même famille et ainsi de suite.
Les familles de polices Voici les familles de polices généralement déclarées et à disposition des web designers pour la mise en forme des contenus textes :
3 Famille 1 : Arial, Helvetica, Sans-serif. 3 Famille 2 : Times New Roman, Times, Serif. 3 Famille 3 : Courier New, Courier, Monospace. 3 Famille 4 : Verdana, Helvetica-Normal, Arial. Du choix judicieux des polices La typographie (la science et l’art liés aux polices de caractères) existe depuis très longtemps (XVe siècle) car elle est liée à l’invention de l’imprimerie. Puis est apparue l’art de la maquette, cet art graphique d’agencement des textes et images sur un document, qu’il soit papier ou écran. Le but de la maquette et de la typographie étant de mettre en valeur un document, en facilitant sa lecture, en ajoutant un style décoratif, qu’il soit neutre ou pas. Le webdesign n’échappe pas à la règle et tout bon web designer se doit d’appliquer les règles séculaires de la maquette et de la typographie. Bien entendu, il existe quelques variantes pour le webdesign, dues au fait que la lisibilité est en général moins bonne sur écran que sur papier. En typographie, il existe de nombreuses familles de polices, en fonction de leurs caractéristiques communes. Il existe plusieurs types de classification des polices, mais aucune qui ne me satisfait réellement, si l’on souhaite faire le lien entre le caractère thématique du contenu texte et la police à utiliser. Vous n’êtes pas sans avoir remarqué qu’il existe des polices, comme on peut le voir sur la figure ci-dessous, qui ont un pied « décoré » et d’autres non. En outre, certaines polices ont un aspect se rapprochant de l’écriture manuscrite, tandis que certaines, de part leur dessin excentrique sont destinées à la décoration.
@ 85
Expression Web
En webdesign, hormis pour les titres, tous les textes utilisent soit une police à empâtement, soit une police sans empâtement. Les deux autres catégories n’apportent pas assez de lisibilité. Ensuite, l’une des règles de maquettisme traditionnel stipule, toujours pour des raisons de lisibilité, qu’il est préférable d’user de polices sans empâtement (Arial ou Verdana par exemple) pour les textes techniques, les présentations, les énumérations et les contenus de tableaux. Les polices à empâtement (Times), qui donnent un aspect plus soigné, sont plutôt réservées aux courriers ou aux textes que l’on veut marquer de solennité. C’est pour cette raison que la majorité des contenus textes dans les sites web utilisent des polices sans empâtement. Certains typographes ont même trouvé que les polices sans empâtement manquaient encore de lisibilité. Il est vrai que la lecture à l’écran sera toujours plus difficile que sur papier. Ils ont donc créé la police Verdana, spécialement pour la lecture à l’écran.
Tutoriel 4.6 – Choisir la police
3 Double-cliquez sur le mot « rouge » pour le mettre en surbrillance. 3 Dans la barre d’outil, cliquez dans le champ où s’inscrivent les termes « (Police par défaut) ».
Fig. 4.15 Charger la famille de police
@ 86
Chapitre 4. Codes et conduites de sites
3 Choisissez comme le montre la figure 4.17, la famille Verdana, Helvetica. 3 Cliquez dans la fenêtre Création pour voir le résultat. 3 Sauvegardez. Au niveau du code produit par Expression Web : .style1 { color: #FF0000; font-size: xx-large; font-family: Verdana, Helvetica-Normal, Arial; }
Vous remarquerez que, comme précédemment, Expression Web n’a pas fait de nouvelle classe, mais s’est contenté d’ajouter la propriété font-family dans le contenu de la classe « style1 », ce qui évite de surcharger inutilement le code.
•••
Organiser les textes
Les paragraphes Bolo Bolo : mais qu’est-ce ? Qui dit paragraphes dit plusieurs lignes de texte. Pour nos tutoriels et comme cela se pratique quotidiennement dans les Webagencies, les web designers utilisent du texte de remplissage en faux latin pour simuler les contenus textes qui rempliront les colonnes des sites. Ce pseudo-contenu est appelé dans notre jargon, du Loren Ipsum ou plus joliment, du Bolobolo. Ce texte reproduit l’aspect graphique d’un vrai texte au niveau de ses espaces inter-mots ou inter-lettres, et des interlignages, ce qui est indispensable pour pouvoir faire un webdesign harmonieux. Cela a aussi le mérite de mieux fixer les espaces nécessaires pour les contenus. Vous trouvez dans les fichiers en téléchargement, un fichier texte nommé LorenIpum.txt. Vous pouvez aussi aller visiter le site http://www.lipsum.com/ qui propose tous les jours de la semaine, un arrivage frais de Loren Ipsum, tout juste pêché du matin, en provenance direct des champs de lettres (certifié sans LGM).
Plusieurs balises permettent de créer un paragraphe dans une page HTML. Les principales et les plus courantes sont les suivantes :
3 Balise
. Cette balise est le conteneur par excellence. Elle est notamment utilisée dès que l’on veut contenir un élément pour le placer, le structurer ou modifier son style. C’est la balise par défaut des CSS2. Qui peut le plus, peut le moins : elle peut donc servir de balise pour contenir du texte.
@ 87
Expression Web
3 Balise
. C’est la balise reine pour déclarer un paragraphe. Comme toutes les balises de paragraphes, elle est de type dit « structurant », avec pour résultat immédiat un saut à la ligne entre chaque appel à cette balise.
3 Balise . Réservée aux textes et surtout à ceux que l’on veut mettre en retrait.
3 Balises à . Réservez les balises H1 à H3 pour les titres et sous-titres, et H4 à H6 pour les paragraphes.
Tutoriel 4.7 – Les paragraphes
3 Continuons avec le même fichier. 3 Tout d’abord, vous allez charger, dans Expression Web, le fichier de faux latin, notre bolo bolo. Expression Web est un éditeur, donc il peut ouvrir toute sorte de fichier, et notamment du fichier texte.
3 Sélectionnez à la souris une petite partie de texte et appuyez simultanément sur Ctrl + C (pour copier ce texte en mémoire). Vous pouvez aussi aller dans le menu Edition et cliquer sur Copier.
3 Revenez dans votre fichier Index.htm. 3 Dans la fenêtre code, placez votre curseur derrière la
balise
fermante de la dernière ligne et faites « Entrée ». Cela devrait positionner votre curseur sur une nouvelle ligne de code.
3 Vous allez commencer par taper le signe « < » puis « div ». Remarquez comme le système Intellisense vous propose au fur et à mesure les balises correspondantes aux premiers signes déjà tapés. Arrivé à la lettre v de div, ne faites pas « Entrée » mais tapez le signe « > » pour signifier à Expression Web que vous ne rentrerez pas d’attributs et que vous allez mettre un contenu dans la balise. Dès que vous aurez tapé le « > », Expression Web va créer pour vous la balise fermante , ce qui vous évitera de l’oublier.
3 Faiîtes alors Ctrl + V pour coller le contenu précédemment copié. 3 Cliquez dans la partie Création pour voir le résultat ou appuyez sur F12 après avoir préalablement sauvegardé la page pour l’afficher dans le navigateur.
3 Continuez de même avec les autres balises. 3 Placez votre curseur derrière la dernière balise fermante à chaque fois (mais avant et rentrez les balises suivies de leur contenu. Voici le code de la partie , la partie n’ayant pas subi de modifications :
Bienvenue sur la page d'accueil du site Primo
<em>Première phrase en italique
@ 88
Chapitre 4. Codes et conduites de sites
<strong>Seconde phrase en mode gras et ce mot en <span >rouge
Lorem ipsum dolor sit amet, consectetuer adipiscing elit./.../lacus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. /.../lacus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. P/.../, lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit./.../lacus
Fig. 4.16 Les paragraphes
La justification Il existe quatre sortes de justification d’un texte dans un paragraphe :
3 Aligné à gauche (ou fer à gauche). 3 Aligné à droite (ou fer à droite). 3 Centré. 3 Justifié. Sur vos différents paragraphes, entraînez-vous à modifier la justification du texte. Pour cela, sélectionnez un paragraphe entier et cliquez sur l’icône de justification de votre choix. Si le paragraphe n’avait encore aucun style d’appliqué, alors Expression Web va créer une nouvelle classe, pour pouvoir insérer dans la déclaration de cette nouvelle classe une propriété de justification. Attention : il n’y a pas d’icône de justification dans la barre d’outils « Eléments communs ». Par contre, elle est présente dans la barre : « Mise en Forme ».
@ 89
Expression Web
Fig. 4.17 Les icônes de justification dans la barre d’outils « Mise en Forme »
Les listes à puces Les listes à puces, hormis le fait qu’elles sont très pratiques pour, comme leur nom l’indique, afficher des énumérations, sont couramment employées pour créer les menus des pages web avec l’aide des CSS. Et cela aussi bien pour mettre en place des menus verticaux ou qu’horizontaux. Que ce soit pour une énumération ou pour une barre de menus, Toutes les listes à puces possèdent la même structure, que ce soit pour une énumération dans un paragraphe, que pour un menu:
3 une balise
pour délimiter la liste à puces ; 3 des balises
…. pour placer chaque item de la liste. Tutoriel 4.8 – Les listes à puces
3 Positionnez
votre curseur dans la fenêtre de création, derrière la dernière balise fermante, et tapez Entrée pour créer un nouveau paragraphe.
3 Tapez « page une », sélectionnez les deux mots et cliquez dans la barre d’outils Mise en Forme sur l’icône représentant la liste à puces (à droite de la liste à numéros).
3 Expression Web va alors créer automatiquement la balise UL (ouvrante et fermante) mais également la balise LI (ouvrante et fermante) pour ce premier item.
3 Continuez de même avec pages deux, trois et quatre. 3 Sauvegardez.
@ 90
Chapitre 4. Codes et conduites de sites
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin ac est. Nulla libero. Donec nec metus. Nunc porta, metus vel commodo porta, lacus
- page une
- page deux
- page trois
- page quatre
Fig. 4.18
•••
Résultat des listes à puces dans le navigateur
Les liens
Les hyperliens Comme nous l’avons évoqué au début de ce livre, les liens ou hyperliens sont l’essence même des pages web. Sans liens, il n’y aurait pas de sites. Les liens permettent de passer d’une page à une autre, mais aussi de se déplacer dans une page unique (les ancres), de charger des images ou des vidéos (liens de téléchargement) ou encore d’envoyer un email (lien de contact). Nous allons commencer par les liens entre les pages. Différence entre liens relatifs et absolus Il est impératif de bien saisir la différence entre ces deux types de liens car vous aurez à les utiliser et si vous employez à tort des liens relatifs à la place de liens absolus ou vice-versa, vous risquez fort d’avoir un site qui ne fonctionnera pas. – Le lien relatif situe la cible du lien par rapport à l’appelant. Si un fichier index.htm cherche à établir un lien avec une page placée dans un sous-dossier du dossier dans lequel se trouve le fichier index.htm, par exemple la page « ecran.htm » d’un sous-dossier « produits », le lien relatif sera : « videos/ecran.htm ». C’est ce type de liens que l’on emploie pour passer d’une page à une autre ou pour faire charger une image dans une page, par exemple.
@ 91
Expression Web
– Contrairement au lien relatif, un lien absolu est autonome. Il y a dans son lien l’adresse complète pour le retrouver de n’importe où. Idéal par exemple pour faire un lien entre une page du site et la page d’un autre site. Le lien absolu aura cet aspect : http://www. toto.com Il pourrait aussi avoir cet aspect, en local : C : Documents and Settings/Mes documents /DUNOD/Expression_Web /04_Codes_et_ Conduite_de_sites/page.htm Ce deuxième lien absolu est bien sûr complètement à déconseiller dans le cas d’un lien pour relier des pages, car que se passera t-il le jour où vous allez transférer votre site qui se trouve en local sur votre disque dur, vers le disque dur du serveur de l’hébergeur de votre site ? L’organisation interne, les noms de dossiers dans ce serveur sont forcément différents de l’architecture de votre disque dur. Donc, si pour passer de page en page, vous avez déclaré des liens absolus, une fois le site transféré sur le serveur, les liens entre vos pages seront brisés car les adresses des pages ne seront plus bonnes. Par contre, si vous êtes en lien relatif, la page « ecran.htm », qui était notée comme se trouvant dans un dossier d’un étage plus bas que la page appelante sur votre disque dur, sera toujours dans un sous-dossier placé un étage plus bas sur le serveur. Peu importe le nom de la partition, du dossier qui contient le site, etc. Seule compte la position hiérarchique de l’appelé par rapport à l’appelant.
Tutoriel 4.9 – Les hyperliens Principe du tutoriel : nous allons, à partir de la page « index », créez trois copies de cette page qui seront nommées « page_deux.htm», « page_trois.htm » et « page_quatre.htm », et la liste à puce faite précédemment va nous servir de menu pour aller d’une page à une autre.
3 Reprenez votre fichier précédent et éliminez quelques paragraphes créés précédemment pour que la page soit plus simple.
3 Gardez intacte la liste à puces. 3 Dans la fenêtre du bas du mode « Mitigé », sélectionnez les mots « page_une », premier item de notre liste à puces devenue menu.
3 Cliquez
ensuite sur le symbole de lien présent dans la barre d’outils « Eléments Communs ».
3 Une fenêtre va alors s’ouvrir vous demandant de préciser le lieu et la cible du lien. Dans notre exemple, cliquez sur index.htm et validez.
3 Puis passez au second item, sélectionnez les deux mots « page_deux », cliquez sur l’icône pour créer un lien. Dans la fenêtre qui s’ouvre, la page vers laquelle doit conduire le lien n’existe pas encore. Qu’à cela ne tienne, dans la barre d’adresse en bas de la boîte, entrez le libellé de la page, soit « page_deux.htm ».
3 Puis faites de même sur les items trois et quatre, en plaçant un lien relatif vers respectivement la page_trois.htm et la page_quatre.htm.
@ 92
Chapitre 4. Codes et conduites de sites
Fig. 4.19 Icône pour créer des liens
3 Une fois que cela est fait, sauvegardez la page sous le nom « index.htm ». 3 Puis changez le contenu de la balise <TITLE> placée dans l’entête de la page et écrivez « page deux ».
3 Idem sur la première phrase dans le body, inscrivez : « Bienvenue sur la page deux » et ainsi de suite pour les autres pages.
3 Sauvegardez cette page sous le terme « page_deux.htm ». 3 Idem pour les trois et quatre. 3 Lancez ensuite une des pages dans le navigateur et vérifiez que vos liens fonctionnent.
3 Vous pouvez, si vous le souhaitez, placer un lien absolu sur le dernier item, comme ceci : http://www.dunod.com.
- page quatre
@ 93
Expression Web
Cible des liens La cible des liens correspond à l’endroit où l’on veut voir s’ouvrir la page cible : dans la même fenêtre que son parent ou dans une nouvelle fenêtre ? Si vous souhaitez que ce soit dans la même fenêtre, ajoutez alors ceci dans le lien : target="_self" - page trois
Si, au contraire, vous préférez que ce soit dans une nouvelle fenêtre, alors c’est l’instruction "_blank" qu’il faut employer. - page quatre
Ces options sont disponibles en sélectionnant « Cadre de Destination » lorsque la boîte destinée à indiquer le fichier cible apparaît.
Fig. 4.20 Choix de la cible
Les ancres Les ancres sont des hyperliens mais placés en général dans une même et seule page, ce qui permet sur une page très longue de pouvoir se déplacer facilement sans abuser de la molette de la souris.
@ 94
Chapitre 4. Codes et conduites de sites
Tutoriel 4.10 – Les ancres Une ancre se fait toujours en deux étapes :
3 Étape 1 : Placer les signets, c’est-à-dire les points de repère qui fixent les destinations. Dans notre tutoriel, nous avons rajouté une phrase en début de page : « Début de page » et une en fin de page : « Fin de Page ». • En étant dans la fenêtre Création, placez votre curseur au milieu du texte et faites
de nombreux retours-chariot afin d’allonger, par des lignes vides, la hauteur de la page. • Puis en haut de page, écrivez « Début de Page » et en dessous une autre phrase
avec : « Allez en fin de page ». • Idem en fin de page. Écrivez « Fin de page » et en dessous une ligne avec « Allez
en début de page ». • Sélectionnez « Début » puis menu « Insertion > Signet ». • Pareil pour le mot « Fin ».
3 Étape 2 : Enfin, définir les ancres : • sur la ligne du haut, sélectionnez « Allez en fin de page » et cliquez sur l’icône
pour créer des liens. Dans la fenêtre, cliquez sur l’onglet « Signet » et dans la liste qui apparaît, choisissez le signet « Fin de page ».
Fig. 4.21 Choix des signets pour les ancres Début de page
Allez en fin de page
Bienvenue sur la page quatre du site Primo
- page une
- page deux
- page trois
@ 95
Expression Web
- page quatre
…/…
Allez en début de page
Fin de page
Les liens de messagerie Les liens de messagerie sont en fait des liens normaux auxquels on ajoute l’attribut « mailto », ce qui déclenche l’ouverture du client de messagerie (Outlook, Outlook Express ou Thunderbird) du poste client afin de pouvoir envoyer un mail.
@ 96
5
Mises en boîtes : les blocs OBJECTIF Il est primordial de connaître les moyens qu’offre la programmation HTML pour structurer le contenu des pages ; d’une part pour pouvoir placer ces éléments d’information dans l’espace de la page, comme le fait un infographiste avec la maquette de la « une » d’un journal, et d’autre part, pour pouvoir gérer de manière fonctionnelle ces éléments (liens, menu, réponse à un événement particulier). Nous passerons en revue trois méthodes de mise en place de ces structures : les tableaux, les cadres et les blocs conteneurs. Les deux premières méthodes sont largement tombées en désuétude, notamment celle des frames, et nous n’insisterons pas. Celle des tableaux, maintenant supplantée par les conteneurs et les CSS, fait quand même partie des bases à connaître dans la construction de pages web et vous en aurez de toute façon besoin, un jour ou l’autre, ne serait-ce que pour mettre en forme des données de type tabulaire. De plus, les développeurs d’Expression Web ont mis le paquet en mettant à votre disposition pas moins de trois outils pour maîtriser ces tableaux. Cependant, un soin tout particulier sera porté aux blocs conteneurs, même si cela a trait plutôt aux CSS qui seront traitées dans le chapitre suivant.
•••
Structurer l’information Tout contenu (texte, image, objet multimédia) placé dans une page HTML a besoin d’être organisé, c’est-à-dire que l’on puisse définir par exemple que tel texte sera un titre, placé à telle distance du haut de page, que tel autre sera un article séparé en trois colonnes égales, et que cette image sera placée en haut à gauche.
@ 97
Expression Web
Par défaut, en HTML, si dans le code d’une page vous placez des éléments les uns derrière les autres, ils seront affichés les uns sous les autres. Pour pouvoir intervenir sur leur disposition dans l’espace, il faut mettre ces éléments dans des sortes de boîtes, munies de « poignées HTML » permettant d’agir sur leur disposition ou sur le style de leur contenu. Dans les chapitres précédents, nous avons justement déjà utilisé des exemples de « boîtes » : des « conteneurs », tels que les balises ou les balises . La balise
, qui permet de définir un tableau, est un autre exemple de balise de conteneur. En l’an 2000, il y a de cela une éternité dans le monde du Web, la plupart des sites étaient fabriqués à base de tableaux ; d’une part parce que les navigateurs n’interprétaient pas tous de la même façon les propriétés des feuilles de style CSS alors que les tableaux offraient toujours le même résultat et, d’autre part, il faut bien le reconnaître, parce que cela semblait beaucoup plus simple pour les designers quand il s’agissait de mettre en forme une page. Seulement, on s’est vite rendu compte que ces tableaux présentaient de nombreux inconvénients, parmi lesquels leur rigidité quant à la modification ou la mise à jour des pages, et le ralentissement sensible du chargement des pages dû à des imbrications de tableaux dépassant les limites du raisonnable – imbrications qui étaient cependant le seul moyen pour arriver à faire des mises en pages originales et ludiques. Parallèlement, une autre technologie permettait de donner l’impression de structurer les pages : les frames (aussi appelés « cadres »). Il s’agit en fait de placer plusieurs pages, les frames, au sein d’une même page. Avantage : il n’est pas nécessaire de recharger toute la page quand une des parties est modifiée, puisque l’on ne va recharger que la partie (la frame qui contient une page HTML) qui change. Inconvénients : une gestion complexe, une portabilité sur d’autres supports impossible (imprimante, portable…) ou plutôt le fait qu’il n’y ait qu’un seul cadre qui puisse être envoyé sur le nouveau support (ce qui entraîne par exemple, des impressions tronquées de la page imprimée) mais surtout une non-prise en compte de ces cadres par les moteurs de recherche qui, face à ces éléments, se révèlent incapables de pouvoir suivre les liens placés dans les pages. Ces cadres sont donc désormais totalement abandonnés par les professionnels et il est préférable de ne pas utiliser cette technique aujourd’hui. Néanmoins, nous aborderons succinctement les moyens de les mettre en place. Par contre, nous verrons plus en détail l’utilisation et la mise en œuvre des conteneurs gérés par les CSS, car c’est aujourd’hui la meilleure méthode pour structurer l’information dans un site. Je me permets ce petit encart car je sens le doute s’installer en vous : qui est qui ? qui fait quoi ? Ne vous méprenez pas : les tableaux et les conteneurs appartiennent bien à la même famille, celles des balises HTML de type blocs. Simplement, au début du Web, il n’y avait que les tableaux qui étaient utilisés pour structurer les contenus dans les pages ; pas ou très peu les autres balises de types blocs, comme les balises , etc. Et cette manière de faire a bien sûr influencé la manière de construire les pages. D’où cette habitude de traiter séparément ces deux types de blocs.
@ 98
Chapitre 5. Mises en boîtes : les blocs
Quand aux frames, c’est vraiment une autre méthode qui, en réalité, touche plus l’organisation générale du site (et si on le souhaite, même si ce n’est pas conseillé, on peut cumuler les trois méthodes : des pages avec des frames comptant en leur sein des blocs conteneurs et des tableaux).
•••
Les tableaux En fait, un tableau HTML ressemble beaucoup à un tableau créé sous Word ou sous Excel, à savoir une succession de lignes et de colonnes, de taille (largeur) réglable et de hauteur proportionnelle au contenu ; dans les cellules créées par ces lignes et ces colonnes, viennent ensuite prendre place des éléments HTML divers tels que du texte, des images ou des animations Flash par exemple. Les lignes et les colonnes peuvent également être fusionnées si l’on souhaite disposer d’espaces plus importants à certains endroits. Rappelons toutefois que les tableaux doivent être réservés en priorité aux données tabulaires, tels des tableaux de chiffres ou l’affichage de listes de produits de catalogue par exemple. Un tableau est créé par l’emploi de la balise HTML
suivis d’une ou de plusieurs balises pour la définition des lignes. Chaque balise
doit comporter au moins une balise qui sert à représenter une cellule de colonne. Ainsi, par exemple, un tableau de deux lignes et trois colonnes sera créé par le code suivant : 1 ère col 1 ère ligne | 2 ème col 1 ère ligne | 3 ème col 1 ère ligne | 1 ère col 2 ème ligne | 2 ème col 2 ème ligne | 3 ème col 2 ème ligne | Diverses méthodes de création de tableaux Il existe plusieurs manières de créer des tableaux sous Expression Web : 3 par la fonction « Insérer un Tableau » présente dans les barres d’outils « Eléments communs » ou « Standard » ; 3 par le menu « Tableau », puis le sous-menu « Insérer un tableau » ; @ 99 Expression Web 3 en utilisant les fonctions de « Tableaux de disposition », accessibles par le panneau ou volet de tâches correspondant ou par le menu « Tableau », puis le sous-menu « Insérer un tableau » ; 3 manuellement, en plaçant dans le code, les balises HTML citées précédemment. Laquelle choisir ? En fait, les quatre méthodes aboutissent au même résultat, l’écriture d’un code HTML utilisant la balise et les balises et | associées. Donc, en dehors du fait d’écrire le code manuellement, les autres méthodes sont des assistants qui vous faciliteront le travail. À vous de voir, celle qui vous convient le mieux. Dans tous les cas, pensez au préalable à positionner votre curseur à l’endroit où vous souhaitez placer le tableau. Vous pouvez indifféremment être dans la fenêtre « Création » ou « Code ». Première méthode : Barre d’Outils > Insérer un tableau Cet outil permet de définir un tableau de quatre lignes par cinq colonnes au maximum. En déplaçant votre souris sur l’outil, vous déterminerez le nombre de lignes et de colonnes. Fig. 5.1 Insérer un tableau par la barre d’outils « Standard » ou « Eléments communs » Tutoriel 5.1 – Insertion d’un tableau 1re méthode (Vous trouverez ce tutoriel dans le dossier 05_01, sous le nom : « tuto_05_01.htm ») 3 Créez une nouvelle page HTML. 3 Afin de visualiser les limites du tableau que vous allez créer, vérifiez bien que dans le menu « Affichage » > « Aides Visuelles », vous ayez bien le sous-menu « Marges et Remplissages » coché, comme sur la figure 5.2, sinon vous risquez de ne pas voir le tableau créé dans la fenêtre Création. 3 Si vous êtes en mode Code, positionnez votre curseur entre les balises . 3 Si vous êtes en mode Création, cliquez n’importe où dans la fenêtre. 3 Comme sur la figure 5.1, choisissez un tableau de 3 par 3 (trois lignes par trois colonnes) et validez. @ 100 Chapitre 5. Mises en boîtes : les blocs Fig. 5.2 Options d’affichage Voilà le code que vous devez obtenir : Si vous lancez un navigateur (touche raccourci F12 pour lancer le navigateur dernièrement lancé), vous ne verrez rien, à part une légère bordure grisée. C’est normal, puisque le tableau ne possède aucun contenu. Analysons le code : Après la déclaration de tableau par la balise , nous avons la déclaration de la première ligne du tableau par la balise . Puis, avant de fermer cette balise, nous devons enchâsser dans cette balise, trois paires de balises qui représente les trois colonnes de tableau de la première ligne. Et ainsi de suite. Dans chaque balise | , nous voyons apparaître le code suivant : ce qui représente en code HTML un espace blanc. Donc, c’est logique que l’on ne voit rien s’afficher. @ 101 Expression Web 3 Remplacez ces espaces par le contenu de votre choix ou par les contenus présents dans le tutoriel et admirez le résultat sous un navigateur. 3 N’oubliez pas de sauvegarder le fichier. Fig. 5.3 Le tableau et son contenu tels qu’ils apparaissent dans la fenêtre « Création » Seconde méthode : menu « Tableau » > Insérer un tableau Tutoriel 5.2 – Insertion d’un tableau 2e méthode (Vous trouverez ce tutoriel dans le dossier 05_02, sous le nom : « tuto_05_02.htm ») Ce tutoriel est le résultat d’une déclaration de tableau par cette méthode. Cette fonction a l’avantage d’offrir une fenêtre détaillée des principaux paramètres de formatage des tableaux. Rassurez-vous, vous aurez toujours la possibilité de compléter ces paramètres plus tard, notamment par le sous-menu « Propriétés de Tableaux » présent également dans ce menu, et qui aura pour effet d’ouvrir à nouveau ce panneau. Sachez également que vous pourrez le faire par les feuilles de styles CSS, comme nous le verrons plus tard. (Bien entendu, mais vous commencez à en avoir l’habitude, il est nettement conseillé d’utiliser ce paramétrage par les feuilles de style, puisque vous pourrez entre autres appliquer en une seule fois, le même style à plusieurs tableaux.) 3 Taille : Indiquez le nombre de lignes et de colonnes qui composeront le tableau. Notez que ces valeurs pourront ensuite être modifiées manuellement par suppression ou ajout de balises | pour les lignes et pour les colonnes. Néanmoins vous verrez qu’il est beaucoup plus facile d’apporter des modifications sur des lignes que sur des colonnes. 3 Disposition : • Alignement : Choisissez si vous souhaitez un tableau à gauche, à droite ou centré. • Flottement : Le tableau peut cohabiter avec du texte à ses côtés. Choisissez « Flottement » si le tableau doit « flotter » à gauche ou à droite du paragraphe. Choisissez « Par défaut » si vous ne souhaitez pas que le tableau bouge. • Largeur : Spécifiez toujours une largeur. Choisissez 100 % si vous désirez que le tableau occupe toute la largeur disponible dans la page. @ 102 Chapitre 5. Mises en boîtes : les blocs • Hauteur : En général, on ne spécifie pas la hauteur, afin que le tableau puisse s’auto-dimensionner en fonction du contenu. Sinon, comme pour la largeur, si vous spécifiez 100 %, le tableau occupera toute la hauteur. • Marge intérieure des cellules (ou Cellpadding) : Les cellules sont les cases d’un tableau, à la croisée d’une ligne et d’une colonne. Plus la marge intérieure des cellules sera élevée, plus son contenu sera repoussé vers l’intérieur de cette cellule. Le Cellpadding définit dont l’espacement entre le bord d’une cellule et son contenu. Voyez le résultat sur la figure 5.3. • Espacement entre les cellules (ou Cellspacing) : Permet de tracer une travée de largeur plus ou moins importante entre les cellules. Idem, le résultat est visible sur la figure 5.3. Fig. 5.4 Menu « Tableau > Insérer un Tableau » 3 Bordures : • Taille : Attention, on parle ici de la bordure extérieure du tableau et non des bords de chaque cellule. La taille est ici exprimée en pixels. • Couleur : Couleur de la bordure extérieure du tableau. • Réduire les bordures du tableau : Permet de modifier l’apparence des bordures du tableau. (En fait, cela ajoute une propriété « border-collapse » avec un attribut « collapse » dans la feuille de style intégrée.). Par contre, si vous souhaitez voir @ 103 Expression Web apparaître des lignes pour séparer les cellules, cochez la case et rajoutez la propriété border="1". Voir l’exemple dans le tutoriel qui suit. 3 Arrière-plan (ou Background) : Permet de définir la couleur de remplissage du fond de tableau. Notez que vous pouvez également placer une image au format GIF, JPG ou PNG. 3 Outils de disposition : L’activation de cette option permet de pouvoir modifier beaucoup plus précisément, dans la fenêtre de « Création », les dimensions internes du tableau. 3 Définir : Vous permet d’appliquer les mêmes propriétés à tous les tableaux créés de la sorte. Fig. 5.5 Résultat dans la fenêtre Création des paramètres présents ci-dessus Il est utile de décortiquer le code dès à présent, car un nouvel élément a fait son apparition : la feuille de styles intégrée (ou CSS intégrée). Elle est indiquée dans l’entête de la page HTML, par la balise <style type="text/css"> qui marque son début de déclaration, jusqu’à représentant la fin de déclaration. Cette CSS a été générée par Expression Web. (N’apparaît ci-dessous, que la partie du code qui nous intéresse) <style type="text/css"> .style1 { width: 250px; height: 250px; border-collapse: collapse; border: 3px solid #ff0000; background-color: #FFFFFF; } @ 104 Chapitre 5. Mises en boîtes : les blocs Haut gauche | Haut droite | Bas Gauche | Bas Droit |
Cette CSS comporte une déclaration de classe (« .style1 »), qui est appelée lors de la déclaration du tableau par: Comme nous le verrons dans le chapitre sur les CSS, la classe est l’un des deux moyens d’attacher une série de propriétés à un élément de la page, pour influer sur son style ou son positionnement. Cette classe est donc au préalable déclarée dans l’entête de la page HTML. Cette entête contient les « paramètres » de la page et renseigne le navigateur sur la version HTML utilisée, la langue par défaut, le titre de page, les mots-clés, etc. C’est également la zone dans laquelle : 3 on va déclarer les liens entre la page et des fichiers externes, qui seront chargés en mémoire, en même temps que la page. Ces fichiers externes seront en général des fichiers de code JavaScript (utiles pour apporter de l’interactivité, des contrôles ou de l’animation dans les pages) ou les fameuses feuilles de styles CSS. Avantage de cette méthode, le fichier externe n’est chargé qu’une seule fois pour toutes les pages auxquels il est lié, ce qui améliore les performances globales d’affichage des diverses pages du site ; 3 on peut aussi intégrer ces fichiers dans la page. Ils seront alors placés dans cette zone d’entête de page. Cette seconde solution est utilisée dans le cas où les styles contenus dans la CSS intégrée par exemple, ne sont utilisés que dans cette page particulière. Si vous pratiquez un petit peu la langue anglaise, vous voyez que les propriétés incluses dans cette classe sont : 3 la définition de la largeur du tableau: > width: 250px; 3 sa hauteur : > height: 250px; 3 le comportement des bordures : > border-collapse: collapse; 3 la largeur, le type et la couleur des bordures (exprimée en hexadécimal) : > border: 3px solid #ff0000; 3 la couleur du fond de tableau : > background-color: #FFFFFF; @ 105 Expression Web 3e méthode : volet tableaux de disposition 3 Si le panneau « Tableau de Disposition » n’apparaît pas dans votre interface, allez dans le menu « Volets des Tâches » et activez le panneau « Tableaux de Disposition ». 3 Attention : vérifiez bien que dans le menu « Affichage >Marques de Mise en Forme, l’item « Marques de balises » est bien décoché, sinon la partie du choix de modèles de tableaux, dans le volet « Tableaux de Disposition » ne sera pas accessible et restera en grisée. Fig. 5.6 Veillez à ce que l’option d’affichage des marques de balises soit désélectionnée 3 En bas du volet, cochez le tableau qui vous convient, sans oublier d’activer l’option « Afficher l’outil de disposition ». Cette option permet, comme on peut le voir sur la figure 5.7, de faire apparaître des poignées de réglages des hauteurs et largeurs du tableau choisi. Fig. 5.7 Activez l’option « Afficher l’outil de disposition » pour faire apparaître les poignées de réglages de tableau @ 106 Chapitre 5. Mises en boîtes : les blocs 4e méthode : création de tableau manuellement Même si Expression Web dispose de fonctions permettant de mettre en place rapidement un tableau, il est toujours bon de savoir le faire en écrivant soi-même les lignes de code HTML. Cela vous permettra également de vous familiariser avec les services d’IntelliSense, qui vous épaule dans l’écriture du code. Un tableau se compose donc de trois éléments principaux : 3 Une balise , qui encadre et déclare le tableau. 3 Une ou plusieurs balises qui délimitent les lignes du tableau. Donc autant de que de lignes. 3 Une ou plusieurs balises | pour créer les colonnes de tableau. Idem que pour les lignes, autant de que de colonnes. À noter que les | sont déclarés à l’intérieur des lignes | . Tutoriel 5.3 – Écriture manuelle du code d’un tableau (Vous trouverez ce tutoriel dans le dossier 05_03, sous le nom : « tuto_05_03.htm ») Nous allons créer un tableau de deux lignes par deux colonnes et en profiter pour utiliser IntelliSense. IntelliSense IntelliSense est une aide apportée par Expression Web lorsque vous travaillez en mode Code. Cette fonction insère du code automatiquement, mais saura aussi afficher des info-bulles ou des menus contextuels en fonction du contexte et vous permettre un suivi de vos liens hypertextes. Vous l’aurez compris, IntelliSense est un compagnon qui va vous éviter de faire des erreurs de code. IntelliSense est disponible pour le langage HTML, les feuilles de style en cascade (CSS), le langage XSL (Extensible Stylesheet Language), JScript, JavaScript, Microsoft Visual Basic® Scripting Edition (VBScript) et ASP.NET. Attention : La déclaration Doctype de début de page agit sur les menus contextuels proposés par IntelliSense. Une raison de plus donc pour inscrire le bon DOCTYPE qui convient à votre code. Si vous ne savez pas lequel utiliser, prenez celui par défaut proposé lors de la création de page. 3 Créez un nouveau document. 3 Vérifiez que les paramètres d’IntelliSense sont bien activés. Pour cela, allez dans le menu « Outils > Options de l’Editeur de pages » et choisissez l’onglet « IntelliSense ». Cochez toutes les cases. 3 Nous allons maintenant taper le code ; pour cela, il faut que votre curseur soit bien positionné dans la fenêtre « Code » et, comme pour tout élément visible, au sein de la balise ; sinon, si vous êtes dans la fenêtre « Création », @ 107 Expression Web Expression Web supposera que vous souhaitez taper un contenu texte et insérera votre code comme du texte, au sein de la balise de paragraphe . 3 Commencez par taper le signe « < » qui est le premier caractère de déclaration de toute balise HTML. 3 Vous voyez apparaître une petite fenêtre vous proposant une suite logique à ce que vous avez tapé. Seulement, vu que toutes les balises commencent par « < », le choix de propositions fait par Expression Web est très important. 3 Continuez en tapant le « T » (majuscule ou minuscule, peu importe) de TABLE. 3 Sachant que la balise est la première de la liste des balises commençant par T, c’est logique qu’Expression Web vous la propose dans la fenêtre d’IntelliSense. (figure 5.8). 3 Il ne vous reste plus alors qu’à taper sur « Entrée » pour accepter la proposition. 3 Notez que : • vous pouvez vous déplacer dans les propositions avec les flèches « Haut » et « Bas » ; • plus vous taperez de lettres, plus Expression Web affinera ses propositions. (Si par exemple, vous tapez un « E » après le « T », Expression Web vous proposera alors « TEXTAREA » et non plus « TABLE ». Dans ce cas, faites un « retour arrière » pour effacer votre dernier caractère. Expression Web se repositionne sur la balise « TABLE> ».) Fig. 5.8 IntelliSense en action 3 Une fois que le terme « ». À ce moment, Expression Web comprend qu’il n’y aura pas de propriétés de style inscrite dans la déclaration de balise et inscrit tout de suite la balise fermante : . Ainsi, vous êtes sûr de ne pas l’oublier. @ 108 Chapitre 5. Mises en boîtes : les blocs (Vous pouvez aussi, une fois que les caractères « » sans passer par la validation de la touche « Entrée ». Expression Web comprend également que vous ne souhaitez pas ajouter de propriétés dans la balise et écrira automatiquement à la suite .) 3 Votre curseur étant positionné entre les deux parties de la balise, tapez deux fois sur « Entrée » pour provoquer un retour à la ligne avec une ligne vide, et positionnezvous sur la ligne vide. 3 Puis vous allez inscrire la première ligne du tableau, soit . Remarquez que, comme précédemment, il vous suffit de taper « Barre d’Outils > Tableaux >. 3 Sélectionnez les deux cellules de la première ligne à la souris dans la partie Création. 3 Cliquez sur l’icône « Fusionner les cellules » dans la barre d’outils Tableau, comme le montre la figure 5.10. @ 111 Expression Web Fig. 5.10 Fusionner des cellules d’un tableau 3 Voilà le code que vous devez désormais obtenir : 3 Remarquez qu’à la place des deux balises de colonnes de la première ligne : L1C1 | L1C2 | nous n’avons désormais plus qu’une seule balise, amis avec une propriété de fusion, avec comme attribut le chiffre 2 pour indiquer qu’il y a bien deux cellules fusionnées. L1C1L1C2 | Une fusion peut s’étendre sur plusieurs cellules et peut aussi s’appliquer suivant le même principe sur des balises de ligne. Imbrication de tableaux Un tableau peut contenir d’autres tableaux, qui peuvent eux-mêmes contenir d’autres tableaux. Exemple : Tutoriel 05_04_b : Imbrication de tableaux. J’ai rajouté des bordures et des fonds de couleurs aux tableaux pour vous permettre de mieux les voir. @ 112 Chapitre 5. Mises en boîtes : les blocs Remarquez le second tableau, qui est imbriqué dans la première cellule de la deuxième ligne du tableau. Tableau 2 L1C1 | Tableau 2 L1C21; | Tableau 2 L2C1 | Tableau 2 L2C2 | Création d’une page d’accueil avec un tableau Maintenant que les tableaux n’ont plus de secrets pour vous, quoi de mieux qu’un exercice grandeur nature pour asseoir vos connaissances. Je vous propose de faire la page d’accueil d’un site, pour l’instant institutionnel, vantant les mérites de ses produits très design : de superbes canapés. Ce site sera notre site « fil rouge » tout au long de cet ouvrage. Comme j’ai déjà eu l’occasion de le préciser, il n’est plus conseillé de réaliser l’interface d’un site uniquement à base de tableaux ; ce type de mise en page est trop rigide et amène à créer trop d’imbrications de tableaux les uns dans les autres, pour réaliser des interfaces élégantes et harmonieuses. D’autre part, c’est une catastrophe en cas de mise à jour ou de versions multilangues. Néanmoins, il y a des cas où les tableaux se révèlent encore utiles et pratiques, ne serait-ce que pour afficher une liste de données. Et puis, nous réaliserons ensuite la même interface mais cette fois avec des conteneurs et des blocs, ce qui vous permettra de vous faire une idée par vous-même. @ 113 Expression Web Vous trouverez dans le dossier « canapes&design », le tutoriel « accueil_tableaux.htm » ainsi que le fichier « accueil_tableau.pdf » qui décrit en détail la marche à suivre pour réaliser la page d’accueil, montée avec des tableaux. Attention : les images, icônes et illustrations diverses fournies sur le site dunod.com, dans la partie téléchargement des tutoriels de ce livre sont protégées par copyright et sont soumis aux règles des droits d’auteurs. Vous êtes uniquement autorisé à les utiliser dans le cadre de cet ouvrage, pour réaliser les exemples présentés dans les tutoriels. Vous avez donc interdiction de les reproduire, de les donner à une tierce personne, de les utiliser à des fins commerciales ou de les revendre, quel que soit le support. Je vous en remercie pour les auteurs. Fig. 5.11 ••• Réalisation d’une page d’accueil de site à l’aide de tableaux Les frames (ou cadres) Définition et utilisation L’utilisation des frames en théorie est une solution astucieuse pour permettre le rafraîchissement partiel de l’affichage des pages. Une frame est en réalité une zone de chargement d’une page HTML. Pour que cela soit intéressant, il faut donc plusieurs frames organisées ensemble dans une même page. Cette page qui les regroupe est alors appelée « Frameset ». @ 114 Chapitre 5. Mises en boîtes : les blocs Donc, une page d’accueil, par exemple, organisée en frame et comprenant trois zones sera composée de quatre fichiers htm : 3 la page Frameset : accueil.htm ; 3 la page de la zone 1, représentée par une frame : accueil_01.htm ; 3 la page de la zone 2, représentée par une frame : accueil_02.htm ; 3 la page de la zone 3, représentée par une frame : accueil_03.htm. Voyez ce n’est déjà pas ce qu’il y a de plus simple : quatre fichiers htm pour afficher une simple page HTML. L’avantage, par contre, c’est que dans une mise en page de ce style, avec une bannière en haut et une colonne en bas, deux zones qui a priori vont subir peu de changements entre les différentes pages, on ne changera alors sur les autres pages, que la zone 2 : ainsi dans la page d’accueil, ce sera la page accueil_02.htm qui sera chargée par le frameset, mais dans la page produits, ce pourra être la page produits.htm. La différence avec une page classique, c’est qu’on ne recharge qu’une partie du site. Fig. 5.12 Organisation d’une page HTML en frameset et frames associées Avantage Au temps déjà lointain dans le monde du Web, où les débits vendus par les opérateurs étaient faibles (256 Ko, il n’y a pas si longtemps), l’utilisation de frames pouvait être défendue à juste titre, car cela permettait de ne recharger qu’une partie de la page, ce qui bien sûr apportait un affichage plus rapide. Inconvénients Oui, mais c’était avant que Google et les autres moteurs de recherche ne deviennent des acteurs incontournables du monde du Web ; avant que le référencement soit devenu un élément clé et obligatoire pour la plupart des sites. Or, dans le cadre d’utilisation de frame- @ 115 Expression Web set et de frames, les moteurs de recherche sont désarmés et ne peuvent référencer les sites. Ceci est bien sûr un inconvénient majeur. Autres inconvénients : 3 Les frames ne sont pas adaptés au support média de type portable, tels que les téléphones ou les PDA. 3 L’accessibilité des sites à base de frames n’est pas adaptée aux internautes handicapés. 3 L’impression papier d’un site en frames est le plus souvent catastrophique, ne récupérant souvent à la place du contenu que la colonne des menus par exemple. 3 Quand les moteurs de recherche arrivent à référencer une partie de ces sites, ils fournissent des liens vers des pages contenus dans des frames, et non les liens des framesets, ce qui entraîne un affichage avec de nombreux éléments manquants, comme la zone 1 et 3 dans notre exemple illustré ci-dessus. Tutoriel 5.5 – Création d’une page d’accueil à base de frames Vous trouverez ce tutoriel dans le dossier 05_05, sous le nom : « tuto_05-05-cadres.htm », avec ses fichiers associés. Pour créer la même chose sous Expression Web : 3 Créez une nouvelle page en allant dans le menu « Fichier > Nouveau > Page ». 3 Dans la fenêtre qui s’ouvre, dans l’onglet « Page », sélectionnez « Page de Cadres » et l’un des modèles proposés. Fig. 5.13 @ 116 Création d’une page frameset Chapitre 5. Mises en boîtes : les blocs 3 Validez. Fig. 5.14 Le frameset en attente de ses contenus dans les diverses frames 3 Cliquez ensuite dans la zone du haut, et cliquez sur le bouton « Choisir la page initiale ». 3 Vous êtes alors invité à indiquer la page HTML devant être placée dans cette zone. 3 Choisissez : 05_05_01.htm 3 Faites de même pour les deux autres frames : • avec le fichier 05_05_02.htm pour la colonne de gauche ; • avec le fichier 05_05_03.htm pour la zone centrale. 3 Votre page d’accueil est terminée. Attention : dans le cadre d’un travail avec des framesets, lorsqu’en mode création vous cliquez dans une des zones, c’est le code de la page HTML de la zone qui apparaît dans la fenêtre code. Ainsi, si vous cliquez dans la partie haute de l’exemple ci-dessus, vous devez voir apparaître le code du fichier « tuto_05-05-01.htm » dans la fenêtre code. Pour faire apparaître le code du frameset, il faut cliquer dans le coin gauche, le plus proche possible du bord, ou bien sur l’une des bordures de séparation des frames. Autre solution, si vous êtes en mode « fractionné », cliquez sur le bouton « Code » en bas de l’interface. Surveillez le code apparaissant dans la fenêtre Code. Si vous voyez apparaître le terme « frameset », c’est gagné. Voici le code du frameset tel qu’il devrait apparaître dans votre fenêtre Code : @ 117 Expression Web <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Tuto_05_05_Cadres <noframes> Cette page utilise des cadres, mais votre navigateur ne les prend pas en charge. ••• Les conteneurs Reparlons un peu de CSS Dès que l’on aborde le domaine des conteneurs, il convient d’y associer le domaine des CSS (feuilles de styles) car les deux sont intimement liés. Notez bien l’étendue du champ d’action du terme « Style » présent dans « Feuilles de Style» : ce style est à la fois la police utilisée et sa couleur, la taille des titres, la couleur du bandeau supérieur, mais c’est aussi la position de telle ou telle image dans la page, la marge entre ces deux colonnes ; c’est aussi, l’effet roll over (basculement d’images) sur le menu situé sous l’entête, les rayures qui ornent le fond de page ou cette disparition de tel élément au moment de l’impression ; et c’est encore le style qui détermine la couleur des liens par défaut ou au survol. Et encore, j’ai fait bref ! Nous étudierons tout cela dans un prochain chapitre, car ce qui nous intéresse pour l’instant, c’est le positionnement d’éléments par les CSS. Un peu de syntaxe Tout au long des divers exemples et tutoriels rencontrés depuis le début de cet ouvrage, nous avons vu que tout contenu placé dans une page est forcément encadré par des balises HTML, telles que des balises de paragraphes (), de conteneur (, de tableaux @ 118 Chapitre 5. Mises en boîtes : les blocs ( ) etc. Pour simplifier, nous désignons donc cet ensemble (contenu + balise), ELEMENT. Donc, un paragraphe est un élément, tout comme le tableau ou le DIV ; mais ces éléments peuvent aussi être considérés comme des conteneurs, dans le cas où ils contiennent d’autres éléments : vous rencontrerez souvent des DIV comme conteneurs de plusieurs paragraphes. Donc, on emploiera plutôt le terme conteneur pour des éléments capables de contenir naturellement, d’autres éléments. Mais un conteneur reste un élément (ou une balise). Cette précision est importante, car nous verrons que les éléments obéissent à des règles. Quatre ou cinq choses simples au sujet des éléments ou balises Abordons le placement de ces éléments dans une page HTML. Le FLUX courant Pour imager mes propos, imaginons que la page HTML soit un tapis roulant, allant de bas en haut, et sur lequel tombent au fur et à mesure de leur arrivée, des éléments (textes, images, au sein de balises). Au final, on aura un tapis sur lequel tous les éléments placés se suivent les uns derrière les autres. Ce mouvement est appelé en langage CSS, le FLUX COURANT. Ce FLUX est donc l'ordre dans lequel apparaissent les éléments de la page correspondant à l’ordre dans lequel ils sont disposés et affichés par le navigateur. Les éléments peuvent être de type BLOC ou EN LIGNE On parle de rendu visuel CSS « bloc » ou de rendu visuel CSS « en ligne » ou « inline ». Type BLOC Dans un flux courant, les éléments de type bloc se suivent les uns derrière les autres, c’està-dire qu’ils provoquent un retour à la ligne et que l’élément bloc qui suit un autre élément bloc se place dessous. Les éléments de type BLOC se positionnent toujours les uns sous les autres. Quelques exemples d’éléments ayant un rendu visuel de type BLOC : DIV, P, H1...H6, UL, OL, TABLE, PRE, etc. Rôle – Les éléments BLOCS vont servir à déterminer les structures, comme les titres, les paragraphes, les tableaux, les colonnes de textes, etc. Dimensions – Ils créent toujours une zone rectangulaire et ce rectangle possède ses dimensions propres qui peuvent être indépendantes du contenu texte de l’élément. Ces dimen- @ 119 Expression Web sions sont gérées par les propriétés de règles CSS, telles que « MARGIN » et « PADDING ». Fig. 5.15 Placement de rendu visuel CSS Bloc Type INLINE (en ligne) Dans un flux courant, les éléments de type Inline se suivent. Les éléments de type « EN LIGNE » s’enchaînent les uns à la suite des autres. Quelques exemples d’éléments ayant un rendu visuel de type INLINE : PAN, EM, STRONG, IMG, BR, INPUT, etc. Rôle – Les éléments de type INLINE servent donc surtout à apporter un enrichissement en termes de style ou décoration, tels un soulignement, un gras, un lien hypertexte, ou un élément vide comme le SPAN. Dimensions – Leurs dimensions dépendent uniquement du contenu texte. Fig. 5.16 Placement de rendu visuel CSS Inline @ 120 Chapitre 5. Mises en boîtes : les blocs Les éléments peuvent s’imbriquer les uns dans les autres Les éléments de type BLOC peuvent s’emboîter suivant le principe des poupées russes, mais il n’y a jamais de chevauchement. 1er cas > CORRECT : l’élément DIV contient un élément paragraphe, un élément tableau et un autre élément DIV, qui contient lui-même un titre et un paragraphe Tutoriel : ce code est disponible dans le tutoriel « tuto_05_06.htm » dans le dossier « 05_06 ». Le code affiché ci-dessous est un code simplifié par rapport au tutoriel, afin que le listing cidessous soit plus lisible. La tutoriel comporte un peu de contenu pour mieux visualiser les éléments à l’écran dans le navigateur, et tous les éléments ont été entourés d’une bordure de couleur différente, afin de vous permettre de mieux le repérer. Paragraphe titre Second paragraphe Remarquez par la même occasion comme cette manière de formater le code avec les retraits permet de mieux visualiser les emboîtements des éléments les uns dans les autres. 2e cas > INCORRECT : les mêmes éléments mais mal emboîtés Même si à l’écran, ce code qui contient deux grosses erreurs d’imbrication des balises, semble fonctionner, il est sûr que tôt ou tard des dysfonctionnements apparaîtront et leurs effets seront impossibles à prévoir. Tutoriel : ce code est disponible dans le tutoriel « tuto_05_06_incorrect.htm » dans le dossier « 05_06 ». Paragraphe de la partie de votre fichier HTML en cours (position.html), comme sur l’exemple ci-dessous. <style type="text/css"> #flotte { float: right; width: 130px; margin: 1em 1.2em 0.6em 1.5em; padding:1em; border: #000 1px solid; } #relative { position:relative; width:120px; top: 100px; padding: 0.2em; height:25px; border: #000 1px dashed; } 3 Étape 4 : Sauvegardez votre document et lancez un aperçu dans le navigateur de votre choix, vous obtiendrez alors le résultat de la figure 5.18. Vous verrez alors que le petit bloc DIV « relative » a été décalé de 100 pixels à partir de sa position normale dans le flux courant (représenté par la zone rectangulaire grisée de la figure 5.18) et que son espace est bien toujours conservé. @ 125 Expression Web Fig. 5.18 Élément Div en position « relative » 3 Étape 5 : Ajoutez maintenant un bloc qui sera positionné en flux ABSOLUTE et qui sortira par conséquent du flux courant. Ce sera le bloc « absolute1 ». ABSOLUTE: Texte Lorem ipsum Placez ce nouveau bloc dans le code HTML de la page en cours, que vous placerez après le bloc sans nom au sein du bloc « conteneur », comme sur l’aperçu du code suivant : COMMUN -- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisi. Cras placerat metus rutrum velit. Sed dictum, magna id sodales FLOTTE -- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisi. petit DIV relative Cras placerat metus rutrum velit. Etiam venenatis varius dolor. Maecenas augue justo, congue ac, id, mattis a, sapien. Ut eleifend vulputate erat. ABSOLUTE: -----Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisi. Cras placerat metus rutrum velit. eleifend vulputate erat. Fusce faucibus tellus laoreet eros. Ut semper eros id dui. Quis Fusce faucibus tellus laoreet eros. Ut semper eros id dui. Quisque vel odio. Sed tristique mi ac nulla.Etiam venenatis varius dolor. . 3 Étape 6 : Associez maintenant la règle CSS qui correspond au nouveau Div : « absolute1 ». Pour cela, vous trouverez le code css de cette règle, placé dans le fichier « regle-absolute.txt » du répertoire en cours (05_08/start/). Copiez le code puis collez-le après la deuxième règle CSS au sein des balises <STYLE> de la partie @ 126 Chapitre 5. Mises en boîtes : les blocs de votre fichier HTML en cours (position.html), comme sur l’exemple cidessous. <style type="text/css"> #flotte { float: right; width: 130px; margin: 1em 1.2em 0.6em 1.5em; padding:1em; border: #000 1px solid; } #relative { position:relative; width:120px; top: 100px; padding: 0.2em; height:25px; border: #000 1px dashed; } #absolute1 { position:absolute; padding: 1em; border: #000 1px solid; left: 150px; top: 0px; width:200px; height:345px; color: #CC3333 } 3 Étape 7 : Sauvegardez votre document et lancez un aperçu dans le navigateur de votre choix, vous obtiendrez alors le résultat de la figure 5.19. Fig. 5.19 Éléments DIV en position « absolute » et « relative » @ 127 Expression Web Le bloc apparaît positionné sur le bloc sans nom (figure 5.19), puisqu’il est positionné à 0 pixel (top: 0 px) du haut de son conteneur. L’espace qu’il occupait a été récupéré, et les autres blocs se comportent comme si ce bloc « absolute1 » n’existait pas. @ 128 6 Faites preuve de style (CSS) OBJECTIF Les CSS ou feuilles de styles sont désormais intimement liées aux pages HTML, dont elles sont devenues les compagnes indispensables. Avant leur généralisation dans les sites, leur emploi était considéré à tort comme difficile et sans réelle justification. La mise en page par tableaux régnait en maître. Puis, les avantages des CSS ont enfin été reconnus par les acteurs du Web. Expression Web, grâce à ses nombreux outils dédiés aux feuilles de styles, offre dans ce domaine un grand confort de développement et contribue à acquérir de bonnes habitudes en matière de gestion de CSS. En réalité, nous avons déjà commencé à aborder les CSS dans le chapitre précédent avec les conteneurs. Nous allons donc continuer à découvrir les autres avantages qu’offrent les CSS, à travers quelques exemples simples. ••• Principes de base des CSS Les feuilles de styles, nommées aussi CSS pour Cascade Steel Sheet, permettent la mise en forme (mise en styles) des contenus des pages HTML. Elles se présentent sous forme de lignes de code, de type descriptif comme le HTML, mais utilisant une syntaxe spécifique. Elles reposent sur un principe qui leur a donné leur nom, l’héritage (cascade en anglais), qui veut que tout élément « enfant » hérite des caractéristiques définies pour le « parent ». @ 129 Expression Web Cela permet de nombreuses possibilités de combinaisons tout en préservant la légèreté du code. Le but de ce chapitre n’est pas de vous faire un cours complet sur les CSS, de très bons livres existent (voir Annexes) et ce n’est pas en quelques pages que l’on peut faire le tour de la question. Par contre, vous découvrirez comment Expression Web est capable de vous porter une grande assistance pour leur création, leur mise en place et leur gestion. Rappel de quelques mots-clés – Élément – Chaque partie distincte qui compose une page est un élément : un tableau est un élément, un formulaire est un élément, un bloc de texte est un élément. – Bloc – Le bloc est utilisé pour désigner en général un pavé de texte ou de contenu, en opposition au tableau, car le bloc est toujours inclus dans des balises gérées par les CSS telles que les balises , , <SPAN>, - , etc. – DIV – C’est la balise la plus courante pour structurer du contenu. D’ailleurs, on emploie souvent le terme « le DIV » pour désigner un bloc borné par des balises – Conteneur – En général, un conteneur va contenir plusieurs balises.
Les feuilles de style existent depuis 1986, c’est-à-dire depuis une « éternité pour le Web » et pourtant, elles ne sont pleinement utilisées que depuis 4 ou 5 ans par le commun des web designers et web développeurs. Pourquoi ? Car il semblait plus simple et plus rapide à l’époque, pour mettre en forme les pages web, d’appliquer directement ces styles sur les balises HTML, puis d’utiliser à chaque fois des tableaux, que ce soit pour mettre en forme du texte, des images ou des chiffres, ce qui se révèle être une grossière erreur. Mais les habitudes, mêmes mauvaises, étaient prises, et pour ceux qui avaient toujours « fait comme cela », il était difficile de changer. Par ailleurs, pour ne citer que lui, le module de Photoshop, ImageReady (qui a depuis disparu dans la version CS3), permettait la génération automatique de code de ce type, c’est-à-dire à base de tableaux ; un code qu’il était difficile de réutiliser, pas ou peu optimisé, et qui abusait des tableaux au détriment des blocs. ••• Avantages et inconvénients Inconvénients des structures à base de tableaux uniquement Voyons les raisons pour lesquelles cette manière d’écrire du code pour mettre en forme des pages HTML est dépassée : 3 rigidité du code : en collant les styles sur chaque balise HTML, et en utilisant des tableaux, difficile ensuite d’apporter les modifications nécessaires pour une maintenance régulière ou des mises à jour ; @ 130 Chapitre 6. Faites preuve de style (CSS) 3 ralentissement du chargement des pages, car le code de style est rechargé pour chaque page ; 3 manque de puissance des effets de style. Comme nous le verrons dans les chapitres suivants, l’emploi conjoint de L’HTML, des CSS et du JS autorise de nombreux effets de style et d’animation, surtout avec Dreamweaver CS3 pour vous épauler ; 3 complexification inutile du code ; 3 on peut noter que souvent les sites qui n’utilisent pas les CSS abusent alors des mises en pages en tableaux. Ce type de construction est problématique : • au niveau de la sémantique : les tableaux n’ont jamais été prévus pour faire de la mise en forme, mais pour afficher des valeurs numériques ou textes, de type tabulaire ; • d’autre part, le code HTML des pages devient très vite illisible, en raison de l’enchevêtrement des tableaux, et surtout des fusions possibles des colonnes ou des lignes. La modification d’un tel code nécessite beaucoup plus de temps ; • ralentissement d’affichage, car le navigateur a beaucoup plus de travail pour affi- cher des tableaux que pour afficher des blocs DIV. Avantages des CSS et des blocs de type DIV 3 Indépendance code et design : le code CSS est indépendant du contenu, donc le design est dissocié du développement. En d’autres termes, développeur et web designer travaillent en parallèle. Cela entraîne un gain de temps précieux, car les deux parties, développeur et designer, sachant qu’ils vont pouvoir fusionner sans difficulté leur travail, peut démarrer les projets simultanément. 3 Structuration : la mise en page par feuille de styles nécessite une réflexion avant de se lancer tête baissée dans le design et les maquettes du site. Le design sera fait en fonction des possibilités offertes par les CSS. Et c’est d’ailleurs pour cela, qu’il est préférable que ce soit le web designer qui se charge des CSS plutôt que le développeur. Toute cette étude préalable est conduite grâce à l’établissement d’un cahier des charges avec le client, suivi par le « brief creating » que réalise le web designer. Une fois que ce travail de réflexion sur la structure, le design, et l’ergonomie de navigation du site est réalisé, alors peut débuter la partie de création des CSS proprement dite. CSS et structures de pages sont intimement liées. Si avec des tableaux, il est facile de partir à l’aveuglette, cela est impossible avec les CSS. En effet, les positionnements des blocs sont assurés par les CSS. Et c’est justement ces contraintes liées aux CSS qui vont assurer une meilleure lisibilité, un affichage plus rapide, une ergonomie pensée, la prise en compte de l’accessibilité des sites aux handicapés, etc. Des éléments de réflexion qui, certes prennent plus de temps à la conception, mais vous en feront gagner beaucoup au final. @ 131 Expression Web 3 Optimisation : leurs propriétés d’héritage évitent les répétitions de déclaration de style. Ainsi, un bloc enfant hérite des propriétés de taille et de type de police de son parent, ce qui évite de les redéclarer. 3 Référencement : un code propre et bien structuré grâce aux CSS sera toujours mieux référencé qu’un autre code fourre-tout, pour la bonne et simple raison qu’ayant structuré votre site, vous allez forcément utiliser des mots-clés dans les intitulés d’identifications, de classes, de noms de fichiers, etc. nombre d’éléments qui seront retenus par les robots des moteurs de recherche. 3 Puissance : leur champ d’action est immense, puisque cela va du positionnement des titres, blocs de texte ou paragraphes, à la création de menus animés, en passant par le type de police, de taille ou la couleur des textes. 3 Facilité de mise en œuvre : il suffit d’un éditeur de texte comme Notepad pour créer des CSS. Par contre, le fait de bénéficier de Dreamweaver CS3 procure un avantage certain car il permet une meilleure gestion de ces CSS, et évite d’avoir à retenir les syntaxes de ce langage. 3 Poids du code : légères et pratiques car le code CSS peut être : • soit inclus dans une page HTML ; • soit placé dans un fichier externe, fichier qui est ensuite lié par une commande particulière aux pages HTML. Cette dernière solution est généralement envisagée car elle évite, pour des pages possédant des styles identiques, de recharger le code CSS, d'où un gain de temps de chargement. Par ailleurs, plus besoin de redéfinir chaque paragraphe ou titre, une seule déclaration suffit. 3 Universelles : les CSS sont adoptées et reconnues par tous les navigateurs. 3 Multisupport : les CSS s’appliquent indépendamment et spécifiquement à tous les types de support : écran, imprimante, appareil de restitution sonore pour les handicapés, portables… 3 Accessibilité : favorisent l’accessibilité des sites aux handicapés, visuels notamment. Quelques exemples Éviter les déclarations multiples Imaginons que nous voulions que tous les sous-titres de nos pages web soient en rouge et en taille 3. 3 En HTML, vous devriez ajouter à chaque début de sous-titre, défini par une balise , la déclaration de style suivante : Sous-titre en rouge @ 132 Chapitre 6. Faites preuve de style (CSS) Une fois toutes vos déclarations effectuées pour l’ensemble du site, (ah, j’ai oublié de vous préciser, il y avait 548 sous-titres de ce type-là à traiter), votre client vous appelle pour vous signaler qu’en fin de compte, après une énième réunion avec les responsables marketing, ce n’est pas en rouge qu’il souhaite que les sous-titres soient mais en vert et, quitte à changer, « puisqu’on y est », avec des caractères de grande taille plutôt que ceux en taille moyenne ! « Le client est Roi… » dîtes-vous. Oui, mais ce changement d’humeur de votre client ne va pas vous faire plaisir, car il vous faut désormais reprendre une à une toutes les déclarations et les corriger, soit 548 corrections. 3 Avec une CSS, cette mise en styles ne nécessitait qu’une seule déclaration, et donc une seule correction aurait suffi pour effectuer les changements sur les 548 occurrences. La déclaration en CSS : h2 { font-size: medium; color: red;} étant une balise, il est facile de l’atteindre par la CSS, en définissant de nouvelles propriétés pour cette balise, propriétés qui seront alors appliquées à l’utilisation de la balise . Dans notre exemple, après l’accolade ouvrante qui définit le début de déclaration des propriétés pour (lorsque l’on est dans la CSS, la syntaxe de déclaration de propriétés pour la balise s’écrit « h2 », sans les < e t>), nous rencontrons la propriété font-size (agit sur les styles de la police utilisée) avec les attributs medium pour la taille (size) et red pour déclarer une couleur rouge en remplacement du noir par défaut. Il suffisait donc de modifier la CSS de la façon suivante (on passe de la taille medium à large (pour grande taille) et de la couleur red (rouge) à green (verte)) : h2 { font-size: large; color: green;} et le tour était joué. Une déclaration CSS pour tout le site Imaginez que vous fassiez un site d’une cinquantaine de pages dont la moitié des pages auraient une présentation similaire et où seul le contenu changerait. Plutôt que de faire une déclaration de style pour chaque page, vous allez déclarer un fichier CSS commun à toutes ces pages avec une déclaration de lien dans toutes les pages du site, utilisant les mêmes styles. Avantage : il n’y aura qu’un seul fichier de chargé (la feuille CSS) pour mettre en style le site, plutôt que des centaines d’instructions sur chaque balise HTML. Des styles différents suivant les médias de sortie Les navigateurs peuvent charger des feuilles de styles différentes suivant le média de sortie. Il est ainsi évident qu’une page web ne peut pas avoir la même apparence suivant qu’elle est affichée sur un écran de PC de bureau ou un écran de téléphone portable. L’espace de visualisation étant différent, l’ergonomie de navigation se doit d’être modifiée. @ 133 Expression Web Le problème est identique entre la version écran d’un site et sa version papier issue de l’imprimante (de l’internaute). Si votre site comporte de nombreux éléments de décoration, non indispensables à la compréhension du contenu du site, ou si vous avez des fonds noirs un peu partout, il n’est pas forcément nécessaire de vider les cartouches d’encre de vos visiteurs. Ils n’apprécieront pas forcément. Pour cela, vous allez ajouter une feuille de styles destinée à l’impression. Il suffit juste, au moment de la déclaration de la feuille de styles dans la page HTML qui l’appelle, de renseigner le type de média de sortie ; dans notre cas : « print ». Cette feuille de styles ne sera alors appelée que lors d’une impression. ••• Les panneaux de contrôle et de gestion des CSS Expression Web met à votre disposition, trois panneaux pour la gestion des CSS. Pour apprendre à vous en servir, le mieux est encore de le faire à partir d’un tutoriel. Tutoriel 6. 1 – Mise en place de conteneurs Étape 1 Le fichier correspondant à la première étape est « tuto_06_01a.htm ». 3 Créez un nouveau site web (Fichier > Nouveau Site Web > Site Web vide) puis une nouvelle page que vous nommerez « tuto_06_01a.htm ». 3 Dans la partie comprise entre la balise , écrivez le code qui suit : Ceci est un premier titre géré par une balise H2 Ceci est le début du premier paragraphe Ceci est le second paragraphe Ceci est un second titre géré par une balise H2 Rien de bien particulier dans ce code, uniquement du contenu texte. 3 Un premier conteneur qui contient tous les autres. 3 La balise fait partie des balises H1 à H7 qui sont utilisées pour les titres. Par défaut, elles ont des tailles préétablies et sont utiles dans le référencement, puisque @ 134 Chapitre 6. Faites preuve de style (CSS) les moteurs vont logiquement considérer que les éléments contenus dans un titre sont des mots-clés. 3 Puis une succession de balise qui s’enchaînent pour marquer divers paragraphes. (Notez qu’elles provoquent un retour à la ligne.) 3 Et on finit à nouveau par une balise de titre. Deux conteneurs sont identifiés par un ID qui permet de les nommer et, comme nous le verrons, de leur appliquer de manière très précise des règles de style. La figure 6.1 vous montre le résultat que vous devez avoir à l’écran. Fig. 6.1 Visuel de la 1re étape du tutoriel : tuto_06_01a 3 Vous devez avoir de chaque côté de votre espace de code, un panneau traitant des CSS, comme sur la figure 6.2. Si ce n’est pas le cas, allez dans le menu « Volet des Tâches » et sélectionnez : • Propriétés CSS • Gérez les Styles Fig. 6.2 Panneaux de gestion des CSS Étape 2 : Création d’une CLASSE Le fichier correspondant à la première étape est « tuto_06_01b.htm ». @ 135 Expression Web Nous allons à la fois déclarer un nouveau style mais, en même temps, créer un fichier de feuille de styles externe. 3 Dans le panneau « Gérer les styles », cliquez sur le bouton « Nouveau Style ». 3 Vous voyez apparaître la fenêtre de la figure 6.3. Fig. 6.3 Création de la classe « .rouge_souligne » 3 Dans « Sélecteur », tapez le nom de la classe que nous allons créer : « rouge_souligne ». Définition d'une Classe en CSS Une Classe est un ensemble de propriétés CSS (margin, position, color, etc.) définie dans une feuille de style, avec une syntaxe de déclaration du type : .nom de la classe { } Une Classe peut agir sur tout type de balise HTML. Exemples : – contenu – contenu Une Classe peut être utilisée simultanément sur plusieurs balises distinctes d’une même page ou de l’ensemble d’un site, si la CSS qui la contient est présente sur toutes les pages du site. Une Classe peut aussi être ajoutée à une ID, et cumule ainsi les styles qu’elle apporte avec ceux déjà présents dans la déclaration de l’ID. Exemple : contenu. @ 136 Chapitre 6. Faites preuve de style (CSS) 3 Dans « Définir dans », choisissez l’option « Nouvelle Feuille de Styles ». Cette activation va déclencher la création d’un fichier .CSS (la feuille de styles externe l) et sa déclaration de liaison avec votre page HTML. Les deux autres options sont : 3 Page Active : déclenche la création d’une feuille de style interne (le type de CSS que nous avons déjà utilisé dans le chapitre précédent et qui se place entre les balises de la page web). 3 Feuille de style existante : ce sera votre cas, à la prochaine création d’éléments dans cette CSS. Fig. 6.4 Demande de validation de rattachement de la nouvelle CSS externe Expression Web va nommer cette feuille de styles à laquelle vous n’avez pas encore donné de nom : « sans_titre_1.css » 3 À droite du panneau, cochez la case « underline » dans text-decoration (soulignement du texte). 3 Dans la colonne du milieu, cliquez sur la case blanche face à « color » pour y choisir une teinte rouge. 3 Appuyez sur OK pour valider cette déclaration de classe. 3 En haut de votre zone de travail, un onglet « sans-titre_1.css » a dû apparaître. Cliquez dessus pour sélectionner cette feuille de styles que vous venez de créer et enregistrez-la sous le terme : « tuto »_06_01.css ». 3 Expression Web modifiera alors automatiquement la déclaration de lien de cette page CSS avec votre page HTML. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> tuto_06_01 qui va être transformé en : <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> @ 137 Expression Web tuto_06_01 3 Maintenant que la classe a été créée, il faut l’appliquer à un ou des éléments de la page : sur le premier paragraphe, ainsi que sur le second et dernier titre. 3 Notez que la syntaxe est différente que celle utilisée dans la CSS : pour l’appliquer à un élément, on utilise la syntaxe : Ceci est un premier titre géré par une balise H2 Ceci est le début du premier paragraphe Ceci est le second paragraphe Ceci est un second titre géré par une balise H2 3 Admirez le résultat dans la fenêtre « création » ou en laissant la page dans le navigateur (F12). Les éléments subissant la classe apparaissent en rouge et soulignés. Fig. 6.5 Résultat de l’action de la classe « rouge_souligne » Étape 3 : Création d’un ID Le fichier correspondant à la première étape est « tuto_06_01c.htm ». Continuons avec le même fichier, mais cette fois-ci en créant un ID. @ 138 Chapitre 6. Faites preuve de style (CSS) Définition d’un Identificateur ou ID Un ID a un point commun avec la classe car c’est aussi un ensemble de propriétés CSS (margin, position, color, etc.) définies dans une feuille de styles, mais avec une syntaxe de déclaration différente : #nom de l’ID{ } Autre différence notable : un ID ne peut agir que sur une seule balise HTML à la fois.Il est à usage unique. Exemples : – contenu – contenu C’est la même procédure que précédemment. 3 Dans le panneau « Gérez les styles » cliquez sur « Nouveau Style » Fig. 6.6 Création de l’ID « second_paragraphe » 3 Dans le champ « Sélecteur », inscrivez : « #second_paragraphe ». 3 Attention à ce que l’option « Feuille de style existante » dans « Définir dans » soit bien visible et que le nom de la CSS « tuto_06_01.css » soit inscrit à droite. 3 Appliquez les paramètres définis dans la figure 6.6, soit : • la couleur verte ; • l’option « line-through » pour texte barré. @ 139 Expression Web 3 Validez. 3 Sauvegardez la CSS. 3 Visualisez le résultat. 3 Comme vous pouvez le constater, le paragraphe nommé « second_paragraphe » est désormais en vert et souligné. Fig. 6.7 Résultat de l’action de l’ID : « Second_paragraphe » Étape 4 : Action directe sur un sélecteur Le fichier correspondant à la première étape est « tuto_06_01d.htm ». Dernier moyen pour atteindre un élément d’une page HTML et lui appliquer un style : la modification directe de sélecteur. Ainsi, par exemple, nous allons faire une nouvelle déclaration pour le sélecteur H2, ce qui aura pour conséquence de modifier tous les contenus présents entre des balises et qui sont touchés par l’action de la CSS dans le site. Modification de sélecteur Toute balise HTML est capable de recevoir des propriétés de style, qui seront appliquées à toutes les occurrences de cette balise. La syntaxe est la suivante : nom du sélecteur { } Exemples : h2 { } dans ce cas toutes les balises H2 seront atteintes div { } dans ce cas toutes les balises DIV seront atteintes @ 140 Chapitre 6. Faites preuve de style (CSS) Le mode opératoire est identique aux précédents : 3 Cliquez sur « Nouveau Style ». 3 Dans le champ « Sélecteur », inscrivez : « h2 ». 3 Attention à ce que l’option « Feuille de style existante » dans « Définir dans » soit bien visible et que le nom de la CSS « tuto_06_01.css » soit inscrit à droite. Fig. 6.8 Action CSS sur sélecteur H2 3 Appliquez les paramètres définis dans la figure 6.9, soit : • font-size : 25 px (en clair, taille de 25 pixels pour la police utilisée) ; • font_weight: bold (mise en gras). 3 Validez. 3 Sauvegardez la CSS. 3 Visualisez le résultat. 3 Comme vous pouvez le constater, tous les titres H2 ont été modifiés. @ 141 Expression Web Fig. 6.9 Action CSS sur sélecteur H2 Étape 5 : Appliquer un style déjà existant sur une balise Le fichier correspondant à la première étape est « tuto_06_01e.htm ». Si par exemple, nous souhaitons appliquer la classe « rouge_souligne » sur le premier titre : 3 Placez votre curseur dans la fenêtre code sur la balise H2. 3 Cliquez sur l’outil de sélection direct de balises placé au-dessus du code et qui permet de sélectionner une balise et son contenu d’un seul coup, comme le montre la figure 6.10. Fig. 6.10 Outil de sélection directe et globale des balises 3 Une fois que toute la balise est sélectionnée, double-cliquez dans le panneau « Gérez les styles » sur la classe « rouge_souligné ». 3 Automatiquement, Expression Web a rajouté une classe à la balise H2. div id="conteneur"> Ceci est un premier titre géré par une balise H2 @ 142 Chapitre 6. Faites preuve de style (CSS) ••• Gestion des styles Observons maintenant les moyens que nous avons à notre disposition pour gérer les styles : 3 Premièrement, vous remarquerez que le fichier CSS est indiqué comme un lien sur lequel on peut cliquer dans sa déclaration de liaison : tuto_06_01_c Si vous cliquez dessus tout en appuyant sur la touche Control, Expression ouvrira le fichier CSS s’il n’est pas encore chargé et le présentera à l’écran. 3 Deuxièmement, cliquez avec votre curseur sur : Ceci est le début du premier paragraphe 3 Dans le panneau de droite « Appliquez les styles », Expression Web vous présente tous les styles définis et applicables par rapport à la situation de votre curseur (c’est pourquoi, le style du sélecteur H2 n’apparaît pas) (voir figure 6.11). Fig. 6.11 Visualisez les styles @ 143 Expression Web Dans le panneau de gauche, « Propriétés CSS » : Fig. 6.12 Visualisez les règles 3 Cliquez sur « Résumé » pour condenser toutes les propriétés et règles utilisées pour cette balise. 3 Dans la fenêtre du bas, Expression Web présente les propriétés avec leurs attributs spécifiques désormais à cette balise. 3 Par contre, Expression Web va encore plus loin et c’est sans conteste un des services les plus intéressants offerts par Expression Web : si vous placez votre curseur sur : Ceci est le second paragraphe. Vous pouvez remarquer qu’Expression Web vous signale que cette balise subit l’action de deux règles : 3 d’une part la classe « .rouge_souligne » ; 3 et d’autre part, l’ID « second_paragraphe ». Et, dans le panneau du bas, il vous présente la couleur retenue car prépondérante, idem pour le style de texte. En effet, le contenu ne peut pas être à la fois de couleur rouge par la classe et de couleur verte par l’ID. Il existe des règles de priorité et dans notre cas, c’est l’ID qui l’emporte. Donc, le contenu, malgré l’action de la classe, reste vert. @ 144 Chapitre 6. Faites preuve de style (CSS) Fig. 6.13 Visualisez les diverses règles appliquées ••• Détails des propriétés et attributs CSS Ce panneau sert d’une part à la création de nouvelles règles et d’autre part à la demande de modification de règles existantes. Il comporte sur la gauche huit catégories qui regroupent les propriétés les plus courantes des CSS. Cependant, bon nombre des propriétés accessibles dans ce panneau ne fonctionnent qu’avec certains navigateurs. L’emploi de ces propriétés est donc à bannir, la règle étant d’obtenir le maximum de visibilité de vos sites, et donc le maximum de compatibilité avec les navigateurs. Vous trouverez dans les figures suivantes, les vues détaillées des diverses catégories, agrémentées par trois types de symboles que je me suis permis d’ajouter et qui vous conseilleront sur l’emploi de telle ou telle propriété. Ces conseils d’utilisation sont le fruit de mon expérience et sont plutôt destinés aux personnes débutant dans les CSS. Cela leur évitera de se perdre dans la jungle des propriétés « exotiques », rarement utilisées, souvent pour cause d’incompatibilité avec tous les navigateurs modernes. Fig. 6.14 Légende des figures @ 145 Expression Web 3 Police : ce panneau permet de définir les polices, leurs tailles, leurs teintes et leur graisse. Rappelons que les seules polices que vous pouvez vous permettre d’utiliser dans une page HTML sont les polices systèmes les plus courantes, puisque les pages web utilisent les polices du système du visiteur. En d’autres termes, si vous avez créé une police, inutile de l’indiquer ici, le visiteur ne la verra pas. Seul moyen pour vous : en faire une image ou utiliser Flash. Fig. 6.15 Règles applicables aux polices (fontes) Pour définir de nouvelles familles de polices, il faut aller dans les options d’Expression Web : menu Outils > Options de l’Editeur de Pages > Onglet Famille de Polices. Fig. 6.16 Les familles de polices par défaut @ 146 Chapitre 6. Faites preuve de style (CSS) 3 Bloc : utile essentiellement pour gérer l’alignement du texte avec la propriété Align (left, right, center…). Fig. 6.17 Règles de blocs 3 Arrière-plan (Background) : permet de gérer le fond de tout type de bloc, en le remplissant avec une couleur unie ou en y insérant une image, image qui peut ensuite être répétée indéfiniment ou non, en horizontal ou en vertical. Il est également possible de définir son origine en X et en Y. Fig. 6.18 Règles de fonds 3 Bordure : comme son nom l’indique, permet la création de bordure avec l’épaisseur de votre choix, le style de traits (attention toutefois, car certains types de traits ne sont pas reconnus par tous les navigateurs) et la couleur de bordure. @ 147 Expression Web Fig. 6.19 Règles de bordures 3 Encadrés (marges internes et externes) : plus communément appelés règles de boites, ces encadrés sont en fait les marges internes et externes des blocs. Elles sont d’une grande importance dans le positionnement des blocs. Dans le langage courant des web designers, vous entendrez plutôt parler de margin pour marges externes et de padding pour les mages internes, qui sont les termes anglo-saxons. Attention, si vous utilisez IE 6, car il ne gère pas ces marges externes et internes suivant les recommandations internationales, ce qui provoque de gros décalages entre IE6 et Firefox ou Opéra par exemple. Fig. 6.20 Règles d’encadrés (marges internes et externes) 3 Règles de positionnement : catégorie très importante permettant de gérer l’emplacement d’un bloc, notamment si vous décidez de le sortir du flux et de le placer en mode « absolu ». @ 148 Chapitre 6. Faites preuve de style (CSS) Fig. 6.21 Règles de position Vous trouverez dans ce tableau la liste des valeurs autorisées ainsi que leurs propriétés. Valeurs Propriétés static Valeur par défaut des blocs, quand le positionnement n’est pas précisé. Ils laissent les blocs suivre le flux courant. relative Pareil que la valeur « static » à la différence qu’il peut être décalé. L’espace qu’il occupe dans le flux est donc préservé. absolute Retire l’élément du flux. L’espace qu’il occupait dans le flux courant est repris. 3 Règles de disposition : ce volet comporte des règles que j’appellerai « exotiques » car leur emploi n’est vraiment pas courant, hormis les réglages des propriétés float (élément flottant que nous avons vu dans un chapitre précédent), et la règle « visibilité », très utilisée pour masquer certains blocs, notamment dans le cas de CSS destinées à l’impression. Fig. 6.22 Règles de disposition 3 Règles de liste à puces : idéal pour mettre en forme les listes à puces ou à numérotation. Sachez que vous pouvez placer une image de votre choix pour servir de symbole graphique à la puce. Sachez que la plupart des menus de type texte (ceux qui ne sont @ 149 Expression Web pas constitués d’images uniquement ou en Flash mais qui par contre, sont de remarquables indicateurs de mots-clés pour les moteurs de recherche) sont créés grâce aux listes à puces. En fait, dès que vous avez un menu ou une énumération à faire dans une page, pensez « liste à puce ». Fig. 6.23 Règles de liste (liste à puces) 3 Règles de tableaux : les tableaux possèdent quelques propriétés de style propres à leur spécificité, notamment l’espace et la bordure inter-cellules. Fig. 6.24 Règles de tableaux Le saviez-vous ? Le code dans les CSS peut être écrit de deux manières, sous forme standard ou sous forme courte. Exemple avec cette règle qui, dans les deux cas, permet d'afficher le contenu en police Courier de préférence, en corps 18 pixels et en graisse Bold. La première est sous forme standard tandis que la seconde est sous forme courte. Avantage de cette dernière, un code plus concis et, mais c'est une Lapalissade, des fichiers plus légers, ce qui contribue forcément à l'optimisation des temps de chargement et d'affichage du site. #forme_longue { font-family: "Courier New", Courier, monospace; font-size: 18px; font-weight: bold; } #forme_courte {font: bold 18px "Courier New",Courier, monospace;} Vous découvrirez en suivant ce lien, toutes les possibilités de codes CSS abrégés : http://www.peutetreunereponse.net/article-2058728-6.html. @ 150 Chapitre 6. Faites preuve de style (CSS) ••• Les CSS et les navigateurs Il existe une relation très intime entre les feuilles de styles CSS et les navigateurs puisque ces derniers ont en charge d’interpréter la mise en forme décrite par les CSS. Si les propriétés des CSS sont bien définies et standardisées, il n’en va pas de même pour les navigateurs, qui ont chacun leur manière d’interpréter les CSS. Ainsi, il est de notoriété publique que la version 6 d’Internet Explorer avait des manières tout à fait personnelles d’interpréter les CSS, notamment en ce qui concerne les marges intérieures et extérieures. Heureusement, IE7 a en partie corrigé le tir. Il n’en demeure pas moins que des différences subsistent, que l’on ne peut pas toujours corriger par des astuces. Retenez simplement la règle primordiale : votre site doit être visible par le plus grand nombre d’internautes. Cela implique : 3 d’avoir un affichage sans défaut sous Internet Explorer (6 ou 7) sachant que c’est le navigateur le plus répandu ; 3 de faire des CSS optimisées, concises, facilitant la lecture et la mise en valeur du contenu, et respectant les règles d’accessibilité pour les handicapés, règles qui sont parfaitement prises en charge par les navigateurs. Les principaux navigateurs Dans l’ordre de leur pourcentage d’implantation (source février 2008 : http://www.w3schools.com/browsers/browsers_stats.asp) : 3 Sur système Windows : • Firefox v2 (http://www.firefox-download-fr.com/fr.html) (36,5 %) ; • Internet Explorer v7 (22 %) ; • Internet Explorer v6 (30,7 %) ; • Safari v3 (existe aussi en version PC) (http://www.apple.com/fr/safari/) (2 %) ; • Opéra v9 (http://www.opera.com/download/) (1,4 %). 3 Sur système Mac : • Safari ; • Firefox. Quel navigateur utiliser ? Si vous avez ce livre entre les mains, c’est sans doute que vous souhaitez développer un ou des sites, et dans ce cas je vous engage fortement à travailler sous le navigateur Firefox, @ 151 Expression Web pour la bonne et simple raison qu’il peut être agrémenté de dizaines d’extensions (gratuites me semble-t-il à 99,99 %), très utiles et qui représentent, pour un développeur web, une aide précieuse. Par ailleurs, son interprétation des règles CSS est rarement prise en défaut. Quel est le navigateur le plus respectueux des standards du W3C ? Pour tenter de déterminer objectivement quel est le navigateur le plus respectueux des standards du Web (notamment tout ce qui touche à la bonne interprétation des règles de styles et de leurs attributs dans la CSS2), le groupe Web Standards Project (ou WaSP), composé de concepteurs de sites web et soucieux de faire appliquer et respecter les prérogatives du W3C, a créé un test nommé Acid. En 2008, est sortie la version Acid3. À l’issue de ce test, ce sont les navigateurs Opéra et Safari qui remportent la palme suivi par le navigateur qui monte, Firefox2 pour finir par Internet Explorer. Ce qui est paradoxal, mais nous avons l’habitude en informatique, c’est que ce sont les navigateurs les moins répandus qui sont les plus sûrs. J’avoue avoir un petit faible pour Opéra, pour ses qualités justement de respect des normes, et de vitesse d’affichage ; par contre, sur PC, la version de Safari, même si elle a de réelles qualités techniques, souffre d’une interface vraiment triste et pauvre. Cependant, Firefox2, fortement aidé par la qualité et la puissance de ses extensions, reste à mon avis le meilleur navigateur en termes d’outils pour un webmaster ou web designer. Quand à Microsoft et à ses navigateurs, si pendant des années la firme a fait l’impasse sur la qualité de ses navigateurs, on avait senti une tentative d’amélioration avec IE7. On est forcément encore un peu déçu, surtout que les versions d’IE arrivent loin derrière en termes de réussite au test Acid3. Reste que Microsoft a annoncé une version 8 d’Internet Explorer qui, espérons-le, sera meilleure que les précédentes. Cela dit, il n’y a pas que le respect des standards, le look de son interface, l’ergonomie de navigation ou la présence d’extensions pour décider du choix d’un navigateur, il y a aussi et surtout la sécurité qu’il procure ou plutôt l’insécurité, alliée bien sûr aux comportements quelquefois inconscients des internautes. Et de ce côté-là, ce n’est pas gagné ! Internet Explorer version 7 permet également le chargement d’extension, mais outre qu’elles sont dix fois moins nombreuses, elles sont souvent payantes et également moins performantes que celles de Firefox, notamment en ce qui concerne les extensions liées au développement. Astuce : IE6 et IE7 sont dans le même bateau… Bien qu'en théorie le système Windows ne le permette pas, il existe un logiciel qui permet de faire cohabiter sur la même machine, IE6 et IE7 : très pratique quand il s’agit de tester la compatibilité d’un site. Lien de téléchargement : http://tredosoft.com/Multiple_IE. Je vous conseille également d’installer Opéra, car c’est un exemple parfait de navigateur ergonomique, rapide, puissant et efficace. Ne lui manque plus que des extensions. @ 152 Chapitre 6. Faites preuve de style (CSS) Firefox et ses extensions Catalogue des extensions Une fois Firefox installé, voici deux liens vous permettant d’installer les extensions : 3 https://addons.mozilla.org/fr/firefox/browse/type:1 ; 3 http://extensions.geckozone.org/Firefox/. WebDeveloperToolbar Vous y trouverez notamment une extension nommée WebDeveloperToolbar qui, je pense, est indispensable pour mettre au point ses CSS. Version française téléchargeable en suivant ce lien : http://joliclic.free.fr/mozilla/webdeveloper/. Comme son nom l’indique c’est la trousse à outils du web développeur, riche en fonctionnalités. Il y en a une notamment qui autorise la modification en direct dans le navigateur du code CSS (avec sauvegarde et chargement de la CSS). Je vous invite fortement à l’installer, car elle devient vite indispensable. Elle vous évitera des allers-retours incessants entre Expression Web et l’affichage dans Firefox ; vous voulez tester une nouvelle valeur pour un attribut de propriété ? Avec la WebDeveloperTollbar vous le ferez « en live » sous Firefox. Attention, une fois modifiée, n’oubliez pas de sauvegarder votre feuille de style. Firebug Autre extension à mon avis indispensable : Firebug qui est un débogueur évolué vous permettant notamment de modifier le code HTML (mais aussi les CSS) directement dans le navigateur. @ 153 7 Valorisez votre image OBJECTIF Un site web peut difficilement se passer d’éléments multimédias : images, animations, vidéos, habillage sonore ou podcasts pour ne citer que les plus courants. Longtemps, la diffusion de ce type d’éléments sur le Web a été restreinte, restriction due en grande partie aux capacités et aux technologies de diffusion des fournisseurs d’accès. Cela a bien changé, tout du moins en France, il n’y a qu’à voir combien la diffusion (et l’upload) de vidéos est devenue monnaie courante. Vous découvrirez dans ce chapitre les possibilités offertes par Expression Web pour intégrer ces éléments multimédias, y compris ceux issus des nouvelles technologies 2007-2008 de Microsoft, à savoir les objets de type SilverLight, à base de XAML ••• Les images Les images peuvent être « cuisinées » à de nombreuses sauces au sein des pages web et on peut, en gros, les classer en images significatives et images non significatives : 3 Images significatives : • logo d’une entreprise par exemple ou une image illustrant un article et aidant à sa compréhension ; • images qui vont servir à apporter un habillage raffiné (pas toujours malheureu- sement) pour des boutons de liens ou des menus ; • images utilisées à la place de textes pour des menus, des boutons ou des titres. Bien que cela soit vraiment déconseillé car empêchant l’accessibilité du site aux @ 155 Expression Web handicapés et empêchant également un bon référencement naturel, cette technique est utilisée quand l’aspect design ou graphique d’un de ces éléments est primordial ; en effet, les choix de polices de caractères sont limitées sur le Web et il n’y a, hormis en utilisant les technologies Flash ou SilverLight, pas d’autres réels moyens de proposer un équivalent graphique à une police de caractères souhaitée ; • images qui vont permettre d’offrir des moyens de validation comme ces images (nommées captcha) représentant des suites mélangées de chiffres et de lettres, destinées à vérifier que vous êtes bien un humain. 3 Images non significatives (ou décoratives) : • images ou fragments destinés à servir de fond de page ou de conteneur. Bien utilisé, cela se révèle être très pratique et puissant ; • images qui vont remplacer des signes de marquage de texte, comme les puces de listes par exemple. ••• Insertion d’une image La balise HTML permettant l’insertion d’une image est la balise ; remarquez au passage que c’est l’une des rares balises à ne pas nécessiter de balises fermantes. Tutoriel 7.1 – Insertion d’une image dans une page web Le fichier correspondant à ce tutoriel est « tuto_07_01.htm ». 3 Rapatriez et copiez le dossier « media_ch07 » sur votre disque dur. 3 Dans Expression Web, créez un nouveau site et une nouvelle page (ou utilisez le fichier du tutoriel, en recopiant tout le dossier « ch07_01 » d’un coup). 3 Nous allons placer l’image d’un canapé rouge dans la page, au milieu du texte de loren ipsum. 3 Pour cela, placez votre curseur au milieu du contenu texte et cliquez. 3 Allez dans le menu « Insertion >Image > À partir du fichier ». 3 Cliquez et allez chercher dans le sous-dossier « media_ch07 » le fichier image « red_pepper_1pl.jpg ». Importance du « texte alternatif » ou « texte de remplacement » Une fenêtre apparaît vous invitant à renseigner deux champs : 3 le premier champ, « texte de remplacement », permet aux handicapés visuels d’obtenir la description de l’image, par la lecture du « texte de remplacement », au moyen de logiciels spécialisés, qui vont le convertir en écriture braille ou en synthèse @ 156 Chapitre 7. Valorisez votre image vocale. Autre intérêt de ce texte de remplacement : la prise en compte du contenu et donc des mots-clés pouvant s’y trouver par les moteurs de référencement (d’où l’intérêt pour les créateurs de site, de placer des mots-clés dans ces textes). Au niveau du code, il faut placer ces textes de remplacement à la suite de la propriété d’image ALT. Cependant, avec ALT, les textes alternatifs ne seront visibles que sous IE ; pour étendre cette visibilité aux autres navigateurs, il faut doubler ces textes en plaçant cette fois la propriété TITLE (à ne pas confondre avec la balise TITLE qui permet de donner un titre à une page). Pour Firefox et Opéra, ajouter le même texte de remplacement derrière une propriété TITLE, comme vous pouvez le voir dans le code qui suit.
3 le second champ, « description longue », est facultatif, car ne correspondant plus à un usage courant pour la mise en accessibilité. Fig. 7.1 Panneau pour insérer un texte de remplacement Importance du chemin d’accès à l’image En général, lors de la création d’un site, une des bonnes habitudes à prendre est de classer correctement les divers types d’éléments qui seront intégrés dans le site comme les images, les animations Flash ou autres, les vidéos, etc. Par défaut, on crée un sous-dossier « images » dans le dossier du site, qui comme vous vous en doutez est appelé à contenir toutes les images, qu’elles soient de format Gif, JPEG ou autres ; et pareil, pour tous les autres types de médias. Cela dit, pour l’instant, vous avez été chercher l’image dans le dossier que vous aviez recopié de « media-ch07 ». Donc, suivant l’endroit où se trouvait le fichier, voici le code que vous pouvez rencontrer : 3 l’image est dans le dossier « media_ch7 » qui se trouve être extérieur au dossier du site (remarquez les deux points qui précèdent le chemin et qui indiquent qu’il faut sortir du dossier du site pour rentrer dans un autre, pour allez récupérer l’image ;
3 là, vous aviez placé l’image directement dans le dossier du site (en racine du dossier) : @ 157 Expression Web
3 troisième possibilité : vous avez placé tout le dossier « media_ch7 » dans le dossier du site. Remarquez la syntaxe : le nom du sous-dossier dans lequel se trouvent le sousdossier et le nom de l’image.
Si l’image n’est pas dans le dossier ou dans l’un des sous-dossiers de votre site, Expression Web, au moment où vous allez sauver votre fichier HTM, va vous proposer de rapatrier cette image dans votre site. C’est à ce moment, qu’il faut, grâce au panneau qui s’affiche, sauver l’image dans votre dossier « images ». Fig. 7.2 Rapatriement de l’image Ce panneau comporte divers boutons qui vous permettront également de renommer et de changer le type de l’image. Si vous n’avez pas créé de sous-dossier « images », c’est justement le moment de la faire pour y placer l’image transférée. Rappel sur la différence entre liens relatifs et liens absolus Bien que nous ayons déjà évoqué les liens relatifs et absolus dans un chapitre précédent, je pense qu’il est bon de faire un léger rappel, notamment pour comprendre la différence entre ces deux types de liens, dans le cadre courant d’une insertion d’image. Voici un exemple de lien relatif : @ 158 Chapitre 7. Valorisez votre image Et un exemple de lien absolu : Avantage des liens relatifs : Quand vous allez vouloir mettre le site en ligne, vous allez transférer les fichiers vers les disques durs du serveur de l’hébergeur. Soit les pages Htm, les images, etc. Vos pages, comme on vient de le voir, comportent des liens vers des éléments externes. Si vous transférez vos fichiers en copiant tout le dossier du site sur les disques de l’hébergeur, vous allez donc copier les fichiers présents en racine, avec les sous-dossiers contenant les images par exemple. De plus, en transférant tout le dossier, vous allez respecter l’arborescence d’organisation des sous-dossiers internes. Donc, si en local, sur votre poste chez vous, une image est placée « un niveau plus bas (dans un sous-dossier) » que la page Htm qui l’appelle, une fois sur le serveur votre image sera toujours un niveau plus bas que la page qui l’appelle. Et le lien sera donc correct. Ce ne serait pas du tout le cas, si vous inscriviez le lien en absolu : en effet, en local, votre image est sur la partition C, mais qu’en sera-t-il sur un serveur, qui est un ordinateur avec d’énormes et multiples espaces de stockage. Il n’y a aucune chance pour que votre image soit sur une partition C. Donc, l’adresse sera erronée et il y aura une erreur à l’affichage de la page. Par contre, si vous souhaitez placer un lien vers un site partenaire, dans ce cas, vous serez bien obligé de mettre un lien de type absolu, genre http://www. monsite.com. En résumé : On utilise les liens relatifs dès qu’il s’agit de lier des éléments qui sont sur le même espace de stockage, l’espace disque du serveur par exemple. Cela représente la majorité des liens qui composent une page (lien vers une autre partie de la page ou d’une page du site, lien vers une image pour l’afficher, une animation Flash ou SilverLight, une vidéo placée en interne sur le site. On utilise les liens absolus lorsque l’on souhaite faire un lien vers un élément extérieur au site, et c’est en général sous la forme d’une adresse URL. En aucun cas, ne placez de liens absolus faisant référence à une partition, suivie d’un chemin d’accès, etc. Voici le résultat de ce que vous devez obtenir avec l’insertion de l’image « red_pepper_pl1.jpg » au milieu du DIV contenant le texte en loren ipsum. @ 159 Expression Web Fig. 7.3 ••• Insertion de l’image red_pepper_1pl.jpg Modification d’une image Expression Web met à votre disposition une barre d’outils dédiée à la manipulation et à la transformation des images. Attention, les modifications ainsi apportées aux images sur le contraste, la couleur, la taille ou la transparence obligent bien sûr Expression Web à modifier physiquement l’image. Une fois la transformation effectuée, et tant que vous n’avez pas sauvegardé la page, rien ne se passera. Par contre, lorsque vous tenterez de voir le résultat dans le navigateur (il déclenche une sauvegarde dans ce cas), ou lorsque vous sauvegarderez la page, Expression Web vous demandera ce qu’il doit faire, avec l’ouverture de la même fenêtre que précédemment. Libre à vous de sauvegarder l’image avec le même nom, de la renommer ou de la mettre dans un autre dossier, mais attention à ce que les liens restent viables. Tant que vous n’avez pas sauvegardé, vous pouvez toujours revenir à l’état initial de l’image par un clic sur le dernier bouton placé à droite de la barre d’outils. Fig. 7.4 Rétablissement image d’origine @ 160 Chapitre 7. Valorisez votre image La barre d’outils « Image » Fig. 7.5 Barre d’outils « image » 1. Insertion d’une image. 2. Création d’une miniature de l’image ; utile dans certains cas, pour les diaporamas ou pour illustrer un tableau de produits par exemple. 3. Dessus-dessous : cette notion est liée à une propriété CSS que possèdent les blocs, celle de pouvoir avoir un niveau de visibilité si on les empile. Cet indice est nommé Z-index. Très employé au début du Web, cette méthode est depuis plus ou moins abandonnée pour des raisons de compatibilité entre les navigateurs. Néanmoins, rien ne vous interdit de l’utiliser, à bon escient. 4. Applique un effet de miroir horizontal ou vertical à l’image. 5. Contraste : un clic sur l’une de ces icônes déclenche une modification du gradient de contraste. 6. Luminosité : idem que pour contraste. 7. Rogner : provoque l’apparition d’une mire de découpe qui vous permet de modifier la taille de l’image. Attention, ce n’est pas une modification de la taille par une diminution du nombre de pixel par objets, mais d’une découpe dans l’image. C’est-àdire que l’image est vraiment rognée, sans que les éléments figurés soient modifiés en taille. Dans l’exemple qui suit, en délimitant avec la mire de découpe ce tracé, il ne restera plus, au final, que le fauteuil central. Tutoriel 7.2 – Modifier une image en place dans la page Le fichier correspondant à ce tutoriel est « tuto_07_02.htm ». 3 Insérez une nouvelle image « red_pepper_all.jpg » à la suite de la première. 3 À l’aide de l’outil « rognage », faites une découpe sur le fauteuil central afin qu’il reste seul à l’écran : • cliquez sur l’image pour la sélectionner ; • choisissez « rogner » dans la barre d’outils images ; • une mire avec des poignées apparaît. Redimensionnez-la pourqu’elle ne com- prenne que le fauteuil central ; @ 161 Expression Web • validez ; • à ce moment, une fenêtre apparaît pour vous demander comment enregistrer la nouvelle image ainsi créée ; • choisissez « Renommez » et ajoutez le terme « _cut » à la fin de son intitulé. Fig. 7.6 Poignées de découpe de l’image pour la rogner 8. Transparence : il est souvent nécessaire de créer une transparence dans les images servant à l’habillage des pages, tout du moins pour les images qui contiennent des courbes et/ou qui n’ont pas des bords nets et tranchés. En effet, quand vous les créez, vous le faites en général sur un fond blanc. Donc, tant que vous êtes sur un fond blanc, tout va bien. Si maintenant vous changez la couleur de fond, en noir par exemple, et que vous supprimez le fond blanc intégré dans vos images, le résultat ne va pas être très joli. Vous allez voir apparaître des pixels blancs sur votre fond noir. Pour éviter cela, il faut créer un dégradé entre le bord des images et la couleur noire. Tous les logiciels de retouche photo comme Photoshop, Gimp, sont capables de générer ce dégradé. Mais pour que cela soit réalisable, encore faut-il que le format de l’image le permette. Seuls deux formats l’autorisent : • le GIF et le PNG (8 bit), mais ce sera au détriment du nombre de couleurs dis- ponibles, puisque vous serez limité alors à 256 couleurs, ce qui est ridicule par rapport au 16 millions autorisées en JPEG. Mais tout se paye ! • le PNG 24 bit. Avec ce format, vous aurez à la fois 16 millions de couleurs, mais également la transparence, et non pas une transparence sur une seule couleur comme avec le GIF, mais sur toutes les couleurs puisque ce format possède une couche alpha. Malheureusement, le PNG24 n’est pas supporté par les navigateurs. Dommage, le monde est bien injuste, ne trouvez-vous pas ? @ 162 Chapitre 7. Valorisez votre image Conclusion : pour gérer la transparence, il faut le faire en Gif ou PNG 8 bit, et avec uniquement 286 couleurs. C’est donc plutôt réservé aux dessins, aplats, etc. non aux photos. Si vous tentez de gérer cette transparence avec la barre d’outils, Expression Web vous prévient qu’il va devoir passer l’image en format GIF. Fig. 7.7 Alerte sur la modification de format En fait, si vous continuez l’essai (en n’oubliant pas de changer la couleur de fond du DIV par une propriété insérée dans la règle « style1 » : background-color : black ;, vous vous rendrez compte que le résultat n’est pas excellent. Il vaut mieux réaliser ces travaux de modifications d’images dans un logiciel spécialisé comme Photoshop par exemple. 3 Modification de couleurs : • mise en noir et blanc ; • mise en mode filigrane. 9. Plaque : création d’un pseudo-cadre en relief autour de l’image. Fig. 7.8 Une première zone est définie, avec la fenêtre demandant la cible du lien 10. Zone réactive : cet outil peut se révéler très pratique en termes de navigation, notamment sur des cartes, des plans ou des montages photos comme dans notre cas. On nomme également cette méthode, le mapping. Elle permet de définir des zones réactives sur une image, c’est-à-dire des zones qui pourront comporter un lien et @ 163 Expression Web permettre d’envoyer vers un autre élément, une autre page ou carrément un autre site. Il est possible de définir autant de zone que l’on veut : le tout est que lorsque vous commencez à tracer une zone, vous pensiez à la fermer. Au moment de la fermeture d’une zone, Expression Web vous demandera alors vers quel élément cette zone doit conduire. Le tutoriel 7.3 vous montrera le résultat final (fichier tuto_07_03.htm). Fig. 7.9 Faire du multizones avec trois zones de définies <map name="FPMap0" id="FPMap0"> <area href="tuto_07_01.htm" shape="polygon" coords="67, 43, 23, 65, 15, 92, 25, 141, 57, 184, 285, 182, 323, 115, 321, 59, 261, 46" /> <area href="tuto_07_02.htm" shape="polygon" coords="369, 68, 338, 92, 332, 144, 338, 178, 386, 180, 524, 181, 547, 134, 548, 71, 511, 50, 446, 45, 373, 65" /> <area href="tuto_07_03.htm" shape="polygon" coords="599, 12, 588, 76, 574, 135, 578, 178, 594, 196, 630, 197, 706, 198, 712, 137, 694, 41, 679, 2, 603, 8" />
Le code produit, montre bien les coordonnées pour chaque point des zones créées ainsi que les cibles des liens. Ainsi, si vous affichez le tuto « tuto_07_03.htm » en cliquant sur le premier canapé vous serez redirigé vers la page tuto_07_01.htm (voir les titres H1 qui changent), et ainsi de suite. ••• Utilisation des images en tant que fond d’élément Il s’avère souvent très pratique de prendre une image pour s’en servir de fond, dans le cas par exemple d’habillages latéraux des pages (un exemple de cette utilisation est présent dans le tutoriel de création d’un site que je vous ai préparé et qui est disponible en téléchargement sur la page associée à cet ouvrage sur le site dunod.com). Autre utilisation présente également, la décoration de fonds de boutons. Les exemples sont nombreux et cette @ 164 Chapitre 7. Valorisez votre image méthode offre de nombreux avantages dont la protection (sommaire j’en conviens, mais protection quand même) des images, et surtout le fait de pouvoir simplement placer du texte au-dessus d’images. Dernier avantage, le poids : au lieu de placer une image pleine page qui pourrait peser jusqu’à 100 Ko, on va en découper une petite partie, qu’il suffira ensuite de dupliquer en x et ou y. Tutoriel 7.4 – Insertion d’un background image Le fichier correspondant à ce tutoriel est « tuto_07_04.htm ». On utilise la propriété « background » pour lier une image pour servir de fond au conteneur, mais également pour la faire se répéter si besoin. On rajoute donc ceci dans la règle CSS : background-image: url('images/fond_image_ch07_base.jpg'); background-repeat: repeat; ce qui peut aussi s’écrire en forme condensée : background: url('images/fond_image_ch07_base.jpg') repeat; Dans notre exemple, le fait de ne pas préciser la valeur x ou y après « repeat » provoque une répétition du motif à la fois sur l’axe X et sur l’axe y. Ayant placé cette propriété background dans la classe « style1 » qui ne s’applique qu’au DIV ayant l’id « couche1 », seul ce conteneur possède donc ce background. Pour rendre la lecture plus facile, vous pouvez également ajouter la propriété « color » avec l’attribut « white » afin de mettre le texte contenu dans le DIV en blanc. color: white; Fig. 7.10 Mise en place d’un background image @ 165 Expression Web ••• Utilisation des images dans une liste à puces Tutoriel 7.5 – Création d’une liste à puces graphiques Le fichier correspondant à ce tutoriel est « tuto_07_05.htm ». Pour créer une liste à puces, l faut utiliser deux types de balises HMTL : 3 la première : qui déclare l’énumération (la liste) dans sa globalité ; 3 les secondes qui déclarent chaque item de la liste. Donc, il y a autant de balise LI que d’items. Il faut user et abuser des listes à puces dès que vous avez une énumération à faire ou également un menu (on en verra également un exemple dans le tutoriel de construction d’un site). Vous trouverez dans le dossier media_ch7, deux images en .gif « puces_small.gif » et « puces_big.gif » que vous pourrez utiliser pour servir de puces graphiques. Remarquez que comme pour les images, je les ai ensuite transférés dans le dossier « images ». Code HTML Au niveau du code HTML, il n’y a rien de bien compliqué : 3 un premier bloc délimité par les balises H1 pour le titre : Page TUTO_07_05 3 puis un second bloc à base de DIV et qui contient les trois listes à puces : 3 une première déclaration basique de liste à puces, avec trois balises LI, donc trois items : - Puce un
- Puce deux
- Puce trois
3 suivent deux autres listes à puces, indépendantes les unes des autres, avec également chacune trois items. Seules différences, elles supportent toutes les deux une classe « small » pour la seconde et « big » pour la dernière, classes qui vont déterminer le style de ces items et de leurs puces associées. @ 166 Chapitre 7. Valorisez votre image - Puce un
- Puce deux
- Puce trois
- Puce un
- Puce deux
- Puce trois
CSS intégrée <style type="text/css"> 3 Un premier ID qui positionne le conteneur DIV en position absolue : #couche1 { position: absolute; width: 515px; height: 512px; left: 128px; top: 59px; } 3 première classe .small avec la propriété LIST qui comporte plusieurs paramètres possibles, dont le type de puces ou l’image pour remplacer les puces : .small { list-style-image: url('images/puces_small.gif'); list-style-position: outside; } 3 seconde classe .bih, qui diffère de la classe précédente par l’image de puces qui n’est pas la même : .big{ list-style-image: url('images/puces_big.gif'); list-style-position: outside; } .big li{padding: 10px 0;} @ 167 Expression Web Fig. 7.11 ••• Puces graphiques dans une liste à puces Insertion d’objets Flash (v2 uniquement) Pour insérer un objet Flash, que ce soit une animation, un objet Flash audio, ou une vidéo, le mode opératoire est le même, mais il est nécessaire de travailler avec la version 2 d’Expression Web. (À l’heure de la rédaction de cet ouvrage, je ne dispose que d’une version 2 en langue anglaise, ce qui explique pourquoi certaines copies d’écrans ne sont pas francisées) Tutoriel 7.6 – Insertion d’objets flash Le fichier correspondant à ce tutoriel est « tuto_07_06.htm ». 3 Allez dans le menu « Insertion > Media > Flash. 3 Indiquez l’objet Flash à insérer et rapatriez-le dans un sous-dossier de votre site. Fig. 7.12 Insertion d’un objet Flash @ 168 Chapitre 7. Valorisez votre image Une fois que votre Flash est inséré, vous pouvez : 3 le modifier en taille, en cliquant dessus (bouton gauche) pour faire apparaître les poignées de redimensionnement ; 3 en cliquant droit, vous ferez apparaître un menu contextuel, avec notamment la possibilité de faire jouer le Flash directement dans la fenêtre de création d’Expression Web. Fig. 7.13 Diverses actions possibles sur l’objet Flash inséré dans la page HTML ••• Insertion d’objets SilverLight (v2 uniquement) Tutoriel 7.7 – Insertion d’objets SilverLight Le principe est exactement le même que pour insérer un objet Flash. Seule différence, un objet SilverLight « voyage moins léger » car il représente à lui tout seul un dossier comprenant quelques fichiers. 3 Pour insérer l’objet SilverLight, positionnez votre curseur dans le DIV. 3 Allez dans le menu « Insertion > Media > SilverLight. 3 Un message va alors apparaître vous invitant à indiquer le dossier dans lequel se trouvent les éléments servant à visualiser l’objet SilverLight. @ 169 Expression Web Fig. 7.14 Recommandations avant l’insertion d’un objet SilverLight 3 Indiquez le dossier dans lequel se trouvent les fichiers. Je vous recommande vivement de recopier l’ensemble du dossier « SILVER » qui contient l’objet SilverLight dans son intégralité dans le dossier de votre site. <script type="text/javascript" src="Silverlight.js"> <script type="text/javascript"> function createSilverlight() { SilverLight.createObject( "monObjet.xaml", document.getElementById("monControle"), "monControleID", {width:'640', height:'480', inplaceInstallPrompt:false, background:'#FFFFFF', isWindowless:'false', framerate:'24', version:'0.9'}, {onError:null, onLoad:null}, null ); } <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> JM's SilverLight Test Page » et se terminent par Partie entièrement modifiable Partie entièrement modifiable ./… Partie entièrement modifiable Partie entièrement modifiable Cette partie a désormais été modifiée dans la page issue du modèle car elle est dans une zone modifiable, mais pas le paragraphe au-dessus, qui est dans une zone non éditable. Pellentesque habitant .../... eget arcu. Page MAITRE TUTO 10_01.DWT Pellentesque habitant …/… eget arcu. etc.. Comme c’est indiqué en gras dans le listing ci-dessus, les données XML prendront place dans le conteneur div id="centre". @ 206 Chapitre 10. Passerelles avec Visual Studio Étape 2 : Intégration des données XML dans la page ASP.NET Occupons-nous des données XML. Expression Web vous permet de les visualiser directement dans son interface. Pour les faire apparaître, allez dans le menu « Volet de tâches > bibliothèques de sources de données ». Cela va avoir pour effet de faire apparaître le panneau de données à droite. (Figure 10.15). Expression Web vous présente le seul fichier XML qu’il possède dans son dossier. Cliquez dessus et faites afficher les données Fig. 10.14 Panneau de source de données Fig. 10.15 Détails des données XML Vous pouvez également, dans le panneau « Fichiers » à gauche, double-cliquer sur le fichier « MesDonnees.xml », ce qui permettra de l’ouvrir dans Expression Web. Ci-dessous le début du fichier XML avec son entête. @ 207 Expression Web <nom>Canap' Paris - Champs Elysées Tous les jours sauf dimanche de 10h à 18h 205, avenue des Champs Elysées 75008 Paris 0140404040 0140404041 <email>[email protected] images/paris_c-e.gif Magasin spécialiste du cuir <nom>Canap' Paris - Montparnasse Tous les jours sauf dimanche et lundi de 10h à 18h 13, rue de Rennes 75015 Paris 0140505050 3 etc. Dans le panneau précédent « bibliothèque », glissez-déposez le fichier « MesDonnees.xml » à l’emplacement du code, où les données doivent s’intégrer, c’est-à-dire dans la balise DIV « centre ». Voici le résultat (fichier tuto_10_02_b.aspx) : Fig. 10.16 Intégration des données brutes issues du fichier XML @ 208 Chapitre 10. Passerelles avec Visual Studio Étape 3 : Mise en style des données XML 3 En haut à droite du tableau qu’Expression Web a créé pour intégrer les données XML, cliquez sur la petite flèche, qui permet d’intervenir sur les données (Figure 10.18). Fig. 10.17 Interventions sur les données intégrées Cliquez sur « Propriétés de la vue de données » (figure 10.19) et indiquez le fichier « Mes Donnees.XSL » comme fichier de style XML pour « Mes Données ». Fig. 10.18 Désignation du fichier de styles XML Ce fichier XSL, une fois chargé et lié à ce fichier XML, va permettre de formater la présentation des données. Le résultat final est visible dans le fichier « tuto_10_02_c.aspx ». @ 209 Expression Web Fig. 10.19 La page Boutique terminée, avec son contenu XML formaté @ 210 11 Gérez l’hébergement de votre site OBJECTIF Une fois un site terminé, encore faut-il qu’il puisse être accessible facilement, rapidement et partout dans le monde. C’est le rôle des hébergeurs, sociétés commerciales disposant de machines serveurs sur lesquelles sont hébergés les sites et capables de diffuser le contenu de ces sites sur le réseau web. Nous passerons en revue les divers éléments dont il faut disposer pour gérer l'hébergement d'un site, qu'il soit statique ou dynamique. ••• L’accès au réseau Internet Cet accès vous est fourni par un fournisseur d’accès ou provider. Il en existe de nombreux en France, dont certains spécialisés pour les entreprises. Quelques providers font également office d’hébergeur. Cet accès au réseau Internet est bien sûr indispensable, notamment pour atteindre par FTP le serveur de votre site se trouvant chez l’hébergeur. @ 211 Expression Web ••• L’hébergement du site Il est assuré par un hébergeur : c’est-à-dire une société située en France ou à l’étranger, disposant de structures informatiques adaptées à ce type d’activité et, hébergeant sur ses ordinateurs (serveurs) vos fichiers HTML, CSS, JS, bref tout ce qui compose votre site. Les hébergeurs proposent en général plusieurs types de contrat d’hébergement, suivant que vous souhaitiez une machine unique, dédiée à votre site, ou une machine partagée entre plusieurs sites. Autres éléments qui interviennent dans le choix du contrat d’hébergement, le trafic prévu pour votre site et l’environnement logiciel installé sur le serveur. Ainsi, si vous développez en PHP, il faudra que le serveur possède l’environnement logiciel adapté pour travailler en PHP. Idem pour du .NET ou du ColdFusion. Par contre, si votre site utilise l’ASP.NET, alors il est nécessaire que l’hébergeur dispose de l’environnement DOTNET et d’un serveur Web Microsoft pour héberger votre site. Attention, les tarifs ne sont pas les mêmes mais ce n’est bien sûr pas le seul critère à prendre en compte pour établir son choix. Les autres critères sont : 3 l’espace de stockage alloué ; 3 la bande passante (le débit autorisé par l’installation de l’hébergeur) ; 3 le trafic journalier autorisé ; 3 le nombre de bases de données autorisées ; 3 le nombre de boîtes mail ; 3 la qualité de l’interface de gestion, les services divers (statistiques…) ; 3 la qualité de ses installations matérielles (puissance électrique, sécurité des données) ; 3 la qualité de son support technique et sa disponibilité. ••• Le nom de domaine Le nom de domaine peut être comparé à une enseigne. C’est lui qui apparaîtra dans l’URL (l’adresse) d’accès à votre site. Ces noms de domaine s’acquièrent pour une période déterminée auprès d’organismes certifiés nommés des Registar (ou Registrar). Seul le titulaire du nom de domaine peut en disposer durant cette période de temps. De plus, il a priorité pour racheter, sur une nouvelle période, le même nom de domaine. Passée la date anniversaire, le nom de domaine redevient disponible. C’est pourquoi les Registars vous préviennent des échéances de renouvellement. @ 212 Chapitre 11. Gérez l’hébergement de votre site Par exemple, « dunod.com » est un nom de domaine, tout comme « dunod.fr », mais ces deux noms de domaine sont distincts, même si les deux s’appellent « dunod », car leurs extensions sont différentes. Un hébergeur peut-être également Registar, mais ce n’est pas obligatoire. L’acquisition des noms de domaine est soumise à des règles. D’une part, il faut que ce nom de domaine soit disponible, d’autre part, il faut que vous ayez les droits au niveau de la propriété intellectuelle sur le nom de l’enseigne (dans le cas de noms de domaine .com par exemple), que votre activité s’accorde avec l’extension choisie (.org est par exemple réservé aux associations), ou que votre nom de famille vous y autorise (M. Dupont peut par exemple se porter acquéreur de dupont.fr). Quand vous prenez un nom de domaine pour une enseigne, il peut se révéler judicieux de se porter également acquéreur des noms ayant une écriture approchante et, si vous prenez un .com, de prendre par la même occasion le .fr si vous êtes sur le territoire français. ••• Le transfert des fichiers vers le serveur Ce transfert est le plus souvent effectué grâce à un logiciel que l’on nomme Client FTP. Un Client FTP est un logiciel qui vous permet de transférer des fichiers vers un ordinateur distant (le serveur) et inversement. Le terme FTP signifie File Transfer Protocol. Ce transfert se déroule donc suivant un protocole établi. Dans le cas d’un hébergeur qui vous fournit l’adresse du serveur pour mettre en place un accès FTP, cet accès est sécurisé par un nom d’utilisateur (login) et un mot de passe (password). Il existe de nombreux logiciels Client FTP sur le marché, dont l'un des plus connus et des plus fiables est FileZilla (logiciel libre). Cependant, Expression Web possède son propre client FTP pour vous permettre de faire les transferts de fichiers (dans les deux sens). Transférer les fichiers de son site vers l’hébergeur Au moment de la signature du contrat avec votre hébergeur, celui-ci vous a donné une adresse FTP pour atteindre le serveur sur lequel vont être disposés les fichiers de votre site, mais également un login et un mot de passe, sésames indispensables pour avoir accès à votre espace réservé. 3 Pour atteindre cet espace sous Expression Web, il faut d’abord vous placer dans la fenêtre « Site Web Distant » (figure 11-1). Dans notre exemple, nous avons pris le dossier ch07. @ 213 Expression Web Fig. 11.1 Onglet donnant accès à la zone de transfert de fichiers 3 Lorsque c’est la première fois que vous tentez de vous connectez, un message dans la fenêtre vous invite à cliquer sur « Propriétés du site Web distant » pour paramétrer les protocoles de transferts. 3 Quatre options vous sont proposées dans le nouveau panneau qui apparaît : Fig. 11.2 Choix du type de transfert 3 Choisissez la seule qui vous intéresse pour transférer des fichiers vers les serveurs de votre hébergeur : FTP. Renseignez les deux champs du bas, vous invitant à inscrire l’adresse FTP fournie. Le champ de répertoire est facultatif mais si vous le connaissez, autant l’inscrire, ce qui vous évitera des erreurs de transfert ultérieures. @ 214 Chapitre 11. Gérez l’hébergement de votre site 3 Un nouveau panneau vous demande alors votre login et mot de passe. Fig. 11.3 Paramètres d’accès à votre espace serveur 3 Une fois la connexion établie, vous devez voir apparaître une fenêtre avec, dans la colonne de gauche, votre espace fichier LOCAL (sur votre poste) et à droite l’espace distant sur le SERVEUR. 3 Vérifiez dans l’espace serveur, que vous êtes bien dans le dossier destiné à recevoir le site. 3 Sélectionnez, dans l’espace LOCAL, les fichiers et dossiers destinés à être copiés vers le serveur, puis cliquez sur la flèche de transfert (de la gauche vers la droite). Un panneau indiquant le transfert en cours s’affiche. Fig. 11.4 Transfert des fichiers en cours @ 215 Expression Web 3 Si le transfert s’est bien effectué, votre fenêtre doit présenter dans la partie droite, serveur, les fichiers et dossiers désormais présents sur le serveur de l’hébergeur. Fig. 11.5 Transferts terminés ; colonne de gauche, l’espace Local, et colonne de droite, l’espace Serveur. 3 Il ne vous reste plus qu’à tester votre site en ligne. @ 216 12 Le référencement OBJECTIF Le référencement est l'Art et la Méthode permettant à un site Internet d'être rapidement et facilement visible par les internautes du monde entier, en réponse à une requête de leur part sur un sujet choisi, représenté par un ou des mots-clés. Un référencement réussi commence à la conception du site, comme nous le verrons dans ce chapitre. ••• Les modèles liés aux CSS Tout le travail de référencement consiste à utiliser des techniques tendant à faire apparaître le site dans les premiers résultats affichés par un moteur de recherche. Les principaux moteurs de recherche en termes d’audience d’utilisation sont Google et Yahoo. Leurs méthodes pour référencer les sites (c’est-à-dire classer les sites en termes de pertinence par rapport à une recherche de mots-clés) n’ont jamais été réellement divulguées mais l’expérience et les constatations empiriques ont permis néanmoins d’établir des règles à respecter pour favoriser ce référencement. Il existe schématiquement deux types de référencement : 3 le référencement naturel ; 3 le référencement payant. @ 217 Expression Web Le référencement naturel Le référencement naturel désigne la méthodologie à suivre, et les règles à appliquer, pour que les moteurs de recherche puissent indexer l’ensemble de vos pages, statiques et dynamiques. Il y a souvent eu dans le passé, des abus concernant ce référencement naturel ; certains petits malins inventant des procédés qui induisaient les moteurs en erreur. C’est un jeu dangereux car si la supercherie est découverte, les moteurs de recherche risquent de vous mettre sur liste noire et, dans ce cas, votre site n’apparaîtra plus pendant de longs mois, dans les résultats induits par une requête. Des robots informatiques (petits logiciels qui analysent votre site) font office d’agents recenseur pour les moteurs de recherche qui les envoient. Ces robots passent périodiquement et font de temps en temps une grande remise à niveau (c’est ce que l’on appelle la Google Dance). Aussi, est-il judicieux de constamment mettre à jour son site et de le faire intelligemment. Un référencement réussi tient avant tout : 3 au bon sens et à l’honnêteté : adéquation entre mots-clés, contenus, navigation et nom de domaine ; 3 et à la qualité du code : • ergonomie de structure et de navigation ; • respect strict de la syntaxe et emploi des conteneurs et des CSS ; • prise en compte des règles d’accessibilité ; • mises à jour régulières ; • suivi de la vie du site : étude des statistiques de fréquentation, étude des chemins intrasites suivis par les internautes, étude de l’origine des visiteurs (par quel canal ont-ils connu votre site ? Moteur de recherche, liens directs, etc.). 3 à la patience et à la persévérance dont on fait preuve pour améliorer son référencement. Le référencement est une méthode empirique au départ, puisque les responsables de ces sociétés (Google, Yahoo…) n’ont jamais réellement dévoilé les formules qu’ils utilisent pour réaliser ces indexations. Cependant, au fil du temps et l’expérience aidant, des règles se sont dégagées que l’on soupçonne préférables d’appliquer pour d’une part être référencé, d’autre part améliorer son référencement de base, et aussi éviter d’être black-lister (terme barbare évoquant une radiation d’un site des listes d’indexations et cela durant une période variable) ; ce black-listage intervient quand manifestement, vous avez, aux yeux de ces sociétés, essayez de tricher pour apparaître mieux placé que ce que vous auriez dû être. Très bien, sauf qu’en toute bonne foi, vous pouvez être black-listé, sans avoir eu l’intention de tricher, mais parce que vous pensiez que la technique que vous utilisiez pourrait vous être @ 218 Chapitre 12. Le référencement profitable. Donc, un conseil, renseignez-vous avant de tenter des opérations novatrices dans ce genre de domaine ; il existe quelques règles à respecter au minimum. Ces règles semblent à peu près communes à tous les moteurs. Quelques règles simples pour améliorer son référencement 3 Contenu : qualité et adéquation de celui-ci avec les mots-clés. C’est sans doute le plus important. Les moteurs de recherche deviennent de plus en plus puissants et perspicaces. Il faut donc insister sur la qualité des contenus car, désormais, ce sont eux qui permettent un bon référencement. 3 Titre : renseignez le titre (balise <TITLE>). Certainement un des éléments les plus appréciés par les moteurs. Et surtout l’adéquation entre titre et contenu. 3 Textes alternatifs des images (balises et <TITLE>) : voir chapitre 7, paragraphe Insertion d’une image. 3 Menus en mode texte avec des balises (évitez les images) en CSS. 3 Augmentez le nombre de liens avec des partenaires vers leur site (surtout s’ils sont bien référencés). 3 Le nom de domaine peut également avoir une grande importance. 3 Disponibilité des mots-clés et fréquence d’utilisation : plus vous êtes dans un domaine à la mode ou recherché, plus il sera dur d’apparaître bien placé. 3 Déclarations : tous les moteurs de recherche vous proposent sur leurs sites un formulaire permettant de déclarer l’existence de votre site. Même si, de toute façon, les robots passeront voir votre site, déclaration faite ou pas, remplissez-la. Cela ne peut pas faire de tort, bien au contraire. 3 Les métatags : très utilisé au début, elles sont de moins en moins utiles pour les moteurs de recherche (à cause, justement, des abus dans le passé). Néanmoins, il est préférable de continuer à les placer et à les documenter. <meta <meta <meta <meta name="description" content="x xxxxx"> name="author" content="xxx"> name="keywords" content="xxxx,xxxxx,xxxx"> name="date" content="2005-03-16"> 3 À utiliser avec discernement : • Sites en Flash : pendant longtemps, les moteurs de référencement étaient inca- pables de référencer les sites faits en full-flash (créés uniquement en Flash), car ils ne pouvaient rentrer dans le code pour dégager les mots-clés. Depuis quelques mois, cela n’est plus vrai : Google sait désormais lire les mots-clés dans les fichiers .SWF (flash) à condition que ces textes soient de type statique et non pas dynamique. C’est une avancée majeure dans le référencement des sites. @ 219 Expression Web • Sites en Silverlight : cette technologie est trop nouvelle pour l’instant pour avoir suffisamment de recul par rapport au référencement. Cependant, il semblerait que les mots-clés placés dans les fichiers XML qui seraient utilisés pour la construction des objets SilverLight soient pris en compte par les moteurs. 3 À éviter absolument : les sites à base de frames (cadres) : les moteurs de recherche sont incapables de les indexer correctement. Le référencement payant 3 Soit il s’agit d’utiliser les services d’une société spécialisée dans le référencement, en essayant de vous faire garantir le résultat. 3 Soit il s’agit de l’achat d’emplacements pour y déposer un lien vers votre site. 3 Ne pas négliger non plus les annuaires professionnels, dans lesquels vous payez un droit d’apparition. Toutes ces techniques sont cumulables. @ 220 Annexes ••• Liens Validateurs HTML 3 Validateur HTML du W3C :http://validator.w3.org 3 Validateur HTML du WDG (Web Design Group) : http://htmlhelp.com/tools/validator/ 3 Validateur HTML du WWW (Word Wibe Web) : http://jigsaw.w3.org/css-validator/ Validateurs CSS 3 Validateur CSS du W3C : http://jigsaw.w3.org/css-validator/ 3 Validateur CSS du WDG : http://htmlhelp.com/tools/csscheck/ Validateurs de liens 3 Validateur de liens du W3C : http://validator.w3.org/checklink Validateurs d’accessibilité 3 Validateur de règles d’accessibilité : http://validateur-accessibilite.apinc.org/index.php Validateurs multifonctions 3 Validateur multifonctions : http://www.proze.net/outils/validation-site.html @ 221 Expression Web Simulateurs 3 Simulateur visites robots : http://www.proze.net/outils/robot.html Logiciels pour la création de sites Éditeurs de code 3 Expression Web : http://www.microsoft.com/france/expression/expression-web/ 3 Dreamweaver CS3 : http://www.adobe.com/fr/products/dreamweaver/ 3 Nvu : http://www.nvu.com/ 3 Kompozer : http://www.kompozer.net/ Développement de sites dynamiques 3 EasyPHP : • Présentation : http://www.easyphp.org/ • Installation : http://www.easyphp.org/telechargements.php3 3 .Net : http://msdn2.microsoft.com/fr-fr/asp.net/bb330941.aspx 3 ColdFusion : http://www.adobe.com/fr/products/coldfusion/ Éditeurs de texte 3 Notepad2 : http://www.flos-freeware.ch/ 3 PsPad : http://www.pspad.com/fr/ Générateur de contenus-textes de type latin « Bolo-bolo » pour simulation 3 http://www.lipsum.com/ Navigateurs 3 Internet Explorer 7 : http://www.microsoft.com/downloads/search.aspx?displaylang=fr 3 Firefox : http://www.firefox-download-fr.com/fr.html • Extensions Firefox : https://addons.mozilla.org/fr/firefox/browse/type:1 http://extensions.geckozone.org/Firefox/ • Extension WebDevelopperToolBar pour Firefox : http://joliclic.free.fr/mozilla/webdeveloper/ 3 Opéra : http://www.opera.com/download/ 3 Safari : http://www.apple.com/fr/safari/ @ 222 Annexes Articles et tutoriels en ligne Articles généraux sur les langages HTML, XHTML, CSS, JavaScript, XML, HTML dynamique, PHP... 3 http://www.w3.org/Style/Examples/011/firstcss.fr.html 3 http://fr.selfhtml.org/ 3 http://openweb.eu.org/ 3 http://css.alsacreations.com/ (CSS essentiellement) Exemples de sites en full CSS 3 http://www.csszengarden.com/ Article sur l'écriture de code CSS abrégé 3 http://www.peutetreunereponse.net/article-2058728-6.html Articles divers 3 Sur les règles de ponctuation : http://www.interpc.fr/mapage/billaud/ponctua.htm 3 Sur l’ergonomie des sites web : http://www.ergolab.net/ Tables et penses-bêtes divers 3 Balises HTML (en anglais) : http://www.w3.org/TR/html401/index/elements.html 3 Spécifation HTML 4.01 (français) : http://www.la-grange.net/w3c/html4.01/cover.html Feuilles de styles CSS (traduction française) 3 Spécification CSS1: http://www.yoyodesign.org/doc/w3c/css1/index.html 3 Spécification CSS2 : http://www.yoyodesign.org/doc/w3c/css2/cover.html Caractères particuliers en HTML espace Á Á accent aigü á á a accent aigü Â Â A accent circonflexe â â a accent circonflexe à à a accent grave é é e accent aigü ê ê e accent circonflexe è è e accent grave @ 223 Expression Web ô ô o accent circonflexe ö ö o tréma ¶ ¶ paragraphe ¿ ¿ ? inversé » » double flèche droite « « double flèche gauche ° ° degré ‰ ‰ pour mille ′ prime ″ seconde ∞ ••• Infini ± ± plus ou moins
supérieur à ¼ ¼ fraction 1/4 ½ ½ fraction 1/2 ¾ ¾ fraction 3/4 Glossaire HTML Pour compléter vos connaissances en HTML, vous trouverez ci-dessous plusieurs listings de balises accompagnées de leurs attributs. Ces balises sont classées selon leur cas d’utilisation dans l’élaboration d’une page web. Au cours de lévolution du HTML, beaucoup de balises et dattributs sont venus compléter la version 1.0. Ces différents lexiques correspondent à la version actuelle du HTML : 4.01. Conseil : utilisez les moteurs de recherche Internet pour obtenir des indications sur la fonctionnalité de tel ou tel attribut lié à la balise HTML. Balises et attributs présents à l’ouverture d’une page vierge HTML dans Dreamweaver La colonne « Conditions d’utilisation » vous informe du bon emploi de telle ou telle balise. En effet, même si certaines balises existent bien dans le panel disponible, elles ne sont pas ou plus forcément reconnues par les navigateurs modernes. Par ailleurs, lorsque le terme « Préférez CSS » apparaît, cela signifie qu’il est préférable d’utiliser les règles et propriétés CSS pour avoir cet effet de style. @ 224 Annexes Propriété Attributs Conditions d’utilisation Déclare le type de document web et sa version. align ; color ; noshade ; size ; width Obligatoire Définit le début de la page HTML. version Obligatoire Définit l’en-tête de la page HTML. profile Obligatoire Crée les métadonnées qui renseignent le moteur de recherche sur la page à référencer. Content ; name ; http-equiv ; scheme Conseillé <meta> Définit le titre de la page HTML. Définit le corps de la page HTML. Obligatoire alink ; background ; bgcolor ; link ; Obligatoire onload ; onunload ; text ; vlink Balises et attributs pour formater du texte Propriété Attributs Conditions d’utilisation Définit le texte en gras. Préférez CSS Augmente la taille de la police de 1 point. Inemployé Met en forme une citation en créant une marge à gauche. cite Crée un saut de ligne. clear Fait clignoter le texte (avec Netscape et Firefox). Crée un glossaire (encadré avec la balise ). Encadre un glossaire (créer avec la balise ). <em> Définit une unité de mesure de caractère. Cette unité est surtout employée dans les feuilles de style. Définit l’aspect général du texte. Préférez l’utilisation des conteneurs de type « bloc » Déconseillé color ; face ; size à Définit un titre avec des niveaux de 1 à 6. align Définit le texte en italique. Définit un élément de liste (encadré avec les balises
| |