FRANCAIS
WYSIWYG WEB BUILDER 16
Copyright © 2020 WYSIWYGWeb Builder. Tous les droits sont réservés.
WYSIWYGWeb Builder 16
Table des matières
TABLE DES MATIÈRES............................................... .................................................. ............................. II
WYSIWYG WEB BUILDER ................. .................................................. .................................................. ... 6
6
INTRODUCTION ................................................. .................................................. ...............................................
INTRODUCTION RAPIDE ............................................ ................................................................
7
.......................
En quoi WYSIWYGWeb Builder est-il différent d'un éditeur HTML? ..................................... ...................7
Démarrez Web Builder ............................................... .................................................. ............................... 8
Ajout de texte à la page ............................................. .................................................. ..................... 13
Ajout d'une image à une page Web ........................................... .................................................. .......... 14
Faire pivoter une image ............................................... .................................................. ............................... 15
Appliquer des effets à une image ............................................. .................................................. .................. 15
Lier vos pages entre elles (Créer des hyperliens) .......................................... ................................. 16
Sauvegarde de votre site Web .............................................. .................................................. ......................... 16
Aperçu d'une page ............................................... .................................................. ................................. 17
Publication de vos pages Web .............................................. .................................................. ............... 18
Et après? .................................................. .................................................. ................................. 20
WYSIWYGWEBB UILDER
O PTIONS ................................................. ..................................................
21
...........
Fichier................................................. .................................................. .................................................. 21
Accueil................................................. .................................................. .............................................. 24
Vue ................................................. .................................................. ............................................... 26
Page ................................................. .................................................. ............................................... 27
Table ................................................. .................................................. .............................................. 51
Organiser ................................................. .................................................. .......................................... 54
Outils................................................. .................................................. ............................................... 58
Objets WYSIWYGWeb Builder ............................................... .................................................. ....... 79
Style ................................................. .................................................. ............................................... 80
Signet................................................. .................................................. ....................................... 82
Liste à puces................................................ .................................................. ..................................... 83
Ligne horizontale ................................................ .................................................. ................................ 84
Titre................................................. .................................................. .......................................... 85
Texte ................................................. .................................................. ................................................ 92
Forme................................................. .................................................. ............................................... 97
Bouton avancé ................................................ .................................................. ........................... 104
CAPTCHA ................................................. .................................................. ...................................... 105
Case à cocher ................................................. .................................................. ...................................... 107
Boîte combo ................................................. .................................................. .................................... 108
Boîte d'édition ................................................. .................................................. ......................................... 110
Téléchargement de fichiers ................................................ .................................................. .................................... 112
ii
WYSIWYGWeb Builder 16
Interrupteur à levier ................................................. .................................................. ..................................... 113
Bouton Image ................................................ .................................................. ................................ 114
Bouton poussoir ................................................ .................................................. ................................... 115
Bouton radio ................................................ .................................................. ................................. 116
TextArea ................................................. .................................................. ....................................... 117
ActiveX ................................................. .................................................. ......................................... 118
Éditeur de fichiers ................................................ .................................................. ................................. 119
Éclat................................................. .................................................. ............................................. 120
Lecteur vidéo WWB ............................................... .................................................. ......................... 122
HTML ................................................. .................................................. ............................................ 123
Java ................................................. .................................................. .............................................. 125
Cadre en ligne ................................................ .................................................. .................................. 126
Couche ................................................. .................................................. ............................................ 127
Couche de survol ................................................ .................................................. ............................... 130
Grille de mise en page ................................................ .................................................. .................................... 131
Conteneur Flex ................................................ .................................................. ............................... 134
Grille Flex ................................................ .................................................. ........................................ 136
Page intégrée ................................................ .................................................. ............................ 139
Espace réservé au contenu ............................................... .................................................. ..................... 141
Cadres maîtres ................................................ .................................................. .............................. 141
Pied de page................................................ .................................................. ................................... 143
En-tête de page ................................................ .................................................. .................................. 144
Texte d'habillage ................................................ .................................................. .............................. 145
Lecteur multimédia ................................................ .................................................. ................................. 147
Youtube ................................................. .................................................. ....................................... 148
Miette de pain ................................................. .................................................. ................................. 149
Menu Aller ................................................ .................................................. ....................................... 151
Menu des couches ................................................ .................................................. ................................... 152
Méga menu ................................................ .................................................. ................................... 153
Barre de menu ................................................ .................................................. ...................................... 155
Barre de navigation ................................................ .................................................. .............................. 156
Menu Superposition ................................................ .................................................. ................................ 158
Pagination................................................. .................................................. .................................... 159
Menu du panneau ................................................ .................................................. ................................... 160
Menu réactif ................................................ .................................................. .......................... 162
SiteTree ................................................. .................................................. ........................................ 163
Défilement Snap ................................................ .................................................. ..................................... 164
Menu texte ................................................ .................................................. ..................................... 166
iii
WYSIWYGWeb Builder 16
Bannière................................................. .................................................. .......................................... 167
Clipart ................................................. .................................................. .......................................... 169
Courbe ................................................. .................................................. ........................................... 170
Texte incurvé ................................................ .................................................. ................................... 171
Ligne................................................. .................................................. ............................................... 172
Polygone ................................................. .................................................. ........................................ 174
Griffonner................................................. .................................................. ......................................... 175
Forme ................................................. .................................................. ........................................... 176
Forme de morphing ................................................ .................................................. ............................ 179
Blog ................................................. .................................................. .............................................. 180
Carrousel ................................................. .................................................. ....................................... 181
Stock Photo ................................................ .................................................. ................................... 185
Galerie de photos ................................................ .................................................. ................................ 186
Scripts Java prêts à l'emploi ............................................. .................................................. ................. 189
Texte de survol ................................................ .................................................. ................................. 191
Flux RSS................................................ .................................................. ....................................... 192
Symbole du fil d'actualité ............................................... .................................................. ........................... 194
Diaporama ................................................ .................................................. ..................................... 196
Recherche du site................................................ .................................................. ..................................... 197
Données structurées ................................................ .................................................. ............................. 199
Minuterie ................................................. .................................................. ............................................ 200
Outils de commerce électronique PayPal ............................................... .................................................. ............... 201
Outils de connexion PHP ............................................... .................................................. .............................. 206
Système de gestion de contenu ............................................... .................................................. ....... 223
Base de données CMS ................................................ .................................................. ............................... 224
Administrateur CMS ................................................ .................................................. .................................... 226
Étiquette CMS ................................................ .................................................. ..................................... 234
Menu CMS ................................................ .................................................. ..................................... 235
Recherche CMS ................................................ .................................................. ................................... 236
Vue CMS ................................................ .................................................. ...................................... 237
Contenu modifiable ................................................ .................................................. ........................... 239
Administrateur de contenu modifiable ............................................... .................................................. ................. 240
Accordéon ................................................. .................................................. ..................................... 241
Saisie automatique ................................................ .................................................. .............................. 242
Bouton Themeable ................................................ .................................................. ......................... 243
Cartes ................................................. .................................................. ............................................ 244
Conteneur de carte ................................................ .................................................. .............................. 245
Sélecteur de date................................................. .................................................. .................................... 246
iv
WYSIWYGWeb Builder 16
Dialogue................................................. .................................................. ........................................... 247
ListView ................................................. .................................................. ........................................ 249
Onglets ................................................. .................................................. .............................................. 251
Pain grillé ................................................. .................................................. ............................................ 252
Barre de progression ................................................. .................................................. ..... 253
Glissière ................................................. .................................................. ............................................ 254
Spinner ................................................. .................................................. ......................................... 256
Sorcier................................................. .................................................. .......................................... 257
Info-bulles ................................................. .................................................. ........................................ 258
jQuery Mobile ................................................ .................................................. ............................... 259
jQuery Mobile pliable ............................................... .................................................. .............. 262
Commutateur à bascule mobile jQuery .............................................. .................................................. . 262
jQuery Mobile Slider ............................................... .................................................. ....................... 262
Grille de mise en page jQuery Mobile .............................................. ...................... .............. 263
Onglets jQuery Mobile ............................................... .................................................. ........................ 263
Pied de page jQuery Mobile ............................................... .................................................. ..................... 264
En-tête jQuery Mobile ............................................... .................................................. .................... 265
jQuery Mobile Listview ............................................... .................................................. ................... 266
Menu imbriqué jQuery Mobile .............................................. .................................................. ........... 267
Menu contextuel jQuery Mobile .............................................. .................................................. ............ 267
jQuery Mobile Panel ............................................... .................................................. ....................... 268
Tableau réactif jQuery Mobile .............................................. .................................................. ..... 269
P UBENISSEZ VOTRE SITE WEB ................................................ ..................................................
271 L...........................
ENCRES
................................................. .................................................. ..................................................
275 SITEM ANAGER
................................................. .................................................. .....................................
280 OBJECTM ANAGER .................................................
.................................................. .................................
284 PCORDES
je NSPECTOR .................................................
.................................................. ..........................
286 STYLEM ANAGER ................................................. ..................................................
...................................
287 GRADIENT
S TYLEM ANAGER ................................................. ..................................................
287 ....................
EÉVENTS
................................................. .................................................. ................................................
288 CSS3 ANIMATIONS ET
T RANSITIONS
................................................. ..................................................
290 MOTION
.......E FFECTS .................................................
.................................................. ..................................
293 RESPONSIF
W EBré ESIGN .................................................
.................................................. .......................
295 FORMV ALIDATION ................................................. ..................................................
................................
297 FORMC ONDITIONS ET
C ALCULATIONS ................................................. ..................................................
300 FLEXBOX
.....
P CORDES ................................................. .................................................. .............................
302 CUTILISATION
WYSIWYGWEBB UILDER
................................................. ..................................................
303 CRÉAGIR
.. N EWSLETTERS .................................................
.................................................. .........................
305
INDEX ................................................. .................................................. ............................................. 306
v
WYSIWYGWeb Builder 16
WYSIWYGWeb Builder
introduction
WYSIWYGWeb Builder est une solution logicielle tout-en-un pour créer des sites Web complets. What-You-SeeIs-What-You-Get
(WYSIWYG) signifie que tous les éléments de la page seront affichés exactement à la même position (mise en page fixe) que dans le
concepteur contrairement aux mises en page fluides (dynamiques) (générées par les éditeurs HTML traditionnels) où la position des
objets dépend de la position et de la taille des objets qui l'entourent. WYSIWYGWeb Builder génère des balises HTML (Hypertext
Markup Language) ou XHTML pendant que vous pointez et cliquez sur les fonctions disponibles; vous pouvez créer une page Web
sans apprendre le HTML. Faites simplement glisser et déposez les objets sur la page, positionnez-les «n'importe où» et lorsque vous
avez terminé, publiez-les sur votre serveur Web (en utilisant l'outil de création dans Publish). WYSIWYGWeb Builder vous donne un
contrôle total sur le contenu et la mise en page de vos pages Web.
Principales caractéristiques:
•
Glissez-déposez des objets HTML: texte, lignes, images, chapiteaux, tableaux et bien plus encore! Sortie HTML,
•
XHTML ou HTML5.
•
Conception Web réactive (points d'arrêt) basée sur les requêtes multimédias CSS3. Outils de conception
•
Web mobile avec prise en charge intégrée de jQuery Mobile.
•
Prend en charge de nombreuses fonctionnalités CSS3: boîte-ombre, opacité, coins arrondis etc. Gestion de site.
•
Ajoutez, modifiez, clonez et structurez facilement vos pages Web.
•
Assistant de formulaire; créez des formulaires en moins de 4 étapes et de nombreux formulaires prêts à l'emploi! Script de traitement
•
de formulaire intégré avec outils de validation de formulaire et CAPTCHA.
•
Objets de forme (rectangle, ellipse, flèches, signes, étoiles, bulles de conversation et plus) avec de nombreux effets de remplissage tels que des solides,
des motifs de dégradés et du verre.
•
Prise en charge de YouTube, JAVA, Flash, HTML5 Audio / Vidéo, Flash Video (FLV) et d'autres plug-ins. Images de survol et images de
•
diaporama (avec de nombreuses animations de transition).
•
Texte de survol, affiche une bannière de texte sur l'image au passage de la souris avec des animations. Objet de galerie photo
•
avec cadres photo et prise en charge intégrée du diaporama de la boîte à lumière. Scripts Java prêts à l'emploi.
•
•
Barre de navigation, menu texte, méga menu, menu onglet, menu coulissant, siteTree et barre de menus. Prise en charge des
•
modèles. Plus de 100 modèles gratuits disponibles.
•
Publiez votre site Web sur n'importe quel hébergement.
•
Objets maîtres et cadres maîtres. Cela vous permet de réutiliser des objets d'autres pages. Layer Object pour
•
des possibilités de mise en page avancées: Modal, Sticky, Panel Fixed, etc.
•
•
Animations et transitions CSS3.
•
Fenêtre Inspecteur des propriétés pour une manipulation rapide des objets.
•
Outils d'image: contraste, luminosité, retournement, rotation, rééchantillonnage, teinte / saturation, pochoirs et recadrage. Effets d'image:
•
niveaux de gris, négatifs, sépia, flou, adoucir, netteté, bruit, relief et plus encore! Outils de dessin: ligne, ligne + flèches, gribouillis, polygone,
•
courbe et courbe fermée. Implémentez des événements pour les images, les formes et les contrôles de formulaire!
•
•
Outils de connexion PHP / Protection des pages.
•
Fonctionnalité du système de gestion de contenu avec prise en charge des plug-ins. Outils de commerce
•
électronique PayPal.
•
Prise en charge de la fenêtre contextuelle pour les liens
•
Prise en charge intégrée de jQuery: accordéon, onglets, boîte de dialogue, sélecteur de date, complétion automatique, animations, etc. !!! Recherche du site
•
•
Fonctionnalité du carrousel
•
Objet ticker de fil d'actualité pour intégrer les fils RSS, Twitter, Flickr, Facebook etc. et bien plus encore…
•
vi
WYSIWYGWeb Builder 16
Pour commencer, une introduction rapide
WYSIWYGWeb Builder est un outil de création de site Web qui vous aide à concevoir et à créer des sites Web complets sans avoir à apprendre le HTML.
Lorsque vous prévisualisez ou publiez une page, Web Builder génère automatiquement le code HTML dont votre navigateur Web a besoin pour afficher
les pages. Ce chapitre vous aide à démarrer en quelques étapes simples. Vous pouvez trouver plus de détails sur chaque élément ailleurs dans ce
document.
En quoi WYSIWYG Web Builder est-il différent d'un éditeur HTML?
L'idée derrière cette application est de cacher le HTML à l'utilisateur. WYSIWYGWeb Builder n'est pas un éditeur HTML, mais un générateur HTML. Vous n'avez
même pas besoin de savoir qu'il y a du HTML. Faites simplement glisser et déposez des images, du texte et d'autres objets sur votre page et votre page est prête
à être publiée! Vous pouvez le considérer comme un outil de publication assistée par ordinateur pour les sites Web.
Web Builder ne modifie pas directement le code HTML, mais utilise son propre format de fichier (.wbs) pour stocker les informations du site
Web. Vous pouvez même stocker votre site Web complet dans un seul fichier!
En n'utilisant pas HTML en interne, Web Builder peut faire bien plus que simplement générer des objets HTML standard: il prend en charge les formes,
les dessins, les barres de navigation, les flux RSS, les blogs, les galeries de photos, le JavaScript prêt à l'emploi et des objets bien plus avancés.
Pointe: Pour exporter vos pages au format HTML, vous devez utiliser l'outil de publication intégré!
Si vous le souhaitez, vous pouvez insérer du HTML existant dans votre page en utilisant les outils HTML (Page HTML et l'objet HTML). Vous pouvez également insérer
des attributs personnalisés ou tout autre code dans presque tous les objets.
FrontPage, Dreamweaver, etc. utilisent une méthode de mise en page de document (traitement de texte), dans laquelle vous ne pouvez pas ramasser des objets et les faire
glisser là où vous voulez les placer sur la page Web. Dans WYSIWYGWeb Builder, vous pouvez faire glisser et déposer les objets où vous le souhaitez, vous donnant un
contrôle total sur la mise en page. En mode de mise en page absolue Vous pouvez même placer des objets au-dessus (ou en dessous) d'autres objets!
WYSIWYGWeb Builder prend en charge plusieurs façons de créer des sites Web réactifs.
•
Dispositions fixes / absolues (conception Web adaptative)
Par défaut, les mises en page sont fixées à l'aide de positions absolues. Cela signifie que vous pouvez placer des objets où vous le souhaitez, vous
avez donc un contrôle complet sur la mise en page. L'inconvénient de ce mode de mise en page est qu'il sera plus difficile de rendre la page réactive car
la mise en page n'aura l'air parfaite que sur la taille d'écran pour laquelle elle a été conçue. Et comme il n'y a pas de «structure» dans la mise en page
(les objets peuvent être placés n'importe où dans un ordre aléatoire), il n'y a aucun moyen pour le navigateur de repositionner et / ou mettre à l'échelle
automatiquement le contenu en fonction du port d'affichage. Ainsi, pour vous assurer que le contenu de la page a l'air bien dans différentes fenêtres
(tailles d'écran), vous devrez implémenter des points d'arrêt (différentes variantes de mise en page) de la même page. Cette technique de conception
est également connue sous le nom de «Conception Web adaptative».
•
Dispositions flexibles / flottantes (redistribution)
Vous pouvez implémenter des mises en page flexibles en utilisant des grilles de mise en page et / ou Flexbox. Cela permet de créer des mises en page de type
Bootstrap. Lorsque vous utilisez des grilles de mise en page, la mise en page est contrôlée par les grilles. Les objets seront automatiquement redimensionnés en
fonction de l'espace disponible dans la fenêtre et de la taille de la colonne de la grille. L'inconvénient de l'utilisation des grilles de mise en page est que vous avez
moins de contrôle sur la mise en page. Tous les objets seront positionnés et redimensionnés automatiquement. Ainsi, vous êtes obligé dans une mise en page
structurée.
Tutoriel connexe: http://www.wysiwygwebbuilder.com/layout_modes.html
Pointe: Pour obtenir des instructions étape par étape sur les fonctionnalités de base de WYSIWYGWeb Builder, veuillez visiter les didacticiels en ligne:
http://www.wysiwygwebbuilder.com/getting_started.html
7
WYSIWYGWeb Builder 16
Démarrez Web Builder
Cliquez sur l'icône WYSIWYGWeb Builder pour lancer l'application.
Après avoir lancé WYSIWYG Web Builder, l'écran principal ressemblera à ceci:
Par défaut, l'interface du ruban sera active, mais si vous préférez, vous pouvez également passer au menu / barres d'outils classiques dans
Outils-> Options-> Interface utilisateur.
8
WYSIWYGWeb Builder 16
Ruban
Le ruban vous donne un accès rapide à tous les outils disponibles. Le ruban contient des onglets pour exposer différents ensembles d'éléments de contrôle, éliminant ainsi le
besoin de nombreuses barres d'outils différentes basées sur des icônes. Certains de ces onglets sont contextuels et n'apparaissent que lorsqu'un certain type d'objet est
sélectionné, fournissant des outils spécifiques pour des éléments tels que des tableaux, du texte ou des images.
Vous pouvez réduire le ruban en cliquant avec le bouton droit sur le ruban. Lorsque le ruban est réduit, vous pourrez toujours accéder à tous les onglets
du ruban, mais les outils se cacheront pour libérer de l'espace sur l'écran.
Onglets contextuels
Les onglets contextuels n'apparaissent qu'en cas de besoin. Par exemple, si vous sélectionnez un objet image, les outils d'image s'afficheront. Les
outils se cacheront automatiquement si vous désélectionnez l'objet.
Outils de formatage de texte
Les outils de mise en forme de texte ne sont actifs que lorsque vous êtes en mode d'édition de texte.
Pour insérer du texte, faites simplement glisser l'icône de texte sur l'espace de travail. Un nouvel objet avec le texte "Double-cliquez pour modifier" sera affiché
sur la page. Pour passer en mode d'édition de texte, double-cliquez sur ce texte et les outils de mise en forme deviendront actifs. Pour certains outils, vous devez
mettre le texte en surbrillance avant qu'ils peut être utilisé (comme dans un éditeur de texte classique).
9
WYSIWYGWeb Builder 16
Barre d'accès rapide
Vous pouvez placer les commandes que vous utilisez le plus souvent dans la barre d'outils d'accès rapide au-dessus du ruban. Tout comme le ruban, cette barre d'outils est
entièrement personnalisable.
Menu Fichier
Le menu Fichier contient toutes les commandes liées aux fichiers telles que Ouvrir, Enregistrer, Fermer et Publier.
Boîte à outils
La boîte à outils peut être utilisée pour ajouter de nouveaux objets à vos pages Web. Pour insérer un nouvel objet, sélectionnez l'un des éléments disponibles et
dessinez un cadre pour indiquer la position de l'objet. Le nouvel objet sera maintenant inséré dans la page. Une autre façon d'ajouter des objets à votre page
consiste simplement à les faire glisser hors de la boîte à outils vers l'espace de travail.
Onglets
Lorsque vous avez ouvert plusieurs pages, vous pouvez utiliser les onglets pour basculer entre les pages. Pour fermer la page active, appuyez sur le petit
«x» dans le coin supérieur droit de la bande d'onglets.
Espace de travail
Le centre de l'écran est l'espace de travail, dans lequel vous pouvez faire glisser et déposer des objets depuis la boîte à outils. Cela représente votre page
Web.
dix
WYSIWYGWeb Builder 16
Gestionnaire de site
Le Gestionnaire de site peut être utilisé pour gérer la structure de votre site Web.
Le gestionnaire de site possède sa propre barre d'outils pour ajouter, modifier, cloner ou supprimer des pages. Il existe également un bouton pour ouvrir les propriétés de la page
sélectionnée.
Dans l'image ci-dessus, vous voyez un exemple de structure de site Web. Le nom de fichier de cet exemple de site Web s'appelle «mywebsite.wbs», ce nom
est toujours affiché à la racine de l'arborescence du site Web. La racine peut avoir une ou plusieurs pages et chaque page peut avoir des sous-pages. Les
sites Web ont toujours un page d'accueil, qui est souvent appelé indice, c'est pourquoi Web builder ajoute automatiquement cette page à chaque nouveau
projet. Les noms des éléments (pages) dans l'arborescence du site sont les noms de fichiers réels des fichiers HTML cibles, donc si vous avez nommé une
page «index», il sera publié sous le nom index.html. N'ajoutez pas l'extension de fichier dans le gestionnaire de site!
Pointe: Assurez-vous que toutes les pages d'un site Web font partie du même projet. De cette façon, Web Builder «saura» que les pages vont ensemble
et générera un code HTML optimal pour votre site Web.
Chaque fois que vous insérez une nouvelle page sur votre site Web, elle sera ajoutée au gestionnaire de site. Pour éditer des pages créées
précédemment, vous pouvez double-cliquer sur le nom de la page pour l'ouvrir dans l'éditeur.
Note importante:
Si vous rouvrez le projet, seule la première page sera ouverte (pour réduire le temps de chargement du projet et limiter la mémoire allouée). Pour
ouvrir d'autres pages du projet, vous devez utiliser le Gestionnaire de site. Si vous ne voyez pas également vos pages, vous les avez peut-être
ajoutées en tant qu'enfant d'une autre page. Cliquez sur le signe «+» devant la page (ou le dossier) pour développer l'arborescence.
Vous trouverez plus d'informations sur le Gestionnaire de site plus loin dans ce document.
11
WYSIWYGWeb Builder 16
Inspecteur des propriétés
Utilisez la fenêtre Inspecteur des propriétés pour afficher et modifier les propriétés des objets sélectionnés. Vous pouvez également utiliser la fenêtre
Inspecteur des propriétés pour modifier les propriétés de la page. Les modifications seront visibles immédiatement. La fenêtre Inspecteur des propriétés
affiche différents types de champs d'édition, en fonction des besoins d'une propriété particulière. Ces champs d'édition comprennent des zones d'édition, des
listes déroulantes et des liens vers des boîtes de dialogue de l'éditeur personnalisé. Il est également possible de modifier manuellement la taille et la position
de l'objet sélectionné en modifiant les propriétés Position et Taille.
La propriété ID
La propriété ID d'un objet doit être unique dans la page. Normalement, Web Builder attribuera automatiquement des noms uniques à
votre objet. Cependant, si vous utilisez un ou plusieurs objets maîtres, les ID peuvent être dupliqués, car le logiciel ne peut pas distinguer
un maître d'une page normale.
L'inspecteur de propriétés vous donne également accès à des attributs plus avancés comme l'ID d'un objet. Cela peut être utile si vous utilisez des pages
maîtres et que vous souhaitez attribuer aux éléments de la page un identifiant unique. Nous vous recommandons de donner aux objets sur une page
maître des noms avec un préfixe tel que MasterPage_Text1. Cela garantira que si la page maître est utilisée dans une autre page, l'ID des objets est
unique.
Classe
Spécifie le nom de classe de l'objet. La valeur peut être un style (créé dans le Gestionnaire de styles) ou une classe personnalisée. Certains objets
ont une option «Style prédéfini» dans les propriétés du style. C'est fondamentalement la même propriété (Style = classe HTML).
Cependant, pour les objets qui ne prennent pas en charge le style prédéfini, cette propriété ne modifie pas l'apparence dans l'espace de
travail. Dans ce cas, il ajoute simplement class = "value" au conteneur de l'objet.
Cela peut être utile pour les utilisateurs avancés qui souhaitent plus de contrôle sur le style ou le comportement de l'objet.
12
WYSIWYGWeb Builder 16
Ajout de texte à la page
L'une des premières étapes de la création d'une page Web consiste souvent à ajouter du texte.
Sélectionnez Insertion-> Texte dans le menu et dessinez un cadre pour indiquer la position du texte. Ensuite, double-cliquez sur la case pour commencer à modifier le
texte. Tapez du texte et (appuyez sur Entrée pour passer à la ligne suivante). La boîte change automatiquement sa taille pour s'adapter au texte.
Ensuite, vous pouvez modifier les attributs de texte en mettant en surbrillance le texte que vous souhaitez modifier avec la souris, puis en choisissant les nouveaux attributs
dans l'onglet Format. Vous pouvez modifier le type de police, la taille, le gras, l'italique, le soulignement, la couleur du texte, la couleur de surbrillance et de nombreux autres
attributs. Notez que les outils de mise en forme sont également disponibles dans le menu contextuel de l'éditeur de texte.
Cliquez n'importe où dans la page pour arrêter l'édition.
13
WYSIWYGWeb Builder 16
Ajout d'une image à une page Web
Sélectionnez Insertion-> Image dans le menu et dessinez un cadre pour indiquer la position de l'image ou sélectionnez
Image dans la boîte à outils. La taille de la boîte n'a pas d'importance; Web Builder ajuste automatiquement la boîte pour qu'elle s'adapte à l'image une fois que vous l'avez
placée.
La boîte de dialogue Ouvrir le fichier image s'affiche pour vous permettre de localiser l'image que vous souhaitez placer dans la zone d'image. Sélectionnez l'image que
vous souhaitez ajouter et cliquez sur Ouvrir pour l'ajouter à la page.
Pour redimensionner l'image, faites glisser les bordures (poignées) de l'objet image.
14
WYSIWYGWeb Builder 16
Faire pivoter une image
Vous pouvez faire pivoter des objets d'image et de forme.
Pour faire pivoter un objet:
1. Sélectionnez l'outil Rotation sur le ruban ou cliquez avec le bouton droit et sélectionnez Rotation.
2. Cliquez pour sélectionner l'objet, passez la souris sur l'une de ses poignées jusqu'à ce que vous voyiez le pointeur de rotation.
3. Maintenez le bouton de la souris enfoncé et faites glisser dans la direction dans laquelle vous souhaitez faire pivoter l'objet, puis relâchez. Utilisez la touche Shift pour
des intervalles de rotation de 15 °.
Appliquer des effets à une image
Dans WYSIWYGWeb Builder, vous pouvez appliquer des effets aux images sans avoir à ouvrir un éditeur d'images séparé! Quelques-uns des effets
disponibles sont: Contraste, Luminosité, Flou, Niveaux de gris, Emboss, Négatif, Sépia, Netteté, Adoucir, Pochoirs et bien plus encore!
15
WYSIWYGWeb Builder 16
Lier vos pages entre elles (Créer des hyperliens)
Les hyperliens sont du texte ou des images sur lesquels il est possible de cliquer pour amener l'utilisateur vers un autre fichier Web tel qu'une page Web, des
images ou tout autre fichier. Ils sont l'essence même du World Wide Web car ils relient des pages dans des sites et des sites Web à d'autres sites Web. Pour créer
un lien hypertexte dans Web Builder, suivez les instructions ci-dessous.
Texte de lien
Mettez en surbrillance le texte que vous souhaitez lier et sélectionnez Insertion-> Lien dans la barre de menus, cliquez sur le bouton de lien dans la barre d'outils ou appuyez
sur CTRL + K sur votre clavier. Cela affichera la fenêtre Insérer un lien hypertexte.
Lier une image, une forme ou une image de survol.
Veuillez lire le chapitre «Liens» de ce document pour plus de détails sur les liens.
Sauvegarde de votre site Web
Pour enregistrer votre site Web, sélectionnez Menu-> Fichier-> Enregistrer le site Web dans le menu et entrez un nom pour le projet. Web Builder utilise
l'extension .wbs (Web Builder Site) pour enregistrer les fichiers du projet, pour enregistrer votre page au format HTML, vous devrez publier vos pages.
16
WYSIWYGWeb Builder 16
Prévisualiser une page
Sélectionnez Accueil-> Aperçu dans le navigateur-> Navigateur par défaut (F5) pour prévisualiser la page actuelle dans votre navigateur par défaut. Il est également possible
de changer le navigateur utilisé pour la prévisualisation. Accédez à Accueil-> Aperçu dans le navigateur-> Modifier la liste des navigateurs pour ajouter / modifier la liste des
navigateurs pouvant être utilisés pour prévisualiser les pages sur lesquelles vous travaillez.
En fonction de la portée de l'aperçu (Outils-> Options-> Divers), vous pouvez prévisualiser une seule page ou l'intégralité du site Web. Maintenez la
touche SHIFT enfoncée pendant la prévisualisation pour «inverser» la portée actuelle de l'aperçu.
Note importante: Les liens internes ne fonctionnent pas dans l'aperçu, sauf si vous avez défini l'étendue de l'aperçu sur tout le site Web! Si vous ne
prévisualisez qu'une seule page, votre navigateur ne pourra pas trouver toutes les autres pages (internes) sauf si vous les générez également!
Une autre note: Vous ne pouvez pas prévisualiser les pages qui utilisent PHP dans votre navigateur local. Les pages PHP ne peuvent être consultées que via un
serveur Web prenant en charge PHP.
17
WYSIWYGWeb Builder 16
Publication de vos pages Web
La phase finale de la création d'un site Web est la publication de vos pages. Pour placer vos pages sur le Web, vous avez besoin d'un serveur Web. Communément
appelés hôtes, les serveurs Web vous permettent de transférer et de stocker des fichiers, notamment des documents HTML, des images et des fichiers multimédias. À
moins que vous ne possédiez votre propre serveur Web, vous devez trouver un serveur pour héberger vos pages. Quelques exemples d'hôtes Web sont:
http://www.godaddy.com/
http://www.1and1.com/
mais bien sûr, il y en a beaucoup plus!
Assurez-vous de choisir un hébergeur qui prend en charge FTP; cela facilite grandement la publication de vos pages à partir de Web Builder.
Publiez sur un serveur FTP distant.
Une fois que vous vous êtes inscrit auprès d'un hébergeur, vous recevrez une adresse de serveur, un nom d'utilisateur et un mot de passe. Entrez ces informations dans
Web Builder en sélectionnant: Fichier-> Publier. Cliquez sur Ajouter et sélectionnez Type ' Serveur ftp ». Parfois, vous devez également spécifier un dossier distant. Les
emplacements communs des dossiers distants sont: / www, / public_html, / html, mais malheureusement, cette valeur peut être différente pour chaque hébergeur, alors
consultez la documentation de votre hébergeur pour plus de détails! Si vous disposez d'un pare-feu / routeur, sélectionnez «Utiliser le mode passif pour les transferts».
Cliquez sur OK pour enregistrer. Vous pouvez désormais publier chaque page simplement en sélectionnant Publier.
18
WYSIWYGWeb Builder 16
Publier sur un serveur FTP sécurisé
Les protocoles suivants sont pris en charge:
•
FTP avec TLS / SSL (port 990 - implicite)
•
FTP avec TLS / SSL (AUTH TLS - Explicit)
•
SFTP utilisant SSH2 (Secure Shell)
Les paramètres disponibles sont les mêmes que pour le FTP standard. Notez cependant que les hébergeurs Web utilisent généralement des ports différents pour les
serveurs sécurisés.
Les numéros de port par défaut sont:
•
Port 990 pour FTP avec TLS / SSL (Port 990 - implicite)
•
Port 21 pour FTP avec TLS / SSL (AUTH TLS - Explicit)
•
Port 22 pour SFTP utilisant SSH2 (Secure Shell)
Canal de contrôle clair
Rétablit le canal de contrôle FTP de SSL / TLS à un canal non chiffré. Cela peut être nécessaire lors de l'utilisation de FTPS avec
AUTH TLS où le client FTP est derrière un routeur DSL ou câble-modem qui effectue NAT (traduction d'adresse réseau).
Si le canal de contrôle est crypté, le routeur ne peut pas traduire l'adresse IP envoyée dans la commande PORT pour les transferts de
données. En effaçant le canal de contrôle, les transferts de données resteront cryptés, mais les commandes FTP sont transmises non
cryptées.
Niveau de journal
Spécifie le niveau de journalisation. Cela contrôle la quantité de détails enregistrés lors de la publication.
•
avertissement
Seuls les avertissements et les erreurs seront enregistrés. Info
•
Seules les informations de base seront enregistrées, comme les fichiers transférés. Tout
•
Journalisation détaillée. Cela inclut les commandes de protocole de transfert.
Notez que la journalisation a un impact sur les performances. Si plus d'informations sont enregistrées, le traitement prendra plus de temps et
le transfert sera plus lent.
Publier dans un dossier local
Si votre hébergeur ne prend pas en charge FTP ou si vous souhaitez utiliser votre client FTP préféré pour transférer les fichiers vers le serveur, vous pouvez
utiliser l'option «Publier dans un dossier local». Cliquez sur Ajouter pour ajouter un nouvel emplacement à la liste. Entrez un nom pour l'emplacement et
sélectionnez ' Dossier local 'comme type. Entrez le dossier dans lequel vous souhaitez publier le document actif. Cliquez sur OK pour enregistrer les données, puis
sur Publier pour enregistrer les fichiers dans le dossier spécifié. Vous pouvez maintenant extraire ces fichiers du dossier local et les publier à l'aide de votre
utilitaire FTP préféré.
19
WYSIWYGWeb Builder 16
Pages à publier
Sélectionnez la ou les pages que vous souhaitez publier.
•
Site Web complet, publie toutes les pages du site Web (à l'exception des pages qui ont activé «Ne pas publier cette page» dans
•
Sélectionnez la page uniquement, publie la page de sélection, cliquez sur Sélectionner pour spécifier la page à publier.
•
Sélectionnez Page et sous-pages, publie la page de sélection et toutes ses sous-pages (le cas échéant).
•
Publiez des pages à l'aide du gabarit sélectionné. Cela publiera tous les fichiers en utilisant la page maître sélectionnée. Cela peut être
les propriétés de la page)
utile si vous avez apporté des modifications à une page maître et que vous souhaitez rapidement republier toutes les pages qui utilisent cette
page maître.
Que faire en cas d'erreurs de publication?
•
Assurez-vous que votre adresse ftp (hôte) est correcte. Votre nom
•
d'utilisateur et votre mot de passe sont-ils corrects?
•
Assurez-vous que le dossier distant est correct (très important!)
•
Si les fichiers n'apparaissent pas sur votre site Web, vous avez probablement spécifié le mauvais dossier distant.
•
Votre pare-feu bloque-t-il la connexion FTP de Web Builder?
•
Activez 'Utiliser le mode passif pour les transferts'
•
Augmentez le délai de connexion à 120 secondes (Outils-> Options-> Publier)
•
Si le transfert prend du temps, vous avez probablement utilisé des images (très) grandes.
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?t=1918
•
Si votre site Web ne semble pas être mis à jour, sélectionnez "Actualiser" plusieurs fois dans votre navigateur! Pour une liste de tous les
•
codes d'erreur possibles et leurs descriptions, allez
ici: http://support.microsoft.com/default.aspx?scid=kb;EN-US;193625
Pourquoi mes images ne s'affichent-elles pas sur la page publiée?
•
Avez-vous téléchargé les images sur le serveur Web?
•
Par défaut, Web Builder place toutes les images dans un sous-dossier appelé images; vous pouvez changer cela via Outils->
Options-> Publier-> Sous-dossier Image. Si vous laissez ce champ vide, les images seront publiées dans le même dossier que la
page publiée.
•
Certains hôtes Web ne prennent pas en charge les sous-dossiers, assurez-vous donc que vous disposez des autorisations nécessaires pour créer un dossier
sur le serveur. Sinon, vous devez indiquer à Web Builder de publier les images dans le même dossier que le HTML.
•
Assurez-vous que le les noms d'image sont valides; la plupart des serveurs Web sont sensibles à la casse et / ou ne prennent pas en charge les
caractères spéciaux dans les noms de fichiers des images.
•
Les noms de vos fichiers d'image contiennent-ils des espaces ou d'autres caractères spéciaux? Les noms d'image avec des espaces peuvent poser des
problèmes dans certains navigateurs et / ou serveurs Web, utiliser des traits de soulignement ou des tirets pour relier des mots au lieu d'espaces.
Et après?
Ce manuel décrit à peu près toutes les fonctionnalités de Web Builder. Faites défiler vers le bas pour découvrir toutes les fonctionnalités intéressantes de
WYSIWYG Web Builder!
Pointe: Pour les questions fréquemment posées ou toute autre assistance, veuillez visiter:
http://www.wysiwygwebbuilder.com/support.html
20
WYSIWYGWeb Builder 16
Options de WYSIWYGWeb Builder
Fichier
Nouveau site Web
Crée un nouveau projet de site Web vide.
Toutes les pages d'un site Web seront enregistrées dans un seul fichier.
Nouveau site Web à partir d'un modèle
Crée un nouveau site Web basé sur un modèle. Les modèles peuvent être utilisés plus tard par vous (ou quelqu'un d'autre) pour utiliser une base pour une
nouvelle page ou un nouveau site Web. Lorsque vous enregistrez une page Web dans un modèle, elle inclut toutes les images et autres objets du fichier
modèle, il n'est donc pas nécessaire de copier ces fichiers séparément. Cela peut être utile si vous souhaitez transférer votre travail sur un autre ordinateur.
Les modèles WYSIWYGWeb Builder ont l'extension .wtp et sont enregistrés dans le sous-dossier \ Mon document \ WYSIWYG Web Builder \ system \
templates. Pour ajouter une nouvelle catégorie à la fenêtre de sélection de modèles, afin que vous puissiez organiser vos modèles, créez simplement un
nouveau dossier et placez les fichiers de modèle dans ce dossier. Le nom du dossier sera alors affiché dans la liste déroulante Catégorie. Vous pouvez
également télécharger des modèles créés par d'autres utilisateurs de Web Builder à partir du site Web de Pablo Software Solutions:
http://www.wysiwygwebbuilder.com/templates.html
Ouvrir le site Web
Ouvre un projet de site Web existant.
proche
Fermez la page active. La fermeture de la dernière page ouverte fermera également le projet de site Web!
Fermer le site Web
Fermez le projet de site Web actif.
21
WYSIWYGWeb Builder 16
Enregistrer le site Web
Enregistrez le projet de site Web actif.
Note importante:
WYSIWYGWeb Builder n'édite pas directement le HTML, mais utilise son propre format de fichier (.wbs) pour stocker les informations du site Web.
Pour enregistrer vos pages au format HTML, vous devez publier ou exporter vos pages. Web Builder stocke les informations de toutes vos pages
dans un seul fichier de projet.
Enregistrer le site Web sous
Enregistrez le projet de site Web actif sous un nouveau nom.
Enregistrer le site Web en tant que modèle
Enregistrez le projet de site Web actif dans un modèle.
Voir «Nouveau site Web à partir d'un modèle» pour plus de détails sur les modèles.
Enregistrer en tant que document HTML / Exporter HTML
Cette option déclenche la fenêtre de publication. Si vous souhaitez vraiment exporter uniquement la page HTML active, maintenez la touche
MAJ de votre clavier enfoncée. Pour générer plus d'un fichier à la fois, veuillez utiliser l'option Publier.
Exportez vers Quick 'n Easy Web Builder.
Enregistrez une copie du projet au format Quick 'n Easy Web Builder 4.x.
Quick 'n Easy Web Builder (http://www.quickandeasywebbuilder.com/) est un outil de conception Web pour Mac et Linux inspiré de
WYSIWYGWeb Builder. Les projets créés avec QnEWB et WWB ne sont pas compatibles. Cependant, cette option permet d'exporter
le projet dans un format qui peut être ouvert par Quick 'n Easy Web Builder.
Notez que Quick 'n Easy Web Builder est un produit différent, vous aurez besoin d'une licence distincte.
Connaître les limites:
Quick 'n Easy Web Builder a été créé avec différents outils de développement sur différentes plates-formes (Mac / Linux), de sorte que toutes les fonctionnalités ne
fonctionnent pas de la même manière en interne. Par exemple, l'objet texte utilise un composant éditeur de texte complètement différent.
Cela signifie que toutes les fonctionnalités ne peuvent pas être exportées au format QWB.
Les objets suivants ne seront pas exportés:
- Liste à puces
- Clipart
- Outils CMS
- Texte incurvé
- jQuery)
ListView (interface utilisateur
- Chapiteau
- Art du texte
- jQuery)
Info-bulle (interface utilisateur
- Extensions
Remarque sur le texte:
- Styles dans le texte. Les styles dans le gestionnaire de styles seront exportés mais vous devrez les réappliquer au texte.
Pour un aperçu de la comparaison des fonctionnalités de WYSIWYGWeb Builder et Quick 'n Easy Web Builder, veuillez consulter: http://www.quickandeasywebbuilder.com/foru
22
WYSIWYGWeb Builder 16
Sauvegarde de projet en zip
Cela créera une sauvegarde complète du projet, des images et d'autres fichiers au format zip.
Notez que les images et autres fichiers ne seront inclus que s'ils sont stockés dans le dossier du projet. Là pour, l'option «Laisser
WYSIWYG Web Builder gérer les images et autres fichiers utilisés par un projet» doit être activée.
Aperçu dans le navigateur
Prévisualisez la page Web active dans votre navigateur par défaut.
En fonction de la portée de l'aperçu (Outils-> Options-> Divers), vous pouvez prévisualiser une seule page ou l'ensemble du site Web. Il est également possible de
changer le navigateur utilisé pour la prévisualisation. Allez dans Fichier-> Aperçu dans le navigateur-> Modifier la liste des navigateurs pour ajouter / modifier la liste des
navigateurs pouvant être utilisés pour prévisualiser les pages sur lesquelles vous travaillez.
Pointe: Vous pouvez également utiliser l'élément de menu «Aperçu du site Web entier» pour basculer entre l'aperçu d'une page unique et l'aperçu complet du site Web.
Remarque: Vous ne pouvez pas prévisualiser les pages PHP directement dans votre navigateur. PHP ne peut être consulté que via un serveur Web prenant en charge PHP!
Publier
Publiez la page active, un groupe de pages ou le site Web entier. Vous pouvez choisir de publier dans un dossier local ou sur un serveur
FTP distant. Consultez le chapitre «Publier» de ce document pour plus de détails.
Sortie
Quitte l'application.
23
WYSIWYGWeb Builder 16
Accueil
Pâte
Insérer le contenu du Presse-papiers.
En mode d'édition de texte, maintenez la touche SHIFT enfoncée tout en utilisant cette commande pour coller sans mise en forme. Cela peut être utile
lorsque vous collez du texte à partir de MS Word qui peut inclure des caractères de contrôle non valides.
Coller en place
Coller sur place est une méthode permettant de coller quelque chose dans l'espace de travail dans la position exacte dans laquelle il se trouvait lorsque vous l'avez
copié.
Peintre de format
Utilisez l'outil Reproduire la mise en forme pour copier rapidement la mise en forme (couleur, police, bordure) d'un objet à un autre. Notez que cela ne fonctionne pas pour
le texte individuel, uniquement pour l'objet conteneur.
Sélectionnez d'abord l'objet dont vous souhaitez copier le format. Cliquez ensuite sur le bouton 'Format Painter' dans le ruban et sélectionnez
un autre objet.
Pour appliquer la même mise en forme à plusieurs objets, vous pouvez double-cliquer sur le bouton "Format Painter", puis sélectionner d'autres objets.
Pour annuler l'outil Format-Painter, sélectionnez à nouveau le bouton ou cliquez sur une zone vide de l'espace de travail.
Actuellement, les propriétés suivantes seront copiées: alignement
Couleur de l'arrière plan
image de fond
texture de fond
mode d'arrière-plan
couleur de la bordure
rayon de bordure
style de bordure
largeur de la bordure
boîte ombre
taille de police
le style de police
dégradé de couleur
style dégradé
marge
opacité
rembourrage
style de motif
couleur du texte
Couper
Coupez la sélection et placez-la dans le Presse-papiers.
Copie
Copiez la sélection et placez-la dans le Presse-papiers.
Effacer
Effacez la sélection.
Tout sélectionner
Sélectionnez tout le document (tous les objets).
24
WYSIWYGWeb Builder 16
annuler
Annulez la dernière action. Vous pouvez annuler jusqu'à 255 actions.
Refaire
Refaites l'action précédemment annulée.
Trouver
Vous pouvez rechercher des mots ou des caractères dans la page active ou sur l'ensemble de votre site Web. Dans le menu Edition, cliquez sur Rechercher. Dans Rechercher
dans, sélectionnez Page actuelle ou Site Web entier. Dans Rechercher, tapez les caractères ou les mots que vous souhaitez rechercher, puis cliquez sur Suivant. Pour
rechercher des instances supplémentaires du même texte, continuez à cliquer sur Suivant.
Remarque: Si vous sélectionnez Rechercher dans «Tout le site Web», toutes vos pages seront ouvertes. Cela peut utiliser une grande partie de la mémoire de votre
système et ralentir les performances globales de votre ordinateur!
Remplacer
Vous pouvez rechercher et remplacer des mots ou des caractères par du texte que vous spécifiez.
Dans le menu Edition, cliquez sur Remplacer. Dans Rechercher dans, sélectionnez Page actuelle ou Site Web entier Dans Rechercher
dans, tapez les caractères ou les mots que vous souhaitez rechercher.
Dans Remplacer par, tapez le texte par lequel vous souhaitez le remplacer.
Cliquez sur Suivant, puis sur Remplacer. Pour remplacer toutes les instances du texte, cliquez sur Remplacer tout.
Propriétés
Modifiez les propriétés de l'objet sélectionné.
Voir le chapitre 'Objet WYSIWYGWeb Builder' pour plus de détails sur les propriétés des objets.
HTML
Affichez le code HTML généré de l'objet sélectionné ou insérez votre propre code HTML!
Veuillez noter que cette option est réservée aux utilisateurs avancés. L'insertion de code HTML non valide peut entraîner des résultats inattendus.
Ne pas publier d'actifs (menu contextuel uniquement)
Si cette option est activée, Web Builder ne publiera pas les ressources (images, scripts, films) pour cet objet. Par exemple, un lecteur
multimédia ne publiera pas le (s) fichier (s) multimédia associé (s).
Cela peut être utile si un fichier existe déjà sur le serveur, il n'a donc pas besoin d'être publié à nouveau.
Notez qu'il générera toujours le code HTML de l'objet!
Restaurer la taille d'origine (menu contextuel uniquement)
Peut être utilisé pour restaurer une image ou un objet flash à sa taille d'origine.
25
WYSIWYGWeb Builder 16
Vue
Mode plein écran: Normalement, lorsque vous modifiez une page Web dans WYSIWYGWeb Builder, une partie de l'écran est occupée par des barres d'outils, une
barre de menus, une barre d'état et d'autres fenêtres. Pour masquer temporairement toutes ces informations superflues pour qu'elles ne fonctionnent que sur votre
page, cliquez sur «Afficher» et sélectionnez «Mode plein écran». Tout disparaîtra sauf votre page actuellement modifiée. Pour revenir en arrière, appuyez sur la touche
F11 ou cliquez sur le bouton de la barre d'outils Plein écran.
Rafraîchir: L'option 'Actualiser' pour recharger toutes les images de la page actuelle. Cela peut être utile si vous avez modifié des images en dehors
de Web Builder.
Gestionnaire d'objets: Afficher ou masquer la fenêtre du gestionnaire d'objets.
Inspecteur des propriétés: Affichez ou masquez la fenêtre de l'inspecteur des propriétés.
Gestionnaire de site: Afficher ou masquer la fenêtre Gestionnaire de site.
Boîte à outils: Afficher ou masquer la boîte à outils.
La grille: Afficher ou masquer la grille.
Aligner sur la grille: Activez ou désactivez l'alignement sur la grille. Utilisez la fonction Aligner sur la grille pour aligner exactement les objets. Web Builder
crée une attraction "magnétique" entre l'objet sélectionné et la grille.
Accrocher aux guides de règle: Activez ou désactivez l'alignement sur les guides de règle.
Dirigeants: Afficher ou masquer les règles.
Guides de règle: Afficher ou masquer les guides de règle. Vous pouvez ajouter des guides de règle en cliquant sur Guides de règle-> Ajouter un guide de
l'utilisateur horizontal / vertical ou faites simplement glisser un nouveau guide depuis la barre de règle.
Contours des objets: Afficher ou masquer les bordures des objets.
Zoom
Vous pouvez effectuer un zoom avant pour voir des parties de votre page Web en gros plan ou faire un zoom arrière pour voir plus de la page. Vous pouvez sélectionner l'un
des pourcentages de zoom prédéfinis ou saisir une valeur personnalisée dans la barre d'outils de zoom.
Remarques:
La qualité de la page agrandie dépend fortement du niveau de zoom. Vous obtiendrez la meilleure qualité pour 100%, 200%, 300%, 400% etc.
Mais un niveau de zoom de 150% introduira des erreurs d'arrondi. Vous ne pouvez pas modifier le texte lorsqu'une page est agrandie ou réduite.
26
WYSIWYGWeb Builder 16
Page
Nouvelle page
Ajoute une nouvelle page à votre site Web. La nouvelle page s'ouvre automatiquement pour que vous puissiez commencer à la modifier immédiatement. La nouvelle page
(avec un nom de page unique) doit être ajoutée à l'arborescence du Gestionnaire de site.
Nouvelle page mobile
Ajoute une nouvelle page mobile à votre site Web. Les pages mobiles ont un ensemble d'outils différent, optimisé pour les appareils mobiles. Pour plus
d'informations sur la conception Web mobile, veuillez lire l'article suivant: Conception Web mobile.
Nouvelle page à partir du modèle
Créez une nouvelle page basée sur un modèle. Choisissez n'importe quelle page d'un modèle et insérez-la dans le projet en cours. La nouvelle page (avec
un nom de page unique) doit être ajoutée à l'arborescence du Gestionnaire de site.
Modifier la page
Cela affichera une liste de toutes les pages de votre site Web. Pour ouvrir / modifier la page, sélectionnez simplement le nom de la page.
Cloner la page
Pour faire une copie exacte de la page active, sélectionnez Cloner la page du menu. Un nouvel élément (avec un nom unique) sera ajouté au
Gestionnaire de site.
Remarque:
«Cloner la page» dupliquera la page et tous les objets de cette page. Pour réduire le nombre d'objets dupliqués sur votre site Web,
vous devez envisager d'utiliser des pages maîtres.
Supprimer la page
Supprimez la page active de votre site Web. Vous ne pouvez pas supprimer la dernière page de votre site Web.
27
WYSIWYGWeb Builder 16
Renommer la page
Renommez la page active. Notez que le Gestionnaire de site doit être visible pour pouvoir renommer votre page. Le nom de la page sera mis
en surbrillance dans le gestionnaire de site, où vous pourrez changer son nom.
Remarque: Lorsque vous avez lié à la page que vous renommez (à partir de n'importe quelle page du site Web), Web Builder met automatiquement à
jour tous les liens pour vous afin que vous n'ayez pas à refaire tous les liens internes.
Remarques sur les noms de page
Lors de la création de votre site Web, Web Builder enregistre le fichier de projet avec l'extension .wbs. Il s'agit d'un fichier de projet utilisé par Web Builder
pour simplifier le processus de construction. Un fichier de projet peut contenir plusieurs pages Web. Une fois vos pages prêtes, vous devez les exporter ou
les publier au format HTML.
Le nom du fichier HTML de sortie est tiré du nom que vous avez spécifié dans le Gestionnaire de site.
Donc, si vous avez nommé l'index de la page, le fichier de sortie s'appellera index.html. Si la page a besoin d'une autre extension comme .php, vous
pouvez la configurer dans les propriétés de la page.
Voici quelques conseils pour nommer vos pages Web:
1. N'ajoutez pas d'extension .html ou .htm au nom de la page. Web Builder ajoutera automatiquement le
. html (ou .php, .asp) lorsqu'il publie (ou exporte) le code HTML.
2.
Nommez toujours votre page d'accueil: "index", c'est le nom le plus courant pour une page d'accueil.
3.
Utilisez toujours des noms de fichiers en minuscules, la plupart des serveurs Web sont sensibles à la casse et peuvent ne pas trouver votre page si vous l'avez
appelée «Index» ou «INDEX»
4.
Utilisez uniquement des caractères alphanumériques. N'utilisez pas d'espace ou d'autres caractères spéciaux dans le nom, gardez-les simples comme:
"page1" ou "mes_produits"
5.
Utilisez des traits de soulignement ou des tirets pour relier les mots.
28
WYSIWYGWeb Builder 16
Importer une page HTML
Bien que Web Builder ne soit PAS un éditeur HTML, vous pouvez importer des pages HTML existantes. Sélectionner Page-> Importer-> Importer une page HTML dans
le menu pour afficher la fenêtre Importer la page HTML. Vous pouvez sélectionner une page HTML à partir de votre lecteur local ou spécifier l'URL d'un site Web en
ligne. Cliquez sur D'accord pour commencer l'importation de la page. Web Builder copiera automatiquement toutes les images sur votre lecteur local.
Remarques importantes sur l'importation de HTML:
•
WYSIWYGWeb Builder n'est pas un éditeur HTML, mais un générateur HTML! Web Builder importe le HTML en rendant le
contenu d'une page existante, puis tente de convertir la mise en page au format d'objet interne de Web Builder.
•
La fonction d'importation importe actuellement uniquement du texte, des images, des éléments de formulaire et des attributs de corps (couleurs des liens,
images d'arrière-plan, balises méta). Les tableaux, scripts, feuilles de style et composants multimédias ne sont pas importés. Mais dans la plupart des cas,
cela suffit pour vous aider à démarrer.
•
Web Builder n'analyse pas les feuilles de style. Dans certains cas, le texte peut paraître différent de la page d'origine.
•
Web Builder ne prend actuellement pas en charge les jeux de cadres. Si vous souhaitez importer une page Web qui utilise des cadres, vous
devrez importer toutes les pages individuelles séparément.
•
Il est très difficile de prendre en charge tous les types de HTML. Même les navigateurs populaires interpréteront le HTML différemment, alors ne
vous attendez pas à des miracles. Si une page ne parvient pas à être importée, elle contient probablement du code que Web Builder ne
comprend pas et vous devez tout de même recommencer à zéro. L'importation de pages Web créées avec WYSIWYGWeb Builder donnera les
•
meilleurs résultats!
Importer la page d'un autre projet
Cette option permet d'importer la page d'un autre projet WYSIWYGWeb Builder.
HTML de la page
Dans cette fenêtre, le HTML généré par Web Builder s'affiche. Pour insérer votre propre code, sélectionnez l'onglet approprié. Sélectionnez si le
code doit être inséré au début de la page, à la balise Entre la tête, à la balise Intérieur du corps, au début du corps, à la fin du corps ou à la fin de la
page. Le code personnalisé sera affiché dans la couleur bleue.
Avertissement: Lorsque vous insérez du code dans la fenêtre HTML de la page, assurez-vous de ne pas inclure les balises <HTML>, <HEAD> ou
<BODY>! WYSIWYGWeb Builder génère déjà ces balises.
29
WYSIWYGWeb Builder 16
•
Début de la page
Le HTML sera inséré avant tout autre code sur la page.
<- votre html ->
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
…
•
Entre les balises <head> </head>
Le HTML sera inséré entre les balises <head> </head>.
<head>
...
<- votre html ->
</head>
•
À l'intérieur de la balise <body>
Le HTML sera inséré à l'intérieur des balises <body>.
<corps attribut = valeur >
•
Après la balise <body>
Le HTML sera inséré après les balises <body>.
<body>
<- votre html ->
...
</body>
•
Avant </body>
<body>
...
<- votre html ->
</body>
•
Fin de page
<body>
...
</body>
<- votre html ->
•
Balise intérieure <html>
<html votre html >
30
WYSIWYGWeb Builder 16
Propriétés de la page
Définissez ou modifiez les propriétés de la page active.
La fenêtre des propriétés d'une page est subdivisée en ces catégories:
•
Général
•
Style
•
Balises Meta
•
Divers
•
Événements
Propriétés multi-pages
L'outil Propriétés multi-pages peut être utilisé pour modifier les propriétés sélectionnées pour plusieurs pages (sélectionnables) à la fois. Par exemple, pour
changer rapidement le gabarit d'un groupe de pages. Mais aussi, les propriétés d'arrière-plan, les balises meta, l'extension de page, etc.
Seules les valeurs modifiées seront appliquées à toutes les pages sélectionnées, les autres valeurs ne seront pas affectées.
Propriétés du site
Modifiez les propriétés de toutes les pages du projet de site Web actuel. Ces valeurs seront également utilisées comme valeurs par défaut pour les
nouvelles pages. Vous pouvez également lancer les catégories de propriétés individuellement (Général, Formatage, Balises Meta, Internet Explorer et
Divers). Cela peut être utile si vous souhaitez uniquement mettre à jour les propriétés de mise en forme, sans affecter également les balises méta et les
autres catégories de toutes les pages.
Remarque:
Certaines propriétés telles que la taille, le titre et l'extension de la page sont uniques pour chaque page, elles ne peuvent donc pas être modifiées pour
toutes les pages en même temps. Pour vous éviter de les modifier accidentellement et d'écraser les propriétés de toutes les pages, ces propriétés ont été
désactivées.
HTML du site
Insérez le code HTML (Page) qui sera inclus sur toutes les pages.
Pour inclure du code HTML uniquement pour des pages spécifiques, utilisez le HTML de la page.
Pour inclure du code HTML sur plusieurs pages, mais pas sur toutes les pages, vous pouvez utiliser des cadres maîtres.
31
WYSIWYGWeb Builder 16
Variables définies par l'utilisateur
Cette option peut être utile pour obtenir des variables globales pour le projet, par exemple pour mettre à jour rapidement le copyright ou toute autre
valeur qui change régulièrement.
Les variables seront remplacées lors de la publication par la valeur spécifiée. Vous pouvez utiliser cette variable n'importe où dans la page, le texte
ou les valeurs de propriété.
Exemple:
Nom: $ COPYRIGHT $
Valeur: Pablo Software Solutions
Cela remplacera toute instance de «$ COPYRIGHT $» dans le projet par «Pablo Software Solutions».
Les variables intégrées suivantes sont disponibles (pour les utilisateurs avancés):
$ PARALLAX_SPEED $
Spécifie la vitesse d'exécution de l'effet de parallaxe. 0.0 signifie que l'image apparaîtra fixe, et
1.0 l'image s'écoulera à la même vitesse que le contenu de la page. La valeur par défaut est 0,3.
$ GOOGLEFONTS_PREFIX $
Cela permet d'écraser le préfixe «http:» utilisé pour les polices Web Google. Vous pouvez le remplacer par «https:» ou laisser la valeur vide. La
valeur par défaut est «http:»
$ VIMEO_PREFIX $
Cela permet d'écraser le préfixe «http:» utilisé pour l'URL de Vimeo. Vous pouvez le remplacer par «https:» ou laisser la valeur vide. La
valeur par défaut est «http:»
$ LAZYLOAD_THRESHOLD $
Spécifie le seuil par défaut du script Lazy Load. Par défaut, les images sont chargées lorsqu'elles apparaissent à l'écran. Si vous souhaitez que les
images se chargent plus tôt, utilisez le paramètre de seuil. Si vous définissez le seuil sur 200, l'image se charge de 200 pixels avant d'apparaître
dans la fenêtre.
$ LAZYLOAD_EFFECT $ "
Configurer l'animation pour la charge paresseuse: aveugle, rebondir, déposer, fondre, plier, pulser, bouffer, mettre à l'échelle, secouer, glisser Remarque: la charge
paresseuse est disponible pour les images, la galerie photo, l'image de survol, le texte de survol
$ LAZYLOAD_DURATION $
Spécifie la durée de l'animation.
$ PROJECT_CSS $
Normalement, le nom de la feuille de style globale est basé sur le nom du projet (par exemple projectname.css). Cette variable
système permet de spécifier un nom différent. Par exemple: globalstyles
La variable suivante est définie automatiquement: $
PAGE_NAME $
sera remplacé par le nom de la page (sans extension de fichier).
$ PAGE_TITLE $
sera remplacé par le titre de la page tel que spécifié dans les propriétés de la page.
$ PAGE_FILENAME $
sera remplacé par le nom de fichier de la page (avec l'extension de fichier).
32
WYSIWYGWeb Builder 16
$ FORMERROR_EMAIL $
Personnalisez le message d'erreur du formulaire. Le texte par défaut est: L'adresse e-mail indiquée n'est pas valide!
$ FORMERROR_FILESIZE $
Personnalisez le message d'erreur du formulaire. Le texte par défaut est: La taille de $ key (fichier: $ upload_SrcName [$ i]) est plus grande que la taille autorisée \ ".
$ Max_filesize / 1024. \" Koctets!
$ FORMERROR_URL $
Personnalisez le message d'erreur du formulaire. Le texte par défaut est: les URL ne sont pas autorisées!
Variable de site $ CAPTCHA_ERROR $.
Cela peut être utilisé pour spécifier un message d'erreur captcha personnalisé. Le texte par
défaut est: La vérification CAPTCHA a échoué.
$ SKROLLR_FORCEHEIGHT $
Cette option s'applique aux transitions de défilement: Animations et transitions CSS3
S'assure que le document est suffisamment haut pour que toutes les images clés tiennent à l'intérieur. Par exemple, vous avez spécifié un décalage de 1 000, mais le
contenu ne fait que donner une hauteur de 500 pixels au document. skrollr veillera à ce que vous puissiez faire défiler l'ensemble des 1000px
La valeur par défaut est: 'false'
$ SKROLLR_MOBILECHECK $
Cette option s'applique aux transitions de défilement: Animations et transitions CSS3
Cette option peut être utilisée pour activer les vérifications des appareils mobiles. La valeur par défaut est: false. ce qui signifie que les transitions de défilement sont activées sur
les appareils mobiles.
Remarque importante: certains navigateurs mobiles (plus anciens) ne fournissent pas de `` vrais '' événements de défilement, mais déclenchent uniquement un
événement de début et de fin, de sorte que tout effet de défilement n'a lieu que lorsque l'utilisateur a arrêté de déplacer la page afin que l'animation se produise en une
seule fois. la fin.
$ SKROLLR_SMOOTHSCROLLING $
Cette option s'applique aux transitions de défilement: Animations et transitions CSS3
Le défilement fluide adoucit les animations. Lorsque vous faites défiler vers le bas de 50 pixels, les animations passeront au lieu de sauter à la nouvelle
position. La valeur par défaut est: 'false'
33
WYSIWYGWeb Builder 16
Propriétés de la page - Général
Titre
Saisissez le titre de la page Web. Ce titre sera affiché dans la barre de titre de la fenêtre du navigateur et des résultats du moteur de recherche.
Nom du menu
Ce nom sera utilisé pour les noms des éléments dans les barres de navigation et les barres de menu qui ont activé l'option «Synchroniser
avec Site Manager». Par défaut, le nom de la page (tel que spécifié dans le Gestionnaire de site) et le nom du bouton sont identiques, mais
ce champ vous permet d'utiliser un autre nom pour l'élément.
Largeur de page
Spécifie la largeur de l'espace de travail de la page.
Remarques:
1.
Cette valeur n'est pas utilisée par le navigateur, il s'agit uniquement d'une valeur interne utilisée par Web Builder pour indiquer l'espace de travail
disponible et pour contrôler les barres de défilement lorsque la taille de votre écran n'est pas assez grande pour afficher le contenu de la page.
2.
L'option Centrer dans le navigateur utilise cette valeur pour calculer le centre absolu de votre page, donc si vous avez conçu votre page
pour une résolution de 800x600, assurez-vous que cette valeur est définie sur 800 sinon votre page ne sera pas centrée!
Hauteur de la page
Spécifie la hauteur de l'espace de travail de la page.
Remarque:
Cette valeur n'est pas utilisée par le navigateur, il s'agit uniquement d'une valeur interne utilisée par Web Builder pour indiquer l'espace de travail disponible et
pour contrôler les barres de défilement lorsque la taille de votre écran n'est pas assez grande pour afficher le contenu de la page.
Taille de l'écran cible
Cette option vous aide à déterminer la taille de page optimale pour une résolution d'écran spécifique. Il contrôle les propriétés de largeur / hauteur de la
page. Par exemple, si vous sélectionnez «800x600», la largeur / hauteur de la page sera définie sur 770x600.
Pourquoi? Parce que vous devrez laisser de l'espace pour la barre de défilement verticale, vous ne pouvez donc pas utiliser les 800 pixels complets pour le contenu de la
page.
Extension de fichier
Normalement, votre page Web sera publiée en utilisant l'extension .html. Dans certains cas, il peut être nécessaire de spécifier une autre extension
comme .php ou .asp au cas où votre page utilise PHP ou ASP.
Remarques:
Si vous définissez l'extension de fichier sur autre chose que .html, votre navigateur risque de ne pas pouvoir prévisualiser la page. Afin
de prévisualiser la page PHP ou ASP, vous devez publier la page sur un serveur Web qui peut gérer ces types de page!
Après avoir changé l'extension de fichier, vous devrez republier tous les liens de pages vers celui-ci, sinon les liens feront toujours référence à l'ancien nom
de page.
34
WYSIWYGWeb Builder 16
Type de document
La déclaration doctype est une instruction pour le navigateur Web sur la version du langage de balisage dans lequel la page
est écrite.
Actuellement, WYSIWYGWeb Builder prend en charge 2 types de documents:
HTML 4.01 transitionnel (par défaut)
La sortie générée sera HTML et conforme à la spécification HTML 4.01 du W3C (tout comme dans les versions précédentes
de WYSIWYGWeb Builder).
Transitionnel XHTML 1.0
La sortie générée sera XML et conforme à la spécification XHTML 1.0 du W3C.
HTML5
La sortie générée sera HTML et conforme à la spécification HTML 5 du W3C. Pour certaines fonctionnalités (comme les
événements HTML5, les styles CSS3. Cette option doit être sélectionnée)
Sélectionnez le type de document «Aucun» si vous ne souhaitez pas inclure la déclaration doctype dans la sortie de la page. La sortie
générée sera HTML 4.01 Transitional dans ce cas.
Centrer la page dans la fenêtre du navigateur
L'activation de cette option centrera la page publiée dans la fenêtre du navigateur. La plupart des sites Web professionnels sont conçus de manière à
avoir une belle apparence sur différentes tailles d'écran. Étant donné que Web Builder utilise un positionnement absolu pour tous les éléments, ils ne
peuvent pas être étirés sur toute la largeur et la hauteur d'une page, car cela `` brouillerait '' le contenu de la page et cela n'aurait pas l'air bien;)
Voici quelques conseils pour concevoir vos pages afin qu'elles s'affichent au centre du navigateur:
•
Définissez les propriétés de la page sur 800x600.
•
Activez les bordures guides et définissez-les sur la même taille. Assurez-vous que tout le contenu
•
de la page reste entre les bordures du guide. Activez «Centrer sur le navigateur» dans les
•
propriétés de la page.
Pour plus de détails, voir aussi: http://www.wysiwygwebbuilder.com/forum/viewtopic.php?t=153
Centrer la page horizontalement et verticalement (DEPRECATED)
Cette option vous permet de centrer la page Web horizontalement et verticalement dans la fenêtre du navigateur.
Aligner à gauche, mais inclure la largeur / hauteur de la page (recommandé pour eBay)
Cette option peut être utile pour les concepteurs qui souhaitent utiliser leurs pages pour les annonces eBay. Les attributs de largeur et de hauteur de
la page seront ajoutés au style de page.
Définissez la largeur et la hauteur de la page sur 100%
Cette option est à utiliser en combinaison avec le mode de calque flottant «Plein écran».
Tutoriel connexe:
http://www.wysiwygwebbuilder.com/fullscreen.html
Ne publiez pas cette page
Activez cette option si vous ne souhaitez pas que cette page soit publiée si vous sélectionnez Publier tout le site Web. La raison possible
peut être:
1. Cette page ne fait actuellement pas partie du site Web ou est encore en construction
2. La page n'est utilisée que dans le cadre de vos autres pages, par exemple. La page principale.
3. La page n'est pas modifiée, il n'est donc pas nécessaire de la publier à nouveau.
Ne synchronisez pas cette page dans les objets de navigation
Lorsque cette option est activée, la page n'apparaîtra pas dans les objets de navigation qui se synchronisent automatiquement avec le
Gestionnaire de site.
35
WYSIWYGWeb Builder 16
N'incluez pas cette page dans l'index de recherche.
Lorsque cette option est activée, la page ne sera pas incluse dans l'index de recherche.
N'incluez pas cette page dans le plan du site.
Lorsque cette option est activée, la page ne sera pas incluse dans le plan du site.
Jeu de caractères
Le jeu de caractères indique au navigateur comment interpréter et afficher les caractères de votre page Web. Selon la langue du
texte de la page, il peut être nécessaire de forcer le navigateur à utiliser un autre jeu de caractères. Les jeux de caractères les plus
couramment utilisés sont: ISO-8859-1 (ANSI) et UTF-8 (UNICODE).
Remarque:
Ce paramètre ne changera rien à la façon dont Web Builder affiche vos pages. Il ne sera utilisé que par les navigateurs.
Langue de la page
Spécifie la langue (Content-Language) de la page. Les moteurs de recherche peuvent utiliser cette balise pour classer les pages par langue.
Remarque:
Ce paramètre ne changera rien à la façon dont Web Builder affiche vos pages. Cette valeur ne sera utilisée que par les moteurs de recherche.
Direction
Spécifie la direction du texte pour le contenu de la page. Il peut s'agir d'une propriété définie sur «gauche à droite» ou «droite à gauche».
Faire défaut
Enregistre les valeurs actuelles comme valeurs par défaut pour les nouvelles pages.
Remarque:
Vous pouvez également mettre à jour les propriétés de la page pour toutes les pages à la fois en utilisant Menu-> Page-> Propriétés du site!
36
WYSIWYGWeb Builder 16
Propriétés - Icônes
Icône Favoris
Vous pouvez utiliser des icônes de favoris (également appelées icônes de raccourci ou favicon) pour afficher votre logo ou un autre petit graphique dans le menu
Favoris, les onglets d'adresse ou de page de votre navigateur. Ils sont un excellent moyen d'ajouter une reconnaissance de marque à votre site Web.
Une icône de raccourci doit être de taille carrée et d'au moins 16 x 16 pixels. Pensez à créer à la fois une icône 16 x 16 pixels et une icône 32 x 32
pixels car sur les écrans à haute résolution, le navigateur peut étirer l'icône pour l'adapter à l'espace disponible.
Pour créer l'icône, utilisez un éditeur d'icônes, tel que Axialis IconWorkshop, IcoFX ou Microangelo Toolset et enregistrez l'icône au format de
fichier .ico.
En option, vous pouvez spécifier une image dédiée pour 32 et 64 pixels au format PNG.
Icône Apple touch
Semblable à l'icône Favoris, l'icône Apple Touch est un fichier utilisé pour une icône de page Web sur l'iPhone, l'iPod Touch et l'iPad
d'Apple.
Lorsque l'utilisateur marque la page Web ou ajoute la page à son écran d'accueil, cette icône est utilisée. Les icônes Apple Touch sont également
prises en charge par la plupart des appareils Android.
Malheureusement, différents appareils nécessitent des tailles d'image différentes. C'est pourquoi nous avons maintenant ajouté la possibilité de configurer
plusieurs tailles.
Tailles courantes:
152 x 152 (iPad)
167 x 167 (iPad Retina)
180 x 180 (iPhone Retina)
37
WYSIWYGWeb Builder 16
Propriétés - SEO
optimisation du moteur de recherche
L'optimisation des moteurs de recherche (SEO) est le processus d'amélioration du volume ou de la qualité du trafic vers un site Web ou une page Web à partir des
moteurs de recherche.
La théorie est que plus un site apparaît tôt (ou plus) dans la liste des résultats de recherche, plus il recevra de visiteurs du moteur de
recherche.
Ces valeurs peuvent aider à améliorer votre référencement, mais les moteurs de recherche modernes utilisent des techniques plus avancées pour indexer
votre site Web.
Plus de détails: http://en.wikipedia.org/wiki/Search_engine_optimization
Des robots
La balise Meta Robots est utilisée pour indiquer aux moteurs de recherche d'indexer et / ou d'explorer une page ou non.
Revisitez après
La balise Meta Revisit est utilisée pour indiquer aux moteurs de recherche quand revenir ensuite.
Expire après
La balise Meta Expires est utilisée pour indiquer aux moteurs de recherche que la page et le contenu ne sont plus valides.
URL canonique
Si vous avez différentes pages avec un contenu similaire (par exemple, une page avec à la fois une version mobile et une version de bureau), Google les
considère comme des versions en double de la même page. Google choisira une URL comme version canonique et l'explorera, et toutes les autres URL
seront considérées comme des URL en double et explorées moins souvent.
Plus d'information: https://support.google.com/webmasters/answer/139066?hl=en
hreflang
L'attribut hreflang indique à Google la langue que vous utilisez sur une page spécifique, de sorte que le moteur de recherche peut diffuser ce résultat
aux utilisateurs qui recherchent dans cette langue. Les liens seront également ajoutés au plan du site. Plus d'information: https://support.google.com/webmasters/answer/189077?hl=
38
WYSIWYGWeb Builder 16
Propriétés - Style
Mode d'arrière-plan
Spécifie le mode d'arrière-plan.
•
Transparent
Le fond de la page sera transparent. Notez que normalement cela signifie que la page sera blanche, car vous ne pouvez pas
regarder à travers la fenêtre du navigateur ...
•
Solide
Utilisez une couleur de fond unie.
•
Image
Utilisez une image comme arrière-plan.
Répéter
Définit les attributs de mosaïque pour l'image d'arrière-plan. Les options possibles sont:
- répéter dans les deux sens
- répéter dans le sens horizontal / vertical
- ne pas répéter
- espace, l'image de fond est répétée autant que possible sans écrêtage.
- rond, l'image d'arrière-plan est répétée et écrasée ou étirée pour remplir l'espace (pas de lacunes).
Alignement horizontal
Définit la position horizontale de l'image d'arrière-plan.
Alignement vertical
Définit la position verticale de l'image d'arrière-plan.
Taille de l'image d'arrière-plan (c'est l'option déroulante à droite de 'répéter')
Spécifie la taille de l'image d'arrière-plan.
vide (par défaut)
L'image d'arrière-plan a la taille par défaut et défile avec le contenu.
fixé
Un arrière-plan fixe est une image d'arrière-plan qui restera au même endroit pendant que le reste de votre texte et de vos images
défilera au-dessus.
couverture
Redimensionnez l'image d'arrière-plan pour qu'elle soit aussi grande que possible afin que la zone d'arrière-plan soit complètement couverte par
l'image d'arrière-plan. Certaines parties de l'image d'arrière-plan peuvent ne pas être visibles dans la zone de positionnement d'arrière-plan.
contenir
Redimensionnez l'image à la plus grande taille de sorte que sa largeur et sa hauteur puissent tenir à l'intérieur de la zone de contenu.
parallaxe
L'image défile plus lentement que le contenu du premier plan, créant l'illusion d'une profondeur 3D.
Pour les utilisateurs avancés:
La vitesse par défaut est de 0,3. Vous pouvez modifier cela en ajoutant une variable de site avec le nom $ PARALLAX_SPEED $
Vitesse à laquelle s'exécute l'effet de parallaxe. 0.0 signifie que l'image apparaîtra fixe, et
1.0 l'image s'écoulera à la même vitesse que le contenu de la page.
39
WYSIWYGWeb Builder 16
pourcentages
Par exemple: «100% 100%» étendra les images à 100% de la largeur / hauteur de l'objet. D'autres valeurs telles que «50% 50%» sont
également possibles.
pixels
Par exemple: «320px 250px» affichera l'image dans la taille spécifiée.
•
Pente
Utilisez un dégradé (bicolore) comme arrière-plan.
Le dégradé peut être horizontal ou vertical. Par défaut, une image d'arrière-plan sera générée pour l'effet de dégradé.
Cependant, vous pouvez également utiliser des dégradés CSS3 en activant l'option 'Utiliser des dégradés CSS3 au lieu
d'images' dans Outils-> Options-> HTML.
•
Dégradé multicolore
Utilisez un dégradé (multicolore) comme arrière-plan. WYSIWYGWeb Builder comprend de nombreux styles de dégradés multicolores prédéfinis,
mais vous pouvez facilement créer votre propre style avec le gestionnaire de dégradés.
•
Modèle
Utilisez un motif comme arrière-plan. Une nouvelle image sera automatiquement générée pour le motif.
•
Texture
Utilisez une texture comme arrière-plan. Une nouvelle image sera automatiquement générée pour la texture.
Clip d'arrière-plan
La propriété 'background-clip' est une option avancée et elle est disponible dans l'inspecteur de propriétés et le gestionnaire de styles. Il
spécifie la zone de peinture de l'arrière-plan. Cela peut être utile en combinaison avec des bordures transparentes. 'border-box' coupe
l'arrière-plan dans la zone de bordure. Lorsque vous utilisez une bordure transparente, l'arrière-plan sera visible derrière la bordure.
'padding-box' découpe l'arrière-plan dans la zone de remplissage (à l'exclusion de la bordure). L'arrière-plan derrière la bordure sera
transparent.
Couleur du lien
Ceci spécifie la couleur par défaut des liens hypertexte non visités.
Couleur du lien visité
Cela spécifie la couleur d'un lien suivi.
Couleur du lien actif
Cela spécifie la couleur d'un lien actif.
Couleur du lien de survol
Cela spécifie la couleur de tous les liens de survol de la page active.
Mode souligné
Spécifie si les liens seront toujours soulignés ou uniquement lorsque la souris sera sur le lien.
Remarque: Vous pouvez également contrôler les couleurs des liens hypertexte à l'aide des feuilles de style de lien hypertexte. Pour plus d'informations,
voir la description dans le chapitre «Liens».
Police, taille et couleur par défaut
Spécifie la police, la taille de police et la couleur du texte par défaut qui seront utilisées pour le texte que vous entrez dans la page.
Thème
Spécifie le thème (basé sur ThemeRoller) pour la page. Ce thème sera appliqué à tous les objets activés par thème, tels que les widgets de l'interface utilisateur jQuery. Outre
les widgets de l'interface utilisateur jQuery, vous pouvez également activer le thème pour la barre de menus, la barre de navigation, le menu à onglets, le menu coulissant, la
ligne horizontale. De cette façon, vous pouvez donner à votre page un aspect et une sensation uniformes. Les thèmes peuvent être créés et modifiés avec le gestionnaire de
thèmes.
40
WYSIWYGWeb Builder 16
Propriétés de la page - Balises Meta
Auteur
La balise meta author est utilisée pour indiquer qui est l'auteur de la page Web.
Mots clés
La balise meta mot-clé peut être importante pour certains moteurs de recherche.
Lorsque ces moteurs de recherche de robots automatiques indexent votre site, certains rechercheront une balise meta mot-clé à utiliser comme mots d'index.
Lorsqu'une personne utilise son moteur de recherche et recherche un mot figurant dans votre liste de métadonnées de mots clés, votre site sera inclus dans les
résultats de la recherche de sortie.
Pointe:
Les mots-clés sont généralement séparés par une virgule (,)
La description
La balise meta description peut être importante pour certains moteurs de recherche. Il existe de nombreux moteurs
de recherche qui indexeront automatiquement votre site.
Certains de ces moteurs de recherche permettent de placer une brève description dans leur page Web.
Si les moteurs de recherche recherchent dans votre page Web une balise meta description, ils utiliseront cette description dans l'index de recherche.
Catégories
Spécifie à quelles catégories appartient la page. Cette balise meta est utilisée par l'objet SiteTree pour catégoriser les pages. Exemple:
téléchargements, produits, amusement, affaires, personnel, etc.
Conseil: vous pouvez attribuer plusieurs catégories à une page. Les catégories doivent être séparées par une virgule (,)
Générateur
En règle générale, le nom de l'application utilisée pour créer la page.
Défini par l'utilisateur
Ici, vous pouvez insérer vos propres balises custommeta. Ceux-ci seront insérés avant toutes les autres balises meta juste après la balise <head>.
Exemple:
<meta http-equiv = "Cache-control" content = "no-cache">
<meta name = "expires" content = "mar 01 juin 2010 19:45:00 GMT">
Balises Meta Open Graph
Ces paramètres facilitent l'ajout de balises Meta Open Graph à une page pour lui permettre de devenir un objet social «riche». Par exemple, Facebook
utilise ces informations pour déterminer comment prévisualiser le contenu partagé dans le profil Facebook d'un utilisateur.
Les propriétés suivantes sont prises en charge: og: url, og: title, og :: description, og :: image et og :: type
https://developers.facebook.com/docs/sharing/webmasters#markup
41
WYSIWYGWeb Builder 16
Cartes Twitter
Avec les cartes Twitter, vous pouvez joindre des photos, des vidéos et des expériences multimédias riches aux Tweets, contribuant ainsi à générer du trafic vers votre
site Web. Si vous ajoutez des balises meta Twitter Card à votre page Web, les utilisateurs qui tweetent des liens vers votre contenu verront une «carte» ajoutée au
Tweet qui sera visible par leurs abonnés.
Ceci est très similaire au partage d'un lien sur Facebook qui affiche automatiquement un aperçu avec le titre, le résumé et la vignette du
contenu de votre page lorsque vous utilisez les balises Meta Open Graph.
Plus d'information:
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards
Les types de cartes suivants sont pris en charge:
•
Résumé
La carte récapitulative peut être utilisée pour de nombreux types de contenu Web, des articles de blog et des articles de presse aux
produits et aux restaurants. Il est conçu pour donner au lecteur un aperçu du contenu avant de cliquer sur votre site Web.
•
Résumé avec grande image
La carte récapitulative avec grande image présente une grande image proéminente pleine largeur à côté d'un tweet. Il est conçu
pour offrir au lecteur une expérience photo riche, et en cliquant sur l'image, l'utilisateur accède à votre site Web.
•
Joueur
Les clips vidéo et les flux audio ont une place particulière sur la plateforme Twitter grâce à la Player Card. En utilisant l'option Lecteur (et en
suivant la politique des développeurs Twitter), vous pouvez diffuser vos contenus multimédias riches aux utilisateurs du monde entier.
42
WYSIWYGWeb Builder 16
Propriétés - Divers
La page principale
Dans cette section, vous pouvez spécifier le gabarit ou le gabarit de la page.
•
Cadre principal
Spécifie la page utilisée pour le cadre principal. L'idée derrière un cadre principal est que la page aura un «cadre» commun et
le contenu de cette page sera placé dans l'espace réservé au contenu du cadre principal spécifié lorsque la page est
prévisualisée ou publiée. Le pied de page et la barre latérale (droite) du cadre principal seront automatiquement déplacés en
fonction de la taille du contenu. Ou en d'autres termes: l'espace réservé au contenu se développera. Tutoriel en ligne:
http://wysiwygwebbuilder.com/master_frame.html
•
La page principale
En plus d'un cadre maître, vous pouvez désormais également utiliser une autre page comme page maître. Cela ne nécessite pas d'espace réservé
pour le contenu. Fondamentalement, la page maître sera utilisée comme «arrière-plan» de la page de contenu et vous placez tous les autres objets
par-dessus. Tutoriel en ligne:
http://wysiwygwebbuilder.com/master_page.html
Pour supprimer un nom sélectionné précédemment, cliquez sur le bouton «Supprimer».
Réorienter
La propriété Redirect redirige l'utilisateur vers une autre page après un délai spécifique.
•
Ne pas rediriger
Désactive la fonction de redirection.
•
Site Internet
Redirigez l'utilisateur vers une page externe.
•
Page interne
Redirigez l'utilisateur vers une page (interne) de votre site Web.
URL de redirection
Spécifie l'URL vers laquelle l'utilisateur sera redirigé.
Retard de redirection
Spécifie le délai de redirection. 0 (zéro) signifie aucun retard.
Boite à lumière
Spécifie le script Lightbox qui sera utilisé pour les fonctionnalités internes telles que "Ouvrir le lien dans Lightbox" ou la fonctionnalité Lightbox
dans les vidéos YouTube, Vimeo et HTML5. Des lightbox supplémentaires peuvent être téléchargées ici: http://wysiwygwebbuilder.com/free_extras.html
Préchargeur
Un préchargeur (également appelé écran de chargement) est ce que vous voyez sur certains sites avant que le contenu principal de la page Web ne soit chargé.
WYSIWYGWeb Builder peut afficher une superposition (semi-transparente) avec un gif animé lorsque le chargement du site Web est en cours. Il disparaîtra juste
après le chargement de la page.
Une collection d'images de préchargement standard est incluse, mais vous pouvez également ajouter vos propres animations en ajoutant une image gif
personnalisée dans le dossier «preloader».
Ce dossier se trouve normalement dans Documents \ WYSIWYGWeb Builder \ system \ preloader \
La propriété background spécifie la couleur de l'arrière-plan de la superposition (pas la couleur d'arrière-plan du GIF!). La couleur d'arrière-plan
prend en charge la transparence alpha.
Tutoriel en ligne:
https://www.wysiwygwebbuilder.com/preloader.html
43
WYSIWYGWeb Builder 16
Propriétés - Avancé
Débordement
Ces propriétés spécifient si le contenu est découpé lorsqu'il déborde de la fenêtre du navigateur. «Overflow-x» détermine l'écrêtage sur les
bords gauche et droit, «Overflow-y» sur les bords supérieur et inférieur.
•
aucun
L'attribut de débordement ne sera pas ajouté au code HTML de la page. Dans ce cas, le comportement de défilement peut être différent pour chaque type de
navigateur.
•
visible
Cette valeur indique que le contenu n'est pas tronqué, c'est-à-dire qu'il peut être rendu en dehors de la fenêtre du navigateur.
•
caché
Cette valeur indique que le contenu est tronqué et qu'aucun mécanisme de défilement ne doit être fourni pour afficher le
contenu en dehors de la fenêtre du navigateur.
•
faire défiler
Cette valeur indique que le contenu est tronqué et que si le navigateur affiche des barres de navigation.
Cela évite tout problème d'apparition et de disparition des barres de défilement dans un environnement dynamique où les pages ont des tailles
différentes.
•
auto
Le comportement de la valeur «auto» dépend du navigateur, mais devrait entraîner la mise en place d'un mécanisme de défilement pour les
boîtes débordantes.
Mode de mise en page
•
Disposition CSS
Le mode de mise en page recommandé. Ce mode utilisera CSS (positions absolues) pour créer la meilleure mise en page possible. Tous les objets
seront positionnés individuellement, de sorte que vous pouvez superposer des objets et les placer où vous le souhaitez. Il en résulte également un
code HTML très propre.
•
Disposition du tableau (non recommandé!)
Ce mode utilise des tableaux (invisibles) pour positionner les objets sur la page. Il ne permet pas aux objets de se chevaucher! Cette technique était utilisée par les
concepteurs Web avant que CSS ne soit pris en charge par tous les navigateurs. Notez qu'aujourd'hui, tous les navigateurs prennent en charge CSS et les mises
en page basées sur des tableaux sont considérées comme une technologie à l'ancienne. Cependant, les mises en page de tableaux peuvent être utiles pour les
News Letters, car les clients de messagerie ne prennent généralement pas en charge CSS. Pour plus de détails, reportez-vous à «Création de newsletters» plus
loin dans ce document.
Utiliser z-index pour l'ordre des objets
Par défaut, tous les objets utilisent l'attribut 'z-index' pour définir la position dans l'ordre z de la page. Si, pour une raison quelconque, vous ne le
souhaitez pas, vous pouvez désactiver cette option. Ne modifiez cette valeur que si vous savez ce que vous faites!
Version PHP
Spécifie la version PHP de la page actuelle. Actuellement, cette option affecte uniquement les fonctionnalités de la base de données. S'il est défini sur PHP4, tous les scripts
utiliseront les fonctions de base de données MySQL. Pour les vieux serveurs!
Si défini sur PHP5-PHP7, les fonctions de base de données MySQLi seront utilisées. C'est la configuration recommandée.
Compatibilité
Cette option permet à Internet Explorer d'émuler les versions précédentes de ce navigateur. Cela peut être utile au cas où vous rencontriez des
problèmes d'affichage dans IE qui n'existaient pas dans les versions précédentes du navigateur. Plus d'information: http://msdn.microsoft.com/en-us/library/cc288325(VS.85).asp
44
WYSIWYGWeb Builder 16
Désactiver la requête multimédia CSS
Lorsque cette option est activée, les points d'arrêt / requêtes multimédias ne seront pas publiés. Cela peut être utile à des fins de test.
Désactiver le formatage HTML / CSS / JavaScript
Cette option désactive les options d'embellissement et de réduction de la page actuelle. Cela peut être utile à des fins de test ou lorsque vous
avez ajouté du code à la page qui ne prend pas en charge le formatage.
Désactiver le code personnalisé
Lorsque cette option est activée, le code personnalisé ne doit pas être inclus dans la page publiée. Cela permet de tester la page sans
code personnalisé. Par exemple, si quelque chose ne fonctionne pas, vous n'avez pas à supprimer tout le code.
Désactiver les événements de défilement sur les petits écrans
Cette option ajoute la possibilité de désactiver les événements de défilement sur les petits écrans (par exemple les téléphones).
Désactiver les transitions de défilement sur les petits écrans
Cette option ajoute la possibilité de désactiver les transitions de défilement sur les petits écrans (par exemple les téléphones). 'Minimumwidth' spécifie
la largeur à laquelle les événements / transitions de défilement seront désactivés.
Désactiver les animations et transitions CSS sur les petits écrans
Cette option désactivera toutes les animations et transitions CSS sur les petits écrans (par exemple les téléphones). 'Minimumwidth' spécifie
la largeur à laquelle les événements / transitions de défilement seront désactivés.
Notez que cela ne fonctionnera que pour les animations / transitions CSS. Les animations JavaScript ne seront pas affectées.
Exclure les navigateurs
Cette option ajoute la possibilité de désactiver les événements de défilement et les transitions sur des navigateurs spécifiques. Plusieurs
navigateurs sont séparés par un caractère pipe. Par exemple:
Android | iPhone | iPad | iPod | BlackBerry
Détails techniques: Exclure les navigateurs utilise la fonction JavaScript suivante pour détecter les navigateurs:
(/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor);
45
WYSIWYGWeb Builder 16
Propriétés - Evénements
Pour plus d'informations sur les événements, veuillez consulter le chapitre Événements.
Propriétés - jQuery Mobile
Les propriétés de page suivantes ne concernent que les pages Web mobiles.
Thème
Spécifie le thème jQuery Mobile pour la page actuelle et tous les objets de cette page. Les thèmes peuvent être modifiés avec le Gestionnaire
de thèmes mobiles.
Swatch
Chaque thème peut avoir jusqu'à 26 variations (nuances).
Dans la propriété Swatch, vous pouvez sélectionner l'une de ces variations.
Utilisez AJAX
jQuery Mobile gérera automatiquement les clics sur les liens et les soumissions de formulaires via Ajax, lorsque cela est possible. Si la valeur est false, l'écoute de hachage
d'URL sera également désactivée et les URL se chargeront comme des requêtes HTTP ordinaires.
Transition
Spécifie la transition de page. Les transitions de page ne fonctionnent que si AJAX est activé.
46
WYSIWYGWeb Builder 16
Insérer
La plupart des éléments de menu sont également disponibles via la boîte à outils. Vous trouverez plus de détails sur les objets disponibles dans Objets
WYSIWYGWeb Builder plus loin dans ce document. Quelques choix supplémentaires sont disponibles dans l'onglet Insertion:
Sélectionner
L'objet Sélectionner est utilisé pour sélectionner des objets. Pour sélectionner plusieurs objets, faites glisser une zone de sélection autour d'eux ou maintenez la touche
Maj enfoncée tout en cliquant dessus un par un.
symbole
Insérez un symbole (caractère spécial) dans un objet texte. Cette option n'est activée que lorsque vous êtes en mode d'édition de texte.
Lien
Ouvre une boîte de dialogue de lien pour l'objet ou le texte sélectionné. Consultez
le chapitre «Liens» pour plus de détails.
47
WYSIWYGWeb Builder 16
Format
La plupart des outils de mise en forme s'appliquent uniquement au texte. WYSIWYGWeb Builder vous permet d'effectuer toutes les modifications d'attribut que vous pouvez
effectuer dans (par exemple) MS Word. Pour modifier la mise en forme du texte, vous devez d'abord double-cliquer sur l'objet texte pour passer en mode édition, puis mettre
en surbrillance le texte que vous souhaitez modifier avec la souris et sélectionner l'option de mise en forme.
Type de police
Le type de police est la famille de polices de texte, telle que Comic Sans, Times New Roman et Courier New. Pour modifier le type de police,
sélectionnez la police souhaitée dans la zone de liste Type de police de la barre d'outils.
Le style de police
Le style du texte peut être en gras, en italique ou souligné.
Pour modifier le style de police, sélectionnez une ou plusieurs icônes de style dans la barre d'outils.
Couleur de la police
La couleur du texte peut également être modifiée.
Pour modifier la couleur de la police, sélectionnez l'icône de couleur du texte dans la barre d'outils. La boîte de dialogue
Couleur apparaît. Choisissez la couleur souhaitée et cliquez sur OK.
Couleur de l'arrière plan
Pour modifier la couleur d'arrière-plan du texte sélectionné, cliquez sur l'icône de couleur d'arrière-plan dans la barre d'outils. La boîte de dialogue Couleur
apparaît. Choisissez la couleur souhaitée et cliquez sur OK.
Changer la casse-> la casse de la phrase
Met en majuscule la première lettre de chaque phrase du texte sélectionné.
Changer la casse-> Minuscule
Définit tout le texte sélectionné en minuscules.
Changer la casse-> Majuscules
Définit tout le texte sélectionné en majuscules.
Changer la casse-> Capitaliser chaque mot
Met en majuscule la première lettre de chaque mot du texte sélectionné.
Changer la casse-> Basculer la casse
Active / désactive la casse de chaque lettre du texte sélectionné.
Diminuer le retrait
Diminuez la marge gauche (retrait) de la ligne de texte actuelle.
Augmenter le retrait
Augmentez la marge gauche (retrait) de la ligne de texte actuelle.
L'espacement des lettres
Définit la quantité d'espace supplémentaire entre les lettres dans le texte.
Hauteur de la ligne
Définit la distance entre les lignes de l'objet.
Taille de police
Pour modifier la taille de la police, sélectionnez l'une des tailles de police HTML disponibles.
48
WYSIWYGWeb Builder 16
Alignement du texte
Vous pouvez modifier l'alignement de l'objet texte sélectionné à l'aide de l'un des boutons d'alignement: Gauche, Centre, Droite ou Justifier.
Supprimer la mise en forme
Parfois, il peut être utile de supprimer tout le formatage d'un morceau de texte à la fois. Mettez le texte en surbrillance et sélectionnez Supprimer la mise en forme
pour réinitialiser tous les styles à leurs valeurs par défaut. Les mises en forme supprimées du texte incluent les caractères gras, italique, souligné, indice,
exposant, barré, couleur du texte et couleur d'arrière-plan.
Supprimer le lien
Supprime le lien attribué au texte sélectionné.
Rechercher dans Google
Lorsque vous modifiez du texte, cette commande recherche le mot sélectionné sur Google. Votre ordinateur doit être connecté à
Internet.
Rechercher dans le dictionnaire
Lorsque vous éditez du texte, cette commande recherche le mot sélectionné sur le site Web:
http://dictionary.reference.com/
Votre ordinateur doit être connecté à Internet.
modes
Dans le Gestionnaire de styles, vous pouvez gérer les styles d'un projet. En utilisant des styles, vous pouvez modifier le style de l'ensemble du site Web en un
seul endroit.
Styles généraux
Dans la page Style général, les styles HTML / CSS peuvent être définis, tels que les styles d'en-tête de texte (H1, H2, H3 ...) ou les styles d'élément de
formulaire. Voir aussi: Gestionnaire de styles.
Styles d'hyperliens
Par défaut, tous les hyperliens de votre page Web utilisent les couleurs de lien HTML par défaut telles que définies dans les propriétés de la page. Mais en
utilisant les styles de lien hypertexte, vous pouvez définir le style des liens individuels.
a) Créer un nouveau style
b) Dans les propriétés du lien (texte), sélectionnez le style. Le style sera appliqué lorsque vous prévisualisez ou publiez la page.
Styles de dégradé
Utilisez le Gestionnaire de styles de dégradé pour ajouter / modifier et supprimer des effets de dégradés globaux (multicolores). L'effet de dégradé peut être
utilisé par les formes, les images clipart, les objets textuels et d'autres outils de dessin.
49
WYSIWYGWeb Builder 16
Polices Web sécurisées
Remarque: vous pouvez désormais activer @ font-face pour pouvoir utiliser des polices non sécurisées pour le Web. Plus d'informations sont disponibles au
bas de cette page.
Les polices Web sécurisées (ou «Web sûres», «sûres pour le Web») sont des polices communes à toutes les versions de Windows, Mac et Linux. Nous vous
recommandons d'utiliser des polices Web sécurisées si vous souhaitez que vos pages Web se ressemblent sur tous les ordinateurs.
Liste des polices Web sécurisées:
Arial
Bookman Old Style
Comic Sans MS
Courrier
Courier Nouveau
Géorgie
Impact
Console Lucida
Lucida Sans Unicode
MS Sans Serif
MS Serif
Palatino Linotype
Tahoma
Times New Roman
Trébuchet MS
Verdana
Vous pouvez activer l'option «Outils-> Options-> Divers-> Afficher uniquement les polices Web sécurisées», de sorte que WYSIWYG Web Builder n'affiche que les
polices Web sécurisées.
Cela peut également augmenter la vitesse de l'interface utilisateur, car toutes les polices ne doivent pas être chargées en mémoire chaque fois que vous
souhaitez sélectionner une police différente.
Bien entendu, cette limitation de police concerne uniquement les objets textuels. Ainsi, vous pouvez utiliser d'autres polices pour les boutons de la barre de navigation, les
bannières et d'autres objets basés sur des images. L'objet texte de Web Builder dispose également d'une option permettant de publier le texte sous forme d'image.
Utilisation de @ font-face
Pendant longtemps, il n'était possible d'utiliser qu'un certain nombre de polices Web sécurisées dans vos conceptions Web. Cependant, vous pouvez maintenant utiliser
n'importe quelle police en activant l'option 'Utiliser @ font-face pour les polices non sécurisées pour le Web' de WYSIWYG Web Builder (Menu-> Outils-> Options-> HTML)!
Si vous activez cette option, vous pourrez utiliser n'importe quel type de police True Type même si elle n'est pas sécurisée pour le Web en utilisant une
nouvelle fonctionnalité CSS3 appelée @ font-face. WYSIWYGWeb Builder générera automatiquement le code nécessaire et téléchargera la police sur le
serveur. Il générera même un fichier de police secondaire (eot) requis pour que cette fonctionnalité fonctionne avec IE!
50
WYSIWYGWeb Builder 16
Table
Le menu Tableau contient toutes les opérations liées à la création et à la modification des tableaux. Les tableaux ont des colonnes et des lignes de cellules qui peuvent
contenir du texte (les images, les formulaires ou d'autres éléments de page ne sont pas pris en charge pour le moment). Les tableaux sont utiles pour la présentation
des données; ils peuvent être utilisés pour simuler des colonnes de texte. Lorsque vous tapez du texte dans une cellule de tableau, il se développe horizontalement et
verticalement pour s'adapter au texte tapé ou inséré. Vous pouvez modifier, formater et spécifier des propriétés (couleur d'arrière-plan ou image) pour le texte, ainsi
que pour la cellule, la ligne, la colonne ou le tableau du tableau lui-même. Vous pouvez facilement redimensionner les cellules, les colonnes, les lignes ou le tableau
entier en faisant glisser les bordures.
Insérer un tableau
Dessinez une boîte à l'endroit où vous souhaitez positionner la table. La boîte de
dialogue Insérer un tableau apparaît.
Entrez le nombre de cellules et de lignes requis. Entrez les détails de
mise en page et de taille et cliquez sur OK
Insérer des lignes ou des colonnes
Sélectionnez cette option si vous devez insérer des lignes et des colonnes supplémentaires après la création d'un tableau. Spécifiez si vous souhaitez
insérer des lignes de colonnes et entrez le nombre de lignes / colonnes à ajouter. Pour insérer une colonne à gauche d'une colonne sélectionnée,
choisissez À gauche de la sélection.
Pour insérer une colonne à droite d'une colonne sélectionnée, choisissez Droit de sélection.
Pour insérer une ligne au-dessus d'une ligne sélectionnée, choisissez Au-dessus de la sélection . Pour
insérer une ligne sous une ligne sélectionnée, choisissez Sous la sélection .
Fusionner les cellules
Fusionner deux ou plusieurs cellules adjacentes. Cette commande n'est disponible que lorsque deux cellules adjacentes ou plus sont sélectionnées sur le même rangée.
Cellule divisée
Divisez la cellule sélectionnée en colonnes.
Supprimer la colonne
Sélectionnez cette option pour supprimer la colonne sélectionnée.
Supprimer la ligne
Sélectionnez cette option pour supprimer la ligne sélectionnée.
Largeur de colonne de table
Définissez la largeur de la colonne sélectionnée.
Hauteur de ligne de table
Définissez la hauteur de la ligne sélectionnée.
Trier
Trier le texte (croissant / décroissant) d'une colonne ou d'une ligne de tableau.
51
WYSIWYGWeb Builder 16
Propriétés de la table
Taille de la bordure
Entrez la largeur souhaitée de la bordure, en pixels.
Remplissage de cellule
Entrez l'espace souhaité entre le contenu et les bords intérieurs des cellules, en pixels.
Espacement des cellules
Entrez l'espace souhaité entre les cellules du tableau, en pixels.
Couleur de l'arrière plan
Spécifie la couleur de l'arrière-plan du formulaire. S'il est réglé sur «Automatique», l'arrière-plan de la page Web sera utilisé.
Image de fond
Spécifie l'image d'arrière-plan facultative.
Couleur de la bordure
Spécifie la couleur des bordures du tableau. S'il est réglé sur «Automatique», le tableau aura une bordure 3D.
Couleur des lignes de survol
Activez un état de survol sur les lignes de la table.
Couleur de la ligne rayée
Ajoutez des bandes zébrées aux lignes du tableau.
Ligne d'en-tête
Cela affichera la première ligne en tant que cellules d'en-tête (<th> à la place ou <td>).
Mode taille
•
Pixels, la taille des cellules du tableau est en pixels. Cela obtiendra le meilleur résultat «pixel parfait». Cependant, lorsque vous utilisez le tableau dans des
mises en page réactives, il ne peut pas être redimensionné en points d'arrêt.
•
Pourcentages, la taille des cellules est exprimée en pourcentages. Les tailles de cellule seront approximativement basées sur les dimensions de
conception. L'utilisation de cette option permet de redimensionner la table en points d'arrêt. Cependant, les tailles de cellule auront toujours les mêmes
pourcentages par rapport à la taille du tableau.
•
Automatique, lors de l'utilisation de ce mode, les cellules du tableau seront automatiquement dimensionnées en fonction de leur contenu. Cela
permet d'utiliser un tableau dans les mises en page de la grille.
Galerie de styles de tableau
La galerie 'Styles de tableau' (dans le ruban). Cela vous permet de mettre à jour rapidement le style de vos tableaux. Vous connaissez peut-être cette
fonctionnalité de MS Office. 30 styles prédéfinis sont actuellement disponibles.
Trier
Trier le texte (croissant / décroissant) d'une colonne ou d'une ligne de tableau.
Nouveau dans WWB12: si vous triez une colonne, les autres colonnes seront également déplacées. En outre, le style des cellules sera inclus, pas seulement le
texte, afin que les cellules conservent leur propre style.
Importer des données à partir d'un fichier texte
Un moyen rapide d'obtenir des données d'un fichier texte séparé par des virgules dans le tableau. Les données doivent être séparées par une virgule.
HTML du tableau
Afficher le code HTML généré du tableau. Vous pouvez également insérer votre propre code HTML!
52
WYSIWYGWeb Builder 16
Propriétés de la cellule
Couleur de l'arrière plan
Spécifie la couleur de l'arrière-plan du texte. S'il est réglé sur «Automatique», l'arrière-plan de la page Web sera utilisé.
Image de fond
Spécifie l'image d'arrière-plan facultative.
Répéter
Définit les attributs de mosaïque pour l'image d'arrière-plan. Les options
possibles sont:
•
Répéter dans les deux sens Répéter
•
dans le sens horizontal Répéter dans le
•
sens vertical Ne pas répéter
•
Alignement horizontal
Définit la position horizontale de l'image d'arrière-plan.
Alignement vertical
Définit la position verticale de l'image d'arrière-plan.
HTML de cellule
Afficher le code HTML généré de la cellule sélectionnée. Vous pouvez également insérer votre propre code HTML!
Conseils de table:
1.
Lors du redimensionnement du tableau, maintenez la touche Ctrl enfoncée pour redimensionner la dernière colonne / ligne d'un tableau en affectant
la taille des autres colonnes / lignes.
2.
Pour sélectionner plusieurs cellules, maintenez la touche Ctrl enfoncée tout en sélectionnant les cellules.
3.
Pour sélectionner toute la ligne, déplacez le curseur de la souris sur la bordure gauche de la première cellule.
4.
Pour sélectionner toute la colonne, déplacez le curseur de la souris sur la bordure supérieure de la première cellule.
5.
Pour modifier les propriétés de plusieurs cellules en une seule action, sélectionnez d'abord les cellules, puis cliquez sur Propriétés de la cellule.
6.
Pour centrer une image au milieu d'une cellule, ouvrez Propriétés de la cellule, spécifiez l'image d'arrière-plan, réglez Répéter sur «Ne pas
répéter» et réglez Alignement horizontal / vertical sur «Centrer».
7.
Pour modifier la police et la taille de plusieurs cellules de tableau: Sélectionnez plusieurs cellules -> maintenez la touche MAJ enfoncée et cliquez sur les
propriétés de la cellule.
Utilisation d'une table comme conteneur d'objets
Depuis la version 12, il est désormais également possible d'ajouter d'autres objets aux cellules du tableau. Lorsque vous faites glisser un objet à l'intérieur d'une
cellule, il devient automatiquement un conteneur d'objets (tout comme un calque ou une grille de disposition). Tout texte qui était dans la cellule du tableau ne sera
plus visible (jusqu'à ce que vous supprimiez à nouveau l'objet). Plusieurs objets peuvent être à l'intérieur d'une seule cellule et ils seront flottants, tout comme dans
une grille de disposition. Notez cependant que les tableaux ne sont pas destinés à être utilisés à des fins de mise en page. La raison principale pour laquelle cette
fonctionnalité a été ajoutée est de permettre l'ajout d'images au tableau.
53
WYSIWYGWeb Builder 16
Organiser
Le menu Organiser contient toutes les opérations liées à la mise en page de la page en cours.
Aligner
Gauches
Aligne les bords gauches des objets sélectionnés avec l'objet dominant.
Centres
Aligne les centres des objets sélectionnés avec l'objet dominant
Droits
Aligne les bords droits des objets sélectionnés avec l'objet dominant
Hauts
Aligne les bords supérieurs des objets sélectionnés avec l'objet dominant
Moyen
Aligne les milieux des objets sélectionnés avec l'objet dominant
Bas
Aligne les bords inférieurs des objets sélectionnés avec l'objet dominant
Espace uniformément
À travers
Espace uniformément les contrôles sélectionnés horizontalement
Vers le bas
Espace uniformément les contrôles sélectionnés verticalement
Centrer sur la page
Vertical / horizontal
Centre les contrôles verticalement ou horizontalement dans la page Web
Faire la même taille
Largeur
Redimensionne les objets sélectionnés pour avoir la même largeur que l'objet dominant
la taille
Redimensionne les objets sélectionnés pour avoir la même hauteur que l'objet dominant
Tous les deux
Redimensionne les objets sélectionnés pour avoir la même taille que l'objet dominant
Organiser
Passer au premier plan
Déplacer l'objet au début de la page
Déplacer vers l'arrière
Déplacer l'objet vers l'arrière de la page
Avance
Déplacer l'objet à la position suivante dans l'ordre z
Reculer
Déplacer l'objet vers la position précédente dans l'ordre z
54
WYSIWYGWeb Builder 16
Groupe
Vous pouvez regrouper plusieurs objets afin qu'ils restent ensemble lorsque vous les déplacez. Lorsque vous sélectionnez un objet d'un groupe, les autres objets
seront également automatiquement sélectionnés. Les objets groupés ne peuvent pas être modifiés tant que vous ne les avez pas dissociés.
Dissocier
Dissocier des objets.
Fusion d'objets
En utilisant cette option, vous pouvez fusionner plusieurs objets en une seule image! Cela peut être utile pour fusionner plusieurs formes (en couches) en
une seule image afin de réduire le nombre d'images publiées et d'accélérer les temps de chargement. Cette option convertira essentiellement n'importe
quel objet (ou groupe d'objets) en une image. Donc, si cela est utilisé pour des objets tels que des formulaires, des boutons, des menus, ils perdront leur
fonctionnalité d'origine, car ils seront publiés sous forme d'image statique.
Pointe:
Vous pouvez également utiliser cette option sur un seul objet. Cela peut être utile pour convertir une image ou une forme dans un autre format d'image.
Par exemple, disons que vous avez appliqué un effet d'ombre à une image. Le format de sortie de l'image sera alors PNG. Sélectionnez
maintenant «Fusionner» dans le menu. L'image sera convertie en un `` objet fusionné '', vous pouvez maintenant sélectionner un autre format de
sortie comme jpg ce qui entraînera une image de sortie plus petite). Q: Mais attendez ... qu'adviendra-t-il de la transparence de l'ombre?
R: L'objet fusionné fera un «instantané» des objets d'arrière-plan et l'utilisera comme image d'arrière-plan!
Fusionner les objets
Fusionner les objets actuellement sélectionnés. Dans les propriétés de cet objet, vous pouvez spécifier le format de sortie de l'image.
Objets divisés
Cette option divisera les objets fusionnés précédents.
Enregistrer en tant que bloc
Enregistrez le ou les objets sélectionnés en tant que bloc afin de pouvoir les réutiliser plus tard dans le même (ou un autre) projet. Les blocs sont des «blocs
de construction» qui permettent de créer rapidement un site Web en faisant glisser des blocs prédéfinis vers l'espace de travail. Blocs Une fois que le bloc a
été déplacé vers la page, vous pouvez personnaliser entièrement le comportement et l'apparence du contenu.
Tourner
Cette commande activera le mode rotation. Vous pouvez faire pivoter des objets d'image et de forme. Pour plus
d'informations, voir aussi: Rotation
Verrouiller / Déverrouiller
Cela «verrouille» les objets sélectionnés, de sorte qu'ils ne peuvent pas être déplacés ou redimensionnés accidentellement. Notez que cela vous empêchera
également de modifier les propriétés des objets à moins que vous n'activiez l'option «Autoriser la modification des objets verrouillés» dans Outils-> Options->
Configuration avancée. Pour déverrouiller à nouveau l'objet, répétez la même commande.
Tout verrouiller
Cela verrouille tous les objets de la page active.
Débloqué tout
Cela déverrouillera tous les objets de la page active.
55
WYSIWYGWeb Builder 16
Paramètres du guide
Accrocher aux guides de règle
Activer ou désactiver l'accrochage aux guides de règle
Afficher les contours des cellules du tableau (si bordure = 0)
Lorsque cette option est activée, Web Builder dessine les contours des cellules du tableau même si la bordure est égale à zéro.
Afficher les bordures du guide
La bordure de guide peut être utile lors de la conception d'une page Web pour des résolutions spécifiques. Si vous vous assurez que tous les objets restent
entre la bordure du guide, la page finale tiendra dans la taille de fenêtre souhaitée.
Afficher les guides intelligents lorsque les objets sont alignés
Les guides intelligents sont des lignes directrices dynamiques qui apparaissent lorsque vous déplacez des objets en alignement les uns avec les autres.
Verrouiller la taille de la page (pas de réglage automatique de la page)
Normalement, Web Builder met automatiquement à jour la taille de la page si vous placez un objet en dehors des bordures de page. Lorsque cette option est activée,
la largeur de la page sera verrouillée même si vous placez des objets en dehors de la bordure. Si vous voulez un espace de travail plus grand, vous devrez mettre à
jour manuellement la largeur / hauteur de la page dans ce cas (en utilisant Propriétés de la page).
Afficher la grille
Afficher ou masquer la grille.
Aligner sur la grille
Activez ou désactivez l'alignement sur la grille. Utilisez la fonction Aligner sur la grille pour aligner exactement les objets. Web Builder crée une attraction
"magnétique" entre l'objet sélectionné et la grille.
Espacement de la grille
Spécifie l'espacement entre les points de la grille.
Afficher les info-bulles lors du redimensionnement et du déplacement des objets et des guides
Activez cette option si vous souhaitez voir la position actuelle (lors du déplacement) ou la taille (lors du redimensionnement) de l'objet actuel dans une info-bulle
au-dessus du curseur de la souris.
Cela fonctionne également en déplaçant les guides de règle!
Remarque:
Cette option peut ralentir le rendu des objets lors du déplacement / redimensionnement car l'info-bulle doit être constamment mise
à jour.
Modifier les points
Cette option peut être utilisée pour les polygones et les courbes pour ajouter, modifier et supprimer des nœuds.
Pour commencer à modifier les nœuds, sélectionnez d'abord le polygone ou la courbe, puis sélectionnez «Modifier les points» dans le menu. Pour modifier les nœuds
existants, maintenez simplement le bouton gauche de la souris et faites-le glisser vers sa nouvelle position. Pour ajouter un nouveau nœud, cliquez n'importe où sur la
ligne et faites glisser le point vers la position souhaitée. Pour supprimer un nœud, maintenez la touche CTRL enfoncée et cliquez sur le nœud avec le bouton gauche de
la souris.
56
WYSIWYGWeb Builder 16
Guides de règle
Les guides de règle horizontaux et verticaux sont utilisés pour aligner les objets sur la page.
En règle générale, les guides de règle sont placés sur la page en les faisant glisser à partir des règles horizontales et verticales ou en spécifiant des positions précises à
l'aide de la boîte de dialogue «Format des guides de règle».
Vous pouvez également utiliser l'option de menu «Ajouter un guide de règle horizontale» ou «Ajouter un guide de règle verticale» pour insérer un nouveau guide.
Pour déplacer le guide de règle, placez le pointeur de la souris sur le guide jusqu'à ce que vous voyiez le pointeur de réglage vertical ou
horizontal, puis faites glisser le guide vers sa nouvelle position.
Vous pouvez supprimer un seul guide de règle ou tous les guides de règle d'une page. Placez le pointeur de la souris sur le guide de règle que vous souhaitez supprimer
jusqu'à ce que vous voyiez le pointeur de réglage, puis faites-le glisser vers la règle. Ou vous pouvez utiliser la boîte de dialogue «Format du guide de règle» pour
supprimer la règle.
Pour supprimer tous les repères de règle d'une page, sélectionnez le menu Disposition, pointez sur Repères de règle, puis cliquez sur Effacer tous les repères de règle.
Les objets placés à proximité d'un guide «s'accrochent» au guide pour un alignement facile.
57
WYSIWYGWeb Builder 16
Outils
Gestionnaire d'actifs
Le Gestionnaire d'actifs peut être utile pour modifier l'emplacement d'un ou plusieurs actifs (images, films, sons, etc.) sans avoir besoin d'ouvrir
les propriétés de chaque élément. Vous pouvez sélectionner le groupe d'éléments à afficher dans le gestionnaire d'actifs (filtre).
Pour modifier l'emplacement d'un seul élément, sélectionnez simplement l'élément, cliquez sur le bouton «Mettre à jour» et sélectionnez le nouvel emplacement. Pour
modifier l'emplacement de plusieurs actifs, sélectionnez les éléments, cliquez sur le bouton «Mettre à jour» et sélectionnez le nouvel emplacement. Cela signifie que vous
pouvez mettre à jour l'emplacement de tous les actifs en quelques clics!
Il est également possible de déplacer des actifs vers un autre emplacement. Dans ce cas, une copie des actifs sera effectuée à l'emplacement spécifié et
mettra à jour le chemin dans l'éditeur. Notez que le fichier d'origine ne sera pas supprimé!
Une autre fonctionnalité intéressante du gestionnaire d'actifs est la possibilité d'afficher tous les fichiers orphelins dans le dossier du projet. Sélectionnez Filtre-> Fichiers
orphelins pour afficher une liste de tous les actifs qui ne sont plus utilisés par le projet en cours. Vous pouvez maintenant sélectionner et supprimer ces fichiers du
dossier du projet.
Gestionnaire de sauvegarde
Chaque fois que vous enregistrez votre projet, le logiciel crée automatiquement une sauvegarde de la version précédente du projet. Le comportement de
sauvegarde peut être configuré dans Outils-> Options-> Sauvegarde
Le gestionnaire de sauvegarde peut être utilisé pour restaurer et supprimer facilement les sauvegardes créées automatiquement. Le gestionnaire de
sauvegarde affichera l'heure et la date de la sauvegarde et le nom du fichier. Les fichiers en amont auront des noms de fichiers tels que: myproject_01.wbs,
myproject_02.wbs, myproject_03.wbs. Le fichier numéroté le plus élevé sera toujours la dernière sauvegarde.
Pour restaurer une sauvegarde, sélectionnez le nom du fichier et cliquez sur «Restaurer». Le fichier sera ensuite déplacé vers le dossier du projet et
renommé à son nom d'origine.
Remarques:
- Le gestionnaire de sauvegarde remplacera la version actuelle du projet!
- Une sauvegarde ne peut pas être restaurée si le projet est en cours d'utilisation. Fermez donc le projet avant d'utiliser le Back Manager.
58
WYSIWYGWeb Builder 16
Poids de la page
L'outil de pondération de page vous aide à déterminer la taille estimée et le temps de téléchargement d'une page.
L'outil listera tous les fichiers qui font partie de la page et leurs tailles. En sélectionnant la vitesse de connexion, vous pouvez avoir une idée du temps qu'il
faudra pour télécharger la page complète. Notez que certains fichiers (comme les scripts, les images) sont utilisés par plusieurs pages. Ils ne seront
téléchargés qu'une seule fois!
Vérifier les liens
Cette option analyse vos documents à la recherche de liens et les affiche dans une liste. Vous pouvez choisir de les modifier ou
appuyer sur le Vérifier bouton pour valider leur état actuel.
États possibles:
non vérifié
- pas encore vérifié
URL validée
- L'URL est valide
URL introuvable
- L'URL n'est pas valide (ou actuellement inaccessible)
Cet outil peut être pratique lorsque vous souhaitez vérifier tous vos liens afin de ne pas avoir à les vérifier un par un.
59
WYSIWYGWeb Builder 16
Plan du site
L'outil de plan de site crée un plan de site XML qui peut être soumis à Google et à d'autres moteurs de recherche pour les aider à mieux explorer
votre site Web.
Un sitemap est un fichier XML qui répertorie les URL d'un site. Il permet aux webmasters d'inclure des informations supplémentaires sur chaque URL: quand elle a été
mise à jour pour la dernière fois, à quelle fréquence elle change et à quel point elle est importante par rapport aux autres URL du site. Cela permet aux moteurs de
recherche d'explorer le site de manière plus intelligente.
Il est important que vous spécifiiez l'URL complète de votre site Web, par exemple
http://www.wysiwygwebbuilder.com/
Cette URL doit commencer par le protocole (tel que http) et se terminer par une barre oblique finale. Vous pouvez spécifier la fréquence et la priorité des
modifications pour chaque page de votre site Web.
changer de fréquence
À quelle fréquence la page est susceptible de changer. Cette valeur fournit des informations générales aux moteurs de recherche et peut ne pas correspondre
exactement à la fréquence à laquelle ils explorent la page.
Les valeurs valides sont: toujours, horaire, quotidienne, hebdomadaire, mensuelle, annuelle, jamais
La valeur «toujours» doit être utilisée pour décrire les documents qui changent à chaque fois qu'ils sont consultés. La valeur «jamais» doit être
utilisée pour décrire les URL archivées.
Veuillez noter que la valeur de cette balise est considérée comme un indice et non comme une commande. Même si les robots d'exploration des moteurs de recherche
prennent en compte ces informations lorsqu'ils prennent des décisions, ils peuvent explorer les pages marquées «toutes les heures» moins fréquemment que cela, et ils
peuvent explorer les pages marquées «chaque année» plus fréquemment que cela. Il est également probable que les robots d'exploration analysent périodiquement les
pages marquées «jamais» afin de pouvoir gérer les modifications inattendues de ces pages.
Priorité
La priorité de cette page par rapport aux autres pages de votre site. Les valeurs valides vont de 0,0 à 1,0. Cette valeur n'a aucun effet sur vos pages
par rapport aux pages d'autres sites, et permet uniquement aux moteurs de recherche de savoir laquelle de vos pages vous jugez la plus importante
afin qu'ils puissent ordonner l'exploration de vos pages de la manière que vous le souhaitez.
La priorité par défaut d'une page est de 0,5.
Veuillez noter que la priorité que vous attribuez à une page n'a aucune influence sur la position de vos pages dans les pages de résultats d'un moteur de recherche.
Les moteurs de recherche utilisent ces informations lors de la sélection entre les pages d'un même site, vous pouvez donc utiliser cette balise pour augmenter la
probabilité que vos pages les plus importantes soient présentes dans un index de recherche.
Notez également que l'attribution d'une priorité élevée à toutes les pages de votre site ne vous aidera pas. La priorité étant relative, elle n'est utilisée
que pour sélectionner entre les pages de votre site; la priorité de vos pages ne sera pas comparée à la priorité des pages sur d'autres sites.
60
WYSIWYGWeb Builder 16
La dernière étape consiste à indiquer à Google où il peut trouver votre plan de site.
https://www.google.com/webmasters/tools/docs/en/sitemap-generator.html#submitting
L'emplacement du plan du site sera quelque chose comme:
http://www.yourwebsiteurl.com/sitemap.xml
Personnaliser
Cette commande affichera la fenêtre Personnaliser.
Cette option est réservée aux utilisateurs avancés et vous permet de personnaliser presque tous les menus, barres d'outils ou raccourcis clavier
de l'application.
Les utilisateurs familiarisés avec les produits Microsoft Office reconnaîtront probablement la plupart des paramètres disponibles.
61
WYSIWYGWeb Builder 16
Options
Cette commande affiche la fenêtre de configuration de WYSIWYGWeb Builder.
Options générales
Créer un document vierge au démarrage
Activez cette option pour créer un nouveau projet vide au démarrage de l'application.
Fenêtre d'application maximisée au démarrage.
Activez cette option pour agrandir la fenêtre de l'application au démarrage.
Ouvrez le fichier utilisé le plus récent au démarrage
Spécifie s'il faut ouvrir le projet utilisé le plus récent au démarrage
Ouvrez la page la plus récente utilisée du projet
Cela ouvrira la page qui était active lors de la dernière sauvegarde du projet.
Afficher l'écran de démarrage
Activez cette option pour afficher l'écran de démarrage / l'image des droits d'auteur au démarrage.
Autoriser la modification des objets verrouillés.
Les objets verrouillés ne peuvent pas être déplacés ou redimensionnés, mais vous pouvez toujours modifier leurs propriétés.
Vérifiez les mises à jour en ligne au démarrage.
Cette option se connectera au site Web Web Builder pour vérifier si une nouvelle version du logiciel est disponible.
Vous pouvez également rechercher des mises à jour dans le menu Aide: Menu-> Aide-> Rechercher des mises à jour en ligne.
Afficher les extensions de page dans Site Manager.
Activez cette option pour afficher l'extension de la page (html, php, asp etc.) dans le gestionnaire de site.
Remarque:
Vous devez redémarrer l'application avant que les extensions de page ne s'affichent.
Vérifiez automatiquement les ID dupliqués lorsque la page est chargée.
Activez cette option pour rechercher automatiquement les ID dupliqués lorsque la page est chargée, publiée ou prévisualisée. Si le logiciel trouve
des ID dupliqués, il affichera un message avec un lien vers les rapports d'erreur.
Utilisez ctrl + clic + glisser pour dupliquer des objets
Activer / désactiver la fonctionnalité ctrl + clic + glisser (objets dupliqués).
Zone de texte
Texte initial: spécifie le texte initial d'un objet texte. Par défaut: double-cliquez pour modifier
N'affichez pas le texte initial, mais passez directement en mode édition une fois créé.
Si vous activez cette option, le texte initial (Double-cliquez pour modifier) ne sera pas affiché. Vous pouvez directement commencer à taper du texte dans la
zone.
62
WYSIWYGWeb Builder 16
Site Web adaptatif
Gardez les styles en ligne avec la conception Web réactive
Cette option s'applique uniquement à la conception Web réactive. Ceci est une option avancée. Ne modifiez pas cette option si tout fonctionne
correctement!
Lors de l'utilisation de Responsive Design Design / points d'arrêt, le logiciel déplace tous les styles d'objets en ligne vers la section <style> dans
l'en-tête de la page. Cela permet d'utiliser les requêtes multimédias CSS3 pour contrôler la position, la taille et la visibilité des objets pour
différents points d'arrêt.
Cependant, dans certains cas, cela peut affecter le comportement d'un objet ou d'une extension. Si vous activez cette option, le logiciel ne touchera pas
aux styles en ligne, mais ajoutera! Important pour écraser la position, la taille et la visibilité des objets avec des requêtes multimédias.
Utilisez "Inclure la visibilité" par défaut pour les nouveaux objets dans Responsive Web Design.
Cette option définit la valeur par défaut pour «Inclure la visibilité» dans Responsive Web Design. Une description de
l'option "Inclure la visibilité" est disponible ici.
Mettre à l'échelle automatiquement les nouveaux objets dans d'autres points d'arrêt
Normalement, lorsque vous insérez un nouvel objet, il sera inséré à la même position et avec la même taille que la vue par défaut (pour les
dispositions fixes / absolues).
Lorsque cette option est activée, les nouveaux objets seront automatiquement mis à l'échelle et se repositionneront dans d'autres points d'arrêt par rapport à la taille du
point d'arrêt. Il mettra également à l'échelle la taille de la police de certains objets lorsque cela est possible.
Remarques:
Cette option a été principalement conçue pour les dispositions fixes / absolues. Lorsque vous utilisez des grilles de mise en page ou une boîte flexible, la mise en page est
flexible en fonction de la largeur de la fenêtre du navigateur.
De plus, si vous ne souhaitez pas que le texte soit mis à l'échelle automatiquement, vous pouvez désactiver cette option.
La taille de la police de l'objet Texte ne peut être mise à l'échelle que lorsque «Activer les polices réactives» est activé.
Masquer les nouveaux objets sur d'autres points d'arrêt (Responsive Web Design)
Lorsque cette option est activée, les nouveaux objets seront définis comme invisibles dans d'autres points d'arrêt. C'est généralement la meilleure option car
les nouveaux objets n'ont généralement pas la même position que les différents points d'arrêt. Vous pouvez utiliser le gestionnaire d'objets pour rendre l'objet
visible dans d'autres points d'arrêt.
Points d'arrêt par défaut
Configurez les points d'arrêt par défaut (et les tailles de police) pour les nouvelles pages. Il est également possible de définir la valeur par défaut pour «Activer les points
d'arrêt lorsque la fenêtre du navigateur est plus petite / plus grande» que la largeur de l'appareil.
Clé d'accès Unsplash
Par défaut, les demandes Unsplash seront effectuées via le compte Unsplash de WYSIWYGWeb Builder. Le nombre de requêtes par heure
est limité à 250 pour chaque utilisateur.
Si vous avez besoin de plus de 250 demandes, vous pouvez spécifier une clé d'accès (privée), de sorte que l'application utilisera votre propre compte
Unsplash à la place. Dans ce cas, toutes les demandes iront directement sur le site Unsplash au lieu de via le proxy de WYSIWYGWeb Builder.
Pour obtenir une clé d'accès, vous devrez créer un compte développeur sur le site Web Unsplash:
https://unsplash.com/oauth/applications
Avertissement:
WYSIWYGWeb Web Builder utilise l'API Unsplash standard pour obtenir les informations sur les images à partir du site Web Unsplash. Comme la
plupart des API tierces, l'API Unsplash est régulièrement mise à jour. Cela signifie qu'à l'avenir, cette fonctionnalité peut soudainement cesser de
fonctionner. Bien sûr, nous ferons de notre mieux pour nous assurer que le logiciel est toujours à jour, donc si Unsplash ne fonctionne plus, veuillez
consulter le site Web pour une mise à jour.
63
WYSIWYGWeb Builder 16
Options HTML
Générez des feuilles de style CSS externes pour les styles spécifiques à la page.
Activez cette option pour générer un fichier CSS distinct avec les styles utilisés par une page. Le nom du fichier sera le même que le nom de
la page. Ainsi, «index.html» générera un fichier «index.css».
Les styles en ligne ne feront pas partie de la feuille de style! Ainsi, pour obtenir les meilleurs résultats, vos objets doivent utiliser les styles créés dans le
Gestionnaire de styles.
Générez une feuille de style CSS unique pour les styles globaux.
Activez cette option pour générer un seul fichier CSS avec tous les styles créés dans le Gestionnaire de site. Toutes les pages feront référence à ce fichier.
La feuille de style globale ne contiendra pas de styles spécifiques à la page (comme les styles de barre de menus).
Optimiser les styles en ligne (expérimental)
Il s'agit d'une option qui tente de nettoyer le code HTML en déplaçant les styles en ligne vers la feuille de style de la page.
Remarque:
Cette option traitera tous les éléments HTML de la page, mais toutes les extensions (tierces) peuvent ne pas prendre en charge ce comportement.
Veuillez donc tester toutes les fonctionnalités de votre site Web avant de l'utiliser!
Polices Web (@ font-face)
•
N'utilisez pas @ font-face (par défaut)
Aucun code ne sera généré pour prendre en charge les polices non sécurisées pour le Web.
•
Utilisez automatiquement @ font-face pour les polices non sécurisées pour le Web.
Si vous activez cette option, vous pourrez utiliser n'importe quel type de police True Type même si elle n'est pas sécurisée pour le Web en
utilisant une nouvelle fonctionnalité CSS3 appelée @ font-face. WYSIWYGWeb Builder générera automatiquement le code nécessaire et
téléchargera la police sur le serveur. Il générera même un fichier de police secondaire (eot) requis pour que cette fonctionnalité fonctionne avec
IE!
•
Spécifiez manuellement les polices @ font-face.
Dans certains cas, il est nécessaire de configurer manuellement @ font-face. Par exemple, si ce n'est pas possible; pour déterminer automatiquement le
nom de fichier associé à une police spécifique ou si vous souhaitez utiliser des fichiers séparés pour chaque format. L'activation de cette option permet
aux utilisateurs avancés de lier manuellement les fichiers de police à une police spécifique.
Remarques sur @ font-face:
- Sachez que les fichiers de polices peuvent être assez volumineux, ils peuvent donc ajouter un poids considérable à la page.
- Assurez-vous de vérifier la licence de la police que vous souhaitez utiliser, car la plupart des polices ne sont pas sous licence pour permettre ce type d'utilisation.
Rendre la police disponible sur votre serveur viole la plupart des accords de licence utilisateur final.
- Malheureusement, Internet Explorer nécessite un type de police différent (EOT au lieu de TTF), de sorte que le logiciel génère automatiquement la
version EOT de la police. Cela signifie que vous vous retrouverez avec deux versions de chaque police !!
64
WYSIWYGWeb Builder 16
•
Utilisez Google Fonts pour les polices non sécurisées pour le Web
Activez cette option si vous prévoyez d'utiliser Google Fonts dans votre projet. Si cette option est activée, le logiciel supposera que toutes
les polices non sécurisées pour le Web que vous utilisez sont des polices Web Google et générera automatiquement un lien vers la police
dans le code HTML, vous n'avez donc pas à le faire manuellement. Notez cependant que pour utiliser Google Fonts pendant la conception,
vous devez l'avoir installé sur votre ordinateur!
Voici comment installer une police Google sur votre ordinateur:
1) Visitez le site Web de Google Fonts: http://www.google.com/fonts/
2) Trouvez la police que vous souhaitez utiliser et ajoutez-la à une collection (cliquez sur «Ajouter à la collection»). Prenez note du nom de la police, vous
en aurez besoin à l'étape 6.
3) Pour pouvoir utiliser la police sur votre ordinateur, vous devrez la télécharger et l'installer afin qu'elle soit disponible dans
WYSIWYGWeb Builder (et d'autres logiciels Windows).
Cliquez sur le lien "Télécharger votre collection" en haut du site Web de Google Fonts et vous obtiendrez un fichier zip contenant
toutes les polices demandées au format TTF.
4) Décompressez la collection et faites glisser les fichiers TTF dans votre dossier de polices Windows. (Sous Windows 8: Panneau de configuration \
Apparence et personnalisation \ Fonts). La ou les polices seront désormais disponibles pour toutes vos applications Windows.
5) Pour voir la police dans WYSIWYGWeb Builder, assurez-vous que l'option `` Afficher uniquement les polices Web sécurisées '' est désactivée:
Menu-> Outils-> Options-> Divers
Remarque: certaines polices Google nécessitent des paramètres supplémentaires. Vous pouvez ajouter ces paramètres en cliquant sur le bouton «Gérer».
Cliquez ensuite sur «Ajouter» et sélectionnez la famille de polices. Dans le champ Paramètres, spécifiez les paramètres.
Exemple:
& sous-ensemble = latin, cyrillique-ext
ou
: 400,700,900 & subset = latin, cyrillique
65
WYSIWYGWeb Builder 16
Utilisez des dégradés CSS3 au lieu d'images (si possible).
Activez cette option pour générer des styles CSS pour les dégradés d'arrière-plan au lieu d'images. Cela réduit le nombre d'images générées pour la page.
Gardez à l'esprit cependant que tous les navigateurs (en particulier Internet Explorer!) Ne prennent pas encore en charge le dégradé CSS3. Notez également que
tous les styles de dégradés ne sont pas encore pris en charge, car dans certains cas, les images seront toujours utilisées.
Publiez les icônes de navigation sous forme d'image SVG.
Cela produira les icônes en SVG intégré (image vectorielle évolutive) à la place en tant que police et réduira la taille globale du site Web si
vous n'utilisez que quelques icônes.
Cette option s'applique aux icônes utilisées dans: Fil d'Ariane, Cartes, Mega Menu, Menu Superposition, Menu Panneau, Menu Responsive,
Onglets, Menu Themeable et Toasts.
Incluez le nom de la page dans les attributs d'ID générés automatiquement.
Cette option ajoutera le nom de la page à l'ID généré automatiquement lorsqu'un nouvel objet est ajouté à la page. Par exemple,
«Image1» deviendra «indexImage1». Où «index» est le nom de la page. Cela peut être utile lorsque vous utilisez de nombreuses pages
maîtres, auquel cas cela évitera la duplication des attributs d'ID dans une page.
Remarque: Cette option ne modifie pas vos identifiants existants uniquement pour les objets nouvellement créés!
Activez le codage HTML (basé sur le jeu de caractères sélectionné).
Cela enregistrera le document encodé avec la page de codes sélectionnée. Il s'agit d'une nouvelle fonctionnalité de la version 7.5 visant à générer
(encore) de meilleurs documents HTML conformes au W3C. Cette option doit être activée sauf si vous rencontrez des problèmes d'affichage des
caractères dans les navigateurs.
Activez le codage d'URL pour éviter les noms de fichiers Web dangereux.
Spécifie s'il faut utiliser le codage URL pour les noms de fichiers. En général, vous ne devez pas utiliser d'espaces blancs ou d'autres caractères non
alphanumériques dans les noms de fichiers, car cela peut perturber les serveurs Web et les navigateurs (en particulier en combinaison avec JavaScript). Si vous
activez cette option, le logiciel encodera les noms de fichiers pour éviter d'éventuels problèmes avec des noms de fichiers non valides. Bien sûr, il est toujours
préférable de vous assurer que vos noms de fichiers sont valides avant de les ajouter à votre site Web.
Utiliser le dossier partagé pour les actifs (les pages des dossiers n'auront pas leur propre dossier d'actifs)
L'activation de cette option partagera le (s) dossier (s) cible des ressources pour l'ensemble du site Web (y compris les pages des sous-dossiers!). Cela signifie
que les sous-dossiers du Gestionnaire de site n'utilisent plus un dossier d'actifs distinct. Notez que vous pouvez définir le dossier cible pour des types de fichiers
spécifiques dans Publier et prévisualiser. Si cette option est désactivée, chaque dossier que vous créez dans le Gestionnaire de site aura son propre dossier
d'actifs.
Générez un fichier JS externe pour les scripts spécifiques à la page.
Activez cette option pour générer un fichier JS séparé avec le script utilisé par une page. Le nom du fichier sera le même que le nom de la
page. Ainsi, «index.html» générera un fichier «index.js».
Déplacer JavaScript à la fin de la page
Cela placera tous les scripts à la fin de la page et peut entraîner de meilleures performances car le JavaScript sera exécuté après
le chargement du reste de la page. Ceci est également connu sous le nom de "JavaScript discret".
Charger les fichiers JavaScript intégrés de manière asynchrone
Spécifie que les scripts intégrés seront exécutés de manière asynchrone dès qu'ils seront disponibles.
Notez que cela n'est utile que lorsque «Générer un fichier JS externe pour des scripts spécifiques à la page» est activé, car sinon les scripts locaux
peuvent être exécutés avant que les scripts externes dont ils dépendent aient été chargés!
Plus d'information:
https://www.w3schools.com/tags/att_script_async.asp
66
WYSIWYGWeb Builder 16
Mise en page
•
Défaut
•
Embellir
Le HTML sera publié "TEL QUEL". Aucune mise en forme ne sera appliquée.
Formate le code HTML pour qu'il soit meilleur et plus facile à lire. Si vous sélectionnez cette option, la taille de la page augmentera
légèrement en raison des espaces blancs supplémentaires ajoutés à la page. Mais en général, cela n'affecte pas les performances
du navigateur
•
Minifier
Cette option réduit la taille du HTML généré et peut améliorer les performances de la page. Cependant, le HTML
devient plus difficile à lire.
Remarques:
- Le formatage affectera tout le HTML de la page. Y compris le code personnalisé et le code généré par les extensions!
- PHP et JavaScript ne seront pas formatés.
67
WYSIWYGWeb Builder 16
Options des fichiers et des dossiers
dans le Dossier système option vous pouvez configurer où le logiciel stockera toutes les données spécifiques à l'utilisateur, comme les extensions, les modèles, les
paramètres de publication, les dégradés, etc.
Important:
Si vous modifiez le dossier du dossier système, cela modifiera également l'emplacement où WYSIWYGWeb Builder recherche les extensions, les modèles, les
paramètres de publication, etc. Donc, si vous modifiez le dossier, assurez-vous de déplacer également tous les fichiers vers le nouveau dossier!
Si vous activez Laisser WYSIWYG Web Builder gérer les images et autres fichiers utilisés par un projet, puis Web Builder effectuera une copie de
sauvegarde de tous les éléments (images, films, sons) qui font partie de votre site Web dans un dossier relatif au fichier de projet, de sorte que tous les
fichiers seront stockés au même endroit. Le nom du dossier sera le même que le nom du projet. Cela signifie que si votre projet est appelé «mon site
Web», tous les actifs seront stockés dans le sous-dossier «mon site Web». Copier ou déplacer votre projet sur un autre ordinateur est désormais aussi
simple que de copier le fichier projet et son sous-dossier sur un autre PC!
dans le Dossier d'aperçu vous pouvez modifier le dossier par défaut utilisé pour les fichiers d'aperçu. Cela peut être utile si vous souhaitez que les fichiers
soient copiés dans un dossier de votre serveur Web local au cas où vous génériez des pages PHP ou ASP.
Si l'option Supprimer les fichiers d'aperçu est activé, Web Builder supprimera tous les fichiers précédemment générés la prochaine fois que vous sélectionnerez
l'option d'aperçu. Cela évite que les anciens fichiers soient laissés et que seuls les nouveaux fichiers existent dans le dossier d'aperçu.
Avertissement: Cela supprimera tous les fichiers du dossier spécifié! (pas seulement les fichiers précédemment générés par Web
Builder).
Options de publication et d'aperçu
Délai de connection dépassé, augmentez cette valeur si vous rencontrez des délais d'expiration lors de la connexion au serveur FTP. La valeur par défaut est 30 secondes.
Activer la journalisation, activez la journalisation lorsque vous rencontrez des problèmes lors de la publication de votre site Web. Le journal peut contenir des
informations utiles sur le problème.
Préfixe du nom des images. Certains objets tels que les formes, les boutons de la barre de navigation seront publiés sous forme d'images (générées
dynamiquement). Ces images ont un nom unique sur le site Web (par exemple img0001.gif, img0002.gif). Avec cette option, vous pouvez contrôler la
façon dont les images seront nommées. Par exemple si vous spécifiez wbimage comme préfixe, les images seront nommées 'wbimage0001.gif' ou
'wbimage0002.png' Il est également possible de faire en sorte que le nom de la page fasse partie du nom de fichier en activant l'option Utilisez le nom de
la page comme préfixe de l'image, cela facilite le suivi des images appartenant à une page spécifique
Dossier cible pour les types de fichiers
WYSIWYGWeb Builder peut publier les images, scripts, swf, pdf, css et autres fichiers qu'il génère dans un dossier séparé sur le
serveur Web. Cela gardera votre site Web organisé.
Si le serveur Web ne prend pas en charge les sous-dossiers, supprimez tous les types de fichiers de la liste. Dans ce cas, tous les fichiers seront publiés
dans le même dossier que les fichiers HTML.
Remarque: Les dossiers sont relatifs au dossier de la page HTML. Donc, si vous avez créé des dossiers dans le Gestionnaire de site, chaque dossier
aura ses propres sous-dossiers pour les fichiers!
Aperçu de la portée, cette option spécifie la portée de l'aperçu de Web Builder. Sélectionner Page actuelle pour prévisualiser une seule page ou Site
Web entier si vous souhaitez tester votre site Web complet.
Pointe:
Maintenez la touche SHIFT enfoncée pendant la prévisualisation pour «inverser» la portée actuelle de l'aperçu.
Cela signifie que si «Page actuelle» est sélectionné, le fait de maintenir la touche SHIFT permet de prévisualiser l'ensemble du site Web.
68
WYSIWYGWeb Builder 16
Supprimer le code PHP pendant l'aperçu
De nombreuses fonctionnalités avancées de WYSIWYGWeb Builder utilisent du code PHP. Comme vous le savez peut-être, les navigateurs ne peuvent pas
interpréter le code PHP et afficheront généralement des erreurs ou rien du tout! Prévisualiser la mise en page d'une telle page Web sur un serveur n'est pas toujours
pratique, c'est pourquoi nous avons introduit cette option. Si cette option est activée, tout le code PHP sera supprimé lors de l'aperçu, afin que vous puissiez afficher
la mise en page. Bien sûr, vous devrez toujours publier la page sur un serveur Web compatible PHP pour tester complètement le comportement (dynamique) de la
page.
Remarque:
Pendant l'aperçu, le logiciel renomme l'extension de fichier de la page de .php en .html.
Cela signifie que si d'autres pages renvoient à cette page, le navigateur ne trouvera pas la page car elle a une extension différente.
Masquer l'extension de fichier pour les liens internes (pour les utilisateurs avancés uniquement!)
Supprimez l'extension des liens internes. Au lieu de «page1.html», l'application utilisera «page1» dans les objets de navigation et les
liens.
Notez que les fichiers générés auront toujours des extensions sinon ils ne seront pas reconnus comme fichiers HTML / PHP sur le serveur!
Vous devrez configurer le serveur pour masquer les extensions sur le serveur via .htaccess.
Par exemple:
SUPPRESSION DE L'EXTENTION PHP
RewriteEngine On
RewriteCond% {REQUEST_FILENAME}! -F
RewriteRule ^ ([^ \.] +) $ $ 1.php [NC, L]
SUPPRESSION DE L'EXTENTION HTML
RewriteEngine On
RewriteCond% {REQUEST_FILENAME}! -F
RewriteRule ^ ([^ \.] +) $ $ 1.html [NC, L]
69
WYSIWYGWeb Builder 16
Options diverses
Langue: Utilisez cette option pour spécifier la langue utilisée pour l'interface utilisateur. La valeur par défaut est l'anglais. Avant qu'une certaine
langue soit disponible dans la liste déroulante, vous devez installer le module de langue approprié. Visitez le site Web de WYSIWYGWeb Builder
pour vérifier les langues disponibles.
Interface utilisateur
Spécifie s'il faut utiliser le menu classique et les barres d'outils ou l'interface du ruban.
Algorithme d'ancrage pour les barres redimensionnables: Style par défaut ou Visual Studio 2005. Lorsque le style Visual Studio 2005 est sélectionné, les marqueurs
de Dock sont affichés lorsque vous repositionnez des fenêtres comme le Gestionnaire de site ou la Boîte à outils.
Afficher uniquement les polices Web sécurisées
Vous pouvez activer cette option pour que WYSIWYGWeb Builder n'affiche que les polices Web sécurisées.
Afficher la poignée de rotation pour les objets rotatifs
Spécifie s'il faut afficher les poignées de rotation dans l'espace de travail pour permettre une rotation plus rapide des objets.
Utiliser les couleurs du thème
Par défaut, le sélecteur de couleurs de WYSIWYGWeb Builder affiche une palette de couleurs standard avec 140 couleurs Web standard. Avec l'option
'Couleur du thème' (inspirée du sélecteur de couleurs MS Office), vous pouvez configurer une palette de couleurs personnalisée de 12 couleurs. Les
variantes claires et foncées de ces couleurs seront générées automatiquement.
Outre la possibilité de personnaliser les couleurs, il est également possible de synchroniser les couleurs lorsqu'elles sont modifiées ou lorsque vous
sélectionnez un thème de couleur différent.
Les options suivantes sont disponibles:
•
non
utilisez la palette de couleurs par défaut.
•
oui - ne pas synchroniser
utilisez des couleurs personnalisées, mais ne remplacez pas les couleurs des pages lorsque le thème est modifié.
•
oui - synchronise toutes les couleurs
utilisez des couleurs personnalisées, remplacez les couleurs des pages lorsque le thème est modifié ou a lorsqu'un thème différent est
sélectionné. Fondamentalement, cela fera un remplacement global des couleurs correspondantes dans toutes les pages. Les couleurs du thème
sélectionné précédent seront remplacées par les couleurs du thème sélectionné.
•
oui - synchroniser les catégories
utilisez des couleurs personnalisées, remplacez les couleurs des pages lorsque le thème est modifié ou a lorsqu'un thème différent est sélectionné. Effectuez
un remplacement global des couleurs correspondantes dans toutes les pages en fonction de leurs catégories. Par exemple, les couleurs du texte ne seront
mises à jour que pour le texte, mais si l'arrière-plan utilise cette même couleur, il ne sera pas mis à jour. Cela fonctionne de la même manière que dans cet
outil «Global Replace».
Tutoriel en ligne:
https://www.wysiwygwebbuilder.com/color_themes.html
Activez le rendu HTML en direct des extensions.
Certaines extensions utilisent le «rendu HTML en direct», ce qui signifie qu'elles créent un aperçu en direct du code HTML généré pour l'extension. Et
bien que cela puisse être utile pour avoir une idée de ce à quoi ressemblera la page finale, cela peut également utiliser beaucoup de ressources système
(mémoire / temps processeur), en particulier lorsque vous utilisez de nombreuses extensions dans le même projet. La désactivation de cette option peut
réduire l'utilisation de la mémoire et le temps de chargement des projets. Cela n'aura aucun effet sur la sortie générée.
70
WYSIWYGWeb Builder 16
Bouton "Fermer" de l'onglet
Spécifie l'apparence et le comportement du bouton de fermeture dans les onglets de page.
•
Aucun
•
Onglet actif
•
Onglet en surbrillance (compact)
Pas de bouton de fermeture sur les onglets.
Le bouton Fermer s'affiche uniquement sur l'onglet actif.
Le bouton Fermer s'affiche sur les onglets actifs et en surbrillance. L'espace pour le bouton de fermeture sur l'onglet non actif n'est pas
réservé.
•
Onglet en surbrillance
•
Tout
Le bouton Fermer s'affiche sur les onglets actifs et en surbrillance.
Le bouton fermé est affiché sur tous les onglets.
Dossier de sauvegarde: WYSIWYGWeb Builder peut effectuer automatiquement des sauvegardes de vos projets, avant d'écraser une
version précédente du projet.
Dossier de sauvegarde spécifie le dossier dans lequel la sauvegarde sera stockée.
Nombre total de sauvegardes de site. Spécifie le nombre de sauvegardes à conserver avant de les écraser avec des versions plus récentes. Entrez 0 si
vous ne souhaitez pas que Web Builder crée des sauvegardes.
Web Builder nommera les sauvegardes comme ceci:
myproject_01.wbs, myproject_02.wbs, myproject_03.wbs
Le fichier numéroté le plus élevé sera toujours la dernière sauvegarde. Si le nombre maximum de sauvegardes est atteint, la sauvegarde la plus
ancienne sera supprimée et toutes les autres sauvegardes seront renommées.
Sauvegarde automatique
Activez cette option pour effectuer automatiquement une copie de sauvegarde de votre projet toutes les 5, 15 ou 30 minutes. Cela peut vous aider à restaurer votre
travail si votre ordinateur tombe en panne de manière inattendue.
Le nom de la sauvegarde sera myproject_autobackup.wbs et il sera stocké dans le dossier de sauvegarde.
Faites une sauvegarde du projet sur le serveur.
Activez cette option pour effectuer automatiquement une sauvegarde du projet sur le serveur. Cela peut être utile si votre ordinateur tombe en
panne ou si vos projets locaux sont corrompus. Dans ce cas, vous aurez toujours une copie de sauvegarde sur le serveur.
Sauvegarde automatique
Cela enregistre automatiquement le projet actif à l'intervalle spécifié.
Notez que cela ne fonctionne pas pour les nouveaux projets «sans titre», car le projet doit avoir un nom de fichier avant de pouvoir être enregistré.
Activer la journalisation du débogage (à utiliser uniquement à des fins de test!)
Si vous activez cette option, les extensions créeront un fichier journal avec des informations qui peuvent être utiles pour le débogage. Cela peut vous
aider ou aider le développeur de l'extension à tracer / résoudre les problèmes.
Le fichier journal sera créé dans le dossier extensions et il porte le même nom que l'extension (extensionname.log).
Les informations suivantes seront enregistrées:
•
Chargement / téléchargement avec le numéro de version.
•
Propriétés, variables et valeurs
•
Transformation XML du jeu de données (entrée utilisateur appliquée au modèle XSL)
•
Transformation XML de la galerie
•
Transformation XML de menu
•
Copie de fichiers dans le dossier de publication.
71
WYSIWYGWeb Builder 16
Extension Manager
Les extensions (également appelées add-ons ou plugins) sont des composants qui améliorent les fonctionnalités de WYSIWYGWeb Builder. Les
extensions sont accessibles via la Boîte à outils ou via le menu Insertion tout comme les objets standard.
Il existe déjà une longue liste d'extensions officielles et à l'avenir, nous prévoyons d'en publier beaucoup d'autres pour rendre WYSIWYGWeb
Builder encore plus puissant qu'il ne l'est déjà. Certaines extensions sont simplement des composants avec peu de paramètres tandis que
d'autres sont des applications presque complètes à elles seules! Voir également: http://www.wysiwygwebbuilder.com/extensions.html
Vous pouvez même créer vos propres extensions avec l'outil Extension Builder:
http://www.wysiwygwebbuilder.com/extension_builder.html
De nombreux utilisateurs ont déjà créé d'incroyables extensions personnalisées. Consultez la liste complète ici:
http://www.wysiwygwebbuilder.com/forum/viewforum.php?f=42
Le gestionnaire d'extensions vous aide à organiser les extensions. Dans le gestionnaire d'extensions, vous pouvez installer / supprimer et mettre à jour des extensions.
Vous pouvez également rechercher des extensions dans la galerie en ligne. le Extensions installées
La page affiche toutes les extensions actuellement installées. Si vous n'avez plus besoin d'une extension spécifique, vous pouvez la supprimer en
cliquant sur le bouton «Désinstaller».
Remarque:
Veuillez vous assurer qu'aucun de vos projets n'utilise l'extension si vous décidez de supprimer une extension spécifique, sinon vous ne
pourrez plus charger ce projet tant que vous n'aurez pas réinstallé l'extension.
La page Galerie en ligne affiche toutes les extensions disponibles pour le téléchargement et l'installation. Si une nouvelle version d'une extension que
vous possédez déjà est disponible en ligne, vous avez le choix de la mettre à jour. Chaque fois que vous ouvrez cette fenêtre, Web Builder vous
demandera si vous souhaitez télécharger la liste la plus récente du site Web. Normalement, vous ne devrez le faire qu'une fois par semaine.
Remarques:
Le gestionnaire d'extension intégré ne fonctionne correctement que si le logiciel peut accéder à notre serveur Web! Si, pour une raison quelconque,
votre pare-feu ou antivirus bloque l'accès à la connexion Internet, vous ne pourrez pas utiliser cette fonction. Pour résoudre ce problème, assurez-vous
que WYSIWYGWeb Builder figure dans la liste des exceptions de votre pare-feu / antivirus!
Si vous avez récemment acheté votre licence, il est possible que vos informations d'enregistrement ne soient pas encore dans la base de données en ligne. IL PEUT
PRENDRE PLUSIEURS HEURES AVANT QUE VOUS POUVEZ TÉLÉCHARGER LES EXTENSIONS! Soyez patient.
Voir également: http://www.wysiwygwebbuilder.com/restricted.html
La page d'installation manuelle vous permet d'installer manuellement des extensions. Cliquez sur le bouton «Installer» pour sélectionner un fichier d'extension (*
.wbx) ou un fichier zip. Vous pouvez également glisser-déposer une ou plusieurs extensions à partir de l'Explorateur Windows sur cette fenêtre! Vous pouvez
également installer manuellement les extensions en copiant le fichier .wbx dans le dossier des extensions: C: \ Users \ Your Name \ Documents \
WYSIWYGWeb Builder \ system \ extensions où «Votre nom» est le nom de votre dossier personnel sur l'ordinateur.
Sujet de FAQ connexe:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?t=7234
Avertissement:
Les extensions sont mises à disposition comme service supplémentaire pour les utilisateurs enregistrés. Ils ne font pas officiellement partie du logiciel. Pablo
Software Solutions n'offrira pas de support pour les extensions tierces et n'est en aucun cas responsable du bon fonctionnement de ces extensions. Toutes les
extensions sont fournies «EN L'ÉTAT» pour ceux qui les trouvent utiles. Bien entendu, nous ferons de notre mieux pour nous assurer qu'ils fonctionnent
correctement.
72
WYSIWYGWeb Builder 16
Index de recherche
WYSIWYGWeb Builder a une fonctionnalité de «moteur de recherche» intégrée de base, afin que les visiteurs puissent rechercher des mots spécifiques sur votre site
Web.
Pour rendre cette fonctionnalité disponible aux utilisateurs non avancés, nous avons décidé d'utiliser JavaScript car il ne vous oblige pas à configurer la base de
données et le service d'indexation sur le serveur. L'inconvénient est qu'il peut être plus lent pour les sites Web plus volumineux (> 100 pages).
Générer un index de recherche
Activez cette option pour créer l'index de recherche lors de la publication.
Remarque:
L'index de recherche est obligatoire si vous souhaitez utiliser l'objet 'Site Search' sur votre site Web!
Nom du fichier d'index
Spécifie le nom du fichier d'index de recherche. Puisqu'il s'agit d'un fichier JavaScript, il doit avoir les extensions .js.
Créer un index à partir de
Cette option spécifie comment l'index de recherche sera créé.
•
Contenu de la page
L'index de recherche sera créé à partir du contenu de la page. Dans ce cas, WYSIWYGWeb Builder extraira tout le
texte des pages.
•
Balises Meta
L'index de recherche sera créé à partir des balises META dont vous avez spécifié le contenu dans Propriétés de la page.
•
Texte seulement
Cela indexera uniquement le texte, ce qui entraînera un index de recherche plus petit / plus rapide. Dans la plupart des cas, ce mode sera
suffisant. Notez que cela réduira également le temps nécessaire pour créer l'index de recherche lors de la publication.
Exclure les mots vides de l'index
Activez cette option pour exclure les mots vides.
WYSYWYGWeb Builder inclut une liste prédéfinie de mots vides dans le fichier 'search.dat'.
Pour créer votre propre liste de mots d'exclusion, copiez simplement le fichier dans «Mes documents \ WYSIWYGWeb Builder \ système \
search.dat et Web Builder utilisera ce fichier à la place.
Remarque:
Les mots vides sont des mots qui ne contiennent pas de signification importante à utiliser dans les requêtes de recherche. Habituellement, ces mots
sont exclus des requêtes de recherche car ils renvoient une grande quantité d'informations inutiles.
Utilisez des liens absolus
Activez cette option si vous souhaitez utiliser le moteur de recherche dans les sous-dossiers. Dans ce cas, des liens absolus doivent être utilisés, sinon les
liens dans les résultats de la recherche n'utiliseront pas le chemin correct (car il n'y a qu'un seul index de recherche à la racine du site Web).
Exemple:
http://www.yourwebsite.com
73
WYSIWYGWeb Builder 16
Rapport d'erreur
Les outils de rapport d'erreurs analyseront la page actuelle et vérifieront les erreurs telles que les identifiants dupliqués, les noms de fichiers invalides ou d'autres
problèmes courants. Voici une liste des problèmes possibles qui sont actuellement détectés par l'outil de rapport d'erreurs:
Nom de fichier non valide
Les noms ne doivent contenir que des lettres ASCII (az, AZ), des chiffres (0-9), des traits de soulignement, des points et des tirets.
ID vide
Assurez-vous que tous les objets ont un ID valide.
ID en double
Tous les objets doivent avoir une propriété ID unique dans le contexte de la page. Cela inclut les objets sur les pages maîtres!
HTML non valide
Le HTML personnalisé ne doit pas contenir de balises <html> <<head> ou <body>.
Extension de page non valide
La page contient un formulaire qui nécessite PHP. Définissez l'extension du fichier de page sur 'php' (dans les propriétés de la page)
Page de réussite non spécifiée
La propriété de page de succès du formulaire ne peut pas être vide.
Page d'erreur non spécifiée
La propriété de page d'erreur du formulaire ne peut pas être vide.
Titre de page non valide
La page n'a pas de titre significatif. Le titre de la page est vide ou a la valeur par défaut «page sans titre».
Nom de page non valide
La page «index» ne doit pas avoir de caractères majuscules dans son nom. «Index» ou «INDEX» n'est pas valide.
Le formulaire utilise 'mailto:'
L'utilisation de «mailto:» dans les formulaires n'est pas fiable. Veuillez plutôt envisager d'utiliser le processeur de formulaire intégré.
Le texte n'est pas optimisé
Le texte n'est pas optimisé pour tous les navigateurs. Pensez à utiliser l'une des options de compatibilité.
L'objet est en dehors du port de vue
Le contour de l'objet est en dehors des limites de la page. Si l'objet est masqué, affichez-le d'abord, déplacez-le à l'intérieur des limites de la page et
masquez-le à nouveau.
74
WYSIWYGWeb Builder 16
Gestionnaire de thèmes
Le gestionnaire de thèmes fournit une autre façon de créer des thèmes d'interface utilisateur jQuery qui sont utilisés par des objets tels que jQuery
Accordion, jQuery Tabs et de nombreux autres widgets basés sur jQuery. Normalement, vous créez ces thèmes via http://jqueryui.com/themeroller/ , mais
vous pouvez créer des thèmes impressionnants directement à partir de WYSIWYGWeb Builder! Le gestionnaire de thèmes utilise le puissant «moteur de
forme» de WYSIWYGWeb Builder pour produire des thèmes de haute qualité.
Pour créer un nouveau thème, cliquez sur le bouton «Ajouter». Vous pouvez maintenant des styles spécifiques pour chaque état des widgets jQuery. Il y a
l'état par défaut, les états de survol et d'activation et la zone de contenu. La zone de contenu peut être le panneau d'un ensemble d'onglets ou un accordéon.
Vous pouvez également définir la famille de police globale, le style de police et la taille de la police. Le rayon du coin spécifie l'arrondi des bordures. Dans le
panneau de droite, vous pouvez prévisualiser le résultat des styles spécifiés.
Lorsque vous avez terminé la conception de votre thème, cliquez sur «Enregistrer». Le gestionnaire de thèmes va maintenant générer les fichiers CSS
et les images associées. Les fichiers seront copiés dans le dossier Mes documents \ WYSIWYGWeb Builder \ system \ themeroller. Si le thème existe
déjà, il vous sera demandé de remplacer le thème actuel.
Notez que si vous enregistrez un thème avec le même nom qu'un thème standard (comme 'cupertino' ou 'smoothhness'), le thème
personnalisé sera utilisé par le logiciel, bien que le thème d'origine ne soit pas écrasé ou supprimé (car il est en un autre dossier). Cela
signifie que si vous supprimez le thème personnalisé, la version d'origine existera toujours. Les thèmes d'origine se trouvent dans C: \
Program Files \ WYSIWYG Web Builder 16 \ themeroller \
Vous pouvez également créer un nouveau thème basé sur un thème existant en utilisant le bouton «Copier». Il est même possible d'importer des thèmes
CSS générés par le site Web du rouleau de thème. Bien que cela n'importera que le jeu de couleurs bien sûr, car il n'est pas possible d'extraire les
données de style des images ...
75
WYSIWYGWeb Builder 16
Dans Propriétés de la page, vous pouvez sélectionner le thème d'une page (qui sera ensuite appliqué à tous les objets de cette page). Et bien que le gestionnaire de thèmes ait
été conçu pour créer des thèmes pour les widgets de l'interface utilisateur jQuery, d'autres objets prennent également en charge les thèmes! Par exemple, vous pouvez
sélectionner «Utiliser le thème de la page» dans la barre de menus, la barre de navigation, le menu des onglets et de nombreux autres objets.
Bien sûr, vous pouvez également utiliser la création de thème sur le site Web de ThemeRoller:
http://jqueryui.com/themeroller/ . Les nouveaux thèmes doivent être installés dans le dossier 'themeroller' de WYSIWYGWeb
Builder: Mes documents \ WYSIWYGWeb Builder \ system \ themeroller \
Gestionnaire de thèmes mobiles
Mobile Theme Manager présente un moyen simple de créer des thèmes qui sont utilisés pour styliser les objets mobiles jQuery tels que les boutons, les menus, les
en-têtes, les pieds de page, etc.
Un thème jQuery Mobile est un ensemble d'échantillons de couleurs définissant: les couleurs du texte, la couleur d'arrière-plan et les dégradés et la police. Vous pouvez
définir jusqu'à 26 nuances de couleurs, de A à Z. Il prend en charge de nombreuses propriétés CSS3, telles que les coins arrondis, les ombres et les dégradés.
Pour créer un nouveau thème, cliquez sur le bouton «Ajouter». Vous pouvez maintenant spécifier la couleur de chaque partie des widgets jQuery Mobile. Vous pouvez
également définir la famille de polices globale, le rayon de la bordure et les ombres.
Dans le panneau de droite, vous pouvez prévisualiser le résultat des styles spécifiés. Pour modifier les couleurs d'un autre nuancier, sélectionnez la lettre du
nuancier (AZ) dans la liste des propriétés.
Lorsque vous avez terminé la conception de votre thème, cliquez sur «Enregistrer». Les fichiers CSS et les images associées seront générés lors
de la publication du site Web qui utilise le thème.
Les définitions de thème sont enregistrées dans le fichier: C: \ Users \ Username \ Documents \ WYSIWYG Web Builder \ system \
mobilethemes.dat
Dans WYSIWYGWeb Builder, vous pouvez sélectionner le thème d'une page (mobile) dans les propriétés de la page.
76
WYSIWYGWeb Builder 16
Remplacer global
L'outil de remplacement global peut être utilisé pour changer rapidement la couleur, la police, l'URL ou le nom de fichier pour tous les objets (ou une sélection) sur la page
ou le site Web entier.
Des pages
Spécifie s'il faut remplacer les valeurs de la page actuelle uniquement sur l'ensemble du site Web.
Points d'arrêt
Spécifie s'il faut remplacer les valeurs dans tous les points d'arrêt ou uniquement dans le point d'arrêt actuel.
Objets
Spécifie les catégories d'objets auxquelles la recherche / remplacement s'appliquera. Par exemple:
remplacez uniquement une valeur de couleur pour les éléments de formulaire.
Propriété
Spécifie ce qu'il faut remplacer:
•
Couleur
•
Fichier
Remplacez une valeur de couleur par une autre valeur.
Remplacez un nom de fichier. L'outil listera automatiquement tous les noms de fichiers actuellement utilisés.
•
Nom de la police
•
Taille de police
•
URL
Remplacez le nom de la police. L'outil listera automatiquement toutes les polices actuellement utilisées.
Remplacez la taille de la police.
Remplacez une URL. L'outil listera automatiquement toutes les URL actuellement utilisées. Prend également en charge les liens tel, email,
facetime, sms et skype!
•
(ID)
Renommez l'ID des objets.
•
Lien interne
Remplacer les liens internes
Conseil: pour ajouter un préfixe à tous les ID d'une page, définissez l'ancienne valeur sur * (caractère générique) et la nouvelle valeur sur le préfixe. Cela
peut être utile pour ajouter rapidement un préfixe aux ID des pages maîtres / cadres maîtres. Voir également: Comment éviter les ID en double
Notez que cette action ne peut pas être annulée!
Le remplacement global ne peut pas remplacer les données dans les extensions.
77
WYSIWYGWeb Builder 16
Polices Google
L'ajout de polices Google à votre site Web n'a jamais été aussi simple. Les polices Google ne doivent plus être téléchargées / installées
manuellement à partir du site Web de Google, Google Font Manager s'en charge!
Les polices installées via le gestionnaire de polices seront ajoutées à la liste des polices Web sécurisées et le code CSS nécessaire sera généré
automatiquement lorsque vous prévisualisez ou publiez le site Web.
La police peut avoir différentes variantes, comme clair, moyen, gras, régulier, etc. Les variantes disponibles peuvent être activées par police.
Remarque:
Pour pouvoir prévisualiser ou utiliser des polices, elles doivent être téléchargées sur votre ordinateur. Lorsque vous sélectionnez une police pour
l'aperçu, elle est téléchargée à partir des serveurs Google dans un dossier local \ WYSIWYGWeb Builder \ system \ downloads.
L'application comprend un fichier googlefonts.json qui contient le nom et l'emplacement (du serveur) de toutes les polices Google disponibles au
moment de la sortie de cette version de WWB. Si vous êtes un utilisateur avancé, vous pouvez modifier ce fichier pour ajouter ou supprimer des
polices (à vos risques et périls!).
Si vous installez la police, elle sera copiée dans le dossier \ WYSIWYG Web Builder \ system \ fonts, une entrée sera également faite dans le fichier
googlefonts.dat avec des informations sur la police (nom de fichier, famille de polices, sous-ensembles, etc.) En conservant les polices dans un
sous-dossier, il sera plus facile de copier / déplacer toute votre configuration WWB vers un autre ordinateur ou d'effectuer des sauvegardes complètes.
Les polices que vous installez via le gestionnaire de polices ne seront disponibles que pour WYSIWYGWeb Builder. Si vous souhaitez les rendre
disponibles pour d'autres applications, vous devrez installer manuellement les polices à partir du site Web de Google Fonts.
Cliquez dans la boîte de dialogue de police pour afficher un menu contextuel:
Emplacement du fichier ouvert, est un raccourci vers le dossier de téléchargement des polices. Cela peut être utile, par exemple, pour installer une police sur votre ordinateur.
Effacer le cache des polices supprimera toutes les polices téléchargées du dossier cache. Cela ne supprimera pas les polices installées!
78
WYSIWYGWeb Builder 16
Objets Web Builder WYSIWYG
Dans WYSIWYGWeb Builder, vous créez votre site Web en déposant des objets sur la page. La plupart de ces objets représentent un
élément HTML standard. Il existe 2 façons d'insérer un objet dans votre page:
1. En utilisant l'onglet Insertion.
2. En utilisant la boîte à outils
Pour insérer un nouvel objet, sélectionnez l'un des éléments disponibles et dessinez un cadre pour indiquer la position de l'objet. Le nouvel objet sera
maintenant inséré dans la page. Pour modifier les propriétés, doublez l'objet ou sélectionnez Edition-> Propriétés dans la barre de menus. Il est
également possible d'appeler les propriétés de l'objet à l'aide du raccourci clavier «Alt + Entrée».
Pointe:
Une autre façon d'ajouter des objets à votre page consiste simplement à les faire glisser hors de la boîte à outils vers l'espace de travail.
79
WYSIWYGWeb Builder 16
Style
La plupart des objets ont une section de style dans la fenêtre des propriétés, ici vous pouvez définir l'apparence de l'objet. Notez que toutes les options
ne s'appliquent pas à tous les objets!
Style prédéfini
Ici, vous pouvez sélectionner l'un des styles de site global. Cette option écrasera tous les paramètres de style personnalisés pour l'objet. Vous pouvez ajouter ou
modifier des styles dans le Gestionnaire de styles.
Notez que les <h1> ... <h6> ne sont généralement utilisés que pour le texte!
Contexte
Mode d'arrière-plan
Spécifie le mode d'arrière-plan.
•
Transparent
•
Solide
•
Image
L'arrière-plan de l'objet sera transparent.
Utilisez une couleur de fond unie.
Utilisez une image comme arrière-plan.
Répéter; Définit les attributs de mosaïque pour l'image d'arrière-plan. Les options possibles sont: Répéter dans les deux sens,
Répéter dans le sens horizontal, Répéter dans le sens vertical et Ne pas répéter.
Alignement horizontal; Définit la position horizontale de l'image d'arrière-plan.
Alignement vertical; Définit la position verticale de l'image d'arrière-plan.
•
Pente
Utilisez un dégradé (bicolore) comme arrière-plan. Cette option prend en charge de nombreux styles de dégradés tels que linéaire, ellipse, verre,
brillant, etc. Par défaut, une image d'arrière-plan sera générée pour l'effet de dégradé. Cependant, vous pouvez également utiliser des dégradés
CSS3 en activant l'option 'Utiliser des dégradés CSS3 au lieu d'images' dans Menu-> Outils-> Options-> HTML. Gardez cependant à l'esprit que
tous les navigateurs ne prennent pas encore en charge CSS3.
80
WYSIWYGWeb Builder 16
•
Dégradé multicolore
Utilisez un dégradé (multicolore) comme arrière-plan. WYSIWYGWeb Builder comprend de nombreux styles de dégradés multicolores
prédéfinis, mais vous pouvez facilement créer votre propre style avec le gestionnaire de styles de dégradé. Tout comme l'option de dégradé
standard, elle prend en charge de nombreux styles de dégradés différents tels que linéaire, ellipse, verre, brillant, etc. Par défaut, une image
d'arrière-plan sera générée pour l'effet de dégradé. Cependant, vous pouvez également utiliser des dégradés CSS3 en activant l'option 'Utiliser
des dégradés CSS3 au lieu d'images' dans Menu-> Outils-> Options-> HTML.
•
Modèle
•
Texture
Utilisez un motif comme arrière-plan. Une nouvelle image sera automatiquement générée pour le motif.
Utilisez une texture comme arrière-plan. Une nouvelle image sera automatiquement générée pour la texture.
Frontière
Style
Spécifie le style de la bordure: pointillé, pointillé, plein, double, rainure, faîtage, encart ou sortie. Pour de nombreux objets, vous pouvez
également définir le style, la largeur, la couleur et le rayon de chaque côté de la bordure! Sélectionnez «Style individuel pour chaque côté», puis
cliquez sur «Paramètres».
Largeur
Spécifie l'épaisseur de la bordure autour de la bannière. Définissez ceci sur 0 (zéro) pour aucune bordure.
Couleur
Spécifie la couleur de la bordure autour de la bannière.
Rayon
Définit le degré d'arrondi des coins de la bordure.
Texte
Police de caractère
Spécifie la famille de polices du texte, telle que Comic Sans, Times New Roman et Courier New.
Style
Spécifie le style du texte tel que Gras, Italique ou Régulier.
Taille
Spécifie la taille du texte.
Couleur
Spécifie la couleur du texte.
81
WYSIWYGWeb Builder 16
Signet
Le texte et les images peuvent être définis comme des signets (également appelés «ancres») qui peuvent être liés dans une page. Par exemple, si une page
contient plusieurs nouveaux éléments, les titres d'actualités de chaque élément peuvent être définis comme signets et une ligne de liens peut être ajoutée en
haut de la page qui descendra chacun vers ces sections marquées. Cette méthode d'utilisation des signets permet aux visiteurs de votre site d'accéder
rapidement aux informations sans avoir à faire défiler la page pour afficher les informations qu'ils souhaitent.
Vous pouvez créer un signet à l'aide de l'outil Signet du menu Insertion et le placer n'importe où dans la page. Assurez-vous de
donner au signet un nom unique. Une fois que vous avez placé l'icône de signet sur votre page, elle peut être sélectionnée dans la
liste déroulante Signets.
Activer le défilement fluide
Activez cette option pour animer le défilement de la page. Cet effet est souvent utilisé dans les sites Web modernes. La durée spécifie la
synchronisation de l'animation. L'accélération peut être utilisée pour créer des «effets de rebond».
Événements
Les événements suivants sont propres à WYSIWYGWeb Builder. Ils permettent de déclencher des actions en fonction de la position de
défilement de la page. Par exemple, vous pouvez démarrer des animations ou afficher / masquer des objets lorsque le signet défile dans (ou hors
de) la fenêtre.
onscrollreveal
Se déclenche lorsque le signet est complètement visible dans le port d'affichage du navigateur.
onscrollrevealpartial
Se déclenche lorsque le signet est partiellement visible dans le port d'affichage du navigateur.
onscrollhide
Se déclenche lorsque le signet est sorti du port d'affichage du navigateur.
Vous pouvez en savoir plus sur les signets dans le chapitre «Liens».
82
WYSIWYGWeb Builder 16
Liste à puces
Vous pouvez ajouter une liste à puces à votre page Web pour séparer une liste d'éléments du reste du texte de la page. La liste à puces est une
combinaison de listes ordonnées (numérotées) et de listes non ordonnées et prend en charge les styles suivants:
Cercle, disque, carré, numérique (1, 2, 3), alpha inférieur (a, b, c), alpha supérieur (A, B, C), romain inférieur (i, ii, iii), romain supérieur (I, II, III) et des
images personnalisées.
Pour insérer une liste à puces dans votre page, sélectionnez Insertion-> Liste à puces. Sélectionnez ensuite le nombre initial d'éléments et le style de puce.
Notez que vous pouvez toujours changer le style de puce en quelque chose d'autre via les propriétés de l'objet.
Les autres propriétés des listes à puces incluent la police, la taille, la couleur, l'espacement et le remplissage des éléments individuels.
Comment modifier le texte d'un élément?
Double-cliquez sur l'élément pour modifier le texte. Le formatage du texte fonctionne de la même manière que dans une zone de texte normale.
Comment insérer un nouvel élément?
Cliquez avec le bouton droit sur la liste à puces pour afficher le menu contextuel et sélectionnez Insérer un élément.
Comment supprimer un élément?
Cliquez avec le bouton droit sur la liste à puces pour afficher le menu contextuel et sélectionnez Supprimer l'élément.
Comment sélectionner l'élément suivant à l'aide du clavier?
Utilisez la touche Tab pour passer à l'élément suivant
Comment modifier l'espace entre la puce et le texte?
Lorsque vous déplacez le curseur de la souris entre la puce et le texte, vous pouvez faire glisser la bordure (invisible) pour augmenter ou réduire
l'espacement.
Pourquoi Web Builder n'utilise-t-il pas de «vraies» balises à puce dans le HTML de sortie?
Les listes à puces ne sont pas compatibles avec tous les navigateurs. Cela signifie que tous les navigateurs ont leur propre façon d'afficher les listes, toutes
avec leur propre remplissage, interligne et autres décalages spécifiques.
Il est impossible de générer une liste à puces en utilisant les balises <OL> <UL> standard d'une manière qui est la même dans tous les navigateurs. Pour cette
raison, nous avons décidé d'utiliser des tableaux pour simuler l'apparence et la convivialité des listes à puces. De cette façon, nous avons beaucoup plus de
contrôle sur la disposition des listes à puces et nous pouvons être sûrs que cela ressemble (presque) à tous les navigateurs.
83
WYSIWYGWeb Builder 16
Ligne horizontale
L'objet Line est utilisé pour insérer une ligne horizontale sur la page.
Outre les styles standard tels que solide, pointillé, pointillé, double et rainuré, l'objet prend également en charge de nombreux styles uniques, comme les étoiles, les boucles, les
courbes, les vagues, etc. Il est également possible d'ajouter du texte à la ligne. Vous pouvez même ajouter une icône!
Couleur de la ligne
Spécifie la couleur de la ligne.
Utiliser le thème de la page
Utilisez le thème de la page pour styliser l'objet. Plus de détails sur les thèmes: Gestionnaire de thèmes.
Mode
Spécifie le mode de ligne:
•
défaut
afficher une ligne uniquement
•
icône
ajoutez une icône à la ligne. L'icône peut être positionnée à gauche, au centre ou à droite.
•
texte
ajoutez du texte à la ligne. Le texte peut être positionné à gauche, au centre ou à droite.
Espacement
Spécifie l'espacement autour du texte ou de l'icône.
Boîte ombre
Configurez l'ombre de la boîte (également appelée ombre portée) pour l'objet. Cette fonctionnalité nécessite un navigateur compatible CSS3.
84
WYSIWYGWeb Builder 16
Titre
Cet objet fournit un moyen rapide et facile d'ajouter des en-têtes (<h1>, <h2>) sans utiliser de styles. Chaque objet d'en-tête peut avoir ses
propres polices / taille / couleur!
Notez que vous pouvez également utiliser Styles pour insérer des titres dans les objets texte standard, mais dans ce cas, tous les titres auront le
même style.
85
WYSIWYGWeb Builder 16
Image
Pour ajouter des images, utilisez l'objet Image. Faites glisser l'objet sur la page et une boîte de dialogue de fichier apparaîtra pour sélectionner l'image. Web Builder
prend en charge les fichiers jpg, gif, bmp et png.
Nom de fichier: entrez le chemin et le nom de fichier de l'image / image ou sélectionnez Feuilleter pour trouver une image sur votre lecteur local.
Remarques:
1.
Cette propriété spécifie l'emplacement de l'image locale, lorsque vous publiez la page, l'image sera automatiquement copiée
à l'emplacement spécifié dans Outils-> Options-> Publier-> Sous-dossier Images.
2.
Vous pouvez également spécifier des URL absolues comme celle-ci
https://www.paypalobjects.com/en_US/i/logo/paypal_logo.gif Pour faire une copie (de sauvegarde) des images utilisées dans votre page, activez
3.
Outils-> Options-> Dossiers-> Faire une copie des images dans ce dossier lorsque les documents sont enregistrés. Cela copiera toutes les
images dans le dossier spécifié, de sorte qu'elles soient toutes stockées au même endroit. Cela évite également d'avoir des noms d'images en
double dans votre site Web.
Texte alternatif
Ce texte, généralement une brève description, apparaît à la place de l'objet dans le navigateur lorsque les images ne sont pas prises en charge ou ont été
désactivées. Dans certains navigateurs, il apparaît sous la forme d'une info-bulle lorsque vous déplacez la souris sur l'image.
Titre
Dans les navigateurs modernes, ce titre apparaît sous la forme d'une info-bulle lorsque vous déplacez la souris sur l'image.
Utiliser la taille originale
Sélectionnez cette option si vous souhaitez que l'image apparaisse à sa taille d'origine.
Ajuster au rectangle de mise en page
Sélectionnez cette option si vous souhaitez spécifier manuellement la taille de l'image.
Taille de la bordure
Spécifie l'épaisseur de la bordure autour de l'image. Définissez ceci sur 0 (zéro) pour aucune bordure.
Couleur de la bordure
Spécifie la couleur de la bordure autour de l'image.
Rayon de la bordure
Définit le degré d'arrondi des coins de la bordure.
Réflexion
Spécifie la quantité de réflexion.
Opacité
Modifiez la transparence (0 - 100%) de l'image.
Chargement paresseux
Activez cette option pour retarder le chargement des images jusqu'à ce qu'elles soient visibles dans le port d'affichage. Cela accélérera le chargement de la page. Cela
empêche également le chargement d'images volumineuses dans les appareils mobiles car seules les images visibles seront téléchargées.
86
WYSIWYGWeb Builder 16
Activer l'ombre
Spécifie s'il faut activer l'effet d'ombre. Une ombre avec un décalage x et y de 0 (zéro) produira un effet lumineux. Diminuer le
facteur de flou de l'ombre rendra les bords plus nets.
Décalage de l'ombre X
Décalage horizontal de l'ombre
Décalage de l'ombre Y
Décalage vertical de l'ombre
Opacité de l'ombre
Définit la transparence de l'ombre.
Couleur de l'ombre
Spécifie la couleur de l'ombre
Flou de l'ombre
Adoucit les bords de l'ombre.
Utilisez CSS3 box-shadow
Activez cette option pour utiliser l'ombre CSS native au lieu de générer une nouvelle image avec l'effet d'ombre. Cette option nécessite un
navigateur moderne avec le support CSS3!
Rotation
Voir aussi la description ' Faire pivoter une image 'plus tôt dans ce document.
Liens
Pour plus de détails sur les liens, veuillez lire le chapitre sur les «Liens».
Événements
Pour plus d'informations sur les événements, veuillez lire le chapitre «Événements».
87
WYSIWYGWeb Builder 16
Outils d'image et effets
Dans WYSIWYGWeb Builder, vous pouvez appliquer des effets aux images sans avoir à ouvrir un éditeur d'images séparé!
Les outils disponibles sont:
•
Tourner
•
Retourner
•
Contraste
•
Luminosité
Faites pivoter l'image de 90 degrés vers la gauche ou vers la droite.
Retourner l'image horizontalement ou verticalement.
Ajustez le contraste de l'image.
Ajustez la luminosité de l'image.
•
Rééchantillonner
Le rééchantillonnage d'une image modifiera le nombre de pixels et donc la taille physique du fichier d'une image. Le rééchantillonnage
sera effectué en fonction de la taille actuelle de l'image sur la page. Si la taille est inférieure à la taille d'origine, la taille du fichier
physique est réduite. S'il est plus grand, la taille du fichier physique augmentera!
•
Surgir
En recadrant une image, vous pouvez supprimer des zones de l'image que vous ne souhaitez pas utiliser. En mode recadrage, faites glisser les
poignées de la zone de recadrage pour redimensionner et inclure la partie de l'image que vous souhaitez conserver. Cliquez à nouveau sur Recadrer
pour supprimer la zone en dehors de la zone de recadrage.
•
Tranche
L'outil de découpage est utilisé pour "découper" vos images en plusieurs petits morceaux, vous ne remarquerez rien sur votre page car quand il
est prévisualisé, tous les morceaux s'affichent comme un seul. La logique derrière le découpage est que vos images se chargeront plus
rapidement et cela peut également aider à empêcher les utilisateurs d'essayer de voler vos images s'ils n'obtiennent pas une grande image mais
juste un petit morceau.
•
Teinte / Saturation
•
Vignette automatique
Ajustez la teinte ou la saturation de l'image.
Utilisez cette option pour créer rapidement une version miniature de l'image plus petite. Un lien hypertexte vers l'image originale en
taille réelle sera ajouté.
•
Définir la couleur transparente
Vous pouvez créer une zone transparente dans la plupart des images, sauf dans les images GIF animées. Sélectionnez l'image dans
laquelle vous souhaitez créer des zones transparentes.
Dans la barre d'outils ou le menu de l'image, cliquez sur «Définir la couleur transparente». Dans
l'image, cliquez sur la couleur que vous souhaitez rendre transparente.
L'option Définir la couleur transparente est disponible pour les images qui ne disposent pas déjà d'informations de
transparence. L'image sera convertie au format PNG et sera publiée sous un nom différent.
•
Ajouter / remplacer un pochoir
Les pochoirs sont un moyen sympa de changer l'apparence de vos images. Les pochoirs peuvent convertir vos images dans n'importe
quelle forme! Fondamentalement, les pochoirs remplacent les informations du canal alpha (transparence) de l'image par celles du pochoir.
Vous pouvez créer vos propres pochoirs et placer les pochoirs dans le sous-dossier «stencils» du programme.
•
Enregistrer comme image
Cette option peut être utilisée pour exporter l'image sur le disque, y compris tous les effets appliqués. Vous pouvez exporter l'image au format
JPG, GIF ou PNG.
88
WYSIWYGWeb Builder 16
Les effets disponibles sont:
•
Aquarelle
•
Plan
•
Flou / Flou Plus
•
Buttonize
•
Coloriser
•
Bande dessinée
•
Cylindre
•
Diffuser
•
Effet Droste
•
Bord Linéaire / Bord Non Linéaire
•
Gaufrage / Gaufrage Plus
•
Graver / graver plus d'érosion
•
Eroder
•
Oeil de poisson
•
Flamme
•
Holga
•
Impressionnisme
•
Cadre biseauté intérieur
•
Inverser la luminance
•
Jitter
•
Flou gaussien
•
lueur
•
Effet Or / Glace / Métallisé
•
Niveaux de gris
•
Laplace
•
Médian
•
Carreaux de mosaïque
•
Flou de mouvement
•
Négatif
•
Néon Glow
•
Vision nocturne
•
Bruit
•
Peinture à l'huile
•
Vieux film
•
Vieille photo
•
Crayon
•
Pincer
•
Pixellate
•
Pile Polaroid
•
Psychédélique
•
Coup de poing
•
Remplacer la couleur
•
Ondulation
•
Sépia
•
Accentuer / Accentuer plus d'esquisse
•
Esquisser
•
Sobel
•
Solariser
•
Adoucir
•
Bords / plumes souples
•
Éclaboussure
•
Permuter les canaux de couleur
•
Texture
•
Thermique
•
Seuil
•
Décalage d'inclinaison
•
Tournoiement
•
Encre urbaine
•
Réflexion de l'eau
89
WYSIWYGWeb Builder 16
Ce que vous devez savoir sur les effets:
1. Vous pouvez appliquer plusieurs effets à une image.
2. Les effets sont non destructifs, ce qui signifie qu'ils ne s'appliquent pas à l'image d'origine. Une copie de l'image originale sera
publiée sur votre site Web en utilisant un nom unique (format .png).
3.
Les effets sont appliqués à l'image «à la volée» lorsque les images sont chargées dans l'espace de travail et dans l'ordre dans lequel vous les
avez ajoutées. Ainsi, par exemple, si vous appliquez 3 fois la luminosité, les images seront traitées 3 fois lors du prochain chargement de votre
page.
4.
Planifiez vos effets! N'ajoutez pas de nombreux effets aux images. Cela ralentira les temps de chargement de l'image dans Web
Builder. Avant d'appliquer des effets, testez l'impact de l'effet sur l'image, si vous ne l'aimez pas, utilisez annuler la restauration
de l'image d'origine.
5.
N'appliquez pas d'effets à de très grandes images! Plus l'image est grande, plus le traitement de l'effet prendra du temps
(comme dans n'importe quel autre éditeur d'image!).
6.
Le rééchantillonnage peut être utilisé pour réduire la taille de l'image publiée et peut donc augmenter la vitesse de chargement de votre
site Web. Bien entendu, le rééchantillonnage réduira également la qualité de l'image.
Filigrane
L'outil de filigrane est la fonctionnalité puissante qui vous permet de protéger rapidement et facilement vos images avec un filigrane visible. Avec les
nombreuses options de filigrane disponibles, vous pouvez personnaliser vos images de différentes manières, notamment la taille, la couleur et la
position du texte.
Type
•
Aucun
•
la norme
•
Inversé
•
En relief
L'outil de filigrane sera désactivé.
Le texte sera rendu en haut de l'image.
L'effet de filigrane sera inversé.
Cette option utilisera un effet de relief pour le texte.
Texte
Spécifie le texte du filigrane.
Police de caractère
Le type de police est la famille de polices de texte, telle que Comic Sans, Times New Roman et Courier New.
Couleur
Spécifie la couleur du texte.
Opacité
Spécifie l'opacité / la transparence du texte.
Alignement horizontal / vertical
Spécifie l'alignement horizontal et vertical du texte.
Répéter le texte
Activez cette option pour répéter le texte sur toute l'image.
90
WYSIWYGWeb Builder 16
Chapiteau
L'objet Marquee est utilisé pour introduire du texte qui défile.
Texte
Entrez le texte à faire défiler. Le texte peut inclure une mise en forme et des liens.
Direction
Cet attribut contrôle la direction du défilement.
Répéter
Nombre de répétitions du défilement (0 = en continu).
Retard
Ceci contrôle le délai (en millisecondes) entre les affichages successifs qui donnent l'impression d'animation.
Montant
Cela contrôle la quantité de mouvement (en pixels) entre les affichages successifs qui donnent une impression
d'animation.
Comportement
Cet attribut contrôle le comportement du texte affiché.
•
faire défiler
indique que le contenu doit défiler hors du bord de la zone de sélection, puis réapparaître de l'autre côté.
•
faire glisser
identique au défilement, mais le texte cesse de défiler lorsqu'il atteint le bord de l'objet
•
alterner
fait rebondir le texte.
•
guerres des étoiles
Implémente le défilement 3D de type Stars Wars.
Interrompre le défilement au survol de la souris
Spécifie s'il faut interrompre le défilement au survol de la souris.
Remarque:
La balise non officielle <marquee> a été remplacée par des animations CSS3 pour une meilleure compatibilité avec les navigateurs (modernes).
Conforme au W3C!
91
WYSIWYGWeb Builder 16
Texte
Cet objet vous permet d'ajouter du texte à la page Web, faites glisser l'objet sur la page et double clic pour commencer à taper votre texte. Utilisez la barre
d'outils Format pour modifier la police, la taille, la couleur et d'autres propriétés du texte. Pour les options de mise en forme disponibles, veuillez consulter
Outils de mise en forme. Pour insérer un lien dans le texte, utilisez l'option Lien. Pour plus d'informations sur les hyperliens, veuillez lire le chapitre «Liens»
de ce document.
La plupart des propriétés de texte peuvent être modifiées à l'aide de la barre d'outils de mise en forme ou de l'élément de mise en forme de la barre de menus. Vous
devez d'abord mettre le texte en surbrillance avant de pouvoir modifier la mise en forme.
Remarque:
Bien que WYSIWYGWeb Builder puisse afficher toutes les polices installées sur votre ordinateur, il est recommandé de n'utiliser que polices Web sécurisées vos
pages Web auront donc la même apparence sur tous les ordinateurs. Vous pouvez en savoir plus sur les polices Web sécurisées dans la section «Menu Format»
de ce document.
Les propriétés suivantes peuvent être modifiées à l'aide de la fenêtre Propriétés du texte (menu contextuel du clic droit):
Rembourrage
Définit la quantité d'espace entre l'objet et sa bordure.
Publier ce texte sous forme d'image
Convertit le texte en image lorsque votre page est publiée. Cette option peut être utile si vous souhaitez que le texte s'affiche exactement comme dans
WYSIWYGWeb Builder, même lorsque vous avez sélectionné des polices qui ne sont pas sécurisées pour le Web. Le texte sera converti en une image GIF,
JPG ou PNG.
GIF utilisera une transparence de pixel unique.
JPG utilisera une couleur d'arrière-plan unie car il ne prend pas en charge la transparence.
PNG donnera la meilleure qualité (anti-aliasé) pour les polices plus grandes, mais l'image de sortie sera plus grande.
Inclure le texte dans l'attribut ALT
Si le texte a été converti en image, les moteurs de recherche ne pourront pas «voir» ce texte. Sélectionnez cette option si vous souhaitez
que le texte d'origine soit inclus dans l'attribut alt.
Compatibilité / Format de sortie
Malheureusement, il n'existe aucun moyen de rendre le texte exactement le même dans tous les navigateurs. Chaque navigateur utilise son propre moteur de rendu
de texte et ils sont tous légèrement différents. Et bien que WYSIWYGWeb Builder utilise des pixels pour spécifier la taille de la police, cela entraîne toujours des
résultats différents dans différents navigateurs. Pour vous aider à optimiser votre texte afin qu'il soit aussi beau que possible dans tous les navigateurs, nous avons
ajouté quelques options pour contrôler la façon dont le texte est affiché en HTML.
•
Mode par défaut / classique
Tout le code sera à l'intérieur d'un div. Cela devrait convenir à la plupart des mises en page avec peu de texte.
•
Utilisez <div> pour chaque ligne (DEPRECATED)
Chaque ligne sera intégrée dans son propre <div> avec son propre style. Cela donne des résultats plus précis dans certaines
occasions.
•
Utilisez <div> avec la position pour chaque ligne (DEPRECATED)
Chaque ligne sera intégrée à son propre div et comprendra la position / taille. Le texte sera divisé en plusieurs éléments <div>.
Cela se traduira par de meilleures mises en page, mais augmentera également la quantité de code généré.
•
Inclure la hauteur de ligne dans les styles de texte
WYSIWYGWeb Builder calculera la hauteur de ligne pour chaque police (en fonction du rendu dans l'espace de travail) et l'ajoutera au
style CSS. Dans de nombreux cas, cela donnera des résultats très précis dans divers navigateurs avec un minimum de code.
92
WYSIWYGWeb Builder 16
Note importante:
Les options «Utiliser <div> pour chaque ligne» sont devenues obsolètes et seront supprimées dans une future version de WWB. Veuillez plutôt utiliser Inclure la
hauteur de ligne dans les styles de texte. Il génère un code plus propre et fonctionne avec des mises en page réactives.
Consultez également les derniers conseils et astuces pour optimiser le texte:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=10&t=34318
Raccourcis claviers
L'éditeur de texte prend en charge les touches de raccourci suivantes:
Clés
Opérations
Ctrl + A
Tout sélectionner
Ctrl + E
Alignement au centre
Ctrl + J
Justifier l'alignement
Ctrl + R
Alignement droit
Ctrl + L
Alignement à gauche
Ctrl + C
Copie
Ctrl + V
Pâte
Ctrl + X
Couper
Ctrl + Z
annuler
Ctrl + Y
Refaire
Ctrl + '+' (Ctrl + Maj + '=') Ctrl +
Exposant
'='
Indice
Ctrl + '(apostrophe)
Accent aigu
commentaires
Après avoir appuyé sur la touche de raccourci, appuyez sur la lettre appropriée
(par exemple a, e ou u). Cela s'applique uniquement aux claviers anglais, français,
allemand, italien et espagnol. Voir les commentaires de Ctrl +.
Ctrl + `(grave) Ctrl
Accent tombe
+ ~ (tilde)
Accent tilde
Voir les commentaires de Ctrl +.
Ctrl +; (point-virgule) Ctrl
Tréma d'accent
Voir les commentaires de Ctrl +.
+ Maj + 6
Accent caret (circonflexe)
Voir les commentaires de Ctrl +.
Ctrl +, (virgule)
Accent cédille
Voir les commentaires de Ctrl +.
Ctrl + Maj + '(apostrophe) Retour
Activer les citations intelligentes
arrière
Supprimer le caractère précédent
Ctrl + Retour arrière
Supprimer le mot précédent.
Ctrl + Insérer
Copie
Maj + Insérer
Pâte
Insérer
Écraser
Ctrl + Flèche gauche
Déplacez le curseur d'un mot vers la gauche.
Ctrl + Flèche droite
Déplacez le curseur d'un mot vers la droite. Passez à
Ctrl + Flèche vers le haut
la ligne ci-dessus.
Ctrl + Flèche bas
Passez à la ligne ci-dessous.
Ctrl + Début
Aller au début de la zone de texte. Aller à la
Ctrl + Fin
fin de la zone de texte
Ctrl + Suppr
Supprimer le mot suivant ou les caractères sélectionnés. Coupez les
Maj + Suppr
caractères sélectionnés.
Esc
Arrêtez de modifier le texte. Quittez le mode d'édition.
Alt + 0xxx (pavé numérique)
Insère des valeurs Unicode si xxx est supérieur à 255.
Lorsque xxx est inférieur à 256, le texte de la plage ASCI est inséré
basé sur le clavier actuel. Doit entrer des valeurs décimales.
Lorem Ipsum
Lorem ipsum est un texte d'espace réservé (texte de remplissage) couramment utilisé pour illustrer les éléments graphiques d'un site Web, tels que la
police, la typographie et la mise en page, en supprimant la distraction d'un contenu significatif. WYSIWYGWeb Builder a un simple générateur de texte
Lorem Ipsum intégré pour ajouter du texte d'espace réservé à l'objet texte. Vous pouvez insérer des paragraphes complets ou un nombre spécifique de
mots.
Le texte sera chargé à partir d'un fichier appelé loremispum.txt dans le dossier de l'application. Si vous le souhaitez, vous pouvez modifier ou écraser ce fichier avec votre
propre texte personnalisé (pour les utilisateurs avancés uniquement!).
93
WYSIWYGWeb Builder 16
Assistant de formulaire
Créer des formulaires n'a jamais été aussi simple! Créez des formulaires complets en quelques étapes seulement. L'une des nombreuses façons dont vous pouvez
interagir avec les personnes qui visitent votre site Web est d'obtenir des commentaires de leur part via des formulaires. Créer un formulaire à partir de zéro peut être
assez difficile, nous avons donc implémenté FormWizard pour rendre cette tâche un peu plus facile.
Étape 1: Comment voulez-vous créer le nouveau formulaire?
Le WYSIWYGWeb Builder FormWizard dispose de 3 méthodes pour créer un formulaire:
1. Créer un nouveau formulaire basé sur un modèle
Cette option vous permet de sélectionner un modèle de formulaire, que vous pouvez utiliser comme base pour votre propre formulaire.
2.
Créer un nouveau formulaire à partir de zéro à l'aide de l'assistant
Insérez manuellement des contrôles et des étiquettes dans le formulaire.
3.
Créez un formulaire vierge pour pouvoir ajouter des contrôles plus tard
Cela insère un formulaire vierge sur votre page sans aucun contrôle. Fondamentalement, cela revient à insérer manuellement une
zone de formulaire vide.
Étape 2: Sélectionnez un modèle de formulaire
Nous avons inclus plusieurs formulaires prêts à l'emploi pour vous aider à démarrer. Veuillez prendre votre temps pour étudier les propriétés de chacun de ces
formulaires pour avoir une idée de la façon dont nous les avons mis en œuvre, afin que vous puissiez utiliser ces connaissances pour créer vos propres formulaires.
Pour certains formulaires, vous devrez modifier les valeurs prédéfinies telles que l'adresse e-mail ou l'URL du site Web spécifié.
Il existe 2 modèles de processeur de formulaire où des sites Web externes sont utilisés pour traiter les données du formulaire. Avant de
pouvoir utiliser les services de ces sites Web, vous devez d'abord vous inscrire! http://www.formbuddy.com/
http://www.mailmyform.com/
Ces exemples peuvent être utiles si votre site Web ne prend pas en charge PHP ou tout autre type de traitement de formulaire.
94
WYSIWYGWeb Builder 16
Étape 3: Ajouter un contrôle au formulaire
Dans cette étape, vous pouvez insérer des contrôles dans le formulaire. Chaque contrôle peut avoir une étiquette qui sera affichée devant le contrôle.
Cliquez sur Ajouter et sélectionnez l'un des éléments dans le menu déroulant pour insérer un nouveau contrôle. Dans la plupart des cas, l'assistant vous demandera de
saisir un nom d'étiquette.
Pour modifier les propriétés des contrôles, sélectionnez-le dans la liste et cliquez sur Modifier pour afficher les propriétés du contrôle.
Vous pouvez réorganiser les éléments à l'aide des boutons Monter et Descendre.
Pointe:
Assurez-vous que votre formulaire contient un bouton Soumettre. Sans ce bouton, l'utilisateur ne pourra pas soumettre les données saisies!
95
WYSIWYGWeb Builder 16
Étape 4: Où les données doivent-elles être envoyées?
Lorsque l'utilisateur appuie sur Soumettre, le navigateur envoie les données du formulaire à un serveur Web, nous devons donc spécifier où les données doivent être
envoyées.
L'une des possibilités est ' Soumettez les données à une adresse e-mail ', bien que ce soit une méthode très courante, elle ne fonctionne pas de manière
fiable pour tous les visiteurs de votre site. Le fait qu'un visiteur puisse ou non utiliser cette méthode dépend du client de messagerie installé sur son ordinateur.
Et malheureusement, il n'y a aucun moyen de tester si c'est le cas pour chacun de vos visiteurs. Nous ne recommandons pas d'utiliser cette méthode!
Au lieu d'utiliser la méthode Envoyer les données à une adresse e-mail ("mailto"), essayez d'utiliser un script CGI hébergé à distance tel que PHP, ASP ou
des solutions hébergées à distance comme http://www.formbuddy.com ou
http://www.mailmyform.com . Ces services vous permettent d'accéder à un script CGI exécuté à partir de leurs serveurs. Vous créez votre formulaire
comme vous le feriez normalement, mais maintenant vous sélectionnez Soumettre des données à un script sur un serveur externe et renseignez
l'URL du script CGI distant. Le script CGI traduit votre formulaire en un e-mail et l'envoie à l'adresse que vous indiquez.
Vous pouvez également créer votre propre processeur de formulaire et intégrer le script du processeur de formulaire à votre site Web Web Builder. Dans ce
cas, sélectionnez Envoyez des données sur une page de votre site Web.
Dans la section tutoriel de notre site Web, vous pouvez trouver un exemple comment mettre en œuvre cela en utilisant PHP:
http://www.wysiwygwebbuilder.com/forms_php.html
Remarque:
Certains modèles de formulaire utilisent leur propre script de processeur de formulaire (généralement ajouté en tant qu'objet HTML distinct). Dans ce cas,
ne modifiez pas les valeurs prédéfinies sauf si vous savez ce que vous faites!
Les modèles qui utilisent un processeur de formulaire personnalisé incluent: Recherche de
dictionnaire
Processeur de formulaire: ASP
Processeur de formulaire: Godaddy
Processeur de formulaires: parlez-en à un ami
Processeur de formulaires: www.formbuddy.com
Processeur de formulaire: www.mailmyform.com
Dire à un ami
Tous les modèles PayPal
Tous les modèles de recherche
Important:
Certains modèles de formulaire utilisent des champs masqués pour (par exemple) spécifier une adresse e-mail ou un site Web. Assurez-vous de remplacer ces
valeurs par vos propres informations !!! Vous pouvez modifier les valeurs des champs masqués à tout moment ultérieurement via les propriétés du formulaire.
Utilisez le processeur de formulaire PHP intégré pour envoyer des données à une adresse e-mail.
Activez cette option si vous souhaitez utiliser le processeur de formulaire intégré. Pour plus de détails
sur cette fonctionnalité dans le chapitre Formulaire.
Type d'encodage
Le type d'encodage requis dépend du script du processeur de formulaire, veuillez donc consulter la documentation du script CGI pour plus
d'informations. Si vous avez sélectionné un formulaire prédéfini, le type de codage correct sera sélectionné.
96
WYSIWYGWeb Builder 16
Forme
Un formulaire vous permet de collecter des informations auprès des personnes qui consultent vos pages Web. Un spectateur entre des données ou fait des choix
parmi plusieurs options, puis soumet le formulaire. Les résultats peuvent vous être envoyés par e-mail. Si votre serveur Web dispose du bon logiciel, vous pouvez
enregistrer les résultats du formulaire dans une base de données.
L'objet Zone de formulaire est un conteneur pour les objets FORM tels que les boutons, les zones d'édition et les cases à cocher.
Vous pouvez ajouter n'importe quel objet de formulaire standard à un formulaire, y compris des champs de texte sur une ou plusieurs lignes, des cases à cocher, des
boutons radio, des listes déroulantes et des listes déroulantes.
Vous ajoutez des objets à un formulaire à l'aide de la barre d'outils Formulaire (Outils de formulaire).
Vous devez placer des objets de formulaire dans un formulaire pour les faire fonctionner dans le cadre du formulaire.
Les navigateurs affichent les objets de formulaire différemment, alors testez votre formulaire sur tous les navigateurs et plates-formes que vous prévoyez de prendre en
charge.
Comment créer un formulaire dans WYSIWYGWeb Builder?
1.
Faites glisser l'objet Formulaire sur la page et dessinez une zone pour indiquer la position du formulaire. Concevez votre formulaire en
2.
ajoutant des contrôles de formulaire au formulaire, par exemple:
Bouton, bouton d'image, bouton avancé, case à cocher, bouton radio, zone d'édition, zone de texte ou zone de liste déroulante. Vous pouvez
également intégrer du texte et des images au formulaire. Vous remarquerez que tous les objets font partie du formulaire, donc lorsque vous
modifiez la position du formulaire, tous ces objets se déplacent.
3.
Assurez-vous que votre formulaire contient un bouton Soumettre (bouton-poussoir). Sans ce bouton, l'utilisateur ne pourra pas soumettre
les données saisies.
4.
Une fois que vous avez conçu votre formulaire, vous devrez peut-être définir certaines propriétés. Sélectionnez le formulaire et choisissez
Edition-> Propriétés dans le menu Web Builder. La chose la plus importante à faire est de spécifier l'action de formulaire. Par exemple, pour
envoyer les données saisies à votre adresse e-mail, lorsque l'utilisateur appuie sur le bouton d'envoi: mailto:
[email protected]
Remarque: De plus amples informations sur les formulaires sont disponibles dans la section Foire aux questions du site Web, dans les didacticiels
en ligne et sur le forum d'assistance:
http://www.wysiwygwebbuilder.com/support.html
97
WYSIWYGWeb Builder 16
Nom de forme
Entrez un nom pour le FORMULAIRE. Ce nom est principalement utilisé pour les scripts avancés.
action
Attribut obligatoire, spécifiant l'URL d'un script CGI qui traite le formulaire et renvoie des commentaires. Il existe deux méthodes pour envoyer des données de
formulaire à un serveur. AVOIR enverra la saisie du formulaire dans une URL, alors que PUBLIER l'envoie dans le corps de la soumission. Cette dernière
méthode signifie que vous pouvez envoyer de plus grandes quantités de données et que l'URL des résultats du formulaire n'affiche pas le formulaire codé.
Exemple:
mailto: [email protected]
Cela enverra les résultats à votre adresse e-mail en utilisant le client de messagerie par défaut des visiteurs.
Remarque: Nous ne recommandons pas d'utiliser la fonction «mailto» du HTML. Il est très peu fiable et son comportement dépend fortement du type de navigateur
et des préférences de l'utilisateur. Lorsque cela est possible, utilisez le processeur de formulaire PHP intégré ou créez votre propre script de traitement.
Si votre serveur Web prend en charge PHP, vous pouvez utiliser le processus de formulaire PHP intégré r qui est probablement le moyen le plus simple d'implémenter le
traitement de formulaire. Lisez plus de détails à ce sujet plus loin dans ce document. Vous pouvez également écrire une routine de gestion de formulaire simple en PHP
comme expliqué dans ce tutoriel:
http://www.wysiwygwebbuilder.com/forms_php.html
Si votre serveur n'est pas compatible avec PHP, vous devez contacter votre hébergeur et lui demander des détails sur le traitement des formulaires. Certains
serveurs proposent des scripts côté serveur que vous pouvez utiliser, et si tel est le cas, vous aurez besoin d'instructions pour configurer cette fonction. Vous
pouvez également utiliser une solution hébergée à distance comme www.formbuddy.com ou www.mailmyform.com.
Ces services vous permettent d'accéder à un script CGI exécuté à partir de leurs serveurs. Vous créez votre formulaire comme vous le feriez normalement, mais
maintenant vous remplissez l'URL du script CGI distant.
Le script CGI traduit votre formulaire en un e-mail et l'envoie à l'adresse que vous indiquez.
Accepter le jeu de caractères
Spécifie quel caractère sera accepté par le formulaire. Cela peut être utile pour les langages Unicode. Cette valeur est également utilisée par le
processeur de formulaire intégré.
Les valeurs courantes prises en charge par la plupart des navigateurs sont ISO-8859-1 ou UTF-8.
Type d'encodage
Ici, vous pouvez spécifier un type d'encodage
la valeur par défaut "application / x-www-form-urlencoded" est la plus largement prise en charge. Une alternative est "text / plain", qui est généralement
utilisé en combinaison lorsque le action L'attribut pointe vers une URL mailto:. Si un navigateur prend en charge les deux, le contenu du formulaire est
envoyé en texte brut au destinataire indiqué.
Utilisez le processeur de formulaire PHP intégré pour envoyer des données à une adresse e-mail.
Une fois que l'utilisateur a saisi les informations dans le formulaire, vous souhaitez probablement les traiter d'une manière ou d'une autre. Par défaut, un formulaire HTML fait
n'importe quoi avec les données, vous devez donc implémenter un script de traitement de formulaire. L'une des grandes caractéristiques de WYSIWYGWeb Builder est qu'il
dispose d'un processeur de formulaire intégré. Cela implémente toutes les fonctionnalités de base d'un processeur de formulaire comme l'envoi d'un e-mail, son
enregistrement dans un fichier sur le serveur ou même le stocker dans une base de données MySQL.
Activer Utilisez le processeur de formulaire PHP intégré pour envoyer des données à une adresse e-mail option si vous souhaitez utiliser le processeur
de formulaire intégré. Cette fonctionnalité génère automatiquement un script PHP qui va traiter les champs de votre formulaire et l'envoyer à une adresse e-mail
que vous spécifiez. Le script de traitement du formulaire sera inséré dans la même page et vous pourrez sélectionner une page de «remerciement» ou de
réussite qui s'affichera une fois que l'utilisateur aura soumis les données.
98
WYSIWYGWeb Builder 16
Adresse électronique
L'adresse e-mail à laquelle les résultats du formulaire seront envoyés. Vous ne pouvez spécifier qu'une seule adresse e-mail dans ce champ. Vous pouvez
laisser ce champ vide si vous ne souhaitez pas envoyer d'e-mail.
Bouton Plus
Cliquez sur le bouton «Plus» pour spécifier plusieurs adresses e-mail (CC / BCC). Utilisez des virgules pour séparer les adresses e-mail. Le
champ «De l'e-mail» définira l'adresse «de l'expéditeur» des e-mails envoyés sur l'adresse e-mail spécifiée. Si vous laissez le champ vide, cela
fonctionnera comme dans les versions précédentes: soit l'entrée 'email' sera utilisée (si elle existe), soit l'adresse 'to'.
Le 'Nom de l'expéditeur' vous permet de définir le nom de l'expéditeur. Il est également possible d'utiliser une variable PHP. Par exemple,
S_POST ['nom'] où 'nom' est le nom du champ de saisie.
«Répondre à» peut être utilisé pour spécifier une adresse de réponse alternative. 'Répondre à' peut être une adresse e-mail fixe, auquel cas vous devez utiliser des
guillemets:
« [email protected] »
ou une variable PHP: $
_POST ['email']
La valeur par défaut est $ mailfrom. Ceci est une variable intégrée et signifie que si «De l'email» a été configuré, cela sera
utilisé ou bien l'adresse e-mail saisie par l'utilisateur.
Matière
L'objet du message électronique.
Message
Un court message qui sera ajouté aux données soumises.
Par défaut, le message sera envoyé en texte brut, mais il est également possible de formater le texte. Cliquez sur le bouton "Modifier" pour modifier le format du
message. Sélectionnez «Texte enrichi» pour utiliser l'éditeur intégré pour mettre en forme le texte (cliquez sur le bouton «Modifier» pour ouvrir l'éditeur) ou
sélectionnez «HTML» pour insérer votre propre code HTML pour le message (pour les utilisateurs avancés!).
Page de réussite (obligatoire)
La page vers laquelle l'utilisateur sera redirigé après l'envoi des données (après avoir appuyé sur le bouton «Soumettre»).
Page d'erreur (obligatoire)
La page vers laquelle l'utilisateur sera redirigé si une erreur s'est produite lors du traitement des données.
Écrivez les données du formulaire dans un fichier .csv.
Cette option enregistre les données de formulaire soumises dans un fichier de données séparées par des virgules sur le serveur Web. Vous ouvrez ce fichier dans
Microsoft Excel, un éditeur de texte ou importez dans une base de données.
Notez que le fichier de données doit exister sur le serveur et qu'il doit être accessible en écriture!
WYSIWYGWeb Builder a une option très utile pour créer automatiquement ce fichier pour vous et définir les autorisations appropriées.
Cliquez simplement sur le bouton «Créer» à côté du champ de nom de fichier et suivez les instructions à l'écran.
Étape 1
Saisissez le nom du fichier de données. Par exemple, 'formdata.csv'
Étape 2
Sélectionnez l'emplacement de publication où le fichier sera créé. Web Builder répertorie tous les profils que vous avez créés dans le gestionnaire de
publication.
Étape 3
Web Builder se connecte à l'emplacement sélectionné et affiche la structure des dossiers sur le serveur Web. Sélectionnez le dossier distant
et cliquez sur «Terminer» pour créer le fichier de données.
99
WYSIWYGWeb Builder 16
Téléchargez des fichiers dans un dossier sur le serveur.
Si cette option est activée, le processeur de formulaire intégré téléchargera les fichiers dans un dossier sur le serveur au lieu de les envoyer en pièce
jointe par e-mail.
Les fichiers seront enregistrés avec un nom de fichier unique. L'emplacement du ou des fichiers téléchargés sera inclus dans le message électronique.
Base de données (pour les utilisateurs avancés uniquement)
Vous pouvez utiliser cette option en combinaison avec le processeur de formulaire intégré pour stocker les données de formulaire dans une base de données MySQL
sur le serveur. Le script PHP généré tentera de créer automatiquement la table et les champs en fonction des paramètres que vous avez configurés, vous n'avez donc
pas à vous soucier de le créer vous-même. Les champs de la base de données seront dans le même ordre et utiliseront le même nom que dans la conception de
votre formulaire.
Remarque:
Pour afficher ou traiter les données de formulaire soumises, vous aurez besoin d'un outil séparé, comme l'outil d'administration standard de MySQL.
Veuillez consulter la documentation de votre hébergeur pour plus de détails.
Écrire des données de formulaire dans une base de données MySQL, spécifie s'il faut écrire des données de formulaire dans une base de données MySQL.
Base de données, spécifie le nom de la base de données MySQL.
Les tables spécifie le nom de la table de la base de données MySQL.
Nom d'utilisateur, spécifie le nom d'utilisateur MySQL.
Mot de passe, spécifie le mot de passe MySQL.
Serveur, spécifie le serveur de base de données MySQL.
Répondeur automatique
Nous avons ajouté des fonctionnalités de base de répondeur automatique au processeur de formulaire. Cela vous permet d'envoyer un message (de remerciement
ou de confirmation) à l'utilisateur.
De
Spécifie l'adresse e-mail «de» pour le message électronique.
Matière
Spécifie l'objet du message électronique.
Message
Spécifie le corps du texte du message électronique.
Nom du champ de saisie
Spécifie le nom du champ de saisie de l'e-mail. La valeur par défaut est «email». Ce qui signifie que le formulaire doit avoir un champ de saisie
nommé «e-mail» pour collecter l'adresse e-mail.
Divers
Activer Inclure l'adresse IP dans les données du formulaire pour inclure l'adresse IP du formulaire informatique où le formulaire a été soumis dans le
message. L'option Variables de processus dans la page Success permet d'inclure les résultats du formulaire dans la page de réussite. Cela vous permet
d'utiliser des variables dans le texte (ou d'autres parties de la page de réussite) qui seront remplacées par les valeurs soumises du formulaire.
Exemple: sur la page de réussite, ajoutez un objet texte avec ce texte:
Les données suivantes ont été soumises au formulaire en ligne: Nom: $ name
Courriel: $ email
Site Web: $ site Web
Où nom, e-mail et site Web sont les noms des champs du formulaire plus le signe dollar. Donc, si le nom du champ est «nom», le nom de la
variable sera «$ nom».
100
WYSIWYGWeb Builder 16
Activer la validation côté serveur
Cela ajoute une sécurité supplémentaire au formulaire en validant également l'entrée côté serveur (en utilisant PHP), donc même si JavaScript est
désactivé dans le navigateur ou si le formulaire a été modifié (par des spammeurs / hackers), le soumis sera toujours validé. Cette fonctionnalité utilise les
mêmes paramètres que la validation JavaScript (côté client).
Ne pas autoriser les URL dans les données de formulaire
Cette option peut aider à empêcher le spam en bloquant les messages contenant des liens.
Définissez l'adresse d'envoi de l'enveloppe pour le courrier PHP () avec l'option -f
La définition d'une adresse d'expéditeur d'enveloppe évite les rebonds de courrier ennuyeux pour votre administrateur système.
Si le courrier envoyé par le formulaire ne peut pas être livré, il sera rejeté à l'adresse indiquée comme adresse «de».
http://php.net/manual/en/function.mail.php
101
WYSIWYGWeb Builder 16
Ajout de code personnalisé au processeur de formulaire (pour les utilisateurs avancés uniquement!)
Il est possible d'ajouter du code supplémentaire au processeur de formulaire, cela peut être utile pour insérer des en-têtes CC / BCC ou pour envoyer un autre
e-mail, stocker dans la base de données, etc.
Étape 1
Assurez-vous d'abord que l'option «Utiliser le processeur de formulaire PHP intégré pour envoyer des données à une adresse e-mail» est activée.
Étape 2
Cliquez avec le bouton droit sur le formulaire et sélectionnez «HTML» dans le menu contextuel.
Étape 3
Notez que l'un des onglets est appelé «Traitement de formulaire personnalisé», ici vous pouvez saisir votre propre code.
Le code sera inséré juste avant la fonction PHP mail ():
$ body. = '-'. $ borne .'-- '. $ eol;
// votre code sera inséré ici!
mail ($ mailto, $ sujet, $ corps, $ en-tête); header ('Location:'. $
success_url);
sortie;
Remarques importantes sur le processeur de formulaire PHP intégré:
•
Si le formulaire contient une zone d'édition nommée «e-mail», cette adresse e-mail sera utilisée comme adresse «de» pour le message. Ce
•
Si le formulaire contient un ou plusieurs objets «téléchargement de fichier», le script joindra automatiquement ces fichiers au message
•
Tu DOIT changez l'extension de fichier sur la page en PHP (dans Propriétés de la page), car PHP sera ajouté à la page.
•
Vous ne pouvez pas prévisualiser / tester une page PHP sur votre ordinateur local à moins qu'un serveur Web PHP soit installé. Les
nom de champ est sensible à la casse! Alors ne l'appelez pas Email ou eMail.
électronique.
scripts PHP ne peuvent être testés qu'une fois la page publiée sur le serveur. Votre compte d'hébergement doit prendre en charge PHP et
•
la fonction mail () doit être activée, sinon cela ne fonctionnera pas.
•
Vous ne pouvez avoir qu'un seul formulaire par page.
•
L'ordre z des objets sur le formulaire détermine l'ordre des éléments dans le message électronique. Vous pouvez modifier cet ordre à l'aide des
outils Réorganiser ou sélectionner «Réorganiser les objets» dans le menu contextuel du formulaire.
Voir aussi ce tutoriel en ligne:
http://www.wysiwygwebbuilder.com/forms.html
102
WYSIWYGWeb Builder 16
Champs cachés
Vous pouvez également ajouter des champs masqués qui ne sont pas rendus mais dont les valeurs sont soumises avec un formulaire. Les champs
généralement masqués sont utilisés pour stocker des informations entre les échanges client / serveur qui seraient autrement perdues en raison de la nature
sans état de HTTP.
Événements
Pour plus d'informations sur les événements, veuillez lire le chapitre «Événements» de ce document.
Espace archivage sur le Web
Le stockage Web est une nouvelle fonctionnalité de HTML5. Il vous permet de stocker des valeurs de champ entre les sessions ou / et les pages. Cela peut
être utile si vous souhaitez transférer des valeurs d'un formulaire à un autre.
Activez cette option et le constructeur Web WYSIWYGWeb Builder stockera et récupérera automatiquement toutes les valeurs pour vous!
Notez que l'ID des objets sera utilisé comme clé pour la valeur, donc si vous souhaitez récupérer les valeurs dans un autre formulaire (sur
une autre page), il doit avoir le même ID.
Le stockage local stocke les données sans limite de temps. Le stockage
de session stocke les données pour une session.
Remarque:
Le stockage Web ne fonctionne que si votre site Web est en ligne. Cela fonctionne dans tous les navigateurs modernes.
jQuery Mobile
Utilisez AJAX
jQuery Mobile gérera automatiquement les soumissions de formulaires via Ajax, lorsque cela est possible. Si faux, des requêtes HTTP ordinaires seront
utilisées.
Transition
Spécifie la transition de page lors du chargement de la page de réussite. Les transitions de page ne fonctionnent que si AJAX est activé.
Définir l'ordre des onglets dans les formulaires
L'option «Définir l'ordre de tabulation» peut être utilisée pour définir rapidement l'ordre de tabulation dans les formulaires. Voici
comment cela fonctionne:
1) Sélectionnez d'abord le formulaire.
2) Sélectionnez ensuite l'option «Définir l'ordre des onglets» dans le menu (également disponible dans le menu contextuel du formulaire).
3) Web Builder affichera désormais l'index actuel de chaque élément de formulaire qui prend en charge l'attribut index tab. Si l'index de l'onglet n'est
pas encore défini, il affiche «Non défini».
4) Cliquez maintenant sur chaque objet dans l'ordre souhaité. Le nouvel index sera automatiquement affiché.
103
WYSIWYGWeb Builder 16
Bouton avancé
Insère un objet Advanced Button dans un formulaire. Le bouton avancé vous donne beaucoup plus de contrôle sur l'apparence et le comportement
d'un bouton. Vous pouvez changer la couleur d'arrière-plan, utiliser différentes polices pour le texte ou même activer JavaScript.
Général
Nom
Nom du bouton.
Valeur
Valeur initiale du bouton.
Type de bouton
Ordinaire: Les boutons Normal (Push) n'ont pas de comportement par défaut.
Soumettre: Lorsqu'il est activé, un bouton d'envoi soumet un formulaire.
Réinitialiser: Lorsqu'il est activé, un bouton de réinitialisation réinitialise toutes les commandes à leurs valeurs initiales.
Sur clic: Avec cette option, vous pouvez associer un script côté client au bouton.
Action OnClick
Ici, vous pouvez spécifier quelle action est associée à l'événement OnClick du bouton:
•
Accédez à l'URL spécifiée; entrez une URL comme Valeur OnClick
•
Ouvrez une nouvelle fenêtre et chargez l'URL spécifiée. Fermez la fenêtre actuelle du navigateur; entrez une URL comme Valeur OnClick
•
Recharger; recharger la page actuelle (identique à Actualiser dans le navigateur Internet). Allez à la page
•
précédente; identique à Back dans le navigateur Internet. Aller à la page suivante; identique à Transférer
•
dans le navigateur Internet.
•
Exécuter la fonction Java Script; spécifiez une fonction de script que vous avez définie ailleurs dans la page.
Valeur OnClick
En fonction de l'action OnClick que vous avez sélectionnée, saisissez ici la valeur associée. Par exemple, pour Accédez
à l'URL spécifiée vous entrez une URL.
Clé d'accès
Cet attribut attribue une clé d'accès à l'objet. Une clé d'accès est un caractère unique. Appuyez sur la touche d'accès
pour mettre l'élément en évidence.
désactivé
L'option désactivée désactive le contrôle de l'entrée utilisateur. Les contrôles désactivés ne reçoivent pas le focus.
Index des onglets
Tous les éléments (à l'exception des éléments masqués) d'un formulaire font partie de l'ordre de tabulation du formulaire.
Titre
Spécifie l'info-bulle affichée par le navigateur
Événements
Pour plus d'informations sur les événements, veuillez lire le chapitre «Événements» de ce document.
104
WYSIWYGWeb Builder 16
CAPTCHA
L'objet CAPTCHA a été conçu pour fonctionner en combinaison avec des formulaires (PHP). Cela aide à empêcher les spammeurs de soumettre
automatiquement les données du formulaire. CAPTCHA (un acronyme pour «Test de Turing public complètement automatisé pour séparer les ordinateurs
et les humains») génère dynamiquement une image avec des lettres et des chiffres (aléatoires). Les lettres, parce qu'elles font partie d'une image et non
du texte, sont difficiles à lire pour un spambot ou un autre programme informatique. Pourtant, une personne a peu de mal à lire les lettres dans une image
captcha.
Il existe également une prise en charge intégrée de reCAPTCHA v2, reCAPTCHA v3 et hCAPTCHA de Google!
Pointe:
L'objet CAPTCHA doit faire partie d'un formulaire. Et comme il utilise PHP, il ne peut être utilisé / testé que sur un serveur web avec
support PHP! Pour pouvoir générer l'image CAPTCHA, la bibliothèque GD (version 2) doit être activée dans votre configuration PHP. Dans
certains cas, un message d'erreur peut s'afficher sur votre site Web. Le message ressemblera à ceci:
Attention: imagepng (): Impossible d'ouvrir './captcha.png' pour écrire dans /../../captcha.php sur la ligne x
Ce problème peut se produire lorsque le script captcha est placé dans un dossier sur le site Web. La solution consiste à modifier les propriétés de
ce dossier après la publication. Les propriétés correctes sont 757 ou 777. Vous pouvez utiliser le client FTP intégré pour modifier les autorisations
du dossier.
Image CAPTCHA
Type
•
défaut
Affiche des caractères aléatoires
•
math
Affiche un défi mathématique (aléatoire) au lieu de caractères.
•
reCAPTCHA v2
Utilisez le reCAPTCHA v2 de Google
•
reCAPTCHA v3
Utilisez le reCAPTCHA v3 de Google, également connu sous le nom de `` reCAPTCHA invisible ''
•
hCAPTCHA
hCaptcha est un service CAPTCHA gratuit, privé et sécurisé qui permet de protéger vos formulaires contre le spam. Il fonctionne de
manière similaire à la version de Google, mais offre plus de méthodes d'identification et de blocage des robots.
Clé de site et clé secrète
Pour obtenir les clés reCAPTCHA, vous devez vous inscrire à l'adresse suivante: http://www.google.com/recaptcha
Pour obtenir les clés hCAPTCHA, vous devrez vous inscrire à l'adresse suivante: https://hCaptcha.com/?r=4c00f060adf9
Les clés sont uniques à votre domaine et à vos sous-domaines et ne fonctionneront pas pour les autres domaines
105
WYSIWYGWeb Builder 16
Largeur hauteur
Spécifie la largeur et la hauteur de l'image
Couleur du texte
Spécifie la couleur du texte. Sélectionnez «Aléatoire» pour utiliser une couleur aléatoire pour chaque caractère. Il est également
possible de définir la transparence du texte afin que l'arrière-plan transparaisse.
Effet de fond
•
solide
•
Aléatoire
Utilisez une couleur de fond unie
Générez un arrière-plan aléatoire avec des polygones et des lignes de différentes couleurs qui est plus difficile à lire par les robots
anti-spam.
•
bruit
•
points et lignes
Générez un effet de bruit de fond aléatoire.
Générer un arrière-plan aléatoire avec des points et des lignes
Activer l'effet de vague.
Cela appliquera un filtre d'onde à l'image pour la rendre plus difficile à lire pour les robots de spam.
Activer la rotation
Spécifie s'il faut utiliser des caractères pivotés de manière aléatoire.
Activer l'ombre du texte
Ajoute de l'ombre au texte, ce qui le rend encore plus difficile à lire pour les robots spammeurs (mais aussi pour les humains ...).
Inclure les caractères
Spécifiez les caractères qui seront utilisés dans l'image. Évitez d'utiliser des caractères et des chiffres confus (par exemple: l, 1 et i)
Clé secrète / clé de site
Entrez votre site et votre clé secrète reCAPTCHA ici.
Décalage de la boîte d'édition
Spécifie le décalage entre l'image et la zone d'édition.
Conseils:
Si vous entrez une valeur négative, la zone d'édition sera positionnée sous l'image!
Il est également possible de masquer la zone d'édition standard (définir le décalage à -99). Cela vous permet de créer votre propre contrôle d'entrée pour
vous donner plus de contrôle sur la taille, la position et le style.
Clé d'accès
Cet attribut attribue une clé d'accès à l'objet. Une clé d'accès est un caractère unique. Appuyez sur la touche d'accès
pour mettre l'élément en évidence.
Index des onglets
Tous les éléments (à l'exception des éléments masqués) d'un formulaire font partie de l'ordre de tabulation du formulaire.
Lorsque l'utilisateur appuie sur la touche Tab, le navigateur déplace le focus d'entrée d'un élément à l'autre afin que les éléments apparaissent dans
le code HTML.
Cependant, vous souhaitez parfois que l'ordre de tabulation se déroule un peu différemment. Dans ce cas, vous pouvez numéroter les champs à l'aide de l'attribut
tabindex.
Habituellement, le premier tabindex commence par la valeur «1». Pour exclure un élément de l'ordre de tabulation, définissez la valeur de tabindex sur 0.
Dans ce cas, l'élément est ignoré lorsque l'utilisateur parcourt le formulaire.
106
WYSIWYGWeb Builder 16
Case à cocher
Les cases à cocher sont des interrupteurs marche / arrêt qui peuvent être basculés par l'utilisateur. Utilisez les cases
à cocher si vous souhaitez autoriser la sélection de plus d'un élément.
Général
Nom
Nom de la case à cocher.
Valeur
Valeur de la case à cocher lorsqu'elle est activée.
Etat initial
État initial de la case à cocher.
Clé d'accès
Cet attribut attribue une clé d'accès à l'objet. Une clé d'accès est un caractère unique. Appuyez sur la touche d'accès
pour mettre l'élément en évidence.
désactivé
L'option désactivée désactive le contrôle de l'entrée utilisateur. Les contrôles désactivés ne reçoivent pas le focus. Les contrôles désactivés sont ignorés dans la
navigation par tabulation. La valeur des contrôles désactivés ne sera pas soumise avec le formulaire.
Index des onglets
Tous les éléments (à l'exception des éléments masqués) d'un formulaire font partie de l'ordre de tabulation du formulaire. Lorsque l'utilisateur appuie sur la touche
Tab, le navigateur déplace le focus d'entrée d'un élément à l'autre afin que les éléments apparaissent dans le code HTML. Cependant, vous souhaitez parfois que
l'ordre de tabulation se déroule un peu différemment. Dans ce cas, vous pouvez numéroter les champs à l'aide de l'attribut tabindex. Habituellement, le premier
tabindex commence par la valeur «1». Pour exclure un élément de l'ordre de tabulation, définissez la valeur de tabindex sur 0. Dans ce cas, l'élément est ignoré
lorsque l'utilisateur parcourt le formulaire.
Titre
Spécifie l'info-bulle affichée par le navigateur
Utiliser le style de navigateur par défaut
Normalement, il n'est pas possible de modifier l'apparence d'une case à cocher avec du HTML standard. Cependant, WWB implémente un code
personnalisé pour permettre de personnaliser le style (et la taille) de l'objet Checkbox pour remplacer l'apparence par défaut du navigateur. Cela rend
également la case à cocher réactive afin qu'elle puisse avoir une taille (et une couleur) différente dans les points d'arrêt. Si vous préférez utiliser le style
de navigateur standard, cela peut être désactivé avec «Utiliser le style de navigateur par défaut».
Valider
Pour plus d'informations sur la validation, veuillez lire le chapitre «Validation du formulaire».
Événements
Pour plus d'informations sur les événements, veuillez lire le chapitre «Événements» de ce document.
Remarque:
Ce contrôle fait normalement partie d'un formulaire.
107
WYSIWYGWeb Builder 16
Boîte combo
Utilisé pour permettre aux utilisateurs de faire une sélection parmi un certain nombre d'options différentes.
Général
Nom
Saisissez un identifiant pour le champ.
Remarque:
Il est important de noter que le nom de l'élément doit être au format nom [] pour les sélections multiples! De cette façon, vous recevrez les valeurs
sélectionnées dans un tableau (c'est une fonctionnalité PHP).
Type
•
Boîte combo
•
Listbox
•
Datalist (HTML5).
Cela fera de l'objet une liste déroulante. Une seule ligne est affichée à la fois.
Cela fera de l'objet une zone de liste standard. Plusieurs lignes sont affichées à la fois.
Une liste de données est une combinaison entre une zone de liste déroulante et une zone d'édition. L'utilisateur peut sélectionner des données dans une liste ou
saisir la valeur manuellement.
Autoriser plusieurs sélections
Permet à l'utilisateur de sélectionner plusieurs éléments en même temps.
Éléments
Vous pouvez ajouter, modifier et supprimer des éléments qui apparaîtront dans la liste.
Ajouter
Ajoutez un nouvel élément à la liste.
Éditer
Modifiez un élément existant dans la liste.
Effacer
Supprimez l'élément sélectionné de la liste.
Importer
Cette option vous permet d'importer rapidement des listes de données prédéfinies. Sélectionnez parmi de nombreuses valeurs prédéfinies (pays, états,
mois, jours, etc.) ou importez à partir d'un fichier externe.
Importer depuis un fichier externe
Le fichier contenant les éléments doit contenir deux éléments par ligne, séparés par un point-virgule: Texte de l'élément; Valeur de l'élément
Par exemple:
Afghanistan; Afghanistan
Albanie; Albanie
108
WYSIWYGWeb Builder 16
Déplacer vers le haut
Déplace l'élément sélectionné d'une position vers le haut dans la liste.
Descendre
Déplace l'élément sélectionné d'une position vers le bas dans la liste.
désactivé
L'option désactivée désactive le contrôle de l'entrée utilisateur. Les contrôles
désactivés ne reçoivent pas le focus.
Les contrôles désactivés sont ignorés dans la navigation par tabulation.
La valeur des contrôles désactivés ne sera pas soumise avec le formulaire.
Index des onglets
Tous les éléments (à l'exception des éléments masqués) d'un formulaire font partie de l'ordre de tabulation du formulaire.
Lorsque l'utilisateur appuie sur la touche Tab, le navigateur déplace le focus d'entrée d'un élément à l'autre afin que les éléments apparaissent dans le code
HTML. Cependant, vous souhaitez parfois que l'ordre de tabulation se déroule un peu différemment. Dans ce cas, vous pouvez numéroter les champs à
l'aide de l'attribut tabindex.
Habituellement, le premier tabindex commence par la valeur «1». Pour exclure un élément de l'ordre de tabulation, définissez la valeur de tabindex sur 0.
Dans ce cas, l'élément est ignoré lorsque l'utilisateur parcourt le formulaire.
Titre
Spécifie l'info-bulle affichée par le navigateur
État de mise au point
Supprime les styles de contour par défaut et applique une boîte-ombre (avec une couleur personnalisable) à sa place.
Valider
Pour plus d'informations sur la validation, veuillez lire le chapitre «Validation du formulaire».
Conditions
Pour plus d'informations sur les conditions et les calculs, veuillez lire le chapitre «Conditions du formulaire».
Événements
Pour plus d'informations sur les événements, veuillez lire le chapitre «Événements» de ce document.
Remarque:
Ce contrôle fait normalement partie d'un formulaire.
109
WYSIWYGWeb Builder 16
Editbox
Champ sur une seule ligne pouvant être utilisé pour ajouter des champs de nom / adresse e-mail.
Général
Nom
Saisissez un identifiant pour le champ.
Valeur initiale
Valeur initialement affichée dans le champ.
Espace réservé (HTML5)
Spécifie un petit conseil pour aider l'utilisateur à remplir le champ de saisie. Le texte disparaîtra dès que l'utilisateur saisira du texte.
Max. Longueur
Spécifie le nombre maximum de caractères qu'un utilisateur peut entrer dans la zone d'édition.
Type
•
texte
•
mot de passe
Un champ de texte brut.
Fait de la zone d'édition un champ de mot de passe afin que toute entrée de texte soit affichée sous forme d'astérisques.
•
couleur (HTML5)
•
date (HTML5)
•
datetime (HTML5)
•
datetime-local (HTML5)
Le navigateur affiche un sélecteur de couleurs visuel.
Le navigateur affiche un sélecteur de date.
Le champ de saisie est destiné aux horodatages précis et absolus de la date et de l'heure.
Le champ de saisie est pour les dates et heures locales.
•
e-mail (HTML5)
•
mois (HTML5)
•
numéro (HTML5)
•
plage (HTML5)
Le champ de saisie concerne les adresses e-mail.
Le navigateur affiche un sélecteur de mois.
Le navigateur affiche une boîte de sélection visuelle.
Le navigateur affiche un sélecteur de plage.
•
recherche (HTML5)
•
tel (HTML5)
•
heure (HTML5)
•
URL (HTML5)
•
semaine (HTML5)
Le navigateur affiche un champ de saisie de recherche.
Le navigateur affiche un champ de saisie téléphonique.
Le champ de saisie est un champ de saisie de l'heure.
Le champ de saisie concerne les adresses Web.
Le navigateur affiche un sélecteur de semaine.
Remarque: Actuellement, seuls les champs de texte et de mot de passe sont pris en charge par tous les navigateurs. Dans d'autres cas, certains navigateurs
afficheront simplement la zone d'édition par défaut.
110
WYSIWYGWeb Builder 16
désactivé
L'option désactivée désactive le contrôle de l'entrée utilisateur. Les contrôles désactivés ne reçoivent pas le focus. Les contrôles désactivés sont ignorés dans la
navigation par tabulation. La valeur des contrôles désactivés ne sera pas soumise avec le formulaire.
Clé d'accès
Cet attribut attribue une clé d'accès à l'objet. Une clé d'accès est un caractère unique. Appuyez sur la touche d'accès pour mettre l'élément en
évidence.
Alignement
Spécifie l'alignement horizontal du champ de saisie.
Saisie semi-automatique (HTML5)
Spécifie si le champ de saisie doit avoir la saisie semi-automatique activée (si disponible dans le navigateur).
Vérification orthographique (HTML5)
L'attribut de vérification orthographique HTML5 spécifie si l'orthographe et la grammaire de l'élément doivent être vérifiées ou non.
Lecture seulement
L'option lecture seule empêche l'utilisateur de modifier la valeur du champ, mais pas d'interagir avec le champ. L'utilisateur peut toujours mettre en
surbrillance le texte à copier par exemple. Les éléments en lecture seule reçoivent le focus mais ne peuvent pas être modifiés par l'utilisateur. Les éléments
en lecture seule sont inclus dans la navigation par tabulation. Les éléments en lecture seule seront soumis avec le formulaire.
Index des onglets
Tous les éléments (à l'exception des éléments masqués) d'un formulaire font partie de l'ordre de tabulation du formulaire. Lorsque l'utilisateur appuie sur la touche
Tab, le navigateur déplace le focus d'entrée d'un élément à l'autre afin que les éléments apparaissent dans le code HTML. Cependant, vous souhaitez parfois que
l'ordre de tabulation se déroule un peu différemment. Dans ce cas, vous pouvez numéroter les champs à l'aide de l'attribut tabindex. Habituellement, le premier
tabindex commence par la valeur «1». Pour exclure un élément de l'ordre de tabulation, définissez la valeur de tabindex sur 0. Dans ce cas, l'élément est ignoré
lorsque l'utilisateur parcourt le formulaire.
Titre
Spécifie l'info-bulle affichée par le navigateur.
État de mise au point
Supprime les styles de contour par défaut et applique une boîte-ombre (avec une couleur personnalisable) à sa place.
Boîte ombre
Configurez l'ombre de la boîte (également appelée ombre portée) pour l'objet. Nécessite un navigateur compatible CSS3.
Valider
Pour plus d'informations sur la validation, veuillez lire le chapitre «Validation du formulaire».
Événements
Pour plus d'informations sur les événements, veuillez lire le chapitre «Événements» de ce document.
Remarque:
Ce contrôle fait normalement partie d'un formulaire.
111
WYSIWYGWeb Builder 16
Téléchargement de fichiers
Cet objet permet aux utilisateurs de joindre un fichier au contenu du formulaire. L'élément est rendu sous forme de champ de texte et de bouton
associé, bien que dans certains navigateurs, il puisse apparaître différemment. Par exemple: le texte du bouton «parcourir» sera «Choisir» dans
Opera et «Parcourir» dans IE / FireFox. De plus, il n'y a aucun moyen de contrôler la taille du bouton ou de modifier le champ via HTML.
Remarques:
Lors de l'utilisation du processeur de formulaire PHP intégré, le script généré se chargera automatiquement de joindre le (s) fichier (s)
sélectionné (s) au message électronique une fois le formulaire soumis.
La plupart des services d'hébergement limitent la taille de téléchargement entre 2 et 4 Mo. Bien que vous puissiez contrôler la limite de téléchargement
en ajoutant un champ caché appelé 'filesize' avec la taille en ko, il respectera néanmoins les limites imposées par les hébergeurs.
Si vous choisissez de ne pas utiliser le processeur de formulaire intégré, vous devez implémenter un script pour gérer vous-même les téléchargements de fichiers!
Général
Nom
Saisissez un identifiant pour le champ.
désactivé
L'option désactivée désactive le contrôle de l'entrée utilisateur. Les contrôles désactivés ne reçoivent pas le focus. Les contrôles désactivés sont ignorés dans la
navigation par tabulation. La valeur des contrôles désactivés ne sera pas soumise avec le formulaire.
Clé d'accès
Cet attribut attribue une clé d'accès à l'objet. Une clé d'accès est un caractère unique. Appuyez sur la touche d'accès
pour mettre l'élément en évidence.
Utiliser le style de navigateur par défaut
Normalement, il n'est pas possible de modifier l'apparence d'un élément de téléchargement de fichier avec du HTML standard. Cependant, WWB implémente un
code personnalisé pour permettre de personnaliser le style (et la taille) de l'objet Téléchargement de fichier pour remplacer l'apparence par défaut du
navigateur.
Si vous préférez utiliser le style de navigateur standard, cela peut être désactivé avec «Utiliser le style de navigateur par défaut». Dans ce cas, l'élément est
rendu sous forme de champ de texte et de bouton associé, bien que dans certains navigateurs, il puisse apparaître différemment. Par exemple, le texte du
bouton «parcourir» sera «Choisir» dans Opera et «Parcourir» dans IE / FireFox.
Titre
Spécifie l'info-bulle affichée par le navigateur
Valider
Pour plus d'informations sur la validation, veuillez lire le chapitre «Validation du formulaire».
Remarque:
Ce contrôle fait normalement partie d'un formulaire.
112
WYSIWYGWeb Builder 16
Interrupteur à levier
Un «interrupteur à bascule» (également appelé interrupteur à bascule) peut être utilisé comme alternative pour une case à cocher. Inspiré de la case à cocher iPhone.
Il est possible d'utiliser différentes couleurs (texte / arrière-plan / bordure) pour coché / décoché, ajouter des animations, des conditions et des événements.
Voir aussi: Case à cocher
113
WYSIWYGWeb Builder 16
Bouton d'image
Insère un objet Image Button dans un formulaire.
Un bouton d'image est comme un bouton Soumettre. Lorsque le visiteur de la page clique sur l'image, il effectuera l'action
associée au formulaire.
Général
Nom
Nom du bouton.
Image: entrez le chemin et le nom de fichier de l'image / image.
Utilisez la taille originale: Sélectionnez cette option si vous souhaitez que l'image apparaisse à sa taille d'origine.
Ajuster au rectangle de mise en page: Sélectionnez cette option si vous souhaitez spécifier manuellement la taille de l'image.
Le bouton Image agit de la même manière qu'un bouton avec le type défini sur: Soumettre
désactivé
L'option désactivée désactive le contrôle de l'entrée utilisateur. Les contrôles
désactivés ne reçoivent pas le focus.
Les contrôles désactivés sont ignorés dans la navigation par tabulation.
La valeur des contrôles désactivés ne sera pas soumise avec le formulaire.
Clé d'accès
Cet attribut attribue une clé d'accès à l'objet. Une clé d'accès est un caractère unique. Appuyez sur la touche d'accès
pour mettre l'élément en évidence.
Index des onglets
Tous les éléments (à l'exception des éléments masqués) d'un formulaire font partie de l'ordre de tabulation du formulaire.
Lorsque l'utilisateur appuie sur la touche Tab, le navigateur déplace le focus d'entrée d'un élément à l'autre afin que les éléments apparaissent dans
le code HTML.
Cependant, vous souhaitez parfois que l'ordre de tabulation se déroule un peu différemment. Dans ce cas, vous pouvez numéroter les champs à l'aide de l'attribut
tabindex.
Habituellement, le premier tabindex commence par la valeur «1». Pour exclure un élément de l'ordre de tabulation, définissez la valeur de tabindex sur 0.
Dans ce cas, l'élément est ignoré lorsque l'utilisateur parcourt le formulaire.
Titre
Spécifie l'info-bulle affichée par le navigateur
Si vous voulez plus de contrôle sur l'apparence et le comportement du bouton, vous pouvez également utiliser le bouton avancé
Remarque:
Ce contrôle fait normalement partie d'un formulaire.
114
WYSIWYGWeb Builder 16
Bouton poussoir
Le bouton-poussoir sera généralement utilisé comme bouton d'envoi ou de réinitialisation sur un formulaire. Si le
bouton poussoir ne fait pas partie d'un formulaire, il ne fait rien par défaut.
Général
Nom
Nom du bouton.
Valeur / étiquette
Légende du bouton.
Type de bouton
Soumettre: Lorsqu'il est activé, un bouton d'envoi soumet un formulaire. Un formulaire peut contenir plusieurs boutons d'envoi.
Réinitialiser: Lorsqu'il est activé, un bouton de réinitialisation réinitialise toutes les commandes à leurs valeurs initiales.
Ordinaire: Les boutons Normal (Push) n'ont pas de comportement par défaut.
Chaque bouton poussoir peut avoir des scripts côté client associés aux attributs d'événement de l'élément. Lorsqu'un événement se produit
(par exemple, l'utilisateur appuie sur le bouton, le relâche, etc.), le script associé est déclenché.
désactivé
L'option désactivée désactive le contrôle de l'entrée utilisateur. Les contrôles
désactivés ne reçoivent pas le focus.
Les contrôles désactivés sont ignorés dans la navigation par tabulation.
La valeur des contrôles désactivés ne sera pas soumise avec le formulaire.
Clé d'accès
Cet attribut attribue une clé d'accès à l'objet. Une clé d'accès est un caractère unique. Appuyez sur la touche d'accès
pour mettre l'élément en évidence.
Index des onglets
Tous les éléments (à l'exception des éléments masqués) d'un formulaire font partie de l'ordre de tabulation du formulaire.
Lorsque l'utilisateur appuie sur la touche Tab, le navigateur déplace le focus d'entrée d'un élément à l'autre afin que les éléments apparaissent dans le code
HTML. Cependant, vous souhaitez parfois que l'ordre de tabulation se déroule un peu différemment. Dans ce cas, vous pouvez numéroter les champs à
l'aide de l'attribut tabindex. Habituellement, le premier tabindex commence par la valeur «1». Pour exclure un élément de l'ordre de tabulation, définissez la
valeur de tabindex sur 0. Dans ce cas, l'élément est ignoré lorsque l'utilisateur parcourt le formulaire.
Titre
Spécifie l'info-bulle affichée par le navigateur
Événements
Pour plus d'informations sur les événements, veuillez lire le chapitre «Événements» de ce document.
Remarque:
Ce contrôle fait normalement partie d'un formulaire.
115
WYSIWYGWeb Builder 16
Bouton radio
Les boutons radio sont comme des cases à cocher sauf que lorsque plusieurs partagent le même nom, ils s'excluent mutuellement:
quand l'un est activé, tous les autres avec le même nom sont désactivés.
Général
Nom de groupe
Le bouton radio fera partie de ce groupe.
Les boutons radio avec le même nom de groupe obligeront l'utilisateur à sélectionner un choix.
Valeur
Valeur du bouton radio lorsqu'il est sélectionné.
Etat initial
État initial du bouton radio.
désactivé
L'option désactivée désactive le contrôle de l'entrée utilisateur. Les contrôles
désactivés ne reçoivent pas le focus.
Les contrôles désactivés sont ignorés dans la navigation par tabulation.
La valeur des contrôles désactivés ne sera pas soumise avec le formulaire.
Clé d'accès
Cet attribut attribue une clé d'accès à l'objet. Une clé d'accès est un caractère unique. Appuyez sur la touche d'accès
pour mettre l'élément en évidence.
Index des onglets
Tous les éléments (à l'exception des éléments masqués) d'un formulaire font partie de l'ordre de tabulation du formulaire.
Lorsque l'utilisateur appuie sur la touche Tab, le navigateur déplace le focus d'entrée d'un élément à l'autre afin que les éléments apparaissent dans le code
HTML. Cependant, vous souhaitez parfois que l'ordre de tabulation se déroule un peu différemment. Dans ce cas, vous pouvez numéroter les champs à
l'aide de l'attribut tabindex. Habituellement, le premier tabindex commence par la valeur «1». Pour exclure un élément de l'ordre de tabulation, définissez la
valeur de tabindex sur 0. Dans ce cas, l'élément est ignoré lorsque l'utilisateur parcourt le formulaire.
Titre
Spécifie l'info-bulle affichée par le navigateur
Événements
Pour plus d'informations sur les événements, veuillez lire le chapitre «Événements» de ce document.
Remarque:
Ce contrôle fait normalement partie d'un formulaire.
116
WYSIWYGWeb Builder 16
TextArea
Une zone de texte est un champ de formulaire multiligne dans lequel l'utilisateur peut saisir de grandes quantités de texte. Remarque: cet objet
fait normalement partie d'un formulaire!
Général
Nom
Saisissez un identifiant pour le champ.
Valeur initiale
Valeur initialement affichée dans le champ. Lorsque le formulaire est soumis, le texte nouveau ou modifié est saisi.
désactivé
L'option désactivée désactive le contrôle de l'entrée utilisateur. Les contrôles désactivés ne reçoivent pas le focus. Les contrôles désactivés sont ignorés dans la
navigation par tabulation. La valeur des contrôles désactivés ne sera pas soumise avec le formulaire.
Clé d'accès
Cet attribut attribue une clé d'accès à l'objet. Une clé d'accès est un caractère unique. Appuyez sur la touche d'accès
pour mettre l'élément en évidence.
Vérification orthographique (HTML5)
L'attribut de vérification orthographique HTML5 spécifie si l'orthographe et la grammaire de l'élément doivent être vérifiées ou non.
Lecture seulement
L'option en lecture seule empêche l'utilisateur de modifier la valeur du champ, mais pas d'interagir avec le champ. L'utilisateur peut toujours mettre en
surbrillance le texte à copier par exemple. Les éléments en lecture seule reçoivent le focus mais ne peuvent pas être modifiés par l'utilisateur. Les
éléments en lecture seule seront soumis avec le formulaire.
Index des onglets
Tous les éléments (à l'exception des éléments masqués) d'un formulaire font partie de l'ordre de tabulation du formulaire. Lorsque l'utilisateur appuie sur la touche
Tab, le navigateur déplace le focus d'entrée d'un élément à l'autre afin que les éléments apparaissent dans le code HTML. Cependant, vous souhaitez parfois que
l'ordre de tabulation se déroule un peu différemment. Dans ce cas, vous pouvez numéroter les champs à l'aide de l'attribut tabindex. Habituellement, le premier
tabindex commence par la valeur «1». Pour exclure un élément de l'ordre de tabulation, définissez la valeur de tabindex sur 0. Dans ce cas, l'élément est ignoré
lorsque l'utilisateur parcourt le formulaire.
Titre
Spécifie l'info-bulle affichée par le navigateur
Boîte ombre
Configurez l'ombre de la boîte (également appelée ombre portée) pour l'objet. Nécessite un navigateur compatible CSS3.
Valider
Pour plus d'informations sur la validation, veuillez lire le chapitre «Validation du formulaire».
Événements
Pour plus d'informations sur les événements, veuillez lire le chapitre «Événements» de ce document.
117
WYSIWYGWeb Builder 16
ActiveX
Vous utilisez des contrôles ActiveX pour incorporer une application dans une page Web. Les contrôles ActiveX peuvent ajouter des
fonctionnalités personnalisées telles que des lecteurs audio / vidéo, des calendriers, des boutons personnalisés ou d'autres fonctionnalités
à vos pages. Lorsque vous utilisez les contrôles ActiveX, assurez-vous que les visiteurs de votre site utilisent un navigateur qui le prend en
charge. Dessinez une zone pour indiquer la position du contrôle ActiveX. La boîte de dialogue Insérer un contrôle ActiveX apparaît,
répertoriant les contrôles ActiveX actuellement installés sur votre système. En bas, le chemin du contrôle ActiveX sélectionné (qui a une
extension .ocx ou .dll) est affiché. Pour modifier les propriétés du contrôle actif, choisissez Propriétés. Les propriétés disponibles seront
affichées dans la fenêtre et peuvent être modifiées en sélectionnant l'élément et en modifiant la valeur. La plupart des contrôles ActiveX
ont également une page de propriétés native, que vous pouvez appeler à l'aide du bouton Propriétés.
Remarque:
Le composant ActiveX n'est pas conforme au W3C. Cela ne fonctionne que dans les anciennes versions d'Internet Explorer!
Nous vous recommandons vivement de ne pas utiliser ce composant dans votre site Web. Il n'est disponible que pour une compatibilité ascendante avec les
anciennes versions.
118
WYSIWYGWeb Builder 16
Éditeur de fichiers
Ce composant télécharge automatiquement les fichiers spécifiés sur votre site Web et crée les dossiers une fois que vous publiez cette page.
Les fichiers seront publiés au même emplacement que la page elle-même.
Cet objet peut être utile si vous souhaitez inclure des fichiers supplémentaires qui font partie de la page (comme des scripts ou des fichiers multimédias).
Ajouter des fichiers
Ajoutez un ou plusieurs fichiers à l'arborescence.
Ajouter le dossier
Insérez un dossier complet et tous les fichiers qu'il contient à partir de votre disque local.
Nouveau dossier
Ajoute un nouveau nom de dossier à l'arborescence.
Propriétés
Modifiez les propriétés (nom du dossier ou emplacement du fichier) de l'élément sélectionné.
Retirer
Supprimez l'élément sélectionné de l'arborescence des dossiers.
Enlever tout
Supprimez tous les éléments de l'arborescence des dossiers.
Ne pas inclure de fichiers dans Asset Manager
Si l'option «Laisser WYSIWYGWeb Builder gérer les images et autres fichiers utilisés par un projet» dans Options est activée, tous les fichiers seront
copiés dans le dossier du projet par le gestionnaire d'actifs de Web Builder. Vous pouvez désactiver ce comportement pour cette extension en activant
cette option.
Remarque:
Vous pouvez utiliser le glisser-déposer pour réorganiser les éléments.
119
WYSIWYGWeb Builder 16
Éclat
Avec les fichiers Adobe Flash (.swf), vous pouvez créer des fichiers multimédias, graphiques et audio qui se téléchargent rapidement. Pour visualiser ces
fichiers, les visiteurs du site doivent installer le plugin Flash adapté à leur navigateur et à leur plateforme. Ces plugins sont disponibles sur le site Web de
Macromedia à l'adresse www.macromedia.com. Web Builder crée tout le code dont vous avez besoin pour ajouter des fichiers Flash à votre site.
Film
Entrez un nom de fichier du film (.swf).
Image alternative
Cette image sera affichée si le navigateur ne prend pas en charge le flash.
Version
Cela spécifie le numéro de version Flash minimum dont le film a besoin pour être lu correctement.
Qualité
Pour contrôler la qualité d'affichage, sélectionnez une option Qualité.
Faible privilégie la vitesse de lecture par rapport à l'apparence et n'utilise jamais l'anti-crénelage.
Autolow accentue la vitesse au début mais améliore l'apparence chaque fois que possible. La lecture commence avec l'anti-aliasing
désactivé. Si Flash Player détecte que le processeur peut le gérer, l'anticrénelage est activé.
Autohigh accentue la vitesse de lecture et l'apparence de la même manière au début, mais sacrifie l'apparence à la vitesse de lecture si nécessaire. La lecture
commence avec l'anti-aliasing activé. Si la fréquence d'images réelle tombe en dessous de la fréquence d'images spécifiée, l'anti-crénelage est désactivé pour
améliorer la vitesse de lecture. Utilisez ce paramètre pour émuler le paramètre Affichage> Anti-alias dans Flash.
Moyen applique un certain anti-aliasing et ne lisse pas les bitmaps. Il produit une meilleure qualité que le réglage Faible, mais une qualité
inférieure au réglage Élevé.
Haute privilégie l'apparence par rapport à la vitesse de lecture et applique toujours l'anti-crénelage. Si le film ne contient pas d'animation,
les bitmaps sont lissés; si le film a une animation, les bitmaps ne sont pas lissés.
Meilleur offre la meilleure qualité d'affichage et ne tient pas compte de la vitesse de lecture. Toutes les sorties sont anti-aliasées et toutes les bitmaps sont
lissées.
Échelle
Pour déterminer la façon dont le film s'adapte à l'image, sélectionnez une option Echelle.
Par défaut (tout afficher) rend le film entier visible dans la zone spécifiée sans distorsion, tout en conservant le rapport hauteur /
largeur d'origine du film. Des bordures peuvent apparaître des deux côtés du film.
Pas de frontière redimensionne le film pour remplir la zone spécifiée, sans distorsion mais éventuellement avec un certain recadrage, tout en conservant le
rapport hauteur / largeur d'origine du film.
Ajustement exact rend le film entier visible dans la zone spécifiée sans essayer de conserver le rapport hauteur / largeur d'origine. Une distorsion peut
se produire.
Démarrage automatique
Pour lire le film automatiquement lorsque le visiteur du site ouvre la page, sélectionnez Démarrage automatique.
Boucle
Pour rejouer le film à la fin, sélectionnez Boucle.
Afficher le menu complet
Lorsqu'elle est cochée, elle affichera le menu complet, permettant à l'utilisateur une variété d'options pour améliorer ou contrôler la lecture. Lorsqu'elle n'est
pas cochée, elle affichera uniquement un menu contenant uniquement l'option Paramètres et l'option À propos de Flash.
Mode fenêtre
Spécifie le mode fenêtre du flash. Sélectionner Transparent si vous souhaitez afficher l'animation flash avec transparence. Sinon
sélectionnez Fenêtre ou Opaque.
120
WYSIWYGWeb Builder 16
Autoriser l'accès au script
Le paramètre AllowScriptAccess de Flash Player contrôle la capacité à exécuter des scripts sortants à partir d'un SWF Flash.
Lorsque AllowScriptAccess est "jamais", les scripts sortants échouent toujours. Lorsque
AllowScriptAccess est "toujours", les scripts sortants réussissent toujours.
Lorsque AllowScriptAccess est "samedomains", le script sortant ne réussira que dans le même domaine.
Autoriser le plein écran
Activez cette option pour permettre l'affichage en plein écran de l'application Flash. Cette option est prise en charge par Flash
9.0 ou supérieur.
Variables Flash
Les variables Flash (FlashVars) constituent un moyen de transmettre des données ou des variables du html à une application Flash. FlashVars est pris
en charge par Flash Player 6 et plus récent. Veuillez consulter la documentation de l'application Flash pour plus de détails.
121
WYSIWYGWeb Builder 16
Lecteur vidéo WWB
Cet objet s'appelait auparavant Flash Video Player. Cependant, la plupart des navigateurs ne prennent plus en charge Flash, ce qui rend l'utilisation
de Flash Video peu fiable sur les sites Web modernes.
Le lecteur vidéo WWB utilise désormais la fonctionnalité de lecteur vidéo HTML5 standard du navigateur.
Général
Vidéo
Spécifie la vidéo à lire.
Image
Spécifie l'image «teaser». Ceci sera affiché si la vidéo n'est pas en cours de lecture.
Titre
Spécifie le titre de la vidéo. Cela sera affiché dans le lecteur si l'utilisateur clique sur le bouton «Info».
La description
Spécifie la description de la vidéo. Cela sera affiché dans le lecteur si l'utilisateur clique sur le bouton «Info».
Démarrage automatique
Pour lire le film automatiquement lorsque le visiteur du site ouvre la page, sélectionnez Démarrage automatique.
Boucle
Pour rejouer le film à la fin, sélectionnez Boucle.
Afficher le bouton d'informations
Spécifie si le bouton «Info» doit être affiché dans la barre de contrôle.
Afficher le bouton plein écran
Spécifie si le bouton «Plein écran» doit être affiché dans la barre de contrôle.
Afficher le bouton d'échelle
Spécifie si le bouton «Echelle» doit être affiché dans la barre de contrôle.
Afficher les commandes de volume
Spécifie si les commandes de volume doivent être affichées dans la barre de commandes.
Afficher l'heure
Spécifie si l'heure doit être affichée dans la barre de contrôle.
Afficher le grand bouton de lecture
Spécifie si le grand bouton de lecture doit être affiché au centre du lecteur.
122
WYSIWYGWeb Builder 16
HTML
Cet objet peut être utilisé pour insérer du code HTML personnalisé ou du JavaScript.
Lorsque vous ajoutez du HTML à l'aide de cet objet, il sera placé à l'emplacement où vous avez positionné l'objet.
La description
Ceci n'est utilisé que pour l'affichage dans Web Builder. Cela peut vous aider à identifier le bloc de code que vous avez ajouté.
le Type property spécifie comment et où le code HTML sera inséré dans la page.
•
N'utilisez pas <div>
Sélectionnez cette option pour insérer le code HTML «TEL QUEL», sans informations de taille et de position.
•
Utilisez <div> pour définir la position et la taille du HTML
Sélectionnez cette option pour insérer le code HTML dans un conteneur DIV avec la taille et la position.
<style div: gauche: 10px; haut: 10px; largeur: 200px; hauteur: 200px; position: absolue ">
<- votre html ->
</div>
•
Début de la page
Le HTML sera inséré avant tout autre code sur la page.
<- votre html ->
<! doctype html>
<html>
<head>
•
Entre les balises <head> </head>
Le HTML sera inséré entre les balises <head> </head>.
<head>
...
<- votre html ->
</head>
•
À l'intérieur de la balise <body>
Le HTML sera inséré à l'intérieur des balises <body>.
<corps attribut = valeur >
•
Après la balise <body>
Le HTML sera inséré après les balises <body>.
<body>
<- votre html ->
...
</body>
•
Avant </body>
<body>
...
<- votre html ->
</body>
•
Fin de page
<body>
...
</body>
<- votre html ->
•
Balise intérieure <html>
<html votre html >
•
CSS dans la requête multimédia
Cette option permet d'ajouter des styles CSS spécifiques aux points d'arrêt. Cela peut être utile si vous avez besoin de styles différents dans
les points d'arrêt.
123
WYSIWYGWeb Builder 16
Débordement
Ce débordement peut être utilisé pour contrôler le comportement de débordement de la couche.
•
Aucun
Le contenu de l'objet HTML est entièrement visible. Aucun écrêtage ne se produira. Caché
•
Le contenu est tronqué, mais le navigateur n'affiche pas de barre de défilement pour voir le reste du contenu.
•
Faire défiler
Le contenu est tronqué, mais le navigateur affiche une barre de défilement pour voir le reste du contenu. Auto
•
Si le contenu est tronqué, le navigateur affichera une barre de défilement pour voir le reste du contenu.
HTML
Entrez votre code HTML personnalisé ici.
Remarques:
1.
Pour la plupart des objets, vous pouvez également ajouter du HTML supplémentaire avant, à l'intérieur ou après le HTML généré
automatiquement. Sélectionnez un objet et sélectionnez Edition-> HTML dans le menu Web Builder.
2.
Pour ajouter du HTML supplémentaire avant, à l'intérieur ou après les balises HEAD et BODY, sélectionnez Affichage-> Page HTML dans le menu Web
Builder.
3.
Si vous avez besoin d'ajouter du HTML «global» à votre page, il est préférable de l'ajouter en utilisant l'option HTML de la page.
124
WYSIWYGWeb Builder 16
Java
Les applets Java sont un moyen efficace d'ajouter du son et des animations, tels que des messages de défilement et d'autres effets sympas, à une page. Les applets Java
sont des applications indépendantes de la plate-forme avec des fichiers de taille compacte. La plupart des navigateurs sont compatibles Java, les visiteurs du site n'ont donc
pas besoin de plug-ins spéciaux pour exécuter une applet Java. L'objet Java permet d'insérer facilement des applets Java dans votre page et de définir leurs propriétés.
Pour choisir les paramètres de propriétés appropriés, vous devez être familiarisé avec Java avant d'ajouter ces types de fichiers d'application à
votre site.
125
WYSIWYGWeb Builder 16
Cadre en ligne
Inline Frame ou un iframe vous permet d'ouvrir de nouvelles pages à l'intérieur des pages principales. Les cadres en ligne sont également appelés cadres
flottants.
Général
Nom
Utilisé pour définir un nom pour le cadre en ligne.
Lié à
Site Internet: afficher une page d'un site Web externe. Syntaxe: http://www.google.com
Page Web interne: afficher une des pages de votre site Web.
Cliquez sur «Sélectionner» pour choisir une page. La fenêtre Sélectionner une page affichera toutes les pages qui font partie du projet de site Web en cours.
Web Builder créera automatiquement pour corriger l'URL (relative) lorsque vous publiez vos pages.
Afficher la bordure
Utilisé pour spécifier s'il faut ou non une bordure pour le cadre en ligne.
Barres de défilement
Utilisé pour spécifier si le cadre en ligne doit avoir une capacité de défilement ou non. Valeurs possibles: si nécessaire, jamais ou
toujours.
Texte alternatif
Ce texte sera affiché par les navigateurs qui ne prennent pas en charge les cadres en ligne.
Activer le correctif Safari Mobile
Cela implémente une solution de contournement pour les cadres en ligne ignorant la hauteur spécifiée sur l'iPhone / iPad.
Boite à lumière
L'option Lightbox permet d'afficher une autre page dans une lightbox (en utilisant FancyBox) après avoir cliqué sur une image d'aperçu. Vous
pouvez spécifier l'image d'aperçu, le titre de la lightbox et la largeur / hauteur de la lightbox.
Boîte ombre
Configurez l'ombre de la boîte (également appelée ombre portée) pour le cadre en ligne. Cette fonctionnalité nécessite un navigateur compatible CSS3.
Cela ne fonctionnera pas en combinaison avec la fonction Lightbox.
Voir aussi ce tutoriel en ligne:
http://www.wysiwygwebbuilder.com/iframe.html
126
WYSIWYGWeb Builder 16
Couche
Les calques peuvent être utilisés pour créer des mises en page avancées. Un calque est un conteneur pour d'autres objets. Les objets peuvent
être glissés et déposés sur un calque comme sur un formulaire.
Certaines des fonctionnalités intéressantes des calques sont:
•
0 ... 100% de transparence
•
Afficher / Masquer un calque (et tous ses objets contenus) à l'aide du gestionnaire de calques ou via des événements. Positionner et dimensionner un
•
calque relativement
•
Positionnez un calque absolu sur la bordure droite et / ou inférieure de la fenêtre du navigateur. Plusieurs options de
•
répétition et d'alignement d'arrière-plan.
•
Mode calque collant, garde un calque visible à tout moment.
Opacité
Modifiez la transparence (0 - 100%) du calque (et de tous ses enfants).
Dimensionnement de la boîte
La propriété box-sizing est utilisée pour indiquer au navigateur ce que les propriétés de dimensionnement (largeur et hauteur) doivent inclure. Doivent-ils
inclure la zone de bordure ou simplement la zone de contenu (qui est la valeur par défaut)? be L'option 'border-box' est particulièrement utile pour les
calques pleine largeur, où vous voulez généralement la bordure à l'intérieur du port de vue. Avec content-box, la taille de la bordure sera ajoutée à la
largeur totale (> 100%).
HTML5 sémantique
Spécifie s'il faut utiliser des balises HTML5 sémantiques au lieu de <div> génériques. Options disponibles: <article>, <aside>, <footer>,
<header>, <nav>, <section>.
Débordement
Ce débordement peut être utilisé pour contrôler le comportement de débordement de la couche.
•
Aucun
Le contenu du calque est entièrement visible. Dans ce cas, la taille du calque ne peut pas être inférieure au contenu.
•
Caché
Le contenu est tronqué, mais le navigateur n'affiche pas de barre de défilement pour voir le reste du contenu.
•
Faire défiler
Le contenu est tronqué, mais le navigateur affiche une barre de défilement pour voir le reste du contenu. Cela peut être utile pour créer du
contenu défilable sans avoir besoin d'un cadre en ligne!
•
Auto
Si le contenu est tronqué, le navigateur affichera une barre de défilement pour voir le reste du contenu.
Remarque:
Pour créer / mettre à jour le contenu du calque, vous devez le redimensionner dans le concepteur afin que tous les objets soient visibles. Après avoir créé / mis à jour
la mise en page, vous pouvez redimensionner le calque à la taille souhaitée. Vous ne pouvez pas faire défiler le contenu de la couche dans Web Builder.
127
WYSIWYGWeb Builder 16
Mode couche
Le calque a 3 modes. le Défaut mode, Couche collante Mode et un En-tête / pied de page mode.
En mode par défaut, le calque sera positionné à l'emplacement où vous l'avez placé pendant la conception. Si le mode Sticky Layer garde un
calque visible (haut / bas / gauche / droite) à tout moment. Cela peut être utile si vous souhaitez garder un menu ou une image visible même si la
page défile. L'animation est également une option!
le En-tête / pied de page Le mode peut être utile si vous utilisez le calque comme en-tête ou pied de page pour votre page, généralement en combinaison
avec l'option «redimensionnement horizontal relatif».
Normalement, le 'redimensionnement horizontal relatif' (et les autres options relatives) ajoutera le code après le conteneur <body> résultant en un
z-index plus élevé. La sélection du mode `` En-tête / pied de page '' insérera le code
avant le conteneur <body>, la couche sera donc derrière tous les autres contenus.
Il y a aussi le Couche d'ancrage mode qui vous permet d'ancrer un calque sur un côté spécifique de l'écran ou au centre de l'écran. La principale
différence entre ce mode et le mode de couche collante est que le mode de couche d'ancrage n'utilise pas JavaScript, mais utilise des techniques
CSS standard. C'est juste une autre façon d'utiliser les calques et ce mode peut également être utile pour les en-têtes et les pieds de page d'une
page entière.
Avec Couche ancrée vous pouvez ancrer un ou plusieurs côtés du calque aux côtés de la page. Par exemple, si vous activez «Ancrage à gauche»
et «Ancrage à droite», le calque s'étirera si vous redimensionnez la fenêtre du navigateur (le décalage vers la bordure de page gauche et droite
restera le même). Mais vous pouvez également ancrer une seule bordure (ou la totalité).
Couche flottante Le mode est destiné à une utilisation avancée. Cela rendra le calque «flottant» au lieu d'avoir une position fixe. Si plusieurs
calques flottants sont placés sur la page, ils seront placés les uns à côté des autres (de gauche à droite) en fonction de l'espace disponible sur
l'écran. Si le calque ne tient pas sur la ligne actuelle, il sera enveloppé dans la ligne suivante. Cette fonctionnalité peut être utile (pour les
utilisateurs avancés) pour créer des sites Web réactifs.
L'option Mode flottant peut être utilisé pour contrôler le 'comportement flottant':
•
Défaut
Le calque sera positionné sur le côté droit de l'objet flottant précédent. Si l'objet ne tient pas sur la ligne actuelle, il
passera à la ligne suivante.
•
Effacer à gauche
Le calque sera forcé à la ligne suivante. Le calque peut avoir d'autres objets sur le côté droit de la ligne (sauf si le prochain objet
flottant est également défini pour effacer à gauche).
•
Pleine largeur
Le calque utilisera toute la largeur (100%) de la page. Aucun autre objet ne peut être sur la même ligne. Ce mode peut être utile pour les
en-têtes ou les pieds de page.
•
Plein écran
Cela définira la largeur / hauteur du calque à 100% du port d'affichage actuel. Cela peut être utile pour créer des sites Web plein écran /
page unique. Important: vous devez également définir l'alignement de la page sur 'Définir la largeur et la hauteur de la page à 100%'
sinon le calque n'utilise pas 100% de la hauteur de la fenêtre du navigateur !!!
Tutoriel en ligne associé: http://www.wysiwygwebbuilder.com/fullscreen.html
•
Couche modale Le mode positionnera le calque au-dessus de tout. Les autres éléments de la page seront désactivés jusqu'à ce que vous
fermiez le calque. Activer Backdrop, spécifie si la superposition d'arrière-plan est activée. Fermer en cas d'échappement, spécifie si le fait
d'appuyer sur la touche 'esc' fermera la couche modale. .
Type modal, jQuery UI (comme dans la version précédente de WWB) ou Bootstrap. Contrairement à l'option d'interface utilisateur jQuery, Bootstrap est
réactif, la couche peut donc avoir une taille différente en points d'arrêt! De plus, Bootstrap utilise le titre de la couche dans l'en-tête.
UNE Couche de panneau est initialement invisible, mais peut glisser du côté droit ou gauche de la page en utilisant des événements (afficher /
masquer). Afficher, spécifie la relation entre le panneau et le contenu de la page. "Push" pousse la page dessus et "overlay" affiche le calque sur
le contenu. Ignorable, spécifie si le panneau peut être fermé en cliquant à l'extérieur sur la page.
128
WYSIWYGWeb Builder 16
Mode par défaut
Position horizontale / verticale relative
Au lieu d'utiliser des coordonnées absolues, la position du calque sera désormais relative à la taille de la page. Cette propriété n'a d'effet
que lorsque la page est affichée dans le navigateur!
Dimensionnement relatif horizontal / vertical
Au lieu d'utiliser des dimensions absolues, la largeur / hauteur du calque sera désormais relative à la taille de la page. Cette propriété n'a d'effet
que lorsque la page est affichée dans le navigateur!
Droite
Définit la position de l'objet par rapport au bord droit de la page. Cela remplacera l'attribut «gauche».
Bas
Définit la position du bas de l'objet par rapport au bas de la page. Cela remplacera l'attribut «top».
Alignement
Spécifie l'alignement du contenu du calque si le dimensionnement horizontal relatif est activé.
•
La gauche
Le contenu sera aligné à gauche (par défaut).
•
Centre
•
Droite
•
Centrer dans la fenêtre du navigateur (plein écran flottant uniquement)
Le contenu sera centré.
Le contenu sera aligné à droite.
Cette option centrera le contenu horizontalement et verticalement dans la fenêtre. Cette option n'est utile que pour le mode plein écran
flottant. Notez que lorsque la fenêtre d'affichage est plus petite que le contenu, le navigateur ajoute des barres de défilement! Pour éviter
cela, vous pouvez ajouter des points d'arrêt pour optimiser la disposition des fenêtres plus petites.
•
Contenu extensible (obsolète, veuillez utiliser la grille de mise en page à la place!)
Cela positionnera et dimensionnera l'objet enfant par rapport au calque.
Diviseurs
Les diviseurs de formes sont des formes basées sur SVG qui peuvent être utilisées pour séparer les sections d'une page.
Vous pouvez choisir parmi plus d'une douzaine de formes, mais vous pouvez également ajouter des fichiers SVG de forme personnalisée. Des
séparateurs de formes peuvent être ajoutés en haut ou en bas (ou les deux) d'un calque. le Orientation La propriété détermine le côté
actuellement modifié. Par exemple, si vous souhaitez définir un séparateur en bas, sélectionnez d'abord «bas», puis définissez les propriétés. Si
le type est défini sur aucun, le diviseur sera désactivé. La couleur spécifie la couleur de la forme. La largeur spécifie la largeur en pourcentages,
cela peut être utile si vous ne souhaitez afficher qu'une partie plus petite de la forme, par exemple 200%, coupe la partie gauche et droite de la
forme. La hauteur est en pixels. Les formes peuvent être retournées horizontalement / verticalement. Cela permet d'utiliser des formes qui ont été
conçues pour être utilisées en haut, également en bas (retournement vertical). La propriété arrangement contrôle si la forme sera affichée sous le
contenu ou au-dessus du contenu.
Les diviseurs de formes sont des fichiers SVG et sont stockés dans le dossier «diviseurs» du dossier de l'application.
Tutoriel en ligne: https://www.wysiwygwebbuilder.com/shape_dividers.html
129
WYSIWYGWeb Builder 16
Couche de survol
Un calque RollOver fonctionne exactement comme l'image RollOver, mais au lieu de simplement des images, vous pouvez désormais utiliser n'importe quel type d'objets. En
plus du mode fixe (où vous pouvez placer l'objet où vous le souhaitez), l'objet prend également en charge le mode flottant afin qu'il puisse être utilisé dans les grilles de mise en
page.
130
WYSIWYGWeb Builder 16
Grille de mise en page
La grille de mise en page peut être utilisée pour créer des mises en page flexibles à plusieurs colonnes qui s'adaptent automatiquement à la taille de l'écran.
Une grille peut avoir jusqu'à 12 colonnes, avec des tailles en pourcentages. Les objets qui sont glissés sur une grille deviendront automatiquement flottants, ce
qui signifie qu'ils sont placés les uns à côté des autres (de gauche à droite) en fonction de l'espace disponible. Si l'objet ne tient pas sur la ligne actuelle, il sera
renvoyé à la ligne suivante. Certains objets (comme les images, le texte, le blog, la galerie de photos) peuvent être pleine largeur, ils occupent donc toujours
toute la ligne et s'étirent ou se rétrécissent lorsque la taille de la page change. Pour les écrans plus petits (mobiles), toutes les colonnes sont empilées en
fonction du point d'arrêt défini. C'est une excellente nouvelle façon de créer des mises en page flexibles et réactives (de type Bootstrap)!
Disposition
La grille peut être configurée comme une disposition fixe ou fluide. Une grille fixe aura des colonnes fixes basées sur la largeur au moment du design de la grille.
La présentation sera centrée dans la fenêtre. Une grille fluide utilise toute la largeur de la fenêtre du navigateur et toutes les colonnes seront redimensionnées en
conséquence.
Largeur de la gouttière
La largeur de la gouttière spécifie l'espacement de chaque côté (gauche / droite) d'un poteau.
Rembourrage
Le remplissage (haut / bas) peut être utilisé pour créer un espacement en haut ou en bas de la grille de mise en page.
Point d'arrêt
Le point d'arrêt spécifie la largeur de la fenêtre à laquelle la mise en page passera à la mise en page mobile / empilée.
Largeur maximale
Spécifie la largeur maximale de la grille de disposition dans la fenêtre du navigateur. Cela peut être utile pour éviter que les éléments ne
soient trop étirés. Si la fenêtre du navigateur est plus large que la largeur spécifiée, la grille sera centrée.
Hauteur de la colonne
La hauteur de colonne spécifie si la hauteur des colonnes de la grille est variable, fixe ou plein écran.
•
Auto
la hauteur de la colonne dépend du contenu à l'intérieur de la grille. fixé
la hauteur de la colonne est fixe. Si la colonne a un arrière-plan, la colonne entière sera remplie. 100vh
•
la hauteur de la colonne correspond à 100% de la hauteur de la fenêtre (plein écran).
131
WYSIWYGWeb Builder 16
HTML5 sémantique
Spécifie s'il faut utiliser des balises HTML5 sémantiques au lieu de <div> génériques. Options disponibles: <article>, <aside>, <footer>,
<header>, <nav>, <section>.
Système de grille
Cela spécifie que le système de grille sera utilisé.
•
Défaut
Cela utilisera une grille de type Bootstrap. Cette grille est compatible avec tous les navigateurs modernes.
•
•
Flexbox
Lorsque cette option est activée, la grille utilisera la disposition CSS flexbox. Cela se traduit par un code plus propre et permet également certaines
fonctionnalités supplémentaires telles que l'alignement vertical et toute la colonne sera remplie avec l'arrière-plan.
Notez qu'il s'agit d'une nouvelle fonctionnalité CSS relative, elle n'est pas prise en charge par les anciens navigateurs (<IE11).
http://caniuse.com/#feat=flexbox
•
Grille CSS
Cela utilisera la disposition de grille native de CSS. Notez que cela n'est pris en charge que par les navigateurs modernes. Il n'est pas pris en charge par
Internet Explorer et les anciens navigateurs mobiles!
https://caniuse.com/#search=grid%20layout
Débordement
La propriété 'overflow' détermine ce qui se passe lorsque les colonnes qui ne rentrent pas dans la ligne actuelle. Par exemple, si vous avez plus de colonnes dans la
vue par défaut que dans les points d'arrêt. Les colonnes de débordement peuvent être masquées, à 100% ou avoir une valeur personnalisée.
Remarque: la valeur du point d'arrêt remplace la valeur de dépassement. Cela signifie que même si vous avez défini la colonne sur le dépassement de capacité, elles
ne seront pas visibles pour les colonnes empilées (si la fenêtre est inférieure au point d'arrêt).
Si vous avez besoin d'un comportement différent, définissez la valeur du point d'arrêt sur un niveau bas (afin qu'elle ne soit pas déclenchée) et implémentez un point d'arrêt
avec des valeurs de dépassement personnalisées.
Position
La position d'une grille de mise en page peut être flottante (par défaut) ou fixe. Une fois fixée, la grille de mise en page sera fixée en haut de
la page. Cela peut être utile pour créer un en-tête de page toujours visible.
Dans la version 15, nous avons ajouté les options de position suivantes:
•
Pied de page (fixe)
Cela permet d'utiliser une grille de mise en page comme pied de page fixe. Cela fonctionne également avec les pages maîtres.
•
Pied de page (flottant)
Cela permet d'utiliser une grille de mise en page comme pied de page flottant. La grille de mise en page sera toujours le dernier élément de la page. Cela
fonctionne également avec les pages maîtres.
•
Gluant
Une grille de mise en page collante est traitée comme un élément relativement positionné jusqu'à ce qu'elle atteigne le haut, point auquel elle adhère
au sommet. Navigateurs pris en charge: https://caniuse.com/#feat=css-sticky
132
WYSIWYGWeb Builder 16
Ajouter des objets
Pour ajouter des objets à la grille de mise en page, faites simplement glisser et déposez l'objet dans une colonne. La colonne sera mise en surbrillance pour
indiquer où l'objet sera ajouté. Notez que le curseur de la souris doit être à l'intérieur de la colonne.
Tutoriels en ligne connexes:
http://www.wysiwygwebbuilder.com/layoutgrid_part1.html
http://www.wysiwygwebbuilder.com/layoutgrid_part2.html
http://www.wysiwygwebbuilder.com/layoutgrid_advanced.html
Remarques:
Certains objets ne peuvent pas faire partie d'une grille de mise en page car ils ne peuvent pas être étirés automatiquement. Par exemple: Calques, Formulaires,
Onglets, Accordéon. Ce comportement peut changer dans les futures mises à jour.
Bien que vous ne puissiez pas faire glisser un formulaire sur une grille de disposition, la grille elle-même peut être un formulaire!
En outre, un calque et un carrousel peuvent être définis sur «flottant», afin qu'ils puissent être utilisés avec la grille de mise en page sur la même page.
N'utilisez pas «Centrer dans la fenêtre du navigateur» (propriétés de la page). Cette option ne doit être utilisée que pour le contenu fixe.
Vous ne pouvez pas modifier la taille ou la position de la grille de mise en page. La taille de la grille dépend de son contenu. La position de la grille
est «flottante» et elle sera automatiquement positionnée après l'objet flottant précédent.
Vous pouvez définir l'arrière-plan des colonnes individuelles dans les propriétés: Sélectionnez la colonne et cliquez sur «Modifier». Notez cependant
que l'arrière-plan ne sera appliqué que lorsque la colonne aura du contenu. Si la colonne a un espace vide, cet espace n'aura pas d'arrière-plan. Il
s'agit d'un comportement HTML / CSS standard. Pour contourner le problème, vous pouvez activer l'option «Hauteur fixe» qui donnera aux colonnes
une hauteur fixe.
Les cadres maîtres et les objets maîtres ne peuvent pas être utilisés en combinaison avec la grille de mise en page. Les cadres / objets maîtres ont été conçus
pour être utilisés uniquement avec une mise en page fixe.
133
WYSIWYGWeb Builder 16
Conteneur flexible
Flexbox est un nouveau mode de mise en page CSS qui introduit un moyen puissant de disposer, d'aligner et de distribuer des objets. Flexbox se compose de conteneurs
flexibles et d'éléments flexibles.
Les éléments flexibles (les objets à l'intérieur d'un conteneur flexible) peuvent être disposés horizontalement ou verticalement, alignés et distribués de différentes
manières. Il est également possible d'étirer ou de réduire les objets pour remplir l'espace vide disponible. Outre les paramètres dans le conteneur flex, chaque objet
a également ses propres paramètres flexbox qui peuvent être définis via Menu-> Organiser-> Flexbox.
Direction du flex
La propriété flex-direction spécifie la direction des éléments flexibles à l'intérieur du conteneur flex.
•
rangée
•
rangée inversée
•
colonne
•
colonne inversée
La valeur par défaut de flex-direction est row (de gauche à droite, de haut en bas).
Les éléments flexibles seront disposés de droite à gauche.
Les éléments flexibles seront disposés verticalement.
Identique à la colonne, mais inversé.
Notez que si vous changez la direction de la page dans les propriétés de la page de droite à gauche (rtl), toutes les directions seront
réservées!
Emballage flexible
La propriété flex-wrap spécifie si les éléments flex doivent être enveloppés ou non, s'il n'y a pas assez de place pour eux sur une ligne flex.
•
Nowrap
•
emballage
Les articles flexibles ne seront pas emballés.
Les articles flexibles seront emballés si nécessaire.
Justifier le contenu
La propriété justify-content aligne horizontalement les éléments du conteneur flexible lorsque les éléments n'utilisent pas tout l'espace disponible sur
l'axe principal.
•
flex-start
•
extrémité flexible
•
centre
•
l'espace entre
Les articles sont positionnés au début du conteneur.
Les articles sont positionnés à l'extrémité du conteneur.
Les articles sont positionnés au centre du conteneur.
Les éléments sont positionnés avec un espace entre les lignes.
•
espace autour
Les éléments sont positionnés avec un espace avant, entre et après les lignes.
Aligner les éléments
La propriété align-items aligne verticalement les éléments du conteneur flexible lorsque les éléments n'utilisent pas tout l'espace disponible sur l'axe
transversal.
•
flex-start
•
extrémité flexible
Les articles sont positionnés en haut du conteneur.
Les articles sont positionnés au fond du conteneur.
•
centre
•
étendue
Les articles sont positionnés au centre du conteneur (verticalement).
Les articles sont étirés pour s'adapter au conteneur.
134
WYSIWYGWeb Builder 16
Aligner le contenu
La propriété align-content modifie le comportement de la propriété flex-wrap. Il est similaire à align-items, mais au lieu d'aligner les éléments
flexibles, il aligne les lignes flex.
•
flex-start
•
extrémité flexible
•
centre
•
l'espace entre
•
espace autour
•
étendue
Les lignes sont emballées vers le début du conteneur flexible.
Les lignes sont emballées vers la fin du conteneur flexible.
Les lignes sont emballées vers le centre du conteneur flexible.
Les lignes sont uniformément réparties dans le conteneur flexible.
Les lignes sont uniformément réparties dans le conteneur flexible, avec des espaces de demi-taille à chaque extrémité.
Les lignes s'étirent pour occuper l'espace restant.
Taille
Le mode de taille détermine si la hauteur du conteneur sera incluse ou non.
•
indéfini
•
fixé
Lorsque la taille n'est pas définie, la hauteur sera déterminée par les éléments flexibles (contenu).
Lorsque la taille est fixée, la hauteur au moment du design sera utilisée. Cela peut être utile si vous souhaitez aligner verticalement des
objets.
Largeur maximale
Spécifie la largeur maximale du conteneur flexible dans la fenêtre du navigateur. Cela peut être utile pour éviter que les éléments ne
soient trop étirés. Si la fenêtre du navigateur est plus large que la largeur spécifiée, le conteneur flex sera centré.
Tutoriel connexe:
http://www.wysiwygwebbuilder.com/flexbox.html
135
WYSIWYGWeb Builder 16
Grille flexible
La Flex Grid est une nouvelle façon de créer des mises en page flexibles basées sur CSS Grid Layout ( https://www.w3schools.com/css/css_grid.asp ). La
disposition de grille CSS permet aux développeurs Web de créer des mises en page Web réactives complexes plus facilement et de manière cohérente sur
tous les navigateurs. 'CSS Grid Layout' est un système de grille bidimensionnel natif de CSS. Il ne repose pas sur des flotteurs ou d'autres hacks. Il en résulte
un code propre et un code fiable.
Remarque: pour éviter toute confusion avec l'objet 'Layout Grid' existant (basé sur Bootstrap), nous avons nommé le nouvel objet 'Flex Grid', car
il s'agit d'une combinaison de CSS Grid Layout et de Flexbox.
L'idée derrière la disposition en grille est de diviser une page Web en colonnes et en lignes. Les colonnes et les lignes ont des zones nommées dans lesquelles vous
pouvez faire glisser et déposer des objets. La définition de la disposition peut être différente en points d'arrêt. Chaque zone de grille prend en charge son propre
remplissage, son alignement (flexbox), sa bordure et son style d'arrière-plan.
Flex Grid dispose d'un éditeur de grille afin que vous puissiez définir visuellement la disposition (zones de grille) et le comportement de la grille.
Mode facile
De nombreux utilisateurs ont demandé un moyen plus simple de contrôler la flexgrid sans avoir à gérer la flexbox. En «Mode facile», la grille flex se
comporte comme la grille de mise en page.
Pour rendre cela possible, le mode Facile définira automatiquement les paramètres suivants:
•
les éléments de bloc (pleine largeur = true) seront définis sur flexgrow = 1, flexshrink = 1, flexbasis = 100% inline-block (full width
•
= false) seront définis sur flexgrow = 0, flexshrink = 0, flexbasis = vide Chaque flex l'élément sera défini sur:
•
direction de flex = mode
d'enroulement de ligne = enroulement
justifier le contenu sera remplacé par l'alignement horizontal: les éléments d'alignement gauche / centre /
droit seront remplacés par l'alignement vertical: haut / milieu / bas align-content: non utilisé
Notez que vous pouvez toujours revenir en «mode avancé» si vous savez comment utiliser flexbox et avez besoin de plus de contrôle.
Éditeur de grille
Double-cliquez sur la grille flexible pour ouvrir l'éditeur de grille.
Colonnes / lignes
Spécifie le nombre de lignes / colonnes dans la grille.
Écart de colonne / ligne
Spécifie la taille de l'écart entre les lignes / colonnes dans une disposition de grille.
Largeur maximale
Spécifie la largeur maximale de la grille flexible dans la fenêtre du navigateur. Cela peut être utile pour éviter que les éléments ne soient
trop étirés. Si la fenêtre du navigateur est plus large que la largeur spécifiée, la grille sera centrée.
Exemples
Ce menu déroulant contient quelques exemples de mises en page, qui peuvent être utilisés comme modèle pour vos propres mises en page. La sélection d'un
élément dans la liste écrasera les paramètres actuels.
Les propriétés suivantes seront affichées en fonction de la sélection actuelle dans l'éditeur de grille.
136
WYSIWYGWeb Builder 16
Propriétés de l'article
Cliquer sur une cellule à l'intérieur de la grille affichera les propriétés de la zone sélectionnée (en-tête, pied de page, barre latérale, etc.).
Nom
Spécifie le nom de la zone sélectionnée. Ce nom doit être unique pour chaque zone. Par exemple: en-tête, pied de
page, barre latérale, contenu, navigation.
Seules les cellules de grille contiguës peuvent avoir le même nom. Il ne peut donc pas y avoir deux barres latérales (gauche / droite) avec le même nom. Un élément de la
grille peut également être vide. Pour créer un élément de grille vide, utilisez un point comme nom.
Début de colonne
Spécifie sur quelle ligne de colonne l'élément commencera.
Fin de colonne
Spécifie sur quelle ligne de colonne l'élément se terminera. Cette valeur doit être supérieure à la valeur de départ.
Début de ligne
Spécifie sur quelle ligne de ligne l'élément commencera.
Fin de ligne
Spécifie sur quelle ligne de ligne l'élément se terminera. Cette valeur doit être supérieure à la valeur de départ.
Aligner le contenu, aligner les éléments, justifier le contenu, Flex Wrap, Flex Direction
Fondamentalement, chaque élément de la grille est un conteneur flexible, il prend donc en charge les mêmes propriétés d'alignement que l'objet Flex
Container! Pour une description de ces propriétés, veuillez consulter: Flex Container. Tutoriel connexe: http://www.wysiwygwebbuilder.com/flexbox.html
Afficher les étiquettes
Spécifie s'il faut afficher les noms des éléments de la grille dans l'espace de travail. Cela n'affecte pas la page publiée.
Propriétés de la colonne
Cliquez sur l'en-tête horizontal de la grille pour afficher les propriétés de la colonne sélectionnée.
La largeur de la colonne est soit une valeur unique, soit une plage (min / max). Activez useminmax () pour activer la plage.
Les tailles peuvent être définies en pixels, en pourcentages ou en unité «fr». La valeur Min peut avoir une unité de taille différente de la taille Max. Par
exemple, la valeur minimale peut être en pixels et la valeur maximale un facteur flex (fr).
«fr» signifie «fraction de l'espace disponible». Vous pouvez considérer cela comme des pourcentages d'espace disponible après avoir supprimé les
colonnes / lignes de taille fixe et basées sur le contenu. Cela vous permet de créer une mise en page qui n'était auparavant pas possible avec le HTML /
CSS standard! Par exemple, lors de l'utilisation de 1fr, 40px, 20%, la colonne de droite est 20%, la colonne centrale est de 40px et l'espace restant (colonne
de gauche) est utilisé par 1fr. La hauteur de la ligne est généralement définie en «pixels» ou «auto», où la hauteur est définie par le contenu.
Se déplacer à gauche
Déplacez la colonne sélectionnée vers la gauche.
Déplacer vers la droite
Déplacez la colonne sélectionnée vers la droite.
137
WYSIWYGWeb Builder 16
Propriétés de la ligne
Cliquez sur l'en-tête vertical de la grille pour afficher les propriétés de la ligne sélectionnée.
La hauteur de la ligne est soit une valeur unique, soit une plage (min / max). Activez useminmax () pour activer la plage.
Les tailles peuvent être définies en pixels, en pourcentages, en unité «fr» ou en auto.
La hauteur de ligne est généralement définie en «pixels» ou «auto», où la hauteur dépend du contenu.
Déplacer vers le haut
Déplacer la ligne sélectionnée vers le haut.
Descendre
Déplacer la ligne sélectionnée vers le bas.
Tutoriels en ligne connexes:
http://www.wysiwygwebbuilder.com/flexgrid_part1.html
http://www.wysiwygwebbuilder.com/flexgrid_part2.html
138
WYSIWYGWeb Builder 16
Page intégrée
La page intégrée (également appelée «objets maîtres») est une fonctionnalité utile qui vous permet de réutiliser des objets d'une autre page (de votre site
Web) dans la page Web actuelle. Une page incorporée est essentiellement un pointeur vers les objets d'une autre page (par exemple, la "page maître"). Ces
objets seront incorporés dans la page exactement comme ils le sont sur la page d'origine. Vous pouvez même utiliser plusieurs objets de page maître sur une
même page. Disons que vous avez une certaine mise en page qui est la même pour toutes vos pages et que vous ne voulez pas que ce copier / coller entre
toutes vos pages; puis créez simplement la mise en page une fois dans la page et insérez la mise en page de cette page dans toutes vos autres pages en
utilisant l'objet de page incorporé. Lorsque vous souhaitez mettre à jour la mise en page, vous n'aurez à le faire qu'une seule fois dans la page d'origine.
Voici un exemple:
1. Créez un nouveau site Web, Web Builder ajoute automatiquement la première page appelée «index».
2. Insérez une nouvelle page à l'aide du Gestionnaire de site et renommez-la en «master_page».
3. Ajoutons maintenant une barre de navigation à la page maître. Insérer-> Navigation-> Barre de navigation.
4. Revenez à la page d'index (cliquez sur l'onglet d'index) et insérez un objet 'Page incorporée'.
139
WYSIWYGWeb Builder 16
5. Double-cliquez sur l'objet que vous venez d'insérer pour sélectionner une page. Cliquez ensuite sur le bouton Select pour afficher la fenêtre
Select Page et choisissez master_page dans la liste. Cliquez sur OK pour revenir à la page.
Vous remarquerez que la barre de navigation de votre master_page fait maintenant partie de la page d'index. Si vous revenez à la page
maître et que vous avez modifié quelque chose dans cette page, elle est également mise à jour automatiquement dans la page d'index. Bien
entendu, cette fonctionnalité n'est pas limitée aux barres de navigation uniquement; vous pouvez ajouter n'importe quel élément à la page
maître.
Remarques:
1.
Placez tous les objets sur la page maquette alignés sur la bordure gauche et supérieure, de sorte que vous n'ayez aucune marge.
2.
Si vous utilisez la master_page uniquement à des fins de page maître et non en tant que page autonome, vous pouvez activer "Ne pas publier cette
page" dans les propriétés de la page, de sorte que la page ne sera pas publiée lorsque l'ensemble du site Web sera publié.
3.
Contrairement aux cadres en ligne, lors de l'utilisation de l'objet Page incorporée, tous les objets de cette page sont fusionnés dans la page
actuelle comme s'ils faisaient réellement partie de la page. Vous devez cependant les modifier dans la page maître.
4.
Les objets Page incorporés ne clonent pas les propriétés d'une page! Seuls les objets de la page maître seront clonés.
5.
Étant donné que les objets sont clonés «EN L'ÉTAT», assurez-vous que les ID des objets sur la page maître sont uniques. Vous pouvez
modifier l'ID dans l'inspecteur des propriétés. C'est une bonne pratique de leur donner un préfixe, comme «master_». Cela évitera les
identifiants dupliqués sur une page.
6.
Les formulaires ne fonctionnent pas sur une page maître.
7.
Le calque peut être utilisé sur une page maître. Cependant, vous ne pouvez pas utiliser de liens internes sur cette couche. La page
8.
intégrée doit se trouver dans le même dossier que les pages que celles qui l'utilisent. Ceci est particulièrement important si vous
utilisez des liens internes, car les liens seront relatifs à la page maître, donc si la page se trouve dans un autre dossier, ils ne sont pas
valides.
9.
L'option "Utiliser le style d'état de survol pour indiquer la page actuelle" dans les outils de navigation ne fonctionnera pas en combinaison
avec les pages incorporées, car il n'y aura qu'un seul ensemble d'images pour cet objet. Les mêmes images seront utilisées sur toutes les
pages.
Incorporer en tant que couche
Lorsque l'option "Incorporer en tant que calque" est sélectionnée, tous les éléments qui composent le gabarit sont, en fait, sur un calque. Cette couche
bloquera l'accès à tous les éléments de la page "en dessous" (dans l'ordre z). Si la couche d'objets maîtres se trouve au-dessus d'un bouton ou d'un lien,
les visiteurs de votre site ne pourront pas cliquer sur le bouton ou le lien même s'il est visible.
Lorsque la case "Incorporer en tant que calque" n'est pas cochée, les éléments qui composent le gabarit sont insérés en tant qu'objets
individuels sur la page (pas sur un calque). Vous pouvez alors accéder à tous les objets "sous" les objets incorporés (tant qu'ils sont visibles).
140
WYSIWYGWeb Builder 16
Espace réservé au contenu
L'objet Espace réservé au contenu doit être inséré sur une page de cadre principal. Il définit où le contenu de la page sera
inséré.
Débordement
Spécifie ce qui se passera si le contenu de la page est plus grand que la taille du support de placement de contenu.
•
Développer
L'espace réservé se développera automatiquement pour que le contenu s'adapte sans avoir besoin de barres de défilement. Tous les
objets situés en dessous et sur le côté droit de l'espace réservé seront repositionnés.
•
Caché
•
Faire défiler
Le contenu qui tient dans l'espace réservé sera masqué.
Des barres de défilement seront ajoutées si le contenu ne rentre pas dans l'espace réservé.
Aligner
Spécifie comment le contenu de la page sera aligné à l'intérieur de l'espace réservé s'il est plus petit que la taille de l'espace réservé de
contenu.
Cadres maîtres
Un cadre principal est un concept de conception dans lequel votre site Web a un cadre constant et seule la partie interne des pages change. Dans
WYSIWYGWeb Builder, vous ne devez concevoir le cadre qu'une seule fois, puis le réutiliser dans toutes les autres pages. Vous pouvez même étendre
automatiquement la mise en page si le contenu est plus grand que l'espace réservé au contenu! Si le contenu est plus petit que l'assistant d'emplacement, il
existe également une option pour le centrer dans la zone.
Une page de cadre maître peut être n'importe quelle page de votre site Web. Pour indiquer la position où le contenu du cadre principal doit aller, vous
devez insérer un objet Espace réservé au contenu dans la page du cadre principal. Lors de la prévisualisation / publication, cet espace réservé de
contenu sera remplacé par le contenu réel de la page.
Pour indiquer qu'une page doit utiliser le cadre principal, vous devez le configurer dans les paramètres divers des propriétés de la page.
Le cadre principal et la page de contenu seront fusionnés en une seule page lors de la prévisualisation / publication.
Notez que le pied de page a été automatiquement repositionné car le contenu de la page était plus grand que l'espace réservé au contenu! Tous les objets
situés sous et sur le côté droit de l'objet d'espace réservé de contenu peuvent être repositionnés automatiquement. Vous pouvez également choisir d'afficher les
barres de défilement à la place.
Cadre principal avec espace réservé au contenu
Contenu de la page
141
WYSIWYGWeb Builder 16
Résultat dans la fenêtre du navigateur, le cadre maître a fusionné avec le contenu de la page.
Remarques:
•
Les objets d'un cadre maître sont clonés "EN L'ÉTAT", assurez-vous donc que les ID des objets de la page maître sont uniques.
•
Vous pouvez modifier l'ID dans l'inspecteur des propriétés. C'est une bonne pratique de leur donner un préfixe, comme master_, cela évitera la
•
Nous ne recommandons pas d'utiliser une image principale dans le cadre d'une autre image principale pour éviter les boucles infinies.
•
L'option "Utiliser le style d'état de survol pour indiquer la page actuelle" dans les outils de navigation ne fonctionnera pas en combinaison
duplication des ID sur une page.
avec les objets maîtres, car il n'y aura qu'un seul ensemble d'images pour cet objet. Les mêmes images seront utilisées sur toutes les pages.
•
Le cadre principal doit se trouver dans le même dossier que les pages que celui utilisé. Ceci est particulièrement important si vous
utilisez des liens internes, car les liens seront relatifs au cadre principal, donc si la page se trouve dans un autre dossier, ils ne sont
pas valides.
142
WYSIWYGWeb Builder 16
Pied de page
Le pied de page peut être utilisé pour ajouter un pied de page pleine largeur à votre site Web. Fondamentalement, cet objet est un calque simplifié, donc la
plupart des paramètres sont identiques et d'autres objets peuvent être glissés au-dessus de cet objet pour faire ensuite partie du pied de page. Le pied de
page sera toujours affiché au bas de la page.
Mode
Spécifie le mode de pied de page.
•
Défaut
Le pied de page sera positionné en bas de page. Notez que ce n'est pas nécessairement le bas de la fenêtre du
navigateur.
•
Fixé
•
Plein écran
Le pied de page sera fixé au bas de la fenêtre du navigateur.
Le pied de page sera masqué par défaut et deviendra visible lorsque l'utilisateur déplace la souris sur le pied de page. Ainsi, le pied de page n'est
visible que lorsque cela est nécessaire. Ce mode prend également en charge les animations pour faire glisser ou fondre le pied de page.
L'animation peut être synchronisée avec l'animation d'en-tête pour que l'en-tête et le pied de page s'affichent / se masquent en même temps.
•
Flottant
La position du pied de page dépendra d'autres objets flottants (comme des calques), mais elle sera toujours en bas.
Niveau de pile
Spécifie le niveau de pile du pied de page par rapport au contenu de la page. Le pied de page peut être "Devant le contenu" ou "Derrière
le contenu".
Le style, l'alignement et les autres options sont les mêmes que pour l'objet Layer.
143
WYSIWYGWeb Builder 16
En-tête de page
L'en-tête de page peut être utilisé pour ajouter un en-tête pleine largeur à votre site Web.
Fondamentalement, cet objet est un calque simplifié, de sorte que la plupart des paramètres sont identiques et d'autres objets peuvent être glissés au-dessus de cet objet
pour faire ensuite partie de l'en-tête.
L'en-tête sera toujours affiché en haut de la page.
Mode
Spécifie le mode d'en-tête.
•
Défaut
L'en-tête sera positionné en haut de la page. Notez que ce n'est pas nécessairement le haut de la fenêtre du navigateur.
•
Fixé
•
Plein écran
L'en-tête sera fixé en haut de la fenêtre du navigateur.
L'en-tête sera masqué par défaut et deviendra visible lorsque l'utilisateur déplace la souris sur l'en-tête. Ainsi, l'en-tête n'est visible que
lorsque cela est nécessaire. Ce mode prend également en charge les animations pour faire glisser ou fondre l'en-tête dans la vue.
•
Flottant
La position de l'en-tête dépendra d'autres objets flottants (comme les calques), mais elle sera toujours en haut.
•
Masquer au défilement
Implémente une fonctionnalité populaire dans laquelle un en-tête collant est masqué lors du défilement vers le bas et affiché lors du défilement vers le haut.
Inclut des supports pour les animations de fondu et de diapositives avec accélération.
Niveau de pile
Spécifie le niveau de pile de l'en-tête par rapport au contenu de la page. L'en-tête peut être «Devant le contenu» ou «Derrière le
contenu».
Le style, l'alignement et les autres options sont les mêmes que pour l'objet Layer.
144
WYSIWYGWeb Builder 16
Texte d'habillage
L'une des fonctionnalités les plus demandées est la possibilité d'habiller du texte autour d'images et d'autres objets. Malheureusement, cette fonctionnalité
est très compliquée à mettre en œuvre car la taille et la position du texte ne sont généralement pas exactement les mêmes dans différents navigateurs.
Les résultats avec HTML / CSS standard sont imprévisibles et non ce que vous voyez est ce que vous obtenez. Bien que les futures versions de HTML / CSS
prennent en charge plus de flexibilité, nous avons donc décidé de simuler la fonctionnalité d'encapsulation pour l'instant et lorsque les navigateurs seront prêts
pour cela, nous la convertirons au standard officiel.
«Wrapping Text» est un conteneur d'objets (tout comme un calque et un formulaire) avec du texte. Par défaut, le texte remplit toute la boîte, mais lorsque
vous faites glisser et déposez des objets à l'intérieur de l'objet 'Wrapping Text', le texte s'enroule autour de lui!
Tout le texte aura le même formatage qui peut être configuré dans les propriétés de style. Étant donné que toutes les polices ne se comportent pas de la même manière dans
différents navigateurs, nous avons ajouté une option de réglage fin de la police qui vous permet de régler avec précision la taille de la police pour obtenir les meilleurs
résultats. Assurez-vous de tester cela dans tous les navigateurs!
Hauteur de la ligne
Spécifie l'espacement des lignes entre les lignes.
145
WYSIWYGWeb Builder 16
Disposition
La disposition spécifie comment les éléments enfants sont positionnés à l'intérieur du conteneur.
•
absolu
le placement des éléments enfants se fait avec des positions absolues, ils peuvent être placés n'importe où à l'intérieur du conteneur. En
«mode absolu», l'objet Wrap Text ne peut pas être utilisé dans des mises en page flexibles, car toutes les tailles / positions sont fixes!
Remarque: lorsque cet objet a été conçu, son comportement a été inspiré par les exclusions CSS. Malheureusement, la plupart des navigateurs ne
prennent toujours pas en charge cette fonctionnalité, donc WWB simule le comportement en utilisant des positions absolues pour les segments de
texte.
•
flottant
le placement des éléments enfants est flottant, en commençant en haut à gauche (ou en haut à droite) du conteneur. Cela permet
d'habiller du texte autour d'images ou d'autres objets dans des dispositions flexibles. En «mode flottant», l'objet Wrap Text peut être
utilisé dans des grilles de mise en page ou une boîte flexible.
•
forme
Cette option ajoute un support expérimental pour la forme extérieure de CSS. Cela enroulera le texte autour du contour d'une
seule image ou forme transparente. Cela permet d'habiller du texte autour d'objets complexes plutôt que de simples boîtes
rectangulaires.
Le «mode forme» a été conçu pour fonctionner avec 1 élément enfant uniquement, car il n'existe aucun moyen en HTML d'extraire la
forme de plusieurs éléments. Ainsi, le texte ne circulera que autour du premier élément, tous les autres éléments seront ignorés!
Seuil spécifie le seuil du canal alpha utilisé pour extraire la forme de l'image. La plage est comprise entre 0 et 255. Tous les
pixels dont la valeur de la composante alpha est supérieure au seuil sont considérés comme faisant partie de la forme aux
fins de la détermination de ses limites.
Par exemple, une valeur de 128 signifie que la forme englobera tous les pixels qui sont opaques à plus de 50%. La marge
vous permet d'ajuster la distance entre les bords de la forme (l'élément flottant) et le texte environnant.
Remarque: la forme extérieure nécessite un navigateur moderne. Il fonctionne actuellement dans Safari, Chrome et FireFox, mais pas dans IE /
Edge!
Tutoriel en ligne:
https://www.wysiwygwebbuilder.com/wrap_text.html
.
146
WYSIWYGWeb Builder 16
Lecteur multimédia
Utilisez cet objet pour ajouter des fichiers multimédias à votre page. Il s'agit du moyen le plus courant d'ajouter des fichiers multimédias à votre page Web. Le lecteur
multimédia a maintenant un support intégré pour l'audio / vidéo HTML5!
Remarque importante: il n'existe actuellement aucun format audio / vidéo compatible avec tous les navigateurs. Assurez-vous de configurer des formats alternatifs pour
prendre en charge tous les navigateurs.
Type
Spécifie le type de lecteur multimédia.
•
Défaut
Si cette option est sélectionnée, le navigateur utilisera le lecteur multimédia par défaut tel que configuré dans les préférences de l'utilisateur.
Remarque: pour lire un fichier multimédia, le visiteur de votre site Web doit avoir installé le plug-in de navigateur
approprié!
•
Audio HTML5
Utilisez cette option si vous souhaitez utiliser l'audio HTML5.
•
Vidéo HTML5
Utilisez cette option si vous souhaitez utiliser la vidéo HTML5
Nom de fichier
Spécifie le nom de fichier ou l'URL de l'audio / vidéo à lire.
Démarrage automatique
Pour lire le film automatiquement lorsque le visiteur du site ouvre la page, sélectionnez Démarrage automatique.
Utilisez Plyr
Spécifie s'il faut utiliser le lecteur multimédia 'plyr' (https://plyr.io/) au lieu de l'interface utilisateur standard.
Boucle
Pour rejouer le film à la fin, sélectionnez Boucle.
Afficher les contrôles
Le cas échéant, les commandes seront affichées, comme un bouton de lecture. L'apparence réelle du lecteur dépend du type de navigateur!
Chaque navigateur rendra le joueur différemment !!!
Précharger le média
Si elle est présente, la vidéo sera chargée au chargement de la page et prête à être exécutée. Ignoré si "autoplay" est présent.
Couper le son ( s'applique uniquement à la vidéo HTML5).
Spécifie si le son doit être mis en sourdine.
Formats alternatifs ( s'applique uniquement à la vidéo HTML5).
Malheureusement, tous les navigateurs ne prennent pas en charge les mêmes formats audio / vidéo. Il n'existe actuellement aucun format qui fonctionne sur tous les
navigateurs.
Ainsi, pour vous assurer que le lecteur fonctionnera dans tous les navigateurs, vous pouvez spécifier des formats alternatifs.
Affiche
Spécifie le nom de fichier ou l'URL d'une image représentant la vidéo.
147
WYSIWYGWeb Builder 16
Youtube
L'objet YouTube offre un moyen simple d'ajouter des vidéos YouTube à vos pages.
URL
Spécifie l'URL de la vidéo YouTube. L'URL doit ressembler à ceci: http://www.youtube.com/v/x-40jgwazk0
Afficher les vidéos associées
Spécifie si afficher une liste de vidéos associées.
Jouez en mode haute qualité
Activez cette option pour lire initialement la vidéo en mode haute qualité lorsqu'elle est disponible.
Démarrage automatique
Pour lire le film automatiquement lorsque le visiteur du site ouvre la page, sélectionnez Démarrage automatique.
Boucle
Pour rejouer le film à la fin, sélectionnez Boucle.
Utilisez Plyr
Spécifie s'il faut utiliser le lecteur multimédia 'plyr' (https://plyr.io/) au lieu de l'interface utilisateur standard.
Activer le bouton plein écran.
Activez le bouton «plein écran» dans la barre de contrôle du lecteur.
Masquer le contrôle vidéo après le début de la lecture de la vidéo.
La barre de progression de la vidéo et les commandes du lecteur disparaîtront de la vue quelques secondes après le début de la lecture de la vidéo. Ils
ne réapparaîtront que si l'utilisateur déplace sa souris sur le lecteur vidéo ou appuie sur une touche de son clavier.
Ratio d'aspect
Gardez le rapport hauteur / largeur de la vidéo fixé à 16: 9 ou 4: 3. Ceci est particulièrement utile lorsque la vidéo fait partie d'une grille de mise en page, de sorte que la vidéo se
redimensionne dynamiquement tout en conservant le rapport hauteur / largeur d'origine. Remarque: cette option est également disponible pour: la vidéo Vimeo et HTML5.
Paramètres personnalisés
Utilisez des paramètres personnalisés pour ajouter des fonctionnalités supplémentaires qui ne sont pas (encore) implémentées dans WWB. Pour une liste complète des options
disponibles, veuillez consulter la documentation de l'API YouTube:
https://developers.google.com/youtube/player_parameters.
Activer l'API JS
Permet au lecteur d'être contrôlé via des appels d'API JavaScript Player. Ne fonctionne que dans les navigateurs modernes!
http://caniuse.com/#search=postMessage
Cette option doit être activée si vous souhaitez utiliser des événements YouTube ou si vous souhaitez contrôler l'objet via des événements (multimédias): lecture,
pause, arrêt.
Boite à lumière
L'option Lightbox permet d'afficher une vidéo YouTube dans une lightbox (en utilisant FancyBox) après avoir cliqué sur une image de
prévisualisation. Vous pouvez spécifier l'image d'aperçu, le titre de la lightbox et la largeur / hauteur de la lightbox.
148
WYSIWYGWeb Builder 16
Miette de pain
Les fil d'Ariane sont utilisés pour améliorer l'accessibilité d'un site Web en indiquant l'emplacement à l'aide d'une hiérarchie de navigation. Vous
pouvez configurer manuellement tous les liens pour le menu ou synchroniser automatiquement avec le gestionnaire de site. Prend également en
charge les icônes FontAwesome.
Synchroniser avec Site Manager
Lorsque cette option est activée, Web Builder synchronise automatiquement les boutons avec le contenu du gestionnaire de site. Ainsi, si par
exemple vous ajoutez une nouvelle page, un bouton est automatiquement ajouté au menu. Ou si vous renommez une page, le texte de l'élément
sera également mis à jour.
Niveau
Cette valeur spécifie le niveau du gestionnaire de site qui sera utilisé pour créer les boutons.
Premier niveau
Inclut la page «index».
Niveau parent
Incluez tous les parents de la page actuelle.
Synchroniser avec un autre menu
L'activation de cette option synchronisera les liens du menu avec le menu spécifié. Cela peut être utile lorsque vous avez plusieurs menus sur la
page, par exemple un menu de bureau et un menu mobile. Vous n'aurez donc à modifier le (s) lien (s) qu'une seule fois.
Cible
Spécifie la fenêtre cible des liens lorsque «Synchroniser avec Site Manager» est activé.
symbole
Utilisez '>>>' pour séparateur de flèches spécial. Vous pouvez augmenter le «remplissage» pour contrôler la netteté de la flèche. Une valeur de 15
donne de très bons résultats.
Utilisez ce menu pour CMS
Activez cette option pour utiliser le menu avec les outils CMS. Au lieu d'un menu statique, les liens seront générés dynamiquement en
fonction de la base de données CMS.
Notez que cela ne fonctionne que lorsque la page a été publiée !.
149
WYSIWYGWeb Builder 16
Menu CSS
Ce menu est très similaire à la barre de navigation avec la principale différence que ce menu n'utilise aucune image ou JavaScript! Pourtant, le
menu CSS vous permet de créer des menus fantaisistes (brillant, verre, dégradés, etc.) en utilisant des dégradés et des ombres CSS3.
Sélectionner Ajouter pour insérer un nouveau bouton. Sélectionner Éditer pour modifier les
propriétés d'un bouton existant. Pour supprimer un élément du menu CSS, sélectionnez Retirer.
Vous pouvez réorganiser l'ordre des articles en utilisant Déplacer vers le haut et Descendre.
ScrollSpy
ScrollSpy est un mécanisme de navigation qui met automatiquement en évidence les boutons de navigation en fonction de la position de défilement pour
indiquer au visiteur où il se trouve actuellement sur la page.
Cette fonctionnalité fonctionne en combinaison avec les signets. donc le lien dans votre menu doit pointer vers un signet sur la page en cours.
Affixe
L'option Affixer est souvent utilisée avec les menus de navigation pour les faire "coller" à une zone spécifique tout en faisant défiler la page vers le haut et
vers le bas.
150
WYSIWYGWeb Builder 16
Aller au menu
Vous pouvez utiliser le composant Go Menu pour créer facilement un menu de navigation déroulant, chaque élément de menu correspondant à
une seule URL ou page de votre site Web. Lorsque l'utilisateur appuie sur le bouton Go, le lien de sélection est activé.
Sélectionner Ajouter pour insérer un nouvel élément.
Texte: Texte de l'élément dans la liste
URL: L'URL (adresse Internet) à laquelle l'élément sera lié.
Pour plus d'informations sur les hyperliens, veuillez lire le chapitre «Liens» de ce document.
Sélectionner Éditer pour modifier les propriétés d'un élément existant. Pour
supprimer un bouton du menu Aller, sélectionnez Retirer.
Vous pouvez réorganiser l'ordre des articles en utilisant Déplacer vers le haut et Descendre.
Texte initial
C'est le texte initial qui sera affiché dans le menu déroulant.
Texte du bouton
Le texte du bouton
Ne pas utiliser le bouton
Cochez cette case pour masquer le bouton Aller. Dans ce cas, une sélection de menu déroulant déclenchera le lien.
151
WYSIWYGWeb Builder 16
Menu des calques
Le menu des calques est un menu avancé dans lequel les menus déroulants sont des calques. C'est idéal pour créer des méga menus avancés avec des
images, du texte, un formulaire ou tout autre objet! Le calque déroulant peut être positionné à gauche, au centre ou à droite des boutons. Il est également
possible de rendre le calque sur toute la largeur de la page.
Remarques:
Les boutons principaux peuvent avoir des liens, rendre la taille du calque inférieure à 48 pixels pour supprimer le calque de l'élément.
- modes de bouton, définissez l'espacement sur 0
- non recommandé pour les petits écrans.
152
WYSIWYGWeb Builder 16
Méga menu
Les méga menus sont des menus déroulants contenant plusieurs colonnes de liens. Ils permettent d'accéder à tous les liens à la fois, plutôt que de forcer
l'utilisateur à faire défiler ou à utiliser des sous-menus. L'une des caractéristiques uniques de ce méga menu est que vous pouvez définir différents styles de liste
déroulante pour chaque bouton. Le menu déroulant peut avoir des lignes, des colonnes, juste un menu simple ou pas de menu du tout!
Le Mega Menu a été créé à l'aide de jQuery et prend en charge les mêmes thèmes ThemeRoller que les autres composants basés sur jQuery. Vous
pouvez définir le thème pour l'ensemble dans Propriétés de la page-> Style-> Thème. Les thèmes peuvent être créés / modifiés avec le gestionnaire
de thèmes intégré.
Général
Ici, vous pouvez ajouter, modifier et supprimer des éléments de menu dans le Mega Menu.
Cliquez sur «Ajouter» pour insérer un nouveau bouton dans la barre de menu principale. Les propriétés du bouton vous donnent accès au sous-menu.
Texte du bouton
Spécifie le texte du bouton.
Disposition du menu
Spécifie comment les éléments du sous-menu seront affichés.
•
Colonnes uniquement
•
Lignes uniquement
•
2 colonnes
•
3 colonnes
Toutes les catégories seront affichées dans des colonnes (1 ligne).
Toutes les catégories seront affichées en lignes (1 colonne)
Les catégories seront affichées dans 2 colonnes.
Les catégories seront affichées dans 3 colonnes.
•
4 colonnes
•
Menu simple
•
Bouton seulement
Les catégories seront affichées dans 2 colonnes
Affiche un menu déroulant simple
Le bouton n'a pas de sous-menu.
Les liens sont organisés en catégories. Pour ajouter une nouvelle catégorie, cliquez sur le bouton «Ajouter une catégorie» et spécifiez un nom. Pour ajouter un lien vers une
catégorie, sélectionnez d'abord le nom de la catégorie, puis cliquez sur «Ajouter un lien».
153
WYSIWYGWeb Builder 16
Vous pouvez réorganiser les liens avec les boutons «Monter» et «Descendre» ou en utilisant le glisser-déposer.
Style
La barre de menus utilise le thème de la page globale qui peut être défini dans Propriétés de la page-> Style.
D'autres paramètres spécifiques à un objet peuvent être modifiés dans la section «Style» des propriétés du Mega Menu. Les propriétés «Nom de la
police» et «Taille de la police» peuvent être utilisées pour remplacer la police par défaut du thème. La propriété 'Animation' active l'animation de
fondu pour masquer et afficher les sous-menus.
Rembourrage de bouton
Spécifie le remplissage des boutons. Le texte du bouton en combinaison avec le remplissage détermine la taille du bouton.
Espacement des boutons
Spécifie l'espacement entre le bouton.
Icône
Spécifie l'icône affichée sur le bouton.
Décalage d'icône
Spécifie la position de l'icône sur le bouton.
Si la valeur est positive, l'icône sera alignée sur le côté gauche du bouton.
Si la valeur est négative, l'icône sera alignée sur le côté droit du bouton.
Remplissage du sous-menu
Spécifie le remplissage du sous-menu.
Icône
Spécifie l'icône affichée sur le côté gauche des liens.
RWD
La valeur du point d'arrêt dans l'onglet Responsive Web Design (RWD) spécifie le moment où le menu passera du menu Mega au mode
pleine largeur.
154
WYSIWYGWeb Builder 16
Barre de menu
La barre de menus de Web Builder est basée sur JSCookMenu de Heng Yuan
(http://www.cs.ucla.edu/~heng/JSCookMenu). Il s'agit d'un script de menu basé sur JavaScript très puissant qui peut imiter des menus complexes trouvés
dans les applications GUI populaires. Web Builder fournit un générateur de menu afin que vous puissiez facilement ajouter des éléments de menu, attribuer
les liens et définir le style du menu à l'aide de l'onglet Style.
Sélectionner Ajouter pour insérer un nouvel élément dans la barre de menus. Sélectionner Éditer
pour modifier les propriétés d'un élément existant. Pour supprimer un élément de la barre de
menus, sélectionnez Retirer.
le Insérer un fractionnement Le bouton insère un séparateur / diviseur dans le menu.
Disposition: La barre de menus peut être verticale ou horizontale.
Style: Pour modifier l'apparence de la barre de menus, sélectionnez un thème prédéfini ou sélectionnez Par défaut pour modifier les couleurs de la barre de menus et
la mise en forme du texte.
Notez que l'effet du thème sélectionné ne sera visible que dans le navigateur. Vous devrez donc d'abord prévisualiser ou publier la page.
Déplacer vers le haut
Déplacez l'élément sélectionné parmi ses frères et sœurs.
Descendre
Déplacez l'élément sélectionné parmi ses frères et sœurs.
Se déplacer à gauche
Faire de l'élément sélectionné un frère de son parent.
Déplacer vers la droite
Faire de l'élément sélectionné l'enfant de son frère précédent.
Pointe:
Vous pouvez réorganiser les éléments dans le menu, vous pouvez utiliser le glisser-déposer pour déplacer les éléments.
155
WYSIWYGWeb Builder 16
Barre de navigation
L'ajout d'une barre de navigation dans WYSIWYGWeb Builder est vraiment simple.
Ajoutez simplement quelques boutons, attribuez les liens et définissez le style des boutons.
Sélectionner Ajouter pour insérer un nouveau bouton. Sélectionner Éditer pour modifier les
propriétés d'un bouton existant. Pour supprimer un bouton de la barre de navigation, sélectionnez Retirer.
Vous pouvez réorganiser l'ordre des boutons en utilisant Déplacer vers le haut et Descendre.
Synchroniser avec Site Manager
Lorsque cette option est activée, Web Builder synchronise automatiquement les boutons avec le contenu du gestionnaire de site.
Ainsi, si par exemple vous ajoutez une nouvelle page, un bouton est automatiquement ajouté à la barre de navigation. Ou si vous renommez une
page, le texte du bouton sera également mis à jour.
Cible
Spécifie la fenêtre cible des liens lorsque «Synchroniser avec Site Manager» est activé.
Niveau
Cette valeur spécifie le niveau du gestionnaire de site qui sera utilisé pour créer les boutons.
•
Premier niveau
•
Niveau parent
Crée des boutons qui seront liés aux enfants du niveau racine.
Crée des boutons qui créeront un lien vers toutes les pages du niveau au-dessus de la page actuelle dans le Gestionnaire de site.
•
Niveau actuel
Crée des boutons qui créeront un lien vers la page actuelle et toutes les autres pages partageant la même page parente.
•
Niveau enfant
Créez des boutons qui créeront un lien vers les enfants de la page actuelle.
Synchroniser avec un autre menu
L'activation de cette option synchronisera les liens du menu avec le menu spécifié. Cela peut être utile lorsque vous avez plusieurs menus sur la
page, par exemple un menu de bureau et un menu mobile. Vous n'aurez donc à modifier le (s) lien (s) qu'une seule fois.
Redimensionner les boutons horizontalement
Activez cette option pour pouvoir redimensionner les boutons de la barre de navigation horizontalement. Au lieu de la largeur du bouton d'origine, le bouton sera
maintenant étiré.
Type de disposition
La barre de navigation peut être verticale ou horizontale.
Espace de mise en page
Cette option spécifie l'espace entre 2 boutons.
156
WYSIWYGWeb Builder 16
Style de la barre de navigation
Style
Sélectionnez l'un des styles de bouton disponibles dans le menu déroulant.
Vous pouvez sélectionner vos propres images en utilisant l'option «Utiliser une image personnalisée» (le premier élément de la liste déroulante). Par défaut, Web Builder
inclut quelques exemples de styles, mais vous pouvez facilement ajouter vos propres styles: Copiez vos propres styles (qui ne sont essentiellement que des images) dans le
dossier de la barre de navigation:
Mes documents \ WYSIWYGWeb Builder \ system \ navbar \
Avec le Coloriser option, vous pouvez changer la couleur d'un bouton à presque n'importe quelle couleur! Cela vous donne des
centaines de variations de couleurs supplémentaires à choisir!
Animation
Vous pouvez choisir parmi plusieurs animations pour les effets de survol de la souris pour donner à votre menu un Web moderne
2.0 look and feel.
Utilisez le style d'état de survol pour indiquer la page actuelle.
Pour donner aux visiteurs de votre site Web une indication de la page qu'ils consultent actuellement, vous pouvez donner à cette page le même style
que l'état de survol.
Notez que cette option ne fonctionne pas lorsque la barre de navigation est sur un gabarit, car dans ce cas, les images de la barre de
navigation seront les mêmes pour toutes les pages!
Utiliser le thème de la page
Utilisez le thème de la page pour styliser l'objet. Plus de détails sur les thèmes: Gestionnaire de thèmes.
157
WYSIWYGWeb Builder 16
Menu de superposition
Le menu de superposition implémente un menu plein écran réactif à plusieurs niveaux. Avec de nombreuses animations afficher / masquer (génie, porte coulissante, poussée
de contenu, échelle, etc.), la prise en charge des icônes sociales et de nombreuses options de style.
Comment ajouter des icônes sociales?
Il n'y a pas de section dédiée pour configurer les icônes sociales. Au lieu de cela, tout ce que vous aurez à faire est de laisser le champ «texte» vide et de
sélectionner une icône. Cela créera une icône sociale en bas du menu au lieu d'un élément de menu standard!
158
WYSIWYGWeb Builder 16
Pagination
Si vous avez un site Web avec beaucoup de pages, vous pouvez ajouter l'objet de pagination pour une navigation plus facile.
Synchroniser avec Site Manager
Génère automatiquement des liens avec numérotation automatique et boutons suivant / précédent. Synchronise toujours avec le niveau actuel.
- Laissez le texte de l'étiquette vide pour supprimer le bouton.
Ce menu fonctionne également avec le système de gestion de contenu.
159
WYSIWYGWeb Builder 16
Menu du panneau
Un menu de panneau est initialement invisible, mais peut glisser du côté droit ou gauche de la page en cliquant sur le bouton de menu. De nombreux sites
Web modernes utilisent ce type de menu.
Les paramètres généraux du menu sont les mêmes que pour les autres types de menu comme la barre de navigation.
Texte
Spécifie le texte du bouton de menu. Ce champ peut également être utilisé pour configurer des animations de hamburgers! En utilisant des caractères spéciaux,
le bouton affichera un symbole de menu hamburger au lieu de texte. Lorsque vous cliquez dessus, les barres s'animent en un symbole de fermeture.
12 animations différentes sont disponibles:
transformer:
=
une barre:
_
fileur:
@
tourner:
*
90 degrés:
|
flèche gauche:
<
flèche droite:
>
flèche vers le haut:
^
flèche vers le bas:
v
moins:
-
plus:
+
fois:
X
Icône
Image qui peut être affichée sur le bouton. La position de l'icône peut être utilisée pour contrôler la position de l'icône par rapport au texte.
Afficher
Spécifie la relation entre le panneau et le contenu de la page. "Push" pousse la page dessus et "overlay" affiche le calque sur le
contenu.
Position
Spécifie si le menu du panneau sera affiché sur le côté gauche ou droit de la page.
Rejetée
Spécifie si le panneau peut être fermé en cliquant à l'extérieur sur la page.
Recouvrir
Utilisez cette option pour atténuer l'arrière-plan de la page (avec la couleur et l'opacité spécifiées) lorsque le menu est actif. Lorsque la valeur
d'opacité est définie sur «0», il n'y aura pas de superposition.
Largeur
Spécifie la largeur du panneau. Par défaut, cette valeur est en pixel mais vous pouvez également utiliser un pourcentage, par exemple 50%.
L'animation peut être aucune ou diapositive. L'animation de diapositive prend également en charge de nombreuses options d'accélération.
Recouvrir
Utilisez cette option pour atténuer l'arrière-plan de la page (avec la couleur et l'opacité spécifiées) lorsque le menu est actif. Lorsque la valeur
d'opacité est définie sur «0», il n'y aura pas de superposition.
160
WYSIWYGWeb Builder 16
Bibliothèque de polices d'icônes
Spécifie s'il faut utiliser les icônes FontAwesome ou les icônes de matériau dans les éléments de menu.
RWD
La valeur du point d'arrêt dans l'onglet Responsive Web Design (RWD) spécifie quand le menu passera du mode panneau au mode pleine
largeur.
Utilisez ce menu pour CMS
Activez cette option pour utiliser le menu avec les outils CMS. Au lieu d'un menu statique, les liens seront générés dynamiquement en
fonction de la base de données CMS.
Notez que cela ne fonctionne que lorsque la page a été publiée!
Comment ajouter des icônes sociales?
Il n'y a pas de section dédiée pour configurer les icônes sociales. Au lieu de cela, tout ce que vous aurez à faire est de laisser le champ «texte» vide et de
sélectionner une icône. Cela créera une icône sociale en bas du menu au lieu d'un élément de menu standard!
Comment ajouter un diviseur?
Réglez le texte sur «---» (3 tirets) pour insérer un séparateur à la place.
Comment utiliser le bouton du menu du panneau pour déclencher une couche de panneau?
Les boutons du menu du panneau prennent en charge des animations de hamburgers sympas (voir Options -> Texte). Ces animations peuvent également être utilisées en
combinaison avec une couche de panneau.
Assurez-vous que le menu du panneau ne contient qu'un seul élément. Liez cet élément au calque (via un signet). Le texte de l'élément sera ignoré.
161
WYSIWYGWeb Builder 16
Menu réactif
Le menu Responsive est un menu réactif à plusieurs niveaux optimisé pour les ordinateurs de bureau et les appareils mobiles (tactiles) qui utilise
uniquement CSS (pas de JavaScript). Sur les ordinateurs de bureau, le menu affichera un menu déroulant standard et sur les appareils mobiles,
il affichera un menu empilé à plusieurs niveaux avec l'icône commune «hamburger».
Le menu prend en charge les icônes FontAwesome pour donner à votre site Web un aspect moderne.
Point d'arrêt
Spécifie la largeur du navigateur où le menu passera du mode bureau au mode mobile.
La plupart des autres propriétés liées au style et au menu sont les mêmes que dans les autres menus.
162
WYSIWYGWeb Builder 16
SiteTree
Le SiteTree peut afficher un aperçu de votre site Web (un plan du site) afin que les visiteurs puissent trouver rapidement ce qu'ils recherchent.
Pointe:
Ne confondez pas cet objet avec l'option SiteMap dans le menu des outils, qui est purement destinée aux moteurs de recherche!
Le SiteTree affichera toutes les pages de votre site Web, à l'exception des pages que vous avez marquées «Ne pas synchroniser cette page
dans les objets de navigation».
Cet objet dispose de 3 styles d'affichage, chacun donnant un aperçu complètement différent de votre site:
Alphabétique
Affiche une liste alphabétique de toutes les pages de votre site Web.
Catégorie
Affiche toutes les pages de votre site Web regroupées par catégorie.
Pour que ce style fonctionne correctement, vous devez d'abord attribuer une ou plusieurs catégories à une page. Vous pouvez le faire dans les
propriétés de la page (balises meta) ou dans les propriétés générales du SiteTree lui-même.
Treeview
Affiche toutes les pages de votre site Web dans une arborescence basée sur la structure du site dans le Gestionnaire de site.
Dans les propriétés générales de cet objet, vous pouvez rapidement mettre à jour le nom d'affichage (identique à la propriété de nom de menu
dans Propriétés de la page), la description de la page (balise meta Description) et les catégories.
Vous pouvez attribuer une ou plusieurs catégories à une page (séparées par une virgule).
163
WYSIWYGWeb Builder 16
Défilement Snap
Snap Scroll améliore votre expérience de site Web de défilement d'une page en offrant un comportement de capture lorsque vous faites défiler la page vers le haut ou
vers le bas. Il ajoute également des points de pagination avec des titres de survol à la page pour faciliter la navigation et afficher la section actuellement active.
Contrairement à d'autres outils de navigation, où vous liez des éléments à d'autres pages, ce menu a-t-il été conçu pour créer des signets sur la page
en cours uniquement où chaque point renvoie à une autre section (signet) de la page.
Pagination
Les points de pagination sont entièrement personnalisables et peuvent être positionnés à gauche ou à droite de la page (haut / milieu / bas).
Vous pouvez définir les couleurs, la taille, l'espacement et la forme. Le style du texte peut être défini sous «Style».
Pointe:
Pour rendre la couleur totalement transparente, définissez la valeur alpha de la couleur de remplissage sur «0».
Rembourrage
Dans les propriétés de remplissage, vous pouvez configurer le remplissage autour des points de pagination. Ceci est principalement utile si vous donnez
également un arrière-plan au menu.
Marge
Dans les propriétés de la marge, vous pouvez configurer le décalage par rapport aux bords de la page. Par exemple, si le menu est aligné
horizontalement sur la gauche, la marge de gauche spécifie le décalage par rapport au bord.
RWD
Dans les propriétés RWD, vous pouvez définir un point d'arrêt. Cela permet de désactiver le comportement d'accrochage pour les petits écrans.
Cela masquera également la pagination.
Tutoriel en ligne: http://www.wysiwygwebbuilder.com/snapscroll.html
164
WYSIWYGWeb Builder 16
Menu de l'onglet
Le menu à onglets est une autre façon de mettre en œuvre la navigation de votre site Web.
La plus grande différence entre la barre de navigation et le menu à onglets (outre son apparence) est qu'un élément de menu à onglet a 3
états:
1. Ordinaire
État de repos
2.
Flotter
3.
Activer
Survolez ou survolez l'état
L'élément sélectionné est la page actuelle.
Style de menu à onglets
WYSIWYGWeb Builder comprend plusieurs thèmes que vous pouvez choisir pour l'apparence du menu à onglets. Le thème par défaut est uniquement
du texte et n'utilise aucune image. Les autres thèmes sont définis dans le dossier tabmenu ( Mes documents \ WYSIWYGWeb Builder \ system \
tabmenu \) et sont généralement constitués de 2 images. Si vous le souhaitez, vous pouvez modifier ces thèmes ou créer vos propres thèmes.
RWD
La valeur du point d'arrêt dans l'onglet Responsive Web Design (RWD) spécifie quand le menu passera du mode horizontal au mode
vertical.
165
WYSIWYGWeb Builder 16
Menu texte
Le menu texte est une version textuelle de la barre de navigation.
Les menus texte peuvent accélérer la navigation sur votre site Web, car aucune image n'a besoin d'être chargée avant que l'utilisateur
puisse accéder à une autre page.
Cible
Spécifie la fenêtre cible des liens lorsque «Synchroniser avec Site Manager» est activé.
Niveau
Cette valeur spécifie le niveau du gestionnaire de site qui sera utilisé pour créer les éléments. Premier niveau
Crée des boutons qui seront liés aux enfants du niveau racine.
Niveau parent
Crée des boutons qui créeront un lien vers toutes les pages du niveau au-dessus de la page actuelle.
Niveau actuel
Crée des boutons qui créeront un lien vers la page actuelle et toutes les autres pages partageant le
même page parente.
Niveau enfant
Créez des boutons qui créeront un lien vers les enfants de la page actuelle.
Espacement
Ce paramètre spécifie l'espace entre 2 éléments.
Style
Police de caractère
Le type de police est la famille de polices de texte, telle que Comic Sans, Times New Roman et Courier New.
Couleur de l'arrière plan
Spécifie la couleur de l'arrière-plan. S'il est réglé sur «Automatique», l'arrière-plan de la page Web sera utilisé.
Style de lien
Tous les hyperliens de votre page Web utilisent par défaut les couleurs de lien HTML par défaut (lien: bleu, visité: violet, actif: rouge). En définissant les styles de
lien hypertexte (CCS), vous pouvez ajuster les couleurs et la mise en forme d'un lien hypertexte. Une fois que vous avez défini un style, vous pouvez le joindre
au menu Texte en le sélectionnant dans le Style de lien
la liste déroulante. Clique le Modifier les styles bouton pour ajouter ou modifier la feuille de style du lien hypertexte.
Alignement
Spécifie l'alignement du menu texte.
Délimiteurs
Spécifiez les caractères spéciaux à placer avant et après le texte du lien. Les caractères courants incluent {, [et (.
RWD
La valeur du point d'arrêt dans l'onglet Responsive Web Design (RWD) spécifie quand le menu passera du mode horizontal au mode vertical si
le type de mise en page est défini sur «Responsive».
166
WYSIWYGWeb Builder 16
Bannière
Une bannière est une image qui affiche le titre d'une page Web. Une bannière aide les visiteurs à comprendre de quoi parle la page.
Général
Texte de la bannière
Texte qui sera affiché sur la bannière.
Utiliser le titre de la page
Cette option utilise automatiquement le titre de la page Web comme texte de bannière. Décochez cette option si vous souhaitez saisir un texte personnalisé.
Type de police
Le type de police est la famille de polices de texte, telle que Comic Sans, Times New Roman et Courier New.
Style de texte
Style de police tel que Gras, Italique ou Régulier.
Taille du texte
Taille du texte.
Couleur du texte
Couleur du texte.
Taille de la bannière
La taille de la bannière. Sélectionnez l'une des tailles prédéfinies ou «Ajuster au rectangle de mise en page» si vous souhaitez une bannière de taille personnalisée.
Alignement horizontal
Alignement horizontal du texte.
Alignement vertical
Alignement vertical du texte.
Style
Effet de fond
Vous pouvez choisir parmi plusieurs effets de remplissage:
1. Couleur unie
2. Dégradé
3. Image en mosaïque ou étirée.
Taille de la bordure
Spécifie l'épaisseur de la bordure autour de la bannière. Définissez ceci sur 0 (zéro) pour aucune bordure.
Couleur de la bordure
Spécifie la couleur de la bordure autour de la bannière.
Style de bordure
Spécifie le style (plein, cercle, disque, carré ou tiret) de la bordure autour de la bannière.
167
WYSIWYGWeb Builder 16
Effets
Activer l'ombre
Spécifie s'il faut activer l'effet d'ombre pour le texte.
Décalage de l'ombre X
Décalage horizontal de l'ombre
Décalage de l'ombre Y
Décalage vertical de l'ombre
Opacité de l'ombre
Définit la transparence de l'ombre.
Couleur de l'ombre
Spécifie la couleur de l'ombre
Flou de l'ombre
Adoucit les bords de l'ombre.
Réflexion
Spécifie la quantité de réflexion du texte.
Décalage de réflexion
Spécifie le décalage de la réflexion par rapport au bas du texte. Cette valeur peut être négative.
Animation de texte
L'objet Banner peut animer les caractères individuels du texte à l'aide d'animations CSS3 intégrées. Cela permet de créer une
introduction sympa à votre site Web.
Vous pouvez définir une animation différente pour afficher et masquer les personnages. Si vous définissez les deux animations, les deux animations seront
lues en continu. Si seule l'animation de l'émission est spécifiée, l'animation ne sera lue qu'une seule fois au chargement de la page.
Remarque:
Toutes les animations peuvent ne pas être utiles pour animer des personnages. Par exemple, animer la couleur de la bordure n'aura aucun effet sur le texte
ou aura simplement l'air bizarre ...
De plus, certaines animations ont été conçues pour être diffusées, tandis que d'autres ont été conçues pour se cacher. Cela est généralement indiqué
par le nom de l'animation. Par exemple, «puff-in» sert à montrer et «puff-out» à se cacher. Mais bien sûr, vous pouvez concevoir vos propres
animations avec le gestionnaire d'animation.
Publier
Format
Spécifie le format de sortie de la bannière. Vous pouvez publier la bannière sous forme d'image ou de texte standard avec un style CSS3.
Notez cependant que les anciens navigateurs ne prennent pas en charge l'ombre de texte. Notez également que la réflexion n'est actuellement pas prise en charge par CSS3,
de sorte que la bannière ne sera pas exactement la même que lors de la publication en tant qu'image.
168
WYSIWYGWeb Builder 16
Clipart
ClipArt utilise des polices dingbat et les convertit en formes vectorielles. Il a toutes les caractéristiques des formes, mais il vous permet d'insérer n'importe
quel type de forme sur votre page!
Vous pouvez télécharger des milliers de polices de dingbats gratuites sur Internet. Recherchez «polices dingbat gratuites» pour trouver toute la grande
collection de nouvelles formes. Après avoir téléchargé un ou plusieurs fichiers, vous pouvez les copier dans le dossier 'clipart' du dossier système Web
Builder:
Mes documents \ WYSIWYGWeb Builder \ system \ clipart \
Les polices Dingbats ont l'extension de fichier «.ttf». Il existe également de nombreux outils disponibles pour créer vos propres collections de
dingbat. Le nom de fichier de la police Dingbats sera affiché comme nom de catégorie dans la sélection de clipart.
Pour plus d'informations sur les propriétés de l'objet ClipArt, voir Formes.
169
WYSIWYGWeb Builder 16
Courbe
L'outil Courbe vous permet de dessiner des lignes courbes.
Pour dessiner une ligne courbe:
1. Cliquez sur l'outil Courbe dans la boîte à outils ou cliquez sur Insertion-> Dessin-> Courbe.
2. Cliquez et relâchez le bouton gauche de la souris à l'endroit où vous voulez que la courbe commence, tout en faisant glisser la souris, appuyez et appuyez /
relâchez le bouton de la souris pour ajouter des points.
3.
Pour terminer la courbe, double-cliquez sur le bouton gauche de la souris ou appuyez sur la touche ESC.
Lorsque la courbe est sélectionnée, les nœuds individuels peuvent être modifiés en les faisant glisser vers une nouvelle position.
Texte alternatif
Ce texte, généralement une brève description, apparaît à la place de l'objet dans le navigateur lorsque les images ne sont pas prises en charge ou ont
été désactivées.
Anti alias
Activez cette option pour améliorer la qualité des graphiques. Cela peut ralentir les performances de l'application.
Effet de remplissage (courbe fermée uniquement)
Spécifie l'effet de remplissage du polygone: solide, dégradé, texture, hachures ou transparent.
Largeur de la bordure
Spécifie l'épaisseur de la ligne.
Couleur de la bordure
Spécifie la couleur de la ligne.
Style de bordure
Spécifie le style de la ligne (solide, tiret, point, tiret point ou tiret point point).
Lien
Pour plus d'informations sur les liens, veuillez lire le chapitre «Liens» de ce document.
Événements
Pour plus d'informations sur les événements, veuillez lire le chapitre «Événements» de ce document.
Note importante: L'outil Courbe n'est disponible que sur les systèmes sur lesquels GDI + est installé. En savoir plus sur GDI + dans le chapitre
«Informations GDI +» de ce document.
170
WYSIWYGWeb Builder 16
Texte incurvé
Avec l'objet Texte incurvé, vous pouvez dessiner du texte le long d'une courbe définie par l'utilisateur.
Vous devrez d'abord dessiner une ligne courbe:
1. Cliquez sur le texte courbé dans la boîte à outils ou cliquez sur Insertion-> Dessin-> Texte courbé.
2. Cliquez et relâchez le bouton gauche de la souris à l'endroit où vous voulez que la courbe commence, tout en faisant glisser la souris, appuyez et appuyez /
relâchez le bouton de la souris pour ajouter des points.
Pour terminer la courbe, double-cliquez sur le bouton gauche de la souris ou appuyez sur la touche ESC. Ensuite, doublez le
texte incurvé pour modifier d'autres propriétés.
Pour plus d'informations sur l'ajout, la modification ou la suppression de nœuds, voir «Modifier les points» dans le menu Disposition.
Toutes les propriétés de l'objet Texte incurvé sont identiques à celles de l'objet Shape.
171
WYSIWYGWeb Builder 16
Ligne
L'outil Ligne de WYSIWYGWeb Builder vous donne beaucoup de contrôle sur son apparence que la ligne horizontale HTML standard. La ligne peut
être dessinée en utilisant n'importe quel angle, couleur, style et peut même avoir des flèches au début ou à la fin de la ligne!
Pour tracer une ligne:
1. Cliquez sur l'outil Ligne dans la boîte à outils ou cliquez sur Insertion-> Dessin-> Ligne.
2. Cliquez à l'endroit où vous voulez que la ligne commence et maintenez le bouton gauche de la souris enfoncé pendant que vous dessinez. Pour terminer la ligne,
relâchez le bouton de la souris.
Taille
Spécifie l'épaisseur de la ligne.
Couleur
Spécifie la couleur de la ligne.
Style
Spécifie le style de la ligne (Solid, Dash, Dot, Dash Dot ou Dash Dot Sor).
Flèche Début
Spécifie le type de flèche du début de la ligne (Aucun, Flèche, Cercle, Carré, Diamant, Furtif ou Flèche ouverte).
Taille de départ de la flèche
Spécifie la taille de la flèche.
Fin de la flèche
Spécifie le type de flèche de la fin de la ligne (Aucun, Flèche, Cercle, Carré, Diamant, Furtif ou Flèche ouverte).
Taille de l'extrémité de la flèche
Spécifie la taille de la flèche.
Texte alternatif
Ce texte, généralement une brève description, apparaît à la place de l'objet dans le navigateur lorsque les images ne sont pas prises en charge ou ont été
désactivées. Dans certains navigateurs, il apparaît sous la forme d'une info-bulle lorsque vous déplacez la souris sur l'image.
Anti alias
Activez cette option pour améliorer la qualité des graphiques. Cela peut ralentir les performances de l'application.
172
WYSIWYGWeb Builder 16
Type de connecteur
Spécifie le type de connecteur. Les connecteurs Coude et Courbe sont couramment utilisés dans les organigrammes.
•
Ligne
•
Coude
•
Courbe
Trace une ligne droite.
Dessine une ligne de coude.
Dessine une ligne courbe.
Orientation du connecteur
Spécifie l'orientation du connecteur. Horizontal, vertical ou automatique.
Lien
Pour plus d'informations sur les liens, veuillez lire le chapitre «Liens» de ce document.
Événements
Pour plus d'informations sur les événements, veuillez lire le chapitre «Événements» de ce document.
Note importante: L'outil Ligne n'est disponible que sur les systèmes sur lesquels GDI + est installé. En savoir plus sur GDI + dans le chapitre
«Informations GDI +» de ce document.
173
WYSIWYGWeb Builder 16
Polygone
L'outil Polygone vous permet de dessiner des polygones avec des bordures et plusieurs méthodes de remplissage.
Pour dessiner un polygone:
1. Cliquez sur l'outil Polygone dans la boîte à outils ou cliquez sur Insertion-> Dessin-> Polygone.
2. Cliquez et relâchez le bouton gauche de la souris à l'endroit où vous voulez que le polygone commence, tout en faisant glisser la souris, appuyez et
relâchez le bouton de la souris pour ajouter des points.
3.
Pour terminer et fermer le polygone, double-cliquez sur le bouton gauche de la souris ou appuyez sur la touche ESC.
Lorsque le polygone est sélectionné, les nœuds individuels peuvent être modifiés en les faisant glisser vers une nouvelle position.
Texte alternatif
Ce texte, généralement une brève description, apparaît à la place de l'objet dans le navigateur lorsque les images ne sont pas prises en charge ou ont
été désactivées.
Anti alias
Activez cette option pour améliorer la qualité des graphiques. Cela peut ralentir les performances de l'application.
Effet de remplissage
Spécifie l'effet de remplissage du polygone: solide, dégradé, texture, hachures ou transparent.
Largeur de la bordure
Spécifie l'épaisseur de la ligne.
Couleur de la bordure
Spécifie la couleur de la ligne.
Style de bordure
Spécifie le style de la ligne (solide, tiret, point, tiret point ou tiret point point).
Lien
Pour plus d'informations sur les liens, veuillez lire le chapitre «Liens» de ce document.
Événements
Pour plus d'informations sur les événements, veuillez lire le chapitre «Événements» de ce document.
Note importante: L'outil Polygon n'est disponible que sur les systèmes sur lesquels GDI + est installé. En savoir plus sur GDI + dans le chapitre
«Informations GDI +» de ce document.
174
WYSIWYGWeb Builder 16
Griffonner
L'outil Scribble vous permet d'esquisser des lignes et des formes courbes de manière libre.
Pour dessiner une ligne de forme libre:
1. Cliquez sur l'outil Scribble dans la boîte à outils ou cliquez sur Insertion-> Dessin-> Scribble.
2. Cliquez à l'endroit où vous voulez que la ligne commence et maintenez le bouton gauche de la souris enfoncé pendant que vous dessinez. La
ligne sera dessinée immédiatement et suivra les mouvements de votre souris. Relâcher le bouton de la souris trace une ligne droite entre le
point où vous avez relâché le bouton et la position actuelle de la souris.
3.
Pour terminer la ligne, double-cliquez sur le bouton gauche de la souris ou appuyez sur la touche ESC.
Lorsque la ligne est sélectionnée, les nœuds individuels peuvent être modifiés en les faisant glisser vers une nouvelle position.
Texte alternatif
Ce texte, généralement une brève description, apparaît à la place de l'objet dans le navigateur lorsque les images ne sont pas prises en charge ou ont
été désactivées.
Anti alias
Activez cette option pour améliorer la qualité des graphiques. Cela peut ralentir les performances de l'application.
Largeur de la bordure
Spécifie l'épaisseur de la ligne.
Couleur de la bordure
Spécifie la couleur de la ligne.
Style de bordure
Spécifie le style de la ligne (solide, tiret, point, tiret point ou tiret point point).
Lien
Le dessin étant publié en tant qu'image, vous pouvez également lui attribuer un lien.
Pour plus d'informations sur les liens, veuillez lire le chapitre «Liens» de ce document.
Événements
Le dessin étant publié en tant qu'image, vous pouvez également lui attribuer des événements.
Pour plus d'informations sur les événements, veuillez lire le chapitre «Événements» de ce document.
Note importante: L'outil Scribble n'est disponible que sur les systèmes sur lesquels GDI + est installé. En savoir plus sur GDI + dans le chapitre
«Informations GDI +» de ce document.
175
WYSIWYGWeb Builder 16
Forme
L'objet Shape peut être utilisé pour «dessiner» une forme sur votre page Web. Lorsque vous publiez une page avec des formes, Web Builder génère
chaque forme sous forme de fichier .gif.
Type: Sélectionnez le type de forme que vous souhaitez afficher sur votre page Web.
•
Rectangle
•
Rect rond
•
Ellipse
•
diamant
•
Hexagone
•
Octogone
•
Flèches
•
Panneaux
•
Étoiles
•
Parler des bulles
•
et beaucoup plus.
Certaines formes ont quelques variantes parmi lesquelles vous pouvez choisir.
Pour ajouter une bordure à la forme, sélectionnez ' Activer la bordure ' et spécifiez la bordure largeur et Couleur.
Vous pouvez choisir parmi plusieurs effets de remplissage:
1. Couleur unie
2. Dégradé
3. Image en mosaïque ou étirée.
4. Transparent
5. Motif (mode anti-aliasé uniquement)
6. Vista Glass (mode anti-aliasé uniquement)
Anti alias
Activez cette option pour améliorer la qualité des graphiques. Cela peut ralentir les performances de l'application.
Ombre intérieure
Cette option ajoutera un effet de biseau (ombre intérieure) à la forme. Une valeur de flou «0» désactivera l'effet.
Remarque:
Si l'anti-alias est désactivé, il n'est pas possible de définir la transparence de l'ombre.
Lien
Pour plus d'informations sur les liens, veuillez lire le chapitre «Liens» de ce document.
176
WYSIWYGWeb Builder 16
Événements
Pour plus d'informations sur les événements, veuillez lire le chapitre «Événements» de ce document.
HTML5
Normalement, les formes seront publiées sous forme d'images, pour des formes plus grandes, cela peut avoir un impact sur les performances de votre
site Web. Cependant, les navigateurs modernes (FireFox 5, IE9, Safari, Chrome) ont désormais un support intégré pour des formats alternatifs tels que
<canvas> et <svg>.
WYSIWYGWeb Builder vous permet désormais de convertir vos formes en éléments HTML5 natifs!
Sélectionnez «Publier en tant que < toile> pour générer la forme à l'aide de l'élément <canvas> de HTML5. Fondamentalement, cela génère un ensemble
complexe d'appels JavaScript pour dessiner la forme dans le navigateur.
Sélectionnez «Publier en tant que < svg> pour générer la forme à l'aide de l'élément <svg> de HTML5. Cela produira des instructions SVG pour que le
navigateur dessine la forme sous forme d'image vectorielle.
Sélectionnez «Publier en tant que CSS3 ' pour afficher la forme en utilisant le style CSS3. Cela produira un <div> standard avec un style CSS3 (bordure et
couleur d'arrière-plan). Notez que dans ce mode, seules les formes rectangulaires, elliptiques et aux coins arrondis sont possibles, car CSS ne prend en
charge aucun autre type de forme!
Limitations connues:
- Il s'agit d'une technique très nouvelle et toutes les fonctionnalités de forme de WYSIWYGWeb Builder ne sont pas encore disponibles, mais nous continuerons à
améliorer le logiciel lorsque les navigateurs rattraperont leur retard;)
- Tous les effets de dégradé ne sont pas pris en charge.
- Le texte sur la forme n'est pas pris en charge.
- Les bordures en pointillé et en pointillé ne sont pas prises en charge pour <canvas>.
- Les effets d'ombre et autres images ne sont pas pris en charge.
177
WYSIWYGWeb Builder 16
Décalage de l'ombre X
Décalage horizontal de l'ombre.
Décalage de l'ombre Y
Décalage vertical de l'ombre.
Opacité de l'ombre
Définit la transparence de l'ombre.
Couleur de l'ombre
Spécifie la couleur de l'ombre.
Opacité
Modifiez la transparence (0 - 100%) de la forme.
Ajouter du texte à une forme
Une nouvelle fonctionnalité de la version 5.0 est la possibilité d'ajouter du texte formaté à une forme! Maintenant, vous pouvez
créer des logos, des bannières ou même faire pivoter du texte!
Le texte peut être aligné sur n'importe quel bord de la forme. L'espace disponible pour le texte dans la forme peut varier en fonction du type de forme
que vous avez sélectionné.
Remarque:
Le texte ne sera pas visible si l'objet est transparent!
Rotation
Pour faire pivoter une forme:
1. Sélectionnez l'outil Rotation dans la boîte à outils ou cliquez sur Edition-> Rotation.
2. Cliquez pour sélectionner l'objet, passez la souris sur l'une de ses poignées jusqu'à ce que vous voyiez le pointeur de rotation.
3. Maintenez le bouton de la souris enfoncé et faites glisser dans la direction dans laquelle vous souhaitez faire pivoter l'objet, puis relâchez. Utilisez la touche
Shift pour des intervalles de rotation de 15 °.
Remarques:
•
La rotation de grandes formes peut prendre du temps.
•
La rotation des formes peut réduire la qualité d'affichage de l'objet.
Effets
Tout comme les images, vous pouvez également appliquer la plupart des effets aux formes, au texte et aux images clipart. Pour plus de détails, voir Images.
178
WYSIWYGWeb Builder 16
Forme de morphing
La forme Morphing transforme en douceur deux ou plusieurs formes pour créer des animations étonnantes sur votre site Web. Toutes les formes intégrées, les cliparts et la
bibliothèque d'icônes sont pris en charge. Vous pouvez même effectuer un morphing entre les icônes de différentes bibliothèques. Les animations peuvent être déclenchées
automatiquement (diaporama), au survol, au défilement avec des ancres ou en fonction de la position de défilement actuelle (continue).
La forme de morphing prend en charge les mêmes options de style que les formes standard, le format de sortie est toujours SVG.
Vous pouvez sélectionner l'une des formes ou icônes disponibles, mais pour obtenir les meilleurs résultats, vous devez utiliser des formes qui ressemblent, car le
processus de morphing essaie de mapper des points similaires pour effectuer la transition entre les formes en douceur. Il n'y a pas de règles standard pour ce qui
fonctionnera le mieux, vous devrez donc essayer de trouver ce qui semble acceptable.
Mode
La propriété mode définit la manière dont la forme de morphing sera rendue sur la page.
•
Animé
L'animation jouera en continu. La forme sera rendue à sa position d'origine.
•
flotter
L'animation démarre lorsque l'utilisateur déplace le curseur de la souris sur la forme. La forme sera rendue à sa position
d'origine.
•
fixé
L'animation jouera en continu. La forme sera rendue à une position fixe en arrière-plan. Par exemple, au centre de
la page.
•
faire défiler
L'animation sera déclenchée par des ancres / signets. Par exemple, la forme peut se transformer en une autre forme lorsqu'un
objet défile dans la fenêtre. Pour chaque forme, vous pouvez définir une ancre différente.
•
défilement continu
L'animation sera contrôlée par la position de la barre de défilement. Ainsi, si vous faites défiler la page vers le bas, la forme se
transformera progressivement en la suivante jusqu'à ce que la fin de la page soit atteinte.
Tutoriel en ligne: http://www.wysiwygwebbuilder.com/morphing_shape.html
179
WYSIWYGWeb Builder 16
Blog
Le mot «blog» est l'abréviation de journal Web. Un blog est un journal publié sur le Web pour que d'autres personnes puissent le lire. L'objet Blog fournit un
moyen simple d'implémenter un blog sur votre site Web sans exigences particulières sur le serveur Web. Contrairement à son nom l'indique, le blog peut être
utilisé pour plus qu'un simple blog. C'est également un moyen rapide d'afficher toutes sortes de données sous forme de liste ou de grille.
Général
Texte du commentaire, chaque entrée de blog aura un lien en bas pour permettre aux lecteurs d'envoyer des commentaires. Le texte par défaut est «Envoyer des
commentaires», mais vous pouvez le changer en tout ce que vous voulez. Si vous laissez ce champ vide, aucun lien ne sera affiché. E-mail de commentaire, spécifie
l'adresse e-mail à laquelle les commentaires seront envoyés. Pour ajouter une nouvelle entrée à votre blog, cliquez sur le bouton Ajouter. Donnez un titre à votre entrée
de blog, puis saisissez le message de votre blog dans la zone de texte. Vous pouvez éventuellement insérer une image et un lien vers une page Web associée.
Pagination
Paginate affiche un petit sous-ensemble de l'art des objets à tout moment, tout en permettant à l'utilisateur de se déplacer à travers les boutons de
navigation. La propriété "Éléments par page" spécifie le nombre d'éléments qui seront affichés par page. Cliquez sur le bouton Style pour modifier
l'apparence des boutons de pagination
Commande
Spécifie l'ordre des éléments sur la page ("Croissant" ou "Décroissant").
Colonnes
Spécifie s'il faut afficher les éléments de blog dans des colonnes. Cette option est réactive, donc chaque point d'arrêt peut avoir un nombre différent de
colonnes.
Tutoriel en ligne associé:
http://www.wysiwygwebbuilder.com/blog.html
Style
La page de style vous permet de modifier le style du blog, chaque élément individuel tel que le commentaire, la date, le sujet et l'arrière-plan peut avoir sa
propre couleur et sa propre police. L'image de séparation peut être utilisée pour séparer les entrées de blog horizontalement.
Disposition
Cela contrôle l'apparence des éléments du blog. Plus de 10 mises en page différentes sont actuellement disponibles. Vous pouvez également créer vos
propres mises en page (avec des modèles HTML / CSS). Les modèles sont stockés dans le dossier Documents \ WYSIWYGWeb Builder \ system \ blog \
Activer les polices réactives
Lorsque cette option est activée, l'objet texte peut avoir différentes tailles de police dans les points d'arrêt. Cela peut être utile si vous avez besoin d'une police plus
grande pour des écrans plus petits. Chaque point d'arrêt peut avoir une taille de texte différente. Notez cependant que lorsque cette option est activée, vous ne pouvez
utiliser qu'une seule famille de polices et une seule taille de police pour tout l'objet texte!
Flux RSS
Vous pouvez éventuellement activer la génération d'un flux RSS pour ce blog. Les propriétés du flux RSS sont identiques à celles de l'objet Flux
RSS.
180
WYSIWYGWeb Builder 16
Carrousel
L'objet Carousel (également appelé panneaux coulissants horizontaux) affiche des images ou tout autre objet en faisant défiler le contenu de droite à gauche à l'aide
d'une animation de glissement fluide (avec plusieurs effets d'accélération facultatifs). Les utilisateurs peuvent accéder à n'importe quel panneau spécifique à la
demande à l'aide des icônes de pagination ou parcourir le carrousel de manière séquentielle en utilisant les boutons Précédent / Suivant. Vous pouvez également
considérer le carrousel comme un diaporama à plusieurs couches. C'est une méthode très efficace pour augmenter la convivialité du site Web et engager l'utilisateur.
Vous avez probablement vu cet effet sur de nombreux sites Web populaires, tels que Apple ou Blackberry.
Lorsque vous insérez le carrousel pour la première fois dans votre page, vous verrez une zone vide avec deux boutons et un contrôle de pagination. Les boutons
peuvent être utilisés pour aller au panneau suivant ou précédent. Le contrôle de pagination affiche un «point» pour chaque page du carrousel. Vous pouvez accéder
directement à une page spécifique en cliquant sur le point. Les couleurs et la taille du contrôle de pagination sont configurables et bien sûr, vous pouvez également
sélectionner vos images gagnées pour les boutons suivant / précédent.
Les utilisateurs avancés peuvent même utiliser des événements pour créer des boutons personnalisés en dehors du carrousel!
Pour ajouter un nouveau contenu à la page actuelle, faites simplement glisser et déposez des objets dans la zone du carrousel. Pour ajouter des objets à une autre page,
accédez d'abord à la page (soit en utilisant les contrôles de pagination ou suivant / précédent). Une autre fonctionnalité intéressante du carrousel est la prise en charge des
appareils mobiles. Sur l'iPhone / iPad / Android, vous pouvez utiliser des gestes de glissement pour basculer entre les pages!
Des pages
Cela définira le nombre de pages pour le carrousel.
Le temps de pause
Spécifiez le nombre de millisecondes à mettre en pause avant d'afficher le panneau suivant de la séquence.
Durée de l'animation
Spécifie la durée de l'animation de la diapositive en millisecondes.
Assouplissement
Vous pouvez sélectionner parmi plus de 30 fonctions d'accélération pour contrôler le processus d'animation. Cette option peut être utilisée pour (par exemple) créer
des effets de rebond ou d'élasticité.
Activer les boutons de navigation
Spécifie s'il faut afficher les boutons de navigation.
Bouton précédent
Spécifie l'image à utiliser pour le bouton «Précédent». Si vous laissez ce champ vide, une image par défaut sera utilisée. Il est également possible de
saisir <dans le champ de saisie. Cela utilisera des flèches de navigation intégrées, inspirées des flèches Bootstrap-4 Carousel!
181
WYSIWYGWeb Builder 16
Bouton suivant
Spécifie l'image à utiliser pour le bouton «Suivant». Si vous laissez ce champ vide, une image par défaut sera utilisée. Entrez> dans le champ de
saisie pour utiliser la flèche de navigation intégrée, inspirée des flèches Bootstrap-4 Carousel.
Marge
Spécifie la marge entre la bordure du carrousel et les boutons.
Activer la pagination
Spécifie s'il faut afficher les contrôles de pagination. Les contrôles de pagination seront affichés en bas du carrousel. L'utilisateur peut
cliquer sur les icônes pour accéder rapidement au panneau spécifique.
Couleur
Spécifie la couleur des icônes de pagination.
Couleur de la bordure
Spécifie la couleur de bordure des icônes de pagination.
Taille
Spécifie la taille des icônes de pagination.
Rembourrage
Spécifie le remplissage autour des icônes de pagination.
Style
Dans cette section, vous pouvez modifier l'apparence de l'objet. Pour plus de détails sur le style des objets, veuillez lire Style.
Comment contrôler les diapositives à travers les événements?
Vous pouvez utiliser les actions Diaporama suivant et Diaporama précédent dans les événements pour créer une navigation externe.
Il est également possible de passer directement à une page spécifique:
1. Ajoutez l'objet Carousel à votre page.
2. Prenez note de l'ID. La valeur par défaut est «Carousel1».
3. Ajoutez une image, une forme ou un autre objet avec prise en charge d'événements à la page.
4. Ouvrez les propriétés et sélectionnez l'onglet «Evénements».
5. Cliquez sur «Ajouter» pour insérer un nouvel événement.
6. Sélectionnez «Événement»: OnClick et définissez la fonction «Action» sur JavaScript.
Pour afficher la boîte de dialogue, entrez ce JavaScript:
$ ('# Carousel'). Carousel ('goto, 1');
où Carousel1 est l'ID du carrousel. aller, 1 saute à la
première diapositive
aller, 2 sauts à la deuxième diapositive. etc...
Pour afficher la diapositive suivante, vous pouvez également utiliser ce JavaScript:
$ ('# Carousel'). Carousel ('suivant');
Pour afficher la diapositive précédente, utilisez:
$ ('# Carousel'). Carousel ('prev');
182
WYSIWYGWeb Builder 16
Carte d'image
Vous pouvez créer une image cartographique (côté client) qui divise une image en différentes zones qui renvoient chacune vers une page Web différente. La création
d'une carte image est utile pour les images telles qu'un étage, une carte de campus ou une carte du monde que vous souhaitez contenir des liens vers différentes
pages. Vous pouvez définir chaque zone cliquable (hotspot) de la carte à l'aide de trois valeurs de forme: rectangle, cercle ou polygone (forme irrégulière). Pour
ajouter des images, utilisez l'objet Carte d'image. Faites glisser l'objet sur la page et une boîte de dialogue de fichier apparaîtra pour sélectionner l'image. Web Builder
prend en charge les fichiers jpg, gif, bmp et png (XP uniquement).
Nom de fichier: entrez le chemin et le nom de fichier de l'image / image ou sélectionnez Feuilleter pour trouver une image sur votre lecteur local.
Remarques:
1.
Cette propriété spécifie l'emplacement de l'image locale, lorsque vous publiez la page, l'image sera automatiquement copiée
à l'emplacement spécifié dans Outils-> Options-> Publier-> Sous-dossier Images.
2.
Vous pouvez également spécifier des URL absolues comme celle-ci
https://www.paypalobjects.com/en_US/i/logo/paypal_logo.gif
3.
Pour faire une copie (de sauvegarde) des images utilisées dans votre page, activez Outils-> Options-> Dossiers> Faites une copie des images dans ce dossier lorsque les documents sont enregistrés. Cela copiera toutes les images dans le dossier spécifié, de sorte
qu'elles soient toutes stockées au même endroit. Cela évite également d'avoir des noms d'images en double dans votre site Web.
Texte alternatif: ce texte, généralement une brève description, apparaît à la place de l'objet dans le navigateur lorsque les images ne sont pas prises en
charge ou ont été désactivées. Dans certains navigateurs, il apparaît sous la forme d'une info-bulle lorsque vous déplacez la souris sur l'image.
Titre: Dans les navigateurs modernes, ce titre apparaît sous la forme d'une info-bulle lorsque vous déplacez la souris sur l'image.
Utilisez la taille originale: Sélectionnez cette option si vous souhaitez que l'image apparaisse à sa taille d'origine.
Ajuster au rectangle de mise en page: Sélectionnez cette option si vous souhaitez spécifier manuellement la taille de l'image.
Épaisseur de la bordure: Spécifie l'épaisseur de la bordure autour de l'image. Définissez ceci sur 0 (zéro) pour aucune bordure.
Couleur de la bordure: Spécifie la couleur de la bordure autour de l'image.
183
WYSIWYGWeb Builder 16
Ajout de hotspots
Il existe deux façons d'ajouter des points chauds à une carte image:
1. Saisie manuelle des coordonnées dans l'onglet hotspot des propriétés de la carte image
2. Modification visuelle des coordonnées à l’aide de la souris
Saisie manuelle des coordonnées
Ouvrez les propriétés de la carte d'image et cliquez sur l'onglet Hotspots pour insérer les coordonnées d'un hotspot. Vous pouvez insérer trois
types de hotspots:
1. Cercle, ici vous entrez les coordonnées x et y du centre et le rayon du cercle.
2. Rectangle, ici vous entrez les coordonnées x (gauche) et y (haut) et la largeur et la hauteur du rectangle.
3. Polygone (forme irrégulière), ici vous entrez chaque point (coordonnées x, y) sur le polygone.
Modifier visuellement les coordonnées à l'aide de la souris
Un moyen plus efficace de modifier les coordonnées des hotspots consiste à les faire glisser visuellement.
1. Cliquez avec le bouton droit de la souris sur la carte d'image pour afficher le menu contextuel
2. Sélectionnez le type de hotspot à insérer (Add Circle Hotspot, Add Rectangle Hotspot ou Add Polygon Hotspot)
3.
Une fenêtre apparaîtra dans laquelle vous pourrez définir les coordonnées initiales, l'URL et le texte alternatif de la zone.
Par défaut, Web Builder insère la forme au centre de la carte image.
4.
Après avoir cliqué sur OK, la forme sera insérée dans la carte d'image, vous pouvez maintenant la sélectionner et la faire glisser ou
changer sa taille à l'aide des poignées de taille.
5.
Pour modifier ou supprimer le hotspot, cliquez avec le bouton droit de la souris sur la zone pour afficher le menu contextuel et sélectionnez Edit Hotspot ou
Delete Hotspot.
184
WYSIWYGWeb Builder 16
Stock Photo
Parcourez des milliers d'images gratuites (* voir licence), de haute qualité à partir Unsplash ou Pixabay directement dans WYSIWYGWeb
Builder.
Les images Unsplash et Pixabay peuvent être insérées via le menu Insertion. La boîte de dialogue de sélection de photos d'archives prend en charge la recherche et
la possibilité de définir la taille souhaitée. Il existe également un bouton de navigation dédié aux photos d'archives à côté du bouton de navigation standard des
images.
Lorsque vous ouvrez la boîte de dialogue d'insertion de photos, une sélection aléatoire d'images s'affiche.
Saisissez un ou plusieurs mots clés dans le champ "Rechercher" pour afficher une sélection personnalisée. Chaque demande affichera 40 images, cliquez sur le
bouton «Plus» pour afficher la page suivante.
Vous pouvez également limiter la taille de l'image en spécifiant la largeur et la hauteur. Lorsque la taille spécifiée est différente du rapport
hauteur / largeur d'origine, l'image sera tronquée. Cela permet de créer une version carrée de l'image (par exemple 250x250).
Remarques:
Comme spécifié dans les directives Unplash ( https://help.unsplash.com/api-guidelines/unsplash-apiguidelines ), les images seront insérées
sous forme de «liens actifs».
Ainsi, les images sont chargées à partir du site Unsplash, elles ne sont pas téléchargées sur votre site Web.
Par défaut, les demandes Unsplash seront effectuées via le compte Unsplash de WYSIWYGWeb Builder. Le nombre de requêtes par heure est limité à
250 pour chaque utilisateur. Si vous avez besoin de plus de 250 demandes, vous pouvez spécifier une clé d'accès (privée) (dans Outils -> Options), de
sorte que l'application utilisera votre propre compte Unsplash à la place. Dans ce cas, toutes les demandes iront directement sur le site Unsplash au lieu
de via le proxy de WYSIWYGWeb Builder.
Pour obtenir une clé d'accès, vous devrez créer un compte développeur sur le site Web Unsplash:
https://unsplash.com/oauth/applications
Avertissement:
WYSIWYGWeb Web Builder utilise l'API standard Unsplash / Pixabay pour obtenir les informations sur les images à partir du site Web Unsplash /
Pixabay. Comme la plupart des API tierces, ces API sont régulièrement mises à jour. Cela signifie qu'à l'avenir, cette fonctionnalité peut soudainement
cesser de fonctionner. Bien sûr, nous ferons de notre mieux pour nous assurer que le logiciel est toujours à jour, donc si Unsplash ou Pixabay ne
fonctionne plus, veuillez consulter le site Web pour une mise à jour.
* Licence Unsplash:
https://unsplash.com/license
* Licence Pixabay
https://pixabay.com/service/license/
185
WYSIWYGWeb Builder 16
Galerie de photos
L'objet Galerie de photos vous donne un outil pour créer une galerie de photos en quelques clics de souris.
Ajouter
Ajoutez une ou plusieurs images à la galerie de photos.
Retirer
Supprimez la ou les images sélectionnées de la galerie de photos.
Enlever tout
Supprimez toutes les images sélectionnées de la galerie de photos.
Avancée
Cette option spécifie où se trouvent les images de la galerie.
•
Utiliser des images locales
Les images seront chargées à partir de l'ordinateur local.
•
Obtenez des images d'un compte Instagram
Cela permet d'alimenter la galerie de photos avec des images de votre compte Instagram. L'ID client spécifie votre identifiant de votre
compte Instagram. Le jeton est nécessaire pour la sécurité. Pour créer un jeton, vous pouvez utiliser l'un des nombreux générateurs
de jetons Instagram disponibles en ligne.
•
Récupérer des images d'un dossier sur le serveur
Cela charge les images d'un dossier sur le serveur. Cela utilise PHP, donc l'extension de fichier dans Propriétés de la page doit être définie
sur PHP et la page ne fonctionne qu'en ligne! Si les images ont des métadonnées de description, celles-ci seront automatiquement utilisées
pour le titre.
Titre de la miniature
Entrez le texte qui sera affiché sous l'image miniature. Pour activer les titres, assurez-vous d'avoir sélectionné l'option "Inclure le
titre" dans la page de texte.
Taille de la miniature
Spécifie la taille des images miniatures. Sélectionnez «Variable» pour déterminer dynamiquement la taille de la vignette. Sélectionnez «Responsive» pour
rendre la galerie de photos responsive. Lorsque cette option est sélectionnée, la galerie peut avoir un nombre différent de colonnes dans les points d'arrêt! Les
images de la galerie seront redimensionnées de manière réactive en fonction de l'espace disponible. Cela signifie par exemple que lorsque la galerie est à
l'intérieur d'une grille de mise en page, elle peut être pleine largeur.
Colonnes
Le nombre d'images par ligne.
Alignement horizontal
Alignement des images du pouce. Cette option n'a aucun effet lorsque l'option Conserver les proportions est désactivée.
Alignement vertical
Alignement des images du pouce. Cette option n'a aucun effet lorsque l'option Conserver les proportions est désactivée.
186
WYSIWYGWeb Builder 16
Filtre
Cela permet une galerie d'images filtrables de style portfolio.
Tout d'abord, vous devrez ajouter des étiquettes via Filtre -> Modifier. Après avoir ajouté des étiquettes, vous pouvez sélectionner des images et attribuer des étiquettes aux
images afin que les utilisateurs puissent choisir les images à afficher.
La barre de filtre comporte de nombreuses options de style et la transition entre les catégories peut être animée.
Conserver le rapport hauteur / largeur
Sélectionnez cette option si vous souhaitez conserver le rapport hauteur / largeur de l'image dans la vignette. Si cette option n'est pas
sélectionnée, la vignette sera redimensionnée pour s'adapter à tout le rectangle.
Mode galerie
Spécifie ce qui se passe si l'utilisateur clique sur une image.
•
Ouvrir dans la même fenêtre de navigateur
La version la plus grande de l'image sera affichée dans la même fenêtre de navigateur.
•
Ouvrir dans une nouvelle fenêtre de navigateur
La version plus grande de l'image sera affichée dans une nouvelle fenêtre de navigateur.
•
Ouvrir dans une fenêtre contextuelle
La version plus grande de l'image sera affichée dans une fenêtre contextuelle du navigateur. La fenêtre contextuelle aura la
taille de l'image complète.
•
Ouvrir dans une autre fenêtre
La version plus grande de l'image sera affichée dans une autre fenêtre. Par exemple, dans un cadre en ligne. Vous pouvez
spécifier le nom de la fenêtre cible dans le champ Nom.
•
Ouvrir dans une boîte de dialogue jQuery
L'image sera affichée dans une boîte de dialogue jQuery. Utilisez le bouton Paramètres pour modifier l'apparence de la boîte de
dialogue.
•
Galerie Light Box
Si vous sélectionnez cette option, cliquez sur l'une des images pour démarrer un diaporama lightbox. Vous pouvez sélectionner l'un des
diaporamas intégrés: Slimbox, Prettyphoto, Fancybox.
Pour personnaliser le comportement de la lightbox, vous pouvez ajouter des options supplémentaires via les «Paramètres». Veuillez
consulter la documentation ou le site Web de la lightbox spécifique pour plus de détails sur les options de configuration possibles.
Des galeries / plugins lightbox supplémentaires peuvent être téléchargés à partir de la section téléchargement du site Web: http://www.wysiwygwebbuilder.com/downloa
•
Utiliser des liens
Cette option vous permet d'attribuer des liens aux images, au lieu d'ouvrir l'image.
Générer des images miniatures
Par défaut, Web Builder génère une fenêtre d'aperçu qui affiche les images originales.
Si la taille de ces images est importante, le chargement de la page dans le navigateur peut prendre un certain temps. Au lieu de cela, vous pouvez
activer Générer des images miniatures qui générera une version plus petite des images afin que la page se charge plus rapidement.
Préfixe
Préfixe utilisé pour nommer les images miniatures.
Inclure le titre
Incluez le titre de l'image sous la vignette. Vous pouvez également modifier le type de police, la taille, le style et la couleur du titre.
187
WYSIWYGWeb Builder 16
Cadre
Spécifie le style de cadre à utiliser. Le type "Par défaut" ajoute un cadre simple où vous pouvez spécifier la largeur et la couleur. WYSIWYGWeb
Builder comprend quelques styles de cadre prédéfinis, mais vous pouvez facilement ajouter vos propres styles. Copiez vos propres styles (gif, jpg ou
png) dans le dossier de la galerie, où chaque style a son propre dossier. Mes documents \ WYSIWYGWeb Builder \ system \ gallery \ yourstyle \
Les styles de cadre sont constitués de 8 images (notez que vous pouvez également utiliser les extensions jpg et png!): Bottom.gif,
bottomleft.gif, bottomright.gif, left.gif, right.gif, top.gif, topleft.gif , topright.gif
Mode Polaroid
La Galerie de photos a également le mode Polaroid 'qui utilise CSS3 et a quelques effets sympas comme des polaroids tournés ou de taille variable. Pour activer
le mode Polaroid, sélectionnez (Polaroid) comme style de cadre. Pour obtenir le meilleur effet, réglez la largeur du cadre sur 20 ou plus et utilisez «blanc» comme
couleur. Ajouter également une petite ombre avec lui donner un effet plus réaliste.
Faire pivoter les polaroïds fera pivoter les images de manière aléatoire pour simuler une pile de photos. Vous pouvez également donner à chaque photo une taille
différente.
Pour les utilisateurs avancés qui souhaitent avoir plus de contrôle sur les angles et la mise à l'échelle individuelle de l'image: maintenez la touche MAJ enfoncée tout
en cliquant sur les options de la case à cocher. Cela fera apparaître une boîte de dialogue dans laquelle vous pouvez spécifier un tableau d'angles ou d'échelles. Si
ces valeurs n'ont pas de sens pour vous, veuillez ne pas les modifier!
Les polaroids sont déplaçables
Ajoute la possibilité de repositionner les polaroids autour de la page. Tout comme les «vrais» polaroids sur une pile.
Animer des polaroids lors du chargement de la page
Anime les polaroids à une position aléatoire sur la page.
188
WYSIWYGWeb Builder 16
Scripts Java prêts à l'emploi
Cette fonctionnalité peut être utile si vous souhaitez égayer vos pages Web avec des scripts Java sympas. Cliquez sur "Insérer JavaScript"
et sélectionnez l'un des scripts prédéfinis. Certains des scripts ont des propriétés pour modifier le comportement du script. Pour voir l'effet du
script Java, vous devrez prévisualiser ou publier la page Web.
Remarques:
•
Ces scripts ne sont pas créés par Pablo Software Solutions. Dans la mesure du possible, les droits d'auteur appropriés sont
affichés.
•
Selon la configuration du navigateur Internet, certains de ces scripts peuvent ne pas fonctionner sur tous les systèmes.
•
Il n'est pas recommandé d'utiliser plus d'un Java Script par page.
Vous pouvez créer vos propres scripts Java en utilisant l'éditeur JavaScript qui est disponible dans la section téléchargement de notre site Web.
189
WYSIWYGWeb Builder 16
Image de survol
Les images de survol changent les images de swap lors de leur survol (événement onMouseOver) et reviennent à l'image d'origine lors du
déploiement de l'objet (événement onMouseOut).
Image initiale
Sélectionnez l'image qui sera affichée initialement.
Survolez l'image
Sélectionnez l'image qui sera affichée lorsque la souris survolera l'objet.
Texte alternatif
Ce texte, généralement une brève description, apparaît à la place de l'objet dans le navigateur lorsque les images ne sont pas prises en charge ou ont été
désactivées. Dans certains navigateurs, il apparaît sous la forme d'une info-bulle lorsque vous déplacez la souris sur l'image.
Titre
Dans les navigateurs modernes, ce titre apparaît sous la forme d'une info-bulle lorsque vous déplacez la souris sur l'image.
Animation
Spécifie l'effet d'animation pour l'image de survol:
•
Aucun
•
Fondu
•
Glisser vers la gauche
•
Glisser à droite
•
Glisser vers le haut
•
Glisse vers le bas
•
Zoom
•
Scale, utilise CSS3 pour afficher une version plus grande de l'image. Utilise la transformation, l'ombre de la boîte CSS3, une belle légende
•
Porte coulissante. Cela donne l'impression que l'image est divisée en deux et que l'une va à gauche et l'autre à droite.
d'image lorsque cela est possible (expérimental).
Durée
Durée de l'animation en millisecondes.
Assouplissement
Les animations de diapositives prennent également en charge l'assouplissement. Vous pouvez sélectionner parmi plus de 30 fonctions d'accélération pour contrôler le
processus d'animation. Cette option peut être utilisée pour (par exemple) créer des effets de rebond ou d'élasticité.
Lien
Pour plus d'informations sur les liens, veuillez lire le chapitre «Liens».
190
WYSIWYGWeb Builder 16
Texte de survol
L'objet RollOver Text affiche une bannière de texte (titre et description) sur une image au passage de la souris.
Nom de fichier
Sélectionnez l'image qui sera affichée initialement.
Titre
Titre de l'image.
La description
Description de l'image.
Texte du lien
La bannière peut également contenir un lien. Ici, vous pouvez spécifier le texte de ce lien. L'URL du lien peut être configurée dans l'onglet
«Lien».
Position
Spécifie la position de la bannière de texte.
•
Haut
La bannière sera affichée en haut de l'image. Bas
•
La bannière sera affichée en bas de l'image. Plein
•
La bannière sera affichée sur toute la taille de l'image.
Animation
Spécifie l'effet d'animation pour la bannière de texte de survol:
•
Aucun
•
Fondu
•
Glisser vers la gauche
•
Glisser à droite
•
Glisser vers le haut
•
Glisse vers le bas
Durée
Durée de l'animation en millisecondes.
191
WYSIWYGWeb Builder 16
Flux RSS
Avec l'objet Flux RSS, vous pouvez ajouter un flux RSS à votre site Web en seulement quelques clics de souris!
Que signifie RSS?
RSS signifie Really Simple Syndication et est utilisé pour décrire la technologie utilisée pour créer des flux.
Qu'est-ce qu'un flux (RSS)?
Les flux, également appelés flux RSS, flux XML, contenu syndiqué ou flux Web, contiennent du contenu fréquemment mis à jour
publié par un site Web.
Ils sont généralement utilisés pour les sites Web d'actualités et de blogs, mais sont également utilisés pour la distribution d'autres types de contenu numérique, notamment des
images, des fichiers audio ou des vidéos.
Dans sa forme la plus élémentaire, RSS génère une liste de liens vers diverses ressources de votre site avec une description du contenu de chaque lien.
Le contenu d'un flux RSS peut être lu de différentes manières. Une variété d'outils, payants et gratuits, pour lire les flux RSS sont
disponibles sur Internet. Les derniers navigateurs (Internet Explorer 7.0, Safari, FireFox
2.0 et Opera) ont également un support de flux RSS intégré.
L'extension RSS Feed vous permet de définir un canal RSS avec un ensemble de titres. Lorsque vous publiez la page Web, qui comprend
l'extension RSS, un fichier RSS (XML) sera généré dans le même dossier que la page HTML. Une petite icône RSS s'affichera sur votre page Web
avec un lien vers ce fichier. Certains navigateurs afficheront une icône spéciale dans la barre d'outils, qui permet aux utilisateurs de s'abonner
facilement à votre canal RSS.
Général
Titre
Le nom de la chaîne. C'est ainsi que les utilisateurs se réfèrent à votre service. Si votre site Web HTML contient les mêmes informations
que votre fichier RSS, le titre de votre chaîne doit être le même que le titre de votre site Web.
La description
Phrase ou phrase décrivant la chaîne.
URL
L'URL du site Web HTML correspondant à la chaîne. Par exemple:
http://www.wysiwygwebbuilder.com
Incluez la date de publication des titres.
L'extension peut mettre à jour automatiquement la date de publication des titres (en fonction de l'horodatage de création ou de modification). Pour
inclure la date de publication dans le flux RSS, activez cette option. Si vous laissez cette option désactivée, la date de publication ne sera pas
incluse.
Nom de fichier
Le nom de fichier du fichier xml RSS généré. Par défaut, ce fichier est nommé «rss.xml», mais vous pouvez le renommer comme vous le souhaitez. Les
extensions de fichier courantes pour les flux sont .xml et .rss
Logo
Spécifie quel logo sera affiché sur la page Web.
192
WYSIWYGWeb Builder 16
Titres
Ajouter
Ajoutez un nouveau titre.
Le sujet et la description doivent être écrits pour décrire le contenu. le Podcast La propriété permet de joindre du contenu
multimédia aux flux RSS, comme un fichier MP3. le URL Le champ doit référencer la page Web qui contient ce contenu réel. Cela
peut être un lien interne ou externe.
Éditer
Modifiez le titre sélectionné.
Retirer
Supprimer le titre sélectionné.
Optionnel
Catégorie, spécifiez une ou plusieurs catégories auxquelles appartient le canal. Exemple:
journal
Droits d'auteur, Avis de droit d'auteur pour le contenu de la chaîne. Exemple:
Copyright 2008, Pablo Software Solutions
Éditeur, Adresse e-mail de la personne responsable du contenu éditorial Exemple:
votrenom@ votre site Web.com (votre nom)
Webmestre, Adresse e-mail de la personne responsable des problèmes techniques liés au canal Exemple:
[email protected] (Web Master)
Langue, La langue dans laquelle la chaîne est écrite. Cela permet aux agrégateurs de regrouper tous les sites en néerlandais, par exemple, sur une
seule page.
Image, spécifie une image GIF, JPEG ou PNG qui peut être affichée avec le canal.
Temps de rafraîchissement, Spécifie le nombre de minutes qui indique combien de temps un canal peut être mis en cache avant d'être actualisé à partir de la
source.
193
WYSIWYGWeb Builder 16
Ticker du fil d'actualité
Le téléscripteur de flux d'actualités ou le rotateur de titre affiche les flux RSS (locaux ou d'un autre site Web), les messages Twitter, les images Flickr ou
d'autres sources d'informations sur votre site Web.
Vous pouvez également considérer cet objet comme un diaporama pour du texte avec de nombreuses animations et types d'affichage différents tels que statique,
défilement, diaporama, pagination et ticker.
Remarque:
Vous devez publier votre page sur un serveur Web, sinon les informations ne seront pas affichées en raison des restrictions de sécurité du
navigateur.
Général
La source de données
Le téléscripteur du fil d'actualité prend en charge de nombreux types de sources de données. Il utilise jQuery pour récupérer les données.
•
Défini par l'utilisateur
Cette option vous permet de spécifier les titres manuellement.
•
Flux RSS
Sélectionnez cette option si la source de données est un flux RSS. Cela peut être un flux sur votre propre site Web ou un site Web
externe. Saisissez l'emplacement du flux RSS dans le champ URL. Pour les flux locaux (comme celui créé avec l'objet de flux RSS),
entrez ./rss.xml
Pour les flux provenant de sites Web externes, vous devez entrer l'URL complète:
http://www.wysiwygwebbuilder.com/rss.xml
Pour surmonter les problèmes de sécurité dus aux restrictions interdomaines, nous avons inclus plusieurs options de récupération de données:
Charger des données à l'aide d'une requête HTTP GET
Utilisez cette option pour les flux extraits de votre propre domaine. Cette option utilise AJAX (JavaScript asynchrone et XML) pour
récupérer les données et ne nécessite pas PHP. Cependant, les demandes AJAX ne peuvent pas être adressées à un site différent de
celui hébergeant la page consultée.
Charger les données via proxy (cette option nécessite le support PHP sur le serveur!)
Cette option utilise un script proxy PHP pour récupérer les données. Cela incite essentiellement le navigateur à penser que le flux
provient de votre propre serveur. Un script PHP va extraire le contenu du fil d'actualité sur votre serveur en utilisant la fonction PHP
file_get_contents () puis relayer les données vers le téléscripteur du fil d'actualité. Ce script sera automatiquement généré et
téléchargé par WYSIWYG Web Builder, vous n'avez donc pas à vous en soucier.
Charger les données via cURL (nécessite PHP)
Certains fournisseurs d'hébergement Web peuvent ne pas autoriser l'utilisation de la fonction PHP file_get_contents () pour récupérer des
fichiers distants en raison de problèmes de sécurité. Si votre hôte prend en charge cURL, cela peut être une bonne alternative. Consultez la
documentation de votre hébergeur pour plus de détails. Notez qu'ici aussi le script PHP sera automatiquement généré et téléchargé par
WYSIWYGWeb Builder.
•
Twitter
Utilise JSON pour obtenir les derniers messages d'un compte Twitter spécifique.
•
Flickr
Affiche les images en fonction de la requête de recherche Flickr spécifiée. Entrez la requête de recherche Flickr dans le champ Paramètres
Flickr. Par exemple: tags = vegas & tagmode = any, qui recherchera les dernières images marquées avec 'vegas'
194
WYSIWYGWeb Builder 16
•
Facebook
Cette option utilise l'API Graph de Facebook pour obtenir des mises à jour de statut, des photos et des liens depuis votre compte Facebook. Pour
obtenir des données de l'API Graph, vous devez entrer votre identifiant Facebook et un jeton d'accès. Vous pouvez en savoir plus sur le partage de
données Facebook ici:
https://developers.facebook.com/docs/getting-started/graphapi/
Type de visionneuse
Le type de visionneuse spécifie comment les titres seront affichés:
•
Défaut
Les éléments seront affichés sous forme de liste statique. Si la liste est plus longue que l'espace disponible, des barres de défilement seront ajoutées.
•
Défilement continu
Les éléments défilent comme un fil d'actualité (vertical). La molette de défilement s'arrête au survol de la souris.
•
Diaporama
Les éléments s'affichent l'un après l'autre, se mettent en pause pendant quelques secondes, puis glissent vers le haut pour afficher l'élément suivant.
La propriété 'Pause for' spécifie la pause entre les titres en secondes.
•
Paginer
Paginate affiche un petit sous-ensemble de l'art des objets à tout moment, tout en permettant à l'utilisateur de se déplacer à travers les
boutons de navigation. La propriété "Élément par page" spécifie le nombre d'éléments qui seront affichés par page. Cliquez sur le bouton
Style pour modifier l'apparence des boutons de pagination.
•
Téléscripteur
Utilise des animations de type ticker pour fondre et faire glisser les éléments dans la vue. Cet effet est fréquemment utilisé sur les nouveaux sites Web.
Articles max
Spécifie le nombre maximal d'éléments qui seront extraits de la source de données.
Ordre de tri
Spécifie l'ordre dans lequel les éléments seront affichés.
La vitesse
Spécifie la vitesse de défilement du texte pour le mode de défilement continu.
Animation
Spécifie l'effet d'animation pour le mode diaporama: Aucun, Fondu, Glisser à gauche, Glisser à droite, Faire glisser vers le haut ou Faire glisser vers le bas
Durée
Spécifie la durée de l'animation.
Lien cible
Spécifie la cible des liens dans le téléscripteur du fil d'actualité. Par exemple:
_Vide, ouvre le lien dans une nouvelle fenêtre
_soi, ouvrir le lien dans l'image courante
_parent, ouvrir le lien dans le cadre parent
_Haut, charge le document lié dans le cadre supérieur
195
WYSIWYGWeb Builder 16
Diaporama
Vous pouvez utiliser l'objet Diaporama pour afficher successivement différentes images au même endroit sur la page Web. Par exemple, vous pouvez effectuer une
rotation entre plusieurs images qui annoncent de nouveaux produits ou affichent des publicités pour d'autres sites Web. Pour ajouter une image, cliquez sur le Ajouter- bouton.
Vous pouvez également attribuer un lien à chaque image. Cliquez sur Modifier pour modifier les propriétés d'une image ou sur Supprimer pour la supprimer de la liste.
Pour insérer plusieurs images en une seule action, maintenez la touche SHIFT enfoncée tout en appuyant sur Ajouter.
Vous spécifiez le nombre de secondes de pause avant d'afficher l'image suivante dans la séquence.
Si vous définissez cette valeur sur 0 (zéro), les images ne pivoteront pas automatiquement, mais à la place, vous pouvez utiliser Événements pour afficher l'image
suivante ou précédente. Cela signifie que vous pouvez utiliser des formes, des images, du texte ou tout autre objet prenant en charge les événements pour
parcourir les images! Deux actions d'événement spéciales sont définies à cet effet: Diaporama suivant et Diaporama précédent. Voir le chapitre «Evénements»
pour plus de détails.
Type
•
Séquence
•
Aléatoire
Les images seront tournées en séquence.
Les images seront affichées dans un ordre aléatoire.
•
Galerie Light Box
Si vous sélectionnez cette option, cliquez sur l'image pour démarrer un diaporama lightbox. Vous pouvez sélectionner l'un des diaporamas
intégrés: Slimbox, Prettyphoto, Fancybox.
Pour personnaliser le comportement de la lightbox, vous pouvez ajouter des options supplémentaires via les «Paramètres». Veuillez
consulter la documentation ou le site Web de la lightbox spécifique pour plus de détails sur les options de configuration possibles. Des
galeries / plugins lightbox supplémentaires peuvent être téléchargés à partir de la section téléchargement du site Web: http://www.wysiwygwebbuilder.com/download.html
•
Bande transporteuse
Cette option crée un diaporama d'images qui fait défiler les images de droite à gauche à la manière d'un «tapis
roulant».
•
Carrousel
Lorsque ce mode est sélectionné, plusieurs images peuvent être affichées par diapositive. Le plugin Carousel (réactif) de Bootstrap sera
utilisé à la place du propre script de Web Builder.
•
Accordéon
Implémente un accordéon d'image horizontal, en utilisant uniquement CSS. Avec prise en charge de l'animation et des légendes. L'Accordéon Image a
également sa propre icône dans la boîte à outils pour un accès rapide.
Effet
Spécifie l'effet qui sera utilisé pour les transitions d'image. Il y a plus de 25 effets d'animation!
Avancée
Cette option spécifie l'emplacement des images du diaporama.
•
Utiliser des images locales
Les images seront chargées à partir de l'ordinateur local.
•
Obtenez des images d'un compte Instagram
Cela permet d'alimenter le diaporama avec des images de votre compte Instagram. L'ID client spécifie votre identifiant de votre
compte Instagram. Le jeton est nécessaire pour la sécurité. Pour créer un jeton, vous pouvez utiliser l'un des nombreux
générateurs de jetons Instagram disponibles en ligne.
•
Récupérer des images d'un dossier sur le serveur
Cela charge les images d'un dossier sur le serveur. Cela utilise PHP, donc l'extension de fichier dans Propriétés de la page doit être définie
sur PHP et la page ne fonctionne qu'en ligne! Si les images ont des métadonnées de description, celles-ci seront automatiquement utilisées
pour le titre.
Tutoriel en ligne associé:
http://www.wysiwygwebbuilder.com/slideshow.html
196
WYSIWYGWeb Builder 16
Recherche du site
WYSIWYGWeb Builder a une fonctionnalité de «moteur de recherche» intégrée de base, afin que les visiteurs puissent rechercher des mots
spécifiques sur votre site Web. L'option de recherche n'a pas d'exigences de serveur particulières car elle utilise JavaScript, il est donc très facile
d'insérer ce composant dans vos pages.
Remarque:
Avant d'ajouter cet objet à votre page, assurez-vous d'avoir activé «Générer l'index de recherche» dans Menu-> Outils-> Index de recherche
sinon l'index de recherche ne sera pas créé et la recherche ne fonctionnera pas!
`̀
Place titulaire
Le texte d'indication (ou 'cue') s'affichera dans le champ de recherche s'il n'a pas le focus. Lorsque l'utilisateur déplace son focus sur le
champ, l'étiquette est masquée.
Aucun résultat
Spécifie le texte qui sera affiché si la requête de recherche n'a pas de résultats.
Mots clés
Le texte de l'étiquette du mot-clé dans les résultats de la recherche.
La description
Le texte de l'étiquette Description dans les résultats de la recherche.
Bouton Fermer
Le texte sur le bouton de fermeture
Rembourrage
Définit la quantité d'espace entre les résultats et la bordure.
Afficher l'heure de la requête
Cela affiche le temps total nécessaire pour exécuter la requête de recherche.
Afficher l'URL
Ajout d'une option pour inclure l'URL dans les résultats de recherche (URL à afficher).
Afficher la description
Spécifie s'il faut afficher la description dans les résultats de la recherche.
Afficher les mots-clés
Spécifie s'il faut afficher les mots-clés dans les résultats de la recherche.
Pour des raisons de performances, les mots-clés dans les résultats de recherche sont les mots de l'index de recherche, et non directement du
contenu de la page! Seuls les mots uniques seront indexés. Ainsi, si un mot est utilisé plusieurs fois dans le texte, il n'apparaîtra qu'une seule fois
dans les mots-clés.
197
WYSIWYGWeb Builder 16
longueur maximale
Définissez le nombre maximum de caractères à afficher dans les résultats. Le texte de description contient le contexte du mot-clé dans le texte
(longueur max.).
résultats par page
Ajoute une pagination aux résultats de la recherche.
Résultats
Les résultats de la recherche peuvent être affichés sur la page de plusieurs manières différentes:
•
Afficher les résultats dans une nouvelle fenêtre du navigateur
Les résultats seront affichés dans une nouvelle fenêtre de navigateur. Vous pouvez configurer les propriétés de cette fenêtre via le bouton
«Paramètres».
•
Afficher les résultats dans un cadre en ligne
Les résultats seront affichés dans un cadre en ligne sur la même page.
Notez que vous devrez d'abord insérer un objet frame en ligne avant de sélectionner son nom dans la propriété Frame.
•
Afficher les résultats dans la boîte de dialogue jQuery
Les résultats seront affichés dans une boîte de dialogue jQuery. Utilisez le bouton Paramètres pour modifier l'apparence de la boîte de
dialogue.
•
Afficher les résultats dans un autre objet.
Les résultats seront affichés à l'intérieur d'un autre objet (par exemple un calque sur la même page). Il remplacera le contenu actuel de cet
objet. Assurez-vous que le mode de débordement de cet objet est réglé sur «défilement» sinon vous risquez de ne pas voir tous les
résultats!
•
Afficher les résultats dans une autre page.
Vous pouvez utiliser cette option pour afficher les résultats dans une autre page. Cela peut être utile si vous souhaitez que la page de résultats
ait le même design que le reste de votre site Web.
Saisie automatique
Activer la saisie semi-automatique
La fonction de saisie semi-automatique permettra aux utilisateurs de taper le début d'un terme de recherche et de se voir présenter tous les termes
possibles commençant par la chaîne saisie (comme le moteur de recherche Google).
Mode
Spécifie ce qui se passe lorsque l'utilisateur sélectionne un mot dans la liste déroulante.
•
sélectionner un mot
Ceci est le comportement par défaut. Lorsque l'utilisateur clique sur un mot dans la liste déroulante, il est copié dans le champ d'entrée de
recherche.
•
ouvrir la page
Cliquez sur un élément dans la liste déroulante de saisie semi-automatique pour ouvrir immédiatement la page. Cela permet
d'implémenter un champ de recherche sans section «résultats». Notez que lorsque ce mode est actif, les paramètres des résultats
sont ignorés.
Rembourrage
Définissez l'espacement autour des éléments dans la liste déroulante.
198
WYSIWYGWeb Builder 16
Données structurées
Offrez une meilleure expérience de navigation aux utilisateurs de votre site Web et dans les moteurs de recherche, et améliorez votre référencement avec le
générateur JSON-LD intégré (schema.org).
Les schémas suivants sont actuellement pris en charge:
•
un événement
•
Album de musique
•
Liste de lecture musicale
•
Article d'actualité
•
Organisation
•
La personne
•
Produit
•
Recette
•
La revue
•
Restaurant
•
Application logicielle
•
Objet vidéo
Notez qu'il ne s'agit que d'un outil de base pour vous aider à ajouter rapidement des données structurées à vos pages Web. Il ne valide pas les données que vous
avez saisies!
L'outil de test des données structurées de Google peut être utilisé pour valider la structure des données:
https://search.google.com/structured-data/testing-tool/u/0/
199
WYSIWYGWeb Builder 16
Minuteur
L'objet Timer permet de déclencher des actions basées sur des événements de minuterie. Par exemple, affichez ou masquez un objet après x millisecondes. Les
minuteries peuvent également démarrer / arrêter d'autres minuteries! Toutes les actions d'événement sont prises en charge (animer, afficher / masquer, faire pivoter,
média, JavaScript, etc.). Les possibilités sont infinies!
Général
L'objet Timer prend en charge deux types:
•
Intervalle
Exécute une fonction, encore et encore, à des intervalles de temps spécifiés.
•
Temps libre
Exécute une fonction, une fois, après avoir attendu un nombre spécifié de millisecondes.
Intervalle
Spécifie l'intervalle en millisecondes.
Démarrage automatique
Spécifie s'il faut démarrer automatiquement le minuteur. Si cette option n'est pas activée, vous pouvez démarrer le chronomètre via des événements (par
exemple en cliquant sur un bouton).
Notez que vous pouvez également arrêter la minuterie via des événements (Timer Stop).
Événements
Dans Événements vous pouvez configurer ce qui se passera lorsque la minuterie expirera. Par exemple, vous pouvez afficher ou masquer un objet, lire un fichier
multimédia, animer quelque chose, etc.
Pour plus d'informations sur les événements, veuillez lire le chapitre «Événements» de ce document.
200
WYSIWYGWeb Builder 16
Outils de commerce électronique PayPal
Les outils de commerce électronique PayPal sont le moyen le plus rapide et le plus simple d'ajouter du commerce électronique à votre site Web. Vous pouvez
facilement créer des boutons de paiement et des fonctionnalités de panier de base pour votre site Web en quelques clics de souris! Acceptez les paiements de
n'importe qui, tout ce dont vous avez besoin pour créer un compte PayPal est une adresse e-mail! PayPal est l'un des services de paiement les plus importants et les
plus respectés sur le Web. Mieux encore, la création d'un compte ne coûte rien.
Créez un compte PayPal maintenant:
https://www.paypal.com/mrb/pal=6TUEY37GLM48U
Les outils suivants sont disponibles:
•
Bouton Acheter maintenant
Activez le commerce électronique sur votre site Web en permettant aux clients d'acheter rapidement un article à la fois.
•
Ajouter au panier Button Voir
•
le panier Button
Ces boutons font partie de la solution de panier d'achat de PayPal.
Avec le bouton «Ajouter au panier», les utilisateurs peuvent ajouter un ou plusieurs articles à leur panier. Le bouton "Afficher le panier"
permet aux utilisateurs de vérifier leur panier quand ils le souhaitent.
•
Bouton d'abonnement
Utile pour les abonnements et les paiements récurrents. Acceptez les paiements récurrents grâce à une facturation flexible et automatisée.
•
Bouton de don
Acceptez les dons par carte de crédit et compte bancaire sur votre site Web ou par e-mail.
Options
Vous pouvez joindre 6 contrôles de formulaire facultatifs afin que l'acheteur puisse sélectionner (par exemple) la taille ou la couleur d'un produit. Un
champ d'option peut être un ComboBox ou un EditBox.
La propriété Label peut être utilisée pour attribuer une étiquette à l'option. Si vous laissez ce champ vide, l'ID de l'objet sera utilisé.
Étape 1
Insérez un ComboBox ou EditBox dans la page.
Étape 2
Sélectionnez l'ID de l'objet dans la liste déroulante ci-dessus
Remarques:
Les champs d'options sélectionnés ne doivent pas faire partie d'un autre formulaire. Web Builder s'assurera qu'ils sont attachés au bouton
PayPal et renommera les objets si nécessaire.
201
WYSIWYGWeb Builder 16
Bouton Acheter maintenant
Lorsque vous utilisez les boutons Acheter maintenant de PayPal, vous pouvez vendre des articles individuels à partir de votre site Web.
Acheter maintenant Buttons est un moyen peu coûteux d'accepter les paiements par compte bancaire et peut être entièrement intégré à votre site
Web en quelques étapes faciles.
Général
Compte Paypal: Adresse e-mail de votre compte PayPal.
Image du bouton: Spécifie l'image du bouton qui sera affichée sur votre page Web. Sélectionnez ' Image personnalisée ' si vous souhaitez spécifier
une image personnalisée.
Activez SandBox: PayPal fournit un bac à sable pour vous permettre de tester votre site sans effectuer de paiements. Décochez cette
option lors de la publication de la version live de votre site!
Plus d'informations sur le bac à sable de PayPal: https://developer.paypal.com/
Fenêtre cible: Spécifie la fenêtre du navigateur dans laquelle le site Web de PayPal sera ouvert. Par défaut: PayPal. Rendez ce champ vide si
vous souhaitez que le site PayPal s'ouvre dans la fenêtre actuelle.
Détails
Nom de l'article / service: Description de l'article. Ce champ est facultatif. En cas d'omission, les clients peuvent saisir un nom d'article au moment de l'achat.
ID / numéro d'article: Variable de transmission qui vous permet de suivre les achats qui vous sont renvoyés à la fin du paiement. Ce champ
est facultatif. Si omis, aucune variable ne vous est renvoyée.
Prix: Le prix ou le montant de l'achat, hors frais d'expédition, de manutention ou de taxe. En cas d'omission, les clients peuvent saisir
un montant au moment de l'achat.
Impôt: Variable de remplacement de taxe basée sur la transaction. Définissez-le sur un montant de taxe forfaitaire à appliquer à la transaction, quel que soit
l'emplacement de l'acheteur. Cette valeur remplace tous les paramètres de taxe définis dans votre profil. Par défaut: les paramètres de taxe de profil (le cas échéant)
s'appliquent.
Devise: La devise du paiement. Définit la devise dans laquelle les variables monétaires (montant, expédition, expédition2, manutention,
taxe) sont indiquées.
Autoriser les clients à modifier la quantité: Lorsque cette option est activée, elle permet à l'acheteur de spécifier la quantité.
livraison
Expédition de base: Le coût d'expédition de cet article si vous avez activé les frais d'expédition spécifiques à l'article. Ce champ est facultatif.
Expédition supplémentaire: Le coût d'expédition de chaque article supplémentaire. Ce champ est facultatif.
Frais de gestion: Les frais de manutention. Ce n'est pas spécifique à la quantité. Le même coût de traitement est facturé quel que soit le
nombre d'articles achetés. Ce champ est facultatif.
Exiger des informations d'expédition: Spécifie s'il faut demander au client une adresse de livraison.
Autoriser la note client: Spécifie s'il faut inviter le client à inclure une note avec le paiement.
URL
URL de paiement réussie: L'URL vers laquelle le navigateur du client est renvoyé après avoir effectué le paiement; par exemple, une URL
sur votre site qui affiche une page "Merci pour votre paiement". En cas d'omission, le client est dirigé vers le site Web de PayPal.
Annuler l'URL de paiement: Une URL à laquelle le navigateur du client est renvoyé si le paiement est annulé; par exemple, une URL sur
votre site Web qui affiche un
Page «Paiement annulé». En cas d'omission, le navigateur est dirigé vers le site Web de PayPal.
Pays de l'acheteur: Définit la langue de l'acheteur pour la page de connexion uniquement.
Plus d'information:
http://www.paypal.com/cgi-bin/webscr?cmd=p/xcl/rec/singleitem-intro-outside
202
WYSIWYGWeb Builder 16
Panier PayPal
Lorsque vous utilisez le panier d'achat gratuit de PayPal sur votre site Web, vos clients peuvent acheter plusieurs articles avec un seul paiement,
parcourir l'ensemble de votre sélection et afficher une liste consolidée de tous leurs articles avant d'acheter. Le panier PayPal est un moyen peu
coûteux d'accepter les paiements par carte de crédit et par compte bancaire, et peut être entièrement intégré à votre site Web en quelques étapes
faciles. Lorsqu'un acheteur clique sur le bouton «Ajouter au panier», une nouvelle fenêtre apparaîtra répertoriant le contenu du panier PayPal de
l'acheteur, y compris l'article qui vient d'être ajouté. Pour effectuer l'achat, l'acheteur clique sur "Payer" dans cette fenêtre.
Bouton Ajouter au panier
Le bouton Ajouter au panier peut être utilisé pour ajouter un article au panier.
Général
Compte Paypal: Adresse e-mail de votre compte PayPal.
Image du bouton: Spécifie l'image du bouton qui sera affichée sur votre page Web. Sélectionnez ' Image personnalisée ' si vous souhaitez spécifier
une image personnalisée.
Activez SandBox: PayPal fournit un bac à sable pour vous permettre de tester votre site sans effectuer de paiements. Décochez cette
option lors de la publication de la version live de votre site!
Plus d'informations sur le bac à sable de PayPal: https://developer.paypal.com/
Fenêtre cible: Spécifie la fenêtre du navigateur dans laquelle le site Web de PayPal sera ouvert. Par défaut: PayPal. Rendez ce champ vide si
vous souhaitez que le site PayPal s'ouvre dans la fenêtre actuelle.
Détails
Nom de l'article / service: Description de l'article. Ce champ est facultatif. En cas d'omission, les clients peuvent saisir un nom d'article au moment de l'achat.
ID / numéro d'article: Variable de transmission qui vous permet de suivre les achats qui vous sont renvoyés à la fin du paiement. Ce champ
est facultatif. Si omis, aucune variable ne vous est renvoyée.
Prix: Le prix ou le montant de l'achat, hors frais d'expédition, de manutention ou de taxe. En cas d'omission, les clients peuvent saisir
un montant au moment de l'achat.
Impôt: Variable de remplacement de taxe basée sur la transaction. Définissez-le sur un montant de taxe forfaitaire à appliquer à la transaction, quel que soit
l'emplacement de l'acheteur. Cette valeur remplace tous les paramètres de taxe définis dans votre profil. Par défaut: les paramètres de taxe de profil (le cas échéant)
s'appliquent.
Devise: La devise du paiement. Définit la devise dans laquelle les variables monétaires (montant, expédition, expédition2, manutention,
taxe) sont indiquées.
Autoriser les clients à modifier la quantité: Permet à l'acheteur de spécifier la quantité.
URL
URL de paiement réussie: L'URL vers laquelle le navigateur du client est renvoyé après avoir effectué le paiement; par exemple, une URL
sur votre site qui affiche une page "Merci pour votre paiement". En cas d'omission, le client est dirigé vers le site Web de PayPal.
Annuler l'URL de paiement: Une URL à laquelle le navigateur du client est renvoyé si le paiement est annulé; par exemple, une URL sur votre
site Web qui affiche une page «Paiement annulé». En cas d'omission, le navigateur est dirigé vers le site Web de PayPal.
Pays de l'acheteur: Définit la langue de l'acheteur pour la page de connexion uniquement.
Bouton Afficher le panier
Le bouton Afficher le panier peut être utilisé pour afficher le contenu du panier.
Général
Compte Paypal: Adresse e-mail de votre compte PayPal.
Image du bouton: Spécifie l'image du bouton qui sera affichée sur votre page Web. Sélectionnez ' Image personnalisée ' si vous souhaitez spécifier
une image personnalisée.
Plus d'information:
http://www.paypal.com/cgi-bin/webscr?cmd=p/xcl/rec/sc-intro-outside
203
WYSIWYGWeb Builder 16
Bouton d'abonnement
Lorsque vous utilisez des abonnements PayPal et des paiements récurrents, vos clients peuvent acheter des abonnements
récurrents automatiquement sur votre site Web.
Les abonnements et les paiements récurrents sont un moyen peu coûteux pour vous d'accepter les paiements par carte de crédit et par compte bancaire pour les
abonnements au site de contenu, les frais de newsletter, les cotisations de club ou les dons récurrents, et peuvent être entièrement intégrés à votre site Web en
quelques étapes faciles. Les abonnements et les paiements récurrents ne sont disponibles que pour les comptes Business ou Premier.
Général
Compte Paypal: Adresse e-mail de votre compte PayPal.
Image du bouton: Spécifie l'image du bouton qui sera affichée sur votre page Web. Sélectionnez ' Image personnalisée ' si vous souhaitez spécifier
une image personnalisée.
Activez SandBox: PayPal fournit un bac à sable pour vous permettre de tester votre site sans effectuer de paiements. Décochez cette
option lors de la publication de la version live de votre site!
Plus d'informations sur le bac à sable de PayPal: https://developer.paypal.com/
Fenêtre cible: Spécifie la fenêtre du navigateur dans laquelle le site Web de PayPal sera ouvert. Par défaut: PayPal. Rendez ce champ vide si
vous souhaitez que le site PayPal s'ouvre dans la fenêtre actuelle.
Détails
Nom de l'abonnement: Entrez le nom de l'abonnement que vous souhaitez vendre dans le champ Nom de l'abonnement. Si vous n'entrez rien
dans ce champ, vos clients peuvent le compléter.
Numéro d'article de référence: Si vous disposez d'un ID ou d'un numéro de suivi pour votre article, saisissez-le dans le champ Numéro d'article
de référence. Ce champ ne sera pas affiché à vos clients au moment du paiement, mais ils le verront dans les détails de leur transaction sur le
site PayPal.
Devise: Choisissez la devise dans laquelle vous souhaitez que ce paiement soit libellé. Ce champ correspondra par défaut à la devise
de votre solde principal.
Facturez l'abonné pour: Saisissez votre tarif d'abonnement régulier.
Durée de chaque cycle de facturation: Spécifie le cycle de facturation normal.
Souhaitez-vous arrêter les paiements récurrents après un certain nombre?
Activez cette option si vous souhaitez mettre fin aux abonnements de vos clients après un certain nombre de paiements à vos tarifs
habituels. Cela signifie qu'une fois qu'un client a effectué le nombre spécifié de paiements à votre taux normal, son abonnement sera
terminé. Si vous désactivez cette option, les abonnements de vos clients continueront à moins d'être annulés manuellement ou par
échec de paiement.
Périodes d'essai (facultatif)
Vous pouvez saisir une période d'essai et des tarifs pour votre abonnement. Pour créer un essai gratuit
période, entrez un montant de 0. Les périodes d'essai peuvent être saisies sous la forme d'un nombre de jours, semaines, mois ou années.
Nouvelle tentative en cas d'échec
Activez cette option si vous souhaitez que PayPal réessaye automatiquement a échoué
Paiements. Les paiements seront retentés trois jours après la date d'échec. Après un second échec, PayPal réessayera cinq jours plus
tard. Un troisième échec entraînera une annulation automatique de l'abonnement.
Les paiements effectués avec des comptes bancaires sont automatiquement réessayés une fois, trois jours après que PayPal ait notifié à l'utilisateur que le
paiement a échoué. Si vous sélectionnez Non, les paiements échoués entraîneront l'annulation automatique de l'abonnement.
Exiger des informations d'expédition: Spécifie s'il faut demander au client une adresse de livraison.
Plus d'information:
http://www.paypal.com/cgi-bin/webscr?cmd=p/xcl/rec/subscr-intro-outside
204
WYSIWYGWeb Builder 16
Bouton de don
Collectez des dons à partir d'un bouton sur votre site Web.
Les dons PayPal sont un moyen peu coûteux d'accepter les dons par carte de crédit et sur compte bancaire. Intégrez les dons PayPal à votre site
Web en quelques étapes simples.
Général
Compte Paypal: Adresse e-mail de votre compte PayPal.
Image du bouton: Spécifie l'image du bouton qui sera affichée sur votre page Web. Sélectionnez ' Image personnalisée ' si vous souhaitez spécifier
une image personnalisée.
Activez SandBox: PayPal fournit un bac à sable pour vous permettre de tester votre site sans effectuer de paiements. Décochez cette
option lors de la publication de la version live de votre site!
Plus d'informations sur le bac à sable de PayPal: https://developer.paypal.com/
Fenêtre cible: Spécifie la fenêtre du navigateur dans laquelle le site Web de PayPal sera ouvert. Par défaut: PayPal. Rendez ce champ vide si
vous souhaitez que le site PayPal s'ouvre dans la fenêtre actuelle.
Détails
Nom / service du don: Saisissez une description pour le don. Si vous n'entrez rien dans ce champ, vos clients peuvent le
compléter.
ID / numéro de don: Si vous avez un identifiant ou un numéro de suivi pour votre article, saisissez-le dans le champ ID / numéro de
don. Ce champ ne sera pas affiché à vos clients au moment du don, mais ils le verront dans leurs détails de transaction sur le site
PayPal.
Devise: Choisissez la devise dans laquelle vous souhaitez que ce paiement soit libellé. Ce champ correspondra par défaut à la devise
de votre solde principal.
Exiger des informations d'expédition: Spécifie s'il faut demander au client une adresse de livraison.
Autoriser la note client: Spécifie s'il faut inviter le client à inclure une note avec le paiement.
URL
URL de paiement réussie: L'URL vers laquelle le navigateur du client est renvoyé après avoir effectué le paiement; par exemple, une URL
sur votre site qui affiche une page "Merci pour votre paiement". En cas d'omission, le client est dirigé vers le site Web de PayPal.
Annuler l'URL de paiement: Une URL à laquelle le navigateur du client est renvoyé si le paiement est annulé; par exemple, une URL sur
votre site Web qui affiche un
Page «Paiement annulé». En cas d'omission, le navigateur est dirigé vers le site Web de PayPal.
Pays de l'acheteur: Définit la langue de l'acheteur pour la page de connexion uniquement.
Plus d'information:
http://www.paypal.com/cgi-bin/webscr?cmd=p/xcl/rec/donate-intro-outside
205
WYSIWYGWeb Builder 16
Outils de connexion PHP
Note importante:
Les outils de connexion sont un ensemble de formulaires et de scripts PHP avancés. Veuillez prendre votre temps pour vous familiariser avec les outils. Lisez
d'abord toute la documentation disponible et étudiez le modèle de démonstration avant de les utiliser dans votre propre projet.
Web Builder dispose d'un système de connexion intégré (PHP) complet pour protéger par mot de passe une ou plusieurs pages.
Principales caractéristiques:
•
Protégez une page en faisant simplement glisser l'objet Protéger la page sur la page. Formulaires de connexion et de
•
déconnexion.
•
Une section Administrateur pour ajouter, modifier ou supprimer des comptes utilisateurs. Un formulaire
•
d'inscription pour permettre aux utilisateurs de créer un compte.
•
Un formulaire de changement de mot de passe pour que les utilisateurs puissent changer leur mot de
•
passe. Un formulaire de récupération de mot de passe, pour réinitialiser le mot de passe de l'utilisateur.
•
Champs de profil personnalisés.
•
Prend en charge MySQL et une base de données en texte brut.
•
Aucun codage personnalisé nécessaire, tout est «glisser-déposer»!
Exigences:
Les outils de connexion nécessitent un serveur Web avec Support PHP, donc la première étape pour commencer à utiliser les outils de connexion de WYSIWYGWeb
Builder est de vérifier si votre hébergeur prend en charge PHP!
Pointe:
Nous vous conseillons vivement de n'utiliser qu'un seul formulaire par page pour éviter les conflits entre les scripts.
Convertir en forme
Tous les formulaires de connexion incluent une option pour convertir le formulaire prédéfini / fixe en un formulaire standard (clic droit sur le formulaire de connexion pour
afficher le menu contextuel). Cela vous permet de convertir le formulaire statique en objets de création Web natifs afin que vous puissiez entièrement personnaliser la mise en
page et le code si vous le souhaitez.
Notez que la personnalisation du code PHP nécessite des connaissances en PHP. Apporter des modifications au code sans savoir ce que vous
faites entraînera un comportement indéfini!
Modèle de démonstration
Un exemple de modèle entièrement fonctionnel est inclus dans la catégorie «Démo» des modèles standard. Ce modèle montre
comment utiliser les outils de connexion de WYSIWYGWeb Builder.
Veuillez d'abord prendre votre temps pour étudier le modèle de démonstration avant d'inclure les outils de connexion dans votre propre projet. La raison la plus courante
pour laquelle les outils de connexion ne fonctionnent pas sur un site Web est due aux erreurs de configuration de l'utilisateur!
Pour ouvrir le modèle de démonstration:
1. Sélectionnez Menu-> Nouveau site Web à partir d'un modèle
2. Sélectionnez la catégorie «Démo»
3. Cliquez sur «Connexion» et appuyez sur le bouton OK.
4. Enregistrez le projet nouvellement généré dans un dossier de votre choix.
Commencez par lire les informations de la page «Premiers pas» dans le modèle.
Pour tester l'exemple complètement fonctionnel, vous devez publier toutes les pages sur un serveur Web prenant en charge PHP. N'oubliez pas non plus de créer d'abord la
base de données des utilisateurs !!!
206
WYSIWYGWeb Builder 16
Base de données des utilisateurs
Les outils de connexion utilisent un fichier de base de données sur le serveur pour stocker les informations utilisateur. Les données seront stockées dans un fichier texte séparé
par des points-virgules ou dans une table MySQL. Les mots de passe seront hachés à l'aide de md5 afin qu'ils soient enregistrés en toute sécurité.
Les outils de connexion suivants utiliseront ce fichier de base de données:
•
Administrateur
•
Changer le mot de passe
•
S'identifier
•
Récupération de mot de passe
•
S'inscrire
•
Editer le profil
Pointe:
Vous devez définir le même nom de base de données pour tous les outils de connexion!
Comment créer automatiquement une base de données utilisateur sur le serveur?
Tous les objets mentionnés ci-dessus ont un bouton dans leur fenêtre de propriétés appelé «Créer une base de données».
1. Cliquez sur "Créer une base de données"
2. Entrez un nom pour la base de données, par exemple «usersdb.php». Cliquez sur Suivant.
3. Sélectionnez l'emplacement de publication dans lequel vous allez publier ce site Web. Cliquez sur Suivant.
Remarque:
Si vous ne voyez aucun emplacement de publication, vous devez d'abord les ajouter dans la fenêtre de publication!
4. L'assistant établira une connexion avec le serveur et affichera la structure des dossiers.
5. Sélectionnez le dossier dans lequel la base de données doit être créée.
6. Cliquez sur «Terminer» pour créer le fichier.
WYSIWYGWeb Builder changera automatiquement l'autorisation du fichier afin qu'il soit activé en écriture, afin que de nouveaux utilisateurs puissent être ajoutés.
Comment créer manuellement une base de données utilisateur sur le serveur?
Une base de données utilisateur est essentiellement un fichier texte sur le serveur. Donc, si pour une raison quelconque les instructions ci-dessus échouent, vous
pouvez essayer de télécharger le fichier manuellement vous-même.
1. Ouvrez le bloc-notes ou tout autre éditeur de texte brut et créez un fichier vide nommé «usersdb.php».
2. Téléchargez le fichier dans le même dossier que vos pages protégées. Pour télécharger le fichier, vous pouvez utiliser l'outil FTP intégré ou
toute autre application FTP.
3.
Une fois le fichier téléchargé, vous devez modifier les autorisations afin que le script PHP puisse y écrire des données. Les
4.
Vous pouvez également utiliser l'outil de transfert de fichiers du panneau de contrôle de votre hôte. Il devrait y avoir une option dans votre panneau de
autorisations correctes sont 757 ou 777.
configuration d'hébergement Web pour définir les autorisations d'écriture. S'il n'est pas présent, vous pouvez contacter votre service d'hébergement Web et
demander les autorisations d'écriture pour le fichier.
Comment empêcher cet utilisateur d'afficher ou de télécharger la base de données utilisateur à partir du serveur?
Par défaut, la base de données utilisateur des outils de connexion est accessible à toute personne connaissant le nom du fichier. Et bien que les mots de
passe soient encodés, les adresses e-mail ne sont pas masquées.
Donc, la première chose à faire est de vous assurer de donner à la base de données utilisateur un nom unique qui ne peut pas être facilement deviné. Par
exemple: A6gr8JDaTa.php
207
WYSIWYGWeb Builder 16
Pour rendre la base de données utilisateur complètement inaccessible, vous pouvez créer un fichier .htaccess dans le dossier sur le serveur avec le
contenu suivant:
<Files "usersdb.php">
Ordonner refuser, autoriser
Autoriser à partir de xxx.xxx.xxx.xxx
Refuser de tous
</Files>
où usersdb.php est le nom de la base de données et xxx.xxx.xxx.xxx est votre adresse IP.
Voir également:
http://www.javascriptkit.com/howto/htaccess.shtml
Utilisation d'une base de données MySQL pour stocker les informations utilisateur (pour les utilisateurs avancés uniquement!)
Comme alternative à la base de données utilisateur en texte brut, vous pouvez également choisir de stocker les utilisateurs dans une base de données MySQL. Chaque
objet a une catégorie spéciale de base de données MySQL, dans laquelle vous pouvez configurer les propriétés de la base de données MySQL. Avant de pouvoir
utiliser cette option, vous devez créer la table sur le serveur. Connectez-vous à votre utilitaire administrateur MySQL. Créez la table USERS à l'aide de cette requête
SQL:
CRÉER UNE TABLE ʻUTILISATEURS` (
ʻId` int (10) NOT NULL auto_increment, ʻusername` varchar (50) NOT
NULL, `fullname` varchar (75) NOT NULL,` password` varchar (50)
NOT NULL, ʻemail` varchar (75) NOT NULL ,
ʻActive` tinyint (1) NOT NULL, `code` varchar (75),
`role` varchar (50),
ʻAvatar` varchar (50),
CLÉ PRIMAIRE (ʻid`));
Si vous avez ajouté des champs de profil personnalisés à l'un (ou à tous) des objets de connexion, vous devez également créer ces champs dans la base de
données. Les champs de profil personnalisés doivent être nommés extra1, extra2, extra3, etc. La requête SQL suivante génère une table avec 5 champs de profil
personnalisés supplémentaires:
CRÉER UNE TABLE ʻUTILISATEURS` (
ʻId` int (10) NOT NULL auto_increment, ʻusername` varchar (50) NOT
NULL, `fullname` varchar (75) NOT NULL,` password` varchar (50)
NOT NULL, ʻemail` varchar (75) NOT NULL ,
ʻActive` tinyint (1) NOT NULL, `code` varchar (75),
`role` varchar (50),
ʻAvatar` varchar (50),
ʻExtra1` varchar (100),
ʻExtra2` varchar (100),
ʻExtra3` varchar (100),
ʻExtra4` varchar (100),
ʻExtra5` varchar (100),
CLÉ PRIMAIRE (ʻid`)
) ;;
208
WYSIWYGWeb Builder 16
Administrateur
L'objet Administrateur vous permet d'ajouter, de modifier ou de supprimer des utilisateurs de la base de données d'utilisateurs en ligne. Pour activer le défilement
pour une grande liste d'utilisateurs, le formulaire de l'administrateur sera affiché dans un cadre en ligne.
Mot de passe administrateur
Spécifie le mot de passe de l'administrateur.
Dossier avatar
Spécifie le dossier dans lequel les images d'avatar des utilisateurs seront stockées. Notez que ce dossier
doit exister sur le serveur et doit être accessible en écriture!
Champs de profil personnalisés
Cette option peut être utilisée pour ajouter des champs supplémentaires au formulaire d'inscription.
Les nouveaux champs peuvent être de type «texte» ou «option». Un champ de texte ajoute une zone d'édition standard, tandis que les champs d'options ajoutent une zone
de liste déroulante pour donner à l'utilisateur plusieurs choix.
Vous pouvez également marquer un champ comme «obligatoire».
Le bouton «Appliquer à tous» peut être utilisé pour appliquer les champs de profil personnalisés à tous les outils de connexion au sein du projet, vous n'avez
donc pas à les synchroniser manuellement.
Notes IMPORTANTES:
Tous les objets de l'outil de connexion dans le projet doivent avoir les mêmes champs de profil personnalisés!
Lorsque vous ajoutez des champs de profil personnalisés et que vous utilisez une base de données MySQL, vous devez également ajouter ces champs à la base de données!
Activer les avatars
Ajoute la possibilité de définir une image d'avatar. L'image peut être affichée sur la page avec l'objet "Nom de connexion".
Activer le rapport d'erreurs
Si vous activez cette option, le script activera un rapport d'erreur PHP détaillé. Cela peut être utile si vous rencontrez des problèmes
avec les scripts de connexion sur le serveur. Si le rapport d'erreur PHP est activé, plus de détails sur l'erreur seront affichés.
objets par page
Spécifie le nombre d'utilisateurs qui seront affichés par page. Cela permet la navigation par pagination.
Expiration de la session
L'administrateur sera déconnecté automatiquement si la session est inactive (en fonction du délai spécifié).
Rôles des utilisateurs
Les rôles d'utilisateurs sont utilisés pour créer différents types d'utilisateurs. Ces utilisateurs n'auront accès qu'aux pages qui ont configuré ce
rôle.
Algorithme de hachage
Cela ajoute la prise en charge de l'utilisation de hachage de mot de passe amélioré bcrypt (comme alternative pour md5). Les mots de passe seront mis à jour
automatiquement lorsque l'utilisateur se connectera. Notez que vous devrez peut-être augmenter la longueur du champ de base de données (à 127 ou 255).
209
WYSIWYGWeb Builder 16
Type de base de données
Spécifie le format de base de données qui sera utilisé pour les outils de connexion.
•
Fichier plat
Le format de base de données par défaut est un fichier texte plat. Ce fichier doit être créé sur le serveur. Voir la base de données des utilisateurs pour plus
de détails.
•
MySQL
Comme alternative à la base de données utilisateur en texte brut, vous pouvez également choisir de stocker les utilisateurs dans une base de données
MySQL. Cela vous oblige à créer une nouvelle table sur le serveur MySQL. Voir la base de données des utilisateurs pour plus de détails.
Base de données
Spécifie la base de données utilisateur (fichier plat). Cette valeur sera ignorée si vous utilisez MySQL!
Nom du cadre
Spécifie le nom de ce cadre en ligne.
Base de données MySQL
Spécifie le nom de la base de données MySQL.
Mot de passe MySQL
Spécifie le mot de passe MySQL.
Serveur MySQL
Spécifie le serveur de base de données MySQL.
Table MySQL
Spécifie le nom de la table MySQL.
Nom d'utilisateur MySQL
Spécifie le nom d'utilisateur MySQL.
210
WYSIWYGWeb Builder 16
Changer le mot de passe
L'objet Modifier le mot de passe permet aux utilisateurs de modifier leur mot de passe. L'utilisateur doit être connecté pour pouvoir modifier le mot de
passe.
Note importante:
La page doit avoir l'extension de fichier 'php'! Vous pouvez modifier l'extension de fichier dans les propriétés de la page.
Image du bouton
Spécifie l'image à afficher pour le bouton lorsque la propriété du type de bouton est définie sur "Image"
Texte du bouton
Spécifie le texte à afficher pour le bouton lorsque la propriété de type de bouton est définie sur "Bouton" ou "Lien".
Type de bouton
Spécifie le type du bouton. Vous pouvez choisir parmi 3 types: bouton, image ou lien.
Confirmer l'erreur de mot de passe
Spécifie le texte à afficher lorsque le mot de passe et le mot de passe de confirmation ne correspondent pas.
Confirmer l'étiquette du mot de passe
Spécifie le texte qui identifie la zone de texte de confirmation du mot de passe.
Police de caractère
Spécifie la police utilisée pour le texte dans l'objet.
Disposition
•
Fixé
Tous les champs de saisie du formulaire auront une taille fixe. Il s'agit de la présentation utilisée dans les versions précédentes du logiciel.
•
Sensible
Dans ce mode, les champs de saisie de formulaire ont une largeur de 100% (au lieu d'une taille fixe), de sorte que le formulaire peut avoir une taille différente en
points d'arrêt.
Erreur de nouveau mot de passe invalide
Spécifie le texte à afficher lorsque le nouveau mot de passe n'est pas valide.
Nouvelle étiquette de mot de passe
Spécifie le texte qui identifie la zone de texte du nouveau mot de passe.
Erreur de non-connexion
Spécifie le texte à afficher lorsque l'utilisateur n'est pas connecté.
Erreur de l'ancien mot de passe invalide
Spécifie le texte à afficher lorsque l'ancien mot de passe n'est pas valide.
Étiquette de mot de passe
Spécifie le texte qui identifie la zone de texte du mot de passe.
Espacement
Spécifie l'espacement entre les contrôles.
Texte du titre
Spécifie le texte affiché pour le titre.
Base de données
Spécifie la base de données utilisateur. Cette valeur sera ignorée si vous utilisez MySQL!
211
WYSIWYGWeb Builder 16
Page de destination
Spécifie la page vers laquelle l'utilisateur est dirigé après une connexion réussie.
Base de données MySQL
Comme alternative à la base de données utilisateur en texte brut, vous pouvez également choisir de stocker les utilisateurs dans une base de données MySQL. Cela vous
oblige à créer une nouvelle table sur le serveur MySQL. Voir la base de données des utilisateurs pour plus de détails.
Activer MySQL
Spécifie s'il faut utiliser une base de données MySQL
Base de données
Spécifie le nom de la base de données MySQL.
Mot de passe
Spécifie le mot de passe MySQL.
Serveur
Spécifie le serveur de base de données MySQL.
Table
Spécifie le nom de la table MySQL.
Nom d'utilisateur
Spécifie le nom d'utilisateur MySQL.
Supprimer le compte
Cela permet aux utilisateurs de supprimer leur compte. Cette option est également appelée désabonnement ou désinscription.
212
WYSIWYGWeb Builder 16
S'identifier
L'objet Login fournit un formulaire standard pour se connecter aux pages protégées.
Note importante:
La page doit avoir l'extension de fichier 'php'! Vous pouvez modifier l'extension de fichier dans les propriétés de la page.
Image du bouton
Spécifie l'image à afficher pour le bouton lorsque la propriété du type de bouton est définie sur «Image».
Texte du bouton
Spécifie le texte à afficher pour le bouton lorsque la propriété de type de bouton est définie sur "Bouton" ou "Lien".
Type de bouton
Spécifie le type du bouton. Vous pouvez choisir parmi 3 types: bouton, image ou lien.
Étiquette de mot de passe
Spécifie le texte qui identifie la zone de texte du mot de passe.
Souviens-toi de moi
Spécifie le texte à afficher pour la case à cocher se souvenir de moi.
Disposition
•
Fixé
Tous les champs de saisie du formulaire auront une taille fixe. Il s'agit de la présentation utilisée dans les versions précédentes du logiciel.
•
Sensible
Dans ce mode, les champs de saisie de formulaire ont une largeur de 100% (au lieu d'une taille fixe), de sorte que le formulaire peut avoir une taille différente en
points d'arrêt.
Espacement
Spécifie l'espacement entre les contrôles.
Texte du titre
Spécifie le texte affiché pour le titre.
Étiquette de nom d'utilisateur
Spécifie le texte qui identifie la zone de texte du nom d'utilisateur.
Base de données
Spécifie la base de données utilisateur. Cette valeur sera ignorée si vous utilisez MySQL!
Page de destination
Spécifie la page vers laquelle l'utilisateur est dirigé après une connexion réussie.
Rediriger vers la page précédente
Après une connexion réussie, l'utilisateur sera redirigé vers la page précédente. C'est la page qui a déclenché la page de connexion (stockée dans $
_SESSION ['referrer'] de PHP).
Page d'erreur
Spécifie la page vers laquelle l'utilisateur est dirigé en cas d'échec de la connexion.
Afficher Remember Me
Vrai si la case à cocher se souvenir de moi est affichée.
213
WYSIWYGWeb Builder 16
Se déconnecter
L'objet Logout donne à l'utilisateur la possibilité de se connecter.
Note importante:
La page doit avoir l'extension de fichier 'php'!
Vous pouvez modifier l'extension de fichier d'une page dans les propriétés de la page.
Image du bouton
Spécifie l'image à afficher pour le bouton lorsque la propriété du type de bouton est définie sur "Image"
Texte du bouton
Spécifie le texte à afficher pour le bouton lorsque la propriété de type de bouton est définie sur "Bouton" ou "Lien".
Type de bouton
Spécifie le type du bouton. Vous pouvez choisir parmi 3 types: bouton, image ou lien.
Page de déconnexion
Spécifie la page vers laquelle l'utilisateur est dirigé lors de la déconnexion.
214
WYSIWYGWeb Builder 16
Récupération de mot de passe
L'objet Password Recovery permet aux utilisateurs de réinitialiser leur mot de passe. Un e-mail
sera envoyé avec le nouveau mot de passe (aléatoire).
Si l'utilisateur souhaite modifier le mot de passe, il peut utiliser le formulaire Modifier le mot de passe.
Note importante:
La page doit avoir l'extension de fichier 'php'! Vous pouvez modifier l'extension de fichier dans les propriétés de la page.
Image du bouton
Spécifie l'image à afficher pour le bouton lorsque la propriété du type de bouton est définie sur «Image».
Texte du bouton
Spécifie le texte à afficher pour le bouton lorsque la propriété de type de bouton est définie sur "Bouton" ou "Lien".
Type de bouton
Spécifie le type du bouton. Vous pouvez choisir parmi 3 types: bouton, image ou lien.
Disposition
•
Fixé
Tous les champs de saisie du formulaire auront une taille fixe. Il s'agit de la présentation utilisée dans les versions précédentes du logiciel.
•
Sensible
Dans ce mode, les champs de saisie de formulaire ont une largeur de 100% (au lieu d'une taille fixe), de sorte que le formulaire peut avoir une taille différente en
points d'arrêt.
Espacement
Spécifie l'espacement entre les contrôles.
Texte du titre
Spécifie le texte affiché pour le titre.
Étiquette d'e-mail
Spécifie le texte qui identifie la zone de texte du nom d'utilisateur.
Base de données
Spécifie la base de données utilisateur. Cette valeur sera ignorée si vous utilisez MySQL!
Page de réussite
Spécifie la page vers laquelle l'utilisateur est dirigé une fois l'action réussie.
Email de
Spécifie l'adresse e-mail de l'expéditeur.
Message électronique
Spécifie le message électronique.
Sujet du courriel
Spécifie l'objet de l'e-mail.
215
WYSIWYGWeb Builder 16
Page protégée
Pour protéger n'importe quelle page de votre site Web, faites simplement glisser et déposez l'objet «Page protégée» sur la page. Si l'utilisateur n'est
pas connecté, il sera redirigé vers la «Page d'accès refusé».
Note importante:
La page doit avoir l'extension de fichier 'php'! Vous pouvez modifier l'extension de fichier dans les propriétés de la page.
Page d'accès refusé
Spécifie la page vers laquelle l'utilisateur est dirigé s'il n'est pas connecté.
Autoriser les utilisateurs
Spécifie les utilisateurs qui peuvent accéder à la page. Vous pouvez entrer une liste d'utilisateurs séparés par des virgules: Bill, Steve, Gary.
Si vous laissez cette propriété vide, tous les utilisateurs enregistrés peuvent accéder à la page.
Rôles des utilisateurs
Les rôles d'utilisateurs sont utilisés pour créer différents types d'utilisateurs. Ces utilisateurs n'auront accès qu'aux pages qui ont configuré ce
rôle.
216
WYSIWYGWeb Builder 16
S'inscrire
L'objet Inscription permet aux utilisateurs de s'inscrire pour un nouveau compte utilisateur.
Le nouveau compte sera créé immédiatement après que l'utilisateur aura rempli le formulaire. Un e-mail sera
envoyé à l'adresse e-mail spécifiée avec les informations de connexion.
Notez que n'importe qui peut créer un compte, n'utilisez cet objet que pour les pages publiques!
Note importante:
La page doit avoir l'extension de fichier 'php'! Vous pouvez modifier l'extension de fichier dans les propriétés de la page.
Image du bouton
Spécifie l'image à afficher pour le bouton lorsque la propriété du type de bouton est définie sur "Image"
Texte du bouton
Spécifie le texte à afficher pour le bouton lorsque la propriété de type de bouton est définie sur "Bouton" ou "Lien".
Type de bouton
Spécifie le type du bouton.
Captcha activé
Spécifie si CAPTCHA doit être activé.
Étiquette Captcha
Spécifie le texte qui identifie le champ CAPTCHA.
Confirmer l'erreur de mot de passe
Spécifie le texte à afficher lorsque le mot de passe et le mot de passe de confirmation entrés par l'utilisateur ne correspondent pas.
Confirmer l'étiquette du mot de passe
Spécifie le texte qui identifie la zone de texte de confirmation du mot de passe.
Erreur d'e-mail non valide
Spécifie le texte à afficher lorsque l'adresse e-mail saisie par l'utilisateur n'est pas valide.
Étiquette d'e-mail
Spécifie le texte qui identifie la zone de texte de l'e-mail.
Police de caractère
Spécifie la police utilisée pour le texte dans l'objet.
Disposition
•
Fixé
Tous les champs de saisie du formulaire auront une taille fixe. Il s'agit de la présentation utilisée dans les versions précédentes du logiciel.
•
Sensible
Dans ce mode, les champs de saisie de formulaire ont une largeur de 100% (au lieu d'une taille fixe), de sorte que le formulaire peut avoir une taille différente en
points d'arrêt.
Erreur de nom complet non valide
Spécifie le texte à afficher lorsque le nom complet entré par l'utilisateur n'est pas valide.
Étiquette de nom complet
Spécifie le texte qui identifie la zone de texte du nom complet.
217
WYSIWYGWeb Builder 16
Erreur de mot de passe invalide
Spécifie le texte à afficher lorsque le mot de passe entré par l'utilisateur n'est pas valide.
Étiquette de mot de passe
Spécifie le texte qui identifie la zone de texte du mot de passe.
Espacement
Spécifie l'espacement entre les contrôles.
Texte du titre
Spécifie le texte affiché pour le titre.
Erreur de nom d'utilisateur déjà utilisé
Spécifie le texte à afficher lorsque le nom d'utilisateur existe déjà.
Erreur de nom d'utilisateur non valide
Spécifie le texte à afficher lorsque le nom d'utilisateur entré par l'utilisateur n'est pas valide.
Étiquette de nom d'utilisateur
Spécifie le texte qui identifie la zone de texte du nom d'utilisateur.
Comportement
Activation de compte
Spécifie s'il faut activer l'activation du compte par l'administrateur. Si cette option est «Administrateur», les nouveaux comptes ne seront pas
activés tant que l'administrateur ne les aura pas activés.
Si cette option est "Automatique", le compte sera activé immédiatement après que l'utilisateur aura rempli le formulaire. Si l'option de
vérification "E-mail" est sélectionnée, l'utilisateur doit activer le compte via un lien dans l'e-mail de confirmation avant qu'il ne soit activé.
Cela garantit que l'e-mail spécifié est valide.
Pointe:
Si vous activez la vérification par e-mail, vous souhaiterez probablement inclure des instructions dans le message électronique pour indiquer à
l'utilisateur d'utiliser le lien d'activation dans le message pour activer le compte!
218
WYSIWYGWeb Builder 16
Champs de profil personnalisés
Cette option peut être utilisée pour ajouter des champs supplémentaires au formulaire d'inscription.
Les nouveaux champs peuvent être de type «texte» ou «option». Un champ de texte ajoute une zone d'édition standard, tandis que les champs d'options ajoutent une zone
de liste déroulante pour donner à l'utilisateur plusieurs choix. Vous pouvez également marquer un champ comme «obligatoire».
Le bouton «Appliquer à tous» peut être utilisé pour appliquer les champs de profil personnalisés à tous les outils de connexion au sein du projet, vous n'avez
donc pas à les synchroniser manuellement.
Notes IMPORTANTES:
Tous les objets de l'outil de connexion dans le projet doivent avoir les mêmes champs de profil personnalisés!
Lorsque vous ajoutez des champs de profil personnalisés et que vous utilisez une base de données MySQL, vous devez également ajouter ces champs à la base de données!
Base de données
Spécifie la base de données utilisateur. Cette valeur sera ignorée si vous utilisez MySQL!
Page de réussite
Spécifie la page vers laquelle l'utilisateur est dirigé une fois l'action réussie.
Page vérifiée
Spécifie la page vers laquelle l'utilisateur est dirigé après la vérification de l'e-mail. Cette valeur ne sera utilisée que si l'activation du compte est définie
sur «E-mail»!
Activer les avatars
Ajoute la possibilité pour l'utilisateur de définir une image d'avatar. L'image peut être affichée sur la page avec l'objet "Nom de connexion".
Email
Adresse e-mail de l'administrateur
Spécifie l'adresse e-mail de l'administrateur. Cela peut être laissé vide. Une copie de l'e-mail de
confirmation d'inscription sera envoyée à cette adresse.
Email de
Spécifie l'adresse e-mail de l'expéditeur.
Message électronique
Spécifie le message électronique.
Sujet du courriel
Spécifie l'objet de l'e-mail.
Editer le profil
L'objet Modifier le profil permet à un utilisateur de modifier les paramètres de son compte. L'utilisateur doit être connecté pour pouvoir accéder au profil.
Cet objet est très similaire à l'objet Inscription et la plupart des propriétés sont identiques.
219
WYSIWYGWeb Builder 16
Connexion sociale
Une tendance dans de nombreux sites Web actuels est une fonctionnalité qui permet aux utilisateurs de se connecter via leurs comptes de réseaux
sociaux. Par exemple, certains sites Web ont la possibilité d'utiliser leur compte Facebook, Twitter, Google ou Instagram pour se connecter sans avoir
à créer de compte.
Avec "Connexion sociale", les utilisateurs peuvent se connecter à des pages protégées par mot de passe en utilisant les informations existantes d'un service de réseau
social.
Lorsque l'utilisateur clique sur le bouton de connexion, il est redirigé vers le site Web du fournisseur (Facebook, Twitter, etc.). Ici, ils
sont invités à autoriser le site Web. Après une connexion réussie, l'utilisateur sera redirigé vers votre site Web.
WYSIWYGWeb Builder peut stocker les informations sur l'utilisateur dans une base de données telle que e-mail, nom, site Web, etc. Notez cependant
que tous les fournisseurs (comme Twitter) ne renvoient pas une adresse e-mail, mais ils incluent tous un numéro d'identification.
Outre les informations standard telles que l'adresse e-mail et le nom, vous pouvez également stocker d'autres informations spécifiques à chaque fournisseur social. Par
exemple, pour Facebook, vous pouvez stocker la page Facebook ou l'avatar de l'utilisateur.
Tutoriel en ligne: http://www.wysiwygwebbuilder.com/social_login.html
Texte du bouton
Spécifie le texte à afficher pour le bouton.
Page de destination
Spécifie la page vers laquelle l'utilisateur est dirigé après une connexion réussie.
Activer le rapport d'erreurs
Si vous activez cette option, le script activera un rapport d'erreur PHP détaillé. Cela peut être utile si vous rencontrez des problèmes
avec les scripts de connexion sur le serveur. Si le rapport d'erreur PHP est activé, plus de détails sur l'erreur seront affichés.
Page d'erreur
Spécifie la page vers laquelle l'utilisateur est dirigé en cas d'échec de la connexion.
Clé
Spécifie la clé du consommateur d'application ou l'ID d'application.
Secret
Spécifie le secret du consommateur de l'application.
Fournisseur
Spécifie le réseau social à utiliser pour la connexion.
220
WYSIWYGWeb Builder 16
Rôle d'utilisateur
Spécifie le rôle des utilisateurs connectés via un réseau social.
Cela permet de restreindre l'accès à des pages spécifiques uniquement. Par exemple, en ajoutant un rôle «sociallogin».
Remarques:
Les rôles d'utilisateur peuvent être configurés dans l'objet Admin de connexion.
Dans l'objet «Page protégée», vous pouvez sélectionner les rôles d'utilisateur ayant accès à la page.
Base de données
L'objet Social Login peut stocker des données de réseaux sociaux dans une base de données MySQL. Le de la
table doit avoir la structure suivante:
CRÉER UNE TABLE ʻUTILISATEURS` (
ʻId` int (10) NON NULL,
ʻUsername` varchar (50) NOT NULL, `fullname` varchar
(75) NOT NULL,` password` varchar (50) NOT NULL,
ʻemail` varchar (75) NOT NULL, ʻactive` tinyint (1) NOT
NULL, `code` varchar (75) NOT NULL, ʻavatar` varchar
(128) NOT NULL,` role` varchar (16) NOT NULL,
`provider_name` varchar (25) NOT NULL,` provider_uid` varchar
(255) NOT NULL
)
Notez qu'il s'agit de la même structure que les outils de connexion, mais nous avons ajouté 2 champs supplémentaires pour stocker des informations sur
les réseaux sociaux: 'provider_name' et 'provider_uid'. Ceux-ci sont utilisés pour stocker le nom du fournisseur (par exemple Facebook, Twitter) et un
numéro d'identification unique.
Si vous souhaitez stocker plus de données, vous pouvez également ajouter des champs supplémentaires. Par exemple, profileURL, `photoURL etc.
CRÉER UNE TABLE ʻUTILISATEURS` (
ʻId` int (10) NON NULL,
ʻUsername` varchar (50) NOT NULL, `fullname` varchar
(75) NOT NULL,` password` varchar (50) NOT NULL,
ʻemail` varchar (75) NOT NULL, ʻactive` tinyint (1) NOT
NULL, `code` varchar (75) NOT NULL, ʻavatar` varchar
(128) NOT NULL,` role` varchar (16) NOT NULL,
`provider_name` varchar (25) NOT NULL,` provider_uid` varchar
(255) NOT NULL, `profileURL` varchar (255) NOT NULL,`
photoURL` varchar (255) NOT NULL
)
Une liste complète des champs disponibles peut être trouvée ici:
https://hybridauth.github.io/hybridauth/userguide/Profile_Data_User_Profile.html
Remarque: vous devrez également configurer ces champs dans la propriété 'Champs de profil personnalisés'!
Champs de profil personnalisés
Il s'agit d'une liste de valeurs séparées par des virgules pour contrôler quels champs supplémentaires doivent être stockés dans la base de données MySQL. Par
exemple, profileURL, photoURL
221
WYSIWYGWeb Builder 16
Email
Lorsqu'un nouveau compte a été créé avec succès, un e-mail peut être envoyé à l'administrateur du site Web.
Adresse e-mail de l'administrateur
Spécifie l'adresse e-mail de l'administrateur. Celui-ci peut être laissé vide, auquel cas aucun e-mail ne sera envoyé.
De
Spécifie l'adresse e-mail de l'expéditeur.
Message
Spécifie le message électronique.
Matière
Spécifie l'objet de l'e-mail.
Remarque: lorsque l'hôte Web ne prend pas en charge la messagerie PHP standard ou que vous avez besoin d'une authentification SMTP, PHP Mailer est disponible pour
la configuration avancée du serveur de messagerie.
222
WYSIWYGWeb Builder 16
Système de gestion de contenu
Note importante:
Les outils du système de gestion de contenu sont un ensemble de formulaires et de scripts PHP avancés. Veuillez prendre votre temps pour vous familiariser avec
les outils. Lisez d'abord toute la documentation disponible et étudiez le modèle de démonstration avant de commencer à les utiliser dans votre propre projet!
WYSIWYGWeb Builder dispose d'un système de gestion de contenu intégré complet (basé sur PHP) pour vous permettre, à vous ou à vos
clients, de gérer le contenu en ligne. L'idée de base est que le contenu de la page sera affiché dans une zone fixe de la page, c'est la vue CMS.
Vous pouvez considérer cela comme un cadre en ligne ou un espace réservé de contenu, bien que le contenu soit fusionné de manière
dynamique avec le reste de la page lorsque la page est demandée au serveur. Fondamentalement, cela signifie que vous ne pouvez avoir
qu'une seule page pour l'ensemble du site Web et que le reste du contenu est géré sur le serveur. Bien que vous puissiez mélanger du contenu
dynamique et fixe! La mise en page de la page (également appelée bordure principale) peut être conçue avec les outils WYSIWYG Web Builder
standard. La navigation (menu CMS) sera automatiquement générée en fonction de la structure du site sur le serveur, donc vous ne
Remarque:
Il est important de comprendre que ce système de gestion de contenu ne remplace pas les solutions en ligne comme Joomla, Drupal ou
WordPress. Le CMS a été conçu comme un complément et non comme un remplacement pour les sites Web WYSIWYGWeb Builder. Vous allez
donc créer la mise en page dans le logiciel et le contenu en ligne.
Un CMS est également pas un éditeur HTML en ligne. Vous ne modifiez pas la page entière, seulement la zone de contenu!
Principales caractéristiques:
•
Panneau d'administration en ligne pour ajouter / modifier / copier et supprimer des pages.
•
Le panneau de l'administrateur prend en charge plusieurs éditeurs populaires tels que CKEditor, TinyMCE et CLEditor. Il dispose également d'un éditeur
•
Vous pouvez masquer les pages de la structure de menu en cours de construction.
•
CMS dispose de plusieurs «blocs de conception» individuels pour vous offrir autant de flexibilité que possible, afin que vous puissiez facilement intégrer les
•
Un objet CMS View, qui est un espace réservé pour le contenu en ligne.
•
Un objet Menu CMS, qui peut être utilisé pour naviguer entre les pages en ligne. Le menu propose de nombreuses options personnalisables.
•
Un objet de recherche CMS, qui peut être utilisé pour rechercher du contenu en ligne. L'index de recherche sera
•
Un objet d'étiquette CMS, il peut être utilisé pour afficher le titre de la page, la date de création, l'auteur, les pages vues, etc.
intégré simple.
outils dans vos mises en page existantes.
automatiquement créé / mis à jour par le CMS.
n'importe où sur la page.
•
Le CMS s'intègre aux outils de connexion afin que vous puissiez affecter différents utilisateurs au CMS, mais également avoir un administrateur global.
•
Le CMS prend en charge les pages externes, vous pouvez donc mélanger du contenu en ligne avec des pages standard. Ou même des pages d'autres sites
•
Comprend un simple gestionnaire de fichiers qui peut être utilisé pour télécharger et gérer des fichiers en ligne (comme des images).
•
Prend en charge les plug-ins pour étendre le fonctionnement du CMS avec (par exemple un livre d'or, des commentaires, une protection par mot
Web.
de passe, une boutique en ligne, etc.).
Exigences:
Les outils de connexion nécessitent un serveur Web avec support PHP et MySQL, donc la première étape avant de commencer à utiliser les outils CMS de
WYSIWYGWeb Builder est de vérifier si votre hébergeur prend en charge PHP / MySQL!
Un exemple de modèle entièrement fonctionnel est inclus dans la catégorie «Démo» des modèles standard.
223
WYSIWYGWeb Builder 16
Base de données CMS
Le système de gestion de contenu nécessite une base de données pour stocker les données de page et d'autres informations associées. Ce système utilise MySQL,
donc votre compte d'hébergement doit avoir accès à une base de données MySQL. La plupart des comptes d'hébergement payants ont un support de base de
données inclus. Sinon, veuillez contacter votre hébergeur pour mettre à niveau votre plan d'hébergement existant.
Après avoir vérifié si votre site Web prend en charge MySQL, vous devez soit créer une nouvelle base de données, soit noter les détails d'une base de données
existante. Veuillez consulter la documentation de votre hébergeur pour plus de détails sur la façon de créer une base de données. Ceci est différent pour chaque
hôte, il n'y a donc pas d'instructions génériques que nous pouvons vous donner pour cela. Pour pouvoir utiliser les outils CMS, vous aurez besoin des informations
suivantes:
•
Serveur
•
données
•
d'utilisateur
•
passe
Spécifie le serveur de base de données MySQL. Base de
Spécifie le nom de la base de données MySQL. Nom
Spécifie le nom d'utilisateur MySQL. Mot de
Spécifie le mot de passe MySQL.
Le CMS créera automatiquement les tables requises si elles n'existent pas, vous n'avez donc pas à créer les tables manuellement. Les
tables suivantes seront créées (notez que le préfixe de table 'CMS_' est configurable):
CMS_PAGES
Ce tableau contient les informations de la page comme le titre de la page, le contenu, la date de création / mise à jour, le nombre de vues, etc.
CMS_SEARCH_WORDS
Cette table fait partie de l'index de recherche et contient tous les mots uniques.
CMS_SEARCH_WORDMATCH
Ce tableau fait partie de l'index de recherche et contient la relation mot à page.
Bien que ces tables soient automatiquement créées la première fois que vous vous connectez à l'administrateur du CMS, vous pouvez également les créer
manuellement.
-- - Structure de la table pour la table `CMS_PAGES̀
-CRÉER UNE TABLE `CMS_PAGES` (
`ìd` int (10) unsigned NOT NULL auto_increment,` c̀ategory_id` int (11)
NOT NULL,
`ǹame` varchar (255) NOT NULL,` c̀ontent` ̀text
NOT NULL,
`h̀ome` tinyint (1) NOT NULL par défaut '0',` v̀isible` ̀tinyint (1)
NOT NULL,
horodatage `c̀reate_date` NOT NULL par défaut CURRENT_TIMESTAMP à la mise à jour CURRENT_TIMESTAMP,` c̀reated_by` varchar
(255) NOT NULL,
horodatage `l̀ast_update_date` NOT NULL par défaut '0000-00-00 00:00:00',` l̀ast_update_by` varchar (255)
NOT NULL,
`v̀iews` int (11) NON NULL,
`m̀enu_index` smallint (4) NOT NULL,` ùrl` varchar
(255) NULL,
`èxtra_data` varchar (255) NULL,
«titre» VARCHAR (100),
«description» VARCHAR (255),
VARCHAR `k̀eywords` (255),
`sCHeo_friendly_url` VARCHAR (100),
CLÉ PRIMAIRE (ʻid`));
224
WYSIWYGWeb Builder 16
-- - Structure de la table pour la table `CMS_SEARCH_WORDMATCH̀
-CREATE TABLE `CMS_SEARCH_WORDMATCH` (`
p̀age_id` ̀int (10) unsigned NOT NULL, `ẁord_id` ̀int (10)
unsigned NOT NULL, PRIMARY KEY (` page_id`,
`word_id`));
-- - Structure de la table pour la table `CMS_SEARCH_WORDS̀
-CRÉER LA TABLE `CMS_SEARCH_WORDS` (
`ìd` int (10) unsigned NOT NULL auto_increment,` ẁord` varchar (50)
NOT NULL,
CLÉ PRIMAIRE (ʻid`));
225
WYSIWYGWeb Builder 16
Administrateur CMS
Note importante:
Les outils du système de gestion de contenu sont un ensemble de formulaires et de scripts PHP avancés. Veuillez prendre votre temps pour vous familiariser avec
les outils. Lisez d'abord toute la documentation disponible et étudiez le modèle de démonstration avant de commencer à les utiliser dans votre propre projet!
L'objet Administrateur CMS vous permet d'ajouter, de modifier ou de supprimer des pages en ligne.
Vous pouvez (facultatif) installer votre éditeur HTML en ligne préféré (comme CKEditor, TinyMCE et CLEditor) pour rendre les outils CMS
encore plus puissants!
Apparence
Couleur de l'arrière plan
Spécifie la couleur de l'arrière-plan.
Couleur de la bordure
Spécifie la couleur de la bordure autour de l'objet.
Largeur de la bordure
Spécifie la largeur de la bordure autour de l'objet.
Police de caractère
Spécifie la police utilisée pour afficher le texte dans l'objet.
Couleur du titre
Spécifie la couleur du titre.
Couleur du texte du titre
Spécifie la couleur du texte du titre.
Couleur du texte
Couleur du texte.
Comportement
Mot de passe administrateur
Spécifie le mot de passe de l'administrateur.
Autoriser les utilisateurs
Spécifie les utilisateurs qui peuvent accéder à la section d'administration. Vous pouvez entrer une liste d'utilisateurs séparés par des virgules: Bill, Steve, Gary.
Ces utilisateurs doivent exister dans votre configuration des outils de connexion! Si vous laissez cette propriété vide, alors seul l'administrateur peut se connecter
(en utilisant le mot de passe spécifié sous AdminPassword).
226
WYSIWYGWeb Builder 16
Dossier de ressources
Spécifie le dossier (en ligne) dans lequel les nouveaux fichiers seront téléchargés.
Si vous spécifiez ./files, un dossier portant le nom «files» doit exister dans le dossier actuel sur le serveur et il doit disposer des autorisations
d'écriture. Le dossier ne peut / ne sera pas créé automatiquement, vous devez donc le créer vous-même sur le serveur.
Nom du cadre
Pour activer le défilement d'une grande liste de pages, l'administrateur CMS sera affiché dans un cadre en ligne. La propriété 'FrameName'
spécifie le nom de ce cadre en ligne. Normalement, vous n'êtes pas obligé de le modifier.
Vous pouvez `` casser '' le cadre en le liant directement au fichier de script comme ceci:
. /cmsadmin.php
ou en utilisant l'URL complète:
http://www.yourwebsite.com/cmsadmin.php
Dans ce cas, la fenêtre complète du navigateur sera utilisée.
Désactiver la gestion des pages pour les utilisateurs
Activez cette option pour masquer "Créer une nouvelle page", "Copier", "Supprimer", "Définir la page d'accueil" et "Commander" pour les utilisateurs standard.
Les options seront toujours disponibles pour l'administrateur.
Activer le rapport d'erreurs
Si vous activez cette option, le script activera un rapport d'erreur PHP détaillé. Cela peut être utile si vous rencontrez des
problèmes avec les scripts CMS sur le serveur. Si le rapport d'erreur PHP est activé, plus de détails sur l'erreur seront affichés.
Expiration de la session
L'administrateur sera déconnecté automatiquement si la session est inactive (en fonction du délai spécifié).
Base de données MySQL
Veuillez lire la base de données CMS pour plus de détails.
Base de données
Spécifie le nom de la base de données MySQL.
Mot de passe
Spécifie le mot de passe MySQL.
Serveur
Spécifie le serveur de base de données MySQL.
Nom de la table
Spécifie le préfixe du nom de la table MySQL. Les tables requises seront automatiquement créées dans la base de données spécifiée.
Nom d'utilisateur
Spécifie le nom d'utilisateur MySQL.
227
WYSIWYGWeb Builder 16
Éditeur
Dans cette section, vous pouvez spécifier quel éditeur sera utilisé pour éditer le contenu en ligne.
WYSIWYGWeb Builder prend en charge plusieurs éditeurs populaires tels que CKEditor, TinyMCE et CLEditor. Il dispose également d'un éditeur intégré simple.
Remarque:
En raison des restrictions de licence, nous ne sommes pas autorisés à distribuer certains de ces éditeurs avec WYSIWYGWeb Builder, vous
devrez donc les installer manuellement sur votre ordinateur avant de pouvoir les utiliser! Cependant, une fois installé sur votre ordinateur, WWB se
chargera de la publication et de la configuration des éditeurs.
Hauteur de l'éditeur
Spécifie la hauteur de l'éditeur.
Type d'éditeur
Spécifie le type d'éditeur. L'objet CMS Admin a une prise en charge intégrée pour les éditeurs suivants:
•
TextArea
•
Éditeur WWB
Éditeur de texte brut standard. Aucune exigence particulière.
Un simple éditeur de texte WYSIWYG en ligne créé par l'équipe WYSIWYGWeb Builder. Prend en charge le formatage de texte de base et
dispose d'une barre d'outils configurable.
•
Éditeur CL
CLEditor est un plugin jQuery open source qui fournit un éditeur HTML WYSIWYG léger, complet,
multi-navigateurs, extensible.
http://premiumsoftware.net/cleditor
•
TinyMCE (version jQuery)
TinyMCE est un contrôle d'éditeur Javascript HTML WYSIWYG basé sur le Web et indépendant de la plate-forme publié en Open
Source sous LGPL par Moxiecode Systems AB.
http://www.tinymce.com/
•
Éditeur CK
CKEditor est un éditeur de texte à utiliser dans les pages Web. Il s'agit d'un éditeur WYSIWYG, ce qui signifie que le texte en cours de modification
ressemble autant que possible aux résultats obtenus par les utilisateurs lors de sa publication. Il apporte au Web des fonctionnalités d'édition
communes trouvées sur les applications d'édition de bureau telles que Microsoft Word et OpenOffice.
http://ckeditor.com/
Avertissement:
Bien que nous ayons ajouté la prise en charge des éditeurs en ligne tiers, nous ne pouvons pas et ne pouvons pas fournir d'assistance sur leurs fonctionnalités. La
plupart des éditeurs en ligne utilisent la fonctionnalité d'édition HTML intégrée du navigateur, vous pouvez donc remarquer un comportement différent entre les
navigateurs. Malheureusement, nous n'avons absolument aucun contrôle là-dessus.
228
WYSIWYGWeb Builder 16
Les éditeurs doivent être installés dans le dossier Mes Documents \ WYSIWYGWeb Builder \ system \ cms.
Chaque éditeur a son propre dossier:
Mes documents \ WYSIWYGWeb Builder \ system \ cms \ ckeditor
Mes documents \ WYSIWYGWeb Builder \ system \ cms \ cleditor
Mes documents \ WYSIWYGWeb Builder \ system \ cms \ tinymce
Mes documents \ WYSIWYGWeb Builder \ system \ cms \ wwbeditor
Paramètres de l'éditeur
Spécifie des paramètres d'éditeur supplémentaires.
La plupart des éditeurs ont de nombreuses options de configuration. Pour garder cette solution aussi générique que possible, nous avons ajouté cette option afin que vous
puissiez affiner l'éditeur si vous le souhaitez.
Consultez la documentation de l'éditeur spécifique pour plus de détails.
Voici un exemple pour l'éditeur WWB qui vous permet de modifier la barre d'outils. Pour la barre d'outils complète,
vous pouvez utiliser les paramètres suivants:
boutons:
{
'annuler': faux,
'redo': faux,
'bold': vrai,
'italique': vrai,
'underline': vrai,
'barré': vrai,
'justifyleft': vrai,
'justifycenter': vrai,
'justifyright': vrai,
'justifyfull': vrai,
'insertorderedlist': vrai,
'insertunorderedlist': vrai,
'indent': vrai,
'outdent': vrai,
'createLink': vrai,
'unlink': vrai,
'insertimage': vrai,
'inserthorizontalrule': faux,
'couper': faux,
'copier': faux,
'coller': faux,
'avant-couleur': vrai,
'hilitecolor': vrai,
'br': vrai,
'formatblock': vrai,
'fontname': vrai,
'fontsize': vrai
}
229
WYSIWYGWeb Builder 16
Ou pour une barre d'outils de base, vous pouvez utiliser:
boutons:
{
'annuler': faux,
'redo': faux,
'bold': vrai,
'italique': vrai,
'underline': vrai,
'barré': vrai,
'justifyleft': faux,
'justifycenter': faux,
'justifyright': faux,
'justifyfull': faux,
'insertorderedlist': faux,
'insertunorderedlist': faux,
'indent': faux,
'outdent': faux,
'createLink': faux,
'unlink': faux,
'insertimage': faux,
'inserthorizontalrule': faux,
'couper': faux,
'copier': faux,
'coller': faux,
'avant-couleur': vrai,
'hilitecolor': vrai,
'br': vrai,
'formatblock': vrai,
'fontname': vrai,
'fontsize': vrai
}
Voici un autre exemple pour tinymce. Ce code active le 'thème avancé:
thème: "avancé"
et cet exemple active divers plugins:
thème: "avancé",
plugins:
"saut de page, style, calque, tableau, enregistrer, advhr, advimage, advlink, émotions, iespell, inlinepopups, i nsertdatetime, aperçu, média,
searchreplace, impression, menu contextuel, coller, directionnalité, fullscr
een, non modifiable, visualchars, insécable, xhtmlxtras, modèle "
Les options multiples doivent être séparées par des virgules (le dernier élément n'a pas de virgule! À la fin):
option1: "string_value",
option2: vrai,
option3: valeur_numérique
Publier les fichiers de l'éditeur
Spécifie s'il faut publier les fichiers de l'éditeur.
Si cette option est activée, WWB publiera / téléchargera tous les fichiers de l'éditeur sur votre site Web. Notez que certains éditeurs utilisent beaucoup de
fichiers, cela peut donc prendre un certain temps.
En général, vous activez cette option la première fois que vous publiez votre site Web, puis désactivez-la pour que les fichiers ne soient pas
publiés la deuxième fois.
Si vous êtes un utilisateur avancé, vous pouvez également télécharger l'éditeur manuellement en utilisant votre client FTP préféré.
230
WYSIWYGWeb Builder 16
Comment ajouter une nouvelle page?
1. Connectez-vous à la section d'administration en ligne. Soit utiliser le Mot de passe administrateur ou connectez-vous en utilisant un nom d'utilisateur / mot
de passe des outils de connexion (dans ce cas, vous devez vous connecter en utilisant le formulaire de connexion).
2. Ajoutez une nouvelle page en cliquant sur l'option «Nouvelle page».
3. Dans le Nom entrez le nom de la page. Ce nom sera affiché dans le menu CMS.
4. Le Contenu champ contient le contenu de la page. Si vous avez configuré l'un des éditeurs, vous verrez un éditeur
What-You-See-Is-What-You-Get. Sinon, vous verrez la saisie de texte standard qui vous permet d'entrer du texte brut ou du
code HTML.
5. Le URL externe Le champ peut être utilisé pour spécifier un lien vers une page externe. Ce champ doit être vide pour les pages standard! Voir
«Comment inclure des pages externes» pour plus de détails.
6. Le Données supplémentaires Le champ peut être utilisé pour affecter des données supplémentaires à une page et en faire une partie de la mise en page. Voir
"Comment attribuer des données supplémentaires et les afficher sur la page?" pour plus de détails.
7. Visible spécifie si la page doit être affichée dans le menu CMS.
8. Cliquez sur sauvegarder pour enregistrer la nouvelle page.
Comment inclure des pages externes dans le CMS?
1. Ajoutez une nouvelle page en cliquant sur l'option «Nouvelle page» dans l'Administrateur.
2. Donnez un nom à la nouvelle page, par exemple «Page externe».
3. Laissez la zone de contenu vide.
4. Entrez l'URL de la page externe dans le champ URL. Cela peut être une page externe:
http://www.wysiywgwebbuilder.com/ ou une page interne: ./internalpage.html
Comment attribuer des données supplémentaires et les afficher sur la page?
Vous pouvez attribuer des données supplémentaires à une page et l'intégrer à la mise en page.
En mode éditeur de page de l'administrateur, vous remarquerez le champ 'Données supplémentaires', ici vous pouvez écrire du texte comme un
slogan qui s'applique à la page.
Dans votre mise en page, vous pouvez ensuite utiliser l'objet d'étiquette CMS pour afficher ce texte n'importe où dans la mise en page en utilisant la variable $
cms_extra_data.
Plug-ins CMS
Les plug-ins peuvent ajouter de nouvelles commandes au menu des plug-ins (comme le gestionnaire d'utilisateurs et le gestionnaire de fichiers). Ou ajoutez de nouvelles
fonctionnalités à la page. Par exemple, le plug-in «Commentaires» permet aux utilisateurs de publier des commentaires sur une page.
Les plug-ins pour le CMS sont stockés dans le dossier
Mes documents \ WYSIWYGWeb Builder \ system \ plugins \
Les utilisateurs avancés peuvent modifier les plug-ins standard en fonction de leurs besoins ou créer de nouveaux plug-ins. Nous avons créé quelques
plug-ins pour démontrer la nouvelle fonctionnalité et nous les améliorerons dans une prochaine version si les utilisateurs les trouvent utiles.
Voici une liste des plug-ins actuellement disponibles. Ils peuvent être activés via la propriété 'plugins' de l'objet CMS Admin. Les
plug-ins activés seront téléchargés sur le serveur et placés dans un sous-dossier (plugins) du dossier actuel.
Vous pouvez activer / désactiver les plug-ins en ligne avec le gestionnaire de plug-ins ou en renommant le nom du dossier (insérez un trait de soulignement
devant le nom du dossier. Par exemple, renommez le gestionnaire de fichiers en _filemanager). Ou supprimez simplement le dossier entier du serveur.
Important:
Ne publiez que les plug-ins dont vous avez vraiment besoin car tous les plug-ins seront chargés / traités par toutes les pages même s'ils ne sont
pas activés pour la page. Ainsi, avoir trop de plug-ins sur le serveur peut ralentir les performances du CMS.
231
WYSIWYGWeb Builder 16
Plug-in du gestionnaire d'utilisateurs
Ajouter / modifier / supprimer des utilisateurs en ligne. Cela permet de gérer les utilisateurs sans avoir besoin de s'intégrer aux outils de connexion de WWB.
Les utilisateurs ajoutés pourront ajouter ou modifier leurs propres pages.
Plug-in Commentaires
Ajoute la possibilité de publier des commentaires sur une page.
Plug-in de discussion
Le plug-in de discussion vous permet d'ajouter des fonctionnalités de commentaires à la page.
Les utilisateurs peuvent commenter le contenu de la page et les autres utilisateurs pourront publier des réponses au commentaire pour démarrer une
discussion.
Plug-in de téléchargement
Crée automatiquement une liste de liens à partir de fichiers dans un dossier.
Plug-in FAQ
Créez une page de questions fréquemment posées (FAQ) simple.
Plug-in de mot de passe
Protégez la page CMS avec un mot de passe. Cela peut être configuré par page et chaque page peut avoir son propre mot de passe.
Plug-in du gestionnaire de fichiers
Implémente un gestionnaire de fichiers de base pour télécharger des fichiers sur le CMS.
Plug-in File Manager Plus
Une version «plus» du gestionnaire de fichiers. Peut être utilisé pour télécharger, renommer et supprimer des fichiers et des dossiers. Uniquement pour les utilisateurs
avancés!
Plug-in de formulaire
Créez dynamiquement des formulaires en ligne. Prend en charge la validation de formulaire de base (en fonction du type d'entrée sélectionné) et reCAPTCHA. Les données
soumises peuvent être envoyées par e-mail et / ou stockées dans une base de données et exportées au format CSV ultérieurement.
Plug-in livre d'or
Livre d'or de base qui peut être intégré dans le CMS.
Plug-in de liste de diffusion
Collectez et gérez les adresses e-mail dans une liste de diffusion. Les utilisateurs peuvent s'inscrire à la liste de diffusion en soumettant leur adresse e-mail
dans le formulaire standard. Un e-mail de confirmation est envoyé pour vérifier l'adresse e-mail. L'administrateur peut envoyer des messages aux utilisateurs
abonnés.
Plug-in d'album photo
Le plug-in Album photo est une solution d'album photo en ligne de base pour le CMS. Il affichera les images d'un dossier sur le serveur.
Plug-in de diaporama
Le plug-in Diaporama ajoute un diaporama à la page CMS.
Gestionnaire de plugins
Le gestionnaire de plug-ins peut être utilisé pour activer / désactiver les plug-ins CMS en ligne.
Plug-in de sondage
Un simple plug-in de sondage.
Plug-in Tell-a-friend
Ajoute un formulaire de base à un ami à la page CMS.
232
WYSIWYGWeb Builder 16
Remarques sur les plug-ins:
Chaque plug-in générera automatiquement une ou plusieurs tables de base de données sur le serveur MySQL! Les tableaux ne seront pas supprimés lorsque
vous supprimerez le plug-in!
Les tables générées contiennent la configuration du plug-in et d'autres données (par exemple, le plugin du livre d'or stockera les messages).
Vous ne devez donc installer que les plug-ins dont vous avez réellement besoin, sinon vous vous retrouverez avec beaucoup de tables de base de données (inutilisées).
233
WYSIWYGWeb Builder 16
Étiquette CMS
L'objet d'étiquette CMS doit être sur la même page que l'objet Vue CMS!
Cet objet peut être utilisé pour afficher le titre de la page en cours, la date de création, l'auteur, les pages vues, etc. n'importe où sur la page. C'est un objet
autonome afin que vous puissiez le positionner individuellement par rapport à l'objet de vue CMS, par exemple comme en-tête de page ou barre latérale.
Général
Texte
Spécifie le texte à afficher dans l'étiquette. Les variables suivantes sont disponibles:
•
$ cms_views
Le nombre de fois que la page a été consultée.
•
$ cms_name
•
$ cms_created_by
•
$ cms_create_date
•
$ cms_last_update_date
•
$ cms_extra_data
Le nom de la page.
Le nom du créateur de la page.
Affiche la date de création de la page.
Affiche la date à laquelle la page a été modifiée pour la dernière fois.
Affiche le champ «données supplémentaires» de la page, que vous pouvez attribuer dans l'outil d'administration.
Ces variables seront remplacées par les données réelles de la base de données du CMS et sont directement liées aux pages actuellement
affichées dans la vue CMS.
Notez que les variables peuvent être mélangées avec du texte standard, donc par exemple vous pouvez utiliser: Cette page a été
modifiée pour la dernière fois le $ cms_last_update_date par $ cms_created_by
Alignement
Spécifie l'alignement horizontal du texte.
Style
Dans cette section, vous pouvez modifier l'apparence de l'objet. Pour plus de détails sur le style des objets, veuillez lire Style.
234
WYSIWYGWeb Builder 16
Menu CMS
L'objet CMS Menu doit être sur la même page que l'objet CMS View!
Cet objet peut être utilisé pour naviguer entre les pages qui sont affichées à l'intérieur de l'objet CMS View. Le menu CMS propose de nombreuses
options de style. Les éléments du menu sont gérés par la base de données du CMS, vous n'avez donc pas à configurer les liens manuellement.
Général
Mode de mise en page
Le menu peut être vertical ou horizontal.
Taille du bouton
Spécifie si la taille du bouton est fixe ou variable.
Si l'option fixe est sélectionnée, vous pouvez spécifier la largeur / hauteur des boutons via les propriétés de largeur et de hauteur. Si la variable est
sélectionnée, la taille du bouton dépend de la taille du texte en combinaison avec les paramètres de remplissage.
Espacement
Spécifie l'espacement entre 2 boutons.
Utilisez des liens conviviaux pour le référencement
Si vous activez cette option, le menu utilisera des liens conviviaux SEO (Search Engine Optimization) dans la navigation:
http://www.website.com/cms.php?page=my-seo-friendly-page-name au lieu de
http://www.website.com/cms.php?page=8
Notez que les noms des liens sont basés sur le titre de la page tel que spécifié dans l'administrateur CMS. Vous devez donc spécifier un titre dans
l'administrateur avant de pouvoir utiliser cette option.
Style
Dans cette section, vous pouvez modifier l'apparence des éléments de menu. Pour plus de détails sur le style des objets, veuillez lire Style.
Survol du style
Dans cette section, vous pouvez modifier l'apparence des éléments de menu lorsque la souris survole l'objet.
235
WYSIWYGWeb Builder 16
Recherche CMS
L'objet CMS Search doit être sur la même page que l'objet CMS View!
Cet objet peut être utilisé pour rechercher du contenu en ligne. Le CMS de WYSIWYG Web Builder ajoutera automatiquement des mots de recherche à l'index de
recherche chaque fois qu'une page est créée ou mise à jour.
La table d'index de recherche garde une trace de tous les mots uniques dans le système et stocke les références aux pages contenant ces mots
pour des résultats de recherche rapides. Les résultats de la requête de recherche seront affichés dans l'objet de vue CMS.
Général
Texte de l'indice
Le texte d'indication (ou 'cue') s'affichera dans le champ de recherche s'il n'a pas le focus. Lorsque l'utilisateur déplace son focus sur le
champ, l'étiquette est masquée.
Résultats
Définit l'apparence du résultat à l'intérieur de l'objet de vue CMS.
Aucun résultat
Spécifie le texte qui sera affiché si la requête de recherche n'a pas de résultats.
Police de caractère
Spécifie la famille de polices du texte, telle que Comic Sans, Times New Roman et Courier New.
Taille de police
Spécifie la taille du texte.
Couleur du texte
Spécifie la couleur du texte.
Couleur de l'arrière plan
Spécifie la couleur d'arrière-plan des résultats.
Couleur du lien
Spécifie la couleur des liens.
Rembourrage
Définit la quantité d'espace entre les résultats et la bordure.
236
WYSIWYGWeb Builder 16
Vue CMS
L'objet CMS View est un espace réservé pour le contenu en ligne. C'est la partie la plus importante du système de gestion de contenu
car tout le contenu de la page sera affiché à l'intérieur de cette zone.
Vous naviguerez entre les pages en utilisant l'objet Menu CMS. L'objet CMS View sera également utilisé pour afficher le résultat d'une requête
de recherche de l'objet de recherche CMS. Normalement, votre site Web n'aura qu'un seul objet Vue CMS et il n'y aura qu'une seule page dans
le Gestionnaire de site utilisée pour le système (ou deux si vous avez une page distincte pour l'administrateur CMS).
Base de données MySQL
Veuillez lire la base de données CMS pour plus de détails.
Base de données
Spécifie le nom de la base de données MySQL.
Mot de passe
Spécifie le mot de passe MySQL.
Serveur
Spécifie le serveur de base de données MySQL.
Nom de la table
Spécifie le préfixe du nom de la table MySQL. Les tables requises seront automatiquement créées dans la base de données spécifiée.
Nom d'utilisateur
Spécifie le nom d'utilisateur MySQL
Général
Mode
Spécifie le mode de la vue CMS.
•
Contenu variable (par défaut)
Le contenu de la vue CMS sera contrôlé par la navigation. Le visiteur du site Web décide quelle page sera affichée
(via le menu CMS). Une page ne peut contenir qu'une seule vue CMS définie sur «Variable»!
•
Contenu fixe
Le contenu de la vue est fixe et n'est pas contrôlé par le visiteur à travers la navigation. La vue affichera toujours la même page
(comme spécifié par la propriété id de page). Cette option peut être utile si vous souhaitez afficher un en-tête ou un pied de page fixe
où le contenu est chargé à partir de la base de données CMS. Vous pouvez utiliser plusieurs vues CMS "Contenu fixe" par page. Par
exemple, pour un texte d'en-tête, un pied de page ou tout autre contenu.
Étant donné que cette option vous oblige à spécifier un ID de page (valide), vous devez d'abord créer le contenu de la page dans
l'administrateur du CMS en ligne. Vous voudrez peut-être toujours définir l'option visible de la page sur «masqué». Pour qu'il ne soit pas
affiché dans le menu, mais uniquement utilisé pour la vue fixe.
Remarque: vous pouvez afficher l'identifiant de la page dans la section d'administration. Par exemple: passez la souris sur le lien «modifier» (ou l'une des autres
actions) et notez l'identifiant de la page dans la barre d'état du navigateur.
237
WYSIWYGWeb Builder 16
Débordement
La propriété de débordement peut être utilisée pour contrôler le comportement de débordement de la vue.
•
Aucun
Le contenu de la vue est entièrement visible. Aucun écrêtage ne se produira. Caché
•
Le contenu est tronqué, mais le navigateur n'affiche pas de barre de défilement pour voir le reste du contenu.
•
Faire défiler
Le contenu est tronqué, mais le navigateur affiche une barre de défilement pour voir le reste du contenu. Auto
•
Si le contenu est tronqué, le navigateur affichera une barre de défilement pour voir le reste du contenu.
Utilisez AJAX pour charger du contenu
Permettez à l'utilisateur de naviguer rapidement entre les pages sans avoir à recharger la page entière! Seul le contenu sera actualisé.
Notez que cela utilise jQuery en arrière-plan, donc JavaScript doit être activé.
Utilisez le titre et les balises meta de la base de données pour l'optimisation des moteurs de recherche.
Activez cette option pour utiliser le titre, la description et les mots-clés de la base de données CMS (spécifiés dans CMS Admin) au lieu des balises title
/ meta configurées dans les propriétés de la page.
Cela permet d'optimiser les pages pour le référencement, car désormais chaque page aura son propre titre et ses propres méta-balises.
Pointe:
Un tutoriel pour démarrer avec les outils CMS est disponible sur le site:
http://www.wysiwygwebbuilder.com/cms_tools.html
238
WYSIWYGWeb Builder 16
Contenu modifiable
Le contenu modifiable peut être utilisé pour définir une section modifiable sur la page. Cette section peut être modifiée ultérieurement en ligne
avec l'outil "Editable Content Admin".
Aucune configuration de base de données n'est requise, elle utilise un stockage de fichiers plat (pas de MySQL). La page avec des sections modifiables n'a pas besoin
d'être PHP, car le contenu est chargé dynamiquement via javascript / ajax.
Au moment de la conception, l'objet Contenu modifiable fonctionne comme un objet texte standard, avec les mêmes outils d'édition disponibles. Cela
vous permet de configurer le texte initial dans votre mise en page.
Dans les propriétés de l'objet Contenu modifiable, vous pouvez définir une étiquette, qui sera affichée dans l'outil d'administration, afin qu'il soit plus facile
d'identifier la section.
Tutoriel en ligne: http://www.wysiwygwebbuilder.com/editable_content.html
239
WYSIWYGWeb Builder 16
Administrateur de contenu modifiable
L'objet Editable Content Admin est l'outil de gestion en ligne pour mettre à jour le contenu. Une fois publié, il
affichera une liste de tous les objets de contenu modifiable du projet.
Tutoriel en ligne: http://www.wysiwygwebbuilder.com/editable_content.html
Mot de passe administrateur
Spécifie le mot de passe de l'administrateur pour accéder à l'éditeur de contenu en ligne.
Activer le rapport d'erreurs
Si vous activez cette option, le script activera un rapport d'erreur PHP détaillé. Cela peut être utile si vous rencontrez des
problèmes avec les scripts sur le serveur.
Nom du cadre
Pour activer le défilement d'une grande liste de pages, l'administrateur sera affiché dans un cadre en ligne. La propriété 'Frame Name'
spécifie le nom de ce cadre en ligne. Normalement, vous n'êtes pas obligé de le modifier.
Vous pouvez `` casser '' le cadre en le liant directement au fichier de script comme ceci:
. /editablecontentadmin.php ou en utilisant l'URL complète:
http://www.yourwebsite.com/editablecontentadmin.php
Dans ce cas, la fenêtre complète du navigateur sera utilisée.
Expiration de la session
L'administrateur sera déconnecté automatiquement si la session est inactive (en fonction du délai spécifié).
Éditeur
Cliquez sur «Modifier» dans l'outil d'administration en ligne pour ouvrir l'éditeur de contenu dans lequel vous pouvez mettre à jour le texte ou ajouter des mages, des vidéos ou
des tableaux.
L'outil d'administration peut être configuré pour utiliser l'un des éditeurs tiers pris en charge tels que tinyMCS ou Summernote. Chaque éditeur a
différentes options afin que vous puissiez choisir celle qui correspond le mieux à vos besoins.
Veuillez consulter la section «Éditeur» de l'administrateur du CMS pour plus d'informations: Admin CMS
240
WYSIWYGWeb Builder 16
Accordéon
L'objet accordéon porte le nom de l'instrument de musique, de la manière dont l'expansion d'une zone conduit à la contraction d'une autre. En règle
générale, les accordéons sont fixés de manière à ce que seules les zones soient visibles en même temps. Cet objet est basé sur le widget Accordion de la
bibliothèque d'interface utilisateur jQuery: http://jquery.com/ .
Ajout d'objets aux panneaux de l'accordéon
Vous pouvez facilement ajouter des objets aux panneaux d'accordéon en les faisant glisser sur le composant. Cela fonctionne de la même manière que pour les calques ou les
formulaires.
Pour pouvoir faire glisser et déposer des objets sur l'accordéon, assurez-vous d'abord qu'il est suffisamment grand pour que les objets puissent être glissés
dessus (l'objet accordéon doit être plus grand que l'objet que vous ajoutez!).
Une bordure bleue autour du panneau indiquera que l'objet déplacé fera partie de l'accordéon. Pour ajouter des éléments à un autre panneau,
cliquez simplement sur l'en-tête pour le rendre actif.
Général
Dans la page Général, vous pouvez ajouter, modifier et supprimer des panneaux.
Remarque:
La suppression d'un panneau supprimera également tous les objets qui font partie de ce panneau!
Style
Vous pouvez contrôler l'apparence du widget Accordéon dans les propriétés du style.
L'aspect et la convivialité de cet objet sont définis par le thème de la page. Vous pouvez définir le thème pour l'ensemble dans Propriétés de la page->
Style-> Thème. Les thèmes peuvent être créés / modifiés avec le gestionnaire de thèmes intégré ou en visitant le site Web de ThemeRoller: http://jqueryui.com/themeroller/.
le Nom de la police et Taille de police properties peut être utilisé pour remplacer la police par défaut du thème.
Rembourrage
Les propriétés de remplissage contrôlent le remplissage de texte des en-têtes.
Décalage d'icône
Le décalage de l'icône développer / réduire peut être avec le décalage d'icône.
Animation
La propriété Animation permet à l'animation de diapositives de masquer et d'afficher des panneaux.
Activer au passage de la souris
L'activation au survol de la souris peut être activée pour changer le panneau actif en survolant la souris au lieu du clic de souris standard.
241
WYSIWYGWeb Builder 16
Saisie automatique
La saisie semi-automatique peut remplacer une zone d'édition standard. Il permet aux utilisateurs de rechercher et de sélectionner rapidement une liste de valeurs
préremplie au fur et à mesure de leur saisie. La liste peut être locale ou depuis un emplacement distant (AJAX). La saisie semi-automatique est basée sur le widget de
saisie semi-automatique de la bibliothèque d'interface utilisateur jQuery: http://jquery.com/ .
Général
La source de données
Spécifie la source des éléments de saisie semi-automatique.
•
Local
Utilise un tableau local comme source de données. Les éléments peuvent être ajoutés, modifiés ou supprimés à l'aide des boutons «Ajouter», «Modifier et
supprimer».
Éloigné
Sélectionnez cette option si vous souhaitez obtenir les données d'une source de données externe, telle qu'une base de données. Vous devez également spécifier
l'URL dans ce cas. Cette option est réservée aux utilisateurs avancés!
Retard
Le délai en millisecondes pendant lequel la saisie semi-automatique attend après une frappe pour s'activer. Un délai zéro a du sens pour les données locales
(plus réactives), mais peut produire beaucoup de charge pour les données distantes, tout en étant moins réactif.
Longueur minimale
Le nombre minimum de caractères qu'un utilisateur doit saisir avant l'activation de la saisie semi-automatique. Zéro est utile pour les données locales avec
seulement quelques éléments. Il devrait être augmenté lorsqu'il y a beaucoup d'objets, où un seul personnage correspondrait à quelques milliers d'objets.
Les données
Si la source de données est locale, vous devez spécifier les données de saisie semi-automatique dans cette liste. Utilisez le bouton «Importer» pour sélectionner dans
une liste d'éléments prédéfinis ou importer les éléments à partir d'un fichier externe où chaque élément doit être sur une nouvelle ligne.
URL
Lorsqu'une source de données distante est utilisée, l'objet Autocomplete s'attend à ce que la page renvoie des données JSON. Il peut être sur
le même hôte ou sur un autre (doit fournir JSONP).
Le paramètre de requête "term" est ajouté à cette URL. Plus de détails sont disponibles sur le site jQuery:
http://jqueryui.com/demos/autocomplete/
Thème ThemeRoller
L'aspect et la convivialité de cet objet sont définis par le thème de la page. Vous pouvez définir le thème pour l'ensemble dans Propriétés de la page->
Style-> Thème. Les thèmes peuvent être créés / modifiés avec le gestionnaire de thèmes intégré ou en visitant le site Web ThemeRoller:
http://jqueryui.com/themeroller/.
le Nom de la police et Taille de police properties peut être utilisé pour remplacer la police par défaut du thème.
Style
Ici, vous pouvez contrôler l'apparence de la zone d'édition. Voir la description des propriétés de la zone d'édition pour plus de détails.
242
WYSIWYGWeb Builder 16
Bouton Themeable
Cet objet améliore le bouton standard (normal, soumettre, réinitialiser ou ancrer / lien) aux boutons thématiques avec un survol de la souris et des styles
actifs appropriés. Le bouton peut être utilisé comme bouton d'envoi sur un formulaire ou comme bouton autonome pour la navigation.
Général
Nom
Nom du bouton.
Valeur / étiquette
Légende du bouton.
Type de bouton
•
Soumettre
•
Réinitialiser
•
Ordinaire
Lorsqu'il est activé, un bouton d'envoi soumet un formulaire.
Lorsqu'il est activé, un bouton de réinitialisation réinitialise toutes les commandes à leurs valeurs initiales.
Les boutons Normal (Push) n'ont pas de comportement par défaut. Chaque bouton poussoir peut avoir des scripts côté client associés aux
attributs d'événement de l'élément. Lorsqu'un événement se produit (par exemple, l'utilisateur appuie sur le bouton, le relâche, etc.), le script
associé est déclenché.
•
Bouton de lien
Si ce type de bouton est sélectionné, le bouton agira comme un bouton / lien de navigation. Vous pouvez spécifier les propriétés du lien dans la
page "Lien".
•
Case à cocher
Le bouton agira comme une case à cocher et pourra donc être utilisé en remplacement de l'élément de case à cocher standard dans les formulaires.
•
Bouton radio
Le bouton agira comme un bouton radio, il peut donc être utilisé en remplacement de l'élément bouton radio standard dans les
formulaires. Donnez le même nom à plusieurs boutons pour les intégrer à un groupe.
•
Bouton Split
•
Ensemble de boutons
Ajoute un menu déroulant au bouton. Chaque sous-menu peut avoir son propre lien.
Ajoute la possibilité de définir plusieurs boutons pour créer un menu de navigation à thème.
Clé d'accès
Cet attribut attribue une clé d'accès à l'objet. Une clé d'accès est un caractère unique. Appuyez sur la touche d'accès
pour mettre l'élément en évidence.
désactivé
L'option désactivée désactive le contrôle de l'entrée utilisateur.
Index des onglets
Spécifie l'index de tabulation du bouton (dans un formulaire).
Style
L'aspect et la convivialité de cet objet sont définis par le thème de la page. Vous pouvez définir le thème pour l'ensemble dans Propriétés de la page->
Style-> Thème. Les thèmes peuvent être créés / modifiés avec le gestionnaire de thèmes intégré ou en visitant le site Web de ThemeRoller: http://jqueryui.com/themeroller/
.
243
WYSIWYGWeb Builder 16
Cartes
Une carte est un conteneur de contenu léger et flexible. Il comprend des options pour les en-têtes et les pieds de page, une grande variété de contenu, de
style et de puissantes options d'affichage. L'objet Card a été inspiré par le composant v4 Card de Bootstrap.
Bouton
Les boutons prennent en charge de nombreuses options de style telles que l'arrière-plan, la bordure, la police et le rembourrage.
Les boutons peuvent être utilisés comme lien ou déclencher une action via des événements. Si vous laissez le champ de texte vide et définissez une icône, il peut
être utilisé comme une «icône sociale». Si plusieurs boutons sont ajoutés séquentiellement, ils seront affichés sur une ligne. Pour afficher des boutons sur une ligne
différente, ils doivent être séparés par un séparateur. Définissez le rayon de la bordure sur 500 pour créer un bouton / icône rond.
Diviseur
Un séparateur peut être utilisé pour insérer une ligne.
En-tête / pied de page
Ajoutez un en-tête ou un pied de page facultatif dans une carte. L'en-tête / pied de page peut être configuré comme titre (h1 ..) Un en-tête sera toujours
ajouté comme premier élément. Un pied de page sera toujours ajouté comme dernier élément, au bas de la carte.
Image
Ajoutez une image à la carte. Par défaut, l'image sera pleine largeur, mais vous pouvez éventuellement définir une largeur et une hauteur. Ces valeurs sont réactives et
peuvent être différentes dans les points d'arrêt. Une image peut être intégrée ou superposée. Lorsqu'il est défini comme superposition, il sera rendu derrière tous les
autres éléments. Vous ne pouvez utiliser qu'une seule image de superposition par carte.
Texte
Ajoutez du texte à la carte. Le texte sera toujours pleine largeur. Utilisez un remplissage pour ajouter un espacement autour du texte.
Popover
Les cartes peuvent également être utilisées comme popovers, cela utilise essentiellement la carte comme une info-bulle / boîte contextuelle avancée qui
apparaît lorsque l'utilisateur clique ou survole un élément. Les popovers peuvent être placés en haut, à droite, en bas à gauche de l'objet conteneur et peuvent
être activés par clic, survol ou focus.
244
WYSIWYGWeb Builder 16
Conteneur de cartes
Le conteneur de cartes est un conteneur dédié aux cartes afin de simplifier la disposition d'une série de cartes.
Juste une grille de disposition et un conteneur de boîte flexible, le conteneur de cartes est un élément flottant pleine largeur. Donc, il ne peut pas avoir de position absolue.
Les outils d'organisation peuvent être utilisés pour déplacer le conteneur vers le haut ou vers le bas de la page.
Le conteneur de cartes a les options de disposition suivantes:
•
jeu de cartes
aligne automatiquement les cartes horizontalement avec une largeur et une hauteur égales. Même avec différentes longueurs de
contenu! Fondamentalement, le jeu de cartes n'est qu'une version simplifiée d'un Flex Container où les propriétés flexbox de la carte
seront forcées de flexgrow: 1, flexshrink: 1, flexbasis: 0%
•
colonnes de carte
organiser les cartes en colonnes de type maçonnerie. Les cartes sont classées de haut en bas et de gauche à droite.
•
carrousel
affiche les cartes dans un carrousel animé à l'aide du carrousel hibou
(https://owlcarousel2.github.io/OwlCarousel2/). Le nombre de cartes par diapositive et l'espacement sont configurables par point d'arrêt. Il est
également possible de définir le nombre de cartes qui défilent par page. Le carrousel de cartes peut être contrôlé via des événements: lecture
multimédia, arrêt multimédia, diaporama suivant, diaporama précédent
Largeur maximale
Spécifie la largeur maximale du contenu du conteneur de cartes dans la fenêtre du navigateur. Cela peut être utile pour éviter que les
éléments ne soient trop étirés. Si la fenêtre du navigateur est plus large que la largeur spécifiée, le contenu de la grille sera centré.
Nombre de colonnes
Spécifie le nombre de colonnes. Cette valeur peut être différente en points d'arrêt. Applique les modes
«colonnes de cartes» et «carrousel».
Écart de colonne
Spécifie l'espacement entre les colonnes. Cette valeur peut être différente dans les points d'arrêt. Applique les modes
«colonnes de cartes» et «carrousel».
Le temps de pause
Spécifie le temps de pause pour chaque cycle en millisecondes.
Lorsque vous définissez un temps de pause négatif, le carrousel défile en continu (comme un tapis roulant). Par exemple: -3000
Glisser par
Spécifie le nombre de cartes glisser dans chaque cycle. Le «1» par défaut fera glisser la carte à la fois.
Démarrage automatique
Spécifie s'il faut démarrer automatiquement l'animation du carrousel. Lorsqu'il est défini sur «false», le carrousel peut être contrôlé via des événements.
La navigation
Contrôle le style des points de navigation en mode carrousel.
245
WYSIWYGWeb Builder 16
Sélecteur de date
Le DatePicker offre un composant d'interface utilisateur sophistiqué et riche en fonctionnalités pour saisir des dates dans un formulaire. L'objet fournit un calendrier
graphique qui apparaît si vous cliquez dans le champ du formulaire.
Cet objet est basé sur le widget DatePicker de la bibliothèque d'interface utilisateur jQuery: http://jquery.com/
L'apparence de l'objet DatePicker est personnalisable via les thèmes ThemeRoller.
Général
L'aspect et la convivialité de cet objet sont définis par le thème de la page. Vous pouvez définir le thème pour l'ensemble dans Propriétés de la page->
Style-> Thème. Les thèmes peuvent être créés / modifiés avec le gestionnaire de thèmes intégré ou en visitant le site Web de ThemeRoller: http://jqueryui.com/themeroller/
.
le Nom de la police et Taille de police properties peut être utilisé pour remplacer la police par défaut du thème.
Utiliser la date actuelle
Cela définira automatiquement la valeur initiale sur la date actuelle.
Format de date
Le format des dates analysées et affichées. Pour une liste complète des formats possibles, consultez la fonction formatDate:
http://docs.jquery.com/UI/Datepicker/formatDate
Changer de mois
Spécifie si l'utilisateur peut modifier le mois en sélectionnant dans une liste déroulante.
Changer d'année
Spécifie si l'utilisateur peut modifier l'année en sélectionnant dans une liste déroulante.
Afficher le panneau de boutons
Spécifie s'il faut afficher le panneau de boutons.
Options personnalisées (pour les utilisateurs avancés uniquement)
Le DatePicker a de nombreuses autres options. Le champ d'options personnalisées vous permet d'inclure une ou plusieurs de ces options. Consultez
la documentation jQuery pour plus de détails.
Style
Ici, vous pouvez contrôler l'apparence de la zone d'édition. Voir la description des propriétés de la zone d'édition pour plus de détails.
246
WYSIWYGWeb Builder 16
Dialogue
Une boîte de dialogue est une fenêtre flottante qui contient une barre de titre et une zone de contenu. Vous pouvez faire glisser et déposer des objets dans la boîte de dialogue
pour les intégrer à la fenêtre. La boîte de dialogue est basée sur le widget de boîte de dialogue de la bibliothèque d'interface utilisateur jQuery: http://jquery.com/
L'apparence de l'objet Dialog est personnalisable via les thèmes ThemeRoller.
Vous pouvez facilement ajouter des objets à la boîte de dialogue en les faisant glisser sur le composant. Cela fonctionne de la même manière que pour les calques ou les
formulaires.
Général
Thème ThemeRoller
L'aspect et la convivialité de cet objet sont définis par le thème de la page. Vous pouvez définir le thème pour l'ensemble dans Propriétés de la page->
Style-> Thème. Les thèmes peuvent être créés / modifiés avec le gestionnaire de thèmes intégré ou en visitant le site Web ThemeRoller:
http://jqueryui.com/themeroller/.
le Nom de la police et Taille de police properties peut être utilisé pour remplacer la police par défaut du thème.
Titre
Spécifie le titre de la boîte de dialogue.
Décalage d'icône
Le décalage de l'icône «Fermer» à partir du côté droit de l'en-tête peut être avec le décalage de l'icône.
Largeur
Spécifie la largeur de la boîte de dialogue.
la taille
Spécifie la hauteur de la boîte de dialogue.
Afficher l'animation
Spécifie l'effet à utiliser lors de l'ouverture de la boîte de dialogue.
Masquer l'animation
Spécifie l'effet à utiliser lorsque la boîte de dialogue est fermée.
247
WYSIWYGWeb Builder 16
Alignement horizontal
Spécifie où la boîte de dialogue doit être affichée: «gauche», «centre», «droite». Sélectionnez «Position
absolue» pour utiliser la position x actuelle dans l'espace de travail.
Alignement vertical
Spécifie où la boîte de dialogue doit être affichée: «haut», «centre», «bas». Sélectionnez «Position
absolue» pour utiliser la position y actuelle dans l'espace de travail.
Modal
Si activé, la boîte de dialogue aura un comportement modal; les autres éléments de la page seront désactivés (c'est-à-dire qu'ils ne pourront pas interagir avec). Les boîtes de
dialogue modales créent une superposition sous la boîte de dialogue mais au-dessus des autres éléments de la page.
Redimensionnable
Si activé, la boîte de dialogue sera redimensionnable.
Draggable
Si activé, la boîte de dialogue sera déplaçable par la barre de titre.
Fermer en s'échappant
Spécifie si la boîte de dialogue doit se fermer lorsqu'elle a le focus et que l'utilisateur appuie sur la touche d'échappement (ESC).
Afficher la boîte de dialogue automatiquement
Lorsque cette option est activée, la boîte de dialogue s'ouvre automatiquement lorsque la boîte de dialogue est appelée. Sinon, il restera caché jusqu'à ce que
.dialog ("open") y soit appelé.
Q: Comment puis-je afficher ou masquer la boîte de dialogue via JavaScript?
R: Il est très facile d'afficher ou de masquer la boîte de dialogue de JavaScript. Ajoutez le
widget de dialogue à votre page.
Prenez note de l'ID. La valeur par défaut est «dialogue».
Ajoutez une image, une forme ou un autre objet avec prise en charge d'événements à la page. Ouvrez les
propriétés et sélectionnez l'onglet 'Evénements'.
Cliquez sur «Ajouter» pour insérer un nouvel événement.
Sélectionnez «Événement»: OnClick et définissez la fonction «Action» sur JavaScript. Pour afficher la boîte
de dialogue, entrez ce JavaScript:
$ ('# dialog'). dialog ('open');
où dialog est l'ID de la boîte de dialogue.
Pour masquer la boîte de dialogue, entrez ce code JavaScript: $
('# dialog'). Dialog ('close');
… Ou vous pouvez simplement utiliser les actions d'événement Afficher et Masquer!
Avancée
La page avancée contient quelques propriétés pour affiner l'apparence de la boîte de dialogue. Par exemple, vous pouvez contrôler le
remplissage du titre.
Vous pouvez également ajouter un ou deux boutons à la boîte de dialogue. Pour activer un bouton, attribuez une valeur à Button1Text et / ou
Button2Text. Button1Function / Button2Function spécifie la fonction (JavaScript) du bouton.
Si vous ne spécifiez pas de fonction, le bouton agira comme un bouton de fermeture.
248
WYSIWYGWeb Builder 16
ListView
Créez de superbes listes stylisées (à thème jQuery UI) avec titre, description et image. Deux modes sont pris en charge: listview et droplist. Prend
également en charge les séparateurs pour regrouper les éléments.
249
WYSIWYGWeb Builder 16
Menu à thème
Menu à thème (à plusieurs niveaux) avec des interactions souris et clavier pour la navigation. L'objet Themeable Menu est basé sur le menu Widget
de la bibliothèque de l'interface utilisateur jQuery : http://jquery.com/.
Général
Sélectionner Ajouter pour insérer un nouvel élément dans le menu. Sélectionner Éditer pour
modifier les propriétés d'un élément existant. Pour supprimer un élément de la barre de
menus, sélectionnez Retirer.
Déplacer vers le haut
Déplacez l'élément sélectionné parmi ses frères et sœurs.
Descendre
Déplacez l'élément sélectionné parmi ses frères et sœurs.
Se déplacer à gauche
Faire de l'élément sélectionné un frère de son parent.
Déplacer vers la droite
Faire de l'élément sélectionné l'enfant de son frère précédent.
Disposition
La barre de menus peut être verticale ou horizontale.
Orientation
Identifie la position des sous-menus par rapport à l'élément de menu parent associé.
Cible
Spécifie la fenêtre cible des liens lorsque «Synchroniser avec Site Manager» est activé.
Style
L'aspect et la convivialité de cet objet sont définis par le thème de la page. Vous pouvez définir le thème pour l'ensemble dans Propriétés de la page->
Style-> Thème. Les thèmes peuvent être créés / modifiés avec le Gestionnaire de thèmes.
Mode menu
En mode «Menu standard», le menu sera affiché à la même position qu'en mode conception.
En mode «Menu contextuel», le menu se comportera comme un menu contextuel. Le menu sera affiché lors du clic droit à la position actuelle
de la souris.
250
WYSIWYGWeb Builder 16
Onglets
Les onglets peuvent être utilisés pour diviser le contenu en plusieurs sections qui peuvent être permutées pour économiser de l'espace, un peu comme l'accordéon. L'objet
Tabs est basé sur le widget Tabs de la bibliothèque de l'interface utilisateur jQuery: http://jquery.com/
Vous pouvez facilement ajouter des objets aux panneaux d'onglets en les faisant glisser sur le composant. Cela fonctionne de la même manière que pour les calques ou les
formulaires. Pour ajouter des éléments à un autre panneau, cliquez simplement sur l'en-tête de l'onglet pour le rendre actif.
Général
Dans la page Général, vous pouvez ajouter, modifier et supprimer des pages à onglets.
Style
L'aspect et la convivialité de cet objet sont définis par le thème de la page. Vous pouvez définir le thème pour l'ensemble dans Propriétés de la page->
Style-> Thème. Les thèmes peuvent être créés / modifiés avec le gestionnaire de thèmes intégré ou en visitant le site Web ThemeRoller:
http://jqueryui.com/themeroller/.
le Nom de la police et Taille de police properties peut être utilisé pour remplacer la police par défaut du thème.
Largeur de l'onglet
La largeur des onglets spécifie la largeur des onglets. Utilisez «0» pour une largeur de tabulation variable.
Triable
Si la propriété Sortable est activée, l'utilisateur peut trier les onglets dynamiquement à l'aide du glisser-déposer, une fonctionnalité intéressante de jQuery;)
Activer au passage de la souris
Activez cette option pour changer l'onglet actif en survolant la souris au lieu du clic de souris standard.
Utiliser l'effet de transition de fondu
La propriété Utiliser l'effet de transition de fondu active l'animation de fondu pour masquer et afficher les panneaux d'onglets.
Pliable
Activez Réductible pour permettre à un onglet déjà sélectionné d'être à nouveau désélectionné lors de la resélection.
Activer la rotation automatique entre les onglets
Cela permet une rotation automatique entre les onglets avec une durée configurable.
Continuez la rotation après qu'un onglet a été sélectionné par un utilisateur.
Indique s'il faut ou non continuer la rotation après la sélection d'un onglet par un utilisateur.
Durée
Durée en millisecondes jusqu'à ce que l'onglet suivant du cycle soit activé.
Avancée
La page avancée contient quelques propriétés pour affiner l'apparence de la boîte de dialogue. Par exemple, vous pouvez contrôler le
remplissage du titre.
251
WYSIWYGWeb Builder 16
Pain grillé
Les toasts sont des notifications légères conçues pour imiter les notifications push qui ont été popularisées par les systèmes d'exploitation mobiles et de
bureau. Ils peuvent être affichés au chargement de la page ou avec un délai. Plusieurs toasts s'empileront automatiquement verticalement.
Texte
Le texte peut être édité comme le texte standard. Ainsi, les mêmes outils de formatage et d'édition sont disponibles, y compris les styles, l'interligne, l'espacement des lettres,
les puces, la recherche / remplacement, le lorem ipsum, les polices réactives et la prise en charge des liens.
Afficher le retard
Spécifie le délai (en millisecondes) avant l'affichage du toast. Réglez sur «-1» pour masquer initialement le toast, vous pouvez donc le contrôler via des événements
(afficher / masquer).
Masquer le retard
Délai de masquage du pain grillé en millisecondes. Réglez sur «0» pour désactiver le masquage automatique.
Titre
Spécifie le titre du toast.
Sous-titre
Spécifie le sous-titre (facultatif).
Position
Spécifie l'emplacement du toast.
C'est une propriété globale. Cela signifie que cela affectera le placement de tous les toasts sur la page actuelle!
Style d'en-tête
Spécifie le style de l'en-tête.
Icône
L'en-tête peut également inclure une icône de l'une des bibliothèques d'icônes disponibles.
Tutoriel en ligne:
https://www.wysiwygwebbuilder.com/toasts.html
252
WYSIWYGWeb Builder 16
Barre de progression
La barre de progression est conçue pour afficher simplement le% achevé actuel d'un processus. Par exemple, dans le cadre d'un script de
téléchargement personnalisé ou pour afficher l'état d'une enquête en ligne.
La plage de la barre de progression va de 0 à 100.
Remarque:
La valeur de la barre de progression est généralement mise à jour via JavaScript. Il ne fait rien par lui-même!
Général
Valeur initiale
Spécifie la valeur initiale de la barre de progression. En général, il s'agit de «0».
Style
Vous pouvez contrôler l'apparence du widget Onglet dans les propriétés du style.
Thème ThemeRoller
L'aspect et la convivialité de cet objet sont définis par le thème de la page. Vous pouvez définir le thème pour l'ensemble dans Propriétés de la page->
Style-> Thème. Les thèmes peuvent être créés / modifiés avec le gestionnaire de thèmes intégré ou en visitant le site Web ThemeRoller:
http://jqueryui.com/themeroller/.
Exemple
Voici un exemple de mise à jour de la valeur de la barre de progression via JavaScript.
1. Ajoutez le widget de la barre de progression à votre page.
2. Prenez note de l'ID. La valeur par défaut est «jQueryProgressbar1».
3. Ajoutez une image, une forme ou un autre objet avec prise en charge d'événements à la page.
4. Ouvrez les propriétés et sélectionnez l'onglet «Evénements».
5. Cliquez sur «Ajouter» pour insérer un nouvel événement.
6. Sélectionnez «Événement»: OnClick et définissez la fonction «Action» sur JavaScript.
Pour mettre à jour la valeur (0-100) de la barre de progression, le code suivant
$ ('# Progressbar1'). Progressbar ('option', 'valeur', 75);
où Progressbar1 est l'ID de la barre de progression.
253
WYSIWYGWeb Builder 16
Glissière
Le widget curseur représente une valeur sélectionnée en faisant glisser le pouce le long de l'arrière-plan.
C'est un widget simple, composé de deux éléments principaux: la poignée du curseur (également appelée pouce) et l'arrière-plan du curseur.
Remarque:
La valeur de progressbar est généralement mise à jour via JavaScript. Il ne fait rien par lui-même!
Général
Orientation
Spécifie si le curseur a le min à gauche, le max à droite (= horizontal) ou le min en bas, le max en haut (= vertical).
Animation
Spécifie s'il faut faire glisser la poignée en douceur lorsque l'utilisateur clique sur la poignée extérieure de la barre.
Valeur initiale
Spécifie la valeur initiale du curseur.
Valeur minimum
Spécifie la valeur minimale du curseur.
Valeur maximum
Spécifie la valeur maximale du curseur.
Gamme
Modifie l'apparence du curseur. Une plage min va de la valeur minimale à la poignée. Une plage maximale va de la poignée à la
valeur maximale.
Hauteur largeur
Spécifie la hauteur (si l'orientation est horizontale) ou la largeur (si l'orientation est verticale) de l'arrière-plan du curseur.
Largeur de la poignée
Spécifie la largeur de la poignée du curseur.
Hauteur de la poignée
Spécifie la hauteur de la poignée du curseur.
Style
Vous pouvez contrôler l'apparence du widget Onglet dans les propriétés du style.
Thème ThemeRoller
L'aspect et la convivialité de cet objet sont définis par le thème de la page. Vous pouvez définir le thème pour l'ensemble dans Propriétés de la page->
Style-> Thème. Les thèmes peuvent être créés / modifiés avec le gestionnaire de thèmes intégré ou en visitant le site Web ThemeRoller:
http://jqueryui.com/themeroller/.
254
WYSIWYGWeb Builder 16
Événements
Les événements peuvent être utilisés pour mettre à jour d'autres parties de la page en fonction de l'état actuel du curseur.
Les événements suivants sont pris en charge:
slidestart
Cet événement est déclenché lorsque l'utilisateur commence à glisser.
faire glisser
Cet événement est déclenché à chaque mouvement de souris pendant la diapositive.
Utilisez ui.value pour obtenir la valeur du handle actuel.
slidechange
Cet événement est déclenché à l'arrêt de la diapositive ou si la valeur est modifiée par programme (par la méthode value).
slidestop
Cet événement est déclenché lorsque l'utilisateur arrête de glisser.
action
Spécifie l'action à entreprendre lorsque l'événement est déclenché.
•
Définir la valeur, définit la valeur d'un élément de formulaire (par exemple, zone d'édition, bouton ou texte)
•
Code personnalisé. Ici, vous pouvez implémenter votre propre code qui sera inséré dans la fonction de rappel.
fonction (événement, ui)
{
// votre code personnalisé sera inséré ici ...});
Utilisez ui.value pour obtenir la valeur du handle.
Exemple:
$ ("# Editbox1"). Val (ui.value);
Exemple
Voici un exemple de mise à jour de la valeur d'une zone d'édition.
1. Ajoutez une boîte d'édition à la page.
2. Prenez note de l'ID. La valeur par défaut est «Editbox1».
3. Ajoutez le widget curseur à votre page.
4. Ouvrez les propriétés du curseur et sélectionnez l'onglet «Événements».
5. Cliquez sur «Ajouter» pour insérer un nouvel événement.
6. Sélectionnez «Event»: slidechange et réglez «Action» sur Set Value.
7. Dans Target, sélectionnez la zone d'édition ('Editbox1').
255
WYSIWYGWeb Builder 16
Fileur
Améliorez la saisie de texte pour la saisie de valeurs numériques, avec les boutons haut / bas et la gestion des touches fléchées. Notez que cet objet est
normalement utilisé sur un formulaire en remplacement de la zone d'édition standard.
L'objet jQuery Spinner est basé sur le widget Spinner de la bibliothèque d'interface utilisateur jQuery: http://jquery.com/
Général
Nom
Saisissez un identifiant pour le champ.
Valeur initiale
Valeur initialement affichée dans le champ.
Valeur minimum
La valeur minimale autorisée.
Valeur maximum
La valeur maximale autorisée.
Pas
La taille du pas à effectuer lors de la rotation via les boutons.
Incrémentale
Contrôle le nombre de pas effectués lorsque vous maintenez enfoncé un bouton de rotation.
Lorsqu'il est défini sur true, le delta de progression augmente lorsqu'il est tourné sans cesse. Lorsqu'il est défini sur false, toutes les étapes sont égales (comme défini
par l'option step).
désactivé
L'option désactivée désactive le contrôle de l'entrée utilisateur. Les contrôles
désactivés ne reçoivent pas le focus.
Les contrôles désactivés sont ignorés dans la navigation par tabulation.
La valeur des contrôles désactivés ne sera pas soumise avec le formulaire.
Clé d'accès
Cet attribut attribue une clé d'accès à l'objet. Une clé d'accès est un caractère unique. Appuyez sur la touche d'accès
pour mettre l'élément en évidence.
Index des onglets
Tous les éléments (à l'exception des éléments masqués) d'un formulaire font partie de l'ordre de tabulation du formulaire.
Lorsque l'utilisateur appuie sur la touche Tab, le navigateur déplace le focus d'entrée d'un élément à l'autre afin que les éléments apparaissent dans
le code HTML.
Cependant, vous souhaitez parfois que l'ordre de tabulation se déroule un peu différemment. Dans ce cas, vous pouvez numéroter les champs à l'aide de l'attribut
tabindex.
Habituellement, le premier tabindex commence par la valeur «1». Pour exclure un élément de l'ordre de tabulation, définissez la valeur de tabindex sur 0.
Dans ce cas, l'élément est ignoré lorsque l'utilisateur parcourt le formulaire.
Titre
Spécifie l'info-bulle affichée par le navigateur.
256
WYSIWYGWeb Builder 16
sorcier
Cela implémente un assistant comme un composant, qui peut être utilisé (par exemple) pour créer un formulaire multi-pages. L'assistant peut être
modal (popup) ou utilisé comme élément standard.
L'objet Wizard est basé sur l'objet Dialog et a les mêmes propriétés. La principale différence avec la boîte de dialogue est que vous pouvez ajouter plusieurs
pages (étapes). L'ajout d'objets fonctionne de la même manière qu'avec les autres conteneurs, il suffit de glisser-déposer les objets à l'intérieur de la zone
de dépôt.
Cliquez sur le bouton "Suivant ou" Précédent "pour passer à une autre étape.
Remarque:
Si l'assistant est utilisé comme formulaire, le bouton «Terminer» agira comme un bouton d'envoi, sinon il fermera simplement l'assistant.
257
WYSIWYGWeb Builder 16
Info-bulles
Info-bulles personnalisables et thématiques, remplaçant les info-bulles natives. L'info-bulle prend en charge la mise en forme du texte et peut être affectée à n'importe quel
objet WWB.
L'objet Tooltip est basé sur le widget Tooltip de la bibliothèque d'interface utilisateur jQuery: http://jquery.com
Général
ID d'objet
Spécifie l'ID de l'objet associé. L'info-bulle s'affiche lorsque l'utilisateur survole l'objet spécifié.
Animation
Spécifie l'animation utilisée pour afficher / masquer l'info-bulle: Aucune, Fondu ou Diapositive.
Suivre la souris
Spécifie si l'info-bulle doit suivre (suivre) la souris.
Contenu
Spécifie le contexte (texte) de l'info-bulle. Le texte peut être formaté à l'aide des outils de style.
Position
Identifie la position de l'info-bulle par rapport à l'objet parent associé.
Style
L'aspect et la convivialité de cet objet sont définis par le thème de la page. Vous pouvez définir le thème pour l'ensemble dans Propriétés de la page->
Style-> Thème. Les thèmes peuvent être créés / modifiés avec le Gestionnaire de thèmes.
258
WYSIWYGWeb Builder 16
jQuery Mobile
jQuery Mobile est un framework pour créer des applications Web mobiles. jQuery Mobile fonctionne sur tous les smartphones et tablettes populaires.
WYSIWYGWeb Builder utilise jQuery Mobile comme base pour les pages Web mobiles (réactives). Lorsque vous créez une page mobile, vous
disposez d'un ensemble d'outils dédié à la conception Web mobile. Et bien que la plupart des objets portent les mêmes noms, la plupart d'entre eux
ont été optimisés pour la conception Web mobile et se comporteront donc légèrement différemment d'une mise en page standard.
NOTE IMPORTANTE:
jQuery Mobile est une bibliothèque de scripts tierce. Malheureusement, il n'a pas été mis à jour depuis 2014, il devient donc obsolète. Si vous souhaitez
que vos pages soient à l'épreuve du temps, envisagez plutôt d'utiliser des grilles de mise en page ou des pages standard avec des points d'arrêt.
Thème
Le thème jQuery Mobile fournit le cadre CSS nécessaire pour fournir une apparence cohérente et tactile pour vos widgets sur
toutes les plates-formes.
Il prend en charge de nombreuses propriétés CSS3, telles que les coins arrondis, les ombres et les dégradés. Il fournit également un jeu d'icônes léger, qui peut
être utilisé dans des objets tels que des boutons, des menus, etc.
Vous pouvez sélectionner le thème de la page dans les propriétés de la page.
Nuancier
Un échantillon est l'un des nombreux schémas de couleurs fournis par votre thème. Un thème peut prendre en charge jusqu'à 26 échantillons, chacun
identifié par une seule lettre (A, B, C, D, etc.).
Le gestionnaire de thèmes jQuery Mobile intégré vous permet de créer un nombre illimité de nuances pour un thème personnalisé.
Objets jQuery Mobile
Les objets suivants ne sont disponibles que pour les pages Web mobiles.
•
Pliant
•
Interrupteur à levier
•
Grille de mise en page
•
Listview
•
Menu imbriqué
•
Panneau
•
Menu contextuel
•
Table réactive
•
Glissière
•
Onglets
Objets standard optimisés pour jQuery Mobile
Les objets standard suivants ont été optimisés pour jQuery Mobile. Leur apparence est également affectée par le thème
jQuery Mobile.
•
Bouton
•
Case à cocher (prend en charge plusieurs éléments)
•
Combobox
•
Editbox
•
Aller au menu
•
S'identifier
•
Se déconnecter
•
Barre de navigation
•
Ticker du fil d'actualité
•
Bouton radio (prend en charge plusieurs éléments) Recherche sur
•
site
•
Zone de texte
•
Menu texte
259
WYSIWYGWeb Builder 16
Propriétés communes de jQuery Mobile
Les propriétés suivantes sont disponibles dans la plupart des objets jQuery Mobile.
Coins
Applique le rayon de la bordure du thème s'il est défini sur true.
Pleine largeur
Spécifie si l'objet doit utiliser toute la largeur de la page. Si cette option est définie sur false, l'objet aura une largeur «fixe», qui est
généralement le total du texte, du remplissage et de la marge de l'objet.
Encart
En définissant cette option sur false, l'élément aura une apparence pleine largeur sans coins.
Mini
Définit la taille de l'élément sur une version mini plus compacte.
Swatch
Par défaut, l'apparence d'un objet jQuery Mobile est déterminée par le thème de la page (tel que défini dans les propriétés de la page). Mais
chaque thème peut avoir jusqu'à 26 variations (nuances).
Dans la propriété Swatch, vous pouvez sélectionner l'une de ces variations. Notez que vous pouvez modifier le style des thèmes et des nuances dans
le Gestionnaire de thèmes mobiles.
Utiliser le conteneur de champ
Spécifie s'il faut envelopper l'objet dans un conteneur de champ pour aider à le regrouper visuellement dans une forme plus longue. Le conteneur aligne correctement
l'étiquette et les contrôles de formulaire et ajoute une fine bordure pour agir comme un séparateur de champ. La disposition de l'étiquette et du contrôle est
automatiquement définie en fonction de la largeur de l'appareil. Si la largeur du périphérique est petite, l'étiquette est placée en haut du contrôle de formulaire. Sinon,
l'étiquette est placée à gauche dans une mise en page à 2 colonnes.
Icônes
jQuery Mobile fournit un certain nombre d'icônes qui peuvent être utilisées par des objets qui les prennent en charge comme les boutons, les vues de liste, réductibles, etc.
260
WYSIWYGWeb Builder 16
261
WYSIWYGWeb Builder 16
jQuery Mobile pliable
L'objet Collapsible est basé sur le widget Collapsible du framework jQuery Mobile:
http://api.jquerymobile.com/collapsible/
Réductible crée des blocs de contenu réductibles. L'objet réductible peut avoir plusieurs panneaux qui sont des conteneurs pour d'autres
objets. Ces panneaux peuvent être développés ou réduits en cliquant sur l'icône d'en-tête.
Icône réduite
Définit l'icône de l'en-tête du conteneur réductible lorsqu'il est dans un état réduit.
Icône développée
Définit l'icône de l'en-tête du conteneur réductible lorsqu'il est dans un état développé.
Commutateur à bascule mobile jQuery
L'objet Flip Switch est basé sur le widget Flip Switch du framework jQuery Mobile:
http://api.jquerymobile.com/flipswitch/
L'interrupteur à bascule est une alternative à la case à cocher. Il peut être basculé par un clic ou un balayage.
jQuery Mobile Slider
L'objet Slider est basé sur le widget Slider du framework jQuery Mobile:
http://api.jquerymobile.com/slider/
Slider est une alternative à la zone d'édition pour les valeurs numériques. Spécifiez les valeurs d'attribut min et max pour définir la plage du curseur. Si
vous souhaitez contraindre l'entrée à des incréments spécifiques, définissez l'attribut step.
262
WYSIWYGWeb Builder 16
Grille de mise en page mobile jQuery
L'objet Layout Grid est basé sur Responsive Grid du framework jQuery Mobile:
http://api.jquerymobile.com/responsive-grid/
Vous pouvez utiliser une grille de mise en page pour placer des objets les uns à côté des autres dans votre page Web. La grille de disposition crée des cellules de
colonne de largeur égale. Par exemple, si la grille de mise en page comporte deux colonnes, elles représenteront toutes les deux 50% de la largeur de la page. La grille
utilisera toujours toute la largeur de la page et peut comporter jusqu'à 5 colonnes, bien qu'il ne soit pas recommandé d'utiliser trop de colonnes pour les écrans plus petits.
Pour ajouter un objet à la grille de mise en page, faites-le simplement glisser-déposer sur une cellule. Une cellule peut avoir plusieurs objets qui seront
alignés selon l'alignement spécifié (gauche, centre, droite).
La grille de mise en page est réactive. Cela signifie que sur des écrans plus petits, la mise en page passera à une mise en page empilée.
Onglets jQuery Mobile
En L'objet Tabs est basé sur le widget Tabs du framework jQuery Mobile:
http://api.jquerymobile.com/tabs/
Les onglets sont une zone de contenu unique avec plusieurs panneaux, chacun associé à un en-tête dans une liste.
Vous pouvez facilement ajouter des objets aux panneaux de l'onglet en les faisant glisser sur le composant. Cela fonctionne de la même manière que pour les calques ou les
formulaires. Pour ajouter des éléments à un autre panneau, cliquez sur l'en-tête / l'onglet pour le rendre actif.
263
WYSIWYGWeb Builder 16
Pied de page jQuery Mobile
L'objet Footer est basé sur le widget Toolbar du framework jQuery Mobile:
http://api.jquerymobile.com/toolbar/ Un pied de page est généralement le dernier élément de chaque page mobile et il contient généralement une
combinaison de texte et de boutons (de navigation).
Emploi stable
Fait flotter le pied de page au-dessus du contenu via la position CSS.
Plein écran
Définit si le pied de page doit être entièrement masqué lorsque vous appuyez sur la page.
Balise d'en-tête
Spécifie la balise d'en-tête (H1 ... H6) qui sera utilisée pour le pied de page.
Titre
Spécifie le titre du pied de page.
Barre de navigation
Ici, vous pouvez (éventuellement) configurer les boutons de navigation qui feront partie du pied de page.
Chaque bouton peut avoir du texte, une icône et un lien. «Position de l'icône» positionne l'icône dans le bouton. Valeurs possibles: gauche, droite, haut,
bas, aucune.
264
WYSIWYGWeb Builder 16
En-tête jQuery Mobile
L'en-tête est une barre d'outils en haut de la page qui contient généralement le texte du titre de la page et des boutons facultatifs positionnés à
gauche et / ou à droite du titre pour la navigation ou les actions.
Les en-têtes peuvent éventuellement être positionnés comme fixes afin qu'ils restent en haut de l'écran à tout moment au lieu de défiler avec la page.
Le texte du titre est normalement un élément de titre H1, mais il est possible d'utiliser n'importe quel niveau de titre (H1-H6) pour permettre une flexibilité
sémantique.
Emploi stable
Fait flotter le pied de page au-dessus du contenu via la position CSS.
Plein écran
Définit si la barre d'outils doit être entièrement masquée lorsque vous appuyez sur la page.
Balise d'en-tête
Spécifie la balise d'en-tête (H1 ... H6) qui sera utilisée pour le pied de page.
Titre
Spécifie le titre de l'en-tête.
Barre de navigation
Ici, vous pouvez (éventuellement) configurer les boutons de navigation qui feront partie du pied de page.
Chaque bouton peut avoir du texte, une icône et un lien. «Position de l'icône» positionne l'icône dans le bouton. Valeurs possibles: gauche, droite, haut,
bas, aucune.
265
WYSIWYGWeb Builder 16
Vue de liste jQuery Mobile
L'objet Listview est basé sur le widget Listview du framework jQuery Mobile:
http://api.jquerymobile.com/listview/
Un listview est une liste thématique d'éléments qui peuvent avoir des images, des liens et même un filtre de recherche.
Articles
Gérez les éléments de la liste. Les éléments liés auront un indicateur de flèche droite. Il est également possible d'insérer des séparateurs entre les éléments
pour créer des groupes.
Taille de la miniature
Définissez la taille des images miniatures. Toutes les images de la liste doivent avoir la même taille.
Place Holder
Spécifie un petit conseil pour aider l'utilisateur à remplir le champ de saisie. Le texte disparaîtra dès que l'utilisateur saisira du texte.
Filtre de recherche
Ajoutez une barre de filtre de recherche à la liste.
266
WYSIWYGWeb Builder 16
Menu imbriqué jQuery Mobile
L'objet Menu imbriqué est basé sur le widget Popup du framework jQuery Mobile:
http://api.jquerymobile.com/popup/
Au départ, le menu imbriqué affiche un seul bouton sur la page. Lorsque l'utilisateur clique sur le bouton, un menu contextuel apparaît. Il
s'agit d'une combinaison des objets Réductible et Listview.
Les éléments de menu peuvent être catégorisés et chaque catégorie peut être réduite / développée.
Menu contextuel jQuery Mobile
L'objet Popup Menu est basé sur le widget Popup du framework jQuery Mobile:
http://api.jquerymobile.com/popup/
Au départ, le menu contextuel affiche un seul bouton sur la page. Lorsque l'utilisateur clique sur le bouton, un menu contextuel apparaît. Le menu peut
également inclure des séparateurs pour créer des groupes.
.
267
WYSIWYGWeb Builder 16
Panneau mobile jQuery
L'objet Panel est basé sur le widget Panel du framework jQuery Mobile:
http://api.jquerymobile.com/panel/
Un panneau est initialement invisible, mais peut glisser du côté droit ou gauche de la page en cliquant sur le bouton de menu. Le contenu
du panneau peut être une vue de liste / menu ou une autre page!
Fermer le texte du bouton
Spécifie le texte à afficher sur le bouton.
Contenu
Spécifie s'il faut utiliser une vue de liste / menu ou une page pour le contenu.
Si vous sélectionnez «listview», le panneau agira comme un menu. Si vous sélectionnez «page», vous pouvez sélectionner une autre page. Dans ce cas,
tous les objets de cette page seront incorporés dans la page actuelle.
Mode d'affichage
Spécifie la relation entre le panneau et le contenu de la page.
•
révéler
•
pousser
•
recouvrir
Poussez la page.
Redistribuez le contenu pour l'adapter au contenu du panneau sous forme de colonne.
Asseyez-vous sur le contenu.
Position
Spécifie si le menu du panneau sera affiché sur le côté gauche ou droit de la page.
Rejetée
Spécifie si le panneau peut être fermé en cliquant à l'extérieur sur la page.
Emploi stable
Définit si le panneau a un positionnement fixe pour que le contenu soit visible même si la page est défilée vers le bas. Cela permet également à la
page de défiler pendant que le panneau reste fixe.
Glisser Fermer
Spécifie si le panneau peut être fermé en balayant le panneau vers la gauche ou vers la droite.
268
WYSIWYGWeb Builder 16
Tableau réactif jQuery Mobile
L'objet Responsive Table est basé sur le widget Table du framework jQuery Mobile:
http://api.jquerymobile.com/table/
L'un des plus grands défis de la conception Web réactive (RWD) consiste à présenter des données tabulaires. Les grands tableaux avec beaucoup de
colonnes ne tiennent pas sur des écrans plus petits et il n'y a pas de moyen simple de reformater le contenu du tableau avec des requêtes CSS et multimédia
pour une présentation acceptable. Pour résoudre ce problème, le framework jQuery Mobile propose deux options différentes pour présenter les tableaux de
manière réactive. Chacun a des avantages et des compromis, le bon choix dépendra des données présentées.
Reflowmode - Reformate les colonnes du tableau à des largeurs étroites afin que chaque ligne de données soit présentée comme un bloc formaté de paires étiquette /
données. Ceci est idéal pour les tableaux contenant des informations sur les produits ou les contacts avec un formatage de données plus complexe ou plus long qui ne
nécessite pas de comparaison entre les lignes de données.
En mode de redistribution, vous pouvez définir le point d'arrêt pour le moment où la table passera à la disposition empilée. La valeur par défaut (-1)
passera de la présentation tabulaire à la présentation empilée à 560px (35em).
269
WYSIWYGWeb Builder 16
Mode de basculement de colonne - Cache sélectivement les colonnes à des largeurs plus étroites par défaut, mais propose également un menu permettant aux utilisateurs de
contrôler manuellement les colonnes qu'ils souhaitent voir. Ce mode est préférable pour les tableaux de données financières qui ont des valeurs compactes et qui doivent
maintenir des comparaisons entre les colonnes et les lignes de données. Il peut également être utilisé pour créer des éléments tels que des tableaux de comparaison de
produits.
Le tableau fonctionne en masquant et en affichant les colonnes en fonction de deux entrées: la largeur d'écran disponible ou par l'utilisateur vérifiant et décochant les colonnes
à afficher dans une fenêtre contextuelle de sélecteur de colonne. Ajoutez des attributs de priorité aux données à chacun des en-têtes de tableau des colonnes que vous
souhaitez afficher de manière réactive et attribuez une priorité (1 = la plus élevée, 6 = la plus basse).
La première chose à faire est de définir la structure de la table. Pour chaque colonne, vous pouvez définir le nom, la priorité et l'alignement de la colonne. La
priorité (1 = la plus élevée, 6 = la plus basse) est utilisée uniquement en mode bascule Colonne. Les colonnes seront affichées en fonction de la largeur
d'écran disponible et de la priorité.
Après avoir défini la structure, vous pouvez ajouter des données. Vous pouvez insérer manuellement les éléments ou importer des données à partir d'un fichier
séparé par des virgules.
.
270
WYSIWYGWeb Builder 16
Publiez votre site Web
Vous pouvez publier vos pages Web à l'aide de l'outil de publication intégré. Sélectionnez Fichier-> Publier
pour ouvrir la boîte de dialogue de publication.
Il existe deux façons de publier vos pages:
1. Publiez dans un dossier local.
2. Publiez sur un serveur FTP distant.
Publier dans un dossier local
Cliquez sur Ajouter pour ajouter un nouvel emplacement à la liste. Entrez un nom pour
l'emplacement et sélectionnez Local comme type.
Entrez le dossier dans lequel vous souhaitez publier le document actif.
Cliquez sur OK pour enregistrer les données, puis sur Publier pour enregistrer les fichiers dans le dossier spécifié. Si vous ne souhaitez pas copier des images
ou d'autres composants avec le fichier HTML, sélectionnez le Publier uniquement des fichiers HTML option. Sinon, toutes les images, contrôles ActiveX,
applets java, etc. seront copiés dans le même dossier.
271
WYSIWYGWeb Builder 16
Publiez sur un serveur FTP distant.
Cliquez sur Ajouter pour ajouter un nouvel emplacement à la liste.
Entrez un nom pour l'emplacement et sélectionnez Serveur distant / FTP comme tapez et remplissez les champs suivants:
Hôte
Le champ Adresse de l'hôte contient l'emplacement du serveur FTP. Vous pouvez
spécifier une URL ou une adresse IP.
Port
Le port par défaut d'une connexion FTP est 21, mais si nécessaire, vous pouvez configurer autre chose.
Mode PASV
Le mode PASV est utile pour certains types de pare-feu qui n'autorisent pas les serveurs FTP à lancer des connexions de données
vers le client connecté.
Nom d'utilisateur
C'est ici que vous entrez le nom d'utilisateur du compte FTP qui vous permet de vous connecter au serveur FTP (voir également le paramètre anonyme).
Mot de passe
Saisissez le mot de passe du compte FTP.
Dossier distant
Spécifie le dossier sur le serveur FTP où les fichiers sont téléchargés. La valeur par défaut est votre répertoire racine. Les emplacements de dossiers
distants courants sont:
/ www
/ public_html
Note importante: Malheureusement, cette valeur est différente pour chaque hébergeur, alors consultez la documentation de votre hébergeur pour plus
de détails.
Tester la connexion
Cette commande peut vous aider à déterminer si le nom d'hôte, le nom d'utilisateur et le mot de passe spécifiés sont corrects. Il vérifie également si
votre pare-feu autorise la connexion au serveur.
Le ' Explorer' Le bouton dans les paramètres de publication vous donne accès à vos fichiers publiés. Cliquez sur ce bouton pour lancer le client FTP
intégré pour gérer vos fichiers en ligne.
Le client FTP intégré présente également un moyen simple de trouver le dossier de publication distant. Connectez-vous simplement à votre compte, naviguez
jusqu'au dossier et cliquez sur «Make Home». WYSIWYGWeb Builder utilisera désormais ce dossier comme racine de votre site Web!
272
WYSIWYGWeb Builder 16
Pages à publier
Sélectionnez la ou les pages que vous souhaitez publier.
Site Web complet, publie toutes les pages du site Web (à l'exception des pages qui ont activé «Ne pas publier cette page» dans les propriétés de la
page)
Sélectionnez la page uniquement, publie la page de sélection, cliquez sur Sélectionner pour spécifier la page à publier.
Sélectionnez Page et sous-pages, publie la page de sélection et toutes ses sous-pages (le cas échéant).
Des dossiers
Spécifie les fichiers qui seront publiés.
•
Publier tous les fichiers
Tous les fichiers de la ou des pages sélectionnées seront publiés
•
Publier uniquement des fichiers HTML
Sélectionnez cette option si vous ne souhaitez pas télécharger d'images ou d'autres composants avec le fichier HTML.
•
Publier uniquement les fichiers d'objets modifiés
Sélectionnez cette option si vous souhaitez publier uniquement des fichiers d'objets modifiés depuis la dernière publication de
votre site Web. Ce qui est publié exactement dépend des modifications que vous avez apportées. Par exemple, si vous avez
seulement changé la position d'un objet, alors seul le fichier HTML a été modifié, mais si vous avez changé la taille d'une
forme, alors l'image de la forme doit être régénérée et donc le HTML et l'image le fichier sera publié.
Notez que cette option ne compare pas les fichiers locaux et les fichiers sur le serveur, car cela prendrait trop de temps. Au lieu de
cela, il vérifie si un objet a été modifié depuis la dernière publication. Si vous avez modifié une ou plusieurs propriétés d'un objet,
tous les fichiers de cet objet seront publiés. Pour les petits changements, cela réduira le nombre de fichiers publiés / téléchargés.
Sauvegarde
Spécifie s'il faut effectuer une sauvegarde du projet sur le serveur.
•
Aucun
•
Faire une sauvegarde du fichier de projet (.wbs uniquement)
Pas de sauvegarde
Cela publiera / téléchargera le fichier de projet sur le serveur. Les images et autres fichiers ne seront pas inclus!
•
Faites une sauvegarde complète du fichier de projet au format zip.
Cela publiera / téléchargera le projet, les images et les autres fichiers sur le serveur dans un fichier zip.
Remarque: les images et autres fichiers ne seront inclus que s'ils sont stockés dans le dossier du projet. Là pour, l'option «Laisser
WYSIWYG Web Builder gérer les images et autres fichiers utilisés par un projet» doit être activée.
273
WYSIWYGWeb Builder 16
Plus d'informations sur la publication
Pour rendre vos pages Web disponibles pour d'autres utilisateurs, vous devez les publier sur un serveur Web. Il existe de nombreuses sociétés
d'hébergement disponibles, par exemple:
http://www.1and1.com
http://www.godaddy.com/
Assurez-vous de choisir un hébergeur qui prend en charge FTP, ce qui facilite grandement la publication de vos pages à partir de Web Builder. Une fois que vous vous
êtes inscrit auprès d'un hébergeur, vous recevrez une adresse de serveur, un nom d'utilisateur et un mot de passe. Entrez ces informations dans Web Builder en
sélectionnant: Fichier-> Publier. Cliquez sur Ajouter et sélectionnez Type Remote. Parfois, vous devez également spécifier un dossier distant tel que «public_html». si
vous avez un pare-feu / routeur sélectionnez ' Utilisez le mode passif pour les transferts ». Cliquez sur OK pour enregistrer. Vous pouvez désormais publier chaque
page simplement en sélectionnant Publier. Si vous souhaitez afficher les résultats du transfert de fichiers, vous pouvez afficher le fichier journal via: Outils-> Options->
Publier-> Afficher le journal.
Comment publier sur un hôte proposant un hébergement Web gratuit qui ne prend pas en charge FTP?
Au lieu de publier vos pages Web directement via FTP, vous pouvez également publier vos pages dans un dossier local.
•
Cliquez sur Ajouter et sélectionnez Type local.
•
Entrez un nom et spécifiez un emplacement à l'aide du bouton Parcourir (..). Cliquez sur OK pour enregistrer.
•
•
Maintenant, si vous appuyez sur le bouton Publier, les fichiers seront générés dans le dossier local.
•
Sélectionnez ensuite tous les fichiers dans le dossier de publication local et téléchargez-les à l'aide du gestionnaire de fichiers de votre hôte Web.
Publier sur un serveur FTP sécurisé
Pour publier sur un serveur FTP sécurisé (SFTP ou FTPS), vous devrez installer l'extension Secure FTP qui est disponible
séparément: http://www.wysiwygwebbuilder.com/secureftp.html
Que faire en cas d'erreurs de publication?
Veuillez consulter la FAQ sur la publication pour des solutions aux problèmes de publication courants:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=10&t=36493
274
WYSIWYGWeb Builder 16
Liens
Les liens (hyper) sont du texte ou des images sur lesquels il est possible de cliquer pour amener l'utilisateur vers un autre fichier Web tel qu'une page Web, des
images ou tout autre fichier. Ils sont l'essence même du World Wide Web car ils relient des pages dans des sites et des sites Web à d'autres sites Web.
Surligner le texte ou l'image qui sera le lien et sélectionnez Insertion-> Lien dans la barre de menu ou en appuyant sur CTRL + K. Cela affichera la
fenêtre Insérer un lien hypertexte.
Lien vers une page sur un autre site Web
Met le Lié à option pour Adresse Web externe. Entrez l'URL complète (adresse Internet) de la page de destination dans la zone URL. Les URL externes
DOIVENT commencer par "http: //" ou elles ne fonctionneront pas. Par exemple, pour créer un lien vers la page d'accueil de Pablo Software Solutions, saisissez
"http://www.pablosoftwaresolutions.com/" au lieu de "www.pablosoftwaresolutions.com".
Lien vers une page de votre propre site Web
Met le Lié à option pour Page de ce projet.
Cliquez sur «Sélectionner» pour choisir une page. Cela listera toutes les pages qui font partie du projet en cours. Sélectionnez l'une des pages et un lien
relatif sera automatiquement créé (par exemple ./ products.html) .
•
Vous devez publier toutes les pages auxquelles vous avez lié afin de pouvoir tester les liens relatifs.
•
Les liens internes ne fonctionnent pas en mode Aperçu, sauf si vous avez défini Aperçu de la portée à l'ensemble du site Web (Outils->
Options-> Aperçu)
Lien vers une adresse e-mail
Sélectionner Adresse électronique dans la liste déroulante Lien vers. La zone URL sera automatiquement mise à jour avec le mailto: préfixe.
Saisissez maintenant l'adresse e-mail de destination. Par exemple:
mailto: [email protected]
ou
mailto: [email protected] ? subject = Commentaires sur le site Web
Lien vers un fichier
Met le Lié à option pour fichier. Recherchez le fichier pour lequel vous souhaitez créer un lien. WYSIWYG Web Builder téléchargera
automatiquement le fichier local sur votre site Web lorsque vous publiez votre page.
Remarque: Lors de la création de liens vers des fichiers volumineux, le transfert du fichier sur votre site Web peut prendre un certain temps!
275
WYSIWYGWeb Builder 16
Liens intelligents
Les liens intelligents peuvent être utilisés pour créer un lien vers le suivant, le précédent, le parent ou l'enfant de la page actuelle. Si vous modifiez la structure
de votre site Web, ces liens seront automatiquement mis à jour pour représenter l'état actuel.
Les options de lien intelligent suivantes sont disponibles:
•
Page parente; Lien vers le parent de la page actuelle.
•
Page enfant; Lien vers le premier enfant de la page en cours.
•
Page suivante; Lien vers le frère à droite de cette page.
•
Page précédente; Lien vers le frère à gauche de cette page.
•
Retour; Revenez à la page précédente de l'historique du navigateur.
•
Fermez la fenêtre actuelle du navigateur; Fermez la fenêtre actuelle du navigateur, cette fonctionnalité n'est pas prise en charge par tous les
•
Imprimez la page en cours; Cliquez sur le lien pour imprimer la page actuelle.
•
Rafraîchir la page; Cliquer sur le lien rechargera / actualisera la page actuelle.
navigateurs!
Autres types de liens
•
FaceTime
Lancez l'application FaceTime et lancez un appel vers l'utilisateur spécifié. Exemple: facetime:
14085551234 ou FaceTime: [email protected]
•
Numéro de téléphone
•
SMS
Appelez le numéro spécifié. Exemple: tel: +1200229933
Envoyez un SMS. Exemple: sms: +3290322111
•
Skype
Lancez l'application Skype et lancez un appel vers l'utilisateur spécifié. Exemple: skype: skype_user
Fenêtre ou cadre cible
Ouvrir dans la même fenêtre de navigateur, cette option définira la cible du lien sur _self
Ouvrir dans une nouvelle fenêtre de navigateur, cette option définira la cible du lien sur _blank
Ouvrir dans une autre fenêtre ou un autre cadre, cette option vous permet de spécifier une cible personnalisée.
Exemples:
_parent
ouvrir le lien dans le cadre parent
_Haut
charge la page liée dans le cadre supérieur
iframe1
spécifiez le nom d'un cadre en ligne pour ouvrir la page liée dans un cadre en ligne.
Ouvrir dans une fenêtre contextuelle, cette option ouvrira la page liée dans une fenêtre contextuelle (JavaScript). Cliquez sur 'Paramètres' pour
spécifier les propriétés de la fenêtre contextuelle:
La gauche, Spécifie la position gauche, en pixels. Cette valeur est relative au coin supérieur gauche de l'écran. La valeur doit être
supérieure ou égale à 0.
Haut, Spécifie la position supérieure, en pixels. Cette valeur est relative au coin supérieur gauche de l'écran. La valeur doit être
supérieure ou égale à 0.
La taille, Définit la hauteur de la fenêtre en pixels. La valeur minimale est de 150 pour Internet Explorer!
Largeur, Définit la largeur de la fenêtre en pixels. La valeur minimale est de 250 pour Internet Explorer!
Barre d'état, Activez la barre d'état en bas de la fenêtre.
Barre d'outils, Activez la barre d'outils standard du navigateur, avec des boutons tels que Précédent et Suivant.
Bar de localisation, Activez le champ de saisie Emplacement dans lequel vous saisissez l'URL.
Barre de menu, Activez la barre de menus de la fenêtre.
Redimensionnable, Autoriser / interdire à l'utilisateur de redimensionner la fenêtre.
Barres de défilement, Activer les barres de défilement si le document est plus grand que la fenêtre
276
WYSIWYGWeb Builder 16
Favoris (passer à une autre partie de la page)
Le texte et les images peuvent être définis comme des signets (également appelés «ancres») qui peuvent être liés dans une page. Par exemple, si une page
contient plusieurs nouveaux éléments, les titres d'actualités de chaque élément peuvent être définis comme signets et une ligne de liens peut être ajoutée en
haut de la page qui descendra chacun vers ces sections marquées. Cette méthode d'utilisation des signets permet aux visiteurs de votre site d'accéder
rapidement aux informations sans avoir à faire défiler la page pour afficher les informations qu'ils souhaitent.
Étape 1
Vous pouvez créer un signet à l'aide de l'outil Signet du menu Insertion
Étape 2
Déplacez l'icône de signet à l'endroit où vous souhaitez que la page accède si l'utilisateur clique sur le lien.
Étape 3
Assurez-vous de donner au signet un identifiant unique.
277
WYSIWYGWeb Builder 16
Étape 4
Une fois que vous avez placé le signet sur votre page, il peut être sélectionné dans la liste déroulante Signet.
Apparence
Tous les hyperliens de votre page Web utilisent par défaut les couleurs de lien HTML par défaut (lien: bleu, visité: violet, actif: rouge). En définissant les styles de lien
hypertexte (CCS), vous pouvez ajuster les couleurs et la mise en forme d'un lien hypertexte. Une fois que vous avez défini un style, vous pouvez le joindre au lien
hypertexte en le sélectionnant dans le Style la liste déroulante. Clique le Modifier les styles bouton pour ajouter ou modifier la feuille de style du lien hypertexte.
Feuille de style de lien hypertexte
Par défaut, tous les liens hypertexte texte d'une page utilisent les couleurs de lien HTML par défaut (lien: bleu, visité: violet, actif: rouge). Cependant, en
utilisant des styles d'hyperliens, il est possible d'utiliser différentes couleurs et autres effets.
278
WYSIWYGWeb Builder 16
Cliquez sur Ajouter pour ajouter un nouveau style de lien hypertexte. Chaque style de lien hypertexte vous permet de personnaliser les couleurs des quatre états de lien
hypertexte:
Lié ( par défaut: bleu, souligné)
A visité ( par défaut: violet, souligné)
actif ( par défaut: rouge, souligné)
Flotter ( par défaut: bleu, souligné)
Outre les couleurs, vous pouvez également modifier le formatage gras, souligné et italique.
Chaque style doit être enregistré avec un nom unique.
Dans la fenêtre Propriétés du lien, vous pouvez attacher ce nom à un lien.
Cliquez sur Éditer pour modifier un style existant et Retirer pour le supprimer de la liste.
Exemple: suppression du soulignement d'un lien.
1. Créez un nouveau style et décochez la case de soulignement pour les quatre états.
2. Nommez le style «no_underline»
3. Cliquez sur OK pour enregistrer.
4. Sélectionnez un lien et modifiez le Style de la liste déroulante à «no_underline»
5. Publiez ou prévisualisez la page pour voir l'effet.
Remarque: Le style de lien devient actif lorsque vous publiez ou prévisualisez votre page. Web Builder affichera toujours les liens en bleu.
Transition
Spécifie la durée de transition pour passer d'un état à un autre. Cela permet d'animer le changement d'état du lien. En savoir plus
sur les transitions ici: Animations et transitions CSS3.
279
WYSIWYGWeb Builder 16
Gestionnaire de site
Le Gestionnaire de site peut être utilisé pour gérer la structure de votre site Web. Lorsque votre site Web a plus d'une page, ils doit font tous partie du
même fichier de projet Web Builder. Le Gestionnaire de site peut être utilisé pour ajouter, modifier, supprimer des pages et organiser votre site Web. Il
existe également un bouton pour ouvrir les propriétés de la page sélectionnée. La commande Nouveau dossier vous donne la possibilité d'organiser vos
pages dans des dossiers.
Dans l'image ci-dessus, vous voyez un exemple de structure de site Web. Le nom de fichier de cet exemple de site Web s'appelle «mywebsite.wbs», ce
nom est toujours affiché à la racine de l'arborescence du site Web. La racine peut avoir une ou plusieurs pages et chaque page peut également avoir des
sous-pages.
Les sites Web ont toujours un page d'accueil, qui est souvent appelé indice, c'est pourquoi Web builder ajoute automatiquement cette page à chaque
nouveau projet. Les noms des éléments (pages) dans l'arborescence du site sont les noms de fichiers réels des fichiers HTML cibles, donc si vous avez
nommé une page «index», il sera publié comme index.html.
Ajouter une nouvelle page
1.
Sélectionnez la position où vous souhaitez insérer la page, par exemple sélectionnez la racine (l'élément de niveau supérieur) pour insérer la
page au premier niveau.
2.
Cliquez sur le premier bouton de la barre d'outils (Nouvelle page)
3.
Web Builder ajoute la nouvelle page à votre projet et l'ouvrira automatiquement afin que vous puissiez commencer à créer la page.
Pour insérer une nouvelle page en tant qu'enfant d'une page ou d'un dossier existant, sélectionnez d'abord le parent et cliquez sur «Nouvelle page»
Pointe:
Vous pouvez également utiliser le menu contextuel (clic droit de la souris) pour ajouter de nouvelles pages au site Web ou vous pouvez sélectionner Page->
Nouvelle page dans le menu Web Builder.
280
WYSIWYGWeb Builder 16
Ajouter un nouveau dossier
1. Sélectionnez la position où vous souhaitez insérer le dossier, par exemple sélectionnez la racine (l'élément de niveau supérieur) pour insérer
la page au premier niveau.
2. Cliquez sur le deuxième bouton de la barre d'outils (Nouveau dossier)
3. Web Builder ajoute le nouveau dossier à votre projet.
Ouvrez une page existante
1. Sélectionnez l'élément (nom de la page) que vous souhaitez modifier
2. Cliquez sur le troisième bouton (à partir de la gauche) de la barre d'outils (Modifier la page).
Insérer un fichier externe
Cette option peut être utile si vous souhaitez intégrer un fichier externe au projet, afin que vous puissiez facilement le lier ou l'intégrer au plan du
site.
Et bien que cette option ait été conçue pour inclure des fichiers HTML, elle peut être utilisée pour tout type de fichier. Notez cependant qu'il ne s'agira
que d'un lien vers le fichier. Vous ne pourrez pas modifier le fichier directement dans WYSIWYGWeb Builder.
Cloner une page existante
Pour faire une copie exacte d'une page existante, sélectionnez l'élément (nom de la page) que vous souhaitez cloner et cliquez sur le quatrième bouton (à partir de la
gauche) de la barre d'outils pour insérer une copie de cette page.
Supprimer une page / un dossier
Sélectionnez l'élément (nom de la page ou du dossier) que vous souhaitez supprimer et cliquez sur le bouton Supprimer de la barre d'outils ou appuyez sur la touche
Suppr du clavier. Vous ne pouvez pas supprimer la dernière page de votre site Web.
281
WYSIWYGWeb Builder 16
Renommer une page / un dossier
Sélectionnez l'élément (nom de la page ou du dossier) et appuyez sur F2 pour saisir le nouveau nom.
Vous pouvez également utiliser le menu contextuel (clic droit de la souris) pour sélectionner et renommer une page / un dossier.
Lorsque vous avez lié à la page, vous renommez (à partir de n'importe quelle page du site Web), Web Builder met automatiquement à jour tous
les liens pour vous, vous n'avez donc pas à refaire tous les liens internes.
Remarques sur les noms de page
Lors de la création de votre site Web, Web Builder enregistre le fichier de projet avec l'extension .wbs. Il s'agit d'un fichier de projet utilisé par Web Builder
pour simplifier le processus de construction. Un fichier de projet peut contenir plusieurs pages Web. Une fois vos pages prêtes, vous devez les exporter ou
les publier au format HTML.
Le nom du fichier HTML de sortie est tiré du nom que vous avez spécifié dans le Gestionnaire de site.
Donc, si vous avez nommé l'index de la page, le fichier de sortie s'appellera index.html. Si la page a besoin d'une autre extension comme .php, vous
pouvez la configurer dans les propriétés de la page.
Voici quelques conseils pour nommer vos pages Web:
6. N'ajoutez pas d'extension .html ou .htm au nom de la page. Web Builder ajoutera automatiquement le
. html (ou .php, .asp) lorsqu'il publie (ou exporte) le code HTML.
7.
Nommez toujours votre page d'accueil: "index", c'est le nom le plus courant pour une page d'accueil.
8.
Utilisez toujours des noms de fichiers en minuscules, la plupart des serveurs Web sont sensibles à la casse et peuvent ne pas trouver votre page si vous l'avez
appelée «Index» ou «INDEX»
9.
N'utilisez pas d'espace ou d'autres caractères spéciaux dans le nom, gardez-les simples comme: "page1"
ou
"mes_produits"
dix.
Utilisez des traits de soulignement pour relier les mots.
Modifier les propriétés de la page
Pour modifier les propriétés de la page sans avoir à ouvrir la page:
1. Sélectionnez l'élément (nom de la page)
2. Cliquez sur le bouton Propriétés de la barre d'outils ou cliquez avec le bouton droit de la souris sur le menu contextuel et sélectionnez Propriétés de la page.
282
WYSIWYGWeb Builder 16
Organiser les éléments
Vous pouvez organiser les éléments en utilisant le glisser-déposer, sélectionnez l'élément et faites-le glisser vers la position où vous souhaitez le déplacer. Déposer
un élément sur un autre élément en fera automatiquement un enfant de cet élément. Pour éviter cela, vous pouvez maintenir la touche CTRL enfoncée, cela
déplacera l'élément sous l'élément de dépôt. Une autre façon d'organiser les éléments consiste à utiliser le menu contextuel:
1. Sélectionnez un élément
2. Cliquez avec le bouton droit pour afficher le menu.
3. Sélectionnez Réorganiser et l'un des éléments disponibles: Déplacer vers le haut, Déplacer vers le bas, Déplacer vers la gauche ou Déplacer vers la droite.
Importer une page HTML
Bien que Web Builder ne soit PAS un éditeur HTML, vous pouvez importer des pages HTML existantes. Sélectionner Page-> Importer-> Importer une page HTML dans
le menu pour afficher la fenêtre Importer la page HTML. Vous pouvez sélectionner une page HTML à partir de votre lecteur local ou spécifier l'URL d'un site Web en
ligne. Cliquez sur D'accord pour commencer l'importation de la page. Web Builder copiera automatiquement toutes les images sur votre lecteur local.
Remarques importantes sur l'importation de HTML:
•
WYSIWYGWeb Builder n'est pas un éditeur HTML, mais un générateur HTML! Web Builder importe le HTML en rendant le
contenu d'une page existante, puis tente de convertir la mise en page au format d'objet interne de Web Builder.
•
La fonction d'importation importe actuellement uniquement du texte, des images, des éléments de formulaire et des attributs de corps (couleurs des liens,
images d'arrière-plan, balises méta). Les tableaux, scripts, feuilles de style et composants multimédias ne sont pas importés. Mais dans la plupart des cas,
cela suffit pour vous aider à démarrer.
•
Web Builder n'analyse pas les feuilles de style. Dans certains cas, le texte peut paraître différent de la page d'origine.
•
Web Builder ne prend actuellement pas en charge les jeux de cadres. Si vous souhaitez importer une page Web qui utilise des cadres, vous
devrez importer toutes les pages individuelles séparément.
•
Il est très difficile de prendre en charge tous les types de HTML. Même les navigateurs populaires interpréteront le HTML différemment, alors ne
vous attendez pas à des miracles. Si une page ne parvient pas à être importée, elle contient probablement du code que Web Builder ne comprend pas
et vous devez tout de même recommencer à zéro. L'importation de pages Web créées avec WYSIWYGWeb Builder donnera les meilleurs résultats!
Importer une page d'un autre projet
Cette option permet d'importer la page d'un autre projet WYSIWYGWeb Builder.
Position et taille du gestionnaire de site
Vous pouvez placer le gestionnaire de site où vous le souhaitez (ancré ou flottant):
1. «Saisissez» la barre de titre du gestionnaire de site avec votre souris pour déplacer la fenêtre vers un autre emplacement.
2.
Pour masquer automatiquement le gestionnaire de site, cliquez sur la punaise dans le coin supérieur droit. Lorsque vous éloignez la souris de la
fenêtre, elle se cache automatiquement, affiche uniquement un petit onglet où les fenêtres se cachent. Déplacez la souris vers cet onglet pour
rendre la fenêtre à nouveau visible.
283
WYSIWYGWeb Builder 16
Gestionnaire d'objets
Le gestionnaire d'objets donne un aperçu de tous les objets de la page actuelle; vous pouvez rendre un objet invisible, verrouiller / déverrouiller des objets,
modifier l'ordre z ou supprimer un objet spécifique. Double-cliquez sur un objet dans la liste pour le sélectionner dans l'espace de travail.
Le gestionnaire d'objets propose également des fonctionnalités avancées via le menu contextuel (clic droit sur un objet dans la liste):
Renommer l'objet
Vous permet de modifier la propriété ID de l'objet. Notez que vous pouvez également modifier l'ID dans l'inspecteur des propriétés.
Masquer dans d'autres points d'arrêt
Masquez l'objet sélectionné dans d'autres points d'arrêt (mais pas dans la vue actuelle).
Afficher dans tous les points d'arrêt
Afficher l'objet sélectionné dans tous les points d'arrêt (y compris la vue actuelle).
Réinitialiser la position
Cette option peut être utile dans les points d'arrêt lorsque vous avez «perdu» un objet parce qu'il se trouve en dehors de la fenêtre. «Réinitialiser la
position» déplace l'objet vers le coin supérieur gauche de son conteneur.
Noms de fichiers alloués
De nombreux objets génèrent dynamiquement des images. Par exemple, des formes, des barres de navigation, mais aussi des images avec des effets (comme des
ombres).
WYSIWYGWeb Builder générera automatiquement des noms de fichiers uniques pour ces images, pour s'assurer qu'il n'y a pas de conflits.
Les noms générés automatiquement sont déterminés par les paramètres des options de publication.
Pour afficher ou modifier les noms de fichiers générés automatiquement pour un objet, vous pouvez sélectionner Noms de fichiers alloués dans le menu contextuel.
Tous les objets ne prennent pas en charge cette option. Ce n'est utile que pour les objets qui génèrent dynamiquement des images!
284
WYSIWYGWeb Builder 16
En savoir plus sur l'ordre z des objets
WYSIWYGWeb Builder utilise le positionnement CSS pour créer des mises en page parfaites au pixel près en HTML. CSS fonctionne en trois
dimensions - hauteur, largeur et profondeur. Dans Web Builder, chaque objet (élément) de votre page Web est placé sur un calque séparé, ce qui
permet de superposer ces objets, ce qui ne peut pas être fait en utilisant la mise en page HTML standard / dynamique). Pour cela, vous pouvez
attribuer à chaque élément un numéro (z-index). Les éléments avec un indice z plus élevé chevauchent un élément avec un indice z inférieur.
L'ordre z est l'ordre dans lequel les objets seront affichés par le navigateur.
WB génère automatiquement le z-index pour chaque objet que vous ajoutez à votre page. Ainsi, le premier élément aura le z-index «0», le prochain objet
«1» etc. Pour changer le z-index des objets, vous pouvez utiliser les outils d'arrangement (Disposition-> Arranger) ou le Gestionnaire d'objets. Les outils
d'organisation suivants sont disponibles:
Déplacer vers l'avant
Déplacer l'objet au début de la page
Déplacer vers l'arrière
Déplacer l'objet vers l'arrière de la page
Avance
Déplacer l'objet à la position suivante dans l'ordre z
Reculer
Déplacer l'objet vers la position précédente dans l'ordre z
Supposons que vous souhaitiez afficher les objets dans un ordre particulier.
1. Sélectionnez tous les objets un par un dans l'ordre dans lequel vous souhaitez qu'ils s'affichent.
2. Après avoir sélectionné un objet, cliquez sur Disposition-> Réorganiser-> Déplacer au premier plan.
285
WYSIWYGWeb Builder 16
Inspecteur des propriétés
Utilisez la fenêtre Inspecteur des propriétés pour afficher et modifier les propriétés des objets sélectionnés.
Vous pouvez également utiliser la fenêtre Inspecteur des propriétés pour modifier les propriétés de la page. Les modifications seront visibles immédiatement dans l'espace de
travail.
Pour afficher la fenêtre Inspecteur des propriétés, cliquez sur Inspecteur des propriétés dans le menu Affichage. La fenêtre Propriétés s'affiche
généralement dans le coin inférieur droit de WYSIWYGWeb Builder, sous le Gestionnaire de site, mais vous pouvez déplacer et redimensionner la fenêtre.
Nom de l'objet ( Boîte déroulante)
Répertorie l'objet actuellement sélectionné ou «Page» si aucun objet n'est sélectionné. Seuls les objets de la page active sont visibles. Lorsque vous sélectionnez
plusieurs objets, seules les propriétés du premier objet sélectionné apparaissent.
Catégorisé ( Bouton de la barre d'outils)
Répertorie toutes les propriétés et valeurs de propriété de l'objet sélectionné, par catégorie. Vous pouvez réduire une catégorie pour réduire le nombre de
propriétés visibles. Lorsque vous développez ou réduisez une catégorie, vous voyez un plus (+) ou un moins (-) à gauche du nom de la catégorie. Les
catégories sont classées par ordre alphabétique.
Alphabétique ( Bouton de la barre d'outils)
Trie par ordre alphabétique toutes les propriétés des objets sélectionnés.
Page de propriété ( Bouton de la barre d'outils)
Affiche la boîte de dialogue Pages de propriétés pour l'élément sélectionné. Les pages de propriétés affichent un sous-ensemble, le même ou un sur-ensemble des
propriétés disponibles dans la fenêtre Propriétés.
Propriétés / Valeurs
Affiche les propriétés et leurs valeurs de l'objet sélectionné.
Volet de description
Affiche le type de propriété et une brève description de la propriété.
286
WYSIWYGWeb Builder 16
Gestionnaire de style
Le Gestionnaire de styles (Menu-> Format-> Styles) est un endroit central pour ajouter, modifier ou supprimer des définitions de style pour l'ensemble du site Web. La mise à
jour d'un style spécifique affectera tous les objets utilisant ce style. Par exemple, vous pouvez mettre à jour toutes les polices de votre site Web en une seule opération.
Il existe six styles de titre standard (H1, H2, H3, H4, H5, H6), qui sont normalement utilisés uniquement pour les en-têtes de texte. D'autres styles peuvent être utilisés pour
tous les autres objets qui les prennent en charge, comme les éléments de formulaire et les tableaux.
Lorsque vous ajoutez un nouveau style, tous les attributs du style sont vides (= par défaut). Il n'est pas nécessaire de spécifier des valeurs pour tous les attributs. Il est
également possible de définir des attributs de style personnalisés. Vous avez peut-être remarqué que nous l'avons fait pour les styles d'en-tête (CustomStyle est display:
inline;), pour nous assurer qu'il est affiché correctement dans tous les navigateurs.
Remarques:
Tous les attributs de style ne s'appliquent pas à tous les objets! Par exemple, les marges et le remplissage sont actuellement ignorés par la plupart des objets Web Builder.
Ces attributs n'ont été ajoutés que pour résoudre les problèmes d'incompatibilité du navigateur pour les styles d'en-tête.
Les styles d'en-tête (H1, H2 ...) ne peuvent être appliqués qu'au texte.
Gestionnaire de styles de dégradé
Dans le Gestionnaire de styles de dégradé, vous pouvez ajouter, modifier et supprimer des effets de dégradés globaux (multicolores). Ces effets peuvent être
utilisés par les formes, les cliparts, les textes et les outils de dessin.
Les définitions des styles de dégradés sont stockées dans un fichier XML 'gradients.dat' dans le dossier programme. Si vous avez défini des styles
personnalisés et que vous souhaitez utiliser les mêmes styles sur un autre ordinateur, vous devez copier ce fichier.
287
WYSIWYGWeb Builder 16
Événements
Dans WYSIWYGWeb Builder, les images, les formes et les contrôles de formulaire ont une page de propriétés d'événements, pour ajouter facilement des actions aux
événements d'objet, comme OnClick, OnMouseOver, etc.
Les actions prédéfinies incluent: Afficher, Masquer, Déplacer, Définir l'image, Lecture, Pause, Arrêt et Fonction JavaScript. Plusieurs événements
peuvent être affectés à un seul objet.
Dans l'aide, vous trouverez un aperçu de tous les événements disponibles.
Ces actions peuvent être attribuées à l'événement ci-dessus:
Spectacle
Afficher l'objet comme spécifié dans le champ Cible
Cacher
Masquer l'objet comme spécifié dans le champ Cible
Bouge toi
Déplacez l'objet comme spécifié dans le champ Cible vers la position Gauche, Haut.
Définir l'image
Définit l'image de l'objet «Cible» comme spécifié dans Nom de fichier
Fonction JavaScript
Exécutez une fonction JavaScript personnalisée (par exemple. alert ('entrez votre message');)
Ces actions peuvent être utilisées en combinaison avec l'objet Lecteur Windows Media
Jouer
Démarrez le fichier WMP.
Pause
Mettez le fichier WMP en pause.
Arrêtez
Arrêtez le fichier WMP.
Les actions suivantes peuvent être utilisées en combinaison avec l'objet Diaporama
Assurez-vous de sélectionner un objet de diaporama valide comme cible et définissez l'intervalle sur 0!
Diaporama suivant
Affichez l'image suivante d'un diaporama.
SlideShow Précédent
Afficher l'image précédente d'un diaporama
288
WYSIWYGWeb Builder 16
Afficher avec effets
Affichez l'objet tel que spécifié dans le champ Cible tout en utilisant l'un des effets sympas comme la décoloration, le glissement, les stores, l'explosion, la chute de
bouffée, etc.
Donnez à votre site Web d'incroyables effets «web 2.0», en quelques clics de souris seulement!
Masquer avec des effets
Masquez l'objet comme spécifié dans le champ Cible.
SetStyle
L'action SetStyle peut être utilisée pour définir dynamiquement un nouveau style pour un objet. Le style doit avoir été créé dans le Gestionnaire de
styles.
Basculer
Bascule l'état visible (afficher / masquer) d'un objet. Le déclenchement de l'événement à nouveau restaurera l'état précédent. Prend en charge les animations /
assouplissement.
Basculer le style
Basculez entre le style actuel et un autre style tout en animant les changements de style. Le déclenchement de l'événement à nouveau
restaurera le style précédent.
Le style doit avoir été créé dans le Gestionnaire de styles. Notez que l'objet doit également avoir un style courant (prédéfini).
CSS3 Animer
Cela déclenchera une animation CSS3 à partir du gestionnaire d'animation.
Tourner
Fait pivoter un objet en spécifiant l'angle (dans une plage comprise entre 0 et 359). Fonctionne uniquement dans les navigateurs modernes car il utilise des
transformations CSS3.
Démarrage / arrêt de la minuterie
Active ou désactive l'objet Timer spécifié. La cible doit être un objet Timer!
Pause d'animation (CSS3)
Met en pause une animation CSS3 en cours d'exécution.
CV d'animation (CSS3)
Reprend une animation CSS3 interrompue. Il n'est pas possible de reprendre une animation terminée (lorsque le nombre d'itérations a
atteint la fin).
Animer
Réalisez une animation personnalisée d'un ensemble de propriétés CSS. Les
propriétés suivantes peuvent être animées:
À gauche, cela animera l'objet à la position horizontale spécifiée (en pixels). En haut, cela animera
l'objet à la position verticale spécifiée (en pixels). Largeur, cela animera l'objet à la largeur spécifiée
(en pixels). Hauteur, cela animera l'objet à la hauteur spécifiée (en pixels).
Opacité, cela animera l'opacité de l'objet spécifié (dans une plage comprise entre 0,0 et 1,0)
289
WYSIWYGWeb Builder 16
Animations et transitions CSS3
WYSIWYGWeb Builder a un support intégré pour les animations et transitions CSS3. Les animations et transitions sont prises en charge par tous les
navigateurs modernes (FireFox / Safari / Opera / Chrome / IE10), mais PAS par Internet Explorer 9 ou plus ancien!
Animation
Une animation CSS3 est un effet qui permet à un élément de passer progressivement d'un style à un autre sans utiliser JavaScript ou Flash. Les effets
d'animation peuvent être appliqués à une grande variété de propriétés CSS, y compris la couleur d'arrière-plan, la largeur, la hauteur, l'opacité, les
transformations (rotation, inclinaison, mise à l'échelle, traduction) et bien d'autres. Le gestionnaire d'animations peut être utilisé pour définir des animations.
Ces animations peuvent être affectées à un objet dans la section Animation CSS3 des propriétés de l'objet.
Actuellement, les animations sont prises en charge par les objets suivants:
•
Image
•
Texte
•
Forme
•
Clipart
•
Art du texte
•
Courbes
•
Polygone
•
Ligne
•
Bannière
•
Chapiteau
•
Bouton
•
Boîte combo
•
Editbox
•
Zone de texte
Notez cependant que toutes les animations ne sont pas utiles pour tous les objets. Par exemple, animer la couleur d'arrière-plan d'une
image ou d'une forme ne fera rien car il n'y a pas d'arrière-plan dans ce cas!
Vous pouvez également associer une animation à un style (dans le Gestionnaire de styles). Cela permet d'assigner dynamiquement une
animation à un objet (via des événements -> définir le style).
Propriétés d'animation
Animation
Spécifie l'animation (telle que créée dans le gestionnaire d'animations) à utiliser pour l'objet.
Durée
Spécifie la durée de l'animation en millisecondes.
Retard
Le délai entraîne l'attente de la toute première exécution de l'animation pendant la durée spécifiée (en millisecondes) avant de commencer à
s'exécuter. Notez que le retard ne se produira pas pendant les répétitions d'animation. Il ne sera utilisé que pour la première itération de l'animation.
Nombre d'itérations
Vous pouvez configurer le nombre de fois où vous souhaitez que l'animation soit lue, ou vous pouvez même la faire répéter indéfiniment en utilisant -1.
Direction
Réglez ceci sur normal pour lire l'animation du début à la fin. Ou utilisez Alternate pour le lire en avant puis en arrière.
290
WYSIWYGWeb Builder 16
Horaire
La fonction de synchronisation d'animation spécifie la courbe de vitesse de l'animation.
La courbe de vitesse définit le temps qu'une animation utilise pour passer d'un ensemble de styles CSS à un autre. La courbe de vitesse est utilisée pour
effectuer les changements en douceur.
La fonction de synchronisation d'animation utilise une fonction mathématique, appelée courbe de Bèzier cubique, pour créer la courbe de vitesse.
•
linéaire
L'animation a la même vitesse du début à la fin
•
facilité
L'animation a un démarrage lent, puis rapide, avant de se terminer lentement
•
facilité dans
L'animation a un démarrage lent.
•
facilité
L'animation a une fin lente
•
facilité d'entrée
L'animation a à la fois un démarrage lent et une fin lente
Transition
Une transition CSS3 est une animation qui déplace une propriété entre deux états. Les transitions sont une animation implicite, ce qui signifie qu'elles sont
déclenchées par un changement d'état comme «survol» ou «focus», contrairement à une animation qui s'exécute en continu.
Vous pouvez ajouter plusieurs transitions à un objet. Cela permet d'animer plusieurs propriétés en même temps.
Déclencheur
Spécifie quel changement d'état déclenchera la transition. Les déclencheurs couramment utilisés sont «hover» et «focus».
Faire défiler les transitions
Réglez le déclencheur sur «scroll» pour implémenter des transitions de défilement. L'ancre (en combinaison avec le décalage) spécifie quand
l'animation doit commencer et se terminer par rapport à l'élément cible défini. Les transitions de défilement doivent avoir au moins deux «images clés».
Pour plus d'informations, veuillez visiter le tutoriel en ligne:
http://www.wysiwygwebbuilder.com/scroll_transitions.html
Durée
Spécifie la durée de la transition en millisecondes.
Retard
Spécifie quand la transition commencera.
Horaire
La fonction de synchronisation spécifie la courbe de vitesse de l'animation. Voir «propriétés d'animation» pour plus de détails.
Propriété
Spécifie le nom de la propriété CSS à laquelle la transition est appliquée.
Valeur
Spécifie la nouvelle valeur de la propriété CSS.
291
WYSIWYGWeb Builder 16
Gestionnaire d'animation
Le gestionnaire d'animations peut être utilisé pour définir des animations (avec des images clés). Nous avons inclus quelques exemples d'animations pour
vous aider à démarrer.
Important:
Toutes les animations ne sont pas utiles pour tous les objets. Par exemple, animer la couleur d'arrière-plan d'une image ou d'une forme ne fera rien car il
n'y a pas d'arrière-plan dans ce cas. En outre, animer gauche / haut / largeur / hauteur / marge / etc. ne fonctionnera pas pour la plupart des objets car
ces valeurs sont généralement fixes. Si vous souhaitez animer la taille ou la position d'un objet, il est préférable d'utiliser des transformations. Voir les
exemples pour plus de détails.
La première étape de la création d'animations consiste à définir des «images clés». Une image clé est un point qui définit le début et la fin d'une
transition. L'animation la plus simple aura deux images clés - une au début (0%) et une à la fin (100%) - tandis que les animations plus
complexes auront plus d'images clés entre les deux.
Dans l'image clé, vous définissez la position (en pourcentages) sur la durée de l'animation. Vous devez spécifier au moins deux images clés (0%
et 100%), mais vous pouvez en avoir autant que vous le souhaitez.
Chaque image clé définit une propriété (et une valeur) qui est appliquée à l'élément à l'étape spécifiée de l'animation.
Exemple:
Première image clé: 0% -> couleur d'arrière-plan # 000000 Dernière image
clé: 100% -> couleur d'arrière-plan #FFFFFF
Cela animera en douceur la couleur d'arrière-plan d'un objet du noir au blanc.
Notez que le timing est défini dans les propriétés d'animation de l'objet et non dans l'animation elle-même. De cette façon, vous pouvez réutiliser une animation
dans différents objets avec différents paramètres de synchronisation.
Remarque
Vous pouvez animer plusieurs propriétés CSS en même temps en utilisant plusieurs images clés avec la même position. Voir les exemples
d'inclusion pour plus de détails.
Chronologie de l'animation
L'option Chronologie de l'animation est disponible dans le menu Page. La chronologie de l'animation affiche toutes les animations de la page, vous pouvez également
ajouter, modifier et supprimer des animations. Il est également possible de faire glisser et déposer / déplacer des animations sur la chronologie, de sorte que vous
pouvez facilement contrôler la synchronisation des animations
Tutoriels en ligne connexes:
http://www.wysiwygwebbuilder.com/animation.html
http://www.wysiwygwebbuilder.com/transitions.html
http://www.wysiwygwebbuilder.com/transform.html
292
WYSIWYGWeb Builder 16
Effets de mouvement
Les effets de mouvement présentent un moyen plus rapide et plus simple d'implémenter des effets de défilement et des animations d'entrée. Il fournit une
interface simplifiée sans avoir à gérer les événements et les transitions.
Tutoriel en ligne: http://wysiwygwebbuilder.com/motion_effects.html
Effets de défilement
Utilisez les effets de défilement pour créer des animations et des interactions étonnantes lorsque l'utilisateur fait défiler la page. L'état de l'animation
dépend de la position de la barre de défilement.
Dans les versions précédentes, WYSIWYGWeb Builder prenait en charge les effets de mouvement via des transitions de défilement. Ici, vous deviez définir
plusieurs étapes pour implémenter les effets de défilement. Dans WYSIWYGWeb Builder 16, nous avons simplifié ce processus afin que vous puissiez
implémenter certains effets fréquemment utilisés en quelques clics.
•
Défilement vertical
Déplacez l'objet verticalement lorsque l'utilisateur fait défiler la page. Cela peut être utilisé comme un effet de
parallaxe où l'objet se déplace à une vitesse différente du reste de la page.
•
Défilement horizontal
Déplacez l'objet horizontalement lorsque l'utilisateur fait défiler la page.
•
Échelle
Met à l'échelle l'objet lorsque l'utilisateur fait défiler la page.
•
Tourner
Faites pivoter le mouvement de l'objet lorsque l'utilisateur fait défiler la page.
•
Transparence
Rendre les objets plus transparents ou plus opaques en corrélation avec le défilement de l'utilisateur.
•
Brouiller
Rendre les objets plus (ou moins) flous en corrélation avec le défilement de l'utilisateur.
293
WYSIWYGWeb Builder 16
Ancrage de début / fin
Spécifie le début ou la fin de l'effet:
• Lorsque l'objet commence à entrer / sortir de la fenêtre.
• Lorsque l'objet est entièrement visible / invisible.
• Lorsque l'objet est au centre de la fenêtre.
Décalage d'ancrage de début / fin
Spécifie le décalage par rapport à la position de début / fin.
Valeur de début / fin
Spécifie la valeur de début / fin de l'effet sélectionné.
• «scroll vertical» définit le mouvement (en pixels) dans le sens vertical.
• «scroll horizontal» définit le mouvement (en pixels) dans le sens horizontal.
• «échelle» définit le niveau de zoom. Par exemple, 1.0 est 100% et 2.0 est 200%
• 'rotate' définit l'angle en degrés entre 0 et 360.
• «transparence» définit l'opacité entre 0,0 et 1,0
• 'blur' définit le rayon de flou en pixels.
Remarques sur les effets de défilement
le défilement vertical, le défilement horizontal, l'échelle et la rotation ont toujours le même ancrage de début et de fin car les transformations ne peuvent pas être
définies individuellement en HTML.
En arrière-plan, les «effets de défilement» utilisent des transitions standard. Donc, si vous activez l'une des options, cela ajoutera automatiquement de
nouveaux éléments de transition dans les propriétés 'Animations / Transitions' de l'objet. Il n'est pas recommandé de mettre à jour ces valeurs
manuellement, sauf si vous savez ce que vous faites.
Animations d'entrée
Animations d'entrée vous permet de déclencher une animation lorsque l'utilisateur fait défiler la page, comme un fondu, une diapositive ou une
échelle. Vous pouvez choisir parmi plus de 30 animations. La durée spécifie la durée de l'animation (lente, normale ou rapide) et le délai peut être
utilisé pour attendre x millisecondes avant le début de l'animation. Lecture spécifie le début de l'animation.
Remarque sur les animations d'entrée
En arrière-plan, les «animations d'entrée» utilisent des événements onscrollreveal. Donc, si vous sélectionnez l'une des animations d'entrée, cela
ajoutera automatiquement de nouveaux éléments dans les propriétés 'Evénements' de l'objet. Il n'est pas recommandé de mettre à jour ces valeurs
manuellement, sauf si vous savez ce que vous faites.
294
WYSIWYGWeb Builder 16
Site Web adaptatif
Avec l'augmentation de la popularité de la navigation sur les téléphones mobiles et les tablettes, il devient essentiel de créer des sites Web optimisés
pour les besoins de ces utilisateurs. Auparavant, vous deviez créer différentes versions du site Web et utiliser des scripts pour rediriger le visiteur vers
la version mobile de la page. WYSIWYGWeb Builder introduit le «Responsive Web Design» qui vous permet de créer une seule page HTML contenant
différentes variantes de la mise en page, chacune optimisée pour des largeurs d'appareils spécifiques. Votre site Web répondra de manière dynamique
à la taille de l'écran du visiteur et affichera la mise en page la plus appropriée à son appareil. Ces différentes variantes sont appelées «points d'arrêt»
et utilisent les requêtes multimédias de CSS3.
Un point d'arrêt est une «vue» distincte de la page dans WYSIWYGWeb Builder. Une page peut avoir plusieurs points d'arrêt, chacun optimisé pour
une largeur d'écran spécifique. Par exemple, vous pouvez avoir la disposition de bureau standard, une pour les tablettes (1024 px) et une autre pour
les téléphones mobiles (320 px). Les points d'arrêt courants sont:
•
320 px, Portrait mobile, 480 px, Paysage mobile
•
768 px, portrait de tablette 1024 px, paysage de tablette / netbook
•
1280 px et plus, ordinateur de bureau
Bien sûr, vous pouvez définir vos propres largeurs et avoir autant de points d'arrêt que vous le souhaitez (max 25), bien que généralement vous n'en ayez pas
plus de 3. Pour ajouter ou modifier des points d'arrêt, cliquez sur l'option «Gérer les points d'arrêt» dans le menu Page. Pour basculer entre les points d'arrêt,
cliquez sur le menu déroulant «Points d'arrêt» et sélectionnez le point d'arrêt souhaité. Pour revenir à la mise en page par défaut, sélectionnez "Par défaut".
Les différentes variantes partagent le même contenu (texte, images, etc.) et vous pouvez modifier la position et la taille de l'objet pour chaque point d'arrêt.
Vous pouvez également ajouter un contenu unique pour des largeurs d'écran spécifiques, ce qui permet par exemple de masquer des objets sur un écran
plus petit.
Les objets suivants ne répondent pas; cela signifie qu'ils ne peuvent pas avoir une taille différente dans les points d'arrêt. Voir également
«Remarques importantes sur le Responsive Web Design».
•
Bannière
•
Courbe
•
Texte incurvé
•
Ligne
•
Barre de navigation
•
OLE
•
Polygone
•
Forme
•
Table
•
Art du texte
•
Texte d'habillage
Si vous avez besoin de tailles différentes dans les points d'arrêt, vous devrez créer une copie de l'objet.
295
WYSIWYGWeb Builder 16
Remarques importantes sur la conception Web réactive
Les objets peuvent avoir une taille, une position et un état de visibilité différents par point d'arrêt. Cependant, toutes les autres propriétés seront
exactement les mêmes! Par exemple, si vous modifiez la couleur d'un objet, elle sera modifiée dans tous les points d'arrêt (car l'objet est
partagé entre toutes les vues).
Bien que les objets puissent avoir des tailles différentes dans les points d'arrêt, il existe quelques exceptions. Par exemple, les formes et autres outils
de dessin auront la même taille dans tous les points d'arrêt. La raison en est qu'une seule image sera publiée et si vous modifiez la taille de cette
image dans un point d'arrêt, elle apparaîtra déformée dans un autre point d'arrêt. Mais vous pouvez utiliser plusieurs formes, une pour chaque point
d'arrêt et masquer celles que vous n'utilisez pas dans d'autres points d'arrêt.
Si vous partagez du texte entre plusieurs points d'arrêt, définissez le «format de sortie» dans l'option de compatibilité sur «Par défaut», car les autres
options optimisent le texte pour une largeur spécifique. Si vous avez vraiment besoin d'utiliser l'une des options de compatibilité, envisagez d'utiliser un
objet texte distinct pour chaque point d'arrêt, afin qu'il puisse être optimisé pour cette largeur spécifique.
Les objets ne peuvent faire partie que d'un seul calque (et formulaire, carrousel, onglets, accordéon, boîte de dialogue). Donc, si vous déplacez un objet vers un
calque dans un point d'arrêt, il fera automatiquement partie du même calque dans d'autres points d'arrêt!
Si vous ajoutez un nouvel objet à un point d'arrêt, il sera initialement masqué sur tous les autres points d'arrêt. Vous pouvez utiliser le gestionnaire d'objets pour
l'afficher si vous le souhaitez également sur d'autres points d'arrêt.
Si vous supprimez un objet d'un point d'arrêt, il sera également supprimé de toutes les autres vues. Si vous souhaitez masquer l'objet,
vous pouvez utiliser le gestionnaire d'objets.
Vous pouvez tester les points d'arrêt dans votre navigateur de bureau. Redimensionnez la fenêtre du navigateur pour activer les points d'arrêt.
Certains navigateurs disposent également d'outils dédiés pour tester des sites Web réactifs. Par exemple, FireFox a une vue de conception réactive
qui est idéale pour tester les points d'arrêt. Consultez la documentation du navigateur pour plus de détails.
Les navigateurs qui ne prennent pas en charge les requêtes multimédias CSS3 afficheront la disposition par défaut.
296
WYSIWYGWeb Builder 16
Validation du formulaire
WYSIWYGWeb Builder a des outils de validation très puissants pour valider l'entrée de l'utilisateur pour EditBox, Combobox, Radio Button,
Checkbox, CAPTCHA et TextArea avant qu'elle ne soit soumise dans un formulaire. Outre la validation basée sur JavaScript, il existe également
un support de validation HTML5 natif intégré!
•
Défaut
•
Bulle d'information (en temps réel)
Affiche un message JavaScript standard.
Sélectionnez cette option pour activer la validation en temps réel. Le champ de saisie sera validé dès qu'il perd le focus sans que
l'utilisateur n'ait besoin d'appuyer d'abord sur le bouton d'envoi. La validation en temps réel utilise des info-bulles au lieu de la boîte de
message standard, ce qui donne à vos formulaires un aspect professionnel. Pour configurer le style des bulles, cliquez sur le bouton
"Paramètres". Vous pouvez configurer les couleurs, la police, le type de bulle, la position et l'effet d'animation.
•
HTML5
Sélectionnez cette option pour utiliser la validation de formulaire HTML5 native. Notez que cette fonctionnalité n'est pas encore disponible dans tous les
navigateurs.
Tutoriel connexe:
http://www.wysiwygwebbuilder.com/validation.html
Validation CAPTCHA
Message d'erreur
Ce message sera affiché si l'utilisateur n'a pas entré de valeur dans le champ CAPTCHA.
Activer la validation en temps réel via AJAX
Si vous activez cette option, la valeur du champ CAPTCHA sera validée sur le serveur dès que le champ perd le focus, sans qu'il soit
nécessaire de soumettre le formulaire.
Validation de la case à cocher
Message d'erreur
Ce message sera affiché lorsque l'utilisateur entre les mauvaises données.
Sélection requise
Activez cette option si la case doit être cochée avant que l'utilisateur puisse soumettre le formulaire.
297
WYSIWYGWeb Builder 16
Validation Editbox et TextArea
Type de date
•
Aucune contrainte
•
Texte
•
Nombre
•
Adresse électronique
•
Toutes les principales cartes de crédit
•
Carte de crédit - American Express
•
Creditcard - Dinersclub
•
Carte de crédit - Découvrir
•
Carte de crédit - Mastercard
•
Carte de crédit - Visa
Toutes les entrées sont acceptées
Le champ de saisie est un champ de texte. Utilisez le format de texte pour spécifier les caractères autorisés
Le champ de saisie est un champ numérique. Utilisez le format numérique pour spécifier les nombres autorisés.
Le champ de saisie est un champ d'adresse e-mail.
Ces options vérifient les formats de carte de crédit courants.
•
Date - jjmmaaaa
•
Date - mmddyyyy
•
Date - aaaammjj
•
Adresse IP
•
URL
•
AJAX
Ces options vérifient les formats de date courants.
Le champ de saisie est une adresse IP.
Le champ de saisie est une URL.
Cette option est destinée aux utilisateurs avancés (!) Qui souhaitent valider une valeur sur le serveur, par exemple dans une base de données. Utilisez
le champ URL pour spécifier le script de validation sur le serveur. Par exemple:
http://www.yourwebsite.com/validate.php
Le script validate.php dans sa forme la plus simple pourrait ressembler à ceci:
<? php
$ username = $ _POST ['données'];
// TODO: recherche du nom d'utilisateur dans la base de données ... if ($
username == 'user')
{
echo "vrai";
}
autre
{
echo "faux";
}
?>
•
Douane
Sélectionnez l'option Personnalisé pour spécifier votre propre expression régulière (JavaScript).
Message d'erreur
Ce message sera affiché lorsque l'utilisateur entre les mauvaises données.
298
WYSIWYGWeb Builder 16
Format de texte
Sélectionnez les types de caractères à autoriser dans le champ Lettres, Chiffres, Espaces (espaces, tabulations, retours chariot et sauts de
ligne) ou Autre (différents caractères, tels que des virgules et des tirets).
Format numérique
Spécifiez d'utiliser une virgule ou un point pour les points décimaux.
Longueur des données
Obligatoire; demander à l'utilisateur de saisir une entrée dans une zone d'édition ou un champ de zone de texte. Le minimum;
spécifie le nombre minimum de caractères à autoriser dans la zone de texte. Maximum; spécifie le nombre maximum de
caractères à autoriser dans la zone de texte.
Valeur des données
Cette option peut être utilisée pour spécifier une limitation de valeur. Dans la liste Le champ doit être, sélectionnez une contrainte: Peu importe,
Inférieur à, Supérieur à, Inférieur ou égal à, Supérieur ou égal à, Égal à ou Non égal à. Dans la zone Valeur, saisissez la valeur de la contrainte.
Pour spécifier une deuxième contrainte, sélectionnez Et doit être,
cliquez sur une condition, puis tapez une valeur.
Rencontre
Cette option vous permet de spécifier un autre champ de formulaire dont le contenu sera vérifié par rapport au champ actuel pour voir s'il est
identique. Cela peut être utile pour valider les champs d'e-mail ou de mot de passe.
Validation de la combobox
Message d'erreur
Ce message sera affiché lorsque l'utilisateur entre les mauvaises données.
Sélection requise
Exiger des utilisateurs qu'ils effectuent une sélection dans la zone de liste déroulante.
Interdire le premier choix
Si vous utilisez la première option pour afficher des instructions, telles que «Sélectionnez une option», vous pouvez rendre la première option indisponible en
activant cette option.
Validation FileUpload
Message d'erreur
Ce message sera affiché lorsque l'utilisateur entre les mauvaises données.
Données requises
Si cette option est activée, l'utilisateur doit spécifier un nom de fichier.
Extensions valides
Spécifie quelle extension sera acceptée par le formulaire.
299
WYSIWYGWeb Builder 16
Conditions de formulaire et calculs
Les conditions de formulaire permettent d'afficher / masquer / activer / désactiver d'autres objets en fonction de la valeur ou de la sélection d'un champ de saisie de
formulaire. Par exemple, vous pouvez désactiver le bouton d'envoi du formulaire jusqu'à ce que l'utilisateur coche une case.
Il est également possible de faire des calculs dans les champs de formulaire. Les calculs sont disponibles dans la section «Conditions» des champs de saisie.
Ils peuvent être utilisés pour calculer une valeur basée sur des valeurs ou des sélections d'autres champs d'entrée. Par exemple, pour calculer le prix total d'un
article dans une boutique en ligne en fonction des options sélectionnées. Les options de conditions / calculs sont disponibles pour Editbox, TextArea,
Combobox, Checkbox et Radio Button. Vous pouvez ajouter plusieurs conditions à un objet, elles seront toutes traitées.
Cible
La propriété Target spécifie l'objet auquel l'action sera appliquée. Par exemple, l'objet qui sera masqué ou désactivé.
Conditions
Les conditions suivantes sont disponibles:
•
changement
L'action sera traitée lorsque la valeur de l'objet aura été modifiée.
•
égal à
L'action sera traitée lorsque l'entrée est égale à la valeur spécifiée.
•
égal à (choix)
L'action est spécifique à la zone de liste déroulante et sera traitée lorsque l'entrée est égale à la valeur spécifiée.
Contrairement à «égal à», cela créera une condition unique pour la valeur spécifiée.
•
est vide
L'action sera traitée lorsque l'entrée est vide.
•
n'est pas vide
L'action sera traitée lorsque l'entrée n'est pas vide.
•
pas égal à
L'action sera traitée lorsque l'entrée n'est pas égale à la valeur spécifiée.
•
pas égal à (choix)
L'action est spécifique à la zone de liste déroulante et sera traitée lorsque l'entrée n'est pas égale à la valeur spécifiée.
Contrairement à «différent de», cela créera une condition unique pour la valeur spécifiée.
•
moins que
L'action sera traitée lorsque l'entrée est inférieure à la valeur spécifiée. Cela peut être utilisé en combinaison avec
«supérieur à» pour créer une plage.
•
plus grand que
L'action sera traitée lorsque l'entrée est supérieure à la valeur spécifiée. Cela peut être utilisé en combinaison avec «moins
de» pour créer une plage.
•
autre
Cela peut être utilisé en combinaison avec «égal à», «différent de», «supérieur à» et «inférieur à».
300
WYSIWYGWeb Builder 16
Actions
Les actions suivantes sont disponibles:
•
spectacle
Montrez l'objet cible.
•
cacher
Cachez l'objet cible.
•
activer
Activez l'objet cible. Notez que cela n'est utile que pour les champs de saisie de formulaire comme une zone d'édition, une zone de texte ou une zone
de liste déroulante.
•
désactiver
Désactivez l'objet cible. Notez que cela n'est utile que pour les champs de saisie de formulaire comme une zone d'édition, une zone de texte ou une
zone de liste déroulante.
•
calculer
Effectuez un calcul. Par exemple, si vous souhaitez calculer le prix du produit sélectionné sur un bouton radio multiplié par un
champ de quantité. Ou calculez la somme de deux champs de formulaire ou plus. Les calculs utilisent la syntaxe Javascript
standard:
1+1
10 - (3 * 2)
Math.max (10, 20) + Math.abs ('- 1')
Pour insérer la valeur d'un autre champ de saisie, placez l'ID de cet objet entre crochets: [Editbox1] * [RadioButton1]
Notez que WWB le convertira automatiquement en $ ('# Editbox1'). Val () dans la page de publication. Les champs peuvent être
insérés avec l'option <Insérer un champ>.
•
javascript
Exécutez une fonction javascript personnalisée. Il s'agit généralement d'une référence à une fonction qui a été définie
ailleurs dans la page.
Tutoriel en ligne associé:
http://www.wysiwygwebbuilder.com/conditions.html
301
WYSIWYGWeb Builder 16
Propriétés Flexbox
Chaque objet a ses propres options flexbox. Ils peuvent être définis via Menu-> Organiser-> Flexbox. Les options Flexbox ne sont
utilisées que lorsque l'objet se trouve dans un conteneur Flex.
Flex croissance
La propriété flex-grow spécifie la croissance de l'objet par rapport au reste des éléments flexibles à l'intérieur du même conteneur
flex.
Si flex-grow est défini sur 1 pour tous les objets, l'espace restant dans le conteneur sera distribué de manière égale à tous les objets.
Si l'un des objets a une valeur de 2, l'espace restant occupera deux fois plus d'espace que les autres objets (si possible).
Rétrécissement Flex
La propriété flex-shrink spécifie comment l'objet se rétrécira par rapport au reste des éléments flexibles à l'intérieur du même
conteneur flex.
Base Flex
La propriété flex-based spécifie la taille initiale d'un objet avant que l'espace restant ne soit distribué. La longueur peut être exprimée en pourcentages
ou en pixels. S'il est défini sur «auto», l'espace supplémentaire est distribué en fonction de la valeur flex-grow.
Alignez-vous
La propriété align-self des éléments flex remplace la propriété align-items du conteneur flex pour cet objet.
•
flex-start
•
extrémité flexible
•
centre
Les articles sont positionnés en haut du conteneur.
Les articles sont positionnés au fond du conteneur.
Les articles sont positionnés au centre du conteneur (verticalement).
•
étendue
•
auto
Les articles sont étirés pour s'adapter au conteneur.
Utilisez l'alignement par défaut du conteneur flexible.
Tutoriel connexe:
http://www.wysiwygwebbuilder.com/flexbox.html
302
WYSIWYGWeb Builder 16
Personnalisation de WYSIWYGWeb Builder
Cette section décrit comment ajouter la personnalisation de WYSIWYGWeb Builder afin que vous puissiez ajouter vos propres boutons d'image, thèmes, etc.
WYSIWYGWeb Builder enregistre toutes les informations de configuration spécifiques à l'utilisateur dans le dossier:
Mes documents \ WYSIWYGWeb Builder \ system \
Cela facilite la sauvegarde de tous vos fichiers et paramètres en copiant tous les fichiers et dossiers dans
Mes documents \ WYSIWYGWeb Builder.
Par exemple, si vous modifiez les styles de dégradé via le Gestionnaire de styles, les modifications seront enregistrées dans
Mes documents \ WYSIWYGWeb Builder \ system \ gradients.dat
Les paramètres de publication seront enregistrés dans le fichier Mes documents \ WYSIWYGWeb Builder \ system \ publish.dat
Clipart
Vous pouvez télécharger des milliers de polices de dingbats gratuites à utiliser comme ClipArt depuis Internet. Recherchez «polices dingbat gratuites» pour trouver toute la
grande collection de nouvelles formes.
Après avoir téléchargé un ou plusieurs fichiers, vous pouvez les copier dans le dossier 'clipart' du dossier système Web Builder: Mes
documents \ WYSIWYG Web Builder \ system \ clipart \
Voir aussi la description ClipArt.
Extensions
Les extensions (également appelées add-ons ou plugins) sont des composants qui améliorent les fonctionnalités de WYSIWYGWeb Builder. Les
extensions sont accessibles via la Boîte à outils ou via le menu Insertion tout comme les objets standard.
Il existe déjà plus de 200 extensions disponibles pour WYSIWYGWeb Builder! Consultez le site Web pour plus de détails: http://www.wysiwygwebbuilder.com/ex
Bien que vous puissiez utiliser Extension Manager pour installer de nouvelles extensions, il est également possible de copier les fichiers manuellement sur le Mes
documents \ WYSIWYG Web Builder \ system \ extensions \ dossier.
Cadres de galerie de photos
Les cadres peuvent être appliqués aux galeries de photos et aux images standard. Des styles de cadres
personnalisés peuvent être ajoutés au dossier:
Mes documents \ WYSIWYGWeb Builder \ system \ gallery \
Voir aussi: Galerie de photos
Modèles
Les modèles que vous créez seront enregistrés dans: Mes documents \ WYSIWYGWeb Builder \ system \ templates Cela signifie que si vous avez
téléchargé des modèles depuis le site Web ou une autre source, ceux-ci doivent être placés dans ce dossier. Voir également la description du
modèle.
Barre de navigation
Pour ajouter vos propres images de boutons à utiliser dans la barre de navigation, placez-les dans le
Mes documents \ WYSIWYGWeb Builder \ system \ navbar dossier.
Menu de l'onglet
Les thèmes du menu de l'onglet sont stockés dans le dossier:
Mes documents \ WYSIWYGWeb Builder \ system \ tabmenu \
Voir également la description du menu Onglet.
303
WYSIWYGWeb Builder 16
Thème Roller
De nombreux widgets jQuery peuvent être stylisés à l'aide de thèmes ThemeRoller.
Les nouveaux thèmes doivent être installés dans le dossier 'themeroller' de WYSIWYGWeb Builder:
Mes documents \ WYSIWYGWeb Builder \ system \ themeroller \
Vous pouvez facilement créer des thèmes personnalisés en visitant le site Web de ThemeRoller: http://www.themeroller.com
Étape 1
Accédez au site Web de ThemeRoller: http://www.themeroller.com
Étape 2
Sélectionnez l'un des thèmes prédéfinis ou créez votre propre thème.
Étape 3
Téléchargez le thème sur votre ordinateur.
Assurez-vous de sélectionner «Tous les composants» et la version 1.8.x pour jQuery 1.4+.
Dans "Paramètres avancés du thème", vous pouvez spécifier le nom de votre thème. Appelons cela «MyFirstTheme».
Le fichier téléchargé est au format zip et s'appellera quelque chose comme: jquery-ui-1.8.2.custom.zip
Étape 4
Décompressez les fichiers dans un dossier temporaire sur votre disque dur. Il y a beaucoup
de fichiers dans le zip dont vous n'avez pas besoin.
Vous trouverez votre thème personnalisé dans: development-bundle \ themes \ MyFirstTheme (où
MyFirstTheme est le nom de votre thème).
Vous devrez copier ce dossier complet dans le dossier du module de commande Web Builder:
Mes documents \ WYSIWYGWeb Builder \ system \ themeroller \ MyFirstTheme
Le nouveau thème sera désormais disponible la prochaine fois que vous ouvrirez les propriétés des objets jQuery.
304
WYSIWYGWeb Builder 16
Créer des newsletters
Bien qu'une newsletter HTML ne semble qu'une autre page HTML, ce n'est malheureusement pas tout à fait vrai. Contrairement aux navigateurs modernes, les clients de
messagerie ne prennent en charge qu'un sous-ensemble limité de HTML. La plupart des clients de messagerie ne prennent pas en charge CSS et pour cela, vous devrez suivre
quelques directives pour vous assurer que vos newsletters peuvent être affichées dans tous les principaux clients de messagerie.
L'étape la plus importante consiste à définir le mode de mise en page de la page sur «Mise en page du tableau». Vous pouvez le faire dans les propriétés de la page
(Menu-> Page-> Propriétés de la page-> Avancé-> Mode de mise en page).
Maintenant, WYSIWYGWeb Builder utilisera des tables (invisibles) pour positionner les objets sur la page. Cela a un énorme inconvénient: vous ne pouvez pas
superposer des objets! Ainsi, votre mise en page ne peut pas avoir d'objets les uns sur les autres.
Pour contourner cette limitation, vous pouvez utiliser l'option «Fusionner» pour fusionner plusieurs objets en une seule image.
Voici une liste des limitations les plus importantes du courrier électronique HTML:
•
Vous ne pouvez pas placer d'objets les uns sur les autres. Le chevauchement n'est pas pris en charge. Fusionner les objets pour contourner cette limitation.
•
Les feuilles de style CSS externes ne sont pas prises en charge. (Désactiver dans Menu-> Outils-> Options-> HTML). JavaScript (cela inclut la
•
navigation, les événements, les objets basés sur jQuery) n'est pas pris en charge. Les formulaires seront généralement affichés, mais ils ne
•
seront pas fonctionnels!
•
Les fichiers Flash et autres fichiers multimédias ne sont pas pris en charge.
•
Les images d'arrière-plan ne sont pas prises en charge.
•
Les liens internes ne fonctionneront pas, utilisez toujours des liens absolus
(par exemple: http://www.yourwebsite.com/pagename.html)
Pointe:
Testez toujours vos e-mails avant de les envoyer! Une fois qu'un e-mail a été envoyé, il est impossible de le reprendre.
305
WYSIWYGWeb Builder 16
Indice
Administrateur CMS, 226
Base de données CMS, 224
UNE
Étiquette CMS, 234
Accordéon, 241
Menu CMS, 235
Action, 98
Modules d'extension CMS, 231
Couleur Active Link, 40
Recherche CMS, 236
ActiveX, 118
Vue CMS, 237
Bouton Ajouter au panier, 203
Pliable, 262
Ajout d'une image à une page Web, 14 Ajout
Boîte combo, 108
de texte à la page, 13
Système de gestion de contenu, 223 Espace
Bouton avancé, 104
réservé au contenu, 141
Texte alternatif, 86
Contraste, 88
Ancré, 128
Convertir en formulaire, 206
Ancres, 82
Copie, 24
Animation, 290
Récolte, 88
Gestionnaire d'animation, 292
Animation CSS et transitions, 290 Menu
Apparence, 278
CSS, 150
Appliquer des effets à une image, 15
Courbe, 170
Auteur, 41
Texte incurvé, 171
Saisie semi-automatique, 242
Personnaliser, 61
Coupé, 24
B
ré
Sauvegarde, 71
Dossier de sauvegarde, 71
DatePicker, 246
Bannière, 167
Police par défaut, 40
Signet, 82
Supprimer, 24
Signets, 277
Supprimer la colonne, 51
Fil d'Ariane, 149
Supprimer la ligne, 51
Luminosité, 88
Description, 41
Liste à puces, 83
Dialogue, 247
Bouton, 115
Station d'accueil, 128
Bouton Acheter maintenant, 202
Type de document, 35
Ne publiez pas vos actifs, 25
dons, 205
C
Ne pas publier cette page, 35
Ne synchronisez pas cette page dans Objets de navigation, 35
CAPTCHA, 105
Porte-cartes, 245
Cartes, 244
E
Carrousel, 181
Catégories, 41
Menu Edition, 25
HTML de cellule, 53
Contenu modifiable, 239
Rembourrage cellulaire, 52
Administrateur de contenu modifiable, 240
Propriétés de la cellule, 53
Editbox, 110
Espacement des cellules, 52
Effets, 88, 90
Centrer dans le navigateur, 35
Page intégrée, 139
Type d'encodage, 98
Rapports d'erreurs, 74
Ch
Événements, 288
Jeu de caractères, 36
Sortie, 23
Case à cocher, 107
Exporter au format HTML, 22
extensions, 72
C
F
ClipArt, 169
Cloner la page, 27
Extension de fichier, 34
Fermer, 21
Menu Fichier, 21
Fermer le site Web, 21
Éditeur de fichiers, 119
Téléchargement de fichier, 112
306
WYSIWYGWeb Builder 16
Trouver, 25
J
Flash, 120
Variables Flash, 121
Java, 125
Conteneur flexible, 134
Commutateur à bascule jQuery, 262
Grille flexible, 136
jQuery Layout Grid, 263 jQuery
Propriétés Flexbox, 302
Listview, 266
Retourner, 88
jQuery Mobile, 259
Flipswitch, 113
Menu imbriqué jQuery, 267 Panneau
Flottant, 128
jQuery, 268
Couleur de police, 48
Menu contextuel jQuery, 267 Tableau
Taille de la police, 48
réactif jQuery, 269 Curseur jQuery, 262
Style de police, 48
Onglets jQuery, 263
Type de police, 48
Pied de page, 264
Forme, 97
K
Zone de forme, 97
Mots-clés, 41
Conditions de formulaire et calculs, 300 Validation de
formulaire, 297
FormWizard, 94
L
Menu Format, 48
Outils de formatage, 9
Langue, 70
FTP, 68, 272
Couche, 127
Mode plein écran, 26
Menu des calques, 152
Grille de mise en page, 131
g
Ligne, 172
Lien, 47
Styles généraux, 49
Couleur du lien, 40
Générateur, 41
Liens, 275
Mise en route, 7
ListView, 249
Global Replace, 77
Ecluse, 55
Aller au menu, 151
Verrouiller tout, 55
Google Fonts, 78
Verrouiller la taille de la
Gestionnaire de styles de dégradé, 287
page, 56 Journalisation, 68
styles de dégradés, 49
Outils de connexion - Admin, 209
Espacement de la grille, 56
Outils de connexion - Modifier le mot de passe, 211
Bordures de guide, 56
Outils de connexion - Supprimer le compte, 212 Outils
Paramètres du guide, 56
de connexion - Modifier le profil, 219 Outils de
connexion - Connexion, 213
Outils de connexion - Déconnexion, 214
H
Outils de connexion - Page protégée, 216 Outils de
Poignées, 14
connexion - Inscription, 217
En-tête, 265
Outils de connexion - Connexion sociale, 220
Titre, 85
Outils de connexion - Récupération de mot de passe,
Champs cachés, 103
215 Rechercher dans le dictionnaire, 49
Ligne horizontale, 84
HTML, 123
M
HTML 4.01 transitionnel, 35 teintes /
saturation, 88
Par défaut, 36
Feuille de style de lien hypertexte, 278
Chapiteau, 91
styles de lien hypertexte, 49
Cadre principal, 141
Hyperliens, 16
Lecteur multimédia, 147
Méga menu, 153
Barre de menus, 155
je
Nom du menu, 34
Image, 86
Fusionner les cellules, 51
Bouton d'image, 114
Balises Meta, 41
Carte illustrée, 183
Gestionnaire de thèmes mobiles, 76
Importer du HTML, 29
modal, 128
Cadre en ligne, 126
Forme Morphing, 179
Menu Insérer, 47
Effets de mouvement, 293
Insérer des lignes ou des colonnes, 51
Insérer un tableau, 51
307
WYSIWYGWeb Builder 16
N
Restaurer la taille d'origine, 25
Image de survol, 190
Barre de navigation, 156
Couche de survol, 130
Nouvelle page, 27
Texte de survol, 191
Nouveau site Web, 21
Rotation, 15, 88
Nouveau site Web à partir d'un modèle, 21
Rotation, 87
téléscripteur de fil d'actualité, 194
Flux RSS, 192
Dirigeants, 26
O
S
Gestionnaire d'objets, 284
Contours d'objets, 26
Enregistrer, 22
Balises Meta Open Graph, 41 Site
Gribouillage, 175
Web ouvert, 21
Recherche dans Google, 49
Options, 62
Index de recherche, 73
Menu Superposition, 158
Sélectionnez, 47
Tout sélectionner, 24
Forme, 176
P
Panier, 203
Pied de page, 143
Afficher la grille, 56
En-tête de page, 144
Inscrivez-vous pour un compte PayPal, 201
Hauteur de page, 34
Gestionnaire de site, 11, 280
Page HTML, 29
Plan du site, 60
Langue de la page, 36
Recherche sur site, 197
Propriétés de la page, 31
SiteTree, 163
Largeur de page, 34
Diaporama, 196
Pagination, 159
Curseur, 254
Panneau, 128
Parchemin d'accrochage, 164
Menu du panneau, 160
Accrocher à la grille, 26
Pâte, 24
Spinner, 256
Coller en place, 24
Cellule divisée, 51
Dons PayPal, 205
Pochoirs, 88
Outils de commerce électronique PayPal,
Collant, 128
201 Panier PayPal, 203 Galerie de photos,
Banque d'images, 185
186
Données structurées, 199
Outils de connexion PHP, 206
Gestionnaire de style, 287
Polygon, 174
Abonnements et paiements récurrents, 204 Symbole, 47
Aperçu, 17
Dossier d'aperçu, 68
Aperçu dans le navigateur, 23
T
Étendue de l'aperçu, 68
Barre de progression, 253
Menu à onglets, 165
Inspecteur des propriétés, 12, 286
Tableau HTML, 52
Publier, 18
Menu de table, 51
Options de publication, 68
Tables, 51
Publier dans un dossier local, 19
Onglets, 10, 251
Publier votre site Web, 271
Taille de l'écran cible, 34
modèles, 21
Texte, 92
R
Menu texte, 166
Bouton radio, 116
TextArea, 117
Scripts Java prêts à l'emploi, 189 Refaire,
Gestionnaire de thèmes, 75
25
Bouton Themeable, 243
Réflexion, 86
Menu à thème, 250
Supprimer la mise en forme, 49
Minuterie, 200
Supprimer le lien, 49
Titre, 34
Supprimer la page, 27
Toast, 252
Renommer la page, 28
Boîte à outils, 10, 79
Remplacer, 25
Menu Outils, 58
Rééchantillonner, 88
Info-bulles, 258
Menu réactif, 162
Transition, 291
Conception Web adaptative, 295 options de
Transitions, 46
conception Web adaptative, 63
Cartes Twitter, 42
308
WYSIWYGWeb Builder 16
U
Assistant, 257
Espace de travail, 10
Texte d'habillage, 145
Annuler, 25
Déverrouiller, 55
Tout débloquer, 55
X
Base de données des utilisateurs, 207
XHTML 1.0 transitionnel, 35
V
Oui
Vérifier les liens, 59
Bouton Afficher le panier, 203
You Tube, 148
Afficher le menu, 26
Couleur du lien visité, 40
Z
W
indice z, 285
Zoom, 26
ordre z, 285
Polices Web sécurisées, 50
309
