1 Présentation de l'espace de travail

Transcription

1 SUPPORT DE COURS 1 Présentation de l'espace de travail Configuration d'un site Dreamweaver Création d'une nouvelle page web Gestion des fichiers du site Pour ouvrir un fichier : Pour créer un nouveau dossier : Pour supprimer un fichier ou un dossier : Pour renommer un fichier ou un dossier : Pour déplacer un fichier ou un dossier : Mise en forme de la page avec des tableaux Pour insérer un tableau : Sélection d'éléments de tableau Mise en forme de tableau Mise en forme avec le mode «mise en forme» Utilisation des cadres pour la mise en forme Création d un jeu de cadre Modification d un jeu de cadres Changer le contenu des cadres avec les liens hypertextes Insertion de contenu dans la page web Propriétés de la page Insertion et mise en forme du texte Les styles CSS Insertion d'images dans la page web Insertion de liens hypertextes Insertion d'objets Flash dans la page Insertion de comportements JavaScript Transfert des fichiers du site sur Internet Hébergement Configuration du site distant Transfert FTP Notions HTML Référencement Préparation des pages web pour le référencement Inscription du site dans les annuaires et les moteurs de recherche Liens dédiés au référencement et à la promotion du site

2 1 Présentation de l'espace de travail Sous Windows, Dreamweaver propose une présentation intégrée en une seule fenêtre. Dans l'espace de travail intégré, toutes les fenêtres et tous les panneaux sont rassemblés dans une grande fenêtre d'application. Barre d'insertion Inspecteur propriétés Fenêtre document Panneau fichiers La fenêtre de document affiche le document actif. Vous pouvez choisir parmi les modes d'affichage suivants : Mode Création (Dans menu Affichage : Choisissez Affichage Création.): environnement de création pour la mise en forme visuelle des pages, l'édition visuelle et le développement rapide d'applications. Dans ce mode, Dreamweaver affiche une représentation visuelle entièrement modifiable du document, similaire à la représentation de la page sur un navigateur. C est le mode à privilégier quand on débute avec Dreamweaver. Mode Code (Dans menu Affichage : Choisissez Affichage Code.) : environnement de codage manuel pour rédiger et modifier du code HTML ou tout autre type de code. Mode Code et Création (Dans menu Affichage : Choisissez Affichage Code et création.) : environnement mixte affichant les modes Création et Code du document dans une même fenêtre La barre de titre de la fenêtre affiche le titre de la page, et, entre parenthèses, le chemin et le nom de fichier du document. Dreamweaver affiche un astérisque à la suite du nom de fichier si des modifications ne sont pas encore enregistrées. En plein écran, des onglets s'affichent en haut de la zone de la fenêtre de document indiquant les noms de fichier de tous les documents ouverts. Pour passer à un autre document, cliquez sur son onglet. 2

3 2 Configuration d'un site Dreamweaver Un site Web est un ensemble de documents et d'actifs liés les uns aux autres et partageant des attributs, par exemple une rubrique connexe, une conception similaire ou un même objectif. Outil logiciel de création et de gestion de sites, Macromedia Dreamweaver 8 permet de réaliser des sites Web complets, en sus de documents individuels. Pour créer un site Web, la première étape consiste à le planifier. Pour obtenir des résultats optimaux, concevez et planifiez la structure de votre site Web avant de créer les pages dont il sera constitué. L'étape suivante consiste à configurer Dreamweaver de façon à pouvoir travailler sur la structure basique du site. Si vous disposez déjà d'un site installé sur un serveur Web, vous pouvez utiliser Dreamweaver pour le modifier. Un site Dreamweaver vous permet d'organiser tous les documents associés à un site Web. L'organisation de vos fichiers dans un site vous permet d'exploiter Dreamweaver pour télécharger votre site sur le serveur Web, suivre et gérer automatiquement vos liens, puis gérer et partager les fichiers en équipe. La bonne organisation des fichiers est essentielle pour une gestion efficace de votre site. Tous les fichiers qui composent le site sont réunis sous un dossier, et ce dossier contient uniquement ces fichiers. Définissez un site pour tirer le meilleur parti des fonctions offertes par Dreamweaver. Un site Dreamweaver se compose de trois parties, ou dossiers, selon votre environnement de travail et le type de site Web que vous développez : Le dossier local représente votre répertoire de travail. Dreamweaver désigne ce dossier comme votre «site local». Il peut se trouver sur un ordinateur local ou sur un serveur de réseau. Il s'agit de l'endroit dans lequel sont stockés les fichiers en cours de développement de votre site Dreamweaver. Pour définir un site Dreamweaver, il vous suffit de créer un dossier local. Pour transférer des fichiers vers un serveur Web ou pour développer des applications Web, vous devez également ajouter des informations concernant un site distant et un serveur d'évaluation. Le dossier distant est le répertoire dans lequel sont stockés les fichiers, selon votre environnement de développement, que vous réservez aux tâches suivantes : évaluation, production, collaboration, etc. Dreamweaver désigne ce dossier comme votre «site distant» dans le panneau Fichiers. Ces deux dossiers (local et distant) vous permettent de transférer des fichiers entre votre disque local et un serveur Web, ce qui facilite la gestion des fichiers sur vos sites Dreamweaver. Le dossier Serveur d'évaluation est l'emplacement dans lequel Dreamweaver traite les pages dynamiques. Pour configurer un site Dreamweaver, dans le menu, choisissez Site puis Gérer les sites. La boîte de dialogue Gérer les sites s'affiche. Cliquez sur le bouton Nouveau. La boîte de dialogue Définition du site s'ouvre. Procédez ensuite de l'une des manières suivantes : Cliquez sur l'onglet Elémentaire pour utiliser l'assistant de définition de site qui vous guide tout au long de la procédure. répondez aux questions qui apparaissent à l'écran, puis cliquez sur Suivant pour passer à l'étape suivante du processus de création, ou cliquez sur Retour pour revenir à l'écran précédent. Cliquez sur l'onglet Avancé pour utiliser les paramètres avancés qui vous permettent de définir individuellement le dossier local, le dossier distant et enfin le dossier d'évaluation, selon vos besoins. (mode réservé aux utilisateurs avertis) 3

