Support de cours Edition Internet
|
|
- Stéphanie Auger
- il y a 8 ans
- Total affichages :
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 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étailFormation > 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étailLes 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étailNotes 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étailGuide 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
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étailPublier 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étailBernard 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étailSOMMAIRE 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étailINTERNET 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étailGUIDE 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étailCREER 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
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étailLicence 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étailPublier 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étailLES 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étailLangage 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étailTable 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étailSilfid : 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étailAvant-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étailUtilisation 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étailOptimiser 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étailOSIRIS/ 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étailKompoZer. 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étailProgrammation 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étailParcours 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étailTIC. 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étailCRÉ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étail3. 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étailFormation 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étail145A, 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étailPublication 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étailMAILING 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étailPré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étailLe 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étailFORMATION 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étailPrise 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étailTapez 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étailFreeway 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étaill'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étailComment 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étailGUIDE 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étailGuide 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étailMalgré 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étailLANGAGUE 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étailCMS 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étailLe 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étailParcours 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étailOptimiser 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étailDé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étailPrise 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étailPLAN. 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étailGUIDE 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étailTutoriel : 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étailDé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étailMODULES 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étailChapitre 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étailMODE 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étailFrontPage 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étailCré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étailManuel 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étailComment 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étailNormes 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étailSupport 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étailINSERER 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étailUtilisation 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étailINTRODUCTION 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étailPHPWEBSITE -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étailqwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz mqwertyuiopasdfghjklzxcvbnmqwert
qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz INITIATION à Word 2007 xcvbnmqwertyuiopasdfghjklzxcvbn Cours informatiques Année 2009/2010 mqwertyuiopasdfghjklzxcvbnmqwert
Plus en détailWORDPRESS : 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étailTutoriel 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étailCours 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étailREALISER 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étailGUIDE 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étailEditeur 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étailManuel 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étailMAÎ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étailAutomatisation 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étailTraitement 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étailNote 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étailChapitre 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étailCré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étailGuide 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étailLe 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étailHTML. 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étailSoyez 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étailSaisissez 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étailInitiation à 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étailHMTL. 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étailComment 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étailRendre 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
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étailAfin 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étailCré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étailI 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étailCré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étailCré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étailKIELA 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étailmon 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