Premiers pas avec Dreamweaver

Dimension: px
Commencer à balayer dès la page:

Download "Premiers pas avec Dreamweaver"

Transcription

1 Premiers pas avec Dreamweaver Dreamweaver est un éditeur visuel professionnel pour la création et la gestion de pages web. Dreamweaver permet de créer aisément des pages compatibles avec toute une série de plates-formes et de navigateurs. Dreamweaver permet également d'utiliser certaines fonctions du format HTML dynamique, telles que les calques et les comportements animés, sans devoir écrire la moindre ligne de code. 1 Création d'une page ou d'un nouveau site? 1.1 Création d'une page html Par défaut, à l'ouverture de Dreamweaver, l'écran présente une page «blanche» et vide, sans titre. Insertion d images, de tableaux, de barres horizontales, etc. Pour modifier les propriétés d un objet sélectionné Suivant les options cochées du menu fenêtre, un certain nombre de palettes (flottantes, elles peuvent être déplacées sur l écran) d outils sont présentes à l écran. Le lanceur (ou le mini-lanceur présent dans la barre d état de la fenêtre) donne accès à 6 fenêtres de Dreamweaver utiles pour maintenir le site, le publier retrouver des éléments souvent utilisés dans les pages (bibliothèque), gérer les styles, les comportements javascript, les animations dimages ou voir le code Html généré. (mini-lanceur présent dans la barre d'état) Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 1/27

2 La saisie de texte s opère comme dans un éditeur de texte : Le bouton Html de la fenêtre du lanceur permet d'afficher le code html de la page. On prend alors conscience que la page n'est pas vide et contient déjà la structure d'une page html : Balise de début de page Html L en-tête contient des informations non affichées dans la page qui sont utilisées par les navigateur (titre de la page) ou les moteurs (mots-clés) Le corps de la page contient le texte informatif, les images affichés dans la page Les accents ont été traduits Balise de fin de page Html Fermer alors la fenêtre de l éditeur Html, puis fermer le premier document Html sans l enregistrer. On pourra consulter en annexe quelques éléments de code Html. De la page au site Dreamweaver permet donc de créer ponctuellement une page html. Mais il permet également de créer un site complet dans un dossier préalablement créé. Dreamweaver offrira alors un ensemble d'outils de gestion de site qui faciliteront sa mise à jour notamment à l'occasion de déplacement de fichiers, lorsque l'on renomme les pages ou les images, le code html des pages prendra en compte ces modifications. Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 2/27

3 1.2 Définition d'un site local Pour travailler avec Dreamweaver, si l on souhaite créer une grappe de pages, il est souhaitable de commencer par créer un site local. Un site est un emplacement où l'on stocke l'ensemble des documents et des fichiers appartenant à un site web. Un site local requiert un nom et un répertoire racine local indiquant à Dreamweaver l'emplacement où l'on conservera les fichiers du site. On devra créer un site local pour chaque site web sur lequel on travaillera. Pour créer un site local : 1. Dans Dreamweaver, ouvrez la boîte de dialogue Définition du site en procédant comme suit : Fichier > Nouveau Site. 2. Dans la boîte de dialogue Définition du site, vérifier si l'option «Infos locales» est sélectionnée dans la liste Catégorie. 3. Nommer le site Initiation_html en tapant ce nom dans le champ Nom du site (le nom du site local est un surnom qui renvoie directement au répertoire défini comme site local). 4. Cliquer sur l'icône de répertoire à droite du champ Dossier racine local et naviguer jusqu'au répertoire désiré, puis cliquer sur Enregistrer (attention, le répertoire d accueil doit être créé avant). 5. Les options de gestion des liens peuvent être ignorées dans un premier temps. 6. Cliquer à droite de la boîte de dialogue dans la catégorie mise en forme de la carte du site" pour préciser le nom de la première page du site : Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 3/27

4 7. Cliquer sur OK, puis sur Créer lorsque Dreamweaver demande si l'on souhaite créer un fichier cache pour le site (même si l on n a pas coché l option correspondante dans la boîte de dialogue). L'option de création d'un fichier cache dans le répertoire permet de créer un enregistrement des fichiers existants de manière à ce que Dreamweaver puisse rapidement mettre les liens à jour lorsque l'on déplacera, renommera ou supprimera un fichier. 8. Si le dossier stage, contient déjà des fichiers créés par ailleurs, la fenêtre du site les affiche. La liste fera également office de gestionnaire de fichiers, en vous permettant de copier, coller, supprimer, déplacer et ouvrir des fichiers exactement comme dans le sélecteur de fichier ou l'explorateur de l'ordinateur. 9. L utilisateur accède alors à une nouvelle fenêtre, c est la fenêtre de site, elle permet la maintenance de base des fichiers du site (renommer, supprimer) et leur publication vers un site distant. 2 Composition de la page d accueil Depuis la fenêtre de site, un double-clic sur le nom du fichier index.htm permet d ouvrir celui-ci dans la fenêtre document. 2.1 Un titre et un arrière-plan pour la page index.htm Choisir Modifier > Propriétés de la page pour ouvrir la boîte de dialogue Propriétés de la page. Saisir un titre pour cette page, c'est le titre qui sera affiché dans la barre de titre des navigateurs, ce titre peut comprendre des caractères accentués et des espaces, il est relativement explicite. Remarque : Il est également possible d insérer des mots-clés dans l en-tête de la page, ces mots-clés non affichés dans la fenêtre du navigateur peuvent être utilisés par les utilisateurs de moteurs de recherche dans le cadre d une recherche précise de documents. Pour insérer des mots-clés : Insertion > en-tête > mots-clés. Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 4/27

5 Pour définir une couleur d'arrière-plan pour la page : Choisir une couleur dans la palette ou utiliser le compte-gouttes pour sélectionner une couleur d'un objet de la page ou encore saisir le code de couleur par exemple #CCCCCC pour du gris dans le champ Couleur d'arrière-plan. Cliquer sur Appliquer pour appliquer la couleur à l'arrière-plan. Remarque : Une couleur est codée sur trois paires (correspondant au rouge, vert bleu) de caractères hexadécimaux (dont la valeur exprime l'intensité de la couleur) ; le signe # précède les trois paires. Rouge #FF0000 Vert #00FF00 Bleu #0000FF Magenta #FF00FF Cyan #00FFFF Jaune #FFFF00 Blanc #FFFFFF Noir # Gris #C0C0C0 Pour définir une image d'arrière-plan pour la page : Cliquer sur Parcourir (Windows) à côté du champ Image d'arrière-plan. Sélectionner une image, si l'image n'a pas été stockée préalablement dans le dossier de travail (E:\stage par ex : l image d arrière-plan crepi.gif se trouve dans un dossier E :\image), Dreamweaver propose d'en faire une copie dans le site en cours : On acceptera cette duplication pour ramener tous les éléments composant la page dans le même dossier Cliquer ensuite sur Appliquer pour ajouter l'image d'arrière-plan à la page. 2.2 Noms de fichiers et titres des pages, quelles différences? Le nom de fichier de la page d'accueil La page doit être enregistrée dans le dossier de travail. Si elle a vocation a devenir la page d'accueil du futur site, elle devra avoir pour nom index.htm ou index.html, voire default.htm, default.shtml. En fait tout dépend du serveur Web qui servira les pages html au niveau de l'espace d'hébergement qui recevra les pages. Supposons l'hébergement sur Internet soit à l'adresse «perso.truc.fr», on vous a accordé un répertoire nommé «soleil» sur cette machine pour stocker vos fichiers, les pages seront donc envoyées sur l'url «perso.truc.fr/soleil/». Si les pages index.htm, p1.htm, p2.htm ont été stockées sur cet espace, un utilisateur pourra depuis son navigateur taper il verra s'afficher la page p1.htm dans la fenêtre de son navigateur. Cependant, si vous surfez, vous avez du remarquer que lorsque vous tapez une adresse de site, généralement vous ne tapez pas le nom de la page et pourtant une page d'accueil vous est envoyée par le serveur. C'est que le serveur est paramétré (par son administrateur), pour servir par défaut une page bien précise ; en général l'administrateur imposera au serveur d'envoyer la page «index.htm» en dehors de toute précision fournie par l'utilisateur. Ainsi conviendra-t-il de se renseigner auprès de l'hébergeur de votre site pour vous savoir comment nommer sa page d'accueil. En général donc index.htm Et les noms de fichiers des autres pages... Pour ce qui concerne les autres pages du site, leur nom importe peu... ou presque! En effet, nombreux sont les serveurs à faire la différence entre majuscules et minuscules dans des noms de page, la plupart refusent les caractères accentués, tous détestent les espaces... d'où la règle des trois pas : pas d'accents, pas d'espaces, pas de majuscules. Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 5/27

6 2.2.3 Les titres des pages Les titres des pages quant à eux peuvent être composés avec des majuscules, des espaces des accents. Le titre de la page est affiché dans la barre de titre du navigateur pendant la consultation de la page. Les mots composant le titre devront cependant être judicieusement choisis. En effet de nombreux moteurs de recherche savent rechercher les mots-clés saisis par l utilisateur dans le titre des pages (dans Altavista, il suffit de faire précéder le mot-clé de title :, dans Ecila, on peut affiner la recherche en choisissant l option de recherche des mots-clés dans le titre seulement ). Le titre doit donc rendre compte assez précisément du contenu de la page. 2.3 La mise en page du contenu informatif Pour obtenir une mise en page permettant de placer du texte à côté d'une image, comme avec tous les éditeurs Html, il convient d'utiliser un tableau. On utilisera soit la commande Insertion > tableau, soit l'icône appropriée de la fenêtre d'objets Insertion d'un tableau La largeur d un tableau peut être exprimée en pourcentage de la largeur de la fenêtre de visualisation du navigateur (le contenu textuel des cellules sera recomposé pour éviter d avoir à utiliser l asenceur). Cette largeur de tableau peut être exprimée en pixel si l on souhaite éviter une désorganisation de la page quand l utilisateur final visualise la page avec une fenêtre trop étroite, notamment par exemple lorsque des légendes figurent au côté d images insérées dans un tableau. Si le tableau n est utilisé que pour faciliter le placement d objets, on ne matérialisera pas la bordure Lorsque le tableau est sélectionné, l'inspecteur de propriétés nous renseigne sur les propriétés du tableau : Insertion d'une image dans la cellule de gauche du tableau Placer le point d'insertion dans la cellule gauche du tableau Commande Insertion > image ou icône image de la fenêtre des objets (image sigle_iufm.gif) Redimensionner l'image (en faisant glisser une poignée d'angle ou en saisissant les nouvelles valeurs dans l'inspecteur de propriétés) Déplacer la double barre pointillée symbolisant la limite entre cellules pour la ramener contre l'image. Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 6/27

7 Rappel : Si l image n avait pas été stockée préalablement dans le répertoire de travail, Dreamweaver propose de dupliquer ce fichier afin qu il se trouve dans le même dossier que la page Html. Il est prudent d accepter. En effet, à la différence d un fichier Word, lorsqu une image est insérée, elle n est pas insérée dans le fichier Html généré. Elle a une existence propre sur le disque dur. Ma_page.html Ma_page.doc Img2.gif Img1.gi f Page Html ne contenant que du texte et un lien vers les images qui sont stockées séparément. Une page Html ne contient que du texte, ce dernier contient des «appel» à des images dont les fichiers sont distincts de la page, les balises Html assurant leur positionnement au moment de l affichage dans un navigateur. Par exemple voici le code Html qui décrit le placement de deux images : <p><img src="file:///c:/gifs%20animées/ani_cat.gif" width="100" height="60"><img src="aniheart.gif" width="40" height="40"></p> L image ani_cat.gif est située dans le dossier Gifs animés du disque dur C, le chemin est précisé dans le code de la page html. Lorsque la page sera stockée sur une machine hôte (un serveur distant), au moment de l affichage de la page, l image en question sera recherchée dans le répertoire C:/Gifs%20animées/. Aura-t-on pris soin de publier également ces images dans un répertoire de même nom sur le serveur? Si oui tout se passe bien, sinon l image ne sera pas trouvée et donc pas affichée. L image aniheart.gif quant à elle est recherchée dans le répertoire courant, elle sera trouvée sans problème si tous les fichiers du répertoire courant sont copiés vers le serveur. Il conviendra donc de créer un répertoire qui contiendra tous les éléments du site (images, sons, pages html) pour être sur de ne pas en oublier au moment du transfert vers le site d hébergement. Si l on souhaite travailler plus proprement encore on pourra créer un répertoire qui contiendra à la fois les pages et un autre répertoire qui contiendra lui-même les images. C est l ensemble du répertoire «mon site» qui sera transféré, le texte des pages contiendra alors des chemins relatifs pour indiquer l emplacement des images dans le sous répertoire c:\mon_site page1.htm page2.htm page3.htm c:\monsite\mes_images img1.gif img2.jpg img3.jpg img4.gi Saisie du texte dans la cellule de droite Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 7/27

8 La liste déroulante «taille» de l'inspecteur de propriétés permet de choisir une police et une taille (ici 7) pour le texte. Remarques : Les tailles de police HTML sont relatives ; ce ne sont pas des tailles de points spécifiques. Les utilisateurs définissent le corps de la police par défaut pour leur navigateur ; il s'agit du corps affiché lorsque Par défaut ou 3 est sélectionné dans l'inspecteur des propriétés ou à partir du menu Texte > Taille. Les tailles 1 ou 2 apparaîtront plus petites que celle de la police par défaut ; les tailles de 4 à 7 apparaîtront plus grandes. Pour que le texte s'affiche constamment dans une taille de point particulière, utilisez les feuilles de style. Lors de la saisie de texte, c'est la police par défaut de l'éditeur qui est utilisée. Mais c'est la police par défaut du navigateur qui permettra de visualiser la page affichée! Il est donc important de sélectionner une police dans la liste déroulante pour la spécifier afin de l imposer au navigateur de l utilisateur final. Attention, les polices fantaisies ne sont pas forcément présentes sur les postes de travail de la majorité des "internautes", à défaut de trouver la police choisie par le concepteur de la page, c'est la police par défaut du navigateur de la machine hôte qui est mobilisée. Les espaces entre les paragraphes sont importants, on pourra judicieusement remplacer certaines marques de paragraphes par des retours à la ligne (<Maj>+<Entrée>) Visualiser de temps en temps la page réalisée dans un navigateur Bien que la fenêtre document de Dreamweaver offre une vue de la page telle peut apparaître dans un navigateur, il est préférable de visualiser celle-ci dans un ou plusieurs navigateurs afin de s assurer du rendu de la page. On utilisera la commande Fichier > Aperçu dans le navigateur. Compléter la page d accueil avec des rubriques qui serviront de support à la mise en place de liens. Faire en sorte que l ensemble des rubriques soit visible dans une fenêtre de navigateur sans avoir à utiliser la barre de défilement. Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 8/27

9 bout_vert.gif lettre.gif Visualiser la page dans un navigateur et constater que l image lettre.gif est une image animée. Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 9/27

10 3 Création d une nouvelle page et mise en place des hyperliens Pour créer une nouvelle page : Depuis la fenêtre document : Fichier > Nouveau Depuis la fenêtre du site : Fichier > Nouveau Fichier Créer la page sites.htm On pourra utiliser les adresses de sites utiles à la construction de pages Web fournies en annexe Nom de fichier sites.htm (Attention aux règles relatives au nom de fichier!) Titre de la page : Adresses utiles Html Œil.gif Grib_r.gif Ajouter une police (voir infra) Créer un style (voir infra) 3.1 Ajouter une police Lorsque l on souhaite utiliser fréquemment une police spécifique et que celle-ci n apparaît pas dans la liste déroulante de l inspecteur de propriétés, il suffit de personnaliser la liste Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 10/27

11 3.2 Créer un style de paragraphe Création du style items (police Comic sans ms, rouge, taille 12) Choix des propriétés du style Application du style à un paragraphe sélectionné Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 11/27

12 3.3 Mise en place d hyperliens Hyperlien menant à une page du même site Depuis la page index.htm (on y revient par l intermédiaire du menu fenêtre qui contient les pages en cours de traitement), mettre en place un lien vers la page sites.htm Sélectionner le texte du lien et saisir l adresse à atteindre (ici une page html) dans la zone liens de l inspecteur de propriétés, ou encore, choisir de rechercher la page dans un dossier (ce qui évitera les erreurs de saisie, la saisie de caractères en majuscule etc ) : Sur la page sites.htm, mettre en place un lien sur une image qui permettra le retour sur la page d accueil Insérer l image flech_g.gif en pied de tableau (pour obtenir un alignement vertical correct avec le texte retour à la page d accueil, l image étant sélectionnée, choisir l alignement milieu absolu dans l inspecteur de propriétés) Sélectionner ensuite l image et mettre en place le lien vers Index.htm Remarque : pour tester les liens, un clic droit sur le texte du lien permet d atteindre le menu contextuel, on choisira la commande ouvrir la page liée Mettre en place le lien vers la page glossaire.htm qui existe déjà et qui aura été préalablement copiée dans le répertoire de travail e :\stage Mise en place de liens vers une adresse de site ou page sur Internet Mettre en place quelques liens depuis la page sites.htm vers les sites en question Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 12/27

13 3.3.3 Mise en place de liens internes à une page La page glossaire.htm contient une série de définitions rangées en ordre alphabétique. Il serait donc opportun d accéder aux définitions via des hyperliens figurant sur un sommaire. Ouvrir la page "glossaire.htm" et insérer des ancres nommées (au début de chaque nouveau groupe de mots commençant par la même lettre) et des liens pour permettre un va et vient entre le répertoire du haut de la page et les différentes définitions. Insertion > Ancre Nommée ou <Ctrl> +<Alt> +A Il faudra nommer l ancre, par exemple pour le début de la rubrique des B : Remarque : l ancre permet d'identifier un endroit précis du texte (cet endroit peut être constitué par une image), l'hyperlien peut pointer sur l ancre. A B C D E F G A ~ ~ ~ ~ ~ ~ ~ ~ ~ ~~ ~ B ~ ~ ~ ~ ~ ~ ~ ~ ~ ~~ ~ C ~ ~ ~ ~ ~ ~ ~ ~ ~ ~~ ~ D ~ ~ ~ ~ ~ ~ ~ ~ ~ ~~ ~ E ~ ~ ~ ~ ~ Z ~ ~ ~ ~ ~ ~ ~ ~ ~ ~~ ~ Accueil Lien permettant le retour au sommaire Lien vers la page index.htm Depuis le répertoire figurant en sommaire de la page, il convient de mettre en place un hyperlien vers l ancre ainsi définie : faire précéder le nom de l ancre du symbole # Insérer un lien en bas de page pour le retour à la page d'accueil du site (index.htm) puis un lien de la page d accueil (index.htm) vers la page glossaire.htm Remarque : le principe des ancres (appelées signets dans le monde Microsoft, cibles dans le monde Netscape) est très utilisé pour générer des aides contextuelles dans un document pointant vers une zone précise d un second document. Un lien mis en place dans une page de texte utilisant des termes techniques peut pointer vers une zone précise de la page glossaire.htm, pour cela il suffira de désigner le lien en donnant l adresse de la page suivie de # puis du nom du signet : Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 13/27

14 3.3.4 Visualiser la carte du site La commande site de la fenêtre du lanceur permet d atteindre la fenêtre du site : Un clic sur le bouton carte du site permet de visualiser graphiquement la grappe de page ainsi constituée : La mise en place d un lien vers une adresse électronique Comprenons-nous bien, il ne s agit pas de créer un lien qui permettra d ouvrir une boîte aux lettres électronique, mais simplement de générer un nouveau message en complétant automatiquement l adresse du destinataire. Cette procédure permet de faciliter l envoi d un message par l utilisateur (par ouverture automatique de la fenêtre nouveau message du logiciel de messagerie installé sur sa machine), tout en évitant les erreurs de libellé d adresses. Sélectionner le texte Ecrivez-nous de la page d accueil, puis dans la zone de lien de l inspecteur de propriétés de faire précéder l adresse électronique du destinataire de mailto : L image animée de l enveloppe étant suggestive, il est judicieux de placer le lien également sur celle-ci Création d un hyperlien en direction d un fichier Word, Excel ou pdf La page d accueil propose une information relative à la réglementation en matière de construction de site. Afin de permettre à tout utilisateur de pouvoir lire le fichier (regle_site.pdf), il a été préalablement enregistré dans le format pdf (portable document format) d Acrobat. Ce format permet à l utilisateur de lire le document dans sa pagination d origine, avec Acrobat Reader (gratuit) sans avoir besoin de disposer de la version adéquate de Word, Excel ou autre application. Lorsque le lien est activé, le navigateur provoque l ouverture d Acrobat reader qui permet de lire le fichier rapatrié. La réalisation d un fichier Acrobat nécessite de disposer de la version payante cette fois d Acrobat Writer (voir le document Production d un fichier Acrobat - Iufm de reims- Jacques Bresson) Attention, la version reader d Acrobat ne propose pas d enregistrement du fichier téléchargé. Par ailleurs certains fichiers pdf n affichent que des pages blanches (c est un bogue reconnu par Adobe qui diffuse Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 14/27

15 Acrobat). Pour éviter ces deux problèmes, l utilisateur final fera un clic droit sur le lien menant à un fichier acrobat et choisira la commande enregistrer la cible sous du menu contextuel. Création de la page telechargement.htm qui contient les liens vers les divers documents Créer une page Html, y insérer des liens en direction des trois documents ci-dessous. Tester l'effet de l'activation des liens sous un navigateur. Construire une page de documents à proposer en téléchargement qui sera reliée à la rubrique téléchargement de documents de la page index.htm. Les différents documents devront être éventuellement transformés dans un format spécifique ou compressé. Attention : Prendre soin de stocker ces fichiers dans le même dossier (que celui qui contient vos pages, à défaut dans un sous dossier), pour que le chemin d'accès au document contenu dans le lien soit le même après téléchargement du site dans un dossier de pages personnelles sur un site d'hébergement. Nature Une grille de mots croisés avec dispositif d'aide sous Excel 97 (aucune manipulation à faire sur ce document, l'ouvrir sous Excel pour constater son fonctionnement) Création de pages Html avec Word 97 : nécessite de compresser le fichier "doc_html_word.doc" 125Ko avec Winzip, puis en faire un fichier autodécompactable Création de pages Html avec Frontpage Express : nécessite de convertir en pdf pour lecture à l'écran le fichier "fp_express.doc" de 95ko Nom de fichier à proposer au téléchargement mots_croises.xls doc_html_word.exe doc_html_fpex.pdf Taille 53Ko Comparer la taille du fichier compressé obtenu avec le fichier Word d'origine. Comparer la taille du fichier compressé obtenu avec le fichier Word d'origine. Test des liens Si la machine de l'utilisateur est correctement configurée, les documents sont automatiquement ouverts avec Word, Excel, ou Acrobat Reader (si ces logiciels sont présents sur la machine). Si les logiciels ne sont pas installés, ou que l'association entre l'extension du nom de fichier et l'application à ouvrir n'est pas réalisée, une fenêtre d'enregistrement s'ouvre. Si l'on souhaite pouvoir stocker immédiatement les documents sur son disque dur à un endroit précis sans les ouvrir, il suffit, depuis le navigateur, de faire un "clic droit" sur le lien et de choisir la commande "enregistrer sous" dans le menu contextuel La création de zones réactives sur une Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 15/27