4 3 Création d'une nouvelle page web Vous pouvez sélectionner le type de document vierge que vous souhaitez créer. Pour créer une nouvelle page, dans le menu, choisissez Fichier> Nouveau. La boîte de dialogue Nouveau document s'affiche. Sélectionnez l'une des catégories suivantes dans la liste : Page de base, Page dynamique, Modèle, Autre ou Jeux de cadres. Sélectionnez ensuite le type de document que vous souhaitez créer dans la liste de droite. Par exemple, sélectionnez Page de base pour créer un document HTML. Cliquez ensuite sur le bouton Créer. Le nouveau document s'ouvre alors, dans la fenêtre de document. Enregistrez ce document, en prenant soin de bien choisir le dossier et le nom du fichier. Vous voyez le nouveau fichier dans le panneau Fichiers (pour afficher ce panneau choisissez Fichier dans le menu Fenêtre. 4 Gestion des fichiers du site Pour votre plus grand confort, utilisez les fonctionnalités du Panneau de Fichiers de Dreamweaver (les différentes liaisons entre les fichiers seront mises à jour en cas de modification). Pour ouvrir le panneau de fichiers, choisissez Fichiers dans le menu Fenêtre. 4.1 Pour ouvrir un fichier : Recherchez et sélectionnez le fichier à ouvrir. Double-cliquez sur l'icône du fichier. Le fichier s'ouvre dans la fenêtre de document de Dreamweaver. 4.2 Pour créer un nouveau dossier : Sélectionnez le dossier, (dans le panneau Fichiers), dans lequel vous allez créer le nouveau dossier. Cliquez avec le bouton droit de la souris, puis sélectionnez Nouveau fichier ou Nouveau dossier. Saisissez le nom du nouveau fichier ou dossier. Appuyez sur la touche Entrée pour valider. 4.3 Pour supprimer un fichier ou un dossier : Sélectionnez le fichier à supprimer dans le panneau Fichiers. Cliquez avec le bouton droit de la souris, puis choisissez Supprimer. 4.4 Pour renommer un fichier ou un dossier : Dans le panneau Fichiers, sélectionnez le fichier ou le dossier à renommer. Cliquez avec le bouton droit de la souris sur l'icône du fichier, puis sélectionnez Renommer. Saisissez le nouveau nom à la place du nom existant. Appuyez sur la touche Entrée pour valider. 4.5 Pour déplacer un fichier ou un dossier : Dans le panneau Fichiers, sélectionnez le fichier ou le dossier à déplacer. Faites glisser le fichier ou le dossier vers son nouvel emplacement. Actualisez le panneau Fichiers pour afficher le fichier ou le dossier à son nouvel emplacement. (Cliquez sur le bouton Actualiser dans la barre d'outils du panneau Fichiers). 4

5 5 Mise en forme de la page avec des tableaux Les tableaux sont très utiles pour présenter des données tabulaires et mettre en forme du texte et des images simplement, dans une page. Un grand nombre de concepteurs utilisent des tableaux pour mettre des pages Web en forme. Macromedia Dreamweaver 8 offre deux méthodes pour afficher et modifier les tableaux : le mode Standard, dans lequel les tableaux sont présentés comme une grille de lignes et de colonnes, et le mode Mise en forme, qui permet de dessiner, redimensionner et déplacer des rectangles sur la page tout en continuant d'utiliser les tableaux comme structure sous-jacente 5.1 Pour insérer un tableau : Dans la fenêtre Création du document, placez le point d'insertion à l'endroit où vous voulez que le tableau apparaisse. Dans le menu, choisissez Insertion puis Tableau. La boîte de dialogue Tableau s'affiche. Complétez les options de cette boîte de dialogue. Puis cliquez sur OK pour valider votre choix. 5.2 Sélection d'éléments de tableau Pour sélectionner un tableau entier, cliquez dans le coin supérieur gauche du tableau, sur le bord supérieur ou inférieur du tableau ou sur une ligne ou une bordure de colonne. Pour sélectionner une ou plusieurs lignes ou colonnes : Positionnez le pointeur sur le bord gauche d'une ligne ou le bord supérieur d'une colonne. Lorsque le pointeur se transforme en flèche de sélection, cliquez pour sélectionner une ligne ou une colonne (faites-le glisser pour sélectionner plusieurs lignes ou colonnes) 5.3 Mise en forme de tableau Vous pouvez ensuite changer les propriétés des zones (tableau, colonne, ligne ou cellules...) sélectionnées en utilisant l inspecteur de propriétés. Il est aussi possible d utiliser un modèle de mise en forme pour formater un tableau : 5

