Objets répétés

Il arrive souvent que l'on veuille répéter des éléments sur chaque page du site. Le titre, le design de l'en- tête, les boutons de la barre de navigation supérieure et le pied de page de ce site en sont de bons exemples. Dans Web Designer, ces éléments sont appelés des « objets répétés » et comportent un petit symbole de fleur comme celui-ci dans leur coin supérieur droit lorsqu'ils sont sélectionnés. IIl est simple de créer vos objets répétés. Essayez d'ajouter un objet à cette page, une photo par exemple, ou dessinez un rectangle, ou ajoutez un design. Utilisez ensuite l'outil de sélection pour sélectionner l'objet puis cliquez dans le menu : Autre objet répété : le texte du pied de page en bas de chacune des pages. Utilisez l'outil texte pour cliquer sur le pied de page et éditez le texte normalement. Les changements se répercutent sur toutes les pages. (Conseil : si vous ne voulez pas de l'objet sur l'une des pages, supprimez-le de cette page. Si vous souhaitez qu'une copie de l'objet ne soit pas mise à jour automatiquement, cliquez dans le menu « Arranger > Arrêter la mise à jour ».)

Design Web réactif (seulement sur Designer Premium)

Web Designer peut créer des sites Web mobiles optimisés qui peuvent être ajustés de manière dynamique à la largeur de différents appareils. Ainsi, vous pouvez créer une version de votre site Web conçue spécialement pour téléphones à écran étroit et, par la même occasion, offrir une mise en page différente et des tailles de texte plus adaptées à des appareils aux écrans plus larges telles que les navigateurs de tablettes numériques ou de Bureau. Voici un exemple  basé sur un des modèles inclus qui fournit trois variantes de mise en page pour navigateurs de téléphone portable, de tablette et de Bureau. Vous remarquez que la version pour les largeurs de navigateurs étroits utilise une police d'écriture plus large ainsi que des arrangements de colonne et de navigation différents mieux adaptés aux écrans de petits appareils. Par ailleurs, Web Designer crée automatiquement des images en haute résolution et des graphiques pour des écrans Retina et en haute résolution.

Supersites (seulement sur Designer Premium)

Une autre nouvelle fonction de Web Designer 10 est appelée Xara Supersites. Elle fournit des animations et des transitions de page remarquables ainsi que des redimensionnements d'écran automatique. C'est une manière unique de permettre à votre site Web de sortir du lot. Supersite example 1 : un menu de restaurant réactif destiné aux navigateurs de tablettes et de Bureau. Faites pivoter votre appareil (ou modifiez la largeur de navigateur) pour voir une mise en page différente pour portrait et paysage (ceci n'est pas destiné à un téléphone mobile) avec un effet automatique d'ajustement écran. Supersite example 2 : un simple diaporama avec ajustement écran, détection d'orientation et des images en résolution Retina. Remarquez que cet exemple contient de larges photos en haute résolution et fonctionne de manière optimale avec une connexion rapide.

Présentations (seulement sur Designer Premium)

Si vous utilisez la version Premium de Web Designer, vous pouvez créer des présentations Web qui sont en fait des diaporamas « à la PowerPoint ». Vos visiteurs peuvent naviguer eux-mêmes parmi les pages, mais vous pouvez également piloter un diaporama à distance réservé à des visiteurs invités. Voici exemple de présentation Web.

Styles

Web Designer prend en charge les styles de texte. Dans l'outil de texte, vous trouverez un menu déroulant dédié au style, sur la barre d'infos, montrant une liste de styles utilisés dans le document. « Normal » est le corps de texte principal du document. Il y a aussi deux styles d'en-tête. Le style « En-tête 2 » est celui qui est utilisé en haut de ce paragraphe et d'autres. Afin d'actualiser l'apparence de ces en-têtes, sélectionnez simplement un en-tête, modifiez ce que vous souhaitez, comme la police, la taille, la couleur, etc. puis rendez-vous dans le menu déroulant de style et sélectionnez « Actualiser en-tête 2 ».

Police d'écriture Google (Seulement sur Premium)

Ce texte utilise une police d'écriture appelée Open Sans, une famille moderne et nette de polices d'écriture qui sont disponibles avec Web Designer. Dès maintenant, vous avez également un choix de plus de 600 polices d'écriture grâce à Google Fonts. Web designer inclus un sélectionneur de police de qualité qui téléchargera et installera automatiquement toutes les polices que vous choisirez. Et même mieux, une fois installées, ces polices d'écriture normales Windows fonctionneront avec tout logiciel Windows. Une fois utilisées dans vos documents Web, ces polices sont mises à disposition par le serveur de Google (ce qui vous épargne de la largeur de bande) et compatibles avec tous les navigateurs Web modernes. Pour visualiser et afficher une police Google à partir du menu déroulant de police (outil texte), cliquez sur le lien Ajouter indiqué ici.

Renvoi de texte

Si vous voulez qu'un objet renvoie le texte sur son passage, effectuez un clic droit dessus et cliquez sur « Renvoyer texte sous... ». Cela a pour effet de repousser le texte autour de l'objet lorsque vous le déplacez à travers la page. Bien sûr, cela modifiera l'agencement de tous les objets sur votre page, et vous devrez peut-être repositionner certains objets ou modifier la taille de la page pour bien organiser le texte repoussé.

Ajustements de page

Si vous ajoutez ou effacez du texte ici, la page sera redimensionnée pour s'ajuster aux modifications de texte, tous les éléments de page au-dessous seront déplacés vers le haut ou le bas selon le cas, y compris les fichiers images et les pieds de page. Même le graphique fleur dans la partie inférieure de la page restera au bon endroit. Ceux-ci sont contrôlés depuis le menu contextuel « Position sur page » (clic droit dans l'outil de sélection). Les éléments définis anti-chevauchement (tels qu cette colonne de texte) déplaceront le pied de page et les autres éléments également marqués anti-chevauchement. Vous pouvez coller des graphiques ou des photos en les imbriquant dans du texte mais aussi ancrer des graphiques « volants » à un point dans le texte. Cela signifie que le graphique se déplace avec le texte qui l'entoure pendant que vous l'éditez. Les deux images situées ci-dessous en sont des exemples : ajoutez quelques lignes vides au texte pour les voir se déplacer.