16 image Cette fonctionnalité de Dreamweaver permet de générer différentes zones réactives sur une image, chaque zone pointant grâce à un hyperlien vers une information spécifique (autre page du site, autre site ). On retrouve cette fonctionnalité sous les éditeurs évolués comme FrontPage mais généralement pas dans les éditeurs de type graticiels (il en est de même pour l affichage en wysiwyg des pages de cadres voir infra-). Créer une nouvelle page : Titre : tourisme Région Champagne Ardenne Nom de fichier : region.htm (attention, pas d accent au mot region). Insérer le texte suivant en haut de page : Promenade en Champagne Ardennes Insérer l image : champ-ard.jpg Arrière-plan : image blanc.gif Texte du titre en taille 7 couleur : vert Saisir ensuite les textes et insérer les images suivantes : Promenade en champage- Ardenne Champ-ard.jpg Mettre en place des ancres nommées sur les paragraphes précédant les titres de la page Pour mieux voir le positionnement des ancres : La place ducale à charleville-mézières Ducale.jpg La cathédrale de reims Cathedrale.jp g Le vignoble d Epernay Vignes.jpg Créer les zones réactives sur la carte de la région : Sélectionner l image de la région et activer le bouton carte de l inspecteur de propriétés Le bouton Carte permet d ouvrir une fenêtre dotée d outils de tracés afin de délimiter des zones réactives. Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 16/27