6 Sélectionnez le tableau Dans le menu, choisissez Commandes et Formater le tableau. La boîte de dialogue Formater le tableau s'affiche. Personnalisez les options selon vos besoins. Cliquez sur Appliquer ou sur OK pour valider votre choix. Pour les autres modifications du tableau (ajout, suppression ou fusion de cellules, changement de taille...), utilisez le menu Modifier Tableau. Imbrication de tableaux : Un tableau imbriqué est un tableau à l'intérieur d'une cellule d'un autre tableau. Vous pouvez le mettre en forme comme n'importe quel tableau, mais sa largeur est limitée par la largeur de la cellule dans laquelle il se trouve. 5.4 Mise en forme avec le mode «mise en forme» Pour simplifier l'utilisation de tableaux pour la mise en page, Macromedia Dreamweaver 8 met à votre disposition un mode Mise en forme. En mode Mise en forme, vous pouvez créer votre page en utilisant des tableaux comme structure sous-jacente, tout en évitant certains problèmes qui surviennent souvent lors de la création de pages réalisée à partir de tableaux à l'aide de méthodes traditionnelles. Pour passer en mode Mise en forme, dans le menu, choisissez Affichage, Mode Tableau puis Mode Mise en forme. Remarque : Vous ne pouvez pas passer du mode Code au mode Mise en forme. Pour dessiner un tableau de mise en forme : Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Tableau de Mise en forme. Le pointeur se change en réticule (+). Placez ensuite le pointeur sur la page, puis faites-le glisser pour créer le tableau de mise en forme. Pour dessiner une cellule de mise en forme : Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Dessiner la cellule de mise en forme. Le pointeur se change en réticule (+). Cliquez à l'endroit où vous souhaitez placer la cellule sur la page, puis faites glisser le pointeur pour créer la cellule. Vous pouvez insérer du contenu uniquement dans une cellule de mise en forme et non dans une zone vide (grise) d'un tableau, c'est pourquoi vous devez créer des cellules de mise en forme avant d'ajouter du contenu. Il est possible, dans ce mode aussi, d imbriquer des tableaux. 6

7 Dans l'inspecteur Propriétés, vous pouvez définir différents attributs pour votre tableau et vos cellules de mise en forme, notamment la largeur et la hauteur, la couleur d'arrière-plan et l'alignement du contenu. 7

8 6 Utilisation des cadres pour la mise en forme Les cadres permettent de diviser une fenêtre du navigateur en plusieurs zones, chacune d'entre elles pouvant afficher un document HTML distinct. En règle générale, un premier cadre affiche un document avec des commandes de navigation tandis qu'un autre cadre affiche un document avec le contenu principal. La partie d'une fenêtre du navigateur pouvant afficher un document HTML indépendamment de ce qui apparaît dans le reste de la fenêtre constitue un cadre. Un jeu de cadres est un fichier HTML qui définit la mise en forme et les propriétés de plusieurs cadres, dont le nombre, la taille et l'emplacement des cadres, ainsi que l'adresse de la page qui s'affiche initialement dans chaque cadre. Le fichier du jeu de cadres ne contient pas de contenu HTML qui s'affiche dans un navigateur, il fournit simplement au navigateur des informations sur la mise en forme d'un jeu de cadres et les documents qu'il doit afficher. L'exemple suivant présente une mise en forme de cadre contenant trois cadres : un cadre étroit qui contient la barre de navigation dans la partie latérale, un cadre en haut du document contenant le logo et le titre d'un site Web et un grand cadre avec le contenu principal qui occupe le reste de la page. Chacun de ces cadres affiche un document HTML distinct. Dans cet exemple, le document affiché dans le cadre supérieur ne change jamais lorsque les visiteurs consultent le site. La barre de navigation du cadre latéral contient des liens qui, lorsqu'ils sont activés, modifient le contenu du cadre principal, mais pas le contenu du cadre latéral. Le cadre de contenu principal à droite affiche le document correspondant à tous les liens activés par le visiteur dans la partie gauche. Un cadre n'est pas un fichier. On pourrait croire que le document affiché dans un cadre fait partie intégrante de ce dernier, mais ce n'est pas le cas. Le cadre contient le document. Tout site affiché dans un navigateur sous forme d'une page unique constituée de trois cadres contient en fait au moins quatre documents HTML, à savoir le fichier du jeu de cadres et les trois documents qui incluent le contenu et sont initialement affichés dans les cadres. Lorsque vous concevez une page à l'aide de jeux de cadres dans Dreamweaver, vous devez enregistrer chacun de ces quatre fichiers pour que la page s'affiche correctement dans le navigateur. 8

