Imprimer la Page | Fermez la fenêtre

Création d'un cadre simple

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Tutoriaux utilisateurs
Description du Forum: Ecrivez ou consultez des tutoriaux OpenElement
Pas de questions dans cette rubrique merci.
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=15729
Date: 28 Mar 2024 à 13:41
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com


Sujet: Création d'un cadre simple
Posté par: Isa OE
Sujet: Création d'un cadre simple
Posté le: 14 Sep 2011 à 20:15

Création d'un cadre simple

La première étape consiste à créer l'image de base de votre cadre. Pour cela vous devez utiliser un logiciel graphique. Il en existe de nombreux gratuits ou non.  Pour ce tutoriels nous avons utilisé Paint.net (gratuit, il est téléchargeable sur internet)

1-      

 

1-Créer une image comme celle-ci dans Paint :

      Faire nouvelle image

            - Prendre l'outil de sélection (la flèche), cliquer sur le fond et le supprimer (touche "suppr" du clavier)

      - Choisissez une couleur

  --       - Prendre l'outil de "rectangle arrondi", dessiner un rectangle (ni trop grand, ni trop petit)

-    -    - Prendre l'outil "rectangle de sélection", entourer votre rectangle (attention de le centrer et de laisser moins de 1cm autour du rectangle)

-      -  - Cliquer sur le bouton dans la barre du haut "rogner la sélection"

-     -   - Allez dans "fichier", "enregistrer sous", sélectionnez comme type "png" puis "32 bits"

 

 2- 2-Dans OpenElement

Ici nous allons travailler avec l'élément cadre, mais le fonctionnement est identique pour créer un cadre sur les autres éléments (une image, un texte…)

--        - Ajouter un élément "cadre" sur votre page, le garder sélectionné

--        - Dans le menu du haut onglet élément, catégorie "avancée", cliquez sur "éditeur de cadre" (le magicien)

-  -      - Dans l'éditeur, cliquer sur "importer une image", sélectionner votre image

-   -     - Déplacer les règles (en rouges) de façon à les positionner comme sur l'image suivante

(Les zones cadrées sur l'image suivante doivent pouvoir se répéter)

 

 

 -    -    - Si  vous souhaiter créer un cadre avec un fond, cliquer sur le bouton "exporter le fond", ce n'est pas le cas dans notre exemple

-     -     - Cliquer sur "Appliquer et quitter"

 Voici le résultat :

 

Vous pouvez bien sur revenir dans l'éditeur pour supprimer un cadre ou le modifier

 Pour en faite un modèle d'élément, vous devez sélectionner votre élément puis cliquer sur enregistrer comme modèle (Dans le menu du haut, catégorie "avancée"


Pour positionnez le texte  si vous appliquez le cadre sur une zone texte :
- Sélectionnez l'élément
- Menu de droite / style / Personnalisation
- Categorie "textes",  Ligne "hauteur de ligne" mettez la hauteur souhaitez, le texte se centrera dans cette hauteur


Pour positionner le texte dans un bouton lien :
Dans les bouton, vous devez sélectionner la zone de style "Zone de texte" (menu haut, Onglet zone de styles, Categorie "zone de styles"
- Sure le même onglet dans espacement, modifiez les espacements "extérieur"







Réponses:
Posté par: Louyse
Posté le: 12 Mai 2014 à 16:51
Merci beaucoup pour ce super tuto et pour toute l'aide apportée.
Bonne journée.Smile


-------------
Merci beaucoup pour toute l'aide offerte.



Imprimer la Page | Fermez la fenêtre

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net