17 L éditeur de carte permet alors de définir les zones réactives de l image avec les outils de tracé et de définir les liens (ici vers les ancres nommées). Enregistrer les modifications et visualiser la page dans un navigateur. Tester les liens dans un navigateur (rappel : Fichier > Aperçu dans le navigateur) Insérer une flèche de retour flech_h.jpg pour permettre la création d un lien affichant le haut de page (il faudra donc insérer préalablement une ancre en haut de page). Enregistrer la page et mettre en place un lien vers cette page depuis la page d accueil (index.htm) 4 Redéfinition des styles des hyperliens La définition d un style de paragraphe a été abordée au chapitre 3.2 Il est possible de redéfinir le style de certaines balises, notamment celle des hyperliens qui sont toujours présentés de manière soulignée, mais que l on peut souhaiter d une couleur particulière et non souligné pour tenir compte d une charte graphique pour le site. 4.1 Création d un style incorporé dans la page Pour la page index, définissons des liens en vert gras et non soulignés Depuis le lanceur : style > Editer > Nouveau Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 17/27

18 Il s agit de redéfinir la balise a href qui permet de générer le lien hypertexte Remarque : lors de la définition de la couleur, on dispose d une pipette qui permet de prendre un échantillon de couleur sur un autre élément de la page au besoin. Enregistrer le document. 4.2 Création d une feuille de style externe Le style d hyperlien est propre à cette feuille. Il est cependant possible de créer une feuille de style externe qui contient la définition des différents styles, sur laquelle pointeraient les différentes pages du site. Ainsi, en modifiant une seule fois le style dans la feuille de style externe, les textes des différentes pages comportant ce style seraient modifiés en une seule opération. Depuis la page Index.htm, activer la commande Style > Editer et cliquer sur le bouton lien de la boîte de dialogue Nommer la feuille de style externe (ce nom n existe pas au départ), cela donnera naissance à une feuille commun.css stockée sur le disque. Créer alors les styles comme aux chapitres 3.2 et 4.1 Enregistrer Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 18/27

