Les sites web avec NVU

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

Download "Les sites web avec NVU"

Transcription

1 Les sites web avec NVU Table Des Matières Les sites web avec NVU Les bases du web Les protocoles réseaux Le Web Uniform Resource Locator Recherche d'informations Création et gestion d un site Web Utiliser le Web Cycle de Vie d'un logiciel Structure d'un site web Comment créer un site web Organiser l'arborescence du site TP 1 : structure du site Structure d'une page web!doctype en-tête : <head> corps : <body> Organiser la description des pages TP 2 : Installation et configuration de Nvu Téléchargement Configuration Edition / Préférences Paramètres des sites de publication Sites de publication Utilisation Edition d'une page web TP 3 : Premières pages web Edition d'un fichier html Création d'un fichier Code source TP 4 : les planètes Le langage HTML Balises Attributs Mise en forme d'une page Intégrée dans le corps TP5 : mise en forme classique Feuilles de style CSS Feuille de style incorporée Général Texte Fond Bordure Boite Son TP6 Mise en forme CSS

2 Compléments Feuille de style exportée Feuille de style liée TP Créer une feuille de style pour l'impression TP créer une barre de navigation entre les 3 pages ou plus Modèles TP 7 Calques TP 8 Orthographe TP 9 Javascript TP 10 Formulaires Définir un formulaire Les champs Image Zone de texte Liste de sélection Bouton Etiquettes Index de recherche TP 11 Références Déroulement sur 3 jours : Introduction Installation et configuration Utilisation Mise en forme d'une page avec et sans feuilles de style CSS Modèles Formulaires Calques Les bases du web Le web est basé sur l'échange de fichiers html à travers le réseau. Les fichiers html (hypertexte markup language sont des fichiers textes écrits en html qui peuvent être envoyés depuis une machine serveur vers un ordinateu client et interprétés localement par des navigateurs. Pour cela, il faut mettre en oeuvre différents services d l'internet : le transfert de fichier, l'interprétation du code html. Les protocoles réseaux ftp http mailto Fonctionnement du web client-serveur Page web, site web et w3c Langage html Les protocoles réseaux

