Document de travail de la Mission Informatique des CIO de l'académie de Créteil. Conception et réalisation: JF CASTELL et l'équipe des COP chargés de

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

Download "Document de travail de la Mission Informatique des CIO de l'académie de Créteil. Conception et réalisation: JF CASTELL et l'équipe des COP chargés de"

Transcription

1 Document de travail de la Mission Informatique des CIO de l'académie de Créteil. Conception et réalisation: JF CASTELL et l'équipe des COP chargés de mission en informatique.

2 Sommaire: CHAPITRE 1: DÉCOUVERTE DE L ÉCRAN DE TRAVAIL DE DREAMWEAVER... 3 CHAPITRE 2 : OBJECTIFS DU MANUEL DESSINEZ L ARCHITECTURE DE VOTRE SITE SUR PAPIER INSTALLEZ TOUS LES ÉLÉMENTS LOGICIELS ET MATÉRIELS NÉCESSAIRES À LA GESTION DE VOTRE SITE... 4 L environnement logiciel... 4 L environnement matériel PRÉPAREZ TOUS LES ÉLÉMENTS DE VOTRE SITE... 4 Le texte... 5 Les dessins... 5 Les images... 5 CHAPITRE 3 : DÉFINITION DE LA STRUCTURE DU SITE : LA «PAGE D ACCUEIL» LA «HOME-PAGE» OU PAGE D ACCUEIL L ÉLÉMENT CLÉ DE DREAMWEAVER CRÉATION DU DOSSIER LOCAL CRÉATION DE LA PAGE D ACCUEIL AJOUT D ÉLÉMENTS À NOTRE «HOME PAGE»... 8 CHAPITRE 4 : MISE EN PAGE.(TEXTE, TABLEAU, IMAGE ) LE TEXTE LES TABLEAUX LES IMAGES CHAPITRE 5 : CRÉATION DE LIENS LE POSITIONNEMENT DE LA PAGE Les chemins absolus Les chemins relatifs à la racine Les chemins relatifs au document ÉTABLISSEMENT D'UN LIEN VERS UN DOCUMENT ÉTABLISSEMENT D'UN LIEN VERS UNE ANCRE NOMMÉE ÉTABLISSEMENT D'UN LIEN AVEC UNE PAGE HÉBERGÉE SUR UN AUTRE SITE UN LIEN SPÉCIFIQUE : POUR ENVOYER UN MESSAGE DIRECTEMENT AU CIO VÉRIFIER LA COHÉRENCE DES LIENS CHAPITRE 6 : AGRÉMENTER VOTRE PAGE INSÉRER ET CRÉER UN LOGO ANIMÉ INSÉRER UN «ROLL-OVER» (EFFET DE SURVOL) INSÉRER UNE «IMAGE MAP» (IMAGE CLIQUABLE) SUR LA CARTE DU DISTRICT CHAPITRE 7 : TESTER VOTRE SITE ET LE METTRE EN LIGNE TESTER LE SITE LE METTRE EN LIGNE (INITIATION AU FILE TRANSFERT PROTOCOL FTP) LES ÉVENTUELLES ERREURS DE MISE EN LIGNE CHAPITRE 8 : RÉFÉRENCER LE SITE POUR QU IL SOIT ACCESSIBLE LE TITRE DE LA PAGE LES ÉLÉMENTS DE RÉFÉRENCEMENT LES MOTEURS DE RECHERCHES ET ANNUAIRES CHAPITRE 9 : LES PLUS POUR ALLER PLUS LOIN ANIMATION EN DHTML AVEC LES CALQUES INSERTION D UN COMPOSANT VECTORIEL ANIMÉ RÉALISÉ AVEC FLASH UN TEXTE PERSONNALISÉ DANS LA BARRE D ÉTAT /23