19 Ouvrir les autres pages html (sites.htm par exemple) et mettre en place le lien vers la feuille de style Style > Editer > Lien et pointer la feuille de style commun.css Les styles de la feuille sont pris en compte dans le document. Enregistrer Remarque : De la même manière, il est possible de modifier la balise body pour préciser la couleur d arrière-plan. Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 19/27

20 5 Les animations De nombreuses images Gif animées sont disponibles sur Internet (voir adresses en annexe). Il est également possible de créer de telles animations avec un logiciel du type de GifAnimator (qui ne fait que cela) ou avec PaintShopPro (qui fait bien d autres choses). Il est possible d insérer du code javascript ou des appliquettes Java. De nombreux sites présentent des exemples de code et la manière de l insérer par copier coller dans une page html (voir les adresses en annexe). Dreamweaver propose en standard des animations de texte et d images 5.1 Les calques et les scénarios Avec plupart des éditeurs Html, il est nécessaire de recourir aux tableaux (Html 2 et amélioré en version 3.3 avec les cartes réactives) pour positionner correctement textes et images dans une page Html. Avec le principe des feuilles de styles en cascade (CSS), il est désormais possible de positionner des cadres contenant des images ou du texte à un endroit précis d une page et ceci dans trois dimensions. Attention cependant, le code inséré dans la page n est lu correctement que par les navigateurs de version 4 ou supérieure! Insertion de calques dans une page Créer une nouvelle page : nom «journee.htm», titre «La journée en images», enregistrer la page ou bien Insérer dans le calque l image «autocar.gif» et redimensionner le calque au besoin pour l ajuster à la taille de l image. Poignée de déplacement du calque. Nom du calque du calque. Plus l index Z est élev plus le calque est placé au premier plan. Insérer successivement deux autres calques qui contiendront l image «roue_av.gif» pour l un et «roue_ar.gif» pour l autre. Positionner les cadres en haut et à droite de la page et placer les roues au bon endroit sous l autocar. Enregistrer Iufm de reims Jacques bresson Premiers pas avec Dreamweaver page 20/27

Réalisation de quelques pages Web / Activités et travaux d'élèves

Réalisation de quelques pages Web / Activités et travaux d'élèves Réalisation de quelques pages Web / Activités et travaux d'élèves Principe : Il s'agit de réaliser avec Dreamweaver qautre pages web (donc au format Html, hypertexte Markup Language) et les lier entre

Plus en détail

Premiers pas avec Dreamweaver

Premiers pas avec Dreamweaver Premiers pas avec Dreamweaver Dreamweaver est un éditeur visuel professionnel pour la création et la gestion de pages web. Dreamweaver permet de créer aisément des pages compatibles avec toute une série

Plus en détail

Conception de pages HTML sous FrontPage Express

Conception de pages HTML sous FrontPage Express Conception de pages HTML sous FrontPage Express Le logiciel utilisé sera l'éditeur de Frontpage Express livré gratuitement avec Internet Explorer 4 et 5, il possède un tronc commun de fonctionnalités partagées

Plus en détail

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56)

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Guide d'utilisation De Kompozer AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Table des matières Fiche1 : Créer, nommer et sauvegarder une page...2 Fiche2 : Modifier les couleurs et le fond

Plus en détail

Créer un site internet (ou des pages)

Créer un site internet (ou des pages) Ce qu il faut savoir avant de commencer Driss SABRI Une page Web est un outil de communication pour lequel on a des contraintes spécifiques 1. avant d en créer il faut se poser les questions habituelles

Plus en détail

Publier des données sur le Web

Publier des données sur le Web Publier des données sur le Web Introduction Microsoft Excel fournit les outils dont vous avez besoin pour créer et enregistrer votre classeur sous forme d une page web et le publier sur le Web. La commande

Plus en détail

Formation > Développement > Internet > Réseaux > Matériel > Maintenance

Formation > Développement > Internet > Réseaux > Matériel > Maintenance Formation > Développement > Internet > Réseaux > Matériel > Maintenance SOMMAIRE 1. ACCEDER A L'INTERFACE D'ADMINISTRATION...5 1.1. Le navigateur... 5 1.2. L'interface d'administration... 5 2. METTRE

Plus en détail

Création du site dans Dreamweaver :

Création du site dans Dreamweaver : CHARGER, CREER et ENREGISTRER 1. Se connecter au RESEAU du COLLEGE avec tes 2 mots de passe 2. Charge le logiciel Au lancement du logiciel, l écran suivant s affiche : Palette des objets Lanceur Zone de

Plus en détail

Création de page web avec Dreamweaver 2.0

Création de page web avec Dreamweaver 2.0 Création de page web avec Dreamweaver 2.0 Guide d accompagnement pour Windows avril 2002 Suzanne Harvey Responsable RÉCIT suzanne.harvey@prologue.qc.ca http://www.apinfo.qc.ca http://www.cssh.qc.ca/se/recit

Plus en détail

-Le traitement de texte. -Le courrier électronique

-Le traitement de texte. -Le courrier électronique 1/17 SOMMAIRE : -Windows -Le traitement de texte -Internet -Le courrier électronique 2/17 WINDOWS PRISE EN MAIN DE WINDOWS Lorsque vous démarrez votre ordinateur vous devez voir arriver un écran qui ressemble

Plus en détail

Fiche n 4 Utilisation de Kompozer Table des matières

Fiche n 4 Utilisation de Kompozer Table des matières Fiche n 4 Utilisation de Kompozer Table des matières 1-Travail préparatoire...1 1.1-Contraintes sur les noms de fichier...1 1.2-Préparation du dossier de stockage...1 1.3-Barre d'outils...1 1.4-Création