9 6.1 Création d un jeu de cadre Après avoir défini la mise en page souhaitée pour le site, la première étape consiste à créer tous les documents qui seront affichés par le jeu de cadres. Si on prend l exemple précédent (avec 3 cadres), il faut donc créer la page de titre, la page de menu et la page de contenus. Les jeux de cadres prédéfinis dans Dreamweaver, vous permettent de sélectionner facilement le type de structure que vous voulez créer. Pour créer un jeu de cadres prédéfini : Choisissez Fichier dans le menu, puis Nouveau. Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Jeux de cadres. Sélectionnez un jeu de cadres dans la liste Jeux de cadres. Cliquez sur Créer. Le jeu de cadres apparaît dans votre document. (validez le nom des cadres). Pour remplir un cadre (tous les cadres devront être remplis) : Sélectionnez le cadre souhaité (cliquez dans le cadre et voyez le curseur clignoté). Dans le menu, choisissez Ouvrir dans un cadre. Sélectionnez le fichier à faire apparaître dans le cadre sélectionné. Puis validez par OK A cette étape, pensez à enregistrer l ensemble : dans le menu Fichier choisissez Enregistrer tout (le jeu de cadres peut prendre le nom de cadres.html). 6.2 Modification d un jeu de cadres Lorsque le jeu de cadres est créé, il convient de le modifier pour ajuster la taille des différents cadres, pour modifier certaines propriétés des cadres mais aussi pour créer les liens vers les différentes pages à afficher. Utilisation du panneau de cadres : Choisissez Cadres dans le menu Fenêtre. Ce panneau vous permet de sélectionner un cadre d un simple clic. Quand un cadre est sélectionné, on peut changer ses propriétés : son nom, ses bordures et ses marges, son mode de défilement... Pour changer la taille d un cadre, le plus simple, c est d afficher les bordures de cadres : choisissez Assistances visuelles dans le menu affichage, puis bordures de cadres. Il suffit ensuite de positionner la souris sur un bordure de cadre et de faire glisser pour agrandir ou diminuer un cadre. 9

10 6.3 Changer le contenu des cadres avec les liens hypertextes. Pour ouvrir un document dans un cadre à partir d un lien, il faut définir ce lien, mais aussi la cible, c'est-à-dire là où le document va s ouvrir. Par exemple, si la barre de navigation se trouve dans le cadre gauche et que vous voulez afficher le document lié dans le cadre de contenu principal à droite, vous devez définir le nom de ce dernier comme la cible de chacun des liens de la barre de navigation. Lorsqu'un visiteur cliquera sur un lien de navigation, le contenu spécifié s'ouvrira dans le cadre principal. Pour créer un lien avec une cible : Sélectionnez le texte ou l image dans la barre de navigation. Choisissez le fichier à atteindre par le lien Définissez la cible (en général le cadre principal ex : MainFrame) On trouve des cibles prédéfinies dans la liste déroulante : _blank ouvre le document lié dans une nouvelle fenêtre du navigateur sans toucher à la fenêtre courante. _parent ouvre le document lié dans le jeu de cadres parent du cadre dans lequel figure le lien, en remplaçant tout le jeu de cadres. _self ouvre le lien dans le cadre en cours, en remplaçant le contenu de ce cadre. _top ouvre le document lié dans la fenêtre du navigateur courant, en remplaçant tous les cadres. Reproduisez la même opération pour tous les liens de votre barre de navigation (de votre menu). 7 Insertion de contenu dans la page web 7.1 Propriétés de la page Pour chaque page que vous créez dans Dreamweaver, vous pouvez spécifier les propriétés de mise en forme. Pour afficher ces propriétés, choisissez Propriétés de la page dans le menu Modifier. Cette boîte de dialogue permet de spécifier la famille et la taille par défaut de la police, la couleur d'arrière-plan, les marges, le style des liens ainsi que d'autres aspects de la conception de page. Vous 10

11 pouvez attribuer de nouvelles propriétés à chaque nouvelle page que vous créez et modifier celles des pages existantes. Une des propriétés à renseigner est le titre de la page, qui s affichera ensuite dans la barre de titre du navigateur. (voir le chapitre qui concerne le référencement) 7.2 Insertion et mise en forme du texte Pour insérer du texte dans une page web, il suffit de se positionner là où le texte doit apparaître (le curseur clignote) puis de taper le texte (ou de le coller s il vient d un autre document). Il est ensuite possible de mettre le texte en forme comme dans un traitement de texte. Lorsque le texte est sélectionné, sa mise en forme est choisie à l aide de la fenêtre des propriétés (pour afficher cette fenêtre, choisir Propriétés dans le menu Fenêtre). Les différentes mise en forme sont automatiquement enregistrées dans le document sous forme de style CSS (Cascading Styles Sheets) par Dreamweaver. Il est donc judicieux aujourd hui d utiliser ces styles CSS. Les styles CSS offrent aux concepteurs et développeurs Web un meilleur contrôle de l'aspect de la page Web tout en proposant des fonctions qui permettent d'améliorer l'accessibilité et de réduire la taille des fichiers. Les règles CSS sont intégrées au document au fur et à mesure que vous mettez votre texte en forme ou que vous faites appel à des styles intégrés de Dreamweaver. Vous pouvez ainsi plus facilement réutiliser les styles existants et nommer ceux que vous créez. CSS est aujourd'hui la méthode la plus utilisée pour mettre en forme textes et pages Web. Remarque : Il existe aussi un vérificateur d'orthographe dans Dreamweaver (Maj + F7) 7.3 Les styles CSS Pour réutiliser et gérer les styles CSS, Dreamweaver propose une fenêtre qui rassemble toutes les fonctionnalités liées à ces styles CSS. A partir de cette fenêtre, vous pourrez créer un style, modifier un style, supprimer un style, attacher une feuille de style à la page web... Pour afficher cette fenêtre, choisissez Styles CSS dans le menu Fenêtre. 11

