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. 2. 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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> 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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> 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="http://www.aries3d.com" 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 Avec Objet du message : <a du site 12/133

13 ">contact </a> envoyé à 2 personnes dont une en copie : <a 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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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

Création de page web avec Dreamweaver 2.0

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

Plus en détail

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

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

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

Plus en détail

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

Fiche n 4 Utilisation de Kompozer Table des matières

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

Plus en détail

Introduction à Dreamweaver CS4

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

Plus en détail

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

Initiation à Dreamweaver

Initiation à Dreamweaver Benjamin Godefroy Redouane Zarghoune Initiation à Dreamweaver SI28 Ecriture interactive et multimédia Automne 2004 Organisation du TD Préambule : Introduction au HTML Présentation de Dreamweaver Exercices

Plus en détail

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

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

Plus en détail

TP Initiation au langage HTML

TP Initiation au langage HTML TP Initiation au langage HTML (1) Rappels de quelques généralités Un fichier HTML n'est pas compilé (ce n'est pas un programme) Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant

Plus en détail

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS

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

Plus en détail

Créer des pages web avec Front Page 2000

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

Plus en détail

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

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

Plus en détail

Version 4.0. Multinet Ressources Inc. Page 1 sur 13

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

Plus en détail

Direction Informatique 02/11/2010

Direction Informatique 02/11/2010 Microsoft Word 2007 Direction Informatique 02/11/2010 Contexte de la formation: - Interface Ms Word 2007 - L utilisation des fonctions de Ms Word 2007 Objective: -Maîtriser le Ms Word 2007 Page 2/36 Introduction

Plus en détail

Publier des données sur le Web

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

Plus en détail

Création de pages web

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

Plus en détail

Microsoft Word barres d outils. Par : Patrick Kenny

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

Plus en détail

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

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

Création du site dans Dreamweaver :

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

Plus en détail

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

Plus en détail

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86 Plan du travail Chapitre 1: Internet et le Web Chapitre 2: Principes d Internet Chapitre 3 : Principaux services d Internet Chapitre 4 : Introduction au langage HTML 2014/2015 Cours TIC - 1ère année MI

Plus en détail

Publier une Actualité ou un Evenement

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

Plus en détail

Introduction à Dreamweaver

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

Plus en détail

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

Plus en détail

Créer un site internet (ou des pages)

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

Plus en détail

//////////////////////////////////////////////////////////////////// Développement Web

//////////////////////////////////////////////////////////////////// Développement Web ////////////////////// Développement Web / INTRODUCTION Développement Web Le développement, également appelé programmation, désigne l'action de composer des programmes sous forme d'algorithme (codage).

Plus en détail

TD n 3 Microsoft Office Word 2007