Plus en détail

DOSSIER RESSOURCES CRÉATION DE PAGES HTML UTILISATION DU LOGICIEL DREAMWEAVER

DOSSIER RESSOURCES CRÉATION DE PAGES HTML UTILISATION DU LOGICIEL DREAMWEAVER DOSSIER RESSOURCES CRÉATION DE S HTML UTILISATION DU LOGICIEL DREAMWEAVER SOMMAIRE SITE Créer un nouveau site Page 1 Ouvrir un site Pages 1-2 Créer une nouvelle page Page 2 Modifier les propriétés d'une

Plus en détail

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. 1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de

Plus en détail

Guide pour la réalisation d'un document avec Open Office Writer 2.2

Guide pour la réalisation d'un document avec Open Office Writer 2.2 Guide pour la réalisation d'un document avec Open Office Writer 2.2 1- Lancement de l'application : Le Traitement de textes de la Suite OpenOffice peut être lancé : soit depuis le menu «Démarrer / Programmes/OpenOffice2.2/Writer

Plus en détail

Création WEB avec DreamweaverMX

Création WEB avec DreamweaverMX Creation Web avec DreamweaverMX MX Initiation Sommaire.preparation.mise en forme.liens hypertextes.images.liens sur images.images avec zones sensibles.images survolees.liens de type courriel.apercu dans

Plus en détail

Créer des pages web avec Front Page 2000

Créer des pages web avec Front Page 2000 Créer des pages web avec Front Page 2000 1 - Préparation Préparer le plan du site que l'on souhaite créer avec les liens reliant les différentes pages. Structure du site Structure pour le stockage des

Plus en détail

Création de documents interactifs au format Html sous Word 97

Création de documents interactifs au format Html sous Word 97 Création de documents interactifs au format Html sous Word 97 Microsoft Word ainsi que certains autres programmes Microsoft Office fournissent des outils de création de pages Web afin d en faciliter la

Plus en détail

Création de pages web

Création de pages web Création de pages web I. Démarrage du logiciel 2 1. La Barre d'état....2 2. La palette objets.... 2 3. Les autres palettes et inspecteurs.... 2 4. La fenêtre de site...3 II. Créer des pages avec DreamWeaver

Plus en détail

Version 4.0. Multinet Ressources Inc. Page 1 sur 13

Version 4.0. Multinet Ressources Inc. Page 1 sur 13 Version 4.0 Page 1 sur 13 Introduction Lorsque vous obtenez l accès à Méganet, votre site est déjà construit. C est-à-dire qu il a fait l objet d une étude de style selon les couleurs de votre entreprise

Plus en détail

Découverte de l ordinateur. Explorer l ordinateur et gérer ses fichiers

Découverte de l ordinateur. Explorer l ordinateur et gérer ses fichiers Découverte de l ordinateur Explorer l ordinateur et gérer ses fichiers SOMMAIRE I L ORDINATEUR ET L EXPLORATEUR... 3 1.1 : PRESENTATION ET GENERALITES... 3 1.2 : CONNAÎTRE LES PROPRIETES D UN ELEMENT...

Plus en détail

Introduction à Expression Web 2

Introduction à Expression Web 2 Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer

Plus en détail

Pour créer une feuille, accédez à votre Drive, cliquez sur le bouton rouge Créer, puis sélectionnez Feuille de calcul dans le menu déroulant.

Pour créer une feuille, accédez à votre Drive, cliquez sur le bouton rouge Créer, puis sélectionnez Feuille de calcul dans le menu déroulant. 1 2 Grâce aux feuilles de calcul Google, vous pouvez en toute simplicité créer, partager et modifier des feuilles de calcul en ligne. Vous pouvez notamment : importer et convertir des données.xls,.csv,.txt

Plus en détail

Découvrir l environnement de Microsoft Office WORD 2010

Découvrir l environnement de Microsoft Office WORD 2010 1 Fiche ressource Découvrir l environnement de Microsoft Office WORD 2010 1. Lancer Word 2. Découvrir l interface 3. Utiliser les aides et les info-bulles 4. Modifier les principales options de Word et

Plus en détail

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos. KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html

Plus en détail

Construction de documents au format Html

Construction de documents au format Html Construction de documents au format Html Les activités proposées à l'occasion de cette production permettent d'aborder les principaux savoir-faire associés à la réalisation de pages WEB (décrites en langage

Plus en détail

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML A L'AIDE DU LOGICIEL LIBRE OFFICE Libre Office 3.3.3 et Open Office.org 3.3.0 sont deux suites bureautiques complètes, équivalentes (seule la charte

Plus en détail

PROCÉDURES D ÉDITION. Guide de l usager TYPO3

PROCÉDURES D ÉDITION. Guide de l usager TYPO3 Guide de l usager TYPO3 Sommaire Connexion à TYPO 3...5 Gestion des pages dans TYPO 3...6 Ajouter une nouvelle page...7 Déplacer ou copier une page de l arborescence... 11 Supprimer une page... 12 Ouvrir

Plus en détail

La Clé informatique. Formation Word XP Aide-mémoire

La Clé informatique. Formation Word XP Aide-mémoire La Clé informatique Formation Word XP Aide-mémoire Septembre 2003 Table des matières Édition et insertion de texte... 4 Manipulation d un document Exploration de la fenêtre de travail Bouton de maximisation

Plus en détail

Table des matières. Microsoft Excel 2007. Présentation de la nouvelle interface (1)

Table des matières. Microsoft Excel 2007. Présentation de la nouvelle interface (1) Microsoft Excel 2007 Table des matières Présentation de la nouvelle interface (1) Interface utilisateur Ruban Onglets qui s affichent uniquement lorsque vous en avez besoin (2) Onglets de programme (3)

Plus en détail

Microsoft Word barres d outils. Par : Patrick Kenny

Microsoft Word barres d outils. Par : Patrick Kenny Microsoft Word barres d outils Par : Patrick Kenny 17 novembre 2004 Table des matières Mode affichage :... 3 Barre d outils Standard :... 4-5 Barre d outils Mise en forme :... 6-7 Activation de la barre

Plus en détail

Manuel d'utilisation pour Zimplit

Manuel d'utilisation pour Zimplit Manuel d'utilisation pour Zimplit Introduction Ce document vous présente un aperçu de l'interface utilisateur et les fonctions du gestionnaire de contenu Zimplit. Informations Générales Version: 0.3 Modifié

Plus en détail

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS En renommant, déplaçant ou supprimant des images déjà insérées dans des pages, ou en renommant, déplaçant ou supprimant des sous-dossiers, les images

Plus en détail

Initiation WORD. Module 2 : Les fonctions de base

Initiation WORD. Module 2 : Les fonctions de base Initiation WORD. Module 2 : Les fonctions de base Système d exploitation utilisé : Windows XP Service Pack 2 Créé par Xavier CABANAT Version 1.0 Document créé par Xavier CABANAT Page 1 sur 14 Avant propos.

Plus en détail

PC & Windows Livret d exercices Laurent DUPRAT Pratiquons

PC & Windows Livret d exercices Laurent DUPRAT Pratiquons Pratiquons ensemble PC & Windows Livret d exercices Laurent DUPRAT Pratiquons ensemble PC & Windows Livret d exercices Laurent DUPRAT Pratiquons ensemble PC & Windows Livret d exercices Laurent DUPRAT

Plus en détail

Introduction à Dreamweaver

Introduction à Dreamweaver Introduction à Dreamweaver Dreamweaver est un logiciel d édition de page web. Un site est un ensemble de pages [souvent en format html, ce qui signifie HyperText Markup Language, reliées entre elles par

Plus en détail

Webartist (SIERRA 199 FF TTC) Les méthodes basiques pour générer un premier site Web. recherche. Insertion arrière-plan

Webartist (SIERRA 199 FF TTC) Les méthodes basiques pour générer un premier site Web. recherche. Insertion arrière-plan Webartist (SIERRA 199 FF TTC) Les méthodes basiques pour générer un premier site Web Fichier propriétés du site Web couleurs Fichier propriétés du site Web informations de recherche Fichier propriétés

Plus en détail

Explorateur Windows EXPLORATEUR WINDOWS...1 INTRODUCTION...2 LANCEMENT DE L'EXPLORATEUR WINDOWS...3 PRÉSENTATION PHYSIQUE...3 RECHERCHER...

Explorateur Windows EXPLORATEUR WINDOWS...1 INTRODUCTION...2 LANCEMENT DE L'EXPLORATEUR WINDOWS...3 PRÉSENTATION PHYSIQUE...3 RECHERCHER... EXPLORATEUR WINDOWS SOMMAIRE EXPLORATEUR WINDOWS...1 INTRODUCTION...2 LANCEMENT DE L'EXPLORATEUR WINDOWS...3 PRÉSENTATION PHYSIQUE...3 RECHERCHER...6 ORGANISATION DE SES DOSSIERS...7 CRÉER UN DOSSIER...7

Plus en détail

Prise en main rapide

Prise en main rapide Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un

Plus en détail

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet!

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet! Créez en quelques minutes votre site Internet! SOMMAIRE : Choisir une interface graphique - Nommez votre site... page 03 5 étapes de création... page 04 Les outils de création graphique... page 05 Mise

Plus en détail

GED MARKETING. Page 1 sur 18

GED MARKETING. Page 1 sur 18 GED MARKETING I. Présentation du produit... 2 II. Page principale de l application... 3 L arbre... 3 Le menu... 4 La fenêtre de navigation... 4 III. La recherche de documents... 4 Rechercher tous les documents...

Plus en détail

Copyright Marc REYNAUD messagerie@formenligne.org. Copyright Marc REYNAUD www.formenligne.org Page 1

Copyright Marc REYNAUD messagerie@formenligne.org. Copyright Marc REYNAUD www.formenligne.org Page 1 0 Cette série d ouvrages numériques et destinée soit : - aux enseignants et formateurs qui cherchent des supports de cours pour leurs classes et les groupes d adultes en formation. - aux particuliers qui

Plus en détail

4. Créer des compteurs, des curseurs ou des bandes déroulantes : a) Création des objets. b) Affectation à une cellule et réglage du pas.