12 Attacher une feuille de style Nouveau style Modifier le style Pour créer un nouveau style CSS : Placez le point d'insertion dans le document Dans la fenêtre Styles CSS, cliquez sur le bouton Nouvelle règle CSS Définissez le type de style CSS souhaité : Pour créer un style personnalisé applicable en tant qu'attribut class à une plage ou un bloc de texte, choisissez l'option Classe, puis entrez le nom du style dans la zone de texte Nom. Pour redéfinir la mise en forme par défaut d'une balise HTML spécifique, choisissez Balise, puis entrez une balise HTML dans le champ Balise ou choisissez en une dans le menu déroulant. Pour définir la mise en forme d'une combinaison particulière de balises ou de toutes les balises contenant un attribut Id spécifique, choisissez Utiliser le sélecteur CSS, puis entrez une ou plusieurs balises HTML dans le champ Sélecteur ou choisissez en une dans le menu déroulant. Les sélecteurs (appelés sélecteurs de pseudo-classe) disponibles dans le menu déroulant sont a:active, a:hover, a:link et a:visited. Sélectionnez l'emplacement dans lequel définir le style : Pour créer une feuille de style externe, choisissez Nouveau fichier feuille de style. (ce choix permet ensuite d'attacher cette feuille aux pages web de votre site Pour incorporer le style dans le document actif, choisissez Seulement ce document. Cliquer sur OK. La boîte de dialogue Définition du style s'affiche. Choisissez les options du style CSS. Lorsque les attributs de style sont choisis, cliquez sur OK. Pour modifier un style CSS Dans la fenêtre Styles CSS, cliquez sur le bouton Modifier le style La boîte de dialogue Définition du style s'affiche. 12

13 Modifiez les options du style CSS. Lorsque les attributs de style sont choisis, cliquez sur OK. Pour appliquer un style CSS : Dans la fenêtre Styles CSS, cliquez sur le style à appliquer avec le bouton droit de la souris Choisissez Appliquer dans le menu contextuel Pour attacher une feuille de style : Dans la fenêtre Styles CSS, cliquez sur le bouton Attacher une feuille de style Utilisez le bouton Parcourir si besoin pour choisir la feuille de style souhaitée. Cliquez sur OK. 13

14 7.4 Insertion d'images dans la page web Différents types de formats d'images existent, mais trois d'entre eux sont généralement utilisés dans les pages Web : GIF, JPEG et PNG. Actuellement, les formats de fichiers GIF et JPEG sont les formats les mieux pris en charge et peuvent être visualisés par la plupart des navigateurs. Important : Pour réduire le temps de téléchargement et être sûr que toutes les instances de l'image sont affichées aux mêmes dimensions, utilisez une application de retouche d'image pour adapter les proportions et la résolution de l'image. Pour insérer une image : Placez le point d'insertion à l'endroit où doit apparaître l'image dans la fenêtre de document. Choisissez Image dans le menu Insertion (il est possible d'utiliser le bouton de la barre d'outils) Dans la boîte de dialogue qui s'affiche, naviguez dans l'arborescence pour sélectionner l'image à insérer. Cliquez sur OK. Remarque : Tant que le document sur lequel vous travaillez n'a pas encore été enregistré, Dreamweaver crée automatiquement une référence d'emplacement de fichier de type file://. Lorsque vous enregistrez le document sur le site, Dreamweaver convertit cette référence en indiquant un chemin relatif au document. 7.5 Insertion de liens hypertextes Pour créer des liens, il est indispensable de comprendre le chemin d'accès qui s'établit entre le document à partir duquel un lien est établi et le document pointé par ce lien. Chaque page Web possède une adresse unique, appelée URL (Uniform Resource Locator). Cependant, lorsqu'un lien local est créé (entre deux documents du même site), il n'est pas nécessaire en général de spécifier l'url complète du document vers lequel le lien est créé; il est préférable d'indiquer un chemin relatif, à partir du document actif ou de la racine du site. Remarque : il n'y a jamais d'espace dans une URL Il existe plusieurs types de liens hypertextes : Un lien local, vers une page du site, qui permet la navigation au sein du site web. Un lien vers un site externe qui permet une sortie vers Internet. Un lien vers un autre document ou fichier, tel que le fichier d'une image, d'une animation ou d'un son. Un lien de messagerie, qui crée un message vierge avec l'adresse du destinataire déjà indiquée. Pour créer un lien hypertexte : Sélectionnez le texte ou une image dans la fenêtre de création du document. Dans la fenêtre Propriétés (Menu Fenêtre Propriétés) cliquez dans la zone Lien 14

15 Pour un lien vers une page du site, cliquez sur l'icône représentant un dossier située à droite de la zone Lien pour rechercher et sélectionner la page. Pour un lien vers une page web (sur Internet, hors du site) tapez l'url entière Pour un lien vers un fichier du site, cliquez sur l'icône représentant un dossier située à droite de la zone Lien pour rechercher et sélectionner le fichier. Pour un lien vers une adresse de messagerie, tapez l'adresse précédée de "mailto:". Dans le menu déroulant Cible, sélectionnez un emplacement dans lequel ouvrir le lien. Pour que le document lié s'affiche ailleurs que dans la fenêtre ou le cadre en cours, sélectionnez une option dans le menu déroulant Cible de la fenêtre Propriétés. Différentes cibles listées : _blank charge le document lié dans une nouvelle fenêtre, sans nom, du navigateur. _parent charge le document lié dans le cadre parent ou dans la fenêtre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqué, le document lié est chargé dans la fenêtre de base du navigateur. _self charge le document lié dans le même cadre (ou la même fenêtre) que le lien. Il s'agit de la cible par défaut, de sorte qu'il est le plus souvent inutile de la spécifier. _top charge le document lié dans la fenêtre de base du navigateur, en supprimant tous les cadres. Pour la navigation dans le site, Dreamweaver propose l'insertion de barre de navigation. Cette barre une fois définie est utilisable dans les pages du site concernées. (Pour accéder à l'assistant : Menu Insertion, Objet Image, Barre de navigation) Il est possible de créer une carte graphique sur une image pour définir des zones réactives avec des liens hypertextes. (Dessinez les zones réactives sur la carte en utilisant les boutons de la fenêtre propriétés de l'image) Pour dessiner les zones réactives de la carte graphique 15

16 7.6 Insertion d'objets Flash dans la page Utilisation de Flash : Aujourd'hui, l'utilisation d'objet Flash est très répandue, pour intégrer des animations, mais aussi des vidéos ou du son. Vous pouvez utiliser Dreamweaver pour définir les options d'affichage et de lecture d'une animation Flash dans une page Web ou mettre à jour les liens présents dans l'animation. Si Flash est installé, vous pouvez également sélectionner un fichier SWF dans un document Dreamweaver et lancez Flash pour le modifier. Pour insérer une animation Flash dans la page web : Dans le menu Insertion, choisissez Médias, puis Flash. Si besoin, changez les paramètres dans la fenêtre des propriétés. (Il est possible de modifier l'animation si Flash est installé sur la machine). Dreamweaver propose aussi l insertion de textes flash ou de boutons Flash à l aide d un assistant. Pour accéder à l assistant choisissez Médias dans le menu Insertion, puis choisissez Texte Flash ou Bouton Flash. Il suffit ensuite de suivre l assistant. 7.7 Insertion de comportements JavaScript Les comportements de Dreamweaver insèrent du code JavaScript dans les documents pour permettre aux visiteurs d'une page Web de la modifier ou d'effectuer certaines tâches. Un comportement est la combinaison d'un événement et d'une action déclenchée par cet événement. Dans le panneau Comportements, vous pouvez ajouter un comportement à une page en spécifiant une action, puis l'événement qui déclenche cette action. Pour afficher la fenêtre des comportements, Dans le menu Fenêtre choisissez Comportements Remarque : certains comportements ne fonctionnent pas sous certains navigateurs (les + anciens). Pour insérer un comportement, il suffit de cliquer sur le bouton + de cette fenêtre et de choisir le comportement souhaité dans le menu. Il est possible de changer l'événement qui déclenche le comportement ou de modifier le comportement, en le sélectionnant dans la fenêtre des comportements. 16