Sélection et visualisation de page

Une nouvelle galerie des pages et des calques est affichée à droite de la fenêtre. Cliquez sur une miniature pour aller à la page désirée. Cliquez sur le petit triangle à côté de la miniature d'une page pour agrandir la galerie afin de voir les calques de chaque page. Si vous préférez l'affichage déroulant du document, où toutes les pages sont affichées les unes en dessous des autres comme dans un programme de traitement de texte, effectuez un clic droit sur l'arrière-plan de la page et cliquez sur « Affichage pages multiples ».

Réagencer des pages et les renommer

Déplacez les miniatures des pages dans la galerie des pages et des calques pour les réagencer. Pour renommer une page, sélectionnez d'abord la page en cliquant dessus puis cliquez sur le petit nom de page affiché en bas de chaque miniature. (La première page de votre site Web doit toujours s'appeler « index ».)

Ajouter ou supprimer des pages

Si vous souhaitez créer une nouvelle page similaire à la page actuelle, cliquez sur cette icône dans la barre d'outils supérieure. (Ou menu « Éditer -> Pages ».) Si vous souhaitez ajouter une nouvelle page depuis les modèles, par exemple dans le style de cette page, ouvrez la galerie des designs, section « Thèmes de sites Web > Exemple gratuit », et placez un design de page dans ce document. Rien de plus simple pour que toutes les couleurs s'harmonisent ! Le set principal de modèles de pages installés se trouve dans les thèmes de sites Web - vous y trouverez de nombreux designs différents.

Autres outils

Explorez les autres outils et fonctions de Web Designer. Vous pouvez les tester sur la « bulle de BD » semi- transparente ci-dessous. Rappelez-vous que pour la plupart des opérations, vous devez d'abord sélectionner l'objet (cliquez dessus à l'aide de l'outil de sélection). Changez sa couleur : déposez sur la forme une couleur que vous avez sélectionnée en bas dans la palette de couleurs. Ou essayez l'éditeur de couleurs (Ctrl + E). Modifiez sa taille, sa position, son orientation : utilisez l'outil de sélection pour déplacer les quatre points de contrôle qui entourent la forme. Donnez-lui une ombre douce : choisissez l'outil ombre à gauche et passez-le sur votre forme de bulle. Ajustez les points de contrôle en haut. Attribuez-lui un remplissage de couleur dégradé : sélectionnez l'outil de remplissage (icône du pot de peinture) et passez-le sur votre forme. Tirez sur les extrémités des flèches pour ajuster. Essayez de placer une couleur sur les extrémités de la flèche. Ou sélectionnez une extrémité de la flèche et utilisez l'éditeur de couleurs (Ctrl + E). Rendez-la semi-transparente :  sélectionnez l'outil de transparence (le verre à vin) et ajustez le degré de transparence en vous servant du curseur en haut. Déplacez la forme à travers la page pour voir l'effet de transparence. Éditer la forme :  ceci est un peu plus compliqué. Sélectionnez la forme, sélectionnez l'outil d'édition des formes  (sur le menu escamotable du troisième outil sur la gauche) et passez-le sur l'un des bords de la forme ou sur l'un des petits points de contrôle. Si vous avez déjà utilisé des outils d'édition de vecteurs « Bézier », vous ne vous sentirez pas perdu. Pour finir : prévisualisez vos changements - tout ce que vous faites dans le navigateur Internet se déroule sans accroc ! (Si vous avez déjà utilisé d'autres outils de création de sites, des éditeurs HTML ou des logiciels de graphisme, vous verrez vraiment ce que Web Designer apporte de plus. Sa capacité à repositionner tous les éléments librement, les outils de graphisme et ses résultats « tel affichage, tel résultat » font de Web Designer un outil unique dans le domaine des outils de création de sites Web.)