3 Chapitre 1: Découverte de l écran de travail de Dreamweaver Dreamweaver est un éditeur visuel professionnel pour la création et la gestion de pages web qui permet de créer aisément des pages compatibles avec toute une série de platesformes et de navigateurs. L écran de travail de Dreamweaver est composé au démarrage de 4 zones principales. En premier nous travaillerons sur la fenêtre de document (1) actif, celle-ci affiche le document Web à peu de choses près comme il apparaîtra dans le navigateur. Elle fonctionne pratiquement comme un traitement de texte. Lorsque vous saisissez du texte, le logiciel génère automatiquement le code HTML correspondant sans avoir à connaître une seule règle. Le deuxième élément est composé par la palette des objets (2). C est une sorte de centre de commande par où l on doit passer pour insérer rapidement toute une sorte d objets qui viendront constituer notre page Web (images, tableaux mais aussi composants javasripts, ou java voire Flash. Vient ensuite l Inspecteur des propriétés (3) qui permet à tout moment de visualiser (et donc modifier ou attribuer) les propriétés d un objet. Pour modifier il suffit de sélectionner et de regarder dans l inspecteur de propriétés les choix qui ont été opérés (couleurs, taille de police, fonte, alignement ). Enfin nous terminerons notre visite guidée dans l environnement de travail de Dreamweaver 2 en détaillant la dernière palette qui se nomme le lanceur (4). Sa fonction permet d afficher et / ou masquer les palettes et inspecteurs différents. Figure 1 : La fenêtre de travail et l environnement de Dreamweaver. Chapitre 2 : Objectifs du manuel 3/23

4 1. Dessinez l architecture de votre site sur papier Il s agit de préciser où nous voulons aller. En l occurrence, nous voulons créer un site Web comportant une page d accueil (la home page), et deux ou trois autres pages toutes liées entre-elles. En outre il conviendra de lier notre page avec la page d accueil du SAIO et éventuellement de l académie. De plus, on insèrera des images du centre ainsi qu une carte du district avec les coordonnées des établissements et éventuellement des liens vers ceux-ci directement depuis l image (image map). 2. Installez tous les éléments logiciels et matériels nécessaires à la gestion de votre site L environnement logiciel Pour construire un site Web, il vous faut différents éléments logiciels qui peuvent être soit payants, soit gratuits, soit utilisables pendant une durée limitée de temps (en général un mois). Il n est donc pas nécessaire de prévoir un budget extraordinaire pour s afficher sur le réseau des réseaux. Vous devez posséder : 1. Un logiciel de construction Web (on supposera que vous avez fait l acquisition de Dreamweaver lorsque vos CCMI vous ont signalé l opportunité d en faire l acquisition à un prix défiant toute concurrence). 2. Un logiciel de dessin type Paint Shop Pro. 3. Un logiciel de mise en ligne des pages, (mais Dreamweaver le fait très bien tout seul) type Ws_FTP (LE). 4. Un logiciel de traitement du son si vous voulez disposer des éléments sonores en ligne (attention au volume de données). Eventuellement, un logiciel de traitement vidéo (même remarque). 5. Un logiciel d animation graphique (type Flash ou de création de Gif animés). Tous ces produits sont disponibles sur le CD de la mission volume 1 à 3, n hésitez pas à les installer pour vous familiariser. L environnement matériel En fait, il faut un ordinateur, bien sûr, équipé d un modem pour l installation du site en ligne. Cette étape ne se faisant qu au dernier moment. Éventuellement vous pouvez disposer d un scanner si vous voulez utiliser des photos ou récupérer des textes sans avoir à les ressaisir. Enfin, vous avez la possibilité d utiliser directement un appareil photo numérique disponible sur simple demande auprès de la délégation régionale de l ONISEP pour tous les CIO de l académie de Créteil 3. Préparez tous les éléments de votre site Une fois l architecture du site arrêtée, et une fois le contenu détaillé selon des grandes directives, il est temps d attaquer l étape suivante : préparer tous les éléments qui viendront nourrir notre site. Nous l avons vu, textes, photos, dessins et éventuellement sons et vidéo sont les principaux acteurs de la page. Même si ces derniers doivent être traités à part en raison de leur plus grande complexité à être manipulés et à leur plus gros volume de données. Textes, photos et dessins, ne sont pas directement utilisables dans la construction de pages. A partir d une matière brute, chacun de ces éléments doit subir des modifications afin d être optimisé pour le Web. Détaillons. 4/23

5 Le texte Deux techniques, soit la récupération par copier coller, soit la ressaisie directe dans Dreamweaver. Attention toutefois, les possibilités de formatage du texte pour la publication en ligne sont nettement en dessous de celles offertes par un banal traitement de texte. Les dessins De jolis dessins peuvent conférer un très joli cachet, d autant plus que certains logiciels permettent d animer les images. Par exemple, avec quelques efforts vous pouvez rendre une flèche clignotante qui sera du plus bel effet sur votre page. Si vous ne voulez pas vous compliquer l existence, un beau dessin sur papier fera parfaitement l affaire à condition de le traiter comme une image. Il suffit ensuite de le numériser avec un scanner en conservant des paramètres optimisés pour le Web, c est à dire avec une résolution faible (72 ppp). Les images Eléments incontournables d une page, les images doivent généralement subir une cure d amaigrissement drastique pour pouvoir être utilisées correctement. L obsession doit être celle du poids, c est à dire de la vitesse d affichage de votre page pour tout surfeur qui visite votre page. Pour cela : 1. Abaissez le nombre de couleurs utilisées. 2. Réduisez la résolution et la taille de vos images. Le poids de celle-ci devrait alors fondre. 3. Prenez l habitude de travailler vos images en pixel et non en centimètres. 4. Les format les plus adaptés au Web sont le GIF, le JPG et le PNG. Le Gif ne peut afficher que 256 couleurs mais permet la transparence et l animation d images. Le JPG permet l affichage en millions de couleurs, mais agresse l image par une compression très forte, il est à privilégier pour les images à tons continus (les paysages par exemple). Chapitre 3 : Définition de la structure du site : la «page d accueil» 1. La «home-page» ou page d accueil l élément clé de Dreamweaver Tout site commence par la création d une page d accueil, la fameuse «home page», et selon l hébergeur choisi, celle-ci doit se nommer précisément. Sur ac-creteil.fr le webmaster de l académie a fixé le nom, qui doit être welcome.htm (ou html) et peut éventuellement s appeler bienvenue.htm. Cette page d accueil une fois définie, va s articuler avec d autres pages qui composeront notre site. Avec Dreamweaver, cette création s accompagne d un préalable de base qui est la création d un dossier racine local. Ce dossier particulier sert à accueillir le site lui même, et pour des raison de commodité, on conseille que celui ci soit fixé à la racine du disque dur (général C). De plus, son nom et sa structure doivent être identiques à celle du disque distant qui contiendra vos pages visibles depuis le reste du monde. 2. Création du dossier local Sur votre disque dur commencez par créer un dossier comme indiqué dans la figure ci dessous. 1. Ouvrez l Explorateur Windows et positionnez vous sur le disque C : 2. Une fois le contenu du disque affiché, cliquez dans le menu fichier, puis choisissez Nouveau, puis Dossier, saisissez le nom de votre CIO (exemple tremblay prenez 5/23

6 contact avec votre CCMI pour connaître le nom des dossier distant sur le serveur de Créteil). 3. Lorsque vous avez nommé le dossier positionnez vous à l intérieur, puis recommencez la procédure de création de dossier, pour créer un nouveau dossier qui s appellera images : La structure du site local est alors la suivante c:\nom_du_cio\images\. 4. Lancez Dreamweaver, puis cliquez sur Fichier, Nouveau site. La boite de dialogue ci-dessous apparaît : Figure 2 : Définition du site local du CIO. 5. Cliquez dans la zone de droite sur la catégorie «Infos locales», puis remplissez comme dans la figure précédente, les zones «Nom du site» puis indiquez le nom du dossier racine local directement dans la zone de texte ou en cliquant sur l icône et en parcourant le disque dur. 6. Cliquez sur la case à cocher «Utiliser le cache ( ) mise à jour des liens», et terminez en cliquant sur OK. Nous reviendrons ultérieurement sur ce que signifie l option de gestion des liens. Un message va vous indiquer que le cache sera bien créé, cliquez sur OK, puis immédiatement vous vous trouvez devant une nouvelle fenêtre qui est la fenêtre de gestion du site. Figure 3 : Fenêtre de gestion de site de Dreamweaver 6/23

7 Détaillons cette fenêtre pour mieux comprendre le problème de gestion du site. La partie gauche est intitulée «Site distant», elle représente la structure du site qui sera accessible depuis tout navigateur connecté à Internet. On oppose la notion de disque distant à celle de disque local, représenté ici par la fenêtre de droite et nommé «Répertoire local». Le répertoire local doit avoir la même structure que le distant pour faciliter les mises à jour. 3. Création de la page d accueil Depuis la fenêtre de gestion de site nous allons créer directement le fichier de notre page d accueil, nous indiquerons ensuite à Dreamweaver qu il faut considérer cette page comme une page particulière : une page d accueil. 1. Dans la partie locale de la fenêtre de gestion de site, cliquez sur le dossier du CIO. 2. Dans le menu Fichier, choisissez Nouveau fichier. 3. Le logiciel crée alors un nouveau fichier dont le nom apparaît en surbrillance, saisissez son nom : welcome.htm (figure 4). Figure 4 : La création de la page d accueil depuis la gestion de site 4. Validez par «Entrée» au clavier, le fichier est alors créé. 5. Pour définir cette page en tant que page d accueil, c est très simple, il suffit d un clic droit sur son nom depuis la fenêtre de gestion de site, et de choisir l option «Définir comme page d accueil». Vous voici maintenant l heureux propriétaire d une page d accueil flambant neuve, certes vide, mais bien réelle. Il ne reste plus maintenant qu à la nourrir, avant d aller plus loin, vous pouvez dores et déjà créer de la même manière (points 1 à 4) les autres pages qui viendront épauler le contenu de votre futur site. Donnez un nom significatif à chacune de vos pages (local pour localisation, etab pour établissements, service pour services ). La page sur les services du centre devrait alors être nommée services.htm. Dans notre exemple nous allons créer un site comportant 3 pages comme le reproduit le croquis ci dessous. Figure 5 : La création de l architecture du site est à faire au préalable. 7/23

8 4. Ajout d éléments à notre «home page» Pour ce faire, il faut garder présent à l esprit l architecture de notre site. Globalement, toutes les pages de notre site doivent être accessibles depuis la page d accueil. Pour commencer, il convient de donner un titre à la «home page». Pour nommer une page : 1. Réduisez la fenêtre de gestion de site de façon à voir l environnement de travail de Dreamweaver qui affiche notre page welcome.htm sans titre. 2. Faites un clic droit sur la page dans le corps de la fenêtre de document, puis choisissez «propriétés». Figure 5 bis : La modification des propriétés de la page 3. Dans la zone Titre : saisissez le titre de ce qui va s afficher dans le navigateur qui consultera votre page (par exemple «Bienvenue sur notre site»). 4. Nous reviendrons ultérieurement sur la façon d intégrer des images, mais le principe reste le même pour une image d arrière plan. 5. Cliquez sur OK pour effectuer vos modifications, la fenêtre de document affiche maintenant ce que vous venez de saisir dans la barre de titre, vous pouvez également le tester dans votre navigateur en appuyant sur F12. Chapitre 4 : Mise en page.(texte, tableau, image ) 1. Le texte L élément texte, ne nécessite aucun soin particulier. Nous l avons dit plus haut, il suffit de le saisir, ou de le récupérer par collage (menu Edition, Coller). Les options de formatages et d alignement sont très réduites par rapport au traitement de texte. Pour formater du texte vous devez utiliser l Inspecteur de propriétés (figure 6). 1. Saisissez le texte adéquat dans la fenêtre du document (par exemple «Bienvenue au CIO de XXX»). Validez la ligne pour changer de paragraphe. 2. Changez la police (Times New Roman), la taille (+3) et le style du texte (gras), centrez le paragraphe pour terminer. Vous pouvez changer la couleur du texte en cliquant sur l icône couleur de la bordure. 8/23

9 Figure 6 : Les effets disponibles pour le texte de la page Nous avons maintenant un tableau qui va contenir deux cellules dans lesquelles nous viendrons placer une image (le logo du CIO) et un texte (un texte d état qui informe des nouveautés en cours ou à venir). Compte tenu des médiocres possibilités de mise en page du langage html, la solution la plus simple passe par l utilisation des tableaux. 2. Les tableaux Les tableaux sont utilisés pour présenter des données. Ils peuvent également être utilisés pour contrôler l'endroit où le texte et les éléments graphiques apparaîssent sur la page. Lorsque vous créez un tableau, vous pouvez ajouter du contenu, modifier des cellules et des propriétés de lignes, de même que copier et coller plusieurs cellules. Pour créer un tableau, vous devez procéder comme il suit : 1. Rendez-vous dans le menu Insertion, et choisissez l option Tableau. 2. Aussitôt une boite de dialogue vous permet d en définir les attributs. Dans notre exemple elle fera 2 colonnes et 1 ligne. Sa largeur sera de 140 pixels et la taille de la bordure sera de 0. Figure 7 : L insertion d un tableau et quelques unes des options possibles Lignes et colonnes déterminent le nombre de lignes et de colonnes du tableau. Remplissage de cellule détermine l'espace qu'il doit y avoir entre le contenu d'une cellule et son contour. Espacement des cellules détermine l'espacement qu'il doit y avoir entre chaque cellule d'un tableau, sans compter la bordure. Largeur détermine la largeur du tableau exprimée en pixels ou comme pourcentage de la fenêtre du navigateur (cf. remarque). Bordure détermine la largeur de bordure du tableau. Remarque : vous avez la possibilité de choisir l unité de dimensionnement du tableau de 2 façons (encadré). En cliquant sur la boite combo (cerclé en rouge) Le logiciel vous laisse le choix entre une dimension en pixel et une dimension en pourcentage. Comment 9/23

10 se décider. Si cela vous est égal choisissez plutôt le pourcentage, c est plus simple à gérer. L inconvénient de cette méthode est d être proportionnelle à la taille de la fenêtre affichée, c est à dire que si le visiteur de votre site possède le même écran que vous, pas de problème dans le cas d un écran plus grand, il peut y avoir des surprises. Le dimensionnement en pixel est plus contraignant (au début en fait), mais les objets ne changent plus de taille par la suite. Figure 8 : Le tableau dans la page en construction Maintenant que notre tableau de 2 x 1 est créé nous allons y placer un texte dans la colonne de droite et une image dans celle de gauche. 3. Les images Dreamweaver, comme la plupart des navigateurs, peut afficher les images JPEG et GIF. Dreamweaver, Microsoft Internet Explorer 4.0 et plus récent, ainsi que Netscape Navigator 4.04 et plus récent prennent également en charge les images PNG. En général, JPEG est le format optimum pour les images photographiques ou à tons continus, et GIF est préférable pour les images en demi-tons, ou celles qui ont une surface importante de couleurs en aplat. Le format PNG constitue un remplacement non breveté de GIF, incluant la prise en charge des images en niveaux de gris, de couleurs indexées ou de couleur réelle. Remarque : Pour que les images apparaissent dans un document de Dreamweaver, les fichiers d'images doivent se trouver à l'intérieur du site local défini. Si vous choisissez un fichier externe, Dreamweaver vous demandera si vous voulez que le fichier soit copié dans un dossier à l'intérieur du site local. Pour notre exemple on partira du principe que vous avez déjà placé le logo de votre CIO dans le dossier image de votre site web local (cf. page 6). Pour insérer une image : 1. Placez le curseur là où vous voulez que l'image apparaîsse sur la page (dans le cadre de gauche). 2. Choisissez Insertion, Image, ou cliquez sur le bouton Insérer une image dans le volet Commun de la palette Objet (le premier en forme d arbre). 3. Une fenêtre de dialogue apparaît, double-cliquez sur le dossier image. 4. Recherchez le fichier d image qui vous intéresse en cliquant sur son icône, puis sur Sélectionner (figure 9). 10/23

11 Figure 9 : L insertion de l image du logo qui va arriver dans la page. 5. Le logo est inséré dans votre page, mais vous pouvez définir les propriétés de l image dans l'inspecteur des propriétés (étudié au chapitre 7). Chapitre 5 : Création de liens 1. Le positionnement de la page Il y a trois types de chemins d'accès : chemins absolus, chemins relatifs à la racine et chemins relatifs au document. Les chemins sont entrés dans le champ Lien de l'inspecteur de propriétés ou dans le champ URL de la boîte de dialogue Sélectionner fichier HTML (accessible depuis l'inspecteur de propriétés. 1. Les chemins absolus Il s'agit de chemins complets comprenant le protocole du serveur (ordinairement pour les pages Web). Par exemple, Les chemins absolus restent précis, quel que soit l'emplacement du document source. En revanche, ils ne lient pas correctement le document cible en cas de déplacement de ce dernier. Vous devez utiliser un chemin absolu lorsque vous créez un lien vers un fichier situé en dehors du site courant. 2. Les chemins relatifs à la racine Ils commencent toujours à la racine du site courant. Tous les fichiers du site visibles pour le public sont contenus dans la racine du site. Les chemins relatifs à la racine commencent par une barre oblique, indiquant au serveur de commencer à partir de la racine. Par exemple, le chemin /maio/welcome.html crée un lien avec un document nommé Welcome.html dans le répertoire, qui se trouve au niveau de la racine du site. Un chemin relatif à la racine est ordinairement la meilleure manière de lier des fichiers dans un environnement dont le contenu doit être fréquemment déplacé. Lorsque vous utilisez des chemins relatifs à la racine, les liens continuent à fonctionner même si le document à partir duquel vous établissez le lien est déplacé à l'intérieur du site. Les chemins relatifs à la racine ne conviennent pas pour les sites à consulter localement (tels que les présentations). À leur place, utilisez des chemins relatifs au document. 11/23

12 3. Les chemins relatifs au document Ils sont relatifs au répertoire contenant le document en cours. Par exemple, document.htm désigne un document du répertoire courant ;../ document.htm désigne un document du répertoire au-dessus du répertoire courant ; et docshtml/document.htm désigne un document situé dans un répertoire nommé docshtml à l'intérieur du répertoire courant. Les chemins relatifs au document sont souvent les plus simples à utiliser pour créer des liens vers des fichiers qui seront toujours placés dans le même répertoire que le document courant. 2. Établissement d'un lien vers un document Utilisez l'inspecteur de propriétés pour lier une image ou une partie du texte du document en cours à un autre document. Dans l exemple qui suit nous allons lier un texte qui ouvrira dans la fenêtre du navigateur la page des services accessibles au CIO. Pour créer des liens entre documents : 1. Sélectionnez du texte ou une image dans la fenêtre Document. 2. Ouvrez l'inspecteur de propriétés (Fenêtre, Propriétés) et exécutez les opérations suivantes : 3. Cliquez sur l'icône de répertoire (cf. figure 6) pour naviguer jusqu'à un fichier et le sélectionner. Figure 10 : L insertion de la liaison entre les deux pages Web. 4. Cliquez sur le bouton Sélectionner. Figure 11 : La liaison affichée dans le document et l inspecteur de propriétés. Remarque : Vous pouvez taper directement un chemin dans le champ Lien. Pour créer un lien vers un document de votre site, entrez un chemin relatif au document ou à la 12/23

13 racine. Pour créer un lien vers un document situé en dehors du site, entrez un chemin absolu (voir ci après). Pour faire en sorte que le document lié s'affiche ailleurs que dans la fenêtre en cours, sélectionnez un nom de cadre dans le menu déroulant Cible et choisissez la cible réservée _blank qui chargera le document lié dans une nouvelle fenêtre de navigateur. Le lien est maintenant affiché dans la fenêtre du document vous pouvez à tout moment tester son allure réelle dans le navigateur en appuyant sur la touche F12. Par défaut un lien est formaté en bleu souligné : Les services offerts par le CIO. 3. Établissement d'un lien vers une ancre nommée Les ancres nommées marquent des positions spécifiques dans un document. Utilisez des ancres nommées pour sauter à une position marquée dans le document en cours ou pour créer un lien vers une position marquée dans un autre document. Par exemple, si votre page est longue ou comporte différents chapitres, utilisez l ancre nommée pour passer rapidement du début à la fin ou d un chapitre à un autre. Dans l exemple qui suit, nous allons créer une ancre nommée associée à une flèche nous permettant de remonter en haut de page d un clic de souris. 1. Dans la fenêtre Document, placez le curseur là où vous voulez insérer l'ancre nommée. 2. Choisissez Insertion, Ancre nommée. 3. Dans la boîte de dialogue qui s'affiche, tapez un nom pour l'ancre. Figure 12 : Création de l ancre dans le document 4. Cliquez sur OK. L inspecteur de propriétés change d aspect. Figure 12 bis : L ancre placée dans le document 5. Créez maintenant un lien vers cette ancre nommée : 6. Sélectionnez une image (ou à défaut du texte) dans la fenêtre Document. 7. Dans l'inspecteur de propriétés, tapez le signe dièse (#) et le nom de l'ancre dans le champ Lien. Par exemple : Pour créer un lien vers notre ancre nommée "haut" du fichier en cours, tapez #haut. 8. Pour créer un lien vers une ancre nommée "haut" dans un autre fichier figurant dans le même répertoire, tapez NomDuFichier.html#haut. 4. Établissement d'un lien avec une page hébergée sur un autre site Il arrive fréquemment que vous désiriez renvoyer vos visiteurs vers une ressource externe à votre site. Par exemple, vous permettre l accès aux établissements de votre district depuis une de vos pages. Vous devez dans ce cas créer un lien de type absolu. La 13/23

14 procédure est la même que pour la création de liens, simplement les adresses Internet étant parfois complexes pensez à les copier (CTRL + C), puis à les coller (figure 13)dans la zone Liens de l inspecteur de propriétés (clic droit puis coller) Figure 13 :Collez les liens vers des pages extérieures directement d un clic droit de souris. 5. Un lien spécifique : pour envoyer un message directement au CIO Les liens de messagerie ouvrent de nouvelles fenêtres de message (à l'aide du programme de messagerie associé au navigateur de l'utilisateur) chaque fois que l'utilisateur clique dessus. Le champ A: de la fenêtre du message est automatiquement complété par l'adresse spécifiée dans le lien. Pour créer un lien de courrier électronique : 1. Sélectionnez du texte ou une image dans la fenêtre Document. 2. Dans l'inspecteur de propriétés, tapez mailto: suivi par une adresse dans le champ Lien. 3. Appuyez sur Entrée. Figure 14 :Un lien de type envoi de message depuis la page de navigation. 6. Vérifier la cohérence des liens Certains liens ne sont pas actifs dans la fenêtre Document (c'est-à-dire que le fait de cliquer dessus ne fait pas accéder au document lié) parce que vous devez être en mesure de cliquer sur un lien pour modifier le texte ou les images qui y sont associés. Vous pouvez ouvrir le fichier associé à un lien dans Dreamweaver si vous voulez le modifier mais vous devez tester les liens dans un navigateur. Pour tester les liens dans un navigateur, faites comme il suit : 1. Choisissez Fichier, Aperçu dans le navigateur. 2. Ou cliquez directement sur F12 Cependant Vous pouvez directement depuis la fenêtre de gestion de site tester automatiquement l ensemble des liens sans avoir à cliquer dessus. 1. Choisissez simplement Fichier, Vérifier les liens, puis Site entier. Le logiciel se charge de tout 2. Vous êtes devant une boite de dialogue qui vous indique l état de tous les liens (y compris les images) 14/23

15 Figure 15 :La vérification des liens du site entier. 3. Dans la zone Afficher, cliquez sur ce que vous souhaitez vérifier(liens brisés, liens externes et fichiers orphelins). Chapitre 6 : Agrémenter votre page 1. Insérer et créer un logo animé Vous devez pour cela utiliser un logiciel de dessin. C est un complément idéal de Dreamweaver 2, vous en trouverez une version sur le CD de la mission volume 2. Dans le dossier Outils, cherchez le dossier PSP, puis lancez le fichier d installation. Une fois celle-ci réalisée, nous allons nous mettre au travail. Remarque : Vous pouvez ouvrir une image sélectionnée dans un éditeur d'image externe directement à partir de Dreamweaver. Lorsque vous revenez dans Dreamweaver après avoir enregistré le fichier de l'image, toutes les modifications de l'image sont visibles dans la fenêtre Document. Pour cela, il suffit de paramétrer votre logiciel de composition Web de manière opérationnelle. Pour choisir un éditeur d'image externe : 1. Choisissez Édition > Préférences. 2. Sélectionnez Éditeurs externes à partir de la liste des catégories qui se trouve à gauche. 3. Cliquez sur Parcourir à côté de la zone Images et sélectionnez votre éditeur d'image préféré. Pour lancer l'éditeur d'image externe, Cliquez avec le bouton droit de la souris tout en cliquant sur l'image que vous voulez éditer et choisissez Éditer image à partir du menu de raccourci. Sélectionnez l'image que vous voulez éditer et cliquez sur Éditer image dans l'inspecteur des propriétés. 4. Lancez le logiciel de dessin, puis cliquez sur le menu Fichier, et sélectionnez Nouveau. 5. Dans la boite de dialogue qui apparaît choisissez 300 x 100 pour les dimensions. Fixez la résolution à 72 points par pouce, dans la rubrique caractéristiques de l image, affectez la valeur «couleur d arrière plan» à la couleur d arrière plan et choisissez 256 couleurs pour le type d image. 6. Nous allons écrire un texte court : «Bienvenue au CIO». Cliquez sur l outils texte (le A en grand), puis sur la zone de dessin. Dans la boîte de dialogue qui s'ouvre, attribuez- lui une police, une taille et une couleur à votre convenance, puis cliquez sur OK. 7. Cliquez sur Fichier, puis enregistrez en choisissant Computer Graphic Interchange (GIF) dans le type de fichier et logo1.gif dans le nom. 15/23

16 Figure 16 :La création du logo animé. 8. Répétez la même procédure de création de l image que précédemment en changeant juste l'aspect du texte (nous ne changerons que la couleur en cliquant sur une couleur dans l outils couleurs avant de cliquer sur la zone de texte). 9. Positionnez le texte exactement sur l ancien à l aide de la souris, puis cliquez sur Fichier, Enregistrer sous et choisissez logo2.gif. 10. Faites une dernière fois cette opération en choisissant une troisième couleur pour votre texte. Vous voilà face à trois objets différents. Vérifiez que vos trois images sont dans le dossier images et qu elles sont nommées logo1.gif, logo2.gif, etc Nous allons maintenant assembler les objets à l aide de l outils d animation livré avec Paint Shop Pro, Animation Shop. Le principe est celui du cinéma, c est à dire une succession d image dans un intervalle de temps. 11. Démarrez l assistant d animation, Fichier, Assistant d animation, en vérifiant que l option Même taille que la première image est active. Cliquez sur 4 fois sur Suivant. 12. Sélectionnez les 3 images en cliquant sur le bouton Ajouter l image et en indiquant le bon dossier, cliquez sur Suivant, puis sur Terminer. 13. Enregistrez votre travail dans le dossier images en acceptant les réglages par défaut. C est fini. Insérez votre animation comme indiqué au chapitre 4. Vous pouvez visualiser votre animation en cliquant sur Afficher, puis Animation. 2. Insérer un «Roll-over» (effet de survol) Nous allons utiliser les logos précédents pour nous servir d exemple. Un effet de survol est une image qui change lorsque le curseur se déplace au-dessus d elle. Un effet de survol est constitué de deux images : l'image principale (celle affichée lorsque la page se charge) et l'image de survol (celle qui apparaît lorsque le curseur se déplace au-dessus de l'image principale). Pour créer un effet de survol: 1. Placez le curseur dans la fenêtre Document, là où vous souhaitez que l effet de survol apparaisse. 2. Choisissez Fenêtre > Objets pour ouvrir la palette Objet et cliquez sur le bouton Image retournée ou choisissez Insertion > Image retournée. 3. Dans la boîte de dialogue qui apparaît (figure 17), entrez les informations suivantes : Vous devez taper le chemin et le nom de fichier de l'image originale dans le champ Image originale (ici image logo1.gif dans le dossier cio\images). Tapez le chemin et le nom de fichier de l'image de zone sensible dans le champ Image renouvelée. Pour créer un lien, remplacez le signe # du champ Lien par un chemin et un nom de fichier, ou recherchez et sélectionnez un fichier. 16/23

