Support de cours Edition Internet

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

Download "Support de cours Edition Internet"

Transcription

1 Support de cours Edition Internet Céline Savel Pascale Laurier Dekpo-Wyna Yologaza Fredéric Gerland Historique et définition d Internet page 2 Le langage HTML/XHTML page 6 Organisation des dossiers et des fichiers page 17 Les formats d'images pour le web page 19 Les Frames page 20 Utilisation de javascripts page 23 Découverte de Dreamweaver page 26 Notions de WebDesign page 45 Image Ready page 55 Les Feuilles de styles CSS page 61 Positionnement des éléments en CSS page 74 Construction d'une page sans tableaux page 79 Les Formulaires page 87 Les comportements sous Dreamweaver page 93 Les calques sous Dreamweaver page 95 Productivité de développement page 99 Le Multimedia page 103 Les différentes Meta-Tags page 106 Le référencement page 107 1/133

2 1. Un peu d'histoire : INTERNET C'EST QUOI? 1962 : l'armée américaine demande à des chercheurs de créer un réseau de communication militaire. Le concept de ce réseau repose sur un système décentralisé, permettant au réseau de fonctionner malgré la destruction d'une ou de plusieurs machines : création du réseau expérimental ARPANET créé afin de relier quatre instituts universitaires aux Etats-Unis (sans objectif militaire) 1972 : ARPANET est présenté au grand public, lors de la conférence ICCC (International Computer Communication Conference) : mis au point protocole HTTP (Hyper Text Tranfer Protocol) par Tim Berners-Lee (chercheur au CERN de Genève). Il met également au le langage HTML (HyperText Markup Language) permettant de naviguer à l'aide de liens hypertextes, à travers les réseaux. Le World Wide Web est né. Initialement, le projet de Tim Berners-Lee était de partager des documents quelle que soit la machine utilisée pour les concevoir, les transmettre et les afficher. Une équipe d'étudiants de l'illinois mit au point le premier navigateur graphique, Mosaic. Rapidement, les limites du format HTML sont apparues, et il a fallu créer des extensions à ce langage. L'équipe de Mosaic a fondé Netscape, sortant de nouvelles versions/extensions. Microsoft, embraya le pas de Netscape et sortit aussi de nouvelles versions/extensions, mais incompatibles avec celles de Netscape, menant ainsi Internet à l encontre de son principe premier. World Wide Web Consortium : un organisme de référence Créé en 1994 par Tim Berners-Lee, le W3C a pour objectif de promouvoir la compatibilité des technologies/langages du Web telles que HTML, XHTML, XML, CSS, PNG Le W3C n'émet pas des normes, mais des recommandations à valeur de standards. Il permet de garantir l uniformité des protocoles, des langages, des outils Il est le protecteur des fondements d'internet. Le W3C œuvre pour l accessibilité du Web en laissant le soin aux fabricants de logiciels et aux développeurs de suivre ses recommandations. En conclusion : La concurrence entre Netscape et Microsoft (et autres ) a mené le Web à l'encontre de son ambition initiale. Aujourd hui Internet a besoin de s ouvrir aux nouvelles technologies plus mobiles et plus adaptées aux besoins des utilisateurs et des personnes handicapés (téléphones portables, palm, webtv, navigateurs vocaux etc ). L exigence actuelle est de séparer les données (le texte, l information) de la mise en page (présentation, images, couleurs). 2/133

