Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver
|
|
|
- Marie-Agnès Rancourt
- il y a 8 ans
- Total affichages :
Transcription
1 Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Les bonnes pratiques du concepteur web moderne requièrent l usage des CSS pour la réalisation des mises en page. Les mises en page CSS (par opposition aux modèles en tableau) permettent de réduire la taille des fichiers, de gérer plus facilement le code et de se conformer aux normes. Deux composants élémentaires régissent la mise en page CSS : - une série de règles CSS qui définissent les dimensions et le format des éléments principaux de la page, - une série correspondante de balises HTML (en général <div> ) qui déterminent l ossature de la page. A. Créer la page et définir la balise <body> : A partir d un document HTML vide, on crée une règle pour la balise <body> 1. Choisir Fichier Nouveau Dans la boîte Nouveau document, choisir (de gauche à droite) : - page vierge, - type de page : HTML, - mise en forme : <aucune> - cliquer sur le bouton Créer. Le document créé ici comprend : - un fond blanc, - une zone centrée de 760 pixels contenant : * une zone entête avec :. une zone logo (en haut),. une zone navigation (au milieu),. une zone bannière (en bas), * une zone principale avec :. une colonne gauche,. une colonne droite, * un pied de page. 2. Enregistrer la page dans le répertoire de travail choisi : Fichier Enregistrer sous 3. Choisir Fenêtre Styles CSS Dans le panneau Styles CSS, cliquer sur le bouton Tous 4. En bas du panneau Styles CSS, cliquer sur nouvelle règle de CSS On commence par définir un canevas neutre pour la mise en page, en déclarant une règle CSS pour la balise <body> en premier 5. Dans la boîte de dialogue Nouvelle règle CSS, choisir : - Type de sélecteur : Balise, - Balise : body - Sélectionner l option Définir dans : Seulement ce document. Une fois la mise en page terminée, les règles CSS seront toutes exportées vers une feuille de style externe (fichier *.css). 1
2 6. Dans la boîte de dialogue Définition de règles de CSS pour body : - cliquer sur Catégorie : Arrière plan (colonne de gauche), - cliquer sur Couleur d arrière blanc : blanc = #FFFFFF La mise en page en construction sera centrée dans la fenêtre du navigateur mais le texte sera aligné à gauche. Pour que la mise en forme soit homogène dans les navigateurs plus anciens, comme Internet Explorer 5, on attribue la valeur center à la propriété d alignement du texte dans la balise supérieure <body>. Une autre règle CSS alignera le texte à gauche pour les éléments situés dans un conteneur. - cliquer sur Catégorie : Bloc, - dans la liste déroulante Alignement de texte : centrer - cliquer sur Catégorie : Boîte, - dans la zone Remplissage, taper 0 (zéro) dans le champ Haut, - dans la zone Marge, taper 0 (zéro) dans le champ Haut, - cliquer sur le bouton OK. CSS obtenu : body { background-color: #FFFFFF; text-align: center; margin: 0px; padding: 0px; } 2
3 B. Définir le conteneur externe : Une technique standard pour la création de mises en page CSS consiste à employer une balise <div> pour y placer toutes les autres balises et le contenu. La déclaration d un unique conteneur externe définit une règle qui fixe les réglages généraux, comme la largeur globale et l alignement de la mise en page. On va créer une règle CSS utilisant un sélecteur ID (défini par un # en début de nom). Rappel : un sélecteur ID ne peut être utilisé qu une seule fois par page HTML (contrairement aux classe). 1. Dans le panneau Styles CSS, cliquer sur nouvelle règle de CSS 2. Dans la boîte de dialogue Nouvelle règle CSS, choisir : - Type de sélecteur : Avancé, - Sélecteur : #conteneur, - Sélectionner l option Définir dans : Seulement ce document, 3. Dans la boîte de dialogue Définition de règles de CSS pour #conteneur : - cliquer sur Catégorie : Bloc (colonne de gauche), - dans la liste déroulante Alignement du texte : gauche 3
4 - cliquer sur Catégorie : Boîte (colonne de gauche), - dans le champ Largeur : 760 pixels, - dans la zone Marge, décocher l option Idem pour tous, dans le champ Haut : 0 (zéro), dans le champ Droite : auto, dans le champ bas : 0 (zéro), dans le champ Gauche : auto, - cliquer sur OK. CSS obtenu : #conteneur { text-align: left; width: 760px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } 4. Dans la barre Insérer, catégorie Commun, cliquer sur Insérer la balise Div - Insérer : Au point d insertion, - Dans la liste ID : conteneur, La nouvelle <div> est ajoutée sur la page HTML. Cette mise en page utilise une largeur définie de 760 pixels pour les résolutions d écran de 800x600 pixels. Pourquoi ne pas utiliser 800 pixels? Les 40 pixels supplémentaires sont utilisés pour les côtés du navigateur et notamment toutes les barres de défilement. Si la fenêtre du navigateur est plus large (résolution d écran plus élevée), la largeur supplémentaire est automatiquement répartie dans les marges gauche et droite. 4
5 C. Définir les divisions principales : La structure de la page peut être divisée en trois zones principales : - entête, - contenu principal, - pied de page. Chacune de ces zones nécessite une règle CSS et une balise <div> distincte. Pour chaque zone, on utilisera un sélecteur ID unique. En premier, on définit la règles CSS #entete : 1. Dans le panneau Styles CSS, cliquer sur nouvelle règle de CSS 2. Dans la boîte de dialogue Nouvelle règle CSS, choisir : - Type de sélecteur : Avancé, - Sélecteur : #entete, - Sélectionner l option Définir dans : Seulement ce document, #entete 3. Dans la boîte de dialogue Définition de règles de CSS pour #entete : - cliquer sur Catégorie : Boîte (colonne de gauche), - dans la zone Marge, décochez l option Idem pour tous, - dans le champ Haut : 12, - dans le champ Bas : 12, - cliquer sur OK. Il n est pas nécessaire de déclarer une largeur car, par défaut, la balise <div> s étend afin de remplir son conteneur #conteneur CSS obtenu : #entete { margin-top: 12px; margin-bottom: 12px; } 5
6 Deuxièmement, on définit la règles CSS #principal : 4. Dans le panneau Styles CSS, cliquer sur nouvelle règle de CSS 5. Dans la boîte de dialogue Nouvelle règle CSS, choisir : - Type de sélecteur : Avancé, - Sélecteur : #principal, - Sélectionner l option Définir dans : Seulement ce document, #principal 6. Dans la boîte de dialogue Définition de règles de CSS pour #principal : - cliquer sur Catégorie : Boîte (colonne de gauche), - dans la zone Remplissage, décochez l option Idem pour tous, - dans le champ Haut : 0 (zéro), - dans la zone Marge, décochez l option Idem pour tous, - dans le champ Haut : 0 (zéro), - cliquer sur OK. CSS obtenu : #principal { margin-top: 0px; padding-top: 0px; } 6
7 Troisièmement, on définit la règles CSS #piedpage : 7. Dans le panneau Styles CSS, choisir le style #entete, faire un clic droit et choisir Dupliquer dans le menu déroulant, dans la boîte de dialogue, taper #piedpage dans le champ sélecteur, cliquer sur OK. 8. Dans le panneau style CSS, choisir le style #piedpage, dans le volet Propriétés (au-dessous), cliquer sur Ajouter une propriété, dans le cadre qui apparaît, taper : clear, appuyer sur la touche <Tab> et dans le cadre, taper : both CSS obtenu : #piedpage { margin-top: 12px; margin-bottom: 12px; clear: both; } La propriété clear est utilisée pour définir si un élément doit se trouver sur la même bande horizontale qu un élément flottant. Cette propriété indique de quelle manière le texte va être placé par rapport à une boîte flottante précédente : - left : place l'élément en bas juste à droite de celui qui le précède dans le code source. - right : place l'élément en bas juste à gauche de celui qui le précède dans le code source. - both : ici la boîte générée se déplace sous chacune des boîtes flottantes qui précèdent dans le code source. - none : rien n'est affecté par rapport aux éléments flottants ; n'influence pas le positionnement en cours. La propriété CSS clear : both garantit qu aucun élément flottant ne viendra interférer avec le #piedpage. La zone #principal (au-dessus) contiendra deux balises flottantes. 7
8 Après avoir défini les règles CSS pour les 3 divisions principales de la mise en page, on peut les ajouter à la page. 9. Sélectionner le texte de remplissage Placez ici le contenu de id "conteneur" et appuyer sur Suppr. 10. Dans la barre Insérer, catégorie Commun, cliquer sur Insérer la balise Div Dans la boîte de dialogue Insérer la balise Div : - Insérer : Après le début de la balise <div id="conteneur">, - Dans la liste ID : entete, Code HTML obtenu : <div id="conteneur"> <div id="entete"> Placez ici le contenu de id "entete" Le <div> #entete se trouve à l intérieur du <div> #conteneur. 11. Dans la barre Insérer, catégorie Commun, cliquer sur Insérer la balise Div Dans la boîte de dialogue Insérer la balise Div : - Insérer : Après la balise <div id="entete">, - Dans la liste ID : principal, Code HTML obtenu : <div id="conteneur"> <div id="entete"> Placez ici le contenu de id "entete" <div id="principal"> Placez ici le contenu de id "principal" 12. Dans la barre Insérer, catégorie Commun, cliquer sur Insérer la balise Div Dans la boîte de dialogue Insérer la balise Div : - Insérer : Après la balise <div id="principal">, - Dans la liste ID : piedpage, Code HTML obtenu : <div id="conteneur"> <div id="entete"> Placez ici le contenu de id "entete" <div id="principal"> Placez ici le contenu de id "principal" <div id="piedpage"> Placez ici le contenu de id "piedpage" A chaque choix dans la liste ID, seuls les sélecteurs qui n ont pas été attribués sont disponibles. Ainsi Dreamweaver empêche de réutiliser un règle CSS d ID dans la même page. 8
9 D. Ajouter des zones de contenu : La mise en page peut être utilisée telle quelle mais, pour structurer la page plus finement, des zones de contenu supplémentaires peuvent s imbriquer à l intérieur des balises <div> déjà créées. Pour commencer, la zone entete sera divisée en 2 zones l une au-dessus de l autre : - banniere, - menu. 1. Dans le panneau Styles CSS, cliquer sur nouvelle règle de CSS 2. Dans la boîte de dialogue Nouvelle règle CSS, choisir : - Type de sélecteur : Avancé, - Sélecteur : #banniere, - Sélectionner l option Définir dans : Seulement ce document, #banniere 3. Dans la boîte de dialogue Définition de règles de CSS pour #banniere : - cliquer sur Catégorie : Boîte (colonne de gauche), - dans le champ Hauteur : 80, - dans la zone Remplissage, décochez l option Idem pour tous, - dans le champ Bas : 12, - cliquer sur OK. CSS obtenu : #banniere { height: 80px; padding-bottom: 12px; } 4. Dans le panneau Styles CSS, choisir le style #banniere, faire un clic droit et choisir Dupliquer dans le menu déroulant, dans la boîte de dialogue, taper #menu dans le champ sélecteur, cliquer sur OK. #menu 9
10 5. Dans le panneau style CSS, choisir le style #menu, dans le volet Propriétés (au-dessous), modifier la valeur height : 28, sélectionner la propriété padding-bottom et appuyer sur Suppr, CSS obtenu : #menu { height: 28px; } 6. Sélectionner le texte de remplissage Placez ici le contenu de id "entete" et appuyer sur Suppr. 7. Dans la barre Insérer, catégorie Commun, cliquer sur Insérer la balise Div Dans la boîte de dialogue Insérer la balise Div : - Insérer : Après le début de la balise <div id="entete">, - Dans la liste ID : banniere, Code HTML obtenu : <div id="conteneur"> <div id="entete"> <div id="banniere"> Placez ici le contenu de id "banniere" <div id="principal"> 8. Dans la barre Insérer, catégorie Commun, cliquer sur Insérer la balise Div Dans la boîte de dialogue Insérer la balise Div : - Insérer : Après la balise <div id="banniere">, - Dans la liste ID : menu, Code HTML obtenu : <div id="conteneur"> <div id="entete"> <div id="banniere"> Placez ici le contenu de id "entete" <div id="menu"> Placez ici le contenu de id "menu" <div id="principal"> 10
11 Ensuite, la zone principal sera divisée en 2 zones : - gauche, - droite. 9. Dans le panneau Styles CSS, cliquer sur nouvelle règle de CSS 10. Dans la boîte de dialogue Nouvelle règle CSS, choisir : - Type de sélecteur : Avancé, - Sélecteur : #gauche, - Sélectionner l option Définir dans : Seulement ce document, #gauche 11. Dans la boîte de dialogue Définition de règles de CSS pour #gauche : - cliquer sur Catégorie : Boîte (colonne de gauche), - dans le champ Largeur : 365, - dans la liste Flottante : gauche, - cliquer sur OK. CSS obtenu : #gauche { float: left; width: 365px; } 12. Dans le panneau Styles CSS, choisir le style #gauche, faire un clic droit et choisir Dupliquer dans le menu déroulant, dans la boîte de dialogue, taper #droite dans le champ sélecteur, cliquer sur OK. #droite CSS obtenu : #droite { float: right; width: 365px; } 11
12 13. Dans le panneau style CSS, choisir le style #droite, dans le volet Propriétés (au-dessous), modifier la valeur float : right. 14. Sélectionner le texte de remplissage Placez ici le contenu de id "principal" et appuyer sur Suppr. 15. Dans la barre Insérer, catégorie Commun, cliquer sur Insérer la balise Div Dans la boîte de dialogue Insérer la balise Div : - Insérer : Après le début de la balise <div id="principal">, - Dans la liste ID : gauche, Code HTML obtenu : gauche <div id="principal"> <div id="principal"> <div id="gauche"> Placez ici le contenu de id "gauche" <div id="piedpage"> 16. Dans la barre Insérer, catégorie Commun, cliquer sur Insérer la balise Div Dans la boîte de dialogue Insérer la balise Div : - Insérer : Après la balise <div id="banniere">, - Dans la liste ID : menu, droite <div id="gauche"> Code HTML obtenu : <div id="principal"> <div id="gauche"> Placez ici le contenu de id "gauche" <div id="droite"> Placez ici le contenu de id "droite" <div id="piedpage"> Les zones gauche et droite (respectivement flottante à gauche et à droite) étant définies chacune avec une largeur de 365 pixels, l espace restant entre elles est donc de 30 pixels soit 760 (365 x 2). 12
13 E. Insérer des espaces réservés : Pour faciliter la visibilité de la mise en page avant utilisation, on peut ajouter des espaces réservés plus visuels : - espace réservé pour les images, - texte de remplissage pour les zones de texte. 1. Sélectionner le texte de remplissage Placez ici le contenu de id "banniere" et appuyer sur Suppr. 2. Dans la barre Insérer, catégorie Commun, liste déroulante Image cliquer sur Espace réservé pour l image 3. Dans la boîte de dialogue Espace réservé pour l image : - Nom : banniere, - Largeur : 760, - Hauteur : 80, - cliquer sur OK 4. Sélectionner le texte de remplissage Placez ici le contenu de id "menu" et appuyer sur Suppr. 5. Dans la barre Insérer, catégorie Commun, liste déroulante Image cliquer sur Espace réservé pour l image 6. Dans la boîte de dialogue Espace réservé pour l image : - Nom : menu, - Largeur : 760, - Hauteur : 28, - cliquer sur OK menu 28 L espace réservé menu peut être créé avec Fireworks sous forme de menu image découpé avec des tranches pour le convertir en tableau HTML. Ce tableau peut être ensuite importé dans le <div id="menu"> directement et conservera l assemblage prévue dans Fireworks. 13
14 Le placement du texte de remplissage peut se faire de la façon suivante. 7. Avec l outil Texte, placer le curseur dans le texte Placez ici le contenu de id "gauche", dans la barre sélecteur de balise (en-dessous de la fenêtre de mise en page), sélectionner <div#gauche > appuyer sur la touche de déplacement à gauche pour déplacer le curseur avant la balise <div#gauche > Taper le texte Titre principal et dans l inspecteur de propriétés (en bas), choisir Format : En-tête 1 8. Sélectionner le texte de remplissage Placez ici le contenu de id "gauche" et appuyer sur Suppr, Taper Sous-titre et dans l inspecteur de propriétés, choisir Format : En-tête 2, Appuyer sur la touche Entrée pour créer un retour à la ligne. 9. Ouvrir l aide de Dreamweaver, sélectionner un paragraphe de texte au hasard dans un chapitre le copier <Ctrl C> et le coller à la suite du Sous-titre <Ctrl V> 10. Le curseur étant placé dans la zone gauche, tout sélectionner <Ctrl A> puis copier <Ctrl C> Se placer dans la zone droite et coller <Ctrl V> Dans Dreamweaver, la commande Sélectionner tout <Ctrl-A> sélectionne tout le contenu du conteneur où l on se trouve. Ici il s agit d un <div> mais cela fonctionne dans la cellule d un tableau, dans un cadre Si on utilise la commande <Ctrl-A> plusieurs fois, on monte d un niveau chaque fois : 1. le contenu du <div#gauche>, 2. le <div#gauche>, 3. le contenu du <div#principal>, 4. le <div#principal>, 5. En dernier lieu, après avoir remonté toute la série d imbrications, on sélectionne toute la page. 11. Pour la zone piedpage, le texte déjà présent est suffisamment explicite mais on peut prévoir un texte selon la destination prévue pour cette zone. Au final, l écran de Dreamweaver devrait ressembler à l image ci-dessous, On a ainsi un aperçu de la mise en page du futur site. 14
15 Schéma des zones imbriquées Chaque ID ( commence par #, lors de la définition du style CSS ) est unique dans la page. Le conteneur fixe la largeur et toutes les zones à l intérieur (sauf gauche et droite) remplissent celui-ci en largeur. Les zones gauche et droite sont flottante dans la zone principal, l une à gauche, l autre à droite et chacune a une largeur fixe qui correspond à la moitié de la largeur du conteneur, l espace entre les deux étant déduit. Les zones gauche et droite peuvent être dissymétriques ( plus large à gauche ou plus large à droite ). <body> style pour la balise body ID : #conteneur (largeur : 760 pixels, centré) ID : #entete ID : #banniere (hauteur fixée pour image) ID : #menu (hauteur fixée pour menu image ou texte) ID : #principal ID : #gauche ID : #droite ID : #piedpage 15
16 F. Exporter les styles CSS : La mise en page qui vient d être créée contient les styles dans son propre code. Pour l utilisation dans un site de production avec plusieurs pages utilisant le même modèle, il est recommandé d utiliser une feuille de style CSS externe qui pourra être partagée par toutes les pages du site. Ainsi les modifications seront plus rapides. On peut donc déplacer les styles créés précédemment dans un fichier externe. 1. Dans le panneau Styles CSS, sélectionner le premier style (body), appuyer sur la touche Maj et sélectionner le dernier style (#droite) 2. Dans le menu Options du panneau Styles CSS, choisir Déplacer les règles CSS 3. Dans la boîte de dialogue Déplacer dans une feuille de style externe, sélectionner l option Déplacer les règles dans : Nouvelle feuille de style, cliquer sur OK 4. Dans la boîte de dialogue Enregistrer sous, choisir la destination et le nom du fichier *.css (de préférence dans un dossier style, dans le même dossier que la page HTML). 5. Dans le panneau Styles CSS, sélectionner la première ligne ( <style>), appuyer sur la touche Suppr. Dreamweaver a déplacé les styles CSS de la balise <head>, les lignes <style type="text/css"> / </style> vers la nouvelle feuille de style externe et créé le lien dans le code HTML : dans la balise <head>, la ligne : <link href="style/style.css" rel="stylesheet" type="text/css" /> Chaque page doit avoir un titre pour la différencier des autres pages du site et, lors de la mise en ligne du site, pour permettre aux moteurs de recherche d afficher un nom différent pour chaque page référencée. Dans la barre d outils Document, dans le champ Titre, entrer un nom pour la page en cours 16
17 G. Ajout et utilisation de styles CSS : La mise en page évoluée va nécessiter de créer de nouveaux styles CSS pour les titres, sous-titres et paragraphes. L utilisation du panneau Propriétés (en bas) permet de modifier les formats du texte ou des objets de la page en cours de création mais ces modifications n affectent que la page en cours. Si l on souhaite conserver les styles CSS pour appliquer à plusieurs zones de la page ou à d autres pages, il vaut mieux appliquer des styles qui seront stockés dans une feuille de styles externe. Le réglage de base de Dreamweaver pour utiliser les styles CSS se fait dans les préférences : - Menu Edition Préférences, - Catégorie : Général, - cocher la case Options d édition : Utiliser des balises CSS au lieu de balises HTML, - cliquer sur OK. Pour appliquer le style CSS à plusieurs reprises dans la page, on utilise une classe (lors de la définition, le nom commence par un point) comme type de sélecteur. On peut stocker tous les styles dans la même feuille de style ou alors créer plusieurs feuilles de styles en séparant l utilisation que l on souhaite faire des groupes de styles (affichage, impression ). Avec plusieurs feuilles de styles, plusieurs liens seront établis avec la page HTML. Sur la même page, en utilisant une feuille de style pour l affichage (screen) et une feuille de style pour l impression (print), on peut définir des règles de styles différentes pour l affichage et l impression. Les styles CSS portent les mêmes noms dans les 2 feuilles de style et le paramètre media sélectionne celui qui est actif. <link href="style/ecran.css" rel="stylesheet" type="text/css" media="screen" /> <link href="style/imprime.css" rel="stylesheet" type="text/css" media="print" /> Exemple : le texte peut être en blanc sur fond noir à l affichage écran et noir sur fond blanc à l impression..titre { } ecran.css color: #FFFFFF; background-color: #000000; font-family: Verdana; font-size: 16px;.titre { } imprime.css color: #000000; font-family: Arial; font-size: 14px; Le code HTML reste le même : <p class="titre>titre du paragraphe</p> 17
18 Création de nouveaux styles : On peut utiliser 2 méthodes : 1. Utilisation du panneau Propriétés (en bas) : Sélectionner la zone de texte à modifier, Dans le panneau Propriétés, changer Format, Police ou Taille Dreamweaver crée un style : dans la liste Style, un nouveau style apparaît ainsi que dans le panneau Styles CSS (classe : nom commence par un point) Le nouveau style est créé avec un nom StyleXX et est stocké en local dans le code HTML de la page : - dans le panneau Styles CSS, choisir le nouveau style, - clic droit Renommer la classe Nouveau nom : utiliser un nom explicite Le style est également changé dans le code de la page 2. Création d un nouveau style CSS : Pour le déplacer dans la feuille de style externe : - le sélectionner, - le déplacer vers la feuille de style dans la liste des styles présents. Dans le panneau Styles CSS, choisir Nouvelle règle de CSS (en bas) Dans la boite de dialogue Nouvelle règle de CSS, choisir : - Type de sélecteur : Classe ( ou balise pour l appliquer, par exemple, à la balise <h1> ) - Sélecteur : nom débutant par un point (classe) ou chercher balise dans la liste (balise) - Définir dans : choisir le fichier feuille de style déjà utilisé ou Nouveau fichier feuille de style. Pour l appliquer à la zone de texte : - Sélectionner le texte, - Dans le panneau Propriétés, dans la liste Style : choisir le style, ou - sélectionner le contenant du texte <p>, <div#gauche> - clic droit Définir classe et choisir dans la liste Le choix de type sélecteur : Balise permet de redéfinir les propriétés qui seront appliquées chaque fois que l on utilisera cette balise. <h1> : en-tête 1, choisie souvent pour les titres - <h2> : en-tête 2, choisie souvent pour les sous-titres <p> : paragraphe, choisie souvent pour les contenus de paragraphes mais également pour la balise <a> : lien, que l on pourra personnaliser : choix Avancé (pseudo-classe) : - a:link : lien visible, - a:hover : lien survolé, - a:visited : lien après première fois utilisée, - a:active : lien actif, sélectionné par une tabulation : focus actif. 18
19 Lier une feuille de styles : Dans le panneau Styles CSS, choisir Attacher une feuille de style (en bas) Dans la boîte de dialogue Ajouter une feuille de style externe : - Fichier/URL : choisir ou cliquer sur Parcourir, - Ajouter sous : cocher lien, - Média : choix de l utilisation prévue (screen : affichage, print : impression ) Pour ajouter l option Média à un style, il est plus simple de supprimer le lien et de le refaire : - sélectionner le nom du fichier style dans le panneau Styles CSS, - appuyer sur Suppr, - utiliser la procédure ci-dessus pour lier la feuille de style en précisant l option Média. Dupliquer une feuille de styles : Dans le panneau Fichier, sélectionner le nom du fichier style de départ (ecran.css), Clic droit, choisir Edition Dupliquer, Renommer copie de ecran.css imprime.css Lier ensuite la nouvelle feuille de style (comme ci-dessus) Ne pas oublier de préciser l option Média : screen ou print Visualiser l option Média choisie : Dans le panneau Styles CSS, à côté du nom du fichier style, apparaît entre parenthèses : 19
20 Quelques correspondances CSS / HTML (1/3) CSS Définition CSS HTML Propriétés Utilisation font-family Type Police <font face> Police Police : Arial, Verdana (polices web) font-size Type Taille <font size> Taille Taille police : en pixels ou em font-style : italic Type Style <i> ou <em> I italique font-weight : bold Type Epaisseur <b> ou <strong> B gras text-decoration :underline Type Décoration Souligné <u> Non souligné text-decoration : none Type Décoration Aucune Non Non Empêche soulignement <a> line-height : (valeur) Type Hauteur de ligne Non Non Hauteur de ligne de texte color Type Couleur <font color> Couleur du texte couleur du texte background-color : #FFFFFF Arrière-plan Couleur arrièreplan <body bgcolor> Propriétés de la page Couleur du fond de page background-image : url(xx.jpg) Arrière-plan Image arrièreplan <body background> Propriétés de la page Image de fond de page background-repeat : no-repeat Arrière-plan Répétition Non Non Pas de répétition de l image de fond background-repeat : repeat Arrière-plan Répétition Non Non Répétition de l image en hauteur et largeur background-repeat : repeat-x Arrière-plan Répétition Non Non Répétition de l image en largeur background-repeat : repeat-y Arrière-plan Répétition Non Non Répétition de l image en hauteur background-attachment : fixed Arrière-plan Pièce jointe Non Non L image de fond ne défile pas background-position : center Arrière-plan Position horizontale Non Non L image de fond est centrée dans la largeur background-position : left Arrière-plan Position horizontale Non Non L image de fond est alignée à gauche background-position : right Arrière-plan Position horizontale Non Non L image de fond est alignée à droite background-position : top Arrière-plan Position verticale Non Non L image de fond est alignée en haut background-position : bottom Arrière-plan Position verticale Non Non L image de fond est alignée en bas background-position : center center Arrière-plan Position verticale Arrière-plan Position horizont. Non Non L image de fond est alignée au centre (largeur / hauteur) text-align : center Bloc Alignement du texte <balise align="center"> Centrer le texte dans un conteneur text-align : left Bloc Alignement du texte <balise align="left"> Aligner le texte à gauche dans un conteneur text-align : right Bloc Alignement du texte <balise align="right"> Aligner le texte à droite dans un conteneur text-align : justify Bloc Alignement du texte <balise align="justify"> Justifier le texte dans un conteneur vertical-align: sub Bloc Alignement vertical <sub> Non Texte en indice vertical-align: super Bloc Alignement vertical <sup> Non Texte en exposant
21 Quelques correspondances CSS / HTML (2/3) CSS Définition CSS HTML Propriétés Utilisation width : 760px Boîte Largeur <conteneur with="760 px"> Largeur Largeur d'un conteneur (pixels ou %) height : 80 px Boîte Hauteur <conteneur height="80 px"> Hauteur Hauteur d'un conteneur (pixels ou %) float : left (right ou center) Boîte Flottante Non Non Conteneur flottant dans autre conteneur padding : Xpx Boîte Remplissage Idem pour tous padding-left : Xpx Boîte Remplissage Gauche Non Non padding-right : Xpx Boîte Remplissage Droite Non Non padding-top : Xpx Boîte Remplissage Haut Non Non padding-bottom : Xpx Boîte Remplissage Bas Non Non margin : Xpx Boîte Marge Idem pour tous margin-left : Xpx Boîte Marge Gauche Non Non margin-right : Xpx Boîte Marge Droite Non Non margin-top : Xpx Boîte Marge Haut Non Non margin-bottom : Xpx Boîte Marge Bas Non Non clear : both Boîte Effacer les deux Non Non Non Non Non Non Espace de remplissage intérieur autour (marge autour du contenu d'un conteneur) Espace de remplissage intérieur gauche (marge intérieure gauche) Espace de remplissage intérieur droite (marge intérieure droite) Espace de remplissage intérieur haut (marge intérieure en haut) Espace de remplissage intérieur bas (marge intérieure en bas) Espace extérieur autour (marge autour du conteneur) Espace extérieur à gauche (marge extérieure gauche) Espace extérieur à droite (marge extérieure droite) Espace extérieur au dessus (marge extérieure au dessus) Espace extérieur au dessous (marge extérieure au dessous) Dans nouveau conteneur, supprime les positions flottantes des conteneurs précédents border-top-style : solid Bordure Style Haut Non (bordure tout autour) Non Bordure en haut d'un conteneur border-right-style : solid Bordure Style Droite Non (bordure tout autour) Non Bordure à droite d'un conteneur border-left-style : solid Bordure Style Gauche Non (bordure tout autour) Non Bordure à gauche d'un conteneur border-bottom-style : solid Bordure Style Bas Non (bordure tout autour) Non Bordure en bas d'un conteneur border-top-style : none Bordure Style Haut Non (bordure tout autour) Non Pas de bordure en haut d'un conteneur border-right-style : none Bordure Style Droite Non (bordure tout autour) Non Pas de bordure à droite d'un conteneur border-left-style : none Bordure Style Gauche Non (bordure tout autour) Non Pas de bordure à gauche d'un conteneur border-bottom-style : none Bordure Style Bas Non (bordure tout autour) Non Pas de bordure en bas d'un conteneur border-top-width : Xpx Bordure Largeur Haut Non (bordure tout autour) Non Epaisseur de bordure en haut d'un conteneur border-right-width : Xpx Bordure Largeur Droite Non (bordure tout autour) Non Epaisseur de bordure à droite d'un conteneur border-left-width : Xpx Bordure Largeur Gauche Non (bordure tout autour) Non Epaisseur de bordure à gauche d'un conteneur border-bottom-width : Xpx Bordure Largeur Bas Non (bordure tout autour) Non Epaisseur de bordure en bas d'un conteneur
22 Quelques correspondances CSS / HTML (3/3) CSS Définition CSS HTML Propriétés Utilisation border : Xpx Non <conteneur border="x px"> Bordure Epaisseur de bordure tout autour d'un conteneur border-top-color : # Bordure Couleur Haut Non (bordure tout autour) Non Couleur de bordure en haut d'un conteneur border-right- color : # Bordure Couleur Droite Non (bordure tout autour) Non Couleur de bordure à droite d'un conteneur border-left- color : # Bordure Couleur Gauche Non (bordure tout autour) Non Couleur de bordure à gauche d'un conteneur border-bottom- color : # Bordure Couleur Bas Non (bordure tout autour) Non Couleur de bordure en bas d'un conteneur border-color : # Non <conteneur bordercolor > Couleur contour Couleur de bordure autour d'un conteneur list-style-type : disc Liste Type disque <li> Puce avant paragraphe list-style-type : circle Liste Type cercle <ul> o Puce avant paragraphe list-style-type : decimal Liste Type décimal <ol> Puce numérotée avant paragraphe list-style-type : none Liste Type aucune - Non Pas de puce numérotée avant paragraphe Cette liste n'est pas limitée. Il existe de nombreuses règles CSS. Certaines sont accessibles par la boîte de dialogue de Dreamweaver, d'autres ne le sont pas. Le navigateur Safari (version 4) ajoute de nouvelles possibilités de styles avec son moteur webkit intégré, certaines permettent même des animations. Mais il est le seul à les accepter, pour l'instant.
.. 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
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
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
JOOMLA 1.5 avancé SUPPORT DE COURS + annexe
JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page
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?
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
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...
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
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
1 CRÉER UN TABLEAU. IADE Outils et Méthodes de gestion de l information
TP Numéro 2 CRÉER ET MANIPULER DES TABLEAUX (Mise en forme, insertion, suppression, tri...) 1 CRÉER UN TABLEAU 1.1 Présentation Pour organiser et présenter des données sous forme d un tableau, Word propose
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
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
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
Media queries : gérer différentes zones de visualisation
2 Media queries : gérer différentes zones de visualisation Comme nous l avons vu au chapitre précédent, les CSS3 sont constituées de modules. Media queries est simplement l un d eux. Ce module permet d
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le
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
SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE
SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SITE INTERNET DE L ASSOCIATION Diapositive 1 RAPPORT DE PROJET Site internet de l association INTRODUCTION 1) Je m appelle Léonard STRONG. 2) Oral de présentation
qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz mqwertyuiopasdfghjklzxcvbnmqwert
qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz INITIATION à Word 2007 xcvbnmqwertyuiopasdfghjklzxcvbn Cours informatiques Année 2009/2010 mqwertyuiopasdfghjklzxcvbnmqwert
1. La notion de cascade
HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir
FICHE 1 : ENTRER DANS LE LOGICIEL POWERPOINT
FICHE 1 : ENTRER DANS LE LOGICIEL POWERPOINT Lorsque Windows, apparaît, cliquez sur l icône Microsoft Office PowerPoint 2003. ou allez dans Démarrer / Programmes / Microsoft Office / Microsoft Office PowerPoint
Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design
Grilles Fluides CSS CREATION D UNE GRILLE FLUIDE Grille fluide Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design WWW.SUTTERLITY.FR
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,
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
PRISE EN MAIN D UN TABLEUR. Version OPEN OFFICE
PRISE EN MAIN D UN TABLEUR Version OPEN OFFICE Prise en main d un tableur page 2 1. L utilisation de la souris Pour faire fonctionner un tableur, on utilise le clavier mais aussi la souris. Rappelons,
É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
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
Manuel de mise en page de l intérieur de votre ouvrage
Manuel de mise en page de l intérieur de votre ouvrage Merci de suivre strictement les recommandations de ce manuel qui a pour but de vous aider à préparer un livre dont la qualité de mise en page est
Cours pratique Excel. Dans chacune des feuilles, les donnés sont déjà entrées afin de gagner du temps.
Cours pratique Excel Présentation du classeur cours.xls C est un classeur qui contient 7 feuilles Liste de personnes Calculs simples Solde Listes Auto Relatif Absolu Formats Paye Cours AFM Dans chacune
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?](/thumbs/18/825045.jpg "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
Centre de formation: Collège IBN BASSAM - TEMARA. Ce cours est proposé par le professeur d informatique:
Centre de formation: Collège IBN BASSAM - TEMARA Ce cours est proposé par le professeur d informatique: ABDALLAH RAKKANE Chapitre Page Initiation au système d exploitation: Windows. 2 Initiation au Traitement
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
Guide de réalisation d une campagne e-mail marketing
Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La
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...
SOMMAIRE. Présentation assistée sur ordinateur. Collège F.Rabelais 1/10
/0 SOMMAIRE. Lancer le logiciel. Mettre un titre dans une diapositive et du texte. Ajouter une diapositive 4. Créer une diapositive avec une image 5. Créer une diapositive avec un graphique 6. Créer une
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
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
Avant-propos FICHES PRATIQUES EXERCICES DE PRISE EN MAIN CAS PRATIQUES
Avant-propos Conçu par des pédagogues expérimentés, son originalité est d être à la fois un manuel de formation et un manuel de référence complet présentant les bonnes pratiques d utilisation. FICHES PRATIQUES
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
Cours Excel : les bases (bases, texte)
Cours Excel : les bases (bases, texte) La leçon 1 est une leçon de base qui vous permettra de débuter avec Excel, elle sera fort utile pour les prochaines leçons. Remarque : à chaque fois qu il est demandé
Formation tableur niveau 1 (Excel 2013)
Formation tableur niveau 1 (Excel 2013) L objectif général de cette formation est de repérer les différents éléments de la fenêtre Excel, de réaliser et de mettre en forme un tableau simple en utilisant
VOCABULAIRE LIÉ AUX ORDINATEURS ET À INTERNET
VOCABULAIRE LIÉ AUX ORDINATEURS ET À INTERNET Brancher / débrancher l ordinateur de la prise Allumer / éteindre l ordinateur : pour allumer ou éteindre l ordinateur vous devez appuyer sur le bouton On/off
Tutoriel. Votre site web en 30 minutes
Tutoriel Votre site web en 30 minutes But du tutoriel Nous allons vous présenter comment réaliser rapidement votre site avec Web Creator Pro 6 en vous basant sur l utilisation des modèles fournis avec
Débuter avec Excel. Excel 2007-2010
Débuter avec Excel Excel 2007-2010 Fabienne ROUX Conseils & Formation 10/04/2010 TABLE DES MATIÈRES LE RUBAN 4 LE CLASSEUR 4 RENOMMER LES FEUILLES DU CLASSEUR 4 SUPPRIMER DES FEUILLES D UN CLASSEUR 4 AJOUTER
COURS BARDON - EXCEL 2010
COURS BARDON - EXCEL 2010 Sommaire EXCEL 2010 - INTRODUCTION 3 FONDAMENTAUX OFFICE 2010 3 EXCEL 3 1. L ECRAN 3 2. BARRE D ETAT : CALCULS ET MODES D AFFICHAGE 7 3. PARAMETRAGE DU LOGICIEL 7 Chapitre 1 GESTION
REPUBLIQUE ALGERIENNE DEMOCRATIQUE ET POPULAIRE MINISTERE DE LA FORMATION PROFESSIONNELLE. Microsoft. Excel XP
IFP Birkhadem Alger Rue des trois frères Djillali 1 REPUBLIQUE ALGERIENNE DEMOCRATIQUE ET POPULAIRE MINISTERE DE LA FORMATION PROFESSIONNELLE INSTITUT DE LA FORMATION PROFESSIONNELLE DE BIRKHADEM Initiation
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
RACCOURCIS CLAVIERS. DEFINITION : Une «combinaison de touches» est un appui simultané sur plusieurs touches.
S Vous n aimez pas la souris Les raccourcis clavier sont là pour vous faciliter la vie! INTRODUCTION : Vous avez du mal à vous habituer à la manipulation de la souris Des solutions existent : les raccourcis
Tutoriel BLOGGER. Pour vous donner une idée, voici un exemple de blog : http://formationlaragne.blogspot.fr/
Tutoriel BLOGGER Blogger est un outil Google gratuit de publication de blogs qui permet de partager du texte, des photos et des vidéos. C est un outil simple, bénéficiant du référencement de Google, ce
Table des matières A. Introduction... 4 B. Principes généraux... 5 C. Exemple de formule (à réaliser) :... 7 D. Exercice pour réaliser une facture
Excel 2007 -2- Avertissement Ce document accompagne le cours qui a été conçu spécialement pour les stagiaires des cours de Denis Belot. Le cours a été réalisé en réponse aux diverses questions posées par
Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons
Guide d'utilisation OpenOffice Calc AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons 1 Table des matières Fiche 1 : Présentation de l'interface...3 Fiche 2 : Créer un nouveau classeur...4
2 LES BASES DU HTML 19 Qu est-ce que le HTML? 20 De quand date le HTML? 20 Écrire son propre code HTML 22
SOMMAIRE INTRODUCTION La collection Classroom in a Book TinyUrL Conditions requises Installation du programme Copie des fichiers Classroom in a Book ordre recommandé pour les leçons Démarrage instantané
TUTORIEL IMPRESS. Ouvrir Impress cocher «présentation vierge», «suivant» cocher «écran», «suivant» cocher «standard», «créer»
TUTORIEL IMPRESS Ouvrir Impress cocher «présentation vierge», «suivant» cocher «écran», «suivant» cocher «standard», «créer» Une page impress s'ouvre : Le volet gauche contiendra toutes les diapositives
BUREAUTIQUE. 1 Journée. Maîtriser les fonctions de base du logiciel
BUREAUTIQUE Maîtriser les fonctions de base du logiciel Premiers pas dans Word - Présentation de l interface - Mode affichage écran - Méthode de Sélection, de Déplacement - La gestion crante des documents
Mon aide mémoire traitement de texte (Microsoft Word)
. Philippe Ratat Mon aide mémoire traitement de texte (Microsoft Word) Département Ressources, Technologies et Communication Décembre 2006. Sommaire PRÉSENTATION DU DOCUMENT 1 Objectif principal 1 Deux
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
Activité 11 : Nuage de points ou diagramme de dispersion
Activité 11 : Nuage de points ou diagramme de dispersion Un nuage de points, ou diagramme de dispersion, représente des coordonnées dans un plan cartésien. Chaque point dans le plan représente deux quantités.
Créer un tableau avec LibreOffice / Calc
Créer un tableau avec LibreOffice / Calc Réaliser des tableaux LibreOffice / Calc permet de créer des tableaux facilement en utilisant les cellules. En premier lieu, il faut prévoir le nombre de colonnes
Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia -
UVERSITE A. MIRA - BEJAIA Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia - Prise en main de CMS Joomla Exploitation des ressources Recommandations et Règles
GUIDE Excel (version débutante) Version 2013
Table des matières GUIDE Excel (version débutante) Version 2013 1. Créer un nouveau document Excel... 3 2. Modifier un document Excel... 3 3. La fenêtre Excel... 4 4. Les rubans... 4 5. Saisir du texte
Date M.P Libellé Catégorie S.Catégorie Crédit Débit Solde S.B
Excel : Réalisation d un classeur Compta Saisir les étiquettes Renommer la première feuille Compta Laisser la première ligne vide et sur la deuxième ligne saisir les étiquettes Se placer sur A2 et saisir
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
3 : créer de nouveaux onglets dans Netvibes Cliquer sur le bouton «+» et renommer le nouvel onglet (par exemple Encyclopédies en ligne)
Créer son portail d information privé et public avec Netvibes 1 : création d un compte : 2 2 : nommer votre espace Netvibes personnel 2 3 : créer des onglets pour classer les informations en ligne : 2
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
Comment insérer une image de fond?
COMMUNICATION VISUELLE Mise en page à l aide d un traitement de texte Comment insérer une image de fond? Image Plein papier ou au Format utile qu est-ce que cela veut dire? La mise en page d un document
2013 Pearson France Adobe Illustrator CC Adobe Press
Au cours de cette démonstration d Adobe Illustrator CC, vous découvrirez les nouvelles fonctionnalités du logiciel, comme les outils de retouche et la sélection du texte, ainsi que d autres aspects fondamentaux
La Clé informatique. Formation Excel XP Aide-mémoire
La Clé informatique Formation Excel XP Aide-mémoire Septembre 2005 Table des matières Qu est-ce que le logiciel Microsoft Excel?... 3 Classeur... 4 Cellule... 5 Barre d outil dans Excel...6 Fonctions habituelles
Comment mettre en page votre livre
GUIDE - ImprimermonLivre.com Comment mettre en page votre livre www.imprimermonlivre.com 1 V. 20131125 Conseils pour la mise en page de votre ouvrage L objectif de ce guide est de vous aider à réaliser
JAHIA 6. Création et modification de sites web UniNE
JAHIA 6 Création et modification de sites web UniNE Janvier 2012 TABLE DES MATIÈRES 1 MODIFIER UN SITE : PRINCIPES DE BASE... 1 1.1 ADMINISTRATEUR DU SITE... 1 1.2 LOGIN (AUTHENTIFICATION)... 1 2 LES
Préambule. Sommaire. Ouverture de votre Service Client. Configuration de La Solution Crypto. Activation. Paramètres PagesIMMO
Préambule La Solution Crypto offre en standard la possibilité de publier vos annonces et de les diffuser sur Internet, sur votre site Web ou sur différents serveurs d annonces, comme le décrit en détail
AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 bij@agasc.fr www.agasc.fr. Word: Les tableaux.
Word: Les tableaux Introduction 6 ième partie Il est préférable par moments de présenter de l'information sous forme de tableau. Les instructions qui suivent démontrent comment créer un tableau et comment
Table des matières & Index Partie première : Table des matières Jean-Yves Lucca
& Index Partie première : Jean-Yves Lucca Première édition du 14 novembre 2005 Version du 10 mai 2012 réalisée avec AOO 3.4.0 Le site du Forum francophone OpenOffice.org http://user.services.openoffice.org/fr/forum/
Atelier Formation Pages sur ipad Pages sur ipad
Pages sur ipad 1/43 Table des matières Atelier Formation Pages sur ipad Introduction à Pages 3 Créer ou ouvrir un document 3 Créer ou ouvrir un document 3 Textes et images du modèle 4 Remplacer du texte
FORMATION EXCEL 2010 Groupe LUCAS LOGICIA
FORMATION EXCEL 2010 Groupe LUCAS LOGICIA 1 TABLE DES MATIERES 1. L INTERFACE... 3 2. LES OPTIONS D AFFICHAGE... 5 3. LES MODELES... 8 4. LES CLASSEURS... 9 5. GESTION DES CELLULES... 14 6. SAISIE DES
DÉFINITION DE LA NEWSLETTER : OUVERTURE DU LOGITIEL ETARGET
DÉFINITION DE LA NEWSLETTER : La newsletter est un OUVERTURE document qui DU informe LOGITIEL le ETARGET client sur l'actualité, sur les nouveautés ou sur un sujet particulier. Elle est souvent rédigée
Troisième projet Scribus
Sommaire 1. Réponse à la question du deuxième projet... 2 2. Présentation du projet... 2 2.1. Organiser son travail... 2 3. Réalisation... 2 3.1. Préparation du texte... 2 3.1.1. Les styles «Dys»... 3
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
Comment utiliser la feuille de style «CMLF2010.dot»
Comment utiliser la feuille de style «CMLF2010.dot» TELECHARGER LA FEUILLE DE STYLE...1 OUVRIR UN NOUVEAU DOCUMENT WORD...2 ATTACHER LA FEUILLE DE STYLE AU DOCUMENT...2 AFFICHER LES STYLES DISPONIBLES...2
Alain DI MAGGIO Mise à jour sur le site 11/01/10 http://www.admexcel.com
Alain DI MAGGIO Mise à jour sur le site 11/01/10 http://www.admexcel.com TABLE DES MATIERES L UTILISATION DES RUBANS... 3 LE CLASSEUR... 3 RENOMMER LES FEUILLES DU CLASSEUR... 3 SUPPRIMER DES FEUILLES
Utiliser le logiciel Photofiltre Sommaire
Utiliser le logiciel Photofiltre Sommaire 1. Quelques mots sur l image 2. Obtenir des images numériques 3. Le tableau de bord de logiciel PhotoFiltre 4. Acquérir une image 5. Enregistrer une image 6. Redimensionner
INITIATION A EXCEL 2007. Année 2009 2010
Qwertyuiopasdfghjklzxcvbnmqwertyu iopavbnmqwertyuiopasdfghjklzxcvbn mqwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasdf ghjklzxcvbnmqwertyuiopasdfghjklzxc vbnmqwertyuiopasdfghjklzxcvbnmqw
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.
FICHE 1 : LANCER PUBLISHER
FICHE 1 : LANCER PUBLISHER Double-cliquez sur l'icône de Publisher 2003., ou cliquez sur Démarrer et sélectionnez Microsoft Publisher Si vous n'avez pas encore installé Publisher, insérez le CD-ROM d Office
Pages 08 Guide de l utilisateur
Pages 08 Guide de l utilisateur K Apple Inc. 2008 Apple Inc. Tous droits réservés. Ce manuel est soumis aux lois sur le droit d auteur et ne peut être copié, totalement ou partiellement, sans le consentement
Numbers sur ipad. Atelier Formation Numbers sur ipad. [Notes extraitres de l'aide en ligne]
![Numbers sur ipad. Atelier Formation Numbers sur ipad. [Notes extraitres de l'aide en ligne]](/thumbs/23/1774486.jpg "Numbers sur ipad. Atelier Formation Numbers sur ipad. [Notes extraitres de l'aide en ligne]")
Numbers sur ipad [Notes extraitres de l'aide en ligne] Table des matières Atelier Formation Numbers sur ipad Introduction à Numbers 4 Créer ou ouvrir une feuille de calcul 4 Créer ou ouvrir une feuille
INTERWRITE Workspace
INTERWRITE Workspace Prêt à fonctionner 1. Allumer le tableau blanc (interrupteur sur le côté). 2. Allumer le vidéoprojecteur (voyant vert). 3. Brancher sur l ordinateur : le câble ou la clé bluetooth
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
PAGE 1. L écran du logiciel d Open Office Draw. Barre de menu: Les commandes du logiciel
PAGE L écran du logiciel d Open Office Draw Nom du document : Nom d enregistrement Barre de mise forme: Ligne, couleurs, fond,... Barre de menu: Les commandes du logiciel Barre d outils: Les boutons de
FICHE 17 : CREER UN SITE WEB
Publisher permet de créer des sites web. FICHE 17 : CREER UN SITE WEB Créez une nouvelle composition et choisissez Site web. Vous avez le choix entre utiliser le générateur rapide de site web, créer un
Normes graphiques / Sigma Assistel / Site Internet version 1.0 / 12.11.03
version 1.0 / 12.11.03 CHOIX DE LANGUE / MESURES & GABARIT NORMES GRAPHIQUES & TYPOGRAPHIQUES 131 pixels La largeur totale du gabarit est de, 2 A ENTÊTE ET MENUS / MESURES & GABARIT NORMES GRAPHIQUES &
Module 1 : Tableau de bord Excel * 2010 incl.*
Module 1 : Tableau de bord Excel * 2010 incl.* 1.0 Introduction Excel nous aide à mieux comprendre les données en les plaçant dans des cellules (réparties en lignes et en colonnes) et au moyen de formules
Université Bordeaux 1. Formation Excel 2007. Initiation. Hanquiez Vincent, UMR 5805-EPOC
Université Bordeaux 1 Formation Excel 2007 Initiation Hanquiez Vincent, UMR 5805-EPOC PREAMBULE Ce fascicule de formation a été élaboré à partir des cours Bardon : Bardon. Accueil, Word, Excel, Powerpoint,
EVOLUTION 7.1 Déroulement DREAM INFO 1 Dossier 23 Ciel Gestion Commerciale.
1. Mission 1 : Créer la société et faire son paramétrage :...3 1.1. Création d un nouveau dossier :...3 1.2. Paramétrage des Barres d outils :...6 1.3. Paramétrage général de la Gestion Commerciale :...6
INSERER DES OBJETS - LE RUBAN INSERTION... 3 TABLEAUX
TABLE DES MATIERES Livret Utilisateur Excel 2007 Niveau 2 INSERER DES OBJETS - LE RUBAN INSERTION... 3 TABLEAUX... 4 Les tableaux croisés dynamiques... 4 Création d un tableau croisé... 5 Comparer des
UN SITE WEB RESPONSIVE EN UNE HEURE?
UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N
Manuel de formation Spaceman 1 ère journée
Manuel de formation Spaceman 1 ère journée Table des Matières Présentation des barres d outils et des icônes...4 Présentation de l espace de travail...10 1 ère PARTIE : CONSTRUIRE LE MOBILIER...11 La gondole
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
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
Création de maquette web
Création de maquette web avec Fireworks Il faut travailler en 72dpi et en pixels, en RVB Fireworks étant un logiciel dédié à la création de maquettes pour le web il ne propose que les pixels pour le texte
Mes premiers diaporamas avec Open Office Impress?
Mes premiers diaporamas avec Open Office Impress? Courage! Tu vas y arriver 1 Sommaire I. Les bons gestes avant de lancer Open Office (page 3) II. Créer un dossier Open Office. (page 4) III. Les 5 zones