17 Figure 17 :La création de l image retournée. 4 Cliquez sur OK. On notera qu'il est possible d'appeler un aperçu de votre rollover qui s'ouvrira directement dans votre navigateur. Testez-le. En appuyant sur F12, le passage de la souris au dessus du logo affiche un changement d état de l image. c est un premier jet, à vous de réaliser quelque chose de plus sophistiqué. 3. Insérer une «image map» (image cliquable) sur la carte du district Une carte graphique est une image unique à laquelle sont affectés différents hyperliens, pour définir les régions de l'image vous devez utiliser l'éditeur de carte graphique. En fait cet éditeur affiche la carte et permet d utiliser des outils de dessins de formes cercles, carrés, polygones qui permettront de créer des zones et d y affecter des liens. Nous voulons affecter des liens accessibles en cliquant sur chacun des établissements de la carte du district du CIO. Figure 18 :Un extrait de la carte du district avec les établissements sous forme de ronds. Pour créer la carte graphique: 1. Sélectionnez l'image et cliquez sur le bouton Carte dans l'inspecteur de propriétés (pour voir le bouton Carte, vous devrez peut-être cliquer sur la flèche d'agrandissement dans le coin inférieur droit de l'inspecteur de propriétés). 2. Tapez le nom de la carte dans le champ approprié (ce nom apparaît comme l'attribut NAME de la balise MAP et comme l'attribut USEMAP de la balise IMG. 3. Sélectionnez l'outil cercle ou carré et faites-le glisser au-dessus de l'image pour créer une zone sensible de la forme d'un cercle ou d'un carré, ou sélectionnez l'outil de polygone et définissez une zone sensible de forme irrégulière en cliquant une fois pour chaque coin et deux fois pour fermer la forme. 17/23