3 Les services de l'internet sont basés sur des protocoles. Un protocole est un ensemble de règles qui régissent le échanges entre des ordinateurs dans le monde des télécommunications et des réseaux. Internet est un résea mondial d'interconnexion d'ordinateurs basé sur la pile de protocoles TCP/IP. TCP (Transmission Control Protocol) : régit l'échange physique des paquets d'octets HTTP (HyperText Transmission Protocol) : le protocole du World Wide Web : FTP (File Transfert Protocole) : le protocole de transfert de fichiers SMTP (Simple Mail Transfert Protocol) : courrier électronique POP (Post-Office Protocol) : courrier électronique IMAP (Internet Message Access Protocol ) : courrier électronique NNTP (Network News Transport Protocol) : le protocole des News ou groupes de discussion. TELNET Pour l'usage du web des pseudos-protocoles ont été ajoutés : JAVASCRIPT MAILTO FILE IP (Internet Protocole) Pour permettre les communications entre les machines, TCP/IP utilise un numéro d'identification des machines c'est le "numéro IP" de la forme x.x.x.x où x est compris entre 0 et 255. Ce numéro doit être unique sur le réseau il est attribué de façon statique (cas des réseaux locaux) ou dynamique (cas des fournisseurs d'accès DHC Dynamic Host Configuration Protocol). La correspondance entre les numéros et les noms des machines es obtenue grâce au "service de noms" DNS. Pour pouvoir accéder à l'internet, un ordinateur a besoin : d'une connexion physique (réseau local ou modem) d'un numéro IP du numéro IP d'un serveur de noms que la machine doit pouvoir atteindre physiquement du numéro IP d'un routeur que la machine doit aussi pouvoir atteindre physiquement. Le routeur ou gateway est une machine qui établit les chemins (les routes) entre les numéros des machines (en fait entre les numéros des réseaux) Le Web Le Web (la toile, www) s'est développé très rapidement car son mode de fonctionnement est très souple et don très robuste. C est un des services de l Internet le plus connu. Le Web permet d'échanger des informations au moyen de http, protocole qui fonctionne en mode client/serveur. Le mode client/serveur est un mode de fonctionnement dissymétrique dans lequel deux logiciels différents son nécessaires pour permettre les communications : un logiciel serveur (appelé daemon) nécessaire sur une seul machine et un logiciel client, nécessaire sur toutes les machines. Client Réseau Serveur

4 Navigateur httpd Daemon La souplesse de http ne provient pas spécifiquement de ce mécanisme qui est assez répandu dans le mond TCP/IP (ftp fonctionne aussi en mode client/serveur). Elle provient de la mise en œuvre du mécanisme : la machin serveur transfère uniquement le code "source" qui est interprété sur chaque machine cliente. Avantage : le code source est léger : il contient les indications pour faire la mise en page mais pas la mise e page elle-même. Inconvénient : la machine cliente doit être suffisamment puissante pour interpréter le code source. Le résulta est (légèrement) différent selon l'interpréteur présent sur la machine cliente. Le mécanisme client/serveur est déclenché par l'appel à une ressource "hypertexte" sur la machine cliente ; ce appel est fait au moyen du localisateur uniforme de ressources : URL (Uniform Resource Locator). Uniform Resource Locator Structure d'une URL : protocole nom de serveur répertoire fichier /aim/infomm/ InfoMM.html ftp:// telnet:// gandalf.obspm.fr mesioq.obspm.fr file:// /disk/repertoire/ texte.html ftp://gandalf.obspm.fr telnet://mesioq.obspm.fr file:///disk/repertoire/texte.html Le nom du serveur est de la forme : machine.domain.tld. (tld : top level domain) aux Etats-Unis, par type d'activités com, edu, gov, mil, net, org ailleurs, par pays ca, fr, uk, be, de, dk... en France asso.fr, gouv.fr, tm.fr

5 Le nom du répertoire est de la forme /nom_du_disque/dossier1/dossier2 (syntaxe type Unix) Le nom de fichier est en général nom.html ou nom.htm Le chemin qui suit le protocole est le chemin absolu menant au fichier en question : il part de la racine et décr tout le chemin à suivre pour atteindre le fichier cible. Un chemin relatif sera un chemin commencant "à l'endroit où on se trouve déjà" par exemple la page web affiché et allant jusqu'au fichier cible ex : "../images/web.jpg" Note : attention aux caractères accentués, aux blancs... dans les noms de fichiers et de répertoire!!! Par exemp : /Mon Disque Dur/Pages_Web/Présentation.html devient /Mon%20Disque%20Dur/Pages_Web/Pr%8Esentation.html Recherche d'informations google msn yahoo et voila Création et gestion d un site Web Utiliser le Web Créer un site web nécessite la prise en compte des éléments suivants : Système hypertexte (texte non linéaire) Multimédia (texte, images, son, animations, vidéo) Navigateur Multi-plateforme (Amiga, Mac, PC, Unix) : images, sons, java, tests Distribué sur des milliers de sites Interactif (clic, affichage d'une animation, formulaires) Multi-services (URL : ftp,mail,news,http) et l'utilisation de moyen techniques : Localisation de l'information : URL Protocole de communication : HTTP Langage : HTML Client serveur Vocabulaire : Page Web, Site Web, Page d'accueil, homepage, (front page), Webmaster, Internet, Intranet e Extranet : pas de différence de structure, les différences se situent dans la restriction d'accès. SGML : Standard Generalized Markup Language : norme ISO fondée sur la distinction fondamentale entr contenu et présentation physique ou structure. DTD : Document Type Definition (décrit la structure et le type des balises utilisés dans le document) XML : extensible Markup Language HTML : Hyper Texte Markup Language ou Langage hyper texte à balise

6 DHTML : Dynamic HTML. Permet d introduire du dynamisme dans les pages, de se démarquer des pages statique illustrées des débuts du web. L utilisation de JAVA et JAVASCRIPT y est pour beaucoup! Exemples parlants : XHTML : extensible HTML Cycle de Vie d'un logiciel Un site Web se conçoit comme un logiciel (software). Du début de sa conception à sa réalisation finale, il évolu (maléable). Modèle web : Etude préliminaire Conception du site Réalisation du site Tests de chaque page Tests du site Mise en ligne Promotion du site Gestion du site Structure d'un site web Comment créer un site web Ecrire la structure générale du site sur papier, arborescence des dossiers Pour chaque page structure détaillée, et sa place dans l'arborescence. Organiser l'arborescence du site Un site web est constitué d'une arborescence de dossiers et fichiers d'autant plus complexe et lourde que le sit est gros. Si on peut se contenter de tout mettre dans un même dossier quand on réalise une ou deux pages htm

7 cela devient difficile à maintenir quand le site possède une centaine de pages, autant d'images et qu'il s'agit de maintenir en allant corriger une faute par ci, remplacer une image par là, compléter une page pour la mettre jour,... Plusieurs choix sont possibles en fonction de l'organisation du site. On peut, par exemple, décider d'avoir dans son dossier "racine" : le fichier index.html, un dossier (et sous-dossiers pour toutes les autres pages web, un dossier pour les images, un pour les styles, un pour les modèles et un pou les scripts. Comme nous allons gérer plusieurs sites en parallèle nous choisirons l'arborescence suivante : christian index.html images styles templates scripts systemesolaire fichier1.html fichier2.html fichier3.html systeme.html Portrait_de_famille.jpg planetes index.html mercure.html venus.html... pluton.html images monsiteweb index.html images mercure.png venus.gif... pluton.jpg La navigation dans le site : quels sont les éléments clés du site? page d'accueil, définition de parcours types (scénarios de tests) permettant de parcourir tous les liens entre éléments TP 1 : structure du site Créer un dossier à votre nom dans mes documents Y créer les éléments suivants : dossier images dossier styles dossier scripts dossier systemesolaire dossier planetes dossier monsiteweb

8 sitedistant Dans le dossier systemesolaire copier systeme.html Dupliquer ce fichier 3 fois et nommer les copies : fichier1.html fichier2.html fichier3.html Copier l'image Portrait_de_famille.jpg dans systemesolaire Structure d'une page web Du point de vue code html, le squelette d'une page web est toujours le même : une déclaration de type de document, puis une balise de début de document <HTML>, une balise en-tête <HEAD>... /HEAD> une balise corps de la page <BODY> et une fin de document </BODY></HTML>!DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " type de document HTML 4.01 Strict Transitional Frameset en-tête : <head> Le titre <title> Des meta-données concernant des informations sur le document : type de caractères utilisés, auteur, description, mots-clés (robots) les feuilles de styles, les langages de scripts <HEAD> titre auteur description modeles scripts, styles mots-cle <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> ou charset=utf-8 <meta name="keywords" content="système solaire, Astronomie, Planètes, Ceinture de Kuiper"> <meta name="author" content="christian"> <meta name="robots" content="index,follow"> ou "noindex,nofollow",... <title>système solaire - Wikipédia, l'encyclopédie libre et gratuite</title> <script type="text/javascript" src="skins/common/wikibits.js"></script> <style type="text/css" media="screen,projection"> "/skins/monobook/main.css"; </style> <link rel="stylesheet" type="text/css" media="print" href="/skins/common/commonprint.css" />

9 </head> corps : <body> Ce qui sera affiché par le navigateur Il contient du texte brut, formaté ou mis en page, des images ou autres media, des tableaux, des listes, des liens. Ce texte et ces images seront affichées par le navigateur client en appliquant les balises aux textes qu'elle encadrent. Cette interprétation dépend du navigateur et de la machine cliente. Organiser la description des pages Comme il y aura plusieurs pages, il est important de les structurer de façon à ce que l'internaute ne soit pas perd et se retrouve dans l'interface que vous lui proposez. Par exemple s'il y a une barre de navigation elle doit être + au même endroit et avoir le même aspect d'une page à l'autre. Les titres de niveau 1, 2, 3 doivent avoir la mêm taille, une même couleur (ou pas!). Le fond des pages participe aussi au look et à l'identité du site. Un aparté sur les couleurs : c'est très important pour le côté look, emballage, agréable du site sans préjuger d contenu. Il faut équilibrer ses inspirations artistiques et la lisibilité du document. On pourra faire ce que l'on voudra le meilleur confort de lecture est atteint pour du texte écrit en noir sur fond blanc, et la lecture sur papier bien plu rapide qu'à l'écran. On en déduira des règles de présentation : Pas trop de texte à l'écran Répartition de l'information sur l'écran (50% d'occupation maximum) 3, 5 ou 7 blocs L'écran de base est en 640x480 ou 800x600, mais il en existe aussi de 1280x854. Faire un gabarit de ces pages permet de bien répartir toute l'information sur la page. Pour gérer le site vous devez pouvoir facilement retrouver chaque page dans le site et avoir répertorié tous le éléments de pages susceptibles d'être modifiés (les images, du texte, des liens,...) Chaque page doit être caractérisée pour la gestion du site Nom de fichier : venus.html Titre de la page : La planète Vénus Titre H1 : VENUS Images, Media : venus.jpg Liens sortants : index.html Blocs : Paragraphes : Tableaux : Listes : Gabarit : Place de la navigation : Nvu est un éditeur de texte wysiwyg orienté pour la publication de pages html. Nvu est gratuit et est l'héritier d célèbre Composer de Netscape. Il est issu de la suite Mozilla (Firefox, Thunderbird, Nvu). Il est basé sur le moteu Gekko, très puissant. Nous allons dans ce cours nous attacher à dissocier la structure de la page et sa présentation, c'est-à-dire l format texte brut et les styles. Nvu est un éditeur et parfaitement adapté à la création de pages web san

10 maîtriser le code html, mais nous verrons que certaines notions sont indispensables pour rester maître de l situation. TP 2 : Installation et configuration de Nvu Téléchargement Télécharger la version appropriée sur ici version 0.81 en français Windows : installer Nvu dans Program Files Linux : dans Home Mac : dans Applications Configuration Lancer Nvu Nous allons configurer les préférences de Nvu une fois pour toutes et les paramètres des sites de publication Edition / Préférences Outils / Préférences Règler comme indiqué les 4 panneaux des préférences suivants : Général Polices Paramètres de pages Avancées

11

12 Paramètres des sites de publication

13 Sites de publication Nom du site : référence locale adresse http du site web adresse ftp du serveur d'édition Nous allons créer des paramètres de sites de publication vers un premier dossier "sitedistant" qui représentera un dossier distant virtuel qui existerait sur la machine serveur. Cela nous permettra de tester la publication des pages en local. Puis nous créerons des paramètres pour un dossier réellement distant et situé sur aim-18.obspm.fr Choisir Edition / Paramètres des sites de publication ou Edition des sites depuis la fenêtre Gestionnaire de sites (F9) Cliquer sur nouveau site Nom du site nvu0. Créer les paramètres de publication vers le dossier "sitedistant" en renseignant les champs indiqués (les chemins indiqués dans adresse HTTP et ftp seront différentes que celles indiquées ici) Cliquer dans parcourir pour choisir le dossier ftp.../sitedistant puis copier coller cette adresse dans le champ HTTP Cliquer sur nouveau site Créer nvuaim18 comme indiqué ci-dessous. Renseigner les rubriques indiquées pour obtenir une configuration qui vous permettra d'envoyer vos pages et dossiers sur le serveur de publication (en ftp) et de les voir à l'adresse http (sous réserve que le serveur soit actif).

14 Vous venez de créer 2 sites de publications : nvu0 et nvuaim18. Sélectionner nvu0 et cliquer Site par défaut. Quand on cliquera sur l'icône "Publier", ce sont ces paramètres qu seront utilisés. Quand on voudra publier sur aim18, il faudra revenir dans Edition / Paramètres des sites de publication ou Edition des sites depuis la fenêtre Gestionnaire de sites et changer le site par défaut. Quitter Nvu pour sauvegarder les préférences, puis le relancer. Vos préférences sont actives. Utilisation Edition d'une page web Nvu s'ouvre avec une page blanche

15 Barre d'outils concernant les fichiers : Nouveau Ouvrir Enregistrer Publier : envoie la page sur le serveur du site sélectionné par défaut. Navigateur : teste la page ouverte en cours dans le navigateur définit par défaut (page locale si non publiée ou page distante sur le serveur si elle a été publiée) On peut avoir plusieurs fichiers ouverts en même temps, on passe de l'un à l'autre par les onglets fichiers. Barre d'outils permettant d'insérer des objets dans la page (définition avec interface graphique) : Ancre : permet de créer une cible de lien à l'intérieur d'une page Lien : crée un lien entre le texte ou l'élément sélectionné et une cible qui doit exister. (page externe, ancre, liens relatifs ou absolu) Image : insère une image existante dans un dossier du site. (emplacement / vignette / texte alternatif / dimensions / espacement / adaptation au texte / map / lien) Tableau : insère un tableau (rapide / précision / cellules / bordure) Formulaire : insère un formulaire Barres de mise en forme : Format paragraphe Titre 1 Titre 2

16 Paragraphe Menu Gestionnaire de sites : F9 Remarquer en bas de l'écran les onglets : "Normal" : édition wysiwyg de la page html "Balises HTML" : montre les balises entrantes "HTML Source" : édition directe dans le code html "Aperçu" : à peu de chose près montre le même aspect qu'en mode Normal. Il vaut mieux utiliser l'icône Navigateur pour avoir un aperçu avec un navigateur. On peut ainsi voir la même page dans chacun de ces 4 formats d'affichage. A gauche de cette barre, un peu plus bas, se trouvent affichées les balises concernant la zone (le bloc) de l page où est positionné le curseur d'édition. Clic gauche dessus permet de sélectionner tout le bloc. Clic droit donne accès à un menu contextuel notamment pour attribuer des styles. Affichage mise en évidence des blocs Insertion caractères et symboles Table des matières Outils (valider, CSS, nettoyeur) TP 3 : Premières pages web Nous avons défini l'arborescence des sites, installé et configuré Nvu. Nous allons maintenant créer des pages we avec Nvu. Pour insister sur la structuration de l'information indépendamment des styles, voyons d'abord l'exemp de la page systemesolaire/fichier1.html. Nous créerons ensuite les premières pages des deux autres sites planete et monsiteweb. Edition d'un fichier html Dans le dossier systemesolaire, ouvrir avec Nvu fichier1.html Affichage/Mise en évidence des blocs Pour sélectionner un bloc, cliquer dedans puis cliquer sur la dernière balise affichée dans la barre bas gauche de nvu : tout le bloc est sélectionné. Un clic droit au même endroit permet d'affecter un style à la balise sélectionnée. Sélectionner les blocs suivants, repérer le nom des balises titres paragraphe image tableau liste Essayer les différents modes d'affichage Création d'un fichier Créer maintenant le premier fichier de votre site personnel. Il est recommandé d'avoir défini sur le papier la page avant de la créer (texte, images, structure de l'information). Ouvrir un nouveau fichier

17 Taper du texte au kilomètre sans se soucier de la présentation Titre et propriétés de la page Format / Titre et propriétés de la page / Renseigner le titre et la description. Ces informations seront écrites dans le header mais ne s'afficheront pas dans la page (sauf le titre --> bookmarks, signets) Enregistrer sous "monsiteweb/page1.html" Ajouter la structure du texte Mettre un titre en h1, faire des paragraphes Listes Essayer les 3 types de listes : ordonnées <ol>, à puces <ul>, de définition <dl>

18 type=1 start=1 ou A, a, I, i type="circle" ou squarre, disc Tableaux Insérer un tableau avec une bordure de 1 pixel, un espacement des cellules de 2 px et une marge de 2px dans les cellules.

19 Image Commencer par créer un dossier images dans votre dossier monsiteweb et y copier l'image Portrait_de_famille.jpg qui existe dans systemesolaire. Insérer l'image Portrait_de_famille.jpg dans votre page Donner d'abord la localisation de l'image sur le disque. Il vaut mieux avoir déjà copié l'image dans le dossier images. Cliquer URL relative pour éviter une URL absolue qui contient le chemin depuis la racine de votre disque dur. Le cas risque de se produire si l'image est située ailleurs sur votre disque. Nvu vous proposera de copier l'image avec la page. Il faudra ensuite revenir sur l'image pour remettre le chemin en relatif. Donner un texte alternatif à afficher en cas de problème avec l'image. On peut changer les dimensions en pixels ou en pourcentage de la page

20 On peut ajouter un espace de quelques pixels autour de la page et spécifier comment doit s'afficher du texte autour de l'image. L'image peut être cliquable si on spécifie un lien

21 Enregistrer Code source Regardons le <HTML> Source et essayons de retrouver les blocs d'informations <!DOCTYPE> <HTML> <HEAD> titre auteur description </HEAD> <BODY> Retrouver le texte brut et les balises </BODY> </HTML> TP 4 : les planètes On commence un nouveau site que l'on gèrera en parallèle avec les 2 autres Dans le dossier "planetes" créer un dossier "images" y copier une image de chaque planète du système solaire (utiliser google ou le site : Créer une nouvelle page Title : Le système solaire Enregistrer sous index.html dans le dossier "planetes"

22 Taper du texte paragraphe h1 h2 Liste : Mercure Vénus Terre Mars Jupiter Saturne Uranus Neptune Pluton Tableau Image Enregistrer Tester dans le navigateur Créer une nouvelle page Format / Titre et propriétés de la page / Title : Mercure enregistrer sous mercure.html dans le dossier "planetes"

23 taper du texte Paragraphes Titres h1 h2 image texte lien vers la page index tableau enregistrer Ouvrir la page index.html lien vers la page mercure.html enregistrer Tester dans le navigateur enregistrer 9 fois sous les noms venus.html mars.html... pluton.html Il ne reste plus qu'à ré-ouvrir ces pages et y remplacer les images et textes correspondants Faire la page venus.html Format > Titre et propriétés de la page : changer le titre Changer le H1, l'image, le texte enregistrer Ouvrir index.html Faire les liens vers les 9 pages Tester dans le navigateur Publier en local il faut recréer l'arborescence du TP1 Publier sur aim-18 Il faut d'abord créer les dossiers (reproduire l'arborescence de votre site) sur aim-18, puis publier les pages une à une en spécifiant le dossier d'arrivée sur aim-18 pour la page html et pour les images incluses.

24 Le langage HTML lien sur site Le langage HTML est un langage à balise <B> balise ouverte </B> balise fermée Le texte situé entre les balises sera affiché avec la mise en forme correspondant aux balises qui l'encadrent; i bold=gras. Les balises admettent des attributs qui précisent leur fonctions Balises <HTML> <HEAD> <BODY> <P> <DIV> <BR>

25 <HR> <TABLE> <TR><TD> <UL> <LI> <OL> <LI> <DL> <DT> <DD> Attributs <IMG href="image.gif" width="100%"> <A href=" <A name="ancre1"> Mise en forme d'une page Une fois le contenu structuré il reste à faire l'emballage Intégrée dans le corps Méthode classique avec interface graphique de la mise en forme de tout traitement de texte. On peut modifier le polices, taille des caractères, couleur. Menu "Format" ou Barre d'outils "Format" Corps de texte Largeur variable Couleur (caractères / fond) Stabylo Taille caractère (+/-) Bold Italique Underline Liste : sélectionner la liste puis modifier son style (à puce, numérotée, alphabétique) Alignement des paragraphes : gauche centre droit justifié Indentation Styles définis : Classes Calque Premier plan / arrière plan Style texte gras Elémént de liste de définition Attacher aux bords de la page (gauche, centre droit, en haut, au milieu, en bas) en html??? TP5 : mise en forme classique Mettre en forme

26 dossier systemesolaire/fichier1.html Couleur de fond de page Titre en rouge Police Arial Helvetica Verdana Sans-serif Couleur RVB #FF0000, #00FF00, #0000FF, #000000, #FFFFFF ou la palette Regarder le html produit enregistrer systemesolaire/fichier1.html Feuilles de style CSS Feuille de style incorporée Affichage mise en évidence des blocs On peut attribuer aux blocs des propriétés générales ou des propriétés particulières grâce aux feuilles de style e cascade ou Cascading Style Sheet CSS. Les propriétés générales sont définies dans le bloc conteneur général <body> Les propriétés particulières peuvent être définies dans d'autres conteneurs comme p, ul,... Nvu propose une interface graphique pour définir les CSS. Création d'une feuille de style interne ou incorporée à la page html en cours Ouvrir systemesolaire/fichier2.html Outils / Editeur CSS Choisir "Feuille incorporée"

27 Dans Liste des média : taper "screen" pour écran (autres : presentation, print, all) Titre : nommer votre feuille de style "style1-ecran" Cliquer sur "Créer la feuille de syle" La feuille de style interne est sélectionnée dans la partie gauche de la fenêtre. Exporter la feuille et utiliser la version exportés sera vu plus tard Pour l'instant, créons des règles pour cette feuille. Créer une règle de style On a le choix entre 3 type de règles. Style nommé :.class pour les styles généraux pouvant concerner tous les types par exemple.rouge qui met les caractères en rouge Style type : pour renommer les balises existantes par exemple h1 Style sélecteur : pour des styles particuliers qui ne peuvent être appliqués qu'une seule fois dans le document par exemple #titre Cliquer sur "Règle"

28 Choisir le style sélecteur Taper le texte : body Créer la règle de style On a maintenant accès aux onglets qui nous permettront de définir la mise en page : Général Texte Fond Bordure Boite Audio Général Texte Famille de Police : Personnaliser / Arial, Helvetica, Verdana, Sans-serif Couleur : # Alignement : justifié

29 Fond Couleur : #FFFFFF Bordure Utiliser le même style pour tous canelure 2px vert

30 Boite Son

31 Ajout Règles... Cliquer sur "Règle" Choisir le style type Taper le texte : h1 Créer la règle de style Caractères en rouge, fond, bordure 4 Ajout Règles... Cliquer sur "Règle" Choisir le style type Taper le texte : h2 Créer la règle de style Caractères en rouge, fond, bordure 2 Ajout Règles... Cliquer sur "Règle" Choisir le style nommé Taper le texte : bigblue Créer la règle de style Caractères en gros, bleu, bordure enregistrer le fichier

32 TP6 Mise en forme CSS systemesolaire/fichier2.html Créer une nouvellle feuille de style Règles.class p h1 h2 #para voyez les modifs en direct enregistrer systemesolaire/fichier2.html Feuille de style exportée Ouvrir systemesolaire/fichier2.html Sélectionner la feuille de syle exporter la feuille de style et utiliser la version exportée sélectionner le chemin./style export1.css fermer fichier2.html Feuille de style liée Ouvrir systemesolaire/fichier3.html CSS Feuille liée URL : style/export1.css media : screen titre export2 Créer une feuille de style enregistrer TP Créer une feuille de style pour l'impression (pas de fond, tous les liens de la même couleur, soulignés. a:link a:visited a:active

33 TP créer une barre de navigation entre les 3 pages ou plus Créer une feuille de style : jaune sur fond bleu avec xx en pointillés rouge et une autre : blanc sur noir Compléments Modèles Calques Orthographe Javascript Formulaires Modèles Les modèles sont des pages webs qui fixent certaines parties de la page les autres pouvant être modifiées Nouveau Fichier plus d'options Modèle vide

34 enregistrer sous modele1.mzt dans le dossier templates Titre : écrire TITRE Paragraphe 1 : écrire MODIFIABLE Paragraphe 2 : écrire MODIFIABLE Paragraphe 3 : écrire NON - MODIFIABLE enregistrer sélectionner un paragraphe1 en entier activer insertion modèles zone modifiable idem Paragraphe 1 et 2 enregistrer Nouveau fichier selon modèle enregistrer sous essaimodele1.html TP 7

35 Calques Les calques sont TP 8 ddd Orthographe copier fr_fr.aff fr_fr.dic extraits de fr_fr1.0.1.zip dans le répertoire de nvu puis components/myspell/ TP 9 ddd Javascript ddd TP 10 ddd Formulaires Définir un formulaire Insertion Formulaire

36 puis Définir un formulaire Nom du formulaire : livredor URL de l'action : adressehttpaim-18.obspm.fr/cgi-bin/traitement.cgi Méthode : POST Les champs

37 Légende champ : vchamptexte champ mot de passe : ****

38 QCM champ case à cocher : champ bouton radio : champ fichier : Parcourir champ valide : vvalide champ efface : raz champ bouton : vchampbouton Image image de formulaire : Zone de texte zone de texte : zone de texte Liste de sélection Liste de sélection - Note sur 10 :

39 liste2 gpe1 Opt11 opt12 opt13 gpe2 opt21 opt22 opt23 liens internes mapage1 Bouton Bouton de validation : Bouton : Etiquettes Etiquettes : sdjkhfjkqsdfv : fdbdfbsdf Index Index de recherche Index de recherche - entrer les mots-clés : fin du formulaire TP 11 ddd Références

40

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

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

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

Programmation Internet Cours 4

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

Plus en détail

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 CRÉER SON SITE WEB - PROJET RESCOL

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

Plus en détail

<Créer un site Web. avec/> Suzanne Harvey

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

Plus en détail

Les outils de création de sites web

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

Plus en détail

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

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

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

Plus en détail

Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6

Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6 Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6 1 BERNIER François http://astronomie-astrophotographie.fr Table des matières Installation d un serveur HTTP (Hypertext Transfer

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

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

Plus en détail

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

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

FORMATION / CREATION DE SITE WEB / 4 JOURNEES Sessions Octobre 2006

FORMATION / CREATION DE SITE WEB / 4 JOURNEES Sessions Octobre 2006 I. INTRODUCTION 1. Présentation du formateur et des élèves 2. Historique internet : d'où ça vient a. Historique général : 3 étapes majeures 1. l'histoire de l'informatique débute en 1942 avec la première

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

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

Bernard Lecomte. Débuter avec HTML

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

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

Internet. DNS World Wide Web. Divers. Mécanismes de base Exécution d'applications sur le web. Proxy, fire-wall

Internet. DNS World Wide Web. Divers. Mécanismes de base Exécution d'applications sur le web. Proxy, fire-wall Internet DNS World Wide Web Mécanismes de base Exécution d'applications sur le web Divers Proxy, fire-wall 1 Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet

Plus en détail

Notes pour l utilisation d Expression Web

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

Plus en détail

Les services usuels de l Internet

Les services usuels de l Internet Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet Courrier électronique (mail) - protocole SMTP (Simple Mail Transfer Protocol) inclut maintenant tous types

Plus en détail

ENVOI EN NOMBRE DE Mails PERSONNALISES

ENVOI EN NOMBRE DE Mails PERSONNALISES MAILING ENVOI EN NOMBRE DE Mails PERSONNALISES 2 Téléchargement 3 Installation 6 Ecran d accueil 15 L envoi de mails 22 Envoi d un document HTML crée avec Word (envoi en base 64) 25 Le compte courriel

Plus en détail

Formation Webmaster : Création de site Web Initiation + Approfondissement

Formation Webmaster : Création de site Web Initiation + Approfondissement Contactez notre équipe commerciale au 09.72.37.73.73 Aix en Provence - Bordeaux - Bruxelles - Geneve - Lille - Luxembourg - Lyon - Montpellier - Nantes - Nice - Paris - Rennes - Strasbourg - Toulouse Formation

Plus en détail

Optimiser pour les appareils mobiles

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

Plus en détail

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

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

Plus en détail

Freeway 7. Nouvelles fonctionnalités

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

Plus en détail

Inspiration 7.5. Brève description d Inspiration. Avantages d Inspiration. Inconvénients d Inspiration

Inspiration 7.5. Brève description d Inspiration. Avantages d Inspiration. Inconvénients d Inspiration Inspiration 7.5 Brève description d Inspiration Langue : Français et anglais. Coût : 109$. Une version d essaie gratuite de 30 jours est disponible à l adresse suivante : http://inspiration.demarque.com/applicationweb/pages/publique/index.php

Plus en détail

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

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

Plus en détail

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ÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING

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

Plus en détail

Le générateur d'activités

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

Plus en détail

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

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

Plus en détail

Service de certificat

Service de certificat Service de certificat Table des matières 1 Introduction...2 2 Mise en place d une autorité de certification...3 2.1 Introduction...3 2.2 Installer le service de certificat...4 3 Sécuriser un site web avec

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

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

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

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

Plus en détail

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

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

Plus en détail

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

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

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

Plus en détail

Publier 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

Tutoriel : Feuille de style externe

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

Plus en détail

Dévéloppement de Sites Web

Dévéloppement de Sites Web 1 Dévéloppement de Sites Web Cours II : Internet et HTML - une très brève introduction Peter Stockinger Séminaire de Maîtrise en Communication Interculturelle à l'institut National des Langues et Civilisations

Plus en détail

Gérer, stocker et partager vos photos grâce à Picasa. Janvier 2015

Gérer, stocker et partager vos photos grâce à Picasa. Janvier 2015 Gérer, stocker et partager vos photos grâce à Picasa Janvier 2015 Sommaire 1 - Découverte de Picasa 2 - Gestion des dossiers et des photos 3 - Trier, filtrer et rechercher 4 - Retoucher une image 5 - Création

Plus en détail

Logiciels de référencement

Logiciels de référencement Outils Logiciels de référencement Afin de contrôler la qualité de son référencement, d optimiser et d améliorer son positionnement, il peut être utile d utiliser des outils couvrant tout ou partie du référencement.

Plus en détail

Comment utiliser mon compte alumni?

Comment utiliser mon compte alumni? Ce document dispose d une version PDF sur le site public du CI Comment utiliser mon compte alumni? Elena Fascilla, le 23/06/2010 Sommaire 1. Introduction... 2 2. Avant de commencer... 2 2.1 Connexion...

Plus en détail

Formation HTML / CSS. ar dionoea

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

Plus en détail

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

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

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et

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

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

Utiliser Freemind à l'école

Utiliser Freemind à l'école Utiliser Freemind à l'école Cette notice est une rapide introduction au mind maping, que nos amis québecois appelent les «schémas de réseaux conceptuels» ou encore idéacteur. En d'autres termes c'est l'organisation

Plus en détail

Formation Site Web. Menu du jour. Le web comment ça marche? Créer un site web Une solution proposée pour débuter La suite?

Formation Site Web. Menu du jour. Le web comment ça marche? Créer un site web Une solution proposée pour débuter La suite? Menu du jour Le web comment ça marche? Créer un site web Une solution proposée pour débuter La suite? Le web comment ça marche? - Internet le réseau des réseaux. Un peu d'histoire. - adresse IP : numéro

Plus en détail

ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.

ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. - 1 - PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables

Plus en détail

Création d un site web avec Nvu

Création d un site web avec Nvu Création d un site web avec Nvu sources principales d'informations: http://www.framasoft.net/article2656.html http://info.sio2.be/nvu/index.php http://www.anseladams.com Pensez à sauvegarder fréquemment

Plus en détail

Gestion des documents avec ALFRESCO

Gestion des documents avec ALFRESCO Gestion des documents avec ALFRESCO 1 INTRODUCTION : 2 1.1 A quoi sert ALFRESCO? 2 1.2 Comment s en servir? 2 2 Créer d un site collaboratif 3 2.1 Créer le site 3 2.2 Inviter des membres 4 3 Accéder à

Plus en détail

Normes techniques 2011

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

Plus en détail

UTILISATION DE L'APPLICATION «PARTAGE DE FICHIERS EN LIGNE»

UTILISATION DE L'APPLICATION «PARTAGE DE FICHIERS EN LIGNE» UTILISATION DE L'APPLICATION «PARTAGE DE FICHIERS EN LIGNE» url : http://colleges.ac-rouen.fr/cahingt/partages/ UN PRINCIPE : le stockage est privé, le partage est public > tant que l'on ne partage pas,

Plus en détail

AC PRO SEN TR «services TCP/IP : WEB»

AC PRO SEN TR «services TCP/IP : WEB» B AC PRO SEN TR «services TCP/IP : WEB» TP N 2: Installation des services utilisateurs (WEB) Nom : Prénom : Classe : Date : Appréciation : (2 points d'autonomie si vous n'utilisez aucune aide) Note : /50

Plus en détail

0.1 Mail & News : Thunderbird

0.1 Mail & News : Thunderbird 0.1 Mail & News : Thunderbird 1 0.1 Mail & News : Thunderbird Thunderbird est le lecteur de mail, de newsgroup et de flux RSS de la fondation Mozilla. Il est disponible pour Linux (en version gtk2), pour

Plus en détail

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

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

Plus en détail

ENVOI EN NOMBRE DE Mails PERSONNALISES

ENVOI EN NOMBRE DE Mails PERSONNALISES ENVOI EN NOMBRE DE Mails PERSONNALISES 2 Téléchargement 3 Installation 6 Ecran d accueil 15 L envoi de mails 22 Envoi d un document HTML crée avec Word (envoi en base 64) 25 Le compte courriel 27 L historique

Plus en détail

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

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

Plus en détail

Comment créer vos propres pages web?

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

Plus en détail

Google Drive, le cloud de Google

Google Drive, le cloud de Google Google met à disposition des utilisateurs ayant un compte Google un espace de 15 Go. Il est possible d'en obtenir plus en payant. // Google Drive sur le web Se connecter au site Google Drive A partir de

Plus en détail

Parcours FOAD Formation EXCEL 2010

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

Plus en détail

Glossaire. www.themanualpage.org ( themanualpage.org) soumises à la licence GNU FDL.

Glossaire. www.themanualpage.org ( themanualpage.org) soumises à la licence GNU FDL. Glossaire Ce glossaire contient les termes techniques et de spécialité les plus employés dans cette thèse. Il emprunte, pour certaines d entre elles, les définitions proposées par www.themanualpage.org

Plus en détail

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles

Plus en détail

Vous y trouverez notamment les dernières versions Windows, MAC OS X et Linux de Thunderbird.

Vous y trouverez notamment les dernières versions Windows, MAC OS X et Linux de Thunderbird. MAIL > configuration de mozilla thunderbird > SOMMAIRE Qu'est ce que Thunderbird? Téléchargement du logiciel Thunderbird Configuration Installation d'un compte POP Installation d'un compte IMAP En cas

Plus en détail

37 13 Courrier indésirable 38 14 Appeler plusieurs comptes de messagerie 39 15 Sélectionner un compte de messagerie 40 16.

37 13 Courrier indésirable 38 14 Appeler plusieurs comptes de messagerie 39 15 Sélectionner un compte de messagerie 40 16. 1 Créer un compte de messagerie 26 2 Créer une signature 27 3 Vérifier automatiquement le courrier entrant 28 4 Fixer le volume maximum des messages 29 5 Demande de réunion par courrier électronique 30

Plus en détail

Module BD et sites WEB

Module BD et sites WEB Module BD et sites WEB Cours 8 Bases de données et Web Anne Doucet Anne.Doucet@lip6.fr 1 Le Web Architecture Architectures Web Client/serveur 3-tiers Serveurs d applications Web et BD Couplage HTML-BD

Plus en détail

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X Groupe Eyrolles, 2003, ISBN : 2-212-11317-X 3 Création de pages dynamiques courantes Dans le chapitre précédent, nous avons installé et configuré tous les éléments indispensables à la mise en œuvre d une

Plus en détail

Edition de sites Jahia 6.6

Edition de sites Jahia 6.6 Sommaire Edition de sites Jahia 6.6 documentation temporaire en attendant la finalisation de la documentation en ligne Ligne graphique Débuter l'édition Interface utilisateur Astuces de publication Boîte

Plus en détail

Note de cours. Introduction à Excel 2007

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

Plus en détail

HTML, CSS, JS et CGI. Elanore Elessar Dimar

HTML, CSS, JS et CGI. Elanore Elessar Dimar HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML

Plus en détail

Présentation Internet

Présentation Internet Présentation Internet 09/01/2003 1 Sommaire sières 1. Qu est-ce que l Internet?... 3 2. Accéder à l Internet... 3 2.1. La station... 3 2.2. La connection... 3 2.3. Identification de la station sur Internet...

Plus en détail

Banque d images SVT. Créer et utiliser une banque d images avec Picasa 2. Version anglaise -Windows 98. Banque photo en SVT : page 1 /14

Banque d images SVT. Créer et utiliser une banque d images avec Picasa 2. Version anglaise -Windows 98. Banque photo en SVT : page 1 /14 A..T C..G G..C A..T T..A C..G A..T T..A G..C G..C T..A A..T C..G Sciences de la Vie et de la Terre Lycée de la Venise Verte Banque d images SVT Créer et utiliser une banque d images avec Picasa 2 Version

Plus en détail

Manuel d utilisation email NETexcom

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

Plus en détail

RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado

RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado - RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et

Plus en détail

Création WEB avec DreamweaverMX

Création WEB avec DreamweaverMX Creation Web avec DreamweaverMX MX Initiation Sommaire.preparation.mise en forme.liens hypertextes.images.liens sur images.images avec zones sensibles.images survolees.liens de type courriel.apercu dans

Plus en détail

Assemblage couleur & trait en InDesign pour fichier Acrobat - 1

Assemblage couleur & trait en InDesign pour fichier Acrobat - 1 Assemblage couleur & trait en InDesign pour fichier Acrobat Méthode de travail pour juxtaposer le trait aux couleurs en InDesign - Trait à 600 ou 1200 dpi suivant le genre (ligne claire = 1200 trait noir

Plus en détail

Répondre à un courrier - Transférer un courrier 20

Répondre à un courrier - Transférer un courrier 20 avec Présentation de l'écran d'internet Explorer 5 3 Se connecter sur un site distant à partir de l'adresse URL du site Se connecter sur un site distant en utilisant les favoris 5 6 Enregistrer un site

Plus en détail

Réalisez votre propre carte de vœux Éléctronique

Réalisez votre propre carte de vœux Éléctronique Les différentes possibilités d animer une carte de vœux Il existe plusieurs possibilités d animer une carte de vœux : - Une Vidéo : Vous pouvez créer une vidéo, un film simplement avec Windows Media Player.

Plus en détail

Prise en main rapide

Prise en main rapide Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un

Plus en détail

Pack Fifty+ Normes Techniques 2013

Pack Fifty+ Normes Techniques 2013 Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié

Plus en détail

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

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

Plus en détail

MANUEL WORDPRESS. Objectif: Refonte d un site web sous Wordpress I PRE-REQUIS: 1 / Créer un backup (sauvegarde) du site:

MANUEL WORDPRESS. Objectif: Refonte d un site web sous Wordpress I PRE-REQUIS: 1 / Créer un backup (sauvegarde) du site: MANUEL WORDPRESS Objectif: Refonte d un site web sous Wordpress I PRE-REQUIS: 1 / Créer un backup (sauvegarde) du site: A/ Traitement de la base de données: Pour cette étape, vous aurez besoin au préalable

Plus en détail

Prise en main du logiciel. Smart BOARD Notebook 10

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

Plus en détail

et de la feuille de styles.

et de la feuille de styles. Feuilles de style / mars 2007 Manuel d'utilisation du modèle enssib et de la feuille de styles. Writer Open Office Service des produits documentaires Contact : Richard Grenier 2e étage enssib Tél : 04

Plus en détail

Utilisation de l'outil «Open Office TEXTE»

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

Plus en détail

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

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

Plus en détail

But de cette présentation

But de cette présentation Réseaux poste à poste ou égal à égal (peer to peer) sous Windows But de cette présentation Vous permettre de configurer un petit réseau domestique (ou de tpe), sans serveur dédié, sous Windows (c est prévu

Plus en détail

Architectures web/bases de données

Architectures web/bases de données Architectures web/bases de données I - Page web simple : HTML statique Le code HTML est le langage de base pour concevoir des pages destinées à être publiées sur le réseau Internet ou intranet. Ce n'est

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