4. Créer des compteurs, des curseurs ou des bandes déroulantes : a) Création des objets. b) Affectation à une cellule et réglage du pas. Logiciel Excel version Office 2007. Voici une liste non exhaustive de fonctions de ce logiciel en relation avec le stage. Au sommaire : 1. Créer des boutons de raccourci dans une barre d outils: a) Sélection

Plus en détail

Choisissez l un des modèles et dans la zone Options dans le volet de droite indiquez où vous désirez voir apparaître la Barre de navigation.

Choisissez l un des modèles et dans la zone Options dans le volet de droite indiquez où vous désirez voir apparaître la Barre de navigation. Publisher 2007 Créer une composition de type WEB Pour pouvoir publier votre site Web sur le Web, vous devez vous abonner à un service d'hébergement Web après d'un fournisseur de services Internet. Ce service

Plus en détail

Guide de démarrage rapide Centre de copies et d'impression Bureau en Gros en ligne

Guide de démarrage rapide Centre de copies et d'impression Bureau en Gros en ligne Guide de démarrage rapide Centre de copies et d'impression Bureau en Gros en ligne Aperçu du Centre de copies et d'impression Bureau en Gros en ligne Pour accéder à «copies et impression Bureau en Gros

Plus en détail

Microsoft WORD. Sommaire :

Microsoft WORD. Sommaire : Le traitement de texte avec : Microsoft WORD Sommaire : 1 Le traitement de texte : usages typographiques ITALIQUE Règles Typographiques On se sert de l italique pour attirer l attention sur un mot, sur

Plus en détail

MANUEL DE FORMATION SUR ADMINISTRATION D UN SITE WEB JOOMLA : NIVEAU GESTIONNAIRE

MANUEL DE FORMATION SUR ADMINISTRATION D UN SITE WEB JOOMLA : NIVEAU GESTIONNAIRE MANUEL DE FORMATION SUR ADMINISTRATION D UN SITE WEB JOOMLA : NIVEAU GESTIONNAIRE NB : Les numéros entre parenthèses représentent les icônes spécifiques. L objectif de cette formation est de permettre

Plus en détail

EDITEUR DE PAGE HTML NETSCAPE COMPOSER

EDITEUR DE PAGE HTML NETSCAPE COMPOSER EDITEUR DE PAGE HTML NETSCAPE COMPOSER Utilisation Netscape Composer est un éditeur de pages HTML : il vous permet de modifier et créer des pages au format HTML pour les diffuser sur le Web. Il est intégré

Plus en détail

Gestion des documents avec ALFRESCO

Gestion des documents avec ALFRESCO Gestion des documents avec ALFRESCO 1 INTRODUCTION : 2 1.1 A quoi sert ALFRESCO? 2 1.2 Comment s en servir? 2 2 Créer d un site collaboratif 3 2.1 Créer le site 3 2.2 Inviter des membres 4 3 Accéder à

Plus en détail

4. Créer un compte utilisateur

4. Créer un compte utilisateur 4. Créer un compte utilisateur 1 - Cliquez sur le menu Outils puis sur Compte. 2 - Cliquez sur l onglet «Courrier». 3 - Cliquez sur «Ajouter» puis «Courrier». 4 - Tapez votre nom. 5 - Ecrivez votre mél

Plus en détail

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X Groupe Eyrolles, 2003, ISBN : 2-212-11317-X 3 Création de pages dynamiques courantes Dans le chapitre précédent, nous avons installé et configuré tous les éléments indispensables à la mise en œuvre d une

Plus en détail

ENVOI EN NOMBRE DE FAX PERSONNALISES

ENVOI EN NOMBRE DE FAX PERSONNALISES FAXING ENVOI EN NOMBRE DE FAX PERSONNALISES 2 Téléchargement 3 Installation 7 Configuration de la consôle de télécopie de Windows XP 11 Ecran D accueil 20 Création du document texte personnalisé à Faxer

Plus en détail

Le tableur de la suite Open Office

Le tableur de la suite Open Office Le tableur de la suite Open Office Open Office est une suite bureautique qui comporte traitement de texte, tableur, Présentation Assistée par Ordinateur (PréAO), dessin et édition de pages Web au format

Plus en détail

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE 1 Environnement Lancement du logiciel : ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE Atelier «pour approfondir» Le tableur OpenOffice Calc o Menu Démarrer > Tous les programmes > OpenOffice.org > OpenOffice.org

Plus en détail

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...

Plus en détail

Formation Windows 7 créer par ABC-INFO47

Formation Windows 7 créer par ABC-INFO47 Formation Windows 7 par ABC-INFO47 Page 1 SOMMAIRE L ordinateur et les périphériques... 3 Le bureau de Windows 7... 3 Liste des icônes principales du bureau :... 4 Personnaliser les icones du bureau :...

Plus en détail

Utilisation de Sarbacane 3 Sarbacane Software

Utilisation de Sarbacane 3 Sarbacane Software Tutorial par Anthony Da Cruz Utilisation de Sarbacane 3 Sarbacane Software Ambiance Soleil 17 Rue Royale 74000, Annecy Sommaire 1. Présentation générale 2. Guide étape par étape 3. Astuces de l éditeur

Plus en détail

Naviguer sur le web avec Firefox 0.93

Naviguer sur le web avec Firefox 0.93 Naviguer sur le web avec Firefox 0.93 Firefox est le navigateur indépendant que l'on retrouve dans la suite internet Mozilla. On le lance en double-cliquant sur son icône et on obtient la fenêtre suivante

Plus en détail

Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée.

Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée. Créer un site Internet à l aide du logiciel NVU Le logiciel NVU, permet l édition Wysiwyg (What You See, Is What You Get, ce que vous voyez, est ce que vous obtenez ) d un site internet. Vous rédigez le

Plus en détail

MESSAGERIE ÉLECTRONIQUE

MESSAGERIE ÉLECTRONIQUE MESSAGERIE ÉLECTRONIQUE OUTLOOK EXPRESS DE MICROSOFT VERSION 5 1. LE «COURRIEL», «COURRIER ÉLECTRONIQUE», «MESSAGE ÉLECTRONIQUE», LES «E-MAILS» C EST QUOI ET ÇA SERT À QUOI? Premièrement, tous ces mots

Plus en détail

14- Supprimer un article écrit par un rédacteur...12 15- Télécharger un fichier HTML...14 16- Télécharger un diaporama...16

14- Supprimer un article écrit par un rédacteur...12 15- Télécharger un fichier HTML...14 16- Télécharger un diaporama...16 Alimenter Guppy v4.6 Table des matières Alimenter Guppy v4.6...1 1- Se connecter...2 2- Écrire une nouvelle...2 3- Écrire un article...3 4- Modifier un article...4 5- L'éditeur de texte...4 6- Ajouter

Plus en détail

Gérer des sites avec Dreamweaver

Gérer des sites avec Dreamweaver Gérer des sites avec Dreamweaver La boîte de dialogue Gérer les sites a pour fonction de vous permettre de créer un nouveau site, de modifier, de dupliquer, de supprimer un site, d'importer ou d'exporter

Plus en détail

Google Drive, le cloud de Google

Google Drive, le cloud de Google Google met à disposition des utilisateurs ayant un compte Google un espace de 15 Go. Il est possible d'en obtenir plus en payant. // Google Drive sur le web Se connecter au site Google Drive A partir de

Plus en détail

MANUEL D UTILISATION DE VOTRE SITE INTERNET

MANUEL D UTILISATION DE VOTRE SITE INTERNET MANUEL D UTILISATION DE VOTRE SITE INTERNET SOMMAIRE PRESENTATION 3 IDENTIFICATION.. 4 LE MENU (paramètres, contenu, divers).... 5 MENU PARAMETRES (mes coordonnées, mes photos, mes menus, mon bandeau).

Plus en détail

Visite guidée de Composer

Visite guidée de Composer Visite guidée de Composer de la Pointe-de-l Île 1.Démarrez Netscape en double-cliquant sur l icone: 2.Démarrez Composer en cliquant sur l icône au bas de votre navigateur: 2 3. Vous entrez dans Composer

Plus en détail

1ère année LMD informatique/mathématique, UHL Batna. Module Bureautique. TD n 2 Windows XP

1ère année LMD informatique/mathématique, UHL Batna. Module Bureautique. TD n 2 Windows XP 1 TD n 2 Windows XP 1. Définition Windows est le système d'exploitation fourni par la compagnie Microsoft. Windows XP est un système multiutilisateur et multitâche qui fonctionne sur les micro-ordinateurs

Plus en détail

1. PRESENTATION. La Messagerie, Elle permet d envoyer des messages, d en recevoir, de les lire et d y répondre.

1. PRESENTATION. La Messagerie, Elle permet d envoyer des messages, d en recevoir, de les lire et d y répondre. 1. PRESENTATION 1.1. LE LOGICIEL MICROSOFT OUTLOOK Le gestionnaire d informations Bureautique Microsoft OUTLOOK 2000 permet de communiquer sur le réseau interne d une entreprise ou via Internet, de gérer

Plus en détail

Nous allons détailler dans cette documentation les fonctionnalités pour créer un objet colonne.

Nous allons détailler dans cette documentation les fonctionnalités pour créer un objet colonne. Généralités Dans le générateur d états des logiciels Ciel pour Macintosh vous avez la possibilité de créer différents types d éléments (texte, rubrique, liste, graphiques, tableau, etc). Nous allons détailler

Plus en détail

A3W GUIDE UTILISATEUR

A3W GUIDE UTILISATEUR A3W GUIDE UTILISATEUR AGENA 3000 - Rue des Pagannes - BP 726-49307 CHOLET CEDEX Tél : 02.41.46.33.00 - Fax : 02.41.46.38.58 E-courriel :mb@monclocher.com SOMMAIRE 1- Publier des informations et/ou Photos

Plus en détail

Introduction à Word 2007 (Version A2015)

Introduction à Word 2007 (Version A2015) Introduction à Word 2007 (Version A2015) Table des matières Le bouton Office... 3 Le ruban... 3 Les boîtes de dialogues... 3 Onglet Accueil... 4 Les styles... 4 Afficher les styles... 4 Appliquer un style...

Plus en détail

Silfid : Agence de création de site internet, formations et Conseils Retour sommaire

Silfid : Agence de création de site internet, formations et Conseils Retour sommaire Sommaire ILFID vous accueille dans sa salle de formation équipée d ordinateurs en réseau et connectés internet, d'un vidéo- Sprojecteur et tableau blanc. Nos solutions sont éligibles aux critères de financement

Plus en détail

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1 Guide d'administration du site Internet Page 1 Scolasite permet de créer rapidement un site Internet, sans connaissances techniques particulières. Spécialement destiné aux établissements scolaires, son

Plus en détail

Accéder au carnet de contacts

Accéder au carnet de contacts Pour vous faciliter le travail et ne pas avoir, chaque fois, à rechercher l'adresse d'un correspondant habituel, enregistrez vos destinataires courants dans un carnet de contacts. Lorsque vous enverrez

Plus en détail

OPEN OFFICE.org. Sommaire :

OPEN OFFICE.org. Sommaire : Le traitement de texte avec : OPEN OFFICE.org OpenOffice Writer est la partie traitement de texte d'openoffice. org, la suite bureautique libre. Cette suite bureautique est téléchargeable librement et

Plus en détail

Support de cours Word 2007-2010. Formation bureautique. Support de cours textuel pour l apprentissage de Word 2007-2010

Support de cours Word 2007-2010. Formation bureautique. Support de cours textuel pour l apprentissage de Word 2007-2010 Support de cours Word 2007-2010 Formation bureautique Support de cours textuel pour l apprentissage de Word 2007-2010 Richard Loustau admin@apprendre-la-bureautique.com Support de cours-traitement de texte

Plus en détail

LISTES DE DISTRIBUTION GÉRÉES PAR SYMPA DOCUMENT EXPLICATIF DE ÉCOLE POLYTECHNIQUE

LISTES DE DISTRIBUTION GÉRÉES PAR SYMPA DOCUMENT EXPLICATIF DE ÉCOLE POLYTECHNIQUE LISTES DE DISTRIBUTION GÉRÉES PAR SYMPA DOCUMENT EXPLICATIF DE L'INTERFACE WEB POUR L AJOUT D UN DOCUMENT À PARTAGER ENTRE LES MEMBRES D UNE LISTE DE DIFFUSION ÉCOLE POLYTECHNIQUE NOVEMBRE 2003 PARTAGE

Plus en détail

LES ASTUCES POUR OFFICE 2010

LES ASTUCES POUR OFFICE 2010 CHAPITRE 1 LES ASTUCES POUR OFFICE 2010 Des astuces communes aux logiciels... 11 9 Microsoft Office 2010, d abord désigné sous le nom d Office 14, est la dernière version de la suite bureautique de Microsoft.

Plus en détail

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12 Pages et sites Web Table des matières 1 Microsoft Expression Web S'orienter vers l'accessibilité...12 Espace de travail Installer le logiciel...13 Lancer/quitter Microsoft Expression Web 2...13 Découvrir

Plus en détail

INITIATION AU SYSTEME D EXPLOITATION WINDOWS 2000

INITIATION AU SYSTEME D EXPLOITATION WINDOWS 2000 INITIATION AU SYSTEME D EXPLOITATION WINDOWS 2000 Introduction : Initiation à la Micro- Informatique 1. Matériel 2. Périphériques a) Le clavier b) La souris c) L écran d) L unité centrale e) L imprimante

Plus en détail

Espace FOAD IRTS Guide de l étudiant Septembre 2009

Espace FOAD IRTS Guide de l étudiant Septembre 2009 Espace FOAD IRTS Guide de l étudiant Septembre 2009 0BPRESENTATION DE L'ESPACE FOAD IRTS... 2 2BCONSULTER LES CONTENUS DE FORMATION... 3 3BGERER SON MOT DE PASSE... 4 8BMODIFIER SON MOT DE PASSE... 4 9BQUELQUES

Plus en détail

Naviguer CHARGER ET QUITTER INTERNET EXPLORER