18 Figure 19 :L éditeur «d image map» fourni avec Dreamweaver. 4. Tapez le chemin de l'url de la zone sensible dans la boîte Lien, ou cliquez sur l'icône de dossier pour rechercher et sélectionner un fichier. Si l établissement possède un site Web, saisissez son URL, sinon entrez l adresse de votre page qui le décrit (on supposera qu une telle page existe). 5. Validez en cliquant sur OK, puis testez votre carte en appuyant sur F12. Chapitre 7 : Tester votre site et le mettre en ligne 1. Tester le site Utilisez la fonction Vérifier liens pour rechercher les liens brisés et les fichiers non référencés dans un fichier ouvert du site local, ou dans le site local tout entier. Dreamweaver vérifie uniquement les liens et les références relatifs aux documents du site. Dreamweaver dresse une liste des liens externes apparaissant dans le(s) document(s) sélectionné(s), mais ne les vérifie pas. 1. Choisissez Fichier, Vérifier liens, Site entier. 2. Lorsque Dreamweaver a fini de vérifier les liens dans les fichiers spécifiés, il ouvre la boîte de dialogue Vérificateur de lien (cf. figure 15 chapitre 6). Cette boîte de dialogue affiche la liste des liens brisés, des liens externes (ceux qu il ne peut pas vérifier parce qu'ils renvoient à des pages ne faisant pas partie du site) et des fichiers orphelins (fichiers auxquels aucun autre document ne renvoie). 3. Pour basculer entre Liens brisés, Liens externes et Fichiers orphelins, sélectionnez la rubrique appropriée dans le menu déroulant Afficher. 4. Pour enregistrer tout le rapport comme fichier texte délimité par des tabulations, cliquez sur Enregistrer. Votre site fonctionne maintenant parfaitement en local, vous allez pouvoir le mettre à disposition du monde entier. C est la dernière étape, vous devez simplement vous munir des noms de logins et mots de passe qui vous ont été transmis par votre administrateur réseau. 18/23

19 2. Le mettre en ligne (initiation au File Transfert Protocol FTP) Pour placer votre réalisation sur le serveur Web, il faut pratiquer la manipulation inverse d un téléchargement (en anglais, il s agit d un upload). Vous allez donc transférer les fichiers et dossiers qui constituent l intégralité de votre site de votre disque dur sur celui de l hébergeur distant. Le navigateur ne sachant pas réaliser de telles tâches, il faut se tourner vers un outils spécialisé dit de FTP (pour File Transfert Protocol). Inutile de vous précipiter sur le CD de la mission, Dreamweaver en possède un intégré à son fonctionnement qui permet de réaliser la manœuvre sûrement et simplement. Vous devez au préalable renseigner différentes rubriques. 1. Dans la fenêtre de gestion de site, cliquez sur Site, puis sur Définir des sites. 2. Sélectionnez le vôtre, puis cliquez sur le bouton Modifier. 3. Vous êtes devant la fenêtre de définition de site qui comporte 4 catégories sur la gauche. Cliquez sur la seconde : Infos du serveur Web. Son contenu apparaît. Figure 20 :La mise en ligne du site le paramétrage de l accès au serveur. 4. La zone Accès au serveur affiche pour l instant «Aucun», vous allez la modifier d un clic de souris pour sélectionner l option FTP (figure ci-dessus). 5. Saisissez maintenant les informations qui vous ont été communiquées par la MATICE de Créteil, concernant votre espace disque sur le serveur académique. Hôte FTP : Répertoire de l hôte : Nom d utilisateur Mot de passe ftpw.ac-creteil.fr /saio/cio93/non-du-cio (ex. /saio/cio93/epinay) nom-du-cio (ex. cioepinay) qui vous a été communiqué 6. Cliquez sur Enregistrer, ne cochez pas «Utiliser le pare-feu». 7. Cliquez sur OK, puis sur Terminer, c est tout. Le transfert de fichier peut alors commencer. 8. Cliquez sur le bouton Connecter, qui va alors lancer l assistant de connexion pour accéder au Net. Après quelques messages qui apparaissent sur votre écran, la connexion est établie (le bouton Connecter est devenu Déconnecter en affichant une lumière verte), et le cadre de gauche de la fenêtre de gestion de site, liste le contenu de votre disque distant. Dans le volet droit figure l arborescence de votre disque dur. Comme il s agit d un espace disque qu on vous attribue, vous allez immédiatement vous retrouver à la racine de votre 19/23

20 site. Ne tentez pas d aller plus haut, vous n obtiendriez rien de plus qu une liste de dossiers dont le contenu vous serait inaccessible. Figure 21 :La mise en ligne du site l accès au site distant. 9. Vous pouvez créer autant de dossier que vous désirez à partir de la racine de votre disque distant. Pour cela, cliquez sur la partie gauche et sélectionnez Fichier, Nouveau dossier. 10. Lorsque vos dossiers sont créés (à l identique de votre site local) sur le serveur, deux méthodes s offrent à vous pour transférer vos fichiers. La première consiste à sélectionner le fichier à transférer puis à cliquer sur le bouton Placer sur la petite flèche orientée vers le haut. La seconde consiste tout simplement à utiliser votre souris pour effectuer un Glisser-Déplacer du fichier vers le répertoire de destination. Tout comme dans l'interface d'explorer, vous pouvez sélectionner plusieurs fichiers à transférer. 3. Les éventuelles erreurs de mise en ligne Votre transfert terminé, c'est le moment d'effectuer un test grandeur nature pour savoir si tout s'est bien passé. Pour cela, tentez de vous connecter à votre page Web en utilisant votre navigateur. Si tout apparaît en ordre, cela signifie que vous avez suivi la marche à suivre à la lettre. Dans le cas contraire, examinons les cas de problèmes les plus fréquents ainsi que leurs causes probables. 1. Le tragique message: «Erreur 404». Si ce message apparaît lorsque vous tentez d'atteindre votre page d'accueil, il y a de fortes chances pour que vous n'ayez pas respecté la casse ou la même orthographe dans les noms de vos fichiers. Rappelez-vous: l'orthographe et la concordance majuscules - minuscules doit être identique dans le nom d'un fichier et sa mention dans le code HTML de vos pages. Normalement, si vous avez suivi notre conseil et vérifié vos pages avant de les transférer sur le serveur, vous ne devriez pas avoir un tel message. 2. Votre navigateur affiche le message «Index of/login». Il peut y avoir deux raisons à un tel message. Sur tous les serveurs, on accède à un site Web par la page d'accueil. De même, sur tous les serveurs, cette dernière porte un nom précis qu'il convient de respecter. Sur ac-creteil.fr, votre page d'accueil doit se nommer welcome.htm (ou html). Si le serveur ne peut l'identifier, il affiche un message. Si vous êtes certain que la syntaxe est bien respectée, vérifiez tout de même que ce fichier welcome.html est bien situé à la racine de votre compte. La racine de votre compte est l'endroit situé directement à l'entrée de votre espace disque hébergé, là où vous accédez lorsque vous vous connectez avec votre logiciel de FTP. En cas d'erreur, rectifiez le tir et tout rentrera dans l'ordre. 20/23

21 Chapitre 8 : Référencer le site pour qu il soit accessible 1. Le titre de la page Nous l avons vu plus tôt, le titre est un élément qui s'affiche dans la barre de titre de la fenêtre Document dans Dreamweaver de même que dans la barre de titre du navigateur dans lequel vous affichez la page. Vous devez tapez le titre de la page dans le champ étiqueté Titre en cliquant sur les propriétés de la page (clic droit sur la page). L insertion d un titre est la première chose à faire pour permettre un bon référencement par les moteurs de recherche. Pensez en outre à nommer toutes vos pages pour augmenter vos chances de référencement et donc d accès. 2. Les éléments de référencement Quelques moteurs de recherche (par exemple Excite, AltaVista, Lycos, InfoSeek) demandent le strict nécessaire, c'est-à-dire le titre du site et son adresse. Le référencement dans leur base de données est pris en charge par un robot qui explore les différentes pages de votre site afin de les indexer. Les robots extraient le titre des pages et les premiers mots de leur contenu : ces données sont utilisées pour décrire votre site. Vous pouvez cependant fournir des indications plus précises, détectées par certains robots (qui vous en seront reconnaissants): les Meta Tags. Il s'agit d'une balise HTML qui doit obligatoirement être située dans la section <head> de chaque page de votre site. Deux paramètres sont absolument nécessaires: NAME= "description" qui décrit en quelques mots le contenu de la page et NAME="keywords" qui fournit les m ots-clés pour l'indexation. Pratiquement, ces deux Meta Tags se présentent comme ceci <META NAME="description" CONTENT=" Site du CIO de Villejuif Comment faire pour venir nous voir"> <META NAME="keywords" CONTENT= "orientation, éducation, conseil, conseiller d orientation-psychologue, enseignement, profession, métier"> Chaque page doit contenir ses propres Meta Tags car les robots exploreront votre site en entier. Pratiquement, Dreamweaver le fait directement il suffit simplement de suivre la procédure ci après. 1. Dans le menu Insertion, cliquez sur En-têtes, sélectionnez celui que vous souhaitez travailler, par exemple Mots-clés. 2. Tapez les mots-clés, séparés par des virgules, dans le champ étiqueté Mots-clés 3. Cliquez sur OK. Remarque : vous pouvez accéder directement à tous les éléments en cliquant sur la petite flèche située dans le coin supérieur droit de la palette des objets et en choisissant «En-têtes». Figure 22 :La palette des objets en version insertion d en-têtes. 3. Les moteurs de recherches et annuaires Il est nécessaire d'être présent dans tous les moteurs de recherche, afin d'être visible, et trouvé par tous. Chaque moteur possède ses propres règles de fonctionnement 21/23

22 internes, qui facilitent ou rendent plus délicates les inscriptions de vos sites dans ces derniers. Nous prendrons l exemple de l inscription d un site sur Yahoo! et sur Altavista. Chez Yahoo! l inscription se fait en cliquant sur un lien en bas de la page d accueil (figure 23). Figure 23 :L accès au référencement dans Yahoo!. Ensuite, on va vous expliquer par une succession d écran comment est structuré l arborescence des catégories Yahoo! et comment se fait une inscription. Il faudra détailler le contenu du site, y mettre le titre, les mots clés Figure 24 :L écran de référencement avec Yahoo!. Sur Altavista, l inscription de son site est des plus sommaire, il suffit juste de donner son URL et sous 48 heures le site est visité puis indexé. Figure 25 :L écran de référencement avec Altavista. Chapitre 9 : Les plus pour aller plus loin 1. Animation en DHTML avec les calques Les calques sont utilisés pour positionner les éléments avec précision dans la fenêtre du navigateur. Les calques peuvent contenir du texte, des images, des p lug-ins et même d'autres calques tout ce que vous pouvez mettre dans le corps d'un document HTML 22/23

23 peut être mis dans un calque. Les calques sont particulièrement utiles pour la superposition de certaines parties de votre page. Vous pouvez afficher et masquer des calques avec des comportements afin de créer des pages au chargement rapide, qui sont modifiées sans devoir charger le contenu supplémentaire à partir des fichiers source. Grâce au scénario, vous pouvez déplacer ou changer les calques selon une ligne de temps. Les sites de la mission et celui du SAIO font appel à un jeu de calques pour afficher le contenu de pages lors du survol d un lien par la souris. Le seul problème avec les calques vient du fait que leur conception récente nécessite pour le surfeur de posséder un navigateur de génération 4. Dans le cas contraire, le site n est pas visible correctement. 2. Insertion d un composant vectoriel animé réalisé avec Flash L'animation Flash, vous en avez certainement déjà entendu parler. Pour les néophytes, sachez que Flash 5 (nom du logiciel) permet d'animer les éléments, transformés pour l'occasion en vecteurs, composant une page Web. Un des avantages de Flash est la rapidité d'exécution lors du chargement de la page. En effet, une animation en Flash se joue au fur et à mesure de son chargement. Cela permet une certaine fluidité du ou des mouvements et tient en haleine le surfer qui écarquille tout grand ses yeux. Une chose est sûre, le Flash, ça en jette! Un autre atout non négligeable de ce logiciel est la synchronisation possible du son avec l'animation. Le son et l'image réunis, on se croirait presque au cinéma. La seule petite restriction pour visualiser une animation en Flash est de posséder le p lugin Shockwave Flash Player. Ce plug-in est dorénavant présent sur la majorité des navigateurs. Communicator 4.Xx, Windows 98, et Explorer 5 en sont équipés, pour les versions antérieures, vous pouvez télécharger le plug-in à partir du site de Macromedia N'hésitez pas, il est très léger, à peine 170K. 3. Un texte personnalisé dans la barre d état 0n voit souvent de courts textes dans la barre d'état de son navigateur. Très légers, ces JavaScripts ont le mérite de personnaliser un site par un message de bienvenue, d'avertissement ou d'explications. Reste qu'ils sont particulièrement simples à rédiger et à mettre en pratique... à condition de bien placer ces quelques lignes entre les parties <HEAD> et </HEAD> de votre page HTML. Voici tout d'abord comment afficher un texte fixe. <SCRIPT LANGUAGE="JavaScript"> <! window.defaultstatus="bienvenue sur notre site Web!"; // --> </SCRIPT> Mais vous pouvez aussi pencher pour la variante qui suit, et qui fera s'afficher deux textes alternativement. Là encore, il est impératif de placer ces quelques lignes entre les parties <HEAD> et </HEAD> de votre page HTML. <SCRIPT LANGUAGE="JavaScript"> <! var rotatemsg = true; function MsgStatus() { if(rotatemsg) { window.status = ' ; window.defaultstatus = 'Bienvenue au CIO!'; } if(!rotatemsg) { window.status = ' ; window.defaultstatus = 'Un site pour s orienter sur la toile!'; } settimeout("msgstatus();rotatemsg=! rotatemsg", 900); } MsgStatus(); // --> </script> 23/23

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

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

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

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

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

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

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

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

Comment écrire un article pour le site HCE?

Comment écrire un article pour le site HCE? Comment écrire un article pour le site HCE? Explication courte Les explications courtes sont les meilleures. Naviguez sur http://www.hce.asso.fr/ecrire/ et laissez-vous guider par les écrans. Explication

Plus en détail

Création d un catalogue en ligne

Création d un catalogue en ligne 5 Création d un catalogue en ligne Au sommaire de ce chapitre Fonctionnement théorique Définition de jeux d enregistrements Insertion de contenu dynamique Aperçu des données Finalisation de la page de

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

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

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

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

NOTICE D UTILISATION DE L ESPACE COLLABORATIF (POUR LES COLLABORATEURS)

NOTICE D UTILISATION DE L ESPACE COLLABORATIF (POUR LES COLLABORATEURS) NOTICE D UTILISATION DE L ESPACE COLLABORATIF (POUR LES COLLABORATEURS) Qu est-ce que l espace collaboratif? L espace collaboratif est un service vous permettant à vous, vos associés et collaborateurs

Plus en détail

Comment accéder à d Internet Explorer

Comment accéder à d Internet Explorer Comment accéder à d Pour ouvrir l application, vous n avez qu à doublecliquer sur l icône de celle-ci : ou vous pouvez encore allez le chercher par le raccourci dans la barre des tâches : Lorsque l application

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

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

-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

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

CRÉATION DE SITE INTERNET TD 1

CRÉATION DE SITE INTERNET TD 1 Création de pages Internet avec le logiciel libre Nvu - 1/7 CRÉATION DE SITE INTERNET TD 1 I LANCEMENT DE NVU ET CRÉATION DU SITE. 1) Liminaire : Créez en premier, un sous-dossier consacré au travail avec

