3vision-Group.com l Consuting - Infographisme - Site Web - Marketing - Maintenance
Bienvenue sur le forum de l'agence 3vision-Group

Afin de profiter pleinement de tout ce que vous offre notre forum, merci de vous identifier si vous êtes déjà membre ou de rejoindre notre communauté si vous ne l'êtes pas encore en cliquant sur "s'inscrire".
Nous sommes un site de pro, notre spécial se résume sur tous les domaines.



Le forum officiel du site 3vision-Group.com
 
AccueilGalerieRechercherMembresGroupesCalendrierFAQS'enregistrerConnexion
Le site web 3vision-group.com vous met ce forum a votre disposition, c'est gratuit
Les nouveautés logiciels XnView Photo et graphisme XnView XnView est un logiciel permettant de convertir et visualiser des fichiers graphiques ! Where's My Head? iPhone Where's My Head? Where's My Head? est une application gratuite pour iPhone dans laquelle il vous faut résoudre des énigmes. MKVToolNix Vidéo MKVToolNix Un excellent logiciel dédié à l'édition de fichiers MKV. Grâce à lui, fusionner plusieurs vidéos, éditez les chapitres, supprimez ou ajouter des sous-titres... Et bien plus encore ! Google chrome : Nouvelle version navigateur sous licence libre qui dispose de nombreuses fonctionnalités visant l’Internet social Téléchargement sponsorisé Utilitaires Alcohol 120% Alcohol 120% permet de créer des fichiers images CD et DVD afin de les stocker sur un disque dur... Internet SpeedyFox SpeedyFox est un petit utilitaire gratuit compatible avec Windows et Max OS a pour but de rendre la navigation beaucoup plus rapide. Utilitaires SDVocal Ecoutez les textes disponibles à l'écran à l'aide de ce logiciel. Si vous avez des troubles de la vue, des problèmes de lecture, ou si vous en avez tout simplement assez d'être "scotché" à l'écran, voilà la solution ! Internet Skype Skype est le logiciel de référence de téléphonie sur IP (VoIP) permettant de passer des appels gratuitement ou à moindre frais partout dans le monde, à partir de votre ordinateur ou smartphone compatible. Photo et graphisme iSpy iSpy est un programme gratuit permettant d'enregistrer ou de détecter des mouvements ou des sons. Utilitaires Free Internet Eraser Internet Eraser est le programme parfait pour nettoyer vos traces de passages sur le net. Internet Maxthon Maxthon est un navigateur Web basé sur 2 moteurs de rendu de pages : Trident et Webkit. Il permet de naviguer via un système d’onglets et rend possible la personnalisation du navigateur à l’aide des nombreux skins proposés. Utilitaires Daemon Tools Lite Daemon Tools Lite vous permettra de créer des lecteurs virtuels sur votre ordinateur. Utilitaires RenMultiFiles Pro Outil pour renommer en série les noms des fichiers. Les logiciels recommandés pour les internautes Winrar Winrar µTorrent Avast! Antivirus Gratuit 7 edia player VLC media player DAEMON Tools Lite Internet Download Manager (IDM) Mozilla Firefox PhotoFiltre Malwarebytes' Anti-Malware Adobe Photoshop CS5.1 et CS6 Beta CCleaner Google Chrome Skype Hamachi Avira AntiVir Personal Free Antivirus Google Earth DirectX Adobe Reader (Acrobat) AVG AntiVirus Free Edition 2012 7-Zip Windows Movie Maker OpenOffice.org Audacity Audacity PDFCreator SuperCopier Mumble iTunes Nero 7 YouTube Video Downloader Windows Live Messenger 2011 Free YouTube to MP3 Converter Photoscape CamStudio Kaspersky Antivirus 2012 Flash Player 11 The Gimp eMule Glary Utilities RealPlayer 10 Microsoft .NET Framework Foxit Reader Everest Ultimate Jdownloader Windows XP Service Pack 3 Office 2003 flechePublicité A télécharger aujourd'hui Windows | Mac | Windows Mobile | Téléphone Mobile Windows : 5 logiciels à télécharger Samsung Kies Windows logiciel Windows Samsung Kies - 2.3 Samsung Kies : Gérez votre smartphone Samsung depuis votre PC ! télécharger The Cursed Windows logiciel Windows The Cursed - 1.182 Incarnez des "damnés" ou leurs ennemis dans ce jeu de stratégie en temps réel télécharger Sophos Virus Removal Tool Windows logiciel Windows Sophos Virus Removal Tool - 2.0.0.0 L'outil de suppression de virus gratuit et immédiat en version 2 ! télécharger Image Tuner Windows logiciel Windows Image Tuner - 3.0 Effectuer les modifications par lot les plus courantes sur ses photos en un clic télécharger Scarab Darkroom Windows logiciel Windows Scarab Darkroom - 1.0 beta build 92 Visualiser, convertir et éditer ses photos au format RAW télécharger Logiciels | Démos | Vidéos | Patchs Mises à jour logiciels Internet Explorer 8 télécharger Internet Explorer 9 télécharger Samsung Kies télécharger Samsung Kies télécharger Notepad++ télécharger Tiny USB Office télécharger FlashGot télécharger SmoothDraw télécharger System Explorer télécharger VSO Downloader télécharger Larousse. Dictionnaire Larousse complet sur Votre PC. Téléchargement gratuit!
ImageImage ImageImageImage
Le site coolcatcheforum avec services gratuits pour tous! Bonne humeur et convivialite sont les cléfs de se site! Petite annonces, entre aide, asstuces, conseils, rencontres, tout ce que vous avez besoin.. ici notre objectif est de satisfaire...
LE LOGICIEL DU JOUR ET LES DERNIERES MAJ .............. Home 1.2.2 Home 1.2.2 Logiciel Windows | Internet Utilitaire gratuit et en français permettant via votre webcam de surveiller à distance votre habitation, veiller sur un proche ou sur votre animal de compagnie... Freemake Video Converter 3.0.2.3 Freemake Video Converter 3.0.2.3 Utilitaire gratuit et en français permettant de convertir vos vidéos en AVI, MP4, WMV, MKV, SWF, FLV, 3GP, MPEG, DVD, Blu-ray, MP3, iPod, iPhone, PSP, Android, Nokia, BlackBerry... EASEUS Partition Master Home Edition 9.1.1 EASEUS Partition Master Home Edition 9.1.1 Utilitaire gratuit permettant de gérer vos partitions sur votre disque dur... Dexpot 1.5.16 Build 1853 Dexpot 1.5.16 Build 1853 Excellent utilitaire gratuit et en français permettant d'avoir plusieurs bureaux virtuels... OCCT 4.2.0 OCCT 4.2.0 Testez la stabilité de votre système grâce à cet utilitaire gratuit, en français et portable... LedRenommer 1.9.0 LedRenommer 1.9.0 Utilitaire gratuit et en français permettant de renommer automatiquement et en série un ensemble de fichiers en fonction de règles définies par l'utilisateur...
Vous avons optimiser le site alors plus d'inquiétude.. http://togopub.tk est est le meilleur site qui peut vous créer un site gratuitement.. alors soyez complet
Rechercher
 
 