Naviguer CHARGER ET QUITTER INTERNET EXPLORER Naviguer UTILISER UN NAVIGATEUR CHARGER ET QUITTER INTERNET EXPLORER Pour pouvoir travailler avec votre application Internet Explorer il est indispensable de l'ouvrir. Pour réaliser cette opération plusieurs

Plus en détail

Manuel d utilisation de la messagerie. http://zimbra.enpc.fr

Manuel d utilisation de la messagerie. http://zimbra.enpc.fr Manuel d utilisation de la messagerie http://zimbra.enpc.fr ÉCOLE DES PONTS PARISTECH/ DSI JANVIER 04 SOMMAIRE. Connexion à la messagerie.... Présentation générale de l écran d accueil.... Déconnexion...

Plus en détail

Présentation du logiciel WINK

Présentation du logiciel WINK BIU de Montpellier Présentation du logiciel WINK 14 octobre 2010 Olivier Doré BU Droit Sciences économiques Sommaire 1/ Présentation... 3 1.1 Exemples... 3 1.2 Installer Wink en français... 3 2/Créer un

Plus en détail

1- CRÉER UN SITE WEB FRONTPAGE

1- CRÉER UN SITE WEB FRONTPAGE 1- CRÉER UN SITE WEB FRONTPAGE 1.1 Caractéristiques d un site Web FrontPage FrontPage 2003 est un logiciel de gestion de sites Web qui offre plusieurs outils pour simplifier les tâches de conception, de

Plus en détail

L ORDINATEUR FACILE D ACCÈS!

L ORDINATEUR FACILE D ACCÈS! L ORDINATEUR FACILE D ACCÈS! Préparé par Éric Roussel, enseignant spécialisé en informatique / École Jacques-Ouellette / 2009 Préambule Il est important de noter qu il n y a pas d adaptation parfaite des

Plus en détail

Introduction à Dreamweaver CS4

Introduction à Dreamweaver CS4 Introduction à Dreamweaver CS4 Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type «tel écrit tel écran» (cette formule remplaçant désormais dans la terminologie

Plus en détail

UTILISER le TRAITEMENT de TEXTE WORD 97 (ou 2 000)

UTILISER le TRAITEMENT de TEXTE WORD 97 (ou 2 000) UTILISER le TRAITEMENT de TEXTE WORD 97 (ou 2 000) 1. Démarrer l ordinateur et attendre l affichage du bureau Le bureau L image du bureau peutêtre changée : tous les ordinateurs n ont pas la même! 2. Double

Plus en détail

Votre adresse e-mail :... Pour consulter vos e-mails, connectez-vous sur le site : www.marche.be

Votre adresse e-mail :... Pour consulter vos e-mails, connectez-vous sur le site : www.marche.be MODE D'EMPLOI Votre adresse e-mail :... Pour consulter vos e-mails, connectez-vous sur le site : www.marche.be I. Votre adresse sur Marche.be Chacun d'entre vous possède dès à présent sa propre adresse

Plus en détail

Prise en main du traitement de texte : écrire une lettre

Prise en main du traitement de texte : écrire une lettre 22 janvier 2013 p 1 Prise en main du traitement de texte : écrire une lettre Pour permettre au plus grand nombre de réaliser cet exercice, nous utiliserons le logiciel libre Libre Office. Vous pouvez le

Plus en détail

Leçon N 2E Utilisation d un traitement de texte (2 ème partie)

Leçon N 2E Utilisation d un traitement de texte (2 ème partie) Leçon N 2E Utilisation d un traitement de texte (2 ème partie) Nous allons travailler sur la MISE EN FORME d un document. 1 Mise en forme des caractères Les logiciels Word et Writer regroupent les commandes

Plus en détail

Créer un nouveau site internet Lions e-clubhouse

Créer un nouveau site internet Lions e-clubhouse Créer un nouveau site internet Lions e-clubhouse L application Lions e-clubhouse www.e-clubhouse.org/application.php Nous sommes très heureux de pouvoir diffuser une nouvelle image du Lions Club International

Plus en détail

GUIDE Word (version intermédiaire) Version 2013

GUIDE Word (version intermédiaire) Version 2013 GUIDE Word (version intermédiaire) Version 2013 Table des matières 1. Les rubans... 2 2. Pagination... 4 3. En-tête et pied de page... 4 4. Note de bas de page ou des notes de fin de document... 6 5. Table

Plus en détail

On trouvera sur le site du CCDMD un exemple d album construit avec Cantare. (http://www.ccdmd.qc.ca/ri/cantare)

On trouvera sur le site du CCDMD un exemple d album construit avec Cantare. (http://www.ccdmd.qc.ca/ri/cantare) Cantare 2 Introduction L outil logiciel Cantare s adresse à toute personne qui veut construire des leçons visant l apprentissage d une langue par l écoute de chansons ou de fichiers sonores dont les paroles

Plus en détail

1 CREER UNE PREMIERE PAGE WEB

1 CREER UNE PREMIERE PAGE WEB CLARIS HOME PAGE 2.0 1 CREER UNE PREMIERE PAGE WEB 1.1 DEMARRER CLARIS HOME PAGE Options du document Figure 1 CLARIS HOME PAGE affiche une page vide appelée «Sans titre.htm» Pour changer la couleur de

Plus en détail

VOYAGE SCOLAIRE SUR INTERNET GUIDE UTILISATEUR

VOYAGE SCOLAIRE SUR INTERNET GUIDE UTILISATEUR VOYAGE SCOLAIRE SUR INTERNET GUIDE UTILISATEUR VOYAGE SCOLAIRE SUR INTERNET Sommaire I. ACCES POUR LES FAMILLES... 2 II. ACCES POUR LES PROFESSEURS RESPONSABLES DES VOYAGES... 4 II.1 Le Menu...5 II.2 Gestion

Plus en détail

Module Article. Plate-forme de gestion de contenu. PubliShare utilise la librairie javascript (AJAX - Web 2.0)

Module Article. Plate-forme de gestion de contenu. PubliShare utilise la librairie javascript (AJAX - Web 2.0) G U I D E D U T I L I S AT I O N Publishare Plate-forme de gestion de contenu Module Article PubliShare utilise la librairie javascript (AJAX - Web.0) Sommaire Généralités Schéma de navigation Identification

Plus en détail

Aide à l utilisation du logiciel IziSpot.Mobi

Aide à l utilisation du logiciel IziSpot.Mobi 1 Sommaire 1. Description logiciel (explication des menus)... 3 1.1. Description de la barre de menu... 3 2. Onglet configuration... 4 2.1. Gestion du logo... 4 2.1.1. Affichage du zoom... 4 2.1.2. Disposition

Plus en détail

Création de site Web à l aide de l outil SimpliSite

Création de site Web à l aide de l outil SimpliSite Centre de documentation sur l éducation des adultes et la condition féminine (CDÉACF) Création de site Web à l aide de l outil SimpliSite Par François Dallaire CDÉACF Décembre 2006 Création de site Web

Plus en détail

Edition des portails régionaux du site Nature-France par les responsables SINP (rôle «manager-portail») Table des matières

Edition des portails régionaux du site Nature-France par les responsables SINP (rôle «manager-portail») Table des matières Edition des portails régionaux du site Nature-France par les responsables SINP (rôle «manager-portail») Table des matières Objectifs du document...2 Définitions...2 Convention d écriture...2 Pré-requis...2

Plus en détail

TECHNOLOGIE DE L INFORMATION

TECHNOLOGIE DE L INFORMATION Les FICH E S - GUIDE du ta b l e u r- gr a p h e u r Ope noffic e p o u r WINDOWS TECHNOLOGIE DE L INFORMATION PRÉSENTATION de L ÉCRAN du TABLEUR de OpenOffice pour WINDOWS Barre de titre Barre de menus

Plus en détail

Windows XP. Microsoft. Sommaire :

Windows XP. Microsoft. Sommaire : Microsoft Windows XP Sommaire : OUVERTURE DE SESSION...2 LE BUREAU...3 CHANGER D ENVIRRONEMENT...4 NOUVEAU RACCOURCI...7 LE MENU DEMARRER...9 LES PROGRAMMES AU DEMARRAGE...11 LA GESTION DES FICHIERS...12

Plus en détail