17 8 Transfert des fichiers du site sur Internet 8.1 Hébergement Afin de rendre disponible un site web 24/24H il est nécessaire qu'il soit hébergé sur un serveur relié en permanence à Internet. Techniquement il est possible d'héberger son site Internet soi-même, cependant, afin de rendre un service de qualité aux visiteurs, il est conseillé de recourir aux services d'un hébergeur, c'est-à-dire une société proposant l'hébergement (en anglais hosting) du site internet sur des serveurs spécialisés connectés en permanence à internet à très haut débit. On distingue généralement les types d'hébergement suivants : Hébergement gratuit Les fournisseurs d'accès à internet proposent généralement dans leur offre une formule d'hébergement de site web avec un espace de stockage assez limité. Il existe ainsi un grand nombre de sites offrant de tels services gratuits, mais il est essentiel de regarder en détails les conditions dans lesquelles le service est rendu. En effet le service d'hébergement est souvent rendu en contrepartie de publicités affichées sur le site, soit dans un coin, soit sous la forme de pop-ups (petite fenêtre). D'autre part le temps d'accès à ce genre de service est plutôt moyen et la disponibilité du site web n'est pas garantie. Il est à noter qu'il est relativement rare de pouvoir mettre en place un nom de domaine avec ce type d'hébergement mais il est tout de même possible de mettre en place une redirection du nom de domaine vers l'url qu'offre l'hébergeur gratuit (du type Hébergement professionnel On trouve chez les hébergeurs professionnels plusieurs modes d'hébergement : L'hébergement mutualisé (en anglais mutualized hosting) : il s'agit d'une offre d'hébergement où le serveur héberge un grand nombre de sites. L'hébergement dédié (en anglais dedicated hosting) : il s'agit de la location complète d'un serveur La colocation (en anglais housing) : cette formule consiste à louer une baie d'hébergement pouvant accueillir les serveurs du client. Une fois inscrit chez un hébergeur, celui-ci fournit un nom d'utilisateur (login) et un mot de passe pour accéder à un espace privé. 8.2 Configuration du site distant Pour transférer les fichiers sur le site distant, les paramètres de celui-ci doivent être renseignés dans le module de transfert de Dreamweaver. Remarque : il est possible d'utiliser un logiciel externe pour transférer les fichiers (mais pourquoi?). Le mode de transfert le plus répandu est le FTP (File Transfer Protocole). 17