3 L avenir du Web passe donc par les standards recommandés par le W3C qui sont les langages XHTML et CSS. (cf Fonctionnement Internet c'est quoi? Internet est un réseau informatique mondial permettant la communication entre les ordinateurs, grâce à la mise en place de liaisons physiques et de protocoles. Il existe de nombreux protocoles sur Internet, ils font partie d'une suite de protocoles qui s'appelle TCP/IP (Transmission Control Protocol/Internet Protocol). TCP/IP est basé sur le repérage de chaque ordinateur par une adresse appelée " adresse IP " qui permet d'acheminer les données à la bonne adresse. Désormais les adresses IP sont associées à des noms de domaines (dans le cas des serveurs qui hébergent les sites internes) par le biais de DNS (Domain Name Server). Base du fonctionnement Client/Serveur Schéma de fonctionnement d'internet : Le Web est composé d ordinateurs clients et serveurs capables de communiquer par le biais de protocoles. Le client : côté internaute. La communication avec Internet se fait au moyen de navigateur (browser en anglais). Il en existe de différents types pour les différents systèmes d'exploitations : Internet Explorer, Firefox, Opéra, Safari... Le serveur : c'est l'ordinateur qui héberge les sites internet. Il comporte très souvent un système d'exploitation adapté (Linux/Unix) afin de répondre à un très grand nombre de demandes. Il possède une très grande capacité de stockage. 3/133

4 Les principaux protocoles du Web : - TCP/IP & DNS : Adressage - HTTP (HyperText Transfer Protocol) : affichage des pages web, transfert descendant "Download", - FTP (File Tranfer Protocol) : permet l échange de fichiers, transfert ascendant "Upload" et descendant "Download" (récupérer). Notion d hébergement / de serveur distant Un hébergement est un espace alloué sur un disque dur accessible à toute personne connectée à internet. Les pages web sont transférées (uploadées) sur ce serveur en s'y connectant par un client FTP, grâce aux codes fournis par l'hébergeur. L'affichage des pages est alors visible sur un navigateur par le biais du protocole HTTP à l'adresse du site, c'est-à-dire son URL (Universal Ressources Location), exemple : 3. Les principaux langages du Web Langages de mise en page : Le HTML : (HyperText Marked-up Language) Les informations reçues par le navigateur sont des données texte au format HTML, qui sont " transformées " en mise en page (exemple : ouvrir Internet Explorer, Menu Affichage/Source). Une page web est donc un fichier texte comportant l extension.htm ou.html. Le XML : (extensible Marked-up Language) langage permettant l'organisation de données pures, telle une base de données ou plutôt un " îlot de données ". Le XHTML : langage de transition du HTML au XML. Respectueux des besoins d accessibilité. Les Feuilles de Styles CSS : (Cascading Style Sheet) Feuilles de Styles spécifiques aux navigateurs, directement intégrées au code HTML. 4/133

5 Langages de programmation interprétés côté client : Le Javascript : Langage de programmation réservé aux navigateurs directement intégré au code HTML. Le VBScript : (Visual Basic Script) Langage de programmation développé par Microsoft directement intégré au code HTML, il permet l'automatisation de certaines tâches. Le JAVA : totalement différent du Javascript, le JAVA est un langage de programmation avancé (très complet). Il s'intègre au code HTML par le biais d'applet (petit programme) sous réserve que le client possède une " machine virtuelle " capable de l'interpréter. Langages de programmation interprétés côté serveur (PHP, ASP, ) Le JAVA, sous forme de véritables logiciels spécifiques aux tâches du serveur. Le PHP : (Personal Home Page) permet l'interactivité avec l'internaute (exemple : les forums, les chats, les boutiques en ligne...) et l'interaction avec des bases de données. L'ASP : (Active Server Pages) langage développé par Microsoft permettant l'interactivité avec l'internaute Le Perl : langage de programmation très puissant... Le C++ : langage de programmation très puissant... Le SQL : (Server Query Langage) langage réservé aux serveurs de bases de données. 5/133

6 LE LANGAGE HTML ET XHTML Html signifie HyperText Markup Language, le X de Xhtml signifie extensible. Le code (X)HTML n est pas un langage de programmation, c est un langage à balises. Il est utilisé pour concevoir la mise en page en insérant du texte, affichant des images, de créer les liens avec d autres pages web afin de renseigner un navigateur pour afficher ces informations. Pour écrire ce code, il suffit d'avoir un éditeur de texte et d'enregistrer les fichiers en mode texte avec une extension.htm ou.html. Les outils de génération de code (X)HTML (Dreamweaver, ) permettent d'économiser un temps considérable. 1. Principales Règles d'écriture : Les commandes (ou instructions) HTML sont exprimées dans des balises (ou "tags"), délimitées par des crochets < >. Exemple : <html> Presque toutes les balises ouvertes doivent être fermées. Cette balise de fermeture est identique à la balise d'ouverture avec une barre oblique en plus. Exemple : <html>.</html> Un particularité pour le XHTML, pour les balises ne nécessitant de balises de fermeture en HTML (sans contenu), le signe de fermeture se fait à la fin de la balise. Exemple : <br /> L'écriture des balises se fait en minuscule pour le XHTML (mais pouvait être en majuscule en HTML). L'ordre d'ouverture et fermeture des balises doit être rigoureux : il faut absolument respecter l'ordre d'imbrication des balises. Exemple : <balise1><balise2></balise2></balise1> Chaque balise peut contenir un (ou plusieurs) attribut, il donne des précisions sur la commande. Il est suivi du signe = et de la valeur entre "". Exemple : <img src="image.gif" alt="nom de l'image" /> Les accents sont écrits sous forme de codes spéciaux. Exemple : é s'écrit é 6/133

7 2. Structure d'une page HTML/XHTML Une page HTML/XHTML doit commencer par une instruction doctype qui permet de définir le standard du document que vous allez utiliser. Exemple : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " La balise <html></html> Ensuite, vient la balise <html> qui indique le début et la fin du document. Elle englobe les deux parties suivantes. L'En-tête : <head> </head> Il comprend : o le titre de la page (qui s'affiche en haut à gauche de la fenêtre du navigateur) o les balises "Méta" (éléments invisibles pour l'internaute) importantes pour le référencement du site, o les scripts Javascript, o les définitions des feuilles de styles CSS... Le Corps : <body> </body> Dans lequel on retrouve tous les éléments visibles pour l'internaute, c'est à dire texte de la page, tableaux, images, liens, animations, son, vidéo... Schéma d'imbrication des balises : 7/133

8 Exemple : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <title>titre de la page</title> </head> <body> Contenu de la page </body> </html> 3. Les spécifications du langage xhtml Le langage html est figé à la version 4.01, il n'évoluera plus. Il est remplacé par le xhtml. Le langage xhtml sert à structurer le document. La mise en forme du document sera de préférence définie par l'utilisation de feuilles de styles. Résumé des principales différences entre les deux langages : Le code XHTML est plus rigoureux, il doit avoir : - Des balises écrites en minuscule, - Des balises fermées, - Des Imbrications correctes de balises, - Une Déclaration du Doctype, - Les valeurs des attributs encadrées par des guillemets, - l'attribut xmlns dans la balise <html> Déclaration de type de document L'écriture du document xhtml nécessite une déclaration du type de document (DTD) (non obligatoire en html). Cette instruction de doctype permet de définir le standard (x)html qui est utilisé. Elle doit être le premier élément de la page, placé avant la balise <html>. Cet élément permet de faciliter la validation du code source du document. 8/133

9 Il existe trois types de DTD : - la DTD stricte : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Il s agit d une interprétation stricte de la syntaxe XHTML. Elle impose des restrictions quant à la position de certains éléments. Elle n accepte pas les éléments de cadre et les éléments "dépréciés". - la DTD transitoire : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" transitional.dtd"> Elle est plus souple que la précédente (autorise l'emploi d'éléments dépréciés) mais pas l utilisation des éléments de cadres. - la DTD jeu de cadres <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " Cette DTD autorise l usage des cadres. Remarque : Pour le passage du HTML au XHTML, il vaut mieux donc commencer avec la version transitoire du xhtml qui présente moins de différences avec le HTML4.01. Liste sommaire d'éléments dépréciés (pouvant donc être utilisés avec la DTD transitoire) : - Balises : <font>, <center>, <u> - Attributs : - balise <body> : alink, link, vlink, text, background, bgcolor - balise <table>, <td>, <tr> : bgcolor, height, width, nowrap - balise <img> : boder, hspace, vspace Tous ces éléments étant amenés à disparaître, il faut essayer de les proscrire dans la création des pages web. 9/133

10 4. Les principales balises Caractères spéciaux Le code HTML comporte de nombreuses expressions pour les caractères spéciaux : Caractères Espace insécable > > < < é é è è à à ô ô ç ç Code Ce sont les principaux, il en existe d autres Formatage du texte : <b> texte gras </b> <i> texte italique </i> <u> texte souligné </u> à éviter pour ne pas confondre avec un lien <br /> retour à la ligne forcé, sans fin de paragraphe (pas de fermeture de la balise) <p> paragraphe </p> isole un paragraphe (retour à la ligne avant et après) <font color="red" size="3" face="verdana"> texte de couleur rouge de taille 3 police verdana </font> type de la police, taille du texte, couleur <h1>titre 1 </h1> titres dont les valeurs vont de h1 à h6, le 1 étant la plus grande taille 10/133

11 <div align="center"> texte centré </div> Insertion d'images : <img> <img src=" images/logo.jpg" alt="logo" width="100" height="50" hspace="10" vspace="10" border="0" /> Les attributs de la a balise <img> : src width="150" height="100" précise la source de l'image appelée (on peut utiliser une adresse absolue sur Internet) Dimensions : largeur/hauteur en pixel (si précisées, elle est chargée plus rapidement par le navigateur). Il est conseiller d'utiliser les images à leur taille réelle. alt Texte alternatif : - texte visible si il n'y a pas chargement de l'images, - étiquette (légende) de l'une image s'affichant au passage du pointeur, - utiliser par certains moteurs de recherche pour d'indexer les pages du site. border="0" Par défaut une image définie en tant que lien prend automatiquement une bordure. Pour désactiver cet effet affecter 0 à la valeur de bordure. hspace="10" Espace vertical et horizontal autour de votre image vspace="10" align="right" Alignement texte et image : par défaut l'image est placée sur une ligne et le texte est aligné sur le bas de l'image. - left : Texte à gauche - right : Texte à droite - middle : Texte au milieu - absbottom : Texte en bas (absolu) - absmiddle : Texte au milieu (absolu) - baseline : Sur la ligne du texte - bottom : Texte en bas - texttop : Texte en haut - top : En haut Les liens hypertextes : <a> </a> 11/133

12 <a href=" " > lien </a> L'attribut principal href indique la source du document appelé (relative ou absolue). Les différents types de lien : - Liens absolus : renvoient à d'autres pages Web externe au site La valeur _blank à l'attribut target permet d'ouvrir la page dans une nouvelle fenêtre. <a href=" target= _blank >ARIES "</a> - Liens Relatifs : renvoient à d'autres pages d'un même site. <a href="mapage.html">cliquez ici</a> Exemple d'un lien à partir d'une image : <a href="mapage.html"><img src="image.gif"></a> Exemple d'un lien vers une page dans un répertoire différent : <a href="dossier/mapage.html">cliquez ici</a> - Lien vers une adresse Il active le programme de messagerie de l'internaute avec automatiquement l'adresse du destinataire. <a href="mailto:nom@fournisseur.com">contact</a> Avec Objet du message : <a href="mailto:nom@fournisseur.com?subject=titre du site 12/133

13 ">contact </a> envoyé à 2 personnes dont une en copie : <a href="mailto:nom@fournisseur.com?cc=nom2@fourniss.com"> contact </a> - Liens vers une ancre : liens internes dans une même page (navigation verticale dans la page courante). Deux étapes sont nécessaires : définir l'ancre (la cible du lien) et associer le lien à cette ancre. Remarque : il n'est pas nécessaire de mettre un texte entre les balises de l'ancre. <a name="rubriquea"></a> <a href="#rubriquea ">Aller à la rubrique A</a> - Liens pour proposer le téléchargement un fichier : <a href="fichier.zip"> Cliquez ici pour télécharger le fichier </a> Autres balises : Ligne horizontale : <hr /> Elle peut être paramétrée en largeur (ex : width="100") hauteur (ex : size="5") ombrage (ex : noshade="noshade" ou alignement (ex : align="center"). 13/133

14 Les commentaires : <!--commentaires --> Les couleurs : La mise en couleur décrite ci-après, l'insertion d'image de fond ainsi que la définition de marges, bien qu'encore assez souvent rencontrées sur internet, sont vouées à disparaître du code html au profit des styles CSS. Couleur de fond de page : <body bgcolor="#000000"> Couleur du texte : <body text="#ffffff"> Couleur des liens : <body link="#006600"> Couleur des liens visités : <body vlink ="#999999"> Couleur du lien actif (clic de la souris) : <body alink ="#00CC00""> Remarque : il est possible d'utiliser le nom des couleurs en anglais, mais pour une meilleure correspondance de couleur entre tous les logiciels (Photoshop, Dreamweaver, Flash...) il est préférable d'utiliser les valeurs hexadécimales. 14/133

15 Image de fond ou background Cet attribut permet d'afficher une image en la répétant en tant que "motif". <body background="images/fond.gif"> Il peut être aussi utilisé en arrière plan d'un tableau. Les marges du document <body leftmargin="0" topmargin="0" marginwidth="0" marginheigth="0"> Création de tableau La conception de tableau nécessite au moins trois balises : - <table> </table> : indique le début et la fin du tableau - <tr> </tr> : (row) désigne une rangée - <td> </td> : (data) désigne les cellules par ligne. Exemple d'un tableau à deux lignes et deux colonnes d'une largeur de 300 px dont les contours ne sont pas visibles : <table width="300" border="0"> <tr> <td> Ligne 1 - cellule 1 </td> <td> Ligne 1 - cellule 2 </td> </tr> <tr> <td> Ligne 2 - cellule 1 </td> <td> Ligne 1 - cellule 2 </td> </tr> </table> La dimension d'un tableau peut être définie soit en pixel ou en pourcentage. Un tableau dimensionné a 100%, prendra 100% de la largeur de la fenêtre du navigateur (ou 100% de la largeur de la cellule de tableau dans le cas de tableaux imbriqués...). On peut aligner le tableau ou caler le contenu d une colonne en précisant l attribut align (center, left et right). Pour permettre certaines mises en pages, il est possible d imbriquer des tableaux les uns dans les autres. 15/133

16 On peut aussi utiliser les balises spécifiques <th>à l'affichage d'en-tête dans le tableau afin d'afficher automatiquement le texte en gras. Chaque ligne doit contenir le même nombre de cellule. Il est possible néanmoins de fusionner certaines cellules entre elles (<colspan> ou <rowspan>). Exemple d'un tableau à trois rangées et deux colonnes et dont la première ligne a été fusionnée : <table width="300" border="0"> <tr> <td colspan="2">fusion des deux cellules de la ligne 1</td> </tr> <tr> <td> Ligne 2 - cellule 1 </td> <td> Ligne 2 - cellule 2 </td> </tr> <tr> <td> Ligne 3 - cellule 1 </td> <td> Ligne 3 - cellule 2 </td> </tr> </table> La mise en page HTML avec les tableaux : Une page HTML n a pas de dimensions propres, sa taille dépend de son contenu. Le texte contenu dans la page " coule " dans la page en fonction de la taille de la fenêtre du navigateur. Pour structurer le contenu d une page web, l'utilisation des tableaux était très répandue. Mais il faut savoir qu'ils étaient prévus originellement pour mettre en forme des données tabulaires. Cette utilisation a été détournée par les auteurs web pour la mise en page. D'ailleurs, les tableaux nuisent à l accessibilité des pages (Un navigateur non graphique, spécialisé pour handicapés, un mobile ou un lecteur d'écran ne pourra pas deviner l'ordre dans lequel vous vouliez que le contenu apparaisse), les tableaux nuisent aux mises à jour, en effet l ajout de contenu nécessite une recomposition des tableaux de la page, les tableaux nuisent à l impression, les tableaux alourdissent les pages Pour toutes ces raisons, les tableaux se voient délaissés au profit des divisions de page <div> couplées aux feuilles de styles CSS. Les éléments de liste : Pour créer une liste, deux types de balises sont nécessaires : - Le conteneur de la liste : <ul> </ul> pour les listes non ordonnées (à puces) <ol> </ol> pour les listes numérotées. 16/133

17 Exemple : - Les éléments de liste par <li> </li>. <ul> <li>rubrique A </li> <li>rubrique B </li> <li>rubrique C </li> </ul> 17/133

18 ORGANISATION DES REPERTOIRES ET FICHIERS D'UN SITE WEB Gérer un site web nécessite une grande rigueur, aussi bien au niveau du nom donné aux fichiers, que de l'organisation des éléments du site (pages, images, fichiers javascripts, fichiers de styles ). 1. Règles de nommage des fichiers et dossiers : La page de démarrage s'appelle index.html (ou index.htm). Certains serveurs sont sensibles à la casse : ils différencient les minuscules des majuscules. Monimage.jpg est différent de monimage.jpg Bannir les caractères spéciaux : pas de /\*' "?<>: Bannir les espaces et les accents. Éviter les noms trop longs (en moyenne 8 caractères) 2. Organisation des fichiers et dossiers : Les différents éléments utilisés pour la création d'un même site doivent être placés dans le même dossier de travail afin de conserver des parcours (chemins) relatifs corrects dossiers. Ils seront rangés dans des dossiers et/ou sous-dossiers. Avant la création réelle des pages html, il est nécessaire de définir une structure pertinente des dossiers. La première page du site (index.html) doit toujours être placée à la racine du dossier de travail (jamais dans un sous-répertoire). Exemple d'organisation : A cette organisation se rajoute un dossier de travail où sont conservés les éléments qui ont servi à la création mais qui ne sont pas dans les pages comme les psd. 3. Chemin Pour renseigner des chemins (parcours) en html, lorsque l'on veut faire référence à une image (src), ou bien appeler un lien (href) il faut suivre des règles très précises. 18/133

19 Les chemins sont toujours relatifs à l'emplacement de la page courante (à part dans le cas d'une adresse absolue Pour accéder à une image placée dans un dossier le chemin est : src="dossier/image.gif" Si il est nécessaire de "sortir" du dossier courant pour accéder au dossier contenant l'image, le chemin est alors : src="../dossier/image.gif" 4. Vérifier le poids des pages Conventionnellement on évite de dépasser 80ko pour une page Web (code, images et plugin confondus). Ce qui nécessite une stricte optimisation des éléments. 19/133

20 LES FORMATS D'IMAGE POUR LE WEB Le mode colorimétrique des images sur le web est strictement RVB (il ne faut jamais utiliser CMJN ou N/B). La résolution reste celle d'un écran, c'est à dire 72 pixels par pouce (72 dots per inch), afin d'économiser du poids, donc du temps d'affichage. Les formats supportés :.jpeg ou.jpg (Joint Photographic Expert Group) : - C'est un format de compression destructive (rapport qualité/poids) capable de restituer des millions de couleurs. - Il comporte une option permettant de le rendre progressif, c'est à dire qu'il peut s'afficher au fur et à mesure de son téléchargement dans les navigateurs. - Utilisation : images comportant de nombreuses nuances de couleurs (photos, dégradés...)..gif (Graphic Interchange Format) : - C'est un format à palette de couleurs indexées (de 2 à 256 couleurs). Ainsi grâce à cette palette limitée en nombre de couleurs, les images.gif ont une taille généralement faible. On peut aussi économiser du poids en supprimant les couleurs inutilisées dans la palette de chaque fichier. - Il peut contenir de la transparence (contrairement au format.jpeg). - Utilisation : images comportant peu de nuances de couleurs (logos, pictogrammes, plans...). - Possibilité d'avoir des images animées : ce format est aussi capable de contenir une série d'images cadencée en centièmes de seconde permettant donc d'afficher de petites animations..png (Portable Network Graphics) : - C'est un format à palette de couleurs indexées alliant les nombreuses nuances du format.jpeg et la transparence du format.gif (par couche alpha). - Il comporte aussi une option d'entrelacement permettant d'afficher l'image progressivement. - Il reste peu utilisé, les navigateurs ne l'interprétant pas toujours bien 20/133

21 LES FRAMES (OU CADRES) C'est une technique qui permet de séparer la fenêtre du navigateur en plusieurs zones (2 au minimum) afin d'afficher plusieurs pages web simultanément. Mais cette technique est de moins en moins utilisée, voire obsolète. Aujourd'hui, peu de sites à fort trafic utilisent ce procédé de frames. Par contre, certaines entreprises ou organisations continuent à les utiliser. Exemple de Cadres et Jeu de cadres : 1-Le jeu de cadres (ou Frameset) est une page HTML qui fait office de conteneur, c'est à dire qu'elle permet d'afficher des pages web dans des cadres (ici 2 et 3). Dans le cas d'un site utilisant cette technique, la page index.htm peut être le jeu de cadres. A noter, le titre du jeu de cadre sera celui toujours visible en haut à gauche de la fenêtre du navigateur. 2-Le cadre (Frame) de gauche est une page HTML chargée par le jeu de cadres. On peut placer ici un menu de navigation. 3-Le cadre de droite est une page HTML chargée par le jeu de cadres. On peut placer ici une page de contenu. Donc pour réaliser une telle configuration, il est nécessaire d'avoir trois fichiers! Réalisation d'un site utilisant un jeu de cadres et des cadres : Créer d'abord les pages appelées par le jeu de cadres, c'est à dire la page du menu (menu.htm) et les pages de contenu (accueil.htm, rubrique1.htm, ). Ce sont des pages ordinaires. Créer ensuite la page jeu de cadres, page qui va appeler les autres : - utilisation d'un doctype spécifique à l'emploi d'un jeu de cadre ; 21/133

22 - l'appel du jeu de cadre se fait par la balise <frameset></frameset>, qui définit l'organisation verticale (attribut cols) ou horizontale (attribut rows) ainsi que des dimensions des cadres ; - les cadres sont identifiés par un nom (ex. name="menu" pour le cadre de gauche et name="main" pour celui de droite. Code xhtml de la page jeu de cadre : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <html xmlns=" <head> <title>exercice sur les frames</title> </head> <frameset cols="120,*" frameborder="no" border="0" framespacing="0"> <frame src="menu.html" name="menu" /> <frame src="accueil.html" name="main" /> </frameset> <noframes> <body> Ce site utilise la technique des frames. </body> </noframes> </html> A partir du fichier menu.htm, les différentes pages sont appelées et "dirigées" vers le cadre souhaité grâce à l'attribut target qui spécifie le nom du cadre. <table width="100" border="0" cellspacing="0" cellpadding="15"> <tr> <th align="center">menu</th> </tr> <tr> <td align="center"> <a href="accueil.html" target="main">accueil</a> </td> </tr> <tr> <td align="center"> <a href="rubrique1.html" target="main">rubrique 1</a> </td> </tr> 22/133

23 <tr> <td align="center"> <a href="rubrique2.html" target="main">rubrique 2</a> </td> </tr> <tr> <td align="center"> <a href="rubrique3.html" target="main">rubrique 3</a> </td> </tr> </table> 23/133

24 LE JAVASCRIPT Le javascript est un langage de programmation réservé aux navigateurs (donc côté client). Il permet d'étendre les fonctionnalités du HTML. On l'intègre directement dans une page web, dans l'en-tête ou/et dans le corps ou/et dans les liens. 1. Quelques exemples d'application : Exemple d'un code placé dans l'en-tête de la page : Redimensionner la fenêtre du navigateur. Pourquoi? Car une page web n'a pas de dimension propre, elle est soumise à son contenu, il est donc pratique d'utiliser l'espace maximum disponible sur le moniteur de l'internaute. <head> <script language="javascript"> window.resizeto(screen.availwidth,screen.availheight); //on redimensionne à la taille d'écran disponible window.moveto(0,0); //on replace la fenêtre en haut à gauche de l'écran </script> </head> Exemple Javascript dans les liens effectué lors d'un évènement souris : <a href="#" onclick="window.resizeto(200,100)"> lien de redimensionnement </a> Exemple d'une fonction javascript : affichage de la date du jour Deux étapes sont nécessaires : o Déclarer la fonction dans l'en-tête du document, o Appeler la fonction dans le corps du document. 24/133

25 <head> <script language="javascript"> function ladate(){ Today = new Date; Jour = Today.getDate(); Mois = (Today.getMonth())+1; Annee = Today.getFullYear(); Message = "Nous sommes le : " + Jour + "/" + Mois + "/" + Annee; document.write(message); </script> </head> Il faut bien penser ensuite à insérer l'appel de la fonction dans le corps du document (là où s'affichera la date) : <body> <script language="javascript"> ladate(); </script> </body> 2. Principaux événements javascript : Les événements javascript sont des gestionnaires d'action de la souris (et autres...) qui se placent sur divers objets de la page web (corps, liens, images, éléments de formulaire...) afin de créer une interactivité. Evénements Signification Balises autorisées onmouseover Au survol Presque toutes onmouseout A la sortie du survol Presque toutes onclick Au clic (sur un lien) Presque toutes onload Au chargement de la page Body Créer un effet de survol (rollover) avec javascript : exemple : un bouton qui change de couleur lorsqu'on le survole 25/133

26 - créer deux images.gif ou.jpg différentes mais de mêmes dimensions largeur/hauteur (exemple : bouton01.gif et bouton02.gif). - placer le code suivant : <a href="#" onmouseover="enter.src='bouton02.gif'" onmouseout="enter.src='bouton01.gif'"> <img src="bouton01.gif" border="0" id="enter" /> </a> On peut créer une fonction pour faire des effets de survol : - placer le code suivant dans l'en-tête de la page: <script language="javascript"> function change(nom,source){ nom.src=source; </script> -puis placer le code suivant dans le corps de la page <a href="#" onmouseover="change(enter,'bouton02.gif')" onmouseout="change(enter,'bouton01.gif')" > <img src="bouton01.gif" border="0" id="enter" /> </a> 3. Les fichiers.js On peut stocker des fonctions Javascript dans des fichiers texte avec l'extension de fichier ''.js''. Il suffit ensuite d'appeler le(s) fichier(s) en utilisant : <script src="monfichier.js"></script> 26/133

27 1. Dreamweaver 8 DECOUVERTE DE DREAMWEAVER Dreamweaver est un WYSIWYG WYSIWYG est un acronyme anglais : «What you see is what you get» signifiant littéralement «ce que vous voyez est ce que vous obtenez». Ce terme désigne des logiciels avec des interfaces utilisateur graphiques et intuitives permettant de composer visuellement (texte, images ) le résultat voulu : l'utilisateur voit directement à l'écran à quoi ressemblera le résultat final, comme un traitement de texte de type WORD. Dreamweaver fut l'un des premiers éditeurs HTML WYSIWYG : un mode création permet d'effectuer la mise en page directement à l'aide d'outils simples (boutons et boites de dialogues). La version 8 permet de coder en XHTML Ces points forts Il inclut de nouvelles fonctionnalités qui facilitent son utilisation et la création de page. Il prend désormais en charge l'utilisation avancée des feuilles de styles (CSS), du code XML et des fils RSS, ainsi que des normes d'accessibilité. Les nouveautés : - Le Zoom : la fonction de zoom permet d'inspecter une image de plus près ou de travailler avec une mise en page complexe comprenant des tableaux imbriqués. - Les guides : ces guides permettent de mesurer les dimensions avec précisions et donc de se référer plus facilement a la mise en page de la charte graphique. Cette assistance visuelle permet de mieux évaluer les distances et prend même en charge l'accrochage. - La réduction du code : permet de masquer ou développer les blocs de code sélectionnés ou en fonction de certaines balises. Ce qui améliore la lisibilité du code et facilite la correction de celui-ci. - La barre d outil du code : une nouvelle barre d'outils (à gauche du code) place les opérations les plus fréquentes à porté de clic (ajout de commentaires, réduction / développement d une balise ou partie du code, sélection balise parent, envelopper une balise avec une autre, mise en forme /indentation du code ) - Nouveau panneaux CSS : toutes les fonctionnalités CSS sont regroupées au sein d'un même panneau CSS pour simplifier la création et la manipulation de celles-ci. La nouvelle interface permet un meilleure visualisation des styles et une modification plus rapide des attributs de celui-ci. - Affichage en mode création de la mise en page CSS : des aides visuelles permettent de souligner les bordures CSS ou de mettre en couleurs les différents bloc et donc de mieux visualiser la mise en page en CSS. Au survol, un résumé des spécificité de la classe (marges, bordures ) est affiché sous forme de bulles d aide. 27/133

28 - Vidéo Flash : permet d ajouter et de personnaliser les contenus vidéo très facilement. - Transfert des fichiers en tache de fond : cette nouvelle fonctionnalité permet de travailler avec les fichiers sur la machine locale pendant que Dreamweaver communique avec le serveur. Ces points faibles Le code ainsi généré est souvent bien plus long que s'il avait été rédigé manuellement. De plus, il n'est pas toujours en conformité avec les recommandations du W3C. 2. Base de l interface de Dreamweaver Voici l interface Designer : il s'agit d'un espace de travail dans laquelle toutes les fenêtres de document et tous les panneaux sont rassemblés dans une grande fenêtre d'application, les groupes de panneaux sont placés sur la droite. La barre Insérer contient les boutons permettant d'insérer divers types "d'objets", tels que des images, tableaux et calques dans un document. Chaque 28/133

29 objet est une portion de code HTML. Différents onglets permettent d accéder à plusieurs catégories : commun, mise en forme, formulaires, texte, HTML, application (dynamique), éléments flash. Elle se décline sous deux modes d'affichage, soit en menu déroulant, soit en onglet. En général, les éléments choisis sont créés à l'emplacement du curseur, aussi bien dans la zone de code que dans la zone de mise en page, il faut donc être très vigilant pour ne pas placer des éléments n'importe où dans la page HTML. La barre d'outils du document contient les boutons permettant d'accéder aux différents modes d'affichage de la fenêtre du document (mode Création, Code ou Fractionner), de prévisualiser la page dans un navigateur, des fonctions de débogage et des options de visualisation des assistants visuelles dans la page création. Fenêtre de document : - La zone de Code : permet de vérifier le code HTML et de placer le curseur de manière très précise lorsque certains éléments sont inaccessibles dans la zone de Création. Pour être à l'aise il est préférable d'activer les options : Menu Affichage>Options d'affichage du code>retour automatique à la ligne, Numéros de lignes et Coloration de la syntaxe. - La zone de Création : permet de créer, visualiser et modifier tous les éléments présents dans le corps de la page HTML (tableau, texte, lien, image,...). Cette zone est le reflet du code HTML. Mais attention, le résultat d affichage dans le navigateur peut être différent. Il est donc impératif de vérifier l'aspect final de la page HTML dans le navigateur (F12). Il est d'ailleurs fortement conseillé d'installer plusieurs navigateurs (I.E., Mozilla FireFox,...) et de les ajouter dans la liste des navigateurs (cf. aperçu/débogage dans le navigateur). 29/133

30 La barre d'outils standard contient les boutons correspondant aux opérations courantes des menus Fichier et Edition : Nouveau, Ouvrir, Enregistrer, Enregistrer tout, Couper, Copier, Coller, Annuler et Répéter. Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Standard. La barre d'outils de codage (en mode Code uniquement) regroupe des boutons couvrant la plupart des opérations de codage standard. 30/133

31 La barre d'outils de rendu de style est composée de boutons qui vous permettent d'avoir un aperçu de votre création dans différents types de média si vous utilisez des feuilles de style dépendantes du média. Elle contient également un bouton qui permet d'activer ou de désactiver les styles CSS. Pour afficher la barre de rendu de style, choisissez Affichage > Barres d'outils > Rendu de style L'inspecteur Propriétés permet de visualiser et de paramétrer tous les éléments de la page. Chaque objet contient des propriétés différentes. Il change d'aspect suivant la sélection (page, tableau, ligne, colonne, formulaire, image...). Attention pour l emploi pour le texte, car cette méthode crée automatiquement des feuilles de style CSS internes (cf. CSS). La création de lien (texte et/ou image) se fait aussi directement dans la fenêtre de Propriétés après avoir sélectionné la portion de texte ou l'image (inutile d'utiliser les outils Communs liens hypertexte et ). Le sélecteur de balises, qui se trouve dans la barre d'état, en bas de la fenêtre de document, affiche la hiérarchie des balises entourant la sélection courante. C'est une zone souvent négligée, à tort, car elle permet de sélectionner de manière très précise, tous les éléments de la page HTML (tableau, ligne, colonne, image, lien, formulaire...) afin de les paramétrer dans la fenêtre de Propriétés. 31/133

32 A l'extrémité du sélecteur de balise se retrouve l'affichage de la taille en pixel dans la zone de Création ainsi que le poids total de la page (très pratique). Les groupes de panneaux sont des ensembles de panneaux associés regroupés sous un même titre. On y trouve donc les panneaux : - Création et gestion des CSS - Palette Calques - Palette Cadre - Comportement (pour ajouter des javascripts) - Palette Actifs (pour afficher les éléments utilisés dans le site) - Fragment de codes - Fichiers du site (permet de gérer vos fichiers et dossiers 3. Créer une nouvelle page (manipulation de base): Création de la page : Fichier > Nouveau. Dans l onglet Général de la boîte de dialogue Nouveau document, sélectionner Page de base dans la liste Catégorie, puis cliquer sur Créer. Dreamweaver indique par une petite étoile (*) les fichiers modifiés non sauvegardés. Le titre de la page : Dans la zone texte Titre du document, dans le haut du nouveau document, entrez le titre de la page. Il s agit du titre de la page (attention à ne pas confondre avec le nom de fichier). Ce titre apparaîtra dans la barre de titre de la fenêtre du navigateur lorsque la page s'affichera dans un navigateur Web. Cette information est l'une des premières à renseigner, dès que l'on édite une page HTML. Le titre de la page doit être différent d'une page à une autre dans un même site, en restant fidèle au contenu traité. Ne jamais laisser une page nommée 32/133

33 "Document sans nom", ne jamais appeler une page "Accueil" ou "index" ou encore "Bienvenue dans le site... " car c'est ce qui apparaîtra dans l'intitulé du site lorsqu'il sera référencé dans un moteur de recherche! Les Propriétés de la page : Bouton Propriétés de la page de la barre de Propriétés ou bien Menu >Modifier>Propriétés de la page (Ctrl+J) Cette boite de dialogue permet de spécifier des attributs par défaut : - couleur, police et taille du texte, - les couleurs d'arrière-plan ou/et image d'arrière-plan, - les marges gauche, droite, haut et bas (sauf cas particulier, elles seront être mises à zéro pixel afin d'optimiser la zone sûre (cf. notion de Webdesign) - les styles de liens (couleurs, taille, police, souligné ou non). A partir de la définition de ces paramètres, Dreamweaver crée une feuille de style CSS interne qu'il faut exporter en tant que fichier externe afin de l'attacher aux autres pages du site. Insertion de Texte : L insertion de texte se passe comme dans un traitement de texte classique : placer le curseur dans la fenêtre création et taper le texte. Les propriétés du texte se trouve dans la palette Propriété en bas du logiciel : 33/133

34 sélectionner le texte et déterminer le type de la police, la taille, la couleur, alignement, bold, italique, les listes. Pour insérer un paragraphe (saut de ligne) appuyer sur la touche «Entrée» (<p> </p>). Pour faire juste un retour à la ligne appuyer sur les touches «Maj» + «Entrée» (<br />). Pour insérer d autres éléments comme des caractères spéciaux (, $,,, ), le code pour créer une abréviation, un acronyme, une citation et des listes il faut aller sélectionner dans la barre d insertion le menu "Texte". Insertion d Images Placer le curseur à l endroit voulu (toujours dans la fenêtre création), sélectionner dans la barre d insertion le menu commun, cliquer sur le bouton puis aller chercher dans l arborescence l image. Création de Liens - Lien hypertexte : sélectionner le texte et aller dans la palette propriété. Dans le champ lien insérer un lien soit en l écrivant directement (pour un lien externe au site c'est-à-dire un lien vers une page d un autre site type soit en cliquant sur le bouton «dossier» pour accéder a l arborescence des fichiers (lien vers une page interne au site), soit en utilisant le pointeur en le faisant glisser vers une page dans l arborescence du site de la palette «fichier». - Lien image : sélectionner l image et faire de même. 4. Créer un nouveau site Dreamweaver Création d un site (ou gérer un site) : Avant tout travail de mise en page, il est nécessaire de définir le dossier racine local (le dossier de travail) afin que Dreamweaver vérifie les parcours (chemins) des liens, des images... Pour cela il faut au préalable préparer son dossier de travail : dans Windows créer un dossier «site» qui contiendra tous les dossiers du site (pages html, images ). Puis 34/133

35 dans celui-ci créer un dossier «images» (qui lui contiendra les images (.jpg,.gif...) du site. Dans Dreamweaver, il faut "définir le site" : c est à dire configurer le logiciel pour qu il retrouve les dossiers préalablement créés et faciliter le travail de création du site. Nous allons donc définir (pour chaque site) le dossier local, le dossier distant et enfin le dossier d'évaluation (pour le traitement des pages dynamiques Php, Asp). Il est impérativement définir le dossier local avant d'attaquer la production du site : les informations distantes et d'évaluation pourront être rajoutées ultérieurement. Dans le panneau fichier (à droite), sélectionner dans le premier menu déroulant le lien "gérer les sites". Une boite de dialogue s ouvre. Cliquer sur "nouveau...site". L'onglet "Elémentaire" permet d utiliser l'assistant de définition de site qui vous guide tout au long de la procédure. Utilisation de l onglet "Avancé" : Etape 1 : Configuration Infos locales : - Nom du site : Le nom du site s'affiche dans le panneau Fichiers. Utiliser le nom au choix ; il s'agit d'une simple référence qui n'apparaîtra pas dans le navigateur. - Dossier racine local : choisir le dossier racine local du site dans lequel seront stockés les fichiers. - Utilisez l'option Actualiser automatiquement la liste des fichiers locaux, pour indiquer si Dreamweaver doit automatiquement mettre à jour la liste des fichiers du site local chaque fois que vous copiez des fichiers dans votre site local. (Recommandé) 35/133

36 - Dossier des images par défaut (Facultatif), entrez le chemin du dossier des images par défaut pour votre site. Il s'agit du dossier dans lequel Dreamweaver stocke les images que vous ajoutez à votre site. Etape 2 : Configuration Infos distantes : - Sélection d'une méthode d'accès dans le menu déroulant. Le contenu de la boîte de dialogue varie selon votre sélection. Les options sont : Aucun si vous n'avez pas l'intention de charger votre site sur un serveur. Local/Réseau si vous accédez à un dossier de réseau ou si vous exécutez un serveur Web sur votre ordinateur local. FTP si vous vous connectez à votre serveur Web par FTP. - Choisir FTP et définir les paramètres suivants (fournis par l hébergeur) : 36/133

37 Hôte FTP : Indiquez le nom de l'hôte FTP vers lequel vous transférerez les fichiers pour votre site Web. Votre hôte FTP est le nom Internet complet du serveur distant de votre hébergeur. Répertoire de l hôte : Entrez le nom du répertoire hôte du site distant. S'il n est pas spécifié par l hébergeur laisser le vierge. Sur certains serveurs, votre répertoire hôte est celui dans lequel la connexion FTP est établie. Nom d utilisateur et Mot de passe : Indiquez le nom d'utilisateur (login ou identifiant) et le mot de passe que vous utiliserez pour vous connecter au serveur FTP. En option : o o o o o Cliquez sur Tester pour tester la connexion au serveur. Par défaut, Dreamweaver enregistre votre mot de passe. Désactivez la case à cocher Enregistrer si vous préférez que le logiciel vous le demande à chaque connexion au serveur distant. Activez la case à cocher Utiliser FTP passif si la configuration de votre pare-feu nécessite l'utilisation d'un FTP passif. Activez la case à cocher Utiliser un pare-feu si vous vous connectez au serveur distant en étant protégé par un pare-feu. Activez la case à cocher Télécharger autom. les fichiers vers le serveur lors de l'enregistrement si vous voulez que Dreamweaver charge votre fichier sur votre site distant lorsque vous l'enregistrez. 37/133

38 Le panneau fichier Dès la validation de la définition du site, tous les fichiers et dossiers du site sont affichés dans la fenêtre de fichiers (Afficher/Masquer avec F8). Elle permet la gestion des fichiers et dossiers. On peut y créer les éléments par le menu contextuel du clic-droit ainsi que toutes les modifications (copier, couper, coller, dupliquer, supprimer, renommer (Attention! ne jamais renommer alors qu'un fichier est ouvert!). D'autre part lorsqu'un fichier ou un dossier est déplacé (lorsqu'il n'est pas ouvert) 38/133

39 Dreamweaver est capable de redéfinir tous les chemins faisant référence à cet élément. Téléchargement à partir de Dreamweaver Pour mettre en ligne, c est à dire transférer les fichiers du site sur le serveur distant (hébergement), appuyer sur le bouton "développer" dans la palette Fichier. Ainsi la fenêtre se scinde en deux parties. Cliquer sur le bouton de "connecter" pour se connecter au site distant configuré auparavant dans les paramètres "infos distantes". A droite on voit les fichiers locaux et à gauche on accède aux fichiers distants (sur le serveur d'hébergement). C'est à cet emplacement que l'on transfère les fichiers locaux pour mettre le site en ligne. Il ne reste plus qu à glisser-déposer les dossiers ou fichiers locaux dans la fenêtre site distant. Attention, il faut toujours se mettre au même endroit : pour mettre les fichiers qui se trouvent dans le dossier pages, il faut également être dans le dossier pages du coté du site distant. Possibilité aussi d'utiliser les boutons Flèche bleu pour " Placer les fichiers " (Mettre en ligne) et Flèche Verte pour " Acquérir les fichiers " (Récupérer). Lorsque Dreamweaver place les fichiers sur le serveur, il vérifie et place les fichiers dépendants (comme les images, les éléments multimédia...), c'est pour cette raison qu'il est conseillé de ne pas " travailler " sur son ordinateur en même temps, car les ressources utilisées simultanément peuvent engendrer des erreurs de transfert. 5. Les Outils de Dreamweaver 39/133

40 Commun : 1-Hyperlien: permet d'insérer un lien à l'emplacement du curseur, l'intérêt majeur par rapport à la création de liens dans la fenêtre de Propriétés est de pouvoir spécifier un titre de lien automatiquement. 2-Lien de messagerie : permet d'insérer un lien vers une boîte à l'emplacement du curseur. 3-Ancre nommée : permet d'insérer une ancre nommée à l'emplacement du curseur. 4-Tableau : permet d'insérer un tableau à l'emplacement du curseur en spécifiant le nombre de lignes et de colonnes, la largeur du tableau en pixel ou en pourcent, la largeur de bordure, la marge intérieure des cellules, l'espacement entre les cellules... autant d'options qui peuvent être modifiées après la création dans la fenêtre de Propriétés (Ctrl+F3). C'est d'ailleurs dans cette dernière qu'on pourra spécifier l'alignement et la hauteur du tableau. D'autre part on trouve aussi de nombreuses options de modification de tableau en faisant un clic-droit (dans la zone Création) à l'intérieur d'un tableau dans le sous-menu " Tableau " (sélectionner le tableau, fractionner la cellule, insérer et supprimer des lignes, des colonnes...). De plus la touche tabulation permet de créer une nouvelle ligne dans le tableau lorsque le curseur se trouve dans une cellule. 5-Image : permet d'insérer une image à l'emplacement du curseur. Si l'image n'est pas à l'intérieur du dossier racine local, Dreamweaver propose de la copier dans l'arborescence du site afin de conserver un chemin cohérent. - Carte cliquable (<map>) : il est possible de définir directement des zones réactives afin de créer une carte image en utilisant les outils de la fenêtre des Propriétés. 40/133

41 - Espace réservé pour l'image : permet d'insérer une zone réservée pour une image à l'emplacement du curseur. Afin de définir une balise <img> sans source en attendant l'image définitive. - Image survolée : permet d'insérer une image avec un effet de " rollover " à l'emplacement du curseur. Il faut avoir créé préalablement l'image originale et l'image survolée pour spécifier les parcours. Possibilité de renseigner directement le texte secondaire et le lien. Les commandes Javascript sont automatiquement ajoutées dans l'en-tête et dans le corps de la page. - HTML Fireworks : permet d'insérer du code HTML généré exclusivement par le logiciel de traitement d'images de Macromedia. - Barre de navigation : permet d'insérer un ensemble d'images avec les différents états : haut, dessus, abaissé, au-dessus lorsque abaissé (image survolée après avoir été cliquée). Il faut avoir créé préalablement toutes les images pour spécifier les parcours. Même remarques que pour les images remarques que pour les images survolées. 6-Support Plugin : Permet d'insérer un fichier multimedia (.mid,.wav,.mp3,.aif...) à l'emplacement du curseur (cf. multimédia). - Support Flash : permet d'insérer une animation Flash (.swf) à l'emplacement du curseur. - Support Bouton Flash : permet de créer et d'insérer un Bouton Flash à l'emplacement du curseur. Mais il est fortement déconseillé de mélanger mise en page HTML et technologie flash. - Support Texte Flash : permet de créer et d'insérer un Texte Flash à l'emplacement du curseur. Mais il est fortement déconseillé de mélanger mise en page HTML et technologie flash. - Support Shockwave : permet d'insérer une animation Shockwave Director (.dcr) à l'emplacement du curseur. - Support Applet : permet d'insérer un applet JAVA à l'emplacement du curseur. - Support Paramètre : permet d'insérer une balise de paramétrage de fichier multimédia à l'emplacement du curseur (pour une utilisation très spécifique d'un fichier multimédia). 41/133

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

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

Les outils de création de sites web

Les outils de création de sites web Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site

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

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

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

Plus en détail

<Créer un site Web. avec/> 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

Publier dans la Base Documentaire

Publier dans la Base Documentaire Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008

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

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

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau) CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.

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

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

É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

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

Publier un Carnet Blanc

Publier un Carnet Blanc Site Web de l association des ingénieurs INSA de Lyon Publier un Carnet Blanc Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008 Publication,

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations

Plus en détail

Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv>

Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv> Langage HTML (2 partie) «Je n'ai fait que prendre le principe d - hypertexte et le relier au principe du TCP et du DNS et alors boum! ce fut le World Wide Web!» Tim Berners-Lee

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

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

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

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

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

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

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

Programmation Internet Cours 4

Programmation Internet Cours 4 Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web

Plus en détail

Parcours guidé : créer des pages simples au format html avec Nvu 28/1/10

Parcours guidé : créer des pages simples au format html avec Nvu 28/1/10 Table des matières 1. AVANT-PROPOS... 4 1.1. PRESENTATION DE NVU... 4 1.2. CARACTERISTIQUES PRINCIPALES DE NVU... 4 1.3. OBJECTIF DE CE DOCUMENT... 4 1.4. PRE-REQUIS NECESSAIRES... 4 1.5. MODE D'EMPLOI

Plus en détail

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web Réseau informatique TIC TC - IUT Montpellier Internet et le Web Ensemble d'ordinateurs reliés entre eux et échangeant des informations sous forme de données numériques But : Rendre disponible l information

Plus en détail

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des

Plus en détail

3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML

3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Page:1/20 CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Objectifs de l activité pratique : Notions sur le HTML, le WEB et le W3C Créer une page web statique au format HTML : - les marqueurs ou balises

Plus en détail

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations

Plus en détail

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com Guide de l utilisateur CMS 1 Navigation dans le CMS... 2 1.1 Menu principal... 2 1.2 Modules tableau... 3 1.3 Modules formulaire... 5 1.4 Navigation dans le site Web en mode édition... 6 2 Utilisation

Plus en détail

Publication dans le Back Office

Publication dans le Back Office Site Web de l association des ingénieurs INSA de Lyon Publication dans le Back Office Note : dans ce guide, l'appellation GI signifie Groupe d'intérêt, et GR Groupe Régional laure Buisset Page 1 17/09/2008

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

Présentation du Framework BootstrapTwitter

Présentation du Framework BootstrapTwitter COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...

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

FORMATION PcVue. Mise en œuvre de WEBVUE. Journées de formation au logiciel de supervision PcVue 8.1. Lieu : Lycée Pablo Neruda Saint Martin d hères

FORMATION PcVue. Mise en œuvre de WEBVUE. Journées de formation au logiciel de supervision PcVue 8.1. Lieu : Lycée Pablo Neruda Saint Martin d hères FORMATION PcVue Mise en œuvre de WEBVUE Journées de formation au logiciel de supervision PcVue 8.1 Lieu : Lycée Pablo Neruda Saint Martin d hères Centre ressource Génie Electrique Intervenant : Enseignant

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

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

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

l'ordinateur les bases

l'ordinateur les bases l'ordinateur les bases Démarrage de l'ordinateur - Le bureau, mon espace de travail - J'utilise la souris - Ouvertes ou fermées, les fenêtres - Dans l'ordinateur, tout est fichier - Le clavier : écrire,

Plus en détail

Comment créer vos propres pages web?

Comment créer vos propres pages web? Comment créer vos propres pages web? Vous voulez vous aussi devenir acteur et présenter vos passions et vos envies aux yeux du monde. Présentez-les sur le WEB. Pour cela, il vous suffit de créer vos "pages

Plus en détail

GUIDE D UTILISATION DU BACKOFFICE

GUIDE D UTILISATION DU BACKOFFICE GUIDE D UTILISATION DU BACKOFFICE 1. Modifier les pages du site : - Aller dans l onglet «PAGE HTML», puis «Liste des pages HTML» - Pour visualiser votre page, cliquer sur le nom écrit en vert, dans la

Plus en détail

Guide de réalisation d une campagne e-mail marketing

Guide de réalisation d une campagne e-mail marketing Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La

Plus en détail

Malgré son aspect spartiate, Freeplane offre de nombreuses fonctionnalités en particulier dans le domaine de la diffusion des cartes sur le Web.

Malgré son aspect spartiate, Freeplane offre de nombreuses fonctionnalités en particulier dans le domaine de la diffusion des cartes sur le Web. Création d une carte heuristique avec Freeplane Version : 1.1.3 Barre de menus Barre d outils Barre des touches de fonctions Espace de travail Barre d icônes Éditeur de notes Freeplane est un logiciel

Plus en détail

LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation

LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation ING 01 LANGAGUE JAVA Durée : 21 heures 1090 HT / jour Dates : à définir en 2012 Concevoir et développer des programmes en langage Java Comprendre le fonctionnement de la machine virtuelle S approprier

Plus en détail

CMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration

CMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration CMS Made Simple Version 1.4 Jamaica Système de gestion de contenu CMS Made Simple est entièrement gratuit sous licence GPL. Tutoriel utilisateur Récapitulatif Administration Le système de gestion de contenu

Plus en détail

Le service de création de site Internet : Mode d emploi. La Création de Site Internet

Le service de création de site Internet : Mode d emploi. La Création de Site Internet Le service de création de site Internet : Mode d emploi Sommaire 1) Comment se connecter à votre interface client? 2) Comment démarrer la création de votre site Internet? 3) Comment gérer les pages de

Plus en détail

Parcours FOAD Formation EXCEL 2010

Parcours FOAD Formation EXCEL 2010 Parcours FOAD Formation EXCEL 2010 PLATE-FORME E-LEARNING DELTA ANNEE SCOLAIRE 2013/2014 Pôle national de compétences FOAD Formation Ouverte et A Distance https://foad.orion.education.fr Livret de formation

Plus en détail

Optimiser les e-mails marketing Les points essentiels

Optimiser les e-mails marketing Les points essentiels Optimiser les e-mails marketing Les points essentiels Sommaire Une des clés de succès d un email marketing est la façon dont il est créé puis intégré en HTML, de telle sorte qu il puisse être routé correctement

Plus en détail

Découvrir OpenOffice Comment optimiser et formater votre ebook avec OpenOffice

Découvrir OpenOffice Comment optimiser et formater votre ebook avec OpenOffice Comment optimiser et formater votre ebook avec OpenOffice Le blog : http://www.vendre-sur-kindle.com 1 Découvrir OpenOffice : comment optimiser et formater votre ebook avec OpenOffice 2013 Le blog : http://www.vendre-sur-kindle.com

Plus en détail

Prise en main du logiciel. Smart BOARD Notebook 10

Prise en main du logiciel. Smart BOARD Notebook 10 Prise en main du logiciel Smart BOARD Notebook 10 1. Introduction : Le logiciel Smart BOARD est utilisable avec les tableaux blancs interactifs de la gamme SMART. Toutefois, il n'est pas nécessaire d'avoir

Plus en détail

PLAN. Qui peut faire quoi? Présentation. L'internaute Consulte le site public

PLAN. Qui peut faire quoi? Présentation. L'internaute Consulte le site public SPIP est une interface en ligne gratuite permettant de créer des sites collaboratifs de façon suffisament simple pour que les élèves puissent publier leur propres articles. Il permet aussi d'héberger son

Plus en détail

GUIDE DE DÉMARRAGE RAPIDE

GUIDE DE DÉMARRAGE RAPIDE GUIDE DE DÉMARRAGE RAPIDE Bienvenue dans SugarSync. Ce guide explique comment installer SugarSync sur votre ordinateur principal, configurer vos dossiers à synchroniser dans le cloud SugarSync. et utiliser

Plus en détail

Tutoriel : Feuille de style externe

Tutoriel : Feuille de style externe Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?

Plus en détail

Dévéloppement de Sites Web

Dévéloppement de Sites Web 1 Dévéloppement de Sites Web Cours III : Travailler avec Dreamweaver de Macromedia Peter Stockinger Séminaire de Maîtrise en Communication Interculturelle à l'institut National des Langues et Civilisations

Plus en détail

MODULES 3D TAG CLOUD. Par GENIUS AOM

MODULES 3D TAG CLOUD. Par GENIUS AOM MODULES 3D TAG CLOUD Par GENIUS AOM 1 Sommaire I. INTRODUCTIONS :... 3 II. INSTALLATION MANUELLE D UN MODULE PRESTASHOP... 3 III. CONFIGURATION DU MODULE... 7 3.1. Préférences... 7 3.2. Options... 8 3.3.

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

MODE D'EMPLOI DU CONTRIBUTEUR WEB UAPV "CONTRIBUER DANS UNE RUBRIQUE DU SITE WEB"

MODE D'EMPLOI DU CONTRIBUTEUR WEB UAPV CONTRIBUER DANS UNE RUBRIQUE DU SITE WEB MODE D'EMPLOI DU CONTRIBUTEUR WEB UAPV "CONTRIBUER DANS UNE RUBRIQUE DU SITE WEB" Quelques conseils pour bien contribuer 1 Paramétrer votre navigateur web 2 Accéder au module de gestion des pages web 2

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

Création de maquette web

Création de maquette web Création de maquette web avec Fireworks Il faut travailler en 72dpi et en pixels, en RVB Fireworks étant un logiciel dédié à la création de maquettes pour le web il ne propose que les pixels pour le texte

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

Comment formater votre ebook avec Open Office

Comment formater votre ebook avec Open Office Comment formater votre ebook avec Open Office 1 2012 Nicolas Boussion Tous droits réservés. Important : ce livre numérique, comme toute œuvre de l'esprit, fait l'objet de droits d'auteur. Son contenu a

Plus en détail

Normes techniques 2011

Normes techniques 2011 Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique

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

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

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

INTRODUCTION AU CMS MODX

INTRODUCTION AU CMS MODX INTRODUCTION AU CMS MODX Introduction 1. Créer 2. Organiser 3. Personnaliser UNE PETITE INTRODUCTION QUEST-CE QU UN CMS? CMS est l acronyme de Content Management System. C est outil qui vous permet de

Plus en détail

PHPWEBSITE -Tutoriel image

PHPWEBSITE -Tutoriel image PHPWEBSITE -Tutoriel image La capture des images depuis le web pour mon site. L optimisation d images pour le web, 1 Préparer des images pour le Web A. Généralités 1. Les trois formats d'images sur le

Plus en détail

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz mqwertyuiopasdfghjklzxcvbnmqwert

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz mqwertyuiopasdfghjklzxcvbnmqwert qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz INITIATION à Word 2007 xcvbnmqwertyuiopasdfghjklzxcvbn Cours informatiques Année 2009/2010 mqwertyuiopasdfghjklzxcvbnmqwert

Plus en détail

WORDPRESS : réaliser un site web

WORDPRESS : réaliser un site web WORDPRESS : réaliser un site web Wordpress est un système de gestion de contenu (ou CMS) libre. Il permet de créer des sites relativement complexes (blog, forum, site vitrine, site dynamique), sans qu

Plus en détail

Tutoriel TYPO3 pour les rédacteurs

Tutoriel TYPO3 pour les rédacteurs Tutoriel TYPO3 pour les rédacteurs - typo3_tut_fr Tutoriel TYPO3 pour les rédacteurs Tutoriel TYPO3 pour les rédacteurs Clé de l'extension: typo3_tut_fr Langue: fr Mots-clés: foreditors, forbeginners,

Plus en détail

Cours Excel : les bases (bases, texte)

Cours Excel : les bases (bases, texte) Cours Excel : les bases (bases, texte) La leçon 1 est une leçon de base qui vous permettra de débuter avec Excel, elle sera fort utile pour les prochaines leçons. Remarque : à chaque fois qu il est demandé

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

GUIDE DE DEMARRAGE RAPIDE:

GUIDE DE DEMARRAGE RAPIDE: GUIDE DE DEMARRAGE RAPIDE: COMMENT CREER VOTRE BOUTIQUE EN LIGNE Vous voulez créer votre propre boutique en ligne? C est désormais plus simple que jamais. Suivez simplement les instructions de ce guide

Plus en détail

Editeur html Guide de l'utilisateur

Editeur html Guide de l'utilisateur Ti nymce Editeur html Guide de l'utilisateur Date : février 2012 Version 2.0 Doc ref. tinymce-userguide-2.0 1 Aperçu général Cette documentation est composée de deux documents : Une représentation graphique

Plus en détail

Manuel du composant CKForms Version 1.3.2

Manuel du composant CKForms Version 1.3.2 Manuel du composant CKForms Version 1.3.2 Ce manuel vous présente les principales fonctionnalités du composant CKForms y compris le module et le plug-in CKForms 1.3 est la nouvelle version du composant

Plus en détail

MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA

MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA OBJECTIFS : manipuler les fenêtres et l environnement Windows, gérer ses fichiers et dossiers, lancer les applications bureautiques présentes sur son poste. PUBLIC

Plus en détail

Automatisation d'une Facture 4. Liste Déroulante Remises Case à cocher Calculs

Automatisation d'une Facture 4. Liste Déroulante Remises Case à cocher Calculs Dans la série Les tutoriels libres présentés par le site FRAMASOFT Automatisation d'une Facture 4 Liste Déroulante Remises Case à cocher Calculs Logiciel: Version: Licence: Site: OpenOffice.org Calc :

Plus en détail

Traitement de texte : Quelques rappels de quelques notions de base

Traitement de texte : Quelques rappels de quelques notions de base Traitement de texte : Quelques rappels de quelques notions de base 1 Quelques rappels sur le fonctionnement du clavier Voici quelques rappels, ou quelques appels (selon un de mes profs, quelque chose qui

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

Chapitre 3 : outil «Documents»

Chapitre 3 : outil «Documents» Chapitre 3 : outil «Documents» L outil «Documents» fonctionne comme le gestionnaire de fichiers de votre ordinateur. Vous pouvez y transférer des documents de tous types (html, Word, Powerpoint, Excel,

Plus en détail

Création d'un site dynamique en PHP avec Dreamweaver et MySQL

Création d'un site dynamique en PHP avec Dreamweaver et MySQL Création d'un site dynamique en PHP avec Dreamweaver et MySQL 1. Création et configuration du site 1.1. Configuration de Dreamweaver Avant de commencer, il est nécessaire de connaître l'emplacement du

Plus en détail

Guide d usage pour Word 2007

Guide d usage pour Word 2007 Formation TIC Septembre 2012 florian.jacques@etsup.com Guide d usage pour Word 2007 ETSUP 8 villa du Parc Montsouris 75014 PARIS SOMMAIRE Interface... 2 Organiser son espace de travail... 3 La barre d

Plus en détail

Le générateur d'activités

Le générateur d'activités Le générateur d'activités Tutoriel Mise à jour le 09/06/2015 Sommaire A. Mise en route du Générateur d'activité... 2 1. Installation de Page... 2 2. Création des bases du générateur d'activités... 3 3.

Plus en détail

HTML. Notions générales

HTML. Notions générales 1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS

Plus en détail

Soyez accessible. Manuel d utilisation du CMS

Soyez accessible. Manuel d utilisation du CMS Soyez accessible. Manuel d utilisation du CMS Nameo : mode d emploi Nameo est une agence web basée en Alsace, à Strasbourg. Son champ d action : création ou refonte de sites internet, stratégie et mise

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

Initiation à html et à la création d'un site web

Initiation à html et à la création d'un site web Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le

Plus en détail

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

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

< Atelier 1 /> Démarrer une application web

< Atelier 1 /> Démarrer une application web MES ANNOTATIONS SONT EN ROUGE : Axel < Atelier 1 /> Démarrer une application web Microsoft France Tutorial Découverte de ASP.NET 2.0 Sommaire 1 INTRODUCTION... 3 1.1 CONTEXTE FONCTIONNEL... 3 1.2 CONTEXTE

Plus en détail

Afin d accéder à votre messagerie personnelle, vous devez vous identifier par votre adresse mail et votre mot de passe :

Afin d accéder à votre messagerie personnelle, vous devez vous identifier par votre adresse mail et votre mot de passe : 1 CONNEXION A LA MESSAGERIE ZIMBRA PAR LE WEBMAIL Ecran de connexion à la messagerie Rendez vous dans un premier temps sur la page correspondant à votre espace webmail : http://webmailn.%votrenomdedomaine%

Plus en détail

Créer des documents interactifs

Créer des documents interactifs Créer des documents interactifs 14 Au cours de cette leçon, vous apprendrez à : créer un document en ligne de base ; ajouter des boutons, des transitions de page et des hyperliens ; exporter au format

Plus en détail

I Pourquoi une messagerie?

I Pourquoi une messagerie? I Pourquoi une messagerie? Outlook express est un logiciel de messagerie de windows. Il est installé par défaut sur un grand nombre d ordinateurs de la planète, ceux tournant sous Windows, et proposé par

Plus en détail

Créer votre propre modèle

Créer votre propre modèle Créer votre propre modèle Vous recherchez un modèle personnalisé pour vos présentations Microsoft PowerPoint qui comprend le nom de votre organisation et un arrière-plan unique avec les couleurs et les

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

KIELA CONSULTING. Microsoft Office Open Office Windows - Internet. Formation sur mesure

KIELA CONSULTING. Microsoft Office Open Office Windows - Internet. Formation sur mesure KIELA CONSULTING Microsoft Office Open Office Windows - Internet Formation sur mesure Bureautique L outil informatique et la bureautique sont devenus quasiment incontournables quelque soit votre métier

Plus en détail

mon site web via WordPress

mon site web via WordPress mon site web via WordPress Vocabulaire CMS : Content Management System WordPress fait partie de cette famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d applications

Plus en détail