Information: En suivant ce tutoriel vous serez
capable de réaliser un cadre similaire pour le contenu présent sur votre
site Jimdo et ce relativement simplement.
La réalisation d'un cadre est parfois pratique pour mettre en
valeur une information particulière aux lecteurs. Techniquement il faut
avoir des connaissances en CSS pour être capable de
réaliser un cadre assez réussi. Néanmoins, en suivant ce
tutorial, il vous suffira de faire un copier/coller pour utiliser l'un
ou l'autre des cadres présentés sur cette page.
1- Éditer un texte en HTML
La première étape est de savoir où est situé le bouton qui
permet d'éditer un texte en HTML. La capture d'écran ci-dessous présente
ce bouton qui sera grandement utile pour la suite de ce
petit tutorial.
Bouton HTML sur l'éditeur de texte Jimdo
En cliquant sur ce bouton, une petite fenêtre s'ouvre avec le
texte présent dans votre éditeur ainsi que les éventuelles balises HTML.
Voici un capture d'écran de cette boite:
Boite d'édition de texte en HTML sous Jimdo
2- Placer le code au bon endroit
Dans la fenêtre précédemment ouverte, il n'est pas nécessaire de
connaitre le HTML pour pouvoir ajouter le code nécessaire à l'insertion
du cadre, il suffit de recopier un bout de code
avant le texte et après le texte.
A titre d'exemple, voici le code à insérer pour réaliser le même
cadre d'information qui est présenté au début de l'article:
<;div style="border: 2px solid
#1c75c8; padding: 3px; background-color: #c5ddf6;
-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;">
capable de réaliser un cadre similaire pour le contenu présent sur votre
site Jimdo et ce relativement simplement.
La réalisation d'un cadre est parfois pratique pour mettre en
valeur une information particulière aux lecteurs. Techniquement il faut
avoir des connaissances en CSS pour être capable de
réaliser un cadre assez réussi. Néanmoins, en suivant ce
tutorial, il vous suffira de faire un copier/coller pour utiliser l'un
ou l'autre des cadres présentés sur cette page.
1- Éditer un texte en HTML
La première étape est de savoir où est situé le bouton qui
permet d'éditer un texte en HTML. La capture d'écran ci-dessous présente
ce bouton qui sera grandement utile pour la suite de ce
petit tutorial.
Bouton HTML sur l'éditeur de texte Jimdo
En cliquant sur ce bouton, une petite fenêtre s'ouvre avec le
texte présent dans votre éditeur ainsi que les éventuelles balises HTML.
Voici un capture d'écran de cette boite:
Boite d'édition de texte en HTML sous Jimdo
2- Placer le code au bon endroit
Dans la fenêtre précédemment ouverte, il n'est pas nécessaire de
connaitre le HTML pour pouvoir ajouter le code nécessaire à l'insertion
du cadre, il suffit de recopier un bout de code
avant le texte et après le texte.
A titre d'exemple, voici le code à insérer pour réaliser le même
cadre d'information qui est présenté au début de l'article:
<;div style="border: 2px solid
#1c75c8; padding: 3px; background-color: #c5ddf6;
-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;">
Information: En suivant ce tutoriel
vous serez capable de réaliser un cadre similaire pour le contenu
présent sur votre site Jimdo et ce relativement
simplement.
Dans l'exemple ci-dessus, le texte en rouge représente le code à copier/coller avant et après le contenu textuel.
Finallement il suffit de cliquer sur le bouton "Mettre à jour"
et d'enregistrer les changements dans l'éditeur de texte Jimdo pour
finaliser ce tutorial et avoir un beau cadre d'information.
Autres exemple de cadre
Ci-dessous il est possible de retrouver une multitude d'exemple
de cadre, facile à utiliser. Pour chacun des cadres présenté, il suffit
de copier/coller le code joint. Le plus difficile est
donc de faire un choix parmi tous les cadres disponibles.
Cadre d'information: Copier/coller le code présent ci-dessous pour mettre en place le même code sur votre site Jimdo.
Cadre d'information: Copier/coller
le code présent ci-dessous pour mettre en place le même code sur votre
site Jimdo.
?
insérer un texte informatif que les leclteurs repéreront facilement.
Pour l'utiliser il suffit de copier/coller le code ci-dessous.
?
Cadre d'information: Ce cadre est
idéal pour insérer un texte informatif que les leclteurs repéreront
facilement. Pour l'utiliser il suffit de copier/coller le
code ci-dessous.
!
insérer un texte d'avertissement que les leclteurs repéreront
facilement. Pour l'utiliser il suffit de copier/coller le code
ci-dessous.
!
Cadre d'avertissement: Ce cadre est
idéal pour insérer un texte d'avertissement que les leclteurs
repéreront facilement. Pour l'utiliser il suffit de
copier/coller le code ci-dessous.
Cadre pointillés: Pour utiliser ce cadre, il suffit de copier puis coller le code qui se trouve ci-dessous.
<;;div style="padding:3px; border:2px dotted #a5a5a5; background-color:#e3e3e3;";>
Cadre pointillés: Pour utiliser ce
cadre, il suffit de copier puis coller le code qui se trouve ci-dessous.
<;/div;>
Cadre important: Idéal pour mettre une information
en valeur sur son site. Pour réaliser un cadre similaire, il suffit de
se servir du code présenté ci-dessous en utilisant
"copier/coller".
Cadre important: Idéal pour mettre
une information en valeur sur son site. Pour réaliser un cadre
similaire, il suffit de se servir du code présenté ci-dessous en
utilisant "copier/coller".
Cadre de citation: Idéal pour citer les propos de
quelqu'un dans un texte. Pour utiliser ce cadre il suffit de copier et
coller le code ci-dessous.
Cadre de citation: Idéal pour citer
les propos de quelqu'un dans un texte. Pour utiliser ce cadre il suffit
de copier et coller le code ci-dessous.
Cadre de citation 2: Idéal pour citer les propos de
quelqu'un dans un texte. En copiant-collant le code ci-dessous vous
pourrez utiliser ce cadre sur votre site.
<;div style="padding:3px;
padding-left:6px; border:1px dotted #d0d0d0; border-left:4px solid
#d0d0d0; margin-left:20px; font-style:italic;">
Cadre de citation 2: Idéal pour
citer les propos de quelqu'un dans un texte. En copiant-collant le code
ci-dessous vous pourrez utiliser ce cadre sur votre
site.
Dim 21 Fév - 2:27 par Admin
» Quelle est la différence entre un iPhone neuf et un iPhone reconditionné ?
Mer 17 Fév - 23:31 par doingbuzz
» Que faut-il faire lorsque votre téléphone est mouillé ?
Mer 17 Fév - 23:29 par doingbuzz
» Quels sont les avantages du référencement naturel ?
Mer 17 Fév - 23:27 par doingbuzz
» Quand faut-il recharger son smartphone ?
Mer 17 Fév - 23:25 par doingbuzz
» Voici 7 applications qui vous aident à contrôler votre PC à distance
Mer 17 Fév - 23:24 par doingbuzz
» Comment regarder gratuitement les chaînes sur Android ?
Mer 17 Fév - 23:22 par doingbuzz
» Voici 10 applications gratuites qui vous permettent de mesurer la température corporelle
Mer 17 Fév - 23:20 par doingbuzz
» Quelle est la différence entre un Android TV et un Smart TV ?
Mer 17 Fév - 23:18 par doingbuzz