18 Pour renseigner les paramètres distants du site : Choisissez Gérer dans le menu Site. Sélectionnez le site puis cliquez sur le bouton Modifier et choisissez l'onglet Avancé et la catégorie Infos distantes. Les infos à renseigner ici, sont fournies par votre hébergeur. 18

19 8.3 Transfert FTP Pour accéder au module de transfert de Dreamweaver, affichez la fenêtre Fichiers puis cliquez sur le bouton pour afficher les sites locaux et distants. Pour afficher les sites locaux et distants Pour se connecter ou se déconnecter au serveur distant Pour placer les fichiers sur Internet Fichiers distants Fichiers locaux Pour vous connecter, cliquez sur le bouton lorsque le site distant est configuré (voir la configuration du site distant). 19

20 Pour placez les fichiers sur Internet : Sélectionnez les fichiers à transmettre Cliquez sur le bouton Placer (à la question "Voulez-vous placer les fichiers joints?", répondre NON pour éviter toute fausse manipulation) Lorsque les fichiers sont passés, ils s'affichent dans la partie distante de la fenêtre. Ensuite, pour vous déconnecter, cliquez sur le même bouton que pour vous connecter. Une fois les fichiers en ligne, il ne reste qu'à vérifier le bon fonctionnement du site sur Internet. 20

21 9 Notions HTML L'HTML (HyperText Markup Language) est le langage qui permet de créer des pages web. Ce n'est pas un langage de programmation proprement dit, c est "simplement" un ensemble de balises pour mettre en forme (avec des liens, en tableau,...) du texte et des images! Connaître les bases du HTML permet de modifier ou de créer du code spécifique dans les pages du site. Une balise est une "instruction" comprise entre crochets < attributs. > qui possède un nom et parfois des Presque toutes les balises doivent être ouvertes puis refermées. On retrouvera donc souvent une balise de début et une balise de fin. La balise de fin porte le même nom que la balise de début à l'exception du nom du la balise qui est précédé du signe /. Nous aurons donc par exemple : (ouverture) <XYZ> et (fermeture) </XYZ>. Le nom de la balise (contenu entre les crochets) n'est pas sensible à la casse, il peut être écrit indifféremment en majuscule, en minuscule ou un mélange des 2. Le code HTML peut être tapé dans un éditeur spécifique, comme celui de Dreamweaver, mais le blocnotes de Windows fait très bien l'affaire. Une page HTML classique est fondée sur cette base: <html> <head> <title> </title> </head> <body> </body> </html> Tout le code doit être compris entre les balises <html> et </html>, toujours en HTML. Les balises principales : <html> et </html> : la première informe votre navigateur qu'il va afficher une page HTML. Cette balise doit être la première de votre code. La seconde est la balise de fin. Elle referme la première. (remarquez le / devant le mot contenu entre crochets). Elle doit être la dernière de votre code HTML et signifie la fin de votre code HTML. <head> et </head> : la première ouvre l'entête de votre page. Cet entête comprend pour l'instant le titre de votre page. Cette balise est toujours placée juste après la balise <html>. La seconde, referme l'entête de votre page (remarquez encore une fois le / devant le mot entre crochets). <title> et </title> : la première ouvre la partie titre de votre page. Ce titre sera placé dans la barre tout au-dessus de votre navigateur. La seconde referme la première encore une fois en plaçant un / devant le mot entre crochets. La balise "title" doit être ouverte puis refermée à l'intérieur de la balise "head". <body> et </body> : la première ouvre le début du corps de votre document. C'est là que vous allez placer textes, images et tout ce que contiendra votre page. Cette balise doit se situer après la balise de fermeture de l'entête (=> </head>). La seconde referme la balise. 21

22 10 Référencement Il existe aujourd hui dans le monde plus de 20 milliards de pages web. Au milieu de cette immensité : votre site Internet. Il ne suffit malheureusement pas d être «en ligne» pour être vu sans aucune communication online, votre site s apprête comme tant d autres à se perdre dans la toile. Les internautes ne viendront pas parce qu'ils ne savent pas que vous existez! Une étape importante dans la création d'un site web est donc son référencement. Tout d'abord, avant de mettre en place une stratégie de référencement, il faut bien comprendre comment fonctionnent les outils de recherche, ainsi que les différences fondamentales entre les différents outils disponibles, notamment les annuaires et les moteurs de recherche. Une fois les bases acquises, il vous faut optimiser les pages web de votre site Si certains portails majeurs (par exemple : Orange, Free...) vous semblent importants par rapport à votre cible, vérifiez qui leur fournit leur annuaire ou leur moteur et soumettez-leur votre site. Identifiez les annuaires et moteurs spécifiques de votre activité (commerce électronique, nautisme, santé, agro-alimentaire...) et soumettez-leur également votre site. Si votre site présente un caractère régional important, soumettez-le également aux outils de recherche régionaux. Les moteurs de recherche sont de plus en plus sensibles à l'indice de popularité des sites (le nombre de liens depuis le Web vers vos pages ainsi que leur "qualité"). Il est aussi important de construire un système d'échange de liens avec des sites qui sont dans le même domaine que le votre. Une fois que votre site est inscrit partout (bravo!), faites, régulièrement, tous les trimestres ou tous les semestres, une "révision" du référencement : vérifiez que votre site est présent partout et, dans le cas contraire, recommencez une phase de soumission grâce à l'interface manuelle. Si vous ne désirez pas effectuer ce travail tout seul, vous pouvez éventuellement le sous-traiter, des professionnels sont spécialisés dans cette tâche. Mais surtout, notez bien que le meilleur facteur de création de trafic reste le contenu de votre site web. Un bon référencement peut certes drainer des milliers de visiteurs sur vos pages, mais le meilleur moyen de les faire rester et, mieux, revenir, est de répondre à leurs attentes. Même un bon référencement ne peux rien contre un site creux... Et fidéliser un internaute déjà venu est plus rentable que de tenter d'en capter un nouveau... Enfin, il vous est également possible d'améliorer ce référencement en procédant à un positionnement de votre site sur certains mots clés ou expressions. 22

23 10.1 Préparation des pages web pour le référencement Pour la préparation des pages au référencement du site, plusieurs étapes sont nécessaires : Le nom de domaine du site et les adresses des pages : Le choix d'un nom de domaine est important pour la reconnaissance de votre site. Achetez un nom de domaine (.com,.fr,.net...), sans système de redirection. Insérez un ou deux mots importants pour votre activité dans le nom de domaine : votre nom, votre activité, etc... Séparez les mots importants par des tirets dans les énoncés de vos noms de domaine. Insérez, si cela est possible, des mots clés importants et intelligibles dans l'adresse des pages (URL). Le titre des pages: C'est souvent la zone la plus déterminante dans le classement de vos documents. Un titre de page web est avant tout un descriptif du contenu de la page en question. Evitez les titres du style "Bienvenue sur notre site web"... Insérez le plus possible de mots clés déterminants et caractéristiques de votre activité. Ne dépassez pas les 10 mots par titre (hors "mots vides" comme "le", "la", etc.). Le titre d'une page d'accueil est, par nature, générique et se précise au fil de l'arborescence. Chaque page de votre site doit avoir un titre qui lui est propre (et qui doit être optimisé). Le titre de la page est une des propriétés de la page. Texte du corps de la page : Les premiers mots du corps de votre page (le "texte visible") sont primordiaux. Ces premiers paragraphes doivent contenir les mots importants pour définir le contenu de la page, si possible mis en exergue (gras, cliquables). Les META balises Mots clés et Description : Il s'agit de balises (code) insérées dans l'entête de vos pages web. Les balises Description sont importantes pour mieux maîtriser la façon dont les moteurs affichent les résumés de vos pages. Une "bonne" balise Description développe le titre de la page et en résume son contenu. Une taille "moyenne" est de 150 à 200 caractères. Idéalement, chaque page doit proposer une balise Description qui lui est propre. Les balises mots clés Keywords permettent notamment d'indiquer plusieurs formes de mots importants (pluriel/singulier, masculin/féminin, et éventuellement minuscules/majuscules et accentuation) aux moteurs qui prennent en compte leur contenu. L'indication d'une trentaine, voire une cinquantaine au maximum, de mots clés est la plupart du temps suffisante. Pour Insérer une META balise, dans le menu, choisir Insertion Balise... Remarque : il est judicieux de vérifier, dans le code de la page, que Dreamweaver a placé ces META balises entre <head> et </head>, sinon, il suffit de les déplacer. 23

24 Dans le sélecteur de balises, choisir Balises HTML, puis Composition de page et meta. Cliquer sur le bouton Insérer et compléter la boîte de dialogue en choisissant le nom de la balise et en renseignant le contenu, la description de la page. Les liens vers les autres sites Pour augmenter l'indice de popularité d'un site, il convient d'insérer des liens avec des sites qui sont dans le même domaine que le votre. Et surtout de créer des échanges avec les autres sites, pour que Ceux-ci créent aussi des liens Inscription du site dans les annuaires et les moteurs de recherche Pour augmenter les chances d'être trouvé, le site doit être inscrit chez les annuaires et moteurs de recherche. Certaine des ces soumissions sont gratuites, mais d'autres sont payantes, en particuliers dans les annuaires consacrés à un domaine professionnel particulier. La prise en compte de votre référencement sur Internet peut prendre beaucoup de temps (plusieurs mois n'a rien d'exceptionnel) 10.3 Liens dédiés au référencement et à la promotion du site Pour approfondir le référencement et la promotion de votre site, le site d'activ Formations propose un annuaire de liens qui recensent entre autres, de nombreux liens dédiés au référencement et à la promotion des sites web. Il est possible d'enrichir cet annuaire en ligne. Accès direct à cette rubrique :