Plus en détail

Utilisation du site Graines d explorateurs

Utilisation du site Graines d explorateurs Utilisation du site Graines d explorateurs Connexion au site Munissez vous de votre identifiant et de votre mot de passe puis cliquez sur le lien «se connecter» situé en bas à droite du site Graines d

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

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

Table des matières : 16 ASTUCES OUTLOOK

Table des matières : 16 ASTUCES OUTLOOK Table des matières : 16 ASTUCES OUTLOOK Accéder rapidement à votre boîte de réception Ajouter directement les caractéristiques dans le carnet d'adresses Classez vos emails par couleurs Créez des Post-It

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

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

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

CLARISWORKS 5. ÉTAPE 1 Créer un document. Lancer l application. (Windows 95 ou 98) Créer un document en utilisant le traitement de texte

CLARISWORKS 5. ÉTAPE 1 Créer un document. Lancer l application. (Windows 95 ou 98) Créer un document en utilisant le traitement de texte ÉTAPE 1 Créer un document Lancer l application Mettre l ordinateur en route. Double cliquer sur l icône ClarisWorks 5 qui se trouve sur le bureau ou cliquer sur Démarrer Programmes ClarisWorks5 Vous arrivez

Plus en détail

L accès à distance du serveur

L accès à distance du serveur Chapitre 11 L accès à distance du serveur Accéder à votre serveur et aux ordinateurs de votre réseau depuis Internet, permettre à vos amis ou à votre famille de regarder vos dernières photos, écouter vos

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

Sites web propriétaires

Sites web propriétaires Ce document est disponible à : C:\Users\pc_samba\Documents\Doc sites prop.docx Sommaire 1 Introduction... 3 2 Création du mini-site... 4 2.1 Autorisation de création... 4 2.2 Création de votre site Web...

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

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

WinTask x64 Le Planificateur de tâches sous Windows 7 64 bits, Windows 8/8.1 64 bits, Windows 2008 R2 et Windows 2012 64 bits

WinTask x64 Le Planificateur de tâches sous Windows 7 64 bits, Windows 8/8.1 64 bits, Windows 2008 R2 et Windows 2012 64 bits WinTask x64 Le Planificateur de tâches sous Windows 7 64 bits, Windows 8/8.1 64 bits, Windows 2008 R2 et Windows 2012 64 bits Manuel d initiation du Planificateur 2 INTRODUCTION 5 CHAPITRE I : INSTALLATION

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

Web-Interactive Mai 2010. Interactive 2.0. Manuel d utilisation

Web-Interactive Mai 2010. Interactive 2.0. Manuel d utilisation Interactive 2.0 Manuel d utilisation 1 Contenu Chapitre 1 : L Arborescence... 3 Créer un menu.... 3 Ordonner les menus... 6 Destruction d un menu.... 6 Chapitre 2 : Les pages... 7 Titre de votre page....

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