Résultats par :
 
Rechercher Recherche avancée
Compteur Traffic global
Compteur Global
Derniers sujets
Ceux qui commencent le plus de sujets
Admin
 
civitch
 
Admin MAROUF
 
Actu sport
 
jouad
 
epousthouflante
 
Gaetan_29
 
Publier le site Voter pour coolcatcheforum

Partagez | 
 

 Cadre esthétique

Aller en bas 
AuteurMessage
Admin
Admin
Admin
avatar

coolcatche monnaie : 100059418
Votre Réputation : 0
Date d'inscription : 04/02/2012
Localisation : ADMINISTRATEUR DU SITE

MessageSujet: Cadre esthétique   Mer 9 Mai - 13:59

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;">


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.










?
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.




?

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.
;







!
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 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.






Cadre tirets: Cadre idéal pour une information à découper, autrement dit des informations tel que les coupons de réduction, les bulletin à remplir ...
Pour reproduire ce cadre sur votre site web, il suffit de recopier
le code HTML ci-dessous, tout simplement en le copiant/collant.




Cadre tirets: Cadre idéal pour une
information à découper, autrement dit des
informations tel que les coupons de réduction, les bulletin à
remplir ...

Pour reproduire ce cadre sur votre site web, il suffit de
recopier le code HTML ci-dessous, tout simplement en le copiant/collant.








