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

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

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

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

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

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

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

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

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

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

Documentation Tableur OpenOffice 2

Documentation Tableur OpenOffice 2 Documentation Tableur OpenOffice 2 1. Environnement de travail Nom du Nom du logiciel Barre de Zone de nom elle affiche l'adresse du champ sélectionné Cellule active Zone d'édition : elle affiche le contenu

Plus en détail

1 AU DEMARRAGE...2 2 LE MENU DEMARRER...3

1 AU DEMARRAGE...2 2 LE MENU DEMARRER...3 Sommaire 1 AU DEMARRAGE...2 2 LE MENU DEMARRER...3 3 POUR DEMARRER UN PROGRAMME...4 4 POSITION ET DIMENSION DES FENETRES...5 POSITION...5 DIMENSION...5 UTILISER LES BARRES DE DEFILEMENT...7 POUR AFFICHER

Plus en détail

Guide d utilisation Plus de souplesse dans votre communication?

Guide d utilisation Plus de souplesse dans votre communication? Guide d utilisation Plus de souplesse dans votre communication? Un produit de la société Table des matières Table des matières... 2 Guide complet d utilisation... 3 Connexion à l administration i-flexo...

Plus en détail

Keynote. Logiciel de présentation. Sous Mac OS X. Suzanne Harvey

Keynote. Logiciel de présentation. Sous Mac OS X. Suzanne Harvey Keynote Logiciel de présentation Sous Mac OS X Suzanne Harvey Conseillère pédagogique Service local du RÉCIT Commission scolaire de Saint-Hyacinthe suzanne.harvey@prologue.qc.ca recit.cssh.qc.ca Novembre

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

Saisissez le login et le mot de passe (attention aux minuscules et majuscules) qui vous ont

Saisissez le login et le mot de passe (attention aux minuscules et majuscules) qui vous ont I Open Boutique Sommaire : I Open Boutique... 1 Onglet «Saisie des Produits»... 3 Création d'une nouvelle fiche boutique :... 3 Création d'une nouvelle fiche lieux de retraits :... 10 Création d'une nouvelle

Plus en détail

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES...

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES... Diffusion de l information dans Internet Guide de création de documents Word accessibles 5 novembre 2009 OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT...

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

iil est désormais courant de trouver sur Internet un document

iil est désormais courant de trouver sur Internet un document Matériels et systèmes L Acrobat qui cherche dans les PDF Michel NARCY - Formateur TICE et Médialog Bulletin officiel, programmes d enseignement, articles de quotidiens ou de revues scientifiques... De

Plus en détail

DÉCOUVERTE DE L ORDINATEUR

DÉCOUVERTE DE L ORDINATEUR UNIVERSITÉ D AUVERGNE FORMATION EN INFORMATIQUE CERTIFICAT INFORMATIQUE ET INTERNET DÉCOUVERTE DE L ORDINATEUR 1. ENVIRONNEMENT ET PRINCIPE DE FONCTIONNEMENT DE WINDOWS Un système d exploitation est un

Plus en détail

Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons

Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons Guide d'utilisation OpenOffice Calc AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons 1 Table des matières Fiche 1 : Présentation de l'interface...3 Fiche 2 : Créer un nouveau classeur...4

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

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

Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?

Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers? Aide [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers? Au sein d'un ordinateur, les données et les fichiers sont stockés suivant une structure d'arbre appelée arborescence. Pour

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

Optimiser pour les appareils mobiles

Optimiser pour les appareils mobiles chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...

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

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

WebShare v0.6.2 UTILISATION

WebShare v0.6.2 UTILISATION WebShare v0.6.2 UTILISATION Version française Utilisation du logiciel Entrez vos identifiants (login et mot de passe correspondants à ceux entrés dans l'administration) pour vous connecter. En cas d'erreur,

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

Windows 7 - Dossiers et fichiers

Windows 7 - Dossiers et fichiers Windows 7 - Dossiers et fichiers Explorez votre PC : dossiers et fichiers Tous les fichiers nécessaires au fonctionnement de votre ordinateur, qu il s agisse de ceux de Windows, des logiciels installés

Plus en détail

MEDIAplus elearning. version 6.6

MEDIAplus elearning. version 6.6 MEDIAplus elearning version 6.6 L'interface d administration MEDIAplus Sommaire 1. L'interface d administration MEDIAplus... 5 2. Principes de l administration MEDIAplus... 8 2.1. Organisations et administrateurs...

Plus en détail

Utiliser Word. Thibault J-Jacques Animateur multimédia au CRDP de l académie de Versailles. Page 1 sur 12

Utiliser Word. Thibault J-Jacques Animateur multimédia au CRDP de l académie de Versailles. Page 1 sur 12 Utiliser Word Les fonctions de base de Word.... 2 Enregistrer le document en cours... 3 Un menu à connaître... 3 Ouvrir/fermer/réduire un document existant... 4 Réparer des erreurs de frappe... 4 Déplacer

Plus en détail

Comment créer des GIF animés en dix étapes?

Comment créer des GIF animés en dix étapes? Comment créer des GIF animés en dix étapes? Tutoriel GIF Movie Gear Septembre 2002 Rédigé par :Visicom Média inc. 1 TABLE DES MATIERES PRÉSENTATION DE GIF MOVIE GEAR... 2 BARRE DE MENUS... 2 BARRE D'OUTILS

Plus en détail

UTILISATION CMS LINKEO

UTILISATION CMS LINKEO UTILISATION CMS LINKEO Table des matières 1 Synopsis... 3 2 Connexion à l'interface d'administration...4 3 Edition d'une page...5 3.1 Edition d'une page...5 3.2 Ajout d'une image...5 3.2.1 Transfert d'une

Plus en détail

T.P. Être efficace avec un ordinateur 05/12/03

T.P. Être efficace avec un ordinateur 05/12/03 1. Paramétrer son environnement sous Windows XP 1.1 LE BUREAU Icône de votre dossier personnel Mes documents Icône Poste de travail Bureau Icône Corbeille Menu démarrer Barre d outils : lancement rapide

Plus en détail

TUTORIEL IMPRESS. Ouvrir Impress cocher «présentation vierge», «suivant» cocher «écran», «suivant» cocher «standard», «créer»

TUTORIEL IMPRESS. Ouvrir Impress cocher «présentation vierge», «suivant» cocher «écran», «suivant» cocher «standard», «créer» TUTORIEL IMPRESS Ouvrir Impress cocher «présentation vierge», «suivant» cocher «écran», «suivant» cocher «standard», «créer» Une page impress s'ouvre : Le volet gauche contiendra toutes les diapositives

Plus en détail

GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL

GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL 1. Avant de commencer Il existe plusieurs éditeurs de pages Web qui vous permettent de construire un site Web. Nous vous conseillons toutefois de

Plus en détail

Avant-propos FICHES PRATIQUES EXERCICES DE PRISE EN MAIN CAS PRATIQUES

Avant-propos FICHES PRATIQUES EXERCICES DE PRISE EN MAIN CAS PRATIQUES Avant-propos Conçu par des pédagogues expérimentés, son originalité est d être à la fois un manuel de formation et un manuel de référence complet présentant les bonnes pratiques d utilisation. FICHES PRATIQUES

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

Bernard Lecomte. Débuter avec HTML

Bernard Lecomte. Débuter avec HTML Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.

Plus en détail

WEB. Travailler la résolution de vos pages

WEB. Travailler la résolution de vos pages GÉRER LES PAGES WEB Vous avez appris dans les sections 2 et 3 à créer le contenu textuel et graphique de vos pages Web. Cette section explique comment utiliser FrontPage pour placer des objets sur une

Plus en détail

Utilisation de l éditeur.

Utilisation de l éditeur. Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7

Plus en détail

Cliquez sur l icône représentant des livres pour afficher vos classeurs où sont rangés vos documents.

Cliquez sur l icône représentant des livres pour afficher vos classeurs où sont rangés vos documents. AIDE LOGICIEL Logiciel : PROGRELIUM (à partir de la version 2.30) Objet : Classer et ouvrir vos documents Cliquez sur l icône représentant des livres pour afficher vos classeurs où sont rangés vos documents.

Plus en détail

FrontPage Support d apprentissage septembre 2000

FrontPage Support d apprentissage septembre 2000 FrontPage Support d apprentissage septembre 2000 Table des matières Notions de base... 1 Le langage HTML... 1 Les éditeurs HTML... 1 Le navigateur... 1 Le transfert de fichiers... 1 L enregistrement des

Plus en détail

Personnaliser un thème WordPress pour un Blog de l'ara. Méthode pas à pas.

Personnaliser un thème WordPress pour un Blog de l'ara. Méthode pas à pas. Personnaliser un thème WordPress pour un Blog de l'ara. Méthode pas à pas. Table des matières I. Les outils nécessaires... 3 II. Utilisation de l'outil Artisteer.... 3 1. Pourquoi utiliser Artisteer?...

Plus en détail

Freeway 7. Nouvelles fonctionnalités

Freeway 7. Nouvelles fonctionnalités ! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer

Plus en détail

OSIRIS/ Valorisation des données PORTAIL BO MANUEL UTILISATEUR

OSIRIS/ Valorisation des données PORTAIL BO MANUEL UTILISATEUR OSIRIS/ Valorisation des données PORTAIL BO MANUEL UTILISATEUR HISTORIQUE DES VERSIONS Vers. Date Rédacteur Objet de la modification 1.00 Juillet 2007 GTBO_AGRI Création du document 1.01 Février 2009 SAMOA

Plus en détail

Table des matières. 1 À propos de ce manuel...5 1.1 Icônes utilisées dans ce manuel... 5. 1.2 Public visé... 5. 1.3 Commentaires...

Table des matières. 1 À propos de ce manuel...5 1.1 Icônes utilisées dans ce manuel... 5. 1.2 Public visé... 5. 1.3 Commentaires... Manuel utilisateur Table des matières 1 À propos de ce manuel...5 1.1 Icônes utilisées dans ce manuel... 5 1.2 Public visé... 5 1.3 Commentaires... 5 2 Généralités sur les applications web... 7 3 Module

Plus en détail

Mon aide mémoire traitement de texte (Microsoft Word)

Mon aide mémoire traitement de texte (Microsoft Word) . Philippe Ratat Mon aide mémoire traitement de texte (Microsoft Word) Département Ressources, Technologies et Communication Décembre 2006. Sommaire PRÉSENTATION DU DOCUMENT 1 Objectif principal 1 Deux

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

Gérer ses dossiers et ses fichiers

Gérer ses dossiers et ses fichiers Gérer ses dossiers et ses fichiers Au quotidien, pour ranger vos diverses factures, vos courriers, etc., vous disposez de deux solutions : tout mettre dans un carton ou créer des dossiers cartonnés et

Plus en détail

GUIDE Excel (version débutante) Version 2013

GUIDE Excel (version débutante) Version 2013 Table des matières GUIDE Excel (version débutante) Version 2013 1. Créer un nouveau document Excel... 3 2. Modifier un document Excel... 3 3. La fenêtre Excel... 4 4. Les rubans... 4 5. Saisir du texte

Plus en détail

Consignes générales :

Consignes générales : PROCÉDURE POUR DÉPÔT DANS WEBCT Consignes générales : 1) Il est important de toujours conserver une copie de votre Webfolio ou Dossier professionnel sur votre disquette, clé USB ou sur votre disque dur

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

Préface 3. Conventions typographiques... 3 Feedback... 4. Introduction 5. Se familiariser avec l'interface de SiteBuilder 6. Créer un site Web 8

Préface 3. Conventions typographiques... 3 Feedback... 4. Introduction 5. Se familiariser avec l'interface de SiteBuilder 6. Créer un site Web 8 Parallels Panel Table des matières Préface 3 Conventions typographiques... 3 Feedback... 4 Introduction 5 Se familiariser avec l'interface de SiteBuilder 6 Créer un site Web 8 Editer un site Web 9 Utiliser

Plus en détail

Je me familiarise avec l ordinateur et son système d exploitation. Apprendre à utiliser les TIC dans la vie de tous les jours

Je me familiarise avec l ordinateur et son système d exploitation. Apprendre à utiliser les TIC dans la vie de tous les jours Je me familiarise avec l ordinateur et son système d exploitation Cahier de formation 1 Apprendre à utiliser les TIC dans la vie de tous les jours Programme ordinateur de Je Passe Partout Document produit

Plus en détail

Chapitre 2 Créer son site et ses pages avec Google Site

Chapitre 2 Créer son site et ses pages avec Google Site Réaliser un site internet à l aide de Google Site 10 Chapitre 2 Créer son site et ses pages avec Google Site 1. Créer un Google site 1. Rendez-vous sur www.google.be et connectez-vous à votre compte Gmail

Plus en détail

SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5

SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5 SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5 5 ADMINISTRER SON SITE WEBGAZELLE CMS 2.0 5 5.1 Configuration minimale

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

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

1 Présentation de l'espace de travail

1 Présentation de l'espace de travail SUPPORT DE COURS 1 Présentation de l'espace de travail... 2 2 Configuration d'un site Dreamweaver... 3 3 Création d'une nouvelle page web... 4 4 Gestion des fichiers du site... 4 4.1 Pour ouvrir un fichier

Plus en détail

Aide à la prise en main

Aide à la prise en main Aide à la prise en main L'espace de travail Unity Le tableau de bord La barre de lancement rapide Gestion des fenêtres Sélecteur d'espaces de travail Nautilus Arborescence des fichiers Logithèque Installer

Plus en détail

Votre site Internet avec FrontPage Express en 1 heure chrono

Votre site Internet avec FrontPage Express en 1 heure chrono 1.1. Précautions préliminaires Votre site Internet avec FrontPage Express en 1 heure chrono Le contenu de ce site n'est pas très élaboré mais il est conçu uniquement dans un but pédagogique. Pour débuter,

Plus en détail

Windows 7 : les bases

Windows 7 : les bases Fiche Logiciel Ordinateur Niveau FL01011 09/12 Windows 7 : les bases L'utilisation d'un ordinateur suppose la découverte d'un environnement nouveau, qui a son propre vocabulaire et ses propres concepts

Plus en détail

Bienvenue à. Fichier Easistart. Visite rapide

Bienvenue à. Fichier Easistart. Visite rapide Bienvenue à Fichier Easistart Visite rapide On peut trouver ce fichier en cliquant Fichier, Ouvrir, Exemples, Easistart. Ne plus montrer ce fichier. Menu de visite rapide Sélectionnez une option ci-dessous

Plus en détail

Utilisation de l'outil «Open Office TEXTE»

Utilisation de l'outil «Open Office TEXTE» PRESENTATION / FORMATION Utilisation de l'outil «Open Office TEXTE» Présentation générale : OpenOffice Texte est un traitement de texte assez similaire à celui proposé par Microsoft ; il est d'ailleurs

Plus en détail

Formation traitement de texte niveau 3 (LibreOffice Writer version 4)

Formation traitement de texte niveau 3 (LibreOffice Writer version 4) Formation traitement de texte niveau 3 (LibreOffice Writer version 4) L objectif général de cette formation est d utiliser LibreOffice Writer dans ses fonctions les plus avancées : insertion de zones de

Plus en détail

AVANT DE COMMENCER INTRODUCTION

AVANT DE COMMENCER INTRODUCTION AVANT DE COMMENCER Le contenu sur le World Wide Web est maintenant divisé en plusieurs pages. La page d'introduction au World Wide Web contient une introduction et une description des éléments que l'on

Plus en détail

Suzanne Harvey

<Créer un site Web. avec/> Suzanne Harvey aire l o c s texte n o c le Dans Suzanne Harvey Conseillère pédagogique en informatique Service local du RÉCIT Commission scolaire de Saint-Hyacinthe Québec, Canada suzanne.harvey@prologue.qc.ca

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

REALISER UN SITE INTERNET AVEC IZISPOT SOMMAIRE

REALISER UN SITE INTERNET AVEC IZISPOT SOMMAIRE REALISER UN SITE INTERNET AVEC IZISPOT Voici un tutoriel pour vous aider à réaliser un petit site internet (4 pages) à l'aide du logiciel gratuit IZISPOT. Dans l'exemple qui suit, il s'agit de mettre en

Plus en détail

Manuel d utilisation email NETexcom

Manuel d utilisation email NETexcom Manuel d utilisation email NETexcom Table des matières Vos emails avec NETexcom... 3 Présentation... 3 GroupWare... 3 WebMail emails sur internet... 4 Se connecter au Webmail... 4 Menu principal... 5 La

Plus en détail

-Tous les Programmes Accessoires - Explorateur Windows

-Tous les Programmes Accessoires - Explorateur Windows L Explorateur L Explorateur : L explorateur Windows constitue un aperçu global de votre environnement informatique (l ordinateur et son contenu ), ainsi que les ordinateurs du réseau. Vous retrouverez

Plus en détail

Note de cours. Introduction à Excel 2007

Note de cours. Introduction à Excel 2007 Note de cours Introduction à Excel 2007 par Armande Pinette Cégep du Vieux Montréal Excel 2007 Page: 2 de 47 Table des matières Comment aller chercher un document sur CVMVirtuel?... 8 Souris... 8 Clavier

Plus en détail

Niveau 2. Atelier d'initiation à l'ordinateur et à Windows ... xfondation de la Bibliothèque Memphrémagog inc. Magog (Québec) J1X 2E7 Tél.

Niveau 2. Atelier d'initiation à l'ordinateur et à Windows ... xfondation de la Bibliothèque Memphrémagog inc. Magog (Québec) J1X 2E7 Tél. xfondation de la Bibliothèque Memphrémagog inc. Magog (Québec) J1X 2E7 Tél. : 843-1330. Atelier d'initiation à l'ordinateur et à Windows Niveau 2.......... JB 15 septembre 2008 ( Canevas original : Marcel

Plus en détail

Support Gestionnaire pour les nouvelles versions CPM (outil Drupal) Télésanté Aquitaine

Support Gestionnaire pour les nouvelles versions CPM (outil Drupal) Télésanté Aquitaine Support Gestionnaire pour les nouvelles versions CPM (outil Drupal) Objet du document Ce document a pour but d'apporter des éléments de support au gestionnaire des nouvelles communautés de pratiques médicales.

Plus en détail

FORMATION EXCEL 2003 PRISE EN MAIN D'EXCEL LIVRET 1. THIERRY TILLIER www.coursdinfo.fr

FORMATION EXCEL 2003 PRISE EN MAIN D'EXCEL LIVRET 1. THIERRY TILLIER www.coursdinfo.fr FORMATION EXCEL 2003 PRISE EN MAIN D'EXCEL LIVRET 1 THIERRY TILLIER www.coursdinfo.fr INTRODUCTION Dans ce premier livret vous allez apprendre les fonctionnalités élémentaires de l'application Excel. Vous

Plus en détail

Notes pour l utilisation d Expression Web

Notes pour l utilisation d Expression Web EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface

Plus en détail

Gestion du Serveur Web

Gestion du Serveur Web Gestion du Serveur Web Console de gestion du Serveur Web Une console de gestion est disponible dans l'outil de l'administrateur. Cette console de gestion vous permet de configurer les services JetClouding

Plus en détail

Formation au logiciel Typo3, pour les rédacteurs.

Formation au logiciel Typo3, pour les rédacteurs. 1 Formation au logiciel Typo3, pour les rédacteurs. 1 Accéder au système 2 1.1 Configuration du navigateur 2 1.2 Identification 2 2 L interface 2 2.1 Le module Web 3 2.2 Le module Media 3 2.3 Le module

Plus en détail

Dans la série. présentés par le site FRAMASOFT

Dans la série. présentés par le site FRAMASOFT Dans la série Les tutoriels libres présentés par le site FRAMASOFT CRÉER DES EXERCICES AVEC JCLIC-AUTHOR Logiciel: JClic-author Plate-forme(s): Linux, Windows, Mac OS X Version: 0.1.1.9 Licence: GNU General

Plus en détail

Access 2007 FF Access FR FR Base

Access 2007 FF Access FR FR Base ACCESS Basic Albertlaan 88 Avenue Albert Brussel B-1190 Bruxelles T +32 2 340 05 70 F +32 2 340 05 75 E-mail info@keyjob-training.com Website www.keyjob-training.com BTW TVA BE 0425 439 228 Access 2007

Plus en détail

Guide de l utilisateur. Faites connaissance avec la nouvelle plateforme interactive de

Guide de l utilisateur. Faites connaissance avec la nouvelle plateforme interactive de Guide de l utilisateur Faites connaissance avec la nouvelle plateforme interactive de Chenelière Éducation est fière de vous présenter sa nouvelle plateforme i+ Interactif. Conçue selon vos besoins, notre

Plus en détail

INSERER DES OBJETS - LE RUBAN INSERTION... 3 TABLEAUX

INSERER DES OBJETS - LE RUBAN INSERTION... 3 TABLEAUX TABLE DES MATIERES Livret Utilisateur Excel 2007 Niveau 2 INSERER DES OBJETS - LE RUBAN INSERTION... 3 TABLEAUX... 4 Les tableaux croisés dynamiques... 4 Création d un tableau croisé... 5 Comparer des

Plus en détail

RETOUCHE D IMAGES AVEC PHOTOFILTRE (V. 6)

RETOUCHE D IMAGES AVEC PHOTOFILTRE (V. 6) RETOUCHE D IMAGES AVEC PHOTOFILTRE (V. 6) PhotoFiltre est un logiciel gratuit qui permet d effectuer quelques retouches de base aux photos venant d appareils photo numériques ou scannées. On peut le télécharger

Plus en détail

MACROMEDIA DREAMWEAVER 3.0

MACROMEDIA DREAMWEAVER 3.0 MACROMEDIA DREAMWEAVER 3.0 1. PRINCIPES DE BASE Dreamweaver est un logiciel auteur visuel professionnel destiné à la création et à la gestion de sites et pages Web. Avec Dreamweaver, il est facile de créer

Plus en détail

Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia -

Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia - UVERSITE A. MIRA - BEJAIA Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia - Prise en main de CMS Joomla Exploitation des ressources Recommandations et Règles

Plus en détail

Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014

Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014 Identification du contenu des évaluations Septembre 2014 Tous droits réservés : Université de Montréal Direction des ressources humaines Table des matières Excel Base version 2010... 1 Excel intermédiaire

Plus en détail

E X C E L 97 INITIATION

E X C E L 97 INITIATION E X C E L 97 INITIATION Mireille Ducellier Novembre 2002 Excel vous permettra d'effectuer des calculs, de relier des tableaux entre eux, de gérer les données dans un tableau et de représenter graphiquement

Plus en détail

Documentation Honolulu 14 (1) - 0209

Documentation Honolulu 14 (1) - 0209 Documentation Honolulu 14 (1) - 0209 Honolulu 14 3 Sommaire Honolulu 14 le portail Intranet / Internet de votre entreprise PARTIE 1 -MANUEL UTILISATEUR 1. LE PORTAIL HONOLULU : PAGE D ACCUEIL 8 1.1 Comment

Plus en détail

Inspection Académique de la Somme. LeechFTP. logiciel de transfert de fichiers. Imprimer cette page au format PDF. Nécessite Acrobat Reader

Inspection Académique de la Somme. LeechFTP. logiciel de transfert de fichiers. Imprimer cette page au format PDF. Nécessite Acrobat Reader LeechFTP logiciel de transfert de fichiers Imprimer cette page au format PDF. Nécessite Acrobat Reader Téléchargement Installation Personnalisation Transfert de fichiers D'autres ressources à travers l'internet

Plus en détail

Safari, navigateur web intégré à Mac OS X

Safari, navigateur web intégré à Mac OS X Service informatique Enseignement Recherche Fiche n 50 13/11/2003 Safari, navigateur web intégré à Mac OS X Alternative à Internet Explorer et à Netscape, SAFARI est le navigateur web intégré à Mac OS

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

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

OneDrive, le cloud de Microsoft

OneDrive, le cloud de Microsoft OneDrive est le cloud mis à disposition par Microsoft. Pour en profiter, il suffit de disposer d'un compte Microsoft (Tutoriel), Microsoft offre 10 Go de stockage (Dont 3 Go pour sauvegarder des photos).

Plus en détail

Comment utiliser FileMaker Pro avec Microsoft Office

Comment utiliser FileMaker Pro avec Microsoft Office Guide d utilisation Comment utiliser FileMaker Pro avec Microsoft Office Comment utiliser FileMaker Pro et Microsoft Office page 1 Table des matières Introduction... 3 Avant de commencer... 4 Partage de

Plus en détail

Rendre un plan de cours interactif avec Médiator

Rendre un plan de cours interactif avec Médiator Rendre un plan de cours interactif avec Médiator : L'ensemble de cette démarche consiste à réaliser une série de pages sous Médiator dans le but de créer une présentation intégrant les divers documents

Plus en détail

CRÉER ET GÉRER UN SITE WEB AVEC FRONTPAGE U.P.S. TOULOUSE C.F.A.T.I.C.

CRÉER ET GÉRER UN SITE WEB AVEC FRONTPAGE U.P.S. TOULOUSE C.F.A.T.I.C. U.P.S. TOULOUSE C.F.A.T.I.C. CRÉER ET GÉRER UN SITE WEB AVEC FRONTPAGE Téléphone 05 61 55 67 98 Centre de Formation aux Applications des Technologies de l information et de la Communication Courrier électronique

Plus en détail

a. Identifier les éléments de l interface utilisée (icônes, menus, etc.)

a. Identifier les éléments de l interface utilisée (icônes, menus, etc.) Page 1 / 14 a. Identifier les éléments de l interface utilisée (icônes, menus, etc.) Le système d exploitation Qu'est ce que Windows? C est un programme qui va gérer toutes les activités de l ordinateur.

Plus en détail