LE SITE INTERNET DU COLLÈGE

LE SITE INTERNET DU COLLÈGE LE SITE INTERNET DU COLLÈGE I) Introduction 1) Présentation Le site du collège est réalisé à l aide de SPIP. C'est un logiciel de publication pour l Internet qui permet de gérer un site à plusieurs, de

Plus en détail

MANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE. Documentation utilisateur Octobre 2005

MANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE. Documentation utilisateur Octobre 2005 MANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE Documentation utilisateur Octobre 2005 I. Principes 1.1 - Généralités Les personnes autorisées à intervenir sur le site sont enregistrées par

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

GUIDE DE L UTILISATEUR

GUIDE DE L UTILISATEUR GUIDE DE L UTILISATEUR Version 3 C est parti pour gérer, modifier et mettre à jour votre site I-set! Avec simplicité, rapidité et en toute autonomie SOMMAIRE DÉMARRER CONSTRUIRE & GÉRER CONSULTER 1. Introduction:

Plus en détail

Microsoft Publisher. Notions de base. Versions Office 2007. Association Informatique Pour Tous - Vieillevigne - 1 - PUBLISHER 2007 NOTIONS DE BASE

Microsoft Publisher. Notions de base. Versions Office 2007. Association Informatique Pour Tous - Vieillevigne - 1 - PUBLISHER 2007 NOTIONS DE BASE Microsoft Publisher Notions de base Versions Office 2007 Gilbert Lecocq 1 2 SOMMAIRE Notions de base La fenêtre de travail page 3 Les modes de travail page 4 Les objets à insérer page 6 Insérer un texte

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

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

Utilisez internet pour présenter vos travaux, créez votre site web Initiation à dreamweaver 2

Utilisez internet pour présenter vos travaux, créez votre site web Initiation à dreamweaver 2 Utilisez internet pour présenter vos travaux, créez votre site web Initiation à dreamweaver 2 1. Introduction Un site web est constitué d un ensemble de pages conçues avec le langage HTML (HyperText Markup

Plus en détail

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation.

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation. 1 Mega Menu Avec le du Worldsoft CMS, vous pouvez créer des menus de navigation. Vous pouvez mettre en place autant de menus que vous le désirez et les adapter graphiquement. Avec votre propre contenu

Plus en détail

Utilisation du client de messagerie Thunderbird

Utilisation du client de messagerie Thunderbird Outlook express n existant plus sur les systèmes d exploitation sortis après Windows XP, nous préconisons désormais l utilisation du client de messagerie libre distribué gratuitement par la Fondation Mozilla.

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

Leçon N 11 Faire un Album de photo avec ALBELLI 2 ème partie

Leçon N 11 Faire un Album de photo avec ALBELLI 2 ème partie Leçon N 11 Faire un Album de photo avec ALBELLI 2 ème partie Vous allez créer avec cette leçon un album de photo avec le logiciel «Albelli livre photo». 2 La préparation Le travail le plus important pour

Plus en détail

SUPPORT DE FORMATION WORD : niveau 2

SUPPORT DE FORMATION WORD : niveau 2 SUPPORT DE FORMATION WORD : niveau 2 Espace public multimédia Le Cyber 49, rue Maurice Thorez 92000 Nanterre - Tél. : 01 41 20 08 41 www.nanterre.fr Sommaire Introduction...3 I. Bordures et trame... 4

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

LE SITE INTERNET DU COLLÈGE

LE SITE INTERNET DU COLLÈGE LE SITE INTERNET DU COLLÈGE I ) Introduction: 1 Présentation : Le site du collège est réalisé à l aide de SPIP. C'est un logiciel de publication pour l Internet qui permet de gérer un site à plusieurs,

Plus en détail

Initiation Publisher. Karine PEREIRA

Initiation Publisher. Karine PEREIRA BUREAU de WINDOWS Lorsque vous allumez votre ordinateur, vous arrivez directement sur le bureau de WINDOWS. Ce bureau, qui occupe la surface entière de l écran, est différent d un utilisateur à l autre,

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

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

Sommaire. Images Actives Logiciel libre développé par le CRDP de l académie de Versailles 2 Rue Pierre Bourdan Marly le Roi - 78160

Sommaire. Images Actives Logiciel libre développé par le CRDP de l académie de Versailles 2 Rue Pierre Bourdan Marly le Roi - 78160 Sommaire Choisir son image... 2 Enregistrer son travail... 3 Créer les détails... 4 Supprimer une zone ou un détail... 6 Les commentaires... 6 Créer un lien hypertexte... 8 Appliquer un modèle... 8 Personnaliser

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

Gérer un site internet simple

Gérer un site internet simple TUTORIEL Gérer un site internet simple Pourquoi avoir un site internet? Table of Contents Table of Contents... 2 Étape 1 : créer un compte Google (Gmail)... 3 Etape 2 : créer un site internet Google...

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

Leçon N 5 PICASA Généralités

Leçon N 5 PICASA Généralités Leçon N 5 PICASA Généralités Avec cette leçon N 5, nous allons commencer l étude du traitement de vos photos avec le logiciel de GOOGLE, PICASA, que vous avez téléchargé dans la leçon N 3. 1 Présentation

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

GESTION DU LOGO. 1. Comment gérer votre logo? 2. 2.1. Format de l image 7 2.2. Dimensions de l image 8 2.3. Taille de l image 9

GESTION DU LOGO. 1. Comment gérer votre logo? 2. 2.1. Format de l image 7 2.2. Dimensions de l image 8 2.3. Taille de l image 9 GESTION DU LOGO 1. Comment gérer votre logo? 2 1.1. Insérer un logo 3 1.1.1. Insérer un logo dans le bandeau 3 1.1.2. Insérer un logo dans les éditions 4 1.2. Supprimer un logo 6 1.2.1. Supprimer un logo

Plus en détail

Documentation pour webmasters

Documentation pour webmasters Documentation pour webmasters Version du 20 juin 07 Fonctionnalités de base... 1 1 Comment se connecter sur le site?... 1 2 Comment modifier le contenu une page?... 2 Plus en détails...... 3 3 Comment

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

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

Guide utilisateur Typo3

Guide utilisateur Typo3 Guide utilisateur Typo3 Niveau 1 Table des matières 1.Introduction...2 2.Login...2 3.Vue d'ensemble...3 4.Colonne de gauche...5 4.1Le mode PAGE...5 4.2Le mode VOIR...7 4.3Le mode LISTE...8 5.Colonne centrale...9

Plus en détail

Dossier d utilisation

Dossier d utilisation Dossier d utilisation Lancer le logiciel Microsoft WORD. Page 1 Ouvrir Un fichier existant Page 1 Créer (ou Ouvrir) un nouveau document Page 2 Sauvegarder un nouveau fichier Page 2 Enregistrer un document

Plus en détail

INITIATION A POWERPOINT

INITIATION A POWERPOINT INITIATION A POWERPOINT P. BESSON OCTOBRE 2000 SOMMAIRE Chap. 1 Découverte de POWERPOINT I. Démarrer Powerpoint 1. Lancement de l application 2. Boite de dialogue de démarrage de Powerpoint II. Structure

Plus en détail

Comment utiliser Votre site web» Table des matières Tableau de bord de Votre site web»...2 Ajouter un fichier média : Images»...6 Guide de démarrage

Comment utiliser Votre site web» Table des matières Tableau de bord de Votre site web»...2 Ajouter un fichier média : Images»...6 Guide de démarrage Comment utiliser Votre site web» Table des matières Tableau de bord de Votre site web»...2 Ajouter un fichier média : Images»...6 Guide de démarrage rapide. Rédiger une page ou un article,»...3 Ajouter

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

Site internet du collège Comment écrire un article?

Site internet du collège Comment écrire un article? Site internet du collège Comment écrire un article? Préambule : les rôles. L administrateur du site vous a attribué des droits. L utilisateur simple peut, par exemple, simplement commenter un article ou

Plus en détail

Guide de l administrateur de rubriques du site communal d ORCHAISE

Guide de l administrateur de rubriques du site communal d ORCHAISE Guide de l administrateur de rubriques du site communal d ORCHAISE Sommaire Comment est organisé le site?... 1 Comment accéder à l interface privée?... 2 Comment se connecter?... 2 Comment modifier son

Plus en détail

Manuel d utilisation du CMS

Manuel d utilisation du CMS Manuel d utilisation du CMS ---------------------------- Le gestionnaire de contenu Web et son manuel d utilisation sont une production Global-Média inc. Cet ouvrage est assujetti aux lois sur les droits

Plus en détail

Guide Rédacteur Typo3

Guide Rédacteur Typo3 Guide Rédacteur Typo3 Table des matières 1. Introduction 1 2. Login 1 3. Vue d'ensemble 2 1.1 Le mode Page...5 1.2 Le mode Voir...7 4. Créer une nouvelle page 8 5. Déplacer une page 9 6. Copier une page

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

Aller plus loin avec le traitement de texte : mettre en forme un Curriculum Vitae

Aller plus loin avec le traitement de texte : mettre en forme un Curriculum Vitae 29 janvier 2013 p 1 Aller plus loin avec le traitement de texte : mettre en forme un Curriculum Vitae Pour permettre au plus grand nombre de réaliser cet exercice, nous utiliserons le logiciel libre Libre

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

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

EasyNewsletter. 1. Création d un groupe d envoi de newsletter

EasyNewsletter. 1. Création d un groupe d envoi de newsletter EasyNewsletter Créez et envoyez des newsletters contenant textes, images, liens, et téléchargements en toute simplicité. Avec cet outil, vous pouvez également gérer vos listes de diffusion en quelques

Plus en détail

Calculatrice virtuelle HP Prime

Calculatrice virtuelle HP Prime Calculatrice virtuelle HP Prime Microsoft est une marque commerciale du groupe de sociétés Microsoft. Les informations contenues dans ce document peuvent être modifiées sans préavis. Les garanties relatives

Plus en détail

http://agents.cirad.fr/admin Mode d emploi

http://agents.cirad.fr/admin Mode d emploi http://agents.cirad.fr/admin Mode d emploi Introduction... 1 1. Comment créer sa page? La connexion au service... 2 2. Navigation dans agents.cirad.fr... 2 3. Gestion des pages... 3 4. Gestion des fichiers...

Plus en détail

Formation à l administration de votre site Internet

Formation à l administration de votre site Internet Rédacteur : B2F Concept Date : 01/08/2012 Destinataire : Mairie de Drumettaz Formation à l administration de votre site Internet Introduction...2 Connexion à l administration...2 Gestion de contenu...3

Plus en détail

www.loveattitude.be Manuel d utilisation Logiciel de gestion du site CMS SPIP Été 2011

www.loveattitude.be Manuel d utilisation Logiciel de gestion du site CMS SPIP Été 2011 www.loveattitude.be Manuel d utilisation Logiciel de gestion du site CMS SPIP Été 2011 Au préalable Avant toute chose, bienvenue sur le nouveau site www.loveattitude.be! Ce portail web est devenu un site

Plus en détail

Réalisation d une Interface Utilisateur

Réalisation d une Interface Utilisateur Réalisation d une Interface Utilisateur Pour manipuler facilement les données enregistrées dans une base de données, il est nécessaire de cacher leur implantation technique dans les tables et d offrir

Plus en détail

Comment utiliser votre espace association

Comment utiliser votre espace association PORTAIL ASSOCIATIF DE LA MAIRIE DE PESSAC http://portailasso.pessac.fr/ Comment utiliser votre espace association SOMMAIRE 1 ACCES A VOTRE COMPTE... 3 2 PAGE DE BIENVENUE... 4 3 RUBRIQUE «MES INFORMATIONS»...

Plus en détail

Gestion des sites Internet du groupe Stem Notice d utilisation

Gestion des sites Internet du groupe Stem Notice d utilisation Gestion des sites Internet du groupe Stem Notice d utilisation Table des matières Présentation 2 Connexion à la plateforme de gestion 2 Gestion et modification du contenu 3 Gestion des documents 13 Gérer

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

L interface utilisateur de Windows

L interface utilisateur de Windows Windows, développé par l éditeur américain Microsoft Corporation, est de loin le système d exploitation pour ordinateurs personnels le plus utilisé dans le monde. Il dépasse à lui seul 90 % du marché mondial

Plus en détail

MO-Call pour les Ordinateurs. Guide de l utilisateur

MO-Call pour les Ordinateurs. Guide de l utilisateur MO-Call pour les Ordinateurs Guide de l utilisateur Sommaire MO-CALL POUR ORDINATEURS...1 GUIDE DE L UTILISATEUR...1 SOMMAIRE...2 BIENVENUE CHEZ MO-CALL...4 MISE EN ROUTE...5 CONNEXION...5 APPELS...7 COMPOSITION

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

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

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

Introduction à Windows XP

Introduction à Windows XP Introduction à Windows XP Windows...1 Windows dans les grandes lignes...1 Interface de Windows...1 Afficher les menus contextuels...2 Exemples de menus contextuels...2 Bureau de Windows...2 Barre des tâches...2

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) Définition d'un Traitement de textes

1) Définition d'un Traitement de textes Traitement de textes Microsoft Word 1) Définition d'un Traitement de textes Le traitement de textes est un outil qui permet de manipuler et gérer de l'information, c'està-dire, saisir ou entrer des données

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