Cadre de contenu neutre: Ce cadre assez simpliste et discret peut être installer simplement en copiant/collant le code ci-dessous.




<;div style="padding:4px; border:4px solid #e0e0e0;">

Cadre de contenu neutre: Ce cadre
assez simpliste et discret peut être installer simplement en
copiant/collant le code ci-dessous.









Cadre cinéma: Rien de mieux pour un site qui a
pour thématique le cinéma. Une utilisation originale pourrait être de
mettre des vignettes d'un film dedans. Pour ce servir de
ce cadre, il suffit de se recopier ou de copier/coller le code
présent juste en dessous.




<;div style="padding:3px; background-color:#888;">

Cadre cinéma: Rien de mieux pour un
site qui a pour thématique le cinéma. Une utilisation originale
pourrait être de mettre des vignettes d'un film dedans. Pour
ce servir de ce cadre, il suffit de se recopier ou de
copier/coller le code présent juste en dessous.







Cadre orignal: Pour mettre en place ce cadre il
suffit de copier-coller le code ci-dessous. Pour personnaliser ce cadre,
il est possible de modifier la couleur de fond
(c'est-à-dire le code e3e3e3).



<;div style="padding:3px; border-top:5px dashed #fff; border-bottom:5px dashed #fff; background-color:#e3e3e3;">
Cadre orignal: Pour mettre en place
ce cadre il suffit de copier-coller le code ci-dessous. Pour
personnaliser ce cadre, il est possible de modifier la couleur de
fond (c'est-à-dire le code e3e3e3).






Cadre peu large: Pour personnaliser la largeur de
ce cadre, il faut modifier la valeur présent après le "width". La valeur
actuel est de 300 pixels.
Pour utiliser le cadre, il faut recoper le code présent juste en dessous.



<;div style="padding:5px;
width:300px; margin:auto; border:8px solid #67ab9f;
background-color:#b3d8d2; -moz-border-radius:20px;
-khtml-border-radius:20px;
-webkit-border-radius:20px; border-radius:20px;">

Cadre peu large: Pour personnaliser
la largeur de ce cadre, il faut modifier la valeur présent après le
"width". La valeur actuel est de 300 pixels. />
Pour utiliser le cadre, il faut recoper le code présent juste en dessous.






Cadre 1: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.



<;div style="padding:3px; border:4px inset #4cdc67; background-color:#4cdc67;">
Cadre 1: L'utilisation de ce cadre
est simple, il suffit de copier/coller le code présent juste en dessous
de ce cadre.






Cadre 2: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.



<;div style="padding:3px; border:4px outset #ee6388; background-color:#ee6388;">
Cadre 2: L'utilisation de ce cadre
est simple, il suffit de copier/coller le code présent juste en dessous
de ce cadre.






Cadre 3: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.



<;div style="padding:3px; border:8px ridge #d04cdc; background-color:#d04cdc;">
Cadre 3: L'utilisation de ce cadre
est simple, il suffit de copier/coller le code présent juste en dessous
de ce cadre.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://3vision-group.1fr1.net
 
Cadre esthétique
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» ['Christa] Quelque chose de plus esthétique sous les avatars des membres
» Aiguilles peco et ressort de blocage des lames
» Petit soucis esthétique avec le tuto intitulé "ajouter un bouton de sauvegarde"
» Une shoutbox plus esthétique
» *Cadre Le Lacet*

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
3vision-Group.com l Consuting - Infographisme - Site Web - Marketing - Maintenance :: Cours :: Programmation-
Sauter vers: