Astuce WebAcappella : les outils pour construire son design (II) maquettes et pieds de page

Parce qu’il est indispensable d’avoir un site avec des pages au design homogène, WebAcappella vous propose les fonctionnalités « maquettes » et « pieds de page ». Elles vous permettront de construire des « modèles » avec des éléments récurrents à toutes ou à plusieurs des pages du site (bandeau, logo, menu(s) de navigation, couleur de fond…) et donc de gagner du temps dans la construction de votre site internet. Aussi lorsqu’il y a une modification à apporter, elle sera appliquée de manière identique sur toutes vos pages. 

Zoom sur ces fonctionnalités !

Les maquettes

Explorateur-maquettesDès le début de la création de votre nouveau projet web, direction « l’explorateur de maquettes » (à gauche de l’écran) et l’icône « + » pour ajouter une nouvelle maquette qui servira d’ossature à toutes vos pages.

Une nouvelle page entièrement vide est alors créée et identifiée par une couleur. Cette couleur vous servira de repère dans le cas où vous auriez par exemple plusieurs maquettes différentes pour vos pages (un modèle de page d’accueil, un modèle de page contact, etc).

Maintenant, par un simple clic-droit sur le plan de travail de votre maquette, accédez aux « Propriétés de la page » pour définir les dimensions de votre plan de travail que vous pourrez centrer ou non mais également l’image ou la couleur de votre arrière plan.

Placez maintenant votre menu de navigation, votre logo, slogan ou votre titre de site, le pied de page (footer) et tout autre élément que vous souhaitez retrouver sur toutes vos pages.

A noter : Si vous prévoyez d’avoir des pages de hauteurs différentes, nous vous conseillons de prévoir uniquement la partie haute de votre site. Vous créerez votre pied de page dans un second temps avec la fonction « pied de page ».

Explorateur pagesUne fois votre maquette finie, vous pourrez commencer à créer les différentes pages de votre site. Allez dans l’explorateur de pages, au dessus de l’explorateur de maquettes. Commencez votre première page en lui appliquant la maquette de votre choix. Lors de la création d’un nouveau site, WebAcappella vous propose par défaut une première page vide appelée « Home », elle correspondra à la page d’accueil de votre site.

Proprietes pagePour appliquer une maquette à une de vos pages, accédez à la page puis faites un double-clic sur le plan de travail. La fenêtre « Propriétés de la page » apparaît. Sélectionnez l’onglet « Fond » représenté par un carré bleu et cochez l’option « Utiliser une maquette comme arrière-plan ». Sélectionnez la maquette de votre choix puis cliquez sur « OK » pour valider.

Votre page est maintenant structurée selon le modèle de la maquette. A vous de placer votre contenu et d’ajouter de nouvelles pages qui auront la même structure.

A noter : les éléments présents dans la maquette ne sont pas modifiables directement sur les pages.

Pour aller plus loin avec les maquettes : les pieds de page

Un « pied de page » est une maquette qui contient uniquement les éléments du bas de page. Il est intéressant de créer le pied de page dans une maquette différente car il s’adapte à la hauteur de vos pages et viendra ainsi s’insérer automatiquement en bas du dernier élément placé.

Créez une nouvelle maquette que vous nommerez « pied de page ».

Vous pouvez construire votre pied de page avec un bandeau de couleur, une zone de texte incluant les mentions de copyright et les liens hypertexte vers vos « mentions légales » et votre page de « contact ». Attention, placez vos éléments directement en haut de la page, vous éviterez ainsi d’avoir des espaces en blanc au dessus de votre pied de page.

Exemple de footer :

Footer

Une fois votre modèle de pied de page créé, vous allez pouvoir l’ajouter à vos pages.

A noter : Un pied de page peut être appliqué à une page ou à une maquette. Attention, vous ne pouvez pas appliquer sur une même page à la fois une maquette et un pied de page. Si vous utilisez déjà une maquette pour les pages de votre site, appliquez directement le pied de page à la maquette. Si vous n’utilisez pas de maquette pour vos pages, vous pourrez alors définir le pied de page de votre choix.

Si vous utilisez une maquette…

Depuis l’explorateur de maquettes, sélectionnez votre maquette, faites un clic-droit puis choisissez « Propriétés de la page » et l’onglet « Fond ». En cliquant sur « Choisir un pied de page », vous allez pouvoir sélectionner la maquette que vous avez nommée « pied de page ». Enregistrez en faisant « OK ». Le pied de page va automatiquement se placer en dessous du dernier élément inséré dans les pages comportant cette maquette.

Si vous n’utilisez pas de maquette…

La manipulation est identique, mais il faudra aller dans l’explorateur de pages et sélectionner la page à laquelle vous voulez appliquer votre pied de page.

Ne vous inquiétez pas si vous ne voyez pas le pied de page ajouté à votre page. L’affichage sera actif une fois votre site publié. Vous pouvez toujours visualiser le rendu final de votre page en cliquant sur « Tester ».

Notre série en deux articles sur les outils pour construire son design est finie ! Vous connaissez tout maintenant des règles, des calques et des maquettes dans WebAcappella, donc à vous de jouer !

1 Comment

  1. jpduburcq

    Sur le site http://www.tourismecondeenbrie.com j’ai utilisé cette méthode avec trois maquettes de hauteurs différentes, en fonction du contenu de chaque page du site, ceci à cause de la colonne de gauche.

Les commentaires sont fermés.