Mise en page CSS avec KompoZer
|
|
|
- Charles Olivier
- il y a 8 ans
- Total affichages :
Transcription
1 But de la leçon Mise en page CSS avec KompoZer Dans la conception actuelle de la conception des pages web, il est indispensable de séparer clairement le contenu d'un document de l'ensemble des directives qui permettent sa mise en forme. C'est ce que permettent les feuilles de styles qui font l'objet d'une autre leçon. Dans le cadre de cette leçon, nous allons apprendre à réaliser entièrement la mise en forme d'une page web à l'aide des CSS. Nous allons mettre en place une page web type simple contenant les zones habituelles : Une zone d'entête qui indique l'objet général de la page ; Une zone de menu qui permet d'accéder aux autres pages du site web ; Une zone de contenu qui présente les informations essentielles de la page ; Une zone de pied-de-page sur laquelle on trouvera, par exemple,des informations techniques (adresse de la page, date de mise à jour, adresse de l'auteur,...). Nous allons montrer que cette page type peut, avec le même contenu, se présenter de différentes façons, selon les directives de styles qui lui sont appliquées. Exemples de mises en forme possibles 1. Menu à gauche et contenu à droite. 2. Menu à droite et contenu à gauche. 3. Menu horizontal en haut de la page 1/16
2 Le document de base Chacune des illustrations ci-dessus correspond à une mise en forme différente du même texte de base indiqué ci-dessous. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=iso " http-equiv="content-type"> <link rel="stylesheet" href="styles.css" type="text/css"> <title>mise en forme CSS</title> </head> <body> <div id="conteneur"> <div id="entete"> <h1>entête</h1> </div> <div id="menu"> <h1>détails</h1> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </div> <div id="texte"> <h1>contenu</h1> <h2>le titre</h2> Le texte </div> <div id="pied"> Pied </div> </div> </body> </html> Démarre la rédaction d'une nouvelle page dans KompoZer. Ouvre l'onglet Source et remplace tout son contenu par le texte du code HTML présenté ci-dessus. Visualise le document dans l'onglet Normal. Mais vous racontez n'importe quoi! Le texte n'a absolument aucune présentation digne de ce nom. C'est même très laid. Effectivement, dans l'état actuel, il n'y a aucune présentation définie pour cette page. Nous allons la 2/16
3 construire petit à petit. Le document ne doit pas être enregistré. Un exemple impressionnant L'idée de réaliser plusieurs présentations différentes sur le même code HTML est développée à l'extrême sur le site web Zen Garden. Différents concepteurs ont utilisé exactement le même code HTML pour produire des mises en forme totalement différentes. Le secret tient dans l'utilisation de feuilles de styles et d'images différentes. Nous ne tenterons pas d'arriver au niveau atteint par les professionnels qui ont construit les multiples versions de la page web Zen Garden. Si le concept de Feuille de style CSS ne t'est pas encore familier, il vaudrait mieux d'abord te pencher sur la leçon précédente dans ce cours. Dans le cadre de cette leçon, nous allons : Concevoir plusieurs pages de présentation différente à partir du même code HTML Construire trois pages basées sur un code HTML différent Construire trois pages identiques basées sur un code HTML différent Dans le texte du code HTML de la page, les différentes zones (en-tête, menu, substance, pied) sont délimitées par Des blocs <div> Des pargraphes <p> Des titres <hx>, où x est un chiffre Quand tu as répondu aux questions et bien compris les réponses, passe à la page suivante. Concevoir le bloc principal de mise en page Comme indiqué à la page précédente, chacune des zones de la page web type est définie dans un bloc <div>. Nous allons mettre en place l'ensemble des blocs qui constituent la page. Il y aura : Un bloc " conteneur " qui permettra de positionner l'ensemble du document sur la page. Un bloc pour l'en-tête. Un bloc pour le menu. Un bloc pour le texte du document. Un bloc pour le pied de page. Chacun des ces blocs sera muni d'un " identificateur " (id) qui permettra aux logiciels (KompoZer et navigateur ensuite) de les reconnaître. Dans cette séquence, nous allons mettre le bloc principal en place et lui conférer quelques caractéristiques de style. Mise en place du bloc " conteneur " Ce bloc contiendra les autres blocs et pourra, éventuellement, être muni de directives de style spécifiques. Ouvre un nouveau document dans KompoZer. Au moment où ce document est généré, le curseur de texte se trouve sur la première ligne de la page. Nous allons y introduire un bloc vide. Dans la liste déroulante des styles de la barre d'outils de mise en forme, choisis le dernier item Conteneur générique (div). La création du bloc est matérialisée par l'apparition de la balise <div> dans la 3/16
4 barre d'état, au bas de l'écran. Clique droit sur cette balise et choisis la commande Propriétés avancées. Une boîte de dialogue à plusieurs onglets apparaît. Dans l'onglet Attributs HTML, choisir l'attribut id et lui donner la valeur conteneur. Clique sur le bouton OK. Le bloc " conteneur " est en place. En CSS, l'id permet d'identifier un bloc de manière unique. Il ne peut pas y avoir deux blocs munis du même id dans une page. Styler le bloc " conteneur " L'éditeur CSS va nous permettre de mettre ce premier bloc en forme. Un bloc <div> muni d'un " id " peut recevoir des directives de style qui lui sont propres. Dans l'éditeur CSS de KompoZer, crée une nouvelle feuille de style incorporée. La feuille de style s'appliquera à tous les médias (" all ") et portera le nom " MaFeuilleCss ". Clique sur le bouton Règle afin de créer une nouvelle règle. Il s'agit d'une règle à appliquer à tous les éléments d'un type. Le type est #conteneur Le signe # indique expressément que nous faisons référence au bloc dont l'id est conteneur. Clique sur le bouton Créer la règle de style. Dans l'onglet Bordure, Style Plein, épaisseur 1px, couleur au choix ; Dans l'onglet Boîte, choisir une largeur de 90% ; Choisir une marge gauche de 5% (de cette manière, le 4/16
5 " conteneur " sera centré sur la page) ; Dans l'onglet Fond, choisis une couleur claire. Clique sur le bouton Fermer pour terminer la définition de style pour le bloc conteneur. Le bloc conteneur est maintenant parfaitement visible sur la page. La couleur peut être différente de celle de l'illustration ci-dessous, en fonction de ton choix. Dans le bloc, indique la mention " Conteneur ". Enregistre la page : le titre est Mise en page CSS et le nom du fichier est modele.html. Conclusion Durant cette séquence, nous avons défini un bloc <div> qui sera appelé à contenir d'autres blocs (l'entête, le menu, le corps du document). Nous lui avons appliqué un certain nombre de directives de style qui rendent ce bloc bien visible. Nous allons appliquer les mêmes principes pour définir les autres blocs. Quand ton document est au point et enregistré, passe à la page suivante. Concevoir les blocs imbriqués de mise en page Comme illustré à la première page de cette leçon, quatre blocs seront imbriqués dans le conteneur défini à la page précédente. L'en-tête Le menu Le texte principal de la page Le pied de page Nous allons donc incorporer trois blocs à l'intérieur du bloc Conteneur, comme illustré ci-contre. Le Conteneur est toujours visible sur le fond. Son rôle est de fixer en place les éléments qu'il contient. 5/16
6 J'ai compris! Vous voulez nous faire jouer aux poupées russes. En quelques sortes. Mais ici, il y aura une seule grande poupée (le conteneur) qui va contenir quatre poupées (l'en-tête, le menu, le texte et le pied de page). L'en-tête Clique dans le conteneur et place le curseur de texte à droite du mot " Conteneur ". Pour des raisons indéterminées, KompoZer refuse de créer un bloc sur la première ligne du bloc Conteneur. Nous allons donc simplement créer les autres blocs sur la deuxième ligne... Passe à la ligne en frappant la touche Enter. Sur la deuxième ligne du bloc Conteneur, crée un nouveau bloc conteneur générique <div>, comme tu viens de le faire à la page précédente. Affecte-lui l'id entete (même méthode qu'à la page précédente). Dans le bloc entete, écris En-tête de manière à pouvoir aisément repérer le bloc. Le bloc entete est maintenant visible dans la barre d'état. Le bloc Menu Le bloc Menu doit être placé dans le bloc Conteneur, comme le bloc entete. Si l'on veut éviter de passer par le code source, cela demande une petite manoeuvre. Si ce n'est déjà fait, active le bloc entete en cliquant sur la balise <div> correspondante dans la barre d'état. Au clavier, frapper une fois la touche Flèche à droite. La mention du bloc entete disparaît de la barre d'état. Seule reste la mention du bloc Conteneur. Le curseur de texte est parfaitement bien placé maintenant pour insérer un nouveau bloc. En utilisant encore la même manoeuvre, insère un bloc conteneur générique <div>. Donne-lui l'id menu. Dans le bloc menu, ajoute la mention Menu de manière à pouvoir aisément repérer le bloc. Le bloc Texte Dans le bloc Conteneur, il ne reste plus qu'à insérer le bloc Texte. Active le bloc menu en cliquant sur la balise <div> correspondante dans la barre d'état. Au clavier, frapper une fois la touche Flèche à droite. La mention du bloc menu disparaît de la barre d'état. Seule reste la mention du bloc Conteneur. En utilisant encore la même manoeuvre, insère un bloc conteneur générique <div>. Donne-lui l'id texte. Dans le bloc texte, ajoute la mention Texte de manière à pouvoir 6/16
7 aisément repérer le bloc. Enregistre le travail. Le bloc de Pied-de-page Le bloc de pied-de-page peut être introduit encore une fois de la même manière. Donne-lui l'id pied. Introduis-y le texte Pied-de-page qui permettra de l'identifier aisément. Dites, moi je ne vois vraiment pas les blocs dont vous parlez depuis un moment. Tout ça nous a fait bêtement quatre lignes de texte, mais aucun bloc, à mon avis. Détrompez-vous. Si vous avez parfaitement suivi le mode opératoire, les quatre blocs sont bel et bien présents. Vérifions le travail La disposition des quatre blocs que nous venons de créer peut être visualisée par un petit coup d'oeil dans l'onglet Source. Clique sur l'onglet Source. Repère les lignes illustrées ci-contre : elles contiennent les quatre blocs. Les numéros des lignes pourraient être différents chez toi. Si nécessaire, réaménage le texte pour qu'il se présente comme sur l'illustration. Le bloc Conteneur démarre sur <div id="conteneur"> à la ligne 16 et se termine avec </div> à la ligne 21. On voit donc qu'il contient : 1. Le bloc entete à la ligne 17 ; 2. Le bloc menu la ligne 18 ; 3. Le bloc texte à la ligne 19 ; 4. Le bloc pied à la ligne 20. Quand ton document est au point et enregistré, passe à la page suivante. Les bloc imbriqués ont du style A la page précédente, nous avons simplement conçu les différents blocs imbriqués dans le bloc Conteneur. La présentation obtenue n'a cependant encore rien à voir avec ce que l'on attend. 7/16
8 Le moment est donc venu d'améliorer ce détail. L'application des styles aux différents blocs se fait exactement comme tu l'as fait précédemment avec le bloc Conteneur. Un style pour l'en-tête Dans l'éditeur de style, sélectionne la feuille de style interne existante. Clique sur le bouton Règle pour définir une nouvelle règle de style. Il s'agit d'une règle à appliquer à tous les éléments d'un type. Le type est #entete (car nous allons l'appliquer au bloc dont l'id est entete). Clique sur le bouton Créer la règle de style. Dans l'onglet Boîte, choisir une largeur de 100% de manière à ce que l'en-tête occupe toute la largeur du bloc Conteneur ; Dans l'onglet Fond, choisis une couleur claire (par exemple, vert clair). Clique sur le bouton Fermer pour terminer la définition de style pour le bloc entete. Enregistre le document. Un style flottant pour le Menu Le bloc menu est un peu particulier dans la mesure où il utilisera une règle de style que nous n'avons pas encore utilisée dans ce cours. Un bloc <div> peut être déclaré " flottant " sur la page. Dans ce cas, le reste du contenu de la page s'écoule le long du bloc flottant. Dans l'exemple ci-contre, le bloc Menu est déclaré flottant à gauche. Le texte de la page s'écoule le long du bloc en occupant la place disponible. En utilisant toujours la même méthode : Etablis une nouvelle règle de style pour le bloc dont l'id est menu. Dans cette règle, définis que : le bloc menu est flottant à gauche ; sa largeur est de 150px ; sa couleur de fond est assez claire (par exemple, saumon, comme dans l'illustration ci-dessus.) Vérifie que l'effet obtenu est similiaire à celui de l'illustration ci-dessus si tu ajoutes quelques lignes dans le bloc texte. Enregistre le document. Un texte qui a du style Le bloc texte ne se présente pas encore exactement comme souhaité. Il devrait se trouver à droite du menu et non s'écouler le long de celui-ci. 8/16
9 texte. Mise en page CSS avec KompoZer En utilisant toujours la même méthode : Etablis une nouvelle règle de style pour le bloc dont l'id est texte. Dans cette règle, définis que : le bloc texte est muni d'une marge à gauche de 150px ; sa couleur de fond est assez claire (par exemple, bleu-clair, comme dans l'illustration ci-dessous.) Vérifie que l'effet obtenu est similiaire à celui de l'illustration ci-dessous si tu ajoutes quelques lignes dans le bloc Quand tu as vérifié l'effet, supprime le texte introduit et remets simplement la mention " Texte ". Enregistre le document. Je suis un peu inquiet, moi. Le code HTML a dû sérieusement se compliquer, depuis la dernière fois. On n'irait pas jeter un coup d'oeil? L'idée d'aller voir le code HTML est certainement bonne. Mais je crains que vous soyez déçu. Clique sur l'onglet Source ; Descend le curseur de texte jusqu'à la partie <body> du code HTML. Compare le texte du code actuel avec le texte du code avant les mises en forme. Avant les mises en forme Après les mises en forme La différence n'est pas franchement flagrante. Quelque chose a changé? Dans le texte du code HTML, rien n'a changé, effectivement. Par contre, dans les définitions de style situées plus haut dans le code, il y a nettement plus de monde. A propos, à quoi sert encore la mention " Conteneur ", en haut du bloc Conteneur? On voit bien où est le Conteneur. On ne pourrait pas faire le ménage? Je vous laisse faire. Dans l'éditeur de code, supprime la mention " Conteneur " et le saut de ligne <br> qui suit. Vérifie l'aspect de la page dans l'onglet Normal. Enregistre le document. Le pied-de-page Le pied de page doit toujours se trouver tout au bas du document. Le positionnement de ce pied de page pose 9/16
10 cependant un petit problème spécifique que nous allons résoudre maintenant. Un petit problème, vous appelez ça? Disons que le pied de page n'est plus franchement au bas de la page, dès que je mets quelque chose dans le Menu... Bien juste! Vous avez mis le doigt sur le problème. Le problème est suscité par le fait que le bloc Menu est flottant. La suite du document se positionne donc en " coulant " le long de ce bloc. Y compris le pied de page. Pour remédier à cet inconvénient, une nouvelle notion doit être introduite : le dégagement des blocs. Le bloc de menu est flottant à gauche. Le pied de page doit se dégager de ce flottement et reprendre sa place légitime : sous le bloc Menu. Ouvre l'éditeur KaZcadeS. Etablis une nouvelle règle de style pour le bloc dont l'id est pied. Dans l'onglet Boîte, définis un dégagement Gauche. Définis une couleur de fond claire, éventuellement sur l'exemple de l'illustration ci-dessous. Ferme l'éditeur KaZcadeS. Enregistre le document. Observe le résultat dans l'onglet Normal de KompoZer. Pour qu'un bloc puisse se dégager d'un autre bloc flottant à droite, il faut lui imposer un dégagement à droite flottant à gauche, il faut lui imposer un dégagement à gauche flottant à gauche ou à droite, on peut lui imposer un dégagement des deux côtés. Donc, le code HTML n'a pas évolué d'un pouce depuis le début. Mais alors, tout ce que nous avons fait? Tout ce que nous avons fait se trouve dans les directives de la feuille de style incorporée. Ouvre l'onglet Source du document en cours. Visualise les directives de style qui ont été imposées grâce à l'éditeur CSS. Essaie, tant que possible, de faire le lien entre le code CSS et les différentes actions réalisées dans l'éditeur CSS. Ta feuille de style peut différer du texte donné ci-dessous, en fonction des couleurs choisies. Note que les directives concernant les couleurs ne sont pas indispensables pour la mise en page. <style title="messtyles" media="all" type="text/css"> #conteneur { border: 1px solid rgb(0, 0, 0); width: 90%; margin-left: 5%; background-color: rgb(255, 255, 204); #entete { background-color: rgb(204, 255, 85); width: 100%; 10/16
11 #menu { float: left; width: 150px; background-color: rgb(255, 204, 102); #texte { margin-left: 150px; background-color: rgb(51, 204, 255); #pied { clear: left; background-color: rgb(255, 204, 255); </style> Bon, on avait aussi parlé d'une mise en page avec le menu à droite. Ca va nous prendre encore autant de temps? Oh que non. Pour modifier la mise en page, il n'y a presque rien à faire... Autres mises en page Donc, vous disiez? Pas grand chose à faire pour changer la mise en page? Effectivement, quelques petites modifications dans la feuille de style. Rappelons que l'idée est de produire une toute nouvelle mise en page sur le modèle de l'illustration ci-contre et qui a déjà été présentée plus tôt dans cette leçon. Reprenons la feuille de style intégrée actuelle dans laquelle nous allons supprimer les éléments qui ne sont pas utiles pour la mise en page (les couleurs ne sont pas importantes). <style title="messtyles" media="all" type="text/css"> #conteneur { width: 90%; margin-left: 5%; #entete { width: 100%; #menu { float: left; width: 150px; #texte { margin-left: 150px; #pied { clear: left; </style> Seulement deux objets sur les cinq qui sont décrits doivent être modifiés : le bloc menu et le bloc texte. Dans la zone de texte suivante, écris les modifications à réaliser pour changer la mise en page. Propose ensuite tes idées au professeur. #conteneur { width: 90%; margin-left: 5%; #entete { width: 100%; 11/16
12 #menu { float: left; width: 150px; #texte { margin-left: 150px; #pied { clear: left; Quand ta proposition est approuvée, réalise la modification : dans l'onglet Source de KompoZer ou dans l'éditeur CSS KaZcadeS. Enregistre le document modifié sous le nom modele2.html. Réaliser la troisième présentation est encore plus simple. Ouvre le document modele.html et vérifie qu'il se présente bien comme sur l'illustration ci-dessous, sans autre annotation qui pourrait introduire des difficultés qui seront abordées plus loin. Modifie la feuille de style incorporée pour obtenir la présentation illustrée ci-dessous. Enregistre le nouveau document sous le nom modele3.html. Des styles CSS en boîtes Les éléments présentés sur une page web peuvent être considérés comme s'ils étaient inclus dans des boîtes. Celles-ci présentent un certain nombre de zones autour de leur contenu : un espacement (padding, en anglais) une bordure (border, en anglais) une marge (margin, en anglais) Le contenu de la boîte (texte ou image) est caractérisé par ses dimensions (largeur : width et hauteur : height). La bordure est un élément qui peut être coloré et qui entoure contenu de la boîte. La zone située à l'intérieur de la bordure est appelé espacement. La zone à l'extérieur de la bordure et qui sépare l'objet de tout autre élément voisin est la marge. On peut donc voir une boîte comme un rectangle de cellophane transparente qui supporterait un autre rectangle le 12/16
13 coloré (le contenu) muni d'une bordure. En marges de la mise en boîte Tous les éléments nécessaires à la mise en page globale de la page sont maintenant en place. L'architecture est terminée : nous pouvons passer à la décoration d'intérieur. En-tête de la page L'en-tête est un élément important de la page. Elle indique immédiatement de quoi il sera question. Il s'agira donc d'un titre de première importance. Le niveau de titre 1 conviendrait parfaitement. Place le curseur de texte dans la zone d'en-tête. Dans la liste déroulante, sélectionne le niveau de Titre 1. Hé, Mais c'est horrible! Voilà la couleur du bloc conteneur qui réapparaît en haut et en bas de l'entête. Qu'est-ce qu'elle vient faire là, celle-là? Finement observé. Mais c'était prévisible. N'oublions pas que la boîte du style H1 est entourée par cette fameuse bande de cellophane. Quelle partie de la boîte de style H1 devrait être réduite pour ne plus laisser apparaître la couleur du " conteneur "? Le contenu L'espacement La bordure La marge Nous allons devoir modifier le style " natif " de h1 afin de supprimer la marge existante. Dans l'éditeur de style, définis une nouvelle règle de style pour " tous les éléments correspondant au sélecteur " h1. Dans l'onglet Boîte, définis les marges haute et basse à une valeur de 0. Vérifie l'effet obtenu dans la page : les marges transparentes ont disparu ; le fond n'est plus visible. Le titre du texte Chaque page de texte aura sans doute son propre titre. Afin de bien le distinguer du titre principal de la page, nous allons lui conférer le niveau Titre 2. Indique un titre quelconque en haut de la zone de texte, comme sur l'illustration précédente. Confère-lui le niveau de Titre 2. Ca y est, c'est reparti pour un tour. Revoilà la couleur du fond qui réapparaît et la zone de texte qui se décale. Et si c'était exactement le même problème qui se posait ici? La marge... Dans l'éditeur de style, définis une nouvelle règle de style pour " tous les éléments correspondant au sélecteur " h2. Dans l'onglet Boîte, définis les marges haute à une valeur de 0. Laisse la marge basse non définie (c'est-à-dire avec sa valeur par défaut). Vérifie l'effet obtenu dans la page : la marge transparente supérieure a disparu ; le fond n'est plus visible. 13/16
14 Dans l'illustration ci-contre, on voit que l'on a profité de l'occasion pour définir une bordure basse d'une épaisseur de 1 px qui fera un soulignement pour le titre. Ajoute l'effet de soulignement de l'élément h2, comme indiqué ci-dessus. Le titre du menu Le menu peut également recevoir son titre. Confère le niveau de Titre 2 à la première ligne de la zone de Menu. Il n'y a plus rien à préciser pour le style de ce titre : tout a déjà été fait plus haut. C'est géant! J'aime quand il n'y a rien à faire. Mise en boîte des images Nous allons probablement vouloir insérer des images dans le document dont nous construisons le modèle. Certaines images seront calées sur la marge gauche, d'autres sur la marge droite. Voyons comment les styles CSS vont nous permettre d'optimiser le processus. Insertion d'image sans CSS Je trouve ce titre tout à fait à propos. Il n'y a pas besoin de CSS pour insérer les images. Pourquoi faire compliqué? Je vous propose donc d'essayer de voir en quoi les styles CSS sont intéressants. Ce sera une forme de révision. Pour la zone de texte, choisis une image quelconque de dimension raisonnable (200px x 200 px serait très bien) à insérer le long du bord gauche. Insère l'image selon la technique maintenant bien connue. Règle l'image pour que le texte " coule " le long du bord droit de celle-ci. La technique a été abordée précédemment. Dites, je ne veux pas faire le difficile, mais ce n'est pas de la plus grande élégance, ce texte collé à mon image. Eh bien, une solution simple serait d'utiliser au mieux nos connaissances pour corriger ce petit défaut. Clique droit sur l'image et ouvre la boîte de dialogue de propriétés de l'image Dans l'onglet Apparence, indique un espacement de 20 pixels A gauche et à droite de l'image. Clique sur le bouton OK. Je vois que vous avez un certain sens de l'humour! Ca n'arrange rien du tout votre système. L'image est bien séparée du texte, mais qui demandait cette marge à gauche?. C'est donc le moment d'appeler les styles CSS à l'aide. Insertion d'image avec CSS Pour que l'image soit parfaitement positionnée sur le bord gauche du bloc et que le texte coule le long de son bord droit, il faut lui attribuer un style flottant. Pour éloigner légèrement le texte de l'image, il suffit d'imposer la marge qui convient à l'image. 14/16
15 Supprime la marge imposée dans la boîte de dialogue des Propriétés de l'image. Dans l'éditeur de style, nous allons faire flotter l'image à gauche et imposer une marge droite de 20 px. Ouvre l'éditeur CSS. Crée une nouvelle règle pour le sélecteur <img> réservé aux images. Dans l'onglet Boîte, définis l'image flottante à gauche avec une marge droite de 20 px. Ferme l'éditeur CSS. Vérifie l'effet obtenu dans la page. Des styles qui ont de la classe A la page précédente, nous avons résolu le problème de la mise en page pour une image calée sur le bord gauche du bloc Texte. Mais nous voulions aussi insérer des images sur le bord droit, selon le même principe. Pas grave, on a déjà la solution : il suffit d'attribuer un " id " à chacune des images. Ensuite, on définit un style pour chaque " id ". J'y cours. Attendez, malheureux. Vous oubliez une petite chose. Si vous souhaitez introduire de nombreuses images, vous devrez définir un " id " -puis un style- pour chaque image. Ce qui n'est pas très rationnel. Pour résoudre le problème, nous allons faire appel aux classes plutôt qu'aux identifiants. Différence entre classe et identifiant Lorsque nous avons introduit la notion d'identifiant (" id "), nous avons précisé qu'un " id " ne peut être utilisé qu'une seule fois sur une page. Les classes reposent sur un principe similaire. Cependant, celles-ci peuvent apparaître à plusieurs reprises dans la page. Identifiant : " id " <div id="conteneur"> <div id="entete">en-tete</div> <div id="menu">menu</div> <div id="texte">le texte</div> <div id="pied">pied</div> </div> Classe : " class " <div id="texte"> <h2>le titre</h2> <img class="image" alt="caesar" src=... <img class="image" alt="cicero" src=... </div> fait pour un identifiant. Pour le reste, on peut " styler " une classe comme on le Comment introduire un nouveau sélecteur de classe Dans la barre d'état, clique droit sur la balise <img> correspondant à une image. Sélectionne la commande Propriétés avancées. Dans la zone Attribut de la boîte de dialogue des propriétés avancées, indiquer ou sélectionner " class " Dans la zone Valeur, indiquer le nom de la " classe ". Ici, nous 15/16
16 indiquerons " imagegauche ". Clique sur le bouton OK pour terminer la définition de la classe. Nous avons maintenant défini une classe pour l'image qui devra se trouver sur le bord gauche de la zone de texte. Ouais, mais ça ne nous met toujours pas l'image proprement entourée par le texte. Ceci est bien sûr l'objet du point suivant où nous allons attribuer des directives de style à cette nouvelle Classe. Styler une classe Attribuer des directives de style à une Classe se fait exactement de la même façon que l'on attribue des directives de style à un identificateur " id ". Il faut toutefois veiller à indiquer clairement qu'il s'agit d'une classe et non d'un identificateur. Ouvre l'éditeur CSS. Crée une nouvelle règle de style. Celle-ci prend le même nom qu'une classe existante. Sélectionne l'option style nommé (entrez un nom de classe ci-dessous) Clique sur le bouton Créer la règle de style. Définis les styles nécessaires pour obtenir une image flottante à gauche avec une marge droite de 20 px. Clôture Il n'y a maintenant plus aucune difficulté pour construire une nouvelle classe imagedroite dont les styles imposeront un flottement à droite et une marge gauche de 20px. Dans le document en cours, inclus du texte et plusieurs images. Attribue la classe imagegauche à certaines images et imagedroite à d'autres. Vérifie que les images se disposent comme indiqué dans l'illustration du haut de cette page. 16/16
.. 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
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
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?
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
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
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
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
SOS Info: Traitement de textes. 1. Structurer un document. 2. Enregistrer un document
De plus en plus de documents seront «lus» par des systèmes automatiques. Il est important que les textes soient parfaitement structurés pour qu'un ordinateur puisse repérer les éléments importants. On
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
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...
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
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,
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...
qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz mqwertyuiopasdfghjklzxcvbnmqwert
qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz INITIATION à Word 2007 xcvbnmqwertyuiopasdfghjklzxcvbn Cours informatiques Année 2009/2010 mqwertyuiopasdfghjklzxcvbnmqwert
POUR ALLER UN PEU PLUS LOIN SUR UN TABLEUR. Version EXCEL
POUR ALLER UN PEU PLUS LOIN SUR UN TABLEUR Version EXCEL Document réalisé par Francis Petit, IA-IPR de Mathématiques à Grenoble, à partir d un document de Jean-Raymond Delahaye, professeur au lycée Alain
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
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
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
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
Créer un publipostage avec Word 2007.
Bureautique Créer un publipostage avec Word 2007. Dans cette Fiche, nous allons décrire la procédure de création d'un publipostage avec Word 2007. La fonction de publipostage permet de créer un document
Guide de démarrage rapide
Comment démarrer rapidement votre Box e-commerce. Guide de démarrage rapide Autres supports : Vidéos démos disponibles sur le portail. Contactez notre service client : 0 969 366 636 Guide de démarrage
GUIDE DE DEMARRAGE RAPIDE:
GUIDE DE DEMARRAGE RAPIDE: COMMENT CREER VOTRE BOUTIQUE EN LIGNE Vous voulez créer votre propre boutique en ligne? C est désormais plus simple que jamais. Suivez simplement les instructions de ce guide
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
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
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
LibreOffice Calc : introduction aux tableaux croisés dynamiques
Fiche logiciel LibreOffice Calc 3.x Tableur Niveau LibreOffice Calc : introduction aux tableaux croisés dynamiques Un tableau croisé dynamique (appelé Pilote de données dans LibreOffice) est un tableau
Créer votre propre modèle
Créer votre propre modèle Vous recherchez un modèle personnalisé pour vos présentations Microsoft PowerPoint qui comprend le nom de votre organisation et un arrière-plan unique avec les couleurs et les
Petit guide d'installation de l'option de connexion réseau
Xerox WorkCentre M118/M118i Petit guide d'installation de l'option de connexion réseau 701P42687 Ce guide contient des instructions concernant : Navigation dans les écrans à la page 2 Configuration réseau
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
Comment formater votre ebook avec Open Office
Comment formater votre ebook avec Open Office 1 2012 Nicolas Boussion Tous droits réservés. Important : ce livre numérique, comme toute œuvre de l'esprit, fait l'objet de droits d'auteur. Son contenu a
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
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
{less} Guide de démarrage
{less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site
Fête de la science Initiation au traitement des images
Fête de la science Initiation au traitement des images Détection automatique de plaques minéralogiques à partir d'un téléphone portable et atelier propose de créer un programme informatique pour un téléphone
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
Publipostage avec Calc
Auto-formation sur OpenOffice.org 2.0 par Cyril Beaussier Version 1.0.2 - Avril 2006 Publipostage avec Calc Sommaire Introduction... 2 Présentation... 3 Notions... 4 Les données... 5 Lettre type... 7 Création
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
Découvrir OpenOffice Comment optimiser et formater votre ebook avec OpenOffice
Comment optimiser et formater votre ebook avec OpenOffice Le blog : http://www.vendre-sur-kindle.com 1 Découvrir OpenOffice : comment optimiser et formater votre ebook avec OpenOffice 2013 Le blog : http://www.vendre-sur-kindle.com
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
Uniformiser la mise en forme du document. Accélère les mises à jour. Permets de générer des tables de matières automatiquement.
Les styles Table des matières Les styles... 1 1. Tutoriels... 1 2. Pourquoi utiliser les styles?... 1 3. Qu'est-ce qu'un style?... 1 4. Utiliser les styles existants... 2 Afficher les styles... 2 Appliquer
Créer un diaporama avec Open Office. Sommaire
Créer un diaporama avec Open Office I. Création I.1. Paramétrer le diaporama I.2. Valider et enregistrer l'album II. Le traitement des données II.1. Saisir les données II.2. Agir sur les pages III. Améliorez
1. Introduction... 2. 2. Création d'une macro autonome... 2. 3. Exécuter la macro pas à pas... 5. 4. Modifier une macro... 5
1. Introduction... 2 2. Création d'une macro autonome... 2 3. Exécuter la macro pas à pas... 5 4. Modifier une macro... 5 5. Création d'une macro associée à un formulaire... 6 6. Exécuter des actions en
Un exemple avec WORKSPACE d'interwrite
S'approprier un utilitaire de TNI Un exemple avec WORKSPACE d'interwrite Objectifs : S'approprier un utilitaire de TNI («soft»)afin de percevoir la plus-value pédagogique de l'outil. Pour cela utiliser
Manuel v. 6sV Simplement surfer. Simplement cliquer. Simplement bloguer.
Manuel v. 6sV Simplement surfer. Simplement cliquer. Simplement bloguer. Sommaire 1. Se loguer 2. Ta place de travail (Tableau de bord) 3. Créer ton article 3.1«Ajouter» un article 3.2 Ta feuille de papier
Comment Utiliser les Versions, les Modification, les Comparaisons, Dans les Documents
Comment Utiliser les Versions, les Modification, les Comparaisons, Dans les Documents Diffusé par Le Projet Documentation OpenOffice.org Table des Matières 1. Les Versions...3 2. Les Modifications...5
Débuter avec OOo Base
Open Office.org Cyril Beaussier Débuter avec OOo Base Version 1.0.7 Novembre 2005 COPYRIGHT ET DROIT DE REPRODUCTION Ce support est libre de droit pour une utilisation dans un cadre privé ou non commercial.
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
Traitement de texte : Quelques rappels de quelques notions de base
Traitement de texte : Quelques rappels de quelques notions de base 1 Quelques rappels sur le fonctionnement du clavier Voici quelques rappels, ou quelques appels (selon un de mes profs, quelque chose qui
Créer un modèle Impress
Auto-formation sur OpenOffice.org 2.0 par Cyril Beaussier Version 1.0.24 - Janvier 2006 Créer un modèle Impress Sommaire Introduction... 2 Présentation... 3 Création du modèle... 4 Passage en mode Masque...
1. Création d'un état... 2. 2. Création d'un état Instantané Colonnes... 3. 3. Création d'un état Instantané Tableau... 4
1. Création d'un état... 2 2. Création d'un état Instantané Colonnes... 3 3. Création d'un état Instantané Tableau... 4 4. Création d'un état avec plusieurs tables... 9 5. Modifier la structure d'un état...11
Prise en main du logiciel Smart BOARD
Prise en main du logiciel Smart BOARD 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 un tbi
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
Publication Assistée par Ordinateur
Présentation OpenOffice Draw est l'outil de dessin vectoriel de la suite bureautique OpenOffice. De fait, Draw permet de réaliser certains documents comparables à ceux de Publisher, le logiciel de P.A.O.
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
Navigation dans Windows
Cours 03 Navigation dans Windows Comme je le disais en introduction, notre souris se révèle plus maligne qu'elle n'en a l'air. À tel point qu'il faut apprendre à la dompter (mais c'est très simple, ce
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
Qlik Sense Cloud. Qlik Sense 2.0.2 Copyright 1993-2015 QlikTech International AB. Tous droits réservés.
Qlik Sense Cloud Qlik Sense 2.0.2 Copyright 1993-2015 QlikTech International AB. Tous droits réservés. Copyright 1993-2015 QlikTech International AB. Tous droits réservés. Qlik, QlikTech, Qlik Sense, QlikView,
Créer des étiquettes avec les adresses d'un tableau Calc
Créer des étiquettes avec les adresses d'un tableau Calc Il faudra au préalable avoir déjà créé le tableau contenant les adresses avec Calc. Il y a trois étapes différentes pour réaliser des étiquettes
PHPWEBSITE -Tutoriel image
PHPWEBSITE -Tutoriel image La capture des images depuis le web pour mon site. L optimisation d images pour le web, 1 Préparer des images pour le Web A. Généralités 1. Les trois formats d'images sur le
Java 7 Les fondamentaux du langage Java
184 Java 7 Les fondamentaux du langage Java 1.1 Les bibliothèques graphiques Le langage Java propose deux bibliothèques dédiées à la conception d'interfaces graphiques. La bibliothèque AWT et la bibliothèque
Chapitre 1. Prise en main
Guide de référence Guide de référence Chapitre 1. Prise en main Le processus d'enquête Le processus d'enquête comporte 5 étapes toutes prises en charge par le logiciel : Conception des formulaires Cette
2010 Ing. Punzenberger COPA-DATA GmbH. Tous droits réservés.
2010 Ing. Punzenberger COPA-DATA GmbH Tous droits réservés. La distribution et/ou reproduction de ce document ou partie de ce document sous n'importe quelle forme n'est autorisée qu'avec la permission
Choisir entre le détourage plume et le détourage par les couches.
Choisir entre le détourage plume et le détourage par les couches. QUEL CHOIX D OUTILS ET QUELLE METHODE, POUR QUEL OBJECTIF? Il existe différentes techniques de détourage. De la plus simple à la plus délicate,
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
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
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
Traitement par lot redimensionner des images
Traitement par lot redimensionner des images Demande Je souhaite réduire la taille de plusieurs images RAW (NEF) et les convertir en format JPEG, toutes en même temps, pour les utiliser sur une page Web.
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 :
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
les Formulaires / Sous-Formulaires Présentation...2 1. Créer un formulaire à partir d une table...3
Présentation...2 1. Créer un formulaire à partir d une table...3 2. Les contrôles :...10 2.1 Le contrôle "Intitulé"...11 2.2 Le contrôle "Zone de Texte"...12 2.3 Le contrôle «Groupe d options»...14 2.4
Guide de démarrage rapide Centre de copies et d'impression Bureau en Gros en ligne
Guide de démarrage rapide Centre de copies et d'impression Bureau en Gros en ligne Aperçu du Centre de copies et d'impression Bureau en Gros en ligne Pour accéder à «copies et impression Bureau en Gros
Les bases de données. Se familiariser avec Base. Figure 1.1A Ouvre le fichier dont tu as besoin. Lance OpenOffice Base.
Exercice 1. 1 Se familiariser avec Base Figure 1.1A Ouvre le fichier dont tu as besoin. Données de l élève Lance OpenOffice Base. Ouvre le fichier nommé 6A Base de données clients (Figure 1.1A). Clique
TBI-DIRECT. Bridgit. Pour le partage de votre bureau. Écrit par : TBI Direct. http://www.tbi-direct.fr
TBI-DIRECT Bridgit Pour le partage de votre bureau Écrit par : TBI Direct http://www.tbi-direct.fr Contenu Vue d'ensemble...4 Nom du serveur...5 Lancement du Bridgit...5 Installation du logiciel Bridgit
Module SMS pour Microsoft Outlook MD et Outlook MD Express. Guide d'aide. Guide d'aide du module SMS de Rogers Page 1 sur 40 Tous droits réservés
Module SMS pour Microsoft Outlook MD et Outlook MD Express Guide d'aide Guide d'aide du module SMS de Rogers Page 1 sur 40 Table des matières 1. Exigences minimales :...3 2. Installation...4 1. Téléchargement
Les calques supplémentaires. avec Magix Designer 10 et autres versions
Les calques supplémentaires avec Magix Designer 10 et autres versions Pourquoi ajouter un calque à votre page web? L'ajout d'un calque à une page web est parfois nécessaire lorsque la page est déjà bien
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
DETERMINER LA LARGEUR DE PAGE D'UN SITE et LES RESOLUTIONS d'ecran
DETERMINER LA LARGEUR DE PAGE D'UN SITE et LES RESOLUTIONS d'ecran dossier par Clochar SOMMAIRE 1. LES RESOLUTIONS d'ecran... 1 2. RESOLUTION de l écran et choix de la TAILLE DE LA PAGE... 2 3. AGRANDISSEMENT
Comment faire des étiquettes
Comment faire des étiquettes Révision 0.1 31/03/2004 Réalisé avec : OOo 1.1.0 Plate-forme / Os : Toutes n révision, mode d'emploi n révision : x.yz x : n de version majeure, par exemple 0 pour une phase
COPIER, COUPER, COLLER, SELECTIONNER, ENREGISTRER.
COPIER, COUPER, COLLER, SELECTIONNER, ENREGISTRER. 1. Comment déplacer ou copier un fichier sur Windows Vous aurez régulièrement besoin de déplacer ou dupliquer des fichiers sur votre ordinateur. Par exemple
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
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...
Utilisation du logiciel GALAAD
1 Sommaire: Présentation du logiciel GALAAD 1. Démarrer le programme........ 2. Présentation de l écran du logiciel....... Les barres d'outils, sauvegarder... 3. Créer un nouveau fichier........ 4. Préparer
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
www.imprimermonlivre.com
0 www.imprimermonlivre.com Composition d une couverture avec Word L objectif de ce guide est de vous proposer un mode opératoire pour créer une couverture avec Word. Nous vous rappelons toutefois que Word
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
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
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
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
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
Guide de démarrage Janvier 2012
Guide de démarrage Janvier 2012 2012 Logicim Inc. Tous droits réservés. Table des Matières Table des Matières i Guide de Démarrage 1 Introduction 1 Respecter l ordre de la formation 1 Ouvrir XLGL 1 Différentes
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
Introduction : Cadkey
Introduction Cadkey Cadkey est un logiciel de dessin assisté par ordinateur. La fenêtre du logiciel devrait ressembler à quelque chose comme suit: Le menu supérieur: Redraw Autoscale Efface Modifier les
Table des matières. F. Saint-Germain / S. Carasco Document réalisé avec OpenOffice.org Page 1/13
Voici un petit tutoriel d'utilisation du tableau numérique de la marque promethean. Ce tutoriel est loin d'être complet, il permet juste une première approche simple des outils de base du logiciel ACTIVstudio.
Comment créer un diagramme de Gantt avec OpenOffice.org
Comment créer un diagramme de Gantt avec OpenOffice.org Version 1.9 du 05.05.2005 Réalisé avec : OOo 2.0 Plate-forme / Os : Toutes Distribué par le projet Sommaire 1 Une rapide introduction : Diagramme
Petit guide à l'usage des profs pour la rédaction de pages pour le site Drupal du département
Petit guide à l'usage des profs pour la rédaction de pages pour le site Drupal du département Le nouveau site du département Le nouveau site du département est situé, comme l'ancien à l'adresse suivante
l'ordinateur les bases
l'ordinateur les bases Démarrage de l'ordinateur - Le bureau, mon espace de travail - J'utilise la souris - Ouvertes ou fermées, les fenêtres - Dans l'ordinateur, tout est fichier - Le clavier : écrire,
www.systhag-online.cm PREINSCRIPTION EN LIGNE
UNIVERSITE DE DOUALA THE UNIVERSITY OF DOUALA www.systhag-online.cm PREINSCRIPTION EN LIGNE Guide de l'utilisateur Part. 1 (Mise à jour: 26 septembre 2012) 1 TABLE DES MATIERES I- AVANT DE COMMENCER 3