TD n 3 Microsoft Office Word 2007 1 TD n 3 Microsoft Office Word 2007 1. Présentation Microsoft Word est un logiciel de traitement de texte puissant qui fait partie du pack Office, il permet de créer simplement des documents (des lettres,

Plus en détail

Vade-mecum des «raccourcis typographique» dans SPIP

Vade-mecum des «raccourcis typographique» dans SPIP Vade-mecum des «raccourcis typographique» dans SPIP Fonctionnalités Méthodes Commentaires Intertitre {{{le titre}}} Le texte entre triples accolades est affiché comme un titre. Changement de Cliquer deux

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

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

Introduction à la programmation web

Introduction à la programmation web Introduction à la programmation web Nouvelles Technologies Dr. Thé Van LUONG The-Van.Luong@heig-vd.ch HEIG-VD Switzerland 8 octobre 2015 1/34 8 octobre 2015 1 / 34 Plan 1 État de l art des langages orientés

Plus en détail

Webmaster / Concepteur Multimedia

Webmaster / Concepteur Multimedia Durée : 217 heures Objectifs : Webmaster / Concepteur Multimedia Participants : Toute personne attirée par la création de site internet professionnel. Méthodes : Mise en pratique sur micro-ordinateur.

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

INITIATION AU SYSTEME D EXPLOITATION WINDOWS 2000

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

Plus en détail

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

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

Plus en détail

Le Site Uranoscope. manuel du rédacteur. (sur moteur Dotclear) Février 2008 version 1.0

Le Site Uranoscope. manuel du rédacteur. (sur moteur Dotclear) Février 2008 version 1.0 Le Site Uranoscope (sur moteur Dotclear) manuel du rédacteur Février 2008 version 1.0 Consulter le blog Pour consulter le blog, lire les billets publiés, il faut aller sur internet à l adresse suivante

Plus en détail

Aide à l utilisation du logiciel IziSpot.Mobi

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

Plus en détail

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

Plus en détail

MANUEL D UTILISATION DE VOTRE SITE INTERNET

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

Plus en détail

Introduction à HTML. A. HTML et le web

Introduction à HTML. A. HTML et le web Introduction à HTML Isabelle Debled Renesson Marie-Dominique Devignes LORIA 1 2 1 Fonctionnement en mode client/serveur 1. Construction d une requête ex web : http://www.loria.fr/news CLIENT 5. Mise en

Plus en détail

-Le traitement de texte. -Le courrier électronique

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

Plus en détail

Nvu - KompoZer. Table des matières. Tuto rapido

Nvu - KompoZer. Table des matières. Tuto rapido Nvu - KompoZer Table des matières 1. Démarrage rapide...2 1.1. Créer une nouvelle page...2 1.2. Ouvrir une page existante...2 1.3. Enregistrer une page...2 2. Utiliser KompoZer...3 2.1. L'interface...3

Plus en détail

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

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

Plus en détail

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine Gérer un site avec Kompozer Organisation, plan de travail Création de pages Tout les fichiers, dossiers, images auront des noms (ex. nouveautes.htm ; ces noms ne devront comporter ni espaces, ni caractères

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

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

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

Plus en détail

Naviguer sur le web avec Firefox 0.93

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

Plus en détail

Initiation WORD. Module 2 : Les fonctions de base

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

Plus en détail

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

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

Plus en détail

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C Introduction L'Internet aujourd'hui 7 Le World Wide Web Consortium et les standards 7 Les logiciels de conception de sites web 7 L'objectif du livre 8 Interface de conception L'environnement système 9

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

Manuel du rédacteur. Dernière mise à jour : le 14/04/2010

Manuel du rédacteur. Dernière mise à jour : le 14/04/2010 Manuel du rédacteur Dernière mise à jour : le 14/04/2010 Table des matières 1 PRÉSENTATION GÉNÉRALE... 3 2 L INTERFACE DE GESTION... 3 2.1 ACCÈS À L INTERFACE DE GESTION... 3 2.2 PRÉSENTATION GÉNÉRALE...

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

Parcours FOAD Formation POWERPOINT 2010

Parcours FOAD Formation POWERPOINT 2010 Parcours FOAD Formation POWERPOINT 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

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

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

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

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

EDITEUR DE PAGE HTML NETSCAPE COMPOSER

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

Plus en détail

Guide de l administrateur de rubriques du site communal d ORCHAISE

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

Plus en détail

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

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

Plus en détail

Formation au logiciel Typo3, pour les rédacteurs.

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

Plus en détail

Visite guidée de Composer

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

Plus en détail

Conception de pages HTML sous FrontPage Express

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

Plus en détail

> Table des matières. Gestion des pages courantes

> Table des matières. Gestion des pages courantes I N T E R F A C E A D M I N I S T R A T I O N M A N U E L D ' U T I L I S A T I O N D E T Y P O 3 V 4. 2 R É D A C T E U R V. DARDENNE DÉCEMBRE 2009 > Table des matières Gestion des pages courantes > Accès

Plus en détail

Tobii Communicator 4. Guide de démarrage

Tobii Communicator 4. Guide de démarrage Tobii Communicator 4 Guide de démarrage BIENVENUE DANS TOBII COMMUNICATOR 4 Tobii Communicator 4 permet aux personnes souffrant de handicaps physiques ou de communication d'utiliser un ordinateur ou un

Plus en détail

Maison domotique Présentation générale de la maison domotique

Maison domotique Présentation générale de la maison domotique Maison domotique Présentation générale de la maison domotique Les caractéristiques techniques : Maison générale : Les différentes pièces : Le salon La cuisine La chambre La salle de bain Le tableau éléctrique

Plus en détail

Comment accéder à d Internet Explorer

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

Plus en détail

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

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

Plus en détail

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

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

Plus en détail

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

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

Plus en détail

>> Ajouter une page web Ordre Lien urlpage titre description Actif Lien au menu niveau cliquable type Consulter Enregistrer

>> Ajouter une page web Ordre Lien urlpage titre description Actif Lien au menu niveau cliquable type Consulter Enregistrer 1 C R É AT I O N D E S PAG E S D É S I R É E S > Pour ajouter des pages au site, cliquer sur >> Ajouter une page web > Des champs blancs à remplir apparaissent. L Ordre est le rang qu occupera cette page

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

Le tableur de la suite Open Office

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

Plus en détail

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

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

Plus en détail

Découvrir l environnement de Microsoft Office WORD 2010

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

Plus en détail

Petite histoire d Internet

Petite histoire d Internet À la base, Internet est défini par des ordinateurs qui sont reliés entre eux grâce à des câbles, du WiFi ou encore des satellites, créant ainsi un réseau à échelle mondiale. Les ordinateurs communiquent

Plus en détail

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design A.F.L.I.M. Ateliers de Formations Linguistique Informatique Multimédia Formation HTML5 et CSS3 - Pour des sites Responsive Web Design Formation : Présentation du HTML5 Bref historique du HTML5 Lignes de

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

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

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

Plus en détail

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

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

Plus en détail

MS PowerPoint (2000) Sommaire

MS PowerPoint (2000) Sommaire MS PowerPoint (2000) Sommaire Introduction... 2 Lancer PowerPoint... 2 L espace de travail... 3 1. Créer une présentation Créer une présentation vierge... 4 Ajouter une nouvelle diapositive... 5 Dupliquer

Plus en détail

CRÉATION DE SITE INTERNET TD 1

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

Plus en détail

Procédurier des principales fonctions

Procédurier des principales fonctions SYSTÈME DE PUBLICATION POUR L INTERNET PARTAGÉ SQUELETTE SARKA Procédurier des principales fonctions 2012-2013 avec éditeur de texte TinyMCE DOCUMENT DE TRAVAIL Le site de référence pour les formations

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

Windows XP. Microsoft. Sommaire :

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

Plus en détail

Sites web propriétaires

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

Plus en détail

Gérer des sites avec Dreamweaver

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

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 1 Installation de jquery Mobile

Plus en détail

> Table des matières. Gestion des pages courantes... 4

> Table des matières. Gestion des pages courantes... 4 I N T E R FA C E A D M I N I S T R AT I O N M A N U E L D ' U T I L I S A T I O N D E T Y P O 3 V 4. 2. 1 0 W W W. R O U S S E T - F R. C O M STRATIS JUIN 2010 > Table des matières Gestion des pages courantes.............................................

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

Remise à niveau Windows, Word, Excel, PowerPoint, Outlook

Remise à niveau Windows, Word, Excel, PowerPoint, Outlook Durée 7 jours (49 heures) Objectifs S approprier la nouvelle interface et les nouvelles fonctionnalités. Maîtriser les fonctions de base d Excel afin de créer, d'exploiter des tableaux simples et manipuler

Plus en détail

Documentation de CMS-gen

Documentation de CMS-gen Table des matières GÉNÉRALITÉ... 1 LA ZONE D'ADMINISTRATION... 2 LOGIN SUR LA ZONE D ADMINISTRATION... 2 EDITION DU CONTENU EN LIGNE... 3 LE MODE EDITION... 3 PUBLICATION... 3 SUPPRIMER DES MODIFICATIONS...

Plus en détail

Référence : Emplacement des commandes Excel 2003 dans Excel 2007

Référence : Emplacement des commandes Excel 2003 dans Excel 2007 Référence : Emplacement des commandes Excel 2003 dans Excel 2007 Astuces d'utilisation de ce classeur 1. L'ordre des feuilles correspond à celui de l'interface utilisateur par défaut. Si vous le souhaitez,

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

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

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers Introduction Ma première page Web (2/2) Ce document est l'étape 2 d'un didacticiel qui a pour but de donner un aperçu de la création d'une page Web. Une ou deux pages seront créées et présenteront leur

Plus en détail